Skip to content

Commit 86791fe

Browse files
DavidBlaaDavidBlaa
committed
#23 add alert component and examples, also enhance spinner and theme
1 parent c8b7ec2 commit 86791fe

File tree

13 files changed

+279
-14
lines changed

13 files changed

+279
-14
lines changed

‎src/docs/components/CodeContainer.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ interface prop
5353
<div>
5454
<div class="py-5">
5555
{#if title}
56-
<h3>{title}</h3>
56+
<h3 class="h3">{title}</h3>
5757
{/if}
5858
<div>
5959
<slot name="info" />

‎src/lib/components/Spinner/Spinner.svelte‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,22 @@
1+
<script lang="ts">
2+
import { Position } from "$lib/models/Enums";
3+
4+
export let textCss = "text-secundary-500"
5+
export let label = "";
6+
export let position:Position = Position.start
7+
export let size:number=8;
8+
</script>
9+
10+
<div class="flex justify-{position} items-{position} h-full w-full gap-5 pt-2">
111
<div
2-
class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] text-secundary-500"
12+
class="inline-block h-{size} w-{size} animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] {textCss}"
313
role="status"
414
>
515
<span
616
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
717
>Loading...</span
818
>
919
</div>
20+
<span>{label}</span>
21+
</div>
22+

