select default option

grucloud · Dec 20, 2023 · dd8ebca · dd8ebca
1 parent 413f649
commit dd8ebca
Show file tree

Hide file tree

Showing 8 changed files with 180 additions and 65 deletions.
diff --git a/bau-ui/examples/bau-storybook/src/pages/autocomplete/autocomplete-default-option.ts b/bau-ui/examples/bau-storybook/src/pages/autocomplete/autocomplete-default-option.ts
@@ -1,11 +1,16 @@
 import { Context } from "@grucloud/bau-ui/context";
 import autocomplete from "@grucloud/bau-ui/autocomplete";
+import button from "@grucloud/bau-ui/button";
 
 export default (context: Context) => {
   const { bau, css } = context;
-  const { section, div, span } = bau.tags;
+  const { form, article, footer, div, span } = bau.tags;
 
   const Autocomplete = autocomplete(context);
+  const Button = button(context, {
+    variant: "outline",
+    color: "primary",
+  });
 
   const defaultCode = "AD";
 
@@ -26,17 +31,30 @@ export default (context: Context) => {
       span(option.label),
       span(option.code)
     );
+
+  const onsubmit = (event: any) => {
+    event.preventDefault();
+    const payload = Object.fromEntries(
+      new FormData(event.target.closest("form"))
+    );
+    alert(JSON.stringify(payload));
+  };
+
   return () =>
-    section(
-      Autocomplete({
-        options,
-        Option,
-        defaultOption: options.find(({ code }) => code == defaultCode),
-        getOptionValue: ({ code }: any) => code,
-        getOptionLabel: ({ label }: any) => label,
-        label: "Country",
-        placeholder: "Search countries",
-        id: "country",
-      })
+    form(
+      { onsubmit },
+      article(
+        Autocomplete({
+          options,
+          Option,
+          defaultOption: options.find(({ code }) => code == defaultCode),
+          getOptionValue: ({ code }: any) => code,
+          getOptionLabel: ({ label }: any) => label,
+          label: "Country",
+          placeholder: "Search countries",
+          name: "country",
+        })
+      ),
+      footer(Button({ type: "submit" }, "Submit"))
     );
 };
diff --git a/bau-ui/examples/bau-storybook/src/pages/autocomplete/autocomplete-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/autocomplete/autocomplete-example-default.ts
@@ -1,11 +1,17 @@
-import { Context } from "@grucloud/bau-ui/context";
 import autocomplete from "@grucloud/bau-ui/autocomplete";
+import button from "@grucloud/bau-ui/button";
+
+import { Context } from "@grucloud/bau-ui/context";
 
 export default (context: Context) => {
   const { bau, css } = context;
-  const { section, div, span } = bau.tags;
+  const { div, span, form, article, footer } = bau.tags;
 
   const Autocomplete = autocomplete(context);
+  const Button = button(context, {
+    variant: "outline",
+    color: "primary",
+  });
 
   const options = [
     { code: "AD", label: "Andorra", phone: "376" },
@@ -25,16 +31,28 @@ export default (context: Context) => {
       span(option.code)
     );
 
+  const onsubmit = (event: any) => {
+    event.preventDefault();
+    const payload = Object.fromEntries(
+      new FormData(event.target.closest("form"))
+    );
+    alert(JSON.stringify(payload));
+  };
+
   return () =>
-    section(
-      Autocomplete({
-        options,
-        Option,
-        getOptionValue: ({ code }: any) => code,
-        getOptionLabel: ({ label }: any) => label,
-        label: "Country",
-        placeholder: "Search countries",
-        id: "country",
-      })
+    form(
+      { onsubmit },
+      article(
+        Autocomplete({
+          options,
+          Option,
+          getOptionValue: ({ code }: any) => code,
+          getOptionLabel: ({ label }: any) => label,
+          label: "Country",
+          placeholder: "Search countries",
+          name: "country",
+        })
+      ),
+      footer(Button({ type: "submit" }, "Submit"))
     );
 };
diff --git a/bau-ui/examples/bau-storybook/src/pages/autocomplete/autocomplete-loading.ts b/bau-ui/examples/bau-storybook/src/pages/autocomplete/autocomplete-loading.ts
@@ -4,9 +4,11 @@ import button from "@grucloud/bau-ui/button";
 
 export default (context: Context) => {
   const { bau, css } = context;
-  const { section, div, span } = bau.tags;
+  const { form, article, footer, div, span } = bau.tags;
 
   const Button = button(context, { variant: "outline" });
+  const ButtonSubmit = button(context, { variant: "solid", color: "primary" });
+
   const Autocomplete = autocomplete(context);
 
   const dataState = bau.state([]);
@@ -53,9 +55,17 @@ export default (context: Context) => {
       span(option.name.common)
     );
 
+  const onsubmit = (event: any) => {
+    event.preventDefault();
+    const payload = Object.fromEntries(
+      new FormData(event.target.closest("form"))
+    );
+    alert(JSON.stringify(payload));
+  };
   return () =>
-    section(
-      div(
+    form(
+      { onsubmit },
+      article(
         {
           class: css`
             display: flex;
@@ -70,10 +80,11 @@ export default (context: Context) => {
             getOptionLabel: ({ name }: any) => name.common,
             label: "Country",
             placeholder: "Search countries",
-            id: "country",
+            name: "country",
             loading: loadingState.val,
           }),
-        Button({ onclick: () => fetchCountries() }, "Reload")
-      )
+        Button({ onclick: fetchCountries }, "Reload")
+      ),
+      footer(ButtonSubmit({ type: "submit" }, "Submit"))
     );
 };
diff --git a/bau-ui/examples/bau-storybook/src/pages/select/select-aws-region.ts b/bau-ui/examples/bau-storybook/src/pages/select/select-aws-region.ts
@@ -1,11 +1,13 @@
-import select from "@grucloud/bau-ui/select";
 import { Context } from "@grucloud/bau-ui/context";
+import button from "@grucloud/bau-ui/button";
+import select from "@grucloud/bau-ui/select";
 
 export default (context: Context) => {
   const { bau } = context;
-  const { span, form } = bau.tags;
+  const { form, article, footer, span } = bau.tags;
 
   const Select = select(context);
+  const ButtonSubmit = button(context, { variant: "solid", color: "primary" });
 
   const options: any = [
     "eu-north-1",
@@ -29,14 +31,31 @@ export default (context: Context) => {
 
   const Option = (option: any) => span({}, option);
 
+  const onsubmit = (event: any) => {
+    event.preventDefault();
+    const payload = Object.fromEntries(
+      new FormData(event.target.closest("form"))
+    );
+    alert(JSON.stringify(payload));
+  };
+
   return () =>
     form(
-      Select({
-        options,
-        Option,
-        label: "Select a region",
-        getOptionValue: (label: any) => label,
-        getOptionLabel: (label: any) => label,
-      })
+      { onsubmit },
+      article(
+        Select({
+          name: "region",
+          options,
+          Option,
+          label: "Select a region",
+          getOptionValue: (label: any) => label,
+          getOptionLabel: (label: any) => label,
+          required: true,
+          oninvalid: (event: any) => {
+            event.target.setCustomValidity("Please select an AWS region");
+          },
+        })
+      ),
+      footer(ButtonSubmit({ type: "submit" }, "Submit"))
     );
 };
diff --git a/bau-ui/examples/bau-storybook/src/pages/select/select-default-option.ts b/bau-ui/examples/bau-storybook/src/pages/select/select-default-option.ts
@@ -1,11 +1,13 @@
-import select from "@grucloud/bau-ui/select";
 import { Context } from "@grucloud/bau-ui/context";
+import button from "@grucloud/bau-ui/button";
+import select from "@grucloud/bau-ui/select";
 
 export default (context: Context) => {
   const { bau, css } = context;
-  const { section, div, span } = bau.tags;
+  const { form, article, footer, div, span } = bau.tags;
 
   const Select = select(context);
+  const ButtonSubmit = button(context, { variant: "solid", color: "primary" });
 
   const defaultCode = "AD";
 
@@ -32,15 +34,28 @@ export default (context: Context) => {
       span(option.code)
     );
 
+  const onsubmit = (event: any) => {
+    event.preventDefault();
+    const payload = Object.fromEntries(
+      new FormData(event.target.closest("form"))
+    );
+    alert(JSON.stringify(payload));
+  };
+
   return () =>
-    section(
-      Select({
-        options,
-        Option,
-        defaultOption: options.find(({ code }) => code == defaultCode),
-        getOptionValue: ({ code }: any) => code,
-        getOptionLabel: ({ label }: any) => label,
-        label: "Select a country...",
-      })
+    form(
+      { onsubmit },
+      article(
+        Select({
+          name: "country",
+          options,
+          Option,
+          defaultOption: options.find(({ code }) => code == defaultCode),
+          getOptionValue: ({ code }: any) => code,
+          getOptionLabel: ({ label }: any) => label,
+          label: "Select a country...",
+        })
+      ),
+      footer(ButtonSubmit({ type: "submit" }, "Submit"))
     );
 };
diff --git a/bau-ui/examples/bau-storybook/src/pages/select/select-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/select/select-example-default.ts
@@ -1,11 +1,13 @@
-import select from "@grucloud/bau-ui/select";
 import { Context } from "@grucloud/bau-ui/context";
+import button from "@grucloud/bau-ui/button";
+import select from "@grucloud/bau-ui/select";
 
 export default (context: Context) => {
   const { bau, css } = context;
-  const { section, div, span } = bau.tags;
+  const { form, article, footer, div, span } = bau.tags;
 
   const Select = select(context);
+  const ButtonSubmit = button(context, { variant: "solid", color: "primary" });
 
   const options = [
     { code: "AD", label: "Andorra", phone: "376" },
@@ -30,14 +32,27 @@ export default (context: Context) => {
       span(option.code)
     );
 
+  const onsubmit = (event: any) => {
+    event.preventDefault();
+    const payload = Object.fromEntries(
+      new FormData(event.target.closest("form"))
+    );
+    alert(JSON.stringify(payload));
+  };
+
   return () =>
-    section(
-      Select({
-        options,
-        Option,
-        getOptionValue: ({ code }: any) => code,
-        getOptionLabel: ({ label }: any) => label,
-        label: "Select a country...",
-      })
+    form(
+      { onsubmit },
+      article(
+        Select({
+          name: "country",
+          options,
+          Option,
+          getOptionValue: ({ code }: any) => code,
+          getOptionLabel: ({ label }: any) => label,
+          label: "Select a country...",
+        })
+      ),
+      footer(ButtonSubmit({ type: "submit" }, "Submit"))
     );
 };
diff --git a/bau-ui/examples/bau-storybook/src/pages/select/select-loading.ts b/bau-ui/examples/bau-storybook/src/pages/select/select-loading.ts
@@ -4,9 +4,11 @@ import button from "@grucloud/bau-ui/button";
 
 export default (context: Context) => {
   const { bau, css } = context;
-  const { section, div, span } = bau.tags;
+  const { form, article, footer, span, div } = bau.tags;
 
   const Button = button(context, { variant: "outline" });
+  const ButtonSubmit = button(context, { variant: "solid", color: "primary" });
+
   const Select = select(context);
 
   const dataState = bau.state([]);
@@ -53,9 +55,18 @@ export default (context: Context) => {
       span(option.name.common)
     );
 
+  const onsubmit = (event: any) => {
+    event.preventDefault();
+    const payload = Object.fromEntries(
+      new FormData(event.target.closest("form"))
+    );
+    alert(JSON.stringify(payload));
+  };
+
   return () =>
-    section(
-      div(
+    form(
+      { onsubmit },
+      article(
         {
           class: css`
             display: flex;
@@ -64,15 +75,18 @@ export default (context: Context) => {
         },
         () =>
           Select({
+            name: "country",
             options: dataState.val,
             Option,
             getOptionValue: ({ name }: any) => name.common,
             getOptionLabel: ({ name }: any) => name.common,
             label: "Country",
             id: "country",
             loading: loadingState.val,
+            required: true,
           }),
         Button({ onclick: () => fetchCountries() }, "Reload")
-      )
+      ),
+      footer(ButtonSubmit({ type: "submit" }, "Submit"))
     );
 };
diff --git a/bau-ui/select/select.js b/bau-ui/select/select.js
@@ -182,7 +182,12 @@ export default function (context, componentOptions = {}) {
         option({ value: getOptionValue(opt) }, getOptionLabel(opt))
       )
     );
-    selectEl.value = props.value;
+
+    if (defaultOption) {
+      selectEl.value = getOptionValue(defaultOption);
+    } else {
+      selectEl.value = props.value;
+    }
 
     return div(
       {