vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
219 lines (218 loc) • 8.48 kB
JavaScript
import { defineComponent as T, ref as B, computed as i, watch as A, watchEffect as K, createElementBlock as o, openBlock as l, withKeys as Y, createVNode as m, Transition as E, withCtx as p, withDirectives as w, createElementVNode as r, withModifiers as F, vShow as b, normalizeStyle as n, normalizeClass as u, createCommentVNode as s, renderSlot as a, createTextVNode as f, toDisplayString as c, unref as P, normalizeProps as L, guardReactiveProps as I } from "vue";
import H from "../scrollbar/index.js";
import { useSlotsExist as W } from "../utils/index.js";
const j = { class: "drawer-content" }, q = {
key: 0,
class: "drawer-body-wrapper"
}, G = { class: "header-title" }, J = {
key: 1,
class: "header-title"
}, Q = {
key: 0,
class: "header-extra"
}, U = {
key: 1,
class: "drawer-body-wrapper"
}, X = { class: "header-title" }, Z = {
key: 1,
class: "header-title"
}, x = {
key: 0,
class: "header-extra"
}, oe = /* @__PURE__ */ T({
__name: "Drawer",
props: {
width: { default: 378 },
height: { default: 378 },
title: { default: void 0 },
closable: { type: Boolean, default: !0 },
placement: { default: "right" },
headerClass: { default: void 0 },
headerStyle: { default: () => ({}) },
bodyClass: { default: void 0 },
bodyStyle: { default: () => ({}) },
scrollbarProps: { default: () => ({}) },
extra: { default: void 0 },
footer: { default: void 0 },
footerClass: { default: void 0 },
footerStyle: { default: () => ({}) },
destroyOnClose: { type: Boolean, default: !1 },
zIndex: { default: 1e3 },
open: { type: Boolean, default: !1 }
},
emits: ["update:open", "close"],
setup(N, { emit: O }) {
const t = N, k = B(), d = B(), h = W(["title", "extra", "footer"]), y = O, V = i(() => typeof t.width == "number" ? `${t.width}px` : t.width), D = i(() => typeof t.height == "number" ? `${t.height}px` : t.height), M = i(() => ["top", "bottom"].includes(t.placement) ? {
zIndex: t.zIndex,
height: D.value
} : {
zIndex: t.zIndex,
width: V.value
}), S = i(() => h.title || h.extra || t.title || t.extra || t.closable), g = i(() => h.title || t.title), $ = i(() => h.extra || t.extra), z = i(() => h.footer || t.footer);
A(
d,
(e) => {
e ? (k.value.focus(), document.documentElement.style.overflowY = "hidden", document.body.style.overflowY = "hidden") : (document.documentElement.style.removeProperty("overflow-y"), document.body.style.removeProperty("overflow-y"));
},
{
immediate: !0
}
), K(() => {
d.value = t.open;
});
function R(e) {
d.value = !1, y("update:open", !1), y("close", e);
}
function C(e) {
d.value = !1, y("update:open", !1), y("close", e);
}
return (e, v) => (l(), o("div", {
ref_key: "drawerRef",
ref: k,
tabindex: "-1",
class: "m-drawer",
onKeydown: Y(C, ["esc"])
}, [
m(E, { name: "fade" }, {
default: p(() => [
w(r("div", {
class: "drawer-mask",
onClick: F(R, ["self"])
}, null, 512), [
[b, d.value]
])
]),
_: 1
}),
m(E, {
name: `motion-${e.placement}`
}, {
default: p(() => [
w(r("div", {
class: u(["drawer-wrap", `drawer-${e.placement}`]),
style: n(M.value)
}, [
r("div", j, [
e.destroyOnClose ? s("", !0) : (l(), o("div", q, [
w(r("div", {
class: u(["drawer-header", e.headerClass]),
style: n(e.headerStyle)
}, [
r("div", G, [
e.closable ? (l(), o("svg", {
key: 0,
focusable: "false",
class: "svg-close",
"data-icon": "close",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896",
onClick: C
}, v[0] || (v[0] = [
r("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" }, null, -1)
]))) : s("", !0),
g.value ? (l(), o("div", J, [
a(e.$slots, "title", {}, () => [
f(c(e.title), 1)
], !0)
])) : s("", !0)
]),
$.value ? (l(), o("div", Q, [
a(e.$slots, "extra", {}, () => [
f(c(e.extra), 1)
], !0)
])) : s("", !0)
], 6), [
[b, S.value]
]),
m(P(H), L(I(e.scrollbarProps)), {
default: p(() => [
r("div", {
class: u(["drawer-body", e.bodyClass]),
style: n(e.bodyStyle)
}, [
a(e.$slots, "default", {}, void 0, !0)
], 6)
]),
_: 3
}, 16),
z.value ? (l(), o("div", {
key: 0,
class: u(["drawer-footer", e.footerClass]),
style: n(e.footerStyle)
}, [
a(e.$slots, "footer", {}, () => [
f(c(e.footer), 1)
], !0)
], 6)) : s("", !0)
])),
e.destroyOnClose && d.value ? (l(), o("div", U, [
w(r("div", {
class: u(["drawer-header", e.headerClass]),
style: n(e.headerStyle)
}, [
r("div", X, [
e.closable ? (l(), o("svg", {
key: 0,
focusable: "false",
class: "svg-close",
"data-icon": "close",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896",
onClick: C
}, v[1] || (v[1] = [
r("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" }, null, -1)
]))) : s("", !0),
g.value ? (l(), o("div", Z, [
a(e.$slots, "title", {}, () => [
f(c(e.title), 1)
], !0)
])) : s("", !0)
]),
$.value ? (l(), o("div", x, [
a(e.$slots, "extra", {}, () => [
f(c(e.extra), 1)
], !0)
])) : s("", !0)
], 6), [
[b, S.value]
]),
m(P(H), L(I(e.scrollbarProps)), {
default: p(() => [
r("div", {
class: u(["drawer-body", e.bodyClass]),
style: n(e.bodyStyle)
}, [
a(e.$slots, "default", {}, void 0, !0)
], 6)
]),
_: 3
}, 16),
z.value ? (l(), o("div", {
key: 0,
class: u(["drawer-footer", e.footerClass]),
style: n(e.footerStyle)
}, [
a(e.$slots, "footer", {}, () => [
f(c(e.footer), 1)
], !0)
], 6)) : s("", !0)
])) : s("", !0)
])
], 6), [
[b, d.value]
])
]),
_: 3
}, 8, ["name"])
], 544));
}
});
export {
oe as default
};