apostrophe 4.7.2 → 4.8.1

package/modules/@apostrophecms/schema/lib/addFieldTypes.js

@@ -339,16 +339,7 @@ module.exports = (self) => {
           }
         },
         choices: async function () {
-          const values = await query.toDistinct(field.name);
-          const choices = _.map(values, function (value) {
-            const choice = _.find(field.choices, { value: value });
-            return {
-              value: value,
-              label: choice && (choice.label || value)
-            };
-          });
-          self.apos.util.insensitiveSortByProperty(choices, 'label');
-          return choices;
+          return self.getChoicesForQueryBuilder(field, query);
         }
       });
     },
@@ -408,23 +399,7 @@ module.exports = (self) => {
           }
         },
         choices: async function () {
-          let allChoices;
-          const values = await query.toDistinct(field.name);
-          if ((typeof field.choices) === 'string') {
-            const req = self.apos.task.getReq();
-            allChoices = await self.apos.modules[field.moduleName][field.choices](req);
-          } else {
-            allChoices = field.choices;
-          }
-          const choices = _.map(values, function (value) {
-            const choice = _.find(allChoices, { value: value });
-            return {
-              value: value,
-              label: choice && (choice.label || value)
-            };
-          });
-          self.apos.util.insensitiveSortByProperty(choices, 'label');
-          return choices;
+          return self.getChoicesForQueryBuilder(field, query);
         }
       });
     }

package/modules/@apostrophecms/schema/lib/newInstance.js

@@ -0,0 +1,36 @@
+const { klona } = require('klona');
+const { createId } = require('@paralleldrive/cuid2');
+
+module.exports = newInstance;
+
+function newInstance(schema) {
+  const instance = {};
+  for (const field of schema) {
+    if (field.def !== undefined) {
+      instance[field.name] = klona(field.def);
+    } else {
+      // All fields should have an initial value in the database
+      instance[field.name] = null;
+    }
+    // A workaround specifically for areas. They must have a
+    // unique `_id` which makes `klona` a poor way to establish
+    // a default, and we don't pass functions in schema
+    // definitions, but top-level areas should always exist
+    // for reasonable results if the output of `newInstance`
+    // is saved without further editing on the front end
+    if ((field.type === 'area') && (!instance[field.name])) {
+      instance[field.name] = {
+        metaType: 'area',
+        items: [],
+        _id: createId()
+      };
+    }
+    // A workaround specifically for objects. These too need
+    // to have reasonable values in parked pages and any other
+    // situation where the data never passes through the UI
+    if ((field.type === 'object') && ((!instance[field.name]) || (Object.keys(instance[field.name]).length === 0))) {
+      instance[field.name] = newInstance(field.schema);
+    }
+  }
+  return instance;
+}

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

@@ -1,74 +1,90 @@
 <template>
   <AposInputWrapper
+    ref="root"
     :field="field"
     :error="effectiveError"
     :uid="uid"
     :items="next"
     :display-options="displayOptions"
-    :modifiers="[
-      ...field.style === 'table' ? ['full-width'] : []
-    ]"
+    :modifiers="[...(isInlineTable ? ['full-width'] : [])]"
     :meta="arrayMeta"
   >
     <template #additional>
-      <AposMinMaxCount
-        :field="field"
-        :model-value="next"
-      />
+      <AposMinMaxCount :field="field" :model-value="next" />
+    </template>
+    <template v-if="isInlineStandard" #meta>
+      <div class="apos-input-array-inline-all-controls">
+        <AposButton
+          class="apos-input-array-inline-all-control apos-input-array-inline-all-control--expand"
+          label="apostrophe:expandAll"
+          type="subtle"
+          :modifiers="['inline', 'no-motion']"
+          @click="toggleAll(true)"
+        />
+        <AposButton
+          class="apos-input-array-inline-all-control apos-input-array-inline-all-control--collapse"
+          label="apostrophe:collapseAll"
+          type="subtle"
+          :modifiers="['inline', 'no-motion']"
+          @click="toggleAll(false)"
+        />
+      </div>
     </template>
     <template #body>
