@websline/system-components 1.3.20 → 1.3.22
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/molecules/richTextEditor/RichTextEditor.svelte +7 -2
- package/dist/components/molecules/toggleGroup/ToggleGroup.svelte +3 -0
- package/dist/components/molecules/toggleGroup/ToggleGroup.svelte.d.ts +8 -0
- package/dist/components/molecules/toggleGroup/ToggleGroupItem.svelte +11 -4
- package/dist/components/molecules/toggleGroup/toggleGroupItem.variants.d.ts +36 -0
- package/dist/components/molecules/toggleGroup/toggleGroupItem.variants.js +16 -4
- package/package.json +21 -21
|
@@ -132,9 +132,14 @@
|
|
|
132
132
|
});
|
|
133
133
|
|
|
134
134
|
$effect(() => {
|
|
135
|
-
if (editor)
|
|
135
|
+
if (!editor) return;
|
|
136
|
+
|
|
137
|
+
const current = editor.getHTML();
|
|
138
|
+
const next = content ?? "";
|
|
139
|
+
|
|
140
|
+
if (current !== next) {
|
|
136
141
|
isContentPropUpdate = true;
|
|
137
|
-
editor.commands.setContent(
|
|
142
|
+
editor.commands.setContent(next, false);
|
|
138
143
|
}
|
|
139
144
|
});
|
|
140
145
|
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
* @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
|
|
15
15
|
* @property {string} [class=""] Additional CSS classes to apply to the component
|
|
16
16
|
* @property {boolean} [disabled=false] Whether the toggle group is disabled
|
|
17
|
+
* @property {"auto" | "full"} [itemWidth="full"] The width of the toggle group items
|
|
17
18
|
* @property {string} [name] The name of the toggle group, used for form submission
|
|
18
19
|
* @property {"small" | "medium"} [size="medium"] The size variant of the component
|
|
19
20
|
* @property {string} [value=""] The value of the toggle group
|
|
@@ -31,6 +32,7 @@
|
|
|
31
32
|
children,
|
|
32
33
|
class: className = "",
|
|
33
34
|
disabled = false,
|
|
35
|
+
itemWidth = "full",
|
|
34
36
|
name,
|
|
35
37
|
onChange,
|
|
36
38
|
size = "medium",
|
|
@@ -44,6 +46,7 @@
|
|
|
44
46
|
setContext("toggle-group-store", () => {
|
|
45
47
|
return {
|
|
46
48
|
appearance,
|
|
49
|
+
itemWidth,
|
|
47
50
|
send,
|
|
48
51
|
receive,
|
|
49
52
|
size,
|
|
@@ -20,6 +20,10 @@ declare const ToggleGroup: import("svelte").Component<{
|
|
|
20
20
|
* Whether the toggle group is disabled
|
|
21
21
|
*/
|
|
22
22
|
disabled?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* The width of the toggle group items
|
|
25
|
+
*/
|
|
26
|
+
itemWidth?: "auto" | "full";
|
|
23
27
|
/**
|
|
24
28
|
* The name of the toggle group, used for form submission
|
|
25
29
|
*/
|
|
@@ -54,6 +58,10 @@ type Props = {
|
|
|
54
58
|
* Whether the toggle group is disabled
|
|
55
59
|
*/
|
|
56
60
|
disabled?: boolean;
|
|
61
|
+
/**
|
|
62
|
+
* The width of the toggle group items
|
|
63
|
+
*/
|
|
64
|
+
itemWidth?: "auto" | "full";
|
|
57
65
|
/**
|
|
58
66
|
* The name of the toggle group, used for form submission
|
|
59
67
|
*/
|
|
@@ -25,21 +25,28 @@
|
|
|
25
25
|
} = $props();
|
|
26
26
|
|
|
27
27
|
let store = $derived(getContext("toggle-group-store")());
|
|
28
|
-
let {
|
|
28
|
+
let {
|
|
29
|
+
appearance,
|
|
30
|
+
itemWidth: width,
|
|
31
|
+
send,
|
|
32
|
+
receive,
|
|
33
|
+
size,
|
|
34
|
+
variant,
|
|
35
|
+
} = $derived(store);
|
|
29
36
|
let isActive = $derived(store.value === localeValue);
|
|
30
37
|
|
|
31
38
|
let stylesByVariant = $derived.by(() => {
|
|
32
39
|
if (variant === "tabs") {
|
|
33
|
-
return toggleGroupItemTabVariants();
|
|
40
|
+
return toggleGroupItemTabVariants({ isActive, size, width });
|
|
34
41
|
}
|
|
35
42
|
|
|
36
|
-
return toggleGroupItemVariants();
|
|
43
|
+
return toggleGroupItemVariants({ appearance, isActive, size, width });
|
|
37
44
|
});
|
|
38
45
|
</script>
|
|
39
46
|
|
|
40
47
|
<div class={stylesByVariant.base({ class: baseClass })} {...rest}>
|
|
41
48
|
<button
|
|
42
|
-
class={stylesByVariant.button({
|
|
49
|
+
class={stylesByVariant.button({ class: className })}
|
|
43
50
|
role="tab"
|
|
44
51
|
onclick={() => {
|
|
45
52
|
store.update(localeValue);
|
|
@@ -16,6 +16,12 @@ export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
|
|
|
16
16
|
span: string;
|
|
17
17
|
};
|
|
18
18
|
};
|
|
19
|
+
width: {
|
|
20
|
+
full: {
|
|
21
|
+
base: string;
|
|
22
|
+
button: string;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
19
25
|
}, {
|
|
20
26
|
base: string;
|
|
21
27
|
button: string;
|
|
@@ -41,6 +47,12 @@ export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
|
|
|
41
47
|
span: string;
|
|
42
48
|
};
|
|
43
49
|
};
|
|
50
|
+
width: {
|
|
51
|
+
full: {
|
|
52
|
+
base: string;
|
|
53
|
+
button: string;
|
|
54
|
+
};
|
|
55
|
+
};
|
|
44
56
|
}, {
|
|
45
57
|
base: string;
|
|
46
58
|
button: string;
|
|
@@ -66,6 +78,12 @@ export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
|
|
|
66
78
|
span: string;
|
|
67
79
|
};
|
|
68
80
|
};
|
|
81
|
+
width: {
|
|
82
|
+
full: {
|
|
83
|
+
base: string;
|
|
84
|
+
button: string;
|
|
85
|
+
};
|
|
86
|
+
};
|
|
69
87
|
}, {
|
|
70
88
|
base: string;
|
|
71
89
|
button: string;
|
|
@@ -83,6 +101,12 @@ export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnTyp
|
|
|
83
101
|
button: string;
|
|
84
102
|
};
|
|
85
103
|
};
|
|
104
|
+
width: {
|
|
105
|
+
full: {
|
|
106
|
+
base: string;
|
|
107
|
+
button: string;
|
|
108
|
+
};
|
|
109
|
+
};
|
|
86
110
|
}, {
|
|
87
111
|
base: string;
|
|
88
112
|
button: string;
|
|
@@ -99,6 +123,12 @@ export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnTyp
|
|
|
99
123
|
button: string;
|
|
100
124
|
};
|
|
101
125
|
};
|
|
126
|
+
width: {
|
|
127
|
+
full: {
|
|
128
|
+
base: string;
|
|
129
|
+
button: string;
|
|
130
|
+
};
|
|
131
|
+
};
|
|
102
132
|
}, {
|
|
103
133
|
base: string;
|
|
104
134
|
button: string;
|
|
@@ -115,6 +145,12 @@ export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnTyp
|
|
|
115
145
|
button: string;
|
|
116
146
|
};
|
|
117
147
|
};
|
|
148
|
+
width: {
|
|
149
|
+
full: {
|
|
150
|
+
base: string;
|
|
151
|
+
button: string;
|
|
152
|
+
};
|
|
153
|
+
};
|
|
118
154
|
}, {
|
|
119
155
|
base: string;
|
|
120
156
|
button: string;
|
|
@@ -2,9 +2,9 @@ import { tv } from "../../../utils/tailwind.js";
|
|
|
2
2
|
|
|
3
3
|
const toggleGroupItemVariants = tv({
|
|
4
4
|
slots: {
|
|
5
|
-
base: "relative h-full
|
|
5
|
+
base: "relative h-full whitespace-nowrap",
|
|
6
6
|
button:
|
|
7
|
-
"block h-full
|
|
7
|
+
"block h-full cursor-pointer rounded-sm bg-transparent ui-select-label font-medium transition-[background,color]",
|
|
8
8
|
content: "relative z-2 flex items-center justify-center",
|
|
9
9
|
icon: "shrink-0",
|
|
10
10
|
span: "",
|
|
@@ -28,6 +28,12 @@ const toggleGroupItemVariants = tv({
|
|
|
28
28
|
span: "px-2",
|
|
29
29
|
},
|
|
30
30
|
},
|
|
31
|
+
width: {
|
|
32
|
+
full: {
|
|
33
|
+
base: "w-full",
|
|
34
|
+
button: "w-full",
|
|
35
|
+
},
|
|
36
|
+
},
|
|
31
37
|
},
|
|
32
38
|
compoundVariants: [
|
|
33
39
|
{
|
|
@@ -51,8 +57,8 @@ const toggleGroupItemVariants = tv({
|
|
|
51
57
|
|
|
52
58
|
const toggleGroupItemTabVariants = tv({
|
|
53
59
|
slots: {
|
|
54
|
-
base: "relative h-full
|
|
55
|
-
button: "h-full
|
|
60
|
+
base: "relative h-full whitespace-nowrap text-neutral-900 dark:text-neutral-200",
|
|
61
|
+
button: "h-full cursor-pointer ui-button-default transition-[color]",
|
|
56
62
|
content: "flex items-center justify-center gap-1",
|
|
57
63
|
icon: "shrink-0",
|
|
58
64
|
span: "",
|
|
@@ -67,6 +73,12 @@ const toggleGroupItemTabVariants = tv({
|
|
|
67
73
|
button: "text-neutral-500 hover:text-current",
|
|
68
74
|
},
|
|
69
75
|
},
|
|
76
|
+
width: {
|
|
77
|
+
full: {
|
|
78
|
+
base: "w-full",
|
|
79
|
+
button: "w-full",
|
|
80
|
+
},
|
|
81
|
+
},
|
|
70
82
|
},
|
|
71
83
|
});
|
|
72
84
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@websline/system-components",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.22",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -26,16 +26,16 @@
|
|
|
26
26
|
}
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@tiptap/core": "^3.20.
|
|
30
|
-
"@tiptap/extension-color": "^3.20.
|
|
31
|
-
"@tiptap/extension-highlight": "^3.20.
|
|
32
|
-
"@tiptap/extension-placeholder": "^3.20.
|
|
33
|
-
"@tiptap/extension-text-align": "^3.20.
|
|
34
|
-
"@tiptap/extension-text-style": "^3.20.
|
|
35
|
-
"@tiptap/pm": "^3.20.
|
|
36
|
-
"@tiptap/starter-kit": "^3.20.
|
|
29
|
+
"@tiptap/core": "^3.20.2",
|
|
30
|
+
"@tiptap/extension-color": "^3.20.2",
|
|
31
|
+
"@tiptap/extension-highlight": "^3.20.2",
|
|
32
|
+
"@tiptap/extension-placeholder": "^3.20.2",
|
|
33
|
+
"@tiptap/extension-text-align": "^3.20.2",
|
|
34
|
+
"@tiptap/extension-text-style": "^3.20.2",
|
|
35
|
+
"@tiptap/pm": "^3.20.2",
|
|
36
|
+
"@tiptap/starter-kit": "^3.20.2",
|
|
37
37
|
"bits-ui": "^2.16.3",
|
|
38
|
-
"dompurify": "^3.3.
|
|
38
|
+
"dompurify": "^3.3.3",
|
|
39
39
|
"tailwind-variants": "^3.2.2",
|
|
40
40
|
"uuid": "^13.0.0"
|
|
41
41
|
},
|
|
@@ -45,22 +45,22 @@
|
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@eslint/compat": "^2.0.3",
|
|
47
47
|
"@eslint/js": "^9.39.4",
|
|
48
|
-
"@storybook/addon-a11y": "^10.2.
|
|
49
|
-
"@storybook/addon-docs": "^10.2.
|
|
48
|
+
"@storybook/addon-a11y": "^10.2.19",
|
|
49
|
+
"@storybook/addon-docs": "^10.2.19",
|
|
50
50
|
"@storybook/addon-svelte-csf": "^5.0.11",
|
|
51
|
-
"@storybook/sveltekit": "^10.2.
|
|
51
|
+
"@storybook/sveltekit": "^10.2.19",
|
|
52
52
|
"@sveltejs/adapter-auto": "^7.0.1",
|
|
53
|
-
"@sveltejs/kit": "^2.
|
|
53
|
+
"@sveltejs/kit": "^2.55.0",
|
|
54
54
|
"@sveltejs/package": "^2.5.7",
|
|
55
55
|
"@sveltejs/vite-plugin-svelte": "^6.2.4",
|
|
56
56
|
"@tailwindcss/forms": "^0.5.11",
|
|
57
57
|
"@tailwindcss/typography": "^0.5.19",
|
|
58
58
|
"@tailwindcss/vite": "^4.2.1",
|
|
59
|
-
"@types/node": "^25.
|
|
60
|
-
"@vitest/browser": "^4.0
|
|
59
|
+
"@types/node": "^25.5.0",
|
|
60
|
+
"@vitest/browser": "^4.1.0",
|
|
61
61
|
"eslint": "^9.39.4",
|
|
62
62
|
"eslint-config-prettier": "^10.1.8",
|
|
63
|
-
"eslint-plugin-storybook": "^10.2.
|
|
63
|
+
"eslint-plugin-storybook": "^10.2.19",
|
|
64
64
|
"eslint-plugin-svelte": "^3.15.2",
|
|
65
65
|
"globals": "^17.4.0",
|
|
66
66
|
"playwright": "^1.58.2",
|
|
@@ -69,13 +69,13 @@
|
|
|
69
69
|
"prettier-plugin-svelte": "^3.5.1",
|
|
70
70
|
"prettier-plugin-tailwindcss": "^0.7.2",
|
|
71
71
|
"publint": "^0.3.18",
|
|
72
|
-
"storybook": "^10.2.
|
|
73
|
-
"svelte": "^5.53.
|
|
72
|
+
"storybook": "^10.2.19",
|
|
73
|
+
"svelte": "^5.53.12",
|
|
74
74
|
"tailwindcss": "^4.2.1",
|
|
75
75
|
"typescript": "^5.9.3",
|
|
76
76
|
"vite": "^7.3.1",
|
|
77
|
-
"vitest": "^4.0
|
|
78
|
-
"vitest-browser-svelte": "^2.0
|
|
77
|
+
"vitest": "^4.1.0",
|
|
78
|
+
"vitest-browser-svelte": "^2.1.0"
|
|
79
79
|
},
|
|
80
80
|
"keywords": [
|
|
81
81
|
"svelte"
|