apostrophe 4.3.1 → 4.3.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 4.3.3 (2024-06-04)
+
+* Removes `$nextTick` use to re render schema in `AposArrayEditor` because it was triggering weird vue error in production.
+Instead, makes the AposSchema for loop keys more unique using `modelValue.data._id`, 
+if document changes it re-renders schema fields.
+
+## 4.3.2 (2024-05-18)
+
+### Fixes
+
+* Corrects a regression introduced in version 4.3.0 that broke the validation of widget modals, resulting in a confusing
+error on the page. A "required" field in a widget, for instance, once again blocks the save operation properly.
+
+### Changes
+
+* Improves widget tab UI for the hidden entries, improves UX when validation errors are present in non-focused tabs.
+
 ## 4.3.1 (2024-05-17)
 
 ### Fixes

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

@@ -18,21 +18,22 @@
             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) }}
+            {{ tabErrors[tab.name].length }} {{ generateErrorLabel(tabErrors[tab.name].length) }}
           </span>
         </button>
       </li>
       <li
-        v-if="hiddenTabs.length"
+        v-if="menuTabs.length"
         key="placeholder-for-hidden-tabs"
         class="apos-modal-tabs__tab apos-modal-tabs__tab--small"
       />
     </ul>
     <AposContextMenu
-      v-if="hiddenTabs.length"
-      :menu="hiddenTabs"
+      v-if="menuTabs.length"
+      :menu="menuTabs"
       menu-placement="bottom-end"
       :button="moreMenuButton"
+      data-apos-test="context-menu-tabs"
       @item-clicked="moreMenuHandler($event)"
     />
   </div>
