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

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

@@ -0,0 +1,236 @@
+import * as vue from 'vue';
+import { PropType, JSXComponent } from 'vue';
+
+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>;
+
+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<"default" | "compact" | "comfortable" | null>;
+        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;
+    };
+}, {}, 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<"default" | "compact" | "comfortable" | null>;
+        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: "default" | "compact" | "comfortable" | null;
+    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,"sources":["../../../src/components/VFileInput/index.ts"],"names":["VFileInput"],"mappings":"SAASA,U","sourcesContent":["export { VFileInput } from './VFileInput'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VFileInput"],"sources":["../../../src/components/VFileInput/index.ts"],"sourcesContent":["export { VFileInput } from './VFileInput'\n"],"mappings":"SAASA,U"}

package/lib/components/VFooter/VFooter.css

@@ -4,11 +4,18 @@
   flex: 1 1 auto;
   padding: 8px 16px;
   position: relative;
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+  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

@@ -3,24 +3,28 @@ import { createVNode as _createVNode, resolveDirective as _resolveDirective } fr
 import "./VFooter.css"; // Composables
 
 import { makeBorderProps, useBorder } from "../../composables/border.mjs";
-import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
 import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
-import { makePositionProps, usePosition } from "../../composables/position.mjs";
+import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
-import { useBackgroundColor } from "../../composables/color.mjs"; // Utilities
+import { useBackgroundColor } from "../../composables/color.mjs";
+import { useResizeObserver } from "../../composables/resizeObserver.mjs"; // Utilities
 
