@inertiajs/svelte 2.1.10 → 2.2.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/dist/InfiniteScroll.svelte +186 -0
- package/dist/InfiniteScroll.svelte.d.ts +86 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/package.json +10 -10
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
<script>import {
|
|
2
|
+
getScrollableParent,
|
|
3
|
+
useInfiniteScroll
|
|
4
|
+
} from "@inertiajs/core";
|
|
5
|
+
import { onDestroy, onMount } from "svelte";
|
|
6
|
+
export let data = void 0;
|
|
7
|
+
export let buffer = 0;
|
|
8
|
+
export let as = "div";
|
|
9
|
+
export let manual = false;
|
|
10
|
+
export let manualAfter = 0;
|
|
11
|
+
export let preserveUrl = false;
|
|
12
|
+
export let reverse = false;
|
|
13
|
+
export let autoScroll = void 0;
|
|
14
|
+
export let startElement = null;
|
|
15
|
+
export let endElement = null;
|
|
16
|
+
export let itemsElement = null;
|
|
17
|
+
export let onlyNext = false;
|
|
18
|
+
export let onlyPrevious = false;
|
|
19
|
+
let itemsElementRef;
|
|
20
|
+
let startElementRef;
|
|
21
|
+
let endElementRef;
|
|
22
|
+
let loadingPrevious = false;
|
|
23
|
+
let loadingNext = false;
|
|
24
|
+
let requestCount = 0;
|
|
25
|
+
$: resolvedItemsElement = resolveHTMLElement(itemsElement, itemsElementRef);
|
|
26
|
+
$: scrollableParent = resolvedItemsElement ? getScrollableParent(resolvedItemsElement) : null;
|
|
27
|
+
$: manualMode = manual || manualAfter > 0 && requestCount >= manualAfter;
|
|
28
|
+
$: autoLoad = !manualMode;
|
|
29
|
+
$: headerAutoMode = autoLoad && !onlyNext;
|
|
30
|
+
$: footerAutoMode = autoLoad && !onlyPrevious;
|
|
31
|
+
$: sharedExposed = {
|
|
32
|
+
loadingPrevious,
|
|
33
|
+
loadingNext,
|
|
34
|
+
hasPrevious: infiniteScrollInstance?.dataManager.hasPrevious() || false,
|
|
35
|
+
hasNext: infiniteScrollInstance?.dataManager.hasNext() || false
|
|
36
|
+
};
|
|
37
|
+
$: exposedPrevious = {
|
|
38
|
+
loading: loadingPrevious,
|
|
39
|
+
fetch: fetchPrevious,
|
|
40
|
+
autoMode: headerAutoMode,
|
|
41
|
+
manualMode: !headerAutoMode,
|
|
42
|
+
hasMore: infiniteScrollInstance?.dataManager.hasPrevious() || false,
|
|
43
|
+
...sharedExposed
|
|
44
|
+
};
|
|
45
|
+
$: exposedNext = {
|
|
46
|
+
loading: loadingNext,
|
|
47
|
+
fetch: fetchNext,
|
|
48
|
+
autoMode: footerAutoMode,
|
|
49
|
+
manualMode: !footerAutoMode,
|
|
50
|
+
hasMore: infiniteScrollInstance?.dataManager.hasNext() || false,
|
|
51
|
+
...sharedExposed
|
|
52
|
+
};
|
|
53
|
+
$: exposedSlot = {
|
|
54
|
+
loading: loadingPrevious || loadingNext,
|
|
55
|
+
loadingPrevious,
|
|
56
|
+
loadingNext
|
|
57
|
+
};
|
|
58
|
+
let infiniteScrollInstance = null;
|
|
59
|
+
function resolveHTMLElement(value, fallback) {
|
|
60
|
+
if (!value) {
|
|
61
|
+
return fallback;
|
|
62
|
+
}
|
|
63
|
+
if (typeof value === "string") {
|
|
64
|
+
return document.querySelector(value);
|
|
65
|
+
}
|
|
66
|
+
if (typeof value === "function") {
|
|
67
|
+
return value() || null;
|
|
68
|
+
}
|
|
69
|
+
return fallback;
|
|
70
|
+
}
|
|
71
|
+
function scrollToBottom() {
|
|
72
|
+
if (scrollableParent) {
|
|
73
|
+
scrollableParent.scrollTo({
|
|
74
|
+
top: scrollableParent.scrollHeight,
|
|
75
|
+
behavior: "instant"
|
|
76
|
+
});
|
|
77
|
+
} else {
|
|
78
|
+
window.scrollTo({
|
|
79
|
+
top: document.body.scrollHeight,
|
|
80
|
+
behavior: "instant"
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
export function fetchPrevious(options) {
|
|
85
|
+
infiniteScrollInstance?.dataManager.fetchPrevious(options);
|
|
86
|
+
}
|
|
87
|
+
export function fetchNext(options) {
|
|
88
|
+
infiniteScrollInstance?.dataManager.fetchNext(options);
|
|
89
|
+
}
|
|
90
|
+
export function hasPrevious() {
|
|
91
|
+
return infiniteScrollInstance?.dataManager.hasPrevious() || false;
|
|
92
|
+
}
|
|
93
|
+
export function hasNext() {
|
|
94
|
+
return infiniteScrollInstance?.dataManager.hasNext() || false;
|
|
95
|
+
}
|
|
96
|
+
onMount(() => {
|
|
97
|
+
setTimeout(setupInfiniteScrollInstance);
|
|
98
|
+
});
|
|
99
|
+
function setupInfiniteScrollInstance() {
|
|
100
|
+
const resolvedItemsElement2 = resolveHTMLElement(itemsElement, itemsElementRef);
|
|
101
|
+
const resolvedStartElement = resolveHTMLElement(startElement, startElementRef);
|
|
102
|
+
const resolvedEndElement = resolveHTMLElement(endElement, endElementRef);
|
|
103
|
+
infiniteScrollInstance = useInfiniteScroll({
|
|
104
|
+
// Data
|
|
105
|
+
getPropName: () => data,
|
|
106
|
+
inReverseMode: () => reverse,
|
|
107
|
+
shouldFetchNext: () => !onlyPrevious,
|
|
108
|
+
shouldFetchPrevious: () => !onlyNext,
|
|
109
|
+
shouldPreserveUrl: () => preserveUrl,
|
|
110
|
+
// Elements
|
|
111
|
+
getTriggerMargin: () => buffer,
|
|
112
|
+
getStartElement: () => resolvedStartElement,
|
|
113
|
+
getEndElement: () => resolvedEndElement,
|
|
114
|
+
getItemsElement: () => resolvedItemsElement2,
|
|
115
|
+
getScrollableParent: () => resolvedItemsElement2 ? getScrollableParent(resolvedItemsElement2) : null,
|
|
116
|
+
// Request callbacks
|
|
117
|
+
onBeforePreviousRequest: () => loadingPrevious = true,
|
|
118
|
+
onBeforeNextRequest: () => loadingNext = true,
|
|
119
|
+
onCompletePreviousRequest: () => {
|
|
120
|
+
requestCount += 1;
|
|
121
|
+
loadingPrevious = false;
|
|
122
|
+
},
|
|
123
|
+
onCompleteNextRequest: () => {
|
|
124
|
+
requestCount += 1;
|
|
125
|
+
loadingNext = false;
|
|
126
|
+
}
|
|
127
|
+
});
|
|
128
|
+
const { dataManager, elementManager } = infiniteScrollInstance;
|
|
129
|
+
elementManager.setupObservers();
|
|
130
|
+
elementManager.processServerLoadedElements(dataManager.getLastLoadedPage());
|
|
131
|
+
const shouldAutoScroll = autoScroll !== void 0 ? autoScroll : reverse;
|
|
132
|
+
if (shouldAutoScroll) {
|
|
133
|
+
scrollToBottom();
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
$: {
|
|
137
|
+
;
|
|
138
|
+
[autoLoad, onlyNext, onlyPrevious, reverse];
|
|
139
|
+
autoLoad ? infiniteScrollInstance?.elementManager.enableTriggers() : infiniteScrollInstance?.elementManager.disableTriggers();
|
|
140
|
+
}
|
|
141
|
+
onDestroy(() => infiniteScrollInstance?.elementManager.flushAll());
|
|
142
|
+
</script>
|
|
143
|
+
|
|
144
|
+
{#if !startElement && !reverse}
|
|
145
|
+
<div bind:this={startElementRef}>
|
|
146
|
+
<slot name="previous" {exposedPrevious}>
|
|
147
|
+
{#if loadingPrevious}
|
|
148
|
+
<slot name="loading" {exposedPrevious} />
|
|
149
|
+
{/if}
|
|
150
|
+
</slot>
|
|
151
|
+
</div>
|
|
152
|
+
{/if}
|
|
153
|
+
|
|
154
|
+
{#if !endElement && reverse}
|
|
155
|
+
<div bind:this={endElementRef}>
|
|
156
|
+
<slot name="next" {exposedNext}>
|
|
157
|
+
{#if loadingNext}
|
|
158
|
+
<slot name="loading" {exposedNext} />
|
|
159
|
+
{/if}
|
|
160
|
+
</slot>
|
|
161
|
+
</div>
|
|
162
|
+
{/if}
|
|
163
|
+
|
|
164
|
+
<svelte:element this={as} bind:this={itemsElementRef} {...$$restProps}>
|
|
165
|
+
<slot {exposedSlot} />
|
|
166
|
+
</svelte:element>
|
|
167
|
+
|
|
168
|
+
{#if !startElement && reverse}
|
|
169
|
+
<div bind:this={startElementRef}>
|
|
170
|
+
<slot name="previous" {exposedPrevious}>
|
|
171
|
+
{#if loadingPrevious}
|
|
172
|
+
<slot name="loading" {exposedPrevious} />
|
|
173
|
+
{/if}
|
|
174
|
+
</slot>
|
|
175
|
+
</div>
|
|
176
|
+
{/if}
|
|
177
|
+
|
|
178
|
+
{#if !endElement && !reverse}
|
|
179
|
+
<div bind:this={endElementRef}>
|
|
180
|
+
<slot name="next" {exposedNext}>
|
|
181
|
+
{#if loadingNext}
|
|
182
|
+
<slot name="loading" {exposedNext} />
|
|
183
|
+
{/if}
|
|
184
|
+
</slot>
|
|
185
|
+
</div>
|
|
186
|
+
{/if}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
data?: string | undefined;
|
|
6
|
+
buffer?: number | undefined;
|
|
7
|
+
as?: string | undefined;
|
|
8
|
+
manual?: boolean | undefined;
|
|
9
|
+
manualAfter?: number | undefined;
|
|
10
|
+
preserveUrl?: boolean | undefined;
|
|
11
|
+
reverse?: boolean | undefined;
|
|
12
|
+
autoScroll?: boolean | undefined;
|
|
13
|
+
startElement?: string | (() => HTMLElement | null) | null | undefined;
|
|
14
|
+
endElement?: string | (() => HTMLElement | null) | null | undefined;
|
|
15
|
+
itemsElement?: string | (() => HTMLElement | null) | null | undefined;
|
|
16
|
+
onlyNext?: boolean | undefined;
|
|
17
|
+
onlyPrevious?: boolean | undefined;
|
|
18
|
+
fetchPrevious?: ((options?: any) => void) | undefined;
|
|
19
|
+
fetchNext?: ((options?: any) => void) | undefined;
|
|
20
|
+
hasPrevious?: (() => boolean) | undefined;
|
|
21
|
+
hasNext?: (() => boolean) | undefined;
|
|
22
|
+
};
|
|
23
|
+
events: {
|
|
24
|
+
[evt: string]: CustomEvent<any>;
|
|
25
|
+
};
|
|
26
|
+
slots: {
|
|
27
|
+
previous: {
|
|
28
|
+
exposedPrevious: {
|
|
29
|
+
loadingPrevious: boolean;
|
|
30
|
+
loadingNext: boolean;
|
|
31
|
+
hasPrevious: boolean;
|
|
32
|
+
hasNext: boolean;
|
|
33
|
+
loading: boolean;
|
|
34
|
+
fetch: (options?: any) => void;
|
|
35
|
+
autoMode: boolean;
|
|
36
|
+
manualMode: boolean;
|
|
37
|
+
hasMore: boolean;
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
loading: {
|
|
41
|
+
exposedNext: {
|
|
42
|
+
loadingPrevious: boolean;
|
|
43
|
+
loadingNext: boolean;
|
|
44
|
+
hasPrevious: boolean;
|
|
45
|
+
hasNext: boolean;
|
|
46
|
+
loading: boolean;
|
|
47
|
+
fetch: (options?: any) => void;
|
|
48
|
+
autoMode: boolean;
|
|
49
|
+
manualMode: boolean;
|
|
50
|
+
hasMore: boolean;
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
next: {
|
|
54
|
+
exposedNext: {
|
|
55
|
+
loadingPrevious: boolean;
|
|
56
|
+
loadingNext: boolean;
|
|
57
|
+
hasPrevious: boolean;
|
|
58
|
+
hasNext: boolean;
|
|
59
|
+
loading: boolean;
|
|
60
|
+
fetch: (options?: any) => void;
|
|
61
|
+
autoMode: boolean;
|
|
62
|
+
manualMode: boolean;
|
|
63
|
+
hasMore: boolean;
|
|
64
|
+
};
|
|
65
|
+
};
|
|
66
|
+
default: {
|
|
67
|
+
exposedSlot: {
|
|
68
|
+
loading: boolean;
|
|
69
|
+
loadingPrevious: boolean;
|
|
70
|
+
loadingNext: boolean;
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
};
|
|
74
|
+
exports?: undefined;
|
|
75
|
+
bindings?: undefined;
|
|
76
|
+
};
|
|
77
|
+
export type InfiniteScrollProps = typeof __propDef.props;
|
|
78
|
+
export type InfiniteScrollEvents = typeof __propDef.events;
|
|
79
|
+
export type InfiniteScrollSlots = typeof __propDef.slots;
|
|
80
|
+
export default class InfiniteScroll extends SvelteComponent<InfiniteScrollProps, InfiniteScrollEvents, InfiniteScrollSlots> {
|
|
81
|
+
get fetchPrevious(): (options?: any) => void;
|
|
82
|
+
get fetchNext(): (options?: any) => void;
|
|
83
|
+
get hasPrevious(): () => boolean;
|
|
84
|
+
get hasNext(): () => boolean;
|
|
85
|
+
}
|
|
86
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
export { router } from '@inertiajs/core';
|
|
1
|
+
export { progress, router } from '@inertiajs/core';
|
|
2
2
|
export { default as Deferred } from './components/Deferred.svelte';
|
|
3
3
|
export { default as Form } from './components/Form.svelte';
|
|
4
4
|
export { default as Link } from './components/Link.svelte';
|
|
5
5
|
export { default as WhenVisible } from './components/WhenVisible.svelte';
|
|
6
6
|
export { default as createInertiaApp } from './createInertiaApp';
|
|
7
|
+
export { default as InfiniteScroll } from './InfiniteScroll.svelte';
|
|
7
8
|
export { default as inertia } from './link';
|
|
8
9
|
export { default as page } from './page';
|
|
9
10
|
export { type ResolvedComponent } from './types';
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
export { router } from '@inertiajs/core';
|
|
1
|
+
export { progress, router } from '@inertiajs/core';
|
|
2
2
|
export { default as Deferred } from './components/Deferred.svelte';
|
|
3
3
|
export { default as Form } from './components/Form.svelte';
|
|
4
4
|
export { default as Link } from './components/Link.svelte';
|
|
5
5
|
export { default as WhenVisible } from './components/WhenVisible.svelte';
|
|
6
6
|
export { default as createInertiaApp } from './createInertiaApp';
|
|
7
|
+
export { default as InfiniteScroll } from './InfiniteScroll.svelte';
|
|
7
8
|
export { default as inertia } from './link';
|
|
8
9
|
export { default as page } from './page';
|
|
9
10
|
export {} from './types';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inertiajs/svelte",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "The Svelte adapter for Inertia.js",
|
|
6
6
|
"contributors": [
|
|
@@ -35,16 +35,16 @@
|
|
|
35
35
|
}
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@sveltejs/adapter-auto": "^3.
|
|
39
|
-
"@sveltejs/kit": "^2.
|
|
40
|
-
"@sveltejs/package": "^2.
|
|
38
|
+
"@sveltejs/adapter-auto": "^3.3.1",
|
|
39
|
+
"@sveltejs/kit": "^2.43.2",
|
|
40
|
+
"@sveltejs/package": "^2.5.4",
|
|
41
41
|
"@sveltejs/vite-plugin-svelte": "^3.1.2",
|
|
42
|
-
"axios": "^1.12.
|
|
42
|
+
"axios": "^1.12.2",
|
|
43
43
|
"es-check": "^9.3.1",
|
|
44
|
-
"publint": "^0.2.
|
|
45
|
-
"svelte": "^4.2.
|
|
46
|
-
"svelte-check": "^4.
|
|
47
|
-
"tslib": "^2.
|
|
44
|
+
"publint": "^0.2.12",
|
|
45
|
+
"svelte": "^4.2.20",
|
|
46
|
+
"svelte-check": "^4.3.2",
|
|
47
|
+
"tslib": "^2.8.1",
|
|
48
48
|
"typescript": "^5.9.2",
|
|
49
49
|
"vite": "^5.4.20"
|
|
50
50
|
},
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"dependencies": {
|
|
55
55
|
"@types/lodash-es": "^4.17.12",
|
|
56
56
|
"lodash-es": "^4.17.21",
|
|
57
|
-
"@inertiajs/core": "2.
|
|
57
|
+
"@inertiajs/core": "2.2.0"
|
|
58
58
|
},
|
|
59
59
|
"scripts": {
|
|
60
60
|
"build": "pnpm package && publint",
|