apostrophe 4.2.3 → 4.3.0

package/CHANGELOG.md

@@ -1,14 +1,32 @@
 # Changelog
 
-## 4.2.3 (2024-05-07)
+## 4.3.0 (2024-05-15)
 
-No changes. Released to reset the `latest` tag.
+### Adds
 
-## 4.2.2 (2024-05-06)
+* Allows to disable page refresh on content changed for page types.
+* Widget editor can now have tabs.
+* Adds prop to `AposInputMixin` to disable blur emit.
+* Adds `throttle` function in ui module utils.
+* Adds a `publicBundle` option to `@apostrophecms/asset`. When set to `false`, the `ui/src` public asset bundle is not built at all in most cases
+except as part of the admin UI bundle which depends on it. For use with external front ends such as [apostrophe-astro](https://github.com/apostrophecms/apostrophe-astro).
+Thanks to Michelin for contributing this feature.
 
-### Adds
+### Fixes
+
+* Do not show widget editor tabs when the developer hasn't created any groups.
+* `npm link` now works again for Apostrophe modules that are dependencies of a project.
+* Re-crop image attachments found in image widgets, etc. when replacing an image in the Media Manager.
+* Fixes visual transitions between modals, as well as slider transition on overlay opacity.
+* Changing the aspect ratio multiple times in the image cropper modal no longer makes the stencil smaller and smaller.
+
+### Changes
+
+* Improves `debounce` function to handle async properly (waiting for previous async call to finish before triggering a new one).
+* Adds the `copyOfId` property to be passed to the `apos.doc.edit()` method, while still allowing the entire `copyOf` object for backwards compatibility.
+
+### Fixes
 
-* Adds a `publicBundle` option to `@apostrophecms/asset`. When set to false, the `ui/src` public asset bundle is not built at all in most cases except as part of the admin UI bundle which depends on it. For use with external front ends such as [apostrophe-astro](https://apostrophecms.com/extensions/astro-integration). Thanks to Michelin for contributing this feature.
 
 ## 4.2.1 (2024-04-29)
 
@@ -63,7 +81,7 @@ watching behavior by Vue 3.
 
 * Don't crash if a document of a type no longer corresponding to any module is present
 together with the advanced permission module.
-* AposLoginForm.js now pulls its schema from the user module rather than hardcoding it. Includes the 
+* AposLoginForm.js now pulls its schema from the user module rather than hardcoding it. Includes the
 addition of `enterUsername` and `enterPassword` i18n fields for front end customization and localization.
 * Simulated Express requests returned by `apos.task.getReq` now include a `req.headers` property, for
 greater accuracy and to prevent unexpected bugs in other code.
@@ -72,7 +90,7 @@ actually exists before calling `attachment.url` still lies with the developer.
 
 ### Adds
 
-* Add new `getChanges` method to the schema module to get an array of document changed field names instead of just a boolean like does the `isEqual` method. 
+* Add new `getChanges` method to the schema module to get an array of document changed field names instead of just a boolean like does the `isEqual` method.
 * Add highlight class in UI when comparing documents.
 
 ## 4.0.0 (2024-03-12)

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBar.vue

@@ -493,11 +493,12 @@ export default {
           });
         }
       }
