chore: build registry
This commit is contained in:
zernonia
parent
73c561d698
commit
27dc777d19
|
|
@ -576,7 +576,27 @@ export const Index = {
|
||||||
component: () => import('../src/lib/registry/default/example/TypographyTable.vue').then(m => m.default),
|
component: () => import('../src/lib/registry/default/example/TypographyTable.vue').then(m => m.default),
|
||||||
files: ['../src/lib/registry/default/example/TypographyTable.vue'],
|
files: ['../src/lib/registry/default/example/TypographyTable.vue'],
|
||||||
},
|
},
|
||||||
|
ActivityGoal: {
|
||||||
|
name: 'ActivityGoal',
|
||||||
|
type: 'components:example',
|
||||||
|
registryDependencies: ['button', 'card', 'themes', 'config'],
|
||||||
|
component: () => import('../src/lib/registry/default/example/ActivityGoal.vue').then(m => m.default),
|
||||||
|
files: ['../src/lib/registry/default/example/ActivityGoal.vue'],
|
||||||
|
},
|
||||||
|
DataTable: {
|
||||||
|
name: 'DataTable',
|
||||||
|
type: 'components:example',
|
||||||
|
registryDependencies: ['button', 'checkbox', 'dropdown-menu', 'input', 'table', 'card', 'utils'],
|
||||||
|
component: () => import('../src/lib/registry/default/example/DataTable.vue').then(m => m.default),
|
||||||
|
files: ['../src/lib/registry/default/example/DataTable.vue'],
|
||||||
|
},
|
||||||
|
Metric: {
|
||||||
|
name: 'Metric',
|
||||||
|
type: 'components:example',
|
||||||
|
registryDependencies: ['card', 'config'],
|
||||||
|
component: () => import('../src/lib/registry/default/example/Metric.vue').then(m => m.default),
|
||||||
|
files: ['../src/lib/registry/default/example/Metric.vue'],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
'new-york': {
|
'new-york': {
|
||||||
AccordionDemo: {
|
AccordionDemo: {
|
||||||
|
|
@ -1153,5 +1173,26 @@ export const Index = {
|
||||||
component: () => import('../src/lib/registry/new-york/example/TypographyTable.vue').then(m => m.default),
|
component: () => import('../src/lib/registry/new-york/example/TypographyTable.vue').then(m => m.default),
|
||||||
files: ['../src/lib/registry/new-york/example/TypographyTable.vue'],
|
files: ['../src/lib/registry/new-york/example/TypographyTable.vue'],
|
||||||
},
|
},
|
||||||
|
ActivityGoal: {
|
||||||
|
name: 'ActivityGoal',
|
||||||
|
type: 'components:example',
|
||||||
|
registryDependencies: ['button', 'card', 'themes', 'config'],
|
||||||
|
component: () => import('../src/lib/registry/new-york/example/ActivityGoal.vue').then(m => m.default),
|
||||||
|
files: ['../src/lib/registry/new-york/example/ActivityGoal.vue'],
|
||||||
|
},
|
||||||
|
DataTable: {
|
||||||
|
name: 'DataTable',
|
||||||
|
type: 'components:example',
|
||||||
|
registryDependencies: ['button', 'checkbox', 'dropdown-menu', 'input', 'table', 'card', 'utils'],
|
||||||
|
component: () => import('../src/lib/registry/new-york/example/DataTable.vue').then(m => m.default),
|
||||||
|
files: ['../src/lib/registry/new-york/example/DataTable.vue'],
|
||||||
|
},
|
||||||
|
Metric: {
|
||||||
|
name: 'Metric',
|
||||||
|
type: 'components:example',
|
||||||
|
registryDependencies: ['card', 'config'],
|
||||||
|
component: () => import('../src/lib/registry/new-york/example/Metric.vue').then(m => m.default),
|
||||||
|
files: ['../src/lib/registry/new-york/example/Metric.vue'],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Check, Plus, Send } from 'lucide-vue-next'
|
import { CheckIcon, PaperPlaneIcon, PlusIcon } from '@radix-icons/vue'
|
||||||
import { computed, ref } from 'vue'
|
import { computed, ref } from 'vue'
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
|
|
@ -89,7 +89,7 @@ const selectedUsers = ref<User[]>([])
|
||||||
class="rounded-full p-2.5 flex items-center justify-center"
|
class="rounded-full p-2.5 flex items-center justify-center"
|
||||||
@click="open = true"
|
@click="open = true"
|
||||||
>
|
>
|
||||||
<Plus class="w-4 h-4" />
|
<PlusIcon class="w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent :side-offset="10">
|
<TooltipContent :side-offset="10">
|
||||||
|
|
@ -125,7 +125,7 @@ const selectedUsers = ref<User[]>([])
|
||||||
>
|
>
|
||||||
<Input v-model="input" placeholder="Type a message..." class="flex-1" />
|
<Input v-model="input" placeholder="Type a message..." class="flex-1" />
|
||||||
<Button class="p-2.5 flex items-center justify-center" :disabled="inputLength === 0">
|
<Button class="p-2.5 flex items-center justify-center" :disabled="inputLength === 0">
|
||||||
<Send class="w-4 h-4" />
|
<PaperPlaneIcon class="w-4 h-4" />
|
||||||
<span class="sr-only">Send</span>
|
<span class="sr-only">Send</span>
|
||||||
</Button>
|
</Button>
|
||||||
</form>
|
</form>
|
||||||
|
|
@ -176,7 +176,7 @@ const selectedUsers = ref<User[]>([])
|
||||||
{{ user.email }}
|
{{ user.email }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<Check v-if="selectedUsers.includes(user)" class="ml-auto flex h-5 w-5 text-primary" />
|
<CheckIcon v-if="selectedUsers.includes(user)" class="ml-auto flex h-5 w-5 text-primary" />
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
</CommandGroup>
|
</CommandGroup>
|
||||||
</CommandList>
|
</CommandList>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {
|
import {
|
||||||
Calculator,
|
CalendarIcon,
|
||||||
Calendar,
|
EnvelopeClosedIcon,
|
||||||
CreditCard,
|
FaceIcon,
|
||||||
Settings,
|
GearIcon,
|
||||||
Smile,
|
PersonIcon,
|
||||||
User,
|
RocketIcon,
|
||||||
} from 'lucide-vue-next'
|
} from '@radix-icons/vue'
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Command,
|
Command,
|
||||||
|
|
@ -27,32 +27,32 @@ import {
|
||||||
<CommandEmpty>No results found.</CommandEmpty>
|
<CommandEmpty>No results found.</CommandEmpty>
|
||||||
<CommandGroup heading="Suggestions">
|
<CommandGroup heading="Suggestions">
|
||||||
<CommandItem value="Calendar">
|
<CommandItem value="Calendar">
|
||||||
<Calendar class="mr-2 h-4 w-4" />
|
<CalendarIcon class="mr-2 h-4 w-4" />
|
||||||
<span>Calendar</span>
|
<span>Calendar</span>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
<CommandItem value="Search Emoji">
|
<CommandItem value="Search Emoji">
|
||||||
<Smile class="mr-2 h-4 w-4" />
|
<FaceIcon class="mr-2 h-4 w-4" />
|
||||||
<span>Search Emoji</span>
|
<span>Search Emoji</span>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
<CommandItem value="Calculator">
|
<CommandItem value="Launch">
|
||||||
<Calculator class="mr-2 h-4 w-4" />
|
<RocketIcon class="mr-2 h-4 w-4" />
|
||||||
<span>Calculator</span>
|
<span>Launch</span>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
</CommandGroup>
|
</CommandGroup>
|
||||||
<CommandSeparator />
|
<CommandSeparator />
|
||||||
<CommandGroup heading="Settings">
|
<CommandGroup heading="Settings">
|
||||||
<CommandItem value="Profile">
|
<CommandItem value="Profile">
|
||||||
<User class="mr-2 h-4 w-4" />
|
<PersonIcon class="mr-2 h-4 w-4" />
|
||||||
<span>Profile</span>
|
<span>Profile</span>
|
||||||
<CommandShortcut>⌘P</CommandShortcut>
|
<CommandShortcut>⌘P</CommandShortcut>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
<CommandItem value="Billing">
|
<CommandItem value="Mail">
|
||||||
<CreditCard class="mr-2 h-4 w-4" />
|
<EnvelopeClosedIcon class="mr-2 h-4 w-4" />
|
||||||
<span>Billing</span>
|
<span>Mail</span>
|
||||||
<CommandShortcut>⌘B</CommandShortcut>
|
<CommandShortcut>⌘B</CommandShortcut>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
<CommandItem value="Settings">
|
<CommandItem value="Settings">
|
||||||
<Settings class="mr-2 h-4 w-4" />
|
<GearIcon class="mr-2 h-4 w-4" />
|
||||||
<span>Settings</span>
|
<span>Settings</span>
|
||||||
<CommandShortcut>⌘S</CommandShortcut>
|
<CommandShortcut>⌘S</CommandShortcut>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { addDays, format } from 'date-fns'
|
import { addDays, format } from 'date-fns'
|
||||||
import { Calendar as CalendarIcon } from 'lucide-vue-next'
|
import { CalendarIcon } from '@radix-icons/vue'
|
||||||
|
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
import { useVModel } from '@vueuse/core'
|
import { useVModel } from '@vueuse/core'
|
||||||
import type { Calendar } from 'v-calendar'
|
import type { Calendar } from 'v-calendar'
|
||||||
import { DatePicker } from 'v-calendar'
|
import { DatePicker } from 'v-calendar'
|
||||||
import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
|
import { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'
|
||||||
import { computed, nextTick, onMounted, ref } from 'vue'
|
import { computed, nextTick, onMounted, ref } from 'vue'
|
||||||
import { buttonVariants } from '../button'
|
import { buttonVariants } from '../button'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
@ -55,10 +55,10 @@ onMounted(async () => {
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<div class="absolute top-3 flex justify-between w-full px-4">
|
<div class="absolute top-3 flex justify-between w-full px-4">
|
||||||
<button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
|
<button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
|
||||||
<ChevronLeft class="w-4 h-4" />
|
<ChevronLeftIcon class="w-4 h-4" />
|
||||||
</button>
|
</button>
|
||||||
<button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
|
<button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
|
||||||
<ChevronRight class="w-4 h-4" />
|
<ChevronRightIcon class="w-4 h-4" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Search } from 'lucide-vue-next'
|
import { MagnifyingGlassIcon } from '@radix-icons/vue'
|
||||||
import { ComboboxInput, type ComboboxInputProps } from 'radix-vue'
|
import { ComboboxInput, type ComboboxInputProps } from 'radix-vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
|
@ -14,7 +14,7 @@ export default {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex items-center border-b px-3" cmdk-input-wrapper>
|
<div class="flex items-center border-b px-3" cmdk-input-wrapper>
|
||||||
<Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
|
<MagnifyingGlassIcon class="mr-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
<ComboboxInput
|
<ComboboxInput
|
||||||
v-bind="{ ...props, ...$attrs }"
|
v-bind="{ ...props, ...$attrs }"
|
||||||
auto-focus
|
auto-focus
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import {
|
||||||
ContextMenuSubTrigger,
|
ContextMenuSubTrigger,
|
||||||
type ContextMenuSubTriggerProps,
|
type ContextMenuSubTriggerProps,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import { ChevronRight } from 'lucide-vue-next'
|
import { ChevronRightIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?: boolean }>()
|
const props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?: boolean }>()
|
||||||
|
|
@ -21,6 +21,6 @@ const props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?:
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
<ChevronRight class="ml-auto h-4 w-4" />
|
<ChevronRightIcon class="ml-auto h-4 w-4" />
|
||||||
</ContextMenuSubTrigger>
|
</ContextMenuSubTrigger>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"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) }\" class=\"accordion\">\n <slot />\n </AccordionRoot>\n</template>\n"
|
"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"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AccordionContent.vue",
|
"name": "AccordionContent.vue",
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "AlertDialog.vue",
|
"name": "AlertDialog.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <AlertDialogRoot v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </AlertDialogRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <AlertDialogRoot v-bind=\"forwarded\">\n <slot />\n </AlertDialogRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertDialogAction.vue",
|
"name": "AlertDialogAction.vue",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Checkbox.vue",
|
"name": "Checkbox.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot, useEmitAsProps } 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 emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <CheckboxRoot\n v-bind=\"{ ...props, ...emitsAsProps }\"\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 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 { 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 items-center justify-center text-current\">\n <Check class=\"h-4 w-4\" />\n </CheckboxIndicator>\n </CheckboxRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CollapsibleContent.vue",
|
"name": "CollapsibleContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n <CollapsibleContent v-bind=\"props\">\n <slot />\n </CollapsibleContent>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n <slot />\n </CollapsibleContent>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CollapsibleTrigger.vue",
|
"name": "CollapsibleTrigger.vue",
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Command.vue",
|
"name": "Command.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useEmitAsProps } from 'radix-vue'\nimport { cn } 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"
|
"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"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CommandDialog.vue",
|
"name": "CommandDialog.vue",
|
||||||
|
|
@ -30,7 +30,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"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 >\n <slot />\n </ComboboxItem>\n</template>\n"
|
"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"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CommandList.vue",
|
"name": "CommandList.vue",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "ContextMenu.vue",
|
"name": "ContextMenu.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ContextMenuRoot, useEmitAsProps } from 'radix-vue'\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n</script>\n\n<template>\n <ContextMenuRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </ContextMenuRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuRoot v-bind=\"forwarded\">\n <slot />\n </ContextMenuRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuCheckboxItem.vue",
|
"name": "ContextMenuCheckboxItem.vue",
|
||||||
|
|
@ -37,11 +37,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuRadioGroup.vue",
|
"name": "ContextMenuRadioGroup.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuRadioGroup,\n type ContextMenuRadioGroupEmits,\n type ContextMenuRadioGroupProps,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\n\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n</script>\n\n<template>\n <ContextMenuRadioGroup\n v-bind=\"props\"\n @update:model-value=\"emits('update:modelValue', $event)\"\n >\n <slot />\n </ContextMenuRadioGroup>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuRadioGroup,\n type ContextMenuRadioGroupEmits,\n type ContextMenuRadioGroupProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuRadioGroup v-bind=\"forwarded\">\n <slot />\n </ContextMenuRadioGroup>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuRadioItem.vue",
|
"name": "ContextMenuRadioItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuItemIndicator,\n ContextMenuRadioItem,\n type ContextMenuRadioItemEmits,\n type ContextMenuRadioItemProps,\n useEmitAsProps,\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</script>\n\n<template>\n <ContextMenuRadioItem\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 <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 {\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"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuSeparator.vue",
|
"name": "ContextMenuSeparator.vue",
|
||||||
|
|
@ -53,7 +53,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuSub.vue",
|
"name": "ContextMenuSub.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSub,\n type ContextMenuSubEmits,\n type ContextMenuSubProps,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuSubProps>()\n\nconst emits = defineEmits<ContextMenuSubEmits>()\n</script>\n\n<template>\n <ContextMenuSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n <slot />\n </ContextMenuSub>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSub,\n type ContextMenuSubEmits,\n type ContextMenuSubProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuSub v-bind=\"forwarded\">\n <slot />\n </ContextMenuSub>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuSubContent.vue",
|
"name": "ContextMenuSubContent.vue",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "DropdownMenu.vue",
|
"name": "DropdownMenu.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n</script>\n\n<template>\n <DropdownMenuRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </DropdownMenuRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DropdownMenuRoot v-bind=\"forwarded\">\n <slot />\n </DropdownMenuRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuCheckboxItem.vue",
|
"name": "DropdownMenuCheckboxItem.vue",
|
||||||
|
|
@ -49,7 +49,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuSub.vue",
|
"name": "DropdownMenuSub.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSub,\n type DropdownMenuSubEmits,\n type DropdownMenuSubProps,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSubProps>()\n\nconst emits = defineEmits<DropdownMenuSubEmits>()\n</script>\n\n<template>\n <DropdownMenuSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n <slot />\n </DropdownMenuSub>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSub,\n type DropdownMenuSubEmits,\n type DropdownMenuSubProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DropdownMenuSub v-bind=\"forwarded\">\n <slot />\n </DropdownMenuSub>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuSubContent.vue",
|
"name": "DropdownMenuSubContent.vue",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "HoverCard.vue",
|
"name": "HoverCard.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\n</script>\n\n<template>\n <HoverCardRoot v-bind=\"props\">\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>()\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n <HoverCardRoot v-bind=\"forwarded\">\n <slot />\n </HoverCardRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "HoverCardContent.vue",
|
"name": "HoverCardContent.vue",
|
||||||
|
|
|
||||||
|
|
@ -53,7 +53,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarSub.vue",
|
"name": "MenubarSub.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n MenubarSub,\n type MenubarSubEmits,\n} from 'radix-vue'\n\ninterface MenubarSubRootProps {\n defaultOpen?: boolean\n open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\n\nconst emits = defineEmits<MenubarSubEmits>()\n</script>\n\n<template>\n <MenubarSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n <slot />\n </MenubarSub>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'radix-vue'\n\ninterface MenubarSubRootProps {\n defaultOpen?: boolean\n open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <MenubarSub v-bind=\"forwarded\">\n <slot />\n </MenubarSub>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarSubContent.vue",
|
"name": "MenubarSubContent.vue",
|
||||||
|
|
@ -61,7 +61,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarSubTrigger.vue",
|
"name": "MenubarSubTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-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 </MenubarSubTrigger>\n</template>\n"
|
"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"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarTrigger.vue",
|
"name": "MenubarTrigger.vue",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Popover.vue",
|
"name": "Popover.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { PopoverRoot, useEmitAsProps } from 'radix-vue'\nimport type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'\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"
|
"content": "<script setup lang=\"ts\">\nimport { PopoverRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <PopoverRoot v-bind=\"forwarded\">\n <slot />\n </PopoverRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "PopoverContent.vue",
|
"name": "PopoverContent.vue",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "RadioGroup.vue",
|
"name": "RadioGroup.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useEmitAsProps } from 'radix-vue'\nimport { cn } 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"
|
"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"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "RadioGroupItem.vue",
|
"name": "RadioGroupItem.vue",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Select.vue",
|
"name": "Select.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'radix-vue'\nimport { SelectRoot, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n</script>\n\n<template>\n <SelectRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </SelectRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'radix-vue'\nimport { SelectRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <SelectRoot v-bind=\"forwarded\">\n <slot />\n </SelectRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectContent.vue",
|
"name": "SelectContent.vue",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,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} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SwitchRootProps & { class?: string }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n</script>\n\n<template>\n <SwitchRoot\n v-bind=\"props\"\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 @update:checked=\"emits('update:checked', $event)\"\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 {\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)\nconsole.log(props, forwarded)\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"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Toggle.vue",
|
"name": "Toggle.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useEmitAsProps } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n variant?: ToggleVariantProps['variant']\n size?: ToggleVariantProps['size']\n}\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { variant, size, ...otherProps } = props\n return otherProps\n})\n</script>\n\n<template>\n <Toggle\n v-bind=\"{ ...toggleProps, ...useEmitAsProps(emits) }\"\n :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n >\n <slot />\n </Toggle>\n</template>\n"
|
"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 } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n variant?: ToggleVariantProps['variant']\n size?: ToggleVariantProps['size']\n}\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { variant, size, ...otherProps } = props\n return otherProps\n})\n\nconst forwarded = useForwardPropsEmits(toggleProps, emits)\n</script>\n\n<template>\n <Toggle\n v-bind=\"forwarded\"\n :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n >\n <slot />\n </Toggle>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Tooltip.vue",
|
"name": "Tooltip.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <TooltipRoot v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </TooltipRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <TooltipRoot v-bind=\"forwarded\">\n <slot />\n </TooltipRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TooltipContent.vue",
|
"name": "TooltipContent.vue",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"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) }\" class=\"accordion\">\n <slot />\n </AccordionRoot>\n</template>\n"
|
"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"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AccordionContent.vue",
|
"name": "AccordionContent.vue",
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "AlertDialog.vue",
|
"name": "AlertDialog.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <AlertDialogRoot v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </AlertDialogRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <AlertDialogRoot v-bind=\"forwarded\">\n <slot />\n </AlertDialogRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "AlertDialogAction.vue",
|
"name": "AlertDialogAction.vue",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Calendar.vue",
|
"name": "Calendar.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { computed, nextTick, onMounted, ref } from 'vue'\nimport { buttonVariants } from '../button'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps< {\n modelValue?: string | number | Date | Partial<{\n start: Date\n end: Date\n }>\n modelModifiers?: object\n columns?: number\n type?: 'single' | 'range'\n}>(), {\n type: 'single',\n columns: 1,\n})\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n if (!calendarRef.value)\n return\n\n if (direction === 'prev')\n calendarRef.value.movePrev()\n else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n await nextTick()\n if (modelValue.value instanceof Date && calendarRef.value)\n calendarRef.value.focusDate(modelValue.value)\n})\n</script>\n\n<template>\n <div class=\"relative\">\n <div class=\"absolute top-3 flex justify-between w-full px-4\">\n <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n <ChevronLeft class=\"w-4 h-4\" />\n </button>\n <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n <ChevronRight class=\"w-4 h-4\" />\n </button>\n </div>\n\n <DatePicker\n ref=\"datePicker\"\n v-bind=\"$attrs\"\n v-model=\"modelValue\"\n :model-modifiers=\"modelModifiers\"\n class=\"calendar\"\n trim-weeks\n :transition=\"'none'\"\n :columns=\"columns\"\n />\n </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n @apply grid gap-4;\n}\n.calendar .vc-title {\n @apply text-sm font-medium pointer-events-none;\n}\n.calendar .vc-pane-header-wrapper {\n @apply hidden;\n}\n.calendar .vc-weeks {\n @apply mt-4;\n}\n.calendar .vc-weekdays {\n @apply flex;\n}\n.calendar .vc-weekday {\n @apply text-muted-foreground rounded-md w-8 font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n @apply bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;\n}\n.calendar .vc-day-content {\n @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-8 w-8 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n @apply bg-accent text-accent-foreground;\n}\n</style>\n"
|
"content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { computed, nextTick, onMounted, ref } from 'vue'\nimport { buttonVariants } from '../button'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps< {\n modelValue?: string | number | Date | Partial<{\n start: Date\n end: Date\n }>\n modelModifiers?: object\n columns?: number\n type?: 'single' | 'range'\n}>(), {\n type: 'single',\n columns: 1,\n})\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n if (!calendarRef.value)\n return\n\n if (direction === 'prev')\n calendarRef.value.movePrev()\n else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n await nextTick()\n if (modelValue.value instanceof Date && calendarRef.value)\n calendarRef.value.focusDate(modelValue.value)\n})\n</script>\n\n<template>\n <div class=\"relative\">\n <div class=\"absolute top-3 flex justify-between w-full px-4\">\n <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n <ChevronLeftIcon class=\"w-4 h-4\" />\n </button>\n <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n <ChevronRightIcon class=\"w-4 h-4\" />\n </button>\n </div>\n\n <DatePicker\n ref=\"datePicker\"\n v-bind=\"$attrs\"\n v-model=\"modelValue\"\n :model-modifiers=\"modelModifiers\"\n class=\"calendar\"\n trim-weeks\n :transition=\"'none'\"\n :columns=\"columns\"\n />\n </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n @apply grid gap-4;\n}\n.calendar .vc-title {\n @apply text-sm font-medium pointer-events-none;\n}\n.calendar .vc-pane-header-wrapper {\n @apply hidden;\n}\n.calendar .vc-weeks {\n @apply mt-4;\n}\n.calendar .vc-weekdays {\n @apply flex;\n}\n.calendar .vc-weekday {\n @apply text-muted-foreground rounded-md w-8 font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n @apply bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;\n}\n.calendar .vc-day-content {\n @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-8 w-8 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n @apply bg-accent text-accent-foreground;\n}\n</style>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Checkbox.vue",
|
"name": "Checkbox.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot, useEmitAsProps } 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 emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <CheckboxRoot\n v-bind=\"{ ...props, ...emitsAsProps }\"\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 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 { 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 items-center justify-center text-current\">\n <CheckIcon class=\"h-4 w-4\" />\n </CheckboxIndicator>\n </CheckboxRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CollapsibleContent.vue",
|
"name": "CollapsibleContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n <CollapsibleContent v-bind=\"props\">\n <slot />\n </CollapsibleContent>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n <slot />\n </CollapsibleContent>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CollapsibleTrigger.vue",
|
"name": "CollapsibleTrigger.vue",
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Command.vue",
|
"name": "Command.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useEmitAsProps } from 'radix-vue'\nimport { cn } 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 :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 { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useEmitAsProps, 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"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CommandDialog.vue",
|
"name": "CommandDialog.vue",
|
||||||
|
|
@ -26,11 +26,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"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-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 { 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"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"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 >\n <slot />\n </ComboboxItem>\n</template>\n"
|
"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"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CommandList.vue",
|
"name": "CommandList.vue",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "ContextMenu.vue",
|
"name": "ContextMenu.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ContextMenuRoot, useEmitAsProps } from 'radix-vue'\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n</script>\n\n<template>\n <ContextMenuRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </ContextMenuRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuRoot v-bind=\"forwarded\">\n <slot />\n </ContextMenuRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuCheckboxItem.vue",
|
"name": "ContextMenuCheckboxItem.vue",
|
||||||
|
|
@ -37,11 +37,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuRadioGroup.vue",
|
"name": "ContextMenuRadioGroup.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuRadioGroup,\n type ContextMenuRadioGroupEmits,\n type ContextMenuRadioGroupProps,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\n\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n</script>\n\n<template>\n <ContextMenuRadioGroup\n v-bind=\"props\"\n @update:model-value=\"emits('update:modelValue', $event)\"\n >\n <slot />\n </ContextMenuRadioGroup>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuRadioGroup,\n type ContextMenuRadioGroupEmits,\n type ContextMenuRadioGroupProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuRadioGroup v-bind=\"forwarded\">\n <slot />\n </ContextMenuRadioGroup>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuRadioItem.vue",
|
"name": "ContextMenuRadioItem.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuItemIndicator,\n ContextMenuRadioItem,\n type ContextMenuRadioItemEmits,\n type ContextMenuRadioItemProps,\n useEmitAsProps,\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</script>\n\n<template>\n <ContextMenuRadioItem\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 <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 {\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"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuSeparator.vue",
|
"name": "ContextMenuSeparator.vue",
|
||||||
|
|
@ -53,7 +53,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuSub.vue",
|
"name": "ContextMenuSub.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSub,\n type ContextMenuSubEmits,\n type ContextMenuSubProps,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuSubProps>()\n\nconst emits = defineEmits<ContextMenuSubEmits>()\n</script>\n\n<template>\n <ContextMenuSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n <slot />\n </ContextMenuSub>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSub,\n type ContextMenuSubEmits,\n type ContextMenuSubProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuSub v-bind=\"forwarded\">\n <slot />\n </ContextMenuSub>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuSubContent.vue",
|
"name": "ContextMenuSubContent.vue",
|
||||||
|
|
@ -61,7 +61,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"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 {\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"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ContextMenuTrigger.vue",
|
"name": "ContextMenuTrigger.vue",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "DropdownMenu.vue",
|
"name": "DropdownMenu.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n</script>\n\n<template>\n <DropdownMenuRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </DropdownMenuRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DropdownMenuRoot v-bind=\"forwarded\">\n <slot />\n </DropdownMenuRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuCheckboxItem.vue",
|
"name": "DropdownMenuCheckboxItem.vue",
|
||||||
|
|
@ -49,7 +49,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuSub.vue",
|
"name": "DropdownMenuSub.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSub,\n type DropdownMenuSubEmits,\n type DropdownMenuSubProps,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSubProps>()\n\nconst emits = defineEmits<DropdownMenuSubEmits>()\n</script>\n\n<template>\n <DropdownMenuSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n <slot />\n </DropdownMenuSub>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSub,\n type DropdownMenuSubEmits,\n type DropdownMenuSubProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DropdownMenuSub v-bind=\"forwarded\">\n <slot />\n </DropdownMenuSub>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "DropdownMenuSubContent.vue",
|
"name": "DropdownMenuSubContent.vue",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "HoverCard.vue",
|
"name": "HoverCard.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\n</script>\n\n<template>\n <HoverCardRoot v-bind=\"props\">\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>()\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n <HoverCardRoot v-bind=\"forwarded\">\n <slot />\n </HoverCardRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "HoverCardContent.vue",
|
"name": "HoverCardContent.vue",
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"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 {\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"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarGroup.vue",
|
"name": "MenubarGroup.vue",
|
||||||
|
|
@ -53,7 +53,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarSub.vue",
|
"name": "MenubarSub.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n MenubarSub,\n type MenubarSubEmits,\n} from 'radix-vue'\n\ninterface MenubarSubRootProps {\n defaultOpen?: boolean\n open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\n\nconst emits = defineEmits<MenubarSubEmits>()\n</script>\n\n<template>\n <MenubarSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n <slot />\n </MenubarSub>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'radix-vue'\n\ninterface MenubarSubRootProps {\n defaultOpen?: boolean\n open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <MenubarSub v-bind=\"forwarded\">\n <slot />\n </MenubarSub>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarSubContent.vue",
|
"name": "MenubarSubContent.vue",
|
||||||
|
|
@ -61,7 +61,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarSubTrigger.vue",
|
"name": "MenubarSubTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-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 </MenubarSubTrigger>\n</template>\n"
|
"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"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MenubarTrigger.vue",
|
"name": "MenubarTrigger.vue",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Popover.vue",
|
"name": "Popover.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { PopoverRoot, useEmitAsProps } from 'radix-vue'\nimport type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'\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"
|
"content": "<script setup lang=\"ts\">\nimport { PopoverRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <PopoverRoot v-bind=\"forwarded\">\n <slot />\n </PopoverRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "PopoverContent.vue",
|
"name": "PopoverContent.vue",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "RadioGroup.vue",
|
"name": "RadioGroup.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\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"
|
"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"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "RadioGroupItem.vue",
|
"name": "RadioGroupItem.vue",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Select.vue",
|
"name": "Select.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'radix-vue'\nimport { SelectRoot, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n</script>\n\n<template>\n <SelectRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </SelectRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'radix-vue'\nimport { SelectRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <SelectRoot v-bind=\"forwarded\">\n <slot />\n </SelectRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectContent.vue",
|
"name": "SelectContent.vue",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,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} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SwitchRootProps & { class?: string }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n</script>\n\n<template>\n <SwitchRoot\n v-bind=\"props\"\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 @update:checked=\"emits('update:checked', $event)\"\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 {\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"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Toggle.vue",
|
"name": "Toggle.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useEmitAsProps } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n variant?: ToggleVariantProps['variant']\n size?: ToggleVariantProps['size']\n}\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { variant, size, ...otherProps } = props\n return otherProps\n})\n</script>\n\n<template>\n <Toggle\n v-bind=\"{ ...toggleProps, ...useEmitAsProps(emits) }\"\n :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n >\n <slot />\n </Toggle>\n</template>\n"
|
"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 } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n variant?: ToggleVariantProps['variant']\n size?: ToggleVariantProps['size']\n}\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { variant, size, ...otherProps } = props\n return otherProps\n})\n\nconst forwarded = useForwardPropsEmits(toggleProps, emits)\n</script>\n\n<template>\n <Toggle\n v-bind=\"forwarded\"\n :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n >\n <slot />\n </Toggle>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Tooltip.vue",
|
"name": "Tooltip.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n</script>\n\n<template>\n <TooltipRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </TooltipRoot>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <TooltipRoot v-bind=\"forwarded\">\n <slot />\n </TooltipRoot>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "TooltipContent.vue",
|
"name": "TooltipContent.vue",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user