owncloud · kulmann · Jan 9, 2023 · Jan 5, 2023 · Jan 9, 2023 · Jan 5, 2023
diff --git a/.npmrc b/.npmrc
@@ -6,6 +6,8 @@ public-hoist-pattern[]=owncloud-sdk
 
 # esm modules (so we can easily transpile them via jest config)
 public-hoist-pattern[]=lodash-es
+public-hoist-pattern[]=mark.js
+public-hoist-pattern[]=fuse.js
 
 # @vue/component-compiler-utils
 hoist-pattern[]=sass

diff --git a/package.json b/package.json
@@ -5,18 +5,18 @@
   "license": "AGPL-3.0",
   "author": "ownCloud GmbH <devops@owncloud.com>",
   "scripts": {
-    "build": "pnpm build:tokens && pnpm vite build",
+    "build": "vue-demi-fix && pnpm build:tokens && pnpm vite build",
     "build:w": "pnpm build --watch",
     "build:tokens": "pnpm --filter @ownclouders/design-system tokens",
     "depcheck": "depcheck",
     "lint": "eslint vite.config.ts '{packages,tests}/**/*.{js,ts,vue}' --color",
     "serve": "SERVER=true pnpm build:w",
     "test:e2e:cucumber": "NODE_TLS_REJECT_UNAUTHORIZED=0 cucumber-js --profile=e2e -f json:tests/e2e/cucumber/report/cucumber_report.json",
-    "test:unit": "NODE_OPTIONS=--unhandled-rejections=throw jest --config ./tests/unit/config/jest.config.js",
+    "test:unit": "NODE_OPTIONS=--unhandled-rejections=throw jest --config ./tests/unit/config/jest.config.ts",
     "licenses:check": "license-checker-rseidelsohn --summary --relativeLicensePath --onlyAllow 'Python-2.0;Apache*;Apache License, Version 2.0;Apache-2.0;Apache 2.0;Artistic-2.0;BSD;BSD-3-Clause;CC-BY-3.0;CC-BY-4.0;CC0-1.0;ISC;MIT;MPL-2.0;Public Domain;Unicode-TOU;Unlicense;WTFPL' --excludePackages '@ownclouders/babel-preset;@ownclouders/eslint-config;@ownclouders/prettier-config;@ownclouders/tsconfig;@ownclouders/web-client;@ownclouders/web-pkg,draw-io;external;web-app-files;text-editor;preview;@ownclouders/design-system;pdf-viewer;web-app-search;admin-settings;web-runtime'",
     "licenses:csv": "license-checker-rseidelsohn --relativeLicensePath --csv --out ./third-party-licenses/third-party-licenses.csv",
     "licenses:save": "license-checker-rseidelsohn --relativeLicensePath --out /dev/null --files ./third-party-licenses/third-party-licenses",
-    "vite": "pnpm vite:ocis",
+    "vite": "vue-demi-fix && pnpm vite:ocis",
     "vite:ocis": "vite",
     "vite:oc10": "OCIS=false vite"
   },