-      const refreshOptions = {
-        refresh: true
-      };
-      apos.bus.$emit('apos-refreshing', refreshOptions);
-      if (refreshOptions.refresh) {
+
+      // Check that refresh hasn't been disbled for this page type
+      const contextOptions = this.context
+        ? apos.modules[this.context.type]
+        : { contentChangedRefresh: true };
+      if (contextOptions.contentChangedRefresh) {
         await this.refresh({
           scrollcheck: e.action === 'history'
         });

package/modules/@apostrophecms/asset/lib/webpack/apos/webpack.config.js

@@ -1,3 +1,4 @@
+const fs = require('fs');
 const path = require('path');
 const merge = require('webpack-merge').merge;
 const scss = require('./webpack.scss');
@@ -22,6 +23,7 @@ module.exports = ({
     )
   );
 
+  const mode = process.env.NODE_ENV || 'development';
   const pnpmModulePath = apos.isPnpm ? [ path.join(apos.selfDir, '../') ] : [];
   const config = {
     performance: {
@@ -30,7 +32,7 @@ module.exports = ({
     entry: importFile,
     // Ensure that the correct version of vue-loader is found
     context: __dirname,
-    mode: process.env.NODE_ENV || 'development',
+    mode,
     optimization: {
       minimize: process.env.NODE_ENV === 'production'
     },
@@ -64,7 +66,7 @@ module.exports = ({
     resolve: {
       extensions: [ '.*', '.js', '.vue', '.json' ],
       alias: {
-        vue$: '@vue/runtime-dom',
+        vue$: getVueAlias(mode),
         // resolve apostrophe modules
         Modules: path.resolve(modulesDir)
       },
@@ -86,3 +88,16 @@ module.exports = ({
 
   return merge(config, ...tasks);
 };
+
+function getVueAlias(mode) {
+  if (mode !== 'development') {
+    return '@vue/runtime-dom';
+  }
+
+  const vueProjectLevelPath = path.resolve('./node_modules/@vue/runtime-dom');
+  const vueProjectLevelInstalled = fs.existsSync(vueProjectLevelPath);
+
+  return vueProjectLevelInstalled
+    ? vueProjectLevelPath
+    : path.resolve(__dirname, '../../../../../../node_modules/@vue/runtime-dom');
+}

package/modules/@apostrophecms/doc/ui/apos/apps/AposDoc.js

@@ -10,13 +10,18 @@ export default () => {
   // `_id` should be the `_id` of the existing document to edit; leave
   // blank to create a new document.
   //
+  // `copyOfId` is an optional `_id` of an existing document from which properties
+  // should be copied.
+  //
   // `copyOf` is an optional, existing document from which properties should be copied.
+  // It is present for BC.
   //
   // On success, returns the new or updated document. If the modal is cancelled,
   // `undefined` is returned. Be sure to `await` the result.
   apos.doc.edit = async ({
     type,
     _id,
+    copyOfId,
     copyOf
   }) => {
     if (!type) {
@@ -29,10 +34,14 @@ export default () => {
     if (!modal) {
       throw new Error(`${type} is not a valid piece or page type, or cannot be edited`);
     }
+    copyOfId = copyOfId ?? copyOf?._id;
+    if (copyOf && !copyOfId) {
+      throw new Error('copyOf (deprecated) must be an object with a `_id` property, if possible pass `copyOfId` instead');
+    }
     return apos.modal.execute(modal, {
       moduleName: type,
       docId: _id,
-      copyOf
+      copyOfId
     });
   };
   // If you don't care about the returned value, you can emit an

package/modules/@apostrophecms/i18n/i18n/en.json

@@ -205,6 +205,8 @@
   "hideInNavigation": "Hide in Navigation",
   "home": "Home",
   "image": "Image",
+  "imageOnReplaceAutocropMessage": "The replaced image has been autocropped for \"{{ title }}\".",
+  "imageOnReplaceAutocropError": "An error occurred while autocropping the replaced image for {{ title }}",
   "imageDescription": "Add an inline image",
   "imageFile": "Image File",
   "imagePlaceholder": "Image placeholder",

package/modules/@apostrophecms/image/index.js

@@ -122,6 +122,19 @@ module.exports = {
       }
     }
   },
+  handlers(self) {
+    return {
+      beforeUpdate: {
+        // Ensure the crop fields are updated on publishing an image
+        async autoCropRelations(req, piece, options) {
+          if (piece.aposMode !== 'published') {
+            return;
+          }
+          await self.updateImageCropRelationships(req, piece);
+        }
+      }
+    };
+  },
   commands(self) {
     return {
       remove: [
@@ -254,26 +267,7 @@ module.exports = {
           return withinOnePercent(testRatio, configuredRatio);
         }
         async function autocrop(image, widgetOptions) {
-          const nativeRatio = image.attachment.width / image.attachment.height;
-          const configuredRatio = widgetOptions.aspectRatio[0] / widgetOptions.aspectRatio[1];
-          let crop;
-          if (configuredRatio >= nativeRatio) {
-            const height = image.attachment.width / configuredRatio;
-            crop = {
-              top: Math.floor((image.attachment.height - height) / 2),
-              left: 0,
-              width: image.attachment.width,
-              height: Math.floor(height)
-            };
-          } else {
-            const width = image.attachment.height * configuredRatio;
-            crop = {
-              top: 0,
-              left: Math.floor((image.attachment.width - width) / 2),
-              width: Math.floor(width),
-              height: image.attachment.height
-            };
-          }
+          const crop = self.calculateAutocrop(image, widgetOptions.aspectRatio);
           await self.apos.attachment.crop(req, image.attachment._id, crop);
           image._fields = crop;
           // For ease of testing send back the cropped image URLs now
@@ -457,7 +451,169 @@ module.exports = {
           name: 'dummy',
           width: 0
         }).name;
+      },
+      // Given an image piece and a aspect ratio array, calculate the crop
+      // that would be applied to the image when autocropping it to the
+      // given aspect ratio.
+      calculateAutocrop(image, aspecRatio) {
+        let crop;
+        const configuredRatio = aspecRatio[0] / aspecRatio[1];
+        const nativeRatio = image.attachment.width / image.attachment.height;
+
+        if (configuredRatio >= nativeRatio) {
+          const height = image.attachment.width / configuredRatio;
+          crop = {
+            top: Math.floor((image.attachment.height - height) / 2),
+            left: 0,
+            width: image.attachment.width,
+            height: Math.floor(height)
+          };
+        } else {
+          const width = image.attachment.height * configuredRatio;
+          crop = {
+            top: 0,
+            left: Math.floor((image.attachment.width - width) / 2),
+            width: Math.floor(width),
+            height: image.attachment.height
+          };
+        }
+
+        return crop;
+      },
+      async updateImageCropRelationships(req, piece) {
+        if (!piece.relatedReverseIds?.length) {
+          return;
+        }
+        if (
+          !piece._prevAttachmentId ||
+          !piece.attachment ||
+          piece._prevAttachmentId === piece.attachment._id
+        ) {
+          return;
+        }
+        const croppedIndex = {};
+        for (const docId of piece.relatedReverseIds) {
+          await self.updateImageCropsForRelationship(req, docId, piece, croppedIndex);
+        }
+      },
+      // This handler operates on all documents of a given aposDocId. The `piece`
+      // argument is the image piece that has been updated.
+      // - Auto re-crop the image, using the same width/height ratio if the
+      // image has been cropped.
+      // - Remove any existing focal point data.
+      //
+      // `croppedIndex` is used to avoid re-cropping the same image when updating multiple
+      // documents. It's internally mutated by the handler.
+      async updateImageCropsForRelationship(req, aposDocId, piece, croppedIndex = {}) {
+        const dbDocs = await self.apos.doc.db.find({
+          aposDocId
+        }).toArray();
+        const changeSets = dbDocs.flatMap(doc => getDocRelations(doc, piece));
+        for (const changeSet of changeSets) {
+          try {
+            const cropFields = await autocrop(changeSet.image, changeSet.cropFields, croppedIndex);
+            const $set = {
+              [changeSet.docDotPath]: cropFields
+            };
+            self.logDebug(req, 'replace-autocrop', {
+              docId: changeSet.docId,
+              docTitle: changeSet.doc.title,
+              imageId: piece._id,
+              imageTitle: piece.title,
+              $set
+            });
+            await self.apos.doc.db.updateOne({
+              _id: changeSet.docId
+            }, {
+              $set
+            });
+          } catch (e) {
+            self.apos.util.error(e);
+            await self.apos.notify(
+              req,
+              req.t(
+                'apostrophe:imageOnReplaceAutocropError',
+                {
+                  title: changeSet.doc.title
+                }
+              ),
+              {
+                type: 'danger',
+                dismiss: true
+              }
+            );
+          }
+        }
+
+        if (changeSets.length) {
+          return self.apos.notify(
+            req,
+            req.t(
+              'apostrophe:imageOnReplaceAutocropMessage',
+              {
+                title: changeSets[0].doc.title
+              }
+            ),
+            {
+              type: 'success',
+              dismiss: true
+            }
+          );
+        }
+
+        function getDocRelations(doc, imagePiece) {
+          const results = [];
+          self.apos.doc.walk(doc, function (o, key, value, dotPath, ancestors) {
+            if (!value || typeof value !== 'object' || !Array.isArray(value.imageIds)) {
+              return;
+            }
+            if (!value.imageIds.includes(imagePiece.aposDocId)) {
+              return;
+            }
+            if (!value.imageFields?.[imagePiece.aposDocId]) {
+              return;
+            }
+            const cropFields = value.imageFields[imagePiece.aposDocId];
+            // We check for crop OR focal point data (because
+            // focal point has to be reset when the image is replaced).
+            if (!cropFields.width && typeof cropFields.x !== 'number') {
+              return;
+            }
+            results.push({
+              docId: doc._id,
+              docDotPath: `${dotPath}.imageFields.${imagePiece.aposDocId}`,
+              doc,
+              cropFields,
+              image: imagePiece,
+              value
+            });
+          });
+          return results;
+        }
+
+        async function autocrop(image, oldFields, croppedIndex) {
+          let crop = { ...oldFields };
+          if (crop.width) {
+            crop = self.calculateAutocrop(image, [ crop.width, crop.height ]);
+          }
+
+          const hash = cropHash(image, crop);
+          if (crop.width && !croppedIndex[hash]) {
+            await self.apos.attachment.crop(req, image.attachment._id, crop);
+            croppedIndex[hash] = true;
+          }
+          return {
+            ...crop,
+            x: null,
+            y: null
+          };
+        }
+
+        function cropHash(image, crop) {
+          return `${image.attachment._id}-${crop.top}-${crop.left}-${crop.width}-${crop.height}`;
+        }
       }
+
     };
   },
   extendMethods(self) {
@@ -515,6 +671,15 @@ module.exports = {
             }
             return [ self.apos.launder.integer(a[0]), self.apos.launder.integer(a[1]) ];
           }
+        },
+        prevAttachment: {
+          after(results) {
+            for (const result of results) {
+              if (result.attachment) {
+                result._prevAttachmentId = result.attachment._id;
+              }
+            }
+          }
         }
       }
     };

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

@@ -105,6 +105,7 @@ export default {
     },
     aspectRatio: {
       handler(newVal) {
+        this.$refs.cropper.reset();
         this.stencilProps.aspectRatio = newVal;
         this.$refs.cropper.refresh();
       }

package/modules/@apostrophecms/modal/ui/apos/components/AposModal.vue

@@ -139,9 +139,9 @@ const transitionType = computed(() => {
 
   if (props.modal.origin === 'left') {
     return 'slide-right';
-  } else {
-    return 'slide-left';
   }
+
+  return 'slide-left';
 });
 
 const shouldTrapFocus = computed(() => {
@@ -226,14 +226,13 @@ function onKeydown(e) {
   cycleElementsToFocus(e);
 }
 
-function onEnter() {
+async function onEnter() {
   emit('show-modal');
   apos.modal.stack = apos.modal.stack || [];
 
   apos.modal.stack.push(state);
-  nextTick(() => {
-    emit('ready');
-  });
+  await nextTick();
+  emit('ready');
 }
 
 function onLeave() {
@@ -346,12 +345,12 @@ function close() {
       }
     }
 
-    &.slide-left-enter,
+    &.slide-left-enter-from,
     &.slide-left-leave-to {
       transform: translateX(100%);
     }
 
-    &.slide-right-enter,
+    &.slide-right-enter-from,
     &.slide-right-leave-to {
       transform: translateX(-100%);
     }
@@ -361,7 +360,7 @@ function close() {
       transition: opacity 0.15s ease, transform 0.15s ease;
     }
 
-    &.fade-enter,
+    &.fade-enter-from,
     &.fade-leave-to {
       opacity: 0;
       transform: scale(0.95);
@@ -396,9 +395,11 @@ function close() {
       transition: opacity 0.15s ease;
     }
 
-    &.slide-enter,
-    &.slide-leave-to,
-    &.fade-enter,
+    &.slide-left-enter-from,
+    &.slide-left-leave-to,
+    &.slide-right-enter-from,
+    &.slide-right-leave-to,
+    &.fade-enter-from,
     &.fade-leave-to {
       opacity: 0;
     }

package/modules/@apostrophecms/modal/ui/apos/components/AposWidgetModalTabs.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="apos-modal-tabs" :class="{ 'apos-modal-tabs--horizontal': orientation === 'horizontal' }">
+    <ul class="apos-modal-tabs__tabs">
+      <li
+        v-for="tab in visibleTabs"
+        v-show="tab.isVisible !== false"
+        :key="tab.name"
+        class="apos-modal-tabs__tab"
+      >
+        <button
+          :id="tab.name"
+          class="apos-modal-tabs__btn"
+          :aria-selected="tab.name === current ? true : false"
+          @click="selectTab"
+        >
+          {{ $t(tab.label) }}
+          <span
+            v-if="tabErrors[tab.name] && tabErrors[tab.name].length"
+            class="apos-modal-tabs__label apos-modal-tabs__label--error"
+          >
+            {{ tabErrors[tab.name].length }} {{ generateErrorLabel(tabErrors[tab.name].length) }}
+          </span>
+        </button>
+      </li>
+      <li
+        v-if="hiddenTabs.length"
+        key="placeholder-for-hidden-tabs"
+        class="apos-modal-tabs__tab apos-modal-tabs__tab--small"
+      />
+    </ul>
+    <AposContextMenu
+      v-if="hiddenTabs.length"
+      :menu="hiddenTabs"
+      menu-placement="bottom-end"
+      :button="moreMenuButton"
+      @item-clicked="moreMenuHandler($event)"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AposWidgetModalTabs',
+  props: {
+    tabs: {
+      required: true,
+      type: Array
+    },
+    current: {
+      type: String,
+      default: ''
+    },
+    errors: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    orientation: {
+      type: String,
+      default: 'vertical'
+    }
+  },
+  emits: [ 'select-tab' ],
+  data() {
+    const visibleTabs = [];
+    const hiddenTabs = [];
+
+    for (let i = 0; i < this.tabs.length; i++) {
+      // Shallow clone is sufficient to make mutating
+      // a top-level property safe
+      const tab = { ...this.tabs[i] };
+      tab.action = tab.name;
+      if (i < 5) {
+        visibleTabs.push(tab);
+      } else {
+        hiddenTabs.push(tab);
+      }
+    }
+
+    return {
+      visibleTabs,
+      hiddenTabs,
+      moreMenuButton: {
+        icon: 'dots-vertical-icon',
+        iconOnly: true,
+        type: 'subtle'
+      }
+    };
+  },
+  computed: {
+    tabErrors() {
+      const errors = {};
+      for (const key in this.errors) {
+        errors[key] = [];
+        for (const errorKey in this.errors[key]) {
+          if (this.errors[key][errorKey]) {
+            errors[key].push(key);
+          }
+        }
+      }
+      return errors;
+    }
+  },
+  methods: {
+    generateErrorLabel(errorCount) {
+      let label = 'Error';
+      if (errorCount > 1) {
+        label += 's';
+      }
+      return label;
+    },
+    selectTab: function (e) {
+      const tab = e.target;
+      const id = tab.id;
+      this.$emit('select-tab', id);
+    },
+    moreMenuHandler(item) {
+      const lastVisibleTab = this.visibleTabs[this.visibleTabs.length - 1];
+      const selectedItem = this.hiddenTabs.find((tab) => tab.name === item);
+
+      this.hiddenTabs.splice(this.hiddenTabs.indexOf(selectedItem), 1, lastVisibleTab);
+      this.visibleTabs.splice(this.visibleTabs.length - 1, 1, selectedItem);
+
+      this.$emit('select-tab', item);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.apos-modal-tabs {
+  display: flex;
+  height: 100%;
+}
+
+:deep(.apos-context-menu) {
+  position: absolute;
+  top: 10px;
+  right: 0;
+
+  svg {
+    width: 20px;
+    height: 20px;
+    color: var(--a-base-1);
+  }
+
+  .apos-button--subtle:hover {
+    background-color: initial;
+  }
+}
+
+.apos-modal-tabs--horizontal {
+  position: relative;
+
+  .apos-modal-tabs__tabs {
+    flex-direction: row;
+    border-top: 1px solid var(--a-base-7);
+    border-bottom: 1px solid var(--a-base-7);
+  }
+
+  .apos-modal-tabs__tab {
+    display: flex;
+    width: 100%;
+  }
+
+  .apos-modal-tabs__tab--small {
+    width: 50%;
+    color: var(--a-base-1);
+    background-color: var(--a-base-10);
+    border-bottom: 1px solid var(--a-base-7);
+  }
+
+  .apos-modal-tabs__btn {
+    justify-content: center;
+    color: var(--a-base-1);
+    background-color: var(--a-base-10);
+
+    &:hover, &:focus {
+      color: var(--a-primary-light-40);
+      background-color: var(--a-base-10);
+    }
+
+    &[aria-selected='true'], &[aria-selected='true']:hover, &[aria-selected='true']:focus {
+      color: var(--a-primary);
+      background-color: var(--a-base-10);
+      border-bottom: 3px solid var(--a-primary);
+    }
+  }
+
+  .apos-modal-tabs__btn::before {
+    content: none;
+  }
+}
+
+.apos-modal-tabs__tabs {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: var(--a-base-9);
+}
+
+.apos-modal-tabs__tab {
+  display: block;
+}
+
+.apos-modal-tabs__label {
+  display: inline-block;
+  padding: 3px;
+  border: 1px solid var(--a-base-0);
+  font-size: var(--a-type-tiny);
+  border-radius: 4px 3px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  pointer-events: none;
+}
+
+.apos-modal-tabs__label--error {
+  border: 1px solid var(--a-danger);
+}
+
+.apos-modal-tabs__btn {
+  @include apos-button-reset();
+  @include type-base;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 60px;
+  padding: 25px 10px;
+  border-bottom: 1px solid var(--a-base-7);
+  color: var(--a-text-primary);
+  background-color: var(--a-base-9);
+  text-align: left;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+
+  @include media-up(lap) {
+    padding: 25px 10px 25px 20px;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    background-color: var(--a-primary);
+    transition: width 0.25s cubic-bezier(0, 1.61, 1, 1.23);
+  }
+
+  &[aria-selected='true'],
+  &[aria-selected='true']:hover,
+  &[aria-selected='true']:focus {
+    padding-left: 15px;
+    background-color: var(--a-background-primary);
+    &::before {
+      background-color: var(--a-primary);
+    }
+  }
+
+  &:hover,
+  &:focus {
+    background-color: var(--a-base-10);
+    &::before {
+      width: 3px;
+      background-color: var(--a-base-5);
+    }
+  }
+
+  &[aria-selected='true'] {
+    &::before {
+      width: 6px;
+    }
+  }
+}
+</style>

package/modules/@apostrophecms/page/index.js

@@ -2301,7 +2301,7 @@ database.`);
       // Apostrophe queries used to fetch Apostrophe pages
       // consult this method.
       getBaseUrl(req) {
-        const hostname = self.apos.i18n.locales[req.locale].hostname;
+        const hostname = self.apos.i18n.locales[req.locale]?.hostname;
 
         return hostname
           ? `${req.protocol}://${hostname}`

package/modules/@apostrophecms/page-type/index.js

@@ -474,7 +474,7 @@ module.exports = {
       }
     };
   },
-  extendMethods(self) {
+  extendMethods(self, options) {
     return {
       enableAction() {
         self.action = self.apos.modules['@apostrophecms/page'].action;
@@ -553,6 +553,7 @@ module.exports = {
 
         browserOptions.filters = self.filters;
         browserOptions.columns = self.columns;
+        browserOptions.contentChangedRefresh = options.contentChangedRefresh !== false;
 
         // Sets manager modal to AposDocsManager
         // for browsing specific page types:

package/modules/@apostrophecms/schema/ui/apos/mixins/AposInputMixin.js

@@ -55,6 +55,11 @@ export default {
     serverError: {
       type: Object,
       required: false
+    },
+
+    noBlurEmit: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -122,7 +127,7 @@ export default {
       }
     },
     focus(value) {
-      if (!value) {
+      if (!this.noBlurEmit && !value) {
         this.validateAndEmit();
       }
     }

package/modules/@apostrophecms/ui/ui/apos/utils/index.js

@@ -1,9 +1,53 @@
-export const debounce = (func, timeout) => {
-  let timer;
-  return (...args) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      func.apply(this, args);
-    }, timeout);
-  };
+module.exports = {
+  debounce(fn, delay) {
+    let timer;
+    let previousDone = true;
+
+    const setTimer = (res, rej, args, delay) => {
+      return setTimeout(() => {
+        if (!previousDone) {
+          clearTimeout(timer);
+          timer = setTimer(res, rej, args, delay);
+          return;
+        }
+
+        previousDone = false;
+        const returned = fn.apply(this, args);
+        if (returned instanceof Promise) {
+          return returned
+            .then(res)
+            .catch(rej)
+            .finally(() => {
+              previousDone = true;
+            });
+        }
+
+        previousDone = true;
+        res(returned);
+      }, delay);
+    };
+
+    return (...args) => {
+      return new Promise((resolve, reject) => {
+        clearTimeout(timer);
+        timer = setTimer(resolve, reject, args, delay);
+      });
+    };
+  },
+
+  throttle(fn, delay) {
+    let inThrottle;
+
+    return (...args) => {
+      return new Promise((resolve) => {
+        if (!inThrottle) {
+          inThrottle = true;
+          setTimeout(() => {
+            inThrottle = false;
+            resolve(fn.apply(this, args));
+          }, delay);
+        }
+      });
+    };
+  }
 };

package/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue

@@ -9,9 +9,15 @@
     @no-modal="$emit('safe-close')"
   >
     <template #breadcrumbs>
-      <AposModalBreadcrumbs
-        v-if="breadcrumbs && breadcrumbs.length"
-        :items="breadcrumbs"
+      <AposModalBreadcrumbs v-if="breadcrumbs && breadcrumbs.length" :items="breadcrumbs" />
+      <AposWidgetModalTabs
+        v-if="tabs.length && tabs[0].name !== 'ungrouped'"
+        :key="tabKey"
+        :current="currentTab"
+        :tabs="tabs"
+        orientation="horizontal"
+        :errors="fieldErrors"
+        @select-tab="switchPane"
       />
     </template>
     <template #main>
@@ -19,9 +25,13 @@
         <template #bodyMain>
           <div class="apos-widget-editor__body">
             <AposSchema
-              ref="schema"
+              v-for="tab in tabs"
+              v-show="tab.name === currentTab"
+              :key="tab.name"
+              :ref="tab.name"
               :trigger-validation="triggerValidation"
-              :schema="schema"
+              :current-fields="groups[tab.name].fields"
+              :schema="groups[tab.name].schema"
               :model-value="docFields"
               :meta="meta"
               :following-values="followingValues()"
@@ -52,13 +62,14 @@
 <script>
 import AposModifiedMixin from 'Modules/@apostrophecms/ui/mixins/AposModifiedMixin';
 import AposEditorMixin from 'Modules/@apostrophecms/modal/mixins/AposEditorMixin';
+import AposModalTabsMixin from 'Modules/@apostrophecms/modal/mixins/AposModalTabsMixin';
 import { detectDocChange } from 'Modules/@apostrophecms/schema/lib/detectChange';
 import cuid from 'cuid';
 import { klona } from 'klona';
 
 export default {
   name: 'AposWidgetEditor',
-  mixins: [ AposModifiedMixin, AposEditorMixin ],
+  mixins: [ AposModifiedMixin, AposEditorMixin, AposModalTabsMixin ],
   props: {
     type: {
       required: true,
@@ -107,6 +118,7 @@ export default {
         data: {},
         hasErrors: false
       },
+      fieldErrors: {},
       modal: {
         title: this.editLabel,
         active: false,
@@ -181,12 +193,16 @@ export default {
   },
   methods: {
     updateDocFields(value) {
-      this.docFields = value;
+      this.docFields.data = {
+        ...this.docFields.data,
+        ...value.data
+      };
       this.evaluateConditions();
     },
     async save() {
       this.triggerValidation = true;
       this.$nextTick(async () => {
+        const widget = klona(this.docFields.data);
         if (this.docFields.hasErrors) {
           this.triggerValidation = false;
           return;
@@ -199,7 +215,6 @@ export default {
           });
           return;
         }
-        const widget = this.docFields.data;
         if (!widget.type) {
           widget.type = this.type;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apostrophe",
-  "version": "4.2.3",
+  "version": "4.3.0",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {

package/test/images.js

@@ -1,9 +1,12 @@
 const t = require('../test-lib/test.js');
-const assert = require('assert');
+const assert = require('assert/strict');
 const fs = require('fs');
+const fsp = require('fs/promises');
 const path = require('path');
 const FormData = require('form-data');
 
+const publicFolderPath = path.join(process.cwd(), 'test/public');
+
 describe('Images', function() {
 
   let apos;
@@ -73,7 +76,8 @@ describe('Images', function() {
   // Test pieces.list()
   it('should clean up any existing images for testing', async function() {
     try {
-      const response = await apos.doc.db.deleteMany({ type: '@apostrophecms/image' }
+      const response = await apos.doc.db.deleteMany(
+        { type: '@apostrophecms/image' }
       );
       assert(response.result.ok === 1);
     } catch (e) {
@@ -263,6 +267,140 @@ describe('Images', function() {
     assert.strictEqual(fields.height, 225);
   });
 
+  it('should update crop fields when replacing an image attachment', async function () {
+    await t.destroy(apos);
+    await fsp.rm(path.join(publicFolderPath, 'uploads'), {
+      recursive: true,
+      force: true
+    });
+    apos = await t.create({
+      root: module,
+      modules: {
+        'test-piece': {
+          extend: '@apostrophecms/piece-type',
+          fields: {
+            add: {
+              main: {
+                type: 'area',
+                options: {
+                  widgets: {
+                    '@apostrophecms/image': {
+                      aspectRatio: [ 3, 2 ]
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+    await insertUser({
+      title: 'admin',
+      username: 'admin',
+      password: 'admin',
+      email: 'ad@min.com',
+      role: 'admin'
+    });
+
+    // Upload an image (landscape), crop it, insert a piece with the cropped image
+    jar = await login('admin');
+    const formData = new FormData();
+    const stream = fs.createReadStream(
+      path.join(apos.rootDir, '/public/test-image-landscape.jpg')
+    );
+    formData.append('file', stream);
+    const attachment = await apos.http.post('/api/v1/@apostrophecms/attachment/upload', {
+      body: formData,
+      jar
+    });
+    stream.close();
+    image = await apos.http.post('/api/v1/@apostrophecms/image', {
+      body: {
+        title: 'Test Image Landscape',
+        attachment
+      },
+      jar
+    });
+    assert.equal(image._prevAttachmentId, attachment._id);
+    const crop = await apos.http.post('/api/v1/@apostrophecms/image/autocrop', {
+      body: {
+        relationship: [ image ],
+        widgetOptions: {
+          aspectRatio: [ 3, 2 ]
+        }
+      },
+      jar
+    });
+    let piece = await apos.http.post('/api/v1/test-piece', {
+      jar,
+      body: {
+        title: 'Test Piece',
+        slug: 'test-piece',
+        type: 'test-piece',
+        main: {
+          metaType: 'area',
+          items: [
+            {
+              type: '@apostrophecms/image',
+              metaType: 'widget',
+              imageIds: [ image.aposDocId ],
+              imageFields: {
+                [image.aposDocId]: crop.relationship[0]._fields
+              },
+              _image: [ crop.relationship[0] ]
+            }
+          ]
+        }
+      }
+    });
+
+    let imageFields = piece.main.items[0].imageFields[image.aposDocId];
+    assert(imageFields, 'imageFields should be present when creating the piece');
+    assert.equal(imageFields.width / imageFields.height, 3 / 2, 'aspect ratio should be 3:2');
+    await fsp.access(
+      path.join(
+        publicFolderPath,
+        attachment._urls.original.replace(
+          '.jpg',
+        `.${imageFields.left}.${imageFields.top}.${imageFields.width}.${imageFields.height}.jpg`
+        )
+      )
+    );
+
+    // Replace the image with portrait orientation, verify that the aspect ratio is preserved
+    const formDataPortrait = new FormData();
+    const streamPortrait = fs.createReadStream(path.join(apos.rootDir, '/public/test-image.jpg'));
+    formDataPortrait.append('file', streamPortrait);
+    const attachmentPortrait = await apos.http.post('/api/v1/@apostrophecms/attachment/upload', {
+      body: formDataPortrait,
+      jar
+    });
+    image = await apos.http.put(`/api/v1/@apostrophecms/image/${image._id}`, {
+      body: {
+        title: 'Test Image Portrait',
+        attachment: attachmentPortrait
+      },
+      jar
+    });
+    streamPortrait.close();
+    piece = await apos.http.get(`/api/v1/test-piece/${piece._id}`, {
+      jar
+    });
+    imageFields = piece.main.items[0].imageFields[image.aposDocId];
+    assert(imageFields, 'imageFields should be present after replacing the image attachment');
+    assert.equal(imageFields.width / imageFields.height, 3 / 2, 'aspect ratio should be 3:2');
+    await fsp.access(
+      path.join(
+        publicFolderPath,
+        attachmentPortrait._urls.original.replace(
+          '.jpg',
+        `.${imageFields.left}.${imageFields.top}.${imageFields.width}.${imageFields.height}.jpg`
+        )
+      )
+    );
+  });
+
   async function insertUser(info) {
     const user = apos.user.newInstance();
     assert(user);

package/test/utils.js

@@ -1,6 +1,7 @@
 const t = require('../test-lib/test.js');
 const assert = require('assert');
 const _ = require('lodash');
+const { debounce, throttle } = require('../modules/@apostrophecms/ui/ui/apos/utils/index');
 
 describe('Utils', function() {
 
@@ -369,5 +370,143 @@ describe('Utils', function() {
       assert(data.shoes[0].size === 8);
     });
 
+    it('can debounce functions and should be be awaitable with promises', async function () {
+      const calledNormal = [];
+      const calledAsync = [];
+      const calledAsyncSlow = [];
+      let asyncErrCatched = false;
+
+      const debouncedNormal = debounce(normalFn, 50);
+      const debouncedAsync = debounce(asyncFn, 50);
+      const debouncedAsyncSlow = debounce(asyncSlowFn, 50);
+      const debouncedAsyncErr = debounce(AsyncErrFn, 50);
+
+      debouncedNormal(1);
+      debouncedNormal(2);
+      await debouncedNormal(3);
+
+      debouncedAsync(1);
+      await wait(100);
+      debouncedAsync(2);
+      await debouncedAsync(3);
+
+      debouncedAsyncSlow(1);
+      await wait(100);
+      debouncedAsyncSlow(2);
+      debouncedAsyncSlow(3);
+      await wait(60);
+      await debouncedAsyncSlow(4);
+
+      try {
+        await debouncedAsyncErr(1);
+      } catch (err) {
+        asyncErrCatched = true;
+      }
+
+      const actual = {
+        calledNormal,
+        calledAsync,
+        calledAsyncSlow,
+        asyncErrCatched
+      };
+
+      const expected = {
+        calledNormal: [ 3, 3 ],
+        calledAsync: [ 1, 1, 3, 3 ],
+        calledAsyncSlow: [ 1, 1, 3, 3, 4, 4 ],
+        asyncErrCatched: true
+      };
+
+      assert.deepEqual(actual, expected);
+
+      function normalFn(num) {
+        calledNormal.push(num);
+        calledNormal.push(num);
+        return 'test';
+      };
+
+      async function asyncFn(num) {
+        calledAsync.push(num);
+        await wait(50);
+        calledAsync.push(num);
+        return 'async';
+      }
+
+      async function asyncSlowFn(num) {
+        calledAsyncSlow.push(num);
+        await wait(75);
+        calledAsyncSlow.push(num);
+        return 'asyncSlow';
+      }
+
+    });
+
+    it('can throttle functions', async function () {
+      const calledNormal = [];
+      const calledAsync = [];
+      let asyncErrCatched = false;
+
+      const throttledNormal = throttle(normalFn, 50);
+      const throttledAsync = throttle(asyncFn, 50);
+      const throttledAsyncErr = throttle(AsyncErrFn, 100);
+
+      throttledNormal(1);
+      await wait(100);
+      throttledNormal(2);
+      throttledNormal(3);
+      throttledNormal(4);
+
+      await wait(100);
+      await throttledNormal(5);
+
+      throttledAsync(1);
+      throttledAsync(2);
+      await wait(100);
+      await throttledAsync(3);
+
+      try {
+        await throttledAsyncErr(1);
+      } catch (err) {
+        asyncErrCatched = true;
+      }
+
+      const actual = {
+        calledNormal,
+        calledAsync,
+        asyncErrCatched
+      };
+
+      const expected = {
+        calledNormal: [ 1, 2, 5 ],
+        calledAsync: [ 1, 3 ],
+        asyncErrCatched: true
+      };
+
+      assert.deepEqual(actual, expected);
+
+      function normalFn(num) {
+        calledNormal.push(num);
+        return 'test';
+      };
+
+      async function asyncFn(num, time = 50) {
+        await wait(time);
+        calledAsync.push(num);
+        return 'async';
+      }
+    });
   });
 });
+
+function wait(delay) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve('done');
+    }, delay);
+  });
+};
+
+async function AsyncErrFn(num, time = 50) {
+  await wait();
+  throw new Error('async error');
+}