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