chore(deps): update devdependencies (non-major)

package.json

@@ -46,8 +46,8 @@
     "@babel/polyfill": "7.12.1",
     "@babel/preset-env": "7.28.5",
     "@babel/register": "7.28.3",
-    "@cucumber/cucumber": "12.4.0",
-    "@cucumber/messages": "31.0.1",
+    "@cucumber/cucumber": "12.5.0",
+    "@cucumber/messages": "31.2.0",
     "@cucumber/pretty-formatter": "2.4.1",
     "@noble/hashes": "2.0.1",
     "@opencloud-eu/babel-preset": "workspace:*",
@@ -72,11 +72,11 @@
     "eslint": "9.39.2",
     "franc-min": "^6.2.0",
     "glob": "13.0.0",
-    "happy-dom": "20.0.11",
+    "happy-dom": "20.1.0",
     "jsdom": "^27.0.0",
     "license-checker-rseidelsohn": "4.4.2",
     "node-fetch": "3.3.2",
-    "pino": "10.1.0",
+    "pino": "10.1.1",
     "pino-pretty": "13.1.3",
     "qs": "6.14.1",
     "requirejs": "2.3.8",
@@ -96,7 +96,7 @@
     "vitest-mock-extended": "3.1.0",
     "vue": "^3.5.23",
     "vue-demi": "0.14.10",
