bge-ui 1.3.3 → 1.3.5

package/src/datePicker/utils/defaults.ts

@@ -0,0 +1,327 @@
+import type {
+    AriaLabels,
+    IFormat,
+    Transition,
+    TextInputOptions,
+    DateFilter,
+    ActionRowData,
+    MultiCalendarsProp,
+    MultiCalendarsOptions,
+    OptionEnabled,
+    TextInputProp,
+    InlineProp,
+    InlineOptions,
+    Config,
+    HighlightProp,
+    Highlight,
+    HighlightFn,
+    WeekNumbersProp,
+    WeekNumbersOpts,
+    RangeProp,
+    RangeConfig,
+    TimeZoneProp,
+    TimeZoneConfig,
+    IMarker,
+    PropDates,
+    MultiDatesProp,
+    MultiDatesDefault,
+    MapPropDatesOpts,
+    UIOpts,
+    UIParsed,
+} from '../interfaces';
+import { getDate } from '../utils/date-utils';
+import { dateToTimezoneSafe, sanitizeDateToLocal } from '../utils/timezone';
+import { getMapKey, shouldMap } from '../utils/util';
+
+export const mergeDefaultTransitions = (conf: Partial<Transition>): Transition => ({
+    menuAppearTop: 'dp-menu-appear-top',
+    menuAppearBottom: 'dp-menu-appear-bottom',
+    open: 'dp-slide-down',
+    close: 'dp-slide-up',
+    next: 'calendar-next',
+    previous: 'calendar-prev',
+    vNext: 'dp-slide-up',
+    vPrevious: 'dp-slide-down',
+    ...(conf ?? {}),
+});
+
+export const defaultAriaLabels = (labels: Partial<AriaLabels>): AriaLabels => {
+    return {
+        toggleOverlay: 'Toggle overlay',
+        menu: 'Datepicker menu',
+        input: 'Datepicker input',
+        openTimePicker: 'Open time picker',
+        closeTimePicker: 'Close time Picker',
+        incrementValue: (type: string) => `Increment ${type}`,
+        decrementValue: (type: string) => `Decrement ${type}`,
+        openTpOverlay: (type: string) => `Open ${type} overlay`,
+        amPmButton: 'Switch AM/PM mode',
+        openYearsOverlay: 'Open years overlay',
+        openMonthsOverlay: 'Open months overlay',
+        nextMonth: 'Next month',
+        prevMonth: 'Previous month',
+        nextYear: 'Next year',
+        prevYear: 'Previous year',
+        day: undefined,
+        weekDay: undefined,
+        clearInput: 'Clear value',
+        calendarIcon: 'Calendar icon',
+        timePicker: 'Time picker',
+        monthPicker: (overlay: boolean) => `Month picker${overlay ? ' overlay' : ''}`,
+        yearPicker: (overlay: boolean) => `Year picker${overlay ? ' overlay' : ''}`,
+        timeOverlay: (type: string) => `${type} overlay`,
+        ...(labels ?? {}),
+    };
+};
+
+const getMultiCalendarsCount = (option?: OptionEnabled) => {
+    if (!option) return 0;
+    if (typeof option === 'boolean') return option ? 2 : 0;
+    return +option >= 2 ? +option : 2;
+};
+
+export const defaultMultiCalendars = (multiCalendars?: MultiCalendarsProp): MultiCalendarsOptions => {
+    const isConfig = typeof multiCalendars === 'object' && multiCalendars;
+    const defaultOptions = {
+        static: true,
+        solo: false,
+    };
+    if (!multiCalendars) return { ...defaultOptions, count: getMultiCalendarsCount(false) };
+    const addOptions = isConfig ? multiCalendars : ({} as MultiCalendarsOptions);
+    const option = isConfig ? addOptions.count ?? true : multiCalendars;
+    const count = getMultiCalendarsCount(option);
+
+    return Object.assign(defaultOptions, addOptions, { count });
+};
+
+export const defaultPreviewFormat = (
+    previewFormat: IFormat,
+    format: IFormat,
+    defaultPattern: string | ((val: Date) => string),
+): IFormat => {
+    if (!previewFormat) {
+        return typeof defaultPattern === 'string' ? defaultPattern : format;
+    }
+    return previewFormat;
+};
+
+export const defaultTransitions = (transitions: boolean | Partial<Transition>): Transition => {
+    if (typeof transitions === 'boolean') {
+        return transitions ? mergeDefaultTransitions({}) : (false as unknown as Transition);
+    }
+    return mergeDefaultTransitions(transitions);
+};
+
+/**
+ * Default options to merge with user provided ones
+ */
+export const getDefaultTextInputOptions = (textInput: TextInputProp): TextInputOptions & { enabled: boolean } => {
+    const defaultOptions = {
+        enterSubmit: true,
+        tabSubmit: true,
+        openMenu: 'open',
+        selectOnFocus: false,
+        rangeSeparator: ' - ',
+    };
+
+    if (typeof textInput === 'object') {
+        return { ...defaultOptions, ...(textInput ?? {}), enabled: true };
+    }
+    return { ...defaultOptions, enabled: textInput };
+};
+
+/**
+ * Default filters to merge with user provided values
+ */
+export const getDefaultFilters = (filters: Partial<DateFilter>): DateFilter => ({
+    months: [],
+    years: [],
+    times: { hours: [], minutes: [], seconds: [] },
+    ...(filters ?? {}),
+});
+
+export const getDefaultActionRowData = (actionRow: Partial<ActionRowData>): ActionRowData => ({
+    showSelect: true,
+    showCancel: true,
+    showNow: false,
+    showPreview: true,
+    ...(actionRow ?? {}),
+});
+
+export const getDefaultInlineOptions = (inline: InlineProp): InlineOptions => {
+    const defaultOptions = { input: false };
+    if (typeof inline === 'object') {
+        return { ...defaultOptions, ...(inline ?? {}), enabled: true };
+    }
+    return {
+        enabled: inline,
+        ...defaultOptions,
+    };
+};
+
+export const getDefaultConfig = (config?: Partial<Config>): Config => {
+    const defaultConfig = {
+        allowStopPropagation: true,
+        closeOnScroll: false,
+        modeHeight: 255,
+        allowPreventDefault: false,
+        closeOnClearValue: true,
+        closeOnAutoApply: true,
+        noSwipe: false,
+        keepActionRow: false,
+        onClickOutside: undefined,
+        tabOutClosesMenu: true,
+        arrowLeft: undefined,
+        keepViewOnOffsetClick: false,
+        timeArrowHoldThreshold: 0,
+        shadowDom: false,
+    };
+    return { ...defaultConfig, ...(config ?? {}) };
+};
+
+export const getDefaultHighlight = (highlight: HighlightProp): Highlight | HighlightFn => {
+    const defaultOptions = {
+        dates: Array.isArray(highlight) ? highlight.map((date) => getDate(date)) : [],
+        years: [],
+        months: [],
+        quarters: [],
+        weeks: [],
+        weekdays: [],
+        options: { highlightDisabled: false },
+    };
+
+    if (typeof highlight === 'function') return highlight;
+    return { ...defaultOptions, ...(highlight ?? {}) };
+};
+
+export const getDefaultWeekNumbers = (weekNumbers: WeekNumbersProp): WeekNumbersOpts => {
+    if (typeof weekNumbers === 'object') {
+        return {
+            type: weekNumbers?.type ?? 'local',
+            hideOnOffsetDates: weekNumbers?.hideOnOffsetDates ?? false,
+        };
+    }
+    return {
+        type: weekNumbers,
+        hideOnOffsetDates: false,
+    };
+};
+
+export const getDefaultRangeOptions = (config: RangeProp): RangeConfig => {
+    const defaultOptions = {
+        noDisabledRange: false,
+        showLastInRange: true,
+        minMaxRawRange: false,
+        partialRange: true,
+        disableTimeRangeValidation: false,
+        maxRange: undefined,
+        minRange: undefined,
+        autoRange: undefined,
+        fixedStart: false,
+        fixedEnd: false,
+    };
+    if (typeof config === 'object') {
+        return { enabled: true, ...defaultOptions, ...config };
+    }
+    return {
+        enabled: config,
+        ...defaultOptions,
+    };
+};
+
+export const getDefaultTimeZone = (timeZone: TimeZoneProp) => {
+    if (!timeZone) return { timezone: undefined, exactMatch: false, emitTimezone: undefined };
+    if (typeof timeZone === 'string') {
+        return {
+            timezone: timeZone,
+            exactMatch: false,
+            dateInTz: undefined,
+            emitTimezone: undefined,
+            convertModel: true,
+        };
+    }
+    return {
+        timezone: timeZone.timezone,
+        exactMatch: timeZone.exactMatch ?? false,
+        dateInTz: timeZone.dateInTz ?? undefined,
+        emitTimezone: timeZone.emitTimezone ?? undefined,
+        convertModel: timeZone.convertModel ?? true,
+    };
+};
+
+const datesArrToMap = (
+    datesArr: (Date | string | number)[],
+    timezone: TimeZoneConfig | undefined,
+    reset?: boolean,
+): Map<string, Date | null> => {
+    return new Map(
+        datesArr.map((date) => {
+            const d = dateToTimezoneSafe(date, timezone, reset);
+            return [getMapKey(d), d];
+        }),
+    );
+};
+
+const mapMarkers = (markers: IMarker[], timezone: TimeZoneConfig | undefined) => {
+    if (markers.length) {
+        return new Map(
+            markers.map((marker) => {
+                const date = dateToTimezoneSafe(marker.date, timezone);
+                return [getMapKey(date), marker];
+            }),
+        );
+    }
+    return null;
+};
+
+/**
+ * Sync all props that rely on the date value to be in the same timezone
+ * All validation that is done from these props will now be in sync with provided timezone config
+ */
+export const mapPropDates = (opts: MapPropDatesOpts): PropDates => {
+    return {
+        minDate: sanitizeDateToLocal(opts.minDate, opts.timezone, opts.isSpecific),
+        maxDate: sanitizeDateToLocal(opts.maxDate, opts.timezone, opts.isSpecific),
+        disabledDates: shouldMap(opts.disabledDates)
+            ? datesArrToMap(opts.disabledDates, opts.timezone, opts.isSpecific)
+            : opts.disabledDates,
+        allowedDates: shouldMap(opts.allowedDates)
+            ? datesArrToMap(opts.allowedDates, opts.timezone, opts.isSpecific)
+            : null,
+        highlight:
+            typeof opts.highlight === 'object' && shouldMap(opts.highlight?.dates)
+                ? datesArrToMap(opts.highlight.dates, opts.timezone)
+                : (opts.highlight as HighlightFn),
+        markers: mapMarkers(opts.markers, opts.timezone),
+    };
+};
+
+export const getDefaultMultiDates = (multiDates: MultiDatesProp): MultiDatesDefault => {
+    if (typeof multiDates === 'boolean') {
+        return { enabled: multiDates, dragSelect: true, limit: null };
+    }
+    return {
+        enabled: !!multiDates,
+        limit: multiDates.limit ? +multiDates.limit : null,
+        dragSelect: multiDates.dragSelect ?? true,
+    };
+};
+
+export const getDefaultUI = (ui: Partial<UIOpts>): UIParsed => {
+    const defaulted = {
+        ...Object.fromEntries(
+            Object.keys(ui).map((item) => {
+                const key = item as keyof UIOpts;
+                const value = ui[key];
+                const val = (
+                    typeof ui[key] === 'string'
+                        ? { [value as string]: true }
+                        : Object.fromEntries((value as string[]).map((k) => [k, true]))
+                ) as Record<string, boolean>;
+                return [item, val];
+            }),
+        ),
+    };
+
+    return defaulted as UIParsed;
+};

