routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+54
@@ -0,0 +1,54 @@
|
||||
@layer vuetify-components {
|
||||
.v-slide-group {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.v-slide-group__next,
|
||||
.v-slide-group__prev {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex: 0 1 52px;
|
||||
justify-content: center;
|
||||
min-width: 52px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.v-slide-group__next--disabled,
|
||||
.v-slide-group__prev--disabled {
|
||||
pointer-events: none;
|
||||
opacity: var(--v-disabled-opacity);
|
||||
}
|
||||
.v-slide-group__content {
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
position: relative;
|
||||
transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.v-slide-group__content > * {
|
||||
white-space: initial;
|
||||
}
|
||||
.v-slide-group__container {
|
||||
contain: content;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scrollbar-width: none;
|
||||
scrollbar-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.v-slide-group__container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.v-slide-group--vertical {
|
||||
max-height: inherit;
|
||||
}
|
||||
.v-slide-group--vertical,
|
||||
.v-slide-group--vertical .v-slide-group__container,
|
||||
.v-slide-group--vertical .v-slide-group__content {
|
||||
flex-direction: column;
|
||||
}
|
||||
.v-slide-group--vertical .v-slide-group__container {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
+461
@@ -0,0 +1,461 @@
|
||||
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
import type { InjectionKey, PropType } from 'vue';
|
||||
import type { GroupProvide } from '../../composables/group.js';
|
||||
import type { GenericProps } from '../../util/index.js';
|
||||
export declare const VSlideGroupSymbol: InjectionKey<GroupProvide>;
|
||||
interface SlideGroupSlot {
|
||||
next: GroupProvide['next'];
|
||||
prev: GroupProvide['prev'];
|
||||
select: GroupProvide['select'];
|
||||
isSelected: GroupProvide['isSelected'];
|
||||
}
|
||||
export type VSlideGroupSlots = {
|
||||
default: SlideGroupSlot;
|
||||
prev: SlideGroupSlot;
|
||||
next: SlideGroupSlot;
|
||||
};
|
||||
export declare const makeVSlideGroupProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
mobile?: unknown;
|
||||
mobileBreakpoint?: unknown;
|
||||
tag?: unknown;
|
||||
modelValue?: unknown;
|
||||
multiple?: unknown;
|
||||
mandatory?: unknown;
|
||||
max?: unknown;
|
||||
selectedClass?: unknown;
|
||||
disabled?: unknown;
|
||||
centerActive?: unknown;
|
||||
scrollToActive?: unknown;
|
||||
contentClass?: unknown;
|
||||
direction?: unknown;
|
||||
symbol?: unknown;
|
||||
nextIcon?: unknown;
|
||||
prevIcon?: unknown;
|
||||
showArrows?: 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>;
|
||||
};
|
||||
mobile: unknown extends Defaults["mobile"] ? Omit<{
|
||||
type: PropType<boolean | null>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<boolean | null>;
|
||||
default: NonNullable<boolean | null> | null;
|
||||
} : Omit<Omit<{
|
||||
type: PropType<boolean | null>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<boolean | null>;
|
||||
default: NonNullable<boolean | null> | null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["mobile"] ? boolean | null : boolean | Defaults["mobile"] | null>;
|
||||
default: unknown extends Defaults["mobile"] ? boolean | null : Defaults["mobile"] | NonNullable<boolean | null>;
|
||||
};
|
||||
mobileBreakpoint: unknown extends Defaults["mobileBreakpoint"] ? PropType<number | import("../../types.js").DisplayBreakpoint> : {
|
||||
type: PropType<unknown extends Defaults["mobileBreakpoint"] ? number | import("../../types.js").DisplayBreakpoint : number | Defaults["mobileBreakpoint"] | import("../../types.js").DisplayBreakpoint>;
|
||||
default: unknown extends Defaults["mobileBreakpoint"] ? number | import("../../types.js").DisplayBreakpoint : Defaults["mobileBreakpoint"] | NonNullable<number | import("../../types.js").DisplayBreakpoint>;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: null;
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: null;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["modelValue"] ? any : any>;
|
||||
default: unknown extends Defaults["modelValue"] ? any : any;
|
||||
};
|
||||
multiple: unknown extends Defaults["multiple"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["multiple"] ? boolean : boolean | Defaults["multiple"]>;
|
||||
default: unknown extends Defaults["multiple"] ? boolean : boolean | Defaults["multiple"];
|
||||
};
|
||||
mandatory: unknown extends Defaults["mandatory"] ? PropType<"force" | boolean> : {
|
||||
type: PropType<unknown extends Defaults["mandatory"] ? "force" | boolean : "force" | boolean | Defaults["mandatory"]>;
|
||||
default: unknown extends Defaults["mandatory"] ? "force" | boolean : Defaults["mandatory"] | NonNullable<"force" | boolean>;
|
||||
};
|
||||
max: unknown extends Defaults["max"] ? NumberConstructor : {
|
||||
type: PropType<unknown extends Defaults["max"] ? number : number | Defaults["max"]>;
|
||||
default: unknown extends Defaults["max"] ? number : number | Defaults["max"];
|
||||
};
|
||||
selectedClass: unknown extends Defaults["selectedClass"] ? {
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"]>;
|
||||
default: unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"];
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"]>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"];
|
||||
};
|
||||
centerActive: unknown extends Defaults["centerActive"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["centerActive"] ? boolean : boolean | Defaults["centerActive"]>;
|
||||
default: unknown extends Defaults["centerActive"] ? boolean : boolean | Defaults["centerActive"];
|
||||
};
|
||||
scrollToActive: unknown extends Defaults["scrollToActive"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["scrollToActive"] ? boolean : boolean | Defaults["scrollToActive"]>;
|
||||
default: unknown extends Defaults["scrollToActive"] ? boolean : boolean | Defaults["scrollToActive"];
|
||||
};
|
||||
contentClass: unknown extends Defaults["contentClass"] ? null : {
|
||||
type: PropType<unknown extends Defaults["contentClass"] ? any : any>;
|
||||
default: unknown extends Defaults["contentClass"] ? any : any;
|
||||
};
|
||||
direction: unknown extends Defaults["direction"] ? {
|
||||
type: PropType<'horizontal' | 'vertical'>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<'horizontal' | 'vertical'>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["direction"] ? "horizontal" | "vertical" : "horizontal" | "vertical" | Defaults["direction"]>;
|
||||
default: unknown extends Defaults["direction"] ? "horizontal" | "vertical" : Defaults["direction"] | NonNullable<"horizontal" | "vertical">;
|
||||
};
|
||||
symbol: unknown extends Defaults["symbol"] ? {
|
||||
type: null;
|
||||
default: InjectionKey<GroupProvide>;
|
||||
} : Omit<{
|
||||
type: null;
|
||||
default: InjectionKey<GroupProvide>;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["symbol"] ? any : any>;
|
||||
default: unknown extends Defaults["symbol"] ? any : any;
|
||||
};
|
||||
nextIcon: unknown extends Defaults["nextIcon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["nextIcon"] ? IconValue : Defaults["nextIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["nextIcon"] ? IconValue : Defaults["nextIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
prevIcon: unknown extends Defaults["prevIcon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["prevIcon"] ? IconValue : Defaults["prevIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["prevIcon"] ? IconValue : Defaults["prevIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
showArrows: unknown extends Defaults["showArrows"] ? {
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["showArrows"] ? string | boolean : string | boolean | Defaults["showArrows"]>;
|
||||
default: unknown extends Defaults["showArrows"] ? string | boolean : Defaults["showArrows"] | NonNullable<string | boolean>;
|
||||
};
|
||||
};
|
||||
export declare const VSlideGroup: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
mobile: boolean | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
centerActive: boolean;
|
||||
scrollToActive: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
symbol: any;
|
||||
nextIcon: IconValue;
|
||||
prevIcon: IconValue;
|
||||
} & {
|
||||
class?: any;
|
||||
mobileBreakpoint?: number | import("../../types.js").DisplayBreakpoint | undefined;
|
||||
mandatory?: "force" | boolean | undefined;
|
||||
max?: number | undefined;
|
||||
contentClass?: any;
|
||||
showArrows?: string | boolean | undefined;
|
||||
} & {}, {
|
||||
selected: import("vue").Ref<readonly string[], readonly string[]>;
|
||||
scrollTo: (location: 'prev' | 'next') => void;
|
||||
scrollOffset: import("vue").ShallowRef<number, number>;
|
||||
focus: (location?: 'next' | 'prev' | 'first' | 'last') => void;
|
||||
hasPrev: import("vue").ComputedRef<boolean>;
|
||||
hasNext: import("vue").ComputedRef<boolean>;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:modelValue': (value: any) => true;
|
||||
}, "$children" | "modelValue" | "update:modelValue" | "v-slot:default" | "v-slot:next" | "v-slot:prev" | "v-slots">, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
mobile: boolean | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
centerActive: boolean;
|
||||
scrollToActive: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
symbol: any;
|
||||
nextIcon: IconValue;
|
||||
prevIcon: IconValue;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: (arg: SlideGroupSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prev: (arg: SlideGroupSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
next: (arg: SlideGroupSlot) => 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;
|
||||
mobile: boolean | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
centerActive: boolean;
|
||||
scrollToActive: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
symbol: any;
|
||||
nextIcon: IconValue;
|
||||
prevIcon: IconValue;
|
||||
} & {
|
||||
class?: any;
|
||||
mobileBreakpoint?: number | import("../../types.js").DisplayBreakpoint | undefined;
|
||||
mandatory?: "force" | boolean | undefined;
|
||||
max?: number | undefined;
|
||||
contentClass?: any;
|
||||
showArrows?: string | boolean | undefined;
|
||||
} & {}, {
|
||||
selected: import("vue").Ref<readonly string[], readonly string[]>;
|
||||
scrollTo: (location: 'prev' | 'next') => void;
|
||||
scrollOffset: import("vue").ShallowRef<number, number>;
|
||||
focus: (location?: 'next' | 'prev' | 'first' | 'last') => void;
|
||||
hasPrev: import("vue").ComputedRef<boolean>;
|
||||
hasNext: import("vue").ComputedRef<boolean>;
|
||||
}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
mobile: boolean | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
centerActive: boolean;
|
||||
scrollToActive: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
symbol: any;
|
||||
nextIcon: IconValue;
|
||||
prevIcon: IconValue;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
mobile: boolean | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
centerActive: boolean;
|
||||
scrollToActive: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
symbol: any;
|
||||
nextIcon: IconValue;
|
||||
prevIcon: IconValue;
|
||||
} & {
|
||||
class?: any;
|
||||
mobileBreakpoint?: number | import("../../types.js").DisplayBreakpoint | undefined;
|
||||
mandatory?: "force" | boolean | undefined;
|
||||
max?: number | undefined;
|
||||
contentClass?: any;
|
||||
showArrows?: string | boolean | undefined;
|
||||
} & {}, {
|
||||
selected: import("vue").Ref<readonly string[], readonly string[]>;
|
||||
scrollTo: (location: 'prev' | 'next') => void;
|
||||
scrollOffset: import("vue").ShallowRef<number, number>;
|
||||
focus: (location?: 'next' | 'prev' | 'first' | 'last') => void;
|
||||
hasPrev: import("vue").ComputedRef<boolean>;
|
||||
hasNext: import("vue").ComputedRef<boolean>;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:modelValue': (value: any) => true;
|
||||
}, "$children" | "modelValue" | "update:modelValue" | "v-slot:default" | "v-slot:next" | "v-slot:prev" | "v-slots">, string, {
|
||||
style: import("vue").StyleValue;
|
||||
mobile: boolean | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
centerActive: boolean;
|
||||
scrollToActive: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
symbol: any;
|
||||
nextIcon: IconValue;
|
||||
prevIcon: IconValue;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: (arg: SlideGroupSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prev: (arg: SlideGroupSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
next: (arg: SlideGroupSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new <T>(props: {
|
||||
modelValue?: T;
|
||||
'onUpdate:modelValue'?: (value: T) => void;
|
||||
}, slots: VSlideGroupSlots) => GenericProps<typeof props, typeof slots>) & import("../../util/index.js").FilterPropsOptions<{
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
mobile: Omit<{
|
||||
type: PropType<boolean | null>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<boolean | null>;
|
||||
default: NonNullable<boolean | null> | null;
|
||||
};
|
||||
mobileBreakpoint: PropType<number | import("../../types.js").DisplayBreakpoint>;
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
modelValue: {
|
||||
type: null;
|
||||
default: undefined;
|
||||
};
|
||||
multiple: BooleanConstructor;
|
||||
mandatory: PropType<boolean | 'force'>;
|
||||
max: NumberConstructor;
|
||||
selectedClass: {
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
};
|
||||
disabled: BooleanConstructor;
|
||||
centerActive: BooleanConstructor;
|
||||
scrollToActive: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
contentClass: null;
|
||||
direction: {
|
||||
type: PropType<'horizontal' | 'vertical'>;
|
||||
default: string;
|
||||
};
|
||||
symbol: {
|
||||
type: null;
|
||||
default: InjectionKey<GroupProvide>;
|
||||
};
|
||||
nextIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
prevIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
showArrows: {
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
mobile: Omit<{
|
||||
type: PropType<boolean | null>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<boolean | null>;
|
||||
default: NonNullable<boolean | null> | null;
|
||||
};
|
||||
mobileBreakpoint: PropType<number | import("../../types.js").DisplayBreakpoint>;
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
modelValue: {
|
||||
type: null;
|
||||
default: undefined;
|
||||
};
|
||||
multiple: BooleanConstructor;
|
||||
mandatory: PropType<boolean | 'force'>;
|
||||
max: NumberConstructor;
|
||||
selectedClass: {
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
};
|
||||
disabled: BooleanConstructor;
|
||||
centerActive: BooleanConstructor;
|
||||
scrollToActive: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
contentClass: null;
|
||||
direction: {
|
||||
type: PropType<'horizontal' | 'vertical'>;
|
||||
default: string;
|
||||
};
|
||||
symbol: {
|
||||
type: null;
|
||||
default: InjectionKey<GroupProvide>;
|
||||
};
|
||||
nextIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
prevIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
showArrows: {
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
}>>;
|
||||
export type VSlideGroup = InstanceType<typeof VSlideGroup>;
|
||||
|
||||
+371
@@ -0,0 +1,371 @@
|
||||
import { createVNode as _createVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Styles
|
||||
import "./VSlideGroup.css";
|
||||
|
||||
// Components
|
||||
import { VFadeTransition } from "../transitions/index.js";
|
||||
import { VIcon } from "../VIcon/index.js"; // Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeDisplayProps, useDisplay } from "../../composables/display.js";
|
||||
import { useGoTo } from "../../composables/goto.js";
|
||||
import { makeGroupProps, useGroup } from "../../composables/group.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { useRtl } from "../../composables/locale.js";
|
||||
import { useResizeObserver } from "../../composables/resizeObserver.js";
|
||||
import { makeTagProps } from "../../composables/tag.js"; // Utilities
|
||||
import { computed, shallowRef, watch } from 'vue';
|
||||
import { calculateCenteredTarget, calculateUpdatedTarget, getOffsetSize, getScrollPosition, getScrollSize } from "./helpers.js";
|
||||
import { focusableChildren, genericComponent, IN_BROWSER, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const VSlideGroupSymbol = Symbol.for('vuetify:v-slide-group');
|
||||
export const makeVSlideGroupProps = propsFactory({
|
||||
centerActive: Boolean,
|
||||
scrollToActive: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
contentClass: null,
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'horizontal'
|
||||
},
|
||||
symbol: {
|
||||
type: null,
|
||||
default: VSlideGroupSymbol
|
||||
},
|
||||
nextIcon: {
|
||||
type: IconValue,
|
||||
default: '$next'
|
||||
},
|
||||
prevIcon: {
|
||||
type: IconValue,
|
||||
default: '$prev'
|
||||
},
|
||||
showArrows: {
|
||||
type: [Boolean, String],
|
||||
validator: v => typeof v === 'boolean' || ['always', 'desktop', 'mobile', 'never'].includes(v)
|
||||
},
|
||||
...makeComponentProps(),
|
||||
...makeDisplayProps({
|
||||
mobile: null
|
||||
}),
|
||||
...makeTagProps(),
|
||||
...makeGroupProps({
|
||||
selectedClass: 'v-slide-group-item--active'
|
||||
})
|
||||
}, 'VSlideGroup');
|
||||
export const VSlideGroup = genericComponent()({
|
||||
name: 'VSlideGroup',
|
||||
props: makeVSlideGroupProps(),
|
||||
emits: {
|
||||
'update:modelValue': value => true
|
||||
},
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
isRtl
|
||||
} = useRtl();
|
||||
const {
|
||||
displayClasses,
|
||||
mobile
|
||||
} = useDisplay(props);
|
||||
const group = useGroup(props, props.symbol);
|
||||
const isOverflowing = shallowRef(false);
|
||||
const scrollOffset = shallowRef(0);
|
||||
const containerSize = shallowRef(0);
|
||||
const contentSize = shallowRef(0);
|
||||
const isHorizontal = computed(() => props.direction === 'horizontal');
|
||||
const {
|
||||
resizeRef: containerRef,
|
||||
contentRect: containerRect
|
||||
} = useResizeObserver();
|
||||
const {
|
||||
resizeRef: contentRef,
|
||||
contentRect
|
||||
} = useResizeObserver();
|
||||
const goTo = useGoTo();
|
||||
const goToOptions = computed(() => {
|
||||
return {
|
||||
container: containerRef.el,
|
||||
duration: 200,
|
||||
easing: 'easeOutQuart'
|
||||
};
|
||||
});
|
||||
const firstSelectedIndex = computed(() => {
|
||||
if (!group.selected.value.length) return -1;
|
||||
return group.items.value.findIndex(item => item.id === group.selected.value[0]);
|
||||
});
|
||||
const lastSelectedIndex = computed(() => {
|
||||
if (!group.selected.value.length) return -1;
|
||||
return group.items.value.findIndex(item => item.id === group.selected.value[group.selected.value.length - 1]);
|
||||
});
|
||||
if (IN_BROWSER) {
|
||||
let frame = -1;
|
||||
watch(() => [group.selected.value, containerRect.value, contentRect.value, isHorizontal.value], () => {
|
||||
cancelAnimationFrame(frame);
|
||||
frame = requestAnimationFrame(() => {
|
||||
if (containerRect.value && contentRect.value) {
|
||||
const sizeProperty = isHorizontal.value ? 'width' : 'height';
|
||||
containerSize.value = containerRect.value[sizeProperty];
|
||||
contentSize.value = contentRect.value[sizeProperty];
|
||||
isOverflowing.value = containerSize.value + 1 < contentSize.value;
|
||||
}
|
||||
if (props.scrollToActive && firstSelectedIndex.value >= 0 && contentRef.el) {
|
||||
// TODO: Is this too naive? Should we store element references in group composable?
|
||||
const selectedElement = contentRef.el.children[lastSelectedIndex.value];
|
||||
scrollToChildren(selectedElement, props.centerActive);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
const isFocused = shallowRef(false);
|
||||
function scrollToChildren(children, center) {
|
||||
let target = 0;
|
||||
if (center) {
|
||||
target = calculateCenteredTarget({
|
||||
containerElement: containerRef.el,
|
||||
isHorizontal: isHorizontal.value,
|
||||
selectedElement: children
|
||||
});
|
||||
} else {
|
||||
target = calculateUpdatedTarget({
|
||||
containerElement: containerRef.el,
|
||||
isHorizontal: isHorizontal.value,
|
||||
isRtl: isRtl.value,
|
||||
selectedElement: children
|
||||
});
|
||||
}
|
||||
scrollToPosition(target);
|
||||
}
|
||||
function scrollToPosition(newPosition) {
|
||||
if (!IN_BROWSER || !containerRef.el) return;
|
||||
const offsetSize = getOffsetSize(isHorizontal.value, containerRef.el);
|
||||
const scrollPosition = getScrollPosition(isHorizontal.value, isRtl.value, containerRef.el);
|
||||
const scrollSize = getScrollSize(isHorizontal.value, containerRef.el);
|
||||
if (scrollSize <= offsetSize ||
|
||||
// Prevent scrolling by only a couple of pixels, which doesn't look smooth
|
||||
Math.abs(newPosition - scrollPosition) < 16) return;
|
||||
if (isHorizontal.value && isRtl.value && containerRef.el) {
|
||||
const {
|
||||
scrollWidth,
|
||||
offsetWidth: containerWidth
|
||||
} = containerRef.el;
|
||||
newPosition = scrollWidth - containerWidth - newPosition;
|
||||
}
|
||||
if (isHorizontal.value) {
|
||||
goTo.horizontal(newPosition, goToOptions.value);
|
||||
} else {
|
||||
goTo(newPosition, goToOptions.value);
|
||||
}
|
||||
}
|
||||
function onScroll(e) {
|
||||
const {
|
||||
scrollTop,
|
||||
scrollLeft
|
||||
} = e.target;
|
||||
scrollOffset.value = isHorizontal.value ? scrollLeft : scrollTop;
|
||||
}
|
||||
function onFocusin(e) {
|
||||
isFocused.value = true;
|
||||
if (!isOverflowing.value || !contentRef.el) return;
|
||||
|
||||
// Focused element is likely to be the root of an item, so a
|
||||
// breadth-first search will probably find it in the first iteration
|
||||
for (const el of e.composedPath()) {
|
||||
for (const item of contentRef.el.children) {
|
||||
if (item === el) {
|
||||
scrollToChildren(item);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function onFocusout(e) {
|
||||
isFocused.value = false;
|
||||
}
|
||||
|
||||
// Affix clicks produce onFocus that we have to ignore to avoid extra scrollToChildren
|
||||
let ignoreFocusEvent = false;
|
||||
function onFocus(e) {
|
||||
if (!ignoreFocusEvent && !isFocused.value && !(e.relatedTarget && contentRef.el?.contains(e.relatedTarget))) focus();
|
||||
ignoreFocusEvent = false;
|
||||
}
|
||||
function onFocusAffixes() {
|
||||
ignoreFocusEvent = true;
|
||||
}
|
||||
function onKeydown(e) {
|
||||
if (!contentRef.el) return;
|
||||
function toFocus(location) {
|
||||
e.preventDefault();
|
||||
focus(location);
|
||||
}
|
||||
if (isHorizontal.value) {
|
||||
if (e.key === 'ArrowRight') {
|
||||
toFocus(isRtl.value ? 'prev' : 'next');
|
||||
} else if (e.key === 'ArrowLeft') {
|
||||
toFocus(isRtl.value ? 'next' : 'prev');
|
||||
}
|
||||
} else {
|
||||
if (e.key === 'ArrowDown') {
|
||||
toFocus('next');
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
toFocus('prev');
|
||||
}
|
||||
}
|
||||
if (e.key === 'Home') {
|
||||
toFocus('first');
|
||||
} else if (e.key === 'End') {
|
||||
toFocus('last');
|
||||
}
|
||||
}
|
||||
function getSiblingElement(el, location) {
|
||||
if (!el) return undefined;
|
||||
let sibling = el;
|
||||
do {
|
||||
sibling = sibling?.[location === 'next' ? 'nextElementSibling' : 'previousElementSibling'];
|
||||
} while (sibling?.hasAttribute('disabled'));
|
||||
return sibling;
|
||||
}
|
||||
function focus(location) {
|
||||
if (!contentRef.el) return;
|
||||
let el;
|
||||
if (!location) {
|
||||
const focusable = focusableChildren(contentRef.el);
|
||||
el = focusable[0];
|
||||
} else if (location === 'next') {
|
||||
el = getSiblingElement(contentRef.el.querySelector(':focus'), location);
|
||||
if (!el) return focus('first');
|
||||
} else if (location === 'prev') {
|
||||
el = getSiblingElement(contentRef.el.querySelector(':focus'), location);
|
||||
if (!el) return focus('last');
|
||||
} else if (location === 'first') {
|
||||
el = contentRef.el.firstElementChild;
|
||||
if (el?.hasAttribute('disabled')) el = getSiblingElement(el, 'next');
|
||||
} else if (location === 'last') {
|
||||
el = contentRef.el.lastElementChild;
|
||||
if (el?.hasAttribute('disabled')) el = getSiblingElement(el, 'prev');
|
||||
}
|
||||
if (el) {
|
||||
el.focus({
|
||||
preventScroll: true
|
||||
});
|
||||
}
|
||||
}
|
||||
function scrollTo(location) {
|
||||
const direction = isHorizontal.value && isRtl.value ? -1 : 1;
|
||||
const offsetStep = (location === 'prev' ? -direction : direction) * containerSize.value;
|
||||
let newPosition = scrollOffset.value + offsetStep;
|
||||
|
||||
// TODO: improve it
|
||||
if (isHorizontal.value && isRtl.value && containerRef.el) {
|
||||
const {
|
||||
scrollWidth,
|
||||
offsetWidth: containerWidth
|
||||
} = containerRef.el;
|
||||
newPosition += scrollWidth - containerWidth;
|
||||
}
|
||||
scrollToPosition(newPosition);
|
||||
}
|
||||
const slotProps = computed(() => ({
|
||||
next: group.next,
|
||||
prev: group.prev,
|
||||
select: group.select,
|
||||
isSelected: group.isSelected
|
||||
}));
|
||||
const hasOverflowOrScroll = computed(() => isOverflowing.value || Math.abs(scrollOffset.value) > 0);
|
||||
const hasAffixes = computed(() => {
|
||||
switch (props.showArrows) {
|
||||
case 'never':
|
||||
return false;
|
||||
|
||||
// Always show arrows on desktop & mobile
|
||||
case 'always':
|
||||
return true;
|
||||
|
||||
// Always show arrows on desktop
|
||||
case 'desktop':
|
||||
return !mobile.value;
|
||||
|
||||
// Show arrows on mobile when overflowing.
|
||||
// This matches the default 2.2 behavior
|
||||
case true:
|
||||
return hasOverflowOrScroll.value;
|
||||
|
||||
// Always show on mobile
|
||||
case 'mobile':
|
||||
return mobile.value || hasOverflowOrScroll.value;
|
||||
|
||||
// https://material.io/components/tabs#scrollable-tabs
|
||||
// Always show arrows when
|
||||
// overflowed on desktop
|
||||
default:
|
||||
return !mobile.value && hasOverflowOrScroll.value;
|
||||
}
|
||||
});
|
||||
const hasPrev = computed(() => {
|
||||
// 1 pixel in reserve, may be lost after rounding
|
||||
return Math.abs(scrollOffset.value) > 1;
|
||||
});
|
||||
const hasNext = computed(() => {
|
||||
if (!hasOverflowOrScroll.value) return false;
|
||||
const scrollSizeMax = contentSize.value - containerSize.value;
|
||||
|
||||
// 1 pixel in reserve, may be lost after rounding
|
||||
return scrollSizeMax - Math.abs(scrollOffset.value) > 1;
|
||||
});
|
||||
useRender(() => _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-slide-group', {
|
||||
'v-slide-group--vertical': !isHorizontal.value,
|
||||
'v-slide-group--has-affixes': hasAffixes.value,
|
||||
'v-slide-group--is-overflowing': isOverflowing.value
|
||||
}, displayClasses.value, props.class]),
|
||||
"style": _normalizeStyle(props.style),
|
||||
"tabindex": isFocused.value || group.selected.value.length ? -1 : 0,
|
||||
"onFocus": onFocus
|
||||
}, {
|
||||
default: () => [hasAffixes.value && _createElementVNode("div", {
|
||||
"key": "prev",
|
||||
"class": _normalizeClass(['v-slide-group__prev', {
|
||||
'v-slide-group__prev--disabled': !hasPrev.value
|
||||
}]),
|
||||
"onMousedown": onFocusAffixes,
|
||||
"onClick": () => hasPrev.value && scrollTo('prev')
|
||||
}, [slots.prev?.(slotProps.value) ?? _createVNode(VFadeTransition, null, {
|
||||
default: () => [_createVNode(VIcon, {
|
||||
"icon": isRtl.value ? props.nextIcon : props.prevIcon
|
||||
}, null)]
|
||||
})]), _createElementVNode("div", {
|
||||
"key": "container",
|
||||
"ref": containerRef,
|
||||
"class": _normalizeClass(['v-slide-group__container', props.contentClass]),
|
||||
"onScroll": onScroll
|
||||
}, [_createElementVNode("div", {
|
||||
"ref": contentRef,
|
||||
"class": "v-slide-group__content",
|
||||
"onFocusin": onFocusin,
|
||||
"onFocusout": onFocusout,
|
||||
"onKeydown": onKeydown
|
||||
}, [slots.default?.(slotProps.value)])]), hasAffixes.value && _createElementVNode("div", {
|
||||
"key": "next",
|
||||
"class": _normalizeClass(['v-slide-group__next', {
|
||||
'v-slide-group__next--disabled': !hasNext.value
|
||||
}]),
|
||||
"onMousedown": onFocusAffixes,
|
||||
"onClick": () => hasNext.value && scrollTo('next')
|
||||
}, [slots.next?.(slotProps.value) ?? _createVNode(VFadeTransition, null, {
|
||||
default: () => [_createVNode(VIcon, {
|
||||
"icon": isRtl.value ? props.prevIcon : props.nextIcon
|
||||
}, null)]
|
||||
})])]
|
||||
}));
|
||||
return {
|
||||
selected: group.selected,
|
||||
scrollTo,
|
||||
scrollOffset,
|
||||
focus,
|
||||
hasPrev,
|
||||
hasNext
|
||||
};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VSlideGroup.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+61
@@ -0,0 +1,61 @@
|
||||
@use 'sass:math'
|
||||
@use 'sass:map'
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
// Block
|
||||
.v-slide-group
|
||||
display: flex
|
||||
overflow: hidden
|
||||
|
||||
// Element
|
||||
.v-slide-group__next,
|
||||
.v-slide-group__prev
|
||||
align-items: center
|
||||
display: flex
|
||||
flex: 0 1 $slide-group-prev-basis
|
||||
justify-content: center
|
||||
min-width: $slide-group-prev-basis
|
||||
cursor: pointer
|
||||
|
||||
&--disabled
|
||||
pointer-events: none
|
||||
opacity: var(--v-disabled-opacity)
|
||||
|
||||
.v-slide-group__content
|
||||
display: flex
|
||||
flex: 1 0 auto
|
||||
position: relative
|
||||
transition: 0.2s all settings.$standard-easing
|
||||
white-space: nowrap
|
||||
|
||||
> *
|
||||
white-space: initial
|
||||
|
||||
.v-slide-group__container
|
||||
contain: content
|
||||
display: flex
|
||||
flex: 1 1 auto
|
||||
overflow-x: auto
|
||||
overflow-y: hidden
|
||||
|
||||
scrollbar-width: none
|
||||
scrollbar-color: rgba(0, 0, 0, 0)
|
||||
|
||||
&::-webkit-scrollbar
|
||||
display: none
|
||||
|
||||
// Modifiers
|
||||
.v-slide-group--vertical
|
||||
max-height: inherit
|
||||
|
||||
&,
|
||||
.v-slide-group__container,
|
||||
.v-slide-group__content
|
||||
flex-direction: column
|
||||
|
||||
.v-slide-group__container
|
||||
overflow-x: hidden
|
||||
overflow-y: auto
|
||||
+182
@@ -0,0 +1,182 @@
|
||||
import type { UnwrapRef } from 'vue';
|
||||
import type { GroupItemProvide } from '../../composables/group.js';
|
||||
export declare const VSlideGroupItem: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
disabled: boolean;
|
||||
} & {
|
||||
value?: any;
|
||||
selectedClass?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: {
|
||||
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
|
||||
select: GroupItemProvide['select'];
|
||||
toggle: GroupItemProvide['toggle'];
|
||||
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: {
|
||||
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
|
||||
select: GroupItemProvide['select'];
|
||||
toggle: GroupItemProvide['toggle'];
|
||||
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
|
||||
}) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: {
|
||||
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
|
||||
select: GroupItemProvide['select'];
|
||||
toggle: GroupItemProvide['toggle'];
|
||||
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: {
|
||||
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
|
||||
select: GroupItemProvide['select'];
|
||||
toggle: GroupItemProvide['toggle'];
|
||||
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onGroup:selected"?: ((val: {
|
||||
value: boolean;
|
||||
}) => any) | undefined;
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'group:selected': (val: {
|
||||
value: boolean;
|
||||
}) => true;
|
||||
}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
disabled: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: (arg: {
|
||||
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
|
||||
select: GroupItemProvide['select'];
|
||||
toggle: GroupItemProvide['toggle'];
|
||||
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
|
||||
}) => 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: {};
|
||||
}, {
|
||||
disabled: boolean;
|
||||
} & {
|
||||
value?: any;
|
||||
selectedClass?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: {
|
||||
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
|
||||
select: GroupItemProvide['select'];
|
||||
toggle: GroupItemProvide['toggle'];
|
||||
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: {
|
||||
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
|
||||
select: GroupItemProvide['select'];
|
||||
toggle: GroupItemProvide['toggle'];
|
||||
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
|
||||
}) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: {
|
||||
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
|
||||
select: GroupItemProvide['select'];
|
||||
toggle: GroupItemProvide['toggle'];
|
||||
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: {
|
||||
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
|
||||
select: GroupItemProvide['select'];
|
||||
toggle: GroupItemProvide['toggle'];
|
||||
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onGroup:selected"?: ((val: {
|
||||
value: boolean;
|
||||
}) => any) | undefined;
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[] | undefined, {}, {}, {}, {
|
||||
disabled: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
disabled: boolean;
|
||||
} & {
|
||||
value?: any;
|
||||
selectedClass?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: {
|
||||
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
|
||||
select: GroupItemProvide['select'];
|
||||
toggle: GroupItemProvide['toggle'];
|
||||
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: {
|
||||
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
|
||||
select: GroupItemProvide['select'];
|
||||
toggle: GroupItemProvide['toggle'];
|
||||
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
|
||||
}) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: {
|
||||
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
|
||||
select: GroupItemProvide['select'];
|
||||
toggle: GroupItemProvide['toggle'];
|
||||
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: {
|
||||
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
|
||||
select: GroupItemProvide['select'];
|
||||
toggle: GroupItemProvide['toggle'];
|
||||
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onGroup:selected"?: ((val: {
|
||||
value: boolean;
|
||||
}) => any) | undefined;
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'group:selected': (val: {
|
||||
value: boolean;
|
||||
}) => true;
|
||||
}, string, {
|
||||
disabled: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: (arg: {
|
||||
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
|
||||
select: GroupItemProvide['select'];
|
||||
toggle: GroupItemProvide['toggle'];
|
||||
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
|
||||
}) => 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<{
|
||||
value: null;
|
||||
disabled: BooleanConstructor;
|
||||
selectedClass: StringConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
value: null;
|
||||
disabled: BooleanConstructor;
|
||||
selectedClass: StringConstructor;
|
||||
}>>;
|
||||
export type VSlideGroupItem = InstanceType<typeof VSlideGroupItem>;
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
// Composables
|
||||
import { makeGroupItemProps, useGroupItem } from "../../composables/group.js"; // Utilities
|
||||
import { VSlideGroupSymbol } from "./VSlideGroup.js";
|
||||
import { genericComponent } from "../../util/index.js"; // Types
|
||||
export const VSlideGroupItem = genericComponent()({
|
||||
name: 'VSlideGroupItem',
|
||||
props: makeGroupItemProps(),
|
||||
emits: {
|
||||
'group:selected': val => true
|
||||
},
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const slideGroupItem = useGroupItem(props, VSlideGroupSymbol);
|
||||
return () => slots.default?.({
|
||||
isSelected: slideGroupItem.isSelected.value,
|
||||
select: slideGroupItem.select,
|
||||
toggle: slideGroupItem.toggle,
|
||||
selectedClass: slideGroupItem.selectedClass.value
|
||||
});
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VSlideGroupItem.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VSlideGroupItem.js","names":["makeGroupItemProps","useGroupItem","VSlideGroupSymbol","genericComponent","VSlideGroupItem","name","props","emits","val","setup","slots","slideGroupItem","default","isSelected","value","select","toggle","selectedClass"],"sources":["../../../src/components/VSlideGroup/VSlideGroupItem.tsx"],"sourcesContent":["// Composables\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\n\n// Utilities\nimport { VSlideGroupSymbol } from './VSlideGroup'\nimport { genericComponent } from '@/util'\n\n// Types\nimport type { UnwrapRef } from 'vue'\nimport type { GroupItemProvide } from '@/composables/group'\n\ntype VSlideGroupItemSlots = {\n default: {\n isSelected: UnwrapRef<GroupItemProvide['isSelected']>\n select: GroupItemProvide['select']\n toggle: GroupItemProvide['toggle']\n selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>\n }\n}\n\nexport const VSlideGroupItem = genericComponent<VSlideGroupItemSlots>()({\n name: 'VSlideGroupItem',\n\n props: makeGroupItemProps(),\n\n emits: {\n 'group:selected': (val: { value: boolean }) => true,\n },\n\n setup (props, { slots }) {\n const slideGroupItem = useGroupItem(props, VSlideGroupSymbol)\n\n return () => slots.default?.({\n isSelected: slideGroupItem.isSelected.value,\n select: slideGroupItem.select,\n toggle: slideGroupItem.toggle,\n selectedClass: slideGroupItem.selectedClass.value,\n })\n },\n})\n\nexport type VSlideGroupItem = InstanceType<typeof VSlideGroupItem>\n"],"mappings":"AAAA;AAAA,SACSA,kBAAkB,EAAEC,YAAY,sCAEzC;AAAA,SACSC,iBAAiB;AAAA,SACjBC,gBAAgB,+BAEzB;AAaA,OAAO,MAAMC,eAAe,GAAGD,gBAAgB,CAAuB,CAAC,CAAC;EACtEE,IAAI,EAAE,iBAAiB;EAEvBC,KAAK,EAAEN,kBAAkB,CAAC,CAAC;EAE3BO,KAAK,EAAE;IACL,gBAAgB,EAAGC,GAAuB,IAAK;EACjD,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAE;IAAEI;EAAM,CAAC,EAAE;IACvB,MAAMC,cAAc,GAAGV,YAAY,CAACK,KAAK,EAAEJ,iBAAiB,CAAC;IAE7D,OAAO,MAAMQ,KAAK,CAACE,OAAO,GAAG;MAC3BC,UAAU,EAAEF,cAAc,CAACE,UAAU,CAACC,KAAK;MAC3CC,MAAM,EAAEJ,cAAc,CAACI,MAAM;MAC7BC,MAAM,EAAEL,cAAc,CAACK,MAAM;MAC7BC,aAAa,EAAEN,cAAc,CAACM,aAAa,CAACH;IAC9C,CAAC,CAAC;EACJ;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+1
@@ -0,0 +1 @@
|
||||
$slide-group-prev-basis: 52px !default;
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
export declare function calculateUpdatedTarget({ selectedElement, containerElement, isRtl, isHorizontal }: {
|
||||
selectedElement: HTMLElement;
|
||||
containerElement: HTMLElement;
|
||||
isRtl: boolean;
|
||||
isHorizontal: boolean;
|
||||
}): number;
|
||||
export declare function calculateCenteredTarget({ selectedElement, containerElement, isHorizontal }: {
|
||||
selectedElement: HTMLElement;
|
||||
containerElement: HTMLElement;
|
||||
isHorizontal: boolean;
|
||||
}): number;
|
||||
export declare function getScrollSize(isHorizontal: boolean, element?: HTMLElement): number;
|
||||
export declare function getScrollPosition(isHorizontal: boolean, rtl: boolean, element?: HTMLElement): number;
|
||||
export declare function getOffsetSize(isHorizontal: boolean, element?: HTMLElement): number;
|
||||
export declare function getOffsetPosition(isHorizontal: boolean, element?: HTMLElement): number;
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
export function calculateUpdatedTarget({
|
||||
selectedElement,
|
||||
containerElement,
|
||||
isRtl,
|
||||
isHorizontal
|
||||
}) {
|
||||
const containerSize = getOffsetSize(isHorizontal, containerElement);
|
||||
const scrollPosition = getScrollPosition(isHorizontal, isRtl, containerElement);
|
||||
const childrenSize = getOffsetSize(isHorizontal, selectedElement);
|
||||
const childrenStartPosition = getOffsetPosition(isHorizontal, selectedElement);
|
||||
const additionalOffset = childrenSize * 0.4;
|
||||
if (scrollPosition > childrenStartPosition) {
|
||||
return childrenStartPosition - additionalOffset;
|
||||
} else if (scrollPosition + containerSize < childrenStartPosition + childrenSize) {
|
||||
return childrenStartPosition - containerSize + childrenSize + additionalOffset;
|
||||
}
|
||||
return scrollPosition;
|
||||
}
|
||||
export function calculateCenteredTarget({
|
||||
selectedElement,
|
||||
containerElement,
|
||||
isHorizontal
|
||||
}) {
|
||||
const containerOffsetSize = getOffsetSize(isHorizontal, containerElement);
|
||||
const childrenOffsetPosition = getOffsetPosition(isHorizontal, selectedElement);
|
||||
const childrenOffsetSize = getOffsetSize(isHorizontal, selectedElement);
|
||||
return childrenOffsetPosition - containerOffsetSize / 2 + childrenOffsetSize / 2;
|
||||
}
|
||||
export function getScrollSize(isHorizontal, element) {
|
||||
const key = isHorizontal ? 'scrollWidth' : 'scrollHeight';
|
||||
return element?.[key] || 0;
|
||||
}
|
||||
export function getScrollPosition(isHorizontal, rtl, element) {
|
||||
if (!element) {
|
||||
return 0;
|
||||
}
|
||||
const {
|
||||
scrollLeft,
|
||||
offsetWidth,
|
||||
scrollWidth
|
||||
} = element;
|
||||
if (isHorizontal) {
|
||||
return rtl ? scrollWidth - offsetWidth + scrollLeft : scrollLeft;
|
||||
}
|
||||
return element.scrollTop;
|
||||
}
|
||||
export function getOffsetSize(isHorizontal, element) {
|
||||
const key = isHorizontal ? 'offsetWidth' : 'offsetHeight';
|
||||
return element?.[key] || 0;
|
||||
}
|
||||
export function getOffsetPosition(isHorizontal, element) {
|
||||
const key = isHorizontal ? 'offsetLeft' : 'offsetTop';
|
||||
return element?.[key] || 0;
|
||||
}
|
||||
//# sourceMappingURL=helpers.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"helpers.js","names":["calculateUpdatedTarget","selectedElement","containerElement","isRtl","isHorizontal","containerSize","getOffsetSize","scrollPosition","getScrollPosition","childrenSize","childrenStartPosition","getOffsetPosition","additionalOffset","calculateCenteredTarget","containerOffsetSize","childrenOffsetPosition","childrenOffsetSize","getScrollSize","element","key","rtl","scrollLeft","offsetWidth","scrollWidth","scrollTop"],"sources":["../../../src/components/VSlideGroup/helpers.ts"],"sourcesContent":["export function calculateUpdatedTarget ({\n selectedElement,\n containerElement,\n isRtl,\n isHorizontal,\n}: {\n selectedElement: HTMLElement\n containerElement: HTMLElement\n isRtl: boolean\n isHorizontal: boolean\n}): number {\n const containerSize = getOffsetSize(isHorizontal, containerElement)\n const scrollPosition = getScrollPosition(isHorizontal, isRtl, containerElement)\n\n const childrenSize = getOffsetSize(isHorizontal, selectedElement)\n const childrenStartPosition = getOffsetPosition(isHorizontal, selectedElement)\n\n const additionalOffset = childrenSize * 0.4\n\n if (scrollPosition > childrenStartPosition) {\n return childrenStartPosition - additionalOffset\n } else if (scrollPosition + containerSize < childrenStartPosition + childrenSize) {\n return childrenStartPosition - containerSize + childrenSize + additionalOffset\n }\n\n return scrollPosition\n}\n\nexport function calculateCenteredTarget ({\n selectedElement,\n containerElement,\n isHorizontal,\n}: {\n selectedElement: HTMLElement\n containerElement: HTMLElement\n isHorizontal: boolean\n}): number {\n const containerOffsetSize = getOffsetSize(isHorizontal, containerElement)\n const childrenOffsetPosition = getOffsetPosition(isHorizontal, selectedElement)\n const childrenOffsetSize = getOffsetSize(isHorizontal, selectedElement)\n\n return childrenOffsetPosition - (containerOffsetSize / 2) + (childrenOffsetSize / 2)\n}\n\nexport function getScrollSize (isHorizontal: boolean, element?: HTMLElement) {\n const key = isHorizontal ? 'scrollWidth' : 'scrollHeight'\n return element?.[key] || 0\n}\n\nexport function getScrollPosition (isHorizontal: boolean, rtl: boolean, element?: HTMLElement) {\n if (!element) {\n return 0\n }\n\n const {\n scrollLeft,\n offsetWidth,\n scrollWidth,\n } = element\n\n if (isHorizontal) {\n return rtl\n ? scrollWidth - offsetWidth + scrollLeft\n : scrollLeft\n }\n\n return element.scrollTop\n}\n\nexport function getOffsetSize (isHorizontal: boolean, element?: HTMLElement) {\n const key = isHorizontal ? 'offsetWidth' : 'offsetHeight'\n return element?.[key] || 0\n}\n\nexport function getOffsetPosition (isHorizontal: boolean, element?: HTMLElement) {\n const key = isHorizontal ? 'offsetLeft' : 'offsetTop'\n return element?.[key] || 0\n}\n"],"mappings":"AAAA,OAAO,SAASA,sBAAsBA,CAAE;EACtCC,eAAe;EACfC,gBAAgB;EAChBC,KAAK;EACLC;AAMF,CAAC,EAAU;EACT,MAAMC,aAAa,GAAGC,aAAa,CAACF,YAAY,EAAEF,gBAAgB,CAAC;EACnE,MAAMK,cAAc,GAAGC,iBAAiB,CAACJ,YAAY,EAAED,KAAK,EAAED,gBAAgB,CAAC;EAE/E,MAAMO,YAAY,GAAGH,aAAa,CAACF,YAAY,EAAEH,eAAe,CAAC;EACjE,MAAMS,qBAAqB,GAAGC,iBAAiB,CAACP,YAAY,EAAEH,eAAe,CAAC;EAE9E,MAAMW,gBAAgB,GAAGH,YAAY,GAAG,GAAG;EAE3C,IAAIF,cAAc,GAAGG,qBAAqB,EAAE;IAC1C,OAAOA,qBAAqB,GAAGE,gBAAgB;EACjD,CAAC,MAAM,IAAIL,cAAc,GAAGF,aAAa,GAAGK,qBAAqB,GAAGD,YAAY,EAAE;IAChF,OAAOC,qBAAqB,GAAGL,aAAa,GAAGI,YAAY,GAAGG,gBAAgB;EAChF;EAEA,OAAOL,cAAc;AACvB;AAEA,OAAO,SAASM,uBAAuBA,CAAE;EACvCZ,eAAe;EACfC,gBAAgB;EAChBE;AAKF,CAAC,EAAU;EACT,MAAMU,mBAAmB,GAAGR,aAAa,CAACF,YAAY,EAAEF,gBAAgB,CAAC;EACzE,MAAMa,sBAAsB,GAAGJ,iBAAiB,CAACP,YAAY,EAAEH,eAAe,CAAC;EAC/E,MAAMe,kBAAkB,GAAGV,aAAa,CAACF,YAAY,EAAEH,eAAe,CAAC;EAEvE,OAAOc,sBAAsB,GAAID,mBAAmB,GAAG,CAAE,GAAIE,kBAAkB,GAAG,CAAE;AACtF;AAEA,OAAO,SAASC,aAAaA,CAAEb,YAAqB,EAAEc,OAAqB,EAAE;EAC3E,MAAMC,GAAG,GAAGf,YAAY,GAAG,aAAa,GAAG,cAAc;EACzD,OAAOc,OAAO,GAAGC,GAAG,CAAC,IAAI,CAAC;AAC5B;AAEA,OAAO,SAASX,iBAAiBA,CAAEJ,YAAqB,EAAEgB,GAAY,EAAEF,OAAqB,EAAE;EAC7F,IAAI,CAACA,OAAO,EAAE;IACZ,OAAO,CAAC;EACV;EAEA,MAAM;IACJG,UAAU;IACVC,WAAW;IACXC;EACF,CAAC,GAAGL,OAAO;EAEX,IAAId,YAAY,EAAE;IAChB,OAAOgB,GAAG,GACNG,WAAW,GAAGD,WAAW,GAAGD,UAAU,GACtCA,UAAU;EAChB;EAEA,OAAOH,OAAO,CAACM,SAAS;AAC1B;AAEA,OAAO,SAASlB,aAAaA,CAAEF,YAAqB,EAAEc,OAAqB,EAAE;EAC3E,MAAMC,GAAG,GAAGf,YAAY,GAAG,aAAa,GAAG,cAAc;EACzD,OAAOc,OAAO,GAAGC,GAAG,CAAC,IAAI,CAAC;AAC5B;AAEA,OAAO,SAASR,iBAAiBA,CAAEP,YAAqB,EAAEc,OAAqB,EAAE;EAC/E,MAAMC,GAAG,GAAGf,YAAY,GAAG,YAAY,GAAG,WAAW;EACrD,OAAOc,OAAO,GAAGC,GAAG,CAAC,IAAI,CAAC;AAC5B","ignoreList":[]}
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VSlideGroup } from './VSlideGroup.js';
|
||||
export { VSlideGroupItem } from './VSlideGroupItem.js';
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
export { VSlideGroup } from "./VSlideGroup.js";
|
||||
export { VSlideGroupItem } from "./VSlideGroupItem.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VSlideGroup","VSlideGroupItem"],"sources":["../../../src/components/VSlideGroup/index.ts"],"sourcesContent":["export { VSlideGroup } from './VSlideGroup'\nexport { VSlideGroupItem } from './VSlideGroupItem'\n"],"mappings":"SAASA,WAAW;AAAA,SACXC,eAAe","ignoreList":[]}
|
||||
Reference in New Issue
Block a user