apostrophe 4.0.0 → 4.1.0

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/components/AposModal.vue

@@ -1,26 +1,26 @@
 <template>
   <transition
     :name="transitionType"
+    :duration="250"
     @enter="onEnter"
     @leave="onLeave"
-    :duration="250"
   >
     <section
       v-if="modal.active"
+      ref="modalEl"
       :class="classes"
       role="dialog"
       aria-modal="true"
       :aria-labelledby="id"
-      ref="modalEl"
+      data-apos-modal
       @keydown="cycleElementsToFocus"
       @focus.capture="storeFocusedElement"
-      data-apos-modal
     >
       <transition :name="transitionType">
         <div
-          @click="close"
           v-if="modal.showModal"
           class="apos-modal__overlay"
+          @click="close"
         />
       </transition>
       <transition :name="transitionType" @after-leave="$emit('inactive')">
@@ -39,7 +39,7 @@
             </div>
           </template>
           <template v-else>
-            <header class="apos-modal__header" v-if="!modal.disableHeader">
+            <header v-if="!modal.disableHeader" class="apos-modal__header">
               <div class="apos-modal__header__main">
                 <div v-if="hasSecondaryControls" class="apos-modal__controls--secondary">
                   <slot name="secondaryControls" />
@@ -50,20 +50,20 @@
                   </span>
                   {{ $t(modalTitle) }}
                 </h2>
-                <div class="apos-modal__controls--header" v-if="hasBeenLocalized || hasPrimaryControls">
-                  <div class="apos-modal__locale" v-if="hasBeenLocalized">
+                <div v-if="hasBeenLocalized || hasPrimaryControls" class="apos-modal__controls--header">
+                  <div v-if="hasBeenLocalized" class="apos-modal__locale">
                     <span class="apos-modal__locale-label">
                       {{ $t('apostrophe:locale') }}:
                     </span> <span class="apos-modal__locale-name">
                       {{ currentLocale }}
                     </span>
                   </div>
-                  <div class="apos-modal__controls--primary" v-if="hasPrimaryControls">
+                  <div v-if="hasPrimaryControls" class="apos-modal__controls--primary">
                     <slot name="primaryControls" />
                   </div>
                 </div>
               </div>
-              <div class="apos-modal__breadcrumbs" v-if="hasBreadcrumbs">
+              <div v-if="hasBreadcrumbs" class="apos-modal__breadcrumbs">
                 <slot class="apos-modal__breadcrumbs" name="breadcrumbs" />
               </div>
             </header>

package/modules/@apostrophecms/modal/ui/apos/components/AposModalConfirm.vue

@@ -28,8 +28,8 @@
             {{ localize(content.description) }}
           </p>
           <Component
-            v-if="content.body"
             :is="content.body.component"
+            v-if="content.body"
             v-bind="content.body.props"
           />
           <div v-if="content.form" class="apos-confirm__schema">
@@ -48,15 +48,15 @@
               @click="cancel"
             />
             <AposButton
+              ref="confirm"
               class="apos-confirm__btn"
               :label="affirmativeLabel"
-              @click="confirm"
               :type="content.theme || 'primary'"
               :disabled="isDisabled"
-              ref="confirm"
+              @click="confirm"
             />
           </div>
-          <p class="apos-confirm__note" v-if="content.note">
+          <p v-if="content.note" class="apos-confirm__note">
             {{ localize(content.note) }}
           </p>
         </template>

package/modules/@apostrophecms/modal/ui/apos/components/AposModalLip.vue

@@ -1,14 +1,14 @@
 <template>
   <!-- Disabling since the SVG is mostly not active vue template code. -->
   <!-- eslint-disable vue/max-attributes-per-line -->
-  <div class="apos-modal-lip" ref="lip">
+  <div ref="lip" class="apos-modal-lip">
     <div class="apos-modal-lip__shadow">
       <svg width="406px" height="56px" viewBox="0 0 406 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
         <title>Shadow</title>
         <defs>
           <rect id="shadow-path-1" x="0" y="0" width="406" height="56" />
           <rect id="shadow-path-3" x="-13" y="20" width="432" height="83" />
