UNPKG

@opensig/opendesign

Version:

150 lines (149 loc) 6.64 kB
import { computed } from "vue"; import dayjs from "dayjs"; import { useI18n } from "../locale/index.mjs"; function parseDateBound(value) { return value ? dayjs(value) : null; } function resolveYearRange(parsedMin, parsedMax) { return { minYear: parsedMin ? parsedMin.year() : 1900, maxYear: parsedMax ? parsedMax.year() : 2100 }; } function buildYearOptions(minYear, maxYear, yearUnit) { const years = []; for (let y = minYear; y <= maxYear; y++) { years.push({ label: `${y}${yearUnit}`, value: y }); } return years; } function buildMonthOptions({ currentYear, parsedMin, parsedMax, getLabel }) { const minMonth = parsedMin && currentYear === parsedMin.year() ? parsedMin.month() : 0; const maxMonth = parsedMax && currentYear === parsedMax.year() ? parsedMax.month() : 11; const months = []; for (let m = minMonth; m <= maxMonth; m++) { months.push({ label: getLabel(m), value: m }); } return months; } function buildDayOptions({ currentYear, currentMonth, parsedMin, parsedMax, dayUnit }) { const daysInMonth = dayjs().year(currentYear).month(currentMonth).daysInMonth(); const minDay = parsedMin && currentYear === parsedMin.year() && currentMonth === parsedMin.month() ? parsedMin.date() : 1; const maxDay = parsedMax && currentYear === parsedMax.year() && currentMonth === parsedMax.month() ? parsedMax.date() : daysInMonth; const days = []; for (let d = minDay; d <= maxDay; d++) { days.push({ label: `${d}${dayUnit}`, value: d }); } return days; } function isMonthItemDisabled(year, month, options) { var _a, _b; const testDate = dayjs().year(year).month(month).date(1); const params = { date: testDate.toDate(), year: testDate.year(), month: testDate.month(), day: testDate.date() }; return !!(((_a = options.disabledMonth) == null ? void 0 : _a.call(options, params)) || ((_b = options.disabledDate) == null ? void 0 : _b.call(options, params))); } function computeDisabledMonths({ currentYear, disabledDate, disabledMonth }) { if (!disabledDate && !disabledMonth) return void 0; const disabled = []; for (let m = 0; m < 12; m++) { if (isMonthItemDisabled(currentYear, m, { disabledDate, disabledMonth })) disabled.push(m); } return disabled.length > 0 ? disabled : void 0; } function isDayDisabled({ year, month, day, disabledDate }) { const testDate = dayjs().year(year).month(month).date(day); const params = { date: testDate.toDate(), year: testDate.year(), month: testDate.month(), day: testDate.date() }; return disabledDate(params); } function computeDisabledDays({ currentYear, currentMonth, disabledDate }) { if (!disabledDate) return void 0; const disabled = []; for (let d = 1; d <= 31; d++) { const testDate = dayjs().year(currentYear).month(currentMonth).date(d); if (testDate.month() !== currentMonth && d > testDate.daysInMonth()) break; if (isDayDisabled({ year: currentYear, month: currentMonth, day: d, disabledDate })) disabled.push(d); } return disabled.length > 0 ? disabled : void 0; } function isYearItemDisabled(year, options) { const testDate = dayjs().year(year).month(0).date(1); const { disabledDate, disabledYear } = options; return !!((disabledYear == null ? void 0 : disabledYear({ date: testDate.toDate(), year })) || (disabledDate == null ? void 0 : disabledDate({ date: testDate.toDate(), year, month: 0, day: 1 }))); } function computeDisabledYears({ yearOptions, disabledDate, disabledYear }) { if (!disabledDate && !disabledYear) return void 0; const disabled = []; for (const opt of yearOptions) { if (isYearItemDisabled(opt.value, { disabledDate, disabledYear })) disabled.push(opt.value); } return disabled.length > 0 ? disabled : void 0; } function useDateBounds(minDate, maxDate) { const parsedMinDate = computed(() => parseDateBound(minDate == null ? void 0 : minDate.value)); const parsedMaxDate = computed(() => parseDateBound(maxDate == null ? void 0 : maxDate.value)); return { parsedMinDate, parsedMaxDate }; } function useDateOptions({ parsedMinDate, parsedMaxDate, currentYear, currentMonth, getMonthLabel, getYearUnit, getDayUnit }) { const yearOptions = computed(() => { const { minYear, maxYear } = resolveYearRange(parsedMinDate.value, parsedMaxDate.value); return buildYearOptions(minYear, maxYear, getYearUnit()); }); const monthOptions = computed( () => buildMonthOptions({ currentYear: currentYear.value, parsedMin: parsedMinDate.value, parsedMax: parsedMaxDate.value, getLabel: getMonthLabel }) ); const dayOptions = computed( () => buildDayOptions({ currentYear: currentYear.value, currentMonth: currentMonth.value, parsedMin: parsedMinDate.value, parsedMax: parsedMaxDate.value, dayUnit: getDayUnit() }) ); return { yearOptions, monthOptions, dayOptions }; } function useDateDisabledOptions({ yearOptions, currentYear, currentMonth, disabledDate, disabledMonth, disabledYear }) { const disabledMonthOptions = computed( () => computeDisabledMonths({ currentYear: currentYear.value, disabledDate: disabledDate == null ? void 0 : disabledDate.value, disabledMonth: disabledMonth == null ? void 0 : disabledMonth.value }) ); const disabledDayOptions = computed( () => computeDisabledDays({ currentYear: currentYear.value, currentMonth: currentMonth.value, disabledDate: disabledDate == null ? void 0 : disabledDate.value }) ); const disabledYearOptions = computed( () => computeDisabledYears({ yearOptions: yearOptions.value, disabledDate: disabledDate == null ? void 0 : disabledDate.value, disabledYear: disabledYear == null ? void 0 : disabledYear.value }) ); return { disabledYearOptions, disabledMonthOptions, disabledDayOptions }; } const useDatePickerOptions = ({ currentYear, currentMonth, disabledDate, disabledMonth, disabledYear, minDate, maxDate }) => { const { t } = useI18n(); const { parsedMinDate, parsedMaxDate } = useDateBounds(minDate, maxDate); const { yearOptions, monthOptions, dayOptions } = useDateOptions({ parsedMinDate, parsedMaxDate, currentYear, currentMonth, getMonthLabel: (m) => t(`datePicker.monthsShort.${m}`), getYearUnit: () => t("datePicker.yearUnit"), getDayUnit: () => t("datePicker.dayUnit") }); const { disabledYearOptions, disabledMonthOptions, disabledDayOptions } = useDateDisabledOptions({ yearOptions, currentYear, currentMonth, disabledDate, disabledMonth, disabledYear }); return { yearOptions, monthOptions, dayOptions, disabledYearOptions, disabledMonthOptions, disabledDayOptions }; }; export { useDatePickerOptions };