@coreui/vue/dist/cjs/components/chip-set/CChipSet.js

UI Components Library for Vue.js

'use strict';

var vue = require('vue');
var buildChips = require('./buildChips.js');
var useChipSet = require('./useChipSet.js');

const itemValue = (item) => typeof item === 'string' ? item : item.value;
const CChipSet = vue.defineComponent({
    name: 'CChipSet',
    props: {
        /**
         * Component used for the root node. Either a string to use a HTML element or a component.
         */
        as: {
            type: String,
            default: 'div',
        },
        /**
         * Renders chips from data instead of the default slot. Each item is a string or an object with a `value`, an optional `label`, and any `CChip` props. The slot is used when this is omitted.
         */
        chips: {
            type: Array,
            default: undefined,
        },
        /**
         * Disables every chip rendered by the component.
         */
        disabled: Boolean,
        /**
         * Turns the chips into filter chips, each showing a leading check icon while selected.
         */
        filter: Boolean,
        /**
         * Displays a remove button on every chip rendered by the component.
         */
        removable: Boolean,
        /**
         * Replaces the default remove icon on every chip with a custom icon node.
         */
        removeIcon: {
            type: [String, Object],
            default: undefined,
        },
        /**
         * Enables selection behavior for the chips rendered by the component.
         */
        selectable: Boolean,
        /**
         * The selected chip values passed using `v-model:selected`.
         */
        selected: {
            type: Array,
            default: undefined,
        },
        /**
         * Replaces the default selected icon shown by filter chips with a custom icon node.
         */
        selectedIcon: {
            type: [String, Object],
            default: undefined,
        },
        /**
         * Sets how many chips can be selected at once.
         *
         * @values 'single', 'multiple'
         */
        selectionMode: {
            type: String,
            default: 'multiple',
        },
    },
    emits: [
        /**
         * Event occurs when a chip requests removal, with its value.
         */
        'remove',
        /**
         * Event occurs when the selected chip values change.
         */
        'select',
        /**
         * Emit the chips without the removed one (for `v-model:chips`).
         */
        'update:chips',
        /**
         * Emit the new selected values whenever the selection changes (for `v-model:selected`).
         */
        'update:selected',
    ],
    setup(props, { attrs, emit, slots, expose }) {
        const config = vue.computed(() => ({
            disabled: props.disabled,
            filter: props.filter,
            removable: props.removable,
            removeIcon: props.removeIcon,
            selectable: props.selectable,
            selectedIcon: props.selectedIcon,
        }));
        const { rootRef, handleKeydown } = useChipSet.useChipSet({
            config,
            selectionMode: () => props.selectionMode,
            selected: () => props.selected,
            onSelectionChange: (selected) => {
                emit('update:selected', selected);
                emit('select', selected);
            },
            onRemove: (value) => {
                // With `v-model:chips` the parent stays in sync automatically; a one-way
                // `:chips` binding ignores the update and handles removal via `@remove`.
                if (props.chips) {
                    emit('update:chips', props.chips.filter((item) => itemValue(item) !== value));
                }
                emit('remove', value);
            },
        });
        expose({ rootRef });
        return () => vue.h(props.as, {
            ref: rootRef,
            class: ['chip-set', { disabled: props.disabled }, attrs.class],
            ...(props.disabled && { 'aria-disabled': true }),
            onKeydown: handleKeydown,
        }, props.chips ? buildChips.chipsFromData(props.chips) : slots.default && slots.default());
    },
});

exports.CChipSet = CChipSet;
//# sourceMappingURL=CChipSet.js.map