-          <filter x="-6.2%" y="-28.9%" width="112.5%" height="165.1%" filterUnits="objectBoundingBox" id="shadow-filter-4">
+          <filter id="shadow-filter-4" x="-6.2%" y="-28.9%" width="112.5%" height="165.1%" filterUnits="objectBoundingBox">
             <feMorphology radius="3" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1" />
             <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1" />
             <feGaussianBlur stdDeviation="6.5" in="shadowOffsetOuter1" result="shadowBlurOuter1" />

package/modules/@apostrophecms/modal/ui/apos/components/AposModalTabs.vue

@@ -2,13 +2,14 @@
   <div class="apos-modal-tabs">
     <ul class="apos-modal-tabs__tabs">
       <li
-        class="apos-modal-tabs__tab"
         v-for="tab in tabs"
-        :key="tab.name"
         v-show="tab.isVisible !== false"
+        :key="tab.name"
+        class="apos-modal-tabs__tab"
       >
         <button
-          :id="tab.name" class="apos-modal-tabs__btn"
+          :id="tab.name"
+          class="apos-modal-tabs__btn"
           :aria-selected="tab.name === current ? true : false"
           @click="selectTab"
         >

package/modules/@apostrophecms/notification/ui/apos/components/TheAposNotifications.vue

@@ -1,7 +1,9 @@
 <template>
   <transition-group
-    name="list" tag="div"
-    class="apos-notifications" :class="themeClass"
+    name="list"
+    tag="div"
+    class="apos-notifications"
+    :class="themeClass"
   >
     <AposNotification
       v-for="notification in notifications"

package/modules/@apostrophecms/oembed-field/ui/apos/components/AposInputOembed.vue

@@ -1,35 +1,37 @@
 <template>
   <AposInputWrapper
-    :modifiers="modifiers" :field="field"
-    :error="effectiveError" :uid="uid"
+    :modifiers="modifiers"
+    :field="field"
+    :error="effectiveError"
+    :uid="uid"
     :display-options="displayOptions"
   >
     <template #body>
       <div class="apos-input-wrapper">
         <input
-          :class="classes"
+          :id="uid"
           v-model="next.url"
+          :class="classes"
           type="url"
           :placeholder="$t(field.placeholder)"
           :disabled="field.readOnly"
           :readonly="tempReadOnly"
           :required="field.required"
-          :id="uid"
           :tabindex="tabindex"
         >
         <component
+          :is="icon"
           v-if="icon"
           :size="iconSize"
           class="apos-input-icon"
-          :is="icon"
         />
         <!-- eslint-disable vue/no-v-html -->
         <div
           v-if="!error && oembedResult.html"
-          v-html="oembedResult.html"
           class="apos-input__embed"
           :class="{ 'apos-is-dynamic': !!dynamicRatio }"
           :style="{ paddingTop: dynamicRatio && `${(dynamicRatio * 100)}%` }"
+          v-html="oembedResult.html"
         />
       </div>
       <!-- eslint-enable vue/no-v-html -->

package/modules/@apostrophecms/page/index.js

