feat(useFileDialog): return onCancel handler (#4184)

Author: AndreyYolkin

packages/core/useFileDialog/demo.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import { useFileDialog } from '.'
 
-const { files, open, reset, onChange } = useFileDialog()
+const { files, open, reset, onCancel, onChange } = useFileDialog()
 onChange((files) => {
   /** do something with files */
 })
+
+onCancel(() => {
+  /** do something on cancel */
+})
 </script>
 
 <template>

packages/core/useFileDialog/index.md

@@ -11,14 +11,18 @@ Open file dialog with ease.
 ```ts
 import { useFileDialog } from '@vueuse/core'
 
-const { files, open, reset, onChange } = useFileDialog({
+const { files, open, reset, onCancel, onChange } = useFileDialog({
   accept: 'image/*', // Set to accept only image files
   directory: true, // Select directories instead of files if set true
 })
 
 onChange((files) => {
   /** do something with files */
 })
+
+onCancel(() => {
+  /** do something on cancel */
+})
 ```
 
 ```vue

packages/core/useFileDialog/index.ts

@@ -43,6 +43,7 @@ export interface UseFileDialogReturn {
   open: (localOptions?: Partial<UseFileDialogOptions>) => void
   reset: () => void
   onChange: EventHookOn<FileList | null>
+  onCancel: EventHookOn
 }
 
 /**
@@ -57,7 +58,8 @@ export function useFileDialog(options: UseFileDialogOptions = {}): UseFileDialog
   } = options
 
   const files = ref<FileList | null>(null)
-  const { on: onChange, trigger } = createEventHook()
+  const { on: onChange, trigger: changeTrigger } = createEventHook()
+  const { on: onCancel, trigger: cancelTrigger } = createEventHook()
   let input: HTMLInputElement | undefined
   if (document) {
     input = document.createElement('input')
@@ -66,15 +68,19 @@ export function useFileDialog(options: UseFileDialogOptions = {}): UseFileDialog
     input.onchange = (event: Event) => {
       const result = event.target as HTMLInputElement
       files.value = result.files
-      trigger(files.value)
+      changeTrigger(files.value)
+    }
+
+    input.oncancel = () => {
+      cancelTrigger()
     }
   }
 
   const reset = () => {
     files.value = null
     if (input && input.value) {
       input.value = ''
-      trigger(null)
+      changeTrigger(null)
     }
   }
 
@@ -101,6 +107,7 @@ export function useFileDialog(options: UseFileDialogOptions = {}): UseFileDialog
     files: readonly(files),
     open,
     reset,
+    onCancel,
     onChange,
   }
 }