@empathyco/x-components
Version:
Empathy X Components
91 lines (88 loc) • 3.54 kB
JavaScript
import { defineComponent, computed, ref, watch, onBeforeMount } from 'vue';
import { use$x } from '../../composables/use-_x.js';
import BaseEventButton from '../base-event-button.vue.js';
/**
* Column picker list component renders a list of buttons to choose the columns number.
*
* Additionally, this component exposes the following props to modify the classes of the
* elements: `buttonClass`.
*
* @public
*/
var _sfc_main = defineComponent({
name: 'BaseColumnPickerList',
components: { BaseEventButton },
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,
/** Class inherited by each button. */
buttonClass: String,
},
emits: ['update:modelValue'],
setup(props, { emit }) {
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);
}
});
/**
* Maps the column to an object containing: the `column` and `CSS classes`.
*
* @returns An array of objects containing the column number and CSS classes.
*/
const columnsWithCssClasses = computed(() => props.columns.map(column => ({
column,
cssClasses: [
`x-column-picker-list__button--${column}-cols`,
{ 'x-selected': selectedColumns.value === column },
],
isSelected: selectedColumns.value === column,
events: {
UserClickedColumnPicker: column,
ColumnsNumberProvided: column,
},
})));
return { columnsWithCssClasses };
},
});
export { _sfc_main as default };
//# sourceMappingURL=base-column-picker-list.vue2.js.map