@themarioga/grid-editor 8.0.0-beta.2 → 8.0.0

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

@@ -8,6 +8,16 @@ function all(root, selector) {
 function one(root, selector) {
   return root ? root.querySelector(selector) : null;
 }
+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 children(node, selector) {
   if (!node) {
     return [];
@@ -60,6 +70,12 @@ function hasClass(node, name) {
 function split(names) {
   return String(names || "").split(/\s+/).filter(Boolean);
 }
+function dropEmptyClass(node) {
+  if (!node.getAttribute("class")) {
+    node.removeAttribute("class");
+  }
+  return node;
+}
 function hide(node) {
   node.style.display = "none";
   return node;
@@ -106,12 +122,238 @@ Object.assign(GridEditor.locales.en, {
   "container.add_tabs": "Tabs",
   "container.add_tab": "Add tab",
   "container.tab_label": "Tab {number}",
-  "confirm.delete_tab": "Delete this tab and everything in it?"
+  "confirm.delete_tab": "Delete this tab and everything in it?",
+  "container.tabs_section": "Tabs",
+  "container.tabs_style": "Style",
+  "container.tabs_style_tabs": "Tabs",
+  "container.tabs_style_pills": "Pills",
+  "container.tabs_style_underline": "Underline",
+  "container.tabs_width": "Width",
+  "container.tabs_width_natural": "Natural",
+  "container.tabs_width_fill": "Fill",
+  "container.tabs_width_justified": "Justified",
+  "container.tabs_align": "Alignment",
+  "container.tabs_align_start": "Start",
+  "container.tabs_align_center": "Center",
+  "container.tabs_align_end": "End",
+  "container.tabs_layout": "Layout",
+  "container.tabs_layout_horizontal": "Horizontal",
+  "container.tabs_layout_vertical": "Vertical",
+  "container.tabs_layout_vertical_from": "Vertical from {breakpoint}"
 });
+var STYLES = { tabs: "nav-tabs", pills: "nav-pills", underline: "nav-underline" };
+var WIDTHS = { natural: null, fill: "nav-fill", justified: "nav-justified" };
+var ALIGNS = { start: null, center: "justify-content-center", end: "justify-content-end" };
+var DEFAULTS = { variant: "tabs", width: "natural", align: "start", vertical: false };
+var FIELDS = {
+  variant: { labelKey: "container.tabs_style", choices: [
+    { value: "tabs", labelKey: "container.tabs_style_tabs" },
+    { value: "pills", labelKey: "container.tabs_style_pills" },
+    { value: "underline", labelKey: "container.tabs_style_underline" }
+  ] },
+  width: { labelKey: "container.tabs_width", choices: [
+    { value: "natural", labelKey: "container.tabs_width_natural" },
+    { value: "fill", labelKey: "container.tabs_width_fill" },
+    { value: "justified", labelKey: "container.tabs_width_justified" }
+  ] },
+  align: { labelKey: "container.tabs_align", choices: [
+    { value: "start", labelKey: "container.tabs_align_start" },
+    { value: "center", labelKey: "container.tabs_align_center" },
+    { value: "end", labelKey: "container.tabs_align_end" }
+  ] },
+  vertical: { labelKey: "container.tabs_layout" }
+};
+var fieldCounter = 0;
+var LAYOUT_ATTR = "data-ge-tabs-layout";
+function classValues(map) {
+  return Object.keys(map).map(function(key) {
+    return map[key];
+  }).filter(Boolean);
+}
 GridEditor.containers.tabs = function(ge) {
+  var sections = [];
+  function stripOf(container) {
+    return child(container, ".nav");
+  }
+  function fromBreakpoints() {
+    return ge.breakpoints.slice(1);
+  }
+  function infix(vertical) {
+    return vertical === true ? "" : "-" + vertical;
+  }
+  function verticalClasses(vertical) {
+    var at = infix(vertical);
+    return {
+      container: ["d" + at + "-flex", "align-items" + at + "-start"],
+      strip: ["flex" + at + "-column", "me" + at + "-3"]
+    };
+  }
+  function verticals() {
+    return [true].concat(fromBreakpoints());
+  }
+  function read(container) {
+    var strip = stripOf(container);
+    var has = function(node, name) {
+      return !!node && hasClass(node, name);
+    };
+    var found = function(map, fallback) {
+      return Object.keys(map).filter(function(key) {
+        return map[key] && has(strip, map[key]);
+      })[0] || fallback;
+    };
+    var vertical = verticals().filter(function(each) {
+      var classes = verticalClasses(each);
+      return has(container, classes.container[0]) && has(strip, classes.strip[0]);
+    })[0];
+    return {
+      variant: found(STYLES, "tabs"),
+      width: found(WIDTHS, "natural"),
+      align: found(ALIGNS, "start"),
+      vertical: vertical === void 0 ? false : vertical
+    };
+  }
+  function write(container, key, value) {
+    var strip = stripOf(container);
+    if (!strip) {
+      return;
+    }
+    if (key === "variant") {
+      removeClass(strip, classValues(STYLES).join(" "));
+      addClass(strip, STYLES[value]);
+    }
+    if (key === "width" || key === "vertical") {
+      removeClass(strip, classValues(WIDTHS).join(" "));
+      if (key === "width" && WIDTHS[value]) {
+        addClass(strip, WIDTHS[value]);
+      }
+    }
+    if (key === "align" || key === "vertical" || key === "width" && value !== "natural") {
+      removeClass(strip, classValues(ALIGNS).join(" "));
+      if (key === "align" && ALIGNS[value]) {
+        addClass(strip, ALIGNS[value]);
+      }
+    }
+    if (key === "vertical") {
+      verticals().forEach(function(each) {
+        var classes = verticalClasses(each);
+        removeClass(container, classes.container.join(" "));
+        removeClass(strip, classes.strip.join(" "));
+      });
+      strip.removeAttribute("aria-orientation");
+      if (value !== false) {
+        var layout = verticalClasses(value);
+        addClass(container, layout.container.join(" "));
+        addClass(strip, layout.strip.join(" "));
+        strip.setAttribute("aria-orientation", "vertical");
+      }
+    }
+    dropEmptyClass(container);
+  }
+  function valuesOf(key) {
+    if (key === "variant") {
+      return Object.keys(STYLES);
+    }
+    if (key === "width") {
+      return Object.keys(WIDTHS);
+    }
+    if (key === "align") {
+      return Object.keys(ALIGNS);
+    }
+    return [false].concat(verticals());
+  }
+  function chosen(options, key) {
+    var setting = ge.settings.tabs || {};
+    var value = options[key] !== void 0 ? options[key] : setting[key];
+    if (value === void 0) {
+      return DEFAULTS[key];
+    }
+    if (valuesOf(key).indexOf(value) !== -1) {
+      return value;
+    }
+    ge.warn("tabs: " + JSON.stringify(value) + " is not a " + key + ", which takes " + JSON.stringify(valuesOf(key)) + ": " + JSON.stringify(DEFAULTS[key]) + " is used");
+    return DEFAULTS[key];
+  }
+  function layoutHere(container) {
+    var vertical = read(container).vertical;
+    if (vertical === false) {
+      return null;
+    }
+    if (ge.view() === "all") {
+      container.removeAttribute(LAYOUT_ATTR);
+      return /flex$/.test(getComputedStyle(container).display) ? "vertical" : "horizontal";
+    }
+    if (vertical === true) {
+      return "vertical";
+    }
+    return ge.breakpoints.indexOf(ge.view()) >= ge.breakpoints.indexOf(vertical) ? "vertical" : "horizontal";
+  }
+  function markLayout(container) {
+    var layout = layoutHere(container);
+    if (layout) {
+      container.setAttribute(LAYOUT_ATTR, layout);
+    } else {
+      container.removeAttribute(LAYOUT_ATTR);
+    }
+  }
+  function select(labelKey, options, onChange) {
+    var box = element("div", { "class": "ge-tabs-variant" });
+    var id = "ge-tabs-variant-" + ++fieldCounter;
+    box.appendChild(element("label", { "class": "form-label", "for": id }, ge.t(labelKey)));
+    var field = box.appendChild(element("select", { "class": "form-select form-select-sm", id }));
+    options.forEach(function(option) {
+      field.appendChild(element("option", { value: option.value }, option.label));
+    });
+    field.addEventListener("change", function() {
+      onChange(field.value);
+    });
+    return { box, field };
+  }
+  function createSection(container) {
+    var body = element("div", { "class": "ge-tabs-variants" });
+    var fields = {};
+    function change(key, value) {
+      write(container, key, value);
+      markLayout(container);
+      render();
+    }
+    function options(key) {
+      return FIELDS[key].choices.map(function(choice) {
+        return { value: choice.value, label: ge.t(choice.labelKey) };
+      });
+    }
+    ["variant", "width", "align"].forEach(function(key) {
+      fields[key] = select(FIELDS[key].labelKey, options(key), function(value) {
+        change(key, value);
+      });
+    });
+    fields.vertical = select(FIELDS.vertical.labelKey, [
+      { value: "false", label: ge.t("container.tabs_layout_horizontal") },
+      { value: "true", label: ge.t("container.tabs_layout_vertical") }
+    ].concat(fromBreakpoints().map(function(key) {
+      return { value: key, label: ge.t("container.tabs_layout_vertical_from", { breakpoint: key }) };
+    })), function(value) {
+      change("vertical", value === "true" ? true : value === "false" ? false : value);
+    });
+    ["variant", "width", "align", "vertical"].forEach(function(key) {
+      fields[key].box.setAttribute("data-ge-tabs-variant", key);
+      body.appendChild(fields[key].box);
+    });
+    function render() {
+      var values = read(container);
+      fields.variant.field.value = values.variant;
+      fields.width.field.value = values.width;
+      fields.align.field.value = values.align;
+      fields.vertical.field.value = String(values.vertical);
+      fields.width.field.disabled = values.vertical !== false;
+      fields.align.field.disabled = values.vertical !== false || values.width !== "natural";
+    }
+    render();
+    sections.push({ container, element: body, render });
+    return body;
+  }
   function addTabTo(container, options) {
     options = options || {};
-    var strip = one(container, ":scope > .nav-tabs");
+    var strip = stripOf(container);
     var content = one(container, ":scope > .tab-content");
     var id = ge.containerId("tab");
     var number = children(strip, ".nav-item").length + 1;
@@ -147,7 +389,7 @@ GridEditor.containers.tabs = function(ge) {
       removeClass(each, "show active");
     });
     addClass(pane, "show active");
-    all(container, ":scope > .nav-tabs .nav-link").forEach(function(button) {
+    all(stripOf(container) || container, ".nav-link").forEach(function(button) {
       var active = button.getAttribute("data-bs-target") === "#" + id;
       toggleClass(button, "active", active);
       button.setAttribute("aria-selected", active ? "true" : "false");
@@ -163,7 +405,7 @@ GridEditor.containers.tabs = function(ge) {
     // A tab strip sorts its own tabs, and the panes follow them. No
     // group: a tab belongs to the strip it was made in.
     onSortable: function(sortable) {
-      sortable(all(ge.canvas, ".ge-container-tabs > .nav-tabs"), {
+      sortable(all(ge.canvas, ".ge-container-tabs").map(stripOf).filter(Boolean), {
         draggable: ".ge-tab"
       });
     },
@@ -175,6 +417,9 @@ GridEditor.containers.tabs = function(ge) {
       var count = options.tabs || labels.length || 2;
       container.appendChild(element("ul", { "class": "nav nav-tabs", role: "tablist" }));
       container.appendChild(element("div", { "class": "tab-content" }));
+      ["variant", "width", "align", "vertical"].forEach(function(key) {
+        write(container, key, chosen(options, key));
+      });
       for (var i = 0; i < count; i++) {
         addTabTo(container, { label: labels[i] });
       }
@@ -185,7 +430,7 @@ GridEditor.containers.tabs = function(ge) {
       all(container, ":scope > .tab-content > .tab-pane").forEach(function(pane) {
         addClass(pane, "ge-tab-pane");
       });
-      all(container, ":scope > .nav-tabs > .nav-item").forEach(function(tab) {
+      children(stripOf(container) || container, ".nav-item").forEach(function(tab) {
         addClass(tab, "ge-tab");
         var link = one(tab, ".nav-link");
         if (link) {
@@ -218,15 +463,38 @@ GridEditor.containers.tabs = function(ge) {
     },
     unmark: function(container) {
       ge.resumeToggles(container);
+      container.removeAttribute(LAYOUT_ATTR);
       all(container, ".ge-tab-pane").forEach(function(pane) {
         removeClass(pane, "ge-tab-pane");
       });
       ge.unwrapLabels(container);
     },
+    panelSection: function(node, kind) {
+      if (kind !== "tabs" || !stripOf(node)) {
+        return null;
+      }
+      return { labelKey: "container.tabs_section", body: createSection(node) };
+    },
+    // After a view change or a change of classes: the layout marks and the
+    // sections follow
+    onRefresh: function(scope) {
+      selfAndAll(scope, '[data-ge-container="tabs"]').forEach(markLayout);
+      sections = sections.filter(function(entry) {
+        return entry.element.isConnected;
+      });
+      sections.forEach(function(entry) {
+        if (entry.container === scope || scope.contains(entry.container)) {
+          entry.render();
+        }
+      });
+    },
+    onDeinit: function() {
+      sections = [];
+    },
     /** Panes read in tab order, whatever order they were dropped in. */
     afterPaneMove: function(container) {
       var content = one(container, ":scope > .tab-content");
-      all(container, ":scope > .nav-tabs > .nav-item").forEach(function(tab) {
+      children(stripOf(container) || container, ".nav-item").forEach(function(tab) {
         var pane = paneOf(container, tab);
         if (pane) {
           content.appendChild(pane);

package/dist/plugins/grideditor.tabs.js

@@ -12,6 +12,16 @@
   function one(root, selector) {
     return root ? root.querySelector(selector) : null;
   }
+  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 children(node, selector) {
     if (!node) {
       return [];
@@ -64,6 +74,12 @@
   function split(names) {
     return String(names || "").split(/\s+/).filter(Boolean);
   }
+  function dropEmptyClass(node) {
+    if (!node.getAttribute("class")) {
+      node.removeAttribute("class");
+    }
+    return node;
+  }
   function hide(node) {
     node.style.display = "none";
     return node;
@@ -110,12 +126,238 @@
     "container.add_tabs": "Tabs",
     "container.add_tab": "Add tab",
     "container.tab_label": "Tab {number}",
-    "confirm.delete_tab": "Delete this tab and everything in it?"
+    "confirm.delete_tab": "Delete this tab and everything in it?",
+    "container.tabs_section": "Tabs",
+    "container.tabs_style": "Style",
+    "container.tabs_style_tabs": "Tabs",
+    "container.tabs_style_pills": "Pills",
+    "container.tabs_style_underline": "Underline",
+    "container.tabs_width": "Width",
+    "container.tabs_width_natural": "Natural",
+    "container.tabs_width_fill": "Fill",
+    "container.tabs_width_justified": "Justified",
+    "container.tabs_align": "Alignment",
+    "container.tabs_align_start": "Start",
+    "container.tabs_align_center": "Center",
+    "container.tabs_align_end": "End",
+    "container.tabs_layout": "Layout",
+    "container.tabs_layout_horizontal": "Horizontal",
+    "container.tabs_layout_vertical": "Vertical",
+    "container.tabs_layout_vertical_from": "Vertical from {breakpoint}"
   });
+  var STYLES = { tabs: "nav-tabs", pills: "nav-pills", underline: "nav-underline" };
+  var WIDTHS = { natural: null, fill: "nav-fill", justified: "nav-justified" };
+  var ALIGNS = { start: null, center: "justify-content-center", end: "justify-content-end" };
+  var DEFAULTS = { variant: "tabs", width: "natural", align: "start", vertical: false };
+  var FIELDS = {
+    variant: { labelKey: "container.tabs_style", choices: [
+      { value: "tabs", labelKey: "container.tabs_style_tabs" },
+      { value: "pills", labelKey: "container.tabs_style_pills" },
+      { value: "underline", labelKey: "container.tabs_style_underline" }
+    ] },
+    width: { labelKey: "container.tabs_width", choices: [
+      { value: "natural", labelKey: "container.tabs_width_natural" },
+      { value: "fill", labelKey: "container.tabs_width_fill" },
+      { value: "justified", labelKey: "container.tabs_width_justified" }
+    ] },
+    align: { labelKey: "container.tabs_align", choices: [
+      { value: "start", labelKey: "container.tabs_align_start" },
+      { value: "center", labelKey: "container.tabs_align_center" },
+      { value: "end", labelKey: "container.tabs_align_end" }
+    ] },
+    vertical: { labelKey: "container.tabs_layout" }
+  };
+  var fieldCounter = 0;
+  var LAYOUT_ATTR = "data-ge-tabs-layout";
+  function classValues(map) {
+    return Object.keys(map).map(function(key) {
+      return map[key];
+    }).filter(Boolean);
+  }
   GridEditor.containers.tabs = function(ge) {
+    var sections = [];
+    function stripOf(container) {
+      return child(container, ".nav");
+    }
+    function fromBreakpoints() {
+      return ge.breakpoints.slice(1);
+    }
+    function infix(vertical) {
+      return vertical === true ? "" : "-" + vertical;
+    }
+    function verticalClasses(vertical) {
+      var at = infix(vertical);
+      return {
+        container: ["d" + at + "-flex", "align-items" + at + "-start"],
+        strip: ["flex" + at + "-column", "me" + at + "-3"]
+      };
+    }
+    function verticals() {
+      return [true].concat(fromBreakpoints());
+    }
+    function read(container) {
+      var strip = stripOf(container);
+      var has = function(node, name) {
+        return !!node && hasClass(node, name);
+      };
+      var found = function(map, fallback) {
+        return Object.keys(map).filter(function(key) {
+          return map[key] && has(strip, map[key]);
+        })[0] || fallback;
+      };
+      var vertical = verticals().filter(function(each) {
+        var classes = verticalClasses(each);
+        return has(container, classes.container[0]) && has(strip, classes.strip[0]);
+      })[0];
+      return {
+        variant: found(STYLES, "tabs"),
+        width: found(WIDTHS, "natural"),
+        align: found(ALIGNS, "start"),
+        vertical: vertical === void 0 ? false : vertical
+      };
+    }
+    function write(container, key, value) {
+      var strip = stripOf(container);
+      if (!strip) {
+        return;
+      }
+      if (key === "variant") {
+        removeClass(strip, classValues(STYLES).join(" "));
+        addClass(strip, STYLES[value]);
+      }
+      if (key === "width" || key === "vertical") {
+        removeClass(strip, classValues(WIDTHS).join(" "));
+        if (key === "width" && WIDTHS[value]) {
+          addClass(strip, WIDTHS[value]);
+        }
+      }
+      if (key === "align" || key === "vertical" || key === "width" && value !== "natural") {
+        removeClass(strip, classValues(ALIGNS).join(" "));
+        if (key === "align" && ALIGNS[value]) {
+          addClass(strip, ALIGNS[value]);
+        }
+      }
+      if (key === "vertical") {
+        verticals().forEach(function(each) {
+          var classes = verticalClasses(each);
+          removeClass(container, classes.container.join(" "));
+          removeClass(strip, classes.strip.join(" "));
+        });
+        strip.removeAttribute("aria-orientation");
+        if (value !== false) {
+          var layout = verticalClasses(value);
+          addClass(container, layout.container.join(" "));
+          addClass(strip, layout.strip.join(" "));
+          strip.setAttribute("aria-orientation", "vertical");
+        }
+      }
+      dropEmptyClass(container);
+    }
+    function valuesOf(key) {
+      if (key === "variant") {
+        return Object.keys(STYLES);
+      }
+      if (key === "width") {
+        return Object.keys(WIDTHS);
+      }
+      if (key === "align") {
+        return Object.keys(ALIGNS);
+      }
+      return [false].concat(verticals());
+    }
+    function chosen(options, key) {
+      var setting = ge.settings.tabs || {};
+      var value = options[key] !== void 0 ? options[key] : setting[key];
+      if (value === void 0) {
+        return DEFAULTS[key];
+      }
+      if (valuesOf(key).indexOf(value) !== -1) {
+        return value;
+      }
+      ge.warn("tabs: " + JSON.stringify(value) + " is not a " + key + ", which takes " + JSON.stringify(valuesOf(key)) + ": " + JSON.stringify(DEFAULTS[key]) + " is used");
+      return DEFAULTS[key];
+    }
+    function layoutHere(container) {
+      var vertical = read(container).vertical;
+      if (vertical === false) {
+        return null;
+      }
+      if (ge.view() === "all") {
+        container.removeAttribute(LAYOUT_ATTR);
+        return /flex$/.test(getComputedStyle(container).display) ? "vertical" : "horizontal";
+      }
+      if (vertical === true) {
+        return "vertical";
+      }
+      return ge.breakpoints.indexOf(ge.view()) >= ge.breakpoints.indexOf(vertical) ? "vertical" : "horizontal";
+    }
+    function markLayout(container) {
+      var layout = layoutHere(container);
+      if (layout) {
+        container.setAttribute(LAYOUT_ATTR, layout);
+      } else {
+        container.removeAttribute(LAYOUT_ATTR);
+      }
+    }
+    function select(labelKey, options, onChange) {
+      var box = element("div", { "class": "ge-tabs-variant" });
+      var id = "ge-tabs-variant-" + ++fieldCounter;
+      box.appendChild(element("label", { "class": "form-label", "for": id }, ge.t(labelKey)));
+      var field = box.appendChild(element("select", { "class": "form-select form-select-sm", id }));
+      options.forEach(function(option) {
+        field.appendChild(element("option", { value: option.value }, option.label));
+      });
+      field.addEventListener("change", function() {
+        onChange(field.value);
+      });
+      return { box, field };
+    }
+    function createSection(container) {
+      var body = element("div", { "class": "ge-tabs-variants" });
+      var fields = {};
+      function change(key, value) {
+        write(container, key, value);
+        markLayout(container);
+        render();
+      }
+      function options(key) {
+        return FIELDS[key].choices.map(function(choice) {
+          return { value: choice.value, label: ge.t(choice.labelKey) };
+        });
+      }
+      ["variant", "width", "align"].forEach(function(key) {
+        fields[key] = select(FIELDS[key].labelKey, options(key), function(value) {
+          change(key, value);
+        });
+      });
+      fields.vertical = select(FIELDS.vertical.labelKey, [
+        { value: "false", label: ge.t("container.tabs_layout_horizontal") },
+        { value: "true", label: ge.t("container.tabs_layout_vertical") }
+      ].concat(fromBreakpoints().map(function(key) {
+        return { value: key, label: ge.t("container.tabs_layout_vertical_from", { breakpoint: key }) };
+      })), function(value) {
+        change("vertical", value === "true" ? true : value === "false" ? false : value);
+      });
+      ["variant", "width", "align", "vertical"].forEach(function(key) {
+        fields[key].box.setAttribute("data-ge-tabs-variant", key);
+        body.appendChild(fields[key].box);
+      });
+      function render() {
+        var values = read(container);
+        fields.variant.field.value = values.variant;
+        fields.width.field.value = values.width;
+        fields.align.field.value = values.align;
+        fields.vertical.field.value = String(values.vertical);
+        fields.width.field.disabled = values.vertical !== false;
+        fields.align.field.disabled = values.vertical !== false || values.width !== "natural";
+      }
+      render();
+      sections.push({ container, element: body, render });
+      return body;
+    }
     function addTabTo(container, options) {
       options = options || {};
-      var strip = one(container, ":scope > .nav-tabs");
+      var strip = stripOf(container);
       var content = one(container, ":scope > .tab-content");
       var id = ge.containerId("tab");
       var number = children(strip, ".nav-item").length + 1;
@@ -151,7 +393,7 @@
         removeClass(each, "show active");
       });
       addClass(pane, "show active");
-      all(container, ":scope > .nav-tabs .nav-link").forEach(function(button) {
+      all(stripOf(container) || container, ".nav-link").forEach(function(button) {
         var active = button.getAttribute("data-bs-target") === "#" + id;
         toggleClass(button, "active", active);
         button.setAttribute("aria-selected", active ? "true" : "false");
@@ -167,7 +409,7 @@
       // A tab strip sorts its own tabs, and the panes follow them. No
       // group: a tab belongs to the strip it was made in.
       onSortable: function(sortable) {
-        sortable(all(ge.canvas, ".ge-container-tabs > .nav-tabs"), {
+        sortable(all(ge.canvas, ".ge-container-tabs").map(stripOf).filter(Boolean), {
           draggable: ".ge-tab"
         });
       },
@@ -179,6 +421,9 @@
         var count = options.tabs || labels.length || 2;
         container.appendChild(element("ul", { "class": "nav nav-tabs", role: "tablist" }));
         container.appendChild(element("div", { "class": "tab-content" }));
+        ["variant", "width", "align", "vertical"].forEach(function(key) {
+          write(container, key, chosen(options, key));
+        });
         for (var i = 0; i < count; i++) {
           addTabTo(container, { label: labels[i] });
         }
@@ -189,7 +434,7 @@
         all(container, ":scope > .tab-content > .tab-pane").forEach(function(pane) {
           addClass(pane, "ge-tab-pane");
         });
-        all(container, ":scope > .nav-tabs > .nav-item").forEach(function(tab) {
+        children(stripOf(container) || container, ".nav-item").forEach(function(tab) {
           addClass(tab, "ge-tab");
           var link = one(tab, ".nav-link");
           if (link) {
@@ -222,15 +467,38 @@
       },
       unmark: function(container) {
         ge.resumeToggles(container);
+        container.removeAttribute(LAYOUT_ATTR);
         all(container, ".ge-tab-pane").forEach(function(pane) {
           removeClass(pane, "ge-tab-pane");
         });
         ge.unwrapLabels(container);
       },
+      panelSection: function(node, kind) {
+        if (kind !== "tabs" || !stripOf(node)) {
+          return null;
+        }
+        return { labelKey: "container.tabs_section", body: createSection(node) };
+      },
+      // After a view change or a change of classes: the layout marks and the
+      // sections follow
+      onRefresh: function(scope) {
+        selfAndAll(scope, '[data-ge-container="tabs"]').forEach(markLayout);
+        sections = sections.filter(function(entry) {
+          return entry.element.isConnected;
+        });
+        sections.forEach(function(entry) {
+          if (entry.container === scope || scope.contains(entry.container)) {
+            entry.render();
+          }
+        });
+      },
+      onDeinit: function() {
+        sections = [];
+      },
       /** Panes read in tab order, whatever order they were dropped in. */
       afterPaneMove: function(container) {
         var content = one(container, ":scope > .tab-content");
-        all(container, ":scope > .nav-tabs > .nav-item").forEach(function(tab) {
+        children(stripOf(container) || container, ".nav-item").forEach(function(tab) {
           var pane = paneOf(container, tab);
           if (pane) {
             content.appendChild(pane);