From 628b148d3e2f54e8961bb91ab9d841bd85992355 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Wed, 1 Nov 2023 01:13:28 +0100
Subject: [PATCH] fix: Use `NcDialog` instead of custom dialog component now
 that it is upstreamed

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 lib/components/DialogBase.vue            | 233 -----------------------
 lib/components/DialogButton.vue          |  35 ----
 lib/components/FilePicker/FilePicker.vue |   7 +-
 lib/components/types.ts                  |   1 +
 package-lock.json                        |  72 +++----
 package.json                             |   7 +-
 6 files changed, 39 insertions(+), 316 deletions(-)
 delete mode 100644 lib/components/DialogBase.vue
 delete mode 100644 lib/components/DialogButton.vue

diff --git a/lib/components/DialogBase.vue b/lib/components/DialogBase.vue
deleted file mode 100644
index 3f9e35e2..00000000
--- a/lib/components/DialogBase.vue
+++ /dev/null
@@ -1,233 +0,0 @@
-<template>
-	<NcModal v-if="open"
-		v-bind="modalProps"
-		class="dialog__modal"
-		@close="handleClose">
-		<!-- The dialog name / header -->
-		<h2 class="dialog__name" v-text="name" />
-		<div class="dialog" :class="dialogClasses">
-			<div ref="wrapper" :class="['dialog__wrapper', { 'dialog__wrapper--collapsed': isNavigationCollapsed }]">
-				<!-- When the navigation is collapsed (too small dialog) it is displayed above the main content, otherwise on the inline start -->
-				<nav v-if="hasNavigation" class="dialog__navigation" :class="navigationClasses">
-					<slot name="navigation" :is-collapsed="isNavigationCollapsed" />
-				</nav>
-				<!-- Main dialog content -->
-				<div class="dialog__content" :class="contentClasses">
-					<slot>
-						<p>{{ props.message }}</p>
-					</slot>
-				</div>
-			</div>
-			<!-- The dialog actions aka the buttons -->
-			<div class="dialog__actions">
-				<slot name="actions">
-					<DialogButton v-for="(button, idx) in props.buttons"
-						:key="idx"
-						v-bind="button"
-						@click="handleClose" />
-				</slot>
-			</div>
-		</div>
-	</NcModal>
-</template>
-
-<script setup lang="ts">
-import type { IDialogButton } from './types'
-
-import { NcModal } from '@nextcloud/vue'
-import { useElementSize } from '@vueuse/core'
-import { computed, ref, useSlots } from 'vue'
-
-import DialogButton from './DialogButton.vue'
-
-const props = withDefaults(defineProps<{
-	/** Name of the dialog (the heading) */
-	name: string
-	/** Text of the dialog */
-	message?: string
-	/** Additional elements to add to the focus trap */
-	additionalTrapElements?: string[]
-	/**
-	 * The element where to mount the dialog, if `null` is passed the dialog is mounted in place
-	 * @default 'body'
-	 */
-	container?: string | null
-	/**
-	 * Size of the underlying NcModal
-	 * @default 'small'
-	 */
-	size?: 'small' | 'normal' | 'large' | 'full'
-	/**
-	 * Buttons to display
-	 * @default []
-	 */
-	buttons?: readonly IDialogButton[]
-	/**
-	 * Optionally pass additionaly classes which will be set on the navigation for custom styling
-	 * @default []
-	 * @example
-	 * ```html
-	 * <DialogBase :navigation-classes="['mydialog-navigation']"><!-- --></DialogBase>
-	 * <!-- ... -->
-	 * <style lang="scss">
-	 * :deep(.mydialog-navigation) {
-	 *     flex-direction: row-reverse;
-	 * }
-	 * </style>
-	 * ```
-	 */
-	navigationClasses?: string[]
-	/**
-	 * Optionally pass additionaly classes which will be set on the content wrapper for custom styling
-	 * @default []
-	 */
-	contentClasses?: string[]
-	/**
-	 * Optionally pass additionaly classes which will be set on the dialog itself
-	 * (the default `class` attribute will be set on the modal wrapper)
-	 */
-	dialogClasses?: string|Record<string, boolean>|(string|Record<string, boolean>)[]
-}>(), {
-	additionalTrapElements: () => [],
-	buttons: () => [],
-	container: undefined,
-	message: '',
-	contentClasses: () => [],
-	dialogClasses: () => [],
-	navigationClasses: () => [],
-	size: 'small',
-})
-
-const emit = defineEmits<{
-	(e: 'close'): void
-}>()
-
-const slots = useSlots()
-
-/**
- * The dialog wrapper element
- */
-const wrapper = ref<HTMLDivElement>()
-
-/**
- * We use the dialog width to decide if we collapse the navigation (flex direction row)
- */
-const { width: dialogWidth } = useElementSize(wrapper)
-
-/**
- * Whether the navigation is collapsed due to dialog and window size
- * (collapses when modal is below: 900px modal width - 2x 12px margin)
- */
-const isNavigationCollapsed = computed(() => dialogWidth.value < 876)
-
-/**
- * Whether a navigation was passed and the element should be displayed
- */
-const hasNavigation = computed(() => slots?.navigation !== undefined)
-
-/**
- * Whether the dialog is currently open
- */
-const open = ref(true)
-
-/**
- * Handle closing the dialog, will emit the `close` event
- */
-const handleClose = () => {
-	open.value = false
-	emit('close')
-}
-
-/**
- * Properties to pass to the underlying NcModal
- */
-const modalProps = computed(() => ({
-	additionalTrapElements: props.additionalTrapElements,
-	container: props.container === undefined ? 'body' : props.container,
-	name: props.name,
-	size: props.size,
-	enableSlideshow: false,
-	enableSwipe: false,
-}))
-</script>
-
-<style lang="scss" scoped>
-.dialog {
-	height: 100%;
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-
-	&__modal {
-		:deep(.modal-container) {
-			display: flex !important;
-		}
-	}
-
-	&__wrapper {
-		margin-inline: 12px;
-		margin-block: 0 12px; // remove margin to align header with close button
-		display: flex;
-		flex-direction: row;
-		// Auto scale to fit
-		flex: 1;
-		min-height: 0;
-
-		&--collapsed {
-			flex-direction: column;
-		}
-	}
-
-	&__navigation {
-		display: flex;
-		flex-shrink: 0;
-	}
-
-	// Navigation styling when side-by-side with content
-	&__wrapper:not(&__wrapper--collapsed) &__navigation {
-		flex-direction: column;
-
-		overflow: hidden auto;
-		height: 100%;
-		min-width: 200px;
-		margin-inline-end: 20px;
-	}
-
-	// Navigation styling when on top of content
-	&__wrapper#{&}__wrapper--collapsed &__navigation {
-		flex-direction: row;
-		justify-content: space-between;
-
-		overflow: auto hidden;
-		width: 100%;
-		min-width: 100%;
-	}
-
-	&__name {
-		// Same as the NcAppSettingsDialog
-		text-align: center;
-		// Should be the same height as the close button (but allow the heading to wrap in case of overflow)
-		min-height: var(--default-clickable-area);
-		line-height: var(--default-clickable-area);
-		margin-block: 4px 12px; // start = 4px to align with close button
-		// Make sure the close button does not overflow the title
-		margin-inline-end: calc(var(--default-clickable-area) + 4px);
-	}
-
-	&__content {
-		// Auto fit
-		flex: 1;
-		min-height: 0;
-	}
-
-	&__actions {
-		display: flex;
-		gap: 6px;
-		align-content: center;
-		width: fit-content;
-		margin-inline: auto 12px;
-		margin-block: 0 12px;
-	}
-}
-</style>
diff --git a/lib/components/DialogButton.vue b/lib/components/DialogButton.vue
deleted file mode 100644
index 02ab9ab9..00000000
--- a/lib/components/DialogButton.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-	<NcButton :aria-label="props.label" :type="props.type" @click="handleClick">
-		{{ props.label }}
-		<template v-if="props.icon !== undefined" #icon>
-			<NcIconSvgWrapper v-if="typeof props.icon === 'string'" :svg="props.icon" />
-			<component :is="props.icon" v-else :size="20" />
-		</template>
-	</NcButton>
-</template>
-
-<script setup lang="ts">
-import type { IDialogButton } from './types'
-import { NcButton, NcIconSvgWrapper } from '@nextcloud/vue'
-
-// with vue 3.3:
-// const props = defineProps<IDialogButton>()
-
-const props = withDefaults(defineProps<{
-	callback: IDialogButton['callback'],
-	label: IDialogButton['label'],
-	icon?: IDialogButton['icon'],
-	type?: IDialogButton['type'],
-}>(), {
-	icon: undefined,
-	type: 'secondary',
-})
-
-const emit = defineEmits<(e: 'click', event: MouseEvent) => void>()
-
-const handleClick = (e: MouseEvent) => {
-	props.callback?.()
-	emit('click', e)
-}
-
-</script>
diff --git a/lib/components/FilePicker/FilePicker.vue b/lib/components/FilePicker/FilePicker.vue
index e013f65a..770a19c8 100644
--- a/lib/components/FilePicker/FilePicker.vue
+++ b/lib/components/FilePicker/FilePicker.vue
@@ -1,5 +1,5 @@
 <template>
