apostrophe 3.63.3 → 4.1.0

package/modules/@apostrophecms/notification/ui/apos/components/AposNotification.vue

@@ -2,13 +2,14 @@
   <div role="alert" :class="classList">
     <span class="apos-notification__indicator">
       <AposIndicator
-        :icon="iconComponent" class="apos-notification__indicator__icon"
+        :icon="iconComponent"
+        class="apos-notification__indicator__icon"
         :icon-size="notification.icon ? 16 : 12"
       />
     </span>
     <span
-      class="apos-notification__label"
       ref="label"
+      class="apos-notification__label"
     >
       {{ localize(notification.message) }}
       <!-- OK to use index as key because buttons are constant for the lifetime of the notification -->
@@ -24,15 +25,17 @@
       </button>
     </span>
     <div
-      class="apos-notification__progress"
       v-if="job && job.total"
+      class="apos-notification__progress"
     >
       <div class="apos-notification__progress-bar">
         <div
-          class="apos-notification__progress-now" role="progressbar"
+          class="apos-notification__progress-now"
+          role="progressbar"
           :aria-valuenow="job.processed || 0"
           :style="`width: ${job.percentage + '%'}`"
-          aria-valuemin="0" :aria-valuemax="job.total"
+          aria-valuemin="0"
+          :aria-valuemax="job.total"
         />
       </div>
       <span class="apos-notification__progress-value">
@@ -41,7 +44,8 @@
     </div>
     <button
       v-if="!job"
-      @click="close" class="apos-notification__button"
+      class="apos-notification__button"
+      @click="close"
     >
       <Close
         class="apos-notification__close-icon"
@@ -53,7 +57,7 @@
 </template>
 
 <script>
