bge-ui 1.3.4 → 1.3.6

package/src/datePicker/composables/position.ts

@@ -0,0 +1,297 @@
+import { h, ref, render, toRef, watch } from 'vue';
+import {
+    type DatepickerInputRef,
+    type DatepickerMenuRef,
+    type InlineOptions,
+    type VueEmit,
+    OpenPosition,
+    type MaybeElementRef,
+} from '../interfaces';
+
+import { unrefElement } from '../utils/util';
+import { MenuPlacement } from '../constants';
+
+import type { Component, ComputedRef, Ref, Slots } from 'vue';
+import type { AllPropsType } from '../props';
+import { useDefaults } from '../composables/defaults';
+
+/**
+ * Extracted code from the main component, used for calculating the position of the menu
+ */
+interface Params {
+    menuRef: Ref<HTMLElement | null>;
+    menuRefInner: Ref<DatepickerMenuRef | null>;
+    inputRef: Ref<DatepickerInputRef | null>;
+    pickerWrapperRef: Ref<HTMLElement | null>;
+    inline: ComputedRef<InlineOptions>;
+    emit: VueEmit;
+    props: AllPropsType;
+    slots: Slots;
+}
+export const usePosition = ({
+    menuRef,
+    menuRefInner,
+    inputRef,
+    pickerWrapperRef,
+    inline,
+    emit,
+    props,
+    slots,
+}: Params) => {
+    const { defaultedConfig } = useDefaults(props);
+    const menuRect = ref<DOMRect>({} as DOMRect);
+    const xCorrect = ref(false);
+
+    const menuStyle = ref<Record<string, string>>({
+        top: '0',
+        left: '0',
+    });
+    const openOnTop = ref(false);
+    const centered = toRef(props, 'teleportCenter');
+
+    watch(centered, () => {
+        menuStyle.value = JSON.parse(JSON.stringify({}));
+        setMenuPosition();
+    });
+
+    // Get correct offset of an element
+    const getOffset = (el: HTMLElement): { top: number; left: number } => {
+        if (props.teleport) {
+            const rect = el.getBoundingClientRect();
+            return {
+                left: rect.left + window.scrollX,
+                top: rect.top + window.scrollY,
+            };
+        }
+        return { top: 0, left: 0 };
+    };
+
+    const setPositionRight = (left: number, width: number): void => {
+        menuStyle.value.left = `${left + width - menuRect.value.width}px`;
+    };
+
+    const setPositionLeft = (left: number): void => {
+        menuStyle.value.left = `${left}px`;
+    };
+
+    const setHorizontalPositioning = (left: number, width: number): void => {
+        if (props.position === OpenPosition.left) {
+            setPositionLeft(left);
+        }
+
+        if (props.position === OpenPosition.right) {
+            setPositionRight(left, width);
+        }
+
+        if (props.position === OpenPosition.center) {
+            menuStyle.value.left = `${left + width / 2 - menuRect.value.width / 2}px`;
+        }
+    };
+
+    const getInputPositions = (inputEl: HTMLElement) => {
+        const { width, height } = inputEl.getBoundingClientRect();
+        const { top, left } = props.altPosition ? props.altPosition(inputEl) : getOffset(inputEl);
+        return { top: +top, left: +left, width, height };
+    };
+
+    const teleportCenter = () => {
+        menuStyle.value.left = `50%`;
+        menuStyle.value.top = `50%`;
+        menuStyle.value.transform = `translate(-50%, -50%)`;
+        menuStyle.value.position = `fixed`;
+        delete menuStyle.value.opacity;
+    };
+
+    const customAltPosition = () => {
+        const el = unrefElement(inputRef as MaybeElementRef);
+        const { top, left, transform } = props.altPosition(el);
+        menuStyle.value = { top: `${top}px`, left: `${left}px`, transform: transform ?? '' };
+    };
+
+    /**
+     * Main call, when input is clicked, opens the menu on the first entry
+     * Recalculate param is added when the position is recalculated on scroll or resize
+     */
+    const setMenuPosition = (recalculate = true): void => {
+        if (!inline.value.enabled) {
+            if (centered.value) return teleportCenter();
+
+            if (props.altPosition !== null) return customAltPosition();
+
+            if (recalculate) {
+                const el = props.teleport ? menuRefInner.value?.$el : menuRef.value;
+
+                if (el) {
+                    menuRect.value = el.getBoundingClientRect();
+                }
+                emit('recalculate-position');
+            }
+            return calculateMenuPosition();
+        }
+    };
+
+    const setLeftRightPosition = ({ inputEl, left, width }: { inputEl: HTMLElement; left: number; width: number }) => {
+        if (window.screen.width > 768 && !xCorrect.value) {
+            setHorizontalPositioning(left, width);
+        }
+
+        autoLeftRight(inputEl);
+    };
+
+    // Set menu position bellow input
+    const setBottomPosition = (inputEl: HTMLElement) => {
+        const { top: offset, left, height, width } = getInputPositions(inputEl);
+        menuStyle.value.top = `${height + offset + +props.offset}px`;
+        openOnTop.value = false;
+        if (!xCorrect.value) {
+            menuStyle.value.left = `${left + width / 2 - menuRect.value.width / 2}px`;
+        }
+        setLeftRightPosition({ inputEl, left, width });
+    };
+
+    // Set menu position above the input
+    const setTopPosition = (inputEl: HTMLElement) => {
+        const { top: offset, left, width } = getInputPositions(inputEl);
+
+        menuStyle.value.top = `${offset - +props.offset - menuRect.value.height}px`;
+        openOnTop.value = true;
+        setLeftRightPosition({ inputEl, left, width });
+    };
+
+    // Set auto left-right if the menu is out of the screen
+    const autoLeftRight = (inputEl: HTMLElement) => {
+        if (props.autoPosition) {
+            const { left, width } = getInputPositions(inputEl);
+            const { left: menuLeft, right: menuRight } = menuRect.value;
+            if (!xCorrect.value) {
+                if (Math.abs(menuLeft) !== Math.abs(menuRight)) {
+                    if (menuLeft <= 0) {
+                        xCorrect.value = true;
+                        return setPositionLeft(left);
+                    }
+                    if (menuRight >= document.documentElement.clientWidth) {
+                        xCorrect.value = true;
+                        return setPositionRight(left, width);
+                    }
+                }
+                return setHorizontalPositioning(left, width);
+            }
+        }
+    };
+
+    const getMenuPlacement = (): MenuPlacement => {
+        const inputEl = unrefElement(inputRef as MaybeElementRef);
+        if (inputEl) {
+            const { height: menuHeight } = menuRect.value;
+            const { top: inputTop, height: inputHeight } = inputEl.getBoundingClientRect();
+
+            const fullHeight = window.innerHeight;
+            const spaceBottom = fullHeight - inputTop - inputHeight;
+            const spaceTop = inputTop;
+
+            if (menuHeight <= spaceBottom) return MenuPlacement.bottom;
+            // If there is not enough space at the bottom but there is on top, set position on top
+            if (menuHeight > spaceBottom && menuHeight <= spaceTop) return MenuPlacement.top;
+            // If we pass both check, it means there is not enough space above and bellow the input
+            // Position where there is more space available
+            if (spaceBottom >= spaceTop) return MenuPlacement.bottom;
+            return MenuPlacement.top;
+        }
+        return MenuPlacement.bottom;
+    };
+
+    // If auto-position is enabled, perform calculation to fit menu on the screen
+    const setAutoPosition = (inputEl: HTMLElement) => {
+        const placement = getMenuPlacement();
+        if (placement === MenuPlacement.bottom) return setBottomPosition(inputEl);
+        return setTopPosition(inputEl);
+    };
+
+    // Parent function that will perform check on which calculation function to invoke
+    const calculateMenuPosition = () => {
+        const inputEl = unrefElement(inputRef as MaybeElementRef);
+        if (inputEl) {
+            if (props.autoPosition) {
+                return setAutoPosition(inputEl);
+            }
+            return setBottomPosition(inputEl);
+        }
+    };
+
+    const isScrollable = function (el: HTMLElement | null) {
+        if (el) {
+            const hasScrollableContent = el.scrollHeight > el.clientHeight;
+
+            const overflowYStyle = window.getComputedStyle(el).overflowY;
+            const isOverflowHidden = overflowYStyle.indexOf('hidden') !== -1;
+
+            return hasScrollableContent && !isOverflowHidden;
+        }
+        return true;
+    };
+
+    const getScrollableParent = function (el: HTMLElement | null): Window | HTMLElement {
+        if (!el || el === document.body || el.nodeType === Node.DOCUMENT_FRAGMENT_NODE) return window;
+        if (isScrollable(el)) return el;
+        return getScrollableParent(
+            (el.assignedSlot && defaultedConfig.value.shadowDom
+                ? el.assignedSlot.parentNode
+                : el.parentNode) as HTMLElement,
+        );
+    };
+
+    const getShadowPos = (rect?: DOMRect) => {
+        if (rect) {
+            switch (props.position) {
+                case OpenPosition.left:
+                    return { left: 0, transform: 'translateX(0)' };
+                case OpenPosition.right:
+                    return { left: `${rect.width}px`, transform: 'translateX(-100%)' };
+                default:
+                    return { left: `${rect.width / 2}px`, transform: 'translateX(-50%)' };
+            }
+        }
+        return {};
+    };
+
+    // Renders invisible menu on open to determine the menu dimensions
+    const shadowRender = (DPMenu: Component, props: AllPropsType) => {
+        const container = document.createElement('div');
+        const input = unrefElement(inputRef as MaybeElementRef)?.getBoundingClientRect();
+        container.setAttribute('id', 'dp--temp-container');
+        const wrap = pickerWrapperRef.value?.clientWidth ? pickerWrapperRef.value : document.body;
+        wrap.append(container);
+
+        const pos = getShadowPos(input);
+        const mappedSlots = defaultedConfig.value.shadowDom
+            ? Object.keys(slots).filter((slot) =>
+                  ['right-sidebar', 'left-sidebar', 'top-extra', 'action-extra'].includes(slot),
+              )
+            : Object.keys(slots);
+
+        const el = h(
+            DPMenu,
+            {
+                ...props,
+                shadow: true,
+                style: { opacity: 0, position: 'absolute', ...pos },
+            },
+            Object.fromEntries(mappedSlots.map((slot) => [slot, slots[slot]])),
+        );
+
+        render(el, container);
+        menuRect.value = el.el?.getBoundingClientRect();
+
+        render(null, container);
+        wrap.removeChild(container);
+    };
+
+    return {
+        openOnTop,
+        menuStyle,
+        xCorrect,
+        setMenuPosition,
+        getScrollableParent,
+        shadowRender,
+    };
+};

