apostrophe 4.3.2 → 4.4.0

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

@@ -5,6 +5,9 @@
       :class="modifiers"
       :tabindex="tabindex"
       data-apos-test="context-menu-item"
+      :data-apos-test-selected="selected"
+      :data-apos-test-danger="danger"
+      :data-apos-test-disabled="disabled"
       @click="click"
     >
       {{ $t(label) }}
@@ -27,6 +30,15 @@ export default {
     tabindex() {
       return this.open ? '0' : '-1';
     },
+    selected() {
+      return this.menuItem.modifiers?.includes('selected');
+    },
+    danger() {
+      return this.menuItem.modifiers?.includes('danger');
+    },
+    disabled() {
+      return this.menuItem.modifiers?.includes('disabled');
+    },
     modifiers() {
       const classes = [];
       if (this.menuItem.modifiers) {
@@ -38,7 +50,7 @@ export default {
     },
     label() {
       let label = this.menuItem.label;
-      if (this.menuItem.modifiers && this.menuItem.modifiers.includes('selected')) {
+      if (this.selected) {
         label = {
           key: 'apostrophe:selectedMenuItem',
           label: this.$t(this.menuItem.label)
@@ -62,31 +74,37 @@ export default {
 
   .apos-context-menu__button {
     @include type-base;
-    flex-grow: 1;
+
     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;
       color: var(--a-text-primary);
     }
+
     &:focus {
       outline: none;
       color: var(--a-text-primary);
     }
+
     &:active {
       color: var(--a-base-1);
     }
 
     &--danger {
       color: var(--a-danger);
+
       &:hover {
         color: var(--a-danger-button-hover);
       }
+
       &:focus, &:active {
         color: var(--a-danger-button-active);
       }
@@ -94,6 +112,7 @@ export default {
 
     &--primary {
       color: var(--a-primary);
+
       &:hover,
       &:focus,
       &:active {
@@ -103,6 +122,7 @@ export default {
 
     &--disabled {
       color: var(--a-base-5);
+
       &:hover,
       &:focus,
       &:active {

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

@@ -33,11 +33,13 @@ export default {
 
   .apos-title {
     @include type-title;
+
     margin: 0 0 10px;
   }
 
   .apos-hint {
     @include type-base;
+
     font-style: italic;
     line-height: var(--a-line-tallest);
     color: var(--a-base-1);
@@ -46,7 +48,7 @@ export default {
 
   .apos-emoji {
     // Variable sizes are less important for icons.
-    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */
+    /* stylelint-disable-next-line declaration-property-unit-allowed-list */
     font-size: 34px;
   }
 </style>

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

@@ -163,20 +163,24 @@ export default {
   .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 0.2s ease;
+    transition: all 200ms ease;
+
     &:hover {
       border-color: var(--a-primary);
       background-color: var(--a-base-10);
     }
+
     &:active,
     &:focus {
       border: 2px solid var(--a-primary);
     }
+
     &.apos-is-disabled {
       color: var(--a-base-4);
       background-color: var(--a-base-7);

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

@@ -144,14 +144,15 @@ export default {
 .apos-filters-menu :deep(.apos-field__label) {
   display: block;
   width: 100%;
+  margin-bottom: 10px;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--a-base-9);
   color: var(--a-base-3);
-  margin-bottom: 10px;
 }
 
 .apos-filters-menu__set {
   margin-bottom: 30px;
+
   &:last-child {
     margin-bottom: 0;
   }

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

@@ -37,6 +37,7 @@ export default {
     border: 1px solid var(--a-base-8);
     border-radius: var(--a-border-radius);
     font-size: var(--a-type-tiny);
+
     &:hover {
       cursor: auto;
     }

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

@@ -103,6 +103,7 @@ export default {
 <style lang="scss" scoped>
   .apos-min-max-count {
     @include type-help;
+
     display: flex;
     flex-grow: 1;
     margin-bottom: $spacing-base;

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

@@ -98,6 +98,7 @@ export default {
 <style lang="scss" scoped>
   .apos-pager {
     @include type-base;
+
     display: inline-flex;
     align-items: center;
   }

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

@@ -52,14 +52,16 @@ export default {
     display: flex;
     list-style-type: none;
   }
+
   .apos-pager-dots__button {
     @include apos-button-reset();
+
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background-color: var(--a-primary-light-40);
     margin-right: 20px;
-    transition: all 0.3s ease;
+    transition: all 300ms ease;
   }
 
   .apos-pager-dots__button.apos-is-active {

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

@@ -221,6 +221,8 @@ export default {
 
 <style lang="scss" scoped>
   .apos-slat {
+    @include apos-transition();
+
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -229,7 +231,6 @@ export default {
     border-radius: var(--a-border-radius);
     background-color: var(--a-base-9);
     color: var(--a-text-primary);
-    @include apos-transition();
 
     &.apos-is-disabled {
       .apos-slat__control--view {
@@ -241,9 +242,11 @@ export default {
       cursor: grab;
       background-color: var(--a-base-7);
     }
+
     &:active {
       cursor: grabbing;
     }
+
     &:active,
     &:focus {
       background-color: var(--a-base-7);
@@ -255,6 +258,7 @@ export default {
       &:active {
         cursor: default;
       }
+
       &:hover,
       &:active,
       &:focus {
@@ -270,13 +274,16 @@ export default {
   .apos-slat.apos-is-selected,
   .apos-slat.apos-is-selected:focus {
     background-color: var(--a-primary);
+
     &,
     :deep(.apos-button) {
       color: var(--a-white);
     }
+
     &:hover {
       background-color: var(--a-primary-dark-10);
     }
+
     .apos-slat__label {
       color: var(--a-white);
     }
@@ -284,6 +291,7 @@ export default {
 
   .apos-slat-list__item--disabled {
     opacity: 0.5;
+
     &:hover {
       cursor: not-allowed;
     }
@@ -293,6 +301,7 @@ export default {
     display: flex;
     align-items: center;
     max-width: 75%;
+
     &:deep(.trigger) {
       /* This gets inline positioned and has doesn't provide an extra class to beef up, sorry */
       /* stylelint-disable-next-line declaration-no-important */
@@ -302,6 +311,7 @@ export default {
 
   .apos-slat__label {
     @include type-small;
+
     overflow: hidden;
     margin-left: 5px;
     white-space: nowrap;
@@ -324,8 +334,9 @@ export default {
   }
 
   .fade-enter-active, .fade-leave-active {
-    transition: opacity 0.5s;
+    transition: opacity 500ms;
   }
+
   .fade-enter, .fade-leave-to {
     opacity: 0;
   }
@@ -337,6 +348,7 @@ export default {
 
   .apos-slat__size {
     @include type-small;
+
     margin-right: 5px;
   }
 
@@ -346,6 +358,7 @@ export default {
 
   .apos-slat__extension {
     @include type-help;
+
     display: inline-block;
     padding: 4px;
     background-color: var(--a-generic);

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

@@ -187,7 +187,7 @@ export default {
 <style lang="scss" scoped>
   .apos-slat-list :deep(.apos-slat) {
     margin-bottom: 5px;
-    transition: all 0.4s;
+    transition: all 400ms;
     max-width: $input-max-width * 0.65;
   }
 
@@ -202,6 +202,7 @@ export default {
 
   .apos-slat-list {
     @include apos-list-reset();
+
     min-height: 20px;
     max-width: $input-max-width;
   }
@@ -212,6 +213,7 @@ export default {
 
   .apos-slat-limit {
     @include type-help;
+
     margin: 10px 0 0;
     text-align: center;
 

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

@@ -11,12 +11,12 @@
     >
       <defs>
         <linearGradient id="linear-gradient" x1="-280.32" y1="390.11" x2="-279.82" y2="390.9" gradientTransform="matrix(22.2, 0, 0, -22.2, 6233.2, 8673.92)" gradientUnits="userSpaceOnUse">
-          <stop offset="0" stop-color="#cca9ff" />
-          <stop offset="1" stop-color="#6516dd" />
+          <stop offset="0" :stop-color="stopColorLight" />
+          <stop offset="1" :stop-color="stopColorDark" />
         </linearGradient>
         <linearGradient id="linear-gradient-2" x1="-276.41" y1="379.82" x2="-276.72" y2="379.33" gradientTransform="matrix(17.69, 0, 0, -13.7, 4908.02, 5205.92)" gradientUnits="userSpaceOnUse">
-          <stop offset="0" stop-color="#c8a2ff" />
-          <stop offset="1" stop-color="#6516dd" />
+          <stop offset="0" :stop-color="stopColorLight" />
+          <stop offset="1" :stop-color="stopColorDark" />
         </linearGradient>
       </defs>
       <path class="apos-spinner__svg-track" d="M11.5.32a11.1,11.1,0,1,0,11.1,11.1A11.1,11.1,0,0,0,11.5.32Zm0,5.2a5.9,5.9,0,1,1-5.9,5.9A5.9,5.9,0,0,1,11.5,5.52Z" fill="url(#linear-gradient)" />
@@ -57,10 +57,25 @@
 module.exports = {
   name: 'AposSpinner',
   props: {
+    /**
+     * In the normal `weight` mode, it's the only supported value.
+     * In `heavy` mode, this would be the "darker" color.
+     */
     color: {
       type: String,
       default: '--a-primary'
     },
+    /**
+     * In `heavy` mode, this would be the "lighter" color.
+     * Ignored in the normal `weight` mode.
+     */
+    colorLight: {
+      type: String,
+      default: '--a-primary-transparent-50'
+    },
+    /**
+     * The weight of the spinner. Can be `normal` or `heavy`.
+     */
     weight: {
       type: String,
       default: 'normal'
@@ -74,6 +89,13 @@ module.exports = {
 
       return 'color: var(--a-primary);';
     },
+    stopColorLight() {
+      const color = this.colorLight || this.color;
+      return color?.startsWith('--') ? `var(${color})` : color;
+    },
+    stopColorDark() {
+      return this.color?.startsWith('--') ? `var(${this.color})` : this.color;
+    },
     className() {
       return `apos-spinner--${this.weight}`;
     }
@@ -86,24 +108,26 @@ module.exports = {
   position: relative;
   width: 17px;
   height: 17px;
+
   &--heavy {
     width: 27px;
     height: 27px;
   }
 }
+
 .apos-spinner__svg {
   max-width: 100%;
   max-height: 100%;
 }
 
 .apos-spinner__svg-track {
-  animation: counterClockwise 2s infinite linear;
+  animation: counter-clockwise 2000 infinite linear;
   transform-origin: 50% 50%;
   transform: scale(100, 100);
 }
 
 .apos-spinner__svg-spinner {
-  animation: clockwise 1s infinite linear;
+  animation: clockwise 1000ms infinite linear;
   transform-origin: 50% 50%;
   transform: scale(100, 100);
 }
@@ -112,15 +136,17 @@ module.exports = {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(359deg);
   }
 }
 
-@keyframes counterClockwise {
+@keyframes counter-clockwise {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(-359deg);
   }

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

@@ -109,12 +109,13 @@ function inferFieldValues(schema, values, $t) {
 <style lang="scss" scoped>
 .apos-subform-preview {
   display: grid;
-  grid-template-columns: 1fr 2fr;
-  padding: $spacing-double 0;
   align-items: center;
+  padding: $spacing-double 0;
+  grid-template-columns: 1fr 2fr;
 
   &__value {
     @include type-base;
+
     line-height: 1;
     // color: var(--a-base-1);
     color: var(--a-text-primary);

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

@@ -35,19 +35,21 @@ export default {
 <style lang="scss" scoped>
 .apos-tag {
   @include type-base;
+
   display: inline-flex;
+  align-items: center;
+  justify-content: center;
   padding: 6px 12px;
+  color: var(--a-base-8);
   border-radius: var(--a-border-radius);
   background-color: var(--a-base-1);
-  color: var(--a-base-8);
-  align-items: center;
-  justify-content: center;
 }
 
 .apos-tag__remove {
   position: relative;
   top: 1px;
   margin-right: 5px;
+
   &:hover {
     cursor: pointer;
   }

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

@@ -310,6 +310,7 @@ export default {
 
   .apos-apply-tag-menu__tags {
     @include apos-list-reset();
+
     max-height: 160px;
     overflow-y: auto;
     margin-top: 15px;
@@ -324,13 +325,14 @@ export default {
 
   .apos-apply-tag-menu__empty {
     display: flex;
-    align-items: center;
     flex-direction: column;
+    align-items: center;
     padding: 40px 0 20px;
   }
 
   .apos-apply-tag-menu__empty-message {
     @include type-base;
+
     margin-bottom: 20px;
     max-width: 240px;
     text-align: center;
@@ -344,11 +346,12 @@ export default {
     // Variable sizes are less important for icons.
     /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */
     @include type-title;
+
     margin: 0;
   }
 
   .fade-enter-active, .fade-leave-active {
-    transition: all 0.5s;
+    transition: all 500ms;
   }
 
   .fade-enter, .fade-leave-to {

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

@@ -61,14 +61,18 @@ export default {
   width: 100%;
   height: 100%;
 }
+
 .apos-tag-list__inner {
   margin: 30px 0 0 30px;
 }
+
 .apos-tag-list__title {
   @include type-base;
+
   margin-bottom: 15px;
   color: var(--a-base-3);
 }
+
 .apos-tag-list__items {
   @include apos-list-reset();
 }
@@ -76,8 +80,8 @@ export default {
 .apos-tag-list__empty {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   width: 100%;
   height: 100%;
   margin: 0 1rem;

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

@@ -50,32 +50,40 @@ export default {
   display: block;
   margin-bottom: 7.5px;
 }
+
 .apos-tag-list__button {
   @include apos-button-reset();
+  @include apos-transition($what: all, $duration: 0.1s, $ease: ease-in-out);
+
   display: flex;
   align-items: center;
   padding: 2px 0;
   border-radius: 5px;
   background: transparent;
-  @include apos-transition(all, 0.1s, ease-in-out);
+
   &.apos-is-active {
     color: var(--a-primary);
+
     .apos-tag-list__icon {
       opacity: 1;
     }
   }
+
   &:hover,
   &:focus {
     color: var(--a-primary);
+
     .apos-tag-list__icon {
       color: var(--a-primary);
       opacity: 1;
     }
   }
+
   &:hover.apos-is-active,
   &:focus.apos-is-active {
     color: var(--a-primary);
   }
+
   &:focus {
     outline: none;
     color: var(--a-primary-dark-15);

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

@@ -31,37 +31,37 @@ export default {
 };
 </script>
 <style scoped lang='scss'>
-  $toggleHeight: 13px;
-  $toggleWidth: $toggleHeight * 1.7;
-  $btnSize: $toggleHeight;
+  $toggle-height: 13px;
+  $toggle-width: $toggle-height * 1.7;
+  $btn-size: $toggle-height;
 
   .apos-toggle {
     &__slider {
-      box-sizing: content-box;
       position: relative;
-      border-radius: 34px;
-      width: $toggleWidth;
-      height: $toggleHeight;
+      box-sizing: content-box;
+      width: $toggle-width;
+      height: $toggle-height;
       padding: 4px;
+      border-radius: 34px;
       cursor: pointer;
       background-color: var(--a-base-3);
 
-      &:before {
+      &::before {
         content: '';
         position: absolute;
-        width: $btnSize;
-        height: $btnSize;
+        width: $btn-size;
+        height: $btn-size;
         border-radius: 50%;
         background-color: var(--a-white);
-        transition: all 0.3s ease-out;
+        transition: all 300ms ease-out;
       }
     }
 
     &__slider--activated {
       background-color: var(--a-primary);
 
-      &:before {
-        transform: translateX(calc($toggleWidth - $btnSize));
+      &::before {
+        transform: translateX(calc($toggle-width - $btn-size));
       }
     }
   }

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

@@ -203,6 +203,7 @@ export default {
 
   .apos-tree {
     @include type-base;
+
     color: var(--a-text-primary);
   }