t-fighting-design
Version:
Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.
64 lines (63 loc) • 1.97 kB
JavaScript
import { defineComponent as m, computed as l, openBlock as a, createElementBlock as n, createElementVNode as s, createVNode as u, unref as t, withCtx as g, renderSlot as r, createBlock as C, resolveDynamicComponent as b, toDisplayString as i, normalizeClass as c, normalizeStyle as k, createTextVNode as d, createCommentVNode as v } from "vue";
import { sizeChange as z } from "../../_utils/index3.js";
import y from "../../_components/svg/index.js";
import { FSvgIcon as S } from "../../svg-icon/index.js";
import { Props as V } from "./index3.js";
const B = { class: "f-page-header" }, N = { class: "f-page-header__text" }, $ = {
key: 0,
class: "f-page-header__main-subtitle"
}, F = m({
name: "FPageHeader"
}), P = /* @__PURE__ */ m({
...F,
props: V,
setup(p) {
const o = p, f = (e) => {
o.back && o.back(e);
}, h = l(() => [
"f-page-header__main",
{ "f-page-header__main-center": o.titleCenter }
]), _ = l(() => [
"f-page-header__main-title",
{ "f-page-header__main-title-bold": o.titleBold }
]);
return (e, L) => (a(), n("header", B, [
s("div", {
class: "f-page-header__left",
onClick: f
}, [
u(t(S), {
size: t(z)(e.iconSize)
}, {
default: g(() => [
r(e.$slots, "icon", {}, () => [
(a(), C(b(e.icon || t(y))))
])
]),
_: 3
}, 8, ["size"]),
s("div", N, i(e.backText), 1)
]),
s("div", {
class: c(t(h))
}, [
s("div", {
style: k({ color: e.titleColor }),
class: c(t(_))
}, [
r(e.$slots, "title", {}, () => [
d(i(e.title), 1)
])
], 6),
e.subtitle || e.$slots.subtitle ? (a(), n("div", $, [
r(e.$slots, "subtitle", {}, () => [
d(i(e.subtitle), 1)
])
])) : v("", !0)
], 2)
]));
}
});
export {
P as default
};