bj-web-components 0.2.26 → 0.2.28

package/dist/web/Pagination/Pagination.js

@@ -0,0 +1,328 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const reactDom = require("react-dom");
+;/* empty css                 */
+function defaultResolvePopupPlacement({
+  triggerRect,
+  dropdownHeight,
+  viewportHeight
+}) {
+  const spaceBelow = viewportHeight - triggerRect.bottom;
+  const spaceAbove = triggerRect.top;
+  return spaceBelow < dropdownHeight && spaceAbove >= dropdownHeight ? "top" : "bottom";
+}
+const Pagination = (props) => {
+  const {
+    current: controlledCurrent,
+    defaultCurrent = 1,
+    pageSize: controlledPageSize,
+    defaultPageSize = 10,
+    total = 0,
+    onChange,
+    onShowSizeChange,
+    showSizeChanger = false,
+    showQuickJumper = false,
+    pageSizeOptions = [10, 20, 50, 100],
+    disabled = false,
+    hideOnSinglePage = false,
+    showTotal,
+    size = "medium",
+    align = "start",
+    simple = false,
+    popupPlacement,
+    resolvePopupPlacement,
+    dropdownClassName,
+    t = (text) => text,
+    className,
+    style
+  } = props;
+  const [internalCurrent, setInternalCurrent] = react.useState(defaultCurrent);
+  const [internalPageSize, setInternalPageSize] = react.useState(defaultPageSize);
+  const [isSizeDropdownOpen, setIsSizeDropdownOpen] = react.useState(false);
+  const [dropdownPlacement, setDropdownPlacement] = react.useState("bottom");
+  const [dropdownAnchor, setDropdownAnchor] = react.useState(null);
+  const sizeDropdownRef = react.useRef(null);
+  const dropdownPortalRef = react.useRef(null);
+  const current = controlledCurrent ?? internalCurrent;
+  const pageSize = controlledPageSize ?? internalPageSize;
+  const totalPages = Math.ceil(total / pageSize);
+  if (hideOnSinglePage && totalPages <= 1) {
+    return null;
+  }
+  const handlePageChange = (page) => {
+    if (disabled || page < 1 || page > totalPages || page === current) {
+      return;
+    }
+    if (controlledCurrent === void 0) {
+      setInternalCurrent(page);
+    }
+    onChange == null ? void 0 : onChange(page, pageSize);
+  };
+  const handlePageSizeChange = (newPageSize) => {
+    const newTotalPages = Math.ceil(total / newPageSize);
+    const newCurrent = Math.min(current, newTotalPages) || 1;
+    if (controlledPageSize === void 0) {
+      setInternalPageSize(newPageSize);
+      if (controlledCurrent === void 0) {
+        setInternalCurrent(newCurrent);
+      }
+    }
+    onShowSizeChange == null ? void 0 : onShowSizeChange(newCurrent, newPageSize);
+    onChange == null ? void 0 : onChange(newCurrent, newPageSize);
+  };
+  const updateDropdownPosition = (placement) => {
+    if (!sizeDropdownRef.current) return;
+    const triggerRect = sizeDropdownRef.current.getBoundingClientRect();
+    setDropdownAnchor({
+      left: triggerRect.left + triggerRect.width / 2,
+      top: placement === "bottom" ? triggerRect.bottom + 4 : triggerRect.top - 4
+    });
+  };
+  const toggleSizeDropdown = () => {
+    if (disabled) return;
+    if (isSizeDropdownOpen) {
+      setIsSizeDropdownOpen(false);
+      return;
+    }
+    let placement = dropdownPlacement;
+    if (popupPlacement === void 0 && sizeDropdownRef.current) {
+      const triggerRect = sizeDropdownRef.current.getBoundingClientRect();
+      const dropdownHeight = pageSizeOptions.length * 40 + 8;
+      const viewportHeight = window.innerHeight;
+      placement = (resolvePopupPlacement == null ? void 0 : resolvePopupPlacement({ triggerRect, dropdownHeight, viewportHeight })) ?? defaultResolvePopupPlacement({ triggerRect, dropdownHeight, viewportHeight });
+      setDropdownPlacement(placement);
+    }
+    updateDropdownPosition(popupPlacement ?? placement);
+    setIsSizeDropdownOpen(true);
+  };
+  const handleSizeOptionClick = (newPageSize) => {
+    handlePageSizeChange(newPageSize);
+    setIsSizeDropdownOpen(false);
+  };
+  react.useEffect(() => {
+    const handleClickOutside = (event) => {
+      var _a, _b;
+      const target = event.target;
+      if (((_a = sizeDropdownRef.current) == null ? void 0 : _a.contains(target)) || ((_b = dropdownPortalRef.current) == null ? void 0 : _b.contains(target))) {
+        return;
+      }
+      setIsSizeDropdownOpen(false);
+    };
+    const handleScroll = () => setIsSizeDropdownOpen(false);
+    const handleResize = () => updateDropdownPosition(popupPlacement ?? dropdownPlacement);
+    if (isSizeDropdownOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("scroll", handleScroll, true);
+      window.addEventListener("resize", handleResize);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+        document.removeEventListener("scroll", handleScroll, true);
+        window.removeEventListener("resize", handleResize);
+      };
+    }
+  }, [isSizeDropdownOpen, popupPlacement, dropdownPlacement]);
+  const handleQuickJump = (e) => {
+    const value = parseInt(e.target.value);
+    if (!isNaN(value) && value >= 1 && value <= totalPages) {
+      handlePageChange(value);
+    }
+  };
+  const pageNumbers = react.useMemo(() => {
+    const pages = [];
+    const showEllipsisThreshold = 7;
+    if (totalPages <= showEllipsisThreshold) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      if (current <= 4) {
+        for (let i = 1; i <= 5; i++) {
+          pages.push(i);
+        }
+        pages.push("...");
+        pages.push(totalPages);
+      } else if (current >= totalPages - 3) {
+        pages.push(1);
+        pages.push("...");
+        for (let i = totalPages - 4; i <= totalPages; i++) {
+          pages.push(i);
+        }
+      } else {
+        pages.push(1);
+        pages.push("...");
+        for (let i = current - 1; i <= current + 1; i++) {
+          pages.push(i);
+        }
+        pages.push("...");
+        pages.push(totalPages);
+      }
+    }
+    return pages;
+  }, [current, totalPages]);
+  const rangeStart = (current - 1) * pageSize + 1;
+  const rangeEnd = Math.min(current * pageSize, total);
+  const sizeClass = `pagination-${size}`;
+  const alignClass = `pagination-${align}`;
+  const disabledClass = disabled ? "pagination-disabled" : "";
+  const renderPageItem = (page, index) => {
+    if (page === "...") {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pagination-item pagination-ellipsis", children: "..." }, `ellipsis-${index}`);
+    }
+    const isActive = page === current;
+    const activeClass = isActive ? "pagination-item-active" : "";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: `pagination-item ${activeClass}`,
+        onClick: () => handlePageChange(page),
+        disabled,
+        children: page
+      },
+      page
+    );
+  };
+  if (simple) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `pagination pagination-simple ${disabledClass} ${className || ""}`,
+        style,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pagination-simple-list", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "pagination-simple-item pagination-simple-prev",
+              onClick: () => handlePageChange(current - 1),
+              disabled: disabled || current === 1,
+              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 2L4 6L8 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pagination-simple-text", children: [
+            current,
+            " / ",
+            totalPages || 0
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "pagination-simple-item pagination-simple-next",
+              onClick: () => handlePageChange(current + 1),
+              disabled: disabled || current === totalPages,
+              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 2L8 6L4 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+            }
+          )
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `pagination ${sizeClass} ${alignClass} ${disabledClass} ${className || ""}`,
+      style,
+      children: [
+        showTotal && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pagination-total", children: showTotal(total, [rangeStart, rangeEnd]) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pagination-list", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "pagination-item pagination-prev",
+              onClick: () => handlePageChange(current - 1),
+              disabled: disabled || current === 1,
+              children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.1749 5.57516C11.3377 5.41245 11.6014 5.41245 11.7641 5.57516C11.9268 5.73788 11.9268 6.00164 11.7641 6.16436L7.8945 10.034L11.7617 13.8366C11.9257 13.998 11.9279 14.2617 11.7666 14.4258C11.6052 14.5899 11.3414 14.592 11.1774 14.4307L7.2105 10.5299C6.93541 10.2594 6.93349 9.81648 7.20629 9.54367L11.1749 5.57516Z", fill: "#333333" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.1749 5.57516C11.3377 5.41245 11.6014 5.41245 11.7641 5.57516C11.9268 5.73788 11.9268 6.00164 11.7641 6.16436L7.8945 10.034L11.7617 13.8366C11.9257 13.998 11.9279 14.2617 11.7666 14.4258C11.6052 14.5899 11.3414 14.592 11.1774 14.4307L7.2105 10.5299C6.93541 10.2594 6.93349 9.81648 7.20629 9.54367L11.1749 5.57516Z", fill: "black", fillOpacity: "0.2" })
+              ] })
+            }
+          ),
+          pageNumbers.map((page, index) => renderPageItem(page, index)),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "pagination-item pagination-next",
+              onClick: () => handlePageChange(current + 1),
+              disabled: disabled || current === totalPages,
+              children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.82507 5.57516C8.66235 5.41245 8.39859 5.41245 8.23587 5.57516C8.07315 5.73788 8.07315 6.00164 8.23587 6.16436L12.1055 10.034L8.23831 13.8366C8.07427 13.998 8.0721 14.2617 8.23343 14.4258C8.39478 14.5899 8.65856 14.592 8.82262 14.4307L12.7895 10.5299C13.0646 10.2594 13.0665 9.81648 12.7937 9.54367L8.82507 5.57516Z", fill: "#333333" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.82507 5.57516C8.66235 5.41245 8.39859 5.41245 8.23587 5.57516C8.07315 5.73788 8.07315 6.00164 8.23587 6.16436L12.1055 10.034L8.23831 13.8366C8.07427 13.998 8.0721 14.2617 8.23343 14.4258C8.39478 14.5899 8.65856 14.592 8.82262 14.4307L12.7895 10.5299C13.0646 10.2594 13.0665 9.81648 12.7937 9.54367L8.82507 5.57516Z", fill: "black", "fill-opacity": "0.2" })
+              ] })
+            }
+          )
+        ] }),
+        showSizeChanger && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pagination-sizer", ref: sizeDropdownRef, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              className: "pagination-sizer-select",
+              onClick: toggleSizeDropdown,
+              disabled,
+              children: [
+                pageSize,
+                t("条/页"),
+                /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: `pagination-sizer-icon${isSizeDropdownOpen ? " pagination-sizer-icon-open" : ""}`, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.57321 8.828C5.41049 8.66528 5.41049 8.40152 5.57321 8.2388C5.73593 8.07608 5.99969 8.07608 6.1624 8.2388L10.032 12.1084L13.8347 8.24124C13.996 8.0772 14.2598 8.07503 14.4239 8.23636C14.5879 8.39771 14.5901 8.66149 14.4287 8.82555L10.5279 12.7924C10.2574 13.0675 9.81452 13.0694 9.54172 12.7966L5.57321 8.828Z", fill: "#333333" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.57321 8.828C5.41049 8.66528 5.41049 8.40152 5.57321 8.2388C5.73593 8.07608 5.99969 8.07608 6.1624 8.2388L10.032 12.1084L13.8347 8.24124C13.996 8.0772 14.2598 8.07503 14.4239 8.23636C14.5879 8.39771 14.5901 8.66149 14.4287 8.82555L10.5279 12.7924C10.2574 13.0675 9.81452 13.0694 9.54172 12.7966L5.57321 8.828Z", fill: "black", fillOpacity: "0.2" })
+                ] })
+              ]
+            }
+          ),
+          isSizeDropdownOpen && dropdownAnchor && reactDom.createPortal(
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: dropdownPortalRef,
+                className: `pagination-sizer-dropdown pagination-sizer-dropdown-${popupPlacement ?? dropdownPlacement}${dropdownClassName ? ` ${dropdownClassName}` : ""}`,
+                style: {
+                  position: "fixed",
+                  left: dropdownAnchor.left,
+                  top: dropdownAnchor.top,
+                  zIndex: 99999,
+                  transform: (popupPlacement ?? dropdownPlacement) === "bottom" ? "translate(-50%, 0)" : "translate(-50%, -100%)"
+                },
+                children: pageSizeOptions.map((size2) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "pagination-sizer-option",
+                    onClick: () => handleSizeOptionClick(size2),
+                    "data-selected": size2 === pageSize,
+                    children: [
+                      size2,
+                      t("条/页")
+                    ]
+                  },
+                  size2
+                ))
+              }
+            ),
+            document.body
+          )
+        ] }),
+        showQuickJumper && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pagination-jumper", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("跳至") }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "number",
+              className: "pagination-jumper-input",
+              min: 1,
+              max: totalPages,
+              onChange: handleQuickJump,
+              disabled,
+              placeholder: ""
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("页") })
+        ] })
+      ]
+    }
+  );
+};
+module.exports = Pagination;

