@lobehub/ui 5.60.0 → 5.61.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/EmojiPicker/AvatarUploader.mjs +1 -1
- package/es/Form/components/FormSubmitFooter.mjs +1 -1
- package/es/base-ui/Input/style.d.mts +1 -1
- package/es/base-ui/Pagination/Pagination.mjs +158 -41
- package/es/base-ui/Pagination/Pagination.mjs.map +1 -1
- package/es/base-ui/Pagination/helpers.mjs +3 -3
- package/es/base-ui/Pagination/helpers.mjs.map +1 -1
- package/es/base-ui/Pagination/index.d.mts +2 -2
- package/es/base-ui/Pagination/style.mjs +39 -0
- package/es/base-ui/Pagination/style.mjs.map +1 -1
- package/es/base-ui/Pagination/type.d.mts +42 -4
- package/es/base-ui/QRCode/QRCode.mjs +1 -1
- package/es/base-ui/Table/Column.d.mts +9 -0
- package/es/base-ui/Table/Column.mjs +7 -0
- package/es/base-ui/Table/Column.mjs.map +1 -0
- package/es/base-ui/Table/ColumnGroup.d.mts +12 -0
- package/es/base-ui/Table/ColumnGroup.mjs +7 -0
- package/es/base-ui/Table/ColumnGroup.mjs.map +1 -0
- package/es/base-ui/Table/ExpandIcon.mjs +33 -0
- package/es/base-ui/Table/ExpandIcon.mjs.map +1 -0
- package/es/base-ui/Table/FilterDropdown.mjs +284 -0
- package/es/base-ui/Table/FilterDropdown.mjs.map +1 -0
- package/es/base-ui/Table/LoadingSkeleton.mjs +83 -0
- package/es/base-ui/Table/LoadingSkeleton.mjs.map +1 -0
- package/es/base-ui/Table/Table.d.mts +21 -3
- package/es/base-ui/Table/Table.mjs +444 -97
- package/es/base-ui/Table/Table.mjs.map +1 -1
- package/es/base-ui/Table/columnUtils.mjs +56 -0
- package/es/base-ui/Table/columnUtils.mjs.map +1 -0
- package/es/base-ui/Table/index.d.mts +4 -2
- package/es/base-ui/Table/selectionUtils.d.mts +9 -0
- package/es/base-ui/Table/selectionUtils.mjs +128 -0
- package/es/base-ui/Table/selectionUtils.mjs.map +1 -0
- package/es/base-ui/Table/semantic.mjs +55 -0
- package/es/base-ui/Table/semantic.mjs.map +1 -0
- package/es/base-ui/Table/style.mjs +801 -161
- package/es/base-ui/Table/style.mjs.map +1 -1
- package/es/base-ui/Table/type.d.mts +471 -37
- package/es/base-ui/Table/useBreakpoint.mjs +41 -0
- package/es/base-ui/Table/useBreakpoint.mjs.map +1 -0
- package/es/base-ui/Table/useFilter.mjs +64 -0
- package/es/base-ui/Table/useFilter.mjs.map +1 -0
- package/es/base-ui/Table/useSelection.mjs +421 -0
- package/es/base-ui/Table/useSelection.mjs.map +1 -0
- package/es/base-ui/Table/useSorter.mjs +152 -0
- package/es/base-ui/Table/useSorter.mjs.map +1 -0
- package/es/base-ui/Table/useTableState.mjs +82 -55
- package/es/base-ui/Table/useTableState.mjs.map +1 -1
- package/es/base-ui/index.d.mts +6 -4
- package/es/base-ui/index.mjs +9 -9
- package/es/chat/EditableMessageList/EditableMessageList.mjs +1 -1
- package/es/chat/MessageInput/MessageInput.mjs +1 -1
- package/es/chat/MessageModal/MessageModal.mjs +1 -1
- package/es/chat/TokenTag/TokenTag.mjs +1 -1
- package/es/i18n/resources/en/index.d.mts +3 -2
- package/es/i18n/resources/en/index.mjs +4 -2
- package/es/i18n/resources/en/index.mjs.map +1 -1
- package/es/i18n/resources/en/table.d.mts +23 -0
- package/es/i18n/resources/en/table.mjs +24 -0
- package/es/i18n/resources/en/table.mjs.map +1 -0
- package/es/i18n/resources/zhCn/index.d.mts +3 -2
- package/es/i18n/resources/zhCn/index.mjs +4 -2
- package/es/i18n/resources/zhCn/index.mjs.map +1 -1
- package/es/i18n/resources/zhCn/table.d.mts +23 -0
- package/es/i18n/resources/zhCn/table.mjs +24 -0
- package/es/i18n/resources/zhCn/table.mjs.map +1 -0
- package/es/i18n/types.d.mts +2 -1
- package/es/index.mjs +2 -2
- package/package.json +2 -2
- package/es/base-ui/Table/FilterMenu.mjs +0 -45
- package/es/base-ui/Table/FilterMenu.mjs.map +0 -1
- package/es/base-ui/Table/TableBody.mjs +0 -59
- package/es/base-ui/Table/TableBody.mjs.map +0 -1
- package/es/base-ui/Table/TableHead.mjs +0 -50
- package/es/base-ui/Table/TableHead.mjs.map +0 -1
- package/es/base-ui/Table/features.mjs +0 -12
- package/es/base-ui/Table/features.mjs.map +0 -1
- package/es/base-ui/Table/fixedOffsets.mjs +0 -29
- package/es/base-ui/Table/fixedOffsets.mjs.map +0 -1
- package/es/base-ui/Table/toColumnDefs.mjs +0 -26
- package/es/base-ui/Table/toColumnDefs.mjs.map +0 -1
|
@@ -4,9 +4,9 @@ import Center from "../Flex/Center.mjs";
|
|
|
4
4
|
import Icon from "../Icon/Icon.mjs";
|
|
5
5
|
import Text from "../Text/Text.mjs";
|
|
6
6
|
import Button from "../base-ui/Button/Button.mjs";
|
|
7
|
+
import { useTranslation } from "../i18n/useTranslation.mjs";
|
|
7
8
|
import UploadDragger from "../base-ui/Upload/UploadDragger.mjs";
|
|
8
9
|
import Tag from "../base-ui/Tag/Tag.mjs";
|
|
9
|
-
import { useTranslation } from "../i18n/useTranslation.mjs";
|
|
10
10
|
import emojiPicker_default from "../i18n/resources/en/emojiPicker.mjs";
|
|
11
11
|
import { ToastHost, toast } from "../base-ui/Toast/imperative.mjs";
|
|
12
12
|
import { memo, useCallback, useRef, useState } from "react";
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import { useMotionComponent } from "../../MotionProvider/index.mjs";
|
|
3
3
|
import FlexBasic_default from "../../Flex/FlexBasic.mjs";
|
|
4
4
|
import Icon from "../../Icon/Icon.mjs";
|
|
5
|
-
import Button$1 from "../../Button/Button.mjs";
|
|
6
5
|
import { useTranslation } from "../../i18n/useTranslation.mjs";
|
|
6
|
+
import Button$1 from "../../Button/Button.mjs";
|
|
7
7
|
import { submitFooterStyles } from "../style.mjs";
|
|
8
8
|
import form_default from "../../i18n/resources/en/form.mjs";
|
|
9
9
|
import { useFormContext } from "./FormProvider.mjs";
|
|
@@ -30,7 +30,7 @@ declare const styles: {
|
|
|
30
30
|
};
|
|
31
31
|
declare const rootVariants: (props?: ({
|
|
32
32
|
shadow?: boolean | null | undefined;
|
|
33
|
-
size?: "
|
|
33
|
+
size?: "small" | "middle" | "large" | null | undefined;
|
|
34
34
|
variant?: "filled" | "outlined" | "borderless" | null | undefined;
|
|
35
35
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
36
36
|
//#endregion
|
|
@@ -1,26 +1,46 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import Input_default from "../Input/Input.mjs";
|
|
2
3
|
import Select from "../Select/Select.mjs";
|
|
3
4
|
import { useEventCallback } from "../../hooks/useEventCallback.mjs";
|
|
4
5
|
import { clampPage, getPageCount, getPaginationItems } from "./helpers.mjs";
|
|
5
6
|
import { buttonVariants, ellipsisVariants, styles } from "./style.mjs";
|
|
6
|
-
import { memo, useEffect, useRef, useState } from "react";
|
|
7
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { memo, useEffect, useRef, useState, useSyncExternalStore } from "react";
|
|
8
|
+
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
8
9
|
import { cx } from "antd-style";
|
|
9
10
|
import useMergeState from "use-merge-value";
|
|
10
11
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
11
12
|
//#region src/base-ui/Pagination/Pagination.tsx
|
|
12
|
-
const
|
|
13
|
+
const XS_QUERY = "(max-width: 575px)";
|
|
14
|
+
const canMatchMedia = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
|
|
15
|
+
const subscribeXs = (onChange) => {
|
|
16
|
+
if (!canMatchMedia()) return () => {};
|
|
17
|
+
const query = window.matchMedia(XS_QUERY);
|
|
18
|
+
query.addEventListener?.("change", onChange);
|
|
19
|
+
return () => query.removeEventListener?.("change", onChange);
|
|
20
|
+
};
|
|
21
|
+
const getXs = () => canMatchMedia() && window.matchMedia(XS_QUERY).matches;
|
|
22
|
+
const getServerXs = () => false;
|
|
23
|
+
/** Whether the viewport is antd's `xs` breakpoint; only tracked when `enabled`. */
|
|
24
|
+
const useIsXs = (enabled) => {
|
|
25
|
+
const isXs = useSyncExternalStore(subscribeXs, getXs, getServerXs);
|
|
26
|
+
return enabled && isXs;
|
|
27
|
+
};
|
|
28
|
+
const Pagination = memo(({ align, className, classNames, components, current, defaultCurrent = 1, defaultPageSize = 10, disabled, hideOnSinglePage, itemRender, onChange, onPageSizeChange, pageSize, pageSizeOptions = [
|
|
13
29
|
10,
|
|
14
30
|
20,
|
|
15
31
|
50,
|
|
16
32
|
100
|
|
17
|
-
], ref, showSizeChanger =
|
|
33
|
+
], ref, responsive, showLessItems, showQuickJumper, showSizeChanger, showTitle = true, showTotal, simple, size: sizeProp, style, styles: customStyles, total, totalBoundaryShowSizeChanger = 50, ...rest }) => {
|
|
18
34
|
const [mergedPageSize, setMergedPageSize] = useMergeState(defaultPageSize, { value: pageSize });
|
|
19
35
|
const pageCount = getPageCount(total, mergedPageSize);
|
|
20
36
|
const [mergedCurrent, setMergedCurrent] = useMergeState(defaultCurrent, { value: current });
|
|
21
37
|
const onChangeStable = useEventCallback((nextCurrent, nextPageSize) => {
|
|
22
38
|
onChange?.(nextCurrent, nextPageSize);
|
|
23
39
|
});
|
|
40
|
+
const isXs = useIsXs(!!responsive && !sizeProp);
|
|
41
|
+
const size = sizeProp ?? (isXs ? "small" : "middle");
|
|
42
|
+
const [jumperValue, setJumperValue] = useState("");
|
|
43
|
+
const [simpleValue, setSimpleValue] = useState(null);
|
|
24
44
|
const pendingNotifyRef = useRef(null);
|
|
25
45
|
const [prevPageCount, setPrevPageCount] = useState(pageCount);
|
|
26
46
|
if (pageCount !== prevPageCount) {
|
|
@@ -56,62 +76,159 @@ const Pagination = memo(({ className, current, defaultCurrent = 1, defaultPageSi
|
|
|
56
76
|
commitCurrent(nextCurrent, nextSize);
|
|
57
77
|
onPageSizeChange?.(nextCurrent, nextSize);
|
|
58
78
|
};
|
|
59
|
-
const
|
|
79
|
+
const jump = () => {
|
|
80
|
+
const page = Number(jumperValue);
|
|
81
|
+
setJumperValue("");
|
|
82
|
+
if (jumperValue.trim() === "" || !Number.isInteger(page)) return;
|
|
83
|
+
const nextCurrent = clampPage(page, pageCount);
|
|
84
|
+
if (nextCurrent !== displayCurrent) goTo(nextCurrent);
|
|
85
|
+
};
|
|
86
|
+
const goButton = typeof showQuickJumper === "object" ? showQuickJumper.goButton : void 0;
|
|
87
|
+
const mergedShowSizeChanger = showSizeChanger ?? total > totalBoundaryShowSizeChanger;
|
|
88
|
+
const sizeChangerProps = typeof showSizeChanger === "object" ? showSizeChanger : void 0;
|
|
89
|
+
const SizeChanger = components?.sizeChanger ?? Select;
|
|
90
|
+
const jumpStep = showLessItems ? 3 : 5;
|
|
91
|
+
const items = getPaginationItems(displayCurrent, pageCount, showLessItems ? 1 : 2);
|
|
92
|
+
const render = (page, type, element) => itemRender ? itemRender(page, type, element) : element;
|
|
93
|
+
const title = (text) => showTitle ? text : void 0;
|
|
94
|
+
const iconSize = size === "small" ? 14 : 16;
|
|
95
|
+
const prevButton = /* @__PURE__ */ jsx("button", {
|
|
96
|
+
"aria-label": "Previous page",
|
|
97
|
+
className: buttonVariants({ size }),
|
|
98
|
+
disabled: disabled || displayCurrent <= 1,
|
|
99
|
+
title: title("Previous Page"),
|
|
100
|
+
type: "button",
|
|
101
|
+
onClick: () => goTo(displayCurrent - 1),
|
|
102
|
+
children: render(Math.max(1, displayCurrent - 1), "prev", /* @__PURE__ */ jsx(ChevronLeft, { size: iconSize }))
|
|
103
|
+
});
|
|
104
|
+
const nextButton = /* @__PURE__ */ jsx("button", {
|
|
105
|
+
"aria-label": "Next page",
|
|
106
|
+
className: buttonVariants({ size }),
|
|
107
|
+
disabled: disabled || displayCurrent >= pageCount,
|
|
108
|
+
title: title("Next Page"),
|
|
109
|
+
type: "button",
|
|
110
|
+
onClick: () => goTo(displayCurrent + 1),
|
|
111
|
+
children: render(Math.min(pageCount, displayCurrent + 1), "next", /* @__PURE__ */ jsx(ChevronRight, { size: iconSize }))
|
|
112
|
+
});
|
|
113
|
+
const simpleConfig = simple ? typeof simple === "object" ? simple : {} : null;
|
|
114
|
+
const commitSimple = () => {
|
|
115
|
+
if (simpleValue === null) return;
|
|
116
|
+
const page = Number(simpleValue);
|
|
117
|
+
setSimpleValue(null);
|
|
118
|
+
if (simpleValue.trim() === "" || !Number.isInteger(page)) return;
|
|
119
|
+
const nextCurrent = clampPage(page, pageCount);
|
|
120
|
+
if (nextCurrent !== displayCurrent) goTo(nextCurrent);
|
|
121
|
+
};
|
|
60
122
|
const rangeStart = total === 0 ? 0 : (displayCurrent - 1) * mergedPageSize + 1;
|
|
61
123
|
const rangeEnd = Math.min(displayCurrent * mergedPageSize, total);
|
|
62
124
|
return /* @__PURE__ */ jsxs("nav", {
|
|
63
125
|
"aria-label": "Pagination",
|
|
64
|
-
className: cx(styles.root, className),
|
|
65
126
|
ref,
|
|
66
127
|
role: "navigation",
|
|
67
|
-
style
|
|
128
|
+
style: {
|
|
129
|
+
...customStyles?.root,
|
|
130
|
+
...style
|
|
131
|
+
},
|
|
132
|
+
className: cx(styles.root, align && styles.aligned, align && styles[align], classNames?.root, className),
|
|
68
133
|
...rest,
|
|
69
134
|
children: [
|
|
70
135
|
showTotal && /* @__PURE__ */ jsx("span", {
|
|
71
136
|
className: styles.total,
|
|
72
137
|
children: showTotal(total, [rangeStart, rangeEnd])
|
|
73
138
|
}),
|
|
74
|
-
/* @__PURE__ */
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
}),
|
|
101
|
-
|
|
139
|
+
simpleConfig ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
140
|
+
prevButton,
|
|
141
|
+
/* @__PURE__ */ jsxs("span", {
|
|
142
|
+
className: styles.simplePager,
|
|
143
|
+
title: title(`${displayCurrent}/${pageCount}`),
|
|
144
|
+
children: [
|
|
145
|
+
simpleConfig.readOnly ? displayCurrent : /* @__PURE__ */ jsx(Input_default, {
|
|
146
|
+
"aria-label": "Current page",
|
|
147
|
+
className: styles.jumperInput,
|
|
148
|
+
disabled,
|
|
149
|
+
size: size === "small" ? "small" : "middle",
|
|
150
|
+
value: simpleValue ?? String(displayCurrent),
|
|
151
|
+
onBlur: commitSimple,
|
|
152
|
+
onChange: (event) => setSimpleValue(event.currentTarget.value),
|
|
153
|
+
onKeyUp: (event) => {
|
|
154
|
+
if (event.key === "Enter") commitSimple();
|
|
155
|
+
}
|
|
156
|
+
}),
|
|
157
|
+
/* @__PURE__ */ jsx("span", {
|
|
158
|
+
className: styles.simpleSlash,
|
|
159
|
+
children: "/"
|
|
160
|
+
}),
|
|
161
|
+
pageCount
|
|
162
|
+
]
|
|
163
|
+
}),
|
|
164
|
+
nextButton
|
|
165
|
+
] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
166
|
+
prevButton,
|
|
167
|
+
items.map((item) => typeof item === "number" ? /* @__PURE__ */ jsx("button", {
|
|
168
|
+
"aria-current": item === displayCurrent ? "page" : void 0,
|
|
169
|
+
className: cx(buttonVariants({ size }), classNames?.item),
|
|
170
|
+
disabled,
|
|
171
|
+
style: customStyles?.item,
|
|
172
|
+
title: title(String(item)),
|
|
173
|
+
type: "button",
|
|
174
|
+
onClick: () => goTo(item),
|
|
175
|
+
children: render(item, "page", item)
|
|
176
|
+
}, item) : /* @__PURE__ */ jsx("span", {
|
|
177
|
+
className: ellipsisVariants({ size }),
|
|
178
|
+
title: title(item === "ellipsis-prev" ? `Previous ${jumpStep} Pages` : `Next ${jumpStep} Pages`),
|
|
179
|
+
children: item === "ellipsis-prev" ? render(Math.max(1, displayCurrent - jumpStep), "jump-prev", "···") : render(Math.min(pageCount, displayCurrent + jumpStep), "jump-next", "···")
|
|
180
|
+
}, item)),
|
|
181
|
+
nextButton
|
|
182
|
+
] }),
|
|
183
|
+
!simpleConfig && mergedShowSizeChanger && /* @__PURE__ */ jsx(SizeChanger, {
|
|
102
184
|
disabled,
|
|
103
185
|
size: size === "small" ? "small" : "middle",
|
|
104
|
-
|
|
105
|
-
flex: "none",
|
|
106
|
-
marginInlineStart: 8,
|
|
107
|
-
width: "auto"
|
|
108
|
-
},
|
|
186
|
+
...sizeChangerProps,
|
|
109
187
|
value: String(mergedPageSize),
|
|
110
188
|
options: pageSizeOptions.map((option) => ({
|
|
111
189
|
label: `${option} / page`,
|
|
112
190
|
value: String(option)
|
|
113
191
|
})),
|
|
114
|
-
|
|
192
|
+
style: {
|
|
193
|
+
flex: "none",
|
|
194
|
+
marginInlineStart: 8,
|
|
195
|
+
width: "auto",
|
|
196
|
+
...sizeChangerProps?.style
|
|
197
|
+
},
|
|
198
|
+
onChange: (value) => {
|
|
199
|
+
handlePageSizeChange(value);
|
|
200
|
+
sizeChangerProps?.onChange?.(value);
|
|
201
|
+
}
|
|
202
|
+
}),
|
|
203
|
+
!simpleConfig && showQuickJumper && /* @__PURE__ */ jsxs("span", {
|
|
204
|
+
className: styles.jumper,
|
|
205
|
+
children: [
|
|
206
|
+
"Go to",
|
|
207
|
+
/* @__PURE__ */ jsx(Input_default, {
|
|
208
|
+
"aria-label": "Go to page",
|
|
209
|
+
className: styles.jumperInput,
|
|
210
|
+
disabled,
|
|
211
|
+
size: size === "small" ? "small" : "middle",
|
|
212
|
+
value: jumperValue,
|
|
213
|
+
onChange: (event) => setJumperValue(event.currentTarget.value),
|
|
214
|
+
onBlur: () => {
|
|
215
|
+
if (!goButton) jump();
|
|
216
|
+
},
|
|
217
|
+
onKeyUp: (event) => {
|
|
218
|
+
if (event.key === "Enter") jump();
|
|
219
|
+
}
|
|
220
|
+
}),
|
|
221
|
+
goButton === true || typeof goButton === "string" ? /* @__PURE__ */ jsx("button", {
|
|
222
|
+
className: buttonVariants({ size }),
|
|
223
|
+
disabled,
|
|
224
|
+
type: "button",
|
|
225
|
+
onClick: jump,
|
|
226
|
+
children: goButton === true ? "Go" : goButton
|
|
227
|
+
}) : goButton ? /* @__PURE__ */ jsx("span", {
|
|
228
|
+
onClick: jump,
|
|
229
|
+
children: goButton
|
|
230
|
+
}) : "Page"
|
|
231
|
+
]
|
|
115
232
|
})
|
|
116
233
|
]
|
|
117
234
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.mjs","names":["useControlledState"],"sources":["../../../src/base-ui/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { memo, useEffect, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport Select from '@/base-ui/Select';\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport { clampPage, getPageCount, getPaginationItems } from './helpers';\nimport { buttonVariants, ellipsisVariants, styles } from './style';\nimport type { PaginationProps } from './type';\n\nconst Pagination = memo<PaginationProps>(\n ({\n className,\n current,\n defaultCurrent = 1,\n defaultPageSize = 10,\n disabled,\n hideOnSinglePage,\n onChange,\n onPageSizeChange,\n pageSize,\n pageSizeOptions = [10, 20, 50, 100],\n ref,\n showSizeChanger = false,\n showTotal,\n size = 'middle',\n style,\n total,\n ...rest\n }) => {\n const [mergedPageSize, setMergedPageSize] = useControlledState(defaultPageSize, {\n value: pageSize,\n });\n const pageCount = getPageCount(total, mergedPageSize);\n const [mergedCurrent, setMergedCurrent] = useControlledState(defaultCurrent, {\n value: current,\n });\n const onChangeStable = useEventCallback((nextCurrent: number, nextPageSize: number) => {\n onChange?.(nextCurrent, nextPageSize);\n });\n\n const pendingNotifyRef = useRef<{ current: number; pageSize: number } | null>(null);\n const [prevPageCount, setPrevPageCount] = useState(pageCount);\n\n if (pageCount !== prevPageCount) {\n setPrevPageCount(pageCount);\n\n if (mergedCurrent > pageCount && pageCount >= 1) {\n setMergedCurrent(pageCount);\n pendingNotifyRef.current = { current: pageCount, pageSize: mergedPageSize };\n }\n }\n\n useEffect(() => {\n if (!pendingNotifyRef.current) return;\n\n const { current: nextCurrent, pageSize: nextPageSize } = pendingNotifyRef.current;\n pendingNotifyRef.current = null;\n onChangeStable(nextCurrent, nextPageSize);\n });\n\n const displayCurrent = clampPage(mergedCurrent, pageCount);\n\n if (hideOnSinglePage && pageCount <= 1) return null;\n\n const commitCurrent = (nextCurrent: number, nextPageSize: number) => {\n setMergedCurrent(nextCurrent);\n onChange?.(nextCurrent, nextPageSize);\n };\n\n const goTo = (page: number) => {\n commitCurrent(clampPage(page, pageCount), mergedPageSize);\n };\n\n const handlePageSizeChange = (value: string) => {\n const nextSize = Number(value);\n const nextPageCount = getPageCount(total, nextSize);\n const nextCurrent = clampPage(displayCurrent, nextPageCount);\n\n setMergedPageSize(nextSize);\n commitCurrent(nextCurrent, nextSize);\n onPageSizeChange?.(nextCurrent, nextSize);\n };\n\n const items = getPaginationItems(displayCurrent, pageCount);\n const rangeStart = total === 0 ? 0 : (displayCurrent - 1) * mergedPageSize + 1;\n const rangeEnd = Math.min(displayCurrent * mergedPageSize, total);\n\n return (\n <nav\n aria-label=\"Pagination\"\n className={cx(styles.root, className)}\n ref={ref}\n role=\"navigation\"\n style={style}\n {...rest}\n >\n {showTotal && (\n <span className={styles.total}>{showTotal(total, [rangeStart, rangeEnd])}</span>\n )}\n <button\n aria-label=\"Previous page\"\n className={buttonVariants({ size })}\n disabled={disabled || displayCurrent <= 1}\n type=\"button\"\n onClick={() => goTo(displayCurrent - 1)}\n >\n <ChevronLeft size={size === 'small' ? 14 : 16} />\n </button>\n {items.map((item) =>\n typeof item === 'number' ? (\n <button\n aria-current={item === displayCurrent ? 'page' : undefined}\n className={buttonVariants({ size })}\n disabled={disabled}\n key={item}\n type=\"button\"\n onClick={() => goTo(item)}\n >\n {item}\n </button>\n ) : (\n <span className={ellipsisVariants({ size })} key={item}>\n ···\n </span>\n ),\n )}\n <button\n aria-label=\"Next page\"\n className={buttonVariants({ size })}\n disabled={disabled || displayCurrent >= pageCount}\n type=\"button\"\n onClick={() => goTo(displayCurrent + 1)}\n >\n <ChevronRight size={size === 'small' ? 14 : 16} />\n </button>\n {showSizeChanger && (\n <Select\n disabled={disabled}\n size={size === 'small' ? 'small' : 'middle'}\n style={{ flex: 'none', marginInlineStart: 8, width: 'auto' }}\n value={String(mergedPageSize)}\n options={pageSizeOptions.map((option) => ({\n label: `${option} / page`,\n value: String(option),\n }))}\n onChange={handlePageSizeChange}\n />\n )}\n </nav>\n );\n },\n);\n\nPagination.displayName = 'Pagination';\n\nexport default Pagination;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Pagination.mjs","names":["useControlledState","Input"],"sources":["../../../src/base-ui/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport {\n type KeyboardEvent,\n memo,\n type ReactNode,\n useEffect,\n useRef,\n useState,\n useSyncExternalStore,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Input } from '@/base-ui/Input';\nimport Select from '@/base-ui/Select';\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport { clampPage, getPageCount, getPaginationItems } from './helpers';\nimport { buttonVariants, ellipsisVariants, styles } from './style';\nimport type { PaginationItemType, PaginationProps } from './type';\n\nconst XS_QUERY = '(max-width: 575px)';\n\nconst canMatchMedia = () =>\n typeof window !== 'undefined' && typeof window.matchMedia === 'function';\n\nconst subscribeXs = (onChange: () => void) => {\n if (!canMatchMedia()) return () => {};\n const query = window.matchMedia(XS_QUERY);\n query.addEventListener?.('change', onChange);\n return () => query.removeEventListener?.('change', onChange);\n};\nconst getXs = () => canMatchMedia() && window.matchMedia(XS_QUERY).matches;\nconst getServerXs = () => false;\n\n/** Whether the viewport is antd's `xs` breakpoint; only tracked when `enabled`. */\nconst useIsXs = (enabled: boolean) => {\n const isXs = useSyncExternalStore(subscribeXs, getXs, getServerXs);\n return enabled && isXs;\n};\n\nconst Pagination = memo<PaginationProps>(\n ({\n align,\n className,\n classNames,\n components,\n current,\n defaultCurrent = 1,\n defaultPageSize = 10,\n disabled,\n hideOnSinglePage,\n itemRender,\n onChange,\n onPageSizeChange,\n pageSize,\n pageSizeOptions = [10, 20, 50, 100],\n ref,\n responsive,\n showLessItems,\n showQuickJumper,\n showSizeChanger,\n showTitle = true,\n showTotal,\n simple,\n size: sizeProp,\n style,\n styles: customStyles,\n total,\n totalBoundaryShowSizeChanger = 50,\n ...rest\n }) => {\n const [mergedPageSize, setMergedPageSize] = useControlledState(defaultPageSize, {\n value: pageSize,\n });\n const pageCount = getPageCount(total, mergedPageSize);\n const [mergedCurrent, setMergedCurrent] = useControlledState(defaultCurrent, {\n value: current,\n });\n const onChangeStable = useEventCallback((nextCurrent: number, nextPageSize: number) => {\n onChange?.(nextCurrent, nextPageSize);\n });\n\n const isXs = useIsXs(!!responsive && !sizeProp);\n const size = sizeProp ?? (isXs ? 'small' : 'middle');\n\n const [jumperValue, setJumperValue] = useState('');\n const [simpleValue, setSimpleValue] = useState<string | null>(null);\n const pendingNotifyRef = useRef<{ current: number; pageSize: number } | null>(null);\n const [prevPageCount, setPrevPageCount] = useState(pageCount);\n\n if (pageCount !== prevPageCount) {\n setPrevPageCount(pageCount);\n\n if (mergedCurrent > pageCount && pageCount >= 1) {\n setMergedCurrent(pageCount);\n pendingNotifyRef.current = { current: pageCount, pageSize: mergedPageSize };\n }\n }\n\n useEffect(() => {\n if (!pendingNotifyRef.current) return;\n\n const { current: nextCurrent, pageSize: nextPageSize } = pendingNotifyRef.current;\n pendingNotifyRef.current = null;\n onChangeStable(nextCurrent, nextPageSize);\n });\n\n const displayCurrent = clampPage(mergedCurrent, pageCount);\n\n if (hideOnSinglePage && pageCount <= 1) return null;\n\n const commitCurrent = (nextCurrent: number, nextPageSize: number) => {\n setMergedCurrent(nextCurrent);\n onChange?.(nextCurrent, nextPageSize);\n };\n\n const goTo = (page: number) => {\n commitCurrent(clampPage(page, pageCount), mergedPageSize);\n };\n\n const handlePageSizeChange = (value: string) => {\n const nextSize = Number(value);\n const nextPageCount = getPageCount(total, nextSize);\n const nextCurrent = clampPage(displayCurrent, nextPageCount);\n\n setMergedPageSize(nextSize);\n commitCurrent(nextCurrent, nextSize);\n onPageSizeChange?.(nextCurrent, nextSize);\n };\n\n // Like rc-pagination: invalid input is ignored, a valid page is clamped, the input is cleared.\n const jump = () => {\n const page = Number(jumperValue);\n setJumperValue('');\n if (jumperValue.trim() === '' || !Number.isInteger(page)) return;\n const nextCurrent = clampPage(page, pageCount);\n if (nextCurrent !== displayCurrent) goTo(nextCurrent);\n };\n const goButton = typeof showQuickJumper === 'object' ? showQuickJumper.goButton : undefined;\n const mergedShowSizeChanger = showSizeChanger ?? total > totalBoundaryShowSizeChanger;\n const sizeChangerProps = typeof showSizeChanger === 'object' ? showSizeChanger : undefined;\n const SizeChanger = components?.sizeChanger ?? Select;\n\n const jumpStep = showLessItems ? 3 : 5;\n const items = getPaginationItems(displayCurrent, pageCount, showLessItems ? 1 : 2);\n const render = (page: number, type: PaginationItemType, element: ReactNode) =>\n itemRender ? itemRender(page, type, element) : element;\n const title = (text: string) => (showTitle ? text : undefined);\n const iconSize = size === 'small' ? 14 : 16;\n\n const prevButton = (\n <button\n aria-label=\"Previous page\"\n className={buttonVariants({ size })}\n disabled={disabled || displayCurrent <= 1}\n title={title('Previous Page')}\n type=\"button\"\n onClick={() => goTo(displayCurrent - 1)}\n >\n {render(Math.max(1, displayCurrent - 1), 'prev', <ChevronLeft size={iconSize} />)}\n </button>\n );\n const nextButton = (\n <button\n aria-label=\"Next page\"\n className={buttonVariants({ size })}\n disabled={disabled || displayCurrent >= pageCount}\n title={title('Next Page')}\n type=\"button\"\n onClick={() => goTo(displayCurrent + 1)}\n >\n {render(Math.min(pageCount, displayCurrent + 1), 'next', <ChevronRight size={iconSize} />)}\n </button>\n );\n\n const simpleConfig = simple ? (typeof simple === 'object' ? simple : {}) : null;\n const commitSimple = () => {\n if (simpleValue === null) return;\n const page = Number(simpleValue);\n setSimpleValue(null);\n if (simpleValue.trim() === '' || !Number.isInteger(page)) return;\n const nextCurrent = clampPage(page, pageCount);\n if (nextCurrent !== displayCurrent) goTo(nextCurrent);\n };\n const rangeStart = total === 0 ? 0 : (displayCurrent - 1) * mergedPageSize + 1;\n const rangeEnd = Math.min(displayCurrent * mergedPageSize, total);\n\n return (\n <nav\n aria-label=\"Pagination\"\n ref={ref}\n role=\"navigation\"\n style={{ ...customStyles?.root, ...style }}\n className={cx(\n styles.root,\n align && styles.aligned,\n align && styles[align],\n classNames?.root,\n className,\n )}\n {...rest}\n >\n {showTotal && (\n <span className={styles.total}>{showTotal(total, [rangeStart, rangeEnd])}</span>\n )}\n {simpleConfig ? (\n <>\n {prevButton}\n <span className={styles.simplePager} title={title(`${displayCurrent}/${pageCount}`)}>\n {simpleConfig.readOnly ? (\n displayCurrent\n ) : (\n <Input\n aria-label=\"Current page\"\n className={styles.jumperInput}\n disabled={disabled}\n size={size === 'small' ? 'small' : 'middle'}\n value={simpleValue ?? String(displayCurrent)}\n onBlur={commitSimple}\n onChange={(event) => setSimpleValue(event.currentTarget.value)}\n onKeyUp={(event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') commitSimple();\n }}\n />\n )}\n <span className={styles.simpleSlash}>/</span>\n {pageCount}\n </span>\n {nextButton}\n </>\n ) : (\n <>\n {prevButton}\n {items.map((item) =>\n typeof item === 'number' ? (\n <button\n aria-current={item === displayCurrent ? 'page' : undefined}\n className={cx(buttonVariants({ size }), classNames?.item)}\n disabled={disabled}\n key={item}\n style={customStyles?.item}\n title={title(String(item))}\n type=\"button\"\n onClick={() => goTo(item)}\n >\n {render(item, 'page', item)}\n </button>\n ) : (\n <span\n className={ellipsisVariants({ size })}\n key={item}\n title={title(\n item === 'ellipsis-prev'\n ? `Previous ${jumpStep} Pages`\n : `Next ${jumpStep} Pages`,\n )}\n >\n {item === 'ellipsis-prev'\n ? render(Math.max(1, displayCurrent - jumpStep), 'jump-prev', '···')\n : render(Math.min(pageCount, displayCurrent + jumpStep), 'jump-next', '···')}\n </span>\n ),\n )}\n {nextButton}\n </>\n )}\n {!simpleConfig && mergedShowSizeChanger && (\n <SizeChanger\n disabled={disabled}\n size={size === 'small' ? 'small' : 'middle'}\n {...sizeChangerProps}\n value={String(mergedPageSize)}\n options={pageSizeOptions.map((option) => ({\n label: `${option} / page`,\n value: String(option),\n }))}\n style={{\n flex: 'none',\n marginInlineStart: 8,\n width: 'auto',\n ...sizeChangerProps?.style,\n }}\n onChange={(value: string) => {\n handlePageSizeChange(value);\n sizeChangerProps?.onChange?.(value);\n }}\n />\n )}\n {!simpleConfig && showQuickJumper && (\n <span className={styles.jumper}>\n Go to\n <Input\n aria-label=\"Go to page\"\n className={styles.jumperInput}\n disabled={disabled}\n size={size === 'small' ? 'small' : 'middle'}\n value={jumperValue}\n onChange={(event) => setJumperValue(event.currentTarget.value)}\n onBlur={() => {\n if (!goButton) jump();\n }}\n onKeyUp={(event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') jump();\n }}\n />\n {goButton === true || typeof goButton === 'string' ? (\n <button\n className={buttonVariants({ size })}\n disabled={disabled}\n type=\"button\"\n onClick={jump}\n >\n {goButton === true ? 'Go' : goButton}\n </button>\n ) : goButton ? (\n <span onClick={jump}>{goButton}</span>\n ) : (\n 'Page'\n )}\n </span>\n )}\n </nav>\n );\n },\n);\n\nPagination.displayName = 'Pagination';\n\nexport default Pagination;\n"],"mappings":"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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
//#region src/base-ui/Pagination/helpers.ts
|
|
2
2
|
const getPageCount = (total, pageSize) => Math.max(1, Math.ceil(total / pageSize));
|
|
3
3
|
const clampPage = (page, pageCount) => Math.min(Math.max(page, 1), pageCount);
|
|
4
|
-
const getPaginationItems = (current, pageCount) => {
|
|
4
|
+
const getPaginationItems = (current, pageCount, buffer = 2) => {
|
|
5
5
|
if (pageCount <= 1) return [1];
|
|
6
6
|
const items = [1];
|
|
7
|
-
const start = Math.max(2, current -
|
|
8
|
-
const end = Math.min(pageCount - 1, current +
|
|
7
|
+
const start = Math.max(2, current - buffer);
|
|
8
|
+
const end = Math.min(pageCount - 1, current + buffer);
|
|
9
9
|
if (start > 2) items.push("ellipsis-prev");
|
|
10
10
|
for (let page = start; page <= end; page += 1) items.push(page);
|
|
11
11
|
if (end < pageCount - 1) items.push("ellipsis-next");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.mjs","names":[],"sources":["../../../src/base-ui/Pagination/helpers.ts"],"sourcesContent":["export type PaginationItem = number | 'ellipsis-prev' | 'ellipsis-next';\n\nexport const getPageCount = (total: number, pageSize: number) =>\n Math.max(1, Math.ceil(total / pageSize));\n\nexport const clampPage = (page: number, pageCount: number) =>\n Math.min(Math.max(page, 1), pageCount);\n\nexport const getPaginationItems = (current: number
|
|
1
|
+
{"version":3,"file":"helpers.mjs","names":[],"sources":["../../../src/base-ui/Pagination/helpers.ts"],"sourcesContent":["export type PaginationItem = number | 'ellipsis-prev' | 'ellipsis-next';\n\nexport const getPageCount = (total: number, pageSize: number) =>\n Math.max(1, Math.ceil(total / pageSize));\n\nexport const clampPage = (page: number, pageCount: number) =>\n Math.min(Math.max(page, 1), pageCount);\n\nexport const getPaginationItems = (\n current: number,\n pageCount: number,\n buffer = 2,\n): PaginationItem[] => {\n if (pageCount <= 1) return [1];\n\n const items: PaginationItem[] = [1];\n const start = Math.max(2, current - buffer);\n const end = Math.min(pageCount - 1, current + buffer);\n\n if (start > 2) items.push('ellipsis-prev');\n for (let page = start; page <= end; page += 1) items.push(page);\n if (end < pageCount - 1) items.push('ellipsis-next');\n\n items.push(pageCount);\n\n return items;\n};\n"],"mappings":";AAEA,MAAa,gBAAgB,OAAe,aAC1C,KAAK,IAAI,GAAG,KAAK,KAAK,QAAQ,QAAQ,CAAC;AAEzC,MAAa,aAAa,MAAc,cACtC,KAAK,IAAI,KAAK,IAAI,MAAM,CAAC,GAAG,SAAS;AAEvC,MAAa,sBACX,SACA,WACA,SAAS,MACY;CACrB,IAAI,aAAa,GAAG,OAAO,CAAC,CAAC;CAE7B,MAAM,QAA0B,CAAC,CAAC;CAClC,MAAM,QAAQ,KAAK,IAAI,GAAG,UAAU,MAAM;CAC1C,MAAM,MAAM,KAAK,IAAI,YAAY,GAAG,UAAU,MAAM;CAEpD,IAAI,QAAQ,GAAG,MAAM,KAAK,eAAe;CACzC,KAAK,IAAI,OAAO,OAAO,QAAQ,KAAK,QAAQ,GAAG,MAAM,KAAK,IAAI;CAC9D,IAAI,MAAM,YAAY,GAAG,MAAM,KAAK,eAAe;CAEnD,MAAM,KAAK,SAAS;CAEpB,OAAO;AACT"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { PaginationProps, PaginationSize } from "./type.mjs";
|
|
1
|
+
import { PaginationAlign, PaginationItemType, PaginationProps, PaginationSemanticName, PaginationSize, PaginationSizeChangerProps } from "./type.mjs";
|
|
2
2
|
import Pagination from "./Pagination.mjs";
|
|
3
|
-
export { type PaginationProps, type PaginationSize, Pagination as default };
|
|
3
|
+
export { type PaginationAlign, type PaginationItemType, type PaginationProps, type PaginationSemanticName, type PaginationSize, type PaginationSizeChangerProps, Pagination as default };
|
|
@@ -2,6 +2,10 @@ import { createStaticStyles } from "antd-style";
|
|
|
2
2
|
import { cva } from "class-variance-authority";
|
|
3
3
|
//#region src/base-ui/Pagination/style.ts
|
|
4
4
|
const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
5
|
+
aligned: css`
|
|
6
|
+
display: flex;
|
|
7
|
+
width: 100%;
|
|
8
|
+
`,
|
|
5
9
|
button: css`
|
|
6
10
|
cursor: pointer;
|
|
7
11
|
|
|
@@ -40,6 +44,9 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
40
44
|
color: ${cssVar.colorText};
|
|
41
45
|
background: ${cssVar.colorFillSecondary};
|
|
42
46
|
}
|
|
47
|
+
`,
|
|
48
|
+
center: css`
|
|
49
|
+
justify-content: center;
|
|
43
50
|
`,
|
|
44
51
|
ellipsis: css`
|
|
45
52
|
display: inline-flex;
|
|
@@ -50,12 +57,41 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
50
57
|
|
|
51
58
|
color: ${cssVar.colorTextQuaternary};
|
|
52
59
|
letter-spacing: 2px;
|
|
60
|
+
`,
|
|
61
|
+
end: css`
|
|
62
|
+
justify-content: flex-end;
|
|
63
|
+
`,
|
|
64
|
+
jumper: css`
|
|
65
|
+
display: inline-flex;
|
|
66
|
+
gap: 6px;
|
|
67
|
+
align-items: center;
|
|
68
|
+
|
|
69
|
+
margin-inline-start: 8px;
|
|
70
|
+
|
|
71
|
+
font-size: 13px;
|
|
72
|
+
color: ${cssVar.colorTextSecondary};
|
|
73
|
+
white-space: nowrap;
|
|
74
|
+
`,
|
|
75
|
+
jumperInput: css`
|
|
76
|
+
width: 50px;
|
|
53
77
|
`,
|
|
54
78
|
root: css`
|
|
55
79
|
display: inline-flex;
|
|
56
80
|
gap: 4px;
|
|
57
81
|
align-items: center;
|
|
58
82
|
font-variant-numeric: tabular-nums;
|
|
83
|
+
`,
|
|
84
|
+
simplePager: css`
|
|
85
|
+
display: inline-flex;
|
|
86
|
+
gap: 6px;
|
|
87
|
+
align-items: center;
|
|
88
|
+
|
|
89
|
+
font-size: 13px;
|
|
90
|
+
color: ${cssVar.colorTextSecondary};
|
|
91
|
+
white-space: nowrap;
|
|
92
|
+
`,
|
|
93
|
+
simpleSlash: css`
|
|
94
|
+
color: ${cssVar.colorTextQuaternary};
|
|
59
95
|
`,
|
|
60
96
|
small: css`
|
|
61
97
|
min-width: 24px;
|
|
@@ -64,6 +100,9 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
64
100
|
`,
|
|
65
101
|
smallEllipsis: css`
|
|
66
102
|
width: 24px;
|
|
103
|
+
`,
|
|
104
|
+
start: css`
|
|
105
|
+
justify-content: flex-start;
|
|
67
106
|
`,
|
|
68
107
|
total: css`
|
|
69
108
|
margin-inline-end: 8px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Pagination/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n button: css`\n cursor: pointer;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n min-width: 28px;\n height: 28px;\n padding-inline: 6px;\n border: none;\n border-radius: ${cssVar.borderRadius};\n\n font-size: 13px;\n font-weight: 500;\n font-variant-numeric: tabular-nums;\n color: ${cssVar.colorTextSecondary};\n\n background: transparent;\n\n transition: background-color 0.15s;\n\n &:hover:not(:disabled) {\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillTertiary};\n }\n\n &:disabled {\n cursor: default;\n color: ${cssVar.colorTextQuaternary};\n background: transparent;\n }\n\n &[aria-current='page'] {\n font-weight: 600;\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n }\n `,\n ellipsis: css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n width: 28px;\n\n color: ${cssVar.colorTextQuaternary};\n letter-spacing: 2px;\n `,\n root: css`\n display: inline-flex;\n gap: 4px;\n align-items: center;\n font-variant-numeric: tabular-nums;\n `,\n small: css`\n min-width: 24px;\n height: 24px;\n font-size: 12px;\n `,\n smallEllipsis: css`\n width: 24px;\n `,\n total: css`\n margin-inline-end: 8px;\n font-size: 12px;\n color: ${cssVar.colorTextTertiary};\n white-space: nowrap;\n `,\n}));\n\nexport const buttonVariants = cva(styles.button, {\n defaultVariants: {\n size: 'middle',\n },\n variants: {\n size: {\n middle: null,\n small: styles.small,\n },\n },\n});\n\nexport const ellipsisVariants = cva(styles.ellipsis, {\n defaultVariants: {\n size: 'middle',\n },\n variants: {\n size: {\n middle: null,\n small: styles.smallEllipsis,\n },\n },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;;;;qBAWQ,OAAO,aAAa;;;;;aAK5B,OAAO,mBAAmB;;;;;;;eAOxB,OAAO,UAAU;oBACZ,OAAO,kBAAkB;;;;;eAK9B,OAAO,oBAAoB;;;;;;eAM3B,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;CAG5C,UAAU,GAAG;;;;;;;aAOF,OAAO,oBAAoB;;;CAGtC,MAAM,GAAG;;;;;;CAMT,OAAO,GAAG;;;;;CAKV,eAAe,GAAG;;;CAGlB,OAAO,GAAG;;;aAGC,OAAO,kBAAkB;;;AAGtC,EAAE;AAEF,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB,EACf,MAAM,SACR;CACA,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,OAAO,OAAO;CAChB,EACF;AACF,CAAC;AAED,MAAa,mBAAmB,IAAI,OAAO,UAAU;CACnD,iBAAiB,EACf,MAAM,SACR;CACA,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,OAAO,OAAO;CAChB,EACF;AACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Pagination/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n aligned: css`\n display: flex;\n width: 100%;\n `,\n button: css`\n cursor: pointer;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n min-width: 28px;\n height: 28px;\n padding-inline: 6px;\n border: none;\n border-radius: ${cssVar.borderRadius};\n\n font-size: 13px;\n font-weight: 500;\n font-variant-numeric: tabular-nums;\n color: ${cssVar.colorTextSecondary};\n\n background: transparent;\n\n transition: background-color 0.15s;\n\n &:hover:not(:disabled) {\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillTertiary};\n }\n\n &:disabled {\n cursor: default;\n color: ${cssVar.colorTextQuaternary};\n background: transparent;\n }\n\n &[aria-current='page'] {\n font-weight: 600;\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n }\n `,\n center: css`\n justify-content: center;\n `,\n ellipsis: css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n width: 28px;\n\n color: ${cssVar.colorTextQuaternary};\n letter-spacing: 2px;\n `,\n end: css`\n justify-content: flex-end;\n `,\n jumper: css`\n display: inline-flex;\n gap: 6px;\n align-items: center;\n\n margin-inline-start: 8px;\n\n font-size: 13px;\n color: ${cssVar.colorTextSecondary};\n white-space: nowrap;\n `,\n jumperInput: css`\n width: 50px;\n `,\n root: css`\n display: inline-flex;\n gap: 4px;\n align-items: center;\n font-variant-numeric: tabular-nums;\n `,\n simplePager: css`\n display: inline-flex;\n gap: 6px;\n align-items: center;\n\n font-size: 13px;\n color: ${cssVar.colorTextSecondary};\n white-space: nowrap;\n `,\n simpleSlash: css`\n color: ${cssVar.colorTextQuaternary};\n `,\n small: css`\n min-width: 24px;\n height: 24px;\n font-size: 12px;\n `,\n smallEllipsis: css`\n width: 24px;\n `,\n start: css`\n justify-content: flex-start;\n `,\n total: css`\n margin-inline-end: 8px;\n font-size: 12px;\n color: ${cssVar.colorTextTertiary};\n white-space: nowrap;\n `,\n}));\n\nexport const buttonVariants = cva(styles.button, {\n defaultVariants: {\n size: 'middle',\n },\n variants: {\n size: {\n middle: null,\n small: styles.small,\n },\n },\n});\n\nexport const ellipsisVariants = cva(styles.ellipsis, {\n defaultVariants: {\n size: 'middle',\n },\n variants: {\n size: {\n middle: null,\n small: styles.smallEllipsis,\n },\n },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;;;CAIZ,QAAQ,GAAG;;;;;;;;;;;qBAWQ,OAAO,aAAa;;;;;aAK5B,OAAO,mBAAmB;;;;;;;eAOxB,OAAO,UAAU;oBACZ,OAAO,kBAAkB;;;;;eAK9B,OAAO,oBAAoB;;;;;;eAM3B,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;CAG5C,QAAQ,GAAG;;;CAGX,UAAU,GAAG;;;;;;;aAOF,OAAO,oBAAoB;;;CAGtC,KAAK,GAAG;;;CAGR,QAAQ,GAAG;;;;;;;;aAQA,OAAO,mBAAmB;;;CAGrC,aAAa,GAAG;;;CAGhB,MAAM,GAAG;;;;;;CAMT,aAAa,GAAG;;;;;;aAML,OAAO,mBAAmB;;;CAGrC,aAAa,GAAG;aACL,OAAO,oBAAoB;;CAEtC,OAAO,GAAG;;;;;CAKV,eAAe,GAAG;;;CAGlB,OAAO,GAAG;;;CAGV,OAAO,GAAG;;;aAGC,OAAO,kBAAkB;;;AAGtC,EAAE;AAEF,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB,EACf,MAAM,SACR;CACA,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,OAAO,OAAO;CAChB,EACF;AACF,CAAC;AAED,MAAa,mBAAmB,IAAI,OAAO,UAAU;CACnD,iBAAiB,EACf,MAAM,SACR;CACA,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,OAAO,OAAO;CAChB,EACF;AACF,CAAC"}
|
|
@@ -1,22 +1,60 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SelectProps } from "../Select/type.mjs";
|
|
2
|
+
import { CSSProperties, ComponentProps, ComponentType, ReactNode, Ref } from "react";
|
|
2
3
|
//#region src/base-ui/Pagination/type.d.ts
|
|
3
4
|
type PaginationSize = 'small' | 'middle';
|
|
5
|
+
/** antd `PaginationSemanticType`: `root` is the `<nav>`, `item` each page-number button. */
|
|
6
|
+
type PaginationSemanticName = 'item' | 'root';
|
|
7
|
+
/** antd `itemRender` item types: `jump-prev` / `jump-next` are the ellipses. */
|
|
8
|
+
type PaginationItemType = 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next';
|
|
9
|
+
type PaginationAlign = 'start' | 'center' | 'end';
|
|
10
|
+
/** Extra props of the page-size `Select` when `showSizeChanger` is an object. */
|
|
11
|
+
interface PaginationSizeChangerProps extends Omit<SelectProps, 'mode' | 'onChange' | 'options' | 'value'> {
|
|
12
|
+
onChange?: (value: string) => void;
|
|
13
|
+
}
|
|
4
14
|
interface PaginationProps extends Omit<ComponentProps<'nav'>, 'onChange'> {
|
|
15
|
+
/** Lays the pager out as a full-width row aligned to `start`, `center` or `end`. */
|
|
16
|
+
align?: PaginationAlign;
|
|
17
|
+
classNames?: Partial<Record<PaginationSemanticName, string>>;
|
|
18
|
+
/** Replaces the page-size `Select`; it receives the same props. */
|
|
19
|
+
components?: {
|
|
20
|
+
sizeChanger?: ComponentType<any>;
|
|
21
|
+
};
|
|
5
22
|
current?: number;
|
|
6
23
|
defaultCurrent?: number;
|
|
7
24
|
defaultPageSize?: number;
|
|
8
25
|
disabled?: boolean;
|
|
9
26
|
hideOnSinglePage?: boolean;
|
|
27
|
+
/** Custom content of each item; `element` is the default content. */
|
|
28
|
+
itemRender?: (page: number, type: PaginationItemType, element: ReactNode) => ReactNode;
|
|
10
29
|
onChange?: (page: number, pageSize: number) => void;
|
|
11
30
|
onPageSizeChange?: (current: number, size: number) => void;
|
|
12
31
|
pageSize?: number;
|
|
13
|
-
|
|
32
|
+
/** @default [10, 20, 50, 100] */
|
|
33
|
+
pageSizeOptions?: (number | string)[];
|
|
14
34
|
ref?: Ref<HTMLElement>;
|
|
15
|
-
|
|
35
|
+
/** Use the `small` size on extra-small screens (< 576px) when `size` is not set. */
|
|
36
|
+
responsive?: boolean;
|
|
37
|
+
/** Show one page on each side of the current page instead of two. */
|
|
38
|
+
showLessItems?: boolean;
|
|
39
|
+
/** Show a "Go to" page input; `goButton` adds a confirm button (the input then applies on Enter or the button only). */
|
|
40
|
+
showQuickJumper?: boolean | {
|
|
41
|
+
goButton?: ReactNode;
|
|
42
|
+
};
|
|
43
|
+
/** Defaults to `true` when `total` is greater than `totalBoundaryShowSizeChanger`. */
|
|
44
|
+
showSizeChanger?: boolean | PaginationSizeChangerProps;
|
|
45
|
+
/** Show native `title` tooltips on the items. @default true */
|
|
46
|
+
showTitle?: boolean;
|
|
16
47
|
showTotal?: (total: number, range: [number, number]) => ReactNode;
|
|
48
|
+
/** Compact `prev [current] / pages next` mode; `readOnly` shows the current page as text. */
|
|
49
|
+
simple?: boolean | {
|
|
50
|
+
readOnly?: boolean;
|
|
51
|
+
};
|
|
17
52
|
size?: PaginationSize;
|
|
53
|
+
styles?: Partial<Record<PaginationSemanticName, CSSProperties>>;
|
|
18
54
|
total: number;
|
|
55
|
+
/** `total` above which `showSizeChanger` defaults to on. @default 50 */
|
|
56
|
+
totalBoundaryShowSizeChanger?: number;
|
|
19
57
|
}
|
|
20
58
|
//#endregion
|
|
21
|
-
export { PaginationProps, PaginationSize };
|
|
59
|
+
export { PaginationAlign, PaginationItemType, PaginationProps, PaginationSemanticName, PaginationSize, PaginationSizeChangerProps };
|
|
22
60
|
//# sourceMappingURL=type.d.mts.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import Icon from "../../Icon/Icon.mjs";
|
|
3
|
-
import Spin from "../Spin/Spin.mjs";
|
|
4
3
|
import { useTranslation } from "../../i18n/useTranslation.mjs";
|
|
4
|
+
import Spin from "../Spin/Spin.mjs";
|
|
5
5
|
import { panelStyles } from "../panelStyles.mjs";
|
|
6
6
|
import qrCode_default from "../../i18n/resources/en/qrCode.mjs";
|
|
7
7
|
import { buildQrPath } from "./qrPath.mjs";
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { TableColumnType } from "./type.mjs";
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
|
+
//#region src/base-ui/Table/Column.d.ts
|
|
4
|
+
type TableColumnProps<T> = TableColumnType<T>;
|
|
5
|
+
/** JSX sugar for one `columns` entry; `Table` reads its props and it renders nothing itself. */
|
|
6
|
+
declare const Column: <T>(_props: TableColumnProps<T>) => ReactNode;
|
|
7
|
+
//#endregion
|
|
8
|
+
export { TableColumnProps, Column as default };
|
|
9
|
+
//# sourceMappingURL=Column.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Column.mjs","names":[],"sources":["../../../src/base-ui/Table/Column.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { TableColumnType } from './type';\n\nexport type TableColumnProps<T> = TableColumnType<T>;\n\n/** JSX sugar for one `columns` entry; `Table` reads its props and it renders nothing itself. */\nconst Column = <T,>(_props: TableColumnProps<T>): ReactNode => null;\n\nexport default Column;\n"],"mappings":";;AAOA,MAAM,UAAc,WAA2C"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { TableColumnType } from "./type.mjs";
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
|
+
//#region src/base-ui/Table/ColumnGroup.d.ts
|
|
4
|
+
interface TableColumnGroupProps<T> extends Omit<TableColumnType<T>, 'dataIndex'> {
|
|
5
|
+
/** `Table.Column` / `Table.ColumnGroup` elements rendered under this header. */
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
/** JSX sugar for a grouped header; `Table` reads its props and it renders nothing itself. */
|
|
9
|
+
declare const ColumnGroup: <T>(_props: TableColumnGroupProps<T>) => ReactNode;
|
|
10
|
+
//#endregion
|
|
11
|
+
export { TableColumnGroupProps, ColumnGroup as default };
|
|
12
|
+
//# sourceMappingURL=ColumnGroup.d.mts.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
//#region src/base-ui/Table/ColumnGroup.tsx
|
|
2
|
+
/** JSX sugar for a grouped header; `Table` reads its props and it renders nothing itself. */
|
|
3
|
+
const ColumnGroup = (_props) => null;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { ColumnGroup as default };
|
|
6
|
+
|
|
7
|
+
//# sourceMappingURL=ColumnGroup.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColumnGroup.mjs","names":[],"sources":["../../../src/base-ui/Table/ColumnGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { TableColumnType } from './type';\n\nexport interface TableColumnGroupProps<T> extends Omit<TableColumnType<T>, 'dataIndex'> {\n /** `Table.Column` / `Table.ColumnGroup` elements rendered under this header. */\n children: ReactNode;\n}\n\n/** JSX sugar for a grouped header; `Table` reads its props and it renders nothing itself. */\nconst ColumnGroup = <T,>(_props: TableColumnGroupProps<T>): ReactNode => null;\n\nexport default ColumnGroup;\n"],"mappings":";;AAUA,MAAM,eAAmB,WAAgD"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import ActionIcon from "../ActionIcon/ActionIcon.mjs";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { cx } from "antd-style";
|
|
5
|
+
import { ChevronDown, ChevronRight } from "lucide-react";
|
|
6
|
+
//#region src/base-ui/Table/ExpandIcon.tsx
|
|
7
|
+
/**
|
|
8
|
+
* Default expand toggle: a small borderless `ActionIcon` (chevron right / down, swapped without a
|
|
9
|
+
* transition). Rows that cannot expand keep an invisible spacer of the same size so tree rows line
|
|
10
|
+
* up. Mirrors antd `ExpandIcon`.
|
|
11
|
+
*/
|
|
12
|
+
const renderExpandIcon = ({ expandable, expanded, onExpand, prefixCls, record }, locale) => {
|
|
13
|
+
const iconCls = `${prefixCls}-row-expand-icon`;
|
|
14
|
+
if (!expandable) return /* @__PURE__ */ jsx("span", {
|
|
15
|
+
"aria-hidden": "true",
|
|
16
|
+
className: cx(iconCls, `${iconCls}-spaced`)
|
|
17
|
+
});
|
|
18
|
+
return /* @__PURE__ */ jsx(ActionIcon, {
|
|
19
|
+
"aria-expanded": expanded,
|
|
20
|
+
"aria-label": expanded ? locale.collapse : locale.expand,
|
|
21
|
+
className: cx(iconCls, expanded ? `${iconCls}-expanded` : `${iconCls}-collapsed`),
|
|
22
|
+
icon: expanded ? ChevronDown : ChevronRight,
|
|
23
|
+
size: "small",
|
|
24
|
+
onClick: (event) => {
|
|
25
|
+
onExpand(record, event);
|
|
26
|
+
event.stopPropagation();
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
};
|
|
30
|
+
//#endregion
|
|
31
|
+
export { renderExpandIcon as default };
|
|
32
|
+
|
|
33
|
+
//# sourceMappingURL=ExpandIcon.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpandIcon.mjs","names":[],"sources":["../../../src/base-ui/Table/ExpandIcon.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\n\nimport type { TableExpandIconProps, TableLocale } from './type';\n\n/**\n * Default expand toggle: a small borderless `ActionIcon` (chevron right / down, swapped without a\n * transition). Rows that cannot expand keep an invisible spacer of the same size so tree rows line\n * up. Mirrors antd `ExpandIcon`.\n */\nconst renderExpandIcon = <T,>(\n { expandable, expanded, onExpand, prefixCls, record }: TableExpandIconProps<T>,\n locale: Pick<TableLocale, 'collapse' | 'expand'>,\n): ReactNode => {\n const iconCls = `${prefixCls}-row-expand-icon`;\n if (!expandable) {\n return <span aria-hidden=\"true\" className={cx(iconCls, `${iconCls}-spaced`)} />;\n }\n return (\n <ActionIcon\n aria-expanded={expanded}\n aria-label={expanded ? locale.collapse : locale.expand}\n className={cx(iconCls, expanded ? `${iconCls}-expanded` : `${iconCls}-collapsed`)}\n icon={expanded ? ChevronDown : ChevronRight}\n size=\"small\"\n onClick={(event) => {\n onExpand(record, event as unknown as MouseEvent<HTMLElement>);\n event.stopPropagation();\n }}\n />\n );\n};\n\nexport default renderExpandIcon;\n"],"mappings":";;;;;;;;;;;AAeA,MAAM,oBACJ,EAAE,YAAY,UAAU,UAAU,WAAW,UAC7C,WACc;CACd,MAAM,UAAU,GAAG,UAAU;CAC7B,IAAI,CAAC,YACH,OAAO,oBAAC,QAAD;EAAM,eAAY;EAAO,WAAW,GAAG,SAAS,GAAG,QAAQ,QAAQ;CAAI,CAAA;CAEhF,OACE,oBAAC,YAAD;EACE,iBAAe;EACf,cAAY,WAAW,OAAO,WAAW,OAAO;EAChD,WAAW,GAAG,SAAS,WAAW,GAAG,QAAQ,aAAa,GAAG,QAAQ,WAAW;EAChF,MAAM,WAAW,cAAc;EAC/B,MAAK;EACL,UAAU,UAAU;GAClB,SAAS,QAAQ,KAA2C;GAC5D,MAAM,gBAAgB;EACxB;CACD,CAAA;AAEL"}
|