@rockshin/tao-ui 0.0.1

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+import { type TaoSize } from '../../provider/tao-provider';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import './pagination.css';
+export type PaginationSemanticPart = 'root' | 'item' | 'total';
+export interface PaginationProps {
+    current?: number;
+    defaultCurrent?: number;
+    pageSize?: number;
+    defaultPageSize?: number;
+    total: number;
+    onChange?: (page: number, pageSize: number) => void;
+    showSizeChanger?: boolean;
+    pageSizeOptions?: number[];
+    showTotal?: (total: number, range: [number, number]) => ReactNode;
+    size?: TaoSize;
+    disabled?: boolean;
+    className?: string;
+    classNames?: SemanticClassNames<PaginationSemanticPart>;
+    styles?: SemanticStyles<PaginationSemanticPart>;
+}
+export declare function Pagination({ current: currentProp, defaultCurrent, pageSize: pageSizeProp, defaultPageSize, total, onChange, showSizeChanger, pageSizeOptions, showTotal, size, disabled, className, classNames, styles, }: PaginationProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pagination/pagination.js

@@ -0,0 +1,310 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { useTaoConfig } from "../../provider/tao-provider.js";
+import { cx } from "../../utils/semantic.js";
+import { Select } from "../select/select.js";
+import "./pagination.css";
+function range(start, end) {
+    const result = [];
+    for(let i = start; i <= end; i++)result.push(i);
+    return result;
+}
+function computePages(current, totalPages) {
+    if (totalPages <= 7) return range(1, totalPages);
+    const items = [
+        1
+    ];
+    if (current <= 4) items.push(...range(2, 5), 'ellipsis', totalPages);
+    else if (current >= totalPages - 3) items.push('ellipsis', ...range(totalPages - 4, totalPages));
+    else items.push('ellipsis', current - 1, current, current + 1, 'ellipsis', totalPages);
+    return items;
+}
+function ChevronLeft() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            "aria-hidden": true,
+            children: /*#__PURE__*/ jsx("path", {
+                d: "M10 12L6 8l4-4",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+function ChevronRight() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            "aria-hidden": true,
+            children: /*#__PURE__*/ jsx("path", {
+                d: "M6 4l4 4-4 4",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+function Pagination(t0) {
+    const $ = c(69);
+    const { current: currentProp, defaultCurrent: t1, pageSize: pageSizeProp, defaultPageSize: t2, total, onChange, showSizeChanger: t3, pageSizeOptions: t4, showTotal, size, disabled, className, classNames, styles } = t0;
+    const defaultCurrent = void 0 === t1 ? 1 : t1;
+    const defaultPageSize = void 0 === t2 ? 10 : t2;
+    const showSizeChanger = void 0 === t3 ? false : t3;
+    let t5;
+    if ($[0] !== t4) {
+        t5 = void 0 === t4 ? [
+            10,
+            20,
+            50,
+            100
+        ] : t4;
+        $[0] = t4;
+        $[1] = t5;
+    } else t5 = $[1];
+    const pageSizeOptions = t5;
+    const ctx = useTaoConfig();
+    const resolvedSize = size ?? ctx.size;
+    const resolvedDisabled = disabled ?? ctx.disabled ?? false;
+    const isCurrentControlled = void 0 !== currentProp;
+    const [internalCurrent, setInternalCurrent] = useState(defaultCurrent);
+    const current = isCurrentControlled ? currentProp : internalCurrent;
+    const isPageSizeControlled = void 0 !== pageSizeProp;
+    const [internalPageSize, setInternalPageSize] = useState(defaultPageSize);
+    const pageSize = isPageSizeControlled ? pageSizeProp : internalPageSize;
+    const totalPages = Math.max(1, Math.ceil(total / pageSize));
+    let t6;
+    if ($[2] !== current || $[3] !== totalPages) {
+        t6 = computePages(current, totalPages);
+        $[2] = current;
+        $[3] = totalPages;
+        $[4] = t6;
+    } else t6 = $[4];
+    const pages = t6;
+    let t7;
+    if ($[5] !== isCurrentControlled || $[6] !== isPageSizeControlled || $[7] !== onChange || $[8] !== pageSize || $[9] !== total) {
+        t7 = (page, newPageSize)=>{
+            const ps = newPageSize ?? pageSize;
+            const maxPage = Math.max(1, Math.ceil(total / ps));
+            const safePage = Math.min(Math.max(1, page), maxPage);
+            if (!isCurrentControlled) setInternalCurrent(safePage);
+            if (null != newPageSize && !isPageSizeControlled) setInternalPageSize(newPageSize);
+            onChange?.(safePage, ps);
+        };
+        $[5] = isCurrentControlled;
+        $[6] = isPageSizeControlled;
+        $[7] = onChange;
+        $[8] = pageSize;
+        $[9] = total;
+        $[10] = t7;
+    } else t7 = $[10];
+    const goTo = t7;
+    const rangeStart = Math.min((current - 1) * pageSize + 1, total);
+    const rangeEnd = Math.min(current * pageSize, total);
+    const t8 = resolvedDisabled || void 0;
+    const t9 = classNames?.root;
+    let t10;
+    if ($[11] !== className || $[12] !== t9) {
+        t10 = cx(t9, className);
+        $[11] = className;
+        $[12] = t9;
+        $[13] = t10;
+    } else t10 = $[13];
+    const t11 = styles?.root;
+    let t12;
+    if ($[14] !== classNames?.total || $[15] !== rangeEnd || $[16] !== rangeStart || $[17] !== showTotal || $[18] !== styles?.total || $[19] !== total) {
+        t12 = showTotal && /*#__PURE__*/ jsx("span", {
+            "data-tao-pagination-total": "",
+            className: classNames?.total,
+            style: styles?.total,
+            children: showTotal(total, [
+                rangeStart,
+                rangeEnd
+            ])
+        });
+        $[14] = classNames?.total;
+        $[15] = rangeEnd;
+        $[16] = rangeStart;
+        $[17] = showTotal;
+        $[18] = styles?.total;
+        $[19] = total;
+        $[20] = t12;
+    } else t12 = $[20];
+    const t13 = resolvedDisabled || current <= 1;
+    let t14;
+    if ($[21] !== current || $[22] !== goTo) {
+        t14 = ()=>goTo(current - 1);
+        $[21] = current;
+        $[22] = goTo;
+        $[23] = t14;
+    } else t14 = $[23];
+    const t15 = classNames?.item;
+    const t16 = styles?.item;
+    let t17;
+    if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+        t17 = /*#__PURE__*/ jsx(ChevronLeft, {});
+        $[24] = t17;
+    } else t17 = $[24];
+    let t18;
+    if ($[25] !== t13 || $[26] !== t14 || $[27] !== t15 || $[28] !== t16) {
+        t18 = /*#__PURE__*/ jsx("button", {
+            type: "button",
+            "data-tao-pagination-btn": "",
+            disabled: t13,
+            "aria-label": "Previous page",
+            onClick: t14,
+            className: t15,
+            style: t16,
+            children: t17
+        });
+        $[25] = t13;
+        $[26] = t14;
+        $[27] = t15;
+        $[28] = t16;
+        $[29] = t18;
+    } else t18 = $[29];
+    let t19;
+    if ($[30] !== classNames?.item || $[31] !== current || $[32] !== goTo || $[33] !== pages || $[34] !== resolvedDisabled || $[35] !== styles?.item) {
+        let t20;
+        if ($[37] !== classNames?.item || $[38] !== current || $[39] !== goTo || $[40] !== resolvedDisabled || $[41] !== styles?.item) {
+            t20 = (item, i)=>"ellipsis" === item ? /*#__PURE__*/ jsx("span", {
+                    "data-tao-pagination-ellipsis": "",
+                    children: "\xb7\xb7\xb7"
+                }, `e${i}`) : /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    "data-tao-pagination-btn": "",
+                    "data-tao-active": item === current || void 0,
+                    disabled: resolvedDisabled,
+                    "aria-label": `Page ${item}`,
+                    "aria-current": item === current ? "page" : void 0,
+                    onClick: ()=>goTo(item),
+                    className: classNames?.item,
+                    style: styles?.item,
+                    children: item
+                }, item);
+            $[37] = classNames?.item;
+            $[38] = current;
+            $[39] = goTo;
+            $[40] = resolvedDisabled;
+            $[41] = styles?.item;
+            $[42] = t20;
+        } else t20 = $[42];
+        t19 = pages.map(t20);
+        $[30] = classNames?.item;
+        $[31] = current;
+        $[32] = goTo;
+        $[33] = pages;
+        $[34] = resolvedDisabled;
+        $[35] = styles?.item;
+        $[36] = t19;
+    } else t19 = $[36];
+    const t20 = resolvedDisabled || current >= totalPages;
+    let t21;
+    if ($[43] !== current || $[44] !== goTo) {
+        t21 = ()=>goTo(current + 1);
+        $[43] = current;
+        $[44] = goTo;
+        $[45] = t21;
+    } else t21 = $[45];
+    const t22 = classNames?.item;
+    const t23 = styles?.item;
+    let t24;
+    if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
+        t24 = /*#__PURE__*/ jsx(ChevronRight, {});
+        $[46] = t24;
+    } else t24 = $[46];
+    let t25;
+    if ($[47] !== t20 || $[48] !== t21 || $[49] !== t22 || $[50] !== t23) {
+        t25 = /*#__PURE__*/ jsx("button", {
+            type: "button",
+            "data-tao-pagination-btn": "",
+            disabled: t20,
+            "aria-label": "Next page",
+            onClick: t21,
+            className: t22,
+            style: t23,
+            children: t24
+        });
+        $[47] = t20;
+        $[48] = t21;
+        $[49] = t22;
+        $[50] = t23;
+        $[51] = t25;
+    } else t25 = $[51];
+    let t26;
+    if ($[52] !== goTo || $[53] !== pageSize || $[54] !== pageSizeOptions || $[55] !== resolvedDisabled || $[56] !== resolvedSize || $[57] !== showSizeChanger) {
+        t26 = showSizeChanger && /*#__PURE__*/ jsx(Select, {
+            "data-tao-pagination-sizer": "",
+            options: pageSizeOptions.map(_temp),
+            value: String(pageSize),
+            onChange: (val)=>{
+                const newSize = Number(val);
+                goTo(1, newSize);
+            },
+            disabled: resolvedDisabled,
+            size: "large" === resolvedSize ? "medium" : resolvedSize
+        });
+        $[52] = goTo;
+        $[53] = pageSize;
+        $[54] = pageSizeOptions;
+        $[55] = resolvedDisabled;
+        $[56] = resolvedSize;
+        $[57] = showSizeChanger;
+        $[58] = t26;
+    } else t26 = $[58];
+    let t27;
+    if ($[59] !== resolvedSize || $[60] !== t10 || $[61] !== t11 || $[62] !== t12 || $[63] !== t18 || $[64] !== t19 || $[65] !== t25 || $[66] !== t26 || $[67] !== t8) {
+        t27 = /*#__PURE__*/ jsxs("nav", {
+            "data-tao-pagination": "",
+            "data-tao-size": resolvedSize,
+            "data-tao-disabled": t8,
+            "aria-label": "Pagination",
+            className: t10,
+            style: t11,
+            children: [
+                t12,
+                t18,
+                t19,
+                t25,
+                t26
+            ]
+        });
+        $[59] = resolvedSize;
+        $[60] = t10;
+        $[61] = t11;
+        $[62] = t12;
+        $[63] = t18;
+        $[64] = t19;
+        $[65] = t25;
+        $[66] = t26;
+        $[67] = t8;
+        $[68] = t27;
+    } else t27 = $[68];
+    return t27;
+}
+function _temp(opt) {
+    return {
+        label: `${opt} / page`,
+        value: String(opt)
+    };
+}
+export { Pagination };