-      <div v-if="field.inline">
-        <div
-          v-if="!items.length && field.whenEmpty"
-          class="apos-input-array-inline-empty"
-        >
-          <component
-            :is="field.whenEmpty.icon"
-            v-if="field.whenEmpty.icon"
-            :size="50"
-          />
-          <label
-            v-if="field.whenEmpty.label"
-            class="apos-input-array-inline-empty-label"
-          >
-            {{ $t(field.whenEmpty.label) }}
-          </label>
-        </div>
+      <div
+        v-if="(isInlineStandard || isInlineTable) && !items.length"
+        class="apos-input-array-inline-empty"
+      >
         <component
-          :is="field.style === 'table' ? 'table' : 'div'"
-          v-if="items.length"
-          :class="field.style === 'table' ? 'apos-input-array-inline-table' : 'apos-input-array-inline-standard'"
-        >
-          <thead
-            v-if="field.style === 'table'"
-          >
-            <th class="apos-table-cell--hidden" />
+          :is="emptyWhenIcon"
+          :size="50"
+        />
+        <label class="apos-input-array-inline-empty-label">
+          {{ $t(emptyWhenLabel) }}
+        </label>
+      </div>
+
+      <!-- INLINE TABLE -->
+      <div v-if="isInlineTable">
+        <table v-if="items.length" class="apos-input-array-inline-table">
+          <thead class="apos-input-array-inline-table-header">
+            <th v-if="isDraggable" class="apos-input-array-inline-table-header-cell" />
             <th
               v-for="subfield in visibleSchema()"
               :key="subfield._id"
+              class="apos-input-array-inline-table-header-cell"
+              :class="getTableHeaderClass(subfield, 'apos-input-array-inline-table-header-cell')"
               :style="subfield.columnStyle || {}"
             >
               {{ $t(subfield.label) }}
             </th>
-            <th />
+            <th class="apos-input-array-inline-table-header-cell" />
           </thead>
           <draggable
             :id="listId"
             item-key="_id"
-            class="apos-input-array-inline"
             role="list"
+            :class="{ 'apos-input-array-inline-array--is-dragging': isDragging }"
             :options="dragOptions"
-            :tag="field.style === 'table' ? 'tbody' : 'div'"
+            tag="tbody"
             :list="items"
             @update="moveUpdate"
+            @start="startDragging"
+            @end="stopDragging"
           >
-            <template #item="{element: item, index}">
+            <template #item="{ element: item, index }">
               <AposSchema
                 :key="item._id"
                 v-model="item.schemaInput"
-                class="apos-input-array-inline-item"
+                :data-id="item._id"
+                :tabindex="isDraggable ? '0' : '-1'"
+                class="apos-input-array-inline-table-row"
+                data-apos-input-array-inline-item
                 :meta="arrayMeta[item._id]?.aposMeta"
-                :class="item.open && !alwaysExpand ? 'apos-input-array-inline-item--active' : null"
+                :class="{
+                  'apos-input-array-inline-table-row--active': item.open,
+                  'apos-input-array-inline-table-row--engaged': item.engaged
+                }"
                 :schema="schema"
                 :trigger-validation="triggerValidation"
                 :generation="generation"
@@ -76,69 +92,194 @@
                 :doc-id="docId"
                 :following-values="getFollowingValues(item)"
                 :conditional-fields="itemsConditionalFields[item._id]"
-                :field-style="field.style"
+                field-style="table"
                 @update:model-value="setItemsConditionalFields(item._id)"
                 @validate="emitValidate()"
+                @keydown.space="isDraggable ? toggleEngage($event, { exact: true, prevent: true }) : {}"
+                @keydown.enter="isDraggable ? toggleEngage($event, { exact: true, prevent: true }) : {}"
+                @keydown.arrow-up="isDraggable ? moveEngaged($event, item._id, -1, { prevent: true }) : {}"
+                @keydown.arrow-down="isDraggable ? moveEngaged($event, item._id, 1, { prevent: true }) : {}"
               >
                 <template #before>
-                  <component
-                    :is="field.style === 'table' ? 'td' : 'div'"
-                    class="apos-input-array-inline-item-controls"
-                    :style="(field.style === 'table' && field.columnStyle) || {}"
+                  <td
+                    v-if="isDraggable"
+                    class="apos-input-array-inline-table-cell apos-input-array-inline-table-cell--controls"
+                    :style="field.columnStyle"
                   >
                     <AposIndicator
-                      v-if="field.draggable"
                       icon="drag-icon"
