v-layouts
Version:
Web page layout collection for Vue3
356 lines (355 loc) • 11.8 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".layout-admin-classic{display:grid;overflow:hidden;box-sizing:border-box;align-items:stretch;transition:all .2s}.layout-admin-classic .admin-header{grid-area:header}.layout-admin-classic .admin-aside{grid-area:aside;overflow:auto}.layout-admin-classic .admin-breadcrumb{grid-area:breadcrumb}.layout-admin-classic .admin-main{grid-area:main;overflow:auto}.layout-admin-classic .admin-footer{grid-area:footer}.layout-content-press{display:grid;overflow:hidden;box-sizing:border-box;align-items:stretch;transition:all .2s}.layout-content-press .content-header{grid-area:header}.layout-content-press .content-primary-aside{grid-area:primary-aside;overflow:auto}.layout-content-press .content-secondary-aside{grid-area:secondary-aside;overflow:auto}.layout-content-press .content-breadcrumb{grid-area:breadcrumb}.layout-content-press .content-main{grid-area:main;overflow:auto}.layout-content-press .content-footer{grid-area:footer}.panel-group{display:grid}.panel-group .panel-item{display:flex;flex-direction:column;overflow:hidden;border-radius:.5rem;transition:background-color .2s}.panel-group .panel-item--collapsed{background-color:#f9f9f9}.panel-group .panel-item--collapsed .panel-switcher svg{transform:rotate(180deg)}.panel-group .panel-item__header{display:flex;align-items:center;justify-content:space-between}.panel-group .panel-item__body{flex-grow:1;overflow:auto}.panel-group .panel-item .panel-switcher{display:flex;padding:0 1rem;cursor:pointer;color:#666}.panel-group .panel-item .panel-switcher,.panel-group .panel-item .panel-switcher svg{transition:all .2s}.panel-group .panel-item .panel-switcher--disabled{cursor:default;color:#ddd}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
import { computed as g, defineComponent as $, createVNode as m, ref as W, watchEffect as L, provide as M, openBlock as S, createElementBlock as w, normalizeStyle as G, unref as b, renderSlot as B, normalizeClass as E, createElementVNode as R, inject as z, onUnmounted as T, createBlock as U, createCommentVNode as H, withDirectives as Y, vShow as q } from "vue";
const [
I,
V,
K,
J,
Q,
D,
F
] = [
"header",
"aside",
"primary-aside",
"secondary-aside",
"breadcrumb",
"main",
"footer"
], X = "left";
function d(e, t = "px") {
return typeof e == "number" ? `${e}${t}` : e;
}
function A(e, t) {
return P(e).map(t || ((a) => a)).join(" ");
}
function f(e, t) {
return e ? t : void 0;
}
function P(e) {
return e.filter((t) => t);
}
function O(e) {
return {
width: { type: [String, Number], default: "100vw" },
height: { type: [String, Number], default: "100vh" },
headerHeight: { type: [String, Number], default: 60 },
footerHeight: { type: [String, Number], default: 60 },
mainClass: { type: [String, Object, Array], default: "" },
...e
};
}
function _(e) {
return {
hasHeader: e.header,
hasAside: e.aside,
hasPrimaryAside: e.primaryAside,
hasSecondaryAside: e.secondaryAside,
hasBreadcrumb: e.breadcrumb,
hasFooter: e.footer
};
}
function Z() {
return O({
breadcrumbHeight: { type: [String, Number], default: 60 },
asideWidth: { type: [String, Number], default: 260 },
asidePosition: { type: String, default: "left" },
asideFullHeight: { type: Boolean, default: !1 }
});
}
function ee(e, t) {
const a = g(() => ["admin-main", e.mainClass]), l = (n) => e.asidePosition === X ? n : n.reverse();
return {
mainClasses: a,
getContainerStyles: () => {
const {
hasAside: n,
hasHeader: i,
hasBreadcrumb: c,
hasFooter: s
} = _(t), r = l([
f(n, d(e.asideWidth)),
"auto"
]), h = [
f(i, d(e.headerHeight)),
f(c, d(e.breadcrumbHeight)),
"auto",
f(s, d(e.footerHeight))
], y = f(
n,
e.asideFullHeight ? V : I
), o = f(n, V), p = [[o, D]];
c && p.unshift([o, Q]), i && p.unshift([y, I]), s && p.push([o, F]);
const v = (C) => `"${P(l(C)).join(" ")}"`;
return {
width: d(e.width),
height: d(e.height),
"grid-template-columns": A(r),
"grid-template-rows": A(h),
"grid-template-areas": A(p, v)
};
}
};
}
const de = /* @__PURE__ */ $({
name: "LayoutAdminClassic",
props: Z(),
setup(e, {
slots: t
}) {
const {
mainClasses: a,
getContainerStyles: l
} = ee(e, t);
return () => {
var r;
const {
hasAside: u,
hasHeader: n,
hasBreadcrumb: i,
hasFooter: c
} = _(t), s = l();
return m("div", {
class: "layout-admin-classic",
style: s
}, [n && m("div", {
class: "admin-header"
}, [t.header()]), u && m("div", {
class: "admin-aside"
}, [t.aside()]), i && m("div", {
class: "admin-breadcrumb"
}, [t.breadcrumb()]), m("div", {
class: a.value
}, [(r = t.default) == null ? void 0 : r.call(t)]), c && m("div", {
class: "admin-footer"
}, [t.footer()])]);
};
}
});
function te() {
return O({
primaryAsideWidth: { type: [String, Number], default: 260 },
secondaryAsideWidth: { type: [String, Number], default: 260 },
mainPosition: { type: String, default: "center" }
});
}
function ae(e, t) {
const a = g(() => ["content-main", e.mainClass]), l = (n) => {
const i = ["left", "center", "right"], c = i.includes(n) ? n : "center";
return i.findIndex((s) => s === c);
};
return {
mainClasses: a,
getContainerStyles: () => {
const {
hasHeader: n,
hasPrimaryAside: i,
hasSecondaryAside: c,
hasFooter: s
} = _(t), r = l(e.mainPosition), h = [
f(i, d(e.primaryAsideWidth)),
f(c, d(e.secondaryAsideWidth))
];
h.splice(r, 0, "auto");
const y = P(h).length, o = [
f(n, d(e.headerHeight)),
"auto",
f(s, d(e.footerHeight))
], p = Array(y).fill(I), v = Array(y).fill(F), C = [
f(i, K),
f(c, J)
];
C.splice(r, 0, D);
const N = [C];
n && N.unshift(p), s && N.push(v);
const k = (x) => `"${P(x).join(" ")}"`;
return {
width: d(e.width),
height: d(e.height),
"grid-template-columns": A(h),
"grid-template-rows": A(o),
"grid-template-areas": A(N, k)
};
}
};
}
const ue = /* @__PURE__ */ $({
name: "LayoutContentPress",
props: te(),
setup(e, {
slots: t
}) {
const {
mainClasses: a,
getContainerStyles: l
} = ae(e, t);
return () => {
var r;
const {
hasHeader: u,
hasFooter: n,
hasPrimaryAside: i,
hasSecondaryAside: c
} = _(t), s = l();
return m("div", {
class: "layout-content-press",
style: s
}, [u && m("div", {
class: "content-header"
}, [t.header()]), i && m("div", {
class: "content-primary-aside"
}, [t.primaryAside()]), c && m("div", {
class: "content-secondary-aside"
}, [t.secondaryAside()]), m("div", {
class: a.value
}, [(r = t.default) == null ? void 0 : r.call(t)]), n && m("div", {
class: "content-footer"
}, [t.footer()])]);
};
}
}), j = Symbol("panel-group");
function ne(e, t) {
const a = W([]);
let l = 0;
const u = g(() => a.value.filter((s) => !s.collapse)), n = g(() => ({
width: d(e.width),
height: d(e.height),
"grid-template-rows": a.value.map((s) => s.collapse ? "auto" : "1fr").join(" "),
"row-gap": d(e.gap)
})), i = g({
get: () => u.value.map((s) => s.name),
set(s) {
if (!Array.isArray(s) || !s.length) return;
const r = e.accordion ? s[0] : s;
a.value.forEach((h) => {
h.collapse = !r.includes(h.name);
});
}
}), c = (s) => {
const r = ++l, h = !!(e.accordion && !e.modelValue && a.value.length);
a.value.push({ id: r, name: s, collapse: h });
const y = g(() => a.value.find((o) => o.id === r));
return {
panel: y,
switcherDisabled: g(() => u.value.length === 1 && !y.value.collapse),
destroy: () => a.value = a.value.filter((o) => o.id !== r),
setCollapse: (o) => {
const p = a.value.find((v) => v.id === r);
e.accordion && a.value.forEach((v) => {
v.collapse = !0;
}), p && (p.collapse = o), t("update:modelValue", i.value);
}
};
};
return L(() => {
i.value = e.modelValue;
}), {
panels: a,
activePanels: i,
groupStyles: n,
createPanel: c
};
}
const he = {
__name: "PanelGroup",
props: {
modelValue: { type: Array, default: void 0 },
width: { type: [String, Number], default: "auto" },
height: { type: [String, Number], default: "100%" },
/** Panel spacing */
gap: { type: [String, Number], default: "1rem" },
/**
* Panel group allows all panels to be opened by default
* set to true, only one panel can be expanded
*/
accordion: { type: Boolean, default: !1 }
},
emits: ["update:modelValue"],
setup(e, { emit: t }) {
const a = e, l = t, { groupStyles: u, createPanel: n } = ne(a, l);
return M(j, { createPanel: n }), (i, c) => (S(), w("div", {
class: "panel-group",
style: G(b(u))
}, [
B(i.$slots, "default")
], 4));
}
}, se = /* @__PURE__ */ R("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
fill: "currentColor",
class: "bi bi-caret-down-fill",
viewBox: "0 0 16 16"
}, [
/* @__PURE__ */ R("path", { d: "M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" })
], -1), ie = [
se
], re = {
__name: "PanelSwitcher",
props: {
collapse: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 }
},
emits: ["change"],
setup(e, { emit: t }) {
const a = e, l = t;
function u() {
a.disabled || l("change", !a.collapse);
}
return (n, i) => (S(), w("div", {
class: E(["panel-switcher", { "panel-switcher--disabled": a.disabled }]),
onClick: u
}, ie, 2));
}
}, oe = {
key: 0,
class: "panel-item__header"
}, le = {
key: 1,
class: "panel-item__body"
}, me = {
__name: "PanelItem",
props: {
name: { type: String, default: "" },
switcher: { type: Boolean, default: !0 },
switcherClass: { type: String, default: "" },
destroyOnCollapse: { type: Boolean, default: !1 }
},
emits: ["change"],
setup(e, { emit: t }) {
const a = e, l = t, { createPanel: u } = z(j), { panel: n, switcherDisabled: i, destroy: c, setCollapse: s } = u(a.name), r = g(() => a.destroyOnCollapse ? !n.value.collapse : !0), h = g(() => a.destroyOnCollapse ? !0 : !n.value.collapse);
function y(o) {
s(o), l("change", o);
}
return T(() => c()), (o, p) => (S(), w("div", {
class: E(["panel-item", { "panel-item--collapsed": b(n).collapse }])
}, [
o.$slots.header ? (S(), w("div", oe, [
B(o.$slots, "header", {
collapse: b(n).collapse
}),
e.switcher ? (S(), U(re, {
key: 0,
collapse: b(n).collapse,
class: E(e.switcherClass),
disabled: b(i),
onChange: y
}, null, 8, ["collapse", "class", "disabled"])) : H("", !0)
])) : H("", !0),
r.value ? Y((S(), w("div", le, [
B(o.$slots, "default", {
collapse: b(n).collapse
})
], 512)), [
[q, h.value]
]) : H("", !0)
], 2));
}
};
export {
de as LayoutAdminClassic,
ue as LayoutContentPress,
he as PanelGroup,
me as PanelItem
};