@@ -702,6 +702,7 @@ database.`);
                   editRole: 'admin',
                   publishRole: 'admin'
                 },
+                permissions: {},
                 find(req) {
                   return [];
                 },

package/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManagerSelectBox.vue

@@ -12,15 +12,19 @@
           {{ selectBoxMessage }}
           <AposButton
             v-if="!allPiecesSelection.isSelected"
-            type="subtle" :modifiers="['inline', 'small', 'no-motion']"
-            :label="selectBoxMessageButton" class="apos-select-box__select-all"
-            @click="$emit('select-all')"
+            type="subtle"
+            :modifiers="['inline', 'small', 'no-motion']"
+            :label="selectBoxMessageButton"
+            class="apos-select-box__select-all"
             text-color="var(--a-primary)"
+            @click="$emit('select-all')"
           />
           <AposButton
             v-else
-            type="subtle" :modifiers="['inline', 'small', 'no-motion']"
-            label="apostrophe:clearSelection" class="apos-select-box__select-all"
+            type="subtle"
+            :modifiers="['inline', 'small', 'no-motion']"
+            label="apostrophe:clearSelection"
+            class="apos-select-box__select-all"
             text-color="var(--a-primary)"
             @click="clearSelection"
           />

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapButton.vue

@@ -1,7 +1,6 @@
 <template>
   <AposButton
     type="rich-text"
-    @click="click"
     class="apos-rich-text-editor__control"
     :class="{ 'apos-is-active': active }"
     :label="tool.label"
@@ -14,6 +13,7 @@
       placement: 'top',
       delay: 650
     }"
+    @click="click"
   />
 </template>
 

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapImage.vue

@@ -2,7 +2,6 @@
   <div class="apos-image-control">
     <AposButton
       type="rich-text"
-      @click="click"
       :class="{ 'apos-is-active': buttonActive }"
       :label="tool.label"
       :icon-only="!!tool.icon"
@@ -14,6 +13,7 @@
         placement: 'top',
         delay: 650
       }"
+      @click="click"
     />
     <AposImageControlDialog
       :active="active"

package/modules/@apostrophecms/schema/index.js

@@ -29,6 +29,7 @@ module.exports = {
     self.arrayManagers = {};
     self.objectManagers = {};
     self.fieldMetadataComponents = [];
+    self.uiManagerIndicators = [];
 
     self.enableBrowserData();
 
@@ -441,6 +442,13 @@ module.exports = {
         });
       },
 
+      // Wrapper around isEqual method to get modified fields between two documents
+      // instead of just getting a boolean, it will return an array of the modified fields
+
+      getChanges(req, schema, one, two) {
+        return self.isEqual(req, schema, one, two, { getChanges: true });
+      },
+
       // Compare two objects and return true only if their schema fields are equal.
       //
       // Note that for relationship fields this comparison is based on the idsStorage
@@ -451,22 +459,40 @@ module.exports = {
       // This method is invoked by the doc module to compare draft and published
       // documents and set the modified property of the draft, just before updating the
       // published version.
+      //
+      // When passing the option `getChange: true` it'll return an array of changed fields
+      // in this case the method won't short circuit by directly returning false
+      // when finding a changed field
 
-      isEqual(req, schema, one, two) {
+      isEqual(req, schema, one, two, options = {}) {
+        const changedFields = [];
         for (const field of schema) {
           const fieldType = self.fieldTypes[field.type];
-          if (!fieldType.isEqual) {
-            if ((!_.isEqual(one[field.name], two[field.name])) &&
-              !((one[field.name] == null) && (two[field.name] == null))) {
-              return false;
-            }
-          } else {
+
+          if (fieldType.isEqual) {
             if (!fieldType.isEqual(req, field, one, two)) {
+              if (options.getChanges) {
+                changedFields.push(field.name);
+              } else {
+                return false;
+              }
+            }
+            continue;
+          }
+
+          if (
+            !_.isEqual(one[field.name], two[field.name]) &&
+            !((one[field.name] == null) && (two[field.name] == null))
+          ) {
+            if (options.getChanges) {
+              changedFields.push(field.name);
+            } else {
               return false;
             }
           }
         }
-        return true;
+
+        return options.getChanges ? changedFields : true;
       },
 
       // Index the object's fields for participation in Apostrophe search unless
@@ -1707,6 +1733,40 @@ module.exports = {
           options.allow = '/';
         }
         return options;
+      },
+
+      // Register a Vue component as custom indicator in the UI manager.
+      // The component should be already exist in the admin UI
+      // (created in `ui/apos/components`).
+      // Properties:
+      // - `component`: the name of the Vue component
+      // - `props`: (optional, object) additional props to pass to the component.
+      // - `if`: (optional, object) a standard Apostrophe condition to show/hide
+      //    the indicator. Keep in mind the component can also decide internally
+      //    to show/hide itself. The condition is evaluated against the draft doc.
+      //    The keys represent field names and support dot notation.
+      //
+      // Example:
+      // ```javascript
+      // self.apos.schema.addManagerIndicator({
+      //   component: 'MyCustomIndicator',
+      //   props: {
+      //     label: 'My indicator'
+      //   },
+      //   if: {
+      //     type: 'my-type',
+      //     'myField': 'my-value',
+      //     'myObject.field': 'my-nested-value'
+      //   }
+      // });
+      addManagerIndicator({
+        component, props, if: condition
+      }) {
+        self.uiManagerIndicators.push({
+          component,
+          props,
+          if: condition
+        });
       }
     };
   },
@@ -1776,6 +1836,7 @@ module.exports = {
         browserOptions.action = self.action;
         browserOptions.components = { fields: fields };
         browserOptions.fieldMetadataComponents = self.fieldMetadataComponents;
+        browserOptions.customCellIndicators = self.uiManagerIndicators;
         return browserOptions;
       }
     };

