@uzum-tech/ui 1.12.21 → 1.13.0

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

@@ -0,0 +1,188 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const _internal_1 = require("../../../_internal");
+const icons_1 = require("../../../_internal/icons");
+const utils_1 = require("../utils");
+const interface_1 = require("../interface");
+const config_1 = require("../config");
+const useCalendarScroll_1 = require("../composables/useCalendarScroll");
+exports.default = (0, vue_1.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 = (0, vue_1.inject)(interface_1.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 = (0, vue_1.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 } = (0, useCalendarScroll_1.useCalendarScroll)();
+        // Все месяцы для навигации (с локализацией)
+        const monthFormat = (0, vue_1.computed)(() => { var _a; return (_a = localeRef === null || localeRef === void 0 ? void 0 : localeRef.value) === null || _a === void 0 ? void 0 : _a.monthFormat; });
+        const allMonthsRef = (0, vue_1.computed)(() => (0, utils_1.generateAllMonths)(config_1.START_YEAR, config_1.END_YEAR, dateFnsOptions.value, monthFormat.value));
+        // Названия дней недели (с локализацией)
+        const dayFormat = (0, vue_1.computed)(() => { var _a; return (_a = localeRef === null || localeRef === void 0 ? void 0 : localeRef.value) === null || _a === void 0 ? void 0 : _a.dayFormat; });
+        const weekdayNamesRef = (0, vue_1.computed)(() => (0, utils_1.getWeekdayNames)(dateFnsOptions.value, dayFormat.value));
+        // Все годы для dropdown
+        const yearsRef = (0, vue_1.computed)(() => (0, utils_1.generateYears)());
+        // Группировка месяцев по годам для отображения с заголовками
+        const groupedMonthsRef = (0, vue_1.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 = (0, vue_1.computed)(() => {
+            var _a;
+            const year = props.displayYear;
+            const months = [];
+            for (let month = 0; month < 12; month++) {
+                months.push({
+                    year,
+                    month,
+                    label: (0, utils_1.getMonthLabel)(month, dateFnsOptions.value),
+                    dates: (0, utils_1.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 ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-date-picker-v2-panel`, this.themeClass], style: this.style },
+            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-picker-v2-panel__left` },
+                (0, vue_1.h)("div", { class: [
+                        `${mergedClsPrefix}-date-picker-v2-panel__year-trigger`,
+                        showYearDropdown &&
+                            `${mergedClsPrefix}-date-picker-v2-panel__year-trigger--active`
+                    ], onClick: this.onToggleYearDropdown },
+                    (0, vue_1.h)("span", null, displayYear),
+                    (0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.ChevronDownIcon, null) })),
+                showYearDropdown ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-picker-v2-panel__year-dropdown` },
+                    (0, vue_1.h)(_internal_1.UScrollbar, { ref: "yearScrollbarRef", style: { maxHeight: '320px' } },
+                        (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-picker-v2-panel__year-list` }, yearsRef.map((item) => ((0, vue_1.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))))))) : ((0, vue_1.h)(_internal_1.UScrollbar, { ref: "monthScrollbarRef", style: { flex: 1 }, onScroll: (e) => {
+                        const target = e.target;
+                        const scrollTop = target.scrollTop;
+                        // Определяем год по позиции скролла
+                        const yearIndex = Math.floor(scrollTop / config_1.YEAR_GROUP_HEIGHT);
+                        const year = config_1.START_YEAR + yearIndex;
+                        this.onMonthScroll(year);
+                    } },
+                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-picker-v2-panel__month-list` }, groupedMonthsRef.map((group) => ((0, vue_1.h)("div", { key: group.year, class: `${mergedClsPrefix}-date-picker-v2-panel__year-group` },
+                        (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-picker-v2-panel__year-header` }, group.year),
+                        group.months.map((item) => ((0, vue_1.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)))))))))),
+            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-picker-v2-panel__right` },
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-picker-v2-panel__weekdays` }, weekdayNamesRef.map((day, i) => ((0, vue_1.h)("div", { key: day, class: [
+                        `${mergedClsPrefix}-date-picker-v2-panel__weekday`,
+                        i >= 5 &&
+                            `${mergedClsPrefix}-date-picker-v2-panel__weekday--weekend`
+                    ] }, day)))),
+                (0, vue_1.h)(_internal_1.UScrollbar, { ref: "calendarScrollbarRef", style: { flex: 1 } },
+                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-picker-v2-panel__calendar-scroll` }, yearMonthsWithDatesRef.map((monthData) => ((0, vue_1.h)("div", { key: `${monthData.year}-${monthData.month}`, class: `${mergedClsPrefix}-date-picker-v2-panel__month-section` },
+                        (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-picker-v2-panel__month-title` }, monthData.label),
+                        (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-picker-v2-panel__dates` }, monthData.dates.map((dateItem) => dateItem.isCurrentMonth ? ((0, vue_1.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)) : ((0, vue_1.h)("div", { key: dateItem.ts, class: `${mergedClsPrefix}-date-picker-v2-panel__date ${mergedClsPrefix}-date-picker-v2-panel__date--empty` }))))))))))));
+    }
+});