@@ -31,16 +31,21 @@
     "not OperaMobile > 0"
   ],
   "dependencies": {
+    "@vue/compat": "3.2.45",
+    "@vue/compiler-dom": "^3.2.45",
+    "@vue/compiler-sfc": "3.2.45",
+    "@vue/runtime-dom": "^3.2.45",
     "keycode": "^2.2.1",
     "rollup-plugin-gzip": "^3.1.0",
     "vite-plugin-static-copy": "^0.12.0",
     "vite-plugin-treat-umd-as-commonjs": "0.1.3",
-    "vue": "2.7.14"
+    "vue": "3.2.45"
   },
   "peerDependencies": {
     "caf": "*",
     "portal-vue": "*",
-    "uuid": "*"
+    "uuid": "*",
+    "vue-demi": "*"
   },
   "devDependencies": {
     "@babel/core": "7.20.12",
@@ -63,9 +68,9 @@
     "@types/lodash-es": "4.17.6",
     "@types/node": "16.18.11",
     "@types/node-fetch": "2.6.2",
-    "@vitejs/plugin-vue2": "2.2.0",
-    "@vue/test-utils": "1.3.3",
-    "@vue/vue2-jest": "29.2.2",
+    "@vitejs/plugin-vue": "4.0.0",
+    "@vue/test-utils": "2.2.2",
+    "@vue/vue3-jest": "29.0.0",
     "autoprefixer": "10.4.13",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "29.3.1",
@@ -139,7 +144,8 @@
     "patchedDependencies": {
       "@adobe/leonardo-contrast-colors@1.0.0-alpha.16": "patches/@adobe__leonardo-contrast-colors@1.0.0-alpha.16.patch",
       "jest-serializer-vue-tjw@3.19.0": "patches/jest-serializer-vue-tjw@3.19.0.patch",
-      "v-calendar@2.3.4": "patches/v-calendar@2.3.4.patch"
+      "vue-gettext@2.1.12": "patches/vue-gettext@2.1.12.patch",
+      "keycode@2.2.1": "patches/keycode@2.2.1.patch"
     }
   },
   "jestSerializer": {

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -50,7 +50,7 @@
     "@babel/preset-env": "^7.14.8",
     "@babel/runtime": "^7.19.4",
     "@popperjs/core": "^2.4.0",
-    "@vue/test-utils": "^1.2.0",
+    "@vue/compat": "3.2.45",
     "autoprefixer": "^10.0.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^29.0.2",
@@ -106,15 +106,15 @@
     "tippy.js": "^6.3.7",
     "typescript": "^4.3.2",
     "url-loader": "^4.1.1",
-    "v-calendar": "^2.3.4",
-    "vue": "2.7.14",
+    "v-calendar": "github:dschmidt/v-calendar#3ce6e3b8afd5491cb53ee811281d5fa8a45b044d",
     "vue-gettext": "^2.1.12",
     "vue-inline-svg": "^2.0.0",
     "vue-jest": "^3.0.4",
     "vue-loader": "^15.9.0",
-    "vue-select": "^3.12.0",
+    "vue-select": "4.0.0-beta.6",
     "vue-style-loader": "^4.1.2",
     "vue-styleguidist": "^4.44.2",
+    "vue": "3.2.45",
     "web-test-helpers": "workspace:*",
     "webfontloader": "^1.6.28",
     "webpack": "^4.41.6",
@@ -134,8 +134,8 @@
     "postcss-import": "^12.0.1",
     "postcss-url": "^9.0.0",
     "tippy.js": "^6.3.7",
-    "v-calendar": "^2.3.4",
-    "vue": "^2.7.13",
+    "v-calendar": "github:dschmidt/v-calendar#3ce6e3b8afd5491cb53ee811281d5fa8a45b044d",
+    "vue": "3.2.45",
     "vue-inline-svg": "^2.0.0",
     "vue-select": "^3.12.0",
     "web-client": "npm:@ownclouders/web-client",

diff --git a/packages/design-system/src/components/OcAccordionItem/OcAccordionItem.spec.ts b/packages/design-system/src/components/OcAccordionItem/OcAccordionItem.spec.ts
@@ -41,10 +41,9 @@ describe('OcAccordionItem', () => {
 
   describe('icon prop', () => {
     describe('when icon is not given', () => {
-      let wrapper
-      wrapper = getWrapper({})
+      const wrapper = getWrapper({})
       it('should not render any icon', () => {
-        const titleHeadingSpan = wrapper.find('.oc-accordion-title > oc-button-stub > span')
+        const titleHeadingSpan = wrapper.find('.oc-accordion-title > .oc-button > span')
         expect(titleHeadingSpan.findAll('.oc-mr-s').length).toBe(0)
       })
     })
@@ -53,7 +52,7 @@ describe('OcAccordionItem', () => {
         const wrapper = getWrapper({
           icon: 'mdi-icon'
         })
-        const titleHeadingSpan = wrapper.find('.oc-accordion-title > oc-button-stub > span')
+        const titleHeadingSpan = wrapper.find('.oc-accordion-title > .oc-button > span')
         expect(titleHeadingSpan.findAll('.oc-mr-s').length).toBe(1)
       })
     })
@@ -65,8 +64,8 @@ describe('OcAccordionItem', () => {
     it('when title button is clicked', async () => {
       const toggleExpandedSpy = jest.spyOn((OcAccordionItem as any).methods, 'toggleExpanded')
       const wrapper = getWrapper()
-      const titleButton = wrapper.find('.oc-accordion-title oc-button-stub')
-      await titleButton.vm.$emit('click')
+      const titleButton = wrapper.findComponent('.oc-accordion-title .oc-button')
+      await titleButton.trigger('click')
       expect(toggleExpandedSpy).toHaveBeenCalledTimes(1)
     })
   })
@@ -77,6 +76,11 @@ function getWrapper(props = {}) {
     props: {
       title: 'Test title',
       ...props
+    },
+    global: {
+      stubs: {
+        OcButton: false
+      }
     }
   })
 }
diff --git a/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.spec.ts b/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.spec.ts
@@ -11,6 +11,6 @@ describe('OcAvatarCount', () => {
     })
 
     expect((wrapper.element as HTMLElement).style.fontSize).toMatch('40px')
-    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.html()).toMatchSnapshot()
   })
 })
