yuang-framework-ui-pc/es/ele-check-card/index.js

yuang-framework-ui-pc Library

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