@uzum-tech/ui 1.12.21 → 1.13.0

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

@@ -0,0 +1,205 @@
+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: 'CalendarRangePanel',
+    props: {
+        value: {
+            type: [Array, null],
+            default: null
+        },
+        displayYear: {
+            type: Number,
+            required: true
+        },
+        displayMonth: {
+            type: Number,
+            required: true
+        },
+        showYearDropdown: {
+            type: Boolean,
+            required: true
+        },
+        isSelecting: {
+            type: Boolean,
+            required: true
+        },
+        isDateDisabled: Function,
+        onDateClick: {
+            type: Function,
+            required: true
+        },
+        onDateMouseEnter: {
+            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, _b; return (_b = (_a = localeRef === null || localeRef === void 0 ? void 0 : localeRef.value) === null || _a === void 0 ? void 0 : _a.monthFormat) !== null && _b !== void 0 ? _b : 'MMM'; });
+        const allMonthsRef = computed(() => generateAllMonths(START_YEAR, END_YEAR, dateFnsOptions.value, monthFormat.value));
+        // Названия дней недели (с локализацией)
+        const dayFormat = computed(() => { var _a, _b; return (_b = (_a = localeRef === null || localeRef === void 0 ? void 0 : localeRef.value) === null || _a === void 0 ? void 0 : _a.dayFormat) !== null && _b !== void 0 ? _b : 'eeeeee'; });
+        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(() => {
+            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, null, // single value не используется для range
+                    props.value, 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.inRange &&
+                                    `${mergedClsPrefix}-date-picker-v2-panel__date--in-range`,
+                                dateItem.isRangeStart &&
+                                    `${mergedClsPrefix}-date-picker-v2-panel__date--range-start`,
+                                dateItem.isRangeEnd &&
+                                    `${mergedClsPrefix}-date-picker-v2-panel__date--range-end`,
+                                dateItem.disabled &&
+                                    `${mergedClsPrefix}-date-picker-v2-panel__date--disabled`
+                            ], onClick: () => {
+                                this.onDateClick(dateItem.ts);
+                            }, onMouseenter: () => {
+                                this.onDateMouseEnter(dateItem.ts);
+                            } }, dateItem.date)) : (h("div", { key: dateItem.ts, class: `${mergedClsPrefix}-date-picker-v2-panel__date ${mergedClsPrefix}-date-picker-v2-panel__date--empty` }))))))))))));
+    }
+});

package/es/date-picker-v2/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/es/date-picker-v2/src/styles/index.cssr.js

