apostrophe 3.63.3 → 4.1.0

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();
+  }
 }

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

@@ -1,28 +1,29 @@
 <template>
   <div class="apos-area-menu" :class="{'apos-is-focused': groupIsFocused}">
     <AposContextMenu
-      :disabled="isDisabled"
-      :button="buttonOptions"
       v-bind="extendedContextMenuOptions"
-      @open="menuOpen"
-      @close="menuClose"
       ref="contextMenu"
+      :disabled="isDisabled"
+      :button="buttonOptions"
       :popover-modifiers="inContext ? ['z-index-in-context'] : []"
     >
       <ul class="apos-area-menu__wrapper">
         <li
-          class="apos-area-menu__item"
           v-for="(item, itemIndex) in myMenu"
           :key="item.type ? `${item.type}_${item.label}` : item.label"
-          :class="{'apos-has-group': item.items}"
           :ref="`item-${itemIndex}`"
+          class="apos-area-menu__item"
+          :class="{'apos-has-group': item.items}"
         >
           <dl v-if="item.items" class="apos-area-menu__group">
             <dt>
               <button
-                :for="item.label" class="apos-area-menu__group-label"
-                v-if="item.items" tabindex="0"
+                v-if="item.items"
                 :id="`${menuId}-trigger-${itemIndex}`"
+                ref="groupButton"
+                :for="item.label"
+                class="apos-area-menu__group-label"
+                tabindex="0"
                 :aria-controls="`${menuId}-group-${itemIndex}`"
                 @focus="groupFocused"
                 @blur="groupBlurred"
@@ -33,33 +34,33 @@
                 @keydown.prevent.arrow-up="switchGroup(itemIndex, -1)"
                 @keydown.prevent.home="switchGroup(itemIndex, 0)"
                 @keydown.prevent.end="switchGroup(itemIndex, null)"
-                ref="groupButton"
               >
                 <span>{{ item.label }}</span>
                 <chevron-up-icon
                   class="apos-area-menu__group-chevron"
-                  :class="{'apos-is-active': itemIndex === active}" :size="13"
+                  :class="{'apos-is-active': itemIndex === active}"
+                  :size="13"
                 />
               </button>
             </dt>
             <dd class="apos-area-menu__group-list" role="region">
               <ul
+                :id="`${menuId}-group-${itemIndex}`"
                 class="apos-area-menu__items apos-area-menu__items--accordion"
                 :class="{'apos-is-active': active === itemIndex}"
-                :id="`${menuId}-group-${itemIndex}`"
                 :aria-labelledby="`${menuId}-trigger-${itemIndex}`"
                 :aria-expanded="active === itemIndex ? 'true' : 'false'"
               >
                 <li
-                  class="apos-area-menu__item"
                   v-for="(child, childIndex) in item.items"
                   :key="child.name"
                   :ref="`child-${index}-${childIndex}`"
+                  class="apos-area-menu__item"
                 >
                   <AposAreaMenuItem
-                    @click="add(child)"
                     :item="child"
                     :tabbable="itemIndex === active"
+                    @click="add(child)"
                     @up="switchItem(`child-${itemIndex}-${childIndex - 1}`, -1)"
                     @down="switchItem(`child-${itemIndex}-${childIndex + 1}`, 1)"
                   />
@@ -69,8 +70,8 @@
           </dl>
           <AposAreaMenuItem
             v-else
-            @click="add(item)"
             :item="item"
+            @click="add(item)"
             @up="switchItem(`item-${itemIndex - 1}`, -1)"
             @down="switchItem(`item-${itemIndex + 1}`, 1)"
           />
@@ -118,7 +119,7 @@ export default {
       }
     }
   },
