apostrophe 3.27.0 → 3.28.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 3.28.0 (2022-08-31)
+
+### Fixes
+
+* Fix UI bug when creating a document via a relationship.
+
+### Adds
+
+* Support for uploading `webp` files for display as images. This is supported by all current browsers now that Microsoft has removed IE11. For best results, you should run `npm update` on your project to make sure you are receiving the latest release of `uploadfs` which uses `sharp` for image processing. Thanks to [Isaac Preston](https://github.com/ixc7) for this addition.
+* Clicking outside a modal now closes it, the same way the `Escape` key does when pressed.
+* `checkboxes` fields now support `min` and `max` properties. Thanks to [Gabe Flores](https://github.com/gabeflores-appstem).
+
 ## 3.27.0 (2022-08-18)
 
 ### Adds

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

@@ -54,7 +54,8 @@ module.exports = {
           'gif',
           'jpg',
           'png',
-          'svg'
+          'svg',
+          'webp'
         ],
         extensionMaps: { jpeg: 'jpg' },
         // uploadfs should treat this as an image and create scaled versions
@@ -90,14 +91,16 @@ module.exports = {
     self.croppable = {
       gif: true,
       jpg: true,
-      png: true
+      png: true,
+      webp: true
     };
 
     // Do NOT add keys here unless they have the value `true`
     self.sized = {
       gif: true,
       jpg: true,
-      png: true
+      png: true,
+      webp: true
     };
 
     self.sizeAvailableInArchive = self.options.sizeAvailableInArchive || 'one-sixth';
@@ -1018,7 +1021,7 @@ module.exports = {
             return;
           }
           let sizes;
-          if (![ 'gif', 'jpg', 'png' ].includes(self.resolveExtension(attachment.extension))) {
+          if (![ 'gif', 'jpg', 'png', 'webp' ].includes(self.resolveExtension(attachment.extension))) {
             sizes = [ { name: 'original' } ];
           } else {
             sizes = self.imageSizes.concat([ { name: 'original' } ]);

package/modules/@apostrophecms/attachment/lib/tasks/rescale.js

@@ -12,7 +12,7 @@ module.exports = function(self) {
     const total = await self.db.count();
     let n = 0;
     await self.each({}, argv.parallel || 1, async function(file) {
-      if (!_.includes([ 'jpg', 'png', 'gif' ], file.extension)) {
+      if (!_.includes([ 'jpg', 'png', 'gif', 'webp' ], file.extension)) {
         n++;
         console.log('Skipping a non-image attachment: ' + file.name + '.' + file.extension);
         return;

package/modules/@apostrophecms/doc-type/ui/apos/components/AposDocEditor.vue

@@ -727,6 +727,9 @@ export default {
       window.localStorage.setItem(this.savePreferenceName, pref);
     },
     onContentChanged(e) {
+      if (this.original?._id !== e.doc._id) {
+        return;
+      }
       if (e.doc.type !== this.docType) {
         this.docType = e.doc.type;
       }

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

@@ -1,8 +1,8 @@
 <template>
   <transition
     :name="transitionType"
-    @enter="finishEnter"
-    @leave="finishExit"
+    @enter="onEnter"
+    @leave="onLeave"
     :duration="250"
   >
     <section
@@ -14,12 +14,18 @@
       ref="modalEl"
     >
       <transition :name="transitionType">
-        <div class="apos-modal__overlay" v-if="modal.showModal" />
+        <div
+          @click="close"
+          v-if="modal.showModal"
+          class="apos-modal__overlay"
+        />
       </transition>
       <transition :name="transitionType" @after-leave="$emit('inactive')">
         <div
-          v-if="modal.showModal" :class="innerClasses"
-          class="apos-modal__inner" data-apos-modal-inner
+          v-if="modal.showModal"
+          :class="innerClasses"
+          class="apos-modal__inner"
+          data-apos-modal-inner
         >
           <template v-if="modal.busy">
             <div class="apos-modal__busy">
@@ -180,16 +186,13 @@ export default {
     }
   },
   methods: {
-    esc (e) {
-      if (apos.modal.stack[apos.modal.stack.length - 1] !== this) {
-        return;
-      }
-      if (e.keyCode === 27) {
-        e.stopPropagation();
-        this.$emit('esc');
+    onKeydown (e) {
+      const hasPressedEsc = e.keyCode === 27;
+      if (hasPressedEsc) {
+        this.close(e);
       }
     },
-    finishEnter () {
+    onEnter () {
       this.$emit('show-modal');
       this.bindEventListeners();
       apos.modal.stack = apos.modal.stack || [];
@@ -198,7 +201,7 @@ export default {
         this.$emit('ready');
       });
     },
-    finishExit () {
+    onLeave () {
       this.removeEventListeners();
       this.$emit('no-modal');
       // pop doesn't quite suffice because of race conditions when
@@ -206,10 +209,17 @@ export default {
       apos.modal.stack = apos.modal.stack.filter(modal => modal !== this);
     },
     bindEventListeners () {
-      window.addEventListener('keydown', this.esc);
+      window.addEventListener('keydown', this.onKeydown);
     },
     removeEventListeners () {
-      window.removeEventListener('keydown', this.esc);
+      window.removeEventListener('keydown', this.onKeydown);
+    },
+    close (e) {
+      if (apos.modal.stack[apos.modal.stack.length - 1] !== this) {
+        return;
+      }
+      e.stopPropagation();
+      this.$emit('esc');
     },
     trapFocus () {
       // Adapted from https://uxdesign.cc/how-to-trap-focus-inside-modal-to-make-it-ada-compliant-6a50f9a70700

package/modules/@apostrophecms/schema/lib/addFieldTypes.js

@@ -254,6 +254,13 @@ module.exports = (self) => {
           });
         }
       }
+
+      if ((field.min !== undefined) && (destination[field.name].length < field.min)) {
+        throw self.apos.error('min');
+      }
+      if ((field.max !== undefined) && (destination[field.name].length > field.max)) {
+        throw self.apos.error('max');
+      }
     },
     index: function (value, field, texts) {
       const silent = field.silent === undefined ? true : field.silent;
@@ -300,6 +307,14 @@ module.exports = (self) => {
           return choices;
         }
       });
+    },
+    validate: function (field, options, warn, fail) {
+      if (field.max && typeof field.max !== 'number') {
+        fail('Property "max" must be a number');
+      }
+      if (field.min && typeof field.min !== 'number') {
+        fail('Property "min" must be a number');
+      }
     }
   });
 

package/modules/@apostrophecms/schema/ui/apos/components/AposInputCheckboxes.vue

@@ -47,6 +47,17 @@ export default {
         return 'required';
       }
 
+      if (this.field.min) {
+        if ((values != null) && (values.length < this.field.min)) {
+          return 'min';
+        }
+      }
+      if (this.field.max) {
+        if ((values != null) && (values.length > this.field.max)) {
+          return 'max';
+        }
+      }
+
       if (Array.isArray(values)) {
         values.forEach(chosen => {
           if (!this.choices.map(choice => {

package/package.json

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