@softwareone/spi-sv5-library 0.0.11 → 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 +18 -2
- package/dist/Breadcrumbs/Breadcrumbs.svelte +1 -0
- package/dist/Card/Card.svelte +65 -0
- package/dist/Card/Card.svelte.d.ts +10 -0
- package/dist/Toast/Toast.svelte +2 -2
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/package.json +1 -1
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,10 +33,22 @@ 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
|
|
@@ -41,4 +56,5 @@ import { Button, Modal, Spinner, Toaster, addToast, type Toast, Toggle, Header,
|
|
|
41
56
|
- Toggle
|
|
42
57
|
- Header (including a loader)
|
|
43
58
|
- Breadcrumbs
|
|
44
|
-
- Chips
|
|
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;
|
package/dist/Toast/Toast.svelte
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -8,4 +8,5 @@ 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
|
-
|
|
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
|
@@ -9,4 +9,5 @@ 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
|
-
|
|
12
|
+
import Card from './Card/Card.svelte';
|
|
13
|
+
export { Button, Modal, Spinner, Toaster, addToast, Toggle, Header, Breadcrumbs, addBreadcrumbsNameMap, Chips, Card };
|