The Ultra-Fast
Dynamic Forms Library

@Component({
  selector: 'my-golemui-form',
  imports: [FormComponent],
  template: `
    <gui-form
      [formDef]="formDef"
      [data]="{}"
      [fieldLoaders]="vanillaFieldLoaders"
      [validators]="validators"
    ></gui-form>
  `,
})
export class MyGolemUIForm {
  formDef = myForm;
  vanillaFieldLoaders = {
    ...vanillaFieldLoaders,
  };
  validators: ValidatorFn<Validator> = initValidators();
}

function App() {
  const formDef = myForm;
  const validators: ValidatorFn<Validator> = initValidators();
  return (
    <>
      <FormComponent
        formDef={formDef}
        data={{}}
        fieldLoader={{ ...vanillaFieldLoaders }}
        validators={validators}
      />
    </>
  );
}

@customElement('my-golemui-form')
export class MyGolemUIForm extends LitElement {
  formDef = myForm;
  validators: ValidatorFn<Validator> = initValidators();

  override createRenderRoot() {
    return this;
  }

  render() {
    return html`
      <gui-form
        .formDef=${this.formDef}
        .data=${{}}
        .fieldLoaders=${{ ...vanillaFieldLoaders }}
        .validators=${this.validators}
      ></gui-form>
    `;
  }
}