chore: update registry
This commit is contained in:
zernonia
parent
3e61384d95
commit
2507fbe418
|
|
@ -86,6 +86,20 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/default/example/CollapsibleDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/CollapsibleDemo.vue'],
|
||||
},
|
||||
ComboboxDemo: {
|
||||
name: 'ComboboxDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['utils', 'button', 'command', 'popover'],
|
||||
component: () => import('../src/lib/registry/default/example/ComboboxDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/ComboboxDemo.vue'],
|
||||
},
|
||||
CommandDemo: {
|
||||
name: 'CommandDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['command'],
|
||||
component: () => import('../src/lib/registry/default/example/CommandDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/CommandDemo.vue'],
|
||||
},
|
||||
ContextMenuDemo: {
|
||||
name: 'ContextMenuDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -466,6 +480,20 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/CollapsibleDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/CollapsibleDemo.vue'],
|
||||
},
|
||||
ComboboxDemo: {
|
||||
name: 'ComboboxDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['utils', 'button', 'command', 'popover'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ComboboxDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ComboboxDemo.vue'],
|
||||
},
|
||||
CommandDemo: {
|
||||
name: 'CommandDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['command'],
|
||||
component: () => import('../src/lib/registry/new-york/example/CommandDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/CommandDemo.vue'],
|
||||
},
|
||||
ContextMenuDemo: {
|
||||
name: 'ContextMenuDemo',
|
||||
type: 'components:example',
|
||||
|
|
|
|||
|
|
@ -166,6 +166,29 @@
|
|||
],
|
||||
"type": "components:ui"
|
||||
},
|
||||
{
|
||||
"name": "command",
|
||||
"dependencies": [
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils",
|
||||
"dialog"
|
||||
],
|
||||
"files": [
|
||||
"ui/command/Command.vue",
|
||||
"ui/command/CommandDialog.vue",
|
||||
"ui/command/CommandEmpty.vue",
|
||||
"ui/command/CommandGroup.vue",
|
||||
"ui/command/CommandInput.vue",
|
||||
"ui/command/CommandItem.vue",
|
||||
"ui/command/CommandList.vue",
|
||||
"ui/command/CommandSeparator.vue",
|
||||
"ui/command/CommandShortcut.vue",
|
||||
"ui/command/index.ts"
|
||||
],
|
||||
"type": "components:ui"
|
||||
},
|
||||
{
|
||||
"name": "context-menu",
|
||||
"dependencies": [
|
||||
|
|
|
|||
|
|
@ -1,15 +1,52 @@
|
|||
{
|
||||
"name": "command",
|
||||
"dependencies": [
|
||||
"cmdk"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils",
|
||||
"dialog"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "command.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DialogProps } from \"@radix-ui/react-dialog\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { Search } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Dialog, DialogContent } from \"@/registry/default/ui/dialog\"\n\nconst Command = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ class, ...props }, ref) => (\n <CommandPrimitive\n ref={ref}\n class={cn(\n \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n class\n )}\n {...props}\n />\n))\nCommand.displayName = CommandPrimitive.displayName\n\ninterface CommandDialogProps extends DialogProps {}\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n return (\n <Dialog {...props}>\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 {children}\n </Command>\n </DialogContent>\n </Dialog>\n )\n}\n\nconst CommandInput = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Input>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ class, ...props }, ref) => (\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 <CommandPrimitive.Input\n ref={ref}\n class={cn(\n \"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\",\n class\n )}\n {...props}\n />\n </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ class, ...props }, ref) => (\n <CommandPrimitive.List\n ref={ref}\n class={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", class)}\n {...props}\n />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Empty>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n <CommandPrimitive.Empty\n ref={ref}\n class=\"py-6 text-center text-sm\"\n {...props}\n />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Group>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ class, ...props }, ref) => (\n <CommandPrimitive.Group\n ref={ref}\n class={cn(\n \"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\",\n class\n )}\n {...props}\n />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ class, ...props }, ref) => (\n <CommandPrimitive.Separator\n ref={ref}\n class={cn(\"-mx-1 h-px bg-border\", class)}\n {...props}\n />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ class, ...props }, ref) => (\n <CommandPrimitive.Item\n ref={ref}\n class={cn(\n \"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\",\n class\n )}\n {...props}\n />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({\n class,\n ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n return (\n <span\n class={cn(\n \"ml-auto text-xs tracking-widest text-muted-foreground\",\n class\n )}\n {...props}\n />\n )\n}\nCommandShortcut.displayName = \"CommandShortcut\"\n\nexport {\n Command,\n CommandDialog,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n CommandShortcut,\n CommandSeparator,\n}\n"
|
||||
"name": "Command.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot } from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<ComboboxRootProps>()\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <ComboboxRoot\n v-bind=\"{ ...props, ...emitsAsProps }\"\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"
|
||||
},
|
||||
{
|
||||
"name": "CommandDialog.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'radix-vue'\nimport Command from './Command.vue'\nimport { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'\nimport { useEmitAsProps } from '@/lib/utils'\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"
|
||||
},
|
||||
{
|
||||
"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"
|
||||
},
|
||||
{
|
||||
"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"
|
||||
},
|
||||
{
|
||||
"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"
|
||||
},
|
||||
{
|
||||
"name": "CommandItem.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { ComboboxItem } from 'radix-vue'\nimport { cn, useEmitAsProps } 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 >\n <slot />\n </ComboboxItem>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CommandList.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'\nimport { ComboboxContent } from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<ComboboxContentProps>()\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <ComboboxContent v-bind=\"{ ...props, ...emitsAsProps }\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', $attrs.class ?? '')\">\n <slot />\n </ComboboxContent>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"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"
|
||||
},
|
||||
{
|
||||
"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"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Popover.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { PopoverRoot, type PopoverRootProps } from 'radix-vue'\n\nconst props = defineProps<PopoverRootProps>()\n</script>\n\n<template>\n <PopoverRoot v-bind=\"props\">\n <slot />\n </PopoverRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { PopoverRoot } from 'radix-vue'\nimport type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <PopoverRoot v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </PopoverRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "PopoverContent.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "RadioGroup.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\n</script>\n\n<template>\n <RadioGroupRoot :class=\"cn('grid gap-2', props.class)\" v-bind=\"props\">\n <slot />\n </RadioGroupRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps } from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\n\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <RadioGroupRoot :class=\"cn('grid gap-2', props.class)\" v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </RadioGroupRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "RadioGroupItem.vue",
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Popover.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { PopoverRoot, type PopoverRootProps } from 'radix-vue'\n\nconst props = defineProps<PopoverRootProps>()\n</script>\n\n<template>\n <PopoverRoot v-bind=\"props\">\n <slot />\n </PopoverRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { PopoverRoot } from 'radix-vue'\nimport type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <PopoverRoot v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </PopoverRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "PopoverContent.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "RadioGroup.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\n</script>\n\n<template>\n <RadioGroupRoot :class=\"cn('grid gap-2', props.class)\" v-bind=\"props\">\n <slot />\n </RadioGroupRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps } from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\n\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <RadioGroupRoot :class=\"cn('grid gap-2', props.class)\" v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </RadioGroupRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "RadioGroupItem.vue",
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
},
|
||||
{
|
||||
"name": "SelectContent.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n} from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: string }>(), {\n position: 'popper',\n sideOffset: 4,\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...props, ...emitsAsProps, ...$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',\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 {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n} from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: string }>(), {\n position: 'popper',\n sideOffset: 4,\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...props, ...emitsAsProps, ...$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',\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"
|
||||
},
|
||||
{
|
||||
"name": "SelectGroup.vue",
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
},
|
||||
{
|
||||
"name": "SelectTrigger.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport RadixIconsChevronDown from '~icons/radix-icons/chevron-down'\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',\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 <RadixIconsChevronDown class=\"w-4 h-4 opacity-50\" />\n </SelectIcon>\n </SelectTrigger>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport RadixIconsChevronDown from '~icons/radix-icons/chevron-down'\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-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',\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 <RadixIconsChevronDown class=\"w-4 h-4 opacity-50\" />\n </SelectIcon>\n </SelectTrigger>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "SelectValue.vue",
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user