@uzum-tech/ui 1.12.21 → 1.13.0

package/es/date-picker-v2/src/panel/CalendarPanel.js

@@ -0,0 +1,186 @@
+import { h, defineComponent, computed, inject } from 'vue';
+import { UScrollbar, UBaseIcon } from '../../../_internal';
+import { ChevronDownIcon } from '../../../_internal/icons';
+import { generateDatesForMonth, generateAllMonths, generateYears, getMonthLabel, getWeekdayNames } from '../utils';
+import { datePickerV2InjectionKey } from '../interface';
+import { YEAR_GROUP_HEIGHT, START_YEAR, END_YEAR } from '../config';
+import { useCalendarScroll } from '../composables/useCalendarScroll';
+export default defineComponent({
+    name: 'CalendarPanel',
+    props: {
+        value: [Number, null],
+        displayYear: {
+            type: Number,
+            required: true
+        },
+        displayMonth: {
+            type: Number,
+            required: true
+        },
+        showYearDropdown: {
+            type: Boolean,
+            required: true
+        },
+        isDateDisabled: Function,
+        onDateClick: {
+            type: Function,
+            required: true
+        },
+        onMonthSelect: {
+            type: Function,
+            required: true
+        },
+        onYearSelect: {
+            type: Function,
+            required: true
+        },
+        onToggleYearDropdown: {
+            type: Function,
+            required: true
+        },
+        onMonthScroll: {
+            type: Function,
+            required: true
+        },
+        style: [Object, String],
+        themeClass: String
+    },
+    setup(props, { expose }) {
+        const injection = inject(datePickerV2InjectionKey);
+        const mergedClsPrefix = (injection === null || injection === void 0 ? void 0 : injection.mergedClsPrefixRef.value) || 'u';
+        const dateLocaleRef = injection === null || injection === void 0 ? void 0 : injection.dateLocaleRef;
+        const localeRef = injection === null || injection === void 0 ? void 0 : injection.localeRef;
+        const dateFnsOptions = computed(() => {
+            var _a;
+            const loc = (_a = dateLocaleRef === null || dateLocaleRef === void 0 ? void 0 : dateLocaleRef.value) === null || _a === void 0 ? void 0 : _a.locale;
+            return loc ? { locale: loc } : undefined;
+        });
+        const now = Date.now();
+        // Используем composable для скролла
+        const { monthScrollbarRef, yearScrollbarRef, calendarScrollbarRef, scrollToMonthInMonthList, scrollToYear, scrollToMonthInCalendar: scrollToMonthInCalendarRaw } = useCalendarScroll();
+        // Все месяцы для навигации (с локализацией)
+        const monthFormat = computed(() => { var _a; return (_a = localeRef === null || localeRef === void 0 ? void 0 : localeRef.value) === null || _a === void 0 ? void 0 : _a.monthFormat; });
+        const allMonthsRef = computed(() => generateAllMonths(START_YEAR, END_YEAR, dateFnsOptions.value, monthFormat.value));
+        // Названия дней недели (с локализацией)
+        const dayFormat = computed(() => { var _a; return (_a = localeRef === null || localeRef === void 0 ? void 0 : localeRef.value) === null || _a === void 0 ? void 0 : _a.dayFormat; });
+        const weekdayNamesRef = computed(() => getWeekdayNames(dateFnsOptions.value, dayFormat.value));
+        // Все годы для dropdown
+        const yearsRef = computed(() => generateYears());
+        // Группировка месяцев по годам для отображения с заголовками
+        const groupedMonthsRef = computed(() => {
+            const months = allMonthsRef.value;
+            const groups = [];
+            let currentYear = -1;
+            let currentGroup = [];
+            for (const month of months) {
+                if (month.year !== currentYear) {
+                    if (currentGroup.length > 0) {
+                        groups.push({ year: currentYear, months: currentGroup });
+                    }
+                    currentYear = month.year;
+                    currentGroup = [];
+                }
+                currentGroup.push(month);
+            }
+            if (currentGroup.length > 0) {
+                groups.push({ year: currentYear, months: currentGroup });
+            }
+            return groups;
+        });
+        // Все месяцы текущего года с их днями для скролла
+        const yearMonthsWithDatesRef = computed(() => {
+            var _a;
+            const year = props.displayYear;
+            const months = [];
+            for (let month = 0; month < 12; month++) {
+                months.push({
+                    year,
+                    month,
+                    label: getMonthLabel(month, dateFnsOptions.value),
+                    dates: generateDatesForMonth(year, month, (_a = props.value) !== null && _a !== void 0 ? _a : null, null, now, props.isDateDisabled)
+                });
+            }
+            return months;
+        });
+        function scrollToMonthInCalendar(month) {
+            const monthRows = yearMonthsWithDatesRef.value.map((item) => Math.ceil(item.dates.length / 7));
+            scrollToMonthInCalendarRaw(month, monthRows);
+        }
+        // Экспортируем методы для родительского компонента
+        expose({
+            scrollToMonthInMonthList,
+            scrollToYear,
+            scrollToMonthInCalendar
+        });
+        return {
+            mergedClsPrefix,
+            allMonthsRef,
+            groupedMonthsRef,
+            yearsRef,
+            yearMonthsWithDatesRef,
+            weekdayNamesRef,
+            monthScrollbarRef,
+            yearScrollbarRef,
+            calendarScrollbarRef,
+            now
+        };
+    },
+    render() {
+        const { mergedClsPrefix, displayYear, displayMonth, showYearDropdown, groupedMonthsRef, yearsRef, yearMonthsWithDatesRef, weekdayNamesRef } = this;
+        return (h("div", { class: [`${mergedClsPrefix}-date-picker-v2-panel`, this.themeClass], style: this.style },
+            h("div", { class: `${mergedClsPrefix}-date-picker-v2-panel__left` },
+                h("div", { class: [
+                        `${mergedClsPrefix}-date-picker-v2-panel__year-trigger`,
+                        showYearDropdown &&
+                            `${mergedClsPrefix}-date-picker-v2-panel__year-trigger--active`
+                    ], onClick: this.onToggleYearDropdown },
+                    h("span", null, displayYear),
+                    h(UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(ChevronDownIcon, null) })),
+                showYearDropdown ? (h("div", { class: `${mergedClsPrefix}-date-picker-v2-panel__year-dropdown` },
+                    h(UScrollbar, { ref: "yearScrollbarRef", style: { maxHeight: '320px' } },
+                        h("div", { class: `${mergedClsPrefix}-date-picker-v2-panel__year-list` }, yearsRef.map((item) => (h("div", { key: item.year, class: [
+                                `${mergedClsPrefix}-date-picker-v2-panel__year-item`,
+                                item.year === displayYear &&
+                                    `${mergedClsPrefix}-date-picker-v2-panel__year-item--selected`
+                            ], onClick: () => {
+                                this.onYearSelect(item.year);
+                            } }, item.year))))))) : (h(UScrollbar, { ref: "monthScrollbarRef", style: { flex: 1 }, onScroll: (e) => {
+                        const target = e.target;
+                        const scrollTop = target.scrollTop;
+                        // Определяем год по позиции скролла
+                        const yearIndex = Math.floor(scrollTop / YEAR_GROUP_HEIGHT);
+                        const year = START_YEAR + yearIndex;
+                        this.onMonthScroll(year);
+                    } },
+                    h("div", { class: `${mergedClsPrefix}-date-picker-v2-panel__month-list` }, groupedMonthsRef.map((group) => (h("div", { key: group.year, class: `${mergedClsPrefix}-date-picker-v2-panel__year-group` },
+                        h("div", { class: `${mergedClsPrefix}-date-picker-v2-panel__year-header` }, group.year),
+                        group.months.map((item) => (h("div", { key: String(item.year) + '-' + String(item.month), class: [
+                                `${mergedClsPrefix}-date-picker-v2-panel__month-item`,
+                                item.year === displayYear &&
+                                    item.month === displayMonth &&
+                                    `${mergedClsPrefix}-date-picker-v2-panel__month-item--selected`
+                            ], onClick: () => {
+                                this.onMonthSelect(item.year, item.month);
+                            } }, item.label)))))))))),
+            h("div", { class: `${mergedClsPrefix}-date-picker-v2-panel__right` },
+                h("div", { class: `${mergedClsPrefix}-date-picker-v2-panel__weekdays` }, weekdayNamesRef.map((day, i) => (h("div", { key: day, class: [
+                        `${mergedClsPrefix}-date-picker-v2-panel__weekday`,
+                        i >= 5 &&
+                            `${mergedClsPrefix}-date-picker-v2-panel__weekday--weekend`
+                    ] }, day)))),
+                h(UScrollbar, { ref: "calendarScrollbarRef", style: { flex: 1 } },
+                    h("div", { class: `${mergedClsPrefix}-date-picker-v2-panel__calendar-scroll` }, yearMonthsWithDatesRef.map((monthData) => (h("div", { key: `${monthData.year}-${monthData.month}`, class: `${mergedClsPrefix}-date-picker-v2-panel__month-section` },
+                        h("div", { class: `${mergedClsPrefix}-date-picker-v2-panel__month-title` }, monthData.label),
+                        h("div", { class: `${mergedClsPrefix}-date-picker-v2-panel__dates` }, monthData.dates.map((dateItem) => dateItem.isCurrentMonth ? (h("div", { key: dateItem.ts, class: [
+                                `${mergedClsPrefix}-date-picker-v2-panel__date`,
+                                dateItem.isCurrentDate &&
+                                    `${mergedClsPrefix}-date-picker-v2-panel__date--current`,
+                                dateItem.selected &&
+                                    `${mergedClsPrefix}-date-picker-v2-panel__date--selected`,
+                                dateItem.disabled &&
+                                    `${mergedClsPrefix}-date-picker-v2-panel__date--disabled`
+                            ], onClick: () => {
+                                this.onDateClick(dateItem.ts);
+                            } }, dateItem.date)) : (h("div", { key: dateItem.ts, class: `${mergedClsPrefix}-date-picker-v2-panel__date ${mergedClsPrefix}-date-picker-v2-panel__date--empty` }))))))))))));
+    }
+});