apostrophe 4.3.2 → 4.4.0

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

@@ -79,7 +79,8 @@
                   key: 'apostrophe:toggleSelectionOf',
                   title: row.title
                 },
-                disableFocus: true
+                disableFocus: true,
+                readOnly: maxReached && !checked.includes(row._id)
               }"
               :choice="{ value: row._id }"
             />
@@ -217,6 +218,9 @@ export default {
         ghostClass: 'apos-is-dragging',
         filter: '.apos-is-parked'
       };
+    },
+    maxReached() {
+      return this.options.max != null && this.checked.length >= this.options.max;
     }
   },
   mounted() {
@@ -448,8 +452,9 @@ export default {
       opacity: 0.5;
     }
   }
+
   .apos-tree__list {
-    transition: max-height 0.3s ease;
+    transition: max-height 300ms ease;
 
     &.apos-is-collapsed {
       overflow-y: auto;
@@ -459,6 +464,7 @@ export default {
   .apos-tree__row--selectable {
     cursor: pointer;
   }
+
   .apos-tree__row-data {
     .apos-tree__row--selected > & {
       background-color: var(--a-base-9);
@@ -477,7 +483,7 @@ export default {
       content: '';
       background-color: var(--a-base-8);
       width: 1px;
-      transition: background-color 0.3s ease;
+      transition: background-color 300ms ease;
     }
 
     &.apos-is-collapsed::before {
@@ -487,6 +493,7 @@ export default {
 
   .apos-tree__row__toggle {
     @include apos-button-reset();
+
     position: absolute;
     top: 50%;
     left: -(math.div($row-nested-h-padding, 2));
@@ -496,10 +503,10 @@ export default {
 
   .apos-tree__row__toggle-icon {
     display: block;
-    transition: transform 0.3s ease;
+    transition: transform 300ms ease;
     transform: rotate(-90deg) translateY(0.25em);
 
-    [aria-expanded=true] > & {
+    [aria-expanded="true"] > & {
       transform: none;
     }
   }
@@ -508,16 +515,18 @@ export default {
     margin-right: 0.25em;
 
     :deep(.material-design-icon__svg) {
-      transition: fill 0.2s ease;
+      transition: fill 200ms ease;
       fill: var(--a-base-5);
     }
   }
 
   .apos-tree__row__icon--handle {
     cursor: grab;
+
     &:active {
       cursor: grabbing;
     }
+
     .sortable-chosen &:deep(.material-design-icon__svg,)
     &:hover :deep(.material-design-icon__svg) {
       fill: var(--a-base-2);
@@ -565,8 +574,9 @@ export default {
     color: var(--a-success);
   }
 
-  button.apos-tree__cell {
+  button.apos-tree__cell { /* stylelint-disable-line selector-no-qualifying-type */
     @include apos-button-reset();
+
     padding: $cell-padding;
     border-bottom: 1px solid var(--a-base-8);
   }

package/modules/@apostrophecms/ui/ui/apos/lib/vue.js

@@ -1,8 +1,11 @@
 import { createApp } from 'vue';
+import { createPinia } from 'pinia';
 import ClickOutsideElement from './click-outside-element';
 import Tooltip from './tooltip';
 import VueAposI18Next from './i18next';
 
+const pinia = createPinia();
+
 export default (appConfig, props = {}) => {
   const app = createApp(appConfig, props);
 
@@ -12,6 +15,7 @@ export default (appConfig, props = {}) => {
   });
   app.use(Tooltip);
   app.use(ClickOutsideElement);
+  app.use(pinia);
 
   const sources = [ window.apos.vueComponents, window.apos.iconComponents ];
   for (const source of sources) {

package/modules/@apostrophecms/ui/ui/apos/scss/global/_admin.scss

@@ -8,7 +8,7 @@
 .apos-editor-canvas {
   width: $a-canvas-max;
   margin: 20px auto;
-  box-shadow: 0 0 9px 0 rgba(0,0,0,0.15);
+  box-shadow: 0 0 9px 0 rgb(0 0 0 / 15%);
   min-height: 100vh;
   background-color: var(--a-background-primary);
 }

package/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss

@@ -9,15 +9,16 @@
 
 @mixin apos-input() {
   @include type-base;
+  @include apos-transition(all);
+
+  box-sizing: border-box;
   width: 100%;
   border: 1px solid var(--a-base-8);
   border-radius: var(--a-border-radius);
   background-color: var(--a-base-9);
   color: var(--a-text-primary);
-  box-sizing: border-box;
   // Some  browser styles set `textarea` to monospace.
   resize: none;
-  @include apos-transition(all);
 
   &::placeholder {
     color: var(--a-base-4);
@@ -40,6 +41,7 @@
     color: $input-color-disabled;
     background: var(--a-base-7);
     border-color: $input-color-disabled;
+
     &:hover {
       cursor: not-allowed;
     }
@@ -67,6 +69,10 @@
     padding: $input-padding;
     padding-right: $input-padding * 2;
   }
+
+  &--textarea {
+    line-height: 1.3;
+  }
 }
 
 .apos-input {
@@ -101,25 +107,30 @@
     padding: 10px;
     font-size: var(--a-type-small);
   }
+
   .apos-input-icon {
     right: 5px;
   }
+
   .apos-field__label {
     font-size: var(--a-type-small);
     font-weight: 500;
   }
+
   &.apos-field--color {
     .apos-button.apos-button--color {
       width: 25px;
       height: 25px;
       padding: 0;
     }
+
     .apos-color__info {
-      font-size: var(--a-type-small);
       margin-left: 5px;
+      font-size: var(--a-type-small);
       white-space: nowrap;
     }
   }
+
   &.apos-field--range {
     .apos-range__input::-webkit-slider-thumb,
     .apos-range__input::-moz-range-thumb {
@@ -135,16 +146,20 @@
 
 .apos-choice-label {
   @include type-base;
+
   display: flex;
-  color: var(--a-base-2);
   align-items: center;
+  color: var(--a-base-2);
+
   &:hover:not(.apos-choice-label--disabled) {
     color: var(--a-text-primary);
     cursor: pointer;
   }
+
   &:hover.apos-choice-label--disabled {
     cursor: not-allowed;
   }
+
   & + &,
   .apos-legend + & {
     margin-top: $spacing-base;
@@ -160,17 +175,21 @@
   max-width: $box-width;
   margin: 0;
   padding: 0;
+
   &:hover {
     cursor: pointer;
   }
+
   &[disabled]:hover,
   &[disabled] ~ .apos-input-indicator:hover {
     cursor: not-allowed;
   }
+
   &:focus ~ .apos-input-indicator {
     outline: none;
     box-shadow: 0 0 5px var(--a-base-1);
   }
+
   &:checked:focus ~ .apos-input-indicator {
     box-shadow: 0 0 10px var(--a-primary);
   }
@@ -217,11 +236,13 @@
 
 .apos-choice-label-text {
   @include type-base;
+
   margin-left: $spacing-base;
 }
 
 .apos-input-indicator {
-  @include apos-transition(all, 0.1s, ease-in-out);
+  @include apos-transition($what: all, $duration: 0.1s, $ease: ease-in-out);
+
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
@@ -241,12 +262,14 @@
     border-color: var(--a-base-7);
     background-color: var(--a-base-7);
   }
+
   .apos-input--choice:checked,
   .apos-input--choice[checked] {
     // TODO: Does this really need to be important?
     // Disabling for now since I'm not totally sure of impact. ~gvb
     position: relative !important; // stylelint-disable-line
   }
+
   .apos-input--choice:checked + &,
   .apos-input--choice[checked] + & {
     background-color: var(--a-primary);

package/modules/@apostrophecms/ui/ui/apos/scss/global/_scrollbars.scss

@@ -2,33 +2,41 @@
   width: 10px;
   height: 10px;
 }
+
 ::-webkit-scrollbar-button {
   width: 12px;
   height: 12px;
   margin: 2px;
 }
+
 ::-webkit-scrollbar-thumb {
   border: 6px none var(--a-base-5);
   background: var(--a-base-7);
   border-radius: 10px;
 }
+
 ::-webkit-scrollbar-thumb:hover {
   background: var(--a-base-4);
 }
+
 ::-webkit-scrollbar-thumb:active {
   background: var(--a-base-2);
 }
+
 ::-webkit-scrollbar-track {
   border: 6px none var(--a-base-9);
   background: var(--a-base-9);
   border-radius: 10px;
 }
+
 ::-webkit-scrollbar-track:hover {
   background: var(--a-base-8);
 }
+
 ::-webkit-scrollbar-track:active {
   background: var(--a-base-7);
 }
+
 ::-webkit-scrollbar-corner {
   background: transparent;
 }
@@ -39,32 +47,40 @@
     width: 10px;
     height: 10px;
   }
+
   ::-webkit-scrollbar-button {
     width: 12px;
     height: 12px;
   }
+
   ::-webkit-scrollbar-thumb {
     border: 6px none var(--a-background-primary);
     background: var(--a-primary);
     border-radius: 10px;
   }
+
   ::-webkit-scrollbar-thumb:hover {
     background: var(--a-primary-dark-10);
   }
+
   ::-webkit-scrollbar-thumb:active {
     background: var(--a-primary-dark-15);
   }
+
   ::-webkit-scrollbar-track {
     border: 6px none var(--a-base-10);
     background: var(--a-base-10);
     border-radius: 10px;
   }
+
   ::-webkit-scrollbar-track:hover {
     background: var(--a-base-8);
   }
+
   ::-webkit-scrollbar-track:active {
     background: var(--a-base-6);
   }
+
   ::-webkit-scrollbar-corner {
     background: transparent;
   }

package/modules/@apostrophecms/ui/ui/apos/scss/global/_tables.scss

@@ -17,6 +17,7 @@
 
 .apos-table__header-icon {
   @include apos-align-icon();
+
   margin-right: 5px;
 }
 
@@ -24,6 +25,7 @@
 .apos-table__cell-field {
   @include apos-button-reset();
   @include type-base;
+
   &:hover {
     cursor: default;
   }
@@ -33,13 +35,14 @@
   display: flex;
   align-items: center;
   white-space: nowrap;
+
   &.apos-is-hidden {
     visibility: hidden;
     position: absolute;
   }
 }
 
-span.apos-table__header-label:hover {
+span.apos-table__header-label:hover { /* stylelint-disable-line selector-no-qualifying-type */
   cursor: auto;
 }
 
@@ -49,8 +52,9 @@ span.apos-table__header-label:hover {
 
 .apos-table__cell,
 .apos-table__row {
-  @include apos-transition(all, 0.05s);
+  @include apos-transition($what: all, $duration: 0.05s);
 }
+
 .apos-table__cell {
   padding: 5px 15px;
   border-bottom: 1px solid var(--a-base-10);
@@ -74,8 +78,9 @@ span.apos-table__header-label:hover {
 }
 
 .apos-table__row:hover {
-  box-shadow: 0 8px 12px -12px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 8px 12px -12px rgb(0 0 0 / 30%);
 }
+
 .apos-table__row:hover .apos-table__cell,
 .apos-table__row.apos-is-selected .apos-table__cell {
   background-color: var(--a-base-10);

package/modules/@apostrophecms/ui/ui/apos/scss/global/_theme.scss

@@ -9,15 +9,12 @@
   --a-warning-fade: #ffce0030;
   --a-progress-bg: #2c354d;
   --a-highlight: #fff6e8;
-
   --a-danger-button-hover: #c00717;
   --a-danger-button-active: #a10000;
   --a-danger-button-disabled: #ff9d98;
-
   --a-sensitive: #643810;
   --a-sensitive-medium: #E2C7B9;
   --a-sensitive-light: #FFF3E7;
-
   --a-base-1: #5d5d5d;
   --a-base-2: #6f6f6f;
   --a-base-3: #818181;
@@ -28,14 +25,13 @@
   --a-base-8: #dbdbdb;
   --a-base-9: #ededed;
   --a-base-10: #f4f4f4;
-
   --a-text-primary: #000;
   --a-text-inverted: #fff;
 
   // Borders
   --a-border-radius: 5px;
   --a-border-radius-large: 10px;
-  --a-box-shadow: 0 3px 13px 4px rgba(0, 0, 0, 0.08);
+  --a-box-shadow: 0 3px 13px 4px rgb(0 0 0 / 8%);
 
   // Backgrounds
   --a-background-primary: #fff;
@@ -89,7 +85,6 @@
 
   // Admin styles
   --a-widget-margin: 0;
-
   --a-transition-timing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
@@ -97,6 +92,7 @@
   .apos-theme--primary-blue {
     @include apos-primary-mixin(#0062ff);
   }
+
   --a-base-1: #d1d3d5;
   --a-base-2: #6b7c92;
   --a-base-3: #607084;
@@ -107,32 +103,37 @@
   --a-base-8: #2c3540;
   --a-base-9: #212932;
   --a-base-10: #171d24;
-
   --a-background-primary: #0b0b0c;
   --a-background-inverted: #fff;
   --a-overlay: #0062ffe0;
-
   --a-text-primary: #fff;
   --a-text-inverted: #000;
 }
+
 .apos-theme--primary-default {
   @include apos-primary-mixin(#6516dd);
 }
+
 .apos-theme--primary-blue {
   @include apos-primary-mixin(#0062ff);
 }
+
 .apos-theme--primary-orange {
   @include apos-primary-mixin(#e65100);
 }
+
 .apos-theme--primary-aqua {
   @include apos-primary-mixin(#1eacc7);
 }
+
 .apos-theme--primary-sun {
   @include apos-primary-mixin(#f7a704);
 }
+
 .apos-theme--primary-green {
   @include apos-primary-mixin(#00b075);
 }
+
 .apos-theme--primary-pink {
   @include apos-primary-mixin(#fd9ec0);
 }

package/modules/@apostrophecms/ui/ui/apos/scss/global/_tooltips.scss

@@ -6,26 +6,30 @@
   display: block;
   width: max-content;
   max-width: 285px;
-  /* stylelint-disable-next-line time-min-milliseconds */
-  transition-delay: 0.1s;
+  transition-delay: 100ms;
 
   .apos-info {
     max-width: 330px;
+
     p {
       margin-top: 0;
       line-height: var(--a-line-tall);
     }
+
     ul, ol {
       padding-left: $spacing-base;
     }
+
     ul {
       list-style-type: none;
     }
+
     ul li,
     ol li {
       margin-bottom: $spacing-half;
     }
-    ul li:before {
+
+    ul li::before {
       content: '-';
       position: relative;
       left: -$spacing-half;
@@ -85,7 +89,8 @@
     display: none;
     visibility: hidden;
     opacity: 0;
-    transition: opacity 0.15s, visibilty 0.15s;
+    transition: opacity 200ms, visibilty 200ms;
+
     .apos-tooltip__wrapper {
       transform: scale(0.8);
     }
@@ -95,7 +100,8 @@
     display: initial;
     visibility: visible;
     opacity: 1;
-    transition: opacity 0.15s;
+    transition: opacity 200ms;
+
     .apos-tooltip__wrapper {
       transform: scale(1);
     }
@@ -103,8 +109,8 @@
 }
 
 .apos-tooltip__wrapper {
-  transition: all 0.2s var(--a-transition-timing-bounce);
+  transition: all 200ms var(--a-transition-timing-bounce);
   /* stylelint-disable-next-line time-min-milliseconds */
-  transition-delay: 0.1s;
+  transition-delay: 100ms;
   transform: scale(0.8);
 }

package/modules/@apostrophecms/ui/ui/apos/scss/global/import-all.scss

@@ -1,5 +1,5 @@
 // Just like components, the shared stuff needs access to the mixins
-@import '../mixins/import-all.scss';
+@import '../mixins/import-all';
 
 // One-time imports used project wide, like utility classes, login styles, etc.
 @import './_normalize';

package/modules/@apostrophecms/ui/ui/apos/scss/mixins/_input_mixins.scss

@@ -3,13 +3,14 @@ $box-width: 12px;
 
 @mixin apos-input() {
   @include type-base;
+  @include apos-transition(all);
+
+  box-sizing: border-box;
   width: 100%;
   border: 1px solid var(--a-base-8);
+  color: var(--a-text-primary);
   border-radius: var(--a-border-radius);
   background-color: var(--a-base-9);
-  color: var(--a-text-primary);
-  box-sizing: border-box;
-  @include apos-transition(all);
 
   &::placeholder {
     color: var(--a-base-4);
@@ -32,6 +33,7 @@ $box-width: 12px;
     color: var(--a-base-4);
     background: var(--a-base-7);
     border-color: var(--a-base-4);
+
     &:hover {
       cursor: not-allowed;
     }

package/modules/@apostrophecms/ui/ui/apos/scss/mixins/_mixins.scss

@@ -48,6 +48,7 @@
   &:hover {
     cursor: pointer;
   }
+
   &::-moz-focus-inner {
     padding: 0;
     border: 0;

package/modules/@apostrophecms/ui/ui/apos/scss/mixins/_responsive.scss

@@ -2,7 +2,7 @@
 $breakpoints: (
   palm: 320px,
   hands: 600px,
-  // hands-wide: 850px,
+  hands-wide: 800px,
   lap: 1200px,
   desk: 1600px
 );
@@ -11,8 +11,9 @@ $modal-rail-right-w: 22%;
 
 // We default to mobile first, but make a max-with option available as well.
 @mixin media-up($bp) {
-  $bpVal: map-get($breakpoints, $bp);
-  @media screen and (min-width: $bpVal) {
+  $bp-val: map-get($breakpoints, $bp);
+
+  @media screen and (min-width: $bp-val) {
     @content;
   }
 }

package/modules/@apostrophecms/ui/ui/apos/scss/mixins/_theme_mixins.scss

@@ -43,35 +43,41 @@ $input-color-disabled: var(--a-base-4);
 
 @mixin type-help {
   @include type-base;
+
   font-size: var(--a-type-small);
   text-transform: uppercase;
 }
 
 @mixin type-small {
   @include type-base;
+
   font-size: var(--a-type-small);
   line-height: var(--a-line-tall);
 }
 
 @mixin type-label {
   @include type-base;
+
   font-size: var(--a-type-label);
   line-height: var(--a-line-tall);
 }
 
 @mixin type-large {
   @include type-base;
+
   font-size: var(--a-type-large);
   line-height: var(--a-line-tall);
 }
 
 @mixin type-title {
   @include type-base;
+
   font-size: var(--a-type-heading);
   line-height: var(--a-line-tall);
 }
 
 @mixin type-display {
   @include type-base;
+
   font-size: var(--a-type-display);
 }

package/modules/@apostrophecms/ui/ui/apos/scss/shared/_table-rows.scss

@@ -1,17 +1,19 @@
 .apos-tree__cell {
   display: inline-flex;
+  box-sizing: border-box;
   flex-shrink: 2;
+  align-items: center;
   padding: $cell-padding;
   border-bottom: 1px solid var(--a-base-8);
-  box-sizing: border-box;
-  align-items: center;
 }
+
+// stylelint-disable-next-line selector-class-pattern
 .apos-tree__cell--contextMenu {
   padding: 0;
 }
 
 // Let the title cell column grow.
-span.apos-tree__cell:first-of-type {
+span.apos-tree__cell:first-of-type { // stylelint-disable-line selector-no-qualifying-type
   flex-grow: 1;
   flex-shrink: 1;
 }
@@ -28,6 +30,7 @@ span.apos-tree__cell:first-of-type {
 
 .apos-tree__cell[disabled='true'] {
   color: $input-color-disabled;
+
   &:hover {
     cursor: not-allowed;
   }