@tuspe/components 1.7.5 → 1.7.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/README.md +11 -0
- package/dist/ButtonClose.svelte +1 -1
- package/dist/Modal.svelte +16 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,6 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
[Tuspe Design](https://tuspe.com/en) builds websites and online stores for small and large businesses. This component library includes essential elements for forms, modals, breadcrumbs, and images. It also offers utility functions for price display, VAT calculations, and validations for tables and strings.
|
|
4
4
|
|
|
5
|
+
## Example of required style specifications
|
|
6
|
+
|
|
7
|
+
```CSS
|
|
8
|
+
:root {
|
|
9
|
+
--color-border: #bbb;
|
|
10
|
+
--color-content: #362e26;
|
|
11
|
+
--color-primary: #20a3cb;
|
|
12
|
+
--color-secondary: #263927;
|
|
13
|
+
}
|
|
14
|
+
```
|
|
15
|
+
|
|
5
16
|
## Breadcrumbs
|
|
6
17
|
|
|
7
18
|
A breadcrumb navigation provide links back to previous pages, and shows the user's current location in a website. The component complies with [Google standards](https://developers.google.com/search/docs/appearance/structured-data/breadcrumb).
|
package/dist/ButtonClose.svelte
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
<div class="close-button">
|
|
16
16
|
<Button {ariaLabel} {color} {onclick} control fill {hover}>
|
|
17
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true">
|
|
17
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" fill={color}>
|
|
18
18
|
<title>Close</title>
|
|
19
19
|
<path
|
|
20
20
|
d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5 15.538l-3.592-3.548 3.546-3.587-1.416-1.403-3.545 3.589-3.588-3.543-1.405 1.405 3.593 3.552-3.547 3.592 1.405 1.405 3.555-3.596 3.591 3.55 1.403-1.416z"
|
package/dist/Modal.svelte
CHANGED
|
@@ -17,26 +17,20 @@
|
|
|
17
17
|
children,
|
|
18
18
|
buttonAriaLabel,
|
|
19
19
|
colorButton = 'white',
|
|
20
|
-
|
|
21
|
-
headerClass = 'bg-primary',
|
|
20
|
+
headerClass = 'bg-primary text-white',
|
|
22
21
|
innerClass,
|
|
23
22
|
open = $bindable(),
|
|
24
|
-
outerClass,
|
|
23
|
+
outerClass = 'bg-white text-content',
|
|
25
24
|
title,
|
|
26
|
-
titleClass
|
|
25
|
+
titleClass = 'text-white'
|
|
27
26
|
}: Props = $props()
|
|
28
27
|
const handleClose = () => {
|
|
29
28
|
open = false
|
|
30
29
|
}
|
|
31
|
-
|
|
32
|
-
let contentClass = $state('bg-' + colorBg)
|
|
33
|
-
if (outerClass) {
|
|
34
|
-
contentClass += ' ' + outerClass
|
|
35
|
-
}
|
|
36
30
|
</script>
|
|
37
31
|
|
|
38
32
|
<div id="modal" class:hidden={!open}>
|
|
39
|
-
<div id="modal-content" class={
|
|
33
|
+
<div id="modal-content" class={outerClass} aria-live="polite">
|
|
40
34
|
<header class={headerClass}>
|
|
41
35
|
{#if title}
|
|
42
36
|
<h2 class={titleClass}>{title}</h2>
|
|
@@ -68,9 +62,6 @@
|
|
|
68
62
|
display: none;
|
|
69
63
|
visibility: hidden;
|
|
70
64
|
}
|
|
71
|
-
#modal header.bg-primary {
|
|
72
|
-
background-color: var(--color-primary);
|
|
73
|
-
}
|
|
74
65
|
#modal-content {
|
|
75
66
|
border-radius: 1rem;
|
|
76
67
|
border: 2px solid var(--color-primary);
|
|
@@ -97,4 +88,16 @@
|
|
|
97
88
|
line-height: 1;
|
|
98
89
|
margin: 0;
|
|
99
90
|
}
|
|
91
|
+
.bg-primary {
|
|
92
|
+
background-color: var(--color-primary);
|
|
93
|
+
}
|
|
94
|
+
.bg-white {
|
|
95
|
+
background-color: #fff;
|
|
96
|
+
}
|
|
97
|
+
.text-content {
|
|
98
|
+
color: var(--color-content);
|
|
99
|
+
}
|
|
100
|
+
.text-white {
|
|
101
|
+
color: #fff;
|
|
102
|
+
}
|
|
100
103
|
</style>
|