apostrophe 4.3.2 → 4.4.0

package/.stylelintrc

@@ -1,95 +1,3 @@
 {
-  plugins: [
-    'stylelint-order',
-    'stylelint-declaration-strict-value'
-  ],
-  rules: {
-    'color-hex-length': 'short',
-    'color-named': 'never',
-    'color-no-invalid-hex': true,
-    'declaration-property-unit-allowed-list': { 'line-height': [] },
-    'font-family-no-duplicate-names': true,
-    'number-leading-zero': 'always',
-    'number-max-precision': 2,
-    'number-no-trailing-zeros': true,
-    'string-no-newline': true,
-    'length-zero-no-unit': true,
-    'unit-case': 'lower',
-    'unit-no-unknown': true,
-    'value-keyword-case': 'lower',
-    'value-list-comma-newline-after': 'always-multi-line',
-    'value-list-comma-space-after': 'always-single-line',
-    'value-list-comma-space-before': 'never',
-    'value-list-max-empty-lines': 0,
-    'shorthand-property-no-redundant-values': true,
-    'property-case': 'lower',
-    'property-no-unknown': true,
-    'property-no-vendor-prefix': true,
-    'declaration-no-important': true,
-    'declaration-colon-space-after': 'always-single-line',
-    'declaration-colon-space-before': 'never',
-    'declaration-block-no-duplicate-properties': true,
-    'declaration-block-no-redundant-longhand-properties': true,
-    'declaration-block-no-shorthand-property-overrides': true,
-    'declaration-block-semicolon-newline-after': 'always',
-    'declaration-block-semicolon-newline-before': 'never-multi-line',
-    'declaration-block-single-line-max-declarations': 1,
-    'declaration-block-trailing-semicolon': 'always',
-    'block-closing-brace-empty-line-before': 'never',
-    'block-closing-brace-newline-after': [
-      'always',
-      { ignoreAtRules: ['if', 'else'] }
-    ],
-    'block-closing-brace-newline-before': 'always-multi-line',
-    'block-no-empty': true,
-    indentation: 2,
-    'max-empty-lines': 1,
-    'max-nesting-depth': 2,
-    'selector-list-comma-newline-after': 'always-multi-line',
-    'string-quotes': 'single',
-    'time-min-milliseconds': 150,
-    'order/order': ['declarations', 'rules'],
-    'order/properties-order': [
-      'z-index',
-      'position',
-      'top',
-      'right',
-      'bottom',
-      'left',
-      'display',
-      'overflow',
-      'width',
-      'height',
-      'margin',
-      'padding',
-      'border',
-      'color',
-      'background',
-      'font-family',
-      'font-size',
-      'text-align'
-    ],
-    'scale-unlimited/declaration-strict-value': [
-      ['/color/', 'font', 'font-family', 'font-size', 'z-index'],
-      {
-        ignoreKeywords: [
-          'currentColor',
-          'inherit',
-          'initial',
-          'transparent',
-          'auto'
-        ]
-      }
-    ]
-  },
-  overrides: [
-    {
-      files: ['**/*.scss'],
-      customSyntax: 'postcss-scss'
-    },
-    {
-      files: ['**/*.vue'],
-      customSyntax: 'postcss-html'
-    }
-  ]
+  "extends": "stylelint-config-apostrophe"
 }

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # Changelog
 
