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