epic-designer-gold
Version:
基于vue3的设计器,可视化开发页面表单
673 lines (672 loc) • 24.9 kB
JavaScript
import { c as k } from "./_commonjsHelpers-BVfed4GL.js";
import { a as ye, b as Oe, c as Se, d as lt, r as it, e as at, f as rt } from "./index-B2_JTx7E.js";
import { s as Y, a as Z, b as ot, c as st, _ as ut, r as ct, d as dt } from "./index-kOCEDlqX.js";
import { r as ft } from "./_vue_commonjs-external-NwvjgbHK.js";
import { f as ht } from "./fade-in-scale-up.cssr-JG1L7qTi.js";
import { u as vt } from "./utils-BM69FtWE.js";
function mt(u, p) {
for (var v = 0; v < p.length; v++) {
const h = p[v];
if (typeof h != "string" && !Array.isArray(h)) {
for (const b in h)
if (b !== "default" && !(b in u)) {
const m = Object.getOwnPropertyDescriptor(h, b);
m && Object.defineProperty(u, b, m.get ? m : {
enumerable: !0,
get: () => h[b]
});
}
}
}
return Object.freeze(Object.defineProperty(u, Symbol.toStringTag, { value: "Module" }));
}
var Me = {}, we = {}, Fe = {}, ee = {}, z = {};
Object.defineProperty(z, "__esModule", { value: !0 });
z.self = Te;
const gt = Y, pt = Z, bt = ye, _t = Oe;
function Te(u) {
const { boxShadow2: p } = u;
return {
menuBoxShadow: p
};
}
const yt = (0, bt.createTheme)({
name: "Select",
common: _t.commonLight,
peers: {
InternalSelection: pt.internalSelectionLight,
InternalSelectMenu: gt.internalSelectMenuLight
},
self: Te
});
z.default = yt;
Object.defineProperty(ee, "__esModule", { value: !0 });
const Ot = Y, St = Z, Mt = Oe, wt = z, Ft = {
name: "Select",
common: Mt.commonDark,
peers: {
InternalSelection: St.internalSelectionDark,
InternalSelectMenu: Ot.internalSelectMenuDark
},
self: wt.self
};
ee.default = Ft;
var q = {};
Object.defineProperty(q, "__esModule", { value: !0 });
q.selectRtl = void 0;
const Tt = st, Pt = Y, Ct = Z, Rt = Se, Bt = ot;
q.selectRtl = {
name: "Select",
style: (0, Rt.c)([]),
peers: [Ct.internalSelectionRtl, Pt.internalSelectMenuRtl, Bt.tagRtl, Tt.scrollbarRtl]
};
(function(u) {
var p = k && k.__importDefault || function(m) {
return m && m.__esModule ? m : { default: m };
};
Object.defineProperty(u, "__esModule", { value: !0 }), u.selectRtl = u.selectLight = u.selectDark = void 0;
var v = ee;
Object.defineProperty(u, "selectDark", { enumerable: !0, get: function() {
return p(v).default;
} });
var h = z;
Object.defineProperty(u, "selectLight", { enumerable: !0, get: function() {
return p(h).default;
} });
var b = q;
Object.defineProperty(u, "selectRtl", { enumerable: !0, get: function() {
return b.selectRtl;
} });
})(Fe);
var te = {};
Object.defineProperty(te, "__esModule", {
value: !0
});
const kt = ht, X = Se;
te.default = (0, X.c)([(0, X.cB)("select", `
z-index: auto;
outline: none;
width: 100%;
position: relative;
font-weight: var(--n-font-weight);
`), (0, X.cB)("select-menu", `
margin: 4px 0;
box-shadow: var(--n-menu-box-shadow);
`, [(0, kt.fadeInScaleUpTransition)({
originalTransition: "background-color .3s var(--n-bezier), box-shadow .3s var(--n-bezier)"
})])]);
(function(u) {
var p = k && k.__importDefault || function(t) {
return t && t.__esModule ? t : { default: t };
};
Object.defineProperty(u, "__esModule", { value: !0 }), u.selectProps = void 0;
const v = rt, h = dt, b = ct, m = at, a = ft, K = it, ne = ut, T = ye, d = lt, Pe = Fe, Ce = p(te), P = vt;
u.selectProps = Object.assign(Object.assign({}, T.useTheme.props), {
to: d.useAdjustedTo.propTo,
bordered: {
type: Boolean,
default: void 0
},
clearable: Boolean,
clearCreatedOptionsOnClear: {
type: Boolean,
default: !0
},
clearFilterAfterSelect: {
type: Boolean,
default: !0
},
options: {
type: Array,
default: () => []
},
defaultValue: {
type: [String, Number, Array],
default: null
},
keyboard: {
type: Boolean,
default: !0
},
value: [String, Number, Array],
placeholder: String,
menuProps: Object,
multiple: Boolean,
size: String,
menuSize: {
type: String
},
filterable: Boolean,
disabled: {
type: Boolean,
default: void 0
},
remote: Boolean,
loading: Boolean,
filter: Function,
placement: {
type: String,
default: "bottom-start"
},
widthMode: {
type: String,
default: "trigger"
},
tag: Boolean,
onCreate: Function,
fallbackOption: {
type: [Function, Boolean],
default: void 0
},
show: {
type: Boolean,
default: void 0
},
showArrow: {
type: Boolean,
default: !0
},
maxTagCount: [Number, String],
ellipsisTagPopoverProps: Object,
consistentMenuWidth: {
type: Boolean,
default: !0
},
virtualScroll: {
type: Boolean,
default: !0
},
labelField: {
type: String,
default: "label"
},
valueField: {
type: String,
default: "value"
},
childrenField: {
type: String,
default: "children"
},
renderLabel: Function,
renderOption: Function,
renderTag: Function,
"onUpdate:value": [Function, Array],
inputProps: Object,
nodeProps: Function,
ignoreComposition: { type: Boolean, default: !0 },
showOnFocus: Boolean,
// for jsx
onUpdateValue: [Function, Array],
onBlur: [Function, Array],
onClear: [Function, Array],
onFocus: [Function, Array],
onScroll: [Function, Array],
onSearch: [Function, Array],
onUpdateShow: [Function, Array],
"onUpdate:show": [Function, Array],
displayDirective: {
type: String,
default: "show"
},
resetMenuOnOptionsChange: {
type: Boolean,
default: !0
},
status: String,
showCheckmark: {
type: Boolean,
default: !0
},
scrollbarProps: Object,
/** deprecated */
onChange: [Function, Array],
items: Array
}), u.default = (0, a.defineComponent)({
name: "Select",
props: u.selectProps,
slots: Object,
setup(t) {
process.env.NODE_ENV !== "production" && (0, a.watchEffect)(() => {
t.items !== void 0 && (0, d.warnOnce)("select", "`items` is deprecated, please use `options` instead."), t.onChange !== void 0 && (0, d.warnOnce)("select", "`on-change` is deprecated, please use `on-update:value` instead.");
});
const { mergedClsPrefixRef: _, mergedBorderedRef: A, namespaceRef: y, inlineThemeDisabled: f, mergedComponentPropsRef: G } = (0, T.useConfig)(t), le = (0, T.useTheme)("Select", "-select", Ce.default, Pe.selectLight, t, _), H = (0, a.ref)(t.defaultValue), Re = (0, a.toRef)(t, "value"), I = (0, m.useMergedState)(Re, H), D = (0, a.ref)(!1), C = (0, a.ref)(""), J = (0, m.useCompitable)(t, ["items", "options"]), O = (0, a.ref)([]), w = (0, a.ref)([]), ie = (0, a.computed)(() => w.value.concat(O.value).concat(J.value)), Be = (0, a.computed)(() => {
const { filter: e } = t;
if (e)
return e;
const { labelField: n, valueField: l } = t;
return (o, i) => {
if (!i)
return !1;
const r = i[n];
if (typeof r == "string")
return (0, P.patternMatched)(o, r);
const s = i[l];
return typeof s == "string" ? (0, P.patternMatched)(o, s) : typeof s == "number" ? (0, P.patternMatched)(o, String(s)) : !1;
};
}), ke = (0, a.computed)(() => {
if (t.remote)
return J.value;
{
const { value: e } = ie, { value: n } = C;
return !n.length || !t.filterable ? e : (0, P.filterOptions)(e, Be.value, n, t.childrenField);
}
}), Ae = (0, a.computed)(() => {
const { valueField: e, childrenField: n } = t, l = (0, P.createTmOptions)(e, n);
return (0, h.createTreeMate)(ke.value, l);
}), ae = (0, a.computed)(() => (0, P.createValOptMap)(ie.value, t.valueField, t.childrenField)), x = (0, a.ref)(!1), S = (0, m.useMergedState)((0, a.toRef)(t, "show"), x), g = (0, a.ref)(null), re = (0, a.ref)(null), j = (0, a.ref)(null), { localeRef: Ie } = (0, T.useLocale)("Select"), De = (0, a.computed)(() => {
var e;
return (e = t.placeholder) !== null && e !== void 0 ? e : Ie.value.placeholder;
}), R = [], $ = (0, a.ref)(/* @__PURE__ */ new Map()), oe = (0, a.computed)(() => {
const { fallbackOption: e } = t;
if (e === void 0) {
const { labelField: n, valueField: l } = t;
return (o) => ({
[n]: String(o),
[l]: o
});
}
return e === !1 ? !1 : (n) => Object.assign(e(n), {
value: n
});
});
function Q(e) {
const n = t.remote, { value: l } = $, { value: o } = ae, { value: i } = oe, r = [];
return e.forEach((s) => {
if (o.has(s))
r.push(o.get(s));
else if (n && l.has(s))
r.push(l.get(s));
else if (i) {
const c = i(s);
c && r.push(c);
}
}), r;
}
const se = (0, a.computed)(() => {
if (t.multiple) {
const { value: e } = I;
return Array.isArray(e) ? Q(e) : [];
}
return null;
}), ue = (0, a.computed)(() => {
const { value: e } = I;
return !t.multiple && !Array.isArray(e) ? e === null ? null : Q([e])[0] || null : null;
}), L = (0, T.useFormItem)(t, {
mergedSize: (e) => {
var n, l;
const { size: o } = t;
if (o)
return o;
const { mergedSize: i } = e || {};
if (i != null && i.value)
return i.value;
const r = (l = (n = G == null ? void 0 : G.value) === null || n === void 0 ? void 0 : n.Select) === null || l === void 0 ? void 0 : l.size;
return r || "medium";
}
}), { mergedSizeRef: je, mergedDisabledRef: U, mergedStatusRef: Ve } = L;
function N(e, n) {
const { onChange: l, "onUpdate:value": o, onUpdateValue: i } = t, { nTriggerFormChange: r, nTriggerFormInput: s } = L;
l && (0, d.call)(l, e, n), i && (0, d.call)(i, e, n), o && (0, d.call)(o, e, n), H.value = e, r(), s();
}
function ce(e) {
const { onBlur: n } = t, { nTriggerFormBlur: l } = L;
n && (0, d.call)(n, e), l();
}
function ze() {
const { onClear: e } = t;
e && (0, d.call)(e);
}
function xe(e) {
const { onFocus: n, showOnFocus: l } = t, { nTriggerFormFocus: o } = L;
n && (0, d.call)(n, e), o(), l && V();
}
function $e(e) {
const { onSearch: n } = t;
n && (0, d.call)(n, e);
}
function Le(e) {
const { onScroll: n } = t;
n && (0, d.call)(n, e);
}
function de() {
var e;
const { remote: n, multiple: l } = t;
if (n) {
const { value: o } = $;
if (l) {
const { valueField: i } = t;
(e = se.value) === null || e === void 0 || e.forEach((r) => {
o.set(r[i], r);
});
} else {
const i = ue.value;
i && o.set(i[t.valueField], i);
}
}
}
function fe(e) {
const { onUpdateShow: n, "onUpdate:show": l } = t;
n && (0, d.call)(n, e), l && (0, d.call)(l, e), x.value = e;
}
function V() {
U.value || (fe(!0), x.value = !0, t.filterable && be());
}
function M() {
fe(!1);
}
function he() {
C.value = "", w.value = R;
}
const E = (0, a.ref)(!1);
function Ue() {
t.filterable && (E.value = !0);
}
function Ne() {
t.filterable && (E.value = !1, S.value || he());
}
function Ee() {
U.value || (S.value ? t.filterable ? be() : M() : V());
}
function We(e) {
var n, l;
!((l = (n = j.value) === null || n === void 0 ? void 0 : n.selfRef) === null || l === void 0) && l.contains(e.relatedTarget) || (D.value = !1, ce(e), M());
}
function qe(e) {
xe(e), D.value = !0;
}
function Ke() {
D.value = !0;
}
function Ge(e) {
var n;
!((n = g.value) === null || n === void 0) && n.$el.contains(e.relatedTarget) || (D.value = !1, ce(e), M());
}
function He() {
var e;
(e = g.value) === null || e === void 0 || e.focus(), M();
}
function Je(e) {
var n;
S.value && (!((n = g.value) === null || n === void 0) && n.$el.contains((0, v.getPreciseEventTarget)(e)) || M());
}
function Qe(e) {
if (!Array.isArray(e))
return [];
if (oe.value)
return Array.from(e);
{
const { remote: n } = t, { value: l } = ae;
if (n) {
const { value: o } = $;
return e.filter((i) => l.has(i) || o.has(i));
} else
return e.filter((o) => l.has(o));
}
}
function ve(e) {
W(e.rawNode);
}
function W(e) {
if (U.value)
return;
const { tag: n, remote: l, clearFilterAfterSelect: o, valueField: i } = t;
if (n && !l) {
const { value: r } = w, s = r[0] || null;
if (s) {
const c = O.value;
c.length ? c.push(s) : O.value = [s], w.value = R;
}
}
if (l && $.value.set(e[i], e), t.multiple) {
const r = Qe(I.value), s = r.findIndex((c) => c === e[i]);
if (~s) {
if (r.splice(s, 1), n && !l) {
const c = me(e[i]);
~c && (O.value.splice(c, 1), o && (C.value = ""));
}
} else
r.push(e[i]), o && (C.value = "");
N(r, Q(r));
} else {
if (n && !l) {
const r = me(e[i]);
~r ? O.value = [
O.value[r]
] : O.value = R;
}
pe(), M(), N(e[i], e);
}
}
function me(e) {
return O.value.findIndex((l) => l[t.valueField] === e);
}
function Xe(e) {
S.value || V();
const { value: n } = e.target;
C.value = n;
const { tag: l, remote: o } = t;
if ($e(n), l && !o) {
if (!n) {
w.value = R;
return;
}
const { onCreate: i } = t, r = i ? i(n) : { [t.labelField]: n, [t.valueField]: n }, { valueField: s, labelField: c } = t;
J.value.some((F) => F[s] === r[s] || F[c] === r[c]) || O.value.some((F) => F[s] === r[s] || F[c] === r[c]) ? w.value = R : w.value = [r];
}
}
function Ye(e) {
e.stopPropagation();
const { multiple: n, tag: l, remote: o, clearCreatedOptionsOnClear: i } = t;
!n && t.filterable && M(), l && !o && i && (O.value = R), ze(), n ? N([], []) : N(null, null);
}
function Ze(e) {
!(0, v.happensIn)(e, "action") && !(0, v.happensIn)(e, "empty") && !(0, v.happensIn)(e, "header") && e.preventDefault();
}
function et(e) {
Le(e);
}
function ge(e) {
var n, l, o, i, r;
if (!t.keyboard) {
e.preventDefault();
return;
}
switch (e.key) {
case " ":
if (t.filterable)
break;
e.preventDefault();
case "Enter":
if (!(!((n = g.value) === null || n === void 0) && n.isComposing)) {
if (S.value) {
const s = (l = j.value) === null || l === void 0 ? void 0 : l.getPendingTmNode();
s ? ve(s) : t.filterable || (M(), pe());
} else if (V(), t.tag && E.value) {
const s = w.value[0];
if (s) {
const c = s[t.valueField], { value: F } = I;
t.multiple && Array.isArray(F) && F.includes(c) || W(s);
}
}
}
e.preventDefault();
break;
case "ArrowUp":
if (e.preventDefault(), t.loading)
return;
S.value && ((o = j.value) === null || o === void 0 || o.prev());
break;
case "ArrowDown":
if (e.preventDefault(), t.loading)
return;
S.value ? (i = j.value) === null || i === void 0 || i.next() : V();
break;
case "Escape":
S.value && ((0, d.markEventEffectPerformed)(e), M()), (r = g.value) === null || r === void 0 || r.focus();
break;
}
}
function pe() {
var e;
(e = g.value) === null || e === void 0 || e.focus();
}
function be() {
var e;
(e = g.value) === null || e === void 0 || e.focusInput();
}
function tt() {
var e;
S.value && ((e = re.value) === null || e === void 0 || e.syncPosition());
}
de(), (0, a.watch)((0, a.toRef)(t, "options"), de);
const nt = {
focus: () => {
var e;
(e = g.value) === null || e === void 0 || e.focus();
},
focusInput: () => {
var e;
(e = g.value) === null || e === void 0 || e.focusInput();
},
blur: () => {
var e;
(e = g.value) === null || e === void 0 || e.blur();
},
blurInput: () => {
var e;
(e = g.value) === null || e === void 0 || e.blurInput();
}
}, _e = (0, a.computed)(() => {
const { self: { menuBoxShadow: e } } = le.value;
return {
"--n-menu-box-shadow": e
};
}), B = f ? (0, T.useThemeClass)("select", void 0, _e, t) : void 0;
return Object.assign(Object.assign({}, nt), {
mergedStatus: Ve,
mergedClsPrefix: _,
mergedBordered: A,
namespace: y,
treeMate: Ae,
isMounted: (0, m.useIsMounted)(),
triggerRef: g,
menuRef: j,
pattern: C,
uncontrolledShow: x,
mergedShow: S,
adjustedTo: (0, d.useAdjustedTo)(t),
uncontrolledValue: H,
mergedValue: I,
followerRef: re,
localizedPlaceholder: De,
selectedOption: ue,
selectedOptions: se,
mergedSize: je,
mergedDisabled: U,
focused: D,
activeWithoutMenuOpen: E,
inlineThemeDisabled: f,
onTriggerInputFocus: Ue,
onTriggerInputBlur: Ne,
handleTriggerOrMenuResize: tt,
handleMenuFocus: Ke,
handleMenuBlur: Ge,
handleMenuTabOut: He,
handleTriggerClick: Ee,
handleToggle: ve,
handleDeleteOption: W,
handlePatternInput: Xe,
handleClear: Ye,
handleTriggerBlur: We,
handleTriggerFocus: qe,
handleKeydown: ge,
handleMenuAfterLeave: he,
handleMenuClickOutside: Je,
handleMenuScroll: et,
handleMenuKeydown: ge,
handleMenuMousedown: Ze,
mergedTheme: le,
cssVars: f ? void 0 : _e,
themeClass: B == null ? void 0 : B.themeClass,
onRender: B == null ? void 0 : B.onRender
});
},
render() {
return (0, a.h)(
"div",
{ class: `${this.mergedClsPrefix}-select` },
(0, a.h)(K.VBinder, null, {
default: () => [
(0, a.h)(K.VTarget, null, {
default: () => (0, a.h)(ne.NInternalSelection, { ref: "triggerRef", inlineThemeDisabled: this.inlineThemeDisabled, status: this.mergedStatus, inputProps: this.inputProps, clsPrefix: this.mergedClsPrefix, showArrow: this.showArrow, maxTagCount: this.maxTagCount, ellipsisTagPopoverProps: this.ellipsisTagPopoverProps, bordered: this.mergedBordered, active: this.activeWithoutMenuOpen || this.mergedShow, pattern: this.pattern, placeholder: this.localizedPlaceholder, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, multiple: this.multiple, renderTag: this.renderTag, renderLabel: this.renderLabel, filterable: this.filterable, clearable: this.clearable, disabled: this.mergedDisabled, size: this.mergedSize, theme: this.mergedTheme.peers.InternalSelection, labelField: this.labelField, valueField: this.valueField, themeOverrides: this.mergedTheme.peerOverrides.InternalSelection, loading: this.loading, focused: this.focused, onClick: this.handleTriggerClick, onDeleteOption: this.handleDeleteOption, onPatternInput: this.handlePatternInput, onClear: this.handleClear, onBlur: this.handleTriggerBlur, onFocus: this.handleTriggerFocus, onKeydown: this.handleKeydown, onPatternBlur: this.onTriggerInputBlur, onPatternFocus: this.onTriggerInputFocus, onResize: this.handleTriggerOrMenuResize, ignoreComposition: this.ignoreComposition }, {
arrow: () => {
var t, _;
return [(_ = (t = this.$slots).arrow) === null || _ === void 0 ? void 0 : _.call(t)];
}
})
}),
(0, a.h)(K.VFollower, { ref: "followerRef", show: this.mergedShow, to: this.adjustedTo, teleportDisabled: this.adjustedTo === d.useAdjustedTo.tdkey, containerClass: this.namespace, width: this.consistentMenuWidth ? "target" : void 0, minWidth: "target", placement: this.placement }, {
default: () => (0, a.h)(a.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, onAfterLeave: this.handleMenuAfterLeave }, {
default: () => {
var t, _, A;
return this.mergedShow || this.displayDirective === "show" ? ((t = this.onRender) === null || t === void 0 || t.call(this), (0, a.withDirectives)((0, a.h)(ne.NInternalSelectMenu, Object.assign({}, this.menuProps, { ref: "menuRef", onResize: this.handleTriggerOrMenuResize, inlineThemeDisabled: this.inlineThemeDisabled, virtualScroll: this.consistentMenuWidth && this.virtualScroll, class: [
`${this.mergedClsPrefix}-select-menu`,
this.themeClass,
(_ = this.menuProps) === null || _ === void 0 ? void 0 : _.class
], clsPrefix: this.mergedClsPrefix, focusable: !0, labelField: this.labelField, valueField: this.valueField, autoPending: !0, nodeProps: this.nodeProps, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides.InternalSelectMenu, treeMate: this.treeMate, multiple: this.multiple, size: this.menuSize, renderOption: this.renderOption, renderLabel: this.renderLabel, value: this.mergedValue, style: [(A = this.menuProps) === null || A === void 0 ? void 0 : A.style, this.cssVars], onToggle: this.handleToggle, onScroll: this.handleMenuScroll, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeydown: this.handleMenuKeydown, onTabOut: this.handleMenuTabOut, onMousedown: this.handleMenuMousedown, show: this.mergedShow, showCheckmark: this.showCheckmark, resetMenuOnOptionsChange: this.resetMenuOnOptionsChange, scrollbarProps: this.scrollbarProps }), {
empty: () => {
var y, f;
return [(f = (y = this.$slots).empty) === null || f === void 0 ? void 0 : f.call(y)];
},
header: () => {
var y, f;
return [(f = (y = this.$slots).header) === null || f === void 0 ? void 0 : f.call(y)];
},
action: () => {
var y, f;
return [(f = (y = this.$slots).action) === null || f === void 0 ? void 0 : f.call(y)];
}
}), this.displayDirective === "show" ? [
[a.vShow, this.mergedShow],
[
b.clickoutside,
this.handleMenuClickOutside,
void 0,
{ capture: !0 }
]
] : [
[
b.clickoutside,
this.handleMenuClickOutside,
void 0,
{ capture: !0 }
]
])) : null;
}
})
})
]
})
);
}
});
})(we);
(function(u) {
var p = k && k.__importDefault || function(h) {
return h && h.__esModule ? h : { default: h };
};
Object.defineProperty(u, "__esModule", { value: !0 }), u.selectProps = u.NSelect = void 0;
var v = we;
Object.defineProperty(u, "NSelect", { enumerable: !0, get: function() {
return p(v).default;
} }), Object.defineProperty(u, "selectProps", { enumerable: !0, get: function() {
return v.selectProps;
} });
})(Me);
const xt = /* @__PURE__ */ mt({
__proto__: null
}, [Me]);
export {
xt as i
};