@txstate-mws/svelte-components 1.6.4 → 1.6.6

package/dist/actions/glue.js

@@ -44,8 +44,8 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
             requestAnimationFrame(() => {
                 el.style.top = `${rect.top + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.left = `${rect.left}px`;
-                el.style.bottom = '';
-                el.style.right = '';
+                el.style.removeProperty('bottom');
+                el.style.removeProperty('right');
                 adjustParentHeight();
             });
             valign = 'bottom';
@@ -54,8 +54,8 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
         else if (autoalign === 'bottomright') {
             requestAnimationFrame(() => {
                 el.style.top = `${rect.top + (cover ? 0 : targetHeight) + gap}px`;
-                el.style.left = '';
-                el.style.bottom = '';
+                el.style.removeProperty('left');
+                el.style.removeProperty('bottom');
                 el.style.right = `${rect.right}px`;
                 adjustParentHeight();
             });
@@ -64,10 +64,10 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
         }
         else if (autoalign === 'topleft') {
             requestAnimationFrame(() => {
-                el.style.top = '';
+                el.style.removeProperty('top');
                 el.style.left = `${rect.left}px`;
                 el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;
-                el.style.right = '';
+                el.style.removeProperty('right');
                 adjustParentHeight();
             });
             valign = 'top';
@@ -75,8 +75,8 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
         }
         else if (autoalign === 'topright') {
             requestAnimationFrame(() => {
-                el.style.top = '';
-                el.style.left = '';
+                el.style.removeProperty('top');
+                el.style.removeProperty('left');
                 el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.right = `${rect.right}px`;
                 adjustParentHeight();
@@ -130,9 +130,9 @@ function isFixedContainer(el) {
         return true; // A filter value other than none
     if (['layout', 'paint', 'strict', 'content'].includes(css.getPropertyValue('contain')))
         return true; // A contain value of layout, paint, strict or content (e.g. contain: paint;)
-    if (css.getPropertyValue('container-type') !== 'normal')
+    if ('container-type' in css && css.getPropertyValue('container-type') !== 'normal')
         return true; // A container-type value other than normal
-    if (css.getPropertyValue('backdrop-filter') !== 'none')
+    if ('backdrop-filter' in css && css.getPropertyValue('backdrop-filter') !== 'none')
         return true; // A backdrop-filter other than none (e.g. backdrop-filter: blur(10px);)
     return false;
 }

package/dist/stores/toasts.d.ts

@@ -5,7 +5,7 @@ export interface Toast {
     type?: 'error' | 'warning' | 'info' | 'success';
     /**
      * how long the message should appear on screen in milliseconds
-     * default 15 seconds
+     * default 8 seconds for errors and warnings, 5 seconds for success and info
      * use Number.MAX_SAFE_INTEGER for permanent
      */
     ttlMs?: number;
@@ -15,10 +15,15 @@ export interface ToastStorage extends Required<Toast> {
     id: string;
     /** when the toast was created, so we know when it expires */
     stamp: Date;
+    /** True if auto-expiration has been suspended (e.g. user is hovering mouse over the toast) */
+    suspended: boolean;
 }
 export declare class ToastStore extends Store<ToastStorage[]> {
+    timers: Record<string, number>;
     add(msg: string, type?: Toast['type'], ttlMs?: number): void;
     close(id: string): void;
+    suspend(id: string): void;
+    resume(id: string): void;
     clean(): void;
 }
 export declare const toasts: ToastStore;

package/dist/stores/toasts.js

@@ -1,23 +1,34 @@
 import { Store } from '@txstate-mws/svelte-store';
 import { randomid } from 'txstate-utils';
 export class ToastStore extends Store {
+    timers = {};
     add(msg, type, ttlMs) {
+        const resolvedType = type ?? 'error';
+        const id = randomid();
         const stored = {
-            id: randomid(),
+            id,
             stamp: new Date(),
             message: msg,
-            type: type ?? 'error',
-            ttlMs: ttlMs ?? 15000
+            type: resolvedType,
+            suspended: false,
+            ttlMs: ttlMs ?? (['error', 'warning'].includes(resolvedType) ? 8000 : 5000)
         };
         this.update(v => [...v.filter(t => t.message !== stored.message), stored]);
-        setTimeout(() => { this.clean(); }, stored.ttlMs);
+        this.timers[id] = setTimeout(() => { this.clean(); }, stored.ttlMs);
     }
     close(id) {
         this.update(v => v.filter(t => t.id !== id));
     }
+    suspend(id) {
+        this.update(v => v.map(t => t.id !== id ? t : { ...t, suspended: true }));
+    }
+    resume(id) {
+        this.update(v => v.map(t => t.id !== id ? t : { ...t, suspended: false }));
+        this.clean();
+    }
     clean() {
         const now = new Date().getTime();
-        this.update(v => v.filter(t => now - t.stamp.getTime() < t.ttlMs));
+        this.update(v => v.filter(t => t.suspended || (now - t.stamp.getTime() < t.ttlMs)));
     }
 }
 export const toasts = new ToastStore([]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.6.4",
+  "version": "1.6.6",
   "description": "Svelte components that are generically useful.",
   "scripts": {
     "prepublishOnly": "svelte-package",