18 lines
2.1 KiB
JSON
18 lines
2.1 KiB
JSON
{
|
|
"name": "toggle",
|
|
"dependencies": [],
|
|
"registryDependencies": [
|
|
"utils"
|
|
],
|
|
"files": [
|
|
{
|
|
"name": "Toggle.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue'\nimport { type ToggleVariants, toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n class?: HTMLAttributes['class']\n variant?: ToggleVariants['variant']\n size?: ToggleVariants['size']\n}>(), {\n variant: 'default',\n size: 'default',\n disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, size, variant, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <Toggle\n v-bind=\"forwarded\"\n :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n >\n <slot />\n </Toggle>\n</template>\n"
|
|
},
|
|
{
|
|
"name": "index.ts",
|
|
"content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n {\n variants: {\n variant: {\n default: 'bg-transparent',\n outline:\n 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n },\n size: {\n default: 'h-10 px-3',\n sm: 'h-9 px-2.5',\n lg: 'h-11 px-5',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n"
|
|
}
|
|
],
|
|
"type": "components:ui"
|
|
} |