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

Empathy X Components

import { defineComponent, watch, computed } from 'vue';
import BaseEventButton from '../../../components/base-event-button.vue.js';
import { use$x } from '../../../composables/use-_x.js';
import { useState } from '../../../composables/use-state.js';
import { searchXModule } from '../x-module.js';

/**
 * The `SortPickerList` component allows user to select the search results order. This component
 * also allows to change the selected sort programmatically.
 */
var _sfc_main = defineComponent({
    name: 'SortPickerList',
    xModule: searchXModule.name,
    components: { BaseEventButton },
    props: {
        /** The list of possible sort values. */
        items: {
            type: Array,
            required: true
        },
        /** The transition to use for rendering the list. */
        animation: {
            type: [String, Object],
            default: () => 'div'
        },
        /** Class inherited by each sort button. */
        buttonClass: String
    },
    setup(props) {
        const $x = use$x();
        const { sort: selectedSort } = useState('search', ['sort']);
        watch(selectedSort, (value) => $x.emit('SelectedSortProvided', value), {
            immediate: true
        });
        /**
         * Sort list items.
         *
         * @returns A list of items with their css class and the event associate to it.
         */
        const listItems = computed(() => props.items.map(item => ({
            item,
            cssClasses: {
                'x-selected': item === selectedSort.value
            },
            event: { UserClickedASort: item }
        })));
        return {
            listItems,
            selectedSort
        };
    }
});

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