widget-form

A Lit 3.x web component for creating dynamic forms with configurable fields. Part of the IronFlock widget ecosystem.

Installation

npm i @record-evolution/widget-form

Usage

<script type="module">
    import '@record-evolution/widget-form'
</script>

<widget-form-1.0.9></widget-form-1.0.9>

Note: The version number is part of the custom element tag name.

Properties

Property	Type	Description
inputData	InputData	Form configuration and fields
theme	Theme	Theme object for styling

Events

Event	Detail	Description
data-submit	Array of field/value mappings	Fired when the form is submitted

Configuration

The form is configured via the inputData property:

interface InputData {
    title?: string
    subTitle?: string
    formButton?: boolean // Show button to open form dialog
    formFields?: FormField[]
}

Field Types

Each form field supports the following types:

Type	Description
textfield	Single-line text input
numberfield	Numeric input with min/max
checkbox	Boolean checkbox
textarea	Multi-line text input
dropdown	Select from predefined options
datetime	Date/time picker

Field Configuration

interface FormField {
    label: string
    type: 'dropdown' | 'textfield' | 'numberfield' | 'checkbox' | 'textarea' | 'datetime'
    hiddenField?: boolean // Hide field but still submit value
    required?: boolean // Field must be filled
    description?: string // Hint text shown below field
    targetColumn?: TargetColumn // Database column mapping
    defaultValue?: string
    min?: number // For numberfield
    max?: number // For numberfield
    validation?: string // Regex for textfield
    values?: DropdownValue[] // For dropdown type
}

Development

# Start dev server
npm run start

# Build for production
npm run build

# Generate types from schema
npm run types

# Build, bump version, and publish
npm run release

License

MIT