routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+111
@@ -0,0 +1,111 @@
|
||||
@layer vuetify-components {
|
||||
.v-avatar {
|
||||
flex: none;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-property: width, height;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.v-avatar.v-avatar--size-x-small {
|
||||
--v-avatar-height: 24px;
|
||||
}
|
||||
.v-avatar.v-avatar--size-small {
|
||||
--v-avatar-height: 32px;
|
||||
}
|
||||
.v-avatar.v-avatar--size-default {
|
||||
--v-avatar-height: 40px;
|
||||
}
|
||||
.v-avatar.v-avatar--size-large {
|
||||
--v-avatar-height: 48px;
|
||||
}
|
||||
.v-avatar.v-avatar--size-x-large {
|
||||
--v-avatar-height: 56px;
|
||||
}
|
||||
.v-avatar.v-avatar--density-default {
|
||||
height: calc(var(--v-avatar-height) + 0px);
|
||||
width: calc(var(--v-avatar-height) + 0px);
|
||||
}
|
||||
.v-avatar.v-avatar--density-comfortable {
|
||||
height: calc(var(--v-avatar-height) + -4px);
|
||||
width: calc(var(--v-avatar-height) + -4px);
|
||||
}
|
||||
.v-avatar.v-avatar--density-compact {
|
||||
height: calc(var(--v-avatar-height) + -8px);
|
||||
width: calc(var(--v-avatar-height) + -8px);
|
||||
}
|
||||
.v-avatar {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
.v-avatar--border {
|
||||
border-width: thin;
|
||||
box-shadow: none;
|
||||
}
|
||||
.v-avatar {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.v-avatar--variant-plain, .v-avatar--variant-outlined, .v-avatar--variant-text, .v-avatar--variant-tonal {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
.v-avatar--variant-plain {
|
||||
opacity: 0.62;
|
||||
}
|
||||
.v-avatar--variant-plain:focus, .v-avatar--variant-plain:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-avatar--variant-plain .v-avatar__overlay {
|
||||
display: none;
|
||||
}
|
||||
.v-avatar--variant-elevated, .v-avatar--variant-flat {
|
||||
background: rgb(var(--v-theme-surface));
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface)) calc(var(--v-medium-emphasis-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-avatar--variant-elevated {
|
||||
box-shadow: 0px 1px 2px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 1px 3px 1px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 2%, transparent);
|
||||
}
|
||||
.v-avatar--variant-flat {
|
||||
box-shadow: 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 0%, transparent);
|
||||
}
|
||||
.v-avatar--variant-outlined {
|
||||
border: thin solid currentColor;
|
||||
}
|
||||
.v-avatar--variant-text .v-avatar__overlay {
|
||||
background: currentColor;
|
||||
}
|
||||
.v-avatar--variant-tonal .v-avatar__underlay {
|
||||
background: currentColor;
|
||||
opacity: var(--v-activated-opacity);
|
||||
border-radius: inherit;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-avatar .v-avatar__underlay {
|
||||
position: absolute;
|
||||
}
|
||||
.v-avatar--rounded {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.v-avatar--start {
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
.v-avatar--end {
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
.v-avatar .v-img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
+976
@@ -0,0 +1,976 @@
|
||||
|
||||
import { VBadge } from '../VBadge/VBadge.js';
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
import type { PropType } from 'vue';
|
||||
export declare const makeVAvatarProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
border?: unknown;
|
||||
density?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
color?: unknown;
|
||||
variant?: unknown;
|
||||
size?: unknown;
|
||||
badge?: unknown;
|
||||
start?: unknown;
|
||||
end?: unknown;
|
||||
icon?: unknown;
|
||||
image?: unknown;
|
||||
text?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
class: unknown extends Defaults["class"] ? PropType<any> : {
|
||||
type: PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: 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>;
|
||||
};
|
||||
border: unknown extends Defaults["border"] ? (BooleanConstructor | NumberConstructor | StringConstructor)[] : {
|
||||
type: 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: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: 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>;
|
||||
};
|
||||
rounded: unknown extends Defaults["rounded"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: 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: PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: 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: 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: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
} : Omit<Omit<{
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
}, "default" | "type"> & {
|
||||
type: 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">;
|
||||
};
|
||||
size: unknown extends Defaults["size"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["size"] ? string | number : string | number | Defaults["size"]>;
|
||||
default: unknown extends Defaults["size"] ? string | number : Defaults["size"] | NonNullable<string | number>;
|
||||
};
|
||||
badge: unknown extends Defaults["badge"] ? {
|
||||
type: PropType<boolean | VBadge['$props']>;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: PropType<boolean | VBadge['$props']>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["badge"] ? boolean | (Partial<{
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}> & Omit<{
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
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;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dot: boolean;
|
||||
dotSize?: string | number | undefined;
|
||||
floating: boolean;
|
||||
icon?: IconValue | undefined;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
max?: string | number | undefined;
|
||||
modelValue: boolean;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "bordered" | "dot" | "floating" | "inline" | "label" | "location" | "modelValue" | "rounded" | "style" | "tag" | "tile" | "transition">) : boolean | Defaults["badge"] | (Partial<{
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}> & Omit<{
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
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;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dot: boolean;
|
||||
dotSize?: string | number | undefined;
|
||||
floating: boolean;
|
||||
icon?: IconValue | undefined;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
max?: string | number | undefined;
|
||||
modelValue: boolean;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "bordered" | "dot" | "floating" | "inline" | "label" | "location" | "modelValue" | "rounded" | "style" | "tag" | "tile" | "transition">)>;
|
||||
default: unknown extends Defaults["badge"] ? boolean | (Partial<{
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}> & Omit<{
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
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;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dot: boolean;
|
||||
dotSize?: string | number | undefined;
|
||||
floating: boolean;
|
||||
icon?: IconValue | undefined;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
max?: string | number | undefined;
|
||||
modelValue: boolean;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "bordered" | "dot" | "floating" | "inline" | "label" | "location" | "modelValue" | "rounded" | "style" | "tag" | "tile" | "transition">) : Defaults["badge"] | NonNullable<boolean | (Partial<{
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}> & Omit<{
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
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;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dot: boolean;
|
||||
dotSize?: string | number | undefined;
|
||||
floating: boolean;
|
||||
icon?: IconValue | undefined;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
max?: string | number | undefined;
|
||||
modelValue: boolean;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "bordered" | "dot" | "floating" | "inline" | "label" | "location" | "modelValue" | "rounded" | "style" | "tag" | "tile" | "transition">)>;
|
||||
};
|
||||
start: unknown extends Defaults["start"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["start"] ? boolean : boolean | Defaults["start"]>;
|
||||
default: unknown extends Defaults["start"] ? boolean : boolean | Defaults["start"];
|
||||
};
|
||||
end: unknown extends Defaults["end"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["end"] ? boolean : boolean | Defaults["end"]>;
|
||||
default: unknown extends Defaults["end"] ? boolean : boolean | Defaults["end"];
|
||||
};
|
||||
icon: unknown extends Defaults["icon"] ? PropType<IconValue> : {
|
||||
type: PropType<unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | IconValue>;
|
||||
default: unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | NonNullable<IconValue>;
|
||||
};
|
||||
image: unknown extends Defaults["image"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["image"] ? string : string | Defaults["image"]>;
|
||||
default: unknown extends Defaults["image"] ? string : string | Defaults["image"];
|
||||
};
|
||||
text: unknown extends Defaults["text"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["text"] ? string : string | Defaults["text"]>;
|
||||
default: unknown extends Defaults["text"] ? string : string | Defaults["text"];
|
||||
};
|
||||
};
|
||||
export type VAvatarSlots = {
|
||||
default: never;
|
||||
badge: never;
|
||||
};
|
||||
export declare const VAvatar: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
size: string | number;
|
||||
badge: boolean | (Partial<{
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}> & Omit<{
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
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;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dot: boolean;
|
||||
dotSize?: string | number | undefined;
|
||||
floating: boolean;
|
||||
icon?: IconValue | undefined;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
max?: string | number | undefined;
|
||||
modelValue: boolean;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "bordered" | "dot" | "floating" | "inline" | "label" | "location" | "modelValue" | "rounded" | "style" | "tag" | "tile" | "transition">);
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
image?: string | undefined;
|
||||
text?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
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";
|
||||
size: string | number;
|
||||
badge: boolean | (Partial<{
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}> & Omit<{
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
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;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dot: boolean;
|
||||
dotSize?: string | number | undefined;
|
||||
floating: boolean;
|
||||
icon?: IconValue | undefined;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
max?: string | number | undefined;
|
||||
modelValue: boolean;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "bordered" | "dot" | "floating" | "inline" | "label" | "location" | "modelValue" | "rounded" | "style" | "tag" | "tile" | "transition">);
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
badge: () => 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;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
size: string | number;
|
||||
badge: boolean | (Partial<{
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}> & Omit<{
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
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;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dot: boolean;
|
||||
dotSize?: string | number | undefined;
|
||||
floating: boolean;
|
||||
icon?: IconValue | undefined;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
max?: string | number | undefined;
|
||||
modelValue: boolean;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "bordered" | "dot" | "floating" | "inline" | "label" | "location" | "modelValue" | "rounded" | "style" | "tag" | "tile" | "transition">);
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
image?: string | undefined;
|
||||
text?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
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";
|
||||
size: string | number;
|
||||
badge: boolean | (Partial<{
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}> & Omit<{
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
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;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dot: boolean;
|
||||
dotSize?: string | number | undefined;
|
||||
floating: boolean;
|
||||
icon?: IconValue | undefined;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
max?: string | number | undefined;
|
||||
modelValue: boolean;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "bordered" | "dot" | "floating" | "inline" | "label" | "location" | "modelValue" | "rounded" | "style" | "tag" | "tile" | "transition">);
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
size: string | number;
|
||||
badge: boolean | (Partial<{
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}> & Omit<{
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
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;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dot: boolean;
|
||||
dotSize?: string | number | undefined;
|
||||
floating: boolean;
|
||||
icon?: IconValue | undefined;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
max?: string | number | undefined;
|
||||
modelValue: boolean;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "bordered" | "dot" | "floating" | "inline" | "label" | "location" | "modelValue" | "rounded" | "style" | "tag" | "tile" | "transition">);
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
image?: string | undefined;
|
||||
text?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
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";
|
||||
size: string | number;
|
||||
badge: boolean | (Partial<{
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}> & Omit<{
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
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;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dot: boolean;
|
||||
dotSize?: string | number | undefined;
|
||||
floating: boolean;
|
||||
icon?: IconValue | undefined;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
max?: string | number | undefined;
|
||||
modelValue: boolean;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "bordered" | "dot" | "floating" | "inline" | "label" | "location" | "modelValue" | "rounded" | "style" | "tag" | "tile" | "transition">);
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
badge: () => 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: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: Omit<{
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
badge: {
|
||||
type: PropType<boolean | VBadge['$props']>;
|
||||
default: boolean;
|
||||
};
|
||||
start: BooleanConstructor;
|
||||
end: BooleanConstructor;
|
||||
icon: PropType<IconValue>;
|
||||
image: StringConstructor;
|
||||
text: StringConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: Omit<{
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
badge: {
|
||||
type: PropType<boolean | VBadge['$props']>;
|
||||
default: boolean;
|
||||
};
|
||||
start: BooleanConstructor;
|
||||
end: BooleanConstructor;
|
||||
icon: PropType<IconValue>;
|
||||
image: StringConstructor;
|
||||
text: StringConstructor;
|
||||
}>>;
|
||||
export type VAvatar = InstanceType<typeof VAvatar>;
|
||||
+139
@@ -0,0 +1,139 @@
|
||||
import { createVNode as _createVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Styles
|
||||
import "./VAvatar.css";
|
||||
|
||||
// Components
|
||||
import { VBadge } from "../VBadge/VBadge.js";
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/index.js";
|
||||
import { VIcon } from "../VIcon/index.js";
|
||||
import { VImg } from "../VImg/index.js"; // Composables
|
||||
import { makeBorderProps, useBorder } from "../../composables/border.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeDensityProps, useDensity } from "../../composables/density.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { makeSizeProps, useSize } from "../../composables/size.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js";
|
||||
import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.js"; // Utilities
|
||||
import { computed } from 'vue';
|
||||
import { genericComponent, isObject, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVAvatarProps = propsFactory({
|
||||
badge: {
|
||||
type: [Boolean, Object],
|
||||
default: false
|
||||
},
|
||||
start: Boolean,
|
||||
end: Boolean,
|
||||
icon: IconValue,
|
||||
image: String,
|
||||
text: String,
|
||||
...makeBorderProps(),
|
||||
...makeComponentProps(),
|
||||
...makeDensityProps(),
|
||||
...makeRoundedProps(),
|
||||
...makeSizeProps(),
|
||||
...makeTagProps(),
|
||||
...makeThemeProps(),
|
||||
...makeVariantProps({
|
||||
variant: 'flat'
|
||||
})
|
||||
}, 'VAvatar');
|
||||
export const VAvatar = genericComponent()({
|
||||
name: 'VAvatar',
|
||||
props: makeVAvatarProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
borderClasses
|
||||
} = useBorder(props);
|
||||
const {
|
||||
colorClasses,
|
||||
colorStyles,
|
||||
variantClasses
|
||||
} = useVariant(props);
|
||||
const {
|
||||
densityClasses
|
||||
} = useDensity(props);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props);
|
||||
const {
|
||||
sizeClasses,
|
||||
sizeStyles
|
||||
} = useSize(props);
|
||||
const badgeDotSize = computed(() => {
|
||||
switch (props.size) {
|
||||
case 'x-small':
|
||||
return 8;
|
||||
case 'small':
|
||||
return 10;
|
||||
case 'large':
|
||||
return 14;
|
||||
case 'x-large':
|
||||
return 16;
|
||||
default:
|
||||
return 12;
|
||||
}
|
||||
});
|
||||
const badgeOffset = computed(() => {
|
||||
const {
|
||||
floating
|
||||
} = isObject(props.badge) ? props.badge : {};
|
||||
return (floating ? badgeDotSize.value / 2 : 0) - 1.5;
|
||||
});
|
||||
const badgeProps = computed(() => {
|
||||
return {
|
||||
bordered: true,
|
||||
dot: !slots.badge,
|
||||
dotSize: badgeDotSize.value,
|
||||
offsetX: badgeOffset.value,
|
||||
offsetY: badgeOffset.value,
|
||||
color: typeof props.badge === 'string' ? props.badge : 'primary',
|
||||
...(isObject(props.badge) ? props.badge : {})
|
||||
};
|
||||
});
|
||||
useRender(() => {
|
||||
const avatar = _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-avatar', {
|
||||
'v-avatar--start': props.start,
|
||||
'v-avatar--end': props.end
|
||||
}, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class]),
|
||||
"style": _normalizeStyle([colorStyles.value, sizeStyles.value, props.style])
|
||||
}, {
|
||||
default: () => [!slots.default ? props.image ? _createVNode(VImg, {
|
||||
"key": "image",
|
||||
"src": props.image,
|
||||
"alt": "",
|
||||
"cover": true
|
||||
}, null) : props.icon ? _createVNode(VIcon, {
|
||||
"key": "icon",
|
||||
"icon": props.icon
|
||||
}, null) : props.text : _createVNode(VDefaultsProvider, {
|
||||
"key": "content-defaults",
|
||||
"defaults": {
|
||||
VImg: {
|
||||
cover: true,
|
||||
src: props.image
|
||||
},
|
||||
VIcon: {
|
||||
icon: props.icon
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [slots.default()]
|
||||
}), genOverlays(false, 'v-avatar')]
|
||||
});
|
||||
return props.badge ? _createVNode(VBadge, badgeProps.value, {
|
||||
default: () => avatar,
|
||||
badge: slots.badge
|
||||
}) : avatar;
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VAvatar.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+37
@@ -0,0 +1,37 @@
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use './mixins' as *
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-avatar
|
||||
flex: none
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
justify-content: center
|
||||
line-height: $avatar-line-height
|
||||
overflow: hidden
|
||||
position: relative
|
||||
text-align: center
|
||||
transition: 0.2s settings.$standard-easing
|
||||
transition-property: width, height
|
||||
vertical-align: $avatar-vertical-align
|
||||
|
||||
@include avatar-sizes($avatar-sizes)
|
||||
@include avatar-density(('height', 'width'), $avatar-density)
|
||||
@include tools.border($avatar-border...)
|
||||
@include tools.rounded($avatar-border-radius)
|
||||
@include tools.variant($avatar-variants...)
|
||||
|
||||
&--rounded
|
||||
@include tools.rounded($avatar-rounded-border-radius)
|
||||
|
||||
&--start
|
||||
margin-inline-end: $avatar-margin-start
|
||||
|
||||
&--end
|
||||
margin-inline-start: $avatar-margin-end
|
||||
|
||||
.v-img
|
||||
height: 100%
|
||||
width: 100%
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
@use 'sass:map';
|
||||
@use 'sass:meta';
|
||||
@use '../../styles/settings';
|
||||
@use './variables' as *;
|
||||
|
||||
@mixin avatar-sizes ($map: $avatar-sizes) {
|
||||
@each $sizeName, $multiplier in settings.$size-scales {
|
||||
$size: map.get($map, 'height') + (8 * $multiplier);
|
||||
|
||||
&.v-avatar--size-#{$sizeName} {
|
||||
--v-avatar-height: #{$size};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin avatar-density ($properties, $densities) {
|
||||
@each $density, $multiplier in $densities {
|
||||
$value: calc(var(--v-avatar-height) + #{$multiplier * settings.$spacer});
|
||||
|
||||
&.v-avatar--density-#{$density} {
|
||||
@if meta.type-of($properties) == "list" {
|
||||
@each $property in $properties {
|
||||
#{$property}: $value;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
#{$properties}: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+48
@@ -0,0 +1,48 @@
|
||||
@use "sass:map";
|
||||
@use '../../styles/settings';
|
||||
@use "../../styles/settings/variables";
|
||||
@use "../../styles/tools/functions";
|
||||
|
||||
// Defaults
|
||||
$avatar-background: rgb(var(--v-theme-surface)) !default;
|
||||
$avatar-border-radius: map.get(variables.$rounded, 'circle') !default;
|
||||
$avatar-border-color: settings.$border-color-root !default;
|
||||
$avatar-border-radius: map.get(settings.$rounded, 0) !default;
|
||||
$avatar-border-style: settings.$border-style-root !default;
|
||||
$avatar-border-thin-width: thin !default;
|
||||
$avatar-border-width: 0 !default;
|
||||
$avatar-color: functions.theme-color('on-surface', var(--v-medium-emphasis-opacity)) !default;
|
||||
$avatar-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
|
||||
$avatar-elevation: 1 !default;
|
||||
$avatar-height: 40px !default;
|
||||
$avatar-line-height: normal !default;
|
||||
$avatar-plain-opacity: .62 !default;
|
||||
$avatar-rounded-border-radius: variables.$border-radius-root !default;
|
||||
$avatar-vertical-align: middle !default;
|
||||
$avatar-width: 40px !default;
|
||||
$avatar-margin-end: 8px !default;
|
||||
$avatar-margin-start: 8px !default;
|
||||
|
||||
$avatar-sizes: () !default;
|
||||
$avatar-sizes: functions.map-deep-merge(
|
||||
(
|
||||
'height': $avatar-height,
|
||||
'width': $avatar-width
|
||||
),
|
||||
$avatar-sizes
|
||||
);
|
||||
|
||||
$avatar-border: (
|
||||
$avatar-border-color,
|
||||
$avatar-border-style,
|
||||
$avatar-border-width,
|
||||
$avatar-border-thin-width
|
||||
) !default;
|
||||
|
||||
$avatar-variants: (
|
||||
$avatar-background,
|
||||
$avatar-color,
|
||||
$avatar-elevation,
|
||||
$avatar-plain-opacity,
|
||||
'v-avatar'
|
||||
) !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VAvatar } from './VAvatar.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VAvatar } from "./VAvatar.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VAvatar"],"sources":["../../../src/components/VAvatar/index.ts"],"sourcesContent":["export { VAvatar } from './VAvatar'\n"],"mappings":"SAASA,OAAO","ignoreList":[]}
|
||||
Reference in New Issue
Block a user