@coreui/vue-pro/dist/cjs/components/multi-select/CMultiSelectSelection.js

UI Components Library for Vue.js

'use strict';

var vue = require('vue');

const CMultiSelectSelection = vue.defineComponent({
    name: 'CMultiSelectSelection',
    props: {
        multiple: {
            type: Boolean,
            default: true,
        },
        placeholder: String,
        search: [Boolean, String],
        selected: {
            type: Array,
            default: () => [],
        },
        selectionType: {
            type: String,
            default: 'tags',
            validator: (value) => {
                return ['counter', 'tags', 'text'].includes(value);
            },
        },
        selectionTypeCounterText: {
            type: String,
            default: 'item(s) selected',
        },
    },
    emits: ['remove'],
    setup(props, { emit, slots }) {
        const handleRemove = (option) => {
            emit('remove', option);
        };
        return () => vue.h('div', {
            class: [
                'form-multi-select-selection',
                {
                    'form-multi-select-selection-tags': props.multiple && props.selectionType === 'tags',
                },
            ],
        }, [
            props.multiple &&
                props.selectionType === 'counter' &&
                !props.search &&
                props.selected.length === 0 &&
                props.placeholder,
            props.multiple &&
                props.selectionType === 'counter' &&
                !props.search &&
                props.selected.length > 0 &&
                `${props.selected.length} ${props.selectionTypeCounterText}`,
            props.multiple &&
                props.selectionType === 'tags' &&
                props.selected.map((option) => {
                    if (props.selectionType === 'tags') {
                        return vue.h('span', { class: 'form-multi-select-tag' }, [
                            option.label,
                            !option.disabled &&
                                vue.h('button', {
                                    class: 'form-multi-select-tag-delete',
                                    type: 'button',
                                    ariaLabel: 'Close',
                                    onClick: () => handleRemove(option),
                                }),
                        ]);
                    }
                    return;
                }),
            props.multiple &&
                props.selectionType === 'text' &&
                props.selected.map((option, index) => vue.h('span', `${option.label}${index === props.selected.length - 1 ? '' : ','}\xA0`)),
            !props.multiple && !props.search && props.selected.map((option) => option.label)[0],
            slots.default && slots.default(),
        ]);
    },
});

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