@praxisjs/composables 1.0.6 → 1.1.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/CHANGELOG.md +74 -9
- package/dist/__tests__/dom.test.js +106 -22
- package/dist/__tests__/dom.test.js.map +1 -1
- package/dist/__tests__/list.test.d.ts +2 -0
- package/dist/__tests__/list.test.d.ts.map +1 -0
- package/dist/__tests__/list.test.js +156 -0
- package/dist/__tests__/list.test.js.map +1 -0
- package/dist/dom.d.ts +28 -6
- package/dist/dom.d.ts.map +1 -1
- package/dist/dom.js +69 -53
- package/dist/dom.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/list.d.ts +30 -0
- package/dist/list.d.ts.map +1 -0
- package/dist/list.js +47 -0
- package/dist/list.js.map +1 -0
- package/package.json +3 -3
- package/src/__tests__/dom.test.ts +114 -23
- package/src/__tests__/list.test.ts +210 -0
- package/src/dom.ts +78 -53
- package/src/index.ts +1 -0
- package/src/list.ts +77 -0
package/dist/dom.d.ts
CHANGED
|
@@ -10,11 +10,21 @@ export declare class WindowSize extends Composable {
|
|
|
10
10
|
export declare class ScrollPosition extends Composable {
|
|
11
11
|
x: number;
|
|
12
12
|
y: number;
|
|
13
|
-
private readonly
|
|
13
|
+
private readonly _ref?;
|
|
14
|
+
private readonly _staticTarget?;
|
|
14
15
|
private _handler;
|
|
15
|
-
private
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
private _x;
|
|
17
|
+
private _y;
|
|
18
|
+
private _mounted;
|
|
19
|
+
constructor(target?: HTMLElement | Window | {
|
|
20
|
+
current: HTMLElement | null;
|
|
21
|
+
});
|
|
22
|
+
private get _target();
|
|
23
|
+
setup(): {
|
|
24
|
+
x: import("@praxisjs/shared").Signal<number>;
|
|
25
|
+
y: import("@praxisjs/shared").Signal<number>;
|
|
26
|
+
};
|
|
27
|
+
onMount(): void;
|
|
18
28
|
onUnmount(): void;
|
|
19
29
|
}
|
|
20
30
|
export declare class ElementSize extends Composable {
|
|
@@ -22,11 +32,14 @@ export declare class ElementSize extends Composable {
|
|
|
22
32
|
width: number;
|
|
23
33
|
height: number;
|
|
24
34
|
private _observer?;
|
|
35
|
+
private _width;
|
|
36
|
+
private _height;
|
|
25
37
|
private _view?;
|
|
26
38
|
constructor(ref: {
|
|
27
39
|
current: HTMLElement | null;
|
|
28
40
|
});
|
|
29
41
|
setup(): Record<string, unknown>;
|
|
42
|
+
onMount(): void;
|
|
30
43
|
onUnmount(): void;
|
|
31
44
|
}
|
|
32
45
|
export declare class Intersection extends Composable {
|
|
@@ -34,20 +47,29 @@ export declare class Intersection extends Composable {
|
|
|
34
47
|
private readonly options?;
|
|
35
48
|
visible: boolean;
|
|
36
49
|
private _observer?;
|
|
50
|
+
private _visible;
|
|
37
51
|
private _view?;
|
|
38
52
|
constructor(ref: {
|
|
39
53
|
current: HTMLElement | null;
|
|
40
54
|
}, options?: IntersectionObserverInit | undefined);
|
|
41
55
|
setup(): Record<string, unknown>;
|
|
56
|
+
onMount(): void;
|
|
42
57
|
onUnmount(): void;
|
|
43
58
|
}
|
|
44
59
|
export declare class Focus extends Composable {
|
|
45
60
|
private readonly ref;
|
|
46
61
|
focused: boolean;
|
|
47
|
-
private
|
|
62
|
+
private _focused;
|
|
63
|
+
private readonly _onFocus;
|
|
64
|
+
private readonly _onBlur;
|
|
65
|
+
private _mounted;
|
|
48
66
|
constructor(ref: {
|
|
49
67
|
current: HTMLElement | null;
|
|
50
68
|
});
|
|
51
|
-
setup():
|
|
69
|
+
setup(): {
|
|
70
|
+
focused: import("@praxisjs/shared").Signal<boolean>;
|
|
71
|
+
};
|
|
72
|
+
onMount(): void;
|
|
73
|
+
onUnmount(): void;
|
|
52
74
|
}
|
|
53
75
|
//# sourceMappingURL=dom.d.ts.map
|
package/dist/dom.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,qBAAa,UAAW,SAAQ,UAAU;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IAEvB,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,KAAK,CAAC,CAA0B;IAExC,KAAK;IAaL,SAAS;CAGV;AAED,qBAAa,cAAe,SAAQ,UAAU;IACpC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IAElB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAuB;
|
|
1
|
+
{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,qBAAa,UAAW,SAAQ,UAAU;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IAEvB,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,KAAK,CAAC,CAA0B;IAExC,KAAK;IAaL,SAAS;CAGV;AAED,qBAAa,cAAe,SAAQ,UAAU;IACpC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IAElB,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAkC;IACxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAuB;IACtD,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,EAAE,CAAqC;IAC/C,OAAO,CAAC,EAAE,CAAqC;IAC/C,OAAO,CAAC,QAAQ,CAAS;gBAEb,MAAM,GAAE,WAAW,GAAG,MAAM,GAAG;QAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;KAAW;IASnF,OAAO,KAAK,OAAO,GAElB;IAED,KAAK;;;;IAML,OAAO;IAcP,SAAS;CAIV;AAED,qBAAa,WAAY,SAAQ,UAAU;IAS7B,OAAO,CAAC,QAAQ,CAAC,GAAG;IARxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IAEvB,OAAO,CAAC,SAAS,CAAC,CAAiB;IACnC,OAAO,CAAC,MAAM,CAAqC;IACnD,OAAO,CAAC,OAAO,CAAqC;IACpD,OAAO,CAAC,KAAK,CAAC,CAA0B;gBAEX,GAAG,EAAE;QAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE;IAIjE,KAAK;IAYL,OAAO;IAQP,SAAS;CAGV;AAED,qBAAa,YAAa,SAAQ,UAAU;IAQxC,OAAO,CAAC,QAAQ,CAAC,GAAG;IACpB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC;IARnB,OAAO,EAAE,OAAO,CAAC;IAEzB,OAAO,CAAC,SAAS,CAAC,CAAuB;IACzC,OAAO,CAAC,QAAQ,CAAsC;IACtD,OAAO,CAAC,KAAK,CAAC,CAA0B;gBAGrB,GAAG,EAAE;QAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE,EACpC,OAAO,CAAC,EAAE,wBAAwB,YAAA;IAKrD,KAAK;IAUL,OAAO;IAKP,SAAS;CAGV;AAED,qBAAa,KAAM,SAAQ,UAAU;IAQvB,OAAO,CAAC,QAAQ,CAAC,GAAG;IAPxB,OAAO,EAAE,OAAO,CAAC;IAEzB,OAAO,CAAC,QAAQ,CAAsC;IACtD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAsC;IAC/D,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAuC;IAC/D,OAAO,CAAC,QAAQ,CAAS;gBAEI,GAAG,EAAE;QAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE;IAIjE,KAAK;;;IAKL,OAAO;IASP,SAAS;CAOV"}
|
package/dist/dom.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Composable } from "@praxisjs/core";
|
|
2
|
-
import { signal
|
|
2
|
+
import { signal } from "@praxisjs/core/internal";
|
|
3
3
|
export class WindowSize extends Composable {
|
|
4
4
|
setup() {
|
|
5
5
|
if (this._view)
|
|
@@ -21,25 +21,38 @@ export class WindowSize extends Composable {
|
|
|
21
21
|
export class ScrollPosition extends Composable {
|
|
22
22
|
constructor(target = window) {
|
|
23
23
|
super();
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
this._mounted = false;
|
|
25
|
+
if (typeof target === "object" && "current" in target) {
|
|
26
|
+
this._ref = target;
|
|
27
|
+
}
|
|
28
|
+
else {
|
|
29
|
+
this._staticTarget = target;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
get _target() {
|
|
33
|
+
return this._ref ? (this._ref.current ?? window) : (this._staticTarget ?? window);
|
|
27
34
|
}
|
|
28
35
|
setup() {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
36
|
+
this._x = signal(0);
|
|
37
|
+
this._y = signal(0);
|
|
38
|
+
return { x: this._x, y: this._y };
|
|
39
|
+
}
|
|
40
|
+
onMount() {
|
|
41
|
+
if (this._mounted)
|
|
42
|
+
return;
|
|
43
|
+
this._mounted = true;
|
|
33
44
|
const t = this._target;
|
|
34
45
|
this._handler = () => {
|
|
35
|
-
|
|
36
|
-
|
|
46
|
+
this._x.set(t === window ? window.scrollX : t.scrollLeft);
|
|
47
|
+
this._y.set(t === window ? window.scrollY : t.scrollTop);
|
|
37
48
|
};
|
|
38
49
|
t.addEventListener("scroll", this._handler);
|
|
39
|
-
|
|
40
|
-
|
|
50
|
+
// set initial values
|
|
51
|
+
this._x.set(t === window ? window.scrollX : t.scrollLeft);
|
|
52
|
+
this._y.set(t === window ? window.scrollY : t.scrollTop);
|
|
41
53
|
}
|
|
42
54
|
onUnmount() {
|
|
55
|
+
this._mounted = false;
|
|
43
56
|
this._target.removeEventListener("scroll", this._handler);
|
|
44
57
|
}
|
|
45
58
|
}
|
|
@@ -51,22 +64,23 @@ export class ElementSize extends Composable {
|
|
|
51
64
|
setup() {
|
|
52
65
|
if (this._view)
|
|
53
66
|
return this._view;
|
|
54
|
-
|
|
55
|
-
|
|
67
|
+
this._width = signal(0);
|
|
68
|
+
this._height = signal(0);
|
|
56
69
|
this._observer = new ResizeObserver(([entry]) => {
|
|
57
|
-
|
|
58
|
-
|
|
70
|
+
this._width.set(entry.contentRect.width);
|
|
71
|
+
this._height.set(entry.contentRect.height);
|
|
59
72
|
});
|
|
60
|
-
|
|
61
|
-
if (this.ref.current) {
|
|
62
|
-
this._observer?.observe(this.ref.current);
|
|
63
|
-
width.set(this.ref.current.offsetWidth);
|
|
64
|
-
height.set(this.ref.current.offsetHeight);
|
|
65
|
-
}
|
|
66
|
-
});
|
|
67
|
-
this._view = { width, height };
|
|
73
|
+
this._view = { width: this._width, height: this._height };
|
|
68
74
|
return this._view;
|
|
69
75
|
}
|
|
76
|
+
onMount() {
|
|
77
|
+
const el = this.ref.current;
|
|
78
|
+
if (!el)
|
|
79
|
+
return;
|
|
80
|
+
this._observer?.observe(el);
|
|
81
|
+
this._width.set(el.offsetWidth);
|
|
82
|
+
this._height.set(el.offsetHeight);
|
|
83
|
+
}
|
|
70
84
|
onUnmount() {
|
|
71
85
|
this._observer?.disconnect();
|
|
72
86
|
}
|
|
@@ -80,17 +94,18 @@ export class Intersection extends Composable {
|
|
|
80
94
|
setup() {
|
|
81
95
|
if (this._view)
|
|
82
96
|
return this._view;
|
|
83
|
-
|
|
97
|
+
this._visible = signal(false);
|
|
84
98
|
this._observer = new IntersectionObserver(([entry]) => {
|
|
85
|
-
|
|
99
|
+
this._visible.set(entry.isIntersecting);
|
|
86
100
|
}, this.options);
|
|
87
|
-
|
|
88
|
-
if (this.ref.current)
|
|
89
|
-
this._observer?.observe(this.ref.current);
|
|
90
|
-
});
|
|
91
|
-
this._view = { visible };
|
|
101
|
+
this._view = { visible: this._visible };
|
|
92
102
|
return this._view;
|
|
93
103
|
}
|
|
104
|
+
onMount() {
|
|
105
|
+
const el = this.ref.current;
|
|
106
|
+
if (el)
|
|
107
|
+
this._observer?.observe(el);
|
|
108
|
+
}
|
|
94
109
|
onUnmount() {
|
|
95
110
|
this._observer?.disconnect();
|
|
96
111
|
}
|
|
@@ -99,30 +114,31 @@ export class Focus extends Composable {
|
|
|
99
114
|
constructor(ref) {
|
|
100
115
|
super();
|
|
101
116
|
this.ref = ref;
|
|
117
|
+
this._onFocus = () => { this._focused.set(true); };
|
|
118
|
+
this._onBlur = () => { this._focused.set(false); };
|
|
119
|
+
this._mounted = false;
|
|
102
120
|
}
|
|
103
121
|
setup() {
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
this._view = { focused };
|
|
125
|
-
return this._view;
|
|
122
|
+
this._focused = signal(false);
|
|
123
|
+
return { focused: this._focused };
|
|
124
|
+
}
|
|
125
|
+
onMount() {
|
|
126
|
+
if (this._mounted)
|
|
127
|
+
return;
|
|
128
|
+
this._mounted = true;
|
|
129
|
+
const el = this.ref.current;
|
|
130
|
+
if (!el)
|
|
131
|
+
return;
|
|
132
|
+
el.addEventListener("focus", this._onFocus);
|
|
133
|
+
el.addEventListener("blur", this._onBlur);
|
|
134
|
+
}
|
|
135
|
+
onUnmount() {
|
|
136
|
+
this._mounted = false;
|
|
137
|
+
const el = this.ref.current;
|
|
138
|
+
if (!el)
|
|
139
|
+
return;
|
|
140
|
+
el.removeEventListener("focus", this._onFocus);
|
|
141
|
+
el.removeEventListener("blur", this._onBlur);
|
|
126
142
|
}
|
|
127
143
|
}
|
|
128
144
|
//# sourceMappingURL=dom.js.map
|
package/dist/dom.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dom.js","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"dom.js","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { WindowSize, ScrollPosition, ElementSize, Intersection, Focus, } from "./dom";
|
|
2
2
|
export { MediaQuery, ColorScheme, Mouse, KeyCombo, Idle } from "./browser";
|
|
3
3
|
export { Clipboard, Geolocation, TimeAgo, Pagination, type PaginationOptions, } from "./utilities";
|
|
4
|
+
export { VirtualList, type VirtualItem } from "./list";
|
|
4
5
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,cAAc,EACd,WAAW,EACX,YAAY,EACZ,KAAK,GACN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAC3E,OAAO,EACL,SAAS,EACT,WAAW,EACX,OAAO,EACP,UAAU,EACV,KAAK,iBAAiB,GACvB,MAAM,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,cAAc,EACd,WAAW,EACX,YAAY,EACZ,KAAK,GACN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAC3E,OAAO,EACL,SAAS,EACT,WAAW,EACX,OAAO,EACP,UAAU,EACV,KAAK,iBAAiB,GACvB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { WindowSize, ScrollPosition, ElementSize, Intersection, Focus, } from "./dom";
|
|
2
2
|
export { MediaQuery, ColorScheme, Mouse, KeyCombo, Idle } from "./browser";
|
|
3
3
|
export { Clipboard, Geolocation, TimeAgo, Pagination, } from "./utilities";
|
|
4
|
+
export { VirtualList } from "./list";
|
|
4
5
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,cAAc,EACd,WAAW,EACX,YAAY,EACZ,KAAK,GACN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAC3E,OAAO,EACL,SAAS,EACT,WAAW,EACX,OAAO,EACP,UAAU,GAEX,MAAM,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,cAAc,EACd,WAAW,EACX,YAAY,EACZ,KAAK,GACN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAC3E,OAAO,EACL,SAAS,EACT,WAAW,EACX,OAAO,EACP,UAAU,GAEX,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,WAAW,EAAoB,MAAM,QAAQ,CAAC"}
|
package/dist/list.d.ts
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Composable } from "@praxisjs/core";
|
|
2
|
+
export interface VirtualItem<T> {
|
|
3
|
+
item: T;
|
|
4
|
+
index: number;
|
|
5
|
+
}
|
|
6
|
+
export declare class VirtualList<T = unknown> extends Composable {
|
|
7
|
+
private readonly containerRef;
|
|
8
|
+
private readonly getItems;
|
|
9
|
+
private readonly itemHeight;
|
|
10
|
+
private readonly buffer;
|
|
11
|
+
visibleItems: Array<VirtualItem<T>>;
|
|
12
|
+
totalHeight: number;
|
|
13
|
+
offsetTop: number;
|
|
14
|
+
offsetBottom: number;
|
|
15
|
+
private readonly _scrollTop;
|
|
16
|
+
private readonly _viewHeight;
|
|
17
|
+
private _scrollCleanup?;
|
|
18
|
+
constructor(containerRef: {
|
|
19
|
+
current: HTMLElement | null;
|
|
20
|
+
}, getItems: () => T[], itemHeight: number, buffer?: number);
|
|
21
|
+
setup(): {
|
|
22
|
+
visibleItems: import("@praxisjs/shared").Computed<VirtualItem<T>[]>;
|
|
23
|
+
totalHeight: import("@praxisjs/shared").Computed<number>;
|
|
24
|
+
offsetTop: import("@praxisjs/shared").Computed<number>;
|
|
25
|
+
offsetBottom: import("@praxisjs/shared").Computed<number>;
|
|
26
|
+
};
|
|
27
|
+
onMount(): void;
|
|
28
|
+
onUnmount(): void;
|
|
29
|
+
}
|
|
30
|
+
//# sourceMappingURL=list.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../src/list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;CACf;AAED,qBAAa,WAAW,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,UAAU;IAWpD,OAAO,CAAC,QAAQ,CAAC,YAAY;IAC7B,OAAO,CAAC,QAAQ,CAAC,QAAQ;IACzB,OAAO,CAAC,QAAQ,CAAC,UAAU;IAC3B,OAAO,CAAC,QAAQ,CAAC,MAAM;IAbjB,YAAY,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IAE7B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAa;IACxC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAe;IAC3C,OAAO,CAAC,cAAc,CAAC,CAAa;gBAGjB,YAAY,EAAE;QAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE,EAC7C,QAAQ,EAAE,MAAM,CAAC,EAAE,EACnB,UAAU,EAAE,MAAM,EAClB,MAAM,SAAI;IAK7B,KAAK;;;;;;IAkCL,OAAO;IAYP,SAAS;CAGV"}
|
package/dist/list.js
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { Composable } from "@praxisjs/core";
|
|
2
|
+
import { computed, signal } from "@praxisjs/core/internal";
|
|
3
|
+
export class VirtualList extends Composable {
|
|
4
|
+
constructor(containerRef, getItems, itemHeight, buffer = 3) {
|
|
5
|
+
super();
|
|
6
|
+
this.containerRef = containerRef;
|
|
7
|
+
this.getItems = getItems;
|
|
8
|
+
this.itemHeight = itemHeight;
|
|
9
|
+
this.buffer = buffer;
|
|
10
|
+
this._scrollTop = signal(0);
|
|
11
|
+
this._viewHeight = signal(600);
|
|
12
|
+
}
|
|
13
|
+
setup() {
|
|
14
|
+
const { _scrollTop, _viewHeight, itemHeight, buffer, getItems } = this;
|
|
15
|
+
const items = computed(getItems);
|
|
16
|
+
const total = computed(() => items().length);
|
|
17
|
+
const startIdx = computed(() => Math.max(0, Math.floor(_scrollTop() / itemHeight) - buffer));
|
|
18
|
+
const endIdx = computed(() => Math.min(total() - 1, Math.ceil((_scrollTop() + _viewHeight()) / itemHeight) + buffer));
|
|
19
|
+
const visibleItems = computed(() => {
|
|
20
|
+
const arr = items();
|
|
21
|
+
const result = [];
|
|
22
|
+
for (let i = startIdx(); i <= endIdx(); i++) {
|
|
23
|
+
result.push({ item: arr[i], index: i });
|
|
24
|
+
}
|
|
25
|
+
return result;
|
|
26
|
+
});
|
|
27
|
+
const totalHeight = computed(() => total() * itemHeight);
|
|
28
|
+
const offsetTop = computed(() => startIdx() * itemHeight);
|
|
29
|
+
const offsetBottom = computed(() => Math.max(0, total() - 1 - endIdx()) * itemHeight);
|
|
30
|
+
return { visibleItems, totalHeight, offsetTop, offsetBottom };
|
|
31
|
+
}
|
|
32
|
+
onMount() {
|
|
33
|
+
const el = this.containerRef.current;
|
|
34
|
+
if (!el)
|
|
35
|
+
return;
|
|
36
|
+
const h = el.clientHeight;
|
|
37
|
+
if (h > 0)
|
|
38
|
+
this._viewHeight.set(h);
|
|
39
|
+
const handler = () => { this._scrollTop.set(el.scrollTop); };
|
|
40
|
+
el.addEventListener("scroll", handler);
|
|
41
|
+
this._scrollCleanup = () => { el.removeEventListener("scroll", handler); };
|
|
42
|
+
}
|
|
43
|
+
onUnmount() {
|
|
44
|
+
this._scrollCleanup?.();
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
//# sourceMappingURL=list.js.map
|
package/dist/list.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"list.js","sourceRoot":"","sources":["../src/list.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@praxisjs/composables",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"typescript": "^5.9.3"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@praxisjs/
|
|
18
|
-
"@praxisjs/
|
|
17
|
+
"@praxisjs/shared": "0.2.0",
|
|
18
|
+
"@praxisjs/core": "1.6.0"
|
|
19
19
|
},
|
|
20
20
|
"scripts": {
|
|
21
21
|
"build": "tsc",
|