20 lines
2.2 KiB
JSON
20 lines
2.2 KiB
JSON
{
|
|
"name": "toggle",
|
|
"dependencies": [
|
|
"radix-vue"
|
|
],
|
|
"registryDependencies": [
|
|
"utils"
|
|
],
|
|
"files": [
|
|
{
|
|
"name": "Toggle.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useEmitAsProps } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n variant?: ToggleVariantProps['variant']\n size?: ToggleVariantProps['size']\n}\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { variant, size, ...otherProps } = props\n return otherProps\n})\n</script>\n\n<template>\n <Toggle\n v-bind=\"{ ...toggleProps, ...useEmitAsProps(emits) }\"\n :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n >\n <slot />\n </Toggle>\n</template>\n"
|
|
},
|
|
{
|
|
"name": "index.ts",
|
|
"content": "import { 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"
|
|
}
|
|
],
|
|
"type": "components:ui"
|
|
} |