@@ -64,7 +65,6 @@ export default {
   emits: [ 'select-tab' ],
   data() {
     const visibleTabs = [];
-    const hiddenTabs = [];
 
     for (let i = 0; i < this.tabs.length; i++) {
       // Shallow clone is sufficient to make mutating
@@ -73,14 +73,11 @@ export default {
       tab.action = tab.name;
       if (i < 5) {
         visibleTabs.push(tab);
-      } else {
-        hiddenTabs.push(tab);
       }
     }
 
     return {
       visibleTabs,
-      hiddenTabs,
       moreMenuButton: {
         icon: 'dots-vertical-icon',
         iconOnly: true,
@@ -100,6 +97,25 @@ export default {
         }
       }
       return errors;
+    },
+    menuTabs() {
+      return this.tabs.map((tab) => {
+        const modifiers = [];
+        if (tab.name === this.current) {
+          modifiers.push('selected');
+          if (!this.tabErrors[tab.name] || !this.tabErrors[tab.name].length) {
+            modifiers.push('primary');
+          }
+        }
+        if (this.tabErrors[tab.name] && this.tabErrors[tab.name].length) {
+          modifiers.push('danger');
+        }
+        return {
+          ...tab,
+          action: tab.name,
+          modifiers
+        };
+      });
     }
   },
   methods: {
@@ -116,12 +132,6 @@ export default {
       this.$emit('select-tab', id);
     },
     moreMenuHandler(item) {
-      const lastVisibleTab = this.visibleTabs[this.visibleTabs.length - 1];
-      const selectedItem = this.hiddenTabs.find((tab) => tab.name === item);
-
-      this.hiddenTabs.splice(this.hiddenTabs.indexOf(selectedItem), 1, lastVisibleTab);
-      this.visibleTabs.splice(this.visibleTabs.length - 1, 1, selectedItem);
-
       this.$emit('select-tab', item);
     }
   }
@@ -219,6 +229,7 @@ export default {
 
 .apos-modal-tabs__label--error {
   border: 1px solid var(--a-danger);
+  margin-left: 5px;
 }
 
 .apos-modal-tabs__btn {

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

@@ -32,7 +32,7 @@
     <component
       :is="fieldStyle === 'table' ? 'td' : 'div'"
       v-for="field in schema"
-      :key="field.name.concat(field._id ?? '')"
+      :key="generateItemUniqueKey(field)"
       :data-apos-field="field.name"
       :style="(fieldStyle === 'table' && field.columnStyle) || {}"
       :class="{'apos-field--hidden': !displayComponent(field)}"

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

@@ -149,7 +149,7 @@ export default {
       const [ _id, name ] = first.path.split('.');
       await this.select(_id);
       const aposSchema = this.$refs.schema;
-      await this.nextTick();
+      await this.$nextTick();
       aposSchema.scrollFieldIntoView(name);
     }
     this.titleFieldChoices = await this.getTitleFieldChoices();
@@ -160,11 +160,7 @@ export default {
         return;
       }
       if (await this.validate(true, false)) {
-        // Force the array editor to totally reset to avoid in-schema
-        // animations when switching (e.g., the relationship input).
         this.currentDocToCurrentItem();
-        this.currentId = null;
-        await this.nextTick();
         this.currentId = _id;
         this.currentDoc = {
           hasErrors: false,
@@ -261,7 +257,7 @@ export default {
       if (validateItem) {
         this.triggerValidation = true;
       }
-      await this.nextTick();
+      await this.$nextTick();
       if (validateLength) {
         this.updateMinMax();
       }
@@ -279,14 +275,6 @@ export default {
         return true;
       }
     },
-    // Awaitable nextTick
-    nextTick() {
-      return new Promise((resolve, reject) => {
-        this.$nextTick(() => {
-          return resolve();
-        });
-      });
-    },
     newInstance() {
       const instance = {};
       for (const field of this.schema) {

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

@@ -181,7 +181,7 @@ export default {
         this.populateDocData();
       }
     },
-    generation() {
+    generation(generated) {
       // repopulate the schema.
       this.populateDocData();
     },
@@ -331,6 +331,10 @@ export default {
     },
     highlight(fieldName) {
       return this.meta[fieldName]?.['@apostrophecms/schema:highlight'];
+    },
+    generateItemUniqueKey(field) {
+      return `${field.name}:${field._id ?? ''}:${this.modelValue?.data?._id ?? ''}`;
+
     }
   }
 };

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

@@ -4,6 +4,7 @@
       class="apos-context-menu__button"
       :class="modifiers"
       :tabindex="tabindex"
+      data-apos-test="context-menu-item"
       @click="click"
     >
       {{ $t(label) }}
@@ -91,6 +92,15 @@ export default {
       }
     }
 
+    &--primary {
+      color: var(--a-primary);
+      &:hover,
+      &:focus,
+      &:active {
+        color: var(--a-primary);
+      }
+    }
+
     &--disabled {
       color: var(--a-base-5);
       &:hover,

package/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue

@@ -52,7 +52,7 @@
       <AposButton
         type="primary"
         :label="saveLabel"
-        :disabled="docFields.hasErrors"
+        :disabled="errorCount > 0"
         @click="save"
       />
     </template>
@@ -62,6 +62,7 @@
 <script>
 import AposModifiedMixin from 'Modules/@apostrophecms/ui/mixins/AposModifiedMixin';
 import AposEditorMixin from 'Modules/@apostrophecms/modal/mixins/AposEditorMixin';
+import AposDocErrorsMixin from 'Modules/@apostrophecms/modal/mixins/AposDocErrorsMixin';
 import AposModalTabsMixin from 'Modules/@apostrophecms/modal/mixins/AposModalTabsMixin';
 import { detectDocChange } from 'Modules/@apostrophecms/schema/lib/detectChange';
 import cuid from 'cuid';
@@ -69,7 +70,7 @@ import { klona } from 'klona';
 
 export default {
   name: 'AposWidgetEditor',
-  mixins: [ AposModifiedMixin, AposEditorMixin, AposModalTabsMixin ],
+  mixins: [ AposModifiedMixin, AposEditorMixin, AposDocErrorsMixin, AposModalTabsMixin ],
   props: {
     type: {
       required: true,
@@ -193,6 +194,7 @@ export default {
   },
   methods: {
     updateDocFields(value) {
+      this.updateFieldErrors(value.fieldState);
       this.docFields.data = {
         ...this.docFields.data,
         ...value.data
@@ -203,8 +205,14 @@ export default {
       this.triggerValidation = true;
       this.$nextTick(async () => {
         const widget = klona(this.docFields.data);
-        if (this.docFields.hasErrors) {
+        if (this.errorCount > 0) {
           this.triggerValidation = false;
+          await apos.notify('apostrophe:resolveErrorsBeforeSaving', {
+            type: 'warning',
+            icon: 'alert-circle-icon',
+            dismiss: true
+          });
+          this.focusNextError();
           return;
         }
         try {
@@ -239,6 +247,9 @@ export default {
           : null;
       });
       return widget;
+    },
+    getAposSchema(field) {
+      return this.$refs[field.group.name][0];
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apostrophe",
-  "version": "4.3.1",
+  "version": "4.3.3",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {