chore: migrate composables to typescript

[mejo-]

🏁 Checklist

• Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
• Sign-off message is added to all commits

🤖 AI (if applicable)

• The content of this PR was partly generated using AI tools
• The AI-generated content was reviewed, comprehended and tested by me

[max-nextcloud]

This looks somewhat odd to me. It's an HTML Element, right? And then it has these additional properties of currentPage, canEdit, etc. Seems like we are mixing two things up here.

[mejo-]

PageInfoBar is a custom element and yes, it has these props. At least that's my understanding.

Though it seems like currentPage is not visible in dom structure, only the others are. When you look at the dom structure, it looks like this:

[mejo-]

I did a bit further research on this.

Vue custom elements expose their component props as JavaScript properties on the DOM element. So e.g. using el.attachmentCount = 3 is the correct API usage.

Though only props with simple types (string, number, boolean) get exposed as HTML attributes in the DOM, complex attributes are only available as JavaScript properties. That's why currentPage is not visible in the DOM.

See also https://vuejs.org/guide/extras/web-components.html#passing-dom-properties and https://web.dev/articles/custom-elements-best-practices.

[mejo-]

I moved the interface to the top of the file and changed extends Element to extends HTMLElement as that's indeed more accurate.

[max-nextcloud]

Ah... I see. Could we move the defineCustomElement to the top of the composable then and use PageInfoBarCE to get the type?

const PageInfoBarCE = defineCustomElement(PageInfoBar, { shadowRoot: false })
type PageInfoBarType = InstanceType<typeof PageInfoBarCE>

[max-nextcloud]

(Based on https://vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs for typing of refs which also kind of applies here i think.)

[mejo-]

Already merged, but maybe something we can improve later on? I gave your approach a quick test and it didn't work out of the box:

With type PageInfoBarType = InstanceType<typeof PageInfoBarCE> and const el = readerEl.value?.querySelector<PageInfoBarType>('page-info-bar'), el.attachmentCount = attachmentCount.value results in

TS2339: Property attachmentCount does not exist on type VueElement

[max-nextcloud]

Thanks a lot for looking into this.

I already commented outside the review as I was not sure if I was gonna finish it. Mostly minor things. One type annotation looks off to me though..