@liwe3/webcomponents-svelte 1.0.2 → 1.1.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/ChunkUploader.svelte +149 -0
- package/dist/ChunkUploader.svelte.d.ts +16 -0
- package/dist/ChunkUploader.svelte.d.ts.map +1 -0
- package/dist/ContainerBox.svelte +58 -0
- package/dist/ContainerBox.svelte.d.ts +11 -0
- package/dist/ContainerBox.svelte.d.ts.map +1 -0
- package/dist/DateSelector.svelte +103 -0
- package/dist/DateSelector.svelte.d.ts +20 -0
- package/dist/DateSelector.svelte.d.ts.map +1 -0
- package/dist/Drawer.svelte +201 -0
- package/dist/Drawer.svelte.d.ts +33 -0
- package/dist/Drawer.svelte.d.ts.map +1 -0
- package/dist/PopoverMenu.svelte +86 -0
- package/dist/PopoverMenu.svelte.d.ts +16 -0
- package/dist/PopoverMenu.svelte.d.ts.map +1 -0
- package/dist/SmartSelect.svelte +4 -9
- package/dist/SmartSelect.svelte.d.ts +1 -1
- package/dist/SmartSelect.svelte.d.ts.map +1 -1
- package/dist/Toasts.svelte +68 -0
- package/dist/Toasts.svelte.d.ts +49 -0
- package/dist/Toasts.svelte.d.ts.map +1 -0
- package/dist/TreeView.svelte +103 -0
- package/dist/TreeView.svelte.d.ts +28 -0
- package/dist/TreeView.svelte.d.ts.map +1 -0
- package/dist/index.d.ts +8 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +8 -0
- package/package.json +4 -2
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { onMount } from "svelte";
|
|
3
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
4
|
+
import type {
|
|
5
|
+
ChunkUploaderElement as ChunkUploaderElementType,
|
|
6
|
+
UploadedFile,
|
|
7
|
+
} from "@liwe3/webcomponents";
|
|
8
|
+
|
|
9
|
+
interface Props extends HTMLAttributes<ChunkUploaderElementType> {
|
|
10
|
+
serverURL?: string;
|
|
11
|
+
chunkSize?: number;
|
|
12
|
+
authToken?: string;
|
|
13
|
+
validFiletypes?: string[];
|
|
14
|
+
maxFileSize?: number;
|
|
15
|
+
onfilecomplete?: (event: CustomEvent<UploadedFile>) => void;
|
|
16
|
+
onuploadcomplete?: (event: CustomEvent<UploadedFile[]>) => void;
|
|
17
|
+
onuploadaborted?: (event: CustomEvent<UploadedFile[]>) => void;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
let {
|
|
21
|
+
serverURL = "",
|
|
22
|
+
chunkSize = 5,
|
|
23
|
+
authToken,
|
|
24
|
+
validFiletypes,
|
|
25
|
+
maxFileSize = 5120,
|
|
26
|
+
onfilecomplete,
|
|
27
|
+
onuploadcomplete,
|
|
28
|
+
onuploadaborted,
|
|
29
|
+
...restProps
|
|
30
|
+
}: Props = $props();
|
|
31
|
+
|
|
32
|
+
let uploaderElement: ChunkUploaderElementType;
|
|
33
|
+
let isReady = false;
|
|
34
|
+
let removeListeners: (() => void) | null = null;
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Syncs the latest prop values down to the underlying web component.
|
|
38
|
+
*/
|
|
39
|
+
const syncProps = () => {
|
|
40
|
+
if (!isReady || !uploaderElement) return;
|
|
41
|
+
|
|
42
|
+
uploaderElement.serverURL = serverURL ?? "";
|
|
43
|
+
uploaderElement.chunkSize = chunkSize;
|
|
44
|
+
uploaderElement.authToken = authToken;
|
|
45
|
+
uploaderElement.validFiletypes = validFiletypes?.length
|
|
46
|
+
? [...validFiletypes]
|
|
47
|
+
: undefined;
|
|
48
|
+
uploaderElement.maxFileSize = maxFileSize;
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* Forwards custom events emitted by the web component to Svelte callbacks.
|
|
53
|
+
*/
|
|
54
|
+
const bindEvents = () => {
|
|
55
|
+
if (!uploaderElement) return;
|
|
56
|
+
|
|
57
|
+
const handleFileComplete = (event: Event) => {
|
|
58
|
+
onfilecomplete?.(event as CustomEvent<UploadedFile>);
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
const handleUploadComplete = (event: Event) => {
|
|
62
|
+
onuploadcomplete?.(event as CustomEvent<UploadedFile[]>);
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
const handleUploadAborted = (event: Event) => {
|
|
66
|
+
onuploadaborted?.(event as CustomEvent<UploadedFile[]>);
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
uploaderElement.addEventListener(
|
|
70
|
+
"filecomplete",
|
|
71
|
+
handleFileComplete as EventListener
|
|
72
|
+
);
|
|
73
|
+
uploaderElement.addEventListener(
|
|
74
|
+
"uploadcomplete",
|
|
75
|
+
handleUploadComplete as EventListener
|
|
76
|
+
);
|
|
77
|
+
uploaderElement.addEventListener(
|
|
78
|
+
"uploadaborted",
|
|
79
|
+
handleUploadAborted as EventListener
|
|
80
|
+
);
|
|
81
|
+
|
|
82
|
+
removeListeners = () => {
|
|
83
|
+
uploaderElement.removeEventListener(
|
|
84
|
+
"filecomplete",
|
|
85
|
+
handleFileComplete as EventListener
|
|
86
|
+
);
|
|
87
|
+
uploaderElement.removeEventListener(
|
|
88
|
+
"uploadcomplete",
|
|
89
|
+
handleUploadComplete as EventListener
|
|
90
|
+
);
|
|
91
|
+
uploaderElement.removeEventListener(
|
|
92
|
+
"uploadaborted",
|
|
93
|
+
handleUploadAborted as EventListener
|
|
94
|
+
);
|
|
95
|
+
};
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
onMount(() => {
|
|
99
|
+
let isMounted = true;
|
|
100
|
+
|
|
101
|
+
const setup = async () => {
|
|
102
|
+
await import("@liwe3/webcomponents/chunk-uploader");
|
|
103
|
+
await customElements.whenDefined("liwe3-chunk-uploader");
|
|
104
|
+
|
|
105
|
+
if (!isMounted) return;
|
|
106
|
+
isReady = true;
|
|
107
|
+
syncProps();
|
|
108
|
+
bindEvents();
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
void setup();
|
|
112
|
+
|
|
113
|
+
return () => {
|
|
114
|
+
isMounted = false;
|
|
115
|
+
removeListeners?.();
|
|
116
|
+
removeListeners = null;
|
|
117
|
+
};
|
|
118
|
+
});
|
|
119
|
+
|
|
120
|
+
$effect(() => {
|
|
121
|
+
if (!isReady || !uploaderElement) return;
|
|
122
|
+
uploaderElement.serverURL = serverURL ?? "";
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
$effect(() => {
|
|
126
|
+
if (!isReady || !uploaderElement) return;
|
|
127
|
+
uploaderElement.chunkSize = chunkSize;
|
|
128
|
+
});
|
|
129
|
+
|
|
130
|
+
$effect(() => {
|
|
131
|
+
if (!isReady || !uploaderElement) return;
|
|
132
|
+
uploaderElement.authToken = authToken;
|
|
133
|
+
});
|
|
134
|
+
|
|
135
|
+
$effect(() => {
|
|
136
|
+
if (!isReady || !uploaderElement) return;
|
|
137
|
+
uploaderElement.validFiletypes = validFiletypes?.length
|
|
138
|
+
? [...validFiletypes]
|
|
139
|
+
: undefined;
|
|
140
|
+
});
|
|
141
|
+
|
|
142
|
+
$effect(() => {
|
|
143
|
+
if (!isReady || !uploaderElement) return;
|
|
144
|
+
uploaderElement.maxFileSize = maxFileSize;
|
|
145
|
+
});
|
|
146
|
+
</script>
|
|
147
|
+
|
|
148
|
+
<liwe3-chunk-uploader bind:this={uploaderElement} {...restProps}
|
|
149
|
+
></liwe3-chunk-uploader>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
2
|
+
import type { ChunkUploaderElement as ChunkUploaderElementType, UploadedFile } from "@liwe3/webcomponents";
|
|
3
|
+
interface Props extends HTMLAttributes<ChunkUploaderElementType> {
|
|
4
|
+
serverURL?: string;
|
|
5
|
+
chunkSize?: number;
|
|
6
|
+
authToken?: string;
|
|
7
|
+
validFiletypes?: string[];
|
|
8
|
+
maxFileSize?: number;
|
|
9
|
+
onfilecomplete?: (event: CustomEvent<UploadedFile>) => void;
|
|
10
|
+
onuploadcomplete?: (event: CustomEvent<UploadedFile[]>) => void;
|
|
11
|
+
onuploadaborted?: (event: CustomEvent<UploadedFile[]>) => void;
|
|
12
|
+
}
|
|
13
|
+
declare const ChunkUploader: import("svelte").Component<Props, {}, "">;
|
|
14
|
+
type ChunkUploader = ReturnType<typeof ChunkUploader>;
|
|
15
|
+
export default ChunkUploader;
|
|
16
|
+
//# sourceMappingURL=ChunkUploader.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChunkUploader.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ChunkUploader.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EACR,oBAAoB,IAAI,wBAAwB,EAChD,YAAY,EACb,MAAM,sBAAsB,CAAC;AAG9B,UAAU,KAAM,SAAQ,cAAc,CAAC,wBAAwB,CAAC;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IAC5D,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,YAAY,EAAE,CAAC,KAAK,IAAI,CAAC;IAChE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,YAAY,EAAE,CAAC,KAAK,IAAI,CAAC;CAChE;AA2IH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { onMount } from "svelte";
|
|
3
|
+
import type { PopoverMenuItem, MenuPosition } from "@liwe3/webcomponents";
|
|
4
|
+
|
|
5
|
+
interface Props {
|
|
6
|
+
menuPosition?: MenuPosition;
|
|
7
|
+
menuItems?: PopoverMenuItem[];
|
|
8
|
+
alwaysShowMenu?: boolean;
|
|
9
|
+
children?: import("svelte").Snippet;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
let {
|
|
13
|
+
menuPosition = "bottom-left",
|
|
14
|
+
menuItems = [],
|
|
15
|
+
alwaysShowMenu = false,
|
|
16
|
+
children,
|
|
17
|
+
...restProps
|
|
18
|
+
}: Props = $props();
|
|
19
|
+
|
|
20
|
+
let containerBoxElement: HTMLElement;
|
|
21
|
+
let isReady = $state(false);
|
|
22
|
+
|
|
23
|
+
const updateProps = () => {
|
|
24
|
+
if (!containerBoxElement || !isReady) return;
|
|
25
|
+
|
|
26
|
+
const el = containerBoxElement as any;
|
|
27
|
+
|
|
28
|
+
if (typeof el.setMenuPosition === "function") {
|
|
29
|
+
el.setMenuPosition(menuPosition);
|
|
30
|
+
}
|
|
31
|
+
if (typeof el.setMenuItems === "function") {
|
|
32
|
+
el.setMenuItems(menuItems);
|
|
33
|
+
}
|
|
34
|
+
if (typeof el.setAlwaysShowMenu === "function") {
|
|
35
|
+
el.setAlwaysShowMenu(alwaysShowMenu);
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
onMount(async () => {
|
|
40
|
+
// Dynamically import the web component
|
|
41
|
+
await import("@liwe3/webcomponents/container-box");
|
|
42
|
+
await customElements.whenDefined("liwe3-container-box");
|
|
43
|
+
|
|
44
|
+
isReady = true;
|
|
45
|
+
updateProps();
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
$effect(() => {
|
|
49
|
+
if (isReady) {
|
|
50
|
+
updateProps();
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
</script>
|
|
54
|
+
|
|
55
|
+
<!-- svelte-ignore a11y_unknown_aria_attribute -->
|
|
56
|
+
<liwe3-container-box bind:this={containerBoxElement} {...restProps}>
|
|
57
|
+
{@render children?.()}
|
|
58
|
+
</liwe3-container-box>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { PopoverMenuItem, MenuPosition } from "@liwe3/webcomponents";
|
|
2
|
+
interface Props {
|
|
3
|
+
menuPosition?: MenuPosition;
|
|
4
|
+
menuItems?: PopoverMenuItem[];
|
|
5
|
+
alwaysShowMenu?: boolean;
|
|
6
|
+
children?: import("svelte").Snippet;
|
|
7
|
+
}
|
|
8
|
+
declare const ContainerBox: import("svelte").Component<Props, {}, "">;
|
|
9
|
+
type ContainerBox = ReturnType<typeof ContainerBox>;
|
|
10
|
+
export default ContainerBox;
|
|
11
|
+
//# sourceMappingURL=ContainerBox.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ContainerBox.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ContainerBox.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGxE,UAAU,KAAK;IACb,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,SAAS,CAAC,EAAE,eAAe,EAAE,CAAC;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACrC;AAwDH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { onMount } from "svelte";
|
|
3
|
+
import type { DateRange } from "@liwe3/webcomponents";
|
|
4
|
+
|
|
5
|
+
interface Props {
|
|
6
|
+
rangeMode?: boolean;
|
|
7
|
+
selectedDate?: string | null;
|
|
8
|
+
selectedRange?: DateRange;
|
|
9
|
+
ondateselected?: (date: string) => void;
|
|
10
|
+
onrangeselected?: (range: DateRange) => void;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
let {
|
|
14
|
+
rangeMode = false,
|
|
15
|
+
selectedDate = $bindable(null),
|
|
16
|
+
selectedRange = $bindable({ start: null, end: null }),
|
|
17
|
+
ondateselected,
|
|
18
|
+
onrangeselected,
|
|
19
|
+
...restProps
|
|
20
|
+
}: Props = $props();
|
|
21
|
+
|
|
22
|
+
let dateSelectorElement: HTMLElement;
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Updates the web component's attributes based on props
|
|
26
|
+
*/
|
|
27
|
+
const updateAttributes = () => {
|
|
28
|
+
if (!dateSelectorElement) return;
|
|
29
|
+
|
|
30
|
+
// Set boolean attributes
|
|
31
|
+
if (rangeMode) {
|
|
32
|
+
dateSelectorElement.setAttribute("range-mode", "");
|
|
33
|
+
} else {
|
|
34
|
+
dateSelectorElement.removeAttribute("range-mode");
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// Set selected date in single mode
|
|
38
|
+
if (!rangeMode && selectedDate) {
|
|
39
|
+
(dateSelectorElement as any).setDate(selectedDate);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// Set selected range in range mode
|
|
43
|
+
if (rangeMode && selectedRange && selectedRange.start && selectedRange.end) {
|
|
44
|
+
(dateSelectorElement as any).setRange(selectedRange.start, selectedRange.end);
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* Binds event listeners to the web component
|
|
50
|
+
*/
|
|
51
|
+
const bindEvents = () => {
|
|
52
|
+
if (!dateSelectorElement) return;
|
|
53
|
+
|
|
54
|
+
dateSelectorElement.addEventListener("dateSelected", (event) => {
|
|
55
|
+
const customEvent = event as CustomEvent;
|
|
56
|
+
selectedDate = customEvent.detail.date;
|
|
57
|
+
ondateselected?.(customEvent.detail.date);
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
dateSelectorElement.addEventListener("rangeSelected", (event) => {
|
|
61
|
+
const customEvent = event as CustomEvent;
|
|
62
|
+
selectedRange = {
|
|
63
|
+
start: customEvent.detail.start,
|
|
64
|
+
end: customEvent.detail.end
|
|
65
|
+
};
|
|
66
|
+
onrangeselected?.(selectedRange);
|
|
67
|
+
});
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
onMount(async () => {
|
|
71
|
+
// Dynamically import the web component
|
|
72
|
+
await import("@liwe3/webcomponents/date-selector");
|
|
73
|
+
|
|
74
|
+
updateAttributes();
|
|
75
|
+
bindEvents();
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
/**
|
|
79
|
+
* Expose methods to parent component
|
|
80
|
+
*/
|
|
81
|
+
export const setDate = (dateStr: string) => {
|
|
82
|
+
(dateSelectorElement as any)?.setDate(dateStr);
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
export const setRange = (startDate: string, endDate: string) => {
|
|
86
|
+
(dateSelectorElement as any)?.setRange(startDate, endDate);
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
export const getSelectedDate = () => {
|
|
90
|
+
return (dateSelectorElement as any)?.getSelectedDate() || null;
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
export const getSelectedRange = () => {
|
|
94
|
+
return (dateSelectorElement as any)?.getSelectedRange() || { start: null, end: null };
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
export const clear = () => {
|
|
98
|
+
(dateSelectorElement as any)?.clear();
|
|
99
|
+
};
|
|
100
|
+
</script>
|
|
101
|
+
|
|
102
|
+
<!-- svelte-ignore a11y_unknown_aria_attribute -->
|
|
103
|
+
<liwe3-date-selector bind:this={dateSelectorElement} {...restProps}></liwe3-date-selector>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { DateRange } from "@liwe3/webcomponents";
|
|
2
|
+
interface Props {
|
|
3
|
+
rangeMode?: boolean;
|
|
4
|
+
selectedDate?: string | null;
|
|
5
|
+
selectedRange?: DateRange;
|
|
6
|
+
ondateselected?: (date: string) => void;
|
|
7
|
+
onrangeselected?: (range: DateRange) => void;
|
|
8
|
+
}
|
|
9
|
+
declare const DateSelector: import("svelte").Component<Props, {
|
|
10
|
+
/**
|
|
11
|
+
* Expose methods to parent component
|
|
12
|
+
*/ setDate: (dateStr: string) => void;
|
|
13
|
+
setRange: (startDate: string, endDate: string) => void;
|
|
14
|
+
getSelectedDate: () => any;
|
|
15
|
+
getSelectedRange: () => any;
|
|
16
|
+
clear: () => void;
|
|
17
|
+
}, "selectedDate" | "selectedRange">;
|
|
18
|
+
type DateSelector = ReturnType<typeof DateSelector>;
|
|
19
|
+
export default DateSelector;
|
|
20
|
+
//# sourceMappingURL=DateSelector.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateSelector.svelte.d.ts","sourceRoot":"","sources":["../src/lib/DateSelector.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGpD,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CAC9C;AAuGH,QAAA,MAAM,YAAY;IAHlB;;SAEK,oBA5BwB,MAAM;0BAIH,MAAM,WAAW,MAAM;;;;oCAyBG,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { onDestroy, onMount } from "svelte";
|
|
3
|
+
import type { Snippet } from "svelte";
|
|
4
|
+
|
|
5
|
+
type DrawerDirection = "horizontal" | "vertical";
|
|
6
|
+
type DrawerState = "expanded" | "shrunk" | "closed";
|
|
7
|
+
|
|
8
|
+
interface DrawerElement extends HTMLElement {
|
|
9
|
+
direction: DrawerDirection;
|
|
10
|
+
duration: number;
|
|
11
|
+
showTitleWhenShrunk: boolean;
|
|
12
|
+
closable: boolean;
|
|
13
|
+
title: string;
|
|
14
|
+
icon: string;
|
|
15
|
+
showToggleButton: boolean;
|
|
16
|
+
contentPadding: string;
|
|
17
|
+
state: DrawerState;
|
|
18
|
+
expand: () => void;
|
|
19
|
+
shrink: () => void;
|
|
20
|
+
close: () => void;
|
|
21
|
+
toggle: () => void;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
interface Props {
|
|
25
|
+
direction?: DrawerDirection;
|
|
26
|
+
duration?: number;
|
|
27
|
+
showTitleWhenShrunk?: boolean;
|
|
28
|
+
closable?: boolean;
|
|
29
|
+
title?: string;
|
|
30
|
+
icon?: string;
|
|
31
|
+
state?: DrawerState;
|
|
32
|
+
showToggleButton?: boolean;
|
|
33
|
+
contentPadding?: string;
|
|
34
|
+
onstatechange?: (
|
|
35
|
+
event: CustomEvent<{ oldState: DrawerState; newState: DrawerState }>
|
|
36
|
+
) => void;
|
|
37
|
+
onexpanded?: (event: CustomEvent) => void;
|
|
38
|
+
onshrunk?: (event: CustomEvent) => void;
|
|
39
|
+
onclosed?: (event: CustomEvent) => void;
|
|
40
|
+
children?: Snippet;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
let {
|
|
44
|
+
direction = "horizontal",
|
|
45
|
+
duration = 300,
|
|
46
|
+
showTitleWhenShrunk = false,
|
|
47
|
+
closable = true,
|
|
48
|
+
title = "",
|
|
49
|
+
icon = "☰",
|
|
50
|
+
state = $bindable<DrawerState>("expanded"),
|
|
51
|
+
showToggleButton = true,
|
|
52
|
+
contentPadding = "16px",
|
|
53
|
+
onstatechange,
|
|
54
|
+
onexpanded,
|
|
55
|
+
onshrunk,
|
|
56
|
+
onclosed,
|
|
57
|
+
children,
|
|
58
|
+
...restProps
|
|
59
|
+
}: Props = $props();
|
|
60
|
+
|
|
61
|
+
let drawerElement: DrawerElement;
|
|
62
|
+
let isReady = false;
|
|
63
|
+
let eventsBound = false;
|
|
64
|
+
let removeListeners: (() => void) | null = null;
|
|
65
|
+
|
|
66
|
+
const updateAttributes = () => {
|
|
67
|
+
if (!drawerElement || !isReady) return;
|
|
68
|
+
|
|
69
|
+
drawerElement.direction = direction;
|
|
70
|
+
drawerElement.duration = duration;
|
|
71
|
+
drawerElement.showTitleWhenShrunk = showTitleWhenShrunk;
|
|
72
|
+
drawerElement.closable = closable;
|
|
73
|
+
drawerElement.title = title;
|
|
74
|
+
drawerElement.icon = icon;
|
|
75
|
+
drawerElement.showToggleButton = showToggleButton;
|
|
76
|
+
drawerElement.contentPadding = contentPadding ?? "16px";
|
|
77
|
+
drawerElement.state = state;
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
const bindEvents = () => {
|
|
81
|
+
if (!drawerElement || eventsBound) return;
|
|
82
|
+
|
|
83
|
+
const handleStateChange = (event: Event) => {
|
|
84
|
+
const customEvent = event as CustomEvent<{
|
|
85
|
+
oldState: DrawerState;
|
|
86
|
+
newState: DrawerState;
|
|
87
|
+
}>;
|
|
88
|
+
|
|
89
|
+
state = customEvent.detail.newState;
|
|
90
|
+
onstatechange?.(customEvent);
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
const handleExpanded = (event: Event) => {
|
|
94
|
+
onexpanded?.(event as CustomEvent);
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
const handleShrunk = (event: Event) => {
|
|
98
|
+
onshrunk?.(event as CustomEvent);
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
const handleClosed = (event: Event) => {
|
|
102
|
+
onclosed?.(event as CustomEvent);
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
drawerElement.addEventListener(
|
|
106
|
+
"drawer-state-change",
|
|
107
|
+
handleStateChange as EventListener
|
|
108
|
+
);
|
|
109
|
+
drawerElement.addEventListener(
|
|
110
|
+
"drawer-expanded",
|
|
111
|
+
handleExpanded as EventListener
|
|
112
|
+
);
|
|
113
|
+
drawerElement.addEventListener(
|
|
114
|
+
"drawer-shrunk",
|
|
115
|
+
handleShrunk as EventListener
|
|
116
|
+
);
|
|
117
|
+
drawerElement.addEventListener(
|
|
118
|
+
"drawer-closed",
|
|
119
|
+
handleClosed as EventListener
|
|
120
|
+
);
|
|
121
|
+
|
|
122
|
+
removeListeners = () => {
|
|
123
|
+
drawerElement.removeEventListener(
|
|
124
|
+
"drawer-state-change",
|
|
125
|
+
handleStateChange as EventListener
|
|
126
|
+
);
|
|
127
|
+
drawerElement.removeEventListener(
|
|
128
|
+
"drawer-expanded",
|
|
129
|
+
handleExpanded as EventListener
|
|
130
|
+
);
|
|
131
|
+
drawerElement.removeEventListener(
|
|
132
|
+
"drawer-shrunk",
|
|
133
|
+
handleShrunk as EventListener
|
|
134
|
+
);
|
|
135
|
+
drawerElement.removeEventListener(
|
|
136
|
+
"drawer-closed",
|
|
137
|
+
handleClosed as EventListener
|
|
138
|
+
);
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
eventsBound = true;
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
onMount(async () => {
|
|
145
|
+
await import("@liwe3/webcomponents/drawer");
|
|
146
|
+
await customElements.whenDefined("liwe3-drawer");
|
|
147
|
+
|
|
148
|
+
isReady = true;
|
|
149
|
+
updateAttributes();
|
|
150
|
+
bindEvents();
|
|
151
|
+
});
|
|
152
|
+
|
|
153
|
+
onDestroy(() => {
|
|
154
|
+
removeListeners?.();
|
|
155
|
+
removeListeners = null;
|
|
156
|
+
eventsBound = false;
|
|
157
|
+
});
|
|
158
|
+
|
|
159
|
+
$effect(() => {
|
|
160
|
+
if (!isReady) return;
|
|
161
|
+
updateAttributes();
|
|
162
|
+
});
|
|
163
|
+
|
|
164
|
+
/** Expand the drawer programmatically. */
|
|
165
|
+
export const expand = () => {
|
|
166
|
+
drawerElement?.expand();
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
/** Shrink the drawer to its collapsed size. */
|
|
170
|
+
export const shrink = () => {
|
|
171
|
+
drawerElement?.shrink();
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
/** Close the drawer and remove it from the DOM. */
|
|
175
|
+
export const close = () => {
|
|
176
|
+
drawerElement?.close();
|
|
177
|
+
};
|
|
178
|
+
|
|
179
|
+
/** Toggle between expanded and shrunk states. */
|
|
180
|
+
export const toggle = () => {
|
|
181
|
+
drawerElement?.toggle();
|
|
182
|
+
};
|
|
183
|
+
|
|
184
|
+
/** Return the current drawer state. */
|
|
185
|
+
export const getState = (): DrawerState => {
|
|
186
|
+
return drawerElement?.state ?? state;
|
|
187
|
+
};
|
|
188
|
+
|
|
189
|
+
/** Imperatively set the drawer state. */
|
|
190
|
+
export const setState = (nextState: DrawerState) => {
|
|
191
|
+
if (!drawerElement) return;
|
|
192
|
+
|
|
193
|
+
drawerElement.state = nextState;
|
|
194
|
+
state = nextState;
|
|
195
|
+
};
|
|
196
|
+
</script>
|
|
197
|
+
|
|
198
|
+
<!-- svelte-ignore a11y_unknown_aria_attribute -->
|
|
199
|
+
<liwe3-drawer bind:this={drawerElement} {...restProps}>
|
|
200
|
+
{@render children?.()}
|
|
201
|
+
</liwe3-drawer>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import type { Snippet } from "svelte";
|
|
2
|
+
type DrawerDirection = "horizontal" | "vertical";
|
|
3
|
+
type DrawerState = "expanded" | "shrunk" | "closed";
|
|
4
|
+
interface Props {
|
|
5
|
+
direction?: DrawerDirection;
|
|
6
|
+
duration?: number;
|
|
7
|
+
showTitleWhenShrunk?: boolean;
|
|
8
|
+
closable?: boolean;
|
|
9
|
+
title?: string;
|
|
10
|
+
icon?: string;
|
|
11
|
+
state?: DrawerState;
|
|
12
|
+
showToggleButton?: boolean;
|
|
13
|
+
contentPadding?: string;
|
|
14
|
+
onstatechange?: (event: CustomEvent<{
|
|
15
|
+
oldState: DrawerState;
|
|
16
|
+
newState: DrawerState;
|
|
17
|
+
}>) => void;
|
|
18
|
+
onexpanded?: (event: CustomEvent) => void;
|
|
19
|
+
onshrunk?: (event: CustomEvent) => void;
|
|
20
|
+
onclosed?: (event: CustomEvent) => void;
|
|
21
|
+
children?: Snippet;
|
|
22
|
+
}
|
|
23
|
+
declare const Drawer: import("svelte").Component<Props, {
|
|
24
|
+
/** Expand the drawer programmatically. */ expand: () => void;
|
|
25
|
+
/** Shrink the drawer to its collapsed size. */ shrink: () => void;
|
|
26
|
+
/** Close the drawer and remove it from the DOM. */ close: () => void;
|
|
27
|
+
/** Toggle between expanded and shrunk states. */ toggle: () => void;
|
|
28
|
+
/** Return the current drawer state. */ getState: () => DrawerState;
|
|
29
|
+
/** Imperatively set the drawer state. */ setState: (nextState: DrawerState) => void;
|
|
30
|
+
}, "state">;
|
|
31
|
+
type Drawer = ReturnType<typeof Drawer>;
|
|
32
|
+
export default Drawer;
|
|
33
|
+
//# sourceMappingURL=Drawer.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Drawer.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,KAAK,eAAe,GAAG,YAAY,GAAG,UAAU,CAAC;AACjD,KAAK,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAkBpD,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,CACd,KAAK,EAAE,WAAW,CAAC;QAAE,QAAQ,EAAE,WAAW,CAAC;QAAC,QAAQ,EAAE,WAAW,CAAA;KAAE,CAAC,KACjE,IAAI,CAAC;IACV,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiLH,QAAA,MAAM,MAAM;IANZ,0CAA0C;IAC1C,+CAA+C;IAC/C,mDAAmD;IACnD,iDAAiD;IACjD,uCAAuC,iBAxBf,WAAW;IAyBnC,yCAAyC,uBApBT,WAAW;WAqBS,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { onMount } from "svelte";
|
|
3
|
+
import type { PopoverMenuConfig } from "@liwe3/webcomponents";
|
|
4
|
+
|
|
5
|
+
interface Props {
|
|
6
|
+
items?: PopoverMenuConfig[];
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
let {
|
|
10
|
+
items = [],
|
|
11
|
+
...restProps
|
|
12
|
+
}: Props = $props();
|
|
13
|
+
|
|
14
|
+
let popoverMenuElement: HTMLElement;
|
|
15
|
+
let isReady = $state(false);
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Updates the web component's items based on props
|
|
19
|
+
*/
|
|
20
|
+
const updateItems = () => {
|
|
21
|
+
if (!popoverMenuElement || !isReady) return;
|
|
22
|
+
|
|
23
|
+
// Check if setItems method exists
|
|
24
|
+
if (typeof (popoverMenuElement as any).setItems === 'function') {
|
|
25
|
+
(popoverMenuElement as any).setItems(items);
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
onMount(async () => {
|
|
30
|
+
// Dynamically import the web component
|
|
31
|
+
await import("@liwe3/webcomponents/popover-menu");
|
|
32
|
+
|
|
33
|
+
// Wait for the custom element to be defined
|
|
34
|
+
await customElements.whenDefined('liwe3-popover-menu');
|
|
35
|
+
|
|
36
|
+
// Mark as ready
|
|
37
|
+
isReady = true;
|
|
38
|
+
|
|
39
|
+
// Initial update
|
|
40
|
+
updateItems();
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* Expose methods to parent component
|
|
45
|
+
*/
|
|
46
|
+
export const setItems = (newItems: PopoverMenuConfig[]) => {
|
|
47
|
+
if (typeof (popoverMenuElement as any)?.setItems === 'function') {
|
|
48
|
+
(popoverMenuElement as any).setItems(newItems);
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
export const getItems = (): PopoverMenuConfig[] => {
|
|
53
|
+
if (typeof (popoverMenuElement as any)?.getItems === 'function') {
|
|
54
|
+
return (popoverMenuElement as any).getItems();
|
|
55
|
+
}
|
|
56
|
+
return [];
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
export const addMenuItem = (item: PopoverMenuConfig, index: number | null = null) => {
|
|
60
|
+
if (typeof (popoverMenuElement as any)?.addMenuItem === 'function') {
|
|
61
|
+
(popoverMenuElement as any).addMenuItem(item, index);
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
export const removeMenuItem = (index: number) => {
|
|
66
|
+
if (typeof (popoverMenuElement as any)?.removeMenuItem === 'function') {
|
|
67
|
+
(popoverMenuElement as any).removeMenuItem(index);
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
export const updateMenuItem = (index: number, item: PopoverMenuConfig) => {
|
|
72
|
+
if (typeof (popoverMenuElement as any)?.updateMenuItem === 'function') {
|
|
73
|
+
(popoverMenuElement as any).updateMenuItem(index, item);
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
// Reactively update items when props change (only after component is ready)
|
|
78
|
+
$effect(() => {
|
|
79
|
+
if (isReady) {
|
|
80
|
+
updateItems();
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
</script>
|
|
84
|
+
|
|
85
|
+
<!-- svelte-ignore a11y_unknown_aria_attribute -->
|
|
86
|
+
<liwe3-popover-menu bind:this={popoverMenuElement} {...restProps}></liwe3-popover-menu>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { PopoverMenuConfig } from "@liwe3/webcomponents";
|
|
2
|
+
interface Props {
|
|
3
|
+
items?: PopoverMenuConfig[];
|
|
4
|
+
}
|
|
5
|
+
declare const PopoverMenu: import("svelte").Component<Props, {
|
|
6
|
+
/**
|
|
7
|
+
* Expose methods to parent component
|
|
8
|
+
*/ setItems: (newItems: PopoverMenuConfig[]) => void;
|
|
9
|
+
getItems: () => PopoverMenuConfig[];
|
|
10
|
+
addMenuItem: (item: PopoverMenuConfig, index?: number | null) => void;
|
|
11
|
+
removeMenuItem: (index: number) => void;
|
|
12
|
+
updateMenuItem: (index: number, item: PopoverMenuConfig) => void;
|
|
13
|
+
}, "">;
|
|
14
|
+
type PopoverMenu = ReturnType<typeof PopoverMenu>;
|
|
15
|
+
export default PopoverMenu;
|
|
16
|
+
//# sourceMappingURL=PopoverMenu.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PopoverMenu.svelte.d.ts","sourceRoot":"","sources":["../src/lib/PopoverMenu.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG5D,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC7B;AA0FH,QAAA,MAAM,WAAW;IAHjB;;SAEK,sBA9C0B,iBAAiB,EAAE;oBAM1B,iBAAiB,EAAE;wBAOb,iBAAiB,UAAS,MAAM,GAAG,IAAI;4BAMnC,MAAM;4BAMN,MAAM,QAAQ,iBAAiB;MAsBR,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
|
package/dist/SmartSelect.svelte
CHANGED
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
value?: string | string[];
|
|
11
11
|
options?: SelectOption[];
|
|
12
12
|
onchange?: (value: string | string[] | undefined) => void;
|
|
13
|
+
onsearch?: (value: string) => void;
|
|
13
14
|
onopen?: (event: CustomEvent) => void;
|
|
14
15
|
onclose?: (event: CustomEvent) => void;
|
|
15
|
-
onsearch?: (event: CustomEvent) => void;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
let {
|
|
@@ -95,7 +95,9 @@
|
|
|
95
95
|
});
|
|
96
96
|
|
|
97
97
|
smartSelectElement.addEventListener("search", (event) => {
|
|
98
|
-
|
|
98
|
+
const customEvent = event as CustomEvent;
|
|
99
|
+
const value = customEvent.detail.query;
|
|
100
|
+
onsearch?.(value);
|
|
99
101
|
});
|
|
100
102
|
};
|
|
101
103
|
|
|
@@ -105,13 +107,6 @@
|
|
|
105
107
|
|
|
106
108
|
updateAttributes();
|
|
107
109
|
bindEvents();
|
|
108
|
-
|
|
109
|
-
/*
|
|
110
|
-
// Watch for prop changes and update attributes
|
|
111
|
-
$effect(() => {
|
|
112
|
-
updateAttributes();
|
|
113
|
-
});
|
|
114
|
-
*/
|
|
115
110
|
});
|
|
116
111
|
|
|
117
112
|
/**
|
|
@@ -7,9 +7,9 @@ interface Props {
|
|
|
7
7
|
value?: string | string[];
|
|
8
8
|
options?: SelectOption[];
|
|
9
9
|
onchange?: (value: string | string[] | undefined) => void;
|
|
10
|
+
onsearch?: (value: string) => void;
|
|
10
11
|
onopen?: (event: CustomEvent) => void;
|
|
11
12
|
onclose?: (event: CustomEvent) => void;
|
|
12
|
-
onsearch?: (event: CustomEvent) => void;
|
|
13
13
|
}
|
|
14
14
|
declare const SmartSelect: import("svelte").Component<Props, {
|
|
15
15
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SmartSelect.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SmartSelect.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGvD,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IAC1D,
|
|
1
|
+
{"version":3,"file":"SmartSelect.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SmartSelect.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGvD,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACxC;AA4IH,QAAA,MAAM,WAAW;IAHjB;;SAEK;;;gCAxBiC,MAAM;kCAIJ,MAAM;;6BAQX,YAAY,EAAE;WAaQ,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<script module lang="ts">
|
|
2
|
+
import type { ToastConfig, ToastElement, ToastPosition } from '@liwe3/webcomponents';
|
|
3
|
+
|
|
4
|
+
// Re-export types for convenience
|
|
5
|
+
export type { ToastConfig, ToastElement, ToastPosition };
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Shows a toast notification with the given configuration.
|
|
9
|
+
*
|
|
10
|
+
* IMPORTANT: Make sure to add the <Toasts /> component to your layout first!
|
|
11
|
+
* The <Toasts /> component initializes the toast web component system.
|
|
12
|
+
*
|
|
13
|
+
* @param config - The toast configuration
|
|
14
|
+
* @returns The toast element instance (or undefined if called during SSR)
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```typescript
|
|
18
|
+
* // In your +layout.svelte
|
|
19
|
+
* import { Toasts } from '@liwe3/webcomponents-svelte';
|
|
20
|
+
* <Toasts />
|
|
21
|
+
*
|
|
22
|
+
* // In any component
|
|
23
|
+
* import { toastAdd } from '@liwe3/webcomponents-svelte';
|
|
24
|
+
*
|
|
25
|
+
* toastAdd({
|
|
26
|
+
* title: 'Success!',
|
|
27
|
+
* text: 'Your changes have been saved.',
|
|
28
|
+
* type: 'success',
|
|
29
|
+
* duration: 5000,
|
|
30
|
+
* position: 'TR' // Optional: TL, T, TR, BL, B, BR (default: TR)
|
|
31
|
+
* });
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
export const toastAdd = (config: ToastConfig): ToastElement | undefined => {
|
|
35
|
+
// Only run on client side
|
|
36
|
+
if (typeof window === 'undefined') {
|
|
37
|
+
return undefined;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Get the toastAdd function from window (set by the web component)
|
|
41
|
+
// The <Toasts /> component should have already loaded the web component
|
|
42
|
+
const globalToastAdd = (window as any).__liwe3_toastAdd;
|
|
43
|
+
|
|
44
|
+
if (!globalToastAdd) {
|
|
45
|
+
console.error(
|
|
46
|
+
'toastAdd: Toast web component not initialized. Did you forget to add <Toasts /> to your layout?'
|
|
47
|
+
);
|
|
48
|
+
return undefined;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
return globalToastAdd(config);
|
|
52
|
+
};
|
|
53
|
+
</script>
|
|
54
|
+
|
|
55
|
+
<script lang="ts">
|
|
56
|
+
import { onMount } from 'svelte';
|
|
57
|
+
|
|
58
|
+
onMount(async () => {
|
|
59
|
+
// Only run on the client side (onMount only runs in browser)
|
|
60
|
+
// Import and initialize the Toast web component
|
|
61
|
+
const { toastAdd: coreToastAdd } = await import('@liwe3/webcomponents/toast');
|
|
62
|
+
|
|
63
|
+
// Expose toastAdd on window so the wrapper can access it
|
|
64
|
+
(window as any).__liwe3_toastAdd = coreToastAdd;
|
|
65
|
+
});
|
|
66
|
+
</script>
|
|
67
|
+
|
|
68
|
+
<!-- This component doesn't render anything, it just loads the web component -->
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import type { ToastConfig, ToastElement, ToastPosition } from '@liwe3/webcomponents';
|
|
2
|
+
export type { ToastConfig, ToastElement, ToastPosition };
|
|
3
|
+
/**
|
|
4
|
+
* Shows a toast notification with the given configuration.
|
|
5
|
+
*
|
|
6
|
+
* IMPORTANT: Make sure to add the <Toasts /> component to your layout first!
|
|
7
|
+
* The <Toasts /> component initializes the toast web component system.
|
|
8
|
+
*
|
|
9
|
+
* @param config - The toast configuration
|
|
10
|
+
* @returns The toast element instance (or undefined if called during SSR)
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```typescript
|
|
14
|
+
* // In your +layout.svelte
|
|
15
|
+
* import { Toasts } from '@liwe3/webcomponents-svelte';
|
|
16
|
+
* <Toasts />
|
|
17
|
+
*
|
|
18
|
+
* // In any component
|
|
19
|
+
* import { toastAdd } from '@liwe3/webcomponents-svelte';
|
|
20
|
+
*
|
|
21
|
+
* toastAdd({
|
|
22
|
+
* title: 'Success!',
|
|
23
|
+
* text: 'Your changes have been saved.',
|
|
24
|
+
* type: 'success',
|
|
25
|
+
* duration: 5000,
|
|
26
|
+
* position: 'TR' // Optional: TL, T, TR, BL, B, BR (default: TR)
|
|
27
|
+
* });
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
30
|
+
export declare const toastAdd: (config: ToastConfig) => ToastElement | undefined;
|
|
31
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
32
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
33
|
+
$$bindings?: Bindings;
|
|
34
|
+
} & Exports;
|
|
35
|
+
(internal: unknown, props: {
|
|
36
|
+
$$events?: Events;
|
|
37
|
+
$$slots?: Slots;
|
|
38
|
+
}): Exports & {
|
|
39
|
+
$set?: any;
|
|
40
|
+
$on?: any;
|
|
41
|
+
};
|
|
42
|
+
z_$$bindings?: Bindings;
|
|
43
|
+
}
|
|
44
|
+
declare const Toasts: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
45
|
+
[evt: string]: CustomEvent<any>;
|
|
46
|
+
}, {}, {}, string>;
|
|
47
|
+
type Toasts = InstanceType<typeof Toasts>;
|
|
48
|
+
export default Toasts;
|
|
49
|
+
//# sourceMappingURL=Toasts.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toasts.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Toasts.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGrF,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,QAAQ,GAAI,QAAQ,WAAW,KAAG,YAAY,GAAG,SAkB7D,CAAC;AAwBH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,MAAM;;kBAA+E,CAAC;AAC1E,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { onMount } from "svelte";
|
|
3
|
+
import type { TreeNode } from "@liwe3/webcomponents";
|
|
4
|
+
|
|
5
|
+
interface Props {
|
|
6
|
+
data?: TreeNode[];
|
|
7
|
+
indentWidth?: number;
|
|
8
|
+
selectedIds?: string[];
|
|
9
|
+
onselectionchange?: (selectedIds: string[]) => void;
|
|
10
|
+
ontoggle?: (event: CustomEvent<{ nodeId: string; expanded: boolean }>) => void;
|
|
11
|
+
onitemselected?: (event: CustomEvent<{ node: TreeNode; nodeId: string }>) => void;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
let {
|
|
15
|
+
data = $bindable([]),
|
|
16
|
+
indentWidth = 20,
|
|
17
|
+
selectedIds = $bindable([]),
|
|
18
|
+
onselectionchange,
|
|
19
|
+
ontoggle,
|
|
20
|
+
onitemselected,
|
|
21
|
+
...restProps
|
|
22
|
+
}: Props = $props();
|
|
23
|
+
|
|
24
|
+
let treeViewElement: HTMLElement;
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Updates the web component's attributes based on props
|
|
28
|
+
*/
|
|
29
|
+
const updateAttributes = () => {
|
|
30
|
+
if (!treeViewElement) return;
|
|
31
|
+
|
|
32
|
+
// Set data
|
|
33
|
+
if (data && data.length > 0) {
|
|
34
|
+
(treeViewElement as any).data = data;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// Set indent width
|
|
38
|
+
treeViewElement.setAttribute("indent-width", indentWidth.toString());
|
|
39
|
+
|
|
40
|
+
// Set selected IDs
|
|
41
|
+
if (selectedIds && selectedIds.length > 0) {
|
|
42
|
+
(treeViewElement as any).selectedNodeIds = selectedIds;
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* Binds event listeners to the web component
|
|
48
|
+
*/
|
|
49
|
+
const bindEvents = () => {
|
|
50
|
+
if (!treeViewElement) return;
|
|
51
|
+
|
|
52
|
+
treeViewElement.addEventListener("selectionchange", (event) => {
|
|
53
|
+
const customEvent = event as CustomEvent;
|
|
54
|
+
selectedIds = customEvent.detail.selectedIds;
|
|
55
|
+
onselectionchange?.(selectedIds);
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
treeViewElement.addEventListener("toggle", (event) => {
|
|
59
|
+
ontoggle?.(event as CustomEvent);
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
treeViewElement.addEventListener("itemselected", (event) => {
|
|
63
|
+
onitemselected?.(event as CustomEvent);
|
|
64
|
+
});
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
onMount(async () => {
|
|
68
|
+
// Dynamically import the web component
|
|
69
|
+
await import("@liwe3/webcomponents/tree-view");
|
|
70
|
+
|
|
71
|
+
updateAttributes();
|
|
72
|
+
bindEvents();
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* Expose methods to parent component
|
|
77
|
+
*/
|
|
78
|
+
export const toggleExpansion = (nodeId: string) => {
|
|
79
|
+
(treeViewElement as any)?.toggleExpansion(nodeId);
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
export const toggleSelection = (nodeId: string) => {
|
|
83
|
+
(treeViewElement as any)?.toggleSelection(nodeId);
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
export const selectAll = () => {
|
|
87
|
+
(treeViewElement as any)?.selectAll();
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
export const deselectAll = () => {
|
|
91
|
+
(treeViewElement as any)?.deselectAll();
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
export const expandAll = () => {
|
|
95
|
+
(treeViewElement as any)?.expandAll();
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
export const collapseAll = () => {
|
|
99
|
+
(treeViewElement as any)?.collapseAll();
|
|
100
|
+
};
|
|
101
|
+
</script>
|
|
102
|
+
|
|
103
|
+
<liwe3-tree-view bind:this={treeViewElement} {...restProps}></liwe3-tree-view>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { TreeNode } from "@liwe3/webcomponents";
|
|
2
|
+
interface Props {
|
|
3
|
+
data?: TreeNode[];
|
|
4
|
+
indentWidth?: number;
|
|
5
|
+
selectedIds?: string[];
|
|
6
|
+
onselectionchange?: (selectedIds: string[]) => void;
|
|
7
|
+
ontoggle?: (event: CustomEvent<{
|
|
8
|
+
nodeId: string;
|
|
9
|
+
expanded: boolean;
|
|
10
|
+
}>) => void;
|
|
11
|
+
onitemselected?: (event: CustomEvent<{
|
|
12
|
+
node: TreeNode;
|
|
13
|
+
nodeId: string;
|
|
14
|
+
}>) => void;
|
|
15
|
+
}
|
|
16
|
+
declare const TreeView: import("svelte").Component<Props, {
|
|
17
|
+
/**
|
|
18
|
+
* Expose methods to parent component
|
|
19
|
+
*/ toggleExpansion: (nodeId: string) => void;
|
|
20
|
+
toggleSelection: (nodeId: string) => void;
|
|
21
|
+
selectAll: () => void;
|
|
22
|
+
deselectAll: () => void;
|
|
23
|
+
expandAll: () => void;
|
|
24
|
+
collapseAll: () => void;
|
|
25
|
+
}, "data" | "selectedIds">;
|
|
26
|
+
type TreeView = ReturnType<typeof TreeView>;
|
|
27
|
+
export default TreeView;
|
|
28
|
+
//# sourceMappingURL=TreeView.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TreeView.svelte.d.ts","sourceRoot":"","sources":["../src/lib/TreeView.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGnD,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC/E,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CACnF;AAsGH,QAAA,MAAM,QAAQ;IAHd;;SAEK,2BA/B+B,MAAM;8BAIN,MAAM;;;;;0BA4BY,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,14 @@
|
|
|
2
2
|
* @liwe3/webcomponents-svelte
|
|
3
3
|
* Svelte 5 wrappers for @liwe3/webcomponents
|
|
4
4
|
*/
|
|
5
|
-
export type { SelectOption, AITextEditorConfig } from '@liwe3/webcomponents';
|
|
5
|
+
export type { SelectOption, AITextEditorConfig, ToastType, ToastButton, ToastConfig, ToastElement, PopoverMenuItem, PopoverMenuConfig, DateRange, TreeNode, UploadedFile, ChunkUploaderConfig } from '@liwe3/webcomponents';
|
|
6
6
|
export { default as SmartSelect } from './SmartSelect.svelte';
|
|
7
7
|
export { default as AITextEditor } from './AITextEditor.svelte';
|
|
8
|
+
export { default as PopoverMenu } from './PopoverMenu.svelte';
|
|
9
|
+
export { default as DateSelector } from './DateSelector.svelte';
|
|
10
|
+
export { default as TreeView } from './TreeView.svelte';
|
|
11
|
+
export { default as Drawer } from './Drawer.svelte';
|
|
12
|
+
export { default as ContainerBox } from './ContainerBox.svelte';
|
|
13
|
+
export { default as ChunkUploader } from './ChunkUploader.svelte';
|
|
14
|
+
export { default as Toasts, toastAdd } from './Toasts.svelte';
|
|
8
15
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAG5N,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAGlE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -5,3 +5,11 @@
|
|
|
5
5
|
// Export Svelte components
|
|
6
6
|
export { default as SmartSelect } from './SmartSelect.svelte';
|
|
7
7
|
export { default as AITextEditor } from './AITextEditor.svelte';
|
|
8
|
+
export { default as PopoverMenu } from './PopoverMenu.svelte';
|
|
9
|
+
export { default as DateSelector } from './DateSelector.svelte';
|
|
10
|
+
export { default as TreeView } from './TreeView.svelte';
|
|
11
|
+
export { default as Drawer } from './Drawer.svelte';
|
|
12
|
+
export { default as ContainerBox } from './ContainerBox.svelte';
|
|
13
|
+
export { default as ChunkUploader } from './ChunkUploader.svelte';
|
|
14
|
+
// Export Toasts component and toastAdd function
|
|
15
|
+
export { default as Toasts, toastAdd } from './Toasts.svelte';
|
package/package.json
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@liwe3/webcomponents-svelte",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Svelte 5 wrappers for @liwe3/webcomponents",
|
|
5
5
|
"type": "module",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"module": "./dist/index.js",
|
|
6
8
|
"svelte": "./dist/index.js",
|
|
7
9
|
"types": "./dist/index.d.ts",
|
|
8
10
|
"exports": {
|
|
@@ -55,4 +57,4 @@
|
|
|
55
57
|
"access": "public"
|
|
56
58
|
},
|
|
57
59
|
"packageManager": "pnpm@10.16.0"
|
|
58
|
-
}
|
|
60
|
+
}
|