apostrophe 3.63.3 → 4.1.0

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

@@ -0,0 +1,233 @@
+// ⚠️ The presence of this module in core may be temporary.
+// Its presence should not be relied upon in project development.
+// It is an implementation detail supporting @apostrophecms-pro/automatic-translation
+
+module.exports = {
+  extend: '@apostrophecms/module',
+  options: {
+    enabled: true,
+    alias: 'translation'
+  },
+  init(self) {
+    self.providers = [];
+    self.enableBrowserData();
+  },
+  handlers(self) {
+    return {
+      '@apostrophecms/doc-type:beforeLocalize': {
+        // Translate the document using the first available provider.
+        async translate(req, doc, {
+          source, target, existing
+        }) {
+          if (!self.isEnabled()) {
+            return;
+          }
+          const targets = req.query.aposTranslateTargets || [];
+          const aposProvider = self.apos.launder.string(req.query.aposTranslateProvider);
+
+          if (!Array.isArray(targets)) {
+            throw self.apos.error('invalid', 'apostrophe:automaticTranslationErrorTargets');
+          }
+
+          if (!targets.includes(target)) {
+            return;
+          }
+
+          // We don't support multiple providers yet, so just use the first one
+          // when no provider is specified.
+          const manager = self.getProviderModule(aposProvider);
+          if (!manager) {
+            const name = aposProvider || 'apostrophe:notAvailable';
+
+            self.logError('before-localize-translate', 'Provider not found.', {
+              _id: doc._id,
+              title: doc.title,
+              provider: name
+            });
+            return self.apos.notify(
+              req,
+              req.t(
+                'apostrophe:automaticTranslationErrorNoProvider',
+                {
+                  title: doc.title,
+                  name: req.t(name)
+                }
+              ),
+              {
+                type: 'danger',
+                dismiss: true
+              }
+            );
+          }
+
+          // Explicitly resolve the provider name to avoid errors as consequence of
+          // internal logic (empty argument vs non-existent provider).
+          const providerName = self.getProvider(aposProvider)?.name ?? '';
+
+          return manager.translate(req, providerName, doc, source, target, {
+            existing
+          });
+        }
+      }
+    };
+  },
+  apiRoutes: (self) => ({
+    get: {
+      // Get the list of supported languages for the given provider.
+      // If no provider is specified, the first available provider is used.
+      // query parameters:
+      // - provider: The name of the provider
+      // - source: (optional) Array of language codes to translate from
+      // - target: (optional) Array of language codes to translate to
+      // Example response:
+      // ```json
+      // {
+      //   source: [
+      //     { code: 'en', supported: true },
+      //     { code: 'de', supported: true }
+      //   ],
+      //   target: [
+      //     { code: 'en', supported: true },
+      //     { code: 'de', supported: true }
+      //   ]
+      // }
+      // ```
+      // If no `source` or `target` parameters are provided, the response should
+      // contain all supported languages for the source/target.
+      async languages(req) {
+        if (!self.isEnabled() || !self.canAccessApi(req)) {
+          throw self.apos.error('notfound');
+        }
+
+        const name = self.getProvider(req.query.provider)?.name;
+        const manager = self.getProviderModule(name);
+
+        if (!name || !manager) {
+          throw self.apos.error(
+            'invalid',
+            req.t('apostrophe:automaticTranslationLngCheckNoProvider')
+          );
+        }
+
+        const source = Array.isArray(req.query.source)
+          ? req.query.source.map(self.apos.launder.string)
+          : undefined;
+
+        const target = Array.isArray(req.query.target)
+          ? req.query.target.map(self.apos.launder.string)
+          : undefined;
+
+        return manager.getSupportedLanguages(
+          req,
+          {
+            provider: name,
+            source,
+            target
+          }
+        );
+      }
+    }
+  }),
+  methods(self, options) {
+    return {
+      isEnabled() {
+        return options.enabled && self.providers.length > 0;
+      },
+      // Add a translation provider to the list of available providers.
+      // `aposModule` should be the module object (self), not its name.
+      // `name` should be a unique name for the provider.
+      // `label` should be a human-readable label for the provider.
+      //
+      // The provider module must implement a `translate` method that takes
+      // the following arguments:
+      // - `req` (Object): The request object
+      // - `provider` (String): The provider name
+      // - `draft` (Object): The document to translate
+      // - `source` (String): The language code of the original document
+      // - `target` (String): The language code to translate the document to
+      // - `options` (Object): Additional options as passed from the beforeLocalize
+      //   event.
+      // The `translate` method should directly modify the `draft` object.
+      //
+      // The provider module must also implement a `getSupportedLanguages` method
+      // that takes the following arguments:
+      // - `req` (Object): The request object
+      // - `query` (Object): An object with the following properties:
+      //    - `provider` (String): Requried, the provider name
+      //    - `source` (Array): Optional, an array of language codes to translate from
+      //    - `target` (Array): Optional, an array of language codes to translate to
+      // The method should return an object with `source` and `target` properties,
+      // each containing an array of objects with `code` and `supported` properties.
+      // The `code` property should be the language code and the `supported` property
+      // should be a boolean indicating whether the provider supports the language.
+      // If no `source` or `target` parameters are provided, the method should return
+      // all supported languages for any source or target language.
+      //
+      // Example:
+      // ```js
+      // // within a module's `init` method
+      // self.apos.translation.addProvider(self, {
+      //   name: 'google',
+      //   label: 'Google Translate'
+      // });
+      // ```
+      addProvider(aposModule, { name, label } = {}) {
+        if (!aposModule?.__meta?.name) {
+          throw new Error(
+            'Apostrophe module not provided.',
+            { cause: 'invalidArguments' }
+          );
+        }
+        if (typeof aposModule.translate !== 'function') {
+          throw new Error(
+            `The translation provider module "${aposModule.__meta.name}" has to implement "translate" method.`,
+            { cause: 'interfaceNotImplemented' }
+          );
+        }
+        if (typeof aposModule.getSupportedLanguages !== 'function') {
+          throw new Error(
+            `The translation provider module "${aposModule.__meta.name}" has to implement "getSupportedLanguages" method.`,
+            { cause: 'interfaceNotImplemented' }
+          );
+        }
+
+        if (self.providers.some((provider) => provider.name === name)) {
+          throw new Error(
+            `The translation provider "${name}" is already registered.`,
+            { cause: 'duplicate' }
+          );
+        }
+
+        self.providers.push({
+          name,
+          label,
+          module: aposModule.__meta.name
+        });
+      },
+      // Get the first available provider or the provider with the given name.
+      // If no name is provided, the first available provider is returned.
+      // If name is provided and no provider with the given name is found,
+      // `undefined` is returned.
+      getProvider(name) {
+        if (!name) {
+          return self.providers[0];
+        }
+
+        return self.providers.find((provider) => provider.name === name);
+      },
+      getProviderModule(name) {
+        return self.apos.modules[self.getProvider(name)?.module];
+      },
+      getBrowserData(req) {
+        return {
+          action: self.action,
+          enabled: self.isEnabled(),
+          providers: self.providers.map(({ name, label }) => ({
+            name,
+            label
+          }))
+        };
+      }
+    };
+  }
+};

