@empathyco/x-components
Version:
Empathy X Components
89 lines (86 loc) • 3.36 kB
JavaScript
import { defineComponent, computed, ref, watch, onBeforeMount } from 'vue';
import { use$x } from '../../composables/use-_x.js';
import BaseDropdown from '../base-dropdown.vue.js';
/**
* Column picker dropdown component renders {@link BaseDropdown} component which
* options are the different columns you can set for a grid.
*
* It emits {@link XEventsTypes.UserClickedColumnPicker} on dropdown
* input.
*
* @public
*/
var _sfc_main = defineComponent({
name: 'BaseColumnPickerDropdown',
components: { BaseDropdown },
props: {
/** An array of numbers that represents the number of columns to render. */
columns: {
type: Array,
required: true,
},
/** The value of the selected columns number. */
modelValue: Number,
/** The transition to use for opening and closing the dropdown. */
animation: [String, Object],
},
emits: ['update:modelValue'],
setup(props, { emit, slots }) {
const $x = use$x();
const providedSelectedColumns = computed(() => props.modelValue ?? props.columns[0]);
const selectedColumns = ref(providedSelectedColumns.value);
/**
* Assigns `selectedColumns` value and emits `ColumnsNumberProvided`.
*
* @param column - Column number provided.
*/
function emitColumnsNumberProvided(column) {
selectedColumns.value = column;
$x.emit('ColumnsNumberProvided', column);
}
/**
* Emits `update:modelValue` with the column selected.
*
* @param column - Column number selected.
*/
function emitUpdateModelValue(column) {
if (props.modelValue !== column) {
emit('update:modelValue', column);
}
}
watch(providedSelectedColumns, emitColumnsNumberProvided);
watch(selectedColumns, emitUpdateModelValue);
$x.on('ColumnsNumberProvided', false).subscribe(column => (selectedColumns.value = column));
/**
* Synchronizes the columns number before mounting the component. If the real number of selected
* columns equals the provided columns, it emits the event to sync it with every other component.
* If it is not equal it means that the user has already selected a number of columns, so we emit
* a `update:modelValue` event so developers can sync the provided value.
*/
onBeforeMount(() => {
if (selectedColumns.value === providedSelectedColumns.value) {
emitColumnsNumberProvided(selectedColumns.value);
}
else {
emitUpdateModelValue(selectedColumns.value);
}
});
/**
* Emits a {@link XEventsTypes.UserClickedColumnPicker} and
* {@link XEventsTypes.ColumnsNumberProvided} events.
*
* @param column - Column number payload.
*/
function emitEvents(column) {
$x.emit('UserClickedColumnPicker', column);
$x.emit('ColumnsNumberProvided', column);
}
return {
emitEvents,
hasToggleSlot: !!slots.toggle,
selectedColumns,
};
},
});
export { _sfc_main as default };
//# sourceMappingURL=base-column-picker-dropdown.vue2.js.map