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

package/CHANGELOG.md

@@ -5,6 +5,45 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 
+## [8.0.0] - 2026-09-30
+
+The first stable 8.0: what 8.0.0-beta.1 to 8.0.0-beta.3 below brought, and
+these changes on top of beta.3. See [UPGRADING.md](UPGRADING.md).
+
+### Changed
+- **BREAKING:** The style plugin is renamed `inline-style`, with the same
+  behaviour: `grideditor.inline-style.js` (`plugins/inline-style` as a
+  module), `'inline-style'` in `plugins`, `GridEditor.utilities['inline-style']`,
+  the `inline_style` setting (`InlineStyleOptions` in the types), the
+  `inline_style.*` locale keys and the `ge-inline-style-*` classes and
+  attributes. There is no alias for the old names. `example/style.html` is
+  `example/inline-style.html`.
+- A node's settings panel names each of its sections: a heading over the id,
+  the classes and the presets (`panel.section_general`, "Id and classes"),
+  and over each plugin's section - Style, Tabs - where it is in the panel
+  rather than behind a button. The sections are set off by a line.
+
+### Fixed
+- A row's drawer starts at the row's edge, as a column's does: Bootstrap's
+  gutter padding for a row's children no longer pushes its tools in, nor its
+  max width keeps the drawer from reaching the other side.
+
+## [8.0.0-beta.3] - 2026-09-30
+
+### Added
+- Variants for the tabs container: style (`nav-tabs`, `nav-pills`,
+  `nav-underline`), width (`nav-fill`, `nav-justified`), alignment
+  (`justify-content-center`, `-end`) and a vertical layout, always or from a
+  breakpoint up (`d-{bp}-flex`, `flex-{bp}-column`). They are chosen in a
+  Tabs section of the container's settings panel, given to
+  `createContainer('tabs', { variant, width, align, vertical })`, or set for
+  the new ones with the `tabs` setting. While editing, each view shows the
+  layout its breakpoint has.
+
+### Fixed
+- A tab strip without `nav-tabs` - pills or underline written by hand - is
+  recognised as tabs.
+
 ## [8.0.0-beta.2] - 2026-09-29
 
 ### Added

package/README.md

@@ -560,13 +560,13 @@ __`element_tools`:__ Extra tools on every element drawer, same shape as `row_too
 See [example/elements.html](example/elements.html), which also shows the
 pattern for an element with no visual output of its own.
 
-### Style
+### Inline style
 
 Inline css for rows, columns, containers, panes, elements and sections, and
 Bootstrap's classes for it. A plugin:
 
 ```html
