epic-designer-cjh
Version:
基于vue3的设计器,可视化开发页面表单
898 lines (897 loc) • 29.3 kB
JavaScript
import { createTextVNode as J, ref as P, onMounted as Ee, watch as _, onBeforeUnmount as ue, onBeforeMount as Le, defineComponent as E, computed as O, h as a, toRef as V, inject as fe, nextTick as Q, provide as j, cloneVNode as Ne, mergeProps as je, withDirectives as W, Transition as pe, vShow as Z, renderSlot as D } from "vue";
import { b$ as Ae, ca as De, c0 as L } from "./index-97ce4605.js";
import { k as me, a as He, c as _e, b as Ve, N as We, d as Ue } from "./Card-651a7a6c.js";
import { c as U, a as R, b as w, e as M, l as Ke, k as Ge, u as G, g as qe } from "./use-rtl-d05cb593.js";
import { e as he, c as ge, u as T, a as ve, b as N } from "./light-76d75dc8.js";
import { i as Ce, b as Xe, N as A } from "./Button-e71f72ac.js";
import { c as be } from "./create-key-76a2bf3d.js";
import { N as Ye } from "./Icon-6fe59076.js";
import { r as ee, c as oe } from "./resolve-slot-d8544b74.js";
import { I as te, S as Je, W as Qe, E as Ze, s as eo, b as ye, m as oo, d as to, p as no, g as io, N as ro, k as K, f as lo, a as so } from "./fade-in-scale-up.cssr-104df6e0.js";
import { F as ao, L as co, z as uo, g as fo } from "./index-b826a2e2.js";
import { c as po } from "./clickoutside-3b4c9484.js";
import { a as mo, u as ho } from "./use-clicked-a852ac0d.js";
import { i as go } from "./use-is-mounted-a0b9f33e.js";
import { g as vo, d as ne } from "./index-7c742dc7.js";
import { f as Co } from "./flatten-3c263333.js";
import { g as bo } from "./get-slot-e373a3d7.js";
import "./use-style-b9e822e4.js";
import "./index-e2a664aa.js";
import "./replaceable-3545da1a.js";
import "./_baseSlice-4d543985.js";
import "./isArrayLikeObject-e5e231b4.js";
import "./_overRest-dc82ce77.js";
import "./index-4562f02c.js";
import "./icon-switch.cssr-d74fe364.js";
import "./use-memo-01b53d71.js";
import "./use-form-item-4d43edfb.js";
import "./FadeInExpandTransition-596a1c51.js";
import "./delegate-6e021bb9.js";
import "./use-false-until-truthy-cceb153b.js";
import "./index-f636e660.js";
const z = (e, ...o) => typeof e == "function" ? e(...o) : typeof e == "string" ? J(e) : typeof e == "number" ? J(String(e)) : null, yo = /* @__PURE__ */ new WeakSet();
function xo(e) {
return !yo.has(e);
}
let F = 0, ie = "", re = "", le = "", se = "";
const ae = P("0px");
function ko(e) {
if (typeof document > "u")
return;
const o = document.documentElement;
let n, t = !1;
const u = () => {
o.style.marginRight = ie, o.style.overflow = re, o.style.overflowX = le, o.style.overflowY = se, ae.value = "0px";
};
Ee(() => {
n = _(e, (r) => {
if (r) {
if (!F) {
const l = window.innerWidth - o.offsetWidth;
l > 0 && (ie = o.style.marginRight, o.style.marginRight = `${l}px`, ae.value = `${l}px`), re = o.style.overflow, le = o.style.overflowX, se = o.style.overflowY, o.style.overflow = "hidden", o.style.overflowX = "hidden", o.style.overflowY = "hidden";
}
t = !0, F++;
} else
F--, F || u(), t = !1;
}, {
immediate: !0
});
}), ue(() => {
n == null || n(), t && (F--, F || u(), t = !1);
});
}
const q = P(!1), ce = () => {
q.value = !0;
}, de = () => {
q.value = !1;
};
let I = 0;
const wo = () => (Ce && (Le(() => {
I || (window.addEventListener("compositionstart", ce), window.addEventListener("compositionend", de)), I++;
}), ue(() => {
I <= 1 ? (window.removeEventListener("compositionstart", ce), window.removeEventListener("compositionend", de), I = 0) : I--;
})), q), So = {
titleFontSize: "18px",
padding: "16px 28px 20px 28px",
iconSize: "28px",
actionSpace: "12px",
contentMargin: "8px 0 16px 0",
iconMargin: "0 4px 0 0",
iconMarginIconTop: "4px 0 8px 0",
closeSize: "22px",
closeIconSize: "18px",
closeMargin: "20px 26px 0 0",
closeMarginIconTop: "10px 16px 0 0"
}, Bo = (e) => {
const { textColor1: o, textColor2: n, modalColor: t, closeIconColor: u, closeIconColorHover: r, closeIconColorPressed: l, closeColorHover: m, closeColorPressed: h, infoColor: v, successColor: C, warningColor: c, errorColor: g, primaryColor: x, dividerColor: k, borderRadius: y, fontWeightStrong: s, lineHeight: p, fontSize: f } = e;
return Object.assign(Object.assign({}, So), {
fontSize: f,
lineHeight: p,
border: `1px solid ${k}`,
titleTextColor: o,
textColor: n,
color: t,
closeColorHover: m,
closeColorPressed: h,
closeIconColor: u,
closeIconColorHover: r,
closeIconColorPressed: l,
closeBorderRadius: y,
iconColor: x,
iconColorInfo: v,
iconColorSuccess: C,
iconColorWarning: c,
iconColorError: g,
borderRadius: y,
titleFontWeight: s
});
}, Po = he({
name: "Dialog",
common: ge,
peers: {
Button: Xe
},
self: Bo
}), xe = Po, X = {
icon: Function,
type: {
type: String,
default: "default"
},
title: [String, Function],
closable: {
type: Boolean,
default: !0
},
negativeText: String,
positiveText: String,
positiveButtonProps: Object,
negativeButtonProps: Object,
content: [String, Function],
action: Function,
showIcon: {
type: Boolean,
default: !0
},
loading: Boolean,
bordered: Boolean,
iconPlacement: String,
onPositiveClick: Function,
onNegativeClick: Function,
onClose: Function
}, Ro = me(X), Oo = U([R("dialog", `
word-break: break-word;
line-height: var(--n-line-height);
position: relative;
background: var(--n-color);
color: var(--n-text-color);
box-sizing: border-box;
margin: auto;
border-radius: var(--n-border-radius);
padding: var(--n-padding);
transition:
border-color .3s var(--n-bezier),
background-color .3s var(--n-bezier),
color .3s var(--n-bezier);
`, [w("icon", {
color: "var(--n-icon-color)"
}), M("bordered", {
border: "var(--n-border)"
}), M("icon-top", [w("close", {
margin: "var(--n-close-margin)"
}), w("icon", {
margin: "var(--n-icon-margin)"
}), w("content", {
textAlign: "center"
}), w("title", {
justifyContent: "center"
}), w("action", {
justifyContent: "center"
})]), M("icon-left", [w("icon", {
margin: "var(--n-icon-margin)"
}), M("closable", [w("title", `
padding-right: calc(var(--n-close-size) + 6px);
`)])]), w("close", `
position: absolute;
right: 0;
top: 0;
margin: var(--n-close-margin);
transition:
background-color .3s var(--n-bezier),
color .3s var(--n-bezier);
z-index: 1;
`), w("content", `
font-size: var(--n-font-size);
margin: var(--n-content-margin);
position: relative;
word-break: break-word;
`, [M("last", "margin-bottom: 0;")]), w("action", `
display: flex;
justify-content: flex-end;
`, [U("> *:not(:last-child)", {
marginRight: "var(--n-action-space)"
})]), w("icon", {
fontSize: "var(--n-icon-size)",
transition: "color .3s var(--n-bezier)"
}), w("title", `
transition: color .3s var(--n-bezier);
display: flex;
align-items: center;
font-size: var(--n-title-font-size);
font-weight: var(--n-title-font-weight);
color: var(--n-title-text-color);
`), R("dialog-icon-container", {
display: "flex",
justifyContent: "center"
})]), Ke(R("dialog", `
width: 446px;
max-width: calc(100vw - 32px);
`)), R("dialog", [Ge(`
width: 446px;
max-width: calc(100vw - 32px);
`)])]), $o = {
default: () => a(te, null),
info: () => a(te, null),
success: () => a(Je, null),
warning: () => a(Qe, null),
error: () => a(Ze, null)
}, zo = E({
name: "Dialog",
alias: [
"NimbusConfirmCard",
"Confirm"
// deprecated
],
props: Object.assign(Object.assign({}, T.props), X),
setup(e) {
const { mergedComponentPropsRef: o, mergedClsPrefixRef: n, inlineThemeDisabled: t } = G(e), u = O(() => {
var c, g;
const { iconPlacement: x } = e;
return x || ((g = (c = o == null ? void 0 : o.value) === null || c === void 0 ? void 0 : c.Dialog) === null || g === void 0 ? void 0 : g.iconPlacement) || "left";
});
function r(c) {
const { onPositiveClick: g } = e;
g && g(c);
}
function l(c) {
const { onNegativeClick: g } = e;
g && g(c);
}
function m() {
const { onClose: c } = e;
c && c();
}
const h = T("Dialog", "-dialog", Oo, xe, e, n), v = O(() => {
const { type: c } = e, g = u.value, { common: { cubicBezierEaseInOut: x }, self: { fontSize: k, lineHeight: y, border: s, titleTextColor: p, textColor: f, color: S, closeBorderRadius: b, closeColorHover: i, closeColorPressed: d, closeIconColor: B, closeIconColorHover: $, closeIconColorPressed: ke, closeIconSize: we, borderRadius: Se, titleFontWeight: Be, titleFontSize: Pe, padding: Re, iconSize: Oe, actionSpace: $e, contentMargin: ze, closeSize: Fe, [g === "top" ? "iconMarginIconTop" : "iconMargin"]: Te, [g === "top" ? "closeMarginIconTop" : "closeMargin"]: Me, [be("iconColor", c)]: Ie } } = h.value;
return {
"--n-font-size": k,
"--n-icon-color": Ie,
"--n-bezier": x,
"--n-close-margin": Me,
"--n-icon-margin": Te,
"--n-icon-size": Oe,
"--n-close-size": Fe,
"--n-close-icon-size": we,
"--n-close-border-radius": b,
"--n-close-color-hover": i,
"--n-close-color-pressed": d,
"--n-close-icon-color": B,
"--n-close-icon-color-hover": $,
"--n-close-icon-color-pressed": ke,
"--n-color": S,
"--n-text-color": f,
"--n-border-radius": Se,
"--n-padding": Re,
"--n-line-height": y,
"--n-border": s,
"--n-content-margin": ze,
"--n-title-font-size": Pe,
"--n-title-font-weight": Be,
"--n-title-text-color": p,
"--n-action-space": $e
};
}), C = t ? ve("dialog", O(() => `${e.type[0]}${u.value[0]}`), v, e) : void 0;
return {
mergedClsPrefix: n,
mergedIconPlacement: u,
mergedTheme: h,
handlePositiveClick: r,
handleNegativeClick: l,
handleCloseClick: m,
cssVars: t ? void 0 : v,
themeClass: C == null ? void 0 : C.themeClass,
onRender: C == null ? void 0 : C.onRender
};
},
render() {
var e;
const { bordered: o, mergedIconPlacement: n, cssVars: t, closable: u, showIcon: r, title: l, content: m, action: h, negativeText: v, positiveText: C, positiveButtonProps: c, negativeButtonProps: g, handlePositiveClick: x, handleNegativeClick: k, mergedTheme: y, loading: s, type: p, mergedClsPrefix: f } = this;
(e = this.onRender) === null || e === void 0 || e.call(this);
const S = r ? a(Ye, { clsPrefix: f, class: `${f}-dialog__icon` }, {
default: () => ee(this.$slots.icon, (i) => i || (this.icon ? z(this.icon) : $o[this.type]()))
}) : null, b = ee(this.$slots.action, (i) => i || C || v || h ? a("div", { class: `${f}-dialog__action` }, i || (h ? [z(h)] : [
this.negativeText && a(A, Object.assign({ theme: y.peers.Button, themeOverrides: y.peerOverrides.Button, ghost: !0, size: "small", onClick: k }, g), {
default: () => z(this.negativeText)
}),
this.positiveText && a(A, Object.assign({ theme: y.peers.Button, themeOverrides: y.peerOverrides.Button, size: "small", type: p === "default" ? "primary" : p, disabled: s, loading: s, onClick: x }, c), {
default: () => z(this.positiveText)
})
])) : null);
return a(
"div",
{ class: [
`${f}-dialog`,
this.themeClass,
this.closable && `${f}-dialog--closable`,
`${f}-dialog--icon-${n}`,
o && `${f}-dialog--bordered`
], style: t, role: "dialog" },
u ? a(He, { clsPrefix: f, class: `${f}-dialog__close`, onClick: this.handleCloseClick }) : null,
r && n === "top" ? a("div", { class: `${f}-dialog-icon-container` }, S) : null,
a(
"div",
{ class: `${f}-dialog__title` },
r && n === "left" ? S : null,
oe(this.$slots.header, () => [z(l)])
),
a("div", { class: [
`${f}-dialog__content`,
b ? "" : `${f}-dialog__content--last`
] }, oe(this.$slots.default, () => [z(m)])),
b
);
}
}), Fo = Ae("n-dialog-provider"), To = (e) => {
const { modalColor: o, textColor2: n, boxShadow3: t } = e;
return {
color: o,
textColor: n,
boxShadow: t
};
}, Mo = he({
name: "Modal",
common: ge,
peers: {
Scrollbar: eo,
Dialog: xe,
Card: _e
},
self: To
}), Io = Mo, Y = Object.assign(Object.assign({}, Ve), X), Eo = me(Y), Lo = E({
name: "ModalBody",
inheritAttrs: !1,
props: Object.assign(Object.assign({ show: {
type: Boolean,
required: !0
}, preset: String, displayDirective: {
type: String,
required: !0
}, trapFocus: {
type: Boolean,
default: !0
}, autoFocus: {
type: Boolean,
default: !0
}, blockScroll: Boolean }, Y), {
renderMask: Function,
// events
onClickoutside: Function,
onBeforeLeave: {
type: Function,
required: !0
},
onAfterLeave: {
type: Function,
required: !0
},
onPositiveClick: {
type: Function,
required: !0
},
onNegativeClick: {
type: Function,
required: !0
},
onClose: {
type: Function,
required: !0
},
onAfterEnter: Function,
onEsc: Function
}),
setup(e) {
const o = P(null), n = P(null), t = P(e.show), u = P(null), r = P(null);
_(V(e, "show"), (s) => {
s && (t.value = !0);
}), ko(O(() => e.blockScroll && t.value));
const l = fe(ye);
function m() {
if (l.transformOriginRef.value === "center")
return "";
const { value: s } = u, { value: p } = r;
if (s === null || p === null)
return "";
if (n.value) {
const f = n.value.containerScrollTop;
return `${s}px ${p + f}px`;
}
return "";
}
function h(s) {
if (l.transformOriginRef.value === "center")
return;
const p = l.getMousePosition();
if (!p || !n.value)
return;
const f = n.value.containerScrollTop, { offsetLeft: S, offsetTop: b } = s;
if (p) {
const i = p.y, d = p.x;
u.value = -(S - d), r.value = -(b - i - f);
}
s.style.transformOrigin = m();
}
function v(s) {
Q(() => {
h(s);
});
}
function C(s) {
s.style.transformOrigin = m(), e.onBeforeLeave();
}
function c() {
t.value = !1, u.value = null, r.value = null, e.onAfterLeave();
}
function g() {
const { onClose: s } = e;
s && s();
}
function x() {
e.onNegativeClick();
}
function k() {
e.onPositiveClick();
}
const y = P(null);
return _(y, (s) => {
s && Q(() => {
const p = s.el;
p && o.value !== p && (o.value = p);
});
}), j(oo, o), j(to, null), j(no, null), {
mergedTheme: l.mergedThemeRef,
appear: l.appearRef,
isMounted: l.isMountedRef,
mergedClsPrefix: l.mergedClsPrefixRef,
bodyRef: o,
scrollbarRef: n,
displayed: t,
childNodeRef: y,
handlePositiveClick: k,
handleNegativeClick: x,
handleCloseClick: g,
handleAfterLeave: c,
handleBeforeLeave: C,
handleEnter: v
};
},
render() {
const { $slots: e, $attrs: o, handleEnter: n, handleAfterLeave: t, handleBeforeLeave: u, preset: r, mergedClsPrefix: l } = this;
let m = null;
if (!r) {
if (m = io(e), !m) {
De("modal", "default slot is empty");
return;
}
m = Ne(m), m.props = je({
class: `${l}-modal`
}, o, m.props || {});
}
return this.displayDirective === "show" || this.displayed || this.show ? W(a(
"div",
{ role: "none", class: `${l}-modal-body-wrapper` },
a(ro, { ref: "scrollbarRef", theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar, contentClass: `${l}-modal-scroll-content` }, {
default: () => {
var h;
return [
(h = this.renderMask) === null || h === void 0 ? void 0 : h.call(this),
a(ao, { disabled: !this.trapFocus, active: this.show, onEsc: this.onEsc, autoFocus: this.autoFocus }, {
default: () => {
var v;
return a(pe, { name: "fade-in-scale-up-transition", appear: (v = this.appear) !== null && v !== void 0 ? v : this.isMounted, onEnter: n, onAfterEnter: this.onAfterEnter, onAfterLeave: t, onBeforeLeave: u }, {
default: () => {
const C = [
[Z, this.show]
], { onClickoutside: c } = this;
return c && C.push([
po,
this.onClickoutside,
void 0,
{ capture: !0 }
]), W(this.preset === "confirm" || this.preset === "dialog" ? a(zo, Object.assign({}, this.$attrs, { class: [
`${l}-modal`,
this.$attrs.class
], ref: "bodyRef", theme: this.mergedTheme.peers.Dialog, themeOverrides: this.mergedTheme.peerOverrides.Dialog }, K(this.$props, Ro), { "aria-modal": "true" }), e) : this.preset === "card" ? a(We, Object.assign({}, this.$attrs, { ref: "bodyRef", class: [
`${l}-modal`,
this.$attrs.class
], theme: this.mergedTheme.peers.Card, themeOverrides: this.mergedTheme.peerOverrides.Card }, K(this.$props, Ue), { "aria-modal": "true", role: "dialog" }), e) : this.childNodeRef = m, C);
}
});
}
})
];
}
})
), [
[
Z,
this.displayDirective === "if" || this.displayed || this.show
]
]) : null;
}
}), No = U([R("modal-container", `
position: fixed;
left: 0;
top: 0;
height: 0;
width: 0;
display: flex;
`), R("modal-mask", `
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .4);
`, [lo({
enterDuration: ".25s",
leaveDuration: ".25s",
enterCubicBezier: "var(--n-bezier-ease-out)",
leaveCubicBezier: "var(--n-bezier-ease-out)"
})]), R("modal-body-wrapper", `
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: visible;
`, [R("modal-scroll-content", `
min-height: 100%;
display: flex;
position: relative;
`)]), R("modal", `
position: relative;
align-self: center;
color: var(--n-text-color);
margin: auto;
box-shadow: var(--n-box-shadow);
`, [so({
duration: ".25s",
enterScale: ".5"
})])]), jo = Object.assign(Object.assign(Object.assign(Object.assign({}, T.props), { show: Boolean, unstableShowMask: {
type: Boolean,
default: !0
}, maskClosable: {
type: Boolean,
default: !0
}, preset: String, to: [String, Object], displayDirective: {
type: String,
default: "if"
}, transformOrigin: {
type: String,
default: "mouse"
}, zIndex: Number, autoFocus: {
type: Boolean,
default: !0
}, trapFocus: {
type: Boolean,
default: !0
}, closeOnEsc: {
type: Boolean,
default: !0
}, blockScroll: { type: Boolean, default: !0 } }), Y), {
// events
onEsc: Function,
"onUpdate:show": [Function, Array],
onUpdateShow: [Function, Array],
onAfterEnter: Function,
onBeforeLeave: Function,
onAfterLeave: Function,
onClose: Function,
onPositiveClick: Function,
onNegativeClick: Function,
onMaskClick: Function,
// private
internalDialog: Boolean,
internalAppear: {
type: Boolean,
default: void 0
},
// deprecated
overlayStyle: [String, Object],
onBeforeHide: Function,
onAfterHide: Function,
onHide: Function
}), Ao = E({
name: "Modal",
inheritAttrs: !1,
props: jo,
setup(e) {
process.env.NODE_ENV !== "production" && (e.onHide && L("modal", "`on-hide` is deprecated."), e.onAfterHide && L("modal", "`on-after-hide` is deprecated, please use `on-after-leave` instead."), e.onBeforeHide && L("modal", "`on-before-hide` is deprecated, please use `on-before-leave` instead."), e.overlayStyle && L("modal", "`overlay-style` is deprecated, please use `style` instead."));
const o = P(null), { mergedClsPrefixRef: n, namespaceRef: t, inlineThemeDisabled: u } = G(e), r = T("Modal", "-modal", No, Io, e, n), l = mo(64), m = ho(), h = go(), v = e.internalDialog ? fe(Fo, null) : null, C = wo();
function c(i) {
const { onUpdateShow: d, "onUpdate:show": B, onHide: $ } = e;
d && N(d, i), B && N(B, i), $ && !i && $(i);
}
function g() {
const { onClose: i } = e;
i ? Promise.resolve(i()).then((d) => {
d !== !1 && c(!1);
}) : c(!1);
}
function x() {
const { onPositiveClick: i } = e;
i ? Promise.resolve(i()).then((d) => {
d !== !1 && c(!1);
}) : c(!1);
}
function k() {
const { onNegativeClick: i } = e;
i ? Promise.resolve(i()).then((d) => {
d !== !1 && c(!1);
}) : c(!1);
}
function y() {
const { onBeforeLeave: i, onBeforeHide: d } = e;
i && N(i), d && d();
}
function s() {
const { onAfterLeave: i, onAfterHide: d } = e;
i && N(i), d && d();
}
function p(i) {
var d;
const { onMaskClick: B } = e;
B && B(i), e.maskClosable && !((d = o.value) === null || d === void 0) && d.contains(fo(i)) && c(!1);
}
function f(i) {
var d;
(d = e.onEsc) === null || d === void 0 || d.call(e), e.show && e.closeOnEsc && xo(i) && !C.value && c(!1);
}
j(ye, {
getMousePosition: () => {
if (v) {
const { clickedRef: i, clickPositionRef: d } = v;
if (i.value && d.value)
return d.value;
}
return l.value ? m.value : null;
},
mergedClsPrefixRef: n,
mergedThemeRef: r,
isMountedRef: h,
appearRef: V(e, "internalAppear"),
transformOriginRef: V(e, "transformOrigin")
});
const S = O(() => {
const { common: { cubicBezierEaseOut: i }, self: { boxShadow: d, color: B, textColor: $ } } = r.value;
return {
"--n-bezier-ease-out": i,
"--n-box-shadow": d,
"--n-color": B,
"--n-text-color": $
};
}), b = u ? ve("theme-class", void 0, S, e) : void 0;
return {
mergedClsPrefix: n,
namespace: t,
isMounted: h,
containerRef: o,
presetProps: O(() => K(e, Eo)),
handleEsc: f,
handleAfterLeave: s,
handleClickoutside: p,
handleBeforeLeave: y,
doUpdateShow: c,
handleNegativeClick: k,
handlePositiveClick: x,
handleCloseClick: g,
cssVars: u ? void 0 : S,
themeClass: b == null ? void 0 : b.themeClass,
onRender: b == null ? void 0 : b.onRender
};
},
render() {
const { mergedClsPrefix: e } = this;
return a(co, { to: this.to, show: this.show }, {
default: () => {
var o;
(o = this.onRender) === null || o === void 0 || o.call(this);
const { unstableShowMask: n } = this;
return W(a(
"div",
{ role: "none", ref: "containerRef", class: [
`${e}-modal-container`,
this.themeClass,
this.namespace
], style: this.cssVars },
a(Lo, Object.assign({ style: this.overlayStyle }, this.$attrs, { ref: "bodyWrapper", displayDirective: this.displayDirective, show: this.show, preset: this.preset, autoFocus: this.autoFocus, trapFocus: this.trapFocus, blockScroll: this.blockScroll }, this.presetProps, { onEsc: this.handleEsc, onClose: this.handleCloseClick, onNegativeClick: this.handleNegativeClick, onPositiveClick: this.handlePositiveClick, onBeforeLeave: this.handleBeforeLeave, onAfterEnter: this.onAfterEnter, onAfterLeave: this.handleAfterLeave, onClickoutside: n ? void 0 : this.handleClickoutside, renderMask: n ? () => {
var t;
return a(pe, { name: "fade-in-transition", key: "mask", appear: (t = this.internalAppear) !== null && t !== void 0 ? t : this.isMounted }, {
default: () => this.show ? a("div", { "aria-hidden": !0, ref: "containerRef", class: `${e}-modal-mask`, onClick: this.handleClickoutside }) : null
});
} : void 0 }), this.$slots)
), [
[
uo,
{
zIndex: this.zIndex,
enabled: this.show
}
]
]);
}
});
}
}), Do = {
gapSmall: "4px 8px",
gapMedium: "8px 12px",
gapLarge: "12px 16px"
}, Ho = () => Do, _o = {
name: "Space",
self: Ho
}, Vo = _o;
let H;
const Wo = () => {
if (!Ce)
return !0;
if (H === void 0) {
const e = document.createElement("div");
e.style.display = "flex", e.style.flexDirection = "column", e.style.rowGap = "1px", e.appendChild(document.createElement("div")), e.appendChild(document.createElement("div")), document.body.appendChild(e);
const o = e.scrollHeight === 1;
return document.body.removeChild(e), H = o;
}
return H;
}, Uo = Object.assign(Object.assign({}, T.props), {
align: String,
justify: {
type: String,
default: "start"
},
inline: Boolean,
vertical: Boolean,
size: {
type: [String, Number, Array],
default: "medium"
},
wrapItem: {
type: Boolean,
default: !0
},
itemStyle: [String, Object],
wrap: {
type: Boolean,
default: !0
},
// internal
internalUseGap: {
type: Boolean,
default: void 0
}
}), Ko = E({
name: "Space",
props: Uo,
setup(e) {
const { mergedClsPrefixRef: o, mergedRtlRef: n } = G(e), t = T("Space", "-space", void 0, Vo, e, o), u = qe("Space", n, o);
return {
useGap: Wo(),
rtlEnabled: u,
mergedClsPrefix: o,
margin: O(() => {
const { size: r } = e;
if (Array.isArray(r))
return {
horizontal: r[0],
vertical: r[1]
};
if (typeof r == "number")
return {
horizontal: r,
vertical: r
};
const { self: { [be("gap", r)]: l } } = t.value, { row: m, col: h } = vo(l);
return {
horizontal: ne(h),
vertical: ne(m)
};
})
};
},
render() {
const { vertical: e, align: o, inline: n, justify: t, itemStyle: u, margin: r, wrap: l, mergedClsPrefix: m, rtlEnabled: h, useGap: v, wrapItem: C, internalUseGap: c } = this, g = Co(bo(this));
if (!g.length)
return null;
const x = `${r.horizontal}px`, k = `${r.horizontal / 2}px`, y = `${r.vertical}px`, s = `${r.vertical / 2}px`, p = g.length - 1, f = t.startsWith("space-");
return a("div", { role: "none", class: [
`${m}-space`,
h && `${m}-space--rtl`
], style: {
display: n ? "inline-flex" : "flex",
flexDirection: e ? "column" : "row",
justifyContent: ["start", "end"].includes(t) ? "flex-" + t : t,
flexWrap: !l || e ? "nowrap" : "wrap",
marginTop: v || e ? "" : `-${s}`,
marginBottom: v || e ? "" : `-${s}`,
alignItems: o,
gap: v ? `${r.vertical}px ${r.horizontal}px` : ""
} }, !C && (v || c) ? g : g.map((S, b) => a("div", { role: "none", style: [
u,
{
maxWidth: "100%"
},
v ? "" : e ? {
marginBottom: b !== p ? y : ""
} : h ? {
marginLeft: f ? t === "space-between" && b === p ? "" : k : b !== p ? x : "",
marginRight: f ? t === "space-between" && b === 0 ? "" : k : "",
paddingTop: s,
paddingBottom: s
} : {
marginRight: f ? t === "space-between" && b === p ? "" : k : b !== p ? x : "",
marginLeft: f ? t === "space-between" && b === 0 ? "" : k : "",
paddingTop: s,
paddingBottom: s
}
] }, S)));
}
}), St = E({
props: {
record: {
type: Object,
default: () => ({})
}
},
emits: ["ok", "close", "update:modelValue"],
setup(e, { attrs: o, slots: n, emit: t }) {
return () => {
var v;
const u = {
...e.record,
...o,
title: ((v = e.record) == null ? void 0 : v.label) ?? "",
class: "epic-modal-n",
preset: "card",
show: o.modelValue,
"onUpdate:show": h
}, r = u.children ?? [];
delete u.children;
let l = null;
r.length ? l = () => r.map(
(C) => D(n, "node", { record: C })
) : l = () => [D(n, "default")];
function m() {
t("ok");
}
function h() {
t("update:modelValue", !1), t("close");
}
return a(Ao, u, {
default: () => [
a(
"div",
{ class: "epic-modal-main" },
D(n, "edit-node", {}, l)
),
a(
"div",
{ class: "epic-modal-footer" },
a(
Ko,
{ justify: "end" },
{
default: () => [
a(
A,
{ onClick: h },
{
default: () => "关闭"
}
),
a(
A,
{ type: "primary", onClick: m },
{
default: () => u.okText ?? "确定"
}
)
]
}
)
)
]
});
};
}
});
export {
St as default
};