@nr1e/qwik-ui 2.0.4 → 2.0.6
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 +45 -2
- package/lib/components/select-field.qwik.mjs +46 -3
- package/lib/components/text-field.qwik.cjs +49 -31
- package/lib/components/text-field.qwik.mjs +50 -32
- package/lib-types/components/select-field.d.ts +9 -2
- package/lib-types/components/text-field.d.ts +7 -3
- package/package.json +1 -1
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
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
|
+
const index = require("../node_modules/.pnpm/valibot@1.2.0_typescript@5.9.3/node_modules/valibot/dist/index.qwik.cjs");
|
|
5
6
|
const SelectField = qwik.component$((props) => {
|
|
6
7
|
const error = qwik.useSignal(typeof props.error === "string" ? props.error : props.error?.value);
|
|
7
8
|
const value = qwik.useSignal(typeof props.value === "string" ? props.value : props.value?.value);
|
|
@@ -64,13 +65,55 @@ const SelectField = qwik.component$((props) => {
|
|
|
64
65
|
}
|
|
65
66
|
});
|
|
66
67
|
qwik.useTask$(async ({ track }) => {
|
|
67
|
-
if (props.
|
|
68
|
-
track(() => props.
|
|
68
|
+
if (props.triggerReset) {
|
|
69
|
+
track(() => props.triggerReset?.value);
|
|
69
70
|
value.value = originalValue;
|
|
70
71
|
error.value = void 0;
|
|
71
72
|
touched.value = false;
|
|
72
73
|
}
|
|
73
74
|
});
|
|
75
|
+
const validate = qwik.$(async () => {
|
|
76
|
+
if (props.schema$) {
|
|
77
|
+
const schema = await props.schema$();
|
|
78
|
+
const result = index.safeParse(schema, value.value);
|
|
79
|
+
if (!result.success) {
|
|
80
|
+
if (result.issues.length > 0) {
|
|
81
|
+
if (props.valid) {
|
|
82
|
+
props.valid.value = false;
|
|
83
|
+
}
|
|
84
|
+
error.value = result.issues[0].message;
|
|
85
|
+
return;
|
|
86
|
+
} else {
|
|
87
|
+
if (props.valid) {
|
|
88
|
+
props.valid.value = false;
|
|
89
|
+
}
|
|
90
|
+
error.value = "Invalid value";
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
if (props.validate$) {
|
|
96
|
+
const result = await props.validate$(value.value);
|
|
97
|
+
if (result) {
|
|
98
|
+
if (props.valid) {
|
|
99
|
+
props.valid.value = false;
|
|
100
|
+
}
|
|
101
|
+
error.value = result;
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
if (props.valid) {
|
|
106
|
+
props.valid.value = true;
|
|
107
|
+
error.value = void 0;
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
qwik.useTask$(async ({ track }) => {
|
|
111
|
+
if (props.triggerValidation) {
|
|
112
|
+
track(() => props.triggerValidation?.value);
|
|
113
|
+
touched.value = true;
|
|
114
|
+
await validate();
|
|
115
|
+
}
|
|
116
|
+
});
|
|
74
117
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
75
118
|
class: "fieldset",
|
|
76
119
|
children: [
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
|
|
2
|
-
import { component$, useSignal, useTask$, Slot } from "@builder.io/qwik";
|
|
2
|
+
import { component$, useSignal, useTask$, $, Slot } from "@builder.io/qwik";
|
|
3
|
+
import { safeParse } from "../node_modules/.pnpm/valibot@1.2.0_typescript@5.9.3/node_modules/valibot/dist/index.qwik.mjs";
|
|
3
4
|
const SelectField = component$((props) => {
|
|
4
5
|
const error = useSignal(typeof props.error === "string" ? props.error : props.error?.value);
|
|
5
6
|
const value = useSignal(typeof props.value === "string" ? props.value : props.value?.value);
|
|
@@ -62,13 +63,55 @@ const SelectField = component$((props) => {
|
|
|
62
63
|
}
|
|
63
64
|
});
|
|
64
65
|
useTask$(async ({ track }) => {
|
|
65
|
-
if (props.
|
|
66
|
-
track(() => props.
|
|
66
|
+
if (props.triggerReset) {
|
|
67
|
+
track(() => props.triggerReset?.value);
|
|
67
68
|
value.value = originalValue;
|
|
68
69
|
error.value = void 0;
|
|
69
70
|
touched.value = false;
|
|
70
71
|
}
|
|
71
72
|
});
|
|
73
|
+
const validate = $(async () => {
|
|
74
|
+
if (props.schema$) {
|
|
75
|
+
const schema = await props.schema$();
|
|
76
|
+
const result = safeParse(schema, value.value);
|
|
77
|
+
if (!result.success) {
|
|
78
|
+
if (result.issues.length > 0) {
|
|
79
|
+
if (props.valid) {
|
|
80
|
+
props.valid.value = false;
|
|
81
|
+
}
|
|
82
|
+
error.value = result.issues[0].message;
|
|
83
|
+
return;
|
|
84
|
+
} else {
|
|
85
|
+
if (props.valid) {
|
|
86
|
+
props.valid.value = false;
|
|
87
|
+
}
|
|
88
|
+
error.value = "Invalid value";
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
if (props.validate$) {
|
|
94
|
+
const result = await props.validate$(value.value);
|
|
95
|
+
if (result) {
|
|
96
|
+
if (props.valid) {
|
|
97
|
+
props.valid.value = false;
|
|
98
|
+
}
|
|
99
|
+
error.value = result;
|
|
100
|
+
return;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
if (props.valid) {
|
|
104
|
+
props.valid.value = true;
|
|
105
|
+
error.value = void 0;
|
|
106
|
+
}
|
|
107
|
+
});
|
|
108
|
+
useTask$(async ({ track }) => {
|
|
109
|
+
if (props.triggerValidation) {
|
|
110
|
+
track(() => props.triggerValidation?.value);
|
|
111
|
+
touched.value = true;
|
|
112
|
+
await validate();
|
|
113
|
+
}
|
|
114
|
+
});
|
|
72
115
|
return /* @__PURE__ */ jsxs("div", {
|
|
73
116
|
class: "fieldset",
|
|
74
117
|
children: [
|
|
@@ -65,13 +65,55 @@ const TextField = qwik.component$((props) => {
|
|
|
65
65
|
}
|
|
66
66
|
});
|
|
67
67
|
qwik.useTask$(async ({ track }) => {
|
|
68
|
-
if (props.
|
|
69
|
-
track(() => props.
|
|
68
|
+
if (props.triggerReset) {
|
|
69
|
+
track(() => props.triggerReset?.value);
|
|
70
70
|
value.value = originalValue;
|
|
71
71
|
error.value = void 0;
|
|
72
72
|
touched.value = false;
|
|
73
73
|
}
|
|
74
74
|
});
|
|
75
|
+
const validate = qwik.$(async () => {
|
|
76
|
+
if (props.schema$) {
|
|
77
|
+
const schema = await props.schema$();
|
|
78
|
+
const result = index.safeParse(schema, value.value);
|
|
79
|
+
if (!result.success) {
|
|
80
|
+
if (result.issues.length > 0) {
|
|
81
|
+
if (props.valid) {
|
|
82
|
+
props.valid.value = false;
|
|
83
|
+
}
|
|
84
|
+
error.value = result.issues[0].message;
|
|
85
|
+
return;
|
|
86
|
+
} else {
|
|
87
|
+
if (props.valid) {
|
|
88
|
+
props.valid.value = false;
|
|
89
|
+
}
|
|
90
|
+
error.value = "Invalid value";
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
if (props.validate$) {
|
|
96
|
+
const result = await props.validate$(value.value);
|
|
97
|
+
if (result) {
|
|
98
|
+
if (props.valid) {
|
|
99
|
+
props.valid.value = false;
|
|
100
|
+
}
|
|
101
|
+
error.value = result;
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
if (props.valid) {
|
|
106
|
+
props.valid.value = true;
|
|
107
|
+
error.value = void 0;
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
qwik.useTask$(async ({ track }) => {
|
|
111
|
+
if (props.triggerValidation) {
|
|
112
|
+
track(() => props.triggerValidation?.value);
|
|
113
|
+
touched.value = true;
|
|
114
|
+
await validate();
|
|
115
|
+
}
|
|
116
|
+
});
|
|
75
117
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
76
118
|
class: "fieldset",
|
|
77
119
|
children: [
|
|
@@ -107,51 +149,27 @@ const TextField = qwik.component$((props) => {
|
|
|
107
149
|
class: "placeholder:opacity-50",
|
|
108
150
|
placeholder: props.placeholder,
|
|
109
151
|
onBlur$: async (e) => {
|
|
110
|
-
touched.value = true;
|
|
111
152
|
const target = e.target;
|
|
153
|
+
touched.value = true;
|
|
154
|
+
value.value = target.value;
|
|
155
|
+
await validate();
|
|
112
156
|
if (props.onBlur$) {
|
|
113
157
|
props.onBlur$(e, target.value, error);
|
|
114
158
|
}
|
|
115
159
|
if (props.onEvent$) {
|
|
116
160
|
props.onEvent$("blur", e, target.value, error);
|
|
117
161
|
}
|
|
118
|
-
value.value = target.value;
|
|
119
|
-
if (props.validate$) {
|
|
120
|
-
error.value = await props.validate$(target.value);
|
|
121
|
-
}
|
|
122
162
|
},
|
|
123
163
|
onInput$: async (e) => {
|
|
124
164
|
const target = e.target;
|
|
165
|
+
value.value = target.value;
|
|
166
|
+
await validate();
|
|
125
167
|
if (props.onInput$) {
|
|
126
168
|
props.onInput$(e, target.value, error);
|
|
127
169
|
}
|
|
128
170
|
if (props.onEvent$) {
|
|
129
171
|
props.onEvent$("input", e, target.value, error);
|
|
130
172
|
}
|
|
131
|
-
value.value = target.value;
|
|
132
|
-
if (props.validate$) {
|
|
133
|
-
error.value = await props.validate$(value.value);
|
|
134
|
-
}
|
|
135
|
-
if (props.schema$) {
|
|
136
|
-
const schema = await props.schema$();
|
|
137
|
-
const result = index.safeParse(schema, value.value);
|
|
138
|
-
if (result.success) {
|
|
139
|
-
if (props.valid$) {
|
|
140
|
-
props.valid$.value = true;
|
|
141
|
-
}
|
|
142
|
-
error.value = void 0;
|
|
143
|
-
} else if (result.issues.length > 0) {
|
|
144
|
-
if (props.valid$) {
|
|
145
|
-
props.valid$.value = false;
|
|
146
|
-
}
|
|
147
|
-
error.value = result.issues[0].message;
|
|
148
|
-
} else {
|
|
149
|
-
if (props.valid$) {
|
|
150
|
-
props.valid$.value = false;
|
|
151
|
-
}
|
|
152
|
-
error.value = "Invalid value";
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
173
|
}
|
|
156
174
|
}),
|
|
157
175
|
/* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
|
|
2
|
-
import { component$, useSignal, useTask$, Slot } from "@builder.io/qwik";
|
|
2
|
+
import { component$, useSignal, useTask$, $, Slot } from "@builder.io/qwik";
|
|
3
3
|
import { safeParse } from "../node_modules/.pnpm/valibot@1.2.0_typescript@5.9.3/node_modules/valibot/dist/index.qwik.mjs";
|
|
4
4
|
const TextField = component$((props) => {
|
|
5
5
|
const error = useSignal(typeof props.error === "string" ? props.error : props.error?.value);
|
|
@@ -63,13 +63,55 @@ const TextField = component$((props) => {
|
|
|
63
63
|
}
|
|
64
64
|
});
|
|
65
65
|
useTask$(async ({ track }) => {
|
|
66
|
-
if (props.
|
|
67
|
-
track(() => props.
|
|
66
|
+
if (props.triggerReset) {
|
|
67
|
+
track(() => props.triggerReset?.value);
|
|
68
68
|
value.value = originalValue;
|
|
69
69
|
error.value = void 0;
|
|
70
70
|
touched.value = false;
|
|
71
71
|
}
|
|
72
72
|
});
|
|
73
|
+
const validate = $(async () => {
|
|
74
|
+
if (props.schema$) {
|
|
75
|
+
const schema = await props.schema$();
|
|
76
|
+
const result = safeParse(schema, value.value);
|
|
77
|
+
if (!result.success) {
|
|
78
|
+
if (result.issues.length > 0) {
|
|
79
|
+
if (props.valid) {
|
|
80
|
+
props.valid.value = false;
|
|
81
|
+
}
|
|
82
|
+
error.value = result.issues[0].message;
|
|
83
|
+
return;
|
|
84
|
+
} else {
|
|
85
|
+
if (props.valid) {
|
|
86
|
+
props.valid.value = false;
|
|
87
|
+
}
|
|
88
|
+
error.value = "Invalid value";
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
if (props.validate$) {
|
|
94
|
+
const result = await props.validate$(value.value);
|
|
95
|
+
if (result) {
|
|
96
|
+
if (props.valid) {
|
|
97
|
+
props.valid.value = false;
|
|
98
|
+
}
|
|
99
|
+
error.value = result;
|
|
100
|
+
return;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
if (props.valid) {
|
|
104
|
+
props.valid.value = true;
|
|
105
|
+
error.value = void 0;
|
|
106
|
+
}
|
|
107
|
+
});
|
|
108
|
+
useTask$(async ({ track }) => {
|
|
109
|
+
if (props.triggerValidation) {
|
|
110
|
+
track(() => props.triggerValidation?.value);
|
|
111
|
+
touched.value = true;
|
|
112
|
+
await validate();
|
|
113
|
+
}
|
|
114
|
+
});
|
|
73
115
|
return /* @__PURE__ */ jsxs("div", {
|
|
74
116
|
class: "fieldset",
|
|
75
117
|
children: [
|
|
@@ -105,51 +147,27 @@ const TextField = component$((props) => {
|
|
|
105
147
|
class: "placeholder:opacity-50",
|
|
106
148
|
placeholder: props.placeholder,
|
|
107
149
|
onBlur$: async (e) => {
|
|
108
|
-
touched.value = true;
|
|
109
150
|
const target = e.target;
|
|
151
|
+
touched.value = true;
|
|
152
|
+
value.value = target.value;
|
|
153
|
+
await validate();
|
|
110
154
|
if (props.onBlur$) {
|
|
111
155
|
props.onBlur$(e, target.value, error);
|
|
112
156
|
}
|
|
113
157
|
if (props.onEvent$) {
|
|
114
158
|
props.onEvent$("blur", e, target.value, error);
|
|
115
159
|
}
|
|
116
|
-
value.value = target.value;
|
|
117
|
-
if (props.validate$) {
|
|
118
|
-
error.value = await props.validate$(target.value);
|
|
119
|
-
}
|
|
120
160
|
},
|
|
121
161
|
onInput$: async (e) => {
|
|
122
162
|
const target = e.target;
|
|
163
|
+
value.value = target.value;
|
|
164
|
+
await validate();
|
|
123
165
|
if (props.onInput$) {
|
|
124
166
|
props.onInput$(e, target.value, error);
|
|
125
167
|
}
|
|
126
168
|
if (props.onEvent$) {
|
|
127
169
|
props.onEvent$("input", e, target.value, error);
|
|
128
170
|
}
|
|
129
|
-
value.value = target.value;
|
|
130
|
-
if (props.validate$) {
|
|
131
|
-
error.value = await props.validate$(value.value);
|
|
132
|
-
}
|
|
133
|
-
if (props.schema$) {
|
|
134
|
-
const schema = await props.schema$();
|
|
135
|
-
const result = safeParse(schema, value.value);
|
|
136
|
-
if (result.success) {
|
|
137
|
-
if (props.valid$) {
|
|
138
|
-
props.valid$.value = true;
|
|
139
|
-
}
|
|
140
|
-
error.value = void 0;
|
|
141
|
-
} else if (result.issues.length > 0) {
|
|
142
|
-
if (props.valid$) {
|
|
143
|
-
props.valid$.value = false;
|
|
144
|
-
}
|
|
145
|
-
error.value = result.issues[0].message;
|
|
146
|
-
} else {
|
|
147
|
-
if (props.valid$) {
|
|
148
|
-
props.valid$.value = false;
|
|
149
|
-
}
|
|
150
|
-
error.value = "Invalid value";
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
171
|
}
|
|
154
172
|
}),
|
|
155
173
|
/* @__PURE__ */ jsx(Slot, {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { QRL, Signal } from '@builder.io/qwik';
|
|
2
|
+
import * as v from 'valibot';
|
|
2
3
|
export interface SelectFieldProps {
|
|
3
4
|
id?: string;
|
|
4
5
|
label?: string;
|
|
@@ -10,10 +11,16 @@ export interface SelectFieldProps {
|
|
|
10
11
|
onChange$?: QRL<(event: Event, value: string, error: Signal<string | undefined>) => void>;
|
|
11
12
|
onBlur$?: QRL<(event: FocusEvent, value: string, error: Signal<string | undefined>) => void>;
|
|
12
13
|
onEvent$?: QRL<(type: 'blur' | 'change', event: Event, value: string, error: Signal<string | undefined>) => void>;
|
|
13
|
-
validate$?: QRL<(value: string) => string | undefined>;
|
|
14
|
+
validate$?: QRL<(value: string | null | undefined) => string | undefined>;
|
|
15
|
+
schema$?: QRL<() => v.BaseSchema<any, any, any>>;
|
|
16
|
+
valid?: Signal<undefined | boolean>;
|
|
14
17
|
/**
|
|
15
18
|
* Increment the value of this signal to reset the input to its original value.
|
|
16
19
|
*/
|
|
17
|
-
|
|
20
|
+
triggerReset?: Signal<number>;
|
|
21
|
+
/**
|
|
22
|
+
* Increment the value of this signal to force validation to execute.
|
|
23
|
+
*/
|
|
24
|
+
triggerValidation?: Signal<number>;
|
|
18
25
|
}
|
|
19
26
|
export declare const SelectField: import("@builder.io/qwik").Component<SelectFieldProps>;
|
|
@@ -13,12 +13,16 @@ export interface TextFieldProps {
|
|
|
13
13
|
onBlur$?: QRL<(event: FocusEvent, value: string, error: Signal<string | undefined>) => void>;
|
|
14
14
|
onInput$?: QRL<(event: InputEvent, value: string, error: Signal<string | undefined>) => void>;
|
|
15
15
|
onEvent$?: QRL<(type: 'blur' | 'input', event: FocusEvent | InputEvent, value: string, error: Signal<string | undefined>) => void>;
|
|
16
|
-
validate$?: QRL<(value: string) => string | undefined>;
|
|
16
|
+
validate$?: QRL<(value: string | null | undefined) => string | undefined>;
|
|
17
17
|
schema$?: QRL<() => v.BaseSchema<any, any, any>>;
|
|
18
|
-
valid
|
|
18
|
+
valid?: Signal<undefined | boolean>;
|
|
19
19
|
/**
|
|
20
20
|
* Increment the value of this signal to reset the input to its original value.
|
|
21
21
|
*/
|
|
22
|
-
|
|
22
|
+
triggerReset?: Signal<number>;
|
|
23
|
+
/**
|
|
24
|
+
* Increment the value of this signal to force validation to execute.
|
|
25
|
+
*/
|
|
26
|
+
triggerValidation?: Signal<number>;
|
|
23
27
|
}
|
|
24
28
|
export declare const TextField: import("@builder.io/qwik").Component<TextFieldProps>;
|