Include label in Input

dist/sigpro-ui.esm.js

@@ -376,7 +376,7 @@ var For2 = (source, renderFn, keyFn, tag = "div", props = { style: "display:cont
 var Router = (routes) => {
   const currentPath = $2(window.location.hash.replace(/^#/, "") || "/");
   window.addEventListener("hashchange", () => currentPath(window.location.hash.replace(/^#/, "") || "/"));
-  const outlet = Tag2("div", { class: "router-outlet" });
+  const outlet = Tag2("div", { class: "router-transition" });
   let currentView = null;
   Watch2([currentPath], async () => {
     const path = currentPath();
@@ -604,8 +604,8 @@ var Input = (props) => {
     oninput,
     placeholder,
     disabled,
-    size,
     validate,
+    label,
     ...rest
   } = props;
   const isPassword = type === "password";
@@ -654,14 +654,14 @@ var Input = (props) => {
   const inputElement = Tag("input", {
     ...rest,
     type: () => isPassword ? visible() ? "text" : "password" : type,
-    placeholder: placeholder || " ",
+    placeholder: placeholder || (label ? " " : placeholder),
     class: inputClasses,
     value,
     oninput: handleInput,
     disabled: () => val(disabled),
     "aria-invalid": () => hasError() ? "true" : "false"
   });
-  return Tag("div", { class: "relative w-full" }, () => [
+  const inputContent = () => [
     inputElement,
     leftIcon ? Tag("div", {
       class: "absolute left-3 inset-y-0 flex items-center pointer-events-none text-base-content/60"
@@ -677,7 +677,14 @@ var Input = (props) => {
     Tag("div", {
       class: "text-error text-xs mt-1 px-3 absolute -bottom-5 left-0"
     }, () => hasError() ? errorMsg() : null)
-  ]);
+  ];
+  if (label) {
+    return Tag("label", { class: ui("floating-label w-full", className) }, () => [
+      Tag("div", { class: "relative w-full" }, inputContent),
+      Tag("span", {}, val(label))
+    ]);
+  }
+  return Tag("div", { class: "relative w-full" }, inputContent);
 };
 
 // src/components/Autocomplete.js
@@ -790,18 +797,17 @@ __export(exports_Checkbox, {
   Checkbox: () => Checkbox
 });
 var Checkbox = (props) => {
-  const { class: className, value, tooltip, toggle, label, ...rest } = props;
+  const { class: className, value, toggle, label, ...rest } = props;
   const checkEl = Tag("input", {
     ...rest,
     type: "checkbox",
     class: () => ui(val(toggle) ? "toggle" : "checkbox", className),
     checked: value
   });
-  const layout = Tag("label", { class: "label cursor-pointer justify-start gap-3" }, [
+  return Tag("label", { class: "label cursor-pointer justify-start gap-3" }, [
     checkEl,
     label ? Tag("span", { class: "label-text" }, label) : null
   ]);
-  return tooltip ? Tag("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
 };
 
 // src/components/Colorpicker.js
@@ -1344,18 +1350,16 @@ __export(exports_Label, {
   Label: () => Label
 });
 var Label = (props) => {
-  const { children, value, floating = false, error, required, class: className, ...rest } = props;
+  const { children, value, floating = false, class: className, ...rest } = props;
   if (floating) {
-    return Tag("label", { class: ui("floating-label w-full", className), ...rest }, () => [
-      value ? Tag("span", {}, value) : null,
-      children,
-      error ? Tag("span", { class: "text-error text-xs" }, val(error)) : null
+    return Tag("label", { class: ui("floating-label", className), ...rest }, () => [
+      typeof children === "function" ? children() : children,
+      value ? Tag("span", {}, val(value)) : null
     ]);
   }
-  return Tag("label", { class: ui("input w-full", className), ...rest }, () => [
-    value ? Tag("span", { class: "label" }, value) : null,
-    children,
-    error ? Tag("span", { class: "text-error text-xs" }, val(error)) : null
+  return Tag("label", { class: ui("label", className), ...rest }, () => [
+    value ? Tag("span", { class: "label-text" }, val(value)) : null,
+    typeof children === "function" ? children() : children
   ]);
 };
 
@@ -1817,7 +1821,7 @@ __export(exports_Tooltip, {
 });
 var Tooltip = (props, children) => Tag("div", {
   ...props,
-  class: () => ui("tooltip", props.class),
+  class: () => ui("tooltip w-full", props.class),
   "data-tip": props.tip
 }, children);
 

dist/sigpro-ui.js

@@ -444,7 +444,7 @@
   var Router = (routes) => {
     const currentPath = $2(window.location.hash.replace(/^#/, "") || "/");
     window.addEventListener("hashchange", () => currentPath(window.location.hash.replace(/^#/, "") || "/"));
-    const outlet = Tag2("div", { class: "router-outlet" });
+    const outlet = Tag2("div", { class: "router-transition" });
     let currentView = null;
     Watch2([currentPath], async () => {
       const path = currentPath();
@@ -672,8 +672,8 @@
       oninput,
       placeholder,
       disabled,
-      size,
       validate,
+      label,
       ...rest
     } = props;
     const isPassword = type === "password";
@@ -722,14 +722,14 @@
     const inputElement = Tag("input", {
       ...rest,
       type: () => isPassword ? visible() ? "text" : "password" : type,
-      placeholder: placeholder || " ",
+      placeholder: placeholder || (label ? " " : placeholder),
       class: inputClasses,
       value,
       oninput: handleInput,
       disabled: () => val(disabled),
       "aria-invalid": () => hasError() ? "true" : "false"
     });
-    return Tag("div", { class: "relative w-full" }, () => [
+    const inputContent = () => [
       inputElement,
       leftIcon ? Tag("div", {
         class: "absolute left-3 inset-y-0 flex items-center pointer-events-none text-base-content/60"
@@ -745,7 +745,14 @@
       Tag("div", {
         class: "text-error text-xs mt-1 px-3 absolute -bottom-5 left-0"
       }, () => hasError() ? errorMsg() : null)
-    ]);
+    ];
+    if (label) {
+      return Tag("label", { class: ui("floating-label w-full", className) }, () => [
+        Tag("div", { class: "relative w-full" }, inputContent),
+        Tag("span", {}, val(label))
+      ]);
+    }
+    return Tag("div", { class: "relative w-full" }, inputContent);
   };
 
   // src/components/Autocomplete.js
@@ -858,18 +865,17 @@
     Checkbox: () => Checkbox
   });
   var Checkbox = (props) => {
-    const { class: className, value, tooltip, toggle, label, ...rest } = props;
+    const { class: className, value, toggle, label, ...rest } = props;
     const checkEl = Tag("input", {
       ...rest,
       type: "checkbox",
       class: () => ui(val(toggle) ? "toggle" : "checkbox", className),
       checked: value
     });
-    const layout = Tag("label", { class: "label cursor-pointer justify-start gap-3" }, [
+    return Tag("label", { class: "label cursor-pointer justify-start gap-3" }, [
       checkEl,
       label ? Tag("span", { class: "label-text" }, label) : null
     ]);
-    return tooltip ? Tag("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
   };
 
   // src/components/Colorpicker.js
@@ -1412,18 +1418,16 @@
     Label: () => Label
   });
   var Label = (props) => {
-    const { children, value, floating = false, error, required, class: className, ...rest } = props;
+    const { children, value, floating = false, class: className, ...rest } = props;
     if (floating) {
-      return Tag("label", { class: ui("floating-label w-full", className), ...rest }, () => [
-        value ? Tag("span", {}, value) : null,
-        children,
-        error ? Tag("span", { class: "text-error text-xs" }, val(error)) : null
+      return Tag("label", { class: ui("floating-label", className), ...rest }, () => [
+        typeof children === "function" ? children() : children,
+        value ? Tag("span", {}, val(value)) : null
       ]);
     }
-    return Tag("label", { class: ui("input w-full", className), ...rest }, () => [
-      value ? Tag("span", { class: "label" }, value) : null,
-      children,
-      error ? Tag("span", { class: "text-error text-xs" }, val(error)) : null
+    return Tag("label", { class: ui("label", className), ...rest }, () => [
+      value ? Tag("span", { class: "label-text" }, val(value)) : null,
+      typeof children === "function" ? children() : children
     ]);
   };
 
@@ -1885,7 +1889,7 @@
   });
   var Tooltip = (props, children) => Tag("div", {
     ...props,
-    class: () => ui("tooltip", props.class),
+    class: () => ui("tooltip w-full", props.class),
     "data-tip": props.tip
   }, children);