‎src/lib/components/page/Alert.svelte‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<script lang="ts">
2+
3+
import Fa from 'svelte-fa';
4+
5+
import { faXmark } from '@fortawesome/free-solid-svg-icons';
6+
7+
import {fade} from 'svelte/transition'
8+
9+
export let title:string = "";
10+
export let message:string = "";
11+
export let cssClass:string= "";
12+
export let deleteBtn:boolean = true;
13+
14+
$:show = true;
15+
16+
17+
</script>
18+
{#if show}
19+
20+
<aside class="alert {cssClass}" transition:fade|local={{ duration: 100 }}>
21+
<!-- Icon -->
22+
<!-- <div>(icon)</div> -->
23+
<!-- Message -->
24+
<div class="alert-message">
25+
26+
{#if title}
27+
<h3 class="h3">{title}</h3>
28+
{/if}
29+
<p>{message}
30+
<slot></slot>
31+
</p>
32+
</div>
33+
<!-- Actions -->
34+
<div class="alert-actions">
35+
<slot name="actions"/>
36+
37+
{#if deleteBtn}
38+
<button class="btn hover:text-primary-100" on:click={()=>show = false}>
39+
<Fa icon={faXmark} />
40+
</button>
41+
{/if}
42+
43+
</div>
44+
</aside>
45+
46+
{/if}

‎src/lib/css/themes/theme-bexis2.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
--theme-rounded-container: 4px;
99
--theme-border-base: 1px;
1010
/* =~= Theme On-X Colors =~= */
11-
--on-primary: 0 0 0;
12-
--on-secondary: 0 0 0;
11+
--on-primary: 255 255 255;
12+
--on-secondary: 255 255 255;
1313
--on-tertiary: 0 0 0;
14-
--on-success: 0 0 0;
14+
--on-success: 255 255 255;
1515
--on-warning: 255 255 255;
1616
--on-error: 255 255 255;
1717
--on-surface: 0 0 0;

‎src/lib/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import FileUploader from './components/file/FileUploader.svelte';
99
//page
1010
import Spinner from './components/spinner/Spinner.svelte';
1111
import Page from './components/page/Page.svelte';
12+
import Alert from './components/page/Alert.svelte';
1213

1314
// input
1415
import Checkbox from './components/form/Checkbox.svelte';
@@ -43,7 +44,7 @@ export {
4344
export { FileInfo, FileIcon, FileUploader };
4445

4546
//others
46-
export { ListView, TableView, Spinner, Page };
47+
export { ListView, TableView, Spinner, Page, Alert };
4748

4849
//Api
4950
export { Api } from './services/Api.js';

‎src/lib/models/Enums.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
export enum Position {
3+
start = "start",
4+
end = "end",
5+
center = "center"
6+
}

‎src/lib/models/Models.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export interface Link
99
url:string
1010
}
1111

12+
1213
// Form
1314
export interface Input {
1415
id: string;

‎src/routes/components/core/+layout.svelte‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script lang="ts">
2+
3+
import { AppShell, TableOfContents } from '@skeletonlabs/skeleton';
4+
5+
</script>
6+
7+
<AppShell
8+
slotSidebarLeft="flex-none overflow-x-hidden overflow-y-auto bg-surface-50-900-token lg:w-auto"
9+
>
10+
11+
12+
<svelte:fragment slot="sidebarRight">
13+
<TableOfContents target="#toc-target" />
14+
</svelte:fragment>
15+
<!-- (pageHeader) -->
16+
<!-- Router Slot -->
17+
<slot />
18+
19+
</AppShell>

‎src/routes/components/core/+page.svelte‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,28 @@
66
import PageExample from "./PageExample.svelte";
77
import PageExampleRaw from "./PageExample.svelte?raw";
88
9+
import AlertExample from "./AlertExample.svelte";
10+
import AlertExampleRaw from "./AlertExample.svelte?raw";
11+
12+
import SpinnerExample from "./SpinnerExample.svelte";
13+
import SpinnerExampleRaw from "./SpinnerExample.svelte?raw";
914
</script>
1015

16+
<div id="toc-target">
1117
<Page title="Core" note="here are listed all basic components for a unified design of the pages. ">
1218
<CodeContainer title="Page" svelte={PageExampleRaw} >
1319
<div slot="info">by using these components a unified border is displayed on the page, furthermore, there are props for title, notes and links, as well as a slot for description</div>
1420
<PageExample/>
1521
</CodeContainer>
22+
23+
<CodeContainer title="Alert" svelte={AlertExampleRaw} >
24+
<div slot="info">The alerts are used to pass on messages to the user.</div>
25+
<AlertExample/>
26+
</CodeContainer>
27+
28+
<CodeContainer title="Spinner" svelte={SpinnerExampleRaw} >
29+
<div slot="info"><p>every time there is a change that a user has to wait for, a spinner should be used. this component can be customized by <b>color, size and position.</b></p></div>
30+
<SpinnerExample/>
31+
</CodeContainer>
1632
</Page>
33+
</div>

‎src/routes/components/core/AlertExample.svelte‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<script>
2+
import Alert from "$lib/components/page/Alert.svelte";
3+
import Fa from 'svelte-fa';
4+
5+
import { faEdit, faCableCar } from '@fortawesome/free-solid-svg-icons';
6+
7+
8+
</script>
9+
10+
<div class="grid grid-cols-1 gap-2">
11+
<Alert title="Errors" message="validation faild" cssClass="variant-filled-error">
12+
<b>test</b>
13+
</Alert>
14+
15+
<Alert title="Warning" message="validation faild" cssClass="variant-filled-warning">
16+
<b>test</b>
17+
</Alert>
18+
19+
<Alert message="validation success" cssClass="variant-filled-success">
20+
<b>test</b>
21+
</Alert>
22+
23+
<Alert cssClass="variant-ringed-success">
24+
<h3 class="h3"> Alert with a complex message</h3>
25+
<p>inside the Alert messsage everthing goes to the slot in the message block</p>
26+
<ul class="list-disc pl-5">
27+
<li>note 1</li>
28+
<li>note 2</li>
29+
<li>note 3</li>
30+
</ul>
31+
</Alert>
32+
33+
<Alert title="Alert with extra button" message="in the slot actions you can create your own container with different acions" cssClass="variant-ringed-success">
34+
<div class="flex gap-2" slot="actions">
35+
<button class="btn hover:text-primary-100" on:click={()=>alert("edit")}>
36+
<Fa icon={faEdit} />
37+
</button>
38+
<button class="btn hover:text-primary-100" on:click={()=>alert("something else")}>
39+
<Fa icon={faCableCar} />
40+
</button>
41+
</div>
42+
</Alert>
43+
44+
</div>

0 commit comments

Comments
 (0)