apostrophe 3.48.0 → 3.50.0

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

@@ -20,8 +20,8 @@
       <li
         class="apos-combo__selected"
         v-for="checked in selectedItems"
-        :key="checked"
-        @click="selectOption(getSelectedOption(checked))"
+        :key="objectValues ? checked.value : checked"
+        @click.stop="selectOption(getSelectedOption(checked))"
       >
         {{ getSelectedOption(checked)?.label }}
         <AposIndicator
@@ -44,14 +44,30 @@
       :class="{'apos-combo__list--showed': showedList}"
       :style="{top: boxHeight + 'px'}"
       tabindex="0"
-      @keydown.prevent.space="selectOption(options[focusedItemIndex])"
-      @keydown.prevent.enter="selectOption(options[focusedItemIndex])"
-      @keydown.prevent.arrow-down="focusListItem()"
-      @keydown.prevent.arrow-up="focusListItem(true)"
-      @keydown.prevent.delete="closeList(null, true)"
-      @keydown.prevent.stop.esc="closeList(null, true)"
+      @keydown="onListKey"
       @blur="closeList()"
     >
+      <li
+        v-if="typehead"
+        class="apos-combo__list-typehead"
+        key="__typehead"
+        @click.stop="$refs.input.focus()"
+      >
+        <input
+          class="apos-combo__typehead"
+          type="text"
+          :placeholder="$t('apostrophe:search')"
+          :value="thInput"
+          ref="input"
+          @input="onTypeheadInput"
+          @keydown="onTypeheadKey"
+        >
+        <AposSpinner
+          v-if="busy"
+          class="apos-combo__spinner"
+          color="--a-base-5"
+        />
+      </li>
       <li
         :key="choice.value"
         class="apos-combo__list-item"
@@ -88,30 +104,54 @@ export default {
     value: {
       type: Object,
       required: true
+    },
+    typehead: {
+      type: Boolean,
+      default: false
+    },
+    busy: {
+      type: Boolean,
+      default: false
+    },
+    // When true, indicates that the values and selected items are arrays of objects,
+    // array of primitive values otherwise.
+    objectValues: {
+      type: Boolean,
+      default: false
     }
   },
 
