@canvas-components/react-components 0.3.5 → 0.3.6

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 (7) hide show
  1. package/dist/index.cjs +141 -58
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +8 -2
  4. package/dist/index.d.ts +8 -2
  5. package/dist/index.js +141 -58
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -490,7 +490,13 @@ interface ReactInputNumberProps extends Omit<InputHTMLAttributes<HTMLInputElemen
490
490
  */
491
491
  declare const ReactInputNumber: react.ForwardRefExoticComponent<ReactInputNumberProps & react.RefAttributes<HTMLInputElement>>;
492
492
 
493
+ /** 分页器节点级 DOM 样式；当前页样式覆盖普通页码样式。 */
494
+ type ReactPaginationStyles = Partial<Record<"root" | "total" | "pages" | "pageItem" | "activePageItem" | "prevButton" | "nextButton" | "prevIcon" | "nextIcon" | "ellipsis" | "sizeChanger" | "quickJumper" | "quickJumperText" | "quickJumperInput", CSSProperties>>;
493
495
  interface ReactPaginationProps {
496
+ /** 分页器容器的 DOM 样式。 */
497
+ style?: CSSProperties;
498
+ /** 节点样式；styles.root 优先于 style。 */
499
+ styles?: ReactPaginationStyles;
494
500
  /**
495
501
  * 分页器尺寸。
496
502
  * @default "middle"
@@ -509,7 +515,7 @@ interface ReactPaginationProps {
509
515
  */
510
516
  pageSize?: number;
511
517
  /**
512
- * 每页条数候选。
518
+ * 每页条数候选。非空候选中缺少当前 pageSize 时自动补入。
513
519
  * @default [10, 20, 50, 100]
514
520
  */
515
521
  pageSizeOptions?: number[];
@@ -1283,4 +1289,4 @@ declare function useReactContentScale(): ReactContentScaleValue;
1283
1289
  */
1284
1290
  declare const REACT_COMPONENT_PREFIX = "canvas-react";
1285
1291
 
1286
- export { REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
1292
+ export { REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, type ReactPaginationStyles, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
package/dist/index.d.ts CHANGED
@@ -490,7 +490,13 @@ interface ReactInputNumberProps extends Omit<InputHTMLAttributes<HTMLInputElemen
490
490
  */
491
491
  declare const ReactInputNumber: react.ForwardRefExoticComponent<ReactInputNumberProps & react.RefAttributes<HTMLInputElement>>;
492
492
 
493
+ /** 分页器节点级 DOM 样式；当前页样式覆盖普通页码样式。 */
494
+ type ReactPaginationStyles = Partial<Record<"root" | "total" | "pages" | "pageItem" | "activePageItem" | "prevButton" | "nextButton" | "prevIcon" | "nextIcon" | "ellipsis" | "sizeChanger" | "quickJumper" | "quickJumperText" | "quickJumperInput", CSSProperties>>;
493
495
  interface ReactPaginationProps {
496
+ /** 分页器容器的 DOM 样式。 */
497
+ style?: CSSProperties;
498
+ /** 节点样式；styles.root 优先于 style。 */
499
+ styles?: ReactPaginationStyles;
494
500
  /**
495
501
  * 分页器尺寸。
496
502
  * @default "middle"
@@ -509,7 +515,7 @@ interface ReactPaginationProps {
509
515
  */
510
516
  pageSize?: number;
511
517
  /**
512
- * 每页条数候选。
518
+ * 每页条数候选。非空候选中缺少当前 pageSize 时自动补入。
513
519
  * @default [10, 20, 50, 100]
514
520
  */
515
521
  pageSizeOptions?: number[];
@@ -1283,4 +1289,4 @@ declare function useReactContentScale(): ReactContentScaleValue;
1283
1289
  */
1284
1290
  declare const REACT_COMPONENT_PREFIX = "canvas-react";
1285
1291
 
1286
- export { REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
1292
+ export { REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, type ReactPaginationStyles, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
package/dist/index.js CHANGED
@@ -5986,7 +5986,7 @@ function formatDisplayValue(value, formatter, precision, step) {
5986
5986
  }
5987
5987
 
5988
5988
  // src/components/pagination/style.css
5989
- styleInject('@import "../../styles/variables.css";\n.canvas-react-pagination {\n --canvas-react-pagination-control-size: 32px;\n --canvas-react-pagination-gap: 8px;\n --canvas-react-pagination-padding-inline: 10px;\n --canvas-react-control-height: var(--canvas-react-pagination-control-size);\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: var(--canvas-react-pagination-gap);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n white-space: nowrap;\n}\n.canvas-react-pagination-small {\n --canvas-react-pagination-control-size: 24px;\n --canvas-react-pagination-gap: 4px;\n --canvas-react-pagination-padding-inline: 6px;\n}\n.canvas-react-pagination-large {\n --canvas-react-pagination-control-size: 40px;\n --canvas-react-pagination-gap: 10px;\n --canvas-react-pagination-padding-inline: 14px;\n}\n.canvas-react-pagination-pages {\n display: inline-flex;\n align-items: center;\n gap: var(--canvas-react-pagination-gap);\n flex-wrap: nowrap;\n}\n.canvas-react-pagination-button,\n.canvas-react-pagination-page {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--canvas-react-pagination-control-size);\n height: var(--canvas-react-pagination-control-size);\n padding: 0 var(--canvas-react-pagination-padding-inline);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n color 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-pagination-button {\n position: relative;\n width: var(--canvas-react-pagination-control-size);\n min-width: var(--canvas-react-pagination-control-size);\n padding: 0;\n}\n.canvas-react-pagination-button:hover,\n.canvas-react-pagination-page:hover {\n border-color: var(--canvas-react-color-primary-hover);\n color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-page-active {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-bg-active);\n color: var(--canvas-react-color-primary);\n}\n.canvas-react-pagination-button:disabled,\n.canvas-react-pagination-page:disabled {\n opacity: 0.48;\n cursor: not-allowed;\n}\n.canvas-react-pagination-ellipsis {\n color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-pagination-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 7px;\n height: 7px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transition:\n border-color 0.18s ease,\n transform 0.18s ease,\n opacity 0.18s ease;\n}\n.canvas-react-pagination-arrow-prev {\n transform: translate(-42%, -50%) rotate(135deg);\n}\n.canvas-react-pagination-arrow-next {\n transform: translate(-58%, -50%) rotate(-45deg);\n}\n.canvas-react-pagination-button:hover .canvas-react-pagination-arrow {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-button:disabled .canvas-react-pagination-arrow {\n opacity: 0.56;\n}\n.canvas-react-pagination-quick {\n display: inline-flex;\n align-items: center;\n gap: var(--canvas-react-pagination-gap);\n flex-wrap: nowrap;\n}\n.canvas-react-pagination-total {\n color: var(--canvas-react-color-text-muted);\n}\n');
5989
+ styleInject('@import "../../styles/variables.css";\n.canvas-react-pagination {\n --canvas-react-pagination-control-size: 32px;\n --canvas-react-pagination-gap: 8px;\n --canvas-react-pagination-padding-inline: 10px;\n --canvas-react-control-height: var(--canvas-react-pagination-control-size);\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: var(--canvas-react-pagination-gap);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n white-space: nowrap;\n}\n.canvas-react-pagination-small {\n --canvas-react-pagination-control-size: 24px;\n --canvas-react-pagination-gap: 4px;\n --canvas-react-pagination-padding-inline: 6px;\n}\n.canvas-react-pagination > .canvas-react-select-wrap {\n flex: 0 0 auto;\n width: auto;\n height: auto;\n}\n.canvas-react-pagination > .canvas-react-select-wrap > .canvas-react-select {\n flex-shrink: 0;\n}\n.canvas-react-pagination-large {\n --canvas-react-pagination-control-size: 40px;\n --canvas-react-pagination-gap: 10px;\n --canvas-react-pagination-padding-inline: 14px;\n}\n.canvas-react-pagination-pages {\n display: inline-flex;\n align-items: center;\n gap: var(--canvas-react-pagination-gap);\n flex-wrap: nowrap;\n}\n.canvas-react-pagination-button,\n.canvas-react-pagination-page {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--canvas-react-pagination-control-size);\n height: var(--canvas-react-pagination-control-size);\n padding: 0 var(--canvas-react-pagination-padding-inline);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n color 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-pagination-button {\n position: relative;\n width: var(--canvas-react-pagination-control-size);\n min-width: var(--canvas-react-pagination-control-size);\n padding: 0;\n}\n.canvas-react-pagination-button:hover,\n.canvas-react-pagination-page:hover {\n border-color: var(--canvas-react-color-primary-hover);\n color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-page-active {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-bg-active);\n color: var(--canvas-react-color-primary);\n}\n.canvas-react-pagination-button:disabled,\n.canvas-react-pagination-page:disabled {\n opacity: 0.48;\n cursor: not-allowed;\n}\n.canvas-react-pagination-ellipsis {\n color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-pagination-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 7px;\n height: 7px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transition:\n border-color 0.18s ease,\n transform 0.18s ease,\n opacity 0.18s ease;\n}\n.canvas-react-pagination-arrow-prev {\n transform: translate(-42%, -50%) rotate(135deg);\n}\n.canvas-react-pagination-arrow-next {\n transform: translate(-58%, -50%) rotate(-45deg);\n}\n.canvas-react-pagination-button:hover .canvas-react-pagination-arrow {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-button:disabled .canvas-react-pagination-arrow {\n opacity: 0.56;\n}\n.canvas-react-pagination-quick {\n display: inline-flex;\n align-items: center;\n gap: var(--canvas-react-pagination-gap);\n flex-wrap: nowrap;\n}\n.canvas-react-pagination-total {\n color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-pagination button,\n.canvas-react-pagination input {\n font-family: inherit;\n font-weight: inherit;\n font-size: inherit;\n}\n');
5990
5990
  var DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
5991
5991
  function ReactPagination(props) {
5992
5992
  const {
@@ -6002,9 +6002,18 @@ function ReactPagination(props) {
6002
6002
  showTotal,
6003
6003
  simple,
6004
6004
  size = "middle",
6005
- total
6005
+ total,
6006
+ style: rootStyle,
6007
+ styles
6006
6008
  } = props;
6009
+ const style = { ...rootStyle, ...styles?.root };
6007
6010
  const [quickValue, setQuickValue] = useState("");
6011
+ const resolvedPageSizeOptions = useMemo(() => {
6012
+ if (pageSizeOptions.length === 0 || pageSizeOptions.includes(pageSize) || !Number.isSafeInteger(pageSize) || pageSize <= 0) {
6013
+ return pageSizeOptions;
6014
+ }
6015
+ return [...pageSizeOptions, pageSize].sort((left, right) => left - right);
6016
+ }, [pageSizeOptions, pageSize]);
6008
6017
  const totalPages = Math.max(1, Math.ceil(total / pageSize));
6009
6018
  const safeCurrent = clampPage(current, totalPages);
6010
6019
  const range = total === 0 ? [0, 0] : [
@@ -6032,75 +6041,120 @@ function ReactPagination(props) {
6032
6041
  return /* @__PURE__ */ jsxs(
6033
6042
  "div",
6034
6043
  {
6044
+ style: {
6045
+ ...style,
6046
+ ...style?.borderColor ? { "--canvas-react-color-border": style.borderColor } : {},
6047
+ ...style?.backgroundColor ? { "--canvas-react-color-bg": style.backgroundColor } : {},
6048
+ ...style?.color ? {
6049
+ "--canvas-react-color-text": style.color,
6050
+ "--canvas-react-color-text-muted": style.color
6051
+ } : {},
6052
+ ...style?.fontSize ? {
6053
+ "--canvas-react-font-size": typeof style.fontSize === "number" ? `${style.fontSize}px` : style.fontSize
6054
+ } : {}
6055
+ },
6035
6056
  className: `${REACT_COMPONENT_PREFIX}-pagination ${REACT_COMPONENT_PREFIX}-pagination-${size}`,
6036
6057
  children: [
6037
- showTotal ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: showTotal(total, range) }) : null,
6058
+ showTotal ? /* @__PURE__ */ jsx(
6059
+ "span",
6060
+ {
6061
+ style: styles?.total,
6062
+ className: `${REACT_COMPONENT_PREFIX}-pagination-total`,
6063
+ children: showTotal(total, range)
6064
+ }
6065
+ ) : null,
6038
6066
  /* @__PURE__ */ jsx(
6039
6067
  "button",
6040
6068
  {
6041
6069
  type: "button",
6042
6070
  className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
6043
6071
  "aria-label": "\u4E0A\u4E00\u9875",
6072
+ style: styles?.prevButton,
6044
6073
  disabled: disabled || safeCurrent <= 1,
6045
6074
  onClick: () => jumpToPage(safeCurrent - 1),
6046
6075
  children: /* @__PURE__ */ jsx(
6047
6076
  "span",
6048
6077
  {
6049
- className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-prev`
6078
+ className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-prev`,
6079
+ style: styles?.prevIcon
6050
6080
  }
6051
6081
  )
6052
6082
  }
6053
6083
  ),
6054
- simple ? /* @__PURE__ */ jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: [
6055
- safeCurrent,
6056
- " / ",
6057
- totalPages
6058
- ] }) : /* @__PURE__ */ jsx("div", { className: `${REACT_COMPONENT_PREFIX}-pagination-pages`, children: pages.map(
6059
- (item, index) => item === "..." ? /* @__PURE__ */ jsx(
6060
- "span",
6061
- {
6062
- className: `${REACT_COMPONENT_PREFIX}-pagination-ellipsis`,
6063
- children: "..."
6064
- },
6065
- `ellipsis-${index}`
6066
- ) : /* @__PURE__ */ jsx(
6067
- "button",
6068
- {
6069
- type: "button",
6070
- className: [
6071
- `${REACT_COMPONENT_PREFIX}-pagination-page`,
6072
- item === safeCurrent ? `${REACT_COMPONENT_PREFIX}-pagination-page-active` : ""
6073
- ].filter(Boolean).join(" "),
6074
- disabled,
6075
- onClick: () => jumpToPage(item),
6076
- children: item
6077
- },
6078
- item
6079
- )
6080
- ) }),
6084
+ simple ? /* @__PURE__ */ jsxs(
6085
+ "span",
6086
+ {
6087
+ style: styles?.pageItem,
6088
+ className: `${REACT_COMPONENT_PREFIX}-pagination-total`,
6089
+ children: [
6090
+ safeCurrent,
6091
+ " / ",
6092
+ totalPages
6093
+ ]
6094
+ }
6095
+ ) : /* @__PURE__ */ jsx(
6096
+ "div",
6097
+ {
6098
+ style: styles?.pages,
6099
+ className: `${REACT_COMPONENT_PREFIX}-pagination-pages`,
6100
+ children: pages.map(
6101
+ (item, index) => item === "..." ? /* @__PURE__ */ jsx(
6102
+ "span",
6103
+ {
6104
+ className: `${REACT_COMPONENT_PREFIX}-pagination-ellipsis`,
6105
+ style: styles?.ellipsis,
6106
+ children: "..."
6107
+ },
6108
+ `ellipsis-${index}`
6109
+ ) : /* @__PURE__ */ jsx(
6110
+ "button",
6111
+ {
6112
+ type: "button",
6113
+ style: {
6114
+ ...styles?.pageItem,
6115
+ ...item === safeCurrent ? styles?.activePageItem : void 0
6116
+ },
6117
+ className: [
6118
+ `${REACT_COMPONENT_PREFIX}-pagination-page`,
6119
+ item === safeCurrent ? `${REACT_COMPONENT_PREFIX}-pagination-page-active` : ""
6120
+ ].filter(Boolean).join(" "),
6121
+ disabled,
6122
+ onClick: () => jumpToPage(item),
6123
+ children: item
6124
+ },
6125
+ item
6126
+ )
6127
+ )
6128
+ }
6129
+ ),
6081
6130
  /* @__PURE__ */ jsx(
6082
6131
  "button",
6083
6132
  {
6084
6133
  type: "button",
6085
6134
  className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
6086
6135
  "aria-label": "\u4E0B\u4E00\u9875",
6136
+ style: styles?.nextButton,
6087
6137
  disabled: disabled || safeCurrent >= totalPages,
6088
6138
  onClick: () => jumpToPage(safeCurrent + 1),
6089
6139
  children: /* @__PURE__ */ jsx(
6090
6140
  "span",
6091
6141
  {
6092
- className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-next`
6142
+ className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-next`,
6143
+ style: styles?.nextIcon
6093
6144
  }
6094
6145
  )
6095
6146
  }
6096
6147
  ),
6097
- showSizeChanger && pageSizeOptions?.length ? /* @__PURE__ */ jsx(
6148
+ showSizeChanger && resolvedPageSizeOptions.length ? /* @__PURE__ */ jsx(
6098
6149
  ReactSelect,
6099
6150
  {
6100
6151
  value: String(pageSize),
6101
6152
  disabled,
6102
- style: { width: resolvePaginationSelectWidth(size) },
6103
- options: pageSizeOptions.map((size2) => ({
6153
+ style: {
6154
+ width: resolvePaginationSelectWidth(size, resolvedPageSizeOptions),
6155
+ ...styles?.sizeChanger
6156
+ },
6157
+ options: resolvedPageSizeOptions.map((size2) => ({
6104
6158
  label: `${size2} / \u9875`,
6105
6159
  value: size2
6106
6160
  })),
@@ -6113,33 +6167,62 @@ function ReactPagination(props) {
6113
6167
  }
6114
6168
  }
6115
6169
  ) : null,
6116
- showQuickJumper ? /* @__PURE__ */ jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-pagination-quick`, children: [
6117
- /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: "\u8DF3\u81F3" }),
6118
- /* @__PURE__ */ jsx(
6119
- ReactInput,
6120
- {
6121
- value: quickValue,
6122
- disabled,
6123
- style: { width: resolvePaginationInputWidth(size) },
6124
- onChange: (event) => {
6125
- setQuickValue(event.target.value.replace(/[^\d]/g, ""));
6126
- },
6127
- onPressEnter: () => {
6128
- handleQuickCommit();
6129
- },
6130
- onBlur: () => {
6131
- handleQuickCommit();
6132
- }
6133
- }
6134
- ),
6135
- /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: "\u9875" })
6136
- ] }) : null
6170
+ showQuickJumper ? /* @__PURE__ */ jsxs(
6171
+ "div",
6172
+ {
6173
+ style: styles?.quickJumper,
6174
+ className: `${REACT_COMPONENT_PREFIX}-pagination-quick`,
6175
+ children: [
6176
+ /* @__PURE__ */ jsx(
6177
+ "span",
6178
+ {
6179
+ style: styles?.quickJumperText,
6180
+ className: `${REACT_COMPONENT_PREFIX}-pagination-total`,
6181
+ children: "\u8DF3\u81F3"
6182
+ }
6183
+ ),
6184
+ /* @__PURE__ */ jsx(
6185
+ ReactInput,
6186
+ {
6187
+ value: quickValue,
6188
+ disabled,
6189
+ style: {
6190
+ width: resolvePaginationInputWidth(size),
6191
+ ...styles?.quickJumperInput
6192
+ },
6193
+ onChange: (event) => {
6194
+ setQuickValue(event.target.value.replace(/[^\d]/g, ""));
6195
+ },
6196
+ onPressEnter: () => {
6197
+ handleQuickCommit();
6198
+ },
6199
+ onBlur: () => {
6200
+ handleQuickCommit();
6201
+ }
6202
+ }
6203
+ ),
6204
+ /* @__PURE__ */ jsx(
6205
+ "span",
6206
+ {
6207
+ style: styles?.quickJumperText,
6208
+ className: `${REACT_COMPONENT_PREFIX}-pagination-total`,
6209
+ children: "\u9875"
6210
+ }
6211
+ )
6212
+ ]
6213
+ }
6214
+ ) : null
6137
6215
  ]
6138
6216
  }
6139
6217
  );
6140
6218
  }
6141
- function resolvePaginationSelectWidth(size) {
6142
- return size === "small" ? 92 : size === "large" ? 120 : 108;
6219
+ function resolvePaginationSelectWidth(size, pageSizeOptions) {
6220
+ const minWidth = size === "large" ? 120 : 108;
6221
+ const digits = Math.max(
6222
+ 1,
6223
+ ...pageSizeOptions.map((value) => String(value).length)
6224
+ );
6225
+ return `max(${minWidth}px, calc(${digits}ch + 3em + 44px))`;
6143
6226
  }
6144
6227
  function resolvePaginationInputWidth(size) {
6145
6228
  return size === "small" ? 56 : size === "large" ? 80 : 72;