@vuetify/nightly 3.2.0-dev-20230309.0 → 3.2.0-dev-20230322.0

package/lib/components/VFooter/VFooter.css

@@ -4,6 +4,8 @@
   flex: 1 1 auto;
   padding: 8px 16px;
   position: relative;
+  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: height, width, transform, max-width, left, right, top, bottom;
   border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   border-style: solid;
   border-width: 0;

package/lib/components/VFooter/VFooter.sass

@@ -7,6 +7,8 @@
   flex: $footer-flex
   padding: $footer-padding
   position: relative
+  transition: $footer-transition
+  transition-property: height, width, transform, max-width, left, right, top, bottom
 
   // missing from variables
   @include tools.border($footer-border...)

package/lib/components/VFooter/_variables.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../../styles/settings';
+@use "../../styles/settings/variables";
 
 // VFooter
 $footer-background: rgb(var(--v-theme-surface)) !default;
@@ -15,6 +16,7 @@ $footer-elevation: 0 !default;
 $footer-padding: 8px 16px !default;
 $footer-positions: absolute fixed !default;
 $footer-rounded-border-radius: settings.$border-radius-root !default;
+$footer-transition: .2s variables.$standard-easing !default;
 
 // Lists
 $footer-border: (

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

@@ -1,31 +1,142 @@
 import * as vue from 'vue';
+import { ComponentPropsOptions, ExtractPropTypes } from 'vue';
 
-declare const VFooter: vue.DefineComponent<{
-    absolute: boolean;
-    height: string | number;
-    order: string | number;
-    tag: string;
-    app: boolean;
-} & {
-    name?: string | undefined;
-    border?: string | number | boolean | undefined;
-    color?: string | undefined;
-    elevation?: string | number | undefined;
-    theme?: string | undefined;
-    rounded?: string | number | boolean | undefined;
-} & {
-    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-        default?: (() => vue.VNodeChild) | undefined;
-    };
-    $slots?: {
-        default?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
-    'v-slots'?: {
-        default?: false | (() => vue.VNodeChild) | undefined;
-    } | undefined;
-} & {
-    "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
+interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions>, Props = ExtractPropTypes<PropsOptions>> {
+    filterProps<T extends Partial<Props>, U extends Exclude<keyof Props, Exclude<keyof Props, keyof T>>>(props: T): [yes: Partial<Pick<T, U>>, no: Omit<T, U>];
+}
+
+declare const VFooter: {
+    new (...args: any[]): {
+        $: vue.ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            absolute: boolean;
+            height: string | number;
+            order: string | number;
+            tag: string;
+            app: boolean;
+            rounded: string | number | boolean;
+        }> & Omit<{
+            absolute: boolean;
+            height: string | number;
+            order: string | number;
+            tag: string;
+            app: boolean;
+        } & {
+            name?: string | undefined;
+            border?: string | number | boolean | undefined;
+            color?: string | undefined;
+            elevation?: string | number | undefined;
+            theme?: string | undefined;
+            rounded?: string | number | boolean | undefined;
+        } & {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+                default?: (() => vue.VNodeChild) | undefined;
+            };
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
+            'v-slots'?: {
+                default?: false | (() => vue.VNodeChild) | undefined;
+            } | undefined;
+        } & {
+            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "absolute" | "height" | "order" | "tag" | "app" | "rounded">;
+        $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, {}, {}, string>, {}> | null;
+        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: vue.ComponentOptionsBase<{
+            absolute: boolean;
+            height: string | number;
+            order: string | number;
+            tag: string;
+            app: boolean;
+        } & {
+            name?: string | undefined;
+            border?: string | number | boolean | undefined;
+            color?: string | undefined;
+            elevation?: string | number | undefined;
+            theme?: string | undefined;
+            rounded?: string | number | boolean | undefined;
+        } & {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+                default?: (() => vue.VNodeChild) | undefined;
+            };
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
+            'v-slots'?: {
+                default?: false | (() => vue.VNodeChild) | undefined;
+            } | undefined;
+        } & {
+            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+            absolute: boolean;
+            height: string | number;
+            order: string | number;
+            tag: string;
+            app: boolean;
+            rounded: string | number | boolean;
+        }, {}, string> & {
+            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, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof vue.nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
+    } & {
+        absolute: boolean;
+        height: string | number;
+        order: string | number;
+        tag: string;
+        app: boolean;
+    } & {
+        name?: string | undefined;
+        border?: string | number | boolean | undefined;
+        color?: string | undefined;
+        elevation?: string | number | undefined;
+        theme?: string | undefined;
+        rounded?: string | number | boolean | undefined;
+    } & {
+        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+            default?: (() => vue.VNodeChild) | undefined;
+        };
+        $slots?: {
+            default?: (() => vue.VNodeChild) | undefined;
+        } | undefined;
+        'v-slots'?: {
+            default?: false | (() => vue.VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+    } & vue.ShallowUnwrapRef<{}> & {} & vue.ComponentCustomProperties & {};
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & vue.ComponentOptionsBase<{
     absolute: boolean;
     height: string | number;
     order: string | number;
@@ -50,14 +161,78 @@ declare const VFooter: vue.DefineComponent<{
     } | undefined;
 } & {
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-}, {
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
     absolute: boolean;
     height: string | number;
     order: string | number;
     tag: string;
     app: boolean;
     rounded: string | number | boolean;
-}>;
+}, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+    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;
+    };
+}, 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;
+    };
+}>>;
 type VFooter = InstanceType<typeof VFooter>;
 
 export { VFooter };

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

