dk-plus
Version:
274 lines (273 loc) • 9.13 kB
JavaScript
import { defineComponent as me, useSlots as ge, shallowRef as Q, computed as W, ref as u, reactive as A, watch as k, resolveComponent as ye, openBlock as a, createElementBlock as r, normalizeClass as d, unref as n, normalizeStyle as I, renderSlot as b, createBlock as g, createCommentVNode as i, toDisplayString as c, createElementVNode as C, withDirectives as X, mergeProps as Y, withKeys as ke, vModelDynamic as xe, vShow as ve, nextTick as Pe } from "vue";
import { dkInputProps as we } from "./index3.js";
import { inputEmits as _e } from "./index4.js";
import { getInput as Ie, setPropData as be, verifyInputType as Ce, setData as Le, getNull as $, getBooleanAnd as Z, getValue as Te, getPendValue as Se } from "../../_hooks/get-input/index.js";
import { getReturn as Ve } from "../../_hooks/public/get-return/index.js";
import "../../_icon/index.js";
const Ae = { key: 1 }, $e = {
key: 0,
class: "dk-input_label-text"
}, De = {
key: 1,
class: "dk-input_prefix"
}, ze = ["type", "onKeydown"], Ee = {
key: 2,
class: "dk-input_length"
}, Re = {
key: 3,
class: "dk-input_length"
}, Be = {
key: 4,
class: "dk-input_suffix"
}, Ke = { key: 1 }, Ne = ["type"], He = {
key: 0,
class: "dk-input_textarea_length"
}, Fe = {
key: 1,
class: "dk-input_length"
}, Je = /* @__PURE__ */ me({
__name: "input",
props: we,
emits: _e,
setup(ee, { emit: h }) {
const s = ee, L = ge(), D = Q(), z = Q(), x = W(() => D.value || z.value), { classList: E, styleList: R, wrapperClassList: B, innerClassList: te, pendStyleList: K } = Ie(s), v = u(s.modelValue), N = u(!1), H = u(!1), t = be(s), y = u(s.modelValue);
let f = !1, m = u(Ce(t.typeProp, f));
const ne = (e = "") => {
let o = "";
return t.maxlengthProp && t.minlengthProp ? o = `${t.minlengthProp}/${t.maxlengthProp}` : t.maxlengthProp ? o = `${e.toString().length}/${t.maxlengthProp}` : t.minlengthProp && (o = `${t.minlengthProp}`), o;
}, l = Le(t, L, m.value), oe = W(() => $(y.value));
let T = ne();
const F = A({
isPrependText: Z([
!L.prepend,
$(t.prependText),
!l.isPrependIcon
]),
isAppendText: Z([
$(t.appendText),
!L.append,
!l.isAppendIcon
])
}), se = ["dk-input_prepend", "dk-input_pend"], ae = ["dk-input_append", "dk-input_pend"], S = u(0);
k(
() => s.modelValue,
() => {
y.value = Te(
s.modelValue,
t.prependText,
t.prependIcon,
t.appendText,
t.appendIcon
), v.value = y.value;
}
), k(
() => y.value,
(e) => {
const o = e.toString().length;
if (t.maxlengthProp && (T = `${o}/${t.maxlengthProp}`), G().autosize) {
const p = x.value;
p.style.height = "auto", p.style.height = `${p.scrollHeight + 2}px`;
}
l.showLength && (S.value = o), t.typeProp === "number" ? h("update:modelValue", Number(e)) : h(
"update:modelValue",
Se(
e,
t.prependText,
t.prependIcon,
t.appendText,
t.appendIcon
)
);
}
);
const M = (e) => {
const o = e.target;
y.value = o.value;
}, le = () => ["dk-input_prefix-icon", typeof t.prefixIcon == "boolean" ? "dk-icon-search" : t.prefixIcon], ie = () => ["dk-input_suffix-icon", typeof t.suffixIcon == "boolean" ? "dk-icon-search" : t.suffixIcon], re = () => {
v.value = "", h("update:modelValue", ""), O();
}, O = async () => {
var e;
await Pe(), (e = x.value) == null || e.focus();
};
let U = u("IconPasswordSee");
const pe = () => {
var e, o;
f = !f, U.value = f ? "IconPasswordShow" : "IconPasswordSee", m.value = f ? "text" : "password", f ? (e = x.value) == null || e.setAttribute("type", "text") : (o = x.value) == null || o.setAttribute("type", "password"), O();
}, de = () => ["dk-input_password-icon"], j = (e) => {
N.value = !0, h("focus", e);
}, q = (e) => {
N.value = !1, h("blur", e);
}, { getRun: V } = Ve(), ue = (e) => {
V(s.onAppendClick, e);
}, ce = (e) => {
V(s.onPrependClick, e);
}, he = (e) => {
if (e.which === 13) {
const o = e.target;
V(s.onEnter, o.value);
}
}, G = () => {
let e = 1;
const o = m.value === "textarea", p = t.autosizeProp, _ = +t.rowsProp, fe = _ > 0;
return o && fe && (e = _), {
row: e,
autosize: o && p
};
}, J = (e) => {
const o = e.target;
h("change", o.value);
}, P = A({
class: te.value,
placeholder: t.placeholder,
oninput: M,
disabled: t.disabledProp,
inputmode: l.inputmode,
onfocus: j,
onblur: q,
onChange: J,
maxlength: t.maxlengthProp,
minlength: t.minlengthProp,
readonly: t.readonlyProp,
id: s.id || void 0,
name: s.name || void 0,
tabindex: s.tabindex,
"aria-label": s.ariaLabel || void 0
}), w = A({
class: B.value,
type: m.value,
placeholder: t.placeholder,
onInput: M,
onfocus: j,
onblur: q,
onChange: J,
disabled: t.disabledProp,
maxlength: t.maxlengthProp,
minlength: t.minlengthProp,
autosize: t.autosizeProp,
rows: G().row,
readonly: t.readonlyProp,
id: s.id || void 0,
name: s.name || void 0,
tabindex: s.tabindex,
"aria-label": s.ariaLabel || void 0
});
return k(
() => s.placeholder,
(e) => {
t.placeholder = e, P.placeholder = e, w.placeholder = e;
},
{ immediate: !0 }
), k(
() => s.tabindex,
(e) => {
P.tabindex = e, w.tabindex = e;
},
{ immediate: !0 }
), k(
() => s.ariaLabel,
(e) => {
P["aria-label"] = e || void 0, w["aria-label"] = e || void 0;
},
{ immediate: !0 }
), (e, o) => {
const p = ye("dk-icon");
return e.type !== "textarea" ? (a(), r("div", {
key: 0,
class: d([n(E), "dk-input"]),
style: I(n(R))
}, [
!H.value && n(l).isPrepend ? (a(), r("div", {
key: 0,
class: d(se),
style: I(n(K))
}, [
b(e.$slots, "prepend"),
n(l).isPrependIcon ? (a(), g(p, {
key: 0,
icon: e.prependIcon,
onClick: ce
}, null, 8, ["icon"])) : i("", !0),
F.isPrependText ? (a(), r("span", Ae, c(e.prependText), 1)) : i("", !0)
], 4)) : i("", !0),
C("div", {
class: d(n(B))
}, [
n(l).labelText ? (a(), r("div", $e, [
C("span", null, c(n(l).labelText), 1)
])) : i("", !0),
n(l).isPrefix ? (a(), r("span", De, [
b(e.$slots, "prefix"),
n(l).isPrefixIcon ? (a(), g(p, {
key: 0,
class: d(le),
icon: e.prefixIcon,
size: "19px"
}, null, 8, ["icon"])) : i("", !0)
])) : i("", !0),
X(C("input", Y({
ref_key: "input",
ref: D,
"onUpdate:modelValue": o[0] || (o[0] = (_) => v.value = _),
type: n(m)
}, P, {
onKeydown: ke(he, ["enter"])
}), null, 16, ze), [
[xe, v.value]
]),
n(l).isLength ? (a(), r("span", Ee, c(n(T)), 1)) : i("", !0),
e.showLength ? (a(), r("span", Re, c(S.value), 1)) : i("", !0),
n(l).isSuffix ? (a(), r("div", Be, [
b(e.$slots, "suffix"),
n(l).isSuffixIcon ? (a(), g(p, {
key: 0,
class: d(ie),
icon: e.suffixIcon
}, null, 8, ["icon"])) : i("", !0)
])) : i("", !0),
n(l).isClear ? X((a(), g(p, {
key: 5,
class: "dk-input-clearable",
icon: s.clearIcon || "IconShanchu1",
onClick: re
}, null, 8, ["icon"])), [
[ve, oe.value]
]) : i("", !0),
n(l).isShowPassword ? (a(), g(p, {
key: 6,
class: d(de),
icon: n(U),
onClick: pe
}, null, 8, ["icon"])) : i("", !0)
], 2),
!H.value && n(l).isAppend ? (a(), r("div", {
key: 1,
class: d(ae),
style: I(n(K))
}, [
b(e.$slots, "append"),
n(l).isAppendIcon ? (a(), g(p, {
key: 0,
icon: e.appendIcon,
onClick: ue
}, null, 8, ["icon"])) : i("", !0),
F.isAppendText ? (a(), r("span", Ke, c(e.appendText), 1)) : i("", !0)
], 4)) : i("", !0)
], 6)) : (a(), r("div", {
key: 1,
class: d(n(E)),
style: I(n(R))
}, [
C("textarea", Y({
ref_key: "textarea",
ref: z,
type: n(m)
}, w), null, 16, Ne),
n(l).isLength ? (a(), r("span", He, c(n(T)), 1)) : i("", !0),
e.showLength ? (a(), r("span", Fe, c(S.value), 1)) : i("", !0)
], 6));
};
}
});
export {
Je as default
};