@themarioga/grid-editor 6.0.0-beta.5 → 7.0.0

package/dist/plugins/grideditor.float.js

@@ -1,56 +1,41 @@
-/**
- * Floating elements for grid-editor.
- *
- * A utility plugin: load this file after the editor and after the elements
- * plugin, and an element can float to the start or the end of its content
- * area per breakpoint, with the text around it, using Bootstrap's
- * float-{breakpoint}-start, -end and -none classes. What it can ask the
- * editor for is the handle its factory is called with, described in
- * docs/plugins.md.
- *
- *   <script src="dist/jquery.grideditor.min.js"></script>
- *   <script src="dist/plugins/grideditor.elements.min.js"></script>
- *   <script src="dist/plugins/grideditor.float.min.js"></script>
- *
- * Elements only. A floated row or column stops being part of the grid, and a
- * container sits beside the content areas rather than in their text.
- */
-(function($) {
-
-$.extend($.fn.gridEditor.locales.en, {
-    'utility.float': 'Float',
-    'utility.float_start': 'Start',
-    'utility.float_end': 'End',
-    'utility.float_none': 'None',
-});
-
-/** Start and end are left and right: Bootstrap's css is left to right. */
-var CSS = { start: 'left', end: 'right', none: 'none' };
-
-$.fn.gridEditor.utilities.float = function(ge) {
-
+(() => {
+  // src/js/register.js
+  var GridEditor = window.GridEditor;
+  if (!GridEditor || typeof GridEditor.get !== "function") {
+    throw new Error("grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, its locales and grideditor.jquery.js");
+  }
+
+  // src/js/plugins/grideditor.float.js
+  Object.assign(GridEditor.locales.en, {
+    "utility.float": "Float",
+    "utility.float_start": "Start",
+    "utility.float_end": "End",
+    "utility.float_none": "None"
+  });
+  var CSS = { start: "left", end: "right", none: "none" };
+  GridEditor.utilities.float = function(ge) {
     function label(value) {
-        if (value === 'start') { return ge.t('utility.float_start'); }
-        if (value === 'end') { return ge.t('utility.float_end'); }
-
-        return ge.t('utility.float_none');
+      if (value === "start") {
+        return ge.t("utility.float_start");
+      }
+      if (value === "end") {
+        return ge.t("utility.float_end");
+      }
+      return ge.t("utility.float_none");
     }
-
     return {
-        families: [{
-            name: 'float',
-            prefix: 'float',
-            values: ['start', 'end', 'none'],
-            appliesTo: ['element'],
-            labelKey: 'utility.float',
-            label: label,
-
-            /** With no class applying here, whatever the host's css floats it as. */
-            preview: function(value, node) {
-                return { float: value === null ? ge.bareStyle(node, 'float', 'float') : CSS[value] };
-            },
-        }],
+      families: [{
+        name: "float",
+        prefix: "float",
+        values: ["start", "end", "none"],
+        appliesTo: ["element"],
+        labelKey: "utility.float",
+        label,
+        /** With no class applying here, whatever the host's css floats it as. */
+        preview: function(value, node) {
+          return { float: value === null ? ge.bareStyle(node, "float", "float") : CSS[value] };
+        }
+      }]
     };
-};
-
-})(jQuery);
+  };
+})();

package/dist/plugins/grideditor.float.min.js

@@ -1,2 +1 @@
-(t=>{t.extend(t.fn.gridEditor.locales.en,{"utility.float":"Float","utility.float_start":"Start","utility.float_end":"End","utility.float_none":"None"});var n={start:"left",end:"right",none:"none"};t.fn.gridEditor.utilities.float=function(e){return{families:[{name:"float",prefix:"float",values:["start","end","none"],appliesTo:["element"],labelKey:"utility.float",label:function(t){return"start"===t?e.t("utility.float_start"):"end"===t?e.t("utility.float_end"):e.t("utility.float_none")},preview:function(t,l){return{float:null===t?e.bareStyle(l,"float","float"):n[t]}}}]}}})(jQuery);
-//# sourceMappingURL=grideditor.float.min.js.map
+(()=>{var i=window.GridEditor;if(!i||typeof i.get!="function")throw new Error("grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, its locales and grideditor.jquery.js");Object.assign(i.locales.en,{"utility.float":"Float","utility.float_start":"Start","utility.float_end":"End","utility.float_none":"None"});var l={start:"left",end:"right",none:"none"};i.utilities.float=function(e){function r(t){return t==="start"?e.t("utility.float_start"):t==="end"?e.t("utility.float_end"):e.t("utility.float_none")}return{families:[{name:"float",prefix:"float",values:["start","end","none"],appliesTo:["element"],labelKey:"utility.float",label:r,preview:function(t,o){return{float:t===null?e.bareStyle(o,"float","float"):l[t]}}}]}};})();

