From f17c5164f23d8bfe83de462edb131aa3138ff09b Mon Sep 17 00:00:00 2001
From: Etienne Laurent <etldev@tuta.io>
Date: Thu, 9 May 2024 13:39:03 +0200
Subject: [PATCH 1/6] fix cypress tests

---
 .../widget-type/ui/apos/components/AposWidgetEditor.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue b/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
index 61474184a5..324e303ea5 100644
--- a/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
+++ b/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
@@ -200,9 +200,9 @@ export default {
       this.evaluateConditions();
     },
     async save() {
-      const widget = klona(this.docFields.data);
       this.triggerValidation = true;
       this.$nextTick(async () => {
+        const widget = klona(this.docFields.data);
         if (this.docFields.hasErrors) {
           this.triggerValidation = false;
           return;

From a61a4edce8dbd27d17c265eb8a61be2d31d4da5e Mon Sep 17 00:00:00 2001
From: Etienne Laurent <etldev@tuta.io>
Date: Thu, 9 May 2024 16:52:01 +0200
Subject: [PATCH 2/6] pass a limit prop to AposModalTabs

---
 .../modal/ui/apos/components/AposModalTabs.vue         | 10 ++++++++++
 .../ui/apos/components/AposWidgetEditor.vue            |  1 +
 2 files changed, 11 insertions(+)

diff --git a/modules/@apostrophecms/modal/ui/apos/components/AposModalTabs.vue b/modules/@apostrophecms/modal/ui/apos/components/AposModalTabs.vue
index d9264572e7..6f6e606041 100644
--- a/modules/@apostrophecms/modal/ui/apos/components/AposModalTabs.vue
+++ b/modules/@apostrophecms/modal/ui/apos/components/AposModalTabs.vue
@@ -59,6 +59,10 @@ export default {
     orientation: {
       type: String,
       default: 'vertical'
+    },
+    limit: {
+      type: Number,
+      default: 0
     }
   },
   emits: [ 'select-tab' ],
@@ -71,6 +75,12 @@ export default {
       // a top-level property safe
       const tab = { ...this.tabs[i] };
       tab.action = tab.name;
+
+      if (!this.limit) {
+        visibleTabs.push(this.tabs[i]);
+        continue;
+      }
+
       if (i < 5) {
         visibleTabs.push(tab);
       } else {
diff --git a/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue b/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
index 324e303ea5..d7975a45ae 100644
--- a/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
+++ b/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
@@ -17,6 +17,7 @@
         :tabs="tabs"
         orientation="horizontal"
         :errors="fieldErrors"
+        limit="5"
         @select-tab="switchPane"
       />
     </template>

From d8d7f00ebfa50f107a75d8ed607fe3c764978ea7 Mon Sep 17 00:00:00 2001
From: Etienne Laurent <etldev@tuta.io>
Date: Thu, 9 May 2024 17:10:36 +0200
Subject: [PATCH 3/6] make a sparate AposWidgetModalTabs used only by
 AposWidgetEditor

---
 .../ui/apos/components/AposModalTabs.vue      | 129 +-------
 .../apos/components/AposWidgetModalTabs.vue   | 282 ++++++++++++++++++
 .../ui/apos/components/AposWidgetEditor.vue   |   3 +-
 3 files changed, 286 insertions(+), 128 deletions(-)
 create mode 100644 modules/@apostrophecms/modal/ui/apos/components/AposWidgetModalTabs.vue

diff --git a/modules/@apostrophecms/modal/ui/apos/components/AposModalTabs.vue b/modules/@apostrophecms/modal/ui/apos/components/AposModalTabs.vue
index 6f6e606041..af41603560 100644
--- a/modules/@apostrophecms/modal/ui/apos/components/AposModalTabs.vue
+++ b/modules/@apostrophecms/modal/ui/apos/components/AposModalTabs.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="apos-modal-tabs" :class="{ 'apos-modal-tabs--horizontal': orientation === 'horizontal' }">
+  <div class="apos-modal-tabs">
     <ul class="apos-modal-tabs__tabs">
       <li
-        v-for="tab in visibleTabs"
+        v-for="tab in tabs"
         v-show="tab.isVisible !== false"
         :key="tab.name"
         class="apos-modal-tabs__tab"
@@ -14,27 +14,12 @@
           @click="selectTab"
         >
           {{ $t(tab.label) }}
-          <span
-            v-if="tabErrors[tab.name] && tabErrors[tab.name].length"
-            class="apos-modal-tabs__label apos-modal-tabs__label--error"
-          >
+          <span 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) }}
           </span>
         </button>
       </li>
-      <li
-        v-if="hiddenTabs.length"
-        key="placeholder-for-hidden-tabs"
-        class="apos-modal-tabs__tab apos-modal-tabs__tab--small"
-      />
     </ul>
-    <AposContextMenu
-      v-if="hiddenTabs.length"
-      :menu="hiddenTabs"
-      menu-placement="bottom-end"
-      :button="moreMenuButton"
-      @item-clicked="moreMenuHandler($event)"
-    />
   </div>
 </template>
 
@@ -55,49 +40,9 @@ export default {
       default() {
         return {};
       }
-    },
-    orientation: {
-      type: String,
-      default: 'vertical'
-    },
-    limit: {
-      type: Number,
-      default: 0
     }
   },
   emits: [ 'select-tab' ],
-  data() {
-    const visibleTabs = [];
-    const hiddenTabs = [];
-
-    for (let i = 0; i < this.tabs.length; i++) {
-      // Shallow clone is sufficient to make mutating
-      // a top-level property safe
-      const tab = { ...this.tabs[i] };
-      tab.action = tab.name;
-
-      if (!this.limit) {
-        visibleTabs.push(this.tabs[i]);
-        continue;
-      }
-
-      if (i < 5) {
-        visibleTabs.push(tab);
-      } else {
-        hiddenTabs.push(tab);
-      }
-    }
-
-    return {
-      visibleTabs,
-      hiddenTabs,
-      moreMenuButton: {
-        icon: 'dots-vertical-icon',
-        iconOnly: true,
-        type: 'subtle'
-      }
-    };
-  },
   computed: {
     tabErrors() {
       const errors = {};
@@ -124,15 +69,6 @@ export default {
       const tab = e.target;
       const id = tab.id;
       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);
     }
   }
 };
@@ -144,65 +80,6 @@ export default {
   height: 100%;
 }
 
-:deep(.apos-context-menu) {
-  position: absolute;
-  top: 10px;
-  right: 0;
-
-  svg {
-    width: 20px;
-    height: 20px;
-    color: var(--a-base-1);
-  }
-
-  .apos-button--subtle:hover {
-    background-color: initial;
-  }
-}
-
-.apos-modal-tabs--horizontal {
-  position: relative;
-
-  .apos-modal-tabs__tabs {
-    flex-direction: row;
-    border-top: 1px solid var(--a-base-7);
-    border-bottom: 1px solid var(--a-base-7);
-  }
-
-  .apos-modal-tabs__tab {
-    display: flex;
-    width: 100%;
-  }
-
-  .apos-modal-tabs__tab--small {
-    width: 50%;
-    color: var(--a-base-1);
-    background-color: var(--a-base-10);
-    border-bottom: 1px solid var(--a-base-7);
-  }
-
-  .apos-modal-tabs__btn {
-    justify-content: center;
-    color: var(--a-base-1);
-    background-color: var(--a-base-10);
-
-    &:hover, &:focus {
-      color: var(--a-primary-light-40);
-      background-color: var(--a-base-10);
-    }
-
-    &[aria-selected='true'], &[aria-selected='true']:hover, &[aria-selected='true']:focus {
-      color: var(--a-primary);
-      background-color: var(--a-base-10);
-      border-bottom: 3px solid var(--a-primary);
-    }
-  }
-
-  .apos-modal-tabs__btn::before {
-    content: none;
-  }
-}
-
 .apos-modal-tabs__tabs {
   display: flex;
   flex-direction: column;
diff --git a/modules/@apostrophecms/modal/ui/apos/components/AposWidgetModalTabs.vue b/modules/@apostrophecms/modal/ui/apos/components/AposWidgetModalTabs.vue
new file mode 100644
index 0000000000..6d223fe3eb
--- /dev/null
+++ b/modules/@apostrophecms/modal/ui/apos/components/AposWidgetModalTabs.vue
@@ -0,0 +1,282 @@
+<template>
+  <div class="apos-modal-tabs" :class="{ 'apos-modal-tabs--horizontal': orientation === 'horizontal' }">
+    <ul class="apos-modal-tabs__tabs">
+      <li
+        v-for="tab in visibleTabs"
+        v-show="tab.isVisible !== false"
+        :key="tab.name"
+        class="apos-modal-tabs__tab"
+      >
+        <button
+          :id="tab.name"
+          class="apos-modal-tabs__btn"
+          :aria-selected="tab.name === current ? true : false"
+          @click="selectTab"
+        >
+          {{ $t(tab.label) }}
+          <span
+            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) }}
+          </span>
+        </button>
+      </li>
+      <li
+        v-if="hiddenTabs.length"
+        key="placeholder-for-hidden-tabs"
+        class="apos-modal-tabs__tab apos-modal-tabs__tab--small"
+      />
+    </ul>
+    <AposContextMenu
+      v-if="hiddenTabs.length"
+      :menu="hiddenTabs"
+      menu-placement="bottom-end"
+      :button="moreMenuButton"
+      @item-clicked="moreMenuHandler($event)"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AposWidgetModalTabs',
+  props: {
+    tabs: {
+      required: true,
+      type: Array
+    },
+    current: {
+      type: String,
+      default: ''
+    },
+    errors: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    orientation: {
+      type: String,
+      default: 'vertical'
+    }
+  },
+  emits: [ 'select-tab' ],
+  data() {
+    const visibleTabs = [];
+    const hiddenTabs = [];
+
+    for (let i = 0; i < this.tabs.length; i++) {
+      // Shallow clone is sufficient to make mutating
+      // a top-level property safe
+      const tab = { ...this.tabs[i] };
+      tab.action = tab.name;
+      if (i < 5) {
+        visibleTabs.push(tab);
+      } else {
+        hiddenTabs.push(tab);
+      }
+    }
+
+    return {
+      visibleTabs,
+      hiddenTabs,
+      moreMenuButton: {
+        icon: 'dots-vertical-icon',
+        iconOnly: true,
+        type: 'subtle'
+      }
+    };
+  },
+  computed: {
+    tabErrors() {
+      const errors = {};
+      for (const key in this.errors) {
+        errors[key] = [];
+        for (const errorKey in this.errors[key]) {
+          if (this.errors[key][errorKey]) {
+            errors[key].push(key);
+          }
+        }
+      }
+      return errors;
+    }
+  },
+  methods: {
+    generateErrorLabel(errorCount) {
+      let label = 'Error';
+      if (errorCount > 1) {
+        label += 's';
+      }
+      return label;
+    },
+    selectTab: function (e) {
+      const tab = e.target;
+      const id = tab.id;
+      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);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.apos-modal-tabs {
+  display: flex;
+  height: 100%;
+}
+
+:deep(.apos-context-menu) {
+  position: absolute;
+  top: 10px;
+  right: 0;
+
+  svg {
+    width: 20px;
+    height: 20px;
+    color: var(--a-base-1);
+  }
+
+  .apos-button--subtle:hover {
+    background-color: initial;
+  }
+}
+
+.apos-modal-tabs--horizontal {
+  position: relative;
+
+  .apos-modal-tabs__tabs {
+    flex-direction: row;
+    border-top: 1px solid var(--a-base-7);
+    border-bottom: 1px solid var(--a-base-7);
+  }
+
+  .apos-modal-tabs__tab {
+    display: flex;
+    width: 100%;
+  }
+
+  .apos-modal-tabs__tab--small {
+    width: 50%;
+    color: var(--a-base-1);
+    background-color: var(--a-base-10);
+    border-bottom: 1px solid var(--a-base-7);
+  }
+
+  .apos-modal-tabs__btn {
+    justify-content: center;
+    color: var(--a-base-1);
+    background-color: var(--a-base-10);
+
+    &:hover, &:focus {
+      color: var(--a-primary-light-40);
+      background-color: var(--a-base-10);
+    }
+
+    &[aria-selected='true'], &[aria-selected='true']:hover, &[aria-selected='true']:focus {
+      color: var(--a-primary);
+      background-color: var(--a-base-10);
+      border-bottom: 3px solid var(--a-primary);
+    }
+  }
+
+  .apos-modal-tabs__btn::before {
+    content: none;
+  }
+}
+
+.apos-modal-tabs__tabs {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: var(--a-base-9);
+}
+
+.apos-modal-tabs__tab {
+  display: block;
+}
+
+.apos-modal-tabs__label {
+  display: inline-block;
+  padding: 3px;
+  border: 1px solid var(--a-base-0);
+  font-size: var(--a-type-tiny);
+  border-radius: 4px 3px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  pointer-events: none;
+}
+
+.apos-modal-tabs__label--error {
+  border: 1px solid var(--a-danger);
+}
+
+.apos-modal-tabs__btn {
+  @include apos-button-reset();
+  @include type-base;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 60px;
+  padding: 25px 10px;
+  border-bottom: 1px solid var(--a-base-7);
+  color: var(--a-text-primary);
+  background-color: var(--a-base-9);
+  text-align: left;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+
+  @include media-up(lap) {
+    padding: 25px 10px 25px 20px;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    background-color: var(--a-primary);
+    transition: width 0.25s cubic-bezier(0, 1.61, 1, 1.23);
+  }
+
+  &[aria-selected='true'],
+  &[aria-selected='true']:hover,
+  &[aria-selected='true']:focus {
+    padding-left: 15px;
+    background-color: var(--a-background-primary);
+    &::before {
+      background-color: var(--a-primary);
+    }
+  }
+
+  &:hover,
+  &:focus {
+    background-color: var(--a-base-10);
+    &::before {
+      width: 3px;
+      background-color: var(--a-base-5);
+    }
+  }
+
+  &[aria-selected='true'] {
+    &::before {
+      width: 6px;
+    }
+  }
+}
+</style>
diff --git a/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue b/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
index d7975a45ae..6e179986b2 100644
--- a/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
+++ b/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
@@ -10,14 +10,13 @@
   >
     <template #breadcrumbs>
       <AposModalBreadcrumbs v-if="breadcrumbs && breadcrumbs.length" :items="breadcrumbs" />
-      <AposModalTabs
+      <AposWidgetModalTabs
         v-if="tabs.length"
         :key="tabKey"
         :current="currentTab"
         :tabs="tabs"
         orientation="horizontal"
         :errors="fieldErrors"
-        limit="5"
         @select-tab="switchPane"
       />
     </template>

From 3034c701230f01c502d908a23beb49ec40fcb48a Mon Sep 17 00:00:00 2001
From: "E.T" <ETLaurent@users.noreply.github.com>
Date: Thu, 9 May 2024 19:55:49 +0200
Subject: [PATCH 4/6] fix image cropper stencil getting smaller when changing
 aspect ratio (#4529)

---
 CHANGELOG.md                                                     | 1 +
 .../@apostrophecms/image/ui/apos/components/AposImageCropper.vue | 1 +
 2 files changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 58b08f7c39..75db27f23e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@ Thanks to Michelin for contributing this feature.
 
 * Autocrop image attachments for referenced documents when replacing an image in the Media Manager.
 * Fixes modals in transition, as well as slider transition on overlay opacity.
+* Changing the aspect ratio multiple times in the image cropper modal no longer makes the stencil smaller and smaller.
 
 ## 4.2.1 (2024-04-29)
 
diff --git a/modules/@apostrophecms/image/ui/apos/components/AposImageCropper.vue b/modules/@apostrophecms/image/ui/apos/components/AposImageCropper.vue
index d0524a723e..78a536f929 100644
--- a/modules/@apostrophecms/image/ui/apos/components/AposImageCropper.vue
+++ b/modules/@apostrophecms/image/ui/apos/components/AposImageCropper.vue
@@ -105,6 +105,7 @@ export default {
     },
     aspectRatio: {
       handler(newVal) {
+        this.$refs.cropper.reset();
         this.stencilProps.aspectRatio = newVal;
         this.$refs.cropper.refresh();
       }

From 082e6d82f41ed58216c4564d543ed1c537882389 Mon Sep 17 00:00:00 2001
From: Miro Yovchev <2827783+myovchev@users.noreply.github.com>
Date: Fri, 10 May 2024 11:31:39 +0300
Subject: [PATCH 5/6] Hide single tab

---
 CHANGELOG.md                                                   | 3 +++
 .../widget-type/ui/apos/components/AposWidgetEditor.vue        | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 75db27f23e..510b2b9a8b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,9 @@
 except as part of the admin UI bundle which depends on it. For use with external front ends such as [apostrophe-astro](https://github.com/apostrophecms/apostrophe-astro).
 Thanks to Michelin for contributing this feature.
 
+### Fixes
+* Do not show widget editor tabs when there is only one tab.
+
 ### Changes
 
 * Improves `debounce` function to handle async properly (waiting for previous async call to finish before to trigger new one).
diff --git a/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue b/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
index 6e179986b2..ed650e2cf5 100644
--- a/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
+++ b/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
@@ -11,7 +11,7 @@
     <template #breadcrumbs>
       <AposModalBreadcrumbs v-if="breadcrumbs && breadcrumbs.length" :items="breadcrumbs" />
       <AposWidgetModalTabs
-        v-if="tabs.length"
+        v-if="tabs.length > 1"
         :key="tabKey"
         :current="currentTab"
         :tabs="tabs"

From c5d7a214ec8e341e0678b79f0fbd81232682516a Mon Sep 17 00:00:00 2001
From: Robert Means <robert@robertmeans.net>
Date: Fri, 10 May 2024 10:34:19 -0400
Subject: [PATCH 6/6] Add alternative fix for "ungrouped" tab

---
 CHANGELOG.md                                                    | 2 +-
 .../widget-type/ui/apos/components/AposWidgetEditor.vue         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 510b2b9a8b..5a53d552e2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,7 +13,7 @@ except as part of the admin UI bundle which depends on it. For use with external
 Thanks to Michelin for contributing this feature.
 
 ### Fixes
-* Do not show widget editor tabs when there is only one tab.
+* Do not show widget editor tabs when the developer hasn't created any groups.
 
 ### Changes
 
diff --git a/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue b/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
index ed650e2cf5..96f6531689 100644
--- a/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
+++ b/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
@@ -11,7 +11,7 @@
     <template #breadcrumbs>
       <AposModalBreadcrumbs v-if="breadcrumbs && breadcrumbs.length" :items="breadcrumbs" />
       <AposWidgetModalTabs
-        v-if="tabs.length > 1"
+        v-if="tabs.length && tabs[0].name !== 'ungrouped'"
         :key="tabKey"
         :current="currentTab"
         :tabs="tabs"