@twintag/twintag-form 1.1.1 → 1.2.0

package/.turbo/turbo-build.log

@@ -1,21 +1,21 @@
 
-> @twintag/twintag-form@1.1.1 build C:\Users\daryl\Desktop\twintag-projects\twintag-admin\packages\twintag-form
+> @twintag/twintag-form@1.2.0 build /home/runner/work/twintag-admin/twintag-admin/packages/twintag-form
 > tsc && vite build
 
 vite v4.4.9 building for production...
 transforming...
 ✓ 2526 modules transformed.
 rendering chunks...
-
-[vite:dts] Start generate declaration files...
+
+[vite:dts] Start generate declaration files...
 computing gzip size...
-[vite:dts] Outside emitted: C:/Users/daryl/Desktop/twintag-projects/twintag-admin/packages/twintag-form/tailwind.config.d.ts
-[vite:dts] Outside emitted: C:/Users/daryl/Desktop/twintag-projects/twintag-admin/packages/twintag-form/.eslintrc.d.cts
-[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 4729ms.
-
-dist/twintag-form.webcomponent.js  119.72 kB │ gzip:  33.42 kB
-dist/twintag-form.react.js         687.57 kB │ gzip: 139.88 kB
-✓ built in 10.13s
+[vite:dts] Outside emitted: /home/runner/work/twintag-admin/twintag-admin/packages/twintag-form/tailwind.config.d.ts
+[vite:dts] Outside emitted: /home/runner/work/twintag-admin/twintag-admin/packages/twintag-form/.eslintrc.d.cts
+[vite:dts] Outside emitted: /home/runner/work/twintag-admin/twintag-admin/packages/twintag-form/prettier.config.d.mts
+dist/twintag-form.webcomponent.js  119.72 kB │ gzip:  33.49 kB
+dist/twintag-form.react.js         687.86 kB │ gzip: 139.95 kB
+[vite:dts] Outside emitted: /home/runner/work/twintag-admin/twintag-admin/packages/twintag-form/dev/main.d.ts
+[vite:dts] Outside emitted: /home/runner/work/twintag-admin/twintag-admin/packages/twintag-form/vite.config.d.ts
+[vite:dts] Declaration files built in 7394ms.
+
+✓ built in 14.10s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @twintag/twintag-form
 
+## 1.2.0
+
+### Minor Changes
+
+- feat: get-values implemented
+
 ## 1.1.1
 
 ### Patch Changes

package/dev/index.css

@@ -1,32 +1,32 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --tf-label: 222.2 47.4% 11.2%;
-  --tf-category: 222.2 47.4% 11.2%;
-
-  --tf-background: 0 0% 100%;
-  --tf-foreground: 0 0% 0%;
-
-  --tf-muted: 210 40% 96.1%;
-  --tf-muted-foreground: 215.4 16.3% 46.9%;
-
-  --tf-primary:  210 40% 98%;
-  --tf-primary-foreground:  222.2 47.4% 11.2%;
-
-  --tf-accent: 222.2 47.4% 11.2%;
-  --tf-accent-foreground: 210 40% 96.1%;
-
-  --tf-destructive: 0 100% 50%;
-  --tf-destructive-foreground: 210 40% 98%;
-
-  --tf-input: 214.3 31.8% 91.4%;
-  --tf-ring: 215 20.2% 65.1%;
-
-  --tf-radius: 0.5rem;
-
-  --tf-font: 'Roboto', sans-serif;
-}
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --tf-label: 222.2 47.4% 11.2%;
+  --tf-category: 222.2 47.4% 11.2%;
+
+  --tf-background: 0 0% 100%;
+  --tf-foreground: 0 0% 0%;
+
+  --tf-muted: 210 40% 96.1%;
+  --tf-muted-foreground: 215.4 16.3% 46.9%;
+
+  --tf-primary:  210 40% 98%;
+  --tf-primary-foreground:  222.2 47.4% 11.2%;
+
+  --tf-accent: 222.2 47.4% 11.2%;
+  --tf-accent-foreground: 210 40% 96.1%;
+
+  --tf-destructive: 0 100% 50%;
+  --tf-destructive-foreground: 210 40% 98%;
+
+  --tf-input: 214.3 31.8% 91.4%;
+  --tf-ring: 215 20.2% 65.1%;
+
+  --tf-radius: 0.5rem;
+
+  --tf-font: 'Roboto', sans-serif;
+}

