routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+83
@@ -0,0 +1,83 @@
|
||||
@layer vuetify-components {
|
||||
.v-badge {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
.v-badge__badge {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
border-radius: 10px;
|
||||
font-family: var(--v-font-body, "Roboto", sans-serif);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
height: 1.25rem;
|
||||
justify-content: center;
|
||||
min-width: 20px;
|
||||
padding: 4px 6px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
text-indent: 0;
|
||||
transition: 0.225s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.v-badge__badge {
|
||||
background: rgb(var(--v-theme-surface-variant));
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface-variant)) calc(var(--v-high-emphasis-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-badge__badge:has(.v-icon) {
|
||||
padding: 4px 6px;
|
||||
}
|
||||
.v-badge--bordered .v-badge__badge::after {
|
||||
border-radius: inherit;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
color: rgb(var(--v-theme-background));
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.v-badge--dot .v-badge__badge {
|
||||
border-radius: 50%;
|
||||
height: 9px;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
width: 9px;
|
||||
}
|
||||
.v-badge--dot .v-badge__badge::after {
|
||||
border-width: 1.5px;
|
||||
}
|
||||
.v-badge--inline .v-badge__badge {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.v-badge__badge .v-icon {
|
||||
color: inherit;
|
||||
font-size: 0.75rem;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
.v-badge__badge img,
|
||||
.v-badge__badge .v-img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.v-badge__wrapper {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
.v-badge--inline .v-badge__wrapper {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
@layer vuetify-final.trumps {
|
||||
@media (forced-colors: active) {
|
||||
.v-badge__badge {
|
||||
forced-color-adjust: preserve-parent-color;
|
||||
background: highlight;
|
||||
color: highlighttext;
|
||||
}
|
||||
}
|
||||
}
|
||||
+526
@@ -0,0 +1,526 @@
|
||||
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
export type VBadgeSlots = {
|
||||
default: never;
|
||||
badge: never;
|
||||
};
|
||||
export declare const makeVBadgeProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
height?: unknown;
|
||||
maxHeight?: unknown;
|
||||
maxWidth?: unknown;
|
||||
minHeight?: unknown;
|
||||
minWidth?: unknown;
|
||||
width?: unknown;
|
||||
location?: unknown;
|
||||
transition?: unknown;
|
||||
bordered?: unknown;
|
||||
color?: unknown;
|
||||
content?: unknown;
|
||||
dot?: unknown;
|
||||
dotSize?: unknown;
|
||||
floating?: unknown;
|
||||
icon?: unknown;
|
||||
inline?: unknown;
|
||||
label?: unknown;
|
||||
max?: unknown;
|
||||
modelValue?: unknown;
|
||||
offsetX?: unknown;
|
||||
offsetY?: unknown;
|
||||
textColor?: 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>;
|
||||
};
|
||||
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"] ? {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "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>;
|
||||
};
|
||||
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"] ? {
|
||||
type: import("vue").PropType<import("../../util/index.js").Anchor | null>;
|
||||
default: NonNullable<import("../../util/index.js").Anchor | null>;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("../../util/index.js").Anchor | null>;
|
||||
default: NonNullable<import("../../util/index.js").Anchor | null>;
|
||||
}, "default" | "type"> & {
|
||||
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>;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
bordered: unknown extends Defaults["bordered"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["bordered"] ? boolean : boolean | Defaults["bordered"]>;
|
||||
default: unknown extends Defaults["bordered"] ? boolean : boolean | Defaults["bordered"];
|
||||
};
|
||||
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"];
|
||||
};
|
||||
content: unknown extends Defaults["content"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["content"] ? string | number : string | number | Defaults["content"]>;
|
||||
default: unknown extends Defaults["content"] ? string | number : Defaults["content"] | NonNullable<string | number>;
|
||||
};
|
||||
dot: unknown extends Defaults["dot"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["dot"] ? boolean : boolean | Defaults["dot"]>;
|
||||
default: unknown extends Defaults["dot"] ? boolean : boolean | Defaults["dot"];
|
||||
};
|
||||
dotSize: unknown extends Defaults["dotSize"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["dotSize"] ? string | number : string | number | Defaults["dotSize"]>;
|
||||
default: unknown extends Defaults["dotSize"] ? string | number : Defaults["dotSize"] | NonNullable<string | number>;
|
||||
};
|
||||
floating: unknown extends Defaults["floating"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["floating"] ? boolean : boolean | Defaults["floating"]>;
|
||||
default: unknown extends Defaults["floating"] ? boolean : boolean | Defaults["floating"];
|
||||
};
|
||||
icon: unknown extends Defaults["icon"] ? import("vue").PropType<IconValue> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | IconValue>;
|
||||
default: unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | NonNullable<IconValue>;
|
||||
};
|
||||
inline: unknown extends Defaults["inline"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["inline"] ? boolean : boolean | Defaults["inline"]>;
|
||||
default: unknown extends Defaults["inline"] ? boolean : boolean | Defaults["inline"];
|
||||
};
|
||||
label: unknown extends Defaults["label"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["label"] ? string : string | Defaults["label"]>;
|
||||
default: unknown extends Defaults["label"] ? string : string | Defaults["label"];
|
||||
};
|
||||
max: unknown extends Defaults["max"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["max"] ? string | number : string | number | Defaults["max"]>;
|
||||
default: unknown extends Defaults["max"] ? string | number : Defaults["max"] | NonNullable<string | number>;
|
||||
};
|
||||
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"];
|
||||
};
|
||||
offsetX: unknown extends Defaults["offsetX"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["offsetX"] ? string | number : string | number | Defaults["offsetX"]>;
|
||||
default: unknown extends Defaults["offsetX"] ? string | number : Defaults["offsetX"] | NonNullable<string | number>;
|
||||
};
|
||||
offsetY: unknown extends Defaults["offsetY"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["offsetY"] ? string | number : string | number | Defaults["offsetY"]>;
|
||||
default: unknown extends Defaults["offsetY"] ? string | number : Defaults["offsetY"] | NonNullable<string | number>;
|
||||
};
|
||||
textColor: unknown extends Defaults["textColor"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["textColor"] ? string : string | Defaults["textColor"]>;
|
||||
default: unknown extends Defaults["textColor"] ? string : string | Defaults["textColor"];
|
||||
};
|
||||
};
|
||||
export declare const VBadge: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
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;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
rounded?: string | number | boolean | 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;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dotSize?: string | number | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
max?: string | number | undefined;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: 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;
|
||||
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;
|
||||
}, 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;
|
||||
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;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
rounded?: string | number | boolean | 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;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dotSize?: string | number | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
max?: string | number | undefined;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: 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;
|
||||
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;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
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;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
rounded?: string | number | boolean | 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;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dotSize?: string | number | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
max?: string | number | undefined;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: 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;
|
||||
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;
|
||||
}, {}, 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: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
location: {
|
||||
type: import("vue").PropType<import("../../util/index.js").Anchor | null>;
|
||||
default: NonNullable<import("../../util/index.js").Anchor | null>;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
bordered: BooleanConstructor;
|
||||
color: StringConstructor;
|
||||
content: (NumberConstructor | StringConstructor)[];
|
||||
dot: BooleanConstructor;
|
||||
dotSize: (NumberConstructor | StringConstructor)[];
|
||||
floating: BooleanConstructor;
|
||||
icon: import("vue").PropType<IconValue>;
|
||||
inline: BooleanConstructor;
|
||||
label: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
max: (NumberConstructor | StringConstructor)[];
|
||||
modelValue: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
offsetX: (NumberConstructor | StringConstructor)[];
|
||||
offsetY: (NumberConstructor | StringConstructor)[];
|
||||
textColor: StringConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
location: {
|
||||
type: import("vue").PropType<import("../../util/index.js").Anchor | null>;
|
||||
default: NonNullable<import("../../util/index.js").Anchor | null>;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
bordered: BooleanConstructor;
|
||||
color: StringConstructor;
|
||||
content: (NumberConstructor | StringConstructor)[];
|
||||
dot: BooleanConstructor;
|
||||
dotSize: (NumberConstructor | StringConstructor)[];
|
||||
floating: BooleanConstructor;
|
||||
icon: import("vue").PropType<IconValue>;
|
||||
inline: BooleanConstructor;
|
||||
label: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
max: (NumberConstructor | StringConstructor)[];
|
||||
modelValue: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
offsetX: (NumberConstructor | StringConstructor)[];
|
||||
offsetY: (NumberConstructor | StringConstructor)[];
|
||||
textColor: StringConstructor;
|
||||
}>>;
|
||||
export type VBadge = InstanceType<typeof VBadge>;
|
||||
+120
@@ -0,0 +1,120 @@
|
||||
import { createVNode as _createVNode, vShow as _vShow, mergeProps as _mergeProps, createElementVNode as _createElementVNode, withDirectives as _withDirectives } from "vue";
|
||||
// Styles
|
||||
import "./VBadge.css";
|
||||
|
||||
// Components
|
||||
import { VIcon } from "../VIcon/index.js"; // Composables
|
||||
import { useBackgroundColor, useTextColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeDimensionProps, useDimension } from "../../composables/dimensions.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { useLocale } from "../../composables/locale.js";
|
||||
import { makeLocationProps, useLocation } from "../../composables/location.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, useTheme } from "../../composables/theme.js";
|
||||
import { makeTransitionProps, MaybeTransition } from "../../composables/transition.js"; // Utilities
|
||||
import { convertToUnit, genericComponent, pickWithRest, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVBadgeProps = propsFactory({
|
||||
bordered: Boolean,
|
||||
color: String,
|
||||
content: [Number, String],
|
||||
dot: Boolean,
|
||||
dotSize: [Number, String],
|
||||
floating: Boolean,
|
||||
icon: IconValue,
|
||||
inline: Boolean,
|
||||
label: {
|
||||
type: String,
|
||||
default: '$vuetify.badge'
|
||||
},
|
||||
max: [Number, String],
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
offsetX: [Number, String],
|
||||
offsetY: [Number, String],
|
||||
textColor: String,
|
||||
...makeComponentProps(),
|
||||
...makeLocationProps({
|
||||
location: 'top end'
|
||||
}),
|
||||
...makeRoundedProps(),
|
||||
...makeTagProps(),
|
||||
...makeThemeProps(),
|
||||
...makeTransitionProps({
|
||||
transition: 'scale-rotate-transition'
|
||||
}),
|
||||
...makeDimensionProps()
|
||||
}, 'VBadge');
|
||||
export const VBadge = genericComponent()({
|
||||
name: 'VBadge',
|
||||
inheritAttrs: false,
|
||||
props: makeVBadgeProps(),
|
||||
setup(props, ctx) {
|
||||
const {
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles
|
||||
} = useBackgroundColor(() => props.color);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props);
|
||||
const {
|
||||
t
|
||||
} = useLocale();
|
||||
const {
|
||||
textColorClasses,
|
||||
textColorStyles
|
||||
} = useTextColor(() => props.textColor);
|
||||
const {
|
||||
themeClasses
|
||||
} = useTheme();
|
||||
const {
|
||||
locationStyles
|
||||
} = useLocation(props, true, side => {
|
||||
const base = props.floating ? props.dot ? 2 : 4 : props.dot ? Number(props.dotSize ?? 8) : 12;
|
||||
return base + (['top', 'bottom'].includes(side) ? Number(props.offsetY ?? 0) : ['left', 'right'].includes(side) ? Number(props.offsetX ?? 0) : 0);
|
||||
});
|
||||
const {
|
||||
dimensionStyles
|
||||
} = useDimension(props);
|
||||
useRender(() => {
|
||||
const value = Number(props.content);
|
||||
const content = !props.max || isNaN(value) ? props.content : value <= Number(props.max) ? value : `${props.max}+`;
|
||||
const [badgeAttrs, attrs] = pickWithRest(ctx.attrs, ['aria-atomic', 'aria-label', 'aria-live', 'role', 'title']);
|
||||
return _createVNode(props.tag, _mergeProps({
|
||||
"class": ['v-badge', {
|
||||
'v-badge--bordered': props.bordered,
|
||||
'v-badge--dot': props.dot,
|
||||
'v-badge--floating': props.floating,
|
||||
'v-badge--inline': props.inline
|
||||
}, props.class]
|
||||
}, attrs, {
|
||||
"style": props.style
|
||||
}), {
|
||||
default: () => [_createElementVNode("div", {
|
||||
"class": "v-badge__wrapper"
|
||||
}, [ctx.slots.default?.(), _createVNode(MaybeTransition, {
|
||||
"transition": props.transition
|
||||
}, {
|
||||
default: () => [_withDirectives(_createElementVNode("span", _mergeProps({
|
||||
"class": ['v-badge__badge', themeClasses.value, backgroundColorClasses.value, roundedClasses.value, textColorClasses.value],
|
||||
"style": [backgroundColorStyles.value, textColorStyles.value, dimensionStyles.value, props.inline ? {} : locationStyles.value, props.dot && props.dotSize ? {
|
||||
width: convertToUnit(props.dotSize),
|
||||
height: convertToUnit(props.dotSize)
|
||||
} : {}],
|
||||
"aria-atomic": "true",
|
||||
"aria-label": t(props.label, value),
|
||||
"aria-live": "polite",
|
||||
"role": "status"
|
||||
}, badgeAttrs), [props.dot ? undefined : ctx.slots.badge ? ctx.slots.badge?.() : props.icon ? _createVNode(VIcon, {
|
||||
"icon": props.icon
|
||||
}, null) : content]), [[_vShow, props.modelValue]])]
|
||||
})])]
|
||||
});
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VBadge.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+81
@@ -0,0 +1,81 @@
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-badge
|
||||
display: inline-block
|
||||
line-height: $badge-line-height
|
||||
|
||||
.v-badge__badge
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
border-radius: $badge-border-radius
|
||||
font-family: $badge-font-family
|
||||
font-size: $badge-font-size
|
||||
font-weight: $badge-font-weight
|
||||
height: $badge-height
|
||||
justify-content: center
|
||||
min-width: $badge-min-width
|
||||
padding: $badge-padding
|
||||
position: absolute
|
||||
text-align: center
|
||||
text-indent: 0
|
||||
transition: $badge-transition
|
||||
white-space: nowrap
|
||||
|
||||
@include tools.theme($badge-theme...)
|
||||
|
||||
&:has(.v-icon)
|
||||
padding: $badge-icon-padding
|
||||
|
||||
.v-badge--bordered &
|
||||
&::after
|
||||
border-radius: inherit
|
||||
border-style: $badge-border-style
|
||||
border-width: $badge-border-width
|
||||
color: $badge-border-color
|
||||
content: ''
|
||||
position: absolute
|
||||
inset: 0
|
||||
transform: $badge-border-transform
|
||||
|
||||
.v-badge--dot &
|
||||
border-radius: $badge-dot-border-radius
|
||||
height: $badge-dot-height
|
||||
min-width: 0
|
||||
padding: 0
|
||||
width: $badge-dot-width
|
||||
|
||||
&::after
|
||||
border-width: $badge-dot-border-width
|
||||
|
||||
.v-badge--inline &
|
||||
position: relative
|
||||
vertical-align: $badge-inline-vertical-align
|
||||
|
||||
.v-icon
|
||||
color: inherit
|
||||
font-size: $badge-font-size
|
||||
margin: $badge-icon-margin
|
||||
|
||||
img,
|
||||
.v-img
|
||||
height: 100%
|
||||
width: 100%
|
||||
|
||||
.v-badge__wrapper
|
||||
display: flex
|
||||
position: relative
|
||||
|
||||
.v-badge--inline &
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
justify-content: center
|
||||
margin: $badge-wrapper-margin
|
||||
|
||||
@include tools.layer('trumps')
|
||||
@media (forced-colors: active)
|
||||
.v-badge__badge
|
||||
forced-color-adjust: preserve-parent-color
|
||||
background: highlight
|
||||
color: highlighttext
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
|
||||
// VBadge
|
||||
$badge-background: rgb(var(--v-theme-surface-variant)) !default;
|
||||
$badge-color: tools.theme-color('on-surface-variant', var(--v-high-emphasis-opacity)) !default;
|
||||
$badge-border-color: rgb(var(--v-theme-background)) !default;
|
||||
$badge-border-radius: 10px !default;
|
||||
$badge-border-style: solid !default;
|
||||
$badge-border-transform: scale(1.05) !default;
|
||||
$badge-border-width: 2px !default;
|
||||
$badge-dot-border-radius: 50% !default;
|
||||
$badge-dot-border-width: 1.5px !default;
|
||||
$badge-dot-height: 9px !default;
|
||||
$badge-dot-width: 9px !default;
|
||||
$badge-font-family: settings.$body-font-family !default;
|
||||
$badge-font-size: .75rem !default;
|
||||
$badge-font-weight: 500 !default;
|
||||
$badge-height: 1.25rem !default;
|
||||
$badge-icon-margin: 0 -2px !default;
|
||||
$badge-icon-padding: 4px 6px !default;
|
||||
$badge-inline-vertical-align: middle !default;
|
||||
$badge-line-height: 1 !default;
|
||||
$badge-min-width: 20px !default;
|
||||
$badge-padding: 4px 6px !default;
|
||||
$badge-transition: .225s settings.$standard-easing !default;
|
||||
$badge-wrapper-margin: 0 4px !default;
|
||||
|
||||
// Lists
|
||||
$badge-theme: (
|
||||
$badge-background,
|
||||
$badge-color
|
||||
) !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VBadge } from './VBadge.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VBadge } from "./VBadge.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VBadge"],"sources":["../../../src/components/VBadge/index.ts"],"sourcesContent":["export { VBadge } from './VBadge'\n"],"mappings":"SAASA,MAAM","ignoreList":[]}
|
||||
Reference in New Issue
Block a user