apostrophe 3.63.1 → 4.0.0

package/modules/@apostrophecms/image/ui/apos/components/AposImageCropper.vue

@@ -1,15 +1,15 @@
 <template>
   <div
     class="apos-image-cropper"
-    @click="onImageClick"
     :style="{
       height: cropperHeight
     }"
+    @click="onImageClick"
   >
     <span
-      class="apos-image-focal-point"
       ref="focalPoint"
       v-apos-tooltip="'apostrophe:focalPoint'"
+      class="apos-image-focal-point"
       @mousedown="onFocalPointMouseDown"
     />
     <cropper
@@ -18,13 +18,13 @@
         ? attachment._urls.uncropped.original
         : attachment._urls.original"
       :debounce="0"
-      @ready="onCropperReady"
-      @change="onCropperChange"
       :default-size="defaultSize"
       :default-position="defaultPosition"
       :stencil-props="stencilProps"
       :min-width="minSize[0]"
       :min-height="minSize[1]"
+      @ready="onCropperReady"
+      @change="onCropperChange"
     />
   </div>
 </template>
@@ -127,7 +127,7 @@ export default {
       left: this.docFields.data.left
     };
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.$refs.focalPoint.removeEventListener('mousedown', this.onFocalPointMouseDown);
     window.removeEventListener('resize', this.onScreenResizeDebounced);
   },

package/modules/@apostrophecms/image/ui/apos/components/AposImageRelationshipEditor.vue

@@ -65,12 +65,12 @@
               </label>
               <input
                 :value="docFields.data.width"
-                @input="inputWidth"
-                @blur="blurInput"
                 class="apos-input apos-input--text"
                 type="number"
                 :min="minWidth"
                 :max="maxWidth"
+                @input="inputWidth"
+                @blur="blurInput"
               >
             </div>
             <div class="apos-field">
@@ -79,12 +79,12 @@
               </label>
               <input
                 :value="docFields.data.height"
-                @input="inputHeight"
-                @blur="blurInput"
                 class="apos-input apos-input--text"
                 type="number"
                 :min="minHeight"
                 :max="maxHeight"
+                @input="inputHeight"
+                @blur="blurInput"
               >
             </div>
           </div>
@@ -122,7 +122,7 @@ export default {
       type: Array,
       default: () => ([])
     },
