@rupe/v-datepicker 1.0.0-beta.1 → 1.0.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -62,10 +62,53 @@ import { DatePicker } from '@rupe/v-datepicker'
|
|
|
62
62
|
<DatePicker.Calendar v-slot="{ weekDays, grid }">
|
|
63
63
|
<DatePicker.Header class="flex items-center justify-between mb-4">
|
|
64
64
|
<DatePicker.Prev class="p-1 hover:bg-gray-100 rounded">⬅️</DatePicker.Prev>
|
|
65
|
+
|
|
65
66
|
<DatePicker.Heading class="font-bold flex gap-1">
|
|
66
|
-
|
|
67
|
-
|
|
67
|
+
<!-- Month Heading & Overlay -->
|
|
68
|
+
<DatePicker.MonthHeading class="hover:bg-gray-100 rounded px-1 cursor-pointer" />
|
|
69
|
+
<DatePicker.MonthYearOverlay type="month" class="bg-white rounded-lg shadow-lg p-2" :items-per-row="3">
|
|
70
|
+
<template #default="{ months }">
|
|
71
|
+
<DatePicker.Grid class="w-full">
|
|
72
|
+
<DatePicker.GridBody>
|
|
73
|
+
<DatePicker.GridRow v-for="(row, index) in months" :key="index" class="flex gap-1 mb-1">
|
|
74
|
+
<DatePicker.Cell v-for="month in row" :key="month.monthName" :date="month" class="flex-1">
|
|
75
|
+
<DatePicker.OverlayItem
|
|
76
|
+
:date="month"
|
|
77
|
+
type="month"
|
|
78
|
+
class="w-full p-2 text-center rounded hover:bg-blue-50 data-[selected]:bg-blue-600 data-[selected]:text-white"
|
|
79
|
+
>
|
|
80
|
+
{{ month.monthName }}
|
|
81
|
+
</DatePicker.OverlayItem>
|
|
82
|
+
</DatePicker.Cell>
|
|
83
|
+
</DatePicker.GridRow>
|
|
84
|
+
</DatePicker.GridBody>
|
|
85
|
+
</DatePicker.Grid>
|
|
86
|
+
</template>
|
|
87
|
+
</DatePicker.MonthYearOverlay>
|
|
88
|
+
|
|
89
|
+
<!-- Year Heading & Overlay -->
|
|
90
|
+
<DatePicker.YearHeading class="hover:bg-gray-100 rounded px-1 cursor-pointer" />
|
|
91
|
+
<DatePicker.MonthYearOverlay type="year" class="bg-white rounded-lg shadow-lg p-2 h-64 overflow-y-auto" :items-per-row="3">
|
|
92
|
+
<template #default="{ years }">
|
|
93
|
+
<DatePicker.Grid class="w-full">
|
|
94
|
+
<DatePicker.GridBody>
|
|
95
|
+
<DatePicker.GridRow v-for="(row, index) in years" :key="index" class="flex gap-1 mb-1">
|
|
96
|
+
<DatePicker.Cell v-for="year in row" :key="year.year" :date="year" class="flex-1">
|
|
97
|
+
<DatePicker.OverlayItem
|
|
98
|
+
:date="year"
|
|
99
|
+
type="year"
|
|
100
|
+
class="w-full p-2 text-center rounded hover:bg-blue-50 data-[selected]:bg-blue-600 data-[selected]:text-white"
|
|
101
|
+
>
|
|
102
|
+
{{ year.year }}
|
|
103
|
+
</DatePicker.OverlayItem>
|
|
104
|
+
</DatePicker.Cell>
|
|
105
|
+
</DatePicker.GridRow>
|
|
106
|
+
</DatePicker.GridBody>
|
|
107
|
+
</DatePicker.Grid>
|
|
108
|
+
</template>
|
|
109
|
+
</DatePicker.MonthYearOverlay>
|
|
68
110
|
</DatePicker.Heading>
|
|
111
|
+
|
|
69
112
|
<DatePicker.Next class="p-1 hover:bg-gray-100 rounded">➡️</DatePicker.Next>
|
|
70
113
|
</DatePicker.Header>
|
|
71
114
|
|
package/package.json
CHANGED
|
@@ -26,8 +26,20 @@ const dataValue = computed(() => `${props.type}-${props.date[props.type]}`);
|
|
|
26
26
|
const { primitiveElement, currentElement } = usePrimitiveElement();
|
|
27
27
|
|
|
28
28
|
const isFocusedDate = computed(() => {
|
|
29
|
-
|
|
29
|
+
const selected = rootContext.modelValue.value;
|
|
30
|
+
const selectedDate = Array.isArray(selected)
|
|
31
|
+
? selected[selected.length - 1]
|
|
32
|
+
: selected;
|
|
33
|
+
|
|
34
|
+
if (selectedDate) {
|
|
35
|
+
if (props.type === "month") return selectedDate.month === props.date.month;
|
|
36
|
+
return selectedDate.year === props.date.year;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
if (props.type === "month") {
|
|
30
40
|
return rootContext.currentMonth.value === props.date.monthName;
|
|
41
|
+
}
|
|
42
|
+
|
|
31
43
|
return rootContext.currentYear.value === props.date.year.toString();
|
|
32
44
|
});
|
|
33
45
|
|