@websline/system-components 1.0.7 → 1.0.8
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/avatar/avatar.variants.js +2 -1
- package/dist/components/atoms/checkbox/Checkbox.svelte +64 -0
- package/dist/components/atoms/checkbox/Checkbox.svelte.d.ts +65 -0
- package/dist/components/atoms/checkbox/checkbox.variants.d.ts +13 -0
- package/dist/components/atoms/checkbox/checkbox.variants.js +12 -0
- package/dist/components/atoms/icon/components/WebslineSupport.svelte +9 -11
- package/dist/components/atoms/input/Input.svelte +2 -2
- package/dist/components/atoms/input/input.variants.js +1 -0
- package/dist/components/atoms/select/Select.svelte +2 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +2 -4
|
@@ -4,7 +4,8 @@ const avatarVariants = tv({
|
|
|
4
4
|
slots: {
|
|
5
5
|
base: "flex overflow-hidden",
|
|
6
6
|
image: "h-full w-full object-cover",
|
|
7
|
-
fallback:
|
|
7
|
+
fallback:
|
|
8
|
+
"flex h-full w-full items-center justify-center bg-blue-100 heading-h6 text-neutral-900",
|
|
8
9
|
},
|
|
9
10
|
variants: {
|
|
10
11
|
as: {
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { getContext } from "svelte";
|
|
3
|
+
import { checkboxVariants } from "./checkbox.variants.js";
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @typedef {Object} Props
|
|
7
|
+
* @property {boolean} [checked=false] Wether this radio is checked or not, bound to the component
|
|
8
|
+
* @property {string} [class=""] Additional CSS classes to apply to the component
|
|
9
|
+
* @property {boolean} [disabled=false] Whether the radio is disabled
|
|
10
|
+
* @property {string} [id=""] The ID of the radio element
|
|
11
|
+
* @property {string} [name] The name of the radio, used for form submission
|
|
12
|
+
* @property {boolean} [required=false] Whether the radio is required
|
|
13
|
+
* @property {string} [value=""] The value of the radio
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
/** @type {Props} */
|
|
17
|
+
let {
|
|
18
|
+
checked = $bindable(),
|
|
19
|
+
class: className = "",
|
|
20
|
+
disabled = false,
|
|
21
|
+
id = "",
|
|
22
|
+
name,
|
|
23
|
+
required = false,
|
|
24
|
+
value = "",
|
|
25
|
+
...rest
|
|
26
|
+
} = $props();
|
|
27
|
+
|
|
28
|
+
let store = getContext("form-field-store");
|
|
29
|
+
|
|
30
|
+
let localValues = $derived.by(() => {
|
|
31
|
+
if (store) {
|
|
32
|
+
return {
|
|
33
|
+
...store(),
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
return {
|
|
38
|
+
disabled,
|
|
39
|
+
id,
|
|
40
|
+
required,
|
|
41
|
+
};
|
|
42
|
+
});
|
|
43
|
+
</script>
|
|
44
|
+
|
|
45
|
+
<input
|
|
46
|
+
bind:checked
|
|
47
|
+
class={checkboxVariants({
|
|
48
|
+
class: className,
|
|
49
|
+
disabled: localValues.disabled,
|
|
50
|
+
})}
|
|
51
|
+
disabled={localValues.disabled}
|
|
52
|
+
id={localValues.id}
|
|
53
|
+
{name}
|
|
54
|
+
required={localValues.required}
|
|
55
|
+
type="checkbox"
|
|
56
|
+
{value}
|
|
57
|
+
{...rest} />
|
|
58
|
+
|
|
59
|
+
<style>
|
|
60
|
+
input:checked::after {
|
|
61
|
+
mask: url("/src/assets/masks/checkmark.svg");
|
|
62
|
+
mask-size: contain;
|
|
63
|
+
}
|
|
64
|
+
</style>
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
export default Checkbox;
|
|
2
|
+
type Checkbox = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const Checkbox: import("svelte").Component<{
|
|
7
|
+
/**
|
|
8
|
+
* Wether this radio is checked or not, bound to the component
|
|
9
|
+
*/
|
|
10
|
+
checked?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Additional CSS classes to apply to the component
|
|
13
|
+
*/
|
|
14
|
+
class?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Whether the radio is disabled
|
|
17
|
+
*/
|
|
18
|
+
disabled?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* The ID of the radio element
|
|
21
|
+
*/
|
|
22
|
+
id?: string;
|
|
23
|
+
/**
|
|
24
|
+
* The name of the radio, used for form submission
|
|
25
|
+
*/
|
|
26
|
+
name?: string;
|
|
27
|
+
/**
|
|
28
|
+
* Whether the radio is required
|
|
29
|
+
*/
|
|
30
|
+
required?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* The value of the radio
|
|
33
|
+
*/
|
|
34
|
+
value?: string;
|
|
35
|
+
}, {}, "checked">;
|
|
36
|
+
type Props = {
|
|
37
|
+
/**
|
|
38
|
+
* Wether this radio is checked or not, bound to the component
|
|
39
|
+
*/
|
|
40
|
+
checked?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Additional CSS classes to apply to the component
|
|
43
|
+
*/
|
|
44
|
+
class?: string;
|
|
45
|
+
/**
|
|
46
|
+
* Whether the radio is disabled
|
|
47
|
+
*/
|
|
48
|
+
disabled?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* The ID of the radio element
|
|
51
|
+
*/
|
|
52
|
+
id?: string;
|
|
53
|
+
/**
|
|
54
|
+
* The name of the radio, used for form submission
|
|
55
|
+
*/
|
|
56
|
+
name?: string;
|
|
57
|
+
/**
|
|
58
|
+
* Whether the radio is required
|
|
59
|
+
*/
|
|
60
|
+
required?: boolean;
|
|
61
|
+
/**
|
|
62
|
+
* The value of the radio
|
|
63
|
+
*/
|
|
64
|
+
value?: string;
|
|
65
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export const checkboxVariants: import("tailwind-variants").TVReturnType<{
|
|
2
|
+
disabled: {
|
|
3
|
+
true: string;
|
|
4
|
+
};
|
|
5
|
+
}, undefined, "size-4 cursor-pointer rounded border border-current bg-transparent bg-none text-neutral-900 ring-0 ring-transparent ring-offset-transparent outline-transparent duration-300 after:block after:size-full checked:bg-none checked:after:bg-current focus:outline-1 focus:outline-offset-1 focus:outline-blue-300 dark:text-white", {
|
|
6
|
+
disabled: {
|
|
7
|
+
true: string;
|
|
8
|
+
};
|
|
9
|
+
}, undefined, import("tailwind-variants").TVReturnType<{
|
|
10
|
+
disabled: {
|
|
11
|
+
true: string;
|
|
12
|
+
};
|
|
13
|
+
}, undefined, "size-4 cursor-pointer rounded border border-current bg-transparent bg-none text-neutral-900 ring-0 ring-transparent ring-offset-transparent outline-transparent duration-300 after:block after:size-full checked:bg-none checked:after:bg-current focus:outline-1 focus:outline-offset-1 focus:outline-blue-300 dark:text-white", unknown, unknown, undefined>>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { tv } from "tailwind-variants";
|
|
2
|
+
|
|
3
|
+
const checkboxVariants = tv({
|
|
4
|
+
base: "size-4 cursor-pointer rounded border border-current bg-transparent bg-none text-neutral-900 ring-0 ring-transparent ring-offset-transparent outline-transparent duration-300 after:block after:size-full checked:bg-none checked:after:bg-current focus:outline-1 focus:outline-offset-1 focus:outline-blue-300 dark:text-white",
|
|
5
|
+
variants: {
|
|
6
|
+
disabled: {
|
|
7
|
+
true: "cursor-not-allowed",
|
|
8
|
+
},
|
|
9
|
+
},
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
export { checkboxVariants };
|
|
@@ -11,20 +11,18 @@
|
|
|
11
11
|
let { color, height = 24, width = 24, strokeWidth = 1.5, ...rest } = $props();
|
|
12
12
|
</script>
|
|
13
13
|
|
|
14
|
-
<svg
|
|
14
|
+
<svg
|
|
15
15
|
{height}
|
|
16
16
|
{width}
|
|
17
17
|
viewBox="0 0 24 24"
|
|
18
18
|
xmlns="http://www.w3.org/2000/svg"
|
|
19
19
|
{...rest}>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
20
|
+
<path
|
|
21
|
+
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"
|
|
22
|
+
fill="none"
|
|
23
|
+
stroke={color}
|
|
24
|
+
stroke-width={strokeWidth}
|
|
25
|
+
stroke-linecap="round"
|
|
26
|
+
stroke-linejoin="round" />
|
|
27
|
+
<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
28
|
</svg>
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
@@ -50,11 +50,11 @@
|
|
|
50
50
|
</script>
|
|
51
51
|
|
|
52
52
|
<input
|
|
53
|
-
class={inputVariants({
|
|
53
|
+
class={inputVariants().base({
|
|
54
54
|
class: className,
|
|
55
55
|
disabled: localValues.disabled,
|
|
56
56
|
error: localValues.error,
|
|
57
|
-
})
|
|
57
|
+
})}
|
|
58
58
|
disabled={localValues.disabled}
|
|
59
59
|
id={localValues.id}
|
|
60
60
|
{name}
|
|
@@ -8,6 +8,7 @@ const inputBaseVariant = tv({
|
|
|
8
8
|
base: [
|
|
9
9
|
"w-full rounded bg-transparent px-4 body-default",
|
|
10
10
|
"text-neutral-900 placeholder-neutral-500 dark:text-neutral-200",
|
|
11
|
+
"bg-white dark:bg-neutral-800",
|
|
11
12
|
"outline-transparent transition-[border,color,outline] duration-300",
|
|
12
13
|
"border border-neutral-300 dark:border-neutral-700",
|
|
13
14
|
],
|
|
@@ -90,13 +90,13 @@
|
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
&::after {
|
|
93
|
-
mask: url("
|
|
93
|
+
mask: url("/src/assets/masks/chevron-down.svg");
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
96
|
|
|
97
97
|
option {
|
|
98
98
|
&::checkmark {
|
|
99
|
-
mask: url("
|
|
99
|
+
mask: url("/src/assets/masks/checkmark.svg");
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
102
|
</style>
|
package/dist/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export * as utils from "./utils/index.js";
|
|
|
2
2
|
export { default as Avatar } from "./components/atoms/avatar/Avatar.svelte";
|
|
3
3
|
export { default as Badge } from "./components/atoms/badge/Badge.svelte";
|
|
4
4
|
export { default as Button } from "./components/atoms/actions/button/Button.svelte";
|
|
5
|
+
export { default as Checkbox } from "./components/atoms/checkbox/Checkbox.svelte";
|
|
5
6
|
export { default as Chip } from "./components/atoms/chip/Chip.svelte";
|
|
6
7
|
export { default as CloseButton } from "./components/atoms/actions/closeButton/CloseButton.svelte";
|
|
7
8
|
export { default as ColorChip } from "./components/atoms/colorChip/ColorChip.svelte";
|
package/dist/index.js
CHANGED
|
@@ -7,6 +7,7 @@ export * as utils from "./utils/index.js";
|
|
|
7
7
|
export { default as Avatar } from "./components/atoms/avatar/Avatar.svelte";
|
|
8
8
|
export { default as Badge } from "./components/atoms/badge/Badge.svelte";
|
|
9
9
|
export { default as Button } from "./components/atoms/actions/button/Button.svelte";
|
|
10
|
+
export { default as Checkbox } from "./components/atoms/checkbox/Checkbox.svelte";
|
|
10
11
|
export { default as Chip } from "./components/atoms/chip/Chip.svelte";
|
|
11
12
|
export { default as CloseButton } from "./components/atoms/actions/closeButton/CloseButton.svelte";
|
|
12
13
|
export { default as ColorChip } from "./components/atoms/colorChip/ColorChip.svelte";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@websline/system-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,7 +36,6 @@
|
|
|
36
36
|
"@tiptap/starter-kit": "^3.11.1",
|
|
37
37
|
"bits-ui": "^2.14.4",
|
|
38
38
|
"dompurify": "^3.3.0",
|
|
39
|
-
"tailwind-merge": "^3.4.0",
|
|
40
39
|
"tailwind-variants": "^3.2.2",
|
|
41
40
|
"uuid": "^13.0.0"
|
|
42
41
|
},
|
|
@@ -67,7 +66,7 @@
|
|
|
67
66
|
"playwright": "^1.57.0",
|
|
68
67
|
"prettier": "^3.7.1",
|
|
69
68
|
"prettier-plugin-svelte": "^3.4.0",
|
|
70
|
-
"prettier-plugin-tailwindcss": "^0.7.
|
|
69
|
+
"prettier-plugin-tailwindcss": "^0.7.2",
|
|
71
70
|
"publint": "^0.3.15",
|
|
72
71
|
"storybook": "^10.1.0",
|
|
73
72
|
"svelte": "^5.45.2",
|
|
@@ -80,7 +79,6 @@
|
|
|
80
79
|
"keywords": [
|
|
81
80
|
"svelte"
|
|
82
81
|
],
|
|
83
|
-
"packageManager": "pnpm@10.20.0",
|
|
84
82
|
"scripts": {
|
|
85
83
|
"dev": "vite dev",
|
|
86
84
|
"build": "vite build && npm run prepack",
|