-    "vue-tsc": "3.1.8",
+    "vue-tsc": "3.2.2",
     "vue3-gettext": "2.4.0"
   },
   "engines": {

packages/design-system/docs/components/OcDatepicker/handler.vue

@@ -13,9 +13,9 @@ import { ref } from 'vue'
 import { DateTime } from 'luxon'
 
 const selectedDate = ref<DateTime>()
-const inputError = ref<Error>()
+const inputError = ref<boolean>()
 
-const onExpiryDateChanged = ({ date, error }: { date: DateTime; error: Error }) => {
+const onExpiryDateChanged = ({ date, error }: { date: DateTime; error: boolean }) => {
   selectedDate.value = date
   inputError.value = error
 }

packages/design-system/docs/components/OcEmojiPicker/default.vue

@@ -4,12 +4,11 @@
 </template>
 
 <script setup lang="ts">
-import { Emoji } from 'emoji-mart'
 import { ref } from 'vue'
 
-const selectedEmoji = ref<Emoji>()
+const selectedEmoji = ref<string>()
 
-const updateSelectedEmoji = (emoji: Emoji) => {
+const updateSelectedEmoji = (emoji: string) => {
   selectedEmoji.value = emoji
 }
 </script>

packages/design-system/docs/components/OcPageSize/default.vue

@@ -9,11 +9,12 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { PageSizeOption } from '../../../src/helpers'
 
 const options: number[] = [10, 20, 50]
 const currentSelection = ref(options[0])
 
-const setItemsPerPage = (value: number) => {
-  currentSelection.value = value
+const setItemsPerPage = (value: PageSizeOption) => {
+  currentSelection.value = value as number
 }
 </script>

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

@@ -17,7 +17,7 @@
         <template v-if="avatars.length > 0">
           <oc-avatar
             v-for="avatar in avatars"
-            :key="avatar.username"
+            :key="avatar.userName"
             :src="avatar.avatar"
             :user-name="avatar.displayName"
             :width="width"
@@ -56,7 +56,7 @@ type Item = {
   displayName?: string
   name?: string
   avatarType?: 'user' | 'link' | 'remote' | 'group' | 'guest' | string
-  username?: string
+  userName?: string
   avatar?: string
   userId?: string
 }
@@ -154,7 +154,7 @@ const otherItems = computed(() => {
 const avatarsAriaLabel = computed(() => {
   if (isTooltipDisplayed) return tooltip.value as string
   const names = (avatars.value || [])
-    .map((a) => a?.displayName || a?.name || a?.username)
+    .map((a) => a?.displayName || a?.name || a?.userName)
     .filter(Boolean)
   return names.length ? names.join(', ') : undefined
 })

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

@@ -80,7 +80,7 @@ const {
 
 const emit = defineEmits<Emits>()
 
-const model = defineModel<boolean | unknown[]>()
+const model = defineModel<boolean>()
 
 const isChecked = computed(() => {
   const val = unref(model)

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

@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { uniqueId } from '../../helpers'
+import { PageSizeOption, uniqueId } from '../../helpers'
 import OcSelect from '../OcSelect/OcSelect.vue'
 
 export interface Props {
@@ -49,14 +49,14 @@ export interface Emits {
   /**
    * @docs Emitted when the value of the select has changed.
    */
-  (event: 'change', value: string | boolean): void
+  (event: 'change', value: PageSizeOption): void
 }
 
 const { label, options, selected, selectId = uniqueId('oc-page-size-') } = defineProps<Props>()
 
 const emit = defineEmits<Emits>()
 
-const emitChange = (value: string | boolean) => {
+const emitChange = (value: PageSizeOption) => {
   emit('change', value)
 }
 </script>

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

@@ -229,14 +229,14 @@ export interface Emits {
   /**
    * @docs Emitted when the user has selected an option.
    */
-  (e: 'update:modelValue', value: unknown): void
+  (e: 'update:modelValue', value: any): void
 }
 
 export interface Slots {
   /**
    * @docs Slot for when an option is selected.
    */
-  'selected-option'?: () => unknown
+  'selected-option'?: (option: any) => any
 
   /**
    * @docs This component inherits all slots from `vue-select`. See https://vue-select.org/api/slots for more information.

packages/design-system/src/components/OcTable/OcTable.sort.spec.ts

@@ -1,5 +1,6 @@
 import { defaultPlugins, mount } from '@opencloud-eu/web-test-helpers'
 import Table from './OcTable.vue'
+import { SortDir } from '../../helpers'
 
 const ASC = 'ascending'
 const DESC = 'descending'
@@ -9,13 +10,13 @@ const tableFieldId = {
   name: 'id',
   title: 'Id',
   sortable: true,
-  sortDir: 'desc'
+  sortDir: SortDir.Desc
 }
 const tableFieldResource = {
   name: 'resource',
   title: 'Resource',
   sortable: true,
-  sortDir: 'asc'
+  sortDir: SortDir.Asc
 }
 const tableFields: {
   name: string
@@ -86,23 +87,23 @@ describe('OcTable.sort', () => {
         ASC,
         {
           sortBy: tableFieldId.name,
-          sortDir: 'asc',
+          sortDir: SortDir.Asc,
           ariaSort: ASC
         }
       ],
       [
         DESC,
         {
           sortBy: tableFieldId.name,
-          sortDir: 'desc',
+          sortDir: SortDir.Desc,
           ariaSort: DESC
         }
       ],
       [
         NONE,
         {
           sortBy: tableFieldResource.name,
-          sortDir: 'asc',
+          sortDir: SortDir.Asc,
           ariaSort: NONE
         }
       ]
@@ -111,7 +112,7 @@ describe('OcTable.sort', () => {
       async (name, { sortBy, sortDir, ariaSort }) => {
         await wrapper.setProps({
           sortBy,
-          sortDir: sortDir as 'asc' | 'desc'
+          sortDir: sortDir
         })
         expect(headers.at(1).attributes()['aria-sort']).toBe(ariaSort)
       }
@@ -124,7 +125,7 @@ describe('OcTable.sort', () => {
         props: {
           fields: tableFields,
           sortBy: tableFieldId.name,
-          sortDir: tableFieldId.sortDir as 'asc' | 'desc',
+          sortDir: tableFieldId.sortDir as SortDir,
           data
         },
         global: {
@@ -171,7 +172,7 @@ describe('OcTable.sort', () => {
             fields: tableFields,
             data,
             sortBy: sortByOld,
-            sortDir: sortDirOld as 'asc' | 'desc'
+            sortDir: sortDirOld as SortDir
           },
           global: {
             plugins: [...defaultPlugins()],

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

@@ -121,7 +121,7 @@ import OcTr from '../OcTableTr/OcTableTr.vue'
 import OcTh from '../OcTableTh/OcTableTh.vue'
 import OcTd from '../OcTableTd/OcTableTd.vue'
 import OcButton from '../OcButton/OcButton.vue'
-import { Item as BaseItem, FieldType, SizeType } from '../../helpers'
+import { Item as BaseItem, FieldType, SizeType, SortDir } from '../../helpers'
 import {
   EVENT_THEAD_CLICKED,
   EVENT_TROW_CLICKED,
@@ -132,9 +132,6 @@ import {
 } from '../../helpers/constants'
 import { useGettext } from 'vue3-gettext'
 
-const SORT_DIRECTION_ASC = 'asc' as const
-const SORT_DIRECTION_DESC = 'desc' as const
-
 type Item = BaseItem & any
 
 export interface Props {
@@ -200,7 +197,7 @@ export interface Props {
   /**
    * @docs The default sort direction.
    */
-  sortDir?: 'asc' | 'desc'
+  sortDir?: SortDir
   /**
    * @docs Determines if the table header should be sticky. This is helpful when it should still be visible when scrolling.
    * @default false
@@ -247,7 +244,7 @@ export interface Emits {
   /**
    * @docs Emitted when a column has been sorted.
    */
-  (e: 'sort', sort: { sortBy: string; sortDir: 'asc' | 'desc' }): void
+  (e: 'sort', sort: { sortBy: string; sortDir: SortDir }): void
 
   /**
    * @docs Emitted when an element has entered a drop zone inside the table.
@@ -502,7 +499,7 @@ const extractSortThProps = (props: Record<string, string>, field: FieldType) =>
 
   let sort = 'none'
   if (sortBy === field.name) {
-    sort = sortDir === SORT_DIRECTION_ASC ? 'ascending' : 'descending'
+    sort = sortDir === SortDir.Asc ? 'ascending' : 'descending'
   }
   props['aria-sort'] = sort
 }
@@ -519,11 +516,11 @@ const handleSort = (field: FieldType) => {
   let sortDirection = sortDir
   // toggle sortDir if already sorted by this column
   if (sortBy === field.name && sortDir !== undefined) {
-    sortDirection = sortDir === SORT_DIRECTION_DESC ? SORT_DIRECTION_ASC : SORT_DIRECTION_DESC
+    sortDirection = sortDir === SortDir.Desc ? SortDir.Asc : SortDir.Desc
   }
   // set default sortDir of the field when sortDir not set or sortBy changed
   if (sortBy !== field.name || sortDir === undefined) {
-    sortDirection = (field.sortDir || SORT_DIRECTION_DESC) as 'asc' | 'desc'
+    sortDirection = (field.sortDir || SortDir.Desc) as SortDir
   }
 
   /**

packages/design-system/src/helpers/types.ts

@@ -86,3 +86,10 @@ export type JustifyContentType =
   | 'space-around'
   | 'space-between'
   | 'space-evenly'
+
+export enum SortDir {
+  Desc = 'desc',
+  Asc = 'asc'
+}
+
+export type PageSizeOption = string | number | boolean

packages/web-app-admin-settings/src/components/Groups/GroupsList.vue

@@ -138,7 +138,6 @@ import {
   eventBus,
   Pagination,
   SideBarEventTopics,
-  SortDir,
   useFileListHeaderPosition,
   useIsTopBarSticky,
   useKeyboardActions,
@@ -156,7 +155,7 @@ import {
 import { useGroupSettingsStore } from '../../composables'
 import { storeToRefs } from 'pinia'
 import { findIndex } from 'lodash-es'
-import { FieldType } from '@opencloud-eu/design-system/helpers'
+import { FieldType, SortDir } from '@opencloud-eu/design-system/helpers'
 
 export default defineComponent({
   name: 'GroupsList',
@@ -211,7 +210,7 @@ export default defineComponent({
       }
       eventBus.publish(SideBarEventTopics.open)
     }
-    const rowClicked = (data: [Group, MouseEvent]) => {
+    const rowClicked = (data: [Group, MouseEvent | KeyboardEvent]) => {
       const resource = data[0]
       const eventData = data[1]
       const isCheckboxClicked =
@@ -430,8 +429,8 @@ export default defineComponent({
     }
   },
   methods: {
-    handleSort(event: { sortBy: keyof Group; sortDir: SortDir }) {
-      this.sortBy = event.sortBy
+    handleSort(event: { sortBy: string; sortDir: SortDir }) {
+      this.sortBy = event.sortBy as keyof Group
       this.sortDir = event.sortDir
     },
     getSelectGroupLabel(group: Group) {

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

@@ -146,7 +146,7 @@ import { getSpaceManagers, SpaceResource } from '@opencloud-eu/web-client'
 import Mark from 'mark.js'
 import Fuse from 'fuse.js'
 import { useGettext } from 'vue3-gettext'
-import { eventBus, SortDir } from '@opencloud-eu/web-pkg'
+import { eventBus } from '@opencloud-eu/web-pkg'
 import { SideBarEventTopics } from '@opencloud-eu/web-pkg'
 import { ContextMenuQuickAction } from '@opencloud-eu/web-pkg'
 import {
@@ -164,7 +164,7 @@ import {
 } from '../../composables/keyboardActions'
 import { useSpaceSettingsStore } from '../../composables'
 import { storeToRefs } from 'pinia'
-import { FieldType } from '@opencloud-eu/design-system/helpers'
+import { FieldType, SortDir } from '@opencloud-eu/design-system/helpers'
 
 const router = useRouter()
 const route = useRoute()
@@ -426,7 +426,7 @@ watch([filterTerm, paginatedItems], () => {
   })
 })
 
-const fileClicked = (data: [SpaceResource, MouseEvent]) => {
+const fileClicked = (data: [SpaceResource, MouseEvent | KeyboardEvent]) => {
   const resource = data[0]
   const eventData = data[1]
   const isCheckboxClicked = (eventData?.target as HTMLElement).getAttribute('type') === 'checkbox'

packages/web-app-admin-settings/src/components/Users/UsersList.vue

@@ -132,7 +132,6 @@ import {
   Pagination,
   queryItemAsString,
   SideBarEventTopics,
-  SortDir,
   useFileListHeaderPosition,
   useIsTopBarSticky,
   useKeyboardActions,
@@ -151,7 +150,7 @@ import {
 import { findIndex } from 'lodash-es'
 import Mark from 'mark.js'
 import { OcTable } from '@opencloud-eu/design-system/components'
-import { FieldType } from '@opencloud-eu/design-system/helpers'
+import { FieldType, SortDir } from '@opencloud-eu/design-system/helpers'
 import { useCapabilityStore } from '@opencloud-eu/web-pkg'
 
 export default defineComponent({
@@ -232,7 +231,7 @@ export default defineComponent({
       eventBus.publish(SideBarEventTopics.openWithPanel, 'UserAssignmentsPanel')
     }
 
-    const rowClicked = (data: [User, MouseEvent]) => {
+    const rowClicked = (data: [User, MouseEvent | KeyboardEvent]) => {
       const resource = data[0]
       const eventData = data[1]
       const isCheckboxClicked =