@nr1e/qwik-ui 1.0.4 → 2.0.0

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 (8) hide show
  1. package/lib/components/drop-up.qwik.mjs +1 -1
  2. package/lib/components/select-field.qwik.cjs +38 -3
  3. package/lib/components/select-field.qwik.mjs +38 -3
  4. package/lib/components/text-field.qwik.cjs +41 -5
  5. package/lib/components/text-field.qwik.mjs +41 -5
  6. package/lib-types/components/select-field.d.ts +4 -1
  7. package/lib-types/components/text-field.d.ts +4 -1
  8. package/package.json +5 -5
package/lib/components/drop-up.qwik.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx } from "@builder.io/qwik/jsx-runtime";
2
- import { component$, Slot, useSignal, useTask$, useOnDocument, $ } from "@builder.io/qwik";
2
+ import { component$, useSignal, useTask$, useOnDocument, $, Slot } from "@builder.io/qwik";
3
3
  import { Link } from "@builder.io/qwik-city";
4
4
  const DropUpButton = component$((props) => {
5
5
  return /* @__PURE__ */ jsx("li", {
package/lib/components/select-field.qwik.cjs CHANGED
@@ -5,6 +5,15 @@ 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 disabled = qwik.useSignal(false);
9
+ if (props.disabled) {
10
+ if (typeof props.disabled === "boolean") {
11
+ disabled.value = props.disabled;
12
+ } else {
13
+ disabled.value = props.disabled.value;
14
+ }
15
+ }
16
+ const touched = qwik.useSignal(false);
8
17
  qwik.useTask$(({ track }) => {
9
18
  if (props.error && typeof props.error !== "string") {
10
19
  track(() => error.value);
@@ -37,10 +46,26 @@ const SelectField = qwik.component$((props) => {
37
46
  }
38
47
  }
39
48
  });
49
+ qwik.useTask$(({ track }) => {
50
+ if (props.disabled && typeof props.disabled !== "boolean") {
51
+ track(() => disabled.value);
52
+ if (disabled.value !== props.disabled?.value) {
53
+ props.disabled.value = disabled.value;
54
+ }
55
+ }
56
+ });
57
+ qwik.useTask$(({ track }) => {
58
+ if (props.disabled && typeof props.disabled !== "boolean") {
59
+ track(() => props.disabled.value);
60
+ if (props.disabled && disabled.value !== props.disabled.value) {
61
+ disabled.value = props.disabled.value;
62
+ }
63
+ }
64
+ });
40
65
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
41
66
  class: "fieldset",
42
67
  children: [
43
- /* @__PURE__ */ jsxRuntime.jsx("label", {
68
+ props.label && /* @__PURE__ */ jsxRuntime.jsx("label", {
44
69
  class: "label",
45
70
  ...props.id && {
46
71
  for: props.id
@@ -57,8 +82,11 @@ const SelectField = qwik.component$((props) => {
57
82
  ...props.id && {
58
83
  id: props.id
59
84
  },
85
+ required: props.required,
86
+ "aria-required": props.required,
87
+ disabled: disabled.value,
60
88
  class: `select ${error.value ? "select-error" : ""}`,
61
- onChange$: (e) => {
89
+ onChange$: async (e) => {
62
90
  const target = e.target;
63
91
  if (props.onChange$) {
64
92
  props.onChange$(e, target.value, error);
@@ -69,8 +97,12 @@ const SelectField = qwik.component$((props) => {
69
97
  if (props.value && typeof props.value !== "string") {
70
98
  value.value = target.value;
71
99
  }
100
+ if (props.validate$) {
101
+ error.value = await props.validate$(target.value);
102
+ }
72
103
  },
73
- onBlur$: (e) => {
104
+ onBlur$: async (e) => {
105
+ touched.value = true;
74
106
  const target = e.target;
75
107
  if (props.onBlur$) {
76
108
  props.onBlur$(e, target.value, error);
@@ -81,6 +113,9 @@ const SelectField = qwik.component$((props) => {
81
113
  if (props.value && typeof props.value !== "string") {
82
114
  value.value = target.value;
83
115
  }
116
+ if (props.validate$) {
117
+ error.value = await props.validate$(target.value);
118
+ }
84
119
  },
85
120
  children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
86
121
  }),
package/lib/components/select-field.qwik.mjs CHANGED
@@ -3,6 +3,15 @@ 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 disabled = useSignal(false);
7
+ if (props.disabled) {
8
+ if (typeof props.disabled === "boolean") {
9
+ disabled.value = props.disabled;
10
+ } else {
11
+ disabled.value = props.disabled.value;
12
+ }
13
+ }
14
+ const touched = useSignal(false);
6
15
  useTask$(({ track }) => {
7
16
  if (props.error && typeof props.error !== "string") {
8
17
  track(() => error.value);
@@ -35,10 +44,26 @@ const SelectField = component$((props) => {
35
44
  }
36
45
  }
37
46
  });
47
+ useTask$(({ track }) => {
48
+ if (props.disabled && typeof props.disabled !== "boolean") {
49
+ track(() => disabled.value);
50
+ if (disabled.value !== props.disabled?.value) {
51
+ props.disabled.value = disabled.value;
52
+ }
53
+ }
54
+ });
55
+ useTask$(({ track }) => {
56
+ if (props.disabled && typeof props.disabled !== "boolean") {
57
+ track(() => props.disabled.value);
58
+ if (props.disabled && disabled.value !== props.disabled.value) {
59
+ disabled.value = props.disabled.value;
60
+ }
61
+ }
62
+ });
38
63
  return /* @__PURE__ */ jsxs("div", {
39
64
  class: "fieldset",
40
65
  children: [
41
- /* @__PURE__ */ jsx("label", {
66
+ props.label && /* @__PURE__ */ jsx("label", {
42
67
  class: "label",
43
68
  ...props.id && {
44
69
  for: props.id
@@ -55,8 +80,11 @@ const SelectField = component$((props) => {
55
80
  ...props.id && {
56
81
  id: props.id
57
82
  },
83
+ required: props.required,
84
+ "aria-required": props.required,
85
+ disabled: disabled.value,
58
86
  class: `select ${error.value ? "select-error" : ""}`,
59
- onChange$: (e) => {
87
+ onChange$: async (e) => {
60
88
  const target = e.target;
61
89
  if (props.onChange$) {
62
90
  props.onChange$(e, target.value, error);
@@ -67,8 +95,12 @@ const SelectField = component$((props) => {
67
95
  if (props.value && typeof props.value !== "string") {
68
96
  value.value = target.value;
69
97
  }
98
+ if (props.validate$) {
99
+ error.value = await props.validate$(target.value);
100
+ }
70
101
  },
71
- onBlur$: (e) => {
102
+ onBlur$: async (e) => {
103
+ touched.value = true;
72
104
  const target = e.target;
73
105
  if (props.onBlur$) {
74
106
  props.onBlur$(e, target.value, error);
@@ -79,6 +111,9 @@ const SelectField = component$((props) => {
79
111
  if (props.value && typeof props.value !== "string") {
80
112
  value.value = target.value;
81
113
  }
114
+ if (props.validate$) {
115
+ error.value = await props.validate$(target.value);
116
+ }
82
117
  },
83
118
  children: /* @__PURE__ */ jsx(Slot, {})
84
119
  }),
package/lib/components/text-field.qwik.cjs CHANGED
@@ -5,6 +5,15 @@ 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
7
  const value = qwik.useSignal(typeof props.value === "string" ? props.value : props.value?.value);
8
+ const disabled = qwik.useSignal(false);
9
+ if (props.disabled) {
10
+ if (typeof props.disabled === "boolean") {
11
+ disabled.value = props.disabled;
12
+ } else {
13
+ disabled.value = props.disabled.value;
14
+ }
15
+ }
16
+ const touched = qwik.useSignal(false);
8
17
  qwik.useTask$(({ track }) => {
9
18
  if (props.error && typeof props.error !== "string") {
10
19
  track(() => error.value);
@@ -37,10 +46,26 @@ const TextField = qwik.component$((props) => {
37
46
  }
38
47
  }
39
48
  });
49
+ qwik.useTask$(({ track }) => {
50
+ if (props.disabled && typeof props.disabled !== "boolean") {
51
+ track(() => disabled.value);
52
+ if (disabled.value !== props.disabled?.value) {
53
+ props.disabled.value = disabled.value;
54
+ }
55
+ }
56
+ });
57
+ qwik.useTask$(({ track }) => {
58
+ if (props.disabled && typeof props.disabled !== "boolean") {
59
+ track(() => props.disabled.value);
60
+ if (props.disabled && disabled.value !== props.disabled.value) {
61
+ disabled.value = props.disabled.value;
62
+ }
63
+ }
64
+ });
40
65
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
41
66
  class: "fieldset",
42
67
  children: [
43
- /* @__PURE__ */ jsxRuntime.jsx("label", {
68
+ props.label && /* @__PURE__ */ jsxRuntime.jsx("label", {
44
69
  class: "label",
45
70
  ...props.id && {
46
71
  for: props.id
@@ -51,7 +76,7 @@ const TextField = qwik.component$((props) => {
51
76
  })
52
77
  }),
53
78
  /* @__PURE__ */ jsxRuntime.jsxs("label", {
54
- class: `input w-full ${error.value ? "input-error" : ""}`,
79
+ class: `input w-full ${error.value && touched.value ? "input-error" : ""}`,
55
80
  children: [
56
81
  /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
57
82
  name: "left"
@@ -64,10 +89,15 @@ const TextField = qwik.component$((props) => {
64
89
  ...props.name && {
65
90
  name: props.name
66
91
  },
92
+ required: props.required,
93
+ "aria-required": props.required,
94
+ disabled: disabled.value,
95
+ maxLength: props.maxLength,
67
96
  value: value.value,
68
97
  class: "placeholder:opacity-50",
69
98
  placeholder: props.placeholder,
70
- onBlur$: (e) => {
99
+ onBlur$: async (e) => {
100
+ touched.value = true;
71
101
  const target = e.target;
72
102
  if (props.onBlur$) {
73
103
  props.onBlur$(e, target.value, error);
@@ -78,8 +108,11 @@ const TextField = qwik.component$((props) => {
78
108
  if (props.value && typeof props.value !== "string") {
79
109
  value.value = target.value;
80
110
  }
111
+ if (props.validate$) {
112
+ error.value = await props.validate$(target.value);
113
+ }
81
114
  },
82
- onInput$: (e) => {
115
+ onInput$: async (e) => {
83
116
  const target = e.target;
84
117
  if (props.onInput$) {
85
118
  props.onInput$(e, target.value, error);
@@ -90,6 +123,9 @@ const TextField = qwik.component$((props) => {
90
123
  if (props.value && typeof props.value !== "string") {
91
124
  value.value = target.value;
92
125
  }
126
+ if (props.validate$) {
127
+ error.value = await props.validate$(target.value);
128
+ }
93
129
  }
94
130
  }),
95
131
  /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
@@ -97,7 +133,7 @@ const TextField = qwik.component$((props) => {
97
133
  })
98
134
  ]
99
135
  }),
100
- error.value && /* @__PURE__ */ jsxRuntime.jsx("div", {
136
+ error.value && touched.value && /* @__PURE__ */ jsxRuntime.jsx("div", {
101
137
  class: "text-error mt-1 text-xs",
102
138
  children: error.value
103
139
  })
package/lib/components/text-field.qwik.mjs CHANGED
@@ -3,6 +3,15 @@ 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
5
  const value = useSignal(typeof props.value === "string" ? props.value : props.value?.value);
6
+ const disabled = useSignal(false);
7
+ if (props.disabled) {
8
+ if (typeof props.disabled === "boolean") {
9
+ disabled.value = props.disabled;
10
+ } else {
11
+ disabled.value = props.disabled.value;
12
+ }
13
+ }
14
+ const touched = useSignal(false);
6
15
  useTask$(({ track }) => {
7
16
  if (props.error && typeof props.error !== "string") {
8
17
  track(() => error.value);
@@ -35,10 +44,26 @@ const TextField = component$((props) => {
35
44
  }
36
45
  }
37
46
  });
47
+ useTask$(({ track }) => {
48
+ if (props.disabled && typeof props.disabled !== "boolean") {
49
+ track(() => disabled.value);
50
+ if (disabled.value !== props.disabled?.value) {
51
+ props.disabled.value = disabled.value;
52
+ }
53
+ }
54
+ });
55
+ useTask$(({ track }) => {
56
+ if (props.disabled && typeof props.disabled !== "boolean") {
57
+ track(() => props.disabled.value);
58
+ if (props.disabled && disabled.value !== props.disabled.value) {
59
+ disabled.value = props.disabled.value;
60
+ }
61
+ }
62
+ });
38
63
  return /* @__PURE__ */ jsxs("div", {
39
64
  class: "fieldset",
40
65
  children: [
41
- /* @__PURE__ */ jsx("label", {
66
+ props.label && /* @__PURE__ */ jsx("label", {
42
67
  class: "label",
43
68
  ...props.id && {
44
69
  for: props.id
@@ -49,7 +74,7 @@ const TextField = component$((props) => {
49
74
  })
50
75
  }),
51
76
  /* @__PURE__ */ jsxs("label", {
52
- class: `input w-full ${error.value ? "input-error" : ""}`,
77
+ class: `input w-full ${error.value && touched.value ? "input-error" : ""}`,
53
78
  children: [
54
79
  /* @__PURE__ */ jsx(Slot, {
55
80
  name: "left"
@@ -62,10 +87,15 @@ const TextField = component$((props) => {
62
87
  ...props.name && {
63
88
  name: props.name
64
89
  },
90
+ required: props.required,
91
+ "aria-required": props.required,
92
+ disabled: disabled.value,
93
+ maxLength: props.maxLength,
65
94
  value: value.value,
66
95
  class: "placeholder:opacity-50",
67
96
  placeholder: props.placeholder,
68
- onBlur$: (e) => {
97
+ onBlur$: async (e) => {
98
+ touched.value = true;
69
99
  const target = e.target;
70
100
  if (props.onBlur$) {
71
101
  props.onBlur$(e, target.value, error);
@@ -76,8 +106,11 @@ const TextField = component$((props) => {
76
106
  if (props.value && typeof props.value !== "string") {
77
107
  value.value = target.value;
78
108
  }
109
+ if (props.validate$) {
110
+ error.value = await props.validate$(target.value);
111
+ }
79
112
  },
80
- onInput$: (e) => {
113
+ onInput$: async (e) => {
81
114
  const target = e.target;
82
115
  if (props.onInput$) {
83
116
  props.onInput$(e, target.value, error);
@@ -88,6 +121,9 @@ const TextField = component$((props) => {
88
121
  if (props.value && typeof props.value !== "string") {
89
122
  value.value = target.value;
90
123
  }
124
+ if (props.validate$) {
125
+ error.value = await props.validate$(target.value);
126
+ }
91
127
  }
92
128
  }),
93
129
  /* @__PURE__ */ jsx(Slot, {
@@ -95,7 +131,7 @@ const TextField = component$((props) => {
95
131
  })
96
132
  ]
97
133
  }),
98
- error.value && /* @__PURE__ */ jsx("div", {
134
+ error.value && touched.value && /* @__PURE__ */ jsx("div", {
99
135
  class: "text-error mt-1 text-xs",
100
136
  children: error.value
101
137
  })
package/lib-types/components/select-field.d.ts CHANGED
@@ -1,12 +1,15 @@
1
1
  import { QRL, Signal } from '@builder.io/qwik';
2
2
  export interface SelectFieldProps {
3
3
  id?: string;
4
- label: string;
4
+ label?: string;
5
5
  name?: string;
6
6
  value?: string | null | Signal<string | null | undefined>;
7
7
  error?: string | Signal<string | undefined>;
8
+ required?: boolean;
9
+ disabled?: boolean | Signal<boolean>;
8
10
  onChange$?: QRL<(event: Event, value: string, error: Signal<string | undefined>) => void>;
9
11
  onBlur$?: QRL<(event: FocusEvent, value: string, error: Signal<string | undefined>) => void>;
10
12
  onEvent$?: QRL<(type: 'blur' | 'change', event: Event, value: string, error: Signal<string | undefined>) => void>;
13
+ validate$?: QRL<(value: string) => string | undefined>;
11
14
  }
12
15
  export declare const SelectField: import("@builder.io/qwik").Component<SelectFieldProps>;
package/lib-types/components/text-field.d.ts CHANGED
@@ -1,14 +1,17 @@
1
1
  import { QRL, Signal } from '@builder.io/qwik';
2
2
  export interface TextFieldProps {
3
3
  id?: string;
4
- label: string;
4
+ label?: string;
5
5
  name?: string;
6
6
  value?: string | null | Signal<string | null | undefined>;
7
7
  placeholder?: string;
8
8
  error?: string | Signal<string | undefined>;
9
9
  maxLength?: number;
10
+ required?: boolean;
11
+ disabled?: boolean | Signal<boolean>;
10
12
  onBlur$?: QRL<(event: FocusEvent, value: string, error: Signal<string | undefined>) => void>;
11
13
  onInput$?: QRL<(event: InputEvent, value: string, error: Signal<string | undefined>) => void>;
12
14
  onEvent$?: QRL<(type: 'blur' | 'input', event: FocusEvent | InputEvent, value: string, error: Signal<string | undefined>) => void>;
15
+ validate$?: QRL<(value: string) => string | undefined>;
13
16
  }
14
17
  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": "1.0.4",
3
+ "version": "2.0.0",
4
4
  "description": "NR1E Qwik UI Library",
5
5
  "author": "NR1E, Inc.",
6
6
  "publishConfig": {
@@ -34,19 +34,19 @@
34
34
  "sideEffects": false,
35
35
  "type": "module",
36
36
  "peerDependencies": {
37
- "@builder.io/qwik-city": "1.19.0",
37
+ "@builder.io/qwik-city": "1.19.1",
38
38
  "tailwindcss-animated": "2.0.0",
39
39
  "@nr1e/qwik-icons": "0.0.31"
40
40
  },
41
41
  "devDependencies": {
42
- "@builder.io/qwik": "1.19.0",
42
+ "@builder.io/qwik": "1.19.1",
43
43
  "@eslint/js": "^9.39.3",
44
44
  "@tailwindcss/vite": "^4.2.1",
45
45
  "@types/node": "^24.10.13",
46
46
  "daisyui": "^5.5.19",
47
47
  "eslint": "9.39.3",
48
- "eslint-plugin-qwik": "1.19.0",
49
- "globals": "17.3.0",
48
+ "eslint-plugin-qwik": "1.19.1",
49
+ "globals": "17.4.0",
50
50
  "np": "^11.0.2",
51
51
  "prettier": "3.8.1",
52
52
  "prettier-plugin-tailwindcss": "^0.7.1",