ideaz-element/es/element/check-card/src/CheckCardItem.mjs

<p align="center"> <a href="" target="_blank" rel="noopener noreferrer"> <img src="./docs/public/logo.svg" alt="Ideaz Element" width="180" style="width: 180px;" /> </a> </p>

import { defineComponent as L, ref as b, inject as N, watchEffect as P, computed as x, createVNode as l, h as o } from "vue";
import "../../../utils/index.mjs";
import "../../../hooks/index.mjs";
import { ElSkeleton as j, ElAvatar as q } from "element-plus";
import { checkCardItemProps as A } from "./props.mjs";
import { useFormSize as O } from "../../../hooks/useFormSize.mjs";
import { useNamespace as V } from "../../../hooks/useNamespace.mjs";
import { isFunction as p } from "../../../utils/is.mjs";
const T = /* @__PURE__ */ L({
  name: "ZCheckCardItem",
  props: A,
  emits: ["click", "change"],
  setup(d, {
    emit: z
  }) {
    const v = b(d.defaultChecked), s = b({}), y = b(!1), t = N("check-card-group", null), e = V("check-card"), h = O(), D = (a) => a === "large" ? "lg" : a === "small" ? "sm" : "";
    P(() => {
      var u;
      const {
        defaultChecked: a,
        checked: r,
        disabled: c,
        loading: n,
        bordered: i,
        value: m
      } = d;
      if (s.value = {
        defaultChecked: a,
        checked: r,
        disabled: c,
        loading: n,
        bordered: i,
        value: m,
        size: h.value
      }, s.value.checked = v.value, t != null && t.value) {
        s.value.disabled = d.disabled || t.value.disabled, s.value.loading = d.loading || t.value.loading, s.value.bordered = d.bordered, y.value = t.value.multiple;
        const g = t.value.multiple ? (u = t.value.value) == null ? void 0 : u.includes(d.value) : t.value.value === d.value;
        s.value.checked = s.value.loading ? !1 : g, s.value.size = h.value;
      }
    });
    const S = x(() => {
      const {
        disabled: a = !1,
        loading: r,
        bordered: c,
        checked: n
      } = s.value, i = D(h.value);
      return {
        [e.m("loading")]: r,
        [e.m(i)]: i,
        [e.m("checked")]: n,
        [e.m("multiple")]: y.value,
        [e.m("disabled")]: a,
        [e.m("bordered")]: c,
        "z-check-card": !0
      };
    }), E = (a) => l("div", {
      class: e.e("cover")
    }, [typeof a == "string" ? l("img", {
      src: a,
      alt: "check-card"
    }, null) : a(o)]), I = (a) => {
      var r, c;
      z("click", a), (c = t == null ? void 0 : (r = t.value).toggleOption) == null || c.call(r, {
        value: d.value
      }), v.value = !v.value, z("change", v.value);
    };
    return () => {
      const {
        disabled: a = !1,
        loading: r
      } = s.value, {
        avatar: c,
        title: n,
        description: i,
        cover: m,
        extra: u,
        style: g
      } = d, w = () => {
        if (r) return l("div", {
          class: "px-4 py-3"
        }, [l(j, {
          rows: 2,
          animated: !0
        }, null)]);
        if (m) return E(m);
        const f = c ? l("div", {
          class: e.e("avatar")
        }, [typeof c == "string" ? l(q, {
          size: 48,
          shape: "square",
          src: c
        }, null) : c(o)]) : null, k = (n || u) && l("div", {
          class: e.e("header")
        }, [l("div", {
          class: e.e("title")
        }, [p(n) ? n(o) : n]), u && l("div", {
          class: e.e("extra")
        }, [p(u) ? u(o) : u])]), C = i ? l("div", {
          class: e.e("description")
        }, [p(i) ? i(o) : i]) : null, F = x(() => ({
          [e.e("avatar-header")]: f && k && !C,
          [e.e("content")]: !0
        }));
        return l("div", {
          class: F.value
        }, [f, k || C ? l("div", {
          class: e.e("detail")
        }, [k, C]) : null]);
      };
      return l("div", {
        class: S.value,
        style: g,
        onClick: (f) => {
          !r && !a && I(f);
        }
      }, [w()]);
    };
  }
});
export {
  T as default
};
//# sourceMappingURL=CheckCardItem.mjs.map