package/modules/@apostrophecms/schema/lib/addFieldTypes.js

@@ -859,7 +859,7 @@ module.exports = (self) => {
       if (one[field.name].length !== two[field.name].length) {
         return false;
       }
-      for (let i = 0; (i < one.length); i++) {
+      for (let i = 0; (i < one[field.name].length); i++) {
         if (!self.isEqual(req, field.schema, one[field.name][i], two[field.name][i])) {
           return false;
         }

package/modules/@apostrophecms/schema/ui/apos/components/AposInputPassword.vue

@@ -1,19 +1,21 @@
 <template>
   <AposInputWrapper
-    :modifiers="modifiers" :field="field"
-    :error="effectiveError" :uid="uid"
+    :modifiers="modifiers"
+    :field="field"
+    :error="effectiveError"
+    :uid="uid"
     :display-options="displayOptions"
   >
     <template #body>
       <div class="apos-input-wrapper">
         <input
+          :id="uid"
+          v-model="next"
           type="password"
           class="apos-input apos-input--password"
-          v-model="next"
           :placeholder="$t(field.placeholder)"
           :disabled="field.readOnly"
           :required="field.required"
-          :id="uid"
           :tabindex="tabindex"
           :autocomplete="field.autocomplete"
           @keydown.enter="emitReturn"

package/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue

@@ -1,20 +1,22 @@
 <template>
   <AposInputWrapper
-    :modifiers="modifiers" :field="field"
-    :error="effectiveError" :uid="uid"
+    :modifiers="modifiers"
+    :field="field"
+    :error="effectiveError"
+    :uid="uid"
     :display-options="displayOptions"
   >
     <template #body>
       <div class="apos-input-wrapper">
-        <div class="apos-range" v-apos-tooltip="tooltip">
+        <div v-apos-tooltip="tooltip" class="apos-range">
           <input
+            :id="uid"
+            v-model="next"
             type="range"
             :min="field.min"
             :max="field.max"
             :step="field.step"
             class="apos-range__input"
-            v-model="next"
-            :id="uid"
             :disabled="field.readOnly"
           >
           <div class="apos-range__scale">
@@ -39,7 +41,8 @@
         >
           {{ valueLabel }}
           <AposButton
-            type="quiet" label="apostrophe:clear"
+            type="quiet"
+            label="apostrophe:clear"
             class="apos-range__clear"
             :modifiers="['no-motion']"
             @click="unset"

package/modules/@apostrophecms/schema/ui/apos/components/AposInputString.vue

@@ -11,9 +11,9 @@
       <div class="apos-input-wrapper">
         <textarea
           v-if="field.textarea && field.type === 'string'"
+          :id="uid"
           v-model="next"
           rows="5"
-          :id="uid"
           :class="classes"
           :placeholder="$t(field.placeholder)"
           :disabled="field.readOnly"

package/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue

@@ -9,10 +9,10 @@
     <component :is="wrapEl" :class="classList">
       <div class="apos-field__info">
         <component
+          :is="labelEl"
           v-if="field.label"
           class="apos-field__label"
           :class="{'apos-sr-only': field.hideLabel }"
-          :is="labelEl"
           :for="uid"
           :data-apos-test-name="field.name"
           :data-apos-test-label="field.label"
@@ -24,8 +24,8 @@
               *
             </span>
             <AposLabel
-              class="apos-field__tag"
               v-if="field.tag"
+              class="apos-field__tag"
               :label="field.tag.value || field.tag"
               :modifiers="[ `apos-is-${field.tag.type || 'success'}`, 'apos-is-filled' ]"
               data-apos-test="field-tag"
@@ -44,11 +44,13 @@
               />
             </span>
             <span
-              v-if="displayOptions.changed" class="apos-field__changed"
+              v-if="displayOptions.changed"
+              class="apos-field__changed"
               data-apos-test="field-changed"
             >
               <AposLabel
-                label="apostrophe:changed" class="apos-field__changed__label"
+                label="apostrophe:changed"
+                class="apos-field__changed__label"
                 :modifiers="[ 'apos-is-warning', 'apos-is-filled' ]"
                 tooltip="apostrophe:fieldHasUnpublishedChanges"
               />
@@ -56,16 +58,16 @@
           </span>
           <span data-apos-test="field-meta-wrapper" class="apos-field__label-meta">
             <component
-              v-for="component in metaComponents"
-              :key="component.name"
-              :is="component.name"
+              v-for="{name, namespace, data} in metaComponents"
+              :key="name"
+              :is="name"
               :field="field"
               :items="items"
-              :namespace="component.namespace"
-              :meta="component.data"
+              :namespace="namespace"
+              :meta="data"
               :meta-raw="meta"
-              :data-apos-test-component="component.name"
-              :data-apos-test-namespace="component.namespace"
+              :data-apos-test-component="name"
+              :data-apos-test-namespace="namespace"
               data-apos-test="field-meta"
             />
           </span>
@@ -81,7 +83,8 @@
       </div>
       <slot name="body" />
       <div
-        v-if="errorMessage" class="apos-field__error"
+        v-if="errorMessage"
+        class="apos-field__error"
         data-apos-test="field-error"
       >
         {{ $t(errorMessage) }}

package/modules/@apostrophecms/schema/ui/apos/components/AposSchema.vue

@@ -41,6 +41,7 @@
         :is="fieldComponentMap[field.type]"
         :ref="field.name"
         v-model="fieldState[field.name]"
+        :class="{ 'apos-field__wrapper--highlight': highlight(field.name) }"
         :following-values="followingValues[field.name]"
         :condition-met="conditionalFields?.if[field.name]"
         :field="fields[field.name].field"
@@ -60,6 +61,7 @@
         v-show="displayComponent(field)"
         :ref="field.name"
         v-model="compareMetaState[field.name]"
+        :class="{ 'apos-field__wrapper--highlight': highlight(field.name) }"
         :following-values="followingValues[field.name]"
         :condition-met="conditionalFields?.if[field.name]"
         :field="fields[field.name].field"
@@ -119,25 +121,32 @@ export default {
     margin-bottom: 0;
   }
 
-  .apos-schema.apos-schema--compare {
-    & > ::v-deep [data-apos-field] {
-      display: flex;
-
-      & > .apos-field__wrapper {
-        flex-grow: 1;
-        flex-basis: 50%;
-        border-right: 1px solid var(--a-base-9);
-        padding-right: 20px;
-      }
-      & > .apos-field__wrapper + .apos-field__wrapper {
-        border-right: none;
-        padding-right: 0;
-        padding-left: 20px;
-      }
-
-      & .apos-field__label {
-        word-break: break-all;
-      }
+  .apos-schema.apos-schema--compare > :deep([data-apos-field]) {
+    display: flex;
+
+    &.apos-field--hidden {
+      display: none;
+    }
+
+    & > .apos-field__wrapper {
+      flex-grow: 1;
+      flex-basis: 50%;
+      border-right: 1px solid var(--a-base-9);
+      padding-right: 20px;
+    }
+    & > .apos-field__wrapper + .apos-field__wrapper {
+      border-right: none;
+      padding-right: 0;
+      padding-left: 20px;
     }
+
+    & .apos-field__label {
+      word-break: break-all;
+    }
+  }
+
+  :deep(.apos-field__wrapper--highlight > .apos-field) {
+    padding: 10px;
+    background: var(--a-highlight);
   }
 </style>

package/modules/@apostrophecms/schema/ui/apos/components/AposSearchList.vue

@@ -3,8 +3,8 @@
     <li
       v-for="item in list"
       :key="item._id"
-      :class="getClasses(item)"
       v-apos-tooltip="getTooltip(item)"
+      :class="getClasses(item)"
       @click="select(item, $event)"
     >
       <img

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputRelationship.js

@@ -99,7 +99,7 @@ export default {
       return widgetOptions.minSize || [];
     },
     duplicate () {
-      return this.modelValue.duplicate ? 'apos-input--error' : null;
+      return this.modelValue?.duplicate ? 'apos-input--error' : null;
     }
   },
   watch: {

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputSelect.js

@@ -17,8 +17,8 @@ export default {
     };
   },
   computed: {
-    classes () {
-      return [ this.modelValue.duplicate && 'apos-input--error' ];
+    classes() {
+      return [ this.modelValue?.duplicate && 'apos-input--error' ];
     }
   },
   methods: {