-import Close from 'vue-material-design-icons/Close.vue';
+import Close from '@apostrophecms/vue-material-design-icons/Close.vue';
 
 export default {
   name: 'AposNotification',
@@ -290,7 +294,7 @@ export default {
     line-height: var(--a-line-tallest);
   }
 
-  .apos-notification__label ::v-deep button {
+  .apos-notification__label :deep(button) {
     @include apos-button-reset();
     text-decoration: underline;
     text-decoration-color: var(--a-success);

package/modules/@apostrophecms/notification/ui/apos/components/TheAposNotifications.vue

@@ -1,7 +1,9 @@
 <template>
   <transition-group
-    name="list" tag="div"
-    class="apos-notifications" :class="themeClass"
+    name="list"
+    tag="div"
+    class="apos-notifications"
+    :class="themeClass"
   >
     <AposNotification
       v-for="notification in notifications"

package/modules/@apostrophecms/oembed-field/ui/apos/components/AposInputOembed.vue

@@ -1,35 +1,37 @@
 <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="apos-input-wrapper">
         <input
-          :class="classes"
+          :id="uid"
           v-model="next.url"
+          :class="classes"
           type="url"
           :placeholder="$t(field.placeholder)"
           :disabled="field.readOnly"
           :readonly="tempReadOnly"
           :required="field.required"
-          :id="uid"
           :tabindex="tabindex"
         >
         <component
+          :is="icon"
           v-if="icon"
           :size="iconSize"
           class="apos-input-icon"
-          :is="icon"
         />
         <!-- eslint-disable vue/no-v-html -->
         <div
           v-if="!error && oembedResult.html"
-          v-html="oembedResult.html"
           class="apos-input__embed"
           :class="{ 'apos-is-dynamic': !!dynamicRatio }"
           :style="{ paddingTop: dynamicRatio && `${(dynamicRatio * 100)}%` }"
+          v-html="oembedResult.html"
         />
       </div>
       <!-- eslint-enable vue/no-v-html -->
@@ -46,8 +48,8 @@ export default {
   emits: [ 'return' ],
   data () {
     return {
-      next: (this.value && this.value.data)
-        ? { ...this.value.data } : {},
+      next: (this.modelValue && this.modelValue.data)
+        ? { ...this.modelValue.data } : {},
       oembedResult: {},
       dynamicRatio: '',
       oembedError: null,
@@ -149,7 +151,7 @@ export default {
 
 <style lang="scss" scoped>
   .apos-input__embed {
-    ::v-deep iframe {
+    :deep(iframe) {
       max-width: 100%;
     }
 
@@ -158,7 +160,7 @@ export default {
       width: 100%;
       height: 0;
 
-      ::v-deep iframe {
+      :deep(iframe) {
         position: absolute;
         top: 0;
         left: 0;

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

@@ -702,6 +702,7 @@ database.`);
                   editRole: 'admin',
                   publishRole: 'admin'
                 },
+                permissions: {},
                 find(req) {
                   return [];
                 },

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

@@ -10,12 +10,14 @@
     <template #secondaryControls>
       <AposButton
         v-if="relationshipField"
-        type="default" label="apostrophe:cancel"
+        type="default"
+        label="apostrophe:cancel"
         @click="confirmAndCancel"
       />
       <AposButton
         v-else
-        type="default" label="apostrophe:exit"
+        type="default"
+        label="apostrophe:exit"
         @click="confirmAndCancel"
       />
     </template>
@@ -28,12 +30,14 @@
         v-if="relationshipField"
         :menu="moreMenu"
         menu-placement="bottom-end"
-        @item-clicked="moreMenuHandler"
         :button="moreMenuButton"
+        @item-clicked="moreMenuHandler"
       />
       <AposButton
-        v-else-if="canCreate" type="primary"
-        label="apostrophe:newPage" @click="create()"
+        v-else-if="canCreate"
+        type="primary"
+        label="apostrophe:newPage"
+        @click="create()"
       />
       <AposButton
         v-if="relationshipField"
@@ -49,37 +53,37 @@
           <div class="apos-pages-manager__relationship__counts">
             <AposMinMaxCount
               :field="relationshipField"
-              :value="checkedDocs"
+              :model-value="checkedDocs"
             />
           </div>
           <AposSlatList
             class="apos-pages-manager__relationship__items"
-            @input="setCheckedDocs"
-            :value="checkedDocs"
+            :model-value="checkedDocs"
+            @update:model-value="setCheckedDocs"
           />
         </div>
       </AposModalRail>
     </template>
     <template #main>
       <AposModalBody>
-        <template #bodyHeader v-if="!relationshipField">
+        <template v-if="!relationshipField" #bodyHeader>
           <AposModalToolbar>
             <template #rightControls>
               <AposContextMenu
                 :menu="pageSetMenu"
                 menu-placement="bottom-end"
-                @item-clicked="pageSetMenuSelection = $event"
                 :button="pageSetMenuButton"
+                @item-clicked="pageSetMenuSelection = $event"
               />
             </template>
           </AposModalToolbar>
         </template>
         <template #bodyMain>
           <AposTree
+            v-model:checked="checked"
             :items="items"
             :headers="headers"
             :icons="icons"
-            v-model="checked"
             :options="treeOptions"
             :module-options="moduleOptions"
             @update="update"

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

@@ -152,7 +152,7 @@ export default {
     apos.bus.$on('command-menu-manager-create-new', this.create);
     apos.bus.$on('command-menu-manager-close', this.confirmAndCancel);
   },
-  destroyed() {
+  unmounted() {
     apos.bus.$off('content-changed', this.getPages);
     apos.bus.$off('command-menu-manager-create-new', this.create);
     apos.bus.$off('command-menu-manager-close', this.confirmAndCancel);

package/modules/@apostrophecms/permission/ui/apos/components/AposInputRole.vue

@@ -8,10 +8,10 @@
   >
     <template #body>
       <AposSelect
+        :id="uid"
         :choices="choices"
         :disabled="field.readOnly"
-        :selected="value.data"
-        :id="uid"
+        :selected="modelValue.data"
         :classes="[ 'apos-input__role' ]"
         :wrapper-classes="[ 'apos-input__role' ]"
         @change="change"
@@ -29,7 +29,7 @@ export default {
   mixins: [ AposInputMixin ],
   data() {
     return {
-      next: (this.value.data == null) ? null : this.value.data,
+      next: (this.modelValue.data == null) ? null : this.modelValue.data,
       choices: []
     };
   },

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

@@ -1,19 +1,24 @@
 <template>
   <AposModal
-    :modal="modal" :modal-title="modalTitle"
     ref="modal"
-    @esc="confirmAndCancel" @no-modal="$emit('safe-close')"
-    @inactive="modal.active = false" @show-modal="modal.showModal = true"
+    :modal="modal"
+    :modal-title="modalTitle"
+    @esc="confirmAndCancel"
+    @no-modal="$emit('safe-close')"
+    @inactive="modal.active = false"
+    @show-modal="modal.showModal = true"
   >
     <template #secondaryControls>
       <AposButton
         v-if="relationshipField"
-        type="default" label="apostrophe:cancel"
+        type="default"
+        label="apostrophe:cancel"
         @click="confirmAndCancel"
       />
       <AposButton
         v-else
-        type="default" label="apostrophe:exit"
+        type="default"
+        label="apostrophe:exit"
         @click="confirmAndCancel"
       />
     </template>
@@ -34,7 +39,8 @@
         :label="{
           key: 'apostrophe:newDocType',
           type: $t(moduleOptions.label)
-        }" type="primary"
+        }"
+        type="primary"
         @click="create"
       />
     </template>
@@ -44,15 +50,15 @@
           <div class="apos-pieces-manager__relationship__counts">
             <AposMinMaxCount
               :field="relationshipField"
-              :value="checkedDocs"
+              :model-value="checkedDocs"
             />
           </div>
           <AposSlatList
             class="apos-pieces-manager__relationship__items"
-            @input="setCheckedDocs"
-            @item-clicked="editRelationship"
-            :value="checkedDocs"
+            :model-value="checkedDocs"
             :relationship-schema="relationshipField?.schema"
+            @update:model-value="setCheckedDocs"
+            @item-clicked="editRelationship"
           />
         </div>
       </AposModalRail>
@@ -74,14 +80,14 @@
             :checked-count="checked.length"
             :batch-operations="moduleOptions.batchOperations"
             :module-name="moduleName"
+            :options="{
+              disableUnchecked: maxReached()
+            }"
             @select-click="selectAll"
             @search="onSearch"
             @page-change="updatePage"
             @filter="filter"
             @batch="handleBatchAction"
-            :options="{
-              disableUnchecked: maxReached()
-            }"
           />
           <AposDocsManagerSelectBox
             :selected-state="selectAllState"
@@ -97,16 +103,16 @@
         <template #bodyMain>
           <AposDocsManagerDisplay
             v-if="items.length > 0"
+            v-model:checked="checked"
             :items="items"
             :headers="headers"
-            v-model="checked"
-            @open="edit"
             :options="{
               ...moduleOptions,
               disableUnchecked: maxReached(),
               disableUnpublished: disableUnpublished,
               manuallyPublished: manuallyPublished
             }"
+            @open="edit"
           />
           <div v-else class="apos-pieces-manager__empty">
             <AposEmptyState :empty-state="emptyDisplay" />
@@ -239,7 +245,7 @@ export default {
     apos.bus.$on('command-menu-manager-create-new', this.create);
     apos.bus.$on('command-menu-manager-close', this.confirmAndCancel);
   },
-  destroyed() {
+  unmounted() {
     this.destroyShortcuts();
     apos.bus.$off('content-changed', this.getPieces);
     apos.bus.$off('command-menu-manager-create-new', this.create);
@@ -429,7 +435,9 @@ export default {
       });
       if (result) {
         const index = this.checkedDocs.findIndex(_item => _item._id === item._id);
-        this.$set(this.checkedDocs, index, {
+        // TODO verify it's still reactive, should be based on the doc
+        // Or use a filter here
+        this.checkedDocs.splice(index, 1, {
           ...this.checkedDocs[index],
           _fields: result
         });

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

@@ -6,23 +6,26 @@
           class="apos-table__header"
         />
         <th
-          v-for="header in headers" scope="col"
-          class="apos-table__header" :key="header.label"
+          v-for="header in headers"
+          :key="header.label"
+          scope="col"
+          class="apos-table__header"
           :class="`apos-table__header--${header.name}`"
         >
           <component
-            :is="getEl(header)" class="apos-table__header-label"
+            :is="getEl(header)"
+            class="apos-table__header-label"
           >
             <component
-              v-if="header.labelIcon"
               :is="icons[header.labelIcon]"
+              v-if="header.labelIcon"
               :size="iconSize(header)"
               class="apos-table__header-icon"
             />
             {{ $t(header.label) }}
           </component>
         </th>
-        <th class="apos-table__header" key="contextMenu">
+        <th key="contextMenu" class="apos-table__header">
           <component
             :is="getEl({})"
             class="apos-table__header-label apos-is-hidden"
@@ -32,17 +35,20 @@
         </th>
       </tr>
       <tr
-        class="apos-table__row"
         v-for="item in items"
         :key="item._id"
+        class="apos-table__row"
         :class="{'apos-is-selected': false }"
-        @mouseover="over(item._id)" @mouseout="out(item._id)"
+        @mouseover="over(item._id)"
+        @mouseout="out(item._id)"
       >
         <td
           class="apos-table__cell"
         >
           <AposCheckbox
             v-if="item._id"
+            v-model="checkProxy"
+            v-apos-tooltip="options.disableUnpublished && !item.lastPublishedAt ? 'apostrophe:publishBeforeUsingTooltip' : null"
             :field="{
               name: item._id,
               hideLabel: true,
@@ -51,23 +57,24 @@
                 (options.disableUnchecked && !checkProxy.includes(item._id)) ||
                 (options.disableUnpublished && !item.lastPublishedAt)
             }"
-            v-apos-tooltip="options.disableUnpublished && !item.lastPublishedAt ? 'apostrophe:publishBeforeUsingTooltip' : null"
             :choice="{ value: item._id }"
-            v-model="checkProxy"
             @updated="emitUpdated(item._id)"
           />
         </td>
         <td
           v-for="header in headers"
+          :key="header.name"
           class="apos-table__cell apos-table__cell--pointer"
           :class="`apos-table__cell--${header.name}`"
-          :key="header.name"
           @click="canEdit(item) && $emit('open', item)"
         >
           <component
-            v-if="header.component" :is="header.component"
-            :header="header" :item="item._publishedDoc || item"
-            :draft="item" :published="item._publishedDoc"
+            :is="header.component"
+            v-if="header.component"
+            :header="header"
+            :item="item._publishedDoc || item"
+            :draft="item"
+            :published="item._publishedDoc"
             :manually-published="options.manuallyPublished"
           />
           <AposCellBasic
@@ -80,7 +87,8 @@
         <!-- append the context menu -->
         <td class="apos-table__cell apos-table__cell--context-menu">
           <AposCellContextMenu
-            :state="state[item._id]" :item="item"
+            :state="state[item._id]"
+            :item="item"
             :draft="item"
             :published="item._publishedDoc"
             :header="{
@@ -99,10 +107,6 @@
 <script>
 import { klona } from 'klona';
 export default {
-  model: {
-    prop: 'checked',
-    event: 'change'
-  },
   props: {
     headers: {
       type: Array,
@@ -126,8 +130,8 @@ export default {
     }
   },
   emits: [
+    'update:checked',
     'open',
-    'change',
     'updated'
   ],
   data() {
@@ -149,7 +153,7 @@ export default {
         return this.checked;
       },
       set(val) {
-        this.$emit('change', val);
+        this.$emit('update:checked', val);
       }
     },
     contextMenuOptions() {

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

@@ -12,15 +12,19 @@
           {{ selectBoxMessage }}
           <AposButton
             v-if="!allPiecesSelection.isSelected"
-            type="subtle" :modifiers="['inline', 'small', 'no-motion']"
-            :label="selectBoxMessageButton" class="apos-select-box__select-all"
-            @click="$emit('select-all')"
+            type="subtle"
+            :modifiers="['inline', 'small', 'no-motion']"
+            :label="selectBoxMessageButton"
+            class="apos-select-box__select-all"
             text-color="var(--a-primary)"
+            @click="$emit('select-all')"
           />
           <AposButton
             v-else
-            type="subtle" :modifiers="['inline', 'small', 'no-motion']"
-            label="apostrophe:clearSelection" class="apos-select-box__select-all"
+            type="subtle"
+            :modifiers="['inline', 'small', 'no-motion']"
+            label="apostrophe:clearSelection"
+            class="apos-select-box__select-all"
             text-color="var(--a-primary)"
             @click="clearSelection"
           />

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

@@ -1,13 +1,17 @@
 <template>
   <AposModal
-    class="apos-doc-editor" :modal="modal"
+    class="apos-doc-editor"
+    :modal="modal"
     :modal-title="modalTitle"
-    @inactive="modal.active = false" @show-modal="modal.showModal = true"
-    @esc="confirmAndCancel" @no-modal="$emit('safe-close')"
+    @inactive="modal.active = false"
+    @show-modal="modal.showModal = true"
+    @esc="confirmAndCancel"
+    @no-modal="$emit('safe-close')"
   >
     <template #secondaryControls>
       <AposButton
-        type="default" label="apostrophe:cancel"
+        type="default"
+        label="apostrophe:cancel"
         @click="confirmAndCancel"
       />
     </template>
@@ -23,8 +27,8 @@
     <template #leftRail>
       <AposModalRail>
         <AposModalTabs
-          :key="tabKey"
           v-if="tabs.length"
+          :key="tabKey"
           :current="currentTab"
           :tabs="tabs"
           :errors="fieldErrors"
@@ -41,12 +45,12 @@
                 v-for="tab in tabs"
                 v-show="tab.name === currentTab"
                 :key="tab.name"
+                :ref="tab.name"
                 :schema="groups[tab.name].schema"
                 :current-fields="groups[tab.name].fields"
-                :value="docFields"
+                :model-value="docFields"
                 :trigger-validation="triggerValidation"
-                :ref="tab.name"
-                @input="updateDocFields"
+                @update:model-value="updateDocFields"
               />
             </div>
           </AposModalTabsBody>
@@ -78,7 +82,7 @@ export default {
         return [];
       }
     },
-    value: {
+    modelValue: {
       type: Object,
       default() {
         return null;
@@ -93,10 +97,10 @@ export default {
   data() {
     return {
       docReady: false,
-      original: this.value,
+      original: this.modelValue,
       docFields: {
         data: {
-          ...((this.value != null) ? this.value
+          ...((this.modelValue != null) ? this.modelValue
             : Object.fromEntries(
               this.schema.map(field =>
                 [ field.name, (field.def !== undefined) ? klona(field.def) : null ]

package/modules/@apostrophecms/rich-text-widget/index.js

@@ -331,6 +331,7 @@ module.exports = {
       blockquote: [ 'blockquote' ],
       superscript: [ 'sup' ],
       subscript: [ 'sub' ],
+      textStyle: [ 'span' ],
       // Generic div type, usually used with classes,
       // and for A2 content migration. Intentionally not
       // given a nicer-sounding name

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

@@ -13,21 +13,22 @@
       menu-placement="bottom-start"
     >
       <AposSchema
+        :key="lastSelectionTime"
+        v-model="docFields"
         :schema="schema"
         :trigger-validation="triggerValidation"
-        v-model="docFields"
         :modifiers="formModifiers"
-        :key="lastSelectionTime"
         :generation="generation"
         :following-values="followingValues()"
         :conditional-fields="conditionalFields"
-        @input="evaluateConditions()"
+        @update:model-value="evaluateConditions()"
       />
       <footer class="apos-image-control__footer">
         <AposButton
-          type="default" label="apostrophe:cancel"
-          @click="close"
+          type="default"
+          label="apostrophe:cancel"
           :modifiers="formModifiers"
+          @click="close"
         />
         <AposButton
           type="primary"
@@ -266,7 +267,7 @@ function getOptions() {
   }
 
   // special schema style for this use
-  .apos-image-control ::v-deep .apos-field--target {
+  .apos-image-control :deep(.apos-field--target) {
     .apos-field__label {
       display: none;
     }