package/dist/plugins/grideditor.float.min.js.map

@@ -1 +1,7 @@
-{"version":3,"file":"grideditor.float.min.js","sources":["../../src/js/plugins/grideditor.float.js"],"names":["$","extend","fn","gridEditor","locales","en","utility.float","utility.float_start","utility.float_end","utility.float_none","CSS","start","end","none","utilities","float","ge","families","name","prefix","values","appliesTo","labelKey","label","value","t","preview","node","bareStyle","jQuery"],"mappings":"CAiBUA,IAEVA,EAAEC,OAAOD,EAAEE,GAAGC,WAAWC,QAAQC,GAAI,CACjCC,gBAAiB,QACjBC,sBAAuB,QACvBC,oBAAqB,MACrBC,qBAAsB,MAC1B,CAAC,EAGD,IAAIC,EAAM,CAAEC,MAAO,OAAQC,IAAK,QAASC,KAAM,MAAO,EAEtDb,EAAEE,GAAGC,WAAWW,UAAUC,MAAQ,SAASC,GASvC,MAAO,CACHC,SAAU,CAAC,CACPC,KAAM,QACNC,OAAQ,QACRC,OAAQ,CAAC,QAAS,MAAO,QACzBC,UAAW,CAAC,WACZC,SAAU,gBACVC,MAdR,SAAeC,GACX,MAAc,UAAVA,EAA4BR,EAAGS,EAAE,qBAAqB,EAC5C,QAAVD,EAA0BR,EAAGS,EAAE,mBAAmB,EAE/CT,EAAGS,EAAE,oBAAoB,CACpC,EAYQC,QAAS,SAASF,EAAOG,GACrB,MAAO,CAAEZ,MAAiB,OAAVS,EAAiBR,EAAGY,UAAUD,EAAM,QAAS,OAAO,EAAIjB,EAAIc,EAAO,CACvF,CACJ,EACJ,CACJ,CAEC,GAAEK,MAAM"}
+{
+  "version": 3,
+  "sources": ["../../src/js/register.js", "../../src/js/plugins/grideditor.float.js"],
+  "sourcesContent": ["/**\n * What a plugin's or a locale's classic script imports in place of the\n * editor: the GridEditor the page already loaded.\n *\n * The build points `import { GridEditor } from '../grideditor.js'` here for\n * the classic scripts, so each registers on the editor the page has rather\n * than bringing its own. Loaded before the editor there is nothing to\n * register on, and saying so is better than a TypeError three calls later.\n */\nvar GridEditor = window.GridEditor;\n\nif (!GridEditor || typeof GridEditor.get !== 'function') {\n    throw new Error('grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, ' +\n        'its locales and grideditor.jquery.js');\n}\n\nexport { GridEditor };\nexport default GridEditor;\n", "/**\n * Floating elements for grid-editor.\n *\n * A utility plugin: load this file after the editor and after the elements\n * plugin, and an element can float to the start or the end of its content\n * area per breakpoint, with the text around it, using Bootstrap's\n * float-{breakpoint}-start, -end and -none classes. What it can ask the\n * editor for is the handle its factory is called with, described in\n * docs/plugins.md.\n *\n *   <script src=\"dist/grideditor.min.js\"></script>\n *   <script src=\"dist/plugins/grideditor.elements.min.js\"></script>\n *   <script src=\"dist/plugins/grideditor.float.min.js\"></script>\n *\n * Elements only. A floated row or column stops being part of the grid, and a\n * container sits beside the content areas rather than in their text.\n */\nimport { GridEditor } from '../grideditor.js';\n\nObject.assign(GridEditor.locales.en, {\n    'utility.float': 'Float',\n    'utility.float_start': 'Start',\n    'utility.float_end': 'End',\n    'utility.float_none': 'None',\n});\n\n/** Start and end are left and right: Bootstrap's css is left to right. */\nvar CSS = { start: 'left', end: 'right', none: 'none' };\n\nGridEditor.utilities.float = function(ge) {\n\n    function label(value) {\n        if (value === 'start') { return ge.t('utility.float_start'); }\n        if (value === 'end') { return ge.t('utility.float_end'); }\n\n        return ge.t('utility.float_none');\n    }\n\n    return {\n        families: [{\n            name: 'float',\n            prefix: 'float',\n            values: ['start', 'end', 'none'],\n            appliesTo: ['element'],\n            labelKey: 'utility.float',\n            label: label,\n\n            /** With no class applying here, whatever the host's css floats it as. */\n            preview: function(value, node) {\n                return { float: value === null ? ge.bareStyle(node, 'float', 'float') : CSS[value] };\n            },\n        }],\n    };\n};\n"],
+  "mappings": "MASA,IAAIA,EAAa,OAAO,WAExB,GAAI,CAACA,GAAc,OAAOA,EAAW,KAAQ,WACzC,MAAM,IAAI,MAAM,wHAC0B,ECM9C,OAAO,OAAOC,EAAW,QAAQ,GAAI,CACjC,gBAAiB,QACjB,sBAAuB,QACvB,oBAAqB,MACrB,qBAAsB,MAC1B,CAAC,EAGD,IAAIC,EAAM,CAAE,MAAO,OAAQ,IAAK,QAAS,KAAM,MAAO,EAEtDD,EAAW,UAAU,MAAQ,SAASE,EAAI,CAEtC,SAASC,EAAMC,EAAO,CAClB,OAAIA,IAAU,QAAkBF,EAAG,EAAE,qBAAqB,EACtDE,IAAU,MAAgBF,EAAG,EAAE,mBAAmB,EAE/CA,EAAG,EAAE,oBAAoB,CACpC,CAEA,MAAO,CACH,SAAU,CAAC,CACP,KAAM,QACN,OAAQ,QACR,OAAQ,CAAC,QAAS,MAAO,MAAM,EAC/B,UAAW,CAAC,SAAS,EACrB,SAAU,gBACV,MAAOC,EAGP,QAAS,SAASC,EAAOC,EAAM,CAC3B,MAAO,CAAE,MAAOD,IAAU,KAAOF,EAAG,UAAUG,EAAM,QAAS,OAAO,EAAIJ,EAAIG,CAAK,CAAE,CACvF,CACJ,CAAC,CACL,CACJ",
+  "names": ["GridEditor", "GridEditor", "CSS", "ge", "label", "value", "node"]
+}

