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

UI Components Library for Vue.js

'use strict';

var vue = require('vue');
var useIsVisible = require('../../composables/useIsVisible.js');
require('@popperjs/core');

const CTimePickerRollCol = vue.defineComponent({
    name: 'CTimePickerRollCol',
    props: {
        elements: {
            type: Array,
            required: true,
        },
        selected: {
            type: [Number, String],
        },
    },
    emits: ['click'],
    setup(props, { emit }) {
        const init = vue.ref(true);
        const colRef = vue.ref();
        const isVisible = useIsVisible.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',
                });
            }
        };
        vue.watch(isVisible, () => {
            scrollToSelectedElement();
            if (isVisible.value) {
                init.value = false;
            }
        });
        vue.onUpdated(() => {
            scrollToSelectedElement();
        });
        const handleKeyDown = (event, value) => {
            if (event.code === 'Space' || event.key === 'Enter') {
                event.preventDefault();
                emit('click', value);
            }
        };
        return () => vue.h('div', { class: 'time-picker-roll-col', ref: colRef }, props.elements.map((element) => {
            return vue.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);
        }));
    },
});

exports.CTimePickerRollCol = CTimePickerRollCol;
//# sourceMappingURL=CTimePickerRollCol.js.map