From 9141727c10df0a3d3d94876d681f5358e793ebd9 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Thu, 4 Jul 2024 14:15:57 +0200
Subject: [PATCH] fix(NcDialog): Properly export Typescript types

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 src/components/NcDialog/NcDialog.vue          | 25 ++++++++++++-------
 .../NcDialogButton/NcDialogButton.vue         | 14 ++++++-----
 .../NcDialogButton/{index.js => index.ts}     |  0
 src/components/NcModal/NcModal.vue            |  4 +--
 src/utils/VueTypes.ts                         | 11 ++++++++
 5 files changed, 37 insertions(+), 17 deletions(-)
 rename src/components/NcDialogButton/{index.js => index.ts} (100%)
 create mode 100644 src/utils/VueTypes.ts

diff --git a/src/components/NcDialog/NcDialog.vue b/src/components/NcDialog/NcDialog.vue
index 1f559926bf..66badb8d18 100644
--- a/src/components/NcDialog/NcDialog.vue
+++ b/src/components/NcDialog/NcDialog.vue
@@ -120,7 +120,10 @@ export default {
 	</NcModal>
 </template>
 
-<script>
+<script lang="ts">
+import type { PropType } from 'vue'
+import type { ComponentProps } from '../../utils/VueTypes.ts'
+
 import { useElementSize } from '@vueuse/core'
 import { computed, defineComponent, ref } from 'vue'
 
@@ -129,6 +132,8 @@ import NcDialogButton from '../NcDialogButton/index.js'
 
 import GenRandomId from '../../utils/GenRandomId.js'
 
+type NcDialogButtonProps = ComponentProps<typeof NcDialogButton>
+
 export default defineComponent({
 	name: 'NcDialog',
 
@@ -152,7 +157,7 @@ export default defineComponent({
 
 		/** Additional elements to add to the focus trap */
 		additionalTrapElements: {
-			type: Array,
+			type: Array as PropType<(string|HTMLElement)[]>,
 			validator: (arr) => {
 				return (
 					Array.isArray(arr) && arr.every(
@@ -189,10 +194,10 @@ export default defineComponent({
 		 * @type {'small'|'normal'|'large'|'full'}
 		 */
 		size: {
-			type: String,
+			type: String as PropType<'small'|'normal'|'large'|'full'>,
 			required: false,
 			default: 'small',
-			validator: (value) => typeof value === 'string' && ['small', 'normal', 'large', 'full'].includes(value),
+			validator: (value: string) => ['small', 'normal', 'large', 'full'].includes(value),
 		},
 
 		/**
@@ -200,10 +205,13 @@ export default defineComponent({
 		 * @default []
 		 */
 		buttons: {
-			type: Array,
+			type: Array as PropType<NcDialogButtonProps[]>,
 			required: false,
 			default: () => ([]),
-			validator: (value) => Array.isArray(value) && value.every((element) => typeof element === 'object'),
+			validator(value: unknown[]) {
+				return Array.isArray(value)
+					&& value.every((element) => typeof element === 'object')
+			},
 		},
 
 		/**
@@ -304,14 +312,13 @@ export default defineComponent({
 	setup(props, { emit, slots }) {
 		/**
 		 * The dialog wrapper element
-		 * @type {import('vue').Ref<HTMLDivElement>}
 		 */
-		const wrapper = ref()
+		const wrapper = ref<HTMLDivElement>()
 
 		/**
 		 * We use the dialog width to decide if we collapse the navigation (flex direction row)
 		 */
-		const { width: dialogWidth } = useElementSize(wrapper, { width: 900 })
+		const { width: dialogWidth } = useElementSize(wrapper, { width: 900, height: 0 })
 
 		/**
 		 * Whether the navigation is collapsed due to dialog and window size
diff --git a/src/components/NcDialogButton/NcDialogButton.vue b/src/components/NcDialogButton/NcDialogButton.vue
index f926a32354..6b1e6c53e8 100644
--- a/src/components/NcDialogButton/NcDialogButton.vue
+++ b/src/components/NcDialogButton/NcDialogButton.vue
@@ -22,9 +22,9 @@ Dialog button component used by NcDialog in the actions slot to display the butt
 	</NcButton>
 </template>
 
-<script>
-import { defineComponent } from 'vue'
-import NcButton from '../NcButton/index.ts'
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+import NcButton, { ButtonType } from '../NcButton/index'
 import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
 
 export default defineComponent({
@@ -67,10 +67,12 @@ export default defineComponent({
 		 * @type {'primary'|'secondary'|'error'|'warning'|'success'}
 		 */
 		type: {
-			type: String,
+			type: String as PropType<ButtonType>,
+			default: ButtonType.Secondary,
 			required: false,
-			default: 'secondary',
-			validator: (type) => typeof type === 'string' && ['primary', 'secondary', 'error', 'warning', 'success'].includes(type),
+			validator(value: string) {
+				return Object.values(ButtonType).includes(value as ButtonType)
+			}
 		},
 
 		/**
diff --git a/src/components/NcDialogButton/index.js b/src/components/NcDialogButton/index.ts
similarity index 100%
rename from src/components/NcDialogButton/index.js
rename to src/components/NcDialogButton/index.ts
diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue
index 1dd0f2a9b5..ab791166f5 100644
--- a/src/components/NcModal/NcModal.vue
+++ b/src/components/NcModal/NcModal.vue
@@ -321,7 +321,7 @@ export default {
 <script>
 import { useSwipe } from '@vueuse/core'
 import { createFocusTrap } from 'focus-trap'
-import Vue from 'vue'
+import { warn as VueWarn } from 'vue'
 
 import { getTrapStack } from '../../utils/focusTrap.js'
 import { t } from '../../l10n.js'
@@ -601,7 +601,7 @@ export default {
 	},
 	mounted() {
 		if (!this.name && !this.labelId) {
-			Vue.util.warn('[NcModal] You need either set the name or set a `labelId` for accessibility.')
+			VueWarn('[NcModal] You need either set the name or set a `labelId` for accessibility.')
 		}
 
 		// init clear view
diff --git a/src/utils/VueTypes.ts b/src/utils/VueTypes.ts
new file mode 100644
index 0000000000..5181a72467
--- /dev/null
+++ b/src/utils/VueTypes.ts
@@ -0,0 +1,11 @@
+/**
+ * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { AllowedComponentProps, Component, VNodeProps } from 'vue'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ComponentProps<C extends Component> = C extends new (...args: any) => any
+	? Omit<InstanceType<C>['$props'], keyof VNodeProps | keyof AllowedComponentProps | `on${string}`>
+	: never;