How to override a section for all inputs in a form?

[snoozbuster]

I thought I would be able to do something like

<FormKit type="form" :config="{
  sectionsSchema: {
    label: { ... }
  }
}">
  ...
</FormKit>

and then for each <FormKit> rendered inside this form, it would have its label sectionsSchema extended with whatever I passed to the root form. but this doesn't seem to work (indeed, it doesn't seem to do anything) - and I'm not sure why, because my understanding was that every FormKit has a sectionsSchema prop and config is basically "default props for my descendants". In my scenario, the children of the FormKit is actually a FormKitSchema with a number of items in it, and I don't have direct access to modify that schema - but I'd like to insert an icon into the label of all the fields rendered.

[fenilli]

You're correct that config pass information to its descendants, the thing is there isn't sectionsSchema at the root of the config, if you want to pass default props you need to pass to the props: https://formkit.com/essentials/configuration#available-node-options

  /**
   * Default prop values, keep reading to learn more.
   */
  props: {},

[snoozbuster]

yeah, I know a plugin would work, that's my fallback... I've done plugin-based schema adjustments before but to me it really feels like there's an awful lot of boilerplate and callbacks within callbacks and I haven't really fully understood why each of the layers are necessary and useful. in my case all I really want to do is add an icon to the label of each field based on its field type, and the sectionsSchema approach seemed like it would be a lot simpler than a whole plugin. if there's a way to get it working using sectionsSchema I would definitely prefer that approach rather than a full-blown plugin.

[fenilli]

What I mean you can add to the sectionsSchema prop via plugin, so there would be easier.

[snoozbuster]

I see... so if I passed config as

config="{
  props: {
    sectionSchema: { ... }
  }
}"

that should be expected to provide the sectionsSchema I pass for all the descendant nodes?

I don't think this is correct either. based on your example with validation (which is a node prop), I don't think there's supposed to be a separate props key inside config. this diagram also suggests that pretty clearly.

is sectionsSchema something that's actually processed by some sort of built-in plugin, and is that why it's not part of the props documented on the configuration page?

[justin-schroeder]

as a concept I really like the idea of using the config is the base of the sections-schema prop. To answer your question though, the sections-schema prop is not a FormKit prop, only a Vue prop that is used on the <FormKit> component. It is applied to the schema of the input definition. This all takes place before the core node is even created which is why it is not available in the node itself, but conceptually I like the idea of being being able to use config to override the sectionsSchema prop. Perhaps we should look into something like this.

[snoozbuster]

ah, that's a shame. I ended up having to do this with a plugin. It was quite a lot of boilerplate to get what I wanted:

 const labelIconsPlugin = node => {
      const isMultiOption =
        (node.props.type === 'checkbox' || node.props.type === 'radio') && node.props.options;

      const schemaFn = node.props.definition.schema;
      node.props.definition.schemaMemoKey = `label_${node.props.type}_${node.props.definition.schemaMemoKey}`;
      node.props.definition.schema = (sectionsSchema = {}) => {
        sectionsSchema[isMultiOption ? 'legend' : 'label'] = {
          children: [
            {
              $cmp: markRaw(BaseIcon),
              props: { class: 'mr-2 text-primary', name: FORM_TYPE_TO_ICON[node.props.type] },
            },
            '$label',
          ],
        };
        return schemaFn(sectionsSchema);
      };
    };

all I really wanted to do was extend the children of that piece of the schema with this extra icon in front based on the node type - it would have been quite nice to be able to do this without a plugin (I guess using data to allow the schema to reference the type-to-icon map). Let me know if something like this ever becomes possible, I'd love to simplify this code!