@@ -0,0 +1,190 @@
+import { c, cB, cE, cM } from '../../../_utils/cssr';
+import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr';
+export default c([cB('date-picker-v2', `
+ position: relative;
+ z-index: auto;
+ `, [cB('date-picker-v2-icon', `
+ color: var(--u-icon-color);
+ transition: color .3s var(--u-bezier);
+ `), cE('separator', `
+ color: var(--u-panel-text-color);
+ font-size: 14px;
+ user-select: none;
+ `), cM('disabled', [cB('date-picker-v2-icon', `
+ color: var(--u-icon-color-disabled);
+ `)])]), cB('date-picker-v2-panel', `
+ display: flex;
+ width: max-content;
+ height: 410px;
+ background-color: var(--u-panel-color);
+ border-radius: var(--u-panel-border-radius);
+ box-shadow: var(--u-panel-box-shadow);
+ overflow: hidden;
+ outline: none;
+ margin: 6px 0;
+ `, [fadeInScaleUpTransition(), cE('left', `
+ width: 138px;
+ border-right: 1px solid var(--u-divider-color);
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ `), cE('year-trigger', `
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 11px 24px;
+ height: 42px;
+ box-sizing: border-box;
+ background-color: var(--u-year-trigger-color);
+ border-bottom: 1px solid var(--u-divider-color);
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--u-year-trigger-text-color);
+ transition: background-color .2s var(--u-bezier);
+ `, [c('&:hover', `
+ background-color: var(--u-year-trigger-color-hover);
+ `), cM('active', `
+ background-color: var(--u-year-trigger-color-hover);
+ `, [c('.u-icon', `
+ transform: rotate(180deg);
+ `)]), c('.u-icon', `
+ width: 20px;
+ height: 20px;
+ transition: transform .2s var(--u-bezier);
+ `)]), cE('year-dropdown', `
+ flex: 1;
+ overflow: hidden;
+ `), cE('year-list', `
+ padding: 8px 0;
+ `), cE('year-item', `
+ padding: 12px 24px;
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--u-panel-text-color);
+ cursor: pointer;
+ transition: background-color .2s var(--u-bezier);
+ `, [c('&:hover', `
+ background-color: var(--u-month-item-color-hover);
+ `), cM('selected', `
+ color: var(--u-month-item-text-color-active);
+ background-color: var(--u-month-item-color-active);
+ `)]), cE('month-list', `
+ padding: 0;
+ `), cE('year-group', `
+ position: relative;
+ `), cE('year-header', `
+ z-index: 1;
+ padding: 11px 24px;
+ height: 42px;
+ box-sizing: border-box;
+ background-color: var(--u-year-trigger-color);
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--u-year-trigger-text-color);
+ `), cE('month-item', `
+ padding: 14px 24px;
+ height: var(--u-month-item-height);
+ box-sizing: border-box;
+ font-size: 16px;
+ font-weight: 500;
+ color: var(--u-panel-text-color);
+ cursor: pointer;
+ transition: background-color .2s var(--u-bezier), color .2s var(--u-bezier);
+ `, [c('&:hover', `
+ background-color: var(--u-month-item-color-hover);
+ `), cM('selected', `
+ color: var(--u-month-item-text-color-active);
+ background-color: var(--u-month-item-color-active);
+ `)]), cE('right', `
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ `), cE('weekdays', `
+ display: grid;
+ grid-template-columns: repeat(7, 1fr);
+ padding: 0 12px;
+ height: 42px;
+ align-items: center;
+ border-bottom: 1px solid var(--u-divider-color);
+ background-color: var(--u-panel-color);
+ position: sticky;
+ top: 0;
+ z-index: 1;
+ `), cE('weekday', `
+ text-align: center;
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--u-weekday-text-color);
+ `, [cM('weekend', `
+ color: var(--u-weekend-text-color);
+ `)]), cE('calendar-scroll', `
+ padding: 0;
+ `), cE('month-section', `
+ margin-bottom: 16px;
+ `), cE('month-title', `
+ padding: 12px 12px 8px;
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--u-panel-text-color);
+ `), cE('dates', `
+ display: grid;
+ grid-template-columns: repeat(7, 1fr);
+ gap: 4px;
+ padding: 0 12px;
+ `), cE('date', `
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 42px;
+ height: 42px;
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--u-item-text-color);
+ border-radius: var(--u-item-border-radius);
+ cursor: pointer;
+ position: relative;
+ transition:
+ background-color .2s var(--u-bezier),
+ color .2s var(--u-bezier);
+ `, [c('&:hover', `
+ background-color: var(--u-item-color-hover);
+ `), cM('other-month', `
+ color: var(--u-item-text-color-other-month);
+ `), cM('empty', `
+ pointer-events: none;
+ cursor: default;
+ `, [c('&:hover', `
+ background-color: transparent;
+ `)]), cM('current', `
+ color: var(--u-item-text-color);
+ `, [c('&::before', `
+ content: '';
+ position: absolute;
+ bottom: 8px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 4px;
+ height: 2px;
+ border-radius: 1px;
+ background-color: var(--u-current-date-indicator-color);
+ `)]), cM('selected', `
+ background-color: var(--u-item-color-active);
+ color: var(--u-item-text-color-active);
+ `, [c('&:hover', `
+ background-color: var(--u-item-color-active);
+ `)]), cM('in-range', `
+ background-color: var(--u-item-color-included);
+ `), cM('range-start', `
+ background-color: var(--u-item-color-active);
+ color: var(--u-item-text-color-active);
+ `), cM('range-end', `
+ background-color: var(--u-item-color-active);
+ color: var(--u-item-text-color-active);
+ `), cM('disabled', `
+ color: var(--u-item-text-color-disabled);
+ cursor: not-allowed;
+ `, [c('&:hover', `
+ background-color: transparent;
+ `)])])])]);

package/es/date-picker-v2/src/utils.d.ts

