apostrophe 3.63.1 → 4.0.0

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>

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

@@ -46,8 +46,8 @@
       />
       <AposButton
         v-if="!foreign"
-        :disabled="disabled || maxReached"
         v-bind="cloneButton"
+        :disabled="disabled || maxReached"
         @click="$emit('clone')"
         :tooltip="{
           content: 'apostrophe:duplicate',
@@ -57,8 +57,8 @@
       />
       <AposButton
         v-if="!foreign"
-        :disabled="disabled"
         v-bind="removeButton"
+        :disabled="disabled"
         @click="$emit('remove')"
         :tooltip="{
           content: 'apostrophe:delete',
@@ -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 {