apostrophe 3.63.1 → 4.0.0

package/modules/@apostrophecms/ui/ui/apos/lib/tooltip.js

@@ -0,0 +1,191 @@
+// Vue plugin. Create a new directive with i18n support by applying the decorator
+import { $t } from './i18next';
+import {
+  computePosition, arrow, offset, shift
+} from '@floating-ui/dom';
+import cuid from 'cuid';
+import { isEqual } from 'lodash';
+
+const getTooltipHtml = (id, tooltip) =>
+  `<div id="${id}" class="apos-tooltip" role="tooltip">
+    <div class="apos-tooltip__wrapper">
+      <div class="apos-tooltip__arrow"></div>
+      <div class="apos-tooltip__inner">
+        ${tooltip}
+      </div>
+    </div>
+  </div>`;
+
+export default {
+  install(app) {
+    app.directive('apos-tooltip', {
+      mounted(el, binding, vnodes) {
+        addEventListeners(el, binding);
+      },
+      updated(el, binding) {
+        const contentValue = Object.hasOwn(binding.value || {}, 'content')
+          ? binding.value.content
+          : binding.value;
+        const oldValue = Object.hasOwn(binding.oldValue || {}, 'content')
+          ? binding.oldValue.content
+          : binding.oldValue;
+
+        if (isEqual(contentValue, oldValue)) {
+          return;
+        }
+
+        if (el.aposShowTooltipListener) {
+          removeEventListeners(el);
+        }
+
+        addEventListeners(el, binding);
+      },
+      beforeUnmount(el, binding) {
+        removeEventListeners(el);
+      }
+    });
+
+    function addEventListeners(el, binding) {
+      let tooltipTimeout;
+      let delayTimeout;
+      if (!binding.value && !binding.value?.content) {
+        return;
+      }
+
+      const delay = binding.value?.delay;
+      const localized = localize(binding.value, app);
+      if (!localized) {
+        return;
+      }
+      const tooltipId = `tooltip__${cuid()}`;
+
+      // Attach event listeners to elements to retrieve them in beforeUnmount
+      el.aposShowTooltipListener = setupShowTooltip({
+        el,
+        value: binding.value,
+        tooltipTimeout,
+        delayTimeout,
+        tooltipId,
+        localized
+      });
+      el.aposHideTooltipListener = setupHideTooltip({
+        tooltipId,
+        tooltipTimeout,
+        delayTimeout,
+        delay
+      });
+
+      el.addEventListener('mouseenter', el.aposShowTooltipListener);
+      el.addEventListener('mouseleave', el.aposHideTooltipListener);
+      el.addEventListener('click', el.aposHideTooltipListener);
+
+    }
+
+    function removeEventListeners(el) {
+      if (el.aposHideTooltipListener) {
+        el.aposHideTooltipListener(true);
+      }
+      el.removeEventListener('mouseenter', el.aposShowTooltipListener);
+      el.removeEventListener('mouseleave', el.aposHideTooltipListener);
+      el.removeEventListener('click', el.aposHideTooltipListener);
+    }
+
+    function setupShowTooltip({
+      el, value, tooltipTimeout, delayTimeout, tooltipId, localized
+    }) {
+      return async () => {
+        if (tooltipTimeout) {
+          clearTimeout(tooltipTimeout);
+        }
+        if (delayTimeout) {
+          clearTimeout(delayTimeout);
+        }
+
+        const existingEl = document.querySelector(`#${tooltipId}`);
+        if (!existingEl) {
+          document.body.insertAdjacentHTML('beforeend', getTooltipHtml(tooltipId, localized));
+        } else {
+          existingEl.setAttribute('aria-hidden', false);
+        }
+
+        const tooltipEl = existingEl || document.querySelector(`#${tooltipId}`);
+        if (!tooltipEl) {
+          return;
+        }
+
+        const arrowEl = tooltipEl.querySelector('.apos-tooltip__arrow');
+
+        const {
+          x, y, middlewareData, placement
+        } = await computePosition(el, tooltipEl, {
+          placement: value.placement || 'bottom-end',
+          middleware: [
+            offset(11),
+            shift({ padding: 5 }),
+            arrow({
+              element: arrowEl,
+              padding: 10
+            })
+          ]
+        });
+
+        const [ sidePosition ] = placement.split('-');
+
+        const { x: arrowX, y: arrowY } = middlewareData.arrow;
+        if (!existingEl) {
+          tooltipEl.setAttribute('x-placement', sidePosition);
+          tooltipEl.setAttribute('aria-hidden', false);
+        }
+        Object.assign(tooltipEl.style, {
+          left: `${x}px`,
+          top: `${y}px`
+        });
+
+        Object.assign(arrowEl.style, {
+          ...arrowX && { left: `${arrowX}px` },
+          ...arrowY && { top: `${arrowY}px` }
+        });
+      };
+    }
+
+    function setupHideTooltip({
+      tooltipId, tooltipTimeout, delayTimeout, delay
+    }) {
+      return (immediate = false) => {
+        const tooltipEl = document.querySelector(`#${tooltipId}`);
+        if (!tooltipEl) {
+          return;
+        }
+
+        if (immediate) {
+          tooltipEl.remove();
+          return;
+        }
+
+        if (delay) {
+          delayTimeout = setTimeout(() => {
+            tooltipEl.setAttribute('aria-hidden', true);
+          }, delay);
+        } else {
+          tooltipEl.setAttribute('aria-hidden', true);
+        }
+
+        tooltipTimeout = setTimeout(() => {
+          tooltipEl.remove();
+        }, 5000);
+      };
+    }
+
+    function localize(value) {
+      if (!value) {
+        return;
+      }
+
+      if (value.content) {
+        return (value.localize === false) ? value.content : $t(value.content);
+      }
+
+      return $t(value);
+    }
+  }
+};

