chore: build registry
This commit is contained in:
Sadegh Barati
parent
5d85fff464
commit
5567b0666f
|
|
@ -275,7 +275,8 @@
|
||||||
"zod"
|
"zod"
|
||||||
],
|
],
|
||||||
"registryDependencies": [
|
"registryDependencies": [
|
||||||
"utils"
|
"utils",
|
||||||
|
"label"
|
||||||
],
|
],
|
||||||
"files": [
|
"files": [
|
||||||
"ui/form/FormControl.vue",
|
"ui/form/FormControl.vue",
|
||||||
|
|
@ -455,6 +456,8 @@
|
||||||
"ui/select/SelectItem.vue",
|
"ui/select/SelectItem.vue",
|
||||||
"ui/select/SelectItemText.vue",
|
"ui/select/SelectItemText.vue",
|
||||||
"ui/select/SelectLabel.vue",
|
"ui/select/SelectLabel.vue",
|
||||||
|
"ui/select/SelectScrollDownButton.vue",
|
||||||
|
"ui/select/SelectScrollUpButton.vue",
|
||||||
"ui/select/SelectSeparator.vue",
|
"ui/select/SelectSeparator.vue",
|
||||||
"ui/select/SelectTrigger.vue",
|
"ui/select/SelectTrigger.vue",
|
||||||
"ui/select/SelectValue.vue",
|
"ui/select/SelectValue.vue",
|
||||||
|
|
|
||||||
|
|
@ -7,19 +7,19 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Accordion.vue",
|
"name": "Accordion.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n AccordionRoot,\n type AccordionRootEmits,\n type AccordionRootProps,\n useEmitAsProps,\n} from 'radix-vue'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n</script>\n\n<template>\n <AccordionRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </AccordionRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport {\n AccordionRoot,\n type AccordionRootEmits,\n type AccordionRootProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <AccordionRoot v-bind=\"forwarded\">\n <slot />\n </AccordionRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AccordionContent.vue",
|
"name": "AccordionContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { AccordionContent, type AccordionContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionContentProps & { class?: string }>()\n</script>\n\n<template>\n <AccordionContent\n v-bind=\"props\"\n :class=\"\n cn(\n 'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',\n props.class,\n )\n \"\n >\n <div class=\"pb-4 pt-0\">\n <slot />\n </div>\n </AccordionContent>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AccordionContent, type AccordionContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <AccordionContent\n v-bind=\"delegatedProps\"\n class=\"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n >\n <div :class=\"cn('pb-4 pt-0', props.class)\">\n <slot />\n </div>\n </AccordionContent>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AccordionItem.vue",
|
"name": "AccordionItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { AccordionItem, type AccordionItemProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionItemProps & { class?: string }>()\n</script>\n\n<template>\n <AccordionItem\n v-bind=\"props\"\n :class=\"cn('border-b', props.class ?? '')\"\n >\n <slot />\n </AccordionItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <AccordionItem\n v-bind=\"forwardedProps\"\n :class=\"cn('border-b', props.class)\"\n >\n <slot />\n </AccordionItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AccordionTrigger.vue",
|
"name": "AccordionTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n AccordionHeader,\n AccordionTrigger,\n type AccordionTriggerProps,\n} from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionTriggerProps & { class?: string }>()\n</script>\n\n<template>\n <AccordionHeader class=\"flex\" as=\"div\">\n <AccordionTrigger\n v-bind=\"props\"\n :class=\"\n cn(\n 'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n props.class,\n )\n \"\n >\n <slot />\n <ChevronDown\n class=\"h-4 w-4 shrink-0 transition-transform duration-200\"\n />\n </AccordionTrigger>\n </AccordionHeader>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n AccordionHeader,\n AccordionTrigger,\n type AccordionTriggerProps,\n} from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <AccordionHeader class=\"flex\">\n <AccordionTrigger\n v-bind=\"delegatedProps\"\n :class=\"\n cn(\n 'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n props.class,\n )\n \"\n >\n <slot />\n <slot name=\"icon\">\n <ChevronDown\n class=\"h-4 w-4 shrink-0 transition-transform duration-200\"\n />\n </slot>\n </AccordionTrigger>\n </AccordionHeader>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -12,31 +12,31 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertDialogAction.vue",
|
"name": "AlertDialogAction.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<AlertDialogActionProps>()\n</script>\n\n<template>\n <AlertDialogAction v-bind=\"props\" :class=\"cn(buttonVariants(), $attrs.class ?? '')\">\n <slot />\n </AlertDialogAction>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n <slot />\n </AlertDialogAction>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertDialogCancel.vue",
|
"name": "AlertDialogCancel.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<AlertDialogCancelProps>()\n</script>\n\n<template>\n <AlertDialogCancel v-bind=\"props\" :class=\"cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', $attrs.class ?? '')\">\n <slot />\n </AlertDialogCancel>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <AlertDialogCancel v-bind=\"delegatedProps\" :class=\"cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)\">\n <slot />\n </AlertDialogCancel>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertDialogContent.vue",
|
"name": "AlertDialogContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n AlertDialogContent,\n type AlertDialogContentEmits,\n type AlertDialogContentProps,\n AlertDialogOverlay,\n AlertDialogPortal,\n useEmitAsProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogContentProps & { class?: string }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <AlertDialogPortal>\n <AlertDialogOverlay\n class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n />\n <AlertDialogContent\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :class=\"\n cn(\n 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',\n props.class,\n )\n \"\n >\n <slot />\n </AlertDialogContent>\n </AlertDialogPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n AlertDialogContent,\n type AlertDialogContentEmits,\n type AlertDialogContentProps,\n AlertDialogOverlay,\n AlertDialogPortal,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <AlertDialogPortal>\n <AlertDialogOverlay\n class=\"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n />\n <AlertDialogContent\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n props.class,\n )\n \"\n >\n <slot />\n </AlertDialogContent>\n </AlertDialogPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertDialogDescription.vue",
|
"name": "AlertDialogDescription.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n AlertDialogDescription,\n type AlertDialogDescriptionProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n <AlertDialogDescription\n :class=\"cn('text-muted-foreground text-sm', props.class)\"\n :as-child=\"props.asChild\"\n >\n <slot />\n </AlertDialogDescription>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n AlertDialogDescription,\n type AlertDialogDescriptionProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <AlertDialogDescription\n v-bind=\"delegatedProps\"\n :class=\"cn('text-sm text-muted-foreground', props.class)\"\n >\n <slot />\n </AlertDialogDescription>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertDialogFooter.vue",
|
"name": "AlertDialogFooter.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'flex flex-col space-y-2 sm:space-y-0 mt-3.5 sm:flex-row sm:justify-end sm:space-x-2',\n props.class,\n )\n \"\n >\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n props.class,\n )\n \"\n >\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertDialogHeader.vue",
|
"name": "AlertDialogHeader.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div\n :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n >\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <div\n :class=\"cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\"\n >\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertDialogTitle.vue",
|
"name": "AlertDialogTitle.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: string }>()\n</script>\n\n<template>\n <AlertDialogTitle\n :as-child=\"props.asChild\"\n :class=\"cn('text-lg text-foreground font-semibold', props.class)\"\n >\n <slot />\n </AlertDialogTitle>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <AlertDialogTitle\n v-bind=\"delegatedProps\"\n :class=\"cn('text-lg font-semibold', props.class)\"\n >\n <slot />\n </AlertDialogTitle>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertDialogTrigger.vue",
|
"name": "AlertDialogTrigger.vue",
|
||||||
|
|
|
||||||
|
|
@ -7,19 +7,19 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Alert.vue",
|
"name": "Alert.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { alertVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n variant?: NonNullable<Parameters<typeof alertVariants>[0]>['variant']\n class?: string\n}\n\nconst props = defineProps<Props>()\n</script>\n\n<template>\n <div :class=\"cn(alertVariants({ variant }), props.class ?? '')\">\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { type AlertVariants, alertVariants } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n variant?: AlertVariants['variant']\n}>()\n</script>\n\n<template>\n <div :class=\"cn(alertVariants({ variant }), props.class)\" role=\"alert\">\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertDescription.vue",
|
"name": "AlertDescription.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: String,\n})\n</script>\n\n<template>\n <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertTitle.vue",
|
"name": "AlertTitle.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', $attrs.class ?? '')\">\n <slot />\n </h5>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', props.class)\">\n <slot />\n </h5>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
"content": "import { cva } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\n\nexport const alertVariants = cva(\n 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',\n {\n variants: {\n variant: {\n default: 'bg-background text-foreground',\n destructive:\n 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n"
|
"content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\n\nexport const alertVariants = cva(\n 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',\n {\n variants: {\n variant: {\n default: 'bg-background text-foreground',\n destructive:\n 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "components:ui"
|
"type": "components:ui"
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Avatar.vue",
|
"name": "Avatar.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { AvatarRoot } from 'radix-vue'\nimport { avatarVariant } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n size?: NonNullable<Parameters<typeof avatarVariant>[0]>['size']\n shape?: NonNullable<Parameters<typeof avatarVariant>[0]>['shape']\n class?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n size: 'sm',\n shape: 'circle',\n})\n</script>\n\n<template>\n <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n <slot />\n </AvatarRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { AvatarRoot } from 'radix-vue'\nimport { type AvatarVariants, avatarVariant } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<{\n class?: HTMLAttributes['class']\n size?: AvatarVariants['size']\n shape?: AvatarVariants['shape']\n}>(), {\n size: 'sm',\n shape: 'circle',\n})\n</script>\n\n<template>\n <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n <slot />\n </AvatarRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AvatarFallback.vue",
|
"name": "AvatarFallback.vue",
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
"content": "import { cva } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\n\nexport const avatarVariant = cva(\n 'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',\n {\n variants: {\n size: {\n sm: 'h-10 w-10 text-xs',\n base: 'h-16 w-16 text-2xl',\n lg: 'h-32 w-32 text-5xl',\n },\n shape: {\n circle: 'rounded-full',\n square: 'rounded-md',\n },\n },\n },\n)\n"
|
"content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\n\nexport const avatarVariant = cva(\n 'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',\n {\n variants: {\n size: {\n sm: 'h-10 w-10 text-xs',\n base: 'h-16 w-16 text-2xl',\n lg: 'h-32 w-32 text-5xl',\n },\n shape: {\n circle: 'rounded-full',\n square: 'rounded-md',\n },\n },\n },\n)\n\nexport type AvatarVariants = VariantProps<typeof avatarVariant>\n"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "components:ui"
|
"type": "components:ui"
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,11 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Badge.vue",
|
"name": "Badge.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { badgeVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface BadgeVariantProps extends VariantProps<typeof badgeVariants> {}\n\ninterface Props {\n variant?: BadgeVariantProps['variant']\n}\ndefineProps<Props>()\n</script>\n\n<template>\n <div :class=\"cn(badgeVariants({ variant }), $attrs.class ?? '')\">\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { type BadgeVariants, badgeVariants } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n variant?: BadgeVariants['variant']\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <div :class=\"cn(badgeVariants({ variant }), props.class)\">\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
"content": "import { cva } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n {\n variants: {\n variant: {\n default:\n 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',\n secondary:\n 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n destructive:\n 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',\n outline: 'text-foreground',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n"
|
"content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n {\n variants: {\n variant: {\n default:\n 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n secondary:\n 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n destructive:\n 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',\n outline: 'text-foreground',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "components:ui"
|
"type": "components:ui"
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,11 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Button.vue",
|
"name": "Button.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ButtonVariantProps extends VariantProps<typeof buttonVariants> {}\n\ninterface Props extends PrimitiveProps {\n variant?: ButtonVariantProps['variant']\n size?: ButtonVariantProps['size']\n as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n as: 'button',\n})\n</script>\n\n<template>\n <Primitive\n :as=\"as\"\n :as-child=\"asChild\"\n :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n >\n <slot />\n </Primitive>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { type ButtonVariants, buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends PrimitiveProps {\n variant?: ButtonVariants['variant']\n size?: ButtonVariants['size']\n as?: string\n class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n as: 'button',\n})\n</script>\n\n<template>\n <Primitive\n :as=\"as\"\n :as-child=\"asChild\"\n :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n >\n <slot />\n </Primitive>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
"content": "import { cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n 'inline-flex items-center justify-center rounded-md whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n destructive:\n 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n outline:\n 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n secondary:\n 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n ghost: 'hover:bg-accent hover:text-accent-foreground',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n size: {\n default: 'h-10 px-4 py-2',\n sm: 'h-9 rounded-md px-3',\n lg: 'h-11 rounded-md px-8',\n icon: 'h-10 w-10',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n)\n"
|
"content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n destructive:\n 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n outline:\n 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n secondary:\n 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n ghost: 'hover:bg-accent hover:text-accent-foreground',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n size: {\n default: 'h-9 px-4 py-2',\n sm: 'h-8 rounded-md px-3 text-xs',\n lg: 'h-10 rounded-md px-8',\n icon: 'h-9 w-9',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "components:ui"
|
"type": "components:ui"
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -7,27 +7,27 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Card.vue",
|
"name": "Card.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'rounded-lg border bg-card text-card-foreground shadow-sm',\n props.class,\n )\n \"\n >\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'rounded-lg border bg-card text-card-foreground shadow-sm',\n props.class,\n )\n \"\n >\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CardContent.vue",
|
"name": "CardContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div :class=\"cn('p-6 pt-0', props.class)\">\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <div :class=\"cn('p-6 pt-0', props.class)\">\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CardDescription.vue",
|
"name": "CardDescription.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n <slot />\n </p>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n <slot />\n </p>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CardFooter.vue",
|
"name": "CardFooter.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div :class=\"cn('p-6 pt-0', props.class)\">\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <div :class=\"cn('flex items-center p-6 pt-0', props.class)\">\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CardHeader.vue",
|
"name": "CardHeader.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div :class=\"cn('flex flex-col space-y-1.5 p-6', props.class)\">\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <div :class=\"cn('flex flex-col gap-y-1.5 p-6', props.class)\">\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CardTitle.vue",
|
"name": "CardTitle.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <h3\n :class=\"\n cn('text-2xl font-semibold leading-none tracking-tighter', props.class)\n \"\n >\n <slot />\n </h3>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <h3\n :class=\"\n cn('font-semibold leading-none tracking-tight', props.class)\n \"\n >\n <slot />\n </h3>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -15,11 +15,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CarouselContent.vue",
|
"name": "CarouselContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { useCarousel } from './useCarousel'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n <div ref=\"carouselRef\" class=\"overflow-hidden\">\n <div\n :class=\"\n cn(\n 'flex',\n orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n props.class,\n )\"\n v-bind=\"$attrs\"\n >\n <slot />\n </div>\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n <div ref=\"carouselRef\" class=\"overflow-hidden\">\n <div\n :class=\"\n cn(\n 'flex',\n orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n props.class,\n )\"\n v-bind=\"$attrs\"\n >\n <slot />\n </div>\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CarouselItem.vue",
|
"name": "CarouselItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { useCarousel } from './useCarousel'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n <div\n role=\"group\"\n aria-roledescription=\"slide\"\n :class=\"cn(\n 'min-w-0 shrink-0 grow-0 basis-full',\n orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n props.class,\n )\"\n >\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n <div\n role=\"group\"\n aria-roledescription=\"slide\"\n :class=\"cn(\n 'min-w-0 shrink-0 grow-0 basis-full',\n orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n props.class,\n )\"\n >\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CarouselNext.vue",
|
"name": "CarouselNext.vue",
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Checkbox.vue",
|
"name": "Checkbox.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CheckboxRootProps>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <CheckboxRoot\n v-bind=\"forwarded\"\n :class=\"\n cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n $attrs.class ?? '')\"\n >\n <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n <Check class=\"h-4 w-4\" />\n </CheckboxIndicator>\n </CheckboxRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <CheckboxRoot\n v-bind=\"forwarded\"\n :class=\"\n cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n props.class)\"\n >\n <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n <slot>\n <Check class=\"h-4 w-4\" />\n </slot>\n </CheckboxIndicator>\n </CheckboxRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Collapsible.vue",
|
"name": "Collapsible.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { CollapsibleRoot, useEmitAsProps } from 'radix-vue'\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n</script>\n\n<template>\n <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot :open=\"open\" />\n </CollapsibleRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n <slot :open=\"open\" />\n </CollapsibleRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CollapsibleContent.vue",
|
"name": "CollapsibleContent.vue",
|
||||||
|
|
|
||||||
|
|
@ -8,39 +8,39 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Command.vue",
|
"name": "Command.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxRootProps>()\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ComboboxRoot\n v-bind=\"forwarded\"\n :open=\"true\"\n :model-value=\"''\"\n :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')\"\n >\n <slot />\n </ComboboxRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n open: true,\n modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ComboboxRoot\n v-bind=\"forwarded\"\n :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n >\n <slot />\n </ComboboxRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CommandDialog.vue",
|
"name": "CommandDialog.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { useEmitAsProps } from 'radix-vue'\nimport type { DialogRootEmits, DialogRootProps } from 'radix-vue'\nimport Command from './Command.vue'\nimport { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <Dialog v-bind=\"{ ...props, ...emitsAsProps }\">\n <DialogContent class=\"p-0 overflow-hidden shadow-lg\">\n <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n <slot />\n </Command>\n </DialogContent>\n </Dialog>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { useForwardPropsEmits } from 'radix-vue'\nimport type { DialogRootEmits, DialogRootProps } from 'radix-vue'\nimport Command from './Command.vue'\nimport { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <Dialog v-bind=\"forwarded\">\n <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n <slot />\n </Command>\n </DialogContent>\n </Dialog>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CommandEmpty.vue",
|
"name": "CommandEmpty.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'radix-vue'\nimport { ComboboxEmpty } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxEmptyProps>()\n</script>\n\n<template>\n <ComboboxEmpty v-bind=\"props\" :class=\"cn('py-6 text-center text-sm', $attrs.class ?? '')\">\n <slot />\n </ComboboxEmpty>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxEmptyProps } from 'radix-vue'\nimport { ComboboxEmpty } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n <slot />\n </ComboboxEmpty>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CommandGroup.vue",
|
"name": "CommandGroup.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'radix-vue'\nimport { ComboboxGroup, ComboboxLabel } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxGroupProps & {\n heading?: string\n}>()\n</script>\n\n<template>\n <ComboboxGroup\n v-bind=\"props\"\n :class=\"cn('overflow-hidden p-1 text-foreground', $attrs.class ?? '')\"\n >\n <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n {{ heading }}\n </ComboboxLabel>\n <slot />\n </ComboboxGroup>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxGroupProps } from 'radix-vue'\nimport { ComboboxGroup, ComboboxLabel } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxGroupProps & {\n class?: HTMLAttributes['class']\n heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ComboboxGroup\n v-bind=\"delegatedProps\"\n :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n >\n <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n {{ heading }}\n </ComboboxLabel>\n <slot />\n </ComboboxGroup>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CommandInput.vue",
|
"name": "CommandInput.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxInputProps>()\n</script>\n\n<script lang=\"ts\">\nexport default {\n inheritAttrs: false,\n}\n</script>\n\n<template>\n <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n <ComboboxInput\n v-bind=\"{ ...props, ...$attrs }\"\n auto-focus\n :class=\"cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')\"\n />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n <ComboboxInput\n v-bind=\"{ ...forwardedProps, ...$attrs }\"\n auto-focus\n :class=\"cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CommandItem.vue",
|
"name": "CommandItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { ComboboxItem, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxItemProps>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <ComboboxItem\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', $attrs.class ?? '')\"\n @select.prevent\n >\n <slot />\n </ComboboxItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { ComboboxItem, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ComboboxItem\n v-bind=\"forwarded\"\n :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n @select.prevent\n >\n <slot />\n </ComboboxItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CommandList.vue",
|
"name": "CommandList.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'\nimport { ComboboxContent, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxContentProps>()\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', $attrs.class ?? '')\">\n <div role=\"presentation\">\n <slot />\n </div>\n </ComboboxContent>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'\nimport { ComboboxContent, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n <div role=\"presentation\">\n <slot />\n </div>\n </ComboboxContent>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CommandSeparator.vue",
|
"name": "CommandSeparator.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'radix-vue'\nimport { ComboboxSeparator } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxSeparatorProps>()\n</script>\n\n<template>\n <ComboboxSeparator\n v-bind=\"props\"\n :class=\"cn('-mx-1 h-px bg-border', $attrs.class ?? '')\"\n >\n <slot />\n </ComboboxSeparator>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxSeparatorProps } from 'radix-vue'\nimport { ComboboxSeparator } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ComboboxSeparator\n v-bind=\"delegatedProps\"\n :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n >\n <slot />\n </ComboboxSeparator>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CommandShortcut.vue",
|
"name": "CommandShortcut.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', $attrs.class ?? '')\">\n <slot />\n </span>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n <slot />\n </span>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -11,11 +11,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuCheckboxItem.vue",
|
"name": "ContextMenuCheckboxItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuCheckboxItem,\n type ContextMenuCheckboxItemEmits,\n type ContextMenuCheckboxItemProps,\n ContextMenuItemIndicator,\n useEmitAsProps,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n</script>\n\n<template>\n <ContextMenuCheckboxItem\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n :class=\"[\n cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n ),\n ]\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <ContextMenuItemIndicator\n class=\"absolute left-1.5 inline-flex w-4 h-4 items-center justify-center\"\n >\n <Check class=\"h-4 h-w\" />\n </ContextMenuItemIndicator>\n </span>\n <slot />\n </ContextMenuCheckboxItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuCheckboxItem,\n type ContextMenuCheckboxItemEmits,\n type ContextMenuCheckboxItemProps,\n ContextMenuItemIndicator,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ContextMenuCheckboxItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <ContextMenuItemIndicator>\n <Check class=\"h-4 w-4\" />\n </ContextMenuItemIndicator>\n </span>\n <slot />\n </ContextMenuCheckboxItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuContent.vue",
|
"name": "ContextMenuContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuContent,\n type ContextMenuContentEmits,\n type ContextMenuContentProps,\n ContextMenuPortal,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuContentProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuPortal>\n <ContextMenuContent\n :align-offset=\"props.alignOffset\"\n :class=\"[\n cn(\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n ),\n ]\"\n v-bind=\"forwarded\"\n >\n <slot />\n </ContextMenuContent>\n </ContextMenuPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuContent,\n type ContextMenuContentEmits,\n type ContextMenuContentProps,\n ContextMenuPortal,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ContextMenuPortal>\n <ContextMenuContent\n v-bind=\"forwarded\"\n :class=\"cn(\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\"\n >\n <slot />\n </ContextMenuContent>\n </ContextMenuPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuGroup.vue",
|
"name": "ContextMenuGroup.vue",
|
||||||
|
|
@ -23,11 +23,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuItem.vue",
|
"name": "ContextMenuItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuItem,\n type ContextMenuItemEmits,\n type ContextMenuItemProps,\n useEmitAsProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuItemProps & { class?: string; inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n</script>\n\n<template>\n <ContextMenuItem\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n :class=\"[\n cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n >\n <slot />\n </ContextMenuItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuItem,\n type ContextMenuItemEmits,\n type ContextMenuItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ContextMenuItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n </ContextMenuItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuLabel.vue",
|
"name": "ContextMenuLabel.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: string; inset?: boolean }>()\n</script>\n\n<template>\n <ContextMenuLabel\n v-bind=\"props\"\n :class=\"\n cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n inset && 'pl-8', props.class ?? '',\n )\"\n >\n <slot />\n </ContextMenuLabel>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ContextMenuLabel\n v-bind=\"delegatedProps\"\n :class=\"\n cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n inset && 'pl-8', props.class,\n )\"\n >\n <slot />\n </ContextMenuLabel>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuPortal.vue",
|
"name": "ContextMenuPortal.vue",
|
||||||
|
|
@ -39,15 +39,15 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuRadioItem.vue",
|
"name": "ContextMenuRadioItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuItemIndicator,\n ContextMenuRadioItem,\n type ContextMenuRadioItemEmits,\n type ContextMenuRadioItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuRadioItem\n v-bind=\"forwarded\"\n :class=\"[\n cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n ),\n ]\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <ContextMenuItemIndicator>\n <Circle class=\"h-2 w-2 fill-current\" />\n </ContextMenuItemIndicator>\n </span>\n <slot />\n </ContextMenuRadioItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuItemIndicator,\n ContextMenuRadioItem,\n type ContextMenuRadioItemEmits,\n type ContextMenuRadioItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ContextMenuRadioItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <ContextMenuItemIndicator>\n <Circle class=\"h-2 w-2 fill-current\" />\n </ContextMenuItemIndicator>\n </span>\n <slot />\n </ContextMenuRadioItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuSeparator.vue",
|
"name": "ContextMenuSeparator.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSeparator,\n type ContextMenuSeparatorProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSeparatorProps>()\n</script>\n\n<template>\n <ContextMenuSeparator v-bind=\"props\" :class=\"cn('-mx-1 my-1 h-px bg-border', $attrs.class ?? '')\" />\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuSeparator,\n type ContextMenuSeparatorProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuShortcut.vue",
|
"name": "ContextMenuShortcut.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', $attrs.class ?? '')\">\n <slot />\n </span>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n <slot />\n </span>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuSub.vue",
|
"name": "ContextMenuSub.vue",
|
||||||
|
|
@ -55,15 +55,15 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuSubContent.vue",
|
"name": "ContextMenuSubContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSubContent,\n type DropdownMenuSubContentEmits,\n type DropdownMenuSubContentProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: string }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuSubContent\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </ContextMenuSubContent>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuSubContent,\n type DropdownMenuSubContentEmits,\n type DropdownMenuSubContentProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ContextMenuSubContent\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </ContextMenuSubContent>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuSubTrigger.vue",
|
"name": "ContextMenuSubTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSubTrigger,\n type ContextMenuSubTriggerProps,\n} from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?: boolean }>()\n</script>\n\n<template>\n <ContextMenuSubTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n >\n <slot />\n <ChevronRight class=\"ml-auto h-4 w-4\" />\n </ContextMenuSubTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuSubTrigger,\n type ContextMenuSubTriggerProps,\n useForwardProps,\n} from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <ContextMenuSubTrigger\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n <ChevronRight class=\"ml-auto h-4 w-4\" />\n </ContextMenuSubTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuTrigger.vue",
|
"name": "ContextMenuTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n</script>\n\n<template>\n <ContextMenuTrigger v-bind=\"props\">\n <slot />\n </ContextMenuTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n <ContextMenuTrigger v-bind=\"forwardedProps\">\n <slot />\n </ContextMenuTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -15,23 +15,23 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DialogContent.vue",
|
"name": "DialogContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n DialogClose,\n DialogContent,\n type DialogContentEmits,\n type DialogContentProps,\n DialogOverlay,\n DialogPortal,\n useEmitAsProps,\n} from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogContentProps & { class?: string }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <DialogPortal>\n <DialogOverlay\n class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n />\n <DialogContent\n :class=\"\n cn(\n 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',\n props.class,\n )\n \"\n v-bind=\"{ ...props, ...emitsAsProps }\"\n >\n <slot />\n\n <DialogClose\n class=\"absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n >\n <X class=\"w-4 h-4\" />\n <span class=\"sr-only\">Close</span>\n </DialogClose>\n </DialogContent>\n </DialogPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n DialogClose,\n DialogContent,\n type DialogContentEmits,\n type DialogContentProps,\n DialogOverlay,\n DialogPortal,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <DialogPortal>\n <DialogOverlay\n class=\"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n />\n <DialogContent\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n props.class,\n )\"\n >\n <slot />\n\n <DialogClose\n class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\"\n >\n <X class=\"w-4 h-4\" />\n <span class=\"sr-only\">Close</span>\n </DialogClose>\n </DialogContent>\n </DialogPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DialogDescription.vue",
|
"name": "DialogDescription.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n <DialogDescription\n v-bind=\"props\"\n :class=\"cn('text-muted-foreground text-sm', props.class)\"\n >\n <slot />\n </DialogDescription>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <DialogDescription\n v-bind=\"forwardedProps\"\n :class=\"cn('text-sm text-muted-foreground', props.class)\"\n >\n <slot />\n </DialogDescription>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DialogFooter.vue",
|
"name": "DialogFooter.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface DialogFooterProps {\n class?: string\n}\n\nconst props = defineProps<DialogFooterProps>()\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'flex flex-col space-y-2 sm:space-y-0 mt-1.5 sm:flex-row sm:justify-end sm:space-x-2',\n props.class,\n )\n \"\n >\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n props.class,\n )\n \"\n >\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DialogHeader.vue",
|
"name": "DialogHeader.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface DialogHeaderProps {\n class?: string\n}\n\nconst props = defineProps<DialogHeaderProps>()\n</script>\n\n<template>\n <div\n :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n >\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <div\n :class=\"cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)\"\n >\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DialogTitle.vue",
|
"name": "DialogTitle.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: string }>()\n</script>\n\n<template>\n <DialogTitle\n v-bind=\"props\"\n :class=\"\n cn(\n 'text-lg text-foreground font-semibold leading-none tracking-tight',\n props.class,\n )\n \"\n >\n <slot />\n </DialogTitle>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <DialogTitle\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'text-lg font-semibold leading-none tracking-tight',\n props.class,\n )\n \"\n >\n <slot />\n </DialogTitle>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DialogTrigger.vue",
|
"name": "DialogTrigger.vue",
|
||||||
|
|
|
||||||
|
|
@ -11,11 +11,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuCheckboxItem.vue",
|
"name": "DropdownMenuCheckboxItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuCheckboxItem,\n type DropdownMenuCheckboxItemEmits,\n type DropdownMenuCheckboxItemProps,\n DropdownMenuItemIndicator,\n useEmitAsProps,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n</script>\n\n<template>\n <DropdownMenuCheckboxItem\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n :class=\" cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <DropdownMenuItemIndicator>\n <Check class=\"w-4 h-4\" />\n </DropdownMenuItemIndicator>\n </span>\n <slot />\n </DropdownMenuCheckboxItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n DropdownMenuCheckboxItem,\n type DropdownMenuCheckboxItemEmits,\n type DropdownMenuCheckboxItemProps,\n DropdownMenuItemIndicator,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <DropdownMenuCheckboxItem\n v-bind=\"forwarded\"\n :class=\" cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <DropdownMenuItemIndicator>\n <Check class=\"w-4 h-4\" />\n </DropdownMenuItemIndicator>\n </span>\n <slot />\n </DropdownMenuCheckboxItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuContent.vue",
|
"name": "DropdownMenuContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuContent,\n type DropdownMenuContentEmits,\n type DropdownMenuContentProps,\n DropdownMenuPortal,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<DropdownMenuContentProps & { class?: string }>(),\n {\n sideOffset: 4,\n },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DropdownMenuPortal>\n <DropdownMenuContent\n :class=\"[\n cn(\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n ),\n ]\"\n v-bind=\"forwarded\"\n >\n <slot />\n </DropdownMenuContent>\n </DropdownMenuPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n DropdownMenuContent,\n type DropdownMenuContentEmits,\n type DropdownMenuContentProps,\n DropdownMenuPortal,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n {\n sideOffset: 4,\n },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <DropdownMenuPortal>\n <DropdownMenuContent\n v-bind=\"forwarded\"\n :class=\"cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n >\n <slot />\n </DropdownMenuContent>\n </DropdownMenuPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuGroup.vue",
|
"name": "DropdownMenuGroup.vue",
|
||||||
|
|
@ -23,27 +23,27 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuItem.vue",
|
"name": "DropdownMenuItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { DropdownMenuItem, type DropdownMenuItemProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuItemProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n <DropdownMenuItem\n v-bind=\"props\"\n :class=\"[\n cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n >\n <slot />\n </DropdownMenuItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <DropdownMenuItem\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n </DropdownMenuItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuLabel.vue",
|
"name": "DropdownMenuLabel.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { DropdownMenuLabel, type DropdownMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuLabelProps & {\n inset?: boolean\n class?: string\n}>()\n</script>\n\n<template>\n <DropdownMenuLabel\n v-bind=\"props\"\n :class=\"\n cn('px-2 py-1.5 text-sm font-semibold',\n inset && 'pl-8', props.class)\"\n >\n <slot />\n </DropdownMenuLabel>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <DropdownMenuLabel\n v-bind=\"forwardedProps\"\n :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n >\n <slot />\n </DropdownMenuLabel>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuRadioGroup.vue",
|
"name": "DropdownMenuRadioGroup.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuRadioGroup,\n type DropdownMenuRadioGroupEmits,\n type DropdownMenuRadioGroupProps,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\n\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n</script>\n\n<template>\n <DropdownMenuRadioGroup\n v-bind=\"props\"\n @update:model-value=\"emits('update:modelValue', $event)\"\n >\n <slot />\n </DropdownMenuRadioGroup>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuRadioGroup,\n type DropdownMenuRadioGroupEmits,\n type DropdownMenuRadioGroupProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DropdownMenuRadioGroup v-bind=\"forwarded\">\n <slot />\n </DropdownMenuRadioGroup>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuRadioItem.vue",
|
"name": "DropdownMenuRadioItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuItemIndicator,\n DropdownMenuRadioItem,\n type DropdownMenuRadioItemEmits,\n type DropdownMenuRadioItemProps,\n useEmitAsProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: string }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n</script>\n\n<template>\n <DropdownMenuRadioItem\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n :class=\"cn(\n 'flex relative items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover pl-7 py-1.5 text-sm outline-none select-none cursor-default',\n props.class,\n )\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\n <DropdownMenuItemIndicator>\n <Circle class=\"h-2 w-2 fill-current\" />\n </DropdownMenuItemIndicator>\n </span>\n <slot />\n </DropdownMenuRadioItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n DropdownMenuItemIndicator,\n DropdownMenuRadioItem,\n type DropdownMenuRadioItemEmits,\n type DropdownMenuRadioItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <DropdownMenuRadioItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <DropdownMenuItemIndicator>\n <Circle class=\"h-2 w-2 fill-current\" />\n </DropdownMenuItemIndicator>\n </span>\n <slot />\n </DropdownMenuRadioItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuSeparator.vue",
|
"name": "DropdownMenuSeparator.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSeparator,\n type DropdownMenuSeparatorProps,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps>()\n</script>\n\n<template>\n <DropdownMenuSeparator v-bind=\"props\" class=\"-mx-1 my-1 h-px bg-muted\" />\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n DropdownMenuSeparator,\n type DropdownMenuSeparatorProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\n class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuShortcut.vue",
|
"name": "DropdownMenuShortcut.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', $attrs.class ?? '')\">\n <slot />\n </span>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', props.class)\">\n <slot />\n </span>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuSub.vue",
|
"name": "DropdownMenuSub.vue",
|
||||||
|
|
@ -51,15 +51,15 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuSubContent.vue",
|
"name": "DropdownMenuSubContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSubContent,\n type DropdownMenuSubContentEmits,\n type DropdownMenuSubContentProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubContentProps>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DropdownMenuSubContent\n v-bind=\"forwarded\"\n :class=\"cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')\"\n >\n <slot />\n </DropdownMenuSubContent>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n DropdownMenuSubContent,\n type DropdownMenuSubContentEmits,\n type DropdownMenuSubContentProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <DropdownMenuSubContent\n v-bind=\"forwarded\"\n :class=\"cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n >\n <slot />\n </DropdownMenuSubContent>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuSubTrigger.vue",
|
"name": "DropdownMenuSubTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSubTrigger,\n type DropdownMenuSubTriggerProps,\n} from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()\n</script>\n\n<template>\n <DropdownMenuSubTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n props.class,\n ),\n ]\"\n >\n <slot />\n <ChevronRight class=\"ml-auto h-4 w-4\" />\n </DropdownMenuSubTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n DropdownMenuSubTrigger,\n type DropdownMenuSubTriggerProps,\n useForwardProps,\n} from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <DropdownMenuSubTrigger\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n props.class,\n )\"\n >\n <slot />\n <ChevronRight class=\"ml-auto h-4 w-4\" />\n </DropdownMenuSubTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuTrigger.vue",
|
"name": "DropdownMenuTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n</script>\n\n<template>\n <DropdownMenuTrigger class=\"outline-none\" v-bind=\"props\">\n <slot />\n </DropdownMenuTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n <slot />\n </DropdownMenuTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,8 @@
|
||||||
"zod"
|
"zod"
|
||||||
],
|
],
|
||||||
"registryDependencies": [
|
"registryDependencies": [
|
||||||
"utils"
|
"utils",
|
||||||
|
"label"
|
||||||
],
|
],
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
|
|
@ -15,15 +16,15 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "FormDescription.vue",
|
"name": "FormDescription.vue",
|
||||||
"content": "<script lang=\"ts\" setup>\nimport { useAttrs } from 'vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst { formDescriptionId } = useFormField()\nconst { class: className, ...rest } = useAttrs()\n</script>\n\n<template>\n <p\n :id=\"formDescriptionId\"\n :class=\"cn('text-sm text-muted-foreground', className ?? '')\"\n v-bind=\"rest\"\n >\n <slot />\n </p>\n</template>\n"
|
"content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n <p\n :id=\"formDescriptionId\"\n :class=\"cn('text-sm text-muted-foreground', props.class)\"\n >\n <slot />\n </p>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "FormItem.vue",
|
"name": "FormItem.vue",
|
||||||
"content": "<script lang=\"ts\">\nimport { type InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n = Symbol() as InjectionKey<string>\n</script>\n\n<script lang=\"ts\" setup>\nimport { provide, useAttrs } from 'vue'\nimport { useId } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n\nconst { class: className, ...rest } = useAttrs()\n</script>\n\n<template>\n <div :class=\"cn('space-y-2', className ?? '')\" v-bind=\"rest\">\n <slot />\n </div>\n</template>\n"
|
"content": "<script lang=\"ts\">\nimport type { HTMLAttributes, InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n = Symbol() as InjectionKey<string>\n</script>\n\n<script lang=\"ts\" setup>\nimport { provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n <div :class=\"cn('space-y-2', props.class)\">\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "FormLabel.vue",
|
"name": "FormLabel.vue",
|
||||||
"content": "<script lang=\"ts\" setup>\nimport { useAttrs } from 'vue'\nimport { Label, type LabelProps } from 'radix-vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\nconst props = defineProps<LabelProps>()\n\nconst { error, formItemId } = useFormField()\nconst { class: className, ...rest } = useAttrs()\n</script>\n\n<template>\n <Label\n :class=\"cn(\n 'block text-sm tracking-tight font-medium text-foreground text-left',\n error && 'text-destructive',\n className ?? '',\n )\"\n :for=\"formItemId\"\n v-bind=\"rest\"\n >\n <slot />\n </Label>\n</template>\n"
|
"content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport type { LabelProps } from 'radix-vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\nimport { Label } from '@/lib/registry/default/ui/label'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n <Label\n :class=\"cn(\n error && 'text-destructive',\n props.class,\n )\"\n :for=\"formItemId\"\n >\n <slot />\n </Label>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "FormMessage.vue",
|
"name": "FormMessage.vue",
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,11 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "HoverCard.vue",
|
"name": "HoverCard.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n <HoverCardRoot v-bind=\"forwarded\">\n <slot />\n </HoverCardRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n <HoverCardRoot v-bind=\"forwardedProps\">\n <slot />\n </HoverCardRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "HoverCardContent.vue",
|
"name": "HoverCardContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n HoverCardContent,\n type HoverCardContentProps,\n HoverCardPortal,\n useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<HoverCardContentProps & { class?: string }>(),\n {\n sideOffset: 4,\n },\n)\n\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n <HoverCardPortal>\n <HoverCardContent\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'z-50 w-64 rounded-md bg-background border border-border p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </HoverCardContent>\n </HoverCardPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n HoverCardContent,\n type HoverCardContentProps,\n HoverCardPortal,\n useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n {\n sideOffset: 4,\n },\n)\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <HoverCardPortal>\n <HoverCardContent\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </HoverCardContent>\n </HoverCardPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "HoverCardTrigger.vue",
|
"name": "HoverCardTrigger.vue",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Input.vue",
|
"name": "Input.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n defaultValue?: string | number\n modelValue?: string | number\n class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n <input v-model=\"modelValue\" :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class ?? '')\">\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n defaultValue?: string | number\n modelValue?: string | number\n class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n <input v-model=\"modelValue\" :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\">\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Label.vue",
|
"name": "Label.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { Label, type LabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps & { class?: string }>()\n</script>\n\n<template>\n <Label\n v-bind=\"props\"\n :class=\"\n cn(\n 'block text-sm tracking-tight font-medium text-foreground text-left',\n props.class,\n )\n \"\n >\n <slot />\n </Label>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Label, type LabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <Label\n v-bind=\"delegatedProps\"\n :class=\"\n cn(\n 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n props.class,\n )\n \"\n >\n <slot />\n </Label>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,15 +7,15 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Menubar.vue",
|
"name": "Menubar.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n MenubarRoot,\n type MenubarRootEmits,\n type MenubarRootProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarRootProps & { class?: string }>()\n\nconst emits = defineEmits<MenubarRootEmits>()\n</script>\n\n<template>\n <MenubarRoot\n v-bind=\"props\"\n :class=\"\n cn(\n 'flex h-10 items-center space-x-1 rounded-md border border-border p-1',\n props.class,\n )\n \"\n @update:model-value=\"emits('update:modelValue', $event)\"\n >\n <slot />\n </MenubarRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n MenubarRoot,\n type MenubarRootEmits,\n type MenubarRootProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <MenubarRoot\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'flex h-10 items-center gap-x-1 rounded-md border bg-background p-1',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarCheckboxItem.vue",
|
"name": "MenubarCheckboxItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n MenubarCheckboxItem,\n type MenubarCheckboxItemEmits,\n type MenubarCheckboxItemProps,\n MenubarItemIndicator,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: string }>()\n\nconst emit = defineEmits<MenubarCheckboxItemEmits>()\n</script>\n\n<template>\n <MenubarCheckboxItem\n v-bind=\"props\"\n :class=\"[\n cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n ),\n ]\"\n @update:checked=\"emit('update:checked', $event)\"\n @select=\"emit('select', $event)\"\n >\n <MenubarItemIndicator\n class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n >\n <Check class=\"w-4 h-4\" />\n </MenubarItemIndicator>\n <slot />\n </MenubarCheckboxItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n MenubarCheckboxItem,\n type MenubarCheckboxItemEmits,\n type MenubarCheckboxItemProps,\n MenubarItemIndicator,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <MenubarCheckboxItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <MenubarItemIndicator>\n <Check class=\"w-4 h-4\" />\n </MenubarItemIndicator>\n </span>\n <slot />\n </MenubarCheckboxItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarContent.vue",
|
"name": "MenubarContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n MenubarContent,\n type MenubarContentProps,\n MenubarPortal,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<MenubarContentProps & { class?: string }>(),\n {\n align: 'start',\n alignOffset: -4,\n sideOffset: 8,\n },\n)\n</script>\n\n<template>\n <MenubarPortal>\n <MenubarContent\n :loop=\"props.loop\"\n :as-child=\"props.asChild\"\n :side-offset=\"props.sideOffset\"\n :side=\"props.side\"\n :align=\"props.align\"\n :align-offset=\"props.alignOffset\"\n :class=\"\n cn(\n 'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarContent>\n </MenubarPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n MenubarContent,\n type MenubarContentProps,\n MenubarPortal,\n useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n {\n align: 'start',\n alignOffset: -4,\n sideOffset: 8,\n },\n)\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <MenubarPortal>\n <MenubarContent\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarContent>\n </MenubarPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarGroup.vue",
|
"name": "MenubarGroup.vue",
|
||||||
|
|
@ -23,11 +23,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarItem.vue",
|
"name": "MenubarItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n MenubarItem,\n type MenubarItemEmits,\n type MenubarItemProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarItemProps & { inset?: boolean; class?: string }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n</script>\n\n<template>\n <MenubarItem\n v-bind=\"props\"\n :class=\"[\n cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n @select=\"emits('select', $event)\"\n >\n <slot />\n </MenubarItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n MenubarItem,\n type MenubarItemEmits,\n type MenubarItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <MenubarItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n </MenubarItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarLabel.vue",
|
"name": "MenubarLabel.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { MenubarLabel, type MenubarLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarLabelProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n <slot />\n </MenubarLabel>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { MenubarLabel, type MenubarLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n</script>\n\n<template>\n <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n <slot />\n </MenubarLabel>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarMenu.vue",
|
"name": "MenubarMenu.vue",
|
||||||
|
|
@ -35,19 +35,19 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarRadioGroup.vue",
|
"name": "MenubarRadioGroup.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n MenubarRadioGroup,\n type MenubarRadioGroupEmits,\n type MenubarRadioGroupProps,\n} from 'radix-vue'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n</script>\n\n<template>\n <MenubarRadioGroup\n v-bind=\"props\"\n @update:model-value=\"emits('update:modelValue', $event)\"\n >\n <slot />\n </MenubarRadioGroup>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport {\n MenubarRadioGroup,\n type MenubarRadioGroupEmits,\n type MenubarRadioGroupProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <MenubarRadioGroup v-bind=\"forwarded\">\n <slot />\n </MenubarRadioGroup>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarRadioItem.vue",
|
"name": "MenubarRadioItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n MenubarItemIndicator,\n MenubarRadioItem,\n type MenubarRadioItemEmits,\n type MenubarRadioItemProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: string }>()\n\nconst emits = defineEmits<MenubarRadioItemEmits>()\n</script>\n\n<template>\n <MenubarRadioItem\n v-bind=\"props\"\n :class=\"[\n cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n ),\n ]\"\n @select=\"emits('select', $event)\"\n >\n <MenubarItemIndicator\n class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n >\n <Circle class=\"h-2 w-2 fill-curren\" />\n </MenubarItemIndicator>\n\n <slot />\n </MenubarRadioItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n MenubarItemIndicator,\n MenubarRadioItem,\n type MenubarRadioItemEmits,\n type MenubarRadioItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <MenubarRadioItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <MenubarItemIndicator>\n <Circle class=\"h-2 w-2 fill-current\" />\n </MenubarItemIndicator>\n </span>\n <slot />\n </MenubarRadioItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarSeparator.vue",
|
"name": "MenubarSeparator.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { MenubarSeparator, type MenubarSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSeparatorProps>()\n</script>\n\n<template>\n <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-secondary', $attrs.class ?? '')\" v-bind=\"props\" />\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarShortcut.vue",
|
"name": "MenubarShortcut.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n <span :class=\"cn('text-xxs ml-auto tracking-widest opacity-50', $attrs.class ?? '')\">\n <slot />\n </span>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n <slot />\n </span>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarSub.vue",
|
"name": "MenubarSub.vue",
|
||||||
|
|
@ -55,15 +55,15 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarSubContent.vue",
|
"name": "MenubarSubContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n MenubarPortal,\n MenubarSubContent,\n type MenubarSubContentEmits,\n type MenubarSubContentProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<MenubarSubContentProps & { class?: string }>(),\n {\n sideOffset: 2,\n alignOffset: 0,\n },\n)\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n</script>\n\n<template>\n <MenubarPortal>\n <MenubarSubContent\n :loop=\"props.loop\"\n :as-child=\"props.asChild\"\n :side-offset=\"props.sideOffset\"\n :side=\"props.side\"\n :align=\"props.align\"\n :align-offset=\"props.alignOffset\"\n :class=\"\n cn(\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarSubContent>\n </MenubarPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n MenubarPortal,\n MenubarSubContent,\n type MenubarSubContentEmits,\n type MenubarSubContentProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>(),\n {\n sideOffset: 2,\n alignOffset: 0,\n },\n)\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <MenubarPortal>\n <MenubarSubContent\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarSubContent>\n </MenubarPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarSubTrigger.vue",
|
"name": "MenubarSubTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n <MenubarSubTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n >\n <slot />\n <ChevronRight class=\"ml-auto h-4 w-4\" />\n </MenubarSubTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <MenubarSubTrigger\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n <ChevronRight class=\"ml-auto h-4 w-4\" />\n </MenubarSubTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarTrigger.vue",
|
"name": "MenubarTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { MenubarTrigger, type MenubarTriggerProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarTriggerProps & { class?: string }>()\n</script>\n\n<template>\n <MenubarTrigger\n v-bind=\"props\"\n :class=\"\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <MenubarTrigger\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,15 +7,15 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "NavigationMenu.vue",
|
"name": "NavigationMenu.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n NavigationMenuRoot,\n type NavigationMenuRootEmits,\n type NavigationMenuRootProps,\n} from 'radix-vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: string }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n</script>\n\n<template>\n <NavigationMenuRoot\n v-bind=\"props\"\n :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n @update:model-value=\"emits('update:modelValue', $event)\"\n >\n <slot />\n <NavigationMenuViewport />\n </NavigationMenuRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n NavigationMenuRoot,\n type NavigationMenuRootEmits,\n type NavigationMenuRootProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <NavigationMenuRoot\n v-bind=\"forwarded\"\n :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n >\n <slot />\n <NavigationMenuViewport />\n </NavigationMenuRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "NavigationMenuContent.vue",
|
"name": "NavigationMenuContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n NavigationMenuContent,\n type NavigationMenuContentEmits,\n type NavigationMenuContentProps,\n useEmitAsProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: string }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n</script>\n\n<template>\n <NavigationMenuContent\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n :class=\"\n cn(\n 'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ',\n props.class,\n )\n \"\n >\n <slot />\n </NavigationMenuContent>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n NavigationMenuContent,\n type NavigationMenuContentEmits,\n type NavigationMenuContentProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <NavigationMenuContent\n v-bind=\"forwarded\"\n :class=\"cn(\n 'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',\n props.class,\n )\"\n >\n <slot />\n </NavigationMenuContent>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "NavigationMenuIndicator.vue",
|
"name": "NavigationMenuIndicator.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuIndicatorProps>()\n</script>\n\n<template>\n <NavigationMenuIndicator\n v-bind=\"props\"\n :class=\"cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', $attrs.class ?? '')\"\n >\n <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n </NavigationMenuIndicator>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <NavigationMenuIndicator\n v-bind=\"forwardedProps\"\n :class=\"cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)\"\n >\n <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n </NavigationMenuIndicator>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "NavigationMenuItem.vue",
|
"name": "NavigationMenuItem.vue",
|
||||||
|
|
@ -23,19 +23,19 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "NavigationMenuLink.vue",
|
"name": "NavigationMenuLink.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n NavigationMenuLink,\n type NavigationMenuLinkEmits,\n type NavigationMenuLinkProps,\n useEmitAsProps,\n} from 'radix-vue'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n</script>\n\n<template>\n <NavigationMenuLink v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </NavigationMenuLink>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport {\n NavigationMenuLink,\n type NavigationMenuLinkEmits,\n type NavigationMenuLinkProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <NavigationMenuLink v-bind=\"forwarded\">\n <slot />\n </NavigationMenuLink>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "NavigationMenuList.vue",
|
"name": "NavigationMenuList.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { NavigationMenuList, type NavigationMenuListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuListProps & { class?: string }>()\n</script>\n\n<template>\n <NavigationMenuList\n v-bind=\"props\"\n :class=\"\n cn(\n 'group flex flex-1 list-none items-center justify-center space-x-1',\n props.class,\n )\n \"\n >\n <slot />\n </NavigationMenuList>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <NavigationMenuList\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'group flex flex-1 list-none items-center justify-center gap-x-1',\n props.class,\n )\n \"\n >\n <slot />\n </NavigationMenuList>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "NavigationMenuTrigger.vue",
|
"name": "NavigationMenuTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n NavigationMenuTrigger,\n type NavigationMenuTriggerProps,\n} from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { navigationMenuTriggerStyle } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: string }>()\n</script>\n\n<template>\n <NavigationMenuTrigger\n :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n v-bind=\"props\"\n >\n <slot />\n <ChevronDown\n class=\"relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n aria-hidden=\"true\"\n />\n </NavigationMenuTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n NavigationMenuTrigger,\n type NavigationMenuTriggerProps,\n useForwardProps,\n} from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { navigationMenuTriggerStyle } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <NavigationMenuTrigger\n v-bind=\"forwardedProps\"\n :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n >\n <slot />\n <ChevronDown\n class=\"relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n aria-hidden=\"true\"\n />\n </NavigationMenuTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "NavigationMenuViewport.vue",
|
"name": "NavigationMenuViewport.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n NavigationMenuViewport,\n type NavigationMenuViewportProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuViewportProps>()\n</script>\n\n<template>\n <div class=\"absolute left-0 top-full flex justify-center\">\n <NavigationMenuViewport\n v-bind=\"props\"\n :class=\"\n cn(\n 'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',\n $attrs.class ?? '',\n )\n \"\n />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n NavigationMenuViewport,\n type NavigationMenuViewportProps,\n useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <div class=\"absolute left-0 top-full flex justify-center\">\n <NavigationMenuViewport\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',\n props.class,\n )\n \"\n />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -8,23 +8,23 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "PaginationEllipsis.vue",
|
"name": "PaginationEllipsis.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps, useForwardProps } from 'radix-vue'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = defineProps<PaginationEllipsisProps>()\nconst forwarded = useForwardProps(props)\nconst { class: className, ...rest } = useAttrs()\n</script>\n\n<template>\n <PaginationEllipsis :class=\"cn('w-9 h-9 flex items-center justify-center', className ?? '')\" v-bind=\"{ ...forwarded, ...rest }\">\n <slot>\n <MoreHorizontal />\n </slot>\n </PaginationEllipsis>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n <slot>\n <MoreHorizontal />\n </slot>\n </PaginationEllipsis>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "PaginationFirst.vue",
|
"name": "PaginationFirst.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { PaginationFirst, type PaginationFirstProps, useForwardProps } from 'radix-vue'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport {\n Button,\n} from '@/lib/registry/default/ui/button'\n\nconst props = withDefaults(defineProps<PaginationFirstProps>(), {\n asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n <PaginationFirst v-bind=\"forwarded\">\n <Button class=\"w-10 h-10 p-0\" variant=\"outline\">\n <slot>\n <ChevronsLeft class=\"h-4 w-4\" />\n </slot>\n </Button>\n </PaginationFirst>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'radix-vue'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport {\n Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <PaginationFirst v-bind=\"delegatedProps\">\n <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n <slot>\n <ChevronsLeft class=\"h-4 w-4\" />\n </slot>\n </Button>\n </PaginationFirst>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "PaginationLast.vue",
|
"name": "PaginationLast.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { PaginationLast, type PaginationLastProps, useForwardProps } from 'radix-vue'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport {\n Button,\n} from '@/lib/registry/default/ui/button'\n\nconst props = withDefaults(defineProps<PaginationLastProps>(), {\n asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n <PaginationLast v-bind=\"forwarded\">\n <Button class=\"w-10 h-10 p-0\" variant=\"outline\">\n <slot>\n <ChevronsRight class=\"h-4 w-4\" />\n </slot>\n </Button>\n </PaginationLast>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationLast, type PaginationLastProps } from 'radix-vue'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport {\n Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <PaginationLast v-bind=\"delegatedProps\">\n <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n <slot>\n <ChevronsRight class=\"h-4 w-4\" />\n </slot>\n </Button>\n </PaginationLast>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "PaginationNext.vue",
|
"name": "PaginationNext.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { PaginationNext, type PaginationNextProps, useForwardProps } from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n Button,\n} from '@/lib/registry/default/ui/button'\n\nconst props = withDefaults(defineProps<PaginationNextProps>(), {\n asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n <PaginationNext v-bind=\"forwarded\">\n <Button class=\"w-10 h-10 p-0\" variant=\"outline\">\n <slot>\n <ChevronRight class=\"h-4 w-4\" />\n </slot>\n </Button>\n </PaginationNext>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationNext, type PaginationNextProps } from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <PaginationNext v-bind=\"delegatedProps\">\n <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n <slot>\n <ChevronRight class=\"h-4 w-4\" />\n </slot>\n </Button>\n </PaginationNext>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "PaginationPrev.vue",
|
"name": "PaginationPrev.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { PaginationPrev, type PaginationPrevProps, useForwardProps } from 'radix-vue'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport {\n Button,\n} from '@/lib/registry/default/ui/button'\n\nconst props = withDefaults(defineProps<PaginationPrevProps>(), {\n asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n <PaginationPrev v-bind=\"forwarded\">\n <Button class=\"w-10 h-10 p-0\" variant=\"outline\">\n <slot>\n <ChevronLeft class=\"h-4 w-4\" />\n </slot>\n </Button>\n </PaginationPrev>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'radix-vue'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport {\n Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <PaginationPrev v-bind=\"delegatedProps\">\n <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n <slot>\n <ChevronLeft class=\"h-4 w-4\" />\n </slot>\n </Button>\n </PaginationPrev>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "PopoverContent.vue",
|
"name": "PopoverContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n PopoverContent,\n type PopoverContentEmits,\n type PopoverContentProps,\n PopoverPortal,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<PopoverContentProps & { class?: string }>(),\n {\n sideOffset: 4,\n },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <PopoverPortal>\n <PopoverContent\n v-bind=\"{ ...forwarded, ...$attrs }\"\n :class=\"\n cn(\n 'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </PopoverContent>\n </PopoverPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n PopoverContent,\n type PopoverContentEmits,\n type PopoverContentProps,\n PopoverPortal,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(\n defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n {\n align: 'center',\n sideOffset: 4,\n },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <PopoverPortal>\n <PopoverContent\n v-bind=\"{ ...forwarded, ...$attrs }\"\n :class=\"\n cn(\n 'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </PopoverContent>\n </PopoverPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "PopoverTrigger.vue",
|
"name": "PopoverTrigger.vue",
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Progress.vue",
|
"name": "Progress.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ProgressIndicator,\n ProgressRoot,\n type ProgressRootProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<ProgressRootProps & { class?: string }>(),\n {\n class: '',\n modelValue: 0,\n },\n)\n</script>\n\n<template>\n <ProgressRoot\n :class=\"\n cn(\n 'relative h-4 w-full overflow-hidden rounded-full bg-secondary',\n props.class,\n )\n \"\n v-bind=\"props\"\n >\n <ProgressIndicator\n :class=\"\n cn(\n 'h-full w-full flex-1 duration-300 bg-foreground transition-all',\n props.class,\n )\n \"\n :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n />\n </ProgressRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ProgressIndicator,\n ProgressRoot,\n type ProgressRootProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n {\n modelValue: 0,\n },\n)\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ProgressRoot\n v-bind=\"delegatedProps\"\n :class=\"\n cn(\n 'relative h-4 w-full overflow-hidden rounded-full bg-secondary',\n props.class,\n )\n \"\n >\n <ProgressIndicator\n class=\"h-full w-full flex-1 bg-primary transition-all\"\n :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n />\n </ProgressRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,11 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "RadioGroup.vue",
|
"name": "RadioGroup.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <RadioGroupRoot :class=\"cn('grid gap-2', props.class)\" v-bind=\"forwarded\">\n <slot />\n </RadioGroupRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <RadioGroupRoot\n :class=\"cn('grid gap-2', props.class)\"\n v-bind=\"forwarded\"\n >\n <slot />\n </RadioGroupRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "RadioGroupItem.vue",
|
"name": "RadioGroupItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n RadioGroupIndicator,\n RadioGroupItem,\n type RadioGroupItemProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupItemProps & { class?: string }>()\n</script>\n\n<template>\n <RadioGroupItem\n v-bind=\"props\"\n :class=\"\n cn(\n 'aspect-square h-4 w-4 rounded-full cursor-pointer flex justify-center items-center border border-primary disabled:cursor-not-allowed disabled:opacity-50',\n props.class,\n )\n \"\n >\n <RadioGroupIndicator\n :class=\"cn('flex items-center justify-center', props.class)\"\n >\n <Circle class=\"w-2.5 h-2.5 text-current fill-current\" />\n </RadioGroupIndicator>\n </RadioGroupItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n RadioGroupIndicator,\n RadioGroupItem,\n type RadioGroupItemProps,\n useForwardProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <RadioGroupItem\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n props.class,\n )\n \"\n >\n <RadioGroupIndicator\n class=\"flex items-center justify-center\"\n >\n <Circle class=\"h-2.5 w-2.5 fill-current text-current\" />\n </RadioGroupIndicator>\n </RadioGroupItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,11 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "ScrollArea.vue",
|
"name": "ScrollArea.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ScrollAreaCorner,\n ScrollAreaRoot,\n type ScrollAreaRootProps,\n ScrollAreaViewport,\n} from 'radix-vue'\nimport ScrollBar from './ScrollBar.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<\n ScrollAreaRootProps & { class?: string }\n >(),\n {\n class: '',\n orientation: 'vertical',\n },\n)\n</script>\n\n<template>\n <ScrollAreaRoot :type=\"type\" :class=\"cn('relative overflow-hidden', props.class)\">\n <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n <slot />\n </ScrollAreaViewport>\n <ScrollBar />\n <ScrollAreaCorner />\n </ScrollAreaRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ScrollAreaCorner,\n ScrollAreaRoot,\n type ScrollAreaRootProps,\n ScrollAreaViewport,\n} from 'radix-vue'\nimport ScrollBar from './ScrollBar.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n <slot />\n </ScrollAreaViewport>\n <ScrollBar />\n <ScrollAreaCorner />\n </ScrollAreaRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ScrollBar.vue",
|
"name": "ScrollBar.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {\n orientation: 'vertical',\n})\n</script>\n\n<template>\n <ScrollAreaScrollbar\n v-bind=\"props\"\n :class=\"\n cn('flex touch-none select-none transition-colors',\n orientation === 'vertical'\n && 'h-full w-2.5 border-l border-l-transparent p-[1px]',\n orientation === 'horizontal'\n && 'h-2.5 border-t border-t-transparent p-[1px]',\n $attrs.class ?? '')\"\n >\n <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n </ScrollAreaScrollbar>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ScrollAreaScrollbar\n v-bind=\"delegatedProps\"\n :class=\"\n cn('flex touch-none select-none transition-colors',\n orientation === 'vertical'\n && 'h-full w-2.5 border-l border-l-transparent p-[1px]',\n orientation === 'horizontal'\n && 'h-2.5 border-t border-t-transparent p-[1px]',\n props.class)\"\n >\n <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n </ScrollAreaScrollbar>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -11,15 +11,15 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectContent.vue",
|
"name": "SelectContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: string }>(), {\n position: 'popper',\n sideOffset: 4,\n avoidCollisions: true,\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...forwarded, ...$attrs }\"\n :class=\"\n cn(\n 'relative z-50 min-w-[10rem] overflow-hidden rounded-md bg-background border border-border text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-[--radix-popper-available-height]',\n position === 'popper'\n && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n props.class,\n )\n \"\n >\n <SelectViewport\n :class=\"\n cn('p-1',\n position === 'popper'\n && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\"\n >\n <slot />\n </SelectViewport>\n </SelectContent>\n </SelectPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {\n position: 'popper',\n sideOffset: 4,\n avoidCollisions: true,\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n 'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n position === 'popper'\n && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n props.class,\n )\n \"\n >\n <SelectScrollUpButton />\n <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\">\n <slot />\n </SelectViewport>\n <SelectScrollDownButton />\n </SelectContent>\n </SelectPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectGroup.vue",
|
"name": "SelectGroup.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { SelectGroup, type SelectGroupProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectGroupProps & { class?: string }>()\n</script>\n\n<template>\n <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"props\">\n <slot />\n </SelectGroup>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectGroup, type SelectGroupProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n <slot />\n </SelectGroup>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectItem.vue",
|
"name": "SelectItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n SelectItem,\n SelectItemIndicator,\n type SelectItemProps,\n SelectItemText,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectItemProps & { class?: string }>()\n</script>\n\n<template>\n <SelectItem\n v-bind=\"props\"\n :class=\"\n cn(\n 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\n \"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <SelectItemIndicator>\n <Check class=\"h-4 w-4\" />\n </SelectItemIndicator>\n </span>\n\n <SelectItemText>\n <slot />\n </SelectItemText>\n </SelectItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n SelectItem,\n SelectItemIndicator,\n type SelectItemProps,\n SelectItemText,\n useForwardProps,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <SelectItem\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\n \"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <SelectItemIndicator>\n <Check class=\"h-4 w-4\" />\n </SelectItemIndicator>\n </span>\n\n <SelectItemText>\n <slot />\n </SelectItemText>\n </SelectItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectItemText.vue",
|
"name": "SelectItemText.vue",
|
||||||
|
|
@ -27,15 +27,23 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectLabel.vue",
|
"name": "SelectLabel.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { SelectLabel, type SelectLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectLabelProps & { class?: string }>()\n</script>\n\n<template>\n <SelectLabel :class=\"cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)\">\n <slot />\n </SelectLabel>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { SelectLabel, type SelectLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n <SelectLabel :class=\"cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)\">\n <slot />\n </SelectLabel>\n</template>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "SelectScrollDownButton.vue",
|
||||||
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n <slot>\n <ChevronDown class=\"h-4 w-4\" />\n </slot>\n </SelectScrollDownButton>\n</template>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "SelectScrollUpButton.vue",
|
||||||
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'\nimport { ChevronUp } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n <slot>\n <ChevronUp class=\"h-4 w-4\" />\n </slot>\n </SelectScrollUpButton>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectSeparator.vue",
|
"name": "SelectSeparator.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectSeparatorProps & { class?: string }>()\n</script>\n\n<template>\n <SelectSeparator :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectTrigger.vue",
|
"name": "SelectTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n {\n class: '',\n invalid: false,\n },\n)\n</script>\n\n<template>\n <SelectTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 whitespace-nowrap [&>span]:truncate [&>span]:min-w-0',\n props.class,\n ),\n props.invalid\n ? '!ring-destructive ring-2 placeholder:!text-destructive'\n : '',\n ]\"\n >\n <slot />\n <SelectIcon as-child>\n <ChevronDown class=\"w-4 h-4 opacity-50\" />\n </SelectIcon>\n </SelectTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <SelectTrigger\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n props.class,\n )\"\n >\n <slot />\n <SelectIcon as-child>\n <ChevronDown class=\"w-4 h-4 opacity-50\" />\n </SelectIcon>\n </SelectTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectValue.vue",
|
"name": "SelectValue.vue",
|
||||||
|
|
@ -43,7 +51,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
"content": "export { default as Select } from './Select.vue'\nexport { default as SelectValue } from './SelectValue.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\n"
|
"content": "export { default as Select } from './Select.vue'\nexport { default as SelectValue } from './SelectValue.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'\n"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "components:ui"
|
"type": "components:ui"
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Separator.vue",
|
"name": "Separator.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SeparatorProps & { class?: string }>()\n</script>\n\n<template>\n <Separator\n :class=\"[\n cn('shrink-0 bg-secondary', props.class),\n props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n ]\"\n />\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <Separator\n v-bind=\"delegatedProps\"\n :class=\"cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)\"\n />\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Sheet.vue",
|
"name": "Sheet.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { DialogRoot } from 'radix-vue'\n</script>\n\n<template>\n <DialogRoot>\n <slot />\n </DialogRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DialogRoot v-bind=\"forwarded\">\n <slot />\n </DialogRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SheetClose.vue",
|
"name": "SheetClose.vue",
|
||||||
|
|
@ -15,23 +15,23 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SheetContent.vue",
|
"name": "SheetContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n DialogClose,\n DialogContent,\n type DialogContentEmits,\n type DialogContentProps,\n DialogOverlay,\n DialogPortal,\n useEmitAsProps,\n} from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport { cva } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\ninterface SheetContentProps extends DialogContentProps {\n side?: 'left' | 'right' | 'top' | 'bottom'\n class?: string\n}\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n\nconst sheetVariants = cva(\n 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n {\n variants: {\n side: {\n top: 'inset-x-0 top-0 border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n bottom:\n 'inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n left: 'inset-y-0 left-0 h-full w-3/4 border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n right:\n 'inset-y-0 right-0 h-full w-3/4 border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n },\n },\n defaultVariants: {\n side: 'right',\n },\n },\n)\n</script>\n\n<template>\n <DialogPortal>\n <DialogOverlay\n class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n />\n <DialogContent\n :class=\"cn(sheetVariants({ side: props.side }), props.class)\"\n v-bind=\"{ ...props, ...emitsAsProps }\"\n >\n <slot />\n\n <DialogClose\n class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n >\n <X class=\"w-4 h-4 text-muted-foreground\" />\n </DialogClose>\n </DialogContent>\n </DialogPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n DialogClose,\n DialogContent,\n type DialogContentEmits,\n type DialogContentProps,\n DialogOverlay,\n DialogPortal,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport { type SheetVariants, sheetVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface SheetContentProps extends DialogContentProps {\n class?: HTMLAttributes['class']\n side?: SheetVariants['side']\n}\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, side, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <DialogPortal>\n <DialogOverlay\n class=\"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n />\n <DialogContent\n :class=\"cn(sheetVariants({ side }), props.class)\"\n v-bind=\"{ ...forwarded, ...$attrs }\"\n >\n <slot />\n\n <DialogClose\n class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\"\n >\n <X class=\"w-4 h-4 text-muted-foreground\" />\n </DialogClose>\n </DialogContent>\n </DialogPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SheetDescription.vue",
|
"name": "SheetDescription.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n <DialogDescription\n :class=\"cn('text-sm text-muted-foreground', props.class)\"\n v-bind=\"props\"\n >\n <slot />\n </DialogDescription>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <DialogDescription\n :class=\"cn('text-sm text-muted-foreground', props.class)\"\n v-bind=\"delegatedProps\"\n >\n <slot />\n </DialogDescription>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SheetFooter.vue",
|
"name": "SheetFooter.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',\n props.class,\n )\n \"\n >\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n props.class,\n )\n \"\n >\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SheetHeader.vue",
|
"name": "SheetHeader.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <div\n :class=\"\n cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\n \"\n >\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n <div\n :class=\"\n cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\n \"\n >\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SheetTitle.vue",
|
"name": "SheetTitle.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: string }>()\n</script>\n\n<template>\n <DialogTitle\n :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n v-bind=\"props\"\n >\n <slot />\n </DialogTitle>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <DialogTitle\n :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n v-bind=\"delegatedProps\"\n >\n <slot />\n </DialogTitle>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SheetTrigger.vue",
|
"name": "SheetTrigger.vue",
|
||||||
|
|
@ -39,7 +39,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
"content": "export { default as Sheet } from './Sheet.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\n"
|
"content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\n\nexport const sheetVariants = cva(\n 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n {\n variants: {\n side: {\n top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n bottom:\n 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n right:\n 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n },\n },\n defaultVariants: {\n side: 'right',\n },\n },\n)\n\nexport type SheetVariants = VariantProps<typeof sheetVariants>\n"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "components:ui"
|
"type": "components:ui"
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Skeleton.vue",
|
"name": "Skeleton.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n class?: string\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n <div :class=\"cn('animate-pulse rounded-md bg-secondary', props.class)\" />\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n <div :class=\"cn('animate-pulse rounded-md bg-muted', props.class)\" />\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Slider.vue",
|
"name": "Slider.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'radix-vue'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SliderRootProps>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <SliderRoot\n :class=\"cn(\n 'relative flex w-full touch-none select-none items-center',\n $attrs.class ?? '',\n )\"\n v-bind=\"{ ...props, ...emitsAsProps }\"\n >\n <SliderTrack class=\"relative h-2 w-full grow overflow-hidden rounded-full bg-secondary\">\n <SliderRange class=\"absolute h-full bg-primary\" />\n </SliderTrack>\n <SliderThumb class=\"block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\" />\n </SliderRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { SliderRootEmits, SliderRootProps } from 'radix-vue'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SliderRoot\n :class=\"cn(\n 'relative flex w-full touch-none select-none items-center',\n props.class,\n )\"\n v-bind=\"forwarded\"\n >\n <SliderTrack class=\"relative h-2 w-full grow overflow-hidden rounded-full bg-secondary\">\n <SliderRange class=\"absolute h-full bg-primary\" />\n </SliderTrack>\n <SliderThumb class=\"block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\" />\n </SliderRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Switch.vue",
|
"name": "Switch.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n SwitchRoot,\n type SwitchRootEmits,\n type SwitchRootProps,\n SwitchThumb,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SwitchRootProps & { class?: string }>()\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <SwitchRoot\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n props.class,\n )\n \"\n >\n <SwitchThumb\n :class=\"\n cn(\n 'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',\n )\n \"\n />\n </SwitchRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n SwitchRoot,\n type SwitchRootEmits,\n type SwitchRootProps,\n SwitchThumb,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SwitchRoot\n v-bind=\"forwarded\"\n :class=\"cn(\n 'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n props.class,\n )\"\n >\n <SwitchThumb\n :class=\"cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')\"\n />\n </SwitchRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,39 +7,39 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Table.vue",
|
"name": "Table.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <div class=\"w-full overflow-auto\">\n <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n <slot />\n </table>\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <div class=\"relative w-full overflow-auto\">\n <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n <slot />\n </table>\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TableBody.vue",
|
"name": "TableBody.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n <slot />\n </tbody>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n <slot />\n </tbody>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TableCaption.vue",
|
"name": "TableCaption.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n <slot />\n </caption>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n <slot />\n </caption>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TableCell.vue",
|
"name": "TableCell.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <td\n :class=\"\n cn(\n 'p-4 align-middle [&:has([role=checkbox])]:pr-0',\n props.class,\n )\n \"\n >\n <slot />\n </td>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <td\n :class=\"\n cn(\n 'p-4 align-middle [&:has([role=checkbox])]:pr-0',\n props.class,\n )\n \"\n >\n <slot />\n </td>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TableEmpty.vue",
|
"name": "TableEmpty.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport TableRow from './TableRow.vue'\nimport TableCell from './TableCell.vue'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n class?: string\n colspan?: number\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n class: '',\n colspan: 1,\n})\n</script>\n\n<template>\n <TableRow>\n <TableCell\n :class=\"\n cn(\n 'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n props.class,\n )\n \"\n :colspan=\"props.colspan\"\n >\n <div class=\"flex items-center justify-center py-10\">\n <slot />\n </div>\n </TableCell>\n </TableRow>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport TableRow from './TableRow.vue'\nimport TableCell from './TableCell.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<{\n class?: HTMLAttributes['class']\n colspan?: number\n}>(), {\n colspan: 1,\n})\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <TableRow>\n <TableCell\n :class=\"\n cn(\n 'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n props.class,\n )\n \"\n v-bind=\"delegatedProps\"\n >\n <div class=\"flex items-center justify-center py-10\">\n <slot />\n </div>\n </TableCell>\n </TableRow>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TableFooter.vue",
|
"name": "TableFooter.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <tfoot :class=\"cn('bg-primary font-medium text-primary-foreground', props.class)\">\n <slot />\n </tfoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <tfoot :class=\"cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)\">\n <slot />\n </tfoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TableHead.vue",
|
"name": "TableHead.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <th :class=\"cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)\">\n <slot />\n </th>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <th :class=\"cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)\">\n <slot />\n </th>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TableHeader.vue",
|
"name": "TableHeader.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n <slot />\n </thead>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n <slot />\n </thead>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TableRow.vue",
|
"name": "TableRow.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n <slot />\n </tr>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n <slot />\n </tr>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -11,15 +11,15 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TabsContent.vue",
|
"name": "TabsContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { TabsContent, type TabsContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsContentProps & { class?: string }>()\n</script>\n\n<template>\n <TabsContent\n :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n v-bind=\"props\"\n >\n <slot />\n </TabsContent>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsContent, type TabsContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <TabsContent\n :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n v-bind=\"delegatedProps\"\n >\n <slot />\n </TabsContent>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TabsList.vue",
|
"name": "TabsList.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { TabsList, type TabsListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsListProps & { class?: string }>()\n</script>\n\n<template>\n <TabsList\n v-bind=\"props\"\n :class=\"\n cn(\n 'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',\n props.class,\n )\n \"\n >\n <slot />\n </TabsList>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsList, type TabsListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <TabsList\n v-bind=\"delegatedProps\"\n :class=\"cn(\n 'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',\n props.class,\n )\"\n >\n <slot />\n </TabsList>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TabsTrigger.vue",
|
"name": "TabsTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { TabsTrigger, type TabsTriggerProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsTriggerProps & { class?: string }>()\n</script>\n\n<template>\n <TabsTrigger\n v-bind=\"props\"\n :class=\"\n cn(\n 'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all 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=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n props.class,\n )\n \"\n >\n <slot />\n </TabsTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <TabsTrigger\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all 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=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n props.class,\n )\"\n >\n <slot />\n </TabsTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Textarea.vue",
|
"name": "Textarea.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n defaultValue?: string | number\n modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')\" />\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n defaultValue?: string | number\n modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,19 +7,19 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Toast.vue",
|
"name": "Toast.vue",
|
||||||
"content": "<script lang=\"ts\">\nimport type { ToastRootEmits, ToastRootProps } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\n\ninterface ToastVariantProps extends VariantProps<typeof toastVariants> {}\n\nexport interface ToastProps extends ToastRootProps {\n class?: string\n variant?: ToastVariantProps['variant']\n 'onOpenChange'?: ((value: boolean) => void) | undefined\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { ToastRoot, useEmitAsProps } from 'radix-vue'\n\nimport { toastVariants } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastProps>()\nconst emits = defineEmits<ToastRootEmits>()\n</script>\n\n<template>\n <ToastRoot\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n :class=\"cn(toastVariants({ variant: props.variant }), props.class)\"\n @update:open=\"onOpenChange\"\n >\n <slot />\n </ToastRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'radix-vue'\nimport { type ToastProps, toastVariants } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ToastRoot\n v-bind=\"forwarded\"\n :class=\"cn(toastVariants({ variant }), props.class)\"\n @update:open=\"onOpenChange\"\n >\n <slot />\n </ToastRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ToastAction.vue",
|
"name": "ToastAction.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ToastAction, type ToastActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastActionProps & { class?: string }>()\n</script>\n\n<template>\n <ToastAction v-bind=\"props\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)\">\n <slot />\n </ToastAction>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastAction, type ToastActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)\">\n <slot />\n </ToastAction>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ToastClose.vue",
|
"name": "ToastClose.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ToastClose } from 'radix-vue'\nimport { XIcon } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: string\n}>()\n</script>\n\n<template>\n <ToastClose v-bind=\"props\" :class=\"cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n <XIcon class=\"h-4 w-4\" />\n </ToastClose>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastClose, type ToastCloseProps } from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastCloseProps & {\n class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n <X class=\"h-4 w-4\" />\n </ToastClose>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ToastDescription.vue",
|
"name": "ToastDescription.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ToastDescription, type ToastDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"props\">\n <slot />\n </ToastDescription>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastDescription, type ToastDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n <slot />\n </ToastDescription>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ToastProvider.vue",
|
"name": "ToastProvider.vue",
|
||||||
|
|
@ -27,11 +27,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ToastTitle.vue",
|
"name": "ToastTitle.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ToastTitle, type ToastTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastTitleProps & { class?: string }>()\n</script>\n\n<template>\n <ToastTitle v-bind=\"props\" :class=\"cn('text-sm font-semibold', props.class)\">\n <slot />\n </ToastTitle>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastTitle, type ToastTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold', props.class)\">\n <slot />\n </ToastTitle>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ToastViewport.vue",
|
"name": "ToastViewport.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ToastViewport, type ToastViewportProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastViewportProps & { class?: string }>()\n</script>\n\n<template>\n <ToastViewport v-bind=\"props\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastViewport, type ToastViewportProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Toaster.vue",
|
"name": "Toaster.vue",
|
||||||
|
|
@ -39,11 +39,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
"content": "export { default as Toaster } from './Toaster.vue'\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n 'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n {\n variants: {\n variant: {\n default: 'border bg-background text-foreground',\n destructive:\n 'destructive group border-destructive bg-destructive text-destructive-foreground',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n"
|
"content": "import type { ToastRootProps } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toaster } from './Toaster.vue'\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n 'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n {\n variants: {\n variant: {\n default: 'border bg-background text-foreground',\n destructive:\n 'destructive group border-destructive bg-destructive text-destructive-foreground',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n class?: HTMLAttributes['class']\n variant?: ToastVariants['variant']\n 'onOpenChange'?: ((value: boolean) => void) | undefined\n}\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "use-toast.ts",
|
"name": "use-toast.ts",
|
||||||
"content": "import { computed, ref } from 'vue'\nimport type { Component, VNode } from 'vue'\nimport type { ToastProps } from './Toast.vue'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\nexport type StringOrVNode =\n | string\n | VNode\n | (() => VNode)\n\ntype ToasterToast = ToastProps & {\n id: string\n title?: string\n description?: StringOrVNode\n action?: Component\n}\n\nconst actionTypes = {\n ADD_TOAST: 'ADD_TOAST',\n UPDATE_TOAST: 'UPDATE_TOAST',\n DISMISS_TOAST: 'DISMISS_TOAST',\n REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n count = (count + 1) % Number.MAX_VALUE\n return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n | {\n type: ActionType['ADD_TOAST']\n toast: ToasterToast\n }\n | {\n type: ActionType['UPDATE_TOAST']\n toast: Partial<ToasterToast>\n }\n | {\n type: ActionType['DISMISS_TOAST']\n toastId?: ToasterToast['id']\n }\n | {\n type: ActionType['REMOVE_TOAST']\n toastId?: ToasterToast['id']\n }\n\ninterface State {\n toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n if (toastTimeouts.has(toastId))\n return\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId)\n dispatch({\n type: actionTypes.REMOVE_TOAST,\n toastId,\n })\n }, TOAST_REMOVE_DELAY)\n\n toastTimeouts.set(toastId, timeout)\n}\n\nconst state = ref<State>({\n toasts: [],\n})\n\nfunction dispatch(action: Action) {\n switch (action.type) {\n case actionTypes.ADD_TOAST:\n state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)\n break\n\n case actionTypes.UPDATE_TOAST:\n state.value.toasts = state.value.toasts.map(t =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t,\n )\n break\n\n case actionTypes.DISMISS_TOAST: {\n const { toastId } = action\n\n if (toastId) {\n addToRemoveQueue(toastId)\n }\n else {\n state.value.toasts.forEach((toast) => {\n addToRemoveQueue(toast.id)\n })\n }\n\n state.value.toasts = state.value.toasts.map(t =>\n t.id === toastId || toastId === undefined\n ? {\n ...t,\n open: false,\n }\n : t,\n )\n break\n }\n\n case actionTypes.REMOVE_TOAST:\n if (action.toastId === undefined)\n state.value.toasts = []\n else\n state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)\n\n break\n }\n}\n\nfunction useToast() {\n return {\n toasts: computed(() => state.value.toasts),\n toast,\n dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),\n }\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast(props: Toast) {\n const id = genId()\n\n const update = (props: ToasterToast) =>\n dispatch({\n type: actionTypes.UPDATE_TOAST,\n toast: { ...props, id },\n })\n\n const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })\n\n dispatch({\n type: actionTypes.ADD_TOAST,\n toast: {\n ...props,\n id,\n open: true,\n onOpenChange: (open: boolean) => {\n if (!open)\n dismiss()\n },\n },\n })\n\n return {\n id,\n dismiss,\n update,\n }\n}\n\nexport { toast, useToast }\n"
|
"content": "import { computed, ref } from 'vue'\nimport type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\nexport type StringOrVNode =\n | string\n | VNode\n | (() => VNode)\n\ntype ToasterToast = ToastProps & {\n id: string\n title?: string\n description?: StringOrVNode\n action?: Component\n}\n\nconst actionTypes = {\n ADD_TOAST: 'ADD_TOAST',\n UPDATE_TOAST: 'UPDATE_TOAST',\n DISMISS_TOAST: 'DISMISS_TOAST',\n REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n count = (count + 1) % Number.MAX_VALUE\n return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n | {\n type: ActionType['ADD_TOAST']\n toast: ToasterToast\n }\n | {\n type: ActionType['UPDATE_TOAST']\n toast: Partial<ToasterToast>\n }\n | {\n type: ActionType['DISMISS_TOAST']\n toastId?: ToasterToast['id']\n }\n | {\n type: ActionType['REMOVE_TOAST']\n toastId?: ToasterToast['id']\n }\n\ninterface State {\n toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n if (toastTimeouts.has(toastId))\n return\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId)\n dispatch({\n type: actionTypes.REMOVE_TOAST,\n toastId,\n })\n }, TOAST_REMOVE_DELAY)\n\n toastTimeouts.set(toastId, timeout)\n}\n\nconst state = ref<State>({\n toasts: [],\n})\n\nfunction dispatch(action: Action) {\n switch (action.type) {\n case actionTypes.ADD_TOAST:\n state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)\n break\n\n case actionTypes.UPDATE_TOAST:\n state.value.toasts = state.value.toasts.map(t =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t,\n )\n break\n\n case actionTypes.DISMISS_TOAST: {\n const { toastId } = action\n\n if (toastId) {\n addToRemoveQueue(toastId)\n }\n else {\n state.value.toasts.forEach((toast) => {\n addToRemoveQueue(toast.id)\n })\n }\n\n state.value.toasts = state.value.toasts.map(t =>\n t.id === toastId || toastId === undefined\n ? {\n ...t,\n open: false,\n }\n : t,\n )\n break\n }\n\n case actionTypes.REMOVE_TOAST:\n if (action.toastId === undefined)\n state.value.toasts = []\n else\n state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)\n\n break\n }\n}\n\nfunction useToast() {\n return {\n toasts: computed(() => state.value.toasts),\n toast,\n dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),\n }\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast(props: Toast) {\n const id = genId()\n\n const update = (props: ToasterToast) =>\n dispatch({\n type: actionTypes.UPDATE_TOAST,\n toast: { ...props, id },\n })\n\n const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })\n\n dispatch({\n type: actionTypes.ADD_TOAST,\n toast: {\n ...props,\n id,\n open: true,\n onOpenChange: (open: boolean) => {\n if (!open)\n dismiss()\n },\n },\n })\n\n return {\n id,\n dismiss,\n update,\n }\n}\n\nexport { toast, useToast }\n"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "components:ui"
|
"type": "components:ui"
|
||||||
|
|
|
||||||
|
|
@ -8,11 +8,11 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "ToggleGroup.vue",
|
"name": "ToggleGroup.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, provide } from 'vue'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport type { toggleVariants } from '@/lib/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n class?: HTMLAttributes['class']\n variant?: ToggleGroupVariants['variant']\n size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n variant: props.variant,\n size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps.value, emits)\n</script>\n\n<template>\n <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n <slot />\n </ToggleGroupRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, provide } from 'vue'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport type { toggleVariants } from '@/lib/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n class?: HTMLAttributes['class']\n variant?: ToggleGroupVariants['variant']\n size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n variant: props.variant,\n size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n <slot />\n </ToggleGroupRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ToggleGroupItem.vue",
|
"name": "ToggleGroupItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, inject } from 'vue'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'\nimport { toggleVariants } from '@/lib/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n class?: HTMLAttributes['class']\n variant?: ToggleGroupVariants['variant']\n size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n const { class: _, variant, size, ...delegated } = props\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps.value)\n</script>\n\n<template>\n <ToggleGroupItem\n v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n variant: context?.variant || variant,\n size: context?.size || size,\n }), props.class)\"\n >\n <slot />\n </ToggleGroupItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, inject } from 'vue'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'\nimport { toggleVariants } from '@/lib/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n class?: HTMLAttributes['class']\n variant?: ToggleGroupVariants['variant']\n size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n const { class: _, variant, size, ...delegated } = props\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <ToggleGroupItem\n v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n variant: context?.variant || variant,\n size: context?.size || size,\n }), props.class)\"\n >\n <slot />\n </ToggleGroupItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,11 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Toggle.vue",
|
"name": "Toggle.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useForwardPropsEmits } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed, useAttrs } 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 disabled?: boolean\n}\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n disabled: false,\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { variant, size, disabled, ...otherProps } = props\n return otherProps\n})\n\nconst { class: className, ...rest } = useAttrs()\nconst forwarded = useForwardPropsEmits(toggleProps.value, emits)\n</script>\n\n<template>\n <Toggle\n v-bind=\"{\n ...forwarded,\n ...rest,\n }\"\n :class=\"cn(toggleVariants({ variant, size }), className ?? '')\"\n :disabled=\"props.disabled\"\n >\n <slot />\n </Toggle>\n</template>\n"
|
"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",
|
"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"
|
"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"
|
"type": "components:ui"
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TooltipContent.vue",
|
"name": "TooltipContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<TooltipContentProps>(), {\n sideOffset: 4,\n})\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <TooltipPortal>\n <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')\">\n <slot />\n </TooltipContent>\n </TooltipPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <TooltipPortal>\n <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n <slot />\n </TooltipContent>\n </TooltipPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TooltipProvider.vue",
|
"name": "TooltipProvider.vue",
|
||||||
|
|
|
||||||
|
|
@ -7,19 +7,19 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Accordion.vue",
|
"name": "Accordion.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n AccordionRoot,\n type AccordionRootEmits,\n type AccordionRootProps,\n useEmitAsProps,\n} from 'radix-vue'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n</script>\n\n<template>\n <AccordionRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </AccordionRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport {\n AccordionRoot,\n type AccordionRootEmits,\n type AccordionRootProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <AccordionRoot v-bind=\"forwarded\">\n <slot />\n </AccordionRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AccordionContent.vue",
|
"name": "AccordionContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { AccordionContent, type AccordionContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionContentProps & { class?: string }>()\n</script>\n\n<template>\n <AccordionContent\n v-bind=\"props\"\n :class=\"\n cn(\n 'overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',\n props.class,\n )\n \"\n >\n <div class=\"pb-4 pt-0\">\n <slot />\n </div>\n </AccordionContent>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AccordionContent, type AccordionContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <AccordionContent\n v-bind=\"delegatedProps\"\n class=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n >\n <div :class=\"cn('pb-4 pt-0', props.class)\">\n <slot />\n </div>\n </AccordionContent>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AccordionItem.vue",
|
"name": "AccordionItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { AccordionItem, type AccordionItemProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionItemProps & { class?: string }>()\n</script>\n\n<template>\n <AccordionItem\n v-bind=\"props\"\n :class=\"cn('border-b', props.class ?? '')\"\n >\n <slot />\n </AccordionItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <AccordionItem\n v-bind=\"forwardedProps\"\n :class=\"cn('border-b', props.class)\"\n >\n <slot />\n </AccordionItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AccordionTrigger.vue",
|
"name": "AccordionTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n AccordionHeader,\n AccordionTrigger,\n type AccordionTriggerProps,\n} from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionTriggerProps & { class?: string }>()\n</script>\n\n<template>\n <AccordionHeader class=\"flex\" as=\"div\">\n <AccordionTrigger\n v-bind=\"props\"\n :class=\"\n cn(\n 'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n props.class,\n )\n \"\n >\n <slot />\n <ChevronDownIcon\n class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n />\n </AccordionTrigger>\n </AccordionHeader>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n AccordionHeader,\n AccordionTrigger,\n type AccordionTriggerProps,\n} from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <AccordionHeader class=\"flex\">\n <AccordionTrigger\n v-bind=\"delegatedProps\"\n :class=\"\n cn(\n 'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n props.class,\n )\n \"\n >\n <slot />\n <slot name=\"icon\">\n <ChevronDownIcon\n class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n />\n </slot>\n </AccordionTrigger>\n </AccordionHeader>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -12,31 +12,31 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertDialogAction.vue",
|
"name": "AlertDialogAction.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<AlertDialogActionProps>()\n</script>\n\n<template>\n <AlertDialogAction v-bind=\"props\" :class=\"cn(buttonVariants(), $attrs.class ?? '')\">\n <slot />\n </AlertDialogAction>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n <slot />\n </AlertDialogAction>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertDialogCancel.vue",
|
"name": "AlertDialogCancel.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<AlertDialogCancelProps>()\n</script>\n\n<template>\n <AlertDialogCancel v-bind=\"props\" :class=\"cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', $attrs.class ?? '')\">\n <slot />\n </AlertDialogCancel>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <AlertDialogCancel v-bind=\"delegatedProps\" :class=\"cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)\">\n <slot />\n </AlertDialogCancel>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertDialogContent.vue",
|
"name": "AlertDialogContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n AlertDialogContent,\n type AlertDialogContentEmits,\n type AlertDialogContentProps,\n AlertDialogOverlay,\n AlertDialogPortal,\n useEmitAsProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogContentProps & { class?: string }>()\n\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <AlertDialogPortal>\n <AlertDialogOverlay\n class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n />\n <AlertDialogContent\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :class=\"\n cn(\n 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',\n props.class,\n )\n \"\n >\n <slot />\n </AlertDialogContent>\n </AlertDialogPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n AlertDialogContent,\n type AlertDialogContentEmits,\n type AlertDialogContentProps,\n AlertDialogOverlay,\n AlertDialogPortal,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <AlertDialogPortal>\n <AlertDialogOverlay\n class=\"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n />\n <AlertDialogContent\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n props.class,\n )\n \"\n >\n <slot />\n </AlertDialogContent>\n </AlertDialogPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertDialogDescription.vue",
|
"name": "AlertDialogDescription.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n AlertDialogDescription,\n type AlertDialogDescriptionProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n <AlertDialogDescription\n :class=\"cn('text-muted-foreground text-sm', props.class)\"\n :as-child=\"props.asChild\"\n >\n <slot />\n </AlertDialogDescription>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n AlertDialogDescription,\n type AlertDialogDescriptionProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <AlertDialogDescription\n v-bind=\"delegatedProps\"\n :class=\"cn('text-sm text-muted-foreground', props.class)\"\n >\n <slot />\n </AlertDialogDescription>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertDialogFooter.vue",
|
"name": "AlertDialogFooter.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'flex flex-col space-y-2 sm:space-y-0 mt-3.5 sm:flex-row sm:justify-end sm:space-x-2',\n props.class,\n )\n \"\n >\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n props.class,\n )\n \"\n >\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertDialogHeader.vue",
|
"name": "AlertDialogHeader.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div\n :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n >\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <div\n :class=\"cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\"\n >\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertDialogTitle.vue",
|
"name": "AlertDialogTitle.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: string }>()\n</script>\n\n<template>\n <AlertDialogTitle\n :as-child=\"props.asChild\"\n :class=\"cn('text-lg text-foreground font-semibold', props.class)\"\n >\n <slot />\n </AlertDialogTitle>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <AlertDialogTitle\n v-bind=\"delegatedProps\"\n :class=\"cn('text-lg font-semibold', props.class)\"\n >\n <slot />\n </AlertDialogTitle>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertDialogTrigger.vue",
|
"name": "AlertDialogTrigger.vue",
|
||||||
|
|
|
||||||
|
|
@ -7,19 +7,19 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Alert.vue",
|
"name": "Alert.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { alertVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n variant?: NonNullable<Parameters<typeof alertVariants>[0]>['variant']\n class?: string\n}\n\nconst props = defineProps<Props>()\n</script>\n\n<template>\n <div :class=\"cn(alertVariants({ variant }), props.class ?? '')\">\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { type AlertVariants, alertVariants } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n variant?: AlertVariants['variant']\n}>()\n</script>\n\n<template>\n <div :class=\"cn(alertVariants({ variant }), props.class)\" role=\"alert\">\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertDescription.vue",
|
"name": "AlertDescription.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: String,\n})\n</script>\n\n<template>\n <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertTitle.vue",
|
"name": "AlertTitle.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', $attrs.class ?? '')\">\n <slot />\n </h5>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', props.class)\">\n <slot />\n </h5>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
"content": "import { cva } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\n\nexport const alertVariants = cva(\n 'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',\n {\n variants: {\n variant: {\n default: 'bg-background text-foreground',\n destructive:\n 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n"
|
"content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\n\nexport const alertVariants = cva(\n 'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',\n {\n variants: {\n variant: {\n default: 'bg-background text-foreground',\n destructive:\n 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "components:ui"
|
"type": "components:ui"
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Avatar.vue",
|
"name": "Avatar.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { AvatarRoot } from 'radix-vue'\nimport { avatarVariant } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n size?: NonNullable<Parameters<typeof avatarVariant>[0]>['size']\n shape?: NonNullable<Parameters<typeof avatarVariant>[0]>['shape']\n class?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n size: 'sm',\n shape: 'circle',\n})\n</script>\n\n<template>\n <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n <slot />\n </AvatarRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { AvatarRoot } from 'radix-vue'\nimport { type AvatarVariants, avatarVariant } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<{\n class?: HTMLAttributes['class']\n size?: AvatarVariants['size']\n shape?: AvatarVariants['shape']\n}>(), {\n size: 'sm',\n shape: 'circle',\n})\n</script>\n\n<template>\n <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n <slot />\n </AvatarRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AvatarFallback.vue",
|
"name": "AvatarFallback.vue",
|
||||||
|
|
@ -15,11 +15,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AvatarImage.vue",
|
"name": "AvatarImage.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'radix-vue'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n <AvatarImage v-bind=\"props\" class=\"h-full w-full aspect-square\" />\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'radix-vue'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
"content": "import { cva } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\n\nexport const avatarVariant = cva(\n 'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-muted overflow-hidden',\n {\n variants: {\n size: {\n sm: 'h-10 w-10 text-xs',\n base: 'h-16 w-16 text-2xl',\n lg: 'h-32 w-32 text-5xl',\n },\n shape: {\n circle: 'rounded-full',\n square: 'rounded-md',\n },\n },\n },\n)\n"
|
"content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\n\nexport const avatarVariant = cva(\n 'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',\n {\n variants: {\n size: {\n sm: 'h-10 w-10 text-xs',\n base: 'h-16 w-16 text-2xl',\n lg: 'h-32 w-32 text-5xl',\n },\n shape: {\n circle: 'rounded-full',\n square: 'rounded-md',\n },\n },\n },\n)\n\nexport type AvatarVariants = VariantProps<typeof avatarVariant>\n"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "components:ui"
|
"type": "components:ui"
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,11 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Badge.vue",
|
"name": "Badge.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { badgeVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface BadgeVariantProps extends VariantProps<typeof badgeVariants> {}\n\ninterface Props {\n variant?: BadgeVariantProps['variant']\n}\ndefineProps<Props>()\n</script>\n\n<template>\n <div :class=\"cn(badgeVariants({ variant }), $attrs.class ?? '')\">\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { type BadgeVariants, badgeVariants } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n variant?: BadgeVariants['variant']\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <div :class=\"cn(badgeVariants({ variant }), props.class)\">\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
"content": "import { cva } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n 'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n {\n variants: {\n variant: {\n default:\n 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n secondary:\n 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n destructive:\n 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',\n outline: 'text-foreground',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n"
|
"content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n 'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\"',\n {\n variants: {\n variant: {\n default:\n 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n secondary:\n 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n destructive:\n 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',\n outline: 'text-foreground',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "components:ui"
|
"type": "components:ui"
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,11 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Button.vue",
|
"name": "Button.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ButtonVariantProps extends VariantProps<typeof buttonVariants> {}\n\ninterface Props extends PrimitiveProps {\n variant?: ButtonVariantProps['variant']\n size?: ButtonVariantProps['size']\n as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n as: 'button',\n})\n</script>\n\n<template>\n <Primitive\n :as=\"as\"\n :as-child=\"asChild\"\n :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n >\n <slot />\n </Primitive>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { type ButtonVariants, buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends PrimitiveProps {\n variant?: ButtonVariants['variant']\n size?: ButtonVariants['size']\n as?: string\n class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n as: 'button',\n})\n</script>\n\n<template>\n <Primitive\n :as=\"as\"\n :as-child=\"asChild\"\n :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n >\n <slot />\n </Primitive>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
"content": "import { cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n 'inline-flex items-center justify-center rounded-md whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n default:\n 'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n destructive:\n 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n outline:\n 'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n secondary:\n 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n ghost: 'hover:bg-accent hover:text-accent-foreground',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n size: {\n default: 'h-9 px-4 py-2',\n sm: 'h-8 rounded-md px-3 text-xs',\n lg: 'h-10 rounded-md px-8',\n icon: 'h-9 w-9',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n)\n"
|
"content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n destructive:\n 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n outline:\n 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n secondary:\n 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n ghost: 'hover:bg-accent hover:text-accent-foreground',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n size: {\n default: 'h-9 px-4 py-2',\n sm: 'h-8 rounded-md px-3 text-xs',\n lg: 'h-10 rounded-md px-8',\n icon: 'h-9 w-9',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "components:ui"
|
"type": "components:ui"
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -7,27 +7,27 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Card.vue",
|
"name": "Card.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'rounded-lg border bg-card text-card-foreground shadow',\n props.class,\n )\n \"\n >\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'rounded-xl border bg-card text-card-foreground shadow',\n props.class,\n )\n \"\n >\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CardContent.vue",
|
"name": "CardContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div :class=\"cn('p-6 pt-0', props.class)\">\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <div :class=\"cn('p-6 pt-0', props.class)\">\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CardDescription.vue",
|
"name": "CardDescription.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n <slot />\n </p>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n <slot />\n </p>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CardFooter.vue",
|
"name": "CardFooter.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div :class=\"cn('flex items-center p-6 pt-0', props.class)\">\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <div :class=\"cn('flex items-center p-6 pt-0', props.class)\">\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CardHeader.vue",
|
"name": "CardHeader.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div :class=\"cn('flex flex-col space-y-1.5 p-6', props.class)\">\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <div :class=\"cn('flex flex-col gap-y-1.5 p-6', props.class)\">\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CardTitle.vue",
|
"name": "CardTitle.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <h3\n :class=\"\n cn('font-semibold leading-none tracking-tight', props.class)\n \"\n >\n <slot />\n </h3>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <h3\n :class=\"\n cn('font-semibold leading-none tracking-tight', props.class)\n \"\n >\n <slot />\n </h3>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Checkbox.vue",
|
"name": "Checkbox.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CheckboxRootProps>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <CheckboxRoot\n v-bind=\"forwarded\"\n :class=\"\n cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n $attrs.class ?? '')\"\n >\n <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n <CheckIcon class=\"h-4 w-4\" />\n </CheckboxIndicator>\n </CheckboxRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <CheckboxRoot\n v-bind=\"forwarded\"\n :class=\"\n cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n props.class)\"\n >\n <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n <slot>\n <CheckIcon class=\"h-4 w-4\" />\n </slot>\n </CheckboxIndicator>\n </CheckboxRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Collapsible.vue",
|
"name": "Collapsible.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { CollapsibleRoot, useEmitAsProps } from 'radix-vue'\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n</script>\n\n<template>\n <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot :open=\"open\" />\n </CollapsibleRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n <slot :open=\"open\" />\n </CollapsibleRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CollapsibleContent.vue",
|
"name": "CollapsibleContent.vue",
|
||||||
|
|
|
||||||
|
|
@ -8,39 +8,39 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Command.vue",
|
"name": "Command.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxRootProps>()\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ComboboxRoot\n v-bind=\"forwarded\"\n :open=\"true\"\n :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')\"\n >\n <slot />\n </ComboboxRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n open: true,\n modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ComboboxRoot\n v-bind=\"forwarded\"\n :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n >\n <slot />\n </ComboboxRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CommandDialog.vue",
|
"name": "CommandDialog.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'radix-vue'\nimport { useEmitAsProps } from 'radix-vue'\nimport Command from './Command.vue'\nimport { Dialog, DialogContent } from '@/lib/registry/new-york/ui/dialog'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <Dialog v-bind=\"{ ...props, ...emitsAsProps }\">\n <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n <slot />\n </Command>\n </DialogContent>\n </Dialog>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { useForwardPropsEmits } from 'radix-vue'\nimport type { DialogRootEmits, DialogRootProps } from 'radix-vue'\nimport Command from './Command.vue'\nimport { Dialog, DialogContent } from '@/lib/registry/new-york/ui/dialog'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <Dialog v-bind=\"forwarded\">\n <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n <slot />\n </Command>\n </DialogContent>\n </Dialog>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CommandEmpty.vue",
|
"name": "CommandEmpty.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'radix-vue'\nimport { ComboboxEmpty } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxEmptyProps>()\n</script>\n\n<template>\n <ComboboxEmpty v-bind=\"props\" :class=\"cn('py-6 text-center text-sm', $attrs.class ?? '')\">\n <slot />\n </ComboboxEmpty>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxEmptyProps } from 'radix-vue'\nimport { ComboboxEmpty } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n <slot />\n </ComboboxEmpty>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CommandGroup.vue",
|
"name": "CommandGroup.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'radix-vue'\nimport { ComboboxGroup, ComboboxLabel } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxGroupProps & {\n heading?: string\n}>()\n</script>\n\n<template>\n <ComboboxGroup\n v-bind=\"props\"\n :class=\"cn('overflow-hidden p-1 text-foreground', $attrs.class ?? '')\"\n >\n <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n {{ heading }}\n </ComboboxLabel>\n <slot />\n </ComboboxGroup>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxGroupProps } from 'radix-vue'\nimport { ComboboxGroup, ComboboxLabel } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxGroupProps & {\n class?: HTMLAttributes['class']\n heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ComboboxGroup\n v-bind=\"delegatedProps\"\n :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n >\n <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n {{ heading }}\n </ComboboxLabel>\n <slot />\n </ComboboxGroup>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CommandInput.vue",
|
"name": "CommandInput.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\nimport { ComboboxInput, type ComboboxInputProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxInputProps>()\n</script>\n\n<script lang=\"ts\">\nexport default {\n inheritAttrs: false,\n}\n</script>\n\n<template>\n <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n <MagnifyingGlassIcon class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n <ComboboxInput\n v-bind=\"{ ...props, ...$attrs }\"\n auto-focus\n :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')\"\n />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n <MagnifyingGlassIcon class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n <ComboboxInput\n v-bind=\"{ ...forwardedProps, ...$attrs }\"\n auto-focus\n :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CommandItem.vue",
|
"name": "CommandItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { ComboboxItem, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxItemProps>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <ComboboxItem\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', $attrs.class ?? '')\"\n @select.prevent\n >\n <slot />\n </ComboboxItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { ComboboxItem, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ComboboxItem\n v-bind=\"forwarded\"\n :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n @select.prevent\n >\n <slot />\n </ComboboxItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CommandList.vue",
|
"name": "CommandList.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'\nimport { ComboboxContent, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxContentProps>()\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', $attrs.class ?? '')\">\n <div role=\"presentation\">\n <slot />\n </div>\n </ComboboxContent>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'\nimport { ComboboxContent, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n <div role=\"presentation\">\n <slot />\n </div>\n </ComboboxContent>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CommandSeparator.vue",
|
"name": "CommandSeparator.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'radix-vue'\nimport { ComboboxSeparator } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxSeparatorProps>()\n</script>\n\n<template>\n <ComboboxSeparator\n v-bind=\"props\"\n :class=\"cn('-mx-1 h-px bg-border', $attrs.class ?? '')\"\n >\n <slot />\n </ComboboxSeparator>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxSeparatorProps } from 'radix-vue'\nimport { ComboboxSeparator } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ComboboxSeparator\n v-bind=\"delegatedProps\"\n :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n >\n <slot />\n </ComboboxSeparator>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CommandShortcut.vue",
|
"name": "CommandShortcut.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', $attrs.class ?? '')\">\n <slot />\n </span>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n <slot />\n </span>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -11,11 +11,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuCheckboxItem.vue",
|
"name": "ContextMenuCheckboxItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuCheckboxItem,\n type ContextMenuCheckboxItemEmits,\n type ContextMenuCheckboxItemProps,\n ContextMenuItemIndicator,\n useEmitAsProps,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n</script>\n\n<template>\n <ContextMenuCheckboxItem\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n :class=\"[\n cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n ),\n ]\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <ContextMenuItemIndicator\n class=\"absolute left-1.5 inline-flex w-4 h-4 items-center justify-center\"\n >\n <CheckIcon class=\"h-4 w-4\" />\n </ContextMenuItemIndicator>\n </span>\n <slot />\n </ContextMenuCheckboxItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuCheckboxItem,\n type ContextMenuCheckboxItemEmits,\n type ContextMenuCheckboxItemProps,\n ContextMenuItemIndicator,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ContextMenuCheckboxItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <ContextMenuItemIndicator>\n <CheckIcon class=\"h-4 w-4\" />\n </ContextMenuItemIndicator>\n </span>\n <slot />\n </ContextMenuCheckboxItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuContent.vue",
|
"name": "ContextMenuContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuContent,\n type ContextMenuContentEmits,\n type ContextMenuContentProps,\n ContextMenuPortal,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuContentProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuPortal>\n <ContextMenuContent\n :align-offset=\"props.alignOffset\"\n :class=\"[\n cn(\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n ),\n ]\"\n v-bind=\"forwarded\"\n >\n <slot />\n </ContextMenuContent>\n </ContextMenuPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuContent,\n type ContextMenuContentEmits,\n type ContextMenuContentProps,\n ContextMenuPortal,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ContextMenuPortal>\n <ContextMenuContent\n v-bind=\"forwarded\"\n :class=\"cn(\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\"\n >\n <slot />\n </ContextMenuContent>\n </ContextMenuPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuGroup.vue",
|
"name": "ContextMenuGroup.vue",
|
||||||
|
|
@ -23,11 +23,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuItem.vue",
|
"name": "ContextMenuItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuItem,\n type ContextMenuItemEmits,\n type ContextMenuItemProps,\n useEmitAsProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuItemProps & { class?: string; inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n</script>\n\n<template>\n <ContextMenuItem\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n :class=\"[\n cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n >\n <slot />\n </ContextMenuItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuItem,\n type ContextMenuItemEmits,\n type ContextMenuItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ContextMenuItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n </ContextMenuItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuLabel.vue",
|
"name": "ContextMenuLabel.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: string; inset?: boolean }>()\n</script>\n\n<template>\n <ContextMenuLabel\n v-bind=\"props\"\n :class=\"\n cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n inset && 'pl-8', props.class ?? '',\n )\"\n >\n <slot />\n </ContextMenuLabel>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ContextMenuLabel\n v-bind=\"delegatedProps\"\n :class=\"\n cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n inset && 'pl-8', props.class,\n )\"\n >\n <slot />\n </ContextMenuLabel>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuPortal.vue",
|
"name": "ContextMenuPortal.vue",
|
||||||
|
|
@ -39,15 +39,15 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuRadioItem.vue",
|
"name": "ContextMenuRadioItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuItemIndicator,\n ContextMenuRadioItem,\n type ContextMenuRadioItemEmits,\n type ContextMenuRadioItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuRadioItem\n v-bind=\"forwarded\"\n :class=\"[\n cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n ),\n ]\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <ContextMenuItemIndicator>\n <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n </ContextMenuItemIndicator>\n </span>\n <slot />\n </ContextMenuRadioItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuItemIndicator,\n ContextMenuRadioItem,\n type ContextMenuRadioItemEmits,\n type ContextMenuRadioItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ContextMenuRadioItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <ContextMenuItemIndicator>\n <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n </ContextMenuItemIndicator>\n </span>\n <slot />\n </ContextMenuRadioItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuSeparator.vue",
|
"name": "ContextMenuSeparator.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSeparator,\n type ContextMenuSeparatorProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSeparatorProps>()\n</script>\n\n<template>\n <ContextMenuSeparator v-bind=\"props\" :class=\"cn('-mx-1 my-1 h-px bg-border', $attrs.class ?? '')\" />\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuSeparator,\n type ContextMenuSeparatorProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuShortcut.vue",
|
"name": "ContextMenuShortcut.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', $attrs.class ?? '')\">\n <slot />\n </span>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n <slot />\n </span>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuSub.vue",
|
"name": "ContextMenuSub.vue",
|
||||||
|
|
@ -55,15 +55,15 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuSubContent.vue",
|
"name": "ContextMenuSubContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSubContent,\n type DropdownMenuSubContentEmits,\n type DropdownMenuSubContentProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: string }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuSubContent\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </ContextMenuSubContent>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuSubContent,\n type DropdownMenuSubContentEmits,\n type DropdownMenuSubContentProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ContextMenuSubContent\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </ContextMenuSubContent>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuSubTrigger.vue",
|
"name": "ContextMenuSubTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSubTrigger,\n type ContextMenuSubTriggerProps,\n} from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?: boolean }>()\n</script>\n\n<template>\n <ContextMenuSubTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n >\n <slot />\n <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n </ContextMenuSubTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuSubTrigger,\n type ContextMenuSubTriggerProps,\n useForwardProps,\n} from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <ContextMenuSubTrigger\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n </ContextMenuSubTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuTrigger.vue",
|
"name": "ContextMenuTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n</script>\n\n<template>\n <ContextMenuTrigger v-bind=\"props\">\n <slot />\n </ContextMenuTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n <ContextMenuTrigger v-bind=\"forwardedProps\">\n <slot />\n </ContextMenuTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -15,23 +15,23 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DialogContent.vue",
|
"name": "DialogContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n DialogClose,\n DialogContent,\n type DialogContentEmits,\n type DialogContentProps,\n DialogOverlay,\n DialogPortal,\n useEmitAsProps,\n} from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogContentProps & { class?: string }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <DialogPortal>\n <DialogOverlay\n class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n />\n <DialogContent\n :class=\"\n cn(\n 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',\n props.class,\n )\n \"\n v-bind=\"{ ...props, ...emitsAsProps }\"\n >\n <slot />\n\n <DialogClose\n class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n >\n <Cross2Icon class=\"w-4 h-4\" />\n <span class=\"sr-only\">Close</span>\n </DialogClose>\n </DialogContent>\n </DialogPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n DialogClose,\n DialogContent,\n type DialogContentEmits,\n type DialogContentProps,\n DialogOverlay,\n DialogPortal,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <DialogPortal>\n <DialogOverlay\n class=\"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n />\n <DialogContent\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n props.class,\n )\"\n >\n <slot />\n\n <DialogClose\n class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\"\n >\n <Cross2Icon class=\"w-4 h-4\" />\n <span class=\"sr-only\">Close</span>\n </DialogClose>\n </DialogContent>\n </DialogPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DialogDescription.vue",
|
"name": "DialogDescription.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n <DialogDescription\n v-bind=\"props\"\n :class=\"cn('text-muted-foreground text-sm', props.class)\"\n >\n <slot />\n </DialogDescription>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <DialogDescription\n v-bind=\"forwardedProps\"\n :class=\"cn('text-sm text-muted-foreground', props.class)\"\n >\n <slot />\n </DialogDescription>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DialogFooter.vue",
|
"name": "DialogFooter.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface DialogFooterProps {\n class?: string\n}\n\nconst props = defineProps<DialogFooterProps>()\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'flex flex-col space-y-2 sm:space-y-0 mt-1.5 sm:flex-row sm:justify-end sm:space-x-2',\n props.class,\n )\n \"\n >\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n props.class,\n )\n \"\n >\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DialogHeader.vue",
|
"name": "DialogHeader.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface DialogHeaderProps {\n class?: string\n}\n\nconst props = defineProps<DialogHeaderProps>()\n</script>\n\n<template>\n <div\n :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n >\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <div\n :class=\"cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)\"\n >\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DialogTitle.vue",
|
"name": "DialogTitle.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: string }>()\n</script>\n\n<template>\n <DialogTitle\n v-bind=\"props\"\n :class=\"\n cn(\n 'text-lg text-foreground font-semibold leading-none tracking-tight',\n props.class,\n )\n \"\n >\n <slot />\n </DialogTitle>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <DialogTitle\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'text-lg font-semibold leading-none tracking-tight',\n props.class,\n )\n \"\n >\n <slot />\n </DialogTitle>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DialogTrigger.vue",
|
"name": "DialogTrigger.vue",
|
||||||
|
|
|
||||||
|
|
@ -11,11 +11,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuCheckboxItem.vue",
|
"name": "DropdownMenuCheckboxItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuCheckboxItem,\n type DropdownMenuCheckboxItemEmits,\n type DropdownMenuCheckboxItemProps,\n DropdownMenuItemIndicator,\n useEmitAsProps,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n</script>\n\n<template>\n <DropdownMenuCheckboxItem\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n :class=\" cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <DropdownMenuItemIndicator>\n <CheckIcon class=\"w-4 h-4\" />\n </DropdownMenuItemIndicator>\n </span>\n <slot />\n </DropdownMenuCheckboxItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n DropdownMenuCheckboxItem,\n type DropdownMenuCheckboxItemEmits,\n type DropdownMenuCheckboxItemProps,\n DropdownMenuItemIndicator,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <DropdownMenuCheckboxItem\n v-bind=\"forwarded\"\n :class=\" cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <DropdownMenuItemIndicator>\n <CheckIcon class=\"w-4 h-4\" />\n </DropdownMenuItemIndicator>\n </span>\n <slot />\n </DropdownMenuCheckboxItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuContent.vue",
|
"name": "DropdownMenuContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuContent,\n type DropdownMenuContentEmits,\n type DropdownMenuContentProps,\n DropdownMenuPortal,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<DropdownMenuContentProps & { class?: string }>(),\n {\n sideOffset: 4,\n },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DropdownMenuPortal>\n <DropdownMenuContent\n :class=\"[\n cn(\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n ),\n ]\"\n v-bind=\"forwarded\"\n >\n <slot />\n </DropdownMenuContent>\n </DropdownMenuPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n DropdownMenuContent,\n type DropdownMenuContentEmits,\n type DropdownMenuContentProps,\n DropdownMenuPortal,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n {\n sideOffset: 4,\n },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <DropdownMenuPortal>\n <DropdownMenuContent\n v-bind=\"forwarded\"\n :class=\"cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n >\n <slot />\n </DropdownMenuContent>\n </DropdownMenuPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuGroup.vue",
|
"name": "DropdownMenuGroup.vue",
|
||||||
|
|
@ -23,27 +23,27 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuItem.vue",
|
"name": "DropdownMenuItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { DropdownMenuItem, type DropdownMenuItemProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuItemProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n <DropdownMenuItem\n v-bind=\"props\"\n :class=\"[\n cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n >\n <slot />\n </DropdownMenuItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <DropdownMenuItem\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n </DropdownMenuItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuLabel.vue",
|
"name": "DropdownMenuLabel.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { DropdownMenuLabel, type DropdownMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuLabelProps & {\n inset?: boolean\n class?: string\n}>()\n</script>\n\n<template>\n <DropdownMenuLabel\n v-bind=\"props\"\n :class=\"\n cn('px-2 py-1.5 text-sm font-semibold',\n inset && 'pl-8', props.class)\"\n >\n <slot />\n </DropdownMenuLabel>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <DropdownMenuLabel\n v-bind=\"forwardedProps\"\n :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n >\n <slot />\n </DropdownMenuLabel>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuRadioGroup.vue",
|
"name": "DropdownMenuRadioGroup.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuRadioGroup,\n type DropdownMenuRadioGroupEmits,\n type DropdownMenuRadioGroupProps,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\n\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n</script>\n\n<template>\n <DropdownMenuRadioGroup\n v-bind=\"props\"\n @update:model-value=\"emits('update:modelValue', $event)\"\n >\n <slot />\n </DropdownMenuRadioGroup>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuRadioGroup,\n type DropdownMenuRadioGroupEmits,\n type DropdownMenuRadioGroupProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DropdownMenuRadioGroup v-bind=\"forwarded\">\n <slot />\n </DropdownMenuRadioGroup>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuRadioItem.vue",
|
"name": "DropdownMenuRadioItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuItemIndicator,\n DropdownMenuRadioItem,\n type DropdownMenuRadioItemEmits,\n type DropdownMenuRadioItemProps,\n useEmitAsProps,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: string }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n</script>\n\n<template>\n <DropdownMenuRadioItem\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n :class=\"cn(\n 'flex relative items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover pl-7 py-1.5 text-sm outline-none select-none cursor-default',\n props.class,\n )\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\n <DropdownMenuItemIndicator>\n <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n </DropdownMenuItemIndicator>\n </span>\n <slot />\n </DropdownMenuRadioItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n DropdownMenuItemIndicator,\n DropdownMenuRadioItem,\n type DropdownMenuRadioItemEmits,\n type DropdownMenuRadioItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <DropdownMenuRadioItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <DropdownMenuItemIndicator>\n <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n </DropdownMenuItemIndicator>\n </span>\n <slot />\n </DropdownMenuRadioItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuSeparator.vue",
|
"name": "DropdownMenuSeparator.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSeparator,\n type DropdownMenuSeparatorProps,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps>()\n</script>\n\n<template>\n <DropdownMenuSeparator v-bind=\"props\" class=\"-mx-1 my-1 h-px bg-muted\" />\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n DropdownMenuSeparator,\n type DropdownMenuSeparatorProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\n class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuShortcut.vue",
|
"name": "DropdownMenuShortcut.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', $attrs.class ?? '')\">\n <slot />\n </span>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', props.class)\">\n <slot />\n </span>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuSub.vue",
|
"name": "DropdownMenuSub.vue",
|
||||||
|
|
@ -51,15 +51,15 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuSubContent.vue",
|
"name": "DropdownMenuSubContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSubContent,\n type DropdownMenuSubContentEmits,\n type DropdownMenuSubContentProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubContentProps>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DropdownMenuSubContent\n v-bind=\"forwarded\"\n :class=\"cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')\"\n >\n <slot />\n </DropdownMenuSubContent>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n DropdownMenuSubContent,\n type DropdownMenuSubContentEmits,\n type DropdownMenuSubContentProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <DropdownMenuSubContent\n v-bind=\"forwarded\"\n :class=\"cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n >\n <slot />\n </DropdownMenuSubContent>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuSubTrigger.vue",
|
"name": "DropdownMenuSubTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSubTrigger,\n type DropdownMenuSubTriggerProps,\n} from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()\n</script>\n\n<template>\n <DropdownMenuSubTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n props.class,\n ),\n ]\"\n >\n <slot />\n <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n </DropdownMenuSubTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n DropdownMenuSubTrigger,\n type DropdownMenuSubTriggerProps,\n useForwardProps,\n} from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <DropdownMenuSubTrigger\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n props.class,\n )\"\n >\n <slot />\n <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n </DropdownMenuSubTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuTrigger.vue",
|
"name": "DropdownMenuTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n</script>\n\n<template>\n <DropdownMenuTrigger class=\"outline-none\" v-bind=\"props\">\n <slot />\n </DropdownMenuTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n <slot />\n </DropdownMenuTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,8 @@
|
||||||
"zod"
|
"zod"
|
||||||
],
|
],
|
||||||
"registryDependencies": [
|
"registryDependencies": [
|
||||||
"utils"
|
"utils",
|
||||||
|
"label"
|
||||||
],
|
],
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
|
|
@ -15,15 +16,15 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "FormDescription.vue",
|
"name": "FormDescription.vue",
|
||||||
"content": "<script lang=\"ts\" setup>\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n <p\n :id=\"formDescriptionId\"\n :class=\"cn('text-[0.8rem] text-muted-foreground', $attrs.class ?? '')\"\n >\n <slot />\n </p>\n</template>\n"
|
"content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n <p\n :id=\"formDescriptionId\"\n :class=\"cn('text-sm text-muted-foreground', props.class)\"\n >\n <slot />\n </p>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "FormItem.vue",
|
"name": "FormItem.vue",
|
||||||
"content": "<script lang=\"ts\">\nimport { type InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n = Symbol() as InjectionKey<string>\n</script>\n\n<script lang=\"ts\" setup>\nimport { provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n <div :class=\"cn('space-y-2', $attrs.class ?? '')\">\n <slot />\n </div>\n</template>\n"
|
"content": "<script lang=\"ts\">\nimport type { HTMLAttributes, InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n = Symbol() as InjectionKey<string>\n</script>\n\n<script lang=\"ts\" setup>\nimport { provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n <div :class=\"cn('space-y-2', props.class)\">\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "FormLabel.vue",
|
"name": "FormLabel.vue",
|
||||||
"content": "<script lang=\"ts\" setup>\nimport { Label, type LabelProps } from 'radix-vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n <Label\n :class=\"cn(\n 'block text-sm tracking-tight font-medium text-foreground text-left',\n error && 'text-destructive',\n $attrs.class ?? '',\n )\"\n :for=\"formItemId\"\n >\n <slot />\n </Label>\n</template>\n"
|
"content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport type { LabelProps } from 'radix-vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\nimport { Label } from '@/lib/registry/new-york/ui/label'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n <Label\n :class=\"cn(\n error && 'text-destructive',\n props.class,\n )\"\n :for=\"formItemId\"\n >\n <slot />\n </Label>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "FormMessage.vue",
|
"name": "FormMessage.vue",
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,11 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "HoverCard.vue",
|
"name": "HoverCard.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n <HoverCardRoot v-bind=\"forwarded\">\n <slot />\n </HoverCardRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n <HoverCardRoot v-bind=\"forwardedProps\">\n <slot />\n </HoverCardRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "HoverCardContent.vue",
|
"name": "HoverCardContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n HoverCardContent,\n type HoverCardContentProps,\n HoverCardPortal,\n useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<HoverCardContentProps & { class?: string }>(),\n {\n sideOffset: 4,\n },\n)\n\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n <HoverCardPortal>\n <HoverCardContent\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'z-50 w-64 rounded-md bg-background border border-border p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </HoverCardContent>\n </HoverCardPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n HoverCardContent,\n type HoverCardContentProps,\n HoverCardPortal,\n useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n {\n sideOffset: 4,\n },\n)\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <HoverCardPortal>\n <HoverCardContent\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </HoverCardContent>\n </HoverCardPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "HoverCardTrigger.vue",
|
"name": "HoverCardTrigger.vue",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Input.vue",
|
"name": "Input.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n defaultValue?: string | number\n modelValue?: string | number\n class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n <input v-model=\"modelValue\" :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class ?? '')\">\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n defaultValue?: string | number\n modelValue?: string | number\n class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n <input v-model=\"modelValue\" :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\">\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Label.vue",
|
"name": "Label.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { Label, type LabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps & { class?: string }>()\n</script>\n\n<template>\n <Label\n v-bind=\"props\"\n :class=\"\n cn(\n 'block text-sm tracking-tight font-medium text-foreground text-left',\n props.class,\n )\n \"\n >\n <slot />\n </Label>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Label, type LabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <Label\n v-bind=\"delegatedProps\"\n :class=\"\n cn(\n 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n props.class,\n )\n \"\n >\n <slot />\n </Label>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,15 +7,15 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Menubar.vue",
|
"name": "Menubar.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n MenubarRoot,\n type MenubarRootEmits,\n type MenubarRootProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarRootProps & { class?: string }>()\n\nconst emits = defineEmits<MenubarRootEmits>()\n</script>\n\n<template>\n <MenubarRoot\n v-bind=\"props\"\n :class=\"\n cn(\n 'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',\n props.class,\n )\n \"\n @update:model-value=\"emits('update:modelValue', $event)\"\n >\n <slot />\n </MenubarRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n MenubarRoot,\n type MenubarRootEmits,\n type MenubarRootProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <MenubarRoot\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarCheckboxItem.vue",
|
"name": "MenubarCheckboxItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n MenubarCheckboxItem,\n type MenubarCheckboxItemEmits,\n type MenubarCheckboxItemProps,\n MenubarItemIndicator,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: string }>()\n\nconst emit = defineEmits<MenubarCheckboxItemEmits>()\n</script>\n\n<template>\n <MenubarCheckboxItem\n v-bind=\"props\"\n :class=\"[\n cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n ),\n ]\"\n @update:checked=\"emit('update:checked', $event)\"\n @select=\"emit('select', $event)\"\n >\n <MenubarItemIndicator\n class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n >\n <CheckIcon class=\"w-4 h-4\" />\n </MenubarItemIndicator>\n <slot />\n </MenubarCheckboxItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n MenubarCheckboxItem,\n type MenubarCheckboxItemEmits,\n type MenubarCheckboxItemProps,\n MenubarItemIndicator,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <MenubarCheckboxItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <MenubarItemIndicator>\n <CheckIcon class=\"w-4 h-4\" />\n </MenubarItemIndicator>\n </span>\n <slot />\n </MenubarCheckboxItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarContent.vue",
|
"name": "MenubarContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n MenubarContent,\n type MenubarContentProps,\n MenubarPortal,\n useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<MenubarContentProps & { class?: string }>(),\n {\n align: 'start',\n alignOffset: -4,\n sideOffset: 8,\n },\n)\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n <MenubarPortal>\n <MenubarContent\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarContent>\n </MenubarPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n MenubarContent,\n type MenubarContentProps,\n MenubarPortal,\n useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n {\n align: 'start',\n alignOffset: -4,\n sideOffset: 8,\n },\n)\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <MenubarPortal>\n <MenubarContent\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarContent>\n </MenubarPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarGroup.vue",
|
"name": "MenubarGroup.vue",
|
||||||
|
|
@ -23,11 +23,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarItem.vue",
|
"name": "MenubarItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n MenubarItem,\n type MenubarItemEmits,\n type MenubarItemProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarItemProps & { inset?: boolean; class?: string }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n</script>\n\n<template>\n <MenubarItem\n v-bind=\"props\"\n :class=\"[\n cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n @select=\"emits('select', $event)\"\n >\n <slot />\n </MenubarItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n MenubarItem,\n type MenubarItemEmits,\n type MenubarItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <MenubarItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n </MenubarItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarLabel.vue",
|
"name": "MenubarLabel.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { MenubarLabel, type MenubarLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarLabelProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n <slot />\n </MenubarLabel>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { MenubarLabel, type MenubarLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n</script>\n\n<template>\n <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n <slot />\n </MenubarLabel>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarMenu.vue",
|
"name": "MenubarMenu.vue",
|
||||||
|
|
@ -35,19 +35,19 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarRadioGroup.vue",
|
"name": "MenubarRadioGroup.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n MenubarRadioGroup,\n type MenubarRadioGroupEmits,\n type MenubarRadioGroupProps,\n} from 'radix-vue'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n</script>\n\n<template>\n <MenubarRadioGroup\n v-bind=\"props\"\n @update:model-value=\"emits('update:modelValue', $event)\"\n >\n <slot />\n </MenubarRadioGroup>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport {\n MenubarRadioGroup,\n type MenubarRadioGroupEmits,\n type MenubarRadioGroupProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <MenubarRadioGroup v-bind=\"forwarded\">\n <slot />\n </MenubarRadioGroup>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarRadioItem.vue",
|
"name": "MenubarRadioItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n MenubarItemIndicator,\n MenubarRadioItem,\n type MenubarRadioItemEmits,\n type MenubarRadioItemProps,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: string }>()\n\nconst emits = defineEmits<MenubarRadioItemEmits>()\n</script>\n\n<template>\n <MenubarRadioItem\n v-bind=\"props\"\n :class=\"[\n cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n ),\n ]\"\n @select=\"emits('select', $event)\"\n >\n <MenubarItemIndicator\n class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n >\n <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n </MenubarItemIndicator>\n\n <slot />\n </MenubarRadioItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n MenubarItemIndicator,\n MenubarRadioItem,\n type MenubarRadioItemEmits,\n type MenubarRadioItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <MenubarRadioItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <MenubarItemIndicator>\n <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n </MenubarItemIndicator>\n </span>\n <slot />\n </MenubarRadioItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarSeparator.vue",
|
"name": "MenubarSeparator.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { MenubarSeparator, type MenubarSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSeparatorProps>()\n</script>\n\n<template>\n <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-secondary', $attrs.class ?? '')\" v-bind=\"props\" />\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarShortcut.vue",
|
"name": "MenubarShortcut.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n <span :class=\"cn('text-xs ml-auto tracking-widest opacity-50', $attrs.class ?? '')\">\n <slot />\n </span>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n <slot />\n </span>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarSub.vue",
|
"name": "MenubarSub.vue",
|
||||||
|
|
@ -55,15 +55,15 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarSubContent.vue",
|
"name": "MenubarSubContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n MenubarPortal,\n MenubarSubContent,\n type MenubarSubContentEmits,\n type MenubarSubContentProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<MenubarSubContentProps & { class?: string }>(),\n {\n sideOffset: 2,\n alignOffset: 0,\n },\n)\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n</script>\n\n<template>\n <MenubarPortal>\n <MenubarSubContent\n :loop=\"props.loop\"\n :as-child=\"props.asChild\"\n :side-offset=\"props.sideOffset\"\n :side=\"props.side\"\n :align=\"props.align\"\n :align-offset=\"props.alignOffset\"\n :class=\"\n cn(\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarSubContent>\n </MenubarPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n MenubarPortal,\n MenubarSubContent,\n type MenubarSubContentEmits,\n type MenubarSubContentProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>(),\n {\n sideOffset: 2,\n alignOffset: 0,\n },\n)\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <MenubarPortal>\n <MenubarSubContent\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarSubContent>\n </MenubarPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarSubTrigger.vue",
|
"name": "MenubarSubTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n <MenubarSubTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n >\n <slot />\n <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n </MenubarSubTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <MenubarSubTrigger\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n </MenubarSubTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarTrigger.vue",
|
"name": "MenubarTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { MenubarTrigger, type MenubarTriggerProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarTriggerProps & { class?: string }>()\n</script>\n\n<template>\n <MenubarTrigger\n v-bind=\"props\"\n :class=\"\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <MenubarTrigger\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,15 +7,15 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "NavigationMenu.vue",
|
"name": "NavigationMenu.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n NavigationMenuRoot,\n type NavigationMenuRootEmits,\n type NavigationMenuRootProps,\n} from 'radix-vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: string }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n</script>\n\n<template>\n <NavigationMenuRoot\n v-bind=\"props\"\n :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n @update:model-value=\"emits('update:modelValue', $event)\"\n >\n <slot />\n <NavigationMenuViewport />\n </NavigationMenuRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n NavigationMenuRoot,\n type NavigationMenuRootEmits,\n type NavigationMenuRootProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <NavigationMenuRoot\n v-bind=\"forwarded\"\n :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n >\n <slot />\n <NavigationMenuViewport />\n </NavigationMenuRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "NavigationMenuContent.vue",
|
"name": "NavigationMenuContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n NavigationMenuContent,\n type NavigationMenuContentEmits,\n type NavigationMenuContentProps,\n useEmitAsProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: string }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n</script>\n\n<template>\n <NavigationMenuContent\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n :class=\"\n cn(\n 'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ',\n props.class,\n )\n \"\n >\n <slot />\n </NavigationMenuContent>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n NavigationMenuContent,\n type NavigationMenuContentEmits,\n type NavigationMenuContentProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <NavigationMenuContent\n v-bind=\"forwarded\"\n :class=\"cn(\n 'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',\n props.class,\n )\"\n >\n <slot />\n </NavigationMenuContent>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "NavigationMenuIndicator.vue",
|
"name": "NavigationMenuIndicator.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuIndicatorProps>()\n</script>\n\n<template>\n <NavigationMenuIndicator\n v-bind=\"props\"\n :class=\"cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', $attrs.class ?? '')\"\n >\n <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n </NavigationMenuIndicator>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <NavigationMenuIndicator\n v-bind=\"forwardedProps\"\n :class=\"cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)\"\n >\n <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n </NavigationMenuIndicator>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "NavigationMenuItem.vue",
|
"name": "NavigationMenuItem.vue",
|
||||||
|
|
@ -23,19 +23,19 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "NavigationMenuLink.vue",
|
"name": "NavigationMenuLink.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n NavigationMenuLink,\n type NavigationMenuLinkEmits,\n type NavigationMenuLinkProps,\n useEmitAsProps,\n} from 'radix-vue'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n</script>\n\n<template>\n <NavigationMenuLink v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </NavigationMenuLink>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport {\n NavigationMenuLink,\n type NavigationMenuLinkEmits,\n type NavigationMenuLinkProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <NavigationMenuLink v-bind=\"forwarded\">\n <slot />\n </NavigationMenuLink>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "NavigationMenuList.vue",
|
"name": "NavigationMenuList.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { NavigationMenuList, type NavigationMenuListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuListProps & { class?: string }>()\n</script>\n\n<template>\n <NavigationMenuList\n v-bind=\"props\"\n :class=\"\n cn(\n 'group flex flex-1 list-none items-center justify-center space-x-1',\n props.class,\n )\n \"\n >\n <slot />\n </NavigationMenuList>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <NavigationMenuList\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'group flex flex-1 list-none items-center justify-center gap-x-1',\n props.class,\n )\n \"\n >\n <slot />\n </NavigationMenuList>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "NavigationMenuTrigger.vue",
|
"name": "NavigationMenuTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n NavigationMenuTrigger,\n type NavigationMenuTriggerProps,\n} from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { navigationMenuTriggerStyle } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: string }>()\n</script>\n\n<template>\n <NavigationMenuTrigger\n :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n v-bind=\"props\"\n >\n <slot />\n <ChevronDownIcon\n class=\"relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n aria-hidden=\"true\"\n />\n </NavigationMenuTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n NavigationMenuTrigger,\n type NavigationMenuTriggerProps,\n useForwardProps,\n} from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { navigationMenuTriggerStyle } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <NavigationMenuTrigger\n v-bind=\"forwardedProps\"\n :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n >\n <slot />\n <ChevronDownIcon\n class=\"relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n aria-hidden=\"true\"\n />\n </NavigationMenuTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "NavigationMenuViewport.vue",
|
"name": "NavigationMenuViewport.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n NavigationMenuViewport,\n type NavigationMenuViewportProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuViewportProps>()\n</script>\n\n<template>\n <div class=\"absolute left-0 top-full flex justify-center\">\n <NavigationMenuViewport\n v-bind=\"props\"\n :class=\"\n cn(\n 'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',\n $attrs.class ?? '',\n )\n \"\n />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n NavigationMenuViewport,\n type NavigationMenuViewportProps,\n useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <div class=\"absolute left-0 top-full flex justify-center\">\n <NavigationMenuViewport\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',\n props.class,\n )\n \"\n />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -8,23 +8,23 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "PaginationEllipsis.vue",
|
"name": "PaginationEllipsis.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps, useForwardProps } from 'radix-vue'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = defineProps<PaginationEllipsisProps>()\nconst forwarded = useForwardProps(props)\nconst { class: className, ...rest } = useAttrs()\n</script>\n\n<template>\n <PaginationEllipsis :class=\"cn('w-9 h-9 flex items-center justify-center', className ?? '')\" v-bind=\"{ ...forwarded, ...rest }\">\n <slot>\n <DotsHorizontalIcon />\n </slot>\n </PaginationEllipsis>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n <slot>\n <DotsHorizontalIcon />\n </slot>\n </PaginationEllipsis>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "PaginationFirst.vue",
|
"name": "PaginationFirst.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { PaginationFirst, type PaginationFirstProps, useForwardProps } from 'radix-vue'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport {\n Button,\n} from '@/lib/registry/new-york/ui/button'\n\nconst props = withDefaults(defineProps<PaginationFirstProps>(), {\n asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n <PaginationFirst v-bind=\"forwarded\">\n <Button class=\"w-9 h-9 p-0\" variant=\"outline\">\n <slot>\n <DoubleArrowLeftIcon />\n </slot>\n </Button>\n </PaginationFirst>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'radix-vue'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport {\n Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <PaginationFirst v-bind=\"delegatedProps\">\n <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n <slot>\n <DoubleArrowLeftIcon />\n </slot>\n </Button>\n </PaginationFirst>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "PaginationLast.vue",
|
"name": "PaginationLast.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { PaginationLast, type PaginationLastProps, useForwardProps } from 'radix-vue'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport {\n Button,\n} from '@/lib/registry/new-york/ui/button'\n\nconst props = withDefaults(defineProps<PaginationLastProps>(), {\n asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n <PaginationLast v-bind=\"forwarded\">\n <Button class=\"w-9 h-9 p-0\" variant=\"outline\">\n <slot>\n <DoubleArrowRightIcon />\n </slot>\n </Button>\n </PaginationLast>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationLast, type PaginationLastProps } from 'radix-vue'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport {\n Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <PaginationLast v-bind=\"delegatedProps\">\n <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n <slot>\n <DoubleArrowRightIcon />\n </slot>\n </Button>\n </PaginationLast>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "PaginationNext.vue",
|
"name": "PaginationNext.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { PaginationNext, type PaginationNextProps, useForwardProps } from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n Button,\n} from '@/lib/registry/new-york/ui/button'\n\nconst props = withDefaults(defineProps<PaginationNextProps>(), {\n asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n <PaginationNext v-bind=\"forwarded\">\n <Button class=\"w-9 h-9 p-0\" variant=\"outline\">\n <slot>\n <ChevronRightIcon />\n </slot>\n </Button>\n </PaginationNext>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationNext, type PaginationNextProps } from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <PaginationNext v-bind=\"delegatedProps\">\n <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n <slot>\n <ChevronRightIcon />\n </slot>\n </Button>\n </PaginationNext>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "PaginationPrev.vue",
|
"name": "PaginationPrev.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { PaginationPrev, type PaginationPrevProps, useForwardProps } from 'radix-vue'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport {\n Button,\n} from '@/lib/registry/new-york/ui/button'\n\nconst props = withDefaults(defineProps<PaginationPrevProps>(), {\n asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n <PaginationPrev v-bind=\"forwarded\">\n <Button class=\"w-9 h-9 p-0\" variant=\"outline\">\n <slot>\n <ChevronLeftIcon />\n </slot>\n </Button>\n </PaginationPrev>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'radix-vue'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport {\n Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <PaginationPrev v-bind=\"delegatedProps\">\n <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n <slot>\n <ChevronLeftIcon />\n </slot>\n </Button>\n </PaginationPrev>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -11,15 +11,15 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "PopoverContent.vue",
|
"name": "PopoverContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n PopoverContent,\n type PopoverContentEmits,\n type PopoverContentProps,\n PopoverPortal,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<PopoverContentProps & { class?: string }>(),\n {\n sideOffset: 4,\n },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <PopoverPortal>\n <PopoverContent\n v-bind=\"{ ...forwarded, ...$attrs }\"\n :class=\"\n cn(\n 'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </PopoverContent>\n </PopoverPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n PopoverContent,\n type PopoverContentEmits,\n type PopoverContentProps,\n PopoverPortal,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(\n defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n {\n align: 'center',\n sideOffset: 4,\n },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <PopoverPortal>\n <PopoverContent\n v-bind=\"{ ...forwarded, ...$attrs }\"\n :class=\"\n cn(\n 'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </PopoverContent>\n </PopoverPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "PopoverTrigger.vue",
|
"name": "PopoverTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n <PopoverTrigger v-bind=\"props\" class=\"\">\n <slot />\n </PopoverTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n <PopoverTrigger v-bind=\"props\">\n <slot />\n </PopoverTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
"content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\n"
|
"content": "export { PopoverAnchor } from 'radix-vue'\nexport { default as Popover } from './Popover.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\n"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "components:ui"
|
"type": "components:ui"
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Progress.vue",
|
"name": "Progress.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ProgressIndicator,\n ProgressRoot,\n type ProgressRootProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<ProgressRootProps & { class?: string }>(),\n {\n class: '',\n modelValue: 0,\n },\n)\n</script>\n\n<template>\n <ProgressRoot\n :class=\"\n cn(\n 'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',\n props.class,\n )\n \"\n v-bind=\"props\"\n >\n <ProgressIndicator\n :class=\"\n cn(\n 'h-full w-full flex-1 bg-primary transition-all',\n props.class,\n )\n \"\n :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n />\n </ProgressRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ProgressIndicator,\n ProgressRoot,\n type ProgressRootProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n {\n modelValue: 0,\n },\n)\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ProgressRoot\n v-bind=\"delegatedProps\"\n :class=\"\n cn(\n 'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',\n props.class,\n )\n \"\n >\n <ProgressIndicator\n class=\"h-full w-full flex-1 bg-primary transition-all\"\n :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n />\n </ProgressRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,11 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "RadioGroup.vue",
|
"name": "RadioGroup.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <RadioGroupRoot :class=\"cn('grid gap-2', props.class)\" v-bind=\"forwarded\">\n <slot />\n </RadioGroupRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <RadioGroupRoot\n :class=\"cn('grid gap-2', props.class)\"\n v-bind=\"forwarded\"\n >\n <slot />\n </RadioGroupRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "RadioGroupItem.vue",
|
"name": "RadioGroupItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n RadioGroupIndicator,\n RadioGroupItem,\n type RadioGroupItemProps,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupItemProps & { class?: string }>()\n</script>\n\n<template>\n <RadioGroupItem\n v-bind=\"props\"\n :class=\"\n cn(\n 'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n props.class,\n )\n \"\n >\n <RadioGroupIndicator\n :class=\"cn('flex items-center justify-center', props.class)\"\n >\n <CheckIcon class=\"h-3.5 w-3.5 fill-primary\" />\n </RadioGroupIndicator>\n </RadioGroupItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n RadioGroupIndicator,\n RadioGroupItem,\n type RadioGroupItemProps,\n useForwardProps,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <RadioGroupItem\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n props.class,\n )\n \"\n >\n <RadioGroupIndicator class=\"flex items-center justify-center\">\n <CheckIcon class=\"h-3.5 w-3.5 fill-primary\" />\n </RadioGroupIndicator>\n </RadioGroupItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,11 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "ScrollArea.vue",
|
"name": "ScrollArea.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ScrollAreaCorner,\n ScrollAreaRoot,\n type ScrollAreaRootProps,\n ScrollAreaViewport,\n} from 'radix-vue'\nimport ScrollBar from './ScrollBar.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<\n ScrollAreaRootProps & { class?: string }\n >(),\n {\n class: '',\n orientation: 'vertical',\n },\n)\n</script>\n\n<template>\n <ScrollAreaRoot :type=\"type\" :class=\"cn('relative overflow-hidden', props.class)\">\n <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n <slot />\n </ScrollAreaViewport>\n <ScrollBar />\n <ScrollAreaCorner />\n </ScrollAreaRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ScrollAreaCorner,\n ScrollAreaRoot,\n type ScrollAreaRootProps,\n ScrollAreaViewport,\n} from 'radix-vue'\nimport ScrollBar from './ScrollBar.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n <slot />\n </ScrollAreaViewport>\n <ScrollBar />\n <ScrollAreaCorner />\n </ScrollAreaRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ScrollBar.vue",
|
"name": "ScrollBar.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {\n orientation: 'vertical',\n})\n</script>\n\n<template>\n <ScrollAreaScrollbar\n v-bind=\"props\"\n :class=\"\n cn('flex touch-none select-none transition-colors',\n orientation === 'vertical'\n && 'h-full w-2.5 border-l border-l-transparent p-[1px]',\n orientation === 'horizontal'\n && 'h-2.5 border-t border-t-transparent p-[1px]',\n $attrs.class ?? '')\"\n >\n <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n </ScrollAreaScrollbar>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ScrollAreaScrollbar\n v-bind=\"delegatedProps\"\n :class=\"\n cn('flex touch-none select-none transition-colors',\n orientation === 'vertical'\n && 'h-full w-2.5 border-l border-l-transparent p-[1px]',\n orientation === 'horizontal'\n && 'h-2.5 border-t border-t-transparent p-[1px]',\n props.class)\"\n >\n <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n </ScrollAreaScrollbar>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -11,15 +11,15 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectContent.vue",
|
"name": "SelectContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: string }>(), {\n position: 'popper',\n sideOffset: 4,\n avoidCollisions: true,\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...forwarded, ...$attrs }\"\n :class=\"\n cn(\n 'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-[--radix-popper-available-height]',\n position === 'popper'\n && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n props.class,\n )\n \"\n >\n <SelectViewport\n :class=\"\n cn('p-0',\n position === 'popper'\n && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\"\n >\n <slot />\n </SelectViewport>\n </SelectContent>\n </SelectPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {\n position: 'popper',\n sideOffset: 4,\n avoidCollisions: true,\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n 'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n position === 'popper'\n && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n props.class,\n )\n \"\n >\n <SelectScrollUpButton />\n <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\">\n <slot />\n </SelectViewport>\n <SelectScrollDownButton />\n </SelectContent>\n </SelectPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectGroup.vue",
|
"name": "SelectGroup.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { SelectGroup, type SelectGroupProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectGroupProps & { class?: string }>()\n</script>\n\n<template>\n <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"props\">\n <slot />\n </SelectGroup>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectGroup, type SelectGroupProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n <slot />\n </SelectGroup>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectItem.vue",
|
"name": "SelectItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n SelectItem,\n SelectItemIndicator,\n type SelectItemProps,\n SelectItemText,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectItemProps & { class?: string }>()\n</script>\n\n<template>\n <SelectItem\n v-bind=\"props\"\n :class=\"\n cn(\n 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\n \"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <SelectItemIndicator>\n <CheckIcon class=\"h-4 w-4\" />\n </SelectItemIndicator>\n </span>\n\n <SelectItemText>\n <slot />\n </SelectItemText>\n </SelectItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n SelectItem,\n SelectItemIndicator,\n type SelectItemProps,\n SelectItemText,\n useForwardProps,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <SelectItem\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\n \"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <SelectItemIndicator>\n <CheckIcon class=\"h-4 w-4\" />\n </SelectItemIndicator>\n </span>\n\n <SelectItemText>\n <slot />\n </SelectItemText>\n </SelectItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectItemText.vue",
|
"name": "SelectItemText.vue",
|
||||||
|
|
@ -27,15 +27,23 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectLabel.vue",
|
"name": "SelectLabel.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { SelectLabel, type SelectLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectLabelProps & { class?: string }>()\n</script>\n\n<template>\n <SelectLabel :class=\"cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)\">\n <slot />\n </SelectLabel>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { SelectLabel, type SelectLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n <SelectLabel :class=\"cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)\">\n <slot />\n </SelectLabel>\n</template>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "SelectScrollDownButton.vue",
|
||||||
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n <slot>\n <ChevronDownIcon />\n </slot>\n </SelectScrollDownButton>\n</template>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "SelectScrollUpButton.vue",
|
||||||
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'\nimport { ChevronUpIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n <slot>\n <ChevronUpIcon />\n </slot>\n </SelectScrollUpButton>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectSeparator.vue",
|
"name": "SelectSeparator.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectSeparatorProps & { class?: string }>()\n</script>\n\n<template>\n <SelectSeparator :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectTrigger.vue",
|
"name": "SelectTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n {\n class: '',\n invalid: false,\n },\n)\n</script>\n\n<template>\n <SelectTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 whitespace-nowrap [&>span]:truncate [&>span]:min-w-0',\n props.class,\n ),\n props.invalid\n ? '!ring-destructive ring-2 placeholder:!text-destructive'\n : '',\n ]\"\n >\n <slot />\n <SelectIcon as-child>\n <ChevronDownIcon class=\"w-4 h-4 opacity-50\" />\n </SelectIcon>\n </SelectTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <SelectTrigger\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n props.class,\n )\"\n >\n <slot />\n <SelectIcon as-child>\n <CaretSortIcon class=\"w-4 h-4 opacity-50\" />\n </SelectIcon>\n </SelectTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectValue.vue",
|
"name": "SelectValue.vue",
|
||||||
|
|
@ -43,7 +51,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
"content": "export { default as Select } from './Select.vue'\nexport { default as SelectValue } from './SelectValue.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\n"
|
"content": "export { default as Select } from './Select.vue'\nexport { default as SelectValue } from './SelectValue.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'\n"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "components:ui"
|
"type": "components:ui"
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Separator.vue",
|
"name": "Separator.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SeparatorProps & { class?: string }>()\n</script>\n\n<template>\n <Separator\n :class=\"[\n cn('shrink-0 bg-secondary', props.class),\n props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n ]\"\n />\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <Separator\n v-bind=\"delegatedProps\"\n :class=\"cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)\"\n />\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Sheet.vue",
|
"name": "Sheet.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { DialogRoot } from 'radix-vue'\n</script>\n\n<template>\n <DialogRoot>\n <slot />\n </DialogRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DialogRoot v-bind=\"forwarded\">\n <slot />\n </DialogRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SheetClose.vue",
|
"name": "SheetClose.vue",
|
||||||
|
|
@ -15,23 +15,23 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SheetContent.vue",
|
"name": "SheetContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n DialogClose,\n DialogContent,\n type DialogContentEmits,\n type DialogContentProps,\n DialogOverlay,\n DialogPortal,\n useEmitAsProps,\n} from 'radix-vue'\nimport { cva } from 'class-variance-authority'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\ninterface SheetContentProps extends DialogContentProps {\n side?: 'left' | 'right' | 'top' | 'bottom'\n class?: string\n}\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n\nconst sheetVariants = cva(\n 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n {\n variants: {\n side: {\n top: 'inset-x-0 top-0 border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n bottom:\n 'inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n left: 'inset-y-0 left-0 h-full w-3/4 border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n right:\n 'inset-y-0 right-0 h-full w-3/4 border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n },\n },\n defaultVariants: {\n side: 'right',\n },\n },\n)\n</script>\n\n<template>\n <DialogPortal>\n <DialogOverlay\n class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n />\n <DialogContent\n :class=\"cn(sheetVariants({ side: props.side }), props.class)\"\n v-bind=\"{ ...props, ...emitsAsProps }\"\n >\n <slot />\n\n <DialogClose\n class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n >\n <Cross2Icon class=\"w-4 h-4 text-muted-foreground\" />\n </DialogClose>\n </DialogContent>\n </DialogPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n DialogClose,\n DialogContent,\n type DialogContentEmits,\n type DialogContentProps,\n DialogOverlay,\n DialogPortal,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { type SheetVariants, sheetVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface SheetContentProps extends DialogContentProps {\n class?: HTMLAttributes['class']\n side?: SheetVariants['side']\n}\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, side, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <DialogPortal>\n <DialogOverlay\n class=\"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n />\n <DialogContent\n :class=\"cn(sheetVariants({ side }), props.class)\"\n v-bind=\"{ ...forwarded, ...$attrs }\"\n >\n <slot />\n\n <DialogClose\n class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\"\n >\n <Cross2Icon class=\"w-4 h-4\" />\n </DialogClose>\n </DialogContent>\n </DialogPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SheetDescription.vue",
|
"name": "SheetDescription.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n <DialogDescription\n :class=\"cn('text-sm text-muted-foreground', props.class)\"\n v-bind=\"props\"\n >\n <slot />\n </DialogDescription>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <DialogDescription\n :class=\"cn('text-sm text-muted-foreground', props.class)\"\n v-bind=\"delegatedProps\"\n >\n <slot />\n </DialogDescription>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SheetFooter.vue",
|
"name": "SheetFooter.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',\n props.class,\n )\n \"\n >\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n props.class,\n )\n \"\n >\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SheetHeader.vue",
|
"name": "SheetHeader.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <div\n :class=\"\n cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\n \"\n >\n <slot />\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n <div\n :class=\"\n cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\n \"\n >\n <slot />\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SheetTitle.vue",
|
"name": "SheetTitle.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: string }>()\n</script>\n\n<template>\n <DialogTitle\n :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n v-bind=\"props\"\n >\n <slot />\n </DialogTitle>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <DialogTitle\n :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n v-bind=\"delegatedProps\"\n >\n <slot />\n </DialogTitle>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SheetTrigger.vue",
|
"name": "SheetTrigger.vue",
|
||||||
|
|
@ -39,7 +39,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
"content": "export { default as Sheet } from './Sheet.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\n"
|
"content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\n\nexport const sheetVariants = cva(\n 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n {\n variants: {\n side: {\n top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n bottom:\n 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n right:\n 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n },\n },\n defaultVariants: {\n side: 'right',\n },\n },\n)\n\nexport type SheetVariants = VariantProps<typeof sheetVariants>\n"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "components:ui"
|
"type": "components:ui"
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Skeleton.vue",
|
"name": "Skeleton.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n class?: string\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n <div :class=\"cn('animate-pulse rounded-md bg-secondary', props.class)\" />\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n <div :class=\"cn('animate-pulse rounded-md bg-primary/10', props.class)\" />\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Slider.vue",
|
"name": "Slider.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'radix-vue'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SliderRootProps>()\nconst emits = defineEmits<SliderRootEmits>()\n</script>\n\n<template>\n <SliderRoot\n :class=\"cn(\n 'relative flex w-full touch-none select-none items-center',\n $attrs.class ?? '',\n )\"\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n >\n <SliderTrack class=\"relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20\">\n <SliderRange class=\"absolute h-full bg-primary\" />\n </SliderTrack>\n <SliderThumb class=\"block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\" />\n </SliderRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { SliderRootEmits, SliderRootProps } from 'radix-vue'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SliderRoot\n :class=\"cn(\n 'relative flex w-full touch-none select-none items-center',\n props.class,\n )\"\n v-bind=\"forwarded\"\n >\n <SliderTrack class=\"relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20\">\n <SliderRange class=\"absolute h-full bg-primary\" />\n </SliderTrack>\n <SliderThumb class=\"block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\" />\n </SliderRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Switch.vue",
|
"name": "Switch.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n SwitchRoot,\n type SwitchRootEmits,\n type SwitchRootProps,\n SwitchThumb,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SwitchRootProps & { class?: string }>()\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <SwitchRoot\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n props.class,\n )\n \"\n >\n <SwitchThumb\n :class=\"\n cn(\n 'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',\n )\n \"\n />\n </SwitchRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n SwitchRoot,\n type SwitchRootEmits,\n type SwitchRootProps,\n SwitchThumb,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SwitchRoot\n v-bind=\"forwarded\"\n :class=\"cn(\n 'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n props.class,\n )\"\n >\n <SwitchThumb\n :class=\"cn('pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0')\"\n />\n </SwitchRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,39 +7,39 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Table.vue",
|
"name": "Table.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <div class=\"w-full overflow-auto\">\n <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n <slot />\n </table>\n </div>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <div class=\"relative w-full overflow-auto\">\n <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n <slot />\n </table>\n </div>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TableBody.vue",
|
"name": "TableBody.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n <slot />\n </tbody>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n <slot />\n </tbody>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TableCaption.vue",
|
"name": "TableCaption.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n <slot />\n </caption>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n <slot />\n </caption>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TableCell.vue",
|
"name": "TableCell.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <td\n :class=\"\n cn(\n 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n props.class,\n )\n \"\n >\n <slot />\n </td>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <td\n :class=\"\n cn(\n 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n props.class,\n )\n \"\n >\n <slot />\n </td>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TableEmpty.vue",
|
"name": "TableEmpty.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport TableRow from './TableRow.vue'\nimport TableCell from './TableCell.vue'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n class?: string\n colspan?: number\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n class: '',\n colspan: 1,\n})\n</script>\n\n<template>\n <TableRow>\n <TableCell\n :class=\"\n cn(\n 'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n props.class,\n )\n \"\n :colspan=\"props.colspan\"\n >\n <div class=\"flex items-center justify-center py-10\">\n <slot />\n </div>\n </TableCell>\n </TableRow>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport TableRow from './TableRow.vue'\nimport TableCell from './TableCell.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<{\n class?: HTMLAttributes['class']\n colspan?: number\n}>(), {\n colspan: 1,\n})\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <TableRow>\n <TableCell\n :class=\"\n cn(\n 'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n props.class,\n )\n \"\n v-bind=\"delegatedProps\"\n >\n <div class=\"flex items-center justify-center py-10\">\n <slot />\n </div>\n </TableCell>\n </TableRow>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TableFooter.vue",
|
"name": "TableFooter.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <tfoot :class=\"cn('bg-primary font-medium text-primary-foreground', props.class)\">\n <slot />\n </tfoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <tfoot :class=\"cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)\">\n <slot />\n </tfoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TableHead.vue",
|
"name": "TableHead.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <th :class=\"cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)\">\n <slot />\n </th>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <th :class=\"cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)\">\n <slot />\n </th>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TableHeader.vue",
|
"name": "TableHeader.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n <slot />\n </thead>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n <slot />\n </thead>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TableRow.vue",
|
"name": "TableRow.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n <slot />\n </tr>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n <slot />\n </tr>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -11,15 +11,15 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TabsContent.vue",
|
"name": "TabsContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { TabsContent, type TabsContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsContentProps & { class?: string }>()\n</script>\n\n<template>\n <TabsContent\n :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n v-bind=\"props\"\n >\n <slot />\n </TabsContent>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsContent, type TabsContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <TabsContent\n :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n v-bind=\"delegatedProps\"\n >\n <slot />\n </TabsContent>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TabsList.vue",
|
"name": "TabsList.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { TabsList, type TabsListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsListProps & { class?: string }>()\n</script>\n\n<template>\n <TabsList\n v-bind=\"props\"\n :class=\"\n cn(\n 'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',\n props.class,\n )\n \"\n >\n <slot />\n </TabsList>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsList, type TabsListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <TabsList\n v-bind=\"delegatedProps\"\n :class=\"cn(\n 'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',\n props.class,\n )\"\n >\n <slot />\n </TabsList>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TabsTrigger.vue",
|
"name": "TabsTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { TabsTrigger, type TabsTriggerProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsTriggerProps & { class?: string }>()\n</script>\n\n<template>\n <TabsTrigger\n v-bind=\"props\"\n :class=\"\n cn(\n 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all 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=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',\n props.class,\n )\n \"\n >\n <slot />\n </TabsTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <TabsTrigger\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all 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=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',\n props.class,\n )\"\n >\n <slot />\n </TabsTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Textarea.vue",
|
"name": "Textarea.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n defaultValue?: string | number\n modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')\" />\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n defaultValue?: string | number\n modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,19 +7,19 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Toast.vue",
|
"name": "Toast.vue",
|
||||||
"content": "<script lang=\"ts\">\nimport type { ToastRootEmits, ToastRootProps } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\n\ninterface ToastVariantProps extends VariantProps<typeof toastVariants> {}\n\nexport interface ToastProps extends ToastRootProps {\n class?: string\n variant?: ToastVariantProps['variant']\n 'onOpenChange'?: ((value: boolean) => void) | undefined\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { ToastRoot, useEmitAsProps } from 'radix-vue'\n\nimport { toastVariants } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastProps>()\nconst emits = defineEmits<ToastRootEmits>()\n</script>\n\n<template>\n <ToastRoot\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n :class=\"cn(toastVariants({ variant: props.variant }), props.class)\"\n @update:open=\"onOpenChange\"\n >\n <slot />\n </ToastRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'radix-vue'\nimport { type ToastProps, toastVariants } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ToastRoot\n v-bind=\"forwarded\"\n :class=\"cn(toastVariants({ variant }), props.class)\"\n @update:open=\"onOpenChange\"\n >\n <slot />\n </ToastRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ToastAction.vue",
|
"name": "ToastAction.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ToastAction, type ToastActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastActionProps & { class?: string }>()\n</script>\n\n<template>\n <ToastAction v-bind=\"props\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)\">\n <slot />\n </ToastAction>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastAction, type ToastActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)\">\n <slot />\n </ToastAction>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ToastClose.vue",
|
"name": "ToastClose.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ToastClose } from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: string\n}>()\n</script>\n\n<template>\n <ToastClose v-bind=\"props\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n <Cross2Icon class=\"h-4 w-4\" />\n </ToastClose>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastClose, type ToastCloseProps } from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastCloseProps & {\n class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n <Cross2Icon class=\"h-4 w-4\" />\n </ToastClose>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ToastDescription.vue",
|
"name": "ToastDescription.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ToastDescription, type ToastDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"props\">\n <slot />\n </ToastDescription>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastDescription, type ToastDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n <slot />\n </ToastDescription>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ToastProvider.vue",
|
"name": "ToastProvider.vue",
|
||||||
|
|
@ -27,11 +27,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ToastTitle.vue",
|
"name": "ToastTitle.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ToastTitle, type ToastTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastTitleProps & { class?: string }>()\n</script>\n\n<template>\n <ToastTitle v-bind=\"props\" :class=\"cn('text-sm font-semibold [&+div]:text-xs', props.class)\">\n <slot />\n </ToastTitle>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastTitle, type ToastTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold [&+div]:text-xs', props.class)\">\n <slot />\n </ToastTitle>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ToastViewport.vue",
|
"name": "ToastViewport.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ToastViewport, type ToastViewportProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastViewportProps & { class?: string }>()\n</script>\n\n<template>\n <ToastViewport v-bind=\"props\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastViewport, type ToastViewportProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Toaster.vue",
|
"name": "Toaster.vue",
|
||||||
|
|
@ -39,11 +39,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
"content": "export { default as Toaster } from './Toaster.vue'\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n 'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n {\n variants: {\n variant: {\n default: 'border bg-background text-foreground',\n destructive:\n 'destructive group border-destructive bg-destructive text-destructive-foreground',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n"
|
"content": "import type { ToastRootProps } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toaster } from './Toaster.vue'\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n 'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n {\n variants: {\n variant: {\n default: 'border bg-background text-foreground',\n destructive:\n 'destructive group border-destructive bg-destructive text-destructive-foreground',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n class?: HTMLAttributes['class']\n variant?: ToastVariants['variant']\n 'onOpenChange'?: ((value: boolean) => void) | undefined\n}\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "use-toast.ts",
|
"name": "use-toast.ts",
|
||||||
"content": "import { computed, ref } from 'vue'\nimport type { Component, VNode } from 'vue'\nimport type { ToastProps } from './Toast.vue'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\nexport type StringOrVNode =\n | string\n | VNode\n | (() => VNode)\n\ntype ToasterToast = ToastProps & {\n id: string\n title?: string\n description?: StringOrVNode\n action?: Component\n}\n\nconst actionTypes = {\n ADD_TOAST: 'ADD_TOAST',\n UPDATE_TOAST: 'UPDATE_TOAST',\n DISMISS_TOAST: 'DISMISS_TOAST',\n REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n count = (count + 1) % Number.MAX_VALUE\n return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n | {\n type: ActionType['ADD_TOAST']\n toast: ToasterToast\n }\n | {\n type: ActionType['UPDATE_TOAST']\n toast: Partial<ToasterToast>\n }\n | {\n type: ActionType['DISMISS_TOAST']\n toastId?: ToasterToast['id']\n }\n | {\n type: ActionType['REMOVE_TOAST']\n toastId?: ToasterToast['id']\n }\n\ninterface State {\n toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n if (toastTimeouts.has(toastId))\n return\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId)\n dispatch({\n type: actionTypes.REMOVE_TOAST,\n toastId,\n })\n }, TOAST_REMOVE_DELAY)\n\n toastTimeouts.set(toastId, timeout)\n}\n\nconst state = ref<State>({\n toasts: [],\n})\n\nfunction dispatch(action: Action) {\n switch (action.type) {\n case actionTypes.ADD_TOAST:\n state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)\n break\n\n case actionTypes.UPDATE_TOAST:\n state.value.toasts = state.value.toasts.map(t =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t,\n )\n break\n\n case actionTypes.DISMISS_TOAST: {\n const { toastId } = action\n\n if (toastId) {\n addToRemoveQueue(toastId)\n }\n else {\n state.value.toasts.forEach((toast) => {\n addToRemoveQueue(toast.id)\n })\n }\n\n state.value.toasts = state.value.toasts.map(t =>\n t.id === toastId || toastId === undefined\n ? {\n ...t,\n open: false,\n }\n : t,\n )\n break\n }\n\n case actionTypes.REMOVE_TOAST:\n if (action.toastId === undefined)\n state.value.toasts = []\n else\n state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)\n\n break\n }\n}\n\nfunction useToast() {\n return {\n toasts: computed(() => state.value.toasts),\n toast,\n dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),\n }\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast(props: Toast) {\n const id = genId()\n\n const update = (props: ToasterToast) =>\n dispatch({\n type: actionTypes.UPDATE_TOAST,\n toast: { ...props, id },\n })\n\n const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })\n\n dispatch({\n type: actionTypes.ADD_TOAST,\n toast: {\n ...props,\n id,\n open: true,\n onOpenChange: (open: boolean) => {\n if (!open)\n dismiss()\n },\n },\n })\n\n return {\n id,\n dismiss,\n update,\n }\n}\n\nexport { toast, useToast }\n"
|
"content": "import { computed, ref } from 'vue'\nimport type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\nexport type StringOrVNode =\n | string\n | VNode\n | (() => VNode)\n\ntype ToasterToast = ToastProps & {\n id: string\n title?: string\n description?: StringOrVNode\n action?: Component\n}\n\nconst actionTypes = {\n ADD_TOAST: 'ADD_TOAST',\n UPDATE_TOAST: 'UPDATE_TOAST',\n DISMISS_TOAST: 'DISMISS_TOAST',\n REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n count = (count + 1) % Number.MAX_VALUE\n return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n | {\n type: ActionType['ADD_TOAST']\n toast: ToasterToast\n }\n | {\n type: ActionType['UPDATE_TOAST']\n toast: Partial<ToasterToast>\n }\n | {\n type: ActionType['DISMISS_TOAST']\n toastId?: ToasterToast['id']\n }\n | {\n type: ActionType['REMOVE_TOAST']\n toastId?: ToasterToast['id']\n }\n\ninterface State {\n toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n if (toastTimeouts.has(toastId))\n return\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId)\n dispatch({\n type: actionTypes.REMOVE_TOAST,\n toastId,\n })\n }, TOAST_REMOVE_DELAY)\n\n toastTimeouts.set(toastId, timeout)\n}\n\nconst state = ref<State>({\n toasts: [],\n})\n\nfunction dispatch(action: Action) {\n switch (action.type) {\n case actionTypes.ADD_TOAST:\n state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)\n break\n\n case actionTypes.UPDATE_TOAST:\n state.value.toasts = state.value.toasts.map(t =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t,\n )\n break\n\n case actionTypes.DISMISS_TOAST: {\n const { toastId } = action\n\n if (toastId) {\n addToRemoveQueue(toastId)\n }\n else {\n state.value.toasts.forEach((toast) => {\n addToRemoveQueue(toast.id)\n })\n }\n\n state.value.toasts = state.value.toasts.map(t =>\n t.id === toastId || toastId === undefined\n ? {\n ...t,\n open: false,\n }\n : t,\n )\n break\n }\n\n case actionTypes.REMOVE_TOAST:\n if (action.toastId === undefined)\n state.value.toasts = []\n else\n state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)\n\n break\n }\n}\n\nfunction useToast() {\n return {\n toasts: computed(() => state.value.toasts),\n toast,\n dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),\n }\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast(props: Toast) {\n const id = genId()\n\n const update = (props: ToasterToast) =>\n dispatch({\n type: actionTypes.UPDATE_TOAST,\n toast: { ...props, id },\n })\n\n const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })\n\n dispatch({\n type: actionTypes.ADD_TOAST,\n toast: {\n ...props,\n id,\n open: true,\n onOpenChange: (open: boolean) => {\n if (!open)\n dismiss()\n },\n },\n })\n\n return {\n id,\n dismiss,\n update,\n }\n}\n\nexport { toast, useToast }\n"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "components:ui"
|
"type": "components:ui"
|
||||||
|
|
|
||||||
|
|
@ -8,11 +8,11 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "ToggleGroup.vue",
|
"name": "ToggleGroup.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, provide } from 'vue'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport type { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n class?: HTMLAttributes['class']\n variant?: ToggleGroupVariants['variant']\n size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n variant: props.variant,\n size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps.value, emits)\n</script>\n\n<template>\n <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n <slot />\n </ToggleGroupRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, provide } from 'vue'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport type { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n class?: HTMLAttributes['class']\n variant?: ToggleGroupVariants['variant']\n size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n variant: props.variant,\n size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n <slot />\n </ToggleGroupRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ToggleGroupItem.vue",
|
"name": "ToggleGroupItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, inject } from 'vue'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'\nimport { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n class?: HTMLAttributes['class']\n variant?: ToggleGroupVariants['variant']\n size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n const { class: _, variant, size, ...delegated } = props\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps.value)\n</script>\n\n<template>\n <ToggleGroupItem\n v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n variant: context?.variant || variant,\n size: context?.size || size,\n }), props.class)\"\n >\n <slot />\n </ToggleGroupItem>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, inject } from 'vue'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'\nimport { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n class?: HTMLAttributes['class']\n variant?: ToggleGroupVariants['variant']\n size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n const { class: _, variant, size, ...delegated } = props\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <ToggleGroupItem\n v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n variant: context?.variant || variant,\n size: context?.size || size,\n }), props.class)\"\n >\n <slot />\n </ToggleGroupItem>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,11 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Toggle.vue",
|
"name": "Toggle.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useForwardPropsEmits } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed, useAttrs } 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 disabled?: boolean\n}\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n disabled: false,\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { variant, size, disabled, ...otherProps } = props\n return otherProps\n})\n\nconst { class: className, ...rest } = useAttrs()\nconst forwarded = useForwardPropsEmits(toggleProps.value, emits)\n</script>\n\n<template>\n <Toggle\n v-bind=\"{\n ...forwarded,\n ...rest,\n }\"\n :class=\"cn(toggleVariants({ variant, size }), className ?? '')\"\n :disabled=\"props.disabled\"\n >\n <slot />\n </Toggle>\n</template>\n"
|
"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",
|
"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 transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring 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 shadow-sm hover:bg-accent hover:text-accent-foreground',\n },\n size: {\n default: 'h-9 px-3',\n sm: 'h-8 px-2',\n lg: 'h-10 px-3',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n)\n"
|
"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 transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring 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 shadow-sm hover:bg-accent hover:text-accent-foreground',\n },\n size: {\n default: 'h-9 px-3',\n sm: 'h-8 px-2',\n lg: 'h-10 px-3',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "components:ui"
|
"type": "components:ui"
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TooltipContent.vue",
|
"name": "TooltipContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<TooltipContentProps>(), {\n sideOffset: 4,\n})\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <TooltipPortal>\n <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')\">\n <slot />\n </TooltipContent>\n </TooltipPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <TooltipPortal>\n <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n <slot />\n </TooltipContent>\n </TooltipPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TooltipProvider.vue",
|
"name": "TooltipProvider.vue",
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TooltipTrigger.vue",
|
"name": "TooltipTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n <TooltipTrigger v-bind=\"props\" class=\"\">\n <slot />\n </TooltipTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n <TooltipTrigger v-bind=\"props\">\n <slot />\n </TooltipTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user