-    value: {
+    modelValue: {
       type: Object,
       default: null
     },
@@ -141,7 +141,7 @@ export default {
     const minSize = this.getMinSize();
 
     return {
-      original: this.value,
+      original: this.modelValue,
       docFields: {
         data: this.setDataValues()
       },

package/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue

@@ -6,20 +6,25 @@
 
 <template>
   <AposModal
-    :modal="modal" :modal-title="modalTitle"
+    :modal="modal"
+    :modal-title="modalTitle"
     class="apos-media-manager"
-    @inactive="modal.active = false" @show-modal="modal.showModal = true"
-    @esc="confirmAndCancel" @no-modal="$emit('safe-close')"
+    @inactive="modal.active = false"
+    @show-modal="modal.showModal = true"
+    @esc="confirmAndCancel"
+    @no-modal="$emit('safe-close')"
   >
     <template v-if="relationshipField" #secondaryControls>
       <AposButton
-        type="default" label="apostrophe:cancel"
+        type="default"
+        label="apostrophe:cancel"
         @click="confirmAndCancel"
       />
     </template>
     <template v-else #secondaryControls>
       <AposButton
-        type="default" label="apostrophe:exit"
+        type="default"
+        label="apostrophe:exit"
         @click="confirmAndCancel"
       />
     </template>
@@ -68,22 +73,22 @@
         <template #bodyMain>
           <AposMediaManagerDisplay
             ref="display"
+            v-model:checked="checked"
             :accept="accept"
             :items="items"
             :module-options="moduleOptions"
+            :max-reached="maxReached()"
+            :options="{
+              disableUnchecked: maxReached(),
+              hideCheckboxes: !relationshipField
+            }"
             @edit="updateEditing"
-            v-model="checked"
             @select="select"
             @select-series="selectSeries"
             @select-another="selectAnother"
             @upload-started="uploading = true"
             @upload-complete="completeUploading"
             @create-placeholder="createPlaceholder"
-            :max-reached="maxReached()"
-            :options="{
-              disableUnchecked: maxReached(),
-              hideCheckboxes: !relationshipField
-            }"
           />
         </template>
       </AposModalBody>
@@ -100,13 +105,15 @@
             :selected="selected"
             :is-modified="isModified"
             :module-labels="moduleLabels"
-            @back="updateEditing(null)" @saved="updateMedia"
+            @back="updateEditing(null)"
+            @saved="updateMedia"
             @modified="editorModified"
           />
           <AposMediaManagerSelections
-            :items="selected"
-            @clear="clearSelected" @edit="updateEditing"
             v-show="!editing"
+            :items="selected"
+            @clear="clearSelected"
+            @edit="updateEditing"
           />
         </div>
       </AposModalRail>
@@ -233,7 +240,7 @@ export default {
     apos.bus.$on('content-changed', this.onContentChanged);
     apos.bus.$on('command-menu-manager-close', this.confirmAndCancel);
   },
-  destroyed() {
+  unmounted() {
     apos.bus.$off('content-changed', this.onContentChanged);
     apos.bus.$off('command-menu-manager-close', this.confirmAndCancel);
   },
@@ -451,7 +458,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.apos-media-manager ::v-deep .apos-media-manager-toolbar {
+.apos-media-manager :deep(.apos-media-manager-toolbar) {
   z-index: $z-index-manager-toolbar;
   position: relative;
 }

package/modules/@apostrophecms/image/ui/apos/components/AposMediaManagerDisplay.vue

@@ -11,14 +11,16 @@
         @create-placeholder="$emit('create-placeholder', $event)"
       />
       <div
-        class="apos-media-manager-display__cell" v-for="item in items"
+        v-for="item in items"
         :key="idFor(item)"
+        class="apos-media-manager-display__cell"
         :class="{'apos-is-selected': checked.includes(item._id)}"
         :style="getCellStyles(item)"
       >
         <div class="apos-media-manager-display__checkbox">
           <AposCheckbox
             v-show="item._id !== 'placeholder' && !options.hideCheckboxes"
+            v-model="checkedProxy"
             tabindex="-1"
             :field="{
               name: item._id,
@@ -28,10 +30,10 @@
               disabled: options.disableUnchecked && !checked.includes(item._id)
             }"
             :choice="{ value: item._id }"
-            v-model="checkedProxy"
           />
         </div>
         <button
+          :id="`btn-${item._id}`"
           :disabled="
             item._id === 'placeholder' ||
               (options.disableUnchecked && !checked.includes(item._id))
@@ -40,7 +42,6 @@
           @click.exact="$emit('select', item._id)"
           @click.shift="$emit('select-series', item._id)"
           @click.meta="$emit('select-another', item._id)"
-          ref="btns"
         >
           <div
             v-if="item.dimensions"
@@ -66,7 +67,6 @@
         <button
           disabled="true"
           class="apos-media-manager-display__select"
-          ref="btns"
         />
       </div>
     </div>
@@ -78,10 +78,6 @@ import cuid from 'cuid';
 
 export default {
   // Custom model to handle the v-model connection on the parent.
-  model: {
-    prop: 'checked',
-    event: 'change'
-  },
   props: {
     maxReached: {
       type: Boolean,
@@ -118,10 +114,10 @@ export default {
     }
   },
   emits: [
+    'update:checked',
     'select',
     'select-series',
     'select-another',
-    'change',
     'upload-started',
     'upload-complete',
     'create-placeholder'
@@ -133,7 +129,7 @@ export default {
         return this.checked;
       },
       set(val) {
-        this.$emit('change', val);
+        this.$emit('update:checked', val);
       }
     }
   },
@@ -141,7 +137,11 @@ export default {
     getPlaceholderStyles(item) {
       // Account for whether the refs have been set by the v-for or if on the
       // placeholder.
-      const btn = Array.isArray(this.$refs.btns) ? this.$refs.btns[0] : this.$refs.btns;
+      /* const btn = Array.isArray(this.$refs.btns) ? this.$refs.btns[0] : this.$refs.btns; */
+      const btn = this.items.length && this.$el.querySelector(`#btn-${this.items[0]._id}`);
+      if (!btn) {
+        return {};
+      }
       const {
         width: parentWidth,
         height: parentHeight

package/modules/@apostrophecms/image/ui/apos/components/AposMediaManagerEditor.vue

@@ -5,24 +5,25 @@
       'apos-is-replacing': showReplace
     }"
   >
-    <div class="apos-media-editor__inner" v-if="activeMedia">
+    <div v-if="activeMedia" class="apos-media-editor__inner">
       <div class="apos-media-editor__thumb-wrapper">
         <img
           v-if="activeMedia.attachment && activeMedia.attachment._urls"
           class="apos-media-editor__thumb"
-          :src="activeMedia.attachment._urls[restoreOnly ? 'one-sixth' : 'one-third']" :alt="activeMedia.description"
+          :src="activeMedia.attachment._urls[restoreOnly ? 'one-sixth' : 'one-third']"
+          :alt="activeMedia.description"
         >
       </div>
       <ul class="apos-media-editor__details">
-        <li class="apos-media-editor__detail" v-if="createdDate">
+        <li v-if="createdDate" class="apos-media-editor__detail">
           {{ $t('apostrophe:mediaCreatedDate', { createdDate }) }}
         </li>
-        <li class="apos-media-editor__detail" v-if="fileSize">
+        <li v-if="fileSize" class="apos-media-editor__detail">
           {{ $t('apostrophe:mediaFileSize', { fileSize }) }}
         </li>
         <li
-          class="apos-media-editor__detail"
           v-if="activeMedia.attachment && activeMedia.attachment.width"
+          class="apos-media-editor__detail"
         >
           {{
             $t('apostrophe:mediaDimensions', {
@@ -35,21 +36,24 @@
       <ul class="apos-media-editor__links">
         <li class="apos-media-editor__link" aria-hidden="true">
           <AposButton
-            type="quiet" label="apostrophe:replace"
-            @click="showReplace = true"
+            type="quiet"
+            label="apostrophe:replace"
             :disabled="isArchived"
+            @click="showReplace = true"
           />
         </li>
-        <li class="apos-media-editor__link" v-if="activeMedia.attachment && activeMedia.attachment._urls">
+        <li v-if="activeMedia.attachment && activeMedia.attachment._urls" class="apos-media-editor__link">
           <AposButton
-            type="quiet" label="apostrophe:view"
-            @click="viewMedia"
+            type="quiet"
+            label="apostrophe:view"
             :disabled="isArchived"
+            @click="viewMedia"
           />
         </li>
-        <li class="apos-media-editor__link" v-if="activeMedia.attachment && activeMedia.attachment._urls">
+        <li v-if="activeMedia.attachment && activeMedia.attachment._urls" class="apos-media-editor__link">
           <AposButton
-            type="quiet" label="apostrophe:download"
+            type="quiet"
+            label="apostrophe:download"
             :href="!isArchived ? activeMedia.attachment._urls.original : false"
             :disabled="isArchived"
             download
@@ -58,16 +62,16 @@
       </ul>
       <AposSchema
         v-if="docFields.data.title !== undefined"
-        :schema="schema"
+        ref="schema"
         v-model="docFields"
+        :schema="schema"
         :modifiers="['small', 'inverted']"
         :trigger-validation="triggerValidation"
         :doc-id="docFields.data._id"
         :following-values="followingValues()"
+        :server-errors="serverErrors"
         @validate="triggerValidate"
         @reset="$emit('modified', false)"
-        ref="schema"
-        :server-errors="serverErrors"
       />
     </div>
     <AposModalLip :refresh="lipKey">
@@ -84,13 +88,15 @@
             modifiers: [ 'small', 'no-motion' ]
           }"
           :menu="moreMenu"
-          @item-clicked="moreMenuHandler"
           menu-placement="top-end"
+          @item-clicked="moreMenuHandler"
         />
         <AposButton
-          @click="save" class="apos-media-editor__save"
+          class="apos-media-editor__save"
           :disabled="docFields.hasErrors"
-          :label="restoreOnly ? 'apostrophe:restore' : 'apostrophe:save'" type="primary"
+          :label="restoreOnly ? 'apostrophe:restore' : 'apostrophe:save'"
+          type="primary"
+          @click="save"
         />
       </div>
     </AposModalLip>
@@ -216,6 +222,7 @@ export default {
   },
   watch: {
     'docFields.data': {
+      deep: true,
       handler(newData, oldData) {
         this.$nextTick(() => {
           // If either old or new state are an empty object, it's not "modified."
@@ -401,7 +408,7 @@ export default {
     max-height: 100%;
   }
 
-  .apos-media-editor ::v-deep .apos-field {
+  .apos-media-editor :deep(.apos-field) {
     margin-bottom: $spacing-double;
   }
 
@@ -421,7 +428,7 @@ export default {
     display: flex;
     margin-bottom: $spacing-triple;
 
-    ::v-deep .apos-button--quiet {
+    :deep(.apos-button--quiet) {
       display: inline;
     }
   }
@@ -433,7 +440,7 @@ export default {
     }
   }
 
-  ::v-deep [data-apos-field='attachment'] {
+  :deep([data-apos-field='attachment']) {
     .apos-media-editor:not(.apos-is-replacing) & {
       position: absolute;
       left: -999rem;

package/modules/@apostrophecms/image/ui/apos/components/AposMediaManagerSelections.vue

@@ -91,7 +91,7 @@ export default {
   margin-bottom: $spacing-double;
 }
 
-.apos-media-manager-selections__heading ::v-deep .apos-button {
+.apos-media-manager-selections__heading :deep(.apos-button) {
   margin-left: $spacing-base;
 }
 

package/modules/@apostrophecms/image/ui/apos/components/AposMediaUploader.vue

@@ -28,13 +28,14 @@
       </div>
     </div>
     <input
-      type="file" class="apos-sr-only"
       ref="upload"
-      @input="uploadMedia"
+      type="file"
+      class="apos-sr-only"
       :accept="accept"
       multiple="true"
       :disabled="disabled"
       tabindex="-1"
+      @input="uploadMedia"
     >
   </label>
 </template>
@@ -49,7 +50,7 @@ export default {
     },
     disabled: {
       type: Boolean,
-      required: false
+      default: false
     },
     accept: {
       type: String,
@@ -82,7 +83,7 @@ export default {
   mounted() {
     apos.bus.$on('command-menu-manager-create-new', this.create);
   },
-  destroyed() {
+  unmounted() {
     apos.bus.$off('command-menu-manager-create-new', this.create);
   },
   methods: {

package/modules/@apostrophecms/login/ui/apos/apps/AposLogin.js

@@ -1,15 +1,14 @@
-import Vue from 'Modules/@apostrophecms/ui/lib/vue';
+import createApp from 'Modules/@apostrophecms/ui/lib/vue';
 
 export default function() {
+  const component = apos.vueComponents.TheAposLogin;
   const el = document.querySelector('#apos-login');
   if (el) {
-    return new Vue({
-      el,
-      render: function (h) {
-        return h('TheAposLogin');
-      }
-    });
+    const app = createApp(component);
+
+    app.mount(el);
   }
+
   apos.bus.$on('admin-menu-click', async (item) => {
     if (item !== '@apostrophecms/login-logout') {
       return;

package/modules/@apostrophecms/login/ui/apos/components/AposForgotPasswordForm.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="apos-login-form"
     v-if="passwordResetEnabled"
+    class="apos-login-form"
   >
     <TheAposLoginHeader
       :env="context.env"
@@ -23,8 +23,8 @@
       />
       <form v-else @submit.prevent="submit">
         <AposSchema
-          :schema="schema"
           v-model="doc"
+          :schema="schema"
         />
         <AposButton
           data-apos-test="pwdResetRequestSubmit"
@@ -61,7 +61,7 @@ export default {
     }
   }
 
-  .apos-login-form__submit ::v-deep .apos-button {
+  .apos-login-form__submit :deep(.apos-button) {
     height: 47px;
   }
 </style>

package/modules/@apostrophecms/login/ui/apos/components/AposLoginForm.vue

@@ -1,8 +1,8 @@
 <template>
   <div
+    v-if="phase === 'beforeSubmit' || phase === 'uponSubmit'"
     key="1"
     class="apos-login-form"
-    v-if="phase === 'beforeSubmit' || phase === 'uponSubmit'"
   >
     <TheAposLoginHeader
       :env="context.env"
@@ -11,30 +11,30 @@
     />
 
     <div class="apos-login-form__body">
-      <form @submit.prevent="submit" data-apos-test="loginForm">
+      <form data-apos-test="loginForm" @submit.prevent="submit">
         <AposSchema
-          :schema="schema"
           v-model="doc"
+          :schema="schema"
         />
         <a
-          href="#"
           v-if="passwordResetEnabled"
+          href="#"
           class="apos-login-form__link"
           @click.prevent="$emit('set-stage', 'forgotPassword')"
         >{{ $t('apostrophe:loginResetPassword') }}</a>
         <Component
+          v-bind="getRequirementProps(requirement.name)"
+          :is="requirement.component"
           v-for="requirement in beforeSubmitRequirements"
           :key="requirement.name"
-          :is="requirement.component"
-          v-bind="getRequirementProps(requirement.name)"
           @done="requirementDone(requirement, $event)"
           @block="requirementBlock(requirement)"
         />
         <template v-if="phase === 'uponSubmit'">
           <Component
+            :is="requirement.component"
             v-for="requirement in uponSubmitRequirements"
             :key="requirement.name"
-            :is="requirement.component"
             v-bind="getRequirementProps(requirement.name)"
             @done="requirementDone(requirement, $event)"
             @block="requirementBlock(requirement)"
@@ -55,9 +55,9 @@
     </div>
   </div>
   <div
+    v-else-if="activeSoloRequirement"
     key="2"
     class="apos-login-form"
-    v-else-if="activeSoloRequirement"
   >
     <TheAposLoginHeader
       :env="context.env"
@@ -67,9 +67,9 @@
     />
     <div class="apos-login-form__body">
       <Component
-        v-if="!fetchingRequirementProps"
         v-bind="getRequirementProps(activeSoloRequirement.name)"
         :is="activeSoloRequirement.component"
+        v-if="!fetchingRequirementProps"
         :success="activeSoloRequirement.success"
         :error="activeSoloRequirement.error"
         @done="requirementDone(activeSoloRequirement, $event)"
@@ -115,7 +115,7 @@ export default {
     }
   }
 
-  .apos-login-form__submit ::v-deep .apos-button {
+  .apos-login-form__submit :deep(.apos-button) {
     height: 47px;
   }
 </style>

package/modules/@apostrophecms/login/ui/apos/components/AposResetPasswordForm.vue

@@ -64,7 +64,7 @@ export default {
       flex-direction: column;
     }
   }
-  .apos-login-form__submit ::v-deep .apos-button {
+  .apos-login-form__submit :deep(.apos-button) {
     height: 47px;
   }
 </style>

package/modules/@apostrophecms/login/ui/apos/components/TheAposLogin.vue

@@ -1,9 +1,9 @@
 <template>
   <transition name="fade-stage">
     <div
+      v-show="loaded"
       class="apos-login apos-theme-dark"
       data-apos-test="loginForm"
-      v-show="loaded"
       :class="themeClass"
     >
       <transition name="fade-outer">
@@ -46,7 +46,7 @@
         </transition>
       </div>
       <transition name="fade-outer">
-        <div class="apos-login__footer" v-show="loaded">
+        <div v-show="loaded" class="apos-login__footer">
           <AposLogo class="apos-login__logo" />
           <label class="apos-login__project-version">
             Version {{ context.version }}