plus-pro-components/lib/components/check-card-group/src/index.vue2.js

Page level components developed based on Element Plus.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var index = require('../../check-card/index.js');

const _hoisted_1 = { class: "plus-check-card-group" };
var _sfc_main = /* @__PURE__ */ vue.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 = vue.reactive({
      checkList: [],
      checked: ""
    });
    vue.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        (vue.openBlock(true), vue.createElementBlock(
          vue.Fragment,
          null,
          vue.renderList(_ctx.options, (item, index$1) => {
            return vue.openBlock(), vue.createBlock(vue.unref(index.PlusCheckCard), vue.mergeProps({
              key: item.value || index$1,
              size: _ctx.size,
              disabled: _ctx.disabled
            }, item, {
              "model-value": getChecked(item.value),
              onChange: ($event) => handleChange($event, item.value),
              onExtra: ($event) => handleExtra(item)
            }), vue.createSlots({
              _: 2
              /* DYNAMIC */
            }, [
              _ctx.$slots["avatar-" + item.value] || _ctx.$slots.avatar ? {
                name: "avatar",
                fn: vue.withCtx((data) => [
                  _ctx.$slots["avatar-" + item.value] ? vue.renderSlot(_ctx.$slots, "avatar-" + item.value, vue.normalizeProps(vue.mergeProps({ key: 0 }, data))) : vue.createCommentVNode("v-if", true),
                  _ctx.$slots.avatar ? vue.renderSlot(_ctx.$slots, "avatar", vue.normalizeProps(vue.mergeProps({ key: 1 }, data))) : vue.createCommentVNode("v-if", true)
                ]),
                key: "0"
              } : void 0,
              _ctx.$slots["title-" + item.value] || _ctx.$slots.title ? {
                name: "title",
                fn: vue.withCtx((data) => [
                  _ctx.$slots["title-" + item.value] ? vue.renderSlot(_ctx.$slots, "title-" + item.value, vue.normalizeProps(vue.mergeProps({ key: 0 }, data))) : vue.createCommentVNode("v-if", true),
                  _ctx.$slots.title ? vue.renderSlot(_ctx.$slots, "title", vue.normalizeProps(vue.mergeProps({ key: 1 }, data))) : vue.createCommentVNode("v-if", true)
                ]),
                key: "1"
              } : void 0,
              _ctx.$slots["description-" + item.value] || _ctx.$slots.description ? {
                name: "description",
                fn: vue.withCtx((data) => [
                  _ctx.$slots["description-" + item.value] ? vue.renderSlot(_ctx.$slots, "description-" + item.value, vue.normalizeProps(vue.mergeProps({ key: 0 }, data))) : vue.createCommentVNode("v-if", true),
                  _ctx.$slots.description ? vue.renderSlot(_ctx.$slots, "description", vue.normalizeProps(vue.mergeProps({ key: 1 }, data))) : vue.createCommentVNode("v-if", true)
                ]),
                key: "2"
              } : void 0,
              _ctx.$slots["extra-" + item.value] || _ctx.$slots.extra ? {
                name: "extra",
                fn: vue.withCtx((data) => [
                  _ctx.$slots["extra-" + item.value] ? vue.renderSlot(_ctx.$slots, "extra-" + item.value, vue.normalizeProps(vue.mergeProps({ key: 0 }, data))) : vue.createCommentVNode("v-if", true),
                  _ctx.$slots.extra ? vue.renderSlot(_ctx.$slots, "extra", vue.normalizeProps(vue.mergeProps({ key: 1 }, data))) : vue.createCommentVNode("v-if", true)
                ]),
                key: "3"
              } : void 0
            ]), 1040, ["size", "disabled", "model-value", "onChange", "onExtra"]);
          }),
          128
          /* KEYED_FRAGMENT */
        ))
      ]);
    };
  }
});

exports.default = _sfc_main;