package/src/datePicker/composables/shared.ts

@@ -0,0 +1,98 @@
+import { getDate, isDateAfter, isDateBefore, isDateEqual } from '../utils/date-utils';
+
+import { localToTz } from '../utils/timezone';
+import type { ComputedRef, WritableComputedRef } from 'vue';
+import type { InternalModuleValue, RangeConfig, VueEmit } from '../interfaces';
+
+export const handleMultiDatesSelect = (
+    date: Date,
+    modelValue: WritableComputedRef<InternalModuleValue>,
+    multiDatesLimit?: number | string | null,
+): void => {
+    if (modelValue.value && Array.isArray(modelValue.value)) {
+        if (modelValue.value.some((dateVal) => isDateEqual(date, dateVal))) {
+            const value = modelValue.value.filter((dateVal) => !isDateEqual(dateVal, date));
+            modelValue.value = !value.length ? null : value;
+        } else if ((multiDatesLimit && +multiDatesLimit > modelValue.value.length) || !multiDatesLimit) {
+            modelValue.value.push(date);
+        }
+    } else {
+        modelValue.value = [date];
+    }
+};
+
+export const setMonthOrYearRange = (
+    modelValue: WritableComputedRef<InternalModuleValue>,
+    date: Date,
+    emit: VueEmit,
+) => {
+    let rangeDate = modelValue.value ? (modelValue.value as Date[]).slice() : [];
+    if (rangeDate.length === 2 && rangeDate[1] !== null) {
+        rangeDate = [];
+    }
+
+    if (!rangeDate.length) {
+        rangeDate = [date];
+        emit('range-start', date);
+    } else if (isDateBefore(date, rangeDate[0])) {
+        rangeDate.unshift(date);
+        emit('range-start', rangeDate[0]);
+        emit('range-start', rangeDate[1]);
+    } else {
+        rangeDate[1] = date;
+        emit('range-end', date);
+    }
+
+    return rangeDate;
+};
+
+export const checkRangeAutoApply = (range: Date[], emit: VueEmit, autoApply: boolean, modelAuto: boolean) => {
+    if (!range) return;
+    if (range[0] && range[1] && autoApply) {
+        emit('auto-apply');
+    }
+    if (range[0] && !range[1] && modelAuto && autoApply) {
+        emit('auto-apply');
+    }
+};
+
+export const setPresetDate = (opts: {
+    value: Date[] | string[] | Date | string;
+    range: boolean;
+    timezone?: string;
+    modelValue: WritableComputedRef<InternalModuleValue>;
+}) => {
+    if (Array.isArray(opts.value) && opts.value.length <= 2 && opts.range) {
+        opts.modelValue.value = opts.value.map((date) => localToTz(getDate(date), opts.timezone));
+    } else if (!Array.isArray(opts.value)) {
+        opts.modelValue.value = localToTz(getDate(opts.value), opts.timezone);
+    }
+};
+
+export const getRangeWithFixedDate = (
+    date: Date,
+    modelValue: WritableComputedRef<InternalModuleValue>,
+    emit: VueEmit,
+    defaultedRange: ComputedRef<RangeConfig>,
+): Date[] => {
+    if (
+        Array.isArray(modelValue.value) &&
+        (modelValue.value.length === 2 || (modelValue.value.length === 1 && defaultedRange.value.partialRange))
+    ) {
+        if (
+            defaultedRange.value.fixedStart &&
+            (isDateAfter(date, modelValue.value[0]) || isDateEqual(date, modelValue.value[0]))
+        ) {
+            return [modelValue.value[0], date];
+        }
+        if (
+            defaultedRange.value.fixedEnd &&
+            (isDateBefore(date, modelValue.value[1]) || isDateEqual(date, modelValue.value[1]))
+        ) {
+            return [date, modelValue.value[1]];
+        }
+        emit('invalid-fixed-range', date);
+        return modelValue.value;
+    }
+    return [];
+};

