Get rid of our useTranslations composable

changelog/unreleased/change-update-vue

@@ -15,3 +15,4 @@ https://github.com/owncloud/web/pull/8198
 https://github.com/owncloud/web/pull/8213
 https://github.com/owncloud/web/pull/8214
 https://github.com/owncloud/web/pull/8221
+https://github.com/owncloud/web/pull/8257

packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue

@@ -136,10 +136,10 @@ import {
 } from 'web-pkg/src/helpers'
 import { computed, defineComponent, nextTick, onMounted, PropType, ref, unref, watch } from 'vue'
 import { extractDomSelector, SpaceResource } from 'web-client/src/helpers'
-import { useTranslations } from 'web-pkg/src/composables'
 import { spaceRoleEditor, spaceRoleManager, spaceRoleViewer } from 'web-client/src/helpers/share'
 import Mark from 'mark.js'
 import Fuse from 'fuse.js'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'SpacesList',
@@ -159,11 +159,7 @@ export default defineComponent({
   },
   emits: ['toggleSelectSpace', 'toggleSelectAllSpaces', 'toggleUnSelectAllSpaces'],
   setup: function (props, { emit }) {
-    const {
-      $gettext,
-      interpolate: $gettextInterpolate,
-      current: currentLanguage
-    } = useTranslations()
+    const { $gettext, interpolate: $gettextInterpolate, current: currentLanguage } = useGettext()
     const contextMenuButton = ref(undefined)
     const sortBy = ref('name')
     const sortDir = ref('asc')

packages/web-app-admin-settings/src/views/Spaces.vue

@@ -63,7 +63,7 @@
 
 <script lang="ts">
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
-import { useAccessToken, useGraphClient, useStore, useTranslations } from 'web-pkg/src/composables'
+import { useAccessToken, useGraphClient, useStore } from 'web-pkg/src/composables'
 import { computed, defineComponent, onBeforeUnmount, onMounted, ref, unref } from 'vue'
 import { useTask } from 'vue-concurrency'
 import { eventBus } from 'web-pkg/src/services/eventBus'
@@ -78,6 +78,7 @@ import ContextActions from '../components/Spaces/ContextActions.vue'
 import MembersPanel from '../components/Spaces/SideBar/MembersPanel.vue'
 import SpaceInfo from 'web-pkg/src/components/sideBar/Spaces/SpaceInfo.vue'
 import { useSideBar } from 'web-pkg/src/composables/sideBar'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'SpacesView',
@@ -93,7 +94,7 @@ export default defineComponent({
     const accessToken = useAccessToken({ store })
     const spaces = ref([])
     const { graphClient } = useGraphClient()
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
 
     const loadResourcesEventToken = ref(null)
     const template = ref(null)

packages/web-app-files/src/components/FilesList/ResourceTiles.vue

@@ -25,10 +25,11 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
+import { useGettext } from 'vue3-gettext'
 import { createLocationSpaces } from 'web-app-files/src/router'
 import { Resource, SpaceResource } from 'web-client'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
-import { useStore, useTranslations } from 'web-pkg/src/composables'
+import { useStore } from 'web-pkg/src/composables'
 
 // Constants should match what is being used in OcTable/ResourceTable
 // Alignment regarding naming would be an API-breaking change and can
@@ -48,7 +49,7 @@ export default defineComponent({
   },
   setup() {
     const store = useStore()
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
 
     const getRoute = (resource) => {
       if (resource.type === 'space') {

packages/web-app-files/src/components/SideBar/Details/FileDetails.vue

@@ -171,7 +171,6 @@ import {
   useClientService,
   usePublicLinkContext,
   useStore,
-  useTranslations,
   useUserContext
 } from 'web-pkg/src/composables'
 import { getIndicators } from '../../../helpers/statusIndicators'
@@ -185,12 +184,13 @@ import { buildShareSpaceResource } from 'web-client/src/helpers'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import { useTask } from 'vue-concurrency'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'FileDetails',
   setup() {
     const store = useStore()
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
 
     const copiedDirect = ref(false)
     const copiedEos = ref(false)

packages/web-app-files/src/components/SideBar/PrivateLinkItem.vue

@@ -23,12 +23,13 @@
 import { computed, defineComponent, inject, unref } from 'vue'
 import { useClipboard } from '@vueuse/core'
 import { Resource } from 'web-client'
-import { useStore, useTranslations } from 'web-pkg/src'
+import { useStore } from 'web-pkg/src'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'PrivateLinkItem',
   setup() {
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
     const store = useStore<any>()
     const displayedItem = inject<Resource>('displayedItem')
     const privateLink = computed(() => unref(displayedItem))

packages/web-app-files/src/components/SideBar/Shares/Links/NameAndCopy.vue

@@ -29,8 +29,9 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { useStore, useTranslations } from 'web-pkg/src/composables'
+import { useStore } from 'web-pkg/src/composables'
 import { useClipboard } from '@vueuse/core'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'NameAndCopy',
@@ -41,7 +42,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { $gettext, interpolate: $gettextInterpolate } = useTranslations()
+    const { $gettext, interpolate: $gettextInterpolate } = useGettext()
     const store = useStore<any>()
 
     const {

packages/web-app-files/src/components/Spaces/SpaceHeader.vue

@@ -79,12 +79,7 @@ import {
 } from 'vue'
 import { SpaceResource } from 'web-client/src/helpers'
 import { loadPreview } from 'web-pkg/src/helpers'
-import {
-  useAccessToken,
-  useClientService,
-  useStore,
-  useTranslations
-} from 'web-pkg/src/composables'
+import { useAccessToken, useClientService, useStore } from 'web-pkg/src/composables'
 import { ImageDimension } from 'web-pkg/src/constants'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { VisibilityObserver } from 'web-pkg/src/observer'
@@ -93,6 +88,7 @@ import sanitizeHtml from 'sanitize-html'
 import SpaceContextActions from './SpaceContextActions.vue'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
+import { useGettext } from 'vue3-gettext'
 
 const visibilityObserver = new VisibilityObserver()
 const markdownContainerCollapsedClass = 'collapsed'
@@ -110,7 +106,7 @@ export default defineComponent({
     sideBarOpen: { type: Boolean, default: false }
   },
   setup(props) {
-    const { $gettext, $ngettext, interpolate: $gettextInterpolate } = useTranslations()
+    const { $gettext, $ngettext, interpolate: $gettextInterpolate } = useGettext()
     const { getFileContents, getFileInfo } = useClientService().webdav
     const store = useStore()
     const userId = computed(() => store.getters.user?.id)

packages/web-app-files/src/helpers/resources.ts

@@ -1,7 +1,6 @@
 import orderBy from 'lodash-es/orderBy'
 import path, { basename, join } from 'path'
 import { DateTime } from 'luxon'
-import { getIndicators } from './statusIndicators'
 import { DavProperty } from 'web-client/src/webdav/constants'
 import {
   LinkShareRoles,

packages/web-app-files/src/views/spaces/GenericSpace.vue

@@ -127,7 +127,7 @@ import { useResourcesViewDefaults } from '../../composables'
 import { computed, defineComponent, PropType, unref } from 'vue'
 import { ResourceTransfer, TransferType } from '../../helpers/resource'
 import { Resource } from 'web-client'
-import { useRoute, useTranslations } from 'web-pkg/src/composables'
+import { useRoute } from 'web-pkg/src/composables'
 import { Location } from 'vue-router'
 import {
   isPersonalSpaceResource,
@@ -142,6 +142,7 @@ import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import omit from 'lodash-es/omit'
 import { useDocumentTitle } from 'web-pkg/src/composables/appDefaults/useDocumentTitle'
 import { basename } from 'path'
+import { useGettext } from 'vue3-gettext'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -208,7 +209,7 @@ export default defineComponent({
     })
     useDocumentTitle({ titleSegments })
 
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
     const route = useRoute()
     const breadcrumbs = computed(() => {
       const space = props.space

packages/web-app-files/src/views/spaces/GenericTrash.vue

@@ -77,14 +77,11 @@ import { eventBus } from 'web-pkg/src/services/eventBus'
 import { useResourcesViewDefaults } from '../../composables'
 import { computed, defineComponent, PropType, unref } from 'vue'
 import { Resource } from 'web-client'
-import {
-  useCapabilityShareJailEnabled,
-  useCapabilitySpacesEnabled,
-  useTranslations
-} from 'web-pkg/src/composables'
+import { useCapabilityShareJailEnabled, useCapabilitySpacesEnabled } from 'web-pkg/src/composables'
 import { createLocationTrash } from '../../router'
 import { isProjectSpaceResource, SpaceResource } from 'web-client/src/helpers'
 import { useDocumentTitle } from 'web-pkg/src/composables/appDefaults/useDocumentTitle'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'GenericTrash',
@@ -115,7 +112,7 @@ export default defineComponent({
   },
 
   setup(props) {
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
     const noContentMessage = computed(() => {
       return props.space.driveType === 'personal'
         ? $gettext('You have no deleted files')

packages/web-app-text-editor/src/App.vue

@@ -48,10 +48,11 @@ import { useTask } from 'vue-concurrency'
 import { computed, defineComponent, onMounted, onBeforeUnmount, ref, unref, Ref, watch } from 'vue'
 import { mapActions } from 'vuex'
 import { DavPermission, DavProperty } from 'web-client/src/webdav/constants'
-import { useAppDefaults, useStore, useTranslations } from 'web-pkg/src/composables'
+import { useAppDefaults, useStore } from 'web-pkg/src/composables'
 import AppTopBar from 'web-pkg/src/components/AppTopBar.vue'
 import { Resource } from 'web-client'
 import { isProjectSpaceResource } from 'web-client/src/helpers'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'TextEditor',
@@ -100,7 +101,7 @@ export default defineComponent({
     const isReadOnly = ref(true)
     const resource: Ref<Resource> = ref()
     const store = useStore()
-    const { $gettext, interpolate: $gettextInterpolate } = useTranslations()
+    const { $gettext, interpolate: $gettextInterpolate } = useGettext()
 
     const errorPopup = (error) => {
       store.dispatch('showMessage', {

packages/web-pkg/src/composables/appDefaults/useAppDocumentTitle.ts

@@ -5,7 +5,8 @@ import { useAppMeta } from './useAppMeta'
 import { useDocumentTitle } from './useDocumentTitle'
 import { Store } from 'vuex'
 import { RouteLocationNormalizedLoaded } from 'vue-router'
-import { MaybeRef, useTranslations } from 'web-pkg'
+import { MaybeRef } from 'web-pkg'
+import { useGettext } from 'vue3-gettext'
 
 interface AppDocumentTitleOptions {
   store: Store<any>
@@ -23,7 +24,7 @@ export function useAppDocumentTitle({
   currentRoute
 }: AppDocumentTitleOptions): void {
   const appMeta = useAppMeta({ applicationId, store })
-  const { $gettext } = useTranslations()
+  const { $gettext } = useGettext()
 
   const titleSegments = computed(() => {
     const baseTitle =

packages/web-pkg/src/composables/index.ts

@@ -8,4 +8,3 @@ export * from './localStorage'
 export * from './reactivity'
 export * from './router'
 export * from './store'
-export * from './translations'

packages/web-runtime/src/layouts/Plain.vue

@@ -10,13 +10,14 @@
 
 <script lang="ts">
 import { computed, defineComponent, unref } from 'vue'
-import { useRouteMeta, useStore, useTranslations } from 'web-pkg'
+import { useRouteMeta, useStore } from 'web-pkg'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'PlainLayout',
   setup() {
     const store = useStore()
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
     const title = useRouteMeta('title')
 
     const pageTitle = computed(() => {

packages/web-runtime/src/pages/accessDenied.vue

@@ -27,13 +27,14 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import { useStore, useTranslations } from 'web-pkg'
+import { useStore } from 'web-pkg'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'AccessDeniedPage',
   setup() {
     const store = useStore()
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
 
     const logoImg = computed(() => {
       return store.getters.configuration.currentTheme.logo.login

packages/web-runtime/src/pages/logout.vue

@@ -14,15 +14,16 @@
 </template>
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import { useRouter, useStore, useTranslations } from 'web-pkg'
+import { useRouter, useStore } from 'web-pkg'
 import { authService } from 'web-runtime/src/services/auth'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'LogoutPage',
   setup() {
     const router = useRouter()
     const store = useStore()
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
 
     authService.logoutUser().then(() => {
       router.push({ name: 'login' })

packages/web-runtime/src/pages/resolvePrivateLink.vue

@@ -49,7 +49,6 @@
 import {
   useRouteParam,
   useStore,
-  useTranslations,
   useRouter,
   queryItemAsString,
   useCapabilitySpacesEnabled,
@@ -72,14 +71,15 @@ import { urlJoin } from 'web-client/src/utils'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { RouteLocationRaw } from 'vue-router'
 import { useLoadFileInfoById } from '../composables/fileInfo'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'ResolvePrivateLink',
   setup() {
     const store = useStore()
     const router = useRouter()
     const id = useRouteParam('fileId')
-    const { $gettext, interpolate: $gettextInterpolate } = useTranslations()
+    const { $gettext, interpolate: $gettextInterpolate } = useGettext()
     const hasSpaces = useCapabilitySpacesEnabled(store)
     const resource: Ref<Resource> = ref()
     const sharedParentResource: Ref<Resource> = ref()

packages/web-runtime/src/pages/resolvePublicLink.vue

@@ -69,7 +69,6 @@ import {
   useRouteQuery,
   useRouter,
   useStore,
-  useTranslations,
   useUserContext
 } from 'web-pkg/src/composables'
 import { useTask } from 'vue-concurrency'
@@ -82,6 +81,7 @@ import {
 } from 'web-client/src/helpers'
 import isEmpty from 'lodash-es/isEmpty'
 import { useLoadTokenInfo } from '../composables/tokenInfo'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'ResolvePublicLink',
@@ -224,7 +224,7 @@ export default defineComponent({
       }
     })
 
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
     const footerSlogan = computed(() => store.getters.configuration.currentTheme.general.slogan)
     const passwordFieldLabel = computed(() => {
       return $gettext('Enter password for public link')