@wikicasa-dev/components 1.6.12 → 1.6.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/BaseInput.js +74 -68
- package/dist/assets/BaseInput.css +1 -1
- package/package.json +1 -1
package/dist/BaseInput.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import './assets/BaseInput.css';
|
|
2
|
-
import { defineComponent as N, mergeModels as
|
|
2
|
+
import { defineComponent as N, mergeModels as M, useModel as O, ref as b, watch as c, useAttrs as j, openBlock as s, createElementBlock as r, normalizeClass as p, unref as o, renderSlot as m, createElementVNode as v, withModifiers as g, withKeys as D, createBlock as G, createCommentVNode as w, Fragment as C, renderList as B } from "vue";
|
|
3
3
|
import J from "./BaseFloatingLabel.js";
|
|
4
4
|
import { useFloatingLabel as Q } from "./useFloatingLabel.js";
|
|
5
5
|
import { _ as R } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
|
|
6
|
-
const
|
|
6
|
+
const W = ["id", "data-cy", "name", "autocomplete", "disabled", "aria-labelledby", "readonly", "type", "pattern", "min", "max", "maxlength", "inputmode", "placeholder", "value"], X = { class: "uikit-invisible uikit-float-none uikit-mb-2 uikit-ml-2 uikit-block uikit-h-3 uikit-w-auto uikit-max-w-full uikit-overflow-hidden uikit-whitespace-nowrap uikit-p-0 uikit-text uikit-transition-[max-width] uikit-duration-[50ms] uikit-ease-out" }, Y = ["innerHTML"], Z = ["innerHTML"], U = ["innerHTML"], x = {
|
|
7
7
|
key: 1,
|
|
8
8
|
class: "under-label uikit-absolute uikit-text-12"
|
|
9
9
|
}, _ = /* @__PURE__ */ N({
|
|
10
10
|
inheritAttrs: !1,
|
|
11
11
|
__name: "BaseInput",
|
|
12
|
-
props: /* @__PURE__ */
|
|
12
|
+
props: /* @__PURE__ */ M({
|
|
13
13
|
inputClass: { default: "" },
|
|
14
14
|
labelText: { default: "" },
|
|
15
15
|
feedback: {},
|
|
@@ -20,67 +20,73 @@ const U = ["id", "data-cy", "name", "autocomplete", "disabled", "aria-labelledby
|
|
|
20
20
|
modelValue: { default: "" },
|
|
21
21
|
modelModifiers: {}
|
|
22
22
|
}),
|
|
23
|
-
emits: /* @__PURE__ */
|
|
24
|
-
setup(
|
|
25
|
-
const t =
|
|
26
|
-
labelState:
|
|
27
|
-
handleFocusIn:
|
|
28
|
-
handleFocusOut:
|
|
29
|
-
setInlineLabel:
|
|
30
|
-
setFloatingLabel:
|
|
31
|
-
} = Q(k),
|
|
23
|
+
emits: /* @__PURE__ */ M(["click", "keydownEnterPressed", "focusin", "focusout", "keydown"], ["update:modelValue"]),
|
|
24
|
+
setup(y, { expose: E, emit: H }) {
|
|
25
|
+
const t = y, l = O(y, "modelValue"), h = b(""), k = H, {
|
|
26
|
+
labelState: u,
|
|
27
|
+
handleFocusIn: P,
|
|
28
|
+
handleFocusOut: V,
|
|
29
|
+
setInlineLabel: F,
|
|
30
|
+
setFloatingLabel: L
|
|
31
|
+
} = Q(k), n = b("text"), d = b({}), f = b(null), q = () => {
|
|
32
32
|
t.feedback && (d.value = t.feedback, t.feedback.valid && typeof t.feedback.valid == "string" && (d.value.valid = [t.feedback.valid]), t.feedback.invalid && typeof t.feedback.invalid == "string" && (d.value.invalid = [t.feedback.invalid]));
|
|
33
|
-
},
|
|
33
|
+
}, T = (e, i) => {
|
|
34
34
|
if (!t.formatter || !t.formatter.formatFn)
|
|
35
|
-
return "";
|
|
36
|
-
const
|
|
37
|
-
return
|
|
38
|
-
},
|
|
35
|
+
return h.value = e, "";
|
|
36
|
+
const a = e.length ? t.formatter.formatFn(e) : e;
|
|
37
|
+
return i ? i.value = a : h.value = a, a;
|
|
38
|
+
}, I = (e) => {
|
|
39
39
|
if (!t.formatter || !t.formatter.unFormatFn)
|
|
40
|
-
return "";
|
|
40
|
+
return l.value = e, "";
|
|
41
41
|
const i = t.formatter.unFormatFn(e);
|
|
42
|
-
return
|
|
42
|
+
return l.value = i, i;
|
|
43
43
|
}, z = ({ target: e }) => {
|
|
44
|
-
const i = e;
|
|
45
|
-
|
|
44
|
+
const i = e, a = I(i.value);
|
|
45
|
+
a || (l.value = i.value), T(
|
|
46
|
+
`${a}`,
|
|
47
|
+
a === l.value ? i : void 0
|
|
48
|
+
);
|
|
46
49
|
}, S = () => {
|
|
47
|
-
|
|
50
|
+
l.value = "", F();
|
|
48
51
|
}, A = () => {
|
|
49
|
-
|
|
52
|
+
n.value === "password" ? n.value = "text" : n.value === "text" && (n.value = "password");
|
|
50
53
|
};
|
|
51
|
-
|
|
54
|
+
c(
|
|
52
55
|
() => t.feedback,
|
|
53
56
|
() => {
|
|
54
|
-
|
|
57
|
+
q();
|
|
55
58
|
},
|
|
56
59
|
{
|
|
57
60
|
immediate: !0
|
|
58
61
|
}
|
|
59
|
-
),
|
|
60
|
-
|
|
62
|
+
), c(
|
|
63
|
+
l,
|
|
61
64
|
(e) => {
|
|
62
|
-
|
|
65
|
+
T(
|
|
66
|
+
`${e}`,
|
|
67
|
+
I(`${e}`) === e ? f.value : void 0
|
|
68
|
+
), e != null && `${e}`.length > 0 && u.value !== "floating-label" ? L() : !`${e}`.length && document && document.activeElement != f.value && F();
|
|
63
69
|
},
|
|
64
70
|
{
|
|
65
71
|
immediate: !0
|
|
66
72
|
}
|
|
67
|
-
),
|
|
73
|
+
), c(
|
|
68
74
|
() => t.keepFloatingLabel,
|
|
69
75
|
(e) => {
|
|
70
|
-
e ?
|
|
76
|
+
e ? L() : V(l.value);
|
|
71
77
|
}
|
|
72
78
|
);
|
|
73
79
|
const K = j();
|
|
74
|
-
return
|
|
80
|
+
return n.value = K.type || "text", E({
|
|
75
81
|
select: () => {
|
|
76
|
-
|
|
82
|
+
f.value?.select();
|
|
77
83
|
}
|
|
78
|
-
}), (e, i) => (
|
|
79
|
-
class:
|
|
84
|
+
}), (e, i) => (s(), r("div", {
|
|
85
|
+
class: p(["input-wrapper uikit-relative uikit-inline-block uikit-w-full [&.has-right-icon.is-invalid_.text-input-icon]:uikit-mr-25px [&.has-right-icon.is-valid_.text-input-icon]:uikit-mr-25px", [
|
|
80
86
|
e.$attrs.class,
|
|
81
87
|
{ "uikit-h-12": e.labelText },
|
|
82
88
|
{ "floating-label": e.labelText },
|
|
83
|
-
|
|
89
|
+
o(u) === "floating-label" ? "floating-state" : "inline-state",
|
|
84
90
|
{
|
|
85
91
|
"has-right-icon": e.$attrs["with-right-icon"] !== void 0 ? e.$attrs["with-right-icon"] : !!e.$slots.righticon
|
|
86
92
|
},
|
|
@@ -90,19 +96,19 @@ const U = ["id", "data-cy", "name", "autocomplete", "disabled", "aria-labelledby
|
|
|
90
96
|
{ "is-invalid": e.isValid === !1, "is-valid": e.isValid }
|
|
91
97
|
]])
|
|
92
98
|
}, [
|
|
93
|
-
|
|
94
|
-
|
|
99
|
+
m(e.$slots, "leftIcon", {}, void 0, !0),
|
|
100
|
+
m(e.$slots, "righticon", {
|
|
95
101
|
handleClean: S,
|
|
96
102
|
handleShowPasswd: A,
|
|
97
|
-
curType:
|
|
103
|
+
curType: n.value
|
|
98
104
|
}, void 0, !0),
|
|
99
|
-
|
|
105
|
+
v("input", {
|
|
100
106
|
id: e.$attrs.id,
|
|
101
107
|
ref_key: "baseInputEl",
|
|
102
|
-
ref:
|
|
108
|
+
ref: f,
|
|
103
109
|
"data-cy": e.$attrs["data-cy"],
|
|
104
110
|
name: e.$attrs.name,
|
|
105
|
-
class:
|
|
111
|
+
class: p(["input-element uikit-peer uikit-relative uikit-z-10 uikit-box-border uikit-block uikit-h-12 uikit-w-full uikit-appearance-none uikit-truncate uikit-rounded-xs !uikit-border-none uikit-bg-transparent uikit-bg-no-repeat uikit-px-4 uikit-pt-5px uikit-outline-0 focus:uikit-shadow-none focus:uikit-outline-none", [
|
|
106
112
|
{ "uikit-text-w-secondary": e.$attrs.disabled },
|
|
107
113
|
{
|
|
108
114
|
"is-invalid invalid-bg !uikit-pr-9": e.isValid === !1,
|
|
@@ -120,7 +126,7 @@ const U = ["id", "data-cy", "name", "autocomplete", "disabled", "aria-labelledby
|
|
|
120
126
|
disabled: e.$attrs.disabled,
|
|
121
127
|
"aria-labelledby": e.$attrs.id,
|
|
122
128
|
readonly: e.$attrs.readonly,
|
|
123
|
-
type:
|
|
129
|
+
type: n.value,
|
|
124
130
|
pattern: e.$attrs.pattern,
|
|
125
131
|
min: e.$attrs.min,
|
|
126
132
|
max: e.$attrs.max,
|
|
@@ -128,17 +134,17 @@ const U = ["id", "data-cy", "name", "autocomplete", "disabled", "aria-labelledby
|
|
|
128
134
|
inputmode: e.$attrs.inputmode,
|
|
129
135
|
placeholder: e.$attrs.placeholder,
|
|
130
136
|
onClick: i[0] || (i[0] = (a) => k("click", a)),
|
|
131
|
-
onFocusin: i[1] || (i[1] = g(() => e.labelText &&
|
|
132
|
-
onFocusout: i[2] || (i[2] = g((a) => e.labelText && !e.keepFloatingLabel &&
|
|
137
|
+
onFocusin: i[1] || (i[1] = g(() => e.labelText && o(P)(), ["stop"])),
|
|
138
|
+
onFocusout: i[2] || (i[2] = g((a) => e.labelText && !e.keepFloatingLabel && o(V)(l.value), ["stop"])),
|
|
133
139
|
onInput: g(z, ["stop"]),
|
|
134
|
-
value:
|
|
140
|
+
value: h.value,
|
|
135
141
|
onKeydown: [
|
|
136
142
|
i[3] || (i[3] = D(() => k("keydownEnterPressed"), ["enter"])),
|
|
137
143
|
i[4] || (i[4] = (a) => k("keydown", a))
|
|
138
144
|
]
|
|
139
|
-
}, null, 42,
|
|
140
|
-
|
|
141
|
-
class:
|
|
145
|
+
}, null, 42, W),
|
|
146
|
+
v("fieldset", {
|
|
147
|
+
class: p(["uikit-pointer-events-none uikit-absolute uikit-bottom-0 uikit-left-0 uikit-right-0 uikit-m-0 uikit-box-border uikit-h-12 uikit-overflow-hidden uikit-rounded-xs uikit-border uikit-border-solid uikit-bg-white uikit-px-2 uikit-py-0 uikit-text-left uikit-transition-[border] uikit-duration-100 uikit-ease-out peer-focus:uikit-border-2 peer-focus:uikit-border-w-primary peer-focus:[&.is-invalid]:uikit-border-w-danger", [
|
|
142
148
|
{ "uikit-bg-w-cultured": e.$attrs.disabled },
|
|
143
149
|
{
|
|
144
150
|
"is-invalid uikit-border-w-danger": e.isValid === !1,
|
|
@@ -149,51 +155,51 @@ const U = ["id", "data-cy", "name", "autocomplete", "disabled", "aria-labelledby
|
|
|
149
155
|
e.$attrs["fieldset-classes"]
|
|
150
156
|
]])
|
|
151
157
|
}, [
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
class:
|
|
158
|
+
v("legend", X, [
|
|
159
|
+
v("span", {
|
|
160
|
+
class: p(["visible-label uikit-opacity-0", [
|
|
155
161
|
{ "uikit-mx-5px": e.labelText },
|
|
156
162
|
{
|
|
157
|
-
"uikit-visible uikit-inline-block":
|
|
163
|
+
"uikit-visible uikit-inline-block": o(u) === "floating-label"
|
|
158
164
|
},
|
|
159
165
|
{
|
|
160
|
-
"uikit-invisible uikit-hidden":
|
|
166
|
+
"uikit-invisible uikit-hidden": o(u) === "inline-label"
|
|
161
167
|
}
|
|
162
168
|
]]),
|
|
163
169
|
innerHTML: e.labelText
|
|
164
|
-
}, null, 10,
|
|
170
|
+
}, null, 10, Y)
|
|
165
171
|
])
|
|
166
172
|
], 2),
|
|
167
|
-
e.labelText ? (
|
|
173
|
+
e.labelText ? (s(), G(J, {
|
|
168
174
|
key: 0,
|
|
169
175
|
for: e.$attrs.id,
|
|
170
176
|
"label-text": e.labelText,
|
|
171
|
-
"label-state":
|
|
177
|
+
"label-state": o(u),
|
|
172
178
|
"is-valid": e.isValid,
|
|
173
179
|
required: e.$attrs.required,
|
|
174
180
|
disabled: e.$attrs.disabled,
|
|
175
181
|
"label-classes": [
|
|
176
|
-
|
|
182
|
+
o(u) === "floating-label" ? "!-uikit-top-1" : "!uikit-top-4",
|
|
177
183
|
e.$attrs["label-classes"]
|
|
178
184
|
]
|
|
179
|
-
}, null, 8, ["for", "label-text", "label-state", "is-valid", "required", "disabled", "label-classes"])) :
|
|
180
|
-
|
|
181
|
-
e.isValid === !1 ? (
|
|
182
|
-
key: `${e.$attrs.id}_invalid_${
|
|
185
|
+
}, null, 8, ["for", "label-text", "label-state", "is-valid", "required", "disabled", "label-classes"])) : w("", !0),
|
|
186
|
+
m(e.$slots, "feedback", {}, () => [
|
|
187
|
+
e.isValid === !1 ? (s(!0), r(C, { key: 0 }, B(d.value.invalid, (a, $) => (s(), r("div", {
|
|
188
|
+
key: `${e.$attrs.id}_invalid_${$}`,
|
|
183
189
|
class: "uikit-mt-1 uikit-text-12 uikit-text-w-danger",
|
|
184
190
|
innerHTML: a
|
|
185
|
-
}, null, 8,
|
|
186
|
-
key: `${e.$attrs.id}_valid_${
|
|
191
|
+
}, null, 8, Z))), 128)) : e.isValid === !0 ? (s(!0), r(C, { key: 1 }, B(d.value.valid, (a, $) => (s(), r("div", {
|
|
192
|
+
key: `${e.$attrs.id}_valid_${$}`,
|
|
187
193
|
class: "uikit-mt-1 uikit-text-12 uikit-text-w-primary",
|
|
188
194
|
innerHTML: a
|
|
189
|
-
}, null, 8,
|
|
195
|
+
}, null, 8, U))), 128)) : w("", !0)
|
|
190
196
|
], !0),
|
|
191
|
-
e.$slots["under-label"] ? (
|
|
192
|
-
|
|
193
|
-
])) :
|
|
197
|
+
e.$slots["under-label"] ? (s(), r("div", x, [
|
|
198
|
+
m(e.$slots, "under-label", {}, void 0, !0)
|
|
199
|
+
])) : w("", !0)
|
|
194
200
|
], 2));
|
|
195
201
|
}
|
|
196
|
-
}), ne = /* @__PURE__ */ R(_, [["__scopeId", "data-v-
|
|
202
|
+
}), ne = /* @__PURE__ */ R(_, [["__scopeId", "data-v-287eefaf"]]);
|
|
197
203
|
export {
|
|
198
204
|
ne as default
|
|
199
205
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.input-wrapper[data-v-
|
|
1
|
+
.input-wrapper[data-v-287eefaf]{--icon-default-size: 44px}.invalid-bg[data-v-287eefaf]{--invalid-img: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMicgZmlsbD0nbm9uZScgc3Ryb2tlPScjRkE0RjY0Jz48Y2lyY2xlIGN4PSc2JyBjeT0nNicgcj0nNC41Jy8+PHBhdGggc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcgZD0nTTUuOCAzLjZoLjRMNiA2LjV6Jy8+PGNpcmNsZSBjeD0nNicgY3k9JzguMicgcj0nLjYnIGZpbGw9JyNGQTRGNjQnIHN0cm9rZT0nbm9uZScvPjwvc3ZnPg==);background-image:var(--invalid-img)}.valid-bg[data-v-287eefaf]{--valid-img: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDgnPjxwYXRoIGZpbGw9JyMyQjVERkYnIGQ9J00yLjMgNi43My42IDQuNTNjLS40LTEuMDQuNDYtMS40IDEuMS0uOGwxLjEgMS40IDMuNC0zLjhjLjYtLjYzIDEuNi0uMjcgMS4yLjdsLTQgNC42Yy0uNDMuNS0uOC40LTEuMS4xeicvPjwvc3ZnPg==);background-image:var(--valid-img)}.invalid-bg[data-v-287eefaf],.valid-bg[data-v-287eefaf]{background-position:top 17px right 12px;background-size:20px}.has-right-icon[data-v-287eefaf]>label.inline-label{right:var(--icon-default-size)}.has-left-icon[data-v-287eefaf]>label.inline-label{left:var(--icon-default-size)}[data-v-287eefaf] .text-input-icon{position:absolute;z-index:20;box-sizing:border-box;--icon-size-sm: 16px;--icon-size-md: 20px;--icon-size-lg: 25px}[data-v-287eefaf] .text-input-icon.left{left:5px}[data-v-287eefaf] .text-input-icon.right{right:5px}[data-v-287eefaf] .text-input-icon{--icon-top: 5px;--icon-size: var(--icon-size-sm);width:var(--icon-default-size);height:var(--icon-default-size);padding:calc((var(--icon-default-size) - var(--icon-size)) / 2);top:var(--icon-top)}[data-v-287eefaf] .text-input-icon.md{--icon-size: var(--icon-size-md)}[data-v-287eefaf] .text-input-icon.lg{--icon-top: 0;--icon-size: var(--icon-size-lg)}.under-label[data-v-287eefaf]{left:4px;font-style:italic}
|