Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: perform migration

Browse Source
This commit is contained in:
zernonia 2024-11-05 07:12:04 +08:00
parent f878cd1140
commit f079f0161b
58 changed files with 156 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/www/src/content/docs/components/accordion.md
View File

@ -29,10 +29,10 @@ module.exports = {
keyframes: { keyframes: {
'accordion-down': { 'accordion-down': {
from: { height: 0 }, from: { height: 0 },
to: { height: 'var(--radix-accordion-content-height)' }, to: { height: 'var(--reka-accordion-content-height)' },
}, },
'accordion-up': { 'accordion-up': {
from: { height: 'var(--radix-accordion-content-height)' }, from: { height: 'var(--reka-accordion-content-height)' },
to: { height: 0 }, to: { height: 0 },
}, },
}, },

4
apps/www/src/content/docs/components/collapsible.md
View File

@ -29,10 +29,10 @@ module.exports = {
keyframes: { keyframes: {
'collapsible-down': { 'collapsible-down': {
from: { height: 0 }, from: { height: 0 },
to: { height: 'var(--radix-collapsible-content-height)' }, to: { height: 'var(--reka-collapsible-content-height)' },
}, },
'collapsible-up': { 'collapsible-up': {
from: { height: 'var(--radix-collapsible-content-height)' }, from: { height: 'var(--reka-collapsible-content-height)' },
to: { height: 0 }, to: { height: 0 },
}, },
}, },

16
apps/www/src/content/docs/components/data-table.md
View File

@ -751,7 +751,7 @@ const table = useVueTable({
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuCheckboxItem <DropdownMenuCheckboxItem
v-for="column in table.getAllColumns().filter((column) => column.getCanHide())" :key="column.id" v-for="column in table.getAllColumns().filter((column) => column.getCanHide())" :key="column.id"
class="capitalize" :checked="column.getIsVisible()" @update:checked="(value) => { class="capitalize" :modelValue="column.getIsVisible()" @update:modelValue="(value) => {
column.toggleVisibility(!!value) column.toggleVisibility(!!value)
}"> }">
{{ column.id }} {{ column.id }}
@ -814,13 +814,13 @@ export const columns: ColumnDef<Payment>[] = [
{ {
id: 'select', id: 'select',
header: ({ table }) => h(Checkbox, { header: ({ table }) => h(Checkbox, {
'checked': table.getIsAllPageRowsSelected(), 'modelValue': table.getIsAllPageRowsSelected(),
'onUpdate:checked': (value: boolean) => table.toggleAllPageRowsSelected(!!value), 'onUpdate:modelValue': (value: boolean) => table.toggleAllPageRowsSelected(!!value),
'ariaLabel': 'Select all', 'ariaLabel': 'Select all',
}), }),
cell: ({ row }) => h(Checkbox, { cell: ({ row }) => h(Checkbox, {
'checked': row.getIsSelected(), 'modelValue': row.getIsSelected(),
'onUpdate:checked': (value: boolean) => row.toggleSelected(!!value), 'onUpdate:modelValue': (value: boolean) => row.toggleSelected(!!value),
'ariaLabel': 'Select row', 'ariaLabel': 'Select row',
}), }),
enableSorting: false, enableSorting: false,
@ -995,7 +995,7 @@ const table = useVueTable({
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuCheckboxItem <DropdownMenuCheckboxItem
v-for="column in table.getAllColumns().filter((column) => column.getCanHide())" :key="column.id" v-for="column in table.getAllColumns().filter((column) => column.getCanHide())" :key="column.id"
class="capitalize" :checked="column.getIsVisible()" @update:checked="(value) => { class="capitalize" :modelValue="column.getIsVisible()" @update:modelValue="(value) => {
column.toggleVisibility(!!value) column.toggleVisibility(!!value)
}"> }">
{{ column.id }} {{ column.id }}
@ -1369,8 +1369,8 @@ const columns = computed(() => props.table.getAllColumns()
v-for="column in columns" v-for="column in columns"
:key="column.id" :key="column.id"
class="capitalize" class="capitalize"
:checked="column.getIsVisible()" :modelValue="column.getIsVisible()"
@update:checked="(value) => column.toggleVisibility(!!value)" @update:modelValue="(value) => column.toggleVisibility(!!value)"
> >
{{ column.id }} {{ column.id }}
</DropdownMenuCheckboxItem> </DropdownMenuCheckboxItem>

2
apps/www/src/content/docs/components/pagination.md
View File

@ -34,7 +34,7 @@ import {
</script> </script>
<template> <template>
<Pagination v-slot="{ page }" :total="100" :sibling-count="1" show-edges :default-page="2"> <Pagination v-slot="{ page }" :items-per-page="10" :total="100" :sibling-count="1" show-edges :default-page="2">
<PaginationList v-slot="{ items }" class="flex items-center gap-1"> <PaginationList v-slot="{ items }" class="flex items-center gap-1">
<PaginationFirst /> <PaginationFirst />
<PaginationPrev /> <PaginationPrev />

2
apps/www/src/content/docs/components/switch.md
View File

@ -52,7 +52,7 @@ import { Switch } from '@/components/ui/switch'
```vue ```vue
<template> <template>
<Switch :checked="isDark" @update:checked="toggleTheme"> <Switch :model-value="isDark" @update:model-value="toggleTheme">
<template #thumb> <template #thumb>
<Icon v-if="isDark" icon="lucide:moon" class="size-3" /> <Icon v-if="isDark" icon="lucide:moon" class="size-3" />
<Icon v-else icon="lucide:sun" class="size-3" /> <Icon v-else icon="lucide:sun" class="size-3" />

4
apps/www/src/content/docs/installation/laravel.md
View File

@ -112,10 +112,10 @@ export default {
keyframes: { keyframes: {
'accordion-down': { 'accordion-down': {
from: { height: 0 }, from: { height: 0 },
to: { height: 'var(--radix-accordion-content-height)' }, to: { height: 'var(--reka-accordion-content-height)' },
}, },
'accordion-up': { 'accordion-up': {
from: { height: 'var(--radix-accordion-content-height)' }, from: { height: 'var(--reka-accordion-content-height)' },
to: { height: 0 }, to: { height: 0 },
}, },
}, },

4
apps/www/src/examples/forms/components/DisplayForm.vue
View File

@ -88,8 +88,8 @@ const onSubmit = handleSubmit((values) => {
<FormItem :key="item.id" class="flex flex-row items-start space-x-3 space-y-0"> <FormItem :key="item.id" class="flex flex-row items-start space-x-3 space-y-0">
<FormControl> <FormControl>
<Checkbox <Checkbox
:checked="value.includes(item.id)" :model-value="value.includes(item.id)"
@update:checked="(checked) => { @update:model-value="(checked) => {
if (Array.isArray(value)) { if (Array.isArray(value)) {
handleChange(checked ? [...value, item.id] : value.filter(id => id !== item.id)) handleChange(checked ? [...value, item.id] : value.filter(id => id !== item.id))
} }

20
apps/www/src/examples/forms/components/NotificationsForm.vue
View File

@ -107,8 +107,8 @@ const onSubmit = handleSubmit((values) => {
</div> </div>
<FormControl> <FormControl>
<Switch <Switch
:checked="value" :model-value="value"
@update:checked="handleChange" @update:model-value="handleChange"
/> />
</FormControl> </FormControl>
</FormItem> </FormItem>
@ -126,8 +126,8 @@ const onSubmit = handleSubmit((values) => {
</div> </div>
<FormControl> <FormControl>
<Switch <Switch
:checked="value" :model-value="value"
@update:checked="handleChange" @update:model-value="handleChange"
/> />
</FormControl> </FormControl>
</FormItem> </FormItem>
@ -145,8 +145,8 @@ const onSubmit = handleSubmit((values) => {
</div> </div>
<FormControl> <FormControl>
<Switch <Switch
:checked="value" :model-value="value"
@update:checked="handleChange" @update:model-value="handleChange"
/> />
</FormControl> </FormControl>
</FormItem> </FormItem>
@ -164,8 +164,8 @@ const onSubmit = handleSubmit((values) => {
</div> </div>
<FormControl> <FormControl>
<Switch <Switch
:checked="value" :model-value="value"
@update:checked="handleChange" @update:model-value="handleChange"
/> />
</FormControl> </FormControl>
</FormItem> </FormItem>
@ -177,8 +177,8 @@ const onSubmit = handleSubmit((values) => {
<FormItem class="flex flex-row items-start space-x-3 space-y-0"> <FormItem class="flex flex-row items-start space-x-3 space-y-0">
<FormControl> <FormControl>
<Checkbox <Checkbox
:checked="value" :model-value="value"
@update:checked="handleChange" @update:model-value="handleChange"
/> />
</FormControl> </FormControl>
<div class="space-y-1 leading-none"> <div class="space-y-1 leading-none">

4
apps/www/src/examples/tasks/components/DataTableViewOptions.vue
View File

@ -47,8 +47,8 @@ const columns = computed(() => props.table.getAllColumns()
v-for="column in columns" v-for="column in columns"
:key="column.id" :key="column.id"
class="capitalize" class="capitalize"
:checked="column.getIsVisible()" :model-value="column.getIsVisible()"
@update:checked="(value) => column.toggleVisibility(!!value)" @update:model-value="(value) => column.toggleVisibility(!!value)"
> >
{{ column.id }} {{ column.id }}
</DropdownMenuCheckboxItem> </DropdownMenuCheckboxItem>

6
apps/www/src/examples/tasks/components/columns.ts
View File

@ -12,12 +12,12 @@ export const columns: ColumnDef<Task>[] = [
{ {
id: 'select', id: 'select',
header: ({ table }) => h(Checkbox, { header: ({ table }) => h(Checkbox, {
'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'), 'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value), 'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
'ariaLabel': 'Select all', 'ariaLabel': 'Select all',
'class': 'translate-y-0.5', 'class': 'translate-y-0.5',
}), }),
cell: ({ row }) => h(Checkbox, { 'checked': row.getIsSelected(), 'onUpdate:checked': value => row.toggleSelected(!!value), 'ariaLabel': 'Select row', 'class': 'translate-y-0.5' }), cell: ({ row }) => h(Checkbox, { 'modelValue': row.getIsSelected(), 'onUpdate:modelValue': value => row.toggleSelected(!!value), 'ariaLabel': 'Select row', 'class': 'translate-y-0.5' }),
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
}, },

2
apps/www/src/lib/registry/default/block/Dashboard05.vue
View File

@ -773,7 +773,7 @@ import {
<div class="text-xs text-muted-foreground"> <div class="text-xs text-muted-foreground">
Updated <time dateTime="2023-11-23">November 23, 2023</time> Updated <time dateTime="2023-11-23">November 23, 2023</time>
</div> </div>
<Pagination class="ml-auto mr-0 w-auto"> <Pagination class="ml-auto mr-0 w-auto" :items-per-page="10">
<PaginationList class="gap-1"> <PaginationList class="gap-1">
<PaginationPrev variant="outline" class="h-6 w-6" /> <PaginationPrev variant="outline" class="h-6 w-6" />
<PaginationNext variant="outline" class="h-6 w-6" /> <PaginationNext variant="outline" class="h-6 w-6" />

2
apps/www/src/lib/registry/default/block/Sidebar01.vue
View File

@ -135,7 +135,7 @@ function setSelectedVersion(version: string) {
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
v-if="dropdownOpen" v-if="dropdownOpen"
class="w-[--radix-dropdown-menu-trigger-width]" class="w-[--reka-dropdown-menu-trigger-width]"
align="start" align="start"
> >
<DropdownMenuItem <DropdownMenuItem

4
apps/www/src/lib/registry/default/block/Sidebar07.vue
View File

@ -242,7 +242,7 @@ function setActiveTeam(team: typeof data.teams[number]) {
</SidebarMenuButton> </SidebarMenuButton>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg" class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
align="start" align="start"
side="bottom" side="bottom"
:side-offset="4" :side-offset="4"
@ -381,7 +381,7 @@ function setActiveTeam(team: typeof data.teams[number]) {
<ChevronsUpDown class="ml-auto size-4" /> <ChevronsUpDown class="ml-auto size-4" />
</SidebarMenuButton> </SidebarMenuButton>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg" side="bottom" align="end" :side-offset="4"> <DropdownMenuContent class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg" side="bottom" align="end" :side-offset="4">
<DropdownMenuLabel class="p-0 font-normal"> <DropdownMenuLabel class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm"> <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar class="h-8 w-8 rounded-lg"> <Avatar class="h-8 w-8 rounded-lg">

12
apps/www/src/lib/registry/default/example/Cards/DataTable.vue
View File

@ -81,13 +81,13 @@ const columns: ColumnDef<Payment>[] = [
{ {
id: 'select', id: 'select',
header: ({ table }) => h(Checkbox, { header: ({ table }) => h(Checkbox, {
'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'), 'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value), 'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
'ariaLabel': 'Select all', 'ariaLabel': 'Select all',
}), }),
cell: ({ row }) => h(Checkbox, { cell: ({ row }) => h(Checkbox, {
'checked': row.getIsSelected(), 'modelValue': row.getIsSelected(),
'onUpdate:checked': value => row.toggleSelected(!!value), 'onUpdate:modelValue': value => row.toggleSelected(!!value),
'ariaLabel': 'Select row', 'ariaLabel': 'Select row',
}), }),
enableSorting: false, enableSorting: false,
@ -187,8 +187,8 @@ const table = useVueTable({
v-for="column in table.getAllColumns().filter((column) => column.getCanHide())" v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
:key="column.id" :key="column.id"
class="capitalize" class="capitalize"
:checked="column.getIsVisible()" :model-value="column.getIsVisible()"
@update:checked="(value) => { @update:model-value="(value) => {
column.toggleVisibility(!!value) column.toggleVisibility(!!value)
}" }"
> >

4
apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue
View File

@ -81,8 +81,8 @@ const onSubmit = handleSubmit((values) => {
<FormItem class="flex flex-row items-start space-x-3 space-y-0"> <FormItem class="flex flex-row items-start space-x-3 space-y-0">
<FormControl> <FormControl>
<Checkbox <Checkbox
:checked="value.includes(item.id)" :model-value="value.includes(item.id)"
@update:checked="handleChange" @update:model-value="handleChange"
/> />
</FormControl> </FormControl>
<FormLabel class="font-normal"> <FormLabel class="font-normal">

2
apps/www/src/lib/registry/default/example/CheckboxFormSingle.vue
View File

@ -40,7 +40,7 @@ const onSubmit = handleSubmit((values) => {
<FormField v-slot="{ value, handleChange }" type="checkbox" name="mobile"> <FormField v-slot="{ value, handleChange }" type="checkbox" name="mobile">
<FormItem class="flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4"> <FormItem class="flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4">
<FormControl> <FormControl>
<Checkbox :checked="value" @update:checked="handleChange" /> <Checkbox :model-value="value" @update:model-value="handleChange" />
</FormControl> </FormControl>
<div class="space-y-1 leading-none"> <div class="space-y-1 leading-none">
<FormLabel>Use different settings for my mobile devices</FormLabel> <FormLabel>Use different settings for my mobile devices</FormLabel>

12
apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
View File

@ -84,14 +84,14 @@ const columns = [
columnHelper.display({ columnHelper.display({
id: 'select', id: 'select',
header: ({ table }) => h(Checkbox, { header: ({ table }) => h(Checkbox, {
'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'), 'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value), 'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
'ariaLabel': 'Select all', 'ariaLabel': 'Select all',
}), }),
cell: ({ row }) => { cell: ({ row }) => {
return h(Checkbox, { return h(Checkbox, {
'checked': row.getIsSelected(), 'modelValue': row.getIsSelected(),
'onUpdate:checked': value => row.toggleSelected(!!value), 'onUpdate:modelValue': value => row.toggleSelected(!!value),
'ariaLabel': 'Select row', 'ariaLabel': 'Select row',
}) })
}, },
@ -192,8 +192,8 @@ const table = useVueTable({
v-for="column in table.getAllColumns().filter((column) => column.getCanHide())" v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
:key="column.id" :key="column.id"
class="capitalize" class="capitalize"
:checked="column.getIsVisible()" :model-value="column.getIsVisible()"
@update:checked="(value) => { @update:model-value="(value) => {
column.toggleVisibility(!!value) column.toggleVisibility(!!value)
}" }"
> >

12
apps/www/src/lib/registry/default/example/DataTableDemo.vue
View File

@ -82,13 +82,13 @@ const columns: ColumnDef<Payment>[] = [
{ {
id: 'select', id: 'select',
header: ({ table }) => h(Checkbox, { header: ({ table }) => h(Checkbox, {
'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'), 'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value), 'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
'ariaLabel': 'Select all', 'ariaLabel': 'Select all',
}), }),
cell: ({ row }) => h(Checkbox, { cell: ({ row }) => h(Checkbox, {
'checked': row.getIsSelected(), 'modelValue': row.getIsSelected(),
'onUpdate:checked': value => row.toggleSelected(!!value), 'onUpdate:modelValue': value => row.toggleSelected(!!value),
'ariaLabel': 'Select row', 'ariaLabel': 'Select row',
}), }),
enableSorting: false, enableSorting: false,
@ -187,8 +187,8 @@ const table = useVueTable({
v-for="column in table.getAllColumns().filter((column) => column.getCanHide())" v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
:key="column.id" :key="column.id"
class="capitalize" class="capitalize"
:checked="column.getIsVisible()" :model-value="column.getIsVisible()"
@update:checked="(value) => { @update:model-value="(value) => {
column.toggleVisibility(!!value) column.toggleVisibility(!!value)
}" }"
> >

12
apps/www/src/lib/registry/default/example/DataTableReactiveDemo.vue
View File

@ -82,13 +82,13 @@ const columns: ColumnDef<Payment>[] = [
{ {
id: 'select', id: 'select',
header: ({ table }) => h(Checkbox, { header: ({ table }) => h(Checkbox, {
'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'), 'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value), 'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
'ariaLabel': 'Select all', 'ariaLabel': 'Select all',
}), }),
cell: ({ row }) => h(Checkbox, { cell: ({ row }) => h(Checkbox, {
'checked': row.getIsSelected(), 'modelValue': row.getIsSelected(),
'onUpdate:checked': value => row.toggleSelected(!!value), 'onUpdate:modelValue': value => row.toggleSelected(!!value),
'ariaLabel': 'Select row', 'ariaLabel': 'Select row',
}), }),
enableSorting: false, enableSorting: false,
@ -198,8 +198,8 @@ function randomize() {
v-for="column in table.getAllColumns().filter((column) => column.getCanHide())" v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
:key="column.id" :key="column.id"
class="capitalize" class="capitalize"
:checked="column.getIsVisible()" :model-value="column.getIsVisible()"
@update:checked="(value) => { @update:model-value="(value) => {
column.toggleVisibility(!!value) column.toggleVisibility(!!value)
}" }"
> >

8
apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue
View File

@ -11,7 +11,7 @@ import {
} from '@/lib/registry/default/ui/dropdown-menu' } from '@/lib/registry/default/ui/dropdown-menu'
import { ref } from 'vue' import { ref } from 'vue'
type Checked = DropdownMenuCheckboxItemProps['checked'] type Checked = DropdownMenuCheckboxItemProps['modelValue']
const showStatusBar = ref<Checked>(true) const showStatusBar = ref<Checked>(true)
const showActivityBar = ref<Checked>(false) const showActivityBar = ref<Checked>(false)
@ -29,18 +29,18 @@ const showPanel = ref<Checked>(false)
<DropdownMenuLabel>Appearance</DropdownMenuLabel> <DropdownMenuLabel>Appearance</DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuCheckboxItem <DropdownMenuCheckboxItem
v-model:checked="showStatusBar" v-model:model-value="showStatusBar"
> >
Status Bar Status Bar
</DropdownMenuCheckboxItem> </DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem <DropdownMenuCheckboxItem
v-model:checked="showActivityBar" v-model:model-value="showActivityBar"
disabled disabled
> >
Activity Bar Activity Bar
</DropdownMenuCheckboxItem> </DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem <DropdownMenuCheckboxItem
v-model:checked="showPanel" v-model:model-value="showPanel"
> >
Panel Panel
</DropdownMenuCheckboxItem> </DropdownMenuCheckboxItem>

2
apps/www/src/lib/registry/default/example/PaginationDemo.vue
View File

@ -16,7 +16,7 @@ import {
</script> </script>
<template> <template>
<Pagination v-slot="{ page }" :total="100" :sibling-count="1" show-edges :default-page="2"> <Pagination v-slot="{ page }" :items-per-page="10" :total="100" :sibling-count="1" show-edges :default-page="2">
<PaginationList v-slot="{ items }" class="flex items-center gap-1"> <PaginationList v-slot="{ items }" class="flex items-center gap-1">
<PaginationFirst /> <PaginationFirst />
<PaginationPrev /> <PaginationPrev />

8
apps/www/src/lib/registry/default/example/SwitchForm.vue
View File

@ -55,8 +55,8 @@ const onSubmit = handleSubmit((values) => {
</div> </div>
<FormControl> <FormControl>
<Switch <Switch
:checked="value" :model-value="value"
@update:checked="handleChange" @update:model-value="handleChange"
/> />
</FormControl> </FormControl>
</FormItem> </FormItem>
@ -73,10 +73,10 @@ const onSubmit = handleSubmit((values) => {
</div> </div>
<FormControl> <FormControl>
<Switch <Switch
:checked="value" :model-value="value"
disabled disabled
aria-readonly aria-readonly
@update:checked="handleChange" @update:model-value="handleChange"
/> />
</FormControl> </FormControl>
</FormItem> </FormItem>

2
apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
View File

@ -39,7 +39,7 @@ const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.val
<ComboboxContent> <ComboboxContent>
<CommandList <CommandList
position="popper" position="popper"
class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" class="w-[--reka-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
> >
<CommandEmpty /> <CommandEmpty />
<CommandGroup> <CommandGroup>

4
apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldBoolean.vue
View File

@ -22,8 +22,8 @@ const booleanComponent = computed(() => props.config?.component === 'switch' ? S
:is="booleanComponent" :is="booleanComponent"
v-bind="{ ...slotProps.componentField }" v-bind="{ ...slotProps.componentField }"
:disabled="disabled" :disabled="disabled"
:checked="slotProps.componentField.modelValue" :model-value="slotProps.componentField.modelValue"
@update:checked="slotProps.componentField['onUpdate:modelValue']" @update:model-value="slotProps.componentField['onUpdate:modelValue']"
/> />
</slot> </slot>
</FormControl> </FormControl>

2
apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
View File

@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps)
v-bind="forwardedProps" v-bind="forwardedProps"
:class=" :class="
cn( cn(
'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]', 'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]',
props.class, props.class,
) )
" "

2
apps/www/src/lib/registry/default/ui/select/SelectContent.vue
View File

@ -44,7 +44,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
" "
> >
<SelectScrollUpButton /> <SelectScrollUpButton />
<SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')"> <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')">
<slot /> <slot />
</SelectViewport> </SelectViewport>
<SelectScrollDownButton /> <SelectScrollDownButton />

2
apps/www/src/lib/registry/default/ui/toast/index.ts
View File

@ -14,7 +14,7 @@ export { toast, useToast } from './use-toast'
import { cva, type VariantProps } from 'class-variance-authority' import { cva, type VariantProps } from 'class-variance-authority'
export const toastVariants = cva( export const toastVariants = cva(
'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full', 'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--reka-toast-swipe-end-x] data-[swipe=move]:translate-x-[--reka-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
{ {
variants: { variants: {
variant: { variant: {

2
apps/www/src/lib/registry/new-york/block/Dashboard05.vue
View File

@ -757,7 +757,7 @@ import {
<div class="text-xs text-muted-foreground"> <div class="text-xs text-muted-foreground">
Updated <time dateTime="2023-11-23">November 23, 2023</time> Updated <time dateTime="2023-11-23">November 23, 2023</time>
</div> </div>
<Pagination class="ml-auto mr-0 w-auto"> <Pagination class="ml-auto mr-0 w-auto" :items-per-page="10">
<PaginationList class="gap-1"> <PaginationList class="gap-1">
<PaginationPrev variant="outline" class="h-6 w-6" /> <PaginationPrev variant="outline" class="h-6 w-6" />
<PaginationNext variant="outline" class="h-6 w-6" /> <PaginationNext variant="outline" class="h-6 w-6" />

2
apps/www/src/lib/registry/new-york/block/Sidebar01.vue
View File

@ -135,7 +135,7 @@ function setSelectedVersion(version: string) {
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
v-if="dropdownOpen" v-if="dropdownOpen"
class="w-[--radix-dropdown-menu-trigger-width]" class="w-[--reka-dropdown-menu-trigger-width]"
align="start" align="start"
> >
<DropdownMenuItem <DropdownMenuItem

4
apps/www/src/lib/registry/new-york/block/Sidebar07.vue
View File

@ -242,7 +242,7 @@ function setActiveTeam(team: typeof data.teams[number]) {
</SidebarMenuButton> </SidebarMenuButton>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg" class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
align="start" align="start"
side="bottom" side="bottom"
:side-offset="4" :side-offset="4"
@ -381,7 +381,7 @@ function setActiveTeam(team: typeof data.teams[number]) {
<ChevronsUpDown class="ml-auto size-4" /> <ChevronsUpDown class="ml-auto size-4" />
</SidebarMenuButton> </SidebarMenuButton>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg" side="bottom" align="end" :side-offset="4"> <DropdownMenuContent class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg" side="bottom" align="end" :side-offset="4">
<DropdownMenuLabel class="p-0 font-normal"> <DropdownMenuLabel class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm"> <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar class="h-8 w-8 rounded-lg"> <Avatar class="h-8 w-8 rounded-lg">

12
apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue
View File

@ -81,13 +81,13 @@ const columns: ColumnDef<Payment>[] = [
{ {
id: 'select', id: 'select',
header: ({ table }) => h(Checkbox, { header: ({ table }) => h(Checkbox, {
'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'), 'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value), 'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
'ariaLabel': 'Select all', 'ariaLabel': 'Select all',
}), }),
cell: ({ row }) => h(Checkbox, { cell: ({ row }) => h(Checkbox, {
'checked': row.getIsSelected(), 'modelValue': row.getIsSelected(),
'onUpdate:checked': value => row.toggleSelected(!!value), 'onUpdate:modelValue': value => row.toggleSelected(!!value),
'ariaLabel': 'Select row', 'ariaLabel': 'Select row',
}), }),
enableSorting: false, enableSorting: false,
@ -187,8 +187,8 @@ const table = useVueTable({
v-for="column in table.getAllColumns().filter((column) => column.getCanHide())" v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
:key="column.id" :key="column.id"
class="capitalize" class="capitalize"
:checked="column.getIsVisible()" :model-value="column.getIsVisible()"
@update:checked="(value) => { @update:model-value="(value) => {
column.toggleVisibility(!!value) column.toggleVisibility(!!value)
}" }"
> >

4
apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue
View File

@ -81,8 +81,8 @@ const onSubmit = handleSubmit((values) => {
<FormItem class="flex flex-row items-start space-x-3 space-y-0"> <FormItem class="flex flex-row items-start space-x-3 space-y-0">
<FormControl> <FormControl>
<Checkbox <Checkbox
:checked="value.includes(item.id)" :model-value="value.includes(item.id)"
@update:checked="handleChange" @update:model-value="handleChange"
/> />
</FormControl> </FormControl>
<FormLabel class="font-normal"> <FormLabel class="font-normal">

2
apps/www/src/lib/registry/new-york/example/CheckboxFormSingle.vue
View File

@ -40,7 +40,7 @@ const onSubmit = handleSubmit((values) => {
<FormField v-slot="{ value, handleChange }" type="checkbox" name="mobile"> <FormField v-slot="{ value, handleChange }" type="checkbox" name="mobile">
<FormItem class="flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4 shadow"> <FormItem class="flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4 shadow">
<FormControl> <FormControl>
<Checkbox :checked="value" @update:checked="handleChange" /> <Checkbox :model-value="value" @update:model-value="handleChange" />
</FormControl> </FormControl>
<div class="space-y-1 leading-none"> <div class="space-y-1 leading-none">
<FormLabel>Use different settings for my mobile devices</FormLabel> <FormLabel>Use different settings for my mobile devices</FormLabel>

12
apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue
View File

@ -84,14 +84,14 @@ const columns = [
columnHelper.display({ columnHelper.display({
id: 'select', id: 'select',
header: ({ table }) => h(Checkbox, { header: ({ table }) => h(Checkbox, {
'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'), 'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value), 'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
'ariaLabel': 'Select all', 'ariaLabel': 'Select all',
}), }),
cell: ({ row }) => { cell: ({ row }) => {
return h(Checkbox, { return h(Checkbox, {
'checked': row.getIsSelected(), 'modelValue': row.getIsSelected(),
'onUpdate:checked': value => row.toggleSelected(!!value), 'onUpdate:modelValue': value => row.toggleSelected(!!value),
'ariaLabel': 'Select row', 'ariaLabel': 'Select row',
}) })
}, },
@ -192,8 +192,8 @@ const table = useVueTable({
v-for="column in table.getAllColumns().filter((column) => column.getCanHide())" v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
:key="column.id" :key="column.id"
class="capitalize" class="capitalize"
:checked="column.getIsVisible()" :model-value="column.getIsVisible()"
@update:checked="(value) => { @update:model-value="(value) => {
column.toggleVisibility(!!value) column.toggleVisibility(!!value)
}" }"
> >

12
apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
View File

@ -82,13 +82,13 @@ const columns: ColumnDef<Payment>[] = [
{ {
id: 'select', id: 'select',
header: ({ table }) => h(Checkbox, { header: ({ table }) => h(Checkbox, {
'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'), 'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value), 'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
'ariaLabel': 'Select all', 'ariaLabel': 'Select all',
}), }),
cell: ({ row }) => h(Checkbox, { cell: ({ row }) => h(Checkbox, {
'checked': row.getIsSelected(), 'modelValue': row.getIsSelected(),
'onUpdate:checked': value => row.toggleSelected(!!value), 'onUpdate:modelValue': value => row.toggleSelected(!!value),
'ariaLabel': 'Select row', 'ariaLabel': 'Select row',
}), }),
enableSorting: false, enableSorting: false,
@ -187,8 +187,8 @@ const table = useVueTable({
v-for="column in table.getAllColumns().filter((column) => column.getCanHide())" v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
:key="column.id" :key="column.id"
class="capitalize" class="capitalize"
:checked="column.getIsVisible()" :model-value="column.getIsVisible()"
@update:checked="(value) => { @update:model-value="(value) => {
column.toggleVisibility(!!value) column.toggleVisibility(!!value)
}" }"
> >

12
apps/www/src/lib/registry/new-york/example/DataTableReactiveDemo.vue
View File

@ -82,13 +82,13 @@ const columns: ColumnDef<Payment>[] = [
{ {
id: 'select', id: 'select',
header: ({ table }) => h(Checkbox, { header: ({ table }) => h(Checkbox, {
'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'), 'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value), 'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
'ariaLabel': 'Select all', 'ariaLabel': 'Select all',
}), }),
cell: ({ row }) => h(Checkbox, { cell: ({ row }) => h(Checkbox, {
'checked': row.getIsSelected(), 'modelValue': row.getIsSelected(),
'onUpdate:checked': value => row.toggleSelected(!!value), 'onUpdate:modelValue': value => row.toggleSelected(!!value),
'ariaLabel': 'Select row', 'ariaLabel': 'Select row',
}), }),
enableSorting: false, enableSorting: false,
@ -198,8 +198,8 @@ function randomize() {
v-for="column in table.getAllColumns().filter((column) => column.getCanHide())" v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
:key="column.id" :key="column.id"
class="capitalize" class="capitalize"
:checked="column.getIsVisible()" :model-value="column.getIsVisible()"
@update:checked="(value) => { @update:model-value="(value) => {
column.toggleVisibility(!!value) column.toggleVisibility(!!value)
}" }"
> >

8
apps/www/src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue
View File

@ -11,7 +11,7 @@ import {
} from '@/lib/registry/new-york/ui/dropdown-menu' } from '@/lib/registry/new-york/ui/dropdown-menu'
import { ref } from 'vue' import { ref } from 'vue'
type Checked = DropdownMenuCheckboxItemProps['checked'] type Checked = DropdownMenuCheckboxItemProps['modelValue']
const showStatusBar = ref<Checked>(true) const showStatusBar = ref<Checked>(true)
const showActivityBar = ref<Checked>(false) const showActivityBar = ref<Checked>(false)
@ -29,18 +29,18 @@ const showPanel = ref<Checked>(false)
<DropdownMenuLabel>Appearance</DropdownMenuLabel> <DropdownMenuLabel>Appearance</DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuCheckboxItem <DropdownMenuCheckboxItem
v-model:checked="showStatusBar" v-model:model-value="showStatusBar"
> >
Status Bar Status Bar
</DropdownMenuCheckboxItem> </DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem <DropdownMenuCheckboxItem
v-model:checked="showActivityBar" v-model:model-value="showActivityBar"
disabled disabled
> >
Activity Bar Activity Bar
</DropdownMenuCheckboxItem> </DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem <DropdownMenuCheckboxItem
v-model:checked="showPanel" v-model:model-value="showPanel"
> >
Panel Panel
</DropdownMenuCheckboxItem> </DropdownMenuCheckboxItem>

2
apps/www/src/lib/registry/new-york/example/PaginationDemo.vue
View File

@ -16,7 +16,7 @@ import {
</script> </script>
<template> <template>
<Pagination v-slot="{ page }" :total="100" :sibling-count="1" show-edges :default-page="2"> <Pagination v-slot="{ page }" :items-per-page="10" :total="100" :sibling-count="1" show-edges :default-page="2">
<PaginationList v-slot="{ items }" class="flex items-center gap-1"> <PaginationList v-slot="{ items }" class="flex items-center gap-1">
<PaginationFirst /> <PaginationFirst />
<PaginationPrev /> <PaginationPrev />

8
apps/www/src/lib/registry/new-york/example/SwitchForm.vue
View File

@ -55,8 +55,8 @@ const onSubmit = handleSubmit((values) => {
</div> </div>
<FormControl> <FormControl>
<Switch <Switch
:checked="value" :model-value="value"
@update:checked="handleChange" @update:model-value="handleChange"
/> />
</FormControl> </FormControl>
</FormItem> </FormItem>
@ -73,10 +73,10 @@ const onSubmit = handleSubmit((values) => {
</div> </div>
<FormControl> <FormControl>
<Switch <Switch
:checked="value" :model-value="value"
disabled disabled
aria-readonly aria-readonly
@update:checked="handleChange" @update:model-value="handleChange"
/> />
</FormControl> </FormControl>
</FormItem> </FormItem>

2
apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue
View File

@ -39,7 +39,7 @@ const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.val
<ComboboxContent> <ComboboxContent>
<CommandList <CommandList
position="popper" position="popper"
class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" class="w-[--reka-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
> >
<CommandEmpty /> <CommandEmpty />
<CommandGroup> <CommandGroup>

4
apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue
View File

@ -22,8 +22,8 @@ const booleanComponent = computed(() => props.config?.component === 'switch' ? S
:is="booleanComponent" :is="booleanComponent"
v-bind="{ ...slotProps.componentField }" v-bind="{ ...slotProps.componentField }"
:disabled="disabled" :disabled="disabled"
:checked="slotProps.componentField.modelValue" :model-value="slotProps.componentField.modelValue"
@update:checked="slotProps.componentField['onUpdate:modelValue']" @update:model-value="slotProps.componentField['onUpdate:modelValue']"
/> />
</slot> </slot>
</FormControl> </FormControl>

2
apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
View File

@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps)
v-bind="forwardedProps" v-bind="forwardedProps"
:class=" :class="
cn( cn(
'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]', 'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]',
props.class, props.class,
) )
" "

2
apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
View File

@ -44,7 +44,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
" "
> >
<SelectScrollUpButton /> <SelectScrollUpButton />
<SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')"> <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')">
<slot /> <slot />
</SelectViewport> </SelectViewport>
<SelectScrollDownButton /> <SelectScrollDownButton />

2
apps/www/src/lib/registry/new-york/ui/toast/index.ts
View File

@ -14,7 +14,7 @@ export { toast, useToast } from './use-toast'
import { cva, type VariantProps } from 'class-variance-authority' import { cva, type VariantProps } from 'class-variance-authority'
export const toastVariants = cva( export const toastVariants = cva(
'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full', 'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
{ {
variants: { variants: {
variant: { variant: {

2
apps/www/src/public/registry/styles/default/auto-form.json
View File

@ -36,7 +36,7 @@
}, },
{ {
"name": "AutoFormFieldBoolean.vue", "name": "AutoFormFieldBoolean.vue",
"content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/default/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'\nimport { Switch } from '@/lib/registry/default/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n <FormItem>\n <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n <FormControl>\n <slot v-bind=\"slotProps\">\n <component\n :is=\"booleanComponent\"\n v-bind=\"{ ...slotProps.componentField }\"\n :disabled=\"disabled\"\n :checked=\"slotProps.componentField.modelValue\"\n @update:checked=\"slotProps.componentField['onUpdate:modelValue']\"\n />\n </slot>\n </FormControl>\n <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n </AutoFormLabel>\n </div>\n\n <FormDescription v-if=\"config?.description\">\n {{ config.description }}\n </FormDescription>\n <FormMessage />\n </FormItem>\n </FormField>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/default/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'\nimport { Switch } from '@/lib/registry/default/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n <FormItem>\n <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n <FormControl>\n <slot v-bind=\"slotProps\">\n <component\n :is=\"booleanComponent\"\n v-bind=\"{ ...slotProps.componentField }\"\n :disabled=\"disabled\"\n :modelValue=\"slotProps.componentField.modelValue\"\n @update:modelValue=\"slotProps.componentField['onUpdate:modelValue']\"\n />\n </slot>\n </FormControl>\n <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n </AutoFormLabel>\n </div>\n\n <FormDescription v-if=\"config?.description\">\n {{ config.description }}\n </FormDescription>\n <FormMessage />\n </FormItem>\n </FormField>\n</template>\n"
}, },
{ {
"name": "AutoFormFieldDate.vue", "name": "AutoFormFieldDate.vue",

2
apps/www/src/public/registry/styles/default/data-table.json
View File

File diff suppressed because one or more lines are too long

2
apps/www/src/public/registry/styles/default/navigation-menu.json
View File

@ -35,7 +35,7 @@
}, },
{ {
"name": "NavigationMenuViewport.vue", "name": "NavigationMenuViewport.vue",
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n NavigationMenuViewport,\n type NavigationMenuViewportProps,\n useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <div class=\"absolute left-0 top-full flex justify-center\">\n <NavigationMenuViewport\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',\n props.class,\n )\n \"\n />\n </div>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n NavigationMenuViewport,\n type NavigationMenuViewportProps,\n useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <div class=\"absolute left-0 top-full flex justify-center\">\n <NavigationMenuViewport\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]',\n props.class,\n )\n \"\n />\n </div>\n</template>\n"
}, },
{ {
"name": "index.ts", "name": "index.ts",

2
apps/www/src/public/registry/styles/default/select.json
View File

@ -11,7 +11,7 @@
}, },
{ {
"name": "SelectContent.vue", "name": "SelectContent.vue",
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n {\n position: 'popper',\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n 'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n position === 'popper'\n && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n props.class,\n )\n \"\n >\n <SelectScrollUpButton />\n <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')\">\n <slot />\n </SelectViewport>\n <SelectScrollDownButton />\n </SelectContent>\n </SelectPortal>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n {\n position: 'popper',\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n 'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n position === 'popper'\n && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n props.class,\n )\n \"\n >\n <SelectScrollUpButton />\n <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n <slot />\n </SelectViewport>\n <SelectScrollDownButton />\n </SelectContent>\n </SelectPortal>\n</template>\n"
}, },
{ {
"name": "SelectGroup.vue", "name": "SelectGroup.vue",

2
apps/www/src/public/registry/styles/default/toast.json
View File

@ -39,7 +39,7 @@
}, },
{ {
"name": "index.ts", "name": "index.ts",
"content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n 'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n {\n variants: {\n variant: {\n default: 'border bg-background text-foreground',\n destructive:\n 'destructive group border-destructive bg-destructive text-destructive-foreground',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n class?: HTMLAttributes['class']\n variant?: ToastVariants['variant']\n onOpenChange?: ((value: boolean) => void) | undefined\n}\n" "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n 'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--reka-toast-swipe-end-x] data-[swipe=move]:translate-x-[--reka-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n {\n variants: {\n variant: {\n default: 'border bg-background text-foreground',\n destructive:\n 'destructive group border-destructive bg-destructive text-destructive-foreground',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n class?: HTMLAttributes['class']\n variant?: ToastVariants['variant']\n onOpenChange?: ((value: boolean) => void) | undefined\n}\n"
}, },
{ {
"name": "use-toast.ts", "name": "use-toast.ts",

2
apps/www/src/public/registry/styles/new-york/auto-form.json
View File

@ -36,7 +36,7 @@
}, },
{ {
"name": "AutoFormFieldBoolean.vue", "name": "AutoFormFieldBoolean.vue",
"content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/new-york/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Switch } from '@/lib/registry/new-york/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n <FormItem>\n <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n <FormControl>\n <slot v-bind=\"slotProps\">\n <component\n :is=\"booleanComponent\"\n v-bind=\"{ ...slotProps.componentField }\"\n :disabled=\"disabled\"\n :checked=\"slotProps.componentField.modelValue\"\n @update:checked=\"slotProps.componentField['onUpdate:modelValue']\"\n />\n </slot>\n </FormControl>\n <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n </AutoFormLabel>\n </div>\n\n <FormDescription v-if=\"config?.description\">\n {{ config.description }}\n </FormDescription>\n <FormMessage />\n </FormItem>\n </FormField>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/new-york/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Switch } from '@/lib/registry/new-york/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n <FormItem>\n <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n <FormControl>\n <slot v-bind=\"slotProps\">\n <component\n :is=\"booleanComponent\"\n v-bind=\"{ ...slotProps.componentField }\"\n :disabled=\"disabled\"\n :modelValue=\"slotProps.componentField.modelValue\"\n @update:modelValue=\"slotProps.componentField['onUpdate:modelValue']\"\n />\n </slot>\n </FormControl>\n <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n </AutoFormLabel>\n </div>\n\n <FormDescription v-if=\"config?.description\">\n {{ config.description }}\n </FormDescription>\n <FormMessage />\n </FormItem>\n </FormField>\n</template>\n"
}, },
{ {
"name": "AutoFormFieldDate.vue", "name": "AutoFormFieldDate.vue",

2
apps/www/src/public/registry/styles/new-york/navigation-menu.json
View File

@ -35,7 +35,7 @@
}, },
{ {
"name": "NavigationMenuViewport.vue", "name": "NavigationMenuViewport.vue",
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n NavigationMenuViewport,\n type NavigationMenuViewportProps,\n useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <div class=\"absolute left-0 top-full flex justify-center\">\n <NavigationMenuViewport\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',\n props.class,\n )\n \"\n />\n </div>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n NavigationMenuViewport,\n type NavigationMenuViewportProps,\n useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <div class=\"absolute left-0 top-full flex justify-center\">\n <NavigationMenuViewport\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]',\n props.class,\n )\n \"\n />\n </div>\n</template>\n"
}, },
{ {
"name": "index.ts", "name": "index.ts",

2
apps/www/src/public/registry/styles/new-york/select.json
View File

@ -11,7 +11,7 @@
}, },
{ {
"name": "SelectContent.vue", "name": "SelectContent.vue",
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n {\n position: 'popper',\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n 'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n position === 'popper'\n && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n props.class,\n )\n \"\n >\n <SelectScrollUpButton />\n <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')\">\n <slot />\n </SelectViewport>\n <SelectScrollDownButton />\n </SelectContent>\n </SelectPortal>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n {\n position: 'popper',\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n 'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n position === 'popper'\n && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n props.class,\n )\n \"\n >\n <SelectScrollUpButton />\n <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n <slot />\n </SelectViewport>\n <SelectScrollDownButton />\n </SelectContent>\n </SelectPortal>\n</template>\n"
}, },
{ {
"name": "SelectGroup.vue", "name": "SelectGroup.vue",

2
apps/www/src/public/registry/styles/new-york/toast.json
View File

@ -39,7 +39,7 @@
}, },
{ {
"name": "index.ts", "name": "index.ts",
"content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n 'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n {\n variants: {\n variant: {\n default: 'border bg-background text-foreground',\n destructive:\n 'destructive group border-destructive bg-destructive text-destructive-foreground',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n class?: HTMLAttributes['class']\n variant?: ToastVariants['variant']\n onOpenChange?: ((value: boolean) => void) | undefined\n}\n" "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n 'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n {\n variants: {\n variant: {\n default: 'border bg-background text-foreground',\n destructive:\n 'destructive group border-destructive bg-destructive text-destructive-foreground',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n class?: HTMLAttributes['class']\n variant?: ToastVariants['variant']\n onOpenChange?: ((value: boolean) => void) | undefined\n}\n"
}, },
{ {
"name": "use-toast.ts", "name": "use-toast.ts",

8
apps/www/tailwind.config.js
View File

@ -75,18 +75,18 @@ export default {
keyframes: { keyframes: {
'accordion-down': { 'accordion-down': {
from: { height: 0 }, from: { height: 0 },
to: { height: 'var(--radix-accordion-content-height)' }, to: { height: 'var(--reka-accordion-content-height)' },
}, },
'accordion-up': { 'accordion-up': {
from: { height: 'var(--radix-accordion-content-height)' }, from: { height: 'var(--reka-accordion-content-height)' },
to: { height: 0 }, to: { height: 0 },
}, },
'collapsible-down': { 'collapsible-down': {
from: { height: 0 }, from: { height: 0 },
to: { height: 'var(--radix-collapsible-content-height)' }, to: { height: 'var(--reka-collapsible-content-height)' },
}, },
'collapsible-up': { 'collapsible-up': {
from: { height: 'var(--radix-collapsible-content-height)' }, from: { height: 'var(--reka-collapsible-content-height)' },
to: { height: 0 }, to: { height: 0 },
}, },
}, },

12
packages/cli/src/utils/templates.ts
View File

@ -30,10 +30,10 @@ module.exports = {
keyframes: { keyframes: {
"accordion-down": { "accordion-down": {
from: { height: 0 }, from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" }, to: { height: "var(--reka-accordion-content-height)" },
}, },
"accordion-up": { "accordion-up": {
from: { height: "var(--radix-accordion-content-height)" }, from: { height: "var(--reka-accordion-content-height)" },
to: { height: 0 }, to: { height: 0 },
}, },
}, },
@ -125,18 +125,18 @@ module.exports = {
keyframes: { keyframes: {
"accordion-down": { "accordion-down": {
from: { height: 0 }, from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" }, to: { height: "var(--reka-accordion-content-height)" },
}, },
"accordion-up": { "accordion-up": {
from: { height: "var(--radix-accordion-content-height)" }, from: { height: "var(--reka-accordion-content-height)" },
to: { height: 0 }, to: { height: 0 },
}, },
"collapsible-down": { "collapsible-down": {
from: { height: 0 }, from: { height: 0 },
to: { height: 'var(--radix-collapsible-content-height)' }, to: { height: 'var(--reka-collapsible-content-height)' },
}, },
"collapsible-up": { "collapsible-up": {
from: { height: 'var(--radix-collapsible-content-height)' }, from: { height: 'var(--reka-collapsible-content-height)' },
to: { height: 0 }, to: { height: 0 },
}, },
}, },

4
packages/cli/test/fixtures/nuxt/tailwind.config.js vendored
View File

@ -53,10 +53,10 @@ module.exports = {
keyframes: { keyframes: {
'accordion-down': { 'accordion-down': {
from: { height: 0 }, from: { height: 0 },
to: { height: 'var(--radix-accordion-content-height)' }, to: { height: 'var(--reka-accordion-content-height)' },
}, },
'accordion-up': { 'accordion-up': {
from: { height: 'var(--radix-accordion-content-height)' }, from: { height: 'var(--reka-accordion-content-height)' },
to: { height: 0 }, to: { height: 0 },
}, },
}, },

12
packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap
View File

@ -25,10 +25,10 @@ export default {
keyframes: { keyframes: {
"accordion-down": { "accordion-down": {
from: { height: 0 }, from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" }, to: { height: "var(--reka-accordion-content-height)" },
}, },
"accordion-up": { "accordion-up": {
from: { height: "var(--radix-accordion-content-height)" }, from: { height: "var(--reka-accordion-content-height)" },
to: { height: 0 }, to: { height: 0 },
}, },
}, },
@ -122,18 +122,18 @@ export default {
keyframes: { keyframes: {
"accordion-down": { "accordion-down": {
from: { height: 0 }, from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" }, to: { height: "var(--reka-accordion-content-height)" },
}, },
"accordion-up": { "accordion-up": {
from: { height: "var(--radix-accordion-content-height)" }, from: { height: "var(--reka-accordion-content-height)" },
to: { height: 0 }, to: { height: 0 },
}, },
"collapsible-down": { "collapsible-down": {
from: { height: 0 }, from: { height: 0 },
to: { height: 'var(--radix-collapsible-content-height)' }, to: { height: 'var(--reka-collapsible-content-height)' },
}, },
"collapsible-up": { "collapsible-up": {
from: { height: 'var(--radix-collapsible-content-height)' }, from: { height: 'var(--reka-collapsible-content-height)' },
to: { height: 0 }, to: { height: 0 },
}, },
}, },

8
packages/module/playground/tailwind.config.js
View File

@ -59,18 +59,18 @@ module.exports = {
keyframes: { keyframes: {
'accordion-down': { 'accordion-down': {
from: { height: 0 }, from: { height: 0 },
to: { height: 'var(--radix-accordion-content-height)' }, to: { height: 'var(--reka-accordion-content-height)' },
}, },
'accordion-up': { 'accordion-up': {
from: { height: 'var(--radix-accordion-content-height)' }, from: { height: 'var(--reka-accordion-content-height)' },
to: { height: 0 }, to: { height: 0 },
}, },
'collapsible-down': { 'collapsible-down': {
from: { height: 0 }, from: { height: 0 },
to: { height: 'var(--radix-collapsible-content-height)' }, to: { height: 'var(--reka-collapsible-content-height)' },
}, },
'collapsible-up': { 'collapsible-up': {
from: { height: 'var(--radix-collapsible-content-height)' }, from: { height: 'var(--reka-collapsible-content-height)' },
to: { height: 0 }, to: { height: 0 },
}, },
}, },