@yasanchezz/vue-infinite-grid 0.1.2 → 0.1.4

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.
Files changed (4) hide show
  1. package/dist/VueGrid.d.ts +2 -2
  2. package/dist/vue-infinite-grid.css +1 -1
  3. package/dist/vue-infinite-grid.js +46 -43
  4. package/package.json +1 -1
package/dist/VueGrid.d.ts CHANGED
@@ -2,7 +2,7 @@ declare const __VLS_export: <GridRow extends {
2
2
  id: string;
3
3
  }>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
4
4
  props: import('vue').PublicProps & __VLS_PrettifyLocal<{
5
- autoCalculatedRowsCount: boolean;
5
+ autoCalculatedRowsCount?: boolean;
6
6
  container?: (Element | null | undefined) | ((container: Element | null) => Element | null | undefined);
7
7
  rows: GridRow[];
8
8
  rowsCount: number;
@@ -12,7 +12,7 @@ declare const __VLS_export: <GridRow extends {
12
12
  } ? P : {});
13
13
  expose: (exposed: import('vue').ShallowUnwrapRef<{
14
14
  init(): void;
15
- scrollTo(id: number | string): void;
15
+ scrollTo(id: string): void;
16
16
  }>) => void;
17
17
  attrs: any;
18
18
  slots: {
package/dist/vue-infinite-grid.css CHANGED
@@ -1,2 +1,2 @@
1
- .infinite-grid[data-v-4ed5884b]{overflow-anchor:none;align-content:start;display:grid;overflow:clip}.grid-row[data-v-4ed5884b]{grid-column:1/-1;grid-template-columns:subgrid;display:grid}.content[data-v-4ed5884b]{display:contents}.before[data-v-4ed5884b],.after[data-v-4ed5884b]{pointer-events:none;grid-column:1/-1}
1
+ .infinite-grid[data-v-acddf224]{overflow-anchor:none;align-content:start;display:grid;overflow:clip}.grid-row[data-v-acddf224]{grid-column:1/-1;grid-template-columns:subgrid;display:grid}.content[data-v-acddf224]{display:contents}.before[data-v-acddf224],.after[data-v-acddf224]{pointer-events:none;grid-column:1/-1}
2
2
  /*$vite$:1*/
package/dist/vue-infinite-grid.js CHANGED
@@ -7,7 +7,10 @@ var g = ["data-index"], _ = /*#__PURE__*/ ((e, t) => {
7
7
  })(/* @__PURE__ */ i({
8
8
  __name: "VueGrid",
9
9
  props: {
10
- autoCalculatedRowsCount: { type: Boolean },
10
+ autoCalculatedRowsCount: {
11
+ type: Boolean,
12
+ default: !1
13
+ },
11
14
  container: {
12
15
  type: [null, Function],
13
16
  default: document.documentElement
@@ -17,58 +20,58 @@ var g = ["data-index"], _ = /*#__PURE__*/ ((e, t) => {
17
20
  height: {}
18
21
  },
19
22
  setup(i, { expose: _ }) {
20
- let v = f([]), y = p("grid"), b = p("content"), x = t(() => i.container instanceof Function ? i.container(y.value) ?? document.documentElement : i.container ?? document.documentElement), S = t(() => x.value === document.documentElement || x.value === document.body ? window : x.value), C = /* @__PURE__ */ new Map(), w = i.height * Math.trunc(i.rowsCount / 5) || 1e3, T, E = i.rowsCount;
21
- function D() {
23
+ let v = f([]), y = p("grid"), b = p("content"), x = t(() => i.container instanceof Function ? i.container(y.value) ?? document.documentElement : i.container ?? document.documentElement), S = t(() => x.value === document.documentElement || x.value === document.body ? window : x.value), C = /* @__PURE__ */ new Map(), w = i.height * Math.trunc(i.rowsCount / 5) || 1e3, T, E, D = i.rowsCount;
24
+ function O() {
22
25
  if (i.autoCalculatedRowsCount) {
23
- let e = window.innerHeight;
24
- E = N < e ? Math.trunc(e / N * E) : E;
26
+ let e = window.innerHeight + i.height, t = P - w, n = t < e ? Math.ceil(e / t * D) : D;
27
+ D = n < i.rowsCount ? i.rowsCount : n;
25
28
  }
26
29
  }
27
- let O = 0;
28
- function k() {
30
+ let k = 0;
31
+ function A() {
29
32
  let e = 0, t = y.value;
30
33
  for (; t instanceof HTMLElement && t != x.value;) e += t.offsetTop, t = t.offsetParent;
31
- O = e;
34
+ k = e;
32
35
  }
33
- let A = l({ height: "0px" }), j = 0;
34
- function M() {
35
- return j = i.rows.map((e) => C.get(e.id) ?? i.height).reduce((e, t) => e + t, 0), A.value.height = `${j}px`, j;
36
+ let j = l({ height: "0px" }), M = 0;
37
+ function N() {
38
+ return M = i.rows.map((e) => C.get(e.id) ?? i.height).reduce((e, t) => e + t, 0), j.value.height = `${M}px`, M;
36
39
  }
37
- let N = 0;
38
- function P() {
39
- N = v.value.map((e) => C.get(e.id) ?? i.height).reduce((e, t) => e + t, 0);
40
+ let P = 0;
41
+ function F() {
42
+ P = v.value.map((e) => C.get(e.id) ?? i.height).reduce((e, t) => e + t, 0);
40
43
  }
41
- let F = l({ height: "0px" }), I = 0;
42
- function L() {
43
- let e = x.value.scrollTop - w - O, t = 0;
44
+ let I = l({ height: "0px" }), L = 0;
45
+ function R() {
46
+ let e = x.value.scrollTop - w - k, t = 0;
44
47
  for (let n of i.rows) {
45
48
  let r = C.get(n.id) ?? i.height;
46
49
  if (t + r > e) break;
47
50
  t += r;
48
51
  }
49
- let n = j - N, r = t > n ? n : t;
50
- return I = r, F.value.height = `${r}px`, r;
51
- }
52
- let R = l({ height: "0px" }), z = 0;
53
- function B() {
54
- z = j - I - N, R.value.height = `${z}px`;
52
+ let n = M - P, r = t > n ? n : t;
53
+ return L = r, I.value.height = `${r}px`, r;
55
54
  }
55
+ let z = l({ height: "0px" }), B = 0;
56
56
  function V() {
57
+ B = M - L - P, z.value.height = `${B}px`;
58
+ }
59
+ function H() {
57
60
  cancelAnimationFrame(T), T = requestAnimationFrame(() => {
58
- k(), P(), M(), L(), B();
61
+ A(), F(), N(), R(), V();
59
62
  let e = 0, t = 0;
60
63
  for (let [n, r] of i.rows.entries()) {
61
64
  let a = C.get(r.id) ?? i.height;
62
- if (e += a, !(e <= I)) {
65
+ if (e += a, !(e <= L)) {
63
66
  t = n;
64
67
  break;
65
68
  }
66
69
  }
67
- let n = t + E > i.rows.length ? i.rows.slice(i.rows.length - E) : i.rows.slice(t, t + E);
68
- z || (n = i.rows.slice(i.rows.length - E)), (n.at(0) !== v.value.at(0) || n.length !== v.value.length) && (v.value = n), P(), M(), B();
70
+ let n = t + D > i.rows.length ? i.rows.slice(i.rows.length - D) : i.rows.slice(t, t + D);
71
+ B || (n = i.rows.slice(i.rows.length - D)), (n.at(0) !== v.value.at(0) || n.length !== v.value.length) && (v.value = n), F(), N(), V();
69
72
  });
70
73
  }
71
- let H = new ResizeObserver((e) => {
74
+ let U = new ResizeObserver((e) => {
72
75
  for (let t of e) {
73
76
  let e = t.target, n = t.borderBoxSize.at(0)?.blockSize ?? i.height;
74
77
  if (e instanceof HTMLElement) {
@@ -76,23 +79,23 @@ var g = ["data-index"], _ = /*#__PURE__*/ ((e, t) => {
76
79
  t != null && C.set(t, n);
77
80
  }
78
81
  }
79
- cancelAnimationFrame(T), T = requestAnimationFrame(() => {
80
- D(), V();
82
+ cancelAnimationFrame(E), E = requestAnimationFrame(() => {
83
+ F(), O(), H();
81
84
  });
82
- }), U = new MutationObserver((e) => {
83
- for (let t of e) t.addedNodes.values().filter((e) => e instanceof HTMLElement).forEach((e) => H.observe(e)), t.removedNodes.values().filter((e) => e instanceof HTMLElement).forEach((e) => H.unobserve(e));
85
+ }), W = new MutationObserver((e) => {
86
+ for (let t of e) t.addedNodes.values().filter((e) => e instanceof HTMLElement).forEach((e) => U.observe(e)), t.removedNodes.values().filter((e) => e instanceof HTMLElement).forEach((e) => U.unobserve(e));
84
87
  });
85
88
  return h(() => {
86
- U.disconnect(), b.value && U.observe(b.value, { childList: !0 });
87
- }), m(() => i.rows, V, { flush: "post" }), m(S, (e, t) => {
88
- t?.removeEventListener("scroll", V), e.addEventListener("scroll", V, { passive: !0 });
89
+ W.disconnect(), b.value && W.observe(b.value, { childList: !0 });
90
+ }), m(() => i.rows, H, { flush: "post" }), m(S, (e, t) => {
91
+ t?.removeEventListener("scroll", H), e.addEventListener("scroll", H, { passive: !0 });
89
92
  }, { immediate: !0 }), o(() => {
90
- V();
93
+ H();
91
94
  }), s(() => {
92
- S.value.removeEventListener("scroll", V);
95
+ S.value.removeEventListener("scroll", H);
93
96
  }), _({
94
97
  init() {
95
- k(), P(), M(), L(), B();
98
+ F(), O(), H();
96
99
  },
97
100
  scrollTo(e) {
98
101
  let t = 0;
@@ -100,17 +103,17 @@ var g = ["data-index"], _ = /*#__PURE__*/ ((e, t) => {
100
103
  if (n.id === e) break;
101
104
  t += C.get(n.id) ?? i.height;
102
105
  }
103
- x.value.scrollTo(0, t + O);
106
+ x.value.scrollTo(0, t + k);
104
107
  }
105
108
  }), (t, i) => (c(), n("div", {
106
109
  ref_key: "grid",
107
110
  ref: y,
108
111
  class: "infinite-grid",
109
- style: a(A.value)
112
+ style: a(j.value)
110
113
  }, [
111
114
  r("div", {
112
115
  class: "before",
113
- style: a(F.value)
116
+ style: a(I.value)
114
117
  }, null, 4),
115
118
  r("div", {
116
119
  ref_key: "content",
@@ -123,11 +126,11 @@ var g = ["data-index"], _ = /*#__PURE__*/ ((e, t) => {
123
126
  }, [d(t.$slots, "row", { row: e }, void 0, !0)], 8, g))), 128))], 512),
124
127
  r("div", {
125
128
  class: "after",
126
- style: a(R.value)
129
+ style: a(z.value)
127
130
  }, null, 4)
128
131
  ], 4));
129
132
  }
130
- }), [["__scopeId", "data-v-4ed5884b"]]), v = { install(e) {
133
+ }), [["__scopeId", "data-v-acddf224"]]), v = { install(e) {
131
134
  e.component("VueGrid", _);
132
135
  } };
133
136
  //#endregion
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yasanchezz/vue-infinite-grid",
3
- "version": "0.1.2",
3
+ "version": "0.1.4",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"