apostrophe 3.63.3 → 4.1.0

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

@@ -4,11 +4,14 @@
 // each app
 
 import i18next from 'i18next';
+let i18n;
 
 export default {
 
-  install(Vue, options) {
-    const i18n = options.i18n;
+  install(app, options) {
+    if (!i18n) {
+      i18n = options.i18n;
+    }
 
     const fallbackLng = [ i18n.defaultLocale ];
     // In case the default locale also has inadequate admin UI phrases
@@ -67,56 +70,59 @@ export default {
     // property for instance. You may also specify
     // `localize: false` to pass a string through without
     // invoking i18next.
-    Vue.prototype.$t = (key, options = {}) => {
-      if ((key !== null) && ((typeof key) === 'object')) {
-        options = key;
-        key = options.key;
-      }
-      if (options.localize === false) {
-        return key;
-      }
-      // Check carefully for empty string and equivalent scenarios
-      // before doing any work
-      if (key == null) {
-        return '';
-      }
-      key += '';
-      if (!key.length) {
-        return '';
-      }
-      const result = i18next.t(key, {
-        lng: i18n.adminLocale,
-        ...options
-      });
-      if (i18n.show) {
-        if (result === key) {
-          if (key.match(/^\S+:/)) {
-            // The l10n key does not have a value assigned (or the key is
-            // actually the same as the phrase). The key seems to have a
-            // namespace, so might be from the Apostrophe UI.
-            return `❌ ${result}`;
-          } else {
-            // The l10n key does not have a value assigned (or the key is
-            // actually the same as the phrase). It is in the default namespace.
-            return `🕳 ${result}`;
-          }
-        } else {
-          // The phrase is fully localized.
-          return `🌍 ${result}`;
-        }
-      } else {
-        return result;
-      }
-    };
+    app.config.globalProperties.$t = $t;
+  }
+};
 
-    function canonicalize(locale) {
-      const [ language, territory ] = locale.split('-');
-      if (territory) {
-        return `${language}-${territory.toUpperCase()}`;
+export function $t(key, options = {}) {
+  if (!i18n) {
+    return '';
+  }
+  if ((key !== null) && ((typeof key) === 'object')) {
+    options = key;
+    key = options.key;
+  }
+  if (options.localize === false) {
+    return key;
+  }
+  // Check carefully for empty string and equivalent scenarios
+  // before doing any work
+  if (key == null) {
+    return '';
+  }
+  key += '';
+  if (!key.length) {
+    return '';
+  }
+  const result = i18next.t(key, {
+    lng: i18n.adminLocale,
+    ...options
+  });
+  if (i18n.show) {
+    if (result === key) {
+      if (key.match(/^\S+:/)) {
+        // The l10n key does not have a value assigned (or the key is
+        // actually the same as the phrase). The key seems to have a
+        // namespace, so might be from the Apostrophe UI.
+        return `❌ ${result}`;
+      } else {
+        // The l10n key does not have a value assigned (or the key is
+        // actually the same as the phrase). It is in the default namespace.
+        return `🕳 ${result}`;
       }
-      return locale;
+    } else {
+      // The phrase is fully localized.
+      return `🌍 ${result}`;
     }
-
+  } else {
+    return result;
   }
-
 };
+
+function canonicalize(locale) {
+  const [ language, territory ] = locale.split('-');
+  if (territory) {
+    return `${language}-${territory.toUpperCase()}`;
+  }
+  return locale;
+}

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/_theme.scss

@@ -8,6 +8,7 @@
   --a-warning-dark: #a75c07;
   --a-warning-fade: #ffce0030;
   --a-progress-bg: #2c354d;
+  --a-highlight: #fff6e8;
 
   --a-danger-button-hover: #c00717;
   --a-danger-button-active: #a10000;

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
       };
     }
   }