@@ -1,4 +1,9 @@
 import * as vue from 'vue';
+import { ComponentPropsOptions, ExtractPropTypes } from 'vue';
+
+interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions>, Props = ExtractPropTypes<PropsOptions>> {
+    filterProps<T extends Partial<Props>, U extends Exclude<keyof Props, Exclude<keyof Props, keyof T>>>(props: T): [yes: Partial<Pick<T, U>>, no: Omit<T, U>];
+}
 
 interface FieldValidationResult {
     id: number | string;
@@ -11,7 +16,177 @@ interface FormValidationResult {
 interface SubmitEventPromise extends SubmitEvent, Promise<FormValidationResult> {
 }
 
-declare const VForm: vue.DefineComponent<{
+declare const VForm: {
+    new (...args: any[]): {
+        $: vue.ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            disabled: boolean;
+            readonly: boolean;
+            modelValue: boolean | null;
+            validateOn: "input" | "blur" | "submit" | undefined;
+            fastFail: boolean;
+        }> & Omit<{
+            disabled: boolean;
+            readonly: boolean;
+            modelValue: boolean | null;
+            validateOn: "input" | "blur" | "submit" | undefined;
+            fastFail: boolean;
+        } & {} & {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+                default?: (() => vue.VNodeChild) | undefined;
+            };
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
+            'v-slots'?: {
+                default?: false | (() => vue.VNodeChild) | undefined;
+            } | undefined;
+        } & {
+            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        } & {
+            onSubmit?: ((e: SubmitEventPromise) => any) | undefined;
+            "onUpdate:modelValue"?: ((val: boolean | null) => any) | undefined;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "disabled" | "readonly" | "modelValue" | "validateOn" | "fastFail">;
+        $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, {}, {}, string>, {}> | null;
+        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $emit: ((event: "submit", e: SubmitEventPromise) => void) & ((event: "update:modelValue", val: boolean | null) => void);
+        $el: any;
+        $options: vue.ComponentOptionsBase<{
+            disabled: boolean;
+            readonly: boolean;
+            modelValue: boolean | null;
+            validateOn: "input" | "blur" | "submit" | undefined;
+            fastFail: boolean;
+        } & {} & {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+                default?: (() => vue.VNodeChild) | undefined;
+            };
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
+            'v-slots'?: {
+                default?: false | (() => vue.VNodeChild) | undefined;
+            } | undefined;
+        } & {
+            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        } & {
+            onSubmit?: ((e: SubmitEventPromise) => any) | undefined;
+            "onUpdate:modelValue"?: ((val: boolean | null) => any) | undefined;
+        }, {
+            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, {
+            disabled: boolean;
+            readonly: boolean;
+            modelValue: boolean | null;
+            validateOn: "input" | "blur" | "submit" | undefined;
+            fastFail: boolean;
+        }, {}, string> & {
+            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, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof vue.nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
+    } & {
+        disabled: boolean;
+        readonly: boolean;
+        modelValue: boolean | null;
+        validateOn: "input" | "blur" | "submit" | undefined;
+        fastFail: boolean;
+    } & {} & {
+        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+            default?: (() => vue.VNodeChild) | undefined;
+        };
+        $slots?: {
+            default?: (() => vue.VNodeChild) | undefined;
+        } | undefined;
+        'v-slots'?: {
+            default?: false | (() => vue.VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+    } & {
+        onSubmit?: ((e: SubmitEventPromise) => any) | undefined;
+        "onUpdate:modelValue"?: ((val: boolean | null) => any) | undefined;
+    } & vue.ShallowUnwrapRef<{
+        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;
+    }> & {} & vue.ComponentCustomProperties & {};
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & vue.ComponentOptionsBase<{
     disabled: boolean;
     readonly: boolean;
     modelValue: boolean | null;
@@ -29,6 +204,9 @@ declare const VForm: vue.DefineComponent<{
     } | undefined;
 } & {
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+} & {
+    onSubmit?: ((e: SubmitEventPromise) => any) | undefined;
+    "onUpdate:modelValue"?: ((val: boolean | null) => any) | undefined;
 }, {
     errors: vue.Ref<{
         id: string | number;
@@ -57,34 +235,37 @@ declare const VForm: vue.DefineComponent<{
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
     'update:modelValue': (val: boolean | null) => true;
     submit: (e: SubmitEventPromise) => true;
-}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
+}, string, {
     disabled: boolean;
     readonly: boolean;
     modelValue: boolean | null;
     validateOn: "input" | "blur" | "submit" | undefined;
     fastFail: boolean;
-} & {} & {
-    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-        default?: (() => vue.VNodeChild) | undefined;
+}, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+    disabled: BooleanConstructor;
+    fastFail: BooleanConstructor;
+    readonly: BooleanConstructor;
+    modelValue: {
+        type: vue.PropType<boolean | null>;
+        default: null;
     };
-    $slots?: {
-        default?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
-    'v-slots'?: {
-        default?: false | (() => vue.VNodeChild) | undefined;
-    } | undefined;
-} & {
-    "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-} & {
-    onSubmit?: ((e: SubmitEventPromise) => any) | undefined;
-    "onUpdate:modelValue"?: ((val: boolean | null) => any) | undefined;
-}, {
-    disabled: boolean;
-    readonly: boolean;
-    modelValue: boolean | null;
-    validateOn: "input" | "blur" | "submit" | undefined;
-    fastFail: boolean;
-}>;
+    validateOn: {
+        type: vue.PropType<"input" | "blur" | "submit" | undefined>;
+        default: string;
+    };
+}, vue.ExtractPropTypes<{
+    disabled: BooleanConstructor;
+    fastFail: BooleanConstructor;
+    readonly: BooleanConstructor;
+    modelValue: {
+        type: vue.PropType<boolean | null>;
+        default: null;
+    };
+    validateOn: {
+        type: vue.PropType<"input" | "blur" | "submit" | undefined>;
+        default: string;
+    };
+}>>;
 type VForm = InstanceType<typeof VForm>;
 
 export { VForm };

package/lib/components/VGrid/VCol.mjs

@@ -2,11 +2,10 @@
 import "./VGrid.css";
 
 // Composables
-import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
+import { makeTagProps } from "../../composables/tag.mjs";
+import { breakpoints } from "../../composables/display.mjs"; // Utilities
 import { capitalize, computed, h } from 'vue';
 import { genericComponent } from "../../util/index.mjs"; // Types
-const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl']; // no xs
-
 const breakpointProps = (() => {
   return breakpoints.reduce((props, val) => {
     props[val] = {
@@ -18,7 +17,8 @@ const breakpointProps = (() => {
 })();
 const offsetProps = (() => {
   return breakpoints.reduce((props, val) => {
-    props['offset' + capitalize(val)] = {
+    const offsetKey = 'offset' + capitalize(val);
+    props[offsetKey] = {
       type: [String, Number],
       default: null
     };
@@ -27,7 +27,8 @@ const offsetProps = (() => {
 })();
 const orderProps = (() => {
   return breakpoints.reduce((props, val) => {
-    props['order' + capitalize(val)] = {
+    const orderKey = 'order' + capitalize(val);
+    props[orderKey] = {
       type: [String, Number],
       default: null
     };

package/lib/components/VGrid/VCol.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VCol.mjs","names":["makeTagProps","capitalize","computed","h","genericComponent","breakpoints","breakpointProps","reduce","props","val","type","Boolean","String","Number","default","offsetProps","orderProps","propMap","col","Object","keys","offset","order","breakpointClass","prop","className","undefined","breakpoint","replace","toLowerCase","ALIGN_SELF_VALUES","VCol","name","cols","alignSelf","validator","str","includes","setup","slots","classes","classList","forEach","value","push","hasColClasses","some","startsWith","tag","class"],"sources":["../../../src/components/VGrid/VCol.ts"],"sourcesContent":["// Styles\nimport './VGrid.sass'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { capitalize, computed, h } from 'vue'\nimport { genericComponent } from '@/util'\n\n// Types\nimport type { Prop, PropType } from 'vue'\n\nconst breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl'] as const // no xs\n\nconst breakpointProps = (() => {\n  return breakpoints.reduce((props, val) => {\n    props[val] = {\n      type: [Boolean, String, Number],\n      default: false,\n    }\n    return props\n  }, {} as Record<string, Prop<boolean | string | number, false>>)\n})()\n\nconst offsetProps = (() => {\n  return breakpoints.reduce((props, val) => {\n    props['offset' + capitalize(val)] = {\n      type: [String, Number],\n      default: null,\n    }\n    return props\n  }, {} as Record<string, Prop<string | number, null>>)\n})()\n\nconst orderProps = (() => {\n  return breakpoints.reduce((props, val) => {\n    props['order' + capitalize(val)] = {\n      type: [String, Number],\n      default: null,\n    }\n    return props\n  }, {} as Record<string, Prop<string | number, null>>)\n})()\n\nconst propMap = {\n  col: Object.keys(breakpointProps),\n  offset: Object.keys(offsetProps),\n  order: Object.keys(orderProps),\n}\n\nfunction breakpointClass (type: keyof typeof propMap, prop: string, val: boolean | string | number) {\n  let className: string = type\n  if (val == null || val === false) {\n    return undefined\n  }\n  if (prop) {\n    const breakpoint = prop.replace(type, '')\n    className += `-${breakpoint}`\n  }\n  if (type === 'col') {\n    className = 'v-' + className\n  }\n  // Handling the boolean style prop when accepting [Boolean, String, Number]\n  // means Vue will not convert <v-col sm></v-col> to sm: true for us.\n  // Since the default is false, an empty string indicates the prop's presence.\n  if (type === 'col' && (val === '' || val === true)) {\n    // .v-col-md\n    return className.toLowerCase()\n  }\n  // .order-md-6\n  className += `-${val}`\n  return className.toLowerCase()\n}\n\nconst ALIGN_SELF_VALUES = ['auto', 'start', 'end', 'center', 'baseline', 'stretch'] as const\n\nexport const VCol = genericComponent()({\n  name: 'VCol',\n\n  props: {\n    cols: {\n      type: [Boolean, String, Number],\n      default: false,\n    },\n    ...breakpointProps,\n    offset: {\n      type: [String, Number],\n      default: null,\n    },\n    ...offsetProps,\n    order: {\n      type: [String, Number],\n      default: null,\n    },\n    ...orderProps,\n    alignSelf: {\n      type: String as PropType<typeof ALIGN_SELF_VALUES[number]>,\n      default: null,\n      validator: (str: any) => ALIGN_SELF_VALUES.includes(str),\n    },\n\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\n    const classes = computed(() => {\n      const classList: any[] = []\n\n      // Loop through `col`, `offset`, `order` breakpoint props\n      let type: keyof typeof propMap\n      for (type in propMap) {\n        propMap[type].forEach(prop => {\n          const value: string | number | boolean = (props as any)[prop]\n          const className = breakpointClass(type, prop, value)\n          if (className) classList!.push(className)\n        })\n      }\n\n      const hasColClasses = classList.some(className => className.startsWith('v-col-'))\n\n      classList.push({\n        // Default to .v-col if no other col-{bp}-* classes generated nor `cols` specified.\n        'v-col': !hasColClasses || !props.cols,\n        [`v-col-${props.cols}`]: props.cols,\n        [`offset-${props.offset}`]: props.offset,\n        [`order-${props.order}`]: props.order,\n        [`align-self-${props.alignSelf}`]: props.alignSelf,\n      })\n\n      return classList\n    })\n\n    return () => h(props.tag, {\n      class: classes.value,\n    }, slots.default?.())\n  },\n})\n\nexport type VCol = InstanceType<typeof VCol>\n"],"mappings":"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"}
+{"version":3,"file":"VCol.mjs","names":["makeTagProps","breakpoints","capitalize","computed","h","genericComponent","breakpointProps","reduce","props","val","type","Boolean","String","Number","default","offsetProps","offsetKey","orderProps","orderKey","propMap","col","Object","keys","offset","order","breakpointClass","prop","className","undefined","breakpoint","replace","toLowerCase","ALIGN_SELF_VALUES","VCol","name","cols","alignSelf","validator","str","includes","setup","slots","classes","classList","forEach","value","push","hasColClasses","some","startsWith","tag","class"],"sources":["../../../src/components/VGrid/VCol.ts"],"sourcesContent":["// Styles\nimport './VGrid.sass'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { breakpoints } from '@/composables/display'\n\n// Utilities\nimport { capitalize, computed, h } from 'vue'\nimport { genericComponent } from '@/util'\n\n// Types\nimport type { Prop, PropType } from 'vue'\nimport type { Breakpoint } from '@/composables/display'\n\ntype BreakpointOffset = `offset${Capitalize<Breakpoint>}`\ntype BreakpointOrder = `order${Capitalize<Breakpoint>}`\n\nconst breakpointProps = (() => {\n  return breakpoints.reduce((props, val) => {\n    props[val] = {\n      type: [Boolean, String, Number],\n      default: false,\n    }\n    return props\n  }, {} as Record<Breakpoint, Prop<boolean | string | number, false>>)\n})()\n\nconst offsetProps = (() => {\n  return breakpoints.reduce((props, val) => {\n    const offsetKey = ('offset' + capitalize(val)) as BreakpointOffset\n    props[offsetKey] = {\n      type: [String, Number],\n      default: null,\n    }\n    return props\n  }, {} as Record<BreakpointOffset, Prop<string | number, null>>)\n})()\n\nconst orderProps = (() => {\n  return breakpoints.reduce((props, val) => {\n    const orderKey = ('order' + capitalize(val)) as BreakpointOrder\n    props[orderKey] = {\n      type: [String, Number],\n      default: null,\n    }\n    return props\n  }, {} as Record<BreakpointOrder, Prop<string | number, null>>)\n})()\n\nconst propMap = {\n  col: Object.keys(breakpointProps),\n  offset: Object.keys(offsetProps),\n  order: Object.keys(orderProps),\n}\n\nfunction breakpointClass (type: keyof typeof propMap, prop: string, val: boolean | string | number) {\n  let className: string = type\n  if (val == null || val === false) {\n    return undefined\n  }\n  if (prop) {\n    const breakpoint = prop.replace(type, '')\n    className += `-${breakpoint}`\n  }\n  if (type === 'col') {\n    className = 'v-' + className\n  }\n  // Handling the boolean style prop when accepting [Boolean, String, Number]\n  // means Vue will not convert <v-col sm></v-col> to sm: true for us.\n  // Since the default is false, an empty string indicates the prop's presence.\n  if (type === 'col' && (val === '' || val === true)) {\n    // .v-col-md\n    return className.toLowerCase()\n  }\n  // .order-md-6\n  className += `-${val}`\n  return className.toLowerCase()\n}\n\nconst ALIGN_SELF_VALUES = ['auto', 'start', 'end', 'center', 'baseline', 'stretch'] as const\n\nexport const VCol = genericComponent()({\n  name: 'VCol',\n\n  props: {\n    cols: {\n      type: [Boolean, String, Number],\n      default: false,\n    },\n    ...breakpointProps,\n    offset: {\n      type: [String, Number],\n      default: null,\n    },\n    ...offsetProps,\n    order: {\n      type: [String, Number],\n      default: null,\n    },\n    ...orderProps,\n    alignSelf: {\n      type: String as PropType<typeof ALIGN_SELF_VALUES[number]>,\n      default: null,\n      validator: (str: any) => ALIGN_SELF_VALUES.includes(str),\n    },\n\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\n    const classes = computed(() => {\n      const classList: any[] = []\n\n      // Loop through `col`, `offset`, `order` breakpoint props\n      let type: keyof typeof propMap\n      for (type in propMap) {\n        propMap[type].forEach(prop => {\n          const value: string | number | boolean = (props as any)[prop]\n          const className = breakpointClass(type, prop, value)\n          if (className) classList!.push(className)\n        })\n      }\n\n      const hasColClasses = classList.some(className => className.startsWith('v-col-'))\n\n      classList.push({\n        // Default to .v-col if no other col-{bp}-* classes generated nor `cols` specified.\n        'v-col': !hasColClasses || !props.cols,\n        [`v-col-${props.cols}`]: props.cols,\n        [`offset-${props.offset}`]: props.offset,\n        [`order-${props.order}`]: props.order,\n        [`align-self-${props.alignSelf}`]: props.alignSelf,\n      })\n\n      return classList\n    })\n\n    return () => h(props.tag, {\n      class: classes.value,\n    }, slots.default?.())\n  },\n})\n\nexport type VCol = InstanceType<typeof VCol>\n"],"mappings":"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"}

package/lib/components/VGrid/VRow.mjs

@@ -2,16 +2,16 @@
 import "./VGrid.css";
 
 // Composables
-import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
+import { makeTagProps } from "../../composables/tag.mjs";
+import { breakpoints } from "../../composables/display.mjs"; // Utilities
 import { capitalize, computed, h } from 'vue';
 import { genericComponent } from "../../util/index.mjs"; // Types
-const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl']; // no xs
-
 const ALIGNMENT = ['start', 'end', 'center'];
 const SPACE = ['space-between', 'space-around', 'space-evenly'];
 function makeRowProps(prefix, def) {
   return breakpoints.reduce((props, val) => {
-    props[prefix + capitalize(val)] = def();
+    const prefixKey = prefix + capitalize(val);
+    props[prefixKey] = def();
     return props;
   }, {});
 }