routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+84
@@ -0,0 +1,84 @@
|
||||
@layer vuetify-components {
|
||||
.v-fab {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
flex: 1 1 auto;
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.v-fab .v-btn {
|
||||
pointer-events: auto;
|
||||
}
|
||||
.v-fab .v-btn--variant-elevated {
|
||||
box-shadow: 0px 1px 3px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 4px 8px 3px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 6%, transparent);
|
||||
}
|
||||
.v-fab .v-btn--variant-elevated:hover {
|
||||
box-shadow: 0px 2px 3px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 6px 10px 4px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 8%, transparent);
|
||||
}
|
||||
.v-fab--app, .v-fab--absolute {
|
||||
display: flex;
|
||||
}
|
||||
.v-fab--absolute {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
.v-fab--start, .v-fab--left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.v-fab--center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.v-fab--end, .v-fab--right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.v-fab--bottom {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.v-fab--top {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@layer vuetify-overrides {
|
||||
.v-fab--extended .v-btn {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
}
|
||||
@layer vuetify-components {
|
||||
.v-fab__container {
|
||||
align-self: center;
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.v-fab--app .v-fab__container {
|
||||
margin: 12px;
|
||||
position: fixed;
|
||||
}
|
||||
.v-fab--absolute .v-fab__container {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
}
|
||||
.v-fab--offset.v-fab--top .v-fab__container {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.v-fab--offset.v-fab--bottom .v-fab__container {
|
||||
transform: translateY(50%);
|
||||
}
|
||||
.v-fab--top .v-fab__container {
|
||||
top: 0;
|
||||
}
|
||||
.v-fab--bottom .v-fab__container {
|
||||
bottom: 0;
|
||||
}
|
||||
.v-fab--left .v-fab__container, .v-fab--start .v-fab__container {
|
||||
left: 0;
|
||||
}
|
||||
.v-fab--right .v-fab__container, .v-fab--end .v-fab__container {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
+994
@@ -0,0 +1,994 @@
|
||||
|
||||
export declare const makeVFabProps: <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;
|
||||
color?: unknown;
|
||||
variant?: unknown;
|
||||
value?: unknown;
|
||||
disabled?: unknown;
|
||||
selectedClass?: unknown;
|
||||
size?: unknown;
|
||||
height?: unknown;
|
||||
maxHeight?: unknown;
|
||||
maxWidth?: unknown;
|
||||
minHeight?: unknown;
|
||||
minWidth?: unknown;
|
||||
width?: unknown;
|
||||
location?: unknown;
|
||||
loading?: unknown;
|
||||
position?: unknown;
|
||||
href?: unknown;
|
||||
replace?: unknown;
|
||||
to?: unknown;
|
||||
exact?: unknown;
|
||||
active?: unknown;
|
||||
activeColor?: unknown;
|
||||
baseColor?: unknown;
|
||||
symbol?: unknown;
|
||||
flat?: unknown;
|
||||
icon?: unknown;
|
||||
prependIcon?: unknown;
|
||||
appendIcon?: unknown;
|
||||
block?: unknown;
|
||||
readonly?: unknown;
|
||||
slim?: unknown;
|
||||
stacked?: unknown;
|
||||
ripple?: unknown;
|
||||
text?: unknown;
|
||||
transition?: unknown;
|
||||
app?: unknown;
|
||||
appear?: unknown;
|
||||
extended?: unknown;
|
||||
layout?: unknown;
|
||||
offset?: unknown;
|
||||
modelValue?: 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"] ? {
|
||||
type: StringConstructor;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
}, "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>;
|
||||
};
|
||||
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"];
|
||||
};
|
||||
variant: unknown extends Defaults["variant"] ? Omit<{
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
} : Omit<Omit<{
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["variant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" | Defaults["variant"]>;
|
||||
default: unknown extends Defaults["variant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : Defaults["variant"] | NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
value: unknown extends Defaults["value"] ? null : {
|
||||
type: import("vue").PropType<unknown extends Defaults["value"] ? any : any>;
|
||||
default: unknown extends Defaults["value"] ? any : any;
|
||||
};
|
||||
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"];
|
||||
};
|
||||
selectedClass: unknown extends Defaults["selectedClass"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"]>;
|
||||
default: unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"];
|
||||
};
|
||||
size: unknown extends Defaults["size"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["size"] ? string | number : string | number | Defaults["size"]>;
|
||||
default: unknown extends Defaults["size"] ? string | number : Defaults["size"] | NonNullable<string | number>;
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
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>;
|
||||
};
|
||||
maxHeight: unknown extends Defaults["maxHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["maxHeight"] ? string | number : string | number | Defaults["maxHeight"]>;
|
||||
default: unknown extends Defaults["maxHeight"] ? string | number : Defaults["maxHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
maxWidth: unknown extends Defaults["maxWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["maxWidth"] ? string | number : string | number | Defaults["maxWidth"]>;
|
||||
default: unknown extends Defaults["maxWidth"] ? string | number : Defaults["maxWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
minHeight: unknown extends Defaults["minHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["minHeight"] ? string | number : string | number | Defaults["minHeight"]>;
|
||||
default: unknown extends Defaults["minHeight"] ? string | number : Defaults["minHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
minWidth: unknown extends Defaults["minWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["minWidth"] ? string | number : string | number | Defaults["minWidth"]>;
|
||||
default: unknown extends Defaults["minWidth"] ? string | number : Defaults["minWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
width: unknown extends Defaults["width"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
location: unknown extends Defaults["location"] ? import("vue").PropType<import("../../util/index.js").Anchor | null> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["location"] ? import("../../util/index.js").Anchor | null : Defaults["location"] | import("../../util/index.js").Anchor | null>;
|
||||
default: unknown extends Defaults["location"] ? import("../../util/index.js").Anchor | null : Defaults["location"] | NonNullable<import("../../util/index.js").Anchor | null>;
|
||||
};
|
||||
loading: unknown extends Defaults["loading"] ? (BooleanConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["loading"] ? string | boolean : string | boolean | Defaults["loading"]>;
|
||||
default: unknown extends Defaults["loading"] ? string | boolean : Defaults["loading"] | NonNullable<string | boolean>;
|
||||
};
|
||||
position: unknown extends Defaults["position"] ? {
|
||||
type: import("vue").PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["position"] ? "absolute" | "fixed" | "relative" | "static" | "sticky" : "absolute" | "fixed" | "relative" | "static" | "sticky" | Defaults["position"]>;
|
||||
default: unknown extends Defaults["position"] ? "absolute" | "fixed" | "relative" | "static" | "sticky" : Defaults["position"] | NonNullable<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
};
|
||||
href: unknown extends Defaults["href"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["href"] ? string : string | Defaults["href"]>;
|
||||
default: unknown extends Defaults["href"] ? string : string | Defaults["href"];
|
||||
};
|
||||
replace: unknown extends Defaults["replace"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["replace"] ? boolean : boolean | Defaults["replace"]>;
|
||||
default: unknown extends Defaults["replace"] ? boolean : boolean | Defaults["replace"];
|
||||
};
|
||||
to: unknown extends Defaults["to"] ? import("vue").PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["to"] ? string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric : string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | Defaults["to"]>;
|
||||
default: unknown extends Defaults["to"] ? string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric : Defaults["to"] | NonNullable<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||
};
|
||||
exact: unknown extends Defaults["exact"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["exact"] ? boolean : boolean | Defaults["exact"]>;
|
||||
default: unknown extends Defaults["exact"] ? boolean : boolean | Defaults["exact"];
|
||||
};
|
||||
active: unknown extends Defaults["active"] ? Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<boolean>;
|
||||
default: boolean;
|
||||
} : Omit<Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<boolean>;
|
||||
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"];
|
||||
};
|
||||
activeColor: unknown extends Defaults["activeColor"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["activeColor"] ? string : string | Defaults["activeColor"]>;
|
||||
default: unknown extends Defaults["activeColor"] ? string : string | Defaults["activeColor"];
|
||||
};
|
||||
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"];
|
||||
};
|
||||
symbol: unknown extends Defaults["symbol"] ? {
|
||||
type: null;
|
||||
default: import("vue").InjectionKey<import("../../composables/group.js").GroupProvide>;
|
||||
} : Omit<{
|
||||
type: null;
|
||||
default: import("vue").InjectionKey<import("../../composables/group.js").GroupProvide>;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["symbol"] ? any : any>;
|
||||
default: unknown extends Defaults["symbol"] ? any : any;
|
||||
};
|
||||
flat: unknown extends Defaults["flat"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["flat"] ? boolean : boolean | Defaults["flat"]>;
|
||||
default: unknown extends Defaults["flat"] ? boolean : boolean | Defaults["flat"];
|
||||
};
|
||||
icon: unknown extends Defaults["icon"] ? import("vue").PropType<boolean | import("../../composables/icons.js").IconValue> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["icon"] ? boolean | import("../../composables/icons.js").IconValue : boolean | Defaults["icon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["icon"] ? boolean | import("../../composables/icons.js").IconValue : Defaults["icon"] | NonNullable<boolean | import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
prependIcon: unknown extends Defaults["prependIcon"] ? import("vue").PropType<import("../../composables/icons.js").IconValue> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["prependIcon"] ? import("../../composables/icons.js").IconValue : Defaults["prependIcon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["prependIcon"] ? import("../../composables/icons.js").IconValue : Defaults["prependIcon"] | NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
appendIcon: unknown extends Defaults["appendIcon"] ? import("vue").PropType<import("../../composables/icons.js").IconValue> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["appendIcon"] ? import("../../composables/icons.js").IconValue : Defaults["appendIcon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["appendIcon"] ? import("../../composables/icons.js").IconValue : Defaults["appendIcon"] | NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
block: unknown extends Defaults["block"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["block"] ? boolean : boolean | Defaults["block"]>;
|
||||
default: unknown extends Defaults["block"] ? boolean : boolean | Defaults["block"];
|
||||
};
|
||||
readonly: unknown extends Defaults["readonly"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["readonly"] ? boolean : boolean | Defaults["readonly"]>;
|
||||
default: unknown extends Defaults["readonly"] ? boolean : boolean | Defaults["readonly"];
|
||||
};
|
||||
slim: unknown extends Defaults["slim"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["slim"] ? boolean : boolean | Defaults["slim"]>;
|
||||
default: unknown extends Defaults["slim"] ? boolean : boolean | Defaults["slim"];
|
||||
};
|
||||
stacked: unknown extends Defaults["stacked"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["stacked"] ? boolean : boolean | Defaults["stacked"]>;
|
||||
default: unknown extends Defaults["stacked"] ? boolean : boolean | Defaults["stacked"];
|
||||
};
|
||||
ripple: unknown extends Defaults["ripple"] ? {
|
||||
type: import("vue").PropType<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["ripple"] ? boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined : boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | Defaults["ripple"] | undefined>;
|
||||
default: unknown extends Defaults["ripple"] ? boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined : Defaults["ripple"] | NonNullable<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
};
|
||||
text: unknown extends Defaults["text"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["text"] ? string | number | boolean : string | number | boolean | Defaults["text"]>;
|
||||
default: unknown extends Defaults["text"] ? string | number | boolean : Defaults["text"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
transition: unknown extends Defaults["transition"] ? {
|
||||
type: import("vue").PropType<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
default: NonNullable<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
default: NonNullable<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["transition"] ? string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null : string | boolean | Defaults["transition"] | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
default: unknown extends Defaults["transition"] ? string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null : Defaults["transition"] | NonNullable<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
};
|
||||
app: unknown extends Defaults["app"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["app"] ? boolean : boolean | Defaults["app"]>;
|
||||
default: unknown extends Defaults["app"] ? boolean : boolean | Defaults["app"];
|
||||
};
|
||||
appear: unknown extends Defaults["appear"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["appear"] ? boolean : boolean | Defaults["appear"]>;
|
||||
default: unknown extends Defaults["appear"] ? boolean : boolean | Defaults["appear"];
|
||||
};
|
||||
extended: unknown extends Defaults["extended"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["extended"] ? boolean : boolean | Defaults["extended"]>;
|
||||
default: unknown extends Defaults["extended"] ? boolean : boolean | Defaults["extended"];
|
||||
};
|
||||
layout: unknown extends Defaults["layout"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["layout"] ? boolean : boolean | Defaults["layout"]>;
|
||||
default: unknown extends Defaults["layout"] ? boolean : boolean | Defaults["layout"];
|
||||
};
|
||||
offset: unknown extends Defaults["offset"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["offset"] ? boolean : boolean | Defaults["offset"]>;
|
||||
default: unknown extends Defaults["offset"] ? boolean : boolean | Defaults["offset"];
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["modelValue"] ? boolean : boolean | Defaults["modelValue"]>;
|
||||
default: unknown extends Defaults["modelValue"] ? boolean : boolean | Defaults["modelValue"];
|
||||
};
|
||||
};
|
||||
export declare const VFab: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
size: string | number;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
active: boolean;
|
||||
symbol: any;
|
||||
flat: boolean;
|
||||
block: boolean;
|
||||
readonly: boolean;
|
||||
slim: boolean;
|
||||
stacked: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
app: boolean;
|
||||
appear: boolean;
|
||||
extended: boolean;
|
||||
layout: boolean;
|
||||
offset: boolean;
|
||||
modelValue: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
name?: string | undefined;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
value?: any;
|
||||
selectedClass?: string | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location?: import("../../util/index.js").Anchor | null | undefined;
|
||||
loading?: string | boolean | undefined;
|
||||
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
|
||||
href?: string | undefined;
|
||||
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||
activeColor?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
icon?: boolean | import("../../composables/icons.js").IconValue | undefined;
|
||||
prependIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
appendIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
text?: string | number | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'update:modelValue': (value: boolean) => true;
|
||||
}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
size: string | number;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
active: boolean;
|
||||
symbol: any;
|
||||
flat: boolean;
|
||||
block: boolean;
|
||||
readonly: boolean;
|
||||
slim: boolean;
|
||||
stacked: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
text: string | number | boolean;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
app: boolean;
|
||||
appear: boolean;
|
||||
extended: boolean;
|
||||
layout: boolean;
|
||||
offset: boolean;
|
||||
modelValue: 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;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
size: string | number;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
active: boolean;
|
||||
symbol: any;
|
||||
flat: boolean;
|
||||
block: boolean;
|
||||
readonly: boolean;
|
||||
slim: boolean;
|
||||
stacked: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
app: boolean;
|
||||
appear: boolean;
|
||||
extended: boolean;
|
||||
layout: boolean;
|
||||
offset: boolean;
|
||||
modelValue: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
name?: string | undefined;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
value?: any;
|
||||
selectedClass?: string | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location?: import("../../util/index.js").Anchor | null | undefined;
|
||||
loading?: string | boolean | undefined;
|
||||
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
|
||||
href?: string | undefined;
|
||||
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||
activeColor?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
icon?: boolean | import("../../composables/icons.js").IconValue | undefined;
|
||||
prependIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
appendIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
text?: string | number | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
size: string | number;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
active: boolean;
|
||||
symbol: any;
|
||||
flat: boolean;
|
||||
block: boolean;
|
||||
readonly: boolean;
|
||||
slim: boolean;
|
||||
stacked: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
text: string | number | boolean;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
app: boolean;
|
||||
appear: boolean;
|
||||
extended: boolean;
|
||||
layout: boolean;
|
||||
offset: boolean;
|
||||
modelValue: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
size: string | number;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
active: boolean;
|
||||
symbol: any;
|
||||
flat: boolean;
|
||||
block: boolean;
|
||||
readonly: boolean;
|
||||
slim: boolean;
|
||||
stacked: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
app: boolean;
|
||||
appear: boolean;
|
||||
extended: boolean;
|
||||
layout: boolean;
|
||||
offset: boolean;
|
||||
modelValue: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
name?: string | undefined;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
value?: any;
|
||||
selectedClass?: string | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location?: import("../../util/index.js").Anchor | null | undefined;
|
||||
loading?: string | boolean | undefined;
|
||||
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
|
||||
href?: string | undefined;
|
||||
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||
activeColor?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
icon?: boolean | import("../../composables/icons.js").IconValue | undefined;
|
||||
prependIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
appendIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
text?: string | number | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'update:modelValue': (value: boolean) => true;
|
||||
}, string, {
|
||||
style: import("vue").StyleValue;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
size: string | number;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
active: boolean;
|
||||
symbol: any;
|
||||
flat: boolean;
|
||||
block: boolean;
|
||||
readonly: boolean;
|
||||
slim: boolean;
|
||||
stacked: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
text: string | number | boolean;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
app: boolean;
|
||||
appear: boolean;
|
||||
extended: boolean;
|
||||
layout: boolean;
|
||||
offset: boolean;
|
||||
modelValue: 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 & import("../../util/index.js").FilterPropsOptions<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
name: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: Omit<{
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
value: null;
|
||||
disabled: BooleanConstructor;
|
||||
selectedClass: StringConstructor;
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
location: import("vue").PropType<import("../../util/index.js").Anchor | null>;
|
||||
loading: (BooleanConstructor | StringConstructor)[];
|
||||
position: {
|
||||
type: import("vue").PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
href: StringConstructor;
|
||||
replace: BooleanConstructor;
|
||||
to: import("vue").PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||
exact: BooleanConstructor;
|
||||
active: Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
activeColor: StringConstructor;
|
||||
baseColor: StringConstructor;
|
||||
symbol: {
|
||||
type: null;
|
||||
default: import("vue").InjectionKey<import("../../composables/group.js").GroupProvide>;
|
||||
};
|
||||
flat: BooleanConstructor;
|
||||
icon: import("vue").PropType<boolean | import("../../composables/icons.js").IconValue>;
|
||||
prependIcon: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
appendIcon: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
block: BooleanConstructor;
|
||||
readonly: BooleanConstructor;
|
||||
slim: BooleanConstructor;
|
||||
stacked: BooleanConstructor;
|
||||
ripple: {
|
||||
type: import("vue").PropType<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
};
|
||||
text: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
transition: {
|
||||
type: import("vue").PropType<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
default: NonNullable<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
};
|
||||
app: BooleanConstructor;
|
||||
appear: BooleanConstructor;
|
||||
extended: BooleanConstructor;
|
||||
layout: BooleanConstructor;
|
||||
offset: BooleanConstructor;
|
||||
modelValue: {
|
||||
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: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: Omit<{
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
value: null;
|
||||
disabled: BooleanConstructor;
|
||||
selectedClass: StringConstructor;
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
location: import("vue").PropType<import("../../util/index.js").Anchor | null>;
|
||||
loading: (BooleanConstructor | StringConstructor)[];
|
||||
position: {
|
||||
type: import("vue").PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
href: StringConstructor;
|
||||
replace: BooleanConstructor;
|
||||
to: import("vue").PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||
exact: BooleanConstructor;
|
||||
active: Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
activeColor: StringConstructor;
|
||||
baseColor: StringConstructor;
|
||||
symbol: {
|
||||
type: null;
|
||||
default: import("vue").InjectionKey<import("../../composables/group.js").GroupProvide>;
|
||||
};
|
||||
flat: BooleanConstructor;
|
||||
icon: import("vue").PropType<boolean | import("../../composables/icons.js").IconValue>;
|
||||
prependIcon: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
appendIcon: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
block: BooleanConstructor;
|
||||
readonly: BooleanConstructor;
|
||||
slim: BooleanConstructor;
|
||||
stacked: BooleanConstructor;
|
||||
ripple: {
|
||||
type: import("vue").PropType<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
};
|
||||
text: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
transition: {
|
||||
type: import("vue").PropType<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
default: NonNullable<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
};
|
||||
app: BooleanConstructor;
|
||||
appear: BooleanConstructor;
|
||||
extended: BooleanConstructor;
|
||||
layout: BooleanConstructor;
|
||||
offset: BooleanConstructor;
|
||||
modelValue: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}>>;
|
||||
export type VFab = InstanceType<typeof VFab>;
|
||||
+110
@@ -0,0 +1,110 @@
|
||||
import { vShow as _vShow, mergeProps as _mergeProps, createVNode as _createVNode, withDirectives as _withDirectives, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Styles
|
||||
import "./VFab.css";
|
||||
|
||||
// Components
|
||||
import { makeVBtnProps, VBtn } from "../VBtn/VBtn.js"; // Composables
|
||||
import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.js";
|
||||
import { makeLocationProps } from "../../composables/location.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js";
|
||||
import { useResizeObserver } from "../../composables/resizeObserver.js";
|
||||
import { useToggleScope } from "../../composables/toggleScope.js";
|
||||
import { makeTransitionProps, MaybeTransition } from "../../composables/transition.js"; // Utilities
|
||||
import { computed, ref, shallowRef, toRef, watchEffect } from 'vue';
|
||||
import { genericComponent, omit, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVFabProps = propsFactory({
|
||||
app: Boolean,
|
||||
appear: Boolean,
|
||||
extended: Boolean,
|
||||
layout: Boolean,
|
||||
offset: Boolean,
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
...omit(makeVBtnProps({
|
||||
active: true
|
||||
}), ['location', 'spaced']),
|
||||
...makeLayoutItemProps(),
|
||||
...makeLocationProps(),
|
||||
...makeTransitionProps({
|
||||
transition: 'fab-transition'
|
||||
})
|
||||
}, 'VFab');
|
||||
export const VFab = genericComponent()({
|
||||
name: 'VFab',
|
||||
props: makeVFabProps(),
|
||||
emits: {
|
||||
'update:modelValue': value => true
|
||||
},
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const model = useProxiedModel(props, 'modelValue');
|
||||
const height = shallowRef(56);
|
||||
const layoutItemStyles = ref();
|
||||
const {
|
||||
resizeRef
|
||||
} = useResizeObserver(entries => {
|
||||
if (!entries.length) return;
|
||||
height.value = entries[0].target.clientHeight;
|
||||
});
|
||||
const hasPosition = toRef(() => props.app || props.absolute);
|
||||
const position = computed(() => {
|
||||
if (!hasPosition.value) return false;
|
||||
return props.location?.split(' ').shift() ?? 'bottom';
|
||||
});
|
||||
const orientation = computed(() => {
|
||||
if (!hasPosition.value) return false;
|
||||
return props.location?.split(' ')[1] ?? 'end';
|
||||
});
|
||||
useToggleScope(() => props.app, () => {
|
||||
const layout = useLayoutItem({
|
||||
id: props.name,
|
||||
order: computed(() => parseInt(props.order, 10)),
|
||||
position,
|
||||
layoutSize: computed(() => props.layout ? height.value + 24 : 0),
|
||||
elementSize: computed(() => height.value + 24),
|
||||
active: computed(() => props.app && model.value),
|
||||
absolute: toRef(() => props.absolute)
|
||||
});
|
||||
watchEffect(() => {
|
||||
layoutItemStyles.value = layout.layoutItemStyles.value;
|
||||
});
|
||||
});
|
||||
const vFabRef = ref();
|
||||
useRender(() => {
|
||||
const btnProps = VBtn.filterProps(props);
|
||||
return _createElementVNode("div", {
|
||||
"ref": vFabRef,
|
||||
"class": _normalizeClass(['v-fab', {
|
||||
'v-fab--absolute': props.absolute,
|
||||
'v-fab--app': !!props.app,
|
||||
'v-fab--extended': props.extended,
|
||||
'v-fab--offset': props.offset,
|
||||
[`v-fab--${position.value}`]: hasPosition.value,
|
||||
[`v-fab--${orientation.value}`]: hasPosition.value
|
||||
}, props.class]),
|
||||
"style": _normalizeStyle([props.app ? {
|
||||
...layoutItemStyles.value
|
||||
} : {
|
||||
height: props.absolute ? '100%' : 'inherit'
|
||||
}, props.style])
|
||||
}, [_createElementVNode("div", {
|
||||
"class": "v-fab__container"
|
||||
}, [_createVNode(MaybeTransition, {
|
||||
"appear": props.appear,
|
||||
"transition": props.transition
|
||||
}, {
|
||||
default: () => [_withDirectives(_createVNode(VBtn, _mergeProps({
|
||||
"ref": resizeRef
|
||||
}, btnProps, {
|
||||
"active": undefined,
|
||||
"location": undefined
|
||||
}), slots), [[_vShow, props.active]])]
|
||||
})])]);
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VFab.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+92
@@ -0,0 +1,92 @@
|
||||
@use '../../styles/tools'
|
||||
@use '../../styles/settings'
|
||||
@use 'sass:math'
|
||||
@use 'sass:map'
|
||||
@use './variables' as *
|
||||
@use './mixins' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-fab
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
flex: 1 1 auto
|
||||
pointer-events: none
|
||||
position: relative
|
||||
transition-duration: $fab-transition-duration
|
||||
transition-timing-function: $fab-transition-timing-function
|
||||
vertical-align: middle
|
||||
|
||||
.v-btn
|
||||
pointer-events: auto
|
||||
|
||||
&--variant-elevated
|
||||
@include tools.elevation($fab-elevation)
|
||||
|
||||
&:hover
|
||||
@include tools.elevation($fab-hover-elevation)
|
||||
|
||||
&--app,
|
||||
&--absolute
|
||||
display: flex
|
||||
|
||||
&--absolute
|
||||
position: absolute
|
||||
inset: 0
|
||||
|
||||
&--start,
|
||||
&--left
|
||||
justify-content: flex-start
|
||||
|
||||
&--center
|
||||
align-items: center
|
||||
justify-content: center
|
||||
|
||||
&--end,
|
||||
&--right
|
||||
justify-content: flex-end
|
||||
|
||||
&--bottom
|
||||
align-items: flex-end
|
||||
|
||||
&--top
|
||||
align-items: flex-start
|
||||
|
||||
&--extended
|
||||
@include tools.layer('overrides')
|
||||
.v-btn
|
||||
// min-height: 56px
|
||||
// min-width: 80px
|
||||
border-radius: 9999px
|
||||
|
||||
.v-fab__container
|
||||
align-self: center
|
||||
display: inline-flex
|
||||
vertical-align: middle
|
||||
|
||||
.v-fab--app &
|
||||
margin: 12px
|
||||
position: fixed
|
||||
|
||||
.v-fab--absolute &
|
||||
position: absolute
|
||||
z-index: 4
|
||||
|
||||
.v-fab--offset.v-fab--top &
|
||||
transform: translateY(-50%)
|
||||
|
||||
.v-fab--offset.v-fab--bottom &
|
||||
transform: translateY(50%)
|
||||
|
||||
.v-fab--top &
|
||||
top: 0
|
||||
|
||||
.v-fab--bottom &
|
||||
bottom: 0
|
||||
|
||||
.v-fab--left &,
|
||||
.v-fab--start &
|
||||
left: 0
|
||||
|
||||
.v-fab--right &,
|
||||
.v-fab--end &
|
||||
right: 0
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
@use 'sass:math';
|
||||
@use 'sass:map';
|
||||
@use 'sass:meta';
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
@use './variables' as *;
|
||||
|
||||
@mixin fab-sizes ($map: $fab-sizes, $immediate: false) {
|
||||
@each $sizeName, $multiplier in $fab-size-scales {
|
||||
$size: map.get($map, 'font-size') + math.div(2 * $multiplier, 16);
|
||||
$height: map.get($map, 'height') + (12px * $multiplier);
|
||||
|
||||
// .v-fab .v-btn--size-#{$sizeName} {
|
||||
// --v-btn-size: #{$size};
|
||||
// --v-btn-height: #{$height};
|
||||
// }
|
||||
|
||||
.v-fab--bottom .v-btn--size-#{$sizeName} {
|
||||
bottom: -1 * $height / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
@use 'sass:math';
|
||||
@use 'sass:map';
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
|
||||
$fab-border-radius: map.get(settings.$rounded, 'circle') !default;
|
||||
$fab-border-radius-multiplier: 0 !default; // 2.4 for MD3
|
||||
$fab-height: 56px !default;
|
||||
$fab-font-size: tools.map-deep-get(settings.$typography, 'label-large', 'size') !default;
|
||||
$fab-font-weight: tools.map-deep-get(settings.$typography, 'label-large', 'weight') !default;
|
||||
$fab-transition-duration: 0.2s !default;
|
||||
$fab-transition-timing-function: settings.$standard-easing !default;
|
||||
$fab-width-ratio: math.div(16, 9) !default;
|
||||
$fab-padding-ratio: 2.25 !default;
|
||||
$fab-elevation: 3 !default;
|
||||
$fab-hover-elevation: 4 !default;
|
||||
|
||||
$fab-size-scales: (
|
||||
'x-small': -2,
|
||||
'small': -1,
|
||||
'default': 0,
|
||||
'large': 2,
|
||||
'x-large': 5
|
||||
) !default;
|
||||
|
||||
$fab-sizes: () !default;
|
||||
$fab-sizes: map.merge(
|
||||
(
|
||||
'height': $fab-height,
|
||||
'font-size': $fab-font-size,
|
||||
'width-ratio': $fab-width-ratio,
|
||||
'padding-ratio': $fab-padding-ratio
|
||||
),
|
||||
$fab-sizes
|
||||
);
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VFab } from './VFab.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VFab } from "./VFab.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VFab"],"sources":["../../../src/components/VFab/index.ts"],"sourcesContent":["export { VFab } from './VFab'\n"],"mappings":"SAASA,IAAI","ignoreList":[]}
|
||||
Reference in New Issue
Block a user