@brumaombra/ui-vintage 0.7.7 → 0.7.9

package/src/components/ui/calendar/Calendar.vue

@@ -1,139 +1,185 @@
-<script lang="ts" setup>
-import type { CalendarRootEmits, CalendarRootProps, DateValue } from "reka-ui"
-import type { HTMLAttributes, Ref } from "vue"
-import type { LayoutTypes } from "."
-import { getLocalTimeZone, today } from "@internationalized/date"
-import { createReusableTemplate, reactiveOmit, useVModel } from "@vueuse/core"
-import { CalendarRoot, useDateFormatter, useForwardPropsEmits } from "reka-ui"
-import { createYear, createYearRange, toDate } from "reka-ui/date"
-import { computed, toRaw } from "vue"
-import { cn } from "../../../lib/utils"
-import { NativeSelect, NativeSelectOption } from '../native-select'
-import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from "."
+<script setup lang="ts">
+import type { CalendarRootEmits, CalendarRootProps, DateValue } from 'reka-ui';
+import type { HTMLAttributes, Ref } from 'vue';
+import type { LayoutTypes } from '.';
+import { getLocalTimeZone, today } from '@internationalized/date';
+import { createReusableTemplate, reactiveOmit, useVModel } from '@vueuse/core';
+import { CalendarRoot, useDateFormatter, useForwardPropsEmits } from 'reka-ui';
+import { createYear, createYearRange, toDate } from 'reka-ui/date';
+import { computed, toRaw } from 'vue';
+import { cn } from '../../../lib/utils';
+import { NativeSelect, NativeSelectOption } from '../native-select';
+import {
+    CalendarCell,
+    CalendarCellTrigger,
+    CalendarGrid,
+    CalendarGridBody,
+    CalendarGridHead,
+    CalendarGridRow,
+    CalendarHeadCell,
+    CalendarHeader,
+    CalendarHeading,
+    CalendarNextButton,
+    CalendarPrevButton,
+} from '.';
 
-const props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes["class"], layout?: LayoutTypes, yearRange?: DateValue[] }>(), {
-  modelValue: undefined,
-  layout: undefined,
-})
-const emits = defineEmits<CalendarRootEmits>()
+// Props
+const props = withDefaults(defineProps<CalendarRootProps & {
+    class?: HTMLAttributes['class'];
+    layout?: LayoutTypes;
+    yearRange?: DateValue[];
+}>(), {
+    modelValue: undefined,
+    layout: undefined
+});
 
-const delegatedProps = reactiveOmit(props, "class", "layout", "placeholder")
+// Emits
+const emits = defineEmits<CalendarRootEmits>();
 
-const placeholder = useVModel(props, "placeholder", emits, {
-  passive: true,
-  defaultValue: props.defaultPlaceholder ?? today(getLocalTimeZone()),
-}) as Ref<DateValue>
+const delegatedProps = reactiveOmit(props, 'class', 'layout', 'placeholder');
 
-const formatter = useDateFormatter(props.locale ?? "en")
+const placeholder = useVModel(props, 'placeholder', emits, {
+    passive: true,
+    defaultValue: props.defaultPlaceholder ?? today(getLocalTimeZone()),
+}) as Ref<DateValue>;
+
+const formatter = useDateFormatter(props.locale ?? 'en');
 
 const yearRange = computed(() => {
-  return props.yearRange ?? createYearRange({
-    start: props?.minValue ?? (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone()))
-      .cycle("year", -100),
+    return (
+        props.yearRange ??
+        createYearRange({
+            start:
+                props?.minValue ??
+                (
+                    toRaw(props.placeholder) ??
+                    props.defaultPlaceholder ??
+                    today(getLocalTimeZone())
+                ).cycle('year', -100),
 
-    end: props?.maxValue ?? (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone()))
-      .cycle("year", 10),
-  })
-})
+            end:
+                props?.maxValue ??
+                (
+                    toRaw(props.placeholder) ??
+                    props.defaultPlaceholder ??
+                    today(getLocalTimeZone())
+                ).cycle('year', 10),
+        })
+    );
+});
 
