apostrophe 4.28.0 → 4.29.0

package/modules/@apostrophecms/layout-column-widget/index.js

@@ -1,50 +1,3 @@
-const alignSchema = {
-  justify: {
-    type: 'select',
-    label: 'apostrophe:layoutJustify',
-    choices: [
-      {
-        label: 'apostrophe:layoutStretchHorizontal',
-        value: 'stretch'
-      },
-      {
-        label: 'apostrophe:layoutLeft',
-        value: 'start'
-      },
-      {
-        label: 'apostrophe:layoutRight',
-        value: 'end'
-      },
-      {
-        label: 'apostrophe:layoutCenter',
-        value: 'center'
-      }
-    ]
-  },
-  align: {
-    type: 'select',
-    label: 'apostrophe:layoutAlign',
-    choices: [
-      {
-        label: 'apostrophe:layoutStretchVertical',
-        value: 'stretch'
-      },
-      {
-        label: 'apostrophe:layoutTop',
-        value: 'start'
-      },
-      {
-        label: 'apostrophe:layoutBottom',
-        value: 'end'
-      },
-      {
-        label: 'apostrophe:layoutMiddle',
-        value: 'center'
-      }
-    ]
-  }
-};
-
 module.exports = {
   extend: '@apostrophecms/widget-type',
   options: {
@@ -67,13 +20,8 @@ module.exports = {
           nativeAction: 'move',
           placement: 'breadcrumb',
           icon: 'cursor-move-icon',
-          rawEvents: [ 'mousedown', 'touchstart' ]
-        },
-        layoutColConfig: {
-          placement: 'breadcrumb',
-          icon: 'cog-icon',
-          type: 'menu',
-          modal: 'AposLayoutColControlDialog'
+          rawEvents: [ 'mousedown', 'touchstart' ],
+          hidden: true
         },
         layoutColEditStyles: {
           action: 'apos-edit-styles',
@@ -85,7 +33,8 @@ module.exports = {
           action: 'apos-layout-col-delete',
           placement: 'breadcrumb',
           icon: 'delete-icon',
-          tooltip: 'apostrophe:delete'
+          tooltip: 'apostrophe:delete',
+          hidden: true
         }
       }
     };
@@ -103,127 +52,171 @@ module.exports = {
       }
     };
   },