package/modules/@apostrophecms/ui/ui/apos/lib/vue.js

@@ -1,14 +1,23 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
 import ClickOutsideElement from './click-outside-element';
-import LocalizedVTooltip from './localized-v-tooltip';
-import tooltipOptions from './tooltip-options';
+import Tooltip from './tooltip';
 import VueAposI18Next from './i18next';
 
-Vue.use(LocalizedVTooltip, tooltipOptions);
-Vue.use(ClickOutsideElement);
-Vue.use(VueAposI18Next, {
-  // Module aliases are not available yet when this code executes
-  i18n: apos.modules['@apostrophecms/i18n']
-});
+export default (appConfig, props = {}) => {
+  const app = createApp(appConfig, props);
 
-export default Vue;
+  app.use(VueAposI18Next, {
+    // Module aliases are not available yet when this code executes
+    i18n: apos.modules['@apostrophecms/i18n']
+  });
+  app.use(Tooltip);
+  app.use(ClickOutsideElement);
+
+  const sources = [ window.apos.vueComponents, window.apos.iconComponents ];
+  for (const source of sources) {
+    for (const [ name, component ] of Object.entries(source)) {
+      app.component(name, component);
+    }
+  }
+  return app;
+};

package/modules/@apostrophecms/ui/ui/apos/mixins/AposAdvisoryLockMixin.js

@@ -12,7 +12,7 @@ export default {
       lockApiUrl: null
     };
   },
