bge-ui 1.3.4 → 1.3.6

package/src/datePicker/components/TimePicker/TimePicker.vue

@@ -0,0 +1,265 @@
+<template>
+    <div class="dp--tp-wrap">
+        <button
+            v-if="!timePicker && !timePickerInline"
+            v-show="!hideNavigationButtons(hideNavigation, 'time')"
+            ref="openTimePickerBtn"
+            type="button"
+            :class="{ ...toggleButtonClass, 'dp--hidden-el': showTimePicker }"
+            :aria-label="defaultedAriaLabels?.openTimePicker"
+            :tabindex="noOverlayFocus ? undefined : 0"
+            data-test="open-time-picker-btn"
+            @keydown="checkKeyDown($event, () => toggleTimePicker(true))"
+            @click="toggleTimePicker(true)"
+        >
+            <slot v-if="$slots['clock-icon']" name="clock-icon" />
+            <ClockIcon v-if="!$slots['clock-icon']" />
+        </button>
+        <transition :name="transitionName(showTimePicker)" :css="showTransition && !timePickerInline">
+            <div
+                v-if="showTimePicker || timePicker || timePickerInline"
+                ref="overlayRef"
+                :role="timePickerInline ? undefined : 'dialog'"
+                :class="{
+                    dp__overlay: !timePickerInline,
+                    'dp--overlay-absolute': !props.timePicker && !timePickerInline,
+                    'dp--overlay-relative': props.timePicker,
+                }"
+                :style="timePicker ? { height: `${defaultedConfig.modeHeight}px` } : undefined"
+                :aria-label="defaultedAriaLabels?.timePicker"
+                :tabindex="timePickerInline ? undefined : 0"
+            >
+                <div
+                    :class="
+                        !timePickerInline
+                            ? 'dp__overlay_container dp__container_flex dp__time_picker_overlay_container'
+                            : 'dp__time_picker_inline_container'
+                    "
+                    style="display: flex"
+                >
+                    <slot
+                        v-if="$slots['time-picker-overlay']"
+                        name="time-picker-overlay"
+                        :hours="hours"
+                        :minutes="minutes"
+                        :seconds="seconds"
+                        :set-hours="updateHours"
+                        :set-minutes="updateMinutes"
+                        :set-seconds="updateSeconds"
+                    ></slot>
+                    <template v-if="!$slots['time-picker-overlay']">
+                        <div :class="timePickerInline ? 'dp__flex' : 'dp__overlay_row dp__flex_row'">
+                            <TimeInput
+                                v-for="(tInput, index) in timeInputs"
+                                v-show="index === 0 ? true : shouldShowRangedInput"
+                                :key="index"
+                                v-bind="{
+                                    ...$props,
+                                    order: index,
+                                    hours: tInput.hours,
+                                    minutes: tInput.minutes,
+                                    seconds: tInput.seconds,
+                                    closeTimePickerBtn,
+                                    disabledTimesConfig,
+                                    disabled: index === 0 ? defaultedRange.fixedStart : defaultedRange.fixedEnd,
+                                }"
+                                ref="timeInputRefs"
+                                :validate-time="
+                                    (type: TimeType, value: number) => validateTime(type, getEvent(value, index, type))
+                                "
+                                @update:hours="updateHours(getEvent($event, index, 'hours'))"
+                                @update:minutes="updateMinutes(getEvent($event, index, 'minutes'))"
+                                @update:seconds="updateSeconds(getEvent($event, index, 'seconds'))"
+                                @mounted="focusOverlay"
+                                @overlay-closed="timeInputOverlayClose"
+                                @overlay-opened="timeInputOverlayOpen"
+                                @am-pm-change="$emit('am-pm-change', $event)"
+                            >
+                                <template v-for="(slot, i) in timeInputSlots" #[slot]="args" :key="i">
+                                    <slot :name="slot" v-bind="args" />
+                                </template>
+                            </TimeInput>
+                        </div>
+                    </template>
+                    <button
+                        v-if="!timePicker && !timePickerInline"
+                        v-show="!hideNavigationButtons(hideNavigation, 'time')"
+                        ref="closeTimePickerBtn"
+                        type="button"
+                        :class="{ ...toggleButtonClass, 'dp--hidden-el': timePickerOverlayOpen }"
+                        :aria-label="defaultedAriaLabels?.closeTimePicker"
+                        tabindex="0"
+                        @keydown="checkKeyDown($event, () => toggleTimePicker(false))"
+                        @click="toggleTimePicker(false)"
+                    >
+                        <slot v-if="$slots['calendar-icon']" name="calendar-icon" />
+                        <CalendarIcon v-if="!$slots['calendar-icon']" />
+                    </button>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { computed, nextTick, onMounted, ref, useSlots } from 'vue';
+
+    import { ClockIcon, CalendarIcon } from '../../components/Icons';
+    import TimeInput from '../../components/TimePicker/TimeInput.vue';
+
+    import { checkKeyDown, findFocusableEl, isModelAuto, unrefElement } from '../../utils/util';
+    import { mapSlots, useTransitions, useArrowNavigation, useDefaults, useCommon } from '../../composables';
+    import { PickerBaseProps } from '../../props';
+
+    import type { PropType } from 'vue';
+    import type { DisabledTimesArrProp, TimeInputRef, TimeType } from '../../interfaces';
+    import { FlowStep } from '../../constants';
+
+    defineOptions({
+        compatConfig: {
+            MODE: 3,
+        },
+    });
+
+    const emit = defineEmits([
+        'update:hours',
+        'update:minutes',
+        'update:seconds',
+        'mount',
+        'reset-flow',
+        'overlay-opened',
+        'overlay-closed',
+        'am-pm-change',
+    ]);
+
+    const props = defineProps({
+        hours: { type: [Number, Array] as PropType<number | number[]>, default: 0 },
+        minutes: { type: [Number, Array] as PropType<number | number[]>, default: 0 },
+        seconds: { type: [Number, Array] as PropType<number | number[]>, default: 0 },
+        disabledTimesConfig: { type: Function as PropType<DisabledTimesArrProp>, default: null },
+        validateTime: {
+            type: Function as PropType<(type: TimeType, value: number | number[]) => boolean>,
+            default: () => false,
+        },
+        ...PickerBaseProps,
+    });
+
+    const { buildMatrix, setTimePicker } = useArrowNavigation();
+    const slots = useSlots();
+
+    const { defaultedTransitions, defaultedAriaLabels, defaultedTextInput, defaultedConfig, defaultedRange } =
+        useDefaults(props);
+    const { transitionName, showTransition } = useTransitions(defaultedTransitions);
+    const { hideNavigationButtons } = useCommon();
+
+    const openTimePickerBtn = ref(null);
+    const closeTimePickerBtn = ref(null);
+    const timeInputRefs = ref<TimeInputRef[]>([]);
+    const overlayRef = ref<HTMLElement | null>(null);
+    const timePickerOverlayOpen = ref(false);
+
+    onMounted(() => {
+        emit('mount');
+        if (!props.timePicker && props.arrowNavigation) {
+            buildMatrix([unrefElement(openTimePickerBtn.value) as HTMLElement], 'time');
+        } else {
+            setTimePicker(true, props.timePicker);
+        }
+    });
+
+    const shouldShowRangedInput = computed(() => {
+        if (defaultedRange.value.enabled && props.modelAuto) return isModelAuto(props.internalModelValue);
+        return true;
+    });
+
+    const showTimePicker = ref(false);
+
+    const getTimeInput = (i: number) => {
+        return {
+            hours: Array.isArray(props.hours) ? props.hours[i] : props.hours,
+            minutes: Array.isArray(props.minutes) ? props.minutes[i] : props.minutes,
+            seconds: Array.isArray(props.seconds) ? props.seconds[i] : props.seconds,
+        };
+    };
+
+    const timeInputs = computed((): { hours: number; minutes: number; seconds: number }[] => {
+        const arr = [];
+        if (defaultedRange.value.enabled) {
+            for (let i = 0; i < 2; i++) {
+                arr.push(getTimeInput(i));
+            }
+        } else {
+            arr.push(getTimeInput(0));
+        }
+        return arr as { hours: number; minutes: number; seconds: number }[];
+    });
+
+    const toggleTimePicker = (show: boolean, flow = false, childOpen = ''): void => {
+        if (!flow) {
+            emit('reset-flow');
+        }
+        showTimePicker.value = show;
+
+        emit(show ? 'overlay-opened' : 'overlay-closed', FlowStep.time);
+
+        if (props.arrowNavigation) {
+            setTimePicker(show);
+        }
+
+        nextTick(() => {
+            if (childOpen !== '' && timeInputRefs.value[0]) {
+                timeInputRefs.value[0].openChildCmp(childOpen);
+            }
+        });
+    };
+
+    const toggleButtonClass = computed(() => ({
+        dp__btn: true,
+        dp__button: true,
+        dp__button_bottom: props.autoApply && !defaultedConfig.value.keepActionRow,
+    }));
+
+    const timeInputSlots = mapSlots(slots, 'timePicker');
+
+    const getEvent = (event: number, index: number, property: 'hours' | 'minutes' | 'seconds') => {
+        if (!defaultedRange.value.enabled) {
+            return event;
+        }
+        if (index === 0) {
+            return [event, timeInputs.value[1][property]];
+        }
+        return [timeInputs.value[0][property], event];
+    };
+
+    const updateHours = (hours: number | number[]): void => {
+        emit('update:hours', hours);
+    };
+
+    const updateMinutes = (minutes: number | number[]): void => {
+        emit('update:minutes', minutes);
+    };
+
+    const updateSeconds = (seconds: number | number[]): void => {
+        emit('update:seconds', seconds);
+    };
+
+    const focusOverlay = () => {
+        if (overlayRef.value && !defaultedTextInput.value.enabled && !props.noOverlayFocus) {
+            const el = findFocusableEl(overlayRef.value);
+            if (el) {
+                el.focus({ preventScroll: true });
+            }
+        }
+    };
+
+    const timeInputOverlayClose = (mode: TimeType) => {
+        timePickerOverlayOpen.value = false;
+        emit('overlay-closed', mode);
+    };
+    const timeInputOverlayOpen = (mode: TimeType) => {
+        timePickerOverlayOpen.value = true;
+        emit('overlay-opened', mode);
+    };
+
+    defineExpose({ toggleTimePicker });
+</script>

package/src/datePicker/components/TimePicker/TimePickerSolo.vue

@@ -0,0 +1,79 @@
+<template>
+    <InstanceWrap :multi-calendars="0" stretch>
+        <TimePicker
+            ref="tpRef"
+            v-bind="$props"
+            :hours="time.hours"
+            :minutes="time.minutes"
+            :seconds="time.seconds"
+            :internal-model-value="internalModelValue"
+            :disabled-times-config="disabledTimesConfig"
+            :validate-time="validateTime"
+            @update:hours="updateTime($event)"
+            @update:minutes="updateTime($event, false)"
+            @update:seconds="updateTime($event, false, true)"
+            @am-pm-change="$emit('am-pm-change', $event)"
+            @reset-flow="$emit('reset-flow')"
+            @overlay-closed="$emit('overlay-toggle', { open: false, overlay: $event })"
+            @overlay-opened="$emit('overlay-toggle', { open: true, overlay: $event })"
+        >
+            <template v-for="(slot, i) in timePickerSlots" #[slot]="args" :key="i">
+                <slot :name="slot" v-bind="args" />
+            </template>
+        </TimePicker>
+    </InstanceWrap>
+</template>
+
+<script lang="ts" setup>
+    import { onMounted, ref, useSlots } from 'vue';
+
+    import TimePicker from '../../components/TimePicker/TimePicker.vue';
+
+    import { PickerBaseProps } from '../../props';
+    import { mapSlots } from '../../composables';
+    import { useTimePicker } from '../../components/TimePicker/time-picker';
+    import InstanceWrap from '../../components/Common/InstanceWrap.vue';
+
+    const emit = defineEmits([
+        'update:internal-model-value',
+        'time-update',
+        'am-pm-change',
+        'mount',
+        'reset-flow',
+        'update-flow-step',
+        'overlay-toggle',
+    ]);
+    const props = defineProps({
+        ...PickerBaseProps,
+    });
+    defineOptions({
+        compatConfig: {
+            MODE: 3,
+        },
+    });
+    const slots = useSlots();
+    const timePickerSlots = mapSlots(slots, 'timePicker');
+    const tpRef = ref<InstanceType<typeof TimePicker> | null>(null);
+
+    const { time, modelValue, disabledTimesConfig, updateTime, validateTime } = useTimePicker(props, emit);
+
+    onMounted(() => {
+        if (!props.shadow) {
+            emit('mount', null);
+        }
+    });
+
+    const getSidebarProps = () => {
+        return {
+            modelValue,
+            time,
+            updateTime,
+        };
+    };
+
+    const toggleTimePicker = (show: boolean, flow = false, childOpen = '') => {
+        tpRef.value?.toggleTimePicker(show, flow, childOpen);
+    };
+
+    defineExpose({ getSidebarProps, toggleTimePicker });
+</script>

