apostrophe 3.63.1 → 4.0.0

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

@@ -13,7 +13,7 @@
     <template #additional>
       <AposMinMaxCount
         :field="field"
-        :value="next"
+        :model-value="next"
       />
     </template>
     <template #body>
@@ -23,8 +23,8 @@
           class="apos-input-array-inline-empty"
         >
           <component
-            v-if="field.whenEmpty.icon"
             :is="field.whenEmpty.icon"
+            v-if="field.whenEmpty.icon"
             :size="50"
           />
           <label
@@ -35,8 +35,8 @@
           </label>
         </div>
         <component
-          v-if="items.length"
           :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
@@ -53,78 +53,81 @@
             <th />
           </thead>
           <draggable
+            :id="listId"
+            item-key="_id"
             class="apos-input-array-inline"
-            :tag="field.style === 'table' ? 'tbody' : 'div'"
             role="list"
+            :options="dragOptions"
+            :tag="field.style === 'table' ? 'tbody' : 'div'"
             :list="items"
-            v-bind="dragOptions"
-            :id="listId"
+            @update="moveUpdate"
           >
-            <AposSchema
-              v-model="item.schemaInput"
-              :meta="arrayMeta[item._id]?.aposMeta"
-              v-for="(item, index) in items"
-              class="apos-input-array-inline-item"
-              :class="item.open && !alwaysExpand ? 'apos-input-array-inline-item--active' : null"
-              :key="item._id"
-              :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"
-              @input="setItemsConditionalFields(item._id)"
-              @validate="emitValidate()"
-            >
-              <template #before>
-                <component
-                  :is="field.style === 'table' ? 'td' : 'div'"
-                  class="apos-input-array-inline-item-controls"
-                  :style="(field.style === 'table' && field.columnStyle) || {}"
-                >
-                  <AposIndicator
-                    v-if="field.draggable"
-                    icon="drag-icon"
-                    class="apos-drag-handle"
-                  />
-                  <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
-                  class="apos-input-array-inline-label"
-                  v-if="field.style !== 'table' && !item.open && !alwaysExpand"
-                  @click="openInlineItem(item._id)"
-                >
-                  {{ getLabel(item._id, index) }}
-                </h3>
-              </template>
-              <template #after>
-                <component
-                  :is="field.style === 'table' ? 'td' : 'div'"
-                  class="apos-input-array-inline-item-controls--remove"
-                >
-                  <AposButton
-                    label="apostrophe:removeItem"
-                    icon="close-icon"
-                    type="subtle"
-                    :modifiers="['inline','no-motion']"
-                    :icon-only="true"
-                    @click="remove(item._id)"
-                  />
-                </component>
-              </template>
-            </AposSchema>
+            <template #item="{element: item, index}">
+              <AposSchema
+                :key="item._id"
+                v-model="item.schemaInput"
+                class="apos-input-array-inline-item"
+                :meta="arrayMeta[item._id]?.aposMeta"
+                :class="item.open && !alwaysExpand ? '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()"
+              >
+                <template #before>
+                  <component
+                    :is="field.style === 'table' ? 'td' : 'div'"
+                    class="apos-input-array-inline-item-controls"
+                    :style="(field.style === 'table' && field.columnStyle) || {}"
+                  >
+                    <AposIndicator
+                      v-if="field.draggable"
+                      icon="drag-icon"
+                      class="apos-drag-handle"
+                    />
+                    <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>
+                </template>
+                <template #after>
+                  <component
+                    :is="field.style === 'table' ? 'td' : 'div'"
+                    class="apos-input-array-inline-item-controls--remove"
+                  >
+                    <AposButton
+                      label="apostrophe:removeItem"
+                      icon="close-icon"
+                      type="subtle"
+                      :modifiers="['inline','no-motion']"
+                      :icon-only="true"
+                      @click="remove(item._id)"
+                    />
+                  </component>
+                </template>
+              </AposSchema>
+            </template>
           </draggable>
         </component>
         <AposButton
@@ -140,9 +143,9 @@
         <label class="apos-input-wrapper">
           <AposButton
             :label="editLabel"
-            @click="edit"
             :disabled="field.readOnly"
             :tooltip="tooltip"
+            @click="edit"
           />
         </label>
       </div>
