@empathyco/x-components
Version:
Empathy X Components
83 lines (80 loc) • 2.4 kB
JavaScript
import { defineComponent, ref, computed } from 'vue';
import { useXBus } from '../composables/use-x-bus.js';
import { AnimationProp } from '../types/animation-prop.js';
import BaseGrid from './base-grid.vue.js';
/**
* The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to
* the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the
* selected number of columns to the grid. It also allows to customize the grid items using the
* available `scopedSlots`.
*
* @public
*/
var _sfc_main = defineComponent({
name: 'BaseVariableColumnGrid',
components: {
BaseGrid,
},
props: {
/**
* Animation component that will be used to animate the grid.
*
* @public
*/
animation: {
type: AnimationProp,
default: 'ul',
},
/**
* The list of items to be rendered.
*
* @remarks The items must have an id property.
*
* @public
*/
items: Array,
/**
* The columns to render by default in the grid. This property is used when the user has not
* selected any value in the column picker.
*
* @internal
*/
columns: {
type: Number,
default: 0,
},
},
setup(props, { slots }) {
const bus = useXBus();
/**
* The number of columns provided by a user interaction.
*
* @internal
*/
const providedColumns = ref(null);
/**
* The number of columns to render in the grid.
*
* @returns The number of columns.
*
* @internal
*/
const columnsToRender = computed(() => providedColumns.value === null ? props.columns : providedColumns.value);
/**
* Handler to update the number of columns when the user selects a new value.
*
* @param newColumns - The new columns value.
*
* @internal
*/
bus
.on('ColumnsNumberProvided', false)
.subscribe(newColumns => (providedColumns.value = newColumns));
return {
columnsToRender,
slots,
};
},
});
export { _sfc_main as default };
//# sourceMappingURL=base-variable-column-grid.vue2.js.map