@txstate-mws/svelte-components 1.2.4 → 1.2.5
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.
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<script >import ScreenReaderOnly from './ScreenReaderOnly.svelte';
|
|
2
|
+
import { resize, ResizeStore } from '../actions';
|
|
3
|
+
export let loading;
|
|
4
|
+
const store = new ResizeStore();
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
{#if loading}
|
|
8
|
+
<div class="container">
|
|
9
|
+
<div use:resize={{ store }} class="loader" style:border-width="{$store.offsetWidth * 0.1}px"><ScreenReaderOnly>Loading</ScreenReaderOnly></div>
|
|
10
|
+
</div>
|
|
11
|
+
{:else}
|
|
12
|
+
<slot />
|
|
13
|
+
{/if}
|
|
14
|
+
|
|
15
|
+
<style>
|
|
16
|
+
.container {
|
|
17
|
+
position: absolute;
|
|
18
|
+
top: 0;
|
|
19
|
+
left: 0;
|
|
20
|
+
width: 100%;
|
|
21
|
+
height: 100%;
|
|
22
|
+
background-color: var(--loading-bg, var(--modal-bg, rgba(0, 0, 0, 0.7)));
|
|
23
|
+
display: flex;
|
|
24
|
+
align-items: center;
|
|
25
|
+
justify-content: center;
|
|
26
|
+
}
|
|
27
|
+
.loader {
|
|
28
|
+
width: var(--loading-size, 10%);
|
|
29
|
+
padding-top: var(--loading-size, 10%);
|
|
30
|
+
border-color: var(--loading-bg-color, #FFFFFF);
|
|
31
|
+
border-top-color: var(--loading-moving-color, #333333);
|
|
32
|
+
border-style: solid;
|
|
33
|
+
border-radius: 50%;
|
|
34
|
+
animation: spin 2s linear infinite;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@keyframes spin {
|
|
38
|
+
0% { transform: rotate(0deg); }
|
|
39
|
+
100% { transform: rotate(360deg); }
|
|
40
|
+
}
|
|
41
|
+
</style>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
loading: boolean;
|
|
5
|
+
};
|
|
6
|
+
events: {
|
|
7
|
+
[evt: string]: CustomEvent<any>;
|
|
8
|
+
};
|
|
9
|
+
slots: {
|
|
10
|
+
default: {};
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
export declare type LoadingProps = typeof __propDef.props;
|
|
14
|
+
export declare type LoadingEvents = typeof __propDef.events;
|
|
15
|
+
export declare type LoadingSlots = typeof __propDef.slots;
|
|
16
|
+
export default class Loading extends SvelteComponentTyped<LoadingProps, LoadingEvents, LoadingSlots> {
|
|
17
|
+
}
|
|
18
|
+
export {};
|
package/components/index.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
export { default as CardLayout } from './CardLayout.svelte';
|
|
2
2
|
export { default as Card } from './Card.svelte';
|
|
3
3
|
export { default as CollapsingTable } from './CollapsingTable.svelte';
|
|
4
|
-
export { default as FocusLock } from './FocusLock.svelte';
|
|
5
4
|
export { default as ConditionalWrapper } from './ConditionalWrapper.svelte';
|
|
5
|
+
export { default as FocusLock } from './FocusLock.svelte';
|
|
6
|
+
export { default as Loading } from './Loading.svelte';
|
|
6
7
|
export { default as Modal } from './Modal.svelte';
|
|
7
8
|
export { default as MultiSelect } from './MultiSelect.svelte';
|
|
8
9
|
export { default as PopupMenu } from './PopupMenu.svelte';
|
package/components/index.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
export { default as CardLayout } from './CardLayout.svelte';
|
|
2
2
|
export { default as Card } from './Card.svelte';
|
|
3
3
|
export { default as CollapsingTable } from './CollapsingTable.svelte';
|
|
4
|
-
export { default as FocusLock } from './FocusLock.svelte';
|
|
5
4
|
export { default as ConditionalWrapper } from './ConditionalWrapper.svelte';
|
|
5
|
+
export { default as FocusLock } from './FocusLock.svelte';
|
|
6
|
+
export { default as Loading } from './Loading.svelte';
|
|
6
7
|
export { default as Modal } from './Modal.svelte';
|
|
7
8
|
export { default as MultiSelect } from './MultiSelect.svelte';
|
|
8
9
|
export { default as PopupMenu } from './PopupMenu.svelte';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@txstate-mws/svelte-components",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.5",
|
|
4
4
|
"description": "Svelte components that are generically useful.",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"@txstate-mws/svelte-store": "^1.0.3",
|
|
@@ -44,6 +44,7 @@
|
|
|
44
44
|
"./components/CollapsingTable.svelte": "./components/CollapsingTable.svelte",
|
|
45
45
|
"./components/ConditionalWrapper.svelte": "./components/ConditionalWrapper.svelte",
|
|
46
46
|
"./components/FocusLock.svelte": "./components/FocusLock.svelte",
|
|
47
|
+
"./components/Loading.svelte": "./components/Loading.svelte",
|
|
47
48
|
"./components/Modal.svelte": "./components/Modal.svelte",
|
|
48
49
|
"./components/MultiSelect.svelte": "./components/MultiSelect.svelte",
|
|
49
50
|
"./components/PopupMenu.svelte": "./components/PopupMenu.svelte",
|