epic-designer-gold
Version:
基于vue3的设计器,可视化开发页面表单
1,534 lines • 57.9 kB
JavaScript
import { c as E } from "./_commonjsHelpers-BVfed4GL.js";
import { i as $o, a as de, b as Je, f as Ae, c as Ce, d as we, r as Ao, e as Oo, u as jo, g as Wo } from "./index-B2_JTx7E.js";
import { r as fe } from "./_vue_commonjs-external-NwvjgbHK.js";
import { c as Qe, _ as Vo, e as ko } from "./index-kOCEDlqX.js";
function Lo(t, c) {
for (var b = 0; b < c.length; b++) {
const h = c[b];
if (typeof h != "string" && !Array.isArray(h)) {
for (const p in h)
if (p !== "default" && !(p in t)) {
const s = Object.getOwnPropertyDescriptor(h, p);
s && Object.defineProperty(t, p, s.get ? s : {
enumerable: !0,
get: () => h[p]
});
}
}
}
return Object.freeze(Object.defineProperty(t, Symbol.toStringTag, { value: "Module" }));
}
var Ze = {}, er = {}, rr = {};
(function(t) {
Object.defineProperty(t, "__esModule", { value: !0 }), t.isSafari = t.isFirefox = t.isChrome = void 0;
const c = $o;
t.isChrome = c.isBrowser && "chrome" in window, t.isFirefox = c.isBrowser && navigator.userAgent.includes("Firefox"), t.isSafari = c.isBrowser && navigator.userAgent.includes("Safari") && !t.isChrome;
})(rr);
var Oe = {}, je = {}, Se = {};
Object.defineProperty(Se, "__esModule", { value: !0 });
Se.default = {
paddingTiny: "0 8px",
paddingSmall: "0 10px",
paddingMedium: "0 12px",
paddingLarge: "0 14px",
clearSize: "16px"
};
var Ho = E && E.__importDefault || function(t) {
return t && t.__esModule ? t : { default: t };
};
Object.defineProperty(je, "__esModule", { value: !0 });
const te = Ae, Go = Qe, No = de, Ko = Je, Uo = Ho(Se);
function qo(t) {
const { textColor2: c, textColor3: b, textColorDisabled: h, primaryColor: p, primaryColorHover: s, inputColor: P, inputColorDisabled: u, warningColor: o, warningColorHover: I, errorColor: C, errorColorHover: D, borderRadius: M, lineHeight: V, fontSizeTiny: d, fontSizeSmall: j, fontSizeMedium: k, fontSizeLarge: L, heightTiny: W, heightSmall: T, heightMedium: q, heightLarge: i, clearColor: f, clearColorHover: w, clearColorPressed: x, placeholderColor: z, placeholderColorDisabled: H, iconColor: N, iconColorDisabled: l, iconColorHover: B, iconColorPressed: K, fontWeight: O } = t;
return Object.assign(Object.assign({}, Uo.default), {
fontWeight: O,
countTextColorDisabled: h,
countTextColor: b,
heightTiny: W,
heightSmall: T,
heightMedium: q,
heightLarge: i,
fontSizeTiny: d,
fontSizeSmall: j,
fontSizeMedium: k,
fontSizeLarge: L,
lineHeight: V,
lineHeightTextarea: V,
borderRadius: M,
iconSize: "16px",
groupLabelColor: P,
textColor: c,
textColorDisabled: h,
textDecorationColor: c,
groupLabelTextColor: c,
caretColor: p,
placeholderColor: z,
placeholderColorDisabled: H,
color: P,
colorDisabled: u,
colorFocus: (0, te.changeColor)(p, { alpha: 0.1 }),
groupLabelBorder: "1px solid #0000",
border: "1px solid #0000",
borderHover: `1px solid ${s}`,
borderDisabled: "1px solid #0000",
borderFocus: `1px solid ${s}`,
boxShadowFocus: `0 0 8px 0 ${(0, te.changeColor)(p, { alpha: 0.3 })}`,
loadingColor: p,
// warning
loadingColorWarning: o,
borderWarning: `1px solid ${o}`,
borderHoverWarning: `1px solid ${I}`,
colorFocusWarning: (0, te.changeColor)(o, { alpha: 0.1 }),
borderFocusWarning: `1px solid ${I}`,
boxShadowFocusWarning: `0 0 8px 0 ${(0, te.changeColor)(o, {
alpha: 0.3
})}`,
caretColorWarning: o,
// error
loadingColorError: C,
borderError: `1px solid ${C}`,
borderHoverError: `1px solid ${D}`,
colorFocusError: (0, te.changeColor)(C, { alpha: 0.1 }),
borderFocusError: `1px solid ${D}`,
boxShadowFocusError: `0 0 8px 0 ${(0, te.changeColor)(C, {
alpha: 0.3
})}`,
caretColorError: C,
clearColor: f,
clearColorHover: w,
clearColorPressed: x,
iconColor: N,
iconColorDisabled: l,
iconColorHover: B,
iconColorPressed: K,
suffixTextColor: c
});
}
const Xo = (0, No.createTheme)({
name: "Input",
common: Ko.commonDark,
peers: {
Scrollbar: Go.scrollbarDark
},
self: qo
});
je.default = Xo;
var We = {}, Yo = E && E.__importDefault || function(t) {
return t && t.__esModule ? t : { default: t };
};
Object.defineProperty(We, "__esModule", { value: !0 });
const $e = Ae, Jo = Qe, Qo = de, Zo = Je, et = Yo(Se);
function rt(t) {
const { textColor2: c, textColor3: b, textColorDisabled: h, primaryColor: p, primaryColorHover: s, inputColor: P, inputColorDisabled: u, borderColor: o, warningColor: I, warningColorHover: C, errorColor: D, errorColorHover: M, borderRadius: V, lineHeight: d, fontSizeTiny: j, fontSizeSmall: k, fontSizeMedium: L, fontSizeLarge: W, heightTiny: T, heightSmall: q, heightMedium: i, heightLarge: f, actionColor: w, clearColor: x, clearColorHover: z, clearColorPressed: H, placeholderColor: N, placeholderColorDisabled: l, iconColor: B, iconColorDisabled: K, iconColorHover: O, iconColorPressed: F, fontWeight: G } = t;
return Object.assign(Object.assign({}, et.default), {
fontWeight: G,
countTextColorDisabled: h,
countTextColor: b,
heightTiny: T,
heightSmall: q,
heightMedium: i,
heightLarge: f,
fontSizeTiny: j,
fontSizeSmall: k,
fontSizeMedium: L,
fontSizeLarge: W,
lineHeight: d,
lineHeightTextarea: d,
borderRadius: V,
iconSize: "16px",
groupLabelColor: w,
groupLabelTextColor: c,
textColor: c,
textColorDisabled: h,
textDecorationColor: c,
caretColor: p,
placeholderColor: N,
placeholderColorDisabled: l,
color: P,
colorDisabled: u,
colorFocus: P,
groupLabelBorder: `1px solid ${o}`,
border: `1px solid ${o}`,
borderHover: `1px solid ${s}`,
borderDisabled: `1px solid ${o}`,
borderFocus: `1px solid ${s}`,
boxShadowFocus: `0 0 0 2px ${(0, $e.changeColor)(p, { alpha: 0.2 })}`,
loadingColor: p,
// warning
loadingColorWarning: I,
borderWarning: `1px solid ${I}`,
borderHoverWarning: `1px solid ${C}`,
colorFocusWarning: P,
borderFocusWarning: `1px solid ${C}`,
boxShadowFocusWarning: `0 0 0 2px ${(0, $e.changeColor)(I, {
alpha: 0.2
})}`,
caretColorWarning: I,
// error
loadingColorError: D,
borderError: `1px solid ${D}`,
borderHoverError: `1px solid ${M}`,
colorFocusError: P,
borderFocusError: `1px solid ${M}`,
boxShadowFocusError: `0 0 0 2px ${(0, $e.changeColor)(D, {
alpha: 0.2
})}`,
caretColorError: D,
clearColor: x,
clearColorHover: z,
clearColorPressed: H,
iconColor: B,
iconColorDisabled: K,
iconColorHover: O,
iconColorPressed: F,
suffixTextColor: c
});
}
const ot = (0, Qo.createTheme)({
name: "Input",
common: Zo.commonLight,
peers: {
Scrollbar: Jo.scrollbarLight
},
self: rt
});
We.default = ot;
var Pe = {}, Ve = {};
Object.defineProperty(Ve, "__esModule", {
value: !0
});
const Z = Ce;
Ve.default = (0, Z.cB)("input", [(0, Z.cM)("rtl", `
direction: rtl;
`, [(0, Z.cE)("prefix", {
marginRight: 0,
marginLeft: "4px"
}), (0, Z.cE)("suffix", {
marginRight: "4px",
marginLeft: 0
}), (0, Z.cM)("textarea", "width: 100%;", [(0, Z.cB)("input-word-count", `
left: var(--n-padding-right);
right: unset;
`)]), (0, Z.cB)("input-word-count", `
margin-left: 0;
margin-right: 4px;
`)])]);
var tt = E && E.__importDefault || function(t) {
return t && t.__esModule ? t : { default: t };
};
Object.defineProperty(Pe, "__esModule", { value: !0 });
Pe.inputRtl = void 0;
const nt = tt(Ve);
Pe.inputRtl = {
name: "Input",
style: nt.default
};
(function(t) {
var c = E && E.__importDefault || function(s) {
return s && s.__esModule ? s : { default: s };
};
Object.defineProperty(t, "__esModule", { value: !0 }), t.inputRtl = t.inputLight = t.inputDark = void 0;
var b = je;
Object.defineProperty(t, "inputDark", { enumerable: !0, get: function() {
return c(b).default;
} });
var h = We;
Object.defineProperty(t, "inputLight", { enumerable: !0, get: function() {
return c(h).default;
} });
var p = Pe;
Object.defineProperty(t, "inputRtl", { enumerable: !0, get: function() {
return p.inputRtl;
} });
})(Oe);
var pe = {};
Object.defineProperty(pe, "__esModule", { value: !0 });
pe.inputInjectionKey = void 0;
const it = we;
pe.inputInjectionKey = (0, it.createInjectionKey)("n-input");
var he = {};
Object.defineProperty(he, "__esModule", {
value: !0
});
he.safariStyle = void 0;
const n = Ce;
he.default = (0, n.cB)("input", `
max-width: 100%;
cursor: text;
line-height: 1.5;
z-index: auto;
outline: none;
box-sizing: border-box;
position: relative;
display: inline-flex;
border-radius: var(--n-border-radius);
background-color: var(--n-color);
transition: background-color .3s var(--n-bezier);
font-size: var(--n-font-size);
font-weight: var(--n-font-weight);
--n-padding-vertical: calc((var(--n-height) - 1.5 * var(--n-font-size)) / 2);
`, [
// common
(0, n.cE)("input, textarea", `
overflow: hidden;
flex-grow: 1;
position: relative;
`),
(0, n.cE)("input-el, textarea-el, input-mirror, textarea-mirror, separator, placeholder", `
box-sizing: border-box;
font-size: inherit;
line-height: 1.5;
font-family: inherit;
border: none;
outline: none;
background-color: #0000;
text-align: inherit;
transition:
-webkit-text-fill-color .3s var(--n-bezier),
caret-color .3s var(--n-bezier),
color .3s var(--n-bezier),
text-decoration-color .3s var(--n-bezier);
`),
(0, n.cE)("input-el, textarea-el", `
-webkit-appearance: none;
scrollbar-width: none;
width: 100%;
min-width: 0;
text-decoration-color: var(--n-text-decoration-color);
color: var(--n-text-color);
caret-color: var(--n-caret-color);
background-color: transparent;
`, [(0, n.c)("&::-webkit-scrollbar, &::-webkit-scrollbar-track-piece, &::-webkit-scrollbar-thumb", `
width: 0;
height: 0;
display: none;
`), (0, n.c)("&::placeholder", `
color: #0000;
-webkit-text-fill-color: transparent !important;
`), (0, n.c)("&:-webkit-autofill ~", [(0, n.cE)("placeholder", "display: none;")])]),
(0, n.cM)("round", [(0, n.cNotM)("textarea", "border-radius: calc(var(--n-height) / 2);")]),
(0, n.cE)("placeholder", `
pointer-events: none;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
color: var(--n-placeholder-color);
`, [(0, n.c)("span", `
width: 100%;
display: inline-block;
`)]),
(0, n.cM)("textarea", [(0, n.cE)("placeholder", "overflow: visible;")]),
(0, n.cNotM)("autosize", "width: 100%;"),
(0, n.cM)("autosize", [(0, n.cE)("textarea-el, input-el", `
position: absolute;
top: 0;
left: 0;
height: 100%;
`)]),
// input
(0, n.cB)("input-wrapper", `
overflow: hidden;
display: inline-flex;
flex-grow: 1;
position: relative;
padding-left: var(--n-padding-left);
padding-right: var(--n-padding-right);
`),
(0, n.cE)("input-mirror", `
padding: 0;
height: var(--n-height);
line-height: var(--n-height);
overflow: hidden;
visibility: hidden;
position: static;
white-space: pre;
pointer-events: none;
`),
(0, n.cE)("input-el", `
padding: 0;
height: var(--n-height);
line-height: var(--n-height);
`, [(0, n.c)("&[type=password]::-ms-reveal", "display: none;"), (0, n.c)("+", [(0, n.cE)("placeholder", `
display: flex;
align-items: center;
`)])]),
(0, n.cNotM)("textarea", [(0, n.cE)("placeholder", "white-space: nowrap;")]),
(0, n.cE)("eye", `
display: flex;
align-items: center;
justify-content: center;
transition: color .3s var(--n-bezier);
`),
// textarea
(0, n.cM)("textarea", "width: 100%;", [(0, n.cB)("input-word-count", `
position: absolute;
right: var(--n-padding-right);
bottom: var(--n-padding-vertical);
`), (0, n.cM)("resizable", [(0, n.cB)("input-wrapper", `
resize: vertical;
min-height: var(--n-height);
`)]), (0, n.cE)("textarea-el, textarea-mirror, placeholder", `
height: 100%;
padding-left: 0;
padding-right: 0;
padding-top: var(--n-padding-vertical);
padding-bottom: var(--n-padding-vertical);
word-break: break-word;
display: inline-block;
vertical-align: bottom;
box-sizing: border-box;
line-height: var(--n-line-height-textarea);
margin: 0;
resize: none;
white-space: pre-wrap;
scroll-padding-block-end: var(--n-padding-vertical);
`), (0, n.cE)("textarea-mirror", `
width: 100%;
pointer-events: none;
overflow: hidden;
visibility: hidden;
position: static;
white-space: pre-wrap;
overflow-wrap: break-word;
`)]),
// pair
(0, n.cM)("pair", [(0, n.cE)("input-el, placeholder", "text-align: center;"), (0, n.cE)("separator", `
display: flex;
align-items: center;
transition: color .3s var(--n-bezier);
color: var(--n-text-color);
white-space: nowrap;
`, [(0, n.cB)("icon", `
color: var(--n-icon-color);
`), (0, n.cB)("base-icon", `
color: var(--n-icon-color);
`)])]),
(0, n.cM)("disabled", `
cursor: not-allowed;
background-color: var(--n-color-disabled);
`, [(0, n.cE)("border", "border: var(--n-border-disabled);"), (0, n.cE)("input-el, textarea-el", `
cursor: not-allowed;
color: var(--n-text-color-disabled);
text-decoration-color: var(--n-text-color-disabled);
`), (0, n.cE)("placeholder", "color: var(--n-placeholder-color-disabled);"), (0, n.cE)("separator", "color: var(--n-text-color-disabled);", [(0, n.cB)("icon", `
color: var(--n-icon-color-disabled);
`), (0, n.cB)("base-icon", `
color: var(--n-icon-color-disabled);
`)]), (0, n.cB)("input-word-count", `
color: var(--n-count-text-color-disabled);
`), (0, n.cE)("suffix, prefix", "color: var(--n-text-color-disabled);", [(0, n.cB)("icon", `
color: var(--n-icon-color-disabled);
`), (0, n.cB)("internal-icon", `
color: var(--n-icon-color-disabled);
`)])]),
(0, n.cNotM)("disabled", [(0, n.cE)("eye", `
color: var(--n-icon-color);
cursor: pointer;
`, [(0, n.c)("&:hover", `
color: var(--n-icon-color-hover);
`), (0, n.c)("&:active", `
color: var(--n-icon-color-pressed);
`)]), (0, n.c)("&:hover", [(0, n.cE)("state-border", "border: var(--n-border-hover);")]), (0, n.cM)("focus", "background-color: var(--n-color-focus);", [(0, n.cE)("state-border", `
border: var(--n-border-focus);
box-shadow: var(--n-box-shadow-focus);
`)])]),
(0, n.cE)("border, state-border", `
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: none;
border-radius: inherit;
border: var(--n-border);
transition:
box-shadow .3s var(--n-bezier),
border-color .3s var(--n-bezier);
`),
(0, n.cE)("state-border", `
border-color: #0000;
z-index: 1;
`),
(0, n.cE)("prefix", "margin-right: 4px;"),
(0, n.cE)("suffix", `
margin-left: 4px;
`),
(0, n.cE)("suffix, prefix", `
transition: color .3s var(--n-bezier);
flex-wrap: nowrap;
flex-shrink: 0;
line-height: var(--n-height);
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--n-suffix-text-color);
`, [(0, n.cB)("base-loading", `
font-size: var(--n-icon-size);
margin: 0 2px;
color: var(--n-loading-color);
`), (0, n.cB)("base-clear", `
font-size: var(--n-icon-size);
`, [(0, n.cE)("placeholder", [(0, n.cB)("base-icon", `
transition: color .3s var(--n-bezier);
color: var(--n-icon-color);
font-size: var(--n-icon-size);
`)])]), (0, n.c)(">", [(0, n.cB)("icon", `
transition: color .3s var(--n-bezier);
color: var(--n-icon-color);
font-size: var(--n-icon-size);
`)]), (0, n.cB)("base-icon", `
font-size: var(--n-icon-size);
`)]),
(0, n.cB)("input-word-count", `
pointer-events: none;
line-height: 1.5;
font-size: .85em;
color: var(--n-count-text-color);
transition: color .3s var(--n-bezier);
margin-left: 4px;
font-variant: tabular-nums;
`),
["warning", "error"].map((t) => (0, n.cM)(`${t}-status`, [(0, n.cNotM)("disabled", [(0, n.cB)("base-loading", `
color: var(--n-loading-color-${t})
`), (0, n.cE)("input-el, textarea-el", `
caret-color: var(--n-caret-color-${t});
`), (0, n.cE)("state-border", `
border: var(--n-border-${t});
`), (0, n.c)("&:hover", [(0, n.cE)("state-border", `
border: var(--n-border-hover-${t});
`)]), (0, n.c)("&:focus", `
background-color: var(--n-color-focus-${t});
`, [(0, n.cE)("state-border", `
box-shadow: var(--n-box-shadow-focus-${t});
border: var(--n-border-focus-${t});
`)]), (0, n.cM)("focus", `
background-color: var(--n-color-focus-${t});
`, [(0, n.cE)("state-border", `
box-shadow: var(--n-box-shadow-focus-${t});
border: var(--n-border-focus-${t});
`)])])]))
]);
he.safariStyle = (0, n.cB)("input", [(0, n.cM)("disabled", [(0, n.cE)("input-el, textarea-el", `
-webkit-text-fill-color: var(--n-text-color-disabled);
`)])]);
var ne = {};
Object.defineProperty(ne, "__esModule", { value: !0 });
ne.len = at;
ne.isEmptyInputValue = lt;
ne.useCursor = st;
const Xe = fe;
function at(t) {
let c = 0;
for (const b of t)
c++;
return c;
}
function lt(t) {
return t === "" || t == null;
}
function st(t) {
const c = (0, Xe.ref)(null);
function b() {
const { value: s } = t;
if (!(s != null && s.focus)) {
p();
return;
}
const { selectionStart: P, selectionEnd: u, value: o } = s;
if (P == null || u == null) {
p();
return;
}
c.value = {
start: P,
end: u,
beforeText: o.slice(0, P),
afterText: o.slice(u)
};
}
function h() {
var s;
const { value: P } = c, { value: u } = t;
if (!P || !u)
return;
const { value: o } = u, { start: I, beforeText: C, afterText: D } = P;
let M = o.length;
if (o.endsWith(D))
M = o.length - D.length;
else if (o.startsWith(C))
M = C.length;
else {
const V = C[I - 1], d = o.indexOf(V, I - 1);
d !== -1 && (M = d + 1);
}
(s = u.setSelectionRange) === null || s === void 0 || s.call(u, M, M);
}
function p() {
c.value = null;
}
return (0, Xe.watch)(t, p), {
recordCursor: b,
restoreCursor: h
};
}
var ke = {};
Object.defineProperty(ke, "__esModule", { value: !0 });
const ye = fe, ut = we, ct = pe, dt = ne;
ke.default = (0, ye.defineComponent)({
name: "InputWordCount",
setup(t, { slots: c }) {
const { mergedValueRef: b, maxlengthRef: h, mergedClsPrefixRef: p, countGraphemesRef: s } = (0, ye.inject)(ct.inputInjectionKey), P = (0, ye.computed)(() => {
const { value: u } = b;
return u === null || Array.isArray(u) ? 0 : (s.value || dt.len)(u);
});
return () => {
const { value: u } = h, { value: o } = b;
return (0, ye.h)("span", { class: `${p.value}-input-word-count` }, (0, ut.resolveSlotWithTypedProps)(c.default, {
value: o === null || Array.isArray(o) ? "" : o
}, () => [
u === void 0 ? P.value : `${P.value} / ${u}`
]));
};
}
});
(function(t) {
var c = E && E.__createBinding || (Object.create ? function(i, f, w, x) {
x === void 0 && (x = w);
var z = Object.getOwnPropertyDescriptor(f, w);
(!z || ("get" in z ? !f.__esModule : z.writable || z.configurable)) && (z = { enumerable: !0, get: function() {
return f[w];
} }), Object.defineProperty(i, x, z);
} : function(i, f, w, x) {
x === void 0 && (x = w), i[x] = f[w];
}), b = E && E.__setModuleDefault || (Object.create ? function(i, f) {
Object.defineProperty(i, "default", { enumerable: !0, value: f });
} : function(i, f) {
i.default = f;
}), h = E && E.__importStar || /* @__PURE__ */ function() {
var i = function(f) {
return i = Object.getOwnPropertyNames || function(w) {
var x = [];
for (var z in w) Object.prototype.hasOwnProperty.call(w, z) && (x[x.length] = z);
return x;
}, i(f);
};
return function(f) {
if (f && f.__esModule) return f;
var w = {};
if (f != null) for (var x = i(f), z = 0; z < x.length; z++) x[z] !== "default" && c(w, f, x[z]);
return b(w, f), w;
};
}(), p = E && E.__importDefault || function(i) {
return i && i.__esModule ? i : { default: i };
};
Object.defineProperty(t, "__esModule", { value: !0 }), t.inputProps = void 0;
const s = Wo, P = Ae, u = Oo, o = fe, I = Ao, C = Vo, D = ko, M = de, V = jo, d = we, j = rr, k = Oe, L = pe, W = h(he), T = ne, q = p(ke);
t.inputProps = Object.assign(Object.assign({}, M.useTheme.props), {
bordered: {
type: Boolean,
default: void 0
},
type: {
type: String,
default: "text"
},
placeholder: [Array, String],
defaultValue: {
type: [String, Array],
default: null
},
value: [String, Array],
disabled: {
type: Boolean,
default: void 0
},
size: String,
rows: {
type: [Number, String],
default: 3
},
round: Boolean,
minlength: [String, Number],
maxlength: [String, Number],
clearable: Boolean,
autosize: {
type: [Boolean, Object],
default: !1
},
pair: Boolean,
separator: String,
readonly: {
type: [String, Boolean],
default: !1
},
passivelyActivated: Boolean,
showPasswordOn: String,
stateful: {
type: Boolean,
default: !0
},
autofocus: Boolean,
inputProps: Object,
resizable: {
type: Boolean,
default: !0
},
showCount: Boolean,
loading: {
type: Boolean,
default: void 0
},
allowInput: Function,
renderCount: Function,
onMousedown: Function,
onKeydown: Function,
onKeyup: [Function, Array],
onInput: [Function, Array],
onFocus: [Function, Array],
onBlur: [Function, Array],
onClick: [Function, Array],
onChange: [Function, Array],
onClear: [Function, Array],
countGraphemes: Function,
status: String,
"onUpdate:value": [Function, Array],
onUpdateValue: [Function, Array],
/** private */
textDecoration: [String, Array],
attrSize: {
type: Number,
default: 20
},
onInputBlur: [Function, Array],
onInputFocus: [Function, Array],
onDeactivate: [Function, Array],
onActivate: [Function, Array],
onWrapperFocus: [Function, Array],
onWrapperBlur: [Function, Array],
internalDeactivateOnEnter: Boolean,
internalForceFocus: Boolean,
internalLoadingBeforeSuffix: {
type: Boolean,
default: !0
},
/** deprecated */
showPasswordToggle: Boolean
}), t.default = (0, o.defineComponent)({
name: "Input",
props: t.inputProps,
slots: Object,
setup(i) {
const { mergedClsPrefixRef: f, mergedBorderedRef: w, inlineThemeDisabled: x, mergedRtlRef: z, mergedComponentPropsRef: H } = (0, M.useConfig)(i), N = (0, M.useTheme)("Input", "-input", W.default, k.inputLight, i, f);
j.isSafari && (0, M.useStyle)("-input-safari", W.safariStyle, f);
const l = (0, o.ref)(null), B = (0, o.ref)(null), K = (0, o.ref)(null), O = (0, o.ref)(null), F = (0, o.ref)(null), G = (0, o.ref)(null), R = (0, o.ref)(null), v = (0, T.useCursor)(R), m = (0, o.ref)(null), { localeRef: $ } = (0, M.useLocale)("Input"), A = (0, o.ref)(i.defaultValue), ze = (0, o.toRef)(i, "value"), U = (0, u.useMergedState)(ze, A), ie = (0, M.useFormItem)(i, {
mergedSize: (e) => {
var r, a;
const { size: _ } = i;
if (_)
return _;
const { mergedSize: y } = e || {};
if (y != null && y.value)
return y.value;
const g = (a = (r = H == null ? void 0 : H.value) === null || r === void 0 ? void 0 : r.Input) === null || a === void 0 ? void 0 : a.size;
return g || "medium";
}
}), { mergedSizeRef: Ee, mergedDisabledRef: ee, mergedStatusRef: nr } = ie, re = (0, o.ref)(!1), ae = (0, o.ref)(!1), X = (0, o.ref)(!1), le = (0, o.ref)(!1);
let Be = null;
const Re = (0, o.computed)(() => {
const { placeholder: e, pair: r } = i;
return r ? Array.isArray(e) ? e : e === void 0 ? ["", ""] : [e, e] : e === void 0 ? [$.value.placeholder] : [e];
}), ir = (0, o.computed)(() => {
const { value: e } = X, { value: r } = U, { value: a } = Re;
return !e && ((0, T.isEmptyInputValue)(r) || Array.isArray(r) && (0, T.isEmptyInputValue)(r[0])) && a[0];
}), ar = (0, o.computed)(() => {
const { value: e } = X, { value: r } = U, { value: a } = Re;
return !e && a[1] && ((0, T.isEmptyInputValue)(r) || Array.isArray(r) && (0, T.isEmptyInputValue)(r[1]));
}), Me = (0, u.useMemo)(() => i.internalForceFocus || re.value), lr = (0, u.useMemo)(() => {
if (ee.value || i.readonly || !i.clearable || !Me.value && !ae.value)
return !1;
const { value: e } = U, { value: r } = Me;
return i.pair ? !!(Array.isArray(e) && (e[0] || e[1])) && (ae.value || r) : !!e && (ae.value || r);
}), Fe = (0, o.computed)(() => {
const { showPasswordOn: e } = i;
if (e)
return e;
if (i.showPasswordToggle)
return "click";
}), se = (0, o.ref)(!1), sr = (0, o.computed)(() => {
const { textDecoration: e } = i;
return e ? Array.isArray(e) ? e.map((r) => ({
textDecoration: r
})) : [
{
textDecoration: e
}
] : ["", ""];
}), Ge = (0, o.ref)(void 0), ur = () => {
var e, r;
if (i.type === "textarea") {
const { autosize: a } = i;
if (a && (Ge.value = (r = (e = m.value) === null || e === void 0 ? void 0 : e.$el) === null || r === void 0 ? void 0 : r.offsetWidth), !B.value || typeof a == "boolean")
return;
const { paddingTop: _, paddingBottom: y, lineHeight: g } = window.getComputedStyle(B.value), Y = Number(_.slice(0, -2)), J = Number(y.slice(0, -2)), Q = Number(g.slice(0, -2)), { value: ue } = K;
if (!ue)
return;
if (a.minRows) {
const ce = Math.max(a.minRows, 1), Te = `${Y + J + Q * ce}px`;
ue.style.minHeight = Te;
}
if (a.maxRows) {
const ce = `${Y + J + Q * a.maxRows}px`;
ue.style.maxHeight = ce;
}
}
}, cr = (0, o.computed)(() => {
const { maxlength: e } = i;
return e === void 0 ? void 0 : Number(e);
});
(0, o.onMounted)(() => {
const { value: e } = U;
Array.isArray(e) || De(e);
});
const dr = (0, o.getCurrentInstance)().proxy;
function ve(e, r) {
const { onUpdateValue: a, "onUpdate:value": _, onInput: y } = i, { nTriggerFormInput: g } = ie;
a && (0, d.call)(a, e, r), _ && (0, d.call)(_, e, r), y && (0, d.call)(y, e, r), A.value = e, g();
}
function ge(e, r) {
const { onChange: a } = i, { nTriggerFormChange: _ } = ie;
a && (0, d.call)(a, e, r), A.value = e, _();
}
function fr(e) {
const { onBlur: r } = i, { nTriggerFormBlur: a } = ie;
r && (0, d.call)(r, e), a();
}
function pr(e) {
const { onFocus: r } = i, { nTriggerFormFocus: a } = ie;
r && (0, d.call)(r, e), a();
}
function hr(e) {
const { onClear: r } = i;
r && (0, d.call)(r, e);
}
function vr(e) {
const { onInputBlur: r } = i;
r && (0, d.call)(r, e);
}
function gr(e) {
const { onInputFocus: r } = i;
r && (0, d.call)(r, e);
}
function br() {
const { onDeactivate: e } = i;
e && (0, d.call)(e);
}
function mr() {
const { onActivate: e } = i;
e && (0, d.call)(e);
}
function _r(e) {
const { onClick: r } = i;
r && (0, d.call)(r, e);
}
function xr(e) {
const { onWrapperFocus: r } = i;
r && (0, d.call)(r, e);
}
function yr(e) {
const { onWrapperBlur: r } = i;
r && (0, d.call)(r, e);
}
function Cr() {
X.value = !0;
}
function wr(e) {
X.value = !1, e.target === G.value ? be(e, 1) : be(e, 0);
}
function be(e, r = 0, a = "input") {
const _ = e.target.value;
if (De(_), e instanceof InputEvent && !e.isComposing && (X.value = !1), i.type === "textarea") {
const { value: g } = m;
g && g.syncUnifiedContainer();
}
if (Be = _, X.value)
return;
v.recordCursor();
const y = Sr(_);
if (y)
if (!i.pair)
a === "input" ? ve(_, { source: r }) : ge(_, { source: r });
else {
let { value: g } = U;
Array.isArray(g) ? g = [g[0], g[1]] : g = ["", ""], g[r] = _, a === "input" ? ve(g, { source: r }) : ge(g, { source: r });
}
dr.$forceUpdate(), y || (0, o.nextTick)(v.restoreCursor);
}
function Sr(e) {
const { countGraphemes: r, maxlength: a, minlength: _ } = i;
if (r) {
let g;
if (a !== void 0 && (g === void 0 && (g = r(e)), g > Number(a)) || _ !== void 0 && (g === void 0 && (g = r(e)), g < Number(a)))
return !1;
}
const { allowInput: y } = i;
return typeof y == "function" ? y(e) : !0;
}
function Pr(e) {
vr(e), e.relatedTarget === l.value && br(), e.relatedTarget !== null && (e.relatedTarget === F.value || e.relatedTarget === G.value || e.relatedTarget === B.value) || (le.value = !1), me(e, "blur"), R.value = null;
}
function zr(e, r) {
gr(e), re.value = !0, le.value = !0, mr(), me(e, "focus"), r === 0 ? R.value = F.value : r === 1 ? R.value = G.value : r === 2 && (R.value = B.value);
}
function Er(e) {
i.passivelyActivated && (yr(e), me(e, "blur"));
}
function Br(e) {
i.passivelyActivated && (re.value = !0, xr(e), me(e, "focus"));
}
function me(e, r) {
e.relatedTarget !== null && (e.relatedTarget === F.value || e.relatedTarget === G.value || e.relatedTarget === B.value || e.relatedTarget === l.value) || (r === "focus" ? (pr(e), re.value = !0) : r === "blur" && (fr(e), re.value = !1));
}
function Rr(e, r) {
be(e, r, "change");
}
function Mr(e) {
_r(e);
}
function Fr(e) {
hr(e), Ne();
}
function Ne() {
i.pair ? (ve(["", ""], { source: "clear" }), ge(["", ""], { source: "clear" })) : (ve("", { source: "clear" }), ge("", { source: "clear" }));
}
function Ir(e) {
const { onMousedown: r } = i;
r && r(e);
const { tagName: a } = e.target;
if (a !== "INPUT" && a !== "TEXTAREA") {
if (i.resizable) {
const { value: _ } = l;
if (_) {
const { left: y, top: g, width: Y, height: J } = _.getBoundingClientRect(), Q = 14;
if (y + Y - Q < e.clientX && e.clientX < y + Y && g + J - Q < e.clientY && e.clientY < g + J)
return;
}
}
e.preventDefault(), re.value || Ke();
}
}
function Dr() {
var e;
ae.value = !0, i.type === "textarea" && ((e = m.value) === null || e === void 0 || e.handleMouseEnterWrapper());
}
function Tr() {
var e;
ae.value = !1, i.type === "textarea" && ((e = m.value) === null || e === void 0 || e.handleMouseLeaveWrapper());
}
function $r() {
ee.value || Fe.value === "click" && (se.value = !se.value);
}
function Ar(e) {
if (ee.value)
return;
e.preventDefault();
const r = (_) => {
_.preventDefault(), (0, s.off)("mouseup", document, r);
};
if ((0, s.on)("mouseup", document, r), Fe.value !== "mousedown")
return;
se.value = !0;
const a = () => {
se.value = !1, (0, s.off)("mouseup", document, a);
};
(0, s.on)("mouseup", document, a);
}
function Or(e) {
i.onKeyup && (0, d.call)(i.onKeyup, e);
}
function jr(e) {
switch (i.onKeydown && (0, d.call)(i.onKeydown, e), e.key) {
case "Escape":
Ie();
break;
case "Enter":
Wr(e);
break;
}
}
function Wr(e) {
var r, a;
if (i.passivelyActivated) {
const { value: _ } = le;
if (_) {
i.internalDeactivateOnEnter && Ie();
return;
}
e.preventDefault(), i.type === "textarea" ? (r = B.value) === null || r === void 0 || r.focus() : (a = F.value) === null || a === void 0 || a.focus();
}
}
function Ie() {
i.passivelyActivated && (le.value = !1, (0, o.nextTick)(() => {
var e;
(e = l.value) === null || e === void 0 || e.focus();
}));
}
function Ke() {
var e, r, a;
ee.value || (i.passivelyActivated ? (e = l.value) === null || e === void 0 || e.focus() : ((r = B.value) === null || r === void 0 || r.focus(), (a = F.value) === null || a === void 0 || a.focus()));
}
function Vr() {
var e;
!((e = l.value) === null || e === void 0) && e.contains(document.activeElement) && document.activeElement.blur();
}
function kr() {
var e, r;
(e = B.value) === null || e === void 0 || e.select(), (r = F.value) === null || r === void 0 || r.select();
}
function Lr() {
ee.value || (B.value ? B.value.focus() : F.value && F.value.focus());
}
function Hr() {
const { value: e } = l;
e != null && e.contains(document.activeElement) && e !== document.activeElement && Ie();
}
function Gr(e) {
if (i.type === "textarea") {
const { value: r } = B;
r == null || r.scrollTo(e);
} else {
const { value: r } = F;
r == null || r.scrollTo(e);
}
}
function De(e) {
const { type: r, pair: a, autosize: _ } = i;
if (!a && _)
if (r === "textarea") {
const { value: y } = K;
y && (y.textContent = `${e ?? ""}\r
`);
} else {
const { value: y } = O;
y && (e ? y.textContent = e : y.innerHTML = " ");
}
}
function Nr() {
ur();
}
const Ue = (0, o.ref)({
top: "0"
});
function Kr(e) {
var r;
const { scrollTop: a } = e.target;
Ue.value.top = `${-a}px`, (r = m.value) === null || r === void 0 || r.syncUnifiedContainer();
}
let _e = null;
(0, o.watchEffect)(() => {
const { autosize: e, type: r } = i;
e && r === "textarea" ? _e = (0, o.watch)(U, (a) => {
!Array.isArray(a) && a !== Be && De(a);
}) : _e == null || _e();
});
let xe = null;
(0, o.watchEffect)(() => {
i.type === "textarea" ? xe = (0, o.watch)(U, (e) => {
var r;
!Array.isArray(e) && e !== Be && ((r = m.value) === null || r === void 0 || r.syncUnifiedContainer());
}) : xe == null || xe();
}), (0, o.provide)(L.inputInjectionKey, {
mergedValueRef: U,
maxlengthRef: cr,
mergedClsPrefixRef: f,
countGraphemesRef: (0, o.toRef)(i, "countGraphemes")
});
const Ur = {
wrapperElRef: l,
inputElRef: F,
textareaElRef: B,
isCompositing: X,
clear: Ne,
focus: Ke,
blur: Vr,
select: kr,
deactivate: Hr,
activate: Lr,
scrollTo: Gr
}, qr = (0, V.useRtl)("Input", z, f), qe = (0, o.computed)(() => {
const { value: e } = Ee, { common: { cubicBezierEaseInOut: r }, self: { color: a, borderRadius: _, textColor: y, caretColor: g, caretColorError: Y, caretColorWarning: J, textDecorationColor: Q, border: ue, borderDisabled: ce, borderHover: Te, borderFocus: Xr, placeholderColor: Yr, placeholderColorDisabled: Jr, lineHeightTextarea: Qr, colorDisabled: Zr, colorFocus: eo, textColorDisabled: ro, boxShadowFocus: oo, iconSize: to, colorFocusWarning: no, boxShadowFocusWarning: io, borderWarning: ao, borderFocusWarning: lo, borderHoverWarning: so, colorFocusError: uo, boxShadowFocusError: co, borderError: fo, borderFocusError: po, borderHoverError: ho, clearSize: vo, clearColor: go, clearColorHover: bo, clearColorPressed: mo, iconColor: _o, iconColorDisabled: xo, suffixTextColor: yo, countTextColor: Co, countTextColorDisabled: wo, iconColorHover: So, iconColorPressed: Po, loadingColor: zo, loadingColorError: Eo, loadingColorWarning: Bo, fontWeight: Ro, [(0, d.createKey)("padding", e)]: Mo, [(0, d.createKey)("fontSize", e)]: Fo, [(0, d.createKey)("height", e)]: Io } } = N.value, { left: Do, right: To } = (0, P.getPadding)(Mo);
return {
"--n-bezier": r,
"--n-count-text-color": Co,
"--n-count-text-color-disabled": wo,
"--n-color": a,
"--n-font-size": Fo,
"--n-font-weight": Ro,
"--n-border-radius": _,
"--n-height": Io,
"--n-padding-left": Do,
"--n-padding-right": To,
"--n-text-color": y,
"--n-caret-color": g,
"--n-text-decoration-color": Q,
"--n-border": ue,
"--n-border-disabled": ce,
"--n-border-hover": Te,
"--n-border-focus": Xr,
"--n-placeholder-color": Yr,
"--n-placeholder-color-disabled": Jr,
"--n-icon-size": to,
"--n-line-height-textarea": Qr,
"--n-color-disabled": Zr,
"--n-color-focus": eo,
"--n-text-color-disabled": ro,
"--n-box-shadow-focus": oo,
"--n-loading-color": zo,
// form warning
"--n-caret-color-warning": J,
"--n-color-focus-warning": no,
"--n-box-shadow-focus-warning": io,
"--n-border-warning": ao,
"--n-border-focus-warning": lo,
"--n-border-hover-warning": so,
"--n-loading-color-warning": Bo,
// form error
"--n-caret-color-error": Y,
"--n-color-focus-error": uo,
"--n-box-shadow-focus-error": co,
"--n-border-error": fo,
"--n-border-focus-error": po,
"--n-border-hover-error": ho,
"--n-loading-color-error": Eo,
// clear-button
"--n-clear-color": go,
"--n-clear-size": vo,
"--n-clear-color-hover": bo,
"--n-clear-color-pressed": mo,
"--n-icon-color": _o,
"--n-icon-color-hover": So,
"--n-icon-color-pressed": Po,
"--n-icon-color-disabled": xo,
"--n-suffix-text-color": yo
};
}), oe = x ? (0, M.useThemeClass)("input", (0, o.computed)(() => {
const { value: e } = Ee;
return e[0];
}), qe, i) : void 0;
return Object.assign(Object.assign({}, Ur), {
// DOM ref
wrapperElRef: l,
inputElRef: F,
inputMirrorElRef: O,
inputEl2Ref: G,
textareaElRef: B,
textareaMirrorElRef: K,
textareaScrollbarInstRef: m,
// value
rtlEnabled: qr,
uncontrolledValue: A,
mergedValue: U,
passwordVisible: se,
mergedPlaceholder: Re,
showPlaceholder1: ir,
showPlaceholder2: ar,
mergedFocus: Me,
isComposing: X,
activated: le,
showClearButton: lr,
mergedSize: Ee,
mergedDisabled: ee,
textDecorationStyle: sr,
mergedClsPrefix: f,
mergedBordered: w,
mergedShowPasswordOn: Fe,
placeholderStyle: Ue,
mergedStatus: nr,
textAreaScrollContainerWidth: Ge,
// methods
handleTextAreaScroll: Kr,
handleCompositionStart: Cr,
handleCompositionEnd: wr,
handleInput: be,
handleInputBlur: Pr,
handleInputFocus: zr,
handleWrapperBlur: Er,
handleWrapperFocus: Br,
handleMouseEnter: Dr,
handleMouseLeave: Tr,
handleMouseDown: Ir,
handleChange: Rr,
handleClick: Mr,
handleClear: Fr,
handlePasswordToggleClick: $r,
handlePasswordToggleMousedown: Ar,
handleWrapperKeydown: jr,
handleWrapperKeyup: Or,
handleTextAreaMirrorResize: Nr,
getTextareaScrollContainer: () => B.value,
mergedTheme: N,
cssVars: x ? void 0 : qe,
themeClass: oe == null ? void 0 : oe.themeClass,
onRender: oe == null ? void 0 : oe.onRender
});
},
render() {
var i, f, w, x, z, H, N;
const { mergedClsPrefix: l, mergedStatus: B, themeClass: K, type: O, countGraphemes: F, onRender: G } = this, R = this.$slots;
return G == null || G(), (0, o.h)(
"div",
{ ref: "wrapperElRef", class: [
`${l}-input`,
`${l}-input--${this.mergedSize}-size`,
K,
B && `${l}-input--${B}-status`,
{
[`${l}-input--rtl`]: this.rtlEnabled,
[`${l}-input--disabled`]: this.mergedDisabled,
[`${l}-input--textarea`]: O === "textarea",
[`${l}-input--resizable`]: this.resizable && !this.autosize,
[`${l}-input--autosize`]: this.autosize,
[`${l}-input--round`]: this.round && O !== "textarea",
[`${l}-input--pair`]: this.pair,
[`${l}-input--focus`]: this.mergedFocus,
[`${l}-input--stateful`]: this.stateful
}
], style: this.cssVars, tabindex: !this.mergedDisabled && this.passivelyActivated && !this.activated ? 0 : void 0, onFocus: this.handleWrapperFocus, onBlur: this.handleWrapperBlur, onClick: this.handleClick, onMousedown: this.handleMouseDown, onMouseenter: this.handleMouseEnter, onMouseleave: this.handleMouseLeave, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd, onKeyup: this.handleWrapperKeyup, onKeydown: this.handleWrapperKeydown },
(0, o.h)(
"div",
{ class: `${l}-input-wrapper` },
(0, d.resolveWrappedSlot)(R.prefix, (v) => v && (0, o.h)("div", { class: `${l}-input__prefix` }, v)),
O === "textarea" ? (0, o.h)(C.NScrollbar, { ref: "textareaScrollbarInstRef", class: `${l}-input__textarea`, container: this.getTextareaScrollContainer, theme: (f = (i = this.theme) === null || i === void 0 ? void 0 : i.peers) === null || f === void 0 ? void 0 : f.Scrollbar, themeOverrides: (x = (w = this.themeOverrides) === null || w === void 0 ? void 0 : w.peers) === null || x === void 0 ? void 0 : x.Scrollbar, triggerDisplayManually: !0, useUnifiedContainer: !0, internalHoistYRail: !0 }, {
default: () => {
var v, m;
const { textAreaScrollContainerWidth: $ } = this, A = {
width: this.autosize && $ && `${$}px`
};
return (0, o.h)(
o.Fragment,
null,
(0, o.h)("textarea", Object.assign({}, this.inputProps, { ref: "textareaElRef", class: [
`${l}-input__textarea-el`,
(v = this.inputProps) === null || v === void 0 ? void 0 : v.class
], autofocus: this.autofocus, rows: Number(this.rows), placeholder: this.placeholder, value: this.mergedValue, disabled: this.mergedDisabled, maxlength: F ? void 0 : this.maxlength, minlength: F ? void 0 : this.minlength, readonly: this.readonly, tabindex: this.passivelyActivated && !this.activated ? -1 : void 0, style: [
this.textDecorationStyle[0],
(m = this.inputProps) === null || m === void 0 ? void 0 : m.style,
A
], onBlur: this.handleInputBlur, onFocus: (ze) => {
this.handleInputFocus(ze, 2);
}, onInput: this.handleInput, onChange: this.handleChange, onScroll: this.handleTextAreaScroll })),
this.showPlaceholder1 ? (0, o.h)("div", { class: `${l}-input__placeholder`, style: [
this.placeholderStyle,
A
], key: "placeholder" }, this.mergedPlaceholder[0]) : null,
this.autosize ? (0, o.h)(I.VResizeObserver, { onResize: this.handleTextAreaMirrorResize }, {
default: () => (0, o.h)("div", { ref: "textareaMirrorElRef", class: `${l}-input__textarea-mirror`, key: "mirror" })
}) : null
);
}
}) : (0, o.h)(
"div",
{ class: `${l}-input__input` },
(0, o.h)("input", Object.assign({ type: O === "password" && this.mergedShowPasswordOn && this.passwordVisible ? "text" : O }, this.inputProps, { ref: "inputElRef", class: [
`${l}-input__input-el`,
(z = this.inputProps) === null || z === void 0 ? void 0 : z.class
], style: [
this.textDecorationStyle[0],
(H = this.inputProps) === null || H === void 0 ? void 0 : H.style
], tabindex: this.passivelyActivated && !this.activated ? -1 : (N = this.inputProps) === null || N === void 0 ? void 0 : N.tabindex, placeholder: this.mergedPlaceholder[0], disabled: this.mergedDisabled, maxlength: F ? void 0 : this.maxlength, minlength: F ? void 0 : this.minlength, value: Array.isArray(this.mergedValue) ? this.mergedValue[0] : this.mergedValue, readonly: this.readonly, autofocus: this.autofocus, size: this.attrSize, onBlur: this.handleInputBlur, onFocus: (v) => {
this.handleInputFocus(v, 0);
}, onInput: (v) => {
this.handleInput(v, 0);
}, onChange: (v) => {
this.handleChange(v, 0);
} })),
this.showPlaceholder1 ? (0, o.h)(
"div",
{ class: `${l}-input__placeholder` },
(0, o.h)("span", null, this.mergedPlaceholder[0])
) : null,
this.autosize ? (0, o.h)("div", { class: `${l}-input__input-mirror`, key: "mirror", ref: "inputMirrorElRef" }, " ") : null
),
!this.pair && (0, d.resolveWrappedSlot)(R.suffix, (v) => v || this.clearable || this.showCount || this.mergedShowPasswordOn || this.loading !== void 0 ? (0, o.h)("div", { class: `${l}-input__suffix` }, [
(0, d.resolveWrappedSlot)(R["clear-icon-placeholder"], (m) => (this.clearable || m) && (0, o.h)(C.NBaseClear, { clsPrefix: l, show: this.showClearButton, onClear: this.handleClear }, {
placeholder: () => m,
icon: () => {
var $, A;
return (A = ($ = this.$slots)["clear-icon"]) === null || A === void 0 ? void 0 : A.call($);
}
})),
this.internalLoadingBeforeSuffix ? null : v,
this.loading !== void 0 ? (0, o.h)(C.NBaseSuffix, { clsPrefix: l, loading: this.loading, showArrow: !1, showClear: !1, style: this.cssVars }) : null,
this.internalLoadingBeforeSuffix ? v : null,
this.showCount && this.type !== "textarea" ? (0, o.h)(q.default, null, {
default: (m) => {
var $;
const { renderCount: A } = this;
return A ? A(m) : ($ = R.count) === null || $ === void 0 ? void 0 : $.call(R, m);
}
}) : null,
this.mergedShowPasswordOn && this.type === "password" ? (0, o.h)("div", { class: `${l}-input__eye`, onMousedown: this.handlePasswordToggleMousedown, onClick: this.handlePasswordToggleClick }, this.passwordVisible ? (0, d.resolveSlot)(R["password-visible-icon"], () => [
(0, o.h)(C.NBaseIcon, { clsPrefix: l }, { default: () => (0, o.h)(D.EyeIcon, null) })
]) : (0, d.resolveSlot)(R["password-invisible-icon"], () => [
(0, o.h)(C.NBaseIcon, { clsPrefix: l }, { default: () => (0, o.h)(D.EyeOffIcon, null) })
])) : null
]) : null)
),
this.pair ? (0, o.h)("span", { class: `${l}-input__separator` }, (0, d.resolveSlot)(R.separator, () => [this.separator])) : null,
this.pair ? (0, o.h)(
"div",
{ class: `${l}-input-wrapper` },
(0, o.h)(
"div",
{ class: `${l}-input__input` },
(0, o.h)("input", { ref: "inputEl2Ref", type: this.type, class: `${l}-input__input-el`, tabindex: this.passivelyActivated && !this.activated ? -1 : void 0, placeholder: this.mergedPlaceholder[1], disabled: this.mergedDisabled, maxlength: F ? void 0 : this.maxlength, minlength: F ? void 0 : this.minlength, value: Array.isArray(this.mergedValue) ? this.mergedValue[1] : void 0, readonly: this.readonly, style: this.textDecorationStyle[1], onBlur: this.handleInputBlur, onFocus: (v) => {
this.handleInputFocus(v, 1);
}, onInput: (v) => {
this.handleInput(v, 1);
}, onChange: (v) => {
this.handleChange(v, 1);
} }),
this.showPlaceholder2 ? (0, o.h)(
"div",
{ class: `${l}-input__placeholder` },
(0, o.h)("span", null, this.mergedPlaceholder[1])
) : null
),
(0, d.resolveWrappedSlot)(R.suffix, (v) => (this.clearable || v) && (0, o.h)("div", { class: `${l}-input__suffix` }, [
this.clearable && (0, o.h)(C.NBaseClear, { clsPrefix: l, show: this.showClearButton, onClear: this.handleClear }, {
icon: () => {
var m;
return (m = R["clear-icon"]) === null || m === void 0 ? void 0 : m.call(R);
},
placeholder: () => {
var m;
return (m = R["clear-icon-placeholder"]) === null || m === void 0 ? void 0 : m.call(R);
}
}),
v
]))
) : null,
this.mergedBordered ? (0, o.h)("div", { class: `${l}-input__border` }) : null,
this.mergedBordered ? (0, o.h)("div", { class: `${l}-input__state-border` }) : null,
this.showCount && O === "textarea" ? (0, o.h)(q.default, null, {
default: (v) => {
var m;
const { renderCount: $ } = this;
return $ ? $(v) : (m = R.count) === null || m === void 0 ? void 0 : m.call(R, v);
}
}) : null
);
}
});
})(er);
var or = {}, Le = {};
Object.defineProperty(Le, "__esModule", {
value: !0
});
const S = Ce;
Le.default = (0, S.cB)("input-group", `
display: inline-flex;
width: 100%;
flex-wrap: nowrap;
vertical-align: bottom;
`, [(0, S.c)(">", [(0, S.cB)("input", [(0, S.c)("&:not(:last-child)", `
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
`), (0, S.c)("&:not(:first-child)", `
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
margin-left: -1px!important;
`)]), (0, S.cB)("button", [(0, S.c)("&:not(:last-child)", `
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
`, [(0, S.cE)("state-border, border", `
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
`)]), (0, S.c)("&:not(:first-child)", `
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
`, [(0, S.cE)("state-border, border", `
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
`)])]), (0, S.c)("*", [(0, S.c)("&:not(:last-child)", `
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
`, [(0, S.c)(">", [(0, S.cB)("input", `
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
`), (0, S.cB)("base-selection", [(0, S.cB)("base-selection-label", `
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
`), (0, S.cB)("base-selection-tags", `
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
`), (0, S.cE)("box-shadow, border, state-border", `
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
`)])])]), (0, S.c)("&:not(:first-child)", `
margin-left: -1px!important;
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
`, [(0, S.c)(">", [(0, S.cB)("input", `
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
`), (0, S.cB)("base-selection", [(0, S.cB)("base-selection-label", `
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
`), (0, S.cB)("base-selection-tags", `
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
`), (0, S.cE)("box-shadow, border, state-border", `
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
`)])])])])])]);
(function(t) {
var c = E && E.__importDefault || function(s) {
return s && s.__esModule ? s : { default: s };
};
Object.defineProperty(t, "__esModule", { value: !0 }), t.inputGroupProps = void 0;
const b = fe, h = de, p = c(Le);
t.inputGroupProps = {}, t.default = (0, b.defineComponent)({
name: "InputGroup",
props: t.inputGroupProps,
setup(s) {
const { mergedClsPrefixRef: P } = (0, h.useConfig)(s);
return (0, h.useStyle)("-input-group", p.default, P), {
mergedClsPrefix: P
};
},
render() {
const { mergedClsPrefix: s } = this;
return (0, b.h)("div", { class: `${s}-input-group` }, this.$slots);
}
});
})(or);
var tr = {}, He = {};
Object.defineProperty(He, "__esModule", {
value: !0
});
const Ye = Ce;
He.default = (0, Ye.cB)("input-group-label", `
position: relative;
user-select: none;
-webkit-user-select: none;
box-sizing: border-box;
padding: 0 12px;
display: inline-block;
border-radius: var(--n-border-radius);
background-color: var(--n-group-label-color);
color: var(--n-group-label-text-color);
font-size: var(--n-font-size);
line-height: var(--n-height);
height: var(--n-height);
flex-shrink: 0;
white-space: nowrap;
transition:
color .3s var(--n-bezier),
background-color .3s var(--n-bezier),
box-shadow .3s var(--n-bezier);
`, [(0, Ye.cE)("border", `
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: inherit;
border: var(--n-group-label-border);
transition: border-color .3s var(--n-bezier);
`)]);
(function(t) {
var c = E && E.__importDefault || function(u) {
return u && u.__esModule ? u : { default: u };
};
Object.defineProperty(t, "__esModule", { value: !0 }), t.inputGroupLabelProps = void 0;
const b = fe, h = de, p = we, s = Oe, P = c(He);
t.inputGroupLabelProps = Object.assign(Object.assign({}, h.useTheme.props), { size: String, bordered: {
type: Boolean,
default: void 0
} }), t.default = (0, b.defineComponent)({
name: "InputGroupLabel",
props: t.inputGroupLabelProps,
setup(u) {
const { mergedBorderedRef: o, mergedClsPrefixRef: I, inlineThemeDisabled: C, mergedComponentPropsRef: D } = (0, h.useConfig)(u), M = (0, h.useTheme)("Input", "-input-group-label", P.default, s.inputLight, u, I), { mergedSizeRef: V } = (0, h.useFormItem)(u, {
mergedSize(k) {
var L, W;
if (u.size !== void 0)
return u.size;
if (k)
return k.mergedSize.value;
const T = (W = (L = D == null ? void 0 : D.value) === null || L === void 0 ? void 0 : L.Input) === null || W === void 0 ? void 0 : W.size;
return T || "medium";
}
}), d = (0, b.computed)(() => {
const { value: k } = V, { common: { cubicBezierEaseInOut: L }, self: { groupLabelColor: W, borderRadius: T, groupLabelTextColor: q, lineHeight: i, groupLabelBorder: f, [(0, p.createKey)("fontSize", k)]: w, [(0, p.createKey)("height", k)]: x } } = M.value;
return {
"--n-bezier": L,
"--n-group-label-color": W,
"--n-group-label-border": f,
"--n-border-radius": T,
"--n-group-label-text-color": q,
"--n-font-size": w,
"--n-line-height": i,
"--n-height": x
};
}), j = C ? (0, h.useThemeClass)("input-group-label", (0, b.computed)(() => V.value[0]), d, u) : void 0;
return {
mergedClsPrefix: I,
mergedBordered: o,
cssVars: C ? void 0 : d,
themeClass: j == null ? void 0 : j.themeClass,
onRender: j == null ? void 0 : j.onRender
};
},
render() {
var u, o, I;
const { mergedClsPrefix: C } = this;
return (u = this.onRender) === null || u === void 0 || u.call(this), (0, b.h)(
"div",
{ class: [`${C}-input-group-label`, this.themeClass], style: this.cssVars },
(I = (o = this.$slots).default) === null || I === void 0 ? void 0 : I.call(o),
this.mergedBordered ? (0, b.h)("div", { class: `${C}-input-group-label__border` }) : null
);
}
});
})(tr);
(function(t) {
var c = E && E.__importDefault || function(s) {
return s && s.__esModule ? s : { default: s };
};
Object.defineProperty(t, "__esModule", { value: !0 }), t.NInputGroupLabel = t.inputGroupLabelProps = t.NInputGroup = t.inputGroupProps = t.NInput = t.inputProps = void 0;
var b = er;
Object.defineProperty(t, "inputProps", { enumerable: !0, get: function() {
return b.inputProps;
} }), Object.defineProperty(t, "NInput", { enumerable: !0, get: function() {
return c(b).default;
} });
var h = or;
Object.defineProperty(t, "inputGroupProps", { enumerable: !0, get: function() {
return h.inputGroupProps;
} }), Object.defineProperty(t, "NInputGroup", { enumerable: !0, get: function() {
return c(h).default;
} });
var p = tr;
Object.defineProperty(t, "inputGroupLabelProps", { enumerable: !0, get: function() {
return p.inputGroupLabelProps;
} }), Object.defineProperty(t, "NInputGroupLabel", { enumerable: !0, get: function() {
return c(p).default;
} });
})(Ze);
const gt = /* @__PURE__ */ Lo({
__proto__: null
}, [Ze]);
export {
Ze as a,
rr as b,
gt as i,
Pe as r,
Oe as s
};