package/dist/plugins/grideditor.gutters.esm.js

@@ -0,0 +1,143 @@
+// src/js/plugins/grideditor.gutters.js
+import { GridEditor } from "../grideditor.esm.js";
+
+// src/js/dom.js
+function all(root, selector) {
+  return root ? Array.prototype.slice.call(root.querySelectorAll(selector)) : [];
+}
+function selfAndAll(root, selector) {
+  if (!root) {
+    return [];
+  }
+  var found = all(root, selector);
+  if (root.nodeType === 1 && root.matches(selector)) {
+    found.unshift(root);
+  }
+  return found;
+}
+function removeClass(node, names) {
+  split(names).forEach(function(name) {
+    node.classList.remove(name);
+  });
+  return node;
+}
+function toggleClass(node, names, state) {
+  split(names).forEach(function(name) {
+    if (state === void 0) {
+      node.classList.toggle(name);
+    } else {
+      node.classList.toggle(name, !!state);
+    }
+  });
+  return node;
+}
+function split(names) {
+  return String(names || "").split(/\s+/).filter(Boolean);
+}
+
+// src/js/plugins/grideditor.gutters.js
+Object.assign(GridEditor.locales.en, {
+  "utility.gutters": "Gutters",
+  "utility.gutters_x": "Horizontal gutters",
+  "utility.gutters_y": "Vertical gutters"
+});
+var VALUES = ["0", "1", "2", "3", "4", "5"];
+var SCALE = ["0", ".25rem", ".5rem", "1rem", "1.5rem", "3rem"];
+var DEFAULT_X = "1.5rem";
+var DEFAULT_Y = "0";
+var INFIXES = ["", "sm", "md", "lg", "xl", "xxl"];
+var CLASS_PATTERN = /(?:^|\s)g[xy]?-(?:(?:sm|md|lg|xl|xxl)-)?[0-5](?:\s|$)/;
+GridEditor.utilities.gutters = function(ge) {
+  var options = Object.assign({ scale: SCALE }, ge.settings.utilities.gutters);
+  var listening = null;
+  function source(row, prefix, tier) {
+    var classes = (row.getAttribute("class") || "").split(/\s+/);
+    for (var i = tier; i >= 0; i--) {
+      for (var value = VALUES.length - 1; value >= 0; value--) {
+        var name = prefix + (INFIXES[i] ? "-" + INFIXES[i] : "") + "-" + value;
+        if (classes.indexOf(name) !== -1) {
+          return { tier: i, value };
+        }
+      }
+    }
+    return null;
+  }
+  function axis(row, prefix, fallback) {
+    var tier = ge.breakpoints.indexOf(ge.view());
+    var winner = [source(row, "g", tier), source(row, prefix, tier)].filter(Boolean).sort(function(a, b) {
+      return b.tier - a.tier || b.value - a.value;
+    })[0];
+    return winner ? options.scale[winner.value] : fallback;
+  }
+  function preview(axes) {
+    return function(value, row) {
+      var styles = {};
+      if (axes.indexOf("x") !== -1) {
+        styles["--bs-gutter-x"] = axis(row, "gx", DEFAULT_X);
+      }
+      if (axes.indexOf("y") !== -1) {
+        styles["--bs-gutter-y"] = axis(row, "gy", DEFAULT_Y);
+      }
+      return styles;
+    };
+  }
+  function afterUtility(e) {
+    var payload = e.detail;
+    if (payload.family !== "g") {
+      return;
+    }
+    ["gx", "gy"].forEach(function(family) {
+      ge.setUtility(payload.node, family, null, { view: payload.breakpoint, source: payload.source });
+    });
+  }
+  function mark(scope) {
+    selfAndAll(scope, ".row").forEach(function(row) {
+      toggleClass(row, "ge-gutters", CLASS_PATTERN.test(row.getAttribute("class") || ""));
+    });
+  }
+  return {
+    families: [
+      {
+        name: "g",
+        prefix: "g",
+        values: VALUES,
+        appliesTo: ["row"],
+        labelKey: "utility.gutters",
+        preview: preview(["x", "y"])
+      },
+      {
+        name: "gx",
+        prefix: "gx",
+        values: VALUES,
+        appliesTo: ["row"],
+        labelKey: "utility.gutters_x",
+        preview: preview(["x"])
+      },
+      {
+        name: "gy",
+        prefix: "gy",
+        values: VALUES,
+        appliesTo: ["row"],
+        labelKey: "utility.gutters_y",
+        preview: preview(["y"])
+      }
+    ],
+    onInit: function() {
+      if (listening) {
+        ge.canvas.removeEventListener("grideditor:after-utility", listening);
+      }
+      listening = afterUtility;
+      ge.canvas.addEventListener("grideditor:after-utility", listening);
+    },
+    onRefresh: mark,
+    onDeinit: function() {
+      if (listening) {
+        ge.canvas.removeEventListener("grideditor:after-utility", listening);
+      }
+      listening = null;
+      all(ge.canvas, ".ge-gutters").forEach(function(row) {
+        removeClass(row, "ge-gutters");
+      });
+    }
+  };
+};

