@empathyco/x-components/js/x-modules/search/components/sort-dropdown.vue2.js

Empathy X Components

import { defineComponent, ref, watch } from 'vue';
import BaseDropdown from '../../../components/base-dropdown.vue.js';
import { use$x } from '../../../composables/use-_x.js';
import { useState } from '../../../composables/use-state.js';
import { searchXModule } from '../x-module.js';

/**
 * The `SortDropdown` component allows user to select the search results order. This component
 * also allows to change the selected sort programmatically.
 */
var _sfc_main = defineComponent({
    name: 'SortDropdown',
    xModule: searchXModule.name,
    components: { BaseDropdown },
    props: {
        /** The list of possible sort values. */
        items: {
            type: Array,
            required: true,
        },
        /** The transition to use for opening and closing the dropdown. */
        animation: [String, Object],
    },
    emits: ['change'],
    setup(_, { emit }) {
        const $x = use$x();
        const { sort: selectedSort } = useState('search');
        const rootRef = ref();
        watch(selectedSort, (value) => $x.emit('SelectedSortProvided', value), {
            immediate: true,
        });
        /**
         * Emits the events related to the selection of a sort value.
         *
         * @remarks `(rootRef.value as any)?.$el` because rollup-plugin-vue understands
         * `ref<typeof BaseDropdown>` as VueConstructor which doesn't contain $el.
         *
         * @param sort - The selected sort.
         */
        function emitUserClickedASort(sort) {
            $x.emit('UserClickedASort', sort, { target: rootRef.value?.$el });
            emit('change', sort);
        }
        return {
            emitUserClickedASort,
            rootRef,
            selectedSort,
        };
    },
});

export { _sfc_main as default };
//# sourceMappingURL=sort-dropdown.vue2.js.map