-	<DialogBase v-bind="dialogProps" @close="emit('close')">
+	<NcDialog v-bind="dialogProps" @close="emit('close')">
 		<template #navigation="{ isCollapsed }">
 			<FilePickerNavigation :is-collapsed="isCollapsed" :current-view.sync="currentView" :filter-string.sync="filterString" />
 		</template>
@@ -41,7 +41,7 @@
 				</template>
 			</NcEmptyContent>
 		</div>
-	</DialogBase>
+	</NcDialog>
 </template>
 
 <script setup lang="ts">
@@ -49,14 +49,13 @@ import type { IFilePickerButton, IFilePickerButtonFactory, IFilePickerFilter } f
 import type { Node } from '@nextcloud/files'
 
 import IconFile from 'vue-material-design-icons/File.vue'
-import DialogBase from '../DialogBase.vue'
 import FileList from './FileList.vue'
 import FilePickerBreadcrumbs from './FilePickerBreadcrumbs.vue'
 import FilePickerNavigation from './FilePickerNavigation.vue'
 
 import { emit as emitOnEventBus } from '@nextcloud/event-bus'
 import { davRootPath } from '@nextcloud/files'
-import { NcEmptyContent } from '@nextcloud/vue'
+import { NcDialog, NcEmptyContent } from '@nextcloud/vue'
 import { join } from 'path'
 import { computed, onMounted, ref, toRef } from 'vue'
 import { showError } from '../../toast'