package/modules/@apostrophecms/translation/ui/apos/components/AposTranslationIndicator.vue

@@ -0,0 +1,84 @@
+<template>
+  <span
+    class="apos-translation-indicator"
+    data-apos-test="translationIndicator"
+  >
+    <svg
+      :width="size"
+      :height="size"
+      viewBox="0 0 24 24"
+    >
+      <defs>
+        <linearGradient
+          id="apos-translation-gradient"
+          x1="0"
+          x2="0"
+          y1="0"
+          y2="1"
+        >
+          <stop class="stop1" offset="0%" />
+          <stop class="stop2" offset="100%" />
+        </linearGradient>
+      </defs>
+      <path
+        id="svg-path"
+        d="M19,1L17.74,3.75L15,5L17.74,6.26L19,9L20.25,6.26L23,5L20.25,3.75M9,4L6.5,9.5L1,12L6.5,14.5L9,20L11.5,14.5L17,12L11.5,9.5M19,15L17.74,17.74L15,19L17.74,20.25L19,23L20.25,20.25L23,19L20.25,17.74"
+      />
+    </svg>
+    <p v-if="label" class="apos-translation-indicator__text">
+      {{ $t(label) }}
+    </p>
+  </span>
+</template>
+<script>
+
+export default {
+  name: 'AposTranslationIndicator',
+  props: {
+    label: {
+      type: String,
+      default: null
+    },
+    size: {
+      type: Number,
+      default: 16
+    }
+  }
+};
+
+</script>
+
+<style lang="scss">
+$border: #8EFF92;
+$color: #035204;
+$background: #F7FEF4;
+
+.apos-translation-indicator {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px;
+  border: 1px solid $border;
+  border-radius: 6px;
+  color: $color;
+  background-color: $background;
+}
+
+.apos-translation-indicator__text {
+  @include type-label;
+
+  margin: 0 0 0 4px;
+  color: $color;
+  font-size: var(--a-type-tiny);
+}
+
+#svg-path {
+  fill: url(#apos-translation-gradient);
+}
+
+.stop1 {
+  stop-color: $border;
+}
+.stop2 {
+  stop-color: $color;
+}
+</style>

