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