Merge branch 'main' into PRO-6048-style-tab

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 the developer hasn't created any groups.
+
 ### Changes
 
 * Improves `debounce` function to handle async properly (waiting for previous async call to finish before to trigger new one).
@@ -21,6 +24,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)
 

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();
  }

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,39 +40,9 @@ export default {
  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 = {};
@@ -114,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);
  }
  }
 };