@softwareone/spi-sv5-library 0.0.9 → 0.0.10
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 +20 -2
- package/dist/Breadcrumbs/Breadcrumbs.svelte +86 -0
- package/dist/Breadcrumbs/Breadcrumbs.svelte.d.ts +18 -0
- package/dist/Breadcrumbs/breadcrumbsState.svelte.d.ts +8 -0
- package/dist/Breadcrumbs/breadcrumbsState.svelte.js +24 -0
- package/dist/index.d.ts +10 -8
- package/dist/index.js +10 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,13 +8,29 @@ To install the library, use the following command:
|
|
|
8
8
|
```bash
|
|
9
9
|
npm install @softwareone/swo-spi-svelte5-library
|
|
10
10
|
```
|
|
11
|
+
### Optional but recommened is modify app.html
|
|
12
|
+
```diff
|
|
13
|
+
<!doctype html>
|
|
14
|
+
<html lang="en">
|
|
15
|
+
<head>
|
|
16
|
+
<meta charset="utf-8" />
|
|
17
|
+
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
|
18
|
+
+ <link rel="stylesheet" href="https://fonts.cdnfonts.com/css/neue-haas-grotesk-display-pro" >
|
|
19
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
20
|
+
%sveltekit.head%
|
|
21
|
+
</head>
|
|
22
|
+
<body data-sveltekit-preload-data="hover">
|
|
23
|
+
<div>%sveltekit.body%</div>
|
|
24
|
+
</body>
|
|
25
|
+
</html>
|
|
26
|
+
```
|
|
11
27
|
|
|
12
28
|
## Usage
|
|
13
29
|
|
|
14
30
|
Import the components you need into your Svelte application:
|
|
15
31
|
|
|
16
32
|
```javascript
|
|
17
|
-
import { Button, Modal, Spinner, Toaster, addToast, type Toast } from '@softwareone/swo-spi-svelte5-library';
|
|
33
|
+
import { Button, Modal, Spinner, Toaster, addToast, type Toast, Toggle, Header } from '@softwareone/swo-spi-svelte5-library';
|
|
18
34
|
```
|
|
19
35
|
|
|
20
36
|
# List of components
|
|
@@ -22,4 +38,6 @@ import { Button, Modal, Spinner, Toaster, addToast, type Toast } from '@software
|
|
|
22
38
|
- Modal
|
|
23
39
|
- Spinner
|
|
24
40
|
- Toaster
|
|
25
|
-
- Toggle
|
|
41
|
+
- Toggle
|
|
42
|
+
- Header (including a loader)
|
|
43
|
+
- Breadcrumbs
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { page } from '$app/state';
|
|
3
|
+
import { getBreadcrumbsNameMap, formatString } from './breadcrumbsState.svelte';
|
|
4
|
+
|
|
5
|
+
// Mapping for human-readable names
|
|
6
|
+
const map = getBreadcrumbsNameMap();
|
|
7
|
+
|
|
8
|
+
// Generate breadcrumb segments
|
|
9
|
+
function getBreadcrumbs() {
|
|
10
|
+
const segments = page.url.pathname.split('/').filter(Boolean);
|
|
11
|
+
return segments.map((segment, index) => ({
|
|
12
|
+
name: map.names[segment] || formatString(segment),
|
|
13
|
+
path: '/' + segments.slice(0, index + 1).join('/')
|
|
14
|
+
}));
|
|
15
|
+
}
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<nav aria-label="Breadcrumb">
|
|
19
|
+
<ul class="breadcrumb">
|
|
20
|
+
<li><a href="/">Home</a></li>
|
|
21
|
+
{#each getBreadcrumbs() as { name, path }, i}
|
|
22
|
+
<li>
|
|
23
|
+
{#if i === getBreadcrumbs().length - 1}
|
|
24
|
+
<span class="breadcrumbActive">{name}</span>
|
|
25
|
+
{:else}
|
|
26
|
+
<span><a href={path}>{name}</a></span>
|
|
27
|
+
{/if}
|
|
28
|
+
</li>
|
|
29
|
+
{/each}
|
|
30
|
+
</ul>
|
|
31
|
+
</nav>
|
|
32
|
+
|
|
33
|
+
<style>
|
|
34
|
+
.breadcrumb {
|
|
35
|
+
list-style: none;
|
|
36
|
+
display: inline-flex;
|
|
37
|
+
align-items: flex-end;
|
|
38
|
+
gap: 9px;
|
|
39
|
+
padding: 0;
|
|
40
|
+
color: var(--brand-primary, #472aff);
|
|
41
|
+
/* regular/2 */
|
|
42
|
+
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
|
|
43
|
+
font-size: 14px;
|
|
44
|
+
font-style: normal;
|
|
45
|
+
font-weight: 400;
|
|
46
|
+
line-height: 20px; /* 142.857% */
|
|
47
|
+
text-decoration-line: none;
|
|
48
|
+
}
|
|
49
|
+
.breadcrumb li::after {
|
|
50
|
+
content: '/';
|
|
51
|
+
margin-left: 8px;
|
|
52
|
+
color: var(--brand-primary, #472aff);
|
|
53
|
+
/* regular/2 */
|
|
54
|
+
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
|
|
55
|
+
font-size: 14px;
|
|
56
|
+
font-style: normal;
|
|
57
|
+
font-weight: 400;
|
|
58
|
+
line-height: 20px; /* 142.857% */
|
|
59
|
+
}
|
|
60
|
+
.breadcrumb li:last-child::after {
|
|
61
|
+
content: '';
|
|
62
|
+
}
|
|
63
|
+
.breadcrumbActive {
|
|
64
|
+
color: var(--brand-type, #000);
|
|
65
|
+
/* bold/4 */
|
|
66
|
+
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
|
|
67
|
+
font-size: 18px;
|
|
68
|
+
font-style: normal;
|
|
69
|
+
font-weight: 700;
|
|
70
|
+
line-height: 20px; /* 144.444% */
|
|
71
|
+
}
|
|
72
|
+
/* Prevent the visited (purple) color */
|
|
73
|
+
.breadcrumb a {
|
|
74
|
+
color: inherit; /* Keeps the same color as the parent */
|
|
75
|
+
text-decoration: none; /* Optional: removes underline */
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.breadcrumb a:visited {
|
|
79
|
+
color: inherit; /* Ensures visited links don't change color */
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.breadcrumb a:hover {
|
|
83
|
+
text-decoration: none; /* Optional: Add an underline on hover */
|
|
84
|
+
color: #2B1999
|
|
85
|
+
}
|
|
86
|
+
</style>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
+
$$bindings?: Bindings;
|
|
4
|
+
} & Exports;
|
|
5
|
+
(internal: unknown, props: {
|
|
6
|
+
$$events?: Events;
|
|
7
|
+
$$slots?: Slots;
|
|
8
|
+
}): Exports & {
|
|
9
|
+
$set?: any;
|
|
10
|
+
$on?: any;
|
|
11
|
+
};
|
|
12
|
+
z_$$bindings?: Bindings;
|
|
13
|
+
}
|
|
14
|
+
declare const Breadcrumbs: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
}, {}, {}, string>;
|
|
17
|
+
type Breadcrumbs = InstanceType<typeof Breadcrumbs>;
|
|
18
|
+
export default Breadcrumbs;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export interface BreadcrumbsNameMap {
|
|
2
|
+
[key: string]: string;
|
|
3
|
+
}
|
|
4
|
+
export declare function getBreadcrumbsNameMap(): {
|
|
5
|
+
names: BreadcrumbsNameMap;
|
|
6
|
+
};
|
|
7
|
+
export declare function addBreadcrumbsNameMap(breadcrumbs: BreadcrumbsNameMap): void;
|
|
8
|
+
export declare function formatString(input: string): string;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
const breadcrumbsState = $state({
|
|
2
|
+
names: {},
|
|
3
|
+
});
|
|
4
|
+
export function getBreadcrumbsNameMap() {
|
|
5
|
+
return breadcrumbsState;
|
|
6
|
+
}
|
|
7
|
+
export function addBreadcrumbsNameMap(breadcrumbs) {
|
|
8
|
+
breadcrumbsState.names = breadcrumbs;
|
|
9
|
+
}
|
|
10
|
+
export function formatString(input) {
|
|
11
|
+
return input
|
|
12
|
+
// Replace hyphens and underscores with spaces
|
|
13
|
+
.replace(/[-_]/g, ' ')
|
|
14
|
+
// Insert spaces before uppercase letters (preserving the first letter)
|
|
15
|
+
.replace(/([a-z])([A-Z])/g, '$1 $2')
|
|
16
|
+
// Capitalize each word
|
|
17
|
+
.replace(/\b\w/g, char => char.toUpperCase());
|
|
18
|
+
}
|
|
19
|
+
// const nameMap: Record<string, string> = {
|
|
20
|
+
// "dashboard": "Dashboard",
|
|
21
|
+
// "settings": "Settings",
|
|
22
|
+
// "profile": "Profile",
|
|
23
|
+
// "about-us": "About Us",
|
|
24
|
+
// };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
import Button from
|
|
2
|
-
import Modal from
|
|
3
|
-
import Spinner from
|
|
4
|
-
import Toaster from
|
|
5
|
-
import { addToast, type Toast } from
|
|
6
|
-
import Toggle from
|
|
7
|
-
import Header from
|
|
8
|
-
|
|
1
|
+
import Button from './Button/Button.svelte';
|
|
2
|
+
import Modal from './Modal/Modal.svelte';
|
|
3
|
+
import Spinner from './Spinner/Spinner.svelte';
|
|
4
|
+
import Toaster from './Toast/Toast.svelte';
|
|
5
|
+
import { addToast, type Toast } from './Toast/toastState.svelte';
|
|
6
|
+
import Toggle from './Toggle/Toggle.svelte';
|
|
7
|
+
import Header from './Header/Header.svelte';
|
|
8
|
+
import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
|
|
9
|
+
import { addBreadcrumbsNameMap, type BreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
|
|
10
|
+
export { Button, Modal, Spinner, Toaster, addToast, type Toast, Toggle, Header, Breadcrumbs, addBreadcrumbsNameMap, type BreadcrumbsNameMap };
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
// Reexport your entry components here
|
|
2
|
-
import Button from
|
|
3
|
-
import Modal from
|
|
4
|
-
import Spinner from
|
|
5
|
-
import Toaster from
|
|
6
|
-
import { addToast } from
|
|
7
|
-
import Toggle from
|
|
8
|
-
import Header from
|
|
9
|
-
|
|
2
|
+
import Button from './Button/Button.svelte';
|
|
3
|
+
import Modal from './Modal/Modal.svelte';
|
|
4
|
+
import Spinner from './Spinner/Spinner.svelte';
|
|
5
|
+
import Toaster from './Toast/Toast.svelte';
|
|
6
|
+
import { addToast } from './Toast/toastState.svelte';
|
|
7
|
+
import Toggle from './Toggle/Toggle.svelte';
|
|
8
|
+
import Header from './Header/Header.svelte';
|
|
9
|
+
import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
|
|
10
|
+
import { addBreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
|
|
11
|
+
export { Button, Modal, Spinner, Toaster, addToast, Toggle, Header, Breadcrumbs, addBreadcrumbsNameMap };
|