@twintag/twintag-form 0.1.0 → 0.3.0

package/.turbo/turbo-build.log

@@ -1,50 +1,58 @@
 
-> @twintag/twintag-form@0.1.0 build /home/runner/work/twintag-templates/twintag-templates/packages/twintag-form
+> @twintag/twintag-form@0.3.0 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/types/index.d.ts                    0.42 kB
-dist/lib/index.d.ts                          0.44 kB
-dist/lib/styles.d.ts                         2.87 kB
-dist/webcomponent.es.js                  1,009.03 kB │ gzip: 240.04 kB
+dist/lib/types/index.d.ts                    0.45 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.03 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.79 kB │ gzip: 208.22 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/types/index.d.ts                  0.42 kB
-dist/lib/index.d.ts                        0.44 kB
-dist/lib/styles.d.ts                       2.87 kB
-dist/webcomponent.umd.js                 621.97 kB │ gzip: 194.56 kB
-dist/index.umd.js  556.03 kB │ gzip: 172.25 kB
+dist/lib/types/index.d.ts                  0.45 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 17.53s
+dist/index.umd.js  556.28 kB │ gzip: 172.27 kB
+✓ built in 17.66s

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @twintag/twintag-form
 
+## 0.3.0
+
+### Minor Changes
+
+- 41c444d: Enable CSS customization (custom properties).
+
+## 0.2.0
+
+### Minor Changes
+
+- 671ac18: Added documentation.
+
 ## 0.1.0
 
 ### Minor Changes

package/README.md

@@ -0,0 +1,206 @@
+# **Twintag Form**
+
+## **Content**
+
+- [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)
+- [Event Handling](#event-handling)
+
+## **Introduction**
+
+Twintag Form provides a web component that allows you to create a form based on a JSON object, leaving the actions to the developer.
+
+## **Framework Agnostic**
+
+Twintag Form exposes a web component that can be used in any framework or vanilla JS.
+
+```html
+<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           |
+
+### **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) |
+
+```json
+[
+  {
+    "type": "input:simple",
+    "label": "Email",
+    "bind": "email"
+  },
+  {
+    "type": "input:textarea",
+    "label": "Message",
+    "bind": "message"
+  },
+  {
+    "type": "input:submit",
+    "label": "Submit"
+  }
+]
+```
+
+### **Options**
+
+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) |
+
+### **Inputs**
+
+#### **Input Options**
+
+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) |
+
+```json
+{
+  "type": "input:simple",
+  "label": "Email",
+  "bind": "email",
+  "options": {
+    "variant": "alpha",
+    "placeholder": "Enter your email",
+    "optionalField": true
+  }
+}
+```
+
+#### **Simple**
+
+The `simple` input is a simple text input.
+
+```json
+{
+  "type": "input:simple",
+  "label": "Email",
+  "bind": "email"
+}
+```
+
+#### **Textarea**
+
+The `textarea` input is a textarea input.
+
+```json
+{
+  "type": "input:textarea",
+  "label": "Message",
+  "bind": "message"
+}
+```
+
+#### **File**
+
+The `file` input is a file input.
+
+```json
+{
+  "type": "input:file",
+  "label": "File",
+  "bind": "file"
+}
+```
+
+#### **Checkbox**
+
+The `checkbox` input is a checkbox input.
+
+```json
+{
+  "type": "input:checkbox",
+  "label": "Checkbox",
+  "bind": "checkbox"
+}
+```
+
+#### **Toggle**
+
+The `toggle` input is a toggle input.
+
+```json
+{
+  "type": "input:toggle",
+  "label": "Toggle",
+  "bind": "toggle"
+}
+```
+
+#### **Submit**
+
+The `submit` input is a submit input.
+
+```json
+{
+  "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>
+
+<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);
+  });
+</script>
+```