vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
219 lines (218 loc) • 8.5 kB
JavaScript
import { defineComponent as T, ref as E, computed as n, watch as A, watchEffect as K, createElementBlock as o, openBlock as a, withKeys as Y, createVNode as w, Transition as P, withCtx as b, withDirectives as C, createElementVNode as r, withModifiers as F, vShow as x, normalizeStyle as u, normalizeClass as c, createCommentVNode as s, renderSlot as d, createTextVNode as f, toDisplayString as h, unref as L, normalizeProps as I, guardReactiveProps as H } from "vue";
import N 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"
}, p = {
key: 0,
class: "header-extra"
}, le = /* @__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(e, { emit: O }) {
const t = e, S = E(), i = E(), y = W(["title", "extra", "footer"]), v = O, V = n(() => typeof t.width == "number" ? `${t.width}px` : t.width), D = n(() => typeof t.height == "number" ? `${t.height}px` : t.height), M = n(() => ["top", "bottom"].includes(t.placement) ? {
zIndex: t.zIndex,
height: D.value
} : {
zIndex: t.zIndex,
width: V.value
}), g = n(() => y.title || y.extra || t.title || t.extra || t.closable), $ = n(() => y.title || t.title), z = n(() => y.extra || t.extra), B = n(() => y.footer || t.footer);
A(
i,
(l) => {
l ? (S.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(() => {
i.value = t.open;
});
function R(l) {
i.value = !1, v("update:open", !1), v("close", l);
}
function k(l) {
i.value = !1, v("update:open", !1), v("close", l);
}
return (l, m) => (a(), o("div", {
ref_key: "drawerRef",
ref: S,
tabindex: "-1",
class: "drawer-wrap",
onKeydown: Y(k, ["esc"])
}, [
w(P, { name: "fade" }, {
default: b(() => [
C(r("div", {
class: "drawer-mask",
onClick: F(R, ["self"])
}, null, 512), [
[x, i.value]
])
]),
_: 1
}),
w(P, {
name: `motion-${e.placement}`
}, {
default: b(() => [
C(r("div", {
class: c(["drawer-container", `drawer-${e.placement}`]),
style: u(M.value)
}, [
r("div", j, [
e.destroyOnClose ? s("", !0) : (a(), o("div", q, [
C(r("div", {
class: c(["drawer-header", e.headerClass]),
style: u(e.headerStyle)
}, [
r("div", G, [
e.closable ? (a(), 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: k
}, [...m[0] || (m[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),
$.value ? (a(), o("div", J, [
d(l.$slots, "title", {}, () => [
f(h(e.title), 1)
], !0)
])) : s("", !0)
]),
z.value ? (a(), o("div", Q, [
d(l.$slots, "extra", {}, () => [
f(h(e.extra), 1)
], !0)
])) : s("", !0)
], 6), [
[x, g.value]
]),
w(L(N), I(H(e.scrollbarProps)), {
default: b(() => [
r("div", {
class: c(["drawer-body", e.bodyClass]),
style: u(e.bodyStyle)
}, [
d(l.$slots, "default", {}, void 0, !0)
], 6)
]),
_: 3
}, 16),
B.value ? (a(), o("div", {
key: 0,
class: c(["drawer-footer", e.footerClass]),
style: u(e.footerStyle)
}, [
d(l.$slots, "footer", {}, () => [
f(h(e.footer), 1)
], !0)
], 6)) : s("", !0)
])),
e.destroyOnClose && i.value ? (a(), o("div", U, [
C(r("div", {
class: c(["drawer-header", e.headerClass]),
style: u(e.headerStyle)
}, [
r("div", X, [
e.closable ? (a(), 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: k
}, [...m[1] || (m[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),
$.value ? (a(), o("div", Z, [
d(l.$slots, "title", {}, () => [
f(h(e.title), 1)
], !0)
])) : s("", !0)
]),
z.value ? (a(), o("div", p, [
d(l.$slots, "extra", {}, () => [
f(h(e.extra), 1)
], !0)
])) : s("", !0)
], 6), [
[x, g.value]
]),
w(L(N), I(H(e.scrollbarProps)), {
default: b(() => [
r("div", {
class: c(["drawer-body", e.bodyClass]),
style: u(e.bodyStyle)
}, [
d(l.$slots, "default", {}, void 0, !0)
], 6)
]),
_: 3
}, 16),
B.value ? (a(), o("div", {
key: 0,
class: c(["drawer-footer", e.footerClass]),
style: u(e.footerStyle)
}, [
d(l.$slots, "footer", {}, () => [
f(h(e.footer), 1)
], !0)
], 6)) : s("", !0)
])) : s("", !0)
])
], 6), [
[x, i.value]
])
]),
_: 3
}, 8, ["name"])
], 544));
}
});
export {
le as default
};