diff --git a/lib/components/types.ts b/lib/components/types.ts
index 04d8a95b..b129dca1 100644
--- a/lib/components/types.ts
+++ b/lib/components/types.ts
@@ -25,6 +25,7 @@ import type { AsyncComponent, Component } from 'vue'
 
 /**
  * Interface for defining buttons passed to the Dialog component
+ * See NcDialogButton
  */
 export interface IDialogButton {
 	/** Label of the button */
diff --git a/package-lock.json b/package-lock.json
index 0698fdd9..218bce04 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,15 +44,16 @@
         "typescript-plugin-css-modules": "^5.0.2",
         "vite": "^4.5.0",
         "vitest": "^0.34.6",
-        "vue-material-design-icons": "^5.2.0"
+        "vue-material-design-icons": "^5.2.0",
+        "vue-template-compiler": "^2.7.15"
       },
       "engines": {
         "node": "^20.0.0",
         "npm": "^9.0.0"
       },
       "peerDependencies": {
-        "@nextcloud/vue": "^8.0.0-beta.8",
-        "vue": "^2.7.14"
+        "@nextcloud/vue": "^8.0.0-beta.10",
+        "vue": "^2.7.15"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -3461,27 +3462,16 @@
       }
     },
     "node_modules/@nextcloud/browser-storage": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/browser-storage/-/browser-storage-0.2.0.tgz",
