formeo 4.2.3 → 4.2.4

package/dist/demo/assets/js/formeo.umd.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.2.2
+Version: 4.2.3
 Author: Draggable https://draggable.io
 */
 
@@ -435,7 +435,7 @@ Author: Draggable https://draggable.io
     window.SmartTooltip = SmartTooltip;
   }
   const name$1 = "formeo";
-  const version$2 = "4.2.2";
+  const version$2 = "4.2.3";
   const pkg = {
     name: name$1,
     version: version$2
@@ -9149,6 +9149,7 @@ Author: Draggable https://draggable.io
       Sortable.create(childWrap, {
         animation: 150,
         fallbackClass: "field-moving",
+        forceFallback: true,
         group: {
           name: "column",
           pull: true,
@@ -9254,6 +9255,7 @@ Author: Draggable https://draggable.io
       Sortable.create(children, {
         animation: 150,
         fallbackClass: "column-moving",
+        forceFallback: true,
         group: {
           name: "row",
           pull: true,
@@ -9949,30 +9951,37 @@ Author: Draggable https://draggable.io
       for (let i2 = groups.length - 1; i2 >= 0; i2--) {
         const storeID = `formeo-controls-${groups[i2]}`;
         if (!this.options.sortable) {
-          window.localStorage.removeItem(storeID);
+          globalThis.localStorage.removeItem(storeID);
         }
         Sortable.create(groups[i2], {
           animation: 150,
-          forceFallback: true,
           fallbackClass: "control-moving",
           fallbackOnBody: true,
+          forceFallback: true,
+          fallbackTolerance: 5,
           group: {
             name: "controls",
             pull: "clone",
-            put: false
+            put: false,
+            revertClone: true
           },
-          onStart: async ({ item }) => {
-            const { controlData } = this.get(item.id);
+          onClone: ({ clone: clone2, item }) => {
+            clone2.id = item.id;
             if (this.options.ghostPreview) {
-              const { default: Field2 } = await Promise.resolve().then(() => field);
-              item.innerHTML = "";
-              item.appendChild(new Field2(controlData).preview);
+              const { controlData } = this.get(item.id);
+              Promise.resolve().then(() => field).then(({ default: Field2 }) => {
+                clone2.innerHTML = "";
+                clone2.appendChild(new Field2(controlData).preview);
+              });
             }
           },
-          onEnd: ({ from, item, clone: clone2 }) => {
-            if (from.contains(clone2)) {
-              from.replaceChild(item, clone2);
-            }
+          onStart: () => {
+            this.originalDocumentOverflow = document.documentElement.style.overflow;
+            document.documentElement.style.overflow = "hidden";
+          },
+          onEnd: () => {
+            document.documentElement.style.overflow = this.originalDocumentOverflow;
+            this.originalDocumentOverflow = null;
           },
           sort: this.options.sortable,
           store: {
@@ -9982,7 +9991,7 @@ Author: Draggable https://draggable.io
              * @return {Array}
              */
             get: () => {
-              const order = window.localStorage.getItem(storeID);
+              const order = globalThis.localStorage.getItem(storeID);
               return order ? order.split("|") : [];
             },
             /**
@@ -9991,7 +10000,7 @@ Author: Draggable https://draggable.io
              */
             set: (sortable) => {
               const order = sortable.toArray();
-              window.localStorage.setItem(storeID, order.join("|"));
+              globalThis.localStorage.setItem(storeID, order.join("|"));
             }
           }
         });

package/dist/demo/assets/js/index.min.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.2.2
+Version: 4.2.3
 Author: Draggable https://draggable.io
 */
 

package/dist/demo/assets/js/index.min2.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.2.2
+Version: 4.2.3
 Author: Draggable https://draggable.io
 */
 

package/dist/demo/assets/js/index.min3.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.2.2
+Version: 4.2.3
 Author: Draggable https://draggable.io
 */
 

package/dist/demo/assets/js/mode-json.min.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.2.2
+Version: 4.2.3
 Author: Draggable https://draggable.io
 */
 

package/dist/demo/assets/js/theme-github_light_default.min.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.2.2
+Version: 4.2.3
 Author: Draggable https://draggable.io
 */
 

package/dist/demo/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en" xml:lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="chrome=1"><meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"><meta name="description" content="Vanilla Javascript form building module"><meta name="theme-color" content="#232323"><title>Formeo | Drag &amp; Drop Form Creation</title><script type="module" crossorigin src="/formeo/assets/js/demo.min.js"></script><link rel="stylesheet" crossorigin href="/formeo/assets/css/demo.min.css"></head><body><div class="site-wrap"><header id="demo-header"><div class="header-inner"><img id="formeo-logo" src="/formeo/assets/img/formeo-logo.svg" alt="Formeo Logo" width="100"><nav aria-label="Framework navigation"><ul><li><label for="framework-select">Framework:</label> <select name="framework-select" id="framework-select" class="form-control"><option value="vanilla">Vanilla JavaScript</option><option value="angular">Angular</option><option value="react">React</option></select></li><li><label for="locale">Language</label> <select name="locale" id="locale" class="form-control"><option value="af-ZA" dir="ltr">Afrikaans (Suid-Afrika)</option><option value="ar-TN" dir="rtl">العربية (تونس)</option><option value="cs-CZ" dir="ltr">čeština (Česko)</option><option value="de-DE" dir="ltr">Deutsch (Deutschland)</option><option value="en-US" dir="ltr">English</option><option value="es-ES" dir="ltr">español de España</option><option value="fa-IR" dir="rtl">فارسی (ایران)</option><option value="fi-FI" dir="ltr">suomi (Suomi)</option><option value="fr-FR" dir="ltr">français (France)</option><option value="he-IL" dir="rtl">עברית (ישראל)</option><option value="hi-IN" dir="ltr">हिन्दी (भारत)</option><option value="hu-HU" dir="ltr">magyar (Magyarország)</option><option value="it-IT" dir="ltr">italiano (Italia)</option><option value="ja-JP" dir="ltr">日本語 (日本)</option><option value="nb-NO" dir="ltr">norsk bokmål (Norge)</option><option value="pl-PL" dir="ltr">polski (Polska)</option><option value="pt-BR" dir="ltr">português (Brasil)</option><option value="pt-PT" dir="ltr">português europeu</option><option value="ro-RO" dir="ltr">română (România)</option><option value="ru-RU" dir="ltr">русский (Россия)</option><option value="th-TH" dir="ltr">ไทย (ไทย)</option><option value="tr-TR" dir="ltr">Türkçe (Türkiye)</option><option value="zh-CN" dir="ltr">中文（中国）</option><option value="zh-HK" dir="ltr">中文（中國香港特別行政區）</option></select></li><li><label for="control-filter">Control Filter:</label> <input id="control-filter" placeholder="ex. text" class="form-control"></li><li style="float:right">v4.2.2</li></ul></nav></div></header><section id="main_content" class="inner"><div id="framework-container"></div></section><div class="container render-btn-wrap" id="editor-action-buttons"></div><div id="formData-popover" popover><div class="popover-header"><h3>Test formData</h3><div><button type="button" id="format-json">Format</button> <button type="button" id="collapse-json">Collapse</button> <button type="button" id="copy-json">Copy to Clipboard</button></div></div><pre id="formData-editor"></pre><div class="formData-actions"><button popovertarget="formData-popover" popovertargetaction="hide" type="button">Cancel</button> <button id="submit-formData" type="button">Submit</button></div></div><footer id="demo-footer"><nav aria-label="Footer navigation"><ul><li><a href="https://github.com/Draggable/formeo" target="_blank" title="View project on GitHub"><img src="/formeo/assets/img/github.png" width="77" alt="GitHub"></a></li></ul></nav></footer></div></body></html>
+<!doctype html><html lang="en" xml:lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="chrome=1"><meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"><meta name="description" content="Vanilla Javascript form building module"><meta name="theme-color" content="#232323"><title>Formeo | Drag &amp; Drop Form Creation</title><script type="module" crossorigin src="/formeo/assets/js/demo.min.js"></script><link rel="stylesheet" crossorigin href="/formeo/assets/css/demo.min.css"></head><body><div class="site-wrap"><header id="demo-header"><div class="header-inner"><img id="formeo-logo" src="/formeo/assets/img/formeo-logo.svg" alt="Formeo Logo" width="100"><nav aria-label="Framework navigation"><ul><li><label for="framework-select">Framework:</label> <select name="framework-select" id="framework-select" class="form-control"><option value="vanilla">Vanilla JavaScript</option><option value="angular">Angular</option><option value="react">React</option></select></li><li><label for="locale">Language</label> <select name="locale" id="locale" class="form-control"><option value="af-ZA" dir="ltr">Afrikaans (Suid-Afrika)</option><option value="ar-TN" dir="rtl">العربية (تونس)</option><option value="cs-CZ" dir="ltr">čeština (Česko)</option><option value="de-DE" dir="ltr">Deutsch (Deutschland)</option><option value="en-US" dir="ltr">English</option><option value="es-ES" dir="ltr">español de España</option><option value="fa-IR" dir="rtl">فارسی (ایران)</option><option value="fi-FI" dir="ltr">suomi (Suomi)</option><option value="fr-FR" dir="ltr">français (France)</option><option value="he-IL" dir="rtl">עברית (ישראל)</option><option value="hi-IN" dir="ltr">हिन्दी (भारत)</option><option value="hu-HU" dir="ltr">magyar (Magyarország)</option><option value="it-IT" dir="ltr">italiano (Italia)</option><option value="ja-JP" dir="ltr">日本語 (日本)</option><option value="nb-NO" dir="ltr">norsk bokmål (Norge)</option><option value="pl-PL" dir="ltr">polski (Polska)</option><option value="pt-BR" dir="ltr">português (Brasil)</option><option value="pt-PT" dir="ltr">português europeu</option><option value="ro-RO" dir="ltr">română (România)</option><option value="ru-RU" dir="ltr">русский (Россия)</option><option value="th-TH" dir="ltr">ไทย (ไทย)</option><option value="tr-TR" dir="ltr">Türkçe (Türkiye)</option><option value="zh-CN" dir="ltr">中文（中国）</option><option value="zh-HK" dir="ltr">中文（中國香港特別行政區）</option></select></li><li><label for="control-filter">Control Filter:</label> <input id="control-filter" placeholder="ex. text" class="form-control"></li><li style="float:right">v4.2.3</li></ul></nav></div></header><section id="main_content" class="inner"><div id="framework-container"></div></section><div class="container render-btn-wrap" id="editor-action-buttons"></div><div id="formData-popover" popover><div class="popover-header"><h3>Test formData</h3><div><button type="button" id="format-json">Format</button> <button type="button" id="collapse-json">Collapse</button> <button type="button" id="copy-json">Copy to Clipboard</button></div></div><pre id="formData-editor"></pre><div class="formData-actions"><button popovertarget="formData-popover" popovertargetaction="hide" type="button">Cancel</button> <button id="submit-formData" type="button">Submit</button></div></div><footer id="demo-footer"><nav aria-label="Footer navigation"><ul><li><a href="https://github.com/Draggable/formeo" target="_blank" title="View project on GitHub"><img src="/formeo/assets/img/github.png" width="77" alt="GitHub"></a></li></ul></nav></footer></div></body></html>

package/dist/formeo.cjs.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.2.2
+Version: 4.2.3
 Author: Draggable https://draggable.io
 */
 
@@ -433,7 +433,7 @@ if (window !== void 0) {
   window.SmartTooltip = SmartTooltip;
 }
 const name$1 = "formeo";
-const version$2 = "4.2.2";
+const version$2 = "4.2.3";
 const pkg = {
   name: name$1,
   version: version$2
@@ -9147,6 +9147,7 @@ class Column extends Component {
     Sortable.create(childWrap, {
       animation: 150,
       fallbackClass: "field-moving",
+      forceFallback: true,
       group: {
         name: "column",
         pull: true,
@@ -9252,6 +9253,7 @@ class Row extends Component {
     Sortable.create(children, {
       animation: 150,
       fallbackClass: "column-moving",
+      forceFallback: true,
       group: {
         name: "row",
         pull: true,
@@ -9947,30 +9949,37 @@ let Controls$1 = class Controls {
     for (let i2 = groups.length - 1; i2 >= 0; i2--) {
       const storeID = `formeo-controls-${groups[i2]}`;
       if (!this.options.sortable) {
-        window.localStorage.removeItem(storeID);
+        globalThis.localStorage.removeItem(storeID);
       }
       Sortable.create(groups[i2], {
         animation: 150,
-        forceFallback: true,
         fallbackClass: "control-moving",
         fallbackOnBody: true,
+        forceFallback: true,
+        fallbackTolerance: 5,
         group: {
           name: "controls",
           pull: "clone",
-          put: false
+          put: false,
+          revertClone: true
         },
-        onStart: async ({ item }) => {
-          const { controlData } = this.get(item.id);
+        onClone: ({ clone: clone2, item }) => {
+          clone2.id = item.id;
           if (this.options.ghostPreview) {
-            const { default: Field2 } = await Promise.resolve().then(() => field);
-            item.innerHTML = "";
-            item.appendChild(new Field2(controlData).preview);
+            const { controlData } = this.get(item.id);
+            Promise.resolve().then(() => field).then(({ default: Field2 }) => {
+              clone2.innerHTML = "";
+              clone2.appendChild(new Field2(controlData).preview);
+            });
           }
         },
-        onEnd: ({ from, item, clone: clone2 }) => {
-          if (from.contains(clone2)) {
-            from.replaceChild(item, clone2);
-          }
+        onStart: () => {
+          this.originalDocumentOverflow = document.documentElement.style.overflow;
+          document.documentElement.style.overflow = "hidden";
+        },
+        onEnd: () => {
+          document.documentElement.style.overflow = this.originalDocumentOverflow;
+          this.originalDocumentOverflow = null;
         },
         sort: this.options.sortable,
         store: {
@@ -9980,7 +9989,7 @@ let Controls$1 = class Controls {
            * @return {Array}
            */
           get: () => {
-            const order = window.localStorage.getItem(storeID);
+            const order = globalThis.localStorage.getItem(storeID);
             return order ? order.split("|") : [];
           },
           /**
@@ -9989,7 +9998,7 @@ let Controls$1 = class Controls {
            */
           set: (sortable) => {
             const order = sortable.toArray();
-            window.localStorage.setItem(storeID, order.join("|"));
+            globalThis.localStorage.setItem(storeID, order.join("|"));
           }
         }
       });

package/dist/formeo.css

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.2.2
+Version: 4.2.3
 Author: Draggable https://draggable.io
 */
 
@@ -1542,6 +1542,7 @@ button[class*=-clone]:hover .svg-icon {
   flex-direction: column;
   justify-content: flex-start;
   gap: 16px;
+  min-height: 100%;
 }
 .formeo.formeo-editor .formeo-stage.removing-all-fields .formeo-row {
   transition: margin-top 250ms ease-in;

package/dist/formeo.es.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.2.2
+Version: 4.2.3
 Author: Draggable https://draggable.io
 */
 
@@ -431,7 +431,7 @@ if (window !== void 0) {
   window.SmartTooltip = SmartTooltip;
 }
 const name$1 = "formeo";
-const version$2 = "4.2.2";
+const version$2 = "4.2.3";
 const pkg = {
   name: name$1,
   version: version$2
@@ -9145,6 +9145,7 @@ class Column extends Component {
     Sortable.create(childWrap, {
       animation: 150,
       fallbackClass: "field-moving",
+      forceFallback: true,
       group: {
         name: "column",
         pull: true,
@@ -9250,6 +9251,7 @@ class Row extends Component {
     Sortable.create(children, {
       animation: 150,
       fallbackClass: "column-moving",
+      forceFallback: true,
       group: {
         name: "row",
         pull: true,
@@ -9945,30 +9947,37 @@ let Controls$1 = class Controls {
     for (let i2 = groups.length - 1; i2 >= 0; i2--) {
       const storeID = `formeo-controls-${groups[i2]}`;
       if (!this.options.sortable) {
-        window.localStorage.removeItem(storeID);
+        globalThis.localStorage.removeItem(storeID);
       }
       Sortable.create(groups[i2], {
         animation: 150,
-        forceFallback: true,
         fallbackClass: "control-moving",
         fallbackOnBody: true,
+        forceFallback: true,
+        fallbackTolerance: 5,
         group: {
           name: "controls",
           pull: "clone",
-          put: false
+          put: false,
+          revertClone: true
         },
-        onStart: async ({ item }) => {
-          const { controlData } = this.get(item.id);
+        onClone: ({ clone: clone2, item }) => {
+          clone2.id = item.id;
           if (this.options.ghostPreview) {
-            const { default: Field2 } = await Promise.resolve().then(() => field);
-            item.innerHTML = "";
-            item.appendChild(new Field2(controlData).preview);
+            const { controlData } = this.get(item.id);
+            Promise.resolve().then(() => field).then(({ default: Field2 }) => {
+              clone2.innerHTML = "";
+              clone2.appendChild(new Field2(controlData).preview);
+            });
           }
         },
-        onEnd: ({ from, item, clone: clone2 }) => {
-          if (from.contains(clone2)) {
-            from.replaceChild(item, clone2);
-          }
+        onStart: () => {
+          this.originalDocumentOverflow = document.documentElement.style.overflow;
+          document.documentElement.style.overflow = "hidden";
+        },
+        onEnd: () => {
+          document.documentElement.style.overflow = this.originalDocumentOverflow;
+          this.originalDocumentOverflow = null;
         },
         sort: this.options.sortable,
         store: {
@@ -9978,7 +9987,7 @@ let Controls$1 = class Controls {
            * @return {Array}
            */
           get: () => {
-            const order = window.localStorage.getItem(storeID);
+            const order = globalThis.localStorage.getItem(storeID);
             return order ? order.split("|") : [];
           },
           /**
@@ -9987,7 +9996,7 @@ let Controls$1 = class Controls {
            */
           set: (sortable) => {
             const order = sortable.toArray();
-            window.localStorage.setItem(storeID, order.join("|"));
+            globalThis.localStorage.setItem(storeID, order.join("|"));
           }
         }
       });