apostrophe 3.63.3 → 4.1.0

package/modules/@apostrophecms/ui/ui/apos/components/AposCellLabels.vue

@@ -5,31 +5,49 @@
   >
     <span v-if="manuallyPublished && draft.modified && draft.lastPublishedAt">
       <AposLabel
-        label="apostrophe:pendingUpdates" class="apos-table__cell-field__label"
+        label="apostrophe:pendingUpdates"
+        class="apos-table__cell-field__label"
         tooltip="apostrophe:thereAreActiveChanges"
         :modifiers="[ 'apos-is-success', 'apos-is-filled' ]"
       />
     </span>
     <span v-else-if="draft.submitted">
       <AposLabel
-        label="apostrophe:pending" class="apos-table__cell-field__label"
+        label="apostrophe:pending"
+        class="apos-table__cell-field__label"
         tooltip="apostrophe:changesAwaitingApproval"
         :modifiers="[ 'apos-is-filled' ]"
       />
     </span>
     <span v-if="manuallyPublished && !draft.lastPublishedAt">
       <AposLabel
-        label="apostrophe:draft" class="apos-table__cell-field__label"
+        label="apostrophe:draft"
+        class="apos-table__cell-field__label"
         :modifiers="[ 'apos-is-warning', 'apos-is-filled' ]"
         tooltip="apostrophe:notYetPublished"
       />
     </span>
     <span v-if="draft.archived">
       <AposLabel
-        label="apostrophe:archived" class="apos-table__cell-field__label"
+        label="apostrophe:archived"
+        class="apos-table__cell-field__label"
         :modifiers="[ 'apos-is-filled', 'apos-is-danger' ]"
       />
     </span>
+    <span
+      v-for="({component, props, if: conditions}, index) in customCellIndicators"
+      :key="index"
+    >
+      <component
+        :is="component"
+        v-if="evaluateConditions(conditions)"
+        class="apos-table__cell-field__label"
+        v-bind="props"
+        :header="header"
+        :draft="draft"
+        :published="published"
+      />
+    </span>
   </div>
 </template>
 
@@ -38,7 +56,33 @@ import AposCellMixin from 'Modules/@apostrophecms/ui/mixins/AposCellMixin';
 
 export default {
   name: 'AposCellLabels',
-  mixins: [ AposCellMixin ]
+  mixins: [ AposCellMixin ],
+  data() {
+    return {
+      customCellIndicators: apos.schema.customCellIndicators
+    };
+  },
+  methods: {
+    evaluateConditions(conditions = {}) {
+      try {
+        return Object.entries(conditions).every(([ property, expected ]) => {
+          const properties = property.split('.');
+
+          const draftProp = properties.reduce((acc, cur) => {
+            if (Object.hasOwn(acc, cur)) {
+              return acc[cur];
+            }
+
+            throw new Error(`Property not found in draft document: ${property}`);
+          }, this.draft);
+
+          return draftProp === expected;
+        });
+      } catch (err) {
+        return false;
+      }
+    }
+  }
 };
 </script>
 

package/modules/@apostrophecms/ui/ui/apos/components/AposCheckbox.vue

@@ -1,30 +1,35 @@
 <template>
   <label
-    class="apos-choice-label" :for="id"
+    class="apos-choice-label"
+    :for="id"
     :class="{'apos-choice-label--disabled': field.readOnly}"
     :tabindex="{'-1' : field.hideLabel}"
   >
     <input
+      :id="id"
       v-model="checkProxy"
-      type="checkbox" class="apos-sr-only apos-input--choice apos-input--checkbox"
+      type="checkbox"
+      class="apos-sr-only apos-input--choice apos-input--checkbox"
       :value="choice.value"
       :name="field.name"
-      :id="id" :aria-label="choice.label || field.label"
-      :tabindex="tabindex" :disabled="field.readOnly || choice.readOnly"
+      :aria-label="choice.label || field.label"
+      :tabindex="tabindex"
+      :disabled="field.readOnly || choice.readOnly"
       :is-indeterminate="choice.indeterminate === true ? 'true' : 'false'"
       @change="update"
     >
     <span class="apos-input-indicator" aria-hidden="true">
       <component
