UNPKG

@layui/layui-vue

Version:

a component library for Vue 3 base on layui-vue

27 lines (26 loc) 3.3 kB
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 };