apostrophe 4.5.4 → 4.6.0

package/modules/@apostrophecms/page/ui/apos/components/AposPagesManager.vue

@@ -1,6 +1,7 @@
 <template>
   <AposModal
     :modal="modal"
+    :modal-data="modalData"
     modal-title="apostrophe:managePages"
     @esc="confirmAndCancel"
     @inactive="modal.active = false"

package/modules/@apostrophecms/page/ui/apos/logic/AposPagesManager.js

@@ -10,8 +10,13 @@ export default {
   name: 'AposPagesManager',
   mixins: [ AposModifiedMixin, AposDocsManagerMixin, AposArchiveMixin, AposPublishMixin ],
   emits: [ 'archive', 'search', 'modal-result' ],
+  props: {
+    modalData: {
+      type: Object,
+      required: true
+    }
+  },
   data() {
-
     return {
       moduleName: '@apostrophecms/page',
       modal: {
@@ -149,12 +154,12 @@ export default {
     await this.getPages();
     this.modal.triggerFocusRefresh++;
 
-    apos.bus.$on('content-changed', this.getPages);
+    apos.bus.$on('content-changed', this.onContentChanged);
     apos.bus.$on('command-menu-manager-create-new', this.create);
     apos.bus.$on('command-menu-manager-close', this.confirmAndCancel);
   },
   unmounted() {
-    apos.bus.$off('content-changed', this.getPages);
+    apos.bus.$off('content-changed', this.onContentChanged);
     apos.bus.$off('command-menu-manager-create-new', this.create);
     apos.bus.$off('command-menu-manager-close', this.confirmAndCancel);
   },
@@ -164,6 +169,15 @@ export default {
         this.create();
       }
     },
+    onContentChanged({ doc }) {
+      if (
+        !doc ||
+        !doc.aposLocale ||
+        doc.aposLocale.split(':')[0] === this.modalData.locale
+      ) {
+        this.getPages();
+      }
+    },
     async getPages () {
       const self = this;
       if (this.gettingPages) {

package/modules/@apostrophecms/piece-type/index.js

@@ -820,8 +820,10 @@ module.exports = {
       async convertInsertAndRefresh(req, input, options) {
         const piece = self.newInstance();
         const copyingId = self.apos.launder.id(input._copyingId);
+        const createId = self.apos.launder.id(input._createId);
         await self.convert(req, input, piece, {
-          copyingId
+          copyingId,
+          createId
         });
         await self.emit('afterConvert', req, input, piece);
         await self.insert(req, piece);

package/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue

@@ -3,6 +3,7 @@
     ref="modal"
     :modal="modal"
     :modal-title="modalTitle"
+    :modal-data="modalData"
     @esc="confirmAndCancel"
     @inactive="modal.active = false"
     @show-modal="modal.showModal = true"
@@ -139,6 +140,10 @@ export default {
     moduleName: {
       type: String,
       required: true
+    },
+    modalData: {
+      type: Object,
+      required: true
     }
   },
   emits: [ 'archive' ],
@@ -354,7 +359,9 @@ export default {
     async selectAllPieces () {
       const { results: docs } = await this.request({
         project: {
-          _id: 1
+          _id: 1,
+          _url: 1,
+          title: 1
         },
         attachments: false,
         perPage: this.allPiecesSelection.total
@@ -469,6 +476,11 @@ export default {
                 : this.moduleLabels.plural
             }
           });
+          if (action === 'archive') {
+            await this.getPieces();
+            this.getAllPiecesTotal();
+            this.checked = [];
+          }
         } catch (error) {
           apos.notify('apostrophe:errorBatchOperationNoti', {
             interpolate: { operation: label },
@@ -479,15 +491,24 @@ export default {
       }
     },
     setCheckedDocs(checked) {
-      this.checkedDocs = checked;
+      this.checkedDocs = checked.slice(0, this.relationshipField?.max || checked.length);
       this.checked = this.checkedDocs.map(item => {
         return item._id;
       });
     },
 
     async onContentChanged({ doc, action }) {
-      await this.getPieces();
-      this.getAllPiecesTotal();
+      if (
+        !doc ||
+        !doc.aposLocale ||
+        doc.aposLocale.split(':')[0] === this.modalData.locale
+      ) {
+        await this.getPieces();
+        this.getAllPiecesTotal();
+        if (action === 'archive') {
+          this.checked = this.checked.filter(checkedId => doc._id !== checkedId);
+        }
+      }
     }
   }
 };

package/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManagerSelectBox.vue

@@ -63,7 +63,7 @@ export default {
     showSelectAll() {
       if (
         this.allPiecesSelection.isSelected ||
-        (this.selectedState === 'checked' && this.allPiecesSelection.total > this.displayedItems)
+        ([ 'checked', 'indeterminate' ].includes(this.selectedState) && this.allPiecesSelection.total > this.displayedItems)
       ) {
         return true;
       }

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapLink.vue

@@ -138,7 +138,7 @@ export default {
     },
     active(newVal) {
       if (newVal) {
-        this.hasLinkOnOpen = !!(this.docFields.data.href);
+        this.hasLinkOnOpen = !!(this.attributes.href);
         window.addEventListener('keydown', this.keyboardHandler);
       } else {
         window.removeEventListener('keydown', this.keyboardHandler);
@@ -207,10 +207,10 @@ export default {
       });
     },
     keyboardHandler(e) {
-      if (e.keyCode === 27) {
+      if (e.key === 'Escape') {
         this.close();
       }
-      if (e.keyCode === 13) {
+      if (e.key === 'Enter') {
         if (this.docFields.data.href || e.metaKey) {
           this.save();
           this.close();
@@ -268,6 +268,7 @@ export default {
       } finally {
         this.generation++;
       }
+      this.evaluateConditions();
     }
   }
 };

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

@@ -9,7 +9,8 @@
       v-bind="attrs"
       :is="href ? 'a' : 'button'"
       :id="attrs.id ? attrs.id : id"
-      :href="href.length ? href : false"
+      :target="target"
+      :href="href"
       class="apos-button"
       :class="modifierClass"
       :tabindex="tabindex"
@@ -82,8 +83,8 @@ export default {
       default: null
     },
     href: {
-      type: [ String, Boolean ],
-      default: false
+      type: String,
+      default: null
     },
     iconSize: {
       type: Number,
@@ -121,16 +122,20 @@ export default {
     },
     disableFocus: Boolean,
     buttonType: {
-      type: [ String, Boolean ],
-      default: false
+      type: String,
+      default: null
     },
     role: {
-      type: [ String, Boolean ],
-      default: false
+      type: String,
+      default: null
     },
     tooltip: {
       type: [ String, Object, Boolean ],
       default: false
+    },
+    target: {
+      type: String,
+      default: null
     }
   },
   emits: [ 'click' ],
@@ -207,7 +212,7 @@ export default {
       return null;
     },
     isDisabled() {
-      return this.disabled || this.busy;
+      return (this.disabled || this.busy) || null;
     },
     actionTestLabel() {
       return this.action
@@ -384,6 +389,10 @@ export default {
       text-decoration: none;
       background-color: var(--a-base-10);
     }
+
+    &:focus {
+      outline: 1px solid var(--a-base-7);
+    }
   }
 
   .apos-button--gradient-on-hover {
@@ -661,8 +670,6 @@ export default {
     &:hover:not([disabled]),
     &:focus:not([disabled]) {
       transform: none;
-      box-shadow: none;
-      outline: none;
     }
   }
 

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

@@ -9,8 +9,8 @@
         v-bind="button"
         ref="button"
         class="apos-context-menu__btn"
-        data-apos-test="contextMenuTrigger"
         role="button"
+        :data-apos-test="identifier"
         :state="buttonState"
         :disabled="disabled"
         :tooltip="tooltip"
@@ -20,28 +20,27 @@
         }"
         @click.stop="buttonClicked($event)"
       />
-      <Teleport to="body">
-        <div
-          v-if="isOpen"
-          ref="dropdownContent"
-          v-click-outside-element="hide"
-          class="apos-context-menu__dropdown-content"
-          :class="popoverClass"
-          data-apos-menu
-          :style="dropdownContentStyle"
-          :aria-hidden="!isOpen"
+      <div
+        v-if="isOpen"
+        ref="dropdownContent"
+        v-click-outside-element="hide"
+        class="apos-context-menu__dropdown-content"
+        :class="popoverClass"
+        data-apos-menu
+        :style="dropdownContentStyle"
+        :aria-hidden="!isOpen"
+      >
+        <AposContextMenuDialog
+          :menu-placement="placement"
+          :class-list="classList"
+          :menu="menu"
+          :is-open="isOpen"
+          @item-clicked="menuItemClicked"
+          @set-arrow="setArrow"
         >
-          <AposContextMenuDialog
-            :menu-placement="placement"
-            :class-list="classList"
-            :menu="menu"
-            @item-clicked="menuItemClicked"
-            @set-arrow="setArrow"
-          >
-            <slot />
-          </AposContextMenuDialog>
-        </div>
-      </Teleport>
+          <slot />
+        </AposContextMenuDialog>
+      </div>
     </div>
   </div>
 </template>
@@ -57,6 +56,10 @@ import { useAposTheme } from 'Modules/@apostrophecms/ui/composables/AposTheme';
 import { createId } from '@paralleldrive/cuid2';
 
 const props = defineProps({
+  identifier: {
+    type: String,
+    default: 'contextMenuTrigger'
+  },
   menu: {
     type: Array,
     default: null
@@ -155,10 +158,14 @@ watch(isOpen, (newVal) => {
   if (newVal) {
     window.addEventListener('resize', setDropdownPosition);
     window.addEventListener('scroll', setDropdownPosition);
+    window.addEventListener('keydown', handleKeyboard);
     setDropdownPosition();
+    dropdownContent.value.querySelector('[tabindex]')?.focus();
   } else {
     window.removeEventListener('resize', setDropdownPosition);
     window.removeEventListener('scroll', setDropdownPosition);
+    window.removeEventListener('keydown', handleKeyboard);
+    dropdown.value.querySelector('[tabindex]').focus();
   }
 }, { flush: 'post' });
 
@@ -237,6 +244,12 @@ async function setDropdownPosition() {
     ...arrowY && { top: `${arrowY}px` }
   });
 }
+
+function handleKeyboard(event) {
+  if (event.key === 'Escape') {
+    hide();
+  }
+}
 </script>
 
 <style lang="scss">

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

@@ -4,6 +4,7 @@
       class="apos-context-menu__button"
       :class="modifiers"
       :tabindex="tabindex"
+      role="menuitem"
       data-apos-test="context-menu-item"
       :data-apos-test-selected="selected"
       :data-apos-test-danger="danger"

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

@@ -0,0 +1,36 @@
+<template>
+  <div class="apos-locale">
+    <span class="apos-locale__label">
+      {{ $t('apostrophe:locale') }}:
+    </span> <span class="apos-locale__label-name">
+      {{ locale }}
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  locale: {
+    type: String,
+    required: true
+  }
+});
+
+const locale = computed(() => {
+  const label = apos.i18n.locales[props.locale]?.label;
+  return label ? `${label} (${props.locale})` : props.locale;
+});
+</script>
+
+<style lang="scss" scoped>
+  .apos-locale {
+    @include type-base;
+
+    font-weight: var(--a-weight-bold);
+  }
+
+  .apos-locale__label-name {
+    color: var(--a-primary);
+  }
+</style>

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

@@ -0,0 +1,283 @@
+<template>
+  <div
+    class="apos-locales-picker"
+    data-apos-test="localePicker"
+  >
+    <div class="apos-input-wrapper">
+      <input
+        v-model="search"
+        type="text"
+        class="apos-locales-picker__filter"
+        :placeholder="$t('apostrophe:searchLocalesPlaceholder')"
+      >
+    </div>
+    <ul class="apos-locales-picker__list">
+      <li
+        v-for="locale in filteredLocales"
+        :key="locale.name"
+        v-apos-tooltip="getForbiddenTooltip(locale)"
+        :class="localeClasses(locale)"
+        class="apos-locale-picker__item"
+        data-apos-test="localeItem"
+        @click="switchLocale(locale)"
+      >
+        <button :tabindex="isOpen ? '0' : '-1'" class="apos-locale-picker__locale-display">
+          <AposIndicator
+            v-if="isForbidden(locale)"
+            icon="lock-icon"
+            icon-color="var(--a-base-5)"
+            class="apos-locale-picker__check"
+            :icon-size="12"
+            :title="$t('apostrophe:forbidden')"
+          />
+          <AposIndicator
+            v-else-if="isActive(locale)"
+            icon="check-bold-icon"
+            icon-color="var(--a-primary)"
+            class="apos-locale-picker__check"
+            :icon-size="12"
+            :title="$t('apostrophe:currentLocale')"
+          />
+          {{ locale.label }}
+          <span class="apos-locale-picker__name">
+            ({{ locale.name }})
+          </span>
+          <span
+            class="apos-locale-picker__localized"
+            :class="{ 'apos-state-is-localized': isLocalized(locale) }"
+          />
+        </button>
+      </li>
+    </ul>
+    <div class="apos-locales-picker__available">
+      <p class="apos-locales-picker__available-desc">
+        {{ $t('apostrophe:documentExistsInLocales') }}
+      </p>
+      <AposButton
+        v-for="locale in availableLocales"
+        :key="locale.name"
+        class="apos-locales-picker__available-locale"
+        :label="locale.label"
+        type="quiet"
+        :modifiers="['no-motion']"
+        @click="switchLocale(locale)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const emit = defineEmits([ 'switch-locale' ]);
+const props = defineProps({
+  currentLocale: {
+    type: String,
+    required: true
+  },
+  localized: {
+    type: Object,
+    required: true
+  },
+  forbidden: {
+    type: Array,
+    default: () => ([])
+  },
+  forbiddenTooltip: {
+    type: String,
+    default: null
+  },
+  isOpen: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const search = ref('');
+const locales = ref(Object.entries(window.apos.i18n.locales).map(
+  ([ locale, options ]) => {
+    return {
+      name: locale,
+      label: options.label || locale
+    };
+  }
+));
+
+const filteredLocales = computed(() => {
+  return locales.value.filter(({ name, label }) => {
+    const matches = term =>
+      term.toLowerCase().includes(search.value.toLowerCase());
+    return matches(name) || matches(label);
+  });
+});
+
+const availableLocales = computed(() => {
+  return locales.value.filter(locale => isLocalized(locale));
+});
+
+function isLocalized(locale) {
+  return Boolean(props.localized[locale.name]);
+}
+
+function isActive(locale) {
+  return props.currentLocale === locale.name;
+}
+
+function isForbidden(locale) {
+  return props.forbidden.includes(locale.name);
+}
+
+function switchLocale(locale) {
+  emit('switch-locale', locale);
+}
+
+function localeClasses(locale) {
+  return {
+    'apos-active': isActive(locale),
+    'apos-exists': isLocalized(locale),
+    'apos-forbidden': isForbidden(locale)
+  };
+}
+
+function getForbiddenTooltip(locale) {
+  return isForbidden(locale) && {
+    content: props.forbiddenTooltip,
+    placement: 'left'
+  };
+}
+</script>
+
+<style lang="scss" scoped>
+.apos-locale-picker__locale-display {
+  @include apos-button-reset();
+
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 12px 35px;
+
+  &:focus, &:active {
+    outline: none;
+    border: none;
+    background-color: var(--a-base-10);
+  }
+
+  &:hover {
+    background-color: var(--a-base-9);
+  }
+
+}
+
+.apos-locales-picker {
+  width: 315px;
+}
+
+.apos-locales-picker__filter {
+  @include type-large;
+
+  box-sizing: border-box;
+  width: 100%;
+  padding: 20px 45px 20px 20px;
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid var(--a-base-9);
+  border-left: 0;
+  border-top-right-radius: var(--a-border-radius);
+  border-top-left-radius: var(--a-border-radius);
+
+  &::placeholder {
+    color: var(--a-base-4);
+    font-style: italic;
+  }
+
+  &:focus {
+    outline: none;
+    background-color: var(--a-base-10);
+  }
+}
+
+.apos-locales-picker__list {
+  margin: $spacing-base 0;
+  padding-left: 0;
+  list-style-type: none;
+  max-height: 350px;
+  overflow-y: scroll;
+  font-weight: var(--a-weight-base);
+}
+
+.apos-locale-picker__item {
+  position: relative;
+  line-height: 1;
+  cursor: pointer;
+
+  .state {
+    opacity: 0;
+  }
+
+  &:hover {
+    background-color: var(--a-base-10);
+  }
+
+  .apos-locale-picker__check {
+    position: absolute;
+    top: 50%;
+    left: 18px;
+    transform: translateY(-50%);
+    color: var(--a-primary);
+    stroke: var(--a-primary);
+
+    :deep(.material-design-icon__svg) {
+      stroke: none;
+    }
+  }
+
+  .apos-locale-picker__localized {
+    position: relative;
+    top: -1px;
+    left: 5px;
+    display: inline-block;
+    width: 3px;
+    height: 3px;
+    border: 1px solid var(--a-base-5);
+    border-radius: 50%;
+
+    &.apos-state-is-localized {
+      background-color: var(--a-success);
+      border-color: var(--a-success);
+    }
+  }
+}
+
+.apos-forbidden {
+  color: var(--a-base-5);
+  cursor: not-allowed;
+
+  &:hover {
+    background-color: var(--a-base-10);
+  }
+}
+
+.apos-locales-picker__name {
+  text-transform: uppercase;
+}
+
+.apos-locales-picker__available {
+  padding: $spacing-double;
+  border-top: 1px solid var(--a-base-9);
+}
+
+.apos-locales-picker__available-locale {
+  display: inline-block;
+  color: var(--a-primary);
+  font-size: var(--a-type-small);
+
+  &:not(:last-of-type) {
+    margin-right: 10px;
+    margin-bottom: 5px;
+  }
+}
+
+.apos-locales-picker__available-desc {
+  margin-top: 0;
+}
+</style>