@pdanpdan/virtual-scroll 0.3.0 → 0.5.0
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/README.md +268 -275
- package/dist/index.cjs +2 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1497 -192
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2219 -896
- package/dist/index.mjs.map +1 -1
- package/dist/virtual-scroll.css +1 -2
- package/package.json +5 -1
- package/src/components/VirtualScroll.test.ts +1979 -627
- package/src/components/VirtualScroll.vue +951 -349
- package/src/components/VirtualScrollbar.test.ts +174 -0
- package/src/components/VirtualScrollbar.vue +102 -0
- package/src/composables/useVirtualScroll.test.ts +1160 -1521
- package/src/composables/useVirtualScroll.ts +1135 -791
- package/src/composables/useVirtualScrollbar.test.ts +526 -0
- package/src/composables/useVirtualScrollbar.ts +239 -0
- package/src/index.ts +4 -0
- package/src/types.ts +816 -0
- package/src/utils/fenwick-tree.test.ts +39 -39
- package/src/utils/fenwick-tree.ts +38 -18
- package/src/utils/scroll.test.ts +174 -0
- package/src/utils/scroll.ts +50 -13
- package/src/utils/virtual-scroll-logic.test.ts +2850 -0
- package/src/utils/virtual-scroll-logic.ts +901 -0
package/dist/virtual-scroll.css
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
.virtual-scroll-container[data-v-
|
|
2
|
-
/*$vite$:1*/
|
|
1
|
+
@layer components{.virtual-scrollbar-track{--vsi-scrollbar-bg: var(--vs-scrollbar-bg, rgba(230, 230, 230, .9));--vsi-scrollbar-thumb-bg: var(--vs-scrollbar-thumb-bg, rgba(0, 0, 0, .3));--vsi-scrollbar-thumb-hover-bg: var(--vs-scrollbar-thumb-hover-bg, rgba(0, 0, 0, .6));--vsi-scrollbar-bg: var(--vs-scrollbar-bg, light-dark(rgba(230, 230, 230, .9), rgba(30, 30, 30, .9)));--vsi-scrollbar-thumb-bg: var(--vs-scrollbar-thumb-bg, light-dark(rgba(0, 0, 0, .3), rgba(255, 255, 255, .3)));--vsi-scrollbar-thumb-hover-bg: var(--vs-scrollbar-thumb-hover-bg, light-dark(rgba(0, 0, 0, .6), rgba(255, 255, 255, .6)));--vsi-scrollbar-radius: var(--vs-scrollbar-radius, 4px);--vsi-scrollbar-size: var(--vs-scrollbar-size, 8px);position:absolute;contain:layout;background-color:var(--vsi-scrollbar-bg);border-radius:var(--vsi-scrollbar-radius);z-index:30;transition:opacity .2s;user-select:none;-webkit-user-select:none;pointer-events:auto}.virtual-scrollbar-track.virtual-scrollbar-track--vertical{inline-size:var(--vsi-scrollbar-size);inset-block-start:2px;inset-inline-end:2px}.virtual-scrollbar-track.virtual-scrollbar-track--horizontal{block-size:var(--vsi-scrollbar-size);inset-inline-start:2px;inset-block-end:2px}.virtual-scrollbar-thumb{position:absolute;background-color:var(--vsi-scrollbar-thumb-bg);border-radius:var(--vsi-scrollbar-radius);touch-action:none;pointer-events:auto;cursor:pointer}.virtual-scrollbar-thumb:hover,.virtual-scrollbar-thumb:active,.virtual-scrollbar-thumb.virtual-scrollbar-thumb--active{background-color:var(--vsi-scrollbar-thumb-hover-bg)}.virtual-scrollbar-thumb.virtual-scrollbar-thumb--vertical{inline-size:100%}.virtual-scrollbar-thumb.virtual-scrollbar-thumb--horizontal{block-size:100%}}@layer components{.virtual-scroll-container[data-v-91b6ab6c]{position:relative;block-size:100%;inline-size:100%;outline-offset:1px}.virtual-scroll-container[data-v-91b6ab6c]:not(.virtual-scroll--window){overflow:auto;overscroll-behavior:contain}.virtual-scroll-container.virtual-scroll--table[data-v-91b6ab6c]{display:block}.virtual-scroll-container.virtual-scroll--hide-scrollbar[data-v-91b6ab6c]{scrollbar-width:none;-ms-overflow-style:none}.virtual-scroll-container.virtual-scroll--hide-scrollbar[data-v-91b6ab6c]::-webkit-scrollbar{display:none}.virtual-scroll-container.virtual-scroll--horizontal[data-v-91b6ab6c],.virtual-scroll-container.virtual-scroll--both[data-v-91b6ab6c]{white-space:nowrap}.virtual-scroll-scrollbar-container[data-v-91b6ab6c]{position:sticky;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:0;z-index:30;pointer-events:none;overflow:visible}.virtual-scroll-scrollbar-viewport[data-v-91b6ab6c]{position:absolute;inset-block-start:0;inset-inline-start:0;pointer-events:none}.virtual-scroll-wrapper[data-v-91b6ab6c]{contain:layout;position:relative}:where(.virtual-scroll--hydrated>.virtual-scroll-wrapper>.virtual-scroll-item[data-v-91b6ab6c]){position:absolute;inset-block-start:0;inset-inline-start:0}.virtual-scroll-item[data-v-91b6ab6c]{display:grid;box-sizing:border-box;will-change:transform}.virtual-scroll-item:where(.virtual-scroll--debug)[data-v-91b6ab6c]{outline:1px dashed rgba(255,0,0,.5);background-color:#ff00000d}.virtual-scroll-item:where(.virtual-scroll--debug)[data-v-91b6ab6c]:where(:hover){background-color:#ff00001a;z-index:100}.virtual-scroll-debug-info[data-v-91b6ab6c]{position:absolute;inset-block-start:2px;inset-inline-end:2px;background:#000000b3;color:#fff;font-size:10px;padding:2px 4px;border-radius:4px;pointer-events:none;z-index:100;font-family:monospace}.virtual-scroll-spacer[data-v-91b6ab6c]{pointer-events:none}.virtual-scroll-header[data-v-91b6ab6c],.virtual-scroll-footer[data-v-91b6ab6c]{position:relative;z-index:20}.virtual-scroll--sticky[data-v-91b6ab6c]{position:sticky}.virtual-scroll--sticky[data-v-91b6ab6c]:where(.virtual-scroll-header){inset-block-start:0;inset-inline-start:0;min-inline-size:100%;box-sizing:border-box}.virtual-scroll--sticky[data-v-91b6ab6c]:where(.virtual-scroll-footer){inset-block-end:0;inset-inline-start:0;min-inline-size:100%;box-sizing:border-box}.virtual-scroll--sticky[data-v-91b6ab6c]:where(.virtual-scroll-item){z-index:10}:is(tbody.virtual-scroll-wrapper,thead.virtual-scroll-header,tfoot.virtual-scroll-footer)[data-v-91b6ab6c]{display:inline-flex;min-inline-size:100%}:is(tbody.virtual-scroll-wrapper,thead.virtual-scroll-header,tfoot.virtual-scroll-footer)[data-v-91b6ab6c]>tr{display:inline-flex;min-inline-size:100%}:is(tbody.virtual-scroll-wrapper,thead.virtual-scroll-header,tfoot.virtual-scroll-footer)[data-v-91b6ab6c]>tr>:is(td,th){display:inline-block;align-items:center}}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pdanpdan/virtual-scroll",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.5.0",
|
|
5
5
|
"description": "A high-performance virtual scroll component for Vue 3",
|
|
6
6
|
"author": "",
|
|
7
7
|
"license": "MIT",
|
|
@@ -19,6 +19,9 @@
|
|
|
19
19
|
"virtual-scroll",
|
|
20
20
|
"typescript"
|
|
21
21
|
],
|
|
22
|
+
"sideEffects": [
|
|
23
|
+
"**/*.css"
|
|
24
|
+
],
|
|
22
25
|
"exports": {
|
|
23
26
|
".": {
|
|
24
27
|
"types": "./dist/index.d.ts",
|
|
@@ -26,6 +29,7 @@
|
|
|
26
29
|
"require": "./dist/index.cjs"
|
|
27
30
|
},
|
|
28
31
|
"./VirtualScroll.vue": "./src/components/VirtualScroll.vue",
|
|
32
|
+
"./VirtualScrollbar.vue": "./src/components/VirtualScrollbar.vue",
|
|
29
33
|
"./style.css": "./dist/virtual-scroll.css"
|
|
30
34
|
},
|
|
31
35
|
"main": "./dist/index.cjs",
|