@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, createElementBlock as o, openBlock as n, normalizeClass as a, createCommentVNode as m, createElementVNode as N, unref as e, renderSlot as d, createVNode as c, withCtx as v, createTextVNode as S, toDisplayString 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) => (n(), o("article", {
class: a(y.value)
}, [
b.value ? (n(), o("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 ? (n(), o("div", {
key: 0,
class: a(e(r).be("title"))
}, [
d(s.$slots, "title", {}, () => [
c(e(i), {
renderer: e(t).slots.title
}, {
default: v(() => [
S(_(e(t).title), 1)
]),
_: 1
}, 8, ["renderer"])
])
], 2)) : m("", !0),
h.value ? (n(), o("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),
N("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