From 186eb3f45f4794d70ecd2c751f9ef0c9e34ca647 Mon Sep 17 00:00:00 2001
From: Etienne Laurent <git.sabbath464@passmail.net>
Date: Tue, 18 Mar 2025 16:56:05 +0100
Subject: [PATCH 1/5] eslint autofix (for now)

---
 .eslintrc                                     |  96 +-------------
 .../ui/apos/components/TheAposAdminBar.vue    |   5 +-
 .../apos/components/TheAposAdminBarMenu.vue   |  15 ++-
 .../ui/apos/components/TheAposContextBar.vue  |  16 ++-
 .../components/TheAposSavingIndicator.vue     |   5 +-
 .../components/AposAreaContextualMenu.vue     |  15 ++-
 .../apos/components/AposAreaExpandedMenu.vue  |  12 +-
 .../ui/apos/components/AposAreaWidget.vue     |  10 +-
 .../@apostrophecms/asset/lib/build/task.js    |  12 +-
 .../asset/lib/webpack/src/webpack.scss.js     |  16 +--
 .../ui/apos/components/AposColor.vue          |  40 ++++--
 .../ui/apos/lib/AposColorAlpha.vue            |  10 +-
 .../color-field/ui/apos/lib/AposColorHue.vue  |   5 +-
 .../color-field/ui/apos/lib/AposColorInfo.vue |   5 +-
 .../ui/apos/lib/AposColorSaturation.vue       |   5 +-
 .../ui/apos/components/AposCommandMenuKey.vue |   5 +-
 .../ui/apos/components/AposDocEditor.vue      |  13 +-
 .../apos/components/AposDocLocalePicker.vue   |   3 +-
 .../ui/apos/logic/AposDocContextMenu.js       | 118 ++++++++++--------
 modules/@apostrophecms/doc/index.js           |  16 +--
 modules/@apostrophecms/image/index.js         |   3 +-
 .../AposImageRelationshipEditor.vue           |  23 +++-
 .../ui/apos/components/AposMediaManager.vue   |  15 ++-
 .../components/AposMediaManagerDisplay.vue    |   5 +-
 .../components/AposMediaManagerEditor.vue     |  30 ++++-
 .../components/AposMediaManagerSelections.vue |   5 +-
 modules/@apostrophecms/login/index.js         |  16 +--
 .../components/AposForgotPasswordForm.vue     |  10 +-
 .../ui/apos/components/AposLoginForm.vue      |   5 +-
 .../login/ui/apos/components/TheAposLogin.vue |  20 ++-
 .../modal/ui/apos/components/AposModal.vue    |  50 ++++++--
 .../ui/apos/components/AposModalBody.vue      |  10 +-
 .../apos/components/AposModalBreadcrumbs.vue  |   5 +-
 .../ui/apos/components/AposModalConfirm.vue   |  20 ++-
 .../ui/apos/components/AposModalRail.vue      |   5 +-
 .../ui/apos/components/AposModalReport.vue    |  10 +-
 .../apos/components/AposModalShareDraft.vue   |   5 +-
 .../ui/apos/components/AposModalTabs.vue      |   5 +-
 .../ui/apos/components/AposModalToolbar.vue   |  10 +-
 .../apos/components/AposWidgetModalTabs.vue   |  10 +-
 .../ui/apos/mixins/AposDocErrorsMixin.js      |   3 +-
 modules/@apostrophecms/notification/index.js  |   3 +-
 .../ui/apos/components/AposNotification.vue   |  15 ++-
 .../ui/apos/components/AposInputOembed.vue    |  11 +-
 modules/@apostrophecms/page/index.js          |  20 +--
 .../ui/apos/components/AposPagesManager.vue   |  10 +-
 .../page/ui/apos/logic/AposPagesManager.js    |  17 +--
 .../ui/apos/components/AposPermissionGrid.vue |  10 +-
 modules/@apostrophecms/piece-type/index.js    |  14 ++-
 .../ui/apos/components/AposDocsManager.vue    |  13 +-
 .../components/AposDocsManagerDisplay.vue     |   5 +-
 .../components/AposRelationshipEditor.vue     |   3 +-
 .../lib/generateTiptapTable.js                |  20 +--
 .../components/AposImageControlDialog.vue     |  22 ++--
 .../components/AposRichTextWidgetEditor.vue   |  16 ++-
 .../ui/apos/components/AposTiptapAnchor.vue   |   5 +-
 .../ui/apos/components/AposTiptapColor.vue    |   5 +-
 .../apos/components/AposTiptapImportTable.vue |   5 +-
 .../ui/apos/components/AposTiptapLink.vue     |   5 +-
 .../ui/apos/components/AposTiptapMarks.vue    |  10 +-
 .../ui/apos/components/AposArrayEditor.vue    |  10 +-
 .../ui/apos/components/AposInputArray.vue     |  35 ++++--
 .../ui/apos/components/AposInputBoolean.vue   |  10 +-
 .../ui/apos/components/AposInputRadio.vue     |   5 +-
 .../ui/apos/components/AposInputRange.vue     |  15 ++-
 .../ui/apos/components/AposInputWrapper.vue   |  15 ++-
 .../schema/ui/apos/components/AposLogo.vue    |  55 ++++++--
 .../ui/apos/components/AposLogoIcon.vue       |  55 ++++++--
 .../ui/apos/components/AposLogoPadless.vue    |  55 ++++++--
 .../ui/apos/components/AposSearchList.vue     |  20 ++-
 .../schema/ui/apos/components/AposSubform.vue |  20 ++-
 .../schema/ui/apos/logic/AposInputArray.js    |  32 ++---
 .../ui/apos/logic/AposInputAttachment.js      |   3 +-
 .../ui/apos/logic/AposInputRelationship.js    |  13 +-
 .../apos/components/AposSettingsManager.vue   |   5 +-
 .../components/AposSubmittedDraftIcon.vue     |   5 +-
 modules/@apostrophecms/task/index.js          |  14 ++-
 .../template/lib/bundlesLoader.js             |   3 +-
 .../components/AposTranslationIndicator.vue   |  15 ++-
 .../ui/ui/apos/components/AposButton.vue      |  15 ++-
 .../ui/ui/apos/components/AposButtonSplit.vue |   5 +-
 .../apos/components/AposCellContextMenu.vue   |   5 +-
 .../ui/ui/apos/components/AposCheckbox.vue    |   5 +-
 .../apos/components/AposCloudUploadIcon.vue   |  25 +++-
 .../ui/ui/apos/components/AposEmptyState.vue  |  15 ++-
 .../ui/ui/apos/components/AposFile.vue        |  15 ++-
 .../ui/ui/apos/components/AposFilterMenu.vue  |   5 +-
 .../ui/apos/components/AposLoadingBlock.vue   |   5 +-
 .../ui/apos/components/AposLocalePicker.vue   |   5 +-
 .../ui/ui/apos/components/AposPager.vue       |   5 +-
 .../ui/ui/apos/components/AposSelect.vue      |   5 +-
 .../ui/ui/apos/components/AposSlat.vue        |  25 ++--
 .../ui/ui/apos/components/AposSlatList.vue    |   5 +-
 .../ui/ui/apos/components/AposSpinner.vue     |   5 +-
 .../ui/apos/components/AposSubformPreview.vue |  10 +-
 .../ui/ui/apos/components/AposTable.vue       |   5 +-
 .../ui/ui/apos/components/AposTag.vue         |   5 +-
 .../ui/ui/apos/components/AposTagApply.vue    |  10 +-
 .../ui/ui/apos/components/AposTagList.vue     |  14 ++-
 .../ui/ui/apos/components/AposTree.vue        |   5 +-
 .../ui/ui/apos/components/AposTreeRows.vue    |   5 +-
 .../@apostrophecms/ui/ui/apos/stores/modal.js |  10 +-
 .../ui/apos/components/AposWidgetEditor.vue   |   5 +-
 test/queryBuilders.js                         |  22 ++--
 104 files changed, 1045 insertions(+), 472 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index adeea1d82e..d7702cdd59 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -2,99 +2,5 @@
   "extends": [
     "apostrophe",
     "plugin:vue/vue3-recommended"
-  ],
-  "env": {
-    "mocha": true
-  },
-  "globals": {
-    "apos": true
-  },
-  "rules": {
-    "max-len": "off",
-    "no-var": "error",
-    "no-console": 0,
-    "vue/no-deprecated-v-on-native-modifier": 0,
-    "multiline-ternary": "off",
-    "no-unused-vars": [
-      "error",
-      { "varsIgnorePattern": "^_.", "args": "none" }
-    ],
-    "vue/no-deprecated-destroyed-lifecycle": 0,
-    "vue/v-on-event-hyphenation": 1,
-    "vue/custom-event-name-casing": ["warn", "kebab-case"],
-    "vue/component-tags-order": [
-      "warn",
-      {
-        "order": [
-          "template",
-          "script",
-          "style"
-        ]
-      }
-    ],
-    "vue/max-attributes-per-line": [
-      "warn",
-      {
-        "singleline": 2
-      }
-    ],
-    "vue/singleline-html-element-content-newline": [
-      "warn",
-      {
-        "ignoreWhenNoAttributes": true,
-        "ignoreWhenEmpty": true,
-        "ignores": [
-          "h1",
-          "h2",
-          "h3",
-          "pre",
-          "textarea"
-        ]
-      }
-    ]
-  },
-  "overrides": [
-    {
-      "files": "*.vue",
-      "globals": {
-        "defineProps": "readonly",
-        "defineEmits": "readonly",
-        "defineExpose": "readonly",
-        "defineOptions": "readonly",
-        "defineModel": "readonly",
-        "defineSlots": "readonly"
-      }
-    },
-    {
-      "files": [
-        "**/ui/**/*.js"
-      ],
-      "globals": {
-        "apos": true
-      },
-      "env": {
-        "browser": true
-      }
-    },
-    {
-      "files": [
-        "**/ui/public/*.js"
-      ],
-      "globals": {
-        "apos": true
-      },
-      "env": {
-        "browser": true
-      },
-      "rules": {
-        "no-var": 0
-      }
-    }
-  ],
-  "parser": "vue-eslint-parser",
-  "parserOptions": {
-    "parser": "@babel/eslint-parser",
-    "sourceType": "module",
-    "requireConfigFile": false
-  }
+  ]
 }
diff --git a/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposAdminBar.vue b/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposAdminBar.vue
index ad423a1c96..ecdea8475a 100644
--- a/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposAdminBar.vue
+++ b/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposAdminBar.vue
@@ -4,7 +4,10 @@
     class="apos-admin-bar-wrapper"
     :class="themeClass"
   >
-    <div ref="spacer" class="apos-admin-bar-spacer" />
+    <div
+      ref="spacer"
+      class="apos-admin-bar-spacer"
+    />
     <nav
       ref="adminBar"
       class="apos-admin-bar"
diff --git a/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposAdminBarMenu.vue b/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposAdminBarMenu.vue
index 9e1cdfda2f..c670cb7893 100644
--- a/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposAdminBarMenu.vue
+++ b/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposAdminBarMenu.vue
@@ -1,6 +1,12 @@
 <template>
-  <ol class="apos-admin-bar__items" role="menu">
-    <li v-if="pageTree" class="apos-admin-bar__item">
+  <ol
+    class="apos-admin-bar__items"
+    role="menu"
+  >
+    <li
+      v-if="pageTree"
+      class="apos-admin-bar__item"
+    >
       <AposButton
         type="subtle"
         label="apostrophe:pages"
@@ -39,7 +45,10 @@
         @click="emitEvent(item.action)"
       />
     </li>
-    <li v-if="createMenu.length > 0" class="apos-admin-bar__item">
+    <li
+      v-if="createMenu.length > 0"
+      class="apos-admin-bar__item"
+    >
       <AposContextMenu
         class="apos-admin-bar__create"
         :menu="createMenu"