-  fields(self, options) {
+  fields: {
+    add: {
+      colstart: {
+        type: 'integer'
+      },
+      colspan: {
+        type: 'integer'
+      },
+      rowstart: {
+        type: 'integer',
+        def: 1
+      },
+      rowspan: {
+        type: 'integer',
+        def: 1
+      },
+      order: {
+        type: 'integer'
+      },
+      content: {
+        type: 'area',
+        options: {
+          widgets: {
+            '@apostrophecms/rich-text': {},
+            '@apostrophecms/image': {},
+            '@apostrophecms/video': {},
+            '@apostrophecms/file': {}
+          }
+        }
+      }
+    },
+    // `utility` group is specifically excluded from tab
+    // rendering in AposModalTabsMixin, we show only Styles.
+    group: {
+      utility: {
+        fields: [ 'colstart', 'colspan', 'rowstart', 'rowspan', 'order', 'content' ]
+      }
+    }
+  },
+  styles(self, options) {
     const breakpoints = options?.labelBreakpoints ||
-      options?.breakpoints || // BC, derpecated
+      options?.breakpoints || // BC, deprecated
       {};
     return {
       add: {
-        desktop: {
-          type: 'object',
-          fields: {
-            add: {
-              colstart: {
-                type: 'integer',
-                required: true
-              },
-              colspan: {
-                type: 'integer',
-                required: true
-              },
-              rowstart: {
-                type: 'integer',
-                def: 1
-              },
-              rowspan: {
-                type: 'integer',
-                def: 1
-              },
-              order: {
-                type: 'integer'
-              },
-              ...alignSchema
+        showTablet: {
+          type: 'boolean',
+          label: 'apostrophe:layoutTabletShow',
+          ...(options?.showBreakpointsHelp
+            ? {
+              help: 'apostrophe:layoutTabletShowHelp',
+              helpInterpolation: {
+                mobile: breakpoints.mobile || 600,
+                tablet: breakpoints.tablet || 900
+              }
             }
-          }
+            : {}),
+          def: true
         },
-        tablet: {
-          type: 'object',
-          fields: {
-            add: {
-              colstart: {
-                type: 'integer'
-              },
-              colspan: {
-                type: 'integer'
-              },
-              rowstart: {
-                type: 'integer',
-                def: 1
-              },
-              rowspan: {
-                type: 'integer',
-                def: 1
-              },
-              order: {
-                type: 'integer'
-              },
-              show: {
-                type: 'boolean',
-                label: 'apostrophe:layoutTabletShow',
-                ...(options?.showBreakpointsHelp
-                  ? {
-                    help: 'apostrophe:layoutTabletShowHelp',
-                    helpInterpolation: {
-                      mobile: breakpoints.mobile || 600,
-                      tablet: breakpoints.tablet || 900
-                    }
-                  }
-                  : {}),
-                def: true
-              },
-              ...alignSchema
+        showMobile: {
+          type: 'boolean',
+          label: 'apostrophe:layoutMobileShow',
+          ...(options?.showBreakpointsHelp
+            ? {
+              help: 'apostrophe:layoutMobileShowHelp',
+              helpInterpolation: {
+                mobile: breakpoints.mobile || 600
+              }
             }
-          }
+            : {}),
+          def: true
         },
-        mobile: {
-          type: 'object',
-          fields: {
-            add: {
-              colstart: {
-                type: 'integer'
-              },
-              colspan: {
-                type: 'integer'
-              },
-              rowstart: {
-                type: 'integer',
-                def: 1
-              },
-              rowspan: {
-                type: 'integer',
-                def: 1
-              },
-              order: {
-                type: 'integer'
-              },
-              show: {
-                type: 'boolean',
-                label: 'apostrophe:layoutMobileShow',
-                ...(options?.showBreakpointsHelp
-                  ? {
-                    help: 'apostrophe:layoutMobileShowHelp',
-                    helpInterpolation: {
-                      mobile: breakpoints.mobile || 600
-                    }
-                  }
-                  : {}),
-                def: true
-              },
-              ...alignSchema
+        justify: {
+          type: 'select',
+          label: 'apostrophe:layoutJustify',
+          property: '--justify',
+          choices: [
+            {
+              label: 'apostrophe:layoutStretchHorizontal',
+              value: 'stretch'
+            },
+            {
+              label: 'apostrophe:layoutLeft',
+              value: 'start'
+            },
+            {
+              label: 'apostrophe:layoutRight',
+              value: 'end'
+            },
+            {
+              label: 'apostrophe:layoutCenter',
+              value: 'center'
             }
-          }
+          ]
         },
-        content: {
-          type: 'area',
-          options: {
-            widgets: {
-              '@apostrophecms/rich-text': {},
-              '@apostrophecms/image': {},
-              '@apostrophecms/video': {},
-              '@apostrophecms/file': {}
+        align: {
+          type: 'select',
+          label: 'apostrophe:layoutAlign',
+          property: '--align',
+          choices: [
+            {
+              label: 'apostrophe:layoutStretchVertical',
+              value: 'stretch'
+            },
+            {
+              label: 'apostrophe:layoutTop',
+              value: 'start'
+            },
+            {
+              label: 'apostrophe:layoutBottom',
+              value: 'end'
+            },
+            {
+              label: 'apostrophe:layoutMiddle',
+              value: 'center'
             }
+          ]
+        }
+      }
+    };
+  },
+  init(self) {
+    self.addColumnWidgetMigration();
+  },
+  methods(self) {
+    return {
+      addColumnWidgetMigration() {
+        self.apos.migration.add(
+          `${self.__meta.name}:flatten-column-schema`,
+          async () => {
+            await self.apos.migration.eachWidget({}, 5, async (doc, widget, dotPath) => {
+              if (widget.type !== self.name) {
+                return;
+              }
+              const update = self.migrateColumnWidget(widget, dotPath);
+              if (!update) {
+                return;
+              }
+              await self.apos.doc.db.updateOne(
+                { _id: doc._id },
+                update
+              );
+            });
           }
+        );
+      },
+
+      migrateColumnWidget(widget, dotPath) {
+        if (!widget.desktop) {
+          return null;
         }
+        const d = widget.desktop || {};
+        return {
+          $set: {
+            [`${dotPath}.colstart`]: d.colstart ?? null,
+            [`${dotPath}.colspan`]: d.colspan ?? null,
+            [`${dotPath}.rowstart`]: d.rowstart ?? 1,
+            [`${dotPath}.rowspan`]: d.rowspan ?? 1,
+            [`${dotPath}.order`]: d.order ?? null,
+            [`${dotPath}.justify`]: d.justify ?? null,
+            [`${dotPath}.align`]: d.align ?? null,
+            [`${dotPath}.showTablet`]: widget.tablet?.show ?? true,
+            [`${dotPath}.showMobile`]: widget.mobile?.show ?? true
+          }
+        };
       }
     };
   }

package/modules/@apostrophecms/layout-widget/index.js

@@ -71,6 +71,11 @@ module.exports = {
             }
           }
         }
+      },
+      group: {
+        utility: {
+          fields: [ 'columns' ]
+        }
       }
     };
   },
@@ -358,12 +363,12 @@ module.exports = {
         if (!Array.isArray(widgets)) {
           return;
         }
-        const items = widgets.filter(widget => widget.tablet.show);
+        const items = widgets.filter(widget => widget.showTablet !== false);
         if (items.length % 2 === 0) {
           return;
         }
         items.sort((a, b) =>
-          (a.tablet.order ?? a.desktop.order) - (b.tablet.order ?? b.desktop.order)
+          (a.order ?? 0) - (b.order ?? 0)
         );
         return items[items.length - 1]._id;
       }

package/modules/@apostrophecms/layout-widget/ui/apos/components/AposAreaLayoutEditor.vue

@@ -371,7 +371,7 @@ export default {
           this.layoutColumnWidgetName,
           contentFieldDefPerColumn[index]
         );
-        Object.assign(widget[this.layoutDeviceMode], {
+        Object.assign(widget, {
           colspan: item.colspan,
           colstart: item.colstart,
           rowstart: item.rowstart,
@@ -394,7 +394,7 @@ export default {
       }
       const { _id, ...rest } = patch;
       const widget = this.newWidget(widgetName);
-      Object.assign(widget[this.layoutDeviceMode], rest);
+      Object.assign(widget, rest);
       const insert = {
         widget,
         index: this.layoutColumnWidgets.length
@@ -427,7 +427,7 @@ export default {
       this.layoutPatchMany(patches);
     },
     // Apply a partial widget patch, for only the current device mode
-    layoutPatchOne(patch, device) {
+    layoutPatchOne(patch) {
       if (!patch || !patch._id) {
         return;
       }
@@ -439,7 +439,7 @@ export default {
       // this is not the same as the nested object _id in the widget.
       // Be sure to keep the existing internal _id's intact.
       const { _id, ...rest } = patch;
-      Object.assign(widget[device || this.layoutDeviceMode], rest);
+      Object.assign(widget, rest);
       // eslint-disable-next-line no-console
       this.update(widget).catch(console.error);
     },
@@ -453,20 +453,15 @@ export default {
         this.layoutPatchOne(patch);
       }
     },
-    // Apply a full widget patch, including nested objects
+    // Apply a full widget patch
     layoutPatchFull(patch) {
       const widget = this.next.find(w => w._id === patch._id);
       if (widget?.type !== this.layoutColumnWidgetName) {
         return;
       }
 
-      const {
-        _id, desktop = {}, tablet = {}, mobile = {}, ...rest
-      } = patch;
+      const { _id, ...rest } = patch;
       Object.assign(widget, rest);
-      Object.assign(widget.desktop, desktop);
-      Object.assign(widget.tablet, tablet);
-      Object.assign(widget.mobile, mobile);
 
       // eslint-disable-next-line no-console
       this.update(widget).catch(console.error);

package/modules/@apostrophecms/layout-widget/ui/apos/components/AposGridColumn.vue

@@ -10,8 +10,8 @@
     data-apos-test="aposLayoutItem"
     :data-id="item._id"
     :data-tablet-full="props.tabletFullItems[item._id] || false"
-    :data-visible-tablet="item.tablet?.show"
-    :data-visible-mobile="item.mobile?.show"
+    :data-visible-tablet="item.showTablet !== false"
+    :data-visible-mobile="item.showMobile !== false"
   >
     <slot />
   </component>
@@ -45,9 +45,7 @@ const itemStyles = computed(() => {
       '--colspan': props.item.colspan,
       '--rowstart': props.item.rowstart,
       '--rowspan': props.item.rowspan,
-      '--order': props.item.order,
-      '--justify': props.item.justify,
-      '--align': props.item.align
+      '--order': props.item.order
     },
     widgetStyles.inline
   ];

package/modules/@apostrophecms/layout-widget/ui/apos/components/AposGridLayout.vue

@@ -31,8 +31,8 @@
         :item="item"
         :tablet-full-items="tabletFullItems"
         :data-tablet-full="tabletFullItems[item._id] || false"
-        :data-visible-tablet="item.tablet?.show"
-        :data-visible-mobile="item.mobile?.show"
+        :data-visible-tablet="item.showTablet !== false"
+        :data-visible-mobile="item.showMobile !== false"
         :data-id="`${ item._id }`"
       >
         <div
@@ -188,12 +188,12 @@ export default {
         return {};
       }
       const items = this.gridState.current.items
-        .filter(widget => widget.tablet.show);
+        .filter(widget => widget.showTablet !== false);
       if (items.length % 2 === 0) {
         return {};
       }
       items.sort((a, b) =>
-        (a.tablet.order ?? a.order) - (b.tablet.order ?? b.order)
+        (a.order ?? 0) - (b.order ?? 0)
       );
       const lastId = items[items.length - 1]._id;
       return {

package/modules/@apostrophecms/layout-widget/ui/apos/components/AposGridManager.vue

@@ -98,7 +98,6 @@
             :skip-info="true"
             :disabled="opstate.disabled"
             :teleport-modals="true"
-            @update="updateItem"
             @operation="onBreadcrumbOperation(item, $event)"
           />
         </div>
@@ -800,21 +799,6 @@ export default {
         colstart
       };
     },
-    updateItem(data) {
-      const { align, justify } = (data[this.gridState.deviceMode] || {});
-      const patch = {
-        mobile: {
-          show: data.mobile?.show ?? true
-        },
-        tablet: {
-          show: data.tablet?.show ?? true
-        }
-      };
-      patch[this.gridState.deviceMode] ||= {};
-      patch[this.gridState.deviceMode].align = align;
-      patch[this.gridState.deviceMode].justify = justify;
-      this.patchItem(data, patch);
-    },
     patchItem(item, patch) {
       this.$emit('patch-item', {
         ...patch,

package/modules/@apostrophecms/layout-widget/ui/apos/lib/grid-state.mjs

@@ -77,36 +77,17 @@
 export function itemsToState({
   items, meta, options, layoutMode, deviceMode
 }) {
-  const perDevice = {
-    desktop: {
-      items: [],
-      rows: 1,
-      auto: true
-    },
-    tablet: {
-      items: [],
-      rows: 1,
-      auto: true
-    },
-    mobile: {
-      items: [],
-      rows: 1,
-      auto: true
-    }
-  };
-
-  for (const [ device, record ] of Object.entries(perDevice)) {
-    record.items = items.map(item => ({
+  const deviceMeta = meta[deviceMode] || meta.desktop || {};
+  const current = {
+    items: items.map(item => ({
       ...item,
-      ...item[device],
       _id: item._id,
       type: item.type,
       content: null // optimize memory, we don't need content here
-    }));
-    record.rows = meta[device]?.rows || 1;
-    record.auto = meta[device]?.auto ?? false;
-  }
-  const current = perDevice[deviceMode] || perDevice.desktop;
+    })),
+    rows: deviceMeta.rows || 1,
+    auto: deviceMeta.auto ?? false
+  };
   const gap = options.gap === '0' ? 0 : options.gap;
   const resolvedOptions = {
     ...options,
@@ -124,7 +105,6 @@ export function itemsToState({
     columns: meta.columns || options.columns,
     layoutMode,
     deviceMode,
-    devices: perDevice,
     current,
     originalItems,
     lookup,

package/modules/@apostrophecms/layout-widget/views/column.html

@@ -10,18 +10,16 @@ The area related `data.*` is available plus `item` and `widgetOptions`. #}
     {% if key != 'style' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
   {% if data.canEdit %} data-apos-widget="{{ item._id }}"{% endif %}
-  data-visible-tablet="{{ item.tablet.show }}"
-  data-visible-mobile="{{ item.mobile.show }}"
+  data-visible-tablet="{{ item.showTablet !== false }}"
+  data-visible-mobile="{{ item.showMobile !== false }}"
   {% if lastId and item._id === lastId %}data-tablet-full="true"{% endif %}
   style="
-    --justify: {{ item.desktop.justify or 'auto' }};
-    --align: {{ item.desktop.align or 'auto' }};
     {{ wrapperAttrs.style or '' }}
-    --colstart: {{ item.desktop.colstart }};
-    --colspan: {{ item.desktop.colspan }};
-    --rowstart: {{ item.desktop.rowstart }};
-    --rowspan: {{ item.desktop.rowspan }};
-    --order: {{ item.desktop.order }};
+    --colstart: {{ item.colstart }};
+    --colspan: {{ item.colspan }};
+    --rowstart: {{ item.rowstart }};
+    --rowspan: {{ item.rowspan }};
+    --order: {{ item.order }};
 ">
   {% area item, 'content' %}
 </div>