DoxenFieldSwapper

* Have a wrapper component called "fieldSwapper" or something, that has a dropdown of different input types to pick from, and it swaps out the input based on the selection, so you can pick something that just does numbers, or just does text, or just does JSON. So you get a better input based on the data type you are wanting to pass in. * Would need to map props and v-models in more complex way. * Would need to handle switching between inputs and retaining their previous vs current values. **Example:** Let's say there is a prop like so: ```js props: { foo: { type: [Boolean, String, Number] } } ``` Depending on what type you want to pass in, you would need different inputs. `DoxenFieldSwapper` should solve this: ```html <DoxenFieldSwapper v-model="foo" :styleTokens="styleTokens" label="Type" :fields="[ { name: 'Boolean', component: DoxenCheckbox, props: { name: 'Foo', styleTokens } }, { name: 'String', component: DoxenTextField, props: { label: 'Foo', styleTokens } }, { name: 'Number', component: DoxenNumberField, props: { label: 'Foo', modelValue: 3, styleTokens } } ]" /> ``` **ASCII Mockup:** ``` _____________________ | ___________ | | Type: |▼| Boolean | | | ¯ ¯¯¯¯¯¯¯¯¯ | | ☑ Foo | | | ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ ``` ``` _____________________ | ___________ | | Type: |▼| String | | | ¯ ¯¯¯¯¯¯¯¯¯ | | Foo: | | _________________ | | | value | | | ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ | ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ ``` ``` _____________________ | ___________ | | Type: |▼| Number | | | ¯ ¯¯¯¯¯¯¯¯¯ | | Foo: | | _________________ | | | 3 | | | ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ | ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ ```