feat(VFileUpload): hook up disabled and clearable functionality

vuetifyjs · Apr 30, 2024 · 77eb2bd · 77eb2bd
1 parent 0326625
commit 77eb2bd
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 24 deletions.
diff --git a/packages/vuetify/src/labs/VFileUpload/VFileUpload.sass b/packages/vuetify/src/labs/VFileUpload/VFileUpload.sass
@@ -24,6 +24,10 @@
     .v-overlay__scrim
       pointer-events: none
 
+    &--disabled
+      pointer-events: none
+      opacity: var(--v-disabled-opacity)
+
     &--dragging
       > *
         pointer-events: none

diff --git a/packages/vuetify/src/labs/VFileUpload/VFileUpload.tsx b/packages/vuetify/src/labs/VFileUpload/VFileUpload.tsx
@@ -66,6 +66,7 @@ export const makeVFileUploadProps = propsFactory({
       return wrapInArray(val).every(v => v != null && typeof v === 'object')
     },
   },
+  clearable: Boolean,
   disabled: Boolean,
   hideBrowse: Boolean,
   multiple: Boolean,
@@ -203,6 +204,7 @@ export const VFileUpload = genericComponent<VFileUploadSlots>()({
               'v-file-upload',
               {
                 'v-file-upload--clickable': !hasBrowse,
+                'v-file-upload--disabled': props.disabled,
                 'v-file-upload--dragging': dragOver.value,
               },
               densityClasses.value,
@@ -255,18 +257,20 @@ export const VFileUpload = genericComponent<VFileUploadSlots>()({
                   <>
                     { !slots.browse ? (
                       <VBtn
+                        readonly={ props.disabled }
+                        size="large"
                         text={ t(props.browseText) }
                         variant="tonal"
-                        size="large"
                         onClick={ onClick }
                       />
                     ) : (
                       <VDefaultsProvider
                         defaults={{
                           VBtn: {
+                            readonly: props.disabled,
+                            size: 'large',
                             text: t(props.browseText),
                             variant: 'tonal',
-                            size: 'large',
                           },
                         }}
                       >
@@ -309,6 +313,8 @@ export const VFileUpload = genericComponent<VFileUploadSlots>()({
                     defaults={{
                       VFileUploadItem: {
                         file,
+                        clearable: props.clearable,
+                        disabled: props.disabled,
                         showSize: props.showSize,
                       },
                     }}

diff --git a/packages/vuetify/src/labs/VFileUpload/VFileUploadItem.tsx b/packages/vuetify/src/labs/VFileUpload/VFileUploadItem.tsx
@@ -19,6 +19,7 @@ export type VFileUploadItemSlots = {
 } & VListItemSlots
 
 export const makeVFileUploadItemProps = propsFactory({
+  clearable: Boolean,
   file: {
     type: Object as PropType<File>,
     default: null,
@@ -98,28 +99,32 @@ export const VFileUploadItem = genericComponent<VFileUploadItemSlots>()({
             ),
             append: slotProps => (
               <>
-                { !slots.clear ? (
-                  <VBtn
-                    icon="$clear"
-                    density="comfortable"
-                    variant="text"
-                    onClick={ onClickRemove }
-                  />
-                ) : (
-                  <VDefaultsProvider
-                    defaults={{
-                      VBtn: {
-                        icon: '$clear',
-                        density: 'comfortable',
-                        variant: 'text',
-                      },
-                    }}
-                  >
-                    { slots.clear?.({
-                      ...slotProps,
-                      props: { onClick: onClickRemove },
-                    }) ?? (<VBtn />)}
-                  </VDefaultsProvider>
+                { props.clearable && (
+                  <>
+                    { !slots.clear ? (
+                      <VBtn
+                        icon="$clear"
+                        density="comfortable"
+                        variant="text"
+                        onClick={ onClickRemove }
+                      />
+                    ) : (
+                      <VDefaultsProvider
+                        defaults={{
+                          VBtn: {
+                            icon: '$clear',
+                            density: 'comfortable',
+                            variant: 'text',
+                          },
+                        }}
+                      >
+                        { slots.clear?.({
+                          ...slotProps,
+                          props: { onClick: onClickRemove },
+                        }) ?? (<VBtn />)}
+                      </VDefaultsProvider>
+                    )}
+                  </>
                 )}
 
                 { slots.append?.(slotProps) }