@softwareone/spi-sv5-library 0.0.10 → 0.0.12
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 +19 -2
- package/dist/Breadcrumbs/Breadcrumbs.svelte +2 -1
- package/dist/Card/Card.svelte +65 -0
- package/dist/Card/Card.svelte.d.ts +10 -0
- package/dist/Chips/Chips.svelte +78 -0
- package/dist/Chips/Chips.svelte.d.ts +7 -0
- package/dist/Toast/Toast.svelte +2 -2
- package/dist/index.d.ts +3 -1
- package/dist/index.js +3 -1
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
# SoftwareOne SPI Component Library for Svelte
|
|
2
|
+
|
|
2
3
|
This library provides a set of reusable components to help you build modern web applications with Svelte 5 (Runes) and SvelteKit 2. Each component is designed to be easily customizable and integrate seamlessly with your Svelte projects.
|
|
3
4
|
|
|
4
5
|
## Installation
|
|
@@ -8,7 +9,9 @@ To install the library, use the following command:
|
|
|
8
9
|
```bash
|
|
9
10
|
npm install @softwareone/swo-spi-svelte5-library
|
|
10
11
|
```
|
|
12
|
+
|
|
11
13
|
### Optional but recommened is modify app.html
|
|
14
|
+
|
|
12
15
|
```diff
|
|
13
16
|
<!doctype html>
|
|
14
17
|
<html lang="en">
|
|
@@ -30,14 +33,28 @@ npm install @softwareone/swo-spi-svelte5-library
|
|
|
30
33
|
Import the components you need into your Svelte application:
|
|
31
34
|
|
|
32
35
|
```javascript
|
|
33
|
-
import {
|
|
36
|
+
import {
|
|
37
|
+
Button,
|
|
38
|
+
Modal,
|
|
39
|
+
Spinner,
|
|
40
|
+
Toaster,
|
|
41
|
+
addToast,
|
|
42
|
+
type Toast,
|
|
43
|
+
Toggle,
|
|
44
|
+
Header,
|
|
45
|
+
Chips,
|
|
46
|
+
Card,
|
|
47
|
+
} from "@softwareone/swo-spi-svelte5-library";
|
|
34
48
|
```
|
|
35
49
|
|
|
36
50
|
# List of components
|
|
51
|
+
|
|
37
52
|
- Button
|
|
38
53
|
- Modal
|
|
39
54
|
- Spinner
|
|
40
55
|
- Toaster
|
|
41
56
|
- Toggle
|
|
42
57
|
- Header (including a loader)
|
|
43
|
-
- Breadcrumbs
|
|
58
|
+
- Breadcrumbs
|
|
59
|
+
- Chips
|
|
60
|
+
- Card
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
import { get } from 'svelte/store';
|
|
4
|
+
interface CardProps {
|
|
5
|
+
alignItems?: 'left' | 'center' | 'right';
|
|
6
|
+
type?: 'default' | 'layout';
|
|
7
|
+
height?: string;
|
|
8
|
+
children?: Snippet;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
let { alignItems, type, children }: CardProps = $props();
|
|
12
|
+
|
|
13
|
+
alignItems = alignItems ?? 'left';
|
|
14
|
+
type = type ?? 'default';
|
|
15
|
+
|
|
16
|
+
const getCardType = (type: string): string => {
|
|
17
|
+
const types: Record<string, string> = {
|
|
18
|
+
layout: 'card-layout',
|
|
19
|
+
default: 'card'
|
|
20
|
+
};
|
|
21
|
+
return types[type] || 'card'; // Default to card if type is unknown
|
|
22
|
+
};
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
<div class={getCardType(type)} data-align={alignItems}>
|
|
26
|
+
<div class="card-content">
|
|
27
|
+
{@render children?.()}
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
<style>
|
|
32
|
+
.card,
|
|
33
|
+
.card-layout {
|
|
34
|
+
display: inline-flex;
|
|
35
|
+
margin-left: 24px;
|
|
36
|
+
margin-right: 48px;
|
|
37
|
+
min-width: 222px;
|
|
38
|
+
min-height: 222px;
|
|
39
|
+
flex-direction: column;
|
|
40
|
+
background: var(--brand-white, #fff);
|
|
41
|
+
border-radius: var(--Card-radius, 24px);
|
|
42
|
+
box-shadow:
|
|
43
|
+
0px 1px 16px 0px rgba(107, 113, 128, 0.1),
|
|
44
|
+
0px 1px 3px 0px rgba(107, 113, 128, 0.2);
|
|
45
|
+
}
|
|
46
|
+
.card-layout {
|
|
47
|
+
height: calc(100vh - 17rem - 48px);
|
|
48
|
+
width: calc(100% - 48px);
|
|
49
|
+
}
|
|
50
|
+
.card[data-align='left'],
|
|
51
|
+
.card-layout[data-align='left'] {
|
|
52
|
+
align-items: flex-start;
|
|
53
|
+
}
|
|
54
|
+
.card[data-align='center'],
|
|
55
|
+
.card-layout[data-align='center'] {
|
|
56
|
+
align-items: center;
|
|
57
|
+
}
|
|
58
|
+
.card[data-align='right'],
|
|
59
|
+
.card-layout[data-align='right'] {
|
|
60
|
+
align-items: flex-end;
|
|
61
|
+
}
|
|
62
|
+
.card-content {
|
|
63
|
+
padding: 24px;
|
|
64
|
+
}
|
|
65
|
+
</style>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
interface CardProps {
|
|
3
|
+
alignItems?: 'left' | 'center' | 'right';
|
|
4
|
+
type?: 'default' | 'layout';
|
|
5
|
+
height?: string;
|
|
6
|
+
children?: Snippet;
|
|
7
|
+
}
|
|
8
|
+
declare const Card: import("svelte").Component<CardProps, {}, "">;
|
|
9
|
+
type Card = ReturnType<typeof Card>;
|
|
10
|
+
export default Card;
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
interface ChipsProps {
|
|
3
|
+
type?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
|
|
4
|
+
text?: string;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
let { type, text }: ChipsProps = $props();
|
|
8
|
+
|
|
9
|
+
type = type || 'info';
|
|
10
|
+
text = text || type.charAt(0).toUpperCase() + type.slice(1); // Default to capitalized type
|
|
11
|
+
|
|
12
|
+
let className = `chip chip-${type}`;
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<div class={className}>
|
|
16
|
+
{text}
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<style>
|
|
20
|
+
/* Base chip styles */
|
|
21
|
+
.chip {
|
|
22
|
+
display: inline-flex;
|
|
23
|
+
padding: 2px 8px;
|
|
24
|
+
align-items: center;
|
|
25
|
+
gap: 8px;
|
|
26
|
+
border-radius: 4px;
|
|
27
|
+
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
|
|
28
|
+
font-size: 14px;
|
|
29
|
+
font-style: normal;
|
|
30
|
+
font-weight: 400;
|
|
31
|
+
line-height: 20px; /* 142.857% */
|
|
32
|
+
|
|
33
|
+
/* Default colors (can be overridden by specific types) */
|
|
34
|
+
background: var(--chip-bg, #eaecff);
|
|
35
|
+
color: var(--chip-text, #3520bf);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.chip:hover {
|
|
39
|
+
background: var(--chip-hover, #959bff);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.chip:focus {
|
|
43
|
+
background: var(--chip-hover, #959bff);
|
|
44
|
+
box-shadow: 0px 0px 0px 3px var(--chip-hover, #959bff);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* Type-specific styles using CSS variables */
|
|
48
|
+
.chip-info {
|
|
49
|
+
--chip-bg: var(--alerts-info-1, #eaecff);
|
|
50
|
+
--chip-text: var(--alerts-info-3, #3520bf);
|
|
51
|
+
--chip-hover: var(--alerts-info-2, #959bff);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.chip-success {
|
|
55
|
+
--chip-bg: var(--alerts-success-1, #E6F9F2);
|
|
56
|
+
--chip-text: var(--alerts-success-3, #00784D);
|
|
57
|
+
--chip-hover: var(--alerts-success-2, #80E1AE);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.chip-warning {
|
|
61
|
+
--chip-bg: var(--alerts-warning-1, #FDF2E9);
|
|
62
|
+
--chip-text: var(--alerts-warning-3, #A15D26);
|
|
63
|
+
--chip-hover: var(--alerts-warning-2, #F1B178);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.chip-error {
|
|
67
|
+
--chip-bg: var(--alerts-error-1, #FCE8EA);
|
|
68
|
+
--chip-text: var(--alerts-error-3, #BB1425);
|
|
69
|
+
--chip-hover: var(--alerts-error-2, #EE8C96);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.chip-neutral {
|
|
73
|
+
--chip-bg: var(--alerts-neutral-1, #F4F6F8);
|
|
74
|
+
--chip-text: var(--alerts-neutral-3, #434952);
|
|
75
|
+
--chip-hover: var(--alerts-neutral-2, #E0E5E8);
|
|
76
|
+
}
|
|
77
|
+
</style>
|
|
78
|
+
|
package/dist/Toast/Toast.svelte
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -7,4 +7,6 @@ import Toggle from './Toggle/Toggle.svelte';
|
|
|
7
7
|
import Header from './Header/Header.svelte';
|
|
8
8
|
import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
|
|
9
9
|
import { addBreadcrumbsNameMap, type BreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
|
|
10
|
-
|
|
10
|
+
import Chips from './Chips/Chips.svelte';
|
|
11
|
+
import Card from './Card/Card.svelte';
|
|
12
|
+
export { Button, Modal, Spinner, Toaster, addToast, type Toast, Toggle, Header, Breadcrumbs, addBreadcrumbsNameMap, type BreadcrumbsNameMap, Chips, Card };
|
package/dist/index.js
CHANGED
|
@@ -8,4 +8,6 @@ import Toggle from './Toggle/Toggle.svelte';
|
|
|
8
8
|
import Header from './Header/Header.svelte';
|
|
9
9
|
import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
|
|
10
10
|
import { addBreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
|
|
11
|
-
|
|
11
|
+
import Chips from './Chips/Chips.svelte';
|
|
12
|
+
import Card from './Card/Card.svelte';
|
|
13
|
+
export { Button, Modal, Spinner, Toaster, addToast, Toggle, Header, Breadcrumbs, addBreadcrumbsNameMap, Chips, Card };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@softwareone/spi-sv5-library",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.12",
|
|
4
4
|
"description": "Svelte components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"svelte",
|
|
@@ -58,6 +58,7 @@
|
|
|
58
58
|
"vite": "^6.0.0"
|
|
59
59
|
},
|
|
60
60
|
"dependencies": {
|
|
61
|
-
"lucide-svelte": "^0.475.0"
|
|
61
|
+
"lucide-svelte": "^0.475.0",
|
|
62
|
+
"@sveltejs/kit": "^2.16.0"
|
|
62
63
|
}
|
|
63
64
|
}
|