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

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

@@ -0,0 +1,464 @@
+import * as vue from 'vue';
+import { PropType, JSXComponent, ComputedRef, Ref, nextTick } from 'vue';
+
+declare type Density = null | 'default' | 'comfortable' | 'compact';
+
+declare type EventProp<T = (...args: any[]) => any> = T | T[];
+declare const EventProp: PropType<EventProp<(...args: any[]) => any>>;
+
+declare type ValidationResult = string | boolean;
+declare type ValidationRule = ValidationResult | PromiseLike<ValidationResult> | ((value: any) => ValidationResult) | ((value: any) => PromiseLike<ValidationResult>);
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+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;
+}
+
+declare const VFileInput: vue.DefineComponent<{
+    loading: BooleanConstructor;
+    theme: StringConstructor;
+    appendInnerIcon: PropType<IconValue>;
+    bgColor: StringConstructor;
+    clearable: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    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>>;
+    modelValue: {
+        type: PropType<File[]>;
+        default: () => never[];
+        validator: (val: any) => boolean;
+    };
+    errorMessages: {
+        type: PropType<string | string[]>;
+        default: () => never[];
+    };
+    maxErrors: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    rules: {
+        type: PropType<ValidationRule[]>;
+        default: () => never[];
+    };
+    validationValue: null;
+    density: {
+        type: PropType<Density>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    id: StringConstructor;
+    appendIcon: PropType<IconValue>;
+    prependIcon: {
+        type: PropType<(string & {}) | IconValue>;
+        default: (string & {}) | IconValue;
+    };
+    hideDetails: PropType<boolean | "auto">;
+    messages: {
+        type: PropType<string | string[]>;
+        default: () => never[];
+    };
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    'onClick:prepend': PropType<EventProp<(...args: any[]) => any>>;
+    'onClick:append': PropType<EventProp<(...args: any[]) => any>>;
+    chips: BooleanConstructor;
+    counter: BooleanConstructor;
+    counterSizeString: {
+        type: StringConstructor;
+        default: string;
+    };
+    counterString: {
+        type: StringConstructor;
+        default: string;
+    };
+    multiple: BooleanConstructor;
+    hint: StringConstructor;
+    persistentHint: BooleanConstructor;
+    placeholder: StringConstructor;
+    showSize: {
+        type: PropType<boolean | 1000 | 1024>;
+        default: boolean;
+        validator: (v: boolean | number) => boolean;
+    };
+}, Omit<Omit<{
+    $: vue.ComponentInternalInstance;
+    $data: {};
+    $props: Partial<{
+        error: boolean;
+        direction: "horizontal" | "vertical";
+        disabled: boolean;
+        readonly: boolean;
+        messages: string | string[];
+        density: Density;
+        errorMessages: string | string[];
+        maxErrors: string | number;
+        rules: ValidationRule[];
+    }> & Omit<Readonly<vue.ExtractPropTypes<Omit<{
+        disabled: BooleanConstructor;
+        error: BooleanConstructor;
+        errorMessages: {
+            type: PropType<string | string[]>;
+            default: () => never[];
+        };
+        maxErrors: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: number;
+        };
+        name: StringConstructor;
+        label: StringConstructor;
+        readonly: BooleanConstructor;
+        rules: {
+            type: PropType<ValidationRule[]>;
+            default: () => never[];
+        };
+        modelValue: null;
+        validationValue: null;
+        density: {
+            type: PropType<Density>;
+            default: string;
+            validator: (v: any) => boolean;
+        };
+        id: StringConstructor;
+        appendIcon: PropType<IconValue>;
+        prependIcon: PropType<IconValue>;
+        hideDetails: PropType<boolean | "auto">;
+        messages: {
+            type: PropType<string | string[]>;
+            default: () => never[];
+        };
+        direction: {
+            type: PropType<"horizontal" | "vertical">;
+            default: string;
+            validator: (v: any) => boolean;
+        };
+        'onClick:prepend': PropType<EventProp<(...args: any[]) => any>>;
+        'onClick:append': PropType<EventProp<(...args: any[]) => any>>;
+    }, "$children" | "v-slots" | "v-slot:default" | "v-slot:prepend" | "v-slot:append" | "v-slot:details">>> & {
+        "onUpdate:modelValue"?: ((val: any) => any) | undefined;
+    } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "error" | "direction" | "disabled" | "readonly" | "messages" | "density" | "errorMessages" | "maxErrors" | "rules">;
+    $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: "update:modelValue", val: any) => void;
+    $el: any;
+    $options: vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<Omit<{
+        disabled: BooleanConstructor;
+        error: BooleanConstructor;
+        errorMessages: {
+            type: PropType<string | string[]>;
+            default: () => never[];
+        };
+        maxErrors: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: number;
+        };
+        name: StringConstructor;
+        label: StringConstructor;
+        readonly: BooleanConstructor;
+        rules: {
+            type: PropType<ValidationRule[]>;
+            default: () => never[];
+        };
+        modelValue: null;
+        validationValue: null;
+        density: {
+            type: PropType<Density>;
+            default: string;
+            validator: (v: any) => boolean;
+        };
+        id: StringConstructor;
+        appendIcon: PropType<IconValue>;
+        prependIcon: PropType<IconValue>;
+        hideDetails: PropType<boolean | "auto">;
+        messages: {
+            type: PropType<string | string[]>;
+            default: () => never[];
+        };
+        direction: {
+            type: PropType<"horizontal" | "vertical">;
+            default: string;
+            validator: (v: any) => boolean;
+        };
+        'onClick:prepend': PropType<EventProp<(...args: any[]) => any>>;
+        'onClick:append': PropType<EventProp<(...args: any[]) => any>>;
+    }, "$children" | "v-slots" | "v-slot:default" | "v-slot:prepend" | "v-slot:append" | "v-slot:details">>> & {
+        "onUpdate:modelValue"?: ((val: any) => any) | undefined;
+    }, {
+        reset: () => void;
+        resetValidation: () => void;
+        validate: () => Promise<string[]>;
+    }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
+        'update:modelValue': (val: any) => boolean;
+    }, "$children" | "v-slots" | "v-slot:default" | "v-slot:prepend" | "v-slot:append" | "v-slot:details">, string, {
+        error: boolean;
+        direction: "horizontal" | "vertical";
+        disabled: boolean;
+        readonly: boolean;
+        messages: string | string[];
+        density: Density;
+        errorMessages: string | string[];
+        maxErrors: string | number;
+        rules: ValidationRule[];
+    }> & {
+        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 nextTick;
+    $watch(source: string | Function, cb: Function, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
+} & Readonly<vue.ExtractPropTypes<Omit<{
+    disabled: BooleanConstructor;
+    error: BooleanConstructor;
+    errorMessages: {
+        type: PropType<string | string[]>;
+        default: () => never[];
+    };
+    maxErrors: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    name: StringConstructor;
+    label: StringConstructor;
+    readonly: BooleanConstructor;
+    rules: {
+        type: PropType<ValidationRule[]>;
+        default: () => never[];
+    };
+    modelValue: null;
+    validationValue: null;
+    density: {
+        type: PropType<Density>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    id: StringConstructor;
+    appendIcon: PropType<IconValue>;
+    prependIcon: PropType<IconValue>;
+    hideDetails: PropType<boolean | "auto">;
+    messages: {
+        type: PropType<string | string[]>;
+        default: () => never[];
+    };
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    'onClick:prepend': PropType<EventProp<(...args: any[]) => any>>;
+    'onClick:append': PropType<EventProp<(...args: any[]) => any>>;
+}, "$children" | "v-slots" | "v-slot:default" | "v-slot:prepend" | "v-slot:append" | "v-slot:details">>> & {
+    "onUpdate:modelValue"?: ((val: any) => any) | undefined;
+} & vue.ShallowUnwrapRef<{
+    reset: () => void;
+    resetValidation: () => void;
+    validate: () => Promise<string[]>;
+}> & {} & vue.ComponentCustomProperties & {
+    $props: {
+        $children?: {} | vue.VNodeChild | {
+            default?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+            prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+            append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+            details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        };
+        'v-slots'?: {
+            default?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+            prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+            append?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+            details?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:default"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        "v-slot:prepend"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        "v-slot:append"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        "v-slot:details"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+    };
+}, "id" | "name" | "label" | "$children" | "v-slots" | keyof vue.VNodeProps | keyof vue.AllowedComponentProps | "v-slot:default" | "v-slot:prepend" | "v-slot:append" | "onUpdate:modelValue" | "modelValue" | "prependIcon" | "appendIcon" | "validationValue" | "onClick:append" | "onClick:prepend" | "hideDetails" | "v-slot:details" | ("error" | "direction" | "disabled" | "readonly" | "messages" | "density" | "errorMessages" | "maxErrors" | "rules")>, `$${any}`>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'click:control': (e: MouseEvent) => true;
+    'update:modelValue': (files: File[]) => true;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    loading: BooleanConstructor;
+    theme: StringConstructor;
+    appendInnerIcon: PropType<IconValue>;
+    bgColor: StringConstructor;
+    clearable: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    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>>;
+    modelValue: {
+        type: PropType<File[]>;
+        default: () => never[];
+        validator: (val: any) => boolean;
+    };
+    errorMessages: {
+        type: PropType<string | string[]>;
+        default: () => never[];
+    };
+    maxErrors: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    rules: {
+        type: PropType<ValidationRule[]>;
+        default: () => never[];
+    };
+    validationValue: null;
+    density: {
+        type: PropType<Density>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    id: StringConstructor;
+    appendIcon: PropType<IconValue>;
+    prependIcon: {
+        type: PropType<(string & {}) | IconValue>;
+        default: (string & {}) | IconValue;
+    };
+    hideDetails: PropType<boolean | "auto">;
+    messages: {
+        type: PropType<string | string[]>;
+        default: () => never[];
+    };
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    'onClick:prepend': PropType<EventProp<(...args: any[]) => any>>;
+    'onClick:append': PropType<EventProp<(...args: any[]) => any>>;
+    chips: BooleanConstructor;
+    counter: BooleanConstructor;
+    counterSizeString: {
+        type: StringConstructor;
+        default: string;
+    };
+    counterString: {
+        type: StringConstructor;
+        default: string;
+    };
+    multiple: BooleanConstructor;
+    hint: StringConstructor;
+    persistentHint: BooleanConstructor;
+    placeholder: StringConstructor;
+    showSize: {
+        type: PropType<boolean | 1000 | 1024>;
+        default: boolean;
+        validator: (v: boolean | number) => boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((files: File[]) => any) | undefined;
+    "onClick:control"?: ((e: MouseEvent) => any) | undefined;
+}, {
+    reverse: boolean;
+    error: boolean;
+    active: boolean;
+    direction: "horizontal" | "vertical";
+    loading: boolean;
+    disabled: boolean;
+    multiple: boolean;
+    readonly: boolean;
+    messages: string | string[];
+    counter: boolean;
+    density: Density;
+    variant: "filled" | "outlined" | "plain" | "underlined" | "solo";
+    modelValue: File[];
+    prependIcon: (string & {}) | IconValue;
+    errorMessages: string | string[];
+    maxErrors: string | number;
+    rules: ValidationRule[];
+    clearIcon: IconValue;
+    clearable: boolean;
+    dirty: boolean;
+    persistentClear: boolean;
+    singleLine: boolean;
+    persistentHint: boolean;
+    chips: boolean;
+    counterSizeString: string;
+    counterString: string;
+    showSize: boolean | 1000 | 1024;
+}>;
+declare type VFileInput = InstanceType<typeof VFileInput>;
+
+export { VFileInput };

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["VFileInput"],"sources":["../../../src/components/VFileInput/index.ts"],"sourcesContent":["export { VFileInput } from './VFileInput'\n"],"mappings":"SAASA,U"}
+{"version":3,"file":"index.mjs","names":["VFileInput"],"sources":["../../../src/components/VFileInput/index.ts"],"sourcesContent":["export { VFileInput } from './VFileInput'\n"],"mappings":"SAASA,UAAU"}

package/lib/components/VFooter/VFooter.css

@@ -4,11 +4,18 @@
   flex: 1 1 auto;
   padding: 8px 16px;
   position: relative;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-style: solid;
+  border-width: 0;
   box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
   border-radius: 0;
   background: rgb(var(--v-theme-surface));
   color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
 }
+.v-footer--border {
+  border-width: thin;
+  box-shadow: none;
+}
 .v-footer--absolute {
   position: absolute;
 }

package/lib/components/VFooter/VFooter.mjs

@@ -1,7 +1,8 @@
 import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
 // Styles
-import "./VFooter.css"; // Composables
+import "./VFooter.css";
 
+// Composables
 import { makeBorderProps, useBorder } from "../../composables/border.mjs";
 import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
 import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs";
@@ -10,7 +11,6 @@ import { makeTagProps } from "../../composables/tag.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
 import { useBackgroundColor } from "../../composables/color.mjs";
 import { useResizeObserver } from "../../composables/resizeObserver.mjs"; // Utilities
-
 import { computed, ref, toRef } from 'vue';
 import { defineComponent, useRender } from "../../util/index.mjs";
 export const VFooter = defineComponent({
@@ -31,7 +31,6 @@ export const VFooter = defineComponent({
     }),
     ...makeThemeProps()
   },
-
   setup(props, _ref) {
     let {
       slots
@@ -78,6 +77,5 @@ export const VFooter = defineComponent({
     }, slots));
     return {};
   }
-
 });
 //# sourceMappingURL=VFooter.mjs.map

package/lib/components/VFooter/VFooter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VFooter.mjs","names":["makeBorderProps","useBorder","makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","useBackgroundColor","useResizeObserver","computed","ref","toRef","defineComponent","useRender","VFooter","name","props","app","Boolean","color","String","height","type","Number","default","tag","setup","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","borderClasses","elevationClasses","roundedClasses","autoHeight","resizeRef","entries","length","value","target","clientHeight","parseInt","layoutItemStyles","id","order","position","layoutSize","elementSize","undefined","active","absolute"],"sources":["../../../src/components/VFooter/VFooter.tsx"],"sourcesContent":["// Styles\nimport './VFooter.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { computed, ref, toRef } from 'vue'\nimport { defineComponent, useRender } from '@/util'\n\nexport const VFooter = defineComponent({\n  name: 'VFooter',\n\n  props: {\n    app: Boolean,\n    color: String,\n    height: {\n      type: [Number, String],\n      default: 'auto',\n    },\n\n    ...makeBorderProps(),\n    ...makeElevationProps(),\n    ...makeLayoutItemProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps({ tag: 'footer' }),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n\n    const autoHeight = ref(32)\n    const { resizeRef } = useResizeObserver(entries => {\n      if (!entries.length) return\n      autoHeight.value = entries[0].target.clientHeight\n    })\n    const height = computed(() => props.height === 'auto' ? autoHeight.value : parseInt(props.height, 10))\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: computed(() => 'bottom'),\n      layoutSize: height,\n      elementSize: computed(() => props.height === 'auto' ? undefined : height.value),\n      active: computed(() => props.app),\n      absolute: toRef(props, 'absolute'),\n    })\n\n    useRender(() => (\n      <props.tag\n        ref={ resizeRef }\n        class={[\n          'v-footer',\n          themeClasses.value,\n          backgroundColorClasses.value,\n          borderClasses.value,\n          elevationClasses.value,\n          roundedClasses.value,\n        ]}\n        style={[\n          backgroundColorStyles,\n          props.app ? layoutItemStyles.value : undefined,\n        ]}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n"],"mappings":"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"}
+{"version":3,"file":"VFooter.mjs","names":["makeBorderProps","useBorder","makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","useBackgroundColor","useResizeObserver","computed","ref","toRef","defineComponent","useRender","VFooter","name","props","app","Boolean","color","String","height","type","Number","default","tag","setup","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","borderClasses","elevationClasses","roundedClasses","autoHeight","resizeRef","entries","length","value","target","clientHeight","parseInt","layoutItemStyles","id","order","position","layoutSize","elementSize","undefined","active","absolute"],"sources":["../../../src/components/VFooter/VFooter.tsx"],"sourcesContent":["// Styles\nimport './VFooter.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { computed, ref, toRef } from 'vue'\nimport { defineComponent, useRender } from '@/util'\n\nexport const VFooter = defineComponent({\n  name: 'VFooter',\n\n  props: {\n    app: Boolean,\n    color: String,\n    height: {\n      type: [Number, String],\n      default: 'auto',\n    },\n\n    ...makeBorderProps(),\n    ...makeElevationProps(),\n    ...makeLayoutItemProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps({ tag: 'footer' }),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n\n    const autoHeight = ref(32)\n    const { resizeRef } = useResizeObserver(entries => {\n      if (!entries.length) return\n      autoHeight.value = entries[0].target.clientHeight\n    })\n    const height = computed(() => props.height === 'auto' ? autoHeight.value : parseInt(props.height, 10))\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: computed(() => 'bottom'),\n      layoutSize: height,\n      elementSize: computed(() => props.height === 'auto' ? undefined : height.value),\n      active: computed(() => props.app),\n      absolute: toRef(props, 'absolute'),\n    })\n\n    useRender(() => (\n      <props.tag\n        ref={ resizeRef }\n        class={[\n          'v-footer',\n          themeClasses.value,\n          backgroundColorClasses.value,\n          borderClasses.value,\n          elevationClasses.value,\n          roundedClasses.value,\n        ]}\n        style={[\n          backgroundColorStyles,\n          props.app ? layoutItemStyles.value : undefined,\n        ]}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VFooter = InstanceType<typeof VFooter>\n"],"mappings":"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"}

package/lib/components/VFooter/VFooter.sass

@@ -9,7 +9,7 @@
   position: relative
 
   // missing from variables
-  // @include tools.border($footer-query)
+  @include tools.border($footer-border...)
   @include tools.elevation($footer-elevation)
   @include tools.position($footer-positions)
   @include tools.rounded($footer-border-radius)

package/lib/components/VFooter/_variables.scss

@@ -3,6 +3,10 @@
 
 // VFooter
 $footer-background: rgb(var(--v-theme-surface)) !default;
+$footer-border-color: settings.$border-color-root !default;
+$footer-border-style: settings.$border-style-root !default;
+$footer-border-thin-width: thin !default;
+$footer-border-width: 0 !default;
 $footer-border-radius: map.get(settings.$rounded, 0) !default;
 $footer-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
 $footer-flex: 1 1 auto !default;
@@ -13,6 +17,13 @@ $footer-positions: absolute fixed !default;
 $footer-rounded-border-radius: settings.$border-radius-root !default;
 
 // Lists
+$footer-border: (
+  $footer-border-color,
+  $footer-border-style,
+  $footer-border-width,
+  $footer-border-thin-width
+) !default;
+
 $footer-theme: (
   $footer-background,
   $footer-color

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

@@ -0,0 +1,77 @@
+import * as vue from 'vue';
+
+declare const VFooter: vue.DefineComponent<{
+    theme: StringConstructor;
+    tag: Omit<{
+        type: StringConstructor;
+        default: string;
+    }, "type" | "default"> & {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    name: {
+        type: StringConstructor;
+    };
+    order: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    absolute: BooleanConstructor;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    app: BooleanConstructor;
+    color: StringConstructor;
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    theme: StringConstructor;
+    tag: Omit<{
+        type: StringConstructor;
+        default: string;
+    }, "type" | "default"> & {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    name: {
+        type: StringConstructor;
+    };
+    order: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    absolute: BooleanConstructor;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    app: BooleanConstructor;
+    color: StringConstructor;
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+}>>, {
+    absolute: boolean;
+    height: string | number;
+    order: string | number;
+    tag: string;
+    rounded: string | number | boolean;
+    app: boolean;
+}>;
+declare type VFooter = InstanceType<typeof VFooter>;
+
+export { VFooter };

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["VFooter"],"sources":["../../../src/components/VFooter/index.ts"],"sourcesContent":["export { VFooter } from './VFooter'\n"],"mappings":"SAASA,O"}
+{"version":3,"file":"index.mjs","names":["VFooter"],"sources":["../../../src/components/VFooter/index.ts"],"sourcesContent":["export { VFooter } from './VFooter'\n"],"mappings":"SAASA,OAAO"}