@txstate-mws/svelte-components 1.0.4 → 1.1.0

package/src/lib/components/CardLayout.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+  import { onDestroy, tick, setContext, onMount } from 'svelte'
+  import { writable } from 'svelte/store'
+  import { browser } from '$app/env'
+  import { ElementSize, resize } from '$lib/actions'
+  import { CARDLAYOUT } from '$lib/types'
+  import type { Block } from '$lib/types'
+  export let maxwidth = 500
+  export let preserveorder = false
+  export let gutter = 10
+  export let className = ''
+  const blocks = []
+  const gutterstore = writable(gutter)
+  let defaultOrder = 0
+  setContext(CARDLAYOUT, {
+    registerBlock: (block: Block) => {
+      blocks.push(block)
+      hardrecalc()
+      onDestroy(() => {
+        blocks.splice(blocks.indexOf(block), 1)
+        hardrecalc()
+      })
+      block.order = writable(defaultOrder++)
+      block.linebreak = writable(false)
+      const cols = savecolumns || Math.ceil(1024 / maxwidth)
+      block.width = writable(`calc(${100.0 / cols}% - ${gutter * (cols - 1) / cols}px)`)
+      return block
+    },
+    recalculate: () => {
+      hardrecalc()
+    },
+    gutter: gutterstore
+  })
+  $: gutterstore.set(gutter)
+  let layoutelement: HTMLElement
+  let cycle1 = 0
+  let cycle2 = 0
+  function detectcycle (w: number) {
+    if (cycle1 === 0 && Math.abs(w - cycle2) > 5) {
+      cycle1 = w
+    } else if (cycle2 === 0 && Math.abs(w - cycle1) > 5) {
+      cycle2 = w
+    } else if (w === cycle1 || w === cycle2) {
+      return true
+    } else {
+      cycle1 = 0
+      cycle2 = 0
+    }
+    return false
+  }
+  let savecolumns = 0
+  let optimal: Block[][]
+  let fullheight = 0
+  let hardrequired = false
+  async function recalculate (realw: number) {
+    const columns = Math.ceil(realw / maxwidth)
+    const guttereach = gutter * (columns - 1) / columns
+    const cycling = detectcycle(realw)
+    if (columns !== savecolumns) {
+      for (const block of blocks) block.width.set(`calc(${100.0 / columns}% - ${guttereach}px`)
+      await tick()
+    }
+    // collect all the card heights at this new column width
+    for (const block of blocks) block.height = block.element?.offsetHeight ?? 200
+    if (columns !== savecolumns || hardrequired) { // only do real work if number of columns has changed, recalculate triggers on resize
+      if (preserveorder) {
+        optimal = [blocks]
+        if (columns > 1) {
+          const totalheight = blocks.reduce((totalheight, block) => totalheight + block.height + gutter, 0)
+          const tallestblock = Math.max(...blocks.map(b => b.height))
+          const minheight = Math.max(totalheight / columns, tallestblock)
+          let shortestoverall = totalheight
+          // 2d packing problem is NP-hard so this is an O(n) heuristic
+          // optimal configuration would be if each column is `minheight` so start there
+          // then relax it in increments and see if the overall height shrinks
+          const increment = Math.max(1, Math.floor(Math.min(minheight, tallestblock) * 0.05))
+          for (let colmaxheight = minheight; colmaxheight < minheight + tallestblock + gutter; colmaxheight += increment) {
+            let colheight = 0
+            let colidx = 0
+            let tallestcol = 0
+            let tallestcolidx = 0
+            const arrangement = []
+            for (const block of blocks) {
+              if (colheight + block.height > colmaxheight && colidx < columns - 1) {
+                if (colheight > tallestcol) {
+                  tallestcol = colheight
+                  tallestcolidx = colidx
+                }
+                colidx++
+                colheight = 0
+              }
+              if (!arrangement[colidx]) arrangement[colidx] = []
+              arrangement[colidx].push(block)
+              colheight += block.height + gutter
+            }
+            if (colheight > tallestcol) {
+              tallestcol = colheight
+              tallestcolidx = colidx
+            }
+            if (tallestcol < shortestoverall) {
+              shortestoverall = tallestcol
+              optimal = arrangement
+            }
+            // if leftmost column is tallest, increasing the allowable height can never make the overall height shorter
+            if (tallestcolidx === 0) break
+          }
+        }
+      } else {
+        optimal = []
+        const heights: number[] = Array.apply(null, Array(columns)).map((_: any) => 0) // initializes heights to an array of zeroes
+        // begin sorting blocks into columns
+        for (const block of blocks) {
+          // find the column with the smallest current height
+          const colidx = heights.reduce((acc, curr, curridx) => curr < heights[acc] ? curridx : acc, 0)
+          // record the height we are adding to the chosen column
+          heights[colidx] += block.height + gutter
+          // move the current card to the chosen column
+          if (!optimal[colidx]) optimal[colidx] = []
+          optimal[colidx].push(block)
+        }
+      }
+      // we created the optimal arrangement, now move the block elements to
+      // reflect it
+      let order = 0
+      for (let i = 0; i < optimal.length; i++) {
+        for (let j = 0; j < optimal[i].length; j++) {
+          const block = optimal[i][j]
+          block.order.set(order++)
+          block.linebreak.set(j === optimal[i].length - 1 && i < optimal.length - 1)
+        }
+      }
+      savecolumns = columns
+      hardrequired = false
+    }
+    // re-adjust container height
+    const saveheight = fullheight
+    fullheight = 0
+    for (let i = 0; i < optimal.length; i++) {
+      let top = 0
+      for (const block of optimal[i]) {
+        top += block.height + gutter
+      }
+      fullheight = Math.max(fullheight, top)
+    }
+    if (cycling && saveheight < fullheight) fullheight = saveheight
+  }
+
+  let savewidth = 0
+  let timer = 0
+  function triggerrecalc (width: number) {
+    if (width === savewidth && !hardrequired) return
+    cancelAnimationFrame(timer)
+    timer = requestAnimationFrame(() => {
+      recalculate(width)
+      savewidth = width
+    })
+  }
+  function hardrecalc () {
+    if (!layoutelement) return
+    hardrequired = true
+    cycle1 = 0
+    cycle2 = 0
+    triggerrecalc(layoutelement.clientWidth)
+  }
+  function onResize (e: UIEvent & { currentTarget: any, detail: ElementSize }) {
+    triggerrecalc(e.detail.clientWidth)
+  }
+  onMount(() => triggerrecalc(layoutelement.clientWidth))
+</script>
+
+<ul class="cardlayout {className}" class:ssr={!browser} style:height={browser ? `${fullheight + gutter}px` : undefined} bind:this={layoutelement} use:resize on:resize={onResize}>
+  <slot></slot>
+</ul>
+
+<style>
+  .cardlayout {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-content: space-between;
+  }
+  .cardlayout.ssr {
+    flex-direction: row;
+  }
+</style>

