apostrophe 3.63.3 → 4.1.0

package/.eslintrc

@@ -34,8 +34,7 @@
     "vue/max-attributes-per-line": [
       "warn",
       {
-        "singleline": 2,
-        "multiline": 2
+        "singleline": 2
       }
     ],
     "vue/singleline-html-element-content-newline": [
@@ -51,10 +50,20 @@
           "textarea"
         ]
       }
-    ],
-    "vue/attributes-order": 0
+    ]
   },
   "overrides": [
+    {
+      "files": "*.vue",
+      "globals": {
+        "defineProps": "readable",
+        "defineEmits": "readable",
+        "defineExpose": "readable",
+        "defineOptions": "readable",
+        "defineModel": "readable",
+        "defineSlots": "readable"
+      }
+    },
     {
       "files": [
         "**/ui/**/*.js"

package/CHANGELOG.md

@@ -1,17 +1,49 @@
 # Changelog
 
-## 3.63.3 (2024-03-14)
+## 4.1.0 (2024-03-20)
+
+### Fixes
+
+* 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 
+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.
+* Fix the missing attachment icon. The responsibility for checking whether an attachment
+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 highlight class in UI when comparing documents.
+
+## 4.0.0 (2024-03-12)
 
 ### Adds
 
-* Add translation keys used by the multisite assembly module. This was released ahead of
-our regular schedule because the multisite module was released early with the expectation
-that these keys would be present.
+* Add translation keys used by the multisite assembly module.
+* Add side by side comparison support in AposSchema component.
+* Add `beforeLocalize` and `afterLocalize` events.
+* Add custom manager indicators support via `apos.schema.addManagerIndicator({ component, props, if })`. The component registered this way will be automatically rendered in the manager modal.
+* Add the possibility to make widget modals wider, which can be useful for widgets that contain areas taking significant space. See [documentation](https://v3.docs.apostrophecms.org/reference/modules/widget-type.html#options).
+* Temporarily add `translation` module to support document translations via the `@apostrophecms-pro/automatic-translation` module.
+**The `translation` core module may be removed or refactored to reduce overhead in the core,** so its presence should
+not be relied upon.
+
+### Changes
+
+* Migrate to Vue 3. This entails changes to some admin UI code, as detailed in our public announcement.
+There are no other backwards incompatible changes in apostrophe version 4.0.0.
+Certain other modules containing custom admin UI have also been updated in a new major version to be compatible,
+as noted in our announcement and on the migration page of our website.
 
 ### Fixes
 
+* Adds `textStyle` to Tiptap types so that spans are rendered on RT initialization
 * `field.help` and `field.htmlHelp` are now correctly translated when displayed in a tooltip.
-This was also an expectation for the multisite module.
+* Bump the `he` package to most recent version.
+* Notification REST APIs should not directly return the result of MongoDB operations.
 
 ## 3.63.2 (2024-03-01)
 

package/defaults.js

@@ -55,6 +55,7 @@ module.exports = {
     '@apostrophecms/file-tag': {},
     '@apostrophecms/soft-redirect': {},
     '@apostrophecms/submitted-draft': {},
-    '@apostrophecms/command-menu': {}
+    '@apostrophecms/command-menu': {},
+    '@apostrophecms/translation': {}
   }
 };

package/modules/@apostrophecms/admin-bar/ui/apos/apps/AposAdminBar.js

@@ -1,22 +1,12 @@
-import Vue from 'Modules/@apostrophecms/ui/lib/vue';
+import createApp from 'Modules/@apostrophecms/ui/lib/vue';
 
 export default function() {
+  const component = apos.vueComponents.TheAposAdminBar;
   // Careful, login page is in user scene but has no admin bar
-  if (apos.adminBar) {
-    return new Vue({
-      el: '#apos-admin-bar',
-      computed: {
-        apos () {
-          return window.apos;
-        }
-      },
-      render: function (h) {
-        return h('TheAposAdminBar', {
-          props: {
-            items: apos.adminBar.items
-          }
-        });
-      }
-    });
+  const el = document.querySelector('#apos-admin-bar');
+  if (!apos.adminBar || !el) {
+    return;
   }
+  const app = createApp(component, { items: apos.adminBar.items || [] });
+  app.mount(el);
 };

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

@@ -4,8 +4,8 @@
     class="apos-admin-bar-wrapper"
     :class="themeClass"
   >
-    <div class="apos-admin-bar-spacer" ref="spacer" />
-    <nav class="apos-admin-bar" ref="adminBar">
+    <div ref="spacer" class="apos-admin-bar-spacer" />
+    <nav ref="adminBar" class="apos-admin-bar">
       <div class="apos-admin-bar__row">
         <AposLogoPadless class="apos-admin-bar__logo" />
         <TheAposAdminBarMenu :items="menuItems" />
@@ -18,10 +18,10 @@
       </div>
       <TheAposContextBar @visibility-changed="setSpacer" />
       <component
-        v-for="bar in bars"
         v-bind="bar.props || {}"
-        :key="bar.id"
         :is="bar.componentName"
+        v-for="bar in bars"
+        :key="bar.id"
       />
     </nav>
   </div>
@@ -36,9 +36,7 @@ export default {
   props: {
     items: {
       type: Array,
-      default: function () {
-        return [];
-      }
+      required: true
     }
   },
   computed: {
@@ -55,7 +53,7 @@ export default {
       return this.moduleOptions.bars;
     }
   },
-  async mounted() {
+  mounted() {
     this.setSpacer();
   },
   methods: {
@@ -86,7 +84,7 @@ export default {
   background: var(--a-background-primary);
 }
 
-::v-deep .apos-admin-bar__row {
+:deep(.apos-admin-bar__row) {
   display: flex;
   align-items: center;
   height: 35px;
@@ -100,7 +98,7 @@ export default {
   margin-right: 10px;
 }
 
-::v-deep .apos-admin-bar__control-set {
+:deep(.apos-admin-bar__control-set) {
   @include type-base;
   display: flex;
   width: 100%;
@@ -111,27 +109,27 @@ export default {
   margin-left: auto;
 }
 
-::v-deep .apos-context-menu__pane {
+:deep(.apos-context-menu__pane) {
   min-width: 150px;
 }
-::v-deep .flip-enter { // to the ground
+:deep(.flip-enter) { // to the ground
   transform: translateY(-20%);
   opacity: 0;
 }
-::v-deep .flip-leave { // in the frame
+:deep(.flip-leave) { // in the frame
   transform: translateY(0);
   opacity: 1;
 }
-::v-deep .flip-enter-to { // from the ground
+:deep(.flip-enter-to) { // from the ground
   transform: translateY(0);
   opacity: 1;
 }
-::v-deep .flip-leave-to { // to the sky
+:deep(.flip-leave-to) { // to the sky
   transform: translateY(20%);
   opacity: 0;
 }
 
-::v-deep .flip-enter-active, ::v-deep .flip-leave-active {
+:deep(.flip-enter-active), :deep(.flip-leave-active) {
   transition: all 150ms;
   &.apos-admin-bar__control-set__group {
     position: absolute;

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

@@ -212,7 +212,7 @@ export default {
     right: 0;
   }
 
-  &::v-deep .apos-button__label {
+  &:deep(.apos-button__label) {
     @include type-small;
     color: var(--a-primary);
     font-weight: var(--a-weight-bold);

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

@@ -1,20 +1,24 @@
 <template>
   <ul class="apos-admin-bar__items">
-    <li class="apos-admin-bar__item" v-if="pageTree">
+    <li v-if="pageTree" class="apos-admin-bar__item">
       <AposButton
-        type="subtle" label="apostrophe:pages"
+        type="subtle"
+        label="apostrophe:pages"
         class="apos-admin-bar__btn"
         :modifiers="['no-motion']"
         @click="emitEvent('@apostrophecms/page:manager')"
       />
     </li>
     <li
-      v-for="item in menuItems" :key="item.name"
+      v-for="item in menuItems"
+      :key="item.name"
       class="apos-admin-bar__item"
     >
       <AposContextMenu
-        v-if="item.items" class="apos-admin-bar__sub"
-        :menu="item.items" :button="{
+        v-if="item.items"
+        class="apos-admin-bar__sub"
+        :menu="item.items"
+        :button="{
           label: item.label,
           modifiers: ['no-motion'],
           class: 'apos-admin-bar__btn',
@@ -23,16 +27,16 @@
         @item-clicked="emitEvent"
       />
       <Component
-        v-else
         :is="item.options && item.options.component || 'AposButton'"
+        v-else
         type="subtle"
-        @click="emitEvent(item.action)"
         :label="item.label"
         :modifiers="['no-motion']"
         class="apos-admin-bar__btn"
+        @click="emitEvent(item.action)"
       />
     </li>
-    <li class="apos-admin-bar__item" v-if="createMenu.length > 0">
+    <li v-if="createMenu.length > 0" class="apos-admin-bar__item">
       <AposContextMenu
         class="apos-admin-bar__create"
         :menu="createMenu"
@@ -52,16 +56,19 @@
     >
       <template v-for="item in trayItems">
         <Component
-          v-if="item.options.component"
           :is="item.options.component"
+          v-if="item.options.component"
           :key="`${item.name}.component`"
         />
         <AposButton
           v-else
           :key="`${item.name}.fallback`"
-          type="subtle" :modifiers="['small', 'no-motion']"
-          :tooltip="trayItemTooltip(item)" class="apos-admin-bar__context-button"
-          :icon="item.options.icon" :icon-only="true"
+          type="subtle"
+          :modifiers="['small', 'no-motion']"
+          :tooltip="trayItemTooltip(item)"
+          class="apos-admin-bar__context-button"
+          :icon="item.options.icon"
+          :icon-only="true"
           :label="item.label"
           :state="trayItemState[item.name] ? [ 'active' ] : []"
           @click="emitEvent(item.action)"
@@ -177,15 +184,15 @@ export default {
   align-items: center;
 }
 
-.apos-admin-bar__sub ::v-deep .apos-context-menu__btn {
+.apos-admin-bar__sub :deep(.apos-context-menu__btn) {
   border-radius: 0;
 }
 
-.apos-admin-bar__sub ::v-deep .apos-context-menu__popup {
+.apos-admin-bar__sub :deep(.apos-context-menu__popup) {
   top: calc(100% + 5px);
 }
 
-::v-deep .apos-admin-bar__create {
+:deep(.apos-admin-bar__create) {
   margin-left: 10px;
 
   .apos-context-menu__btn {

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

@@ -54,12 +54,12 @@ export default {
   display: inline-flex;
   align-items: center;
 
-  ::v-deep .apos-button {
+  :deep(.apos-button) {
     @include type-base;
     color: var(--a-text-primary);
   }
 
-  ::v-deep .apos-context-menu__popup {
+  :deep(.apos-context-menu__popup) {
     right: 0;
     transform: translatex(10px);
   }

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

@@ -5,12 +5,12 @@
         :v-if="editMode"
         :can-undo="canUndo"
         :can-redo="canRedo"
-        @undo="undo"
-        @redo="redo"
         :retrying="retrying"
         :editing="editing"
         :saving="saving"
         :saved="saved"
+        @undo="undo"
+        @redo="redo"
       />
       <TheAposContextTitle
         v-if="!hasCustomUi"
@@ -531,12 +531,17 @@ export default {
       }
 
       const { action } = window.apos.modules[this.context.type];
-      const doc = await apos.http.get(`${action}/${this.context.aposDocId}`, {
-        qs: {
-          aposMode: this.draftMode,
-          project: { _url: 1 }
-        }
-      });
+      let doc;
+      try {
+        doc = await apos.http.get(`${action}/${this.context.aposDocId}`, {
+          qs: {
+            aposMode: this.draftMode,
+            project: { _url: 1 }
+          }
+        });
+      } catch (err) {
+        return;
+      }
 
       if (this.urlDiffers(doc._url)) {
         // Slug changed, change browser URL to reflect the actual url of the doc

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

@@ -11,12 +11,14 @@
       further illustrate this concept.
     -->
     <div
-      v-if="!editMode" :key="'switchToEditMode'"
+      v-if="!editMode"
+      :key="'switchToEditMode'"
       class="apos-admin-bar__control-set__group"
     >
       <AposButton
         class="apos-admin-bar__context-button"
-        label="apostrophe:edit" type="subtle"
+        label="apostrophe:edit"
+        type="subtle"
         :modifiers="['small', 'no-motion']"
         :tooltip="{
           content: 'apostrophe:toggleEditMode',
@@ -38,20 +40,23 @@
       <AposButton
         v-if="canSwitchToPreviewMode && !isAutopublished"
         class="apos-admin-bar__context-button"
-        label="apostrophe:preview" :tooltip="{
+        label="apostrophe:preview"
+        :tooltip="{
           content: 'apostrophe:previewTooltip',
           placement: 'bottom'
         }"
-        type="subtle" :modifiers="['small', 'no-motion']"
+        type="subtle"
+        :modifiers="['small', 'no-motion']"
         @click="switchEditMode(false)"
       />
       <AposButton
         v-if="editMode && !isAutopublished"
-        type="primary" :label="publishLabel"
+        type="primary"
+        :label="publishLabel"
         :disabled="!readyToPublish"
         class="apos-admin-bar__btn apos-admin-bar__context-button"
-        @click="onPublish"
         :modifiers="['no-motion']"
+        @click="onPublish"
       />
     </div>
   </transition-group>
@@ -66,7 +71,10 @@ export default {
         return null;
       }
     },
-    hasCustomUi: Boolean,
+    hasCustomUi: {
+      type: Boolean,
+      required: true
+    },
     context: {
       type: Object,
       required: true
@@ -135,7 +143,7 @@ export default {
       return !this.editMode;
     },
     canSwitchToPreviewMode() {
-      return this.editMode && !this.hasCustomUI;
+      return this.editMode && !this.hasCustomUi;
     }
   },
   mounted() {
@@ -143,7 +151,7 @@ export default {
     apos.bus.$on('command-menu-admin-bar-toggle-edit-preview', this.toggleEditPreviewMode);
     apos.bus.$on('command-menu-admin-bar-publish-draft', this.onPublish);
   },
-  destroyed() {
+  unmounted() {
     apos.bus.$off('command-menu-admin-bar-toggle-edit-preview', this.toggleEditPreviewMode);
     apos.bus.$off('command-menu-admin-bar-publish-draft', this.onPublish);
   },
@@ -179,7 +187,7 @@ export default {
 <style lang="scss" scoped>
 .apos-admin-bar__control-set--mode-and-settings {
   justify-content: flex-end;
-  & ::v-deep .apos-button {
+  &:deep(.apos-button) {
     margin-left: 4px;
   }
 }

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

@@ -6,8 +6,8 @@
   >
     <span
       v-show="true"
-      class="apos-admin-bar__title"
       :key="'title'"
+      class="apos-admin-bar__title"
     >
       <AposIndicator
         icon="information-outline-icon"
@@ -31,9 +31,9 @@
           :button="draftButton"
           :menu="draftMenu"
           :disabled="hasCustomUi || isUnpublished"
-          @item-clicked="switchDraftMode"
           menu-offset="13, 10"
           menu-placement="bottom-end"
+          @item-clicked="switchDraftMode"
         />
         <AposLabel
           v-else
@@ -43,9 +43,9 @@
         />
       </div>
       <AposLabel
-        class="apos-admin-bar__title-context-label"
         v-for="{id, label, tooltip = '', modifiers = []} in moduleOptions.contextLabels"
         :key="id"
+        class="apos-admin-bar__title-context-label"
         :label="label"
         :tooltip="tooltip"
         :modifiers="modifiers"
@@ -130,7 +130,7 @@ export default {
   mounted() {
     apos.bus.$on('command-menu-admin-bar-toggle-publish-draft', this.togglePublishDraftMode);
   },
-  destroyed() {
+  unmounted() {
     apos.bus.$off('command-menu-admin-bar-toggle-publish-draft', this.togglePublishDraftMode);
   },
   methods: {

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

@@ -11,9 +11,12 @@
     >
       <AposButton
         :disabled="!canUndo"
-        type="subtle" :modifiers="['small', 'no-motion']"
-        label="apostrophe:undo" class="apos-admin-bar__context-button"
-        icon="undo-icon" :icon-only="true"
+        type="subtle"
+        :modifiers="['small', 'no-motion']"
+        label="apostrophe:undo"
+        class="apos-admin-bar__context-button"
+        icon="undo-icon"
+        :icon-only="true"
         @click="undo"
       />
     </div>
@@ -23,9 +26,12 @@
     >
       <AposButton
         :disabled="!canRedo"
-        type="subtle" :modifiers="['small', 'no-motion']"
-        label="apostrophe:redo" class="apos-admin-bar__context-button"
-        icon="redo-icon" :icon-only="true"
+        type="subtle"
+        :modifiers="['small', 'no-motion']"
+        label="apostrophe:redo"
+        class="apos-admin-bar__context-button"
+        icon="redo-icon"
+        :icon-only="true"
         @click="redo"
       />
     </div>
@@ -74,7 +80,7 @@ export default {
     apos.bus.$on('command-menu-admin-bar-undo', this.undo);
     apos.bus.$on('command-menu-admin-bar-redo', this.redo);
   },
-  destroyed() {
+  unmounted() {
     apos.bus.$off('command-menu-admin-bar-undo', this.undo);
     apos.bus.$off('command-menu-admin-bar-redo', this.redo);
   },
@@ -93,7 +99,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-  ::v-deep .apos-admin-bar__context-button.apos-button__wrapper {
+  :deep(.apos-admin-bar__context-button.apos-button__wrapper) {
     display: flex;
   }
 </style>

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

@@ -6,10 +6,11 @@
     <span class="apos-admin-bar__status__inner">
       <component
         :is="savingIndicator.componentName"
+        v-if="savingIndicator?.componentName"
         v-bind="savingIndicator.options"
         class="apos-admin-bar__status__icon"
       />
-      <div class="apos-admin-bar__status__label" ref="statusLabel">
+      <div ref="statusLabel" class="apos-admin-bar__status__label">
         {{ $t(savingLabel) }}
       </div>
     </span>