@tuspe/components 1.8.6 → 1.8.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/README.md +2 -0
- package/dist/Button.svelte +35 -2
- package/dist/Button.svelte.d.ts +2 -0
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -62,11 +62,13 @@ Easily replace most buttons in your project with this versatile button component
|
|
|
62
62
|
noCenter?: boolean
|
|
63
63
|
noHeight?: boolean
|
|
64
64
|
noPadding?: boolean
|
|
65
|
+
noSpinner?: boolean
|
|
65
66
|
onclick?: any
|
|
66
67
|
preload?: 'hover' | 'tap'
|
|
67
68
|
rel?: string
|
|
68
69
|
role?: string
|
|
69
70
|
rounded?: 'full' | 'lg' | 'none' | 'sm'
|
|
71
|
+
spinnerColor?: 'black' | 'white'
|
|
70
72
|
target?: '_blank' | '_top' | undefined
|
|
71
73
|
title?: string | undefined
|
|
72
74
|
type?: 'submit'
|
package/dist/Button.svelte
CHANGED
|
@@ -25,11 +25,13 @@
|
|
|
25
25
|
noCenter?: boolean
|
|
26
26
|
noHeight?: boolean
|
|
27
27
|
noPadding?: boolean
|
|
28
|
+
noSpinner?: boolean
|
|
28
29
|
onclick?: any
|
|
29
30
|
preload?: 'hover' | 'tap'
|
|
30
31
|
rel?: string
|
|
31
32
|
role?: string
|
|
32
33
|
rounded?: 'full' | 'lg' | 'none' | 'sm'
|
|
34
|
+
spinnerColor?: 'black' | 'white'
|
|
33
35
|
target?: '_blank' | '_top' | undefined
|
|
34
36
|
title?: string | undefined
|
|
35
37
|
type?: 'submit'
|
|
@@ -60,11 +62,13 @@
|
|
|
60
62
|
noCenter = false,
|
|
61
63
|
noHeight,
|
|
62
64
|
noPadding,
|
|
65
|
+
noSpinner,
|
|
63
66
|
onclick = undefined,
|
|
64
67
|
preload,
|
|
65
68
|
rel = 'noopener noreferrer',
|
|
66
69
|
role,
|
|
67
70
|
rounded = 'sm',
|
|
71
|
+
spinnerColor = 'white',
|
|
68
72
|
target,
|
|
69
73
|
title,
|
|
70
74
|
type,
|
|
@@ -133,17 +137,46 @@
|
|
|
133
137
|
aria-haspopup={ariaPopup}
|
|
134
138
|
aria-label={ariaLabel}
|
|
135
139
|
class={classes}
|
|
136
|
-
|
|
140
|
+
{disabled}
|
|
137
141
|
>
|
|
138
142
|
{@render children?.()}
|
|
139
143
|
</button>
|
|
140
144
|
{:else}
|
|
141
145
|
<button {onclick} class={classes} {disabled} {title} {type}>
|
|
142
|
-
{
|
|
146
|
+
{#if $loading && !noSpinner}
|
|
147
|
+
<span class={`loader ${spinnerColor}`}></span>
|
|
148
|
+
{:else}
|
|
149
|
+
{@render children?.()}
|
|
150
|
+
{/if}
|
|
143
151
|
</button>
|
|
144
152
|
{/if}
|
|
145
153
|
|
|
146
154
|
<style scoped>
|
|
155
|
+
.loader {
|
|
156
|
+
animation: rotation 1s linear infinite;
|
|
157
|
+
border-radius: 50%;
|
|
158
|
+
border-right: 6px solid transparent;
|
|
159
|
+
border-top-style: solid;
|
|
160
|
+
border-top-width: 6px;
|
|
161
|
+
box-sizing: border-box;
|
|
162
|
+
display: inline-block;
|
|
163
|
+
height: 20px;
|
|
164
|
+
width: 20px;
|
|
165
|
+
}
|
|
166
|
+
.loader.white {
|
|
167
|
+
border-top-color: #000;
|
|
168
|
+
}
|
|
169
|
+
.loader.white {
|
|
170
|
+
border-top-color: #fff;
|
|
171
|
+
}
|
|
172
|
+
@keyframes rotation {
|
|
173
|
+
0% {
|
|
174
|
+
transform: rotate(0deg);
|
|
175
|
+
}
|
|
176
|
+
100% {
|
|
177
|
+
transform: rotate(360deg);
|
|
178
|
+
}
|
|
179
|
+
}
|
|
147
180
|
a {
|
|
148
181
|
text-decoration: none;
|
|
149
182
|
}
|
package/dist/Button.svelte.d.ts
CHANGED
|
@@ -22,11 +22,13 @@ interface Props {
|
|
|
22
22
|
noCenter?: boolean;
|
|
23
23
|
noHeight?: boolean;
|
|
24
24
|
noPadding?: boolean;
|
|
25
|
+
noSpinner?: boolean;
|
|
25
26
|
onclick?: any;
|
|
26
27
|
preload?: 'hover' | 'tap';
|
|
27
28
|
rel?: string;
|
|
28
29
|
role?: string;
|
|
29
30
|
rounded?: 'full' | 'lg' | 'none' | 'sm';
|
|
31
|
+
spinnerColor?: 'black' | 'white';
|
|
30
32
|
target?: '_blank' | '_top' | undefined;
|
|
31
33
|
title?: string | undefined;
|
|
32
34
|
type?: 'submit';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tuspe/components",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.8",
|
|
4
4
|
"description": "A reusable SvelteKit component library for form elements, breadcrumbs, prices and images.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"svelteKit",
|
|
@@ -60,23 +60,23 @@
|
|
|
60
60
|
"svelte": "^5.20.2"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
|
-
"@eslint/compat": "^1.2.
|
|
64
|
-
"@eslint/js": "^9.
|
|
63
|
+
"@eslint/compat": "^1.2.9",
|
|
64
|
+
"@eslint/js": "^9.26.0",
|
|
65
65
|
"@sveltejs/adapter-static": "^3.0.8",
|
|
66
|
-
"@sveltejs/kit": "^2.20.
|
|
66
|
+
"@sveltejs/kit": "^2.20.8",
|
|
67
67
|
"@sveltejs/package": "^2.3.11",
|
|
68
68
|
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
69
69
|
"eslint-config-prettier": "^10.1.2",
|
|
70
70
|
"eslint-plugin-svelte": "^3.5.1",
|
|
71
|
-
"eslint": "^9.
|
|
71
|
+
"eslint": "^9.26.0",
|
|
72
72
|
"globals": "^16.0.0",
|
|
73
73
|
"prettier-plugin-svelte": "^3.3.3",
|
|
74
74
|
"prettier": "^3.5.3",
|
|
75
75
|
"publint": "^0.3.12",
|
|
76
|
-
"svelte-check": "^4.1.
|
|
76
|
+
"svelte-check": "^4.1.7",
|
|
77
77
|
"svelte": "^5.28.2",
|
|
78
|
-
"typescript-eslint": "^8.
|
|
78
|
+
"typescript-eslint": "^8.32.0",
|
|
79
79
|
"typescript": "^5.8.3",
|
|
80
|
-
"vite": "^6.3.
|
|
80
|
+
"vite": "^6.3.5"
|
|
81
81
|
}
|
|
82
82
|
}
|