@twintag/twintag-form 0.1.0 → 0.2.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @twintag/twintag-form@0.1.0 build /home/runner/work/twintag-templates/twintag-templates/packages/twintag-form
+> @twintag/twintag-form@0.2.0 build /home/runner/work/twintag-templates/twintag-templates/packages/twintag-form
 > tsc && node ./scripts/build.js
 
 vite v4.1.0 building for production...
@@ -23,14 +23,14 @@ computing gzip size...
 dist/lib/components/Input/textarea.d.ts      0.39 kB
 dist/lib/components/Input/checkbox.d.ts      0.39 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/types/index.d.ts                    0.45 kB
 dist/lib/styles.d.ts                         2.87 kB
-dist/webcomponent.es.js                  1,009.03 kB │ gzip: 240.04 kB
+dist/webcomponent.es.js                  1,009.24 kB │ gzip: 240.07 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  892.99 kB │ gzip: 208.25 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
@@ -43,8 +43,8 @@ computing gzip size...
 dist/lib/components/Input/textarea.d.ts    0.39 kB
 dist/lib/components/Input/checkbox.d.ts    0.39 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/types/index.d.ts                  0.45 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/webcomponent.umd.js                 622.14 kB │ gzip: 194.59 kB
+dist/index.umd.js  556.21 kB │ gzip: 172.27 kB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @twintag/twintag-form
 
+## 0.2.0
+
+### Minor Changes
+
+- 671ac18: Added documentation.
+
 ## 0.1.0
 
 ### Minor Changes

package/README.md

@@ -0,0 +1,203 @@
+# **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>
+```

package/dist/index.es.js

@@ -5700,7 +5700,7 @@ const Rw = ih({
       {
         id: m,
         type: "text",
-        placeholder: "Write here...",
+        placeholder: (v == null ? void 0 : v.placeholder) || "Write here...",
         className: E(),
         ...u.register(f, {
           required: v != null && v.optionalField ? !1 : `${s} is required`
@@ -5717,7 +5717,7 @@ const Rw = ih({
       {
         id: m,
         className: E(),
-        placeholder: "Write here...",
+        placeholder: (v == null ? void 0 : v.placeholder) || "Write here...",
         ...u.register(f, {
           required: v != null && v.optionalField ? !1 : `${s} is required`
         })
@@ -26719,7 +26719,7 @@ const fA = ({ useForm: u, label: s, bind: f, options: v }) => {
               children: _.name
             },
             $
-          )) : /* @__PURE__ */ ot.jsx("span", { children: "Select a file" }) }),
+          )) : /* @__PURE__ */ ot.jsx("span", { className: "block max-w-full overflow-hidden text-ellipsis whitespace-nowrap", children: (v == null ? void 0 : v.placeholder) || "No file selected" }) }),
           /* @__PURE__ */ ot.jsx(cA, { className: "h-6 w-6 min-w-[1.5rem]" })
         ]
       }