routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+51
@@ -0,0 +1,51 @@
|
||||
@layer vuetify-components {
|
||||
.v-avatar-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.v-avatar-group--hoverable .v-avatar {
|
||||
cursor: pointer;
|
||||
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.v-avatar-group--hoverable .v-avatar:hover {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
.v-avatar-group--hoverable.v-avatar-group--vertical .v-avatar:hover {
|
||||
transform: translateX(8px);
|
||||
}
|
||||
.v-avatar-group__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.v-avatar-group .v-avatar-group__overflow {
|
||||
background: rgb(var(--v-theme-surface-light));
|
||||
color: rgb(var(--v-theme-on-surface-light));
|
||||
}
|
||||
.v-avatar-group--horizontal .v-avatar:not(:first-child) {
|
||||
margin-inline-start: var(--v-avatar-group-gap, -12px);
|
||||
}
|
||||
.v-avatar-group--horizontal.v-avatar-group--reverse .v-avatar-group__content {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.v-avatar-group--horizontal.v-avatar-group--reverse {
|
||||
/* upgrade someday: https://caniuse.com/wf-sibling-count */
|
||||
}
|
||||
.v-avatar-group--horizontal.v-avatar-group--reverse .v-avatar:not(:first-child) {
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: var(--v-avatar-group-gap, -12px);
|
||||
}
|
||||
.v-avatar-group--vertical .v-avatar-group__content {
|
||||
flex-direction: column;
|
||||
}
|
||||
.v-avatar-group--vertical .v-avatar:not(:first-child) {
|
||||
margin-block-start: var(--v-avatar-group-gap, -12px);
|
||||
}
|
||||
.v-avatar-group--vertical.v-avatar-group--reverse .v-avatar-group__content {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.v-avatar-group--vertical.v-avatar-group--reverse .v-avatar:not(:first-child) {
|
||||
margin-block-start: 0;
|
||||
margin-block-end: var(--v-avatar-group-gap, -12px);
|
||||
}
|
||||
}
|
||||
+399
@@ -0,0 +1,399 @@
|
||||
|
||||
import type { PropType } from 'vue';
|
||||
import type { SelectItemKey } from '../../util/index.js';
|
||||
export type AvatarGroupItem = string | Record<string, any>;
|
||||
export type VAvatarGroupSlots = {
|
||||
default: never;
|
||||
prepend: never;
|
||||
append: never;
|
||||
item: {
|
||||
props: any;
|
||||
index: number;
|
||||
};
|
||||
overflow: {
|
||||
overflow: number;
|
||||
};
|
||||
};
|
||||
export declare const makeVAvatarGroupProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
tag?: unknown;
|
||||
border?: unknown;
|
||||
gap?: unknown;
|
||||
hoverable?: unknown;
|
||||
items?: unknown;
|
||||
itemProps?: unknown;
|
||||
limit?: unknown;
|
||||
overflowText?: unknown;
|
||||
reverse?: unknown;
|
||||
size?: unknown;
|
||||
vertical?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
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>;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
gap: unknown extends Defaults["gap"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["gap"] ? string | number : string | number | Defaults["gap"]>;
|
||||
default: unknown extends Defaults["gap"] ? string | number : Defaults["gap"] | NonNullable<string | number>;
|
||||
};
|
||||
hoverable: unknown extends Defaults["hoverable"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["hoverable"] ? boolean : boolean | Defaults["hoverable"]>;
|
||||
default: unknown extends Defaults["hoverable"] ? boolean : boolean | Defaults["hoverable"];
|
||||
};
|
||||
items: unknown extends Defaults["items"] ? {
|
||||
type: PropType<AvatarGroupItem[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: PropType<AvatarGroupItem[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["items"] ? AvatarGroupItem[] : AvatarGroupItem[] | Defaults["items"]>;
|
||||
default: unknown extends Defaults["items"] ? AvatarGroupItem[] : AvatarGroupItem[] | Defaults["items"];
|
||||
};
|
||||
itemProps: unknown extends Defaults["itemProps"] ? {
|
||||
type: PropType<SelectItemKey>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<SelectItemKey>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["itemProps"] ? SelectItemKey : Defaults["itemProps"] | SelectItemKey>;
|
||||
default: unknown extends Defaults["itemProps"] ? SelectItemKey : Defaults["itemProps"] | NonNullable<SelectItemKey>;
|
||||
};
|
||||
limit: unknown extends Defaults["limit"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["limit"] ? string | number : string | number | Defaults["limit"]>;
|
||||
default: unknown extends Defaults["limit"] ? string | number : Defaults["limit"] | NonNullable<string | number>;
|
||||
};
|
||||
overflowText: unknown extends Defaults["overflowText"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["overflowText"] ? string : string | Defaults["overflowText"]>;
|
||||
default: unknown extends Defaults["overflowText"] ? string : string | Defaults["overflowText"];
|
||||
};
|
||||
reverse: unknown extends Defaults["reverse"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["reverse"] ? boolean : boolean | Defaults["reverse"]>;
|
||||
default: unknown extends Defaults["reverse"] ? boolean : boolean | Defaults["reverse"];
|
||||
};
|
||||
size: unknown extends Defaults["size"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["size"] ? string | number : string | number | Defaults["size"]>;
|
||||
default: unknown extends Defaults["size"] ? string | number : Defaults["size"] | NonNullable<string | number>;
|
||||
};
|
||||
vertical: unknown extends Defaults["vertical"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["vertical"] ? boolean : boolean | Defaults["vertical"]>;
|
||||
default: unknown extends Defaults["vertical"] ? boolean : boolean | Defaults["vertical"];
|
||||
};
|
||||
};
|
||||
export declare const VAvatarGroup: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
hoverable: boolean;
|
||||
items: AvatarGroupItem[];
|
||||
itemProps: string | boolean | readonly (string | number)[] | ((item: Record<string, any>, fallback?: any) => any) | null;
|
||||
reverse: boolean;
|
||||
vertical: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
gap?: string | number | undefined;
|
||||
limit?: string | number | undefined;
|
||||
overflowText?: string | undefined;
|
||||
size?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
item?: ((arg: {
|
||||
props: any;
|
||||
index: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
overflow?: ((arg: {
|
||||
overflow: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
item?: false | ((arg: {
|
||||
props: any;
|
||||
index: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
overflow?: false | ((arg: {
|
||||
overflow: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:item"?: false | ((arg: {
|
||||
props: any;
|
||||
index: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:overflow"?: false | ((arg: {
|
||||
overflow: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: 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;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
hoverable: boolean;
|
||||
items: AvatarGroupItem[];
|
||||
itemProps: SelectItemKey;
|
||||
reverse: boolean;
|
||||
vertical: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
item: (arg: {
|
||||
props: any;
|
||||
index: number;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
overflow: (arg: {
|
||||
overflow: number;
|
||||
}) => 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;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
hoverable: boolean;
|
||||
items: AvatarGroupItem[];
|
||||
itemProps: string | boolean | readonly (string | number)[] | ((item: Record<string, any>, fallback?: any) => any) | null;
|
||||
reverse: boolean;
|
||||
vertical: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
gap?: string | number | undefined;
|
||||
limit?: string | number | undefined;
|
||||
overflowText?: string | undefined;
|
||||
size?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
item?: ((arg: {
|
||||
props: any;
|
||||
index: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
overflow?: ((arg: {
|
||||
overflow: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
item?: false | ((arg: {
|
||||
props: any;
|
||||
index: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
overflow?: false | ((arg: {
|
||||
overflow: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:item"?: false | ((arg: {
|
||||
props: any;
|
||||
index: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:overflow"?: false | ((arg: {
|
||||
overflow: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
hoverable: boolean;
|
||||
items: AvatarGroupItem[];
|
||||
itemProps: SelectItemKey;
|
||||
reverse: boolean;
|
||||
vertical: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
hoverable: boolean;
|
||||
items: AvatarGroupItem[];
|
||||
itemProps: string | boolean | readonly (string | number)[] | ((item: Record<string, any>, fallback?: any) => any) | null;
|
||||
reverse: boolean;
|
||||
vertical: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
gap?: string | number | undefined;
|
||||
limit?: string | number | undefined;
|
||||
overflowText?: string | undefined;
|
||||
size?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
item?: ((arg: {
|
||||
props: any;
|
||||
index: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
overflow?: ((arg: {
|
||||
overflow: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
item?: false | ((arg: {
|
||||
props: any;
|
||||
index: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
overflow?: false | ((arg: {
|
||||
overflow: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:item"?: false | ((arg: {
|
||||
props: any;
|
||||
index: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:overflow"?: false | ((arg: {
|
||||
overflow: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
hoverable: boolean;
|
||||
items: AvatarGroupItem[];
|
||||
itemProps: SelectItemKey;
|
||||
reverse: boolean;
|
||||
vertical: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
item: (arg: {
|
||||
props: any;
|
||||
index: number;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
overflow: (arg: {
|
||||
overflow: number;
|
||||
}) => 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<{
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
gap: (NumberConstructor | StringConstructor)[];
|
||||
hoverable: BooleanConstructor;
|
||||
items: {
|
||||
type: PropType<AvatarGroupItem[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
itemProps: {
|
||||
type: PropType<SelectItemKey>;
|
||||
default: null;
|
||||
};
|
||||
limit: (NumberConstructor | StringConstructor)[];
|
||||
overflowText: StringConstructor;
|
||||
reverse: BooleanConstructor;
|
||||
size: (NumberConstructor | StringConstructor)[];
|
||||
vertical: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
gap: (NumberConstructor | StringConstructor)[];
|
||||
hoverable: BooleanConstructor;
|
||||
items: {
|
||||
type: PropType<AvatarGroupItem[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
itemProps: {
|
||||
type: PropType<SelectItemKey>;
|
||||
default: null;
|
||||
};
|
||||
limit: (NumberConstructor | StringConstructor)[];
|
||||
overflowText: StringConstructor;
|
||||
reverse: BooleanConstructor;
|
||||
size: (NumberConstructor | StringConstructor)[];
|
||||
vertical: BooleanConstructor;
|
||||
}>>;
|
||||
export type VAvatarGroup = InstanceType<typeof VAvatarGroup>;
|
||||
+93
@@ -0,0 +1,93 @@
|
||||
import { createVNode as _createVNode, Fragment as _Fragment, mergeProps as _mergeProps, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Styles
|
||||
import "./VAvatarGroup.css";
|
||||
|
||||
// Components
|
||||
import { VAvatar } from "../../components/VAvatar/index.js";
|
||||
import { VDefaultsProvider } from "../../components/VDefaultsProvider/index.js"; // Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeTagProps } from "../../composables/tag.js"; // Utilities
|
||||
import { computed } from 'vue';
|
||||
import { convertToUnit, genericComponent, getPropertyFromItem, isObject, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVAvatarGroupProps = propsFactory({
|
||||
border: [Boolean, Number, String],
|
||||
gap: [Number, String],
|
||||
hoverable: Boolean,
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
itemProps: {
|
||||
type: [Boolean, String, Array, Function],
|
||||
default: null
|
||||
},
|
||||
limit: [Number, String],
|
||||
overflowText: String,
|
||||
reverse: Boolean,
|
||||
size: [Number, String],
|
||||
vertical: Boolean,
|
||||
...makeComponentProps(),
|
||||
...makeTagProps()
|
||||
}, 'VAvatarGroup');
|
||||
export const VAvatarGroup = genericComponent()({
|
||||
name: 'VAvatarGroup',
|
||||
props: makeVAvatarGroupProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const limit = computed(() => props.limit !== null ? Number(props.limit) : null);
|
||||
const overflow = computed(() => {
|
||||
return limit.value && !isNaN(limit.value) && props.items.length > limit.value ? Math.max(0, props.items.length - limit.value + 1) : 0;
|
||||
});
|
||||
const items = computed(() => {
|
||||
const visibleItems = limit.value && overflow.value > 1 ? props.items.slice(0, limit.value - 1) : props.items;
|
||||
const orderedItems = props.reverse ? visibleItems.toReversed() : visibleItems;
|
||||
return orderedItems.map(item => {
|
||||
const avatarProps = props.itemProps === true ? isObject(item) ? item : {
|
||||
image: item
|
||||
} : getPropertyFromItem(item, props.itemProps, item);
|
||||
if (avatarProps != null) return avatarProps;
|
||||
if (!isObject(item)) return {
|
||||
image: item
|
||||
};
|
||||
return item;
|
||||
});
|
||||
});
|
||||
const overflowText = computed(() => props.overflowText ?? (overflow.value ? `+${overflow.value}` : ''));
|
||||
const overflowItem = () => slots.overflow?.({
|
||||
overflow: overflow.value
|
||||
}) ?? _createVNode(VAvatar, {
|
||||
"class": "v-avatar-group__overflow",
|
||||
"text": overflowText.value
|
||||
}, null);
|
||||
useRender(() => _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-avatar-group', `v-avatar-group--${props.vertical ? 'vertical' : 'horizontal'}`, {
|
||||
'v-avatar-group--hoverable': props.hoverable,
|
||||
'v-avatar-group--reverse': props.reverse
|
||||
}, props.class]),
|
||||
"style": _normalizeStyle([{
|
||||
'--v-avatar-group-gap': convertToUnit(props.gap)
|
||||
}, props.style])
|
||||
}, {
|
||||
default: () => [slots.prepend?.(), _createElementVNode("div", {
|
||||
"class": "v-avatar-group__content"
|
||||
}, [_createVNode(VDefaultsProvider, {
|
||||
"defaults": {
|
||||
VAvatar: {
|
||||
size: props.size,
|
||||
border: props.border
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [slots.default?.() ?? _createElementVNode(_Fragment, null, [props.reverse && overflowText.value && overflowItem(), items.value.map((item, index) => slots.item?.({
|
||||
props: item,
|
||||
index
|
||||
}) ?? _createVNode(VAvatar, _mergeProps({
|
||||
"key": index
|
||||
}, item), null)), !props.reverse && overflowText.value && overflowItem()])]
|
||||
})]), slots.append?.()]
|
||||
}));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VAvatarGroup.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+79
@@ -0,0 +1,79 @@
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
@use './variables' as *;
|
||||
|
||||
@include tools.layer('components') {
|
||||
.v-avatar-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $avatar-group-container-gap;
|
||||
|
||||
&--hoverable {
|
||||
.v-avatar {
|
||||
cursor: pointer;
|
||||
transition: transform 0.25s settings.$standard-easing;
|
||||
|
||||
&:hover {
|
||||
transform: $avatar-group-hoverable-horizontal-transform;
|
||||
}
|
||||
}
|
||||
|
||||
&.v-avatar-group--vertical .v-avatar:hover {
|
||||
transform: $avatar-group-hoverable-vertical-transform;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.v-avatar-group__overflow {
|
||||
background: $avatar-group-overflow-background;
|
||||
color: $avatar-group-overflow-color;
|
||||
}
|
||||
|
||||
&--horizontal {
|
||||
.v-avatar:not(:first-child) {
|
||||
margin-inline-start: var(--v-avatar-group-gap, $avatar-group-gap);
|
||||
}
|
||||
|
||||
&.v-avatar-group--reverse {
|
||||
.v-avatar-group__content {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
/* upgrade someday: https://caniuse.com/wf-sibling-count */
|
||||
// .v-avatar {
|
||||
// z-index: calc(99 - sibling-index());
|
||||
// }
|
||||
|
||||
.v-avatar:not(:first-child) {
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: var(--v-avatar-group-gap, $avatar-group-gap);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--vertical {
|
||||
.v-avatar-group__content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.v-avatar:not(:first-child) {
|
||||
margin-block-start: var(--v-avatar-group-gap, $avatar-group-gap);
|
||||
}
|
||||
|
||||
&.v-avatar-group--reverse {
|
||||
.v-avatar-group__content {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.v-avatar:not(:first-child) {
|
||||
margin-block-start: 0;
|
||||
margin-block-end: var(--v-avatar-group-gap, $avatar-group-gap);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
$avatar-group-container-gap: 8px !default;
|
||||
$avatar-group-gap: -12px !default;
|
||||
$avatar-group-hoverable-horizontal-transform: translateY(-8px) !default;
|
||||
$avatar-group-hoverable-vertical-transform: translateX(8px) !default;
|
||||
$avatar-group-overflow-background: rgb(var(--v-theme-surface-light)) !default;
|
||||
$avatar-group-overflow-color: rgb(var(--v-theme-on-surface-light)) !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VAvatarGroup } from './VAvatarGroup.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VAvatarGroup } from "./VAvatarGroup.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VAvatarGroup"],"sources":["../../../src/labs/VAvatarGroup/index.ts"],"sourcesContent":["export { VAvatarGroup } from './VAvatarGroup'\n"],"mappings":"SAASA,YAAY","ignoreList":[]}
|
||||
Reference in New Issue
Block a user