From f36fd3a9f6c16a8e6f465b19a4d01b35fd07a46a Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Thu, 19 Mar 2026 16:15:16 +0100
Subject: [PATCH 1/2] fix(pkg): missing TextEditor component type

Fixes the missing `TextEditor` type when building `web-pkg` as lib. It was missing due to type errors that could easily be fixed by refactoring the component to script setup.
---
 .../src/components/TextEditor/TextEditor.vue  | 264 ++++++++----------
 1 file changed, 123 insertions(+), 141 deletions(-)

diff --git a/packages/web-pkg/src/components/TextEditor/TextEditor.vue b/packages/web-pkg/src/components/TextEditor/TextEditor.vue
index 1d8eef4930..b776b576ca 100644
--- a/packages/web-pkg/src/components/TextEditor/TextEditor.vue
+++ b/packages/web-pkg/src/components/TextEditor/TextEditor.vue
@@ -55,11 +55,11 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, unref, ref } from 'vue'
+<script setup lang="ts">
+import { computed, unref, ref } from 'vue'
 import { Resource } from '@opencloud-eu/web-client'
 
-import { config, MdEditor, MdPreview, XSSPlugin, NormalToolbar } from 'md-editor-v3'
+import { config, MdEditor, MdPreview, XSSPlugin, NormalToolbar, ToolbarNames } from 'md-editor-v3'
 import 'md-editor-v3/lib/style.css'
 
 import { languages, languageUserDefined } from './l18n'
@@ -69,162 +69,144 @@ import { useThemeStore } from '../../composables'
 import { AppConfigObject } from '../../apps'
 
 import screenfull from 'screenfull'
-
 import Cropper from 'cropperjs'
 import { lineNumbers } from '@codemirror/view'
 import 'cropperjs/dist/cropper.css'
 
