plus-pro-components
Version:
Page level components developed based on Element Plus.
119 lines (116 loc) • 4.99 kB
JavaScript
import { defineComponent, reactive, watchEffect, openBlock, createElementBlock, Fragment, renderList, createBlock, unref, mergeProps, createSlots, withCtx, renderSlot, normalizeProps, createCommentVNode } from 'vue';
import { PlusCheckCard } from '../../check-card/index.mjs';
const _hoisted_1 = { class: "plus-check-card-group" };
var _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "PlusCheckCardGroup"
},
__name: "index",
props: {
modelValue: { default: () => [] },
options: { default: () => [] },
size: { default: void 0 },
disabled: { type: Boolean, default: false },
multiple: { type: Boolean, default: false }
},
emits: ["update:modelValue", "change", "extra"],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const state = reactive({
checkList: [],
checked: ""
});
watchEffect(() => {
if (props.multiple) {
state.checkList = props.modelValue;
} else {
state.checked = props.modelValue;
}
});
const getChecked = (value) => {
if (props.multiple) {
return state.checkList.includes(value);
} else {
return state.checked === value;
}
};
const handleChange = (model, value) => {
if (props.multiple) {
if (model) {
state.checkList.push(value);
} else {
state.checkList = state.checkList.filter((item) => item !== value);
}
emit("update:modelValue", state.checkList);
emit("change", state.checkList);
} else {
const val = model ? value : "";
emit("update:modelValue", val);
emit("change", val);
}
};
const handleExtra = (item) => {
if (props.disabled) return;
emit("extra", item);
};
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(_ctx.options, (item, index) => {
return openBlock(), createBlock(unref(PlusCheckCard), mergeProps({
key: item.value || index,
size: _ctx.size,
disabled: _ctx.disabled
}, item, {
"model-value": getChecked(item.value),
onChange: ($event) => handleChange($event, item.value),
onExtra: ($event) => handleExtra(item)
}), createSlots({
_: 2
/* DYNAMIC */
}, [
_ctx.$slots["avatar-" + item.value] || _ctx.$slots.avatar ? {
name: "avatar",
fn: withCtx((data) => [
_ctx.$slots["avatar-" + item.value] ? renderSlot(_ctx.$slots, "avatar-" + item.value, normalizeProps(mergeProps({ key: 0 }, data))) : createCommentVNode("v-if", true),
_ctx.$slots.avatar ? renderSlot(_ctx.$slots, "avatar", normalizeProps(mergeProps({ key: 1 }, data))) : createCommentVNode("v-if", true)
]),
key: "0"
} : void 0,
_ctx.$slots["title-" + item.value] || _ctx.$slots.title ? {
name: "title",
fn: withCtx((data) => [
_ctx.$slots["title-" + item.value] ? renderSlot(_ctx.$slots, "title-" + item.value, normalizeProps(mergeProps({ key: 0 }, data))) : createCommentVNode("v-if", true),
_ctx.$slots.title ? renderSlot(_ctx.$slots, "title", normalizeProps(mergeProps({ key: 1 }, data))) : createCommentVNode("v-if", true)
]),
key: "1"
} : void 0,
_ctx.$slots["description-" + item.value] || _ctx.$slots.description ? {
name: "description",
fn: withCtx((data) => [
_ctx.$slots["description-" + item.value] ? renderSlot(_ctx.$slots, "description-" + item.value, normalizeProps(mergeProps({ key: 0 }, data))) : createCommentVNode("v-if", true),
_ctx.$slots.description ? renderSlot(_ctx.$slots, "description", normalizeProps(mergeProps({ key: 1 }, data))) : createCommentVNode("v-if", true)
]),
key: "2"
} : void 0,
_ctx.$slots["extra-" + item.value] || _ctx.$slots.extra ? {
name: "extra",
fn: withCtx((data) => [
_ctx.$slots["extra-" + item.value] ? renderSlot(_ctx.$slots, "extra-" + item.value, normalizeProps(mergeProps({ key: 0 }, data))) : createCommentVNode("v-if", true),
_ctx.$slots.extra ? renderSlot(_ctx.$slots, "extra", normalizeProps(mergeProps({ key: 1 }, data))) : createCommentVNode("v-if", true)
]),
key: "3"
} : void 0
]), 1040, ["size", "disabled", "model-value", "onChange", "onExtra"]);
}),
128
/* KEYED_FRAGMENT */
))
]);
};
}
});
export { _sfc_main as default };