package/src/datePicker/composables/slots.ts

@@ -0,0 +1,84 @@
+import type { Slots } from 'vue';
+import type { PresetDate } from '../interfaces';
+
+export const slots = [
+    { name: 'clock-icon', use: ['time', 'calendar', 'shared'] },
+    { name: 'arrow-left', use: ['month-year', 'calendar', 'shared', 'year-mode'] },
+    { name: 'arrow-right', use: ['month-year', 'calendar', 'shared', 'year-mode'] },
+    { name: 'arrow-up', use: ['time', 'calendar', 'month-year', 'shared'] },
+    { name: 'arrow-down', use: ['time', 'calendar', 'month-year', 'shared'] },
+    { name: 'calendar-icon', use: ['month-year', 'time', 'calendar', 'shared', 'year-mode'] },
+    { name: 'day', use: ['calendar', 'shared'] },
+    { name: 'month-overlay-value', use: ['calendar', 'month-year', 'shared'] },
+    { name: 'year-overlay-value', use: ['calendar', 'month-year', 'shared', 'year-mode'] },
+    { name: 'year-overlay', use: ['month-year', 'shared'] },
+    { name: 'month-overlay', use: ['month-year', 'shared'] },
+    { name: 'month-overlay-header', use: ['month-year', 'shared'] },
+    { name: 'year-overlay-header', use: ['month-year', 'shared'] },
+    { name: 'hours-overlay-value', use: ['calendar', 'time', 'shared'] },
+    { name: 'hours-overlay-header', use: ['calendar', 'time', 'shared'] },
+    { name: 'minutes-overlay-value', use: ['calendar', 'time', 'shared'] },
+    { name: 'minutes-overlay-header', use: ['calendar', 'time', 'shared'] },
+    { name: 'seconds-overlay-value', use: ['calendar', 'time', 'shared'] },
+    { name: 'seconds-overlay-header', use: ['calendar', 'time', 'shared'] },
+    { name: 'hours', use: ['calendar', 'time', 'shared'] },
+    { name: 'minutes', use: ['calendar', 'time', 'shared'] },
+    { name: 'month', use: ['calendar', 'month-year', 'shared'] },
+    { name: 'year', use: ['calendar', 'month-year', 'shared', 'year-mode'] },
+    { name: 'action-buttons', use: ['action'] },
+    { name: 'action-preview', use: ['action'] },
+    { name: 'calendar-header', use: ['calendar', 'shared'] },
+    { name: 'marker-tooltip', use: ['calendar', 'shared'] },
+    { name: 'action-extra', use: ['menu'] },
+    { name: 'time-picker-overlay', use: ['calendar', 'time', 'shared'] },
+    { name: 'am-pm-button', use: ['calendar', 'time', 'shared'] },
+    { name: 'left-sidebar', use: ['menu'] },
+    { name: 'right-sidebar', use: ['menu'] },
+    { name: 'month-year', use: ['month-year', 'shared'] },
+    { name: 'time-picker', use: ['menu', 'shared'] },
+    { name: 'action-row', use: ['action'] },
+    { name: 'marker', use: ['calendar', 'shared'] },
+    { name: 'quarter', use: ['shared'] },
+    { name: 'top-extra', use: ['shared', 'month-year'] },
+    { name: 'tp-inline-arrow-up', use: ['shared', 'time'] },
+    { name: 'tp-inline-arrow-down', use: ['shared', 'time'] },
+    { name: 'menu-header', use: ['menu'] },
+];
+
+export const inputSlots = [{ name: 'trigger' }, { name: 'input-icon' }, { name: 'clear-icon' }, { name: 'dp-input' }];
+
+const slotNames = {
+    all: () => slots,
+    monthYear: () => slots.filter((slot) => slot.use.includes('month-year')),
+    input: () => inputSlots,
+    timePicker: () => slots.filter((slot) => slot.use.includes('time')),
+    action: () => slots.filter((slot) => slot.use.includes('action')),
+    calendar: () => slots.filter((slot) => slot.use.includes('calendar')),
+    menu: () => slots.filter((slot) => slot.use.includes('menu')),
+    shared: () => slots.filter((slot) => slot.use.includes('shared')),
+    yearMode: () => slots.filter((slot) => slot.use.includes('year-mode')),
+};
+
+export const mapSlots = (
+    slots: Slots,
+    usage: 'all' | 'monthYear' | 'timePicker' | 'input' | 'action' | 'calendar' | 'menu' | 'shared' | 'yearMode',
+    presetDates?: PresetDate[],
+): string[] => {
+    const toReturn: string[] = [];
+
+    slotNames[usage]().forEach((slot) => {
+        if (slots[slot.name]) {
+            toReturn.push(slot.name);
+        }
+    });
+
+    if (presetDates?.length) {
+        presetDates.forEach((preset) => {
+            if (preset.slot) {
+                toReturn.push(preset.slot);
+            }
+        });
+    }
+
+    return toReturn;
+};

