@canvas-components/react-components 0.3.2 → 0.3.4

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 (8) hide show
  1. package/README.md +11 -4
  2. package/dist/index.cjs +492 -100
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +143 -2
  5. package/dist/index.d.ts +143 -2
  6. package/dist/index.js +483 -102
  7. package/dist/index.js.map +1 -1
  8. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -47,7 +47,7 @@ function styleInject(css, { insertAt } = {}) {
47
47
  }
48
48
 
49
49
  // src/styles/variables.css
50
- styleInject(':root {\n --canvas-react-color-primary: #1677ff;\n --canvas-react-color-primary-hover: #4096ff;\n --canvas-react-color-border: #d9d9d9;\n --canvas-react-color-border-strong: #bfbfbf;\n --canvas-react-color-text: #1f2937;\n --canvas-react-color-text-muted: #6b7280;\n --canvas-react-color-bg: #ffffff;\n --canvas-react-color-bg-soft: #f5f5f5;\n --canvas-react-color-bg-hover: #f3f4f6;\n --canvas-react-color-bg-active: #e6f4ff;\n --canvas-react-shadow-focus: 0 0 0 2px rgba(22, 119, 255, 0.12);\n --canvas-react-shadow-popup: 0 8px 24px rgba(15, 23, 42, 0.16);\n --canvas-react-radius-sm: 6px;\n --canvas-react-radius-md: 8px;\n --canvas-react-control-height: 32px;\n --canvas-react-font-size: 14px;\n --canvas-react-control-padding-inline: 11px;\n --canvas-react-control-padding-block: 0px;\n --canvas-react-content-zoom: 1;\n}\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"]),\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"]) * {\n scrollbar-width: thin;\n scrollbar-color: #aeb4bd transparent;\n}\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"])::-webkit-scrollbar,\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"]) *::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"])::-webkit-scrollbar-track,\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"]) *::-webkit-scrollbar-track {\n background: transparent;\n}\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"])::-webkit-scrollbar-thumb,\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"]) *::-webkit-scrollbar-thumb {\n min-height: 32px;\n border: 2px solid transparent;\n border-radius: 999px;\n background: #aeb4bd;\n background-clip: content-box;\n}\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"])::-webkit-scrollbar-thumb:hover,\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"]) *::-webkit-scrollbar-thumb:hover {\n background: #8f98a5;\n background-clip: content-box;\n}\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"])::-webkit-scrollbar-corner,\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"]) *::-webkit-scrollbar-corner {\n background: transparent;\n}\n');
50
+ styleInject(":root {\n --canvas-react-color-primary: #1677ff;\n --canvas-react-color-primary-hover: #4096ff;\n --canvas-react-color-border: #d9d9d9;\n --canvas-react-color-border-strong: #bfbfbf;\n --canvas-react-color-text: #1f2937;\n --canvas-react-color-text-muted: #6b7280;\n --canvas-react-color-bg: #ffffff;\n --canvas-react-color-bg-soft: #f5f5f5;\n --canvas-react-color-bg-hover: #f3f4f6;\n --canvas-react-color-bg-active: #e6f4ff;\n --canvas-react-shadow-focus: 0 0 0 2px rgba(22, 119, 255, 0.12);\n --canvas-react-shadow-popup: 0 8px 24px rgba(15, 23, 42, 0.16);\n --canvas-react-radius-sm: 6px;\n --canvas-react-radius-md: 8px;\n --canvas-react-control-height: 32px;\n --canvas-react-font-size: 14px;\n --canvas-react-control-padding-inline: 11px;\n --canvas-react-control-padding-block: 0px;\n --canvas-react-content-zoom: 1;\n}\n.canvas-react-scrollbar {\n scrollbar-width: thin;\n}\n.canvas-react-scrollbar::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n.canvas-react-scrollbar::-webkit-scrollbar-track {\n background: transparent;\n}\n.canvas-react-scrollbar::-webkit-scrollbar-thumb {\n min-height: 32px;\n border: 2px solid transparent;\n border-radius: 999px;\n background: #aeb4bd;\n background-clip: content-box;\n}\n.canvas-react-scrollbar::-webkit-scrollbar-thumb:hover {\n background: #8f98a5;\n background-clip: content-box;\n}\n.canvas-react-scrollbar::-webkit-scrollbar-corner {\n background: transparent;\n}\n");
51
51
 
52
52
  // src/shared/class-names.ts
