@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
86 lines (85 loc) • 2.74 kB
JavaScript
import { defineComponent as w, useSlots as x, computed as l, openBlock as o, createElementBlock as n, normalizeClass as a, unref as e, renderSlot as d, createVNode as c, withCtx as v, createTextVNode as N, toDisplayString as S, createCommentVNode as m, createElementVNode as _, normalizeStyle as k } from "vue";
import "../renderer/index.mjs";
import { useProps as C, useNameHelper as $ } from "@vexip-ui/config";
import { cardProps as V } from "./props.mjs";
import i from "../renderer/renderer.mjs";
const D = /* @__PURE__ */ w({
name: "Card",
__name: "card",
props: V,
setup(f) {
const t = C("card", f, {
title: "",
shadow: {
default: "always",
validator: (s) => ["always", "hover", "never"].includes(s)
},
contentStyle: () => ({}),
slots: () => ({})
}), u = x(), r = $("card"), y = l(() => [
r.b(),
r.bs("vars"),
r.bm(`shadow-${t.shadow}`),
{
[r.bm("inherit")]: t.inherit
}
]), p = l(() => !!(u.title || t.title || t.slots.title)), h = l(() => !!(u.extra || t.slots.extra)), b = l(() => !!u.header || p.value || h.value);
return (s, z) => (o(), n("article", {
class: a(y.value)
}, [
b.value ? (o(), n("div", {
key: 0,
class: a(e(r).be("header"))
}, [
d(s.$slots, "header", {}, () => [
c(e(i), {
renderer: e(t).slots.header
}, {
default: v(() => [
p.value ? (o(), n("div", {
key: 0,
class: a(e(r).be("title"))
}, [
d(s.$slots, "title", {}, () => [
c(e(i), {
renderer: e(t).slots.title
}, {
default: v(() => [
N(S(e(t).title), 1)
]),
_: 1
}, 8, ["renderer"])
])
], 2)) : m("", !0),
h.value ? (o(), n("div", {
key: 1,
class: a(e(r).be("extra"))
}, [
d(s.$slots, "extra", {}, () => [
c(e(i), {
renderer: e(t).slots.extra
}, null, 8, ["renderer"])
])
], 2)) : m("", !0)
]),
_: 3
}, 8, ["renderer"])
])
], 2)) : m("", !0),
_("div", {
class: a(e(r).be("content")),
style: k(e(t).contentStyle)
}, [
d(s.$slots, "default", {}, () => [
c(e(i), {
renderer: e(t).slots.default
}, null, 8, ["renderer"])
])
], 6)
], 2));
}
});
export {
D as default
};
//# sourceMappingURL=card.vue2.mjs.map