package/dev/main.tsx

@@ -184,3 +184,27 @@ const form = document.querySelector('twintag-form');
 
 form?.setAttribute('config', JSON.stringify(config));
 form?.setAttribute('options', JSON.stringify(options));
+
+form?.addEventListener('twintag-form-values', (event) => {
+  console.log('form values', (event as CustomEvent).detail);
+});
+form?.addEventListener('twintag-form-valid', (e) => {
+  console.log('form valid', (e as CustomEvent).detail);
+});
+form?.addEventListener('twintag-form-invalid', (e) => {
+  console.log('form invalid', (e as CustomEvent).detail);
+});
+
+const getValues = document.getElementById('get-values');
+getValues?.addEventListener('click', () => {
+  form?.shadowRoot
+    ?.querySelector('form')
+    ?.dispatchEvent(new CustomEvent('twintag-form-get_values'));
+});
+
+const submit = document.getElementById('submit');
+submit?.addEventListener('click', () => {
+  form?.shadowRoot
+    ?.querySelector('form')
+    ?.dispatchEvent(new CustomEvent('twintag-form-validate'));
+});

package/dist/twintag-form.react.js

@@ -21867,42 +21867,49 @@ const za = (e, t) => {
   Re(() => {
     a.formState.isSubmitSuccessful && t && e && a.reset(
       Object.keys(e).reduce(
-        (l, u) => ({ ...l, [u]: "" }),
+        (u, f) => ({ ...u, [f]: "" }),
         {}
       )
     );
   }, [a.formState]);
-  const s = (l) => {
-    var f;
-    console.log("form", l);
-    const u = new CustomEvent("twintag-form-valid", {
-      detail: l,
+  const s = (u) => {
+    var m;
+    const f = new CustomEvent("twintag-form-valid", {
+      detail: u,
       bubbles: !0,
       cancelable: !1,
       composed: !0
     });
-    (f = n.current) == null || f.dispatchEvent(u);
-  }, i = (l) => {
-    var f;
-    const u = new CustomEvent("twintag-form-invalid", {
-      detail: l,
+    (m = n.current) == null || m.dispatchEvent(f);
+  }, i = (u) => {
+    var m;
+    const f = new CustomEvent("twintag-form-invalid", {
+      detail: u,
       bubbles: !0,
       cancelable: !1,
       composed: !0
     });
-    (f = n.current) == null || f.dispatchEvent(u);
+    (m = n.current) == null || m.dispatchEvent(f);
   }, c = () => {
     a.handleSubmit(s, i)();
+  }, l = () => {
+    var m;
+    const u = a.getValues(), f = new CustomEvent("twintag-form-values", {
+      detail: u,
+      bubbles: !0,
+      cancelable: !1,
+      composed: !0
+    });
+    (m = n.current) == null || m.dispatchEvent(f);
   };
   return Re(() => {
-    const l = n.current;
-    return l && l.addEventListener("twintag-form-validate", c), () => {
-      l && l.removeEventListener("twintag-form-validate", c);
+    const u = n.current;
+    return u && (u.addEventListener("twintag-form-validate", c), u.addEventListener("twintag-form-get_values", l)), () => {
+      u && (u.removeEventListener("twintag-form-validate", c), u.removeEventListener("twintag-form-get_values", l));
     };
   }, []), /* @__PURE__ */ k.jsx(q8, { ...a, children: /* @__PURE__ */ k.jsx(
     "form",
     {
-      id: "twintag-form",
       ref: n,
       className: "relative space-y-4 font-tf-font",
       onSubmit: a.handleSubmit(s, i),

package/index.html

@@ -1,15 +1,26 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Twintag Form</title>
-  </head>
-  <body>
-    <div style="margin-inline: auto; max-width: 32rem; background: hsl(var(--tf-background)); padding: 2rem">
-      <twintag-form></twintag-form>
-    </div>
-    <script type="module" src="./dev/main.tsx"></script>
-  </body>
-</html>
-
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Twintag Form</title>
+  </head>
+  <body>
+    <div
+      style="
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        padding: 2rem;
+      "
+    >
+      <div>
+        <button id="get-values">Get Values</button>
+        <button id="submit">Submit</button>
+      </div>
+      <div style="max-width: 32rem; background: hsl(var(--tf-background))">
+        <twintag-form></twintag-form>
+      </div>
+    </div>
+    <script type="module" src="./dev/main.tsx"></script>
+  </body>
+</html>

package/lib/components/form.tsx

@@ -36,42 +36,56 @@ export const TwintagForm = ({
   }, [form.formState]);
 
   const onValid = (data: FieldValues) => {
-    console.log('form', data);
-    const customSubmit = new CustomEvent('twintag-form-valid', {
+    const eventWithValidData = new CustomEvent('twintag-form-valid', {
       detail: data,
       bubbles: true,
       cancelable: false,
       composed: true,
     });
 
-    ref.current?.dispatchEvent(customSubmit);
+    ref.current?.dispatchEvent(eventWithValidData);
   };
 
   const onInvalid = (__errors: FieldValues) => {
-    const customSubmit = new CustomEvent('twintag-form-invalid', {
+    const eventWithInvalidData = new CustomEvent('twintag-form-invalid', {
       detail: __errors,
       bubbles: true,
       cancelable: false,
       composed: true,
     });
 
-    ref.current?.dispatchEvent(customSubmit);
+    ref.current?.dispatchEvent(eventWithInvalidData);
   };
 
   const onValidate = () => {
     void form.handleSubmit(onValid, onInvalid)();
   };
 
+  const onGetValues = () => {
+    const values = form.getValues();
+
+    const eventWithValues = new CustomEvent('twintag-form-values', {
+      detail: values,
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    });
+
+    ref.current?.dispatchEvent(eventWithValues);
+  };
+
   useEffect(() => {
     const form = ref.current;
 
     if (form) {
       form.addEventListener('twintag-form-validate', onValidate);
+      form.addEventListener('twintag-form-get_values', onGetValues);
     }
 
     return () => {
       if (form) {
         form.removeEventListener('twintag-form-validate', onValidate);
+        form.removeEventListener('twintag-form-get_values', onGetValues);
       }
     };
   }, []);
@@ -79,7 +93,6 @@ export const TwintagForm = ({
   return (
     <Form {...form}>
       <form
-        id='twintag-form'
         ref={ref}
         className='relative space-y-4 font-tf-font'
         onSubmit={form.handleSubmit(onValid, onInvalid)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twintag/twintag-form",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "author": "Twintag",
   "type": "module",
   "exports": {
@@ -62,7 +62,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext .ts,.tsx",
-    "format": "prettier --write \"**/*.{ts,md,tsx,cjs,mjs,json}\" --ignore-path ../../.gitignore",
-    "format:check": "prettier --check \"**/*.{ts,tsx,cjs,mjs,json}\" --ignore-path ../../.gitignore"
+    "format": "prettier --write \"**/*.{ts,md,tsx,cjs,mjs,json,html}\" --ignore-path ../../.gitignore",
+    "format:check": "prettier --check \"**/*.{ts,md,tsx,cjs,mjs,json,html}\" --ignore-path ../../.gitignore"
   }
 }