yuang-framework-ui-pc/lib/ele-check-card/index.cjs

yuang-framework-ui-pc Library

"use strict";
const vue = require("vue");
const elementPlus = require("element-plus");
const util = require("../ele-basic-select/util");
const CardItem = require("./components/card-item");
const props = require("./props");
const _sfc_main = vue.defineComponent({
  name: "EleCheckCard",
  components: { ElRow: elementPlus.ElRow, ElCol: elementPlus.ElCol, CardItem },
  props: props.checkCardProps,
  emits: props.checkCardEmits,
  setup(props2, { emit }) {
    const { validateChange } = util.useFormValidate();
    const isChecked = (item) => {
      if (props2.modelValue == null || item.value == null) {
        return false;
      }
      if (!props2.multiple) {
        return props2.modelValue === item.value;
      }
      if (!Array.isArray(props2.modelValue)) {
        return false;
      }
      return props2.modelValue.includes(item.value);
    };
    const updateModelValue = (modelValue) => {
      if (util.valueIsChanged(modelValue, props2.modelValue, props2.multiple)) {
        emit("update:modelValue", modelValue);
        validateChange();
        emit("change", modelValue);
      }
    };
    const handleItemClick = (item) => {
      if (props2.disabled || item.disabled) {
        return;
      }
      if (!props2.multiple) {
        updateModelValue(item.value);
        return;
      }
      if (!isChecked(item)) {
        if (props2.modelValue == null || !Array.isArray(props2.modelValue)) {
          updateModelValue(item.value == null ? [] : [item.value]);
          return;
        }
        const temp = [...props2.modelValue];
        if (item.value != null) {
          temp.push(item.value);
        }
        updateModelValue(temp);
        return;
      }
      if (props2.modelValue == null || !Array.isArray(props2.modelValue)) {
        updateModelValue([]);
        return;
      }
      updateModelValue(props2.modelValue.filter((v) => v !== item.value));
    };
    return { isChecked, handleItemClick };
  }
});
const _export_sfc = (sfc, props2) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props2) {
    target[key] = val;
  }
  return target;
};
const _hoisted_1 = { class: "ele-check-card-group" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_CardItem = vue.resolveComponent("CardItem");
  const _component_ElCol = vue.resolveComponent("ElCol");
  const _component_ElRow = vue.resolveComponent("ElRow");
  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
    _ctx.row ? (vue.openBlock(), vue.createBlock(_component_ElRow, vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.row === true ? {} : _ctx.row)), {
      default: vue.withCtx(() => [
        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item, index2) => {
          return vue.openBlock(), vue.createBlock(_component_ElCol, vue.mergeProps({
            key: index2 + "-" + item.value,
            ref_for: true
          }, item.col || {}), {
            default: vue.withCtx(() => [
              vue.createVNode(_component_CardItem, {
                item,
                checked: _ctx.isChecked(item),
                disabled: _ctx.disabled || item.disabled,
                bordered: _ctx.bordered || item.bordered,
                arrow: _ctx.arrow,
                arrowStyle: _ctx.arrowStyle,
                style: vue.normalizeStyle([_ctx.itemStyle, item.style]),
                class: vue.normalizeClass([_ctx.itemClass, item.class]),
                onClick: ($event) => _ctx.handleItemClick(item)
              }, {
                default: vue.withCtx((slotProps) => [
                  vue.renderSlot(_ctx.$slots, "item", vue.mergeProps({ ref_for: true }, slotProps || {}), () => [
                    vue.createTextVNode(vue.toDisplayString(item.value), 1)
                  ])
                ]),
                _: 2
              }, 1032, ["item", "checked", "disabled", "bordered", "arrow", "arrowStyle", "style", "class", "onClick"])
            ]),
            _: 2
          }, 1040);
        }), 128))
      ]),
      _: 3
    }, 16)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.items, (item, index2) => {
      return vue.openBlock(), vue.createBlock(_component_CardItem, {
        key: item.key ?? index2 + "-" + item.value,
        item,
        checked: _ctx.isChecked(item),
        disabled: _ctx.disabled || item.disabled,
        bordered: _ctx.bordered || item.bordered,
        arrow: _ctx.arrow,
        arrowStyle: _ctx.arrowStyle,
        style: vue.normalizeStyle([_ctx.itemStyle, item.style]),
        class: vue.normalizeClass([_ctx.itemClass, item.class]),
        onClick: ($event) => _ctx.handleItemClick(item)
      }, {
        default: vue.withCtx((slotProps) => [
          vue.renderSlot(_ctx.$slots, "item", vue.mergeProps({ ref_for: true }, slotProps || {}), () => [
            vue.createTextVNode(vue.toDisplayString(item.value), 1)
          ])
        ]),
        _: 2
      }, 1032, ["item", "checked", "disabled", "bordered", "arrow", "arrowStyle", "style", "class", "onClick"]);
    }), 128))
  ]);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = index;