package/{components → src/lib/components}/CollapsingTable.svelte

@@ -1,75 +1,77 @@
-<script >import { Store } from '@txstate-mws/svelte-store';
-import { derived } from 'svelte/store';
-import { classes } from '../util';
-import DefaultPopupMenu from './PopupMenu.svelte';
-import ScreenReaderOnly from './ScreenReaderOnly.svelte';
-export let tableClass = '';
-export let bodyRowClass = '';
-export let bodyCellClass = '';
-export let headerRowClass = '';
-export let headerCellClass = '';
-export let menuContainerClass = '';
-export let menuClass = '';
-export let menuItemClass = '';
-export let menuItemHilitedClass = '';
-export let items;
-export let config = undefined;
-export let defaultCellWidth = 150;
-export let PopupMenu = DefaultPopupMenu;
-export let slots = $$slots;
-export let stickyheader = false;
-let columns;
-let width = 320;
-let selected;
-let identifyingkeys = [];
-$: firstrow = items?.[0] ?? {};
-$: columns = config ?? Object.keys(firstrow).map(key => ({ key }));
-function reactToColumns(columns) {
+<script lang="ts">
+  import { Store } from '@txstate-mws/svelte-store'
+  import { derived } from 'svelte/store'
+  import type { CollapsingTableColumn, PopupMenuItem } from '$lib/types'
+  import { classes } from '$lib/util'
+  import DefaultPopupMenu from './PopupMenu.svelte'
+  import ScreenReaderOnly from './ScreenReaderOnly.svelte'
+
+  export let tableClass = ''
+  export let bodyRowClass = ''
+  export let bodyCellClass = ''
+  export let headerRowClass = ''
+  export let headerCellClass = ''
+  export let menuContainerClass = ''
+  export let menuClass = ''
+  export let menuItemClass = ''
+  export let menuItemHilitedClass = ''
+  export let items: any[]
+  export let config: CollapsingTableColumn[]|undefined = undefined
+  export let defaultCellWidth = 150
+  export let PopupMenu = DefaultPopupMenu
+  export let slots: Record<string, boolean> = $$slots
+  export let stickyheader: boolean = false
+  let columns: CollapsingTableColumn[]
+  let width: number = 320
+  let selected: PopupMenuItem | undefined
+  let identifyingkeys: string[] = []
+  $: firstrow = items?.[0] ?? {}
+  $: columns = config ?? Object.keys(firstrow).map(key => ({ key }))
+  function reactToColumns (columns: CollapsingTableColumn[]) {
     if (!columns.some(c => c.neverhide)) {
-        columns[0].neverhide = true;
+      columns[0].neverhide = true
     }
     const sortedcolumns = columns // stable sort
-        .map((c, i) => ({ col: c, idx: i }))
-        .sort((a, b) => ((a.col.neverhide ? 0 : 1) - (b.col.neverhide ? 0 : 1)) || a.idx - b.idx)
-        .map(o => o.col);
+      .map((c, i) => ({ col: c, idx: i }))
+      .sort((a, b) => ((a.col.neverhide ? 0 : 1) - (b.col.neverhide ? 0 : 1)) || a.idx - b.idx)
+      .map(o => o.col)
     if (!selected) {
-        const firstcol = sortedcolumns.find(c => !c.neverhide);
-        selected = firstcol ? { value: firstcol.key } : undefined;
+      const firstcol = sortedcolumns.find(c => !c.neverhide)
+      selected = firstcol ? { value: firstcol.key } : undefined
     }
-    identifyingkeys = sortedcolumns.filter(c => c.neverhide).map(c => c.key);
-    return sortedcolumns;
-}
-$: sortedcolumns = reactToColumns(columns);
-$: itemkeys = items.map(item => item.id ?? item._id ?? identifyingkeys.map(k => item[k]).join('.'));
-const state = new Store({
-    keepcolumns: [],
-    hiddencolumns: [],
-    dropdowncolumn: undefined
-});
-const menuitems = derived(state, obj => obj.hiddencolumns.map(c => ({ value: c.key, label: c.title })));
-function react(..._) {
-    const selectedcol = sortedcolumns.find(c => c.key === selected?.value) ?? columns[1];
-    const keepcolumns = [];
-    const hiddencolumns = [];
-    let used = sortedcolumns.filter(c => c.neverhide || c === selectedcol).reduce((sum, col) => sum + (col.width ?? defaultCellWidth), 0);
+    identifyingkeys = sortedcolumns.filter(c => c.neverhide).map(c => c.key)
+    return sortedcolumns
+  }
+  $: sortedcolumns = reactToColumns(columns)
+
+  $: itemkeys = items.map(item => item.id ?? item._id ?? identifyingkeys.map(k => item[k]).join('.'))
+
+  const state = new Store({
+    keepcolumns: [] as (CollapsingTableColumn & { widthPercent?: number })[],
+    hiddencolumns: [] as CollapsingTableColumn[],
+    dropdowncolumn: undefined as (CollapsingTableColumn & { widthPercent?: number }) | undefined
+  })
+  const menuitems = derived(state, obj => obj.hiddencolumns.map(c => ({ value: c.key, label: c.title })))
+  function react (..._: any[]) {
+    const selectedcol = sortedcolumns.find(c => c.key === selected?.value) ?? columns[1]
+    const keepcolumns: CollapsingTableColumn[] = []
+    const hiddencolumns: CollapsingTableColumn[] = []
+    let used = sortedcolumns.filter(c => c.neverhide || c === selectedcol).reduce((sum, col) => sum + (col.width ?? defaultCellWidth), 0)
     for (const col of sortedcolumns) {
-        if (col.neverhide || col === selectedcol || used + (col.width ?? defaultCellWidth) < width) {
-            keepcolumns.push(col);
-            if (col !== selectedcol && !col.neverhide)
-                used += col.width ?? defaultCellWidth;
-        }
-        else
-            hiddencolumns.push(col);
+      if (col.neverhide || col === selectedcol || used + (col.width ?? defaultCellWidth) < width) {
+        keepcolumns.push(col)
+        if (col !== selectedcol && !col.neverhide) used += col.width ?? defaultCellWidth
+      } else hiddencolumns.push(col)
     }
     for (const col of keepcolumns) {
-        col.widthPercent = 100 * (col.width ?? defaultCellWidth) / used;
+      (col as any).widthPercent = 100 * (col.width ?? defaultCellWidth) / used
     }
-    const dropdowncolumn = hiddencolumns.length ? keepcolumns[keepcolumns.length - 1] : undefined;
-    state.set({ keepcolumns, hiddencolumns, dropdowncolumn });
-}
-$: react(width, selected);
-const headers = [];
-$: menubuttonelement = headers[$state.keepcolumns.length - 1];
+    const dropdowncolumn = hiddencolumns.length ? keepcolumns[keepcolumns.length - 1] : undefined
+    state.set({ keepcolumns, hiddencolumns, dropdowncolumn })
+  }
+  $: react(width, selected)
+  const headers: HTMLElement[] = []
+  $: menubuttonelement = headers[$state.keepcolumns.length - 1]
 </script>
 
 <div bind:clientWidth={width}>

