Merge pull request #1266 from opencloud-eu/chore/fix-web-pkg-types

fix: add missing web-pkg types and fix type errors

Author: JammingBen

packages/design-system/src/components/OcAvatars/OcAvatars.vue

@@ -57,6 +57,7 @@ type Item = {
   avatarType?: 'user' | 'link' | 'remote' | 'group' | 'guest' | string
   username?: string
   avatar?: string
+  userId?: string
 }
 
 export interface Props {
@@ -118,6 +119,15 @@ const {
   hoverEffect = false
 } = defineProps<Props>()
 
+export interface Slots {
+  /**
+   * @docs Can be used to overwrite the default rendering of the user avatars.
+   */
+  userAvatars?: ({ avatars, width }: { avatars: Item[]; width: number }) => unknown
+}
+
+defineSlots<Slots>()
+
 const avatarsRef = useTemplateRef('avatarsRef')
 
 const isOverlapping = computed(() => maxDisplayed && maxDisplayed < items.length)

packages/design-system/src/components/OcTable/OcTable.vue

@@ -65,13 +65,17 @@
         @contextmenu="
           $emit(
             constants.EVENT_TROW_CONTEXTMENU,
-            ($refs[`row-${trIndex}`] as HTMLElement[])[0],
+            ($refs[`row-${trIndex}`] as ComponentPublicInstance<unknown>[])[0],
             $event,
             item
           )
         "
         @vue:mounted="
-          $emit(constants.EVENT_TROW_MOUNTED, item, ($refs[`row-${trIndex}`] as HTMLElement[])[0])
+          $emit(
+            constants.EVENT_TROW_MOUNTED,
+            item,
+            ($refs[`row-${trIndex}`] as Array<typeof OcTr>)[0]
+          )
         "
         @dragstart="dragStart(item, $event)"
         @drop="dropRowEvent(domSelector(item), $event)"
@@ -111,7 +115,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ComponentPublicInstance, computed } from 'vue'
 import OcThead from '../OcTableHead/OcTableHead.vue'
 import OcTbody from '../OcTableBody/OcTableBody.vue'
 import OcTr from '../OcTableTr/OcTableTr.vue'
@@ -229,12 +233,17 @@ export interface Emits {
   /**
    * @docs Emitted when a table row has been mounted.
    */
-  (e: 'rowMounted', item: Item, element: HTMLElement): void
+  (e: 'rowMounted', item: Item, element: typeof OcTr): void
 
   /**
    * @docs Emitted when a table row has been right-clicked.
    */
-  (e: 'contextmenuClicked', element: HTMLElement, event: MouseEvent, item: Item): void
+  (
+    e: 'contextmenuClicked',
+    element: ComponentPublicInstance<unknown>,
+    event: MouseEvent,
+    item: Item
+  ): void
 
   /**
    * @docs Emitted when a column has been sorted.

packages/web-pkg/src/components/FilesList/ResourceTable.vue

@@ -357,7 +357,7 @@ import { useFileActionsRename } from '../../composables/actions'
 import { createLocationCommon, isLocationTrashActive } from '../../router'
 import get from 'lodash-es/get'
 import { storeToRefs } from 'pinia'
-import { OcButton, OcSpinner, OcTable } from '@opencloud-eu/design-system/components'
+import { OcButton, OcSpinner, OcTable, OcTableTr } from '@opencloud-eu/design-system/components'
 import { FieldType } from '@opencloud-eu/design-system/helpers'
 import ResourceStatusIndicators from './ResourceStatusIndicators.vue'
 import { useGettext } from 'vue3-gettext'
@@ -1087,7 +1087,7 @@ export default defineComponent({
 
       this.addSelectedResource(file)
     },
-    fileDropped(selector: HTMLElement, event: DragEvent) {
+    fileDropped(selector: string, event: DragEvent) {
       if (!this.dragDrop) {
         return
       }
@@ -1113,7 +1113,7 @@ export default defineComponent({
       event.dataTransfer.dropEffect = 'move'
       event.dataTransfer.effectAllowed = 'move'
     },
-    dropRowStyling(selector: HTMLElement, leaving: boolean, event: DragEvent) {
+    dropRowStyling(selector: string, leaving: boolean, event: DragEvent) {
       const hasFilePayload = (event.dataTransfer?.types || []).some((e) => e === 'Files')
       if (hasFilePayload) {
         return
@@ -1182,15 +1182,15 @@ export default defineComponent({
 
       displayPositionedDropdown(instance._tippy, event, this.contextMenuButton)
     },
-    rowMounted(resource: Resource, component: ComponentPublicInstance<unknown>) {
+    rowMounted(resource: Resource, component: typeof OcTableTr) {
       /**
        * Triggered whenever a row is mounted
        * @property {object} resource The resource which was mounted as table row
        * @property {object} component The table row component
        */
       this.$emit('rowMounted', resource, component, this.constants.ImageDimension.Thumbnail)
     },
-    fileClicked(data: [Resource, MouseEvent, boolean]) {
+    fileClicked(data: [Resource, MouseEvent]) {
       /**
        * Triggered when the file row is clicked
        * @property {object} resource The resource for which the event is triggered
@@ -1211,7 +1211,6 @@ export default defineComponent({
       }
 
       const eventData = data[1]
-      const skipTargetSelection = data[2] ?? false
 
       if (!eventData.shiftKey && !eventData.metaKey && !eventData.ctrlKey) {
         eventBus.publish('app.files.shiftAnchor.reset')
@@ -1228,7 +1227,10 @@ export default defineComponent({
         return eventBus.publish('app.files.list.clicked.meta', resource)
       }
       if (eventData && eventData.shiftKey) {
-        return eventBus.publish('app.files.list.clicked.shift', { resource, skipTargetSelection })
+        return eventBus.publish('app.files.list.clicked.shift', {
+          resource,
+          skipTargetSelection: false
+        })
       }
       if (isCheckboxClicked) {
         return

packages/web-pkg/tsconfig.json

@@ -13,5 +13,5 @@
   },
 
   // include component types of the design-system
-  "include": ["../design-system/types.d.ts"]
+  "include": ["../design-system/types.d.ts", "./web.declarations.d.ts", "./src/**/*"]
 }

packages/web-pkg/vite.config.ts

@@ -45,6 +45,6 @@ export default defineConfig({
     nodePolyfills({
       exclude: ['crypto']
     }),
-    dts({ exclude: ['**/tests'] })
+    dts({ exclude: ['**/tests'], entryRoot: 'src', outDir: 'dist/src' })
   ]
 })