From 8714f9d35b969b0e42d84843cbe9a3c58160e3cd Mon Sep 17 00:00:00 2001 From: Frederic Heem Date: Wed, 20 Dec 2023 15:03:47 -0300 Subject: [PATCH] input controlled example --- .../src/pages/input/input-controlled.ts | 43 +++++++++++++++++++ .../src/pages/input/input-grid-item.ts | 11 +++-- ...ample-default.ts => input-uncontrolled.ts} | 27 +++++++++++- .../src/pages/input/input.examples.ts | 22 +++++++--- .../pages/stepper/cloud-config/configAzure.ts | 5 --- bau-ui/themeSwitch/themeSwitch.js | 1 + 6 files changed, 93 insertions(+), 16 deletions(-) create mode 100644 bau-ui/examples/bau-storybook/src/pages/input/input-controlled.ts rename bau-ui/examples/bau-storybook/src/pages/input/{input-example-default.ts => input-uncontrolled.ts} (64%) diff --git a/bau-ui/examples/bau-storybook/src/pages/input/input-controlled.ts b/bau-ui/examples/bau-storybook/src/pages/input/input-controlled.ts new file mode 100644 index 00000000..8958367e --- /dev/null +++ b/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") + ) + ); + }; +}; diff --git a/bau-ui/examples/bau-storybook/src/pages/input/input-grid-item.ts b/bau-ui/examples/bau-storybook/src/pages/input/input-grid-item.ts index 6cc05461..f29de190 100644 --- a/bau-ui/examples/bau-storybook/src/pages/input/input-grid-item.ts +++ b/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, }); }; diff --git a/bau-ui/examples/bau-storybook/src/pages/input/input-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/input/input-uncontrolled.ts similarity index 64% rename from bau-ui/examples/bau-storybook/src/pages/input/input-example-default.ts rename to bau-ui/examples/bau-storybook/src/pages/input/input-uncontrolled.ts index 028fa832..a5c69b01 100644 --- a/bau-ui/examples/bau-storybook/src/pages/input/input-example-default.ts +++ b/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({ diff --git a/bau-ui/examples/bau-storybook/src/pages/input/input.examples.ts b/bau-ui/examples/bau-storybook/src/pages/input/input.examples.ts index fe202ea0..2d0b31a3 100644 --- a/bau-ui/examples/bau-storybook/src/pages/input/input.examples.ts +++ b/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, diff --git a/bau-ui/examples/bau-storybook/src/pages/stepper/cloud-config/configAzure.ts b/bau-ui/examples/bau-storybook/src/pages/stepper/cloud-config/configAzure.ts index 2b6f66f0..e8364cf3 100644 --- a/bau-ui/examples/bau-storybook/src/pages/stepper/cloud-config/configAzure.ts +++ b/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(); }; diff --git a/bau-ui/themeSwitch/themeSwitch.js b/bau-ui/themeSwitch/themeSwitch.js index 5e8b4ef3..8da84337 100644 --- a/bau-ui/themeSwitch/themeSwitch.js +++ b/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",