53
53
  function joinClassNames(...values) {
@@ -676,7 +676,11 @@ var ReactVirtualList = React.forwardRef(function ReactVirtualListInner(props, re
676
676
  "div",
677
677
  {
678
678
  ref: hostRef,
679
- className: joinClassNames(`${REACT_COMPONENT_PREFIX}-virtual-list`, className),
679
+ className: joinClassNames(
680
+ `${REACT_COMPONENT_PREFIX}-virtual-list`,
681
+ `${REACT_COMPONENT_PREFIX}-scrollbar`,
682
+ className
683
+ ),
680
684
  style: { height, ...style },
681
685
  onScroll: (event) => {
682
686
  setScrollTop(event.currentTarget.scrollTop);
@@ -5366,6 +5370,7 @@ var bodyOverflowBeforeLock = "";
5366
5370
  function ReactModal(props) {
5367
5371
  const {
5368
5372
  afterClose,
5373
+ afterOpenChange,
5369
5374
  bodyStyle,
5370
5375
  cancelButtonProps,
5371
5376
  cancelText = "\u53D6\u6D88",
@@ -5409,11 +5414,21 @@ function ReactModal(props) {
5409
5414
  const dragRef = React.useRef(null);
5410
5415
  const restoreFocusRef = React.useRef(null);
5411
5416
  const wasRenderedRef = React.useRef(false);
5417
+ const afterOpenChangeRef = React.useRef(afterOpenChange);
5418
+ const previousOpenRef = React.useRef();
5419
+ afterOpenChangeRef.current = afterOpenChange;
5412
5420
  const titleId = useCompatibleId(`${REACT_COMPONENT_PREFIX}-modal-title`);
5413
5421
  const controlledFullscreen = fullscreen !== void 0;
5414
5422
  const mergedFullscreen = controlledFullscreen ? Boolean(fullscreen) : innerFullscreen;
5415
5423
  const mergedConfirmLoading = confirmLoading ?? innerConfirmLoading;
5416
5424
  const hasTitle = title !== null && title !== void 0 && title !== false;
5425
+ React.useEffect(() => {
5426
+ if (previousOpenRef.current === open) {
5427
+ return;
5428
+ }
5429
+ previousOpenRef.current = open;
5430
+ afterOpenChangeRef.current?.(open);
5431
+ }, [open]);
5417
5432
  React.useEffect(() => {
5418
5433
  if (!draggable || !transition.rendered) return;
5419
5434
  const handleMouseMove = (event) => {
@@ -5992,7 +6007,7 @@ function formatDisplayValue(value, formatter, precision, step) {
5992
6007
  }
5993
6008
 
5994
6009
  // src/components/pagination/style.css
5995
- styleInject('@import "../../styles/variables.css";\n.canvas-react-pagination {\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: 8px;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n white-space: nowrap;\n}\n.canvas-react-pagination-pages {\n display: inline-flex;\n align-items: center;\n gap: 8px;\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: 32px;\n height: 32px;\n padding: 0 10px;\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: 32px;\n min-width: 32px;\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: 8px;\n flex-wrap: nowrap;\n}\n.canvas-react-pagination-total {\n color: var(--canvas-react-color-text-muted);\n}\n');
6010
+ 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');
5996
6011
  function ReactPagination(props) {
5997
6012
  const {
5998
6013
  current,
@@ -6006,6 +6021,7 @@ function ReactPagination(props) {
6006
6021
  showSizeChanger,
6007
6022
  showTotal,
6008
6023
  simple,
6024
+ size = "middle",
6009
6025
  total
6010
6026
  } = props;
6011
6027
  const [quickValue, setQuickValue] = React.useState("");
@@ -6033,108 +6049,120 @@ function ReactPagination(props) {
6033
6049
  jumpToPage(Number(quickValue));
6034
6050
  setQuickValue("");
6035
6051
  };
6036
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-pagination`, children: [
6037
- showTotal ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: showTotal(total, range) }) : null,
6038
- /* @__PURE__ */ jsxRuntime.jsx(
6039
- "button",
6040
- {
6041
- type: "button",
6042
- className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
6043
- "aria-label": "\u4E0A\u4E00\u9875",
6044
- disabled: disabled || safeCurrent <= 1,
6045
- onClick: () => jumpToPage(safeCurrent - 1),
6046
- children: /* @__PURE__ */ jsxRuntime.jsx(
6047
- "span",
6052
+ return /* @__PURE__ */ jsxRuntime.jsxs(
6053
+ "div",
6054
+ {
6055
+ className: `${REACT_COMPONENT_PREFIX}-pagination ${REACT_COMPONENT_PREFIX}-pagination-${size}`,
6056
+ children: [
6057
+ showTotal ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: showTotal(total, range) }) : null,
6058
+ /* @__PURE__ */ jsxRuntime.jsx(
6059
+ "button",
6048
6060
  {
6049
- className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-prev`
6061
+ type: "button",
6062
+ className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
6063
+ "aria-label": "\u4E0A\u4E00\u9875",
6064
+ disabled: disabled || safeCurrent <= 1,
6065
+ onClick: () => jumpToPage(safeCurrent - 1),
6066
+ children: /* @__PURE__ */ jsxRuntime.jsx(
6067
+ "span",
6068
+ {
6069
+ className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-prev`
6070
+ }
6071
+ )
6050
6072
  }
6051
- )
6052
- }
6053
- ),
6054
- simple ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: [
6055
- safeCurrent,
6056
- " / ",
6057
- totalPages
6058
- ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-pagination-pages`, children: pages.map(
6059
- (item, index) => item === "..." ? /* @__PURE__ */ jsxRuntime.jsx(
6060
- "span",
6061
- {
6062
- className: `${REACT_COMPONENT_PREFIX}-pagination-ellipsis`,
6063
- children: "..."
6064
- },
6065
- `ellipsis-${index}`
6066
- ) : /* @__PURE__ */ jsxRuntime.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
- ) }),
6081
- /* @__PURE__ */ jsxRuntime.jsx(
6082
- "button",
6083
- {
6084
- type: "button",
6085
- className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
6086
- "aria-label": "\u4E0B\u4E00\u9875",
6087
- disabled: disabled || safeCurrent >= totalPages,
6088
- onClick: () => jumpToPage(safeCurrent + 1),
6089
- children: /* @__PURE__ */ jsxRuntime.jsx(
6090
- "span",
6073
+ ),
6074
+ simple ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: [
6075
+ safeCurrent,
6076
+ " / ",
6077
+ totalPages
6078
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-pagination-pages`, children: pages.map(
6079
+ (item, index) => item === "..." ? /* @__PURE__ */ jsxRuntime.jsx(
6080
+ "span",
6081
+ {
6082
+ className: `${REACT_COMPONENT_PREFIX}-pagination-ellipsis`,
6083
+ children: "..."
6084
+ },
6085
+ `ellipsis-${index}`
6086
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
6087
+ "button",
6088
+ {
6089
+ type: "button",
6090
+ className: [
6091
+ `${REACT_COMPONENT_PREFIX}-pagination-page`,
6092
+ item === safeCurrent ? `${REACT_COMPONENT_PREFIX}-pagination-page-active` : ""
6093
+ ].filter(Boolean).join(" "),
6094
+ disabled,
6095
+ onClick: () => jumpToPage(item),
6096
+ children: item
6097
+ },
6098
+ item
6099
+ )
6100
+ ) }),
6101
+ /* @__PURE__ */ jsxRuntime.jsx(
6102
+ "button",
6091
6103
  {
6092
- className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-next`
6093
- }
6094
- )
6095
- }
6096
- ),
6097
- showSizeChanger && pageSizeOptions?.length ? /* @__PURE__ */ jsxRuntime.jsx(
6098
- ReactSelect,
6099
- {
6100
- value: String(pageSize),
6101
- disabled,
6102
- style: { width: 108 },
6103
- options: pageSizeOptions.map((size) => ({
6104
- label: `${size} / \u9875`,
6105
- value: size
6106
- })),
6107
- onChange: (value) => {
6108
- const nextPageSize = Number(value);
6109
- if (!Number.isFinite(nextPageSize)) {
6110
- return;
6104
+ type: "button",
6105
+ className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
6106
+ "aria-label": "\u4E0B\u4E00\u9875",
6107
+ disabled: disabled || safeCurrent >= totalPages,
6108
+ onClick: () => jumpToPage(safeCurrent + 1),
6109
+ children: /* @__PURE__ */ jsxRuntime.jsx(
6110
+ "span",
6111
+ {
6112
+ className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-next`
6113
+ }
6114
+ )
6111
6115
  }
6112
- onPageSizeChange?.(1, nextPageSize);
6113
- }
6114
- }
6115
- ) : null,
6116
- showQuickJumper ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-pagination-quick`, children: [
6117
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: "\u8DF3\u81F3" }),
6118
- /* @__PURE__ */ jsxRuntime.jsx(
6119
- ReactInput,
6120
- {
6121
- value: quickValue,
6122
- disabled,
6123
- style: { width: 72 },
6124
- onChange: (event) => {
6125
- setQuickValue(event.target.value.replace(/[^\d]/g, ""));
6126
- },
6127
- onPressEnter: () => {
6128
- handleQuickCommit();
6129
- },
6130
- onBlur: () => {
6131
- handleQuickCommit();
6116
+ ),
6117
+ showSizeChanger && pageSizeOptions?.length ? /* @__PURE__ */ jsxRuntime.jsx(
6118
+ ReactSelect,
6119
+ {
6120
+ value: String(pageSize),
6121
+ disabled,
6122
+ style: { width: resolvePaginationSelectWidth(size) },
6123
+ options: pageSizeOptions.map((size2) => ({
6124
+ label: `${size2} / \u9875`,
6125
+ value: size2
6126
+ })),
6127
+ onChange: (value) => {
6128
+ const nextPageSize = Number(value);
6129
+ if (!Number.isFinite(nextPageSize)) {
6130
+ return;
6131
+ }
6132
+ onPageSizeChange?.(1, nextPageSize);
6133
+ }
6132
6134
  }
6133
- }
6134
- ),
6135
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: "\u9875" })
6136
- ] }) : null
6137
- ] });
6135
+ ) : null,
6136
+ showQuickJumper ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-pagination-quick`, children: [
6137
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: "\u8DF3\u81F3" }),
6138
+ /* @__PURE__ */ jsxRuntime.jsx(
6139
+ ReactInput,
6140
+ {
6141
+ value: quickValue,
6142
+ disabled,
6143
+ style: { width: resolvePaginationInputWidth(size) },
6144
+ onChange: (event) => {
6145
+ setQuickValue(event.target.value.replace(/[^\d]/g, ""));
6146
+ },
6147
+ onPressEnter: () => {
6148
+ handleQuickCommit();
6149
+ },
6150
+ onBlur: () => {
6151
+ handleQuickCommit();
6152
+ }
6153
+ }
6154
+ ),
6155
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: "\u9875" })
6156
+ ] }) : null
6157
+ ]
6158
+ }
6159
+ );
6160
+ }
6161
+ function resolvePaginationSelectWidth(size) {
6162
+ return size === "small" ? 92 : size === "large" ? 120 : 108;
6163
+ }
6164
+ function resolvePaginationInputWidth(size) {
6165
+ return size === "small" ? 56 : size === "large" ? 80 : 72;
6138
6166
  }
6139
6167
  function buildPageItems(current, totalPages, showLessItems) {
6140
6168
  if (totalPages <= 1) {
@@ -8061,9 +8089,364 @@ function resolveDecadeStart6(year) {
8061
8089
  return Math.floor(year / 10) * 10;
8062
8090
  }
8063
8091
 
8092
+ // src/components/compat/style.css
8093
+ styleInject(".canvas-react-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n min-height: 32px;\n padding: 4px 14px;\n border: 1px solid var(--cc-border-color, #d9d9d9);\n border-radius: 6px;\n color: var(--cc-text-color, #1f2937);\n background: var(--cc-surface-color, #fff);\n cursor: pointer;\n}\n.canvas-react-button:hover:not(:disabled) {\n color: #1677ff;\n border-color: #1677ff;\n}\n.canvas-react-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.canvas-react-button-primary {\n color: #fff;\n border-color: #1677ff;\n background: #1677ff;\n}\n.canvas-react-button-danger {\n color: #dc2626;\n border-color: #fca5a5;\n}\n.canvas-react-button-small {\n min-height: 24px;\n padding: 2px 8px;\n}\n.canvas-react-button-large {\n min-height: 40px;\n padding: 6px 18px;\n}\n.canvas-react-button-icon {\n display: inline-flex;\n}\n.canvas-react-row {\n display: flex;\n flex-flow: row wrap;\n}\n.canvas-react-col {\n min-width: 0;\n padding-inline: 8px;\n}\n.canvas-react-radio-group {\n display: flex;\n gap: 16px;\n}\n.canvas-react-radio {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n}\n.canvas-react-radio input {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n.canvas-react-radio-mark {\n width: 14px;\n height: 14px;\n border: 1px solid #94a3b8;\n border-radius: 50%;\n box-sizing: border-box;\n}\n.canvas-react-radio input:checked + .canvas-react-radio-mark {\n border: 4px solid #1677ff;\n}\n.canvas-react-form-item {\n display: flex;\n flex-direction: column;\n gap: 6px;\n margin-bottom: 16px;\n}\n.canvas-react-form-label {\n color: #334155;\n font-size: 14px;\n}\n.canvas-react-form-error {\n color: #dc2626;\n font-size: 12px;\n}\n.canvas-react-textarea {\n width: 100%;\n min-height: 72px;\n padding: 8px 10px;\n border: 1px solid #d9d9d9;\n border-radius: 6px;\n box-sizing: border-box;\n font: inherit;\n resize: vertical;\n}\n.canvas-react-message-host {\n position: fixed;\n z-index: 3000;\n top: 24px;\n left: 50%;\n display: flex;\n flex-direction: column;\n gap: 8px;\n transform: translateX(-50%);\n pointer-events: none;\n}\n.canvas-react-message {\n padding: 9px 14px;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n color: #334155;\n background: #fff;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);\n}\n.canvas-react-message-error {\n color: #b91c1c;\n border-color: #fecaca;\n}\n");
8094
+ function ReactButton({
8095
+ children,
8096
+ className,
8097
+ danger,
8098
+ htmlType = "button",
8099
+ icon,
8100
+ size = "middle",
8101
+ type = "default",
8102
+ ...props
8103
+ }) {
8104
+ return /* @__PURE__ */ jsxRuntime.jsxs(
8105
+ "button",
8106
+ {
8107
+ ...props,
8108
+ type: htmlType,
8109
+ className: joinClassNames(
8110
+ `${REACT_COMPONENT_PREFIX}-button`,
8111
+ `${REACT_COMPONENT_PREFIX}-button-${type}`,
8112
+ `${REACT_COMPONENT_PREFIX}-button-${size}`,
8113
+ danger && `${REACT_COMPONENT_PREFIX}-button-danger`,
8114
+ className
8115
+ ),
8116
+ children: [
8117
+ icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-button-icon`, children: icon }) : null,
8118
+ children
8119
+ ]
8120
+ }
8121
+ );
8122
+ }
8123
+ function ReactFlex({
8124
+ vertical,
8125
+ justify,
8126
+ align,
8127
+ gap,
8128
+ style,
8129
+ ...props
8130
+ }) {
8131
+ return /* @__PURE__ */ jsxRuntime.jsx(
8132
+ "div",
8133
+ {
8134
+ ...props,
8135
+ style: {
8136
+ display: "flex",
8137
+ flexDirection: vertical ? "column" : "row",
8138
+ justifyContent: justify,
8139
+ alignItems: align,
8140
+ gap,
8141
+ ...style
8142
+ }
8143
+ }
8144
+ );
8145
+ }
8146
+ function ReactRow({ gutter = 0, style, ...props }) {
8147
+ return /* @__PURE__ */ jsxRuntime.jsx(
8148
+ "div",
8149
+ {
8150
+ ...props,
8151
+ className: joinClassNames(
8152
+ `${REACT_COMPONENT_PREFIX}-row`,
8153
+ props.className
8154
+ ),
8155
+ style: { marginInline: -gutter / 2, ...style }
8156
+ }
8157
+ );
8158
+ }
8159
+ function ReactCol({ span = 24, style, ...props }) {
8160
+ return /* @__PURE__ */ jsxRuntime.jsx(
8161
+ "div",
8162
+ {
8163
+ ...props,
8164
+ className: joinClassNames(
8165
+ `${REACT_COMPONENT_PREFIX}-col`,
8166
+ props.className
8167
+ ),
8168
+ style: {
8169
+ flex: `0 0 ${span / 24 * 100}%`,
8170
+ maxWidth: `${span / 24 * 100}%`,
8171
+ ...style
8172
+ }
8173
+ }
8174
+ );
8175
+ }
8176
+ function ReactTooltip({ title, children }) {
8177
+ return React.cloneElement(children, {
8178
+ title: typeof title === "string" ? title : void 0,
8179
+ "aria-label": typeof title === "string" ? title : void 0
8180
+ });
8181
+ }
8182
+ var RadioGroupContext = React.createContext({});
8183
+ function ReactRadioOption({
8184
+ value,
8185
+ checked,
8186
+ disabled,
8187
+ onChange,
8188
+ children,
8189
+ className,
8190
+ ...props
8191
+ }) {
8192
+ const group = React.useContext(RadioGroupContext);
8193
+ const selected = checked ?? String(group.value ?? "") === String(value);
8194
+ return /* @__PURE__ */ jsxRuntime.jsxs(
8195
+ "label",
8196
+ {
8197
+ ...props,
8198
+ className: joinClassNames(
8199
+ `${REACT_COMPONENT_PREFIX}-radio`,
8200
+ disabled && `${REACT_COMPONENT_PREFIX}-radio-disabled`,
8201
+ className
8202
+ ),
8203
+ children: [
8204
+ /* @__PURE__ */ jsxRuntime.jsx(
8205
+ "input",
8206
+ {
8207
+ type: "radio",
8208
+ checked: selected,
8209
+ disabled,
8210
+ onChange: () => {
8211
+ const event = { target: { value } };
8212
+ onChange?.(event);
8213
+ group.onChange?.(event);
8214
+ }
8215
+ }
8216
+ ),
8217
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-radio-mark` }),
8218
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children })
8219
+ ]
8220
+ }
8221
+ );
8222
+ }
8223
+ function ReactRadioGroup({
8224
+ value,
8225
+ onChange,
8226
+ className,
8227
+ ...props
8228
+ }) {
8229
+ return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.Provider, { value: { value, onChange }, children: /* @__PURE__ */ jsxRuntime.jsx(
8230
+ "div",
8231
+ {
8232
+ ...props,
8233
+ className: joinClassNames(
8234
+ `${REACT_COMPONENT_PREFIX}-radio-group`,
8235
+ className
8236
+ )
8237
+ }
8238
+ ) });
8239
+ }
8240
+ var ReactRadio = Object.assign(ReactRadioOption, {
8241
+ Group: ReactRadioGroup
8242
+ });
8243
+ function ReactTextArea({ className, ...props }) {
8244
+ return /* @__PURE__ */ jsxRuntime.jsx(
8245
+ "textarea",
8246
+ {
8247
+ ...props,
8248
+ className: joinClassNames(
8249
+ `${REACT_COMPONENT_PREFIX}-textarea`,
8250
+ className
8251
+ )
8252
+ }
8253
+ );
8254
+ }
8255
+ function createFormInstance() {
8256
+ const store = {
8257
+ values: {},
8258
+ initialValues: {},
8259
+ errors: {},
8260
+ rules: /* @__PURE__ */ new Map(),
8261
+ listeners: /* @__PURE__ */ new Set(),
8262
+ revision: 0,
8263
+ notify() {
8264
+ store.revision += 1;
8265
+ store.listeners.forEach((listener) => listener());
8266
+ }
8267
+ };
8268
+ return {
8269
+ __store: store,
8270
+ getFieldValue: (name) => store.values[name],
8271
+ setFieldsValue(values) {
8272
+ store.values = { ...store.values, ...values };
8273
+ Object.keys(values).forEach((name) => {
8274
+ delete store.errors[name];
8275
+ });
8276
+ store.notify();
8277
+ },
8278
+ resetFields() {
8279
+ store.values = { ...store.initialValues };
8280
+ store.errors = {};
8281
+ store.notify();
8282
+ },
8283
+ async validateFields() {
8284
+ const errors = {};
8285
+ for (const [name, rules] of store.rules) {
8286
+ const value = store.values[name];
8287
+ for (const rawRule of rules) {
8288
+ const rule = typeof rawRule === "function" ? rawRule({ getFieldValue: (field) => store.values[field] }) : rawRule;
8289
+ if (rule.required && (value === void 0 || value === null || value === "")) {
8290
+ errors[name] = rule.message ?? "\u6B64\u9879\u4E3A\u5FC5\u586B\u9879";
8291
+ break;
8292
+ }
8293
+ if ((rule.type === "number" || rule.type === "integer") && typeof value === "number" && rule.min !== void 0 && value < rule.min) {
8294
+ errors[name] = rule.message ?? `\u4E0D\u80FD\u5C0F\u4E8E ${rule.min}`;
8295
+ break;
8296
+ }
8297
+ if ((rule.type === "number" || rule.type === "integer") && typeof value === "number" && rule.max !== void 0 && value > rule.max) {
8298
+ errors[name] = rule.message ?? `\u4E0D\u80FD\u5927\u4E8E ${rule.max}`;
8299
+ break;
8300
+ }
8301
+ if (rule.type === "integer" && typeof value === "number" && !Number.isInteger(value)) {
8302
+ errors[name] = rule.message ?? "\u8BF7\u8F93\u5165\u6574\u6570";
8303
+ break;
8304
+ }
8305
+ if (rule.validator) {
8306
+ try {
8307
+ await rule.validator(rule, value);
8308
+ } catch (error) {
8309
+ errors[name] = error instanceof Error ? error.message : "\u6821\u9A8C\u5931\u8D25";
8310
+ break;
8311
+ }
8312
+ }
8313
+ }
8314
+ }
8315
+ store.errors = errors;
8316
+ store.notify();
8317
+ if (Object.keys(errors).length > 0) {
8318
+ return Promise.reject({
8319
+ errorFields: errors,
8320
+ values: { ...store.values }
8321
+ });
8322
+ }
8323
+ return { ...store.values };
8324
+ }
8325
+ };
8326
+ }
8327
+ function useReactForm() {
8328
+ const formRef = React.useRef();
8329
+ if (!formRef.current) formRef.current = createFormInstance();
8330
+ return [formRef.current];
8331
+ }
8332
+ function useReactFormWatch(name, form) {
8333
+ return React.useSyncExternalStore(
8334
+ (listener) => {
8335
+ form.__store.listeners.add(listener);
8336
+ return () => form.__store.listeners.delete(listener);
8337
+ },
8338
+ () => form.__store.revision,
8339
+ () => 0
8340
+ ) >= 0 ? form.getFieldValue(name) : void 0;
8341
+ }
8342
+ var FormContext = React.createContext(null);
8343
+ function ReactFormRoot({
8344
+ form,
8345
+ initialValues,
8346
+ layout = "vertical",
8347
+ className,
8348
+ children,
8349
+ ...props
8350
+ }) {
8351
+ const initialKey = React.useMemo(
8352
+ () => JSON.stringify(initialValues ?? {}),
8353
+ [initialValues]
8354
+ );
8355
+ React.useEffect(() => {
8356
+ form.__store.initialValues = { ...initialValues };
8357
+ form.__store.values = { ...initialValues, ...form.__store.values };
8358
+ form.__store.notify();
8359
+ }, [form, initialKey]);
8360
+ return /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: form, children: /* @__PURE__ */ jsxRuntime.jsx(
8361
+ "form",
8362
+ {
8363
+ ...props,
8364
+ className: joinClassNames(
8365
+ `${REACT_COMPONENT_PREFIX}-form`,
8366
+ `${REACT_COMPONENT_PREFIX}-form-${layout}`,
8367
+ className
8368
+ ),
8369
+ onSubmit: (event) => event.preventDefault(),
8370
+ children
8371
+ }
8372
+ ) });
8373
+ }
8374
+ function ReactFormItem({
8375
+ label,
8376
+ name,
8377
+ children,
8378
+ rules = [],
8379
+ initialValue
8380
+ }) {
8381
+ const form = React.useContext(FormContext);
8382
+ if (!form) throw new Error("ReactForm.Item \u5FC5\u987B\u5728 ReactForm \u5185\u4F7F\u7528");
8383
+ React.useSyncExternalStore(
8384
+ (listener) => {
8385
+ form.__store.listeners.add(listener);
8386
+ return () => form.__store.listeners.delete(listener);
8387
+ },
8388
+ () => form.__store.revision,
8389
+ () => 0
8390
+ );
8391
+ React.useEffect(() => {
8392
+ form.__store.rules.set(name, rules);
8393
+ if (form.getFieldValue(name) === void 0 && initialValue !== void 0) {
8394
+ form.setFieldsValue({ [name]: initialValue });
8395
+ }
8396
+ return () => {
8397
+ form.__store.rules.delete(name);
8398
+ };
8399
+ }, [form, initialValue, name, rules]);
8400
+ const childProps = children.props;
8401
+ const value = form.getFieldValue(name);
8402
+ return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: `${REACT_COMPONENT_PREFIX}-form-item`, children: [
8403
+ label ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-label`, children: label }) : null,
8404
+ React.cloneElement(children, {
8405
+ value: value ?? "",
8406
+ onChange: (...args) => {
8407
+ const first = args[0];
8408
+ const nextValue = typeof first === "object" && first !== null && "target" in first ? first.target?.value : first;
8409
+ form.setFieldsValue({ [name]: nextValue });
8410
+ const childOnChange = childProps.onChange;
8411
+ if (typeof childOnChange === "function") childOnChange(...args);
8412
+ }
8413
+ }),
8414
+ form.__store.errors[name] ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-error`, children: form.__store.errors[name] }) : null
8415
+ ] });
8416
+ }
8417
+ var ReactForm = Object.assign(ReactFormRoot, {
8418
+ Item: ReactFormItem,
8419
+ useForm: useReactForm,
8420
+ useWatch: useReactFormWatch
8421
+ });
8422
+ function showMessage(type, content) {
8423
+ if (typeof document === "undefined") return;
8424
+ const hostId = `${REACT_COMPONENT_PREFIX}-message-host`;
8425
+ let host = document.getElementById(hostId);
8426
+ if (!host) {
8427
+ host = document.createElement("div");
8428
+ host.id = hostId;
8429
+ host.className = hostId;
8430
+ document.body.appendChild(host);
8431
+ }
8432
+ const item = document.createElement("div");
8433
+ item.className = `${REACT_COMPONENT_PREFIX}-message ${REACT_COMPONENT_PREFIX}-message-${type}`;
8434
+ item.textContent = typeof content === "string" ? content : String(content ?? "");
8435
+ host.appendChild(item);
8436
+ window.setTimeout(() => item.remove(), 3e3);
8437
+ }
8438
+ var reactMessage = {
8439
+ info: (content) => showMessage("info", content),
8440
+ success: (content) => showMessage("success", content),
8441
+ warning: (content) => showMessage("warning", content),
8442
+ error: (content) => showMessage("error", content)
8443
+ };
8444
+
8064
8445
  exports.REACT_COMPONENT_PREFIX = REACT_COMPONENT_PREFIX;
8065
8446
  exports.ReactAutoComplete = ReactAutoComplete;
8447
+ exports.ReactButton = ReactButton;
8066
8448
  exports.ReactCheckbox = ReactCheckbox;
8449
+ exports.ReactCol = ReactCol;
8067
8450
  exports.ReactColorPicker = ReactColorPicker;
8068
8451
  exports.ReactContentScaleProvider = ReactContentScaleProvider;
8069
8452
  exports.ReactDatePicker = ReactDatePicker;
@@ -8071,6 +8454,8 @@ exports.ReactDateRangePicker = ReactDateRangePicker;
8071
8454
  exports.ReactDateTimePicker = ReactDateTimePicker;
8072
8455
  exports.ReactDateTimeRangePicker = ReactDateTimeRangePicker;
8073
8456
  exports.ReactFilterPanel = ReactFilterPanel;
8457
+ exports.ReactFlex = ReactFlex;
8458
+ exports.ReactForm = ReactForm;
8074
8459
  exports.ReactImagePreview = ReactImagePreview;
8075
8460
  exports.ReactInput = ReactInput;
8076
8461
  exports.ReactInputNumber = ReactInputNumber;
@@ -8082,15 +8467,22 @@ exports.ReactPagination = ReactPagination;
8082
8467
  exports.ReactPopconfirm = ReactPopconfirm;
8083
8468
  exports.ReactPopup = ReactPopup;
8084
8469
  exports.ReactQuarterPicker = ReactQuarterPicker;
8470
+ exports.ReactRadio = ReactRadio;
8085
8471
  exports.ReactResizablePanels = ReactResizablePanels;
8472
+ exports.ReactRow = ReactRow;
8086
8473
  exports.ReactSelect = ReactSelect;
8474
+ exports.ReactTextArea = ReactTextArea;
8087
8475
  exports.ReactTimePicker = ReactTimePicker;
8088
8476
  exports.ReactTimeRangePicker = ReactTimeRangePicker;
8477
+ exports.ReactTooltip = ReactTooltip;
8089
8478
  exports.ReactTransition = ReactTransition;
8090
8479
  exports.ReactVirtualList = ReactVirtualList;
8091
8480
  exports.ReactYearPicker = ReactYearPicker;
8481
+ exports.reactMessage = reactMessage;
8092
8482
  exports.resolveResizablePanelSizes = resolveResizablePanelSizes;
8093
8483
  exports.useReactContentScale = useReactContentScale;
8484
+ exports.useReactForm = useReactForm;
8485
+ exports.useReactFormWatch = useReactFormWatch;
8094
8486
  exports.useReactTransition = useReactTransition;
8095
8487
  //# sourceMappingURL=index.cjs.map
8096
8488
  //# sourceMappingURL=index.cjs.map