package/src/datePicker/composables/state.ts

@@ -0,0 +1,25 @@
+import { computed, reactive } from 'vue';
+
+const state = reactive({
+    menuFocused: false,
+    shiftKeyInMenu: false,
+});
+
+export const useState = () => {
+    const setMenuFocused = (value: boolean): void => {
+        state.menuFocused = value;
+    };
+
+    const setShiftKey = (value: boolean): void => {
+        if (state.shiftKeyInMenu === value) return;
+        state.shiftKeyInMenu = value;
+    };
+
+    const control = computed(() => ({ shiftKeyInMenu: state.shiftKeyInMenu, menuFocused: state.menuFocused }));
+
+    return {
+        control,
+        setMenuFocused,
+        setShiftKey,
+    };
+};

package/src/datePicker/composables/transition.ts

@@ -0,0 +1,18 @@
+import { computed } from 'vue';
+
+import type { Transition } from '../interfaces';
+import type { ComputedRef } from 'vue';
+
+export const useTransitions = (transitions: ComputedRef<Transition>) => {
+    const transitionName = computed(() => (isOpen: boolean): string => {
+        if (!transitions.value) return '';
+        return isOpen ? transitions.value.open : transitions.value.close;
+    });
+
+    const menuTransition = computed(() => (openOnTop: boolean) => {
+        if (!transitions.value) return '';
+        return openOnTop ? transitions.value.menuAppearTop : transitions.value.menuAppearBottom;
+    });
+
+    return { transitionName, showTransition: !!transitions.value, menuTransition };
+};