mt-ui-components-vue3/lib/CheckButton/checkButton.js

玛果添实UI组件库(Vue3)

/* Analyzed bindings: {
  "value": "props",
  "options": "props",
  "multiple": "props",
  "disabled": "props",
  "class": "props",
  "style": "props",
  "computed": "setup-const",
  "CSSProperties": "setup-const",
  "PropType": "setup-const",
  "ref": "setup-const",
  "watch": "setup-const",
  "isArray": "setup-maybe-ref",
  "props": "setup-reactive-const",
  "emit": "setup-const",
  "myValue": "setup-ref",
  "optionsMap": "setup-ref",
  "_options": "setup-ref",
  "selected": "setup-const"
} */
import { defineComponent as _defineComponent } from 'vue';
import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
const _hoisted_1 = ["onClick"];
import { computed, ref, watch } from 'vue';
import { isArray } from 'lodash-es';
const __sfc_main__ = _defineComponent({
    props: {
        value: {
            type: [String, Array],
            default: undefined,
        },
        options: {
            type: Array,
            default: () => [],
        },
        multiple: {
            type: Boolean,
            default: false,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        class: {
            type: String,
            default: undefined,
        },
        style: {
            type: Object,
            default: () => ({}),
        },
    },
    emits: ['update:value', 'change', 'selecte'],
    setup(__props, { emit }) {
        const props = __props;
        const myValue = ref();
        const optionsMap = ref(new Map());
        const _options = computed(() => {
            props.options.forEach((item) => {
                if (props.disabled) {
                    item.display = props.disabled;
                }
                optionsMap.value.set(item.value, item);
            });
            return props.options;
        });
        watch(() => props.value, () => {
            if (props.value) {
                myValue.value = isArray(props.value) ? props.value : [props.value];
            }
            else {
                myValue.value = [];
            }
        }, { immediate: true, deep: true });
        const selected = (key, disabeld) => {
            if (disabeld)
                return;
            const values = new Set(myValue.value);
            if (values.has(key)) {
                values.delete(key);
            }
            else {
                if (!props.multiple) {
                    values.clear();
                }
                values.add(key);
            }
            myValue.value = [...values.values()];
            const optionsItems = myValue.value.map((_key) => {
                return optionsMap.value.get(_key);
            });
            const _value = props.multiple ? myValue.value : myValue.value[0];
            emit('update:value', _value);
            emit('change', _value, props.multiple ? optionsItems : optionsItems[0]);
            emit('selecte', _value, props.multiple ? optionsItems : optionsItems[0]);
        };
        return (_ctx, _cache) => {
            return (_openBlock(), _createElementBlock("div", {
                class: _normalizeClass(['j-check-button', props.class]),
                style: _normalizeStyle(__props.style)
            }, [
                (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_options.value, (item) => {
                    return (_openBlock(), _createElementBlock("div", {
                        key: item.value,
                        class: _normalizeClass([
                            'j-check-button-item',
                            myValue.value.includes(item.value) ? 'selected' : '',
                            item.disabled ? 'disabled' : '',
                        ]),
                        onClick: () => {
                            selected(item.value, item.disabled);
                        }
                    }, _toDisplayString(item.label), 11 /* TEXT, CLASS, PROPS */, _hoisted_1));
                }), 128 /* KEYED_FRAGMENT */))
            ], 6 /* CLASS, STYLE */));
        };
    }
});
export default __sfc_main__;