apostrophe 4.6.1 → 4.7.0

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

@@ -143,14 +143,16 @@ export default {
 .apos-field__label {
   @include type-label;
 
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0 0 $spacing-base;
-  padding: 0;
-  color: var(--a-text-primary);
-  gap: $spacing-double;
+  & {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 0 $spacing-base;
+    padding: 0;
+    color: var(--a-text-primary);
+    gap: $spacing-double;
+  }
 
   &.apos-field__label--meta-left {
     justify-content: flex-start;
@@ -180,9 +182,11 @@ export default {
 .apos-field__help {
   @include type-base;
 
-  margin: 0 0 $spacing-base;
-  line-height: var(--a-line-tall);
-  color: var(--a-base-3);
+  & {
+    margin: 0 0 $spacing-base;
+    line-height: var(--a-line-tall);
+    color: var(--a-base-3);
+  }
 }
 
 .apos-field__help-tooltip__icon {
@@ -198,8 +202,10 @@ export default {
 .apos-field__error {
   @include type-help;
 
-  margin: $spacing-base 0;
-  color: var(--a-danger);
+  & {
+    margin: $spacing-base 0;
+    color: var(--a-danger);
+  }
 }
 
 .apos-field__required {

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

@@ -149,13 +149,17 @@ export default {
   &__title {
     @include type-base;
 
-    color: var(--a-text-primary);
+    & {
+      color: var(--a-text-primary);
+    }
   }
 
   &__field {
     @include type-base;
 
-    color: var(--a-base-2);
+    & {
+      color: var(--a-base-2);
+    }
   }
 
   &.apos-search__item--disabled {

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

@@ -111,10 +111,12 @@ export default {
   &__schema-label {
     @include type-base;
 
-    display: block;
-    padding-bottom: $spacing-double;
-    color: var(--a-base-3);
-    line-height: 1;
+    & {
+      display: block;
+      padding-bottom: $spacing-double;
+      color: var(--a-base-3);
+      line-height: 1;
+    }
   }
 
   &__controls {

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

@@ -1,10 +1,10 @@
 // NOTE: This is a temporary component, copying AposInputString. Base modules
 // already have `type: 'slug'` fields, so this is needed to avoid distracting
 // errors.
-import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
-import sluggo from 'sluggo';
-import debounce from 'debounce-async';
 import { klona } from 'klona';
+import sluggo from 'sluggo';
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+import { debounceAsync } from 'Modules/@apostrophecms/ui/utils';
 
 export default {
   name: 'AposInputSlug',
@@ -102,12 +102,17 @@ export default {
     }
   },
   async mounted() {
-    this.debouncedCheckConflict = debounce(() => this.checkConflict(), 250);
+    this.debouncedCheckConflict = debounceAsync(this.requestCheckConflict, 250, {
+      onSuccess: this.setConflict
+    });
     if (this.next.length) {
-      await this.debouncedCheckConflict();
+      await this.debouncedCheckConflict.skipDelay();
     }
     this.originalParentSlug = this.getParentSlug(this.next);
   },
+  onBeforeUnmount() {
+    this.debouncedCheckConflict.cancel();
+  },
   methods: {
     getParentSlug(slug = '') {
       return slug.slice(-1) === '/'
@@ -117,15 +122,7 @@ export default {
     async watchNext() {
       this.next = this.slugify(this.next);
       this.validateAndEmit();
-      try {
-        await this.debouncedCheckConflict();
-      } catch (e) {
-        if (e === 'canceled') {
-          // That's fine
-        } else {
-          throw e;
-        }
-      }
+      await this.debouncedCheckConflict();
     },
     validate(value) {
       if (this.conflict) {
@@ -231,7 +228,7 @@ export default {
 
       return updated;
     },
-    async checkConflict() {
+    async requestCheckConflict() {
       let slug;
       try {
         slug = this.next;
@@ -243,31 +240,37 @@ export default {
             },
             draft: true
           });
+
           // Still relevant?
           if (slug === this.next) {
-            this.conflict = false;
-            this.validateAndEmit();
-          } else {
-            // Can ignore it, another request
-            // probably already in-flight
+            return false;
           }
+          // Should not happen, another request
+          // already in-flight shouldn't be possible now.
+          return null;
         }
       } catch (e) {
         // 409: Conflict (slug in use)
         if (e.status === 409) {
           // Still relevant?
           if (slug === this.next) {
-            this.conflict = true;
-            this.validateAndEmit();
-          } else {
-            // Can ignore it, another request
-            // probably already in-flight
+            return true;
           }
+          // Should not happen, another request
+          // already in-flight shouldn't be possible now.
+          return null;
         } else {
           throw e;
         }
       }
     },
+    async setConflict(result) {
+      if (result === null) {
+        return;
+      }
+      this.conflict = result;
+      this.validateAndEmit();
+    },
     passFocus() {
       this.$refs.input.focus();
     },

package/modules/@apostrophecms/schema/ui/apos/scss/AposInputArray.scss

@@ -46,18 +46,22 @@
 .apos-input-array-inline-empty-label {
   @include type-label;
 
-  color: var(--a-base-3);
+  & {
+    color: var(--a-base-3);
+  }
 }
 
 .apos-input-array-inline-table {
   @include type-label;
 
-  position: relative;
-  left: -35px;
-  min-width: calc(100% + 35px);
-  width: max-content;
-  margin: 0 0 $spacing-base;
-  border-collapse: collapse;
+  & {
+    position: relative;
+    left: -35px;
+    min-width: calc(100% + 35px);
+    width: max-content;
+    margin: 0 0 $spacing-base;
+    border-collapse: collapse;
+  }
 
   th {
     height: 40px;
@@ -211,7 +215,9 @@
 
     .apos-input-array-inline-label {
       @include type-label;
+    }
 
+    .apos-input-array-inline-label {
       margin: 0;
       padding-top: $spacing-base;
       padding-bottom: $spacing-base;

package/modules/@apostrophecms/settings/ui/apos/components/AposSettingsManager.vue

@@ -122,7 +122,9 @@ export default {
   &__heading {
     @include type-title;
 
-    margin: 0 0 $spacing-double;
+    & {
+      margin: 0 0 $spacing-double;
+    }
   }
 
   &__content {
@@ -143,7 +145,9 @@ export default {
 .apos-settings__group-item {
   @include type-base;
 
-  margin-bottom: $spacing-half;
+  & {
+    margin-bottom: $spacing-half;
+  }
 
   &.apos-is-active {
     color: var(--a-primary);
@@ -152,10 +156,11 @@ export default {
   > button {
     @include apos-button-reset();
 
-    width: 100%;
-    padding: $spacing-base 0;
-    // TODO do a11y
-    outline: none;
+    & {
+      width: 100%;
+      padding: $spacing-base 0;
+      outline: none;
+    }
   }
 }
 </style>

package/modules/@apostrophecms/translation/ui/apos/components/AposTranslationIndicator.vue

@@ -66,9 +66,11 @@ $background: #F7FEF4;
 .apos-translation-indicator__text {
   @include type-label;
 
-  margin: 0 0 0 4px;
-  color: $color;
-  font-size: var(--a-type-tiny);
+  & {
+    margin: 0 0 0 4px;
+    color: $color;
+    font-size: var(--a-type-tiny);
+  }
 }
 
 #svg-path {

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

@@ -60,17 +60,19 @@ export default {
   .apos-avatar {
     @include type-small;
 
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 30px;
-    height: 30px;
-    border: 1px solid var(--a-base-9);
-    /* stylelint-disable */
-    border-radius: 100%;
-    line-height: 30px;
-    /* stylelint-enable */
-    color: var(--a-white);
-    text-transform: uppercase;
+    & {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 30px;
+      height: 30px;
+      border: 1px solid var(--a-base-9);
+      /* stylelint-disable */
+      border-radius: 100%;
+      line-height: 30px;
+      /* stylelint-enable */
+      color: var(--a-white);
+      text-transform: uppercase;
+    }
   }
 </style>

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

@@ -37,6 +37,7 @@
           :icon-size="iconSize"
           class="apos-button__icon"
           :icon-color="iconFill"
+          @icon="$emit('icon', $event)"
         />
         <slot name="label">
           <span class="apos-button__label" :class="{ 'apos-sr-only' : (iconOnly || type === 'color') }">
@@ -138,7 +139,7 @@ export default {
       default: null
     }
   },
-  emits: [ 'click' ],
+  emits: [ 'click', 'icon' ],
   data() {
     return {
       id: createId()
@@ -231,16 +232,18 @@ export default {
   .apos-button {
     @include type-base;
 
-    position: relative;
-    display: inline-block;
-    overflow: hidden;
-    padding: 10px 20px;
-    border: 1px solid var(--a-base-5);
-    color: var(--a-text-primary);
-    border-radius: var(--a-border-radius);
-    background-color: var(--a-base-9);
-    transition: all 200ms ease;
-    text-decoration: none;
+    & {
+      position: relative;
+      display: inline-block;
+      overflow: hidden;
+      padding: 10px 20px;
+      border: 1px solid var(--a-base-5);
+      color: var(--a-text-primary);
+      border-radius: var(--a-border-radius);
+      background-color: var(--a-base-9);
+      transition: all 200ms ease;
+      text-decoration: none;
+    }
 
     &:hover {
       cursor: pointer;

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

@@ -182,8 +182,10 @@ function menuClose() {
     @include apos-button-reset();
     @include apos-transition();
 
-    padding: $spacing-base + $spacing-half $spacing-double $spacing-base + $spacing-half $spacing-quadruple;
-    border-bottom: 1px solid var(--a-base-9);
+    & {
+      padding: $spacing-base + $spacing-half $spacing-double $spacing-base + $spacing-half $spacing-quadruple;
+      border-bottom: 1px solid var(--a-base-9);
+    }
 
     &:hover,
     &:focus,
@@ -211,7 +213,9 @@ function menuClose() {
   .apos-button-split__menu__dialog-label {
     @include type-large;
 
-    margin-bottom: $spacing-half;
+    & {
+      margin-bottom: $spacing-half;
+    }
   }
 
   .apos-button-split__menu__dialog-description {

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

@@ -65,8 +65,10 @@ export default {
   .apos-table__cell-field--context-menu__content {
     @include apos-transition();
 
-    display: inline-block;
-    opacity: 0.3;
+    & {
+      display: inline-block;
+      opacity: 0.3;
+    }
 
     &.apos-is-visible {
       opacity: 1;

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

@@ -461,14 +461,16 @@ export default {
 .apos-combo__selected {
   @include type-base;
 
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  background-color: var(--a-white);
-  margin: 2px;
-  padding: 5px 8px;
-  border: 1px solid var(--a-base-8);
-  border-radius: var(--a-border-radius);
+  & {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    background-color: var(--a-white);
+    margin: 2px;
+    padding: 5px 8px;
+    border: 1px solid var(--a-base-8);
+    border-radius: var(--a-border-radius);
+  }
 
   &:hover {
     background-color: var(--a-base-8);
@@ -513,8 +515,10 @@ export default {
 .apos-combo__list-item {
   @include type-base;
 
-  padding: 10px 10px 10px 20px;
-  cursor: pointer;
+  & {
+    padding: 10px 10px 10px 20px;
+    cursor: pointer;
+  }
 
   &.focused {
     background-color: var(--a-base-9);
@@ -524,13 +528,15 @@ export default {
 .apos-combo__typehead {
   @include type-base;
 
-  box-sizing: border-box;
-  flex-grow: 1;
-  margin: 0;
-  padding: 10px 10px 10px 20px;
-  border: none;
-  outline: none;
-  background-color: transparent;
+  & {
+    box-sizing: border-box;
+    flex-grow: 1;
+    margin: 0;
+    padding: 10px 10px 10px 20px;
+    border: none;
+    outline: none;
+    background-color: transparent;
+  }
 }
 
 .apos-combo__spinner {

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

@@ -18,6 +18,7 @@
           'aria-haspopup': 'menu',
           'aria-expanded': isOpen ? true : false
         }"
+        @icon="setIconToCenterTo"
         @click.stop="buttonClicked($event)"
       />
       <div
@@ -112,6 +113,10 @@ const props = defineProps({
     default() {
       return createId();
     }
+  },
+  centerOnIcon: {
+    type: Boolean,
+    default: false
   }
 });
 
@@ -120,10 +125,11 @@ const emit = defineEmits([ 'open', 'close', 'item-clicked' ]);
 const isOpen = ref(false);
 const placement = ref(props.menuPlacement);
 const event = ref(null);
-const dropdown = ref();
-const dropdownContent = ref();
+const dropdown = ref(null);
+const dropdownContent = ref(null);
 const dropdownContentStyle = ref({});
-const arrowEl = ref();
+const arrowEl = ref(null);
+const iconToCenterTo = ref(null);
 const menuOffset = getMenuOffset();
 
 defineExpose({
@@ -161,10 +167,10 @@ const buttonState = computed(() => {
 watch(isOpen, (newVal) => {
   emit(newVal ? 'open' : 'close', event.value);
   if (newVal) {
+    setDropdownPosition();
     window.addEventListener('resize', setDropdownPosition);
     window.addEventListener('scroll', setDropdownPosition);
     window.addEventListener('keydown', handleKeyboard);
-    setDropdownPosition();
     dropdownContent.value.querySelector('[tabindex]')?.focus();
   } else {
     window.removeEventListener('resize', setDropdownPosition);
@@ -199,6 +205,12 @@ function hideWhenOtherOpen({ menuId }) {
   }
 }
 
+function setIconToCenterTo(el) {
+  if (el && props.centerOnIcon) {
+    iconToCenterTo.value = el;
+  }
+}
+
 function hide() {
   isOpen.value = false;
 }
@@ -225,9 +237,10 @@ async function setDropdownPosition() {
   if (!dropdown.value || !dropdownContent.value) {
     return;
   }
+  const centerArrowEl = iconToCenterTo.value || dropdown.value;
   const {
     x, y, middlewareData, placement: dropdownPlacement
-  } = await computePosition(dropdown.value, dropdownContent.value, {
+  } = await computePosition(centerArrowEl, dropdownContent.value, {
     placement: props.menuPlacement,
     middleware: [
       offset(menuOffset),
@@ -303,11 +316,13 @@ function handleKeyboard(event) {
 .apos-context-menu__pane {
   @include type-base;
 
-  padding: 20px;
-  border: 1px solid var(--a-base-8);
-  border-radius: var(--a-border-radius);
-  box-shadow: var(--a-box-shadow);
-  background-color: var(--a-background-primary);
+  & {
+    padding: 20px;
+    border: 1px solid var(--a-base-8);
+    border-radius: var(--a-border-radius);
+    box-shadow: var(--a-box-shadow);
+    background-color: var(--a-background-primary);
+  }
 
   &:focus {
     outline: none;

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

@@ -126,11 +126,13 @@ function emitSetArrow(arrowEl) {
 .apos-context-menu__pane {
   @include type-base;
 
-  padding: 20px;
-  border: 1px solid var(--a-base-8);
-  border-radius: var(--a-border-radius);
-  box-shadow: var(--a-box-shadow);
-  background-color: var(--a-background-primary);
+  & {
+    padding: 20px;
+    border: 1px solid var(--a-base-8);
+    border-radius: var(--a-border-radius);
+    box-shadow: var(--a-box-shadow);
+    background-color: var(--a-background-primary);
+  }
 }
 
 .apos-context-menu__items {

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

@@ -76,14 +76,16 @@ export default {
   .apos-context-menu__button {
     @include type-base;
 
-    display: inline-block;
-    flex-grow: 1;
-    width: 100%;
-    padding: 10px 20px;
-    border: none;
-    color: var(--a-base-1);
-    text-align: left;
-    background-color: var(--a-background-primary);
+    & {
+      display: inline-block;
+      flex-grow: 1;
+      width: 100%;
+      padding: 10px 20px;
+      border: none;
+      color: var(--a-base-1);
+      text-align: left;
+      background-color: var(--a-background-primary);
+    }
 
     &:hover {
       cursor: pointer;

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

@@ -34,16 +34,20 @@ export default {
   .apos-title {
     @include type-title;
 
-    margin: 0 0 10px;
+    & {
+      margin: 0 0 10px;
+    }
   }
 
   .apos-hint {
     @include type-base;
 
-    font-style: italic;
-    line-height: var(--a-line-tallest);
-    color: var(--a-base-1);
-    text-align: center;
+    & {
+      font-style: italic;
+      line-height: var(--a-line-tallest);
+      color: var(--a-base-1);
+      text-align: center;
+    }
   }
 
   .apos-emoji {

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

@@ -160,16 +160,19 @@ export default {
 };
 </script>
 <style scoped lang='scss'>
+
   .apos-file-dropzone {
     @include apos-button-reset();
     @include type-base;
 
-    display: block;
-    margin: 10px 0;
-    padding: 20px;
-    border: 2px dashed var(--a-base-8);
-    border-radius: var(--a-border-radius);
-    transition: all 200ms ease;
+    & {
+      display: block;
+      margin: 10px 0;
+      padding: 20px;
+      border: 2px dashed var(--a-base-8);
+      border-radius: var(--a-border-radius);
+      transition: all 200ms ease;
+    }
 
     &:hover {
       border-color: var(--a-primary);

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

@@ -1,5 +1,6 @@
 <template>
   <span
+    ref="icon"
     v-apos-tooltip="tooltip"
     class="apos-indicator"
     :aria-hidden="decorative"
@@ -43,6 +44,10 @@ export default {
       type: Boolean,
       default: true
     }
+  },
+  emits: [ 'icon' ],
+  mounted() {
+    this.$emit('icon', this.$refs.icon);
   }
 };
 </script>