ropav 0.1.7 → 0.1.8
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 +1 -1
- package/dist/ancestry.js +136 -0
- package/dist/calendar.css +173 -0
- package/dist/calendar.js +714 -0
- package/dist/calendar2.js +37 -0
- package/dist/chevron-left.js +12 -0
- package/dist/color-picker.js +38 -88
- package/dist/combobox.css +251 -0
- package/dist/combobox.js +410 -0
- package/dist/components/calendar/calendar.d.ts +30 -0
- package/dist/components/calendar/calendarBehavior.d.ts +49 -0
- package/dist/components/calendar/index.d.ts +3 -0
- package/dist/components/calendar/index.js +3 -0
- package/dist/components/calendar/types.d.ts +53 -0
- package/dist/components/calendar/useCalendar.d.ts +24 -0
- package/dist/components/color-picker/useColorPickerDrag.d.ts +1 -1
- package/dist/components/color-picker/useColorPickerSaturation.d.ts +1 -1
- package/dist/components/color-picker/useColorPickerSlider.d.ts +1 -1
- package/dist/components/combobox/combobox.d.ts +29 -0
- package/dist/components/combobox/comboboxModel.d.ts +4 -0
- package/dist/components/combobox/index.d.ts +3 -0
- package/dist/components/combobox/index.js +2 -0
- package/dist/components/combobox/types.d.ts +43 -0
- package/dist/components/combobox/useCombobox.d.ts +45 -0
- package/dist/components/date-picker/date-picker.d.ts +33 -0
- package/dist/components/date-picker/datePickerModel.d.ts +10 -0
- package/dist/components/date-picker/index.d.ts +4 -0
- package/dist/components/date-picker/index.js +2 -0
- package/dist/components/date-picker/types.d.ts +57 -0
- package/dist/components/date-picker/useDatePicker.d.ts +29 -0
- package/dist/components/date-picker/useDatePickerValueState.d.ts +21 -0
- package/dist/components/dropdown-menu/dropdown-menu-content.d.ts +2 -2
- package/dist/components/dropdown-menu/dropdown-menu-sub-content.d.ts +2 -2
- package/dist/components/dropdown-menu/dropdown-menu.d.ts +2 -2
- package/dist/components/dropdown-menu/dropdownMenuContext.d.ts +7 -18
- package/dist/components/dropdown-menu/dropdownMenuInteraction.d.ts +3 -3
- package/dist/components/dropdown-menu/dropdownMenuInteractionTypes.d.ts +58 -29
- package/dist/components/dropdown-menu/useDropdownMenuDataController.d.ts +4 -3
- package/dist/components/dropdown-menu/useDropdownMenuDataRegistration.d.ts +6 -4
- package/dist/components/dropdown-menu/useDropdownMenuPresentation.d.ts +3 -4
- package/dist/components/dropdown-menu/useDropdownMenuTargetBindings.d.ts +5 -5
- package/dist/components/dropzone/dropzone.d.ts +31 -0
- package/dist/components/dropzone/dropzoneModel.d.ts +16 -0
- package/dist/components/dropzone/index.d.ts +3 -0
- package/dist/components/dropzone/index.js +2 -0
- package/dist/components/dropzone/types.d.ts +56 -0
- package/dist/components/dropzone/useDropzone.d.ts +25 -0
- package/dist/components/file-input/file-input.d.ts +29 -0
- package/dist/components/file-input/index.d.ts +3 -0
- package/dist/components/file-input/index.js +2 -0
- package/dist/components/file-input/types.d.ts +37 -0
- package/dist/components/file-input/useFileInput.d.ts +15 -0
- package/dist/components/floating/index.js +1 -1
- package/dist/components/floating/useFloatingPosition.d.ts +1 -13
- package/dist/components/floating/useFloatingTargetLifecycle.d.ts +32 -0
- package/dist/components/floating/useHoverDisclosure.d.ts +10 -0
- package/dist/components/hover-card/hover-card.d.ts +25 -0
- package/dist/components/hover-card/index.d.ts +3 -0
- package/dist/components/hover-card/index.js +2 -0
- package/dist/components/hover-card/types.d.ts +45 -0
- package/dist/components/hover-card/useHoverCard.d.ts +22 -0
- package/dist/components/hover-card/useHoverCardDisclosure.d.ts +19 -0
- package/dist/components/multi-select/index.d.ts +3 -0
- package/dist/components/multi-select/index.js +2 -0
- package/dist/components/multi-select/multi-select.d.ts +30 -0
- package/dist/components/multi-select/multiSelectModel.d.ts +3 -0
- package/dist/components/multi-select/types.d.ts +49 -0
- package/dist/components/multi-select/useMultiSelect.d.ts +46 -0
- package/dist/components/number-input/useNumberInput.d.ts +1 -3
- package/dist/components/popover/usePopoverBindings.d.ts +3 -6
- package/dist/components/scroll-area/useScrollArea.d.ts +4 -4
- package/dist/components/scroll-area/useScrollAreaAttributes.d.ts +3 -3
- package/dist/components/scroll-area/useScrollAreaPointer.d.ts +1 -1
- package/dist/components/segmented-control/index.d.ts +3 -0
- package/dist/components/segmented-control/index.js +2 -0
- package/dist/components/segmented-control/segmented-control.d.ts +26 -0
- package/dist/components/segmented-control/types.d.ts +47 -0
- package/dist/components/segmented-control/useSegmentedControl.d.ts +15 -0
- package/dist/components/select/useSelect.d.ts +31 -19
- package/dist/components/slider/useRangeSlider.d.ts +1 -1
- package/dist/components/slider/useRangeSliderPointer.d.ts +1 -1
- package/dist/components/tags-input/index.d.ts +3 -0
- package/dist/components/tags-input/index.js +2 -0
- package/dist/components/tags-input/tags-input.d.ts +27 -0
- package/dist/components/tags-input/tagsInputModel.d.ts +12 -0
- package/dist/components/tags-input/types.d.ts +37 -0
- package/dist/components/tags-input/useTagsInput.d.ts +23 -0
- package/dist/components/tooltip/useTooltipTargetBindings.d.ts +12 -0
- package/dist/date-picker.css +49 -0
- package/dist/date-picker.js +809 -0
- package/dist/dialog.js +9 -20
- package/dist/direction.js +6 -0
- package/dist/dropdown-menu.css +21 -3
- package/dist/dropdown-menu.js +341 -261
- package/dist/dropzone.css +135 -0
- package/dist/dropzone.js +431 -0
- package/dist/file-input.css +135 -0
- package/dist/file-input.js +198 -0
- package/dist/hover-card.css +80 -0
- package/dist/hover-card.js +402 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.js +14 -3
- package/dist/internal/composables/useOverlayLayer.d.ts +12 -0
- package/dist/modal.js +1 -1
- package/dist/multi-select.css +316 -0
- package/dist/multi-select.js +481 -0
- package/dist/nativeChoice.js +169 -0
- package/dist/number-input.css +18 -18
- package/dist/number-input.js +36 -38
- package/dist/pagination.js +1 -10
- package/dist/pointerSession.js +130 -0
- package/dist/popover.css +21 -3
- package/dist/popover.js +37 -62
- package/dist/scroll-area.js +52 -62
- package/dist/segmented-control.css +176 -0
- package/dist/segmented-control.js +382 -0
- package/dist/select.css +50 -48
- package/dist/select.js +121 -271
- package/dist/slider.js +70 -129
- package/dist/tags-input.css +197 -0
- package/dist/tags-input.js +380 -0
- package/dist/tooltip.js +35 -30
- package/dist/useEditableOptionList.js +216 -0
- package/dist/useFlatOptionCollection.js +134 -0
- package/dist/useFloatingPosition.js +4 -160
- package/dist/useFloatingTargetLifecycle.js +127 -0
- package/dist/useFormControl.js +1 -0
- package/dist/{floating.js → useHoverDisclosure.js} +338 -421
- package/dist/useNativeChoiceTransaction.js +46 -0
- package/dist/useNativeFileSelection.js +86 -0
- package/dist/useOverlayZIndex.js +246 -15
- package/dist/utils/date.d.ts +13 -0
- package/dist/utils/dateAvailability.d.ts +7 -0
- package/dist/utils/dom/ancestry.d.ts +1 -0
- package/dist/utils/dom/direction.d.ts +2 -0
- package/dist/utils/dom/files.d.ts +3 -0
- package/dist/utils/dom/nativeChoice.d.ts +17 -0
- package/dist/utils/dom/pointerSession.d.ts +20 -0
- package/dist/utils/dom/scroll.d.ts +2 -1
- package/dist/utils/optionFilter.d.ts +5 -0
- package/docs/public-floating-api.md +7 -4
- package/docs/public-styles-api.md +25 -12
- package/package.json +39 -3
- package/src/styles/_mixins.scss +26 -0
- package/src/styles/styles-manifest.json +1 -2
- package/dist/components/floating/hoverDisclosureInteractionModel.d.ts +0 -42
- package/dist/components/floating/useHoverDisclosureInteractions.d.ts +0 -32
- package/dist/components/floating/useHoverDisclosureOpenState.d.ts +0 -25
- package/dist/components/floating/useHoverDisclosureTargetBinding.d.ts +0 -27
- package/dist/components/select/useSelectNativeControl.d.ts +0 -9
- package/dist/components/select/useSelectNativeValue.d.ts +0 -9
- package/dist/pointer.js +0 -9
- package/dist/utils/dom/pointer.d.ts +0 -2
package/dist/calendar.js
ADDED
|
@@ -0,0 +1,714 @@
|
|
|
1
|
+
import './calendar.css';
|
|
2
|
+
import { t as useControllableValue } from "./useControllableValue.js";
|
|
3
|
+
import { t as useStylesApi } from "./styles-api.js";
|
|
4
|
+
import { n as toPresenceAttribute } from "./attributes.js";
|
|
5
|
+
import { t as bem } from "./bem.js";
|
|
6
|
+
import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
|
|
7
|
+
import { t as chevron_left_default } from "./chevron-left.js";
|
|
8
|
+
import { t as chevron_right_default } from "./chevron-right.js";
|
|
9
|
+
import { child, computed, createComponent, createFor, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, next, nextTick, on, onBeforeUnmount, onMounted, ref, renderEffect, setDynamicProps, setInsertionState, setText, shallowRef, template, toDisplayString, txt, unref, useId, watch } from "vue";
|
|
10
|
+
//#region src/utils/date.ts
|
|
11
|
+
function isValidDate(value) {
|
|
12
|
+
return value instanceof Date && Number.isFinite(value.getTime());
|
|
13
|
+
}
|
|
14
|
+
function toLocalDate(value) {
|
|
15
|
+
return new Date(value.getFullYear(), value.getMonth(), value.getDate());
|
|
16
|
+
}
|
|
17
|
+
function normalizeDate(value) {
|
|
18
|
+
return isValidDate(value) ? toLocalDate(value) : null;
|
|
19
|
+
}
|
|
20
|
+
function toDateKey(value) {
|
|
21
|
+
return `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
|
|
22
|
+
}
|
|
23
|
+
function parseDateKey(value) {
|
|
24
|
+
const match = /^(\d{4,})-(\d{2})-(\d{2})$/.exec(value);
|
|
25
|
+
if (!match) return null;
|
|
26
|
+
const year = Number(match[1]);
|
|
27
|
+
const month = Number(match[2]) - 1;
|
|
28
|
+
const day = Number(match[3]);
|
|
29
|
+
const parsed = new Date(year, month, day);
|
|
30
|
+
if (parsed.getFullYear() !== year || parsed.getMonth() !== month || parsed.getDate() !== day) return null;
|
|
31
|
+
return parsed;
|
|
32
|
+
}
|
|
33
|
+
function compareDates(left, right) {
|
|
34
|
+
return toLocalDate(left).getTime() - toLocalDate(right).getTime();
|
|
35
|
+
}
|
|
36
|
+
function isSameDate(left, right) {
|
|
37
|
+
return Boolean(left && right && compareDates(left, right) === 0);
|
|
38
|
+
}
|
|
39
|
+
function isSameMonth(left, right) {
|
|
40
|
+
return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth();
|
|
41
|
+
}
|
|
42
|
+
function startOfMonth(value) {
|
|
43
|
+
return new Date(value.getFullYear(), value.getMonth(), 1);
|
|
44
|
+
}
|
|
45
|
+
function endOfMonth(value) {
|
|
46
|
+
return new Date(value.getFullYear(), value.getMonth() + 1, 0);
|
|
47
|
+
}
|
|
48
|
+
function addCalendarDays(value, amount) {
|
|
49
|
+
return new Date(value.getFullYear(), value.getMonth(), value.getDate() + amount);
|
|
50
|
+
}
|
|
51
|
+
function addCalendarMonths(value, amount) {
|
|
52
|
+
const day = value.getDate();
|
|
53
|
+
const result = new Date(value.getFullYear(), value.getMonth() + amount, 1);
|
|
54
|
+
result.setDate(Math.min(day, endOfMonth(result).getDate()));
|
|
55
|
+
return result;
|
|
56
|
+
}
|
|
57
|
+
function addCalendarYears(value, amount) {
|
|
58
|
+
const result = new Date(value.getFullYear() + amount, value.getMonth(), 1);
|
|
59
|
+
result.setDate(Math.min(value.getDate(), endOfMonth(result).getDate()));
|
|
60
|
+
return result;
|
|
61
|
+
}
|
|
62
|
+
//#endregion
|
|
63
|
+
//#region src/utils/dateAvailability.ts
|
|
64
|
+
function isDateUnavailable(date, options) {
|
|
65
|
+
const min = normalizeDate(options.min);
|
|
66
|
+
const max = normalizeDate(options.max);
|
|
67
|
+
if (min && compareDates(date, min) < 0) return true;
|
|
68
|
+
if (max && compareDates(date, max) > 0) return true;
|
|
69
|
+
if (typeof options.disabledDates === "function") return options.disabledDates(toLocalDate(date));
|
|
70
|
+
return options.disabledDates?.some((disabledDate) => isSameDate(disabledDate, date)) ?? false;
|
|
71
|
+
}
|
|
72
|
+
//#endregion
|
|
73
|
+
//#region src/components/calendar/calendarBehavior.ts
|
|
74
|
+
function normalizeFirstDayOfWeek(value) {
|
|
75
|
+
if (!Number.isFinite(value)) return 0;
|
|
76
|
+
return (Math.trunc(value) % 7 + 7) % 7;
|
|
77
|
+
}
|
|
78
|
+
function createCalendarDays(options, firstDayOfWeek) {
|
|
79
|
+
const month = startOfMonth(options.month);
|
|
80
|
+
const leadingDays = (month.getDay() - firstDayOfWeek + 7) % 7;
|
|
81
|
+
const gridStart = addCalendarDays(month, -leadingDays);
|
|
82
|
+
const requiredDays = leadingDays + endOfMonth(month).getDate();
|
|
83
|
+
const dayCount = options.fixedWeeks ?? true ? 42 : Math.ceil(requiredDays / 7) * 7;
|
|
84
|
+
const dayFormatter = new Intl.DateTimeFormat(options.locale, {
|
|
85
|
+
weekday: "long",
|
|
86
|
+
year: "numeric",
|
|
87
|
+
month: "long",
|
|
88
|
+
day: "numeric"
|
|
89
|
+
});
|
|
90
|
+
return Array.from({ length: dayCount }, (_, index) => {
|
|
91
|
+
const date = addCalendarDays(gridStart, index);
|
|
92
|
+
const outside = !isSameMonth(date, month);
|
|
93
|
+
return {
|
|
94
|
+
date,
|
|
95
|
+
key: toDateKey(date),
|
|
96
|
+
label: date.getDate(),
|
|
97
|
+
ariaLabel: dayFormatter.format(date),
|
|
98
|
+
outside,
|
|
99
|
+
hidden: outside && Boolean(options.hideOutsideDates),
|
|
100
|
+
selected: isSameDate(date, options.selectedDate),
|
|
101
|
+
today: isSameDate(date, options.today),
|
|
102
|
+
disabled: isDateUnavailable(date, options)
|
|
103
|
+
};
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
function createCalendarWeeks(days) {
|
|
107
|
+
const weeks = [];
|
|
108
|
+
for (let index = 0; index < days.length; index += 7) weeks.push(days.slice(index, index + 7));
|
|
109
|
+
return weeks;
|
|
110
|
+
}
|
|
111
|
+
function getCalendarWeekdays(locale, firstDayOfWeek, format) {
|
|
112
|
+
const shortFormatter = new Intl.DateTimeFormat(locale, {
|
|
113
|
+
weekday: format,
|
|
114
|
+
timeZone: "UTC"
|
|
115
|
+
});
|
|
116
|
+
const longFormatter = new Intl.DateTimeFormat(locale, {
|
|
117
|
+
weekday: "long",
|
|
118
|
+
timeZone: "UTC"
|
|
119
|
+
});
|
|
120
|
+
return Array.from({ length: 7 }, (_, index) => {
|
|
121
|
+
const weekday = (firstDayOfWeek + index) % 7;
|
|
122
|
+
const date = new Date(Date.UTC(2021, 7, 1 + weekday));
|
|
123
|
+
return {
|
|
124
|
+
key: weekday,
|
|
125
|
+
label: shortFormatter.format(date),
|
|
126
|
+
ariaLabel: longFormatter.format(date)
|
|
127
|
+
};
|
|
128
|
+
});
|
|
129
|
+
}
|
|
130
|
+
function monthHasSelectableDate(month, availability) {
|
|
131
|
+
const first = startOfMonth(month);
|
|
132
|
+
const last = endOfMonth(month);
|
|
133
|
+
for (let date = first; date <= last; date = addCalendarDays(date, 1)) if (!isDateUnavailable(date, availability)) return true;
|
|
134
|
+
return false;
|
|
135
|
+
}
|
|
136
|
+
function monthIntersectsBounds(month, availability) {
|
|
137
|
+
const min = normalizeDate(availability.min);
|
|
138
|
+
const max = normalizeDate(availability.max);
|
|
139
|
+
return (!min || compareDates(endOfMonth(month), min) >= 0) && (!max || compareDates(startOfMonth(month), max) <= 0);
|
|
140
|
+
}
|
|
141
|
+
function findNavigableMonth(requestedMonth, direction, availability) {
|
|
142
|
+
const min = normalizeDate(availability.min);
|
|
143
|
+
const max = normalizeDate(availability.max);
|
|
144
|
+
const hasDirectionalBound = direction === 1 ? Boolean(max) : Boolean(min);
|
|
145
|
+
let candidate = startOfMonth(requestedMonth);
|
|
146
|
+
if (direction === 1 && min && compareDates(endOfMonth(candidate), min) < 0) candidate = startOfMonth(min);
|
|
147
|
+
else if (direction === -1 && max && compareDates(startOfMonth(candidate), max) > 0) candidate = startOfMonth(max);
|
|
148
|
+
while (monthIntersectsBounds(candidate, availability)) {
|
|
149
|
+
if (monthHasSelectableDate(candidate, availability)) return candidate;
|
|
150
|
+
const followingMonth = addCalendarMonths(candidate, direction);
|
|
151
|
+
if (!monthIntersectsBounds(followingMonth, availability)) return null;
|
|
152
|
+
if (typeof availability.disabledDates === "function" && !hasDirectionalBound) return candidate;
|
|
153
|
+
candidate = followingMonth;
|
|
154
|
+
}
|
|
155
|
+
return null;
|
|
156
|
+
}
|
|
157
|
+
function findEnabledDate(search) {
|
|
158
|
+
let current = search.candidate;
|
|
159
|
+
for (let index = 0; index < 3660; index += 1) {
|
|
160
|
+
if (search.min && compareDates(current, search.min) < 0) return null;
|
|
161
|
+
if (search.max && compareDates(current, search.max) > 0) return null;
|
|
162
|
+
if (!isDateUnavailable(current, search.availability)) return current;
|
|
163
|
+
current = addCalendarDays(current, search.direction);
|
|
164
|
+
}
|
|
165
|
+
return null;
|
|
166
|
+
}
|
|
167
|
+
function findEnabledDateInMonth(candidate, direction, availability) {
|
|
168
|
+
const min = startOfMonth(candidate);
|
|
169
|
+
const max = endOfMonth(candidate);
|
|
170
|
+
return findEnabledDate({
|
|
171
|
+
candidate,
|
|
172
|
+
direction,
|
|
173
|
+
min,
|
|
174
|
+
max,
|
|
175
|
+
availability
|
|
176
|
+
}) ?? findEnabledDate({
|
|
177
|
+
candidate: addCalendarDays(candidate, -direction),
|
|
178
|
+
direction: direction === 1 ? -1 : 1,
|
|
179
|
+
min,
|
|
180
|
+
max,
|
|
181
|
+
availability
|
|
182
|
+
});
|
|
183
|
+
}
|
|
184
|
+
function getPreferredDateForMonth(options) {
|
|
185
|
+
const month = startOfMonth(options.month);
|
|
186
|
+
const selected = options.selectedDate;
|
|
187
|
+
if (selected && isSameMonth(selected, month) && !isDateUnavailable(selected, options.availability)) return selected;
|
|
188
|
+
if (isSameMonth(options.today, month) && !isDateUnavailable(options.today, options.availability)) return options.today;
|
|
189
|
+
return findEnabledDateInMonth(new Date(month.getFullYear(), month.getMonth(), Math.min(options.anchor.getDate(), endOfMonth(month).getDate())), options.direction, options.availability);
|
|
190
|
+
}
|
|
191
|
+
function getKeyboardTarget(action, firstDayOfWeek, availability) {
|
|
192
|
+
switch (action.key) {
|
|
193
|
+
case "ArrowLeft": return findEnabledDate({
|
|
194
|
+
candidate: addCalendarDays(action.date, -1),
|
|
195
|
+
direction: -1,
|
|
196
|
+
availability
|
|
197
|
+
});
|
|
198
|
+
case "ArrowRight": return findEnabledDate({
|
|
199
|
+
candidate: addCalendarDays(action.date, 1),
|
|
200
|
+
direction: 1,
|
|
201
|
+
availability
|
|
202
|
+
});
|
|
203
|
+
case "ArrowUp": return findEnabledDate({
|
|
204
|
+
candidate: addCalendarDays(action.date, -7),
|
|
205
|
+
direction: -1,
|
|
206
|
+
availability
|
|
207
|
+
});
|
|
208
|
+
case "ArrowDown": return findEnabledDate({
|
|
209
|
+
candidate: addCalendarDays(action.date, 7),
|
|
210
|
+
direction: 1,
|
|
211
|
+
availability
|
|
212
|
+
});
|
|
213
|
+
case "Home": {
|
|
214
|
+
const offset = (action.date.getDay() - firstDayOfWeek + 7) % 7;
|
|
215
|
+
const min = addCalendarDays(action.date, -offset);
|
|
216
|
+
return findEnabledDate({
|
|
217
|
+
candidate: min,
|
|
218
|
+
direction: 1,
|
|
219
|
+
min,
|
|
220
|
+
max: addCalendarDays(min, 6),
|
|
221
|
+
availability
|
|
222
|
+
});
|
|
223
|
+
}
|
|
224
|
+
case "End": {
|
|
225
|
+
const offset = (firstDayOfWeek + 6 - action.date.getDay() + 7) % 7;
|
|
226
|
+
const max = addCalendarDays(action.date, offset);
|
|
227
|
+
return findEnabledDate({
|
|
228
|
+
candidate: max,
|
|
229
|
+
direction: -1,
|
|
230
|
+
min: addCalendarDays(max, -6),
|
|
231
|
+
max,
|
|
232
|
+
availability
|
|
233
|
+
});
|
|
234
|
+
}
|
|
235
|
+
case "PageUp": return findEnabledDateInMonth(action.shiftKey ? addCalendarYears(action.date, -1) : addCalendarMonths(action.date, -1), -1, availability);
|
|
236
|
+
case "PageDown": return findEnabledDateInMonth(action.shiftKey ? addCalendarYears(action.date, 1) : addCalendarMonths(action.date, 1), 1, availability);
|
|
237
|
+
default: return null;
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
function resolveFocusableDate(context, action) {
|
|
241
|
+
const focusedDay = context.visibleDays.find((day) => isSameDate(day.date, action.focusedDate));
|
|
242
|
+
const selectedDay = context.visibleDays.find((day) => day.selected);
|
|
243
|
+
const todayDay = context.visibleDays.find((day) => day.today);
|
|
244
|
+
const focusedDate = focusedDay?.date ?? selectedDay?.date ?? todayDay?.date ?? context.visibleDays[0]?.date ?? null;
|
|
245
|
+
return focusedDate ? { focusedDate } : null;
|
|
246
|
+
}
|
|
247
|
+
function alignCalendarMonth(context, action) {
|
|
248
|
+
if (isSameMonth(action.focusedDate, context.month)) return null;
|
|
249
|
+
const direction = compareDates(context.month, action.previousMonth) >= 0 ? 1 : -1;
|
|
250
|
+
return { focusedDate: getPreferredDateForMonth({
|
|
251
|
+
month: context.month,
|
|
252
|
+
anchor: action.focusedDate,
|
|
253
|
+
selectedDate: context.selectedDate,
|
|
254
|
+
today: context.today,
|
|
255
|
+
direction,
|
|
256
|
+
availability: context.availability
|
|
257
|
+
}) ?? context.month };
|
|
258
|
+
}
|
|
259
|
+
function navigateCalendarMonth(context, action) {
|
|
260
|
+
if (context.disabled || action.amount === 0) return null;
|
|
261
|
+
const direction = action.amount > 0 ? 1 : -1;
|
|
262
|
+
const visibleMonth = findNavigableMonth(addCalendarMonths(context.month, action.amount), direction, context.availability);
|
|
263
|
+
if (!visibleMonth) return null;
|
|
264
|
+
return {
|
|
265
|
+
visibleMonth,
|
|
266
|
+
focusedDate: getPreferredDateForMonth({
|
|
267
|
+
month: visibleMonth,
|
|
268
|
+
anchor: action.focusedDate,
|
|
269
|
+
selectedDate: context.selectedDate,
|
|
270
|
+
today: context.today,
|
|
271
|
+
direction,
|
|
272
|
+
availability: context.availability
|
|
273
|
+
}) ?? visibleMonth
|
|
274
|
+
};
|
|
275
|
+
}
|
|
276
|
+
function moveCalendarFocus(context, action) {
|
|
277
|
+
const focusedDate = getKeyboardTarget(action, context.firstDayOfWeek, context.availability);
|
|
278
|
+
return focusedDate ? {
|
|
279
|
+
visibleMonth: startOfMonth(focusedDate),
|
|
280
|
+
focusedDate
|
|
281
|
+
} : null;
|
|
282
|
+
}
|
|
283
|
+
function decideCalendarBehavior(context, action) {
|
|
284
|
+
switch (action.type) {
|
|
285
|
+
case "resolve-focusable": return resolveFocusableDate(context, action);
|
|
286
|
+
case "align-month": return alignCalendarMonth(context, action);
|
|
287
|
+
case "navigate-month": return navigateCalendarMonth(context, action);
|
|
288
|
+
case "move-focus": return moveCalendarFocus(context, action);
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
function createCalendarBehavior(options) {
|
|
292
|
+
const month = startOfMonth(options.month);
|
|
293
|
+
const selectedDate = normalizeDate(options.selectedDate);
|
|
294
|
+
const today = toLocalDate(options.today);
|
|
295
|
+
const firstDayOfWeek = normalizeFirstDayOfWeek(options.firstDayOfWeek);
|
|
296
|
+
const availability = {
|
|
297
|
+
min: options.min,
|
|
298
|
+
max: options.max,
|
|
299
|
+
disabledDates: options.disabledDates
|
|
300
|
+
};
|
|
301
|
+
const days = createCalendarDays({
|
|
302
|
+
...options,
|
|
303
|
+
month,
|
|
304
|
+
selectedDate,
|
|
305
|
+
today
|
|
306
|
+
}, firstDayOfWeek);
|
|
307
|
+
const visibleDays = days.filter((day) => !day.hidden && !day.disabled && isSameMonth(day.date, month));
|
|
308
|
+
const view = {
|
|
309
|
+
days,
|
|
310
|
+
weeks: createCalendarWeeks(days),
|
|
311
|
+
weekdays: getCalendarWeekdays(options.locale, firstDayOfWeek, options.weekdayFormat ?? "short"),
|
|
312
|
+
monthLabel: new Intl.DateTimeFormat(options.locale, options.monthFormat ?? {
|
|
313
|
+
month: "long",
|
|
314
|
+
year: "numeric"
|
|
315
|
+
}).format(month),
|
|
316
|
+
previousDisabled: Boolean(options.disabled) || !findNavigableMonth(addCalendarMonths(month, -1), -1, availability),
|
|
317
|
+
nextDisabled: Boolean(options.disabled) || !findNavigableMonth(addCalendarMonths(month, 1), 1, availability)
|
|
318
|
+
};
|
|
319
|
+
const context = {
|
|
320
|
+
month,
|
|
321
|
+
selectedDate,
|
|
322
|
+
today,
|
|
323
|
+
firstDayOfWeek,
|
|
324
|
+
disabled: Boolean(options.disabled),
|
|
325
|
+
availability,
|
|
326
|
+
visibleDays
|
|
327
|
+
};
|
|
328
|
+
return {
|
|
329
|
+
view,
|
|
330
|
+
decide: (action) => decideCalendarBehavior(context, action)
|
|
331
|
+
};
|
|
332
|
+
}
|
|
333
|
+
//#endregion
|
|
334
|
+
//#region src/components/calendar/useCalendar.ts
|
|
335
|
+
function initialMonth(props) {
|
|
336
|
+
return startOfMonth(normalizeDate(props.month) ?? normalizeDate(props.defaultMonth) ?? normalizeDate(props.modelValue) ?? normalizeDate(props.defaultValue) ?? /* @__PURE__ */ new Date());
|
|
337
|
+
}
|
|
338
|
+
function useCalendar(props, emit) {
|
|
339
|
+
const rootRef = ref(null);
|
|
340
|
+
const today = shallowRef(toLocalDate(/* @__PURE__ */ new Date()));
|
|
341
|
+
const uncontrolledMonth = shallowRef(initialMonth(props));
|
|
342
|
+
const controllable = useControllableValue({
|
|
343
|
+
modelValue: () => props.modelValue,
|
|
344
|
+
defaultValue: () => normalizeDate(props.defaultValue),
|
|
345
|
+
onChange(value) {
|
|
346
|
+
if (!value) return;
|
|
347
|
+
emit.value(value);
|
|
348
|
+
emit.change(value);
|
|
349
|
+
}
|
|
350
|
+
});
|
|
351
|
+
const selectedDate = computed(() => normalizeDate(controllable.value.value));
|
|
352
|
+
const visibleMonth = computed(() => normalizeDate(props.month) ?? uncontrolledMonth.value);
|
|
353
|
+
const focusedDate = shallowRef(selectedDate.value && isSameMonth(selectedDate.value, visibleMonth.value) ? selectedDate.value : isSameMonth(today.value, visibleMonth.value) ? today.value : visibleMonth.value);
|
|
354
|
+
const behavior = computed(() => createCalendarBehavior({
|
|
355
|
+
month: visibleMonth.value,
|
|
356
|
+
selectedDate: selectedDate.value,
|
|
357
|
+
today: today.value,
|
|
358
|
+
firstDayOfWeek: props.firstDayOfWeek,
|
|
359
|
+
weekdayFormat: props.weekdayFormat,
|
|
360
|
+
locale: props.locale,
|
|
361
|
+
monthFormat: props.monthFormat,
|
|
362
|
+
fixedWeeks: props.fixedWeeks,
|
|
363
|
+
hideOutsideDates: props.hideOutsideDates,
|
|
364
|
+
disabled: props.disabled,
|
|
365
|
+
min: props.min,
|
|
366
|
+
max: props.max,
|
|
367
|
+
disabledDates: props.disabledDates
|
|
368
|
+
}));
|
|
369
|
+
const days = computed(() => behavior.value.view.days);
|
|
370
|
+
const weeks = computed(() => behavior.value.view.weeks);
|
|
371
|
+
const weekdays = computed(() => behavior.value.view.weekdays);
|
|
372
|
+
const monthLabel = computed(() => behavior.value.view.monthLabel);
|
|
373
|
+
const previousDisabled = computed(() => behavior.value.view.previousDisabled);
|
|
374
|
+
const nextDisabled = computed(() => behavior.value.view.nextDisabled);
|
|
375
|
+
const focusableDate = computed(() => behavior.value.decide({
|
|
376
|
+
type: "resolve-focusable",
|
|
377
|
+
focusedDate: focusedDate.value
|
|
378
|
+
})?.focusedDate ?? null);
|
|
379
|
+
const rootClass = computed(() => bem("rp-calendar", {
|
|
380
|
+
[`size-${props.size}`]: Boolean(props.size),
|
|
381
|
+
[`radius-${props.radius}`]: Boolean(props.radius),
|
|
382
|
+
disabled: props.disabled,
|
|
383
|
+
readonly: props.readonly
|
|
384
|
+
}));
|
|
385
|
+
let todayTimer;
|
|
386
|
+
let ownerDocument = null;
|
|
387
|
+
let ownerWindow = null;
|
|
388
|
+
watch(() => props.modelValue, (value) => {
|
|
389
|
+
const normalized = normalizeDate(value);
|
|
390
|
+
if (!normalized) return;
|
|
391
|
+
focusedDate.value = normalized;
|
|
392
|
+
if (props.month === void 0) uncontrolledMonth.value = startOfMonth(normalized);
|
|
393
|
+
}, { flush: "sync" });
|
|
394
|
+
watch(visibleMonth, (_month, previousMonth) => {
|
|
395
|
+
const transition = behavior.value.decide({
|
|
396
|
+
type: "align-month",
|
|
397
|
+
previousMonth,
|
|
398
|
+
focusedDate: focusedDate.value
|
|
399
|
+
});
|
|
400
|
+
if (transition) focusedDate.value = transition.focusedDate;
|
|
401
|
+
}, { flush: "sync" });
|
|
402
|
+
function setVisibleMonth(month) {
|
|
403
|
+
const normalized = startOfMonth(month);
|
|
404
|
+
if (isSameMonth(normalized, visibleMonth.value)) return;
|
|
405
|
+
if (props.month === void 0) uncontrolledMonth.value = normalized;
|
|
406
|
+
emit.month(normalized);
|
|
407
|
+
}
|
|
408
|
+
function selectDate(day) {
|
|
409
|
+
if (props.disabled || props.readonly || day.disabled || day.hidden) return;
|
|
410
|
+
const date = toLocalDate(day.date);
|
|
411
|
+
const calendarHadFocus = rootRef.value?.contains(rootRef.value.ownerDocument.activeElement) ?? false;
|
|
412
|
+
controllable.setValue(date);
|
|
413
|
+
focusedDate.value = date;
|
|
414
|
+
if (isSameMonth(date, visibleMonth.value)) return;
|
|
415
|
+
if (!calendarHadFocus || !rootRef.value?.contains(rootRef.value.ownerDocument.activeElement)) return;
|
|
416
|
+
focusDate(date);
|
|
417
|
+
}
|
|
418
|
+
function navigateMonth(amount) {
|
|
419
|
+
const transition = behavior.value.decide({
|
|
420
|
+
type: "navigate-month",
|
|
421
|
+
amount,
|
|
422
|
+
focusedDate: focusedDate.value
|
|
423
|
+
});
|
|
424
|
+
if (!transition?.visibleMonth) return;
|
|
425
|
+
focusedDate.value = transition.focusedDate;
|
|
426
|
+
setVisibleMonth(transition.visibleMonth);
|
|
427
|
+
}
|
|
428
|
+
async function focusDate(date) {
|
|
429
|
+
const normalized = toLocalDate(date);
|
|
430
|
+
focusedDate.value = normalized;
|
|
431
|
+
setVisibleMonth(normalized);
|
|
432
|
+
await nextTick();
|
|
433
|
+
rootRef.value?.querySelector(`[data-date="${toDateKey(normalized)}"]`)?.focus();
|
|
434
|
+
}
|
|
435
|
+
function onDayKeydown(event, day) {
|
|
436
|
+
if ((event.key === "Enter" || event.key === " ") && !day.disabled) {
|
|
437
|
+
event.preventDefault();
|
|
438
|
+
selectDate(day);
|
|
439
|
+
return;
|
|
440
|
+
}
|
|
441
|
+
const transition = behavior.value.decide({
|
|
442
|
+
type: "move-focus",
|
|
443
|
+
date: day.date,
|
|
444
|
+
key: event.key,
|
|
445
|
+
shiftKey: event.shiftKey
|
|
446
|
+
});
|
|
447
|
+
if (!transition) return;
|
|
448
|
+
event.preventDefault();
|
|
449
|
+
focusDate(transition.focusedDate);
|
|
450
|
+
}
|
|
451
|
+
function onDayFocus(day) {
|
|
452
|
+
focusedDate.value = day.date;
|
|
453
|
+
}
|
|
454
|
+
function scheduleTodayRefresh() {
|
|
455
|
+
if (todayTimer !== void 0) clearTimeout(todayTimer);
|
|
456
|
+
const now = /* @__PURE__ */ new Date();
|
|
457
|
+
const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
|
|
458
|
+
todayTimer = setTimeout(refreshToday, tomorrow.getTime() - now.getTime());
|
|
459
|
+
}
|
|
460
|
+
function refreshToday() {
|
|
461
|
+
const current = toLocalDate(/* @__PURE__ */ new Date());
|
|
462
|
+
const previous = today.value;
|
|
463
|
+
today.value = current;
|
|
464
|
+
if (!selectedDate.value && isSameDate(focusedDate.value, previous) && isSameMonth(current, visibleMonth.value)) focusedDate.value = current;
|
|
465
|
+
scheduleTodayRefresh();
|
|
466
|
+
}
|
|
467
|
+
function refreshTodayWhenVisible() {
|
|
468
|
+
if (ownerDocument?.visibilityState !== "hidden") refreshToday();
|
|
469
|
+
}
|
|
470
|
+
onMounted(() => {
|
|
471
|
+
ownerDocument = rootRef.value?.ownerDocument ?? document;
|
|
472
|
+
ownerWindow = ownerDocument.defaultView;
|
|
473
|
+
ownerDocument.addEventListener("visibilitychange", refreshTodayWhenVisible);
|
|
474
|
+
ownerWindow?.addEventListener("focus", refreshToday);
|
|
475
|
+
scheduleTodayRefresh();
|
|
476
|
+
});
|
|
477
|
+
onBeforeUnmount(() => {
|
|
478
|
+
if (todayTimer !== void 0) clearTimeout(todayTimer);
|
|
479
|
+
ownerDocument?.removeEventListener("visibilitychange", refreshTodayWhenVisible);
|
|
480
|
+
ownerWindow?.removeEventListener("focus", refreshToday);
|
|
481
|
+
});
|
|
482
|
+
return {
|
|
483
|
+
rootRef,
|
|
484
|
+
selectedDate,
|
|
485
|
+
visibleMonth,
|
|
486
|
+
days,
|
|
487
|
+
weeks,
|
|
488
|
+
weekdays,
|
|
489
|
+
monthLabel,
|
|
490
|
+
rootClass,
|
|
491
|
+
previousDisabled,
|
|
492
|
+
nextDisabled,
|
|
493
|
+
focusableDate,
|
|
494
|
+
selectDate,
|
|
495
|
+
navigateMonth,
|
|
496
|
+
onDayKeydown,
|
|
497
|
+
onDayFocus
|
|
498
|
+
};
|
|
499
|
+
}
|
|
500
|
+
//#endregion
|
|
501
|
+
//#region src/components/calendar/calendar.vue?vue&type=script&setup=true&vapor=true&lang.ts
|
|
502
|
+
var t0 = template("<th data-v-d3ae1d38> ");
|
|
503
|
+
var t1 = template(" ");
|
|
504
|
+
var t2 = template("<button data-v-d3ae1d38>");
|
|
505
|
+
var t3 = template("<td data-v-d3ae1d38>");
|
|
506
|
+
var t4 = template("<tr data-v-d3ae1d38>");
|
|
507
|
+
var t5 = template("<div data-v-d3ae1d38><div data-v-d3ae1d38><button data-v-d3ae1d38></button><span data-v-d3ae1d38> </span><button data-v-d3ae1d38></button></div><table data-v-d3ae1d38><thead data-v-d3ae1d38><tr data-v-d3ae1d38></thead><tbody data-v-d3ae1d38>", 1);
|
|
508
|
+
//#endregion
|
|
509
|
+
//#region src/components/calendar/calendar.vue
|
|
510
|
+
var calendar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
|
|
511
|
+
name: "RpCalendar",
|
|
512
|
+
inheritAttrs: false,
|
|
513
|
+
__name: "calendar",
|
|
514
|
+
props: {
|
|
515
|
+
id: {},
|
|
516
|
+
modelValue: { default: void 0 },
|
|
517
|
+
defaultValue: { default: null },
|
|
518
|
+
month: { default: void 0 },
|
|
519
|
+
defaultMonth: { default: void 0 },
|
|
520
|
+
locale: { default: void 0 },
|
|
521
|
+
firstDayOfWeek: { default: 0 },
|
|
522
|
+
weekdayFormat: { default: "short" },
|
|
523
|
+
monthFormat: { default: void 0 },
|
|
524
|
+
min: {},
|
|
525
|
+
max: {},
|
|
526
|
+
disabledDates: {},
|
|
527
|
+
fixedWeeks: {
|
|
528
|
+
type: Boolean,
|
|
529
|
+
default: true
|
|
530
|
+
},
|
|
531
|
+
hideOutsideDates: {
|
|
532
|
+
type: Boolean,
|
|
533
|
+
default: false
|
|
534
|
+
},
|
|
535
|
+
disabled: {
|
|
536
|
+
type: Boolean,
|
|
537
|
+
default: false
|
|
538
|
+
},
|
|
539
|
+
readonly: {
|
|
540
|
+
type: Boolean,
|
|
541
|
+
default: false
|
|
542
|
+
},
|
|
543
|
+
size: { default: "md" },
|
|
544
|
+
radius: { default: "sm" },
|
|
545
|
+
ariaLabel: { default: void 0 },
|
|
546
|
+
previousLabel: { default: "Previous month" },
|
|
547
|
+
nextLabel: { default: "Next month" },
|
|
548
|
+
classNames: {},
|
|
549
|
+
styles: {}
|
|
550
|
+
},
|
|
551
|
+
emits: [
|
|
552
|
+
"update:modelValue",
|
|
553
|
+
"update:month",
|
|
554
|
+
"change"
|
|
555
|
+
],
|
|
556
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
557
|
+
const props = __props;
|
|
558
|
+
const emit = __emit;
|
|
559
|
+
const { rootRef, visibleMonth, weeks, weekdays, monthLabel, rootClass, previousDisabled, nextDisabled, focusableDate, selectDate, navigateMonth, onDayKeydown, onDayFocus } = useCalendar(props, {
|
|
560
|
+
value: (value) => emit("update:modelValue", value),
|
|
561
|
+
month: (month) => emit("update:month", month),
|
|
562
|
+
change: (value) => emit("change", value)
|
|
563
|
+
});
|
|
564
|
+
const monthLabelId = `${useId()}-month`;
|
|
565
|
+
const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
|
|
566
|
+
const rootAttrs = computed(() => getRootAttrs({
|
|
567
|
+
id: props.id,
|
|
568
|
+
class: rootClass.value,
|
|
569
|
+
"data-month": toDateKey(visibleMonth.value),
|
|
570
|
+
"data-disabled": toPresenceAttribute(props.disabled),
|
|
571
|
+
"data-readonly": toPresenceAttribute(props.readonly)
|
|
572
|
+
}));
|
|
573
|
+
function getDayAttrs(day) {
|
|
574
|
+
return {
|
|
575
|
+
...getPartAttrs("day", { class: ["rp-calendar__day", {
|
|
576
|
+
"rp-calendar__day--outside": day.outside,
|
|
577
|
+
"rp-calendar__day--selected": day.selected,
|
|
578
|
+
"rp-calendar__day--today": day.today
|
|
579
|
+
}] }),
|
|
580
|
+
"data-date": day.key,
|
|
581
|
+
"data-outside": toPresenceAttribute(day.outside),
|
|
582
|
+
"data-selected": toPresenceAttribute(day.selected),
|
|
583
|
+
"data-today": toPresenceAttribute(day.today),
|
|
584
|
+
"data-disabled": toPresenceAttribute(props.disabled || day.disabled)
|
|
585
|
+
};
|
|
586
|
+
}
|
|
587
|
+
function isFocusable(day) {
|
|
588
|
+
return !props.disabled && !day.disabled && isSameDate(day.date, focusableDate.value);
|
|
589
|
+
}
|
|
590
|
+
__expose({
|
|
591
|
+
nativeElement: rootRef,
|
|
592
|
+
focus() {
|
|
593
|
+
(rootRef.value?.querySelector(".rp-calendar__day[tabindex=\"0\"]") ?? rootRef.value?.querySelector(".rp-calendar__control:not(:disabled)"))?.focus({ preventScroll: true });
|
|
594
|
+
}
|
|
595
|
+
});
|
|
596
|
+
const _setTemplateRef = createTemplateRefSetter();
|
|
597
|
+
const n29 = t5();
|
|
598
|
+
const n9 = child(n29);
|
|
599
|
+
const n3 = child(n9);
|
|
600
|
+
const n4 = next(n3, 1);
|
|
601
|
+
const n8 = next(n4, 2);
|
|
602
|
+
const n28 = next(n9, 1);
|
|
603
|
+
const n14 = child(n28);
|
|
604
|
+
const n13 = child(n14);
|
|
605
|
+
const n27 = next(n14, 1);
|
|
606
|
+
renderEffect(() => {
|
|
607
|
+
const _getPartAttrs = unref(getPartAttrs);
|
|
608
|
+
setDynamicProps(n29, [rootAttrs.value]);
|
|
609
|
+
setDynamicProps(n9, [_getPartAttrs("header", { class: "rp-calendar__header" })]);
|
|
610
|
+
setDynamicProps(n3, [_getPartAttrs("previousControl", { class: "rp-calendar__control rp-calendar__control--previous" }), {
|
|
611
|
+
type: "button",
|
|
612
|
+
"aria-label": __props.previousLabel,
|
|
613
|
+
disabled: unref(previousDisabled)
|
|
614
|
+
}]);
|
|
615
|
+
});
|
|
616
|
+
setInsertionState(n3, null, 0);
|
|
617
|
+
createSlot("previous-icon", null, () => {
|
|
618
|
+
return createComponent(unref(chevron_left_default), { "aria-hidden": "true" });
|
|
619
|
+
}, 1);
|
|
620
|
+
on(n3, "click", () => unref(navigateMonth)(-1));
|
|
621
|
+
const x4 = txt(n4);
|
|
622
|
+
renderEffect(() => {
|
|
623
|
+
const _getPartAttrs = unref(getPartAttrs);
|
|
624
|
+
setDynamicProps(n4, [
|
|
625
|
+
{ id: monthLabelId },
|
|
626
|
+
_getPartAttrs("monthLabel", { class: "rp-calendar__month-label" }),
|
|
627
|
+
{ "aria-live": "polite" }
|
|
628
|
+
]);
|
|
629
|
+
setText(x4, toDisplayString(unref(monthLabel)));
|
|
630
|
+
setDynamicProps(n8, [_getPartAttrs("nextControl", { class: "rp-calendar__control rp-calendar__control--next" }), {
|
|
631
|
+
type: "button",
|
|
632
|
+
"aria-label": __props.nextLabel,
|
|
633
|
+
disabled: unref(nextDisabled)
|
|
634
|
+
}]);
|
|
635
|
+
});
|
|
636
|
+
setInsertionState(n8, null, 0);
|
|
637
|
+
createSlot("next-icon", null, () => {
|
|
638
|
+
return createComponent(unref(chevron_right_default), { "aria-hidden": "true" });
|
|
639
|
+
}, 1);
|
|
640
|
+
on(n8, "click", () => unref(navigateMonth)(1));
|
|
641
|
+
renderEffect(() => {
|
|
642
|
+
const _getPartAttrs = unref(getPartAttrs);
|
|
643
|
+
const _ariaLabel = __props.ariaLabel;
|
|
644
|
+
setDynamicProps(n28, [_getPartAttrs("grid", { class: "rp-calendar__grid" }), {
|
|
645
|
+
role: "grid",
|
|
646
|
+
"aria-label": _ariaLabel,
|
|
647
|
+
"aria-labelledby": _ariaLabel ? void 0 : monthLabelId,
|
|
648
|
+
"aria-readonly": __props.readonly || void 0,
|
|
649
|
+
"aria-disabled": __props.disabled || void 0
|
|
650
|
+
}]);
|
|
651
|
+
setDynamicProps(n14, [_getPartAttrs("weekdays", { class: "rp-calendar__weekdays" })]);
|
|
652
|
+
});
|
|
653
|
+
setInsertionState(n13, null, 0);
|
|
654
|
+
createFor(() => unref(weekdays), (_for_item0) => {
|
|
655
|
+
const n12 = t0();
|
|
656
|
+
const x12 = txt(n12);
|
|
657
|
+
renderEffect(() => {
|
|
658
|
+
const _weekday = _for_item0.value;
|
|
659
|
+
setDynamicProps(n12, [unref(getPartAttrs)("weekday", { class: "rp-calendar__weekday" }), {
|
|
660
|
+
scope: "col",
|
|
661
|
+
"aria-label": _weekday.ariaLabel
|
|
662
|
+
}]);
|
|
663
|
+
setText(x12, toDisplayString(_weekday.label));
|
|
664
|
+
});
|
|
665
|
+
return n12;
|
|
666
|
+
}, (weekday) => weekday.key, 9);
|
|
667
|
+
setInsertionState(n27, null, 0);
|
|
668
|
+
createFor(() => unref(weeks), (_for_item0, _for_key0) => {
|
|
669
|
+
const n26 = t4();
|
|
670
|
+
renderEffect(() => setDynamicProps(n26, [unref(getPartAttrs)("week", { class: "rp-calendar__week" })]));
|
|
671
|
+
setInsertionState(n26, null, 0);
|
|
672
|
+
createFor(() => _for_item0.value, (_for_item1) => {
|
|
673
|
+
const n25 = t3();
|
|
674
|
+
renderEffect(() => {
|
|
675
|
+
const _day = _for_item1.value;
|
|
676
|
+
setDynamicProps(n25, [unref(getPartAttrs)("dayCell", { class: "rp-calendar__day-cell" }), {
|
|
677
|
+
role: "gridcell",
|
|
678
|
+
"aria-selected": _day.hidden ? void 0 : _day.selected
|
|
679
|
+
}]);
|
|
680
|
+
});
|
|
681
|
+
setInsertionState(n25, null, 0);
|
|
682
|
+
createIf(() => !_for_item1.value.hidden, () => {
|
|
683
|
+
const n24 = t2();
|
|
684
|
+
renderEffect(() => {
|
|
685
|
+
const _day = _for_item1.value;
|
|
686
|
+
setDynamicProps(n24, [getDayAttrs(_day), {
|
|
687
|
+
type: "button",
|
|
688
|
+
disabled: __props.disabled || _day.disabled,
|
|
689
|
+
"aria-label": _day.ariaLabel,
|
|
690
|
+
"aria-current": _day.today ? "date" : void 0,
|
|
691
|
+
tabindex: isFocusable(_day) ? 0 : -1
|
|
692
|
+
}]);
|
|
693
|
+
});
|
|
694
|
+
setInsertionState(n24, null, 0);
|
|
695
|
+
createSlot("day", { $: [() => _for_item1.value, { select: () => (() => unref(selectDate)(_for_item1.value)) }] }, () => {
|
|
696
|
+
const n23 = t1();
|
|
697
|
+
renderEffect(() => setText(n23, toDisplayString(_for_item1.value.label)));
|
|
698
|
+
return n23;
|
|
699
|
+
}, 1);
|
|
700
|
+
on(n24, "click", () => unref(selectDate)(_for_item1.value));
|
|
701
|
+
on(n24, "focus", () => unref(onDayFocus)(_for_item1.value));
|
|
702
|
+
on(n24, "keydown", ($event) => unref(onDayKeydown)($event, _for_item1.value));
|
|
703
|
+
return n24;
|
|
704
|
+
});
|
|
705
|
+
return n25;
|
|
706
|
+
}, (day) => day.key, 9);
|
|
707
|
+
return n26;
|
|
708
|
+
}, (week, weekIndex) => weekIndex, 9);
|
|
709
|
+
_setTemplateRef(n29, rootRef, null, "rootRef");
|
|
710
|
+
return n29;
|
|
711
|
+
}
|
|
712
|
+
}), [["__scopeId", "data-v-d3ae1d38"]]);
|
|
713
|
+
//#endregion
|
|
714
|
+
export { parseDateKey as a, normalizeDate as i, isDateUnavailable as n, toLocalDate as o, isValidDate as r, calendar_default as t };
|