@websline/system-components 1.5.0 → 1.5.2
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/components/atoms/icon/components/Clock.svelte +27 -0
- package/dist/components/atoms/icon/components/Clock.svelte.d.ts +41 -0
- package/dist/components/atoms/icon/components/index.d.ts +1 -0
- package/dist/components/atoms/icon/components/index.js +1 -0
- package/dist/components/molecules/notifications/toast/Toast.svelte +3 -0
- package/dist/components/molecules/notifications/toast/Toast.svelte.d.ts +8 -0
- package/dist/components/molecules/notifications/toast/toast.variants.js +1 -1
- package/dist/components/organisms/dialog/DialogAction.svelte +5 -9
- package/dist/components/organisms/dialog/DialogActions.svelte +18 -3
- package/dist/components/organisms/notificationGroup/NotificationGroup.svelte +14 -7
- package/dist/utils/notification.d.ts +1 -1
- package/dist/utils/notification.js +7 -1
- package/package.json +31 -31
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
/**
|
|
3
|
+
* @typedef {Object} Props
|
|
4
|
+
* @property {string} [color=""] Icon color
|
|
5
|
+
* @property {number} [height=24] Icon height
|
|
6
|
+
* @property {number} [strokeWidth=1.5] Icon StrokeWidth
|
|
7
|
+
* @property {number} [width=24] Icon width
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
/** @type {Props} */
|
|
11
|
+
let { color, height, width, strokeWidth, ...rest } = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<svg
|
|
15
|
+
{height}
|
|
16
|
+
{width}
|
|
17
|
+
viewBox="0 0 24 24"
|
|
18
|
+
fill="none"
|
|
19
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
20
|
+
{...rest}>
|
|
21
|
+
<path
|
|
22
|
+
d="M11.882 6.77364L11.8814 12.178L15.6969 15.9935M12 21C16.9706 21 21 16.9706 21 12C21 7.02945 16.9706 3 12 3C7.02943 3 3 7.02945 3 12C3 16.9706 7.02943 21 12 21Z"
|
|
23
|
+
stroke={color}
|
|
24
|
+
stroke-width={strokeWidth}
|
|
25
|
+
stroke-linecap="round"
|
|
26
|
+
stroke-linejoin="round" />
|
|
27
|
+
</svg>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
export default Clock;
|
|
2
|
+
type Clock = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const Clock: import("svelte").Component<{
|
|
7
|
+
/**
|
|
8
|
+
* Icon color
|
|
9
|
+
*/
|
|
10
|
+
color?: string | undefined;
|
|
11
|
+
/**
|
|
12
|
+
* Icon height
|
|
13
|
+
*/
|
|
14
|
+
height?: number | undefined;
|
|
15
|
+
/**
|
|
16
|
+
* Icon StrokeWidth
|
|
17
|
+
*/
|
|
18
|
+
strokeWidth?: number | undefined;
|
|
19
|
+
/**
|
|
20
|
+
* Icon width
|
|
21
|
+
*/
|
|
22
|
+
width?: number | undefined;
|
|
23
|
+
}, {}, "">;
|
|
24
|
+
type Props = {
|
|
25
|
+
/**
|
|
26
|
+
* Icon color
|
|
27
|
+
*/
|
|
28
|
+
color?: string | undefined;
|
|
29
|
+
/**
|
|
30
|
+
* Icon height
|
|
31
|
+
*/
|
|
32
|
+
height?: number | undefined;
|
|
33
|
+
/**
|
|
34
|
+
* Icon StrokeWidth
|
|
35
|
+
*/
|
|
36
|
+
strokeWidth?: number | undefined;
|
|
37
|
+
/**
|
|
38
|
+
* Icon width
|
|
39
|
+
*/
|
|
40
|
+
width?: number | undefined;
|
|
41
|
+
};
|
|
@@ -28,6 +28,7 @@ export { default as ChevronDoubleLeft } from "./ChevronDoubleLeft.svelte";
|
|
|
28
28
|
export { default as ChevronDoubleRight } from "./ChevronDoubleRight.svelte";
|
|
29
29
|
export { default as ChevronDown } from "./ChevronDown.svelte";
|
|
30
30
|
export { default as Clipboard } from "./Clipboard.svelte";
|
|
31
|
+
export { default as Clock } from "./Clock.svelte";
|
|
31
32
|
export { default as Close } from "./Close.svelte";
|
|
32
33
|
export { default as CloseSmall } from "./CloseSmall.svelte";
|
|
33
34
|
export { default as Computer } from "./Computer.svelte";
|
|
@@ -28,6 +28,7 @@ export { default as ChevronDoubleLeft } from "./ChevronDoubleLeft.svelte";
|
|
|
28
28
|
export { default as ChevronDoubleRight } from "./ChevronDoubleRight.svelte";
|
|
29
29
|
export { default as ChevronDown } from "./ChevronDown.svelte";
|
|
30
30
|
export { default as Clipboard } from "./Clipboard.svelte";
|
|
31
|
+
export { default as Clock } from "./Clock.svelte";
|
|
31
32
|
export { default as Close } from "./Close.svelte";
|
|
32
33
|
export { default as CloseSmall } from "./CloseSmall.svelte";
|
|
33
34
|
export { default as Computer } from "./Computer.svelte";
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @typedef {Object} Props
|
|
7
|
+
* @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
|
|
7
8
|
* @property {string} [class=""] Additional CSS classes to apply to the component
|
|
8
9
|
* @property {number} [durationInSeconds=6] Duration in seconds before auto-close triggers
|
|
9
10
|
* @property {string} [message=""] Message to display in the toast
|
|
@@ -18,6 +19,7 @@
|
|
|
18
19
|
|
|
19
20
|
/** @type {Props} */
|
|
20
21
|
let {
|
|
22
|
+
children,
|
|
21
23
|
class: className = "",
|
|
22
24
|
durationInSeconds = 6,
|
|
23
25
|
message = "",
|
|
@@ -48,4 +50,5 @@
|
|
|
48
50
|
{/if}
|
|
49
51
|
</div>
|
|
50
52
|
<p class={styles.message()}>{message}</p>
|
|
53
|
+
{@render children?.()}
|
|
51
54
|
</div>
|
|
@@ -4,6 +4,10 @@ type Toast = {
|
|
|
4
4
|
$set?(props: Partial<Props>): void;
|
|
5
5
|
};
|
|
6
6
|
declare const Toast: import("svelte").Component<{
|
|
7
|
+
/**
|
|
8
|
+
* Children content – can be text, HTML, or other Svelte components
|
|
9
|
+
*/
|
|
10
|
+
children?: import("svelte").Snippet<[]> | undefined;
|
|
7
11
|
/**
|
|
8
12
|
* Additional CSS classes to apply to the component
|
|
9
13
|
*/
|
|
@@ -26,6 +30,10 @@ declare const Toast: import("svelte").Component<{
|
|
|
26
30
|
variant?: "error" | "loading" | "info" | undefined;
|
|
27
31
|
}, {}, "">;
|
|
28
32
|
type Props = {
|
|
33
|
+
/**
|
|
34
|
+
* Children content – can be text, HTML, or other Svelte components
|
|
35
|
+
*/
|
|
36
|
+
children?: import("svelte").Snippet<[]> | undefined;
|
|
29
37
|
/**
|
|
30
38
|
* Additional CSS classes to apply to the component
|
|
31
39
|
*/
|
|
@@ -2,7 +2,7 @@ import { tv } from "../../../../utils/tailwind.js";
|
|
|
2
2
|
|
|
3
3
|
const toastVariants = tv({
|
|
4
4
|
slots: {
|
|
5
|
-
base: "flex items-center gap-2 rounded-lg bg-neutral-900 px-4 py-2 text-neutral-200",
|
|
5
|
+
base: "dark flex items-center gap-2 rounded-lg bg-neutral-900 px-4 py-2 text-neutral-200",
|
|
6
6
|
icon: "grid size-6 place-items-center",
|
|
7
7
|
message: "ui-select-label font-medium",
|
|
8
8
|
},
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
import { Dialog } from "bits-ui";
|
|
3
2
|
import { Button } from "../../../index.js";
|
|
4
3
|
|
|
5
4
|
/**
|
|
@@ -58,15 +57,12 @@
|
|
|
58
57
|
);
|
|
59
58
|
</script>
|
|
60
59
|
|
|
61
|
-
<
|
|
60
|
+
<Button
|
|
62
61
|
class={className}
|
|
63
62
|
color="secondary"
|
|
64
63
|
data-role={role}
|
|
65
64
|
size="large"
|
|
66
|
-
{...rest}
|
|
67
|
-
{
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
</Button>
|
|
71
|
-
{/snippet}
|
|
72
|
-
</Dialog.Close>
|
|
65
|
+
{...rest}
|
|
66
|
+
{...buttonProps}>
|
|
67
|
+
{@render children?.()}
|
|
68
|
+
</Button>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import { FormActions } from "../../../index.js";
|
|
3
|
+
import { Dialog } from "bits-ui";
|
|
3
4
|
import { dialogVariants } from "./dialog.variants.js";
|
|
4
5
|
|
|
5
6
|
/**
|
|
@@ -14,6 +15,20 @@
|
|
|
14
15
|
let styles = $derived(dialogVariants());
|
|
15
16
|
</script>
|
|
16
17
|
|
|
17
|
-
<
|
|
18
|
-
{
|
|
19
|
-
|
|
18
|
+
<Dialog.Close>
|
|
19
|
+
{#snippet child({ props: { onclick } })}
|
|
20
|
+
<FormActions
|
|
21
|
+
class={styles.formActions({ class: className })}
|
|
22
|
+
customLayout
|
|
23
|
+
onclick={(e) => {
|
|
24
|
+
if (e.button === 0 && e.target.role && e.target.tagName === "BUTTON") {
|
|
25
|
+
// Auto-close on main device-button click on UI-button with role.
|
|
26
|
+
// Use e.stopPropagation() on action click handler to prevent this.
|
|
27
|
+
onclick(e);
|
|
28
|
+
}
|
|
29
|
+
}}
|
|
30
|
+
{...rest}>
|
|
31
|
+
{@render children?.()}
|
|
32
|
+
</FormActions>
|
|
33
|
+
{/snippet}
|
|
34
|
+
</Dialog.Close>
|
|
@@ -56,7 +56,9 @@
|
|
|
56
56
|
};
|
|
57
57
|
</script>
|
|
58
58
|
|
|
59
|
-
<svelte:body
|
|
59
|
+
<svelte:body
|
|
60
|
+
onnotification:close={({ detail: id }) => handleClose(id)}
|
|
61
|
+
onnotification:show={handleShow} />
|
|
60
62
|
|
|
61
63
|
{#snippet column(position, x = 0, y = 0)}
|
|
62
64
|
{@const items = [...data.values()].filter((item) => item.position === position)}
|
|
@@ -66,7 +68,12 @@
|
|
|
66
68
|
position,
|
|
67
69
|
zOrder: zOrder.findIndex((key) => key === position),
|
|
68
70
|
})}>
|
|
69
|
-
{#each items as { id, el, props }, i (id)}
|
|
71
|
+
{#each items as { id, el: Comp, props }, i (id)}
|
|
72
|
+
{@const finalProps = {
|
|
73
|
+
...props,
|
|
74
|
+
class: styles.item({ class: props.class }),
|
|
75
|
+
onClose: () => handleClose(id),
|
|
76
|
+
}}
|
|
70
77
|
<div
|
|
71
78
|
in:fly={{
|
|
72
79
|
x,
|
|
@@ -83,11 +90,11 @@
|
|
|
83
90
|
easing: cubicOut,
|
|
84
91
|
}}
|
|
85
92
|
onoutroend={data.size === 0 ? handleLastClose : null}>
|
|
86
|
-
{
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
}
|
|
93
|
+
{#if Comp.name === "snippet"}
|
|
94
|
+
{@render Comp?.(finalProps)}
|
|
95
|
+
{:else}
|
|
96
|
+
<Comp {...finalProps} />
|
|
97
|
+
{/if}
|
|
91
98
|
</div>
|
|
92
99
|
{/each}
|
|
93
100
|
</div>
|
|
@@ -19,7 +19,13 @@ const showNotification = (
|
|
|
19
19
|
}),
|
|
20
20
|
);
|
|
21
21
|
|
|
22
|
-
return
|
|
22
|
+
return () => {
|
|
23
|
+
document.body.dispatchEvent(
|
|
24
|
+
new CustomEvent("notification:close", {
|
|
25
|
+
detail: id,
|
|
26
|
+
}),
|
|
27
|
+
);
|
|
28
|
+
};
|
|
23
29
|
};
|
|
24
30
|
|
|
25
31
|
export { NOTIFICATION_POSITIONS, showNotification };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@websline/system-components",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -33,55 +33,55 @@
|
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@tiptap/core": "^3.
|
|
37
|
-
"@tiptap/extension-color": "^3.
|
|
38
|
-
"@tiptap/extension-highlight": "^3.
|
|
39
|
-
"@tiptap/extension-link": "^3.
|
|
40
|
-
"@tiptap/extension-placeholder": "^3.
|
|
41
|
-
"@tiptap/extension-text-align": "^3.
|
|
42
|
-
"@tiptap/extension-text-style": "^3.
|
|
43
|
-
"@tiptap/pm": "^3.
|
|
44
|
-
"@tiptap/starter-kit": "^3.
|
|
36
|
+
"@tiptap/core": "^3.23.6",
|
|
37
|
+
"@tiptap/extension-color": "^3.23.6",
|
|
38
|
+
"@tiptap/extension-highlight": "^3.23.6",
|
|
39
|
+
"@tiptap/extension-link": "^3.23.6",
|
|
40
|
+
"@tiptap/extension-placeholder": "^3.23.6",
|
|
41
|
+
"@tiptap/extension-text-align": "^3.23.6",
|
|
42
|
+
"@tiptap/extension-text-style": "^3.23.6",
|
|
43
|
+
"@tiptap/pm": "^3.23.6",
|
|
44
|
+
"@tiptap/starter-kit": "^3.23.6",
|
|
45
45
|
"bits-ui": "^2.18.1",
|
|
46
|
-
"dompurify": "^3.4.
|
|
46
|
+
"dompurify": "^3.4.5",
|
|
47
47
|
"tailwind-variants": "^3.2.2"
|
|
48
48
|
},
|
|
49
49
|
"peerDependencies": {
|
|
50
50
|
"svelte": "^5.38.7"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"@eslint/compat": "^2.0
|
|
53
|
+
"@eslint/compat": "^2.1.0",
|
|
54
54
|
"@eslint/js": "^10.0.1",
|
|
55
|
-
"@storybook/addon-a11y": "^10.
|
|
56
|
-
"@storybook/addon-docs": "^10.
|
|
55
|
+
"@storybook/addon-a11y": "^10.4.1",
|
|
56
|
+
"@storybook/addon-docs": "^10.4.1",
|
|
57
57
|
"@storybook/addon-svelte-csf": "^5.1.2",
|
|
58
|
-
"@storybook/sveltekit": "^10.
|
|
58
|
+
"@storybook/sveltekit": "^10.4.1",
|
|
59
59
|
"@sveltejs/adapter-auto": "^7.0.1",
|
|
60
|
-
"@sveltejs/kit": "^2.
|
|
60
|
+
"@sveltejs/kit": "^2.61.1",
|
|
61
61
|
"@sveltejs/package": "^2.5.7",
|
|
62
|
-
"@sveltejs/vite-plugin-svelte": "^7.
|
|
62
|
+
"@sveltejs/vite-plugin-svelte": "^7.1.2",
|
|
63
63
|
"@tailwindcss/forms": "^0.5.11",
|
|
64
64
|
"@tailwindcss/typography": "^0.5.19",
|
|
65
|
-
"@tailwindcss/vite": "^4.
|
|
66
|
-
"@types/node": "^25.
|
|
67
|
-
"@vitest/browser": "^4.1.
|
|
68
|
-
"eslint": "^10.
|
|
65
|
+
"@tailwindcss/vite": "^4.3.0",
|
|
66
|
+
"@types/node": "^25.9.1",
|
|
67
|
+
"@vitest/browser": "^4.1.7",
|
|
68
|
+
"eslint": "^10.4.0",
|
|
69
69
|
"eslint-config-prettier": "^10.1.8",
|
|
70
|
-
"eslint-plugin-storybook": "^10.
|
|
70
|
+
"eslint-plugin-storybook": "^10.4.1",
|
|
71
71
|
"eslint-plugin-svelte": "^3.17.1",
|
|
72
72
|
"globals": "^17.6.0",
|
|
73
|
-
"playwright": "^1.
|
|
74
|
-
"postcss-url": "^10.1.
|
|
73
|
+
"playwright": "^1.60.0",
|
|
74
|
+
"postcss-url": "^10.1.4",
|
|
75
75
|
"prettier": "^3.8.3",
|
|
76
|
-
"prettier-plugin-svelte": "^3.5.
|
|
76
|
+
"prettier-plugin-svelte": "^3.5.2",
|
|
77
77
|
"prettier-plugin-tailwindcss": "^0.8.0",
|
|
78
|
-
"publint": "^0.3.
|
|
79
|
-
"storybook": "^10.
|
|
80
|
-
"svelte": "^5.55.
|
|
81
|
-
"tailwindcss": "^4.
|
|
78
|
+
"publint": "^0.3.21",
|
|
79
|
+
"storybook": "^10.4.1",
|
|
80
|
+
"svelte": "^5.55.9",
|
|
81
|
+
"tailwindcss": "^4.3.0",
|
|
82
82
|
"typescript": "^6.0.3",
|
|
83
|
-
"vite": "^8.0.
|
|
84
|
-
"vitest": "^4.1.
|
|
83
|
+
"vite": "^8.0.14",
|
|
84
|
+
"vitest": "^4.1.7",
|
|
85
85
|
"vitest-browser-svelte": "^2.1.1"
|
|
86
86
|
},
|
|
87
87
|
"keywords": [
|