diff --git a/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBar.vue b/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBar.vue
index 700e25f735..5c0a3bfa46 100644
--- a/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBar.vue
+++ b/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBar.vue
@@ -82,9 +82,11 @@ export default {
       saved: false,
       savingTimeout: null,
       published: null,
-      context: window.apos.adminBar.context ? {
-        ...window.apos.adminBar.context
-      } : {},
+      context: window.apos.adminBar.context
+        ? {
+          ...window.apos.adminBar.context
+        }
+        : {},
       contextStack: [],
       // If a published context doc itself is not editable this will contain a hint
       // that the draft version is editable, when appropriate. It should only be
@@ -582,9 +584,11 @@ export default {
         ...apos.http.parseQuery(window.location.search),
         aposRefresh: '1',
         aposMode: this.draftMode,
-        ...(this.editMode ? {
-          aposEdit: '1'
-        } : {})
+        ...(this.editMode
+          ? {
+            aposEdit: '1'
+          }
+          : {})
       };
 
       if (doc._url) {
diff --git a/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposSavingIndicator.vue b/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposSavingIndicator.vue
index 9c9e52bae8..66ad565653 100644
--- a/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposSavingIndicator.vue
+++ b/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposSavingIndicator.vue
@@ -10,7 +10,10 @@
         v-bind="savingIndicator.options"
         class="apos-admin-bar__status__icon"
       />
-      <div ref="statusLabel" class="apos-admin-bar__status__label">
+      <div
+        ref="statusLabel"
+        class="apos-admin-bar__status__label"
+      >
         {{ $t(savingLabel) }}
       </div>
     </span>
diff --git a/modules/@apostrophecms/area/ui/apos/components/AposAreaContextualMenu.vue b/modules/@apostrophecms/area/ui/apos/components/AposAreaContextualMenu.vue
index 7a797758e1..9c8e6ec8d9 100644
--- a/modules/@apostrophecms/area/ui/apos/components/AposAreaContextualMenu.vue
+++ b/modules/@apostrophecms/area/ui/apos/components/AposAreaContextualMenu.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="apos-area-menu" :class="{'apos-is-focused': groupIsFocused}">
+  <div
+    class="apos-area-menu"
+    :class="{'apos-is-focused': groupIsFocused}"
+  >
     <AposContextMenu
       v-bind="extendedContextMenuOptions"
       ref="contextMenu"
@@ -16,7 +19,10 @@
           class="apos-area-menu__item"
           :class="{'apos-has-group': item.items}"
         >
-          <dl v-if="item.items" class="apos-area-menu__group">
+          <dl
+            v-if="item.items"
+            class="apos-area-menu__group"
+          >
             <dt>
               <button
                 v-if="item.items"
@@ -44,7 +50,10 @@
                 />
               </button>
             </dt>
-            <dd class="apos-area-menu__group-list" role="region">
+            <dd
+              class="apos-area-menu__group-list"
+              role="region"
+            >
               <ul
                 :id="`${menuId}-group-${itemIndex}`"
                 class="apos-area-menu__items apos-area-menu__items--accordion"
diff --git a/modules/@apostrophecms/area/ui/apos/components/AposAreaExpandedMenu.vue b/modules/@apostrophecms/area/ui/apos/components/AposAreaExpandedMenu.vue
index 03508b8dce..f97f8d0861 100644
--- a/modules/@apostrophecms/area/ui/apos/components/AposAreaExpandedMenu.vue
+++ b/modules/@apostrophecms/area/ui/apos/components/AposAreaExpandedMenu.vue
@@ -15,7 +15,12 @@
             :key="groupIndex"
             class="apos-widget-group"
           >
-            <h2 v-if="group.label" class="apos-widget-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${
@@ -52,7 +57,10 @@
                 <p class="apos-widget__label">
                   {{ $t(item.label) }}
                 </p>
-                <p v-if="item.description" class="apos-widget__help">
+                <p
+                  v-if="item.description"
+                  class="apos-widget__help"
+                >
                   {{ $t(item.description) }}
                 </p>
               </button>
diff --git a/modules/@apostrophecms/area/ui/apos/components/AposAreaWidget.vue b/modules/@apostrophecms/area/ui/apos/components/AposAreaWidget.vue
index be0c51c946..d81d969e8b 100644
--- a/modules/@apostrophecms/area/ui/apos/components/AposAreaWidget.vue
+++ b/modules/@apostrophecms/area/ui/apos/components/AposAreaWidget.vue
@@ -27,7 +27,10 @@
       >
         <ol class="apos-area-widget__breadcrumbs">
           <li class="apos-area-widget__breadcrumb apos-area-widget__breadcrumb--widget-icon">
-            <AposIndicator :icon="widgetIcon" :icon-size="13" />
+            <AposIndicator
+              :icon="widgetIcon"
+              :icon-size="13"
+            />
           </li>
           <li
             v-for="(item, index) in breadcrumbs.list"
@@ -45,7 +48,10 @@
               @click="getFocus($event, item.id)"
             />
           </li>
-          <li class="apos-area-widget__breadcrumb" data-apos-widget-breadcrumb="0">
+          <li
+            class="apos-area-widget__breadcrumb"
+            data-apos-widget-breadcrumb="0"
+          >
             <AposButton
               type="quiet"
               :label="foreign ? {
diff --git a/modules/@apostrophecms/asset/lib/build/task.js b/modules/@apostrophecms/asset/lib/build/task.js
index a313f3618e..9c7d27e698 100644
--- a/modules/@apostrophecms/asset/lib/build/task.js
+++ b/modules/@apostrophecms/asset/lib/build/task.js
@@ -414,7 +414,8 @@ module.exports = (self) => ({
               ${(components && components.registerCode) || ''}
               ${(tiptap && tiptap.registerCode) || ''}
               ` +
-              (app ? stripIndent`
+              (app
+                ? stripIndent`
               if (document.readyState !== 'loading') {
                 setTimeout(invoke, 0);
               } else {
@@ -423,12 +424,15 @@ module.exports = (self) => ({
               function invoke() {
                 ${app.invokeCode}
               }
-              ` : '') +
+              `
+                : '') +
               // No delay on these, they expect to run early like ui/public code
               // and the first ones invoked set up expected stuff like apos.http
-              (indexJs ? stripIndent`
+              (indexJs
+                ? stripIndent`
                 ${indexJs.invokeCode}
-              ` : '')
+              `
+                : '')
       );
     }
 
diff --git a/modules/@apostrophecms/asset/lib/webpack/src/webpack.scss.js b/modules/@apostrophecms/asset/lib/webpack/src/webpack.scss.js
index 6e03e34f4a..673284d28d 100644
--- a/modules/@apostrophecms/asset/lib/webpack/src/webpack.scss.js
+++ b/modules/@apostrophecms/asset/lib/webpack/src/webpack.scss.js
@@ -3,13 +3,15 @@ const postcssViewportToContainerToggle = require('postcss-viewport-to-container-
 
 module.exports = (options, apos, srcBuildNames) => {
   const postcssPlugins = [
-    ...apos.asset.options.breakpointPreviewMode?.enable === true ? [
-      postcssViewportToContainerToggle({
-        modifierAttr: 'data-breakpoint-preview-mode',
-        debug: apos.asset.options.breakpointPreviewMode?.debug === true,
-        transform: apos.asset.options.breakpointPreviewMode?.transform || null
-      })
-    ] : [],
+    ...apos.asset.options.breakpointPreviewMode?.enable === true
+      ? [
+        postcssViewportToContainerToggle({
+          modifierAttr: 'data-breakpoint-preview-mode',
+          debug: apos.asset.options.breakpointPreviewMode?.debug === true,
+          transform: apos.asset.options.breakpointPreviewMode?.transform || null
+        })
+      ]
+      : [],
     'autoprefixer',
     {}
   ];
diff --git a/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue b/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue
index 38b0e448ca..24f27d3ced 100644
--- a/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue
+++ b/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue
@@ -10,19 +10,37 @@
       !presetColors ? 'apos-color--disable-presets' : null
     ]"
   >
-    <div v-if="!disableSpectrum" class="apos-color__saturation-wrap">
-      <Saturation :value="colors" @change="childChange" />
+    <div
+      v-if="!disableSpectrum"
+      class="apos-color__saturation-wrap"
+    >
+      <Saturation
+        :value="colors"
+        @change="childChange"
+      />
     </div>
     <div
       v-if="!(disableSpectrum && disableAlpha)"
       class="apos-color__controls"
     >
       <div class="apos-color__sliders">
-        <div v-if="!disableSpectrum" class="apos-color__hue-wrap">
-          <Hue :value="colors" @change="childChange" />
+        <div
+          v-if="!disableSpectrum"
+          class="apos-color__hue-wrap"
+        >
+          <Hue
+            :value="colors"
+            @change="childChange"
+          />
         </div>
-        <div v-if="!disableAlpha" class="apos-color__alpha-wrap">
-          <Alpha :value="colors" @change="childChange" />
+        <div
+          v-if="!disableAlpha"
+          class="apos-color__alpha-wrap"
+        >
+          <Alpha
+            :value="colors"
+            @change="childChange"
+          />
         </div>
       </div>
       <div class="apos-color__color-wrap">
@@ -35,7 +53,10 @@
         <AposColorCheckerboard />
       </div>
     </div>
-    <div v-if="!disableFields" class="apos-color__field">
+    <div
+      v-if="!disableFields"
+      class="apos-color__field"
+    >
       <!-- rgba -->
       <div class="apos-color__field--double">
         <EditableContent
@@ -65,7 +86,10 @@
           @change="inputChange"
         />
       </div>
-      <div v-if="!disableAlpha" class="apos-color__field--single">
+      <div
+        v-if="!disableAlpha"
+        class="apos-color__field--single"
+      >
         <EditableContent
           label="a"
           :value="colors.a"
diff --git a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorAlpha.vue b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorAlpha.vue
index 9d3d702af5..7bbb29dcd1 100644
--- a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorAlpha.vue
+++ b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorAlpha.vue
@@ -3,7 +3,10 @@
     <div class="apos-color__alpha-checkboard-wrap">
       <AposColorCheckerboard />
     </div>
-    <div class="apos-color__alpha-gradient" :style="{ background: gradientColor }" />
+    <div
+      class="apos-color__alpha-gradient"
+      :style="{ background: gradientColor }"
+    />
     <div
       ref="container"
       class="apos-color__alpha-container"
@@ -11,7 +14,10 @@
       @touchmove="handleChange"
       @touchstart="handleChange"
     >
-      <div class="apos-color__alpha-pointer" :style="{ left: `${colors.a * 100}%` }">
+      <div
+        class="apos-color__alpha-pointer"
+        :style="{ left: `${colors.a * 100}%` }"
+      >
         <div class="apos-color__alpha-picker" />
       </div>
     </div>
diff --git a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorHue.vue b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorHue.vue
index 8763f7842d..d283548c64 100644
--- a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorHue.vue
+++ b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorHue.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="apos-color__hue" :class="[directionClass]">
+  <div
+    class="apos-color__hue"
+    :class="[directionClass]"
+  >
     <div
       ref="container"
       class="apos-color__hue-container"
diff --git a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorInfo.vue b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorInfo.vue
index 41f4eb82ac..c01d8986f1 100644
--- a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorInfo.vue
+++ b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorInfo.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="apos-color-info" data-apos-test="colorInfo">
+  <div
+    class="apos-color-info"
+    data-apos-test="colorInfo"
+  >
     <span v-if="!isMicro">
       {{ label }}
     </span>
diff --git a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorSaturation.vue b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorSaturation.vue
index bec9889e70..878bd6b016 100644
--- a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorSaturation.vue
+++ b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorSaturation.vue
@@ -9,7 +9,10 @@
   >
     <div class="apos-color__saturation-white" />
     <div class="apos-color__saturation-black" />
-    <div class="apos-color__saturation-pointer" :style="{ top: pointerTop, left: pointerLeft }">
+    <div
+      class="apos-color__saturation-pointer"
+      :style="{ top: pointerTop, left: pointerLeft }"
+    >
       <div class="apos-color__saturation-circle" />
     </div>
   </div>
diff --git a/modules/@apostrophecms/command-menu/ui/apos/components/AposCommandMenuKey.vue b/modules/@apostrophecms/command-menu/ui/apos/components/AposCommandMenuKey.vue
index 8a8a2152fb..0bba841b62 100644
--- a/modules/@apostrophecms/command-menu/ui/apos/components/AposCommandMenuKey.vue
+++ b/modules/@apostrophecms/command-menu/ui/apos/components/AposCommandMenuKey.vue
@@ -7,7 +7,10 @@
       class="apos-button__icon"
       fill-color="color"
     />
-    <slot v-if="label" name="label">
+    <slot
+      v-if="label"
+      name="label"
+    >
       {{ $t(label) }}
     </slot>
   </span>
diff --git a/modules/@apostrophecms/doc-type/ui/apos/components/AposDocEditor.vue b/modules/@apostrophecms/doc-type/ui/apos/components/AposDocEditor.vue
index b2570d86e0..42b7727292 100644
--- a/modules/@apostrophecms/doc-type/ui/apos/components/AposDocEditor.vue
+++ b/modules/@apostrophecms/doc-type/ui/apos/components/AposDocEditor.vue
@@ -16,7 +16,10 @@
         @click="confirmAndCancel"
       />
     </template>
-    <template v-if="showLocalePicker" #localeDisplay>
+    <template
+      v-if="showLocalePicker"
+      #localeDisplay
+    >
       <AposDocLocalePicker
         :locale="modalData.locale"
         :doc-id="referenceDocId"
@@ -72,7 +75,10 @@
     <template #main>
       <AposModalBody>
         <template #bodyMain>
-          <div v-if="docReady" class="apos-doc-editor__body">
+          <div
+            v-if="docReady"
+            class="apos-doc-editor__body"
+          >
             <AposSchema
               v-for="tab in tabs"
               v-show="tab.name === currentTab"
@@ -741,7 +747,8 @@ export default {
           action: 'onSave',
           description: {
             ...description,
-            key: isSingleton ? 'apostrophe:updateSingleton'
+            key: isSingleton
+              ? 'apostrophe:updateSingleton'
               : (isNew ? 'apostrophe:insertAndReturn' : 'apostrophe:updateAndReturn')
           },
           def: true
diff --git a/modules/@apostrophecms/doc-type/ui/apos/components/AposDocLocalePicker.vue b/modules/@apostrophecms/doc-type/ui/apos/components/AposDocLocalePicker.vue
index 37ba262883..2705b11488 100644
--- a/modules/@apostrophecms/doc-type/ui/apos/components/AposDocLocalePicker.vue
+++ b/modules/@apostrophecms/doc-type/ui/apos/components/AposDocLocalePicker.vue
@@ -138,7 +138,8 @@ async function switchLocale(locale) {
     }, {
       hasCloseButton: true,
       tiny: true
-    }) : false;
+    })
+    : false;
 
   if (save === null) {
     return;
diff --git a/modules/@apostrophecms/doc-type/ui/apos/logic/AposDocContextMenu.js b/modules/@apostrophecms/doc-type/ui/apos/logic/AposDocContextMenu.js
index 9c3c729bc1..5cfe64d658 100644
--- a/modules/@apostrophecms/doc-type/ui/apos/logic/AposDocContextMenu.js
+++ b/modules/@apostrophecms/doc-type/ui/apos/logic/AposDocContextMenu.js
@@ -119,58 +119,74 @@ export default {
             action: 'edit'
           }
         ] : []),
-        ...((this.showPreview && this.canPreview) ? [
-          {
-            label: 'apostrophe:preview',
-            action: 'preview'
-          }
-        ] : []),
-        ...((this.showDismissSubmission && this.canDismissSubmission) ? [
-          {
-            label: 'apostrophe:dismissSubmission',
-            action: 'dismissSubmission'
-          }
-        ] : []),
-        ...(this.showCopy && this.canCopy ? [
-          {
-            label: 'apostrophe:duplicate',
-            action: 'copy'
-          }
-        ] : []),
-        ...(this.canLocalize ? [
-          {
-            label: 'apostrophe:localize',
-            action: 'localize'
-          }
-        ] : []),
+        ...((this.showPreview && this.canPreview)
+          ? [
+            {
+              label: 'apostrophe:preview',
+              action: 'preview'
+            }
+          ]
+          : []),
+        ...((this.showDismissSubmission && this.canDismissSubmission)
+          ? [
+            {
+              label: 'apostrophe:dismissSubmission',
+              action: 'dismissSubmission'
+            }
+          ]
+          : []),
+        ...(this.showCopy && this.canCopy
+          ? [
+            {
+              label: 'apostrophe:duplicate',
+              action: 'copy'
+            }
+          ]
+          : []),
+        ...(this.canLocalize
+          ? [
+            {
+              label: 'apostrophe:localize',
+              action: 'localize'
+            }
+          ]
+          : []),
         ...this.customMenusByContext,
-        ...((this.showDiscardDraft && this.canDiscardDraft) ? [
-          {
-            label: this.context.lastPublishedAt ? 'apostrophe:discardDraft' : 'apostrophe:deleteDraft',
-            action: 'discardDraft',
-            modifiers: [ 'danger' ]
-          }
-        ] : []),
-        ...(this.showArchive && this.canArchive ? [
-          {
-            label: 'apostrophe:archive',
-            action: 'archive',
-            modifiers: [ 'danger' ]
-          }
-        ] : []),
-        ...(this.canUnpublish ? [
-          {
-            label: 'apostrophe:unpublish',
-            action: 'unpublish',
-            modifiers: [ 'danger' ]
-          }
-        ] : []),
-        ...(this.showRestore && this.canRestore ? [
-          {
-            label: 'apostrophe:restore',
-            action: 'restore'
-          }
-        ] : [])
+        ...((this.showDiscardDraft && this.canDiscardDraft)
+          ? [
+            {
+              label: this.context.lastPublishedAt ? 'apostrophe:discardDraft' : 'apostrophe:deleteDraft',
+              action: 'discardDraft',
+              modifiers: [ 'danger' ]
+            }
+          ]
+          : []),
+        ...(this.showArchive && this.canArchive
+          ? [
+            {
+              label: 'apostrophe:archive',
+              action: 'archive',
+              modifiers: [ 'danger' ]
+            }
+          ]
+          : []),
+        ...(this.canUnpublish
+          ? [
+            {
+              label: 'apostrophe:unpublish',
+              action: 'unpublish',
+              modifiers: [ 'danger' ]
+            }
+          ]
+          : []),
+        ...(this.showRestore && this.canRestore
+          ? [
+            {
+              label: 'apostrophe:restore',
+              action: 'restore'
+            }
+          ]
+          : [])
       ];
 
       return menu;
diff --git a/modules/@apostrophecms/doc/index.js b/modules/@apostrophecms/doc/index.js
index 3911c74d3d..7161bbd126 100644
--- a/modules/@apostrophecms/doc/index.js
+++ b/modules/@apostrophecms/doc/index.js
@@ -218,13 +218,15 @@ module.exports = {
             const date = new Date();
             doc.updatedAt = date;
             doc.cacheInvalidatedAt = date;
-            doc.updatedBy = req.user ? {
-              _id: req.user._id,
-              title: req.user.title || null,
-              username: req.user.username
-            } : {
-              username: 'ApostropheCMS'
-            };
+            doc.updatedBy = req.user
+              ? {
+                _id: req.user._id,
+                title: req.user.title || null,
+                username: req.user.username
+              }
+              : {
+                username: 'ApostropheCMS'
+              };
           }
         },
         deduplicateWidgetIds(req, doc, options) {
diff --git a/modules/@apostrophecms/image/index.js b/modules/@apostrophecms/image/index.js
index 49e98325bb..2be4e6bf1e 100644
--- a/modules/@apostrophecms/image/index.js
+++ b/modules/@apostrophecms/image/index.js
@@ -263,7 +263,8 @@ module.exports = {
           }).toObject();
         }
         function closeEnough(image) {
-          const testRatio = image._fields ? (image._fields.width / image._fields.height)
+          const testRatio = image._fields
+            ? (image._fields.width / image._fields.height)
             : (image.attachment.width / image.attachment.height);
           const configuredRatio = widgetOptions.aspectRatio[0] / widgetOptions.aspectRatio[1];
           return withinOnePercent(testRatio, configuredRatio);
diff --git a/modules/@apostrophecms/image/ui/apos/components/AposImageRelationshipEditor.vue b/modules/@apostrophecms/image/ui/apos/components/AposImageRelationshipEditor.vue
index e134117020..6c3eb82adc 100644
--- a/modules/@apostrophecms/image/ui/apos/components/AposImageRelationshipEditor.vue
+++ b/modules/@apostrophecms/image/ui/apos/components/AposImageRelationshipEditor.vue
@@ -26,7 +26,10 @@
     <template #leftRail>
       <AposModalRail>
         <div class="apos-schema">
-          <div class="apos-field" data-apos-field="aspectRatio">
+          <div
+            class="apos-field"
+            data-apos-field="aspectRatio"
+          >
             <label class="apos-field__label">
               {{ $t('apostrophe:aspectRatio') }}
               <AposIndicator
@@ -60,7 +63,10 @@
             }}
           </div>
           <div class="apos-schema__aligned-fields">
-            <div class="apos-field" data-apos-field="width">
+            <div
+              class="apos-field"
+              data-apos-field="width"
+            >
               <label class="apos-field__label apos-field__label--aligned">
                 W
               </label>
@@ -74,7 +80,10 @@
                 @blur="blurInput"
               >
             </div>
-            <div class="apos-field" data-apos-field="height">
+            <div
+              class="apos-field"
+              data-apos-field="height"
+            >
               <label class="apos-field__label apos-field__label--aligned">
                 H
               </label>
@@ -93,7 +102,10 @@
       </AposModalRail>
     </template>
     <template #main>
-      <div ref="cropperContainer" class="apos-image-cropper__container">
+      <div
+        ref="cropperContainer"
+        class="apos-image-cropper__container"
+      >
         <AposImageCropper
           :attachment="item.attachment"
           :doc-fields="docFields"
@@ -390,7 +402,8 @@ export default {
         ? {
           aspectRatio: widgetOptions.aspectRatio[0] / widgetOptions.aspectRatio[1],
           disableAspectRatio: true
-        } : {
+        }
+        : {
           aspectRatio: null,
           disableAspectRatio: false
         };
diff --git a/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue b/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue
index 65b9d3c069..fc28836c9d 100644
--- a/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue
+++ b/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue
@@ -13,14 +13,20 @@
     @show-modal="modal.showModal = true"
     @esc="confirmAndCancel"
   >
-    <template v-if="relationshipField" #secondaryControls>
+    <template
+      v-if="relationshipField"
+      #secondaryControls
+    >
       <AposButton
         type="default"
         label="apostrophe:cancel"
         @click="confirmAndCancel"
       />
     </template>
-    <template v-else #secondaryControls>
+    <template
+      v-else
+      #secondaryControls
+    >
       <AposButton
         type="default"
         label="apostrophe:exit"
@@ -52,7 +58,10 @@
     </template>
     <template #main>
       <AposLoadingBlock v-if="isFirstLoading" />
-      <AposModalBody v-else ref="modalBody">
+      <AposModalBody
+        v-else
+        ref="modalBody"
+      >
         <template #bodyHeader>
           <AposDocsManagerToolbar
             :selected-state="selectAllState"
diff --git a/modules/@apostrophecms/image/ui/apos/components/AposMediaManagerDisplay.vue b/modules/@apostrophecms/image/ui/apos/components/AposMediaManagerDisplay.vue
index 1a0c0c00c6..290e45377f 100644
--- a/modules/@apostrophecms/image/ui/apos/components/AposMediaManagerDisplay.vue
+++ b/modules/@apostrophecms/image/ui/apos/components/AposMediaManagerDisplay.vue
@@ -80,7 +80,10 @@
         class="apos-loading"
       />
     </div>
-    <div v-else class="apos-media-manager-display__end-reached">
+    <div
+      v-else
+      class="apos-media-manager-display__end-reached"
+    >
       <p>{{ $t('apostrophe:mediaLibraryEndReached') }}</p>
     </div>
   </div>
diff --git a/modules/@apostrophecms/image/ui/apos/components/AposMediaManagerEditor.vue b/modules/@apostrophecms/image/ui/apos/components/AposMediaManagerEditor.vue
index 86449f32b5..028685621a 100644
--- a/modules/@apostrophecms/image/ui/apos/components/AposMediaManagerEditor.vue
+++ b/modules/@apostrophecms/image/ui/apos/components/AposMediaManagerEditor.vue
@@ -5,7 +5,10 @@
       'apos-is-replacing': showReplace
     }"
   >
-    <div v-if="activeMedia" class="apos-media-editor__inner">
+    <div
+      v-if="activeMedia"
+      class="apos-media-editor__inner"
+    >
       <div class="apos-media-editor__thumb-wrapper">
         <img
           v-if="activeMedia.attachment && activeMedia.attachment._urls"
@@ -15,10 +18,16 @@
         >
       </div>
       <ul class="apos-media-editor__details">
-        <li v-if="createdDate" class="apos-media-editor__detail">
+        <li
+          v-if="createdDate"
+          class="apos-media-editor__detail"
+        >
           {{ $t('apostrophe:mediaCreatedDate', { createdDate }) }}
         </li>
-        <li v-if="fileSize" class="apos-media-editor__detail">
+        <li
+          v-if="fileSize"
+          class="apos-media-editor__detail"
+        >
           {{ $t('apostrophe:mediaFileSize', { fileSize }) }}
         </li>
         <li
@@ -34,7 +43,10 @@
         </li>
       </ul>
       <ul class="apos-media-editor__links">
-        <li class="apos-media-editor__link" aria-hidden="true">
+        <li
+          class="apos-media-editor__link"
+          aria-hidden="true"
+        >
           <AposButton
             type="quiet"
             label="apostrophe:replace"
@@ -42,7 +54,10 @@
             @click="showReplace = true"
           />
         </li>
-        <li v-if="activeMedia.attachment && activeMedia.attachment._urls" class="apos-media-editor__link">
+        <li
+          v-if="activeMedia.attachment && activeMedia.attachment._urls"
+          class="apos-media-editor__link"
+        >
           <AposButton
             type="quiet"
             label="apostrophe:view"
@@ -50,7 +65,10 @@
             @click="viewMedia"
           />
         </li>
-        <li v-if="activeMedia.attachment && activeMedia.attachment._urls" class="apos-media-editor__link">
+        <li
+          v-if="activeMedia.attachment && activeMedia.attachment._urls"
+          class="apos-media-editor__link"
+        >
           <AposButton
             type="quiet"
             label="apostrophe:download"
diff --git a/modules/@apostrophecms/image/ui/apos/components/AposMediaManagerSelections.vue b/modules/@apostrophecms/image/ui/apos/components/AposMediaManagerSelections.vue
index 5500471baa..b6e9921657 100644
--- a/modules/@apostrophecms/image/ui/apos/components/AposMediaManagerSelections.vue
+++ b/modules/@apostrophecms/image/ui/apos/components/AposMediaManagerSelections.vue
@@ -41,7 +41,10 @@
         </li>
       </ol>
     </div>
-    <div v-else class="apos-media-manager-selection__empty">
+    <div
+      v-else
+      class="apos-media-manager-selection__empty"
+    >
       <AposEmptyState :empty-state="emptyState" />
     </div>
   </div>
diff --git a/modules/@apostrophecms/login/index.js b/modules/@apostrophecms/login/index.js
index a59c952a17..b4da1888b6 100644
--- a/modules/@apostrophecms/login/index.js
+++ b/modules/@apostrophecms/login/index.js
@@ -546,14 +546,16 @@ module.exports = {
           schema: self.getSchema(),
           action: self.action,
           passwordResetEnabled: self.isPasswordResetEnabled(),
-          ...(req.user ? {
-            user: {
-              _id: req.user._id,
-              title: req.user.title,
-              username: req.user.username,
-              email: req.user.email
+          ...(req.user
+            ? {
+              user: {
+                _id: req.user._id,
+                title: req.user.title,
+                username: req.user.username,
+                email: req.user.email
+              }
             }
-          } : {}),
+            : {}),
           requirements: Object.fromEntries(
             Object.entries(self.requirements).map(([ name, requirement ]) => {
               const browserRequirement = {
diff --git a/modules/@apostrophecms/login/ui/apos/components/AposForgotPasswordForm.vue b/modules/@apostrophecms/login/ui/apos/components/AposForgotPasswordForm.vue
index 69c80f9d23..b109bbf2fa 100644
--- a/modules/@apostrophecms/login/ui/apos/components/AposForgotPasswordForm.vue
+++ b/modules/@apostrophecms/login/ui/apos/components/AposForgotPasswordForm.vue
@@ -10,7 +10,10 @@
       :help="help"
       :error="$t(error)"
     />
-    <div class="apos-login-form__body" data-apos-test="pwdResetRequestForm">
+    <div
+      class="apos-login-form__body"
+      data-apos-test="pwdResetRequestForm"
+    >
       <AposButton
         v-if="done"
         data-apos-test="loginBack"
@@ -21,7 +24,10 @@
         :modifiers="['block']"
         @click="$emit('set-stage', 'login')"
       />
-      <form v-else @submit.prevent="submit">
+      <form
+        v-else
+        @submit.prevent="submit"
+      >
         <AposSchema
           v-model="doc"
           :schema="schema"
diff --git a/modules/@apostrophecms/login/ui/apos/components/AposLoginForm.vue b/modules/@apostrophecms/login/ui/apos/components/AposLoginForm.vue
index 1345e0d373..0a54f6f483 100644
--- a/modules/@apostrophecms/login/ui/apos/components/AposLoginForm.vue
+++ b/modules/@apostrophecms/login/ui/apos/components/AposLoginForm.vue
@@ -11,7 +11,10 @@
     />
 
     <div class="apos-login-form__body">
-      <form data-apos-test="loginForm" @submit.prevent="submit">
+      <form
+        data-apos-test="loginForm"
+        @submit.prevent="submit"
+      >
         <AposSchema
           v-model="doc"
           :schema="schema"
diff --git a/modules/@apostrophecms/login/ui/apos/components/TheAposLogin.vue b/modules/@apostrophecms/login/ui/apos/components/TheAposLogin.vue
index 4ba2fcd86a..1bb2223ff3 100644
--- a/modules/@apostrophecms/login/ui/apos/components/TheAposLogin.vue
+++ b/modules/@apostrophecms/login/ui/apos/components/TheAposLogin.vue
@@ -7,7 +7,10 @@
       :class="themeClass"
     >
       <transition name="fade-outer">
-        <div v-if="showNav" class="apos-login__nav">
+        <div
+          v-if="showNav"
+          class="apos-login__nav"
+        >
           <a
             href="#"
             class="apos-login__link apos-login--arrow-left"
@@ -20,7 +23,10 @@
         </div>
       </transition>
       <div class="apos-login__wrapper">
-        <transition name="fade-body" mode="out-in">
+        <transition
+          name="fade-body"
+          mode="out-in"
+        >
           <AposForgotPasswordForm
             v-if="loaded && stage === 'forgotPassword'"
             :context="context"
@@ -46,9 +52,15 @@
         </transition>
       </div>
       <transition name="fade-outer">
-        <div v-show="loaded" class="apos-login__footer">
+        <div
+          v-show="loaded"
+          class="apos-login__footer"
+        >
           <AposLogo class="apos-login__logo" />
-          <label data-apos-test="projectVersion" class="apos-login__project-version">
+          <label
+            data-apos-test="projectVersion"
+            class="apos-login__project-version"
+          >
             Version {{ context.version }}
           </label>
         </div>
diff --git a/modules/@apostrophecms/modal/ui/apos/components/AposModal.vue b/modules/@apostrophecms/modal/ui/apos/components/AposModal.vue
index 355647cbc5..4e24e2e1bc 100644
--- a/modules/@apostrophecms/modal/ui/apos/components/AposModal.vue
+++ b/modules/@apostrophecms/modal/ui/apos/components/AposModal.vue
@@ -24,7 +24,10 @@
           @click="emit('esc')"
         />
       </transition>
-      <transition :name="transitionType" @after-leave="$emit('inactive')">
+      <transition
+        :name="transitionType"
+        @after-leave="$emit('inactive')"
+      >
         <div
           v-if="modal.showModal"
           :class="innerClasses"
@@ -36,7 +39,10 @@
               <p class="apos-modal__busy-text">
                 {{ modal.busyTitle }}
               </p>
-              <AposSpinner :weight="'heavy'" class="apos-busy__spinner" />
+              <AposSpinner
+                :weight="'heavy'"
+                class="apos-busy__spinner"
+              />
             </div>
           </template>
           <div
@@ -44,13 +50,25 @@
             class="apos-modal__content"
             data-apos-test="modal-content"
           >
-            <header v-if="!modal.disableHeader" class="apos-modal__header">
+            <header
+              v-if="!modal.disableHeader"
+              class="apos-modal__header"
+            >
               <div class="apos-modal__header__main">
-                <div v-if="hasSlot('secondaryControls')" class="apos-modal__controls--secondary">
+                <div
+                  v-if="hasSlot('secondaryControls')"
+                  class="apos-modal__controls--secondary"
+                >
                   <slot name="secondaryControls" />
                 </div>
-                <h2 :id="props.modalData.id" class="apos-modal__heading">
-                  <span v-if="modal.a11yTitle" class="apos-sr-only">
+                <h2
+                  :id="props.modalData.id"
+                  class="apos-modal__heading"
+                >
+                  <span
+                    v-if="modal.a11yTitle"
+                    class="apos-sr-only"
+                  >
                     {{ $t(modal.a11yTitle) }}
                   </span>
                   {{ $t(modalTitle) }}
@@ -59,7 +77,10 @@
                   v-if="hasBeenLocalized || hasSlot('primaryControls') || hasSlot('localeDisplay')"
                   class="apos-modal__controls--header"
                 >
-                  <div v-if="hasSlot('localeDisplay')" class="apos-modal__locale">
+                  <div
+                    v-if="hasSlot('localeDisplay')"
+                    class="apos-modal__locale"
+                  >
                     <slot name="localeDisplay" />
                   </div>
                   <AposLocale
@@ -67,13 +88,22 @@
                     class="apos-modal__locale"
                     :locale="currentLocale"
                   />
-                  <div v-if="hasSlot('primaryControls')" class="apos-modal__controls--primary">
+                  <div
+                    v-if="hasSlot('primaryControls')"
+                    class="apos-modal__controls--primary"
+                  >
                     <slot name="primaryControls" />
                   </div>
                 </div>
               </div>
-              <div v-if="hasSlot('breadcrumbs')" class="apos-modal__breadcrumbs">
-                <slot class="apos-modal__breadcrumbs" name="breadcrumbs" />
+              <div
+                v-if="hasSlot('breadcrumbs')"
+                class="apos-modal__breadcrumbs"
+              >
+                <slot
+                  class="apos-modal__breadcrumbs"
+                  name="breadcrumbs"
+                />
               </div>
             </header>
             <div
diff --git a/modules/@apostrophecms/modal/ui/apos/components/AposModalBody.vue b/modules/@apostrophecms/modal/ui/apos/components/AposModalBody.vue
index 3b1267d6fd..70a582ecbb 100644
--- a/modules/@apostrophecms/modal/ui/apos/components/AposModalBody.vue
+++ b/modules/@apostrophecms/modal/ui/apos/components/AposModalBody.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="apos-modal__body" :class="{ 'apos-modal__body--flex': hasSlot('footer') }">
+  <div
+    class="apos-modal__body"
+    :class="{ 'apos-modal__body--flex': hasSlot('footer') }"
+  >
     <div class="apos-modal__body-inner">
       <div
         v-if="hasSlot('bodyHeader')"
@@ -15,7 +18,10 @@
         <slot name="bodyMain" />
       </div>
     </div>
-    <div v-if="hasSlot('footer')" class="apos-modal__body-footer">
+    <div
+      v-if="hasSlot('footer')"
+      class="apos-modal__body-footer"
+    >
       <slot name="footer" />
     </div>
   </div>
diff --git a/modules/@apostrophecms/modal/ui/apos/components/AposModalBreadcrumbs.vue b/modules/@apostrophecms/modal/ui/apos/components/AposModalBreadcrumbs.vue
index 8b11028a2b..788710e82b 100644
--- a/modules/@apostrophecms/modal/ui/apos/components/AposModalBreadcrumbs.vue
+++ b/modules/@apostrophecms/modal/ui/apos/components/AposModalBreadcrumbs.vue
@@ -1,5 +1,8 @@
 <template>
-  <nav :class="['apos-breadcrumb', classObj]" aria-label="breadcrumb">
+  <nav
+    :class="['apos-breadcrumb', classObj]"
+    aria-label="breadcrumb"
+  >
     <ol class="apos-breadcrumb__items">
       <li
         v-for="(item, index) in items"
diff --git a/modules/@apostrophecms/modal/ui/apos/components/AposModalConfirm.vue b/modules/@apostrophecms/modal/ui/apos/components/AposModalConfirm.vue
index 74d273b4a5..1ac5b3fc72 100644
--- a/modules/@apostrophecms/modal/ui/apos/components/AposModalConfirm.vue
+++ b/modules/@apostrophecms/modal/ui/apos/components/AposModalConfirm.vue
@@ -28,10 +28,16 @@
             v-else-if="content.icon !== false"
             class="apos-confirm__logo"
           />
-          <h2 v-if="content.heading" class="apos-confirm__heading">
+          <h2
+            v-if="content.heading"
+            class="apos-confirm__heading"
+          >
             {{ localize(content.heading) }}
           </h2>
-          <p v-if="content.description" class="apos-confirm__description">
+          <p
+            v-if="content.description"
+            class="apos-confirm__description"
+          >
             {{ localize(content.description) }}
           </p>
           <Component
@@ -39,7 +45,10 @@
             v-if="content.body"
             v-bind="content.body.props"
           />
-          <div v-if="content.form" class="apos-confirm__schema">
+          <div
+            v-if="content.form"
+            class="apos-confirm__schema"
+          >
             <AposSchema
               v-if="formValues"
               v-model="formValues"
@@ -65,7 +74,10 @@
               @click="confirm"
             />
           </div>
-          <p v-if="content.note" class="apos-confirm__note">
+          <p
+            v-if="content.note"
+            class="apos-confirm__note"
+          >
             {{ localize(content.note) }}
           </p>
         </template>
diff --git a/modules/@apostrophecms/modal/ui/apos/components/AposModalRail.vue b/modules/@apostrophecms/modal/ui/apos/components/AposModalRail.vue
index 27550537f9..ffc035eec6 100644
--- a/modules/@apostrophecms/modal/ui/apos/components/AposModalRail.vue
+++ b/modules/@apostrophecms/modal/ui/apos/components/AposModalRail.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="apos-modal__rail" :class="`apos-modal__rail--${type}`">
+  <div
+    class="apos-modal__rail"
+    :class="`apos-modal__rail--${type}`"
+  >
     <slot />
   </div>
 </template>
diff --git a/modules/@apostrophecms/modal/ui/apos/components/AposModalReport.vue b/modules/@apostrophecms/modal/ui/apos/components/AposModalReport.vue
index 62e38cc970..ddf905f04a 100644
--- a/modules/@apostrophecms/modal/ui/apos/components/AposModalReport.vue
+++ b/modules/@apostrophecms/modal/ui/apos/components/AposModalReport.vue
@@ -11,10 +11,16 @@
         <template #bodyMain>
           <div class="apos-report__body">
             <div>
-              <h2 v-if="contentHeadingText" class="apos-report__heading">
+              <h2
+                v-if="contentHeadingText"
+                class="apos-report__heading"
+              >
                 {{ contentHeadingText }}
               </h2>
-              <p v-if="contentDescriptionText" class="apos-report__description">
+              <p
+                v-if="contentDescriptionText"
+                class="apos-report__description"
+              >
                 {{ contentDescriptionText }}
               </p>
             </div>
diff --git a/modules/@apostrophecms/modal/ui/apos/components/AposModalShareDraft.vue b/modules/@apostrophecms/modal/ui/apos/components/AposModalShareDraft.vue
index 97ea9ac8f2..848de0cb67 100644
--- a/modules/@apostrophecms/modal/ui/apos/components/AposModalShareDraft.vue
+++ b/modules/@apostrophecms/modal/ui/apos/components/AposModalShareDraft.vue
@@ -30,7 +30,10 @@
                 data-apos-focus-priority
                 @toggle="toggle"
               />
-              <p class="apos-share-draft__toggle-label" @click="toggle">
+              <p
+                class="apos-share-draft__toggle-label"
+                @click="toggle"
+              >
                 {{ $t('apostrophe:shareDraftEnable') }}
               </p>
             </div>
diff --git a/modules/@apostrophecms/modal/ui/apos/components/AposModalTabs.vue b/modules/@apostrophecms/modal/ui/apos/components/AposModalTabs.vue
index fdd2d56594..0f618e947a 100644
--- a/modules/@apostrophecms/modal/ui/apos/components/AposModalTabs.vue
+++ b/modules/@apostrophecms/modal/ui/apos/components/AposModalTabs.vue
@@ -14,7 +14,10 @@
           @click="selectTab"
         >
           {{ $t(tab.label) }}
-          <span v-if="tabErrors[tab.name] && tabErrors[tab.name].length" class="apos-modal-tabs__label apos-modal-tabs__label--error">
+          <span
+            v-if="tabErrors[tab.name] && tabErrors[tab.name].length"
+            class="apos-modal-tabs__label apos-modal-tabs__label--error"
+          >
             {{ tabErrors[tab.name].length }} {{ generateErrorLabel(tabErrors[tab.name].length) }}
           </span>
         </button>
diff --git a/modules/@apostrophecms/modal/ui/apos/components/AposModalToolbar.vue b/modules/@apostrophecms/modal/ui/apos/components/AposModalToolbar.vue
index 9630410bff..24fd8e4a95 100644
--- a/modules/@apostrophecms/modal/ui/apos/components/AposModalToolbar.vue
+++ b/modules/@apostrophecms/modal/ui/apos/components/AposModalToolbar.vue
@@ -1,9 +1,15 @@
 <template>
-  <div :class="className" class="apos-toolbar">
+  <div
+    :class="className"
+    class="apos-toolbar"
+  >
     <div class="apos-toolbar__group apos-toolbar__group--left">
       <slot name="leftControls" />
     </div>
-    <div v-if="hasRightControls" class="apos-toolbar__group apos-toolbar__group--right">
+    <div
+      v-if="hasRightControls"
+      class="apos-toolbar__group apos-toolbar__group--right"
+    >
       <slot name="rightControls" />
     </div>
   </div>
diff --git a/modules/@apostrophecms/modal/ui/apos/components/AposWidgetModalTabs.vue b/modules/@apostrophecms/modal/ui/apos/components/AposWidgetModalTabs.vue
index aefdd5abfe..e5243156c9 100644
--- a/modules/@apostrophecms/modal/ui/apos/components/AposWidgetModalTabs.vue
+++ b/modules/@apostrophecms/modal/ui/apos/components/AposWidgetModalTabs.vue
@@ -1,6 +1,12 @@
 <template>
-  <div class="apos-modal-tabs" :class="{ 'apos-modal-tabs--horizontal': orientation === 'horizontal' }">
-    <ul class="apos-modal-tabs__tabs" data-apos-test="widget-tabs">
+  <div
+    class="apos-modal-tabs"
+    :class="{ 'apos-modal-tabs--horizontal': orientation === 'horizontal' }"
+  >
+    <ul
+      class="apos-modal-tabs__tabs"
+      data-apos-test="widget-tabs"
+    >
       <li
         v-for="tab in visibleTabs"
         v-show="tab.isVisible !== false"
diff --git a/modules/@apostrophecms/modal/ui/apos/mixins/AposDocErrorsMixin.js b/modules/@apostrophecms/modal/ui/apos/mixins/AposDocErrorsMixin.js
index d2a4422c75..6f72664719 100644
--- a/modules/@apostrophecms/modal/ui/apos/mixins/AposDocErrorsMixin.js
+++ b/modules/@apostrophecms/modal/ui/apos/mixins/AposDocErrorsMixin.js
@@ -14,7 +14,8 @@ export default {
         ? {
           key: 'apostrophe:errorCount',
           count: this.errorCount
-        } : null;
+        }
+        : null;
     }
   },
   methods: {
diff --git a/modules/@apostrophecms/notification/index.js b/modules/@apostrophecms/notification/index.js
index 1c145de7b3..4a71819bcd 100644
--- a/modules/@apostrophecms/notification/index.js
+++ b/modules/@apostrophecms/notification/index.js
@@ -281,7 +281,8 @@ module.exports = {
           interpolate: interpolate || options.interpolate || {},
           // Defaults to true, otherwise launder as boolean
           localize: has(req.body, 'localize')
-            ? self.apos.launder.boolean(req.body.localize) : true,
+            ? self.apos.launder.boolean(req.body.localize)
+            : true,
           job: options.job || null,
           event: options.event,
           classes: options.classes || null
diff --git a/modules/@apostrophecms/notification/ui/apos/components/AposNotification.vue b/modules/@apostrophecms/notification/ui/apos/components/AposNotification.vue
index 2fb02194e2..34f8f3b6f5 100644
--- a/modules/@apostrophecms/notification/ui/apos/components/AposNotification.vue
+++ b/modules/@apostrophecms/notification/ui/apos/components/AposNotification.vue
@@ -1,5 +1,8 @@
 <template>
-  <div role="alert" :class="classList">
+  <div
+    role="alert"
+    :class="classList"
+  >
     <span class="apos-notification__indicator">
       <AposIndicator
         :icon="iconComponent"
@@ -7,7 +10,10 @@
         :icon-size="notification.icon ? 16 : 12"
       />
     </span>
-    <span ref="label" class="apos-notification__label">
+    <span
+      ref="label"
+      class="apos-notification__label"
+    >
       {{ localize(notification.message) }}
       <!-- OK to use index as key because buttons are constant for the lifetime of the notification -->
       <button
@@ -22,7 +28,10 @@
         {{ localize(button.label) }}
       </button>
     </span>
-    <div v-if="process" class="apos-notification__progress">
+    <div
+      v-if="process"
+      class="apos-notification__progress"
+    >
       <div class="apos-notification__progress-bar">
         <div
           class="apos-notification__progress-now"
diff --git a/modules/@apostrophecms/oembed-field/ui/apos/components/AposInputOembed.vue b/modules/@apostrophecms/oembed-field/ui/apos/components/AposInputOembed.vue
index b644cfb849..5506491e49 100644
--- a/modules/@apostrophecms/oembed-field/ui/apos/components/AposInputOembed.vue
+++ b/modules/@apostrophecms/oembed-field/ui/apos/components/AposInputOembed.vue
@@ -49,7 +49,8 @@ export default {
   data () {
     return {
       next: (this.modelValue && this.modelValue.data)
-        ? { ...this.modelValue.data } : {},
+        ? { ...this.modelValue.data }
+        : {},
       oembedResult: {},
       dynamicRatio: '',
       oembedError: null,
@@ -96,9 +97,11 @@ export default {
       ) {
         return { message: this.$t('apostrophe:oembedTypeNotSupported') };
       } else if (this.oembedError) {
-        return this.oembedError.message ? {
-          message: this.oembedError.message
-        } : 'invalid';
+        return this.oembedError.message
+          ? {
+            message: this.oembedError.message
+          }
+          : 'invalid';
       }
 
       if (this.field.required) {
diff --git a/modules/@apostrophecms/page/index.js b/modules/@apostrophecms/page/index.js
index 1a41089499..2f63ab0ad6 100644
--- a/modules/@apostrophecms/page/index.js
+++ b/modules/@apostrophecms/page/index.js
@@ -1105,14 +1105,18 @@ database.`);
         return self.apos.modules['@apostrophecms/any-page-type'].find(req, criteria, options);
       },
       getIdCriteria(_id) {
-        return (_id === '_home') ? {
-          level: 0
-        } : (_id === '_archive') ? {
-          level: 1,
-          archived: true
-        } : {
-          _id
-        };
+        return (_id === '_home')
+          ? {
+            level: 0
+          }
+          : (_id === '_archive')
+            ? {
+              level: 1,
+              archived: true
+            }
+            : {
+              _id
+            };
       },
       // Implementation of the PATCH route. Factored as a method to allow
       // it to be called from the universal @apostrophecms/doc PATCH route
diff --git a/modules/@apostrophecms/page/ui/apos/components/AposPagesManager.vue b/modules/@apostrophecms/page/ui/apos/components/AposPagesManager.vue
index a574bc278b..9233f92313 100644
--- a/modules/@apostrophecms/page/ui/apos/components/AposPagesManager.vue
+++ b/modules/@apostrophecms/page/ui/apos/components/AposPagesManager.vue
@@ -42,7 +42,10 @@
         @click="create()"
       />
     </template>
-    <template v-if="relationshipField" #leftRail>
+    <template
+      v-if="relationshipField"
+      #leftRail
+    >
       <AposModalRail>
         <div class="apos-pages-manager__relationship__rail">
           <div class="apos-pages-manager__relationship__counts">
@@ -63,7 +66,10 @@
     </template>
     <template #main>
       <AposModalBody>
-        <template v-if="!relationshipField" #bodyHeader>
+        <template
+          v-if="!relationshipField"
+          #bodyHeader
+        >
           <AposDocsManagerToolbar
             :selected-state="selectAllState"
             :total-pages="totalPages"
diff --git a/modules/@apostrophecms/page/ui/apos/logic/AposPagesManager.js b/modules/@apostrophecms/page/ui/apos/logic/AposPagesManager.js
index 77350a931e..b7058975e0 100644
--- a/modules/@apostrophecms/page/ui/apos/logic/AposPagesManager.js
+++ b/modules/@apostrophecms/page/ui/apos/logic/AposPagesManager.js
@@ -103,12 +103,14 @@ export default {
       const checkLen = this.checked.length;
       const rowLen = this.items.length;
 
-      return checkLen > 0 && checkLen !== rowLen ? {
-        value: 'checked',
-        indeterminate: true
-      } : {
-        value: 'checked'
-      };
+      return checkLen > 0 && checkLen !== rowLen
+        ? {
+          value: 'checked',
+          indeterminate: true
+        }
+        : {
+          value: 'checked'
+        };
     },
     canCreate() {
       const page = this.items.find(page => page.aposDocId === this.moduleOptions.page.aposDocId);
@@ -366,7 +368,8 @@ export default {
               ...requestOptions,
               _ids: this.checked,
               messages,
-              type: this.checked.length === 1 ? this.moduleLabels.singular
+              type: this.checked.length === 1
+                ? this.moduleLabels.singular
                 : this.moduleLabels.plural
             }
           });
diff --git a/modules/@apostrophecms/permission/ui/apos/components/AposPermissionGrid.vue b/modules/@apostrophecms/permission/ui/apos/components/AposPermissionGrid.vue
index a118d098ff..72046c8ee5 100644
--- a/modules/@apostrophecms/permission/ui/apos/components/AposPermissionGrid.vue
+++ b/modules/@apostrophecms/permission/ui/apos/components/AposPermissionGrid.vue
@@ -27,10 +27,16 @@
               :icon="permission.value ? 'check-bold-icon' : 'close-icon'"
               :icon-color="permission.value ? 'var(--a-success)' : 'var(--a-base-5)'"
             />
-            <span v-if="permission.value" class="apos-sr-only">
+            <span
+              v-if="permission.value"
+              class="apos-sr-only"
+            >
               {{ $t('apostrophe:enabled') }}
             </span>
-            <span v-else class="apos-sr-only">
+            <span
+              v-else
+              class="apos-sr-only"
+            >
               {{ $t('apostrophe:disabled') }}
             </span>
           </dd>
diff --git a/modules/@apostrophecms/piece-type/index.js b/modules/@apostrophecms/piece-type/index.js
index 8f269dd4cd..1ac7712962 100644
--- a/modules/@apostrophecms/piece-type/index.js
+++ b/modules/@apostrophecms/piece-type/index.js
@@ -52,12 +52,14 @@ module.exports = {
           required: true
         }
       },
-      remove: self.options.singletonAuto ? [
-        'title',
-        'slug',
-        'archived',
-        'visibility'
-      ] : []
+      remove: self.options.singletonAuto
+        ? [
+          'title',
+          'slug',
+          'archived',
+          'visibility'
+        ]
+        : []
     };
   },
   columns(self) {
diff --git a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
index 2d3b70008f..a971e1c7b4 100644
--- a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
+++ b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
@@ -46,7 +46,10 @@
         @click="create"
       />
     </template>
-    <template v-if="relationshipField" #leftRail>
+    <template
+      v-if="relationshipField"
+      #leftRail
+    >
       <AposModalRail>
         <div class="apos-pieces-manager__relationship__rail">
           <div class="apos-pieces-manager__relationship__counts">
@@ -116,7 +119,10 @@
             }"
             @open="edit"
           />
