@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.
Files changed (81) hide show
  1. package/es/EmojiPicker/AvatarUploader.mjs +1 -1
  2. package/es/Form/components/FormSubmitFooter.mjs +1 -1
  3. package/es/base-ui/Input/style.d.mts +1 -1
  4. package/es/base-ui/Pagination/Pagination.mjs +158 -41
  5. package/es/base-ui/Pagination/Pagination.mjs.map +1 -1
  6. package/es/base-ui/Pagination/helpers.mjs +3 -3
  7. package/es/base-ui/Pagination/helpers.mjs.map +1 -1
  8. package/es/base-ui/Pagination/index.d.mts +2 -2
  9. package/es/base-ui/Pagination/style.mjs +39 -0
  10. package/es/base-ui/Pagination/style.mjs.map +1 -1
  11. package/es/base-ui/Pagination/type.d.mts +42 -4
  12. package/es/base-ui/QRCode/QRCode.mjs +1 -1
  13. package/es/base-ui/Table/Column.d.mts +9 -0
  14. package/es/base-ui/Table/Column.mjs +7 -0
  15. package/es/base-ui/Table/Column.mjs.map +1 -0
  16. package/es/base-ui/Table/ColumnGroup.d.mts +12 -0
  17. package/es/base-ui/Table/ColumnGroup.mjs +7 -0
  18. package/es/base-ui/Table/ColumnGroup.mjs.map +1 -0
  19. package/es/base-ui/Table/ExpandIcon.mjs +33 -0
  20. package/es/base-ui/Table/ExpandIcon.mjs.map +1 -0
  21. package/es/base-ui/Table/FilterDropdown.mjs +284 -0
  22. package/es/base-ui/Table/FilterDropdown.mjs.map +1 -0
  23. package/es/base-ui/Table/LoadingSkeleton.mjs +83 -0
  24. package/es/base-ui/Table/LoadingSkeleton.mjs.map +1 -0
  25. package/es/base-ui/Table/Table.d.mts +21 -3
  26. package/es/base-ui/Table/Table.mjs +444 -97
  27. package/es/base-ui/Table/Table.mjs.map +1 -1
  28. package/es/base-ui/Table/columnUtils.mjs +56 -0
  29. package/es/base-ui/Table/columnUtils.mjs.map +1 -0
  30. package/es/base-ui/Table/index.d.mts +4 -2
  31. package/es/base-ui/Table/selectionUtils.d.mts +9 -0
  32. package/es/base-ui/Table/selectionUtils.mjs +128 -0
  33. package/es/base-ui/Table/selectionUtils.mjs.map +1 -0
  34. package/es/base-ui/Table/semantic.mjs +55 -0
  35. package/es/base-ui/Table/semantic.mjs.map +1 -0
  36. package/es/base-ui/Table/style.mjs +801 -161
  37. package/es/base-ui/Table/style.mjs.map +1 -1
  38. package/es/base-ui/Table/type.d.mts +471 -37
  39. package/es/base-ui/Table/useBreakpoint.mjs +41 -0
  40. package/es/base-ui/Table/useBreakpoint.mjs.map +1 -0
  41. package/es/base-ui/Table/useFilter.mjs +64 -0
  42. package/es/base-ui/Table/useFilter.mjs.map +1 -0
  43. package/es/base-ui/Table/useSelection.mjs +421 -0
  44. package/es/base-ui/Table/useSelection.mjs.map +1 -0
  45. package/es/base-ui/Table/useSorter.mjs +152 -0
  46. package/es/base-ui/Table/useSorter.mjs.map +1 -0
  47. package/es/base-ui/Table/useTableState.mjs +82 -55
  48. package/es/base-ui/Table/useTableState.mjs.map +1 -1
  49. package/es/base-ui/index.d.mts +6 -4
  50. package/es/base-ui/index.mjs +9 -9
  51. package/es/chat/EditableMessageList/EditableMessageList.mjs +1 -1
  52. package/es/chat/MessageInput/MessageInput.mjs +1 -1
  53. package/es/chat/MessageModal/MessageModal.mjs +1 -1
  54. package/es/chat/TokenTag/TokenTag.mjs +1 -1
  55. package/es/i18n/resources/en/index.d.mts +3 -2
  56. package/es/i18n/resources/en/index.mjs +4 -2
  57. package/es/i18n/resources/en/index.mjs.map +1 -1
  58. package/es/i18n/resources/en/table.d.mts +23 -0
  59. package/es/i18n/resources/en/table.mjs +24 -0
  60. package/es/i18n/resources/en/table.mjs.map +1 -0
  61. package/es/i18n/resources/zhCn/index.d.mts +3 -2
  62. package/es/i18n/resources/zhCn/index.mjs +4 -2
  63. package/es/i18n/resources/zhCn/index.mjs.map +1 -1
  64. package/es/i18n/resources/zhCn/table.d.mts +23 -0
  65. package/es/i18n/resources/zhCn/table.mjs +24 -0
  66. package/es/i18n/resources/zhCn/table.mjs.map +1 -0
  67. package/es/i18n/types.d.mts +2 -1
  68. package/es/index.mjs +2 -2
  69. package/package.json +2 -2
  70. package/es/base-ui/Table/FilterMenu.mjs +0 -45
  71. package/es/base-ui/Table/FilterMenu.mjs.map +0 -1
  72. package/es/base-ui/Table/TableBody.mjs +0 -59
  73. package/es/base-ui/Table/TableBody.mjs.map +0 -1
  74. package/es/base-ui/Table/TableHead.mjs +0 -50
  75. package/es/base-ui/Table/TableHead.mjs.map +0 -1
  76. package/es/base-ui/Table/features.mjs +0 -12
  77. package/es/base-ui/Table/features.mjs.map +0 -1
  78. package/es/base-ui/Table/fixedOffsets.mjs +0 -29
  79. package/es/base-ui/Table/fixedOffsets.mjs.map +0 -1
  80. package/es/base-ui/Table/toColumnDefs.mjs +0 -26
  81. 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?: "large" | "middle" | "small" | null | undefined;
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 Pagination = memo(({ className, current, defaultCurrent = 1, defaultPageSize = 10, disabled, hideOnSinglePage, onChange, onPageSizeChange, pageSize, pageSizeOptions = [
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 = false, showTotal, size = "middle", style, total, ...rest }) => {
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 items = getPaginationItems(displayCurrent, pageCount);
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__ */ jsx("button", {
75
- "aria-label": "Previous page",
76
- className: buttonVariants({ size }),
77
- disabled: disabled || displayCurrent <= 1,
78
- type: "button",
79
- onClick: () => goTo(displayCurrent - 1),
80
- children: /* @__PURE__ */ jsx(ChevronLeft, { size: size === "small" ? 14 : 16 })
81
- }),
82
- items.map((item) => typeof item === "number" ? /* @__PURE__ */ jsx("button", {
83
- "aria-current": item === displayCurrent ? "page" : void 0,
84
- className: buttonVariants({ size }),
85
- disabled,
86
- type: "button",
87
- onClick: () => goTo(item),
88
- children: item
89
- }, item) : /* @__PURE__ */ jsx("span", {
90
- className: ellipsisVariants({ size }),
91
- children: "···"
92
- }, item)),
93
- /* @__PURE__ */ jsx("button", {
94
- "aria-label": "Next page",
95
- className: buttonVariants({ size }),
96
- disabled: disabled || displayCurrent >= pageCount,
97
- type: "button",
98
- onClick: () => goTo(displayCurrent + 1),
99
- children: /* @__PURE__ */ jsx(ChevronRight, { size: size === "small" ? 14 : 16 })
100
- }),
101
- showSizeChanger && /* @__PURE__ */ jsx(Select, {
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
- style: {
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
- onChange: handlePageSizeChange
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 - 2);
8
- const end = Math.min(pageCount - 1, current + 2);
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, pageCount: number): PaginationItem[] => {\n if (pageCount <= 1) return [1];\n\n const items: PaginationItem[] = [1];\n const start = Math.max(2, current - 2);\n const end = Math.min(pageCount - 1, current + 2);\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,sBAAsB,SAAiB,cAAwC;CAC1F,IAAI,aAAa,GAAG,OAAO,CAAC,CAAC;CAE7B,MAAM,QAA0B,CAAC,CAAC;CAClC,MAAM,QAAQ,KAAK,IAAI,GAAG,UAAU,CAAC;CACrC,MAAM,MAAM,KAAK,IAAI,YAAY,GAAG,UAAU,CAAC;CAE/C,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
+ {"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 { ComponentProps, ReactNode, Ref } from "react";
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
- pageSizeOptions?: number[];
32
+ /** @default [10, 20, 50, 100] */
33
+ pageSizeOptions?: (number | string)[];
14
34
  ref?: Ref<HTMLElement>;
15
- showSizeChanger?: boolean;
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,7 @@
1
+ //#region src/base-ui/Table/Column.tsx
2
+ /** JSX sugar for one `columns` entry; `Table` reads its props and it renders nothing itself. */
3
+ const Column = (_props) => null;
4
+ //#endregion
5
+ export { Column as default };
6
+
7
+ //# sourceMappingURL=Column.mjs.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"}