@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.
@@ -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"}
@@ -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
- onsearch?.(event as CustomEvent);
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,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACzC;AAiJH,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"}
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
@@ -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;AAG7E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,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.2",
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
+ }