apostrophe 3.63.2 → 4.0.0

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

@@ -53,6 +53,7 @@ module.exports = {
     };
     self.configureBuilds();
     self.initUploadfs();
+    self.enableBrowserData();
 
     const {
       extensions = {},
@@ -325,6 +326,7 @@ module.exports = {
                 registerComponents: true,
                 importLastVersion: true
               });
+              /* componentImports = getGlobalVueComponents(self); */
               tiptapExtensionImports = getImports(`${source}/tiptap-extensions`, '*.js', { registerTiptapExtensions: true });
               appImports = getImports(`${source}/apps`, '*.js', {
                 invokeApps: true,
@@ -513,7 +515,6 @@ module.exports = {
           }) {
             fs.writeFileSync(importFile, (prologue || '') + stripIndent`
               ${(icon && icon.importCode) || ''}
-              ${(icon && icon.registerCode) || ''}
               ${(components && components.importCode) || ''}
               ${(tiptap && tiptap.importCode) || ''}
               ${(app && app.importCode) || ''}
@@ -563,16 +564,16 @@ module.exports = {
             // Load global vue icon components.
             const output = {
               importCode: '',
-              registerCode: ''
+              registerCode: 'window.apos.iconComponents = window.apos.iconComponents || {};\n'
             };
 
             for (const [ registerAs, importFrom ] of Object.entries(self.iconMap)) {
               if (importFrom.substring(0, 1) === '~') {
                 output.importCode += `import ${importFrom}Icon from '${importFrom.substring(1)}';\n`;
               } else {
-                output.importCode += `import ${importFrom}Icon from 'vue-material-design-icons/${importFrom}.vue';\n`;
+                output.importCode += `import ${importFrom}Icon from '@apostrophecms/vue-material-design-icons/${importFrom}.vue';\n`;
               }
-              output.registerCode += `Vue.component('${registerAs}', ${importFrom}Icon);\n`;
+              output.registerCode += `window.apos.iconComponents['${registerAs}'] = ${importFrom}Icon;\n`;
             }
 
             return output;
@@ -727,9 +728,17 @@ module.exports = {
           }
 
           function getImportFileOutput (components, options = {}) {
+            let registerCode;
+            if (options.registerComponents) {
+              registerCode = 'window.apos.vueComponents = window.apos.vueComponents || {};\n';
+            } else if (options.registerTiptapExtensions) {
+              registerCode = 'window.apos.tiptapExtensions = window.apos.tiptapExtensions || [];\n';
+            } else {
+              registerCode = '';
+            }
             const output = {
               importCode: '',
-              registerCode: '',
+              registerCode,
               invokeCode: '',
               paths: []
             };
@@ -748,21 +757,21 @@ module.exports = {
               const jsFilename = JSON.stringify(component);
               const name = getComponentName(component, options, i);
               const jsName = JSON.stringify(name);
+              const importName = `${name}${options.importSuffix || ''}`;
               const importCode = `
-              import ${name}${options.importSuffix || ''} from ${jsFilename};
+              import ${importName} from ${jsFilename};
               `;
 
               output.paths.push(component);
               output.importCode += `${importCode}\n`;
 
               if (options.registerComponents) {
-                output.registerCode += `Vue.component(${jsName}, ${name});\n`;
+                output.registerCode += `window.apos.vueComponents[${jsName}] = ${importName};\n`;
               }
 
               if (options.registerTiptapExtensions) {
                 output.registerCode += stripIndent`
-                  apos.tiptapExtensions = apos.tiptapExtensions || [];
-                  apos.tiptapExtensions.push(${name});
+                  apos.tiptapExtensions.push(${importName});
                 `;
               }
               if (options.invokeApps) {
@@ -1328,9 +1337,13 @@ module.exports = {
             apos: true,
             prologue: stripIndent`
               import 'Modules/@apostrophecms/ui/scss/global/import-all.scss';
-              import Vue from 'Modules/@apostrophecms/ui/lib/vue';
-              window.apos.bus = new Vue();
-            `,
+              import emitter from 'tiny-emitter/instance';
+              window.apos.bus = {
+                $on: (...args) => emitter.on(...args),
+                $once: (...args) => emitter.once(...args),
+                $off: (...args) => emitter.off(...args),
+                $emit: (...args) => emitter.emit(...args)
+              };`,
             // Load only in browsers that support ES6 modules
             condition: 'module'
           }

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

@@ -49,7 +49,7 @@ module.exports = ({
     // we could extend this with aliases for other apostrophe modules
     // at a later date if needed
     resolveLoader: {
-      extensions: [ '*', '.js', '.vue', '.json' ],
+      extensions: [ '.*', '.js', '.vue', '.json' ],
       modules: [
         // 1. Allow webpack to find loaders from core dependencies (pnpm), empty if not pnpm
         ...pnpmModulePath,
@@ -62,9 +62,9 @@ module.exports = ({
       ]
     },
     resolve: {
-      extensions: [ '*', '.js', '.vue', '.json' ],
+      extensions: [ '.*', '.js', '.vue', '.json' ],
       alias: {
-        vue$: 'vue/dist/vue.runtime.esm.js',
+        vue$: '@vue/runtime-dom',
         // resolve apostrophe modules
         Modules: path.resolve(modulesDir)
       },

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

@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const { VueLoaderPlugin } = require('vue-loader');
 
 module.exports = (options, apos) => {
@@ -15,7 +16,12 @@ module.exports = (options, apos) => {
     },
     plugins: [
       // make sure to include the plugin for the magic
-      new VueLoaderPlugin()
+      new VueLoaderPlugin(),
+      new webpack.DefinePlugin({
+        __VUE_OPTIONS_API__: 'true',
+        __VUE_PROD_DEVTOOLS__: 'false',
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
+      })
     ]
   };
 };

package/modules/@apostrophecms/busy/ui/apos/apps/AposBusy.js

@@ -1,10 +1,11 @@
-import Vue from 'Modules/@apostrophecms/ui/lib/vue';
+import createApp from 'Modules/@apostrophecms/ui/lib/vue';
 
 export default function() {
-  return new Vue({
-    el: '#apos-busy',
-    render: function (h) {
-      return h('TheAposBusy');
-    }
-  });
+  const component = apos.vueComponents.TheAposBusy;
+  const el = document.querySelector('#apos-busy');
+  if (!el) {
+    return;
+  }
+  const app = createApp(component);
+  app.mount(el);
 };

package/modules/@apostrophecms/busy/ui/apos/components/TheAposBusy.vue

@@ -76,7 +76,7 @@ export default {
   z-index: $z-index-default;
   width: 60px;
   height: 60px;
-  & ::v-deep svg {
+  &:deep(svg) {
     width: 100%;
     height: 100%;
   }

package/modules/@apostrophecms/command-menu/ui/apos/apps/AposCommandMenu.js

@@ -1,34 +1,16 @@
-import Vue from 'Modules/@apostrophecms/ui/lib/vue';
+import createApp from 'Modules/@apostrophecms/ui/lib/vue';
 
 export default function() {
+  const component = apos.vueComponents.TheAposCommandMenu;
   // Careful, login page is in user scene but has no command menu
-  if (apos.commandMenu) {
-    const theAposCommandMenu = new Vue({
-      el: '#apos-command-menu',
-      computed: {
-        apos () {
-          return window.apos;
-        }
-      },
-      methods: {
-        getModal() {
-          return this.$refs.commandMenu.modal;
-        }
-      },
-      render(h) {
-        return h(
-          apos.commandMenu.components.the,
-          {
-            ref: 'commandMenu',
-            props: {
-              groups: apos.commandMenu.groups,
-              modals: apos.commandMenu.modals
-            }
-          }
-        );
-      }
-    });
-
-    apos.commandMenu.getModal = theAposCommandMenu.getModal;
+  const el = document.querySelector('#apos-command-menu');
+  if (!apos.commandMenu || !el) {
+    return;
   }
+  const app = createApp(component, {
+    modals: apos.commandMenu.modals
+  });
+  const theAposCommandMenu = app.mount(el);
+
+  apos.commandMenu.getModal = theAposCommandMenu.getModal;
 }

package/modules/@apostrophecms/command-menu/ui/apos/components/AposCommandMenuShortcut.vue

@@ -88,7 +88,7 @@ export default {
       this.$emit('safe-close');
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     apos.bus.$off('modal-launched', this.autoCloseWhenHidden);
     apos.bus.$off('modal-resolved', this.close);
   },
@@ -125,11 +125,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .apos-modal__body {
+:deep(.apos-modal__body) {
   padding: 0;
 }
 
-::v-deep .apos-modal__inner {
+:deep(.apos-modal__inner) {
   top: auto;
   left: auto;
   max-width: 700px;
@@ -137,7 +137,7 @@ export default {
   border-radius: $spacing-base + $spacing-half;
 }
 
-::v-deep .apos-modal__overlay {
+:deep(.apos-modal__overlay) {
   display: none;
 }
 
@@ -153,7 +153,7 @@ export default {
     padding: 0 $spacing-base + $spacing-half;
   }
 
-  ::v-deep .apos-button {
+  :deep(.apos-button) {
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
@@ -176,7 +176,7 @@ export default {
 }
 
 .apos-command-menu-key {
-  ::v-deep button {
+  :deep(button) {
     width: $spacing-double;
     height: $spacing-double;
     padding: 3px $spacing-half;

package/modules/@apostrophecms/command-menu/ui/apos/components/TheAposCommandMenu.vue

@@ -24,12 +24,7 @@ export default {
     return {
       previousKey: '',
       modal: 'default',
-      keyboardShortcutListener() {},
-      delay(resolve, ms) {
-        return new Promise(() => {
-          setTimeout(resolve, ms);
-        });
-      }
+      keyboardShortcutListener() {}
     };
   },
   computed: {
@@ -90,13 +85,21 @@ export default {
     apos.bus.$on('modal-launched', this.updateModal);
     apos.bus.$on('modal-resolved', this.updateModal);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     document.removeEventListener('keydown', this.keyboardShortcutListener);
 
     apos.bus.$off('modal-launched', this.updateModal);
     apos.bus.$off('modal-resolved', this.updateModal);
   },
   methods: {
+    delay(resolve, ms) {
+      return new Promise(() => {
+        setTimeout(resolve, ms);
+      });
+    },
+    getModal() {
+      return this.modal;
+    },
     getFirstNonShortcutModal(index = -1) {
       const modal = apos.modal.getAt(index);
       const properties = apos.modal.getProperties(modal.id);

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

@@ -1,13 +1,17 @@
 <template>
   <AposModal
-    class="apos-doc-editor" :modal="modal"
+    class="apos-doc-editor"
+    :modal="modal"
     :modal-title="modalTitle"
-    @inactive="modal.active = false" @show-modal="modal.showModal = true"
-    @esc="confirmAndCancel" @no-modal="$emit('safe-close')"
+    @inactive="modal.active = false"
+    @show-modal="modal.showModal = true"
+    @esc="confirmAndCancel"
+    @no-modal="$emit('safe-close')"
   >
     <template #secondaryControls>
       <AposButton
-        type="default" label="apostrophe:cancel"
+        type="default"
+        label="apostrophe:cancel"
         @click="confirmAndCancel"
       />
     </template>
@@ -24,10 +28,11 @@
       />
       <AposButton
         v-if="restoreOnly"
-        type="primary" :label="saveLabel"
+        type="primary"
+        :label="saveLabel"
         :disabled="saveDisabled"
-        @click="onRestore"
         :tooltip="errorTooltip"
+        @click="onRestore"
       />
       <AposButtonSplit
         v-else-if="saveMenu"
@@ -42,8 +47,8 @@
     <template #leftRail>
       <AposModalRail>
         <AposModalTabs
-          :key="tabKey"
           v-if="tabs.length"
+          :key="tabKey"
           :current="currentTab"
           :tabs="tabs"
           :errors="fieldErrors"
@@ -59,6 +64,7 @@
               v-for="tab in tabs"
               v-show="tab.name === currentTab"
               :key="tab.name"
+              :ref="tab.name"
               :changed="changed"
               :schema="groups[tab.name].schema"
               :current-fields="groups[tab.name].fields"
@@ -67,12 +73,11 @@
               :following-values="followingValues('other')"
               :conditional-fields="conditionalFields"
               :doc-id="docId"
-              :value="docFields"
+              :model-value="docFields"
               :meta="docMeta"
               :server-errors="serverErrors"
-              :ref="tab.name"
               :generation="generation"
-              @input="updateDocFields"
+              @update:model-value="updateDocFields"
               @validate="triggerValidate"
               @update-doc-data="onUpdateDocFields"
             />
@@ -85,6 +90,7 @@
         <div class="apos-doc-editor__utility">
           <AposSchema
             v-if="docReady"
+            ref="utilitySchema"
             :schema="groups['utility'].schema"
             :changed="changed"
             :current-fields="groups['utility'].fields"
@@ -93,14 +99,13 @@
             :following-values="followingUtils"
             :conditional-fields="conditionalFields"
             :doc-id="docId"
-            :value="docFields"
+            :model-value="docFields"
             :meta="docMeta"
-            @input="updateDocFields"
-            @validate="triggerValidate"
             :modifiers="['small', 'inverted']"
-            ref="utilitySchema"
             :server-errors="serverErrors"
             :generation="generation"
+            @update:model-value="updateDocFields"
+            @validate="triggerValidate"
           />
         </div>
       </AposModalRail>
@@ -423,7 +428,7 @@ export default {
     }
     apos.bus.$on('content-changed', this.onContentChanged);
   },
-  destroyed() {
+  unmounted() {
     apos.bus.$off('content-changed', this.onContentChanged);
   },
   methods: {

package/modules/@apostrophecms/doc-type/ui/apos/logic/AposDocContextMenu.js

@@ -356,7 +356,7 @@ export default {
     apos.bus.$on('content-changed', this.onContentChanged);
     apos.bus.$on('command-menu-admin-bar-discard-draft', this.customDiscardDraft);
   },
-  destroyed() {
+  unmounted() {
     apos.bus.$off('content-changed', this.onContentChanged);
     apos.bus.$off('command-menu-admin-bar-discard-draft', this.customDiscardDraft);
   },

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

@@ -27,8 +27,8 @@
             <AposButton
               type="default"
               label="apostrophe:cancel"
-              @click="close"
               :modifiers="[ 'block' ]"
+              @click="close"
             />
           </div>
         </template>
@@ -49,12 +49,12 @@
               class="apos-wizard__step apos-wizard__step-select-content"
             >
               <AposInputRadio
+                v-model="wizard.values.toLocalize"
                 :field="{
                   name: 'toLocalize',
                   label: 'apostrophe:selectContentToLocalize',
                   choices: toLocalizeChoices
                 }"
-                v-model="wizard.values.toLocalize"
               />
               <p class="apos-wizard__help-text">
                 <AposIndicator
@@ -71,20 +71,20 @@
               class="apos-wizard__step apos-wizard__step-select-locales"
             >
               <AposButton
-                v-on="{ click: allSelected ? deselectAll : selectAll }"
                 class="apos-locale-select-all"
                 :label="allSelected
                   ? $t('apostrophe:deselectAll')
                   : $t('apostrophe:selectAll')"
                 type="quiet"
                 :modifiers="[ 'inline' ]"
+                v-on="{ click: allSelected ? deselectAll : selectAll }"
               />
               <AposInputString
+                ref="searchInput"
                 v-model="searchValue"
                 :field="searchField"
-                @input="updateFilter"
                 class="apos-locales-filter"
-                ref="searchInput"
+                @update:model-value="updateFilter"
               />
               <transition-group
                 tag="ul"
@@ -98,12 +98,12 @@
                 >
                   <AposButton
                     type="primary"
-                    @click.prevent="removeLocale(loc)"
                     class="apos-locale-button"
                     :modifiers="[ 'small' ]"
                     icon="close-icon"
                     :icon-size="12"
                     :label="loc.label"
+                    @click.prevent="removeLocale(loc)"
                   />
                 </li>
               </transition-group>
@@ -136,13 +136,13 @@
                       ({{ loc.name }})
                     </span>
                     <span
+                      v-apos-tooltip="isLocalized(loc)
+                        ? 'Localized'
+                        : 'Not Yet Localized'"
                       class="apos-locale-localized"
                       :class="{
                         'apos-state-is-localized': isLocalized(loc),
                       }"
-                      v-apos-tooltip="isLocalized(loc)
-                        ? 'Localized'
-                        : 'Not Yet Localized'"
                     />
                   </span>
                 </li>
@@ -155,9 +155,9 @@
             >
               <ul class="apos-selected-locales">
                 <li
-                  class="apos-locale-item--selected"
                   v-for="loc in selectedLocales"
                   :key="loc.name"
+                  class="apos-locale-item--selected"
                 >
                   <AposButton
                     type="primary"
@@ -184,6 +184,7 @@
                 </p>
 
                 <AposInputRadio
+                  v-model="wizard.values.relatedDocSettings"
                   :field="{
                     name: 'relatedDocSettings',
                     choices: [
@@ -198,13 +199,11 @@
                       },
                     ],
                   }"
-                  v-model="wizard.values.relatedDocSettings"
                 />
-
                 <AposInputCheckboxes
                   v-if="relatedDocTypes.length"
-                  :field="relatedDocTypesField"
                   v-model="wizard.values.relatedDocTypesToLocalize"
+                  :field="relatedDocTypesField"
                 />
                 <p v-else class="apos-wizard__help-text">
                   <AposIndicator
@@ -230,19 +229,19 @@
           <AposButton
             v-else
             type="primary"
-            @click="goToNext()"
             icon="arrow-right-icon"
             :modifiers="['icon-right']"
             :disabled="!complete() || wizard.busy"
             :icon-size="12"
             label="apostrophe:next"
+            @click="goToNext()"
           />
           <AposButton
             v-if="!isFirstStep()"
             type="default"
             :disabled="wizard.busy"
-            @click="goToPrevious()"
             label="apostrophe:back"
+            @click="goToPrevious()"
           />
         </template>
       </AposModalBody>
@@ -545,16 +544,26 @@ export default {
       return !!this.localized[locale.name];
     },
     selectAll() {
-      this.wizard.values.toLocales.data = this.locales.filter(locale => !this.isCurrentLocale(locale) && this.canEditLocale(locale));
+      this.wizard.values.toLocales.data = this.locales
+        .filter(locale => !this.isCurrentLocale(locale) && this.canEditLocale(locale));
     },
     deselectAll() {
       this.wizard.values.toLocales.data = [];
     },
     toggleLocale(locale) {
-      if (!this.isSelected(locale) && !this.isCurrentLocale(locale) && this.canEditLocale(locale)) {
-        this.wizard.values.toLocales.data.push(locale);
+      if (
+        !this.isSelected(locale) &&
+        !this.isCurrentLocale(locale) &&
+          this.canEditLocale(locale)
+      ) {
+        this.wizard.values.toLocales.data = [
+          ...this.wizard.values.toLocales.data,
+          locale
+        ];
+
       } else if (this.isSelected(locale)) {
-        this.wizard.values.toLocales.data = this.wizard.values.toLocales.data.filter(l => l !== locale);
+        this.wizard.values.toLocales.data = this.wizard.values.toLocales.data
+          .filter(l => l !== locale);
       }
       // Reset search filter
       if (this.filteredLocales.length < 2) {
@@ -831,7 +840,7 @@ export default {
 .apos-i18n-localize {
   @include type-base;
 
-  ::v-deep .apos-modal__inner {
+  :deep(.apos-modal__inner) {
     $width: 565px;
     $vertical-spacing: 95px;
     $horizontal-spacing: calc(calc(100vw - #{$width}) / 2);
@@ -843,20 +852,20 @@ export default {
     height: calc(100vh - #{$vertical-spacing * 2});
   }
 
-  ::v-deep .apos-modal__main--with-left-rail {
+  :deep(.apos-modal__main--with-left-rail) {
     grid-template-columns: 30% 70%;
   }
 
-  ::v-deep .apos-modal__body-inner {
+  :deep(.apos-modal__body-inner) {
     padding: $spacing-triple $spacing-triple $spacing-double;
   }
 
-  ::v-deep .apos-wizard__content .apos-modal__body-footer {
+  :deep(.apos-wizard__content .apos-modal__body-footer) {
     flex-direction: row-reverse;
     border-top: 1px solid var(--a-base-9);
   }
 
-  ::v-deep .apos-busy__spinner {
+  :deep(.apos-busy__spinner) {
     display: inline-block;
   }
 }
@@ -890,7 +899,7 @@ export default {
   border: none;
 }
 
-::v-deep .apos-field--toLocalize {
+:deep(.apos-field--toLocalize) {
   margin-bottom: $spacing-triple;
 }
 
@@ -901,7 +910,7 @@ export default {
   font-weight: 400;
   color: var(--a-base-3);
 
-  ::v-deep .material-design-icon {
+  :deep(.material-design-icon) {
     position: relative;
     top: 3px;
     color: var(--a-base-5);
@@ -944,7 +953,7 @@ export default {
   }
 }
 
-.apos-locale-button ::v-deep .apos-button {
+.apos-locale-button :deep(.apos-button) {
   font-size: var(--a-type-small);
 }
 

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

@@ -27,7 +27,7 @@
             {{ docType(item.doc) }}
           </span>
         </div>
-        <div class="apos-confirm__notification-detail" v-if="item.detail">
+        <div v-if="item.detail" class="apos-confirm__notification-detail">
           {{ $t(item.detail) }}
         </div>
       </div>
@@ -36,8 +36,8 @@
 </template>
 
 <script>
-import CheckIcon from 'vue-material-design-icons/Check.vue';
-import CancelIcon from 'vue-material-design-icons/Cancel.vue';
+import CheckIcon from '@apostrophecms/vue-material-design-icons/Check.vue';
+import CancelIcon from '@apostrophecms/vue-material-design-icons/Cancel.vue';
 
 export default {
   name: 'AposI18nLocalizeErrors',