input controlled example

bau-ui/examples/bau-storybook/src/pages/input/input-controlled.ts

@@ -0,0 +1,43 @@
+import { Context } from "@grucloud/bau-ui/context";
+import button from "@grucloud/bau-ui/button";
+import input from "@grucloud/bau-ui/input";
+import form from "@grucloud/bau-ui/form";
+
+export default (context: Context) => {
+  const { bau } = context;
+  const { article, footer, label } = bau.tags;
+
+  const Input = input(context);
+  const Form = form(context);
+  const ButtonSubmit = button(context, { variant: "solid", color: "primary" });
+
+  return () => {
+    const inputState = bau.state("");
+    const disableButtonState = bau.derive(() => inputState.val == "");
+
+    const oninput = (event: any) => (inputState.val = event.target.value);
+    const onsubmit = (event: any) => {
+      event.preventDefault();
+      //const payload = Object.fromEntries(new FormData(event.currentTarget));
+      alert(inputState.val);
+    };
+
+    return Form(
+      { onsubmit },
+      article(
+        label(
+          "Input",
+          Input({
+            name: "my-input",
+            placeholder: "Enter Text",
+            value: inputState,
+            oninput,
+          })
+        )
+      ),
+      footer(
+        ButtonSubmit({ type: "submit", disabled: disableButtonState }, "Submit")
+      )
+    );
+  };
+};

bau-ui/examples/bau-storybook/src/pages/input/input-grid-item.ts

@@ -3,12 +3,15 @@ import { Context } from "@grucloud/bau-ui/context";
 
 export default (context: Context, options: any = {}) => {
   const Input = input(context, options);
-
-  return (props: any) =>
+  return ({ color, variant, size, ...props }: any) =>
     Input({
-      name: `myinput-gallery-${options.color}-${options.variant}-${options.size}`,
-      id: `myinput-gallery-${options.color}-${options.variant}-${options.size}`,
+      name: `myinput-gallery-${color ?? options.color}-${
+        variant ?? options.variant
+      }-${size ?? options.size}`,
       placeholder: "Enter text",
+      color,
+      variant,
+      size,
       ...props,
     });
 };

bau-ui/examples/bau-storybook/src/pages/input/input-example-default.ts → bau-ui/examples/bau-storybook/src/pages/input/input-uncontrolled.ts

@@ -6,8 +6,8 @@ import form from "@grucloud/bau-ui/form";
 export default (context: Context) => {
   const { bau } = context;
   const { article, footer, label } = bau.tags;
-  const Input = input(context);
 
+  const Input = input(context);
   const Form = form(context);
   const ButtonSubmit = button(context, { variant: "solid", color: "primary" });
 
@@ -36,6 +36,31 @@ export default (context: Context) => {
             placeholder: "Enter Text",
           })
         ),
+        label(
+          "Input with minLength/maxLength",
+          Input({
+            name: "my-required-input-min-max",
+            placeholder: "Enter Text",
+            required: true,
+            minLength: 3,
+            maxLength: 24,
+          })
+        ),
+        label(
+          "Input with custom error message",
+          Input({
+            name: "my-required-input-custom",
+            placeholder: "Enter Text",
+            required: true,
+            minLength: 3,
+            maxLength: 24,
+            oninvalid: (event: any) => {
+              event.target.setCustomValidity(
+                "Please select the correct format."
+              );
+            },
+          })
+        ),
         label(
           "Disabled input",
           Input({

bau-ui/examples/bau-storybook/src/pages/input/input.examples.ts

@@ -4,9 +4,13 @@ import pageExample from "../pageExample.ts";
 
 import inputGridItem from "./input-grid-item.ts";
 
-import inputDefault from "./input-example-default.ts";
+import inputUncontrolled from "./input-uncontrolled.ts";
 // @ts-ignore
-import codeExampleDefault from "./input-example-default.ts?raw";
+import codeUncontrolled from "./input-uncontrolled.ts?raw";
+
+import inputControlled from "./input-controlled.ts";
+// @ts-ignore
+import codeControlled from "./input-controlled.ts?raw";
 
 export const inputSpec = {
   title: "Input",
@@ -17,10 +21,16 @@ export const inputSpec = {
   importStatement: `import input from "@grucloud/bau-ui/input";`,
   examples: [
     {
-      title: "Default",
-      description: "A simple input.",
-      code: codeExampleDefault,
-      createComponent: inputDefault,
+      title: "Uncontrolled Input",
+      description: "Various uncontrolled inputs.",
+      code: codeUncontrolled,
+      createComponent: inputUncontrolled,
+    },
+    {
+      title: "Controlled Input",
+      description: "Various controlled inputs.",
+      code: codeControlled,
+      createComponent: inputControlled,
     },
   ],
   gridItem: inputGridItem,

bau-ui/examples/bau-storybook/src/pages/stepper/cloud-config/configAzure.ts

@@ -20,11 +20,6 @@ export default (context: Context) => {
 
   return function ConfigAzure({ onclickPrevious, onclickNext }: any) {
     const onsubmit = (event: any) => {
-      // const { subscriptionId, tenantId, appId, password } =
-      //   event.target.elements;
-      // alert(
-      //   `subscriptionId: ${subscriptionId.value}  tenantId ${tenantId.value}, appId: ${appId.value}`
-      // );
       event.preventDefault();
       onclickNext();
     };

bau-ui/themeSwitch/themeSwitch.js

@@ -109,6 +109,7 @@ export default function (context, options = {}) {
       {
         required: "required",
         title: "Switch Theme",
+        name: "theme-switch",
         ...props,
         class: classNames(
           "theme-switch",