@nr1e/qwik-ui 1.0.3 → 1.0.5

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 (16) hide show
  1. package/lib/components/add-button.qwik.cjs +1 -0
  2. package/lib/components/add-button.qwik.mjs +1 -0
  3. package/lib/components/google-sign-in-button.qwik.cjs +1 -0
  4. package/lib/components/google-sign-in-button.qwik.mjs +1 -0
  5. package/lib/components/microsoft-sign-in-button.qwik.cjs +1 -0
  6. package/lib/components/microsoft-sign-in-button.qwik.mjs +1 -0
  7. package/lib/components/select-field.qwik.cjs +36 -1
  8. package/lib/components/select-field.qwik.mjs +36 -1
  9. package/lib/components/text-field.qwik.cjs +39 -3
  10. package/lib/components/text-field.qwik.mjs +39 -3
  11. package/lib-types/components/add-button.d.ts +1 -0
  12. package/lib-types/components/google-sign-in-button.d.ts +1 -0
  13. package/lib-types/components/microsoft-sign-in-button.d.ts +1 -0
  14. package/lib-types/components/select-field.d.ts +4 -1
  15. package/lib-types/components/text-field.d.ts +4 -1
  16. package/package.json +9 -9
package/lib/components/add-button.qwik.cjs CHANGED
@@ -7,6 +7,7 @@ const AddButton = qwik.component$((props) => {
7
7
  return /* @__PURE__ */ jsxRuntime.jsxs("button", {
8
8
  class: `btn ${props.class ?? ""}`,
9
9
  onClick$: props.onClick$,
10
+ id: props.id,
10
11
  children: [
11
12
  /* @__PURE__ */ jsxRuntime.jsx(qwikIcons.MdiAddCircleOutline, {
12
13
  size: 18
package/lib/components/add-button.qwik.mjs CHANGED
@@ -5,6 +5,7 @@ const AddButton = component$((props) => {
5
5
  return /* @__PURE__ */ jsxs("button", {
6
6
  class: `btn ${props.class ?? ""}`,
7
7
  onClick$: props.onClick$,
8
+ id: props.id,
8
9
  children: [
9
10
  /* @__PURE__ */ jsx(MdiAddCircleOutline, {
10
11
  size: 18
package/lib/components/google-sign-in-button.qwik.cjs CHANGED
@@ -7,6 +7,7 @@ const GoogleSignInButton = qwik.component$((props) => {
7
7
  return /* @__PURE__ */ jsxRuntime.jsxs("button", {
8
8
  class: `btn ${props.class ?? ""}`,
9
9
  onClick$: props.onClick$,
10
+ id: props.id,
10
11
  children: [
11
12
  /* @__PURE__ */ jsxRuntime.jsx(qwikIcons.LogosGoogleIcon, {
12
13
  size: 18
package/lib/components/google-sign-in-button.qwik.mjs CHANGED
@@ -5,6 +5,7 @@ const GoogleSignInButton = component$((props) => {
5
5
  return /* @__PURE__ */ jsxs("button", {
6
6
  class: `btn ${props.class ?? ""}`,
7
7
  onClick$: props.onClick$,
8
+ id: props.id,
8
9
  children: [
9
10
  /* @__PURE__ */ jsx(LogosGoogleIcon, {
10
11
  size: 18
package/lib/components/microsoft-sign-in-button.qwik.cjs CHANGED
@@ -7,6 +7,7 @@ const MicrosoftSignInButton = qwik.component$((props) => {
7
7
  return /* @__PURE__ */ jsxRuntime.jsxs("button", {
8
8
  class: `btn ${props.class ?? ""}`,
9
9
  onClick$: props.onClick$,
10
+ id: props.id,
10
11
  children: [
11
12
  /* @__PURE__ */ jsxRuntime.jsx(qwikIcons.LogosMicrosoftIcon, {
12
13
  size: 18
package/lib/components/microsoft-sign-in-button.qwik.mjs CHANGED
@@ -5,6 +5,7 @@ const MicrosoftSignInButton = component$((props) => {
5
5
  return /* @__PURE__ */ jsxs("button", {
6
6
  class: `btn ${props.class ?? ""}`,
7
7
  onClick$: props.onClick$,
8
+ id: props.id,
8
9
  children: [
9
10
  /* @__PURE__ */ jsx(LogosMicrosoftIcon, {
10
11
  size: 18
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,6 +82,9 @@ 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
89
  onChange$: (e) => {
62
90
  const target = e.target;
@@ -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
+ props.validate$(target.value, error);
102
+ }
72
103
  },
73
104
  onBlur$: (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
+ props.validate$(target.value, error);
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,6 +80,9 @@ 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
87
  onChange$: (e) => {
60
88
  const target = e.target;
@@ -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
+ props.validate$(target.value, error);
100
+ }
70
101
  },
71
102
  onBlur$: (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
+ props.validate$(target.value, error);
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
99
  onBlur$: (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,6 +108,9 @@ 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
+ props.validate$(target.value, error);
113
+ }
81
114
  },
82
115
  onInput$: (e) => {
83
116
  const target = e.target;
@@ -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
+ props.validate$(target.value, error);
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
97
  onBlur$: (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,6 +106,9 @@ 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
+ props.validate$(target.value, error);
111
+ }
79
112
  },
80
113
  onInput$: (e) => {
81
114
  const target = e.target;
@@ -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
+ props.validate$(target.value, error);
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/add-button.d.ts CHANGED
@@ -2,5 +2,6 @@ import { QRL } from '@builder.io/qwik';
2
2
  export interface AddButtonProps {
3
3
  class?: string;
4
4
  onClick$?: QRL<(event: Event) => void>;
5
+ id?: string;
5
6
  }
6
7
  export declare const AddButton: import("@builder.io/qwik").Component<AddButtonProps>;
package/lib-types/components/google-sign-in-button.d.ts CHANGED
@@ -2,5 +2,6 @@ import { QRL } from '@builder.io/qwik';
2
2
  export interface GoogleSignInButtonProps {
3
3
  class?: string;
4
4
  onClick$?: QRL<(event: Event) => void>;
5
+ id?: string;
5
6
  }
6
7
  export declare const GoogleSignInButton: import("@builder.io/qwik").Component<GoogleSignInButtonProps>;
package/lib-types/components/microsoft-sign-in-button.d.ts CHANGED
@@ -2,5 +2,6 @@ import { QRL } from '@builder.io/qwik';
2
2
  export interface MicrosoftSignInButtonProps {
3
3
  class?: string;
4
4
  onClick$?: QRL<(event: Event) => void>;
5
+ id?: string;
5
6
  }
6
7
  export declare const MicrosoftSignInButton: import("@builder.io/qwik").Component<MicrosoftSignInButtonProps>;
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, error: Signal<string | undefined>) => void>;
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, error: Signal<string | undefined>) => void>;
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.3",
3
+ "version": "1.0.5",
4
4
  "description": "NR1E Qwik UI Library",
5
5
  "author": "NR1E, Inc.",
6
6
  "publishConfig": {
@@ -34,25 +34,25 @@
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
- "@nr1e/qwik-icons": "0.0.25"
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
- "@tailwindcss/vite": "^4.2.0",
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",
53
- "tailwindcss": "^4.2.0",
53
+ "tailwindcss": "^4.2.1",
54
54
  "typescript": "5.9.3",
55
- "typescript-eslint": "8.56.0",
55
+ "typescript-eslint": "8.56.1",
56
56
  "undici": "*",
57
57
  "vite": "7.3.1",
58
58
  "vite-tsconfig-paths": "^6.1.1",