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

chore: build registry

Browse Source
This commit is contained in:
Sadegh Barati 2024-04-11 17:34:17 +03:30
parent 821cfeb28b
commit cf81f9d846
7 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,6 +48,9 @@ const value = ref({
{{ df.format(value.start.toDate(getLocalTimeZone())) }} {{ df.format(value.start.toDate(getLocalTimeZone())) }}
</template> </template>
</template> </template>
<template v-else>
Pick a date
</template>
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent class="w-auto p-0" align="end"> <PopoverContent class="w-auto p-0" align="end">

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

@ -43,6 +43,9 @@ const value = ref({
{{ df.format(value.start.toDate(getLocalTimeZone())) }} {{ df.format(value.start.toDate(getLocalTimeZone())) }}
</template> </template>
</template> </template>
<template v-else>
Pick a date
</template>
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent class="w-auto p-0"> <PopoverContent class="w-auto p-0">

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

@ -43,6 +43,9 @@ const value = ref({
{{ df.format(value.start.toDate(getLocalTimeZone())) }} {{ df.format(value.start.toDate(getLocalTimeZone())) }}
</template> </template>
</template> </template>
<template v-else>
Pick a date
</template>
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent class="w-auto p-0"> <PopoverContent class="w-auto p-0">

4
apps/www/src/public/registry/styles/default/calendar.json
View File

@ -8,7 +8,7 @@
"files": [ "files": [
{ {
"name": "Calendar.vue", "name": "Calendar.vue",
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\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 <CalendarRoot\n v-slot=\"{ grid, weekDays }\"\n :class=\"cn('p-3', props.class)\"\n v-bind=\"forwarded\"\n >\n <CalendarHeader>\n <CalendarPrevButton />\n <CalendarHeading />\n <CalendarNextButton />\n </CalendarHeader>\n\n <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n <CalendarGridHead>\n <CalendarGridRow class=\"mb-1 grid w-full grid-cols-7\">\n <CalendarHeadCell\n v-for=\"day in weekDays\" :key=\"day\"\n >\n {{ day }}\n </CalendarHeadCell>\n </CalendarGridRow>\n </CalendarGridHead>\n <CalendarGridBody class=\"grid\">\n <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"grid grid-cols-7\">\n <CalendarCell\n v-for=\"weekDate in weekDates\"\n :key=\"weekDate.toString()\"\n :date=\"weekDate\"\n >\n <CalendarCellTrigger\n :day=\"weekDate\"\n :month=\"month.value\"\n />\n </CalendarCell>\n </CalendarGridRow>\n </CalendarGridBody>\n </CalendarGrid>\n </div>\n </CalendarRoot>\n</template>\n" "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\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 <CalendarRoot\n v-slot=\"{ grid, weekDays }\"\n :class=\"cn('p-3', props.class)\"\n v-bind=\"forwarded\"\n >\n <CalendarHeader>\n <CalendarPrevButton />\n <CalendarHeading />\n <CalendarNextButton />\n </CalendarHeader>\n\n <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n <CalendarGridHead>\n <CalendarGridRow>\n <CalendarHeadCell\n v-for=\"day in weekDays\" :key=\"day\"\n >\n {{ day }}\n </CalendarHeadCell>\n </CalendarGridRow>\n </CalendarGridHead>\n <CalendarGridBody>\n <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n <CalendarCell\n v-for=\"weekDate in weekDates\"\n :key=\"weekDate.toString()\"\n :date=\"weekDate\"\n >\n <CalendarCellTrigger\n :day=\"weekDate\"\n :month=\"month.value\"\n />\n </CalendarCell>\n </CalendarGridRow>\n </CalendarGridBody>\n </CalendarGrid>\n </div>\n </CalendarRoot>\n</template>\n"
}, },
{ {
"name": "CalendarCell.vue", "name": "CalendarCell.vue",
@ -36,7 +36,7 @@
}, },
{ {
"name": "CalendarHeadCell.vue", "name": "CalendarHeadCell.vue",
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarHeadCellProps & { 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 <CalendarHeadCell :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n <slot />\n </CalendarHeadCell>\n</template>\n" "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarHeadCellProps & { 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 <CalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n <slot />\n </CalendarHeadCell>\n</template>\n"
}, },
{ {
"name": "CalendarHeader.vue", "name": "CalendarHeader.vue",

2
apps/www/src/public/registry/styles/default/range-calendar.json
View File

@ -8,7 +8,7 @@
"files": [ "files": [
{ {
"name": "RangeCalendar.vue", "name": "RangeCalendar.vue",
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\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 <RangeCalendarRoot\n v-slot=\"{ grid, weekDays }\"\n :class=\"cn('p-3', props.class)\"\n v-bind=\"forwarded\"\n >\n <RangeCalendarHeader>\n <RangeCalendarPrevButton />\n <RangeCalendarHeading />\n <RangeCalendarNextButton />\n </RangeCalendarHeader>\n\n <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n <RangeCalendarGridHead>\n <RangeCalendarGridRow class=\"mb-1 grid w-full grid-cols-7\">\n <RangeCalendarHeadCell\n v-for=\"day in weekDays\" :key=\"day\"\n >\n {{ day }}\n </RangeCalendarHeadCell>\n </RangeCalendarGridRow>\n </RangeCalendarGridHead>\n <RangeCalendarGridBody class=\"grid\">\n <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"grid grid-cols-7\">\n <RangeCalendarCell\n v-for=\"weekDate in weekDates\"\n :key=\"weekDate.toString()\"\n :date=\"weekDate\"\n >\n <RangeCalendarCellTrigger\n :day=\"weekDate\"\n :month=\"month.value\"\n />\n </RangeCalendarCell>\n </RangeCalendarGridRow>\n </RangeCalendarGridBody>\n </RangeCalendarGrid>\n </div>\n </RangeCalendarRoot>\n</template>\n" "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\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 <RangeCalendarRoot\n v-slot=\"{ grid, weekDays }\"\n :class=\"cn('p-3', props.class)\"\n v-bind=\"forwarded\"\n >\n <RangeCalendarHeader>\n <RangeCalendarPrevButton />\n <RangeCalendarHeading />\n <RangeCalendarNextButton />\n </RangeCalendarHeader>\n\n <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n <RangeCalendarGridHead>\n <RangeCalendarGridRow>\n <RangeCalendarHeadCell\n v-for=\"day in weekDays\" :key=\"day\"\n >\n {{ day }}\n </RangeCalendarHeadCell>\n </RangeCalendarGridRow>\n </RangeCalendarGridHead>\n <RangeCalendarGridBody>\n <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n <RangeCalendarCell\n v-for=\"weekDate in weekDates\"\n :key=\"weekDate.toString()\"\n :date=\"weekDate\"\n >\n <RangeCalendarCellTrigger\n :day=\"weekDate\"\n :month=\"month.value\"\n />\n </RangeCalendarCell>\n </RangeCalendarGridRow>\n </RangeCalendarGridBody>\n </RangeCalendarGrid>\n </div>\n </RangeCalendarRoot>\n</template>\n"
}, },
{ {
"name": "RangeCalendarCell.vue", "name": "RangeCalendarCell.vue",

4
apps/www/src/public/registry/styles/new-york/calendar.json
View File

@ -8,11 +8,11 @@
"files": [ "files": [
{ {
"name": "Calendar.vue", "name": "Calendar.vue",
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\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 <CalendarRoot\n v-slot=\"{ grid, weekDays }\"\n :class=\"cn('p-3', props.class)\"\n v-bind=\"forwarded\"\n >\n <CalendarHeader>\n <CalendarPrevButton />\n <CalendarHeading />\n <CalendarNextButton />\n </CalendarHeader>\n\n <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n <CalendarGridHead>\n <CalendarGridRow class=\"mb-1 grid w-full grid-cols-7\">\n <CalendarHeadCell\n v-for=\"day in weekDays\" :key=\"day\"\n >\n {{ day }}\n </CalendarHeadCell>\n </CalendarGridRow>\n </CalendarGridHead>\n <CalendarGridBody class=\"grid\">\n <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"grid grid-cols-7\">\n <CalendarCell\n v-for=\"weekDate in weekDates\"\n :key=\"weekDate.toString()\"\n :date=\"weekDate\"\n >\n <CalendarCellTrigger\n :day=\"weekDate\"\n :month=\"month.value\"\n />\n </CalendarCell>\n </CalendarGridRow>\n </CalendarGridBody>\n </CalendarGrid>\n </div>\n </CalendarRoot>\n</template>\n" "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\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 <CalendarRoot\n v-slot=\"{ grid, weekDays }\"\n :class=\"cn('p-3', props.class)\"\n v-bind=\"forwarded\"\n >\n <CalendarHeader>\n <CalendarPrevButton />\n <CalendarHeading />\n <CalendarNextButton />\n </CalendarHeader>\n\n <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n <CalendarGridHead>\n <CalendarGridRow>\n <CalendarHeadCell\n v-for=\"day in weekDays\" :key=\"day\"\n >\n {{ day }}\n </CalendarHeadCell>\n </CalendarGridRow>\n </CalendarGridHead>\n <CalendarGridBody>\n <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n <CalendarCell\n v-for=\"weekDate in weekDates\"\n :key=\"weekDate.toString()\"\n :date=\"weekDate\"\n >\n <CalendarCellTrigger\n :day=\"weekDate\"\n :month=\"month.value\"\n />\n </CalendarCell>\n </CalendarGridRow>\n </CalendarGridBody>\n </CalendarGrid>\n </div>\n </CalendarRoot>\n</template>\n"
}, },
{ {
"name": "CalendarCell.vue", "name": "CalendarCell.vue",
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarCellProps & { 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 <CalendarCell\n :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)\"\n v-bind=\"forwardedProps\"\n >\n <slot />\n </CalendarCell>\n</template>\n" "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarCellProps & { 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 <CalendarCell\n :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)\"\n v-bind=\"forwardedProps\"\n >\n <slot />\n </CalendarCell>\n</template>\n"
}, },
{ {
"name": "CalendarCellTrigger.vue", "name": "CalendarCellTrigger.vue",

4
apps/www/src/public/registry/styles/new-york/range-calendar.json
View File

@ -8,11 +8,11 @@
"files": [ "files": [
{ {
"name": "RangeCalendar.vue", "name": "RangeCalendar.vue",
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\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 <RangeCalendarRoot\n v-slot=\"{ grid, weekDays }\"\n :class=\"cn('p-3', props.class)\"\n v-bind=\"forwarded\"\n >\n <RangeCalendarHeader>\n <RangeCalendarPrevButton />\n <RangeCalendarHeading />\n <RangeCalendarNextButton />\n </RangeCalendarHeader>\n\n <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n <RangeCalendarGridHead>\n <RangeCalendarGridRow class=\"mb-1 grid w-full grid-cols-7\">\n <RangeCalendarHeadCell\n v-for=\"day in weekDays\" :key=\"day\"\n >\n {{ day }}\n </RangeCalendarHeadCell>\n </RangeCalendarGridRow>\n </RangeCalendarGridHead>\n <RangeCalendarGridBody class=\"grid\">\n <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"grid grid-cols-7\">\n <RangeCalendarCell\n v-for=\"weekDate in weekDates\"\n :key=\"weekDate.toString()\"\n :date=\"weekDate\"\n >\n <RangeCalendarCellTrigger\n :day=\"weekDate\"\n :month=\"month.value\"\n />\n </RangeCalendarCell>\n </RangeCalendarGridRow>\n </RangeCalendarGridBody>\n </RangeCalendarGrid>\n </div>\n </RangeCalendarRoot>\n</template>\n" "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\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 <RangeCalendarRoot\n v-slot=\"{ grid, weekDays }\"\n :class=\"cn('p-3', props.class)\"\n v-bind=\"forwarded\"\n >\n <RangeCalendarHeader>\n <RangeCalendarPrevButton />\n <RangeCalendarHeading />\n <RangeCalendarNextButton />\n </RangeCalendarHeader>\n\n <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n <RangeCalendarGridHead>\n <RangeCalendarGridRow>\n <RangeCalendarHeadCell\n v-for=\"day in weekDays\" :key=\"day\"\n >\n {{ day }}\n </RangeCalendarHeadCell>\n </RangeCalendarGridRow>\n </RangeCalendarGridHead>\n <RangeCalendarGridBody>\n <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n <RangeCalendarCell\n v-for=\"weekDate in weekDates\"\n :key=\"weekDate.toString()\"\n :date=\"weekDate\"\n >\n <RangeCalendarCellTrigger\n :day=\"weekDate\"\n :month=\"month.value\"\n />\n </RangeCalendarCell>\n </RangeCalendarGridRow>\n </RangeCalendarGridBody>\n </RangeCalendarGrid>\n </div>\n </RangeCalendarRoot>\n</template>\n"
}, },
{ {
"name": "RangeCalendarCell.vue", "name": "RangeCalendarCell.vue",
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarCellProps & { 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 <RangeCalendarCell\n :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)\"\n v-bind=\"forwardedProps\"\n >\n <slot />\n </RangeCalendarCell>\n</template>\n" "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarCellProps & { 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 <RangeCalendarCell\n :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)\"\n v-bind=\"forwardedProps\"\n >\n <slot />\n </RangeCalendarCell>\n</template>\n"
}, },
{ {
"name": "RangeCalendarCellTrigger.vue", "name": "RangeCalendarCellTrigger.vue",