@greghowe79/the-lib 2.13.4 → 2.13.5
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/lib/components/input/input.qwik.cjs +10 -18
- package/lib/components/input/input.qwik.mjs +10 -18
- package/lib/components/text_area/text_area.qwik.cjs +4 -13
- package/lib/components/text_area/text_area.qwik.mjs +4 -13
- package/lib-types/components/input/input.d.ts +1 -1
- package/lib-types/components/text_area/text_area.d.ts +2 -3
- package/package.json +1 -1
|
@@ -3,7 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
|
|
4
4
|
const qwik = require("@builder.io/qwik");
|
|
5
5
|
const styles = require("./styles.css.qwik.cjs");
|
|
6
|
-
const isSignal = (v) => v !== null && typeof v === "object" && "value" in v;
|
|
7
6
|
const displayLocalImage = qwik.$((file, imageUrl) => {
|
|
8
7
|
const allowedExtensions = [
|
|
9
8
|
".jpg",
|
|
@@ -31,45 +30,43 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
|
|
|
31
30
|
const internalError = qwik.useSignal(null);
|
|
32
31
|
const isPasswordVisible = qwik.useSignal(false);
|
|
33
32
|
const showError = error ?? internalError;
|
|
34
|
-
const valueIsSignal = isSignal(value);
|
|
35
|
-
const resolvedValue = valueIsSignal ? value.value : value ?? "";
|
|
36
33
|
const togglePasswordVisibility = qwik.$(() => {
|
|
37
34
|
isPasswordVisible.value = !isPasswordVisible.value;
|
|
38
35
|
});
|
|
39
36
|
const inputHandler = qwik.$(async (_, elem) => {
|
|
40
37
|
if (type === "url" && _.type === "blur" && lowercaseOnBlur) {
|
|
41
38
|
elem.value = elem.value.toLowerCase();
|
|
42
|
-
if (
|
|
39
|
+
if (value) value.value = elem.value.toLowerCase();
|
|
43
40
|
}
|
|
44
41
|
if (type === "number") {
|
|
45
|
-
if (
|
|
42
|
+
if (value) value.value = elem.value;
|
|
46
43
|
if (!/^\d+$/.test(elem.value)) {
|
|
47
|
-
if (
|
|
44
|
+
if (value) {
|
|
48
45
|
elem.value = value.value;
|
|
49
46
|
}
|
|
50
47
|
return;
|
|
51
48
|
}
|
|
52
49
|
if (elem.value.length > 1 && elem.value.startsWith("0")) {
|
|
53
50
|
elem.value = elem.value.slice(0, -1);
|
|
54
|
-
if (
|
|
51
|
+
if (value) value.value = elem.value;
|
|
55
52
|
return;
|
|
56
53
|
}
|
|
57
54
|
const num = parseInt(elem.value, 10);
|
|
58
55
|
if (!isNaN(num) && num > 100) {
|
|
59
56
|
elem.value = elem.value.slice(0, -1);
|
|
60
|
-
if (
|
|
57
|
+
if (value) value.value = elem.value;
|
|
61
58
|
return;
|
|
62
59
|
}
|
|
63
60
|
}
|
|
64
61
|
if (type === "tel") {
|
|
65
62
|
if (!/^[0-9]*$/.test(elem.value)) {
|
|
66
|
-
if (
|
|
63
|
+
if (value) {
|
|
67
64
|
elem.value = value.value;
|
|
68
65
|
}
|
|
69
66
|
return;
|
|
70
67
|
}
|
|
71
68
|
}
|
|
72
|
-
if (
|
|
69
|
+
if (value) value.value = elem.value;
|
|
73
70
|
if (onInput$ && _.type === "input") {
|
|
74
71
|
await onInput$(_, elem);
|
|
75
72
|
}
|
|
@@ -79,11 +76,6 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
|
|
|
79
76
|
}
|
|
80
77
|
});
|
|
81
78
|
const effectiveType = type === "password" && isPasswordVisible.value ? "text" : type;
|
|
82
|
-
const inputBindProps = valueIsSignal ? {
|
|
83
|
-
"bind:value": value
|
|
84
|
-
} : {
|
|
85
|
-
value: resolvedValue
|
|
86
|
-
};
|
|
87
79
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
88
80
|
class: "input-container",
|
|
89
81
|
children: [
|
|
@@ -148,7 +140,7 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
|
|
|
148
140
|
pattern: "[0-9]*",
|
|
149
141
|
class: `input ${showError.value ? "error" : ""}`,
|
|
150
142
|
placeholder,
|
|
151
|
-
|
|
143
|
+
"bind:value": value,
|
|
152
144
|
onInput$: inputHandler,
|
|
153
145
|
onBlur$: inputHandler,
|
|
154
146
|
maxLength: 14,
|
|
@@ -199,7 +191,7 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
|
|
|
199
191
|
type: effectiveType,
|
|
200
192
|
class: `input ${showError.value ? "error" : ""}`,
|
|
201
193
|
placeholder,
|
|
202
|
-
|
|
194
|
+
"bind:value": value,
|
|
203
195
|
onInput$: inputHandler,
|
|
204
196
|
onBlur$: inputHandler,
|
|
205
197
|
required,
|
|
@@ -237,7 +229,7 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
|
|
|
237
229
|
type,
|
|
238
230
|
class: `input ${showError.value ? "error" : ""}`,
|
|
239
231
|
placeholder,
|
|
240
|
-
|
|
232
|
+
"bind:value": value,
|
|
241
233
|
onInput$: inputHandler,
|
|
242
234
|
onBlur$: inputHandler,
|
|
243
235
|
required,
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from "@builder.io/qwik/jsx-runtime";
|
|
2
2
|
import { $, noSerialize, component$, useStylesScoped$, useSignal } from "@builder.io/qwik";
|
|
3
3
|
import styles from "./styles.css.qwik.mjs";
|
|
4
|
-
const isSignal = (v) => v !== null && typeof v === "object" && "value" in v;
|
|
5
4
|
const displayLocalImage = $((file, imageUrl) => {
|
|
6
5
|
const allowedExtensions = [
|
|
7
6
|
".jpg",
|
|
@@ -29,45 +28,43 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
|
|
|
29
28
|
const internalError = useSignal(null);
|
|
30
29
|
const isPasswordVisible = useSignal(false);
|
|
31
30
|
const showError = error ?? internalError;
|
|
32
|
-
const valueIsSignal = isSignal(value);
|
|
33
|
-
const resolvedValue = valueIsSignal ? value.value : value ?? "";
|
|
34
31
|
const togglePasswordVisibility = $(() => {
|
|
35
32
|
isPasswordVisible.value = !isPasswordVisible.value;
|
|
36
33
|
});
|
|
37
34
|
const inputHandler = $(async (_, elem) => {
|
|
38
35
|
if (type === "url" && _.type === "blur" && lowercaseOnBlur) {
|
|
39
36
|
elem.value = elem.value.toLowerCase();
|
|
40
|
-
if (
|
|
37
|
+
if (value) value.value = elem.value.toLowerCase();
|
|
41
38
|
}
|
|
42
39
|
if (type === "number") {
|
|
43
|
-
if (
|
|
40
|
+
if (value) value.value = elem.value;
|
|
44
41
|
if (!/^\d+$/.test(elem.value)) {
|
|
45
|
-
if (
|
|
42
|
+
if (value) {
|
|
46
43
|
elem.value = value.value;
|
|
47
44
|
}
|
|
48
45
|
return;
|
|
49
46
|
}
|
|
50
47
|
if (elem.value.length > 1 && elem.value.startsWith("0")) {
|
|
51
48
|
elem.value = elem.value.slice(0, -1);
|
|
52
|
-
if (
|
|
49
|
+
if (value) value.value = elem.value;
|
|
53
50
|
return;
|
|
54
51
|
}
|
|
55
52
|
const num = parseInt(elem.value, 10);
|
|
56
53
|
if (!isNaN(num) && num > 100) {
|
|
57
54
|
elem.value = elem.value.slice(0, -1);
|
|
58
|
-
if (
|
|
55
|
+
if (value) value.value = elem.value;
|
|
59
56
|
return;
|
|
60
57
|
}
|
|
61
58
|
}
|
|
62
59
|
if (type === "tel") {
|
|
63
60
|
if (!/^[0-9]*$/.test(elem.value)) {
|
|
64
|
-
if (
|
|
61
|
+
if (value) {
|
|
65
62
|
elem.value = value.value;
|
|
66
63
|
}
|
|
67
64
|
return;
|
|
68
65
|
}
|
|
69
66
|
}
|
|
70
|
-
if (
|
|
67
|
+
if (value) value.value = elem.value;
|
|
71
68
|
if (onInput$ && _.type === "input") {
|
|
72
69
|
await onInput$(_, elem);
|
|
73
70
|
}
|
|
@@ -77,11 +74,6 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
|
|
|
77
74
|
}
|
|
78
75
|
});
|
|
79
76
|
const effectiveType = type === "password" && isPasswordVisible.value ? "text" : type;
|
|
80
|
-
const inputBindProps = valueIsSignal ? {
|
|
81
|
-
"bind:value": value
|
|
82
|
-
} : {
|
|
83
|
-
value: resolvedValue
|
|
84
|
-
};
|
|
85
77
|
return /* @__PURE__ */ jsxs("div", {
|
|
86
78
|
class: "input-container",
|
|
87
79
|
children: [
|
|
@@ -146,7 +138,7 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
|
|
|
146
138
|
pattern: "[0-9]*",
|
|
147
139
|
class: `input ${showError.value ? "error" : ""}`,
|
|
148
140
|
placeholder,
|
|
149
|
-
|
|
141
|
+
"bind:value": value,
|
|
150
142
|
onInput$: inputHandler,
|
|
151
143
|
onBlur$: inputHandler,
|
|
152
144
|
maxLength: 14,
|
|
@@ -197,7 +189,7 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
|
|
|
197
189
|
type: effectiveType,
|
|
198
190
|
class: `input ${showError.value ? "error" : ""}`,
|
|
199
191
|
placeholder,
|
|
200
|
-
|
|
192
|
+
"bind:value": value,
|
|
201
193
|
onInput$: inputHandler,
|
|
202
194
|
onBlur$: inputHandler,
|
|
203
195
|
required,
|
|
@@ -235,7 +227,7 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
|
|
|
235
227
|
type,
|
|
236
228
|
class: `input ${showError.value ? "error" : ""}`,
|
|
237
229
|
placeholder,
|
|
238
|
-
|
|
230
|
+
"bind:value": value,
|
|
239
231
|
onInput$: inputHandler,
|
|
240
232
|
onBlur$: inputHandler,
|
|
241
233
|
required,
|
|
@@ -3,17 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
|
|
4
4
|
const qwik = require("@builder.io/qwik");
|
|
5
5
|
const styles = require("./styles.css.qwik.cjs");
|
|
6
|
-
const
|
|
7
|
-
const TextArea = qwik.component$(({ id, title, content, onInput$, required = false, placeholder, bgLight, maxLength, showCounter = false }) => {
|
|
6
|
+
const TextArea = qwik.component$(({ id, title, content, required = false, placeholder, bgLight, maxLength, showCounter = false }) => {
|
|
8
7
|
qwik.useStylesScoped$(styles);
|
|
9
|
-
const
|
|
10
|
-
const resolvedContent = contentIsSignal ? content.value : content ?? "";
|
|
11
|
-
const currentLength = resolvedContent.length;
|
|
12
|
-
const textareaBindProps = contentIsSignal ? {
|
|
13
|
-
"bind:value": content
|
|
14
|
-
} : {
|
|
15
|
-
value: resolvedContent
|
|
16
|
-
};
|
|
8
|
+
const currentLength = content?.value?.length ?? 0;
|
|
17
9
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
18
10
|
class: "text-area-container",
|
|
19
11
|
children: [
|
|
@@ -27,13 +19,12 @@ const TextArea = qwik.component$(({ id, title, content, onInput$, required = fal
|
|
|
27
19
|
name: "story",
|
|
28
20
|
rows: 5,
|
|
29
21
|
cols: 33,
|
|
30
|
-
|
|
31
|
-
onInput$: !contentIsSignal ? onInput$ : void 0,
|
|
22
|
+
"bind:value": content,
|
|
32
23
|
required,
|
|
33
24
|
placeholder,
|
|
34
25
|
class: `text-area ${bgLight ? "bg_light" : ""}`,
|
|
35
26
|
maxLength,
|
|
36
|
-
children:
|
|
27
|
+
children: content.value
|
|
37
28
|
}),
|
|
38
29
|
showCounter && maxLength && /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
39
30
|
class: `counter ${currentLength >= maxLength ? "counter-limit" : ""}`,
|
|
@@ -1,17 +1,9 @@
|
|
|
1
1
|
import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
|
|
2
2
|
import { component$, useStylesScoped$ } from "@builder.io/qwik";
|
|
3
3
|
import styles from "./styles.css.qwik.mjs";
|
|
4
|
-
const
|
|
5
|
-
const TextArea = component$(({ id, title, content, onInput$, required = false, placeholder, bgLight, maxLength, showCounter = false }) => {
|
|
4
|
+
const TextArea = component$(({ id, title, content, required = false, placeholder, bgLight, maxLength, showCounter = false }) => {
|
|
6
5
|
useStylesScoped$(styles);
|
|
7
|
-
const
|
|
8
|
-
const resolvedContent = contentIsSignal ? content.value : content ?? "";
|
|
9
|
-
const currentLength = resolvedContent.length;
|
|
10
|
-
const textareaBindProps = contentIsSignal ? {
|
|
11
|
-
"bind:value": content
|
|
12
|
-
} : {
|
|
13
|
-
value: resolvedContent
|
|
14
|
-
};
|
|
6
|
+
const currentLength = content?.value?.length ?? 0;
|
|
15
7
|
return /* @__PURE__ */ jsxs("div", {
|
|
16
8
|
class: "text-area-container",
|
|
17
9
|
children: [
|
|
@@ -25,13 +17,12 @@ const TextArea = component$(({ id, title, content, onInput$, required = false, p
|
|
|
25
17
|
name: "story",
|
|
26
18
|
rows: 5,
|
|
27
19
|
cols: 33,
|
|
28
|
-
|
|
29
|
-
onInput$: !contentIsSignal ? onInput$ : void 0,
|
|
20
|
+
"bind:value": content,
|
|
30
21
|
required,
|
|
31
22
|
placeholder,
|
|
32
23
|
class: `text-area ${bgLight ? "bg_light" : ""}`,
|
|
33
24
|
maxLength,
|
|
34
|
-
children:
|
|
25
|
+
children: content.value
|
|
35
26
|
}),
|
|
36
27
|
showCounter && maxLength && /* @__PURE__ */ jsxs("div", {
|
|
37
28
|
class: `counter ${currentLength >= maxLength ? "counter-limit" : ""}`,
|
|
@@ -4,7 +4,7 @@ export interface InputProps {
|
|
|
4
4
|
id: string;
|
|
5
5
|
type: InputType;
|
|
6
6
|
placeholder?: string;
|
|
7
|
-
value?: Signal<string
|
|
7
|
+
value?: Signal<string>;
|
|
8
8
|
error?: Signal<string | null>;
|
|
9
9
|
onValidate$?: QRL<(value: string) => Promise<string>>;
|
|
10
10
|
onInput$?: QRL<() => void> | QRL<(event: InputEvent, el: HTMLInputElement) => void>;
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Signal } from '@builder.io/qwik';
|
|
2
2
|
export interface TextAreaProps {
|
|
3
3
|
id: string;
|
|
4
4
|
title?: string;
|
|
5
|
-
content: Signal<string
|
|
6
|
-
onInput$?: QRL<(event: InputEvent, el: HTMLTextAreaElement) => void>;
|
|
5
|
+
content: Signal<string>;
|
|
7
6
|
required?: boolean;
|
|
8
7
|
placeholder?: string;
|
|
9
8
|
bgLight?: boolean;
|