@@ -152,215 +155,16 @@
 
 <script>
 import AposInputArrayLogic from '../logic/AposInputArray';
+import { Sortable } from 'sortablejs-vue3';
+
 export default {
   name: 'AposInputArray',
+  components: {
+    draggable: Sortable
+  },
   mixins: [ AposInputArrayLogic ]
 };
 </script>
-<style lang="scss" scoped>
-  ::v-deep .apos-field--array.apos-field--error-duplicate {
-    .apos-input {
-      border-color: var(--a-base-8);
-    }
-    .apos-input:focus {
-      box-shadow: 0 0 3px var(--a-base-8);
-    }
-    .apos-input-icon {
-      color: var(--a-base-2);
-    }
-    .apos-input--error {
-      border-color: var(--a-danger);
-    }
-  }
-  ::v-deep .apos-input-relationship {
-    .apos-slat__main {
-      min-width: 130px;
-    }
-  }
-  .apos-is-dragging {
-    opacity: 0.5;
-    background: var(--a-base-4);
-  }
-  .apos-input-array-inline-empty {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: $spacing-base;
-    padding: $spacing-triple 0;
-    border: 1px solid var(--a-base-9);
-    color: var(--a-base-8);
-  }
-  .apos-input-array-inline-empty-label {
-    @include type-label;
-    color: var(--a-base-3);
-  }
-
-  .apos-input-array-inline-table {
-    @include type-label;
-    position: relative;
-    left: -35px;
-    min-width: calc(100% + 35px);
-    width: max-content;
-    margin: 0 0 $spacing-base;
-    border-collapse: collapse;
-
-    th {
-      padding-left: $spacing-base;
-      padding-right: $spacing-base;
-      height: 40px;
-      border: 1px solid var(--a-base-9);
-      text-align: left;
-      background-color: var(--a-base-10);
-    }
-    .apos-table-cell--hidden {
-      padding-left: 5px;
-      border: none;
-      cursor: pointer;
-      background-color: transparent;
-    }
-
-    td, ::v-deep td {
-      padding: $spacing-base;
-      border: 1px solid var(--a-base-9);
-      vertical-align: middle;
-      text-align: center;
-      transition: background-color 0.3s ease;
-      background-color: var(--a-background-primary);
-    }
-    td.apos-input-array-inline-item-controls {
-      width: 15px;
-      min-width: 15px;
-      border: none;
-      background-color: transparent;
-    }
-    tr.apos-is-dragging, ::v-deep tr.apos-is-dragging {
-      td, &:hover td {
-        background: var(--a-base-4);
-      }
-    }
-    tr:hover, ::v-deep tr:hover {
-      td {
-        background-color: var(--a-base-10);
-      }
-      td.apos-input-array-inline-item-controls {
-        background-color: transparent;
-      }
-    }
-
-    ::v-deep {
-      .apos-field__info {
-        padding-top: 0;
-      }
-      .apos-field__label {
-        display: none;
-      }
-      .apos-input-wrapper {
-        padding: 0 4px;
-      }
-      .apos-input--select {
-        min-width: 130px;
-      }
-      .apos-input--relationship {
-        width: 100%;
-        min-width: 150px;
-      }
-      .apos-schema .apos-field.apos-field--small,
-      .apos-schema .apos-field.apos-field--micro,
-      .apos-schema .apos-field.apos-field--margin-micro {
-        margin-bottom: 0;
-      }
-      .apos-search {
-        z-index: calc(#{$z-index-widget-focused-controls} + 1);
-        position: absolute;
-        top: 35px;
-        width: 100%;
-        min-width: 350px;
-      }
-      .apos-slat-list .apos-slat,
-      .apos-input-relationship__items {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-      .apos-input-relationship__input-wrapper :disabled {
-        display: none;
-      }
-      .apos-field__error {
-        position: absolute;
-        bottom: 13px;
-        left: $spacing-base;
-      }
-      .apos-field--relationship .apos-field__error {
-        z-index: calc(#{$z-index-widget-focused-controls} + 1);
-      }
-    }
-  }
-
-  .apos-input-array-inline-standard {
-    .apos-input-array-inline-collapse {
-      position: absolute;
-      top: $spacing-quadruple;
-      left: $spacing-base;
-    }
-
-    ::v-deep .apos-schema {
-      position: relative;
-      display: grid;
-      grid-template-columns: 35px auto 35px;
-      gap: 5px;
-      width: 100%;
-      padding-bottom: $spacing-base;
-      border-bottom: 1px solid var(--a-base-9);
-      transition: background-color 0.3s ease;
-      &:hover {
-        background-color: var(--a-base-10);
-      }
-      .apos-field.apos-field--small,
-      .apos-field.apos-field--micro,
-      .apos-field.apos-field--margin-micro {
-        margin-bottom: 0;
-      }
-
-      & > div {
-        grid-column: 2;
-        padding-top: $spacing-base;
-        padding-bottom: $spacing-base;
-      }
-      &.apos-input-array-inline-item--active {
-        background-color: var(--a-base-10);
-        border-bottom: 1px solid var(--a-base-6);
-      }
-      &.apos-input-array-inline-item--active > div {
-        display: block;
-      }
-      .apos-input-array-inline-label,
-      .apos-input-array-inline-item-controls,
-      .apos-input-array-inline-item-controls--remove {
-        display: block;
-      }
-
-      .apos-input-array-inline-label {
-        transition: background-color 0.3s ease;
-        @include type-label;
-        margin: 0;
-        padding-top: $spacing-base;
-        padding-bottom: $spacing-base;
-        text-align: left;
-        grid-column: 2;
-      }
-      .apos-input-array-inline-label:hover {
-        cursor: pointer;
-      }
 
-      .apos-input-array-inline-item-controls {
-        padding: $spacing-base;
-        grid-column: 1;
-        grid-row: 1;
-      }
-      .apos-input-array-inline-item-controls--remove {
-        grid-column: 3;
-        grid-row: 1;
-      }
-    }
-  }
+<style lang="scss" src="../scss/AposInputArray.scss" scoped>
 </style>

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

@@ -1,7 +1,9 @@
 <template>
   <AposInputWrapper
-    :field="field" :error="effectiveError"
-    :uid="uid" :modifiers="modifiers"
+    :field="field"
+    :error="effectiveError"
+    :uid="uid"
+    :modifiers="modifiers"
     :display-options="displayOptions"
   >
     <template #body>

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

@@ -1,38 +1,48 @@
 <template>
   <AposInputWrapper
-    :modifiers="modifiers" :field="field"
-    :error="effectiveError" :uid="uid"
+    :modifiers="modifiers"
+    :field="field"
+    :error="effectiveError"
+    :uid="uid"
     :display-options="displayOptions"
   >
     <template #body>
       <div :class="classList">
         <input
+          :id="`${uid}-true`"
+          ref="true"
           class="apos-sr-only apos-boolean__input apos-boolean__input--true"
-          type="radio" :id="`${uid}-true`"
-          :value="true" @change="setValue(true)"
-          :checked="value.data === true"
+          type="radio"
+          :value="true"
+          :checked="modelValue.data === true"
           :disabled="field.readOnly"
-          ref="true"
+          @change="setValue(true)"
         >
         <label :for="`${uid}-true`" class="apos-boolean__label apos-input">
           <circle-icon
-            :size="12" class="apos-boolean__icon"
-            title="" v-show="!field.toggle"
+            v-show="!field.toggle"
+            :size="12"
+            class="apos-boolean__icon"
+            title=""
           />
           {{ trueLabel || 'Yes' }}
         </label>
         <input
+          :id="`${uid}-false`"
+          ref="false"
           class="apos-sr-only apos-boolean__input apos-boolean__input--false"
-          type="radio" :id="`${uid}-false`"
-          :value="false" @change="setValue(false)"
-          :checked="value.data === false"
+          type="radio"
+          :value="false"
+          :checked="modelValue.data === false"
           :disabled="field.readOnly"
-          ref="false"
+          @change="setValue(false)"
         >
         <label :for="`${uid}-false`" class="apos-boolean__label apos-input">
           <circle-icon
-            :size="12" class="apos-boolean__icon"
-            title="" v-show="!field.toggle"
+            v-show="!field.toggle"
+            :size="12"
+            class="apos-boolean__icon"
+            title=""
           />
           {{ falseLabel || 'No' }}
         </label>

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

@@ -1,6 +1,7 @@
 <template>
   <AposInputWrapper
-    :field="field" :error="effectiveError"
+    :field="field"
+    :error="effectiveError"
     :uid="uid"
     :modifiers="modifiers"
     :display-options="displayOptions"
@@ -10,19 +11,19 @@
         v-if="field.style === 'combo' && choices.length"
         :choices="choices"
         :field="field"
-        :value="value"
+        :model-value="modelValue"
         @select-items="selectItems"
       />
 
       <AposCheckbox
-        v-else
-        :for="getChoiceId(uid, choice.value)"
         v-for="choice in choices"
-        :key="choice.value"
+        v-else
         :id="getChoiceId(uid, choice.value)"
+        :key="choice.value"
+        v-model="modelValue.data"
+        :for="getChoiceId(uid, choice.value)"
         :choice="choice"
         :field="field"
-        v-model="value.data"
       />
     </template>
   </AposInputWrapper>

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

@@ -1,7 +1,9 @@
 <template>
   <AposInputWrapper
-    :modifiers="modifiers" :field="field"
-    :error="effectiveError" :uid="uid"
+    :modifiers="modifiers"
+    :field="field"
+    :error="effectiveError"
+    :uid="uid"
     :display-options="displayOptions"
   >
     <template #body>
@@ -9,17 +11,17 @@
         <div class="apos-color__ui">
           <AposContextMenu
             :button="buttonOptions"
-            @open="open"
-            @close="close"
             menu-placement="bottom-start"
             menu-offset="5, 20"
             :disabled="field.readOnly"
             :tooltip="tooltip"
+            @open="open"
+            @close="close"
           >
             <Picker
               v-bind="pickerOptions"
-              :value="next"
-              @input="update"
+              :model-value="next"
+              @update:model-value="update"
             />
           </AposContextMenu>
         </div>
@@ -27,7 +29,8 @@
           {{ valueLabel }}
           <AposButton
             v-if="next"
-            type="quiet" label="apostrophe:clear"
+            type="quiet"
+            label="apostrophe:clear"
             class="apos-color__clear"
             :modifiers="['no-motion']"
             @click="clear"

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

@@ -12,16 +12,16 @@
       <div class="apos-input-object">
         <div class="apos-input-wrapper">
           <AposSchema
+            ref="schema"
             v-model="schemaInput"
             :meta="currentDocMeta"
-            ref="schema"
             :schema="schema"
             :trigger-validation="triggerValidation"
             :generation="generation"
             :doc-id="docId"
             :conditional-fields="conditionalFields"
             :following-values="followingValuesWithParent"
-            @input="evaluateConditions(values)"
+            @update:model-value="evaluateConditions(values)"
             @validate="emitValidate()"
           />
         </div>
@@ -45,7 +45,7 @@ export default {
   .apos-input-wrapper {
     margin: 20px 0 0 19px;
   }
-  .apos-input-object ::v-deep .apos-schema .apos-field {
+  .apos-input-object :deep(.apos-schema .apos-field) {
     margin-bottom: 30px;
   }
 </style>

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

@@ -1,22 +1,23 @@
 <template>
   <AposInputWrapper
-    :field="field" :error="effectiveError"
+    :field="field"
+    :error="effectiveError"
     :uid="uid"
     :display-options="displayOptions"
     :modifiers="modifiers"
   >
     <template #body>
       <label
-        class="apos-choice-label"
         v-for="{label, value, tooltip} in choices"
         :key="value"
+        class="apos-choice-label"
         :for="getChoiceId(uid, value)"
         :class="{'apos-choice-label--disabled': field.readOnly}"
       >
         <input
+          :id="getChoiceId(uid, value)"
           type="radio"
           class="apos-sr-only apos-input--choice apos-input--radio"
-          :id="getChoiceId(uid, value)"
           :value="JSON.stringify(value)"
           :name="field.name"
           :checked="next === value"
@@ -26,8 +27,8 @@
         >
         <span class="apos-input-indicator" aria-hidden="true">
           <component
-            v-if="next === value"
             :is="`${next === value ? 'check-bold-icon' : 'span'}`"
+            v-if="next === value"
             :size="8"
           />
         </span>