1
1
<template >
2
- <div :class =" wrapperClasses" >
3
- <label v-if =" hasLabelSlot || label" :for =" computedId" class =" form-label" :class =" labelClasses" >
4
- <slot name =" label" >
5
- {{ label }}
6
- </slot >
7
- </label >
8
- <input
9
- :id =" computedId"
10
- v-bind =" $attrs"
11
- ref =" input"
12
- type =" file"
13
- class =" form-control"
14
- :class =" computedClasses"
15
- :form =" form"
16
- :name =" name"
17
- :multiple =" multipleBoolean"
18
- :disabled =" disabledBoolean"
19
- :capture =" computedCapture"
20
- :accept =" computedAccept || undefined"
21
- :required =" requiredBoolean || undefined"
22
- :aria-required =" requiredBoolean || undefined"
23
- :directory =" directoryBoolean"
24
- :webkitdirectory =" directoryBoolean"
25
- @change =" onChange"
26
- @drop =" onDrop"
27
- />
28
- </div >
2
+ <label v-if =" hasLabelSlot || label" :for =" computedId" class =" form-label" :class =" labelClasses" >
3
+ <slot name =" label" >
4
+ {{ label }}
5
+ </slot >
6
+ </label >
7
+ <input
8
+ :id =" computedId"
9
+ v-bind =" $attrs"
10
+ ref =" input"
11
+ type =" file"
12
+ class =" form-control"
13
+ :class =" computedClasses"
14
+ :form =" form"
15
+ :name =" name"
16
+ :multiple =" multipleBoolean"
17
+ :disabled =" disabledBoolean"
18
+ :capture =" computedCapture"
19
+ :accept =" computedAccept || undefined"
20
+ :required =" requiredBoolean || undefined"
21
+ :aria-required =" requiredBoolean || undefined"
22
+ :directory =" directoryBoolean"
23
+ :webkitdirectory =" directoryBoolean"
24
+ @change =" onChange"
25
+ @drop =" onDrop"
26
+ />
29
27
</template >
30
28
31
29
<script setup lang="ts">
32
- import {computed , ref , useSlots } from ' vue'
30
+ import {computed , ref , useSlots , watch } from ' vue'
33
31
import {useFocus , useVModel } from ' @vueuse/core'
34
32
import type {Booleanish , ClassValue , Size } from ' ../../types'
35
33
import {useBooleanish , useId , useStateClass } from ' ../../composables'
@@ -62,7 +60,6 @@ const props = withDefaults(
62
60
state? : Booleanish | null
63
61
modelValue? : File [] | File | null
64
62
label? : string
65
- wrapperClasses? : ClassValue
66
63
labelClasses? : ClassValue
67
64
}>(),
68
65
{
@@ -83,7 +80,6 @@ const props = withDefaults(
83
80
modelValue: null ,
84
81
label: ' ' ,
85
82
labelClasses: undefined ,
86
- wrapperClasses: undefined ,
87
83
}
88
84
)
89
85
@@ -148,10 +144,14 @@ const onDrop = (e: Event) => {
148
144
* Reset the form input
149
145
*/
150
146
const reset = () => {
151
- if (input .value !== null ) {
147
+ modelValue .value = null
148
+ }
149
+
150
+ watch (modelValue , (newValue ) => {
151
+ if (newValue === null && input .value !== null ) {
152
152
input .value .value = ' '
153
153
}
154
- }
154
+ })
155
155
156
156
defineExpose ({
157
157
focus : () => {
0 commit comments