+## 4.4.0 (2024-06-12)
+
+### Adds
+
+* Adds a pinia store to handle modals logic. 
+* Methods from the store are registered on `apos.modal` instead of methods from `TheAposModals` component.
+* No more need to emit `safe-close` when defining an `AposModal`, modal is automatically resolved when closed.
+* Adds field components access to the reactive document value.
+* Expose `AposContextMenu` owned method for re-calculation of the content position.
+* Field Meta components of `slug` and `string` types can now fire `replace-field-value` events with text value payload, which will replace the respective field value.
+* `AposInputString` now accepts a `rows` prop, in effect only when `field.textarea` is set to `true`.
+* Add `T,S` shortcut to open the Personal Settings.
+* Add `T,D` shortcut to open the Submitted Drafts.
+* Add a scrollbar to the shortcut list.
+* Add breadcrumbs to search results page.
+* Pages relationships have now their checkboxes disabled when max is reached.
+
+### Changes
+
+* Improves widget tabs for the hidden entries, improves UX when validation errors are present in non-focused tabs.
+* When moving a page, recognize when the slug of a new child
+already contains the new parent's slug and not double it.
+For example, given we have two pages as children of the home page, page A and page B.
+Page A and page B are siblings.
+Page A has the slug `/peer` and page B has the slug `/peer/page`.
+Now we want page B to be the child of page A.
+We will now end up with page B slug as `/peer/page` and not `/peer/peer/page` as before.
+* `AposSpinner` now respects the colors for `heavy` weight mode and also accepts second, "light" color in this mode. Props JSDoc blocks are added.
+* `AposContextMenu` now respects the `menuOffset` component property.
+* Set `G,Shift+I` shortcut to open the Image Tags manager modal.
+* Set `G,Shift+F` shortcut to open the File Tags manager modal.
+* Remove slug from suggestion for images.
+* Increase suggestion search image size to 50px.
+* For suggestions with image, keep title on a single line and truncate title field with `...` when it hits the right side.
+
+### Fixes
+
+* Rich Text editor properly unsets marks on heading close.
+* Widget client side schema validation.
+* Allow `G,Shift+I` shortcut style.
+* Detect shortcut conflicts when using multiple shortcuts.
+* Updating schema fields as read-only no longer reset the value when updating the document.
+* Fixes stylelint config file, uses config from our shared configuration, fixes all lint errors. 
+* Removes `$nextTick` use to re render schema in `AposArrayEditor` because it was triggering weird vue error in production.
+Instead, makes the AposSchema for loop keys more unique using `modelValue.data._id`, 
+if document changes it re-renders schema fields.
+* Fixes `TheAposCommandMenu` modals not computing shortcuts from the current opened modal.
+* Fixes select boxes of relationships, we can now check manually published relationships, and `AposSlatList` renders properly checked relationships.
+* Fixes issues in `AposInputArray` on production build to be able to add, remove and edit array items after `required` error.
+* Relationships browse button isn't disabled when max is reached.
+* In media manager image checkboxes are disabled when max is reached.
+* Fixes tiptap bubble menu jumping on Firefox when clicking on buttons. Also fixes the fact that 
+double clicking on bubble menu out of buttons would prevent it from closing when unfocusing the rich text area.
+* In media manager images checkboxes are disabled when max is reached.
+* Makes the final fields accessible in the media manager right rail.
+
 ## 4.3.2 (2024-05-18)
 
 ### Fixes

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposAdminBar.vue

