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

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.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,76 @@
+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;
+}>;
+
+export { VFooter };

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

@@ -0,0 +1,72 @@
+import * as vue from 'vue';
+
+interface FieldValidationResult {
+    id: number | string;
+    errorMessages: string[];
+}
+interface FormValidationResult {
+    valid: boolean;
+    errors: FieldValidationResult[];
+}
+interface SubmitEventPromise extends SubmitEvent, Promise<FormValidationResult> {
+}
+
+declare const VForm: vue.DefineComponent<{
+    disabled: BooleanConstructor;
+    fastFail: BooleanConstructor;
+    lazyValidation: BooleanConstructor;
+    readonly: BooleanConstructor;
+    modelValue: {
+        type: vue.PropType<boolean | null>;
+        default: null;
+    };
+}, {
+    errors: vue.Ref<{
+        id: string | number;
+        errorMessages: string[];
+    }[]>;
+    isDisabled: vue.ComputedRef<boolean>;
+    isReadonly: vue.ComputedRef<boolean>;
+    isValidating: vue.Ref<boolean>;
+    items: vue.Ref<{
+        id: string | number;
+        validate: () => Promise<string[]>;
+        reset: () => void;
+        resetValidation: () => void;
+        isValid: boolean | null;
+        errorMessages: string[];
+    }[]>;
+    validate: () => Promise<{
+        valid: boolean;
+        errors: {
+            id: string | number;
+            errorMessages: string[];
+        }[];
+    }>;
+    reset: () => void;
+    resetValidation: () => void;
+} & {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:modelValue': (val: boolean | null) => true;
+    submit: (e: SubmitEventPromise) => true;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    disabled: BooleanConstructor;
+    fastFail: BooleanConstructor;
+    lazyValidation: BooleanConstructor;
+    readonly: BooleanConstructor;
+    modelValue: {
+        type: vue.PropType<boolean | null>;
+        default: null;
+    };
+}>> & {
+    onSubmit?: ((e: SubmitEventPromise) => any) | undefined;
+    "onUpdate:modelValue"?: ((val: boolean | null) => any) | undefined;
+}, {
+    disabled: boolean;
+    readonly: boolean;
+    modelValue: boolean | null;
+    fastFail: boolean;
+    lazyValidation: boolean;
+}>;
+declare type VForm = InstanceType<typeof VForm>;
+
+export { VForm };

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

@@ -0,0 +1,154 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+
+declare const VContainer: vue.DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    fluid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    fluid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    tag: string;
+    fluid: boolean;
+}>;
+
+declare const VCol: vue.DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    alignSelf: {
+        type: PropType<"auto" | "center" | "end" | "start" | "stretch" | "baseline">;
+        default: null;
+        validator: (str: any) => boolean;
+    };
+    order: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: null;
+    };
+    offset: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: null;
+    };
+    cols: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    alignSelf: {
+        type: PropType<"auto" | "center" | "end" | "start" | "stretch" | "baseline">;
+        default: null;
+        validator: (str: any) => boolean;
+    };
+    order: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: null;
+    };
+    offset: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: null;
+    };
+    cols: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+}>>, {
+    offset: string | number;
+    alignSelf: "auto" | "center" | "end" | "start" | "stretch" | "baseline";
+    order: string | number;
+    tag: string;
+    cols: string | number | boolean;
+}>;
+declare type VCol = InstanceType<typeof VCol>;
+
+declare const VRow: vue.DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    alignContent: {
+        type: PropType<"center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch">;
+        default: null;
+        validator: (str: any) => boolean;
+    };
+    justify: {
+        type: PropType<"center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch">;
+        default: null;
+        validator: (str: any) => boolean;
+    };
+    dense: BooleanConstructor;
+    noGutters: BooleanConstructor;
+    align: {
+        type: PropType<"center" | "end" | "start" | "stretch" | "baseline">;
+        default: null;
+        validator: (str: any) => boolean;
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    alignContent: {
+        type: PropType<"center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch">;
+        default: null;
+        validator: (str: any) => boolean;
+    };
+    justify: {
+        type: PropType<"center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch">;
+        default: null;
+        validator: (str: any) => boolean;
+    };
+    dense: BooleanConstructor;
+    noGutters: BooleanConstructor;
+    align: {
+        type: PropType<"center" | "end" | "start" | "stretch" | "baseline">;
+        default: null;
+        validator: (str: any) => boolean;
+    };
+}>>, {
+    alignContent: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch";
+    tag: string;
+    dense: boolean;
+    justify: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch";
+    align: "center" | "end" | "start" | "stretch" | "baseline";
+    noGutters: boolean;
+}>;
+declare type VRow = InstanceType<typeof VRow>;
+
+declare const VSpacer: vue.DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    tag: string;
+}>;
+
+export { VCol, VContainer, VRow, VSpacer };

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