package/dist/plugins/grideditor.gutters.js

@@ -1,145 +1,148 @@
-/**
- * Gutters for grid-editor.
- *
- * A utility plugin: load this file after the editor and a row's gutters can
- * differ per breakpoint, with Bootstrap's g-{breakpoint}-*, gx-{breakpoint}-*
- * and gy-{breakpoint}-* classes. What it can ask the editor for is the handle
- * its factory is called with, described in docs/plugins.md.
- *
- *   <script src="dist/jquery.grideditor.min.js"></script>
- *   <script src="dist/plugins/grideditor.gutters.min.js"></script>
- *
- * The editor draws its own frame round every column, narrower than any
- * gutter, so a row with gutter classes is drawn with its real gutters instead.
- *
- * utilities.gutters.scale is what 0 to 5 come to, for a page that changed
- * Bootstrap's $spacers.
- */
-(function($) {
-
-$.extend($.fn.gridEditor.locales.en, {
-    'utility.gutters': 'Gutters',
-    'utility.gutters_x': 'Horizontal gutters',
-    'utility.gutters_y': 'Vertical gutters',
-});
-
-var VALUES = ['0', '1', '2', '3', '4', '5'];
-
-/** Bootstrap's own: $spacers, and what a row's gutters are with no class. */
-var SCALE = ['0', '.25rem', '.5rem', '1rem', '1.5rem', '3rem'];
-var DEFAULT_X = '1.5rem';
-var DEFAULT_Y = '0';
-
-var INFIXES = ['', 'sm', 'md', 'lg', 'xl', 'xxl'];
-var CLASS_PATTERN = /(?:^|\s)g[xy]?-(?:(?:sm|md|lg|xl|xxl)-)?[0-5](?:\s|$)/;
-
-$.fn.gridEditor.utilities.gutters = function(ge) {
-
-    var options = $.extend({ scale: SCALE }, ge.settings.utilities.gutters);
-
-    /**
-     * The class of a family that decides a row's gutters at a breakpoint:
-     * the widest breakpoint up to it that has one, as { tier, value }.
-     */
+(() => {
+  // src/js/register.js
+  var GridEditor = window.GridEditor;
+  if (!GridEditor || typeof GridEditor.get !== "function") {
+    throw new Error("grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, its locales and grideditor.jquery.js");
+  }
+
+  // src/js/dom.js
+  function all(root, selector) {
+    return root ? Array.prototype.slice.call(root.querySelectorAll(selector)) : [];
+  }
+  function selfAndAll(root, selector) {
+    if (!root) {
+      return [];
+    }
+    var found = all(root, selector);
+    if (root.nodeType === 1 && root.matches(selector)) {
+      found.unshift(root);
+    }
+    return found;
+  }
+  function removeClass(node, names) {
+    split(names).forEach(function(name) {
+      node.classList.remove(name);
+    });
+    return node;
+  }
+  function toggleClass(node, names, state) {
+    split(names).forEach(function(name) {
+      if (state === void 0) {
+        node.classList.toggle(name);
+      } else {
+        node.classList.toggle(name, !!state);
+      }
+    });
+    return node;
+  }
+  function split(names) {
+    return String(names || "").split(/\s+/).filter(Boolean);
+  }
+
+  // src/js/plugins/grideditor.gutters.js
+  Object.assign(GridEditor.locales.en, {
+    "utility.gutters": "Gutters",
+    "utility.gutters_x": "Horizontal gutters",
+    "utility.gutters_y": "Vertical gutters"
+  });
+  var VALUES = ["0", "1", "2", "3", "4", "5"];
+  var SCALE = ["0", ".25rem", ".5rem", "1rem", "1.5rem", "3rem"];
+  var DEFAULT_X = "1.5rem";
+  var DEFAULT_Y = "0";
+  var INFIXES = ["", "sm", "md", "lg", "xl", "xxl"];
+  var CLASS_PATTERN = /(?:^|\s)g[xy]?-(?:(?:sm|md|lg|xl|xxl)-)?[0-5](?:\s|$)/;
+  GridEditor.utilities.gutters = function(ge) {
+    var options = Object.assign({ scale: SCALE }, ge.settings.utilities.gutters);
+    var listening = null;
     function source(row, prefix, tier) {
-        var classes = (row.attr('class') || '').split(/\s+/);
-
-        for (var i = tier; i >= 0; i--) {
-            for (var value = VALUES.length - 1; value >= 0; value--) {
-                var name = prefix + (INFIXES[i] ? '-' + INFIXES[i] : '') + '-' + value;
-                if (classes.indexOf(name) !== -1) { return { tier: i, value: value }; }
-            }
+      var classes = (row.getAttribute("class") || "").split(/\s+/);
+      for (var i = tier; i >= 0; i--) {
+        for (var value = VALUES.length - 1; value >= 0; value--) {
+          var name = prefix + (INFIXES[i] ? "-" + INFIXES[i] : "") + "-" + value;
+          if (classes.indexOf(name) !== -1) {
+            return { tier: i, value };
+          }
         }
-
-        return null;
+      }
+      return null;
     }
-
-    /**
-     * One axis the way Bootstrap's css settles it. g and gx (or gy) set the
-     * same variable, every breakpoint's rules come after the smaller ones',
-     * and within a breakpoint the bigger values come later. So the class
-     * that wins is the one from the wider breakpoint, then the bigger one -
-     * not the more specific family, whatever that would suggest.
-     */
     function axis(row, prefix, fallback) {
-        var tier = ge.breakpoints.indexOf(ge.view());
-        var winner = [source(row, 'g', tier), source(row, prefix, tier)]
-            .filter(Boolean)
-            .sort(function(a, b) { return b.tier - a.tier || b.value - a.value; })[0];
-
-        return winner ? options.scale[winner.value] : fallback;
+      var tier = ge.breakpoints.indexOf(ge.view());
+      var winner = [source(row, "g", tier), source(row, prefix, tier)].filter(Boolean).sort(function(a, b) {
+        return b.tier - a.tier || b.value - a.value;
+      })[0];
+      return winner ? options.scale[winner.value] : fallback;
     }
-
     function preview(axes) {
-        return function(value, row) {
-            var styles = {};
-
-            if (axes.indexOf('x') !== -1) { styles['--bs-gutter-x'] = axis(row, 'gx', DEFAULT_X); }
-            if (axes.indexOf('y') !== -1) { styles['--bs-gutter-y'] = axis(row, 'gy', DEFAULT_Y); }
-
-            return styles;
-        };
+      return function(value, row) {
+        var styles = {};
+        if (axes.indexOf("x") !== -1) {
+          styles["--bs-gutter-x"] = axis(row, "gx", DEFAULT_X);
+        }
+        if (axes.indexOf("y") !== -1) {
+          styles["--bs-gutter-y"] = axis(row, "gy", DEFAULT_Y);
+        }
+        return styles;
+      };
     }
-
-    /**
-     * Choosing g sets both axes, so a gx or gy the same breakpoint had is
-     * taken off: left on, the bigger of the two would win, and the field the
-     * user just chose would not be what the row shows.
-     */
-    function afterUtility(e, payload) {
-        if (payload.family !== 'g') { return; }
-
-        ['gx', 'gy'].forEach(function(family) {
-            ge.setUtility(payload.node, family, null, { view: payload.breakpoint, source: payload.source });
-        });
+    function afterUtility(e) {
+      var payload = e.detail;
+      if (payload.family !== "g") {
+        return;
+      }
+      ["gx", "gy"].forEach(function(family) {
+        ge.setUtility(payload.node, family, null, { view: payload.breakpoint, source: payload.source });
+      });
     }
-
     function mark(scope) {
-        scope.find('.row').addBack('.row').each(function() {
-            var row = $(this);
-            row.toggleClass('ge-gutters', CLASS_PATTERN.test(row.attr('class') || ''));
-        });
+      selfAndAll(scope, ".row").forEach(function(row) {
+        toggleClass(row, "ge-gutters", CLASS_PATTERN.test(row.getAttribute("class") || ""));
+      });
     }
-
     return {
-        families: [
-            {
-                name: 'g',
-                prefix: 'g',
-                values: VALUES,
-                appliesTo: ['row'],
-                labelKey: 'utility.gutters',
-                preview: preview(['x', 'y']),
-            },
-            {
-                name: 'gx',
-                prefix: 'gx',
-                values: VALUES,
-                appliesTo: ['row'],
-                labelKey: 'utility.gutters_x',
-                preview: preview(['x']),
-            },
-            {
-                name: 'gy',
-                prefix: 'gy',
-                values: VALUES,
-                appliesTo: ['row'],
-                labelKey: 'utility.gutters_y',
-                preview: preview(['y']),
-            },
-        ],
-
-        onInit: function() {
-            ge.canvas.off('grideditor:after-utility.ge-gutters').on('grideditor:after-utility.ge-gutters', afterUtility);
+      families: [
+        {
+          name: "g",
+          prefix: "g",
+          values: VALUES,
+          appliesTo: ["row"],
+          labelKey: "utility.gutters",
+          preview: preview(["x", "y"])
         },
-
-        onRefresh: mark,
-
-        onDeinit: function() {
-            ge.canvas.off('grideditor:after-utility.ge-gutters');
-            ge.canvas.find('.ge-gutters').removeClass('ge-gutters');
+        {
+          name: "gx",
+          prefix: "gx",
+          values: VALUES,
+          appliesTo: ["row"],
+          labelKey: "utility.gutters_x",
+          preview: preview(["x"])
         },
+        {
+          name: "gy",
+          prefix: "gy",
+          values: VALUES,
+          appliesTo: ["row"],
+          labelKey: "utility.gutters_y",
+          preview: preview(["y"])
+        }
+      ],
+      onInit: function() {
+        if (listening) {
+          ge.canvas.removeEventListener("grideditor:after-utility", listening);
+        }
+        listening = afterUtility;
+        ge.canvas.addEventListener("grideditor:after-utility", listening);
+      },
+      onRefresh: mark,
+      onDeinit: function() {
+        if (listening) {
+          ge.canvas.removeEventListener("grideditor:after-utility", listening);
+        }
+        listening = null;
+        all(ge.canvas, ".ge-gutters").forEach(function(row) {
+          removeClass(row, "ge-gutters");
+        });
+      }
     };
-};
-
-})(jQuery);
+  };
+})();

package/dist/plugins/grideditor.gutters.min.js

@@ -1,2 +1 @@
-(r=>{r.extend(r.fn.gridEditor.locales.en,{"utility.gutters":"Gutters","utility.gutters_x":"Horizontal gutters","utility.gutters_y":"Vertical gutters"});var a=["0","1","2","3","4","5"],i=["0",".25rem",".5rem","1rem","1.5rem","3rem"],g=["","sm","md","lg","xl","xxl"],o=/(?:^|\s)g[xy]?-(?:(?:sm|md|lg|xl|xxl)-)?[0-5](?:\s|$)/;r.fn.gridEditor.utilities.gutters=function(n){var u=r.extend({scale:i},n.settings.utilities.gutters);function s(t,e,r){for(var i=(t.attr("class")||"").split(/\s+/),n=r;0<=n;n--)for(var u=a.length-1;0<=u;u--)if(-1!==i.indexOf(e+(g[n]?"-"+g[n]:"")+"-"+u))return{tier:n,value:u};return null}function l(t,e,r){var i=n.breakpoints.indexOf(n.view()),t=[s(t,"g",i),s(t,e,i)].filter(Boolean).sort(function(t,e){return e.tier-t.tier||e.value-t.value})[0];return t?u.scale[t.value]:r}function t(i){return function(t,e){var r={};return-1!==i.indexOf("x")&&(r["--bs-gutter-x"]=l(e,"gx","1.5rem")),-1!==i.indexOf("y")&&(r["--bs-gutter-y"]=l(e,"gy","0")),r}}function e(t,e){"g"===e.family&&["gx","gy"].forEach(function(t){n.setUtility(e.node,t,null,{view:e.breakpoint,source:e.source})})}return{families:[{name:"g",prefix:"g",values:a,appliesTo:["row"],labelKey:"utility.gutters",preview:t(["x","y"])},{name:"gx",prefix:"gx",values:a,appliesTo:["row"],labelKey:"utility.gutters_x",preview:t(["x"])},{name:"gy",prefix:"gy",values:a,appliesTo:["row"],labelKey:"utility.gutters_y",preview:t(["y"])}],onInit:function(){n.canvas.off("grideditor:after-utility.ge-gutters").on("grideditor:after-utility.ge-gutters",e)},onRefresh:function(t){t.find(".row").addBack(".row").each(function(){var t=r(this);t.toggleClass("ge-gutters",o.test(t.attr("class")||""))})},onDeinit:function(){n.canvas.off("grideditor:after-utility.ge-gutters"),n.canvas.find(".ge-gutters").removeClass("ge-gutters")}}}})(jQuery);
-//# sourceMappingURL=grideditor.gutters.min.js.map
+(()=>{var s=window.GridEditor;if(!s||typeof s.get!="function")throw new Error("grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, its locales and grideditor.jquery.js");function d(t,i){return t?Array.prototype.slice.call(t.querySelectorAll(i)):[]}function m(t,i){if(!t)return[];var e=d(t,i);return t.nodeType===1&&t.matches(i)&&e.unshift(t),e}function x(t,i){return h(i).forEach(function(e){t.classList.remove(e)}),t}function y(t,i,e){return h(i).forEach(function(f){e===void 0?t.classList.toggle(f):t.classList.toggle(f,!!e)}),t}function h(t){return String(t||"").split(/\s+/).filter(Boolean)}Object.assign(s.locales.en,{"utility.gutters":"Gutters","utility.gutters_x":"Horizontal gutters","utility.gutters_y":"Vertical gutters"});var p=["0","1","2","3","4","5"],T=["0",".25rem",".5rem","1rem","1.5rem","3rem"],C="1.5rem",L="0",E=["","sm","md","lg","xl","xxl"],S=/(?:^|\s)g[xy]?-(?:(?:sm|md|lg|xl|xxl)-)?[0-5](?:\s|$)/;s.utilities.gutters=function(t){var i=Object.assign({scale:T},t.settings.utilities.gutters),e=null;function f(r,n,o){for(var u=(r.getAttribute("class")||"").split(/\s+/),l=o;l>=0;l--)for(var a=p.length-1;a>=0;a--){var c=n+(E[l]?"-"+E[l]:"")+"-"+a;if(u.indexOf(c)!==-1)return{tier:l,value:a}}return null}function v(r,n,o){var u=t.breakpoints.indexOf(t.view()),l=[f(r,"g",u),f(r,n,u)].filter(Boolean).sort(function(a,c){return c.tier-a.tier||c.value-a.value})[0];return l?i.scale[l.value]:o}function g(r){return function(n,o){var u={};return r.indexOf("x")!==-1&&(u["--bs-gutter-x"]=v(o,"gx",C)),r.indexOf("y")!==-1&&(u["--bs-gutter-y"]=v(o,"gy",L)),u}}function w(r){var n=r.detail;n.family==="g"&&["gx","gy"].forEach(function(o){t.setUtility(n.node,o,null,{view:n.breakpoint,source:n.source})})}function b(r){m(r,".row").forEach(function(n){y(n,"ge-gutters",S.test(n.getAttribute("class")||""))})}return{families:[{name:"g",prefix:"g",values:p,appliesTo:["row"],labelKey:"utility.gutters",preview:g(["x","y"])},{name:"gx",prefix:"gx",values:p,appliesTo:["row"],labelKey:"utility.gutters_x",preview:g(["x"])},{name:"gy",prefix:"gy",values:p,appliesTo:["row"],labelKey:"utility.gutters_y",preview:g(["y"])}],onInit:function(){e&&t.canvas.removeEventListener("grideditor:after-utility",e),e=w,t.canvas.addEventListener("grideditor:after-utility",e)},onRefresh:b,onDeinit:function(){e&&t.canvas.removeEventListener("grideditor:after-utility",e),e=null,d(t.canvas,".ge-gutters").forEach(function(r){x(r,"ge-gutters")})}}};})();