@twintag/twintag-form 0.2.0 → 0.3.1

package/.turbo/turbo-build.log

@@ -1,50 +1,58 @@
 
-> @twintag/twintag-form@0.2.0 build /home/runner/work/twintag-templates/twintag-templates/packages/twintag-form
+> @twintag/twintag-form@0.3.1 build /home/runner/work/twintag-templates/twintag-templates/packages/twintag-form
 > tsc && node ./scripts/build.js
 
-vite v4.1.0 building for production...
-vite v4.1.0 building for production...
+vite v4.3.9 building for production...
+vite v4.3.9 building for production...
 transforming...
 transforming...
-✓ 679 modules transformed.
+✓ 681 modules transformed.
 [plugin:typescript] @rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps.
-✓ 660 modules transformed.
+✓ 662 modules transformed.
 [plugin:typescript] @rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps.
 rendering chunks...
 computing gzip size...
 dist/lib/webcomponent.d.ts                   0.05 kB
-dist/lib/components/Input/index.d.ts         0.24 kB
+dist/lib/components/index.d.ts               0.15 kB
+dist/lib/components/Input/index.d.ts         0.28 kB
+dist/lib/__stories__/Form.stories.d.ts       0.28 kB
 dist/twind.config.d.ts                       0.29 kB
 dist/lib/components/Form/index.d.ts          0.30 kB
-dist/lib/components/Input/submit.d.ts        0.37 kB
-dist/lib/components/Input/file.d.ts          0.37 kB
-dist/lib/components/Input/simple.d.ts        0.38 kB
-dist/lib/components/Input/toggle.d.ts        0.38 kB
-dist/lib/components/Input/textarea.d.ts      0.39 kB
-dist/lib/components/Input/checkbox.d.ts      0.39 kB
+dist/lib/components/Label/index.d.ts         0.31 kB
+dist/lib/components/Input/submit.d.ts        0.39 kB
+dist/lib/components/Input/file.d.ts          0.40 kB
+dist/lib/components/Input/simple.d.ts        0.41 kB
+dist/lib/components/Input/toggle.d.ts        0.41 kB
+dist/lib/components/Input/textarea.d.ts      0.41 kB
+dist/lib/components/Input/checkbox.d.ts      0.42 kB
 dist/lib/components/Form/register.d.ts       0.42 kB
-dist/lib/index.d.ts                          0.44 kB
 dist/lib/types/index.d.ts                    0.45 kB
-dist/lib/styles.d.ts                         2.87 kB
-dist/webcomponent.es.js                  1,009.24 kB │ gzip: 240.07 kB
+dist/lib/index.d.ts                          0.46 kB
+dist/lib/styles.d.ts                         3.24 kB
+dist/webcomponent.es.js                  1,009.45 kB │ gzip: 240.02 kB
 [plugin:typescript] @rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps.
 rendering chunks...
 computing gzip size...
-dist/index.es.js  892.99 kB │ gzip: 208.25 kB
+dist/index.es.js  893.03 kB │ gzip: 208.16 kB
 [plugin:typescript] @rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps.
 dist/lib/webcomponent.d.ts                 0.05 kB
-dist/lib/components/Input/index.d.ts       0.24 kB
+dist/lib/components/index.d.ts             0.15 kB
+dist/lib/components/Input/index.d.ts       0.28 kB
+dist/lib/__stories__/Form.stories.d.ts     0.28 kB
 dist/twind.config.d.ts                     0.29 kB
 dist/lib/components/Form/index.d.ts        0.30 kB
-dist/lib/components/Input/submit.d.ts      0.37 kB
-dist/lib/components/Input/file.d.ts        0.37 kB
-dist/lib/components/Input/simple.d.ts      0.38 kB
-dist/lib/components/Input/toggle.d.ts      0.38 kB
-dist/lib/components/Input/textarea.d.ts    0.39 kB
-dist/lib/components/Input/checkbox.d.ts    0.39 kB
+dist/lib/components/Label/index.d.ts       0.31 kB
+dist/lib/components/Input/submit.d.ts      0.39 kB
+dist/lib/components/Input/file.d.ts        0.40 kB
+dist/lib/components/Input/simple.d.ts      0.41 kB
+dist/lib/components/Input/toggle.d.ts      0.41 kB
+dist/lib/components/Input/textarea.d.ts    0.41 kB
+dist/lib/components/Input/checkbox.d.ts    0.42 kB
 dist/lib/components/Form/register.d.ts     0.42 kB
-dist/lib/index.d.ts                        0.44 kB
 dist/lib/types/index.d.ts                  0.45 kB
