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.
Files changed (133) hide show
  1. package/dist/lib/api/form.svelte.d.ts +5 -3
  2. package/dist/lib/api/form.svelte.d.ts.map +1 -1
  3. package/dist/lib/api/form.svelte.js +0 -1
  4. package/dist/lib/api/index.d.ts +1 -1
  5. package/dist/lib/api/index.d.ts.map +1 -1
  6. package/dist/lib/api/index.js +1 -1
  7. package/dist/lib/api/query/cache.svelte.d.ts +13 -0
  8. package/dist/lib/api/query/cache.svelte.d.ts.map +1 -0
  9. package/dist/lib/api/query/cache.svelte.js +48 -0
  10. package/dist/lib/api/query/entrypoint.svelte.d.ts +27 -0
  11. package/dist/lib/api/query/entrypoint.svelte.d.ts.map +1 -0
  12. package/dist/lib/api/query/entrypoint.svelte.js +32 -0
  13. package/dist/lib/api/query/index.d.ts +5 -0
  14. package/dist/lib/api/query/index.d.ts.map +1 -0
  15. package/dist/lib/api/query/index.js +4 -0
  16. package/dist/lib/api/query/query.svelte.d.ts +40 -0
  17. package/dist/lib/api/query/query.svelte.d.ts.map +1 -0
  18. package/dist/lib/api/query/query.svelte.js +157 -0
  19. package/dist/lib/api/query/utils.svelte.d.ts +3 -0
  20. package/dist/lib/api/query/utils.svelte.d.ts.map +1 -0
  21. package/dist/lib/api/query/utils.svelte.js +7 -0
  22. package/dist/lib/bits/internal/floating-svelte/use-floating.svelte.d.ts +1 -1
  23. package/dist/lib/bits/internal/floating-svelte/use-floating.svelte.d.ts.map +1 -1
  24. package/dist/lib/bits/internal/floating-svelte/use-floating.svelte.js +15 -13
  25. package/dist/lib/components/animated/animated.svelte +23 -13
  26. package/dist/lib/components/animated/animated.svelte.d.ts.map +1 -1
  27. package/dist/lib/components/dnd/Droppable.svelte +11 -9
  28. package/dist/lib/components/dnd/Droppable.svelte.d.ts +7 -1
  29. package/dist/lib/components/dnd/Droppable.svelte.d.ts.map +1 -1
  30. package/dist/lib/components/dnd/default.svelte.d.ts +14 -0
  31. package/dist/lib/components/dnd/default.svelte.d.ts.map +1 -0
  32. package/dist/lib/components/dnd/default.svelte.js +18 -0
  33. package/dist/lib/components/dnd/dnd-context.svelte +11 -21
  34. package/dist/lib/components/dnd/dnd-context.svelte.d.ts +17 -12
  35. package/dist/lib/components/dnd/dnd-context.svelte.d.ts.map +1 -1
  36. package/dist/lib/components/dnd/dnd-drag-overlay.svelte +1 -1
  37. package/dist/lib/components/dnd/dnd-drag-placeholder.svelte +1 -9
  38. package/dist/lib/components/dnd/dnd-drag-placeholder.svelte.d.ts.map +1 -1
  39. package/dist/lib/components/dnd/dnd-draghandle.svelte +21 -10
  40. package/dist/lib/components/dnd/dnd-draghandle.svelte.d.ts.map +1 -1
  41. package/dist/lib/components/dnd/dnd-item.svelte +84 -0
  42. package/dist/lib/components/dnd/dnd-item.svelte.d.ts +27 -0
  43. package/dist/lib/components/dnd/dnd-item.svelte.d.ts.map +1 -0
  44. package/dist/lib/components/dnd/dnd-sortable-context.svelte +18 -4
  45. package/dist/lib/components/dnd/dnd-sortable-context.svelte.d.ts +5 -1
  46. package/dist/lib/components/dnd/dnd-sortable-context.svelte.d.ts.map +1 -1
  47. package/dist/lib/components/dnd/dnd-sortable-item.svelte +31 -9
  48. package/dist/lib/components/dnd/dnd-sortable-item.svelte.d.ts +5 -2
  49. package/dist/lib/components/dnd/dnd-sortable-item.svelte.d.ts.map +1 -1
  50. package/dist/lib/components/dnd/example.svelte +7 -1
  51. package/dist/lib/components/dnd/example.svelte.d.ts.map +1 -1
  52. package/dist/lib/components/dnd/exports.d.ts +7 -2
  53. package/dist/lib/components/dnd/exports.d.ts.map +1 -1
  54. package/dist/lib/components/dnd/exports.js +7 -2
  55. package/dist/lib/components/dnd/sortable.svelte.d.ts +8 -8
  56. package/dist/lib/components/dnd/sortable.svelte.d.ts.map +1 -1
  57. package/dist/lib/components/dnd/sortable.svelte.js +33 -21
  58. package/dist/lib/components/dnd/types.d.ts +15 -0
  59. package/dist/lib/components/dnd/types.d.ts.map +1 -0
  60. package/dist/lib/components/dnd/types.js +1 -0
  61. package/dist/lib/components/dnd/utils.svelte.d.ts +7 -6
  62. package/dist/lib/components/dnd/utils.svelte.d.ts.map +1 -1
  63. package/dist/lib/components/dnd/utils.svelte.js +4 -3
  64. package/dist/lib/components/form/form-description.svelte +12 -11
  65. package/dist/lib/components/form/form-description.svelte.d.ts +2 -2
  66. package/dist/lib/components/form/form-description.svelte.d.ts.map +1 -1
  67. package/dist/lib/components/form/form-field-full.svelte +41 -0
  68. package/dist/lib/components/form/form-field-full.svelte.d.ts +26 -0
  69. package/dist/lib/components/form/form-field-full.svelte.d.ts.map +1 -0
  70. package/dist/lib/components/form/form-field.svelte +18 -23
  71. package/dist/lib/components/form/form-field.svelte.d.ts +5 -2
  72. package/dist/lib/components/form/form-field.svelte.d.ts.map +1 -1
  73. package/dist/lib/components/form/index.d.ts +2 -1
  74. package/dist/lib/components/form/index.d.ts.map +1 -1
  75. package/dist/lib/components/form/index.js +3 -2
  76. package/dist/lib/components/gallery/gallery.svelte +1 -1
  77. package/dist/lib/components/search/combinations/searchPopover.svelte +4 -1
  78. package/dist/lib/components/search/combinations/searchPopover.svelte.d.ts +1 -1
  79. package/dist/lib/components/search/combinations/searchPopover.svelte.d.ts.map +1 -1
  80. package/dist/lib/components/search/search.svelte.d.ts.map +1 -1
  81. package/dist/lib/components/search/search.svelte.js +16 -9
  82. package/dist/lib/components/search/types.d.ts +1 -0
  83. package/dist/lib/components/search/types.d.ts.map +1 -1
  84. package/dist/lib/components/sidebar/sidebar-group-label.svelte +31 -26
  85. package/dist/lib/components/sidebar/sidebar-group-label.svelte.d.ts +3 -3
  86. package/dist/lib/components/sidebar/sidebar-group-label.svelte.d.ts.map +1 -1
  87. package/dist/lib/components/sidebar/sidebar-menu-button.svelte +7 -5
  88. package/dist/lib/components/sidebar/sidebar-menu-button.svelte.d.ts.map +1 -1
  89. package/dist/lib/vite/vite-plugin-component-source-collector.d.ts.map +1 -1
  90. package/dist/lib/vite/vite-plugin-component-source-collector.js +28 -18
  91. package/package.json +49 -46
  92. package/src/lib/api/form.svelte.ts +8 -7
  93. package/src/lib/api/index.ts +1 -1
  94. package/src/lib/api/query/cache.svelte.ts +57 -0
  95. package/src/lib/api/query/entrypoint.svelte.ts +67 -0
  96. package/src/lib/api/query/index.ts +5 -0
  97. package/src/lib/api/query/query.svelte.ts +231 -0
  98. package/src/lib/api/query/utils.svelte.ts +9 -0
  99. package/src/lib/bits/internal/floating-svelte/use-floating.svelte.ts +128 -130
  100. package/src/lib/components/animated/animated.svelte +23 -13
  101. package/src/lib/components/dnd/Droppable.svelte +11 -9
  102. package/src/lib/components/dnd/default.svelte.ts +25 -0
  103. package/src/lib/components/dnd/dnd-context.svelte +11 -21
  104. package/src/lib/components/dnd/dnd-drag-overlay.svelte +1 -1
  105. package/src/lib/components/dnd/dnd-drag-placeholder.svelte +1 -9
  106. package/src/lib/components/dnd/dnd-draghandle.svelte +21 -10
  107. package/src/lib/components/dnd/dnd-item.svelte +84 -0
  108. package/src/lib/components/dnd/dnd-sortable-context.svelte +18 -4
  109. package/src/lib/components/dnd/dnd-sortable-item.svelte +31 -9
  110. package/src/lib/components/dnd/example.svelte +7 -1
  111. package/src/lib/components/dnd/exports.ts +7 -2
  112. package/src/lib/components/dnd/sortable.svelte.ts +37 -25
  113. package/src/lib/components/dnd/types.ts +7 -0
  114. package/src/lib/components/dnd/utils.svelte.ts +13 -7
  115. package/src/lib/components/form/form-description.svelte +12 -11
  116. package/src/lib/components/form/form-field-full.svelte +41 -0
  117. package/src/lib/components/form/form-field.svelte +18 -23
  118. package/src/lib/components/form/index.ts +3 -0
  119. package/src/lib/components/gallery/gallery.svelte +1 -1
  120. package/src/lib/components/search/combinations/searchPopover.svelte +4 -1
  121. package/src/lib/components/search/search.svelte.ts +17 -7
  122. package/src/lib/components/search/types.ts +3 -0
  123. package/src/lib/components/sidebar/sidebar-group-label.svelte +31 -26
  124. package/src/lib/components/sidebar/sidebar-menu-button.svelte +7 -5
  125. package/src/lib/vite/vite-plugin-component-source-collector.ts +33 -18
  126. package/dist/lib/api/query.svelte.d.ts +0 -21
  127. package/dist/lib/api/query.svelte.d.ts.map +0 -1
  128. package/dist/lib/api/query.svelte.js +0 -47
  129. package/dist/lib/components/dnd/dnd-overlay.svelte +0 -0
  130. package/dist/lib/components/dnd/dnd-overlay.svelte.d.ts +0 -27
  131. package/dist/lib/components/dnd/dnd-overlay.svelte.d.ts.map +0 -1
  132. package/src/lib/api/query.svelte.ts +0 -59
  133. 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<ApiInput<API, Path, Method>>, response: ApiSuccessBody<API, Path, Method>) => void;