-        v-if="isChecked(checked)"
         :is="`${
           choice.indeterminate ? 'minus-icon' : 'check-bold-icon'
         }`"
+        v-if="isChecked(modelValue)"
         :size="10"
       />
     </span>
     <span
-      :class="{'apos-sr-only': field.hideLabel }" v-if="choice.label"
+      v-if="choice.label"
+      :class="{'apos-sr-only': field.hideLabel }"
       class="apos-choice-label-text"
     >
       {{ $t(choice.label) }}
@@ -35,13 +40,8 @@
 <script>
 
 export default {
-  // Custom model to handle the v-model connection on the parent.
-  model: {
-    prop: 'checked',
-    event: 'change'
-  },
   props: {
-    checked: {
+    modelValue: {
       type: [ Array, Boolean ],
       default: false
     },
@@ -64,7 +64,7 @@ export default {
       default: null
     }
   },
-  emits: [ 'change', 'updated' ],
+  emits: [ 'update:modelValue', 'updated' ],
   data() {
     return {
       tabindex: this.field.disableFocus ? '-1' : '0'
@@ -74,21 +74,21 @@ export default {
     // Handle the local check state within this component.
     checkProxy: {
       get() {
-        return this.checked;
+        return this.modelValue;
       },
       set(val) {
         if (!this.choice.indeterminate || this.choice.triggerIndeterminateEvent) {
           // Only update the model if the box was *not* indeterminate.
-          this.$emit('change', val);
+          this.$emit('update:modelValue', val);
         }
       }
     }
   },
   methods: {
-    isChecked(checked) {
-      return Array.isArray(checked)
-        ? checked.includes(this.choice.value)
-        : checked;
+    isChecked(value) {
+      return Array.isArray(value)
+        ? value.includes(this.choice.value)
+        : value;
     },
     // This event is only necessary if the parent needs to do *more* than simply
     // keep track of an array of checkbox values. For example, AposTagApply

package/modules/@apostrophecms/ui/ui/apos/components/AposCloudUploadIcon.vue

@@ -1,13 +1,18 @@
 <template>
   <svg
-    width="64px" height="42.6px"
-    viewBox="0 4.008 64 42.613" xmlns="http://www.w3.org/2000/svg"
+    width="64px"
+    height="42.6px"
+    viewBox="0 4.008 64 42.613"
+    xmlns="http://www.w3.org/2000/svg"
   >
     <defs>
       <linearGradient
-        gradientUnits="userSpaceOnUse" x1="12"
-        y1="4" x2="12"
-        y2="20" id="apos-upload-gradient"
+        id="apos-upload-gradient"
+        gradientUnits="userSpaceOnUse"
+        x1="12"
+        y1="4"
+        x2="12"
+        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);" />

package/modules/@apostrophecms/ui/ui/apos/components/AposCombo.vue

@@ -6,21 +6,21 @@
   >
     <ul
       ref="select"
+      v-click-outside-element="closeList"
       role="button"
       :aria-expanded="showedList.toString()"
       :aria-controls="`${field._id}-combo`"
-      v-click-outside-element="closeList"
       class="apos-input-wrapper apos-combo__select"
-      @click="toggleList"
       :tabindex="field.readOnly ? null : 0"
+      @click="toggleList"
       @keydown.prevent.space="toggleList"
       @keydown.prevent.up="toggleList"
       @keydown.prevent.down="toggleList"
     >
       <li
-        class="apos-combo__selected"
         v-for="checked in selectedItems"
         :key="objectValues ? checked.value : checked"
+        class="apos-combo__selected"
         @click.stop="selectOption(getSelectedOption(checked))"
       >
         {{ getSelectedOption(checked)?.label }}
@@ -49,16 +49,16 @@
     >
       <li
         v-if="typehead"
-        class="apos-combo__list-typehead"
         key="__typehead"
+        class="apos-combo__list-typehead"
         @click.stop="$refs.input.focus()"
       >
         <input
+          ref="input"
           class="apos-combo__typehead"
           type="text"
           :placeholder="$t('apostrophe:search')"
           :value="thInput"
-          ref="input"
           @input="onTypeheadInput"
           @keydown="onTypeheadKey"
         >
@@ -69,11 +69,11 @@
         />
       </li>
       <li
+        v-for="(choice, i) in options"
         :key="choice.value"
         class="apos-combo__list-item"
         role="menuitemcheckbox"
         :class="{focused: focusedItemIndex === i}"
-        v-for="(choice, i) in options"
         @click.stop="selectOption(choice)"
         @mouseover="focusedItemIndex = i"
       >
@@ -101,7 +101,7 @@ export default {
       type: Object,
       required: true
     },
-    value: {
+    modelValue: {
       type: Object,
       required: true
     },
@@ -121,7 +121,7 @@ export default {
     }
   },
 
-  emits: [ 'select-items', 'toggle', 'input' ],
+  emits: [ 'select-items', 'toggle', 'update:modelValue' ],
   data () {
 
     return {
@@ -142,7 +142,7 @@ export default {
     },
     selectedItems() {
       if (!this.showSelectAll || !this.allItemsSelected()) {
-        return this.value.data;
+        return this.modelValue.data;
       }
       if (this.objectValues) {
         const { listLabel } = this.getSelectAllLabel();
@@ -157,13 +157,13 @@ export default {
   mounted() {
     this.boxResizeObserver.observe(this.$refs.select);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.boxResizeObserver.unobserve(this.$refs.select);
   },
   methods: {
     onTypeheadInput(e) {
       this.thInput = e.target.value;
-      this.$emit('input', this.thInput);
+      this.$emit('update:modelValue', this.thInput);
     },
     onTypeheadKey(e) {
       const stop = () => {
@@ -276,7 +276,7 @@ export default {
       this.focusedItemIndex = null;
       this.$refs.list.scrollTo({ top: 0 });
       this.thInput = '';
-      this.$emit('input', this.thInput);
+      this.$emit('update:modelValue', this.thInput);
     },
     getBoxResizeObserver() {
       return new ResizeObserver(([ { target } ]) => {
@@ -307,10 +307,10 @@ export default {
           : entry === choice.value
       );
 
-      return this.value.data.some(condition);
+      return this.modelValue.data.some(condition);
     },
     allItemsSelected () {
-      return this.choices.length && this.value.data.length === this.choices.length;
+      return this.choices.length && this.modelValue.data.length === this.choices.length;
     },
     getSelectedOption(checked) {
       if (this.objectValues) {
@@ -475,7 +475,7 @@ export default {
     cursor: not-allowed;
   }
 
-  ::v-deep .apos-indicator {
+  :deep(.apos-indicator) {
     width: 10px;
     height: 10px;
   }