@yamada-ui/pagination 1.0.42-next-20241005220055 → 1.0.42
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{chunk-SUUC5YDJ.mjs → chunk-E35BXOXS.mjs} +37 -35
- package/dist/chunk-E35BXOXS.mjs.map +1 -0
- package/dist/{chunk-CDBANJFO.mjs → chunk-O6EIBNLC.mjs} +16 -16
- package/dist/chunk-O6EIBNLC.mjs.map +1 -0
- package/dist/{chunk-UK2DDH2Q.mjs → chunk-PUQ5FNCP.mjs} +26 -24
- package/dist/chunk-PUQ5FNCP.mjs.map +1 -0
- package/dist/{chunk-FAA64ZR4.mjs → chunk-VZWGYG76.mjs} +31 -21
- package/dist/chunk-VZWGYG76.mjs.map +1 -0
- package/dist/index.js +89 -75
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +4 -4
- package/dist/pagination-icon.d.mts +7 -7
- package/dist/pagination-icon.d.ts +7 -7
- package/dist/pagination-icon.js +35 -25
- package/dist/pagination-icon.js.map +1 -1
- package/dist/pagination-icon.mjs +11 -11
- package/dist/pagination-item.d.mts +9 -8
- package/dist/pagination-item.d.ts +9 -8
- package/dist/pagination-item.js +45 -33
- package/dist/pagination-item.js.map +1 -1
- package/dist/pagination-item.mjs +3 -3
- package/dist/pagination.d.mts +19 -19
- package/dist/pagination.d.ts +19 -19
- package/dist/pagination.js +89 -75
- package/dist/pagination.js.map +1 -1
- package/dist/pagination.mjs +4 -4
- package/dist/use-pagination.d.mts +22 -22
- package/dist/use-pagination.d.ts +22 -22
- package/dist/use-pagination.js +15 -15
- package/dist/use-pagination.js.map +1 -1
- package/dist/use-pagination.mjs +1 -1
- package/package.json +7 -7
- package/dist/chunk-CDBANJFO.mjs.map +0 -1
- package/dist/chunk-FAA64ZR4.mjs.map +0 -1
- package/dist/chunk-SUUC5YDJ.mjs.map +0 -1
- package/dist/chunk-UK2DDH2Q.mjs.map +0 -1
package/dist/pagination-icon.js
CHANGED
|
@@ -21,66 +21,76 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
21
21
|
// src/pagination-icon.tsx
|
|
22
22
|
var pagination_icon_exports = {};
|
|
23
23
|
__export(pagination_icon_exports, {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
24
|
+
PaginationEllipsisIcon: () => PaginationEllipsisIcon,
|
|
25
|
+
PaginationFirstIcon: () => PaginationFirstIcon,
|
|
26
|
+
PaginationLastIcon: () => PaginationLastIcon,
|
|
27
|
+
PaginationNextIcon: () => PaginationNextIcon,
|
|
28
|
+
PaginationPrevIcon: () => PaginationPrevIcon
|
|
29
29
|
});
|
|
30
30
|
module.exports = __toCommonJS(pagination_icon_exports);
|
|
31
31
|
var import_icon = require("@yamada-ui/icon");
|
|
32
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
|
-
var
|
|
33
|
+
var PaginationEllipsisIcon = (props) => {
|
|
34
34
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
35
35
|
"path",
|
|
36
36
|
{
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
d: "M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z",
|
|
38
|
+
fill: "currentColor"
|
|
39
39
|
}
|
|
40
40
|
) });
|
|
41
41
|
};
|
|
42
|
-
|
|
42
|
+
PaginationEllipsisIcon.displayName = "PaginationEllipsisIcon";
|
|
43
|
+
PaginationEllipsisIcon.__ui__ = "PaginationEllipsisIcon";
|
|
44
|
+
var PaginationFirstIcon = (props) => {
|
|
43
45
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
44
46
|
"path",
|
|
45
47
|
{
|
|
46
|
-
|
|
47
|
-
|
|
48
|
+
d: "M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z",
|
|
49
|
+
fill: "currentColor"
|
|
48
50
|
}
|
|
49
51
|
) });
|
|
50
52
|
};
|
|
51
|
-
|
|
53
|
+
PaginationFirstIcon.displayName = "PaginationFirstIcon";
|
|
54
|
+
PaginationFirstIcon.__ui__ = "PaginationFirstIcon";
|
|
55
|
+
var PaginationLastIcon = (props) => {
|
|
52
56
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
53
57
|
"path",
|
|
54
58
|
{
|
|
55
|
-
|
|
56
|
-
|
|
59
|
+
d: "M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z",
|
|
60
|
+
fill: "currentColor"
|
|
57
61
|
}
|
|
58
62
|
) });
|
|
59
63
|
};
|
|
60
|
-
|
|
64
|
+
PaginationLastIcon.displayName = "PaginationLastIcon";
|
|
65
|
+
PaginationLastIcon.__ui__ = "PaginationLastIcon";
|
|
66
|
+
var PaginationPrevIcon = (props) => {
|
|
61
67
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
62
68
|
"path",
|
|
63
69
|
{
|
|
64
|
-
|
|
65
|
-
|
|
70
|
+
d: "M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z",
|
|
71
|
+
fill: "currentColor"
|
|
66
72
|
}
|
|
67
73
|
) });
|
|
68
74
|
};
|
|
69
|
-
|
|
75
|
+
PaginationPrevIcon.displayName = "PaginationPrevIcon";
|
|
76
|
+
PaginationPrevIcon.__ui__ = "PaginationPrevIcon";
|
|
77
|
+
var PaginationNextIcon = (props) => {
|
|
70
78
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
71
79
|
"path",
|
|
72
80
|
{
|
|
73
|
-
|
|
74
|
-
|
|
81
|
+
d: "M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z",
|
|
82
|
+
fill: "currentColor"
|
|
75
83
|
}
|
|
76
84
|
) });
|
|
77
85
|
};
|
|
86
|
+
PaginationNextIcon.displayName = "PaginationNextIcon";
|
|
87
|
+
PaginationNextIcon.__ui__ = "PaginationNextIcon";
|
|
78
88
|
// Annotate the CommonJS export names for ESM import in node:
|
|
79
89
|
0 && (module.exports = {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
90
|
+
PaginationEllipsisIcon,
|
|
91
|
+
PaginationFirstIcon,
|
|
92
|
+
PaginationLastIcon,
|
|
93
|
+
PaginationNextIcon,
|
|
94
|
+
PaginationPrevIcon
|
|
85
95
|
});
|
|
86
96
|
//# sourceMappingURL=pagination-icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/pagination-icon.tsx"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"sources":["../src/pagination-icon.tsx"],"sourcesContent":["import type { FC } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\n\nexport const PaginationEllipsisIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationEllipsisIcon.displayName = \"PaginationEllipsisIcon\"\nPaginationEllipsisIcon.__ui__ = \"PaginationEllipsisIcon\"\n\nexport const PaginationFirstIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationFirstIcon.displayName = \"PaginationFirstIcon\"\nPaginationFirstIcon.__ui__ = \"PaginationFirstIcon\"\n\nexport const PaginationLastIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationLastIcon.displayName = \"PaginationLastIcon\"\nPaginationLastIcon.__ui__ = \"PaginationLastIcon\"\n\nexport const PaginationPrevIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationPrevIcon.displayName = \"PaginationPrevIcon\"\nPaginationPrevIcon.__ui__ = \"PaginationPrevIcon\"\n\nexport const PaginationNextIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationNextIcon.displayName = \"PaginationNextIcon\"\nPaginationNextIcon.__ui__ = \"PaginationNextIcon\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,kBAAqB;AAKf;AAHC,IAAM,yBAAwC,CAAC,UAAU;AAC9D,SACE,4CAAC,oBAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;AAEA,uBAAuB,cAAc;AACrC,uBAAuB,SAAS;AAEzB,IAAM,sBAAqC,CAAC,UAAU;AAC3D,SACE,4CAAC,oBAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;AAEA,oBAAoB,cAAc;AAClC,oBAAoB,SAAS;AAEtB,IAAM,qBAAoC,CAAC,UAAU;AAC1D,SACE,4CAAC,oBAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;AAEA,mBAAmB,cAAc;AACjC,mBAAmB,SAAS;AAErB,IAAM,qBAAoC,CAAC,UAAU;AAC1D,SACE,4CAAC,oBAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;AAEA,mBAAmB,cAAc;AACjC,mBAAmB,SAAS;AAErB,IAAM,qBAAoC,CAAC,UAAU;AAC1D,SACE,4CAAC,oBAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;AAEA,mBAAmB,cAAc;AACjC,mBAAmB,SAAS;","names":[]}
|
package/dist/pagination-icon.mjs
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
} from "./chunk-
|
|
3
|
+
PaginationEllipsisIcon,
|
|
4
|
+
PaginationFirstIcon,
|
|
5
|
+
PaginationLastIcon,
|
|
6
|
+
PaginationNextIcon,
|
|
7
|
+
PaginationPrevIcon
|
|
8
|
+
} from "./chunk-VZWGYG76.mjs";
|
|
9
9
|
export {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
PaginationEllipsisIcon,
|
|
11
|
+
PaginationFirstIcon,
|
|
12
|
+
PaginationLastIcon,
|
|
13
|
+
PaginationNextIcon,
|
|
14
|
+
PaginationPrevIcon
|
|
15
15
|
};
|
|
16
16
|
//# sourceMappingURL=pagination-icon.mjs.map
|
|
@@ -1,28 +1,29 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { FC } from '@yamada-ui/core';
|
|
2
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
3
|
|
|
3
4
|
interface PaginationItemOptions {
|
|
4
5
|
/**
|
|
5
6
|
* The type of the page or item assigned to the pagination item.
|
|
6
7
|
*/
|
|
7
|
-
page:
|
|
8
|
+
page: "ellipsis" | "first" | "last" | "next" | "prev" | number;
|
|
8
9
|
/**
|
|
9
|
-
* If `true`,
|
|
10
|
+
* If `true`, disable ripple effects when pressing a element.
|
|
10
11
|
*
|
|
11
12
|
* @default false
|
|
12
13
|
*/
|
|
13
|
-
|
|
14
|
+
disableRipple?: boolean;
|
|
14
15
|
/**
|
|
15
|
-
* If `true`, the pagination item will be
|
|
16
|
+
* If `true`, the pagination item will be activated.
|
|
16
17
|
*
|
|
17
18
|
* @default false
|
|
18
19
|
*/
|
|
19
|
-
|
|
20
|
+
isActive?: boolean;
|
|
20
21
|
/**
|
|
21
|
-
* If `true`,
|
|
22
|
+
* If `true`, the pagination item will be disabled.
|
|
22
23
|
*
|
|
23
24
|
* @default false
|
|
24
25
|
*/
|
|
25
|
-
|
|
26
|
+
isDisabled?: boolean;
|
|
26
27
|
}
|
|
27
28
|
interface PaginationItemProps extends ComponentPropsWithoutRef<"button">, PaginationItemOptions {
|
|
28
29
|
}
|
|
@@ -1,28 +1,29 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { FC } from '@yamada-ui/core';
|
|
2
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
3
|
|
|
3
4
|
interface PaginationItemOptions {
|
|
4
5
|
/**
|
|
5
6
|
* The type of the page or item assigned to the pagination item.
|
|
6
7
|
*/
|
|
7
|
-
page:
|
|
8
|
+
page: "ellipsis" | "first" | "last" | "next" | "prev" | number;
|
|
8
9
|
/**
|
|
9
|
-
* If `true`,
|
|
10
|
+
* If `true`, disable ripple effects when pressing a element.
|
|
10
11
|
*
|
|
11
12
|
* @default false
|
|
12
13
|
*/
|
|
13
|
-
|
|
14
|
+
disableRipple?: boolean;
|
|
14
15
|
/**
|
|
15
|
-
* If `true`, the pagination item will be
|
|
16
|
+
* If `true`, the pagination item will be activated.
|
|
16
17
|
*
|
|
17
18
|
* @default false
|
|
18
19
|
*/
|
|
19
|
-
|
|
20
|
+
isActive?: boolean;
|
|
20
21
|
/**
|
|
21
|
-
* If `true`,
|
|
22
|
+
* If `true`, the pagination item will be disabled.
|
|
22
23
|
*
|
|
23
24
|
* @default false
|
|
24
25
|
*/
|
|
25
|
-
|
|
26
|
+
isDisabled?: boolean;
|
|
26
27
|
}
|
|
27
28
|
interface PaginationItemProps extends ComponentPropsWithoutRef<"button">, PaginationItemOptions {
|
|
28
29
|
}
|
package/dist/pagination-item.js
CHANGED
|
@@ -31,51 +31,61 @@ var import_utils2 = require("@yamada-ui/utils");
|
|
|
31
31
|
// src/pagination-icon.tsx
|
|
32
32
|
var import_icon = require("@yamada-ui/icon");
|
|
33
33
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
34
|
-
var
|
|
34
|
+
var PaginationEllipsisIcon = (props) => {
|
|
35
35
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
36
36
|
"path",
|
|
37
37
|
{
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
d: "M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z",
|
|
39
|
+
fill: "currentColor"
|
|
40
40
|
}
|
|
41
41
|
) });
|
|
42
42
|
};
|
|
43
|
-
|
|
43
|
+
PaginationEllipsisIcon.displayName = "PaginationEllipsisIcon";
|
|
44
|
+
PaginationEllipsisIcon.__ui__ = "PaginationEllipsisIcon";
|
|
45
|
+
var PaginationFirstIcon = (props) => {
|
|
44
46
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
45
47
|
"path",
|
|
46
48
|
{
|
|
47
|
-
|
|
48
|
-
|
|
49
|
+
d: "M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z",
|
|
50
|
+
fill: "currentColor"
|
|
49
51
|
}
|
|
50
52
|
) });
|
|
51
53
|
};
|
|
52
|
-
|
|
54
|
+
PaginationFirstIcon.displayName = "PaginationFirstIcon";
|
|
55
|
+
PaginationFirstIcon.__ui__ = "PaginationFirstIcon";
|
|
56
|
+
var PaginationLastIcon = (props) => {
|
|
53
57
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
54
58
|
"path",
|
|
55
59
|
{
|
|
56
|
-
|
|
57
|
-
|
|
60
|
+
d: "M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z",
|
|
61
|
+
fill: "currentColor"
|
|
58
62
|
}
|
|
59
63
|
) });
|
|
60
64
|
};
|
|
61
|
-
|
|
65
|
+
PaginationLastIcon.displayName = "PaginationLastIcon";
|
|
66
|
+
PaginationLastIcon.__ui__ = "PaginationLastIcon";
|
|
67
|
+
var PaginationPrevIcon = (props) => {
|
|
62
68
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
63
69
|
"path",
|
|
64
70
|
{
|
|
65
|
-
|
|
66
|
-
|
|
71
|
+
d: "M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z",
|
|
72
|
+
fill: "currentColor"
|
|
67
73
|
}
|
|
68
74
|
) });
|
|
69
75
|
};
|
|
70
|
-
|
|
76
|
+
PaginationPrevIcon.displayName = "PaginationPrevIcon";
|
|
77
|
+
PaginationPrevIcon.__ui__ = "PaginationPrevIcon";
|
|
78
|
+
var PaginationNextIcon = (props) => {
|
|
71
79
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
72
80
|
"path",
|
|
73
81
|
{
|
|
74
|
-
|
|
75
|
-
|
|
82
|
+
d: "M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z",
|
|
83
|
+
fill: "currentColor"
|
|
76
84
|
}
|
|
77
85
|
) });
|
|
78
86
|
};
|
|
87
|
+
PaginationNextIcon.displayName = "PaginationNextIcon";
|
|
88
|
+
PaginationNextIcon.__ui__ = "PaginationNextIcon";
|
|
79
89
|
|
|
80
90
|
// src/use-pagination.ts
|
|
81
91
|
var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
|
|
@@ -83,26 +93,26 @@ var import_use_value = require("@yamada-ui/use-value");
|
|
|
83
93
|
var import_utils = require("@yamada-ui/utils");
|
|
84
94
|
var import_react = require("react");
|
|
85
95
|
var [PaginationProvider, usePaginationContext] = (0, import_utils.createContext)({
|
|
86
|
-
|
|
87
|
-
|
|
96
|
+
name: "PaginationContext",
|
|
97
|
+
errorMessage: `usePaginationContext returned is 'undefined'. Seems you forgot to wrap the components in "<Pagination />"`
|
|
88
98
|
});
|
|
89
99
|
|
|
90
100
|
// src/pagination-item.tsx
|
|
91
101
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
92
102
|
var iconMap = {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
103
|
+
ellipsis: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PaginationEllipsisIcon, {}),
|
|
104
|
+
first: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PaginationFirstIcon, {}),
|
|
105
|
+
last: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PaginationLastIcon, {}),
|
|
106
|
+
next: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PaginationNextIcon, {}),
|
|
107
|
+
prev: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PaginationPrevIcon, {})
|
|
98
108
|
};
|
|
99
109
|
var PaginationItem = ({
|
|
100
110
|
className,
|
|
111
|
+
children,
|
|
112
|
+
disableRipple,
|
|
101
113
|
isActive,
|
|
102
|
-
page,
|
|
103
114
|
isDisabled,
|
|
104
|
-
|
|
105
|
-
children,
|
|
115
|
+
page,
|
|
106
116
|
...rest
|
|
107
117
|
}) => {
|
|
108
118
|
var _a;
|
|
@@ -113,24 +123,24 @@ var PaginationItem = ({
|
|
|
113
123
|
});
|
|
114
124
|
children != null ? children : children = (_a = iconMap[page]) != null ? _a : page;
|
|
115
125
|
const css = {
|
|
116
|
-
|
|
117
|
-
overflow: "hidden",
|
|
118
|
-
userSelect: "none",
|
|
126
|
+
alignItems: "center",
|
|
119
127
|
display: "flex",
|
|
120
128
|
justifyContent: "center",
|
|
121
|
-
|
|
129
|
+
overflow: "hidden",
|
|
130
|
+
position: "relative",
|
|
131
|
+
userSelect: "none",
|
|
122
132
|
...styles.item,
|
|
123
133
|
...styles[page]
|
|
124
134
|
};
|
|
125
135
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
126
136
|
import_core.ui.button,
|
|
127
137
|
{
|
|
128
|
-
className: (0, import_utils2.cx)("ui-pagination__item", className),
|
|
129
138
|
type: "button",
|
|
130
|
-
|
|
131
|
-
disabled: isDisabled,
|
|
132
|
-
"data-selected": (0, import_utils2.dataAttr)(isActive),
|
|
139
|
+
className: (0, import_utils2.cx)("ui-pagination__item", className),
|
|
133
140
|
"data-disabled": (0, import_utils2.dataAttr)(isDisabled),
|
|
141
|
+
"data-selected": (0, import_utils2.dataAttr)(isActive),
|
|
142
|
+
disabled: isDisabled,
|
|
143
|
+
tabIndex: page !== "ellipsis" ? 0 : -1,
|
|
134
144
|
__css: css,
|
|
135
145
|
...rest,
|
|
136
146
|
onPointerDown,
|
|
@@ -141,6 +151,8 @@ var PaginationItem = ({
|
|
|
141
151
|
}
|
|
142
152
|
);
|
|
143
153
|
};
|
|
154
|
+
PaginationItem.displayName = "PaginationItem";
|
|
155
|
+
PaginationItem.__ui__ = "PaginationItem";
|
|
144
156
|
// Annotate the CommonJS export names for ESM import in node:
|
|
145
157
|
0 && (module.exports = {
|
|
146
158
|
PaginationItem
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/pagination-item.tsx","../src/pagination-icon.tsx","../src/use-pagination.ts"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport type { ComponentPropsWithoutRef, FC, ReactNode } from \"react\"\nimport {\n DotsIcon,\n FirstIcon,\n LastIcon,\n NextIcon,\n PrevIcon,\n} from \"./pagination-icon\"\nimport { usePaginationContext } from \"./use-pagination\"\n\ninterface PaginationItemOptions {\n /**\n * The type of the page or item assigned to the pagination item.\n */\n page: number | \"dots\" | \"prev\" | \"next\" | \"first\" | \"last\"\n /**\n * If `true`, the pagination item will be activated.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the pagination item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n}\n\nexport interface PaginationItemProps\n extends ComponentPropsWithoutRef<\"button\">,\n PaginationItemOptions {}\n\nconst iconMap: {\n [key in number | \"dots\" | \"prev\" | \"next\" | \"first\" | \"last\"]: ReactNode\n} = {\n dots: <DotsIcon />,\n next: <NextIcon />,\n prev: <PrevIcon />,\n first: <FirstIcon />,\n last: <LastIcon />,\n}\n\nexport const PaginationItem: FC<PaginationItemProps> = ({\n className,\n isActive,\n page,\n isDisabled,\n disableRipple,\n children,\n ...rest\n}) => {\n const styles = usePaginationContext()\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || isDisabled,\n })\n\n children ??= iconMap[page] ?? page\n\n const css: CSSUIObject = {\n position: \"relative\",\n overflow: \"hidden\",\n userSelect: \"none\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.item,\n ...styles[page],\n }\n\n return (\n <ui.button\n className={cx(\"ui-pagination__item\", className)}\n type=\"button\"\n tabIndex={page !== \"dots\" ? 0 : -1}\n disabled={isDisabled}\n data-selected={dataAttr(isActive)}\n data-disabled={dataAttr(isDisabled)}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {children}\n\n <Ripple isDisabled={disableRipple || isDisabled} {...rippleProps} />\n </ui.button>\n )\n}\n","import type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport type { FC } from \"react\"\n\nexport const DotsIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n fill=\"currentColor\"\n d=\"M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z\"\n />\n </Icon>\n )\n}\n\nexport const FirstIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n fill=\"currentColor\"\n d=\"M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z\"\n />\n </Icon>\n )\n}\n\nexport const LastIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n fill=\"currentColor\"\n d=\"M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z\"\n />\n </Icon>\n )\n}\n\nexport const PrevIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n fill=\"currentColor\"\n d=\"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z\"\n />\n </Icon>\n )\n}\n\nexport const NextIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n fill=\"currentColor\"\n d=\"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z\"\n />\n </Icon>\n )\n}\n","import type { CSSUIObject, Token } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\n\ninterface PaginationContext {\n [key: string]: CSSUIObject\n}\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n strict: false,\n name: \"PaginationContext\",\n })\n\nexport const computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport interface UsePaginationProps {\n /**\n * The page of the pagination.\n * Should be less than `total` and greater than `1`.\n */\n page?: number\n /**\n * The initial page of the pagination.\n * Should be less than `total` and greater than `1`.\n *\n * @default 1\n */\n defaultPage?: number\n /**\n * The total number of pages in pagination.\n */\n total: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: Token<number>\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: Token<number>\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * The callback invoked when the page changes.\n */\n onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n page,\n defaultPage = 1,\n total,\n siblings: _siblings = 1,\n boundaries: _boundaries = 1,\n isDisabled = false,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n\n const [currentPage, setCurrentPage] = useControllableState({\n value: page,\n defaultValue: defaultPage,\n onChange: onChangeProp,\n })\n\n const onFirst = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n const onLast = useCallback(\n () => setCurrentPage(total),\n [setCurrentPage, total],\n )\n\n const onPrev = useCallback(\n () => setCurrentPage((prev) => (prev === 1 ? prev : prev - 1)),\n [setCurrentPage],\n )\n\n const onNext = useCallback(\n () => setCurrentPage((prev) => (prev === total ? prev : prev + 1)),\n [setCurrentPage, total],\n )\n\n const onChange = useCallback(\n (page: number) => setCurrentPage(page),\n [setCurrentPage],\n )\n\n const range = useMemo((): (number | \"dots\")[] => {\n const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(currentPage - siblings, boundaries)\n const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n\n const prevDots = prevSiblings > boundaries + 2\n const nextDots = nextSiblings < total - (boundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = siblings * 2 + boundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"dots\",\n ...computedRange(total - (boundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = boundaries + 1 + 2 * siblings\n\n return [\n ...computedRange(1, boundaries),\n \"dots\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, boundaries),\n \"dots\",\n ...computedRange(prevSiblings, nextSiblings),\n \"dots\",\n ...computedRange(total - boundaries + 1, total),\n ]\n }, [boundaries, siblings, currentPage, total])\n\n return {\n currentPage,\n total,\n isDisabled,\n onFirst,\n onLast,\n onPrev,\n onNext,\n onChange,\n range,\n }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAAmB;AACnB,oBAAkC;AAClC,IAAAA,gBAA6B;;;ACF7B,kBAAqB;AAMf;AAHC,IAAM,WAA0B,CAAC,UAAU;AAChD,SACE,4CAAC,oBAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACJ,GACF;AAEJ;AAEO,IAAM,YAA2B,CAAC,UAAU;AACjD,SACE,4CAAC,oBAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACJ,GACF;AAEJ;AAEO,IAAM,WAA0B,CAAC,UAAU;AAChD,SACE,4CAAC,oBAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACJ,GACF;AAEJ;AAEO,IAAM,WAA0B,CAAC,UAAU;AAChD,SACE,4CAAC,oBAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACJ,GACF;AAEJ;AAEO,IAAM,WAA0B,CAAC,UAAU;AAChD,SACE,4CAAC,oBAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACJ,GACF;AAEJ;;;ACxDA,oCAAqC;AACrC,uBAAyB;AACzB,mBAA8B;AAC9B,mBAAqC;AAM9B,IAAM,CAAC,oBAAoB,oBAAoB,QACpD,4BAAiC;AAAA,EAC/B,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;;;AFgCK,IAAAC,sBAAA;AAHR,IAAM,UAEF;AAAA,EACF,MAAM,6CAAC,YAAS;AAAA,EAChB,MAAM,6CAAC,YAAS;AAAA,EAChB,MAAM,6CAAC,YAAS;AAAA,EAChB,OAAO,6CAAC,aAAU;AAAA,EAClB,MAAM,6CAAC,YAAS;AAClB;AAEO,IAAM,iBAA0C,CAAC;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AA7DN;AA8DE,QAAM,SAAS,qBAAqB;AACpC,QAAM,EAAE,eAAe,GAAG,YAAY,QAAI,yBAAU;AAAA,IAClD,GAAG;AAAA,IACH,YAAY,iBAAiB;AAAA,EAC/B,CAAC;AAED,4CAAa,aAAQ,IAAI,MAAZ,YAAiB;AAE9B,QAAM,MAAmB;AAAA,IACvB,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,GAAG,OAAO;AAAA,IACV,GAAG,OAAO,IAAI;AAAA,EAChB;AAEA,SACE;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC,eAAW,kBAAG,uBAAuB,SAAS;AAAA,MAC9C,MAAK;AAAA,MACL,UAAU,SAAS,SAAS,IAAI;AAAA,MAChC,UAAU;AAAA,MACV,qBAAe,wBAAS,QAAQ;AAAA,MAChC,qBAAe,wBAAS,UAAU;AAAA,MAClC,OAAO;AAAA,MACN,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA;AAAA,QAED,6CAAC,wBAAO,YAAY,iBAAiB,YAAa,GAAG,aAAa;AAAA;AAAA;AAAA,EACpE;AAEJ;","names":["import_utils","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../src/pagination-item.tsx","../src/pagination-icon.tsx","../src/use-pagination.ts"],"sourcesContent":["import type { CSSUIObject, FC } from \"@yamada-ui/core\"\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport {\n PaginationEllipsisIcon,\n PaginationFirstIcon,\n PaginationLastIcon,\n PaginationNextIcon,\n PaginationPrevIcon,\n} from \"./pagination-icon\"\nimport { usePaginationContext } from \"./use-pagination\"\n\ninterface PaginationItemOptions {\n /**\n * The type of the page or item assigned to the pagination item.\n */\n page: \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * If `true`, the pagination item will be activated.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the pagination item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport interface PaginationItemProps\n extends ComponentPropsWithoutRef<\"button\">,\n PaginationItemOptions {}\n\nconst iconMap: {\n [key in \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number]: ReactNode\n} = {\n ellipsis: <PaginationEllipsisIcon />,\n first: <PaginationFirstIcon />,\n last: <PaginationLastIcon />,\n next: <PaginationNextIcon />,\n prev: <PaginationPrevIcon />,\n}\n\nexport const PaginationItem: FC<PaginationItemProps> = ({\n className,\n children,\n disableRipple,\n isActive,\n isDisabled,\n page,\n ...rest\n}) => {\n const styles = usePaginationContext()\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || isDisabled,\n })\n\n children ??= iconMap[page] ?? page\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n ...styles.item,\n ...styles[page],\n }\n\n return (\n <ui.button\n type=\"button\"\n className={cx(\"ui-pagination__item\", className)}\n data-disabled={dataAttr(isDisabled)}\n data-selected={dataAttr(isActive)}\n disabled={isDisabled}\n tabIndex={page !== \"ellipsis\" ? 0 : -1}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {children}\n\n <Ripple isDisabled={disableRipple || isDisabled} {...rippleProps} />\n </ui.button>\n )\n}\nPaginationItem.displayName = \"PaginationItem\"\nPaginationItem.__ui__ = \"PaginationItem\"\n","import type { FC } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\n\nexport const PaginationEllipsisIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationEllipsisIcon.displayName = \"PaginationEllipsisIcon\"\nPaginationEllipsisIcon.__ui__ = \"PaginationEllipsisIcon\"\n\nexport const PaginationFirstIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationFirstIcon.displayName = \"PaginationFirstIcon\"\nPaginationFirstIcon.__ui__ = \"PaginationFirstIcon\"\n\nexport const PaginationLastIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationLastIcon.displayName = \"PaginationLastIcon\"\nPaginationLastIcon.__ui__ = \"PaginationLastIcon\"\n\nexport const PaginationPrevIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationPrevIcon.displayName = \"PaginationPrevIcon\"\nPaginationPrevIcon.__ui__ = \"PaginationPrevIcon\"\n\nexport const PaginationNextIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationNextIcon.displayName = \"PaginationNextIcon\"\nPaginationNextIcon.__ui__ = \"PaginationNextIcon\"\n","import type { CSSUIObject, Token } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\n\ninterface PaginationContext {\n [key: string]: CSSUIObject | undefined\n}\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n name: \"PaginationContext\",\n errorMessage: `usePaginationContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Pagination />\"`,\n })\n\nexport const computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport interface UsePaginationProps {\n /**\n * The total number of pages in pagination.\n */\n total: number\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: Token<number>\n /**\n * The initial page of the pagination.\n * Should be less than `total` and greater than `1`.\n *\n * @default 1\n */\n defaultPage?: number\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * The page of the pagination.\n * Should be less than `total` and greater than `1`.\n */\n page?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: Token<number>\n /**\n * The callback invoked when the page changes.\n */\n onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n boundaries: _boundaries = 1,\n defaultPage = 1,\n isDisabled = false,\n page,\n siblings: _siblings = 1,\n total,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\n })\n\n const onFirst = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n const onLast = useCallback(\n () => setCurrentPage(total),\n [setCurrentPage, total],\n )\n\n const onPrev = useCallback(\n () => setCurrentPage((prev) => (prev === 1 ? prev : prev - 1)),\n [setCurrentPage],\n )\n\n const onNext = useCallback(\n () => setCurrentPage((prev) => (prev === total ? prev : prev + 1)),\n [setCurrentPage, total],\n )\n\n const onChange = useCallback(\n (page: number) => setCurrentPage(page),\n [setCurrentPage],\n )\n\n const range = useMemo((): (\"ellipsis\" | number)[] => {\n const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(currentPage - siblings, boundaries)\n const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n\n const prevDots = prevSiblings > boundaries + 2\n const nextDots = nextSiblings < total - (boundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = siblings * 2 + boundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"ellipsis\",\n ...computedRange(total - (boundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = boundaries + 1 + 2 * siblings\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(prevSiblings, nextSiblings),\n \"ellipsis\",\n ...computedRange(total - boundaries + 1, total),\n ]\n }, [boundaries, siblings, currentPage, total])\n\n return {\n currentPage,\n isDisabled,\n range,\n total,\n onChange,\n onFirst,\n onLast,\n onNext,\n onPrev,\n }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n"],"mappings":"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","names":["import_utils","import_jsx_runtime"]}
|
package/dist/pagination-item.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
PaginationItem
|
|
4
|
-
} from "./chunk-
|
|
5
|
-
import "./chunk-
|
|
6
|
-
import "./chunk-
|
|
4
|
+
} from "./chunk-PUQ5FNCP.mjs";
|
|
5
|
+
import "./chunk-VZWGYG76.mjs";
|
|
6
|
+
import "./chunk-O6EIBNLC.mjs";
|
|
7
7
|
export {
|
|
8
8
|
PaginationItem
|
|
9
9
|
};
|
package/dist/pagination.d.mts
CHANGED
|
@@ -9,10 +9,6 @@ interface PaginationOptions {
|
|
|
9
9
|
* The pagination button component to use.
|
|
10
10
|
*/
|
|
11
11
|
component?: FC<PaginationItemProps>;
|
|
12
|
-
/**
|
|
13
|
-
* Props for button element.
|
|
14
|
-
*/
|
|
15
|
-
itemProps?: HTMLUIProps<"button">;
|
|
16
12
|
/**
|
|
17
13
|
* If `true`, display the control buttons.
|
|
18
14
|
*
|
|
@@ -20,41 +16,45 @@ interface PaginationOptions {
|
|
|
20
16
|
*/
|
|
21
17
|
withControls?: Token<boolean>;
|
|
22
18
|
/**
|
|
23
|
-
*
|
|
19
|
+
* If `true`, display the edge buttons.
|
|
20
|
+
*
|
|
21
|
+
* @default false
|
|
24
22
|
*/
|
|
25
|
-
|
|
23
|
+
withEdges?: Token<boolean>;
|
|
26
24
|
/**
|
|
27
|
-
* Props for control button element.
|
|
25
|
+
* Props for next of the control button element.
|
|
28
26
|
*/
|
|
29
|
-
|
|
27
|
+
controlNextProps?: HTMLUIProps<"button">;
|
|
30
28
|
/**
|
|
31
29
|
* Props for previous of the control button element.
|
|
32
30
|
*/
|
|
33
31
|
controlPrevProps?: HTMLUIProps<"button">;
|
|
34
32
|
/**
|
|
35
|
-
* Props for
|
|
33
|
+
* Props for control button element.
|
|
36
34
|
*/
|
|
37
|
-
|
|
35
|
+
controlProps?: HTMLUIProps<"button">;
|
|
38
36
|
/**
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
* @default false
|
|
37
|
+
* Props for first of the edge button element.
|
|
42
38
|
*/
|
|
43
|
-
|
|
39
|
+
edgeFirstProps?: HTMLUIProps<"button">;
|
|
40
|
+
/**
|
|
41
|
+
* Props for last of the edge button element.
|
|
42
|
+
*/
|
|
43
|
+
edgeLastProps?: HTMLUIProps<"button">;
|
|
44
44
|
/**
|
|
45
45
|
* Props for edge button element.
|
|
46
46
|
*/
|
|
47
47
|
edgeProps?: HTMLUIProps<"button">;
|
|
48
48
|
/**
|
|
49
|
-
* Props for
|
|
49
|
+
* Props for inner element.
|
|
50
50
|
*/
|
|
51
|
-
|
|
51
|
+
innerProps?: HTMLUIProps;
|
|
52
52
|
/**
|
|
53
|
-
* Props for
|
|
53
|
+
* Props for button element.
|
|
54
54
|
*/
|
|
55
|
-
|
|
55
|
+
itemProps?: HTMLUIProps<"button">;
|
|
56
56
|
}
|
|
57
|
-
interface PaginationProps extends Omit<HTMLUIProps, "
|
|
57
|
+
interface PaginationProps extends Omit<HTMLUIProps, "children" | "onChange" | "page">, ThemeProps<"Pagination">, UsePaginationProps, PaginationOptions {
|
|
58
58
|
}
|
|
59
59
|
/**
|
|
60
60
|
* `Pagination` is a component for managing the pagination and navigation of content.
|
package/dist/pagination.d.ts
CHANGED
|
@@ -9,10 +9,6 @@ interface PaginationOptions {
|
|
|
9
9
|
* The pagination button component to use.
|
|
10
10
|
*/
|
|
11
11
|
component?: FC<PaginationItemProps>;
|
|
12
|
-
/**
|
|
13
|
-
* Props for button element.
|
|
14
|
-
*/
|
|
15
|
-
itemProps?: HTMLUIProps<"button">;
|
|
16
12
|
/**
|
|
17
13
|
* If `true`, display the control buttons.
|
|
18
14
|
*
|
|
@@ -20,41 +16,45 @@ interface PaginationOptions {
|
|
|
20
16
|
*/
|
|
21
17
|
withControls?: Token<boolean>;
|
|
22
18
|
/**
|
|
23
|
-
*
|
|
19
|
+
* If `true`, display the edge buttons.
|
|
20
|
+
*
|
|
21
|
+
* @default false
|
|
24
22
|
*/
|
|
25
|
-
|
|
23
|
+
withEdges?: Token<boolean>;
|
|
26
24
|
/**
|
|
27
|
-
* Props for control button element.
|
|
25
|
+
* Props for next of the control button element.
|
|
28
26
|
*/
|
|
29
|
-
|
|
27
|
+
controlNextProps?: HTMLUIProps<"button">;
|
|
30
28
|
/**
|
|
31
29
|
* Props for previous of the control button element.
|
|
32
30
|
*/
|
|
33
31
|
controlPrevProps?: HTMLUIProps<"button">;
|
|
34
32
|
/**
|
|
35
|
-
* Props for
|
|
33
|
+
* Props for control button element.
|
|
36
34
|
*/
|
|
37
|
-
|
|
35
|
+
controlProps?: HTMLUIProps<"button">;
|
|
38
36
|
/**
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
* @default false
|
|
37
|
+
* Props for first of the edge button element.
|
|
42
38
|
*/
|
|
43
|
-
|
|
39
|
+
edgeFirstProps?: HTMLUIProps<"button">;
|
|
40
|
+
/**
|
|
41
|
+
* Props for last of the edge button element.
|
|
42
|
+
*/
|
|
43
|
+
edgeLastProps?: HTMLUIProps<"button">;
|
|
44
44
|
/**
|
|
45
45
|
* Props for edge button element.
|
|
46
46
|
*/
|
|
47
47
|
edgeProps?: HTMLUIProps<"button">;
|
|
48
48
|
/**
|
|
49
|
-
* Props for
|
|
49
|
+
* Props for inner element.
|
|
50
50
|
*/
|
|
51
|
-
|
|
51
|
+
innerProps?: HTMLUIProps;
|
|
52
52
|
/**
|
|
53
|
-
* Props for
|
|
53
|
+
* Props for button element.
|
|
54
54
|
*/
|
|
55
|
-
|
|
55
|
+
itemProps?: HTMLUIProps<"button">;
|
|
56
56
|
}
|
|
57
|
-
interface PaginationProps extends Omit<HTMLUIProps, "
|
|
57
|
+
interface PaginationProps extends Omit<HTMLUIProps, "children" | "onChange" | "page">, ThemeProps<"Pagination">, UsePaginationProps, PaginationOptions {
|
|
58
58
|
}
|
|
59
59
|
/**
|
|
60
60
|
* `Pagination` is a component for managing the pagination and navigation of content.
|