@twintag/twintag-form 1.4.0-beta.0 → 1.4.0-beta.2

package/.turbo/turbo-build.log

@@ -1,10 +1,10 @@
 
-> @twintag/twintag-form@1.4.0-beta.0 build C:\Users\daryl\Desktop\twintag-projects\twintag-admin\packages\twintag-form
+> @twintag/twintag-form@1.4.0-beta.2 build C:\Users\daryl\Desktop\twintag-projects\twintag-admin\packages\twintag-form
 > tsc && vite build
 
-vite v4.4.9 building for production...
+vite v5.2.11 building for production...
 transforming...
-✓ 2526 modules transformed.
+✓ 2514 modules transformed.
 rendering chunks...
 
 [vite:dts] Start generate declaration files...
@@ -14,8 +14,8 @@ computing gzip size...
 [vite:dts] Outside emitted: C:/Users/daryl/Desktop/twintag-projects/twintag-admin/packages/twintag-form/prettier.config.d.mts
 [vite:dts] Outside emitted: C:/Users/daryl/Desktop/twintag-projects/twintag-admin/packages/twintag-form/dev/main.d.ts
 [vite:dts] Outside emitted: C:/Users/daryl/Desktop/twintag-projects/twintag-admin/packages/twintag-form/vite.config.d.ts
-[vite:dts] Declaration files built in 5005ms.
+[vite:dts] Declaration files built in 5207ms.
 
 dist/twintag-form.webcomponent.js  119.76 kB │ gzip:  33.52 kB
-dist/twintag-form.react.js         690.96 kB │ gzip: 140.50 kB
-✓ built in 12.21s
+dist/twintag-form.react.js         706.32 kB │ gzip: 144.27 kB
+✓ built in 9.63s

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @twintag/twintag-form
 
+## 1.4.0-beta.2
+
+### Minor Changes
+
+- fix: add accordion `defaultValue` option
+
+## 1.4.0-beta.1
+
+### Minor Changes
+
+- feat: tri-toggle field
+
 ## 1.4.0-beta.0
 
 ### Minor Changes

package/README.md

