use vite and externalize material

Author: Marko Petzold

.github/workflows/build-publish.yml

@@ -3,7 +3,7 @@ name: Build and Publish to npm and unpkg
 on:
   push:
     tags:
-      - '*'
+      - "*"
 
 jobs:
   build:
@@ -16,7 +16,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: "24"
 
       - name: Install dependencies
         run: npm install --omit-dev --frozen-lockfile

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

demo/index.html

@@ -49,11 +49,12 @@
         <script type="module">
             import { render } from 'lit'
             import { html, unsafeStatic } from 'lit/static-html.js'
-            const packageJson = await fetch('../package.json').then((res) => res.json())
+            import packageJson from '../package.json'
+            import '../src/widget-form.js'
+            import data from '../src/default-data.json'
+            import themeObject from './themes/light.json'
+
             const tag = unsafeStatic(`widget-form-${packageJson.version}`)
-            import '../dist/widget-form.js'
-            const data = await fetch('../src/default-data.json').then((res) => res.json())
-            const themeObject = await fetch('themes/light.json').then((res) => res.json())
             const theme = { theme_name: 'light', theme_object: themeObject }
             render(
                 html`