@websline/system-components 1.0.5 → 1.0.7
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/WebslineSupport.svelte +30 -0
- package/dist/components/atoms/icon/components/WebslineSupport.svelte.d.ts +41 -0
- package/dist/components/atoms/icon/index.d.ts +18 -0
- package/dist/components/atoms/icon/index.js +2 -0
- package/dist/components/atoms/select/Select.svelte +11 -1
- package/dist/components/atoms/select/Select.svelte.d.ts +24 -0
- package/dist/components/atoms/select/select.variants.d.ts +8 -1
- package/dist/components/atoms/select/select.variants.js +79 -3
- package/package.json +26 -25
|
@@ -0,0 +1,30 @@
|
|
|
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 = 24, width = 24, strokeWidth = 1.5, ...rest } = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<svg
|
|
15
|
+
{height}
|
|
16
|
+
{width}
|
|
17
|
+
viewBox="0 0 24 24"
|
|
18
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
19
|
+
{...rest}>
|
|
20
|
+
<path d="M12,14.31v-2c1.66,0,3-1.34,3-3s-1.34-3-3-3-3,1.34-3,3M12,22c2.76,0,5.26-1.12,7.07-2.93,1.81-1.81,2.93-4.31,2.93-7.07s-1.12-5.26-2.93-7.07c-1.81-1.81-4.31-2.93-7.07-2.93s-5.26,1.12-7.07,2.93c-1.81,1.81-2.93,4.31-2.93,7.07s1.12,5.26,2.93,7.07c1.81,1.81,4.31,2.93,7.07,2.93Z" fill="none" stroke={color}
|
|
21
|
+
stroke-width={strokeWidth}
|
|
22
|
+
stroke-linecap="round"
|
|
23
|
+
stroke-linejoin="round"
|
|
24
|
+
/>
|
|
25
|
+
<path d="M12.05,18.88c1.61,0,1.61-2.5,0-2.5s-1.61,2.5,0,2.5h0Z" fill={color}/>
|
|
26
|
+
</svg>
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
export default WebslineSupport;
|
|
2
|
+
type WebslineSupport = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const WebslineSupport: import("svelte").Component<{
|
|
7
|
+
/**
|
|
8
|
+
* Icon color
|
|
9
|
+
*/
|
|
10
|
+
color?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Icon height
|
|
13
|
+
*/
|
|
14
|
+
height?: number;
|
|
15
|
+
/**
|
|
16
|
+
* Icon StrokeWidth
|
|
17
|
+
*/
|
|
18
|
+
strokeWidth?: number;
|
|
19
|
+
/**
|
|
20
|
+
* Icon width
|
|
21
|
+
*/
|
|
22
|
+
width?: number;
|
|
23
|
+
}, {}, "">;
|
|
24
|
+
type Props = {
|
|
25
|
+
/**
|
|
26
|
+
* Icon color
|
|
27
|
+
*/
|
|
28
|
+
color?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Icon height
|
|
31
|
+
*/
|
|
32
|
+
height?: number;
|
|
33
|
+
/**
|
|
34
|
+
* Icon StrokeWidth
|
|
35
|
+
*/
|
|
36
|
+
strokeWidth?: number;
|
|
37
|
+
/**
|
|
38
|
+
* Icon width
|
|
39
|
+
*/
|
|
40
|
+
width?: number;
|
|
41
|
+
};
|
|
@@ -683,4 +683,22 @@ export const registry: {
|
|
|
683
683
|
*/
|
|
684
684
|
width?: number;
|
|
685
685
|
}, {}, "">;
|
|
686
|
+
webslineSupport: import("svelte").Component<{
|
|
687
|
+
/**
|
|
688
|
+
* Icon color
|
|
689
|
+
*/
|
|
690
|
+
color?: string;
|
|
691
|
+
/**
|
|
692
|
+
* Icon height
|
|
693
|
+
*/
|
|
694
|
+
height?: number;
|
|
695
|
+
/**
|
|
696
|
+
* Icon StrokeWidth
|
|
697
|
+
*/
|
|
698
|
+
strokeWidth?: number;
|
|
699
|
+
/**
|
|
700
|
+
* Icon width
|
|
701
|
+
*/
|
|
702
|
+
width?: number;
|
|
703
|
+
}, {}, "">;
|
|
686
704
|
};
|
|
@@ -36,6 +36,7 @@ import Trash from "./components/Trash.svelte";
|
|
|
36
36
|
import Underline from "./components/Underline.svelte";
|
|
37
37
|
import Undo from "./components/Undo.svelte";
|
|
38
38
|
import Unlink from "./components/Unlink.svelte";
|
|
39
|
+
import WebslineSupport from "./components/WebslineSupport.svelte";
|
|
39
40
|
|
|
40
41
|
export const registry = {
|
|
41
42
|
academy: Academy,
|
|
@@ -76,4 +77,5 @@ export const registry = {
|
|
|
76
77
|
underline: Underline,
|
|
77
78
|
undo: Undo,
|
|
78
79
|
unlink: Unlink,
|
|
80
|
+
webslineSupport: WebslineSupport,
|
|
79
81
|
};
|
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @typedef {Object} Props
|
|
7
|
+
* @property {"default" | "raised"} [buttonAppearance="default"] Appearance of the button variant
|
|
8
|
+
* @property {"small" | "medium" | "large"} [buttonSize="medium"] Size of the button variant
|
|
7
9
|
* @property {string} [class=""] Additional CSS classes for the select
|
|
8
10
|
* @property {boolean} [disabled=false] Whether the select field is disabled
|
|
9
11
|
* @property {boolean} [error=false] Whether the select field has an error
|
|
@@ -12,10 +14,13 @@
|
|
|
12
14
|
* @property {string} [placeholder=""] The placeholder text that shows when no option is preselected
|
|
13
15
|
* @property {boolean} [required=false] Whether the select field is required
|
|
14
16
|
* @property {string} [value=""] The value of the input, bound to the component
|
|
17
|
+
* @property {"default" | "button"} [variant="default"] The variant of the component
|
|
15
18
|
*/
|
|
16
19
|
|
|
17
20
|
/** @type {Props} */
|
|
18
21
|
let {
|
|
22
|
+
buttonAppearance = "default",
|
|
23
|
+
buttonSize = "medium",
|
|
19
24
|
class: className = "",
|
|
20
25
|
disabled = false,
|
|
21
26
|
error = false,
|
|
@@ -24,6 +29,8 @@
|
|
|
24
29
|
placeholder = "",
|
|
25
30
|
required = false,
|
|
26
31
|
value = $bindable(),
|
|
32
|
+
variant = "default",
|
|
33
|
+
|
|
27
34
|
...rest
|
|
28
35
|
} = $props();
|
|
29
36
|
|
|
@@ -46,8 +53,11 @@
|
|
|
46
53
|
|
|
47
54
|
let styles = $derived(
|
|
48
55
|
selectVariants({
|
|
49
|
-
|
|
56
|
+
buttonAppearance,
|
|
57
|
+
buttonSize,
|
|
58
|
+
defaultValue: variant === "default" && (value === "" || value == null),
|
|
50
59
|
error: localValues.error,
|
|
60
|
+
variant,
|
|
51
61
|
}),
|
|
52
62
|
);
|
|
53
63
|
</script>
|
|
@@ -4,6 +4,14 @@ type Select = {
|
|
|
4
4
|
$set?(props: Partial<Props>): void;
|
|
5
5
|
};
|
|
6
6
|
declare const Select: import("svelte").Component<{
|
|
7
|
+
/**
|
|
8
|
+
* Appearance of the button variant
|
|
9
|
+
*/
|
|
10
|
+
buttonAppearance?: "default" | "raised";
|
|
11
|
+
/**
|
|
12
|
+
* Size of the button variant
|
|
13
|
+
*/
|
|
14
|
+
buttonSize?: "small" | "medium" | "large";
|
|
7
15
|
/**
|
|
8
16
|
* Additional CSS classes for the select
|
|
9
17
|
*/
|
|
@@ -40,8 +48,20 @@ declare const Select: import("svelte").Component<{
|
|
|
40
48
|
* The value of the input, bound to the component
|
|
41
49
|
*/
|
|
42
50
|
value?: string;
|
|
51
|
+
/**
|
|
52
|
+
* The variant of the component
|
|
53
|
+
*/
|
|
54
|
+
variant?: "default" | "button";
|
|
43
55
|
}, {}, "value">;
|
|
44
56
|
type Props = {
|
|
57
|
+
/**
|
|
58
|
+
* Appearance of the button variant
|
|
59
|
+
*/
|
|
60
|
+
buttonAppearance?: "default" | "raised";
|
|
61
|
+
/**
|
|
62
|
+
* Size of the button variant
|
|
63
|
+
*/
|
|
64
|
+
buttonSize?: "small" | "medium" | "large";
|
|
45
65
|
/**
|
|
46
66
|
* Additional CSS classes for the select
|
|
47
67
|
*/
|
|
@@ -78,4 +98,8 @@ type Props = {
|
|
|
78
98
|
* The value of the input, bound to the component
|
|
79
99
|
*/
|
|
80
100
|
value?: string;
|
|
101
|
+
/**
|
|
102
|
+
* The variant of the component
|
|
103
|
+
*/
|
|
104
|
+
variant?: "default" | "button";
|
|
81
105
|
};
|
|
@@ -1,13 +1,20 @@
|
|
|
1
1
|
export const selectVariants: import("tailwind-variants").TVReturnType<{
|
|
2
2
|
disabled: {
|
|
3
3
|
false: {
|
|
4
|
-
base: string;
|
|
5
4
|
option: string;
|
|
6
5
|
};
|
|
7
6
|
true: {
|
|
8
7
|
option: string;
|
|
9
8
|
};
|
|
10
9
|
};
|
|
10
|
+
variant: {
|
|
11
|
+
default: {
|
|
12
|
+
base: string;
|
|
13
|
+
};
|
|
14
|
+
button: {
|
|
15
|
+
base: string;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
11
18
|
}, {
|
|
12
19
|
base: string[];
|
|
13
20
|
option: string[];
|
|
@@ -5,11 +5,11 @@ const selectVariants = tv({
|
|
|
5
5
|
extend: inputBaseVariant,
|
|
6
6
|
slots: {
|
|
7
7
|
base: [
|
|
8
|
-
"flex
|
|
8
|
+
"flex items-center",
|
|
9
9
|
"[&::picker(select)]:my-1 [&::picker(select)]:rounded [&::picker(select)]:border-0 [&::picker(select)]:p-1",
|
|
10
10
|
"[&::picker-icon]:hidden",
|
|
11
11
|
"[&::picker(select)]:bg-white [&::picker(select)]:shadow-sm dark:[&::picker(select)]:bg-neutral-800",
|
|
12
|
-
"after:bg-current after:bg-size-[100%] after:bg-center after:bg-no-repeat",
|
|
12
|
+
"bg-none after:bg-current after:bg-size-[100%] after:bg-center after:bg-no-repeat",
|
|
13
13
|
"after:ml-auto after:size-5 after:shrink-0",
|
|
14
14
|
"[&:open]:after:rotate-180",
|
|
15
15
|
],
|
|
@@ -25,7 +25,6 @@ const selectVariants = tv({
|
|
|
25
25
|
variants: {
|
|
26
26
|
disabled: {
|
|
27
27
|
false: {
|
|
28
|
-
base: "hover:text-blue-500 dark:hover:text-blue-400",
|
|
29
28
|
option:
|
|
30
29
|
"cursor-pointer text-neutral-900 hover:from-black/15 dark:text-neutral-200 dark:hover:from-white/15",
|
|
31
30
|
},
|
|
@@ -33,7 +32,84 @@ const selectVariants = tv({
|
|
|
33
32
|
option: "text-neutral-500 dark:text-neutral-500 [&::checkmark]:hidden",
|
|
34
33
|
},
|
|
35
34
|
},
|
|
35
|
+
variant: {
|
|
36
|
+
default: {
|
|
37
|
+
base: "min-h-10 border border-neutral-500 pr-2 pl-4",
|
|
38
|
+
},
|
|
39
|
+
button: {
|
|
40
|
+
base: "gap-0.5 border-none bg-white pr-1 pl-2 leading-5 ring-transparent! dark:bg-neutral-800",
|
|
41
|
+
},
|
|
42
|
+
},
|
|
36
43
|
},
|
|
44
|
+
compoundVariants: [
|
|
45
|
+
// Default Non-Disabled
|
|
46
|
+
{
|
|
47
|
+
variant: "default",
|
|
48
|
+
disabled: false,
|
|
49
|
+
error: false,
|
|
50
|
+
class: {
|
|
51
|
+
base: "hover:text-blue-500 focus:text-blue-500 dark:hover:text-blue-400 dark:focus:text-blue-400",
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
|
|
55
|
+
// Button Raised
|
|
56
|
+
{
|
|
57
|
+
variant: "button",
|
|
58
|
+
buttonAppearance: "raised",
|
|
59
|
+
class: {
|
|
60
|
+
base: "bg-neutral-100 dark:bg-neutral-900",
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
|
|
64
|
+
// Button Non-Disabled
|
|
65
|
+
{
|
|
66
|
+
variant: "button",
|
|
67
|
+
disabled: false,
|
|
68
|
+
class: {
|
|
69
|
+
base: "cursor-pointer focus-within:bg-neutral-300 hover:bg-neutral-300 focus:ring-2 focus:ring-blue-500 dark:focus-within:bg-neutral-600 dark:hover:bg-neutral-600",
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
variant: "button",
|
|
74
|
+
disabled: false,
|
|
75
|
+
buttonAppearance: "raised",
|
|
76
|
+
class: {
|
|
77
|
+
base: "dark:focus-within:bg-neutral-700 dark:hover:bg-neutral-700",
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
|
|
81
|
+
// Button Error
|
|
82
|
+
{
|
|
83
|
+
variant: "button",
|
|
84
|
+
error: true,
|
|
85
|
+
class: {
|
|
86
|
+
base: "focus:ring-current",
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
|
|
90
|
+
// Button Sizes
|
|
91
|
+
{
|
|
92
|
+
variant: "button",
|
|
93
|
+
buttonSize: "small",
|
|
94
|
+
class: {
|
|
95
|
+
base: "py-1",
|
|
96
|
+
},
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
variant: "button",
|
|
100
|
+
buttonSize: "medium",
|
|
101
|
+
class: {
|
|
102
|
+
base: "py-2",
|
|
103
|
+
},
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
variant: "button",
|
|
107
|
+
buttonSize: "large",
|
|
108
|
+
class: {
|
|
109
|
+
base: "py-3",
|
|
110
|
+
},
|
|
111
|
+
},
|
|
112
|
+
],
|
|
37
113
|
});
|
|
38
114
|
|
|
39
115
|
export { selectVariants };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@websline/system-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.7",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -26,18 +26,18 @@
|
|
|
26
26
|
}
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@tiptap/core": "^3.
|
|
30
|
-
"@tiptap/extension-color": "^3.
|
|
31
|
-
"@tiptap/extension-highlight": "^3.
|
|
32
|
-
"@tiptap/extension-placeholder": "^3.
|
|
33
|
-
"@tiptap/extension-text-align": "^3.
|
|
34
|
-
"@tiptap/extension-text-style": "^3.
|
|
35
|
-
"@tiptap/pm": "^3.
|
|
36
|
-
"@tiptap/starter-kit": "^3.
|
|
37
|
-
"bits-ui": "^2.14.
|
|
29
|
+
"@tiptap/core": "^3.11.1",
|
|
30
|
+
"@tiptap/extension-color": "^3.11.1",
|
|
31
|
+
"@tiptap/extension-highlight": "^3.11.1",
|
|
32
|
+
"@tiptap/extension-placeholder": "^3.11.1",
|
|
33
|
+
"@tiptap/extension-text-align": "^3.11.1",
|
|
34
|
+
"@tiptap/extension-text-style": "^3.11.1",
|
|
35
|
+
"@tiptap/pm": "^3.11.1",
|
|
36
|
+
"@tiptap/starter-kit": "^3.11.1",
|
|
37
|
+
"bits-ui": "^2.14.4",
|
|
38
38
|
"dompurify": "^3.3.0",
|
|
39
39
|
"tailwind-merge": "^3.4.0",
|
|
40
|
-
"tailwind-variants": "^3.
|
|
40
|
+
"tailwind-variants": "^3.2.2",
|
|
41
41
|
"uuid": "^13.0.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
@@ -46,40 +46,41 @@
|
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@eslint/compat": "^2.0.0",
|
|
48
48
|
"@eslint/js": "^9.39.1",
|
|
49
|
-
"@storybook/addon-a11y": "^10.0
|
|
50
|
-
"@storybook/addon-docs": "^10.0
|
|
49
|
+
"@storybook/addon-a11y": "^10.1.0",
|
|
50
|
+
"@storybook/addon-docs": "^10.1.0",
|
|
51
51
|
"@storybook/addon-svelte-csf": "^5.0.10",
|
|
52
|
-
"@storybook/sveltekit": "^10.0
|
|
52
|
+
"@storybook/sveltekit": "^10.1.0",
|
|
53
53
|
"@sveltejs/adapter-auto": "^7.0.0",
|
|
54
|
-
"@sveltejs/kit": "^2.
|
|
55
|
-
"@sveltejs/package": "^2.5.
|
|
54
|
+
"@sveltejs/kit": "^2.49.0",
|
|
55
|
+
"@sveltejs/package": "^2.5.7",
|
|
56
56
|
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
|
57
57
|
"@tailwindcss/forms": "^0.5.10",
|
|
58
58
|
"@tailwindcss/typography": "^0.5.19",
|
|
59
59
|
"@tailwindcss/vite": "^4.1.17",
|
|
60
|
-
"@types/node": "^24.10.
|
|
61
|
-
"@vitest/browser": "^4.0.
|
|
60
|
+
"@types/node": "^24.10.1",
|
|
61
|
+
"@vitest/browser": "^4.0.14",
|
|
62
62
|
"eslint": "^9.39.1",
|
|
63
63
|
"eslint-config-prettier": "^10.1.8",
|
|
64
|
-
"eslint-plugin-storybook": "^10.0
|
|
64
|
+
"eslint-plugin-storybook": "^10.1.0",
|
|
65
65
|
"eslint-plugin-svelte": "^3.13.0",
|
|
66
66
|
"globals": "^16.5.0",
|
|
67
|
-
"playwright": "^1.
|
|
68
|
-
"prettier": "^3.
|
|
67
|
+
"playwright": "^1.57.0",
|
|
68
|
+
"prettier": "^3.7.1",
|
|
69
69
|
"prettier-plugin-svelte": "^3.4.0",
|
|
70
70
|
"prettier-plugin-tailwindcss": "^0.7.1",
|
|
71
71
|
"publint": "^0.3.15",
|
|
72
|
-
"storybook": "^10.0
|
|
73
|
-
"svelte": "^5.
|
|
72
|
+
"storybook": "^10.1.0",
|
|
73
|
+
"svelte": "^5.45.2",
|
|
74
74
|
"tailwindcss": "^4.1.17",
|
|
75
75
|
"typescript": "^5.9.3",
|
|
76
|
-
"vite": "^7.2.
|
|
77
|
-
"vitest": "^4.0.
|
|
76
|
+
"vite": "^7.2.4",
|
|
77
|
+
"vitest": "^4.0.14",
|
|
78
78
|
"vitest-browser-svelte": "^2.0.1"
|
|
79
79
|
},
|
|
80
80
|
"keywords": [
|
|
81
81
|
"svelte"
|
|
82
82
|
],
|
|
83
|
+
"packageManager": "pnpm@10.20.0",
|
|
83
84
|
"scripts": {
|
|
84
85
|
"dev": "vite dev",
|
|
85
86
|
"build": "vite build && npm run prepack",
|