-                      class="apos-drag-handle"
+                      class="apos-input-array-inline-table-cell-drag-handle apos-drag-handle"
+                      :decorative="false"
+                      @keydown.prevent.space="toggleEngage($event, item._id)"
+                      @keydown.prevent.enter="toggleEngage($event, item._id)"
                     />
-                    <AposButton
-                      v-if="field.style !== 'table' && item.open && !alwaysExpand"
-                      class="apos-input-array-inline-collapse"
-                      :icon-size="15"
-                      label="apostrophe:close"
-                      icon="unfold-less-horizontal-icon"
-                      type="subtle"
-                      :modifiers="['inline', 'no-motion']"
-                      :icon-only="true"
-                      @click="closeInlineItem(item._id)"
-                    />
-                  </component>
-                  <h3
-                    v-if="field.style !== 'table' && !item.open && !alwaysExpand"
-                    class="apos-input-array-inline-label"
-                    @click="openInlineItem(item._id)"
-                  >
-                    {{ getLabel(item._id, index) }}
-                  </h3>
+                  </td>
                 </template>
                 <template #after>
-                  <component
-                    :is="field.style === 'table' ? 'td' : 'div'"
-                    class="apos-input-array-inline-item-controls--remove"
-                  >
+                  <td class="apos-input-array-inline-table-cell apos-input-array-inline-table-cell--controls apos-input-array-inline-table-cell--controls--menu">
+                    <AposContextMenu
+                      v-if="getInlineMenuItems(index).length > 1"
+                      ref="menu"
+                      data-apos-input-array-inline-item-menu
+                      class=""
+                      :button="{
+                        label: 'apostrophe:moreOperations',
+                        iconOnly: true,
+                        icon: 'dots-vertical-icon',
+                        type: 'subtle',
+                        modifiers: ['small', 'no-motion'],
+                      }"
+                      :menu="getInlineMenuItems(index)"
+                      menu-placement="bottom-end"
+                      @keydown.space="$event.stopImmediatePropagation()"
+                      @keydown.enter="$event.stopImmediatePropagation()"
+                      @item-clicked="
+                        inlineMenuHandler($event, { index, id: item._id })
+                      "
+                    />
                     <AposButton
+                      v-else
+                      data-apos-input-array-inline-item-remove
                       label="apostrophe:removeItem"
                       icon="close-icon"
                       type="subtle"
-                      :modifiers="['inline','no-motion']"
+                      :modifiers="['inline', 'no-motion']"
                       :icon-only="true"
                       @click="remove(item._id)"
                     />
-                  </component>
+                  </td>
                 </template>
               </AposSchema>
             </template>
           </draggable>
-        </component>
-        <AposButton
-          type="primary"
-          :label="itemLabel"
-          icon="plus-icon"
-          :disabled="disableAdd()"
-          :modifiers="['block']"
-          @click="add"
-        />
+        </table>
       </div>