@@ -100,6 +100,7 @@ export default {
 
 :deep(.apos-admin-bar__control-set) {
   @include type-base;
+
   display: flex;
   width: 100%;
   height: 100%;
@@ -112,25 +113,30 @@ export default {
 :deep(.apos-context-menu__pane) {
   min-width: 150px;
 }
+
 :deep(.flip-enter) { // to the ground
   transform: translateY(-20%);
   opacity: 0;
 }
+
 :deep(.flip-leave) { // in the frame
   transform: translateY(0);
   opacity: 1;
 }
+
 :deep(.flip-enter-to) { // from the ground
   transform: translateY(0);
   opacity: 1;
 }
+
 :deep(.flip-leave-to) { // to the sky
   transform: translateY(20%);
   opacity: 0;
 }
 
 :deep(.flip-enter-active), :deep(.flip-leave-active) {
-  transition: all 150ms;
+  transition: all 200ms;
+
   &.apos-admin-bar__control-set__group {
     position: absolute;
   }

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposAdminBarLocale.vue

@@ -192,8 +192,9 @@ export default {
 .apos-admin-locales {
   position: relative;
   margin-right: $spacing-base;
-  padding-left: $spacing-base;
   padding-right: $spacing-base;
+  padding-left: $spacing-base;
+
   &::before,
   &::after {
     content: '';
@@ -214,6 +215,7 @@ export default {
 
   &:deep(.apos-button__label) {
     @include type-small;
+
     color: var(--a-primary);
     font-weight: var(--a-weight-bold);
     letter-spacing: 1px;
@@ -226,6 +228,7 @@ export default {
 
 .apos-locales-filter {
   @include type-large;
+
   box-sizing: border-box;
   width: 100%;
   padding: 20px 45px 20px 20px;
@@ -248,11 +251,11 @@ export default {
 }
 
 .apos-locales {
+  margin: $spacing-base 0;
+  padding-left: 0;
   list-style-type: none;
   max-height: 350px;
   overflow-y: scroll;
-  padding-left: 0;
-  margin: $spacing-base 0;
   font-weight: var(--a-weight-base);
 }
 

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposAdminBarUser.vue

@@ -56,12 +56,13 @@ export default {
 
   :deep(.apos-button) {
     @include type-base;
+
     color: var(--a-text-primary);
   }
 
   :deep(.apos-context-menu__popup) {
     right: 0;
-    transform: translatex(10px);
+    transform: translateX(10px);
   }
 }
 

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextModeAndSettings.vue

@@ -187,6 +187,7 @@ export default {
 <style lang="scss" scoped>
 .apos-admin-bar__control-set--mode-and-settings {
   justify-content: flex-end;
+
   &:deep(.apos-button) {
     margin-left: 4px;
   }

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextTitle.vue

@@ -148,9 +148,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 .apos-admin-bar__control-set--title {
-  justify-content: center;
   align-items: center;
+  justify-content: center;
 }
+
 .apos-admin-bar__title {
   display: inline-flex;
   align-items: center;
@@ -169,8 +170,8 @@ export default {
 
   &__separator {
     align-items: center;
-    padding: 0 7px;
     margin-top: 1px;
+    padding: 0 7px;
   }
 
   &__document {

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposSavingIndicator.vue

@@ -121,14 +121,17 @@ export default {
 <style lang="scss" scoped>
 .apos-admin-bar__status {
   @include type-help;
+
   position: relative;
   margin-left: 7.5px;
   opacity: 1;
   color: var(--a-base-2);
-  transition: opacity 150ms;
+  transition: opacity 200ms;
+
   &.apos-is-hidden {
     opacity: 0;
   }
+
   .apos-is-success {
     color: var(--a-success);
   }
@@ -148,14 +151,15 @@ export default {
 }
 
 .apos-admin-bar__status__icon {
-  margin-right: 7.5px;
   width: 18px;
   height: 18px;
+  margin-right: 7.5px;
 }
 
 .apos-admin-bar__status__label {
   opacity: 1;
   transition: opacity 200ms ease;
+
   &.apos-is-hidden {
     opacity: 0;
   }

package/modules/@apostrophecms/any-page-type/index.js

@@ -109,8 +109,9 @@ module.exports = {
         ancestors: {
           def: false,
           async after(results) {
+            const req = query.req;
             const options = query.get('ancestors');
-            if (!options) {
+            if (!options && req.aposAncestors !== true) {
               return;
             }
             for (const page of results) {
@@ -118,7 +119,6 @@ module.exports = {
                 // Projection is too limited, don't crash trying to get ancestors
                 continue;
               }
-              const req = query.req;
               const subquery = self.apos.page.find(req);
               subquery.ancestorPerformanceRestrictions();
               const parameters = applySubqueryOptions(subquery, options, [ 'depth' ]);

package/modules/@apostrophecms/area/ui/apos/components/AposAreaContextualMenu.vue

@@ -294,6 +294,7 @@ export default {
 .apos-area-menu__button {
   @include apos-button-reset();
   @include type-base;
+
   box-sizing: border-box;
   width: 100%;
   padding: 5px 20px;
@@ -329,11 +330,13 @@ export default {
 
 .apos-area-menu__group-label {
   @include apos-button-reset();
-  box-sizing: border-box;
+
   display: flex;
-  width: 100%;
+  box-sizing: border-box;
   justify-content: space-between;
+  width: 100%;
   padding: 10px 20px;
+
   &:hover {
     cursor: pointer;
   }
@@ -346,6 +349,7 @@ export default {
 
 .apos-area-menu__group-chevron {
   @include apos-transition();
+
   transform: rotate(90deg);
 }
 
@@ -354,23 +358,25 @@ export default {
 }
 
 .apos-area-menu__group {
-  border-bottom: 1px solid var(--a-base-8);
-  padding-bottom: 10px;
   margin: 10px 0;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--a-base-8);
 }
+
 .apos-area-menu__item:last-child.apos-has-group .apos-area-menu__group {
-  border-bottom: none;
   margin-bottom: 0;
+  border-bottom: none;
 }
 
 .apos-area-menu__items--accordion {
+  @include apos-transition($duration:0.3s);
+
   overflow: hidden;
   max-height: 0;
-  @include apos-transition($duration:0.3s);
 }
 
 .apos-area-menu__items--accordion.apos-is-active {
-  transition-delay: 0.25s;
+  transition-delay: 250ms;
   max-height: 20rem;
 }
 

package/modules/@apostrophecms/area/ui/apos/components/AposAreaEditor.vue

@@ -621,13 +621,13 @@ function cancelRefresh(refreshOptions) {
 <style lang="scss" scoped>
 .apos-empty-area {
   display: flex;
-  padding: 30px;
-  justify-content: center;
-  align-items: center;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 30px;
+  border: 1px solid var(--a-base-8);
   min-height: 50px;
   background-color: var(--a-base-9);
-  border: 1px solid var(--a-base-8);
   border-radius: var(--a-border-radius);
 }
 

package/modules/@apostrophecms/area/ui/apos/components/AposAreaExpandedMenu.vue

@@ -6,7 +6,6 @@
     @inactive="modal.active = false"
     @show-modal="modal.showModal = true"
     @esc="close"
-    @no-modal="$emit('safe-close')"
   >
     <template #main>
       <AposModalBody>
@@ -77,7 +76,7 @@ export default {
       default: 0
     }
   },
-  emits: [ 'expanded-menu-close', 'safe-close', 'modal-result' ],
+  emits: [ 'expanded-menu-close', 'modal-result' ],
   data() {
     return {
       modal: {
@@ -212,9 +211,9 @@ export default {
   .apos-widget__preview {
     position: relative;
     display: flex;
-    justify-content: center;
-    align-items: center;
     overflow: hidden;
+    align-items: center;
+    justify-content: center;
     height: 135px;
     outline: 1px solid var(--a-base-7);
     border-radius: var(--a-border-radius);
@@ -231,6 +230,7 @@ export default {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 15px 10px;
+
     .apos-widget__preview {
       height: 89px;
     }
@@ -240,6 +240,7 @@ export default {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 15px 5px;
+
     .apos-widget__preview {
       height: 66px;
     }
@@ -248,6 +249,7 @@ export default {
 
 .apos-widget {
   @include type-base;
+
   padding: 0;
   border: none;
   background: none;
@@ -255,33 +257,35 @@ export default {
 
   .apos-widget__preview {
     transition: opacity 250ms ease-in-out;
+
     .apos-icon--add {
       z-index: $z-index-default;
       position: absolute;
-      // Center in the parent element
-      align-self: center;
-      justify-self: center;
       // Center the child content
       display: flex;
-      justify-content: center;
       align-items: center;
+      // Center in the parent element
+      place-self: center center;
+      justify-content: center;
       width: 27px;
       height: 27px;
+      color: var(--a-white);
       border-radius: 50%;
       background-color: var(--a-primary);
       opacity: 0;
-      color: var(--a-white);
     }
+
     &::after {
-      transition: all 250ms ease-in-out;
       position: absolute;
-      content: '';
       width: 100%;
       height: 100%;
+      transition: all 250ms ease-in-out;
+      content: '';
       background-color: var(--a-primary);
       opacity: 0;
     }
   }
+
   &:hover {
     cursor: pointer;
     // stylelint-disable max-nesting-depth
@@ -289,6 +293,7 @@ export default {
       .apos-icon--add {
         opacity: 1;
       }
+
       &::after {
         opacity: 0.4;
       }
@@ -304,6 +309,7 @@ export default {
 .apos-widget-group__label,
 .apos-widget__help {
   @include type-base;
+
   margin-top: 0;
   line-height: var(--a-line-tall);
   text-align: left;

package/modules/@apostrophecms/area/ui/apos/components/AposAreaMenu.vue

@@ -107,6 +107,7 @@ export default {
 .apos-area-menu__button {
   @include apos-button-reset();
   @include type-base;
+
   box-sizing: border-box;
   width: 100%;
   padding: 5px 20px;
@@ -142,11 +143,13 @@ export default {
 
 .apos-area-menu__group-label {
   @include apos-button-reset();
-  box-sizing: border-box;
+
   display: flex;
-  width: 100%;
+  box-sizing: border-box;
   justify-content: space-between;
+  width: 100%;
   padding: 10px 20px;
+
   &:hover {
     cursor: pointer;
   }
@@ -159,6 +162,7 @@ export default {
 
 .apos-area-menu__group-chevron {
   @include apos-transition();
+
   transform: rotate(90deg);
 }
 
@@ -167,23 +171,25 @@ export default {
 }
 
 .apos-area-menu__group {
-  border-bottom: 1px solid var(--a-base-8);
-  padding-bottom: 10px;
   margin: 10px 0;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--a-base-8);
 }
+
 .apos-area-menu__item:last-child.apos-has-group .apos-area-menu__group {
-  border-bottom: none;
   margin-bottom: 0;
+  border-bottom: none;
 }
 
 .apos-area-menu__items--accordion {
+  @include apos-transition($duration:0.3s);
+
   overflow: hidden;
   max-height: 0;
-  @include apos-transition($duration:0.3s);
 }
 
 .apos-area-menu__items--accordion.apos-is-active {
-  transition-delay: 0.25s;
+  transition-delay: 250ms;
   max-height: 20rem;
 }
 

package/modules/@apostrophecms/area/ui/apos/components/AposAreaMenuItem.vue

@@ -66,12 +66,15 @@ export default {
 
   .apos-area-menu__item-icon {
     @include apos-align-icon();
+
     margin-right: 10px;
   }
+
   .apos-area-menu__item-content {
     display: flex;
     align-items: center;
   }
+
   .apos-area-menu__item-sublabel {
     margin-bottom: 10px;
     color: var(--a-base-4);