-  async destroyed () {
+  async unmounted () {
     await this.unlock();
   },
   methods: {

package/modules/@apostrophecms/ui/ui/apos/scss/global/_tables.scss

@@ -43,7 +43,7 @@ span.apos-table__header-label:hover {
   cursor: auto;
 }
 
-.apos-table ::v-deep .apos-choice-label {
+.apos-table :deep(.apos-choice-label) {
   margin-top: 0;
 }
 

package/modules/@apostrophecms/ui/ui/apos/scss/global/_tooltips.scss

@@ -2,7 +2,9 @@
 // https://github.com/Akryum/v-tooltip/blob/83615e394c96ca491a4df04b892ae87e833beb97/demo-src/src/App.vue#L179-L303
 .apos-tooltip {
   z-index: $z-index-notifications;
+  position: absolute;
   display: block;
+  width: max-content;
   max-width: 285px;
   /* stylelint-disable-next-line time-min-milliseconds */
   transition-delay: 0.1s;
@@ -32,6 +34,7 @@
 
   .apos-tooltip__inner {
     @include type-small;
+
     z-index: $z-index-default;
     position: relative;
     padding: 8px 10px;
@@ -46,7 +49,6 @@
     position: absolute;
     width: 8px;
     height: 8px;
-    margin: 5px;
     border-radius: 1px;
     // Solid border style needed to work with v-apos-tooltip placement.
     border-style: solid;
@@ -56,50 +58,31 @@
   }
 
   &[x-placement^='top'] {
-    margin-bottom: 5px;
-
     .apos-tooltip__arrow {
       bottom: -4px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
     }
   }
 
   &[x-placement^='bottom'] {
-    margin-top: 5px;
-
     .apos-tooltip__arrow {
       top: -3px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
     }
   }
 
   &[x-placement^='right'] {
-    margin-left: 5px;
-
     .apos-tooltip__arrow {
-      top: calc(50% - 5px);
       left: -3px;
-      margin-left: 0;
-      margin-right: 0;
     }
   }
 
   &[x-placement^='left'] {
-    margin-right: 5px;
-
     .apos-tooltip__arrow {
-      top: calc(50% - 5px);
       right: -3px;
-      margin-left: 0;
-      margin-right: 0;
     }
   }
 
   &[aria-hidden='true'] {
+    display: none;
     visibility: hidden;
     opacity: 0;
     transition: opacity 0.15s, visibilty 0.15s;
@@ -109,6 +92,7 @@
   }
 
   &[aria-hidden='false'] {
+    display: initial;
     visibility: visible;
     opacity: 1;
     transition: opacity 0.15s;
@@ -123,4 +107,4 @@
   /* stylelint-disable-next-line time-min-milliseconds */
   transition-delay: 0.1s;
   transform: scale(0.8);
-}
+}

package/modules/@apostrophecms/ui/ui/apos/scss/shared/_table-rows.scss

@@ -26,7 +26,7 @@ span.apos-tree__cell:first-of-type {
   margin-left: 5px;
 }
 
-.apos-tree__cell[disabled] {
+.apos-tree__cell[disabled='true'] {
   color: $input-color-disabled;
   &:hover {
     cursor: not-allowed;

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

@@ -100,7 +100,11 @@ module.exports = {
     neverLoadSelf: true,
     initialModal: true,
     placeholder: false,
-    placeholderClass: 'apos-placeholder'
+    placeholderClass: 'apos-placeholder',
+    // two-thirds, half or full:
+    width: '',
+    // left or right:
+    origin: 'right'
   },
   init(self) {
     const badFieldName = Object.keys(self.fields).indexOf('type') !== -1;
@@ -400,7 +404,9 @@ module.exports = {
           contextual: self.options.contextual,
           placeholderClass: self.options.placeholderClass,
           className: self.options.className,
-          components: self.options.components
+          components: self.options.components,
+          width: self.options.width,
+          origin: self.options.origin
         });
         return result;
       }

package/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue

@@ -1,13 +1,17 @@
 <template>
   <AposModal
     class="apos-widget-editor"
-    :modal="modal" :modal-title="editLabel"
-    @inactive="modal.active = false" @show-modal="modal.showModal = true"
-    @esc="confirmAndCancel" @no-modal="$emit('safe-close')"
+    :modal="modal"
+    :modal-title="editLabel"
+    @inactive="modal.active = false"
+    @show-modal="modal.showModal = true"
+    @esc="confirmAndCancel"
+    @no-modal="$emit('safe-close')"
   >
     <template #breadcrumbs>
       <AposModalBreadcrumbs
-        v-if="breadcrumbs && breadcrumbs.length" :items="breadcrumbs"
+        v-if="breadcrumbs && breadcrumbs.length"
+        :items="breadcrumbs"
       />
     </template>
     <template #main>
@@ -15,15 +19,15 @@
         <template #bodyMain>
           <div class="apos-widget-editor__body">
             <AposSchema
+              ref="schema"
               :trigger-validation="triggerValidation"
               :schema="schema"
-              :value="docFields"
+              :model-value="docFields"
               :meta="meta"
-              @input="updateDocFields"
-              @validate="triggerValidate"
               :following-values="followingValues()"
               :conditional-fields="conditionalFields"
-              ref="schema"
+              @update:model-value="updateDocFields"
+              @validate="triggerValidate"
             />
           </div>
         </template>
@@ -31,13 +35,15 @@
     </template>
     <template #footer>
       <AposButton
-        type="default" label="apostrophe:cancel"
+        type="default"
+        label="apostrophe:cancel"
         @click="confirmAndCancel"
       />
       <AposButton
-        type="primary" @click="save"
+        type="primary"
         :label="saveLabel"
         :disabled="docFields.hasErrors"
+        @click="save"
       />
     </template>
   </AposModal>
@@ -68,7 +74,7 @@ export default {
       required: true,
       type: Object
     },
-    value: {
+    modelValue: {
       required: false,
       type: Object,
       default() {
@@ -92,8 +98,10 @@ export default {
   },
   emits: [ 'safe-close', 'modal-result' ],
   data() {
+    const moduleOptions = window.apos.modules[apos.area.widgetManagers[this.type]];
+
     return {
-      id: this.value && this.value._id,
+      id: this.modelValue && this.modelValue._id,
       original: null,
       docFields: {
         data: {},
@@ -103,6 +111,8 @@ export default {
         title: this.editLabel,
         active: false,
         type: 'slide',
+        width: moduleOptions.width,
+        origin: moduleOptions.origin,
         showModal: false
       },
       triggerValidation: false
@@ -151,17 +161,17 @@ export default {
       ...apos.area.widgetOptions
     ];
   },
-  destroyed() {
+  unmounted() {
     apos.area.widgetOptions = apos.area.widgetOptions.slice(1);
   },
   created() {
     const defaults = this.getDefault();
 
-    if (this.value) {
-      this.original = klona(this.value);
+    if (this.modelValue) {
+      this.original = klona(this.modelValue);
       this.docFields.data = {
         ...defaults,
-        ...this.value
+        ...this.modelValue
       };
       return;
     }
@@ -218,9 +228,3 @@ export default {
   }
 };
 </script>
-
-<style lang="scss" scoped>
-  .apos-widget-editor ::v-deep .apos-modal__inner {
-    max-width: 458px;
-  }
-</style>

package/modules/@apostrophecms/widget-type/ui/apos/mixins/AposWidgetMixin.js

@@ -6,7 +6,7 @@ export default {
     docId: String,
     type: String,
     areaFieldId: String,
-    value: Object,
+    modelValue: Object,
     meta: {
       type: Object,
       default() {
@@ -26,7 +26,7 @@ export default {
     }
   },
   watch: {
-    value: {
+    modelValue: {
       handler() {
         this.renderContent();
       }
@@ -50,7 +50,7 @@ export default {
       apos.bus.$emit('widget-rendering');
       const parameters = {
         _docId: this.docId,
-        widget: this.value,
+        widget: this.modelValue,
         areaFieldId: this.areaFieldId,
         type: this.type
       };
@@ -83,7 +83,7 @@ export default {
       }
 
       return {
-        [placeholderClass]: this.value.aposPlaceholder === true
+        [placeholderClass]: this.modelValue.aposPlaceholder === true
       };
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apostrophe",
-  "version": "3.63.1",
+  "version": "4.0.0",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {
@@ -31,41 +31,28 @@
   "author": "Apostrophe Technologies, Inc.",
   "license": "MIT",
   "dependencies": {
-    "@apostrophecms/vue-color": "^2.8.2",
+    "@apostrophecms/vue-material-design-icons": "^1.0.0",
+    "@ckpack/vue-color": "^1.4.1",
+    "@floating-ui/dom": "^1.5.3",
     "@opentelemetry/api": "^1.0.4",
     "@opentelemetry/semantic-conventions": "^1.0.1",
-    "@tiptap/core": "^2.0.0-beta.220",
-    "@tiptap/extension-blockquote": "^2.0.0-beta.220",
-    "@tiptap/extension-bold": "^2.0.0-beta.220",
-    "@tiptap/extension-bullet-list": "^2.0.0-beta.220",
-    "@tiptap/extension-code": "^2.0.0-beta.220",
-    "@tiptap/extension-code-block": "^2.0.0-beta.220",
-    "@tiptap/extension-dropcursor": "^2.0.0-beta.220",
-    "@tiptap/extension-floating-menu": "^2.0.0-beta.220",
-    "@tiptap/extension-gapcursor": "^2.0.0-beta.220",
-    "@tiptap/extension-hard-break": "^2.0.0-beta.220",
-    "@tiptap/extension-heading": "^2.0.0-beta.220",
-    "@tiptap/extension-highlight": "^2.0.0-beta.220",
-    "@tiptap/extension-history": "^2.0.0-beta.220",
-    "@tiptap/extension-horizontal-rule": "^2.0.0-beta.220",
-    "@tiptap/extension-italic": "^2.0.0-beta.220",
-    "@tiptap/extension-link": "^2.0.0-beta.220",
-    "@tiptap/extension-list-item": "^2.0.0-beta.220",
-    "@tiptap/extension-ordered-list": "^2.0.0-beta.220",
-    "@tiptap/extension-paragraph": "^2.0.0-beta.220",
-    "@tiptap/extension-placeholder": "^2.0.0-beta.220",
-    "@tiptap/extension-strike": "^2.0.0-beta.220",
-    "@tiptap/extension-subscript": "^2.0.0-beta.220",
-    "@tiptap/extension-superscript": "^2.0.0-beta.220",
-    "@tiptap/extension-table": "^2.0.0-beta.220",
-    "@tiptap/extension-table-cell": "^2.0.0-beta.220",
-    "@tiptap/extension-table-header": "^2.0.0-beta.220",
-    "@tiptap/extension-table-row": "^2.0.0-beta.220",
-    "@tiptap/extension-text": "^2.0.0-beta.220",
-    "@tiptap/extension-text-align": "^2.0.0-beta.220",
-    "@tiptap/extension-text-style": "^2.0.0-beta.220",
-    "@tiptap/extension-underline": "^2.0.0-beta.220",
-    "@tiptap/vue-2": "^2.0.0-beta.220",
+    "@tiptap/extension-floating-menu": "^2.0.3",
+    "@tiptap/extension-highlight": "^2.0.3",
+    "@tiptap/extension-link": "^2.0.3",
+    "@tiptap/extension-placeholder": "^2.0.3",
+    "@tiptap/extension-subscript": "^2.0.3",
+    "@tiptap/extension-superscript": "^2.0.3",
+    "@tiptap/extension-table": "^2.0.3",
+    "@tiptap/extension-table-cell": "^2.0.3",
+    "@tiptap/extension-table-header": "^2.0.3",
+    "@tiptap/extension-table-row": "^2.0.3",
+    "@tiptap/extension-text-align": "^2.0.3",
+    "@tiptap/extension-text-style": "^2.0.3",
+    "@tiptap/extension-underline": "^2.0.3",
+    "@tiptap/starter-kit": "^2.0.3",
+    "@tiptap/vue-3": "^2.0.3",
+    "@vue/compat": "^3.3.8",
+    "@vue/compiler-sfc": "^3.3.8",
     "autoprefixer": "^10.4.1",
     "bluebird": "^3.7.2",
     "body-parser": "^1.18.2",
@@ -127,18 +114,17 @@
     "sass-loader": "^10.1.1",
     "server-destroy": "^1.0.1",
     "sluggo": "^1.0.0",
+    "sortablejs": "^1.15.0",
+    "sortablejs-vue3": "^1.2.11",
+    "tiny-emitter": "^2.1.0",
     "tinycolor2": "^1.4.2",
     "tough-cookie": "^4.0.0",
     "underscore.string": "^3.3.4",
     "uploadfs": "^1.22.3",
-    "v-tooltip": "^2.0.3",
-    "vue": "2.7.15",
-    "vue-advanced-cropper": "^1.10.1",
-    "vue-loader": "^15.10.0",
-    "vue-material-design-icons": "~4.12.1",
-    "vue-style-loader": "^4.1.2",
-    "vue-template-compiler": "^2.6.14",
-    "vuedraggable": "^2.24.3",
+    "vue": "^3.3.8",
+    "vue-advanced-cropper": "^2.8.8",
+    "vue-loader": "^17.1.0",
+    "vue-style-loader": "^4.1.3",
     "webpack": "^5.72.0",
     "webpack-merge": "^5.7.3",
     "xregexp": "^2.0.0"
@@ -157,9 +143,10 @@
     "stylelint": "^14.6.1",
     "stylelint-declaration-strict-value": "^1.8.0",
     "stylelint-order": "^5.0.0",
-    "vue-eslint-parser": "^7.1.1"
+    "vue-eslint-parser": "^7.1.1",
+    "vue-template-compiler": "^2.7.14"
   },
   "browserslist": [
     "ie >= 10"
   ]
-}
+}

package/test/schemas.js

@@ -2052,7 +2052,10 @@ describe('Schemas', function() {
   it('should call the evaluate-external-condition API successfully', async function() {
     apos.schema.fieldsById['some-field-id'] = {
       name: 'someField',
-      moduleName: 'external-condition'
+      moduleName: 'external-condition',
+      if: {
+        'externalCondition()': 'yes'
+      }
     };
 
     const res = await apos.http.get('/api/v1/@apostrophecms/schema/evaluate-external-condition?fieldId=some-field-id&docId=some-doc-id&conditionKey=externalCondition()', {});
@@ -2062,7 +2065,10 @@ describe('Schemas', function() {
   it('should warn when an argument is passed in the external condition key via the evaluate-external-condition API', async function() {
     apos.schema.fieldsById['some-field-id'] = {
       name: 'someField',
-      moduleName: 'external-condition'
+      moduleName: 'external-condition',
+      if: {
+        'externalCondition()': 'yes'
+      }
     };
 
     const res = await apos.http.get('/api/v1/@apostrophecms/schema/evaluate-external-condition?fieldId=some-field-id&docId=some-doc-id&conditionKey=externalCondition(letsNotArgue)', {});
@@ -2081,7 +2087,7 @@ describe('Schemas', function() {
       await apos.http.get('/api/v1/@apostrophecms/schema/evaluate-external-condition?fieldId=some-field-id&docId=some-doc-id&conditionKey=externalCondition()', {});
     } catch (error) {
       assert(error.status = 400);
-      assert(error.body.message === 'The "unknown-module" module defined in the "someField" field does not exist.');
+      assert.strictEqual(error.body.message, 'externalCondition() is not registered as an external condition.');
       return;
     }
     throw new Error('should have thrown');
@@ -2097,7 +2103,7 @@ describe('Schemas', function() {
       await apos.http.get('/api/v1/@apostrophecms/schema/evaluate-external-condition?fieldId=some-field-id&docId=some-doc-id&conditionKey=unknownMethod()', {});
     } catch (error) {
       assert(error.status = 400);
-      assert(error.body.message === 'The "unknownMethod" method from "external-condition" module defined in the "someField" field does not exist.');
+      assert.strictEqual(error.body.message, 'unknownMethod() is not registered as an external condition.');
       return;
     }
     throw new Error('should have thrown');