-export default defineComponent({
-  name: 'TextEditor',
-  // type casts are needed to ensure type inference works correctly when building web-pkg
-  components: {
-    MdEditor: MdEditor as any,
-    MdPreview: MdPreview as any,
-    NormalToolbar: NormalToolbar as any
-  },
-  props: {
-    applicationConfig: { type: Object as PropType<AppConfigObject>, required: false },
-    currentContent: {
-      type: String,
-      required: true
-    },
-    markdownMode: { type: Boolean, required: false, default: false },
-    isReadOnly: { type: Boolean, required: false, default: false },
-    resource: { type: Object as PropType<Resource>, required: false }
-  },
-  emits: ['update:currentContent'],
-  setup(props, { emit }) {
-    const language = useGettext()
-    const { currentTheme } = useThemeStore()
-    const showLineNumbers = ref(true)
+const {
+  applicationConfig = undefined,
+  currentContent,
+  markdownMode = false,
+  isReadOnly = false,
+  resource = undefined
+} = defineProps<{
+  applicationConfig?: AppConfigObject
+  currentContent: string
+  markdownMode?: boolean
+  isReadOnly?: boolean
+  resource?: Resource
+}>()
 
-    const editorConfig = computed(() => {
-      // TODO: Remove typecasting once vue-tsc has figured it out
-      const { showPreviewOnlyMd = true } = props.applicationConfig as AppConfigObject
-      return { showPreviewOnlyMd }
-    })
+const emit = defineEmits<{
+  (e: 'update:currentContent', value: string): void
+}>()
 
-    const isMarkdown = computed(() => {
-      return (
-        props.markdownMode ||
-        ['md', 'markdown'].includes(props.resource?.extension) ||
-        !unref(editorConfig).showPreviewOnlyMd
-      )
-    })
-
-    const theme = computed(() => (unref(currentTheme).isDark ? 'dark' : 'light'))
+const language = useGettext()
+const { currentTheme } = useThemeStore()
+const showLineNumbers = ref(true)
 
-    const toolbars = computed(() => {
-      if (!unref(isMarkdown)) {
-        return ['revoke', 'next', '=', 0]
-      }
-      return [
-        'bold',
-        'underline',
-        'italic',
-        '-',
-        'title',
-        'strikeThrough',
-        'sub',
-        'sup',
-        'quote',
-        'unorderedList',
-        'orderedList',
-        'task',
-        '-',
-        'codeRow',
-        'code',
-        'link',
-        'image',
-        'table',
-        '-',
-        'revoke',
-        'next',
-        '=',
-        0,
-        'preview',
-        'previewOnly'
-      ]
-    })
+const editorConfig = computed(() => {
+  const { showPreviewOnlyMd = true } = applicationConfig
+  return { showPreviewOnlyMd }
+})
 
-    config({
-      editorConfig: {
-        languageUserDefined
-      },
-      editorExtensions: {
-        screenfull: {
-          instance: screenfull
-        },
-        cropper: {
-          instance: Cropper
-        }
-      },
-      markdownItPlugins(plugins) {
-        return [
-          ...plugins,
-          {
-            type: 'xss',
-            plugin: XSSPlugin,
-            options: {}
-          }
-        ]
-      },
-      codeMirrorExtensions(extensions) {
-        const combinedExtensions = [
-          ...extensions,
-          {
-            type: 'lineNumbers',
-            extension: lineNumbers()
-          }
-        ]
+const isMarkdown = computed(() => {
+  return (
+    markdownMode ||
+    ['md', 'markdown'].includes(resource?.extension) ||
+    !unref(editorConfig).showPreviewOnlyMd
+  )
+})
 
-        const linkShortener = combinedExtensions.find(
-          (extension) => extension.type === 'linkShortener'
-        )
-        if (linkShortener) {
-          linkShortener.options.maxLength = 120
-        }
+const theme = computed(() => (unref(currentTheme).isDark ? 'dark' : 'light'))
 
-        if (!unref(isMarkdown)) {
-          return combinedExtensions.filter((extension) =>
-            ['lineWrapping', 'keymap', 'floatingToolbar', 'lineNumbers'].includes(extension.type)
-          )
-        }
+const toolbars = computed<ToolbarNames[]>(() => {
+  if (!unref(isMarkdown)) {
+    return ['revoke', 'next', '=', 0]
+  }
+  return [
+    'bold',
+    'underline',
+    'italic',
+    '-',
+    'title',
+    'strikeThrough',
+    'sub',
+    'sup',
+    'quote',
+    'unorderedList',
+    'orderedList',
+    'task',
+    '-',
+    'codeRow',
+    'code',
+    'link',
+    'image',
+    'table',
+    '-',
+    'revoke',
+    'next',
+    '=',
+    0,
+    'preview',
+    'previewOnly'
+  ]
+})
 
-        return combinedExtensions
+config({
+  editorConfig: {
+    languageUserDefined
+  },
+  editorExtensions: {
+    screenfull: {
+      instance: screenfull
+    },
+    cropper: {
+      instance: Cropper
+    }
+  },
+  markdownItPlugins(plugins) {
+    return [
+      ...plugins,
+      {
+        type: 'xss',
+        plugin: XSSPlugin,
+        options: {}
       }
-    })
-
-    const onUploadImg = async (files: File[]) => {
-      const uploadedImages = await Promise.all(
-        [...files].map(
-          (file) =>
-            new Promise((resolve, reject) => {
-              const reader = new FileReader()
-              reader.onload = () => resolve(reader.result)
-              reader.onerror = reject
-              reader.readAsDataURL(file)
-            })
-        )
-      )
-
-      const markdownImages = uploadedImages.map((b64) => `![image](${b64})`)
-      const updatedContent = `${unref(props.currentContent)}\n${markdownImages.join('\n\n')}\n`
+    ]
+  },
+  codeMirrorExtensions(extensions) {
+    const combinedExtensions = [
+      ...extensions,
+      {
+        type: 'lineNumbers',
+        extension: lineNumbers()
+      }
+    ]
 
-      emit('update:currentContent', updatedContent)
+    const linkShortener = combinedExtensions.find((extension) => extension.type === 'linkShortener')
+    if (linkShortener) {
+      linkShortener.options.maxLength = 120
     }
 
-    return {
-      isMarkdown,
-      theme,
-      toolbars,
-      language,
-      languages,
-      onUploadImg,
-      showLineNumbers
+    if (!unref(isMarkdown)) {
+      return combinedExtensions.filter((extension) =>
+        ['lineWrapping', 'keymap', 'floatingToolbar', 'lineNumbers'].includes(extension.type)
+      )
     }
+
+    return combinedExtensions
   }
 })
+
+const onUploadImg = async (files: File[]) => {
+  const uploadedImages = await Promise.all(
+    [...files].map(
+      (file) =>
+        new Promise((resolve, reject) => {
+          const reader = new FileReader()
+          reader.onload = () => resolve(reader.result)
+          reader.onerror = reject
+          reader.readAsDataURL(file)
+        })
+    )
+  )
+
+  const markdownImages = uploadedImages.map((b64) => `![image](${b64})`)
+  const updatedContent = `${currentContent}\n${markdownImages.join('\n\n')}\n`
+
+  emit('update:currentContent', updatedContent)
+}
 </script>
 <style>
 @reference '@opencloud-eu/design-system/tailwind';

From ee500ec95a15382c1d340edb083e3881d4f6e582 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Thu, 19 Mar 2026 16:30:21 +0100
Subject: [PATCH 2/2] fix(pkg): DateTime component type errors when building
 lib

---
 .../src/components/Filters/DateFilter.vue     | 323 ++++++++----------
 .../components/Filters/DateFilter.spec.ts     |  16 +-
 2 files changed, 150 insertions(+), 189 deletions(-)

diff --git a/packages/web-pkg/src/components/Filters/DateFilter.vue b/packages/web-pkg/src/components/Filters/DateFilter.vue
index edc24efab2..255adc1cdc 100644
--- a/packages/web-pkg/src/components/Filters/DateFilter.vue
+++ b/packages/web-pkg/src/components/Filters/DateFilter.vue
@@ -96,9 +96,7 @@
               :is-clearable="true"
               :current-date="fromDate"
               :is-dark="currentTheme.isDark"
-              @date-changed="
-                (value: { date: DateTime; error: boolean }) => setDateRangeDate(value, 'from')
-              "
+              @date-changed="(value) => setDateRangeDate(value, 'from')"
             />
             <oc-datepicker
               :label="$gettext('To')"
@@ -106,9 +104,7 @@
               :current-date="toDate"
               :min-date="fromDate ? fromDate : undefined"
               :is-dark="currentTheme.isDark"
-              @date-changed="
-                (value: { date: DateTime; error: boolean }) => setDateRangeDate(value, 'to')
-              "
+              @date-changed="(value) => setDateRangeDate(value, 'to')"
             />
           </div>
           <div class="date-filter-apply-btn text-end">
@@ -122,8 +118,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { PropType, computed, defineComponent, onMounted, ref, unref } from 'vue'
+<script setup lang="ts">
+import { computed, onMounted, ref, unref } from 'vue'
 import omit from 'lodash-es/omit'
 import { useRoute, useRouteQuery, useRouter, useThemeStore } from '../../composables'
 import { formatDateFromDateTime } from '../../helpers'
@@ -135,206 +131,171 @@ import { storeToRefs } from 'pinia'
 
 type Item = Record<string, string>
 
-export default defineComponent({
-  name: 'DateFilter',
-  props: {
-    filterLabel: {
-      type: String,
-      required: true
-    },
-    filterName: {
-      type: String,
-      required: true
-    },
-    items: {
-      type: Array as PropType<Item[]>,
-      required: true
-    },
-    idAttribute: {
-      type: String,
-      required: false,
-      default: 'id'
-    },
-    displayNameAttribute: {
-      type: String,
-      required: false,
-      default: 'name'
-    }
-  },
-  emits: ['selectionChange'],
-  setup: function (props, { emit, expose }) {
-    const router = useRouter()
-    const { current: currentLanguage } = useGettext()
-    const currentRoute = useRoute()
-    const themeStore = useThemeStore()
-    const { currentTheme } = storeToRefs(themeStore)
-    const selectedItem = ref<Item>()
-    const displayedItems = ref(props.items)
-    const fromDate = ref<DateTime>()
-    const toDate = ref<DateTime>()
-    const dateRangeClicked = ref(false)
-    const filterChip = ref<typeof OcFilterChip>()
+const {
+  filterLabel,
+  filterName,
+  items,
+  idAttribute = 'id',
+  displayNameAttribute = 'name'
+} = defineProps<{
+  filterLabel: string
+  filterName: string
+  items: Item[]
+  idAttribute?: string
+  displayNameAttribute?: string
+}>()
 
-    const queryParam = `q_${props.filterName}`
-    const currentRouteQuery = useRouteQuery(queryParam)
+const emit = defineEmits<{
+  (e: 'selectionChange', value: Item | undefined): void
+}>()
 
-    const getId = (item: Item) => {
-      return item[props.idAttribute as keyof Item]
-    }
+const router = useRouter()
+const { current: currentLanguage } = useGettext()
+const currentRoute = useRoute()
+const themeStore = useThemeStore()
+const { currentTheme } = storeToRefs(themeStore)
+const selectedItem = ref<Item>()
+const displayedItems = ref(items)
+const fromDate = ref<DateTime>()
+const toDate = ref<DateTime>()
+const dateRangeClicked = ref(false)
+const filterChip = ref<typeof OcFilterChip>()
 
-    const setRouteQuery = () => {
-      return router.push({
-        query: {
-          ...omit(unref(currentRoute).query, [queryParam]),
-          ...(unref(selectedItem) && {
-            [queryParam]: getId(unref(selectedItem))
-          })
-        }
-      })
-    }
+const queryParam = `q_${filterName}`
+const currentRouteQuery = useRouteQuery(queryParam)
 
-    const isItemSelected = (item: Item) => {
-      return unref(selectedItem) && getId(unref(selectedItem)) === getId(item)
-    }
+const getId = (item: Item) => {
+  return item[idAttribute as keyof Item]
+}
 
-    const resetDateRange = () => {
-      fromDate.value = undefined
-      toDate.value = undefined
+const setRouteQuery = () => {
+  return router.push({
+    query: {
+      ...omit(unref(currentRoute).query, [queryParam]),
+      ...(unref(selectedItem) && {
+        [queryParam]: getId(unref(selectedItem))
+      })
     }
+  })
+}
 
-    const toggleItemSelection = async (item: Item) => {
-      resetDateRange()
-      if (isItemSelected(item)) {
-        selectedItem.value = undefined
-      } else {
-        selectedItem.value = item
-        unref(filterChip).hideDrop()
-      }
-      await setRouteQuery()
-      emit('selectionChange', unref(selectedItem))
-    }
+const isItemSelected = (item: Item) => {
+  return unref(selectedItem) && getId(unref(selectedItem)) === getId(item)
+}
 
-    const clearFilter = () => {
-      selectedItem.value = undefined
-      dateRangeClicked.value = false
-      resetDateRange()
-      emit('selectionChange', unref(selectedItem))
-      setRouteQuery()
-    }
+const resetDateRange = () => {
+  fromDate.value = undefined
+  toDate.value = undefined
+}
 
-    const onShowDrop = () => {
-      displayedItems.value = props.items
-    }
+const toggleItemSelection = async (item: Item) => {
+  resetDateRange()
+  if (isItemSelected(item)) {
+    selectedItem.value = undefined
+  } else {
+    selectedItem.value = item
+    unref(filterChip).hideDrop()
+  }
+  await setRouteQuery()
+  emit('selectionChange', unref(selectedItem))
+}
 
-    const onHideDrop = () => {
-      dateRangeClicked.value = false
-    }
+const clearFilter = () => {
+  selectedItem.value = undefined
+  dateRangeClicked.value = false
+  resetDateRange()
+  emit('selectionChange', unref(selectedItem))
+  setRouteQuery()
+}
 
-    const setSelectedItemsBasedOnQuery = () => {
-      const id = queryItemAsString(unref(currentRouteQuery))
-      if (!id) {
-        return
-      }
+const onShowDrop = () => {
+  displayedItems.value = items
+}
 
-      const selected = props.items.find((s) => getId(s) === id)
-      if (selected) {
-        selectedItem.value = selected
-        return
-      }
+const onHideDrop = () => {
+  dateRangeClicked.value = false
+}
 
-      if (unref(dateRangeApplied)) {
-        const dateRange = id.replace('range:', '')
-        const from = Number(dateRange.split(' - ')[0])
-        const to = Number(dateRange.split(' - ')[1])
-        fromDate.value = DateTime.fromMillis(from)
-        toDate.value = DateTime.fromMillis(to)
-        selectedItem.value = unref(dateRangeOption)
-      }
-    }
+const setSelectedItemsBasedOnQuery = () => {
+  const id = queryItemAsString(unref(currentRouteQuery))
+  if (!id) {
+    return
+  }
 
-    const dateRangeApplied = computed(() =>
-      queryItemAsString(unref(currentRouteQuery))?.startsWith('range:')
-    )
+  const selected = items.find((s) => getId(s) === id)
+  if (selected) {
+    selectedItem.value = selected
+    return
+  }
 
-    const dateRangeValid = computed(() => {
-      if (!unref(fromDate) || !unref(toDate)) {
-        return false
-      }
-      return unref(fromDate) <= unref(toDate)
-    })
+  if (unref(dateRangeApplied)) {
+    const dateRange = id.replace('range:', '')
+    const from = Number(dateRange.split(' - ')[0])
+    const to = Number(dateRange.split(' - ')[1])
+    fromDate.value = DateTime.fromMillis(from)
+    toDate.value = DateTime.fromMillis(to)
+    selectedItem.value = unref(dateRangeOption)
+  }
+}
 
-    const dateRangeOption = computed(() => {
-      if (!unref(fromDate) || !unref(toDate)) {
-        return null
-      }
+const dateRangeApplied = computed(() =>
+  queryItemAsString(unref(currentRouteQuery))?.startsWith('range:')
+)
 
-      const from = formatDateFromDateTime(unref(fromDate), currentLanguage, DateTime.DATE_SHORT)
-      const to = formatDateFromDateTime(unref(toDate), currentLanguage, DateTime.DATE_SHORT)
-      const fromDateMillis = unref(fromDate).toMillis()
-      const toDateMillis = unref(toDate).toMillis()
+const dateRangeValid = computed(() => {
+  if (!unref(fromDate) || !unref(toDate)) {
+    return false
+  }
+  return unref(fromDate) <= unref(toDate)
+})
 
-      return {
-        [props.idAttribute]: `range:${fromDateMillis} - ${toDateMillis}`,
-        [props.displayNameAttribute]: `${from} - ${to}`
-      }
-    })
+const dateRangeOption = computed(() => {
+  if (!unref(fromDate) || !unref(toDate)) {
+    return null
+  }
 
-    const applyDateRangeFilter = async () => {
-      selectedItem.value = unref(dateRangeOption)
-      await setRouteQuery()
-      unref(filterChip).hideDrop()
-      emit('selectionChange', unref(selectedItem))
-    }
+  const from = formatDateFromDateTime(unref(fromDate), currentLanguage, DateTime.DATE_SHORT)
+  const to = formatDateFromDateTime(unref(toDate), currentLanguage, DateTime.DATE_SHORT)
+  const fromDateMillis = unref(fromDate).toMillis()
+  const toDateMillis = unref(toDate).toMillis()
 
-    const setDateRangeDate = (
-      { date, error }: { date: DateTime; error: boolean },
-      type: 'from' | 'to'
-    ) => {
-      if (error) {
-        console.error('date could not be set')
-        return
-      }
+  return {
+    [idAttribute]: `range:${fromDateMillis} - ${toDateMillis}`,
+    [displayNameAttribute]: `${from} - ${to}`
+  }
+})
 
-      const prop = type === 'from' ? fromDate : toDate
+const applyDateRangeFilter = async () => {
+  selectedItem.value = unref(dateRangeOption)
+  await setRouteQuery()
+  unref(filterChip).hideDrop()
+  emit('selectionChange', unref(selectedItem))
+}
 
-      if (!date) {
-        prop.value = undefined
-        return
-      }
+const setDateRangeDate = (
+  { date, error }: { date: DateTime; error: boolean },
+  type: 'from' | 'to'
+) => {
+  if (error) {
+    console.error('date could not be set')
+    return
+  }
 
-      const formattedDate = type === 'from' ? date.startOf('day') : date.endOf('day')
-      prop.value = formattedDate
-    }
+  const prop = type === 'from' ? fromDate : toDate
 
-    expose({ setSelectedItemsBasedOnQuery })
+  if (!date) {
+    prop.value = undefined
+    return
+  }
 
-    onMounted(() => {
-      setSelectedItemsBasedOnQuery()
-    })
+  const formattedDate = type === 'from' ? date.startOf('day') : date.endOf('day')
+  prop.value = formattedDate
+}
 
-    return {
-      clearFilter,
-      displayedItems,
-      isItemSelected,
-      selectedItem,
-      onShowDrop,
-      onHideDrop,
-      filterChip,
-      toggleItemSelection,
-      setSelectedItemsBasedOnQuery,
-      fromDate,
-      toDate,
-      dateRangeValid,
-      applyDateRangeFilter,
-      dateRangeApplied,
-      setDateRangeDate,
-      dateRangeClicked,
-      currentTheme,
+defineExpose({ setSelectedItemsBasedOnQuery })
 
-      // for unit tests
-      queryParam
-    }
-  }
+onMounted(() => {
+  setSelectedItemsBasedOnQuery()
 })
 </script>
 <style scoped>
diff --git a/packages/web-pkg/tests/unit/components/Filters/DateFilter.spec.ts b/packages/web-pkg/tests/unit/components/Filters/DateFilter.spec.ts
index 6482912a6e..239aebf041 100644
--- a/packages/web-pkg/tests/unit/components/Filters/DateFilter.spec.ts
+++ b/packages/web-pkg/tests/unit/components/Filters/DateFilter.spec.ts
@@ -50,13 +50,13 @@ describe('DateFilter', () => {
       await item.trigger('click')
       expect(mocks.$router.push).toHaveBeenCalledWith(
         expect.objectContaining({
-          query: expect.objectContaining({ [wrapper.vm.queryParam]: '1' })
+          query: expect.objectContaining({ q_users: '1' })
         })
       )
     })
     it('sets the selected items initially when given via query param', () => {
       const { wrapper } = getWrapper({ initialQuery: '1' })
-      expect(wrapper.vm.selectedItem).toEqual(filterItems[0])
+      expect(wrapper.find('li [data-testid="today"]').exists()).toBeTruthy()
     })
   })
 
@@ -89,11 +89,11 @@ describe('DateFilter', () => {
     })
     it('back button should close the custom date range panel', async () => {
       const { wrapper } = getWrapper()
-      wrapper.vm.dateRangeClicked = true
+      ;(wrapper.vm as any).dateRangeClicked = true
       await wrapper.vm.$nextTick()
       const backBtn = wrapper.find(selectors.customDateRangeBackBtn)
       await backBtn.trigger('click')
-      expect(wrapper.vm.dateRangeClicked).toBeFalsy()
+      expect((wrapper.vm as any).dateRangeClicked).toBeFalsy()
     })
     describe('apply button', () => {
       it('is not clickable without dates entered', async () => {
@@ -104,8 +104,8 @@ describe('DateFilter', () => {
       })
       it('is not clickable when from date is after to date', async () => {
         const { wrapper } = getWrapper()
-        wrapper.vm.fromDate = DateTime.now().plus({ days: 1 })
-        wrapper.vm.toDate = DateTime.now()
+        ;(wrapper.vm as any).fromDate = DateTime.now().plus({ days: 1 })
+        ;(wrapper.vm as any).toDate = DateTime.now()
         await wrapper.vm.$nextTick()
         const applyBtn = wrapper.find(selectors.customDateRangeApplyBtn)
         await applyBtn.trigger('click')
@@ -113,8 +113,8 @@ describe('DateFilter', () => {
       })
       it('emits a selection change on click with today entered as date', async () => {
         const { wrapper } = getWrapper()
-        wrapper.vm.fromDate = DateTime.now()
-        wrapper.vm.toDate = DateTime.now()
+        ;(wrapper.vm as any).fromDate = DateTime.now()
+        ;(wrapper.vm as any).toDate = DateTime.now()
         await wrapper.vm.$nextTick()
         const applyBtn = wrapper.find(selectors.customDateRangeApplyBtn)
         await applyBtn.trigger('click')