package/dist/web/Pagination/Pagination.mjs

@@ -0,0 +1,329 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useMemo } from "react";
+import { createPortal } from "react-dom";
+/* empty css                 */
+function defaultResolvePopupPlacement({
+  triggerRect,
+  dropdownHeight,
+  viewportHeight
+}) {
+  const spaceBelow = viewportHeight - triggerRect.bottom;
+  const spaceAbove = triggerRect.top;
+  return spaceBelow < dropdownHeight && spaceAbove >= dropdownHeight ? "top" : "bottom";
+}
+const Pagination = (props) => {
+  const {
+    current: controlledCurrent,
+    defaultCurrent = 1,
+    pageSize: controlledPageSize,
+    defaultPageSize = 10,
+    total = 0,
+    onChange,
+    onShowSizeChange,
+    showSizeChanger = false,
+    showQuickJumper = false,
+    pageSizeOptions = [10, 20, 50, 100],
+    disabled = false,
+    hideOnSinglePage = false,
+    showTotal,
+    size = "medium",
+    align = "start",
+    simple = false,
+    popupPlacement,
+    resolvePopupPlacement,
+    dropdownClassName,
+    t = (text) => text,
+    className,
+    style
+  } = props;
+  const [internalCurrent, setInternalCurrent] = useState(defaultCurrent);
+  const [internalPageSize, setInternalPageSize] = useState(defaultPageSize);
+  const [isSizeDropdownOpen, setIsSizeDropdownOpen] = useState(false);
+  const [dropdownPlacement, setDropdownPlacement] = useState("bottom");
+  const [dropdownAnchor, setDropdownAnchor] = useState(null);
+  const sizeDropdownRef = useRef(null);
+  const dropdownPortalRef = useRef(null);
+  const current = controlledCurrent ?? internalCurrent;
+  const pageSize = controlledPageSize ?? internalPageSize;
+  const totalPages = Math.ceil(total / pageSize);
+  if (hideOnSinglePage && totalPages <= 1) {
+    return null;
+  }
+  const handlePageChange = (page) => {
+    if (disabled || page < 1 || page > totalPages || page === current) {
+      return;
+    }
+    if (controlledCurrent === void 0) {
+      setInternalCurrent(page);
+    }
+    onChange == null ? void 0 : onChange(page, pageSize);
+  };
+  const handlePageSizeChange = (newPageSize) => {
+    const newTotalPages = Math.ceil(total / newPageSize);
+    const newCurrent = Math.min(current, newTotalPages) || 1;
+    if (controlledPageSize === void 0) {
+      setInternalPageSize(newPageSize);
+      if (controlledCurrent === void 0) {
+        setInternalCurrent(newCurrent);
+      }
+    }
+    onShowSizeChange == null ? void 0 : onShowSizeChange(newCurrent, newPageSize);
+    onChange == null ? void 0 : onChange(newCurrent, newPageSize);
+  };
+  const updateDropdownPosition = (placement) => {
+    if (!sizeDropdownRef.current) return;
+    const triggerRect = sizeDropdownRef.current.getBoundingClientRect();
+    setDropdownAnchor({
+      left: triggerRect.left + triggerRect.width / 2,
+      top: placement === "bottom" ? triggerRect.bottom + 4 : triggerRect.top - 4
+    });
+  };
+  const toggleSizeDropdown = () => {
+    if (disabled) return;
+    if (isSizeDropdownOpen) {
+      setIsSizeDropdownOpen(false);
+      return;
+    }
+    let placement = dropdownPlacement;
+    if (popupPlacement === void 0 && sizeDropdownRef.current) {
+      const triggerRect = sizeDropdownRef.current.getBoundingClientRect();
+      const dropdownHeight = pageSizeOptions.length * 40 + 8;
+      const viewportHeight = window.innerHeight;
+      placement = (resolvePopupPlacement == null ? void 0 : resolvePopupPlacement({ triggerRect, dropdownHeight, viewportHeight })) ?? defaultResolvePopupPlacement({ triggerRect, dropdownHeight, viewportHeight });
+      setDropdownPlacement(placement);
+    }
+    updateDropdownPosition(popupPlacement ?? placement);
+    setIsSizeDropdownOpen(true);
+  };
+  const handleSizeOptionClick = (newPageSize) => {
+    handlePageSizeChange(newPageSize);
+    setIsSizeDropdownOpen(false);
+  };
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      var _a, _b;
+      const target = event.target;
+      if (((_a = sizeDropdownRef.current) == null ? void 0 : _a.contains(target)) || ((_b = dropdownPortalRef.current) == null ? void 0 : _b.contains(target))) {
+        return;
+      }
+      setIsSizeDropdownOpen(false);
+    };
+    const handleScroll = () => setIsSizeDropdownOpen(false);
+    const handleResize = () => updateDropdownPosition(popupPlacement ?? dropdownPlacement);
+    if (isSizeDropdownOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("scroll", handleScroll, true);
+      window.addEventListener("resize", handleResize);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+        document.removeEventListener("scroll", handleScroll, true);
+        window.removeEventListener("resize", handleResize);
+      };
+    }
+  }, [isSizeDropdownOpen, popupPlacement, dropdownPlacement]);
+  const handleQuickJump = (e) => {
+    const value = parseInt(e.target.value);
+    if (!isNaN(value) && value >= 1 && value <= totalPages) {
+      handlePageChange(value);
+    }
+  };
+  const pageNumbers = useMemo(() => {
+    const pages = [];
+    const showEllipsisThreshold = 7;
+    if (totalPages <= showEllipsisThreshold) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      if (current <= 4) {
+        for (let i = 1; i <= 5; i++) {
+          pages.push(i);
+        }
+        pages.push("...");
+        pages.push(totalPages);
+      } else if (current >= totalPages - 3) {
+        pages.push(1);
+        pages.push("...");
+        for (let i = totalPages - 4; i <= totalPages; i++) {
+          pages.push(i);
+        }
+      } else {
+        pages.push(1);
+        pages.push("...");
+        for (let i = current - 1; i <= current + 1; i++) {
+          pages.push(i);
+        }
+        pages.push("...");
+        pages.push(totalPages);
+      }
+    }
+    return pages;
+  }, [current, totalPages]);
+  const rangeStart = (current - 1) * pageSize + 1;
+  const rangeEnd = Math.min(current * pageSize, total);
+  const sizeClass = `pagination-${size}`;
+  const alignClass = `pagination-${align}`;
+  const disabledClass = disabled ? "pagination-disabled" : "";
+  const renderPageItem = (page, index) => {
+    if (page === "...") {
+      return /* @__PURE__ */ jsx("span", { className: "pagination-item pagination-ellipsis", children: "..." }, `ellipsis-${index}`);
+    }
+    const isActive = page === current;
+    const activeClass = isActive ? "pagination-item-active" : "";
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: `pagination-item ${activeClass}`,
+        onClick: () => handlePageChange(page),
+        disabled,
+        children: page
+      },
+      page
+    );
+  };
+  if (simple) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `pagination pagination-simple ${disabledClass} ${className || ""}`,
+        style,
+        children: /* @__PURE__ */ jsxs("div", { className: "pagination-simple-list", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "pagination-simple-item pagination-simple-prev",
+              onClick: () => handlePageChange(current - 1),
+              disabled: disabled || current === 1,
+              children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M8 2L4 6L8 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "pagination-simple-text", children: [
+            current,
+            " / ",
+            totalPages || 0
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "pagination-simple-item pagination-simple-next",
+              onClick: () => handlePageChange(current + 1),
+              disabled: disabled || current === totalPages,
+              children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M4 2L8 6L4 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+            }
+          )
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `pagination ${sizeClass} ${alignClass} ${disabledClass} ${className || ""}`,
+      style,
+      children: [
+        showTotal && /* @__PURE__ */ jsx("div", { className: "pagination-total", children: showTotal(total, [rangeStart, rangeEnd]) }),
+        /* @__PURE__ */ jsxs("div", { className: "pagination-list", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "pagination-item pagination-prev",
+              onClick: () => handlePageChange(current - 1),
+              disabled: disabled || current === 1,
+              children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                /* @__PURE__ */ jsx("path", { d: "M11.1749 5.57516C11.3377 5.41245 11.6014 5.41245 11.7641 5.57516C11.9268 5.73788 11.9268 6.00164 11.7641 6.16436L7.8945 10.034L11.7617 13.8366C11.9257 13.998 11.9279 14.2617 11.7666 14.4258C11.6052 14.5899 11.3414 14.592 11.1774 14.4307L7.2105 10.5299C6.93541 10.2594 6.93349 9.81648 7.20629 9.54367L11.1749 5.57516Z", fill: "#333333" }),
+                /* @__PURE__ */ jsx("path", { d: "M11.1749 5.57516C11.3377 5.41245 11.6014 5.41245 11.7641 5.57516C11.9268 5.73788 11.9268 6.00164 11.7641 6.16436L7.8945 10.034L11.7617 13.8366C11.9257 13.998 11.9279 14.2617 11.7666 14.4258C11.6052 14.5899 11.3414 14.592 11.1774 14.4307L7.2105 10.5299C6.93541 10.2594 6.93349 9.81648 7.20629 9.54367L11.1749 5.57516Z", fill: "black", fillOpacity: "0.2" })
+              ] })
+            }
+          ),
+          pageNumbers.map((page, index) => renderPageItem(page, index)),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "pagination-item pagination-next",
+              onClick: () => handlePageChange(current + 1),
+              disabled: disabled || current === totalPages,
+              children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                /* @__PURE__ */ jsx("path", { d: "M8.82507 5.57516C8.66235 5.41245 8.39859 5.41245 8.23587 5.57516C8.07315 5.73788 8.07315 6.00164 8.23587 6.16436L12.1055 10.034L8.23831 13.8366C8.07427 13.998 8.0721 14.2617 8.23343 14.4258C8.39478 14.5899 8.65856 14.592 8.82262 14.4307L12.7895 10.5299C13.0646 10.2594 13.0665 9.81648 12.7937 9.54367L8.82507 5.57516Z", fill: "#333333" }),
+                /* @__PURE__ */ jsx("path", { d: "M8.82507 5.57516C8.66235 5.41245 8.39859 5.41245 8.23587 5.57516C8.07315 5.73788 8.07315 6.00164 8.23587 6.16436L12.1055 10.034L8.23831 13.8366C8.07427 13.998 8.0721 14.2617 8.23343 14.4258C8.39478 14.5899 8.65856 14.592 8.82262 14.4307L12.7895 10.5299C13.0646 10.2594 13.0665 9.81648 12.7937 9.54367L8.82507 5.57516Z", fill: "black", "fill-opacity": "0.2" })
+              ] })
+            }
+          )
+        ] }),
+        showSizeChanger && /* @__PURE__ */ jsxs("div", { className: "pagination-sizer", ref: sizeDropdownRef, children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "pagination-sizer-select",
+              onClick: toggleSizeDropdown,
+              disabled,
+              children: [
+                pageSize,
+                t("条/页"),
+                /* @__PURE__ */ jsxs("svg", { className: `pagination-sizer-icon${isSizeDropdownOpen ? " pagination-sizer-icon-open" : ""}`, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                  /* @__PURE__ */ jsx("path", { d: "M5.57321 8.828C5.41049 8.66528 5.41049 8.40152 5.57321 8.2388C5.73593 8.07608 5.99969 8.07608 6.1624 8.2388L10.032 12.1084L13.8347 8.24124C13.996 8.0772 14.2598 8.07503 14.4239 8.23636C14.5879 8.39771 14.5901 8.66149 14.4287 8.82555L10.5279 12.7924C10.2574 13.0675 9.81452 13.0694 9.54172 12.7966L5.57321 8.828Z", fill: "#333333" }),
+                  /* @__PURE__ */ jsx("path", { d: "M5.57321 8.828C5.41049 8.66528 5.41049 8.40152 5.57321 8.2388C5.73593 8.07608 5.99969 8.07608 6.1624 8.2388L10.032 12.1084L13.8347 8.24124C13.996 8.0772 14.2598 8.07503 14.4239 8.23636C14.5879 8.39771 14.5901 8.66149 14.4287 8.82555L10.5279 12.7924C10.2574 13.0675 9.81452 13.0694 9.54172 12.7966L5.57321 8.828Z", fill: "black", fillOpacity: "0.2" })
+                ] })
+              ]
+            }
+          ),
+          isSizeDropdownOpen && dropdownAnchor && createPortal(
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: dropdownPortalRef,
+                className: `pagination-sizer-dropdown pagination-sizer-dropdown-${popupPlacement ?? dropdownPlacement}${dropdownClassName ? ` ${dropdownClassName}` : ""}`,
+                style: {
+                  position: "fixed",
+                  left: dropdownAnchor.left,
+                  top: dropdownAnchor.top,
+                  zIndex: 99999,
+                  transform: (popupPlacement ?? dropdownPlacement) === "bottom" ? "translate(-50%, 0)" : "translate(-50%, -100%)"
+                },
+                children: pageSizeOptions.map((size2) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "pagination-sizer-option",
+                    onClick: () => handleSizeOptionClick(size2),
+                    "data-selected": size2 === pageSize,
+                    children: [
+                      size2,
+                      t("条/页")
+                    ]
+                  },
+                  size2
+                ))
+              }
+            ),
+            document.body
+          )
+        ] }),
+        showQuickJumper && /* @__PURE__ */ jsxs("div", { className: "pagination-jumper", children: [
+          /* @__PURE__ */ jsx("span", { children: t("跳至") }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              className: "pagination-jumper-input",
+              min: 1,
+              max: totalPages,
+              onChange: handleQuickJump,
+              disabled,
+              placeholder: ""
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: t("页") })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  Pagination as default
+};