formeo 2.3.0 → 3.0.0

package/dist/formeo.es.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 2.2.2
+Version: 2.3.1
 Author: Draggable https://draggable.io
 */
 
@@ -310,6 +310,8 @@ class SmartTooltip {
   setupEventListeners() {
     document.addEventListener("mouseover", this.handleMouseOver);
     document.addEventListener("mouseout", this.handleMouseOut);
+    document.addEventListener("touchstart", this.handleMouseOver);
+    document.addEventListener("touchend", this.handleMouseOut);
     document.addEventListener("click", this.handleClick);
     window.addEventListener("resize", this.handleResize);
     window.addEventListener("scroll", this.handleScroll, true);
@@ -420,6 +422,8 @@ class SmartTooltip {
   destroy() {
     document.removeEventListener("mouseover", this.handleMouseOver);
     document.removeEventListener("mouseout", this.handleMouseOut);
+    document.removeEventListener("touchstart", this.handleMouseOver);
+    document.removeEventListener("touchend", this.handleMouseOut);
     document.removeEventListener("click", this.handleClick);
     window.removeEventListener("resize", this.handleResize);
     window.removeEventListener("scroll", this.handleScroll, true);
@@ -430,7 +434,7 @@ if (window !== void 0) {
   window.SmartTooltip = SmartTooltip;
 }
 const name$1 = "formeo";
-const version$2 = "2.2.2";
+const version$2 = "2.3.1";
 const type = "module";
 const main = "dist/formeo.cjs.js";
 const module = "dist/formeo.es.js";
@@ -497,6 +501,7 @@ const scripts = {
   "build:lib": "vite build --config vite.config.lib.mjs",
   build: "npm-run-all -p build:icons build:demo",
   prebuild: "npm run build:lib",
+  postbuild: "npm run generate:jsonSchema",
   "build:demo": "vite build --mode demo",
   "build:demo:watch": "vite build --mode demo --watch",
   "build:icons": "node ./tools/generate-sprite",
@@ -511,7 +516,8 @@ const scripts = {
   "travis-deploy-once": "travis-deploy-once --pro",
   prepush: "npm test",
   prepare: "lefthook install",
-  postmerge: "lefthook install"
+  postmerge: "lefthook install",
+  "generate:jsonSchema": "node --experimental-strip-types --no-warnings ./tools/generate-json-schema.ts"
 };
 const devDependencies = {
   "@biomejs/biome": "^1.9.3",
@@ -522,7 +528,7 @@ const devDependencies = {
   "@semantic-release/npm": "^12.0.1",
   jsdom: "^25.0.1",
   lefthook: "^1.7.18",
-  "npm-run-all": "^4.1.5",
+  "npm-run-all": "^2.1.0",
   "sass-embedded": "^1.80.1",
   "semantic-release": "^24.1.2",
   "svg-sprite": "^2.0.4",
@@ -530,12 +536,14 @@ const devDependencies = {
   "vite-plugin-banner": "^0.8.0",
   "vite-plugin-compression": "^0.5.1",
   "vite-plugin-html": "^3.2.2",
-  "vite-plugin-static-copy": "^2.0.0"
+  "vite-plugin-static-copy": "^2.0.0",
+  zod: "^3.23.8",
+  "zod-to-json-schema": "^3.23.5"
 };
 const dependencies = {
   "@draggable/formeo-languages": "^3.1.3",
   "@draggable/i18n": "^1.0.7",
-  "@draggable/tooltip": "^1.2.1",
+  "@draggable/tooltip": "^1.2.2",
   lodash: "^4.17.21",
   sortablejs: "^1.15.3"
 };
@@ -1966,21 +1974,6 @@ var get_1 = get$1;
 const lodashGet = /* @__PURE__ */ getDefaultExportFromCjs(get_1);
 const get = lodashGet;
 const set = lodashSet;
-const cleanObj = (obj) => {
-  const fresh = { ...obj };
-  const typeMap = {
-    string: () => "",
-    boolean: () => false,
-    object: (val) => cleanObj(val)
-  };
-  for (const key of Object.keys(obj)) {
-    const valType = typeof obj[key];
-    if (typeMap[valType]) {
-      fresh[key] = typeMap[valType](obj[key]);
-    }
-  }
-  return fresh;
-};
 const isInt = (n) => Number.isInteger(Number(n));
 const indexOfNode = (node, parent) => {
   const parentElement = parent || node.parentElement;
@@ -5054,11 +5047,8 @@ class Panels {
       action: {
         click: (evt) => {
           const index2 = indexOfNode(evt.target, evt.target.parentElement);
-          this.currentPanel = this.panels[index2];
-          const labels2 = evt.target.parentElement.childNodes;
-          this.nav.refresh(index2);
-          dom.removeClasses(labels2, "active-tab");
-          evt.target.classList.add("active-tab");
+          this.nav.setTranslateX(index2, false);
+          this.nav.groupChange(index2);
         }
       },
       content: panel.config.label
@@ -5131,17 +5121,18 @@ class Panels {
     const action = {};
     const groupParent = this.currentPanel.parentElement;
     const labelWrap = this.labels.firstChild;
+    const panelTabs = labelWrap.children;
     const siblingGroups = this.currentPanel.parentElement.childNodes;
     this.activePanelIndex = indexOfNode(this.currentPanel, groupParent);
     let offset = { nav: 0, panel: 0 };
     let lastOffset = { ...offset };
     action.groupChange = (newIndex2) => {
-      const labels = labelWrap.children;
-      dom.removeClasses(siblingGroups, "active-panel");
-      dom.removeClasses(labels, "active-tab");
+      this.activePanelIndex = newIndex2;
       this.currentPanel = siblingGroups[newIndex2];
+      dom.removeClasses(siblingGroups, "active-panel");
+      dom.removeClasses(panelTabs, "active-tab");
       this.currentPanel.classList.add("active-panel");
-      labels[newIndex2].classList.add("active-tab");
+      panelTabs[newIndex2].classList.add("active-tab");
       return this.currentPanel;
     };
     const getOffset = (index2) => {
@@ -5181,22 +5172,21 @@ class Panels {
     };
     action.refresh = (newIndex2 = this.activePanelIndex) => {
       if (this.activePanelIndex !== newIndex2) {
-        this.activePanelIndex = newIndex2;
         action.groupChange(newIndex2);
       }
-      action.setTranslateX(this.activePanelIndex);
+      action.setTranslateX(this.activePanelIndex, false);
       this.resizePanels();
     };
     action.nextGroup = () => {
       const newIndex2 = this.activePanelIndex + 1;
       if (newIndex2 !== siblingGroups.length) {
-        const curPanel = action.groupChange(newIndex2);
+        const nextPanel = siblingGroups[newIndex2];
         offset = {
           nav: -labelWrap.offsetWidth * newIndex2,
-          panel: -curPanel.offsetLeft
+          panel: -nextPanel.offsetLeft
         };
         translateX({ offset });
-        this.activePanelIndex++;
+        action.groupChange(newIndex2);
       } else {
         offset = {
           nav: lastOffset.nav - 8,
@@ -5209,13 +5199,13 @@ class Panels {
     action.prevGroup = () => {
       if (this.activePanelIndex !== 0) {
         const newIndex2 = this.activePanelIndex - 1;
-        const curPanel = action.groupChange(newIndex2);
+        const prevPanel = siblingGroups[newIndex2];
         offset = {
           nav: -labelWrap.offsetWidth * newIndex2,
-          panel: -curPanel.offsetLeft
+          panel: -prevPanel.offsetLeft
         };
         translateX({ offset });
-        this.activePanelIndex--;
+        action.groupChange(newIndex2);
       } else {
         offset = {
           nav: 8,
@@ -6042,10 +6032,14 @@ class EditPanel {
       const metaId = this.field.data.meta.id;
       const fieldOptionData = this.field.get("options");
       const type2 = metaId === "select" ? "option" : metaId;
-      const newOptionLabel = mi18n.get(`newOptionLabel`, { type: type2 }) || "New Option";
+      const newOptionLabel = mi18n.get("newOptionLabel", { type: type2 }) || "New Option";
       const itemKey = `options.${this.data.length}`;
-      const optionTemplate = fieldOptionData.length ? cleanObj(fieldOptionData[fieldOptionData.length - 1]) : {};
-      const itemData = { ...optionTemplate, label: newOptionLabel, value: slugify(newOptionLabel) };
+      const lastOptionData = fieldOptionData[fieldOptionData.length - 1];
+      const optionTemplate = fieldOptionData.length ? lastOptionData : {};
+      const itemData = { ...optionTemplate, label: newOptionLabel };
+      if (metaId !== "button") {
+        itemData.value = slugify(newOptionLabel);
+      }
       const newOption = new EditPanelItem({
         key: itemKey,
         data: itemData,
@@ -7448,7 +7442,7 @@ class ButtonControl extends Control {
       options: [
         {
           label: mi18n.get("button"),
-          type: ["button", "submit", "reset"].map((buttonType, index2) => ({
+          type: ["button", "submit", "reset"].map((buttonType) => ({
             label: buttonType,
             type: buttonType
           })),
@@ -8581,18 +8575,28 @@ class Column extends Component {
     super("column", { ...DEFAULT_DATA$1(), ...columnData });
     // loops through children and refresh their edit panels
     __publicField(this, "refreshFieldPanels", () => {
-      this.children.forEach((field) => field.panels.nav.refresh());
+      for (const field of this.children) {
+        field.panels.nav.refresh();
+      }
+    });
+    /**
+     * Sets the width data and style for the column
+     * @param {string} width - The width value to be set for the column
+     * @returns {void}
+     */
+    __publicField(this, "setDomWidth", (width) => {
+      this.dom.dataset.colWidth = width;
+      this.dom.style.width = width;
     });
     /**
      * Sets a columns width
      * @param {String} width percent or pixel
      */
     __publicField(this, "setWidth", (width) => {
-      this.dom.dataset.colWidth = width;
-      this.dom.style.width = width;
+      this.setDomWidth(width);
       return this.set("config.width", width);
     });
-    const children = this.createChildWrap();
+    const childWrap = this.createChildWrap();
     this.dom = dom.create({
       tag: "li",
       className: [COLUMN_CLASSNAME, "empty"],
@@ -8605,17 +8609,17 @@ class Column extends Component {
         this.getActionButtons(),
         DOM_CONFIGS.editWindow(),
         DOM_CONFIGS.resizeHandle(new ResizeColumn()),
-        children
+        childWrap
       ]
     });
-    this.processConfig(this.dom);
+    this.processConfig();
     events.columnResized = new window.CustomEvent("columnResized", {
       detail: {
         column: this.dom,
         instance: this
       }
     });
-    Sortable.create(children, {
+    Sortable.create(childWrap, {
       animation: 150,
       fallbackClass: "field-moving",
       forceFallback: true,
@@ -8644,11 +8648,10 @@ class Column extends Component {
    * Process column configuration data
    * @param  {Object} column
    */
-  processConfig(column) {
+  processConfig() {
     const columnWidth = helpers.get(this.data, "config.width");
     if (columnWidth) {
-      column.dataset.colWidth = columnWidth;
-      column.style.width = columnWidth;
+      this.setDomWidth(columnWidth);
     }
   }
 }
@@ -8699,6 +8702,23 @@ let Fields$1 = class Fields extends ComponentData {
       }
       return found;
     });
+    __publicField(this, "getData", () => {
+      return Object.entries(this.data).reduce((acc, [key, val]) => {
+        const { conditions, ...data } = (val == null ? void 0 : val.getData()) || val;
+        if (conditions == null ? void 0 : conditions.length) {
+          let hasConditions = true;
+          if (conditions.length === 1) {
+            const [firstCondition] = conditions;
+            hasConditions = Boolean(firstCondition.if[0].source && firstCondition.then[0].target);
+          }
+          if (hasConditions) {
+            data.conditions = conditions;
+          }
+        }
+        acc[key] = data;
+        return acc;
+      }, {});
+    });
     this.config = { all: DEFAULT_CONFIG };
   }
   Component(data) {
@@ -8777,7 +8797,10 @@ class Components extends Data {
     }, acculumator);
   }
   get json() {
-    return window.JSON.stringify(this.formData);
+    return window.JSON.stringify({
+      $schema: `https://cdn.jsdelivr.net/npm/formeo@${version$1}/dist/formData_schema.json`,
+      ...this.formData
+    });
   }
   get formData() {
     return {

package/dist/formeo.min.css

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