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