routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
Generated
Vendored
+67
@@ -0,0 +1,67 @@
|
||||
@layer vuetify-components {
|
||||
.v-bottom-navigation {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
transition: transform, color, 0.2s, 0.1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.v-bottom-navigation {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
.v-bottom-navigation--border {
|
||||
border-width: thin;
|
||||
box-shadow: none;
|
||||
}
|
||||
.v-bottom-navigation {
|
||||
border-radius: 0;
|
||||
}
|
||||
.v-bottom-navigation {
|
||||
background: rgb(var(--v-theme-surface));
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface)) calc(var(--v-high-emphasis-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-bottom-navigation--active {
|
||||
box-shadow: 0px 1px 2px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 2px 6px 2px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 4%, transparent);
|
||||
}
|
||||
.v-bottom-navigation__content {
|
||||
display: flex;
|
||||
flex: none;
|
||||
font-size: 0.6875rem;
|
||||
justify-content: center;
|
||||
transition: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
.v-bottom-navigation .v-bottom-navigation__content > .v-btn {
|
||||
font-size: inherit;
|
||||
height: 100%;
|
||||
max-width: 168px;
|
||||
min-width: 80px;
|
||||
text-transform: none;
|
||||
transition: inherit;
|
||||
width: auto;
|
||||
}
|
||||
.v-bottom-navigation .v-bottom-navigation__content > .v-btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
.v-bottom-navigation .v-bottom-navigation__content > .v-btn .v-btn__content,
|
||||
.v-bottom-navigation .v-bottom-navigation__content > .v-btn .v-btn__icon {
|
||||
transition: inherit;
|
||||
}
|
||||
.v-bottom-navigation .v-bottom-navigation__content > .v-btn .v-btn__icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.v-bottom-navigation--grow .v-bottom-navigation__content > .v-btn {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.v-bottom-navigation--shift .v-bottom-navigation__content .v-btn:not(.v-btn--selected) .v-btn__content > span {
|
||||
transition: inherit;
|
||||
opacity: 0;
|
||||
}
|
||||
.v-bottom-navigation--shift .v-bottom-navigation__content .v-btn:not(.v-btn--selected) .v-btn__content {
|
||||
transform: translateY(0.5rem);
|
||||
}
|
||||
}
|
||||
Generated
Vendored
+512
@@ -0,0 +1,512 @@
|
||||
|
||||
import type { GenericProps } from '../../util/index.js';
|
||||
export declare const makeVBottomNavigationProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
name?: unknown;
|
||||
order?: unknown;
|
||||
absolute?: unknown;
|
||||
border?: unknown;
|
||||
density?: unknown;
|
||||
elevation?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
modelValue?: unknown;
|
||||
multiple?: unknown;
|
||||
mandatory?: unknown;
|
||||
max?: unknown;
|
||||
selectedClass?: unknown;
|
||||
disabled?: unknown;
|
||||
baseColor?: unknown;
|
||||
bgColor?: unknown;
|
||||
color?: unknown;
|
||||
grow?: unknown;
|
||||
mode?: unknown;
|
||||
height?: unknown;
|
||||
active?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
class: unknown extends Defaults["class"] ? import("vue").PropType<any> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
name: unknown extends Defaults["name"] ? Omit<{
|
||||
type: StringConstructor;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string>;
|
||||
default: string;
|
||||
} : Omit<Omit<{
|
||||
type: StringConstructor;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["name"] ? string : string | Defaults["name"]>;
|
||||
default: unknown extends Defaults["name"] ? string : string | Defaults["name"];
|
||||
};
|
||||
order: unknown extends Defaults["order"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["order"] ? string | number : string | number | Defaults["order"]>;
|
||||
default: unknown extends Defaults["order"] ? string | number : Defaults["order"] | NonNullable<string | number>;
|
||||
};
|
||||
absolute: unknown extends Defaults["absolute"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["absolute"] ? boolean : boolean | Defaults["absolute"]>;
|
||||
default: unknown extends Defaults["absolute"] ? boolean : boolean | Defaults["absolute"];
|
||||
};
|
||||
border: unknown extends Defaults["border"] ? (BooleanConstructor | NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["border"] ? string | number | boolean : string | number | boolean | Defaults["border"]>;
|
||||
default: unknown extends Defaults["border"] ? string | number | boolean : Defaults["border"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | import("../../composables/density.js").Density>;
|
||||
default: unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | NonNullable<import("../../composables/density.js").Density>;
|
||||
};
|
||||
elevation: unknown extends Defaults["elevation"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["elevation"] ? string | number : string | number | Defaults["elevation"]>;
|
||||
default: unknown extends Defaults["elevation"] ? string | number : Defaults["elevation"] | NonNullable<string | number>;
|
||||
};
|
||||
rounded: unknown extends Defaults["rounded"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
|
||||
default: unknown extends Defaults["rounded"] ? string | number | boolean : Defaults["rounded"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
tile: unknown extends Defaults["tile"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
} : Omit<Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | Defaults["tag"] | import("../../util/index.js").JSXComponent>;
|
||||
default: unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : Defaults["tag"] | NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: null;
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: null;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["modelValue"] ? any : any>;
|
||||
default: unknown extends Defaults["modelValue"] ? any : any;
|
||||
};
|
||||
multiple: unknown extends Defaults["multiple"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["multiple"] ? boolean : boolean | Defaults["multiple"]>;
|
||||
default: unknown extends Defaults["multiple"] ? boolean : boolean | Defaults["multiple"];
|
||||
};
|
||||
mandatory: unknown extends Defaults["mandatory"] ? import("vue").PropType<"force" | boolean> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["mandatory"] ? "force" | boolean : "force" | boolean | Defaults["mandatory"]>;
|
||||
default: unknown extends Defaults["mandatory"] ? "force" | boolean : Defaults["mandatory"] | NonNullable<"force" | boolean>;
|
||||
};
|
||||
max: unknown extends Defaults["max"] ? NumberConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["max"] ? number : number | Defaults["max"]>;
|
||||
default: unknown extends Defaults["max"] ? number : number | Defaults["max"];
|
||||
};
|
||||
selectedClass: unknown extends Defaults["selectedClass"] ? {
|
||||
type: import("vue").PropType<string>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<string>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"]>;
|
||||
default: unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"];
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"]>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"];
|
||||
};
|
||||
baseColor: unknown extends Defaults["baseColor"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"]>;
|
||||
default: unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"];
|
||||
};
|
||||
bgColor: unknown extends Defaults["bgColor"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"]>;
|
||||
default: unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"];
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
grow: unknown extends Defaults["grow"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["grow"] ? boolean : boolean | Defaults["grow"]>;
|
||||
default: unknown extends Defaults["grow"] ? boolean : boolean | Defaults["grow"];
|
||||
};
|
||||
mode: unknown extends Defaults["mode"] ? {
|
||||
type: StringConstructor;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["mode"] ? string : string | Defaults["mode"]>;
|
||||
default: unknown extends Defaults["mode"] ? string : string | Defaults["mode"];
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
active: unknown extends Defaults["active"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["active"] ? boolean : boolean | Defaults["active"]>;
|
||||
default: unknown extends Defaults["active"] ? boolean : boolean | Defaults["active"];
|
||||
};
|
||||
};
|
||||
export declare const VBottomNavigation: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
name: string;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
grow: boolean;
|
||||
height: string | number;
|
||||
active: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
mandatory?: "force" | boolean | undefined;
|
||||
max?: number | undefined;
|
||||
baseColor?: string | undefined;
|
||||
bgColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
mode?: string | undefined;
|
||||
} & {
|
||||
"onUpdate:active"?: ((value: any) => any) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:active': (value: any) => true;
|
||||
'update:modelValue': (value: any) => true;
|
||||
}, "$children" | "modelValue" | "update:modelValue" | "v-slot:default" | "v-slots">, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
name: string;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
grow: boolean;
|
||||
height: string | number;
|
||||
active: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
name: string;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
grow: boolean;
|
||||
height: string | number;
|
||||
active: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
mandatory?: "force" | boolean | undefined;
|
||||
max?: number | undefined;
|
||||
baseColor?: string | undefined;
|
||||
bgColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
mode?: string | undefined;
|
||||
} & {
|
||||
"onUpdate:active"?: ((value: any) => any) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
name: string;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
grow: boolean;
|
||||
height: string | number;
|
||||
active: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
name: string;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
grow: boolean;
|
||||
height: string | number;
|
||||
active: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
mandatory?: "force" | boolean | undefined;
|
||||
max?: number | undefined;
|
||||
baseColor?: string | undefined;
|
||||
bgColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
mode?: string | undefined;
|
||||
} & {
|
||||
"onUpdate:active"?: ((value: any) => any) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:active': (value: any) => true;
|
||||
'update:modelValue': (value: any) => true;
|
||||
}, "$children" | "modelValue" | "update:modelValue" | "v-slot:default" | "v-slots">, string, {
|
||||
style: import("vue").StyleValue;
|
||||
name: string;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
grow: boolean;
|
||||
height: string | number;
|
||||
active: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new <T>(props: {
|
||||
modelValue?: T;
|
||||
'onUpdate:modelValue'?: (value: T) => void;
|
||||
}, slots: {
|
||||
default: never;
|
||||
}) => GenericProps<typeof props, typeof slots>) & import("../../util/index.js").FilterPropsOptions<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
name: Omit<{
|
||||
type: StringConstructor;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string>;
|
||||
default: string;
|
||||
};
|
||||
order: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
absolute: BooleanConstructor;
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
density: {
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
modelValue: {
|
||||
type: null;
|
||||
default: undefined;
|
||||
};
|
||||
multiple: BooleanConstructor;
|
||||
mandatory: import("vue").PropType<"force" | boolean>;
|
||||
max: NumberConstructor;
|
||||
selectedClass: {
|
||||
type: import("vue").PropType<string>;
|
||||
default: string;
|
||||
};
|
||||
disabled: BooleanConstructor;
|
||||
baseColor: StringConstructor;
|
||||
bgColor: StringConstructor;
|
||||
color: StringConstructor;
|
||||
grow: BooleanConstructor;
|
||||
mode: {
|
||||
type: StringConstructor;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
height: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
active: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
name: Omit<{
|
||||
type: StringConstructor;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string>;
|
||||
default: string;
|
||||
};
|
||||
order: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
absolute: BooleanConstructor;
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
density: {
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
modelValue: {
|
||||
type: null;
|
||||
default: undefined;
|
||||
};
|
||||
multiple: BooleanConstructor;
|
||||
mandatory: import("vue").PropType<"force" | boolean>;
|
||||
max: NumberConstructor;
|
||||
selectedClass: {
|
||||
type: import("vue").PropType<string>;
|
||||
default: string;
|
||||
};
|
||||
disabled: BooleanConstructor;
|
||||
baseColor: StringConstructor;
|
||||
bgColor: StringConstructor;
|
||||
color: StringConstructor;
|
||||
grow: BooleanConstructor;
|
||||
mode: {
|
||||
type: StringConstructor;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
height: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
active: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}>>;
|
||||
export type VBottomNavigation = InstanceType<typeof VBottomNavigation>;
|
||||
Generated
Vendored
+131
@@ -0,0 +1,131 @@
|
||||
import { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
|
||||
// Styles
|
||||
import "./VBottomNavigation.css";
|
||||
|
||||
// Components
|
||||
import { VBtnToggleSymbol } from "../VBtnToggle/VBtnToggle.js"; // Composables
|
||||
import { makeBorderProps, useBorder } from "../../composables/border.js";
|
||||
import { useBackgroundColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { provideDefaults } from "../../composables/defaults.js";
|
||||
import { makeDensityProps, useDensity } from "../../composables/density.js";
|
||||
import { makeElevationProps, useElevation } from "../../composables/elevation.js";
|
||||
import { makeGroupProps, useGroup } from "../../composables/group.js";
|
||||
import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { useSsrBoot } from "../../composables/ssrBoot.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, useTheme } from "../../composables/theme.js"; // Utilities
|
||||
import { computed, toRef } from 'vue';
|
||||
import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVBottomNavigationProps = propsFactory({
|
||||
baseColor: String,
|
||||
bgColor: String,
|
||||
color: String,
|
||||
grow: Boolean,
|
||||
mode: {
|
||||
type: String,
|
||||
validator: v => !v || ['horizontal', 'shift'].includes(v)
|
||||
},
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 56
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
...makeBorderProps(),
|
||||
...makeComponentProps(),
|
||||
...makeDensityProps(),
|
||||
...makeElevationProps(),
|
||||
...makeRoundedProps(),
|
||||
...makeLayoutItemProps({
|
||||
name: 'bottom-navigation'
|
||||
}),
|
||||
...makeTagProps({
|
||||
tag: 'header'
|
||||
}),
|
||||
...makeGroupProps({
|
||||
selectedClass: 'v-btn--selected'
|
||||
}),
|
||||
...makeThemeProps()
|
||||
}, 'VBottomNavigation');
|
||||
export const VBottomNavigation = genericComponent()({
|
||||
name: 'VBottomNavigation',
|
||||
props: makeVBottomNavigationProps(),
|
||||
emits: {
|
||||
'update:active': value => true,
|
||||
'update:modelValue': value => true
|
||||
},
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
themeClasses
|
||||
} = useTheme();
|
||||
const {
|
||||
borderClasses
|
||||
} = useBorder(props);
|
||||
const {
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles
|
||||
} = useBackgroundColor(() => props.bgColor);
|
||||
const {
|
||||
densityClasses
|
||||
} = useDensity(props);
|
||||
const {
|
||||
elevationClasses
|
||||
} = useElevation(props);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props);
|
||||
const {
|
||||
ssrBootStyles
|
||||
} = useSsrBoot();
|
||||
const height = computed(() => Number(props.height) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0));
|
||||
const isActive = useProxiedModel(props, 'active', props.active);
|
||||
const {
|
||||
layoutItemStyles
|
||||
} = useLayoutItem({
|
||||
id: props.name,
|
||||
order: computed(() => parseInt(props.order, 10)),
|
||||
position: toRef(() => 'bottom'),
|
||||
layoutSize: toRef(() => isActive.value ? height.value : 0),
|
||||
elementSize: height,
|
||||
active: isActive,
|
||||
absolute: toRef(() => props.absolute)
|
||||
});
|
||||
useGroup(props, VBtnToggleSymbol);
|
||||
provideDefaults({
|
||||
VBtn: {
|
||||
baseColor: toRef(() => props.baseColor),
|
||||
color: toRef(() => props.color),
|
||||
density: toRef(() => props.density),
|
||||
stacked: toRef(() => props.mode !== 'horizontal'),
|
||||
variant: 'text'
|
||||
}
|
||||
}, {
|
||||
scoped: true
|
||||
});
|
||||
useRender(() => {
|
||||
return _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-bottom-navigation', {
|
||||
'v-bottom-navigation--active': isActive.value,
|
||||
'v-bottom-navigation--grow': props.grow,
|
||||
'v-bottom-navigation--shift': props.mode === 'shift'
|
||||
}, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
|
||||
"style": _normalizeStyle([backgroundColorStyles.value, layoutItemStyles.value, {
|
||||
height: convertToUnit(height.value)
|
||||
}, ssrBootStyles.value, props.style])
|
||||
}, {
|
||||
default: () => [slots.default && _createElementVNode("div", {
|
||||
"class": "v-bottom-navigation__content"
|
||||
}, [slots.default()])]
|
||||
});
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VBottomNavigation.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+59
@@ -0,0 +1,59 @@
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-bottom-navigation
|
||||
display: flex
|
||||
max-width: 100%
|
||||
overflow: hidden
|
||||
position: absolute
|
||||
transition: $bottom-navigation-transition
|
||||
|
||||
@include tools.border($bottom-navigation-border...)
|
||||
@include tools.rounded($bottom-navigation-border-radius)
|
||||
@include tools.theme($bottom-navigation-theme...)
|
||||
|
||||
&--active
|
||||
@include tools.elevation($bottom-navigation-elevation)
|
||||
|
||||
.v-bottom-navigation__content
|
||||
display: flex
|
||||
flex: none
|
||||
font-size: $bottom-navigation-content-font-size
|
||||
justify-content: center
|
||||
transition: inherit
|
||||
width: 100%
|
||||
|
||||
.v-bottom-navigation &
|
||||
> .v-btn
|
||||
font-size: inherit
|
||||
height: $bottom-navigation-height
|
||||
max-width: $bottom-navigation-max-width
|
||||
min-width: $bottom-navigation-min-width
|
||||
text-transform: $bottom-navigation-text-transform
|
||||
transition: inherit
|
||||
width: auto
|
||||
|
||||
@include tools.rounded(0)
|
||||
|
||||
.v-btn__content,
|
||||
.v-btn__icon
|
||||
transition: inherit
|
||||
|
||||
.v-btn__icon
|
||||
font-size: $bottom-navigation-icon-font-size
|
||||
|
||||
.v-bottom-navigation--grow &
|
||||
> .v-btn
|
||||
flex-basis: 0
|
||||
flex-grow: 1
|
||||
|
||||
.v-bottom-navigation--shift &
|
||||
.v-btn
|
||||
&:not(.v-btn--selected)
|
||||
.v-btn__content > span
|
||||
transition: inherit
|
||||
opacity: 0
|
||||
|
||||
.v-btn__content
|
||||
transform: $bottom-navigation-shift-icon-transform
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
@use 'sass:map';
|
||||
@use 'sass:math';
|
||||
@use '../../styles/settings';
|
||||
@use "../../styles/settings/variables";
|
||||
@use "../../styles/tools/functions";
|
||||
|
||||
// VBottomNavigation
|
||||
$bottom-navigation-background: rgb(var(--v-theme-surface)) !default;
|
||||
$bottom-navigation-border-color: settings.$border-color-root !default;
|
||||
$bottom-navigation-border-radius: 0 !default;
|
||||
$bottom-navigation-border-radius: map.get(settings.$rounded, '0') !default;
|
||||
$bottom-navigation-border-style: settings.$border-style-root !default;
|
||||
$bottom-navigation-border-thin-width: thin !default;
|
||||
$bottom-navigation-border-width: 0 !default;
|
||||
$bottom-navigation-button-color: functions.theme-color('on-surface', var(--v-medium-emphasis-opacity)) !default;
|
||||
$bottom-navigation-color: functions.theme-color('on-surface', var(--v-high-emphasis-opacity)) !default;
|
||||
$bottom-navigation-content-font-size: functions.map-deep-get(variables.$typography, 'label-small', 'size') !default;
|
||||
$bottom-navigation-elevation: 2 !default;
|
||||
$bottom-navigation-flat-elevation: 0 !default;
|
||||
$bottom-navigation-height: 100% !default;
|
||||
$bottom-navigation-icon-font-size: 1.5rem !default;
|
||||
$bottom-navigation-max-width: 168px !default;
|
||||
$bottom-navigation-min-width: 80px !default;
|
||||
$bottom-navigation-opacity: var(--v-medium-emphasis-opacity) !default;
|
||||
$bottom-navigation-shift-content-color: functions.theme-color('on-surface', 0) !default;
|
||||
$bottom-navigation-shift-icon-top: math.div($bottom-navigation-icon-font-size, 3) !default;
|
||||
$bottom-navigation-shift-icon-transform: translateY($bottom-navigation-shift-icon-top) !default;
|
||||
$bottom-navigation-text-transform: none !default;
|
||||
$bottom-navigation-transition: transform, color, .2s, .1s settings.$standard-easing !default;
|
||||
|
||||
// Lists
|
||||
$bottom-navigation-border: (
|
||||
$bottom-navigation-border-color,
|
||||
$bottom-navigation-border-style,
|
||||
$bottom-navigation-border-width,
|
||||
$bottom-navigation-border-thin-width
|
||||
) !default;
|
||||
|
||||
$bottom-navigation-theme: (
|
||||
$bottom-navigation-background,
|
||||
$bottom-navigation-color
|
||||
) !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VBottomNavigation } from './VBottomNavigation.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VBottomNavigation } from "./VBottomNavigation.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VBottomNavigation"],"sources":["../../../src/components/VBottomNavigation/index.ts"],"sourcesContent":["export { VBottomNavigation } from './VBottomNavigation'\n"],"mappings":"SAASA,iBAAiB","ignoreList":[]}
|
||||
Reference in New Issue
Block a user