-import { defineComponent } from "../../util/index.mjs";
-import { toRef } from 'vue';
+import { computed, ref, toRef } from 'vue';
+import { defineComponent, useRender } from "../../util/index.mjs";
 export const VFooter = defineComponent({
   name: 'VFooter',
   props: {
+    app: Boolean,
     color: String,
+    height: {
+      type: [Number, String],
+      default: 'auto'
+    },
     ...makeBorderProps(),
-    ...makeDimensionProps(),
     ...makeElevationProps(),
-    ...makePositionProps(),
+    ...makeLayoutItemProps(),
     ...makeRoundedProps(),
     ...makeTagProps({
       tag: 'footer'
@@ -42,23 +46,37 @@ export const VFooter = defineComponent({
     const {
       borderClasses
     } = useBorder(props);
-    const {
-      dimensionStyles
-    } = useDimension(props);
     const {
       elevationClasses
     } = useElevation(props);
-    const {
-      positionClasses,
-      positionStyles
-    } = usePosition(props);
     const {
       roundedClasses
     } = useRounded(props);
-    return () => _createVNode(props.tag, {
-      "class": ['v-footer', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value],
-      "style": [backgroundColorStyles, dimensionStyles.value, positionStyles.value]
-    }, slots);
+    const autoHeight = ref(32);
+    const {
+      resizeRef
+    } = useResizeObserver(entries => {
+      if (!entries.length) return;
+      autoHeight.value = entries[0].target.clientHeight;
+    });
+    const height = computed(() => props.height === 'auto' ? autoHeight.value : parseInt(props.height, 10));
+    const {
+      layoutItemStyles
+    } = useLayoutItem({
+      id: props.name,
+      order: computed(() => parseInt(props.order, 10)),
+      position: computed(() => 'bottom'),
+      layoutSize: height,
+      elementSize: computed(() => props.height === 'auto' ? undefined : height.value),
+      active: computed(() => props.app),
+      absolute: toRef(props, 'absolute')
+    });
+    useRender(() => _createVNode(props.tag, {
+      "ref": resizeRef,
+      "class": ['v-footer', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value],
+      "style": [backgroundColorStyles, props.app ? layoutItemStyles.value : undefined]
+    }, slots));
+    return {};
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VFooter/VFooter.tsx"],"names":["makeBorderProps","useBorder","makeDimensionProps","useDimension","makeElevationProps","useElevation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","useBackgroundColor","defineComponent","toRef","VFooter","name","props","color","String","tag","setup","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","borderClasses","dimensionStyles","elevationClasses","positionClasses","positionStyles","roundedClasses","value"],"mappings":";AAAA;AACA,uB,CAEA;;SACSA,e,EAAiBC,S;SACjBC,kB,EAAoBC,Y;SACpBC,kB,EAAoBC,Y;SACpBC,iB,EAAmBC,W;SACnBC,gB,EAAkBC,U;SAClBC,Y;SACAC,c,EAAgBC,Y;SAChBC,kB,uCAET;;SACSC,e;AACT,SAASC,KAAT,QAAsB,KAAtB;AAEA,OAAO,MAAMC,OAAO,GAAGF,eAAe,CAAC;AACrCG,EAAAA,IAAI,EAAE,SAD+B;AAGrCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAEC,MADF;AAGL,OAAGpB,eAAe,EAHb;AAIL,OAAGE,kBAAkB,EAJhB;AAKL,OAAGE,kBAAkB,EALhB;AAML,OAAGE,iBAAiB,EANf;AAOL,OAAGE,gBAAgB,EAPd;AAQL,OAAGE,YAAY,CAAC;AAAEW,MAAAA,GAAG,EAAE;AAAP,KAAD,CARV;AASL,OAAGV,cAAc;AATZ,GAH8B;;AAerCW,EAAAA,KAAK,CAAEJ,KAAF,QAAoB;AAAA,QAAX;AAAEK,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBZ,YAAY,CAACM,KAAD,CAArC;AACA,UAAM;AAAEO,MAAAA,sBAAF;AAA0BC,MAAAA;AAA1B,QAAoDb,kBAAkB,CAACE,KAAK,CAACG,KAAD,EAAQ,OAAR,CAAN,CAA5E;AACA,UAAM;AAAES,MAAAA;AAAF,QAAoB1B,SAAS,CAACiB,KAAD,CAAnC;AACA,UAAM;AAAEU,MAAAA;AAAF,QAAsBzB,YAAY,CAACe,KAAD,CAAxC;AACA,UAAM;AAAEW,MAAAA;AAAF,QAAuBxB,YAAY,CAACa,KAAD,CAAzC;AACA,UAAM;AAAEY,MAAAA,eAAF;AAAmBC,MAAAA;AAAnB,QAAsCxB,WAAW,CAACW,KAAD,CAAvD;AACA,UAAM;AAAEc,MAAAA;AAAF,QAAqBvB,UAAU,CAACS,KAAD,CAArC;AAEA,WAAO;AAAA,eAEI,CACL,UADK,EAELM,YAAY,CAACS,KAFR,EAGLR,sBAAsB,CAACQ,KAHlB,EAILN,aAAa,CAACM,KAJT,EAKLJ,gBAAgB,CAACI,KALZ,EAMLH,eAAe,CAACG,KANX,EAOLD,cAAc,CAACC,KAPV,CAFJ;AAAA,eAWI,CACLP,qBADK,EAELE,eAAe,CAACK,KAFX,EAGLF,cAAc,CAACE,KAHV;AAXJ,OAgBOV,KAhBP,CAAP;AAmBD;;AA3CoC,CAAD,CAA/B","sourcesContent":["// Styles\nimport './VFooter.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makePositionProps, usePosition } from '@/composables/position'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useBackgroundColor } from '@/composables/color'\n\n// Utilities\nimport { defineComponent } from '@/util'\nimport { toRef } from 'vue'\n\nexport const VFooter = defineComponent({\n  name: 'VFooter',\n\n  props: {\n    color: String,\n\n    ...makeBorderProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makePositionProps(),\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 { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { positionClasses, positionStyles } = usePosition(props)\n    const { roundedClasses } = useRounded(props)\n\n    return () => (\n      <props.tag\n        class={[\n          'v-footer',\n          themeClasses.value,\n          backgroundColorClasses.value,\n          borderClasses.value,\n          elevationClasses.value,\n          positionClasses.value,\n          roundedClasses.value,\n        ]}\n        style={[\n          backgroundColorStyles,\n          dimensionStyles.value,\n          positionStyles.value,\n        ]}\n        v-slots={ slots }\n      />\n    )\n  },\n})\n"],"file":"VFooter.mjs"}
+{"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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"}

package/lib/components/VFooter/VFooter.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use '../../styles/tools'
 @use './variables' as *
 
@@ -10,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

@@ -1,8 +1,12 @@
 @use 'sass:map';
 @use '../../styles/settings';
 
-// Defaults
+// 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;
@@ -12,6 +16,14 @@ $footer-padding: 8px 16px !default;
 $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/VFooter/index.mjs.map

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

package/lib/components/VForm/VForm.mjs

@@ -1,9 +1,11 @@
 import { createVNode as _createVNode } from "vue";
 // Composables
-import { createForm, makeFormProps } from "../../composables/form.mjs"; // Utilities
+import { createForm, makeFormProps } from "../../composables/form.mjs";
+import { forwardRefs } from "../../composables/forwardRefs.mjs"; // Utilities
 
 import { ref } from 'vue';
-import { defineComponent, useRender } from "../../util/index.mjs";
+import { defineComponent, useRender } from "../../util/index.mjs"; // Types
+
 export const VForm = defineComponent({
   name: 'VForm',
   props: { ...makeFormProps()
@@ -26,17 +28,29 @@ export const VForm = defineComponent({
       form.reset();
     }
 
-    function onSubmit(e) {
+    function onSubmit(_e) {
+      const e = _e;
+      const ready = form.validate();
+      e.then = ready.then.bind(ready);
+      e.catch = ready.catch.bind(ready);
+      e.finally = ready.finally.bind(ready);
+      emit('submit', e);
+
+      if (!e.defaultPrevented) {
+        ready.then(_ref2 => {
+          let {
+            valid
+          } = _ref2;
+
+          if (valid) {
+            var _formRef$value;
+
+            (_formRef$value = formRef.value) == null ? void 0 : _formRef$value.submit();
+          }
+        });
+      }
+
       e.preventDefault();
-      form.validate().then(_ref2 => {
-        let {
-          valid
-        } = _ref2;
-
-        if (valid) {
-          emit('submit', e);
-        }
-      });
     }
 
     useRender(() => {
@@ -50,7 +64,7 @@ export const VForm = defineComponent({
         "onSubmit": onSubmit
       }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, form)]);
     });
-    return form;
+    return forwardRefs(form, formRef);
   }
 
 });

package/lib/components/VForm/VForm.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VForm/VForm.tsx"],"names":["createForm","makeFormProps","ref","defineComponent","useRender","VForm","name","props","emits","val","submit","e","setup","slots","emit","form","formRef","onReset","preventDefault","reset","onSubmit","validate","then","valid","default"],"mappings":";AAAA;SACSA,U,EAAYC,a,sCAErB;;AACA,SAASC,GAAT,QAAoB,KAApB;SACSC,e,EAAiBC,S;AAE1B,OAAO,MAAMC,KAAK,GAAGF,eAAe,CAAC;AACnCG,EAAAA,IAAI,EAAE,OAD6B;AAGnCC,EAAAA,KAAK,EAAE,EACL,GAAGN,aAAa;AADX,GAH4B;AAOnCO,EAAAA,KAAK,EAAE;AACL,yBAAsBC,GAAD,IAAyB,IADzC;AAELC,IAAAA,MAAM,EAAGC,CAAD,IAAc;AAFjB,GAP4B;;AAYnCC,EAAAA,KAAK,CAAEL,KAAF,QAA0B;AAAA,QAAjB;AAAEM,MAAAA,KAAF;AAASC,MAAAA;AAAT,KAAiB;AAC7B,UAAMC,IAAI,GAAGf,UAAU,CAACO,KAAD,CAAvB;AACA,UAAMS,OAAO,GAAGd,GAAG,EAAnB;;AAEA,aAASe,OAAT,CAAkBN,CAAlB,EAA4B;AAC1BA,MAAAA,CAAC,CAACO,cAAF;AACAH,MAAAA,IAAI,CAACI,KAAL;AACD;;AAED,aAASC,QAAT,CAAmBT,CAAnB,EAA6B;AAC3BA,MAAAA,CAAC,CAACO,cAAF;AACAH,MAAAA,IAAI,CAACM,QAAL,GAAgBC,IAAhB,CAAqB,SAAe;AAAA,YAAd;AAAEC,UAAAA;AAAF,SAAc;;AAClC,YAAIA,KAAJ,EAAW;AACTT,UAAAA,IAAI,CAAC,QAAD,EAAWH,CAAX,CAAJ;AACD;AACF,OAJD;AAKD;;AAEDP,IAAAA,SAAS,CAAC;AAAA;;AAAA;AAAA,eAEAY,OAFA;AAAA,iBAGA,QAHA;AAAA;AAAA,mBAKIC,OALJ;AAAA,oBAMKG;AANL,4BAQJP,KAAK,CAACW,OARF,qBAQJ,oBAAAX,KAAK,EAAWE,IAAX,CARD;AAAA,KAAD,CAAT;AAYA,WAAOA,IAAP;AACD;;AA3CkC,CAAD,CAA7B","sourcesContent":["// Composables\nimport { createForm, makeFormProps } from '@/composables/form'\n\n// Utilities\nimport { ref } from 'vue'\nimport { defineComponent, useRender } from '@/util'\n\nexport const VForm = defineComponent({\n  name: 'VForm',\n\n  props: {\n    ...makeFormProps(),\n  },\n\n  emits: {\n    'update:modelValue': (val: boolean | null) => true,\n    submit: (e: Event) => true,\n  },\n\n  setup (props, { slots, emit }) {\n    const form = createForm(props)\n    const formRef = ref<HTMLFormElement>()\n\n    function onReset (e: Event) {\n      e.preventDefault()\n      form.reset()\n    }\n\n    function onSubmit (e: Event) {\n      e.preventDefault()\n      form.validate().then(({ valid }) => {\n        if (valid) {\n          emit('submit', e)\n        }\n      })\n    }\n\n    useRender(() => ((\n      <form\n        ref={ formRef }\n        class=\"v-form\"\n        novalidate\n        onReset={ onReset }\n        onSubmit={ onSubmit }\n      >\n        { slots.default?.(form) }\n      </form>\n    )))\n\n    return form\n  },\n})\n\nexport type VForm = InstanceType<typeof VForm>\n"],"file":"VForm.mjs"}
+{"version":3,"file":"VForm.mjs","names":["createForm","makeFormProps","forwardRefs","ref","defineComponent","useRender","VForm","name","props","emits","val","submit","e","setup","slots","emit","form","formRef","onReset","preventDefault","reset","onSubmit","_e","ready","validate","then","bind","catch","finally","defaultPrevented","valid","value","default"],"sources":["../../../src/components/VForm/VForm.tsx"],"sourcesContent":["// Composables\nimport { createForm, makeFormProps } from '@/composables/form'\nimport { forwardRefs } from '@/composables/forwardRefs'\n\n// Utilities\nimport { ref } from 'vue'\nimport { defineComponent, useRender } from '@/util'\n\n// Types\nimport type { SubmitEventPromise } from '@/composables/form'\n\nexport const VForm = defineComponent({\n  name: 'VForm',\n\n  props: {\n    ...makeFormProps(),\n  },\n\n  emits: {\n    'update:modelValue': (val: boolean | null) => true,\n    submit: (e: SubmitEventPromise) => true,\n  },\n\n  setup (props, { slots, emit }) {\n    const form = createForm(props)\n    const formRef = ref<HTMLFormElement>()\n\n    function onReset (e: Event) {\n      e.preventDefault()\n      form.reset()\n    }\n\n    function onSubmit (_e: Event) {\n      const e = _e as SubmitEventPromise\n\n      const ready = form.validate()\n      e.then = ready.then.bind(ready)\n      e.catch = ready.catch.bind(ready)\n      e.finally = ready.finally.bind(ready)\n\n      emit('submit', e)\n\n      if (!e.defaultPrevented) {\n        ready.then(({ valid }) => {\n          if (valid) {\n            formRef.value?.submit()\n          }\n        })\n      }\n\n      e.preventDefault()\n    }\n\n    useRender(() => ((\n      <form\n        ref={ formRef }\n        class=\"v-form\"\n        novalidate\n        onReset={ onReset }\n        onSubmit={ onSubmit }\n      >\n        { slots.default?.(form) }\n      </form>\n    )))\n\n    return forwardRefs(form, formRef)\n  },\n})\n\nexport type VForm = InstanceType<typeof VForm>\n"],"mappings":";AAAA;SACSA,U,EAAYC,a;SACZC,W,6CAET;;AACA,SAASC,GAAT,QAAoB,KAApB;SACSC,e,EAAiBC,S,gCAE1B;;AAGA,OAAO,MAAMC,KAAK,GAAGF,eAAe,CAAC;EACnCG,IAAI,EAAE,OAD6B;EAGnCC,KAAK,EAAE,EACL,GAAGP,aAAa;EADX,CAH4B;EAOnCQ,KAAK,EAAE;IACL,qBAAsBC,GAAD,IAAyB,IADzC;IAELC,MAAM,EAAGC,CAAD,IAA2B;EAF9B,CAP4B;;EAYnCC,KAAK,CAAEL,KAAF,QAA0B;IAAA,IAAjB;MAAEM,KAAF;MAASC;IAAT,CAAiB;IAC7B,MAAMC,IAAI,GAAGhB,UAAU,CAACQ,KAAD,CAAvB;IACA,MAAMS,OAAO,GAAGd,GAAG,EAAnB;;IAEA,SAASe,OAAT,CAAkBN,CAAlB,EAA4B;MAC1BA,CAAC,CAACO,cAAF;MACAH,IAAI,CAACI,KAAL;IACD;;IAED,SAASC,QAAT,CAAmBC,EAAnB,EAA8B;MAC5B,MAAMV,CAAC,GAAGU,EAAV;MAEA,MAAMC,KAAK,GAAGP,IAAI,CAACQ,QAAL,EAAd;MACAZ,CAAC,CAACa,IAAF,GAASF,KAAK,CAACE,IAAN,CAAWC,IAAX,CAAgBH,KAAhB,CAAT;MACAX,CAAC,CAACe,KAAF,GAAUJ,KAAK,CAACI,KAAN,CAAYD,IAAZ,CAAiBH,KAAjB,CAAV;MACAX,CAAC,CAACgB,OAAF,GAAYL,KAAK,CAACK,OAAN,CAAcF,IAAd,CAAmBH,KAAnB,CAAZ;MAEAR,IAAI,CAAC,QAAD,EAAWH,CAAX,CAAJ;;MAEA,IAAI,CAACA,CAAC,CAACiB,gBAAP,EAAyB;QACvBN,KAAK,CAACE,IAAN,CAAW,SAAe;UAAA,IAAd;YAAEK;UAAF,CAAc;;UACxB,IAAIA,KAAJ,EAAW;YAAA;;YACT,kBAAAb,OAAO,CAACc,KAAR,oCAAepB,MAAf;UACD;QACF,CAJD;MAKD;;MAEDC,CAAC,CAACO,cAAF;IACD;;IAEDd,SAAS,CAAC;MAAA;;MAAA;QAAA,OAEAY,OAFA;QAAA,SAGA,QAHA;QAAA;QAAA,WAKIC,OALJ;QAAA,YAMKG;MANL,sBAQJP,KAAK,CAACkB,OARF,qBAQJ,oBAAAlB,KAAK,EAAWE,IAAX,CARD;IAAA,CAAD,CAAT;IAYA,OAAOd,WAAW,CAACc,IAAD,EAAOC,OAAP,CAAlB;EACD;;AAvDkC,CAAD,CAA7B"}

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/VForm/index.mjs.map

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