ucc-ui
Version:
ucc-ui components library
69 lines (68 loc) • 2.18 kB
JavaScript
import { defineComponent as k, computed as d, ref as $, openBlock as a, createElementBlock as l, normalizeClass as c, normalizeStyle as t, renderSlot as n, createElementVNode as u, toDisplayString as m, createBlock as g, unref as S, createCommentVNode as s, withDirectives as f, vShow as y } from "vue";
import { p as b } from "./utils-BzE2Aob-.js";
import "./ConfigProvider-C-6nRyrn.js";
import { U as w } from "./Button-DOc5qANu.js";
const B = { class: "u-card-header__divider" }, V = /* @__PURE__ */ k({
name: "UCard",
__name: "Card",
props: {
header: {},
footer: {},
shadow: {},
padding: { default: 16 },
bodyStyle: { default: () => ({}) },
bodyClass: {},
collapse: { type: Boolean }
},
setup(v) {
const i = v, r = d(() => b(i.padding, { unit: "rem" })), h = d(() => ({
...i.bodyStyle,
padding: r.value
})), o = $(!1), C = d(() => !o.value);
return (e, p) => (a(), l("main", {
class: c([
"u-card",
{ [`u-card--${e.shadow}`]: e.shadow }
])
}, [
e.$slots.header || e.header ? (a(), l("header", {
key: 0,
class: "u-card-header",
style: t({ padding: r.value })
}, [
n(e.$slots, "header", {}, () => [
u("span", null, m(e.header), 1),
e.collapse ? (a(), g(S(w), {
key: 0,
icon: ["fas", o.value ? "chevron-down" : "chevron-up"],
onClick: p[0] || (p[0] = (N) => o.value = !o.value)
}, null, 8, ["icon"])) : s("", !0)
]),
f(u("div", B, null, 512), [
[y, C.value]
])
], 4)) : s("", !0),
e.$slots.default ? f((a(), l("section", {
key: 1,
class: c(["u-card-body", e.bodyClass]),
style: t(h.value)
}, [
n(e.$slots, "default")
], 6)), [
[y, !o.value]
]) : s("", !0),
e.$slots.footer || e.footer ? (a(), l("footer", {
key: 2,
class: "u-card-footer",
style: t({ padding: r.value })
}, [
n(e.$slots, "footer", {}, () => [
u("span", null, m(e.footer), 1)
])
], 4)) : s("", !0)
], 2));
}
});
export {
V as _
};