@@ -0,0 +1,30 @@
+import * as vue from 'vue';
+
+declare const VHover: vue.DefineComponent<{
+    closeDelay: (StringConstructor | NumberConstructor)[];
+    openDelay: (StringConstructor | NumberConstructor)[];
+    disabled: BooleanConstructor;
+    modelValue: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | undefined, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:modelValue': (value: boolean) => true;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    closeDelay: (StringConstructor | NumberConstructor)[];
+    openDelay: (StringConstructor | NumberConstructor)[];
+    disabled: BooleanConstructor;
+    modelValue: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}, {
+    disabled: boolean;
+    modelValue: boolean;
+}>;
+
+export { VHover };

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

@@ -0,0 +1,124 @@
+import * as vue from 'vue';
+import { PropType, JSXComponent } from 'vue';
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+declare const VComponentIcon: vue.DefineComponent<{
+    icon: {
+        type: PropType<IconValue>;
+        required: true;
+    };
+    tag: {
+        type: StringConstructor;
+        required: true;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    icon: {
+        type: PropType<IconValue>;
+        required: true;
+    };
+    tag: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>;
+declare const VSvgIcon: vue.DefineComponent<{
+    icon: {
+        type: PropType<IconValue>;
+        required: true;
+    };
+    tag: {
+        type: StringConstructor;
+        required: true;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    icon: {
+        type: PropType<IconValue>;
+        required: true;
+    };
+    tag: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>;
+declare const VLigatureIcon: vue.DefineComponent<{
+    icon: {
+        type: PropType<IconValue>;
+        required: true;
+    };
+    tag: {
+        type: StringConstructor;
+        required: true;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    icon: {
+        type: PropType<IconValue>;
+        required: true;
+    };
+    tag: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>;
+declare const VClassIcon: vue.DefineComponent<{
+    icon: {
+        type: PropType<IconValue>;
+        required: true;
+    };
+    tag: {
+        type: StringConstructor;
+        required: true;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    icon: {
+        type: PropType<IconValue>;
+        required: true;
+    };
+    tag: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>;
+
+declare const VIcon: vue.DefineComponent<{
+    theme: StringConstructor;
+    tag: Omit<{
+        type: StringConstructor;
+        default: string;
+    }, "type" | "default"> & {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    color: StringConstructor;
+    start: BooleanConstructor;
+    end: BooleanConstructor;
+    icon: vue.PropType<IconValue>;
+}, {}, 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;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    color: StringConstructor;
+    start: BooleanConstructor;
+    end: BooleanConstructor;
+    icon: vue.PropType<IconValue>;
+}>>, {
+    end: boolean;
+    start: boolean;
+    size: string | number;
+    tag: string;
+}>;
+
+export { VClassIcon, VComponentIcon, VIcon, VLigatureIcon, VSvgIcon };

package/lib/components/VImg/VImg.mjs

@@ -1,4 +1,4 @@
-import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
+import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, Fragment as _Fragment, createVNode as _createVNode } from "vue";
 import "./VImg.css"; // Components
 
 import { VResponsive } from "../VResponsive/index.mjs"; // Directives
@@ -7,7 +7,7 @@ import intersect from "../../directives/intersect/index.mjs"; // Composables
 
 import { makeTransitionProps, MaybeTransition } from "../../composables/transition.mjs"; // Utilities
 
-import { computed, h, nextTick, onBeforeMount, ref, vShow, watch, withDirectives } from 'vue';
+import { computed, nextTick, onBeforeMount, ref, vShow, watch, withDirectives } from 'vue';
 import { convertToUnit, defineComponent, SUPPORTS_INTERSECTION, useRender } from "../../util/index.mjs"; // Types
 
 export const VImg = defineComponent({
@@ -156,20 +156,22 @@ export const VImg = defineComponent({
       'v-img__img--contain': !props.cover
     }));
 
-    const __image = computed(() => {
+    const __image = () => {
       var _slots$sources;
 
-      if (!normalisedSrc.value.src || state.value === 'idle') return;
-      const img = h('img', {
-        class: ['v-img__img', containClasses.value],
-        src: normalisedSrc.value.src,
-        srcset: normalisedSrc.value.srcset,
-        alt: '',
-        sizes: props.sizes,
-        ref: image,
-        onLoad,
-        onError
-      });
+      if (!normalisedSrc.value.src || state.value === 'idle') return null;
+
+      const img = _createVNode("img", {
+        "class": ['v-img__img', containClasses.value],
+        "src": normalisedSrc.value.src,
+        "srcset": normalisedSrc.value.srcset,
+        "alt": "",
+        "sizes": props.sizes,
+        "ref": image,
+        "onLoad": onLoad,
+        "onError": onError
+      }, null);
+
       const sources = (_slots$sources = slots.sources) == null ? void 0 : _slots$sources.call(slots);
       return _createVNode(MaybeTransition, {
         "transition": props.transition,
@@ -179,9 +181,9 @@ export const VImg = defineComponent({
           "class": "v-img__picture"
         }, [sources, img]) : img, [[vShow, state.value === 'loaded']])]
       });
-    });
+    };
 
-    const __preloadImage = computed(() => _createVNode(MaybeTransition, {
+    const __preloadImage = () => _createVNode(MaybeTransition, {
       "transition": props.transition
     }, {
       default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && _createVNode("img", {
@@ -189,10 +191,10 @@ export const VImg = defineComponent({
         "src": normalisedSrc.value.lazySrc,
         "alt": ""
       }, null)]
-    }));
+    });
 
-    const __placeholder = computed(() => {
-      if (!slots.placeholder) return;
+    const __placeholder = () => {
+      if (!slots.placeholder) return null;
       return _createVNode(MaybeTransition, {
         "transition": props.transition,
         "appear": true
@@ -201,10 +203,10 @@ export const VImg = defineComponent({
           "class": "v-img__placeholder"
         }, [slots.placeholder()])]
       });
-    });
+    };
 
-    const __error = computed(() => {
-      if (!slots.error) return;
+    const __error = () => {
+      if (!slots.error) return null;
       return _createVNode(MaybeTransition, {
         "transition": props.transition,
         "appear": true
@@ -213,17 +215,17 @@ export const VImg = defineComponent({
           "class": "v-img__error"
         }, [slots.error()])]
       });
-    });
+    };
 
-    const __gradient = computed(() => {
-      if (!props.gradient) return;
+    const __gradient = () => {
+      if (!props.gradient) return null;
       return _createVNode("div", {
         "class": "v-img__gradient",
         "style": {
           backgroundImage: `linear-gradient(${props.gradient})`
         }
       }, null);
-    });
+    };
 
     const isBooted = ref(false);
     {
@@ -250,7 +252,7 @@ export const VImg = defineComponent({
       "aria-label": props.alt,
       "role": props.alt ? 'img' : undefined
     }, {
-      additional: () => [__image.value, __preloadImage.value, __gradient.value, __placeholder.value, __error.value],
+      additional: () => _createVNode(_Fragment, null, [_createVNode(__image, null, null), _createVNode(__preloadImage, null, null), _createVNode(__gradient, null, null), _createVNode(__placeholder, null, null), _createVNode(__error, null, null)]),
       default: slots.default
     }), [[_resolveDirective("intersect"), {
       handler: init,