@nr1e/qwik-ui 0.0.23 → 0.0.25
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/checkbox-field.qwik.cjs +25 -4
- package/lib/components/checkbox-field.qwik.mjs +25 -4
- package/lib/components/select-field.qwik.cjs +37 -4
- package/lib/components/select-field.qwik.mjs +37 -4
- package/lib/components/text-field.qwik.cjs +38 -7
- package/lib/components/text-field.qwik.mjs +38 -7
- package/lib-types/components/checkbox-field.d.ts +1 -1
- package/lib-types/components/select-field.d.ts +1 -0
- package/lib-types/components/text-field.d.ts +1 -1
- package/package.json +1 -1
|
@@ -4,6 +4,7 @@ const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
|
|
|
4
4
|
const qwik = require("@builder.io/qwik");
|
|
5
5
|
const CheckboxField = qwik.component$((props) => {
|
|
6
6
|
const error = qwik.useSignal(typeof props.error === "string" ? props.error : props.error?.value);
|
|
7
|
+
const checked = qwik.useSignal(typeof props.checked === "boolean" ? props.checked : props.checked?.value ?? false);
|
|
7
8
|
qwik.useTask$(({ track }) => {
|
|
8
9
|
if (props.error && typeof props.error !== "string") {
|
|
9
10
|
track(() => error.value);
|
|
@@ -20,6 +21,22 @@ const CheckboxField = qwik.component$((props) => {
|
|
|
20
21
|
}
|
|
21
22
|
}
|
|
22
23
|
});
|
|
24
|
+
qwik.useTask$(({ track }) => {
|
|
25
|
+
if (props.checked && typeof props.checked !== "boolean") {
|
|
26
|
+
track(() => checked.value);
|
|
27
|
+
if (checked.value !== props.checked?.value) {
|
|
28
|
+
props.checked.value = checked.value;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
qwik.useTask$(({ track }) => {
|
|
33
|
+
if (props.checked && typeof props.checked !== "boolean") {
|
|
34
|
+
track(() => props.checked.value);
|
|
35
|
+
if (props.checked && checked.value !== props.checked.value) {
|
|
36
|
+
checked.value = props.checked.value;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
});
|
|
23
40
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
24
41
|
class: "fieldset",
|
|
25
42
|
children: [
|
|
@@ -37,11 +54,15 @@ const CheckboxField = qwik.component$((props) => {
|
|
|
37
54
|
...props.id && {
|
|
38
55
|
id: props.id
|
|
39
56
|
},
|
|
40
|
-
|
|
41
|
-
checked: props.checked
|
|
42
|
-
},
|
|
57
|
+
checked: checked.value,
|
|
43
58
|
class: `checkbox ${error.value ? "checkbox-error" : ""}`,
|
|
44
|
-
onClick$: (e) =>
|
|
59
|
+
onClick$: (e) => {
|
|
60
|
+
const target = e.target;
|
|
61
|
+
if (props.onClick$) {
|
|
62
|
+
props.onClick$(e, e.target.checked, error);
|
|
63
|
+
}
|
|
64
|
+
checked.value = target.checked;
|
|
65
|
+
}
|
|
45
66
|
}),
|
|
46
67
|
props.label
|
|
47
68
|
]
|
|
@@ -2,6 +2,7 @@ import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
|
|
|
2
2
|
import { component$, useSignal, useTask$ } from "@builder.io/qwik";
|
|
3
3
|
const CheckboxField = component$((props) => {
|
|
4
4
|
const error = useSignal(typeof props.error === "string" ? props.error : props.error?.value);
|
|
5
|
+
const checked = useSignal(typeof props.checked === "boolean" ? props.checked : props.checked?.value ?? false);
|
|
5
6
|
useTask$(({ track }) => {
|
|
6
7
|
if (props.error && typeof props.error !== "string") {
|
|
7
8
|
track(() => error.value);
|
|
@@ -18,6 +19,22 @@ const CheckboxField = component$((props) => {
|
|
|
18
19
|
}
|
|
19
20
|
}
|
|
20
21
|
});
|
|
22
|
+
useTask$(({ track }) => {
|
|
23
|
+
if (props.checked && typeof props.checked !== "boolean") {
|
|
24
|
+
track(() => checked.value);
|
|
25
|
+
if (checked.value !== props.checked?.value) {
|
|
26
|
+
props.checked.value = checked.value;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
useTask$(({ track }) => {
|
|
31
|
+
if (props.checked && typeof props.checked !== "boolean") {
|
|
32
|
+
track(() => props.checked.value);
|
|
33
|
+
if (props.checked && checked.value !== props.checked.value) {
|
|
34
|
+
checked.value = props.checked.value;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
});
|
|
21
38
|
return /* @__PURE__ */ jsxs("div", {
|
|
22
39
|
class: "fieldset",
|
|
23
40
|
children: [
|
|
@@ -35,11 +52,15 @@ const CheckboxField = component$((props) => {
|
|
|
35
52
|
...props.id && {
|
|
36
53
|
id: props.id
|
|
37
54
|
},
|
|
38
|
-
|
|
39
|
-
checked: props.checked
|
|
40
|
-
},
|
|
55
|
+
checked: checked.value,
|
|
41
56
|
class: `checkbox ${error.value ? "checkbox-error" : ""}`,
|
|
42
|
-
onClick$: (e) =>
|
|
57
|
+
onClick$: (e) => {
|
|
58
|
+
const target = e.target;
|
|
59
|
+
if (props.onClick$) {
|
|
60
|
+
props.onClick$(e, e.target.checked, error);
|
|
61
|
+
}
|
|
62
|
+
checked.value = target.checked;
|
|
63
|
+
}
|
|
43
64
|
}),
|
|
44
65
|
props.label
|
|
45
66
|
]
|
|
@@ -4,6 +4,7 @@ const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
|
|
|
4
4
|
const qwik = require("@builder.io/qwik");
|
|
5
5
|
const SelectField = qwik.component$((props) => {
|
|
6
6
|
const error = qwik.useSignal(typeof props.error === "string" ? props.error : props.error?.value);
|
|
7
|
+
const value = qwik.useSignal(typeof props.value === "string" ? props.value : props.value?.value);
|
|
7
8
|
qwik.useTask$(({ track }) => {
|
|
8
9
|
if (props.error && typeof props.error !== "string") {
|
|
9
10
|
track(() => error.value);
|
|
@@ -20,6 +21,22 @@ const SelectField = qwik.component$((props) => {
|
|
|
20
21
|
}
|
|
21
22
|
}
|
|
22
23
|
});
|
|
24
|
+
qwik.useTask$(({ track }) => {
|
|
25
|
+
if (props.value && typeof props.value !== "string") {
|
|
26
|
+
track(() => value.value);
|
|
27
|
+
if (value.value !== props.value?.value) {
|
|
28
|
+
props.value.value = value.value;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
qwik.useTask$(({ track }) => {
|
|
33
|
+
if (props.value && typeof props.value !== "string") {
|
|
34
|
+
track(() => props.value.value);
|
|
35
|
+
if (props.value && error.value !== props.value.value) {
|
|
36
|
+
value.value = props.value.value;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
});
|
|
23
40
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
24
41
|
class: "fieldset",
|
|
25
42
|
children: [
|
|
@@ -42,12 +59,28 @@ const SelectField = qwik.component$((props) => {
|
|
|
42
59
|
},
|
|
43
60
|
class: `select ${error.value ? "select-error" : ""}`,
|
|
44
61
|
onChange$: (e) => {
|
|
45
|
-
|
|
46
|
-
if (props.
|
|
62
|
+
const target = e.target;
|
|
63
|
+
if (props.onChange$) {
|
|
64
|
+
props.onChange$(e, target.value, error);
|
|
65
|
+
}
|
|
66
|
+
if (props.onEvent$) {
|
|
67
|
+
props.onEvent$("change", e, target.value, error);
|
|
68
|
+
}
|
|
69
|
+
if (props.value && typeof props.value !== "string") {
|
|
70
|
+
value.value = target.value;
|
|
71
|
+
}
|
|
47
72
|
},
|
|
48
73
|
onBlur$: (e) => {
|
|
49
|
-
|
|
50
|
-
if (props.
|
|
74
|
+
const target = e.target;
|
|
75
|
+
if (props.onBlur$) {
|
|
76
|
+
props.onBlur$(e, target.value, error);
|
|
77
|
+
}
|
|
78
|
+
if (props.onEvent$) {
|
|
79
|
+
props.onEvent$("blur", e, target.value, error);
|
|
80
|
+
}
|
|
81
|
+
if (props.value && typeof props.value !== "string") {
|
|
82
|
+
value.value = target.value;
|
|
83
|
+
}
|
|
51
84
|
},
|
|
52
85
|
children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
|
|
53
86
|
}),
|
|
@@ -2,6 +2,7 @@ import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
|
|
|
2
2
|
import { component$, useSignal, useTask$, Slot } from "@builder.io/qwik";
|
|
3
3
|
const SelectField = component$((props) => {
|
|
4
4
|
const error = useSignal(typeof props.error === "string" ? props.error : props.error?.value);
|
|
5
|
+
const value = useSignal(typeof props.value === "string" ? props.value : props.value?.value);
|
|
5
6
|
useTask$(({ track }) => {
|
|
6
7
|
if (props.error && typeof props.error !== "string") {
|
|
7
8
|
track(() => error.value);
|
|
@@ -18,6 +19,22 @@ const SelectField = component$((props) => {
|
|
|
18
19
|
}
|
|
19
20
|
}
|
|
20
21
|
});
|
|
22
|
+
useTask$(({ track }) => {
|
|
23
|
+
if (props.value && typeof props.value !== "string") {
|
|
24
|
+
track(() => value.value);
|
|
25
|
+
if (value.value !== props.value?.value) {
|
|
26
|
+
props.value.value = value.value;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
useTask$(({ track }) => {
|
|
31
|
+
if (props.value && typeof props.value !== "string") {
|
|
32
|
+
track(() => props.value.value);
|
|
33
|
+
if (props.value && error.value !== props.value.value) {
|
|
34
|
+
value.value = props.value.value;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
});
|
|
21
38
|
return /* @__PURE__ */ jsxs("div", {
|
|
22
39
|
class: "fieldset",
|
|
23
40
|
children: [
|
|
@@ -40,12 +57,28 @@ const SelectField = component$((props) => {
|
|
|
40
57
|
},
|
|
41
58
|
class: `select ${error.value ? "select-error" : ""}`,
|
|
42
59
|
onChange$: (e) => {
|
|
43
|
-
|
|
44
|
-
if (props.
|
|
60
|
+
const target = e.target;
|
|
61
|
+
if (props.onChange$) {
|
|
62
|
+
props.onChange$(e, target.value, error);
|
|
63
|
+
}
|
|
64
|
+
if (props.onEvent$) {
|
|
65
|
+
props.onEvent$("change", e, target.value, error);
|
|
66
|
+
}
|
|
67
|
+
if (props.value && typeof props.value !== "string") {
|
|
68
|
+
value.value = target.value;
|
|
69
|
+
}
|
|
45
70
|
},
|
|
46
71
|
onBlur$: (e) => {
|
|
47
|
-
|
|
48
|
-
if (props.
|
|
72
|
+
const target = e.target;
|
|
73
|
+
if (props.onBlur$) {
|
|
74
|
+
props.onBlur$(e, target.value, error);
|
|
75
|
+
}
|
|
76
|
+
if (props.onEvent$) {
|
|
77
|
+
props.onEvent$("blur", e, target.value, error);
|
|
78
|
+
}
|
|
79
|
+
if (props.value && typeof props.value !== "string") {
|
|
80
|
+
value.value = target.value;
|
|
81
|
+
}
|
|
49
82
|
},
|
|
50
83
|
children: /* @__PURE__ */ jsx(Slot, {})
|
|
51
84
|
}),
|
|
@@ -4,6 +4,7 @@ const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
|
|
|
4
4
|
const qwik = require("@builder.io/qwik");
|
|
5
5
|
const TextField = qwik.component$((props) => {
|
|
6
6
|
const error = qwik.useSignal(typeof props.error === "string" ? props.error : props.error?.value);
|
|
7
|
+
const value = qwik.useSignal(typeof props.value === "string" ? props.value : props.value?.value);
|
|
7
8
|
qwik.useTask$(({ track }) => {
|
|
8
9
|
if (props.error && typeof props.error !== "string") {
|
|
9
10
|
track(() => error.value);
|
|
@@ -20,6 +21,22 @@ const TextField = qwik.component$((props) => {
|
|
|
20
21
|
}
|
|
21
22
|
}
|
|
22
23
|
});
|
|
24
|
+
qwik.useTask$(({ track }) => {
|
|
25
|
+
if (props.value && typeof props.value !== "string") {
|
|
26
|
+
track(() => value.value);
|
|
27
|
+
if (value.value !== props.value?.value) {
|
|
28
|
+
props.value.value = value.value;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
qwik.useTask$(({ track }) => {
|
|
33
|
+
if (props.value && typeof props.value !== "string") {
|
|
34
|
+
track(() => props.value.value);
|
|
35
|
+
if (props.value && error.value !== props.value.value) {
|
|
36
|
+
value.value = props.value.value;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
});
|
|
23
40
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
24
41
|
class: "fieldset",
|
|
25
42
|
children: [
|
|
@@ -47,18 +64,32 @@ const TextField = qwik.component$((props) => {
|
|
|
47
64
|
...props.name && {
|
|
48
65
|
name: props.name
|
|
49
66
|
},
|
|
50
|
-
|
|
51
|
-
value: props.value
|
|
52
|
-
},
|
|
67
|
+
value: value.value,
|
|
53
68
|
class: "placeholder:opacity-50",
|
|
54
69
|
placeholder: props.placeholder,
|
|
55
70
|
onBlur$: (e) => {
|
|
56
|
-
|
|
57
|
-
if (props.
|
|
71
|
+
const target = e.target;
|
|
72
|
+
if (props.onBlur$) {
|
|
73
|
+
props.onBlur$(e, target.value, error);
|
|
74
|
+
}
|
|
75
|
+
if (props.onEvent$) {
|
|
76
|
+
props.onEvent$("blur", e, target.value, error);
|
|
77
|
+
}
|
|
78
|
+
if (props.value && typeof props.value !== "string") {
|
|
79
|
+
value.value = target.value;
|
|
80
|
+
}
|
|
58
81
|
},
|
|
59
82
|
onInput$: (e) => {
|
|
60
|
-
|
|
61
|
-
if (props.
|
|
83
|
+
const target = e.target;
|
|
84
|
+
if (props.onInput$) {
|
|
85
|
+
props.onInput$(e, target.value, error);
|
|
86
|
+
}
|
|
87
|
+
if (props.onEvent$) {
|
|
88
|
+
props.onEvent$("input", e, target.value, error);
|
|
89
|
+
}
|
|
90
|
+
if (props.value && typeof props.value !== "string") {
|
|
91
|
+
value.value = target.value;
|
|
92
|
+
}
|
|
62
93
|
}
|
|
63
94
|
}),
|
|
64
95
|
/* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
|
|
@@ -2,6 +2,7 @@ import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
|
|
|
2
2
|
import { component$, useSignal, useTask$, Slot } from "@builder.io/qwik";
|
|
3
3
|
const TextField = component$((props) => {
|
|
4
4
|
const error = useSignal(typeof props.error === "string" ? props.error : props.error?.value);
|
|
5
|
+
const value = useSignal(typeof props.value === "string" ? props.value : props.value?.value);
|
|
5
6
|
useTask$(({ track }) => {
|
|
6
7
|
if (props.error && typeof props.error !== "string") {
|
|
7
8
|
track(() => error.value);
|
|
@@ -18,6 +19,22 @@ const TextField = component$((props) => {
|
|
|
18
19
|
}
|
|
19
20
|
}
|
|
20
21
|
});
|
|
22
|
+
useTask$(({ track }) => {
|
|
23
|
+
if (props.value && typeof props.value !== "string") {
|
|
24
|
+
track(() => value.value);
|
|
25
|
+
if (value.value !== props.value?.value) {
|
|
26
|
+
props.value.value = value.value;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
useTask$(({ track }) => {
|
|
31
|
+
if (props.value && typeof props.value !== "string") {
|
|
32
|
+
track(() => props.value.value);
|
|
33
|
+
if (props.value && error.value !== props.value.value) {
|
|
34
|
+
value.value = props.value.value;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
});
|
|
21
38
|
return /* @__PURE__ */ jsxs("div", {
|
|
22
39
|
class: "fieldset",
|
|
23
40
|
children: [
|
|
@@ -45,18 +62,32 @@ const TextField = component$((props) => {
|
|
|
45
62
|
...props.name && {
|
|
46
63
|
name: props.name
|
|
47
64
|
},
|
|
48
|
-
|
|
49
|
-
value: props.value
|
|
50
|
-
},
|
|
65
|
+
value: value.value,
|
|
51
66
|
class: "placeholder:opacity-50",
|
|
52
67
|
placeholder: props.placeholder,
|
|
53
68
|
onBlur$: (e) => {
|
|
54
|
-
|
|
55
|
-
if (props.
|
|
69
|
+
const target = e.target;
|
|
70
|
+
if (props.onBlur$) {
|
|
71
|
+
props.onBlur$(e, target.value, error);
|
|
72
|
+
}
|
|
73
|
+
if (props.onEvent$) {
|
|
74
|
+
props.onEvent$("blur", e, target.value, error);
|
|
75
|
+
}
|
|
76
|
+
if (props.value && typeof props.value !== "string") {
|
|
77
|
+
value.value = target.value;
|
|
78
|
+
}
|
|
56
79
|
},
|
|
57
80
|
onInput$: (e) => {
|
|
58
|
-
|
|
59
|
-
if (props.
|
|
81
|
+
const target = e.target;
|
|
82
|
+
if (props.onInput$) {
|
|
83
|
+
props.onInput$(e, target.value, error);
|
|
84
|
+
}
|
|
85
|
+
if (props.onEvent$) {
|
|
86
|
+
props.onEvent$("input", e, target.value, error);
|
|
87
|
+
}
|
|
88
|
+
if (props.value && typeof props.value !== "string") {
|
|
89
|
+
value.value = target.value;
|
|
90
|
+
}
|
|
60
91
|
}
|
|
61
92
|
}),
|
|
62
93
|
/* @__PURE__ */ jsx(Slot, {
|
|
@@ -3,7 +3,7 @@ export interface CheckboxFieldProps {
|
|
|
3
3
|
id?: string;
|
|
4
4
|
label: string;
|
|
5
5
|
name?: string;
|
|
6
|
-
checked?: boolean
|
|
6
|
+
checked?: boolean | Signal<boolean>;
|
|
7
7
|
error?: string | Signal<string | undefined>;
|
|
8
8
|
onClick$?: QRL<(event: Event, checked: boolean, error: Signal<string | undefined>) => void>;
|
|
9
9
|
}
|
|
@@ -3,6 +3,7 @@ export interface SelectFieldProps {
|
|
|
3
3
|
id?: string;
|
|
4
4
|
label: string;
|
|
5
5
|
name?: string;
|
|
6
|
+
value?: string | null | Signal<string | null | undefined>;
|
|
6
7
|
error?: string | Signal<string | undefined>;
|
|
7
8
|
onChange$?: QRL<(event: Event, value: string, error: Signal<string | undefined>) => void>;
|
|
8
9
|
onBlur$?: QRL<(event: FocusEvent, value: string, error: Signal<string | undefined>) => void>;
|