@uzum-tech/ui 1.12.21 → 1.13.0

package/es/date-picker-v2/src/composables/useCalendarScroll.js

@@ -0,0 +1,61 @@
+import { ref } from 'vue';
+import { YEAR_GROUP_HEIGHT, START_YEAR, YEAR_HEADER_HEIGHT, DATE_CELL_HEIGHT, DATE_CELL_GAP, CALENDAR_MONTH_TITLE_HEIGHT, CALENDAR_MONTH_SECTION_MARGIN } from '../config';
+export function useCalendarScroll() {
+    // Локальные рефы для scrollbar
+    const monthScrollbarRef = ref(null);
+    const yearScrollbarRef = ref(null);
+    const calendarScrollbarRef = ref(null);
+    // Прокрутить к месяцу в списке месяцев (левая колонка)
+    function scrollToMonthInMonthList(year, month) {
+        if (!monthScrollbarRef.value)
+            return;
+        const yearIndex = year - START_YEAR;
+        if (yearIndex < 0)
+            return;
+        // Позиция начала года + заголовок года + позиция месяца в году
+        const monthPosition = yearIndex * YEAR_GROUP_HEIGHT + YEAR_HEADER_HEIGHT;
+        // Отступ сверху чтобы месяц был примерно в центре видимой области (около 4-5 месяцев видно)
+        const offsetToCenter = month > 6 ? YEAR_HEADER_HEIGHT * 5 : 0;
+        monthScrollbarRef.value.scrollTo({
+            top: Math.max(0, monthPosition + offsetToCenter)
+        });
+    }
+    // Прокрутить к году в dropdown
+    function scrollToYear(year) {
+        const yearIndex = year - START_YEAR;
+        if (yearIndex >= 0 && yearScrollbarRef.value) {
+            yearScrollbarRef.value.scrollTo({
+                top: yearIndex * YEAR_HEADER_HEIGHT
+            });
+        }
+    }
+    function getMonthSectionHeight(rows) {
+        const safeRows = Math.max(1, rows);
+        return (CALENDAR_MONTH_TITLE_HEIGHT +
+            safeRows * DATE_CELL_HEIGHT +
+            (safeRows - 1) * DATE_CELL_GAP +
+            CALENDAR_MONTH_SECTION_MARGIN);
+    }
+    // Прокрутить к месяцу в календаре (правая колонка)
+    // Высота секции месяца зависит от количества строк (5 или 6)
+    function scrollToMonthInCalendar(month, monthRows) {
+        if (!calendarScrollbarRef.value)
+            return;
+        const safeIndex = Math.max(0, Math.min(month, monthRows.length - 1));
+        let monthPosition = 0;
+        for (let i = 0; i < safeIndex; i++) {
+            monthPosition += getMonthSectionHeight(monthRows[i]);
+        }
+        calendarScrollbarRef.value.scrollTo({
+            top: monthPosition
+        });
+    }
+    return {
+        monthScrollbarRef,
+        yearScrollbarRef,
+        calendarScrollbarRef,
+        scrollToMonthInMonthList,
+        scrollToYear,
+        scrollToMonthInCalendar
+    };
+}

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

@@ -0,0 +1,14 @@
+export declare const START_YEAR = 2000;
+export declare const END_YEAR = 2050;
+export declare const MONTH_ITEM_HEIGHT = 48;
+export declare const YEAR_HEADER_HEIGHT = 42;
+export declare const MONTH_ITEM_GAP = 0;
+export declare const YEAR_GROUP_HEIGHT: number;
+export declare const DATE_CELL_HEIGHT = 42;
+export declare const DATE_CELL_GAP = 4;
+export declare const CALENDAR_MONTH_TITLE_HEIGHT = 40;
+export declare const CALENDAR_DATE_GRID_HEIGHT: number;
+export declare const CALENDAR_MONTH_SECTION_MARGIN = 16;
+export declare const CALENDAR_MONTH_SECTION_HEIGHT: number;
+export declare const MONTH_NAMES: readonly ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"];
+export type DatePickerV2Type = 'date' | 'daterange';

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

@@ -0,0 +1,34 @@
+export const START_YEAR = 2000;
+export const END_YEAR = 2050;
+export const MONTH_ITEM_HEIGHT = 48;
+export const YEAR_HEADER_HEIGHT = 42;
+export const MONTH_ITEM_GAP = 0;
+// Высота одной группы года = заголовок + 12 месяцев
+export const YEAR_GROUP_HEIGHT = YEAR_HEADER_HEIGHT + MONTH_ITEM_HEIGHT * 12;
+// Константы для секции месяца в календаре (правая колонка)
+export const DATE_CELL_HEIGHT = 42;
+export const DATE_CELL_GAP = 4;
+// Высота заголовка месяца (padding-top: 12px + line-height ~20px + padding-bottom: 8px)
+export const CALENDAR_MONTH_TITLE_HEIGHT = 40;
+// Высота сетки дат (6 строк * 42px + 5 gaps * 4px)
+export const CALENDAR_DATE_GRID_HEIGHT = DATE_CELL_HEIGHT * 6 + DATE_CELL_GAP * 5;
+// Отступ снизу секции
+export const CALENDAR_MONTH_SECTION_MARGIN = 16;
+// Общая высота секции месяца
+export const CALENDAR_MONTH_SECTION_HEIGHT = CALENDAR_MONTH_TITLE_HEIGHT +
+    CALENDAR_DATE_GRID_HEIGHT +
+    CALENDAR_MONTH_SECTION_MARGIN;
+export const MONTH_NAMES = [
+    'Январь',
+    'Февраль',
+    'Март',
+    'Апрель',
+    'Май',
+    'Июнь',
+    'Июль',
+    'Август',
+    'Сентябрь',
+    'Октябрь',
+    'Ноябрь',
+    'Декабрь'
+];

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

@@ -0,0 +1,42 @@
+import type { Ref, InjectionKey } from 'vue';
+import type { MergedTheme } from '../../_mixins';
+import type { DatePickerV2Theme } from '../styles';
+export type Value = number | null;
+export type RangeValue = [number, number] | null;
+export interface DateItem {
+    year: number;
+    month: number;
+    date: number;
+    ts: number;
+    isCurrentDate: boolean;
+    isCurrentMonth: boolean;
+    selected: boolean;
+    inRange: boolean;
+    isRangeStart: boolean;
+    isRangeEnd: boolean;
+    disabled: boolean;
+}
+export interface MonthItem {
+    year: number;
+    month: number;
+    label: string;
+    ts: number;
+}
+export interface YearItem {
+    year: number;
+    ts: number;
+}
+export type OnUpdateValue = (value: Value) => void;
+export type OnUpdateRangeValue = (value: RangeValue) => void;
+export type IsSingleDateDisabled = (date: number) => boolean;
+export type IsRangeDateDisabled = (date: number, position: 'start' | 'end', value: [number, number] | null) => boolean;
+export type IsDateDisabled = IsSingleDateDisabled | IsRangeDateDisabled;
+export type TriggerPreset = 'input' | 'select' | 'button';
+export interface DatePickerV2Injection {
+    mergedClsPrefixRef: Ref<string>;
+    mergedThemeRef: Ref<MergedTheme<DatePickerV2Theme>>;
+    localeRef: Ref<any>;
+    dateLocaleRef: Ref<any>;
+    isDateDisabledRef: Ref<IsDateDisabled | undefined>;
+}
+export declare const datePickerV2InjectionKey: InjectionKey<DatePickerV2Injection>;

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

@@ -0,0 +1 @@
+export const datePickerV2InjectionKey = Symbol('datePickerV2');