@@ -0,0 +1,12 @@
+import type { Locale } from 'date-fns';
+import type { DateItem, MonthItem, YearItem } from './interface';
+export interface DateFnsOptions {
+    locale: Locale;
+}
+export declare function generateDatesForMonth(year: number, month: number, value: number | null, rangeValue: [number, number] | null, now: number, isDateDisabled?: (ts: number) => boolean): DateItem[];
+export declare function getMonthLabel(month: number, options?: DateFnsOptions): string;
+export declare function getWeekdayNames(options?: DateFnsOptions, dayFormat?: string): string[];
+export declare function generateMonthsForYear(year: number, options?: DateFnsOptions, monthFormat?: string): MonthItem[];
+export declare function generateAllMonths(startYear?: number, endYear?: number, options?: DateFnsOptions, monthFormat?: string): MonthItem[];
+export declare function generateYears(startYear?: number, endYear?: number): YearItem[];
+export declare function formatDate(ts: number, formatStr?: string, options?: DateFnsOptions): string;

package/es/date-picker-v2/src/utils.js

@@ -0,0 +1,92 @@
+import { startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval, getYear, getMonth, getDate, getTime, isSameDay, isSameMonth, isWithinInterval, format, addDays } from 'date-fns';
+import { START_YEAR, END_YEAR, MONTH_NAMES } from './config';
+export function generateDatesForMonth(year, month, value, rangeValue, now, isDateDisabled) {
+    const date = new Date(year, month, 1);
+    const monthStart = startOfMonth(date);
+    const monthEnd = endOfMonth(date);
+    const calendarStart = startOfWeek(monthStart, { weekStartsOn: 1 });
+    const calendarEnd = endOfWeek(monthEnd, { weekStartsOn: 1 });
+    const days = eachDayOfInterval({ start: calendarStart, end: calendarEnd });
+    return days.map((day) => {
+        const ts = getTime(day);
+        const dayYear = getYear(day);
+        const dayMonth = getMonth(day);
+        const dayDate = getDate(day);
+        let selected = false;
+        let inRange = false;
+        let isRangeStart = false;
+        let isRangeEnd = false;
+        if (value !== null) {
+            selected = isSameDay(day, value);
+        }
+        if (rangeValue !== null) {
+            const [start, end] = rangeValue;
+            isRangeStart = isSameDay(day, start);
+            isRangeEnd = isSameDay(day, end);
+            if (start && end) {
+                inRange = isWithinInterval(day, {
+                    start: new Date(Math.min(start, end)),
+                    end: new Date(Math.max(start, end))
+                });
+            }
+            selected = isRangeStart || isRangeEnd;
+        }
+        return {
+            year: dayYear,
+            month: dayMonth,
+            date: dayDate,
+            ts,
+            isCurrentDate: isSameDay(day, now),
+            isCurrentMonth: isSameMonth(day, date),
+            selected,
+            inRange,
+            isRangeStart,
+            isRangeEnd,
+            disabled: isDateDisabled ? isDateDisabled(ts) : false
+        };
+    });
+}
+export function getMonthLabel(month, options) {
+    if (options === null || options === void 0 ? void 0 : options.locale) {
+        return format(new Date(2024, month, 1), 'MMM', options);
+    }
+    return MONTH_NAMES[month];
+}
+export function getWeekdayNames(options, dayFormat = 'eeeeee') {
+    if (options === null || options === void 0 ? void 0 : options.locale) {
+        const base = new Date(2024, 0, 1);
+        return Array.from({ length: 7 }, (_, i) => format(addDays(base, i), dayFormat, options));
+    }
+    return ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
+}
+export function generateMonthsForYear(year, options, monthFormat = 'MMM') {
+    const getLabel = (index) => (options === null || options === void 0 ? void 0 : options.locale)
+        ? format(new Date(year, index, 1), monthFormat, options)
+        : MONTH_NAMES[index];
+    return Array.from({ length: 12 }, (_, index) => ({
+        year,
+        month: index,
+        label: getLabel(index),
+        ts: getTime(new Date(year, index, 1))
+    }));
+}
+export function generateAllMonths(startYear = START_YEAR, endYear = END_YEAR, options, monthFormat = 'MMM') {
+    const months = [];
+    for (let year = startYear; year <= endYear; year++) {
+        months.push(...generateMonthsForYear(year, options, monthFormat));
+    }
+    return months;
+}
+export function generateYears(startYear = START_YEAR, endYear = END_YEAR) {
+    const years = [];
+    for (let year = startYear; year <= endYear; year++) {
+        years.push({
+            year,
+            ts: getTime(new Date(year, 0, 1))
+        });
+    }
+    return years;
+}
+export function formatDate(ts, formatStr = 'dd.MM.yyyy', options) {
+    return format(ts, formatStr, options !== null && options !== void 0 ? options : {});
+}