@brumaombra/ui-vintage 0.9.0 → 0.9.2

package/src/components/ui/data-table/DataTable.vue

@@ -2,7 +2,8 @@
 import type { HTMLAttributes } from 'vue';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { ArrowUp01Icon, PackageIcon } from '@hugeicons/core-free-icons';
+import ArrowUp01Icon from '@hugeicons/core-free-icons/ArrowUp01Icon';
+import PackageIcon from '@hugeicons/core-free-icons/PackageIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { cn } from '../../../lib/utils';
 import { Checkbox } from '../checkbox';
@@ -11,44 +12,44 @@ import type { DataTableColumn, DataTableSort } from '.';
 
 // Props
 const props = withDefaults(defineProps<{
-    columns: DataTableColumn<T>[];
-    rows: T[];
-    rowKey?: keyof T | ((row: T) => PropertyKey);
-    selectable?: boolean;
-    selected?: PropertyKey[];
-    sort?: DataTableSort | null;
-    manualSort?: boolean;
-    loading?: boolean;
-    loadingRows?: number;
-    emptyText?: string;
-    rowClickable?: boolean;
-    stickyHeader?: boolean;
-    class?: HTMLAttributes['class'];
+	columns: DataTableColumn<T>[];
+	rows: T[];
+	rowKey?: keyof T | ((row: T) => PropertyKey);
+	selectable?: boolean;
+	selected?: PropertyKey[];
+	sort?: DataTableSort | null;
+	manualSort?: boolean;
+	loading?: boolean;
+	loadingRows?: number;
+	emptyText?: string;
+	rowClickable?: boolean;
+	stickyHeader?: boolean;
+	class?: HTMLAttributes['class'];
 }>(), {
-    rowKey: 'id' as never,
-    selectable: false,
-    selected: () => [],
-    sort: null,
-    manualSort: false,
-    loading: false,
-    loadingRows: 5,
-    emptyText: '',
-    rowClickable: false,
-    stickyHeader: false
+	rowKey: 'id' as never,
+	selectable: false,
+	selected: () => [],
+	sort: null,
+	manualSort: false,
+	loading: false,
+	loadingRows: 5,
+	emptyText: '',
+	rowClickable: false,
+	stickyHeader: false
 });
 
 // Emits
 const emits = defineEmits<{
-    'update:selected': [value: PropertyKey[]];
-    'update:sort': [value: DataTableSort | null];
-    'row-click': [row: T, event: MouseEvent | KeyboardEvent];
+	'update:selected': [value: PropertyKey[]];
+	'update:sort': [value: DataTableSort | null];
+	'row-click': [row: T, event: MouseEvent | KeyboardEvent];
 }>();
 
 // Slots
 defineSlots<{
-    [key: `cell-${string}`]: (props: { row: T; value: unknown; index: number }) => unknown;
-    [key: `header-${string}`]: (props: { column: DataTableColumn<T> }) => unknown;
-    empty?: () => unknown;
+	[key: `cell-${string}`]: (props: { row: T; value: unknown; index: number }) => unknown;
+	[key: `header-${string}`]: (props: { column: DataTableColumn<T> }) => unknown;
+	empty?: () => unknown;
 }>();
 
 const { t } = useI18n();