-<script src="grid-editor/dist/plugins/grideditor.style.min.js"></script>   <!-- after grideditor.elements -->
+<script src="grid-editor/dist/plugins/grideditor.inline-style.min.js"></script>   <!-- after grideditor.elements -->
 ```
 
 Each of those nodes gets a *Style* accordion in its settings panel, between
@@ -606,11 +606,11 @@ the node also sets says which class takes priority.
 With `settings_panel: 'popover'` or `'inline'` the panel has a *Style* button
 instead, which opens the accordion in a dialog.
 
-__`style`:__ Every section, unless you say otherwise.
+__`inline_style`:__ Every section, unless you say otherwise.
 
 ```javascript
 new GridEditor('#myGrid', {
-    style: {
+    inline_style: {
         sections: {
             position: false,                                                  // no Position section
             border: { properties: ['border-width', 'border-color'], catalog: false },  // two fields, no chips
@@ -634,18 +634,18 @@ A node that is flex or grid in the view you are in - a column with `d-flex`,
 a row with `flex-nowrap` - has its drawer on top, out of the flow, so the
 canvas lays out its content as the page will.
 
-See [example/style.html](example/style.html).
+See [example/inline-style.html](example/inline-style.html).
 
 ### Responsive utilities
 
 Bootstrap's responsive utility classes, edited per breakpoint. The grid's are
-plugins of their own; the ones that style a node are the style plugin's, above.
+plugins of their own; the ones that style a node are the inline-style plugin's, above.
 
 ```html
 <script src="grid-editor/dist/plugins/grideditor.order.min.js"></script>
 <script src="grid-editor/dist/plugins/grideditor.alignment.min.js"></script>
 <script src="grid-editor/dist/plugins/grideditor.gutters.min.js"></script>
-<script src="grid-editor/dist/plugins/grideditor.style.min.js"></script>
+<script src="grid-editor/dist/plugins/grideditor.inline-style.min.js"></script>
 ```
 
 | Plugin | Classes | On |
@@ -653,10 +653,10 @@ plugins of their own; the ones that style a node are the style plugin's, above.
 | `order` | `order-{bp}-{first,0–5,last}` | columns |
 | `alignment` | `align-self-{bp}-*` | columns |
 | `gutters` | `g-{bp}-{0–5}`, `gx-{bp}-*`, `gy-{bp}-*` | rows |
-| `style` | display, flex (a row's `justify-content-*` and `align-items-*` among it), spacing, text alignment, sticky and float; see [Style](#style) | rows, columns, elements, containers, texts |
+| `inline-style` | display, flex (a row's `justify-content-*` and `align-items-*` among it), spacing, text alignment, sticky and float; see [Inline style](#inline-style) | rows, columns, elements, containers, texts |
 
 A plugin puts a field in the *Responsive* section of each drawer's settings
-panel - or, for the style plugin, in its section of the *Style* accordion -
+panel - or, for the inline-style plugin, in its section of the *Style* accordion -
 and some add a tool to the drawer. In a breakpoint view a change is
 written for that breakpoint alone, and the field says what it inherits and from
 where. In the all view it is written once, as the class with no breakpoint, and
@@ -777,6 +777,13 @@ __`plugins`:__ Which of the loaded plugins to use, containers, features and util
 new GridEditor('#myGrid', { plugins: ['tabs', 'elements'] });
 ```
 
+__`tabs`:__ The variant of the tabs containers made new, from the toolbar or with `createContainer`: `variant` (`'tabs'`, `'pills'` or `'underline'`), `width` (`'natural'`, `'fill'` or `'justified'`), `align` (`'start'`, `'center'` or `'end'`, with the natural width only) and `vertical` (`false`, `true`, or a breakpoint to go vertical from, `'md'`). Every tabs container also has a *Tabs* section in its settings panel, which changes its own. It is all Bootstrap's classes on the strip and the container, so a page's markup says it too - pills written by hand are tabs.
+
+```javascript
+new GridEditor('#myGrid', { tabs: { variant: 'pills', vertical: 'md' } });   // a side menu from tablet up
+ge.createContainer('tabs', { variant: 'underline', width: 'fill' });          // an option given wins
+```
+
 __`container_tools`, `tab_tools`, `accordion_tools`:__ Extra tools on the container drawer and on each pane's drawer, same shape as `row_tools`.
 
 ```javascript

package/UPGRADING.md

@@ -4,16 +4,26 @@ Upgrading from grid-editor `7.x` to `8.0`
 8.0 takes out what kept pages, plugins and options of earlier versions
 working. Nothing it removes warns: an option that is gone is ignored like any
 option the editor does not know. The jQuery adapter stays, and so does the
-conversion of markup 5.x saved. `8.0.0-beta.2` is the first beta published
-(`8.0.0-beta.1` never was); install it with
-`npm install @themarioga/grid-editor@next`.
-
+conversion of markup 5.x saved. From the `8.0.0` betas (on npm's `next`
+tag), the one change to make is the first point below, the rename of the
+style plugin.
+
+* __The style plugin is `inline-style`.__ Its file is
+  `grideditor.inline-style.js` (`@themarioga/grid-editor/plugins/inline-style`
+  as a module), its name in `plugins` is `'inline-style'`, its setting is
+  `inline_style`, its locale keys are `inline_style.*` rather than `style.*`,
+  and its css classes and attributes are `ge-inline-style-*` rather than
+  `ge-style-*` - `[data-ge-inline-style-section="spacing"]` and the others.
+  What it does is the same. The old names are not an alias: `'style'` in
+  `plugins` is a plugin that is not loaded, and a `style` setting is not
+  read. This came in `8.0.0`, after the betas; the points below use the new
+  names.
 * __The spacing, textalign, visibility and float plugins are gone.__ Load
-  `grideditor.style.js`, which has carried them since 7.3, and name it in the
+  `grideditor.inline-style.js`, which has carried them since 7.3, and name it in the
   `plugins` setting: `'spacing'`, `'textalign'`, `'visibility'` and `'float'`
   there are plugins that are not loaded now, and only get the usual warning.
 * __`utilities.spacing` and `utilities.visibility` are not read.__ They are
-  `style.spacing` and `style.visibility`.
+  `inline_style.spacing` and `inline_style.visibility`.
 * __`replaces` on a plugin's factory does nothing.__ A plugin that stood in
   for another is loaded beside it, like any two plugins.
 * __`changeView`, `getUtility` and `setUtility` take a view key only.__ The
@@ -36,20 +46,20 @@ conversion of markup 5.x saved. `8.0.0-beta.2` is the first beta published
   `warning.oninit_removed` and `warning.plugin_6x`. A locale of your own
   can drop them.
 
-What `8.0.0-beta.2` adds to that:
+8.0 also changes what the inline-style plugin edits:
 
 * __The `visibility` utility is `display`.__ It edits every `d-{bp}-*`
   value now, not only hidden and shown: `setUtility(node, 'display', 'none',
   'md')`, and `before-utility` and `after-utility` say `family: 'display'`.
   `'visibility'` is a family no plugin declares, and gets the usual warning.
-  The eye and `style.visibility.drawer` are as they were.
-* __A row's `justify-content-*` and `align-items-*` are the style plugin's.__
+  The eye and `inline_style.visibility.drawer` are as they were.
+* __A row's `justify-content-*` and `align-items-*` are the inline-style plugin's.__
   They are in its Flex section, on rows and on anything made flex, and the
   alignment plugin keeps `align-self-*` only. A page that loads alignment
-  without style has no field for them: load `grideditor.style.js`.
+  without inline-style has no field for them: load `grideditor.inline-style.js`.
 * __Locale keys:__ `utility.visibility` and `utility.visibility_shown` are
   gone, and `utility.display` is new; `utility.justify_content` and
-  `utility.align_items` come with the style plugin now. The Flex section and
+  `utility.align_items` come with the inline-style plugin now. The Flex section and
   sticky bring keys of their own, listed in
   [docs/locale-keys.md](docs/locale-keys.md).