mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
119 lines • 4.26 kB
JavaScript
/* 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__;