-dist/lib/styles.d.ts                       2.87 kB
-dist/webcomponent.umd.js                 622.14 kB │ gzip: 194.59 kB
-dist/index.umd.js  556.21 kB │ gzip: 172.27 kB
+dist/lib/index.d.ts                        0.46 kB
+dist/lib/styles.d.ts                       3.24 kB
+dist/webcomponent.umd.js                 622.35 kB │ gzip: 194.56 kB
+✓ built in 24.15s
+dist/index.umd.js  556.28 kB │ gzip: 172.27 kB
+✓ built in 24.46s

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @twintag/twintag-form
 
+## 0.3.1
+
+### Patch Changes
+
+- Update documentation.
+
+## 0.3.0
+
+### Minor Changes
+
+- 41c444d: Enable CSS customization (custom properties).
+
 ## 0.2.0
 
 ### Minor Changes

package/README.md

@@ -5,17 +5,18 @@
 - [Introduction](#introduction)
 - [Framework Agnostic](#framework-agnostic)
 - [Parameters](#parameters)
-    - [Config](#config)
-    - [Options](#options)
-    - [Inputs](#inputs)
-        - [Input Options](#input-options)
-        - [Simple](#simple)
-        - [Textarea](#textarea)
-        - [File](#file)
-        - [Checkbox](#checkbox)
-        - [Toggle](#toggle)
-        - [Submit](#submit)
+  - [Config](#config)
+  - [Options](#options)
+  - [Inputs](#inputs)
+    - [Input Options](#input-options)
+    - [Simple](#simple)
+    - [Textarea](#textarea)
+    - [File](#file)
+    - [Checkbox](#checkbox)
+    - [Toggle](#toggle)
+    - [Submit](#submit)
 - [Event Handling](#event-handling)
+- [CSS](#css)
 
 ## **Introduction**
 
@@ -26,44 +27,44 @@ Twintag Form provides a web component that allows you to create a form based on
 Twintag Form exposes a web component that can be used in any framework or vanilla JS.
 
 ```html
-<twintag-form options='...' config='[...]'></twintag-form>
+<twintag-form options="..." config="[...]"></twintag-form>
 ```
 
 ## **Parameters**
 
 The form component receives the following parameters:
 
-| Parameter | Type | Description |
-| --- | --- | --- |
-| `config` | `array` | Array that contains the form structure. |
-| `options` | `object` | Options to customize the form |
+| Parameter | Type     | Description                             |
+| --------- | -------- | --------------------------------------- |
+| `config`  | `array`  | Array that contains the form structure. |
+| `options` | `object` | Options to customize the form           |
 
 ### **Config**
 
 The `config` object contains the form structure. It is organized by the index of the items, where each item is an `Input` field represented by an object with the following properties:
 
-| Property | Type | Description |
-| --- | --- | --- |
-| `input:<subtype>` | `string` | Type of the input. |
-| `label` | `string` | Name of the form. |
-| `bind` | `string` | Unique identifier for the form. (Optional for `Submit` inputs) |
+| Property          | Type     | Description                                                    |
+| ----------------- | -------- | -------------------------------------------------------------- |
+| `input:<subtype>` | `string` | Type of the input.                                             |
+| `label`           | `string` | Name of the form.                                              |
+| `bind`            | `string` | Unique identifier for the form. (Optional for `Submit` inputs) |
 
 ```json
 [
-    {
-        "type": "input:simple",
-        "label": "Email",
-        "bind": "email"
-    },
-    {
-        "type": "input:textarea",
-        "label": "Message",
-        "bind": "message"
-    },
-    {
-        "type": "input:submit",
-        "label": "Submit"
-    }
+  {
+    "type": "input:simple",
+    "label": "Email",
+    "bind": "email"
+  },
+  {
+    "type": "input:textarea",
+    "label": "Message",
+    "bind": "message"
+  },
+  {
+    "type": "input:submit",
+    "label": "Submit"
+  }
 ]
 ```
 
@@ -71,10 +72,10 @@ The `config` object contains the form structure. It is organized by the index of
 
 Twintag Form provides some options to customize the form:
 
-| Option | Type | Description |
-| --- | --- | --- |
-| `variant` | `alpha | beta`  | Variant of the form. |
-| `resetOnSubmit` | `boolean` | If `true`, the form will be reset after submitting. (`false` per default) |
+| Option          | Type         | Description                                                               |
+| --------------- | ------------ | ------------------------------------------------------------------------- |
+| `variant`       | `alpha/beta` | Variant of the form.                                                      |
+| `resetOnSubmit` | `boolean`    | If `true`, the form will be reset after submitting. (`false` per default) |
 
 ### **Inputs**
 
@@ -82,22 +83,22 @@ Twintag Form provides some options to customize the form:
 
 Each input can be customized with the following options:
 
-| Option | Type | Description |
-| --- | --- | --- |
-| `variant` | `alpha | beta`  | Variant of the input. |
-| `placeholder` | `string` | Placeholder of the input. |
-| `optionalField` | `boolean` | If `true`, the field will be optional. (`false` per default) |
+| Option          | Type         | Description                                                  |
+| --------------- | ------------ | ------------------------------------------------------------ |
+| `variant`       | `alpha/beta` | Variant of the input.                                        |
+| `placeholder`   | `string`     | Placeholder of the input.                                    |
+| `optionalField` | `boolean`    | If `true`, the field will be optional. (`false` per default) |
 
 ```json
 {
-    "type": "input:simple",
-    "label": "Email",
-    "bind": "email",
-    "options": {
-        "variant": "alpha",
-        "placeholder": "Enter your email",
-        "optionalField": true
-    }
+  "type": "input:simple",
+  "label": "Email",
+  "bind": "email",
+  "options": {
+    "variant": "alpha",
+    "placeholder": "Enter your email",
+    "optionalField": true
+  }
 }
 ```
 
@@ -107,9 +108,9 @@ The `simple` input is a simple text input.
 
 ```json
 {
-    "type": "input:simple",
-    "label": "Email",
-    "bind": "email"
+  "type": "input:simple",
+  "label": "Email",
+  "bind": "email"
 }
 ```
 
@@ -119,9 +120,9 @@ The `textarea` input is a textarea input.
 
 ```json
 {
-    "type": "input:textarea",
-    "label": "Message",
-    "bind": "message"
+  "type": "input:textarea",
+  "label": "Message",
+  "bind": "message"
 }
 ```
 
@@ -131,9 +132,9 @@ The `file` input is a file input.
 
 ```json
 {
-    "type": "input:file",
-    "label": "File",
-    "bind": "file"
+  "type": "input:file",
+  "label": "File",
+  "bind": "file"
 }
 ```
 
@@ -143,9 +144,9 @@ The `checkbox` input is a checkbox input.
 
 ```json
 {
-    "type": "input:checkbox",
-    "label": "Checkbox",
-    "bind": "checkbox"
+  "type": "input:checkbox",
+  "label": "Checkbox",
+  "bind": "checkbox"
 }
 ```
 
@@ -155,9 +156,9 @@ The `toggle` input is a toggle input.
 
 ```json
 {
-    "type": "input:toggle",
-    "label": "Toggle",
-    "bind": "toggle"
+  "type": "input:toggle",
+  "label": "Toggle",
+  "bind": "toggle"
 }
 ```
 
@@ -167,37 +168,50 @@ The `submit` input is a submit input.
 
 ```json
 {
-    "type": "input:submit",
-    "label": "Submit"
+  "type": "input:submit",
+  "label": "Submit"
 }
 ```
 
 ## **Event Handling**
 
 ```html
-
-<twintag-form id="yourform" options='{"variant":"beta","resetOnSubmit":true}' config='[{"type":"input:toggle","label":"Test","bind":"test","options":{"optionalField":true}},{"type":"input:submit","label":"Submit"}]'></twintag-form>
+<twintag-form
+  id="yourform"
+  options='{"variant":"beta","resetOnSubmit":true}'
+  config='[{"type":"input:toggle","label":"Test","bind":"test","options":{"optionalField":true}},{"type":"input:submit","label":"Submit"}]'
+></twintag-form>
 
 <button id="btn">Submit</button>
 
 <script>
-    const form = document.getElementById('yourform');
-    const btn = document.getElementById('btn');
-
-    // If there are no errors, the form will emit a custom event with the data on submit
-    form.addEventListener('twintag-form-valid', (e) => {
-        console.log(e.detail); // { test: true }
-    });
-
-    // If there are errors, the form will emit a custom event with the errors
-    form.addEventListener('twintag-form-invalid', (e) => {
-        console.log(e.detail); // { test: 'Test is required' }
-    });
-
-    // You can validate the form outside the component:
-    btn.addEventListener('click', () => {
-        const submitEvent = new Event('twintag-form-validate');
-        form.shadowRoot.querySelector('form').dispatchEvent(submitEvent);
-    });
+  const form = document.getElementById('yourform');
+  const btn = document.getElementById('btn');
+
+  // If there are no errors, the form will emit a custom event with the data on submit
+  form.addEventListener('twintag-form-valid', (e) => {
+    console.log(e.detail); // { test: true }
+  });
+
+  // If there are errors, the form will emit a custom event with the errors
+  form.addEventListener('twintag-form-invalid', (e) => {
+    console.log(e.detail); // { test: 'Test is required' }
+  });
+
+  // You can validate the form outside the component:
+  btn.addEventListener('click', () => {
+    const submitEvent = new Event('twintag-form-validate');
+    form.shadowRoot.querySelector('form').dispatchEvent(submitEvent);
+  });
 </script>
-```
+```
+
+## **CSS**
+
+The form component exposes the following CSS variables:
+
+| Variable      | Description              |
+| ------------- | ------------------------ |
+| `--clr-label` | Color of the labels.     |
+| `--clr-input` | Color of the inputs.     |
+| `--ff-text`   | Font family of the text. |