package/src/datePicker/utils/timezone.ts

@@ -0,0 +1,38 @@
+import { getDate, resetDateTime } from '../utils/date-utils';
+import type { MaybeDate, TimeZoneConfig } from '../interfaces';
+
+/**
+ * Converts date from the local timezone into the specific timezone
+ */
+export const localToTz = (date: Date, timeZone?: string) => {
+    if (!timeZone) return new Date(date);
+    return new Date(date.toLocaleString('en-US', { timeZone }));
+};
+
+export const dateToTimezoneSafe = (date: Date | string | number, tz?: TimeZoneConfig, reset?: boolean) => {
+    const d = sanitizeDateToLocal(date, tz, reset);
+    if (!d) return getDate();
+    return d;
+};
+
+const getDateInTz = (date: Date | number | string, tz: TimeZoneConfig, reset?: boolean) => {
+    const newDate = tz.dateInTz ? localToTz(new Date(date), tz.dateInTz) : getDate(date);
+    return reset ? resetDateTime(newDate, true) : newDate;
+};
+
+// Converts specific date to a Date object based on a provided timezone
+export const sanitizeDateToLocal = (date: MaybeDate, tz?: TimeZoneConfig, reset?: boolean) => {
+    if (!date) return null;
+    const newDate = reset ? resetDateTime(getDate(date), true) : getDate(date);
+    if (!tz) return newDate;
+    return tz.exactMatch ? getDateInTz(date, tz, reset) : localToTz(newDate, tz.timezone);
+};
+
+export const getTimezoneOffset = (timezone?: string) => {
+    if (!timezone) return 0;
+    const date = new Date();
+    const utcDate = new Date(date.toLocaleString('en-US', { timeZone: 'UTC' }));
+    const specificDate = new Date(date.toLocaleString('en-US', { timeZone: timezone }));
+    const dstOffset = specificDate.getTimezoneOffset() / 60;
+    return (+utcDate - +specificDate) / (1000 * 60 * 60) - dstOffset;
+};

