@tuspe/components 1.8.1 → 1.8.3
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/README.md +3 -3
- package/dist/Button.svelte +9 -7
- package/dist/Button.svelte.d.ts +3 -3
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -42,7 +42,7 @@ Easily replace most buttons in your project with this versatile button component
|
|
|
42
42
|
interface Props {
|
|
43
43
|
ariaControls?: string | undefined
|
|
44
44
|
ariaExpanded?: boolean | undefined
|
|
45
|
-
ariaLabel?: string
|
|
45
|
+
ariaLabel?: string | undefined
|
|
46
46
|
ariaPopup?: 'dialog' | 'listbox' | 'menu' | undefined
|
|
47
47
|
borderColor?: 'content' | 'default' | 'primary'
|
|
48
48
|
borderSize?: 0 | 1 | 2
|
|
@@ -59,7 +59,7 @@ Easily replace most buttons in your project with this versatile button component
|
|
|
59
59
|
hoverText?: 'black' | 'primary' | 'secondary' | 'white'
|
|
60
60
|
href?: string | undefined
|
|
61
61
|
id?: string
|
|
62
|
-
|
|
62
|
+
noCenter?: boolean
|
|
63
63
|
noHeight?: boolean
|
|
64
64
|
noPadding?: boolean
|
|
65
65
|
onclick?: any
|
|
@@ -68,7 +68,7 @@ Easily replace most buttons in your project with this versatile button component
|
|
|
68
68
|
role?: string
|
|
69
69
|
rounded?: 'full' | 'lg' | 'none' | 'sm'
|
|
70
70
|
target?: '_blank' | '_top' | undefined
|
|
71
|
-
title?: string
|
|
71
|
+
title?: string | undefined
|
|
72
72
|
type?: 'submit'
|
|
73
73
|
uppercase?: boolean
|
|
74
74
|
value?: string | number
|
package/dist/Button.svelte
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
interface Props {
|
|
6
6
|
ariaControls?: string | undefined
|
|
7
7
|
ariaExpanded?: boolean | undefined
|
|
8
|
-
ariaLabel?: string
|
|
8
|
+
ariaLabel?: string | undefined
|
|
9
9
|
ariaPopup?: 'dialog' | 'listbox' | 'menu' | undefined
|
|
10
10
|
borderColor?: 'content' | 'default' | 'primary'
|
|
11
11
|
borderSize?: 0 | 1 | 2
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
hoverText?: 'black' | 'primary' | 'secondary' | 'white'
|
|
23
23
|
href?: string | undefined
|
|
24
24
|
id?: string
|
|
25
|
-
|
|
25
|
+
noCenter?: boolean
|
|
26
26
|
noHeight?: boolean
|
|
27
27
|
noPadding?: boolean
|
|
28
28
|
onclick?: any
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
role?: string
|
|
32
32
|
rounded?: 'full' | 'lg' | 'none' | 'sm'
|
|
33
33
|
target?: '_blank' | '_top' | undefined
|
|
34
|
-
title?: string
|
|
34
|
+
title?: string | undefined
|
|
35
35
|
type?: 'submit'
|
|
36
36
|
uppercase?: boolean
|
|
37
37
|
value?: string | number
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
hoverText = 'white',
|
|
58
58
|
href,
|
|
59
59
|
id,
|
|
60
|
-
|
|
60
|
+
noCenter = false,
|
|
61
61
|
noHeight,
|
|
62
62
|
noPadding,
|
|
63
63
|
onclick = undefined,
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
value
|
|
73
73
|
}: Props = $props()
|
|
74
74
|
|
|
75
|
-
let classes = $state(
|
|
75
|
+
let classes = $state(`btn text-${color}${isActive ? ' active' : ''}`)
|
|
76
76
|
|
|
77
77
|
if (control) {
|
|
78
78
|
classes += ' control'
|
|
@@ -100,8 +100,8 @@
|
|
|
100
100
|
if (hoverText) {
|
|
101
101
|
classes += ' hover-text-' + hoverText
|
|
102
102
|
}
|
|
103
|
-
if (
|
|
104
|
-
classes += '
|
|
103
|
+
if (!noCenter) {
|
|
104
|
+
classes += ' center'
|
|
105
105
|
}
|
|
106
106
|
if (noHeight) {
|
|
107
107
|
classes += ' no-height'
|
|
@@ -188,6 +188,8 @@
|
|
|
188
188
|
.btn {
|
|
189
189
|
align-items: center;
|
|
190
190
|
display: inline-flex;
|
|
191
|
+
}
|
|
192
|
+
.btn.center {
|
|
191
193
|
justify-content: center;
|
|
192
194
|
}
|
|
193
195
|
.btn:not(.border-solid) {
|
package/dist/Button.svelte.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
|
|
|
2
2
|
interface Props {
|
|
3
3
|
ariaControls?: string | undefined;
|
|
4
4
|
ariaExpanded?: boolean | undefined;
|
|
5
|
-
ariaLabel?: string;
|
|
5
|
+
ariaLabel?: string | undefined;
|
|
6
6
|
ariaPopup?: 'dialog' | 'listbox' | 'menu' | undefined;
|
|
7
7
|
borderColor?: 'content' | 'default' | 'primary';
|
|
8
8
|
borderSize?: 0 | 1 | 2;
|
|
@@ -19,7 +19,7 @@ interface Props {
|
|
|
19
19
|
hoverText?: 'black' | 'primary' | 'secondary' | 'white';
|
|
20
20
|
href?: string | undefined;
|
|
21
21
|
id?: string;
|
|
22
|
-
|
|
22
|
+
noCenter?: boolean;
|
|
23
23
|
noHeight?: boolean;
|
|
24
24
|
noPadding?: boolean;
|
|
25
25
|
onclick?: any;
|
|
@@ -28,7 +28,7 @@ interface Props {
|
|
|
28
28
|
role?: string;
|
|
29
29
|
rounded?: 'full' | 'lg' | 'none' | 'sm';
|
|
30
30
|
target?: '_blank' | '_top' | undefined;
|
|
31
|
-
title?: string;
|
|
31
|
+
title?: string | undefined;
|
|
32
32
|
type?: 'submit';
|
|
33
33
|
uppercase?: boolean;
|
|
34
34
|
value?: string | number;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tuspe/components",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.3",
|
|
4
4
|
"description": "A reusable SvelteKit component library for form elements, breadcrumbs, prices and images.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"svelteKit",
|
|
@@ -79,4 +79,4 @@
|
|
|
79
79
|
"typescript": "^5.8.2",
|
|
80
80
|
"vite": "^6.2.2"
|
|
81
81
|
}
|
|
82
|
-
}
|
|
82
|
+
}
|