@@ -8,7 +8,7 @@
   - [Config](#config)
   - [Options](#options)
   - [Inputs](#inputs)
-    - [Options](#options)
+    - [Options](#input-options)
     - [Subtypes](#subtypes)
 - [Event Handling](#event-handling)
 - [CSS](#css)
@@ -49,19 +49,25 @@ The `config` object contains the form structure. It is organized by the index of
 [
   {
     "type": "input",
-    "subtype": "simple",
-    "label": "Email",
-    "bind": "email"
+    "props": {
+      "subtype": "simple",
+      "label": "Email",
+      "bind": "email"
+    }
   },
   {
     "type": "input:textarea",
-    "label": "Message",
-    "bind": "message"
+    "props": {
+      "label": "Message",
+      "bind": "message"
+    }
   },
   {
     "type": "input",
-    "subtype": "submit",
-    "label": "Submit"
+    "props": {
+      "subtype": "submit",
+      "label": "Submit"
+    }
   }
 ]
 ```
@@ -70,15 +76,16 @@ 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`       | `default/beta` | Variant of the form.                                                      |
-| `resetOnSubmit` | `boolean`      | If `true`, the form will be reset after submitting. (`false` per default) |
-| `defaultValues` | `object`       | The properties are the same as the bind values in your config.            |
+| Option          | Type              | Description                                                               |
+| --------------- | ----------------- | ------------------------------------------------------------------------- |
+| `variant`       | `default  / beta` | Variant of the form.                                                      |
+| `size`          | `base     / sm`   | Default: `base` (font-size set to 16px).                                  |
+| `resetOnSubmit` | `boolean`         | If `true`, the form will be reset after submitting. (`false` per default) |
+| `defaultValues` | `object`          | The properties are the same as the bind values in your config.            |
 
 ### **Inputs**
 
-#### **Options**
+#### **Input options**
 
 Each input can be customized with the following optional options:
 
@@ -92,14 +99,16 @@ Each input can be customized with the following optional options:
 ```json
 {
   "type": "input",
-  "subtype": "simple",
-  "label": "Email",
-  "bind": "email",
-  "options": {
-    "description": "Please enter you email",
-    "error": "The field is empty."
-    "placeholder": "Write here...",
-    "optionalField": true
+  "props": {
+    "subtype": "simple",
+    "label": "Email",
+    "bind": "email",
+    "options": {
+      "description": "Please enter you email",
+      "error": "The field is empty."
+      "placeholder": "Write here...",
+      "optionalField": true
+    }
   }
 }
 ```
@@ -111,9 +120,11 @@ Each input can be customized with the following optional options:
 ```json
 {
   "type": "input",
-  "subtype": "simple",
-  "label": "Email",
-  "bind": "email"
+  "props": {
+    "subtype": "simple",
+    "label": "Email",
+    "bind": "email"
+  }
 }
 ```
 
@@ -122,9 +133,11 @@ Each input can be customized with the following optional options:
 ```json
 {
   "type": "input",
-  "subtype": "textarea",
-  "label": "Message",
-  "bind": "message"
+  "props": {
+    "subtype": "textarea",
+    "label": "Message",
+    "bind": "message"
+  }
 }
 ```
 
@@ -133,9 +146,11 @@ Each input can be customized with the following optional options:
 ```json
 {
   "type": "input",
-  "subtype": "file",
-  "label": "File",
-  "bind": "file"
+  "props": {
+    "subtype": "file",
+    "label": "File",
+    "bind": "file"
+  }
 }
 ```
 
@@ -144,9 +159,11 @@ Each input can be customized with the following optional options:
 ```json
 {
   "type": "input",
-  "subtype": "checkbox",
-  "label": "Checkbox",
-  "bind": "checkbox"
+  "props": {
+    "subtype": "checkbox",
+    "label": "Checkbox",
+    "bind": "checkbox"
+  }
 }
 ```
 
@@ -155,9 +172,24 @@ Each input can be customized with the following optional options:
 ```json
 {
   "type": "input",
-  "subtype": "toggle",
-  "label": "Toggle",
-  "bind": "toggle"
+  "props": {
+    "subtype": "toggle",
+    "label": "Toggle",
+    "bind": "toggle"
+  }
+}
+```
+
+- Tri-Toggle
+
+```json
+{
+  "type": "input",
+  "props": {
+    "subtype": "tri-toggle",
+    "label": "Toggle with 3 states",
+    "bind": "tri-states"
+  }
 }
 ```
 
@@ -166,14 +198,18 @@ Each input can be customized with the following optional options:
 ```json
 {
   "type": "input",
-  "subtype": "radiogroup",
-  "label": "Radio Group",
-  "bind": "radiogroup",
+  "props": {
+    "subtype": "radiogroup",
+    "label": "Radio Group",
+    "bind": "radiogroup",
+  },
   "children": [
     {
       "type": "item",
-      "label": "First item",
-      "bind": "first-item"
+      "props": {
+        "label": "First item",
+        "bind": "first-item"
+      }
     },
     ...
   ]
@@ -185,8 +221,10 @@ Each input can be customized with the following optional options:
 ```json
 {
   "type": "input",
-  "subtype": "submit",
-  "label": "Submit"
+  "props": {
+    "subtype": "submit",
+    "label": "Submit"
+  }
 }
 ```
 
@@ -195,8 +233,10 @@ Each input can be customized with the following optional options:
 ```json
 {
   "type": "input",
-  "subtype": "datepicker",
-  "label": "Pick a date"
+  "props": {
+    "subtype": "datepicker",
+    "label": "Pick a date"
+  }
 }
 ```
 
@@ -210,14 +250,18 @@ Each input can be customized with the following optional options:
   "children": [
     {
       "type": "accordion",
-      "subtype": "item",
-      "label": "Your label",
-      "icon": "archive-box-x-mark",
+      "props": {
+        "subtype": "item",
+        "label": "Your label"
+        "icon": "archive-box-x-mark",
+      },
       "children": [
         {
           "type": "input",
-          "subtype": "simple",
-          "bind": "first-item"
+          "props": {
+            "subtype": "simple",
+            "bind": "first-item"
+          }
         },
       ...
       ]
@@ -232,12 +276,16 @@ Each input can be customized with the following optional options:
 ```json
 {
   "type": "category",
-  "label": "Category",
+  "props": {
+    "label": "Category"
+  },
   "children": [
     {
       "type": "input",
-      "subtype": "simple",
-      "label": "Your label"
+      "props": {
+        "subtype": "simple",
+        "label": "Your label"
+      }
     },
     ...
   ]
@@ -253,11 +301,19 @@ Each input can be customized with the following optional options:
   config='[{"type":"input:toggle","label":"Test","bind":"test","options":{"optionalField":true}},{"type":"input:submit","label":"Submit"}]'
 ></twintag-form>
 
-<button id="btn">Submit</button>
+<button id="submit-btn">Submit</button>
+<button id="get-values-btn">Submit</button>
 
 <script>
   const form = document.getElementById('yourform');
-  const btn = document.getElementById('btn');
+  const submit = document.getElementById('submit-btn');
+  const getValues = document.getElementById('get-values-btn');
+
+  // You can validate the form outside the component:
+  submit.addEventListener('click', () => {
+    const submitEvent = new Event('twintag-form-validate');
+    form.shadowRoot.querySelector('form').dispatchEvent(submitEvent);
+  });
 
   // If there are no errors, the form will emit a custom event with the data on submit
   form.addEventListener('twintag-form-valid', (e) => {
@@ -269,10 +325,13 @@ Each input can be customized with the following optional options:
     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);
+  // You can get the values of the form outside the component:
+  form.addEventListener('twintag-form-values', (e) => {
+    console.log(e.detail);
+  });
+  getValues.addEventListener('click', () => {
+    const getValuesEvent = new Event('twintag-form-get_values');
+    form.shadowRoot.querySelector('form').dispatchEvent(getValuesEvent);
   });
 </script>
 ```
@@ -289,13 +348,13 @@ The form component exposes the following CSS variables:
 | --tf-background         | Background color for the input fields.                                                    |
 | --tf-foreground         | Text color for the input fields.                                                          |
 |                         |                                                                                           |
-| --tf-muted              | Used for `switch` background when value is false.                                         |
+| --tf-muted              | Used for `toggle` and `tri-toggle` background when value is false.                        |
 | --tf-muted-foreground   | Color used for `placeholder` text (inputs) and description text.                          |
 |                         |                                                                                           |
 | --tf-primary            | This color complements `primary-foreground`: `submit` button text                         |
 | --tf-primary-foreground | This color is used for, `submit` background, `label` text and input value.                |
 |                         |                                                                                           |
-| --tf-accent             | The accent color is used for `switch`, `checkbox` and `radiogroup` inputs.                |
+| --tf-accent             | The accent color is used for `toggle`, `tri-toggle`, `checkbox` and `radiogroup` inputs.  |
 | --tf-accent-foreground  | This color complements `accent` to show contrast between elements: `checkbox` check icon. |
 |                         |                                                                                           |
 | --tf-destructive        | This color is used for `error` messages and the asterisk to mark a required input.        |