@liwe3/webcomponents-svelte 1.0.14 → 1.1.11
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 +46 -0
- package/dist/AIMarkdownEditor.svelte +179 -0
- package/dist/AIMarkdownEditor.svelte.d.ts +30 -0
- package/dist/AIMarkdownEditor.svelte.d.ts.map +1 -0
- package/dist/AITextEditor.svelte +28 -27
- package/dist/AITextEditor.svelte.d.ts +1 -0
- package/dist/AITextEditor.svelte.d.ts.map +1 -1
- package/dist/ButtonToolbar.svelte +55 -0
- package/dist/ButtonToolbar.svelte.d.ts +15 -0
- package/dist/ButtonToolbar.svelte.d.ts.map +1 -0
- package/dist/CheckList.svelte +87 -0
- package/dist/CheckList.svelte.d.ts +11 -0
- package/dist/CheckList.svelte.d.ts.map +1 -0
- package/dist/ChunkUploader.svelte +211 -0
- package/dist/ChunkUploader.svelte.d.ts +29 -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/Dialogs.svelte +82 -0
- package/dist/Dialogs.svelte.d.ts +65 -0
- package/dist/Dialogs.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/MarkdownPreview.svelte +50 -0
- package/dist/MarkdownPreview.svelte.d.ts +9 -0
- package/dist/MarkdownPreview.svelte.d.ts.map +1 -0
- package/dist/ResizableCropper.svelte +168 -0
- package/dist/ResizableCropper.svelte.d.ts +24 -0
- package/dist/ResizableCropper.svelte.d.ts.map +1 -0
- package/dist/Toasts.svelte +6 -2
- package/dist/Toasts.svelte.d.ts +4 -2
- package/dist/Toasts.svelte.d.ts.map +1 -1
- 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 +12 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +15 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -68,6 +68,34 @@ yarn add @liwe3/webcomponents @liwe3/webcomponents-svelte
|
|
|
68
68
|
/>
|
|
69
69
|
```
|
|
70
70
|
|
|
71
|
+
### AIMarkdownEditor
|
|
72
|
+
|
|
73
|
+
```svelte
|
|
74
|
+
<script>
|
|
75
|
+
import { AIMarkdownEditor } from '@liwe3/webcomponents-svelte';
|
|
76
|
+
|
|
77
|
+
let content = $state('');
|
|
78
|
+
</script>
|
|
79
|
+
|
|
80
|
+
<AIMarkdownEditor
|
|
81
|
+
bind:value={content}
|
|
82
|
+
apiKey="your-api-key"
|
|
83
|
+
style="width: 100%; height: 500px;"
|
|
84
|
+
/>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### MarkdownPreview
|
|
88
|
+
|
|
89
|
+
```svelte
|
|
90
|
+
<script>
|
|
91
|
+
import { MarkdownPreview } from '@liwe3/webcomponents-svelte';
|
|
92
|
+
|
|
93
|
+
let content = $state('# Hello World');
|
|
94
|
+
</script>
|
|
95
|
+
|
|
96
|
+
<MarkdownPreview value={content} />
|
|
97
|
+
```
|
|
98
|
+
|
|
71
99
|
## Features
|
|
72
100
|
|
|
73
101
|
- **Full Svelte 5 Support**: Uses Svelte 5 runes (`$state`, `$bindable`, `$effect`)
|
|
@@ -102,6 +130,24 @@ yarn add @liwe3/webcomponents @liwe3/webcomponents-svelte
|
|
|
102
130
|
- `onbeforesuggestion` (function): Called before requesting suggestion
|
|
103
131
|
- `onchange` (function): Change event handler
|
|
104
132
|
|
|
133
|
+
### AIMarkdownEditor Props
|
|
134
|
+
|
|
135
|
+
- `value` (string, bindable): Editor content
|
|
136
|
+
- `apiKey` (string): API key for AI service
|
|
137
|
+
- `suggestionDelay` (number): Delay before showing suggestions (ms)
|
|
138
|
+
- `systemPrompt` (string, bindable): System prompt for AI
|
|
139
|
+
- `apiEndpoint` (string): API endpoint URL
|
|
140
|
+
- `modelName` (string): Model name to use
|
|
141
|
+
- `context` (string): Additional context for AI
|
|
142
|
+
- `onbeforesuggestion` (function): Called before requesting suggestion
|
|
143
|
+
- `onchange` (function): Change event handler
|
|
144
|
+
|
|
145
|
+
### MarkdownPreview Props
|
|
146
|
+
|
|
147
|
+
- `value` (string): Markdown content to render
|
|
148
|
+
- `libUrl` (string): URL to load marked library from
|
|
149
|
+
- `onlibraryloaded` (function): Called when library is loaded
|
|
150
|
+
|
|
105
151
|
## License
|
|
106
152
|
|
|
107
153
|
MIT
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { onMount } from "svelte";
|
|
3
|
+
import type { AIMarkdownEditorElement } from "@liwe3/webcomponents";
|
|
4
|
+
|
|
5
|
+
interface Props {
|
|
6
|
+
value?: string;
|
|
7
|
+
apiKey?: string;
|
|
8
|
+
suggestionDelay?: number;
|
|
9
|
+
systemPrompt?: string;
|
|
10
|
+
apiEndpoint?: string;
|
|
11
|
+
modelName?: string;
|
|
12
|
+
context?: string;
|
|
13
|
+
|
|
14
|
+
onbeforesuggestion?: (data: any) => boolean;
|
|
15
|
+
onchange?: (value: string) => void;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
let {
|
|
19
|
+
value = $bindable(""),
|
|
20
|
+
apiKey = "",
|
|
21
|
+
suggestionDelay = 3000,
|
|
22
|
+
systemPrompt = $bindable(
|
|
23
|
+
"You are a helpful writing assistant. Continue the user's text naturally and coherently. Provide 1-3 sentences that would logically follow their writing. Keep the same tone and style. Do not repeat what they've already written."
|
|
24
|
+
),
|
|
25
|
+
apiEndpoint = "https://api.openai.com/v1/chat/completions",
|
|
26
|
+
modelName = "gpt-3.5-turbo",
|
|
27
|
+
context = "",
|
|
28
|
+
|
|
29
|
+
onbeforesuggestion,
|
|
30
|
+
onchange,
|
|
31
|
+
}: Props = $props();
|
|
32
|
+
|
|
33
|
+
let elementRef: AIMarkdownEditorElement;
|
|
34
|
+
let isReady = $state(false);
|
|
35
|
+
|
|
36
|
+
// Sync props to web component - only when ready
|
|
37
|
+
$effect(() => {
|
|
38
|
+
if (!isReady || !elementRef) return;
|
|
39
|
+
|
|
40
|
+
if (apiKey) elementRef.setApiKey(apiKey);
|
|
41
|
+
elementRef.setSuggestionDelay(suggestionDelay / 1000);
|
|
42
|
+
elementRef.setSystemPrompt(systemPrompt);
|
|
43
|
+
elementRef.setApiEndpoint(apiEndpoint);
|
|
44
|
+
elementRef.setModelName(modelName);
|
|
45
|
+
if (context) elementRef.setContext(context);
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
// Sync value to web component - only when ready
|
|
49
|
+
$effect(() => {
|
|
50
|
+
if (!isReady || !elementRef) return;
|
|
51
|
+
|
|
52
|
+
const currentText = elementRef.getText();
|
|
53
|
+
if (currentText !== value) {
|
|
54
|
+
elementRef.setText(value);
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
onMount(async () => {
|
|
59
|
+
// Dynamically import and register the web component
|
|
60
|
+
const { defineAIMarkdownEditor } = await import("@liwe3/webcomponents/ai-markdown-editor");
|
|
61
|
+
defineAIMarkdownEditor();
|
|
62
|
+
|
|
63
|
+
// Wait for element to be ready (next tick)
|
|
64
|
+
await new Promise(resolve => setTimeout(resolve, 0));
|
|
65
|
+
|
|
66
|
+
// Listen for changes from the web component
|
|
67
|
+
const handleChange = (event: CustomEvent) => {
|
|
68
|
+
const newValue = event.detail.value;
|
|
69
|
+
if (newValue !== value) {
|
|
70
|
+
value = newValue;
|
|
71
|
+
onchange?.(newValue);
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
// Forward beforeSuggestion event and allow parent to cancel
|
|
76
|
+
const handleBeforeSuggestion = (event: CustomEvent) => {
|
|
77
|
+
const cancel = onbeforesuggestion
|
|
78
|
+
? onbeforesuggestion(event.detail)
|
|
79
|
+
: false;
|
|
80
|
+
|
|
81
|
+
// propagate cancellation back to the underlying web component
|
|
82
|
+
if (cancel) event.preventDefault();
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
elementRef.addEventListener("change", handleChange);
|
|
86
|
+
elementRef.addEventListener(
|
|
87
|
+
"beforeSuggestion",
|
|
88
|
+
handleBeforeSuggestion as EventListener
|
|
89
|
+
);
|
|
90
|
+
|
|
91
|
+
// Mark as ready to enable $effects
|
|
92
|
+
isReady = true;
|
|
93
|
+
|
|
94
|
+
// Cleanup
|
|
95
|
+
return () => {
|
|
96
|
+
elementRef?.removeEventListener("change", handleChange);
|
|
97
|
+
elementRef?.removeEventListener(
|
|
98
|
+
"beforeSuggestion",
|
|
99
|
+
handleBeforeSuggestion as EventListener
|
|
100
|
+
);
|
|
101
|
+
};
|
|
102
|
+
});
|
|
103
|
+
|
|
104
|
+
// Public methods to expose web component functionality
|
|
105
|
+
export const setText = (text: string) => {
|
|
106
|
+
value = text;
|
|
107
|
+
if (isReady && elementRef) {
|
|
108
|
+
elementRef.setText(text);
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
|
|
112
|
+
export const getText = (): string => {
|
|
113
|
+
return elementRef?.getText() || "";
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
export const setContext = (ctx: string) => {
|
|
117
|
+
context = ctx;
|
|
118
|
+
if (isReady && elementRef) {
|
|
119
|
+
elementRef.setContext(ctx);
|
|
120
|
+
}
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
export const getContext = (): string => {
|
|
124
|
+
return elementRef?.getContext() || context;
|
|
125
|
+
};
|
|
126
|
+
|
|
127
|
+
export const setSystemPrompt = (prompt: string) => {
|
|
128
|
+
systemPrompt = prompt;
|
|
129
|
+
if (isReady && elementRef) {
|
|
130
|
+
elementRef.setSystemPrompt(prompt);
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
export const getSystemPrompt = (): string => {
|
|
135
|
+
return elementRef?.getSystemPrompt() || systemPrompt;
|
|
136
|
+
};
|
|
137
|
+
|
|
138
|
+
export const setApiKey = (key: string) => {
|
|
139
|
+
if (isReady && elementRef) {
|
|
140
|
+
elementRef.setApiKey(key);
|
|
141
|
+
}
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
export const getApiKey = (): string => {
|
|
145
|
+
return elementRef?.getApiKey() || "";
|
|
146
|
+
};
|
|
147
|
+
|
|
148
|
+
export const setSuggestionDelay = (seconds: number) => {
|
|
149
|
+
if (isReady && elementRef) {
|
|
150
|
+
elementRef.setSuggestionDelay(seconds);
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
export const getSuggestionDelay = (): number => {
|
|
155
|
+
return elementRef?.getSuggestionDelay() || suggestionDelay;
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
export const setApiEndpoint = (endpoint: string) => {
|
|
159
|
+
if (isReady && elementRef) {
|
|
160
|
+
elementRef.setApiEndpoint(endpoint);
|
|
161
|
+
}
|
|
162
|
+
};
|
|
163
|
+
|
|
164
|
+
export const getApiEndpoint = (): string => {
|
|
165
|
+
return elementRef?.getApiEndpoint() || apiEndpoint;
|
|
166
|
+
};
|
|
167
|
+
|
|
168
|
+
export const setModelName = (model: string) => {
|
|
169
|
+
if (isReady && elementRef) {
|
|
170
|
+
elementRef.setModelName(model);
|
|
171
|
+
}
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
export const getModelName = (): string => {
|
|
175
|
+
return elementRef?.getModelName() || modelName;
|
|
176
|
+
};
|
|
177
|
+
</script>
|
|
178
|
+
|
|
179
|
+
<liwe3-ai-markdown-editor bind:this={elementRef}></liwe3-ai-markdown-editor>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
interface Props {
|
|
2
|
+
value?: string;
|
|
3
|
+
apiKey?: string;
|
|
4
|
+
suggestionDelay?: number;
|
|
5
|
+
systemPrompt?: string;
|
|
6
|
+
apiEndpoint?: string;
|
|
7
|
+
modelName?: string;
|
|
8
|
+
context?: string;
|
|
9
|
+
onbeforesuggestion?: (data: any) => boolean;
|
|
10
|
+
onchange?: (value: string) => void;
|
|
11
|
+
}
|
|
12
|
+
declare const AIMarkdownEditor: import("svelte").Component<Props, {
|
|
13
|
+
setText: (text: string) => void;
|
|
14
|
+
getText: () => string;
|
|
15
|
+
setContext: (ctx: string) => void;
|
|
16
|
+
getContext: () => string;
|
|
17
|
+
setSystemPrompt: (prompt: string) => void;
|
|
18
|
+
getSystemPrompt: () => string;
|
|
19
|
+
setApiKey: (key: string) => void;
|
|
20
|
+
getApiKey: () => string;
|
|
21
|
+
setSuggestionDelay: (seconds: number) => void;
|
|
22
|
+
getSuggestionDelay: () => number;
|
|
23
|
+
setApiEndpoint: (endpoint: string) => void;
|
|
24
|
+
getApiEndpoint: () => string;
|
|
25
|
+
setModelName: (model: string) => void;
|
|
26
|
+
getModelName: () => string;
|
|
27
|
+
}, "value" | "systemPrompt">;
|
|
28
|
+
type AIMarkdownEditor = ReturnType<typeof AIMarkdownEditor>;
|
|
29
|
+
export default AIMarkdownEditor;
|
|
30
|
+
//# sourceMappingURL=AIMarkdownEditor.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AIMarkdownEditor.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AIMarkdownEditor.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AA2KH,QAAA,MAAM,gBAAgB;oBA9EI,MAAM;mBAOT,MAAM;sBAID,MAAM;sBAOR,MAAM;8BAII,MAAM;2BAOX,MAAM;qBAIV,MAAM;qBAMR,MAAM;kCAIS,MAAM;8BAMZ,MAAM;+BAIH,MAAM;0BAMb,MAAM;0BAIJ,MAAM;wBAMV,MAAM;4BAS4B,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
|
package/dist/AITextEditor.svelte
CHANGED
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
placeholder?: string;
|
|
12
12
|
|
|
13
13
|
onbeforesuggestion?: (data: any) => boolean;
|
|
14
|
+
oncompletionerror?: (error: string) => void;
|
|
14
15
|
onchange?: (value: string) => void;
|
|
15
16
|
}
|
|
16
17
|
|
|
@@ -26,11 +27,12 @@
|
|
|
26
27
|
placeholder = "Start writing your markdown text here...",
|
|
27
28
|
|
|
28
29
|
onbeforesuggestion,
|
|
30
|
+
oncompletionerror,
|
|
29
31
|
onchange,
|
|
30
32
|
}: Props = $props();
|
|
31
33
|
|
|
32
34
|
let elementRef: HTMLElement;
|
|
33
|
-
let webComponent
|
|
35
|
+
let webComponent = $state<any>(null);
|
|
34
36
|
|
|
35
37
|
/**
|
|
36
38
|
* Updates the web component property and syncs with Svelte state
|
|
@@ -52,32 +54,22 @@
|
|
|
52
54
|
}
|
|
53
55
|
};
|
|
54
56
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
updateWebComponentProperty("suggestionDelay", suggestionDelay);
|
|
63
|
-
updateWebComponentProperty("systemPrompt", systemPrompt);
|
|
64
|
-
updateWebComponentProperty("apiEndpoint", apiEndpoint);
|
|
65
|
-
updateWebComponentProperty("modelName", modelName);
|
|
66
|
-
|
|
67
|
-
// Set initial text value
|
|
68
|
-
if (value && webComponent.getText() !== value) {
|
|
69
|
-
webComponent.setText(value);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
// Set placeholder
|
|
73
|
-
const textarea = webComponent.shadowRoot?.getElementById("editor");
|
|
74
|
-
if (textarea && placeholder) {
|
|
75
|
-
textarea.placeholder = placeholder;
|
|
57
|
+
$effect(() => {
|
|
58
|
+
if (webComponent) {
|
|
59
|
+
updateWebComponentProperty("apiKey", apiKey);
|
|
60
|
+
updateWebComponentProperty("suggestionDelay", suggestionDelay / 1000);
|
|
61
|
+
updateWebComponentProperty("systemPrompt", systemPrompt);
|
|
62
|
+
updateWebComponentProperty("apiEndpoint", apiEndpoint);
|
|
63
|
+
updateWebComponentProperty("modelName", modelName);
|
|
76
64
|
}
|
|
77
|
-
};
|
|
65
|
+
});
|
|
78
66
|
|
|
79
67
|
$effect(() => {
|
|
80
|
-
if (
|
|
68
|
+
if (
|
|
69
|
+
webComponent &&
|
|
70
|
+
typeof webComponent.getText === "function" &&
|
|
71
|
+
webComponent.getText() !== value
|
|
72
|
+
) {
|
|
81
73
|
webComponent.setText(value);
|
|
82
74
|
}
|
|
83
75
|
});
|
|
@@ -98,9 +90,6 @@
|
|
|
98
90
|
// Get reference to the web component
|
|
99
91
|
webComponent = elementRef;
|
|
100
92
|
|
|
101
|
-
// Sync all initial props
|
|
102
|
-
syncAllProps();
|
|
103
|
-
|
|
104
93
|
// Listen for changes from the web component
|
|
105
94
|
const handleChange = (event: CustomEvent) => {
|
|
106
95
|
const newValue = event.detail.value;
|
|
@@ -120,11 +109,19 @@
|
|
|
120
109
|
if (cancel) event.preventDefault();
|
|
121
110
|
};
|
|
122
111
|
|
|
112
|
+
const handleCompletionError = (event: CustomEvent) => {
|
|
113
|
+
oncompletionerror?.(event.detail.error);
|
|
114
|
+
};
|
|
115
|
+
|
|
123
116
|
webComponent.addEventListener("change", handleChange);
|
|
124
117
|
webComponent.addEventListener(
|
|
125
118
|
"beforeSuggestion",
|
|
126
119
|
handleBeforeSuggestion as EventListener
|
|
127
120
|
);
|
|
121
|
+
webComponent.addEventListener(
|
|
122
|
+
"oncompletionerror",
|
|
123
|
+
handleCompletionError as EventListener
|
|
124
|
+
);
|
|
128
125
|
|
|
129
126
|
// Cleanup
|
|
130
127
|
return () => {
|
|
@@ -133,6 +130,10 @@
|
|
|
133
130
|
"beforeSuggestion",
|
|
134
131
|
handleBeforeSuggestion as EventListener
|
|
135
132
|
);
|
|
133
|
+
webComponent?.removeEventListener(
|
|
134
|
+
"oncompletionerror",
|
|
135
|
+
handleCompletionError as EventListener
|
|
136
|
+
);
|
|
136
137
|
};
|
|
137
138
|
});
|
|
138
139
|
|
|
@@ -7,6 +7,7 @@ interface Props {
|
|
|
7
7
|
modelName?: string;
|
|
8
8
|
placeholder?: string;
|
|
9
9
|
onbeforesuggestion?: (data: any) => boolean;
|
|
10
|
+
oncompletionerror?: (error: string) => void;
|
|
10
11
|
onchange?: (value: string) => void;
|
|
11
12
|
}
|
|
12
13
|
declare const AITextEditor: import("svelte").Component<Props, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AITextEditor.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AITextEditor.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AA4MH,QAAA,MAAM,YAAY;oBA5EQ,MAAM;mBAMT,MAAM;0BAKG,MAAM;sBAKZ,MAAM;8BAKI,MAAM;2BAMX,MAAM;qBAKV,MAAM;qBAKR,MAAM;kCAKS,MAAM;8BAKZ,MAAM;+BAKH,MAAM;0BAKb,MAAM;0BAKJ,MAAM;wBAKV,MAAM;4BASwB,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
|
|
1
|
+
{"version":3,"file":"AITextEditor.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AITextEditor.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC;IAC5C,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AA4MH,QAAA,MAAM,YAAY;oBA5EQ,MAAM;mBAMT,MAAM;0BAKG,MAAM;sBAKZ,MAAM;8BAKI,MAAM;2BAMX,MAAM;qBAKV,MAAM;qBAKR,MAAM;kCAKS,MAAM;8BAKZ,MAAM;+BAKH,MAAM;0BAKb,MAAM;0BAKJ,MAAM;wBAKV,MAAM;4BASwB,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { onMount } from "svelte";
|
|
3
|
+
import type { ButtonToolbarGroup, ButtonToolbarItem } from "@liwe3/webcomponents";
|
|
4
|
+
|
|
5
|
+
interface Props {
|
|
6
|
+
orientation?: 'horizontal' | 'vertical';
|
|
7
|
+
groups?: ButtonToolbarGroup[];
|
|
8
|
+
onbuttonclick?: (detail: { id: string; action: string; originalEvent: Event; item: ButtonToolbarItem }) => void;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
let {
|
|
12
|
+
orientation = "horizontal",
|
|
13
|
+
groups = [],
|
|
14
|
+
onbuttonclick,
|
|
15
|
+
...restProps
|
|
16
|
+
}: Props = $props();
|
|
17
|
+
|
|
18
|
+
let elementRef: HTMLElement;
|
|
19
|
+
let webComponent = $state<any>(null);
|
|
20
|
+
|
|
21
|
+
$effect(() => {
|
|
22
|
+
if (webComponent) {
|
|
23
|
+
webComponent.orientation = orientation;
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
$effect(() => {
|
|
28
|
+
if (webComponent) {
|
|
29
|
+
webComponent.groups = groups;
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
onMount(async () => {
|
|
34
|
+
// Dynamically import the web component
|
|
35
|
+
await import("@liwe3/webcomponents/button-toolbar");
|
|
36
|
+
|
|
37
|
+
// Get reference to the web component
|
|
38
|
+
webComponent = elementRef;
|
|
39
|
+
|
|
40
|
+
// Listen for events
|
|
41
|
+
const handleButtonClick = (event: CustomEvent) => {
|
|
42
|
+
onbuttonclick?.(event.detail);
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
webComponent.addEventListener("button-click", handleButtonClick);
|
|
46
|
+
|
|
47
|
+
// Cleanup
|
|
48
|
+
return () => {
|
|
49
|
+
webComponent?.removeEventListener("button-click", handleButtonClick);
|
|
50
|
+
};
|
|
51
|
+
});
|
|
52
|
+
</script>
|
|
53
|
+
|
|
54
|
+
<!-- svelte-ignore a11y_unknown_aria_attribute -->
|
|
55
|
+
<liwe3-button-toolbar bind:this={elementRef} {...restProps}></liwe3-button-toolbar>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { ButtonToolbarGroup, ButtonToolbarItem } from "@liwe3/webcomponents";
|
|
2
|
+
interface Props {
|
|
3
|
+
orientation?: 'horizontal' | 'vertical';
|
|
4
|
+
groups?: ButtonToolbarGroup[];
|
|
5
|
+
onbuttonclick?: (detail: {
|
|
6
|
+
id: string;
|
|
7
|
+
action: string;
|
|
8
|
+
originalEvent: Event;
|
|
9
|
+
item: ButtonToolbarItem;
|
|
10
|
+
}) => void;
|
|
11
|
+
}
|
|
12
|
+
declare const ButtonToolbar: import("svelte").Component<Props, {}, "">;
|
|
13
|
+
type ButtonToolbar = ReturnType<typeof ButtonToolbar>;
|
|
14
|
+
export default ButtonToolbar;
|
|
15
|
+
//# sourceMappingURL=ButtonToolbar.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonToolbar.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ButtonToolbar.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGhF,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,MAAM,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC9B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,aAAa,EAAE,KAAK,CAAC;QAAC,IAAI,EAAE,iBAAiB,CAAA;KAAE,KAAK,IAAI,CAAC;CACjH;AAsDH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { onMount } from 'svelte';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
import type {
|
|
5
|
+
CheckListElement as CheckListElementType,
|
|
6
|
+
CheckListItem,
|
|
7
|
+
} from '@liwe3/webcomponents';
|
|
8
|
+
|
|
9
|
+
interface Props extends HTMLAttributes<CheckListElementType> {
|
|
10
|
+
title?: string;
|
|
11
|
+
items?: CheckListItem[];
|
|
12
|
+
onchange?: (items: CheckListItem[]) => void;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
let {
|
|
16
|
+
title = 'Checklist',
|
|
17
|
+
items = [],
|
|
18
|
+
onchange,
|
|
19
|
+
...restProps
|
|
20
|
+
}: Props = $props();
|
|
21
|
+
|
|
22
|
+
let element: CheckListElementType;
|
|
23
|
+
let isReady = $state(false);
|
|
24
|
+
let removeListeners: (() => void) | null = null;
|
|
25
|
+
|
|
26
|
+
const syncProps = () => {
|
|
27
|
+
if (!isReady || !element) return;
|
|
28
|
+
element.title = title;
|
|
29
|
+
element.items = items;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
const bindEvents = () => {
|
|
33
|
+
if (!element) return;
|
|
34
|
+
|
|
35
|
+
const handleChange = (event: CustomEvent) => {
|
|
36
|
+
const newItems = event.detail.items;
|
|
37
|
+
onchange?.(newItems);
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
element.addEventListener('change', handleChange as EventListener);
|
|
41
|
+
|
|
42
|
+
removeListeners = () => {
|
|
43
|
+
element.removeEventListener('change', handleChange as EventListener);
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
onMount(() => {
|
|
48
|
+
let isMounted = true;
|
|
49
|
+
|
|
50
|
+
const setup = async () => {
|
|
51
|
+
// Dynamic import to ensure the web component is registered
|
|
52
|
+
await import('@liwe3/webcomponents');
|
|
53
|
+
await customElements.whenDefined('liwe3-checklist');
|
|
54
|
+
|
|
55
|
+
if (!isMounted) return;
|
|
56
|
+
isReady = true;
|
|
57
|
+
syncProps();
|
|
58
|
+
bindEvents();
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
void setup();
|
|
62
|
+
|
|
63
|
+
return () => {
|
|
64
|
+
isMounted = false;
|
|
65
|
+
removeListeners?.();
|
|
66
|
+
removeListeners = null;
|
|
67
|
+
};
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
$effect(() => {
|
|
71
|
+
if (!isReady || !element) return;
|
|
72
|
+
element.title = title;
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
$effect(() => {
|
|
76
|
+
if (!isReady || !element) return;
|
|
77
|
+
// We need to be careful not to create an infinite loop if the change event updates the items prop
|
|
78
|
+
// But since we are passing a new array reference from the parent usually, it should be fine.
|
|
79
|
+
// However, if the parent updates the array in place, Svelte might not detect it unless using $state.
|
|
80
|
+
// For now, we assume standard Svelte 5 reactivity.
|
|
81
|
+
if (JSON.stringify(element.items) !== JSON.stringify(items)) {
|
|
82
|
+
element.items = items;
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
</script>
|
|
86
|
+
|
|
87
|
+
<liwe3-checklist bind:this={element} {...restProps}></liwe3-checklist>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
import type { CheckListElement as CheckListElementType, CheckListItem } from '@liwe3/webcomponents';
|
|
3
|
+
interface Props extends HTMLAttributes<CheckListElementType> {
|
|
4
|
+
title?: string;
|
|
5
|
+
items?: CheckListItem[];
|
|
6
|
+
onchange?: (items: CheckListItem[]) => void;
|
|
7
|
+
}
|
|
8
|
+
declare const CheckList: import("svelte").Component<Props, {}, "">;
|
|
9
|
+
type CheckList = ReturnType<typeof CheckList>;
|
|
10
|
+
export default CheckList;
|
|
11
|
+
//# sourceMappingURL=CheckList.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CheckList.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CheckList.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EACX,gBAAgB,IAAI,oBAAoB,EACxC,aAAa,EACb,MAAM,sBAAsB,CAAC;AAG9B,UAAU,KAAM,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;CAC5C;AAmFD,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
|