feat(NcDialog): Allow to catch reset event

Sometimes it is useful to also have a reset button,
we already support the native type `reset` so this allows to catch the `reset` event.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

src/components/NcDialog/NcDialog.vue

@@ -95,6 +95,7 @@ Note that this is not possible if the dialog contains a navigation!
 			name="Choose a name"
 			:open.sync="showDialog"
 			@submit="currentName = newName"
+			@reset="newName = ''"
 			@closing="newName = ''">
 			<NcTextField label="New name"
 				placeholder="Min. 6 characters"
@@ -113,8 +114,12 @@ export default {
 		return {
 			showDialog: false,
 			newName: '',
-			currentName: 'none yet.',
+			currentName: 'non yet.',
 			buttons: [
+				{
+					label: 'Reset',
+					nativeType: 'reset',
+				},
 				{
 					label: 'Submit',
 					type: 'primary',
@@ -244,7 +249,7 @@ export default {
 					<NcDialogButton v-for="(button, idx) in buttons"
 						:key="idx"
 						v-bind="button"
-						@click="handleButtonClose" />
+						@click="handleButtonClose(button)" />
 				</slot>
 			</div>
 		</component>
@@ -375,7 +380,7 @@ export default defineComponent({
 		},
 
 		/**
-		 * Optionally pass additionaly classes which will be set on the navigation for custom styling
+		 * Optionally pass additional classes which will be set on the navigation for custom styling
 		 * @default ''
 		 * @example
 		 * ```html
@@ -419,7 +424,7 @@ export default defineComponent({
 		},
 
 		/**
-		 * Optionally pass additionaly classes which will be set on the content wrapper for custom styling
+		 * Optionally pass additional classes which will be set on the content wrapper for custom styling
 		 * @default ''
 		 */
 		contentClasses: {
@@ -429,7 +434,7 @@ export default defineComponent({
 		},
 
 		/**
-		 * Optionally pass additionaly classes which will be set on the dialog itself
+		 * Optionally pass additional classes which will be set on the dialog itself
 		 * (the default `class` attribute will be set on the modal wrapper)
 		 * @default ''
 		 */
@@ -509,6 +514,16 @@ export default defineComponent({
 					/** Forwarded HTMLFormElement submit event (only if `is-form` is set) */
 					emit('submit', event)
 				},
+				/**
+				 * @param {Event} event Form submit event
+				 */
+				reset(event) {
+					event.preventDefault()
+					/**
+					 * Forwarded HTMLFormElement reset event (only if `is-form` is set).
+					 */
+					emit('reset', event)
+				}
 			}
 			: {},
 		)
@@ -524,9 +539,11 @@ export default defineComponent({
 		 * @param {MouseEvent} event The click event
 		 * @param {unknown} result Result of the callback function
 		 */
-		const handleButtonClose = (event, result) => {
-			// Skip close if invalid dialog
-			if (dialogTagName.value === 'form' && !dialogElement.value.reportValidity()) {
+		const handleButtonClose = (button) => {
+			// Skip close on submit if invalid dialog
+			if (button.nativeType === 'submit'
+				&& dialogTagName.value === 'form'
+				&& !dialogElement.value.reportValidity()) {
 				return
 			}
 			handleClosing(result)

src/components/NcDialogButton/NcDialogButton.vue

@@ -35,7 +35,9 @@ import { t } from '../../l10n.js'
 const props = defineProps({
 	/**
 	 * The function that will be called when the button is pressed.
-	 * If the function returns `false` the click is ignored and the dialog will not be closed.
+	 * If the function returns `false` the click is ignored and the dialog will not be closed,
+	 * which is the default behavior of "reset"-buttons.
+	 *
 	 * @type {() => unknown|false|Promise<unknown|false>}
 	 */
 	callback: {
@@ -109,7 +111,9 @@ const handleClick = async (e) => {
 
 	isLoading.value = true
 	try {
-		const result = await props.callback?.()
+		// for reset buttons the default is "false"
+		const fallback = props.nativeType === 'reset' ? false : undefined
+		const result = await props.callback?.() ?? fallback
 		if (result !== false) {
 			/**
 			 * The click event (`MouseEvent`) and the value returned by the callback