apostrophe 4.28.1 → 4.29.0

package/modules/@apostrophecms/i18n/ui/apos/components/AposI18nLocalize.vue

@@ -317,7 +317,7 @@ export default {
       type: Object,
       default: null
     },
-    locale: {
+    targetLocale: {
       required: false,
       type: Object,
       default: null
@@ -385,7 +385,7 @@ export default {
             title: this.$t('apostrophe:selectLocales'),
             filter: '',
             if() {
-              return !this.locale;
+              return !this.targetLocale;
             },
             complete() {
               return this.selectedLocales.length > 0;
@@ -409,7 +409,7 @@ export default {
         },
         values: {
           toLocalize: { data: 'thisDocAndRelated' },
-          toLocales: { data: this.locale ? [ this.locale ] : [] },
+          toLocales: { data: this.targetLocale ? [ this.targetLocale ] : [] },
           relatedDocSettings: { data: 'localizeNewRelated' },
           relatedDocTypesToLocalize: { data: [] },
           translateContent: { data: false },
@@ -836,7 +836,7 @@ export default {
         this.modal.busy = true;
         for (const locale of this.selectedLocales) {
           try {
-            await apos.http.post(`${apos.modules[doc.type].action}/${doc._id}/localize`, {
+            const result = await apos.http.post(`${apos.modules[doc.type].action}/${doc._id}/localize`, {
               body: {
                 toLocale: locale.name,
                 update: (doc._id === this.fullDoc._id) || !(this.wizard.values.relatedDocSettings.data === 'localizeNewRelated')
@@ -853,10 +853,11 @@ export default {
               locale,
               docTypeLabel: this.singular(doc.type),
               doc,
+              result,
               relationship: doc._id === this.fullDoc._id
             });
 
-            if (this.locale && this.shouldRedirect) {
+            if (this.targetLocale && this.shouldRedirect) {
               // Ask for the redirect URL, this way it still works if we
               // need to carry a session across hostnames
               const result = await apos.http.post(`${this.moduleOptions.action}/locale`, {
@@ -938,15 +939,57 @@ export default {
           }
         );
       } else {
-        for (const item of notifications) {
-          await apos.notify('apostrophe:localized', {
+        const successes = notifications.filter(({ type }) => type === 'success');
+        const count = successes.length;
+        const targetLocales = [ ...new Set(successes.map(item => item.locale.name)) ];
+        const managerOpen = apos.modal.get()
+          .some(modal => modal.componentName === 'AposRecentlyEditedManager');
+
+        if (count === 1) {
+          const item = successes[0];
+          const hasUrl = !!item.result?._url;
+          await apos.notify('apostrophe:localizingNotificationSuccess', {
             type: 'success',
-            interpolate: {
-              type: this.$t(this.singular(item.doc.type)),
-              title: item.doc.title,
-              locale: item.locale.name
-            },
-            dismiss: true
+            icon: 'translate-icon',
+            interpolate: { count },
+            dismiss: managerOpen,
+            ...!managerOpen && {
+              buttons: [
+                {
+                  type: 'event',
+                  label: hasUrl
+                    ? 'apostrophe:localizeOpenDocument'
+                    : 'apostrophe:localizeEditDocument',
+                  name: 'localize-open-document',
+                  data: {
+                    _url: item.result?._url || null,
+                    type: item.doc.type,
+                    _id: item.result?._id || null,
+                    locale: item.locale.name,
+                    slug: item.result?.slug || item.doc.slug
+                  }
+                }
+              ]
+            }
+          });
+        } else if (count > 1) {
+          await apos.notify('apostrophe:localizingNotificationSuccess', {
+            type: 'success',
+            icon: 'translate-icon',
+            interpolate: { count },
+            dismiss: managerOpen,
+            ...!managerOpen && {
+              buttons: [
+                {
+                  type: 'event',
+                  label: 'apostrophe:localizeManageDocuments',
+                  name: 'localize-manage-documents',
+                  data: {
+                    locales: targetLocales
+                  }
+                }
+              ]
+            }
           });
         }
       }

package/modules/@apostrophecms/image/ui/apos/components/AposImageRelationshipEditor.vue

@@ -290,21 +290,27 @@ export default {
       };
     },
     async submit() {
+      let attachment;
       if (this.image.attachment) {
-        await apos.http.post(`${apos.attachment.action}/crop`, {
+        attachment = await apos.http.post(`${apos.attachment.action}/crop`, {
           body: {
             _id: this.image.attachment._id,
-            crop: this.docFields.data
+            crop: this.docFields.data,
+            annotate: true
           },
           busy: true
         });
       }
 
       if (!this.widget) {
+        if (attachment) {
+          this.image.attachment = attachment;
+        }
         this.$emit('modal-result', this.docFields.data);
       } else {
         const image = {
           ...this.image,
+          ...(attachment && { attachment }),
           _fields: this.docFields.data
         };
         const widget = {

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,