@wikicasa-dev/components 1.7.3 → 1.7.4
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 +50 -50
- package/dist/UIKit/BaseInput.vue.d.ts +3 -3
- package/dist/assets/BaseInput.css +1 -1
- package/package.json +1 -1
package/dist/BaseInput.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import './assets/BaseInput.css';
|
|
2
|
-
import { defineComponent as N, mergeModels as M, useModel as O, ref as
|
|
2
|
+
import { defineComponent as N, mergeModels as M, useModel as O, ref as p, watch as $, useAttrs as j, openBlock as o, createElementBlock as d, normalizeClass as m, unref as u, renderSlot as v, createElementVNode as h, 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";
|
|
@@ -22,24 +22,24 @@ const W = ["id", "data-cy", "name", "autocomplete", "disabled", "aria-labelledby
|
|
|
22
22
|
}),
|
|
23
23
|
emits: /* @__PURE__ */ M(["click", "keydownEnterPressed", "focusin", "focusout", "keydown"], ["update:modelValue"]),
|
|
24
24
|
setup(y, { expose: E, emit: H }) {
|
|
25
|
-
const t = y, l = O(y, "modelValue"),
|
|
26
|
-
labelState:
|
|
25
|
+
const t = y, l = O(y, "modelValue"), n = p(""), f = H, {
|
|
26
|
+
labelState: r,
|
|
27
27
|
handleFocusIn: P,
|
|
28
28
|
handleFocusOut: V,
|
|
29
29
|
setInlineLabel: F,
|
|
30
30
|
setFloatingLabel: L
|
|
31
|
-
} = Q(
|
|
32
|
-
t.feedback && (
|
|
31
|
+
} = Q(f), s = p("text"), k = p({}), b = p(null), q = () => {
|
|
32
|
+
t.feedback && (k.value = t.feedback, t.feedback.valid && typeof t.feedback.valid == "string" && (k.value.valid = [t.feedback.valid]), t.feedback.invalid && typeof t.feedback.invalid == "string" && (k.value.invalid = [t.feedback.invalid]));
|
|
33
33
|
}, T = (e, i) => {
|
|
34
34
|
if (!t.formatter || !t.formatter.formatFn)
|
|
35
|
-
return
|
|
35
|
+
return n.value = e, "";
|
|
36
36
|
const a = e.length ? t.formatter.formatFn(e) : e;
|
|
37
|
-
return i
|
|
37
|
+
return i && (i.value = a), n.value = a, a;
|
|
38
38
|
}, I = (e) => {
|
|
39
39
|
if (!t.formatter || !t.formatter.unFormatFn)
|
|
40
40
|
return l.value = e, "";
|
|
41
41
|
const i = t.formatter.unFormatFn(e);
|
|
42
|
-
return l.value = i, i;
|
|
42
|
+
return l.value = i ?? "", i;
|
|
43
43
|
}, z = ({ target: e }) => {
|
|
44
44
|
const i = e, a = I(i.value);
|
|
45
45
|
a || (l.value = i.value), T(
|
|
@@ -49,9 +49,9 @@ const W = ["id", "data-cy", "name", "autocomplete", "disabled", "aria-labelledby
|
|
|
49
49
|
}, S = () => {
|
|
50
50
|
l.value = "", F();
|
|
51
51
|
}, A = () => {
|
|
52
|
-
|
|
52
|
+
s.value === "password" ? s.value = "text" : s.value === "text" && (s.value = "password");
|
|
53
53
|
};
|
|
54
|
-
|
|
54
|
+
$(
|
|
55
55
|
() => t.feedback,
|
|
56
56
|
() => {
|
|
57
57
|
q();
|
|
@@ -59,34 +59,34 @@ const W = ["id", "data-cy", "name", "autocomplete", "disabled", "aria-labelledby
|
|
|
59
59
|
{
|
|
60
60
|
immediate: !0
|
|
61
61
|
}
|
|
62
|
-
),
|
|
62
|
+
), $(
|
|
63
63
|
l,
|
|
64
64
|
(e) => {
|
|
65
65
|
T(
|
|
66
66
|
`${e}`,
|
|
67
|
-
I(`${e}`) === e ?
|
|
68
|
-
),
|
|
67
|
+
I(`${e}`) === e ? b.value : void 0
|
|
68
|
+
), n.value != null && n.value.length > 0 && r.value !== "floating-label" ? L() : !n.value && document && document.activeElement !== b.value && F();
|
|
69
69
|
},
|
|
70
70
|
{
|
|
71
71
|
immediate: !0
|
|
72
72
|
}
|
|
73
|
-
),
|
|
73
|
+
), $(
|
|
74
74
|
() => t.keepFloatingLabel,
|
|
75
75
|
(e) => {
|
|
76
76
|
e ? L() : V(l.value);
|
|
77
77
|
}
|
|
78
78
|
);
|
|
79
79
|
const K = j();
|
|
80
|
-
return
|
|
80
|
+
return s.value = K.type || "text", E({
|
|
81
81
|
select: () => {
|
|
82
|
-
|
|
82
|
+
b.value?.select();
|
|
83
83
|
}
|
|
84
|
-
}), (e, i) => (
|
|
85
|
-
class:
|
|
84
|
+
}), (e, i) => (o(), d("div", {
|
|
85
|
+
class: m(["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", [
|
|
86
86
|
e.$attrs.class,
|
|
87
87
|
{ "uikit-h-12": e.labelText },
|
|
88
88
|
{ "floating-label": e.labelText },
|
|
89
|
-
|
|
89
|
+
u(r) === "floating-label" ? "floating-state" : "inline-state",
|
|
90
90
|
{
|
|
91
91
|
"has-right-icon": e.$attrs["with-right-icon"] !== void 0 ? e.$attrs["with-right-icon"] : !!e.$slots.righticon
|
|
92
92
|
},
|
|
@@ -96,19 +96,19 @@ const W = ["id", "data-cy", "name", "autocomplete", "disabled", "aria-labelledby
|
|
|
96
96
|
{ "is-invalid": e.isValid === !1, "is-valid": e.isValid }
|
|
97
97
|
]])
|
|
98
98
|
}, [
|
|
99
|
-
|
|
100
|
-
|
|
99
|
+
v(e.$slots, "leftIcon", {}, void 0, !0),
|
|
100
|
+
v(e.$slots, "righticon", {
|
|
101
101
|
handleClean: S,
|
|
102
102
|
handleShowPasswd: A,
|
|
103
|
-
curType:
|
|
103
|
+
curType: s.value
|
|
104
104
|
}, void 0, !0),
|
|
105
|
-
|
|
105
|
+
h("input", {
|
|
106
106
|
id: e.$attrs.id,
|
|
107
107
|
ref_key: "baseInputEl",
|
|
108
|
-
ref:
|
|
108
|
+
ref: b,
|
|
109
109
|
"data-cy": e.$attrs["data-cy"],
|
|
110
110
|
name: e.$attrs.name,
|
|
111
|
-
class:
|
|
111
|
+
class: m(["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", [
|
|
112
112
|
{ "uikit-text-w-secondary": e.$attrs.disabled },
|
|
113
113
|
{
|
|
114
114
|
"is-invalid invalid-bg !uikit-pr-9": e.isValid === !1,
|
|
@@ -126,25 +126,25 @@ const W = ["id", "data-cy", "name", "autocomplete", "disabled", "aria-labelledby
|
|
|
126
126
|
disabled: e.$attrs.disabled,
|
|
127
127
|
"aria-labelledby": e.$attrs.id,
|
|
128
128
|
readonly: e.$attrs.readonly,
|
|
129
|
-
type:
|
|
129
|
+
type: s.value,
|
|
130
130
|
pattern: e.$attrs.pattern,
|
|
131
131
|
min: e.$attrs.min,
|
|
132
132
|
max: e.$attrs.max,
|
|
133
133
|
maxlength: e.$attrs.maxlength,
|
|
134
134
|
inputmode: e.$attrs.inputmode,
|
|
135
135
|
placeholder: e.$attrs.placeholder,
|
|
136
|
-
onClick: i[0] || (i[0] = (a) =>
|
|
137
|
-
onFocusin: i[1] || (i[1] = g(() => e.labelText &&
|
|
138
|
-
onFocusout: i[2] || (i[2] = g((a) => e.labelText && !e.keepFloatingLabel &&
|
|
136
|
+
onClick: i[0] || (i[0] = (a) => f("click", a)),
|
|
137
|
+
onFocusin: i[1] || (i[1] = g(() => e.labelText && u(P)(), ["stop"])),
|
|
138
|
+
onFocusout: i[2] || (i[2] = g((a) => e.labelText && !e.keepFloatingLabel && u(V)(n.value), ["stop"])),
|
|
139
139
|
onInput: g(z, ["stop"]),
|
|
140
|
-
value:
|
|
140
|
+
value: n.value,
|
|
141
141
|
onKeydown: [
|
|
142
|
-
i[3] || (i[3] = D(() =>
|
|
143
|
-
i[4] || (i[4] = (a) =>
|
|
142
|
+
i[3] || (i[3] = D(() => f("keydownEnterPressed"), ["enter"])),
|
|
143
|
+
i[4] || (i[4] = (a) => f("keydown", a))
|
|
144
144
|
]
|
|
145
145
|
}, null, 42, W),
|
|
146
|
-
|
|
147
|
-
class:
|
|
146
|
+
h("fieldset", {
|
|
147
|
+
class: m(["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", [
|
|
148
148
|
{ "uikit-bg-w-cultured": e.$attrs.disabled },
|
|
149
149
|
{
|
|
150
150
|
"is-invalid uikit-border-w-danger": e.isValid === !1,
|
|
@@ -155,51 +155,51 @@ const W = ["id", "data-cy", "name", "autocomplete", "disabled", "aria-labelledby
|
|
|
155
155
|
e.$attrs["fieldset-classes"]
|
|
156
156
|
]])
|
|
157
157
|
}, [
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
class:
|
|
158
|
+
h("legend", X, [
|
|
159
|
+
h("span", {
|
|
160
|
+
class: m(["visible-label uikit-opacity-0", [
|
|
161
161
|
{ "uikit-mx-5px": e.labelText },
|
|
162
162
|
{
|
|
163
|
-
"uikit-visible uikit-inline-block":
|
|
163
|
+
"uikit-visible uikit-inline-block": u(r) === "floating-label"
|
|
164
164
|
},
|
|
165
165
|
{
|
|
166
|
-
"uikit-invisible uikit-hidden":
|
|
166
|
+
"uikit-invisible uikit-hidden": u(r) === "inline-label"
|
|
167
167
|
}
|
|
168
168
|
]]),
|
|
169
169
|
innerHTML: e.labelText
|
|
170
170
|
}, null, 10, Y)
|
|
171
171
|
])
|
|
172
172
|
], 2),
|
|
173
|
-
e.labelText ? (
|
|
173
|
+
e.labelText ? (o(), G(J, {
|
|
174
174
|
key: 0,
|
|
175
175
|
for: e.$attrs.id,
|
|
176
176
|
"label-text": e.labelText,
|
|
177
|
-
"label-state":
|
|
177
|
+
"label-state": u(r),
|
|
178
178
|
"is-valid": e.isValid,
|
|
179
179
|
required: e.$attrs.required,
|
|
180
180
|
disabled: e.$attrs.disabled,
|
|
181
181
|
"label-classes": [
|
|
182
|
-
|
|
182
|
+
u(r) === "floating-label" ? "!-uikit-top-1" : "!uikit-top-4",
|
|
183
183
|
e.$attrs["label-classes"]
|
|
184
184
|
]
|
|
185
185
|
}, null, 8, ["for", "label-text", "label-state", "is-valid", "required", "disabled", "label-classes"])) : w("", !0),
|
|
186
|
-
|
|
187
|
-
e.isValid === !1 ? (
|
|
188
|
-
key: `${e.$attrs.id}_invalid_${
|
|
186
|
+
v(e.$slots, "feedback", {}, () => [
|
|
187
|
+
e.isValid === !1 ? (o(!0), d(C, { key: 0 }, B(k.value.invalid, (a, c) => (o(), d("div", {
|
|
188
|
+
key: `${e.$attrs.id}_invalid_${c}`,
|
|
189
189
|
class: "uikit-mt-1 uikit-text-12 uikit-text-w-danger",
|
|
190
190
|
innerHTML: a
|
|
191
|
-
}, null, 8, Z))), 128)) : e.isValid === !0 ? (
|
|
192
|
-
key: `${e.$attrs.id}_valid_${
|
|
191
|
+
}, null, 8, Z))), 128)) : e.isValid === !0 ? (o(!0), d(C, { key: 1 }, B(k.value.valid, (a, c) => (o(), d("div", {
|
|
192
|
+
key: `${e.$attrs.id}_valid_${c}`,
|
|
193
193
|
class: "uikit-mt-1 uikit-text-12 uikit-text-w-primary",
|
|
194
194
|
innerHTML: a
|
|
195
195
|
}, null, 8, U))), 128)) : w("", !0)
|
|
196
196
|
], !0),
|
|
197
|
-
e.$slots["under-label"] ? (
|
|
198
|
-
|
|
197
|
+
e.$slots["under-label"] ? (o(), d("div", x, [
|
|
198
|
+
v(e.$slots, "under-label", {}, void 0, !0)
|
|
199
199
|
])) : w("", !0)
|
|
200
200
|
], 2));
|
|
201
201
|
}
|
|
202
|
-
}), ne = /* @__PURE__ */ R(_, [["__scopeId", "data-v-
|
|
202
|
+
}), ne = /* @__PURE__ */ R(_, [["__scopeId", "data-v-423a2c93"]]);
|
|
203
203
|
export {
|
|
204
204
|
ne as default
|
|
205
205
|
};
|
|
@@ -23,7 +23,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
23
23
|
formatter: {
|
|
24
24
|
type: import("vue").PropType<Nullable<Partial<{
|
|
25
25
|
formatFn: (n: string | number) => string;
|
|
26
|
-
unFormatFn: (v: string) => string | number;
|
|
26
|
+
unFormatFn: (v: string) => string | number | null;
|
|
27
27
|
}>>>;
|
|
28
28
|
default: null;
|
|
29
29
|
};
|
|
@@ -59,7 +59,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
59
59
|
formatter: {
|
|
60
60
|
type: import("vue").PropType<Nullable<Partial<{
|
|
61
61
|
formatFn: (n: string | number) => string;
|
|
62
|
-
unFormatFn: (v: string) => string | number;
|
|
62
|
+
unFormatFn: (v: string) => string | number | null;
|
|
63
63
|
}>>>;
|
|
64
64
|
default: null;
|
|
65
65
|
};
|
|
@@ -76,7 +76,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
76
76
|
keepFloatingLabel: boolean;
|
|
77
77
|
formatter: Nullable<Partial<{
|
|
78
78
|
formatFn: (n: string | number) => string;
|
|
79
|
-
unFormatFn: (v: string) => string | number;
|
|
79
|
+
unFormatFn: (v: string) => string | number | null;
|
|
80
80
|
}>>;
|
|
81
81
|
}, {}>, {
|
|
82
82
|
leftIcon?(_: {}): any;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.input-wrapper[data-v-
|
|
1
|
+
.input-wrapper[data-v-423a2c93]{--icon-default-size: 44px}.invalid-bg[data-v-423a2c93]{--invalid-img: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMicgZmlsbD0nbm9uZScgc3Ryb2tlPScjRkE0RjY0Jz48Y2lyY2xlIGN4PSc2JyBjeT0nNicgcj0nNC41Jy8+PHBhdGggc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcgZD0nTTUuOCAzLjZoLjRMNiA2LjV6Jy8+PGNpcmNsZSBjeD0nNicgY3k9JzguMicgcj0nLjYnIGZpbGw9JyNGQTRGNjQnIHN0cm9rZT0nbm9uZScvPjwvc3ZnPg==);background-image:var(--invalid-img)}.valid-bg[data-v-423a2c93]{--valid-img: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDgnPjxwYXRoIGZpbGw9JyMyQjVERkYnIGQ9J00yLjMgNi43My42IDQuNTNjLS40LTEuMDQuNDYtMS40IDEuMS0uOGwxLjEgMS40IDMuNC0zLjhjLjYtLjYzIDEuNi0uMjcgMS4yLjdsLTQgNC42Yy0uNDMuNS0uOC40LTEuMS4xeicvPjwvc3ZnPg==);background-image:var(--valid-img)}.invalid-bg[data-v-423a2c93],.valid-bg[data-v-423a2c93]{background-position:top 17px right 12px;background-size:20px}.has-right-icon[data-v-423a2c93]>label.inline-label{right:var(--icon-default-size)}.has-left-icon[data-v-423a2c93]>label.inline-label{left:var(--icon-default-size)}[data-v-423a2c93] .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-423a2c93] .text-input-icon.left{left:5px}[data-v-423a2c93] .text-input-icon.right{right:5px}[data-v-423a2c93] .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-423a2c93] .text-input-icon.md{--icon-size: var(--icon-size-md)}[data-v-423a2c93] .text-input-icon.lg{--icon-top: 0;--icon-size: var(--icon-size-lg)}.under-label[data-v-423a2c93]{left:4px;font-style:italic}
|