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

chore: bump radix-vue, update calendar examples

Browse Source
This commit is contained in:
Sadegh Barati 2024-04-11 17:16:34 +03:30
parent 4313dee765
commit 66ef839ea3
19 changed files with 85 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/www/package.json
View File

@ -33,7 +33,7 @@
"embla-carousel-vue": "^8.0.0",
"lucide-vue-next": "^0.359.0",
"magic-string": "^0.30.8",
"radix-vue": "^1.6.2",
"radix-vue": "^1.7.0",
"tailwindcss-animate": "^1.0.7",
"v-calendar": "^3.1.2",
"vaul-vue": "^0.1.0",

1
apps/www/src/examples/dashboard/components/DateRangePicker.vue
View File

@ -57,6 +57,7 @@ const value = ref({
:number-of-months="2"
initial-focus
:placeholder="value.start"
@update:start-value="(startDate) => value.start = startDate"
/>
</PopoverContent>
</Popover>

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

@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed, h, ref } from 'vue'
import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
import { toDate } from 'radix-vue'
import { toDate } from 'radix-vue/date'
import { Calendar as CalendarIcon } from 'lucide-vue-next'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
@ -69,7 +69,7 @@ const onSubmit = handleSubmit((values) => {
<input hidden>
</FormControl>
</PopoverTrigger>
<PopoverContent class="p-0">
<PopoverContent class="w-auto p-0">
<Calendar
v-model:placeholder="placeholder"
v-model="value"

15
apps/www/src/lib/registry/default/example/CalendarWithSelect.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts">
import { type HTMLAttributes, type Ref, computed, toRef } from 'vue'
import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, toDate, useForwardPropsEmits } from 'radix-vue'
import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'radix-vue'
import { createDecade, createYear, toDate } from 'radix-vue/date'
import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
import { useVModel } from '@vueuse/core'
import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/lib/registry/default/ui/calendar'
@ -34,11 +35,13 @@ const placeholder = useVModel(props, 'modelValue', emits, {
}) as Ref<DateValue>
const forwarded = useForwardPropsEmits(delegatedProps, emits)
const formatter = useDateFormatter('en')
</script>
<template>
<CalendarRoot
v-slot="{ getMonths, getYears, formatter, grid, weekDays }"
v-slot="{ date, grid, weekDays }"
v-model:placeholder="placeholder"
v-bind="forwarded"
:class="cn('rounded-md border p-3', props.class)"
@ -60,7 +63,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
</SelectTrigger>
<SelectContent class="max-h-[200px]">
<SelectItem
v-for="month in getMonths"
v-for="month in createYear({ dateObj: date })"
:key="month.toString()" :value="month.month.toString()"
>
{{ formatter.custom(toDate(month), { month: 'long' }) }}
@ -83,7 +86,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
</SelectTrigger>
<SelectContent class="max-h-[200px]">
<SelectItem
v-for="yearValue in getYears({ startIndex: -10, endIndex: 10 })"
v-for="yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })"
:key="yearValue.toString()" :value="yearValue.year.toString()"
>
{{ yearValue.year }}
@ -96,7 +99,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
<CalendarGrid v-for="month in grid" :key="month.value.toString()">
<CalendarGridHead>
<CalendarGridRow class="mb-1 grid w-full grid-cols-7">
<CalendarGridRow>
<CalendarHeadCell
v-for="day in weekDays" :key="day"
>
@ -105,7 +108,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
</CalendarGridRow>
</CalendarGridHead>
<CalendarGridBody class="grid">
<CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="grid grid-cols-7">
<CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
<CalendarCell
v-for="weekDate in weekDates"
:key="weekDate.toString()"

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

@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed, h, ref } from 'vue'
import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
import { toDate } from 'radix-vue'
import { toDate } from 'radix-vue/date'
import { Calendar as CalendarIcon } from 'lucide-vue-next'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
@ -72,7 +72,7 @@ const onSubmit = handleSubmit((values) => {
<input hidden>
</FormControl>
</PopoverTrigger>
<PopoverContent class="p-0">
<PopoverContent class="w-auto p-0">
<Calendar
v-model:placeholder="placeholder"
v-model="value"

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

@ -46,7 +46,7 @@ const value = ref({
</Button>
</PopoverTrigger>
<PopoverContent class="w-auto p-0">
<RangeCalendar v-model="value" initial-focus :number-of-months="2" :placeholder="value?.start" />
<RangeCalendar v-model="value" initial-focus :number-of-months="2" :placeholder="value?.start" @update:start-value="(startDate) => value.start = startDate" />
</PopoverContent>
</Popover>
</template>

8
apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
View File

@ -29,10 +29,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<CalendarNextButton />
</CalendarHeader>
<div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
<div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
<CalendarGrid v-for="month in grid" :key="month.value.toString()">
<CalendarGridHead>
<CalendarGridRow class="mb-1 grid w-full grid-cols-7">
<CalendarGridRow>
<CalendarHeadCell
v-for="day in weekDays" :key="day"
>
@ -40,8 +40,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
</CalendarHeadCell>
</CalendarGridRow>
</CalendarGridHead>
<CalendarGridBody class="grid">
<CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="grid grid-cols-7">
<CalendarGridBody>
<CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
<CalendarCell
v-for="weekDate in weekDates"
:key="weekDate.toString()"

2
apps/www/src/lib/registry/default/ui/calendar/CalendarHeadCell.vue
View File

@ -15,7 +15,7 @@ const forwardedProps = useForwardProps(delegatedProps)
</script>
<template>
<CalendarHeadCell :class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
<CalendarHeadCell :class="cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
<slot />
</CalendarHeadCell>
</template>

8
apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendar.vue
View File

@ -29,10 +29,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<RangeCalendarNextButton />
</RangeCalendarHeader>
<div class="mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
<div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
<RangeCalendarGrid v-for="month in grid" :key="month.value.toString()">
<RangeCalendarGridHead>
<RangeCalendarGridRow class="mb-1 grid w-full grid-cols-7">
<RangeCalendarGridRow>
<RangeCalendarHeadCell
v-for="day in weekDays" :key="day"
>
@ -40,8 +40,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
</RangeCalendarHeadCell>
</RangeCalendarGridRow>
</RangeCalendarGridHead>
<RangeCalendarGridBody class="grid">
<RangeCalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="grid grid-cols-7">
<RangeCalendarGridBody>
<RangeCalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
<RangeCalendarCell
v-for="weekDate in weekDates"
:key="weekDate.toString()"

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

@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed, h, ref } from 'vue'
import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
import { toDate } from 'radix-vue'
import { toDate } from 'radix-vue/date'
import { CalendarIcon } from '@radix-icons/vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
@ -69,7 +69,7 @@ const onSubmit = handleSubmit((values) => {
<input hidden>
</FormControl>
</PopoverTrigger>
<PopoverContent class="p-0">
<PopoverContent class="w-auto p-0">
<Calendar
v-model:placeholder="placeholder"
v-model="value"

15
apps/www/src/lib/registry/new-york/example/CalendarWithSelect.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts">
import { type HTMLAttributes, type Ref, computed, toRef } from 'vue'
import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, toDate, useForwardPropsEmits } from 'radix-vue'
import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'radix-vue'
import { createDecade, createYear, toDate } from 'radix-vue/date'
import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
import { useVModel } from '@vueuse/core'
import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/lib/registry/new-york/ui/calendar'
@ -34,11 +35,13 @@ const placeholder = useVModel(props, 'modelValue', emits, {
}) as Ref<DateValue>
const forwarded = useForwardPropsEmits(delegatedProps, emits)
const formatter = useDateFormatter('en')
</script>
<template>
<CalendarRoot
v-slot="{ getMonths, getYears, formatter, grid, weekDays }"
v-slot="{ date, grid, weekDays }"
v-model:placeholder="placeholder"
v-bind="forwarded"
:class="cn('rounded-md border p-3', props.class)"
@ -60,7 +63,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
</SelectTrigger>
<SelectContent class="max-h-[200px]">
<SelectItem
v-for="month in getMonths"
v-for="month in createYear({ dateObj: date })"
:key="month.toString()" :value="month.month.toString()"
>
{{ formatter.custom(toDate(month), { month: 'long' }) }}
@ -83,7 +86,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
</SelectTrigger>
<SelectContent class="max-h-[200px]">
<SelectItem
v-for="yearValue in getYears({ startIndex: -10, endIndex: 10 })"
v-for="yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })"
:key="yearValue.toString()" :value="yearValue.year.toString()"
>
{{ yearValue.year }}
@ -96,7 +99,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
<CalendarGrid v-for="month in grid" :key="month.value.toString()">
<CalendarGridHead>
<CalendarGridRow class="mb-1 grid w-full grid-cols-7">
<CalendarGridRow>
<CalendarHeadCell
v-for="day in weekDays" :key="day"
>
@ -105,7 +108,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
</CalendarGridRow>
</CalendarGridHead>
<CalendarGridBody class="grid">
<CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="grid grid-cols-7">
<CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
<CalendarCell
v-for="weekDate in weekDates"
:key="weekDate.toString()"

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

@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed, h, ref } from 'vue'
import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
import { toDate } from 'radix-vue'
import { toDate } from 'radix-vue/date'
import { CalendarIcon } from '@radix-icons/vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
@ -72,7 +72,7 @@ const onSubmit = handleSubmit((values) => {
<input hidden>
</FormControl>
</PopoverTrigger>
<PopoverContent class="p-0">
<PopoverContent class="w-auto p-0">
<Calendar
v-model:placeholder="placeholder"
v-model="value"

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

@ -46,7 +46,7 @@ const value = ref({
</Button>
</PopoverTrigger>
<PopoverContent class="w-auto p-0">
<RangeCalendar v-model="value" initial-focus :number-of-months="2" :placeholder="value?.start" />
<RangeCalendar v-model="value" initial-focus :number-of-months="2" :placeholder="value?.start" @update:start-value="(startDate) => value.start = startDate" />
</PopoverContent>
</Popover>
</template>

8
apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
View File

@ -29,10 +29,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<CalendarNextButton />
</CalendarHeader>
<div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
<div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
<CalendarGrid v-for="month in grid" :key="month.value.toString()">
<CalendarGridHead>
<CalendarGridRow class="mb-1 grid w-full grid-cols-7">
<CalendarGridRow>
<CalendarHeadCell
v-for="day in weekDays" :key="day"
>
@ -40,8 +40,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
</CalendarHeadCell>
</CalendarGridRow>
</CalendarGridHead>
<CalendarGridBody class="grid">
<CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="grid grid-cols-7">
<CalendarGridBody>
<CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
<CalendarCell
v-for="weekDate in weekDates"
:key="weekDate.toString()"

2
apps/www/src/lib/registry/new-york/ui/calendar/CalendarCell.vue
View File

@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
<template>
<CalendarCell
:class="cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50', props.class)"
:class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50', props.class)"
v-bind="forwardedProps"
>
<slot />

8
apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendar.vue
View File

@ -29,10 +29,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<RangeCalendarNextButton />
</RangeCalendarHeader>
<div class="mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
<div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
<RangeCalendarGrid v-for="month in grid" :key="month.value.toString()">
<RangeCalendarGridHead>
<RangeCalendarGridRow class="mb-1 grid w-full grid-cols-7">
<RangeCalendarGridRow>
<RangeCalendarHeadCell
v-for="day in weekDays" :key="day"
>
@ -40,8 +40,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
</RangeCalendarHeadCell>
</RangeCalendarGridRow>
</RangeCalendarGridHead>
<RangeCalendarGridBody class="grid">
<RangeCalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="grid grid-cols-7">
<RangeCalendarGridBody>
<RangeCalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
<RangeCalendarCell
v-for="weekDate in weekDates"
:key="weekDate.toString()"

2
apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCell.vue
View File

@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
<template>
<RangeCalendarCell
:class="cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-month])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)"
:class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-month])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)"
v-bind="forwardedProps"
>
<slot />

1
apps/www/tsconfig.json
View File

@ -3,7 +3,6 @@
"compilerOptions": {
"lib": ["ESNext", "DOM", "DOM.Iterable"],
"baseUrl": ".",
"moduleResolution": "Node",
"paths": {
"@/*": ["./src/*"]
},

39
pnpm-lock.yaml
View File

@ -96,8 +96,8 @@ importers:
specifier: ^0.30.8
version: 0.30.8
radix-vue:
specifier: ^1.6.2
version: 1.6.2(vue@3.4.21)
specifier: ^1.7.0
version: 1.7.0(vue@3.4.21)
tailwindcss-animate:
specifier: ^1.0.7
version: 1.0.7(tailwindcss@3.4.1)
@ -3784,6 +3784,10 @@ packages:
engines: {node: '>=12'}
dev: false
/@tanstack/virtual-core@3.2.0:
resolution: {integrity: sha512-P5XgYoAw/vfW65byBbJQCw+cagdXDT/qH6wmABiLt4v4YBT2q2vqCOhihe+D1Nt325F/S/0Tkv6C5z0Lv+VBQQ==}
dev: false
/@tanstack/vue-table@8.14.0(vue@3.4.21):
resolution: {integrity: sha512-mQWgUe+cw2YybTC68x54XkMCeALW+NwO8FYWUripqfJUiWm9haR4tWlTWUU81d/3GPb7chAKaqwQ/9j2u6dXYw==}
engines: {node: '>=12'}
@ -3794,6 +3798,15 @@ packages:
vue: 3.4.21(typescript@5.4.2)
dev: false
/@tanstack/vue-virtual@3.2.0(vue@3.4.21):
resolution: {integrity: sha512-KbmQVvw1k5Js2Fk4DJw9aDxFT5+e8a2Ba4UBJAFCRnWBCnzd3NlmEHI9JCeLv1tYDZ/iHwwv+Z9Le0BENIEP8A==}
peerDependencies:
vue: ^2.7.0 || ^3.0.0
dependencies:
'@tanstack/virtual-core': 3.2.0
vue: 3.4.21(typescript@5.4.2)
dev: false
/@trysound/sax@0.2.0:
resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
engines: {node: '>=10.13.0'}
@ -12231,6 +12244,26 @@ packages:
- '@vue/composition-api'
dev: false
/radix-vue@1.7.0(vue@3.4.21):
resolution: {integrity: sha512-lyAllebKbEGECEIKdC74gjOxgCtHjGKbINH/RUOP6p0Qk2HOsV06WGONStDl+c3FZKzoiH0rhPSI85Y6gKhMnw==}
peerDependencies:
vue: '>= 3.2.0'
dependencies:
'@floating-ui/dom': 1.6.1
'@floating-ui/vue': 1.0.6(vue@3.4.21)
'@internationalized/date': 3.5.2
'@tanstack/vue-virtual': 3.2.0(vue@3.4.21)
'@vueuse/core': 10.9.0(vue@3.4.21)
'@vueuse/shared': 10.9.0(vue@3.4.21)
aria-hidden: 1.2.4
defu: 6.1.4
fast-deep-equal: 3.1.3
nanoid: 5.0.6
vue: 3.4.21(typescript@5.4.2)
transitivePeerDependencies:
- '@vue/composition-api'
dev: false
/radix3@1.1.1:
resolution: {integrity: sha512-yUUd5VTiFtcMEx0qFUxGAv5gbMc1un4RvEO1JZdP7ZUl/RHygZK6PknIKntmQRZxnMY3ZXD2ISaw1ij8GYW1yg==}
dev: true
@ -14229,7 +14262,7 @@ packages:
resolution: {integrity: sha512-3PYWMbN3cSdsciv3fzewskxZFnX61PYq1uNsbvizXDo/8sN4SMrWkYDqWaPdTD3GTEm6wpx7j5flRLg7A5ZXbQ==}
dependencies:
'@vueuse/core': 10.9.0(vue@3.4.21)
radix-vue: 1.6.2(vue@3.4.21)
radix-vue: 1.7.0(vue@3.4.21)
vue: 3.4.21(typescript@5.4.2)
transitivePeerDependencies:
- '@vue/composition-api'