@txstate-mws/svelte-components 1.3.8 → 1.4.0

package/dist/components/Lottie.svelte

@@ -0,0 +1,35 @@
+<script>import { onMount } from 'svelte';
+import { isBlank } from 'txstate-utils';
+import ScreenReaderOnly from './ScreenReaderOnly.svelte';
+export let animationData;
+export let loop = true;
+export let name = undefined;
+export let speed = 1;
+export let direction = 1;
+export let paused = false;
+export let width = undefined;
+export let height = undefined;
+export let alt = '';
+let container;
+let animation;
+$: animation?.setSpeed(speed);
+$: animation?.setDirection(direction);
+$: paused ? animation?.pause() : animation?.play();
+onMount(async () => {
+    const lottie = (await import('lottie-web/build/player/lottie_light')).default;
+    animation = lottie.loadAnimation({
+        container,
+        animationData,
+        renderer: 'svg',
+        loop,
+        autoplay: !paused,
+        name
+    });
+    animation.addEventListener('DOMLoaded', () => {
+        animation.setSpeed(speed);
+        animation.setDirection(direction);
+    });
+});
+</script>
+
+<div bind:this={container} style:width style:height aria-hidden={isBlank(alt)}><ScreenReaderOnly>{alt}</ScreenReaderOnly></div>

package/dist/components/Lottie.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        animationData: any;
+        loop?: boolean;
+        name?: string | undefined;
+        speed?: number;
+        direction?: 1 | -1;
+        paused?: boolean;
+        width?: string | undefined;
+        height?: string | undefined;
+        alt?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LottieProps = typeof __propDef.props;
+export type LottieEvents = typeof __propDef.events;
+export type LottieSlots = typeof __propDef.slots;
+export default class Lottie extends SvelteComponentTyped<LottieProps, LottieEvents, LottieSlots> {
+}
+export {};

package/{components → dist/components}/MultiSelect.svelte

@@ -11,6 +11,7 @@ export let menuContainerClass = undefined;
 export let menuClass = undefined;
 export let menuItemClass = undefined;
 export let menuItemHilitedClass = undefined;
+export let maxSelections = 0;
 export let selected = [];
 export let placeholder = '';
 export let emptyText = undefined;
@@ -29,6 +30,8 @@ const optionsCache = new Cache(async (ipt) => {
     return await getOptions(ipt);
 }, { freshseconds: 5 });
 $: selectedSet = new Set(selected.map(s => s.value));
+$: if (maxSelections > 1 && selected.length >= maxSelections && menushown)
+    menushown = false;
 let optionsTimer;
 async function reactToInput(..._) {
     loading = true;
@@ -49,7 +52,7 @@ $: availablemessage = options.filter(o => o.value).length + ' autocomplete choic
 function addSelection(e) {
     inputvalue = '';
     const opt = { ...e.detail, label: e.detail.label || e.detail.value };
-    selected = [...selected, opt];
+    selected = maxSelections === 1 ? [opt] : [...selected, opt];
     popupvalue = undefined;
     dispatch('change', selected);
 }
@@ -90,6 +93,9 @@ function inputkeydown(e) {
             e.preventDefault();
         }
     }
+    else if (e.key !== 'Tab' && maxSelections > 1 && selected.length >= maxSelections) {
+        e.preventDefault();
+    }
 }
 async function inputfocus() {
     reactToInput();
@@ -130,7 +136,7 @@ $: reactToHilite(hilitedpill, id);
     </li>
   </ul>
   <ScreenReaderOnly id={descriptionid} arialive="assertive">
-    <span>{selected.length ? selected.length + ' selected' : 'select multiple, none selected'}, up down to choose, left right to hilite existing choices</span>
+    <span>{selected.length ? selected.length + ' selected' : 'none selected'}, select {maxSelections ? 'up to ' + maxSelections : 'multiple'}, up down to choose, left right to hilite existing choices</span>
     {#if menushown}<span>{availablemessage}, touch users explore to find autocomplete menu</span>{/if}
   </ScreenReaderOnly>
   <slot></slot>

package/{components → dist/components}/MultiSelect.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         menuClass?: string | undefined;
         menuItemClass?: string | undefined;
         menuItemHilitedClass?: string | undefined;
+        maxSelections?: number;
         selected?: {
             value: string;
             label: string;

package/package.json

@@ -1,66 +1,53 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.3.8",
+  "version": "1.4.0",
   "description": "Svelte components that are generically useful.",
+  "scripts": {
+    "prepublishOnly": "svelte-package",
+    "dev": "vite dev",
+    "build": "vite build",
+    "package": "svelte-package",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "eslint --ignore-path .gitignore .",
+    "test": "playwright test tests"
+  },
   "dependencies": {
     "@txstate-mws/svelte-store": "^1.0.3",
+    "lottie-web": "^5.10.2",
     "tabbable": "^6.0.0",
     "txstate-utils": "^1.7.12"
   },
   "devDependencies": {
     "@playwright/test": "^1.18.1",
-    "@sveltejs/adapter-auto": "^1.0.0",
+    "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/kit": "^1.0.1",
-    "@sveltejs/package": "^1.0.1",
+    "@sveltejs/package": "^2.0.2",
     "@types/tabbable": "^3.1.2",
-    "eslint-config-standard-with-typescript": "^24.0.0",
+    "eslint-config-standard-with-typescript": "^34.0.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "svelte": "^3.44.0",
     "svelte-check": "^3.0.1",
     "svelte-preprocess": "^5.0.0",
     "svelte2tsx": "^0.6.0",
     "tslib": "^2.3.1",
     "typescript": "^4.4.3"
   },
+  "peerDependencies": {
+    "svelte": "^3.44.0"
+  },
   "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
   "repository": {
     "type": "git",
     "url": "git@github.com:txstate-etc/svelte-components.git"
   },
   "author": "Nick Wing",
-  "license": "MIT",
-  "exports": {
-    "./package.json": "./package.json",
-    "./actions/buttonify": "./actions/buttonify.js",
-    "./actions/elementqueries": "./actions/elementqueries.js",
-    "./actions/glue": "./actions/glue.js",
-    "./actions": "./actions/index.js",
-    "./actions/offset": "./actions/offset.js",
-    "./actions/passactions": "./actions/passactions.js",
-    "./actions/portal": "./actions/portal.js",
-    "./actions/resize": "./actions/resize.js",
-    "./actions/sticky": "./actions/sticky.js",
-    "./actions/stickyfixed": "./actions/stickyfixed.js",
-    "./components/Card.svelte": "./components/Card.svelte",
-    "./components/CardLayout.svelte": "./components/CardLayout.svelte",
-    "./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",
-    "./components/ScreenReaderOnly.svelte": "./components/ScreenReaderOnly.svelte",
-    "./components": "./components/index.js",
-    ".": "./index.js",
-    "./types/CardLayout": "./types/CardLayout.js",
-    "./types/CollapsingTable": "./types/CollapsingTable.js",
-    "./types/PopupMenu": "./types/PopupMenu.js",
-    "./types": "./types/index.js",
-    "./util/bodyoffset": "./util/bodyoffset.js",
-    "./util": "./util/index.js",
-    "./util/repositioned": "./util/repositioned.js",
-    "./util/util": "./util/util.js"
-  },
-  "svelte": "./index.js"
-}
+  "license": "MIT"
+}