@txstate-mws/svelte-components 1.5.2 → 1.5.4

package/dist/actions/glue.d.ts

@@ -4,6 +4,7 @@ export interface GlueArgs<T extends GlueAlignStore = GlueAlignStore> {
     target: HTMLElement;
     align?: GlueAlignOpts;
     cover?: boolean;
+    gap?: number;
     adjustparentheight?: boolean;
     store?: SettableSubject<T>;
 }
@@ -11,7 +12,7 @@ export interface GlueAlignStore {
     valign: 'bottom' | 'top';
     halign: 'left' | 'right';
 }
-export declare function glue(el: HTMLElement, { target, align, cover, adjustparentheight, store }: GlueArgs): {
-    update({ target: utarget, align: ualign, cover: ucover, store: ustore }: GlueArgs): void;
+export declare function glue(el: HTMLElement, { target, align, cover, gap, adjustparentheight, store }: GlueArgs): {
+    update({ target: utarget, align: ualign, cover: ucover, gap: ugap, store: ustore }: GlueArgs): void;
     destroy(): void;
 };

package/dist/actions/glue.js

@@ -1,6 +1,6 @@
 import { watchForMutations } from '../util/index.js';
 import { equal } from 'txstate-utils';
-export function glue(el, { target, align = 'auto', cover = false, adjustparentheight = false, store }) {
+export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjustparentheight = false, store }) {
     let halign;
     let valign;
     const parent = el.offsetParent;
@@ -34,7 +34,7 @@ export function glue(el, { target, align = 'auto', cover = false, adjustparenthe
         const targetHeight = rect.height;
         if (autoalign === 'bottomleft') {
             requestAnimationFrame(() => {
-                el.style.top = `${rect.top + (cover ? 0 : targetHeight)}px`;
+                el.style.top = `${rect.top + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.left = `${rect.left}px`;
                 el.style.bottom = '';
                 el.style.right = '';
@@ -45,7 +45,7 @@ export function glue(el, { target, align = 'auto', cover = false, adjustparenthe
         }
         else if (autoalign === 'bottomright') {
             requestAnimationFrame(() => {
-                el.style.top = `${rect.top + (cover ? 0 : targetHeight)}px`;
+                el.style.top = `${rect.top + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.left = '';
                 el.style.bottom = '';
                 el.style.right = `${rect.right}px`;
@@ -58,7 +58,7 @@ export function glue(el, { target, align = 'auto', cover = false, adjustparenthe
             requestAnimationFrame(() => {
                 el.style.top = '';
                 el.style.left = `${rect.left}px`;
-                el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight)}px`;
+                el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.right = '';
                 adjustParentHeight();
             });
@@ -69,7 +69,7 @@ export function glue(el, { target, align = 'auto', cover = false, adjustparenthe
             requestAnimationFrame(() => {
                 el.style.top = '';
                 el.style.left = '';
-                el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight)}px`;
+                el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.right = `${rect.right}px`;
                 adjustParentHeight();
             });
@@ -81,9 +81,10 @@ export function glue(el, { target, align = 'auto', cover = false, adjustparenthe
     const { destroy: watchDestroy } = watchForMutations(reposition);
     document.addEventListener('scroll', reposition, { capture: true });
     return {
-        update({ target: utarget, align: ualign = 'auto', cover: ucover = false, store: ustore }) {
+        update({ target: utarget, align: ualign = 'auto', cover: ucover = false, gap: ugap = 0, store: ustore }) {
             align = ualign;
             cover = ucover;
+            gap = ugap;
             if (ustore && ustore !== store) {
                 ustore.update(v => ({ ...v, valign, halign }));
                 store = ustore;

package/dist/actions/offset.d.ts

@@ -4,6 +4,7 @@ import type { ElementOffsets } from '../util/index.js';
 interface OffsetConfig<T extends ElementOffsets = ElementOffsets> {
     debounce?: boolean | number;
     store?: WritableSubject<T>;
+    container?: HTMLElement | 'nearest';
 }
 export declare class OffsetStore extends Store<ElementOffsets> {
     constructor(initialState?: ElementOffsets);

package/dist/actions/offset.js

@@ -1,5 +1,5 @@
 import { Store } from '@txstate-mws/svelte-store';
-import { debounced, watchForPositionChange } from '../util/index.js';
+import { debounced, watchForPositionChangeInContainer } from '../util/index.js';
 export class OffsetStore extends Store {
     constructor(initialState) {
         super(initialState ?? { top: 0, right: 0, bottom: 0, left: 0 });
@@ -16,9 +16,11 @@ export function offset(el, config) {
         el.dispatchEvent(new CustomEvent('offset', { detail: current }));
     }
     let resolvedchange = config?.debounce ? debounced(lookforoffsetchange, config.debounce) : lookforoffsetchange;
-    const { destroy, update } = watchForPositionChange(el, resolvedchange);
+    const offsetContainer = !config?.container ? document.body : (config.container === 'nearest' ? el.offsetParent ?? document.body : config.container);
+    const { destroy, update } = watchForPositionChangeInContainer(el, offsetContainer, resolvedchange);
     return {
         update(newConfig) {
+            const offsetContainer = !config?.container ? document.body : (config.container === 'nearest' ? el.offsetParent ?? document.body : config.container);
             if (newConfig?.debounce === true)
                 newConfig.debounce = 100;
             if (newConfig?.store !== config?.store) {
@@ -26,7 +28,7 @@ export function offset(el, config) {
             }
             if (newConfig?.debounce !== config?.debounce) {
                 resolvedchange = newConfig?.debounce ? debounced(lookforoffsetchange, newConfig.debounce) : lookforoffsetchange;
-                update(el, resolvedchange);
+                update(el, offsetContainer, resolvedchange);
             }
             config = newConfig;
         },

package/dist/components/MultiSelect.svelte

@@ -6,11 +6,12 @@
   controlled by the parent component via the `getOptions` function that will be used as a
   debounced callback on the contents of the text input.
 -->
-<script>import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher, onMount } from 'svelte';
 import { randomid, Cache } from 'txstate-utils';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
 import DefaultPopupMenu from './PopupMenu.svelte';
 import { modifierKey, selectionIsLeft } from '../util';
+import { SafeStore } from '@txstate-mws/svelte-store';
 export let name;
 /**
  * Function to pass to the component that tells it how to use the text in the text input to determine what
@@ -51,7 +52,9 @@ const dispatch = createEventDispatcher();
 const optionsCache = new Cache(async (ipt) => {
     return await getOptions(ipt);
 }, { freshseconds: 5 });
-$: selectedSet = new Set(selected.map(s => s.value));
+const selectedStore = new SafeStore(selected);
+$: $selectedStore = selected;
+$: selectedSet = new Set($selectedStore.map(s => s.value));
 // Stop showing our menu if the maxSelections limit has been reached.
 $: if (maxSelections > 1 && selected.length >= maxSelections && menushown)
     menushown = false;
@@ -137,6 +140,12 @@ function reactToHilite(..._) {
         inputelement.removeAttribute('aria-activedescendant');
 }
 $: reactToHilite(hilitedpill, id);
+let gap = 0;
+onMount(() => {
+    const ul = inputelement.closest('.multiselect-selected');
+    if (ul != null)
+        gap = ((ul.offsetHeight - ul.clientHeight) / 2) + parseInt(window.getComputedStyle(ul).paddingBottom);
+});
 </script>
 
 <fieldset>
@@ -166,7 +175,7 @@ $: reactToHilite(hilitedpill, id);
   <slot></slot>
 </fieldset>
 <svelte:component this={PopupMenu} bind:menushown bind:hilited={popuphilited} bind:value={popupvalue} align='bottomleft'
- {usePortal} {loading} {emptyText}
+ {usePortal} {loading} {emptyText} {gap}
  {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} {menuDividerClass}
  items={options} buttonelement={inputelement}
  on:change={addSelection}/>

package/dist/components/PopupMenu.svelte

@@ -34,6 +34,8 @@ of when this is useful is when you are trying to round corners of your button an
 menu is above or below your button so you know which corners to round and which to leave square. Note that
 the values do not update when the menu is hidden, so you may need to rely on `menushown` as well. */
 export let computedalign = new Store({ valign: 'bottom', halign: 'left' });
+/** Create some spacing between the specified button element and the menu, in pixels */
+export let gap = 0;
 /** Set to `true` if you want the parent element's styling to increase its minHeight when necessary. Useful
 for parent elements not styled for variable size children and which you want override the the size of. */
 export let adjustparentheight = false;
@@ -255,7 +257,7 @@ $: hasSelected = showSelected && items.some(itm => 'value' in itm && itm.value =
 
 {#if menushown}
   <div use:portal={usePortal === true ? undefined : (usePortal || null)}
-       use:glue={{ target: buttonelement, align, cover, adjustparentheight, store: computedalign }}
+       use:glue={{ target: buttonelement, align, cover, gap, adjustparentheight, store: computedalign }}
        class={menuContainerClass}>
     <ul bind:this={menuelement} id={menuid} role='listbox' style={width ? `width: ${width}` : ''}
         class={menuClass} class:hasSelected class:defaultmenu={!menuClass && !menuContainerClass}

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

@@ -22,6 +22,7 @@ declare const __propDef: {
           of when this is useful is when you are trying to round corners of your button and need to know whether the
           menu is above or below your button so you know which corners to round and which to leave square. Note that
           the values do not update when the menu is hidden, so you may need to rely on `menushown` as well. */ computedalign?: Store<GlueAlignStore> | undefined;
+        /** Create some spacing between the specified button element and the menu, in pixels */ gap?: number | undefined;
         /** Set to `true` if you want the parent element's styling to increase its minHeight when necessary. Useful
           for parent elements not styled for variable size children and which you want override the the size of. */ adjustparentheight?: boolean | undefined;
         /**  If the menu would be clipped by an `overflow: hidden`, you can set this prop and it will be placed in

package/package.json

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