apostrophe 3.63.3 → 4.1.0

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

@@ -6,14 +6,15 @@
         <AposButton
           label="apostrophe:clear"
           type="quiet"
-          @click="clear"
           :modifiers="['no-motion']"
+          @click="clear"
         />
       </div>
       <ol class="apos-media-manager-selections__items">
         <li
           v-for="item in items"
-          :key="item._id" class="apos-media-manager-selections__item"
+          :key="item._id"
+          class="apos-media-manager-selections__item"
         >
           <div
             v-if="item.attachment && item.attachment._urls"
@@ -91,7 +92,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/index.js

@@ -51,6 +51,10 @@ module.exports = {
   cascades: [ 'requirements' ],
   options: {
     alias: 'login',
+    placeholder: {
+      username: 'apostrophe:enterUsername',
+      password: 'apostrophe:enterPassword'
+    },
     localLogin: true,
     passwordReset: false,
     passwordResetHours: 48,
@@ -539,6 +543,7 @@ module.exports = {
 
       getBrowserData(req) {
         return {
+          schema: self.getSchema(),
           action: self.action,
           passwordResetEnabled: self.isPasswordResetEnabled(),
           ...(req.user ? {
@@ -909,8 +914,20 @@ module.exports = {
             last: true
           }
         );
-      }
+      },
 
+      getSchema() {
+        return self.apos.user.schema
+          .filter(({ name }) => [ 'username', 'password' ].includes(name))
+          .map(field => ({
+            name: field.name,
+            label: field.label,
+            placeholder: self.options.placeholder[field.name],
+            type: field.type,
+            required: true
+          })
+          );
+      }
     };
   },
 

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

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="apos-login-form"
     v-if="passwordResetEnabled && ready"
+    class="apos-login-form"
   >
     <TheAposLoginHeader
       :env="context.env"
@@ -27,8 +27,8 @@
         @submit.prevent="submit"
       >
         <AposSchema
-          :schema="schema"
           v-model="doc"
+          :schema="schema"
         />
         <AposButton
           data-apos-test="pwdResetSubmit"
@@ -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 }}

package/modules/@apostrophecms/login/ui/apos/logic/AposLoginForm.js

