vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
74 lines (73 loc) • 2.43 kB
JavaScript
import { defineComponent as x, computed as l, createElementBlock as d, openBlock as r, normalizeStyle as s, normalizeClass as w, createCommentVNode as i, createElementVNode as u, renderSlot as n, createTextVNode as c, toDisplayString as f, createVNode as b, unref as S, mergeProps as g, withCtx as k } from "vue";
import z from "../skeleton/index.js";
import { useSlotsExist as B } from "../utils/index.js";
const C = { class: "head-wrapper" }, E = {
key: 0,
class: "head-title"
}, $ = {
key: 1,
class: "head-extra"
}, T = /* @__PURE__ */ x({
__name: "Card",
props: {
width: { default: "auto" },
bordered: { type: Boolean, default: !0 },
size: { default: "middle" },
hoverable: { type: Boolean, default: !1 },
loading: { type: Boolean, default: !1 },
skeletonProps: { default: () => ({}) },
title: { default: void 0 },
extra: { default: void 0 },
headStyle: { default: () => ({}) },
bodyStyle: { default: () => ({}) }
},
setup(e) {
const t = e, a = B(["title", "extra"]), h = l(() => typeof t.width == "number" ? `${t.width}px` : t.width), m = l(() => a.title || a.extra || t.title || t.extra), y = l(() => a.title || t.title), v = l(() => a.extra || t.extra);
return (o, N) => (r(), d("div", {
class: w(["card-wrap", {
"card-bordered": e.bordered,
"card-small": e.size === "small",
"card-middle": e.size === "middle",
"card-large": e.size === "large",
"card-hoverable": e.hoverable
}]),
style: s(`width: ${h.value};`)
}, [
m.value ? (r(), d("div", {
key: 0,
class: "card-head",
style: s(e.headStyle)
}, [
u("div", C, [
y.value ? (r(), d("div", E, [
n(o.$slots, "title", {}, () => [
c(f(e.title), 1)
], !0)
])) : i("", !0),
v.value ? (r(), d("div", $, [
n(o.$slots, "extra", {}, () => [
c(f(e.extra), 1)
], !0)
])) : i("", !0)
])
], 4)) : i("", !0),
u("div", {
class: "card-body",
style: s(e.bodyStyle)
}, [
b(S(z), g({
title: !1,
loading: e.loading
}, e.skeletonProps), {
default: k(() => [
n(o.$slots, "default", {}, void 0, !0)
]),
_: 3
}, 16, ["loading"])
], 4)
], 6));
}
});
export {
T as default
};