routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+13
@@ -0,0 +1,13 @@
|
||||
@layer vuetify-components {
|
||||
.v-pagination__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
list-style-type: none;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
.v-pagination__item, .v-pagination__first, .v-pagination__prev, .v-pagination__next, .v-pagination__last {
|
||||
margin: 0.3rem;
|
||||
}
|
||||
}
|
||||
+864
@@ -0,0 +1,864 @@
|
||||
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
type ItemSlot = {
|
||||
isActive: boolean;
|
||||
key: string | number;
|
||||
page: string;
|
||||
props: Record<string, any>;
|
||||
};
|
||||
type ControlSlot = {
|
||||
icon: IconValue;
|
||||
onClick: (e: Event) => void;
|
||||
disabled: boolean;
|
||||
'aria-label': string;
|
||||
'aria-disabled': boolean;
|
||||
};
|
||||
export type VPaginationSlots = {
|
||||
item: ItemSlot;
|
||||
first: ControlSlot;
|
||||
prev: ControlSlot;
|
||||
next: ControlSlot;
|
||||
last: ControlSlot;
|
||||
};
|
||||
export declare const makeVPaginationProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
border?: unknown;
|
||||
density?: unknown;
|
||||
elevation?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
color?: unknown;
|
||||
variant?: unknown;
|
||||
size?: unknown;
|
||||
activeColor?: unknown;
|
||||
start?: unknown;
|
||||
modelValue?: unknown;
|
||||
disabled?: unknown;
|
||||
length?: unknown;
|
||||
totalVisible?: unknown;
|
||||
firstIcon?: unknown;
|
||||
prevIcon?: unknown;
|
||||
nextIcon?: unknown;
|
||||
lastIcon?: unknown;
|
||||
ariaLabel?: unknown;
|
||||
pageAriaLabel?: unknown;
|
||||
currentPageAriaLabel?: unknown;
|
||||
firstAriaLabel?: unknown;
|
||||
previousAriaLabel?: unknown;
|
||||
nextAriaLabel?: unknown;
|
||||
lastAriaLabel?: unknown;
|
||||
ellipsis?: unknown;
|
||||
showFirstLastPage?: 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>;
|
||||
};
|
||||
border: unknown extends Defaults["border"] ? (BooleanConstructor | NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["border"] ? string | number | boolean : string | number | boolean | Defaults["border"]>;
|
||||
default: unknown extends Defaults["border"] ? string | number | boolean : Defaults["border"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | import("../../composables/density.js").Density>;
|
||||
default: unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | NonNullable<import("../../composables/density.js").Density>;
|
||||
};
|
||||
elevation: unknown extends Defaults["elevation"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["elevation"] ? string | number : string | number | Defaults["elevation"]>;
|
||||
default: unknown extends Defaults["elevation"] ? string | number : Defaults["elevation"] | NonNullable<string | number>;
|
||||
};
|
||||
rounded: unknown extends Defaults["rounded"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
|
||||
default: unknown extends Defaults["rounded"] ? string | number | boolean : Defaults["rounded"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
tile: unknown extends Defaults["tile"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
} : Omit<Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | Defaults["tag"] | import("../../util/index.js").JSXComponent>;
|
||||
default: unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : Defaults["tag"] | NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
variant: unknown extends Defaults["variant"] ? Omit<{
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
} : Omit<Omit<{
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["variant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" | Defaults["variant"]>;
|
||||
default: unknown extends Defaults["variant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : Defaults["variant"] | NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
size: unknown extends Defaults["size"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["size"] ? string | number : string | number | Defaults["size"]>;
|
||||
default: unknown extends Defaults["size"] ? string | number : Defaults["size"] | NonNullable<string | number>;
|
||||
};
|
||||
activeColor: unknown extends Defaults["activeColor"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["activeColor"] ? string : string | Defaults["activeColor"]>;
|
||||
default: unknown extends Defaults["activeColor"] ? string : string | Defaults["activeColor"];
|
||||
};
|
||||
start: unknown extends Defaults["start"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["start"] ? string | number : string | number | Defaults["start"]>;
|
||||
default: unknown extends Defaults["start"] ? string | number : Defaults["start"] | NonNullable<string | number>;
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: NumberConstructor;
|
||||
default: (props: any) => number;
|
||||
} : Omit<{
|
||||
type: NumberConstructor;
|
||||
default: (props: any) => number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["modelValue"] ? number : number | Defaults["modelValue"]>;
|
||||
default: unknown extends Defaults["modelValue"] ? number : number | Defaults["modelValue"];
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"]>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"];
|
||||
};
|
||||
length: unknown extends Defaults["length"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
validator: (val: number) => boolean;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
validator: (val: number) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["length"] ? string | number : string | number | Defaults["length"]>;
|
||||
default: unknown extends Defaults["length"] ? string | number : Defaults["length"] | NonNullable<string | number>;
|
||||
};
|
||||
totalVisible: unknown extends Defaults["totalVisible"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["totalVisible"] ? string | number : string | number | Defaults["totalVisible"]>;
|
||||
default: unknown extends Defaults["totalVisible"] ? string | number : Defaults["totalVisible"] | NonNullable<string | number>;
|
||||
};
|
||||
firstIcon: unknown extends Defaults["firstIcon"] ? {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["firstIcon"] ? IconValue : Defaults["firstIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["firstIcon"] ? IconValue : Defaults["firstIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
prevIcon: unknown extends Defaults["prevIcon"] ? {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["prevIcon"] ? IconValue : Defaults["prevIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["prevIcon"] ? IconValue : Defaults["prevIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
nextIcon: unknown extends Defaults["nextIcon"] ? {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["nextIcon"] ? IconValue : Defaults["nextIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["nextIcon"] ? IconValue : Defaults["nextIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
lastIcon: unknown extends Defaults["lastIcon"] ? {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["lastIcon"] ? IconValue : Defaults["lastIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["lastIcon"] ? IconValue : Defaults["lastIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
ariaLabel: unknown extends Defaults["ariaLabel"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["ariaLabel"] ? string : string | Defaults["ariaLabel"]>;
|
||||
default: unknown extends Defaults["ariaLabel"] ? string : string | Defaults["ariaLabel"];
|
||||
};
|
||||
pageAriaLabel: unknown extends Defaults["pageAriaLabel"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["pageAriaLabel"] ? string : string | Defaults["pageAriaLabel"]>;
|
||||
default: unknown extends Defaults["pageAriaLabel"] ? string : string | Defaults["pageAriaLabel"];
|
||||
};
|
||||
currentPageAriaLabel: unknown extends Defaults["currentPageAriaLabel"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["currentPageAriaLabel"] ? string : string | Defaults["currentPageAriaLabel"]>;
|
||||
default: unknown extends Defaults["currentPageAriaLabel"] ? string : string | Defaults["currentPageAriaLabel"];
|
||||
};
|
||||
firstAriaLabel: unknown extends Defaults["firstAriaLabel"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["firstAriaLabel"] ? string : string | Defaults["firstAriaLabel"]>;
|
||||
default: unknown extends Defaults["firstAriaLabel"] ? string : string | Defaults["firstAriaLabel"];
|
||||
};
|
||||
previousAriaLabel: unknown extends Defaults["previousAriaLabel"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["previousAriaLabel"] ? string : string | Defaults["previousAriaLabel"]>;
|
||||
default: unknown extends Defaults["previousAriaLabel"] ? string : string | Defaults["previousAriaLabel"];
|
||||
};
|
||||
nextAriaLabel: unknown extends Defaults["nextAriaLabel"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["nextAriaLabel"] ? string : string | Defaults["nextAriaLabel"]>;
|
||||
default: unknown extends Defaults["nextAriaLabel"] ? string : string | Defaults["nextAriaLabel"];
|
||||
};
|
||||
lastAriaLabel: unknown extends Defaults["lastAriaLabel"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["lastAriaLabel"] ? string : string | Defaults["lastAriaLabel"]>;
|
||||
default: unknown extends Defaults["lastAriaLabel"] ? string : string | Defaults["lastAriaLabel"];
|
||||
};
|
||||
ellipsis: unknown extends Defaults["ellipsis"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["ellipsis"] ? string : string | Defaults["ellipsis"]>;
|
||||
default: unknown extends Defaults["ellipsis"] ? string : string | Defaults["ellipsis"];
|
||||
};
|
||||
showFirstLastPage: unknown extends Defaults["showFirstLastPage"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["showFirstLastPage"] ? boolean : boolean | Defaults["showFirstLastPage"]>;
|
||||
default: unknown extends Defaults["showFirstLastPage"] ? boolean : boolean | Defaults["showFirstLastPage"];
|
||||
};
|
||||
};
|
||||
export declare const VPagination: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
size: string | number;
|
||||
start: string | number;
|
||||
modelValue: number;
|
||||
disabled: boolean;
|
||||
length: string | number;
|
||||
firstIcon: IconValue;
|
||||
prevIcon: IconValue;
|
||||
nextIcon: IconValue;
|
||||
lastIcon: IconValue;
|
||||
ariaLabel: string;
|
||||
pageAriaLabel: string;
|
||||
currentPageAriaLabel: string;
|
||||
firstAriaLabel: string;
|
||||
previousAriaLabel: string;
|
||||
nextAriaLabel: string;
|
||||
lastAriaLabel: string;
|
||||
ellipsis: string;
|
||||
showFirstLastPage: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
activeColor?: string | undefined;
|
||||
totalVisible?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
item?: ((arg: ItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
first?: ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
prev?: ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
next?: ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
last?: ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | {} | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
item?: false | ((arg: ItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
first?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
prev?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
next?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
last?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:first"?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:item"?: false | ((arg: ItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:last"?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:next"?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prev"?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
onFirst?: ((value: number) => any) | undefined;
|
||||
onLast?: ((value: number) => any) | undefined;
|
||||
onNext?: ((value: number) => any) | undefined;
|
||||
onPrev?: ((value: number) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((value: number) => any) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'update:modelValue': (value: number) => true;
|
||||
first: (value: number) => true;
|
||||
prev: (value: number) => true;
|
||||
next: (value: number) => true;
|
||||
last: (value: number) => true;
|
||||
}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
size: string | number;
|
||||
start: string | number;
|
||||
modelValue: number;
|
||||
disabled: boolean;
|
||||
length: string | number;
|
||||
firstIcon: IconValue;
|
||||
prevIcon: IconValue;
|
||||
nextIcon: IconValue;
|
||||
lastIcon: IconValue;
|
||||
ariaLabel: string;
|
||||
pageAriaLabel: string;
|
||||
currentPageAriaLabel: string;
|
||||
firstAriaLabel: string;
|
||||
previousAriaLabel: string;
|
||||
nextAriaLabel: string;
|
||||
lastAriaLabel: string;
|
||||
ellipsis: string;
|
||||
showFirstLastPage: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
item: (arg: ItemSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
first: (arg: ControlSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prev: (arg: ControlSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
next: (arg: ControlSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
last: (arg: ControlSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
size: string | number;
|
||||
start: string | number;
|
||||
modelValue: number;
|
||||
disabled: boolean;
|
||||
length: string | number;
|
||||
firstIcon: IconValue;
|
||||
prevIcon: IconValue;
|
||||
nextIcon: IconValue;
|
||||
lastIcon: IconValue;
|
||||
ariaLabel: string;
|
||||
pageAriaLabel: string;
|
||||
currentPageAriaLabel: string;
|
||||
firstAriaLabel: string;
|
||||
previousAriaLabel: string;
|
||||
nextAriaLabel: string;
|
||||
lastAriaLabel: string;
|
||||
ellipsis: string;
|
||||
showFirstLastPage: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
activeColor?: string | undefined;
|
||||
totalVisible?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
item?: ((arg: ItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
first?: ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
prev?: ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
next?: ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
last?: ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | {} | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
item?: false | ((arg: ItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
first?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
prev?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
next?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
last?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:first"?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:item"?: false | ((arg: ItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:last"?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:next"?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prev"?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
onFirst?: ((value: number) => any) | undefined;
|
||||
onLast?: ((value: number) => any) | undefined;
|
||||
onNext?: ((value: number) => any) | undefined;
|
||||
onPrev?: ((value: number) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((value: number) => any) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
size: string | number;
|
||||
start: string | number;
|
||||
modelValue: number;
|
||||
disabled: boolean;
|
||||
length: string | number;
|
||||
firstIcon: IconValue;
|
||||
prevIcon: IconValue;
|
||||
nextIcon: IconValue;
|
||||
lastIcon: IconValue;
|
||||
ariaLabel: string;
|
||||
pageAriaLabel: string;
|
||||
currentPageAriaLabel: string;
|
||||
firstAriaLabel: string;
|
||||
previousAriaLabel: string;
|
||||
nextAriaLabel: string;
|
||||
lastAriaLabel: string;
|
||||
ellipsis: string;
|
||||
showFirstLastPage: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
size: string | number;
|
||||
start: string | number;
|
||||
modelValue: number;
|
||||
disabled: boolean;
|
||||
length: string | number;
|
||||
firstIcon: IconValue;
|
||||
prevIcon: IconValue;
|
||||
nextIcon: IconValue;
|
||||
lastIcon: IconValue;
|
||||
ariaLabel: string;
|
||||
pageAriaLabel: string;
|
||||
currentPageAriaLabel: string;
|
||||
firstAriaLabel: string;
|
||||
previousAriaLabel: string;
|
||||
nextAriaLabel: string;
|
||||
lastAriaLabel: string;
|
||||
ellipsis: string;
|
||||
showFirstLastPage: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
activeColor?: string | undefined;
|
||||
totalVisible?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
item?: ((arg: ItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
first?: ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
prev?: ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
next?: ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
last?: ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | {} | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
item?: false | ((arg: ItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
first?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
prev?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
next?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
last?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:first"?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:item"?: false | ((arg: ItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:last"?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:next"?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prev"?: false | ((arg: ControlSlot) => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
onFirst?: ((value: number) => any) | undefined;
|
||||
onLast?: ((value: number) => any) | undefined;
|
||||
onNext?: ((value: number) => any) | undefined;
|
||||
onPrev?: ((value: number) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((value: number) => any) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'update:modelValue': (value: number) => true;
|
||||
first: (value: number) => true;
|
||||
prev: (value: number) => true;
|
||||
next: (value: number) => true;
|
||||
last: (value: number) => true;
|
||||
}, string, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
size: string | number;
|
||||
start: string | number;
|
||||
modelValue: number;
|
||||
disabled: boolean;
|
||||
length: string | number;
|
||||
firstIcon: IconValue;
|
||||
prevIcon: IconValue;
|
||||
nextIcon: IconValue;
|
||||
lastIcon: IconValue;
|
||||
ariaLabel: string;
|
||||
pageAriaLabel: string;
|
||||
currentPageAriaLabel: string;
|
||||
firstAriaLabel: string;
|
||||
previousAriaLabel: string;
|
||||
nextAriaLabel: string;
|
||||
lastAriaLabel: string;
|
||||
ellipsis: string;
|
||||
showFirstLastPage: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
item: (arg: ItemSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
first: (arg: ControlSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prev: (arg: ControlSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
next: (arg: ControlSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
last: (arg: ControlSlot) => 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;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
density: {
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: Omit<{
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
activeColor: StringConstructor;
|
||||
start: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
modelValue: {
|
||||
type: NumberConstructor;
|
||||
default: (props: any) => number;
|
||||
};
|
||||
disabled: BooleanConstructor;
|
||||
length: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
validator: (val: number) => boolean;
|
||||
};
|
||||
totalVisible: (NumberConstructor | StringConstructor)[];
|
||||
firstIcon: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
prevIcon: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
nextIcon: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
lastIcon: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
ariaLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
pageAriaLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
currentPageAriaLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
firstAriaLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
previousAriaLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
nextAriaLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
lastAriaLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
ellipsis: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
showFirstLastPage: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
density: {
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: Omit<{
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
activeColor: StringConstructor;
|
||||
start: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
modelValue: {
|
||||
type: NumberConstructor;
|
||||
default: (props: any) => number;
|
||||
};
|
||||
disabled: BooleanConstructor;
|
||||
length: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
validator: (val: number) => boolean;
|
||||
};
|
||||
totalVisible: (NumberConstructor | StringConstructor)[];
|
||||
firstIcon: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
prevIcon: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
nextIcon: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
lastIcon: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
ariaLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
pageAriaLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
currentPageAriaLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
firstAriaLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
previousAriaLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
nextAriaLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
lastAriaLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
ellipsis: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
showFirstLastPage: BooleanConstructor;
|
||||
}>>;
|
||||
export type VPagination = InstanceType<typeof VPagination>;
|
||||
|
||||
+339
@@ -0,0 +1,339 @@
|
||||
import { mergeProps as _mergeProps, createVNode as _createVNode, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Styles
|
||||
import "./VPagination.css";
|
||||
|
||||
// Components
|
||||
import { VBtn } from "../VBtn/index.js"; // Composables
|
||||
import { useDisplay } from "../../composables/index.js";
|
||||
import { makeBorderProps } from "../../composables/border.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { provideDefaults } from "../../composables/defaults.js";
|
||||
import { makeDensityProps } from "../../composables/density.js";
|
||||
import { makeElevationProps } from "../../composables/elevation.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { useLocale, useRtl } from "../../composables/locale.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js";
|
||||
import { useRefs } from "../../composables/refs.js";
|
||||
import { useResizeObserver } from "../../composables/resizeObserver.js";
|
||||
import { makeRoundedProps } from "../../composables/rounded.js";
|
||||
import { makeSizeProps } from "../../composables/size.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js";
|
||||
import { makeVariantProps } from "../../composables/variant.js"; // Utilities
|
||||
import { computed, nextTick, shallowRef, toRef } from 'vue';
|
||||
import { createRange, genericComponent, keyValues, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVPaginationProps = propsFactory({
|
||||
activeColor: String,
|
||||
start: {
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
},
|
||||
modelValue: {
|
||||
type: Number,
|
||||
default: props => props.start
|
||||
},
|
||||
disabled: Boolean,
|
||||
length: {
|
||||
type: [Number, String],
|
||||
default: 1,
|
||||
validator: val => val % 1 === 0
|
||||
},
|
||||
totalVisible: [Number, String],
|
||||
firstIcon: {
|
||||
type: IconValue,
|
||||
default: '$first'
|
||||
},
|
||||
prevIcon: {
|
||||
type: IconValue,
|
||||
default: '$prev'
|
||||
},
|
||||
nextIcon: {
|
||||
type: IconValue,
|
||||
default: '$next'
|
||||
},
|
||||
lastIcon: {
|
||||
type: IconValue,
|
||||
default: '$last'
|
||||
},
|
||||
ariaLabel: {
|
||||
type: String,
|
||||
default: '$vuetify.pagination.ariaLabel.root'
|
||||
},
|
||||
pageAriaLabel: {
|
||||
type: String,
|
||||
default: '$vuetify.pagination.ariaLabel.page'
|
||||
},
|
||||
currentPageAriaLabel: {
|
||||
type: String,
|
||||
default: '$vuetify.pagination.ariaLabel.currentPage'
|
||||
},
|
||||
firstAriaLabel: {
|
||||
type: String,
|
||||
default: '$vuetify.pagination.ariaLabel.first'
|
||||
},
|
||||
previousAriaLabel: {
|
||||
type: String,
|
||||
default: '$vuetify.pagination.ariaLabel.previous'
|
||||
},
|
||||
nextAriaLabel: {
|
||||
type: String,
|
||||
default: '$vuetify.pagination.ariaLabel.next'
|
||||
},
|
||||
lastAriaLabel: {
|
||||
type: String,
|
||||
default: '$vuetify.pagination.ariaLabel.last'
|
||||
},
|
||||
ellipsis: {
|
||||
type: String,
|
||||
default: '...'
|
||||
},
|
||||
showFirstLastPage: Boolean,
|
||||
...makeBorderProps(),
|
||||
...makeComponentProps(),
|
||||
...makeDensityProps(),
|
||||
...makeElevationProps(),
|
||||
...makeRoundedProps(),
|
||||
...makeSizeProps(),
|
||||
...makeTagProps({
|
||||
tag: 'nav'
|
||||
}),
|
||||
...makeThemeProps(),
|
||||
...makeVariantProps({
|
||||
variant: 'text'
|
||||
})
|
||||
}, 'VPagination');
|
||||
export const VPagination = genericComponent()({
|
||||
name: 'VPagination',
|
||||
props: makeVPaginationProps(),
|
||||
emits: {
|
||||
'update:modelValue': value => true,
|
||||
first: value => true,
|
||||
prev: value => true,
|
||||
next: value => true,
|
||||
last: value => true
|
||||
},
|
||||
setup(props, {
|
||||
slots,
|
||||
emit
|
||||
}) {
|
||||
const page = useProxiedModel(props, 'modelValue');
|
||||
const {
|
||||
t,
|
||||
n
|
||||
} = useLocale();
|
||||
const {
|
||||
isRtl
|
||||
} = useRtl();
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
width
|
||||
} = useDisplay();
|
||||
const maxButtons = shallowRef(-1);
|
||||
provideDefaults(undefined, {
|
||||
scoped: true
|
||||
});
|
||||
const {
|
||||
resizeRef
|
||||
} = useResizeObserver(entries => {
|
||||
if (!entries.length) return;
|
||||
const {
|
||||
target,
|
||||
contentRect
|
||||
} = entries[0];
|
||||
const firstItem = target.querySelector('.v-pagination__list > *');
|
||||
if (!firstItem) return;
|
||||
const totalWidth = contentRect.width;
|
||||
const itemWidth = firstItem.offsetWidth + parseFloat(getComputedStyle(firstItem).marginRight) * 2;
|
||||
maxButtons.value = getMax(totalWidth, itemWidth);
|
||||
});
|
||||
const length = computed(() => parseInt(props.length, 10));
|
||||
const start = computed(() => parseInt(props.start, 10));
|
||||
const totalVisible = computed(() => {
|
||||
if (props.totalVisible != null) return parseInt(props.totalVisible, 10);else if (maxButtons.value >= 0) return maxButtons.value;
|
||||
return getMax(width.value, 58);
|
||||
});
|
||||
function getMax(totalWidth, itemWidth) {
|
||||
const minButtons = props.showFirstLastPage ? 5 : 3;
|
||||
return Math.max(0, Math.floor(
|
||||
// Round to two decimal places to avoid floating point errors
|
||||
Number(((totalWidth - itemWidth * minButtons) / itemWidth).toFixed(2))));
|
||||
}
|
||||
const range = computed(() => {
|
||||
if (length.value <= 0 || isNaN(length.value) || length.value > Number.MAX_SAFE_INTEGER) return [];
|
||||
if (totalVisible.value <= 0) return [];else if (totalVisible.value === 1) return [page.value];
|
||||
if (length.value <= totalVisible.value) {
|
||||
return createRange(length.value, start.value);
|
||||
}
|
||||
const even = totalVisible.value % 2 === 0;
|
||||
const middle = even ? totalVisible.value / 2 : Math.floor(totalVisible.value / 2);
|
||||
const left = even ? middle : middle + 1;
|
||||
const right = length.value - middle;
|
||||
if (left - page.value >= 0) {
|
||||
return [...createRange(Math.max(1, totalVisible.value - 1), start.value), props.ellipsis, length.value];
|
||||
} else if (page.value - right >= (even ? 1 : 0)) {
|
||||
const rangeLength = totalVisible.value - 1;
|
||||
const rangeStart = length.value - rangeLength + start.value;
|
||||
return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart)];
|
||||
} else {
|
||||
const rangeLength = Math.max(1, totalVisible.value - 2);
|
||||
const rangeStart = rangeLength === 1 ? page.value : page.value - Math.ceil(rangeLength / 2) + start.value;
|
||||
return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart), props.ellipsis, length.value];
|
||||
}
|
||||
});
|
||||
|
||||
// TODO: 'first' | 'prev' | 'next' | 'last' does not work here?
|
||||
function setValue(e, value, event) {
|
||||
e.preventDefault();
|
||||
page.value = value;
|
||||
event && emit(event, value);
|
||||
}
|
||||
const {
|
||||
refs,
|
||||
updateRef
|
||||
} = useRefs();
|
||||
provideDefaults({
|
||||
VPaginationBtn: {
|
||||
color: toRef(() => props.color),
|
||||
border: toRef(() => props.border),
|
||||
density: toRef(() => props.density),
|
||||
size: toRef(() => props.size),
|
||||
variant: toRef(() => props.variant),
|
||||
rounded: toRef(() => props.rounded),
|
||||
elevation: toRef(() => props.elevation)
|
||||
}
|
||||
});
|
||||
const items = computed(() => {
|
||||
return range.value.map((item, index) => {
|
||||
const ref = e => updateRef(e, index);
|
||||
if (typeof item === 'string') {
|
||||
return {
|
||||
isActive: false,
|
||||
key: `ellipsis-${index}`,
|
||||
page: item,
|
||||
props: {
|
||||
ref,
|
||||
ellipsis: true,
|
||||
icon: true,
|
||||
disabled: true
|
||||
}
|
||||
};
|
||||
} else {
|
||||
const isActive = item === page.value;
|
||||
return {
|
||||
isActive,
|
||||
key: item,
|
||||
page: n(item),
|
||||
props: {
|
||||
ref,
|
||||
ellipsis: false,
|
||||
icon: true,
|
||||
disabled: !!props.disabled || Number(props.length) < 2,
|
||||
color: isActive ? props.activeColor : props.color,
|
||||
'aria-current': isActive,
|
||||
'aria-label': t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, item),
|
||||
onClick: e => setValue(e, item)
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
});
|
||||
const controls = computed(() => {
|
||||
const prevDisabled = !!props.disabled || page.value <= start.value;
|
||||
const nextDisabled = !!props.disabled || page.value >= start.value + length.value - 1;
|
||||
return {
|
||||
first: props.showFirstLastPage ? {
|
||||
icon: isRtl.value ? props.lastIcon : props.firstIcon,
|
||||
onClick: e => setValue(e, start.value, 'first'),
|
||||
disabled: prevDisabled,
|
||||
'aria-label': t(props.firstAriaLabel),
|
||||
'aria-disabled': prevDisabled
|
||||
} : undefined,
|
||||
prev: {
|
||||
icon: isRtl.value ? props.nextIcon : props.prevIcon,
|
||||
onClick: e => setValue(e, page.value - 1, 'prev'),
|
||||
disabled: prevDisabled,
|
||||
'aria-label': t(props.previousAriaLabel),
|
||||
'aria-disabled': prevDisabled
|
||||
},
|
||||
next: {
|
||||
icon: isRtl.value ? props.prevIcon : props.nextIcon,
|
||||
onClick: e => setValue(e, page.value + 1, 'next'),
|
||||
disabled: nextDisabled,
|
||||
'aria-label': t(props.nextAriaLabel),
|
||||
'aria-disabled': nextDisabled
|
||||
},
|
||||
last: props.showFirstLastPage ? {
|
||||
icon: isRtl.value ? props.firstIcon : props.lastIcon,
|
||||
onClick: e => setValue(e, start.value + length.value - 1, 'last'),
|
||||
disabled: nextDisabled,
|
||||
'aria-label': t(props.lastAriaLabel),
|
||||
'aria-disabled': nextDisabled
|
||||
} : undefined
|
||||
};
|
||||
});
|
||||
function updateFocus() {
|
||||
const currentIndex = page.value - start.value;
|
||||
refs.value[currentIndex]?.$el.focus();
|
||||
}
|
||||
function onKeydown(e) {
|
||||
if (e.key === keyValues.left && !props.disabled && page.value > Number(props.start)) {
|
||||
page.value = page.value - 1;
|
||||
nextTick(updateFocus);
|
||||
} else if (e.key === keyValues.right && !props.disabled && page.value < start.value + length.value - 1) {
|
||||
page.value = page.value + 1;
|
||||
nextTick(updateFocus);
|
||||
}
|
||||
}
|
||||
useRender(() => _createVNode(props.tag, {
|
||||
"ref": resizeRef,
|
||||
"class": _normalizeClass(['v-pagination', themeClasses.value, props.class]),
|
||||
"style": _normalizeStyle(props.style),
|
||||
"role": "navigation",
|
||||
"aria-label": t(props.ariaLabel),
|
||||
"onKeydown": onKeydown,
|
||||
"data-test": "v-pagination-root"
|
||||
}, {
|
||||
default: () => [_createElementVNode("ul", {
|
||||
"class": "v-pagination__list"
|
||||
}, [props.showFirstLastPage && _createElementVNode("li", {
|
||||
"key": "first",
|
||||
"class": "v-pagination__first",
|
||||
"data-test": "v-pagination-first"
|
||||
}, [slots.first ? slots.first(controls.value.first) : _createVNode(VBtn, _mergeProps({
|
||||
"_as": "VPaginationBtn"
|
||||
}, controls.value.first), null)]), _createElementVNode("li", {
|
||||
"key": "prev",
|
||||
"class": "v-pagination__prev",
|
||||
"data-test": "v-pagination-prev"
|
||||
}, [slots.prev ? slots.prev(controls.value.prev) : _createVNode(VBtn, _mergeProps({
|
||||
"_as": "VPaginationBtn"
|
||||
}, controls.value.prev), null)]), items.value.map((item, index) => _createElementVNode("li", {
|
||||
"key": item.key,
|
||||
"class": _normalizeClass(['v-pagination__item', {
|
||||
'v-pagination__item--is-active': item.isActive
|
||||
}]),
|
||||
"data-test": "v-pagination-item"
|
||||
}, [slots.item ? slots.item(item) : _createVNode(VBtn, _mergeProps({
|
||||
"_as": "VPaginationBtn"
|
||||
}, item.props), {
|
||||
default: () => [item.page]
|
||||
})])), _createElementVNode("li", {
|
||||
"key": "next",
|
||||
"class": "v-pagination__next",
|
||||
"data-test": "v-pagination-next"
|
||||
}, [slots.next ? slots.next(controls.value.next) : _createVNode(VBtn, _mergeProps({
|
||||
"_as": "VPaginationBtn"
|
||||
}, controls.value.next), null)]), props.showFirstLastPage && _createElementVNode("li", {
|
||||
"key": "last",
|
||||
"class": "v-pagination__last",
|
||||
"data-test": "v-pagination-last"
|
||||
}, [slots.last ? slots.last(controls.value.last) : _createVNode(VBtn, _mergeProps({
|
||||
"_as": "VPaginationBtn"
|
||||
}, controls.value.last), null)])])]
|
||||
}));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VPagination.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+19
@@ -0,0 +1,19 @@
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-pagination
|
||||
&__list
|
||||
margin: 0
|
||||
padding: 0
|
||||
display: inline-flex
|
||||
list-style-type: none
|
||||
justify-content: center
|
||||
width: 100%
|
||||
|
||||
&__item,
|
||||
&__first,
|
||||
&__prev,
|
||||
&__next,
|
||||
&__last
|
||||
margin: $pagination-item-margin
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
// Defaults
|
||||
$pagination-item-margin: .3rem !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VPagination } from './VPagination.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VPagination } from "./VPagination.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VPagination"],"sources":["../../../src/components/VPagination/index.ts"],"sourcesContent":["export { VPagination } from './VPagination'\n"],"mappings":"SAASA,WAAW","ignoreList":[]}
|
||||
Reference in New Issue
Block a user