apostrophe 3.63.3 → 4.1.0

package/modules/@apostrophecms/area/ui/apos/components/AposAreaWidget.vue

@@ -1,13 +1,13 @@
 
 <template>
   <div
+    ref="widget"
     class="apos-area-widget-wrapper"
     :class="{'apos-area-widget-wrapper--foreign': foreign}"
     :data-area-widget="widget._id"
     :data-area-label="widgetLabel"
     :data-apos-widget-foreign="foreign ? 1 : 0"
     :data-apos-widget-id="widget._id"
-    ref="widget"
   >
     <div
       class="apos-area-widget-inner"
@@ -17,8 +17,8 @@
       @click="getFocus($event, widget._id)"
     >
       <div
-        class="apos-area-widget-controls apos-area-widget__label"
         ref="label"
+        class="apos-area-widget-controls apos-area-widget__label"
         :class="labelsClasses"
       >
         <ol class="apos-area-widget__breadcrumbs">
@@ -33,18 +33,16 @@
           >
             <AposButton
               type="quiet"
-              @click="getFocus($event, item.id)"
               :label="item.label"
               icon="chevron-right-icon"
               :icon-size="9"
               :modifiers="['icon-right', 'no-motion']"
+              @click="getFocus($event, item.id)"
             />
           </li>
           <li class="apos-area-widget__breadcrumb" data-apos-widget-breadcrumb="0">
             <AposButton
               type="quiet"
-              @click="foreign ? $emit('edit', i) : null"
-              @dblclick.native="(!foreign && !isContextual) ? $emit('edit', i) : null"
               :label="foreign ? {
                 key: 'apostrophe:editWidgetType',
                 label: $t(widgetLabel)
@@ -52,6 +50,8 @@
               :tooltip="!isContextual && 'apostrophe:editWidgetForeignTooltip'"
               :icon-size="11"
               :modifiers="['no-motion']"
+              @click="foreign ? $emit('edit', i) : null"
+              @dblclick="(!foreign && !isContextual) ? $emit('edit', i) : null"
             />
           </li>
         </ol>
@@ -63,14 +63,12 @@
         <AposAreaMenu
           v-if="!foreign"
           :max-reached="maxReached"
-          @add="$emit('add', $event);"
-          @menu-open="toggleMenuFocus($event, 'top', true)"
-          @menu-close="toggleMenuFocus($event, 'top', false)"
           :context-menu-options="contextMenuOptions"
           :index="i"
           :widget-options="widgets"
           :options="options"
           :disabled="disabled"
+          @add="$emit('add', $event);"
         />
       </div>
       <div
@@ -104,33 +102,34 @@
       />
       <!-- Still used for contextual editing components -->
       <component
-        v-if="isContextual && !foreign"
         :is="widgetEditorComponent(widget.type)"
+        v-if="isContextual && !foreign"
+        :key="generation"
         :options="widgetOptions"
         :type="widget.type"
-        :value="widget"
+        :model-value="widget"
         :meta="meta"
-        @update="$emit('update', $event)"
         :doc-id="docId"
         :focused="isFocused"
-        :key="generation"
+        @update="$emit('update', $event)"
       />
       <component
-        v-else
         :is="widgetComponent(widget.type)"
+        v-else
+        :id="widget._id"
+        :key="`${generation}-preview`"
         :options="widgetOptions"
         :type="widget.type"
-        :id="widget._id"
         :area-field-id="fieldId"
         :area-field="field"
         :following-values="followingValuesWithParent"
+        :model-value="widget"
         :value="widget"
         :meta="meta"
         :foreign="foreign"
-        @edit="$emit('edit', i);"
         :doc-id="docId"
         :rendering="rendering"
-        :key="`${generation}-preview`"
+        @edit="$emit('edit', i);"
       />
       <div
         class="apos-area-widget-controls apos-area-widget-controls--add apos-area-widget-controls--add--bottom"
@@ -139,14 +138,12 @@
         <AposAreaMenu
           v-if="!foreign"
           :max-reached="maxReached"
-          @add="$emit('add', $event)"
           :context-menu-options="bottomContextMenuOptions"
           :index="i + 1"
           :widget-options="widgets"
           :options="options"
           :disabled="disabled"
-          @menu-open="toggleMenuFocus($event, 'bottom', true)"
-          @menu-close="toggleMenuFocus($event, 'bottom', false)"
+          @add="$emit('add', $event)"
         />
       </div>
     </div>
@@ -279,7 +276,8 @@ export default {
       };
     },
     widgetIcon() {
-      const natural = this.contextMenuOptions.menu.filter(item => item.name === this.widget.type)[0]?.icon || 'shape-icon';
+      const natural = this.contextMenuOptions.menu
+        .filter(item => item.name === this.widget.type)[0]?.icon || 'shape-icon';
       return this.foreign ? 'earth-icon' : natural;
     },
     widgetLabel() {
@@ -377,7 +375,7 @@ export default {
       apos.bus.$emit('widget-focus', this.widget._id);
     }
   },
