mosstandardcomponents 1.0.6 → 1.0.8
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/input-field.es.js +102 -54
- package/dist/input-field.umd.js +1 -1
- package/package.json +1 -1
package/dist/input-field.es.js
CHANGED
|
@@ -1,16 +1,64 @@
|
|
|
1
|
-
import {
|
|
2
|
-
const k =
|
|
1
|
+
import { createElementBlock as r, openBlock as n, createElementVNode as l, resolveComponent as u, createCommentVNode as a, normalizeClass as c, toDisplayString as d, withKeys as p, createBlock as f, createVNode as w } from "vue";
|
|
2
|
+
const k = {
|
|
3
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
4
|
+
viewBox: "0 0 1008 1008"
|
|
5
|
+
};
|
|
6
|
+
function _(t, o) {
|
|
7
|
+
return n(), r("svg", k, [...o[0] || (o[0] = [
|
|
8
|
+
l("path", {
|
|
9
|
+
fill: "currentColor",
|
|
10
|
+
d: "M1008 540c0 14-4 27-11 39-103 170-293 285-493 285S114 749 11 579c-7-12-11-25-11-39s4-27 11-39c103-170 293-285 493-285s390 115 493 285c7 12 11 25 11 39zM531 324c0-15-12-27-27-27-94 0-171 77-171 171 0 15 12 27 27 27s27-12 27-27c0-64 53-117 117-117 15 0 27-12 27-27zm405 216c-53-83-127-154-214-199 22 39 34 83 34 127 0 139-113 252-252 252S252 607 252 468c0-44 12-88 34-127-87 45-161 116-214 199 96 148 251 252 432 252s336-104 432-252z"
|
|
11
|
+
}, null, -1)
|
|
12
|
+
])]);
|
|
13
|
+
}
|
|
14
|
+
const C = { render: _ }, x = {
|
|
15
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
16
|
+
viewBox: "0 0 1008 1008"
|
|
17
|
+
};
|
|
18
|
+
function S(t, o) {
|
|
19
|
+
return n(), r("svg", x, [...o[0] || (o[0] = [
|
|
20
|
+
l("path", {
|
|
21
|
+
fill: "currentColor",
|
|
22
|
+
d: "M1008 540c0 15-4 27-11 39-18 29-40 56-62 81-110 127-262 204-431 204l42-74c163-14 302-114 390-250-42-65-95-121-159-165l36-63c70 46 140 117 184 189 7 12 11 24 11 39zm-252-72c0 105-65 198-162 235l158-282c2 15 4 31 4 47zm-21-251v5C616 434 497 646 380 859l-28 50c-3 6-9 9-16 9-10 0-63-33-75-39-6-4-9-9-9-16 0-9 19-40 25-49C168 764 76 680 11 579c-7-11-11-25-11-39 0-13 4-28 11-39 112-171 285-285 493-285 34 0 68 3 101 10l31-55c3-6 9-9 15-9 11 0 63 33 75 39 6 4 9 9 9 16zM531 324c0-15-12-27-27-27-94 0-171 77-171 171 0 15 12 27 27 27s27-12 27-27c0-65 53-117 117-117 15 0 27-12 27-27zM312 751l44-79c-65-48-104-124-104-204 0-44 12-88 34-127-87 45-161 116-214 199 58 91 141 166 240 211z"
|
|
23
|
+
}, null, -1)
|
|
24
|
+
])]);
|
|
25
|
+
}
|
|
26
|
+
const B = { render: S }, I = {
|
|
27
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
28
|
+
viewBox: "0 0 1039 1008"
|
|
29
|
+
};
|
|
30
|
+
function q(t, o) {
|
|
31
|
+
return n(), r("svg", I, [...o[0] || (o[0] = [
|
|
32
|
+
l("path", {
|
|
33
|
+
fill: "currentColor",
|
|
34
|
+
d: "M908 989H131q-32 0-62.5-17T19 926.5 0 863t19-68l388-670q42-62 113-62t112 62l389 670q18 28 18 64 0 75-68 113-31 17-63 17zM576 157q-19-38-55.5-38T463 150L69 826q-20 30 0 69 21 32 56 32h777q35 0 55.5-30.5t.5-70.5zm-13 501.5Q544 676 517.5 676T474 659t-17-45V351q0-29 17-46t45.5-17 45.5 17 17 46v263q0 27-19 44.5zm-97.5 174q-8.5-14.5-8.5-36t18.5-39.5 37.5-18 31 5 20 13q18 18 18 44t-18 44.5-39.5 18.5-36-8.5-23-23z"
|
|
35
|
+
}, null, -1)
|
|
36
|
+
])]);
|
|
37
|
+
}
|
|
38
|
+
const V = { render: q }, z = {
|
|
39
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
40
|
+
viewBox: "0 0 1008 1008"
|
|
41
|
+
};
|
|
42
|
+
function A(t, o) {
|
|
43
|
+
return n(), r("svg", z, [...o[0] || (o[0] = [
|
|
44
|
+
l("path", {
|
|
45
|
+
fill: "currentColor",
|
|
46
|
+
d: "M940 318c0 14-6 28-16 39L517 764l-77 76c-10 10-24 16-38 16s-28-6-38-16l-77-76L84 560c-10-10-16-24-16-38s6-28 16-38l76-77c10-10 25-16 39-16s28 6 38 16l165 166 369-369c10-11 24-16 38-16s29 6 39 16l76 76c10 10 16 24 16 38z"
|
|
47
|
+
}, null, -1)
|
|
48
|
+
])]);
|
|
49
|
+
}
|
|
50
|
+
const P = { render: A }, T = (t, o) => {
|
|
3
51
|
const e = t.__vccOpts || t;
|
|
4
52
|
for (const [h, m] of o)
|
|
5
53
|
e[h] = m;
|
|
6
54
|
return e;
|
|
7
|
-
},
|
|
55
|
+
}, E = {
|
|
8
56
|
name: "InputField",
|
|
9
57
|
components: {
|
|
10
|
-
IconEyeSlash:
|
|
11
|
-
IconPrivacy:
|
|
12
|
-
IconAlert:
|
|
13
|
-
IconCheck:
|
|
58
|
+
IconEyeSlash: B,
|
|
59
|
+
IconPrivacy: C,
|
|
60
|
+
IconAlert: V,
|
|
61
|
+
IconCheck: P
|
|
14
62
|
},
|
|
15
63
|
props: {
|
|
16
64
|
modelValue: String,
|
|
@@ -90,24 +138,24 @@ const k = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20view
|
|
|
90
138
|
t && t.value && this.$emit("update:modelValue", t.value);
|
|
91
139
|
}
|
|
92
140
|
}
|
|
93
|
-
},
|
|
141
|
+
}, M = { class: "pt-2" }, K = ["for"], F = ["textContent"], L = {
|
|
94
142
|
key: 0,
|
|
95
143
|
class: "text-red"
|
|
96
|
-
},
|
|
144
|
+
}, N = {
|
|
97
145
|
key: 1,
|
|
98
146
|
textContent: " (optioneel)",
|
|
99
147
|
class: "font-normal"
|
|
100
|
-
},
|
|
148
|
+
}, D = ["id", "value", "type", "name", "placeholder", "required", "optional", "error", "minlength", "maxlength", "autocomplete", "autofocus", "inputmode", "disabled", "readonly", "aria-describedby", "aria-errormessage", "pattern", "aria-invalid"], H = ["aria-pressed", "aria-label"], O = { class: "sr-only" }, Q = {
|
|
101
149
|
key: 1,
|
|
102
150
|
class: "absolute right-0 top-0 py-3 pl-1 pr-2 text-error-500"
|
|
103
|
-
},
|
|
151
|
+
}, j = {
|
|
104
152
|
key: 2,
|
|
105
153
|
class: "absolute right-0 top-0 py-3 pl-1 pr-2 text-green"
|
|
106
|
-
},
|
|
107
|
-
function
|
|
108
|
-
const
|
|
109
|
-
return
|
|
110
|
-
e.label ? (
|
|
154
|
+
}, G = ["id", "textContent"], J = ["id"], R = ["textContent"], U = ["textContent"];
|
|
155
|
+
function W(t, o, e, h, m, i) {
|
|
156
|
+
const y = u("icon-privacy"), g = u("icon-eye-slash"), b = u("icon-alert"), v = u("icon-check");
|
|
157
|
+
return n(), r("div", M, [
|
|
158
|
+
e.label ? (n(), r("label", {
|
|
111
159
|
key: 0,
|
|
112
160
|
for: t.computedId,
|
|
113
161
|
class: c(["max-w-full whitespace-nowrap text-sm font-bold", {
|
|
@@ -118,23 +166,23 @@ function H(t, o, e, h, m, r) {
|
|
|
118
166
|
"text-blue-dark": e.error && !t.isActive
|
|
119
167
|
}])
|
|
120
168
|
}, [
|
|
121
|
-
|
|
169
|
+
l("span", {
|
|
122
170
|
textContent: d(e.label)
|
|
123
|
-
}, null, 8,
|
|
124
|
-
e.required ? (
|
|
125
|
-
e.optional ? (
|
|
126
|
-
], 10,
|
|
127
|
-
|
|
171
|
+
}, null, 8, F),
|
|
172
|
+
e.required ? (n(), r("span", L, " * ")) : a("", !0),
|
|
173
|
+
e.optional ? (n(), r("span", N)) : a("", !0)
|
|
174
|
+
], 10, K)) : a("", !0),
|
|
175
|
+
l("div", {
|
|
128
176
|
class: c([
|
|
129
177
|
"relative mt-1 rounded-sm",
|
|
130
178
|
[
|
|
131
|
-
|
|
179
|
+
i.outlineClass,
|
|
132
180
|
t.isActive || e.error ? "border-2" : "border",
|
|
133
181
|
e.disabled && e.modelValue || e.readonly ? "bg-blue-dark-100" : ""
|
|
134
182
|
]
|
|
135
183
|
])
|
|
136
184
|
}, [
|
|
137
|
-
|
|
185
|
+
l("input", {
|
|
138
186
|
id: t.computedId,
|
|
139
187
|
ref: "input",
|
|
140
188
|
value: e.modelValue,
|
|
@@ -157,75 +205,75 @@ function H(t, o, e, h, m, r) {
|
|
|
157
205
|
"aria-invalid": e.error.toString(),
|
|
158
206
|
class: "block h-12 w-full appearance-none border-0 bg-transparent pl-4 pr-8 focus:outline-none",
|
|
159
207
|
"data-clarity-mask": "true",
|
|
160
|
-
onInput: o[0] || (o[0] = (
|
|
161
|
-
onBlur: o[1] || (o[1] = (...
|
|
162
|
-
onFocus: o[2] || (o[2] = (...
|
|
163
|
-
onKeyup: o[3] || (o[3] = p((...
|
|
164
|
-
}, null, 40,
|
|
165
|
-
t.initialType === "password" && !e.hidepasswordicon && !e.disabled ? (
|
|
208
|
+
onInput: o[0] || (o[0] = (s) => t.$emit("update:modelValue", s.target.value)),
|
|
209
|
+
onBlur: o[1] || (o[1] = (...s) => i.onBlur && i.onBlur(...s)),
|
|
210
|
+
onFocus: o[2] || (o[2] = (...s) => i.onFocus && i.onFocus(...s)),
|
|
211
|
+
onKeyup: o[3] || (o[3] = p((...s) => i.onKeyupEnter && i.onKeyupEnter(...s), ["enter"]))
|
|
212
|
+
}, null, 40, D),
|
|
213
|
+
t.initialType === "password" && !e.hidepasswordicon && !e.disabled ? (n(), r("div", {
|
|
166
214
|
key: 0,
|
|
167
215
|
class: c(["absolute right-0 top-0", { "right-8": e.error }])
|
|
168
216
|
}, [
|
|
169
|
-
|
|
217
|
+
l("button", {
|
|
170
218
|
type: "button",
|
|
171
219
|
class: "m-1 px-2 py-3 focus-visible:outline-blue-dark",
|
|
172
220
|
"aria-pressed": t.showPassword,
|
|
173
221
|
"aria-label": t.showPassword ? "Verberg wachtwoord" : "Toon wachtwoord",
|
|
174
|
-
onClick: o[4] || (o[4] = (...
|
|
222
|
+
onClick: o[4] || (o[4] = (...s) => i.togglePassword && i.togglePassword(...s))
|
|
175
223
|
}, [
|
|
176
|
-
t.showPassword ? (
|
|
224
|
+
t.showPassword ? (n(), f(y, {
|
|
177
225
|
key: 0,
|
|
178
226
|
class: "h-4 w-4",
|
|
179
227
|
"aria-hidden": "true"
|
|
180
|
-
})) : (
|
|
228
|
+
})) : (n(), f(g, {
|
|
181
229
|
key: 1,
|
|
182
230
|
class: "h-4 w-4",
|
|
183
231
|
"aria-hidden": "true"
|
|
184
232
|
})),
|
|
185
|
-
|
|
186
|
-
], 8,
|
|
187
|
-
], 2)) :
|
|
188
|
-
e.error ? (
|
|
189
|
-
w(
|
|
233
|
+
l("span", O, d(t.showPassword ? "verberg" : "toon") + " wachtwoord", 1)
|
|
234
|
+
], 8, H)
|
|
235
|
+
], 2)) : a("", !0),
|
|
236
|
+
e.error ? (n(), r("div", Q, [
|
|
237
|
+
w(b, {
|
|
190
238
|
class: "-mt-1 mr-1 inline h-5 w-5",
|
|
191
239
|
"aria-hidden": "true"
|
|
192
240
|
})
|
|
193
|
-
])) :
|
|
194
|
-
!e.error && e.modelValue && t.shouldShowCheck ? (
|
|
195
|
-
w(
|
|
241
|
+
])) : a("", !0),
|
|
242
|
+
!e.error && e.modelValue && t.shouldShowCheck ? (n(), r("div", j, [
|
|
243
|
+
w(v, {
|
|
196
244
|
class: "-mt-1 mr-1 inline h-5 w-5",
|
|
197
245
|
"aria-hidden": "true"
|
|
198
246
|
})
|
|
199
|
-
])) :
|
|
247
|
+
])) : a("", !0)
|
|
200
248
|
], 2),
|
|
201
|
-
e.hint && !e.error ? (
|
|
249
|
+
e.hint && !e.error ? (n(), r("div", {
|
|
202
250
|
key: 1,
|
|
203
251
|
id: t.computedId + "-hint",
|
|
204
252
|
class: c(["w-full pt-1 text-xs leading-4", { "text-grey-500": e.disabled }]),
|
|
205
253
|
textContent: d(e.hint)
|
|
206
|
-
}, null, 10,
|
|
207
|
-
e.error && e.errormessage ? (
|
|
254
|
+
}, null, 10, G)) : a("", !0),
|
|
255
|
+
e.error && e.errormessage ? (n(), r("div", {
|
|
208
256
|
key: 2,
|
|
209
257
|
id: t.computedId + "-errormsg",
|
|
210
258
|
class: "w-full pt-1 text-sm font-bold leading-4 text-error-500",
|
|
211
259
|
"aria-live": "assertive"
|
|
212
260
|
}, [
|
|
213
|
-
|
|
261
|
+
l("span", {
|
|
214
262
|
textContent: d(e.errormessage)
|
|
215
|
-
}, null, 8,
|
|
216
|
-
], 8,
|
|
217
|
-
t.initialType === "password" ? (
|
|
263
|
+
}, null, 8, R)
|
|
264
|
+
], 8, J)) : a("", !0),
|
|
265
|
+
t.initialType === "password" ? (n(), r("p", {
|
|
218
266
|
key: 3,
|
|
219
267
|
class: "sr-only",
|
|
220
268
|
"aria-live": "polite",
|
|
221
269
|
textContent: d(
|
|
222
270
|
t.showPassword ? "wachtwoord wordt getoond" : "wachtwoord is verborgen"
|
|
223
271
|
)
|
|
224
|
-
}, null, 8,
|
|
272
|
+
}, null, 8, U)) : a("", !0)
|
|
225
273
|
]);
|
|
226
274
|
}
|
|
227
|
-
const
|
|
275
|
+
const Y = /* @__PURE__ */ T(E, [["render", W], ["__scopeId", "data-v-5a4e94c9"]]);
|
|
228
276
|
export {
|
|
229
|
-
|
|
230
|
-
|
|
277
|
+
Y as InputField,
|
|
278
|
+
Y as default
|
|
231
279
|
};
|
package/dist/input-field.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a.mosstandardcomponents={},a.Vue))})(this,function(a,e){"use strict";const c="
|
|
1
|
+
(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a.mosstandardcomponents={},a.Vue))})(this,function(a,e){"use strict";const c={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1008 1008"};function m(o,n){return e.openBlock(),e.createElementBlock("svg",c,[...n[0]||(n[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M1008 540c0 14-4 27-11 39-103 170-293 285-493 285S114 749 11 579c-7-12-11-25-11-39s4-27 11-39c103-170 293-285 493-285s390 115 493 285c7 12 11 25 11 39zM531 324c0-15-12-27-27-27-94 0-171 77-171 171 0 15 12 27 27 27s27-12 27-27c0-64 53-117 117-117 15 0 27-12 27-27zm405 216c-53-83-127-154-214-199 22 39 34 83 34 127 0 139-113 252-252 252S252 607 252 468c0-44 12-88 34-127-87 45-161 116-214 199 96 148 251 252 432 252s336-104 432-252z"},null,-1)])])}const u={render:m},h={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1008 1008"};function f(o,n){return e.openBlock(),e.createElementBlock("svg",h,[...n[0]||(n[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M1008 540c0 15-4 27-11 39-18 29-40 56-62 81-110 127-262 204-431 204l42-74c163-14 302-114 390-250-42-65-95-121-159-165l36-63c70 46 140 117 184 189 7 12 11 24 11 39zm-252-72c0 105-65 198-162 235l158-282c2 15 4 31 4 47zm-21-251v5C616 434 497 646 380 859l-28 50c-3 6-9 9-16 9-10 0-63-33-75-39-6-4-9-9-9-16 0-9 19-40 25-49C168 764 76 680 11 579c-7-11-11-25-11-39 0-13 4-28 11-39 112-171 285-285 493-285 34 0 68 3 101 10l31-55c3-6 9-9 15-9 11 0 63 33 75 39 6 4 9 9 9 16zM531 324c0-15-12-27-27-27-94 0-171 77-171 171 0 15 12 27 27 27s27-12 27-27c0-65 53-117 117-117 15 0 27-12 27-27zM312 751l44-79c-65-48-104-124-104-204 0-44 12-88 34-127-87 45-161 116-214 199 58 91 141 166 240 211z"},null,-1)])])}const p={render:f},w={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1039 1008"};function y(o,n){return e.openBlock(),e.createElementBlock("svg",w,[...n[0]||(n[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M908 989H131q-32 0-62.5-17T19 926.5 0 863t19-68l388-670q42-62 113-62t112 62l389 670q18 28 18 64 0 75-68 113-31 17-63 17zM576 157q-19-38-55.5-38T463 150L69 826q-20 30 0 69 21 32 56 32h777q35 0 55.5-30.5t.5-70.5zm-13 501.5Q544 676 517.5 676T474 659t-17-45V351q0-29 17-46t45.5-17 45.5 17 17 46v263q0 27-19 44.5zm-97.5 174q-8.5-14.5-8.5-36t18.5-39.5 37.5-18 31 5 20 13q18 18 18 44t-18 44.5-39.5 18.5-36-8.5-23-23z"},null,-1)])])}const g={render:y},k={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1008 1008"};function b(o,n){return e.openBlock(),e.createElementBlock("svg",k,[...n[0]||(n[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M940 318c0 14-6 28-16 39L517 764l-77 76c-10 10-24 16-38 16s-28-6-38-16l-77-76L84 560c-10-10-16-24-16-38s6-28 16-38l76-77c10-10 25-16 39-16s28 6 38 16l165 166 369-369c10-11 24-16 38-16s29 6 39 16l76 76c10 10 16 24 16 38z"},null,-1)])])}const B={render:b},C=(o,n)=>{const t=o.__vccOpts||o;for(const[s,d]of n)t[s]=d;return t},V={name:"InputField",components:{IconEyeSlash:p,IconPrivacy:u,IconAlert:g,IconCheck:B},props:{modelValue:String,label:String,name:String,placeholder:{type:String,default:" "},required:{type:Boolean,default:!1},optional:{type:Boolean,default:!1},disabled:Boolean,error:{type:Boolean,default:!1},pattern:{type:String,default:null},hidepasswordicon:{type:Boolean,default:!1},autocomplete:{type:String,default:"on"},inputmode:String,autofocus:Boolean,readonly:Boolean,minlength:String,maxlength:String,type:{type:String,default:"text"},id:{type:String,default:null},hint:String,errormessage:{type:String,default:""},borderClass:{type:String,default:null},showCheck:{type:Boolean,default:!1},inputClass:{type:String,default:null}},emits:["update:modelValue","focus","blur","showpassword","onKeyupEnter"],data:function(){return{initialType:"",fieldType:"text",isActive:!1,hasError:!1,showPassword:!1,shouldShowCheck:!1,computedId:null}},computed:{outlineClass:function(){return this.isActive?"border-blue":this.error?"border-error-500":!this.disabled&&this.modelValue?"border-blue-dark-900":this.disabled&&this.modelValue||this.readonly?"border-none":"border-blue-dark-200"}},watch:{type:function(){this.fieldType=this.type}},mounted:function(){this.computedId=this.id?this.id:"cb-input-"+Math.random().toString(36).slice(4),this.checkAutofill(),setTimeout(this.checkAutofill,1e3)},created:function(){this.initialType=this.type,this.fieldType=this.type},methods:{togglePassword:function(){this.showPassword=!this.showPassword,this.fieldType=this.showPassword?"text":"password",this.$emit("showpassword",this.showPassword)},onBlur:function(o){this.isActive=!1,this.$emit("blur",o.target.value),this.showCheck&&(this.shouldShowCheck=!0)},onFocus:function(o){this.isActive=!0,this.$emit("focus")},onKeyupEnter:function(o){this.isActive=!1,this.$emit("onKeyupEnter",o.target.value)},checkAutofill:function(){const o=this.$refs.input;o&&o.value&&this.$emit("update:modelValue",o.value)}}},E={class:"pt-2"},_=["for"],S=["textContent"],x={key:0,class:"text-red"},N={key:1,textContent:" (optioneel)",class:"font-normal"},z=["id","value","type","name","placeholder","required","optional","error","minlength","maxlength","autocomplete","autofocus","inputmode","disabled","readonly","aria-describedby","aria-errormessage","pattern","aria-invalid"],I=["aria-pressed","aria-label"],T={class:"sr-only"},q={key:1,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-error-500"},P={key:2,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-green"},A=["id","textContent"],M=["id"],F=["textContent"],K=["textContent"];function D(o,n,t,s,d,l){const L=e.resolveComponent("icon-privacy"),j=e.resolveComponent("icon-eye-slash"),O=e.resolveComponent("icon-alert"),H=e.resolveComponent("icon-check");return e.openBlock(),e.createElementBlock("div",E,[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:o.computedId,class:e.normalizeClass(["max-w-full whitespace-nowrap text-sm font-bold",{active:o.isActive||t.modelValue,"text-blue-dark":t.disabled,"text-blue":o.isActive,"text-blue-dark":!t.error&&!o.isActive,"text-blue-dark":t.error&&!o.isActive}])},[e.createElementVNode("span",{textContent:e.toDisplayString(t.label)},null,8,S),t.required?(e.openBlock(),e.createElementBlock("span",x," * ")):e.createCommentVNode("",!0),t.optional?(e.openBlock(),e.createElementBlock("span",N)):e.createCommentVNode("",!0)],10,_)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["relative mt-1 rounded-sm",[l.outlineClass,o.isActive||t.error?"border-2":"border",t.disabled&&t.modelValue||t.readonly?"bg-blue-dark-100":""]])},[e.createElementVNode("input",{id:o.computedId,ref:"input",value:t.modelValue,type:o.fieldType,name:t.name,placeholder:t.placeholder,required:t.required,optional:t.optional,error:t.error,minlength:t.minlength,maxlength:t.maxlength,autocomplete:t.autocomplete,autofocus:t.autofocus,inputmode:t.inputmode,disabled:t.disabled,readonly:t.readonly,"aria-describedby":t.hint?o.computedId+"-hint":null,"aria-errormessage":t.error?o.computedId+"-errormsg":null,pattern:t.pattern,"aria-invalid":t.error.toString(),class:"block h-12 w-full appearance-none border-0 bg-transparent pl-4 pr-8 focus:outline-none","data-clarity-mask":"true",onInput:n[0]||(n[0]=r=>o.$emit("update:modelValue",r.target.value)),onBlur:n[1]||(n[1]=(...r)=>l.onBlur&&l.onBlur(...r)),onFocus:n[2]||(n[2]=(...r)=>l.onFocus&&l.onFocus(...r)),onKeyup:n[3]||(n[3]=e.withKeys((...r)=>l.onKeyupEnter&&l.onKeyupEnter(...r),["enter"]))},null,40,z),o.initialType==="password"&&!t.hidepasswordicon&&!t.disabled?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["absolute right-0 top-0",{"right-8":t.error}])},[e.createElementVNode("button",{type:"button",class:"m-1 px-2 py-3 focus-visible:outline-blue-dark","aria-pressed":o.showPassword,"aria-label":o.showPassword?"Verberg wachtwoord":"Toon wachtwoord",onClick:n[4]||(n[4]=(...r)=>l.togglePassword&&l.togglePassword(...r))},[o.showPassword?(e.openBlock(),e.createBlock(L,{key:0,class:"h-4 w-4","aria-hidden":"true"})):(e.openBlock(),e.createBlock(j,{key:1,class:"h-4 w-4","aria-hidden":"true"})),e.createElementVNode("span",T,e.toDisplayString(o.showPassword?"verberg":"toon")+" wachtwoord",1)],8,I)],2)):e.createCommentVNode("",!0),t.error?(e.openBlock(),e.createElementBlock("div",q,[e.createVNode(O,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0),!t.error&&t.modelValue&&o.shouldShowCheck?(e.openBlock(),e.createElementBlock("div",P,[e.createVNode(H,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0)],2),t.hint&&!t.error?(e.openBlock(),e.createElementBlock("div",{key:1,id:o.computedId+"-hint",class:e.normalizeClass(["w-full pt-1 text-xs leading-4",{"text-grey-500":t.disabled}]),textContent:e.toDisplayString(t.hint)},null,10,A)):e.createCommentVNode("",!0),t.error&&t.errormessage?(e.openBlock(),e.createElementBlock("div",{key:2,id:o.computedId+"-errormsg",class:"w-full pt-1 text-sm font-bold leading-4 text-error-500","aria-live":"assertive"},[e.createElementVNode("span",{textContent:e.toDisplayString(t.errormessage)},null,8,F)],8,M)):e.createCommentVNode("",!0),o.initialType==="password"?(e.openBlock(),e.createElementBlock("p",{key:3,class:"sr-only","aria-live":"polite",textContent:e.toDisplayString(o.showPassword?"wachtwoord wordt getoond":"wachtwoord is verborgen")},null,8,K)):e.createCommentVNode("",!0)])}const i=C(V,[["render",D],["__scopeId","data-v-5a4e94c9"]]);a.InputField=i,a.default=i,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|