-          <div v-else class="apos-pieces-manager__empty">
+          <div
+            v-else
+            class="apos-pieces-manager__empty"
+          >
             <AposEmptyState :empty-state="emptyDisplay" />
           </div>
         </template>
@@ -529,7 +535,8 @@ export default {
               ...requestOptions,
               _ids: this.checked,
               messages,
-              type: this.checked.length === 1 ? this.moduleLabels.singular
+              type: this.checked.length === 1
+                ? this.moduleLabels.singular
                 : this.moduleLabels.plural
             }
           });
diff --git a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManagerDisplay.vue b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManagerDisplay.vue
index 41d1ce70c8..a5c30af714 100644
--- a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManagerDisplay.vue
+++ b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManagerDisplay.vue
@@ -25,7 +25,10 @@
             {{ $t(header.label) }}
           </component>
         </th>
-        <th key="contextMenu" class="apos-table__header">
+        <th
+          key="contextMenu"
+          class="apos-table__header"
+        >
           <component
             :is="getEl({})"
             class="apos-table__header-label apos-is-hidden"
diff --git a/modules/@apostrophecms/piece-type/ui/apos/components/AposRelationshipEditor.vue b/modules/@apostrophecms/piece-type/ui/apos/components/AposRelationshipEditor.vue
index 749383f9ce..ff94de61fc 100644
--- a/modules/@apostrophecms/piece-type/ui/apos/components/AposRelationshipEditor.vue
+++ b/modules/@apostrophecms/piece-type/ui/apos/components/AposRelationshipEditor.vue
@@ -99,7 +99,8 @@ export default {
       original: this.modelValue,
       docFields: {
         data: {
-          ...((this.modelValue != null) ? this.modelValue
+          ...((this.modelValue != null)
+            ? this.modelValue
             : newInstance(this.schema)
           )
         },
diff --git a/modules/@apostrophecms/rich-text-widget/lib/generateTiptapTable.js b/modules/@apostrophecms/rich-text-widget/lib/generateTiptapTable.js
index dbdfbe5f72..2f4e7aa1c8 100644
--- a/modules/@apostrophecms/rich-text-widget/lib/generateTiptapTable.js
+++ b/modules/@apostrophecms/rich-text-widget/lib/generateTiptapTable.js
@@ -9,10 +9,12 @@ module.exports = ({ header, rows }) => {
           type: 'tableHeader',
           content: [ {
             type: 'paragraph',
-            content: head ? [ {
-              type: 'text',
-              text: head
-            } ] : []
+            content: head
+              ? [ {
+                type: 'text',
+                text: head
+              } ]
+              : []
           } ]
         }))
       },
@@ -23,10 +25,12 @@ module.exports = ({ header, rows }) => {
           content: [
             {
               type: 'paragraph',
-              content: cell ? [ {
-                type: 'text',
-                text: cell
-              } ] : []
+              content: cell
+                ? [ {
+                  type: 'text',
+                  text: cell
+                } ]
+                : []
             }
           ]
         }))
diff --git a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposImageControlDialog.vue b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposImageControlDialog.vue
index 91c30f92f3..8f03eda530 100644
--- a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposImageControlDialog.vue
+++ b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposImageControlDialog.vue
@@ -71,16 +71,18 @@ export default {
           // stack interchangeably with tiptap's
           browse: true
         },
