@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
350 lines (349 loc) • 11.2 kB
JavaScript
import { defineComponent as re, useSlots as le, toRef as oe, ref as _, computed as m, watch as H, shallowReadonly as se, reactive as ne, nextTick as ie, openBlock as C, createBlock as de, unref as e, normalizeClass as n, withCtx as p, withDirectives as ce, createElementVNode as W, normalizeStyle as ue, createElementBlock as $, renderSlot as v, normalizeProps as w, guardReactiveProps as y, createVNode as i, createTextVNode as I, toDisplayString as V, mergeProps as fe, createCommentVNode as x, vShow as me } from "vue";
import "../button/index.mjs";
import "../icon/index.mjs";
import "../masker/index.mjs";
import "../renderer/index.mjs";
import { useProps as pe, createSizeProp as he, useNameHelper as be, useIcons as ve, useLocale as we, emitEvent as d } from "@vexip-ui/config";
import { useMoving as ye } from "@vexip-ui/hooks";
import { getGlobalCount as ge, toNumber as f, isPromise as ke } from "@vexip-ui/utils";
import { drawerProps as ze } from "./props.mjs";
import { drawerPlacements as Ce } from "./symbol.mjs";
import Se from "../masker/masker.vue2.mjs";
import g from "../renderer/renderer.mjs";
import _e from "../icon/icon.mjs";
import F from "../button/button.mjs";
const $e = ["aria-modal", "aria-labelledby", "aria-describedby"], xe = ["id"], Te = ["id"], Ge = /* @__PURE__ */ re({
name: "Drawer",
__name: "drawer",
props: ze,
emits: ["update:active"],
setup(G, { expose: L, emit: U }) {
const t = pe("drawer", G, {
locale: null,
transfer: !1,
active: {
default: !1,
static: !0
},
width: {
default: 280,
validator: (a) => typeof a == "string" || a > 0
},
height: {
default: 280,
validator: (a) => typeof a == "string" || a > 0
},
placement: {
default: "right",
validator: (a) => Ce.includes(a)
},
title: "",
closable: !0,
inner: !1,
maskClose: !0,
drawerClass: null,
hideMask: !1,
onBeforeClose: {
default: null,
isFunc: !0
},
resizable: !1,
autoRemove: !1,
footer: !1,
confirmText: null,
cancelText: null,
loading: !1,
confirmType: "primary",
cancelType: "default",
actionSize: he("small"),
undivided: !1,
disableEsc: !1,
slots: () => ({})
}), j = U, T = le(), r = be("drawer"), D = ve(), X = we("drawer", oe(t, "locale")), k = _(t.active), c = _(t.width), u = _(t.height), z = _(), Y = `${ge()}`, { target: A, moving: S } = ye({
onStart: (a, l) => {
if (!t.resizable || l.button > 0 || !z.value)
return !1;
const o = `${c.value}`.endsWith("%") ? z.value.offsetWidth : f(c.value), b = `${u.value}`.endsWith("%") ? z.value.offsetHeight : f(u.value);
a.xStart = o, a.yStart = b, d(t.onResizeStart, { width: o, height: b });
},
onMove: (a, l) => {
const o = l.clientX - a.clientX, b = l.clientY - a.clientY;
let E = f(c.value), N = f(u.value);
switch (t.placement) {
case "top": {
N = a.yStart + b;
break;
}
case "right": {
E = a.xStart - o;
break;
}
case "bottom": {
N = a.yStart - b;
break;
}
default:
E = a.xStart + o;
}
c.value = Math.max(E, 100), u.value = Math.max(N, 100), d(t.onResizeMove, {
width: f(c.value),
height: f(u.value)
});
},
onEnd: () => {
d(t.onResizeEnd, {
width: f(c.value),
height: f(u.value)
});
}
}), q = m(() => [
r.b(),
r.bs("vars"),
{
[r.bm("inherit")]: t.inherit,
[r.bm("inner")]: t.inner,
[r.bm("closable")]: t.closable,
[r.bm("resizable")]: t.resizable,
[r.bm("undivided")]: t.undivided
}
]), J = m(() => r.ns(`move-${t.placement}`)), K = m(() => [
r.be("wrapper"),
r.bem("wrapper", t.placement),
{
[r.bem("wrapper", "hide-mask")]: t.hideMask,
[r.bem("wrapper", "resizing")]: S.value
},
t.drawerClass
]), O = m(() => {
const a = t.placement;
if (a === "top" || a === "bottom") {
const o = u.value;
return {
height: `${o}`.endsWith("%") ? o : `${o}px`
};
}
const l = c.value;
return {
width: `${l}`.endsWith("%") ? l : `${l}px`
};
}), Q = m(() => !!(T.header || T.title || t.title || t.slots.header || t.slots.title)), M = m(() => `${r.bs(Y)}__title`), P = m(() => `${r.bs(Y)}__body`);
H(
() => t.active,
(a) => {
k.value = a;
}
), H(
() => t.width,
(a) => {
c.value = a;
}
), H(
() => t.height,
(a) => {
u.value = a;
}
), L({
resizing: S,
titleId: M,
bodyId: P,
wrapper: z,
resizer: A,
handleConfirm: R,
handleCancel: B,
handleClose: h
});
const s = se(
ne({
resizing: S,
handleConfirm: R,
handleCancel: B,
handleClose: h
})
);
function Z(a) {
k.value !== a && (k.value = a, j("update:active", a), d(t.onToggle, a));
}
async function h(a = !1) {
let l = !0;
return typeof t.onBeforeClose == "function" && (l = t.onBeforeClose(a), ke(l) && (l = await l)), l !== !1 && ie(() => {
Z(!1), d(t.onClose);
}), l;
}
function ee() {
if (t.maskClose)
return h();
}
function te() {
d(t.onShow);
}
function ae() {
d(t.onHide);
}
function R() {
h(!0), d(t.onConfirm);
}
function B() {
h(!1), d(t.onCancel);
}
return (a, l) => (C(), de(e(Se), {
active: k.value,
"onUpdate:active": l[1] || (l[1] = (o) => k.value = o),
inherit: e(t).inherit,
class: n(q.value),
inner: e(t).inner,
"transition-name": J.value,
closable: e(t).maskClose,
disabled: e(t).hideMask,
"on-before-close": ee,
transfer: e(t).transfer,
"auto-remove": e(t).autoRemove,
"disable-esc": e(t).disableEsc,
onShow: te,
onHide: ae
}, {
default: p(({ show: o }) => [
ce(W("section", {
ref_key: "wrapper",
ref: z,
class: n(K.value),
style: ue(O.value),
role: "dialog",
"aria-modal": o ? "true" : void 0,
"aria-labelledby": M.value,
"aria-describedby": P.value
}, [
Q.value ? (C(), $("div", {
key: 0,
class: n(e(r).be("header"))
}, [
v(a.$slots, "header", w(y(e(s))), () => [
i(e(g), {
renderer: e(t).slots.header,
data: e(s)
}, {
default: p(() => [
W("div", {
id: M.value,
class: n(e(r).be("title"))
}, [
v(a.$slots, "title", w(y(e(s))), () => [
i(e(g), {
renderer: e(t).slots.title,
data: e(s)
}, {
default: p(() => [
I(V(e(t).title), 1)
]),
_: 1
}, 8, ["renderer", "data"])
])
], 10, xe),
e(t).closable ? (C(), $("button", {
key: 0,
type: "button",
class: n(e(r).be("close")),
onClick: l[0] || (l[0] = (b) => h())
}, [
v(a.$slots, "close", w(y(e(s))), () => [
i(e(g), {
renderer: e(t).slots.close,
data: e(s)
}, {
default: p(() => [
i(e(_e), fe(e(D).close, {
scale: +(e(D).close.scale || 1) * 1.2,
label: "close"
}), null, 16, ["scale"])
]),
_: 1
}, 8, ["renderer", "data"])
])
], 2)) : x("", !0)
]),
_: 3
}, 8, ["renderer", "data"])
])
], 2)) : x("", !0),
W("div", {
id: P.value,
class: n(e(r).be("content"))
}, [
v(a.$slots, "default", w(y(e(s))), () => [
i(e(g), {
renderer: e(t).slots.default,
data: e(s)
}, null, 8, ["renderer", "data"])
])
], 10, Te),
e(t).footer || T.footer || e(t).slots.footer ? (C(), $("div", {
key: 1,
class: n(e(r).be("footer"))
}, [
v(a.$slots, "footer", w(y(e(s))), () => [
i(e(g), {
renderer: e(t).slots.footer,
data: e(s)
}, {
default: p(() => [
i(e(F), {
class: n([e(r).be("button"), e(r).bem("button", "cancel")]),
inherit: "",
text: "",
type: e(t).cancelType,
size: e(t).actionSize,
onClick: B
}, {
default: p(() => [
I(V(e(t).cancelText || e(X).cancel), 1)
]),
_: 1
}, 8, ["class", "type", "size"]),
i(e(F), {
class: n([e(r).be("button"), e(r).bem("button", "confirm")]),
inherit: "",
type: e(t).confirmType,
size: e(t).actionSize,
loading: e(t).loading,
onClick: R
}, {
default: p(() => [
I(V(e(t).confirmText || e(X).confirm), 1)
]),
_: 1
}, 8, ["class", "type", "size", "loading"])
]),
_: 1
}, 8, ["renderer", "data"])
])
], 2)) : x("", !0),
e(t).resizable ? (C(), $("div", {
key: 2,
ref_key: "resizer",
ref: A,
class: n([
e(r).be("handler"),
e(r).bem("handler", e(t).placement),
{
[e(r).bem("handler", "resizing")]: e(S)
}
])
}, [
v(a.$slots, "handler", w(y(e(s))), () => [
i(e(g), {
renderer: e(t).slots.handler,
data: e(s)
}, null, 8, ["renderer", "data"])
])
], 2)) : x("", !0)
], 14, $e), [
[me, o]
])
]),
_: 3
}, 8, ["active", "inherit", "class", "inner", "transition-name", "closable", "disabled", "transfer", "auto-remove", "disable-esc"]));
}
});
export {
Ge as default
};
//# sourceMappingURL=drawer.vue2.mjs.map