vuetify 3.0.0-beta.9 → 3.0.1

package/lib/components/VField/VField.sass

@@ -48,38 +48,38 @@
     border-bottom-left-radius: 0
     border-bottom-right-radius: 0
 
-  &--variant-plain,
-  &--variant-underlined
-    border-radius: 0
-    padding: 0
-    --v-field-padding-start: 0px
-    --v-field-padding-end: 0px
-    --v-field-padding-top: 6px
-    --v-field-padding-bottom: 2px
-
-  &--variant-outlined,
-  &--single-line
-    --v-field-padding-top: 0px
+  &--variant-solo,
+  &--variant-filled
     $root: &
 
     @at-root
       @include tools.density('v-input', $input-density) using ($modifier)
         @at-root #{selector.nest(&, $root)}
-          --v-field-padding-bottom: #{16px + $modifier * .5}
+          --v-input-control-height: #{$field-control-height + $modifier}
+          --v-field-padding-bottom: #{$field-control-padding-bottom + $modifier * .5}
 
-  &--variant-solo,
-  &--variant-filled
+  &--variant-outlined,
+  &--single-line,
+  &--no-label
+    --v-field-padding-top: 0px
     $root: &
 
     @at-root
       @include tools.density('v-input', $input-density) using ($modifier)
         @at-root #{selector.nest(&, $root)}
-          --v-input-control-height: #{$field-control-height + $modifier}
-          --v-field-padding-bottom: #{$field-control-padding-bottom + $modifier * .5}
+          --v-field-padding-bottom: #{16px + $modifier * .5}
 
   &--variant-plain,
   &--variant-underlined
     $root: &
+    border-radius: 0
+    padding: 0
+
+    &.v-field
+      --v-field-padding-start: 0px
+      --v-field-padding-end: 0px
+      --v-field-padding-top: 6px
+      --v-field-padding-bottom: 2px
 
     @at-root
       @include tools.density('v-input', $input-density) using ($modifier)
@@ -87,11 +87,12 @@
           --v-input-control-height: #{$field-control-underlined-height + $modifier}
 
   // These are separate so they can override the default variant styles
-  &--prepended
-    --v-field-padding-start: #{$field-control-affixed-inner-padding}
+  &.v-field
+    &--prepended
+      --v-field-padding-start: #{$field-control-affixed-inner-padding}
 
-  &--appended
-    --v-field-padding-end: #{$field-control-affixed-inner-padding}
+    &--appended
+      --v-field-padding-end: #{$field-control-affixed-inner-padding}
 
 /* endregion */
 /* region ELEMENTS */
@@ -113,6 +114,7 @@
 
   @at-root
     & input::placeholder,
+    input#{&}::placeholder,
     textarea#{&}::placeholder
       color: currentColor
       opacity: var(--v-disabled-opacity)
@@ -205,7 +207,6 @@
   .v-field--active &
     visibility: hidden
 
-  .v-field--disabled &,
   .v-field--focused &,
   .v-field--error &
     opacity: 1

package/lib/components/VField/VFieldLabel.mjs

@@ -1,14 +1,12 @@
 import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
 // Components
 import { VLabel } from "../VLabel/index.mjs"; // Utilities
-
 import { defineComponent, useRender } from "../../util/index.mjs";
 export const VFieldLabel = defineComponent({
   name: 'VFieldLabel',
   props: {
     floating: Boolean
   },
-
   setup(props, _ref) {
     let {
       slots
@@ -21,6 +19,5 @@ export const VFieldLabel = defineComponent({
     }, slots));
     return {};
   }
-
 });
 //# sourceMappingURL=VFieldLabel.mjs.map

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

