@nr1e/qwik-ui 2.0.5 → 2.0.7

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.
Files changed (7) hide show
  1. package/lib/components/select-field.qwik.cjs +45 -2
  2. package/lib/components/select-field.qwik.mjs +46 -3
  3. package/lib/components/text-field.qwik.cjs +57 -32
  4. package/lib/components/text-field.qwik.mjs +58 -33
  5. package/lib-types/components/select-field.d.ts +9 -2
  6. package/lib-types/components/text-field.d.ts +59 -2
  7. package/package.json +1 -1
package/lib/components/select-field.qwik.cjs CHANGED
@@ -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.reset) {
68
- track(() => props.reset?.value);
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: [
package/lib/components/select-field.qwik.mjs CHANGED
@@ -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.reset) {
66
- track(() => props.reset?.value);
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: [
package/lib/components/text-field.qwik.cjs CHANGED
@@ -65,13 +65,61 @@ const TextField = qwik.component$((props) => {
65
65
  }
66
66
  });
67
67
  qwik.useTask$(async ({ track }) => {
68
- if (props.reset) {
69
- track(() => props.reset?.value);
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
+ if (value.value !== result.output) {
95
+ value.value = result.output;
96
+ }
97
+ }
98
+ if (props.validate$) {
99
+ const result = await props.validate$(value.value);
100
+ if (!result.success) {
101
+ if (props.valid) {
102
+ props.valid.value = false;
103
+ }
104
+ error.value = result.error;
105
+ return;
106
+ }
107
+ if (value.value !== result.output) {
108
+ value.value = result.output;
109
+ }
110
+ }
111
+ if (props.valid) {
112
+ props.valid.value = true;
113
+ error.value = void 0;
114
+ }
115
+ });
116
+ qwik.useTask$(async ({ track }) => {
117
+ if (props.triggerValidation) {
118
+ track(() => props.triggerValidation?.value);
119
+ touched.value = true;
120
+ await validate();
121
+ }
122
+ });
75
123
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
76
124
  class: "fieldset",
77
125
  children: [
@@ -92,7 +140,7 @@ const TextField = qwik.component$((props) => {
92
140
  name: "left"
93
141
  }),
94
142
  /* @__PURE__ */ jsxRuntime.jsx("input", {
95
- type: "text",
143
+ type: props.type || "text",
96
144
  ...props.id && {
97
145
  id: props.id
98
146
  },
@@ -107,51 +155,28 @@ const TextField = qwik.component$((props) => {
107
155
  class: "placeholder:opacity-50",
108
156
  placeholder: props.placeholder,
109
157
  onBlur$: async (e) => {
110
- touched.value = true;
111
158
  const target = e.target;
159
+ touched.value = true;
160
+ value.value = target.value;
161
+ await validate();
162
+ target.value = value.value ?? "";
112
163
  if (props.onBlur$) {
113
164
  props.onBlur$(e, target.value, error);
114
165
  }
115
166
  if (props.onEvent$) {
116
167
  props.onEvent$("blur", e, target.value, error);
117
168
  }
118
- value.value = target.value;
119
- if (props.validate$) {
120
- error.value = await props.validate$(target.value);
121
- }
122
169
  },
123
170
  onInput$: async (e) => {
124
171
  const target = e.target;
172
+ value.value = target.value;
173
+ await validate();
125
174
  if (props.onInput$) {
126
175
  props.onInput$(e, target.value, error);
127
176
  }
128
177
  if (props.onEvent$) {
129
178
  props.onEvent$("input", e, target.value, error);
130
179
  }
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
180
  }
156
181
  }),
157
182
  /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
package/lib/components/text-field.qwik.mjs CHANGED
@@ -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,61 @@ const TextField = component$((props) => {
63
63
  }
64
64
  });
65
65
  useTask$(async ({ track }) => {
66
- if (props.reset) {
67
- track(() => props.reset?.value);
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
+ if (value.value !== result.output) {
93
+ value.value = result.output;
94
+ }
95
+ }
96
+ if (props.validate$) {
97
+ const result = await props.validate$(value.value);
98
+ if (!result.success) {
99
+ if (props.valid) {
100
+ props.valid.value = false;
101
+ }
102
+ error.value = result.error;
103
+ return;
104
+ }
105
+ if (value.value !== result.output) {
106
+ value.value = result.output;
107
+ }
108
+ }
109
+ if (props.valid) {
110
+ props.valid.value = true;
111
+ error.value = void 0;
112
+ }
113
+ });
114
+ useTask$(async ({ track }) => {
115
+ if (props.triggerValidation) {
116
+ track(() => props.triggerValidation?.value);
117
+ touched.value = true;
118
+ await validate();
119
+ }
120
+ });
73
121
  return /* @__PURE__ */ jsxs("div", {
74
122
  class: "fieldset",
75
123
  children: [
@@ -90,7 +138,7 @@ const TextField = component$((props) => {
90
138
  name: "left"
91
139
  }),
92
140
  /* @__PURE__ */ jsx("input", {
93
- type: "text",
141
+ type: props.type || "text",
94
142
  ...props.id && {
95
143
  id: props.id
96
144
  },
@@ -105,51 +153,28 @@ const TextField = component$((props) => {
105
153
  class: "placeholder:opacity-50",
106
154
  placeholder: props.placeholder,
107
155
  onBlur$: async (e) => {
108
- touched.value = true;
109
156
  const target = e.target;
157
+ touched.value = true;
158
+ value.value = target.value;
159
+ await validate();
160
+ target.value = value.value ?? "";
110
161
  if (props.onBlur$) {
111
162
  props.onBlur$(e, target.value, error);
112
163
  }
113
164
  if (props.onEvent$) {
114
165
  props.onEvent$("blur", e, target.value, error);
115
166
  }
116
- value.value = target.value;
117
- if (props.validate$) {
118
- error.value = await props.validate$(target.value);
119
- }
120
167
  },
121
168
  onInput$: async (e) => {
122
169
  const target = e.target;
170
+ value.value = target.value;
171
+ await validate();
123
172
  if (props.onInput$) {
124
173
  props.onInput$(e, target.value, error);
125
174
  }
126
175
  if (props.onEvent$) {
127
176
  props.onEvent$("input", e, target.value, error);
128
177
  }
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
178
  }
154
179
  }),
155
180
  /* @__PURE__ */ jsx(Slot, {
package/lib-types/components/select-field.d.ts CHANGED
@@ -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
- reset?: Signal<number>;
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>;
package/lib-types/components/text-field.d.ts CHANGED
@@ -1,7 +1,32 @@
1
1
  import { QRL, Signal } from '@builder.io/qwik';
2
2
  import * as v from 'valibot';
3
+ /**
4
+ * The type of the input field.
5
+ */
6
+ export type TextFieldType = 'text' | 'date' | 'email' | 'number' | 'tel' | 'url';
7
+ /**
8
+ * The result of validating a form input.
9
+ */
10
+ export type TextFieldValidationResult = {
11
+ /**
12
+ * True if validation was successful. False if validation failed.
13
+ */
14
+ success: boolean;
15
+ /**
16
+ * The error message if validation failed.
17
+ */
18
+ error?: string;
19
+ /**
20
+ * The normalized value of the input after successful validation.
21
+ */
22
+ output: string | null | undefined;
23
+ };
24
+ /**
25
+ * Properties for the TextField component.
26
+ */
3
27
  export interface TextFieldProps {
4
28
  id?: string;
29
+ type?: TextFieldType;
5
30
  label?: string;
6
31
  name?: string;
7
32
  value?: string | null | Signal<string | null | undefined>;
@@ -10,15 +35,47 @@ export interface TextFieldProps {
10
35
  maxLength?: number;
11
36
  required?: boolean;
12
37
  disabled?: boolean | Signal<boolean>;
38
+ /**
39
+ * Called when the input loses focus.
40
+ */
13
41
  onBlur$?: QRL<(event: FocusEvent, value: string, error: Signal<string | undefined>) => void>;
42
+ /**
43
+ * Called when the input value changes.
44
+ */
14
45
  onInput$?: QRL<(event: InputEvent, value: string, error: Signal<string | undefined>) => void>;
46
+ /**
47
+ * Called on blur or input events
48
+ */
15
49
  onEvent$?: QRL<(type: 'blur' | 'input', event: FocusEvent | InputEvent, value: string, error: Signal<string | undefined>) => void>;
16
- validate$?: QRL<(value: string) => string | undefined>;
50
+ /**
51
+ * Validates the form input. This is called on input and blur events.
52
+ */
53
+ validate$?: QRL<(value: string | null | undefined) => TextFieldValidationResult>;
54
+ /**
55
+ * Called to validate the form input. This is called on input and blur events
56
+ * and is an alternative to the validate$ prop.
57
+ */
17
58
  schema$?: QRL<() => v.BaseSchema<any, any, any>>;
59
+ /**
60
+ * An optional signal that indicates whether the input is valid.
61
+ */
18
62
  valid?: Signal<undefined | boolean>;
19
63
  /**
20
64
  * Increment the value of this signal to reset the input to its original value.
21
65
  */
22
- reset?: Signal<number>;
66
+ triggerReset?: Signal<number>;
67
+ /**
68
+ * Increment the value of this signal to force validation to execute. Be
69
+ * aware that this will also cause the input to be touched, which will
70
+ * display the error message if one exists.
71
+ */
72
+ triggerValidation?: Signal<number>;
23
73
  }
74
+ /**
75
+ * A standardized text input field meant to be used independently or with Qwik
76
+ * Modular Forms.
77
+ *
78
+ * Be aware that the normalized value of the input from validation is reflected
79
+ * back into the text field automatically on blur.
80
+ */
24
81
  export declare const TextField: import("@builder.io/qwik").Component<TextFieldProps>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nr1e/qwik-ui",
3
- "version": "2.0.5",
3
+ "version": "2.0.7",
4
4
  "description": "NR1E Qwik UI Library",
5
5
  "author": "NR1E, Inc.",
6
6
  "publishConfig": {