@layui/layui-vue
Version:
a component library for Vue 3 base on layui-vue
27 lines (26 loc) • 3.3 kB
JavaScript
import { defineComponent as N, useAttrs as _, useSlots as j, ref as $, inject as w, computed as r, watch as x, openBlock as s, createElementBlock as c, normalizeStyle as D, normalizeClass as m, createCommentVNode as t, renderSlot as d, createTextVNode as i, toDisplayString as o, createElementVNode as p } from "vue";
/* empty css */
const I = { key: 0, class: "layui-checkcard-is-cover" }, q = ["src"], F = { key: 0, class: "layui-checkcard-left" }, H = { key: 0, class: "layui-checkcard-avatar" }, J = ["src"], K = { class: "layui-checkcard-right" }, M = { key: 0, class: "layui-checkcard-header" }, T = { key: 0, class: "layui-checkcard-extra" }, O = { key: 1, class: "layui-checkcard-desc" }, R = N({ name: "LayCheckcard", __name: "index", props: { title: {}, avatar: {}, description: {}, cover: {}, extra: {}, disabled: { type: Boolean, default: !1 }, value: {}, modelValue: { type: Boolean, default: !1 } }, emits: ["change", "update:modelValue"], setup(f, { emit: g }) {
const C = _(), h = j(), V = g, e = f, v = $(e.modelValue), l = w("checkcardGroup", {}), u = r(() => l && l.name === "LayCheckCardGroup"), b = r(() => C.style), n = $(e.disabled || l.disabled), A = r(() => ({ "layui-checkcard-is-description": !e.description && !h.description, "layui-checkcard-content": !0 })), B = r(() => ({ "layui-checkcard-title": !0, "layui-checkcard-is-extra": h.extra })), y = r({ get: () => u.value ? Array.isArray(l.modelVal.value) ? l.modelVal.value.includes(e.value) : l.modelVal.value === e.value : v.value, set(a) {
u.value ? Array.isArray(l.modelVal.value) ? l.modelVal.value = z() : l.modelVal.value = e.value : (v.value = a, V("change", a), V("update:modelValue", a));
} }), S = r(() => {
if (u.value)
return l.modelVal.value;
}), z = () => {
let a = [...S.value];
const k = a.findIndex((L) => L === e.value);
return k < 0 ? a.push(e.value) : a.splice(k, 1), a;
}, E = (a) => {
n.value || (y.value = !y.value);
};
x(() => e.disabled, (a) => {
u.value || (n.value = a);
}), x(() => e.modelValue, (a) => {
v.value = a;
});
const G = r(() => ({ "layui-checkcard-checked": y.value, "layui-checkcard": !0, "layui-checkcard-bordered": !0, "layui-checkcard-disabled": n.value }));
return (a, k) => (s(), c("div", { style: D(b.value), class: m(G.value), onClick: E }, [a.$slots.cover || a.cover ? (s(), c("div", I, [a.cover ? (s(), c("img", { key: 0, src: a.cover }, null, 8, q)) : t("", !0), a.$slots.cover ? d(a.$slots, "cover", { key: 1 }, () => [i(o(a.cover), 1)]) : t("", !0)])) : (s(), c("div", { key: 1, class: m(A.value) }, [a.$slots.avatar || a.avatar ? (s(), c("div", F, [a.avatar ? (s(), c("span", H, [p("img", { src: a.avatar }, null, 8, J)])) : t("", !0), a.$slots.avatar ? d(a.$slots, "avatar", { key: 1 }, () => [i(o(a.avatar), 1)]) : t("", !0)])) : t("", !0), p("div", K, [a.$slots.title || a.title ? (s(), c("div", M, [p("span", { class: m(B.value) }, [d(a.$slots, "title", {}, () => [i(o(a.title), 1)])], 2), a.$slots.extra ? (s(), c("div", T, [d(a.$slots, "extra", {}, () => [i(o(a.extra), 1)])])) : t("", !0)])) : t("", !0), a.$slots.description || a.description ? (s(), c("div", O, [d(a.$slots, "description", {}, () => [i(o(a.description), 1)])])) : t("", !0)])], 2))], 6));
} });
export {
R as default
};