@themarioga/grid-editor 8.0.0-beta.3 → 8.1.0

package/dist/grideditor.css

@@ -194,6 +194,8 @@
    btn-outline-secondary - and this only lays them out. */
 .ge-details {
   font-size: 0.8125rem;
+  /* Each section's heading: the general fields, and what plugins add */
+  /* Every section after the first, set off from the one above */
   /* The utility plugins' fields, folded under one toggle */
 }
 .ge-details .ge-details-general {
@@ -201,6 +203,17 @@
   flex-direction: column;
   gap: 8px;
 }
+.ge-details .ge-section-title {
+  margin: 0 0 6px;
+  color: var(--bs-body-color, #333);
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+.ge-details .ge-panel-section,
+.ge-details .ge-utilities {
+  padding-top: 10px;
+  border-top: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
+}
 .ge-details .ge-field {
   display: flex;
   flex-direction: column;
@@ -222,7 +235,7 @@
 .ge-details .ge-utilities > .ge-utilities-toggle {
   display: block;
   color: var(--bs-body-color, #333);
-  font-weight: 500;
+  font-weight: 600;
   cursor: pointer;
   text-decoration: none;
 }
@@ -283,93 +296,93 @@
 .ge-details .ge-panel-section {
   margin-top: 10px;
 }
-/* The style plugin's accordion: in a panel, or in the dialog, which is
+/* The inline-style plugin's accordion: in a panel, or in the dialog, which is
    outside any panel, so it carries the look of the fields it shares. */
-.ge-style {
+.ge-inline-style {
   font-size: 0.8125rem;
 }
-.ge-style .accordion-button {
+.ge-inline-style .accordion-button {
   padding: 6px 10px;
   font-size: 0.8125rem;
   font-weight: 500;
 }
-.ge-style .accordion-body {
+.ge-inline-style .accordion-body {
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 8px 10px;
 }
-.ge-style .ge-style-label,
-.ge-style .ge-utility-label,
-.ge-style .ge-style-shadow-label {
+.ge-inline-style .ge-inline-style-label,
+.ge-inline-style .ge-utility-label,
+.ge-inline-style .ge-inline-style-shadow-label {
   color: var(--bs-secondary-color, #6c757d);
   font-size: 0.75rem;
 }
-.ge-style .ge-style-note,
-.ge-style .ge-utility-note,
-.ge-style .ge-spacing-gutter {
+.ge-inline-style .ge-inline-style-note,
+.ge-inline-style .ge-utility-note,
+.ge-inline-style .ge-spacing-gutter {
   color: var(--bs-secondary-color, #666);
   font-size: 0.6875rem;
 }
-.ge-style .ge-style-fields,
-.ge-style .ge-spacing {
+.ge-inline-style .ge-inline-style-fields,
+.ge-inline-style .ge-spacing {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
   gap: 8px 10px;
 }
-.ge-style .ge-style-field,
-.ge-style .ge-utility,
-.ge-style .ge-spacing-group {
+.ge-inline-style .ge-inline-style-field,
+.ge-inline-style .ge-utility,
+.ge-inline-style .ge-spacing-group {
   display: flex;
   flex-direction: column;
   gap: 2px;
   margin: 0;
 }
-.ge-style .ge-spacing-group .ge-utility > .ge-utility-label {
+.ge-inline-style .ge-spacing-group .ge-utility > .ge-utility-label {
   display: none;
 }
-.ge-style .ge-spacing-gutter {
+.ge-inline-style .ge-spacing-gutter {
   grid-column: 1 / -1;
 }
-.ge-style .ge-style-color .form-control-color {
+.ge-inline-style .ge-inline-style-color .form-control-color {
   flex: 0 0 2.25rem;
   padding: 2px;
 }
-.ge-style .ge-style-shadow,
-.ge-style .ge-style-field:has(.ge-style-shadow) {
+.ge-inline-style .ge-inline-style-shadow,
+.ge-inline-style .ge-inline-style-field:has(.ge-inline-style-shadow) {
   grid-column: 1 / -1;
 }
-.ge-style .ge-style-shadow-builder {
+.ge-inline-style .ge-inline-style-shadow-builder {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
   gap: 4px 8px;
   align-items: end;
 }
-.ge-style .ge-style-shadow-part {
+.ge-inline-style .ge-inline-style-shadow-part {
   display: flex;
   flex-direction: column;
   gap: 2px;
   margin: 0;
 }
-.ge-style .ge-style-shadow-color {
+.ge-inline-style .ge-inline-style-shadow-color {
   grid-column: span 2;
 }
-.ge-style .ge-style-shadow-mode {
+.ge-inline-style .ge-inline-style-shadow-mode {
   display: inline-block;
   margin-top: 2px;
   font-size: 0.6875rem;
 }
-.ge-style .ge-style-catalog {
+.ge-inline-style .ge-inline-style-catalog {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
-.ge-style .ge-style-chips {
+.ge-inline-style .ge-inline-style-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 3px;
 }
-.ge-style .ge-style-chip {
+.ge-inline-style .ge-inline-style-chip {
   --bs-btn-padding-y: 0;
   --bs-btn-padding-x: 6px;
   --bs-btn-font-size: 0.6875rem;
@@ -483,7 +496,6 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  background: blue;
   margin: 0 -5px 5px;
   display: block;
   width: calc(100% + 2 * 5px);
@@ -508,6 +520,10 @@
   border-top: 1px solid rgba(0, 0, 0, 0.05);
   text-align: left;
   cursor: auto;
+  /* The one line a drawer has room for needs no heading */
+}
+.ge-canvas.ge-editing .ge-tools-drawer > .ge-details > .ge-section-title {
+  display: none;
 }
 .ge-canvas.ge-editing .ge-tools-drawer > .ge-details .ge-details-general {
   flex-direction: row;
@@ -528,6 +544,11 @@
   margin-right: 0;
 }
 .ge-canvas.ge-editing .row > .ge-tools-drawer {
+  /* Bootstrap pads every child of a row by half its gutter, and
+               caps it at the row's width: the drawer is not a column */
+  padding-left: 0;
+  padding-right: 0;
+  max-width: none;
   background: #e5e5e5;
 }
 .ge-canvas.ge-editing .row > .ge-tools-drawer > a {
@@ -4615,7 +4636,7 @@
   margin-left: 91.66666667%;
 }
 /*
- * The style plugin's display. A node Bootstrap would hide is kept on the
+ * The inline-style plugin's display. A node Bootstrap would hide is kept on the
  * canvas - there would be nothing left to click to show it again - and shown
  * as it would be if it were not hidden, which data-ge-display says. The
  * selectors outweigh Bootstrap's d-* classes, which are !important too.
@@ -4666,7 +4687,7 @@
   pointer-events: none;
 }
 /*
- * The style plugin's drawer on a flex or grid node: out of the flow, on top
+ * The inline-style plugin's drawer on a flex or grid node: out of the flow, on top
  * and as wide as the node, over a transparent top border as tall as it is.
  * The border's width comes with the node's data-ge-drawer-out, from a rule
  * per height the plugin writes. The selectors outweigh Bootstrap's border
@@ -4713,10 +4734,6 @@
 .ge-canvas.ge-editing .row.ge-gutters > .ge-tools-drawer {
   margin-top: 0;
   margin-bottom: calc(5px - var(--bs-gutter-y));
-  /* Bootstrap pads every child of a row by half its gutter, the drawer
-           too; it keeps the padding a row with no gutter class gives it */
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
 }
 .ge-canvas.ge-editing .row.ge-gutters > .column {
   padding-left: calc(var(--bs-gutter-x) * 0.5);

package/dist/grideditor.d.ts

@@ -53,11 +53,11 @@ export interface PresetClass {
 }
 
 /** A content filter: run on init and deinit with the canvas. A string names a function on window. */
-/** A section of the style plugin's accordion. */
-export type StyleSectionKey = 'size' | 'spacing' | 'border' | 'background' | 'text' | 'typography' | 'display' | 'flex' | 'position' | 'custom';
+/** A section of the inline-style plugin's accordion. */
+export type InlineStyleSectionKey = 'size' | 'spacing' | 'border' | 'background' | 'text' | 'typography' | 'display' | 'flex' | 'position' | 'custom';
 
 /** A section on or off, or on with some of its properties and without its catalog. */
-export type StyleSection = boolean | { properties?: string[]; catalog?: boolean };
+export type InlineStyleSection = boolean | { properties?: string[]; catalog?: boolean };
 
 /**
  * A tabs container's variant: its strip's style, width and alignment, and
@@ -77,10 +77,10 @@ export interface CreateTabsOptions extends Placement, TabsOptions {
     labels?: string[];
 }
 
-/** The style plugin's settings. */
-export interface StyleOptions {
+/** The inline-style plugin's settings. */
+export interface InlineStyleOptions {
     /** Every section is on unless it is turned off here. */
-    sections?: Partial<Record<StyleSectionKey, StyleSection>>;
+    sections?: Partial<Record<InlineStyleSectionKey, InlineStyleSection>>;
     /** The spacing section: the values offered, and what 0 to 5 come to - for the gaps too. */
     spacing?: { values?: string[]; scale?: string[] };
     /** The eye that hides and shows a node, the display family's: false leaves it out of the drawers. */
@@ -113,8 +113,8 @@ export interface GridEditorOptions {
     content_types?: string[];
     row_cols?: boolean;
     utilities?: Record<string, unknown>;
-    /** The style plugin's sections, and the options of the utilities it carries. */
-    style?: StyleOptions;
+    /** The inline-style plugin's sections, and the options of the utilities it carries. */
+    inline_style?: InlineStyleOptions;
     /** The tabs plugin: the variant of the tabs containers made new. */
     tabs?: TabsOptions;
     elements?: { enabled?: boolean | 'auto'; selector?: string; auto?: boolean };
@@ -124,7 +124,10 @@ export interface GridEditorOptions {
     add_column?: { size?: ColumnSize | null; picker?: boolean; delay?: number };
     layout_modes?: View[];
     default_view?: View;
-    resize?: { enabled?: boolean; handles?: string; balance?: 'next' | false };
+    /** enabled is the handle on the column's edge, tools the narrower and wider tools in its drawer. */
+    resize?: { enabled?: boolean; tools?: boolean; handles?: string; balance?: 'next' | false };
+    /** tools is the indent tools in a column's drawer. */
+    indent?: { tools?: boolean };
     /** A textarea whose html the canvas starts with. */
     source_textarea?: Target | '';
     edit_source?: boolean;

package/dist/grideditor.esm.js

@@ -395,11 +395,18 @@ var NESTED_SETTINGS = {
   },
   resize: {
     enabled: true,
+    // The handle on the column's edge
+    tools: true,
+    // The narrower and wider tools in the column's drawer
     handles: "e",
     // Which edges carry a handle: 'e', 'w', or 'e, w'
     balance: "next"
     // 'next' takes the units out of the following column
   },
+  indent: {
+    tools: true
+    // The indent tools in the column's drawer
+  },
   drag: {
     delay: 0,
     // Milliseconds to hold before a drag starts
@@ -595,6 +602,8 @@ function build(instance, baseElem, optionsOrMethod) {
     "default_view": ALL_VIEW,
     "resize": NESTED_SETTINGS.resize,
     // Resizing a column by dragging its edge
+    "indent": NESTED_SETTINGS.indent,
+    // Indenting a column, offset-*
     "source_textarea": "",
     "edit_source": true,
     // The toolbar's button to edit the canvas as html
@@ -2529,30 +2538,34 @@ function build(instance, baseElem, optionsOrMethod) {
       }
       var drawer = prependDrawer(col, "ge-tools-drawer");
       createMoveTool(drawer);
-      createTool(drawer, t("tool.column_narrower"), "ge-decrease-col-width", "bi bi-dash-lg", function(e) {
-        resizeColumn(
-          col,
-          e.shiftKey ? smallest(settings.valid_col_sizes) : stepThrough(settings.valid_col_sizes.filter(isUnits), currentUnits(col), -1),
-          "tool"
-        );
-      });
-      createTool(drawer, t("tool.column_wider"), "ge-increase-col-width", "bi bi-plus-lg", function(e) {
-        resizeColumn(
-          col,
-          e.shiftKey ? widestFor(col) : stepThrough(settings.valid_col_sizes.filter(isUnits), currentUnits(col), 1),
-          "tool"
-        );
-      });
-      createTool(drawer, t("tool.indent_decrease"), "ge-decrease-col-offset", "bi bi-text-indent-right", function(e) {
-        indentColumn(
-          col,
-          e.shiftKey ? smallest(settings.valid_col_offsets) : stepThrough(settings.valid_col_offsets, currentOffset(col), -1),
-          "tool"
-        );
-      });
-      createTool(drawer, t("tool.indent_increase"), "ge-increase-col-offset", "bi bi-text-indent-left", function(e) {
-        indentColumn(col, e.shiftKey ? deepestFor(col) : stepThrough(settings.valid_col_offsets, currentOffset(col), 1), "tool");
-      });
+      if (settings.resize.tools !== false) {
+        createTool(drawer, t("tool.column_narrower"), "ge-decrease-col-width", "bi bi-dash-lg", function(e) {
+          resizeColumn(
+            col,
+            e.shiftKey ? smallest(settings.valid_col_sizes) : stepThrough(settings.valid_col_sizes.filter(isUnits), currentUnits(col), -1),
+            "tool"
+          );
+        });
+        createTool(drawer, t("tool.column_wider"), "ge-increase-col-width", "bi bi-plus-lg", function(e) {
+          resizeColumn(
+            col,
+            e.shiftKey ? widestFor(col) : stepThrough(settings.valid_col_sizes.filter(isUnits), currentUnits(col), 1),
+            "tool"
+          );
+        });
+      }
+      if (settings.indent.tools !== false) {
+        createTool(drawer, t("tool.indent_decrease"), "ge-decrease-col-offset", "bi bi-text-indent-right", function(e) {
+          indentColumn(
+            col,
+            e.shiftKey ? smallest(settings.valid_col_offsets) : stepThrough(settings.valid_col_offsets, currentOffset(col), -1),
+            "tool"
+          );
+        });
+        createTool(drawer, t("tool.indent_increase"), "ge-increase-col-offset", "bi bi-text-indent-left", function(e) {
+          indentColumn(col, e.shiftKey ? deepestFor(col) : stepThrough(settings.valid_col_offsets, currentOffset(col), 1), "tool");
+        });
+      }
       addSettingsTool(drawer, col, settings.col_classes);
       hostTools(drawer, settings.col_tools);
       createTool(drawer, t("tool.delete_column"), "ge-delete-column", "bi bi-trash", function() {
@@ -2692,6 +2705,7 @@ function build(instance, baseElem, optionsOrMethod) {
   }
   function createDetails(container, cssClasses) {
     var detailsDiv = element("div", { "class": "ge-details" });
+    detailsDiv.appendChild(sectionTitle(t("panel.section_general")));
     var general = detailsDiv.appendChild(element("div", { "class": "ge-details-general" }));
     var field = function(label) {
       var holder = element("label", { "class": "ge-field" });
@@ -2751,6 +2765,9 @@ function build(instance, baseElem, optionsOrMethod) {
     }
     return detailsDiv;
   }
+  function sectionTitle(text) {
+    return element("h6", { "class": "ge-section-title" }, text);
+  }
   function pluginSections(node) {
     var kind = kindOf(node);
     var mode = panelMode();
@@ -2764,6 +2781,7 @@ function build(instance, baseElem, optionsOrMethod) {
         }
         var holder = element("div", { "class": "ge-panel-section", "data-ge-plugin": name });
         if (mode === "offcanvas" || mode === "modal") {
+          holder.appendChild(sectionTitle(t(section.labelKey)));
           holder.appendChild(section.body);
         } else {
           var label = t(section.labelKey);
@@ -4100,7 +4118,7 @@ GridEditor.t = translate;
 GridEditor._plainHtml = plainHtml;
 GridEditor.Sortable = null;
 GridEditor.bootstrap = null;
-GridEditor.version = false ? "dev" : "8.0.0-beta.3";
+GridEditor.version = false ? "dev" : "8.1.0";
 GridEditor.locales = {
   en: {
     "tool.move": "Move",
@@ -4130,6 +4148,7 @@ GridEditor.locales = {
     "panel.done": "Done",
     "panel.id": "Id",
     "panel.classes": "Classes",
+    "panel.section_general": "Id and classes",
     "panel.kind_row": "Row",
     "panel.kind_column": "Column",
     "panel.kind_element": "Element",

package/dist/grideditor.js

@@ -396,11 +396,18 @@
     },
     resize: {
       enabled: true,
+      // The handle on the column's edge
+      tools: true,
+      // The narrower and wider tools in the column's drawer
       handles: "e",
       // Which edges carry a handle: 'e', 'w', or 'e, w'
       balance: "next"
       // 'next' takes the units out of the following column
     },
+    indent: {
+      tools: true
+      // The indent tools in the column's drawer
+    },
     drag: {
       delay: 0,
       // Milliseconds to hold before a drag starts
@@ -596,6 +603,8 @@
       "default_view": ALL_VIEW,
       "resize": NESTED_SETTINGS.resize,
       // Resizing a column by dragging its edge
+      "indent": NESTED_SETTINGS.indent,
+      // Indenting a column, offset-*
       "source_textarea": "",
       "edit_source": true,
       // The toolbar's button to edit the canvas as html
@@ -2530,30 +2539,34 @@
         }
         var drawer = prependDrawer(col, "ge-tools-drawer");
         createMoveTool(drawer);
-        createTool(drawer, t("tool.column_narrower"), "ge-decrease-col-width", "bi bi-dash-lg", function(e) {
-          resizeColumn(
-            col,
-            e.shiftKey ? smallest(settings.valid_col_sizes) : stepThrough(settings.valid_col_sizes.filter(isUnits), currentUnits(col), -1),
-            "tool"
-          );
-        });
-        createTool(drawer, t("tool.column_wider"), "ge-increase-col-width", "bi bi-plus-lg", function(e) {
-          resizeColumn(
-            col,
-            e.shiftKey ? widestFor(col) : stepThrough(settings.valid_col_sizes.filter(isUnits), currentUnits(col), 1),
-            "tool"
-          );
-        });
-        createTool(drawer, t("tool.indent_decrease"), "ge-decrease-col-offset", "bi bi-text-indent-right", function(e) {
-          indentColumn(
-            col,
-            e.shiftKey ? smallest(settings.valid_col_offsets) : stepThrough(settings.valid_col_offsets, currentOffset(col), -1),
-            "tool"
-          );
-        });
-        createTool(drawer, t("tool.indent_increase"), "ge-increase-col-offset", "bi bi-text-indent-left", function(e) {
-          indentColumn(col, e.shiftKey ? deepestFor(col) : stepThrough(settings.valid_col_offsets, currentOffset(col), 1), "tool");
-        });
+        if (settings.resize.tools !== false) {
+          createTool(drawer, t("tool.column_narrower"), "ge-decrease-col-width", "bi bi-dash-lg", function(e) {
+            resizeColumn(
+              col,
+              e.shiftKey ? smallest(settings.valid_col_sizes) : stepThrough(settings.valid_col_sizes.filter(isUnits), currentUnits(col), -1),
+              "tool"
+            );
+          });
+          createTool(drawer, t("tool.column_wider"), "ge-increase-col-width", "bi bi-plus-lg", function(e) {
+            resizeColumn(
+              col,
+              e.shiftKey ? widestFor(col) : stepThrough(settings.valid_col_sizes.filter(isUnits), currentUnits(col), 1),
+              "tool"
+            );
+          });
+        }
+        if (settings.indent.tools !== false) {
+          createTool(drawer, t("tool.indent_decrease"), "ge-decrease-col-offset", "bi bi-text-indent-right", function(e) {
+            indentColumn(
+              col,
+              e.shiftKey ? smallest(settings.valid_col_offsets) : stepThrough(settings.valid_col_offsets, currentOffset(col), -1),
+              "tool"
+            );
+          });
+          createTool(drawer, t("tool.indent_increase"), "ge-increase-col-offset", "bi bi-text-indent-left", function(e) {
+            indentColumn(col, e.shiftKey ? deepestFor(col) : stepThrough(settings.valid_col_offsets, currentOffset(col), 1), "tool");
+          });
+        }
         addSettingsTool(drawer, col, settings.col_classes);
         hostTools(drawer, settings.col_tools);
         createTool(drawer, t("tool.delete_column"), "ge-delete-column", "bi bi-trash", function() {
@@ -2693,6 +2706,7 @@
     }
     function createDetails(container, cssClasses) {
       var detailsDiv = element("div", { "class": "ge-details" });
+      detailsDiv.appendChild(sectionTitle(t("panel.section_general")));
       var general = detailsDiv.appendChild(element("div", { "class": "ge-details-general" }));
       var field = function(label) {
         var holder = element("label", { "class": "ge-field" });
@@ -2752,6 +2766,9 @@
       }
       return detailsDiv;
     }
+    function sectionTitle(text) {
+      return element("h6", { "class": "ge-section-title" }, text);
+    }
     function pluginSections(node) {
       var kind = kindOf(node);
       var mode = panelMode();
@@ -2765,6 +2782,7 @@
           }
           var holder = element("div", { "class": "ge-panel-section", "data-ge-plugin": name });
           if (mode === "offcanvas" || mode === "modal") {
+            holder.appendChild(sectionTitle(t(section.labelKey)));
             holder.appendChild(section.body);
           } else {
             var label = t(section.labelKey);
@@ -4101,7 +4119,7 @@
   GridEditor._plainHtml = plainHtml;
   GridEditor.Sortable = null;
   GridEditor.bootstrap = null;
-  GridEditor.version = false ? "dev" : "8.0.0-beta.3";
+  GridEditor.version = false ? "dev" : "8.1.0";
   GridEditor.locales = {
     en: {
       "tool.move": "Move",
@@ -4131,6 +4149,7 @@
       "panel.done": "Done",
       "panel.id": "Id",
       "panel.classes": "Classes",
+      "panel.section_general": "Id and classes",
       "panel.kind_row": "Row",
       "panel.kind_column": "Column",
       "panel.kind_element": "Element",