v-sistec-features 1.3.3 → 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/v-sistec-features.css +1 -1
- package/dist/vDataPage.js +290 -235
- package/package.json +1 -1
- package/src/DataPageVue/components/VDataPage.vue +104 -16
|
@@ -8,4 +8,4 @@
|
|
|
8
8
|
* Copyright 2018-2025 The Tabler Authors
|
|
9
9
|
* Copyright 2018-2025 codecalm.net Paweł Kuna
|
|
10
10
|
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
|
|
11
|
-
*/[data-bs-theme-base=slate]{--tblr-gray-50:#f8fafc;--tblr-gray-100:#f1f5f9;--tblr-gray-200:#e2e8f0;--tblr-gray-300:#cbd5e1;--tblr-gray-400:#94a3b8;--tblr-gray-500:#64748b;--tblr-gray-600:#475569;--tblr-gray-700:#334155;--tblr-gray-800:#1e293b;--tblr-gray-900:#0f172a;--tblr-gray-950:#020617}[data-bs-theme-base=gray]{--tblr-gray-50:#f9fafb;--tblr-gray-100:#f3f4f6;--tblr-gray-200:#e5e7eb;--tblr-gray-300:#d1d5db;--tblr-gray-400:#9ca3af;--tblr-gray-500:#6b7280;--tblr-gray-600:#4b5563;--tblr-gray-700:#374151;--tblr-gray-800:#1f2937;--tblr-gray-900:#111827;--tblr-gray-950:#030712}[data-bs-theme-base=zinc]{--tblr-gray-50:#fafafa;--tblr-gray-100:#f4f4f5;--tblr-gray-200:#e4e4e7;--tblr-gray-300:#d4d4d8;--tblr-gray-400:#a1a1aa;--tblr-gray-500:#71717a;--tblr-gray-600:#52525b;--tblr-gray-700:#3f3f46;--tblr-gray-800:#27272a;--tblr-gray-900:#18181b;--tblr-gray-950:#09090b}[data-bs-theme-base=neutral]{--tblr-gray-50:#fafafa;--tblr-gray-100:#f5f5f5;--tblr-gray-200:#e5e5e5;--tblr-gray-300:#d4d4d4;--tblr-gray-400:#a3a3a3;--tblr-gray-500:#737373;--tblr-gray-600:#525252;--tblr-gray-700:#404040;--tblr-gray-800:#262626;--tblr-gray-900:#171717;--tblr-gray-950:#0a0a0a}[data-bs-theme-base=stone]{--tblr-gray-50:#fafaf9;--tblr-gray-100:#f5f5f4;--tblr-gray-200:#e7e5e4;--tblr-gray-300:#d6d3d1;--tblr-gray-400:#a8a29e;--tblr-gray-500:#78716c;--tblr-gray-600:#57534e;--tblr-gray-700:#44403c;--tblr-gray-800:#292524;--tblr-gray-900:#1c1917;--tblr-gray-950:#0c0a09}[data-bs-theme-base=pink]{--tblr-gray-50:#fdf2f8;--tblr-gray-100:#fce7f3;--tblr-gray-200:#fbcfe8;--tblr-gray-300:#f9a8d4;--tblr-gray-400:#f472b6;--tblr-gray-500:#ec4899;--tblr-gray-600:#db2777;--tblr-gray-700:#be185d;--tblr-gray-800:#9d174d;--tblr-gray-900:#831843;--tblr-gray-950:#500724}[data-bs-theme-primary=blue]{--tblr-primary:#066fd1;--tblr-primary-rgb:6,111,209}[data-bs-theme-primary=azure]{--tblr-primary:#4299e1;--tblr-primary-rgb:66,153,225}[data-bs-theme-primary=indigo]{--tblr-primary:#4263eb;--tblr-primary-rgb:66,99,235}[data-bs-theme-primary=purple]{--tblr-primary:#ae3ec9;--tblr-primary-rgb:174,62,201}[data-bs-theme-primary=pink]{--tblr-primary:#d6336c;--tblr-primary-rgb:214,51,108}[data-bs-theme-primary=red]{--tblr-primary:#d63939;--tblr-primary-rgb:214,57,57}[data-bs-theme-primary=orange]{--tblr-primary:#f76707;--tblr-primary-rgb:247,103,7}[data-bs-theme-primary=yellow]{--tblr-primary:#f59f00;--tblr-primary-rgb:245,159,0}[data-bs-theme-primary=lime]{--tblr-primary:#74b816;--tblr-primary-rgb:116,184,22}[data-bs-theme-primary=green]{--tblr-primary:#2fb344;--tblr-primary-rgb:47,179,68}[data-bs-theme-primary=teal]{--tblr-primary:#0ca678;--tblr-primary-rgb:12,166,120}[data-bs-theme-primary=cyan]{--tblr-primary:#17a2b8;--tblr-primary-rgb:23,162,184}[data-bs-theme-radius="0"]{--tblr-border-radius-scale:0}[data-bs-theme-radius="0.5"]{--tblr-border-radius-scale:.5}[data-bs-theme-radius="1"]{--tblr-border-radius-scale:1}[data-bs-theme-radius="1.5"]{--tblr-border-radius-scale:1.5}[data-bs-theme-radius="2"]{--tblr-border-radius-scale:2}[data-bs-theme-primary=inverted]{--tblr-primary:var(--tblr-gray-800);--tblr-primary-fg:var(--tblr-light);--tblr-primary-rgb:31,41,55}[data-bs-theme-primary=inverted] [data-bs-theme=dark],[data-bs-theme-primary=inverted][data-bs-theme=dark]{--tblr-primary:#f9fafb;--tblr-primary-fg:var(--tblr-dark);--tblr-primary-rgb:249,250,251}[data-bs-theme-font=monospace]{--tblr-body-font-family:var(--tblr-font-monospace);--tblr-body-font-size:80%}[data-bs-theme-font=sans-serif]{--tblr-body-font-family:var(--tblr-font-sans-serif)}[data-bs-theme-font=serif]{--tblr-body-font-family:var(--tblr-font-serif)}[data-bs-theme-font=comic]{--tblr-body-font-family:var(--tblr-font-comic)}.rotate-180[data-v-df81be49] svg{transform:rotate(180deg)}.page-select[data-v-df81be49]{background-color:var(--tblr-primary)!important;color:#fff!important;border:none!important}.page-estilo[data-v-df81be49]{border:none;--cor-escurecida: color-mix(in srgb, var(--tblr-primary), #000 25%);background:transparent;padding:1px 10px;border-radius:7px;margin:0!important;transition:color .15s ease-in-out,background-color .15s ease-in-out}.page-estilo[data-v-df81be49]:hover{background:var(--cor-escurecida);color:#fff}.btn[data-v-df81be49]{padding:0!important;margin:0!important;background:transparent!important;border:none!important;box-shadow:none!important}[data-v-df81be49] .btn-estilo svg{padding:0!important;margin:0!important}[data-v-df81be49] .btn-estilo:hover svg{stroke:var(--tblr-primary)}.icon-tabler[data-v-df81be49]{margin:0!important;padding:0!important}.scroll-finish-style[data-v-
|
|
11
|
+
*/[data-bs-theme-base=slate]{--tblr-gray-50:#f8fafc;--tblr-gray-100:#f1f5f9;--tblr-gray-200:#e2e8f0;--tblr-gray-300:#cbd5e1;--tblr-gray-400:#94a3b8;--tblr-gray-500:#64748b;--tblr-gray-600:#475569;--tblr-gray-700:#334155;--tblr-gray-800:#1e293b;--tblr-gray-900:#0f172a;--tblr-gray-950:#020617}[data-bs-theme-base=gray]{--tblr-gray-50:#f9fafb;--tblr-gray-100:#f3f4f6;--tblr-gray-200:#e5e7eb;--tblr-gray-300:#d1d5db;--tblr-gray-400:#9ca3af;--tblr-gray-500:#6b7280;--tblr-gray-600:#4b5563;--tblr-gray-700:#374151;--tblr-gray-800:#1f2937;--tblr-gray-900:#111827;--tblr-gray-950:#030712}[data-bs-theme-base=zinc]{--tblr-gray-50:#fafafa;--tblr-gray-100:#f4f4f5;--tblr-gray-200:#e4e4e7;--tblr-gray-300:#d4d4d8;--tblr-gray-400:#a1a1aa;--tblr-gray-500:#71717a;--tblr-gray-600:#52525b;--tblr-gray-700:#3f3f46;--tblr-gray-800:#27272a;--tblr-gray-900:#18181b;--tblr-gray-950:#09090b}[data-bs-theme-base=neutral]{--tblr-gray-50:#fafafa;--tblr-gray-100:#f5f5f5;--tblr-gray-200:#e5e5e5;--tblr-gray-300:#d4d4d4;--tblr-gray-400:#a3a3a3;--tblr-gray-500:#737373;--tblr-gray-600:#525252;--tblr-gray-700:#404040;--tblr-gray-800:#262626;--tblr-gray-900:#171717;--tblr-gray-950:#0a0a0a}[data-bs-theme-base=stone]{--tblr-gray-50:#fafaf9;--tblr-gray-100:#f5f5f4;--tblr-gray-200:#e7e5e4;--tblr-gray-300:#d6d3d1;--tblr-gray-400:#a8a29e;--tblr-gray-500:#78716c;--tblr-gray-600:#57534e;--tblr-gray-700:#44403c;--tblr-gray-800:#292524;--tblr-gray-900:#1c1917;--tblr-gray-950:#0c0a09}[data-bs-theme-base=pink]{--tblr-gray-50:#fdf2f8;--tblr-gray-100:#fce7f3;--tblr-gray-200:#fbcfe8;--tblr-gray-300:#f9a8d4;--tblr-gray-400:#f472b6;--tblr-gray-500:#ec4899;--tblr-gray-600:#db2777;--tblr-gray-700:#be185d;--tblr-gray-800:#9d174d;--tblr-gray-900:#831843;--tblr-gray-950:#500724}[data-bs-theme-primary=blue]{--tblr-primary:#066fd1;--tblr-primary-rgb:6,111,209}[data-bs-theme-primary=azure]{--tblr-primary:#4299e1;--tblr-primary-rgb:66,153,225}[data-bs-theme-primary=indigo]{--tblr-primary:#4263eb;--tblr-primary-rgb:66,99,235}[data-bs-theme-primary=purple]{--tblr-primary:#ae3ec9;--tblr-primary-rgb:174,62,201}[data-bs-theme-primary=pink]{--tblr-primary:#d6336c;--tblr-primary-rgb:214,51,108}[data-bs-theme-primary=red]{--tblr-primary:#d63939;--tblr-primary-rgb:214,57,57}[data-bs-theme-primary=orange]{--tblr-primary:#f76707;--tblr-primary-rgb:247,103,7}[data-bs-theme-primary=yellow]{--tblr-primary:#f59f00;--tblr-primary-rgb:245,159,0}[data-bs-theme-primary=lime]{--tblr-primary:#74b816;--tblr-primary-rgb:116,184,22}[data-bs-theme-primary=green]{--tblr-primary:#2fb344;--tblr-primary-rgb:47,179,68}[data-bs-theme-primary=teal]{--tblr-primary:#0ca678;--tblr-primary-rgb:12,166,120}[data-bs-theme-primary=cyan]{--tblr-primary:#17a2b8;--tblr-primary-rgb:23,162,184}[data-bs-theme-radius="0"]{--tblr-border-radius-scale:0}[data-bs-theme-radius="0.5"]{--tblr-border-radius-scale:.5}[data-bs-theme-radius="1"]{--tblr-border-radius-scale:1}[data-bs-theme-radius="1.5"]{--tblr-border-radius-scale:1.5}[data-bs-theme-radius="2"]{--tblr-border-radius-scale:2}[data-bs-theme-primary=inverted]{--tblr-primary:var(--tblr-gray-800);--tblr-primary-fg:var(--tblr-light);--tblr-primary-rgb:31,41,55}[data-bs-theme-primary=inverted] [data-bs-theme=dark],[data-bs-theme-primary=inverted][data-bs-theme=dark]{--tblr-primary:#f9fafb;--tblr-primary-fg:var(--tblr-dark);--tblr-primary-rgb:249,250,251}[data-bs-theme-font=monospace]{--tblr-body-font-family:var(--tblr-font-monospace);--tblr-body-font-size:80%}[data-bs-theme-font=sans-serif]{--tblr-body-font-family:var(--tblr-font-sans-serif)}[data-bs-theme-font=serif]{--tblr-body-font-family:var(--tblr-font-serif)}[data-bs-theme-font=comic]{--tblr-body-font-family:var(--tblr-font-comic)}.rotate-180[data-v-df81be49] svg{transform:rotate(180deg)}.page-select[data-v-df81be49]{background-color:var(--tblr-primary)!important;color:#fff!important;border:none!important}.page-estilo[data-v-df81be49]{border:none;--cor-escurecida: color-mix(in srgb, var(--tblr-primary), #000 25%);background:transparent;padding:1px 10px;border-radius:7px;margin:0!important;transition:color .15s ease-in-out,background-color .15s ease-in-out}.page-estilo[data-v-df81be49]:hover{background:var(--cor-escurecida);color:#fff}.btn[data-v-df81be49]{padding:0!important;margin:0!important;background:transparent!important;border:none!important;box-shadow:none!important}[data-v-df81be49] .btn-estilo svg{padding:0!important;margin:0!important}[data-v-df81be49] .btn-estilo:hover svg{stroke:var(--tblr-primary)}.icon-tabler[data-v-df81be49]{margin:0!important;padding:0!important}.scroll-finish-style[data-v-9350c793]{color:#6c757d;display:block;text-align:center;margin-top:1rem;margin-bottom:1rem}.rotate-180[data-v-b9735591] svg{transform:rotate(180deg)}.page-select[data-v-b9735591]{background-color:var(--tblr-primary)!important;color:#fff!important;border:none!important}.page-estilo[data-v-b9735591]{border:none;--cor-escurecida: color-mix(in srgb, var(--tblr-primary), #000 25%);background:transparent;padding:1px 10px;border-radius:7px;margin:0!important;transition:color .15s ease-in-out,background-color .15s ease-in-out}.page-estilo[data-v-b9735591]:hover{background:var(--cor-escurecida);color:#fff}.btn[data-v-b9735591]{padding:0!important;margin:0!important;background:transparent!important;border:none!important;box-shadow:none!important}[data-v-b9735591] .btn-estilo svg{padding:0!important;margin:0!important}[data-v-b9735591] .btn-estilo:hover svg{stroke:var(--tblr-primary)}.icon-tabler[data-v-b9735591]{margin:0!important;padding:0!important}.inputClose[data-v-1b6ff54b]{color:var(--tblr-icon-color);z-index:10;position:absolute;top:50%;right:0;transform:translateY(-50%);font-size:1.2em;min-width:2.5rem;display:flex;justify-content:center}.inputClose[data-v-1b6ff54b]:hover{cursor:pointer}.selected[data-v-1b6ff54b]:hover{background-color:#b02a2a!important;color:#fff!important}.table-responsive[data-v-01e87047]{overflow-x:auto}.state-feedback[data-v-01e87047]{padding:1rem;text-align:center}.state-feedback.error[data-v-01e87047]{color:red}.pagination-controls[data-v-01e87047]{margin-top:1rem;display:flex;justify-content:space-between}.placeholder-img[data-v-01e87047]{width:40px;height:40px;border-radius:4px}.container-img[data-v-01e87047]{aspect-ratio:1;display:flex;justify-content:center;overflow:hidden;position:relative;max-width:40px;min-width:40px}.container-img .img-tamanho-cover[data-v-01e87047]{position:absolute;top:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.5;filter:blur(4px)}.container-img .img-tamanho[data-v-01e87047]{object-fit:contain;width:100%;height:100%;z-index:2}.container-img.container-img-preview[data-v-01e87047]{cursor:pointer}.container-img.container-img-preview[data-v-01e87047]:hover{border-style:dashed;border-color:var(--tblr-primary);border-width:2px;transition:border-width .15s ease-in-out}.container-img.container-img-preview:hover .img-tamanho[data-v-01e87047]{opacity:.3}.erro-custom-container[data-v-01e87047]{display:inline-block;padding:.2em .6em;border-radius:4px;background-color:#fff;font-weight:700;text-transform:uppercase}.erro-custom-text[data-v-01e87047]{font-size:.8em;text-transform:uppercase;font-weight:700}.bg-img[data-v-01e87047]{background-color:#0000004d;position:absolute;top:0;width:100%;height:100%;z-index:1}.image-preview-container[data-v-01e87047]{position:fixed;z-index:9999;background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #0003;padding:5px;pointer-events:none;transition:opacity .2s ease-in-out}.image-preview-container .image-preview-large[data-v-01e87047]{display:block;max-width:250px;max-height:250px;border-radius:4px}.form-check-input[data-v-01e87047]{border-width:1px!important;border-color:#00000064!important;width:17px;height:17px}[data-bs-theme=dark] .form-check-input[data-v-01e87047]{border-color:#ffffff5f!important}
|
package/dist/vDataPage.js
CHANGED
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { _ as
|
|
3
|
-
function
|
|
4
|
-
if (!
|
|
1
|
+
import { defineComponent as G, ref as b, toRefs as de, createElementBlock as f, watch as z, onMounted as ce, onUnmounted as pe, openBlock as g, withDirectives as fe, renderSlot as x, createCommentVNode as T, createElementVNode as c, createVNode as j, vShow as ge, toDisplayString as F, nextTick as H, pushScopeId as _e, popScopeId as ve, computed as S, withModifiers as A, Fragment as C, renderList as $, normalizeClass as U, readonly as me, isRef as he, unref as B, withCtx as W } from "vue";
|
|
2
|
+
import { _ as Z } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
|
3
|
+
function ye(i, _ = null) {
|
|
4
|
+
if (!i)
|
|
5
5
|
return !1;
|
|
6
|
-
const t =
|
|
6
|
+
const t = i.getBoundingClientRect(), l = _ ? _.getBoundingClientRect() : { top: 0, left: 0, bottom: window.innerHeight, right: window.innerWidth };
|
|
7
7
|
return t.bottom >= l.top && t.top <= l.bottom && t.right >= l.left && t.left <= l.right;
|
|
8
8
|
}
|
|
9
|
-
async function
|
|
10
|
-
return
|
|
9
|
+
async function ke(i) {
|
|
10
|
+
return i ? (await H(), i.value instanceof HTMLElement ? i.value : i.value ? document.querySelector(i.value) : null) : null;
|
|
11
11
|
}
|
|
12
|
-
function
|
|
13
|
-
let
|
|
14
|
-
|
|
12
|
+
function be(i) {
|
|
13
|
+
let _ = `0px 0px ${i.distance}px 0px`;
|
|
14
|
+
i.top && (_ = `${i.distance}px 0px 0px 0px`);
|
|
15
15
|
const t = new IntersectionObserver(
|
|
16
16
|
(l) => {
|
|
17
|
-
l[0].isIntersecting && (
|
|
17
|
+
l[0].isIntersecting && (i.firstload && i.emit(), i.firstload = !0);
|
|
18
18
|
},
|
|
19
|
-
{ root:
|
|
19
|
+
{ root: i.parentEl, rootMargin: _ }
|
|
20
20
|
);
|
|
21
|
-
return
|
|
21
|
+
return i.infiniteLoading.value && t.observe(i.infiniteLoading.value), t;
|
|
22
22
|
}
|
|
23
|
-
async function K(
|
|
24
|
-
if (await
|
|
23
|
+
async function K(i, _) {
|
|
24
|
+
if (await H(), !i.top)
|
|
25
25
|
return;
|
|
26
|
-
const t =
|
|
27
|
-
t.scrollTop = t.scrollHeight -
|
|
26
|
+
const t = i.parentEl || document.documentElement;
|
|
27
|
+
t.scrollTop = t.scrollHeight - _;
|
|
28
28
|
}
|
|
29
|
-
const
|
|
30
|
-
const t =
|
|
31
|
-
for (const [l, e] of
|
|
29
|
+
const ee = (i, _) => {
|
|
30
|
+
const t = i.__vccOpts || i;
|
|
31
|
+
for (const [l, e] of _)
|
|
32
32
|
t[l] = e;
|
|
33
33
|
return t;
|
|
34
|
-
},
|
|
35
|
-
|
|
34
|
+
}, we = {}, Ie = (i) => (_e("data-v-d3e37633"), i = i(), ve(), i), xe = { class: "container" }, Le = /* @__PURE__ */ Ie(() => /* @__PURE__ */ c("div", { class: "spinner" }, null, -1)), Ee = [
|
|
35
|
+
Le
|
|
36
36
|
];
|
|
37
|
-
function
|
|
38
|
-
return
|
|
37
|
+
function Pe(i, _) {
|
|
38
|
+
return g(), f("div", xe, Ee);
|
|
39
39
|
}
|
|
40
|
-
const
|
|
40
|
+
const Me = /* @__PURE__ */ ee(we, [["render", Pe], ["__scopeId", "data-v-d3e37633"]]), De = { class: "state-error" }, Ce = /* @__PURE__ */ G({
|
|
41
41
|
__name: "InfiniteLoading",
|
|
42
42
|
props: {
|
|
43
43
|
top: { type: Boolean, default: !1 },
|
|
@@ -48,83 +48,83 @@ const Pe = /* @__PURE__ */ Z(ye, [["render", Ie], ["__scopeId", "data-v-d3e37633
|
|
|
48
48
|
slots: {}
|
|
49
49
|
},
|
|
50
50
|
emits: ["infinite"],
|
|
51
|
-
setup(
|
|
52
|
-
const t =
|
|
51
|
+
setup(i, { emit: _ }) {
|
|
52
|
+
const t = i;
|
|
53
53
|
let l = null, e = 0;
|
|
54
|
-
const y =
|
|
54
|
+
const y = b(null), m = b(""), { top: P, firstload: p, distance: o } = t, { identifier: M, target: D } = de(t), s = {
|
|
55
55
|
infiniteLoading: y,
|
|
56
|
-
top:
|
|
57
|
-
firstload:
|
|
58
|
-
distance:
|
|
56
|
+
top: P,
|
|
57
|
+
firstload: p,
|
|
58
|
+
distance: o,
|
|
59
59
|
parentEl: null,
|
|
60
60
|
emit() {
|
|
61
|
-
e = (
|
|
61
|
+
e = (s.parentEl || document.documentElement).scrollHeight, h.loading(), _("infinite", h);
|
|
62
62
|
}
|
|
63
|
-
},
|
|
63
|
+
}, h = {
|
|
64
64
|
loading() {
|
|
65
|
-
|
|
65
|
+
m.value = "loading";
|
|
66
66
|
},
|
|
67
67
|
async loaded() {
|
|
68
|
-
|
|
68
|
+
m.value = "loaded", await K(s, e), ye(y.value, s.parentEl) && s.emit();
|
|
69
69
|
},
|
|
70
70
|
async complete() {
|
|
71
|
-
|
|
71
|
+
m.value = "complete", await K(s, e), l?.disconnect();
|
|
72
72
|
},
|
|
73
73
|
error() {
|
|
74
|
-
|
|
74
|
+
m.value = "error";
|
|
75
75
|
}
|
|
76
76
|
};
|
|
77
|
-
function
|
|
78
|
-
l?.disconnect(), l =
|
|
77
|
+
function n() {
|
|
78
|
+
l?.disconnect(), l = be(s);
|
|
79
79
|
}
|
|
80
|
-
return
|
|
81
|
-
|
|
82
|
-
}),
|
|
80
|
+
return z(M, n), ce(async () => {
|
|
81
|
+
s.parentEl = await ke(D), n();
|
|
82
|
+
}), pe(() => l?.disconnect()), (v, E) => (g(), f("div", {
|
|
83
83
|
ref_key: "infiniteLoading",
|
|
84
84
|
ref: y,
|
|
85
85
|
class: "v3-infinite-loading"
|
|
86
86
|
}, [
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
87
|
+
fe(c("div", null, [
|
|
88
|
+
x(v.$slots, "spinner", {}, () => [
|
|
89
|
+
j(Me)
|
|
90
90
|
], !0)
|
|
91
91
|
], 512), [
|
|
92
|
-
[
|
|
92
|
+
[ge, m.value == "loading"]
|
|
93
93
|
]),
|
|
94
|
-
|
|
95
|
-
var
|
|
94
|
+
m.value == "complete" ? x(v.$slots, "complete", { key: 0 }, () => {
|
|
95
|
+
var u;
|
|
96
96
|
return [
|
|
97
|
-
c("span", null,
|
|
97
|
+
c("span", null, F(((u = v.slots) == null ? void 0 : u.complete) || "No more results!"), 1)
|
|
98
98
|
];
|
|
99
|
-
}, !0) :
|
|
100
|
-
|
|
99
|
+
}, !0) : T("", !0),
|
|
100
|
+
m.value == "error" ? x(v.$slots, "error", {
|
|
101
101
|
key: 1,
|
|
102
|
-
retry:
|
|
102
|
+
retry: s.emit
|
|
103
103
|
}, () => {
|
|
104
|
-
var
|
|
104
|
+
var u;
|
|
105
105
|
return [
|
|
106
|
-
c("span",
|
|
107
|
-
c("span", null,
|
|
106
|
+
c("span", De, [
|
|
107
|
+
c("span", null, F(((u = v.slots) == null ? void 0 : u.error) || "Oops something went wrong!"), 1),
|
|
108
108
|
c("button", {
|
|
109
109
|
class: "retry",
|
|
110
|
-
onClick:
|
|
111
|
-
(...
|
|
110
|
+
onClick: E[0] || (E[0] = //@ts-ignore
|
|
111
|
+
(...L) => s.emit && s.emit(...L))
|
|
112
112
|
}, "retry")
|
|
113
113
|
])
|
|
114
114
|
];
|
|
115
|
-
}, !0) :
|
|
115
|
+
}, !0) : T("", !0)
|
|
116
116
|
], 512));
|
|
117
117
|
}
|
|
118
|
-
}), Q = /* @__PURE__ */
|
|
118
|
+
}), Q = /* @__PURE__ */ ee(Ce, [["__scopeId", "data-v-4bdee133"]]), Te = {
|
|
119
119
|
key: 0,
|
|
120
120
|
class: "d-flex align-items-center justify-content-between w-100"
|
|
121
121
|
}, Be = {
|
|
122
122
|
key: 0,
|
|
123
123
|
class: "d-flex align-items-center gap-2"
|
|
124
|
-
},
|
|
124
|
+
}, ze = { class: "d-flex" }, Fe = ["disabled"], He = ["disabled"], Se = { class: "d-flex gap-2" }, Ae = ["onClick", "disabled"], Ue = {
|
|
125
125
|
key: 1,
|
|
126
126
|
class: "m-0 p-0"
|
|
127
|
-
},
|
|
127
|
+
}, Ne = { class: "d-flex" }, Oe = ["disabled"], Ve = ["disabled"], Y = `
|
|
128
128
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
129
129
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
130
130
|
class="icon icon-tabler icons-tabler-outline icon-tabler-chevrons-left">
|
|
@@ -132,96 +132,96 @@ const Pe = /* @__PURE__ */ Z(ye, [["render", Ie], ["__scopeId", "data-v-d3e37633
|
|
|
132
132
|
<path d="M11 7l-5 5l5 5" />
|
|
133
133
|
<path d="M17 7l-5 5l5 5" />
|
|
134
134
|
</svg>
|
|
135
|
-
`,
|
|
135
|
+
`, X = `
|
|
136
136
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
137
137
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
138
138
|
class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left">
|
|
139
139
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
140
140
|
<path d="M15 6l-6 6l6 6" />
|
|
141
141
|
</svg>
|
|
142
|
-
`,
|
|
142
|
+
`, je = /* @__PURE__ */ G({
|
|
143
143
|
__name: "PaginationDatatable",
|
|
144
144
|
props: {
|
|
145
145
|
pagination: {},
|
|
146
146
|
filtering: { type: Boolean, default: !1 }
|
|
147
147
|
},
|
|
148
148
|
emits: ["tradePage"],
|
|
149
|
-
setup(
|
|
150
|
-
const t =
|
|
149
|
+
setup(i, { emit: _ }) {
|
|
150
|
+
const t = i, l = _, e = S(() => t.pagination.limit_per_page ? Math.ceil(t.pagination.count / t.pagination.limit_per_page) : 0), y = S(() => t.pagination.current_page + 1 < e.value ? t.pagination.current_page + 1 : null), m = () => {
|
|
151
151
|
t.pagination.current_page++, l("tradePage");
|
|
152
|
-
},
|
|
153
|
-
t.pagination.current_page =
|
|
154
|
-
},
|
|
152
|
+
}, P = (s) => {
|
|
153
|
+
t.pagination.current_page = s - 1, l("tradePage");
|
|
154
|
+
}, p = () => {
|
|
155
155
|
t.pagination.current_page = e.value - 1, l("tradePage");
|
|
156
|
-
},
|
|
156
|
+
}, o = () => {
|
|
157
157
|
t.pagination.current_page = 0, l("tradePage");
|
|
158
|
-
},
|
|
158
|
+
}, M = () => {
|
|
159
159
|
t.pagination.current_page > 0 && (t.pagination.current_page--, l("tradePage"));
|
|
160
|
-
},
|
|
160
|
+
}, D = S(() => {
|
|
161
161
|
if (e.value <= 7)
|
|
162
|
-
return Array.from({ length: e.value }, (
|
|
163
|
-
const
|
|
162
|
+
return Array.from({ length: e.value }, (u, L) => L + 1);
|
|
163
|
+
const s = t.pagination.current_page + 1, h = e.value, n = /* @__PURE__ */ new Set([
|
|
164
164
|
1,
|
|
165
165
|
2,
|
|
166
166
|
// Sempre mostra as 2 primeiras
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
167
|
+
s - 1,
|
|
168
|
+
s,
|
|
169
|
+
s + 1,
|
|
170
170
|
// Mostra a atual e vizinhas
|
|
171
|
-
|
|
172
|
-
|
|
171
|
+
h - 1,
|
|
172
|
+
h
|
|
173
173
|
// Sempre mostra as 2 últimas
|
|
174
|
-
]),
|
|
175
|
-
let
|
|
176
|
-
return Array.from(
|
|
177
|
-
|
|
178
|
-
}),
|
|
174
|
+
]), v = [];
|
|
175
|
+
let E = 0;
|
|
176
|
+
return Array.from(n).sort((u, L) => u - L).forEach((u) => {
|
|
177
|
+
u < 1 || u > h || (u > E + 1 && v.push("..."), v.push(u), E = u);
|
|
178
|
+
}), v;
|
|
179
179
|
});
|
|
180
|
-
return (
|
|
181
|
-
c("span", null, " Mostrando de " +
|
|
182
|
-
e.value > 0 ? (
|
|
183
|
-
c("div",
|
|
180
|
+
return (s, h) => t.pagination.count > 0 ? (g(), f("div", Te, [
|
|
181
|
+
c("span", null, " Mostrando de " + F(t.pagination.count !== 0 ? t.pagination.limit_per_page * t.pagination.current_page + 1 : 0) + " até " + F(t.pagination.limit_per_page * (t.pagination.current_page + 1) < t.pagination.count ? t.pagination.limit_per_page * (t.pagination.current_page + 1) : t.pagination.count) + " de " + F(t.pagination.count) + " registros ", 1),
|
|
182
|
+
e.value > 0 ? (g(), f("div", Be, [
|
|
183
|
+
c("div", ze, [
|
|
184
184
|
c("button", {
|
|
185
185
|
class: "btn btn-estilo",
|
|
186
|
-
onClick:
|
|
186
|
+
onClick: A(o, ["prevent"]),
|
|
187
187
|
disabled: t.pagination.current_page === 0,
|
|
188
188
|
innerHTML: Y
|
|
189
|
-
}, null, 8,
|
|
189
|
+
}, null, 8, Fe),
|
|
190
190
|
c("button", {
|
|
191
191
|
class: "btn btn-estilo",
|
|
192
|
-
onClick:
|
|
192
|
+
onClick: A(M, ["prevent"]),
|
|
193
193
|
disabled: t.pagination.current_page === 0,
|
|
194
|
-
innerHTML:
|
|
195
|
-
}, null, 8,
|
|
194
|
+
innerHTML: X
|
|
195
|
+
}, null, 8, He)
|
|
196
196
|
]),
|
|
197
|
-
c("div",
|
|
198
|
-
(
|
|
199
|
-
typeof
|
|
197
|
+
c("div", Se, [
|
|
198
|
+
(g(!0), f(C, null, $(D.value, (n, v) => (g(), f(C, { key: v }, [
|
|
199
|
+
typeof n == "number" ? (g(), f("button", {
|
|
200
200
|
key: 0,
|
|
201
|
-
class:
|
|
202
|
-
onClick:
|
|
203
|
-
disabled: t.pagination.current_page + 1 ==
|
|
204
|
-
},
|
|
201
|
+
class: U([t.pagination.current_page + 1 == n ? "page-select" : "", "page-estilo"]),
|
|
202
|
+
onClick: A((E) => P(n), ["prevent"]),
|
|
203
|
+
disabled: t.pagination.current_page + 1 == n
|
|
204
|
+
}, F(n), 11, Ae)) : (g(), f("span", Ue, "..."))
|
|
205
205
|
], 64))), 128))
|
|
206
206
|
]),
|
|
207
|
-
c("div",
|
|
207
|
+
c("div", Ne, [
|
|
208
208
|
c("button", {
|
|
209
|
-
onClick:
|
|
209
|
+
onClick: A(m, ["prevent"]),
|
|
210
210
|
class: "btn btn-estilo rotate-180",
|
|
211
211
|
disabled: !y.value,
|
|
212
|
-
innerHTML:
|
|
213
|
-
}, null, 8,
|
|
212
|
+
innerHTML: X
|
|
213
|
+
}, null, 8, Oe),
|
|
214
214
|
c("button", {
|
|
215
|
-
onClick:
|
|
215
|
+
onClick: A(p, ["prevent"]),
|
|
216
216
|
class: "btn btn-estilo rotate-180",
|
|
217
217
|
disabled: !y.value,
|
|
218
218
|
innerHTML: Y
|
|
219
|
-
}, null, 8,
|
|
219
|
+
}, null, 8, Ve)
|
|
220
220
|
])
|
|
221
|
-
])) :
|
|
222
|
-
])) :
|
|
221
|
+
])) : T("", !0)
|
|
222
|
+
])) : T("", !0);
|
|
223
223
|
}
|
|
224
|
-
}),
|
|
224
|
+
}), $e = /* @__PURE__ */ Z(je, [["__scopeId", "data-v-df81be49"]]), qe = /* @__PURE__ */ G({
|
|
225
225
|
__name: "VDataPage",
|
|
226
226
|
props: {
|
|
227
227
|
fetch: {},
|
|
@@ -242,6 +242,7 @@ const Pe = /* @__PURE__ */ Z(ye, [["render", Ie], ["__scopeId", "data-v-d3e37633
|
|
|
242
242
|
first_text_page_size: { default: "Mostrar" },
|
|
243
243
|
second_text_page_size: { default: "registros" },
|
|
244
244
|
class_container: { default: "" },
|
|
245
|
+
class_loading_container: { default: "" },
|
|
245
246
|
class_pagination: { default: "" },
|
|
246
247
|
class_filters: { default: "" },
|
|
247
248
|
min_loading_delay: { default: 600 },
|
|
@@ -256,8 +257,8 @@ const Pe = /* @__PURE__ */ Z(ye, [["render", Ie], ["__scopeId", "data-v-d3e37633
|
|
|
256
257
|
watch: { default: () => [] }
|
|
257
258
|
},
|
|
258
259
|
emits: ["tradePage", "beforeFetch", "afterFetch"],
|
|
259
|
-
setup(
|
|
260
|
-
const l = t, e =
|
|
260
|
+
setup(i, { expose: _, emit: t }) {
|
|
261
|
+
const l = t, e = i, y = b(!0), m = b(Date.now()), P = b(Date.now()), p = b([]), o = b([]), M = b(0), D = b(!1), s = b(null), h = b(!1), n = b({
|
|
261
262
|
current_page: e.page_starts_at,
|
|
262
263
|
// pagina atual
|
|
263
264
|
count: 0,
|
|
@@ -268,204 +269,258 @@ const Pe = /* @__PURE__ */ Z(ye, [["render", Ie], ["__scopeId", "data-v-d3e37633
|
|
|
268
269
|
// termo de busca
|
|
269
270
|
filter: ""
|
|
270
271
|
// filtro selecionado
|
|
271
|
-
}), { data:
|
|
272
|
+
}), { data: v, pending: E, error: u, execute: L, attempt: Re } = e.fetch(e.endpoint, {
|
|
272
273
|
params: () => e.deactivate_default_params ? e.add_params && typeof e.add_params == "function" ? e.add_params() : {
|
|
273
274
|
...e.add_params
|
|
274
275
|
} : e.add_params && typeof e.add_params == "function" ? {
|
|
275
|
-
...
|
|
276
|
+
...q.value,
|
|
276
277
|
...e.add_params()
|
|
277
278
|
} : {
|
|
278
|
-
...
|
|
279
|
+
...q.value,
|
|
279
280
|
...e.add_params
|
|
280
281
|
},
|
|
281
282
|
retry: e.retry_attempts,
|
|
282
283
|
retryDelay: e.retry_delay,
|
|
283
284
|
paramsReactives: !1,
|
|
284
285
|
immediate: !1
|
|
285
|
-
}, e.fetch_name),
|
|
286
|
-
[e.page_param_name]:
|
|
287
|
-
[e.page_size_param_name]:
|
|
288
|
-
[e.search_param_name]:
|
|
289
|
-
[e.filter_param_name]:
|
|
290
|
-
}));
|
|
291
|
-
|
|
292
|
-
|
|
286
|
+
}, e.fetch_name), q = S(() => ({
|
|
287
|
+
[e.page_param_name]: n.value.current_page + 1,
|
|
288
|
+
[e.page_size_param_name]: n.value.limit_per_page,
|
|
289
|
+
[e.search_param_name]: n.value.search || "",
|
|
290
|
+
[e.filter_param_name]: n.value.filter || ""
|
|
291
|
+
})), te = S(() => E.value || D.value);
|
|
292
|
+
z(v, (a) => {
|
|
293
|
+
a ? (p.value = a[e.data_key] || [], M.value = a[e.total_key] || 0, n.value.count = M.value) : (p.value = [], M.value = 0);
|
|
293
294
|
}, { immediate: !0 });
|
|
294
|
-
async function
|
|
295
|
-
if (
|
|
296
|
-
|
|
295
|
+
async function w() {
|
|
296
|
+
if (s.value && clearTimeout(s.value), D.value = !0, s.value = setTimeout(() => {
|
|
297
|
+
D.value = !1;
|
|
297
298
|
}, e.min_loading_delay), e.type_fetch === "infinite-scroll")
|
|
298
|
-
return
|
|
299
|
-
e.type_fetch === "pagination" && (l("beforeFetch"), await
|
|
299
|
+
return L();
|
|
300
|
+
e.type_fetch === "pagination" && (l("beforeFetch"), await L(), l("afterFetch"));
|
|
300
301
|
}
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
302
|
+
let N = 0;
|
|
303
|
+
async function R() {
|
|
304
|
+
N++;
|
|
305
|
+
const a = N;
|
|
306
|
+
p.value = [], o.value = [], n.value.current_page = e.page_starts_at, l("beforeFetch"), await w(), l("afterFetch"), a === N && H(() => {
|
|
307
|
+
if (a !== N)
|
|
308
|
+
return;
|
|
309
|
+
let d = crypto.randomUUID();
|
|
310
|
+
p.value.forEach((r) => {
|
|
311
|
+
r.loading = !0, r.idhashInfiniteLoading = d;
|
|
312
|
+
}), o.value.push(...p.value), setTimeout(() => {
|
|
313
|
+
o.value.forEach((r) => {
|
|
314
|
+
r.idhashInfiniteLoading === d && (r.loading = !1, delete r.idhashInfiniteLoading);
|
|
315
|
+
});
|
|
316
|
+
}, e.min_loading_delay), h.value = !0, m.value++, P.value++;
|
|
304
317
|
});
|
|
305
318
|
}
|
|
306
|
-
function
|
|
307
|
-
|
|
319
|
+
function ae(a) {
|
|
320
|
+
a > 0 ? (n.value.limit_per_page = a, n.value.current_page = 0, w()) : console.warn("O limite deve ser um número maior que zero.");
|
|
308
321
|
}
|
|
309
|
-
function
|
|
310
|
-
|
|
322
|
+
function ne(a) {
|
|
323
|
+
n.value.search = a, n.value.current_page = 0, w();
|
|
311
324
|
}
|
|
312
|
-
function
|
|
313
|
-
|
|
325
|
+
function ie(a) {
|
|
326
|
+
n.value.filter = a, n.value.current_page = 0, w();
|
|
314
327
|
}
|
|
315
|
-
function
|
|
316
|
-
|
|
328
|
+
function le(a) {
|
|
329
|
+
a >= 1 && a <= Math.ceil(n.value.count / n.value.limit_per_page) ? (n.value.current_page = a - 1, w()) : console.warn("Número de página inválido.");
|
|
317
330
|
}
|
|
318
|
-
|
|
319
|
-
execute:
|
|
320
|
-
pagination:
|
|
321
|
-
set_limit_per_page:
|
|
322
|
-
set_search:
|
|
323
|
-
set_filter:
|
|
324
|
-
set_page:
|
|
325
|
-
default_params:
|
|
331
|
+
_({
|
|
332
|
+
execute: w,
|
|
333
|
+
pagination: me(n),
|
|
334
|
+
set_limit_per_page: ae,
|
|
335
|
+
set_search: ne,
|
|
336
|
+
set_filter: ie,
|
|
337
|
+
set_page: le,
|
|
338
|
+
default_params: q
|
|
326
339
|
});
|
|
327
|
-
const
|
|
328
|
-
async function
|
|
329
|
-
if (!
|
|
330
|
-
if (!
|
|
331
|
-
|
|
340
|
+
const J = S(() => v.value?.[e.next_page_response_name] || null);
|
|
341
|
+
async function re(a) {
|
|
342
|
+
if (!h.value) return;
|
|
343
|
+
if (!J.value) {
|
|
344
|
+
a.complete();
|
|
332
345
|
return;
|
|
333
346
|
}
|
|
334
|
-
if (
|
|
335
|
-
|
|
347
|
+
if (n.value.current_page += 1, await L(), u.value) {
|
|
348
|
+
a.error();
|
|
336
349
|
return;
|
|
337
350
|
}
|
|
338
|
-
if (!
|
|
339
|
-
|
|
351
|
+
if (!p.value || p.value.length === 0) {
|
|
352
|
+
a.complete();
|
|
340
353
|
return;
|
|
341
354
|
}
|
|
342
|
-
const
|
|
343
|
-
(
|
|
355
|
+
const d = p.value.filter(
|
|
356
|
+
(k) => !o.value.some((V) => V[e.item_key] === k[e.item_key])
|
|
344
357
|
);
|
|
345
|
-
if (
|
|
346
|
-
|
|
358
|
+
if (d.length === 0 && p.value.length > 0) {
|
|
359
|
+
a.loaded();
|
|
347
360
|
return;
|
|
348
361
|
}
|
|
349
|
-
|
|
350
|
-
|
|
362
|
+
const r = crypto.randomUUID();
|
|
363
|
+
d.forEach((k) => {
|
|
364
|
+
k.loading = !0, k.idhashInfiniteLoading = r;
|
|
365
|
+
}), o.value.push(...d), setTimeout(() => {
|
|
366
|
+
o.value.forEach((k) => {
|
|
367
|
+
k.idhashInfiniteLoading === r && (k.loading = !1, delete k.idhashInfiniteLoading);
|
|
368
|
+
});
|
|
369
|
+
}, e.min_loading_delay), H(() => {
|
|
370
|
+
o.value && o.value.length > n.value.limit_per_page * 2 && o.value.splice(0, n.value.limit_per_page), J.value ? a.loaded() : a.complete(), P.value++;
|
|
351
371
|
});
|
|
352
372
|
}
|
|
353
|
-
async function
|
|
354
|
-
if (!
|
|
355
|
-
if (
|
|
356
|
-
|
|
373
|
+
async function oe(a) {
|
|
374
|
+
if (!h.value) return;
|
|
375
|
+
if (n.value.current_page <= e.page_starts_at) {
|
|
376
|
+
a.complete();
|
|
357
377
|
return;
|
|
358
378
|
}
|
|
359
|
-
const
|
|
360
|
-
if (!
|
|
361
|
-
const
|
|
362
|
-
if (!
|
|
363
|
-
|
|
379
|
+
const d = o.value[0];
|
|
380
|
+
if (!d) return;
|
|
381
|
+
const r = d[e.item_key];
|
|
382
|
+
if (!r) {
|
|
383
|
+
a.error();
|
|
364
384
|
return;
|
|
365
385
|
}
|
|
366
|
-
if (
|
|
367
|
-
|
|
386
|
+
if (n.value.current_page -= 1, await L(), u.value) {
|
|
387
|
+
a.error();
|
|
368
388
|
return;
|
|
369
389
|
}
|
|
370
|
-
if (!
|
|
371
|
-
|
|
390
|
+
if (!p.value || p.value.length === 0) {
|
|
391
|
+
a.loaded();
|
|
372
392
|
return;
|
|
373
393
|
}
|
|
374
|
-
const
|
|
375
|
-
(
|
|
376
|
-
);
|
|
377
|
-
if (
|
|
378
|
-
|
|
394
|
+
const k = p.value.filter(
|
|
395
|
+
(I) => !o.value.some((ue) => ue[e.item_key] === I[e.item_key])
|
|
396
|
+
), V = crypto.randomUUID();
|
|
397
|
+
if (k.forEach((I) => {
|
|
398
|
+
I.loading = !0, I.idhashInfiniteLoading = V;
|
|
399
|
+
}), k.length === 0 && p.value.length > 0) {
|
|
400
|
+
a.loaded();
|
|
379
401
|
return;
|
|
380
402
|
}
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
403
|
+
o.value.unshift(...k), o.value && o.value.length > n.value.limit_per_page * 2 && o.value.splice(-n.value.limit_per_page, n.value.limit_per_page), setTimeout(() => {
|
|
404
|
+
o.value.forEach((I) => {
|
|
405
|
+
I.idhashInfiniteLoading === V && (I.loading = !1, delete I.idhashInfiniteLoading);
|
|
406
|
+
});
|
|
407
|
+
}, e.min_loading_delay), H(() => {
|
|
408
|
+
const I = document.getElementById(e.element_id + r);
|
|
409
|
+
I ? I.scrollIntoView({ behavior: "auto", block: "start" }) : console.warn(`
|
|
384
410
|
Elemento não encontrado para scroll verifique se a propriedade 'element_id' está correta ou não foi definida.
|
|
385
|
-
`),
|
|
411
|
+
`), m.value++, a.loaded();
|
|
386
412
|
});
|
|
387
413
|
}
|
|
388
|
-
const
|
|
389
|
-
e.watch && Array.isArray(e.watch) && e.watch.forEach((
|
|
390
|
-
(
|
|
391
|
-
}),
|
|
414
|
+
const O = [];
|
|
415
|
+
e.watch && Array.isArray(e.watch) && e.watch.forEach((a) => {
|
|
416
|
+
(he(a) || typeof a == "function") && O.push(a);
|
|
417
|
+
}), z(() => n.value.current_page, () => {
|
|
392
418
|
l("tradePage");
|
|
393
|
-
}),
|
|
394
|
-
|
|
395
|
-
}, { deep: !0 }) : e.type_fetch === "infinite-scroll" &&
|
|
396
|
-
|
|
419
|
+
}), O.length > 0 && (e.type_fetch === "pagination" ? z(O, () => {
|
|
420
|
+
n.value.current_page = e.page_starts_at, w();
|
|
421
|
+
}, { deep: !0 }) : e.type_fetch === "infinite-scroll" && z(O, () => {
|
|
422
|
+
h.value = !1, R();
|
|
397
423
|
}, { deep: !0 }));
|
|
398
|
-
|
|
399
|
-
|
|
424
|
+
function se() {
|
|
425
|
+
l("tradePage"), w();
|
|
426
|
+
}
|
|
427
|
+
return z(
|
|
400
428
|
() => e.add_params,
|
|
401
429
|
() => {
|
|
402
|
-
|
|
403
|
-
y.value && e.type_fetch === "infinite-scroll" ? (
|
|
404
|
-
}));
|
|
430
|
+
y.value ? H(() => {
|
|
431
|
+
y.value && e.type_fetch === "infinite-scroll" ? (R(), y.value = !1) : y.value && e.type_fetch === "pagination" && (w(), y.value = !1);
|
|
432
|
+
}) : e.type_fetch === "pagination" ? (n.value.current_page = e.page_starts_at, w()) : e.type_fetch === "infinite-scroll" && (h.value = !1, R());
|
|
405
433
|
},
|
|
406
434
|
{ deep: !0, immediate: !0 }
|
|
407
|
-
), (
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
435
|
+
), (a, d) => (g(), f("div", null, [
|
|
436
|
+
i.type_fetch === "pagination" ? (g(), f(C, { key: 0 }, [
|
|
437
|
+
te.value ? (g(), f("div", {
|
|
438
|
+
key: 0,
|
|
439
|
+
class: U(e.class_loading_container)
|
|
440
|
+
}, [
|
|
441
|
+
(g(!0), f(C, null, $(n.value.limit_per_page, (r) => x(a.$slots, "loading", {
|
|
442
|
+
key: "placeholder-" + r,
|
|
443
|
+
n: r
|
|
444
|
+
}, void 0, !0)), 128))
|
|
445
|
+
], 2)) : B(u) ? x(a.$slots, "error", {
|
|
446
|
+
key: 1,
|
|
447
|
+
error: B(u)
|
|
448
|
+
}, () => [
|
|
449
|
+
d[0] || (d[0] = c("div", {
|
|
450
|
+
class: "alert alert-danger",
|
|
451
|
+
role: "alert"
|
|
452
|
+
}, " Ocorreu um erro ao carregar os dados. ", -1))
|
|
453
|
+
], !0) : n.value.count === 0 ? x(a.$slots, "empty", { key: 2 }, () => [
|
|
454
|
+
d[1] || (d[1] = c("div", {
|
|
455
|
+
class: "alert alert-info",
|
|
456
|
+
role: "alert"
|
|
457
|
+
}, " Nenhum registro encontrado. ", -1))
|
|
458
|
+
], !0) : (g(), f("div", {
|
|
459
|
+
key: 3,
|
|
460
|
+
class: U(e.class_container)
|
|
461
|
+
}, [
|
|
462
|
+
(g(!0), f(C, null, $(p.value, (r) => x(a.$slots, "body", {
|
|
463
|
+
key: r[e.item_key],
|
|
464
|
+
item: r
|
|
465
|
+
}, void 0, !0)), 128))
|
|
466
|
+
], 2))
|
|
467
|
+
], 64)) : i.type_fetch === "infinite-scroll" ? (g(), f("div", {
|
|
417
468
|
key: 1,
|
|
418
|
-
class:
|
|
469
|
+
class: U(e.class_container)
|
|
419
470
|
}, [
|
|
420
|
-
|
|
421
|
-
identifier:
|
|
471
|
+
j(B(Q), {
|
|
472
|
+
identifier: P.value,
|
|
422
473
|
direction: "top",
|
|
423
|
-
onInfinite:
|
|
474
|
+
onInfinite: oe
|
|
424
475
|
}, {
|
|
425
|
-
complete:
|
|
476
|
+
complete: W(() => [...d[2] || (d[2] = [
|
|
426
477
|
c("span", null, null, -1)
|
|
427
478
|
])]),
|
|
428
|
-
spinner:
|
|
479
|
+
spinner: W(() => [...d[3] || (d[3] = [
|
|
429
480
|
c("span", null, null, -1)
|
|
430
481
|
])]),
|
|
431
482
|
_: 1
|
|
432
483
|
}, 8, ["identifier"]),
|
|
433
|
-
(
|
|
434
|
-
key:
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
484
|
+
(g(!0), f(C, null, $(o.value, (r) => (g(), f(C, {
|
|
485
|
+
key: r[e.item_key]
|
|
486
|
+
}, [
|
|
487
|
+
r.loading ? x(a.$slots, "loading", { key: 1 }, void 0, !0) : x(a.$slots, "body", {
|
|
488
|
+
key: 0,
|
|
489
|
+
item: r
|
|
490
|
+
}, void 0, !0)
|
|
491
|
+
], 64))), 128)),
|
|
492
|
+
j(B(Q), {
|
|
493
|
+
identifier: m.value,
|
|
494
|
+
onInfinite: re
|
|
440
495
|
}, {
|
|
441
|
-
complete:
|
|
442
|
-
|
|
443
|
-
|
|
496
|
+
complete: W(() => [
|
|
497
|
+
x(a.$slots, "scroll-finish", {}, () => [
|
|
498
|
+
d[4] || (d[4] = c("span", { class: "scroll-finish-style" }, " Fim dos registros", -1))
|
|
444
499
|
], !0)
|
|
445
500
|
]),
|
|
446
501
|
_: 3
|
|
447
502
|
}, 8, ["identifier"])
|
|
448
|
-
], 2)) :
|
|
449
|
-
|
|
503
|
+
], 2)) : T("", !0),
|
|
504
|
+
i.type_fetch === "pagination" ? x(a.$slots, "pagination", {
|
|
450
505
|
key: 2,
|
|
451
|
-
pagination:
|
|
452
|
-
tradePage:
|
|
453
|
-
error:
|
|
506
|
+
pagination: n.value,
|
|
507
|
+
tradePage: w,
|
|
508
|
+
error: B(u)
|
|
454
509
|
}, () => [
|
|
455
|
-
!
|
|
510
|
+
!B(u) && n.value.count > 0 ? (g(), f("div", {
|
|
456
511
|
key: 0,
|
|
457
|
-
class:
|
|
512
|
+
class: U(["px-3", e.class_pagination])
|
|
458
513
|
}, [
|
|
459
|
-
|
|
514
|
+
j($e, {
|
|
460
515
|
filtering: !0,
|
|
461
|
-
pagination:
|
|
462
|
-
onTradePage:
|
|
516
|
+
pagination: n.value,
|
|
517
|
+
onTradePage: se
|
|
463
518
|
}, null, 8, ["pagination"])
|
|
464
|
-
], 2)) :
|
|
465
|
-
], !0) :
|
|
519
|
+
], 2)) : T("", !0)
|
|
520
|
+
], !0) : T("", !0)
|
|
466
521
|
]));
|
|
467
522
|
}
|
|
468
|
-
}),
|
|
523
|
+
}), Je = /* @__PURE__ */ Z(qe, [["__scopeId", "data-v-9350c793"]]);
|
|
469
524
|
export {
|
|
470
|
-
|
|
525
|
+
Je as VDataPage
|
|
471
526
|
};
|
package/package.json
CHANGED
|
@@ -1,12 +1,38 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
|
-
<
|
|
4
|
-
<template v-for="item in items" :key="item[props.item_key]">
|
|
5
|
-
<slot name="body" :item="item">
|
|
3
|
+
<template v-if="type_fetch === 'pagination'" class="">
|
|
6
4
|
|
|
5
|
+
<template v-if="showLoadingState">
|
|
6
|
+
<div :class="props.class_loading_container">
|
|
7
|
+
<template v-for="n in pagination.limit_per_page" :key="'placeholder-' + n">
|
|
8
|
+
<slot name="loading" :n="n">
|
|
9
|
+
|
|
10
|
+
</slot>
|
|
11
|
+
</template>
|
|
12
|
+
</div>
|
|
13
|
+
</template>
|
|
14
|
+
<template v-else-if="error">
|
|
15
|
+
<slot name="error" :error="error">
|
|
16
|
+
<div class="alert alert-danger" role="alert">
|
|
17
|
+
Ocorreu um erro ao carregar os dados.
|
|
18
|
+
</div>
|
|
7
19
|
</slot>
|
|
8
20
|
</template>
|
|
9
|
-
|
|
21
|
+
<template v-else-if="pagination.count === 0">
|
|
22
|
+
<slot name="empty">
|
|
23
|
+
<div class="alert alert-info" role="alert">
|
|
24
|
+
Nenhum registro encontrado.
|
|
25
|
+
</div>
|
|
26
|
+
</slot>
|
|
27
|
+
</template>
|
|
28
|
+
<div v-else :class="props.class_container">
|
|
29
|
+
<template v-for="item in items" :key="item[props.item_key]">
|
|
30
|
+
<slot name="body" :item="item">
|
|
31
|
+
|
|
32
|
+
</slot>
|
|
33
|
+
</template>
|
|
34
|
+
</div>
|
|
35
|
+
</template>
|
|
10
36
|
<div v-else-if="type_fetch === 'infinite-scroll'" :class="props.class_container">
|
|
11
37
|
|
|
12
38
|
<InfiniteLoading :identifier="topLoaderId" direction="top" @infinite="carregarPaginaTop">
|
|
@@ -14,7 +40,10 @@
|
|
|
14
40
|
<template #spinner><span></span></template>
|
|
15
41
|
</InfiniteLoading>
|
|
16
42
|
<template v-for="item in items_infinite" :key="item[props.item_key]">
|
|
17
|
-
<slot name="body" :item="item">
|
|
43
|
+
<slot v-if="!item.loading" name="body" :item="item">
|
|
44
|
+
</slot>
|
|
45
|
+
<slot v-else name="loading">
|
|
46
|
+
|
|
18
47
|
</slot>
|
|
19
48
|
</template>
|
|
20
49
|
<InfiniteLoading :identifier="bottomLoaderId" @infinite="carregarPaginaBottom">
|
|
@@ -29,7 +58,7 @@
|
|
|
29
58
|
<slot v-if="type_fetch === 'pagination'" name="pagination" :pagination="pagination"
|
|
30
59
|
:tradePage="fetchDataWithDelay" :error="error">
|
|
31
60
|
<div v-if="!error && pagination.count > 0" class="px-3" :class="props.class_pagination">
|
|
32
|
-
<PaginationDatatable :filtering="true" :pagination="pagination" @tradePage="
|
|
61
|
+
<PaginationDatatable :filtering="true" :pagination="pagination" @tradePage="tradePageEmit" />
|
|
33
62
|
</div>
|
|
34
63
|
</slot>
|
|
35
64
|
</div>
|
|
@@ -75,6 +104,7 @@ interface VDataPageProps {
|
|
|
75
104
|
|
|
76
105
|
/* props para estilizar o vdatatable */
|
|
77
106
|
class_container?: string;
|
|
107
|
+
class_loading_container?: string;
|
|
78
108
|
class_pagination?: string;
|
|
79
109
|
class_filters?: string;
|
|
80
110
|
|
|
@@ -150,6 +180,7 @@ const props = withDefaults(defineProps<VDataPageProps>(), {
|
|
|
150
180
|
type_fetch: 'pagination',
|
|
151
181
|
page_starts_at: 0,
|
|
152
182
|
element_id: '',
|
|
183
|
+
class_loading_container: '',
|
|
153
184
|
watch: () => []
|
|
154
185
|
});
|
|
155
186
|
|
|
@@ -190,7 +221,7 @@ const pagination = ref<PaginationObject>({
|
|
|
190
221
|
// =======================================================
|
|
191
222
|
// 3. LÓGICA DA API (useFetch)
|
|
192
223
|
// =======================================================
|
|
193
|
-
const { data: response, pending:
|
|
224
|
+
const { data: response, pending: pending, error, execute, attempt: _attempt } = props.fetch(props.endpoint, {
|
|
194
225
|
params: () => {
|
|
195
226
|
|
|
196
227
|
if (props.deactivate_default_params) {
|
|
@@ -230,9 +261,9 @@ const default_params = computed<Record<string, any>>(() => ({
|
|
|
230
261
|
}));
|
|
231
262
|
|
|
232
263
|
// para controlar a exibição do loading
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
264
|
+
const showLoadingState = computed<boolean>(() => {
|
|
265
|
+
return (pending.value || isDelaying.value)
|
|
266
|
+
});
|
|
236
267
|
|
|
237
268
|
|
|
238
269
|
|
|
@@ -277,7 +308,12 @@ async function fetchDataWithDelay(): Promise<void> {
|
|
|
277
308
|
}
|
|
278
309
|
|
|
279
310
|
}
|
|
311
|
+
// Função para inicializar dados no infinite scroll e evitar condições de corrida
|
|
312
|
+
let init_id = 0;
|
|
280
313
|
async function initDataInfinite() {
|
|
314
|
+
init_id++;
|
|
315
|
+
const current_init_id = init_id;
|
|
316
|
+
|
|
281
317
|
items.value = [];
|
|
282
318
|
items_infinite.value = [];
|
|
283
319
|
|
|
@@ -286,15 +322,35 @@ async function initDataInfinite() {
|
|
|
286
322
|
await fetchDataWithDelay();
|
|
287
323
|
emit("afterFetch")
|
|
288
324
|
|
|
325
|
+
if (current_init_id !== init_id) {
|
|
326
|
+
return;
|
|
327
|
+
}
|
|
289
328
|
|
|
290
329
|
nextTick(() => {
|
|
330
|
+
if (current_init_id !== init_id) {
|
|
331
|
+
return;
|
|
332
|
+
}
|
|
333
|
+
let idhashInfiniteLoading = crypto.randomUUID();
|
|
334
|
+
items.value.forEach((item: any) => {
|
|
335
|
+
item.loading = true;
|
|
336
|
+
item.idhashInfiniteLoading = idhashInfiniteLoading;
|
|
337
|
+
});
|
|
291
338
|
items_infinite.value.push(...items.value);
|
|
339
|
+
setTimeout(() => {
|
|
340
|
+
items_infinite.value.forEach((item: any) => {
|
|
341
|
+
if (item.idhashInfiniteLoading === idhashInfiniteLoading) {
|
|
342
|
+
item.loading = false;
|
|
343
|
+
delete item.idhashInfiniteLoading;
|
|
344
|
+
}
|
|
345
|
+
});
|
|
346
|
+
}, props.min_loading_delay)
|
|
292
347
|
dadosInicializados.value = true;
|
|
293
348
|
bottomLoaderId.value++;
|
|
294
349
|
topLoaderId.value++;
|
|
295
350
|
});
|
|
296
351
|
}
|
|
297
352
|
|
|
353
|
+
|
|
298
354
|
// =======================================================
|
|
299
355
|
// 7. EXPOSE E CICLO DE VIDA
|
|
300
356
|
// =======================================================
|
|
@@ -372,8 +428,20 @@ async function carregarPaginaBottom($state: any) {
|
|
|
372
428
|
$state.loaded();
|
|
373
429
|
return;
|
|
374
430
|
}
|
|
375
|
-
|
|
431
|
+
const idhashInfiniteLoading = crypto.randomUUID();
|
|
432
|
+
novosItens.forEach((item: any) => {
|
|
433
|
+
item.loading = true;
|
|
434
|
+
item.idhashInfiniteLoading = idhashInfiniteLoading;
|
|
435
|
+
});
|
|
376
436
|
items_infinite.value.push(...novosItens);
|
|
437
|
+
setTimeout(() => {
|
|
438
|
+
items_infinite.value.forEach((item: any) => {
|
|
439
|
+
if (item.idhashInfiniteLoading === idhashInfiniteLoading) {
|
|
440
|
+
item.loading = false;
|
|
441
|
+
delete item.idhashInfiniteLoading;
|
|
442
|
+
}
|
|
443
|
+
});
|
|
444
|
+
}, props.min_loading_delay)
|
|
377
445
|
|
|
378
446
|
nextTick(() => {
|
|
379
447
|
if (items_infinite.value && items_infinite.value.length > pagination.value.limit_per_page * 2) {
|
|
@@ -403,7 +471,6 @@ async function carregarPaginaTop($state: any) {
|
|
|
403
471
|
$state.error();
|
|
404
472
|
return
|
|
405
473
|
};
|
|
406
|
-
|
|
407
474
|
pagination.value.current_page -= 1;
|
|
408
475
|
await execute();
|
|
409
476
|
|
|
@@ -416,11 +483,17 @@ async function carregarPaginaTop($state: any) {
|
|
|
416
483
|
$state.loaded();
|
|
417
484
|
return;
|
|
418
485
|
}
|
|
419
|
-
|
|
486
|
+
|
|
420
487
|
// --- FILTRAR DUPLICATAS ---
|
|
421
488
|
const novosItens = items.value.filter(
|
|
422
489
|
(novoItem: any) => !items_infinite.value.some(itemExistente => itemExistente[props.item_key] === novoItem[props.item_key])
|
|
423
490
|
);
|
|
491
|
+
const idhashInfiniteLoading = crypto.randomUUID();
|
|
492
|
+
novosItens.forEach((item: any) => {
|
|
493
|
+
item.loading = true;
|
|
494
|
+
item.idhashInfiniteLoading = idhashInfiniteLoading;
|
|
495
|
+
});
|
|
496
|
+
|
|
424
497
|
if (novosItens.length === 0 && items.value.length > 0) {
|
|
425
498
|
$state.loaded();
|
|
426
499
|
return; // Evita adicionar duplicatas
|
|
@@ -431,6 +504,14 @@ async function carregarPaginaTop($state: any) {
|
|
|
431
504
|
if (items_infinite.value && items_infinite.value.length > pagination.value.limit_per_page * 2) {
|
|
432
505
|
items_infinite.value.splice(-pagination.value.limit_per_page, pagination.value.limit_per_page);
|
|
433
506
|
}
|
|
507
|
+
setTimeout(() => {
|
|
508
|
+
items_infinite.value.forEach((item: any) => {
|
|
509
|
+
if (item.idhashInfiniteLoading === idhashInfiniteLoading) {
|
|
510
|
+
item.loading = false;
|
|
511
|
+
delete item.idhashInfiniteLoading;
|
|
512
|
+
}
|
|
513
|
+
});
|
|
514
|
+
}, props.min_loading_delay)
|
|
434
515
|
nextTick(() => {
|
|
435
516
|
|
|
436
517
|
const elementoAlvo = document.getElementById(props.element_id + id_primeiro_artigo);
|
|
@@ -473,12 +554,19 @@ if (watchSources.length > 0) {
|
|
|
473
554
|
}
|
|
474
555
|
|
|
475
556
|
}
|
|
476
|
-
|
|
557
|
+
function tradePageEmit() {
|
|
558
|
+
emit("tradePage");
|
|
559
|
+
fetchDataWithDelay();
|
|
560
|
+
}
|
|
561
|
+
// watch(() => showLoadingState.value, (newVal) => {
|
|
562
|
+
|
|
563
|
+
// });
|
|
564
|
+
|
|
477
565
|
watch(
|
|
478
566
|
() => props.add_params,
|
|
479
567
|
() => {
|
|
480
|
-
if (
|
|
481
|
-
|
|
568
|
+
if (first_fetch.value) {
|
|
569
|
+
|
|
482
570
|
nextTick(() => {
|
|
483
571
|
/*
|
|
484
572
|
* executar dentro do nextTick para garantir que o pai já tem acesso ao
|