wip

packages/design-system/src/directives/OcTooltip.ts

@@ -1,5 +1,3 @@
-import tippy from 'tippy.js'
-import merge from 'deepmerge'
 import __logger from '../utils/logger'
 
 export const hideOnEsc = {
@@ -48,36 +46,33 @@ export const destroy = (_tippy) => {
 }
 
 const initOrUpdate = (el, { value = {} }: any, { elm }) => {
-  if (Object.prototype.toString.call(value) !== '[object Object]') {
-    value = { content: value }
-  }
-
-  if (value.content !== 0 && !value.content) {
-    destroy(elm.tooltip)
-    elm.tooltip = null
-    return
-  }
-
-  const props = merge.all([
-    {
-      ignoreAttributes: true,
-      aria: {
-        content: null,
-        expanded: false
-      }
-    },
-    value
-  ])
-
-  if (!elm.tooltip) {
-    elm.tooltip = tippy(el, {
-      ...props,
-      plugins: [hideOnEsc, ariaHidden]
-    })
-    return
-  }
-
-  elm.tooltip.setProps(props)
+  // if (Object.prototype.toString.call(value) !== '[object Object]') {
+  //   value = { content: value }
+  // }
+  // if (value.content !== 0 && !value.content) {
+  //   console.log('elm', elm, value)
+  //   destroy(elm.tooltip)
+  //   elm.tooltip = null
+  //   return
+  // }
+  // const props = merge.all([
+  //   {
+  //     ignoreAttributes: true,
+  //     aria: {
+  //       content: null,
+  //       expanded: false
+  //     }
+  //   },
+  //   value
+  // ])
+  // if (!elm?.tooltip) {
+  //   elm.tooltip = tippy(el, {
+  //     ...props,
+  //     plugins: [hideOnEsc, ariaHidden]
+  //   })
+  //   return
+  // }
+  // elm.tooltip.setProps(props)
 }
 
 export default {

packages/web-app-files/package.json

@@ -26,7 +26,7 @@
     "uuid": "^9.0.0",
     "vue-concurrency": "4.0.0",
     "vue-gettext": "2.1.12",
-    "vue-router": "3.6.5",
+    "vue-router": "4.1.6",
     "vuex": "4.1.0",
     "web-app-files": "workspace:*",
     "web-app-search": "workspace:*",

packages/web-app-files/src/fileSideBars.ts

@@ -18,7 +18,8 @@ import { spaceRoleEditor, spaceRoleManager } from 'web-client/src/helpers/share'
 import { Panel } from '../../web-pkg/src/components/sideBar'
 
 import { Resource, User } from 'web-client'
-import Router from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
+
 
 function $gettext(msg: string): string {
   return msg

packages/web-app-files/src/router/deprecated.ts

@@ -1,4 +1,5 @@
-import VueRouter, { RouteConfig, Route, Location, RouteMeta } from 'vue-router'
+import { RouteConfig, Route, Location, RouteMeta } from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
 import { createLocationSpaces } from './spaces'
 import { createLocationShares } from './shares'
 import { createLocationCommon } from './common'
@@ -100,7 +101,7 @@ export const buildRoutes = (): RouteConfig[] =>
  * @param comparatives
  */
 export const isLocationActive = (
-  router: VueRouter,
+  router: Router,
   ...comparatives: [Location, ...Location[]]
 ): boolean => {
   const [first, ...rest] = comparatives.map((c) => {

packages/web-app-files/src/router/utils.ts

@@ -1,8 +1,9 @@
-import VueRouter, { Location } from 'vue-router'
+import { Location } from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
 import merge from 'lodash-es/merge'
 
 export interface ActiveRouteDirectorFunc<T extends string> {
-  (router: VueRouter, ...comparatives: T[]): boolean
+  (router: Router, ...comparatives: T[]): boolean
 }
 
 /**
@@ -13,7 +14,7 @@ export interface ActiveRouteDirectorFunc<T extends string> {
  * @param comparatives
  */
 export const isLocationActive = (
-  router: VueRouter,
+  router: Router,
   ...comparatives: [Location, ...Location[]]
 ): boolean => {
   const { href: currentHref } = router.resolve(router.currentRoute)
@@ -47,7 +48,7 @@ export const isLocationActive = (
 export const isLocationActiveDirector = <T extends string>(
   ...defaultComparatives: [Location, ...Location[]]
 ): ActiveRouteDirectorFunc<T> => {
-  return (router: VueRouter, ...comparatives: T[]): boolean => {
+  return (router: Router, ...comparatives: T[]): boolean => {
     if (!comparatives.length) {
       return isLocationActive(router, ...defaultComparatives)
     }

packages/web-app-files/src/search/sdk/index.ts

@@ -3,7 +3,7 @@ import Preview from './preview'
 import List from './list'
 import { EventBus } from 'web-pkg/src/services/eventBus'
 import { Store } from 'vuex'
-import VueRouter from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
 
 function $gettext(msg) {
   return msg
@@ -14,9 +14,9 @@ export default class Provider extends EventBus implements SearchProvider {
   public readonly previewSearch: SearchPreview
   public readonly listSearch: SearchList
   private readonly store: Store<any>
-  private readonly router: VueRouter
+  private readonly router: Router
 
-  constructor(store: Store<any>, router: VueRouter) {
+  constructor(store: Store<any>, router: Router) {
     super()
 
     this.id = 'files.sdk'

packages/web-app-files/src/search/sdk/preview.ts

@@ -4,7 +4,7 @@ import { clientService } from 'web-pkg/src/services'
 import { buildResource } from 'web-client/src/helpers'
 import { Cache } from 'web-pkg/src/helpers/cache'
 import { Component } from 'vue'
-import VueRouter from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
 import { DavProperties } from 'web-client/src/webdav/constants'
 import { Store } from 'vuex'
 
@@ -13,10 +13,10 @@ export const previewSearchLimit = 8
 export default class Preview implements SearchPreview {
   public readonly component: Component
   private readonly cache: Cache<string, SearchResult>
-  private readonly router: VueRouter
+  private readonly router: Router
   private readonly store: Store<any>
 
-  constructor(store: Store<any>, router: VueRouter) {
+  constructor(store: Store<any>, router: Router) {
     this.component = PreviewComponent
     this.router = router
     this.store = store

packages/web-app-files/tests/unit/components/Search/List.spec.ts

@@ -1,5 +1,4 @@
 import { describe } from '@jest/globals'
-// import VueRouter from 'vue-router'
 // import List from 'web-app-files/src/components/Search/List.vue'
 //
 // const stubs = {
@@ -98,7 +97,6 @@ describe('List component', () => {
 //       }
 //     },
 //     store: createStore(files),
-//     router: new VueRouter(),
 //     stubs,
 //     mock: {
 //       webdav: {

packages/web-app-files/tests/unit/router/utils.spec.ts

@@ -3,18 +3,19 @@ import {
   isLocationActiveDirector,
   createLocation
 } from '../../../src/router/utils'
-import VueRouter from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
+import { mock } from 'jest-mock-extended'
 
 describe('utils', () => {
   describe('isLocationActive', () => {
     it('returns true if one location is active', () => {
-      const fakeRouter = {
+      const fakeRouter = mock<Router>({
         currentRoute: { name: 'foo' },
         resolve: (r) => ({ href: r.name })
-      }
+      })
 
-      expect(isLocationActive(fakeRouter as VueRouter, { name: 'foo' })).toBe(true)
-      expect(isLocationActive(fakeRouter as VueRouter, { name: 'foo' }, { name: 'bar' })).toBe(true)
+      expect(isLocationActive(fakeRouter, { name: 'foo' })).toBe(true)
+      expect(isLocationActive(fakeRouter, { name: 'foo' }, { name: 'bar' })).toBe(true)
     })
 
     it('returns false if all locations inactive', () => {
@@ -23,41 +24,41 @@ describe('utils', () => {
         resolve: (r) => ({ href: r.name })
       }
 
-      expect(isLocationActive(fakeRouter as VueRouter, { name: 'bar' })).toBe(false)
-      expect(isLocationActive(fakeRouter as VueRouter, { name: 'bar' }, { name: 'baz' })).toBe(
+      expect(isLocationActive(fakeRouter, { name: 'bar' })).toBe(false)
+      expect(isLocationActive(fakeRouter, { name: 'bar' }, { name: 'baz' })).toBe(
         false
       )
     })
   })
 
   describe('isLocationActiveDirector', () => {
     test('director can be created and be used to check active locations', () => {
-      const fakeRouter = {
+      const fakeRouter = mock<Router>({
         currentRoute: { name: 'unknown' },
         resolve: (r) => ({ href: r.name })
-      }
+      })
 
       const isFilesLocationActive = isLocationActiveDirector(
         { name: 'foo' },
         { name: 'bar' },
         { name: 'baz' }
       )
-      expect(isFilesLocationActive(fakeRouter as VueRouter)).toBe(false)
+      expect(isFilesLocationActive(fakeRouter)).toBe(false)
 
       fakeRouter.currentRoute.name = 'bar'
 
-      expect(isFilesLocationActive(fakeRouter as VueRouter)).toBe(true)
-      expect(isFilesLocationActive(fakeRouter as VueRouter, 'foo', 'bar')).toBe(true)
+      expect(isFilesLocationActive(fakeRouter)).toBe(true)
+      expect(isFilesLocationActive(fakeRouter, 'foo', 'bar')).toBe(true)
     })
 
     test('director closure only allows to check known locations and throws if unknown', () => {
-      const fakeRouter = {
+      const fakeRouter = mock<Router>({
         currentRoute: { name: 'baz' },
         resolve: (r) => ({ href: r.name })
-      }
+      })
 
       const isFilesLocationActive = isLocationActiveDirector({ name: 'foo' }, { name: 'bar' })
-      expect(() => isFilesLocationActive(fakeRouter as VueRouter, 'unknown')).toThrow()
+      expect(() => isFilesLocationActive(fakeRouter, 'unknown')).toThrow()
     })
   })
 

packages/web-app-files/tests/unit/search/sdk.spec.ts

@@ -1,8 +1,8 @@
 import { SDKSearch } from '../../../src/search'
 import { clientService } from 'web-pkg/src/services'
 import { Store } from 'vuex'
-import VueRouter from 'vue-router'
-import { mockDeep } from 'jest-mock-extended'
+import { Router } from 'web-pkg/src/types/router'
+import { mock, mockDeep } from 'jest-mock-extended'
 
 const searchMock = jest.fn()
 jest.spyOn(clientService, 'owncloudSdk', 'get').mockImplementation(
@@ -35,7 +35,7 @@ const storeWithoutFileSearch = mockDeep<Store<any>>({
 
 describe('SDKProvider', () => {
   it('is only available if announced via capabilities', () => {
-    const search = new SDKSearch(storeWithoutFileSearch, {} as unknown as VueRouter)
+    const search = new SDKSearch(storeWithoutFileSearch, mock<Router>())
     expect(search.available).toBe(false)
   })
 
@@ -48,14 +48,14 @@ describe('SDKProvider', () => {
       ].forEach((v) => {
         const search = new SDKSearch(store, {
           currentRoute: { name: v.route }
-        } as unknown as VueRouter)
+        } as unknown as Router)
 
         expect(!!search.previewSearch.available).toBe(!!v.available)
       })
     })
 
     it('can search', async () => {
-      const search = new SDKSearch(store, jest.fn() as unknown as VueRouter)
+      const search = new SDKSearch(store, mock<Router>())
       const files = [
         { id: 'foo', name: 'foo' },
         { id: 'bar', name: 'bar' },
@@ -75,7 +75,7 @@ describe('SDKProvider', () => {
   })
   describe('SDKProvider listSearch', () => {
     it('can search', async () => {
-      const search = new SDKSearch(store, jest.fn() as unknown as VueRouter)
+      const search = new SDKSearch(store, mock<Router>())
       const files = [
         { id: 'foo', name: 'foo' },
         { id: 'bar', name: 'bar' },

packages/web-pkg/package.json

@@ -11,7 +11,7 @@
     "luxon": "^2.4.0",
     "qs": "^6.10.3",
     "uuid": "^9.0.0",
-    "vue-router": "3.6.5",
+    "vue-router": "4.1.6",
     "vuex": "4.1.0",
     "web-client": "npm:@ownclouders/web-client",
     "web-pkg": "npm:@ownclouders/web-pkg"

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

@@ -1,5 +1,6 @@
 import { unref } from 'vue'
-import VueRouter, { Location } from 'vue-router'
+import { Location } from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
 
 import { MaybeRef } from '../../utils'
 import { FileContext } from './types'
@@ -8,7 +9,7 @@ import { Resource } from 'web-client'
 import { useFileRouteReplace } from '../router/useFileRouteReplace'
 
 interface AppNavigationOptions {
-  router: VueRouter
+  router: Router
   currentFileContext: MaybeRef<FileContext>
 }
 

packages/web-pkg/src/composables/router/useActiveApp.ts

@@ -1,6 +1,5 @@
 import { computed, ComputedRef, unref } from 'vue'
-import { useRoute } from './useRoute'
-import { Route } from 'vue-router'
+import { useRoute } from 'vue-router'
 
 export const activeApp = (route: Route): string => {
   return route.path.split('/')[1]

packages/web-pkg/src/composables/router/useRouteMeta.ts

@@ -1,7 +1,7 @@
 import { computed, Ref, unref } from 'vue'
-import { useRoute } from './useRoute'
+import { useRoute } from 'vue-router'
 
 export const useRouteMeta = (key: string, defaultValue?: string): Ref<string> => {
   const route = useRoute()
-  return computed(() => unref(route).meta[key] || defaultValue)
+  return computed(() => unref(route).meta[key] as string || defaultValue)
 }

packages/web-pkg/src/composables/router/useRouteParam.ts

@@ -1,4 +1,4 @@
-import { customRef, Ref } from 'vue'
+import { customRef, Ref, unref } from 'vue'
 import { useRouter } from './useRouter'
 import { ParamValue } from './types'
 
@@ -11,15 +11,16 @@ export const useRouteParam = (name: string, defaultValue?: ParamValue): Ref<Para
     return {
       get() {
         track()
-        return router.currentRoute.params[name] || defaultValue
+        const value = unref(router.currentRoute).params[name] || defaultValue
+        return Array.isArray(value) ? value.join('/') : value
       },
       async set(v) {
-        if (router.currentRoute.params[name] === v) {
+        if (unref(router.currentRoute).params[name] === v) {
           return
         }
         await router.replace({
           params: {
-            ...router.currentRoute.params,
+            ...unref(router.currentRoute).params,
             [name]: v
           }
         })