+
+      <!-- INLINE STANDARD-->
+      <div v-else-if="field.inline">
+        <draggable
+          :id="listId"
+          item-key="_id"
+          class="apos-input-array-inline-standard"
+          :class="{ 'apos-input-array-inline-array--is-dragging': isDragging }"
+          role="list"
+          :options="dragOptions"
+          tag="div"
+          :list="items"
+          @update="moveUpdate"
+          @start="startDragging"
+          @end="stopDragging"
+        >
+          <template #item="{ element: item, index }">
+            <div
+              :key="item._id"
+              class="apos-input-array-inline-item"
+              data-apos-input-array-inline-item
+              :data-id="item._id"
+              tabindex="0"
+              :aria-pressed="item.engaged"
+              role="listitem"
+              :class="{
+                'apos-input-array-inline-item--open': item.open,
+                'apos-input-array-inline-item--engaged': item.engaged,
+                'apos-input-array-inline-item--drag-disabled': !isDraggable,
+              }"
+              @keydown.prevent.exact.space="isDraggable ? toggleOpenInlineItem($event) : {}"
+              @keydown.prevent.shift.space="isDraggable ? toggleEngage($event, item._id) : {}"
+              @keydown.prevent.enter="isDraggable ? toggleEngage($event, item._id) : {}"
+              @keydown.prevent.arrow-up="isDraggable ? moveEngaged($event, item._id, -1) : {}"
+              @keydown.prevent.arrow-down="isDraggable ? moveEngaged($event, item._id, 1) : {}"
+            >
+              <div
+                class="apos-input-array-inline-header"
+                @dblclick="toggleOpenInlineItem($event)"
+              >
+                <div
+                  class="apos-input-array-inline-header-ui apos-input-array-inline-header-ui--left"
+                >
+                  <AposIndicator
+                    v-if="isDraggable"
+                    icon="drag-icon"
+                    class="apos-input-array-inline-header-ui-element"
+                  />
+                  <div class="apos-input-array-inline-label">
+                    {{ getLabel(item._id, index) }}
+                  </div>
+                </div>
+                <div
+                  class="apos-input-array-inline-header-ui apos-input-array-inline-header-ui--right"
+                >
+                  <AposButton
+                    class="apos-input-array-inline-header-ui-element apos-input-array-inline-collapse"
+                    :icon-size="16"
+                    label="apostrophe:close"
+                    :tooltip="item.open ? 'Collapse item' : 'Expand item'"
+                    :icon="
+                      item.open
+                        ? 'arrow-collapse-vertical-icon'
+                        : 'arrow-expand-vertical-icon'
+                    "
+                    type="subtle"
+                    :modifiers="['inline', 'no-motion']"
+                    :icon-only="true"
+                    @click="toggleOpenInlineItem($event)"
+                    @keydown.space="$event.stopImmediatePropagation()"
+                    @keydown.enter="$event.stopImmediatePropagation()"
+                  />
+                  <AposContextMenu
+                    ref="menu"
+                    class="apos-input-array-inline-header-ui-element"
+                    data-apos-input-array-inline-item-menu
+                    :button="{
+                      label: 'apostrophe:moreOperations',
+                      iconOnly: true,
+                      icon: 'dots-vertical-icon',
+                      type: 'subtle',
+                      modifiers: ['small', 'no-motion'],
+                    }"
+                    :menu="getInlineMenuItems(index)"
+                    menu-placement="bottom-end"
+                    @keydown.space="$event.stopImmediatePropagation()"
+                    @keydown.enter="$event.stopImmediatePropagation()"
+                    @item-clicked="
+                      inlineMenuHandler($event, { index, id: item._id })
+                    "
+                  />
+                </div>
+              </div>
+              <transition name="collapse">
+                <div v-show="item.open" class="apos-input-array-inline-body">
+                  <AposSchema
+                    :key="item._id"
+                    v-model="item.schemaInput"
+                    :data-apos-id="item._id"
+                    class="apos-input-array-inline-schema"
+                    :meta="arrayMeta[item._id]?.aposMeta"
+                    :class="
+                      item.open
+                        ? 'apos-input-array-inline-item--active'
+                        : null
+                    "
+                    :schema="schema"
+                    :trigger-validation="triggerValidation"
+                    :generation="generation"
+                    :modifiers="['small', 'inverted']"
+                    :doc-id="docId"
+                    :following-values="getFollowingValues(item)"
+                    :conditional-fields="itemsConditionalFields[item._id]"
+                    :field-style="field.style"
+                    @update:model-value="setItemsConditionalFields(item._id)"
+                    @validate="emitValidate()"
+                    @keydown.space="$event.stopImmediatePropagation()"
+                    @keydown.enter="$event.stopImmediatePropagation()"
+                  />
+                </div>
+              </transition>
+            </div>
+          </template>
+        </draggable>
+      </div>
+
       <div v-else class="apos-input-array">
         <label class="apos-input-wrapper">
           <AposButton
@@ -149,6 +290,18 @@
           />
         </label>
       </div>
+
+      <!-- INLINE ADD BUTTON -->
+      <AposButton
+        v-if="isInlineStandard || isInlineTable"
+        type="primary"
+        class="apos-input-array-inline-add-button"
+        :label="itemLabel"
+        icon="plus-icon"
+        :disabled="isAddDisabled"
+        :modifiers="['block']"
+        @click="add"
+      />
     </template>
   </AposInputWrapper>
 </template>
@@ -166,5 +319,10 @@ export default {
 };
 </script>
 
-<style lang="scss" src="../scss/AposInputArray.scss" scoped>
+<style lang="scss" src="../scss/AposInputArray.scss" scoped></style>
+<style lang="scss">
+.apos-is-dragging td {
+  flex: 1;
+  background-color: var(--a-background-primary);
+}
 </style>

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

@@ -3,7 +3,7 @@
     class="apos-field__wrapper"
     :class="{
       [`apos-field__wrapper--${field.type}`]: true,
