From 9f1bcfcb65ede7cbe156c62e41f7e82d5480cc18 Mon Sep 17 00:00:00 2001 From: NoelOConnell Date: Thu, 6 Oct 2022 14:26:37 +0100 Subject: [PATCH 01/13] Support html forms Added name prop to Listbox Added name prop to RadioGroup Added name and value prop to Switch New component to match Headless UI A hidden input element will be rendered and kept in sync with the state. Added tests from HeadlessUI Updated docs for Listbox,Switch and RadioGroup for using the components with forms --- src/lib/components/listbox/Listbox.svelte | 22 ++- src/lib/components/listbox/listbox.test.ts | 154 ++++++++++++++++++ .../components/radio-group/RadioGroup.svelte | 20 +++ .../radio-group/radio-group.test.ts | 42 +++++ src/lib/components/switch/Switch.svelte | 19 +++ src/lib/components/switch/switch.test.ts | 111 +++++++++++++ src/lib/internal/Hidden.svelte | 39 +++++ src/lib/utils/Render.svelte | 7 + src/lib/utils/form.ts | 37 +++++ src/routes/docs/listbox.svx | 46 ++++++ src/routes/docs/radio-group.svx | 37 +++++ src/routes/docs/switch.svx | 63 ++++++- 12 files changed, 592 insertions(+), 5 deletions(-) create mode 100644 src/lib/internal/Hidden.svelte create mode 100644 src/lib/utils/form.ts diff --git a/src/lib/components/listbox/Listbox.svelte b/src/lib/components/listbox/Listbox.svelte index c0f323d9..67cb34d7 100644 --- a/src/lib/components/listbox/Listbox.svelte +++ b/src/lib/components/listbox/Listbox.svelte @@ -61,6 +61,8 @@ horizontal?: boolean; /** The selected value */ value?: StateDefinition["value"]; + /** The name used when using this component inside a form. */ + name?: string; }; @@ -80,6 +82,8 @@ import type { HTMLActionArray } from "$lib/hooks/use-actions"; import Render from "$lib/utils/Render.svelte"; import type { TPassThroughProps } from "$lib/types"; + import Hidden, { Features as HiddenFeatures } from "$lib/internal/Hidden.svelte"; + import { objectToFormEntries } from "$lib/utils/form"; /***** Props *****/ type TAsProp = $$Generic; @@ -90,6 +94,7 @@ export let disabled = false; export let horizontal = false; export let value: StateDefinition["value"]; + export let name: string | null = null; /***** Events *****/ const forwardEvents = forwardEventsBuilder(get_current_component(), [ @@ -276,6 +281,21 @@ + +{#if name != null && value != null} + {@const options = objectToFormEntries({ [name]: value })} + {#each options as [optionName, optionValue], index (index)} +