@warkypublic/svelix 0.1.46 → 0.1.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +93 -33
- package/dist/components/BetterMenu/BetterMenu.svelte +21 -37
- package/dist/components/BetterMenu/BetterMenuAsyncButton.svelte +21 -31
- package/dist/components/BetterMenu/BetterMenuPreview.svelte +27 -29
- package/dist/components/BetterMenu/MenuRenderer.svelte +40 -51
- package/dist/components/Boxer/Boxer.svelte +488 -602
- package/dist/components/Boxer/BoxerTarget.svelte +6 -46
- package/dist/components/Boxer/BoxerTarget.svelte.d.ts +1 -0
- package/dist/components/Boxer/types.d.ts +0 -1
- package/dist/components/Button.svelte +19 -43
- package/dist/components/ButtonPreview.svelte +2 -11
- package/dist/components/CardGrid/CardGrid.svelte +443 -614
- package/dist/components/CardGrid/CardGridFilterPanel.svelte +111 -90
- package/dist/components/CardGrid/DefaultCard.svelte +80 -96
- package/dist/components/CardGrid/ImageCardStory.svelte +87 -36
- package/dist/components/ContentEditor/CollaboraInsertTextDemo.svelte +5 -10
- package/dist/components/ContentEditor/ContentEditor.svelte +24 -50
- package/dist/components/ContentEditor/subcomponents/AudioPlayer.svelte +17 -17
- package/dist/components/ContentEditor/subcomponents/CollaboraEditor.svelte +244 -309
- package/dist/components/ContentEditor/subcomponents/EmailViewer.svelte +2 -3
- package/dist/components/ContentEditor/subcomponents/ImageViewer.svelte +14 -15
- package/dist/components/ContentEditor/subcomponents/MarkdownViewer.svelte +74 -90
- package/dist/components/ContentEditor/subcomponents/MonacoEditor.svelte +75 -103
- package/dist/components/ContentEditor/subcomponents/Office365Editor.svelte +234 -297
- package/dist/components/ContentEditor/subcomponents/PdfViewer.svelte +14 -20
- package/dist/components/ContentEditor/subcomponents/TextEditor.svelte +122 -150
- package/dist/components/ContentEditor/subcomponents/UnknownFile.svelte +105 -126
- package/dist/components/ContentEditor/subcomponents/VideoPlayer.svelte +17 -17
- package/dist/components/ContentEditor/subcomponents/ZipViewer.svelte +2 -3
- package/dist/components/ErrorBoundary/ErrorBoundary.svelte +41 -58
- package/dist/components/ErrorBoundary/ErrorBoundaryPreview.svelte +8 -16
- package/dist/components/Former/Former.svelte +306 -424
- package/dist/components/Former/FormerButtonArea.svelte +17 -68
- package/dist/components/Former/FormerDrawer.svelte +26 -78
- package/dist/components/Former/FormerDrawerPreview.svelte +99 -89
- package/dist/components/Former/FormerModal.svelte +24 -70
- package/dist/components/Former/FormerModalPreview.svelte +99 -89
- package/dist/components/Former/FormerPreview.svelte +76 -78
- package/dist/components/Former/FormerRestApiPreview.svelte +55 -48
- package/dist/components/FormerControllers/ButtonCtrl.svelte +13 -44
- package/dist/components/FormerControllers/DateTimeCtrl/DateTimeCtrl.svelte +280 -445
- package/dist/components/FormerControllers/DateTimeCtrl/DateTimeCtrlCalendar.svelte +95 -136
- package/dist/components/FormerControllers/DateTimeCtrl/DateTimeCtrlPickerPanel.svelte +3 -62
- package/dist/components/FormerControllers/DateTimeCtrl/DateTimeCtrlTimeFields.svelte +143 -217
- package/dist/components/FormerControllers/IconButtonCtrl.svelte +13 -42
- package/dist/components/FormerControllers/InlineWrapper.svelte +12 -41
- package/dist/components/FormerControllers/InlineWrapperPreview.svelte +4 -26
- package/dist/components/FormerControllers/NativeSelectCtrl.svelte +3 -29
- package/dist/components/FormerControllers/NumberInputCtrl.svelte +9 -35
- package/dist/components/FormerControllers/PasswordInputCtrl.svelte +4 -23
- package/dist/components/FormerControllers/SwitchCtrl.svelte +3 -20
- package/dist/components/FormerControllers/TextAreaCtrl.svelte +3 -24
- package/dist/components/FormerControllers/TextInputCtrl.svelte +3 -24
- package/dist/components/GlobalStateStore/GlobalStateStoreProvider.svelte +73 -120
- package/dist/components/Gridler/components/Gridler.svelte +338 -442
- package/dist/components/Gridler/components/GridlerCanvas.svelte +720 -1115
- package/dist/components/Gridler/components/GridlerEditor.svelte +2 -15
- package/dist/components/Gridler/components/GridlerFull.svelte +520 -841
- package/dist/components/Gridler/components/GridlerFull.svelte.d.ts +1 -1
- package/dist/components/Gridler/components/GridlerFullWithFormerPreview.svelte +194 -147
- package/dist/components/Gridler/components/GridlerSearch.svelte +7 -16
- package/dist/components/Gridler/components/GridlerSearchToggle.svelte +7 -19
- package/dist/components/Gridler/types.d.ts +1 -1
- package/dist/components/Icons/IconAdd.svelte +1 -3
- package/dist/components/Icons/IconAlertCircle.svelte +1 -3
- package/dist/components/Icons/IconAlertTriangle.svelte +1 -3
- package/dist/components/Icons/IconCamera.svelte +1 -3
- package/dist/components/Icons/IconClose.svelte +1 -3
- package/dist/components/Icons/IconEdit.svelte +1 -3
- package/dist/components/Icons/IconFilter.svelte +1 -3
- package/dist/components/Icons/IconSearch.svelte +1 -3
- package/dist/components/Icons/IconSort.svelte +1 -3
- package/dist/components/Icons/IconTrash.svelte +1 -3
- package/dist/components/Portal/Portal.svelte +14 -38
- package/dist/components/Screenshot/Screenshot.svelte +7 -13
- package/dist/components/Svark/Svark.svelte +680 -852
- package/dist/components/Svark/SvarkContextMenu.svelte +44 -63
- package/dist/components/Svark/SvarkInfiniteLoader.svelte +2 -6
- package/dist/components/Svark/SvarkPager.svelte +2 -28
- package/dist/components/Svark/SvarkSelectionDemo.svelte +4 -8
- package/dist/components/Svark/SvarkTopBar.svelte +9 -74
- package/dist/components/SvarkGrid/SvarkGrid.svelte +877 -1123
- package/dist/components/SvarkGrid/components/SvarkColumnFilterForm.svelte +45 -58
- package/dist/components/SvarkGrid/components/SvarkContextMenu.svelte +44 -63
- package/dist/components/SvarkGrid/components/SvarkHeaderFilterCell.svelte +41 -75
- package/dist/components/SvarkGrid/components/SvarkInfiniteLoader.svelte +2 -6
- package/dist/components/SvarkGrid/components/SvarkPager.svelte +2 -28
- package/dist/components/SvarkGrid/components/SvarkSearchPopover.svelte +8 -16
- package/dist/components/SvarkGrid/components/SvarkTopBar.svelte +6 -62
- package/dist/components/SvarkGrid/internal/SvarkGridView.svelte +345 -507
- package/dist/components/VTree/VTree.svelte +349 -431
- package/dist/components/VTree/VTreeContextMenu.svelte +21 -33
- package/dist/components/VTree/VTreeEventsDemo.svelte +48 -58
- package/dist/components/VTree/VTreeRow.svelte +13 -65
- package/dist/components/VTree/VTreeSearch.svelte +6 -13
- package/dist/components/VTree/VTreeVirtualViewport.svelte +37 -106
- package/package.json +30 -29
|
@@ -1,47 +1,18 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
const {
|
|
15
|
-
children,
|
|
16
|
-
disabled,
|
|
17
|
-
loading: externalLoading = false,
|
|
18
|
-
onclick,
|
|
19
|
-
sid,
|
|
20
|
-
tooltip,
|
|
21
|
-
variant = 'ghost',
|
|
22
|
-
}: Props = $props();
|
|
23
|
-
|
|
24
|
-
let internalLoading = $state(false);
|
|
25
|
-
const isLoading = $derived(internalLoading || externalLoading);
|
|
26
|
-
|
|
27
|
-
const variantClass = $derived(
|
|
28
|
-
variant === 'outlined'
|
|
29
|
-
? 'preset-outlined-primary-500'
|
|
30
|
-
: variant === 'filled'
|
|
31
|
-
? 'preset-filled-primary-500'
|
|
32
|
-
: 'preset-tonal-primary'
|
|
33
|
-
);
|
|
34
|
-
|
|
35
|
-
async function handleClick() {
|
|
36
|
-
if (onclick && !isLoading) {
|
|
37
|
-
internalLoading = true;
|
|
38
|
-
try {
|
|
39
|
-
await onclick();
|
|
40
|
-
} finally {
|
|
41
|
-
internalLoading = false;
|
|
42
|
-
}
|
|
1
|
+
<script lang="ts">const { children, disabled, loading: externalLoading = false, onclick, sid, tooltip, variant = "ghost" } = $props();
|
|
2
|
+
let internalLoading = $state(false);
|
|
3
|
+
const isLoading = $derived(internalLoading || externalLoading);
|
|
4
|
+
const variantClass = $derived(variant === "outlined" ? "preset-outlined-primary-500" : variant === "filled" ? "preset-filled-primary-500" : "preset-tonal-primary");
|
|
5
|
+
async function handleClick() {
|
|
6
|
+
if (onclick && !isLoading) {
|
|
7
|
+
internalLoading = true;
|
|
8
|
+
try {
|
|
9
|
+
await onclick();
|
|
10
|
+
} finally {
|
|
11
|
+
internalLoading = false;
|
|
43
12
|
}
|
|
44
13
|
}
|
|
14
|
+
}
|
|
15
|
+
export {};
|
|
45
16
|
</script>
|
|
46
17
|
|
|
47
18
|
<button
|
|
@@ -1,44 +1,15 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
required?: boolean;
|
|
14
|
-
rightSection?: Snippet;
|
|
15
|
-
tooltip?: string;
|
|
16
|
-
value?: unknown;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
const {
|
|
20
|
-
children,
|
|
21
|
-
error,
|
|
22
|
-
label,
|
|
23
|
-
labelWidth = '10rem',
|
|
24
|
-
leftSection,
|
|
25
|
-
promptArea,
|
|
26
|
-
required,
|
|
27
|
-
rightSection,
|
|
28
|
-
tooltip,
|
|
29
|
-
value,
|
|
30
|
-
}: Props = $props();
|
|
31
|
-
|
|
32
|
-
function isValueEmpty(v: unknown): boolean {
|
|
33
|
-
if (v === null || v === undefined) return true;
|
|
34
|
-
if (typeof v === 'number') return false;
|
|
35
|
-
if (typeof v === 'string') return v.trim() === '';
|
|
36
|
-
return false;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
const isEmpty = $derived(isValueEmpty(value));
|
|
40
|
-
const showErrorIcon = $derived(!!error);
|
|
41
|
-
const showWarningIcon = $derived(!error && !!required && isEmpty);
|
|
1
|
+
<script lang="ts">import IconAlertCircle from "../Icons/IconAlertCircle.svelte";
|
|
2
|
+
import IconAlertTriangle from "../Icons/IconAlertTriangle.svelte";
|
|
3
|
+
const { children, error, label, labelWidth = "10rem", leftSection, promptArea, required, rightSection, tooltip, value } = $props();
|
|
4
|
+
function isValueEmpty(v) {
|
|
5
|
+
if (v === null || v === undefined) return true;
|
|
6
|
+
if (typeof v === "number") return false;
|
|
7
|
+
if (typeof v === "string") return v.trim() === "";
|
|
8
|
+
return false;
|
|
9
|
+
}
|
|
10
|
+
const isEmpty = $derived(isValueEmpty(value));
|
|
11
|
+
const showErrorIcon = $derived(!!error);
|
|
12
|
+
const showWarningIcon = $derived(!error && !!required && isEmpty);
|
|
42
13
|
</script>
|
|
43
14
|
|
|
44
15
|
<div class="flex flex-col gap-0" title={tooltip}>
|
|
@@ -1,29 +1,7 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
export interface Props {
|
|
7
|
-
error?: string;
|
|
8
|
-
label?: string;
|
|
9
|
-
labelWidth?: string;
|
|
10
|
-
required?: boolean;
|
|
11
|
-
tooltip?: string;
|
|
12
|
-
value?: string;
|
|
13
|
-
withLeftSection?: boolean;
|
|
14
|
-
withRightSection?: boolean;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
let {
|
|
18
|
-
error,
|
|
19
|
-
label = 'Username',
|
|
20
|
-
labelWidth,
|
|
21
|
-
required,
|
|
22
|
-
tooltip,
|
|
23
|
-
value = $bindable(''),
|
|
24
|
-
withLeftSection = false,
|
|
25
|
-
withRightSection = false,
|
|
26
|
-
}: Props = $props();
|
|
1
|
+
<script lang="ts">import InlineWrapper from "./InlineWrapper.svelte";
|
|
2
|
+
import TextInputCtrl from "./TextInputCtrl.svelte";
|
|
3
|
+
import ButtonCtrl from "./ButtonCtrl.svelte";
|
|
4
|
+
let { error, label = "Username", labelWidth, required, tooltip, value = $bindable(""), withLeftSection = false, withRightSection = false } = $props();
|
|
27
5
|
</script>
|
|
28
6
|
|
|
29
7
|
{#snippet leftSection()}
|
|
@@ -1,32 +1,6 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
interface SelectOption {
|
|
5
|
-
label: string;
|
|
6
|
-
value: string;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export interface Props extends CtrlBaseProps {
|
|
10
|
-
onchange?: (value: string) => void;
|
|
11
|
-
options?: Array<SelectOption | string>;
|
|
12
|
-
value?: string;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
let {
|
|
16
|
-
disabled,
|
|
17
|
-
error,
|
|
18
|
-
label,
|
|
19
|
-
name,
|
|
20
|
-
onchange,
|
|
21
|
-
options = [],
|
|
22
|
-
placeholder,
|
|
23
|
-
required,
|
|
24
|
-
sid,
|
|
25
|
-
tooltip,
|
|
26
|
-
value = $bindable(''),
|
|
27
|
-
}: Props = $props();
|
|
28
|
-
|
|
29
|
-
const id = $derived(`field_${name ?? ''}_${sid ?? ''}`);
|
|
1
|
+
<script lang="ts">let { disabled, error, label, name, onchange, options = [], placeholder, required, sid, tooltip, value = $bindable("") } = $props();
|
|
2
|
+
const id = $derived(`field_${name ?? ""}_${sid ?? ""}`);
|
|
3
|
+
export {};
|
|
30
4
|
</script>
|
|
31
5
|
|
|
32
6
|
<div class="flex flex-col gap-1" title={tooltip}>
|
|
@@ -1,38 +1,12 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
let {
|
|
13
|
-
disabled,
|
|
14
|
-
error,
|
|
15
|
-
label,
|
|
16
|
-
max,
|
|
17
|
-
min,
|
|
18
|
-
name,
|
|
19
|
-
onchange,
|
|
20
|
-
placeholder,
|
|
21
|
-
required,
|
|
22
|
-
sid,
|
|
23
|
-
step,
|
|
24
|
-
tooltip,
|
|
25
|
-
value = $bindable(undefined),
|
|
26
|
-
}: Props = $props();
|
|
27
|
-
|
|
28
|
-
const id = $derived(`field_${name ?? ''}_${sid ?? ''}`);
|
|
29
|
-
|
|
30
|
-
function handleInput(e: Event) {
|
|
31
|
-
const target = e.target as HTMLInputElement;
|
|
32
|
-
const parsed = target.value !== '' ? Number(target.value) : undefined;
|
|
33
|
-
value = parsed;
|
|
34
|
-
onchange?.(parsed);
|
|
35
|
-
}
|
|
1
|
+
<script lang="ts">let { disabled, error, label, max, min, name, onchange, placeholder, required, sid, step, tooltip, value = $bindable(undefined) } = $props();
|
|
2
|
+
const id = $derived(`field_${name ?? ""}_${sid ?? ""}`);
|
|
3
|
+
function handleInput(e) {
|
|
4
|
+
const target = e.target;
|
|
5
|
+
const parsed = target.value !== "" ? Number(target.value) : undefined;
|
|
6
|
+
value = parsed;
|
|
7
|
+
onchange?.(parsed);
|
|
8
|
+
}
|
|
9
|
+
export {};
|
|
36
10
|
</script>
|
|
37
11
|
|
|
38
12
|
<div class="flex flex-col gap-1" title={tooltip}>
|
|
@@ -1,26 +1,7 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
onchange?: (value: string) => void;
|
|
6
|
-
value?: string;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
let {
|
|
10
|
-
disabled,
|
|
11
|
-
error,
|
|
12
|
-
label,
|
|
13
|
-
name,
|
|
14
|
-
onchange,
|
|
15
|
-
placeholder,
|
|
16
|
-
required,
|
|
17
|
-
sid,
|
|
18
|
-
tooltip,
|
|
19
|
-
value = $bindable(''),
|
|
20
|
-
}: Props = $props();
|
|
21
|
-
|
|
22
|
-
const id = $derived(`field_${name ?? ''}_${sid ?? ''}`);
|
|
23
|
-
let showPassword = $state(false);
|
|
1
|
+
<script lang="ts">let { disabled, error, label, name, onchange, placeholder, required, sid, tooltip, value = $bindable("") } = $props();
|
|
2
|
+
const id = $derived(`field_${name ?? ""}_${sid ?? ""}`);
|
|
3
|
+
let showPassword = $state(false);
|
|
4
|
+
export {};
|
|
24
5
|
</script>
|
|
25
6
|
|
|
26
7
|
<div class="flex flex-col gap-1" title={tooltip}>
|
|
@@ -1,23 +1,6 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export interface Props extends Omit<CtrlBaseProps, 'placeholder'> {
|
|
5
|
-
checked?: boolean;
|
|
6
|
-
onchange?: (checked: boolean) => void;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
let {
|
|
10
|
-
checked = $bindable(false),
|
|
11
|
-
disabled,
|
|
12
|
-
error,
|
|
13
|
-
label,
|
|
14
|
-
name,
|
|
15
|
-
onchange,
|
|
16
|
-
sid,
|
|
17
|
-
tooltip,
|
|
18
|
-
}: Props = $props();
|
|
19
|
-
|
|
20
|
-
const id = $derived(`field_${name ?? ''}_${sid ?? ''}`);
|
|
1
|
+
<script lang="ts">let { checked = $bindable(false), disabled, error, label, name, onchange, sid, tooltip } = $props();
|
|
2
|
+
const id = $derived(`field_${name ?? ""}_${sid ?? ""}`);
|
|
3
|
+
export {};
|
|
21
4
|
</script>
|
|
22
5
|
|
|
23
6
|
<div class="flex items-center gap-2" title={tooltip}>
|
|
@@ -1,27 +1,6 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export interface Props extends CtrlBaseProps {
|
|
5
|
-
onchange?: (value: string) => void;
|
|
6
|
-
rows?: number;
|
|
7
|
-
value?: string;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
let {
|
|
11
|
-
disabled,
|
|
12
|
-
error,
|
|
13
|
-
label,
|
|
14
|
-
name,
|
|
15
|
-
onchange,
|
|
16
|
-
placeholder,
|
|
17
|
-
required,
|
|
18
|
-
rows = 4,
|
|
19
|
-
sid,
|
|
20
|
-
tooltip,
|
|
21
|
-
value = $bindable(''),
|
|
22
|
-
}: Props = $props();
|
|
23
|
-
|
|
24
|
-
const id = $derived(`field_${name ?? ''}_${sid ?? ''}`);
|
|
1
|
+
<script lang="ts">let { disabled, error, label, name, onchange, placeholder, required, rows = 4, sid, tooltip, value = $bindable("") } = $props();
|
|
2
|
+
const id = $derived(`field_${name ?? ""}_${sid ?? ""}`);
|
|
3
|
+
export {};
|
|
25
4
|
</script>
|
|
26
5
|
|
|
27
6
|
<div class="flex flex-col gap-1" title={tooltip}>
|
|
@@ -1,27 +1,6 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export interface Props extends CtrlBaseProps {
|
|
5
|
-
onchange?: (value: string) => void;
|
|
6
|
-
type?: string;
|
|
7
|
-
value?: string;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
let {
|
|
11
|
-
disabled,
|
|
12
|
-
error,
|
|
13
|
-
label,
|
|
14
|
-
name,
|
|
15
|
-
onchange,
|
|
16
|
-
placeholder,
|
|
17
|
-
required,
|
|
18
|
-
sid,
|
|
19
|
-
tooltip,
|
|
20
|
-
type = 'text',
|
|
21
|
-
value = $bindable(''),
|
|
22
|
-
}: Props = $props();
|
|
23
|
-
|
|
24
|
-
const id = $derived(`field_${name ?? ''}_${sid ?? ''}`);
|
|
1
|
+
<script lang="ts">let { disabled, error, label, name, onchange, placeholder, required, sid, tooltip, type = "text", value = $bindable("") } = $props();
|
|
2
|
+
const id = $derived(`field_${name ?? ""}_${sid ?? ""}`);
|
|
3
|
+
export {};
|
|
25
4
|
</script>
|
|
26
5
|
|
|
27
6
|
<div class="flex flex-col gap-1" title={tooltip}>
|
|
@@ -1,129 +1,82 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
children: Snippet;
|
|
16
|
-
fetchOnMount?: boolean;
|
|
17
|
-
onFetchSession?: (state: Partial<GlobalState>) => Promise<Partial<GlobalState>>;
|
|
18
|
-
onLogin?: (
|
|
19
|
-
state: Partial<GlobalState>
|
|
20
|
-
) => Promise<Partial<Pick<GlobalState, 'owner' | 'program' | 'session' | 'user'>> | void>;
|
|
21
|
-
onLogout?: (
|
|
22
|
-
state: Partial<GlobalState>
|
|
23
|
-
) => Promise<Partial<Pick<GlobalState, 'owner' | 'program' | 'session' | 'user'>> | void>;
|
|
24
|
-
program?: Partial<ProgramState>;
|
|
25
|
-
throttleMs?: number;
|
|
1
|
+
<script lang="ts">import { setContext } from "svelte";
|
|
2
|
+
import { GetGlobalState, GlobalStateStore } from "./GlobalStateStore";
|
|
3
|
+
import { GLOBAL_STATE_STORE_CONTEXT_KEY } from "./GlobalStateStoreContext";
|
|
4
|
+
const { apiURL, autoFetch = true, children, fetchOnMount = true, onFetchSession, onLogin, onLogout, program, throttleMs = 0 } = $props();
|
|
5
|
+
let lastFetchTime = 0;
|
|
6
|
+
let fetchInProgress = false;
|
|
7
|
+
let mounted = false;
|
|
8
|
+
let storeInitialized = $state(GetGlobalState().initialized);
|
|
9
|
+
let lastHandlers = {};
|
|
10
|
+
const throttledFetch = async (url) => {
|
|
11
|
+
const now = Date.now();
|
|
12
|
+
const timeSinceLastFetch = now - lastFetchTime;
|
|
13
|
+
if (fetchInProgress) {
|
|
14
|
+
return;
|
|
26
15
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
16
|
+
if (throttleMs > 0 && timeSinceLastFetch < throttleMs) {
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
try {
|
|
20
|
+
fetchInProgress = true;
|
|
21
|
+
lastFetchTime = now;
|
|
22
|
+
await GlobalStateStore.getState().fetchData(url);
|
|
23
|
+
} finally {
|
|
24
|
+
fetchInProgress = false;
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
const refetch = async () => {
|
|
28
|
+
await throttledFetch();
|
|
29
|
+
};
|
|
30
|
+
$effect(() => {
|
|
31
|
+
const unsubscribe = GlobalStateStore.subscribe((state) => {
|
|
32
|
+
storeInitialized = state.initialized;
|
|
33
|
+
});
|
|
34
|
+
return unsubscribe;
|
|
35
|
+
});
|
|
36
|
+
$effect(() => {
|
|
37
|
+
if (!storeInitialized) return;
|
|
38
|
+
if (apiURL) {
|
|
39
|
+
GlobalStateStore.getState().setApiURL(apiURL);
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
$effect(() => {
|
|
43
|
+
if (!storeInitialized) return;
|
|
44
|
+
if (program) {
|
|
45
|
+
GlobalStateStore.getState().setProgram(program);
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
$effect(() => {
|
|
49
|
+
if (onFetchSession === lastHandlers.onFetchSession && onLogin === lastHandlers.onLogin && onLogout === lastHandlers.onLogout) {
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
lastHandlers = {
|
|
33
53
|
onFetchSession,
|
|
34
54
|
onLogin,
|
|
35
|
-
onLogout
|
|
36
|
-
program,
|
|
37
|
-
throttleMs = 0
|
|
38
|
-
}: Props = $props();
|
|
39
|
-
|
|
40
|
-
let lastFetchTime = 0;
|
|
41
|
-
let fetchInProgress = false;
|
|
42
|
-
let mounted = false;
|
|
43
|
-
let storeInitialized = $state(GetGlobalState().initialized);
|
|
44
|
-
let lastHandlers: {
|
|
45
|
-
onFetchSession?: Props['onFetchSession'];
|
|
46
|
-
onLogin?: Props['onLogin'];
|
|
47
|
-
onLogout?: Props['onLogout'];
|
|
48
|
-
} = {};
|
|
49
|
-
|
|
50
|
-
const throttledFetch = async (url?: string): Promise<void> => {
|
|
51
|
-
const now = Date.now();
|
|
52
|
-
const timeSinceLastFetch = now - lastFetchTime;
|
|
53
|
-
|
|
54
|
-
if (fetchInProgress) {
|
|
55
|
-
return;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
if (throttleMs > 0 && timeSinceLastFetch < throttleMs) {
|
|
59
|
-
return;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
try {
|
|
63
|
-
fetchInProgress = true;
|
|
64
|
-
lastFetchTime = now;
|
|
65
|
-
await GlobalStateStore.getState().fetchData(url);
|
|
66
|
-
} finally {
|
|
67
|
-
fetchInProgress = false;
|
|
68
|
-
}
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
const refetch = async (): Promise<void> => {
|
|
72
|
-
await throttledFetch();
|
|
55
|
+
onLogout
|
|
73
56
|
};
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
});
|
|
79
|
-
return unsubscribe;
|
|
80
|
-
});
|
|
81
|
-
|
|
82
|
-
$effect(() => {
|
|
83
|
-
if (!storeInitialized) return;
|
|
84
|
-
if (apiURL) {
|
|
85
|
-
GlobalStateStore.getState().setApiURL(apiURL);
|
|
86
|
-
}
|
|
87
|
-
});
|
|
88
|
-
|
|
89
|
-
$effect(() => {
|
|
90
|
-
if (!storeInitialized) return;
|
|
91
|
-
if (program) {
|
|
92
|
-
GlobalStateStore.getState().setProgram(program);
|
|
93
|
-
}
|
|
94
|
-
});
|
|
95
|
-
|
|
96
|
-
$effect(() => {
|
|
97
|
-
if (
|
|
98
|
-
onFetchSession === lastHandlers.onFetchSession &&
|
|
99
|
-
onLogin === lastHandlers.onLogin &&
|
|
100
|
-
onLogout === lastHandlers.onLogout
|
|
101
|
-
) {
|
|
102
|
-
return;
|
|
103
|
-
}
|
|
104
|
-
lastHandlers = { onFetchSession, onLogin, onLogout };
|
|
105
|
-
GlobalStateStore.setState({ onFetchSession, onLogin, onLogout });
|
|
57
|
+
GlobalStateStore.setState({
|
|
58
|
+
onFetchSession,
|
|
59
|
+
onLogin,
|
|
60
|
+
onLogout
|
|
106
61
|
});
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
}
|
|
62
|
+
});
|
|
63
|
+
$effect(() => {
|
|
64
|
+
if (!storeInitialized) return;
|
|
65
|
+
if (!mounted) {
|
|
66
|
+
mounted = true;
|
|
67
|
+
if (autoFetch && fetchOnMount) {
|
|
68
|
+
throttledFetch(apiURL).catch((e) => {
|
|
69
|
+
console.error("Failed to fetch on mount:", e);
|
|
70
|
+
});
|
|
117
71
|
}
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
setContext(GLOBAL_STATE_STORE_CONTEXT_KEY, context);
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
const context = {
|
|
75
|
+
fetchData: throttledFetch,
|
|
76
|
+
getState: GetGlobalState,
|
|
77
|
+
refetch
|
|
78
|
+
};
|
|
79
|
+
setContext(GLOBAL_STATE_STORE_CONTEXT_KEY, context);
|
|
127
80
|
</script>
|
|
128
81
|
|
|
129
82
|
{@render children()}
|