@nr1e/qwik-ui 2.0.2 → 2.0.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/lib/components/select-field.qwik.cjs +9 -0
- package/lib/components/select-field.qwik.mjs +9 -0
- package/lib/components/text-field.qwik.cjs +21 -7
- package/lib/components/text-field.qwik.mjs +21 -7
- package/lib-types/components/select-field.d.ts +4 -0
- package/lib-types/components/text-field.d.ts +5 -0
- package/package.json +1 -1
|
@@ -5,6 +5,7 @@ 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
7
|
const value = qwik.useSignal(typeof props.value === "string" ? props.value : props.value?.value);
|
|
8
|
+
const originalValue = typeof props.value === "string" ? props.value : props.value?.value;
|
|
8
9
|
const disabled = qwik.useSignal(false);
|
|
9
10
|
if (props.disabled) {
|
|
10
11
|
if (typeof props.disabled === "boolean") {
|
|
@@ -62,6 +63,14 @@ const SelectField = qwik.component$((props) => {
|
|
|
62
63
|
}
|
|
63
64
|
}
|
|
64
65
|
});
|
|
66
|
+
qwik.useTask$(async ({ track }) => {
|
|
67
|
+
if (props.reset) {
|
|
68
|
+
track(() => props.reset?.value);
|
|
69
|
+
value.value = originalValue;
|
|
70
|
+
error.value = void 0;
|
|
71
|
+
touched.value = false;
|
|
72
|
+
}
|
|
73
|
+
});
|
|
65
74
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
66
75
|
class: "fieldset",
|
|
67
76
|
children: [
|
|
@@ -3,6 +3,7 @@ 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
5
|
const value = useSignal(typeof props.value === "string" ? props.value : props.value?.value);
|
|
6
|
+
const originalValue = typeof props.value === "string" ? props.value : props.value?.value;
|
|
6
7
|
const disabled = useSignal(false);
|
|
7
8
|
if (props.disabled) {
|
|
8
9
|
if (typeof props.disabled === "boolean") {
|
|
@@ -60,6 +61,14 @@ const SelectField = component$((props) => {
|
|
|
60
61
|
}
|
|
61
62
|
}
|
|
62
63
|
});
|
|
64
|
+
useTask$(async ({ track }) => {
|
|
65
|
+
if (props.reset) {
|
|
66
|
+
track(() => props.reset?.value);
|
|
67
|
+
value.value = originalValue;
|
|
68
|
+
error.value = void 0;
|
|
69
|
+
touched.value = false;
|
|
70
|
+
}
|
|
71
|
+
});
|
|
63
72
|
return /* @__PURE__ */ jsxs("div", {
|
|
64
73
|
class: "fieldset",
|
|
65
74
|
children: [
|
|
@@ -6,6 +6,7 @@ const index = require("../node_modules/.pnpm/valibot@1.2.0_typescript@5.9.3/node
|
|
|
6
6
|
const TextField = qwik.component$((props) => {
|
|
7
7
|
const error = qwik.useSignal(typeof props.error === "string" ? props.error : props.error?.value);
|
|
8
8
|
const value = qwik.useSignal(typeof props.value === "string" ? props.value : props.value?.value);
|
|
9
|
+
const originalValue = typeof props.value === "string" ? props.value : props.value?.value;
|
|
9
10
|
const disabled = qwik.useSignal(false);
|
|
10
11
|
if (props.disabled) {
|
|
11
12
|
if (typeof props.disabled === "boolean") {
|
|
@@ -63,6 +64,14 @@ const TextField = qwik.component$((props) => {
|
|
|
63
64
|
}
|
|
64
65
|
}
|
|
65
66
|
});
|
|
67
|
+
qwik.useTask$(async ({ track }) => {
|
|
68
|
+
if (props.reset) {
|
|
69
|
+
track(() => props.reset?.value);
|
|
70
|
+
value.value = originalValue;
|
|
71
|
+
error.value = void 0;
|
|
72
|
+
touched.value = false;
|
|
73
|
+
}
|
|
74
|
+
});
|
|
66
75
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
67
76
|
class: "fieldset",
|
|
68
77
|
children: [
|
|
@@ -106,9 +115,7 @@ const TextField = qwik.component$((props) => {
|
|
|
106
115
|
if (props.onEvent$) {
|
|
107
116
|
props.onEvent$("blur", e, target.value, error);
|
|
108
117
|
}
|
|
109
|
-
|
|
110
|
-
value.value = target.value;
|
|
111
|
-
}
|
|
118
|
+
value.value = target.value;
|
|
112
119
|
if (props.validate$) {
|
|
113
120
|
error.value = await props.validate$(target.value);
|
|
114
121
|
}
|
|
@@ -121,20 +128,27 @@ const TextField = qwik.component$((props) => {
|
|
|
121
128
|
if (props.onEvent$) {
|
|
122
129
|
props.onEvent$("input", e, target.value, error);
|
|
123
130
|
}
|
|
124
|
-
|
|
125
|
-
value.value = target.value;
|
|
126
|
-
}
|
|
131
|
+
value.value = target.value;
|
|
127
132
|
if (props.validate$) {
|
|
128
|
-
error.value = await props.validate$(
|
|
133
|
+
error.value = await props.validate$(value.value);
|
|
129
134
|
}
|
|
130
135
|
if (props.schema$) {
|
|
131
136
|
const schema = await props.schema$();
|
|
132
137
|
const result = index.safeParse(schema, value.value);
|
|
133
138
|
if (result.success) {
|
|
139
|
+
if (props.valid$) {
|
|
140
|
+
props.valid$.value = true;
|
|
141
|
+
}
|
|
134
142
|
error.value = void 0;
|
|
135
143
|
} else if (result.issues.length > 0) {
|
|
144
|
+
if (props.valid$) {
|
|
145
|
+
props.valid$.value = false;
|
|
146
|
+
}
|
|
136
147
|
error.value = result.issues[0].message;
|
|
137
148
|
} else {
|
|
149
|
+
if (props.valid$) {
|
|
150
|
+
props.valid$.value = false;
|
|
151
|
+
}
|
|
138
152
|
error.value = "Invalid value";
|
|
139
153
|
}
|
|
140
154
|
}
|
|
@@ -4,6 +4,7 @@ import { safeParse } from "../node_modules/.pnpm/valibot@1.2.0_typescript@5.9.3/
|
|
|
4
4
|
const TextField = component$((props) => {
|
|
5
5
|
const error = useSignal(typeof props.error === "string" ? props.error : props.error?.value);
|
|
6
6
|
const value = useSignal(typeof props.value === "string" ? props.value : props.value?.value);
|
|
7
|
+
const originalValue = typeof props.value === "string" ? props.value : props.value?.value;
|
|
7
8
|
const disabled = useSignal(false);
|
|
8
9
|
if (props.disabled) {
|
|
9
10
|
if (typeof props.disabled === "boolean") {
|
|
@@ -61,6 +62,14 @@ const TextField = component$((props) => {
|
|
|
61
62
|
}
|
|
62
63
|
}
|
|
63
64
|
});
|
|
65
|
+
useTask$(async ({ track }) => {
|
|
66
|
+
if (props.reset) {
|
|
67
|
+
track(() => props.reset?.value);
|
|
68
|
+
value.value = originalValue;
|
|
69
|
+
error.value = void 0;
|
|
70
|
+
touched.value = false;
|
|
71
|
+
}
|
|
72
|
+
});
|
|
64
73
|
return /* @__PURE__ */ jsxs("div", {
|
|
65
74
|
class: "fieldset",
|
|
66
75
|
children: [
|
|
@@ -104,9 +113,7 @@ const TextField = component$((props) => {
|
|
|
104
113
|
if (props.onEvent$) {
|
|
105
114
|
props.onEvent$("blur", e, target.value, error);
|
|
106
115
|
}
|
|
107
|
-
|
|
108
|
-
value.value = target.value;
|
|
109
|
-
}
|
|
116
|
+
value.value = target.value;
|
|
110
117
|
if (props.validate$) {
|
|
111
118
|
error.value = await props.validate$(target.value);
|
|
112
119
|
}
|
|
@@ -119,20 +126,27 @@ const TextField = component$((props) => {
|
|
|
119
126
|
if (props.onEvent$) {
|
|
120
127
|
props.onEvent$("input", e, target.value, error);
|
|
121
128
|
}
|
|
122
|
-
|
|
123
|
-
value.value = target.value;
|
|
124
|
-
}
|
|
129
|
+
value.value = target.value;
|
|
125
130
|
if (props.validate$) {
|
|
126
|
-
error.value = await props.validate$(
|
|
131
|
+
error.value = await props.validate$(value.value);
|
|
127
132
|
}
|
|
128
133
|
if (props.schema$) {
|
|
129
134
|
const schema = await props.schema$();
|
|
130
135
|
const result = safeParse(schema, value.value);
|
|
131
136
|
if (result.success) {
|
|
137
|
+
if (props.valid$) {
|
|
138
|
+
props.valid$.value = true;
|
|
139
|
+
}
|
|
132
140
|
error.value = void 0;
|
|
133
141
|
} else if (result.issues.length > 0) {
|
|
142
|
+
if (props.valid$) {
|
|
143
|
+
props.valid$.value = false;
|
|
144
|
+
}
|
|
134
145
|
error.value = result.issues[0].message;
|
|
135
146
|
} else {
|
|
147
|
+
if (props.valid$) {
|
|
148
|
+
props.valid$.value = false;
|
|
149
|
+
}
|
|
136
150
|
error.value = "Invalid value";
|
|
137
151
|
}
|
|
138
152
|
}
|
|
@@ -11,5 +11,9 @@ export interface SelectFieldProps {
|
|
|
11
11
|
onBlur$?: QRL<(event: FocusEvent, value: string, error: Signal<string | undefined>) => void>;
|
|
12
12
|
onEvent$?: QRL<(type: 'blur' | 'change', event: Event, value: string, error: Signal<string | undefined>) => void>;
|
|
13
13
|
validate$?: QRL<(value: string) => string | undefined>;
|
|
14
|
+
/**
|
|
15
|
+
* Increment the value of this signal to reset the input to its original value.
|
|
16
|
+
*/
|
|
17
|
+
reset?: Signal<number>;
|
|
14
18
|
}
|
|
15
19
|
export declare const SelectField: import("@builder.io/qwik").Component<SelectFieldProps>;
|
|
@@ -15,5 +15,10 @@ export interface TextFieldProps {
|
|
|
15
15
|
onEvent$?: QRL<(type: 'blur' | 'input', event: FocusEvent | InputEvent, value: string, error: Signal<string | undefined>) => void>;
|
|
16
16
|
validate$?: QRL<(value: string) => string | undefined>;
|
|
17
17
|
schema$?: QRL<() => v.BaseSchema<any, any, any>>;
|
|
18
|
+
valid$?: Signal<undefined | boolean>;
|
|
19
|
+
/**
|
|
20
|
+
* Increment the value of this signal to reset the input to its original value.
|
|
21
|
+
*/
|
|
22
|
+
reset?: Signal<number>;
|
|
18
23
|
}
|
|
19
24
|
export declare const TextField: import("@builder.io/qwik").Component<TextFieldProps>;
|