@record-evolution/widget-form 1.0.9 → 1.0.11

package/README.md

@@ -1,108 +1,100 @@
-# \<widget-form>
+# widget-form
 
-This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+A Lit 3.x web component for creating dynamic forms with configurable fields. Part of the IronFlock widget ecosystem.
+
+![screenshot](thumbnail.png)
 
 ## Installation
 
 ```bash
-npm i widget-form
+npm i @record-evolution/widget-form
 ```
 
 ## Usage
 
 ```html
 <script type="module">
-    import 'widget-form/widget-form.js'
+    import '@record-evolution/widget-form'
 </script>
 
-<widget-form></widget-form>
+<widget-form-1.0.9></widget-form-1.0.9>
 ```
 
-## Expected data format
-
-The following format represents the available data :
-
-```js
-data: {
-  settings: {
-    title: string,
-    subTitle: string,
-    minGauge: number,
-    maxGauge: number,
-    style: {
-      needleColor: string,
-      sections: number,
-      backgroundColor: string[]
-    }
-  }
-  gaugeValue: Number
-}
-```
+> **Note:** The version number is part of the custom element tag name.
 
-## Interfaces
+## Properties
 
-```ts
-interface InputData {
-    settings: Settings
-    gaugeValue: number
-}
-```
+| Property    | Type        | Description                   |
+| ----------- | ----------- | ----------------------------- |
+| `inputData` | `InputData` | Form configuration and fields |
+| `theme`     | `Theme`     | Theme object for styling      |
 
-```ts
-interface Settings {
-    title: string
-    subTitle: string
-    minGauge: number
-    maxGauge: number
-    style: Style
-}
-```
+## Events
 
-```ts
-interface Style {
-    needleColor: string
-    sections: number
-    backgroundColor: string[]
-}
-```
+| Event         | Detail                        | Description                      |
+| ------------- | ----------------------------- | -------------------------------- |
+| `data-submit` | Array of field/value mappings | Fired when the form is submitted |
 
-## Style options
+## Configuration
 
-The following options are available for styling the value graph.
-The `sections` option splits the value area into by default three same sized sections. Therefore three different colors can be provided to the `backgroundColor` by default.
+The form is configured via the `inputData` property:
 
-```
-  interface Style {
-    needleColor: string,
-    sections: number,
-    backgroundColor: string[]
-  }
+```ts
+interface InputData {
+    title?: string
+    subTitle?: string
+    formButton?: boolean // Show button to open form dialog
+    formFields?: FormField[]
+}
 ```
 
-## Linting and formatting
+### Field Types
 
-To scan the project for linting and formatting errors, run
+Each form field supports the following types:
 
-```bash
-npm run lint
-```
+| 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               |
 
-To automatically fix linting and formatting errors, run
+### Field Configuration
 
-```bash
-npm run format
+```ts
+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
+}
 ```
 
-## Tooling configs
+## Development
 
-For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+```bash
+# Start dev server
+npm run start
 
-If you customize the configuration a lot, you can consider moving them to individual files.
+# Build for production
+npm run build
 
-## Local Demo with `web-dev-server`
+# Generate types from schema
+npm run types
 
-```bash
-npm start
+# Build, bump version, and publish
+npm run release
 ```
 
-To run a local development server that serves the basic demo located in `demo/index.html`
+## License
+
+MIT

package/dist/widget-form.d.ts

@@ -0,0 +1,42 @@
+import { CSSResult } from 'lit';
+import { InputData } from './definition-schema.js';
+import { LitElement } from 'lit';
+import { MdDialog } from '@material/web/dialog/dialog.js';
+import { PropertyValues } from 'lit';
+import { TemplateResult } from 'lit-html';
+
+declare type Column = Exclude<InputData['formFields'], undefined>[number];
+
+declare type Theme = {
+    theme_name: string;
+    theme_object: any;
+};
+
+export declare class WidgetForm extends LitElement {
+    inputData?: InputData;
+    theme?: Theme;
+    private themeBgColor?;
+    private themeTitleColor?;
+    private themeSubtitleColor?;
+    dialogOpen: boolean;
+    dialog: MdDialog;
+    version: string;
+    update(changedProperties: Map<string, any>): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    registerTheme(theme?: Theme): void;
+    openFormDialog(): void;
+    handleFormSubmit(event: Event): void;
+    formatValue(value: string, type: string): any;
+    renderTextField(field: Column, i: number): TemplateResult<1>;
+    renderNumberField(field: Column, i: number): TemplateResult<1>;
+    renderCheckbox(field: Column, i: number): TemplateResult<1>;
+    renderTextArea(field: Column, i: number): TemplateResult<1>;
+    renderDropdown(field: Column, i: number): TemplateResult<1>;
+    renderDateTimeField(field: Column, i: number): TemplateResult<1>;
+    cancelEdit(event: Event): void;
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+    renderForm(): TemplateResult<1>;
+}
+
+export { }