package/src/datePicker/utils/type-guard.ts

@@ -0,0 +1,3 @@
+export const isNumberArray = (value: number | number[]): value is number[] => {
+    return Array.isArray(value);
+};

package/src/datePicker/utils/util.ts

@@ -0,0 +1,322 @@
+import { unref } from 'vue';
+import { format } from 'date-fns';
+
+import type {
+    Config,
+    DPElements,
+    IDefaultSelect,
+    IMarker,
+    MaybeElementRef,
+    ModelValue,
+    OverlayGridItem,
+} from '../interfaces';
+import { type Locale } from 'date-fns';
+import type { ComponentPublicInstance } from 'vue';
+import { getDate } from './date-utils';
+import { localToTz } from './timezone';
+import { EventKey } from '../constants';
+
+export const getArrayInArray = <T>(list: T[], increment = 3): T[][] => {
+    const items = [];
+    for (let i = 0; i < list.length; i += increment) {
+        items.push([list[i], list[i + 1], list[i + 2]]);
+    }
+
+    return items;
+};
+
+function dayNameIntlMapper(locale: string) {
+    return (day: number) => {
+        const start = locale.startsWith('zh-') ? 1 : 0
+        return new Intl.DateTimeFormat(locale, { weekday: 'short', timeZone: 'UTC' })
+            .format(new Date(`2017-01-0${day}T00:00:00+00:00`))
+            .slice(start, 2);
+    };
+}
+
+function dayNameDateFnsMapper(formatLocale: Locale) {
+    return (day: number) => {
+        return format(localToTz(new Date(`2017-01-0${day}T00:00:00+00:00`), 'UTC'), 'EEEEEE', { locale: formatLocale });
+    };
+}
+
+/**
+ * Generate week day names based on formatLocale or locale and in order specified in week start
+ */
+export const getDayNames = (formatLocale: Locale | null, locale: string, weekStart: number): string[] => {
+    // Get list in order from sun ... sat
+    const daysArray = [1, 2, 3, 4, 5, 6, 7];
+    let days;
+
+    // Map day order numbers to names
+    if (formatLocale !== null) {
+        try {
+            days = daysArray.map(dayNameDateFnsMapper(formatLocale));
+        } catch (e) {
+            days = daysArray.map(dayNameIntlMapper(locale));
+        }
+    } else {
+        days = daysArray.map(dayNameIntlMapper(locale));
+    }
+
+    // Get days that are in order before specified week start
+    const beforeWeekStart = days.slice(0, weekStart);
+    // Get days that are in order after specified week start
+    const afterWeekStart = days.slice(weekStart + 1, days.length);
+
+    // return them in correct order
+    return [days[weekStart]].concat(...afterWeekStart).concat(...beforeWeekStart);
+};
+
+/**
+ * Generate array of years for selection display
+ */
+export const getYears = (yearRange: number[] | string[], locale: string, reverse?: boolean): IDefaultSelect[] => {
+    const years: IDefaultSelect[] = [];
+    for (let year = +yearRange[0]; year <= +yearRange[1]; year++) {
+        years.push({ value: +year, text: formatNumber(year, locale) });
+    }
+    return reverse ? years.reverse() : years;
+};
+
+/**
+ * Generate month names based on formatLocale or locale for selection display
+ */
+export const getMonths = (
+    formatLocale: Locale | null,
+    locale: string,
+    monthFormat: 'long' | 'short',
+): IDefaultSelect[] => {
+    const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((month) => {
+        const mm = month < 10 ? `0${month}` : month;
+        return new Date(`2017-${mm}-01T00:00:00+00:00`);
+    });
+
+    if (formatLocale !== null) {
+        try {
+            const monthDateFnsFormat = monthFormat === 'long' ? 'LLLL' : 'LLL';
+            return months.map((date, i) => {
+                const month = format(localToTz(date, 'UTC'), monthDateFnsFormat, { locale: formatLocale });
+                return {
+                    text: month.charAt(0).toUpperCase() + month.substring(1),
+                    value: i,
+                };
+            });
+        } catch (e) {
+            // Do nothing. Go ahead to execute fallback
+        }
+    }
+
+    const formatter = new Intl.DateTimeFormat(locale, { month: monthFormat, timeZone: 'UTC' });
+    return months.map((date, i) => {
+        const month = formatter.format(date);
+        return {
+            text: month.charAt(0).toUpperCase() + month.substring(1),
+            value: i,
+        };
+    });
+};
+
+/**
+ * Since internally watched values are in 24h mode, this will get am-pm value from set hour
+ */
+export const hoursToAmPmHours = (index: number): number => {
+    const hoursValues = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+
+    return hoursValues[index];
+};
+
+export const unrefElement = (elRef: MaybeElementRef): HTMLElement | null => {
+    const plain = unref(elRef);
+    if (!(plain as ComponentPublicInstance)?.$el) return plain as HTMLElement | null;
+    return (plain as ComponentPublicInstance)?.$el;
+};
+
+export const getDefaultMarker = (marker: IMarker): IMarker => ({ type: 'dot', ...(marker ?? {}) });
+
+export const isModelAuto = (modelValue: ModelValue): boolean => {
+    if (Array.isArray(modelValue)) {
+        return !!modelValue[0] && !!modelValue[1];
+    }
+    return false;
+};
+
+export const errors = {
+    prop: (name: string): string => `"${name}" prop must be enabled!`,
+    dateArr: (name: string) => `You need to use array as "model-value" binding in order to support "${name}"`,
+};
+
+export const convertType = <T>(val: any): T => {
+    return val as unknown as T;
+};
+
+export const getNumVal = (num?: string | number | null): number | null => {
+    if (num === 0) return num;
+    if (!num || isNaN(+num)) return null;
+    return +num;
+};
+
+export const isNumNullish = (num?: number | null): num is null => {
+    return num === null;
+};
+
+export const findFocusableEl = (container: HTMLElement | null): HTMLElement | undefined => {
+    if (container) {
+        const elementsList = container.querySelectorAll('input, button, select, textarea, a[href]');
+        const elArr = [...elementsList] as HTMLElement[];
+        return elArr[0];
+    }
+    return undefined;
+};
+
+/**
+ * Create array for the SelectionOverlay grouped by 3
+ */
+export const getGroupedList = (items: IDefaultSelect[]): IDefaultSelect[][] => {
+    const list = [];
+    const setList = (listItems: IDefaultSelect[]) => {
+        return listItems.filter((item) => item);
+    };
+    for (let i = 0; i < items.length; i += 3) {
+        const listItems = [items[i], items[i + 1], items[i + 2]];
+        list.push(setList(listItems));
+    }
+    return list;
+};
+
+/**
+ * Check if number is between min and max values
+ */
+export const checkMinMaxValue = (value: number | string, min?: number, max?: number): boolean => {
+    const hasMax = max !== undefined && max !== null;
+    const hasMin = min !== undefined && min !== null;
+
+    if (!hasMax && !hasMin) return false;
+
+    const maxVal = +(max as number);
+    const minVal = +(min as number);
+
+    if (hasMax && hasMin) {
+        return +value > maxVal || +value < minVal;
+    }
+    if (hasMax) {
+        return +value > maxVal;
+    }
+
+    if (hasMin) {
+        return +value < minVal;
+    }
+
+    return false;
+};
+
+/**
+ * Maps data for the SelectionOverlay
+ */
+export const groupListAndMap = (
+    list: IDefaultSelect[],
+    cb: (item: IDefaultSelect) => { active: boolean; disabled: boolean; highlighted?: boolean; isBetween?: boolean },
+): OverlayGridItem[][] => {
+    return getGroupedList(list).map((items) => {
+        return items.map((item) => {
+            const { active, disabled, isBetween, highlighted } = cb(item);
+            return {
+                ...item,
+                active,
+                disabled: disabled,
+                className: {
+                    dp__overlay_cell_active: active,
+                    dp__overlay_cell: !active,
+                    dp__overlay_cell_disabled: disabled,
+                    dp__overlay_cell_pad: false,
+                    dp__overlay_cell_active_disabled: disabled && active,
+                    dp__cell_in_between: isBetween,
+                    'dp--highlighted': highlighted,
+                },
+            };
+        });
+    });
+};
+
+export const checkStopPropagation = (ev: Event | undefined, config: Config, immediate = false) => {
+    if (ev && config.allowStopPropagation) {
+        if (immediate) {
+            ev.stopImmediatePropagation();
+        }
+        ev.stopPropagation();
+    }
+};
+
+const getFocusableElementsSelector = () =>
+    [
+        'a[href]',
+        'area[href]',
+        "input:not([disabled]):not([type='hidden'])",
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        'button:not([disabled])',
+        "[tabindex]:not([tabindex='-1'])",
+        '[data-datepicker-instance]',
+    ].join(', ');
+
+export function findNextFocusableElement(startingElement: HTMLElement, reverse: boolean) {
+    let focusable = [...document.querySelectorAll(getFocusableElementsSelector())];
+
+    focusable = focusable.filter((elem) => {
+        return !startingElement.contains(elem) || elem.hasAttribute('data-datepicker-instance');
+    });
+
+    const currentIndex = focusable.indexOf(startingElement);
+
+    if (currentIndex >= 0 && (reverse ? currentIndex - 1 >= 0 : currentIndex + 1 <= focusable.length)) {
+        return focusable[currentIndex + (reverse ? -1 : 1)] as HTMLElement;
+    }
+}
+
+export const getElWithin = (wrapper: HTMLElement | null, attribute: DPElements): HTMLElement | undefined | null => {
+    return wrapper?.querySelector(`[data-dp-element="${attribute}"]`);
+};
+
+export const formatNumber = (num: number, locale: string): string => {
+    return new Intl.NumberFormat(locale, { useGrouping: false, style: 'decimal' }).format(num);
+};
+
+export const getMapKey = (date: Date | string | number) => {
+    return format(date, 'dd-MM-yyyy');
+};
+
+export const shouldMap = (arr: any): arr is Date[] | string[] | boolean => {
+    return Array.isArray(arr);
+};
+
+export const getMapDate = <T>(date: Date, map: Map<string, T>): T | undefined => {
+    return map.get(getMapKey(date));
+};
+
+export const matchDate = (date: Date, mapOrFn: Map<string, any> | ((date: Date) => boolean) | null) => {
+    if (!date) return true;
+    if (!mapOrFn) return false;
+    if (mapOrFn instanceof Map) {
+        return !!getMapDate(date, mapOrFn);
+    }
+    return mapOrFn(getDate(date));
+};
+
+export const checkKeyDown = (ev: KeyboardEvent, fn: () => any, prevent = false, cb?: (ev: KeyboardEvent) => void) => {
+    if (ev.key === EventKey.enter || ev.key === EventKey.space) {
+        if (prevent) {
+            ev.preventDefault();
+        }
+        return fn();
+    }
+    if (cb) return cb(ev);
+};
+
+export const isIOS = () => {
+    return (
+        ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].some((platform) =>
+            navigator.userAgent.includes(platform),
+        ) ||
+        (navigator.userAgent.includes('Mac') && 'ontouchend' in document)
+    );
+};