apostrophe 3.43.0 → 3.44.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 3.44.0 (2023-04-13)
+
+### Adds
+
+* `checkboxes` fields now support a new `style: 'combobox'` option for a better multiple-select experience when there
+are many choices.
+* If the new `guestApiAccess` option is set to `true` for a piece type or for `@apostrophecms/page`,
+Apostrophe will allow all logged-in users to access the GET-method REST APIs of that
+module, not just users with editing privileges, even if `publicApiProjection` is not set.
+This is useful when the goal is to allow REST API access to "guest" users who have
+project-specific reasons to fetch access content via REST APIs.
+* `test-lib/utils.js` has new `createUser` and `loginAs` methods for the convenience of
+those writing mocha tests of Apostrophe modules.
+
 ## 3.43.0 (2023-03-29)
 
 ### Adds

package/force-deploy

@@ -0,0 +1 @@
+4

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

@@ -79,10 +79,11 @@ export default {
   },
   computed: {
     contextBarActive() {
-      return window.apos.adminBar.contextBar && this.canEdit;
+      return window.apos.adminBar.contextBar && (this.canEdit || this.moduleOptions.canLocalize);
     },
     canEdit() {
-      return this.context._edit || ((this.context.aposLocale && this.context.aposLocale.endsWith(':published')) && this.draftIsEditable);
+      return this.context._edit || ((this.context.aposLocale && this.context.aposLocale.endsWith(':published')) &&
+        this.draftIsEditable);
     },
     classes() {
       if (!this.contextBarActive) {

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

@@ -763,6 +763,11 @@ module.exports = {
       async findOneForCopying(req, criteria) {
         return self.findOneForEditing(req, criteria);
       },
+      // Identical to findOneForEditing by default, but could be
+      // overridden usefully in subclasses.
+      async findOneForLocalizing(req, criteria) {
+        return self.findOneForEditing(req, criteria);
+      },
       // Submit the current draft for review. The identity
       // of `req.user` is associated with the submission.
       // Returns the `submitted` object, with `by`, `byId`,
@@ -1424,8 +1429,13 @@ module.exports = {
           label,
           pluralLabel,
           relatedDocument: self.options.relatedDocument,
+          canEdit: self.apos.permission.can(req, 'edit', self.name, 'draft'),
           canPublish: self.apos.permission.can(req, 'publish', self.name)
         };
+        browserOptions.canLocalize = browserOptions.canEdit &&
+          self.options.localized &&
+          Object.keys(self.apos.i18n.locales).length > 1 &&
+          Object.values(self.apos.i18n.locales).some(locale => locale._edit);
         browserOptions.action = self.action;
         browserOptions.schema = self.allowedSchema(req);
         browserOptions.localized = self.isLocalized();

package/modules/@apostrophecms/doc-type/ui/apos/components/AposDocContextMenu.vue

@@ -181,6 +181,10 @@ export default {
       return menu;
     },
     customMenusByContext() {
+      if (!this.canEdit) {
+        return [];
+      }
+
       const menus = this.customOperationsByContext
         .map(op => ({
           label: op.label,
@@ -233,7 +237,7 @@ export default {
       }
     },
     canDismissSubmission() {
-      return this.context.submitted && (this.canPublish || (this.context.submitted.byId === apos.login.user._id));
+      return this.canEdit && this.context.submitted && (this.canPublish || (this.context.submitted.byId === apos.login.user._id));
     },
     canDiscardDraft() {
       if (!this.manuallyPublished) {
@@ -242,6 +246,9 @@ export default {
       if (!this.context._id) {
         return false;
       }
+      if (!this.canEdit) {
+        return false;
+      }
       return (
         (!this.context.lastPublishedAt) &&
         !this.moduleOptions.singleton
@@ -251,10 +258,12 @@ export default {
       );
     },
     canLocalize() {
-      return (Object.keys(apos.i18n.locales).length > 1) && this.moduleOptions.localized && this.context._id;
+      return this.moduleOptions.canLocalize &&
+        this.context._id;
     },
     canArchive() {
       return (
+        this.canEdit &&
         this.context._id &&
         !this.moduleOptions.singleton &&
         !this.context.archived &&
@@ -264,6 +273,7 @@ export default {
     },
     canUnpublish() {
       return (
+        this.canEdit &&
         !this.context.parked &&
         this.moduleOptions.canPublish &&
         this.context.lastPublishedAt &&
@@ -271,10 +281,14 @@ export default {
       );
     },
     canCopy() {
-      return this.canEdit && !this.moduleOptions.singleton && this.context._id;
+      return this.canEdit &&
+        this.moduleOptions.canEdit &&
+        !this.moduleOptions.singleton &&
+        this.context._id;
     },
     canRestore() {
       return (
+        this.canEdit &&
         this.context._id &&
         this.context.archived &&
         ((this.moduleOptions.canPublish && this.context.lastPublishedAt) || !this.manuallyPublished)

package/modules/@apostrophecms/doc-type/ui/apos/components/AposDocEditor.vue

@@ -162,6 +162,7 @@ export default {
         ref: null
       },
       published: null,
+      readOnly: false,
       restoreOnly: false,
       saveMenu: null,
       generation: 0
@@ -174,14 +175,24 @@ export default {
     followingUtils() {
       return this.followingValues('utility');
     },
+    canEdit() {
+      if (this.original && this.original._id) {
+        return this.original._edit || this.moduleOptions.canEdit;
+      }
+
+      return this.moduleOptions.canEdit;
+    },
     canPublish() {
       if (this.original && this.original._id) {
-        return this.original._publish;
+        return this.original._publish || this.moduleOptions.canPublish;
       }
 
       return this.moduleOptions.canPublish;
     },
     saveDisabled() {
+      if (!this.canEdit) {
+        return true;
+      }
       if (this.restoreOnly) {
         // Can always restore if it's a read-only view of the archive
         return false;
@@ -421,10 +432,6 @@ export default {
     async loadDoc() {
       let docData;
       try {
-        if (!await this.lock(this.getOnePath, this.docId)) {
-          await this.lockNotAvailable();
-          return;
-        }
         docData = await apos.http.get(this.getOnePath, {
           busy: true,
           qs: {
@@ -438,6 +445,12 @@ export default {
         } else {
           this.restoreOnly = false;
         }
+        const canEdit = docData._edit || this.moduleOptions.canEdit;
+        this.readOnly = canEdit === false;
+        if (canEdit && !await this.lock(this.getOnePath, this.docId)) {
+          await this.lockNotAvailable();
+          return;
+        }
       } catch {
         await apos.notify('apostrophe:loadDocFailed', {
           type: 'warning',

package/modules/@apostrophecms/i18n/i18n/de.json

@@ -4,6 +4,7 @@
   "addWidgetType": "{{ label }} hinzufügen",
   "admin": "Administrator",
   "affirmativeLabel": "Ja, fortsetzen.",
+  "allSelected": "Alle ausgewählt",
   "altText": "Alternativtext",
   "altTextHelp": "Bildbeschreibung oder alternativer Text, der für Bildschirmleser verwendet wird.",
   "any": "Irgendwas",

package/modules/@apostrophecms/i18n/i18n/en.json

@@ -9,6 +9,7 @@
   "addWidgetType": "Add {{ label }}",
   "admin": "Admin",
   "affirmativeLabel": "Yes, continue.",
+  "allSelected": "All Selected",
   "altText": "Alt Text",
   "altTextHelp": "Image description used for accessibility",
   "anchorId": "Anchor ID",

package/modules/@apostrophecms/i18n/i18n/es.json

@@ -3,6 +3,7 @@
   "addItem": "Añadir Elemento",
   "addWidgetType": "Añadir {{ label }}",
   "admin": "Administrador",
+  "allSelected": "Todo seleccionado",
   "altText": "Texto Alternativo",
   "altTextHelp": "Descripción de imagen utilizada para accesibilidad",
   "any": "Cualquiera",

package/modules/@apostrophecms/i18n/i18n/fr.json

@@ -3,6 +3,7 @@
   "addItem": "Ajouter un élément",
   "addWidgetType": "Ajouter {{ label }}",
   "affirmativeLabel": "Oui, continuer.",
+  "allSelected": "Tout Selectionné",
   "altText": "Texte alternatif",
   "altTextHelp": "Description d'image utilisée pour l'accessibilité",
   "any": "Quelconque",

package/modules/@apostrophecms/i18n/i18n/pt-BR.json

@@ -3,6 +3,7 @@
   "addItem": "Adicionar Item",
   "addWidgetType": "Adicionar {{ label }}",
   "admin": "Admin",
+  "allSelected": "Tudo Selecionado",
   "altText": "Texto Alternativo",
   "altTextHelp": "Descrição da imagem usada para acessibilidade",
   "any": "Qualquer",

package/modules/@apostrophecms/i18n/i18n/sk.json

@@ -4,6 +4,7 @@
   "addWidgetType": "Pridať {{ label }}",
   "admin": "Admin",
   "affirmativeLabel": "Áno, pokračovať.",
+  "allSelected": "Všetky Vybrané",
   "altText": "Alternatívny text",
   "altTextHelp": "Alternatívny popis obrázkov pre zlepšenú prístupnosť",
   "any": "ľubovoľný",

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

@@ -584,6 +584,9 @@ module.exports = {
             label: 'English'
           }
         };
+        for (const locale in locales) {
+          locales[locale]._edit = true;
+        }
         verifyLocales(locales, self.apos.options.baseUrl);
         return locales;
       },

package/modules/@apostrophecms/i18n/ui/apos/components/AposI18nLocalize.vue

@@ -278,7 +278,8 @@ export default {
         ([ locale, options ]) => {
           return {
             name: locale,
-            label: options.label || locale
+            label: options.label || locale,
+            _edit: options._edit
           };
         }
       ),
@@ -382,12 +383,12 @@ export default {
         : apos.modules[this.doc.type].action;
     },
     filteredLocales() {
-      return this.locales.filter(({ name, label }) => {
-        const matches = term =>
-          term
-            .toLowerCase()
-            .includes(this.wizard.sections.selectLocales.filter.toLowerCase());
+      const matches = term =>
+        term
+          .toLowerCase()
+          .includes(this.wizard.sections.selectLocales.filter.toLowerCase());
 
+      return this.locales.filter(({ name, label }) => {
         return matches(name) || matches(label);
       });
     },
@@ -395,7 +396,7 @@ export default {
       return this.wizard.values.toLocales.data;
     },
     allSelected() {
-      return this.selectedLocales.length === this.locales.filter(locale => !this.isCurrentLocale(locale)).length;
+      return this.selectedLocales.length === this.locales.filter(locale => !this.isCurrentLocale(locale) && this.canEditLocale(locale)).length;
     },
     relatedDocTypes() {
       const types = {};
@@ -532,6 +533,9 @@ export default {
     isCurrentLocale(locale) {
       return window.apos.i18n.locale === locale.name;
     },
+    canEditLocale(locale) {
+      return !!locale._edit;
+    },
     isSelected(locale) {
       return this.wizard.values.toLocales.data.some(
         ({ name }) => name === locale.name
@@ -541,13 +545,13 @@ export default {
       return !!this.localized[locale.name];
     },
     selectAll() {
-      this.wizard.values.toLocales.data = this.locales.filter(locale => !this.isCurrentLocale(locale));
+      this.wizard.values.toLocales.data = this.locales.filter(locale => !this.isCurrentLocale(locale) && this.canEditLocale(locale));
     },
     deselectAll() {
       this.wizard.values.toLocales.data = [];
     },
     toggleLocale(locale) {
-      if (!this.isSelected(locale) && !this.isCurrentLocale(locale)) {
+      if (!this.isSelected(locale) && !this.isCurrentLocale(locale) && this.canEditLocale(locale)) {
         this.wizard.values.toLocales.data.push(locale);
       } else if (this.isSelected(locale)) {
         this.wizard.values.toLocales.data = this.wizard.values.toLocales.data.filter(l => l !== locale);
@@ -590,6 +594,9 @@ export default {
       if (this.isCurrentLocale(locale)) {
         classes['apos-current-locale'] = true;
       }
+      if (!this.canEditLocale(locale)) {
+        classes['apos-disabled-locale'] = true;
+      }
       return classes;
     },
     // Singular type name for label (returns an i18next key)
@@ -948,15 +955,18 @@ export default {
   line-height: 1;
   border-radius: var(--a-border-radius);
 
-  &:not(.apos-current-locale) {
+  &:not(.apos-current-locale),
+  &:not(.apos-disabled-locale) {
     cursor: pointer;
   }
 
-  &:not(.apos-current-locale):hover {
+  &:not(.apos-current-locale):hover,
+  &:not(.apos-disabled-locale):hover {
     background-color: var(--a-base-10);
   }
 
-  &:not(.apos-current-locale):active {
+  &:not(.apos-current-locale):active,
+  &:not(.apos-disabled-locale):active {
     background-color: var(--a-base-9);
   }
 
@@ -974,11 +984,13 @@ export default {
   }
 
   &.apos-current-locale,
+  &.apos-disabled-locale,
   .apos-current-locale-icon {
     color: var(--a-base-5);
   }
 
-  &.apos-current-locale {
+  &.apos-current-locale,
+  &.apos-disabled-locale {
     font-style: italic;
   }
 

package/modules/@apostrophecms/image/ui/apos/components/AposMediaManagerEditor.vue

@@ -158,7 +158,7 @@ export default {
       return window.apos.modules[this.activeMedia.type] || {};
     },
     canLocalize() {
-      return (Object.keys(apos.i18n.locales).length > 1) && this.moduleOptions.localized && this.activeMedia._id;
+      return this.moduleOptions.canLocalize && this.activeMedia._id;
     },
     moreMenu() {
       const menu = [ {

package/modules/@apostrophecms/modal/ui/apos/mixins/AposEditorMixin.js

@@ -24,6 +24,7 @@ export default {
       },
       serverErrors: null,
       restoreOnly: false,
+      readOnly: false,
       changed: [],
       externalConditionsResults: {}
     };
@@ -32,7 +33,7 @@ export default {
   computed: {
     schema() {
       let schema = (this.moduleOptions.schema || []).filter(field => apos.schema.components.fields[field.type]);
-      if (this.restoreOnly) {
+      if (this.restoreOnly || this.readOnly) {
         schema = klona(schema);
         for (const field of schema) {
           field.readOnly = true;

package/modules/@apostrophecms/modal/ui/apos/mixins/AposModalTabsMixin.js

@@ -48,10 +48,11 @@ export default {
         if (key !== 'utility') {
           tabs.push({
             name: key,
-            label: this.groups[key].label
+            label: this.groups[key].label,
+            fields: this.groups[key].fields
           });
         }
-      };
+      }
 
       return tabs;
     }

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

@@ -802,6 +802,17 @@ module.exports = {
         }
       },
 
+      // Modules that have REST APIs use this method
+      // to determine if a request is qualified to access
+      // it without restriction to the `publicApiProjection`
+      canAccessApi(req) {
+        if (self.options.guestApiAccess) {
+          return !!req.user;
+        } else {
+          return self.apos.permission.can(req, 'view-draft');
+        }
+      },
+
       // Merge in the event emitter / responder capabilities
       ...require('./lib/events.js')(self)
     };

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

@@ -133,7 +133,7 @@ module.exports = {
           const autocomplete = self.apos.launder.string(req.query.autocomplete);
 
           if (autocomplete.length) {
-            if (!self.apos.permission.can(req, 'edit', '@apostrophecms/any-page-type')) {
+            if (!self.apos.permission.can(req, 'view', '@apostrophecms/any-page-type')) {
               throw self.apos.error('forbidden');
             }
             return {
@@ -145,7 +145,7 @@ module.exports = {
           }
 
           if (all) {
-            if (!self.apos.permission.can(req, 'edit', '@apostrophecms/any-page-type')) {
+            if (!self.apos.permission.can(req, 'view', '@apostrophecms/any-page-type')) {
               throw self.apos.error('forbidden');
             }
             const page = await self.getRestQuery(req).permission(false).and({ level: 0 }).children({
@@ -418,7 +418,7 @@ module.exports = {
         },
         ':_id/localize': async (req) => {
           const _id = self.inferIdLocaleAndMode(req, req.params._id);
-          const draft = await self.findOneForEditing(req.clone({
+          const draft = await self.findOneForLocalizing(req.clone({
             mode: 'draft'
           }), {
             aposDocId: _id.split(':')[0]
@@ -819,6 +819,11 @@ database.`);
         // A list of all valid page types, including parked pages etc. This is
         // not a menu of choices for creating a page manually
         browserOptions.validPageTypes = self.apos.instancesOf('@apostrophecms/page-type').map(module => module.__meta.name);
+        browserOptions.canEdit = self.apos.permission.can(req, 'edit', '@apostrophecms/any-page-type', 'draft');
+        browserOptions.canLocalize = browserOptions.canEdit &&
+          browserOptions.localized &&
+          Object.keys(self.apos.i18n.locales).length > 1 &&
+          Object.values(self.apos.i18n.locales).some(locale => locale._edit);
         return browserOptions;
       },
       // Returns a query that finds pages the current user can edit
@@ -2212,7 +2217,7 @@ database.`);
           .applyBuildersSafely(req.query);
         // Minimum standard for a REST query without a public projection
         // is being allowed to view drafts on the site
-        if (!self.apos.permission.can(req, 'view-draft')) {
+        if (!self.canAccessApi(req)) {
           if (!self.options.publicApiProjection) {
             // Shouldn't be needed thanks to publicApiCheck, but be sure
             query.and({
@@ -2243,6 +2248,9 @@ database.`);
       async findOneForEditing(req, criteria, builders) {
         return self.findForEditing(req, criteria, builders).toObject();
       },
+      async findOneForLocalizing(req, criteria, builders) {
+        return self.findForEditing(req, criteria, builders).toObject();
+      },
       // Throws a `notfound` exception if a public API projection is
       // not specified and the user does not have the `view-draft` permission,
       // which all roles capable of editing the site at all will have. This is needed because
@@ -2250,7 +2258,7 @@ database.`);
       // we also want to flunk all public access to REST APIs if not specifically configured.
       publicApiCheck(req) {
         if (!self.options.publicApiProjection) {
-          if (!self.apos.permission.can(req, 'view-draft')) {
+          if (!self.canAccessApi(req)) {
             throw self.apos.error('notfound');
           }
         }

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

@@ -408,7 +408,7 @@ module.exports = {
         },
         ':_id/localize': async (req) => {
           const _id = self.inferIdLocaleAndMode(req, req.params._id);
-          const draft = await self.findOneForEditing(req.clone({
+          const draft = await self.findOneForLocalizing(req.clone({
             mode: 'draft'
           }), {
             aposDocId: _id.split(':')[0]
@@ -1002,7 +1002,7 @@ module.exports = {
       getRestQuery(req) {
         const query = self.find(req).attachments(true);
         query.applyBuildersSafely(req.query);
-        if (!self.apos.permission.can(req, 'view-draft')) {
+        if (!self.canAccessApi(req)) {
           if (!self.options.publicApiProjection) {
             // Shouldn't be needed thanks to publicApiCheck, but be sure
             query.and({
@@ -1024,7 +1024,7 @@ module.exports = {
       // we also want to flunk all public access to REST APIs if not specifically configured.
       publicApiCheck(req) {
         if (!self.options.publicApiProjection) {
-          if (!self.apos.permission.can(req, 'view-draft')) {
+          if (!self.canAccessApi(req)) {
             throw self.apos.error('notfound');
           }
         }

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

@@ -78,7 +78,7 @@
           />
         </td>
         <!-- append the context menu -->
-        <td v-if="canEdit(item)" class="apos-table__cell apos-table__cell--context-menu">
+        <td class="apos-table__cell apos-table__cell--context-menu">
           <AposCellContextMenu
             :state="state[item._id]" :item="item"
             :draft="item"
@@ -164,10 +164,10 @@ export default {
   methods: {
     canEdit(item) {
       if (item._id) {
-        return item._edit;
+        return item._edit || this.options.canLocalize;
       }
 
-      return this.options.canEdit;
+      return this.options.canEdit || this.options.canLocalize;
     },
     over(id) {
       this.state[id].hover = true;

package/modules/@apostrophecms/schema/ui/apos/components/AposInputCheckboxes.vue

@@ -6,7 +6,16 @@
     :display-options="displayOptions"
   >
     <template #body>
+      <AposCombo
+        v-if="field.style === 'combo' && choices.length"
+        :choices="choices"
+        :field="field"
+        :value="value"
+        @select-items="selectItems"
+      />
+
       <AposCheckbox
+        v-else
         :for="getChoiceId(uid, choice.value)"
         v-for="choice in choices"
         :key="choice.value"
@@ -26,7 +35,7 @@ import AposInputChoicesMixin from 'Modules/@apostrophecms/schema/mixins/AposInpu
 export default {
   name: 'AposInputCheckboxes',
   mixins: [ AposInputMixin, AposInputChoicesMixin ],
-  beforeMount: function () {
+  beforeMount () {
     this.value.data = Array.isArray(this.value.data) ? this.value.data : [];
   },
   methods: {
@@ -49,12 +58,12 @@ export default {
 
       if (this.field.min) {
         if ((values != null) && (values.length < this.field.min)) {
-          return 'min';
+          return this.$t('apostrophe:minUi', { number: this.field.min });
         }
       }
       if (this.field.max) {
         if ((values != null) && (values.length > this.field.max)) {
-          return 'max';
+          return this.$t('apostrophe:maxUi', { number: this.field.max });
         }
       }
 
@@ -69,6 +78,21 @@ export default {
       }
 
       return false;
+    },
+    selectItems(choice) {
+      if (choice.value === '__all') {
+        this.value.data = this.choices.length === this.value.data.length
+          ? []
+          : this.choices.map(({ value }) => value);
+
+        return;
+      }
+
+      if (this.value.data.includes(choice.value)) {
+        this.value.data = this.value.data.filter((val) => val !== choice.value);
+      } else {
+        this.value.data.push(choice.value);
+      }
     }
   }
 };

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

@@ -0,0 +1,381 @@
+<template>
+  <div
+    class="apos-primary-scrollbar apos-input-wrapper"
+    aria-haspopup="menu"
+    :class="{'apos-input-wrapper--disabled': field.readOnly}"
+  >
+    <ul
+      ref="select"
+      role="button"
+      :aria-expanded="showedList.toString()"
+      :aria-controls="`${field._id}-combo`"
+      v-click-outside-element="closeList"
+      class="apos-input-wrapper apos-combo__select"
+      @click="toggleList"
+      :tabindex="field.readOnly ? null : 0"
+      @keydown.prevent.space="toggleList"
+      @keydown.prevent.up="toggleList"
+      @keydown.prevent.down="toggleList"
+    >
+      <li
+        class="apos-combo__selected"
+        v-for="checked in selectedItems"
+        :key="checked"
+        @click="selectOption(getSelectedOption(checked))"
+      >
+        {{ getSelectedOption(checked)?.label }}
+        <AposIndicator
+          icon="close-icon"
+          class="apos-combo__close-icon"
+          :icon-size="10"
+        />
+      </li>
+    </ul>
+    <AposIndicator
+      icon="menu-down-icon"
+      class="apos-input-icon"
+      :icon-size="20"
+    />
+    <ul
+      :id="`${field._id}-combo`"
+      ref="list"
+      role="menu"
+      class="apos-combo__list"
+      :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)"
+      @blur="closeList()"
+    >
+      <li
+        :key="choice.value"
+        class="apos-combo__list-item"
+        role="menuitemcheckbox"
+        :class="{focused: focusedItemIndex === i}"
+        v-for="(choice, i) in options"
+        @click.stop="selectOption(choice)"
+        @mouseover="focusedItemIndex = i"
+      >
+        <AposIndicator
+          v-if="isSelected(choice)"
+          icon="check-bold-icon"
+          class="apos-combo__check-icon"
+          :icon-size="10"
+        />
+        {{ choice.label }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AposCombo',
+  props: {
+    choices: {
+      type: Array,
+      required: true
+    },
+    field: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: Object,
+      required: true
+    }
+  },
+
+  emits: [ 'select-items' ],
+  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
+    };
+  },
+  computed: {
+    selectedItems() {
+      if (this.allItemsSelected()) {
+        return [ '__all' ];
+      }
+
+      return this.value.data;
+    }
+  },
+  mounted() {
+    this.boxResizeObserver.observe(this.$refs.select);
+  },
+  beforeDestroy() {
+    this.boxResizeObserver.unobserve(this.$refs.select);
+  },
+  methods: {
+    toggleList() {
+      if (this.field.readOnly) {
+        return;
+      }
+      this.showedList = !this.showedList;
+
+      if (this.showedList) {
+        this.$nextTick(() => {
+          this.$refs.list.focus();
+          this.focusedItemIndex = 0;
+        });
+      } else {
+        this.$refs.select.focus();
+        this.resetList();
+      }
+    },
+    closeList(_, focusSelect) {
+      this.showedList = false;
+      this.resetList();
+
+      if (focusSelect) {
+        this.$nextTick(() => {
+          this.$refs.select.focus();
+        });
+      }
+    },
+    resetList() {
+      this.focusedItemIndex = null;
+      this.$refs.list.scrollTo({ top: 0 });
+    },
+    getBoxResizeObserver() {
+      return new ResizeObserver(([ { target } ]) => {
+        if (target.offsetHeight !== this.boxHeight) {
+          this.boxHeight = target.offsetHeight;
+        }
+      });
+    },
+    renderOptions(showSelectAll) {
+      if (!showSelectAll) {
+        return this.choices;
+      }
+
+      const { listLabel } = this.getSelectAllLabel();
+
+      return [
+        {
+          label: listLabel,
+          value: '__all'
+        },
+        ...this.choices
+      ];
+    },
+    isSelected(choice) {
+      return this.value.data.some((val) => val === choice.value);
+    },
+    allItemsSelected () {
+      return this.choices.length && this.value.data.length === this.choices.length;
+    },
+    getSelectedOption(checked) {
+      if (checked === '__all') {
+        const { selectedLabel } = this.getSelectAllLabel();
+        return {
+          label: selectedLabel,
+          value: checked
+        };
+      }
+
+      return this.choices.find((choice) => choice.value === checked);
+    },
+    emitSelectItems(data) {
+      return new Promise((resolve) => {
+        this.$emit('select-items', data);
+        this.$nextTick(resolve);
+      });
+    },
+    async selectOption(choice) {
+      if (this.field.readOnly) {
+        return;
+      }
+
+      const selectedChoice = this.showSelectAll && choice === '__all'
+        ? this.getSelectedOption('__all')
+        : choice;
+
+      await this.emitSelectItems(selectedChoice);
+
+      if (this.showSelectAll) {
+        const { listLabel } = this.getSelectAllLabel();
+        this.options[0].label = listLabel;
+      }
+    },
+
+    getSelectAllLabel() {
+      const allSelected = this.allItemsSelected();
+      const defaultSelectAllListLabel = allSelected
+        ? this.$t('apostrophe:deselectAll')
+        : this.$t('apostrophe:selectAll');
+      const selectedLabel = this.$t('apostrophe:allSelected');
+
+      if (this.field?.all?.label) {
+        const selectAllLabel = this.$t(this.field.all.label);
+        return {
+          selectedLabel,
+          listLabel: allSelected ? defaultSelectAllListLabel : selectAllLabel
+        };
+      }
+
+      return {
+        selectedLabel,
+        listLabel: defaultSelectAllListLabel
+      };
+    },
+    focusListItem(prev = false) {
+      const destIndex = (i) => prev ? i - 1 : i + 1;
+      const fallback = prev ? this.options.length - 1 : 0;
+      if (this.focusedItemIndex == null) {
+        this.focusedItemIndex = fallback;
+      } else {
+        this.focusedItemIndex = this.options[destIndex(this.focusedItemIndex)]
+          ? destIndex(this.focusedItemIndex)
+          : fallback;
+      }
+
+      const itemHeight = this.$refs.list.querySelector('li')?.clientHeight || 32;
+      const focusedItemPos = itemHeight * this.focusedItemIndex;
+      const { clientHeight, scrollTop } = this.$refs.list;
+      const listVisibility = clientHeight + scrollTop;
+      const scrollTo = (top) => {
+        this.$refs.list.scrollTo({
+          top,
+          behavior: 'smooth'
+        });
+      };
+      if (focusedItemPos + itemHeight > listVisibility) {
+        scrollTo((focusedItemPos + itemHeight) - clientHeight);
+      } else if (focusedItemPos < (listVisibility - clientHeight)) {
+        scrollTo(focusedItemPos);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.apos-combo__check-icon {
+  position: absolute;
+  left: 5px;
+}
+
+.apos-input-wrapper:focus {
+  .apos-combo__list {
+    display: block;
+  }
+}
+
+.apos-combo__select {
+  display: flex;
+  flex-wrap: wrap;
+  background-color: var(--a-base-9);
+  padding: 10px 30px 10px 8px;
+  min-height: 26px;
+  border: 1px solid var(--a-base-8);
+  border-radius: var(--a-border-radius);
+  cursor: pointer;
+  list-style: none;
+
+  &:hover {
+    border-color: var(--a-base-2);
+  }
+
+  &:focus {
+    box-shadow: 0 0 3px var(--a-base-2);
+    border-color: var(--a-base-2);
+    background-color: var(--a-base-10);
+    outline: none;
+  }
+}
+
+.apos-input-wrapper--disabled {
+  .apos-combo__select {
+    color: var(--a-base-4);
+    background: var(--a-base-7);
+    border-color: var(--a-base-4);
+    cursor: not-allowed;
+
+    &:hover {
+      border-color: var(--a-base-4);
+    }
+  }
+
+  .apos-combo__selected {
+    background-color: var(--a-base-8);
+    border-color: var(--a-base-3);
+    opacity: 0.7;
+  }
+
+  .apos-input-icon {
+    opacity: 0.7;
+  }
+}
+
+.apos-combo__selected {
+  @include type-base;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background-color: var(--a-white);
+  margin: 2px;
+  padding: 5px 8px;
+  border: 1px solid var(--a-base-8);
+  border-radius: var(--a-border-radius);
+
+  &:hover {
+    background-color: var(--a-base-8);
+    border-color: var(--a-base-3);
+    cursor: not-allowed;
+  }
+
+  ::v-deep .apos-indicator {
+    width: 10px;
+    height: 10px;
+  }
+}
+
+.apos-combo__list {
+  z-index: $z-index-manager-display;
+  position: absolute;
+  top: 44px;
+  left: 0;
+  display: none;
+  width: 100%;
+  list-style: none;
+  background-color: var(--a-white);
+  padding-left: 0;
+  margin: 0;
+  max-height: 300px;
+  overflow-y: auto;
+  box-shadow: 0 0 3px var(--a-base-2);
+  border-radius: var(--a-border-radius);
+  outline: none;
+
+  &--showed {
+    display: block;
+  }
+}
+
+.apos-combo__list-item {
+  @include type-base;
+
+  padding: 10px 10px 10px 20px;
+  cursor: pointer;
+
+  &.focused {
+    background-color: var(--a-base-9);
+  }
+}
+
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apostrophe",
-  "version": "3.43.0",
+  "version": "3.44.0",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {

package/test/pieces-public-api.js

@@ -72,6 +72,38 @@ describe('Pieces Public API', function() {
     }
   });
 
+  it('should not be able to retrieve a piece by id from the database without a public API projection as a guest', async function() {
+    await t.createUser(apos, 'guest');
+    const jar = await t.loginAs(apos, 'guest');
+    try {
+      await apos.http.get('/api/v1/thing', {
+        jar
+      });
+      // Bad, we expected a 404
+      assert(false);
+    } catch (e) {
+      assert(e.status === 404);
+    }
+  });
+
+  it('should be able to retrieve a piece by id from the database without a public API projection as a guest if guest API access is enabled', async function() {
+    let response;
+    try {
+      apos.modules.thing.options.guestApiAccess = true;
+      const jar = await t.loginAs(apos, 'guest');
+      response = await apos.http.get('/api/v1/thing', {
+        jar
+      });
+    } finally {
+      apos.modules.thing.options.guestApiAccess = false;
+    }
+    assert(response);
+    assert(response.results);
+    assert(response.results.length === 1);
+    assert(response.results[0].title === 'hello');
+    assert(response.results[0].foo === 'bar');
+  });
+
   it('should be able to anonymously retrieve a piece by id from the database with a public API projection', async function() {
     // Patch the option setting to simplify the test code
     apos.thing.options.publicApiProjection = {

package/test/pieces.js

@@ -14,6 +14,10 @@ describe('Pieces', function() {
 
   this.timeout(t.timeout);
 
+  let editor;
+  let contributor;
+  let guest;
+
   before(async function() {
     apos = await t.create({
       root: module,
@@ -1996,36 +2000,6 @@ describe('Pieces', function() {
   });
 
   describe('field viewPermission|editPermission', function() {
-    const createUser = (role = 'admin') => ({
-      title = `test-${role}`,
-      username = `test-${role}`,
-      password = role
-    } = {}) => {
-      return apos.user.insert(
-        apos.task.getReq(),
-        {
-          ...apos.user.newInstance(),
-          title,
-          username,
-          password,
-          email: `${username}@admin.io`,
-          role
-        }
-      );
-    };
-    const loginAs = async (role) => {
-      const jar = apos.http.jar();
-      await apos.http.post('/api/v1/@apostrophecms/login/login', {
-        body: {
-          username: `test-${role}`,
-          password: role,
-          session: true
-        },
-        jar
-      });
-
-      return jar;
-    };
 
     this.afterEach(async function() {
       await apos.doc.db.deleteMany({ email: /@admin.io$/ });
@@ -2058,8 +2032,8 @@ describe('Pieces', function() {
       });
 
       it('should be able to retrieve fields with viewPermission when having appropriate credentials on rest API', async function() {
-        await createUser('admin')();
-        const jar = await loginAs('admin');
+        // admin user was inserted earlier
+        const jar = await t.loginAs(apos, 'admin');
 
         const req = apos.task.getReq();
         const candidate = {
@@ -2089,10 +2063,8 @@ describe('Pieces', function() {
       });
 
       it('should be able to edit fields with editPermission when having appropriate credentials on rest API', async function() {
-        await createUser('admin')();
-        const jar = await loginAs('admin');
-
-        const editor = await createUser('editor')();
+        const jar = await t.loginAs(apos, 'admin');
+        editor = await t.createUser(apos, 'editor');
 
         const req = apos.task.getReq();
         const candidate = {
@@ -2207,8 +2179,7 @@ describe('Pieces', function() {
       });
 
       it('should be able to retrieve fields with viewPermission when having appropriate credentials', async function() {
-        await createUser('editor')();
-        const jar = await loginAs('editor');
+        const jar = await t.loginAs(apos, 'editor');
 
         const req = apos.task.getReq();
         const candidate = {
@@ -2238,8 +2209,7 @@ describe('Pieces', function() {
       });
 
       it('should be able to edit fields with editPermission when having appropriate credentials on rest API', async function() {
-        await createUser('editor')();
-        const jar = await loginAs('editor');
+        const jar = await t.loginAs(apos, 'editor');
 
         const req = apos.task.getReq();
         const candidate = {
@@ -2339,8 +2309,8 @@ describe('Pieces', function() {
       });
 
       it('should be able to retrieve fields with viewPermission when having appropriate credentials', async function() {
-        await createUser('contributor')();
-        const jar = await loginAs('contributor');
+        contributor = await t.createUser(apos, 'contributor');
+        const jar = await t.loginAs(apos, 'contributor');
 
         const req = apos.task.getReq();
         const candidate = {
@@ -2370,8 +2340,7 @@ describe('Pieces', function() {
       });
 
       it('should be able to edit fields with editPermission when having appropriate credentials on rest API', async function() {
-        await createUser('contributor')();
-        const jar = await loginAs('contributor');
+        const jar = await t.loginAs(apos, 'contributor');
 
         const req = apos.task.getReq();
         const candidate = {
@@ -2453,13 +2422,12 @@ describe('Pieces', function() {
       });
 
       it('should be able to edit with permission checks during prepareForStorage & updateCacheField handlers', async function() {
-        const contributor = await createUser('contributor')();
-        const jar = await loginAs('contributor');
+        const jar = await t.loginAs(apos, 'contributor');
 
-        const editor = await createUser('editor')();
-        const guest = await createUser('guest')();
+        guest = await t.createUser(apos, 'guest');
 
         const req = apos.task.getReq({ mode: 'draft' });
+
         const candidate = {
           ...apos.modules.board.newInstance(),
           title: 'Icarus',

package/test-lib/util.js

@@ -58,40 +58,77 @@ async function create(options) {
   return require('../index.js')(config);
 }
 
-// Create an admin user. By default the username and password are both 'admin'
-async function createAdmin(apos, { username, password } = {}) {
-  const user = apos.user.newInstance();
-  const name = username || 'admin';
+// Create an admin user. Invokes createUser with the `admin` role.
+// Accepts the same options.
 
-  user.title = name;
-  user.username = name;
-  user.password = password || 'admin';
-  user.email = `${name}@admin.io`;
-  user.role = 'admin';
+async function createAdmin(apos, {
+  username, password, title, email
+} = {}) {
+  return createUser(apos, 'admin', {
+    username,
+    password,
+    title,
+    email
+  });
+}
+
+// Resolves to a user with the specified `role`. `username` defaults to
+// `role`. `title` defaults to `username` or `role`.
+// `password` defaults to `username` or `role`. `email` defaults to `${username}@test.io`
+// where `username` can also be inferred from `role`.
+
+async function createUser(apos, role, {
+  username, password, title, email
+} = {}) {
+  title = title || username || role;
+  username = username || role;
+  password = password || username || role;
+  email = email || `${username}@test.io`;
 
-  return await apos.user.insert(apos.task.getReq(), user);
+  return apos.user.insert(
+    apos.task.getReq(),
+    {
+      ...apos.user.newInstance(),
+      title,
+      username,
+      password,
+      email,
+      role
+    }
+  );
 }
 
-async function getUserJar(apos, { username, password } = {}) {
-  const jar = apos.http.jar();
+// Log in with the specified password. Returns a
+// cookie jar object for use with additional
+// apos.http calls via the `jar` option.
+// `password` defaults to `username`.
 
-  // Log in
+async function loginAs(apos, username, password) {
+  password = password || username;
+  const jar = apos.http.jar();
   await apos.http.post('/api/v1/@apostrophecms/login/login', {
     body: {
-      username: username || 'admin',
-      password: password || 'admin',
+      username,
+      password,
       session: true
     },
     jar
   });
 
   return jar;
+};
+
+// Deprecated legacy wrapper for loginAs.
+function getUserJar(apos, { username = 'admin', password } = {}) {
+  return loginAs(apos, username, password);
 }
 
 module.exports = {
   destroy,
   create,
   createAdmin,
+  createUser,
+  loginAs,
   getUserJar,
   timeout: (process.env.TEST_TIMEOUT && parseInt(process.env.TEST_TIMEOUT)) || 20000
 };