Recursive component generation

[KazWar]

Hey, I was wondering whether it's somehow possible to generate a form using a schema with components that have sub-components in them. For example using this schema:

const schema =[
  {
    id: 'name',
    component: 'input',
    label: 'first name'
  },
  {
    id: 'surname',
    component: 'input',
    label: 'Last name'
  },
  {
    id: 'country',
    component: 'select',
    label: 'Country',
    subLabel: 'Country you live in',
    subSchema:[
      {
        id: 'province',
        component: 'select',
        label: 'Country province',
        subLabel: 'Part of the country you live in'
      }
    ]
  }
]

Would generate 4 dropdowns. Or if not that somehow partially generate a schema, or supply a schema after blitz-form init (EG passing an empty form object) wrapping it over some non-form components and then supply the schema from inside those components.

E.G

<template>
  <blitz-form :schema="schema">
    <template v-for="do something">
      <partial-schema/>
    </template>
  </blitz-form>
</template>

[mesqueeb]

@KazWar yes, you can just use BlitzForm as the schema component, and then you can pass a nested schema. 😄

[mesqueeb]

@KazWar however, if your goal is an html select, then check the advanced example in the docs. I show how to pass elements to the slot of select.

[KazWar]

@KazWar yes, you can just use BlitzForm as the schema component, and then you can pass a nested schema. 😄

Could you show an example using mine maybe? I think this would be mighty useful. Cause i'm not quite sure how then. Would I replace the subcomponent select with BlitzForm and then...? Or use slot to render children?

[mesqueeb]

@KazWar I'm not sure I understand what you are trying to achieve exactly.

But the advanced example in the docs show how to use a slot to render nested <option> html tags to create a select dropdown:
https://blitzar.cycraft.co/blitz-form/#advanced-example

is this what you were trying to achieve?

[dSlyders]

im trying to use this exemple : https://blitzar.cycraft.co/blitz-form/#advanced-example

Its not working

{ id: 'powerUps', span: 1, // See more info in the Use Custom Components chapter component: 'BlitzForm', label: 'Choose some power-ups', columnCount: 3, schema: [ { id: 'iso-8', component: 'input', type: 'checkbox', label: 'Magic crystal', labelStyle: 'font-size: 0.8em', }, { id: 'hp-potion', component: 'input', type: 'checkbox', label: 'Health potion', labelStyle: 'font-size: 0.8em', }, { id: 'energy-potion', component: 'input', type: 'checkbox', label: 'Energy drink', labelStyle: 'font-size: 0.8em', }, ], }, ] },
[email protected]
"quasar": "^2.7.1",
"vue": "3",

[mesqueeb]

"its not working" is a bit vague 😅

[dSlyders]

const schema = [
  {
    id: 'name',
    span: 1,
    component: 'input',
    label: 'Superhero name',
    subLabel: 'Think of something cool.',
    required: true,
  },
  {
    id: 'Fields',
    component: 'QExpansionItem',
    defaultValue: () => false,
    span: 1,
    label: 'Fields',
    dense: true,
    'dense-toggle': true,
    'expand-separator': true,
    slot:{
      id: 'powerUps',
      // See more info in the Use Custom Components chapter
      component: BlitzForm,
      label: 'Choose some power-ups',
      columnCount: 1,
      schema: [
        {
          id: 'iso-8',
          component: 'input',
          type: 'checkbox',
          label: 'Magic crystal',
          labelStyle: 'font-size: 0.8em',
        },
        {
          id: 'hp-potion',
          component: 'input',
          type: 'checkbox',
          label: 'Health potion',
          labelStyle: 'font-size: 0.8em',
        },
        {
          id: 'energy-potion',
          component: 'input',
          type: 'checkbox',
          label: 'Energy drink',
          labelStyle: 'font-size: 0.8em',
        },
      ],
    },
  },
]

ok i find a solution : component: BlitzForm, work
but component: 'BlitzForm' not working

Now the new problem is :

when this component BlitzForm are in a Slot it do not update the FormData if i put it ouside a slot its working