@coreui/vue-pro/dist/esm/components/time-picker/CTimePickerRollCol.js

UI Components Library for Vue.js

import { defineComponent, ref, watch, onUpdated, h } from 'vue';
import { useIsVisible } from '../../composables/useIsVisible.js';
import '@popperjs/core';

const CTimePickerRollCol = defineComponent({
    name: 'CTimePickerRollCol',
    props: {
        elements: {
            type: Array,
            required: true,
        },
        selected: {
            type: [Number, String],
        },
    },
    emits: ['click'],
    setup(props, { emit }) {
        const init = ref(true);
        const colRef = ref();
        const isVisible = useIsVisible(colRef);
        const scrollToSelectedElement = () => {
            const nodeEl = colRef.value?.querySelector('.selected');
            if (isVisible.value && nodeEl && nodeEl instanceof HTMLElement) {
                colRef.value?.scrollTo({
                    top: nodeEl.offsetTop,
                    behavior: init.value ? 'auto' : 'smooth',
                });
            }
        };
        watch(isVisible, () => {
            scrollToSelectedElement();
            if (isVisible.value) {
                init.value = false;
            }
        });
        onUpdated(() => {
            scrollToSelectedElement();
        });
        const handleKeyDown = (event, value) => {
            if (event.code === 'Space' || event.key === 'Enter') {
                event.preventDefault();
                emit('click', value);
            }
        };
        return () => h('div', { class: 'time-picker-roll-col', ref: colRef }, props.elements.map((element) => {
            return h('div', {
                class: [
                    'time-picker-roll-cell',
                    {
                        selected: element.value === props.selected,
                    },
                ],
                onClick: () => emit('click', element.value),
                onKeydown: (event) => handleKeyDown(event, element.value),
                role: 'button',
                tabindex: 0,
            }, element.label);
        }));
    },
});

export { CTimePickerRollCol };
//# sourceMappingURL=CTimePickerRollCol.js.map