package/modules/@apostrophecms/ui/ui/apos/components/AposAvatar.vue

@@ -2,7 +2,8 @@
 <template>
   <div
     class="apos-avatar"
-    :style="style" :alt="alt"
+    :style="style"
+    :alt="alt"
   >
     <span>{{ initials }}</span>
   </div>

package/modules/@apostrophecms/ui/ui/apos/components/AposButton.vue

@@ -6,8 +6,9 @@
     :data-apos-test="actionTestLabel"
   >
     <component
+      v-bind="attrs"
       :is="href ? 'a' : 'button'"
-      v-on="href ? {} : {click: click}"
+      :id="attrs.id ? attrs.id : id"
       :href="href.length ? href : false"
       class="apos-button"
       :class="modifierClass"
@@ -15,12 +16,11 @@
       :disabled="isDisabled"
       :type="buttonType"
       :role="role"
-      :id="attrs.id ? attrs.id : id"
       :style="{color: textColor}"
-      v-bind="attrs"
+      v-on="href ? {} : {click: click}"
     >
       <transition name="fade">
-        <AposSpinner :color="spinnerColor" v-if="busy" />
+        <AposSpinner v-if="busy" :color="spinnerColor" />
       </transition>
       <span
         v-if="colorStyle"

package/modules/@apostrophecms/ui/ui/apos/components/AposButtonGroup.vue

@@ -52,7 +52,7 @@ export default {
     display: inline-flex;
   }
 
