eco-vue-js 0.26.16 → 0.26.18
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/components/InfiniteList/components/InfiniteListPages.vue.d.ts.map +1 -1
- package/dist/components/InfiniteList/components/InfiniteListPages.vue_vue_type_script_setup_true_lang.js +16 -5
- package/dist/components/List/components/HeaderSort.vue_vue_type_script_setup_true_lang.js +1 -1
- package/docs/components/infinite-list.md +1 -1
- package/docs/llms.txt +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfiniteListPages.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/InfiniteList/components/InfiniteListPages.vue"],"names":[],"mappings":"AAkGA;
|
|
1
|
+
{"version":3,"file":"InfiniteListPages.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/InfiniteList/components/InfiniteListPages.vue"],"names":[],"mappings":"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"}
|
|
@@ -7,6 +7,8 @@ import { Fragment, computed, createBlock, createCommentVNode, createElementBlock
|
|
|
7
7
|
//#region src/components/InfiniteList/components/InfiniteListPages.vue?vue&type=script&setup=true&lang.ts
|
|
8
8
|
var _hoisted_1 = { ref: "topSentinel" };
|
|
9
9
|
var _hoisted_2 = { ref: "bottomSentinel" };
|
|
10
|
+
var MAX_SPACER_HEIGHT = 15e6;
|
|
11
|
+
/** Scales down the space of the pages not rendered when those of a long list would not fit under the cap. */
|
|
10
12
|
var SENTINEL_MARGIN = 200;
|
|
11
13
|
var InfiniteListPages_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
|
|
12
14
|
__name: "InfiniteListPages",
|
|
@@ -142,17 +144,26 @@ var InfiniteListPages_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
|
|
|
142
144
|
return itemCount === 0 ? 0 : sum / itemCount;
|
|
143
145
|
});
|
|
144
146
|
const avgPageHeight = computed(() => Math.round(avgItemHeight.value * pageSize.value));
|
|
147
|
+
/**
|
|
148
|
+
* Browsers cap the height of an element, at about 17.9M px in Firefox and 33.5M px in Chrome and Safari, and lay out
|
|
149
|
+
* whatever is past it at the cap. There the sentinels never leave the view, and pages are added one after another.
|
|
150
|
+
*/
|
|
151
|
+
const spacerScale = computed(() => {
|
|
152
|
+
const height = avgPageHeight.value * pagesCount.value;
|
|
153
|
+
return height > MAX_SPACER_HEIGHT ? MAX_SPACER_HEIGHT / height : 1;
|
|
154
|
+
});
|
|
155
|
+
const spacerPageHeight = computed(() => avgPageHeight.value * spacerScale.value);
|
|
145
156
|
const topSpacerHeight = computed(() => {
|
|
146
|
-
if (!
|
|
157
|
+
if (!spacerPageHeight.value) return 0;
|
|
147
158
|
const firstRendered = pages.value[0] ?? 1;
|
|
148
|
-
return Math.max(0, (firstRendered - 1) *
|
|
159
|
+
return Math.max(0, Math.round((firstRendered - 1) * spacerPageHeight.value));
|
|
149
160
|
});
|
|
150
161
|
const bottomSpacerHeight = computed(() => {
|
|
151
162
|
if (!avgItemHeight.value) return 0;
|
|
152
163
|
const lastRendered = pages.value[pages.value.length - 1] ?? 1;
|
|
153
164
|
let itemCount = 0;
|
|
154
165
|
for (let page = lastRendered + 1; page <= pagesCount.value; page++) itemCount += getPageItemCount(page);
|
|
155
|
-
return Math.round(itemCount * avgItemHeight.value);
|
|
166
|
+
return Math.round(itemCount * avgItemHeight.value * spacerScale.value);
|
|
156
167
|
});
|
|
157
168
|
const columnCount = ref(1);
|
|
158
169
|
const getColumnCount = (element) => {
|
|
@@ -392,7 +403,7 @@ var InfiniteListPages_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
|
|
|
392
403
|
resetPage(page);
|
|
393
404
|
return;
|
|
394
405
|
}
|
|
395
|
-
scrollToOffset((page - 1) *
|
|
406
|
+
scrollToOffset((page - 1) * spacerPageHeight.value);
|
|
396
407
|
await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
|
|
397
408
|
jumpToPage(page);
|
|
398
409
|
await nextTick();
|
|
@@ -499,7 +510,7 @@ var InfiniteListPages_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
|
|
|
499
510
|
const position = getScrollPosition();
|
|
500
511
|
if (!position) return;
|
|
501
512
|
const y = Math.max(0, position.scrollTop - position.containerTop);
|
|
502
|
-
const target = Math.max(1, Math.min(Math.ceil(y /
|
|
513
|
+
const target = Math.max(1, Math.min(Math.ceil(y / spacerPageHeight.value) + 1, pagesCount.value));
|
|
503
514
|
if (pages.value.includes(target)) return;
|
|
504
515
|
jumpToPage(target);
|
|
505
516
|
}, 300);
|
|
@@ -28,7 +28,7 @@ var HeaderSort_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
|
|
|
28
28
|
const isOpen = ref(false);
|
|
29
29
|
const canClear = computed(() => !props.disabled && props.ordering.length !== 0);
|
|
30
30
|
const isFieldRequired = (field) => {
|
|
31
|
-
return "field" in field.meta && field.meta.field
|
|
31
|
+
return "field" in field.meta && (typeof field.meta.field === "string" || typeof field.meta.field?.(props.queryParams) === "string");
|
|
32
32
|
};
|
|
33
33
|
const fieldsFlat = computed(() => {
|
|
34
34
|
const result = [];
|
|
@@ -105,7 +105,7 @@ A template ref gives `refetchAll`, `resetPage(page)` to start over from a page,
|
|
|
105
105
|
|
|
106
106
|
## Long lists
|
|
107
107
|
|
|
108
|
-
However long the query, the list keeps only `maxPages` pages in the DOM. Pages scrolled past are dropped and leave a space of their height, and their queries stay cached, so scrolling back renders them again at once. Spacers above and below the rendered pages stand in for the rest, sized by the number of pages times the average height of those rendered, so the scrollbar covers the whole list from the first page on.
|
|
108
|
+
However long the query, the list keeps only `maxPages` pages in the DOM. Pages scrolled past are dropped and leave a space of their height, and their queries stay cached, so scrolling back renders them again at once. Spacers above and below the rendered pages stand in for the rest, sized by the number of pages times the average height of those rendered, so the scrollbar covers the whole list from the first page on. Browsers cap the height of an element, so for a list too long to fit under 15M px — about a million rows — the spacers shrink to fit, and the scrollbar moves through the list faster than the rows scroll.
|
|
109
109
|
|
|
110
110
|
The demo below pages through 10,000 events, 50 at a time. The counter shows how many rows are in the DOM while scrolling. "Go to row" calls `goto` with the row's page and its index in the page, and the pages around it load in place.
|
|
111
111
|
|
package/docs/llms.txt
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# eco-vue-js
|
|
2
2
|
|
|
3
|
-
> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.26.
|
|
3
|
+
> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.26.18, the one installed next to them. Start with Getting started and Conventions; each component page lists its props, events and slots with examples.
|
|
4
4
|
|
|
5
5
|
Release notes, for what changed between versions: https://github.com/rsmple/eco-vue-js/releases. The docs site, with live demos: https://rsmple.github.io/eco-vue-js/
|
|
6
6
|
|