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