-  .apos-button-group ::v-deep .apos-button {
+  .apos-button-group :deep(.apos-button) {
     background-color: var(--a-background-primary);
     border: none;
     &:hover {
@@ -81,13 +81,13 @@ export default {
   // group-specific style overrides
 
   // transform weirds this out
-  .apos-button-group ::v-deep .apos-button:hover,
-  .apos-button-group ::v-deep .apos-button:focus {
+  .apos-button-group :deep(.apos-button:hover,)
+  .apos-button-group :deep(.apos-button:focus) {
     transform: none;
   }
 
   // border throws off bounding shell
-  .apos-button-group ::v-deep .apos-button:focus {
+  .apos-button-group :deep(.apos-button:focus) {
     border: none;
   }
 
@@ -97,7 +97,7 @@ export default {
       background-color: var(--a-background-inverted);
       color: var(--a-text-inverted);
     }
-    & ::v-deep .apos-button {
+    &:deep(.apos-button) {
       border: none;
       background-color: var(--a-background-inverted);
       color: var(--a-text-inverted);
@@ -116,7 +116,7 @@ export default {
       border: 1px solid var(--a-primary-dark-10);
       color: var(--a-primary-dark-10);
     }
-    & ::v-deep .apos-button {
+    &:deep(.apos-button) {
       background-color: var(--a-background-primary);
       color: var(--a-primary-dark-10);
       &:hover {

package/modules/@apostrophecms/ui/ui/apos/components/AposButtonSplit.vue

@@ -6,32 +6,34 @@
       :label="label"
       :disabled="disabled"
       :tooltip="tooltip"
-      @click="$emit('click', action)"
+      @click="emit('click', action)"
     />
     <AposContextMenu
+      ref="contextMenu"
       class="apos-button-split__menu"
       :menu="menu"
       :button="contextMenuButton"
       :disabled="disabled"
       menu-offset="1, 10"
       menu-placement="bottom-end"
-      ref="contextMenu"
       @open="menuOpen"
       @close="menuClose"
     >
       <dl
-        class="apos-button-split__menu__dialog" role="menu"
+        class="apos-button-split__menu__dialog"
+        role="menu"
         :aria-label="menuLabel"
       >
         <button
-          v-for="item in menu" :key="item.action"
+          v-for="item in menu"
+          :key="item.action"
+          ref="choices"
           class="apos-button-split__menu__dialog-item"
           :class="{ 'apos-is-selected': item.action === action }"
-          @click="selectionHandler(item.action)"
           :aria-checked="item.action === action ? 'true' : 'false'"
           role="menuitemradio"
           :value="item.action"
-          ref="choices"
+          @click="selectionHandler(item.action)"
           @keydown="cycleElementsToFocus"
         >
           <AposIndicator
@@ -53,111 +55,117 @@
   </div>
 </template>
 
-<script>
-import AposFocusMixin from 'Modules/@apostrophecms/modal/mixins/AposFocusMixin';
-
-export default {
-  name: 'AposButtonSplit',
-  mixins: [
-    AposFocusMixin
-  ],
-  props: {
-    menu: {
-      type: Array,
-      required: true
-    },
-    menuLabel: {
-      type: String,
-      required: true
-    },
-    type: {
-      type: String,
-      default: 'primary'
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    tooltip: {
-      type: [ String, Object ],
-      default: null
-    },
-    selected: {
-      // corresponds to a menu item action
-      type: String,
-      default: null
-    }
+<script setup>
+import {
+  ref, computed, watch, nextTick
+} from 'vue';
+import { useAposFocus } from 'Modules/@apostrophecms/modal/composables/AposFocus';
+
+const {
+  elementsToFocus,
+  cycleElementsToFocus,
+  focusElement,
+  focuslastmodalfocusedelement
+} = useAposFocus();
+
+const props = defineProps({
+  menu: {
+    type: Array,
+    required: true
   },
-  emits: [ 'click' ],
-  data() {
-    return {
-      label: null,
-      action: null,
-      button: {
-        type: this.type,
-        modifiers: [ 'no-motion' ]
-      },
-      contextMenuButton: {
-        iconOnly: true,
-        icon: 'chevron-down-icon',
-        modifiers: [ 'no-motion' ],
-        type: this.type
-      }
-    };
+  menuLabel: {
+    type: String,
+    required: true
   },
-  computed: {
-    modifiers() {
-      const classes = [];
-      classes.push(`apos-button-split--type-${this.button.type}`);
-      return classes;
-    }
+  type: {
+    type: String,
+    default: 'primary'
   },
-  watch: {
-    menu() {
-      this.initialize();
-    }
+  disabled: {
+    type: Boolean,
+    default: false
   },
-  mounted() {
-    this.initialize();
+  tooltip: {
+    type: [ String, Object ],
+    default: null
   },
-  methods: {
-    // sets the label and emitted action of the button
-    setButton(action) {
-      this.action = action;
-      this.label = this.menu.find(i => i.action === action).label;
-    },
-    selectionHandler(action) {
-      this.setButton(action);
-      this.$refs.contextMenu.hide();
-    },
-    initialize() {
-      let initial = this.menu[0].action || null;
-      if (this.selected && this.menu.find(i => i.action === this.selected)) {
-        initial = this.selected;
-      } else if (this.menu.find(i => i.def)) {
-        initial = this.menu.find(i => i.def).action;
-      }
-      this.setButton(initial);
-    },
-    trapFocus() {
-      const selectedElementIndex = this.menu.findIndex(i => i.action === this.action) || 0;
-
-      // use map to keep items order:
-      this.elementsToFocus = this.menu.map(
-        i => this.$refs.choices.find(choice => choice.value === i.action)
-      );
-
-      this.focusElement(this.elementsToFocus[selectedElementIndex]);
-    },
-    menuOpen() {
-      // TODO: find another way to wait for elements to be visible
-      setTimeout(this.trapFocus, 200);
-    },
-    menuClose() {
-      this.focusLastModalFocusedElement();
-    }
+  selected: {
+    // corresponds to a menu item action
+    type: String,
+    default: null
   }
-};
+});
+
+const emit = defineEmits([ 'click' ]);
+
+const label = ref(null);
+const action = ref(null);
+const button = ref({
+  type: props.type,
+  modifiers: [ 'no-motion' ]
+});
+const contextMenu = ref();
+const choices = ref([]);
+const contextMenuButton = ref({
+  iconOnly: true,
+  icon: 'chevron-down-icon',
+  modifiers: [ 'no-motion' ],
+  type: props.type
+});
+
+const modifiers = computed(() => {
+  const classes = [];
+  classes.push(`apos-button-split--type-${button.value.type}`);
+  return classes;
+});
+
+watch(() => props.menu, () => {
+  initialize();
+}, { immediate: true });
+
+// sets the label and emitted action of the button
+function setButton(btnAction) {
+  action.value = btnAction;
+  label.value = props.menu.find(i => i.action === btnAction).label;
+}
+
+function selectionHandler(btnAction) {
+  setButton(btnAction);
+  contextMenu.value.hide();
+}
+
+function initialize() {
+  let initial = props.menu[0].action || null;
+  if (props.selected && props.menu.find(i => i.action === props.selected)) {
+    initial = props.selected;
+  } else if (props.menu.find(i => i.def)) {
+    initial = props.menu.find(i => i.def).action;
+  }
+
+  setButton(initial);
+}
+
+function trapFocus() {
+  const selectedElementIndex = props.menu.findIndex(i => i.action === action.value) || 0;
+
+  // use map to keep items order:
+  elementsToFocus.value = props.menu.map(
+    ({ action }) => choices.value.find(choice => {
+      return choice.value === action;
+    })
+  );
+
+  focusElement(elementsToFocus.value[selectedElementIndex]);
+}
+function menuOpen() {
+  nextTick(() => {
+    trapFocus();
+  });
+}
+
+function menuClose() {
+  focuslastmodalfocusedelement();
+}
 </script>
 <style lang="scss" scoped>
   .apos-button-split {
@@ -208,7 +216,7 @@ export default {
     font-size: var(--a-type-base);
   }
 
-  .apos-button-split__button ::v-deep .apos-button {
+  .apos-button-split__button :deep(.apos-button) {
     padding-right: $spacing-quadruple + $spacing-base;
     margin-top: 0;
     margin-bottom: 0;
@@ -219,14 +227,13 @@ export default {
     top: 0;
     right: 0;
     height: 100%;
-    ::v-deep {
-      .v-popover,
-      .trigger,
-      .apos-button__wrapper {
-        height: 100%;
-      }
+
+    :deep(.apos-popover__btn),
+    :deep(.trigger),
+    :deep(.apos-button__wrapper) {
+      height: 100%;
     }
-    ::v-deep .apos-button {
+    :deep(.apos-button) {
       display: flex;
       box-sizing: border-box;
       height: 100%;

package/modules/@apostrophecms/ui/ui/apos/components/AposCellButton.vue

@@ -1,6 +1,7 @@
 <template>
   <button
-    class="apos-table__cell-field" type="button"
+    class="apos-table__cell-field"
+    type="button"
     :class="`apos-table__cell-field--${header.name}`"
   >
     {{ get(header.name) }}