owncloud · kulmann · Jan 10, 2023 · Jan 9, 2023 · Jan 9, 2023 · Jan 9, 2023
diff --git a/packages/design-system/docs/components/tokens/_HighlightedText.vue b/packages/design-system/docs/components/tokens/_HighlightedText.vue
@@ -2,7 +2,8 @@
   <component :is="tag">
     <template v-for="(fragments, lineIndex) in lines">
       <template v-for="(fragment, fragmentIndex) in fragments">
-        <span
+        <!-- eslint-disable vue/no-v-for-template-key-on-child -->
+        <component
           :is="fragment.tag"
           :key="'line-' + lineIndex + '-fragment-' + fragmentIndex"
           :style="{
@@ -14,7 +15,7 @@
           :class="{ 'highlighted-fragment': fragment.highlighted }"
         >
           {{ fragment.value }}
-        </span>
+        </component>
       </template>
       <br v-if="lineIndex < lines.length - 1" :key="'line-' + lineIndex + '-br'" />
     </template>

diff --git a/packages/design-system/src/components/OcDrop/OcDrop.vue b/packages/design-system/src/components/OcDrop/OcDrop.vue
@@ -144,7 +144,7 @@ export default defineComponent({
       this.tippy.setProps({ trigger: this.triggerMapping })
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     destroy(this.tippy)
   },
   mounted() {

diff --git a/packages/design-system/src/components/OcSelect/OcSelect.vue b/packages/design-system/src/components/OcSelect/OcSelect.vue
@@ -16,7 +16,7 @@
       <template v-for="(index, name) in $slots" #[name]="data">
         <slot v-if="name !== 'search'" :name="name" v-bind="data" />
       </template>
-      <div slot="no-options" v-translate>No options available.</div>
+      <template #no-options><div v-translate>No options available.</div></template>
       <template #spinner="{ loading }">
         <oc-spinner v-if="loading" />
       </template>

diff --git a/packages/design-system/src/components/OcTable/OcTable.vue b/packages/design-system/src/components/OcTable/OcTable.vue
@@ -53,7 +53,7 @@
         @contextmenu="
           $emit(constants.EVENT_TROW_CONTEXTMENU, $refs[`row-${trIndex}`][0], $event, item)
         "
-        @hook:mounted="$emit(constants.EVENT_TROW_MOUNTED, item, $refs[`row-${trIndex}`][0])"
+        @vue:mounted="$emit(constants.EVENT_TROW_MOUNTED, item, $refs[`row-${trIndex}`][0])"
         @dragstart="dragStart(item, $event)"
         @drop="dropRowEvent(itemDomSelector(item), $event)"
         @dragenter.prevent="dropRowStyling(itemDomSelector(item), false, $event)"
@@ -251,7 +251,13 @@ export default defineComponent({
       default: false
     }
   },
-  emits: [EVENT_THEAD_CLICKED, EVENT_TROW_CLICKED, EVENT_TROW_MOUNTED, EVENT_TROW_CONTEXTMENU],
+  emits: [
+    EVENT_ITEM_DROPPED,
+    EVENT_THEAD_CLICKED,
+    EVENT_TROW_CLICKED,
+    EVENT_TROW_MOUNTED,
+    EVENT_TROW_CONTEXTMENU
+  ],
   data() {
     return {
       constants: {

diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -15,7 +15,6 @@
         :type="type"
         :value="displayValue"
         :disabled="disabled"
-        v-on="listeners"
         @change="onChange($event.target.value)"
         @input="onInput($event.target.value)"
         @focus="onFocus($event.target)"
@@ -185,12 +184,6 @@ export default {
         !!this.descriptionMessage
       )
     },
-    listeners() {
-      // Exclude listeners for events which are handled via methods in this component
-      // eslint-disable-next-line no-unused-vars
-      const { change, input, focus, ...listeners } = this.$listeners
-      return listeners
-    },
     messageId() {
       return `${this.id}-message`
     },
@@ -203,7 +196,11 @@ export default {
       if (this.defaultValue) {
         additionalAttrs['placeholder'] = this.defaultValue
       }
-      return { ...this.$attrs, ...additionalAttrs }
+      // Exclude listeners for events which are handled via methods in this component
+      // eslint-disable-next-line no-unused-vars
+      const { change, input, focus, ...attrs } = this.$attrs
+
+      return { ...attrs, ...additionalAttrs }
     },
     ariaInvalid() {
       return (!!this.errorMessage).toString()

diff --git a/...design-system/src/directives/OcTooltip.js → ...design-system/src/directives/OcTooltip.ts b/...design-system/src/directives/OcTooltip.js → ...design-system/src/directives/OcTooltip.ts
@@ -47,7 +47,7 @@ export const destroy = (_tippy) => {
   }
 }
 
-const initOrUpdate = (el, { value = {} }, { elm }) => {
+const initOrUpdate = (el, { value = {} }: any, { elm }) => {
   if (Object.prototype.toString.call(value) !== '[object Object]') {
     value = { content: value }
   }
@@ -82,7 +82,7 @@ const initOrUpdate = (el, { value = {} }, { elm }) => {
 
 export default {
   name: 'OcTooltip',
-  bind: initOrUpdate,
-  componentUpdated: initOrUpdate,
-  unbind: (el, binding, { elm }) => destroy(elm.tooltip)
+  beforeMount: initOrUpdate,
+  updated: initOrUpdate,
+  unmounted: (el, binding, { elm }) => destroy(elm.tooltip)
 }
diff --git a/packages/eslint-config/index.js b/packages/eslint-config/index.js
@@ -4,7 +4,11 @@ module.exports = {
     es6: true,
     amd: true
   },
-  extends: ['plugin:vue/recommended', 'plugin:prettier-vue/recommended', 'plugin:jest/recommended'],
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'plugin:prettier-vue/recommended',
+    'plugin:jest/recommended'
+  ],
   parser: 'vue-eslint-parser',
   parserOptions: {
     parser: {
@@ -25,7 +29,10 @@ module.exports = {
     'node/no-callback-literal': 'off',
     'unused-imports/no-unused-imports': 'error',
     'nonblock-statement-body-position': ['error', 'below'],
-    curly: 'error'
+    curly: 'error',
+
+    // Vue 3 rules: (need to be fixed, but can be done incrementally)
+    'vue/no-deprecated-events-api': 'warn'
   },
   globals: {
     require: false,

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -40,7 +40,7 @@
           :label="getSelectSpaceLabel(item)"
           hide-label
           @input="$emit('toggleSelectSpace', item)"
-          @click.native.stop
+          @click.stop
         />
       </template>
       <template #icon>

diff --git a/packages/web-app-admin-settings/src/views/Groups.vue b/packages/web-app-admin-settings/src/views/Groups.vue
@@ -201,7 +201,7 @@ export default defineComponent({
 
     window.addEventListener('resize', this.calculateListHeaderPosition)
 
-    this.$on('beforeDestroy', () => {
+    this.$on('beforeUnmount', () => {
       eventBus.unsubscribe('app.admin-settings.list.load', loadResourcesEventToken)
     })
   },

diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -134,7 +134,7 @@ export default defineComponent({
 
       calculateListHeaderPosition()
       window.addEventListener('resize', calculateListHeaderPosition)
-      instance.$on('beforeDestroy', () => {
+      instance.$on('beforeUnmount', () => {
         eventBus.unsubscribe('app.admin-settings.list.load', loadResourcesEventToken)
       })
     })

diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
@@ -256,7 +256,7 @@ export default defineComponent({
 
     window.addEventListener('resize', this.calculateListHeaderPosition)
 
-    this.$on('beforeDestroy', () => {
+    this.$on('beforeUnmount', () => {
       eventBus.unsubscribe('app.admin-settings.list.load', loadResourcesEventToken)
     })
   },

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
@@ -24,7 +24,7 @@ export default defineComponent({
     const dragOut = eventBus.subscribe('drag-out', this.hideDropzone)
     const drop = eventBus.subscribe('drop', this.hideDropzone)
 
-    this.$on('beforeDestroy', () => {
+    this.$on('beforeUnmount', () => {
       eventBus.unsubscribe('drag-over', dragOver)
       eventBus.unsubscribe('drag-out', dragOut)
       eventBus.unsubscribe('drop', drop)

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -148,7 +148,7 @@ export default defineComponent({
   mounted() {
     this.resizeObserver.observe(this.$refs.filesAppBar)
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.resizeObserver.unobserve(this.$refs.filesAppBar)
   },
 

diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -212,7 +212,7 @@ export default defineComponent({
         uppyService
       })
 
-      instance.$on('beforeDestroy', () => {
+      instance.$on('beforeUnmount', () => {
         uppyService.unsubscribe('filesSelected', filesSelectedSub)
         uppyService.unsubscribe('uploadCompleted', uploadCompletedSub)
         uppyService.removeDropTarget()

diff --git a/packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue b/packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue
@@ -72,7 +72,7 @@ export default {
   mounted() {
     this.$uppyService.registerUploadInput(this.$refs.input)
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.$uppyService.removeUploadInput(this.$refs.input)
   },
   methods: {

diff --git a/packages/web-app-files/src/components/FilesList/KeyboardActions.vue b/packages/web-app-files/src/components/FilesList/KeyboardActions.vue
@@ -60,7 +60,7 @@ export default defineComponent({
       this.handleShiftClickAction
     )
 
-    this.$on('beforeDestroy', () => {
+    this.$on('beforeUnmount', () => {
       eventBus.unsubscribe('app.files.list.clicked', fileListClickedEvent)
       eventBus.unsubscribe('app.files.list.clicked.meta', fileListClickedMetaEvent)
       eventBus.unsubscribe('app.files.list.clicked.shift', fileListClickedShiftEvent)

diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
@@ -188,7 +188,7 @@ export default defineComponent({
       }
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     visibilityObserver.disconnect()
   },
   methods: {

diff --git a/packages/web-app-files/src/components/Search/Preview.vue b/packages/web-app-files/src/components/Search/Preview.vue
@@ -155,7 +155,7 @@ export default defineComponent({
 
     visibilityObserver.observe(this.$el, { onEnter: debounced, onExit: debounced.cancel })
   },
-  beforeDestroy() {
+  beforeUnmount() {
     visibilityObserver.disconnect()
   },
   methods: {

diff --git a/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue b/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
@@ -254,7 +254,7 @@ export default defineComponent({
       return this.items.slice(0, this.showMoreToggleCount)
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     visibilityObserver.disconnect()
   },
   methods: {

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
@@ -224,7 +224,7 @@ export default defineComponent({
     this.applyRoleAndPermissions()
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener('keydown', this.cycleRoles)
   },
 

diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -13,12 +13,11 @@
     :is-header-compact="isSingleResource"
     v-bind="$attrs"
     data-custom-key-bindings="true"
-    @beforeDestroy="destroySideBar"
+    @beforeUnmount="destroySideBar"
     @mounted="focusSideBar"
     @fileChanged="focusSideBar"
     @selectPanel="setActiveSideBarPanel"
     @close="closeSideBar"
-    v-on="$listeners"
   >
     <template #header>
       <file-info
@@ -104,7 +103,7 @@ export default defineComponent({
       component.focus({
         from: document.activeElement,
         to: component.sidebar?.$el,
-        revert: event === 'beforeDestroy'
+        revert: event === 'beforeUnmount'
       })
     }
 
@@ -136,7 +135,6 @@ export default defineComponent({
       webdav
     }
   },
-
   data() {
     return {
       focused: undefined,

diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
@@ -151,7 +151,7 @@ export default defineComponent({
     this.scrollToResourceFromRoute(this.paginatedResources)
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     visibilityObserver.disconnect()
   },
 

diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
@@ -66,7 +66,7 @@ export default defineComponent({
         uppyService
       })
 
-      instance.$on('beforeDestroy', () => {
+      instance.$on('beforeUnmount', () => {
         uppyService.unsubscribe('filesSelected', filesSelectedSub)
         uppyService.removeDropTarget()
       })
@@ -115,7 +115,7 @@ export default defineComponent({
     const dragOut = eventBus.subscribe('drag-out', this.hideDropzone)
     const drop = eventBus.subscribe('drop', this.hideDropzone)
 
-    this.$on('beforeDestroy', () => {
+    this.$on('beforeUnmount', () => {
       eventBus.unsubscribe('drag-over', dragOver)
       eventBus.unsubscribe('drag-out', dragOut)
       eventBus.unsubscribe('drop', drop)

diff --git a/packages/web-app-files/src/views/shares/SharedViaLink.vue b/packages/web-app-files/src/views/shares/SharedViaLink.vue
@@ -150,7 +150,7 @@ export default defineComponent({
     this.scrollToResourceFromRoute(this.paginatedResources)
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     visibilityObserver.disconnect()
   },
 

diff --git a/packages/web-app-files/src/views/shares/SharedWithOthers.vue b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
@@ -145,7 +145,7 @@ export default defineComponent({
     this.scrollToResourceFromRoute(this.paginatedResources)
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     visibilityObserver.disconnect()
   },
 

diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -335,12 +335,12 @@ export default defineComponent({
         this.performLoaderTask(true, path, fileId)
       }
     )
-    this.$on('beforeDestroy', () =>
+    this.$on('beforeUnmount', () =>
       eventBus.unsubscribe('app.files.list.load', loadResourcesEventToken)
     )
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     visibilityObserver.disconnect()
   },
 

diff --git a/packages/web-app-files/src/views/spaces/GenericTrash.vue b/packages/web-app-files/src/views/spaces/GenericTrash.vue
@@ -183,7 +183,7 @@ export default defineComponent({
     const loadResourcesEventToken = eventBus.subscribe('app.files.list.load', () => {
       this.performLoaderTask()
     })
-    this.$on('beforeDestroy', () => {
+    this.$on('beforeUnmount', () => {
       eventBus.unsubscribe('app.files.list.load', loadResourcesEventToken)
     })
   },

diff --git a/packages/web-app-pdf-viewer/src/App.vue b/packages/web-app-pdf-viewer/src/App.vue
@@ -44,7 +44,7 @@ export default defineComponent({
       immediate: true
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.unloadPdf()
   },
   methods: {

diff --git a/packages/web-app-preview/src/App.vue b/packages/web-app-preview/src/App.vue
@@ -388,7 +388,7 @@ export default defineComponent({
     this.$refs.preview.focus()
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener('popstate', this.handleLocalHistoryEvent)
     document.removeEventListener('fullscreenchange', this.handleFullScreenChangeEvent)
 

diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
@@ -198,7 +198,7 @@ export default defineComponent({
       this.$refs.optionsDrop.hide()
     })
 
-    this.$on('beforeDestroy', () => {
+    this.$on('beforeUnmount', () => {
       eventBus.unsubscribe('app.search.options-drop.hide', hideOptionsDropEvent)
     })
   },
@@ -209,7 +209,7 @@ export default defineComponent({
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.isSearchBarEnabled) {
       this.resizeObserver.unobserve(this.$refs.searchBar)
     }