-      "integrity": "sha512-qRetNoCMHzfJyuQ7uvlwUXNwXlm5eSy4h8hI0Oa9HKbej57WGBYxRqsHElFzipSPh7mBUdFnz5clGpzIQx8+HQ==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/browser-storage/-/browser-storage-0.3.0.tgz",
+      "integrity": "sha512-vqc26T4WQ3y9EbFpHh4dl/FN7ahEfEoc0unQmsdJ2YSZNTxTvAXAasWI6HFNcHi10b5rEYxxEYjAwKF34th3Aw==",
       "peer": true,
       "dependencies": {
-        "core-js": "3.25.5"
+        "core-js": "3.33.0"
       },
       "engines": {
-        "node": "^16.0.0",
-        "npm": "^7.0.0 || ^8.0.0"
-      }
-    },
-    "node_modules/@nextcloud/browser-storage/node_modules/core-js": {
-      "version": "3.25.5",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.25.5.tgz",
-      "integrity": "sha512-nbm6eZSjm+ZuBQxCUPQKQCoUEfFOXjUZ8dTTyikyKaWrTYmAVbykQfwsKE5dBK88u3QCkCrzsx/PPlKfhsvgpw==",
-      "hasInstallScript": true,
-      "peer": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/core-js"
+        "node": "^20.0.0",
+        "npm": "^9.0.0"
       }
     },
     "node_modules/@nextcloud/browserslist-config": {
@@ -3830,15 +3820,15 @@
       }
     },
     "node_modules/@nextcloud/vue": {
-      "version": "8.0.0-beta.8",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-8.0.0-beta.8.tgz",
-      "integrity": "sha512-Sbq1l5cH5SU2eE/b/w+99t3mcGHLOTjgJYf2ltxbDEuYcgfn+Ihz0RGxcp5s1KNI8S9eifKSI9/bts7nQMHj8g==",
+      "version": "8.0.0-beta.10",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-8.0.0-beta.10.tgz",
+      "integrity": "sha512-vyNq8dZE3QkIYOyumT+JX6YkAJYZpLcFdpwIiqeteAyELTAWzprFaPRUuC9yLI/b+HHv8IKeWQ/7nQcKWijUyQ==",
       "peer": true,
       "dependencies": {
         "@floating-ui/dom": "^1.1.0",
         "@nextcloud/auth": "^2.0.0",
         "@nextcloud/axios": "^2.0.0",
-        "@nextcloud/browser-storage": "^0.2.0",
+        "@nextcloud/browser-storage": "^0.3.0",
         "@nextcloud/calendar-js": "^6.0.0",
         "@nextcloud/capabilities": "^1.0.4",
         "@nextcloud/event-bus": "^3.0.0",
@@ -3846,7 +3836,7 @@
         "@nextcloud/l10n": "^2.0.1",
         "@nextcloud/logger": "^2.2.1",
         "@nextcloud/router": "^2.0.0",
-        "@nextcloud/vue-select": "^3.23.0",
+        "@nextcloud/vue-select": "^3.24.0",
         "@vueuse/components": "^10.0.2",
         "@vueuse/core": "^10.1.2",
         "clone": "^2.1.2",
@@ -3883,9 +3873,9 @@
       }
     },
     "node_modules/@nextcloud/vue-select": {
-      "version": "3.23.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue-select/-/vue-select-3.23.0.tgz",
-      "integrity": "sha512-TerpWxDtbdwda32xtrLcqN8CjcQwVwCrEdHIHIAPQ2y3Ktl/dcjQxGn0onRZqk9+4ZxPGMYdX7LIWRKCHUlrmQ==",
+      "version": "3.24.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue-select/-/vue-select-3.24.0.tgz",
+      "integrity": "sha512-+TQYaqB57OcwG3XSKpUtVcbUZIkX8KHzjTCWRFAiRqwryXTuBvY/JHzB5i31BFHJ6CK+l8WyBu8LgmtQW8ktrw==",
       "peer": true,
       "peerDependencies": {
         "vue": "2.x"
@@ -5033,9 +5023,9 @@
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "2.7.14",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
-      "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==",
+      "version": "2.7.15",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.15.tgz",
+      "integrity": "sha512-FCvIEevPmgCgqFBH7wD+3B97y7u7oj/Wr69zADBf403Tui377bThTjBvekaZvlRr4IwUAu3M6hYZeULZFJbdYg==",
       "dependencies": {
         "@babel/parser": "^7.18.4",
         "postcss": "^8.4.14",
@@ -7079,9 +7069,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.32.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.32.0.tgz",
-      "integrity": "sha512-rd4rYZNlF3WuoYuRIDEmbR/ga9CeuWX9U05umAvgrrZoHY4Z++cp/xwPQMvUpBB4Ag6J8KfD80G0zwCyaSxDww==",
+      "version": "3.33.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.33.0.tgz",
+      "integrity": "sha512-HoZr92+ZjFEKar5HS6MC776gYslNOKHt75mEBKWKnPeFDpZ6nH5OeF3S6HFT1mUAUZKrzkez05VboaX8myjSuw==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -18194,11 +18184,11 @@
       "integrity": "sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg=="
     },
     "node_modules/vue": {
-      "version": "2.7.14",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.14.tgz",
-      "integrity": "sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==",
+      "version": "2.7.15",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.15.tgz",
+      "integrity": "sha512-a29fsXd2G0KMRqIFTpRgpSbWaNBK3lpCTOLuGLEDnlHWdjB8fwl6zyYZ8xCrqkJdatwZb4mGHiEfJjnw0Q6AwQ==",
       "dependencies": {
-        "@vue/compiler-sfc": "2.7.14",
+        "@vue/compiler-sfc": "2.7.15",
         "csstype": "^3.1.0"
       }
     },
@@ -18349,9 +18339,9 @@
       "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
     },
     "node_modules/vue-template-compiler": {
-      "version": "2.7.14",
-      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
-      "integrity": "sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==",
+      "version": "2.7.15",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.15.tgz",
+      "integrity": "sha512-yQxjxMptBL7UAog00O8sANud99C6wJF+7kgbcwqkvA38vCGF7HWE66w0ZFnS/kX5gSoJr/PQ4/oS3Ne2pW37Og==",
       "dev": true,
       "dependencies": {
         "de-indent": "^1.0.2",
diff --git a/package.json b/package.json
index 1756bc80..ffa40d46 100644
--- a/package.json
+++ b/package.json
@@ -50,8 +50,8 @@
     "dist"
   ],
   "peerDependencies": {
-    "@nextcloud/vue": "^8.0.0-beta.8",
-    "vue": "^2.7.14"
+    "@nextcloud/vue": "^8.0.0-beta.10",
+    "vue": "^2.7.15"
   },
   "dependencies": {
     "@mdi/svg": "^7.3.67",
@@ -89,7 +89,8 @@
     "typescript-plugin-css-modules": "^5.0.2",
     "vite": "^4.5.0",
     "vitest": "^0.34.6",
-    "vue-material-design-icons": "^5.2.0"
+    "vue-material-design-icons": "^5.2.0",
+    "vue-template-compiler": "^2.7.15"
   },
   "engines": {
     "node": "^20.0.0",