ucc-ui
Version:
ucc-ui components library
181 lines (180 loc) • 6.9 kB
JavaScript
import { defineComponent as K, ref as c, useAttrs as Q, computed as H, watch as Y, onBeforeUnmount as ee, onMounted as oe, openBlock as u, createBlock as C, Teleport as te, createElementBlock as x, normalizeClass as le, normalizeStyle as ne, withModifiers as se, createElementVNode as h, unref as r, toDisplayString as ae, createCommentVNode as k, renderSlot as M, resolveDynamicComponent as ie, createVNode as V, withCtx as F, createTextVNode as O } from "vue";
import { u as ce, a as ue, b as re, c as de } from "./hooks-Dj9Dthmd.js";
import { w as T } from "./utils-BzE2Aob-.js";
import "./ConfigProvider-C-6nRyrn.js";
import { _ as pe, U as R } from "./Button-DOc5qANu.js";
import { _ as me } from "./ButtonGroup-Bth7Fk8n.js";
import { h as fe, j as U } from "./vendors-PY6Ic9FA.js";
const A = T(pe), Ve = T(me), ve = 2006, d = [], S = ve, N = (p) => {
d.includes(p) || d.push(p);
}, he = () => d.length ? Math.max(...d) : S, ge = () => d, ye = () => d.length ? he() + 1 : S, _e = (p) => d.some((w) => w > p), Ie = ["aria-describedby"], Ce = { class: "u-dialog__title" }, ke = ["title"], we = { class: "u-dialog__header-actions" }, Be = ["id"], ze = ["innerHTML"], xe = {
key: 0,
class: "u-dialog__footer custom-scollbar"
}, Fe = /* @__PURE__ */ K({
name: "UDialog",
inheritAttrs: !1,
__name: "Dialog",
props: {
modelValue: { type: Boolean },
title: { default: "标题" },
content: { type: [Object, String, Function], default: "弹窗内容" },
width: { default: 0.4 },
height: { default: 0.4 },
modal: { type: Boolean, default: !1 },
modalClass: {},
closeIcon: {},
collapseIcon: {},
appendTo: { default: "body" },
openDelay: { default: 0 },
closeDelay: { default: 0 },
closeOnClickModal: { type: Boolean },
closeOnPressEscape: { type: Boolean },
showCollapseIcon: { type: Boolean },
showCloseIcon: { type: Boolean, default: !0 },
zIndex: { default: 2e3 },
showFooter: { type: Boolean, default: !0 }
},
emits: ["update:modelValue", "open", "collapse", "confirm", "cancel", "click-modal"],
setup(p, { expose: w, emit: Z }) {
const D = ce("u-dialog"), o = p;
N(o.zIndex);
const s = Z, t = c(null), g = c(null), m = c(!1), y = c(o.modelValue || !0), a = c(o.width), l = c(o.height), B = document.documentElement.clientWidth, z = document.documentElement.clientHeight, f = Q(), L = H(() => o.closeIcon || "close"), W = H(() => o.collapseIcon || ["fas", "chevron-down"]), _ = c(o.zIndex), j = Y(y, (e) => {
s("update:modelValue", e);
});
ee(() => {
j();
});
const q = () => {
f.open && U(f.open) && f.open(), y.value = !0, s("open");
}, v = () => {
f.close && U(f.close) && f.close(), y.value = !1, s("cancel");
}, G = () => {
s("confirm", () => v());
}, X = () => {
o.modal && o.closeOnClickModal && v(), s("click-modal");
}, J = () => {
ge().length < 2 || !_e(_.value) || (_.value = ye(), N(_.value));
}, E = () => {
var n;
m.value = !m.value;
const e = m.value ? (((n = g.value) == null ? void 0 : n.getBoundingClientRect().height) || 0) + 10 : l.value;
window.requestAnimationFrame(() => {
var i;
(i = t.value) == null || i.style.setProperty("height", `${e}px`);
}), s("collapse", m.value);
};
o.closeOnPressEscape && ue(document, "keydown", (e) => {
e.key === "Escape" && (e.preventDefault(), v(), s("cancel"));
}), oe(() => {
var n;
const e = (n = g.value) == null ? void 0 : n.getBoundingClientRect();
b(), re({
el: t,
minWidth: 100,
minHeight: e == null ? void 0 : e.height,
resizing: (i, I) => {
a.value = i, l.value = I, m.value = !1;
}
}), de({
el: t,
dragEl: g
});
});
function b() {
a.value <= 1 && (a.value = B * a.value), l.value <= 1 && (l.value = z * l.value);
const e = z - l.value < 0 ? 0 : (z - l.value) / 3, n = B - a.value < 0 ? 0 : (B - a.value) / 2;
window.requestAnimationFrame(() => {
var i, I, P, $;
(i = t.value) == null || i.style.setProperty("top", `${e}px`), (I = t.value) == null || I.style.setProperty("left", `${n}px`), (P = t.value) == null || P.style.setProperty("width", `${a.value}px`), ($ = t.value) == null || $.style.setProperty("height", `${l.value}px`);
});
}
return w({
open: q,
close: v,
collapse: E,
resetPosition: b
}), (e, n) => (u(), C(te, { to: e.appendTo }, [
y.value ? (u(), x("div", {
key: 0,
class: le(["u-dialog-overlay", { [e.modalClass || "is-overlay"]: e.modal }]),
style: ne({ zIndex: _.value }),
onClick: se(X, ["self", "prevent"])
}, [
h("div", {
ref_key: "dialogRef",
ref: t,
class: "u-dialog",
role: "dialog",
"aria-describedby": r(D)
}, [
h("div", {
ref_key: "dialogHeaderRef",
ref: g,
class: "u-dialog__header",
onClick: J
}, [
h("div", Ce, [
h("span", { title: e.title }, ae(e.title), 9, ke)
]),
h("div", we, [
e.showCollapseIcon ? (u(), C(r(R), {
key: 0,
class: "u-dialog__minimize",
icon: W.value,
onClick: E,
rotation: m.value ? 180 : "default"
}, null, 8, ["icon", "rotation"])) : k("", !0),
e.showCloseIcon ? (u(), C(r(R), {
key: 1,
class: "u-dialog__close",
icon: L.value,
onClick: v
}, null, 8, ["icon"])) : k("", !0)
])
], 512),
h("div", {
id: r(D),
class: "u-dialog__body"
}, [
M(e.$slots, "default", {}, () => [
r(fe)(e.content) ? (u(), x("span", {
key: 0,
innerHTML: e.content
}, null, 8, ze)) : (u(), C(ie(e.content), { key: 1 }))
])
], 8, Be),
e.showFooter ? (u(), x("div", xe, [
M(e.$slots, "footer", {}, () => [
V(r(A), {
type: "primary",
onClick: G,
size: "small"
}, {
default: F(() => [
O("确认")
]),
_: 1
}),
V(r(A), {
plain: "",
onClick: v,
size: "small"
}, {
default: F(() => [
O("取消")
]),
_: 1
})
])
])) : k("", !0)
], 8, Ie)
], 6)) : k("", !0)
], 8, ["to"]));
}
});
export {
Ve as U,
Fe as _,
A as a,
ye as g
};