@@ -12,22 +12,7 @@ export default {
     return {
       phase: 'beforeSubmit',
       busy: false,
-      schema: [
-        {
-          name: 'username',
-          label: 'Username',
-          placeholder: 'Enter username',
-          type: 'string',
-          required: true
-        },
-        {
-          name: 'password',
-          label: 'Password',
-          placeholder: 'Enter password',
-          type: 'password',
-          required: true
-        }
-      ],
+      schema: apos.login.schema,
       requirements: getRequirements(),
       requirementProps: {},
       fetchingRequirementProps: false

package/modules/@apostrophecms/modal/ui/apos/apps/AposModals.js

@@ -1,97 +1,70 @@
-import Vue from 'Modules/@apostrophecms/ui/lib/vue';
+import createApp from 'Modules/@apostrophecms/ui/lib/vue';
 
 export default function() {
-  const theAposModals = new Vue({
-    el: '#apos-modals',
-    computed: {
-      apos () {
-        return window.apos;
-      }
-    },
-    methods: {
-      async confirm(content, options = {}) {
-        return this.execute(apos.modal.components.confirm, {
-          content,
-          mode: 'confirm',
-          options
-        });
-      },
-      async alert(alertContent, options = {}) {
-        return this.execute(apos.modal.components.confirm, {
-          content: alertContent,
-          mode: 'alert',
-          options
-        });
-      },
-      execute(componentName, props) {
-        return this.$refs.modals.execute(componentName, props);
-      },
-      getAt(index) {
-        return this.$refs.modals.getAt(index);
-      },
-      getProperties(id) {
-        return this.$refs.modals.getProperties(id);
-      },
-      // Returns true if el1 is "on top of" el2 in the
-      // modal stack, as viewed by the user. If el1 is a
-      // modal that appears later in the stack than el2
-      // (visually stacked on top), this method returns true.
-      // If el2 is `document` and el1 is a modal, this
-      // method returns true. For convenenience, if el1
-      // or el2 is not a modal, it is treated as its DOM
-      // parent modal, or as `document`. If el1 has no
-      // parent modal this method always returns false.
-      //
-      // If el1 is no longer connected to the DOM then it
-      // is also considered to be "on top" e.g. not something
-      // that should concern `v-click-outside-element` and
-      // similar functionality. This is necessary because
-      // sometimes Vue removes elements from the DOM before
-      // we can examine their relationships.
-      onTopOf(el1, el2) {
-        if (!el1.isConnected) {
-          // If el1 is no longer in the DOM we can't make a proper determination,
-          // returning true prevents unwanted things like click-outside-element
-          // events from firing
-          return true;
-        }
-        if (!el1.matches('[data-apos-modal]')) {
-          el1 = el1.closest('[data-apos-modal]') || document;
-        }
-        if (!el2.matches('[data-apos-modal]')) {
-          el2 = el2.closest('[data-apos-modal]') || document;
-        }
-        if (el1 === document) {
-          return false;
-        }
-        if (el2 === document) {
-          return true;
-        }
-        const index1 = apos.modal.stack.findIndex(modal => modal.$el === el1);
-        const index2 = apos.modal.stack.findIndex(modal => modal.$el === el2);
-        if (index1 === -1) {
-          throw new Error('apos.modal.onTopOf: el1 is not in the modal stack');
-        }
-        if (index2 === -1) {
-          throw new Error('apos.modal.onTopOf: el2 is not in the modal stack');
-        }
-        return index1 > index2;
-      }
-    },
-    render(h) {
-      return h(apos.modal.components.the, {
-        ref: 'modals',
-        props: {
-          modals: apos.modal.modals
-        }
-      });
-    }
+  const component = apos.vueComponents.TheAposModals;
+  const el = document.querySelector('#apos-modals');
+  if (!el) {
+    return;
+  }
+  const app = createApp(component, {
+    modals: apos.modal.modals
   });
+  const theAposModals = app.mount(el);
+
   apos.modal.execute = theAposModals.execute;
   apos.modal.getAt = theAposModals.getAt;
   apos.modal.getProperties = theAposModals.getProperties;
-  apos.modal.onTopOf = theAposModals.onTopOf;
+  apos.modal.onTopOf = onTopOf;
   apos.modal.stack = [];
   apos.confirm = theAposModals.confirm;
   apos.alert = theAposModals.alert;
 }
+
+// Returns true if el1 is "on top of" el2 in the
+// modal stack, as viewed by the user. If el1 is a
+// modal that appears later in the stack than el2
+// (visually stacked on top), this method returns true.
+// If el2 is `document` and el1 is a modal, this
+// method returns true. For convenenience, if el1
+// or el2 is not a modal, it is treated as its DOM
+// parent modal, or as `document`. If el1 has no
+// parent modal this method always returns false.
+//
+// If el1 is no longer connected to the DOM then it
+// is also considered to be "on top" e.g. not something
+// that should concern `v-click-outside-element` and
+// similar functionality. This is necessary because
+// sometimes Vue removes elements from the DOM before
+// we can examine their relationships.
+function onTopOf(el1, el2) {
+  if (el2.matches('[data-apos-menu]')) {
+    return false;
+  }
+  if (!el1.isConnected) {
+    // If el1 is no longer in the DOM we can't make a proper determination,
+    // returning true prevents unwanted things like click-outside-element
+    // events from firing
+    return true;
+  }
+  if (!el1.matches('[data-apos-modal]')) {
+    el1 = el1.closest('[data-apos-modal]') || document;
+  }
+  if (!el2.matches('[data-apos-modal]')) {
+    el2 = el2.closest('[data-apos-modal]') || document;
+  }
+  if (el1 === document) {
+    return false;
+  }
+  if (el2 === document) {
+    return true;
+  }
+  const index1 = apos.modal.stack.findIndex(modal => modal.$el === el1);
+  const index2 = apos.modal.stack.findIndex(modal => modal.$el === el2);
+  if (index1 === -1) {
+    throw new Error('apos.modal.onTopOf: el1 is not in the modal stack');
+  }
+  if (index2 === -1) {
+    throw new Error('apos.modal.onTopOf: el2 is not in the modal stack');
+  }
+  return index1 > index2;
+}