@aplus-frontend/ui
Version:
137 lines (136 loc) • 4.15 kB
JavaScript
import { defineComponent as T, computed as i, unref as o, createVNode as u, Fragment as E, watch as F, watchEffect as I, createElementBlock as h, openBlock as d, withModifiers as W, normalizeClass as y, normalizeStyle as $, createBlock as p, renderSlot as j, createCommentVNode as m, resolveDynamicComponent as b, createElementVNode as D } from "vue";
import { Skeleton as M } from "@aplus-frontend/antdv";
import "../config-provider/index.mjs";
import "../hooks/index.mjs";
import { isFunction as C } from "lodash-unified";
import { useInjectCheckCard as O } from "./context.mjs";
import U from "./checked.svg.mjs";
import { useNamespace as q } from "../config-provider/hooks/use-namespace.mjs";
import { useControllableValue as A } from "../hooks/useControllableValue.mjs";
const G = ["src"], x = /* @__PURE__ */ T({
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
} = q("check-card"), N = S, l = O(), {
value: r,
updateValue: g
} = A(a, N, {
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;
}), P = 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];
}), V = 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(E, 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 _(e) {
const t = o(n).stopPropagation;
return t ? t === !0 ? e.target !== e.currentTarget : t(e) : !1;
}
function w(e) {
_(e) || n.value.loading || n.value.disabled || (l.value ? l.value?.toggleOption?.(a.value) : g(!o(r)));
}
return F(() => l.value, (e) => {
if (!e)
return;
const t = e.multiple ? (e.value || []).includes(a.value) : e.value === a.value;
g(t);
}, {
immediate: !0
}), I((e) => {
l.value?.registerValue?.(a.value), e(() => l.value?.cancelValue?.(a.value));
}), (e, t) => (d(), h("div", {
style: $(V.value),
class: y(P.value),
onClick: W(w, ["stop"])
}, [n.value.loading ? (d(), p(o(M), {
key: 0,
active: ""
})) : j(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"))
}, [D("img", {
src: o(U)
}, null, 8, G)], 2)) : m("", !0)], 6));
}
});
export {
x as default
};