@txstate-mws/svelte-components 1.2.3 → 1.2.6

package/components/CardLayout.svelte

@@ -6,7 +6,7 @@ export let maxwidth = 500;
 export let preserveorder = false;
 export let gutter = 10;
 export let className = '';
-const ssr = navigator.userAgent.includes('jsdom');
+const ssr = typeof navigator === 'undefined' || navigator.userAgent.includes('jsdom');
 const blocks = [];
 const gutterstore = writable(gutter);
 let defaultOrder = 0;

package/components/Loading.svelte

@@ -0,0 +1,43 @@
+<script >import ScreenReaderOnly from './ScreenReaderOnly.svelte';
+import { resize, ResizeStore } from '../actions';
+export let loading;
+export let height = undefined;
+const store = new ResizeStore();
+</script>
+
+{#if loading}
+  <div class="container" style:height={height} style:position={height ? 'relative' : 'absolute'}>
+    <div use:resize={{ store }} class="loader" style:border-width="{$store.offsetWidth * 0.1}px"><ScreenReaderOnly>Loading</ScreenReaderOnly></div>
+  </div>
+{:else}
+  <slot />
+{/if}
+
+<style>
+  .container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--loading-bg, var(--modal-bg, rgba(0, 0, 0, 0.7)));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .loader {
+    box-sizing: content-box;
+    width: var(--loading-size, 10%);
+    padding-top: var(--loading-size, 10%);
+    border-color: var(--loading-bg-color, #FFFFFF);
+    border-top-color: var(--loading-moving-color, #333333);
+    border-style: solid;
+    border-radius: 50%;
+    animation: spin 2s linear infinite;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+</style>

package/components/Loading.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        loading: boolean | undefined;
+        height?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type LoadingProps = typeof __propDef.props;
+export declare type LoadingEvents = typeof __propDef.events;
+export declare type LoadingSlots = typeof __propDef.slots;
+export default class Loading extends SvelteComponentTyped<LoadingProps, LoadingEvents, LoadingSlots> {
+}
+export {};

package/components/MultiSelect.svelte

@@ -113,7 +113,7 @@ $: dispatch('change', selected);
     {/each}
     <li class="input">
       <input type="text" id={id} name={name} {disabled} placeholder={placeholder}
-        bind:this={inputelement} bind:value={inputvalue}
+        bind:this={inputelement} bind:value={inputvalue} on:blur
         on:focus={inputfocus} on:keydown={inputkeydown}
         autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list"
         aria-describedby="{descriptionid}">

package/components/MultiSelect.svelte.d.ts

@@ -20,6 +20,7 @@ declare const __propDef: {
         PopupMenu?: typeof DefaultPopupMenu;
     };
     events: {
+        blur: FocusEvent;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/components/index.d.ts

@@ -1,8 +1,9 @@
 export { default as CardLayout } from './CardLayout.svelte';
 export { default as Card } from './Card.svelte';
 export { default as CollapsingTable } from './CollapsingTable.svelte';
-export { default as FocusLock } from './FocusLock.svelte';
 export { default as ConditionalWrapper } from './ConditionalWrapper.svelte';
+export { default as FocusLock } from './FocusLock.svelte';
+export { default as Loading } from './Loading.svelte';
 export { default as Modal } from './Modal.svelte';
 export { default as MultiSelect } from './MultiSelect.svelte';
 export { default as PopupMenu } from './PopupMenu.svelte';

package/components/index.js

@@ -1,8 +1,9 @@
 export { default as CardLayout } from './CardLayout.svelte';
 export { default as Card } from './Card.svelte';
 export { default as CollapsingTable } from './CollapsingTable.svelte';
-export { default as FocusLock } from './FocusLock.svelte';
 export { default as ConditionalWrapper } from './ConditionalWrapper.svelte';
+export { default as FocusLock } from './FocusLock.svelte';
+export { default as Loading } from './Loading.svelte';
 export { default as Modal } from './Modal.svelte';
 export { default as MultiSelect } from './MultiSelect.svelte';
 export { default as PopupMenu } from './PopupMenu.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.2.3",
+  "version": "1.2.6",
   "description": "Svelte components that are generically useful.",
   "dependencies": {
     "@txstate-mws/svelte-store": "^1.0.3",
@@ -44,6 +44,7 @@
     "./components/CollapsingTable.svelte": "./components/CollapsingTable.svelte",
     "./components/ConditionalWrapper.svelte": "./components/ConditionalWrapper.svelte",
     "./components/FocusLock.svelte": "./components/FocusLock.svelte",
+    "./components/Loading.svelte": "./components/Loading.svelte",
     "./components/Modal.svelte": "./components/Modal.svelte",
     "./components/MultiSelect.svelte": "./components/MultiSelect.svelte",
     "./components/PopupMenu.svelte": "./components/PopupMenu.svelte",