-const [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate<{ date: DateValue }>()
-const [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate<{ date: DateValue }>()
+const [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate<{
+    date: DateValue;
+}>();
+const [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate<{
+    date: DateValue;
+}>();
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DefineMonthTemplate v-slot="{ date }">
-    <div class="**:data-[slot=native-select-icon]:right-1">
-      <div class="relative h-10 rounded border border-(--border-light) bg-(--button-secondary-light) transition-all duration-300 ease-in-out hover:border-(--border-hover-light) focus-within:border-(--border-hover-light) dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:hover:border-(--border-hover-dark) dark:focus-within:border-(--border-hover-dark)">
-        <div class="absolute inset-0 z-10 flex h-full items-center text-sm pl-2 pointer-events-none">
-          {{ formatter.custom(toDate(date), { month: 'short' }) }}
+    <DefineMonthTemplate v-slot="{ date }">
+        <div class="**:data-[slot=native-select-icon]:right-1">
+            <div class="relative h-10 rounded border border-(--border-light) bg-(--button-secondary-light) transition-all duration-300 ease-in-out hover:border-(--border-hover-light) focus-within:border-(--border-hover-light) dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:hover:border-(--border-hover-dark) dark:focus-within:border-(--border-hover-dark)">
+                <div class="absolute inset-0 z-10 flex h-full items-center text-sm pl-2 pointer-events-none">
+                    {{ formatter.custom(toDate(date), { month: 'short' }) }}
+                </div>
+                <NativeSelect class="relative z-20 h-full min-h-0 w-23 rounded-none border-0 bg-transparent pl-2 pr-6 text-xs font-semibold text-transparent shadow-none transition-all duration-300 ease-in-out outline-none ring-0 focus-visible:border-0 focus-visible:ring-0 dark:bg-transparent sm:text-sm" :model-value="date.month" @change="
+                    (e: Event) => {
+                        placeholder = placeholder.set({
+                            month: Number((e?.target as any)?.value),
+                        });
+                    }
+                ">
+                    <NativeSelectOption v-for="month in createYear({ dateObj: date })" :key="month.toString()" :value="month.month" :selected="date.month === month.month">
+                        {{
+                            formatter.custom(toDate(month), { month: 'short' })
+                        }}
+                    </NativeSelectOption>
+                </NativeSelect>
+            </div>
         </div>
-        <NativeSelect class="relative z-20 h-full min-h-0 w-[92px] rounded-none border-0 bg-transparent pl-2 pr-6 text-xs font-semibold text-transparent shadow-none transition-all duration-300 ease-in-out outline-none ring-0 focus-visible:border-0 focus-visible:ring-0 dark:bg-transparent sm:text-sm" :model-value="date.month" @change="(e: Event) => {
-          placeholder = placeholder.set({
-            month: Number((e?.target as any)?.value),
-          })
-        }">
-          <NativeSelectOption v-for="(month) in createYear({ dateObj: date })" :key="month.toString()" :value="month.month" :selected="date.month === month.month">
-            {{ formatter.custom(toDate(month), { month: 'short' }) }}
-          </NativeSelectOption>
-        </NativeSelect>
-      </div>
-    </div>
-  </DefineMonthTemplate>
+    </DefineMonthTemplate>
 
-  <DefineYearTemplate v-slot="{ date }">
-    <div class="**:data-[slot=native-select-icon]:right-1">
-      <div class="relative h-10 rounded border border-(--border-light) bg-(--button-secondary-light) transition-all duration-300 ease-in-out hover:border-(--border-hover-light) focus-within:border-(--border-hover-light) dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:hover:border-(--border-hover-dark) dark:focus-within:border-(--border-hover-dark)">
-        <div class="absolute inset-0 z-10 flex h-full items-center text-sm pl-2 pointer-events-none">
-          {{ formatter.custom(toDate(date), { year: 'numeric' }) }}
+    <DefineYearTemplate v-slot="{ date }">
+        <div class="**:data-[slot=native-select-icon]:right-1">
+            <div class="relative h-10 rounded border border-(--border-light) bg-(--button-secondary-light) transition-all duration-300 ease-in-out hover:border-(--border-hover-light) focus-within:border-(--border-hover-light) dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:hover:border-(--border-hover-dark) dark:focus-within:border-(--border-hover-dark)">
+                <div class="absolute inset-0 z-10 flex h-full items-center text-sm pl-2 pointer-events-none">
+                    {{ formatter.custom(toDate(date), { year: 'numeric' }) }}
+                </div>
+                <NativeSelect class="relative z-20 h-full min-h-0 w-24 rounded-none border-0 bg-transparent pl-2 pr-6 text-xs font-semibold text-transparent shadow-none transition-all duration-300 ease-in-out outline-none ring-0 focus-visible:border-0 focus-visible:ring-0 dark:bg-transparent sm:text-sm" :model-value="date.year" @change="
+                    (e: Event) => {
+                        placeholder = placeholder.set({
+                            year: Number((e?.target as any)?.value),
+                        });
+                    }
+                ">
+                    <NativeSelectOption v-for="year in yearRange" :key="year.toString()" :value="year.year" :selected="date.year === year.year">
+                        {{
+                            formatter.custom(toDate(year), { year: 'numeric' })
+                        }}
+                    </NativeSelectOption>
+                </NativeSelect>
+            </div>
         </div>
-        <NativeSelect class="relative z-20 h-full min-h-0 w-[96px] rounded-none border-0 bg-transparent pl-2 pr-6 text-xs font-semibold text-transparent shadow-none transition-all duration-300 ease-in-out outline-none ring-0 focus-visible:border-0 focus-visible:ring-0 dark:bg-transparent sm:text-sm" :model-value="date.year" @change="(e: Event) => {
-          placeholder = placeholder.set({
-            year: Number((e?.target as any)?.value),
-          })
-        }">
-          <NativeSelectOption v-for="(year) in yearRange" :key="year.toString()" :value="year.year" :selected="date.year === year.year">
-            {{ formatter.custom(toDate(year), { year: 'numeric' }) }}
-          </NativeSelectOption>
-        </NativeSelect>
-      </div>
-    </div>
-  </DefineYearTemplate>
+    </DefineYearTemplate>
 
-  <CalendarRoot v-slot="{ grid, weekDays, date }" v-bind="forwarded" v-model:placeholder="placeholder" data-slot="calendar" :class="cn('p-3', props.class)">
-    <CalendarHeader class="pt-0">
-      <nav class="flex items-center gap-1 absolute top-0 inset-x-0 justify-between">
-        <CalendarPrevButton>
-          <slot name="calendar-prev-icon" />
-        </CalendarPrevButton>
-        <CalendarNextButton>
-          <slot name="calendar-next-icon" />
-        </CalendarNextButton>
-      </nav>
+    <CalendarRoot v-slot="{ grid, weekDays, date }" v-bind="forwarded" v-model:placeholder="placeholder" data-slot="calendar" :class="cn('p-3', props.class)">
+        <CalendarHeader class="pt-0">
+            <nav class="flex items-center gap-1 absolute top-0 inset-x-0 justify-between">
+                <CalendarPrevButton>
+                    <slot name="calendar-prev-icon" />
+                </CalendarPrevButton>
+                <CalendarNextButton>
+                    <slot name="calendar-next-icon" />
+                </CalendarNextButton>
+            </nav>
 
-      <slot name="calendar-heading" :date="date" :month="ReuseMonthTemplate" :year="ReuseYearTemplate">
-        <template v-if="layout === 'month-and-year'">
-          <div class="flex items-center justify-center gap-1">
-            <ReuseMonthTemplate :date="date" />
-            <ReuseYearTemplate :date="date" />
-          </div>
-        </template>
-        <template v-else-if="layout === 'month-only'">
-          <div class="flex items-center justify-center gap-1">
-            <ReuseMonthTemplate :date="date" />
-            {{ formatter.custom(toDate(date), { year: 'numeric' }) }}
-          </div>
-        </template>
-        <template v-else-if="layout === 'year-only'">
-          <div class="flex items-center justify-center gap-1">
-            {{ formatter.custom(toDate(date), { month: 'short' }) }}
-            <ReuseYearTemplate :date="date" />
-          </div>
-        </template>
-        <template v-else>
-          <CalendarHeading />
-        </template>
-      </slot>
-    </CalendarHeader>
+            <slot name="calendar-heading" :date="date" :month="ReuseMonthTemplate" :year="ReuseYearTemplate">
+                <template v-if="layout === 'month-and-year'">
+                    <div class="flex items-center justify-center gap-1">
+                        <ReuseMonthTemplate :date="date" />
+                        <ReuseYearTemplate :date="date" />
+                    </div>
+                </template>
+                <template v-else-if="layout === 'month-only'">
+                    <div class="flex items-center justify-center gap-1">
+                        <ReuseMonthTemplate :date="date" />
+                        {{
+                            formatter.custom(toDate(date), { year: 'numeric' })
+                        }}
+                    </div>
+                </template>
+                <template v-else-if="layout === 'year-only'">
+                    <div class="flex items-center justify-center gap-1">
+                        {{ formatter.custom(toDate(date), { month: 'short' }) }}
+                        <ReuseYearTemplate :date="date" />
+                    </div>
+                </template>
+                <template v-else>
+                    <CalendarHeading />
+                </template>
+            </slot>
+        </CalendarHeader>
 
-    <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>
-            <CalendarHeadCell v-for="day in weekDays" :key="day">
-              {{ day }}
-            </CalendarHeadCell>
-          </CalendarGridRow>
-        </CalendarGridHead>
-        <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()" :date="weekDate">
-              <CalendarCellTrigger :day="weekDate" :month="month.value" />
-            </CalendarCell>
-          </CalendarGridRow>
-        </CalendarGridBody>
-      </CalendarGrid>
-    </div>
-  </CalendarRoot>
-</template>
+        <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>
+                        <CalendarHeadCell v-for="day in weekDays" :key="day">
+                            {{ day }}
+                        </CalendarHeadCell>
+                    </CalendarGridRow>
+                </CalendarGridHead>
+                <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()" :date="weekDate">
+                            <CalendarCellTrigger :day="weekDate" :month="month.value" />
+                        </CalendarCell>
+                    </CalendarGridRow>
+                </CalendarGridBody>
+            </CalendarGrid>
+        </div>
+    </CalendarRoot>
+</template>

package/src/components/ui/calendar/CalendarCell.vue

@@ -1,23 +1,24 @@
-<script lang="ts" setup>
-import type { CalendarCellProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarCell, useForwardProps } from "reka-ui"
-import { cn } from "../../../lib/utils"
+<script setup lang="ts">
+import type { CalendarCellProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CalendarCell, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<CalendarCellProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <CalendarCell
-    data-slot="calendar-cell"
-    :class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 flex-1 [&:has([data-selected])]:rounded-md', props.class)"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </CalendarCell>
-</template>
+    <CalendarCell data-slot="calendar-cell" :class="cn(
+        'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 flex-1 [&:has([data-selected])]:rounded-md',
+        props.class,
+    )
+        " v-bind="forwardedProps">
+        <slot />
+    </CalendarCell>
+</template>

package/src/components/ui/calendar/CalendarCellTrigger.vue

@@ -1,39 +1,37 @@
-<script lang="ts" setup>
-import type { CalendarCellTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarCellTrigger, useForwardProps } from "reka-ui"
-import { cn } from "../../../lib/utils"
-import { buttonVariants } from '../button'
+<script setup lang="ts">
+import type { CalendarCellTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CalendarCellTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { buttonVariants } from '../button';
 
-const props = withDefaults(defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes["class"] }>(), {
-  as: "button",
-})
+// Props
+const props = withDefaults(defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>(), {
+    as: 'button'
+});
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <CalendarCellTrigger
-    data-slot="calendar-cell-trigger"
-    :class="cn(
-      buttonVariants({ variant: 'ghost' }),
-      'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
-      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
-      // Selected
-      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 [&[data-selected]:hover]:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
-      // Disabled
-      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
-      // Unavailable
-      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
-      // Outside months
-      'data-[outside-view]:text-muted-foreground',
-      props.class,
-    )"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </CalendarCellTrigger>
-</template>
+    <CalendarCellTrigger data-slot="calendar-cell-trigger" :class="cn(
+        buttonVariants({ variant: 'ghost' }),
+        'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
+        '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+        // Selected
+        'data-selected:bg-primary data-selected:text-primary-foreground data-selected:opacity-100 [&[data-selected]:hover]:bg-primary data-selected:hover:text-primary-foreground data-selected:focus:bg-primary data-selected:focus:text-primary-foreground',
+        // Disabled
+        'data-disabled:text-muted-foreground data-disabled:opacity-50',
+        // Unavailable
+        'data-unavailable:text-destructive-foreground data-unavailable:line-through',
+        // Outside months
+        'data-outside-view:text-muted-foreground',
+        props.class,
+    )
+        " v-bind="forwardedProps">
+        <slot />
+    </CalendarCellTrigger>
+</template>