package/src/datePicker/components/TimePicker/time-picker-utils.ts

@@ -0,0 +1,179 @@
+import { computed } from 'vue';
+
+import { isAfter, isBefore, setMilliseconds, setSeconds } from 'date-fns';
+
+import { getDate, isDateEqual, setDateTime } from '../../utils/date-utils';
+import { useDefaults } from '../../composables';
+
+import type { InternalModuleValue, Time, TimeType, TimeModel, TimeValuesInv, DisabledTime } from '../../interfaces';
+import type { UnwrapNestedRefs, WritableComputedRef } from 'vue';
+import type { PickerBasePropsType } from '../../props';
+
+export const useTimePickerUtils = (
+    props: PickerBasePropsType,
+    time: UnwrapNestedRefs<Time>,
+    modelValue: WritableComputedRef<InternalModuleValue>,
+    updateFlow?: () => void,
+) => {
+    const { defaultedRange } = useDefaults(props);
+    const getTimeValue = (type: TimeType, i?: number): number => {
+        if (Array.isArray(time[type])) return (time[type] as number[])[i as number];
+        return time[type] as number;
+    };
+    // Check if seconds are enabled, and return proper value
+    const getSecondsValue = (i?: number): number => {
+        if (props.enableSeconds) {
+            if (Array.isArray(time.seconds)) {
+                return time.seconds[i as number];
+            }
+            return time.seconds;
+        }
+        return 0;
+    };
+    const getSetDateTime = (dateValue: Date | null, i?: number): Date => {
+        if (!dateValue) return setSeconds(getDate(), getSecondsValue(i));
+        if (i !== undefined) {
+            return setDateTime(dateValue, getTimeValue('hours', i), getTimeValue('minutes', i), getSecondsValue(i));
+        }
+        return setDateTime(dateValue, time.hours as number, time.minutes as number, getSecondsValue());
+    };
+    // Any time modification will go through this function
+    const setTime = (property: TimeType, value: number | number[]): void => {
+        time[property] = value;
+    };
+
+    const isRangeCheck = computed(() => {
+        if (props.modelAuto && defaultedRange.value.enabled) {
+            return Array.isArray(modelValue.value) ? modelValue.value.length > 1 : false;
+        }
+        return defaultedRange.value.enabled;
+    });
+
+    const validateTime = (type: TimeType, value: number | number[]) => {
+        const copies = Object.fromEntries(
+            Object.keys(time).map((key) => {
+                if (key === type) return [key, value];
+                return [key, time[key as TimeType]].slice();
+            }),
+        );
+
+        if (isRangeCheck.value && !defaultedRange.value.disableTimeRangeValidation) {
+            const setTime = (index: number) =>
+                !modelValue.value
+                    ? (null as unknown as Date)
+                    : setDateTime(
+                          (modelValue.value as Date[])[index],
+                          (copies.hours as number[])[index],
+                          (copies.minutes as number[])[index],
+                          (copies.seconds as number[])[index],
+                      );
+
+            const resetMilliseconds = (index: number) => setMilliseconds((modelValue.value as Date[])[index], 0);
+            return !(
+                isDateEqual(setTime(0), setTime(1)) &&
+                (isAfter(setTime(0), resetMilliseconds(1)) || isBefore(setTime(1), resetMilliseconds(0)))
+            );
+        }
+        return true;
+    };
+
+    const updateTime = (type: TimeType, value: number | number[]) => {
+        const valid = validateTime(type, value);
+        if (valid) {
+            setTime(type, value);
+            if (updateFlow) updateFlow();
+        }
+    };
+
+    const updateHours = (value: number | number[]) => {
+        updateTime('hours', value);
+    };
+
+    const updateMinutes = (value: number | number[]) => {
+        updateTime('minutes', value);
+    };
+
+    const updateSeconds = (value: number | number[]) => {
+        updateTime('seconds', value);
+    };
+
+    const updateTimeValues = (
+        value: number | number[],
+        isHours: boolean,
+        isSeconds: boolean,
+        handleTimeUpdate: (date: Date | Date[]) => void,
+    ) => {
+        if (isHours) updateHours(value);
+        if (!isHours && !isSeconds) updateMinutes(value);
+        if (isSeconds) updateSeconds(value);
+
+        if (modelValue.value) {
+            handleTimeUpdate(modelValue.value);
+        }
+    };
+
+    /**
+     * If start time is provided, assign data.
+     * Note: data is sanitized  parameters since prop value can be provided partially
+     */
+    const assignStartTime = (startTime: TimeModel | TimeModel[] | null): void => {
+        if (startTime) {
+            const isMulti = Array.isArray(startTime);
+            const hours = isMulti ? [+startTime[0].hours, +startTime[1].hours] : +startTime.hours;
+            const minutes = isMulti ? [+startTime[0].minutes, +startTime[1].minutes] : +startTime.minutes;
+            const seconds = isMulti ? [+startTime[0].seconds, +startTime[1].seconds] : +startTime.seconds;
+
+            setTime('hours', hours);
+            setTime('minutes', minutes);
+            if (props.enableSeconds) {
+                setTime('seconds', seconds);
+            }
+        }
+    };
+
+    const getDisabledTimesData = (ind: number, hours?: number) => {
+        const data: { hours: number; disabledArr: DisabledTime[] } = {
+            hours: Array.isArray(time.hours) ? time.hours[ind] : time.hours,
+            disabledArr: [],
+        };
+
+        if (hours || hours === 0) data.hours = hours;
+
+        if (Array.isArray(props.disabledTimes)) {
+            data.disabledArr = (
+                defaultedRange.value.enabled && Array.isArray(props.disabledTimes[ind])
+                    ? props.disabledTimes[ind]
+                    : props.disabledTimes
+            ) as DisabledTime[];
+        }
+        return data;
+    };
+
+    const disabledTimesConfig = computed(() => (ind: number, hoursVal?: number): TimeValuesInv => {
+        if (Array.isArray(props.disabledTimes)) {
+            const { disabledArr, hours } = getDisabledTimesData(ind, hoursVal);
+
+            const timeFound = disabledArr.filter((time) => +time.hours === hours);
+            if (timeFound[0]?.minutes === '*') return { hours: [hours], minutes: undefined, seconds: undefined };
+            return {
+                hours: [],
+                minutes: timeFound?.map((t) => +t.minutes) ?? [],
+                seconds: timeFound?.map((t) => (t.seconds ? +t.seconds : undefined)) ?? [],
+            };
+        }
+        return { hours: [], minutes: [], seconds: [] };
+    });
+
+    return {
+        setTime,
+        updateHours,
+        updateMinutes,
+        updateSeconds,
+        getSetDateTime,
+        updateTimeValues,
+        getSecondsValue,
+        assignStartTime,
+        validateTime,
+        disabledTimesConfig,
+    };
+};

