@txstate-mws/svelte-components 1.2.2 → 1.2.5

package/components/Loading.svelte

@@ -0,0 +1,41 @@
+<script >import ScreenReaderOnly from './ScreenReaderOnly.svelte';
+import { resize, ResizeStore } from '../actions';
+export let loading;
+const store = new ResizeStore();
+</script>
+
+{#if loading}
+  <div class="container">
+    <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 {
+    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,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        loading: boolean;
+    };
+    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

@@ -5,6 +5,7 @@ import DefaultPopupMenu from './PopupMenu.svelte';
 import { debouncedPromise, modifierKey, selectionIsLeft } from '../util';
 export let id = randomid();
 export let name;
+export let disabled = false;
 export let getOptions;
 export let menuContainerClass = undefined;
 export let menuClass = undefined;
@@ -101,18 +102,18 @@ $: dispatch('change', selected);
 </script>
 
 <fieldset>
-  <ul class="multiselect-selected" role="listbox">
+  <ul class="multiselect-selected" class:disabled role="listbox">
     {#each selected as option, i}
       <li id={id + option.value} role="option" tabindex="-1" class="multiselect-pill" class:hilited={hilitedpill === option.value}
-        on:click|preventDefault|stopPropagation={() => removeSelection(option, i, 1)}
+        on:click|preventDefault|stopPropagation={() => !disabled && removeSelection(option, i, 1)} on:mousedown={e => disabled && e.preventDefault()}
         aria-selected="true">
         {option.label || option.value}
         <ScreenReaderOnly>, click to remove</ScreenReaderOnly>
       </li>
     {/each}
     <li class="input">
-      <input type="text" id={id} name={name} placeholder={placeholder}
-        bind:this={inputelement} bind:value={inputvalue}
+      <input type="text" id={id} name={name} {disabled} placeholder={placeholder}
+        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}">
@@ -172,6 +173,12 @@ $: dispatch('change', selected);
     color: var(--multiselect-pill-text, black);
     padding: var(--multiselect-pill-padding, 0.3em 0.5em);
   }
+  .multiselect-selected.disabled {
+    opacity: 0.5;
+  }
+  .multiselect-selected.disabled .multiselect-pill {
+    cursor: default;
+  }
   .multiselect-pill.hilited {
     outline: 0;
     background-color: var(--multiselect-pill-selected, gray);

package/components/MultiSelect.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
     props: {
         id?: string;
         name: string;
+        disabled?: boolean;
         getOptions: (search: string) => Promise<PopupMenuItem[]> | PopupMenuItem[];
         menuContainerClass?: string | undefined;
         menuClass?: string | undefined;
@@ -19,6 +20,7 @@ declare const __propDef: {
         PopupMenu?: typeof DefaultPopupMenu;
     };
     events: {
+        blur: FocusEvent;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/components/PopupMenu.svelte

@@ -229,6 +229,7 @@ $: hasSelected = showSelected && items.some(itm => itm.value === value);
 <style>
   div {
     position: absolute !important;
+    z-index: 2147483647;
   }
   ul {
     list-style: none;

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.2",
+  "version": "1.2.5",
   "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",