@aplus-frontend/ui
Version:
138 lines (137 loc) • 4.22 kB
JavaScript
import { defineComponent as E, computed as i, unref as o, createVNode as u, Fragment as F, watch as I, watchEffect as W, createElementBlock as h, openBlock as d, withModifiers as $, normalizeClass as y, normalizeStyle as j, createBlock as p, renderSlot as D, createCommentVNode as m, resolveDynamicComponent as b, createElementVNode as M } from "vue";
import { Skeleton as O } from "@aplus-frontend/antdv";
import "../config-provider/index.mjs";
import "../hooks/index.mjs";
import { isFunction as C } from "lodash-unified";
import { useInjectCheckCard as U } from "./context.mjs";
import q from "./checked.svg.mjs";
import A from "./style/index.mjs";
import { useNamespace as G } from "../config-provider/hooks/use-namespace.mjs";
import { useControllableValue as H } from "../hooks/useControllableValue.mjs";
const J = ["src"], oe = /* @__PURE__ */ E({
name: "CheckCard",
__name: "index",
props: {
bordered: {
type: Boolean,
default: !0
},
disabled: {
type: Boolean
},
loading: {
type: Boolean
},
size: {
default: "middle"
},
stopPropagation: {
type: [Boolean, Function],
default: !1
},
indicatorSize: {
default: void 0
},
style: {
default: void 0
},
checked: {
type: Boolean,
default: void 0
},
"onUpdate:checked": {},
defaultChecked: {
type: Boolean
},
value: {
type: [String, Number, Boolean]
},
title: {},
content: {}
},
emits: ["update:checked"],
setup(z, {
emit: S
}) {
const a = z, {
b: B,
m: c,
e: s,
em: f
} = G("check-card"), N = A("check-card"), P = S, l = U(), {
value: r,
updateValue: g
} = H(a, P, {
valuePropName: "checked",
defaultValuePropName: "defaultChecked"
}), n = i(() => {
const e = {
...a
}, t = o(l);
return t && (e.disabled = e.disabled || t.disabled, e.bordered = e.bordered || t.bordered, e.loading = e.loading || t.loading, e.size = e.size || t.size, e.indicatorSize = e.indicatorSize || t.indicatorSize, e.stopPropagation = e.stopPropagation || t.stopPropagation, e.style = e.style ? e.style : t.style), e;
}), V = i(() => {
const e = o(n);
return [B(), c(e.size), o(r) ? c("checked") : null, e.bordered ? c("bordered") : null, e.disabled ? c("disabled") : null, N.value];
}), _ = i(() => {
const e = o(n);
return {
...e.style || {},
"--check-card-indicator-size": `${e.indicatorSize || 14}px`
};
}), v = i(() => {
const e = a.title;
if (!e)
return;
const t = C(e) ? e(o(r)) : u(F, null, [e]);
return u("div", {
class: [s("title"), n.value.disabled ? f("title", "disabled") : null]
}, [t]);
}), k = i(() => {
if (!a.content)
return;
const e = C(a.content) ? a.content(o(r)) : a.content;
return u("div", {
class: [s("content"), n.value.disabled ? f("content", "disabled") : null]
}, [e]);
});
function w(e) {
const t = o(n).stopPropagation;
return t ? t === !0 ? e.target !== e.currentTarget : t(e) : !1;
}
function T(e) {
w(e) || n.value.loading || n.value.disabled || (l.value ? l.value?.toggleOption?.(a.value) : g(!o(r)));
}
return I(() => l.value, (e) => {
if (!e)
return;
const t = e.multiple ? (e.value || []).includes(a.value) : e.value === a.value;
g(t);
}, {
immediate: !0
}), W((e) => {
l.value?.registerValue?.(a.value), e(() => l.value?.cancelValue?.(a.value));
}), (e, t) => (d(), h("div", {
style: j(_.value),
class: y(V.value),
onClick: $(T, ["stop"])
}, [n.value.loading ? (d(), p(o(O), {
key: 0,
active: ""
})) : D(e.$slots, "default", {
key: 1,
checked: o(r)
}, () => [v.value ? (d(), p(b(v.value), {
key: 0
})) : m("", !0), k.value ? (d(), p(b(k.value), {
key: 1
})) : m("", !0)]), o(r) ? (d(), h("div", {
key: 2,
class: y(o(s)("checked-icon"))
}, [M("img", {
src: o(q)
}, null, 8, J)], 2)) : m("", !0)], 6));
}
});
export {
oe as default
};