From dd8ebcad94ef5677bc01c622350de66a8ee85c32 Mon Sep 17 00:00:00 2001 From: Frederic Heem Date: Wed, 20 Dec 2023 10:19:21 -0300 Subject: [PATCH] select default option --- .../autocomplete-default-option.ts | 42 +++++++++++++------ .../autocomplete-example-default.ts | 42 +++++++++++++------ .../autocomplete/autocomplete-loading.ts | 23 +++++++--- .../src/pages/select/select-aws-region.ts | 37 ++++++++++++---- .../src/pages/select/select-default-option.ts | 37 +++++++++++----- .../pages/select/select-example-default.ts | 35 +++++++++++----- .../src/pages/select/select-loading.ts | 22 ++++++++-- bau-ui/select/select.js | 7 +++- 8 files changed, 180 insertions(+), 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 index 9a644214..0bcb5e67 100644 --- 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 index d0653e5f..76cab2b1 100644 --- 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 index dc87e003..a3429d3d 100644 --- 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 index ed47cf70..6d7030bb 100644 --- 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 index 194c9b3d..d9e1ba08 100644 --- 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 index 38d8334f..350da078 100644 --- 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 index 42e5d81e..dc6e0c92 100644 --- 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,6 +75,7 @@ export default (context: Context) => { }, () => Select({ + name: "country", options: dataState.val, Option, getOptionValue: ({ name }: any) => name.common, @@ -71,8 +83,10 @@ export default (context: Context) => { 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 index f29418d8..3cf72115 100644 --- 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( {