-  destroyed() {
+  unmounted() {
     // Remove the focus parent listener when unmounted
     apos.bus.$off('widget-focus-parent', this.focusParent);
   },
@@ -441,17 +439,6 @@ export default {
       }
     },
 
-    toggleMenuFocus(event, name, value) {
-      if (event) {
-        event.cancelBubble = true;
-      }
-      this.state.add[name].focus = value;
-
-      if (value) {
-        this.focus();
-      }
-    },
-
     getParent() {
       if (!this.mounted) {
         return false;
@@ -517,7 +504,7 @@ export default {
     }
     &.apos-is-focused {
       outline: 1px dashed var(--a-primary);
-      &::v-deep .apos-rich-text-editor__editor.apos-is-visually-empty {
+      &:deep(.apos-rich-text-editor__editor.apos-is-visually-empty) {
         box-shadow: none;
       }
     }
@@ -577,11 +564,11 @@ export default {
   .apos-area-widget-controls--modify {
     right: 0;
     transform: translate3d(-10px, 30px, 0);
-    ::v-deep .apos-button-group__inner {
+    :deep(.apos-button-group__inner) {
       border: 1px solid var(--a-primary-transparent-25);
       box-shadow: var(--a-box-shadow);
     }
-    ::v-deep .apos-button-group .apos-button {
+    :deep(.apos-button-group) .apos-button {
       width: 32px;
       height: 32px;
       padding: 0;
@@ -608,9 +595,9 @@ export default {
     transform: translate(-50%, -50%);
   }
 
-  .apos-area-widget-controls--add ::v-deep {
+  .apos-area-widget-controls--add {
 
-    .apos-button__wrapper {
+    :deep(.apos-button__wrapper) {
       padding: 8px;
 
       &:hover .apos-button:not([disabled]) {
@@ -634,11 +621,11 @@ export default {
       }
     }
 
-    .apos-button__icon {
+    :deep(.apos-button__icon) {
       margin-right: 0;
     }
 
-    .apos-button__label {
+    :deep(.apos-button__label) {
       display: inline-block;
       overflow: hidden;
       max-width: 0;
@@ -648,7 +635,7 @@ export default {
       font-size: var(--a-type-small);
     }
 
-    .apos-button {
+    :deep(.apos-button) {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -666,7 +653,7 @@ export default {
     transform: translate(-50%, 50%);
   }
 
-  .apos-area-widget-inner ::v-deep .apos-context-menu__popup.apos-is-visible {
+  .apos-area-widget-inner :deep(.apos-context-menu__popup.apos-is-visible) {
     top: calc(100% + 20px);
     left: 50%;
     transform: translate(-50%, 0);
@@ -698,7 +685,7 @@ export default {
   }
 
   .apos-area-widget__breadcrumb,
-  .apos-area-widget__breadcrumb ::v-deep .apos-button__content {
+  .apos-area-widget__breadcrumb :deep(.apos-button__content) {
     @include type-help;
     padding: 2px;
     white-space: nowrap;
@@ -707,7 +694,7 @@ export default {
   }
 
   .apos-area-widget__breadcrumbs:hover .apos-area-widget__breadcrumb,
-  .apos-area-widget__breadcrumbs:hover .apos-area-widget__breadcrumb ::v-deep .apos-button__content {
+  .apos-area-widget__breadcrumbs:hover .apos-area-widget__breadcrumb :deep(.apos-button__content) {
     color: var(--a-text-primary);
   }
 
@@ -729,7 +716,7 @@ export default {
     color: var(--a-text-primary);
   }
 
-  .apos-area-widget__breadcrumb ::v-deep .apos-button {
+  .apos-area-widget__breadcrumb :deep(.apos-button) {
     color: var(--a-primary-dark-10);
     &:hover, &:active, &:focus {
       text-decoration: none;

package/modules/@apostrophecms/area/ui/apos/components/AposWidgetControls.vue

@@ -7,75 +7,75 @@
         v-if="!foreign"
         v-bind="upButton"
         :disabled="first || disabled"
-        @click="$emit('up')"
         :tooltip="{
           content: (!disabled && !first) ? 'apostrophe:nudgeUp' : null,
           placement: 'left'
         }"
         :modifiers="[ 'inline' ]"
+        @click="$emit('up')"
       />
       <AposButton
+        v-if="!foreign && !options.contextual"
         v-bind="editButton"
         :disabled="disabled"
-        v-if="!foreign && !options.contextual"
-        @click="$emit('edit')"
         :tooltip="{
           content: 'apostrophe:editWidget',
           placement: 'left'
         }"
         :modifiers="[ 'inline' ]"
+        @click="$emit('edit')"
       />
       <AposButton
-        v-bind="cutButton"
         v-if="!foreign"
-        @click="$emit('cut')"
+        v-bind="cutButton"
         :tooltip="{
           content: 'apostrophe:cut',
           placement: 'left'
         }"
         :modifiers="[ 'inline' ]"
+        @click="$emit('cut')"
       />
       <AposButton
-        v-bind="copyButton"
         v-if="!foreign"
-        @click="$emit('copy')"
+        v-bind="copyButton"
         :tooltip="{
           content: 'apostrophe:copy',
           placement: 'left'
         }"
+        @click="$emit('copy')"
       />
       <AposButton
         v-if="!foreign"
-        :disabled="disabled || maxReached"
         v-bind="cloneButton"
-        @click="$emit('clone')"
+        :disabled="disabled || maxReached"
         :tooltip="{
           content: 'apostrophe:duplicate',
           placement: 'left'
         }"
         :modifiers="[ 'inline' ]"
+        @click="$emit('clone')"
       />
       <AposButton
         v-if="!foreign"
-        :disabled="disabled"
         v-bind="removeButton"
-        @click="$emit('remove')"
+        :disabled="disabled"
         :tooltip="{
           content: 'apostrophe:delete',
           placement: 'left'
         }"
         :modifiers="[ 'inline' ]"
+        @click="$emit('remove')"
       />
       <AposButton
         v-if="!foreign"
         v-bind="downButton"
         :disabled="last || disabled"
-        @click="$emit('down')"
         :tooltip="{
           content: (!disabled && !last) ? 'apostrophe:nudgeDown' : null,
           placement: 'left'
         }"
         :modifiers="[ 'inline' ]"
+        @click="$emit('down')"
       />
     </AposButtonGroup>
   </div>
@@ -184,15 +184,15 @@ export default {
 $z-index-button-background: 1;
 $z-index-button-foreground: 2;
 
-.apos-area-modify-controls ::v-deep {
-  .apos-button__content {
+.apos-area-modify-controls {
+  :deep(.apos-button__content) {
     z-index: $z-index-button-foreground;
     position: relative;
   }
-  .apos-button__icon {
+  :deep(.apos-button__icon) {
     transition: all 0.3s var(--a-transition-timing-bounce);
   }
-  .apos-button {
+  :deep(.apos-button) {
     background-color: transparent;
 
     &:not([disabled]):hover:after {

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/attachment/index.js

@@ -592,7 +592,8 @@ module.exports = {
       getMissingAttachmentUrl() {
         const defaultIconUrl = '/modules/@apostrophecms/attachment/img/missing-icon.svg';
         self.apos.util.warn('Template warning: Impossible to retrieve the attachment url since it is missing, a default icon has been set. Please fix this ASAP!');
-        return defaultIconUrl;
+        // Convert static asset path to full URL, which matters when static assets are in uploadfs
+        return self.apos.asset.url(defaultIconUrl);
       },
       // This method is available as a template helper: apos.attachment.url
       //

package/modules/@apostrophecms/attachment/public/img/missing-icon.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 29.536 29.536" style="enable-background:new 0 0 29.536 29.536; fill: red;" xml:space="preserve">
+	<g>
+		<path d="M14.768,0C6.611,0,0,6.609,0,14.768c0,8.155,6.611,14.767,14.768,14.767s14.768-6.612,14.768-14.767
+			C29.535,6.609,22.924,0,14.768,0z M14.768,27.126c-6.828,0-12.361-5.532-12.361-12.359c0-6.828,5.533-12.362,12.361-12.362
+			c6.826,0,12.359,5.535,12.359,12.362C27.127,21.594,21.594,27.126,14.768,27.126z"/>
+		<path d="M14.385,19.337c-1.338,0-2.289,0.951-2.289,2.34c0,1.336,0.926,2.339,2.289,2.339c1.414,0,2.314-1.003,2.314-2.339
+			C16.672,20.288,15.771,19.337,14.385,19.337z"/>
+		<path d="M14.742,6.092c-1.824,0-3.34,0.513-4.293,1.053l0.875,2.804c0.668-0.462,1.697-0.772,2.545-0.772
+			c1.285,0.027,1.879,0.644,1.879,1.543c0,0.85-0.67,1.697-1.494,2.701c-1.156,1.364-1.594,2.701-1.516,4.012l0.025,0.669h3.42
+			v-0.463c-0.025-1.158,0.387-2.162,1.311-3.215c0.979-1.08,2.211-2.366,2.211-4.321C19.705,7.968,18.139,6.092,14.742,6.092z"/>
+	</g>
+</svg>

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/AposCommandMenuKey.vue

@@ -7,7 +7,7 @@
       class="apos-button__icon"
       fill-color="color"
     />
-    <slot name="label" v-if="label">
+    <slot v-if="label" name="label">
       {{ $t(label ) }}
     </slot>
   </span>

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;