@nr1e/qwik-ui 0.0.24 → 0.0.26
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/add-button.qwik.cjs +1 -0
- package/lib/components/add-button.qwik.mjs +1 -0
- package/lib/components/checkbox-field.qwik.cjs +7 -1
- package/lib/components/checkbox-field.qwik.mjs +7 -1
- 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 +20 -4
- package/lib/components/text-field.qwik.mjs +20 -4
- package/lib-types/components/add-button.d.ts +2 -0
- package/lib-types/components/select-field.d.ts +1 -0
- package/package.json +1 -1
|
@@ -6,6 +6,7 @@ const mdiAddCircleOutline_qwik = require("../qwik-icons/lib/components/icons/mdi
|
|
|
6
6
|
const AddButton = qwik.component$((props) => {
|
|
7
7
|
return /* @__PURE__ */ jsxRuntime.jsxs("button", {
|
|
8
8
|
class: `btn ${props.class ?? ""}`,
|
|
9
|
+
onClick$: props.onClick$,
|
|
9
10
|
children: [
|
|
10
11
|
/* @__PURE__ */ jsxRuntime.jsx(mdiAddCircleOutline_qwik.MdiAddCircleOutline, {
|
|
11
12
|
size: 24
|
|
@@ -4,6 +4,7 @@ import { MdiAddCircleOutline } from "../qwik-icons/lib/components/icons/mdi-add-
|
|
|
4
4
|
const AddButton = component$((props) => {
|
|
5
5
|
return /* @__PURE__ */ jsxs("button", {
|
|
6
6
|
class: `btn ${props.class ?? ""}`,
|
|
7
|
+
onClick$: props.onClick$,
|
|
7
8
|
children: [
|
|
8
9
|
/* @__PURE__ */ jsx(MdiAddCircleOutline, {
|
|
9
10
|
size: 24
|
|
@@ -56,7 +56,13 @@ const CheckboxField = qwik.component$((props) => {
|
|
|
56
56
|
},
|
|
57
57
|
checked: checked.value,
|
|
58
58
|
class: `checkbox ${error.value ? "checkbox-error" : ""}`,
|
|
59
|
-
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
|
+
}
|
|
60
66
|
}),
|
|
61
67
|
props.label
|
|
62
68
|
]
|
|
@@ -54,7 +54,13 @@ const CheckboxField = component$((props) => {
|
|
|
54
54
|
},
|
|
55
55
|
checked: checked.value,
|
|
56
56
|
class: `checkbox ${error.value ? "checkbox-error" : ""}`,
|
|
57
|
-
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
|
+
}
|
|
58
64
|
}),
|
|
59
65
|
props.label
|
|
60
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
|
}),
|
|
@@ -68,12 +68,28 @@ const TextField = qwik.component$((props) => {
|
|
|
68
68
|
class: "placeholder:opacity-50",
|
|
69
69
|
placeholder: props.placeholder,
|
|
70
70
|
onBlur$: (e) => {
|
|
71
|
-
|
|
72
|
-
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
|
+
}
|
|
73
81
|
},
|
|
74
82
|
onInput$: (e) => {
|
|
75
|
-
|
|
76
|
-
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
|
+
}
|
|
77
93
|
}
|
|
78
94
|
}),
|
|
79
95
|
/* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
|
|
@@ -66,12 +66,28 @@ const TextField = component$((props) => {
|
|
|
66
66
|
class: "placeholder:opacity-50",
|
|
67
67
|
placeholder: props.placeholder,
|
|
68
68
|
onBlur$: (e) => {
|
|
69
|
-
|
|
70
|
-
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
|
+
}
|
|
71
79
|
},
|
|
72
80
|
onInput$: (e) => {
|
|
73
|
-
|
|
74
|
-
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
|
+
}
|
|
75
91
|
}
|
|
76
92
|
}),
|
|
77
93
|
/* @__PURE__ */ jsx(Slot, {
|
|
@@ -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>;
|