package/src/components/ui/calendar/CalendarGrid.vue

@@ -1,23 +1,20 @@
-<script lang="ts" setup>
-import type { CalendarGridProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarGrid, useForwardProps } from "reka-ui"
-import { cn } from "../../../lib/utils"
+<script setup lang="ts">
+import type { CalendarGridProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CalendarGrid, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<CalendarGridProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <CalendarGrid
-    data-slot="calendar-grid"
-    :class="cn('w-full border-collapse space-x-1', props.class)"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </CalendarGrid>
-</template>
+    <CalendarGrid data-slot="calendar-grid" :class="cn('w-full border-collapse space-x-1', props.class)" v-bind="forwardedProps">
+        <slot />
+    </CalendarGrid>
+</template>

package/src/components/ui/calendar/CalendarGridBody.vue

@@ -1,15 +1,13 @@
-<script lang="ts" setup>
-import type { CalendarGridBodyProps } from "reka-ui"
-import { CalendarGridBody } from "reka-ui"
+<script setup lang="ts">
+import type { CalendarGridBodyProps } from 'reka-ui';
+import { CalendarGridBody } from 'reka-ui';
 
-const props = defineProps<CalendarGridBodyProps>()
+// Props
+const props = defineProps<CalendarGridBodyProps>();
 </script>
 
 <template>
-  <CalendarGridBody
-    data-slot="calendar-grid-body"
-    v-bind="props"
-  >
-    <slot />
-  </CalendarGridBody>
-</template>
+    <CalendarGridBody data-slot="calendar-grid-body" v-bind="props">
+        <slot />
+    </CalendarGridBody>
+</template>

package/src/components/ui/calendar/CalendarGridHead.vue

@@ -1,16 +1,14 @@
-<script lang="ts" setup>
-import type { CalendarGridHeadProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { CalendarGridHead } from "reka-ui"
+<script setup lang="ts">
+import type { CalendarGridHeadProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { CalendarGridHead } from 'reka-ui';
 
-const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>();
 </script>
 
 <template>
-  <CalendarGridHead
-    data-slot="calendar-grid-head"
-    v-bind="props"
-  >
-    <slot />
-  </CalendarGridHead>
-</template>
+    <CalendarGridHead data-slot="calendar-grid-head" v-bind="props">
+        <slot />
+    </CalendarGridHead>
+</template>

package/src/components/ui/calendar/CalendarGridRow.vue

@@ -1,22 +1,20 @@
-<script lang="ts" setup>
-import type { CalendarGridRowProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarGridRow, useForwardProps } from "reka-ui"
-import { cn } from "../../../lib/utils"
+<script setup lang="ts">
+import type { CalendarGridRowProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CalendarGridRow, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <CalendarGridRow
-    data-slot="calendar-grid-row"
-    :class="cn('flex', props.class)" v-bind="forwardedProps"
-  >
-    <slot />
-  </CalendarGridRow>
-</template>
+    <CalendarGridRow data-slot="calendar-grid-row" :class="cn('flex', props.class)" v-bind="forwardedProps">
+        <slot />
+    </CalendarGridRow>
+</template>

package/src/components/ui/calendar/CalendarHeadCell.vue

@@ -1,23 +1,24 @@
-<script lang="ts" setup>
-import type { CalendarHeadCellProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarHeadCell, useForwardProps } from "reka-ui"
-import { cn } from "../../../lib/utils"
+<script setup lang="ts">
+import type { CalendarHeadCellProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CalendarHeadCell, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <CalendarHeadCell
-    data-slot="calendar-head-cell"
-    :class="cn('text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem]', props.class)"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </CalendarHeadCell>
-</template>
+    <CalendarHeadCell data-slot="calendar-head-cell" :class="cn(
+        'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem]',
+        props.class,
+    )
+        " v-bind="forwardedProps">
+        <slot />
+    </CalendarHeadCell>
+</template>