437 lines
11 KiB
JavaScript
437 lines
11 KiB
JavaScript
const U = {
|
||
full: {
|
||
showPageSummary: !0,
|
||
showTotalCount: !0,
|
||
showInput: !0,
|
||
inputWidth: "100px",
|
||
justifyContent: "space-around",
|
||
pageButtonPx: void 0,
|
||
getPageNumbers: ({ currentPage: t, totalPages: e }) => [
|
||
1,
|
||
t,
|
||
t + 1,
|
||
e
|
||
]
|
||
},
|
||
compact: {
|
||
showPageSummary: !1,
|
||
showTotalCount: !0,
|
||
showInput: !0,
|
||
inputWidth: "56px",
|
||
justifyContent: "space-around",
|
||
pageButtonPx: 2,
|
||
getPageNumbers: ({ currentPage: t, totalPages: e }) => [
|
||
1,
|
||
t,
|
||
e
|
||
]
|
||
},
|
||
simple: {
|
||
showPageSummary: !1,
|
||
showTotalCount: !1,
|
||
showInput: !1,
|
||
inputWidth: "48px",
|
||
justifyContent: "center",
|
||
pageButtonPx: void 0,
|
||
getPageNumbers: () => []
|
||
},
|
||
minimal: {
|
||
showPageSummary: !1,
|
||
showTotalCount: !1,
|
||
showInput: !0,
|
||
inputWidth: "56px",
|
||
justifyContent: "center",
|
||
pageButtonPx: void 0,
|
||
getPageNumbers: () => []
|
||
}
|
||
}, X = ["۰", "۱", "۲", "۳", "۴", "۵", "۶", "۷", "۸", "۹"], ie = /[۰-۹]/g, se = /[٠-٩]/g;
|
||
function T() {
|
||
const t = window.__UIKIT_REMOTE_DEPS__, e = [];
|
||
if (t?.React || e.push("React"), t?.createRoot || e.push("createRoot"), t?.ChakraProvider || e.push("ChakraProvider"), t?.Button || e.push("Button"), t?.HStack || e.push("HStack"), t?.IconButton || e.push("IconButton"), t?.Input || e.push("Input"), t?.Text || e.push("Text"), e.length)
|
||
throw new Error(
|
||
`[uikit-pagination] Missing remote dependencies: ${e.join(", ")}. Set window.__UIKIT_REMOTE_DEPS__ before loading the remote component.`
|
||
);
|
||
return t;
|
||
}
|
||
function u(t) {
|
||
return t == null ? "" : String(t).replace(/\d/g, (e) => X[Number(e)]);
|
||
}
|
||
function V(t) {
|
||
return t == null ? "" : String(t).replace(
|
||
ie,
|
||
(e) => String(X.indexOf(e))
|
||
).replace(se, (e) => String(e.charCodeAt(0) - 1632));
|
||
}
|
||
function ae(t) {
|
||
return U[t] ? t : "full";
|
||
}
|
||
function H(t, e) {
|
||
const g = Number(t), d = Number(e);
|
||
return !d || d <= 0 || !g || Number.isNaN(g) ? 1 : Math.min(Math.max(g, 1), d);
|
||
}
|
||
function K(t) {
|
||
const { React: e } = T();
|
||
return e.createElement(
|
||
"svg",
|
||
{
|
||
width: "20",
|
||
height: "20",
|
||
viewBox: "0 0 24 24",
|
||
fill: "none",
|
||
xmlns: "http://www.w3.org/2000/svg",
|
||
"aria-hidden": "true",
|
||
...t
|
||
},
|
||
e.createElement("path", {
|
||
d: "M9 18L15 12L9 6",
|
||
stroke: "currentColor",
|
||
strokeWidth: "2",
|
||
strokeLinecap: "round",
|
||
strokeLinejoin: "round"
|
||
})
|
||
);
|
||
}
|
||
function O(t) {
|
||
const { React: e } = T();
|
||
return e.createElement(
|
||
"svg",
|
||
{
|
||
width: "20",
|
||
height: "20",
|
||
viewBox: "0 0 24 24",
|
||
fill: "none",
|
||
xmlns: "http://www.w3.org/2000/svg",
|
||
"aria-hidden": "true",
|
||
...t
|
||
},
|
||
e.createElement("path", {
|
||
d: "M15 18L9 12L15 6",
|
||
stroke: "currentColor",
|
||
strokeWidth: "2",
|
||
strokeLinecap: "round",
|
||
strokeLinejoin: "round"
|
||
})
|
||
);
|
||
}
|
||
function ue({
|
||
currentPage: t = 1,
|
||
totalCount: e = 0,
|
||
totalPages: g,
|
||
pageSize: d = 10,
|
||
onPageChange: b,
|
||
level: D = "full",
|
||
...v
|
||
}) {
|
||
const { React: n, Button: $, HStack: E, IconButton: y, Input: q, Text: c } = T(), { useCallback: S, useEffect: W, useMemo: J, useRef: Q, useState: L } = n, A = ae(D), f = U[A], r = A === "simple", k = A === "minimal", z = Number(d), Y = Number.isFinite(z) && z > 0 ? z : 10, M = Number(e), B = Number.isFinite(M) && M > 0 ? M : 0, j = Number(g), i = Number.isFinite(j) && j > 0 ? Math.ceil(j) : Math.ceil(B / Y), s = H(t, i), [w, m] = L(
|
||
r ? "" : u(s)
|
||
), [C, P] = L(!1), [h, p] = L(null), _ = Q(null), l = h ?? s, G = B > 0, Z = J(() => r || i <= 0 ? [] : Array.from(
|
||
new Set(
|
||
f.getPageNumbers({
|
||
currentPage: s,
|
||
totalPages: i
|
||
})
|
||
)
|
||
).filter((o) => o >= 1 && o <= i).sort((o, a) => o - a), [f, r, s, i]), I = S(() => {
|
||
m(r ? "" : u(s)), P(!1), p(null);
|
||
}, [r, s]), x = S(
|
||
(o) => {
|
||
const a = H(o, i);
|
||
P(!1), m(r ? "" : u(s)), p(null), a !== s && b?.(a);
|
||
},
|
||
[r, b, s, i]
|
||
), N = S(() => {
|
||
if (!w) {
|
||
I(), _.current?.blur();
|
||
return;
|
||
}
|
||
const o = parseInt(V(w), 10);
|
||
if (Number.isNaN(o)) {
|
||
I(), _.current?.blur();
|
||
return;
|
||
}
|
||
const a = H(o, i);
|
||
if (r) {
|
||
P(!1), m(""), a !== s ? (p(a), b?.(a)) : p(null), _.current?.blur();
|
||
return;
|
||
}
|
||
a !== s ? (p(a), m(u(a)), b?.(a)) : (m(u(s)), P(!1), p(null)), _.current?.blur();
|
||
}, [
|
||
w,
|
||
r,
|
||
b,
|
||
I,
|
||
s,
|
||
i
|
||
]), ee = S(() => {
|
||
p(null), m(""), P(!0);
|
||
}, []), te = S((o) => {
|
||
const a = o.target.value, re = V(a).replace(/\D/g, "");
|
||
m(u(re));
|
||
}, []);
|
||
if (W(() => {
|
||
if (r) {
|
||
h !== null && s === h && p(null);
|
||
return;
|
||
}
|
||
if (h !== null) {
|
||
s === h && (p(null), P(!1), m(u(s)));
|
||
return;
|
||
}
|
||
C || m(u(s));
|
||
}, [C, r, h, s]), W(() => {
|
||
r && C && _.current?.focus();
|
||
}, [C, r]), W(() => {
|
||
if (!C || !w || !r && h !== null) return;
|
||
const o = setTimeout(() => {
|
||
N();
|
||
}, 1e3);
|
||
return () => clearTimeout(o);
|
||
}, [N, w, C, r, h]), i <= 0) return null;
|
||
const F = () => n.createElement(q, {
|
||
ref: _,
|
||
type: "text",
|
||
inputMode: "numeric",
|
||
placeholder: "صفحه",
|
||
w: f.inputWidth,
|
||
value: w,
|
||
onFocus: () => {
|
||
r || (P(!0), p(null), m(""));
|
||
},
|
||
onChange: te,
|
||
onBlur: () => {
|
||
if (w) {
|
||
r && N();
|
||
return;
|
||
}
|
||
I();
|
||
},
|
||
onKeyDown: (o) => {
|
||
o.key === "Enter" && N(), o.key === "Escape" && I();
|
||
},
|
||
textAlign: "center",
|
||
color: "#1D2939",
|
||
fontSize: k ? "sm" : void 0,
|
||
fontWeight: k ? "700" : void 0,
|
||
h: k ? "30px" : void 0,
|
||
minH: k ? "30px" : void 0,
|
||
px: 1,
|
||
minW: 0,
|
||
dir: "ltr"
|
||
}), R = (o, a = !1) => n.createElement(
|
||
$,
|
||
{
|
||
key: o,
|
||
size: "md",
|
||
px: f.pageButtonPx,
|
||
bg: a ? "#4B49AC" : "#e6e6f1",
|
||
color: a ? "#e6e6f1" : "#4B49AC",
|
||
_hover: { bg: a ? "#4B49AC" : "#cbcbe8" },
|
||
onClick: r && a ? ee : () => x(o),
|
||
variant: "soft"
|
||
},
|
||
u(o)
|
||
), ne = r && i > 1 && l !== 1, oe = r && i > 1 && l !== i;
|
||
return k ? n.createElement(
|
||
E,
|
||
{
|
||
justifyContent: "space-between",
|
||
backgroundColor: "white",
|
||
py: "8px",
|
||
px: "12px",
|
||
rounded: "lg",
|
||
border: "1px",
|
||
borderColor: "blue.200",
|
||
w: "100%",
|
||
dir: "rtl",
|
||
...v
|
||
},
|
||
n.createElement(
|
||
E,
|
||
{ spacing: 2, alignItems: "center", justifyContent: "center" },
|
||
n.createElement(y, {
|
||
size: "sm",
|
||
w: "28px",
|
||
h: "28px",
|
||
minW: "28px",
|
||
minH: "28px",
|
||
bg: "#e6e6f1",
|
||
color: "#4B49AC",
|
||
_hover: { bg: "#cbcbe8" },
|
||
onClick: () => x(l - 1),
|
||
isDisabled: l === 1,
|
||
icon: n.createElement(K, { width: "16", height: "16" }),
|
||
"aria-label": "صفحه قبلی"
|
||
}),
|
||
F(),
|
||
n.createElement(
|
||
c,
|
||
{ color: "#475467", fontSize: "sm", whiteSpace: "nowrap" },
|
||
"از"
|
||
),
|
||
n.createElement(
|
||
c,
|
||
{
|
||
color: "#1D2939",
|
||
fontSize: "sm",
|
||
fontWeight: "700",
|
||
cursor: i > 0 ? "pointer" : "default",
|
||
whiteSpace: "nowrap",
|
||
onClick: () => {
|
||
i > 0 && x(i);
|
||
}
|
||
},
|
||
u(i)
|
||
),
|
||
n.createElement(y, {
|
||
size: "sm",
|
||
w: "28px",
|
||
h: "28px",
|
||
minW: "28px",
|
||
minH: "28px",
|
||
bg: "#e6e6f1",
|
||
color: "#4B49AC",
|
||
_hover: { bg: "#cbcbe8" },
|
||
onClick: () => x(l + 1),
|
||
isDisabled: l === i,
|
||
icon: n.createElement(O, { width: "16", height: "16" }),
|
||
"aria-label": "صفحه بعدی"
|
||
})
|
||
),
|
||
G && n.createElement(
|
||
E,
|
||
{
|
||
spacing: 1,
|
||
whiteSpace: "nowrap",
|
||
title: "تعداد کل",
|
||
"aria-label": "تعداد کل"
|
||
},
|
||
n.createElement(
|
||
c,
|
||
{ color: "#1D2939", fontSize: "sm", fontWeight: "700" },
|
||
u(B)
|
||
),
|
||
n.createElement(
|
||
c,
|
||
{ color: "#475467", fontSize: "sm" },
|
||
"مورد"
|
||
)
|
||
)
|
||
) : n.createElement(
|
||
E,
|
||
{
|
||
justifyContent: f.justifyContent,
|
||
backgroundColor: "white",
|
||
py: "10px",
|
||
px: "16px",
|
||
rounded: "lg",
|
||
border: "1px",
|
||
borderColor: "blue.200",
|
||
w: "100%",
|
||
...v
|
||
},
|
||
f.showPageSummary && n.createElement(
|
||
E,
|
||
{ spacing: 2, whiteSpace: "nowrap" },
|
||
n.createElement(c, { fontWeight: "bold" }, "صفحه"),
|
||
n.createElement(c, null, u(s)),
|
||
n.createElement(c, { fontWeight: "bold" }, "از"),
|
||
n.createElement(c, null, u(i))
|
||
),
|
||
n.createElement(
|
||
E,
|
||
{ spacing: 2, alignItems: "center", justifyContent: "center" },
|
||
n.createElement(y, {
|
||
size: "md",
|
||
bg: "#e6e6f1",
|
||
color: "#4B49AC",
|
||
_hover: { bg: "#cbcbe8" },
|
||
onClick: () => x(l - 1),
|
||
isDisabled: l === 1,
|
||
icon: n.createElement(K),
|
||
"aria-label": "صفحه قبلی"
|
||
}),
|
||
r ? [
|
||
ne ? R(1) : null,
|
||
C ? n.createElement(
|
||
n.Fragment,
|
||
{ key: "input" },
|
||
F()
|
||
) : R(l, !0),
|
||
oe ? R(i) : null
|
||
] : [
|
||
...Z.map(
|
||
(o) => R(o, s === o)
|
||
),
|
||
f.showInput ? n.createElement(
|
||
n.Fragment,
|
||
{ key: "input" },
|
||
F()
|
||
) : null
|
||
],
|
||
n.createElement(y, {
|
||
size: "md",
|
||
bg: "#e6e6f1",
|
||
color: "#4B49AC",
|
||
_hover: { bg: "#cbcbe8" },
|
||
onClick: () => x(l + 1),
|
||
isDisabled: l === i,
|
||
icon: n.createElement(O),
|
||
"aria-label": "صفحه بعدی"
|
||
})
|
||
),
|
||
f.showTotalCount && G && n.createElement(
|
||
E,
|
||
{ spacing: 2, whiteSpace: "nowrap" },
|
||
n.createElement(
|
||
c,
|
||
{ w: "auto", fontWeight: "bold" },
|
||
"تعداد کل:"
|
||
),
|
||
n.createElement(c, null, u(B))
|
||
)
|
||
);
|
||
}
|
||
class le extends HTMLElement {
|
||
constructor() {
|
||
super(), this._props = {}, this._root = null, this._unmountTimer = null;
|
||
}
|
||
connectedCallback() {
|
||
this._unmountTimer && (clearTimeout(this._unmountTimer), this._unmountTimer = null);
|
||
const { createRoot: e } = T();
|
||
this._root || (this._root = e(this)), this.renderComponent();
|
||
}
|
||
disconnectedCallback() {
|
||
!this._root || this._unmountTimer || (this._unmountTimer = setTimeout(() => {
|
||
this._unmountTimer = null, this._root && (this._root.unmount(), this._root = null);
|
||
}, 0));
|
||
}
|
||
set componentProps(e) {
|
||
this._props = e ?? {}, this.isConnected && this.renderComponent();
|
||
}
|
||
get componentProps() {
|
||
return this._props;
|
||
}
|
||
renderComponent() {
|
||
if (!this._root) return;
|
||
const {
|
||
React: e,
|
||
ChakraProvider: g,
|
||
theme: d,
|
||
chakraProviderProps: b
|
||
} = T(), { theme: D, chakraProviderProps: v, ...n } = this._props || {};
|
||
this._root.render(
|
||
e.createElement(
|
||
g,
|
||
{
|
||
theme: D || d,
|
||
resetCSS: !1,
|
||
...b || {},
|
||
...v || {}
|
||
},
|
||
e.createElement(ue, n)
|
||
)
|
||
);
|
||
}
|
||
}
|
||
customElements.get("uikit-pagination") || customElements.define("uikit-pagination", le);
|