apostrophe 3.63.2 → 4.0.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,5 +1,26 @@
 # Changelog
 
+## 4.0.0 (2024-03-12)
+
+### Adds
+
+* Add translation keys used by the multisite assembly module.
+* Add side by side comparison support in AposSchema component.
+* 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).
+
+### 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.
+* Notification REST APIs should not directly return the result of MongoDB operations.
+
 ## 3.63.2 (2024-03-01)
 
 ### Security

package/defaults.js

@@ -4,6 +4,7 @@ module.exports = {
     '@apostrophecms/error': {},
     '@apostrophecms/util': {},
     '@apostrophecms/i18n': {},
+    '@apostrophecms/multisite-i18n': {},
     '@apostrophecms/task': {},
     '@apostrophecms/schema': {},
     '@apostrophecms/uploadfs': {},

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>

package/modules/@apostrophecms/area/ui/apos/apps/AposAreas.js

@@ -1,8 +1,11 @@
-import Vue from 'Modules/@apostrophecms/ui/lib/vue';
+/* eslint-disable vue/one-component-per-file */
+import createApp from 'Modules/@apostrophecms/ui/lib/vue';
 import { klona } from 'klona';
 
 export default function() {
 
+  const component = apos.vueComponents.AposAreaEditor;
+
   let widgetsRendering = 0;
 
   apos.area.widgetOptions = [];
@@ -90,8 +93,6 @@ export default function() {
     }
     el.removeAttribute('data-apos-area-newly-editable');
 
-    const component = window.apos.area.components.editor;
-
     if (apos.area.activeEditor && (apos.area.activeEditor.id === data._id)) {
     // Editing a piece causes a refresh of the main content area,
     // but this may contain the area we originally intended to add
@@ -101,68 +102,49 @@ export default function() {
 
       el.parentNode.replaceChild(apos.area.activeEditor.$el, el);
     } else {
-      return new Vue({
-        el,
-        data: function() {
-          return {
-            options,
-            id: data._id,
-            items: data.items,
-            choices,
-            docId: _docId,
-            fieldId,
-            renderings
-          };
-        },
-        render(h) {
-          return h(component, {
-            props: {
-              options: this.options,
-              items: this.items,
-              choices: this.choices,
-              id: this.id,
-              docId: this.docId,
-              fieldId: this.fieldId,
-              renderings: this.renderings
-            }
-          });
-        }
+      const app = createApp(component, {
+        options,
+        id: data._id,
+        items: data.items,
+        choices,
+        docId: _docId,
+        fieldId,
+        renderings
       });
+
+      app.mount(el);
     }
   }
 
   function createWidgetClipboardApp() {
-  // Headless app to provide simple reactivity for the clipboard state
-    apos.area.widgetClipboard = new Vue({
-      el: null,
-      data: () => {
+    class Clipboard {
+      constructor() {
         const existing = window.localStorage.getItem('aposWidgetClipboard');
-        return {
-          widgetClipboard: existing ? JSON.parse(existing) : null
-        };
-      },
-      mounted() {
+        this.widgetClipboard = existing ? JSON.parse(existing) : null;
+
         window.addEventListener('storage', this.onStorage);
-      },
-      methods: {
-        set(widget) {
-          this.widgetClipboard = widget;
-          localStorage.setItem('aposWidgetClipboard', JSON.stringify(this.widgetClipboard));
-        },
-        get() {
+      }
+
+      set(widget) {
+        this.widgetClipboard = widget;
+        localStorage.setItem('aposWidgetClipboard', JSON.stringify(this.widgetClipboard));
+      }
+
+      get() {
         // If we don't clone, the second paste will be a duplicate key error
-          return klona(this.widgetClipboard);
-        },
-        onStorage() {
+        return klona(this.widgetClipboard);
+      }
+
+      onStorage() {
         // When local storage changes, dump the list to
         // the console.
-          const contents = window.localStorage.getItem('aposWidgetClipboard');
-          if (contents) {
-            this.widgetClipboard = JSON.parse(contents);
-          }
+        const contents = window.localStorage.getItem('aposWidgetClipboard');
+        if (contents) {
+          this.widgetClipboard = JSON.parse(contents);
         }
       }
-    });
-  }
+    }
 
+    apos.area.widgetClipboard = new Clipboard();
+  }
 }