@vuetify/nightly 3.0.0-beta.13 → 3.0.0-beta.15

package/lib/components/VField/VFieldLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VFieldLabel.mjs","names":["VLabel","defineComponent","useRender","VFieldLabel","name","props","floating","Boolean","setup","slots","undefined"],"sources":["../../../src/components/VField/VFieldLabel.tsx"],"sourcesContent":["// Components\nimport { VLabel } from '@/components/VLabel'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\n\nexport const VFieldLabel = defineComponent({\n  name: 'VFieldLabel',\n\n  props: {\n    floating: Boolean,\n  },\n\n  setup (props, { slots }) {\n    useRender(() => (\n      <VLabel\n        class={[\n          'v-field-label',\n          { 'v-field-label--floating': props.floating },\n        ]}\n        aria-hidden={ props.floating || undefined }\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VFieldLabel = InstanceType<typeof VFieldLabel>\n"],"mappings":";AAAA;SACSA,M,+BAET;;SACSC,e,EAAiBC,S;AAE1B,OAAO,MAAMC,WAAW,GAAGF,eAAe,CAAC;EACzCG,IAAI,EAAE,aADmC;EAGzCC,KAAK,EAAE;IACLC,QAAQ,EAAEC;EADL,CAHkC;;EAOzCC,KAAK,CAAEH,KAAF,QAAoB;IAAA,IAAX;MAAEI;IAAF,CAAW;IACvBP,SAAS,CAAC;MAAA,SAEC,CACL,eADK,EAEL;QAAE,2BAA2BG,KAAK,CAACC;MAAnC,CAFK,CAFD;MAAA,eAMQD,KAAK,CAACC,QAAN,IAAkBI;IAN1B,GAOID,KAPJ,CAAD,CAAT;IAWA,OAAO,EAAP;EACD;;AApBwC,CAAD,CAAnC"}
+{"version":3,"file":"VFieldLabel.mjs","names":["VLabel","defineComponent","useRender","VFieldLabel","name","props","floating","Boolean","setup","slots","undefined"],"sources":["../../../src/components/VField/VFieldLabel.tsx"],"sourcesContent":["// Components\nimport { VLabel } from '@/components/VLabel'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\n\nexport const VFieldLabel = defineComponent({\n  name: 'VFieldLabel',\n\n  props: {\n    floating: Boolean,\n  },\n\n  setup (props, { slots }) {\n    useRender(() => (\n      <VLabel\n        class={[\n          'v-field-label',\n          { 'v-field-label--floating': props.floating },\n        ]}\n        aria-hidden={ props.floating || undefined }\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VFieldLabel = InstanceType<typeof VFieldLabel>\n"],"mappings":";AAAA;AAAA,SACSA,MAAM,+BAEf;AAAA,SACSC,eAAe,EAAEC,SAAS;AAEnC,OAAO,MAAMC,WAAW,GAAGF,eAAe,CAAC;EACzCG,IAAI,EAAE,aAAa;EAEnBC,KAAK,EAAE;IACLC,QAAQ,EAAEC;EACZ,CAAC;EAEDC,KAAK,CAAEH,KAAK,QAAa;IAAA,IAAX;MAAEI;IAAM,CAAC;IACrBP,SAAS,CAAC;MAAA,SAEC,CACL,eAAe,EACf;QAAE,yBAAyB,EAAEG,KAAK,CAACC;MAAS,CAAC,CAC9C;MAAA,eACaD,KAAK,CAACC,QAAQ,IAAII;IAAS,GAC/BD,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/VField/index.d.ts

@@ -1,25 +1,12 @@
 import * as vue from 'vue';
-import { VNodeChild, PropType, JSXComponent, ComputedRef, Ref } from 'vue';
+import { JSXComponent, PropType, ComputedRef, Ref } from 'vue';
 
-declare type SlotsToProps<T extends Record<string, Slot>> = {
-    $children: () => (T['default'] | VNodeChild | {
-        [K in keyof T]?: T[K];
-    });
-    'v-slots': new () => {
-        [K in keyof T]?: T[K] | false;
-    };
-};
-declare type Slot<T extends any[] = any[]> = (...args: T) => VNodeChild;
-declare type MakeSlots<T extends Record<string, any[]>> = {
-    [K in keyof T]?: Slot<T[K]>;
-};
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
 
 declare type EventProp<T = (...args: any[]) => any> = T | T[];
 declare const EventProp: PropType<EventProp<(...args: any[]) => any>>;
 
-declare type IconValue = string | JSXComponent;
-declare const IconValue: PropType<IconValue>;
-
 interface LoaderSlotProps {
     color: string | undefined;
     isActive: boolean;
@@ -48,14 +35,6 @@ interface DefaultInputSlot {
 interface VFieldSlot extends DefaultInputSlot {
     props: Record<string, unknown>;
 }
-declare type VFieldSlots = MakeSlots<{
-    clear: [];
-    'prepend-inner': [DefaultInputSlot & VInputSlot];
-    'append-inner': [DefaultInputSlot & VInputSlot];
-    label: [DefaultInputSlot & VInputSlot];
-    loader: [LoaderSlotProps];
-    default: [VFieldSlot];
-}>;
 declare const VField: {
     new (...args: any[]): {
         $: vue.ComponentInternalInstance;
@@ -103,14 +82,7 @@ declare const VField: {
             'onClick:prependInner': PropType<EventProp<(...args: any[]) => any>>;
             focused: BooleanConstructor;
             id: StringConstructor;
-        }, "onUpdate:modelValue" | "modelValue"> & SlotsToProps<MakeSlots<{
-            clear: [];
-            'prepend-inner': [DefaultInputSlot & VInputSlot];
-            'append-inner': [DefaultInputSlot & VInputSlot];
-            label: [DefaultInputSlot & VInputSlot];
-            loader: [LoaderSlotProps];
-            default: [VFieldSlot];
-        }>>>> & {
+        }, "$children" | "v-slots" | "v-slot:default" | "onUpdate:modelValue" | "modelValue" | "v-slot:clear" | "v-slot:prepend-inner" | "v-slot:append-inner" | "v-slot:label" | "v-slot:loader">>> & {
             "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
             "onClick:control"?: ((e: MouseEvent) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "reverse" | "error" | "active" | "loading" | "disabled" | "variant" | "clearIcon" | "focused" | "clearable" | "dirty" | "persistentClear" | "singleLine">;
@@ -157,14 +129,7 @@ declare const VField: {
             'onClick:prependInner': PropType<EventProp<(...args: any[]) => any>>;
             focused: BooleanConstructor;
             id: StringConstructor;
-        }, "onUpdate:modelValue" | "modelValue"> & SlotsToProps<MakeSlots<{
-            clear: [];
-            'prepend-inner': [DefaultInputSlot & VInputSlot];
-            'append-inner': [DefaultInputSlot & VInputSlot];
-            label: [DefaultInputSlot & VInputSlot];
-            loader: [LoaderSlotProps];
-            default: [VFieldSlot];
-        }>>>> & {
+        }, "$children" | "v-slots" | "v-slot:default" | "onUpdate:modelValue" | "modelValue" | "v-slot:clear" | "v-slot:prepend-inner" | "v-slot:append-inner" | "v-slot:label" | "v-slot:loader">>> & {
             "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
             "onClick:control"?: ((e: MouseEvent) => any) | undefined;
         }, {
@@ -173,7 +138,7 @@ declare const VField: {
             'click:control': (e: MouseEvent) => boolean;
             'update:focused': (focused: boolean) => boolean;
             'update:modelValue': (val: any) => boolean;
-        }, "update:modelValue" | "modelValue">, string, {
+        }, "$children" | "v-slots" | "v-slot:default" | "update:modelValue" | "modelValue" | "v-slot:clear" | "v-slot:prepend-inner" | "v-slot:append-inner" | "v-slot:label" | "v-slot:loader">, string, {
             reverse: boolean;
             error: boolean;
             active: boolean;
@@ -236,14 +201,7 @@ declare const VField: {
         'onClick:prependInner': PropType<EventProp<(...args: any[]) => any>>;
         focused: BooleanConstructor;
         id: StringConstructor;
-    }, "onUpdate:modelValue" | "modelValue"> & SlotsToProps<MakeSlots<{
-        clear: [];
-        'prepend-inner': [DefaultInputSlot & VInputSlot];
-        'append-inner': [DefaultInputSlot & VInputSlot];
-        label: [DefaultInputSlot & VInputSlot];
-        loader: [LoaderSlotProps];
-        default: [VFieldSlot];
-    }>>>> & {
+    }, "$children" | "v-slots" | "v-slot:default" | "onUpdate:modelValue" | "modelValue" | "v-slot:clear" | "v-slot:prepend-inner" | "v-slot:append-inner" | "v-slot:label" | "v-slot:loader">>> & {
         "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
         "onClick:control"?: ((e: MouseEvent) => any) | undefined;
     } & vue.ShallowUnwrapRef<{
@@ -282,14 +240,7 @@ declare const VField: {
     'onClick:prependInner': PropType<EventProp<(...args: any[]) => any>>;
     focused: BooleanConstructor;
     id: StringConstructor;
-}, "onUpdate:modelValue" | "modelValue"> & SlotsToProps<MakeSlots<{
-    clear: [];
-    'prepend-inner': [DefaultInputSlot & VInputSlot];
-    'append-inner': [DefaultInputSlot & VInputSlot];
-    label: [DefaultInputSlot & VInputSlot];
-    loader: [LoaderSlotProps];
-    default: [VFieldSlot];
-}>>>> & {
+}, "$children" | "v-slots" | "v-slot:default" | "onUpdate:modelValue" | "modelValue" | "v-slot:clear" | "v-slot:prepend-inner" | "v-slot:append-inner" | "v-slot:label" | "v-slot:loader">>> & {
     "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
     "onClick:control"?: ((e: MouseEvent) => any) | undefined;
 }, {
@@ -298,7 +249,7 @@ declare const VField: {
     'click:control': (e: MouseEvent) => boolean;
     'update:focused': (focused: boolean) => boolean;
     'update:modelValue': (val: any) => boolean;
-}, "update:modelValue" | "modelValue">, string, {
+}, "$children" | "v-slots" | "v-slot:default" | "update:modelValue" | "modelValue" | "v-slot:clear" | "v-slot:prepend-inner" | "v-slot:append-inner" | "v-slot:label" | "v-slot:loader">, string, {
     reverse: boolean;
     error: boolean;
     active: boolean;
@@ -315,8 +266,31 @@ declare const VField: {
     $props: {
         modelValue?: T | undefined;
         'onUpdate:modelValue'?: ((val: T) => any) | undefined;
+    } & {
+        $children?: {} | vue.VNodeChild | {
+            clear?: (() => vue.VNodeChild) | undefined;
+            'prepend-inner'?: ((args_0: DefaultInputSlot & VInputSlot) => vue.VNodeChild) | undefined;
+            'append-inner'?: ((args_0: DefaultInputSlot & VInputSlot) => vue.VNodeChild) | undefined;
+            label?: ((args_0: DefaultInputSlot & VInputSlot) => vue.VNodeChild) | undefined;
+            loader?: ((args_0: LoaderSlotProps) => vue.VNodeChild) | undefined;
+            default?: ((args_0: VFieldSlot) => vue.VNodeChild) | undefined;
+        };
+        'v-slots'?: {
+            clear?: false | (() => vue.VNodeChild) | undefined;
+            'prepend-inner'?: false | ((args_0: DefaultInputSlot & VInputSlot) => vue.VNodeChild) | undefined;
+            'append-inner'?: false | ((args_0: DefaultInputSlot & VInputSlot) => vue.VNodeChild) | undefined;
+            label?: false | ((args_0: DefaultInputSlot & VInputSlot) => vue.VNodeChild) | undefined;
+            loader?: false | ((args_0: LoaderSlotProps) => vue.VNodeChild) | undefined;
+            default?: false | ((args_0: VFieldSlot) => vue.VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:clear"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:prepend-inner"?: false | ((args_0: DefaultInputSlot & VInputSlot) => vue.VNodeChild) | undefined;
+        "v-slot:append-inner"?: false | ((args_0: DefaultInputSlot & VInputSlot) => vue.VNodeChild) | undefined;
+        "v-slot:label"?: false | ((args_0: DefaultInputSlot & VInputSlot) => vue.VNodeChild) | undefined;
+        "v-slot:loader"?: false | ((args_0: LoaderSlotProps) => vue.VNodeChild) | undefined;
+        "v-slot:default"?: false | ((args_0: VFieldSlot) => vue.VNodeChild) | undefined;
     };
-    $slots: VFieldSlots;
 });
 declare type VField = InstanceType<typeof VField>;
 

package/lib/components/VField/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["VField","VFieldLabel"],"sources":["../../../src/components/VField/index.ts"],"sourcesContent":["export { VField } from './VField'\nexport { VFieldLabel } from './VFieldLabel'\n"],"mappings":"SAASA,M;SACAC,W"}
+{"version":3,"file":"index.mjs","names":["VField","VFieldLabel"],"sources":["../../../src/components/VField/index.ts"],"sourcesContent":["export { VField } from './VField'\nexport { VFieldLabel } from './VFieldLabel'\n"],"mappings":"SAASA,MAAM;AAAA,SACNC,WAAW"}

package/lib/components/VFileInput/VFileInput.css

@@ -1,3 +1,15 @@
+.v-input--density-default {
+  --file-input-chips-margin-bottom: 0px;
+}
+
+.v-input--density-comfortable {
+  --file-input-chips-margin-bottom: 2px;
+}
+
+.v-input--density-compact {
+  --file-input-chips-margin-bottom: 4px;
+}
+
 .v-file-input input[type=file] {
   height: 100%;
   left: 0;
@@ -5,4 +17,8 @@
   position: absolute;
   top: 0;
   width: 100%;
+}
+.v-file-input .v-chip {
+  margin-top: 2px;
+  margin-bottom: var(--file-input-chips-margin-bottom);
 }

package/lib/components/VFileInput/VFileInput.mjs

@@ -1,20 +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 { 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 { callEvent, defineComponent, filterInputAttrs, humanReadableFileSize, useRender, wrapInArray } from "../../util/index.mjs"; // Types
-
 export const VFileInput = defineComponent({
   name: 'VFileInput',
   inheritAttrs: false,
@@ -58,7 +56,6 @@ export const VFileInput = defineComponent({
     'click:control': e => true,
     'update:modelValue': files => true
   },
-
   setup(props, _ref) {
     let {
       attrs,
@@ -86,7 +83,6 @@ export const VFileInput = defineComponent({
     }));
     const counterValue = computed(() => {
       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);
     });
@@ -97,45 +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 = '';
         }
-
         callEvent(props['onClick:clear'], e);
       });
     }
-
     useRender(() => {
       const hasCounter = !!(slots.counter || props.counter);
       const hasDetails = !!(hasCounter || slots.details);
@@ -154,7 +140,8 @@ export const VFileInput = defineComponent({
         "onClick:append": props['onClick:append']
       }, rootAttrs, inputProps, {
         "messages": messages.value
-      }), { ...slots,
+      }), {
+        ...slots,
         default: _ref3 => {
           let {
             isDisabled,
@@ -174,7 +161,8 @@ export const VFileInput = defineComponent({
             "dirty": isDirty.value,
             "focused": isFocused.value,
             "error": isValid.value === false
-          }), { ...slots,
+          }), {
+            ...slots,
             default: _ref4 => {
               let {
                 props: {
@@ -218,7 +206,6 @@ export const VFileInput = defineComponent({
         },
         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
@@ -228,6 +215,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","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          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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"}
+{"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          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;