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

package/dist/grideditor.css

@@ -273,6 +273,108 @@
   color: var(--bs-secondary-color, #666);
   font-size: 0.6875rem;
 }
+/* A settings panel the dialog was opened from waits under its backdrop:
+   Bootstrap's popover would sit over the modal */
+.ge-settings-panel.ge-under-dialog {
+  z-index: 1040;
+}
+/* What plugins add to a panel, between its general fields and Responsive.
+   In a popover or inline, a button that opens it in the dialog. */
+.ge-details .ge-panel-section {
+  margin-top: 10px;
+}
+/* The 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 {
+  font-size: 0.8125rem;
+}
+.ge-style .accordion-button {
+  padding: 6px 10px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+.ge-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 {
+  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 {
+  color: var(--bs-secondary-color, #666);
+  font-size: 0.6875rem;
+}
+.ge-style .ge-style-fields,
+.ge-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 {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+}
+.ge-style .ge-spacing-group .ge-utility > .ge-utility-label {
+  display: none;
+}
+.ge-style .ge-spacing-gutter {
+  grid-column: 1 / -1;
+}
+.ge-style .ge-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) {
+  grid-column: 1 / -1;
+}
+.ge-style .ge-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 {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+}
+.ge-style .ge-style-shadow-color {
+  grid-column: span 2;
+}
+.ge-style .ge-style-shadow-mode {
+  display: inline-block;
+  margin-top: 2px;
+  font-size: 0.6875rem;
+}
+.ge-style .ge-style-catalog {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.ge-style .ge-style-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px;
+}
+.ge-style .ge-style-chip {
+  --bs-btn-padding-y: 0;
+  --bs-btn-padding-x: 6px;
+  --bs-btn-font-size: 0.6875rem;
+  font-family: var(--bs-font-monospace, monospace);
+}
 /* In a drawer it is part of the drawer, compact */
 .ge-tools-drawer > .ge-details {
   font-size: 11px;
@@ -299,6 +401,13 @@
   --bs-popover-max-width: 360px;
   width: 360px;
   max-width: calc(100vw - 16px);
+  /* Bootstrap's css leaves the arrow's position to Popper, which puts it on
+       as an inline style. Without it the arrow stays in the flow, a strip as
+       tall as the arrow above the header; out of it, the top or bottom of
+       .bs-popover-bottom and .bs-popover-top hang it outside the edge */
+}
+.ge-settings-popover > .popover-arrow {
+  position: absolute;
 }
 .ge-settings-popover > .popover-header {
   display: flex;
@@ -4481,20 +4590,35 @@
   margin-left: 91.66666667%;
 }
 /*
- * The visibility plugin. A node Bootstrap would hide is kept on the canvas -
- * there would be nothing left to click to show it again - and shown the way
- * the view sees it instead. The selectors outweigh Bootstrap's d-* classes,
- * which are !important too.
+ * The 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.
  */
 .ge-canvas.ge-editing {
   /* The all view: hidden at some breakpoints, said in a corner */
 }
-.ge-canvas.ge-editing .ge-visibility {
+.ge-canvas.ge-editing [data-ge-display="inline"] {
+  display: inline !important;
+}
+.ge-canvas.ge-editing [data-ge-display="inline-block"] {
+  display: inline-block !important;
+}
+.ge-canvas.ge-editing [data-ge-display="block"] {
   display: block !important;
 }
-.ge-canvas.ge-editing .row.ge-visibility {
+.ge-canvas.ge-editing [data-ge-display="grid"] {
+  display: grid !important;
+}
+.ge-canvas.ge-editing [data-ge-display="inline-grid"] {
+  display: inline-grid !important;
+}
+.ge-canvas.ge-editing [data-ge-display="flex"] {
   display: flex !important;
 }
+.ge-canvas.ge-editing [data-ge-display="inline-flex"] {
+  display: inline-flex !important;
+}
 .ge-canvas.ge-editing .ge-hidden-in-view {
   opacity: 0.45;
   background-image: repeating-linear-gradient(-45deg, transparent 0, transparent 6px, rgba(0, 0, 0, 0.07) 6px, rgba(0, 0, 0, 0.07) 12px);
@@ -4516,6 +4640,25 @@
   line-height: 16px;
   pointer-events: none;
 }
+/*
+ * The 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
+ * classes and the drawer's own margins, which the spacing part sets inline.
+ */
+.ge-canvas.ge-editing .ge-drawer-out {
+  position: relative;
+  border-top-style: solid !important;
+  border-top-color: transparent !important;
+}
+.ge-canvas.ge-editing .ge-drawer-out > .ge-tools-drawer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: auto !important;
+  margin: 0 !important;
+}
 /* The order plugin: a column ordered by class in this view says where */
 .ge-canvas.ge-editing .column[data-ge-order]::before {
   content: attr(data-ge-order);

package/dist/grideditor.d.ts

@@ -53,6 +53,22 @@ 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 on or off, or on with some of its properties and without its catalog. */
+export type StyleSection = boolean | { properties?: string[]; catalog?: boolean };
+
+/** The style plugin's settings. */
+export interface StyleOptions {
+    /** Every section is on unless it is turned off here. */
+    sections?: Partial<Record<StyleSectionKey, StyleSection>>;
+    /** 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. */
+    visibility?: { drawer?: boolean };
+}
+
 export type CustomFilter = ((canvas: HTMLElement, isInit: boolean) => void) | string;
 
 /** The settings. Every one is optional. */
@@ -79,6 +95,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;
     elements?: { enabled?: boolean | 'auto'; selector?: string; auto?: boolean };
     custom_filter?: CustomFilter | CustomFilter[] | '';
     valid_col_sizes?: ColumnSize[];