package/{components → src/lib/components}/ConditionalWrapper.svelte

@@ -1,9 +1,10 @@
-<script >export let condition;
-export let component = undefined;
-export let a = false;
-export let span = false;
-export let element = undefined;
-$: passthrough = (({ condition, component, a, span, element, ...passthrough }) => passthrough)($$props);
+<script lang="ts">
+  export let condition: boolean|undefined
+  export let component: Function|undefined = undefined
+  export let a = false
+  export let span = false
+  export let element: HTMLElement|undefined = undefined
+  $: passthrough = (({ condition, component, a, span, element, ...passthrough }) => passthrough)($$props)
 </script>
 
 {#if condition || (typeof condition === 'undefined' && component)}

package/src/lib/components/FocusLock.svelte

@@ -0,0 +1,102 @@
+<script context="module" lang="ts">
+  const FocusLockStack: { pause: () => void, unpause: () => void }[] = []
+</script>
+
+<script lang="ts">
+  export let returnfocusto: HTMLElement|null|undefined = undefined
+  export let initialfocus: string|undefined = undefined
+  export let hidefocus = true
+  export let hidefocuslabel = 'focus is above modal dialog, start tabbing'
+  export let escapable = true
+  let className = ''
+  export { className as class }
+
+  import { onMount, onDestroy, createEventDispatcher, tick } from 'svelte'
+  import { tabbable } from 'tabbable'
+  import { sleep } from 'txstate-utils'
+  import { buttonify } from '../actions'
+  import ScreenReaderOnly from './ScreenReaderOnly.svelte'
+  const dispatch = createEventDispatcher()
+  let lockelement: HTMLElement
+  let abovelockelement: HTMLElement
+  let active = true
+  let listenforescape = false
+  if (initialfocus) hidefocus = false
+  onMount(async () => {
+    const prevFocusLock = FocusLockStack.slice(-1)[0]
+    if (prevFocusLock) prevFocusLock.pause()
+    FocusLockStack.push({
+      pause: () => { active = false },
+      unpause: () => { active = true }
+    })
+    if (typeof returnfocusto === 'undefined') {
+      returnfocusto = document.querySelector(':focus') as HTMLElement
+    }
+    await sleep(1) // sapper resets focus on page load, so we'll wait a millisecond in case our modal is on screen at load
+    if (!lockelement) return // in case we already unmounted
+    if (initialfocus) {
+      const focusEl = lockelement.querySelector(initialfocus)
+      if (focusEl instanceof HTMLElement) focusEl.focus()
+    } else {
+      setInitialFocus()
+    }
+    setTimeout(() => { listenforescape = true }, 0)
+  })
+  onDestroy(async () => {
+    const wasactive = active
+    active = false
+    await tick()
+    if (returnfocusto && wasactive) {
+      returnfocusto.focus()
+    }
+    FocusLockStack.pop()
+    const prevFocusLock = FocusLockStack.slice(-1)[0]
+    if (prevFocusLock) prevFocusLock.unpause()
+  })
+  const setInitialFocus = () => {
+    const firstfocus = lockelement ? tabbable(lockelement)[0] : undefined
+    if (firstfocus && firstfocus.focus) {
+      firstfocus.focus()
+    }
+  }
+  const setLastFocus = () => {
+    const lastfocus = lockelement ? tabbable(lockelement).slice(-1)[0] : undefined
+    if (lastfocus && lastfocus.focus) {
+      lastfocus.focus()
+    }
+  }
+  const keydown = (e: KeyboardEvent) => {
+    if (active && e.key === 'Escape' && escapable) {
+      e.preventDefault()
+      dispatch('escape')
+    }
+  }
+  const focusin = (e: FocusEvent) => {
+    if (active && e.target instanceof HTMLElement && !lockelement?.contains(e.target)) {
+      if (e.target === abovelockelement) setLastFocus()
+      else setInitialFocus()
+    }
+  }
+  const windowclick = (_: MouseEvent) => {
+    if (listenforescape && active) {
+      returnfocusto = undefined
+      dispatch('escape')
+    }
+  }
+</script>
+<svelte:window on:click={windowclick} />
+<div class={className} role="alertdialog" aria-modal="true" on:click|stopPropagation on:keydown|stopPropagation={keydown} on:focusin={focusin}>
+  <div bind:this={abovelockelement} tabindex="0"></div>
+  <div bind:this={lockelement} on:keydown={keydown}>
+    {#if hidefocus}<div class="hiddenfocus" use:buttonify on:blur={() => { hidefocus = false }} on:click={() => escapable && dispatch('escape')}><ScreenReaderOnly>{hidefocuslabel}{#if escapable}, click to escape or use escape key at any time{/if}</ScreenReaderOnly></div>{/if}
+    <slot></slot>
+  </div>
+  <div tabindex="0"></div>
+</div>
+
+<style>
+  .hiddenfocus {
+    opacity: 0;
+    outline: 0;
+  }
+</style>

package/{components → src/lib/components}/Modal.svelte

@@ -1,26 +1,28 @@
-<script >export let escapable = true;
-export let hidefocus = true;
-export let hidefocuslabel = undefined;
-export let returnfocusto = undefined;
-export let initialfocus = undefined;
-export let containerClass = '';
-export let opaque = false;
-export let usePortal = undefined;
-import { createEventDispatcher, onMount } from 'svelte';
-import FocusLock from './FocusLock.svelte';
-import { portal } from '../actions';
-const dispatch = createEventDispatcher();
-const endmodal = () => {
-    dispatch('escape');
-};
-onMount(() => {
-    document.body.style.marginRight = (window.innerWidth - document.body.clientWidth) + 'px';
-    document.body.style.overflow = 'hidden';
+<script lang="ts">
+  export let escapable = true
+  export let hidefocus = true
+  export let hidefocuslabel: string|undefined = undefined
+  export let returnfocusto: HTMLElement|undefined = undefined
+  export let initialfocus: string|undefined = undefined
+  export let containerClass = ''
+  export let opaque = false
+  export let usePortal: HTMLElement|undefined = undefined
+  import { createEventDispatcher, onMount } from 'svelte'
+  import FocusLock from './FocusLock.svelte'
+  import { portal } from '$lib/actions'
+
+  const dispatch = createEventDispatcher()
+  const endmodal = () => {
+    dispatch('escape')
+  }
+  onMount(() => {
+    document.body.style.marginRight = (window.innerWidth - document.body.clientWidth) + 'px'
+    document.body.style.overflow = 'hidden'
     return () => {
-        document.body.style.overflow = '';
-        document.body.style.marginRight = '';
-    };
-});
+      document.body.style.overflow = ''
+      document.body.style.marginRight = ''
+    }
+  })
 </script>
 
 <div use:portal={usePortal} class="modal-backdrop" class:opaque on:click|stopPropagation|preventDefault={() => escapable && endmodal()}>