-        ...(moduleOptions.imageStyles ? [
-          {
-            name: 'style',
-            label: this.$t('apostrophe:style'),
-            type: 'select',
-            choices: moduleOptions.imageStyles,
-            def: moduleOptions.imageStyles?.[0].value,
-            required: true
-          }
-        ] : []
+        ...(moduleOptions.imageStyles
+          ? [
+            {
+              name: 'style',
+              label: this.$t('apostrophe:style'),
+              type: 'select',
+              choices: moduleOptions.imageStyles,
+              def: moduleOptions.imageStyles?.[0].value,
+              required: true
+            }
+          ]
+          : []
         ),
         {
           name: 'caption',
diff --git a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposRichTextWidgetEditor.vue b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposRichTextWidgetEditor.vue
index c98528e56e..83d3b65ee9 100644
--- a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposRichTextWidgetEditor.vue
+++ b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposRichTextWidgetEditor.vue
@@ -72,8 +72,14 @@
         </li>
       </ul>
     </floating-menu>
-    <div class="apos-rich-text-editor__editor" :class="editorModifiers">
-      <editor-content :editor="editor" :class="editorOptions.className" />
+    <div
+      class="apos-rich-text-editor__editor"
+      :class="editorModifiers"
+    >
+      <editor-content
+        :editor="editor"
+        :class="editorOptions.className"
+      />
     </div>
     <div
       v-if="showPlaceholder !== null && (!placeholderText || !isFocused)"
@@ -210,12 +216,14 @@ export default {
       Object.keys(this.defaultOptions).forEach((option) => {
         if (option !== 'styles') {
           activeOptions[option] = (activeOptions[option] !== undefined)
-            ? activeOptions[option] : this.defaultOptions[option];
+            ? activeOptions[option]
+            : this.defaultOptions[option];
         }
       });
 
       activeOptions.className = (activeOptions.className !== undefined)
-        ? activeOptions.className : this.moduleOptions.className;
+        ? activeOptions.className
+        : this.moduleOptions.className;
 
       if (activeOptions.toolbar.includes('styles')) {
         activeOptions.toolbar = activeOptions.toolbar.filter(t => t !== 'styles');
diff --git a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapAnchor.vue b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapAnchor.vue
index 2c992b60c2..e22bdc6940 100644
--- a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapAnchor.vue
+++ b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapAnchor.vue
@@ -12,7 +12,10 @@
         class="apos-popover apos-anchor-control__dialog"
         :class="{ 'apos-has-selection': hasSelection }"
       >
-        <div v-if="hasAnchorOnOpen" class="apos-anchor-control__remove">
+        <div
+          v-if="hasAnchorOnOpen"
+          class="apos-anchor-control__remove"
+        >
           <AposButton
             type="quiet"
             label="apostrophe:removeRichTextAnchor"
diff --git a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapColor.vue b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapColor.vue
index 7539a67e7b..25b1f0b20c 100644
--- a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapColor.vue
+++ b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapColor.vue
@@ -26,7 +26,10 @@
         >
           <template #label>
             <AposColorCheckerboard class="apos-color-control__checkerboard" />
-            <AposIndicator ref="centerTipEl" icon="chevron-down-icon" />
+            <AposIndicator
+              ref="centerTipEl"
+              icon="chevron-down-icon"
+            />
           </template>
         </AposButton>
       </template>
diff --git a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapImportTable.vue b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapImportTable.vue
index e342937c50..c91d02002c 100644
--- a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapImportTable.vue
+++ b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapImportTable.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="apos-import-control" :class="{'apos-import-control__hidden': insertMode}">
+  <div
+    class="apos-import-control"
+    :class="{'apos-import-control__hidden': insertMode}"
+  >
     <AposButton
       v-if="tool"
       type="rich-text"
diff --git a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapLink.vue b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapLink.vue
index e22006d262..87df6f71f0 100644
--- a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapLink.vue
+++ b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapLink.vue
@@ -12,7 +12,10 @@
         class="apos-link-control__dialog"
         :class="{ 'apos-has-selection': hasSelection }"
       >
-        <div v-if="hasLinkOnOpen" class="apos-link-control__remove">
+        <div
+          v-if="hasLinkOnOpen"
+          class="apos-link-control__remove"
+        >
           <AposButton
             type="quiet"
             label="apostrophe:removeLink"
diff --git a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapMarks.vue b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapMarks.vue
index f9121ccfb8..bad5cea7c8 100644
--- a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapMarks.vue
+++ b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapMarks.vue
@@ -17,8 +17,14 @@
                 'apos-marks-control__item--is-active': activeClasses.includes(mark.class)
               }"
             >
-              <button class="apos-marks-control__button" @click="toggleStyle(mark)">
-                <span class="apos-marks-control__label" :class="mark.class">
+              <button
+                class="apos-marks-control__button"
+                @click="toggleStyle(mark)"
+              >
+                <span
+                  class="apos-marks-control__label"
+                  :class="mark.class"
+                >
                   {{ $t(mark.label) }}
                 </span>
               </button>
diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposArrayEditor.vue b/modules/@apostrophecms/schema/ui/apos/components/AposArrayEditor.vue
index d48e1f3370..52e67b9735 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposArrayEditor.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposArrayEditor.vue
@@ -30,10 +30,16 @@
               <span v-if="countLabel">
                 {{ countLabel }}
               </span>
-              <span v-if="minLabel" :class="minError ? 'apos-modal-array-min-error' : ''">
+              <span
+                v-if="minLabel"
+                :class="minError ? 'apos-modal-array-min-error' : ''"
+              >
                 {{ minLabel }}
               </span>
-              <span v-if="maxLabel" :class="maxError ? 'apos-modal-array-max-error' : ''">
+              <span
+                v-if="maxLabel"
+                :class="maxError ? 'apos-modal-array-max-error' : ''"
+              >
                 {{ maxLabel }}
               </span>
             </div>
diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputArray.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputArray.vue
index f70d340b7d..2efb5fc75c 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposInputArray.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposInputArray.vue
@@ -10,9 +10,15 @@
     :meta="arrayMeta"
   >
     <template #additional>
-      <AposMinMaxCount :field="field" :model-value="next" />
+      <AposMinMaxCount
+        :field="field"
+        :model-value="next"
+      />
     </template>
-    <template v-if="isInlineStandard" #meta>
+    <template
+      v-if="isInlineStandard"
+      #meta
+    >
       <div class="apos-input-array-inline-all-controls">
         <AposButton
           class="apos-input-array-inline-all-control apos-input-array-inline-all-control--expand"
@@ -46,10 +52,16 @@
 
       <!-- INLINE TABLE -->
       <div v-if="isInlineTable">
-        <table v-if="items.length" class="apos-input-array-inline-table">
+        <table
+          v-if="items.length"
+          class="apos-input-array-inline-table"
+        >
           <thead class="apos-input-array-inline-table-header">
             <tr>
-              <th v-if="isDraggable" class="apos-input-array-inline-table-header-cell" />
+              <th
+                v-if="isDraggable"
+                class="apos-input-array-inline-table-header-cell"
+              />
               <th
                 v-for="subfield in visibleSchema()"
                 :key="subfield._id"
@@ -249,8 +261,14 @@
                   />
                 </div>
               </div>
-              <transition name="collapse" :duration="400">
-                <div v-show="item.open" class="apos-input-array-inline-body">
+              <transition
+                name="collapse"
+                :duration="400"
+              >
+                <div
+                  v-show="item.open"
+                  class="apos-input-array-inline-body"
+                >
                   <AposSchema
                     :key="item._id"
                     v-model="item.schemaInput"
@@ -282,7 +300,10 @@
         </draggable>
       </div>
 
-      <div v-else class="apos-input-array">
+      <div
+        v-else
+        class="apos-input-array"
+      >
         <label class="apos-input-wrapper">
           <AposButton
             :label="editLabel"
diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputBoolean.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputBoolean.vue
index d1d63efe79..9c3de2e3c1 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposInputBoolean.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposInputBoolean.vue
@@ -18,7 +18,10 @@
           :disabled="field.readOnly"
           @change="setValue(true)"
         >
-        <label :for="`${uid}-true`" class="apos-boolean__label apos-input">
+        <label
+          :for="`${uid}-true`"
+          class="apos-boolean__label apos-input"
+        >
           <circle-icon
             v-show="!field.toggle"
             :size="12"
@@ -37,7 +40,10 @@
           :disabled="field.readOnly"
           @change="setValue(false)"
         >
-        <label :for="`${uid}-false`" class="apos-boolean__label apos-input">
+        <label
+          :for="`${uid}-false`"
+          class="apos-boolean__label apos-input"
+        >
           <circle-icon
             v-show="!field.toggle"
             :size="12"
diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputRadio.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputRadio.vue
index 8e67a28675..d59c5df719 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposInputRadio.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposInputRadio.vue
@@ -25,7 +25,10 @@
           :disabled="field.readOnly"
           @change="change($event.target.value)"
         >
-        <span class="apos-input-indicator" aria-hidden="true">
+        <span
+          class="apos-input-indicator"
+          aria-hidden="true"
+        >
           <component
             :is="`${next === value ? 'check-bold-icon' : 'span'}`"
             v-if="next === value"
diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
index 5a909e1f72..52301ba795 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
@@ -6,7 +6,10 @@
     :uid="uid"
     :display-options="displayOptions"
   >
-    <template v-if="isMicro" #info>
+    <template
+      v-if="isMicro"
+      #info
+    >
       <div
         class="apos-range__value"
         aria-hidden="true"
@@ -26,7 +29,10 @@
     </template>
     <template #body>
       <div class="apos-input-wrapper">
-        <div v-apos-tooltip="tooltip" class="apos-range">
+        <div
+          v-apos-tooltip="tooltip"
+          class="apos-range"
+        >
           <input
             :id="uid"
             ref="range"
@@ -38,7 +44,10 @@
             class="apos-range__input"
             :disabled="field.readOnly"
           >
-          <div v-if="!isMicro" class="apos-range__scale">
+          <div
+            v-if="!isMicro"
+            class="apos-range__scale"
+          >
             <span>
               <span class="apos-sr-only">
                 {{ $t('apostrophe:minLabel') }}
diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue
index 035625d003..0fe83ceda6 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue
@@ -6,7 +6,10 @@
       'apos-field__wrapper--full-width': modifiers.includes('full-width'),
     }"
   >
-    <component :is="wrapEl" :class="classList">
+    <component
+      :is="wrapEl"
+      :class="classList"
+    >
       <div class="apos-field__info">
         <component
           :is="labelEl"
@@ -24,7 +27,10 @@
         >
           <span class="apos-field_label-info">
             {{ $t(label) }}
-            <span v-if="field.required" class="apos-field__required">
+            <span
+              v-if="field.required"
+              class="apos-field__required"
+            >
               * </span>
             <AposLabel
               v-if="field.tag"
@@ -63,7 +69,10 @@
             </span>
           </span>
           <div>
-            <div v-if="hasExtraInfo" class="apos-field__label-extra-info">
+            <div
+              v-if="hasExtraInfo"
+              class="apos-field__label-extra-info"
+            >
               <slot name="info" />
             </div>
             <span
diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposLogo.vue b/modules/@apostrophecms/schema/ui/apos/components/AposLogo.vue
index a424ef6eb5..66f5bbb05e 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposLogo.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposLogo.vue
@@ -9,9 +9,18 @@
         y2="141.17"
         gradientUnits="userSpaceOnUse"
       >
-        <stop offset="0" stop-color="#cc9300" />
-        <stop offset=".47" stop-color="#ea433a" />
-        <stop offset="1" stop-color="#b327bf" />
+        <stop
+          offset="0"
+          stop-color="#cc9300"
+        />
+        <stop
+          offset=".47"
+          stop-color="#ea433a"
+        />
+        <stop
+          offset="1"
+          stop-color="#b327bf"
+        />
       </linearGradient>
       <linearGradient
         id="square"
@@ -21,11 +30,26 @@
         y2="110.85"
         gradientUnits="userSpaceOnUse"
       >
-        <stop offset="0" stop-color="#cc9300" />
-        <stop offset=".26" stop-color="#ea433a" />
-        <stop offset=".47" stop-color="#b327bf" />
-        <stop offset=".76" stop-color="#66f" />
-        <stop offset="1" stop-color="#00bf9a" />
+        <stop
+          offset="0"
+          stop-color="#cc9300"
+        />
+        <stop
+          offset=".26"
+          stop-color="#ea433a"
+        />
+        <stop
+          offset=".47"
+          stop-color="#b327bf"
+        />
+        <stop
+          offset=".76"
+          stop-color="#66f"
+        />
+        <stop
+          offset="1"
+          stop-color="#00bf9a"
+        />
       </linearGradient>
       <linearGradient
         id="triangle"
@@ -35,9 +59,18 @@
         y2="143.64"
         gradientUnits="userSpaceOnUse"
       >
-        <stop offset="0" stop-color="#b327bf" />
-        <stop offset=".47" stop-color="#66f" />
-        <stop offset="1" stop-color="#00c09a" />
+        <stop
+          offset="0"
+          stop-color="#b327bf"
+        />
+        <stop
+          offset=".47"
+          stop-color="#66f"
+        />
+        <stop
+          offset="1"
+          stop-color="#00c09a"
+        />
       </linearGradient>
     </defs>
     <path
diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposLogoIcon.vue b/modules/@apostrophecms/schema/ui/apos/components/AposLogoIcon.vue
index 74398809bd..55bb62308f 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposLogoIcon.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposLogoIcon.vue
@@ -9,9 +9,18 @@
         y2="141.17"
         gradientUnits="userSpaceOnUse"
       >
-        <stop offset="0" stop-color="#cc9300" />
-        <stop offset="0.47" stop-color="#ea433a" />
-        <stop offset="1" stop-color="#b327bf" />
+        <stop
+          offset="0"
+          stop-color="#cc9300"
+        />
+        <stop
+          offset="0.47"
+          stop-color="#ea433a"
+        />
+        <stop
+          offset="1"
+          stop-color="#b327bf"
+        />
       </linearGradient>
       <linearGradient
         id="square"
@@ -21,11 +30,26 @@
         y2="110.85"
         gradientUnits="userSpaceOnUse"
       >
-        <stop offset="0" stop-color="#cc9300" />
-        <stop offset="0.26" stop-color="#ea433a" />
-        <stop offset="0.47" stop-color="#b327bf" />
-        <stop offset="0.76" stop-color="#66f" />
-        <stop offset="1" stop-color="#00bf9a" />
+        <stop
+          offset="0"
+          stop-color="#cc9300"
+        />
+        <stop
+          offset="0.26"
+          stop-color="#ea433a"
+        />
+        <stop
+          offset="0.47"
+          stop-color="#b327bf"
+        />
+        <stop
+          offset="0.76"
+          stop-color="#66f"
+        />
+        <stop
+          offset="1"
+          stop-color="#00bf9a"
+        />
       </linearGradient>
       <linearGradient
         id="triangle"
@@ -35,9 +59,18 @@
         y2="143.64"
         gradientUnits="userSpaceOnUse"
       >
-        <stop offset="0" stop-color="#b327bf" />
-        <stop offset="0.47" stop-color="#66f" />
-        <stop offset="1" stop-color="#00c09a" />
+        <stop
+          offset="0"
+          stop-color="#b327bf"
+        />
+        <stop
+          offset="0.47"
+          stop-color="#66f"
+        />
+        <stop
+          offset="1"
+          stop-color="#00c09a"
+        />
       </linearGradient>
     </defs>
     <path
diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposLogoPadless.vue b/modules/@apostrophecms/schema/ui/apos/components/AposLogoPadless.vue
index 729e438499..e5674ec36f 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposLogoPadless.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposLogoPadless.vue
@@ -9,9 +9,18 @@
       y2="17.734"
       gradientTransform="matrix(1 0 0 -1 0 115.192)"
     >
-      <stop offset="0" stop-color="#cc9300" />
-      <stop offset=".47" stop-color="#ea433a" />
-      <stop offset="1" stop-color="#b327bf" />
+      <stop
+        offset="0"
+        stop-color="#cc9300"
+      />
+      <stop
+        offset=".47"
+        stop-color="#ea433a"
+      />
+      <stop
+        offset="1"
+        stop-color="#b327bf"
+      />
     </linearGradient>
     <path
       d="M114.7 101.3c17.2-2.5 29-18.5 26.5-35.7s-18.5-29-35.7-26.5S76.4 57.6 79 74.8v.3c2.7 17.1 18.6 28.8 35.7 26.2zm-1.6-10c-11.6 2-22.7-5.8-24.7-17.4-2-11.6 5.8-22.7 17.4-24.7s22.7 5.8 24.7 17.4c0 .1 0 .2.1.3 1.9 11.6-5.9 22.5-17.5 24.4z"
@@ -26,11 +35,26 @@
       y2="48.165"
       gradientTransform="matrix(1 0 0 -1 0 115.192)"
     >
-      <stop offset="0" stop-color="#cc9300" />
-      <stop offset=".26" stop-color="#ea433a" />
-      <stop offset=".47" stop-color="#b327bf" />
-      <stop offset=".76" stop-color="#66f" />
-      <stop offset="1" stop-color="#00bf9a" />
+      <stop
+        offset="0"
+        stop-color="#cc9300"
+      />
+      <stop
+        offset=".26"
+        stop-color="#ea433a"
+      />
+      <stop
+        offset=".47"
+        stop-color="#b327bf"
+      />
+      <stop
+        offset=".76"
+        stop-color="#66f"
+      />
+      <stop
+        offset="1"
+        stop-color="#00bf9a"
+      />
     </linearGradient>
     <path
       d="M13.2 64.1l46.6-7.4c2.7-.4 4.6-3 4.2-5.7v-.1L56.7 4.3c-.4-2.7-3-4.6-5.7-4.2h-.1L4.2 7.5c-2.7.4-4.6 3-4.2 5.7v.1L7.4 60c.5 2.7 3 4.5 5.8 4.1zm3.4-10.7l-5.9-36.8 36.7-5.8 5.8 36.8-36.6 5.8z"
@@ -45,9 +69,18 @@
       y2="15.378"
       gradientTransform="matrix(1 0 0 -1 0 115.192)"
     >
-      <stop offset="0" stop-color="#b327bf" />
-      <stop offset=".47" stop-color="#66f" />
-      <stop offset="1" stop-color="#00c09a" />
+      <stop
+        offset="0"
+        stop-color="#b327bf"
+      />
+      <stop
+        offset=".47"
+        stop-color="#66f"
+      />
+      <stop
+        offset="1"
+        stop-color="#00c09a"
+      />
     </linearGradient>
     <path
       d="M42.8 81.1l-20.2 56.6c-1 2.6.4 5.5 2.9 6.4.8.3 1.7.4 2.6.2l56.9-9c2.7-.4 4.6-2.9 4.2-5.7-.1-.9-.5-1.7-1-2.4L51.5 79.7c-1.7-2.2-4.8-2.7-7-1-.8.6-1.4 1.4-1.7 2.4zm6.4 12.1l25.9 33.6-40.2 6.4 14.3-40z"
diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposSearchList.vue b/modules/@apostrophecms/schema/ui/apos/components/AposSearchList.vue
index 32aa19328a..a583d2c5a5 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposSearchList.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposSearchList.vue
@@ -10,10 +10,16 @@
       v-if="suggestion"
       :class="getClasses(suggestion)"
     >
-      <div v-if="suggestion.title" class="apos-search__item__title">
+      <div
+        v-if="suggestion.title"
+        class="apos-search__item__title"
+      >
         {{ suggestion.title }}
       </div>
-      <div v-if="suggestion.help" class="apos-search__item__field">
+      <div
+        v-if="suggestion.help"
+        class="apos-search__item__field"
+      >
         {{ suggestion.help }}
       </div>
     </li>
@@ -67,10 +73,16 @@
         class="apos-button__icon"
         fill-color="currentColor"
       />
-      <div v-if="hint.title" class="apos-search__item__title">
+      <div
+        v-if="hint.title"
+        class="apos-search__item__title"
+      >
         {{ hint.title }}
       </div>
-      <div v-if="hint.help" class="apos-search__item__field">
+      <div
+        v-if="hint.help"
+        class="apos-search__item__field"
+      >
         {{ hint.help }}
       </div>
     </li>
diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposSubform.vue b/modules/@apostrophecms/schema/ui/apos/components/AposSubform.vue
index 13bbd2971f..d4ce0b010b 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposSubform.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposSubform.vue
@@ -1,9 +1,18 @@
 <template>
-  <div class="apos-subform" :class="{ 'apos-separator': separator }">
+  <div
+    class="apos-subform"
+    :class="{ 'apos-separator': separator }"
+  >
     <!-- Schema -->
     <transition name="slide-fade">
-      <div v-if="expanded" class="apos-subform__schema">
-        <span v-if="subform.label" class="apos-subform__schema-label">
+      <div
+        v-if="expanded"
+        class="apos-subform__schema"
+      >
+        <span
+          v-if="subform.label"
+          class="apos-subform__schema-label"
+        >
           {{ $t(subform.label) }}
         </span>
         <AposSchema
@@ -40,7 +49,10 @@
       </div>
     </transition>
     <!-- Preview mode -->
-    <div v-if="!expanded" class="apos-subform__preview">
+    <div
+      v-if="!expanded"
+      class="apos-subform__preview"
+    >
       <div class="apos-subform__preview-grid">
         <AposSubformPreview
           :subform="subform"
diff --git a/modules/@apostrophecms/schema/ui/apos/logic/AposInputArray.js b/modules/@apostrophecms/schema/ui/apos/logic/AposInputArray.js
index 6052442ca8..0641887425 100644
--- a/modules/@apostrophecms/schema/ui/apos/logic/AposInputArray.js
+++ b/modules/@apostrophecms/schema/ui/apos/logic/AposInputArray.js
@@ -63,20 +63,24 @@ export default {
     },
     inlineContextMenu() {
       return [
-        ...(this.isDraggable ? [
-          {
-            label: this.$t('apostrophe:moveUp'),
-            action: 'move-up'
-          },
-          {
-            label: this.$t('apostrophe:moveDown'),
-            action: 'move-down'
-          }
-        ] : []),
-        ...(this.field.duplicate !== false ? [ {
-          label: this.$t('apostrophe:duplicate'),
-          action: 'duplicate'
-        } ] : []),
+        ...(this.isDraggable
+          ? [
+            {
+              label: this.$t('apostrophe:moveUp'),
+              action: 'move-up'
+            },
+            {
+              label: this.$t('apostrophe:moveDown'),
+              action: 'move-down'
+            }
+          ]
+          : []),
+        ...(this.field.duplicate !== false
+          ? [ {
+            label: this.$t('apostrophe:duplicate'),
+            action: 'duplicate'
+          } ]
+          : []),
         {
           label: this.$t('apostrophe:remove'),
           action: 'remove',
diff --git a/modules/@apostrophecms/schema/ui/apos/logic/AposInputAttachment.js b/modules/@apostrophecms/schema/ui/apos/logic/AposInputAttachment.js
index c23f0f8fa1..952816e4cd 100644
--- a/modules/@apostrophecms/schema/ui/apos/logic/AposInputAttachment.js
+++ b/modules/@apostrophecms/schema/ui/apos/logic/AposInputAttachment.js
@@ -10,7 +10,8 @@ export default {
       // Next should consistently be an object or null (an attachment field with
       // no value yet is null, per server side).
       next: (this.modelValue && (typeof this.modelValue.data === 'object'))
-        ? this.modelValue.data : (this.field.def || null),
+        ? this.modelValue.data
+        : (this.field.def || null),
       disabled: false,
       uploading: false
     };
diff --git a/modules/@apostrophecms/schema/ui/apos/logic/AposInputRelationship.js b/modules/@apostrophecms/schema/ui/apos/logic/AposInputRelationship.js
index a930fd54c5..9bc95182d7 100644
--- a/modules/@apostrophecms/schema/ui/apos/logic/AposInputRelationship.js
+++ b/modules/@apostrophecms/schema/ui/apos/logic/AposInputRelationship.js
@@ -8,7 +8,8 @@ export default {
   emits: [ 'input' ],
   data () {
     const next = (this.modelValue && Array.isArray(this.modelValue.data))
-      ? klona(this.modelValue.data) : (klona(this.field.def) || []);
+      ? klona(this.modelValue.data)
+      : (klona(this.field.def) || []);
 
     // Remember relationship subfield values even if a document
     // is temporarily deselected, easing the user's pain if they
@@ -279,10 +280,12 @@ export default {
         const index = this.next.findIndex(_item => _item._id === item._id);
 
         this.next = this.next.map((item, i) => {
-          return i === index ? {
-            ...item,
-            _fields: result
-          } : item;
+          return i === index
+            ? {
+              ...item,
+              _fields: result
+            }
+            : item;
         });
       }
     },
diff --git a/modules/@apostrophecms/settings/ui/apos/components/AposSettingsManager.vue b/modules/@apostrophecms/settings/ui/apos/components/AposSettingsManager.vue
index d2cfcad6bf..70e189e6ca 100644
--- a/modules/@apostrophecms/settings/ui/apos/components/AposSettingsManager.vue
+++ b/modules/@apostrophecms/settings/ui/apos/components/AposSettingsManager.vue
@@ -39,7 +39,10 @@
       </AposModalBody>
     </template>
     <template #main>
-      <AposModalBody v-if="docReady" class="apos-settings__content">
+      <AposModalBody
+        v-if="docReady"
+        class="apos-settings__content"
+      >
         <template #bodyMain>
           <div
             v-for="(group, name) in groups"
diff --git a/modules/@apostrophecms/submitted-draft/ui/apos/components/AposSubmittedDraftIcon.vue b/modules/@apostrophecms/submitted-draft/ui/apos/components/AposSubmittedDraftIcon.vue
index a215e03a2c..c5b92730e1 100644
--- a/modules/@apostrophecms/submitted-draft/ui/apos/components/AposSubmittedDraftIcon.vue
+++ b/modules/@apostrophecms/submitted-draft/ui/apos/components/AposSubmittedDraftIcon.vue
@@ -9,7 +9,10 @@
     @click="open"
   >
     <template #label>
-      <span v-if="canPublish && count > 0" class="apos-submitted-drafts__counter">
+      <span
+        v-if="canPublish && count > 0"
+        class="apos-submitted-drafts__counter"
+      >
         {{ count }}
       </span>
     </template>
diff --git a/modules/@apostrophecms/task/index.js b/modules/@apostrophecms/task/index.js
index 1bf85234fd..352fd2f5b0 100644
--- a/modules/@apostrophecms/task/index.js
+++ b/modules/@apostrophecms/task/index.js
@@ -242,12 +242,14 @@ module.exports = {
         options = options || {};
         options.role = options.role || 'admin';
         const req = {
-          ...(options.role === 'anon' ? {} : {
-            user: {
-              title: 'System Task',
-              role: options.role
-            }
-          }),
+          ...(options.role === 'anon'
+            ? {}
+            : {
+              user: {
+                title: 'System Task',
+                role: options.role
+              }
+            }),
           res: {
             redirect(url) {
               req.res.redirectedTo = url;
diff --git a/modules/@apostrophecms/template/lib/bundlesLoader.js b/modules/@apostrophecms/template/lib/bundlesLoader.js
index 6724e6e6aa..39f2c8051e 100644
--- a/modules/@apostrophecms/template/lib/bundlesLoader.js
+++ b/modules/@apostrophecms/template/lib/bundlesLoader.js
@@ -56,7 +56,8 @@ module.exports = (self) => {
         self.apos.asset.hasBuildModule()
           ? pageModule.__meta.build
           : pageModule.__meta.webpack
-      ) : {};
+      )
+      : {};
 
     const rebundleConfigs = rebundleModules.filter(entry => {
       const names = pageModule?.__meta?.chain?.map(c => c.name) ?? [ page.type ];
diff --git a/modules/@apostrophecms/translation/ui/apos/components/AposTranslationIndicator.vue b/modules/@apostrophecms/translation/ui/apos/components/AposTranslationIndicator.vue
index 53a687e3ac..bf20a2791a 100644
--- a/modules/@apostrophecms/translation/ui/apos/components/AposTranslationIndicator.vue
+++ b/modules/@apostrophecms/translation/ui/apos/components/AposTranslationIndicator.vue
@@ -16,8 +16,14 @@
           y1="0"
           y2="1"
         >
-          <stop class="stop1" offset="0%" />
-          <stop class="stop2" offset="100%" />
+          <stop
+            class="stop1"
+            offset="0%"
+          />
+          <stop
+            class="stop2"
+            offset="100%"
+          />
         </linearGradient>
       </defs>
       <path
@@ -25,7 +31,10 @@
         d="M19,1L17.74,3.75L15,5L17.74,6.26L19,9L20.25,6.26L23,5L20.25,3.75M9,4L6.5,9.5L1,12L6.5,14.5L9,20L11.5,14.5L17,12L11.5,9.5M19,15L17.74,17.74L15,19L17.74,20.25L19,23L20.25,20.25L23,19L20.25,17.74"
       />
     </svg>
-    <p v-if="label" class="apos-translation-indicator__text">
+    <p
+      v-if="label"
+      class="apos-translation-indicator__text"
+    >
       {{ $t(label) }}
     </p>
   </span>
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposButton.vue b/modules/@apostrophecms/ui/ui/apos/components/AposButton.vue
index 31b47a3c3f..c211b06854 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposButton.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposButton.vue
@@ -22,13 +22,19 @@
       v-on="href ? {} : {click: click}"
     >
       <transition name="fade">
-        <AposSpinner v-if="busy" :color="spinnerColor" />
+        <AposSpinner
+          v-if="busy"
+          :color="spinnerColor"
+        />
       </transition>
       <span
         v-if="colorStyle"
         class="apos-button__color-preview"
       >
-        <span :style="colorStyle" class="apos-button__color-preview__swatch" />
+        <span
+          :style="colorStyle"
+          class="apos-button__color-preview__swatch"
+        />
         <div class="apos-button__color-preview__checkerboard">
           <AposColorCheckerboard />
         </div>
@@ -43,7 +49,10 @@
           @icon="$emit('icon', $event)"
         />
         <slot name="label">
-          <span class="apos-button__label" :class="{ 'apos-sr-only' : (iconOnly || type === 'color') }">
+          <span
+            class="apos-button__label"
+            :class="{ 'apos-sr-only' : (iconOnly || type === 'color') }"
+          >
             {{ $t(label, interpolate) }}
           </span>
         </slot>
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposButtonSplit.vue b/modules/@apostrophecms/ui/ui/apos/components/AposButtonSplit.vue
index 376290b68a..d958550991 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposButtonSplit.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposButtonSplit.vue
@@ -57,7 +57,10 @@
           <span class="apos-button-split__menu__dialog-label">
             {{ $t(item.label) }}
           </span>
-          <span v-if="item.description" class="apos-button-split__menu__dialog-description">
+          <span
+            v-if="item.description"
+            class="apos-button-split__menu__dialog-description"
+          >
             {{ $t(item.description) }}
           </span>
         </li>
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposCellContextMenu.vue b/modules/@apostrophecms/ui/ui/apos/components/AposCellContextMenu.vue
index 88f80d713f..fb10a418ca 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposCellContextMenu.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposCellContextMenu.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="apos-table__cell-field apos-table__cell-field--context-menu">
-    <span class="apos-table__cell-field--context-menu__content" :class="classes">
+    <span
+      class="apos-table__cell-field--context-menu__content"
+      :class="classes"
+    >
       <AposDocContextMenu
         :disabled="disabled"
         :doc="draft"
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposCheckbox.vue b/modules/@apostrophecms/ui/ui/apos/components/AposCheckbox.vue
index 409bbba26a..6f559a1583 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposCheckbox.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposCheckbox.vue
@@ -18,7 +18,10 @@
       :is-indeterminate="choice.indeterminate === true ? 'true' : 'false'"
       @change="update"
     >
-    <span class="apos-input-indicator" aria-hidden="true">
+    <span
+      class="apos-input-indicator"
+      aria-hidden="true"
+    >
       <component
         :is="`${
           choice.indeterminate ? 'minus-icon' : 'check-bold-icon'
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposCloudUploadIcon.vue b/modules/@apostrophecms/ui/ui/apos/components/AposCloudUploadIcon.vue
index 7f7a1852e4..136cc3b1f2 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposCloudUploadIcon.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposCloudUploadIcon.vue
@@ -15,11 +15,26 @@
         y2="20"
         gradientTransform="matrix(1.848483, 1.922034, -2.33985, 2.250314, 31.445274, -24.099256)"
       >
-        <stop offset="0" style="stop-color: rgb(50 197 255);" />
-        <stop offset="0.337" style="stop-color: rgb(182 32 224);" />
-        <stop offset="0.501" style="stop-color: rgb(182 32 224);" />
-        <stop offset="0.854" style="stop-color: rgb(247 181 0);" />
-        <stop offset="1" style="stop-color: rgb(247 181 0);" />
+        <stop
+          offset="0"
+          style="stop-color: rgb(50 197 255);"
+        />
+        <stop
+          offset="0.337"
+          style="stop-color: rgb(182 32 224);"
+        />
+        <stop
+          offset="0.501"
+          style="stop-color: rgb(182 32 224);"
+        />
+        <stop
+          offset="0.854"
+          style="stop-color: rgb(247 181 0);"
+        />
+        <stop
+          offset="1"
+          style="stop-color: rgb(247 181 0);"
+        />
       </linearGradient>
     </defs>
     <path d="M 37.334 28 L 37.334 38.666 L 26.666 38.666 L 26.666 28 L 18.666 28 L 32 14.666 L 45.334 28 M 51.599 20.079 C 49.787 10.907 41.706 4 32 4 C 24.293 4 17.6 8.374 14.267 14.747 C 6.24 15.626 0 22.4 0 30.666 C 0 39.503 7.164 46.666 16 46.666 L 50.666 46.666 C 58.03 46.666 64 40.697 64 33.334 C 64 26.294 58.533 20.586 51.599 20.079 Z" />
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposEmptyState.vue b/modules/@apostrophecms/ui/ui/apos/components/AposEmptyState.vue
index beaa9c486c..8a54d0c234 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposEmptyState.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposEmptyState.vue
@@ -1,12 +1,21 @@
 <template>
   <div class="apos-empty-state">
-    <p v-if="emptyState.title" class="apos-title">
+    <p
+      v-if="emptyState.title"
+      class="apos-title"
+    >
       {{ $t(emptyState.title) }}
     </p>
-    <p v-if="emptyState.message" class="apos-hint">
+    <p
+      v-if="emptyState.message"
+      class="apos-hint"
+    >
       {{ $t(emptyState.message) }}
     </p>
-    <div v-if="emptyState.emoji" class="apos-emoji">
+    <div
+      v-if="emptyState.emoji"
+      class="apos-emoji"
+    >
       {{ emptyState.emoji }}
     </div>
   </div>
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposFile.vue b/modules/@apostrophecms/ui/ui/apos/components/AposFile.vue
index 2b720102b1..0bfc02345b 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposFile.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposFile.vue
@@ -18,9 +18,15 @@
         </template>
         <AposSpinner v-else-if="uploading" />
         <template v-else>
-          <paperclip-icon :size="14" class="apos-file-icon" />
+          <paperclip-icon
+            :size="14"
+            class="apos-file-icon"
+          />
           {{ messages.primary }}&nbsp;
-          <span v-if="messages.highlighted" class="apos-file-highlight">
+          <span
+            v-if="messages.highlighted"
+            class="apos-file-highlight"
+          >
             {{ messages.highlighted }}
           </span>
         </template>
@@ -35,7 +41,10 @@
         @input="uploadFile"
       >
     </label>
-    <div v-if="fileOrAttachment" class="apos-file-files">
+    <div
+      v-if="fileOrAttachment"
+      class="apos-file-files"
+    >
       <AposSlatList
         :model-value="[fileOrAttachment]"
         :disabled="attachmentDisabled"
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposFilterMenu.vue b/modules/@apostrophecms/ui/ui/apos/components/AposFilterMenu.vue
index abe5965299..d59effd19f 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposFilterMenu.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposFilterMenu.vue
@@ -1,5 +1,8 @@
 <template>
-  <AposContextMenu :button="button" menu-placement="bottom">
+  <AposContextMenu
+    :button="button"
+    menu-placement="bottom"
+  >
     <div class="apos-filters-menu">
       <div
         v-for="set in filterSets"
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposLoadingBlock.vue b/modules/@apostrophecms/ui/ui/apos/components/AposLoadingBlock.vue
index 52b57f7324..4fee77fa06 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposLoadingBlock.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposLoadingBlock.vue
@@ -5,7 +5,10 @@
   >
     <div class="apos-loading-block__content">
       <AposLoading class="apos-loading-block__loader" />
-      <span v-if="label" class="apos-loading-block__text">
+      <span
+        v-if="label"
+        class="apos-loading-block__text"
+      >
         {{ $t(label) }}
       </span>
     </div>
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposLocalePicker.vue b/modules/@apostrophecms/ui/ui/apos/components/AposLocalePicker.vue
index c822533e28..c1973b6c8b 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposLocalePicker.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposLocalePicker.vue
@@ -21,7 +21,10 @@
         data-apos-test="localeItem"
         @click="switchLocale(locale)"
       >
-        <button :tabindex="isOpen ? '0' : '-1'" class="apos-locale-picker__locale-display">
+        <button
+          :tabindex="isOpen ? '0' : '-1'"
+          class="apos-locale-picker__locale-display"
+        >
           <AposIndicator
             v-if="isForbidden(locale)"
             icon="lock-icon"
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposPager.vue b/modules/@apostrophecms/ui/ui/apos/components/AposPager.vue
index a7a42d6d23..7566978cff 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposPager.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposPager.vue
@@ -25,7 +25,10 @@
           {{ $t('apostrophe:pageNumber', { number: num }) }}
         </option>
       </select>
-      <menu-swap-icon :size="18" class="apos-input-icon" />
+      <menu-swap-icon
+        :size="18"
+        class="apos-input-icon"
+      />
     </div>
     <AposButton
       :disabled="currentPage >= totalPages"
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposSelect.vue b/modules/@apostrophecms/ui/ui/apos/components/AposSelect.vue
index 33e2349448..4e081c7406 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposSelect.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposSelect.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="apos-input-wrapper" :class="wrapperClasses">
+  <div
+    class="apos-input-wrapper"
+    :class="wrapperClasses"
+  >
     <select
       class="apos-input apos-input--select"
       :class="classes"
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposSlat.vue b/modules/@apostrophecms/ui/ui/apos/components/AposSlat.vue
index 9cb8f25e05..f8128df2d4 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposSlat.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposSlat.vue
@@ -78,8 +78,14 @@
             class="apos-slat__media"
           >
         </div>
-        <div v-else-if="item.extension" class="apos-slat__extension-wrapper">
-          <span class="apos-slat__extension" :class="[`apos-slat__extension--${item.extension}`]">
+        <div
+          v-else-if="item.extension"
+          class="apos-slat__extension-wrapper"
+        >
+          <span
+            class="apos-slat__extension"
+            :class="[`apos-slat__extension--${item.extension}`]"
+          >
             {{ item.extension }}
           </span>
         </div>
@@ -88,7 +94,10 @@
         </div>
       </div>
       <div class="apos-slat__secondary">
-        <div v-if="item.length && item.length.size" class="apos-slat__size">
+        <div
+          v-if="item.length && item.length.size"
+          class="apos-slat__size"
+        >
           {{ itemSize }}
         </div>
         <AposButton
@@ -166,10 +175,12 @@ export default {
           type: 'inline'
         },
         menu: [
-          ...!this.editorIcon ? [ {
-            label: 'apostrophe:editRelationship',
-            action: 'edit-relationship'
-          } ] : []
+          ...!this.editorIcon
+            ? [ {
+              label: 'apostrophe:editRelationship',
+              action: 'edit-relationship'
+            } ]
+            : []
         ]
       }
     };
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposSlatList.vue b/modules/@apostrophecms/ui/ui/apos/components/AposSlatList.vue
index 9bab0b71b7..0538245cdf 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposSlatList.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposSlatList.vue
@@ -12,7 +12,10 @@
       @update="update"
     >
       <template #item="{element: item}">
-        <transition-group type="transition" name="apos-flip-list">
+        <transition-group
+          type="transition"
+          name="apos-flip-list"
+        >
           <AposSlat
             :key="item._id"
             class="apos-slat-list__item"
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposSpinner.vue b/modules/@apostrophecms/ui/ui/apos/components/AposSpinner.vue
index 44870f936d..96342aa1e2 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposSpinner.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposSpinner.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="apos-spinner" :class="className">
+  <div
+    class="apos-spinner"
+    :class="className"
+  >
     <!-- Disabling since the SVG is mostly not active vue template code. -->
     <!-- eslint-disable vue/max-attributes-per-line -->
     <svg
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposSubformPreview.vue b/modules/@apostrophecms/ui/ui/apos/components/AposSubformPreview.vue
index b7286638e9..9b161c5c6e 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposSubformPreview.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposSubformPreview.vue
@@ -3,7 +3,10 @@
     <div class="apos-subform-preview__label">
       {{ $t(subform.label || subform.schema?.[0].label || 'n/a') }}
     </div>
-    <div class="apos-subform-preview__value" :class="{ 'is-help': !!subform.help }">
+    <div
+      class="apos-subform-preview__value"
+      :class="{ 'is-help': !!subform.help }"
+    >
       <component
         :is="subform.previewComponent"
         v-if="subform.previewComponent"
@@ -11,7 +14,10 @@
         :subform="subform"
         :values="values"
       />
-      <span v-else class="apos-subform-preview__value-block">
+      <span
+        v-else
+        class="apos-subform-preview__value-block"
+      >
         {{ previewValue }}
       </span>
     </div>
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposTable.vue b/modules/@apostrophecms/ui/ui/apos/components/AposTable.vue
index b929cdbb4c..e1a630a647 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposTable.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposTable.vue
@@ -18,7 +18,10 @@
           data-apos-test="tableHeaderCell"
           :style="headerStyles(header)"
         >
-          <slot :name="`header-${header.name}`" :header="header">
+          <slot
+            :name="`header-${header.name}`"
+            :header="header"
+          >
             <component
               :is="header.component"
               class="apos-table__header-label"
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposTag.vue b/modules/@apostrophecms/ui/ui/apos/components/AposTag.vue
index 785c293538..940f82d7a9 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposTag.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposTag.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="apos-tag">
-    <button class="apos-tag__button" @click="click">
+    <button
+      class="apos-tag__button"
+      @click="click"
+    >
       <close-icon
         class="apos-tag__remove"
         title="Remove Tag"
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposTagApply.vue b/modules/@apostrophecms/ui/ui/apos/components/AposTagApply.vue
index f9342e37d0..ab741da65e 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposTagApply.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposTagApply.vue
@@ -23,7 +23,10 @@
       </div>
       <transition name="fade">
         <div>
-          <ol v-if="searchTags.length && !creating" class="apos-apply-tag-menu__tags">
+          <ol
+            v-if="searchTags.length && !creating"
+            class="apos-apply-tag-menu__tags"
+          >
             <li
               v-for="tag in searchTags"
               :key="`${keyPrefix}-${tag.slug}`"
@@ -40,7 +43,10 @@
               />
             </li>
           </ol>
-          <div v-if="(!searchTags.length && myTags.length) && !creating" class="apos-apply-tag-menu__empty">
+          <div
+            v-if="(!searchTags.length && myTags.length) && !creating"
+            class="apos-apply-tag-menu__empty"
+          >
             <p class="apos-apply-tag-menu__empty-message">
               {{ $t('apostrophe:tagNoTagsFoundPerhaps') }}
               <AposButton
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposTagList.vue b/modules/@apostrophecms/ui/ui/apos/components/AposTagList.vue
index f19aa88c2d..8ba6d2cfe9 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposTagList.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposTagList.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="apos-tag-list">
-    <div v-if="tags && tags.length" class="apos-tag-list__inner">
-      <h3 class="apos-tag-list__title">{{ $t(title) }}</h3>
+    <div
+      v-if="tags && tags.length"
+      class="apos-tag-list__inner"
+    >
+      <h3 class="apos-tag-list__title">
+        {{ $t(title) }}
+      </h3>
       <ul class="apos-tag-list__items">
         <AposTagListItem
           v-for="tag in tags"
@@ -12,7 +17,10 @@
         />
       </ul>
     </div>
-    <div v-else class="apos-tag-list__empty">
+    <div
+      v-else
+      class="apos-tag-list__empty"
+    >
       <AposEmptyState :empty-state="emptyState" />
     </div>
   </div>
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposTree.vue b/modules/@apostrophecms/ui/ui/apos/components/AposTree.vue
index 5f9257c269..298cfb365d 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposTree.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposTree.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="apos-tree" :class="{ 'apos-tree--nested': nested }">
+  <div
+    class="apos-tree"
+    :class="{ 'apos-tree--nested': nested }"
+  >
     <AposTreeHeader
       :headers="spacingRow"
       :icons="icons"
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposTreeRows.vue b/modules/@apostrophecms/ui/ui/apos/components/AposTreeRows.vue
index 0fc555a4b4..87b4717099 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposTreeRows.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposTreeRows.vue
@@ -89,7 +89,10 @@
                 class="apos-tree__cell__icon"
                 :icon-size="getEffectiveIconSize(col, row)"
               />
-              <span v-if="getEffectiveCellLabel(col, row)" class="apos-tree__cell__label">
+              <span
+                v-if="getEffectiveCellLabel(col, row)"
+                class="apos-tree__cell__label"
+              >
                 {{ getEffectiveCellLabel(col, row) }}
               </span>
             </span>
diff --git a/modules/@apostrophecms/ui/ui/apos/stores/modal.js b/modules/@apostrophecms/ui/ui/apos/stores/modal.js
index 44cc491357..4f088cc102 100644
--- a/modules/@apostrophecms/ui/ui/apos/stores/modal.js
+++ b/modules/@apostrophecms/ui/ui/apos/stores/modal.js
@@ -86,10 +86,12 @@ export const useModalStore = defineStore('modal', () => {
 
   function updateModalData(id, data) {
     stack.value = stack.value.map((modal) => {
-      return modal.id === id ? {
-        ...modal,
-        ...data
-      } : modal;
+      return modal.id === id
+        ? {
+          ...modal,
+          ...data
+        }
+        : modal;
     });
   }
 
diff --git a/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue b/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
index 5fd3d5a5a0..958d8b9d22 100644
--- a/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
+++ b/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
@@ -8,7 +8,10 @@
     @esc="confirmAndCancel"
   >
     <template #breadcrumbs>
-      <AposModalBreadcrumbs v-if="breadcrumbs && breadcrumbs.length" :items="breadcrumbs" />
+      <AposModalBreadcrumbs
+        v-if="breadcrumbs && breadcrumbs.length"
+        :items="breadcrumbs"
+      />
       <AposWidgetModalTabs
         v-if="tabs.length && tabs[0].name !== 'ungrouped'"
         :key="tabKey"
diff --git a/test/queryBuilders.js b/test/queryBuilders.js
index da4252c280..132e6c1b30 100644
--- a/test/queryBuilders.js
+++ b/test/queryBuilders.js
@@ -206,16 +206,18 @@ function getPersons(instance, withSeniors = false) {
       title: 'Marie',
       age: 50
     },
-    ...withSeniors ? [
-      {
-        title: 'Jules',
-        age: 72
-      },
-      {
-        title: 'Renée',
-        age: 80
-      }
-    ] : []
+    ...withSeniors
+      ? [
+        {
+          title: 'Jules',
+          age: 72
+        },
+        {
+          title: 'Renée',
+          age: 80
+        }
+      ]
+      : []
   ].map((p, i) => ({
     _id: `${moduleName}${i}`,
     ...instance.newInstance(),

From a0dff2955b49473807b7f698f2a8c172363e6f54 Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Thu, 20 Mar 2025 18:41:42 +0100
Subject: [PATCH 2/5] linting stuff

---
 lib/moog.js                                   |   5 +-
 .../@apostrophecms/admin-bar/ui/src/index.js  |   8 +-
 .../@apostrophecms/asset/lib/build/task.js    |  30 +-
 .../asset/lib/refresh-on-restart.js           |   2 +-
 .../ui/apos/logic/AposDocContextMenu.js       |  80 ++--
 modules/@apostrophecms/express/index.js       |  75 ++--
 modules/@apostrophecms/i18n/index.js          |  11 +-
 .../ui/apos/components/AposI18nLocalize.vue   |  15 +-
 .../AposImageRelationshipEditor.vue           |   2 +-
 .../ui/apos/components/AposMediaManager.vue   |  11 +-
 modules/@apostrophecms/login/index.js         |  52 ++-
 .../modal/ui/apos/mixins/AposEditorMixin.js   |  21 +-
 .../page/ui/apos/logic/AposPagesManager.js    |   9 +-
 modules/@apostrophecms/piece-type/index.js    | 402 ++++++++++--------
 .../components/AposRichTextWidgetEditor.vue   |  29 +-
 .../schema/ui/apos/logic/AposArrayEditor.js   |  19 +-
 .../ui/ui/apos/components/AposTable.vue       |   2 +-
 17 files changed, 462 insertions(+), 311 deletions(-)

diff --git a/lib/moog.js b/lib/moog.js
index 1770137697..dc862b9cbd 100644
--- a/lib/moog.js
+++ b/lib/moog.js
@@ -75,7 +75,10 @@ module.exports = function(options) {
       } else {
         // Extend the default base class by default, if any, unless
         // we're it
-        if (self.options.defaultBaseClass && className !== self.options.defaultBaseClass) {
+        if (
+          self.options.defaultBaseClass &&
+          className !== self.options.defaultBaseClass
+        ) {
           definition.extend = self.options.defaultBaseClass;
         }
       }
diff --git a/modules/@apostrophecms/admin-bar/ui/src/index.js b/modules/@apostrophecms/admin-bar/ui/src/index.js
index fa31140fb4..8256e63915 100644
--- a/modules/@apostrophecms/admin-bar/ui/src/index.js
+++ b/modules/@apostrophecms/admin-bar/ui/src/index.js
@@ -1,7 +1,6 @@
-/**
- * If the page delivers a logged-out content but we know from session storage that a user is logged-in,
- * we force-refresh the page to bypass the cache, in order to get the logged-in content (with admin UI).
- */
+// If the page delivers a logged-out content but we know from session storage
+// that a user is logged-in, we force-refresh the page to bypass the cache,
+// in order to get the logged-in content (with admin UI).
 export default function() {
   const isLoggedOutPageContent = !(apos.login && apos.login.user);
   const isLoggedInCookie = apos.util.getCookie(`${self.apos.shortName}.loggedIn`) === 'true';
@@ -19,6 +18,7 @@ export default function() {
     refreshedPages[location.href] = true;
     sessionStorage.setItem('aposRefreshedPages', JSON.stringify(refreshedPages));
 
+    // eslint-disable-next-line no-console
     console.info('Received logged-out content from cache while logged-in, refreshing the page');
 
     location.reload();
diff --git a/modules/@apostrophecms/asset/lib/build/task.js b/modules/@apostrophecms/asset/lib/build/task.js
index 9c7d27e698..c344828fcc 100644
--- a/modules/@apostrophecms/asset/lib/build/task.js
+++ b/modules/@apostrophecms/asset/lib/build/task.js
@@ -68,7 +68,8 @@ module.exports = (self) => ({
       } else if (!rebuild) {
         let checkTimestamp = false;
 
-        // If options.publicBundle, only builds contributing to the apos admin UI (currently just "apos")
+        // If options.publicBundle, only builds contributing
+        // to the apos admin UI (currently just "apos")
         // are candidates to skip the build simply because package-lock.json is
         // older than the bundle. All other builds frequently contain
         // project level code
@@ -118,7 +119,9 @@ module.exports = (self) => ({
     // so that page refresh is issued only when needed.
     if (detectChanges) {
       // merge the scenes that have been built
-      const scenes = [ ...new Set(buildsExecuted.map(name => self.builds[name].scenes).flat()) ];
+      const scenes = [
+        ...new Set(buildsExecuted.map(name => self.builds[name].scenes).flat())
+      ];
       merge(scenes);
       return buildsExecuted;
     }
@@ -126,7 +129,9 @@ module.exports = (self) => ({
     // Discover the set of unique asset scenes that exist (currently
     // just `public` and `apos`) by examining those specified as
     // targets for the various builds
-    const scenes = [ ...new Set(Object.values(self.builds).map(options => options.scenes).flat()) ];
+    const scenes = [
+      ...new Set(Object.values(self.builds).map(options => options.scenes).flat())
+    ];
 
     // enumerate public assets and include them in deployment if appropriate
     const publicAssets = self.apos.util.glob('modules/**/*', {
@@ -209,7 +214,12 @@ module.exports = (self) => ({
       const pnpmModules = new Set();
       await moduleOverrides(modulesDir, `ui/${source}`, pnpmModules);
 
-      let iconImports, componentImports, tiptapExtensionImports, appImports, indexJsImports, indexSassImports;
+      let iconImports,
+        componentImports,
+        tiptapExtensionImports,
+        appImports,
+        indexJsImports,
+        indexSassImports;
       if (options.apos) {
         iconImports = await getIcons();
         componentImports = await getImports(`${source}/components`, '*.vue', {
@@ -217,7 +227,11 @@ module.exports = (self) => ({
           importLastVersion: true
         });
         /* componentImports = getGlobalVueComponents(self); */
-        tiptapExtensionImports = await getImports(`${source}/tiptap-extensions`, '*.js', { registerTiptapExtensions: true });
+        tiptapExtensionImports = await getImports(
+          `${source}/tiptap-extensions`,
+          '*.js',
+          { registerTiptapExtensions: true }
+        );
         appImports = await getImports(`${source}/apps`, '*.js', {
           invokeApps: true,
           enumerateImports: true,
@@ -303,7 +317,11 @@ module.exports = (self) => ({
           : webpackInstanceConfig;
 
         // Inject the cache location at the end - we need the merged config
-        const cacheMeta = await computeCacheMeta(name, webpackInstanceConfigMerged, symLinkModules);
+        const cacheMeta = await computeCacheMeta(
+          name,
+          webpackInstanceConfigMerged,
+          symLinkModules
+        );
         webpackInstanceConfigMerged.cache.cacheLocation = cacheMeta.location;
         // Exclude symlinked modules from the cache managedPaths, no other way for now
         // https://github.com/webpack/webpack/issues/12112
diff --git a/modules/@apostrophecms/asset/lib/refresh-on-restart.js b/modules/@apostrophecms/asset/lib/refresh-on-restart.js
index ff93174a24..6d4b8bbaa3 100644
--- a/modules/@apostrophecms/asset/lib/refresh-on-restart.js
+++ b/modules/@apostrophecms/asset/lib/refresh-on-restart.js
@@ -15,7 +15,7 @@
       // No requests when tab is not active
       setTimeout(check, 5000);
     } else {
-      apos.http.post(document.querySelector('[data-apos-refresh-on-restart]').getAttribute('data-apos-refresh-on-restart'), {
+      window.apos.http.post(document.querySelector('[data-apos-refresh-on-restart]').getAttribute('data-apos-refresh-on-restart'), {
         qs: {
           fast
         }
diff --git a/modules/@apostrophecms/doc-type/ui/apos/logic/AposDocContextMenu.js b/modules/@apostrophecms/doc-type/ui/apos/logic/AposDocContextMenu.js
index 5cfe64d658..1674307e9c 100644
--- a/modules/@apostrophecms/doc-type/ui/apos/logic/AposDocContextMenu.js
+++ b/modules/@apostrophecms/doc-type/ui/apos/logic/AposDocContextMenu.js
@@ -27,9 +27,10 @@ export default {
         return null;
       }
     },
-    // These props all default to true, and can be passed with a value of false to hide
-    // functionality even if the user can otherwise perform the action on this document.
-    // The component will figure out on its own if the user can perform each action or not.
+    // These props all default to true, and can be passed with
+    // a value of false to hide functionality even if the user can
+    // otherwise perform the action on this document. The component will
+    // figure out on its own if the user can perform each action or not.
     showEdit: {
       type: Boolean,
       default() {
@@ -112,13 +113,13 @@ export default {
         //     action: 'share'
         //   }
         // ] : []),
-        ...((this.showEdit && this.context._edit) ? [
-          {
+        ...((this.showEdit && this.context._edit)
+          ? [ {
             // When archived the edit action opens a read-only "editor"
             label: this.context.archived ? 'apostrophe:view' : 'apostrophe:edit',
             action: 'edit'
-          }
-        ] : []),
+          } ]
+          : []),
         ...((this.showPreview && this.canPreview)
           ? [
             {
@@ -267,7 +268,9 @@ export default {
       }
     },
     canDismissSubmission() {
-      return this.canEdit && this.context.submitted && (this.canPublish || (this.context.submitted.byId === apos.login.user._id));
+      return this.canEdit &&
+        this.context.submitted &&
+        (this.canPublish || (this.context.submitted.byId === apos.login.user._id));
     },
     canDiscardDraft() {
       if (!this.manuallyPublished) {
@@ -276,10 +279,17 @@ export default {
       if (!this.context._id) {
         return false;
       }
-      if (!this.context.lastPublishedAt && !this.canDeleteDraft && !this.context._delete) {
+      if (
+        !this.context.lastPublishedAt &&
+        !this.canDeleteDraft &&
+        !this.context._delete
+      ) {
         return false;
       }
-      if (this.context.lastPublishedAt && (!this.context.modified || !this.context._edit)) {
+      if (
+        this.context.lastPublishedAt &&
+        (!this.context.modified || !this.context._edit)
+      ) {
         return false;
       }
       return (
@@ -295,13 +305,15 @@ export default {
         this.context._id;
     },
     canArchive() {
+      const publishable = Boolean(this.canPublish && this.context.lastPublishedAt) ||
+        !this.manuallyPublished;
       return (
         this.context._delete &&
         this.context._id &&
         !this.moduleOptions.singleton &&
         !this.context.archived &&
         !this.context.parked &&
-        (Boolean(this.canPublish && this.context.lastPublishedAt) || !this.manuallyPublished)
+        publishable
       );
     },
     canUnpublish() {
@@ -367,7 +379,8 @@ export default {
     schema() {
       // moduleOptions gives us the action, etc. but here we need the schema
       // which is always type specific, even for pages so get it ourselves
-      let schema = (apos.modules[this.context.type].schema || []).filter(field => apos.schema.components.fields[field.type]);
+      let schema = (apos.modules[this.context.type].schema || [])
+        .filter(field => apos.schema.components.fields[field.type]);
       // Archive UI is handled via action buttons
       schema = schema.filter(field => field.name !== 'archived');
       return schema;
@@ -404,6 +417,7 @@ export default {
           // If not found it is likely that there was an archiving or restoring
           // batch operation.
           if (error.name !== 'notfound') {
+            // eslint-disable-next-line no-console
             console.error(error);
           }
         }
@@ -419,11 +433,13 @@ export default {
       this[action](this.context);
     },
     async edit(doc) {
-      await apos.modal.execute(doc._aposEditorModal || this.moduleOptions.components.editorModal, {
-        moduleName: this.moduleName,
-        docId: doc._id,
-        type: doc.type
-      });
+      await apos.modal.execute(
+        doc._aposEditorModal || this.moduleOptions.components.editorModal,
+        {
+          moduleName: this.moduleName,
+          docId: doc._id,
+          type: doc.type
+        });
     },
     preview(doc) {
       window.open(doc._url, '_blank').focus();
@@ -439,16 +455,18 @@ export default {
         }
       }
 
-      await apos.modal.execute(doc._aposEditorModal || this.moduleOptions.components.editorModal, {
-        moduleName: this.moduleName,
-        copyOfId: doc._id,
-        // Passed for bc
-        copyOf: {
-          ...this.current || doc,
-          _id: doc._id
-        },
-        type: doc.type
-      });
+      await apos.modal.execute(
+        doc._aposEditorModal || this.moduleOptions.components.editorModal,
+        {
+          moduleName: this.moduleName,
+          copyOfId: doc._id,
+          // Passed for bc
+          copyOf: {
+            ...this.current || doc,
+            _id: doc._id
+          },
+          type: doc.type
+        });
 
     },
     async customAction(doc, operation) {
@@ -478,9 +496,11 @@ export default {
       }
       await apos.modal.execute(operation.modal, props);
       function docProps(doc) {
-        return Object.fromEntries(Object.entries(operation.docProps || {}).map(([ key, value ]) => {
-          return [ key, doc[value] ];
-        }));
+        return Object.fromEntries(
+          Object.entries(operation.docProps || {}).map(([ key, value ]) => {
+            return [ key, doc[value] ];
+          })
+        );
       }
     },
     async localize(doc) {
diff --git a/modules/@apostrophecms/express/index.js b/modules/@apostrophecms/express/index.js
index 776170741a..6f3fe5d085 100644
--- a/modules/@apostrophecms/express/index.js
+++ b/modules/@apostrophecms/express/index.js
@@ -107,9 +107,11 @@
 // ### `csrf`
 //
 // By default, Apostrophe implements [CSRF protection](https://en.wikipedia.org/wiki/Cross-site_request_forgery)
-// by setting a cookie with the value `csrf`, which all legitimate requests originating fromt he page will send
+// by setting a cookie with the value `csrf`,
+// which all legitimate requests originating fromt he page will send
 // back (see the [same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)).
-// All modern browsers will refuse to allow a CSRF attacker, such as a malicious `POST`-method `form` tag on a third
+// All modern browsers will refuse to allow a CSRF attacker,
+// such as a malicious `POST`-method `form` tag on a third
 // party site pointing to an Apostrophe site, to send cookies to the Apostrophe site.
 //
 // All non-safe HTTP requests (not `GET`, `HEAD`, `OPTIONS` or `TRACE`)
@@ -162,7 +164,8 @@ module.exports = {
     self.createApp();
     self.prefix();
     self.trustProxy();
-    self.options.externalFrontKey = process.env.APOS_EXTERNAL_FRONT_KEY || self.options.externalFrontKey;
+    self.options.externalFrontKey = process.env.APOS_EXTERNAL_FRONT_KEY ||
+      self.options.externalFrontKey;
 
     await self.getSessionOptions();
     if (self.options.baseUrl && !self.apos.baseUrl) {
@@ -331,7 +334,9 @@ module.exports = {
           return matches[1];
         }
       },
-      expressBearerTokenMiddleware: expressBearerToken(self.options.expressBearerToken || {}),
+      expressBearerTokenMiddleware: expressBearerToken(
+        self.options.expressBearerToken || {}
+      ),
       async bearerTokens(req, res, next) {
         if (!req.token) {
           return next();
@@ -375,25 +380,28 @@ module.exports = {
           return self.apos.login.deserializeUser(userId);
         }
       },
-      ...((self.options.csrf === false) ? {} : {
-        // Angular-compatible CSRF protection middleware. On safe requests (GET, HEAD, OPTIONS, TRACE),
-        // set the csrf cookie if missing.
-        //
-        // This works because requests not meeting the expectations of the same-origin policy
-        // won't be able to send cookies to the origin at all, even though the value is
-        // well-known.
-        csrf(req, res, next) {
-          if (req.csrfExempt) {
-            return next();
-          }
-          if (_.find(self.csrfExceptions || [], function (e) {
-            return req.url.match(e);
-          })) {
-            return next();
+      ...((self.options.csrf === false)
+        ? {}
+        : {
+          // Angular-compatible CSRF protection middleware.
+          // On safe requests (GET, HEAD, OPTIONS, TRACE),
+          // set the csrf cookie if missing.
+          //
+          // This works because requests not meeting the expectations
+          // of the same-origin policy won't be able to send cookies to
+          // the origin at all, even though the value is well-known.
+          csrf(req, res, next) {
+            if (req.csrfExempt) {
+              return next();
+            }
+            if (_.find(self.csrfExceptions || [], function (e) {
+              return req.url.match(e);
+            })) {
+              return next();
+            }
+            return self.csrfWithoutExceptions(req, res, next);
           }
-          return self.csrfWithoutExceptions(req, res, next);
-        }
-      }),
+        }),
       bodyParserUrlencoded: bodyParser.urlencoded({
         extended: true,
         ...(self.options.bodyParser && self.options.bodyParser.urlencoded)
@@ -551,7 +559,8 @@ module.exports = {
           if (!name || name.match(/^connect-mongo/)) {
             if (!sessionOptions.store.options.client) {
               sessionOptions.store.options.client = self.apos.dbClient;
-              sessionOptions.store.options.dbName = sessionOptions.store.options.dbName || self.apos.db.databaseName;
+              sessionOptions.store.options.dbName = sessionOptions.store.options.dbName ||
+                self.apos.db.databaseName;
             }
           }
           if (!sessionOptions.store.name) {
@@ -560,7 +569,9 @@ module.exports = {
             sessionOptions.store = MongoStore.create(sessionOptions.store.options);
           } else {
             // require from project's dependencies
-            Store = await self.apos.root.import(sessionOptions.store.name)(expressSession);
+            Store = await self.apos.root.import(
+              sessionOptions.store.name
+            )(expressSession);
             sessionOptions.store = new Store(sessionOptions.store.options);
           }
         }
@@ -578,14 +589,16 @@ module.exports = {
         self.compileCsrfExceptions();
       },
 
-      // Compile CSRF exceptions configured via the `addCsrfExceptions` option of each module
-      // that has one.
+      // Compile CSRF exceptions configured via the
+      // `addCsrfExceptions` option of each module that has one.
 
       compileCsrfExceptions() {
         let list = [];
         for (const module of Object.values(self.apos.modules)) {
           if (module.options.csrfExceptions) {
-            list = list.concat(module.options.csrfExceptions.map(path => module.getRouteUrl(path)));
+            list = list.concat(
+              module.options.csrfExceptions.map(path => module.getRouteUrl(path))
+            );
           }
         }
         self.csrfExceptions = list.map(function (e) {
@@ -723,7 +736,9 @@ module.exports = {
       async findModuleMiddlewareAndRoutes() {
         await self.emit('compileRoutes');
         const labeledList = [];
-        const moduleNames = Array.from(new Set([ self.__meta.name, ...Object.keys(self.apos.modules) ]));
+        const moduleNames = Array.from(
+          new Set([ self.__meta.name, ...Object.keys(self.apos.modules) ])
+        );
         for (const name of moduleNames) {
           const middleware = self.apos.modules[name].middleware || {};
           if (process.env.APOS_LOG_ALL_ROUTES) {
@@ -774,7 +789,9 @@ module.exports = {
           }
         }
 
-        self.finalModuleMiddlewareAndRoutes = labeledList.map(item => (item.prepending || []).concat(item.middleware || item.routes)).flat();
+        self.finalModuleMiddlewareAndRoutes = labeledList
+          .map(item => (item.prepending || []).concat(item.middleware || item.routes))
+          .flat();
       }
     };
   }
diff --git a/modules/@apostrophecms/i18n/index.js b/modules/@apostrophecms/i18n/index.js
index 92c0356424..c91f046dca 100644
--- a/modules/@apostrophecms/i18n/index.js
+++ b/modules/@apostrophecms/i18n/index.js
@@ -136,9 +136,11 @@ module.exports = {
       self.i18next.use(apostropheI18nDebugPlugin);
     }
 
-    const i18nextOptions = self.show ? {
-      postProcess: 'apostropheI18nDebugPlugin'
-    } : {};
+    const i18nextOptions = self.show
+      ? {
+        postProcess: 'apostropheI18nDebugPlugin'
+      }
+      : {};
 
     await self.i18next.init(i18nextOptions);
     self.addInitialResources();
@@ -578,7 +580,8 @@ module.exports = {
         let best = false;
         for (const [ name, options ] of Object.entries(locales)) {
           const matchedHostname = options.hostname
-            ? (hostname === options.hostname.split(':')[0]) : null;
+            ? (hostname === options.hostname.split(':')[0])
+            : null;
           const matchedPrefix = options.prefix
             ? ((req.path === options.prefix) || req.path.startsWith(options.prefix + '/'))
             : null;
diff --git a/modules/@apostrophecms/i18n/ui/apos/components/AposI18nLocalize.vue b/modules/@apostrophecms/i18n/ui/apos/components/AposI18nLocalize.vue
index 834a614c83..98a813d832 100644
--- a/modules/@apostrophecms/i18n/ui/apos/components/AposI18nLocalize.vue
+++ b/modules/@apostrophecms/i18n/ui/apos/components/AposI18nLocalize.vue
@@ -42,7 +42,10 @@
             </h2>
           </header>
 
-          <form class="apos-wizard__form" @submit.prevent>
+          <form
+            class="apos-wizard__form"
+            @submit.prevent
+          >
             <fieldset
               v-if="isStep('selectContent')"
               class="apos-wizard__step apos-wizard__step-select-content"
@@ -205,7 +208,10 @@
                   v-model="wizard.values.relatedDocTypesToLocalize"
                   :field="relatedDocTypesField"
                 />
-                <p v-else class="apos-wizard__help-text">
+                <p
+                  v-else
+                  class="apos-wizard__help-text"
+                >
                   <AposIndicator
                     class="apos-wizard__help-text__icon"
                     icon="lightbulb-on-icon"
@@ -215,7 +221,10 @@
                   {{ $t('apostrophe:noNewRelatedDocuments') }}
                 </p>
               </div>
-              <div v-if="translationEnabled" class="apos-wizard__translation">
+              <div
+                v-if="translationEnabled"
+                class="apos-wizard__translation"
+              >
                 <p class="apos-wizard__translation-title">
                   <AposTranslationIndicator :size="18" />
                   <span class="apos-wizard__translation-title-text">
diff --git a/modules/@apostrophecms/image/ui/apos/components/AposImageRelationshipEditor.vue b/modules/@apostrophecms/image/ui/apos/components/AposImageRelationshipEditor.vue
index 6c3eb82adc..6dea60f6d5 100644
--- a/modules/@apostrophecms/image/ui/apos/components/AposImageRelationshipEditor.vue
+++ b/modules/@apostrophecms/image/ui/apos/components/AposImageRelationshipEditor.vue
@@ -436,7 +436,7 @@ export default {
 };
 </script>
 
-<style scoped lang="scss" >
+<style scoped lang="scss">
 .apos-schema {
   margin: 30px 15px 0;
 
diff --git a/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue b/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue
index fc28836c9d..5b5d3aa758 100644
--- a/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue
+++ b/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue
@@ -1,9 +1,3 @@
-<!--
-  AposMediaManager will be in charge of all media-related state logic
-  this includes doing the selecting and deselecting of items, deciding the editor/selection view,
-  emitting batch action events, etc. All sub views will recieve `media` as a prop
--->
-
 <template>
   <AposModal
     :modal="modal"
@@ -493,7 +487,10 @@ export default {
     select(id) {
       if (this.checked.includes(id)) {
         this.updateEditing(id);
-      } else if (this.relationshipField && (this.relationshipField.max > 1 || !this.relationshipField.max)) {
+      } else if (
+        this.relationshipField &&
+        (this.relationshipField.max > 1 || !this.relationshipField.max)
+      ) {
         this.selectAnother(id);
       } else {
         this.checked = [ id ];
diff --git a/modules/@apostrophecms/login/index.js b/modules/@apostrophecms/login/index.js
index b4da1888b6..0894811127 100644
--- a/modules/@apostrophecms/login/index.js
+++ b/modules/@apostrophecms/login/index.js
@@ -13,7 +13,8 @@
 // `passwordReset`
 //
 // If set to `true`, the user is given the option to reset their password,
-// provided they can receive a confirmation email. Not available if `localLogin` is `false`.
+// provided they can receive a confirmation email.
+// Not available if `localLogin` is `false`.
 //
 // `passwordResetHours`
 //
@@ -145,7 +146,8 @@ module.exports = {
           if (req.session) {
             const destroySession = () => {
               return require('util').promisify(function(callback) {
-                // Be thorough, nothing in the session potentially related to the login should survive logout
+                // Be thorough, nothing in the session potentially
+                // related to the login should survive logout
                 return req.session.destroy(callback);
               })();
             };
@@ -169,7 +171,10 @@ module.exports = {
         // requirement. The return value of the function, which should
         // be an object, is delivered as the API response
         async requirementProps(req) {
-          const { user } = await self.findIncompleteTokenAndUser(req, req.body.incompleteToken);
+          const { user } = await self.findIncompleteTokenAndUser(
+            req,
+            req.body.incompleteToken
+          );
 
           const name = self.apos.launder.string(req.body.name);
 
@@ -252,7 +257,7 @@ module.exports = {
         async context(req) {
           return self.getContext(req);
         },
-        ...(self.isPasswordResetEnabled() ? {
+        ...self.isPasswordResetEnabled() && {
           async resetRequest(req) {
             const wait = (t = 2000) => Promise.delay(t);
             const site = (req.headers.host || '').replace(/:\d+$/, '');
@@ -339,7 +344,7 @@ module.exports = {
             user.password = password;
             await self.apos.user.update(req, user, { permissions: false });
           }
-        } : {})
+        }
       },
       get: {
         // For bc this route is still available via GET, however
@@ -484,8 +489,8 @@ module.exports = {
       //
       // If the user's login SUCCEEDS, the return value is
       // the `user` object.
-      // `attempts`,  `ip` and `requestId` are optional, sent for only logging needs. They won't
-      // be available with passport.
+      // `attempts`,  `ip` and `requestId` are optional, sent for only logging needs.
+      // They won't be available with passport.
 
       async verifyLogin(username, password, attempts = 0, ip, requestId) {
         const req = self.apos.task.getReq();
@@ -619,7 +624,11 @@ module.exports = {
 
       async checkForUserAndAlert() {
         const adminReq = self.apos.task.getReq();
-        const user = await self.apos.user.find(adminReq, {}).relationships(false).limit(1).toObject();
+        const user = await self.apos.user
+          .find(adminReq, {})
+          .relationships(false)
+          .limit(1)
+          .toObject();
 
         if (!user && !self.apos.options.test) {
           self.apos.util.warnDev('There are no users created for this installation of ApostropheCMS yet.');
@@ -632,7 +641,8 @@ module.exports = {
       },
 
       // Finalize an incomplete login based on the provided incompleteToken
-      // and various `requirements` subproperties. Implementation detail of the login route
+      // and various `requirements` subproperties.
+      // Implementation detail of the login route
       async finalizeIncompleteLogin(req) {
         const session = self.apos.launder.boolean(req.body.session);
         // Completing a previous incomplete login
@@ -723,7 +733,10 @@ module.exports = {
       async verifyRequirements(req, requirements) {
         for (const [ name, requirement ] of Object.entries(requirements)) {
           try {
-            await requirement.verify(req, req.body.requirements && req.body.requirements[name]);
+            await requirement.verify(
+              req,
+              req.body.requirements && req.body.requirements[name]
+            );
           } catch (e) {
             e.data = e.data || {};
             e.data.requirement = name;
@@ -733,7 +746,8 @@ module.exports = {
       },
 
       // Implementation detail of the login route. Log in the user, or if there are
-      // `requirements` that require password verification occur first, return an incomplete token.
+      // `requirements` that require password verification occur first,
+      // return an incomplete token.
       async initialLogin(req) {
         const username = self.apos.launder.string(req.body.username);
         const password = self.apos.launder.string(req.body.password);
@@ -784,7 +798,9 @@ module.exports = {
               requirementsToVerify,
               // Default lifetime of 1 hour is generous to permit situations like
               // installing a TOTP app for the first time
-              expires: new Date(new Date().getTime() + (self.options.incompleteLifetime || 60 * 60 * 1000))
+              expires: new Date(
+                new Date().getTime() + (self.options.incompleteLifetime || 60 * 60 * 1000)
+              )
             });
 
             await self.clearLoginAttempts(user.username);
@@ -808,7 +824,10 @@ module.exports = {
             await self.bearerTokens.insertOne({
               _id: token,
               userId: user._id,
-              expires: new Date(new Date().getTime() + (self.options.bearerTokens.lifetime || (86400 * 7 * 2)) * 1000)
+              expires: new Date(
+                new Date().getTime() +
+                  (self.options.bearerTokens.lifetime || (86400 * 7 * 2)) * 1000
+              )
             });
 
             await self.clearLoginAttempts(user.username);
@@ -1001,7 +1020,12 @@ module.exports = {
       honorLoginInvalidBefore: {
         before: '@apostrophecms/i18n',
         middleware(req, res, next) {
-          if (req.user && req.user._viaSession && req.user.loginInvalidBefore && ((!req.session.loginAt) || (req.session.loginAt < req.user.loginInvalidBefore))) {
+          if (
+            req.user &&
+            req.user._viaSession &&
+            req.user.loginInvalidBefore &&
+            (!req.session.loginAt || (req.session.loginAt < req.user.loginInvalidBefore))
+          ) {
             req.session.destroy();
             delete req.user;
           }
diff --git a/modules/@apostrophecms/modal/ui/apos/mixins/AposEditorMixin.js b/modules/@apostrophecms/modal/ui/apos/mixins/AposEditorMixin.js
index 0a4e2e7629..8958c48e00 100644
--- a/modules/@apostrophecms/modal/ui/apos/mixins/AposEditorMixin.js
+++ b/modules/@apostrophecms/modal/ui/apos/mixins/AposEditorMixin.js
@@ -42,7 +42,8 @@ export default {
 
   computed: {
     schema() {
-      let schema = (this.moduleOptions.schema || []).filter(field => apos.schema.components.fields[field.type]);
+      let schema = (this.moduleOptions.schema || [])
+        .filter(field => apos.schema.components.fields[field.type]);
       if (this.restoreOnly || this.readOnly) {
         schema = klona(schema);
         for (const field of schema) {
@@ -99,7 +100,9 @@ export default {
 
       for (const field of fields) {
         if (field.following) {
-          const following = Array.isArray(field.following) ? field.following : [ field.following ];
+          const following = Array.isArray(field.following)
+            ? field.following
+            : [ field.following ];
           followingValues[field.name] = {};
           for (const name of following) {
             if (name.startsWith('<')) {
@@ -166,6 +169,7 @@ export default {
     // in the schema. fallback is a fallback error message, if none is provided
     // by the server.
     async handleSaveError(e, { fallback }) {
+      // eslint-disable-next-line no-console
       console.error(e);
       if (e.body && e.body.data && e.body.data.errors) {
         const serverErrors = {};
@@ -219,7 +223,8 @@ export default {
           body: {
             relationship: relationship.value,
             // Pass the options of the widget currently being edited, some
-            // postprocessors need these (e.g. autocropping cares about widget aspectRatio)
+            // postprocessors need these
+            // (e.g. autocropping cares about widget aspectRatio)
             widgetOptions: apos.area.widgetOptions[0]
           },
           busy: true
@@ -236,10 +241,16 @@ export default {
             });
           } else if (field.type === 'array') {
             for (const value of (object[field.name] || [])) {
-              relationships = [ ...relationships, findRelationships(field.schema, value) ];
+              relationships = [
+                ...relationships,
+                findRelationships(field.schema, value)
+              ];
             }
           } else if (field.type === 'object') {
-            relationships = [ ...relationships, findRelationships(field.schema, object[field.name] || {}) ];
+            relationships = [
+              ...relationships,
+              findRelationships(field.schema, object[field.name] || {})
+            ];
           }
         }
         return relationships;
diff --git a/modules/@apostrophecms/page/ui/apos/logic/AposPagesManager.js b/modules/@apostrophecms/page/ui/apos/logic/AposPagesManager.js
index b7058975e0..9d7aaf7401 100644
--- a/modules/@apostrophecms/page/ui/apos/logic/AposPagesManager.js
+++ b/modules/@apostrophecms/page/ui/apos/logic/AposPagesManager.js
@@ -113,7 +113,8 @@ export default {
         };
     },
     canCreate() {
-      const page = this.items.find(page => page.aposDocId === this.moduleOptions.page.aposDocId);
+      const page = this.items
+        .find(page => page.aposDocId === this.moduleOptions.page.aposDocId);
       if (page) {
         return page._create;
       }
@@ -196,10 +197,11 @@ export default {
 
       await this.getPages();
       if (this.items.find(page => {
-        return (page.aposDocId === (window.apos.page.page && window.apos.page.page.aposDocId)) && page.archived;
+        return (page.aposDocId === (apos.page.page && apos.page.page.aposDocId)) &&
+          page.archived;
       })) {
         // With the current page gone, we need to move to safe ground
-        location.assign(`${window.apos.prefix}/`);
+        location.assign(`${apos.prefix}/`);
       }
     },
 
@@ -383,6 +385,7 @@ export default {
             interpolate: { operation: label },
             type: 'danger'
           });
+          // eslint-disable-next-line no-console
           console.error(error);
         }
       }
diff --git a/modules/@apostrophecms/piece-type/index.js b/modules/@apostrophecms/piece-type/index.js
index 1ac7712962..5d53d7a290 100644
--- a/modules/@apostrophecms/piece-type/index.js
+++ b/modules/@apostrophecms/piece-type/index.js
@@ -27,7 +27,8 @@ module.exports = {
     //   title: 1,
     //   _url: 1,
     // },
-    // By default the manager modal will get all the pieces fields below + all manager columns
+    // By default the manager modal will get all the pieces fields below +
+    // all manager columns
     // you can enable a projection using
     // managerApiProjection: {
     //   _id: 1,
@@ -281,7 +282,11 @@ module.exports = {
             result.counts = query.get('countsResults');
           }
 
-          if (self.options.cache && self.options.cache.api && self.options.cache.api.maxAge) {
+          if (
+            self.options.cache &&
+            self.options.cache.api &&
+            self.options.cache.api.maxAge
+          ) {
             self.setMaxAge(req, self.options.cache.api.maxAge);
           }
 
@@ -298,7 +303,11 @@ module.exports = {
             await self.getRestQuery(req).and({ _id }).toObject()
           );
 
-          if (self.options.cache && self.options.cache.api && self.options.cache.api.maxAge) {
+          if (
+            self.options.cache &&
+            self.options.cache.api &&
+            self.options.cache.api.maxAge
+          ) {
             const { maxAge } = self.options.cache.api;
 
             if (!self.options.cache.api.etags) {
@@ -330,7 +339,8 @@ module.exports = {
             ...self.newInstance(),
             ...body
           };
-          newInstance._previewable = self.addUrlsViaModule && (await self.addUrlsViaModule.readyToAddUrlsToPieces(req, self.name));
+          newInstance._previewable = self.addUrlsViaModule &&
+            (await self.addUrlsViaModule.readyToAddUrlsToPieces(req, self.name));
           delete newInstance._url;
           return newInstance;
         }
@@ -878,24 +888,28 @@ module.exports = {
         );
       },
 
-      // Similar to `convertInsertAndRefresh`. Update the piece with the given _id, based on the
-      // `input` object (which may be untrusted input such as req.body). Fetch the updated piece to
-      // populate all relationships and return it.
+      // Similar to `convertInsertAndRefresh`. Update the piece with the given _id,
+      // based on the `input` object (which may be untrusted input such as req.body).
+      // Fetch the updated piece to populate all relationships and return it.
       //
-      // Any fields not present in `input` are regarded as empty, if permitted (REST PUT semantics).
-      // For partial updates use convertPatchAndRefresh. Employs a lock to avoid overwriting the work of
-      // concurrent PUT and PATCH calls or getting into race conditions with their side effects.
+      // Any fields not present in `input` are regarded as empty, if permitted
+      // (REST PUT semantics). For partial updates use convertPatchAndRefresh.
+      // Employs a lock to avoid overwriting the work of concurrent PUT and PATCH calls
+      // or getting into race conditions with their side effects.
       //
-      // If `_advisoryLock: { tabId: 'xyz', lock: true }` is passed, the operation will begin by obtaining an advisory
-      // lock on the document for the given context id, and no other items in the patch will be addressed
-      // unless that succeeds. The client must then refresh the lock frequently (by default, at least
-      // every 30 seconds) with repeated PATCH requests of the `_advisoryLock` property with the same
-      // context id. If `_advisoryLock: { tabId: 'xyz', lock: false }` is passed, the advisory lock will be
-      // released *after* addressing other items in the same patch. If `force: true` is added to
-      // the `_advisoryLock` object it will always remove any competing advisory lock.
+      // If `_advisoryLock: { tabId: 'xyz', lock: true }` is passed, the operation will
+      // begin by obtaining an advisory lock on the document for the given context id,
+      // and no other items in the patch will be addressed unless that succeeds.
+      // The client must then refresh the lock frequently
+      // (by default, at least every 30 seconds) with repeated PATCH requests of
+      // the `_advisoryLock` property with the same
+      // context id. If `_advisoryLock: { tabId: 'xyz', lock: false }` is passed,
+      // the advisory lock will be released *after* addressing other items in
+      // the same patch. If `force: true` is added to the `_advisoryLock` object it
+      // will always remove any competing advisory lock.
       //
-      // `_advisoryLock` is only relevant if you want to ask others not to edit the document while you are
-      // editing it in a modal or similar.
+      // `_advisoryLock` is only relevant if you want to ask others not to edit
+      // the document while you are editing it in a modal or similar.
 
       async convertUpdateAndRefresh(req, input, _id) {
         return self.apos.lock.withLock(`@apostrophecms/${_id}`, async () => {
@@ -929,23 +943,28 @@ module.exports = {
         });
       },
 
-      // Similar to `convertUpdateAndRefresh`. Patch the piece with the given _id, based on the
-      // `input` object (which may be untrusted input such as req.body). Fetch the updated piece to
-      // populate all relationships and return it. Employs a lock to avoid overwriting the work of
-      // simultaneous PUT and PATCH calls or getting into race conditions with their side effects.
-      // However if you plan to submit many patches over a period of time while editing you may also
-      // want to use the advisory lock mechanism.
+      // Similar to `convertUpdateAndRefresh`. Patch the piece with the given _id,
+      // based on the `input` object (which may be untrusted input such as req.body).
+      // Fetch the updated piece to populate all relationships and return it.
+      // Employs a lock to avoid overwriting the work of simultaneous PUT and PATCH
+      // calls or getting into race conditions with their side effects.
+      // However if you plan to submit many patches over a period of time while
+      // editing you may also want to use the advisory lock mechanism.
       //
-      // If `_advisoryLock: { tabId: 'xyz', lock: true }` is passed, the operation will begin by obtaining an advisory
-      // lock on the document for the given context id, and no other items in the patch will be addressed
-      // unless that succeeds. The client must then refresh the lock frequently (by default, at least
-      // every 30 seconds) with repeated PATCH requests of the `_advisoryLock` property with the same
-      // context id. If `_advisoryLock: { tabId: 'xyz', lock: false }` is passed, the advisory lock will be
-      // released *after* addressing other items in the same patch. If `force: true` is added to
-      // the `_advisoryLock` object it will always remove any competing advisory lock.
+      // If `_advisoryLock: { tabId: 'xyz', lock: true }` is passed, the operation
+      // will begin by obtaining an advisory lock on the document for the given
+      // context id, and no other items in the patch will be addressed unless
+      // that succeeds. The client must then refresh the lock frequently
+      // (by default, at least every 30 seconds) with repeated PATCH requests of the
+      // `_advisoryLock` property with the same context id.
+      // If `_advisoryLock: { tabId: 'xyz', lock: false }` is passed,
+      // the advisory lock will be released *after* addressing other items in the same
+      // patch. If `force: true` is added to the `_advisoryLock` object it will always
+      // remove any competing advisory lock.
       //
-      // `_advisoryLock` is only relevant if you plan to make ongoing edits over a period of time
-      // and wish to avoid conflict with other users. You do not need it for one-time patches.
+      // `_advisoryLock` is only relevant if you plan to make ongoing edits over
+      // a period of time and wish to avoid conflict with other users. You do not need
+      // it for one-time patches.
       //
       // If `input._patches` is an array of patches to the same document, this method
       // will iterate over those patches as if each were `input`, applying all of them
@@ -953,8 +972,9 @@ module.exports = {
       // improves the performance of saving all changes to a document at once after
       // accumulating a number of changes in patch form on the front end.
       //
-      // If `input._publish` launders to a truthy boolean and the type is subject to draft/publish
-      // workflow, it is automatically published at the end of the patch operation.
+      // If `input._publish` launders to a truthy boolean and the type is
+      // subject to draft/publish workflow, it is automatically published at the
+      // end of the patch operation.
       //
       // As an optimization, and to prevent unnecessary updates of `updatedAt`, no calls
       // to `self.update()` are made when only `_advisoryLock` is present in `input` or
@@ -1032,8 +1052,9 @@ module.exports = {
           return result;
         });
       },
-      // Apply a single patch to the given piece without saving. An implementation detail of
-      // convertPatchAndRefresh, also used by the undo mechanism to simulate patches.
+      // Apply a single patch to the given piece without saving.
+      // An implementation detail of convertPatchAndRefresh,
+      // also used by the undo mechanism to simulate patches.
       async applyPatch(req, piece, input) {
         self.apos.schema.implementPatchOperators(input, piece);
         const schema = self.apos.schema.subsetSchemaForPatch(
@@ -1075,9 +1096,10 @@ module.exports = {
       },
       // Throws a `notfound` exception if a public API projection is
       // not specified and the user does not have the `view-draft` permission,
-      // which all roles capable of editing the site at all will have. This is needed because
-      // although all API calls check permissions specifically where appropriate,
-      // we also want to flunk all public access to REST APIs if not specifically configured.
+      // which all roles capable of editing the site at all will have.
+      // This is needed because although all API calls check permissions
+      // specifically where appropriate, we also want to flunk all public access
+      // to REST APIs if not specifically configured.
       publicApiCheck(req) {
         if (!self.options.publicApiProjection) {
           if (!self.canAccessApi(req)) {
@@ -1177,14 +1199,22 @@ module.exports = {
         browserOptions.batchOperations = self.checkBatchOperationsPermissions(req);
         browserOptions.utilityOperations = self.utilityOperations;
         browserOptions.insertViaUpload = self.options.insertViaUpload;
-        browserOptions.quickCreate = !self.options.singleton && self.options.quickCreate && browserOptions.canCreate;
+        browserOptions.quickCreate = !self.options.singleton &&
+          self.options.quickCreate &&
+          browserOptions.canCreate;
         browserOptions.singleton = self.options.singleton;
         browserOptions.showCreate = !self.options.singleton && self.options.showCreate;
         browserOptions.showDismissSubmission = self.options.showDismissSubmission;
         browserOptions.showArchive = self.options.showArchive;
         browserOptions.showDiscardDraft = self.options.showDiscardDraft;
-        browserOptions.canDeleteDraft = self.apos.permission.can(req, 'delete', self.name, 'draft');
-        browserOptions.contentChangedRefresh = self.options.contentChangedRefresh !== false;
+        browserOptions.canDeleteDraft = self.apos.permission.can(
+          req,
+          'delete',
+          self.name,
+          'draft'
+        );
+        browserOptions.contentChangedRefresh = self.options
+          .contentChangedRefresh !== false;
         _.defaults(browserOptions, {
           components: {}
         });
@@ -1197,13 +1227,15 @@ module.exports = {
         return browserOptions;
       },
       find(_super, req, criteria, options) {
-        return _super(req, criteria, options).defaultSort(self.options.sort || { updatedAt: -1 });
+        return _super(req, criteria, options)
+          .defaultSort(self.options.sort || { updatedAt: -1 });
       },
       newInstance(_super) {
         if (!self.options.singletonAuto) {
           return _super();
         }
-        const slug = self.apos.util.slugify(self.options.singletonAuto?.slug || self.name);
+        const slug = self.apos.util
+          .slugify(self.options.singletonAuto?.slug || self.name);
         return {
           ..._super(),
           // These fields are removed from the editable schema of singletons,
@@ -1217,170 +1249,172 @@ module.exports = {
     };
   },
   tasks(self) {
-    return (self.options.editRole === 'admin') ? {} : {
-      generate: {
-        usage: 'Invoke this task to generate sample docs of this type. Use the --total option to control how many are added to the database.\nYou can remove them all later with the --remove option.',
-        async task(argv) {
-          if (argv.remove) {
-            return remove();
-          } else {
-            return generate();
-          }
-          async function generate() {
-            const total = argv.total || 10;
-            const req = self.apos.task.getReq();
-            for (let i = 0; i < total; i++) {
-              const piece = self.generate(i);
-              piece.aposSampleData = true;
-              await self.insert(req, piece);
+    return (self.options.editRole === 'admin')
+      ? {}
+      : {
+        generate: {
+          usage: 'Invoke this task to generate sample docs of this type. Use the --total option to control how many are added to the database.\nYou can remove them all later with the --remove option.',
+          async task(argv) {
+            if (argv.remove) {
+              return remove();
+            } else {
+              return generate();
+            }
+            async function generate() {
+              const total = argv.total || 10;
+              const req = self.apos.task.getReq();
+              for (let i = 0; i < total; i++) {
+                const piece = self.generate(i);
+                piece.aposSampleData = true;
+                await self.insert(req, piece);
+              }
+            }
+            async function remove() {
+              return self.apos.doc.db.deleteMany({
+                type: self.name,
+                aposSampleData: true
+              });
             }
           }
-          async function remove() {
-            return self.apos.doc.db.deleteMany({
-              type: self.name,
-              aposSampleData: true
-            });
-          }
-        }
-      },
+        },
 
-      localize: {
-        usage: 'Add draft version documents for each locale when a module has the "localized" option.' +
+        localize: {
+          usage: 'Add draft version documents for each locale when a module has the "localized" option.' +
         '\nExample: node app [moduleName]:localize',
-        async task() {
-          if (!self.options.localized) {
-            throw new Error('Localized option not set to true, so the module cannot be localized.');
-          }
-
-          console.log('Adding drafts and locales to documents');
-
-          const locales = Object.keys(self.apos.i18n.locales);
-          const lastPublishedAt = new Date();
-          const inserts = [];
-          const deletes = [];
-
-          await self.apos.migration.eachDoc({ type: self.name }, async doc => {
-            if (doc.aposDocId && !doc._id.endsWith('published') && !doc._id.endsWith('draft')) {
-              deletes.push(doc._id);
-
-              for (const locale of locales) {
-                const newDraft = {
-                  ...doc,
-                  aposLocale: `${locale}:draft`,
-                  aposMode: 'draft',
-                  aposDocId: doc._id,
-                  _id: `${doc.aposDocId}:${locale}:draft`
-                };
-                const newPublished = {
-                  ...doc,
-                  aposLocale: `${locale}:published`,
-                  aposMode: 'published',
-                  aposDocId: doc._id,
-                  _id: `${doc.aposDocId}:${locale}:published`,
-                  lastPublishedAt
-                };
-                inserts.push(newDraft);
-                inserts.push(newPublished);
+          async task() {
+            if (!self.options.localized) {
+              throw new Error('Localized option not set to true, so the module cannot be localized.');
+            }
 
-                await self.flushInsertsAndDeletes(inserts, deletes);
+            console.log('Adding drafts and locales to documents');
+
+            const locales = Object.keys(self.apos.i18n.locales);
+            const lastPublishedAt = new Date();
+            const inserts = [];
+            const deletes = [];
+
+            await self.apos.migration.eachDoc({ type: self.name }, async doc => {
+              if (doc.aposDocId && !doc._id.endsWith('published') && !doc._id.endsWith('draft')) {
+                deletes.push(doc._id);
+
+                for (const locale of locales) {
+                  const newDraft = {
+                    ...doc,
+                    aposLocale: `${locale}:draft`,
+                    aposMode: 'draft',
+                    aposDocId: doc._id,
+                    _id: `${doc.aposDocId}:${locale}:draft`
+                  };
+                  const newPublished = {
+                    ...doc,
+                    aposLocale: `${locale}:published`,
+                    aposMode: 'published',
+                    aposDocId: doc._id,
+                    _id: `${doc.aposDocId}:${locale}:published`,
+                    lastPublishedAt
+                  };
+                  inserts.push(newDraft);
+                  inserts.push(newPublished);
+
+                  await self.flushInsertsAndDeletes(inserts, deletes);
+                }
               }
-            }
-          });
+            });
 
-          await self.flushInsertsAndDeletes(inserts, deletes, { force: true });
-          await self.apos.attachment.recomputeAllDocReferences();
+            await self.flushInsertsAndDeletes(inserts, deletes, { force: true });
+            await self.apos.attachment.recomputeAllDocReferences();
 
-          console.log(`Done localizing module ${self.name}`);
-        }
-      },
+            console.log(`Done localizing module ${self.name}`);
+          }
+        },
 
-      unlocalize: {
-        usage: 'Remove duplicate documents when a module has not "localized" and "autopublish" anymore.' +
+        unlocalize: {
+          usage: 'Remove duplicate documents when a module has not "localized" and "autopublish" anymore.' +
         '\nOptions are:' +
         '\n- locale: if not set, it is the project\'s default locale' +
         '\n- mode: by default, published' +
         '\nExample: node app [moduleName]:unlocalize --mode=published --locale=en',
-        async task(argv) {
-          if (self.options.localized) {
-            throw new Error('Localized option not set to false, so the module cannot be unlocalized.');
-          }
+          async task(argv) {
+            if (self.options.localized) {
+              throw new Error('Localized option not set to false, so the module cannot be unlocalized.');
+            }
 
-          const locale = argv.locale || self.apos.i18n.defaultLocale;
-          const mode = argv.mode || 'published';
-          const inserts = [];
-          const deletes = [];
+            const locale = argv.locale || self.apos.i18n.defaultLocale;
+            const mode = argv.mode || 'published';
+            const inserts = [];
+            const deletes = [];
 
-          console.log(`Removing duplicated documents and updating ${mode} ones`);
+            console.log(`Removing duplicated documents and updating ${mode} ones`);
 
-          await self.apos.migration.eachDoc({ type: self.name }, async doc => {
-            deletes.push(doc._id);
+            await self.apos.migration.eachDoc({ type: self.name }, async doc => {
+              deletes.push(doc._id);
 
-            if (doc.aposDocId && doc.aposLocale === `${locale}:${mode}` && doc.aposMode === mode) {
-              const newDoc = {
-                ...doc,
-                aposLocale: undefined,
-                aposMode: undefined,
-                _id: doc.aposDocId
-              };
-              inserts.push(newDoc);
+              if (doc.aposDocId && doc.aposLocale === `${locale}:${mode}` && doc.aposMode === mode) {
+                const newDoc = {
+                  ...doc,
+                  aposLocale: undefined,
+                  aposMode: undefined,
+                  _id: doc.aposDocId
+                };
+                inserts.push(newDoc);
 
-              await self.flushInsertsAndDeletes(inserts, deletes);
-            }
-          });
+                await self.flushInsertsAndDeletes(inserts, deletes);
+              }
+            });
 
-          await self.flushInsertsAndDeletes(inserts, deletes, { force: true });
-          await self.apos.attachment.recomputeAllDocReferences();
+            await self.flushInsertsAndDeletes(inserts, deletes, { force: true });
+            await self.apos.attachment.recomputeAllDocReferences();
 
-          console.log(`Done unlocalizing module ${self.name}`);
-        }
-      },
+            console.log(`Done unlocalizing module ${self.name}`);
+          }
+        },
 
-      touch: {
-        usage: 'Invoke this task to touch (update without any change) all docs of this type.',
-        async task(argv) {
-          const req = self.apos.task.getAdminReq();
-          let errCount = 0;
-          let count = 0;
-          let cursor;
-          const criteria = self.options.autopublish
-            ? { aposMode: 'draft' }
-            : {};
-
-          try {
+        touch: {
+          usage: 'Invoke this task to touch (update without any change) all docs of this type.',
+          async task(argv) {
+            const req = self.apos.task.getAdminReq();
+            let errCount = 0;
+            let count = 0;
+            let cursor;
+            const criteria = self.options.autopublish
+              ? { aposMode: 'draft' }
+              : {};
+
+            try {
             // We have 30 minutes (by default) for each iteration.
             // https://www.mongodb.com/docs/manual/reference/method/cursor.noCursorTimeout/#session-idle-timeout-overrides-nocursortimeout
-            cursor = (await self.find(req, criteria)
-              .locale(null)
-              .limit(0)
-              .toMongo())
-              .addCursorFlag('noCursorTimeout', true);
-
-            for await (const doc of cursor) {
-              try {
-                await self.update(req, doc);
-                count++;
-              } catch (e) {
-                errCount++;
-                self.apos.util.error(e);
+              cursor = (await self.find(req, criteria)
+                .locale(null)
+                .limit(0)
+                .toMongo())
+                .addCursorFlag('noCursorTimeout', true);
+
+              for await (const doc of cursor) {
+                try {
+                  await self.update(req, doc);
+                  count++;
+                } catch (e) {
+                  errCount++;
+                  self.apos.util.error(e);
+                }
+              }
+            } catch (error) {
+              self.apos.util.error(error);
+            } finally {
+              if (cursor) {
+                await cursor.close();
               }
             }
-          } catch (error) {
-            self.apos.util.error(error);
-          } finally {
-            if (cursor) {
-              await cursor.close();
-            }
-          }
-          console.log(`Touched ${count} doc(s) with ${errCount} error(s)`);
+            console.log(`Touched ${count} doc(s) with ${errCount} error(s)`);
 
-          // Return, useful for tests and internal API's
-          // It's in effect only when invoked via apos.task.invoke().
-          return {
-            touched: count,
-            errors: errCount
-          };
+            // Return, useful for tests and internal API's
+            // It's in effect only when invoked via apos.task.invoke().
+            return {
+              touched: count,
+              errors: errCount
+            };
+          }
         }
-      }
-    };
+      };
   }
 };
diff --git a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposRichTextWidgetEditor.vue b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposRichTextWidgetEditor.vue
index 83d3b65ee9..d900997f6f 100644
--- a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposRichTextWidgetEditor.vue
+++ b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposRichTextWidgetEditor.vue
@@ -409,7 +409,8 @@ export default {
       apos.bus.$emit('close-context-menus', 'richText');
     },
     generateKey() {
-      return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+      return Math.random().toString(36).substring(2, 15) +
+        Math.random().toString(36).substring(2, 15);
     },
     handleUIKeydown(e) {
       if (e.key === 'Escape') {
@@ -591,7 +592,8 @@ export default {
     showFloatingMenu({
       state, oldState
     }) {
-      const hasChanges = JSON.stringify(state?.doc.toJSON()) !== JSON.stringify(oldState?.doc.toJSON());
+      const hasChanges = JSON.stringify(state?.doc.toJSON()) !==
+        JSON.stringify(oldState?.doc.toJSON());
       const { $to } = state.selection;
 
       if (
@@ -779,19 +781,23 @@ function traverseNextNode(node) {
     gap: 6px;
   }
 
-  .apos-rich-text-editor__editor :deep(.ProseMirror) { /* stylelint-disable-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
+  .apos-rich-text-editor__editor :deep(.ProseMirror) {
     @include apos-transition();
   }
 
-  .apos-rich-text-editor__editor :deep(.ProseMirror:focus) { /* stylelint-disable-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
+  .apos-rich-text-editor__editor :deep(.ProseMirror:focus) {
     outline: none;
   }
 
-  .apos-rich-text-editor__editor :deep(.ProseMirror) { /* stylelint-disable-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
+  .apos-rich-text-editor__editor :deep(.ProseMirror) {
     padding: 10px 0;
   }
 
-  .apos-rich-text-editor__editor :deep(.ProseMirror:focus p.apos-is-empty::after) { /* stylelint-disable-line selector-class-pattern, selector-no-qualifying-type */
+/* stylelint-disable-next-line selector-class-pattern, selector-no-qualifying-type */
+  .apos-rich-text-editor__editor :deep(.ProseMirror:focus p.apos-is-empty::after) {
     display: block;
     margin: 5px 0 10px;
     padding-top: 5px;
@@ -819,7 +825,9 @@ function traverseNextNode(node) {
     transition: transform 400ms var(--a-transition-timing-bounce) 100ms;
   }
 
-  .apos-rich-text-editor__editor :deep(.tippy-box[data-animation='fade'][data-state='hidden']) {
+  .apos-rich-text-editor__editor :deep(
+    .tippy-box[data-animation='fade'][data-state='hidden']
+  ) {
     opacity: 0;
     transform: scale(0.9);
   }
@@ -879,12 +887,13 @@ function traverseNextNode(node) {
 
   // So editors can identify the cells that would take part
   // in a merge operation
-  .apos-rich-text-editor__editor :deep(.selectedCell) { /* stylelint-disable-line selector-class-pattern */
+  /* stylelint-disable-next-line selector-class-pattern */
+  .apos-rich-text-editor__editor :deep(.selectedCell) {
     // Should be visible on any background, light mode or dark mode
     backdrop-filter: invert(0.1);
   }
-
-  .apos-rich-text-editor__editor :deep(figure.ProseMirror-selectednode) { /* stylelint-disable-line selector-no-qualifying-type, selector-class-pattern */
+/* stylelint-disable-next-line selector-no-qualifying-type, selector-class-pattern */
+  .apos-rich-text-editor__editor :deep(figure.ProseMirror-selectednode) {
     opacity: 0.5;
   }
 
diff --git a/modules/@apostrophecms/schema/ui/apos/logic/AposArrayEditor.js b/modules/@apostrophecms/schema/ui/apos/logic/AposArrayEditor.js
index 93dcc273c5..8a8ff9f290 100644
--- a/modules/@apostrophecms/schema/ui/apos/logic/AposArrayEditor.js
+++ b/modules/@apostrophecms/schema/ui/apos/logic/AposArrayEditor.js
@@ -127,13 +127,14 @@ export default {
     },
     currentDocServerErrors() {
       let serverErrors = null;
-      ((this.serverError && this.serverError.data && this.serverError.data.errors) || []).forEach(error => {
-        const [ _id, fieldName ] = error.path.split('.');
-        if (_id === this.currentId) {
-          serverErrors = serverErrors || {};
-          serverErrors[fieldName] = error;
-        }
-      });
+      ((this.serverError && this.serverError.data && this.serverError.data.errors) || [])
+        .forEach(error => {
+          const [ _id, fieldName ] = error.path.split('.');
+          if (_id === this.currentId) {
+            serverErrors = serverErrors || {};
+            serverErrors[fieldName] = error;
+          }
+        });
       return serverErrors;
     },
     currentDocMeta() {
@@ -298,7 +299,8 @@ export default {
         // If the titleField references a select input, use the
         // select label as the slat label, rather than the value.
         if (this.titleFieldChoices) {
-          const choice = this.titleFieldChoices.find(choice => choice.value === candidate);
+          const choice = this.titleFieldChoices
+            .find(choice => choice.value === candidate);
           if (choice && choice.label) {
             candidate = choice.label;
           }
@@ -350,6 +352,7 @@ export default {
               choices = result.choices;
             }
           } catch (e) {
+            // eslint-disable-next-line no-console
             console.error(this.$t('apostrophe:errorFetchingTitleFieldChoicesByMethod', { name: titleField.name }));
           }
 
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposTable.vue b/modules/@apostrophecms/ui/ui/apos/components/AposTable.vue
index e1a630a647..f825aa7b64 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposTable.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposTable.vue
@@ -64,7 +64,7 @@
             :item="item"
             :header="header"
             :classes="header.cellClasses"
-            :valueFormatted="getValue(item, header)"
+            :value-formatted="getValue(item, header)"
             :value="getValue(item, header, false)"
           >
             <p

From ad7857ec4e4a22cc538ab8f335a246da14bf9337 Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Thu, 20 Mar 2025 18:41:50 +0100
Subject: [PATCH 3/5] upgrade vue plugin

---
 .eslintrc    | 4 ++--
 package.json | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index d7702cdd59..aa8de4d729 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,6 +1,6 @@
 {
   "extends": [
-    "apostrophe",
-    "plugin:vue/vue3-recommended"
+    "plugin:vue/recommended",
+    "apostrophe"
   ]
 }
diff --git a/package.json b/package.json
index 33f94fc08f..420d437946 100644
--- a/package.json
+++ b/package.json
@@ -139,13 +139,13 @@
     "eslint-plugin-n": "^15.2.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.6.0",
-    "eslint-plugin-vue": "^7.9.0",
+    "eslint-plugin-vue": "^10.0.0",
     "mocha": "^10.7.3",
     "nyc": "^15.1.0",
     "replace-in-file": "^6.1.0",
     "stylelint": "^16.5.0",
     "stylelint-config-apostrophe": "^4.2.0",
-    "vue-eslint-parser": "^7.1.1"
+    "vue-eslint-parser": "^10.1.1"
   },
   "browserslist": [
     "ie >= 10"

From 3d5c42bafbed6b6122324bd26f9519cb773b94d3 Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Mon, 24 Mar 2025 09:53:49 +0100
Subject: [PATCH 4/5] fix lint errors

---
 modules/@apostrophecms/job/index.js           |   6 +-
 .../ui/apos/components/AposTiptapColor.vue    |   3 +-
 .../schema/ui/apos/lib/conditionalFields.js   |   4 +-
 .../ui/apos/logic/AposInputAttachment.js      |   1 +
 .../ui/apos/logic/AposSettingsManager.js      |   1 +
 modules/@apostrophecms/template/index.js      | 188 +++++++++------
 .../ui/ui/apos/apps/AposBusEvent.js           |   1 +
 .../ui/ui/apos/components/AposContextMenu.vue |   4 +-
 .../ui/ui/apos/components/AposSlat.vue        | 221 +++++++++---------
 .../ui/ui/apos/components/AposTagApply.vue    |  84 ++++---
 .../ui/ui/apos/stores/notification.js         |   2 +
 .../video-widget/ui/src/index.js              |   1 +
 .../ui/apos/components/AposWidgetEditor.vue   |   4 +-
 .../ui/apos/mixins/AposWidgetMixin.js         |   1 +
 14 files changed, 284 insertions(+), 237 deletions(-)

diff --git a/modules/@apostrophecms/job/index.js b/modules/@apostrophecms/job/index.js
index 6aa16158b0..ef048d7009 100644
--- a/modules/@apostrophecms/job/index.js
+++ b/modules/@apostrophecms/job/index.js
@@ -97,7 +97,8 @@ module.exports = {
       // simpler wrapper for this method if you are implementing a batch operation
       // on a single type of piece.
       //
-      // Notification messages should be included on a `req.body.messages` object. See `triggerNotification for details`.
+      // Notification messages should be included on a `req.body.messages` object.
+      // See `triggerNotification for details`.
       async runBatch(req, ids, change, options = {}) {
         let job;
         let notification;
@@ -185,7 +186,8 @@ module.exports = {
       // background afterwards. You can pass `jobId` to the `progress` API route
       // of this module as `_id` on the request body to get job status info.
       //
-      // Notification messages should be included on a `req.body.messages` object. See `triggerNotification for details`.
+      // Notification messages should be included on a `req.body.messages` object.
+      // See `triggerNotification for details`.
       async run(req, doTheWork, options = {}) {
         const res = req.res;
         let job;
diff --git a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapColor.vue b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapColor.vue
index 25b1f0b20c..64a2089c73 100644
--- a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapColor.vue
+++ b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapColor.vue
@@ -138,7 +138,8 @@ function update(value) {
   indicatorColor.value = next.value;
   // Might be a temporary solution, but since it would require refacto
   // to pass an additional param saying if we're editing colors from an input or no.
-  // mainly because we use a computed with getter and setter, so we just can't pass params.
+  // mainly because we use a computed with getter and setter,
+  // so we just can't pass params.
   if (document.activeElement.tagName === 'INPUT') {
     props.editor.chain().setColor(value).run();
   } else {
diff --git a/modules/@apostrophecms/schema/ui/apos/lib/conditionalFields.js b/modules/@apostrophecms/schema/ui/apos/lib/conditionalFields.js
index 5d97eba604..c8e8ae8afe 100644
--- a/modules/@apostrophecms/schema/ui/apos/lib/conditionalFields.js
+++ b/modules/@apostrophecms/schema/ui/apos/lib/conditionalFields.js
@@ -77,7 +77,8 @@ export async function evaluateExternalCondition(conditionKey, fieldId, docId) {
 
   return [ conditionKey, result ];
 }
-// Checking if key ends with a closing parenthesis here to throw later if any argument is passed.
+// Checking if key ends with a closing parenthesis here
+// to throw later if any argument is passed.
 export function isExternalCondition(conditionKey, conditionType) {
   if (!conditionKey.endsWith(')')) {
     return false;
@@ -86,6 +87,7 @@ export function isExternalCondition(conditionKey, conditionType) {
   const [ methodDefinition ] = conditionKey.split('(');
 
   if (!conditionKey.endsWith('()')) {
+    // eslint-disable-next-line no-console
     console.warn(`Warning in \`${conditionType}\` definition: "${methodDefinition}()" should not be passed any argument.`);
   }
 
diff --git a/modules/@apostrophecms/schema/ui/apos/logic/AposInputAttachment.js b/modules/@apostrophecms/schema/ui/apos/logic/AposInputAttachment.js
index 952816e4cd..1c4f05504a 100644
--- a/modules/@apostrophecms/schema/ui/apos/logic/AposInputAttachment.js
+++ b/modules/@apostrophecms/schema/ui/apos/logic/AposInputAttachment.js
@@ -64,6 +64,7 @@ export default {
           this.$emit('upload-complete');
           this.modelValue.data = attachment;
         } catch (error) {
+          // eslint-disable-next-line no-console
           console.error('Error uploading file.', error);
           const msg = error.body && error.body.message ? error.body.message : this.$t('apostrophe:uploadError');
           await apos.notify(msg, {
diff --git a/modules/@apostrophecms/settings/ui/apos/logic/AposSettingsManager.js b/modules/@apostrophecms/settings/ui/apos/logic/AposSettingsManager.js
index 0380f7da68..a96bed9baf 100644
--- a/modules/@apostrophecms/settings/ui/apos/logic/AposSettingsManager.js
+++ b/modules/@apostrophecms/settings/ui/apos/logic/AposSettingsManager.js
@@ -147,6 +147,7 @@ export default {
       this.values.data = newValues;
     },
     async handleSaveError(e, { fallback }) {
+      // eslint-disable-next-line no-console
       console.error(e);
       if (e.body && e.body.data && e.body.data.errors) {
         const serverErrors = {};
diff --git a/modules/@apostrophecms/template/index.js b/modules/@apostrophecms/template/index.js
index 9a3c1c3e88..0792ce72de 100644
--- a/modules/@apostrophecms/template/index.js
+++ b/modules/@apostrophecms/template/index.js
@@ -13,7 +13,8 @@
 // ### `filters`: an object in which
 // each key is the name of a Nunjucks filter and
 // its corresponding value is a function that implements it.
-// You may find it easier and more maintainable to call `apos.template.addFilter(name, fn)`.
+// You may find it easier and more maintainable to call
+// `apos.template.addFilter(name, fn)`.
 //
 // ### `language`: your own alternative to the object
 // returned by require('nunjucks'). Replacing Nunjucks
@@ -134,7 +135,8 @@ module.exports = {
 
       addHelpersForModule(module, object) {
         const helpersForModules = self.templateApos.modules;
-        helpersForModules[module.__meta.name] = helpersForModules[module.__meta.name] || {};
+        helpersForModules[module.__meta.name] =
+          helpersForModules[module.__meta.name] || {};
         const helpersForModule = helpersForModules[module.__meta.name];
         if (typeof object === 'string') {
           helpersForModule[arguments[1]] = arguments[2];
@@ -424,18 +426,20 @@ module.exports = {
           const extension = {};
           extension.tags = [ name ];
           extension.parse = function (parser, nodes, lexer) {
-            const parse = config.parse ? config.parse : function (parser, nodes, lexer) {
+            const parse = config.parse
+              ? config.parse
+              : function (parser, nodes, lexer) {
               // Default parser gets comma separated arguments,
               // assumes no body
 
-              // get the tag token
-              const token = parser.nextToken();
-              // parse the args and move after the block end. passing true
-              // as the second arg is required if there are no parentheses
-              const args = parser.parseSignature(null, true);
-              parser.advanceAfterBlockEnd(token.value);
-              return { args };
-            };
+                // get the tag token
+                const token = parser.nextToken();
+                // parse the args and move after the block end. passing true
+                // as the second arg is required if there are no parentheses
+                const args = parser.parseSignature(null, true);
+                parser.advanceAfterBlockEnd(token.value);
+                return { args };
+              };
             const parsed = parse(parser, nodes, lexer);
             return new nodes.CallExtensionAsync(extension, 'run', parsed.args, parsed.blocks || []);
           };
@@ -636,7 +640,8 @@ module.exports = {
       // * `user` (`req.user`)
       // * `query` (`req.query`)
       // * `permissions` (`req.user._permissions`)
-      // * `refreshing` (true if we are refreshing the content area of the page without reloading)
+      // * `refreshing` (true if we are refreshing
+      // the content area of the page without reloading)
       //
       // async function.
 
@@ -696,32 +701,37 @@ module.exports = {
 
           try {
             const spanRenderName = `render:${module.__meta.name}:render`;
-            const content = await telemetry.startActiveSpan(spanRenderName, async (spanRender) => {
-              spanRender.setAttribute(SemanticAttributes.CODE_FUNCTION, 'render');
-              spanRender.setAttribute(SemanticAttributes.CODE_NAMESPACE, module.__meta.name);
-              spanRender.setAttribute(telemetry.Attributes.SCENE, aposBodyData.scene);
-              spanRender.setAttribute(telemetry.Attributes.TEMPLATE, template);
-
-              try {
-                const content = await module.render(req, template, args);
-                spanRender.setStatus({ code: telemetry.api.SpanStatusCode.OK });
-                const filledContent = self.insertBundlesMarkup({
-                  page: req.data.bestPage,
-                  scene: aposBodyData.scene,
-                  template,
-                  content,
-                  scriptsPlaceholder: req.scriptsPlaceholder,
-                  stylesheetsPlaceholder: req.stylesheetsPlaceholder,
-                  widgetsBundles: req.widgetsBundles
-                });
-                return filledContent;
-              } catch (err) {
-                telemetry.handleError(spanRender, err);
-                throw err;
-              } finally {
-                spanRender.end();
-              }
-            }, span);
+            const content = await telemetry.startActiveSpan(
+              spanRenderName,
+              async (spanRender) => {
+                spanRender.setAttribute(SemanticAttributes.CODE_FUNCTION, 'render');
+                spanRender.setAttribute(
+                  SemanticAttributes.CODE_NAMESPACE,
+                  module.__meta.name
+                );
+                spanRender.setAttribute(telemetry.Attributes.SCENE, aposBodyData.scene);
+                spanRender.setAttribute(telemetry.Attributes.TEMPLATE, template);
+
+                try {
+                  const content = await module.render(req, template, args);
+                  spanRender.setStatus({ code: telemetry.api.SpanStatusCode.OK });
+                  const filledContent = self.insertBundlesMarkup({
+                    page: req.data.bestPage,
+                    scene: aposBodyData.scene,
+                    template,
+                    content,
+                    scriptsPlaceholder: req.scriptsPlaceholder,
+                    stylesheetsPlaceholder: req.stylesheetsPlaceholder,
+                    widgetsBundles: req.widgetsBundles
+                  });
+                  return filledContent;
+                } catch (err) {
+                  telemetry.handleError(spanRender, err);
+                  throw err;
+                } finally {
+                  spanRender.end();
+                }
+              }, span);
 
             span.setStatus({ code: telemetry.api.SpanStatusCode.OK });
             return content;
@@ -799,10 +809,11 @@ module.exports = {
         self.apos.util.error(e);
       },
 
-      // Add a body class or classes to be emitted when the page is rendered. This information
-      // is attached to `req.data`, where the string `req.data.aposBodyClasses` is built up.
-      // The default `outerLayoutBase.html` template outputs that string.
-      // The string passed may contain space-separated class names.
+      // Add a body class or classes to be emitted when the page is rendered.
+      // This information is attached to `req.data`, where the string
+      // `req.data.aposBodyClasses` is built up. The default `outerLayoutBase.html`
+      // template outputs that string. The string passed may contain space-separated
+      // class names.
 
       addBodyClass(req, bodyClass) {
         req.data.aposBodyClasses = (req.data.aposBodyClasses ? req.data.aposBodyClasses + ' ' : '') + bodyClass;
@@ -816,15 +827,20 @@ module.exports = {
       // Alternatively the second argument may be an object, in which case each property
       // becomes a data attribute, with the `data-` prefix.
       //
-      // The default `outerLayoutBase.html` template outputs the data attributes on the `body`
-      // tag.
+      // The default `outerLayoutBase.html` template outputs
+      // the data attributes on the `body` tag.
 
       addBodyDataAttribute(req, name, value) {
         let values = {};
         if (_.isObject(name) && !_.isArray(name) && !_.isFunction(name)) {
           values = name;
         } else {
-          if (name && name.toString().length > 0 && value && value.toString().length > 0) {
+          if (
+            name &&
+            name.toString().length > 0 &&
+            value &&
+            value.toString().length > 0
+          ) {
             values[name] = value;
           }
         }
@@ -838,13 +854,13 @@ module.exports = {
         });
       },
 
-      // Use this method to provide an async component name that will be invoked at the point
-      // in the page layout identified by the string `location`. Standard locations
-      // are `head`, `body`, and `main`.
+      // Use this method to provide an async component name that will
+      // be invoked at the point in the page layout identified by the string `location`.
+      // Standard locations are `head`, `body`, and `main`.
       //
       //  The page layout, template or outerLayout must contain a corresponding
-      // `{% component '@apostrophecms/template:inject', 'location', 'prepend' %}` call, with the same location,
-      // to actually insert the content.
+      // `{% component '@apostrophecms/template:inject', 'location', 'prepend' %}` call,
+      // with the same location, to actually insert the content.
       //
       // The output of components added with `prepend` is prepended just after the
       // opening tag of an element, such as `<head>`. Use `append` to insert material
@@ -856,10 +872,11 @@ module.exports = {
       //
       // `conditions` argument can be an object with keys `when` and `bundler` to specify
       // when the component should be injected. `bundler` is the alias of the currently
-      // registered asset external build module. For now only `when: hmr` and `bundler: xxx` are supported.
+      // registered asset external build module. For now only
+      // `when: hmr` and `bundler: xxx` are supported.
       //
-      // A new single argument signature is also supported, where the first argument is an object.
-      // See `insert()` for more details.
+      // A new single argument signature is also supported, where the first
+      // argument is an object. See `insert()` for more details.
       // Usage:
       // apos.template.prepend({
       //   component: 'module-name:async-component-name',
@@ -868,9 +885,11 @@ module.exports = {
       //   bundler: 'vite',
       // });
       // OR
-      // apos.template.prepend('head', 'module-name:async-component-name', { when: 'hmr', bundler: 'vite' });
+      // apos.template.prepend('head', 'module-name:async-component-name',
+      // { when: 'hmr', bundler: 'vite' });
       // Such calls will match the following inject:
-      // {% component '@apostrophecms/template:inject', 'head', 'prepend', { when: 'hmr', bundler: 'vite' } %}
+      // {% component '@apostrophecms/template:inject', 'head', 'prepend',
+      // { when: 'hmr', bundler: 'vite' } %}
       // but only when the current asset bundler is 'vite'.
 
       prepend(location, componentName, conditions) {
@@ -883,9 +902,9 @@ module.exports = {
         return self.insert('prepend', location, componentName, conditions);
       },
 
-      // Use this method to provide an async component name that will be invoked at the point
-      // in the page layout identified by the string `location`. Standard locations
-      // are `head`, `body`, and `main`.
+      // Use this method to provide an async component name that will
+      // be invoked at the point in the page layout identified by the string
+      // `location`. Standard locations are `head`, `body`, and `main`.
       //
       //  The page layout, template or outerLayout must contain a corresponding
       // `apos.template.prepended('location')` call, with the same location, to
@@ -901,9 +920,11 @@ module.exports = {
       //
       // `conditions` argument can be an object with keys `when` and `bundler` to specify
       // when the component should be injected. `bundler` is the alias of the currently
-      // registered asset external build module. For now only `when: hmr` and `bundler: xxx` are supported.
+      // registered asset external build module. For now only `when: hmr` and
+      // `bundler: xxx` are supported.
       //
-      // A new single argument signature is also supported, where the first and only argument is an object.
+      // A new single argument signature is also supported, where the first and
+      // only argument is an object.
       // See `insert()` for more details.
       // Usage:
       // apos.template.append({
@@ -913,9 +934,11 @@ module.exports = {
       //   bundler: 'vite',
       // });
       // OR
-      // apos.template.append('head', 'module-name:async-component-name', { when: 'hmr', bundler: 'vite' });
+      // apos.template.append('head', 'module-name:async-component-name',
+      // { when: 'hmr', bundler: 'vite' });
       // Such call will match the following inject:
-      // {% component '@apostrophecms/template:inject' with { where: 'head', end: 'append', when: 'hmr' } %}
+      // {% component '@apostrophecms/template:inject' with
+      // { where: 'head', end: 'append', when: 'hmr' } %}
       // but only when the current asset bundler is 'vite'.
 
       append(location, componentName, conditions) {
@@ -928,21 +951,26 @@ module.exports = {
         return self.insert('append', location, componentName, conditions);
       },
 
-      // Implementation detail of `apos.template.prepend` and `apos.template.append`. `conditions` is an object
-      // (optional) that may have `when` and `bundler` keys. See below for more info. All conditions are evaluated
+      // Implementation detail of `apos.template.prepend` and `apos.template.append`.
+      // `conditions` is an object
+      // (optional) that may have `when` and `bundler` keys. See below for more info.
+      // All conditions are evaluated
       // at a runtime, when the component is injected.
       //
-      // If `location` is an object, the following arguments are ignored. The object should have the following keys:
+      // If `location` is an object, the following arguments are ignored. The object
+      // should have the following keys:
       // - `component`: the component name (e.g. 'module-name:component-name')
       // - `where`: the location (e.g. 'head')
-      // - `when`: (optional) string or array of strings, the conditions to be met to insert the component.
-      //   When an array, a logical AND is applied. One match against the injected `when` data is required.
-      //   Currently supported values are `hmr`, `dev`, `prod`. See `getInjectConditionHandlers()` for more info.
-      //   The `when` value can include an argument separated by `:`. E.g. `hmr:apos`, `hmr:public`. If the condition
-      //   handler does not support arguments, it's ignored.
-      // - `bundler`: (optional) string, the alias of the currently registered asset external build module.
-      //   The bundler condition is not parth of the actual inject data. It's evaluated just on the registration
-      //   data.
+      // - `when`: (optional) string or array of strings, the conditions to be met to
+      // insert the component. When an array, a logical AND is applied. One match
+      // against the injected `when` data is required. Currently supported values
+      // are `hmr`, `dev`, `prod`. See `getInjectConditionHandlers()` for more info.
+      //   The `when` value can include an argument separated by `:`.
+      //   E.g. `hmr:apos`, `hmr:public`. If the condition handler does not
+      //   support arguments, it's ignored.
+      // - `bundler`: (optional) string, the alias of the currently registered
+      // asset external build module. The bundler condition is not parth of the
+      // actual inject data. It's evaluated just on the registration data.
 
       insert(end, location, componentName, conditions) {
         if (location && typeof location === 'object') {
@@ -1080,7 +1108,14 @@ module.exports = {
       },
 
       getDocsForExternalFront(req, template, data, moduleName) {
-        return [ data.home, ...(data.page?._ancestors || []), ...(data.page?._children || []), data.page, data.piece, ...(data.pieces || []) ].filter(doc => !!doc);
+        return [
+          data.home,
+          ...(data.page?._ancestors || []),
+          ...(data.page?._children || []),
+          data.page,
+          data.piece,
+          ...(data.pieces || [])
+        ].filter(doc => !!doc);
       },
 
       annotateDocForExternalFront(doc) {
@@ -1093,7 +1128,10 @@ module.exports = {
             }
             const field = manager.schema.find(f => f.name === k);
             if (!field) {
-              self.apos.util.warnDevOnce('noSchemaFieldForAreaInExternalFront', `Area ${k} has no matching schema field in ${o.metaType} ${o.type || ''}`);
+              self.apos.util.warnDevOnce(
+                'noSchemaFieldForAreaInExternalFront',
+                `Area ${k} has no matching schema field in ${o.metaType} ${o.type || ''}`
+              );
               return;
             }
             return self.annotateAreaForExternalFront(field, v);
diff --git a/modules/@apostrophecms/ui/ui/apos/apps/AposBusEvent.js b/modules/@apostrophecms/ui/ui/apos/apps/AposBusEvent.js
index 17b9093f88..b32f2b1b91 100644
--- a/modules/@apostrophecms/ui/ui/apos/apps/AposBusEvent.js
+++ b/modules/@apostrophecms/ui/ui/apos/apps/AposBusEvent.js
@@ -19,6 +19,7 @@ export default function() {
       if (name) {
         apos.bus.$emit(name, json.data || null);
       } else {
+        // eslint-disable-next-line no-console
         console.error('Apostrophe bus events require a name');
         apos.notify('apostrophe:error', { type: 'error' });
       }
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposContextMenu.vue b/modules/@apostrophecms/ui/ui/apos/components/AposContextMenu.vue
index 935468f7d7..5a447f1ff2 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposContextMenu.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposContextMenu.vue
@@ -178,7 +178,7 @@ const dropdownContent = ref(null);
 const dropdownContentStyle = ref({});
 const arrowEl = ref(null);
 const iconToCenterTo = ref(null);
-const menuOffset = getMenuOffset();
+const mOffset = getMenuOffset();
 const otherMenuOpened = ref(false);
 
 const {
@@ -358,7 +358,7 @@ async function setDropdownPosition() {
   } = await computePosition(centerArrowEl, dropdownContent.value, {
     placement: props.menuPlacement,
     middleware: [
-      offset(menuOffset),
+      offset(mOffset),
       shift({ padding: 5 }),
       flip(),
       arrow({
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposSlat.vue b/modules/@apostrophecms/ui/ui/apos/components/AposSlat.vue
index f8128df2d4..c00a5b9027 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposSlat.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposSlat.vue
@@ -1,119 +1,117 @@
 
 <template>
-  <transition name="fade">
-    <li
-      class="apos-slat"
-      :data-id="item._id"
-      :tabindex="slatCount > 1 ? '0' : '-1'"
-      :class="{
-        'apos-is-engaged': engaged,
-        'apos-is-only-child': slatCount === 1,
-        'apos-is-selected': selected,
-        'apos-is-disabled': disabled,
-      }"
-      :aria-pressed="engaged"
-      role="listitem"
-      :aria-labelledby="parent"
-      @keydown.space="toggleEngage"
-      @keydown.enter="toggleEngage"
-      @keydown.escape="disengage"
-      @keydown.arrow-down="move(1)"
-      @keydown.arrow-up="move(-1)"
-      @keydown.backspace="remove($event, true)"
-      @click="click"
-    >
-      <div class="apos-slat__main">
-        <drag-icon
-          v-if="slatCount > 1"
-          class="apos-slat__control apos-slat__control--drag"
-          :size="13"
-        />
-        <AposContextMenu
-          v-if="hasRelationshipFields && more.menu.length"
-          :button="more.button"
-          :menu="more.menu"
-          menu-placement="bottom-start"
-          :disabled="disabled"
-          @item-clicked="$emit('item-clicked', item)"
-        />
-        <AposButton
-          v-if="editorIcon && hasRelationshipEditor"
-          class="apos-slat__editor-btn"
-          role="button"
-          :tooltip="{
-            content: editorLabel,
-            placement: 'bottom'
-          }"
-          :icon="editorIcon"
-          :icon-only="true"
-          :modifiers="['inline']"
-          :disabled="disabled"
-          @click="$emit('item-clicked', item)"
-          @keydown.prevent.enter="nativeClick"
-          @keydown.prevent.space="nativeClick"
-        />
-        <AposButton
-          v-if="item._url || item._urls"
-          class="apos-slat__control apos-slat__control--view"
-          icon="eye-icon"
-          :icon-only="true"
-          :modifiers="['inline']"
-          label="apostrophe:preview"
-          :href="item._url || item._urls.original"
-          target="_blank"
-          @keydown.prevent.enter="nativeClick"
-          @keydown.prevent.space="nativeClick"
-        />
-        <div
-          v-if="item.attachment &&
-            item.attachment.group === 'images' &&
-            item.attachment._urls"
-          class="apos-slat__media-preview"
+  <li
+    class="apos-slat"
+    :data-id="item._id"
+    :tabindex="slatCount > 1 ? '0' : '-1'"
+    :class="{
+      'apos-is-engaged': engaged,
+      'apos-is-only-child': slatCount === 1,
+      'apos-is-selected': selected,
+      'apos-is-disabled': disabled,
+    }"
+    :aria-pressed="engaged"
+    role="listitem"
+    :aria-labelledby="parent"
+    @keydown.space="toggleEngage"
+    @keydown.enter="toggleEngage"
+    @keydown.escape="disengage"
+    @keydown.arrow-down="move(1)"
+    @keydown.arrow-up="move(-1)"
+    @keydown.backspace="remove($event, true)"
+    @click="click"
+  >
+    <div class="apos-slat__main">
+      <drag-icon
+        v-if="slatCount > 1"
+        class="apos-slat__control apos-slat__control--drag"
+        :size="13"
+      />
+      <AposContextMenu
+        v-if="hasRelationshipFields && more.menu.length"
+        :button="more.button"
+        :menu="more.menu"
+        menu-placement="bottom-start"
+        :disabled="disabled"
+        @item-clicked="$emit('item-clicked', item)"
+      />
+      <AposButton
+        v-if="editorIcon && hasRelationshipEditor"
+        class="apos-slat__editor-btn"
+        role="button"
+        :tooltip="{
+          content: editorLabel,
+          placement: 'bottom'
+        }"
+        :icon="editorIcon"
+        :icon-only="true"
+        :modifiers="['inline']"
+        :disabled="disabled"
+        @click="$emit('item-clicked', item)"
+        @keydown.prevent.enter="nativeClick"
+        @keydown.prevent.space="nativeClick"
+      />
+      <AposButton
+        v-if="item._url || item._urls"
+        class="apos-slat__control apos-slat__control--view"
+        icon="eye-icon"
+        :icon-only="true"
+        :modifiers="['inline']"
+        label="apostrophe:preview"
+        :href="item._url || item._urls.original"
+        target="_blank"
+        @keydown.prevent.enter="nativeClick"
+        @keydown.prevent.space="nativeClick"
+      />
+      <div
+        v-if="item.attachment &&
+          item.attachment.group === 'images' &&
+          item.attachment._urls"
+        class="apos-slat__media-preview"
+      >
+        <img
+          :src="item.attachment._urls.uncropped
+            ? item.attachment._urls.uncropped['one-sixth']
+            : item.attachment._urls['one-sixth']"
+          :alt="item.description || item.title"
+          class="apos-slat__media"
         >
-          <img
-            :src="item.attachment._urls.uncropped
-              ? item.attachment._urls.uncropped['one-sixth']
-              : item.attachment._urls['one-sixth']"
-            :alt="item.description || item.title"
-            class="apos-slat__media"
-          >
-        </div>
-        <div
-          v-else-if="item.extension"
-          class="apos-slat__extension-wrapper"
-        >
-          <span
-            class="apos-slat__extension"
-            :class="[`apos-slat__extension--${item.extension}`]"
-          >
-            {{ item.extension }}
-          </span>
-        </div>
-        <div class="apos-slat__label">
-          {{ item.title }}
-        </div>
       </div>
-      <div class="apos-slat__secondary">
-        <div
-          v-if="item.length && item.length.size"
-          class="apos-slat__size"
+      <div
+        v-else-if="item.extension"
+        class="apos-slat__extension-wrapper"
+      >
+        <span
+          class="apos-slat__extension"
+          :class="[`apos-slat__extension--${item.extension}`]"
         >
-          {{ itemSize }}
-        </div>
-        <AposButton
-          v-if="removable"
-          class="apos-slat__control apos-slat__control--remove"
-          icon="close-icon"
-          :icon-only="true"
-          :modifiers="['inline']"
-          label="apostrophe:removeItem"
-          :disabled="disabled"
-          @click="remove($event)"
-          @keydown.prevent.space="remove($event)"
-        />
+          {{ item.extension }}
+        </span>
+      </div>
+      <div class="apos-slat__label">
+        {{ item.title }}
+      </div>
+    </div>
+    <div class="apos-slat__secondary">
+      <div
+        v-if="item.length && item.length.size"
+        class="apos-slat__size"
+      >
+        {{ itemSize }}
       </div>
-    </li>
-  </transition>
+      <AposButton
+        v-if="removable"
+        class="apos-slat__control apos-slat__control--remove"
+        icon="close-icon"
+        :icon-only="true"
+        :modifiers="['inline']"
+        label="apostrophe:removeItem"
+        :disabled="disabled"
+        @click="remove($event)"
+        @keydown.prevent.space="remove($event)"
+      />
+    </div>
+  </li>
 </template>
 
 <script>
@@ -353,7 +351,8 @@ export default {
     max-width: 75%;
 
     &:deep(.trigger) {
-      /* This gets inline positioned and has doesn't provide an extra class to beef up, sorry */
+      // This gets inline positioned and has doesn't provide an extra
+      // class to beef up, sorry
       /* stylelint-disable-next-line declaration-no-important */
       display: flex !important;
     }
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposTagApply.vue b/modules/@apostrophecms/ui/ui/apos/components/AposTagApply.vue
index ab741da65e..9f1d3a21bb 100644
--- a/modules/@apostrophecms/ui/ui/apos/components/AposTagApply.vue
+++ b/modules/@apostrophecms/ui/ui/apos/components/AposTagApply.vue
@@ -21,51 +21,49 @@
           @click="create"
         />
       </div>
-      <transition name="fade">
-        <div>
-          <ol
-            v-if="searchTags.length && !creating"
-            class="apos-apply-tag-menu__tags"
+      <div>
+        <ol
+          v-if="searchTags.length && !creating"
+          class="apos-apply-tag-menu__tags"
+        >
+          <li
+            v-for="tag in searchTags"
+            :key="`${keyPrefix}-${tag.slug}`"
+            class="apos-apply-tag-menu__tag"
           >
-            <li
-              v-for="tag in searchTags"
-              :key="`${keyPrefix}-${tag.slug}`"
-              class="apos-apply-tag-menu__tag"
-            >
-              <AposCheckbox
-                v-if="checkboxes[tag.slug]"
-                v-model="checked"
-                :field="checkboxes[tag.slug].field"
-                :status="checkboxes[tag.slug].status"
-                :choice="checkboxes[tag.slug].choice"
-                :disable-focus="!open"
-                @updated="updateTag"
-              />
-            </li>
-          </ol>
-          <div
-            v-if="(!searchTags.length && myTags.length) && !creating"
-            class="apos-apply-tag-menu__empty"
-          >
-            <p class="apos-apply-tag-menu__empty-message">
-              {{ $t('apostrophe:tagNoTagsFoundPerhaps') }}
-              <AposButton
-                :label="{
-                  key: 'apostrophe:tagNoTagsFoundCreateOne',
-                  tag: searchInputValue
-                }"
-                type="quiet"
-                :disabled="disabledCreate"
-                :disable-focus="!open"
-                @click="create"
-              />
-            </p>
-            <span class="apos-apply-tag-menu__empty-icon">
-              🌾
-            </span>
-          </div>
+            <AposCheckbox
+              v-if="checkboxes[tag.slug]"
+              v-model="checked"
+              :field="checkboxes[tag.slug].field"
+              :status="checkboxes[tag.slug].status"
+              :choice="checkboxes[tag.slug].choice"
+              :disable-focus="!open"
+              @updated="updateTag"
+            />
+          </li>
+        </ol>
+        <div
+          v-if="(!searchTags.length && myTags.length) && !creating"
+          class="apos-apply-tag-menu__empty"
+        >
+          <p class="apos-apply-tag-menu__empty-message">
+            {{ $t('apostrophe:tagNoTagsFoundPerhaps') }}
+            <AposButton
+              :label="{
+                key: 'apostrophe:tagNoTagsFoundCreateOne',
+                tag: searchInputValue
+              }"
+              type="quiet"
+              :disabled="disabledCreate"
+              :disable-focus="!open"
+              @click="create"
+            />
+          </p>
+          <span class="apos-apply-tag-menu__empty-icon">
+            🌾
+          </span>
         </div>
-      </transition>
+      </div>
     </div>
   </AposContextMenu>
 </template>
diff --git a/modules/@apostrophecms/ui/ui/apos/stores/notification.js b/modules/@apostrophecms/ui/ui/apos/stores/notification.js
index 06d8f865d6..4e489967ca 100644
--- a/modules/@apostrophecms/ui/ui/apos/stores/notification.js
+++ b/modules/@apostrophecms/ui/ui/apos/stores/notification.js
@@ -118,6 +118,7 @@ export const useNotificationStore = defineStore('notification', () => {
         setTimeout(poll, 50);
       }
     } catch (err) {
+      // eslint-disable-next-line no-console
       console.error(err);
       setTimeout(poll, 5000);
     }
@@ -176,6 +177,7 @@ export const useNotificationStore = defineStore('notification', () => {
         action: jobInfo.value.action || 'batch-update'
       });
     } catch (err) {
+      // eslint-disable-next-line no-console
       console.error(err);
       dismiss(notifId);
     }
diff --git a/modules/@apostrophecms/video-widget/ui/src/index.js b/modules/@apostrophecms/video-widget/ui/src/index.js
index 306b778109..5d1e723d52 100644
--- a/modules/@apostrophecms/video-widget/ui/src/index.js
+++ b/modules/@apostrophecms/video-widget/ui/src/index.js
@@ -81,6 +81,7 @@ export default () => {
       function fail(err) {
         apos.util.removeClass(el, 'apos-oembed-busy');
         apos.util.addClass(el, 'apos-oembed-invalid');
+        // eslint-disable-next-line no-console
         console.error(err);
         if (err !== 'undefined') {
           el.innerHTML = '<p>Error loading video</p>';
diff --git a/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue b/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
index 958d8b9d22..d127793350 100644
--- a/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
+++ b/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
@@ -125,7 +125,6 @@ export default {
       },
       fieldErrors: {},
       modal: {
-        title: this.editLabel,
         active: false,
         type: 'slide',
         width: moduleOptions.width,
@@ -163,7 +162,8 @@ export default {
       }
     },
     schema() {
-      return (this.moduleOptions.schema || []).filter(field => apos.schema.components.fields[field.type]);
+      return (this.moduleOptions.schema || [])
+        .filter(field => apos.schema.components.fields[field.type]);
     },
     isModified() {
       return detectDocChange(this.schema, this.original, this.docFields.data);
diff --git a/modules/@apostrophecms/widget-type/ui/apos/mixins/AposWidgetMixin.js b/modules/@apostrophecms/widget-type/ui/apos/mixins/AposWidgetMixin.js
index 728810ec26..3021204c32 100644
--- a/modules/@apostrophecms/widget-type/ui/apos/mixins/AposWidgetMixin.js
+++ b/modules/@apostrophecms/widget-type/ui/apos/mixins/AposWidgetMixin.js
@@ -76,6 +76,7 @@ export default {
         }, 0);
       } catch (e) {
         this.rendered = '<p>Unable to render this widget.</p>';
+        // eslint-disable-next-line no-console
         console.error('Unable to render widget. Possibly the schema has been changed and the existing widget does not pass validation.', e);
       }
     },

From 901960aa6c87801467b132406109318d0f2f61b0 Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Mon, 24 Mar 2025 10:34:54 +0100
Subject: [PATCH 5/5] linting max-len

---
 modules/@apostrophecms/schema/index.js        | 306 ++++++++++++------
 .../schema/lib/addFieldTypes.js               | 177 +++++++---
 .../ui/apos/components/AposInputArray.vue     |  84 +++--
 3 files changed, 416 insertions(+), 151 deletions(-)

diff --git a/modules/@apostrophecms/schema/index.js b/modules/@apostrophecms/schema/index.js
index f7acd8cad3..be89aafa4c 100644
--- a/modules/@apostrophecms/schema/index.js
+++ b/modules/@apostrophecms/schema/index.js
@@ -2,16 +2,17 @@
 // by specifying the fields that should make them up. Schemas power
 // [@apostrophecms/piece-type](../@apostrophecms/piece-type/index.html),
 // [@apostrophecms/widget-type](../@apostrophecms/widget-type/index.html), custom field
-// types in page settings for [@apostrophecms/page-type](../@apostrophecms/page-type/index.html)
-// and more.
+// types in page settings for
+// [@apostrophecms/page-type](../@apostrophecms/page-type/index.html) and more.
 //
-// A schema is simply an array of "plain old objects." Each object describes one field in the schema
-// via `type`, `name`, `label` and other properties.
+// A schema is simply an array of "plain old objects."
+// Each object describes one field in the schema via `type`, `name`, `label`
+// and other properties.
 //
-// See the [schema guide](../../tutorials/getting-started/schema-guide.html) for a complete
-// overview and list of schema field types. The methods documented here on this page are most often
-// used when you choose to work independently with schemas, such as in a custom project
-// that requires forms.
+// See the [schema guide](../../tutorials/getting-started/schema-guide.html)
+// for a complete overview and list of schema field types. The methods documented
+// here on this page are most often used when you choose to work independently with
+// schemas, such as in a custom project that requires forms.
 
 const _ = require('lodash');
 const { klona } = require('klona');
@@ -57,7 +58,13 @@ module.exports = {
         let schema = [];
 
         // Useful for finding good unit test cases
-        // self.apos.util.log(JSON.stringify(_.pick(options, 'addFields', 'removeFields', 'arrangeFields'), null, '  '));
+        /* self.apos.util.log( */
+        /*   JSON.stringify( */
+        /*     _.pick(options, 'addFields', 'removeFields', 'arrangeFields'), */
+        /*     null, */
+        /*     '  ' */
+        /*   ) */
+        /* ); */
 
         if (options.addFields) {
           // loop over our addFields
@@ -209,7 +216,8 @@ module.exports = {
         if (arrangeFields && arrangeFields.length > 0) {
           // if it's full of strings, use them for the default group
           if (_.isString(arrangeFields[0])) {
-            groups[0].fields = arrangeFields; // if it's full of objects, those are groups, so use them
+            // if it's full of objects, those are groups, so use them
+            groups[0].fields = arrangeFields;
           } else if (_.isPlainObject(arrangeFields[0])) {
             // reset the default group's fields, but keep it around,
             // in case they have fields they forgot to put in a group
@@ -514,12 +522,19 @@ module.exports = {
           // Handle external conditions:
           //  - `if: { 'methodName()': true }`
           //  - `if: { 'moduleName:methodName()': 'expected value' }`
-          // Checking if key ends with a closing parenthesis here to throw later if any argument is passed.
+          // Checking if key ends with a closing parenthesis here to throw
+          // later if any argument is passed.
           if (key.endsWith(')')) {
             let externalConditionResult;
 
             try {
-              externalConditionResult = await self.evaluateMethod(req, key, field.name, field.moduleName, destination._id);
+              externalConditionResult = await self.evaluateMethod(
+                req,
+                key,
+                field.name,
+                field.moduleName,
+                destination._id
+              );
             } catch (error) {
               throw self.apos.error('invalid', error.message);
             }
@@ -565,9 +580,10 @@ module.exports = {
       // Convert submitted `data` object according to `schema`, sanitizing it
       // and populating the appropriate properties of `destination` with it.
       //
-      // Most field types may be converted as plaintext or in the format used for Apostrophe
-      // schema forms, which in most cases is identical to that in which they will be stored
-      // in the database. In Apostrophe 3.x, field converters automatically determine whether they
+      // Most field types may be converted as plaintext or in the
+      // format used for Apostrophe schema forms, which in most cases
+      // is identical to that in which they will be stored in the database.
+      // In Apostrophe 3.x, field converters automatically determine whether they
       // are being given plaintext or form data.
       //
       // If the submission cannot be converted due to an error that can't be
@@ -859,7 +875,15 @@ module.exports = {
         }
       },
 
-      async evaluateMethod(req, methodKey, fieldName, fieldModuleName, docId = null, optionalParenthesis = false, following = {}) {
+      async evaluateMethod(
+        req,
+        methodKey,
+        fieldName,
+        fieldModuleName,
+        docId = null,
+        optionalParenthesis = false,
+        following = {}
+      ) {
         const [ methodDefinition, rest ] = methodKey.split('(');
         const hasParenthesis = rest !== undefined;
 
@@ -891,7 +915,16 @@ module.exports = {
       //
       // All arguments must be present, however fieldsStorage
       // may be undefined to indicate none is needed.
-      async relationshipDriver(req, method, reverse, items, idsStorage, fieldsStorage, objectField, options) {
+      async relationshipDriver(
+        req,
+        method,
+        reverse,
+        items,
+        idsStorage,
+        fieldsStorage,
+        objectField,
+        options
+      ) {
         if (!options) {
           options = {};
         }
@@ -922,25 +955,28 @@ module.exports = {
       // Fetch all the relationships in the schema on the specified object or array
       // of objects. The withRelationships option may be omitted.
       //
-      // If withRelationships is omitted, null or undefined, all the relationships in the schema
-      // are performed, and also any relationships specified by the 'withRelationships' option of
-      // each relationship field in the schema, if any. And that's where it stops. Infinite
-      // recursion is not possible.
+      // If withRelationships is omitted, null or undefined, all the relationships
+      // in the schema are performed, and also any relationships specified by the
+      // 'withRelationships' option of each relationship field in the schema, if any.
+      // And that's where it stops. Infinite recursion is not possible.
       //
-      // If withRelationships is specified and set to "false", no relationships at all are performed.
+      // If withRelationships is specified and set to "false",
+      // no relationships at all are performed.
       //
-      // If withRelationships is set to an array of relationship names found in the schema, then
-      // only those relationships are performed, ignoring any 'withRelationships' options found in
-      // the schema.
+      // If withRelationships is set to an array of relationship names found
+      // in the schema, then only those relationships are performed, ignoring any
+      // 'withRelationships' options found in the schema.
       //
-      // If a relationship name in the withRelationships array uses dot notation, like this:
+      // If a relationship name in the withRelationships array uses dot notation,
+      // like this:
       //
       // _events._locations
       //
-      // Then the related events are fetched, and the locations related to those events are fetched,
-      // assuming that _events is defined as a relationship in the
-      // original schema and _locations is defined as a relationship in the schema for the events
-      // module. Multiple "dot notation" relationships may share a prefix.
+      // Then the related events are fetched, and the locations related to
+      // those events are fetched, assuming that _events is defined as a relationship
+      // in the original schema and _locations is defined as a relationship in the
+      // schema for the events module. Multiple "dot notation" relationships
+      // may share a prefix.
       //
       // Relationships are also supported in the schemas of array fields.
 
@@ -999,11 +1035,12 @@ module.exports = {
         findRelationships(schema, []);
 
         // The withRelationships option allows restriction of relationships. Set to false
-        // it blocks all relationships. Set to an array, it allows the relationships named within.
-        // Dot notation can be used to specify relationships in array properties,
-        // or relationships reached via other relationships.
+        // it blocks all relationships. Set to an array, it allows the relationships
+        // named within. Dot notation can be used to specify relationships
+        // in array properties, or relationships reached via other relationships.
         //
-        // By default, all configured relationships will take place, but withRelationships: false
+        // By default, all configured relationships will take place, but
+        // withRelationships: false
         // will be passed when fetching the objects on the other end of the relationship,
         // so that infinite recursion never takes place.
 
@@ -1022,7 +1059,9 @@ module.exports = {
                 if (!withRelationshipsNext[dotPath]) {
                   withRelationshipsNext[dotPath] = [];
                 }
-                withRelationshipsNext[dotPath].push(withRelationshipName.substr(dotPath.length + 1));
+                withRelationshipsNext[dotPath].push(
+                  withRelationshipName.substr(dotPath.length + 1)
+                );
                 winner = true;
               }
             });
@@ -1034,7 +1073,8 @@ module.exports = {
           // have configured for those
           _.each(relationships, function (relationship) {
             if (relationship.withRelationships) {
-              withRelationshipsNext[relationship._dotPath] = relationship.withRelationships;
+              withRelationshipsNext[relationship._dotPath] = relationship
+                .withRelationships;
             }
           });
         }
@@ -1056,9 +1096,10 @@ module.exports = {
               }
               const find = manager.find;
 
+              const relationships = withRelationshipsNext[relationship._dotPath] || false;
               const options = {
                 find,
-                builders: { relationships: withRelationshipsNext[relationship._dotPath] || false }
+                builders: { relationships }
               };
               const subname = relationship.name + ':' + type;
               const _relationship = _.assign({}, relationship, {
@@ -1076,12 +1117,14 @@ module.exports = {
               }
               await self.apos.util.recursionGuard(req, `${_relationship.type}:${_relationship.withType}`, () => {
                 // Allow options to the getter to be specified in the schema,
-                return self.fieldTypes[_relationship.type].relate(req, _relationship, _objects, options);
+                return self.fieldTypes[_relationship.type]
+                  .relate(req, _relationship, _objects, options);
               });
               _.each(_objects, function (object) {
                 if (object[subname]) {
                   if (Array.isArray(object[subname])) {
-                    object[relationship.name] = (object[relationship.name] || []).concat(object[subname]);
+                    object[relationship.name] = (object[relationship.name] || [])
+                      .concat(object[subname]);
                   } else {
                     object[relationship.name] = object[subname];
                   }
@@ -1109,9 +1152,10 @@ module.exports = {
           // If it has a getter, use it, otherwise supply one
           const find = manager.find;
 
+          const relationships = withRelationshipsNext[relationship._dotPath] || false;
           const options = {
             find,
-            builders: { relationships: withRelationshipsNext[relationship._dotPath] || false }
+            builders: { relationships }
           };
 
           // Allow options to the get() method to be
@@ -1122,8 +1166,8 @@ module.exports = {
 
           // If there is a projection for a reverse relationship, make sure it includes
           // the idsStorage and fieldsStorage for the relationship, otherwise no related
-          // documents will be returned. Make sure the projection is positive, not negative,
-          // before attempting to add more positive assertions to it
+          // documents will be returned. Make sure the projection is positive,
+          // not negative, before attempting to add more positive assertions to it
           if ((relationship.type === 'relationshipReverse') && options.builders.project && Object.values(options.builders.project).some(v => !!v)) {
             if (relationship.idsStorage) {
               options.builders.project[relationship.idsStorage] = 1;
@@ -1135,7 +1179,8 @@ module.exports = {
 
           // Allow options to the getter to be specified in the schema
           await self.apos.util.recursionGuard(req, `${relationship.type}:${relationship.withType}`, () => {
-            return self.fieldTypes[relationship.type].relate(req, relationship, _objects, options);
+            return self.fieldTypes[relationship.type]
+              .relate(req, relationship, _objects, options);
           });
         }
 
@@ -1178,11 +1223,21 @@ module.exports = {
 
       prepareForStorage(req, doc, options = {}) {
         const can = (field) => {
+          const canEdit = self.apos.permission.can(
+            req,
+            field.editPermission.action,
+            field.editPermission.type
+          );
+          const canView = self.apos.permission.can(
+            req,
+            field.viewPermission.action,
+            field.viewPermission.type
+          );
           return options.permissions === false ||
             (!field.withType && !field.editPermission && !field.viewPermission) ||
             (field.withType && self.apos.permission.can(req, 'view', field.withType)) ||
-            (field.editPermission && self.apos.permission.can(req, field.editPermission.action, field.editPermission.type)) ||
-            (field.viewPermission && self.apos.permission.can(req, field.viewPermission.action, field.viewPermission.type)) ||
+            (field.editPermission && canEdit) ||
+            (field.viewPermission && canView) ||
             false;
         };
 
@@ -1209,7 +1264,8 @@ module.exports = {
               return;
             }
 
-            doc[field.idsStorage] = doc[field.name].map(relatedDoc => self.apos.doc.toAposDocId(relatedDoc));
+            doc[field.idsStorage] = doc[field.name]
+              .map(relatedDoc => self.apos.doc.toAposDocId(relatedDoc));
             if (field.fieldsStorage) {
               const fieldsById = doc[field.fieldsStorage] || {};
               for (const relatedDoc of doc[field.name]) {
@@ -1248,14 +1304,15 @@ module.exports = {
       //
       // ### `name`
       //
-      // Required. The name of the field type, such as `select`. Use a unique prefix to avoid
-      // collisions with future official Apostrophe field types.
+      // Required. The name of the field type, such as `select`. Use a unique prefix
+      // to avoid collisions with future official Apostrophe field types.
       //
       // ### `convert`
       //
-      // Required. An `async` function which takes `(req, field, data, destination)`. The value
-      // of the field is drawn from the untrusted input object `data` and sanitized
-      // if possible, then copied to the appropriate property (or properties) of `destination`.
+      // Required. An `async` function which takes `(req, field, data, destination)`.
+      // The value of the field is drawn from the untrusted input object `data` and
+      // sanitized if possible, then copied to the appropriate
+      // property (or properties) of `destination`.
       //
       // `field` contains the schema field definition, useful to access
       // `def`, `min`, `max`, etc.
@@ -1280,7 +1337,11 @@ module.exports = {
       // ```javascript
       // index: function(value, field, texts) {
       //   const silent = (field.silent === undefined) ? true : field.silent;
-      //   texts.push({ weight: field.weight || 15, text: (value || []).join(' '), silent: silent });
+      //   texts.push({
+      //    weight: field.weight || 15,
+      //    text: (value || []).join(' '),
+      //    silent: silent
+      //  });
       // }
       // ```
       //
@@ -1298,7 +1359,8 @@ module.exports = {
         // we need to accept it, and even keep the property around
         // for bc with those extending in sneaky ways
         if (fieldType.converters) {
-          fieldType.converters.string = fieldType.converters.string || fieldType.converters.csv;
+          fieldType.converters.string = fieldType.converters.string ||
+            fieldType.converters.csv;
           fieldType.converters.csv = fieldType.converters.string;
           // Allow a field type to reuse another converter by specifying
           // its name. Allows 'form' to expressly reuse 'string'
@@ -1349,16 +1411,18 @@ module.exports = {
       },
 
       // You don't need to call this. It returns an async function that, when later called
-      // with no arguments, will give you query builder choices based on the given field, query
-      // and value field of interest. Relationship field types use this method to implement
-      // their query builder `choices`.
+      // with no arguments, will give you query builder choices based on the given field,
+      // query and value field of interest. Relationship field types use this method to
+      // implement their query builder `choices`.
 
       relationshipQueryBuilderChoices(field, query, valueField) {
         return async function () {
           const idsStorage = field.idsStorage;
           const ids = await query.toDistinct(idsStorage);
           const manager = self.apos.doc.getManager(field.withType);
-          const relationshipQuery = manager.find(query.req, { aposDocId: { $in: ids } }).project(manager.getRelationshipQueryBuilderChoicesProjection({ field }));
+          const relationshipQuery = manager
+            .find(query.req, { aposDocId: { $in: ids } })
+            .project(manager.getRelationshipQueryBuilderChoicesProjection({ field }));
           if (field.builders) {
             relationshipQuery.applyBuilders(field.builders);
           }
@@ -1379,12 +1443,13 @@ module.exports = {
       //
       // If you named your relationship properly (leading _), you also get a query builder
       // *without* the `_` that accepts slugs rather than ids - it's suitable
-      // for public use in URLs (and it's good naming because the public would find the _ weird).
+      // for public use in URLs (and it's good naming because the public would
+      // find the _ weird).
       //
       // If you're wondering, you should have had the leading _ anyway to keep it from
-      // persisting the loaded data for the relationship back to your doc, which could easily blow
-      // mongodb's doc size limit and in any case is out of data info in your database.
-      //
+      // persisting the loaded data for the relationship back to your doc, which could
+      // easily blow mongodb's doc size limit and in any case is out of data
+      // info in your database.
 
       addRelationshipSlugQueryBuilder(field, query, suffix) {
 
@@ -1411,7 +1476,10 @@ module.exports = {
               query.set(name + suffix, undefined);
               return;
             }
-            const relationshipQuery = self.apos.doc.getManager(field.withType).find(query.req).relationships(false).areas(false);
+            const relationshipQuery = self.apos.doc.getManager(field.withType)
+              .find(query.req)
+              .relationships(false)
+              .areas(false);
             const criteria = {};
             // Even programmers appreciate shortcuts, so it's not enough that the
             // sanitizer (which doesn't apply to programmatic use) accepts these
@@ -1464,8 +1532,8 @@ module.exports = {
 
       // Validate a schema for errors. This is about validating the schema itself,
       // not a data object. For instance, a field without a type property is flagged.
-      // Serious errors throw an exception, while certain lesser errors just print a message
-      // to stderr for bc.
+      // Serious errors throw an exception, while certain lesser errors just print
+      // a message to stderr for bc.
       //
       // This method may also prevent errors by automatically supplying
       // reasonable values for certain properties, such as the `idsStorage` property
@@ -1504,7 +1572,11 @@ module.exports = {
         if (field.if && field.if.$or && !Array.isArray(field.if.$or)) {
           fail(`$or conditional must be an array of conditions. Current $or configuration: ${JSON.stringify(field.if.$or)}`);
         }
-        if (field.requiredIf && field.requiredIf.$or && !Array.isArray(field.requiredIf.$or)) {
+        if (
+          field.requiredIf &&
+          field.requiredIf.$or &&
+          !Array.isArray(field.requiredIf.$or)
+        ) {
           fail(`$or conditional must be an array of conditions. Current $or configuration: ${JSON.stringify(field.requiredIf.$or)}`);
         }
         if (!field.editPermission && field.permission) {
@@ -1564,12 +1636,12 @@ module.exports = {
         ]);
       },
 
-      // Recursively register the given schema, giving each field an _id and making provision to be able to
-      // fetch its definition via apos.schema.getFieldById().
+      // Recursively register the given schema, giving each field an _id and making
+      // provision to be able to fetch its definition via apos.schema.getFieldById().
       //
-      // metaType and type refer to the doc or widget that ultimately contains this schema,
-      // even if it is nested as an array schema. `metaType` will be "doc" or "widget"
-      // and `type` will be the type name. This is used to dynamically assign
+      // metaType and type refer to the doc or widget that ultimately contains this
+      // schema, even if it is nested as an array schema. `metaType` will be "doc"
+      // or "widget" and `type` will be the type name. This is used to dynamically assign
       // sufficiently unique `arrayName` properties to array fields and may be used
       // for similar scoping tasks.
 
@@ -1589,9 +1661,9 @@ module.exports = {
           }
         }
       },
-      // Fetch a schema field definition by its _id. The _id comes into being at afterInit time and is used
-      // later to determine the options for widgets nested in areas when rendering a newly added widget in
-      // the context of a modal.
+      // Fetch a schema field definition by its _id. The _id comes into being at
+      // afterInit time and is used later to determine the options for widgets nested in
+      // areas when rendering a newly added widget in the context of a modal.
       getFieldById(_id) {
         return self.fieldsById[_id];
       },
@@ -1620,9 +1692,14 @@ module.exports = {
         } else if (patch.$pullAll) {
           _.each(patch.$pullAll, function(val, key) {
             cloneOriginalBase(key);
-            self.apos.util.set(patch, key, _.differenceWith(self.apos.util.get(patch, key) || [], Array.isArray(val) ? val : [], function(a, b) {
-              return _.isEqual(a, b);
-            }));
+            self.apos.util.set(
+              patch,
+              key,
+              _.differenceWith(
+                self.apos.util.get(patch, key) || [],
+                Array.isArray(val) ? val : [],
+                (a, b) => _.isEqual(a, b))
+            );
           });
         } else if (patch.$pullAllById) {
           _.each(patch.$pullAllById, function(val, key) {
@@ -1630,9 +1707,14 @@ module.exports = {
             if (!Array.isArray(val)) {
               val = [ val ];
             }
-            self.apos.util.set(patch, key, _.differenceWith(self.apos.util.get(patch, key) || [], Array.isArray(val) ? val : [], function(a, b) {
-              return a._id === b;
-            }));
+            self.apos.util.set(
+              patch,
+              key,
+              _.differenceWith(
+                self.apos.util.get(patch, key) || [],
+                Array.isArray(val) ? val : [],
+                (a, b) => a._id === b
+              ));
           });
         } else if (patch.$move) {
           _.each(patch.$move, function(val, key) {
@@ -1719,7 +1801,10 @@ module.exports = {
               } else {
                 position = existing.length;
               }
-              const updated = existing.slice(0, position).concat(each).concat(existing.slice(position));
+              const updated = existing
+                .slice(0, position)
+                .concat(each)
+                .concat(existing.slice(position));
               self.apos.util.set(patch, key, updated);
             } else {
               const existing = self.apos.util.get(patch, key) || [];
@@ -1735,7 +1820,11 @@ module.exports = {
             if (dot !== -1) {
               _id = _id.substring(0, dot);
             }
-            const result = self.apos.util.findNestedObjectAndDotPathById(existingPage, _id, { ignoreDynamicProperties: true });
+            const result = self.apos.util.findNestedObjectAndDotPathById(
+              existingPage,
+              _id,
+              { ignoreDynamicProperties: true }
+            );
             if (!result) {
               throw self.apos.error('invalid', {
                 '@path': key
@@ -1758,9 +1847,9 @@ module.exports = {
         }
       },
 
-      // Given a `patch` containing mongo-style patch operators like `$push`, return a subset
-      // of `schema` containing the root fields that would ultimately be updated by
-      // those operations.
+      // Given a `patch` containing mongo-style patch operators like `$push`,
+      // return a subset of `schema` containing the root fields that would ultimately
+      // be updated by those operations.
       subsetSchemaForPatch(schema, patch) {
         const idsStorageFields = {};
         schema.forEach(function(field) {
@@ -1768,7 +1857,10 @@ module.exports = {
             idsStorageFields[field.idsStorage] = field.name;
           }
         });
-        return self.apos.schema.subset(schema, _.map(_.keys(patch).concat(operatorKeys()), idsStorageFieldToSchemaField));
+        return self.apos.schema.subset(
+          schema,
+          _.map(_.keys(patch).concat(operatorKeys()), idsStorageFieldToSchemaField)
+        );
         function operatorKeys() {
           return _.uniq(_.flatten(
             _.map([ '$push', '$pullAll', '$pullAllById' ], function(o) {
@@ -1796,7 +1888,6 @@ module.exports = {
             ...fields[name]
           };
           const fieldTypesWithSchemas = [ 'object', 'array', 'relationship' ];
-          // TODO same for relationship schemas but they are being refactored in another PR
           if (fieldTypesWithSchemas.includes(field.type)) {
             if (field.type !== 'relationship' && !field.fields) {
               throw new Error(`${context}: the subfield ${name} requires a 'fields' property, with an 'add' subproperty containing its own fields.`);
@@ -1999,7 +2090,15 @@ module.exports = {
               level--;
             }
           }
-          const result = await self.evaluateMethod(req, field.choices, field.name, field.moduleName, null, true, following);
+          const result = await self.evaluateMethod(
+            req,
+            field.choices,
+            field.name,
+            field.moduleName,
+            null,
+            true,
+            following
+          );
           return result;
         } catch (error) {
           throw self.apos.error('invalid', error.message);
@@ -2088,7 +2187,15 @@ module.exports = {
           }
         }
         try {
-          choices = await self.evaluateMethod(req, field.choices, field.name, field.moduleName, docId, true, following);
+          choices = await self.evaluateMethod(
+            req,
+            field.choices,
+            field.name,
+            field.moduleName,
+            docId,
+            true,
+            following
+          );
         } catch (error) {
           throw self.apos.error('invalid', error.message);
         }
@@ -2121,7 +2228,13 @@ module.exports = {
             throw self.apos.error('forbidden', `${conditionKey} is not registered as an external condition.`);
           }
           try {
-            const result = await self.evaluateMethod(req, conditionKey, field.name, field.moduleName, docId);
+            const result = await self.evaluateMethod(
+              req,
+              conditionKey,
+              field.name,
+              field.moduleName,
+              docId
+            );
             return { result };
           } catch (error) {
             throw self.apos.error('invalid', error.message);
@@ -2144,7 +2257,8 @@ module.exports = {
           let component = self.fieldTypes[name].vueComponent;
           // If explicitly false, it intentionally has no UI at all
           if (component !== false) {
-            // Otherwise fall back to the standard naming pattern if not otherwise specified
+            // Otherwise fall back to the standard naming pattern
+            // if not otherwise specified
             component = component || 'AposInput' + self.apos.util.capitalizeFirst(name);
           }
           fields[name] = component;
@@ -2161,8 +2275,13 @@ module.exports = {
 
 function getFieldExternalConditionKeys(field) {
   const conditionTypes = [ 'if', 'requiredIf' ];
+  const getConditionKeys = conditionType => getConditionTypeExternalConditionKeys(
+    field[conditionType] || {}
+  );
   return [
-    ...new Set(conditionTypes.map(conditionType => getConditionTypeExternalConditionKeys(field[conditionType] || {})).flat())
+    ...new Set(conditionTypes
+      .map(getConditionKeys)
+      .flat())
   ];
 }
 
@@ -2173,7 +2292,10 @@ function getConditionTypeExternalConditionKeys(conditions) {
   }
   for (const key of Object.keys(conditions)) {
     if (key === '$or') {
-      results = [ ...results, conditions.$or.map(getConditionTypeExternalConditionKeys).flat() ];
+      results = [
+        ...results,
+        conditions.$or.map(getConditionTypeExternalConditionKeys).flat()
+      ];
     } else {
       if (key.endsWith('()')) {
         results.push(key);
diff --git a/modules/@apostrophecms/schema/lib/addFieldTypes.js b/modules/@apostrophecms/schema/lib/addFieldTypes.js
index 77ca432aee..cc012a1d0a 100644
--- a/modules/@apostrophecms/schema/lib/addFieldTypes.js
+++ b/modules/@apostrophecms/schema/lib/addFieldTypes.js
@@ -11,7 +11,9 @@ module.exports = (self) => {
     name: 'area',
     async convert(req, field, data, destination, { fetchRelationships = true } = {}) {
       const options = { fetchRelationships };
-      const _id = self.apos.launder.id(data[field.name] && data[field.name]._id) || self.apos.util.generateId();
+      const _id = self.apos.launder.id(
+        data[field.name] && data[field.name]._id
+      ) || self.apos.util.generateId();
       if (typeof data[field.name] === 'string') {
         destination[field.name] = self.apos.area.fromPlaintext(data[field.name]);
         return;
@@ -109,11 +111,18 @@ module.exports = (self) => {
     name: 'string',
     convert(req, field, data, destination) {
       destination[field.name] = self.apos.launder.string(data[field.name]);
-      destination[field.name] = checkStringLength(destination[field.name], field.min, field.max);
+      destination[field.name] = checkStringLength(
+        destination[field.name],
+        field.min,
+        field.max
+      );
       // If field is required but empty (and client side didn't catch that)
       // This is new and until now if JS client side failed, then it would
       // allow the save with empty values -Lars
-      if (field.required && (_.isUndefined(data[field.name]) || !data[field.name].toString().length)) {
+      if (
+        field.required &&
+        (_.isUndefined(data[field.name]) || !data[field.name].toString().length)
+      ) {
         throw self.apos.error('required');
       }
 
@@ -177,7 +186,10 @@ module.exports = (self) => {
     convert (req, field, data, destination) {
       const options = self.getSlugFieldOptions(field, data);
 
-      destination[field.name] = self.apos.util.slugify(self.apos.launder.string(data[field.name]), options);
+      destination[field.name] = self.apos.util.slugify(
+        self.apos.launder.string(data[field.name]),
+        options
+      );
 
       if (field.page) {
         if (!(destination[field.name].charAt(0) === '/')) {
@@ -200,7 +212,12 @@ module.exports = (self) => {
             if (field.page) {
               slugifyOptions = { allow: '/' };
             }
-            criteria[field.name] = new RegExp(self.apos.util.regExpQuote(self.apos.util.slugify(query.get(field.name), slugifyOptions)));
+            criteria[field.name] = new RegExp(
+              self.apos.util.regExpQuote(
+                self.apos.util.slugify(query.get(field.name),
+                  slugifyOptions)
+              )
+            );
             query.and(criteria);
           }
         },
@@ -312,7 +329,8 @@ module.exports = (self) => {
           if (self.queryBuilderInterested(query, field.name)) {
             const criteria = {};
             let v = query.get(field.name);
-            // Allow programmers to pass just one value too (sanitize doesn't apply to them)
+            // Allow programmers to pass just one value too
+            // (sanitize doesn't apply to them)
             if (!Array.isArray(v)) {
               v = [ v ];
             }
@@ -366,7 +384,8 @@ module.exports = (self) => {
           if (self.queryBuilderInterested(query, field.name)) {
             const criteria = {};
             let v = query.get(field.name);
-            // Allow programmers to pass just one value too (sanitize doesn't apply to them)
+            // Allow programmers to pass just one value too
+            // (sanitize doesn't apply to them)
             if (!Array.isArray(v)) {
               v = [ v ];
             }
@@ -406,15 +425,24 @@ module.exports = (self) => {
     name: 'integer',
     vueComponent: 'AposInputString',
     async convert(req, field, data, destination) {
-      destination[field.name] = self.apos.launder.integer(data[field.name], undefined, field.min, field.max);
-      if (field.required && ((data[field.name] == null) || !data[field.name].toString().length)) {
+      destination[field.name] = self.apos.launder.integer(
+        data[field.name],
+        undefined,
+        field.min,
+        field.max
+      );
+      if (
+        field.required &&
+        ((data[field.name] == null) || !data[field.name].toString().length)
+      ) {
         throw self.apos.error('required');
       }
       if (data[field.name] && isNaN(parseFloat(data[field.name]))) {
         throw self.apos.error('invalid');
       }
-      // This makes it possible to have a field that is not required, but min / max defined.
-      // This allows the form to be saved and sets the value to null if no value was given by
+      // This makes it possible to have a field that is not required,
+      // but min / max defined. This allows the form to be saved and
+      // sets the value to null if no value was given by
       // the user.
       if (!data[field.name] && data[field.name] !== 0) {
         destination[field.name] = null;
@@ -460,8 +488,16 @@ module.exports = (self) => {
     name: 'float',
     vueComponent: 'AposInputString',
     async convert(req, field, data, destination) {
-      destination[field.name] = self.apos.launder.float(data[field.name], undefined, field.min, field.max);
-      if (field.required && (_.isUndefined(data[field.name]) || !data[field.name].toString().length)) {
+      destination[field.name] = self.apos.launder.float(
+        data[field.name],
+        undefined,
+        field.min,
+        field.max
+      );
+      if (
+        field.required &&
+        (_.isUndefined(data[field.name]) || !data[field.name].toString().length)
+      ) {
         throw self.apos.error('required');
       }
       if (data[field.name] && isNaN(parseFloat(data[field.name]))) {
@@ -533,7 +569,10 @@ module.exports = (self) => {
     async convert(req, field, data, destination) {
       destination[field.name] = self.apos.launder.url(data[field.name], undefined, true);
 
-      if (field.required && (data[field.name] == null || !data[field.name].toString().length)) {
+      if (
+        field.required &&
+        (data[field.name] == null || !data[field.name].toString().length)
+      ) {
         throw self.apos.error('required');
       }
 
@@ -688,7 +727,11 @@ module.exports = (self) => {
       if (data[field.name]) {
         destination[field.name] = self.apos.launder.string(data[field.name]);
 
-        destination[field.name] = checkStringLength(destination[field.name], field.min, field.max);
+        destination[field.name] = checkStringLength(
+          destination[field.name],
+          field.min,
+          field.max
+        );
       }
     },
     def: ''
@@ -702,15 +745,23 @@ module.exports = (self) => {
     name: 'range',
     vueComponent: 'AposInputRange',
     async convert(req, field, data, destination) {
-      destination[field.name] = self.apos.launder.float(data[field.name], undefined, field.min, field.max);
-      if (field.required && (_.isUndefined(data[field.name]) || !data[field.name].toString().length)) {
+      destination[field.name] = self.apos.launder.float(
+        data[field.name],
+        undefined,
+        field.min,
+        field.max
+      );
+      if (
+        field.required &&
+        (_.isUndefined(data[field.name]) || !data[field.name].toString().length)
+      ) {
         throw self.apos.error('required');
       }
       if (data[field.name] && isNaN(parseFloat(data[field.name]))) {
         throw self.apos.error('invalid');
       }
-      // Allow for ranges to go unset
-      // `min` here does not imply requirement, it is the minimum value the range UI will represent
+      // Allow for ranges to go unset `min` here does not imply requirement,
+      // it is the minimum value the range UI will represent
       if (
         typeof destination[field.name] !== 'number' ||
         data[field.name] < field.min ||
@@ -766,7 +817,8 @@ module.exports = (self) => {
       const errors = [];
       for (const datum of data) {
         const _id = self.apos.launder.id(datum._id) || self.apos.util.generateId();
-        const [ found ] = destination[field.name]?.filter?.(item => item._id === _id) || [];
+        const [ found ] = destination[field.name]
+          ?.filter?.(item => item._id === _id) || [];
         const result = {
           ...(found || {}),
           _id
@@ -803,7 +855,8 @@ module.exports = (self) => {
         throw self.apos.error('max');
       }
       if (data.length && field.schema && field.schema.length) {
-        const { name: uniqueFieldName, label: uniqueFieldLabel } = field.schema.find(subfield => subfield.unique) || [];
+        const { name: uniqueFieldName, label: uniqueFieldLabel } = field.schema
+          .find(subfield => subfield.unique) || [];
         if (uniqueFieldName) {
           const duplicates = data
             .map(item => (Array.isArray(item[uniqueFieldName])
@@ -1017,7 +1070,13 @@ module.exports = (self) => {
 
           const _fields = {};
           if (field.schema?.length) {
-            await self.convert(req, field.schema, relation._fields || {}, _fields, options);
+            await self.convert(
+              req,
+              field.schema,
+              relation._fields || {},
+              _fields,
+              options
+            );
           }
 
           destination[field.name].push({
@@ -1058,12 +1117,16 @@ module.exports = (self) => {
         destination[field.name] = [];
         return;
       }
-      const results = await manager.find(req, { $or: clauses }).relationships(false).toArray();
+      const results = await manager
+        .find(req, { $or: clauses })
+        .relationships(false)
+        .toArray();
       // Must maintain input order. Also discard things not actually found in the db
       const actualDocs = [];
       for (const item of input) {
         if ((typeof item) === 'string') {
-          const result = results.find(result => (result.title === item) || (result._id === item));
+          const result = results
+            .find(result => (result.title === item) || (result._id === item));
           if (result) {
             actualDocs.push(result);
           }
@@ -1071,14 +1134,22 @@ module.exports = (self) => {
           const result = results.find(doc => (doc._id === item._id));
           if (result) {
             if (field.schema) {
-              const destItem = (Array.isArray(destination[field.name]) ? destination[field.name] : [])
-                .find((doc) => doc._id === item._id);
+              const destArray = Array.isArray(destination[field.name])
+                ? destination[field.name]
+                : [];
+              const destItem = destArray.find((doc) => doc._id === item._id);
               result._fields = {
                 ...destItem?._fields || {}
               };
 
               if (item && ((typeof item._fields === 'object'))) {
-                await self.convert(req, field.schema, item._fields || {}, result._fields, options);
+                await self.convert(
+                  req,
+                  field.schema,
+                  item._fields || {},
+                  result._fields,
+                  options
+                );
               }
             }
             actualDocs.push(result);
@@ -1159,8 +1230,8 @@ module.exports = (self) => {
         field.idsStorage = field.name.replace(/^_/, '') + 'Ids';
       }
       if (!field.withType) {
-        // Try to supply reasonable value based on relationship name. Relationship name will be plural,
-        // so consider that too
+        // Try to supply reasonable value based on relationship name.
+        // Relationship name will be plural, so consider that too
         const withType = field.name.replace(/^_/, '').replace(/s$/, '');
         if (!_.find(self.apos.doc.managers, { name: withType })) {
           fail('withType property is missing. Hint: it must match the name of a doc type module. Or omit it and give your relationship the same name as the other type, with a leading _ and optional trailing s.');
@@ -1178,15 +1249,24 @@ module.exports = (self) => {
         lintType(field.withType);
         const withTypeManager = self.apos.doc.getManager(field.withType);
         field.editor = field.editor || withTypeManager.options.relationshipEditor;
-        field.postprocessor = field.postprocessor || withTypeManager.options.relationshipPostprocessor;
-        field.editorLabel = field.editorLabel || withTypeManager.options.relationshipEditorLabel;
-        field.editorIcon = field.editorIcon || withTypeManager.options.relationshipEditorIcon;
-        field.suggestionLabel = field.suggestionLabel || withTypeManager.options.relationshipSuggestionLabel;
-        field.suggestionHelp = field.suggestionHelp || withTypeManager.options.relationshipSuggestionHelp;
-        field.suggestionLimit = field.suggestionLimit || withTypeManager.options.relationshipSuggestionLimit;
-        field.suggestionSort = field.suggestionSort || withTypeManager.options.relationshipSuggestionSort;
-        field.suggestionIcon = field.suggestionIcon || withTypeManager.options.relationshipSuggestionIcon;
-        field.suggestionFields = field.suggestionFields || withTypeManager.options.relationshipSuggestionFields;
+        field.postprocessor = field.postprocessor ||
+          withTypeManager.options.relationshipPostprocessor;
+        field.editorLabel = field.editorLabel ||
+          withTypeManager.options.relationshipEditorLabel;
+        field.editorIcon = field.editorIcon ||
+          withTypeManager.options.relationshipEditorIcon;
+        field.suggestionLabel = field.suggestionLabel ||
+          withTypeManager.options.relationshipSuggestionLabel;
+        field.suggestionHelp = field.suggestionHelp ||
+          withTypeManager.options.relationshipSuggestionHelp;
+        field.suggestionLimit = field.suggestionLimit ||
+          withTypeManager.options.relationshipSuggestionLimit;
+        field.suggestionSort = field.suggestionSort ||
+          withTypeManager.options.relationshipSuggestionSort;
+        field.suggestionIcon = field.suggestionIcon ||
+          withTypeManager.options.relationshipSuggestionIcon;
+        field.suggestionFields = field.suggestionFields ||
+          withTypeManager.options.relationshipSuggestionFields;
 
         if (!field.schema && !Array.isArray(field.withType)) {
           const fieldsOption = withTypeManager.options.relationshipFields;
@@ -1247,9 +1327,21 @@ module.exports = (self) => {
     vueComponent: false,
     relate: async function (req, field, objects, options) {
       if ((!self.apos.doc?.replicateReached) && (!field.idsStorage)) {
-        self.apos.util.warnDevOnce('premature-relationship-query', 'Database queries for types with relationships may fail if made before the @apostrophecms/doc:beforeReplicate event');
+        self.apos.util.warnDevOnce(
+          'premature-relationship-query',
+          'Database queries for types with relationships may fail if made before the @apostrophecms/doc:beforeReplicate event'
+        );
       }
-      return self.relationshipDriver(req, joinr.byArrayReverse, true, objects, field.idsStorage, field.fieldsStorage, field.name, options);
+      return self.relationshipDriver(
+        req,
+        joinr.byArrayReverse,
+        true,
+        objects,
+        field.idsStorage,
+        field.fieldsStorage,
+        field.name,
+        options
+      );
     },
     validate: function (field, options, warn, fail) {
       let forwardRelationship;
@@ -1264,7 +1356,10 @@ module.exports = (self) => {
         }
         field.withType = withType;
       }
-      const otherModule = _.find(self.apos.doc.managers, { name: self.apos.doc.normalizeType(field.withType) });
+      const otherModule = _.find(
+        self.apos.doc.managers,
+        { name: self.apos.doc.normalizeType(field.withType) }
+      );
       if (!otherModule) {
         fail('withType property, ' + field.withType + ', does not match the name of a piece or page type module.');
       }
diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputArray.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputArray.vue
index 2efb5fc75c..561482a79a 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposInputArray.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposInputArray.vue
@@ -21,14 +21,20 @@
     >
       <div class="apos-input-array-inline-all-controls">
         <AposButton
-          class="apos-input-array-inline-all-control apos-input-array-inline-all-control--expand"
+          class="
+            apos-input-array-inline-all-control
+            apos-input-array-inline-all-control--expand
+          "
           label="apostrophe:expandAll"
           type="subtle"
           :modifiers="['inline', 'no-motion']"
           @click="toggleAll(true)"
         />
         <AposButton
-          class="apos-input-array-inline-all-control apos-input-array-inline-all-control--collapse"
+          class="
+            apos-input-array-inline-all-control
+            apos-input-array-inline-all-control--collapse
+          "
           label="apostrophe:collapseAll"
           type="subtle"
           :modifiers="['inline', 'no-motion']"
@@ -66,7 +72,10 @@
                 v-for="subfield in visibleSchema()"
                 :key="subfield._id"
                 class="apos-input-array-inline-table-header-cell"
-                :class="getTableHeaderClass(subfield, 'apos-input-array-inline-table-header-cell')"
+                :class="getTableHeaderClass(
+                  subfield,
+                  'apos-input-array-inline-table-header-cell'
+                )"
                 :style="subfield.columnStyle || {}"
               >
                 {{ $t(subfield.label) }}
@@ -109,20 +118,34 @@
                 field-style="table"
                 @update:model-value="setItemsConditionalFields(item._id)"
                 @validate="emitValidate()"
-                @keydown.space="isDraggable ? toggleEngage($event, { exact: true, prevent: true }) : {}"
-                @keydown.enter="isDraggable ? toggleEngage($event, { exact: true, prevent: true }) : {}"
-                @keydown.arrow-up="isDraggable ? moveEngaged($event, item._id, -1, { prevent: true }) : {}"
-                @keydown.arrow-down="isDraggable ? moveEngaged($event, item._id, 1, { prevent: true }) : {}"
+                @keydown.space="isDraggable
+                  ? toggleEngage($event, { exact: true, prevent: true })
+                  : {}"
+                @keydown.enter="isDraggable
+                  ? toggleEngage($event, { exact: true, prevent: true })
+                  : {}"
+                @keydown.arrow-up="isDraggable
+                  ? moveEngaged($event, item._id, -1, { prevent: true })
+                  : {}"
+                @keydown.arrow-down="isDraggable
+                  ? moveEngaged($event, item._id, 1, { prevent: true })
+                  : {}"
               >
                 <template #before>
                   <td
                     v-if="isDraggable"
-                    class="apos-input-array-inline-table-cell apos-input-array-inline-table-cell--controls"
+                    class="
+                      apos-input-array-inline-table-cell
+                      apos-input-array-inline-table-cell--controls
+                    "
                     :style="field.columnStyle"
                   >
                     <AposIndicator
                       icon="drag-icon"
-                      class="apos-input-array-inline-table-cell-drag-handle apos-drag-handle"
+                      class="
+                        apos-input-array-inline-table-cell-drag-handle
+                        apos-drag-handle
+                      "
                       :decorative="false"
                       @keydown.prevent.space="toggleEngage($event, item._id)"
                       @keydown.prevent.enter="toggleEngage($event, item._id)"
@@ -130,7 +153,13 @@
                   </td>
                 </template>
                 <template #after>
-                  <td class="apos-input-array-inline-table-cell apos-input-array-inline-table-cell--controls apos-input-array-inline-table-cell--controls--menu">
+                  <td
+                    class="
+                      apos-input-array-inline-table-cell
+                      apos-input-array-inline-table-cell--controls
+                      apos-input-array-inline-table-cell--controls--menu
+                    "
+                  >
                     <AposContextMenu
                       v-if="getInlineMenuItems(index).length > 1"
                       ref="menu"
@@ -198,18 +227,31 @@
                 'apos-input-array-inline-item--engaged': item.engaged,
                 'apos-input-array-inline-item--drag-disabled': !isDraggable,
               }"
-              @keydown.prevent.exact.space="isDraggable ? toggleOpenInlineItem($event) : {}"
-              @keydown.prevent.shift.space="isDraggable ? toggleEngage($event, item._id) : {}"
-              @keydown.prevent.enter="isDraggable ? toggleEngage($event, item._id) : {}"
-              @keydown.prevent.arrow-up="isDraggable ? moveEngaged($event, item._id, -1) : {}"
-              @keydown.prevent.arrow-down="isDraggable ? moveEngaged($event, item._id, 1) : {}"
+              @keydown.prevent.exact.space="isDraggable
+                ? toggleOpenInlineItem($event)
+                : {}"
+              @keydown.prevent.shift.space="isDraggable
+                ? toggleEngage($event, item._id)
+                : {}"
+              @keydown.prevent.enter="isDraggable
+                ? toggleEngage($event, item._id)
+                : {}"
+              @keydown.prevent.arrow-up="isDraggable
+                ? moveEngaged($event, item._id, -1)
+                : {}"
+              @keydown.prevent.arrow-down="isDraggable
+                ? moveEngaged($event, item._id, 1)
+                : {}"
             >
               <div
                 class="apos-input-array-inline-header"
                 @dblclick="toggleOpenInlineItem($event)"
               >
                 <div
-                  class="apos-input-array-inline-header-ui apos-input-array-inline-header-ui--left"
+                  class="
+                    apos-input-array-inline-header-ui
+                    apos-input-array-inline-header-ui--left
+                  "
                 >
                   <AposIndicator
                     v-if="isDraggable"
@@ -221,10 +263,16 @@
                   </div>
                 </div>
                 <div
-                  class="apos-input-array-inline-header-ui apos-input-array-inline-header-ui--right"
+                  class="
+                    apos-input-array-inline-header-ui
+                    apos-input-array-inline-header-ui--right
+                  "
                 >
                   <AposButton
-                    class="apos-input-array-inline-header-ui-element apos-input-array-inline-collapse"
+                    class="
+                      apos-input-array-inline-header-ui-element
+                      apos-input-array-inline-collapse
+                    "
                     :icon-size="16"
                     label="apostrophe:close"
                     :tooltip="item.open ? 'Collapse item' : 'Expand item'"