fix(VFileInput): add hideInput prop (#17270)

resolves #17142 Co-authored-by: John Leider <john@vuetifyjs.com>
vuetifyjs · Apr 15, 2024 · 614262e · 614262e
1 parent f909381
commit 614262e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/packages/vuetify/src/components/VFileInput/VFileInput.sass b/packages/vuetify/src/components/VFileInput/VFileInput.sass
@@ -6,6 +6,16 @@
 // Block
 .v-file-input
 
+  &--hide.v-input
+    .v-field,
+    .v-input__control,
+    .v-input__details
+      display: none
+
+    .v-input__prepend
+      grid-area: control
+      margin: 0 auto
+
   &--chips.v-input--density-compact
     .v-field--variant-solo,
     .v-field--variant-solo-inverted,

diff --git a/packages/vuetify/src/components/VFileInput/VFileInput.tsx b/packages/vuetify/src/components/VFileInput/VFileInput.tsx
@@ -51,6 +51,7 @@ export const makeVFileInputProps = propsFactory({
     type: String,
     default: '$vuetify.fileInput.counter',
   },
+  hideInput: Boolean,
   multiple: Boolean,
   showSize: {
     type: [Boolean, Number, String] as PropType<boolean | 1000 | 1024>,
@@ -178,6 +179,7 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
             'v-file-input',
             {
               'v-file-input--chips': !!props.chips,
+              'v-file-input--hide': props.hideInput,
               'v-input--plain-underlined': isPlainOrUnderlined.value,
             },
             props.class,
@@ -247,7 +249,7 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
                       />
 
                       <div class={ fieldClass }>
-                        { !!model.value?.length && (
+                        { !!model.value?.length && !props.hideInput && (
                           slots.selection ? slots.selection({
                             fileNames: fileNames.value,
                             totalBytes: totalBytes.value,