@@ -56,7 +57,7 @@ const resolvedEmptyText = computed(() => props.emptyText || t('uiVintage.common.
 
 // Resolve a stable key for each row
 const getRowKey = (row: T): PropertyKey => {
-    return typeof props.rowKey === 'function' ? props.rowKey(row) : row[props.rowKey as keyof T] as PropertyKey;
+	return typeof props.rowKey === 'function' ? props.rowKey(row) : row[props.rowKey as keyof T] as PropertyKey;
 };
 
 // Read the raw value of a cell
@@ -64,39 +65,39 @@ const getCellValue = (row: T, column: DataTableColumn<T>) => row[column.key];
 
 // Format a cell for display when no slot is provided
 const formatCell = (row: T, column: DataTableColumn<T>) => {
-    const value = getCellValue(row, column);
-    return column.format ? column.format(value, row) : value ?? '';
+	const value = getCellValue(row, column);
+	return column.format ? column.format(value, row) : value ?? '';
 };
 
 // Sort rows on the client unless sorting is delegated to the parent
 const sortedRows = computed(() => {
-    if (!props.sort || props.manualSort) return props.rows;
-    const column = props.columns.find(item => item.key === props.sort?.key);
-    if (!column) return props.rows;
-    const direction = props.sort.direction === 'asc' ? 1 : -1;
-    const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
-
-    // Compare values with the column accessor (strings use natural ordering)
-    return [...props.rows].sort((first, second) => {
-        const firstValue = column.sortValue ? column.sortValue(first) : getCellValue(first, column);
-        const secondValue = column.sortValue ? column.sortValue(second) : getCellValue(second, column);
-        if (firstValue == null) return 1;
-        if (secondValue == null) return -1;
-        if (typeof firstValue === 'number' && typeof secondValue === 'number') return (firstValue - secondValue) * direction;
-        return collator.compare(String(firstValue), String(secondValue)) * direction;
-    });
+	if (!props.sort || props.manualSort) return props.rows;
+	const column = props.columns.find(item => item.key === props.sort?.key);
+	if (!column) return props.rows;
+	const direction = props.sort.direction === 'asc' ? 1 : -1;
+	const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
+
+	// Compare values with the column accessor (strings use natural ordering)
+	return [...props.rows].sort((first, second) => {
+		const firstValue = column.sortValue ? column.sortValue(first) : getCellValue(first, column);
+		const secondValue = column.sortValue ? column.sortValue(second) : getCellValue(second, column);
+		if (firstValue == null) return 1;
+		if (secondValue == null) return -1;
+		if (typeof firstValue === 'number' && typeof secondValue === 'number') return (firstValue - secondValue) * direction;
+		return collator.compare(String(firstValue), String(secondValue)) * direction;
+	});
 });
 
 // Cycle a column through ascending, descending, and unsorted
 const toggleSort = (column: DataTableColumn<T>) => {
-    if (!column.sortable) return;
-    if (props.sort?.key !== column.key) {
-        emits('update:sort', { key: column.key, direction: 'asc' });
-    } else if (props.sort.direction === 'asc') {
-        emits('update:sort', { key: column.key, direction: 'desc' });
-    } else {
-        emits('update:sort', null);
-    }
+	if (!column.sortable) return;
+	if (props.sort?.key !== column.key) {
+		emits('update:sort', { key: column.key, direction: 'asc' });
+	} else if (props.sort.direction === 'asc') {
+		emits('update:sort', { key: column.key, direction: 'desc' });
+	} else {
+		emits('update:sort', null);
+	}
 };
 
 // Selection helpers
@@ -107,19 +108,19 @@ const headerCheckboxState = computed(() => allSelected.value ? true : someSelect
 
 // Toggle all rows
 const toggleAll = () => {
-    emits('update:selected', allSelected.value ? [] : props.rows.map(getRowKey));
+	emits('update:selected', allSelected.value ? [] : props.rows.map(getRowKey));
 };
 
 // Toggle a single row
 const toggleRow = (row: T) => {
-    const key = getRowKey(row);
-    const next = new Set(props.selected);
-    if (next.has(key)) {
-        next.delete(key);
-    } else {
-        next.add(key);
-    }
-    emits('update:selected', [...next]);
+	const key = getRowKey(row);
+	const next = new Set(props.selected);
+	if (next.has(key)) {
+		next.delete(key);
+	} else {
+		next.add(key);
+	}
+	emits('update:selected', [...next]);
 };
 
 // Alignment classes for header and body cells
@@ -129,110 +130,110 @@ const columnCount = computed(() => props.columns.length + (props.selectable ? 1
 
 // Emit row clicks (ignoring clicks on interactive children)
 const handleRowClick = (row: T, event: MouseEvent) => {
-    if ((event.target as HTMLElement).closest('button, a, input, [role=checkbox]')) return;
-    emits('row-click', row, event);
+	if ((event.target as HTMLElement).closest('button, a, input, [role=checkbox]')) return;
+	emits('row-click', row, event);
 };
 
 // Let keyboard users activate a focused clickable row with Enter or Space
 const handleRowKeydown = (row: T, event: KeyboardEvent) => {
-    if (!props.rowClickable || event.target !== event.currentTarget) return;
-    if (event.key !== 'Enter' && event.key !== ' ') return;
-    event.preventDefault();
-    emits('row-click', row, event);
+	if (!props.rowClickable || event.target !== event.currentTarget) return;
+	if (event.key !== 'Enter' && event.key !== ' ') return;
+	event.preventDefault();
+	emits('row-click', row, event);
 };
 </script>
 
 <template>
-    <div data-slot="data-table" :class="cn('relative w-full overflow-auto rounded border border-border bg-card shadow-elevated-sm', props.class)">
-        <table class="w-full caption-bottom border-collapse text-sm">
-            <!-- Header -->
-            <thead :class="cn('bg-surface/80 backdrop-blur', props.stickyHeader && 'sticky top-0 z-10')">
-                <tr class="border-b border-border">
-                    <!-- Select all -->
-                    <th v-if="props.selectable" class="w-12 px-4 py-3">
-                        <Checkbox :model-value="headerCheckboxState" :aria-label="t('uiVintage.dataTable.selectAll')" @update:model-value="toggleAll" />
-                    </th>
-
-                    <!-- Column headers -->
-                    <th v-for="column in props.columns" :key="column.key" :style="column.width ? { width: column.width } : undefined" :aria-sort="props.sort?.key === column.key ? (props.sort.direction === 'asc' ? 'ascending' : 'descending') : undefined" :class="cn('h-11 px-4 text-xs font-semibold whitespace-nowrap text-muted-foreground', alignClasses[column.align ?? 'left'], column.headerClass)">
-                        <slot :name="`header-${column.key}`" :column="column">
-                            <button v-if="column.sortable" type="button" :class="cn('group/sort -mx-1.5 inline-flex cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-1 outline-none transition-colors duration-150 hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/45', props.sort?.key === column.key && 'text-foreground', justifyClasses[column.align ?? 'left'])" @click="toggleSort(column)">
-                                {{ column.label }}
-                                <HugeiconsIcon :icon="ArrowUp01Icon" :class="cn('size-3.5 transition-[rotate,opacity,color] duration-300 ease-spring', props.sort?.key === column.key ? 'text-primary opacity-100' : 'opacity-0 group-hover/sort:opacity-50', props.sort?.key === column.key && props.sort.direction === 'desc' && 'rotate-180')" />
-                            </button>
-                            <template v-else>
-                                {{ column.label }}
-                            </template>
-                        </slot>
-                    </th>
-                </tr>
-            </thead>
-
-            <!-- Loading rows -->
-            <tbody v-if="props.loading">
-                <tr v-for="index in props.loadingRows" :key="`loading-${index}`" class="border-b border-border last:border-b-0">
-                    <td v-if="props.selectable" class="px-4 py-3">
-                        <Skeleton class="size-5" />
-                    </td>
-                    <td v-for="column in props.columns" :key="column.key" class="px-4 py-3">
-                        <Skeleton class="h-4" :style="{ width: `${45 + ((index * 17 + column.key.length * 11) % 45)}%` }" />
-                    </td>
-                </tr>
-            </tbody>
-
-            <!-- Empty state -->
-            <tbody v-else-if="sortedRows.length === 0">
-                <tr>
-                    <td :colspan="columnCount" class="px-4 py-12">
-                        <slot name="empty">
-                            <div class="flex flex-col items-center gap-2 text-center text-muted-foreground">
-                                <HugeiconsIcon :icon="PackageIcon" class="size-8 opacity-40" />
-                                <span class="text-xs sm:text-sm">{{ resolvedEmptyText }}</span>
-                            </div>
-                        </slot>
-                    </td>
-                </tr>
-            </tbody>
-
-            <!-- Rows (animated when sorted, added, or removed) -->
-            <TransitionGroup v-else tag="tbody" name="uv-data-table-row">
-                <tr v-for="(row, index) in sortedRows" :key="getRowKey(row)" :data-state="selectedSet.has(getRowKey(row)) ? 'selected' : undefined" :class="cn('border-b border-border transition-colors duration-150 last:border-b-0 hover:bg-surface/70 data-[state=selected]:bg-primary/5', props.rowClickable && 'cursor-pointer focus-visible:bg-surface/70 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring')" :tabindex="props.rowClickable ? 0 : undefined" @click="handleRowClick(row, $event)" @keydown="handleRowKeydown(row, $event)">
-                    <!-- Row selection -->
-                    <td v-if="props.selectable" class="px-4 py-3">
-                        <Checkbox :model-value="selectedSet.has(getRowKey(row))" :aria-label="t('uiVintage.dataTable.selectRow')" @update:model-value="toggleRow(row)" />
-                    </td>
-
-                    <!-- Cells -->
-                    <td v-for="column in props.columns" :key="column.key" :class="cn('px-4 py-3 align-middle text-xs whitespace-nowrap md:text-sm', alignClasses[column.align ?? 'left'], column.class)">
-                        <slot :name="`cell-${column.key}`" :row="row" :value="getCellValue(row, column)" :index="index">
-                            {{ formatCell(row, column) }}
-                        </slot>
-                    </td>
-                </tr>
-            </TransitionGroup>
-        </table>
-    </div>
+	<div data-slot="data-table" :class="cn('relative w-full overflow-auto rounded border border-border bg-card shadow-elevated-sm', props.class)">
+		<table class="w-full caption-bottom border-collapse text-sm">
+			<!-- Header -->
+			<thead :class="cn('bg-surface/80 backdrop-blur', props.stickyHeader && 'sticky top-0 z-10')">
+				<tr class="border-b border-border">
+					<!-- Select all -->
+					<th v-if="props.selectable" class="w-12 px-4 py-3">
+						<Checkbox :model-value="headerCheckboxState" :aria-label="t('uiVintage.dataTable.selectAll')" @update:model-value="toggleAll" />
+					</th>
+
+					<!-- Column headers -->
+					<th v-for="column in props.columns" :key="column.key" :style="column.width ? { width: column.width } : undefined" :aria-sort="props.sort?.key === column.key ? (props.sort.direction === 'asc' ? 'ascending' : 'descending') : undefined" :class="cn('h-11 px-4 text-xs font-semibold whitespace-nowrap text-muted-foreground', alignClasses[column.align ?? 'left'], column.headerClass)">
+						<slot :name="`header-${column.key}`" :column="column">
+							<button v-if="column.sortable" type="button" :class="cn('group/sort -mx-1.5 inline-flex cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-1 outline-none transition-colors duration-150 hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/45', props.sort?.key === column.key && 'text-foreground', justifyClasses[column.align ?? 'left'])" @click="toggleSort(column)">
+								{{ column.label }}
+								<HugeiconsIcon :icon="ArrowUp01Icon" :class="cn('size-3.5 transition-[rotate,opacity,color] duration-300 ease-spring', props.sort?.key === column.key ? 'text-primary opacity-100' : 'opacity-0 group-hover/sort:opacity-50', props.sort?.key === column.key && props.sort.direction === 'desc' && 'rotate-180')" />
+							</button>
+							<template v-else>
+								{{ column.label }}
+							</template>
+						</slot>
+					</th>
+				</tr>
+			</thead>
+
+			<!-- Loading rows -->
+			<tbody v-if="props.loading">
+				<tr v-for="index in props.loadingRows" :key="`loading-${index}`" class="border-b border-border last:border-b-0">
+					<td v-if="props.selectable" class="px-4 py-3">
+						<Skeleton class="size-5" />
+					</td>
+					<td v-for="column in props.columns" :key="column.key" class="px-4 py-3">
+						<Skeleton class="h-4" :style="{ width: `${45 + ((index * 17 + column.key.length * 11) % 45)}%` }" />
+					</td>
+				</tr>
+			</tbody>
+
+			<!-- Empty state -->
+			<tbody v-else-if="sortedRows.length === 0">
+				<tr>
+					<td :colspan="columnCount" class="px-4 py-12">
+						<slot name="empty">
+							<div class="flex flex-col items-center gap-2 text-center text-muted-foreground">
+								<HugeiconsIcon :icon="PackageIcon" class="size-8 opacity-40" />
+								<span class="text-xs sm:text-sm">{{ resolvedEmptyText }}</span>
+							</div>
+						</slot>
+					</td>
+				</tr>
+			</tbody>
+
+			<!-- Rows (animated when sorted, added, or removed) -->
+			<TransitionGroup v-else tag="tbody" name="uv-data-table-row">
+				<tr v-for="(row, index) in sortedRows" :key="getRowKey(row)" :data-state="selectedSet.has(getRowKey(row)) ? 'selected' : undefined" :class="cn('border-b border-border transition-colors duration-150 last:border-b-0 hover:bg-surface/70 data-[state=selected]:bg-primary/5', props.rowClickable && 'cursor-pointer focus-visible:bg-surface/70 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring')" :tabindex="props.rowClickable ? 0 : undefined" @click="handleRowClick(row, $event)" @keydown="handleRowKeydown(row, $event)">
+					<!-- Row selection -->
+					<td v-if="props.selectable" class="px-4 py-3">
+						<Checkbox :model-value="selectedSet.has(getRowKey(row))" :aria-label="t('uiVintage.dataTable.selectRow')" @update:model-value="toggleRow(row)" />
+					</td>
+
+					<!-- Cells -->
+					<td v-for="column in props.columns" :key="column.key" :class="cn('px-4 py-3 align-middle text-xs whitespace-nowrap md:text-sm', alignClasses[column.align ?? 'left'], column.class)">
+						<slot :name="`cell-${column.key}`" :row="row" :value="getCellValue(row, column)" :index="index">
+							{{ formatCell(row, column) }}
+						</slot>
+					</td>
+				</tr>
+			</TransitionGroup>
+		</table>
+	</div>
 </template>
 
 <style>
 .uv-data-table-row-move {
-    transition: transform 0.45s var(--ease-spring);
+	transition: transform 0.45s var(--ease-spring);
 }
 
 .uv-data-table-row-enter-active {
-    transition: opacity 0.3s var(--ease-out-expo), transform 0.4s var(--ease-spring);
+	transition: opacity 0.3s var(--ease-out-expo), transform 0.4s var(--ease-spring);
 }
 
 .uv-data-table-row-leave-active {
-    transition: opacity 0.18s var(--ease-snappy);
+	transition: opacity 0.18s var(--ease-snappy);
 }
 
 .uv-data-table-row-enter-from {
-    opacity: 0;
-    transform: translateY(-6px);
+	opacity: 0;
+	transform: translateY(-6px);
 }
 
 .uv-data-table-row-leave-to {
-    opacity: 0;
+	opacity: 0;
 }
 </style>

package/src/components/ui/data-table/index.ts

@@ -3,18 +3,18 @@ export { default as DataTable } from './DataTable.vue';
 export type DataTableSortDirection = 'asc' | 'desc';
 
 export interface DataTableSort {
-    key: string;
-    direction: DataTableSortDirection;
+	key: string;
+	direction: DataTableSortDirection;
 }
 
 export interface DataTableColumn<T> {
-    key: string;
-    label: string;
-    sortable?: boolean;
-    align?: 'left' | 'center' | 'right';
-    width?: string;
-    class?: string;
-    headerClass?: string;
-    format?: (value: unknown, row: T) => string;
-    sortValue?: (row: T) => string | number | null | undefined;
+	key: string;
+	label: string;
+	sortable?: boolean;
+	align?: 'left' | 'center' | 'right';
+	width?: string;
+	class?: string;
+	headerClass?: string;
+	format?: (value: unknown, row: T) => string;
+	sortValue?: (row: T) => string | number | null | undefined;
 }

package/src/components/ui/date-picker/DatePicker.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
 import { DateFormatter, getLocalTimeZone, today, } from '@internationalized/date';
-import { Calendar03Icon } from '@hugeicons/core-free-icons';
+import Calendar03Icon from '@hugeicons/core-free-icons/Calendar03Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import type { DateValue } from 'reka-ui';
 import { computed, ref } from 'vue';
@@ -14,21 +14,21 @@ import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 
 // Props
 const props = withDefaults(defineProps<{
-    defaultValue?: DateValue;
-    modelValue?: DateValue;
-    minValue?: DateValue;
-    maxValue?: DateValue;
-    placeholder?: string;
-    disabled?: boolean;
-    class?: HTMLAttributes['class'];
-    contentClass?: HTMLAttributes['class'];
+	defaultValue?: DateValue;
+	modelValue?: DateValue;
+	minValue?: DateValue;
+	maxValue?: DateValue;
+	placeholder?: string;
+	disabled?: boolean;
+	class?: HTMLAttributes['class'];
+	contentClass?: HTMLAttributes['class'];
 }>(), {
-    disabled: false
+	disabled: false
 });
 
 // Emits
 const emits = defineEmits<{
-    (e: 'update:modelValue', payload: DateValue | undefined): void;
+	(e: 'update:modelValue', payload: DateValue | undefined): void;
 }>();
 
 const { t, locale } = useI18n();
@@ -37,21 +37,21 @@ const internalDate = ref<DateValue | undefined>(props.defaultValue);
 const isControlled = computed(() => props.modelValue !== undefined);
 
 const date = computed({
-    get: () =>
-        (isControlled.value ? props.modelValue : internalDate.value) as any,
-    set: (value: DateValue | undefined) => {
-        if (!isControlled.value) internalDate.value = value;
-        emits('update:modelValue', value);
-    },
+	get: () =>
+		(isControlled.value ? props.modelValue : internalDate.value) as any,
+	set: (value: DateValue | undefined) => {
+		if (!isControlled.value) internalDate.value = value;
+		emits('update:modelValue', value);
+	},
 });
 
 const defaultPlaceholder = computed(
-    () => (date.value ?? today(getLocalTimeZone())) as any,
+	() => (date.value ?? today(getLocalTimeZone())) as any,
 );
 
 // Format the selected date in the active locale
 const formatter = computed(() => new DateFormatter(locale.value || 'en-US', {
-    dateStyle: 'long',
+	dateStyle: 'long',
 }));
 
 // Let a surrounding Field label point to the trigger, and name it "label + selected date" so the value is not lost
@@ -61,18 +61,18 @@ const triggerLabelledBy = computed(() => fieldLabelId.value && fieldControlId.va
 </script>
 
 <template>
-    <Popover v-slot="{ close }">
-        <!-- Date picker trigger -->
-        <PopoverTrigger as-child>
-            <Button :id="fieldControlId" :aria-labelledby="triggerLabelledBy" variant="secondary" :disabled="disabled" :class="cn('h-13 w-60 justify-start text-left font-normal enabled:active:scale-100', !date && 'text-muted-foreground', props.class,)">
-                <HugeiconsIcon :icon="Calendar03Icon" class="size-4" />
-                {{ date ? formatter.format(date.toDate(getLocalTimeZone())) : resolvedPlaceholder }}
-            </Button>
-        </PopoverTrigger>
+	<Popover v-slot="{ close }">
+		<!-- Date picker trigger -->
+		<PopoverTrigger as-child>
+			<Button :id="fieldControlId" :aria-labelledby="triggerLabelledBy" variant="secondary" :disabled="disabled" :class="cn('h-13 w-60 justify-start text-left font-normal enabled:active:scale-100', !date && 'text-muted-foreground', props.class,)">
+				<HugeiconsIcon :icon="Calendar03Icon" class="size-4" />
+				{{ date ? formatter.format(date.toDate(getLocalTimeZone())) : resolvedPlaceholder }}
+			</Button>
+		</PopoverTrigger>
 
-        <!-- Date picker content -->
-        <PopoverContent :class="cn('w-auto p-0', props.contentClass)" align="start">
-            <Calendar v-model="date" :default-placeholder="defaultPlaceholder" :min-value="props.minValue" :max-value="props.maxValue" layout="month-and-year" initial-focus @update:model-value="close" />
-        </PopoverContent>
-    </Popover>
+		<!-- Date picker content -->
+		<PopoverContent :class="cn('w-auto p-0', props.contentClass)" align="start">
+			<Calendar v-model="date" :default-placeholder="defaultPlaceholder" :min-value="props.minValue" :max-value="props.maxValue" layout="month-and-year" initial-focus @update:model-value="close" />
+		</PopoverContent>
+	</Popover>
 </template>