@@ -0,0 +1,306 @@
+import * as vue from 'vue';
+import { JSXComponent, PropType, ComputedRef, Ref } from 'vue';
+
+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>>;
+
+interface LoaderSlotProps {
+    color: string | undefined;
+    isActive: boolean;
+}
+
+interface VInputSlot {
+    id: ComputedRef<string>;
+    isDirty: ComputedRef<boolean>;
+    isDisabled: ComputedRef<boolean>;
+    isReadonly: ComputedRef<boolean>;
+    isPristine: Ref<boolean>;
+    isValid: ComputedRef<boolean | null>;
+    isValidating: Ref<boolean>;
+    reset: () => void;
+    resetValidation: () => void;
+    validate: () => void;
+}
+
+interface DefaultInputSlot {
+    isActive: Ref<boolean>;
+    isFocused: Ref<boolean>;
+    controlRef: Ref<HTMLElement | undefined>;
+    focus: () => void;
+    blur: () => void;
+}
+interface VFieldSlot extends DefaultInputSlot {
+    props: Record<string, unknown>;
+}
+declare const VField: {
+    new (...args: any[]): {
+        $: vue.ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            reverse: boolean;
+            error: boolean;
+            active: boolean;
+            loading: boolean;
+            disabled: boolean;
+            variant: "filled" | "outlined" | "plain" | "underlined" | "solo";
+            clearIcon: IconValue;
+            focused: boolean;
+            clearable: boolean;
+            dirty: boolean;
+            persistentClear: boolean;
+            singleLine: boolean;
+        }> & Omit<Readonly<vue.ExtractPropTypes<Omit<{
+            loading: BooleanConstructor;
+            theme: StringConstructor;
+            appendInnerIcon: PropType<IconValue>;
+            bgColor: StringConstructor;
+            clearable: BooleanConstructor;
+            clearIcon: {
+                type: PropType<IconValue>;
+                default: string;
+            };
+            active: BooleanConstructor;
+            color: StringConstructor;
+            dirty: BooleanConstructor;
+            disabled: BooleanConstructor;
+            error: BooleanConstructor;
+            label: StringConstructor;
+            persistentClear: BooleanConstructor;
+            prependInnerIcon: PropType<IconValue>;
+            reverse: BooleanConstructor;
+            singleLine: BooleanConstructor;
+            variant: {
+                type: PropType<"filled" | "outlined" | "plain" | "underlined" | "solo">;
+                default: string;
+                validator: (v: any) => boolean;
+            };
+            'onClick:clear': PropType<EventProp<(...args: any[]) => any>>;
+            'onClick:appendInner': PropType<EventProp<(...args: any[]) => any>>;
+            'onClick:prependInner': PropType<EventProp<(...args: any[]) => any>>;
+            focused: BooleanConstructor;
+            id: StringConstructor;
+        }, "$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">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: vue.Slot | undefined;
+        }>;
+        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: ((event: "click:control", e: MouseEvent) => void) & ((event: "update:focused", focused: boolean) => void);
+        $el: any;
+        $options: vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<Omit<{
+            loading: BooleanConstructor;
+            theme: StringConstructor;
+            appendInnerIcon: PropType<IconValue>;
+            bgColor: StringConstructor;
+            clearable: BooleanConstructor;
+            clearIcon: {
+                type: PropType<IconValue>;
+                default: string;
+            };
+            active: BooleanConstructor;
+            color: StringConstructor;
+            dirty: BooleanConstructor;
+            disabled: BooleanConstructor;
+            error: BooleanConstructor;
+            label: StringConstructor;
+            persistentClear: BooleanConstructor;
+            prependInnerIcon: PropType<IconValue>;
+            reverse: BooleanConstructor;
+            singleLine: BooleanConstructor;
+            variant: {
+                type: PropType<"filled" | "outlined" | "plain" | "underlined" | "solo">;
+                default: string;
+                validator: (v: any) => boolean;
+            };
+            'onClick:clear': PropType<EventProp<(...args: any[]) => any>>;
+            'onClick:appendInner': PropType<EventProp<(...args: any[]) => any>>;
+            'onClick:prependInner': PropType<EventProp<(...args: any[]) => any>>;
+            focused: BooleanConstructor;
+            id: StringConstructor;
+        }, "$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;
+        }, {
+            controlRef: Ref<HTMLElement | undefined>;
+        }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
+            'click:control': (e: MouseEvent) => boolean;
+            'update:focused': (focused: boolean) => boolean;
+            'update:modelValue': (val: any) => boolean;
+        }, "$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;
+            loading: boolean;
+            disabled: boolean;
+            variant: "filled" | "outlined" | "plain" | "underlined" | "solo";
+            clearIcon: IconValue;
+            focused: boolean;
+            clearable: boolean;
+            dirty: boolean;
+            persistentClear: boolean;
+            singleLine: boolean;
+        }> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof vue.nextTick;
+        $watch(source: string | Function, cb: Function, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
+    } & Readonly<vue.ExtractPropTypes<Omit<{
+        loading: BooleanConstructor;
+        theme: StringConstructor;
+        appendInnerIcon: PropType<IconValue>;
+        bgColor: StringConstructor;
+        clearable: BooleanConstructor;
+        clearIcon: {
+            type: PropType<IconValue>;
+            default: string;
+        };
+        active: BooleanConstructor;
+        color: StringConstructor;
+        dirty: BooleanConstructor;
+        disabled: BooleanConstructor;
+        error: BooleanConstructor;
+        label: StringConstructor;
+        persistentClear: BooleanConstructor;
+        prependInnerIcon: PropType<IconValue>;
+        reverse: BooleanConstructor;
+        singleLine: BooleanConstructor;
+        variant: {
+            type: PropType<"filled" | "outlined" | "plain" | "underlined" | "solo">;
+            default: string;
+            validator: (v: any) => boolean;
+        };
+        'onClick:clear': PropType<EventProp<(...args: any[]) => any>>;
+        'onClick:appendInner': PropType<EventProp<(...args: any[]) => any>>;
+        'onClick:prependInner': PropType<EventProp<(...args: any[]) => any>>;
+        focused: BooleanConstructor;
+        id: StringConstructor;
+    }, "$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<{
+        controlRef: Ref<HTMLElement | undefined>;
+    }> & {} & vue.ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<Omit<{
+    loading: BooleanConstructor;
+    theme: StringConstructor;
+    appendInnerIcon: PropType<IconValue>;
+    bgColor: StringConstructor;
+    clearable: BooleanConstructor;
+    clearIcon: {
+        type: PropType<IconValue>;
+        default: string;
+    };
+    active: BooleanConstructor;
+    color: StringConstructor;
+    dirty: BooleanConstructor;
+    disabled: BooleanConstructor;
+    error: BooleanConstructor;
+    label: StringConstructor;
+    persistentClear: BooleanConstructor;
+    prependInnerIcon: PropType<IconValue>;
+    reverse: BooleanConstructor;
+    singleLine: BooleanConstructor;
+    variant: {
+        type: PropType<"filled" | "outlined" | "plain" | "underlined" | "solo">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    'onClick:clear': PropType<EventProp<(...args: any[]) => any>>;
+    'onClick:appendInner': PropType<EventProp<(...args: any[]) => any>>;
+    'onClick:prependInner': PropType<EventProp<(...args: any[]) => any>>;
+    focused: BooleanConstructor;
+    id: StringConstructor;
+}, "$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;
+}, {
+    controlRef: Ref<HTMLElement | undefined>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
+    'click:control': (e: MouseEvent) => boolean;
+    'update:focused': (focused: boolean) => boolean;
+    'update:modelValue': (val: any) => boolean;
+}, "$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;
+    loading: boolean;
+    disabled: boolean;
+    variant: "filled" | "outlined" | "plain" | "underlined" | "solo";
+    clearIcon: IconValue;
+    focused: boolean;
+    clearable: boolean;
+    dirty: boolean;
+    persistentClear: boolean;
+    singleLine: boolean;
+}> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T>() => {
+    $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;
+    };
+});
+declare type VField = InstanceType<typeof VField>;
+
+declare const VFieldLabel: vue.DefineComponent<{
+    floating: BooleanConstructor;
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    floating: BooleanConstructor;
+}>>, {
+    floating: boolean;
+}>;
+declare type VFieldLabel = InstanceType<typeof VFieldLabel>;
+
+export { VField, VFieldLabel };

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);
 }