@greghowe79/the-lib 1.0.8 → 1.0.9

package/lib/components/input/input.qwik.cjs

@@ -26,7 +26,7 @@ const uploadImage = qwik.$(async (_event, input, currentFile, selectedFile, imag
     if (selectedFile) selectedFile.value = file.name;
   }
 });
-const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false, name, checked }) => {
+const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false, color, nameAttribute, label, selectedValue }) => {
   qwik.useStylesScoped$(styles);
   const internalError = qwik.useSignal(null);
   const showError = error ?? internalError;
@@ -39,12 +39,6 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
         return;
       }
     }
-    if (type === "radio") {
-      if (value) {
-        elem.value = value.value;
-      }
-      return;
-    }
     if (value) value.value = elem.value;
     if (onInput$) {
       await onInput$();
@@ -119,14 +113,25 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
             })
           ]
         })
-      }) : type === "radio" ? /* @__PURE__ */ jsxRuntime.jsx("input", {
-        id,
-        type: "radio",
-        name,
-        checked: checked?.value,
-        required,
-        "bind:value": value,
-        onInput$: inputHandler
+      }) : type === "radio" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", {
+            type: "radio",
+            id,
+            name: nameAttribute,
+            value: color,
+            checked: selectedValue?.value === color,
+            onChange$: (e) => {
+              if (selectedValue) {
+                selectedValue.value = e.target.value;
+              }
+            }
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx("label", {
+            for: id,
+            children: label
+          })
+        ]
       }) : /* @__PURE__ */ jsxRuntime.jsx("label", {
         class: `input-label ${bgLight ? "bg_light" : ""}`,
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", {

package/lib/components/input/input.qwik.mjs

@@ -24,7 +24,7 @@ const uploadImage = $(async (_event, input, currentFile, selectedFile, imageUrl)
     if (selectedFile) selectedFile.value = file.name;
   }
 });
-const Input = component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false, name, checked }) => {
+const Input = component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false, color, nameAttribute, label, selectedValue }) => {
   useStylesScoped$(styles);
   const internalError = useSignal(null);
   const showError = error ?? internalError;
@@ -37,12 +37,6 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
         return;
       }
     }
-    if (type === "radio") {
-      if (value) {
-        elem.value = value.value;
-      }
-      return;
-    }
     if (value) value.value = elem.value;
     if (onInput$) {
       await onInput$();
@@ -117,14 +111,25 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
             })
           ]
         })
-      }) : type === "radio" ? /* @__PURE__ */ jsx("input", {
-        id,
-        type: "radio",
-        name,
-        checked: checked?.value,
-        required,
-        "bind:value": value,
-        onInput$: inputHandler
+      }) : type === "radio" ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx("input", {
+            type: "radio",
+            id,
+            name: nameAttribute,
+            value: color,
+            checked: selectedValue?.value === color,
+            onChange$: (e) => {
+              if (selectedValue) {
+                selectedValue.value = e.target.value;
+              }
+            }
+          }),
+          /* @__PURE__ */ jsx("label", {
+            for: id,
+            children: label
+          })
+        ]
       }) : /* @__PURE__ */ jsx("label", {
         class: `input-label ${bgLight ? "bg_light" : ""}`,
         children: /* @__PURE__ */ jsxs("div", {

package/lib-types/components/input/input.d.ts

@@ -5,7 +5,6 @@ export interface InputProps {
     id: string;
     type: InputType;
     placeholder?: string;
-    name?: string;
     value?: Signal<string>;
     error?: Signal<string | null>;
     onValidate$?: QRL<(value: string) => Promise<string>>;
@@ -16,7 +15,12 @@ export interface InputProps {
     icon?: JSXOutput | Component<unknown>;
     prefix?: string;
     required?: boolean;
-    checked?: Signal<boolean>;
+    onChange?: QRL<(_: Event, el: HTMLInputElement) => Promise<void>>;
+    checked?: boolean;
+    color?: string;
+    nameAttribute?: string;
+    label?: string;
+    selectedValue?: Signal<string>;
 }
 export declare const displayLocalImage: QRL<(file: File, imageUrl?: Signal<string>) => void>;
 export declare const uploadImage: QRL<(_event: Event, input: HTMLInputElement, currentFile?: Signal<any>, selectedFile?: Signal<string>, imageUrl?: Signal<string>) => Promise<void>>;

package/lib-types/stories/input.stories.d.ts

@@ -7,5 +7,4 @@ export declare const Email: Story;
 export declare const InputLightBackground: Story;
 export declare const InputWithIcon: Story;
 export declare const PhoneInput: Story;
-export declare const RadioInput: Story;
 export declare const FileUpload: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greghowe79/the-lib",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Collection of fast components for Qwik",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",