diff --git a/packages/design-system/src/components/OcAvatars/OcAvatars.spec.ts b/packages/design-system/src/components/OcAvatars/OcAvatars.spec.ts
@@ -56,7 +56,7 @@ describe('OcAvatars', () => {
     })
 
     expect(OcTooltip.mock.calls[0][1].value).toMatch('Bob, Marie +3')
-    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('prefers avatars over links when maxDisplayed is exceeded', () => {
@@ -78,7 +78,7 @@ describe('OcAvatars', () => {
     expect(OcTooltip.mock.calls[0][1].value).toMatch(
       'Bob, Marie, John Richards Emperor of long names +2'
     )
-    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('shows avatars first and links last', () => {
@@ -99,6 +99,6 @@ describe('OcAvatars', () => {
     expect(OcTooltip.mock.calls[0][1].value).toMatch(
       'Bob, Marie, John Richards Emperor of long names, link 0, link 1'
     )
-    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.html()).toMatchSnapshot()
   })
 })
diff --git a/packages/design-system/src/components/OcAvatars/OcAvatars.vue b/packages/design-system/src/components/OcAvatars/OcAvatars.vue
@@ -37,11 +37,12 @@ import OcAvatarLink from '../OcAvatarLink/OcAvatarLink.vue'
 import OcAvatarGroup from '../OcAvatarGroup/OcAvatarGroup.vue'
 import OcAvatarFederated from '../OcAvatarFederated/OcAvatarFederated.vue'
 import OcAvatarGuest from '../OcAvatarGuest/OcAvatarGuest.vue'
+import { defineComponent } from 'vue'
 
 /**
  * Display a group of avatars
  */
-export default {
+export default defineComponent({
   name: 'OcAvatars',
   status: 'ready',
   release: '2.1.0',
@@ -156,7 +157,7 @@ export default {
       }
     }
   }
-}
+})
 </script>
 
 <style lang="scss">

diff --git a/packages/design-system/src/components/OcAvatars/__snapshots__/OcAvatars.spec.ts.snap b/packages/design-system/src/components/OcAvatars/__snapshots__/OcAvatars.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`OcAvatars displays tooltip 1`] = `
   <span aria-hidden="true" class="oc-avatars">
     <oc-avatar-stub accessiblelabel="" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30"></oc-avatar-stub>
     <oc-avatar-stub accessiblelabel="" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30"></oc-avatar-stub>
-    <!---->
+    <!--v-if-->
     <oc-avatar-count-stub count="3" size="30"></oc-avatar-count-stub>
   </span>
   <span class="oc-invisible-sr">List of users</span>
@@ -18,7 +18,7 @@ exports[`OcAvatars prefers avatars over links when maxDisplayed is exceeded 1`]
     <oc-avatar-stub accessiblelabel="" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30"></oc-avatar-stub>
     <oc-avatar-stub accessiblelabel="" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30"></oc-avatar-stub>
     <oc-avatar-stub accessiblelabel="" src="" username="John Richards Emperor of long names" width="30"></oc-avatar-stub>
-    <!---->
+    <!--v-if-->
     <oc-avatar-count-stub count="2" size="30"></oc-avatar-count-stub>
   </span>
   <span class="oc-invisible-sr">List of users</span>
@@ -31,9 +31,9 @@ exports[`OcAvatars shows avatars first and links last 1`] = `
     <oc-avatar-stub accessiblelabel="" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30"></oc-avatar-stub>
     <oc-avatar-stub accessiblelabel="" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30"></oc-avatar-stub>
     <oc-avatar-stub accessiblelabel="" src="" username="John Richards Emperor of long names" width="30"></oc-avatar-stub>
