@liwe3/webcomponents-svelte 1.0.2 → 1.0.14
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/DateSelector.svelte +103 -0
- package/dist/DateSelector.svelte.d.ts +20 -0
- package/dist/DateSelector.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 +64 -0
- package/dist/Toasts.svelte.d.ts +47 -0
- package/dist/Toasts.svelte.d.ts.map +1 -0
- package/dist/index.d.ts +4 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/package.json +4 -2
|
@@ -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,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,64 @@
|
|
|
1
|
+
<script module lang="ts">
|
|
2
|
+
import type { ToastConfig, ToastElement } from '@liwe3/webcomponents';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Shows a toast notification with the given configuration.
|
|
6
|
+
*
|
|
7
|
+
* IMPORTANT: Make sure to add the <Toasts /> component to your layout first!
|
|
8
|
+
* The <Toasts /> component initializes the toast web component system.
|
|
9
|
+
*
|
|
10
|
+
* @param config - The toast configuration
|
|
11
|
+
* @returns The toast element instance (or undefined if called during SSR)
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```typescript
|
|
15
|
+
* // In your +layout.svelte
|
|
16
|
+
* import { Toasts } from '@liwe3/webcomponents-svelte';
|
|
17
|
+
* <Toasts />
|
|
18
|
+
*
|
|
19
|
+
* // In any component
|
|
20
|
+
* import { toastAdd } from '@liwe3/webcomponents-svelte';
|
|
21
|
+
*
|
|
22
|
+
* toastAdd({
|
|
23
|
+
* title: 'Success!',
|
|
24
|
+
* text: 'Your changes have been saved.',
|
|
25
|
+
* type: 'success',
|
|
26
|
+
* duration: 5000
|
|
27
|
+
* });
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
30
|
+
export const toastAdd = (config: ToastConfig): ToastElement | undefined => {
|
|
31
|
+
// Only run on client side
|
|
32
|
+
if (typeof window === 'undefined') {
|
|
33
|
+
return undefined;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// Get the toastAdd function from window (set by the web component)
|
|
37
|
+
// The <Toasts /> component should have already loaded the web component
|
|
38
|
+
const globalToastAdd = (window as any).__liwe3_toastAdd;
|
|
39
|
+
|
|
40
|
+
if (!globalToastAdd) {
|
|
41
|
+
console.error(
|
|
42
|
+
'toastAdd: Toast web component not initialized. Did you forget to add <Toasts /> to your layout?'
|
|
43
|
+
);
|
|
44
|
+
return undefined;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
return globalToastAdd(config);
|
|
48
|
+
};
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
<script lang="ts">
|
|
52
|
+
import { onMount } from 'svelte';
|
|
53
|
+
|
|
54
|
+
onMount(async () => {
|
|
55
|
+
// Only run on the client side (onMount only runs in browser)
|
|
56
|
+
// Import and initialize the Toast web component
|
|
57
|
+
const { toastAdd: coreToastAdd } = await import('@liwe3/webcomponents/toast');
|
|
58
|
+
|
|
59
|
+
// Expose toastAdd on window so the wrapper can access it
|
|
60
|
+
(window as any).__liwe3_toastAdd = coreToastAdd;
|
|
61
|
+
});
|
|
62
|
+
</script>
|
|
63
|
+
|
|
64
|
+
<!-- This component doesn't render anything, it just loads the web component -->
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import type { ToastConfig, ToastElement } from '@liwe3/webcomponents';
|
|
2
|
+
/**
|
|
3
|
+
* Shows a toast notification with the given configuration.
|
|
4
|
+
*
|
|
5
|
+
* IMPORTANT: Make sure to add the <Toasts /> component to your layout first!
|
|
6
|
+
* The <Toasts /> component initializes the toast web component system.
|
|
7
|
+
*
|
|
8
|
+
* @param config - The toast configuration
|
|
9
|
+
* @returns The toast element instance (or undefined if called during SSR)
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```typescript
|
|
13
|
+
* // In your +layout.svelte
|
|
14
|
+
* import { Toasts } from '@liwe3/webcomponents-svelte';
|
|
15
|
+
* <Toasts />
|
|
16
|
+
*
|
|
17
|
+
* // In any component
|
|
18
|
+
* import { toastAdd } from '@liwe3/webcomponents-svelte';
|
|
19
|
+
*
|
|
20
|
+
* toastAdd({
|
|
21
|
+
* title: 'Success!',
|
|
22
|
+
* text: 'Your changes have been saved.',
|
|
23
|
+
* type: 'success',
|
|
24
|
+
* duration: 5000
|
|
25
|
+
* });
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
export declare const toastAdd: (config: ToastConfig) => ToastElement | undefined;
|
|
29
|
+
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> {
|
|
30
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
31
|
+
$$bindings?: Bindings;
|
|
32
|
+
} & Exports;
|
|
33
|
+
(internal: unknown, props: {
|
|
34
|
+
$$events?: Events;
|
|
35
|
+
$$slots?: Slots;
|
|
36
|
+
}): Exports & {
|
|
37
|
+
$set?: any;
|
|
38
|
+
$on?: any;
|
|
39
|
+
};
|
|
40
|
+
z_$$bindings?: Bindings;
|
|
41
|
+
}
|
|
42
|
+
declare const Toasts: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
43
|
+
[evt: string]: CustomEvent<any>;
|
|
44
|
+
}, {}, {}, string>;
|
|
45
|
+
type Toasts = InstanceType<typeof Toasts>;
|
|
46
|
+
export default Toasts;
|
|
47
|
+
//# 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,MAAM,sBAAsB,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,10 @@
|
|
|
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 } 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 Toasts, toastAdd } from './Toasts.svelte';
|
|
8
11
|
//# 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,MAAM,sBAAsB,CAAC;AAG/K,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;AAGhE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -5,3 +5,7 @@
|
|
|
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 Toasts component and toastAdd function
|
|
11
|
+
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.0.14",
|
|
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
|
+
}
|