vuetify 3.0.0-beta.9 → 3.0.1

package/lib/components/VFileInput/VFileInput.mjs

@@ -1,21 +1,18 @@
 import { resolveDirective as _resolveDirective, createVNode as _createVNode, mergeProps as _mergeProps, Fragment as _Fragment } from "vue";
 // Styles
-import "./VFileInput.css"; // Components
+import "./VFileInput.css";
 
+// Components
 import { filterFieldProps, makeVFieldProps } from "../VField/VField.mjs";
 import { filterInputProps, makeVInputProps, VInput } from "../VInput/VInput.mjs";
 import { VChip } from "../VChip/index.mjs";
 import { VCounter } from "../VCounter/index.mjs";
 import { VField } from "../VField/index.mjs"; // Composables
-
-import { IconValue } from "../../composables/icons.mjs";
 import { forwardRefs } from "../../composables/forwardRefs.mjs";
 import { useLocale } from "../../composables/locale.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
-
 import { computed, nextTick, ref } from 'vue';
-import { defineComponent, filterInputAttrs, humanReadableFileSize, useRender, wrapInArray } from "../../util/index.mjs"; // Types
-
+import { callEvent, defineComponent, filterInputAttrs, humanReadableFileSize, useRender, wrapInArray } from "../../util/index.mjs"; // Types
 export const VFileInput = defineComponent({
   name: 'VFileInput',
   inheritAttrs: false,
@@ -41,11 +38,9 @@ export const VFileInput = defineComponent({
         return typeof v === 'boolean' || [1000, 1024].includes(v);
       }
     },
-    ...makeVInputProps(),
-    prependIcon: {
-      type: IconValue,
-      default: '$file'
-    },
+    ...makeVInputProps({
+      prependIcon: '$file'
+    }),
     modelValue: {
       type: Array,
       default: () => [],
@@ -58,11 +53,9 @@ export const VFileInput = defineComponent({
     })
   },
   emits: {
-    'click:clear': e => true,
     'click:control': e => true,
     'update:modelValue': files => true
   },
-
   setup(props, _ref) {
     let {
       attrs,
@@ -74,32 +67,23 @@ export const VFileInput = defineComponent({
     } = useLocale();
     const model = useProxiedModel(props, 'modelValue');
     const base = computed(() => typeof props.showSize !== 'boolean' ? props.showSize : undefined);
-    const totalBytes = computed(() => {
-      var _model$value;
-
-      return ((_model$value = model.value) != null ? _model$value : []).reduce((bytes, _ref2) => {
-        let {
-          size = 0
-        } = _ref2;
-        return bytes + size;
-      }, 0);
-    });
+    const totalBytes = computed(() => (model.value ?? []).reduce((bytes, _ref2) => {
+      let {
+        size = 0
+      } = _ref2;
+      return bytes + size;
+    }, 0));
     const totalBytesReadable = computed(() => humanReadableFileSize(totalBytes.value, base.value));
-    const fileNames = computed(() => {
-      var _model$value2;
-
-      return ((_model$value2 = model.value) != null ? _model$value2 : []).map(file => {
-        const {
-          name = '',
-          size = 0
-        } = file;
-        return !props.showSize ? name : `${name} (${humanReadableFileSize(size, base.value)})`;
-      });
-    });
+    const fileNames = computed(() => (model.value ?? []).map(file => {
+      const {
+        name = '',
+        size = 0
+      } = file;
+      return !props.showSize ? name : `${name} (${humanReadableFileSize(size, base.value)})`;
+    }));
     const counterValue = computed(() => {
-      var _model$value$length, _model$value3;
-
-      const fileCount = (_model$value$length = (_model$value3 = model.value) == null ? void 0 : _model$value3.length) != null ? _model$value$length : 0;
+      var _model$value;
+      const fileCount = ((_model$value = model.value) == null ? void 0 : _model$value.length) ?? 0;
       if (props.showSize) return t(props.counterSizeString, fileCount, totalBytesReadable.value);else return t(props.counterString, fileCount);
     });
     const vInputRef = ref();
@@ -109,40 +93,35 @@ export const VFileInput = defineComponent({
     const messages = computed(() => {
       return props.messages.length ? props.messages : props.persistentHint ? props.hint : '';
     });
-
     function onFocus() {
       if (inputRef.value !== document.activeElement) {
         var _inputRef$value;
-
         (_inputRef$value = inputRef.value) == null ? void 0 : _inputRef$value.focus();
       }
-
       if (!isFocused.value) {
         isFocused.value = true;
       }
     }
-
+    function onClickPrepend(e) {
+      callEvent(props['onClick:prepend'], e);
+      onControlClick(e);
+    }
     function onControlClick(e) {
       var _inputRef$value2;
-
       (_inputRef$value2 = inputRef.value) == null ? void 0 : _inputRef$value2.click();
       emit('click:control', e);
     }
-
     function onClear(e) {
       e.stopPropagation();
       onFocus();
       nextTick(() => {
         model.value = [];
-
         if (inputRef != null && inputRef.value) {
           inputRef.value.value = '';
         }
-
-        emit('click:clear', e);
+        callEvent(props['onClick:clear'], e);
       });
     }
-
     useRender(() => {
       const hasCounter = !!(slots.counter || props.counter);
       const hasDetails = !!(hasCounter || slots.details);
@@ -156,11 +135,14 @@ export const VFileInput = defineComponent({
         "ref": vInputRef,
         "modelValue": model.value,
         "onUpdate:modelValue": $event => model.value = $event,
-        "class": "v-file-input"
+        "class": "v-file-input",
+        "onClick:prepend": onClickPrepend,
+        "onClick:append": props['onClick:append']
       }, rootAttrs, inputProps, {
-        "onClick:prepend": onControlClick,
+        "focused": isFocused.value,
         "messages": messages.value
-      }), { ...slots,
+      }), {
+        ...slots,
         default: _ref3 => {
           let {
             isDisabled,
@@ -172,13 +154,16 @@ export const VFileInput = defineComponent({
             "ref": vFieldRef,
             "prepend-icon": props.prependIcon,
             "onClick:control": onControlClick,
-            "onClick:clear": onClear
+            "onClick:clear": onClear,
+            "onClick:prependInner": props['onClick:prependInner'],
+            "onClick:appendInner": props['onClick:appendInner']
           }, fieldProps, {
             "active": isDirty.value || isFocused.value,
             "dirty": isDirty.value,
             "focused": isFocused.value,
             "error": isValid.value === false
-          }), { ...slots,
+          }), {
+            ...slots,
             default: _ref4 => {
               let {
                 props: {
@@ -198,17 +183,15 @@ export const VFileInput = defineComponent({
                   onFocus();
                 },
                 "onChange": e => {
-                  var _target$files;
-
                   if (!e.target) return;
                   const target = e.target;
-                  model.value = [...((_target$files = target.files) != null ? _target$files : [])];
+                  model.value = [...(target.files ?? [])];
                 },
                 "onFocus": onFocus,
                 "onBlur": () => isFocused.value = false
-              }, slotProps, inputAttrs), null), model.value.length > 0 && _createVNode("div", {
+              }, slotProps, inputAttrs), null), _createVNode("div", {
                 "class": fieldClass
-              }, [slots.selection ? slots.selection({
+              }, [model.value.length > 0 && (slots.selection ? slots.selection({
                 fileNames: fileNames.value,
                 totalBytes: totalBytes.value,
                 totalBytesReadable: totalBytesReadable.value
@@ -218,13 +201,12 @@ export const VFileInput = defineComponent({
                 "color": props.color
               }, {
                 default: () => [text]
-              })) : fileNames.value.join(', ')])]);
+              })) : fileNames.value.join(', '))])]);
             }
           });
         },
         details: hasDetails ? slotProps => {
           var _slots$details;
-
           return _createVNode(_Fragment, null, [(_slots$details = slots.details) == null ? void 0 : _slots$details.call(slots, slotProps), hasCounter && _createVNode(_Fragment, null, [_createVNode("span", null, null), _createVNode(VCounter, {
             "active": !!model.value.length,
             "value": counterValue.value
@@ -234,6 +216,5 @@ export const VFileInput = defineComponent({
     });
     return forwardRefs({}, vInputRef, vFieldRef, inputRef);
   }
-
 });
 //# sourceMappingURL=VFileInput.mjs.map

package/lib/components/VFileInput/VFileInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VFileInput.mjs","names":["filterFieldProps","makeVFieldProps","filterInputProps","makeVInputProps","VInput","VChip","VCounter","VField","IconValue","forwardRefs","useLocale","useProxiedModel","computed","nextTick","ref","defineComponent","filterInputAttrs","humanReadableFileSize","useRender","wrapInArray","VFileInput","name","inheritAttrs","props","chips","Boolean","counter","counterSizeString","type","String","default","counterString","multiple","hint","persistentHint","placeholder","showSize","Number","validator","v","includes","prependIcon","modelValue","Array","val","every","clearable","emits","e","files","setup","attrs","emit","slots","t","model","base","undefined","totalBytes","value","reduce","bytes","size","totalBytesReadable","fileNames","map","file","counterValue","fileCount","length","vInputRef","vFieldRef","isFocused","inputRef","messages","onFocus","document","activeElement","focus","onControlClick","click","onClear","stopPropagation","hasCounter","hasDetails","details","rootAttrs","inputAttrs","_","inputProps","fieldProps","isDisabled","isDirty","isReadonly","isValid","class","fieldClass","slotProps","target","selection","text","color","join"],"sources":["../../../src/components/VFileInput/VFileInput.tsx"],"sourcesContent":["// Styles\nimport './VFileInput.sass'\n\n// Components\nimport { filterFieldProps, makeVFieldProps } from '@/components/VField/VField'\nimport { filterInputProps, makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VChip } from '@/components/VChip'\nimport { VCounter } from '@/components/VCounter'\nimport { VField } from '@/components/VField'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { forwardRefs } from '@/composables/forwardRefs'\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, nextTick, ref } from 'vue'\nimport { defineComponent, filterInputAttrs, humanReadableFileSize, useRender, wrapInArray } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VFileInput = defineComponent({\n  name: 'VFileInput',\n\n  inheritAttrs: false,\n\n  props: {\n    chips: Boolean,\n    counter: Boolean,\n    counterSizeString: {\n      type: String,\n      default: '$vuetify.fileInput.counterSize',\n    },\n    counterString: {\n      type: String,\n      default: '$vuetify.fileInput.counter',\n    },\n    multiple: Boolean,\n    hint: String,\n    persistentHint: Boolean,\n    placeholder: String,\n    showSize: {\n      type: [Boolean, Number] as PropType<boolean | 1000 | 1024>,\n      default: false,\n      validator: (v: boolean | number) => {\n        return (\n          typeof v === 'boolean' ||\n          [1000, 1024].includes(v)\n        )\n      },\n    },\n\n    ...makeVInputProps(),\n\n    prependIcon: {\n      type: IconValue,\n      default: '$file',\n    },\n    modelValue: {\n      type: Array as PropType<File[]>,\n      default: () => ([]),\n      validator: (val: any) => {\n        return wrapInArray(val).every(v => v != null && typeof v === 'object')\n      },\n    },\n\n    ...makeVFieldProps({ clearable: true }),\n  },\n\n  emits: {\n    'click:clear': (e: MouseEvent) => true,\n    'click:control': (e: MouseEvent) => true,\n    'update:modelValue': (files: File[]) => true,\n  },\n\n  setup (props, { attrs, emit, slots }) {\n    const { t } = useLocale()\n    const model = useProxiedModel(props, 'modelValue')\n    const base = computed(() => typeof props.showSize !== 'boolean' ? props.showSize : undefined)\n    const totalBytes = computed(() => (model.value ?? []).reduce((bytes, { size = 0 }) => bytes + size, 0))\n    const totalBytesReadable = computed(() => humanReadableFileSize(totalBytes.value, base.value))\n\n    const fileNames = computed(() => (model.value ?? []).map(file => {\n      const { name = '', size = 0 } = file\n\n      return !props.showSize\n        ? name\n        : `${name} (${humanReadableFileSize(size, base.value)})`\n    }))\n\n    const counterValue = computed(() => {\n      const fileCount = model.value?.length ?? 0\n      if (props.showSize) return t(props.counterSizeString, fileCount, totalBytesReadable.value)\n      else return t(props.counterString, fileCount)\n    })\n    const vInputRef = ref<VInput>()\n    const vFieldRef = ref<VInput>()\n    const isFocused = ref(false)\n    const inputRef = ref<HTMLInputElement>()\n    const messages = computed(() => {\n      return props.messages.length\n        ? props.messages\n        : (props.persistentHint) ? props.hint : ''\n    })\n    function onFocus () {\n      if (inputRef.value !== document.activeElement) {\n        inputRef.value?.focus()\n      }\n\n      if (!isFocused.value) {\n        isFocused.value = true\n      }\n    }\n    function onControlClick (e: MouseEvent) {\n      inputRef.value?.click()\n\n      emit('click:control', e)\n    }\n    function onClear (e: MouseEvent) {\n      e.stopPropagation()\n\n      onFocus()\n\n      nextTick(() => {\n        model.value = []\n\n        if (inputRef?.value) {\n          inputRef.value.value = ''\n        }\n\n        emit('click:clear', e)\n      })\n    }\n\n    useRender(() => {\n      const hasCounter = !!(slots.counter || props.counter)\n      const hasDetails = !!(hasCounter || slots.details)\n      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)\n      const [{ modelValue: _, ...inputProps }] = filterInputProps(props)\n      const [fieldProps] = filterFieldProps(props)\n\n      return (\n        <VInput\n          ref={ vInputRef }\n          v-model={ model.value }\n          class=\"v-file-input\"\n          { ...rootAttrs }\n          { ...inputProps }\n          onClick:prepend={ onControlClick }\n          messages={ messages.value }\n        >\n          {{\n            ...slots,\n            default: ({\n              isDisabled,\n              isDirty,\n              isReadonly,\n              isValid,\n            }) => (\n              <VField\n                ref={ vFieldRef }\n                prepend-icon={ props.prependIcon }\n                onClick:control={ onControlClick }\n                onClick:clear={ onClear }\n                { ...fieldProps }\n                active={ isDirty.value || isFocused.value }\n                dirty={ isDirty.value }\n                focused={ isFocused.value }\n                error={ isValid.value === false }\n              >\n                {{\n                  ...slots,\n                  default: ({\n                    props: { class: fieldClass, ...slotProps },\n                  }) => (\n                    <>\n                      <input\n                        ref={ inputRef }\n                        type=\"file\"\n                        readonly={ isReadonly.value }\n                        disabled={ isDisabled.value }\n                        multiple={ props.multiple }\n                        name={ props.name }\n                        onClick={ e => {\n                          e.stopPropagation()\n\n                          onFocus()\n                        } }\n                        onChange={ e => {\n                          if (!e.target) return\n\n                          const target = e.target as HTMLInputElement\n                          model.value = [...target.files ?? []]\n                        } }\n                        onFocus={ onFocus }\n                        onBlur={ () => (isFocused.value = false) }\n                        { ...slotProps }\n                        { ...inputAttrs }\n                      />\n\n                      { model.value.length > 0 && (\n                        <div class={ fieldClass }>\n                          { slots.selection ? slots.selection({\n                            fileNames: fileNames.value,\n                            totalBytes: totalBytes.value,\n                            totalBytesReadable: totalBytesReadable.value,\n                          })\n                          : props.chips ? fileNames.value.map(text => (\n                            <VChip\n                              key={ text }\n                              size=\"small\"\n                              color={ props.color }\n                            >{ text }</VChip>\n                          ))\n                          : fileNames.value.join(', ') }\n                        </div>\n                      ) }\n                    </>\n                  ),\n                }}\n              </VField>\n            ),\n            details: hasDetails ? slotProps => (\n              <>\n                { slots.details?.(slotProps) }\n\n                { hasCounter && (\n                  <>\n                    <span />\n\n                    <VCounter\n                      active={ !!model.value.length }\n                      value={ counterValue.value }\n                      v-slots={ slots.counter }\n                    />\n                  </>\n                ) }\n              </>\n            ) : undefined,\n          }}\n        </VInput>\n      )\n    })\n\n    return forwardRefs({}, vInputRef, vFieldRef, inputRef)\n  },\n})\n\nexport type VFileInput = InstanceType<typeof VFileInput>\n"],"mappings":"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"}
+{"version":3,"file":"VFileInput.mjs","names":["filterFieldProps","makeVFieldProps","filterInputProps","makeVInputProps","VInput","VChip","VCounter","VField","forwardRefs","useLocale","useProxiedModel","computed","nextTick","ref","callEvent","defineComponent","filterInputAttrs","humanReadableFileSize","useRender","wrapInArray","VFileInput","name","inheritAttrs","props","chips","Boolean","counter","counterSizeString","type","String","default","counterString","multiple","hint","persistentHint","placeholder","showSize","Number","validator","v","includes","prependIcon","modelValue","Array","val","every","clearable","emits","e","files","setup","attrs","emit","slots","t","model","base","undefined","totalBytes","value","reduce","bytes","size","totalBytesReadable","fileNames","map","file","counterValue","fileCount","length","vInputRef","vFieldRef","isFocused","inputRef","messages","onFocus","document","activeElement","focus","onClickPrepend","onControlClick","click","onClear","stopPropagation","hasCounter","hasDetails","details","rootAttrs","inputAttrs","_","inputProps","fieldProps","isDisabled","isDirty","isReadonly","isValid","class","fieldClass","slotProps","target","selection","text","color","join"],"sources":["../../../src/components/VFileInput/VFileInput.tsx"],"sourcesContent":["// Styles\nimport './VFileInput.sass'\n\n// Components\nimport { filterFieldProps, makeVFieldProps } from '@/components/VField/VField'\nimport { filterInputProps, makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VChip } from '@/components/VChip'\nimport { VCounter } from '@/components/VCounter'\nimport { VField } from '@/components/VField'\n\n// Composables\nimport { forwardRefs } from '@/composables/forwardRefs'\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, nextTick, ref } from 'vue'\nimport { callEvent, defineComponent, filterInputAttrs, humanReadableFileSize, useRender, wrapInArray } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VFileInput = defineComponent({\n  name: 'VFileInput',\n\n  inheritAttrs: false,\n\n  props: {\n    chips: Boolean,\n    counter: Boolean,\n    counterSizeString: {\n      type: String,\n      default: '$vuetify.fileInput.counterSize',\n    },\n    counterString: {\n      type: String,\n      default: '$vuetify.fileInput.counter',\n    },\n    multiple: Boolean,\n    hint: String,\n    persistentHint: Boolean,\n    placeholder: String,\n    showSize: {\n      type: [Boolean, Number] as PropType<boolean | 1000 | 1024>,\n      default: false,\n      validator: (v: boolean | number) => {\n        return (\n          typeof v === 'boolean' ||\n          [1000, 1024].includes(v)\n        )\n      },\n    },\n\n    ...makeVInputProps({ prependIcon: '$file' }),\n\n    modelValue: {\n      type: Array as PropType<File[]>,\n      default: () => ([]),\n      validator: (val: any) => {\n        return wrapInArray(val).every(v => v != null && typeof v === 'object')\n      },\n    },\n\n    ...makeVFieldProps({ clearable: true }),\n  },\n\n  emits: {\n    'click:control': (e: MouseEvent) => true,\n    'update:modelValue': (files: File[]) => true,\n  },\n\n  setup (props, { attrs, emit, slots }) {\n    const { t } = useLocale()\n    const model = useProxiedModel(props, 'modelValue')\n    const base = computed(() => typeof props.showSize !== 'boolean' ? props.showSize : undefined)\n    const totalBytes = computed(() => (model.value ?? []).reduce((bytes, { size = 0 }) => bytes + size, 0))\n    const totalBytesReadable = computed(() => humanReadableFileSize(totalBytes.value, base.value))\n\n    const fileNames = computed(() => (model.value ?? []).map(file => {\n      const { name = '', size = 0 } = file\n\n      return !props.showSize\n        ? name\n        : `${name} (${humanReadableFileSize(size, base.value)})`\n    }))\n\n    const counterValue = computed(() => {\n      const fileCount = model.value?.length ?? 0\n      if (props.showSize) return t(props.counterSizeString, fileCount, totalBytesReadable.value)\n      else return t(props.counterString, fileCount)\n    })\n    const vInputRef = ref<VInput>()\n    const vFieldRef = ref<VInput>()\n    const isFocused = ref(false)\n    const inputRef = ref<HTMLInputElement>()\n    const messages = computed(() => {\n      return props.messages.length\n        ? props.messages\n        : (props.persistentHint) ? props.hint : ''\n    })\n    function onFocus () {\n      if (inputRef.value !== document.activeElement) {\n        inputRef.value?.focus()\n      }\n\n      if (!isFocused.value) {\n        isFocused.value = true\n      }\n    }\n    function onClickPrepend (e: MouseEvent) {\n      callEvent(props['onClick:prepend'], e)\n      onControlClick(e)\n    }\n    function onControlClick (e: MouseEvent) {\n      inputRef.value?.click()\n\n      emit('click:control', e)\n    }\n    function onClear (e: MouseEvent) {\n      e.stopPropagation()\n\n      onFocus()\n\n      nextTick(() => {\n        model.value = []\n\n        if (inputRef?.value) {\n          inputRef.value.value = ''\n        }\n\n        callEvent(props['onClick:clear'], e)\n      })\n    }\n\n    useRender(() => {\n      const hasCounter = !!(slots.counter || props.counter)\n      const hasDetails = !!(hasCounter || slots.details)\n      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)\n      const [{ modelValue: _, ...inputProps }] = filterInputProps(props)\n      const [fieldProps] = filterFieldProps(props)\n\n      return (\n        <VInput\n          ref={ vInputRef }\n          v-model={ model.value }\n          class=\"v-file-input\"\n          onClick:prepend={ onClickPrepend }\n          onClick:append={ props['onClick:append'] }\n          { ...rootAttrs }\n          { ...inputProps }\n          focused={ isFocused.value }\n          messages={ messages.value }\n        >\n          {{\n            ...slots,\n            default: ({\n              isDisabled,\n              isDirty,\n              isReadonly,\n              isValid,\n            }) => (\n              <VField\n                ref={ vFieldRef }\n                prepend-icon={ props.prependIcon }\n                onClick:control={ onControlClick }\n                onClick:clear={ onClear }\n                onClick:prependInner={ props['onClick:prependInner'] }\n                onClick:appendInner={ props['onClick:appendInner'] }\n                { ...fieldProps }\n                active={ isDirty.value || isFocused.value }\n                dirty={ isDirty.value }\n                focused={ isFocused.value }\n                error={ isValid.value === false }\n              >\n                {{\n                  ...slots,\n                  default: ({\n                    props: { class: fieldClass, ...slotProps },\n                  }) => (\n                    <>\n                      <input\n                        ref={ inputRef }\n                        type=\"file\"\n                        readonly={ isReadonly.value }\n                        disabled={ isDisabled.value }\n                        multiple={ props.multiple }\n                        name={ props.name }\n                        onClick={ e => {\n                          e.stopPropagation()\n\n                          onFocus()\n                        } }\n                        onChange={ e => {\n                          if (!e.target) return\n\n                          const target = e.target as HTMLInputElement\n                          model.value = [...target.files ?? []]\n                        } }\n                        onFocus={ onFocus }\n                        onBlur={ () => (isFocused.value = false) }\n                        { ...slotProps }\n                        { ...inputAttrs }\n                      />\n\n                      <div class={ fieldClass }>\n                        { model.value.length > 0 && (\n                          slots.selection ? slots.selection({\n                            fileNames: fileNames.value,\n                            totalBytes: totalBytes.value,\n                            totalBytesReadable: totalBytesReadable.value,\n                          })\n                          : props.chips ? fileNames.value.map(text => (\n                            <VChip\n                              key={ text }\n                              size=\"small\"\n                              color={ props.color }\n                            >{ text }</VChip>\n                          ))\n                          : fileNames.value.join(', ')\n                        )}\n                      </div>\n                    </>\n                  ),\n                }}\n              </VField>\n            ),\n            details: hasDetails ? slotProps => (\n              <>\n                { slots.details?.(slotProps) }\n\n                { hasCounter && (\n                  <>\n                    <span />\n\n                    <VCounter\n                      active={ !!model.value.length }\n                      value={ counterValue.value }\n                      v-slots={ slots.counter }\n                    />\n                  </>\n                ) }\n              </>\n            ) : undefined,\n          }}\n        </VInput>\n      )\n    })\n\n    return forwardRefs({}, vInputRef, vFieldRef, inputRef)\n  },\n})\n\nexport type VFileInput = InstanceType<typeof VFileInput>\n"],"mappings":"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"}

package/lib/components/VFileInput/VFileInput.sass

@@ -1,4 +1,10 @@
 @use './variables' as *
+@use '../../styles/tools'
+@use 'sass:math'
+
+@at-root
+  @include tools.density('v-input', $file-input-chips-margin-bottom) using ($modifier)
+    --file-input-chips-margin-bottom: #{0px + math.div($modifier, 2)}
 
 // Block
 .v-file-input
@@ -9,3 +15,7 @@
     position: absolute
     top: 0
     width: 100%
+  
+  .v-chip
+    margin-top: $file-input-chips-margin-top
+    margin-bottom: var(--file-input-chips-margin-bottom)

package/lib/components/VFileInput/_variables.scss

@@ -1,2 +1,4 @@
 // Defaults
 $file-input-chip-margin-inline-end: 4px !default;
+$file-input-chips-margin-top: 2px !default;
+$file-input-chips-margin-bottom: ('default': 0, 'comfortable': 1, 'compact': 2) !default;