Collapsible form

[Peter9192]

Closes #7

Uses solidui accordion

Preview:

[Peter9192]

I can't figure out how to add a transition when the width of the dialog changes as you collapse/expand sections

[Peter9192]

Todo: check that form state is preserved when collapsed

[Peter9192]

Todo: check that form state is preserved when collapsed

It is not. Need to make that work.

[sverhoeven]

Todo: check that form state is preserved when collapsed

It is not. Need to make that work.

Uncontrolled (aka no listener for onchange) inputs are used and content of a collapsed thing is not part of dom.
We could do

1. Use <details><summary>Title</summary>Content</details>, so content is always rendered, pro uses native key binding, con need to control only 1 open
2. Use controlled inputs, so any change to input is captured in a signal/store/form library outside of the dom. To avoid prop drilling use https://docs.solidjs.com/reference/component-apis/create-context

details example

 <form
        onSubmit={(e) => {
          e.preventDefault()
          e.stopPropagation()
          const f = new FormData(e.currentTarget)
          const r = Object.fromEntries(f.entries())
          console.log(r)
        }}
      >
        <details>
          <summary>Bla</summary>
          <input name="foo" value="bar"/>
          </details>
          <button type="submit">N</button>
        </form>

foo:bar is reported in devtools console

Styling see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

[sverhoeven]

Would be nice if the first accordion would be open initially. Use defaultValue prop.

[sverhoeven]

Todo: check that form state is preserved when collapsed

It is not. Need to make that work.

Uncontrolled (aka no listener for onchange) inputs are used and content of a collapsed thing is not part of dom. We could do

1. Use <details><summary>Title</summary>Content</details>, so content is always rendered, pro uses native key binding, con need to control only 1 open
2. Use controlled inputs, so any change to input is captured in a signal/store/form library outside of the dom. To avoid prop drilling use https://docs.solidjs.com/reference/component-apis/create-context

details example

Going for controlled inputs with modular forms

[sverhoeven]

The input fields are a bit close together, please add some whitespace above/below

[Peter9192]

I believe the behaviour is okay now.

To do:

• Fix types etc
• [x] Better integrate kobalte/solidui/modularforms into textfield Spin off form generator to own package? #36
• Now get warning "Cannot mutate a Store directly", fix that
• Add whitespace between fields
• One more go at animated width made dialog wider so less needed

[Peter9192]

Currently only works for reference. Similar changes should be made to the permutations config. @sverhoeven you were considering to merge the two once they share the name field again. Are you still planning to do that in #27? Then I won't do it here.