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