8
- onFail?: (form: SuperValidated<ApiInput<API, Path, Method>>, response: ApiErrorBody<API, Path, Method>) => void;
9
- }) => SuperForm<ApiInput<API, Path, Method>>;
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":"AACA,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,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,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,EACjD,QAAQ,EAAE,cAAc,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,KACxC,IAAI,CAAC;IACV,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,YAAY,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;CACjH,KACE,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5C,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"}
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"}
@@ -1,4 +1,3 @@
1
- import { sleep } from 'radash';
2
1
  import { superForm, defaults, setError, setMessage } from 'sveltekit-superforms';
3
2
  import { valibot } from 'sveltekit-superforms/adapters';
4
3
  export function createFormFunction(schemas, request) {
@@ -1,3 +1,3 @@
1
1
  export * from './form.svelte.js';
2
- export * from './query.svelte.js';
2
+ export * from './query/index.js';
3
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/api/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,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"}
@@ -1,2 +1,2 @@
1
1
  export * from './form.svelte.js';
2
- export * from './query.svelte.js';
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,5 @@
1
+ export * from './utils.svelte.js';
2
+ export * from './cache.svelte.js';
3
+ export * from './entrypoint.svelte.js';
4
+ export * from './query.svelte.js';
5
+ //# sourceMappingURL=index.d.ts.map
@@ -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,4 @@
1
+ export * from './utils.svelte.js';
2
+ export * from './cache.svelte.js';
3
+ export * from './entrypoint.svelte.js';
4
+ export * from './query.svelte.js';
@@ -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,3 @@
1
+ export declare function batchQueryKey(path: string, method: string): string;
2
+ export declare function cacheKey(path: string, method: string, input: any): string;
3
+ //# sourceMappingURL=utils.svelte.d.ts.map
@@ -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"}
@@ -0,0 +1,7 @@
1
+ import { stringify } from 'devalue';
2
+ export function batchQueryKey(path, method) {
3
+ return `${path}_${method}`;
4
+ }
5
+ export function cacheKey(path, method, input) {
6
+ return `${path}_${method}_${stringify(input)}`;
7
+ }
@@ -1,3 +1,3 @@
1
- import type { UseFloatingOptions, UseFloatingReturn } from "./types.js";
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,CA+H1E"}
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 "@floating-ui/dom";
2
- import { box } from "svelte-toolbelt";
3
- import { get, getDPR, roundByDPR } from "./floating-utils.svelte.js";
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) ?? "bottom");
11
- const strategyOption = $derived(get(options.strategy) ?? "absolute");
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: "0",
25
- top: "0",
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: "transform",
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 === "function") {
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 data-[state="visible"]:zoom-in-95
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 data-[state="hidden"]:zoom-out-95
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 data-[state="visible"]:slide-in-from-right
16
- data-[state="hidden"]:animate-out data-[state="hidden"]:slide-out-to-right
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 data-[state="visible"]:slide-in-from-bottom
28
- data-[state="hidden"]:animate-out data-[state="hidden"]:slide-out-to-bottom
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 data-[state="visible"]:slide-in-from-top
32
- data-[state="hidden"]:animate-out data-[state="hidden"]:slide-out-to-top
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
- isInitialRender = false;
92
- animationComplete = false;
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yDA2C3B,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;AA0KJ,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
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
- children: Snippet;
12
+ child?: Snippet<[{ isOver: boolean }]>;
12
13
  class?: ClassValue;
13
14
  }
14
15
 
15
- let { children, class: className, ...rest }: DroppableProps = $props();
16
+ let { child, class: className, ...rest }: DroppableProps = $props();
16
17
 
17
- const droppable = useDroppable(rest);
18
+ const { node, isOver } = useDroppable(rest);
18
19
  </script>
19
20
 
20
- <div class={[className]} bind:this={droppable.node.current}>
21
- {@render children()}
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
- children: Snippet;
9
+ child?: Snippet<[{
10
+ isOver: boolean;
11
+ }]>;
6
12
  class?: ClassValue;
7
13
  }
8
14
  declare const Droppable: import("svelte").Component<DroppableProps, {}, "">;