@coderlt/form-designer
Version:
基于vue3的设计器,可视化开发页面表单
1,100 lines (1,099 loc) • 40.5 kB
JavaScript
import { c as h } from "./_commonjsHelpers-c5d32002.js";
import { r as N } from "./_vue_commonjs-external-eb7fec7f.js";
import { c as ke, a as ae, _ as x, d as fe, f as Ye, e as Se, g as Xe, b as Je } from "./index-6a6913ea.js";
import { r as Qe } from "./index-9a3bff09.js";
import { l as je } from "./lodash-915646fb.js";
function Ue(e, n) {
for (var f = 0; f < n.length; f++) {
const o = n[f];
if (typeof o != "string" && !Array.isArray(o)) {
for (const l in o)
if (l !== "default" && !(l in e)) {
const c = Object.getOwnPropertyDescriptor(o, l);
c && Object.defineProperty(e, l, c.get ? c : {
enumerable: !0,
get: () => o[l]
});
}
}
}
return Object.freeze(Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }));
}
var $e = {}, Me = {}, ce = {}, me = {}, ge = {}, be = {};
Object.defineProperty(be, "__esModule", { value: !0 });
be.default = {
feedbackPadding: "4px 0 0 2px",
feedbackHeightSmall: "24px",
feedbackHeightMedium: "24px",
feedbackHeightLarge: "26px",
feedbackFontSizeSmall: "13px",
feedbackFontSizeMedium: "14px",
feedbackFontSizeLarge: "14px",
labelFontSizeLeftSmall: "14px",
labelFontSizeLeftMedium: "14px",
labelFontSizeLeftLarge: "15px",
labelFontSizeTopSmall: "13px",
labelFontSizeTopMedium: "14px",
labelFontSizeTopLarge: "14px",
labelHeightSmall: "24px",
labelHeightMedium: "26px",
labelHeightLarge: "28px",
labelPaddingVertical: "0 0 6px 2px",
labelPaddingHorizontal: "0 12px 0 0",
labelTextAlignVertical: "left",
labelTextAlignHorizontal: "right",
labelFontWeight: "400"
};
(function(e) {
var n = h && h.__importDefault || function(u) {
return u && u.__esModule ? u : { default: u };
};
Object.defineProperty(e, "__esModule", { value: !0 }), e.self = void 0;
const f = ke, o = n(be), l = (u) => {
const { heightSmall: s, heightMedium: t, heightLarge: r, textColor1: a, errorColor: i, warningColor: d, lineHeight: m, textColor3: R } = u;
return Object.assign(Object.assign({}, o.default), { blankHeightSmall: s, blankHeightMedium: t, blankHeightLarge: r, lineHeight: m, labelTextColor: a, asteriskColor: i, feedbackTextColorError: i, feedbackTextColorWarning: d, feedbackTextColor: R });
};
e.self = l;
const c = {
name: "Form",
common: f.commonLight,
self: e.self
};
e.default = c;
})(ge);
Object.defineProperty(me, "__esModule", { value: !0 });
const Ze = ke, et = ge, tt = {
name: "Form",
common: Ze.commonDark,
self: et.self
};
me.default = tt;
(function(e) {
var n = h && h.__importDefault || function(l) {
return l && l.__esModule ? l : { default: l };
};
Object.defineProperty(e, "__esModule", { value: !0 }), e.formLight = e.formDark = void 0;
var f = me;
Object.defineProperty(e, "formDark", { enumerable: !0, get: function() {
return n(f).default;
} });
var o = ge;
Object.defineProperty(e, "formLight", { enumerable: !0, get: function() {
return n(o).default;
} });
})(ce);
var he = {};
Object.defineProperty(he, "__esModule", {
value: !0
});
const oe = ae;
he.default = (0, oe.cB)("form", [(0, oe.cM)("inline", `
width: 100%;
display: inline-flex;
align-items: flex-start;
align-content: space-around;
`, [(0, oe.cB)("form-item", {
width: "auto",
marginRight: "18px"
}, [(0, oe.c)("&:last-child", {
marginRight: 0
})])])]);
var V = {};
Object.defineProperty(V, "__esModule", { value: !0 });
V.formItemInstsInjectionKey = V.formInjectionKey = void 0;
const Oe = x;
V.formInjectionKey = (0, Oe.createInjectionKey)("n-form");
V.formItemInstsInjectionKey = (0, Oe.createInjectionKey)("n-form-item-insts");
(function(e) {
var n = h && h.__awaiter || function(r, a, i, d) {
function m(R) {
return R instanceof i ? R : new i(function(p) {
p(R);
});
}
return new (i || (i = Promise))(function(R, p) {
function b(I) {
try {
g(d.next(I));
} catch (P) {
p(P);
}
}
function _(I) {
try {
g(d.throw(I));
} catch (P) {
p(P);
}
}
function g(I) {
I.done ? R(I.value) : m(I.value).then(b, _);
}
g((d = d.apply(r, a || [])).next());
});
}, f = h && h.__importDefault || function(r) {
return r && r.__esModule ? r : { default: r };
};
Object.defineProperty(e, "__esModule", { value: !0 }), e.formProps = void 0;
const o = N, l = fe, c = ce, u = f(he), s = x, t = V;
e.formProps = Object.assign(Object.assign({}, l.useTheme.props), { inline: Boolean, labelWidth: [Number, String], labelAlign: String, labelPlacement: {
type: String,
default: "top"
}, model: {
type: Object,
default: () => {
}
}, rules: Object, disabled: Boolean, size: String, showRequireMark: {
type: Boolean,
default: void 0
}, requireMarkPlacement: String, showFeedback: {
type: Boolean,
default: !0
}, onSubmit: {
type: Function,
default: (r) => {
r.preventDefault();
}
}, showLabel: {
type: Boolean,
default: void 0
}, validateMessages: Object }), e.default = (0, o.defineComponent)({
name: "Form",
props: e.formProps,
setup(r) {
const { mergedClsPrefixRef: a } = (0, l.useConfig)(r);
(0, l.useTheme)("Form", "-form", u.default, c.formLight, r, a);
const i = {}, d = (0, o.ref)(void 0), m = (_) => {
const g = d.value;
(g === void 0 || _ >= g) && (d.value = _);
};
function R(_, g = () => !0) {
return n(this, void 0, void 0, function* () {
yield new Promise((I, P) => {
const L = [];
for (const K of (0, s.keysOf)(i)) {
const $ = i[K];
for (const k of $)
k.path && L.push(k.internalValidate(null, g));
}
Promise.all(L).then((K) => {
if (K.some(($) => !$.valid)) {
const $ = K.filter((k) => k.errors).map((k) => k.errors);
_ && _($), P($);
} else
_ && _(), I();
});
});
});
}
function p() {
for (const _ of (0, s.keysOf)(i)) {
const g = i[_];
for (const I of g)
I.restoreValidation();
}
}
return (0, o.provide)(t.formInjectionKey, {
props: r,
maxChildLabelWidthRef: d,
deriveMaxChildLabelWidth: m
}), (0, o.provide)(t.formItemInstsInjectionKey, { formItems: i }), Object.assign({
validate: R,
restoreValidation: p
}, {
mergedClsPrefix: a
});
},
render() {
const { mergedClsPrefix: r } = this;
return (0, o.h)("form", { class: [
`${r}-form`,
this.inline && `${r}-form--inline`
], onSubmit: this.onSubmit }, this.$slots);
}
});
})(Me);
var le = {}, B = {};
Object.defineProperty(B, "__esModule", { value: !0 });
B.formItemRule = B.formItemMisc = B.formItemSize = void 0;
const S = N, rt = je, pe = V, de = x;
function nt(e) {
const n = (0, S.inject)(pe.formInjectionKey, null);
return {
mergedSize: (0, S.computed)(() => e.size !== void 0 ? e.size : (n == null ? void 0 : n.props.size) !== void 0 ? n.props.size : "medium")
};
}
B.formItemSize = nt;
function ot(e) {
const n = (0, S.inject)(pe.formInjectionKey, null), f = (0, S.computed)(() => {
const { labelPlacement: m } = e;
return m !== void 0 ? m : n != null && n.props.labelPlacement ? n.props.labelPlacement : "top";
}), o = (0, S.computed)(() => f.value === "left" && (e.labelWidth === "auto" || (n == null ? void 0 : n.props.labelWidth) === "auto")), l = (0, S.computed)(() => {
if (f.value === "top")
return;
const { labelWidth: m } = e;
if (m !== void 0 && m !== "auto")
return (0, de.formatLength)(m);
if (o.value) {
const R = n == null ? void 0 : n.maxChildLabelWidthRef.value;
return R !== void 0 ? (0, de.formatLength)(R) : void 0;
}
if ((n == null ? void 0 : n.props.labelWidth) !== void 0)
return (0, de.formatLength)(n.props.labelWidth);
}), c = (0, S.computed)(() => {
const { labelAlign: m } = e;
if (m)
return m;
if (n != null && n.props.labelAlign)
return n.props.labelAlign;
}), u = (0, S.computed)(() => {
var m;
return [
(m = e.labelProps) === null || m === void 0 ? void 0 : m.style,
e.labelStyle,
{
width: l.value
}
];
}), s = (0, S.computed)(() => {
const { showRequireMark: m } = e;
return m !== void 0 ? m : n == null ? void 0 : n.props.showRequireMark;
}), t = (0, S.computed)(() => {
const { requireMarkPlacement: m } = e;
return m !== void 0 ? m : (n == null ? void 0 : n.props.requireMarkPlacement) || "right";
}), r = (0, S.ref)(!1), a = (0, S.computed)(() => {
const { validationStatus: m } = e;
if (m !== void 0)
return m;
if (r.value)
return "error";
}), i = (0, S.computed)(() => {
const { showFeedback: m } = e;
return m !== void 0 ? m : (n == null ? void 0 : n.props.showFeedback) !== void 0 ? n.props.showFeedback : !0;
}), d = (0, S.computed)(() => {
const { showLabel: m } = e;
return m !== void 0 ? m : (n == null ? void 0 : n.props.showLabel) !== void 0 ? n.props.showLabel : !0;
});
return {
validationErrored: r,
mergedLabelStyle: u,
mergedLabelPlacement: f,
mergedLabelAlign: c,
mergedShowRequireMark: s,
mergedRequireMarkPlacement: t,
mergedValidationStatus: a,
mergedShowFeedback: i,
mergedShowLabel: d,
isAutoLabelWidth: o
};
}
B.formItemMisc = ot;
function it(e) {
const n = (0, S.inject)(pe.formInjectionKey, null), f = (0, S.computed)(() => {
const { rulePath: u } = e;
if (u !== void 0)
return u;
const { path: s } = e;
if (s !== void 0)
return s;
}), o = (0, S.computed)(() => {
const u = [], { rule: s } = e;
if (s !== void 0 && (Array.isArray(s) ? u.push(...s) : u.push(s)), n) {
const { rules: t } = n.props, { value: r } = f;
if (t !== void 0 && r !== void 0) {
const a = (0, rt.get)(t, r);
a !== void 0 && (Array.isArray(a) ? u.push(...a) : u.push(a));
}
}
return u;
}), l = (0, S.computed)(() => o.value.some((u) => u.required)), c = (0, S.computed)(() => l.value || e.required);
return {
mergedRules: o,
mergedRequired: c
};
}
B.formItemRule = it;
var ve = {}, se = {}, at = h && h.__importDefault || function(e) {
return e && e.__esModule ? e : {
default: e
};
};
Object.defineProperty(se, "__esModule", {
value: !0
});
se.fadeDownTransition = void 0;
const ie = ae, lt = at(Ye), {
cubicBezierEaseInOut: Re
} = lt.default;
function st({
name: e = "fade-down",
fromOffset: n = "-4px",
enterDuration: f = ".3s",
leaveDuration: o = ".3s",
enterCubicBezier: l = Re,
leaveCubicBezier: c = Re
} = {}) {
return [(0, ie.c)(`&.${e}-transition-enter-from, &.${e}-transition-leave-to`, {
opacity: 0,
transform: `translateY(${n})`
}), (0, ie.c)(`&.${e}-transition-enter-to, &.${e}-transition-leave-from`, {
opacity: 1,
transform: "translateY(0)"
}), (0, ie.c)(`&.${e}-transition-leave-active`, {
transition: `opacity ${o} ${c}, transform ${o} ${c}`
}), (0, ie.c)(`&.${e}-transition-enter-active`, {
transition: `opacity ${f} ${l}, transform ${f} ${l}`
})];
}
se.fadeDownTransition = st;
Object.defineProperty(ve, "__esModule", {
value: !0
});
const y = ae, ut = se;
ve.default = (0, y.cB)("form-item", `
display: grid;
line-height: var(--n-line-height);
`, [(0, y.cB)("form-item-label", `
grid-area: label;
align-items: center;
line-height: 1.25;
text-align: var(--n-label-text-align);
font-size: var(--n-label-font-size);
min-height: var(--n-label-height);
padding: var(--n-label-padding);
color: var(--n-label-text-color);
transition: color .3s var(--n-bezier);
box-sizing: border-box;
font-weight: var(--n-label-font-weight);
`, [(0, y.cE)("asterisk", `
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
color: var(--n-asterisk-color);
transition: color .3s var(--n-bezier);
`), (0, y.cE)("asterisk-placeholder", `
grid-area: mark;
user-select: none;
-webkit-user-select: none;
visibility: hidden;
`)]), (0, y.cB)("form-item-blank", `
grid-area: blank;
min-height: var(--n-blank-height);
`), (0, y.cM)("auto-label-width", [(0, y.cB)("form-item-label", "white-space: nowrap;")]), (0, y.cM)("left-labelled", `
grid-template-areas:
"label blank"
"label feedback";
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto 1fr;
align-items: start;
`, [(0, y.cB)("form-item-label", `
display: grid;
grid-template-columns: 1fr auto;
min-height: var(--n-blank-height);
height: auto;
box-sizing: border-box;
flex-shrink: 0;
flex-grow: 0;
`, [(0, y.cM)("reverse-columns-space", `
grid-template-columns: auto 1fr;
`), (0, y.cM)("left-mark", `
grid-template-areas:
"mark text"
". text";
`), (0, y.cM)("right-mark", `
grid-template-areas:
"text mark"
"text .";
`), (0, y.cM)("right-hanging-mark", `
grid-template-areas:
"text mark"
"text .";
`), (0, y.cE)("text", `
grid-area: text;
`), (0, y.cE)("asterisk", `
grid-area: mark;
align-self: end;
`)])]), (0, y.cM)("top-labelled", `
grid-template-areas:
"label"
"blank"
"feedback";
grid-template-rows: minmax(var(--n-label-height), auto) 1fr;
grid-template-columns: minmax(0, 100%);
`, [(0, y.cM)("no-label", `
grid-template-areas:
"blank"
"feedback";
grid-template-rows: 1fr;
`), (0, y.cB)("form-item-label", `
display: flex;
align-items: flex-start;
justify-content: var(--n-label-text-align);
`)]), (0, y.cB)("form-item-blank", `
box-sizing: border-box;
display: flex;
align-items: center;
position: relative;
`), (0, y.cB)("form-item-feedback-wrapper", `
grid-area: feedback;
box-sizing: border-box;
min-height: var(--n-feedback-height);
font-size: var(--n-feedback-font-size);
line-height: 1.25;
transform-origin: top left;
`, [(0, y.c)("&:not(:empty)", `
padding: var(--n-feedback-padding);
`), (0, y.cB)("form-item-feedback", {
transition: "color .3s var(--n-bezier)",
color: "var(--n-feedback-text-color)"
}, [(0, y.cM)("warning", {
color: "var(--n-feedback-text-color-warning)"
}), (0, y.cM)("error", {
color: "var(--n-feedback-text-color-error)"
}), (0, ut.fadeDownTransition)({
fromOffset: "-3px",
enterDuration: ".3s",
leaveDuration: ".2s"
})])])]);
(function(e) {
var n = h && h.__awaiter || function(p, b, _, g) {
function I(P) {
return P instanceof _ ? P : new _(function(L) {
L(P);
});
}
return new (_ || (_ = Promise))(function(P, L) {
function K(j) {
try {
k(g.next(j));
} catch (M) {
L(M);
}
}
function $(j) {
try {
k(g.throw(j));
} catch (M) {
L(M);
}
}
function k(j) {
j.done ? P(j.value) : I(j.value).then(K, $);
}
k((g = g.apply(p, b || [])).next());
});
}, f = h && h.__importDefault || function(p) {
return p && p.__esModule ? p : { default: p };
};
Object.defineProperty(e, "__esModule", { value: !0 }), e.formItemPropKeys = e.formItemProps = void 0;
const o = N, l = f(Qe), c = je, u = Se, s = Xe, t = fe, r = x, a = ce, i = B, d = V, m = f(ve);
e.formItemProps = Object.assign(Object.assign({}, t.useTheme.props), { label: String, labelWidth: [Number, String], labelStyle: [String, Object], labelAlign: String, labelPlacement: String, path: String, first: Boolean, rulePath: String, required: Boolean, showRequireMark: {
type: Boolean,
default: void 0
}, requireMarkPlacement: String, showFeedback: {
type: Boolean,
default: void 0
}, rule: [Object, Array], size: String, ignorePathChange: Boolean, validationStatus: String, feedback: String, showLabel: {
type: Boolean,
default: void 0
}, labelProps: Object }), e.formItemPropKeys = (0, r.keysOf)(e.formItemProps);
function R(p, b) {
return (..._) => {
try {
const g = p(..._);
return !b && (typeof g == "boolean" || g instanceof Error || Array.isArray(g)) || // Error[]
g != null && g.then ? g : (g === void 0 || (0, r.warn)("form-item/validate", `You return a ${typeof g} typed value in the validator method, which is not recommended. Please use ` + (b ? "`Promise`" : "`boolean`, `Error` or `Promise`") + " typed value instead."), !0);
} catch (g) {
(0, r.warn)("form-item/validate", "An error is catched in the validation, so the validation won't be done. Your callback in `validate` method of `n-form` or `n-form-item` won't be called in this validation."), console.error(g);
return;
}
};
}
e.default = (0, o.defineComponent)({
name: "FormItem",
props: e.formItemProps,
setup(p) {
(0, r.useInjectionInstanceCollection)(d.formItemInstsInjectionKey, "formItems", (0, o.toRef)(p, "path"));
const { mergedClsPrefixRef: b, inlineThemeDisabled: _ } = (0, t.useConfig)(p), g = (0, o.inject)(d.formInjectionKey, null), I = (0, i.formItemSize)(p), P = (0, i.formItemMisc)(p), { validationErrored: L } = P, { mergedRequired: K, mergedRules: $ } = (0, i.formItemRule)(p), { mergedSize: k } = I, { mergedLabelPlacement: j, mergedLabelAlign: M, mergedRequireMarkPlacement: E } = P, Z = (0, o.ref)([]), ee = (0, o.ref)((0, u.createId)()), xe = g ? (0, o.toRef)(g.props, "disabled") : (0, o.ref)(!1), Ke = (0, t.useTheme)("Form", "-form-item", m.default, a.formLight, p, b);
(0, o.watch)((0, o.toRef)(p, "path"), () => {
p.ignorePathChange || te();
});
function te() {
Z.value = [], L.value = !1, p.feedback && (ee.value = (0, u.createId)());
}
function Ae() {
W("blur");
}
function De() {
W("change");
}
function Ne() {
W("focus");
}
function Ge() {
W("input");
}
function Be(v, z) {
return n(this, void 0, void 0, function* () {
let F, O, T, Y;
typeof v == "string" ? (F = v, O = z) : v !== null && typeof v == "object" && (F = v.trigger, O = v.callback, T = v.shouldRuleBeApplied, Y = v.options), yield new Promise((X, J) => {
W(F, T, Y).then(({ valid: Q, errors: q }) => {
Q ? (O && O(), X()) : (O && O(q), J(q));
});
});
});
}
const W = (v = null, z = () => !0, F = {
suppressWarning: !0
}) => n(this, void 0, void 0, function* () {
const { path: O } = p;
F ? F.first || (F.first = p.first) : F = {};
const { value: T } = $, Y = g ? (0, c.get)(g.props.model, O || "") : void 0, X = {}, J = {}, Q = (v ? T.filter((A) => Array.isArray(A.trigger) ? A.trigger.includes(v) : A.trigger === v) : T).filter(z).map((A, D) => {
const w = Object.assign({}, A);
if (w.validator && (w.validator = R(w.validator, !1)), w.asyncValidator && (w.asyncValidator = R(w.asyncValidator, !0)), w.renderMessage) {
const C = `__renderMessage__${D}`;
J[C] = w.message, w.message = C, X[C] = w.renderMessage;
}
return w;
});
if (!Q.length)
return {
valid: !0
};
const q = O ?? "__n_no_path__", re = new l.default({ [q]: Q }), { validateMessages: ne } = (g == null ? void 0 : g.props) || {};
return ne && re.messages(ne), yield new Promise((A) => {
re.validate({ [q]: Y }, F, (D) => {
D != null && D.length ? (Z.value = D.map((w) => {
const C = (w == null ? void 0 : w.message) || "";
return {
key: C,
render: () => C.startsWith("__renderMessage__") ? X[C]() : C
};
}), D.forEach((w) => {
var C;
!((C = w.message) === null || C === void 0) && C.startsWith("__renderMessage__") && (w.message = J[w.message]);
}), L.value = !0, A({
valid: !1,
errors: D
})) : (te(), A({
valid: !0
}));
});
});
});
(0, o.provide)(s.formItemInjectionKey, {
path: (0, o.toRef)(p, "path"),
disabled: xe,
mergedSize: I.mergedSize,
mergedValidationStatus: P.mergedValidationStatus,
restoreValidation: te,
handleContentBlur: Ae,
handleContentChange: De,
handleContentFocus: Ne,
handleContentInput: Ge
});
const Ve = {
validate: Be,
restoreValidation: te,
internalValidate: W
}, Pe = (0, o.ref)(null);
(0, o.onMounted)(() => {
if (!P.isAutoLabelWidth.value)
return;
const v = Pe.value;
if (v !== null) {
const z = v.style.whiteSpace;
v.style.whiteSpace = "nowrap", v.style.width = "", g == null || g.deriveMaxChildLabelWidth(Number(getComputedStyle(v).width.slice(0, -2))), v.style.whiteSpace = z;
}
});
const we = (0, o.computed)(() => {
var v;
const { value: z } = k, { value: F } = j, O = F === "top" ? "vertical" : "horizontal", { common: { cubicBezierEaseInOut: T }, self: { labelTextColor: Y, asteriskColor: X, lineHeight: J, feedbackTextColor: Q, feedbackTextColorWarning: q, feedbackTextColorError: re, feedbackPadding: ne, labelFontWeight: A, [(0, r.createKey)("labelHeight", z)]: D, [(0, r.createKey)("blankHeight", z)]: w, [(0, r.createKey)("feedbackFontSize", z)]: C, [(0, r.createKey)("feedbackHeight", z)]: Te, [(0, r.createKey)("labelPadding", O)]: qe, [(0, r.createKey)("labelTextAlign", O)]: We, [(0, r.createKey)((0, r.createKey)("labelFontSize", F), z)]: He } } = Ke.value;
let ue = (v = M.value) !== null && v !== void 0 ? v : We;
return F === "top" && (ue = ue === "right" ? "flex-end" : "flex-start"), {
"--n-bezier": T,
"--n-line-height": J,
"--n-blank-height": w,
"--n-label-font-size": He,
"--n-label-text-align": ue,
"--n-label-height": D,
"--n-label-padding": qe,
"--n-label-font-weight": A,
"--n-asterisk-color": X,
"--n-label-text-color": Y,
"--n-feedback-padding": ne,
"--n-feedback-font-size": C,
"--n-feedback-height": Te,
"--n-feedback-text-color": Q,
"--n-feedback-text-color-warning": q,
"--n-feedback-text-color-error": re
};
}), H = _ ? (0, t.useThemeClass)("form-item", (0, o.computed)(() => {
var v;
return `${k.value[0]}${j.value[0]}${((v = M.value) === null || v === void 0 ? void 0 : v[0]) || ""}`;
}), we, p) : void 0, Ee = (0, o.computed)(() => j.value === "left" && E.value === "left" && M.value === "left");
return Object.assign(Object.assign(Object.assign(Object.assign({ labelElementRef: Pe, mergedClsPrefix: b, mergedRequired: K, feedbackId: ee, renderExplains: Z, reverseColSpace: Ee }, P), I), Ve), { cssVars: _ ? void 0 : we, themeClass: H == null ? void 0 : H.themeClass, onRender: H == null ? void 0 : H.onRender });
},
render() {
const { $slots: p, mergedClsPrefix: b, mergedShowLabel: _, mergedShowRequireMark: g, mergedRequireMarkPlacement: I, onRender: P } = this, L = g !== void 0 ? g : this.mergedRequired;
P == null || P();
const K = () => {
const $ = this.$slots.label ? this.$slots.label() : this.label;
if (!$)
return null;
const k = (0, o.h)("span", { class: `${b}-form-item-label__text` }, $), j = L ? (0, o.h)("span", { class: `${b}-form-item-label__asterisk` }, I !== "left" ? " *" : "* ") : I === "right-hanging" && (0, o.h)("span", { class: `${b}-form-item-label__asterisk-placeholder` }, " *"), { labelProps: M } = this;
return (0, o.h)("label", Object.assign({}, M, { class: [
M == null ? void 0 : M.class,
`${b}-form-item-label`,
`${b}-form-item-label--${I}-mark`,
this.reverseColSpace && `${b}-form-item-label--reverse-columns-space`
], style: this.mergedLabelStyle, ref: "labelElementRef" }), I === "left" ? [j, k] : [k, j]);
};
return (0, o.h)(
"div",
{ class: [
`${b}-form-item`,
this.themeClass,
`${b}-form-item--${this.mergedSize}-size`,
`${b}-form-item--${this.mergedLabelPlacement}-labelled`,
this.isAutoLabelWidth && `${b}-form-item--auto-label-width`,
!_ && `${b}-form-item--no-label`
], style: this.cssVars },
_ && K(),
(0, o.h)("div", { class: [
`${b}-form-item-blank`,
this.mergedValidationStatus && `${b}-form-item-blank--${this.mergedValidationStatus}`
] }, p),
this.mergedShowFeedback ? (0, o.h)(
"div",
{ key: this.feedbackId, class: `${b}-form-item-feedback-wrapper` },
(0, o.h)(o.Transition, { name: "fade-down-transition", mode: "out-in" }, {
default: () => {
const { mergedValidationStatus: $ } = this;
return (0, r.resolveWrappedSlot)(p.feedback, (k) => {
var j;
const { feedback: M } = this, E = k || M ? (0, o.h)("div", { key: "__feedback__", class: `${b}-form-item-feedback__line` }, k || M) : this.renderExplains.length ? (j = this.renderExplains) === null || j === void 0 ? void 0 : j.map(({ key: Z, render: ee }) => (0, o.h)("div", { key: Z, class: `${b}-form-item-feedback__line` }, ee())) : null;
return E ? $ === "warning" ? (0, o.h)("div", { key: "controlled-warning", class: `${b}-form-item-feedback ${b}-form-item-feedback--warning` }, E) : $ === "error" ? (0, o.h)("div", { key: "controlled-error", class: `${b}-form-item-feedback ${b}-form-item-feedback--error` }, E) : $ === "success" ? (0, o.h)("div", { key: "controlled-success", class: `${b}-form-item-feedback ${b}-form-item-feedback--success` }, E) : (0, o.h)("div", { key: "controlled-default", class: `${b}-form-item-feedback` }, E) : null;
});
}
})
) : null
);
}
});
})(le);
var Ce = {}, Fe = {}, U = {};
Object.defineProperty(U, "__esModule", { value: !0 });
U.gridInjectionKey = U.defaultSpan = void 0;
const dt = x;
U.defaultSpan = 1;
U.gridInjectionKey = (0, dt.createInjectionKey)("n-grid");
(function(e) {
Object.defineProperty(e, "__esModule", { value: !0 }), e.gridItemPropKeys = e.gridItemProps = e.defaultSpan = void 0;
const n = N, f = Se, o = x, l = U;
e.defaultSpan = 1, e.gridItemProps = {
span: {
type: [Number, String],
default: e.defaultSpan
},
offset: {
type: [Number, String],
default: 0
},
suffix: Boolean,
// private props
privateOffset: Number,
privateSpan: Number,
privateColStart: Number,
privateShow: {
type: Boolean,
default: !0
}
}, e.gridItemPropKeys = (0, o.keysOf)(e.gridItemProps), e.default = (0, n.defineComponent)({
__GRID_ITEM__: !0,
name: "GridItem",
alias: ["Gi"],
props: e.gridItemProps,
setup() {
const {
isSsrRef: c,
xGapRef: u,
itemStyleRef: s,
overflowRef: t,
layoutShiftDisabledRef: r
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
} = (0, n.inject)(l.gridInjectionKey), a = (0, n.getCurrentInstance)();
return {
overflow: t,
itemStyle: s,
layoutShiftDisabled: r,
mergedXGap: (0, n.computed)(() => (0, f.pxfy)(u.value || 0)),
deriveStyle: () => {
c.value;
const {
privateSpan: i = e.defaultSpan,
privateShow: d = !0,
privateColStart: m = void 0,
privateOffset: R = 0
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
} = a.vnode.props, { value: p } = u, b = (0, f.pxfy)(p || 0);
return {
display: d ? "" : "none",
gridColumn: `${m ?? `span ${i}`} / span ${i}`,
marginLeft: R ? `calc((100% - (${i} - 1) * ${b}) / ${i} * ${R} + ${b} * ${R})` : ""
};
}
};
},
render() {
var c, u;
if (this.layoutShiftDisabled) {
const { span: s, offset: t, mergedXGap: r } = this;
return (0, n.h)("div", { style: {
gridColumn: `span ${s} / span ${s}`,
marginLeft: t ? `calc((100% - (${s} - 1) * ${r}) / ${s} * ${t} + ${r} * ${t})` : ""
} }, this.$slots);
}
return (0, n.h)("div", { style: [this.itemStyle, this.deriveStyle()] }, (u = (c = this.$slots).default) === null || u === void 0 ? void 0 : u.call(c, { overflow: this.overflow }));
}
});
})(Fe);
(function(e) {
var n = h && h.__createBinding || (Object.create ? function(t, r, a, i) {
i === void 0 && (i = a);
var d = Object.getOwnPropertyDescriptor(r, a);
(!d || ("get" in d ? !r.__esModule : d.writable || d.configurable)) && (d = { enumerable: !0, get: function() {
return r[a];
} }), Object.defineProperty(t, i, d);
} : function(t, r, a, i) {
i === void 0 && (i = a), t[i] = r[a];
}), f = h && h.__setModuleDefault || (Object.create ? function(t, r) {
Object.defineProperty(t, "default", { enumerable: !0, value: r });
} : function(t, r) {
t.default = r;
}), o = h && h.__importStar || function(t) {
if (t && t.__esModule)
return t;
var r = {};
if (t != null)
for (var a in t)
a !== "default" && Object.prototype.hasOwnProperty.call(t, a) && n(r, t, a);
return f(r, t), r;
};
Object.defineProperty(e, "__esModule", { value: !0 }), e.formItemGiPropKeys = e.formItemGiProps = void 0;
const l = N, c = o(Fe), u = x, s = o(le);
e.formItemGiProps = Object.assign(Object.assign({}, c.gridItemProps), s.formItemProps), e.formItemGiPropKeys = (0, u.keysOf)(e.formItemGiProps), e.default = (0, l.defineComponent)({
__GRID_ITEM__: !0,
name: "FormItemGridItem",
alias: ["FormItemGi"],
props: e.formItemGiProps,
setup() {
const t = (0, l.ref)(null);
return {
formItemInstRef: t,
validate: (...i) => {
const { value: d } = t;
if (d)
return d.validate(...i);
},
restoreValidation: () => {
const { value: i } = t;
i && i.restoreValidation();
}
};
},
render() {
return (0, l.h)(c.default, (0, u.keep)(this.$.vnode.props || {}, c.gridItemPropKeys), {
default: () => {
const t = (0, u.keep)(this.$props, s.formItemPropKeys);
return (0, l.h)(s.default, Object.assign({ ref: "formItemInstRef" }, t), this.$slots);
}
});
}
});
})(Ce);
var _e = {}, Le = {}, ye = {}, Ie = {};
Object.defineProperty(Ie, "__esModule", {
value: !0
});
const G = ae, ft = Array.apply(null, {
length: 24
}).map((e, n) => {
const f = n + 1, o = `calc(100% / 24 * ${f})`;
return [(0, G.cM)(`${f}-span`, {
width: o
}), (0, G.cM)(`${f}-offset`, {
marginLeft: o
}), (0, G.cM)(`${f}-push`, {
left: o
}), (0, G.cM)(`${f}-pull`, {
right: o
})];
});
Ie.default = (0, G.c)([(0, G.cB)("row", {
width: "100%",
display: "flex",
flexWrap: "wrap"
}), (0, G.cB)("col", {
verticalAlign: "top",
boxSizing: "border-box",
display: "inline-block",
position: "relative",
zIndex: "auto"
}, [(0, G.cE)("box", {
position: "relative",
zIndex: "auto",
width: "100%",
height: "100%"
}), ft])]);
(function(e) {
var n = h && h.__importDefault || function(s) {
return s && s.__esModule ? s : { default: s };
};
Object.defineProperty(e, "__esModule", { value: !0 }), e.rowPropKeys = e.rowProps = e.rowInjectionKey = void 0;
const f = N, o = Je, l = x, c = fe, u = n(Ie);
e.rowInjectionKey = (0, l.createInjectionKey)("n-row"), e.rowProps = {
gutter: {
type: [Array, Number, String],
default: 0
},
alignItems: String,
justifyContent: String
}, e.rowPropKeys = (0, l.keysOf)(e.rowProps), e.default = (0, f.defineComponent)({
name: "Row",
props: e.rowProps,
setup(s) {
const { mergedClsPrefixRef: t, mergedRtlRef: r } = (0, c.useConfig)(s);
(0, c.useStyle)("-legacy-grid", u.default, t);
const a = (0, c.useRtl)("Row", r, t), i = (0, o.useMemo)(() => {
const { gutter: m } = s;
return Array.isArray(m) && m[1] || 0;
}), d = (0, o.useMemo)(() => {
const { gutter: m } = s;
return Array.isArray(m) ? m[0] : Number(m);
});
return (0, f.provide)(e.rowInjectionKey, {
mergedClsPrefixRef: t,
gutterRef: (0, f.toRef)(s, "gutter"),
verticalGutterRef: i,
horizontalGutterRef: d
}), {
mergedClsPrefix: t,
rtlEnabled: a,
styleMargin: (0, o.useMemo)(() => `-${(0, l.formatLength)(i.value, {
c: 0.5
})} -${(0, l.formatLength)(d.value, { c: 0.5 })}`),
styleWidth: (0, o.useMemo)(() => `calc(100% + ${(0, l.formatLength)(d.value)})`)
};
},
render() {
return (0, f.h)("div", { class: [
`${this.mergedClsPrefix}-row`,
this.rtlEnabled && `${this.mergedClsPrefix}-row--rtl`
], style: {
margin: this.styleMargin,
width: this.styleWidth,
alignItems: this.alignItems,
justifyContent: this.justifyContent
} }, this.$slots);
}
});
})(ye);
(function(e) {
Object.defineProperty(e, "__esModule", { value: !0 }), e.colPropKeys = e.colProps = void 0;
const n = N, f = x, o = ye;
e.colProps = {
span: {
type: [String, Number],
default: 1
},
push: {
type: [String, Number],
default: 0
},
pull: {
type: [String, Number],
default: 0
},
offset: {
type: [String, Number],
default: 0
}
}, e.colPropKeys = (0, f.keysOf)(e.colProps), e.default = (0, n.defineComponent)({
name: "Col",
props: e.colProps,
setup(l) {
const c = (0, n.inject)(o.rowInjectionKey, null);
return c || (0, f.throwError)("col", "`n-col` must be placed inside `n-row`."), {
mergedClsPrefix: c.mergedClsPrefixRef,
gutter: c.gutterRef,
stylePadding: (0, n.computed)(() => `${(0, f.formatLength)(c.verticalGutterRef.value, {
c: 0.5
})} ${(0, f.formatLength)(c.horizontalGutterRef.value, { c: 0.5 })}`),
mergedPush: (0, n.computed)(() => Number(l.push) - Number(l.pull))
};
},
render() {
const { $slots: l, span: c, mergedPush: u, offset: s, stylePadding: t, gutter: r, mergedClsPrefix: a } = this;
return (0, n.h)("div", { class: [
`${a}-col`,
{
[`${a}-col--${c}-span`]: !0,
[`${a}-col--${u}-push`]: u > 0,
[`${a}-col--${-u}-pull`]: u < 0,
[`${a}-col--${s}-offset`]: s
}
], style: {
padding: t
} }, r ? (0, n.h)("div", null, l) : l);
}
});
})(Le);
(function(e) {
var n = h && h.__createBinding || (Object.create ? function(t, r, a, i) {
i === void 0 && (i = a);
var d = Object.getOwnPropertyDescriptor(r, a);
(!d || ("get" in d ? !r.__esModule : d.writable || d.configurable)) && (d = { enumerable: !0, get: function() {
return r[a];
} }), Object.defineProperty(t, i, d);
} : function(t, r, a, i) {
i === void 0 && (i = a), t[i] = r[a];
}), f = h && h.__setModuleDefault || (Object.create ? function(t, r) {
Object.defineProperty(t, "default", { enumerable: !0, value: r });
} : function(t, r) {
t.default = r;
}), o = h && h.__importStar || function(t) {
if (t && t.__esModule)
return t;
var r = {};
if (t != null)
for (var a in t)
a !== "default" && Object.prototype.hasOwnProperty.call(t, a) && n(r, t, a);
return f(r, t), r;
};
Object.defineProperty(e, "__esModule", { value: !0 }), e.formItemColPropKeys = e.formItemColProps = void 0;
const l = N, c = o(Le), u = x, s = o(le);
e.formItemColProps = Object.assign(Object.assign({}, c.colProps), s.formItemProps), e.formItemColPropKeys = (0, u.keysOf)(e.formItemColProps), e.default = (0, l.defineComponent)({
name: "FormItemCol",
props: e.formItemColProps,
setup() {
const t = (0, l.ref)(null);
return {
formItemInstRef: t,
validate: (...i) => {
const { value: d } = t;
if (d)
return d.validate(...i);
},
restoreValidation: () => {
const { value: i } = t;
i && i.restoreValidation();
}
};
},
render() {
return (0, l.h)(c.default, (0, u.keep)(this.$props, c.colPropKeys), {
default: () => {
const t = (0, u.keep)(this.$props, s.formItemPropKeys);
return (0, l.h)(s.default, Object.assign({ ref: "formItemInstRef" }, t), this.$slots);
}
});
}
});
})(_e);
var ze = {};
(function(e) {
var n = h && h.__createBinding || (Object.create ? function(t, r, a, i) {
i === void 0 && (i = a);
var d = Object.getOwnPropertyDescriptor(r, a);
(!d || ("get" in d ? !r.__esModule : d.writable || d.configurable)) && (d = { enumerable: !0, get: function() {
return r[a];
} }), Object.defineProperty(t, i, d);
} : function(t, r, a, i) {
i === void 0 && (i = a), t[i] = r[a];
}), f = h && h.__setModuleDefault || (Object.create ? function(t, r) {
Object.defineProperty(t, "default", { enumerable: !0, value: r });
} : function(t, r) {
t.default = r;
}), o = h && h.__importStar || function(t) {
if (t && t.__esModule)
return t;
var r = {};
if (t != null)
for (var a in t)
a !== "default" && Object.prototype.hasOwnProperty.call(t, a) && n(r, t, a);
return f(r, t), r;
};
Object.defineProperty(e, "__esModule", { value: !0 }), e.formItemRowProps = void 0;
const l = N, c = o(ye), u = x, s = o(_e);
e.formItemRowProps = Object.assign(Object.assign({}, c.rowProps), s.formItemColProps), e.default = (0, l.defineComponent)({
name: "FormItemRow",
props: e.formItemRowProps,
setup() {
const t = (0, l.ref)(null);
return {
formItemColInstRef: t,
validate: (...i) => {
const { value: d } = t;
if (d)
return d.validate(...i);
},
restoreValidation: () => {
const { value: i } = t;
i && i.restoreValidation();
}
};
},
render() {
return (0, l.h)(c.default, (0, u.keep)(this.$props, c.rowPropKeys), {
default: () => {
const t = (0, u.keep)(this.$props, s.formItemColPropKeys);
return (0, l.h)(s.default, Object.assign(Object.assign({ ref: "formItemColInstRef" }, t), { span: 24 }), this.$slots);
}
});
}
});
})(ze);
(function(e) {
var n = h && h.__importDefault || function(s) {
return s && s.__esModule ? s : { default: s };
};
Object.defineProperty(e, "__esModule", { value: !0 }), e.NFormItemRow = e.NFormItemCol = e.formItemGridItemProps = e.formItemGiProps = e.NFormItemGi = e.NFormItemGridItem = e.formItemProps = e.NFormItem = e.formProps = e.NForm = void 0;
var f = Me;
Object.defineProperty(e, "NForm", { enumerable: !0, get: function() {
return n(f).default;
} }), Object.defineProperty(e, "formProps", { enumerable: !0, get: function() {
return f.formProps;
} });
var o = le;
Object.defineProperty(e, "NFormItem", { enumerable: !0, get: function() {
return n(o).default;
} }), Object.defineProperty(e, "formItemProps", { enumerable: !0, get: function() {
return o.formItemProps;
} });
var l = Ce;
Object.defineProperty(e, "NFormItemGridItem", { enumerable: !0, get: function() {
return n(l).default;
} }), Object.defineProperty(e, "NFormItemGi", { enumerable: !0, get: function() {
return n(l).default;
} }), Object.defineProperty(e, "formItemGiProps", { enumerable: !0, get: function() {
return l.formItemGiProps;
} }), Object.defineProperty(e, "formItemGridItemProps", { enumerable: !0, get: function() {
return l.formItemGiProps;
} });
var c = _e;
Object.defineProperty(e, "NFormItemCol", { enumerable: !0, get: function() {
return n(c).default;
} });
var u = ze;
Object.defineProperty(e, "NFormItemRow", { enumerable: !0, get: function() {
return n(u).default;
} });
})($e);
const vt = /* @__PURE__ */ Ue({
__proto__: null
}, [$e]);
export {
$e as f,
vt as i
};