package/src/datePicker/components/TimePicker/time-picker.ts

@@ -0,0 +1,112 @@
+import { onMounted } from 'vue';
+import { set } from 'date-fns';
+
+import { useDefaults, useModel } from '../../composables';
+import { useTimePickerUtils } from '../../components/TimePicker/time-picker-utils';
+import { getDate, getTimeObj } from '../../utils/date-utils';
+
+import type { PickerBasePropsType } from '../../props';
+import type { TimeModel, VueEmit } from '../../interfaces';
+import { localToTz } from '../../utils/timezone';
+
+export const useTimePicker = (props: PickerBasePropsType, emit: VueEmit) => {
+    const reMap = () => {
+        if (props.isTextInputDate) setTimeFromModel();
+    };
+    const { modelValue, time } = useModel(props, emit, reMap);
+    const { defaultedStartTime, defaultedRange, defaultedTz } = useDefaults(props);
+    const { updateTimeValues, getSetDateTime, setTime, assignStartTime, disabledTimesConfig, validateTime } =
+        useTimePickerUtils(props, time, modelValue, updateFlowStep);
+
+    function updateFlowStep() {
+        emit('update-flow-step');
+    }
+
+    const parseStartTime = (startTime: TimeModel) => {
+        const { hours, minutes, seconds } = startTime;
+        return { hours: +hours, minutes: +minutes, seconds: seconds ? +seconds : 0 };
+    };
+
+    const getDateFromStartTime = () => {
+        if (props.startTime) {
+            if (Array.isArray(props.startTime)) {
+                const parsedFirst = parseStartTime(props.startTime[0]);
+                const parsedSecond = parseStartTime(props.startTime[1]);
+                return [set(getDate(), parsedFirst), set(getDate(), parsedSecond)];
+            }
+            const parsed = parseStartTime(props.startTime);
+            return set(getDate(), parsed);
+        }
+        return defaultedRange.value.enabled ? [null, null] : null;
+    };
+
+    const assignEmptyModel = () => {
+        if (defaultedRange.value.enabled) {
+            const [firstStartTime, secondStartTime] = getDateFromStartTime() as Date[];
+            modelValue.value = [
+                localToTz(getSetDateTime(firstStartTime, 0), defaultedTz.value.timezone),
+                localToTz(getSetDateTime(secondStartTime, 1), defaultedTz.value.timezone),
+            ];
+        } else {
+            modelValue.value = localToTz(getSetDateTime(getDateFromStartTime() as Date), defaultedTz.value.timezone);
+        }
+    };
+
+    const getTimeValue = (dates: Date | Date[] | null) => {
+        if (Array.isArray(dates)) {
+            return [getTimeObj(getDate(dates[0])), getTimeObj(getDate(dates[1]))];
+        }
+        return [getTimeObj(dates ?? getDate())];
+    };
+
+    const assignTime = (hours: number | number[], minutes: number | number[], seconds: number | number[]) => {
+        setTime('hours', hours);
+        setTime('minutes', minutes);
+        setTime('seconds', props.enableSeconds ? seconds : 0);
+    };
+
+    const setTimeFromModel = () => {
+        const [first, second] = getTimeValue(modelValue.value);
+
+        if (defaultedRange.value.enabled) {
+            return assignTime(
+                [first.hours, second.hours],
+                [first.minutes, second.minutes],
+                [first.seconds, second.seconds],
+            );
+        }
+        return assignTime(first.hours, first.minutes, first.seconds);
+    };
+
+    onMounted(() => {
+        if (!props.shadow) {
+            assignStartTime(defaultedStartTime.value);
+            if (!modelValue.value) return assignEmptyModel();
+            return setTimeFromModel();
+        }
+    });
+
+    const handleTimeUpdate = () => {
+        if (Array.isArray(modelValue.value)) {
+            modelValue.value = modelValue.value.map((date, i) => {
+                if (date) return getSetDateTime(date, i);
+                return date;
+            });
+        } else {
+            modelValue.value = getSetDateTime(modelValue.value);
+        }
+        emit('time-update');
+    };
+
+    const updateTime = (value: number | number[], isHours = true, isSeconds = false) => {
+        updateTimeValues(value, isHours, isSeconds, handleTimeUpdate);
+    };
+
+    return {
+        modelValue,
+        time,
+        disabledTimesConfig,
+        updateTime,
+        validateTime,
+    };
+};