Lit

Installation

npm i @golemui/core @golemui/lit @golemui/gui-lit --save

Styles

Import the core styles in your HTML or application entry point:

@import '@golemui/core/styles/index.css';

Usage

Programmatic

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { golemForm } from '@golemui/gui-shared';
import { widgetLoaders } from '@golemui/gui-lit';

@customElement('my-form')
export class MyForm extends LitElement {
  formDef = golemForm().create({
    form: [
      { kind: 'input', type: 'textinput', path: 'username', label: 'Username' },
    ],
  });
  formData = { username: '' };
  widgetLoaders = { ...widgetLoaders };

  override createRenderRoot() {
    return this;
  }

  render() {
    return html`
      <gui-form
        .formDef=${this.formDef}
        .data=${this.formData}
        .customWidgetLoaders=${this.widgetLoaders}
      ></gui-form>
    `;
  }
}

JSON

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { widgetLoaders } from '@golemui/gui-lit';
import formDef from './my-form.json';

@customElement('my-form')
export class MyForm extends LitElement {
  formDef = formDef;
  formData = { username: '' };
  widgetLoaders = { ...widgetLoaders };

  override createRenderRoot() {
    return this;
  }

  render() {
    return html`
      <gui-form
        .formDef=${this.formDef}
        .data=${this.formData}
        .customWidgetLoaders=${this.widgetLoaders}
      ></gui-form>
    `;
  }
}

Component Properties

Property	Type	Description
formDef	Form	The form definition object
data	object	Initial form data
widgetLoaders	WidgetLoaders	Map of widget type loaders (e.g. GolemUI components)
validators	ValidatorFn	Validator function (from initValidators())
customValidators	CustomValidatorSchemas	Custom validator schemas
validateOn	ValidateOn	When to trigger validation
dependencies	Dependencies	External dependencies (e.g. markdown parser)
localization	Localization	i18n/localization configuration

See Configuration for details on each optional prop.