-    <ocavatarlink-stub accessiblelabel="" iconsize="small" name="link 0" width="30"></ocavatarlink-stub>
-    <ocavatarlink-stub accessiblelabel="" iconsize="small" name="link 1" width="30"></ocavatarlink-stub>
-    <!---->
+    <oc-avatar-link-stub accessiblelabel="" iconsize="small" name="link 0" width="30"></oc-avatar-link-stub>
+    <oc-avatar-link-stub accessiblelabel="" iconsize="small" name="link 1" width="30"></oc-avatar-link-stub>
+    <!--v-if-->
   </span>
   <span class="oc-invisible-sr">List of users</span>
 </span>

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.spec.ts b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.spec.ts
@@ -1,5 +1,6 @@
-import { shallowMount } from 'web-test-helpers'
+import { defaultPlugins, shallowMount } from 'web-test-helpers'
 import Breadcrumb from './OcBreadcrumb.vue'
+import { defineComponent } from 'vue'
 
 const items = [
   { text: 'First folder', to: { path: 'folder' } },
@@ -14,31 +15,34 @@ describe('OcBreadcrumb', () => {
       props: {
         variation: 'lead',
         items
-      }
+      },
+      global: { renderStubDefaultSlot: true, plugins: [...defaultPlugins()] }
     })
 
     expect(wrapper.props().variation).toMatch('lead')
     expect(wrapper.classes()).toContain('oc-breadcrumb-lead')
-    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.html()).toMatchSnapshot()
   })
   it('displays all items', () => {
     const wrapper = shallowMount(Breadcrumb, {
       props: {
         items
-      }
+      },
+      global: { renderStubDefaultSlot: true, plugins: [...defaultPlugins()] }
     })
 
     expect(wrapper.findAll('.oc-breadcrumb-list-item').length).toBe(items.length)
-    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.html()).toMatchSnapshot()
   })
   it('displays context menu trigger when a slot is given', () => {
     const wrapper = shallowMount(Breadcrumb, {
       props: {
         items
       },
       slots: {
-        contextMenu: 'Example item'
-      }
+        contextMenu: defineComponent({})
+      },
+      global: { renderStubDefaultSlot: true, plugins: [...defaultPlugins()] }
     })
 
     expect(wrapper.find('#oc-breadcrumb-contextmenu-trigger').exists()).toBe(true)
@@ -47,7 +51,8 @@ describe('OcBreadcrumb', () => {
     const wrapper = shallowMount(Breadcrumb, {
       props: {
         items
-      }
+      },
+      global: { renderStubDefaultSlot: true, plugins: [...defaultPlugins()] }
     })
 
     expect(wrapper.find('#oc-breadcrumb-contextmenu-trigger').exists()).toBe(false)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -40,7 +40,6 @@
             mode="click"
             close-on-click
             :padding-size="contextMenuPadding"
-            @click.native.stop.prevent
           >
             <!-- @slot Add context actions that open in a dropdown when clicking on the "three dots" button -->
             <slot name="contextMenu" />
@@ -163,7 +162,12 @@ export default {
       return this.$gettext('Show actions for current folder')
     },
     showContextMenu() {
-      return !!this.$slots.contextMenu
+      const contextMenuSlot = this.$slots.contextMenu
+      if (!contextMenuSlot) {
+        return false
+      }
+      const slotContent = contextMenuSlot()[0] ?? null
+      return !!slotContent?.type?.name
     }
   },
   methods: {