bge-ui 1.3.4 → 1.3.6

package/dist/tooltip/index.vue.d.ts

@@ -114,8 +114,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     toggleTooltip: import("vue").Ref<any>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     transition: (...args: any[]) => void;
-    opened: (...args: any[]) => void;
     closed: (...args: any[]) => void;
+    opened: (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * title
@@ -225,9 +225,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         validator(value: unknown): boolean;
     };
 }>> & {
+    onClosed?: ((...args: any[]) => any) | undefined;
     onTransition?: ((...args: any[]) => any) | undefined;
     onOpened?: ((...args: any[]) => any) | undefined;
-    onClosed?: ((...args: any[]) => any) | undefined;
 }, {
     size: string;
     type: string;

package/dist/tooltip/usePopper.d.ts

@@ -172,23 +172,23 @@ declare const usePopper: (triggerReference: any, suppliedOptions?: Options) => {
                     };
                 } | undefined;
                 offset?: {
-                    auto?: {
+                    left?: {
                         y: number;
                         x: number;
                     } | undefined;
-                    top?: {
+                    right?: {
                         y: number;
                         x: number;
                     } | undefined;
-                    bottom?: {
+                    top?: {
                         y: number;
                         x: number;
                     } | undefined;
-                    left?: {
+                    bottom?: {
                         y: number;
                         x: number;
                     } | undefined;
-                    right?: {
+                    auto?: {
                         y: number;
                         x: number;
                     } | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bge-ui",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "description": "",
   "type": "module",
   "main": "./src/index.ts",
@@ -27,7 +27,8 @@
     "tsx": "^4.6.2",
     "vite-plugin-dts": "^3.6.4",
     "vue": "^3.3.9",
-    "bignumber.js": "^9.1.2"
+    "bignumber.js": "^9.1.2",
+    "date-fns": "^3.6.0"
   },
   "devDependencies": {
     "@types/node": "^20.10.1"

package/src/datePicker/components/ActionRow.vue

@@ -0,0 +1,216 @@
+<template>
+    <div ref="actionRowRef" class="dp__action_row">
+        <template v-if="$slots['action-row']">
+            <slot
+                name="action-row"
+                v-bind="{
+                    internalModelValue,
+                    disabled,
+                    selectDate: () => $emit('select-date'),
+                    closePicker: () => $emit('close-picker'),
+                }"
+            />
+        </template>
+        <template v-else>
+            <div
+                v-if="defaultedActionRow.showPreview"
+                class="dp__selection_preview"
+                :title="formatValue"
+                :style="previewStyle"
+            >
+                <slot
+                    v-if="$slots['action-preview'] && showPreview"
+                    name="action-preview"
+                    :value="internalModelValue"
+                />
+                <template v-if="!$slots['action-preview'] && showPreview">
+                    {{ formatValue }}
+                </template>
+            </div>
+            <div ref="actionBtnContainer" class="dp__action_buttons" data-dp-element="action-row">
+                <slot v-if="$slots['action-buttons']" name="action-buttons" :value="internalModelValue" />
+                <template v-if="!$slots['action-buttons']">
+                    <button
+                        v-if="!defaultedInline.enabled && defaultedActionRow.showCancel"
+                        ref="cancelButtonRef"
+                        type="button"
+                        class="dp__action_button dp__action_cancel"
+                        @click="$emit('close-picker')"
+                        @keydown="checkKeyDown($event, () => $emit('close-picker'))"
+                    >
+                        {{ cancelText }}
+                    </button>
+                    <button
+                        v-if="defaultedActionRow.showNow"
+                        type="button"
+                        class="dp__action_button dp__action_cancel"
+                        @click="$emit('select-now')"
+                        @keydown="checkKeyDown($event, () => $emit('select-now'))"
+                    >
+                        {{ nowButtonLabel }}
+                    </button>
+                    <button
+                        v-if="defaultedActionRow.showSelect"
+                        ref="selectButtonRef"
+                        type="button"
+                        class="dp__action_button dp__action_select"
+                        :disabled="disabled"
+                        data-test="select-button"
+                        @keydown="checkKeyDown($event, () => selectDate())"
+                        @click="selectDate"
+                    >
+                        {{ selectText }}
+                    </button>
+                </template>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+    import { checkKeyDown, convertType, unrefElement } from '../utils/util';
+    import { useArrowNavigation, useDefaults, useValidation } from '../composables';
+    import { PickerBaseProps } from '../props';
+    import { formatDate } from '../utils/date-utils';
+
+    import type { PropType } from 'vue';
+
+    defineOptions({
+        compatConfig: {
+            MODE: 3,
+        },
+    });
+
+    const emit = defineEmits(['close-picker', 'select-date', 'select-now', 'invalid-select']);
+
+    const props = defineProps({
+        menuMount: { type: Boolean as PropType<boolean>, default: false },
+        calendarWidth: { type: Number as PropType<number>, default: 0 },
+        ...PickerBaseProps,
+    });
+
+    const {
+        defaultedActionRow,
+        defaultedPreviewFormat,
+        defaultedMultiCalendars,
+        defaultedTextInput,
+        defaultedInline,
+        defaultedRange,
+        defaultedMultiDates,
+    } = useDefaults(props);
+    const { isTimeValid, isMonthValid } = useValidation(props);
+    const { buildMatrix } = useArrowNavigation();
+
+    const cancelButtonRef = ref(null);
+    const selectButtonRef = ref(null);
+    const showPreview = ref(false);
+    const previewStyle = ref<any>({});
+    const actionBtnContainer = ref<HTMLElement | null>(null);
+    const actionRowRef = ref<HTMLElement | null>(null);
+
+    onMounted(() => {
+        if (props.arrowNavigation) {
+            buildMatrix([unrefElement(cancelButtonRef), unrefElement(selectButtonRef)] as HTMLElement[], 'actionRow');
+        }
+        getPreviewAvailableSpace();
+        window.addEventListener('resize', getPreviewAvailableSpace);
+    });
+
+    onUnmounted(() => {
+        window.removeEventListener('resize', getPreviewAvailableSpace);
+    });
+
+    const getPreviewAvailableSpace = () => {
+        showPreview.value = false;
+        setTimeout(() => {
+            const rect = actionBtnContainer.value?.getBoundingClientRect();
+            const rowRect = actionRowRef.value?.getBoundingClientRect();
+            if (rect && rowRect) {
+                previewStyle.value.maxWidth = `${rowRect.width - rect.width - 20}px`;
+            }
+            showPreview.value = true;
+        }, 0);
+    };
+
+    const validDateRange = computed(() => {
+        return defaultedRange.value.enabled && !defaultedRange.value.partialRange && props.internalModelValue
+            ? (props.internalModelValue as Date[]).length === 2
+            : true;
+    });
+
+    const disabled = computed(
+        () =>
+            !isTimeValid.value(props.internalModelValue) ||
+            !isMonthValid.value(props.internalModelValue) ||
+            !validDateRange.value,
+    );
+
+    const handleCustomPreviewFormat = () => {
+        const formatFn = defaultedPreviewFormat.value as (val: Date | Date[]) => string | string[];
+
+        if (props.timePicker) return formatFn(convertType(props.internalModelValue));
+
+        if (props.monthPicker) return formatFn(convertType(props.internalModelValue as Date));
+
+        return formatFn(convertType(props.internalModelValue));
+    };
+
+    const formatRangeDate = () => {
+        const dates = props.internalModelValue as Date[];
+        if (defaultedMultiCalendars.value.count > 0) {
+            return `${formatDatePreview(dates[0])} - ${formatDatePreview(dates[1])}`;
+        }
+        return [formatDatePreview(dates[0]), formatDatePreview(dates[1])];
+    };
+
+    const formatDatePreview = (date: Date) => {
+        return formatDate(
+            date,
+            defaultedPreviewFormat.value as string,
+            props.formatLocale,
+            defaultedTextInput.value.rangeSeparator,
+            props.modelAuto,
+            defaultedPreviewFormat.value as string,
+        );
+    };
+
+    const previewValue = computed((): string | string[] => {
+        if (!props.internalModelValue || !props.menuMount) return '';
+        if (typeof defaultedPreviewFormat.value === 'string') {
+            if (Array.isArray(props.internalModelValue)) {
+                if (props.internalModelValue.length === 2 && props.internalModelValue[1]) {
+                    return formatRangeDate();
+                }
+                if (defaultedMultiDates.value.enabled) {
+                    return props.internalModelValue.map((date) => `${formatDatePreview(date)}`);
+                }
+                if (props.modelAuto) {
+                    return `${formatDatePreview(props.internalModelValue[0])}`;
+                }
+                return `${formatDatePreview(props.internalModelValue[0])} -`;
+            }
+            return formatDatePreview(props.internalModelValue);
+        }
+        return handleCustomPreviewFormat();
+    });
+
+    const dateSeparator = () => (defaultedMultiDates.value.enabled ? '; ' : ' - ');
+
+    const formatValue = computed(() =>
+        !Array.isArray(previewValue.value) ? previewValue.value : previewValue.value.join(dateSeparator()),
+    );
+
+    const selectDate = (): void => {
+        if (
+            isTimeValid.value(props.internalModelValue) &&
+            isMonthValid.value(props.internalModelValue) &&
+            validDateRange.value
+        ) {
+            emit('select-date');
+        } else {
+            emit('invalid-select');
+        }
+    };
+</script>

package/src/datePicker/components/Common/ArrowBtn.vue

@@ -0,0 +1,42 @@
+<template>
+    <button
+        ref="elRef"
+        type="button"
+        :data-dp-element="elName"
+        class="dp__btn dp--arrow-btn-nav"
+        tabindex="0"
+        :aria-label="ariaLabel"
+        :aria-disabled="disabled || undefined"
+        @click="$emit('activate')"
+        @keydown="checkKeyDown($event, () => $emit('activate'), true)"
+    >
+        <span class="dp__inner_nav" :class="{ dp__inner_nav_disabled: disabled }">
+            <slot />
+        </span>
+    </button>
+</template>
+
+<script lang="ts" setup>
+    import { onMounted, ref } from 'vue';
+    import { checkKeyDown } from '../../utils/util';
+
+    defineOptions({
+        compatConfig: {
+            MODE: 3,
+        },
+    });
+
+    const emit = defineEmits(['activate', 'set-ref']);
+
+    interface Props {
+        ariaLabel?: string;
+        elName?: string;
+        disabled: boolean;
+    }
+
+    defineProps<Props>();
+
+    const elRef = ref(null);
+
+    onMounted(() => emit('set-ref', elRef));
+</script>

package/src/datePicker/components/Common/InstanceWrap.vue

@@ -0,0 +1,28 @@
+<template>
+    <div
+        :class="{
+            dp__menu_inner: !stretch,
+            'dp--menu--inner-stretched': stretch,
+            dp__flex_display: multiCalendars > 0,
+            'dp--flex-display-collapsed': collapse,
+        }"
+    >
+        <div v-for="(instance, i) in instances" :key="instance" :class="calendarInstanceClassWrapper">
+            <slot :instance="instance" :index="i"></slot>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { computed } from 'vue';
+
+    const props = defineProps<{ multiCalendars: number; stretch?: boolean; collapse?: boolean }>();
+
+    const instances = computed((): number[] =>
+        props.multiCalendars > 0 ? [...Array(props.multiCalendars).keys()] : [0],
+    );
+
+    const calendarInstanceClassWrapper = computed(() => ({
+        dp__instance_calendar: props.multiCalendars > 0,
+    }));
+</script>

package/src/datePicker/components/Common/SelectionOverlay.vue

@@ -0,0 +1,320 @@
+<template>
+    <div
+        ref="gridWrapRef"
+        :class="dpOverlayClass"
+        :style="dpOverlayStyle"
+        :role="useRelative ? undefined : 'dialog'"
+        :aria-label="overlayLabel"
+        :tabindex="useRelative ? undefined : '0'"
+        @keydown="onKeyDown"
+        @click.prevent
+    >
+        <div
+            ref="containerRef"
+            :class="containerClass"
+            :style="{ '--dp-overlay-height': `${containerHeight}px` }"
+            role="grid"
+        >
+            <div class="dp__selection_grid_header"><slot name="header"></slot></div>
+            <template v-if="$slots.overlay">
+                <slot name="overlay" />
+            </template>
+            <template v-else>
+                <div
+                    v-for="(row, i) in items"
+                    :key="i"
+                    class="dp__overlay_row"
+                    role="row"
+                >
+                    <div
+                        v-for="(col, ind) in row"
+                        :key="col.value"
+                        :ref="(el) => assignRef(el, col, i, ind)"
+                        role="gridcell"
+                        :class="cellClassName"
+                        :aria-selected="col.active || undefined"
+                        :aria-disabled="col.disabled || undefined"
+                        tabindex="0"
+                        :data-test="col.text"
+                        @click.prevent="onClick(col)"
+                        @keydown="checkKeyDown($event, () => onClick(col), true)"
+                        @mouseover="setHoverValue(col.value)"
+                    >
+                        <div :class="col.className">
+                            <slot v-if="$slots.item" name="item" :item="col" />
+                            <template v-if="!$slots.item">{{ col.text }}</template>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </div>
+        <button
+            v-if="$slots['button-icon']"
+            v-show="!hideNavigationButtons(hideNavigation, type)"
+            ref="toggleButton"
+            type="button"
+            :aria-label="defaultedAriaLabels?.toggleOverlay"
+            :class="actionButtonClass"
+            tabindex="0"
+            @click="toggle"
+            @keydown="onBtnKeyDown"
+        >
+            <slot name="button-icon" />
+        </button>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { computed, nextTick, onBeforeUpdate, onMounted, onUnmounted, ref, watch } from 'vue';
+
+    import {
+        checkKeyDown,
+        checkStopPropagation,
+        convertType,
+        findFocusableEl,
+        getElWithin,
+        unrefElement,
+    } from '../../utils/util';
+    import { useArrowNavigation, useCommon, useDefaults } from '../../composables';
+
+    import type { AriaLabels, Config, DynamicClass, Flow, OverlayGridItem, TextInputProp } from '../../interfaces';
+    import type { PickerBasePropsType } from '../../props';
+    import { EventKey } from '../../constants';
+
+    const { setSelectionGrid, buildMultiLevelMatrix, setMonthPicker } = useArrowNavigation();
+
+    const emit = defineEmits(['selected', 'toggle', 'reset-flow', 'hover-value']);
+
+    interface Props {
+        items: OverlayGridItem[][];
+        type: Flow;
+        isLast: boolean;
+        arrowNavigation?: boolean;
+        skipButtonRef?: boolean;
+        headerRefs?: (HTMLElement | null)[];
+        hideNavigation?: Flow[];
+        escClose?: boolean;
+        useRelative?: boolean;
+        height?: number | string;
+        textInput?: TextInputProp;
+        config?: Partial<Config>;
+        noOverlayFocus?: boolean;
+        focusValue?: number;
+        menuWrapRef?: HTMLElement | null;
+        ariaLabels?: Partial<AriaLabels>;
+        overlayLabel?: string;
+    }
+
+    const props = defineProps<Props>();
+
+    const { defaultedAriaLabels, defaultedTextInput, defaultedConfig } = useDefaults(
+        props as unknown as PickerBasePropsType,
+    );
+    const { hideNavigationButtons } = useCommon();
+
+    const scrollable = ref(false);
+    const selectionActiveRef = ref<HTMLElement | null>(null);
+    const gridWrapRef = ref(null);
+    const elementRefs = ref<Array<HTMLElement | null>[]>([]);
+    const hoverValue = ref();
+    const toggleButton = ref<HTMLElement | null>(null);
+    const containerHeight = ref(0);
+    const containerRef = ref<HTMLElement | null>(null);
+
+    onBeforeUpdate(() => {
+        selectionActiveRef.value = null;
+    });
+
+    /**
+     * On mounted hook, set the scroll position, if any to a selected value when opening overlay
+     */
+    onMounted(() => {
+        nextTick().then(() => setContainerHeightAndScroll());
+        if (!props.noOverlayFocus) {
+            focusGrid();
+        }
+        handleArrowNav(true);
+    });
+
+    onUnmounted(() => handleArrowNav(false));
+
+    const handleArrowNav = (value: boolean): void => {
+        if (props.arrowNavigation) {
+            if (props.headerRefs?.length) {
+                setMonthPicker(value);
+            } else {
+                setSelectionGrid(value);
+            }
+        }
+    };
+
+    const focusGrid = (): void => {
+        const elm = unrefElement(gridWrapRef);
+        if (elm) {
+            if (!defaultedTextInput.value.enabled) {
+                if (selectionActiveRef.value) {
+                    selectionActiveRef.value?.focus({ preventScroll: true });
+                } else {
+                    elm.focus({ preventScroll: true });
+                }
+            }
+
+            scrollable.value = elm.clientHeight < elm.scrollHeight;
+        }
+    };
+
+    // Dynamic class  for the overlay
+    const dpOverlayClass = computed(
+        (): DynamicClass => ({
+            dp__overlay: true,
+            'dp--overlay-absolute': !props.useRelative,
+            'dp--overlay-relative': props.useRelative,
+        }),
+    );
+
+    const dpOverlayStyle = computed(() =>
+        props.useRelative ? { height: `${props.height}px`, width: `var(--dp-menu-min-width)` } : undefined,
+    );
+
+    const cellClassName = computed(() => ({
+        dp__overlay_col: true,
+    }));
+
+    /**
+     * Dynamic class for action button
+     */
+    const actionButtonClass = computed(
+        (): DynamicClass => ({
+            dp__btn: true,
+            dp__button: true,
+            dp__overlay_action: true,
+            dp__over_action_scroll: scrollable.value,
+            dp__button_bottom: props.isLast,
+        }),
+    );
+
+    const containerClass = computed(() => ({
+        dp__overlay_container: true,
+        dp__container_flex: props.items?.length <= 6,
+        dp__container_block: props.items?.length > 6,
+    }));
+
+    watch(
+        () => props.items,
+        () => setContainerHeightAndScroll(false),
+        { deep: true },
+    );
+
+    const setContainerHeightAndScroll = (setScroll = true) => {
+        nextTick().then(() => {
+            const el = unrefElement(selectionActiveRef);
+            const parent = unrefElement(gridWrapRef);
+            const btn = unrefElement(toggleButton);
+            const container = unrefElement(containerRef);
+            const toggleBtnHeight = btn ? btn.getBoundingClientRect().height : 0;
+            if (parent) {
+                if (!parent.getBoundingClientRect().height) {
+                    containerHeight.value = defaultedConfig.value.modeHeight - toggleBtnHeight;
+                } else {
+                    containerHeight.value = parent.getBoundingClientRect().height - toggleBtnHeight;
+                }
+            }
+            if (el && container && setScroll) {
+                container.scrollTop =
+                    el.offsetTop -
+                    container.offsetTop -
+                    (containerHeight.value / 2 - el.getBoundingClientRect().height) -
+                    toggleBtnHeight;
+            }
+        });
+    };
+
+    /**
+     * Handle click on cell, if value is enabled (not in filters), emit value back to parent
+     */
+    const onClick = (val: OverlayGridItem): void => {
+        if (!val.disabled) {
+            emit('selected', val.value);
+        }
+    };
+
+    const toggle = () => {
+        emit('toggle');
+        emit('reset-flow');
+    };
+
+    const handleEsc = () => {
+        if (props.escClose) {
+            toggle();
+        }
+    };
+
+    const assignRef = (el: any, col: OverlayGridItem, rowInd: number, colInd: number): void => {
+        if (el) {
+            if (col.active || col.value === props.focusValue) {
+                selectionActiveRef.value = el;
+            }
+            if (props.arrowNavigation) {
+                if (Array.isArray(elementRefs.value[rowInd])) {
+                    elementRefs.value[rowInd][colInd] = el;
+                } else {
+                    elementRefs.value[rowInd] = [el];
+                }
+                buildMatrix();
+            }
+        }
+    };
+
+    const buildMatrix = () => {
+        const refs = props.headerRefs?.length
+            ? [props.headerRefs].concat(elementRefs.value)
+            : elementRefs.value.concat([props.skipButtonRef ? [] : [toggleButton.value]]);
+
+        buildMultiLevelMatrix(convertType(refs), props.headerRefs?.length ? 'monthPicker' : 'selectionGrid');
+    };
+
+    const handleArrowKey = (ev: KeyboardEvent) => {
+        if (props.arrowNavigation) return;
+        checkStopPropagation(ev, defaultedConfig.value, true);
+    };
+
+    const setHoverValue = (val: number) => {
+        hoverValue.value = val;
+        emit('hover-value', val);
+    };
+
+    const onTab = () => {
+        toggle();
+        if (!props.isLast) {
+            const actionRow = getElWithin(props.menuWrapRef ?? null, 'action-row');
+            if (actionRow) {
+                const focusable = findFocusableEl(actionRow);
+                focusable?.focus();
+            }
+        }
+    };
+
+    const onKeyDown = (ev: KeyboardEvent) => {
+        switch (ev.key) {
+            case EventKey.esc:
+                return handleEsc();
+            case EventKey.arrowLeft:
+                return handleArrowKey(ev);
+            case EventKey.arrowRight:
+                return handleArrowKey(ev);
+            case EventKey.arrowUp:
+                return handleArrowKey(ev);
+            case EventKey.arrowDown:
+                return handleArrowKey(ev);
+            default:
+                return;
+        }
+    };
+
+    const onBtnKeyDown = (ev: KeyboardEvent) => {
+        if (ev.key === EventKey.enter) return toggle();
+        if (ev.key === EventKey.tab) return onTab();
+    };
+
+    defineExpose({ focusGrid });
+</script>