@themarioga/grid-editor 8.0.0-beta.2 → 8.0.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;
@@ -437,6 +450,12 @@
        beside the content areas, and each of its panes is an ordinary region */
   /* A pane's own drawer is small and sits with its label rather than
        above it: a tab strip is a row of tabs, not a stack of them */
+  /* A tabs container laid out vertically from a breakpoint: Bootstrap's
+       classes answer to the window, and a breakpoint view narrows the canvas
+       instead, so the tabs plugin says which layout the view has and that is
+       what shows. The selectors outweigh Bootstrap's !important utilities.
+       Vertical, the container wraps, so its drawer is a line of its own
+       above the strip and the panes */
   /* The label is edited in place, so it needs to look like it can be */
   /* Open and closed while editing is what the page will ship, which is what
        data-ge-open says. Bootstrap's own collapse is not involved: its
@@ -477,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);
@@ -502,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;
@@ -522,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 {
@@ -639,6 +666,25 @@
 .ge-canvas.ge-editing .ge-tab .nav-link {
   padding-left: 4px;
 }
+.ge-canvas.ge-editing [data-ge-tabs-layout="vertical"] {
+  display: flex !important;
+  flex-wrap: wrap;
+  align-items: flex-start !important;
+}
+.ge-canvas.ge-editing [data-ge-tabs-layout="vertical"] > .ge-container-drawer {
+  flex-shrink: 0;
+}
+.ge-canvas.ge-editing [data-ge-tabs-layout="vertical"] > .nav {
+  flex-direction: column !important;
+  margin-right: 1rem !important;
+}
+.ge-canvas.ge-editing [data-ge-tabs-layout="horizontal"] {
+  display: block !important;
+}
+.ge-canvas.ge-editing [data-ge-tabs-layout="horizontal"] > .nav {
+  flex-direction: row !important;
+  margin-right: 0 !important;
+}
 .ge-canvas.ge-editing .ge-pane-label:hover {
   outline: 1px dotted #197550;
 }
@@ -4590,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.
@@ -4641,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
@@ -4688,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,16 +53,34 @@ 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 };
 
-/** The style plugin's settings. */
-export interface StyleOptions {
+/**
+ * A tabs container's variant: its strip's style, width and alignment, and
+ * whether it is laid out vertically - always, or from a breakpoint up.
+ */
+export interface TabsOptions {
+    variant?: 'tabs' | 'pills' | 'underline';
+    width?: 'natural' | 'fill' | 'justified';
+    /** Only with the natural width, and horizontal. */
+    align?: 'start' | 'center' | 'end';
+    vertical?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+}
+
+/** createContainer('tabs', …): how many tabs, their labels, and the variant. */
+export interface CreateTabsOptions extends Placement, TabsOptions {
+    tabs?: number;
+    labels?: string[];
+}
+
+/** 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. */
@@ -95,8 +113,10 @@ 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 };
     custom_filter?: CustomFilter | CustomFilter[] | '';
     valid_col_sizes?: ColumnSize[];
@@ -328,6 +348,7 @@ export declare class GridEditor {
     createText(options: CreateTextOptions): HTMLElement | null;
     createElement(content: string | Node | ArrayLike<Node>, options?: CreateElementOptions): HTMLElement | null;
     createSection(options?: CreateSectionOptions): HTMLElement | null;
+    createContainer(type: 'tabs', options?: CreateTabsOptions): HTMLElement | null;
     createContainer(type: string, options?: Placement & Record<string, unknown>): HTMLElement | null;
     addTab(container: Target, options?: PaneOptions): HTMLElement | null;
     addAccordionItem(container: Target, options?: PaneOptions): HTMLElement | null;

package/dist/grideditor.esm.js

@@ -2692,6 +2692,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 +2752,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 +2768,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 +4105,7 @@ GridEditor.t = translate;
 GridEditor._plainHtml = plainHtml;
 GridEditor.Sortable = null;
 GridEditor.bootstrap = null;
-GridEditor.version = false ? "dev" : "8.0.0-beta.2";
+GridEditor.version = false ? "dev" : "8.0.0";
 GridEditor.locales = {
   en: {
     "tool.move": "Move",
@@ -4130,6 +4135,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

@@ -2693,6 +2693,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 +2753,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 +2769,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 +4106,7 @@
   GridEditor._plainHtml = plainHtml;
   GridEditor.Sortable = null;
   GridEditor.bootstrap = null;
-  GridEditor.version = false ? "dev" : "8.0.0-beta.2";
+  GridEditor.version = false ? "dev" : "8.0.0";
   GridEditor.locales = {
     en: {
       "tool.move": "Move",
@@ -4131,6 +4136,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",