339 lines
8.7 KiB
JavaScript
339 lines
8.7 KiB
JavaScript
const H = {
|
||
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: () => []
|
||
}
|
||
}, V = ["۰", "۱", "۲", "۳", "۴", "۵", "۶", "۷", "۸", "۹"], ne = /[۰-۹]/g, oe = /[٠-٩]/g;
|
||
function I() {
|
||
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 a(t) {
|
||
return t == null ? "" : String(t).replace(/\d/g, (e) => V[Number(e)]);
|
||
}
|
||
function G(t) {
|
||
return t == null ? "" : String(t).replace(
|
||
ne,
|
||
(e) => String(V.indexOf(e))
|
||
).replace(oe, (e) => String(e.charCodeAt(0) - 1632));
|
||
}
|
||
function re(t) {
|
||
return H[t] ? t : "full";
|
||
}
|
||
function W(t, e) {
|
||
const p = Number(t), h = Number(e);
|
||
return !h || h <= 0 || !p || Number.isNaN(p) ? 1 : Math.min(Math.max(p, 1), h);
|
||
}
|
||
function ie(t) {
|
||
const { React: e } = I();
|
||
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 se(t) {
|
||
const { React: e } = I();
|
||
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: p,
|
||
pageSize: h = 10,
|
||
onPageChange: g,
|
||
level: v = "full",
|
||
...B
|
||
}) {
|
||
const { React: n, Button: K, HStack: k, IconButton: j, Input: O, Text: P } = I(), { useCallback: C, useEffect: N, useMemo: U, useRef: X, useState: R } = n, F = re(v), m = H[F], r = F === "simple", y = Number(h), $ = Number.isFinite(y) && y > 0 ? y : 10, L = Number(e), D = Number.isFinite(L) && L > 0 ? L : 0, A = Number(p), u = Number.isFinite(A) && A > 0 ? Math.ceil(A) : Math.ceil(D / $), i = W(t, u), [d, l] = R(
|
||
r ? "" : a(i)
|
||
), [E, b] = R(!1), [f, c] = R(null), _ = X(null), w = f ?? i, q = D > 0, J = U(() => r || u <= 0 ? [] : Array.from(
|
||
new Set(
|
||
m.getPageNumbers({
|
||
currentPage: i,
|
||
totalPages: u
|
||
})
|
||
)
|
||
).filter((o) => o >= 1 && o <= u).sort((o, s) => o - s), [m, r, i, u]), T = C(() => {
|
||
l(r ? "" : a(i)), b(!1), c(null);
|
||
}, [r, i]), M = C(
|
||
(o) => {
|
||
const s = W(o, u);
|
||
b(!1), l(r ? "" : a(i)), c(null), s !== i && g?.(s);
|
||
},
|
||
[r, g, i, u]
|
||
), S = C(() => {
|
||
if (!d) {
|
||
T(), _.current?.blur();
|
||
return;
|
||
}
|
||
const o = parseInt(G(d), 10);
|
||
if (Number.isNaN(o)) {
|
||
T(), _.current?.blur();
|
||
return;
|
||
}
|
||
const s = W(o, u);
|
||
if (r) {
|
||
b(!1), l(""), s !== i ? (c(s), g?.(s)) : c(null), _.current?.blur();
|
||
return;
|
||
}
|
||
s !== i ? (c(s), l(a(s)), g?.(s)) : (l(a(i)), b(!1), c(null)), _.current?.blur();
|
||
}, [
|
||
d,
|
||
r,
|
||
g,
|
||
T,
|
||
i,
|
||
u
|
||
]), Q = C(() => {
|
||
c(null), l(""), b(!0);
|
||
}, []), Y = C((o) => {
|
||
const s = o.target.value, te = G(s).replace(/\D/g, "");
|
||
l(a(te));
|
||
}, []);
|
||
if (N(() => {
|
||
if (r) {
|
||
f !== null && i === f && c(null);
|
||
return;
|
||
}
|
||
if (f !== null) {
|
||
i === f && (c(null), b(!1), l(a(i)));
|
||
return;
|
||
}
|
||
E || l(a(i));
|
||
}, [E, r, f, i]), N(() => {
|
||
r && E && _.current?.focus();
|
||
}, [E, r]), N(() => {
|
||
if (!E || !d || !r && f !== null) return;
|
||
const o = setTimeout(() => {
|
||
S();
|
||
}, 1e3);
|
||
return () => clearTimeout(o);
|
||
}, [S, d, E, r, f]), u <= 0) return null;
|
||
const z = () => n.createElement(O, {
|
||
ref: _,
|
||
type: "text",
|
||
inputMode: "numeric",
|
||
placeholder: "صفحه",
|
||
w: m.inputWidth,
|
||
value: d,
|
||
onFocus: () => {
|
||
r || (b(!0), c(null), l(""));
|
||
},
|
||
onChange: Y,
|
||
onBlur: () => {
|
||
if (d) {
|
||
r && S();
|
||
return;
|
||
}
|
||
T();
|
||
},
|
||
onKeyDown: (o) => {
|
||
o.key === "Enter" && S(), o.key === "Escape" && T();
|
||
},
|
||
textAlign: "center",
|
||
color: "#1D2939",
|
||
px: 1,
|
||
minW: 0,
|
||
dir: "ltr"
|
||
}), x = (o, s = !1) => n.createElement(
|
||
K,
|
||
{
|
||
key: o,
|
||
size: "md",
|
||
px: m.pageButtonPx,
|
||
bg: s ? "#4B49AC" : "#e6e6f1",
|
||
color: s ? "#e6e6f1" : "#4B49AC",
|
||
_hover: { bg: s ? "#4B49AC" : "#cbcbe8" },
|
||
onClick: r && s ? Q : () => M(o),
|
||
variant: "soft"
|
||
},
|
||
a(o)
|
||
), Z = r && u > 1 && w !== 1, ee = r && u > 1 && w !== u;
|
||
return n.createElement(
|
||
k,
|
||
{
|
||
justifyContent: m.justifyContent,
|
||
backgroundColor: "white",
|
||
py: "10px",
|
||
px: "16px",
|
||
rounded: "lg",
|
||
border: "1px",
|
||
borderColor: "blue.200",
|
||
w: "100%",
|
||
...B
|
||
},
|
||
m.showPageSummary && n.createElement(
|
||
k,
|
||
{ spacing: 2, whiteSpace: "nowrap" },
|
||
n.createElement(P, { fontWeight: "bold" }, "صفحه"),
|
||
n.createElement(P, null, a(i)),
|
||
n.createElement(P, { fontWeight: "bold" }, "از"),
|
||
n.createElement(P, null, a(u))
|
||
),
|
||
n.createElement(
|
||
k,
|
||
{ spacing: 2, alignItems: "center", justifyContent: "center" },
|
||
n.createElement(j, {
|
||
size: "md",
|
||
bg: "#e6e6f1",
|
||
color: "#4B49AC",
|
||
_hover: { bg: "#cbcbe8" },
|
||
onClick: () => M(w - 1),
|
||
isDisabled: w === 1,
|
||
icon: n.createElement(ie),
|
||
"aria-label": "صفحه قبلی"
|
||
}),
|
||
r ? [
|
||
Z ? x(1) : null,
|
||
E ? n.createElement(
|
||
n.Fragment,
|
||
{ key: "input" },
|
||
z()
|
||
) : x(w, !0),
|
||
ee ? x(u) : null
|
||
] : [
|
||
...J.map(
|
||
(o) => x(o, i === o)
|
||
),
|
||
m.showInput ? n.createElement(
|
||
n.Fragment,
|
||
{ key: "input" },
|
||
z()
|
||
) : null
|
||
],
|
||
n.createElement(j, {
|
||
size: "md",
|
||
bg: "#e6e6f1",
|
||
color: "#4B49AC",
|
||
_hover: { bg: "#cbcbe8" },
|
||
onClick: () => M(w + 1),
|
||
isDisabled: w === u,
|
||
icon: n.createElement(se),
|
||
"aria-label": "صفحه بعدی"
|
||
})
|
||
),
|
||
m.showTotalCount && q && n.createElement(
|
||
k,
|
||
{ spacing: 2, whiteSpace: "nowrap" },
|
||
n.createElement(
|
||
P,
|
||
{ w: "auto", fontWeight: "bold" },
|
||
"تعداد کل:"
|
||
),
|
||
n.createElement(P, null, a(D))
|
||
)
|
||
);
|
||
}
|
||
class ae extends HTMLElement {
|
||
constructor() {
|
||
super(), this._props = {}, this._root = null, this._unmountTimer = null;
|
||
}
|
||
connectedCallback() {
|
||
this._unmountTimer && (clearTimeout(this._unmountTimer), this._unmountTimer = null);
|
||
const { createRoot: e } = I();
|
||
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: p,
|
||
theme: h,
|
||
chakraProviderProps: g
|
||
} = I(), { theme: v, chakraProviderProps: B, ...n } = this._props || {};
|
||
this._root.render(
|
||
e.createElement(
|
||
p,
|
||
{
|
||
theme: v || h,
|
||
resetCSS: !1,
|
||
...g || {},
|
||
...B || {}
|
||
},
|
||
e.createElement(ue, n)
|
||
)
|
||
);
|
||
}
|
||
}
|
||
customElements.get("uikit-pagination") || customElements.define("uikit-pagination", ae);
|