@empathyco/x-components
Version:
Empathy X Components
55 lines (52 loc) • 1.79 kB
JavaScript
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 `SortList` component allows user to select the search results order. This component
* also allows to change the selected sort programmatically.
*/
var _sfc_main = defineComponent({
name: 'SortList',
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: () => 'ul',
},
},
setup(props) {
const $x = use$x();
const { sort: selectedSort } = useState('search');
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-sort-list__item--is-selected': item === selectedSort.value,
'x-option-list__item--is-selected': item === selectedSort.value,
},
event: { UserClickedASort: item },
})));
return {
listItems,
selectedSort,
};
},
});
export { _sfc_main as default };
//# sourceMappingURL=sort-list.vue2.js.map