-  emits: [ 'select-items' ],
+  emits: [ 'select-items', 'toggle', 'input' ],
   data () {
-    const showSelectAll = this.field.all !== false &&
-      (!this.field.max || this.field.max > this.choices.length);
 
     return {
       showedList: false,
       boxHeight: 0,
-      showSelectAll,
-      options: this.renderOptions(showSelectAll),
       boxResizeObserver: this.getBoxResizeObserver(),
-      focusedItemIndex: null
+      focusedItemIndex: null,
+      thInput: ''
     };
   },
   computed: {
+    showSelectAll() {
+      return this.field.all !== false &&
+        (!this.field.max || this.field.max > this.choices.length);
+    },
+    options() {
+      return this.renderOptions(this.showSelectAll);
+    },
     selectedItems() {
-      if (this.allItemsSelected()) {
-        return [ '__all' ];
+      if (!this.showSelectAll || !this.allItemsSelected()) {
+        return this.value.data;
       }
-
-      return this.value.data;
+      if (this.objectValues) {
+        const { listLabel } = this.getSelectAllLabel();
+        return [ {
+          label: listLabel,
+          value: '__all'
+        } ];
+      }
+      return [ '__all' ];
     }
   },
   mounted() {
@@ -121,6 +161,37 @@ export default {
     this.boxResizeObserver.unobserve(this.$refs.select);
   },
   methods: {
+    onTypeheadInput(e) {
+      this.thInput = e.target.value;
+      this.$emit('input', this.thInput);
+    },
+    onTypeheadKey(e) {
+      const stop = () => {
+        e.preventDefault();
+        e.stopPropagation();
+      };
+      switch (e.key) {
+        case 'ArrowDown':
+          stop();
+          this.focusListItem();
+          break;
+
+        case 'ArrowUp':
+          stop();
+          this.focusListItem(true);
+          break;
+
+        case 'Enter':
+          stop();
+          this.selectOption(this.options[this.focusedItemIndex]);
+          break;
+
+        case 'Tab':
+          stop();
+          this.closeList(null, true);
+          break;
+      }
+    },
     toggleList() {
       if (this.field.readOnly) {
         return;
@@ -128,15 +199,68 @@ export default {
       this.showedList = !this.showedList;
 
       if (this.showedList) {
+        this.$emit('toggle', true);
         this.$nextTick(() => {
-          this.$refs.list.focus();
           this.focusedItemIndex = 0;
+          if (this.typehead) {
+            this.$refs.input.focus();
+          } else {
+            this.$refs.list.focus();
+          }
         });
       } else {
         this.$refs.select.focus();
         this.resetList();
       }
     },
+    onListKey(e) {
+      const stop = () => {
+        e.preventDefault();
+        e.stopPropagation();
+      };
+      switch (e.key) {
+        case ' ': // Brave issues
+        case 'Space': {
+          if (!this.typehead) {
+            stop();
+            this.selectOption(this.options[this.focusedItemIndex]);
+          }
+          break;
+        }
+
+        case 'Enter': {
+          stop();
+          this.selectOption(this.options[this.focusedItemIndex]);
+          break;
+        }
+
+        case 'ArrowDown': {
+          stop();
+          this.focusListItem();
+          break;
+        }
+
+        case 'ArrowUp': {
+          stop();
+          this.focusListItem(true);
+          break;
+        }
+
+        case 'Delete': {
+          if (!this.typehead) {
+            stop();
+            this.closeList(null, true);
+          }
+          break;
+        }
+
+        case 'Escape': {
+          stop();
+          this.closeList(null, true);
+          break;
+        }
+      }
+    },
     closeList(_, focusSelect) {
       this.showedList = false;
       this.resetList();
@@ -148,8 +272,11 @@ export default {
       }
     },
     resetList() {
+      this.$emit('toggle', false);
       this.focusedItemIndex = null;
       this.$refs.list.scrollTo({ top: 0 });
+      this.thInput = '';
+      this.$emit('input', this.thInput);
     },
     getBoxResizeObserver() {
       return new ResizeObserver(([ { target } ]) => {
@@ -174,12 +301,21 @@ export default {
       ];
     },
     isSelected(choice) {
-      return this.value.data.some((val) => val === choice.value);
+      const condition = (entry) => (
+        this.objectValues
+          ? entry.value === choice.value
+          : entry === choice.value
+      );
+
+      return this.value.data.some(condition);
     },
     allItemsSelected () {
       return this.choices.length && this.value.data.length === this.choices.length;
     },
     getSelectedOption(checked) {
+      if (this.objectValues) {
+        return checked;
+      }
       if (checked === '__all') {
         const { selectedLabel } = this.getSelectAllLabel();
         return {
@@ -365,6 +501,12 @@ export default {
   &--showed {
     display: block;
   }
+
+  &-typehead {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+  }
 }
 
 .apos-combo__list-item {
@@ -378,4 +520,20 @@ export default {
   }
 }
 
+.apos-combo__typehead {
+  flex-grow: 1;
+  margin: 0;
+  padding: 10px 10px 10px 20px;
+  border: none;
+  box-sizing: border-box;
+  outline: none;
+  background-color: transparent;
+  @include type-base;
+}
+
+.apos-combo__spinner {
+  margin-right: 15px;
+  opacity: 0.7;
+}
+
 </style>

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

@@ -48,7 +48,7 @@ export default {
         return {
           label: 'apostrophe:filter',
           icon: 'chevron-down-icon',
-          modifiers: [ 'icon-right' ],
+          modifiers: [ 'icon-right', 'small' ],
           type: 'outline'
         };
       }

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

@@ -3,6 +3,7 @@
     <AposButton
       :disabled="currentPage == 1"
       class="apos-pager__btn"
+      :modifiers="['small']"
       type="outline" @click="incrementPage(-1)"
       :icon-only="true" icon="chevron-left-icon"
       :label="prevButtonLabel"
@@ -10,7 +11,7 @@
     <div class="apos-input-wrapper">
       <select
         :disabled="totalPages <= 1"
-        class="apos-input apos-input--select"
+        class="apos-pager__page-select apos-input apos-input--select"
         v-model="selectedPage" :aria-label="$t('apostrophe:selectPage')"
       >
         <option
@@ -25,6 +26,7 @@
     <AposButton
       :disabled="currentPage >= totalPages"
       class="apos-pager__btn"
+      :modifiers="['small']"
       type="outline" @click="incrementPage(1)"
       :icon-only="true" icon="chevron-right-icon"
       :label="nextButtonLabel"
@@ -94,13 +96,9 @@ export default {
     align-items: center;
   }
 
-  .apos-input-wrapper {
-    display: inline-flex;
-    align-self: stretch;
-  }
-
   .apos-input--select {
     background-color: transparent;
+    height: 32px;
     padding: 0 $spacing-double 0 $spacing-base;
   }
 

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

@@ -20,6 +20,7 @@ $input-color-disabled: var(--a-base-4);
 
 @mixin apos-primary-mixin($color) {
   --a-primary: #{$color};
+  --a-primary-transparent-10: #{transparentize($color, 0.1)};
   --a-primary-transparent-50: #{transparentize($color, 0.5)};
   --a-primary-transparent-10: #{transparentize($color, 0.9)};
   --a-primary-dark-10: #{mix(#000, $color, 10%)};

package/modules/@apostrophecms/util/index.js

@@ -563,12 +563,11 @@ module.exports = {
       // Also see `warnDevOnce` which is less likely to irritate
       // the developer until they stop paying attention.
 
-      warnDev(msg) {
+      warnDev(...args) {
         if (process.env.NODE_ENV === 'production') {
           return;
         }
-        const args = [ '\n⚠️', ...arguments ];
-        self.warn.apply(self, args);
+        self.warn(...[ '\n⚠️ ', ...args, '\n' ]);
       },
 
       // Identical to `apos.util.warnDev`, except that the warning is
@@ -578,7 +577,7 @@ module.exports = {
       // `--all-[name]` is present on the command line. You can
       // also suppress these with `--ignore-[name]`.
 
-      warnDevOnce(name, msg) {
+      warnDevOnce(name, ...args) {
         const always = self.apos.argv[`all-${name}`];
         const hide = self.apos.argv[`ignore-${name}`];
         if (hide) {
@@ -588,13 +587,13 @@ module.exports = {
           return;
         }
         if (always || (!self.warnedDev[name])) {
-          self.warn.apply(self, Array.prototype.slice.call(arguments, 1));
+          self.warnDev(...args);
           if (!always) {
             self.warnedDev[name] = true;
             self.info(stripIndent`
               This warning appears only once to save space. Pass --all-${name}
               on the command line to see the warning for all cases.
-            `);
+            ` + '\n');
           }
         }
       },

package/modules/@apostrophecms/util/ui/src/http.js

@@ -75,6 +75,10 @@ export default () => {
   // `uploadProgress` (may be a function accepting `sent` and `total` parameters. May never be called. If
   // called, `sent` will be the bytes sent so far, and `total` will be the total bytes to be
   // sent. If the total is unknown, it will be `null`)
+  // `prefix`: If explicitly set to `false`, do not automatically prefix the URL,
+  // even if the site has a site-wide prefix or locale prefix.
+  // It can become handy when the given url is already prefixed,
+  // which is the case when using the document's computed `_url` field for instance.
   //
   // If the status code is >= 400 an error is thrown. The error object will be
   // similar to a `fullResponse` object, with a `status` property.
@@ -104,9 +108,8 @@ export default () => {
       });
     }
 
-    if (apos.prefix) {
-      // We don't need a prefix if the target URL is already prefixed,
-      // which any absolute URL should be
+    if (apos.prefix && options.prefix !== false) {
+      // Prepend the prefix if the URL is absolute:
       if (url.substring(0, 1) === '/') {
         url = apos.prefix + url;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apostrophe",
-  "version": "3.48.0",
+  "version": "3.50.0",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {
@@ -34,20 +34,37 @@
     "@apostrophecms/vue-color": "^2.8.2",
     "@opentelemetry/api": "^1.0.4",
     "@opentelemetry/semantic-conventions": "^1.0.1",
+    "@tiptap/core": "^2.0.0-beta.220",
+    "@tiptap/extension-blockquote": "^2.0.0-beta.220",
+    "@tiptap/extension-bold": "^2.0.0-beta.220",
+    "@tiptap/extension-bullet-list": "^2.0.0-beta.220",
+    "@tiptap/extension-code": "^2.0.0-beta.220",
+    "@tiptap/extension-code-block": "^2.0.0-beta.220",
+    "@tiptap/extension-dropcursor": "^2.0.0-beta.220",
     "@tiptap/extension-floating-menu": "^2.0.0-beta.220",
+    "@tiptap/extension-gapcursor": "^2.0.0-beta.220",
+    "@tiptap/extension-hard-break": "^2.0.0-beta.220",
+    "@tiptap/extension-heading": "^2.0.0-beta.220",
     "@tiptap/extension-highlight": "^2.0.0-beta.220",
+    "@tiptap/extension-history": "^2.0.0-beta.220",
+    "@tiptap/extension-horizontal-rule": "^2.0.0-beta.220",
+    "@tiptap/extension-italic": "^2.0.0-beta.220",
     "@tiptap/extension-link": "^2.0.0-beta.220",
+    "@tiptap/extension-list-item": "^2.0.0-beta.220",
+    "@tiptap/extension-ordered-list": "^2.0.0-beta.220",
+    "@tiptap/extension-paragraph": "^2.0.0-beta.220",
     "@tiptap/extension-placeholder": "^2.0.0-beta.220",
+    "@tiptap/extension-strike": "^2.0.0-beta.220",
     "@tiptap/extension-subscript": "^2.0.0-beta.220",
     "@tiptap/extension-superscript": "^2.0.0-beta.220",
     "@tiptap/extension-table": "^2.0.0-beta.220",
     "@tiptap/extension-table-cell": "^2.0.0-beta.220",
     "@tiptap/extension-table-header": "^2.0.0-beta.220",
     "@tiptap/extension-table-row": "^2.0.0-beta.220",
+    "@tiptap/extension-text": "^2.0.0-beta.220",
     "@tiptap/extension-text-align": "^2.0.0-beta.220",
     "@tiptap/extension-text-style": "^2.0.0-beta.220",
     "@tiptap/extension-underline": "^2.0.0-beta.220",
-    "@tiptap/starter-kit": "^2.0.0-beta.220",
     "@tiptap/vue-2": "^2.0.0-beta.220",
     "autoprefixer": "^10.4.1",
     "bluebird": "^3.7.2",
@@ -83,7 +100,7 @@
     "jsdom": "^22.0.0",
     "klona": "^2.0.4",
     "launder": "^1.4.0",
-    "lodash": "^4.17.20",
+    "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^1.6.0",
     "minimatch": "^3.0.4",
     "mkdirp": "^0.5.5",

package/test/change-doc-ids.js

@@ -0,0 +1,134 @@
+const t = require('../test-lib/test.js');
+const assert = require('assert');
+let apos;
+const articles = []; const categories = [];
+
+describe('change-doc-ids', function() {
+
+  this.timeout(t.timeout);
+
+  after(function() {
+    return t.destroy(apos);
+  });
+
+  it('should initialize the apos object', async function() {
+    apos = await t.create({
+      root: module,
+      modules: {
+        article: {
+          extend: '@apostrophecms/piece-type',
+          options: {
+            alias: 'article'
+          },
+          fields: {
+            add: {
+              _categories: {
+                type: 'relationship',
+                withType: 'category'
+              }
+            }
+          }
+        },
+        category: {
+          extend: '@apostrophecms/piece-type',
+          options: {
+            alias: 'category'
+          }
+        },
+        'default-page': {},
+        '@apostrophecms/page': {
+          options: {
+            park: [
+              {
+                slug: '/test',
+                type: 'default-page',
+                title: 'Test',
+                parkedId: 'test',
+                visibility: 'public',
+                _children: [
+                  {
+                    slug: '/test/child',
+                    type: 'default-page',
+                    title: 'Test Child',
+                    parkedId: 'test-child',
+                    visibility: 'public'
+                  }
+                ]
+              }
+            ]
+          }
+        }
+      }
+    });
+  });
+
+  it('should insert categories', async function() {
+    for (let i = 0; (i < 10); i++) {
+      const category = apos.category.newInstance();
+      categories.push(await apos.category.insert(apos.task.getReq(), {
+        ...category,
+        title: 'Category ' + i,
+        slug: 'category-' + i
+      }));
+    }
+  });
+
+  it('should insert articles with relationships to categories', async function() {
+    for (let i = 0; (i < 10); i++) {
+      const article = apos.article.newInstance();
+      articles.push(await apos.article.insert(apos.task.getReq(), {
+        ...article,
+        title: 'Article ' + i,
+        slug: 'article-' + i,
+        _categories: [ categories[i % 4], categories[(i + 1) % 4] ]
+      }));
+    }
+  });
+
+  it('changeDocIds should work across a mix of pages and pieces', async function() {
+
+    await sanityCheck();
+
+    const pages = await apos.page.find(apos.task.getReq(), {}).toArray();
+    const test = pages.find(page => page.slug === '/test');
+    const newPageId = `new-test-page-id:${test.aposLocale}`;
+    const newCategoryId = `new-test-category-id:${categories[0].aposLocale}`;
+    const pairs = [
+      [ test._id, newPageId ],
+      [ categories[0]._id, newCategoryId ]
+    ];
+    await apos.doc.changeDocIds(pairs);
+
+    await sanityCheck(newPageId, newCategoryId);
+  });
+
+});
+
+async function sanityCheck(newPageId, newCategoryId) {
+  const pages = await apos.page.find(apos.task.getReq(), {}).children(true).toArray();
+  const test = pages.find(page => page.slug === '/test');
+  assert(test);
+  assert(test._children[0]);
+  assert(!test._children[1]);
+  assert.strictEqual(test._children[0].slug, '/test/child');
+  if (newPageId) {
+    assert.strictEqual(test._id, newPageId);
+    const newPageDocId = newPageId.replace(/:.+$/, '');
+    assert.strictEqual(test.aposDocId, newPageDocId);
+    assert(test.path.includes(newPageDocId));
+    assert(test._children[0].path.includes(newPageDocId));
+  }
+  const articles = await apos.article.find(apos.task.getReq(), {}).sort({ slug: 1 }).toArray();
+  assert.strictEqual(articles[0].title, 'Article 0');
+  assert(articles[0]._categories);
+  assert.strictEqual(articles[0]._categories.length, 2);
+  assert(articles[0]._categories.find(category => category.slug === 'category-0'));
+  assert(articles[0]._categories.find(category => category.slug === 'category-1'));
+  if (newCategoryId) {
+    assert.strictEqual(articles[0]._categories[0]._id, newCategoryId);
+    const newCategory = articles[0]._categories.find(category => category._id === newCategoryId);
+    assert(newCategory);
+    assert.strictEqual(newCategory._id, newCategoryId);
+    assert.strictEqual(newCategory.aposDocId, newCategoryId.replace(/:.+$/, ''));
+  }
+}