-      'apos-field__wrapper--full-width': modifiers.includes('full-width')
+      'apos-field__wrapper--full-width': modifiers.includes('full-width'),
     }"
   >
     <component :is="wrapEl" :class="classList">
@@ -14,7 +14,8 @@
           class="apos-field__label"
           :class="{
             'apos-sr-only': field.hideLabel,
-            'apos-field__label--meta-left': field.meta && field.meta.position === 'left',
+            'apos-field__label--meta-left':
+              field.meta && field.meta.position === 'left',
           }"
           :for="uid"
           :data-apos-test-name="field.name"
@@ -24,17 +25,21 @@
           <span class="apos-field_label-info">
             {{ $t(label) }}
             <span v-if="field.required" class="apos-field__required">
-              *
-            </span>
+              * </span>
             <AposLabel
               v-if="field.tag"
               class="apos-field__tag"
               :label="field.tag.value || field.tag"
-              :modifiers="[ `apos-is-${field.tag.type || 'success'}`, 'apos-is-filled' ]"
+              :modifiers="[
+                `apos-is-${field.tag.type || 'success'}`,
+                'apos-is-filled',
+              ]"
               data-apos-test="field-tag"
             />
             <span
-              v-if="(field.help || field.htmlHelp) && displayOptions.helpTooltip"
+              v-if="
+                (field.help || field.htmlHelp) && displayOptions.helpTooltip
+              "
               data-apos-test="field-help-tooltip"
               class="apos-field__help-tooltip"
             >
@@ -54,26 +59,31 @@
               <AposLabel
                 label="apostrophe:changed"
                 class="apos-field__changed__label"
-                :modifiers="[ 'apos-is-warning', 'apos-is-filled' ]"
+                :modifiers="['apos-is-warning', 'apos-is-filled']"
                 tooltip="apostrophe:fieldHasUnpublishedChanges"
               />
             </span>
           </span>
-          <span data-apos-test="field-meta-wrapper" class="apos-field__label-meta">
-            <component
-              :is="name"
-              v-for="{name, namespace, data} in metaComponents"
-              :key="name"
-              :field="field"
-              :items="items"
-              :namespace="namespace"
-              :meta="data"
-              :meta-raw="meta"
-              :data-apos-test-component="name"
-              :data-apos-test-namespace="namespace"
-              data-apos-test="field-meta"
-              @replace-field-value="replaceFieldValue"
-            />
+          <span
+            data-apos-test="field-meta-wrapper"
+            class="apos-field__label-meta"
+          >
+            <slot name="meta">
+              <component
+                :is="name"
+                v-for="{ name, namespace, data } in metaComponents"
+                :key="name"
+                :field="field"
+                :items="items"
+                :namespace="namespace"
+                :meta="data"
+                :meta-raw="meta"
+                :data-apos-test-component="name"
+                :data-apos-test-namespace="namespace"
+                data-apos-test="field-meta"
+                @replace-field-value="replaceFieldValue"
+              />
+            </slot>
           </span>
         </component>
         <!-- eslint-disable vue/no-v-html -->
@@ -131,7 +141,8 @@ export default {
   border-width: 0;
   padding: 0;
 
-  [disable]:hover, [disabled] ~ .apos-choice-label-text:hover {
+  [disable]:hover,
+  [disabled] ~ .apos-choice-label-text:hover {
     cursor: not-allowed;
   }
 }
@@ -263,5 +274,4 @@ export default {
     }
   }
 }
-
 </style>

package/modules/@apostrophecms/schema/ui/apos/logic/AposArrayEditor.js

@@ -4,6 +4,7 @@ import { createId } from '@paralleldrive/cuid2';
 import { klona } from 'klona';
 import { get } from 'lodash';
 import { detectDocChange } from 'Modules/@apostrophecms/schema/lib/detectChange';
+import newInstance from 'apostrophe/modules/@apostrophecms/schema/lib/newInstance.js';
 
 export default {
   name: 'AposArrayEditor',
@@ -281,13 +282,7 @@ export default {
       }
     },
     newInstance() {
-      const instance = {};
-      for (const field of this.schema) {
-        if (field.def !== undefined) {
-          instance[field.name] = klona(field.def);
-        }
-      }
-      return instance;
+      return newInstance(this.schema);
     },
     label(item) {
       let candidate;