@empathyco/x-components
Version:
Empathy X Components
169 lines (132 loc) • 5.32 kB
Markdown
---
title: BaseColumnPickerList
---
# BaseColumnPickerList
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`.
## Props
| Name | Description | Type | Default |
| ------------------------ | -------------------------------------------------------------------- | --------------------- | ------------- |
| <code>columns</code> | An array of numbers that represents the number of columns to render. | <code>number[]</code> | <code></code> |
| <code>modelValue</code> | The value of the selected columns number. | <code>number</code> | <code></code> |
| <code>buttonClass</code> | Class inherited by each button. | <code>string</code> | <code></code> |
## Events
| Event name | Properties | Description |
| ----------------- | ---------- | ----------- |
| update:modelValue | |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| <code>default</code> | Customized Column Picker Button content. Specifying a slot with the column value | **column** <code>number</code> - Columns Number to pick.<br />**isSelected** <code>boolean</code> - True if the columns number are the chosen value. |
| <code>divider</code> | Customized Column Picker divider. Specify an element to act as divider for | None |
## Examples
This component renders a list of elements in different slots depending on the columns prop. Each
element will emit the needed events to sync other instances of columns pickers, or grids with the
number of columns that it is being selected when it is clicked.
### Default usage
It is required to send the columns prop.
```vue live
<template>
<BaseColumnPickerList :columns="columns" />
</template>
<script>
import { BaseColumnPickerList } from '@empathyco/x-components'
export default {
components: {
BaseColumnPickerList,
},
data() {
return { columns: [2, 4, 6] }
},
}
</script>
```
#### Using v-model
It is possible to do two way binding in order to synchronize the value with the parents. It will be
updated if it changed the value or if the parent changes it.
```vue live
<template>
<BaseColumnPickerList :columns="columns" v-model="selectedColumns" />
</template>
<script>
import { BaseColumnPickerList } from '@empathyco/x-components'
export default {
components: {
BaseColumnPickerList,
},
data() {
return { columns: [2, 4, 6], selectedColumns: 4 }
},
}
</script>
```
### Customized usage
#### Overriding the slots
It is possible to override the column picker button content.
```vue live
<template>
<BaseColumnPickerList :columns="columns" #default="{ column, isSelected }">
<span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>
</BaseColumnPickerList>
</template>
<script>
import { BaseColumnPickerList } from '@empathyco/x-components'
export default {
components: {
BaseColumnPickerList,
},
data() {
return { columns: [2, 4, 6] }
},
}
</script>
```
It is also possible to add a divider element between the column picker buttons by overriding the
`divider` slot.
```vue live
<template>
<BaseColumnPickerList :columns="columns">
<template #divider>
<ChevronRightIcon aria-hidden="true" />
</template>
</BaseColumnPickerList>
</template>
<script>
import { BaseColumnPickerList, ChevronRightIcon } from '@empathyco/x-components'
export default {
components: {
BaseColumnPickerList,
ChevronRightIcon,
},
data() {
return { columns: [2, 4, 6] }
},
}
</script>
```
#### Customizing the buttons with classes
The `buttonClass` prop can be used to add classes to the buttons.
```vue live
<template>
<BaseColumnPickerList :columns="columns" buttonClass="x-button--round" />
</template>
<script>
import { BaseColumnPickerList } from '@empathyco/x-components'
export default {
components: {
BaseColumnPickerList,
},
data() {
return { columns: [2, 4, 6] }
},
}
</script>
```
## Events
A list of events that the component will emit:
- [`UserClickedColumnPicker`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
the event is emitted after the user clicks an item. The event payload is the number of columns
that the clicked item represents.
- [`ColumnsNumberProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
the event is emitted on component mount. The event payload is the current `selectedColumns` value.