@empathyco/x-components
Version:
Empathy X Components
147 lines (115 loc) • 5.65 kB
Markdown
---
title: BaseColumnPickerDropdown
---
# BaseColumnPickerDropdown
Column picker dropdown component renders BaseDropdown component which
options are the different columns you can set for a grid.
It emits XEventsTypes.UserClickedColumnPicker on dropdown
input.
## 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>animation</code> | The transition to use for opening and closing the dropdown. | <code></code> | <code></code> |
## Events
| Event name | Properties | Description |
| ----------------- | ---------- | ----------- |
| update:modelValue | |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| ------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <code>toggle</code> | From `BaseDropdown` component: Used to render the contents of the dropdown toggle | **item** <code>string | number | Identifiable</code> - The item data to render.<br />**isOpen** <code>boolean</code> - True if the dropdown is opened, and false if it is |
| <code>item</code> | (required) From `BaseDropdown` component: Used to render each one of the items | **item** <code>string | number | Identifiable</code> - Item to render<br />**isSelected** <code>boolean</code> - True when the item is selected.<br />**isHighlighted** <code>boolean</code> - True when the item has the focus. |
## Events
An event 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 in the dropdown. 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, and whenever the value changes. The event payload is the
current `selectedColumns` value.
## Example
Column picker dropdown component renders a dropdown component which options are the different
columns you can set for a grid.
### Usage
Notice that the slots provided match with the `BaseDropdown` component. The `item` slot is required
unlike the `toggle`, which renders the same `item` slot defined by default.
#### Default usage
```vue live
<template>
<BaseColumnPickerDropdown v-model="selectedColumns" :columns="[2, 4, 6]">
<template #item="{ item, isSelected, isHighlighted }">
<span v-if="isHighlighted">🟢</span>
<span v-if="isSelected">✅</span>
<span>{{ item }}</span>
</template>
</BaseColumnPickerDropdown>
</template>
<script>
import { BaseColumnPickerDropdown } from '@empathyco/x-components'
export default {
name: 'BaseColumnPickerDropdownTest',
components: {
BaseColumnPickerDropdown,
},
data() {
return {
selectedColumns: 2,
}
},
}
</script>
```
#### Customizing toggle button
```vue live
<template>
<BaseColumnPickerDropdown v-model="selectedColumns" :columns="[2, 4, 6]">
<template #toggle="{ item, isOpen }">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>
<template #item="{ item, isSelected, isHighlighted }">
<span v-if="isHighlighted">🟢</span>
<span v-if="isSelected">✅</span>
<span>{{ item }}</span>
</template>
</BaseColumnPickerDropdown>
</template>
<script>
import { BaseColumnPickerDropdown } from '@empathyco/x-components'
export default {
name: 'BaseColumnPickerDropdownTest',
components: {
BaseColumnPickerDropdown,
},
data() {
return {
selectedColumns: 2,
}
},
}
</script>
```
#### Using it without v-model / value
The component emits an X Event, `UserClickedColumnPicker`, on column change and it also listens to
that event from outside, so you don't need to store the current column value to keep it synchronized
with other column pickers.
```vue live
<template>
<BaseColumnPickerDropdown :columns="[2, 4, 6]">
<template #toggle="{ item, isOpen }">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>
<template #item="{ item, isSelected, isHighlighted }">
<span v-if="isHighlighted">🟢</span>
<span v-if="isSelected">✅</span>
<span>{{ item }}</span>
</template>
</BaseColumnPickerDropdown>
</template>
<script>
import { BaseColumnPickerDropdown } from '@empathyco/x-components'
export default {
name: 'BaseColumnPickerDropdownTest',
components: {
BaseColumnPickerDropdown,
},
}
</script>
```