-  emits: [ 'menu-close', 'menu-open', 'add' ],
+  emits: [ 'add' ],
   data() {
     return {
       active: 0,
@@ -192,17 +193,11 @@ export default {
     this.inContext = !apos.util.closest(this.$el, '[data-apos-schema-area]');
   },
   methods: {
-    menuClose(e) {
-      this.$emit('menu-close', e);
-    },
-    menuOpen(e) {
-      this.$emit('menu-open', e);
-    },
     async add(item) {
       // Potential TODO: If we find ourselves manually flipping these bits in other AposContextMenu overrides
       // we should consider refactoring contextmenus to be able to self close when any click takes place within their el
       // as it is often the logical experience (not always, see tag menus and filters)
-      this.$refs.contextMenu.isOpen = false;
+      this.$refs.contextMenu.hide();
       this.$emit('add', {
         ...item,
         index: this.index
@@ -278,11 +273,11 @@ export default {
 
 <style lang="scss" scoped>
 
-.apos-area-menu.apos-is-focused ::v-deep .apos-context-menu__inner {
+.apos-area-menu.apos-is-focused :deep(.apos-context-menu__inner) {
   border: 1px solid var(--a-base-4);
 }
 
-.apos-area-menu.apos-is-focused ::v-deep .apos-context-menu__tip-outline {
+.apos-area-menu.apos-is-focused :deep(.apos-context-menu__tip-outline) {
   stroke: var(--a-base-4);
 }
 
@@ -306,7 +301,7 @@ export default {
 
   &:hover,
   &:focus {
-    & ::v-deep .apos-area-menu__item-icon {
+    &:deep(.apos-area-menu__item-icon) {
       color: var(--a-primary);
     }
   }

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

@@ -22,7 +22,6 @@
       </template>
       <template v-else>
         <AposAreaMenu
-          @add="add"
           :context-menu-options="contextMenuOptions"
           :empty="true"
           :index="0"
@@ -30,14 +29,15 @@
           :max-reached="maxReached"
           :disabled="field && field.readOnly"
           :widget-options="options.widgets"
+          @add="add"
         />
       </template>
     </div>
     <div class="apos-areas-widgets-list">
       <AposAreaWidget
         v-for="(widget, i) in next"
-        :area-id="areaId"
         :key="widget._id"
+        :area-id="areaId"
         :widget="widget"
         :meta="meta[widget._id]"
         :generation="generation"
@@ -227,7 +227,7 @@ export default {
   mounted() {
     this.bindEventListeners();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.unbindEventListeners();
   },
   methods: {
@@ -235,14 +235,12 @@ export default {
       apos.bus.$on('area-updated', this.areaUpdatedHandler);
       apos.bus.$on('widget-hover', this.updateWidgetHovered);
       apos.bus.$on('widget-focus', this.updateWidgetFocused);
-      apos.bus.$on('refreshed', this.destroyParentComponent);
       window.addEventListener('keydown', this.focusParentEvent);
     },
     unbindEventListeners() {
       apos.bus.$off('area-updated', this.areaUpdatedHandler);
       apos.bus.$off('widget-hover', this.updateWidgetHovered);
       apos.bus.$off('widget-focus', this.updateWidgetFocused);
-      apos.bus.$off('refreshed', this.destroyParentComponent);
       window.removeEventListener('keydown', this.focusParentEvent);
     },
     areaUpdatedHandler(area) {
@@ -382,7 +380,7 @@ export default {
         apos.area.activeEditor = this;
         apos.bus.$on('apos-refreshing', cancelRefresh);
         const result = await apos.modal.execute(componentName, {
-          value: widget,
+          modelValue: widget,
           options: this.widgetOptionsByType(widget.type),
           type: widget.type,
           docId: this.docId,
@@ -481,7 +479,7 @@ export default {
         const componentName = this.widgetEditorComponent(name);
         apos.area.activeEditor = this;
         const widget = await apos.modal.execute(componentName, {
-          value: null,
+          modelValue: null,
           options: this.widgetOptionsByType(name),
           type: name,
           docId: this.docId,
@@ -606,11 +604,6 @@ export default {
         }
       });
       return widget;
-    },
-    destroyParentComponent() {
-      if (!document.body.contains(this.$parent.$el)) {
-        this.$parent.$destroy();
-      }
     }
   }
 };

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

@@ -16,7 +16,7 @@
             :key="groupIndex"
             class="apos-widget-group"
           >
-            <h2 class="apos-widget-group__label" v-if="group.label">{{ $t(group.label) }}</h2>
+            <h2 v-if="group.label" class="apos-widget-group__label">{{ $t(group.label) }}</h2>
             <div
               :class="[
                 `apos-widget-group--${group.columns}-column${
@@ -42,10 +42,11 @@
                     class="apos-widget__preview-image"
                   >
                   <component
+                    :is="getIcon(item)"
                     v-else-if="hasIcon(item)"
+                    :title="getTitle(item)"
                     :size="25"
                     class="apos-widget__preview--icon"
-                    :is="item.previewIcon || item.icon"
                   />
                 </div>
                 <p class="apos-widget__label">
@@ -173,9 +174,16 @@ export default {
 
       return group;
     },
-    hasIcon(widget) {
+    getIcon(widget) {
       return widget.previewIcon || widget.icon;
     },
+    hasIcon(widget) {
+      return Boolean(widget.previewIcon || widget.icon);
+    },
+    getTitle(widget) {
+      const icon = this.getIcon(widget);
+      return icon.replaceAll('-', ' ');
+    },
     close() {
       this.modal.showModal = false;
     },

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

@@ -1,14 +1,13 @@
 <template>
   <AposButton
     v-if="options.expanded"
-    :disabled="disabled"
     v-bind="buttonOptions"
-    @click="openExpandedMenu(index)"
+    :disabled="disabled"
     role="button"
+    @click="openExpandedMenu(index)"
   />
   <AposAreaContextualMenu
     v-else
-    @add="$emit('add', $event);"
     :button-options="buttonOptions"
     :context-menu-options="contextMenuOptions"
     :empty="true"
@@ -17,6 +16,7 @@
     :options="options"
     :max-reached="maxReached"
     :disabled="disabled"
+    @add="$emit('add', $event);"
   />
 </template>
 
@@ -86,11 +86,11 @@ export default {
 
 <style lang="scss" scoped>
 
-.apos-area-menu.apos-is-focused ::v-deep .apos-context-menu__inner {
+.apos-area-menu.apos-is-focused :deep(.apos-context-menu__inner) {
   border: 1px solid var(--a-base-4);
 }
 
-.apos-area-menu.apos-is-focused ::v-deep .apos-context-menu__tip-outline {
+.apos-area-menu.apos-is-focused :deep(.apos-context-menu__tip-outline) {
   stroke: var(--a-base-4);
 }
 
@@ -114,7 +114,7 @@ export default {
 
   &:hover,
   &:focus {
-    & ::v-deep .apos-area-menu__item-icon {
+    &:deep(.apos-area-menu__item-icon) {
       color: var(--a-primary);
     }
   }

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

@@ -1,9 +1,10 @@
 <template>
   <button
-    @click="click" class="apos-area-menu__button"
+    class="apos-area-menu__button"
     :class="{ 'apos-area-menu__button--separated': item.type }"
     :data-action="item.name"
     :tabindex="String(tabindex)"
+    @click="click"
     @keydown.prevent.arrow-down="$emit('down')"
     @keydown.prevent.arrow-up="$emit('up')"
   >
@@ -15,10 +16,10 @@
     </div>
     <div class="apos-area-menu__item-content">
       <component
+        :is="item.icon"
         v-if="item.icon"
         :size="15"
         class="apos-area-menu__item-icon"
-        :is="item.icon"
       />
       {{ $t(item.label) }}
     </div>