svelte-ag 0.0.2-dev.83 → 1.0.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/lib/api/form.svelte.d.ts +5 -3
- package/dist/lib/api/form.svelte.d.ts.map +1 -1
- package/dist/lib/api/form.svelte.js +0 -1
- package/dist/lib/api/index.d.ts +1 -1
- package/dist/lib/api/index.d.ts.map +1 -1
- package/dist/lib/api/index.js +1 -1
- package/dist/lib/api/query/cache.svelte.d.ts +13 -0
- package/dist/lib/api/query/cache.svelte.d.ts.map +1 -0
- package/dist/lib/api/query/cache.svelte.js +48 -0
- package/dist/lib/api/query/entrypoint.svelte.d.ts +27 -0
- package/dist/lib/api/query/entrypoint.svelte.d.ts.map +1 -0
- package/dist/lib/api/query/entrypoint.svelte.js +32 -0
- package/dist/lib/api/query/index.d.ts +5 -0
- package/dist/lib/api/query/index.d.ts.map +1 -0
- package/dist/lib/api/query/index.js +4 -0
- package/dist/lib/api/query/query.svelte.d.ts +40 -0
- package/dist/lib/api/query/query.svelte.d.ts.map +1 -0
- package/dist/lib/api/query/query.svelte.js +157 -0
- package/dist/lib/api/query/utils.svelte.d.ts +3 -0
- package/dist/lib/api/query/utils.svelte.d.ts.map +1 -0
- package/dist/lib/api/query/utils.svelte.js +7 -0
- package/dist/lib/bits/internal/floating-svelte/use-floating.svelte.d.ts +1 -1
- package/dist/lib/bits/internal/floating-svelte/use-floating.svelte.d.ts.map +1 -1
- package/dist/lib/bits/internal/floating-svelte/use-floating.svelte.js +15 -13
- package/dist/lib/components/animated/animated.svelte +23 -13
- package/dist/lib/components/animated/animated.svelte.d.ts.map +1 -1
- package/dist/lib/components/dnd/Droppable.svelte +11 -9
- package/dist/lib/components/dnd/Droppable.svelte.d.ts +7 -1
- package/dist/lib/components/dnd/Droppable.svelte.d.ts.map +1 -1
- package/dist/lib/components/dnd/default.svelte.d.ts +14 -0
- package/dist/lib/components/dnd/default.svelte.d.ts.map +1 -0
- package/dist/lib/components/dnd/default.svelte.js +18 -0
- package/dist/lib/components/dnd/dnd-context.svelte +11 -21
- package/dist/lib/components/dnd/dnd-context.svelte.d.ts +17 -12
- package/dist/lib/components/dnd/dnd-context.svelte.d.ts.map +1 -1
- package/dist/lib/components/dnd/dnd-drag-overlay.svelte +1 -1
- package/dist/lib/components/dnd/dnd-drag-placeholder.svelte +1 -9
- package/dist/lib/components/dnd/dnd-drag-placeholder.svelte.d.ts.map +1 -1
- package/dist/lib/components/dnd/dnd-draghandle.svelte +21 -10
- package/dist/lib/components/dnd/dnd-draghandle.svelte.d.ts.map +1 -1
- package/dist/lib/components/dnd/dnd-item.svelte +84 -0
- package/dist/lib/components/dnd/dnd-item.svelte.d.ts +27 -0
- package/dist/lib/components/dnd/dnd-item.svelte.d.ts.map +1 -0
- package/dist/lib/components/dnd/dnd-sortable-context.svelte +18 -4
- package/dist/lib/components/dnd/dnd-sortable-context.svelte.d.ts +5 -1
- package/dist/lib/components/dnd/dnd-sortable-context.svelte.d.ts.map +1 -1
- package/dist/lib/components/dnd/dnd-sortable-item.svelte +31 -9
- package/dist/lib/components/dnd/dnd-sortable-item.svelte.d.ts +5 -2
- package/dist/lib/components/dnd/dnd-sortable-item.svelte.d.ts.map +1 -1
- package/dist/lib/components/dnd/example.svelte +7 -1
- package/dist/lib/components/dnd/example.svelte.d.ts.map +1 -1
- package/dist/lib/components/dnd/exports.d.ts +7 -2
- package/dist/lib/components/dnd/exports.d.ts.map +1 -1
- package/dist/lib/components/dnd/exports.js +7 -2
- package/dist/lib/components/dnd/sortable.svelte.d.ts +8 -8
- package/dist/lib/components/dnd/sortable.svelte.d.ts.map +1 -1
- package/dist/lib/components/dnd/sortable.svelte.js +33 -21
- package/dist/lib/components/dnd/types.d.ts +15 -0
- package/dist/lib/components/dnd/types.d.ts.map +1 -0
- package/dist/lib/components/dnd/types.js +1 -0
- package/dist/lib/components/dnd/utils.svelte.d.ts +7 -6
- package/dist/lib/components/dnd/utils.svelte.d.ts.map +1 -1
- package/dist/lib/components/dnd/utils.svelte.js +4 -3
- package/dist/lib/components/form/form-description.svelte +12 -11
- package/dist/lib/components/form/form-description.svelte.d.ts +2 -2
- package/dist/lib/components/form/form-description.svelte.d.ts.map +1 -1
- package/dist/lib/components/form/form-field-full.svelte +41 -0
- package/dist/lib/components/form/form-field-full.svelte.d.ts +26 -0
- package/dist/lib/components/form/form-field-full.svelte.d.ts.map +1 -0
- package/dist/lib/components/form/form-field.svelte +18 -23
- package/dist/lib/components/form/form-field.svelte.d.ts +5 -2
- package/dist/lib/components/form/form-field.svelte.d.ts.map +1 -1
- package/dist/lib/components/form/index.d.ts +2 -1
- package/dist/lib/components/form/index.d.ts.map +1 -1
- package/dist/lib/components/form/index.js +3 -2
- package/dist/lib/components/gallery/gallery.svelte +1 -1
- package/dist/lib/components/search/combinations/searchPopover.svelte +4 -1
- package/dist/lib/components/search/combinations/searchPopover.svelte.d.ts +1 -1
- package/dist/lib/components/search/combinations/searchPopover.svelte.d.ts.map +1 -1
- package/dist/lib/components/search/search.svelte.d.ts.map +1 -1
- package/dist/lib/components/search/search.svelte.js +16 -9
- package/dist/lib/components/search/types.d.ts +1 -0
- package/dist/lib/components/search/types.d.ts.map +1 -1
- package/dist/lib/components/sidebar/sidebar-group-label.svelte +31 -26
- package/dist/lib/components/sidebar/sidebar-group-label.svelte.d.ts +3 -3
- package/dist/lib/components/sidebar/sidebar-group-label.svelte.d.ts.map +1 -1
- package/dist/lib/components/sidebar/sidebar-menu-button.svelte +7 -5
- package/dist/lib/components/sidebar/sidebar-menu-button.svelte.d.ts.map +1 -1
- package/dist/lib/vite/vite-plugin-component-source-collector.d.ts.map +1 -1
- package/dist/lib/vite/vite-plugin-component-source-collector.js +28 -18
- package/package.json +49 -46
- package/src/lib/api/form.svelte.ts +8 -7
- package/src/lib/api/index.ts +1 -1
- package/src/lib/api/query/cache.svelte.ts +57 -0
- package/src/lib/api/query/entrypoint.svelte.ts +67 -0
- package/src/lib/api/query/index.ts +5 -0
- package/src/lib/api/query/query.svelte.ts +231 -0
- package/src/lib/api/query/utils.svelte.ts +9 -0
- package/src/lib/bits/internal/floating-svelte/use-floating.svelte.ts +128 -130
- package/src/lib/components/animated/animated.svelte +23 -13
- package/src/lib/components/dnd/Droppable.svelte +11 -9
- package/src/lib/components/dnd/default.svelte.ts +25 -0
- package/src/lib/components/dnd/dnd-context.svelte +11 -21
- package/src/lib/components/dnd/dnd-drag-overlay.svelte +1 -1
- package/src/lib/components/dnd/dnd-drag-placeholder.svelte +1 -9
- package/src/lib/components/dnd/dnd-draghandle.svelte +21 -10
- package/src/lib/components/dnd/dnd-item.svelte +84 -0
- package/src/lib/components/dnd/dnd-sortable-context.svelte +18 -4
- package/src/lib/components/dnd/dnd-sortable-item.svelte +31 -9
- package/src/lib/components/dnd/example.svelte +7 -1
- package/src/lib/components/dnd/exports.ts +7 -2
- package/src/lib/components/dnd/sortable.svelte.ts +37 -25
- package/src/lib/components/dnd/types.ts +7 -0
- package/src/lib/components/dnd/utils.svelte.ts +13 -7
- package/src/lib/components/form/form-description.svelte +12 -11
- package/src/lib/components/form/form-field-full.svelte +41 -0
- package/src/lib/components/form/form-field.svelte +18 -23
- package/src/lib/components/form/index.ts +3 -0
- package/src/lib/components/gallery/gallery.svelte +1 -1
- package/src/lib/components/search/combinations/searchPopover.svelte +4 -1
- package/src/lib/components/search/search.svelte.ts +17 -7
- package/src/lib/components/search/types.ts +3 -0
- package/src/lib/components/sidebar/sidebar-group-label.svelte +31 -26
- package/src/lib/components/sidebar/sidebar-menu-button.svelte +7 -5
- package/src/lib/vite/vite-plugin-component-source-collector.ts +33 -18
- package/dist/lib/api/query.svelte.d.ts +0 -21
- package/dist/lib/api/query.svelte.d.ts.map +0 -1
- package/dist/lib/api/query.svelte.js +0 -47
- package/dist/lib/components/dnd/dnd-overlay.svelte +0 -0
- package/dist/lib/components/dnd/dnd-overlay.svelte.d.ts +0 -27
- package/dist/lib/components/dnd/dnd-overlay.svelte.d.ts.map +0 -1
- package/src/lib/api/query.svelte.ts +0 -59
- package/src/lib/components/dnd/dnd-overlay.svelte +0 -0
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { type SuperForm, type SuperValidated } from 'sveltekit-superforms';
|
|
2
2
|
import type { ApiRequestFunction, HTTPMethod, ApiEndpoints, ApiInput, ApiSuccessBody, ApiErrorBody } from 'ts-ag';
|
|
3
3
|
import type * as v from 'valibot';
|
|
4
|
+
type ValidInput<E extends ApiEndpoints, P extends E['path'], M extends E['method']> = NonNullable<ApiInput<E, P, M>>;
|
|
4
5
|
export type ApiRequestForm<API extends ApiEndpoints> = <Path extends API['path'], Method extends Extract<API, {
|
|
5
6
|
path: Path;
|
|
6
7
|
}>['method']>(path: Path, method: Method, actions: {
|
|
7
|
-
onSuccess?: (form: SuperValidated<
|
|
8
|
-
onFail?: (form: SuperValidated<
|
|
9
|
-
}) => SuperForm<
|
|
8
|
+
onSuccess?: (form: SuperValidated<ValidInput<API, Path, Method>>, response: ApiSuccessBody<API, Path, Method>) => void;
|
|
9
|
+
onFail?: (form: SuperValidated<ValidInput<API, Path, Method>>, response: ApiErrorBody<API, Path, Method>) => void;
|
|
10
|
+
}) => SuperForm<ValidInput<API, Path, Method>>;
|
|
10
11
|
export declare function createFormFunction<API extends ApiEndpoints>(schemas: Record<API['path'], Record<HTTPMethod, v.GenericSchema>>, request: ApiRequestFunction<API>): ApiRequestForm<API>;
|
|
12
|
+
export {};
|
|
11
13
|
//# sourceMappingURL=form.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/api/form.svelte.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"form.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/api/form.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6C,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtH,OAAO,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAClH,OAAO,KAAK,KAAK,CAAC,MAAM,SAAS,CAAC;AAElC,KAAK,UAAU,CAAC,CAAC,SAAS,YAAY,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAErH,MAAM,MAAM,cAAc,CAAC,GAAG,SAAS,YAAY,IAAI,CACrD,IAAI,SAAS,GAAG,CAAC,MAAM,CAAC,EACxB,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC,QAAQ,CAAC,EAErD,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE;IACP,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,EACnD,QAAQ,EAAE,cAAc,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,KACxC,IAAI,CAAC;IACV,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,YAAY,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;CACnH,KACE,SAAS,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;AAE9C,wBAAgB,kBAAkB,CAAC,GAAG,SAAS,YAAY,EACzD,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,EACjE,OAAO,EAAE,kBAAkB,CAAC,GAAG,CAAC,GAC/B,cAAc,CAAC,GAAG,CAAC,CAwCrB"}
|
package/dist/lib/api/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/api/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/api/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}
|
package/dist/lib/api/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export * from './form.svelte.js';
|
|
2
|
-
export * from './query.
|
|
2
|
+
export * from './query/index.js';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export declare class Cache {
|
|
2
|
+
#private;
|
|
3
|
+
constructor();
|
|
4
|
+
deregister(key: string): void;
|
|
5
|
+
register(key: string, opts: {
|
|
6
|
+
timeout: number | 'inf';
|
|
7
|
+
}): void;
|
|
8
|
+
set(key: string, value: any): void;
|
|
9
|
+
get(key: string): any;
|
|
10
|
+
reset(key: string): void;
|
|
11
|
+
has(key: string): boolean;
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=cache.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cache.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/api/query/cache.svelte.ts"],"names":[],"mappings":"AAEA,qBAAa,KAAK;;;IAIhB,UAAU,CAAC,GAAG,EAAE,MAAM;IAMtB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,MAAM,GAAG,KAAK,CAAA;KAAE;IAMvD,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG;IAQ3B,GAAG,CAAC,GAAG,EAAE,MAAM;IAYf,KAAK,CAAC,GAAG,EAAE,MAAM;IAOjB,GAAG,CAAC,GAAG,EAAE,MAAM;CAWhB"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { SvelteMap } from 'svelte/reactivity';
|
|
2
|
+
export class Cache {
|
|
3
|
+
#cache = new SvelteMap();
|
|
4
|
+
constructor() { }
|
|
5
|
+
deregister(key) {
|
|
6
|
+
if (this.#cache.has(key)) {
|
|
7
|
+
this.#cache.delete(key);
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
register(key, opts) {
|
|
11
|
+
if (!this.#cache.has(key)) {
|
|
12
|
+
this.#cache.set(key, { ...opts, updatedAt: null, value: null });
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
set(key, value) {
|
|
16
|
+
const details = this.#cache.get(key);
|
|
17
|
+
if (!details)
|
|
18
|
+
throw new Error(`The key ${key} is not registered in the cache`);
|
|
19
|
+
details.updatedAt = Date.now();
|
|
20
|
+
details.value = value;
|
|
21
|
+
}
|
|
22
|
+
get(key) {
|
|
23
|
+
const details = this.#cache.get(key);
|
|
24
|
+
if (!details)
|
|
25
|
+
throw new Error(`The key ${key} is not registered in the cache`);
|
|
26
|
+
if (details.updatedAt !== null && (details.timeout === 'inf' || details.updatedAt + details.timeout > Date.now())) {
|
|
27
|
+
// Return cached value if its within the timeout or timeout is inf
|
|
28
|
+
return details.value;
|
|
29
|
+
}
|
|
30
|
+
return null;
|
|
31
|
+
}
|
|
32
|
+
reset(key) {
|
|
33
|
+
const details = this.#cache.get(key);
|
|
34
|
+
if (!details)
|
|
35
|
+
throw new Error(`The key ${key} is not registered in the cache`);
|
|
36
|
+
details.updatedAt = null;
|
|
37
|
+
}
|
|
38
|
+
has(key) {
|
|
39
|
+
const details = this.#cache.get(key);
|
|
40
|
+
if (!details)
|
|
41
|
+
return false;
|
|
42
|
+
if (details.updatedAt !== null && (details.timeout === 'inf' || details.updatedAt + details.timeout > Date.now())) {
|
|
43
|
+
// Return cached value if its within the timeout or timeout is inf
|
|
44
|
+
return true;
|
|
45
|
+
}
|
|
46
|
+
return false;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { ApiEndpoints, ApiRequestFunction, ApiInput, ApiResponse } from 'ts-ag';
|
|
2
|
+
import { Query } from './query.svelte.js';
|
|
3
|
+
export type BatchDetails<API extends ApiEndpoints, Path extends API['path'], Method extends Extract<API, {
|
|
4
|
+
path: Path;
|
|
5
|
+
}>['method']> = {
|
|
6
|
+
canBatch: (input: ApiInput<API, Path, Method>) => string | false;
|
|
7
|
+
batchInput: (inputs: ApiInput<API, Path, Method>[]) => ApiInput<API, Path, Method>;
|
|
8
|
+
unBatchOutput: (inputs: ApiInput<API, Path, Method>[], output: ApiResponse<API, Path, Method>) => ApiResponse<API, Path, Method>[] | Promise<ApiResponse<API, Path, Method>[]>;
|
|
9
|
+
};
|
|
10
|
+
export type ApiBatchDetails<API extends ApiEndpoints> = {
|
|
11
|
+
[Path in API['path']]?: {
|
|
12
|
+
[Method in Extract<API, {
|
|
13
|
+
path: Path;
|
|
14
|
+
}>['method']]?: BatchDetails<API, Path, Method>;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Helper function to use once so that creating queries is easier.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* export const createQuery = createQueryFunction<YourApiEndpoints>(yourApiRequest);
|
|
22
|
+
*
|
|
23
|
+
*/
|
|
24
|
+
export declare function createQueryFunction<API extends ApiEndpoints>(request: ApiRequestFunction<API>, batchDetails: ApiBatchDetails<API>): <Path extends API["path"], Method extends Extract<API, {
|
|
25
|
+
path: Path;
|
|
26
|
+
}>["method"]>(path: Path, method: Method, input: ApiInput<API, Path, Method>, opts?: ConstructorParameters<typeof Query<API, Path, Method>>[0]["opts"]) => Query<API, Path, Method>;
|
|
27
|
+
//# sourceMappingURL=entrypoint.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"entrypoint.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/api/query/entrypoint.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,EAAa,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAcrD,MAAM,MAAM,YAAY,CACtB,GAAG,SAAS,YAAY,EACxB,IAAI,SAAS,GAAG,CAAC,MAAM,CAAC,EACxB,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC,QAAQ,CAAC,IACnD;IACF,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,KAAK,MAAM,GAAG,KAAK,CAAC;IACjE,UAAU,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,KAAK,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;IACnF,aAAa,EAAE,CACb,MAAM,EAAE,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,EACrC,MAAM,EAAE,WAAW,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,KACnC,WAAW,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC;CACnF,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,GAAG,SAAS,YAAY,IAAI;KACrD,IAAI,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;SACrB,MAAM,IAAI,OAAO,CAAC,GAAG,EAAE;YAAE,IAAI,EAAE,IAAI,CAAA;SAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC;KACrF;CACF,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,SAAS,YAAY,EAC1D,OAAO,EAAE,kBAAkB,CAAC,GAAG,CAAC,EAChC,YAAY,EAAE,eAAe,CAAC,GAAG,CAAC,IAE1B,IAAI,SAAS,GAAG,CAAC,MAAM,CAAC,EAAE,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC,QAAQ,CAAC,EACrF,MAAM,IAAI,EACV,QAAQ,MAAM,EACd,OAAO,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,EAClC,OAAO,qBAAqB,CAAC,OAAO,KAAK,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KACvE,KAAK,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAe5B"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { SvelteMap } from 'svelte/reactivity';
|
|
2
|
+
import { Requestor, Query } from './query.svelte.js';
|
|
3
|
+
import { Cache } from './cache.svelte.js';
|
|
4
|
+
import { batchQueryKey, cacheKey } from './utils.svelte.js';
|
|
5
|
+
// ---------------- Global state ----------------
|
|
6
|
+
// Map of path_method to the corresponding batch query instance
|
|
7
|
+
const requestors = new SvelteMap();
|
|
8
|
+
// Map of path_method_input to the corresponding query instance
|
|
9
|
+
const queries = new SvelteMap();
|
|
10
|
+
const cache = new Cache();
|
|
11
|
+
/**
|
|
12
|
+
* Helper function to use once so that creating queries is easier.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* export const createQuery = createQueryFunction<YourApiEndpoints>(yourApiRequest);
|
|
16
|
+
*
|
|
17
|
+
*/
|
|
18
|
+
export function createQueryFunction(request, batchDetails) {
|
|
19
|
+
return (path, method, input, opts) => {
|
|
20
|
+
const queryKey = cacheKey(path, method, input);
|
|
21
|
+
if (!queries.has(queryKey)) {
|
|
22
|
+
const key = batchQueryKey(path, method);
|
|
23
|
+
if (!requestors.has(key)) {
|
|
24
|
+
requestors.set(key, new Requestor(path, method, request, cache, batchDetails[path]?.[method]));
|
|
25
|
+
}
|
|
26
|
+
const requestor = requestors.get(key);
|
|
27
|
+
queries.set(queryKey, new Query({ path, method, input, requestor, cache, opts }));
|
|
28
|
+
}
|
|
29
|
+
const query = queries.get(queryKey);
|
|
30
|
+
return query;
|
|
31
|
+
};
|
|
32
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/api/query/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAElC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import type { ApiEndpoints, ApiInput, ApiRequestFunction, ApiSuccessBody, ApiErrorBody, ApiResponse } from 'ts-ag';
|
|
2
|
+
import type { Cache } from './cache.svelte';
|
|
3
|
+
import type { BatchDetails } from './entrypoint.svelte';
|
|
4
|
+
export type QueryStatus = 'idle' | 'loading' | 'success' | 'error';
|
|
5
|
+
export declare class Query<API extends ApiEndpoints, Path extends API['path'], Method extends Extract<API, {
|
|
6
|
+
path: Path;
|
|
7
|
+
}>['method']> {
|
|
8
|
+
#private;
|
|
9
|
+
constructor({ path, method, input, requestor, cache }: {
|
|
10
|
+
path: Path;
|
|
11
|
+
method: Method;
|
|
12
|
+
input: ApiInput<API, Path, Method>;
|
|
13
|
+
requestor: Requestor<API, Path, Method>;
|
|
14
|
+
cache: Cache;
|
|
15
|
+
opts?: {
|
|
16
|
+
cache?: Parameters<Cache['register']>[1];
|
|
17
|
+
};
|
|
18
|
+
});
|
|
19
|
+
request(): Promise<ApiResponse<API, Path, Method>>;
|
|
20
|
+
get cacheKey(): string;
|
|
21
|
+
get isCached(): boolean;
|
|
22
|
+
resetCache(): void;
|
|
23
|
+
get status(): QueryStatus;
|
|
24
|
+
get data(): ApiSuccessBody<API, Path, Method> | null;
|
|
25
|
+
get errorData(): ApiErrorBody<API, Path, Method> | null;
|
|
26
|
+
}
|
|
27
|
+
export declare class Requestor<API extends ApiEndpoints, Path extends API['path'], Method extends Extract<API, {
|
|
28
|
+
path: Path;
|
|
29
|
+
}>['method']> {
|
|
30
|
+
#private;
|
|
31
|
+
constructor(path: Path, method: Method, request: ApiRequestFunction<API>, cache: Cache, batchDetails?: BatchDetails<API, Path, Method>);
|
|
32
|
+
private fetch;
|
|
33
|
+
/**
|
|
34
|
+
* Empties the batch queue for the id by combining the inputs.
|
|
35
|
+
* Then it separates the outputs and resolves each of the promises
|
|
36
|
+
*/
|
|
37
|
+
private flushBatchQueue;
|
|
38
|
+
request(input: ApiInput<API, Path, Method>): Promise<ApiResponse<API, Path, Method>>;
|
|
39
|
+
}
|
|
40
|
+
//# sourceMappingURL=query.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"query.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/api/query/query.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,kBAAkB,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAInH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAK5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAExD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE,qBAAa,KAAK,CAChB,GAAG,SAAS,YAAY,EACxB,IAAI,SAAS,GAAG,CAAC,MAAM,CAAC,EACxB,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC,QAAQ,CAAC;;gBAyBzC,EACV,IAAI,EACJ,MAAM,EACN,KAAK,EACL,SAAS,EACT,KAAK,EACN,EAAE;QACD,IAAI,EAAE,IAAI,CAAC;QACX,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;QACnC,SAAS,EAAE,SAAS,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;QACxC,KAAK,EAAE,KAAK,CAAC;QACb,IAAI,CAAC,EAAE;YACL,KAAK,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC1C,CAAC;KACH;IAgBK,OAAO,IAAI,OAAO,CAAC,WAAW,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;IA+BxD,IAAI,QAAQ,WAEX;IACD,IAAI,QAAQ,YAEX;IACD,UAAU;IAMV,IAAI,MAAM,gBAET;IACD,IAAI,IAAI,IAAI,cAAc,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,IAAI,CAEnD;IACD,IAAI,SAAS,IAAI,YAAY,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,IAAI,CAEtD;CACF;AAED,qBAAa,SAAS,CACpB,GAAG,SAAS,YAAY,EACxB,IAAI,SAAS,GAAG,CAAC,MAAM,CAAC,EACxB,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC,QAAQ,CAAC;;gBA6BnD,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,kBAAkB,CAAC,GAAG,CAAC,EAChC,KAAK,EAAE,KAAK,EACZ,YAAY,CAAC,EAAE,YAAY,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC;YAkBlC,KAAK;IAOnB;;;OAGG;YACW,eAAe;IAqBvB,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;CAkB3F"}
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
import { stringify } from 'devalue';
|
|
2
|
+
import Bottleneck from 'bottleneck';
|
|
3
|
+
import * as env from '$env/static/public';
|
|
4
|
+
import { sleep } from 'radash';
|
|
5
|
+
import { cacheKey } from './utils.svelte.js';
|
|
6
|
+
export class Query {
|
|
7
|
+
// -------- Constants --------
|
|
8
|
+
#TIMEOUT = 1000 * 60 * 5; // 5 minutes
|
|
9
|
+
// -------- Set in constructor --------
|
|
10
|
+
#path;
|
|
11
|
+
#method;
|
|
12
|
+
#input;
|
|
13
|
+
#inputString;
|
|
14
|
+
#cacheKey;
|
|
15
|
+
#requestor;
|
|
16
|
+
#cache;
|
|
17
|
+
// -------- State --------
|
|
18
|
+
// Requesting state
|
|
19
|
+
#pendingRequest = null;
|
|
20
|
+
// Response state
|
|
21
|
+
#status = $state('idle');
|
|
22
|
+
#data = $state(null);
|
|
23
|
+
#errorData = $state(null);
|
|
24
|
+
// -------- Functions --------
|
|
25
|
+
constructor({ path, method, input, requestor, cache }) {
|
|
26
|
+
this.#requestor = requestor;
|
|
27
|
+
this.#cache = cache;
|
|
28
|
+
this.#path = path;
|
|
29
|
+
this.#method = method;
|
|
30
|
+
// if (this.#cachekey) this.#cache.deregister(this.#cachekey);
|
|
31
|
+
this.#input = input;
|
|
32
|
+
this.#inputString = stringify(input);
|
|
33
|
+
this.#cacheKey = cacheKey(path, method, input);
|
|
34
|
+
this.#cache.register(this.#cacheKey, { timeout: this.#TIMEOUT });
|
|
35
|
+
}
|
|
36
|
+
async request() {
|
|
37
|
+
const cachedValue = this.#cache.get(this.#cacheKey);
|
|
38
|
+
if (cachedValue !== null) {
|
|
39
|
+
return cachedValue;
|
|
40
|
+
}
|
|
41
|
+
this.#status = 'loading';
|
|
42
|
+
if (this.#pendingRequest === null) {
|
|
43
|
+
this.#pendingRequest = this.#requestor.request(this.#input);
|
|
44
|
+
}
|
|
45
|
+
const res = await this.#pendingRequest;
|
|
46
|
+
this.#pendingRequest = null;
|
|
47
|
+
this.#cache.set(this.#cacheKey, res);
|
|
48
|
+
if (res.ok === false) {
|
|
49
|
+
const body = await res.json();
|
|
50
|
+
this.#status = 'error';
|
|
51
|
+
// @ts-expect-error Generics not working for some reason
|
|
52
|
+
this.#errorData = body;
|
|
53
|
+
return res;
|
|
54
|
+
}
|
|
55
|
+
else {
|
|
56
|
+
const body = await res.json();
|
|
57
|
+
this.#status = 'success';
|
|
58
|
+
this.#data = body;
|
|
59
|
+
return res;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
get cacheKey() {
|
|
63
|
+
return this.#cacheKey;
|
|
64
|
+
}
|
|
65
|
+
get isCached() {
|
|
66
|
+
return this.#cache.has(this.#cacheKey);
|
|
67
|
+
}
|
|
68
|
+
resetCache() {
|
|
69
|
+
if (this.isCached) {
|
|
70
|
+
this.#cache.reset(this.#cacheKey);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
get status() {
|
|
74
|
+
return this.#status;
|
|
75
|
+
}
|
|
76
|
+
get data() {
|
|
77
|
+
return this.#data;
|
|
78
|
+
}
|
|
79
|
+
get errorData() {
|
|
80
|
+
return this.#errorData;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
export class Requestor {
|
|
84
|
+
// -------- Constants --------
|
|
85
|
+
#batchDelay = 100;
|
|
86
|
+
// -------- Set in constructor --------
|
|
87
|
+
#path;
|
|
88
|
+
#method;
|
|
89
|
+
#request;
|
|
90
|
+
#canBatch;
|
|
91
|
+
#batchInput;
|
|
92
|
+
#unBatchOutput;
|
|
93
|
+
#limiter;
|
|
94
|
+
#cache;
|
|
95
|
+
// -------- State --------
|
|
96
|
+
#batchQueue = {};
|
|
97
|
+
#batchTimers = {};
|
|
98
|
+
constructor(path, method, request, cache, batchDetails) {
|
|
99
|
+
this.#path = path;
|
|
100
|
+
this.#method = method;
|
|
101
|
+
this.#request = request;
|
|
102
|
+
this.#limiter = new Bottleneck({
|
|
103
|
+
maxConcurrent: 5,
|
|
104
|
+
minTime: 100
|
|
105
|
+
});
|
|
106
|
+
this.#cache = cache;
|
|
107
|
+
// TODO
|
|
108
|
+
this.#canBatch = batchDetails ? batchDetails.canBatch : () => false;
|
|
109
|
+
this.#batchInput = batchDetails ? batchDetails.batchInput : (inputs) => inputs;
|
|
110
|
+
this.#unBatchOutput = batchDetails ? batchDetails.unBatchOutput : (inputs, output) => [output];
|
|
111
|
+
}
|
|
112
|
+
// Makes the actual call to the api
|
|
113
|
+
async fetch(input) {
|
|
114
|
+
if ('PUBLIC_ENVIRONMENT' in env && env.PUBLIC_ENVIRONMENT === 'development') {
|
|
115
|
+
await sleep(1000);
|
|
116
|
+
}
|
|
117
|
+
return await this.#limiter.schedule(() => this.#request(this.#path, this.#method, input));
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* Empties the batch queue for the id by combining the inputs.
|
|
121
|
+
* Then it separates the outputs and resolves each of the promises
|
|
122
|
+
*/
|
|
123
|
+
async flushBatchQueue(batchId) {
|
|
124
|
+
const queue = this.#batchQueue[batchId].splice(0);
|
|
125
|
+
const batchedInput = this.#batchInput(queue.map((q) => q.input));
|
|
126
|
+
const res = await this.fetch(batchedInput);
|
|
127
|
+
const output = await this.#unBatchOutput(queue.map((q) => q.input), res);
|
|
128
|
+
queue.forEach(({ resolve, reject }, i) => {
|
|
129
|
+
if (output[i].ok === true) {
|
|
130
|
+
resolve(output[i]);
|
|
131
|
+
}
|
|
132
|
+
else {
|
|
133
|
+
reject(output[i]);
|
|
134
|
+
}
|
|
135
|
+
});
|
|
136
|
+
}
|
|
137
|
+
// Performs a request for a given input. Batches it if possible
|
|
138
|
+
async request(input) {
|
|
139
|
+
const batchId = this.#canBatch(input);
|
|
140
|
+
if (batchId !== false) {
|
|
141
|
+
return new Promise((resolve, reject) => {
|
|
142
|
+
if (!this.#batchQueue[batchId])
|
|
143
|
+
this.#batchQueue[batchId] = [];
|
|
144
|
+
this.#batchQueue[batchId].push({ input, resolve, reject });
|
|
145
|
+
if (!this.#batchTimers[batchId]) {
|
|
146
|
+
this.#batchTimers[batchId] = setTimeout(() => {
|
|
147
|
+
this.flushBatchQueue(batchId);
|
|
148
|
+
delete this.#batchTimers[batchId];
|
|
149
|
+
}, this.#batchDelay);
|
|
150
|
+
}
|
|
151
|
+
});
|
|
152
|
+
}
|
|
153
|
+
else {
|
|
154
|
+
return await this.fetch(input);
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/api/query/utils.svelte.ts"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAEzD;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,UAEhE"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import type { UseFloatingOptions, UseFloatingReturn } from
|
|
1
|
+
import type { UseFloatingOptions, UseFloatingReturn } from './types.js';
|
|
2
2
|
export declare function useFloating(options: UseFloatingOptions): UseFloatingReturn;
|
|
3
3
|
//# sourceMappingURL=use-floating.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-floating.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/bits/internal/floating-svelte/use-floating.svelte.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAGxE,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,iBAAiB,
|
|
1
|
+
{"version":3,"file":"use-floating.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/bits/internal/floating-svelte/use-floating.svelte.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAGxE,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,iBAAiB,CA6H1E"}
|
|
@@ -1,28 +1,30 @@
|
|
|
1
|
-
import { computePosition } from
|
|
2
|
-
import { box } from
|
|
3
|
-
import { get, getDPR, roundByDPR } from
|
|
1
|
+
import { computePosition } from '@floating-ui/dom';
|
|
2
|
+
import { box } from 'svelte-toolbelt';
|
|
3
|
+
import { get, getDPR, roundByDPR } from './floating-utils.svelte.js';
|
|
4
4
|
export function useFloating(options) {
|
|
5
5
|
/** Options */
|
|
6
6
|
const whileElementsMountedOption = options.whileElementsMounted;
|
|
7
7
|
const openOption = $derived(get(options.open) ?? true);
|
|
8
8
|
const middlewareOption = $derived(get(options.middleware));
|
|
9
9
|
const transformOption = $derived(get(options.transform) ?? true);
|
|
10
|
-
const placementOption = $derived(get(options.placement) ??
|
|
11
|
-
const strategyOption = $derived(get(options.strategy) ??
|
|
10
|
+
const placementOption = $derived(get(options.placement) ?? 'bottom');
|
|
11
|
+
const strategyOption = $derived(get(options.strategy) ?? 'absolute');
|
|
12
12
|
const reference = options.reference;
|
|
13
13
|
/** State */
|
|
14
14
|
let x = $state(0);
|
|
15
15
|
let y = $state(0);
|
|
16
16
|
const floating = box(null);
|
|
17
|
+
// svelte-ignore state_referenced_locally
|
|
17
18
|
let strategy = $state(strategyOption);
|
|
19
|
+
// svelte-ignore state_referenced_locally
|
|
18
20
|
let placement = $state(placementOption);
|
|
19
21
|
let middlewareData = $state({});
|
|
20
22
|
let isPositioned = $state(false);
|
|
21
23
|
const floatingStyles = $derived.by(() => {
|
|
22
24
|
const initialStyles = {
|
|
23
25
|
position: strategy,
|
|
24
|
-
left:
|
|
25
|
-
top:
|
|
26
|
+
left: '0',
|
|
27
|
+
top: '0'
|
|
26
28
|
};
|
|
27
29
|
if (!floating.current) {
|
|
28
30
|
return initialStyles;
|
|
@@ -34,14 +36,14 @@ export function useFloating(options) {
|
|
|
34
36
|
...initialStyles,
|
|
35
37
|
transform: `translate(${xVal}px, ${yVal}px)`,
|
|
36
38
|
...(getDPR(floating.current) >= 1.5 && {
|
|
37
|
-
willChange:
|
|
38
|
-
})
|
|
39
|
+
willChange: 'transform'
|
|
40
|
+
})
|
|
39
41
|
};
|
|
40
42
|
}
|
|
41
43
|
return {
|
|
42
44
|
position: strategy,
|
|
43
45
|
left: `${xVal}px`,
|
|
44
|
-
top: `${yVal}px
|
|
46
|
+
top: `${yVal}px`
|
|
45
47
|
};
|
|
46
48
|
});
|
|
47
49
|
/** Effects */
|
|
@@ -52,7 +54,7 @@ export function useFloating(options) {
|
|
|
52
54
|
computePosition(reference.current, floating.current, {
|
|
53
55
|
middleware: middlewareOption,
|
|
54
56
|
placement: placementOption,
|
|
55
|
-
strategy: strategyOption
|
|
57
|
+
strategy: strategyOption
|
|
56
58
|
}).then((position) => {
|
|
57
59
|
x = position.x;
|
|
58
60
|
y = position.y;
|
|
@@ -63,7 +65,7 @@ export function useFloating(options) {
|
|
|
63
65
|
});
|
|
64
66
|
}
|
|
65
67
|
function cleanup() {
|
|
66
|
-
if (typeof whileElementsMountedCleanup ===
|
|
68
|
+
if (typeof whileElementsMountedCleanup === 'function') {
|
|
67
69
|
whileElementsMountedCleanup();
|
|
68
70
|
whileElementsMountedCleanup = undefined;
|
|
69
71
|
}
|
|
@@ -107,6 +109,6 @@ export function useFloating(options) {
|
|
|
107
109
|
},
|
|
108
110
|
get update() {
|
|
109
111
|
return update;
|
|
110
|
-
}
|
|
112
|
+
}
|
|
111
113
|
};
|
|
112
114
|
}
|
|
@@ -6,14 +6,18 @@
|
|
|
6
6
|
variants: {
|
|
7
7
|
animation: {
|
|
8
8
|
flyAndScale: `
|
|
9
|
-
data-[state="visible"]:animate-in data-[state="visible"]:fade-in-0
|
|
9
|
+
data-[state="visible"]:animate-in data-[state="visible"]:fade-in-0
|
|
10
|
+
data-[state="visible"]:zoom-in-95
|
|
10
11
|
data-[state="visible"]:slide-in-from-bottom-[10%]
|
|
11
|
-
data-[state="hidden"]:animate-out data-[state="hidden"]:fade-out-0
|
|
12
|
+
data-[state="hidden"]:animate-out data-[state="hidden"]:fade-out-0
|
|
13
|
+
data-[state="hidden"]:zoom-out-95
|
|
12
14
|
data-[state="hidden"]:slide-out-to-bottom-[10%]
|
|
13
15
|
`,
|
|
14
16
|
slide: `
|
|
15
|
-
data-[state="visible"]:animate-in
|
|
16
|
-
data-[state="
|
|
17
|
+
data-[state="visible"]:animate-in
|
|
18
|
+
data-[state="visible"]:slide-in-from-right
|
|
19
|
+
data-[state="hidden"]:animate-out
|
|
20
|
+
data-[state="hidden"]:slide-out-to-right
|
|
17
21
|
`,
|
|
18
22
|
fade: `
|
|
19
23
|
data-[state="visible"]:animate-in data-[state="visible"]:fade-in
|
|
@@ -24,12 +28,16 @@
|
|
|
24
28
|
data-[state="hidden"]:animate-out data-[state="hidden"]:zoom-out-95
|
|
25
29
|
`,
|
|
26
30
|
slideUp: `
|
|
27
|
-
data-[state="visible"]:animate-in
|
|
28
|
-
data-[state="
|
|
31
|
+
data-[state="visible"]:animate-in
|
|
32
|
+
data-[state="visible"]:slide-in-from-bottom
|
|
33
|
+
data-[state="hidden"]:animate-out
|
|
34
|
+
data-[state="hidden"]:slide-out-to-bottom
|
|
29
35
|
`,
|
|
30
36
|
slideDown: `
|
|
31
|
-
data-[state="visible"]:animate-in
|
|
32
|
-
data-[state="
|
|
37
|
+
data-[state="visible"]:animate-in
|
|
38
|
+
data-[state="visible"]:slide-in-from-top
|
|
39
|
+
data-[state="hidden"]:animate-out
|
|
40
|
+
data-[state="hidden"]:slide-out-to-top
|
|
33
41
|
`,
|
|
34
42
|
growHeight: `overflow-hidden`
|
|
35
43
|
},
|
|
@@ -87,9 +95,11 @@
|
|
|
87
95
|
// Reset animation state when visibility changes
|
|
88
96
|
watch(
|
|
89
97
|
() => visible,
|
|
90
|
-
() => {
|
|
91
|
-
|
|
92
|
-
|
|
98
|
+
(newValue, oldValue) => {
|
|
99
|
+
if (newValue !== oldValue) {
|
|
100
|
+
isInitialRender = false;
|
|
101
|
+
animationComplete = false;
|
|
102
|
+
}
|
|
93
103
|
},
|
|
94
104
|
// Dont run on mount
|
|
95
105
|
{ lazy: true }
|
|
@@ -195,8 +205,8 @@
|
|
|
195
205
|
|
|
196
206
|
watch(
|
|
197
207
|
() => visible,
|
|
198
|
-
() => {
|
|
199
|
-
if (animation === 'growHeight') {
|
|
208
|
+
(newValue, oldValue) => {
|
|
209
|
+
if (animation === 'growHeight' && newValue !== oldValue) {
|
|
200
210
|
animateHeight();
|
|
201
211
|
}
|
|
202
212
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animated.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/animated/animated.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"animated.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/animated/animated.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yDAmD3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAGvE,OAAO,EAAM,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAKpD,MAAM,MAAM,KAAK,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACtD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,mBAAmB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA4KJ,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
|
|
@@ -1,25 +1,27 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
+
import { cn } from '../../utils/utils';
|
|
3
|
+
/**
|
|
4
|
+
* This is a component for a droppable region.
|
|
5
|
+
* Rendering of the region and anything that is dropped in it is done separately to this
|
|
6
|
+
*/
|
|
2
7
|
import { useDroppable, type UseDroppableArguments } from '@dnd-kit-svelte/core';
|
|
3
8
|
import type { ClassValue } from 'clsx';
|
|
4
9
|
import type { Snippet } from 'svelte';
|
|
5
10
|
|
|
6
|
-
// This may come in handy for when sorting needs to be done manually
|
|
7
|
-
// in a situation where i might want to sort the items myself based on another
|
|
8
|
-
// method but still want to be able to drag items between regions?
|
|
9
|
-
|
|
10
11
|
interface DroppableProps extends UseDroppableArguments {
|
|
11
|
-
|
|
12
|
+
child?: Snippet<[{ isOver: boolean }]>;
|
|
12
13
|
class?: ClassValue;
|
|
13
14
|
}
|
|
14
15
|
|
|
15
|
-
let {
|
|
16
|
+
let { child, class: className, ...rest }: DroppableProps = $props();
|
|
16
17
|
|
|
17
|
-
const
|
|
18
|
+
const { node, isOver } = useDroppable(rest);
|
|
18
19
|
</script>
|
|
19
20
|
|
|
20
|
-
<div class={
|
|
21
|
-
{@render
|
|
21
|
+
<div class={cn(className, '')} bind:this={node.current}>
|
|
22
|
+
{@render child?.({ isOver: isOver.current })}
|
|
22
23
|
</div>
|
|
23
24
|
|
|
25
|
+
<!-- Example -->
|
|
24
26
|
<!-- <Droppable id="container" data={{ accepts: ['container'] }}> -->
|
|
25
27
|
<!-- </Droppable> -->
|
|
@@ -1,8 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This is a component for a droppable region.
|
|
3
|
+
* Rendering of the region and anything that is dropped in it is done separately to this
|
|
4
|
+
*/
|
|
1
5
|
import { type UseDroppableArguments } from '@dnd-kit-svelte/core';
|
|
2
6
|
import type { ClassValue } from 'clsx';
|
|
3
7
|
import type { Snippet } from 'svelte';
|
|
4
8
|
interface DroppableProps extends UseDroppableArguments {
|
|
5
|
-
|
|
9
|
+
child?: Snippet<[{
|
|
10
|
+
isOver: boolean;
|
|
11
|
+
}]>;
|
|
6
12
|
class?: ClassValue;
|
|
7
13
|
}
|
|
8
14
|
declare const Droppable: import("svelte").Component<DroppableProps, {}, "">;
|