@txstate-mws/svelte-components 0.0.67 → 1.0.3

package/dist/ts/components/Modal.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-  export let lockbackdrop = false
-  export let hidefocus = true
-  export let hidefocuslabel: string|undefined = undefined
-  export let returnfocusto: HTMLElement|undefined = undefined
-  export let initialfocus: string|undefined = undefined
-  import FocusLock from './FocusLock.svelte'
-  import { createEventDispatcher, onMount } from 'svelte'
-  import { portal } from '../actions';
-  const dispatch = createEventDispatcher()
-  const endmodal = () => {
-    dispatch('dismiss')
-  }
-  onMount(() => {
-    document.body.style.overflow = 'hidden'
-    return () => {
-      document.body.style.overflow = ''
-    }
-  })
-</script>
-
-<div use:portal class="modal-backdrop" on:click={() => lockbackdrop || endmodal()}>
-  <FocusLock class="modal-container" escapable={!lockbackdrop} on:escape={endmodal} {hidefocus} {hidefocuslabel} {returnfocusto} {initialfocus} on:escape={() => lockbackdrop || endmodal()}>
-    <slot></slot>
-  </FocusLock>
-</div>
-
-<style>
-  .modal-backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--modal-bg, rgba(0, 0, 0, 0.7));
-    overflow: auto;
-    z-index: 100;
-  }
-  .modal-backdrop :global(.modal-container) {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
-</style>

package/dist/ts/components/PopupMenu.svelte

@@ -1,278 +0,0 @@
-<script lang="ts">
-  import type { GlueAlignOpts, GlueAlignStore } from '../actions'
-  import { glue, portal } from '../actions'
-  import { createEventDispatcher, onDestroy, tick } from 'svelte'
-  import { randomid } from 'txstate-utils'
-  import type { PopupMenuItem } from '../types'
-  import { DeepStore, SettableSubject } from '../lib'
-  import ScreenReaderOnly from './ScreenReaderOnly.svelte'
-  const dispatch = createEventDispatcher()
-
-  export let menushown = false
-  export let menuContainerClass = ''
-  export let menuClass = ''
-  export let menuItemClass = ''
-  export let menuItemHilitedClass = ''
-  export let menuItemSelectedClass = ''
-  export let items: PopupMenuItem[] = []
-  export let buttonelement: HTMLElement
-  export let align: GlueAlignOpts = 'auto'
-  export let cover = false
-  export let showSelected = true
-  export let width:string|undefined = undefined
-  export let computedalign: SettableSubject<GlueAlignStore> = new DeepStore<GlueAlignStore>({ valign: 'bottom', halign: 'left' })
-  export let usePortal: HTMLElement|true|undefined = undefined
-  export let emptyText: string|undefined = undefined
-  export let hilited: number|undefined = undefined
-  export let selected: PopupMenuItem|undefined = undefined
-
-  let menuelement: HTMLElement|undefined
-  let itemelements: HTMLElement[] = []
-  const menuid = randomid()
-  let firstactive = 0
-  let lastactive = items.length - 1
-
-  function hiddenItem (item: PopupMenuItem) {
-    return !!item && !showSelected && item.value === selected?.value
-  }
-
-  async function reactToItems (..._: any[]) {
-    firstactive = items.findIndex(itm => !itm.disabled && !hiddenItem(itm))
-    lastactive = items.length - [...items].reverse().findIndex(itm => !itm.disabled && !hiddenItem(itm)) - 1
-    if (hilited && items[hilited]?.disabled) hilited = firstactive
-  }
-  $: reactToItems(items, selected)
-
-  async function reactToMenuShown (_: boolean) {
-    if (!buttonelement) {
-      hilited = undefined
-      return
-    }
-    await tick()
-    if (!menushown) {
-      hilited = undefined
-      buttonelement.removeAttribute('aria-controls')
-      buttonelement.setAttribute('aria-expanded', 'false')
-    } else {
-      buttonelement.setAttribute('aria-controls', menuid)
-      buttonelement.setAttribute('aria-expanded', 'true')
-    }
-    buttonelement.focus()
-  }
-  $: reactToMenuShown(menushown)
-
-  function move (idx: number) {
-    if (!menushown) return
-    if (items[idx]?.disabled) return
-    hilited = Math.max(firstactive, Math.min(lastactive, idx))
-    itemelements[hilited].scrollIntoView({ block: 'center' })
-    buttonelement.setAttribute('aria-activedescendant', `${menuid}-${hilited}`)
-  }
-
-  function onkeydown (e: KeyboardEvent) {
-    if (e.key === 'ArrowDown') {
-      e.preventDefault()
-      if (menushown) {
-        let i = (hilited ?? firstactive - 1) + 1
-        while(items[i]?.disabled || hiddenItem(items[i])) i++
-        move(i)
-      } else {
-        menushown = true
-        move(firstactive)
-      }
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault()
-      if (menushown) {
-        let i = (hilited ?? lastactive + 1) - 1
-        while(items[i]?.disabled || hiddenItem(items[i])) i--
-        move(i)
-      } else {
-        menushown = true
-        move(lastactive)
-      }
-    } else if (e.key === 'Enter') {
-      e.preventDefault()
-      if (menushown) {
-        menushown = false
-        if (typeof hilited !== 'undefined') {
-          selected = items[hilited]
-          dispatch('change', items[hilited].value)
-        }
-      } else {
-        menushown = true
-        move(firstactive)
-      }
-    } else if (e.key === ' ') {
-      // buttonelement might be a text input if this popup is searchable,
-      // so we want to allow spaces to be entered without changing the menu situation
-      if (menushown) {
-        if (typeof hilited !== 'undefined') {
-          e.preventDefault()
-          menushown = false
-          selected = items[hilited]
-          dispatch('change', items[hilited].value)
-        } else {
-          if (buttonelement.tagName !== 'INPUT') {
-            e.preventDefault()
-            menushown = false
-          }
-        }
-      } else {
-        if (buttonelement.tagName !== 'INPUT') {
-          e.preventDefault()
-          menushown = true
-          move(firstactive)
-        }
-      }
-    } else if (menushown && e.key === 'Escape') {
-      e.preventDefault()
-      e.stopPropagation()
-      menushown = false
-    }
-  }
-
-  function onbuttonclick (e: MouseEvent) {
-    e.preventDefault()
-    menushown = !menushown
-  }
-
-  async function onblur (e: FocusEvent) {
-    // tabindex=-1 on our menu elements means e.relatedTarget will be set
-    if (!(e.relatedTarget instanceof HTMLElement && menuelement?.contains(e.relatedTarget))) menushown = false
-  }
-
-  function cleanup (element: HTMLElement) {
-    if (element) {
-      element.removeEventListener('click', onbuttonclick)
-      element.removeEventListener('keydown', onkeydown)
-      element.removeEventListener('blur', onblur)
-      element.removeAttribute('aria-haspopup')
-      element.removeAttribute('aria-expanded')
-      element.removeAttribute('aria-controls')
-      element.removeAttribute('aria-activedescendant')
-    }
-  }
-
-  onDestroy(() => cleanup(buttonelement))
-
-  // if buttonelement changes we need to handle listeners and aria
-  let lastbuttonelement: HTMLElement
-  function reactToButtonElement (buttonelement: HTMLElement) {
-    cleanup(lastbuttonelement)
-    lastbuttonelement = buttonelement
-    if (buttonelement) {
-      buttonelement.setAttribute('aria-haspopup', 'listbox')
-      buttonelement.addEventListener('click', onbuttonclick)
-      buttonelement.addEventListener('keydown', onkeydown)
-      buttonelement.addEventListener('blur', onblur)
-    }
-  }
-  $: reactToButtonElement(buttonelement)
-
-  const onclick = (item: PopupMenuItem) => (e: MouseEvent) => {
-    e.stopPropagation()
-    e.preventDefault()
-    if (item.disabled) return
-    menushown = false
-    selected = item
-    dispatch('change', item.value)
-  }
-
-  $: hasSelected = showSelected && !!items.find(itm => itm.value === selected?.value)
-</script>
-
-{#if menushown}
-  <div use:portal={usePortal === true ? document.body : (usePortal || null)} use:glue={{ target: buttonelement, align, cover, store: computedalign }} class={menuContainerClass}>
-    <ul bind:this={menuelement} id={menuid} role='listbox' style={width ? `width: ${width}` : ''} class={menuClass} class:hasSelected class:defaultmenu={!menuClass && !menuContainerClass} on:keydown={onkeydown}>
-      {#each items as item, i (item.value)}
-        {#if showSelected || !selected || item.value !== selected.value}
-          <li
-            id={`${menuid}-${i}`}
-            bind:this={itemelements[i]}
-            class={`${menuItemClass} ${i === hilited ? menuItemHilitedClass || '' : ''} ${selected && selected.value === item.value ? menuItemSelectedClass || '' : ''}`}
-            class:disabled={!!item.disabled}
-            class:hilited={!menuItemHilitedClass && i === hilited}
-            class:selected={showSelected && !menuItemSelectedClass && selected && selected.value === item.value}
-            on:click={onclick(item)}
-            role="option"
-            tabindex=-1
-            aria-disabled={item.disabled}
-          ><slot {item} label={item.label || item.value} hilited={i === hilited} selected={selected && selected.value === item.value}>{item.label || item.value}</slot></li>
-        {/if}
-      {/each}
-      {#if items.length === 0}
-        <li role="option" class={`${menuItemClass} disabled`} aria-live="assertive">
-          <slot name="noresults">
-            {#if !emptyText}
-              <span aria-hidden="true">{'¯\\_(ツ)_/¯'}</span><ScreenReaderOnly>{emptyText || 'empty popup menu'}</ScreenReaderOnly>
-            {:else}
-              {emptyText}
-            {/if}
-          </slot>
-        </li>
-      {/if}
-    </ul>
-  </div>
-{/if}
-
-<style>
-  div {
-    position: absolute !important;
-  }
-  ul {
-    list-style: none;
-  }
-  ul.defaultmenu {
-    margin: 0;
-    padding: 0.4em;
-    background: white;
-    border: 1px solid slategray;
-    border-radius: 3px;
-    min-width: 10em;
-    max-height: 20em;
-    overflow-y: auto;
-  }
-  ul.defaultmenu li.disabled {
-    color: rgba(0,0,0,0.6);
-  }
-  ul.defaultmenu::-webkit-scrollbar {
-    appearance: none;
-    width: 7px;
-  }
-  ul.defaultmenu::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    background-color: rgba(0,0,0,.5);
-    box-shadow: 0 0 1px rgba(255,255,255,.5);
-  }
-  ul.defaultmenu::-webkit-scrollbar-track {
-    background-color: rgba(0,0,0,.1);
-  }
-  li {
-    cursor: pointer;
-  }
-  li.hilited {
-    background: lightblue;
-  }
-  li.disabled {
-    cursor: auto;
-  }
-  li.selected {
-    position: relative;
-  }
-  ul.hasSelected li {
-    padding-left: 1.4em;
-  }
-  li.selected:after {
-    content: ' ';
-    position: absolute;
-    left: 0.5em;
-    top: calc(50% - 0.11em);
-    transform: translateY(-50%) rotate(38deg);
-    display: block;
-    height: 0.786em;
-    width: 0.4286em;
-    border-bottom: 0.2em solid;
-    border-right: 0.2em solid;
-    box-sizing: border-box;
-  }
-</style>

package/dist/ts/index.d.ts

@@ -1,4 +0,0 @@
-export * from './components';
-export * from './actions';
-export * from './lib';
-export * from './types';

package/dist/ts/lib/deepstore.d.ts

@@ -1,42 +0,0 @@
-import { Writable } from 'svelte/store';
-export interface UsableSubject<T> {
-    subscribe: (observer: (value: T) => void) => () => void;
-}
-export interface WritableSubject<T> extends UsableSubject<T> {
-    update: (updater: (value: T) => T) => void;
-}
-export interface SettableSubject<T> extends WritableSubject<T> {
-    set: (value: T) => void;
-}
-/**
- * An alternative to svelte's "writable" that also checks deep equality (fast-deep-equal) before
- * notifying subscribers. A writable will notify subscribers every time it is
- * updated, even if nothing has changed.
- *
- * Note that this strategy is weak against mutable state updates:
- * store.update(v => { v.someprop = 'newvalue'; return v })
- *
- * This line would NOT notify subscribers because the state will be compared against
- * itself and always found to be equal. If you are making updates in a mutable fashion,
- * use a SafeStore instead.
- *
- * You can also pass in a writable as your initial state. This will subscribe to the writable
- * but add the deep equality checks.
- *
- * If you pass in a writable while in a component, be sure to call .complete() in your
- * onDestroy to free memory.
- */
-export declare class DeepStore<T> implements Writable<T> {
-    protected value: T;
-    protected subscribers: Map<string, (s: T) => void>;
-    protected cleanups: (() => void)[];
-    private valueStore?;
-    private pause;
-    constructor(value: T | Writable<T>);
-    clone(value: T): T;
-    set(value: T): void;
-    update(updater: (value: T) => T): void;
-    subscribe(run: (s: T) => any): () => void;
-    protected cleanup(fn: () => void): void;
-    complete(): void;
-}

package/dist/ts/lib/derivedstore.d.ts

@@ -1,16 +0,0 @@
-import { DeepStore, UsableSubject } from './deepstore';
-/**
- * Watch one or more parent stores for changes. Each time, run a function to derive
- * a new state from the parent state(s). Subscribers will only be notified if the
- * derived state has changed (uses fast-deep-equal).
- *
- * If only one parent store, it's possible to use a dot-prop string as the getter.
- *
- * If you create one of these in a component, be sure to call .complete() in onDestroy
- * to free up memory.
- */
-export declare class DerivedStore<DerivedType, ParentType = any> extends DeepStore<DerivedType> {
-    constructor(store: UsableSubject<ParentType>, getter: (value: ParentType) => DerivedType);
-    constructor(store: UsableSubject<ParentType>, getter: string);
-    constructor(store: UsableSubject<any>[], getter: (value: any[]) => DerivedType);
-}

package/dist/ts/lib/index.d.ts

@@ -1,7 +0,0 @@
-export * from './bodyoffset';
-export * from './deepstore';
-export * from './derivedstore';
-export * from './repositioned';
-export * from './safestore';
-export * from './substore';
-export * from './util';

package/dist/ts/lib/safestore.d.ts

@@ -1,4 +0,0 @@
-import { DeepStore } from './deepstore';
-export declare class SafeStore<T> extends DeepStore<T> {
-    clone(value: T): T;
-}

package/dist/ts/lib/substore.d.ts

@@ -1,23 +0,0 @@
-import { DeepStore, WritableSubject } from './deepstore';
-/**
- * Create a store that represents a part of a larger store. Updates to the parent store will propagate
- * down to the SubStore as appropriate, and updates to the SubStore will propagate
- * back up to the parent store. This requires both a getter and setter function to handle each
- * direction. The setter is given the new SubStore state and the existing parent store state and
- * should return a new state for the parent store.
- *
- * Alternatively, a dot-prop string can be provided and both the getter and setter will be automatically
- * generated. For example, a parent store containing state { deep: { value: 'here' }, hello: 'world' }
- * could be used with the getter string "deep.value". The SubStore's initial state would be "here", and
- * updating it to "there" would update the parent store state to { deep: { value: 'there' }, hello: 'world' }
- *
- * If you create one of these in a component, be sure to call .complete() in onDestroy to free up memory.
- */
-export declare class SubStore<SubType, ParentType = any> extends DeepStore<SubType> {
-    protected parentStore: WritableSubject<ParentType>;
-    protected setter: (value: SubType, state: ParentType) => ParentType;
-    constructor(store: WritableSubject<ParentType>, getter: string);
-    constructor(store: WritableSubject<ParentType>, getter: (value: ParentType) => SubType, setter: (value: SubType, state: ParentType) => ParentType);
-    set(value: SubType): void;
-    clone(state: SubType): any;
-}

package/dist/ts/tests/Actions/Offset.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-  import { writable } from 'svelte/store'
-  import type { ElementOffsets } from '../../lib/repositioned'
-  import { offset } from '../../actions/offset'
-  export let debounce = false
-  let myoffset = writable<ElementOffsets>({})
-</script>
-
-<div class='resizable'>resize this div</div>
-<div use:offset={{ store: myoffset, debounce }} class="offset">
-  This div's offset...<br>
-  Left: {$myoffset.left}<br>
-  Top: {$myoffset.top}<br>
-  Right: {$myoffset.right}<br>
-  Bottom: {$myoffset.bottom}
-</div>
-debounce: {debounce}
-
-<style>
-  div {
-    max-width: 300px;
-  }
-  .resizable {
-    resize: both;
-    overflow: auto;
-    min-height: 100px;
-    background: lightblue;
-    border: 1px solid black;
-  }
-  .offset {
-    border: 1px solid blue;
-    text-align: center;
-  }
-</style>

package/dist/ts/tests/Actions/Resize.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-  import { writable } from 'svelte/store'
-  import type { ElementSize } from '../../actions/resize'
-  import { resize } from '../../actions/resize'
-  export let debounce = false
-  let mysize = writable<ElementSize>({})
-</script>
-
-<div use:resize={{ store: mysize, debounce }} class='resizable'>resize this div</div>
-<div class="display">
-  Above div's size...<br>
-  Width: {$mysize.offsetWidth}<br>
-  Height: {$mysize.offsetHeight}
-</div>
-debounce: {debounce}
-
-<style>
-  div {
-    max-width: 300px;
-  }
-  .resizable {
-    resize: both;
-    overflow: auto;
-    min-height: 100px;
-    background: lightblue;
-    border: 1px solid black;
-  }
-  .display {
-    text-align: center;
-  }
-</style>

package/dist/ts/tests/Actions/Sticky.svelte

@@ -1,65 +0,0 @@
-<script lang="ts">
-  import { sticky, stickyfixed } from '../../actions'
-  let target: HTMLElement
-</script>
-
-<div class='above'>above</div>
-<table>
-  <thead>
-    <tr use:sticky><th>Name</th><th>Bedtime</th></tr>
-  </thead>
-  <tbody>
-    <tr><td>Bobby</td><td>10pm</td></tr>
-    <tr><td>Sue</td><td>3am</td></tr>
-    <tr><td>Billy</td><td>11pm</td></tr>
-    <tr><td>Mary</td><td>7pm</td></tr>
-    <tr><td>Kevin</td><td>9:30pm</td></tr>
-    <tr><td>Jess</td><td>12am</td></tr>
-    <tr><td>Randy</td><td>1am</td></tr>
-    <tr><td>Daniel</td><td>11pm</td></tr>
-    <tr><td>Elizabetd</td><td>8pm</td></tr>
-    <tr><td>Catderine</td><td>4pm</td></tr>
-    <tr><td>Mandy</td><td>8:30pm</td></tr>
-    <tr><td>Chris</td><td>9pm</td></tr>
-    <tr><td>Sean</td><td>10:45pm</td></tr>
-    <tr><td>Jack</td><td>2am</td></tr>
-    <tr><td>Morgan</td><td>3pm</td></tr>
-    <tr><td>Chuck</td><td>8pm</td></tr>
-  </tbody>
-</table>
-<div class="extendedcontainer" bind:this={target}>
-  <table>
-    <thead use:stickyfixed={{ target }}>
-      <tr><th>Person</th><th>Calories</th><th>Fat</th><th>Protein</th></tr>
-    </thead>
-    <tbody>
-      <tr><td>Mirna</td><td>1</td><td>28g</td><td>29g</td></tr>
-      <tr><td>Fernando</td><td>38</td><td>2g</td><td>48g</td></tr>
-      <tr><td>Lisette</td><td>18</td><td>9g</td><td>23g</td></tr>
-      <tr><td>Ahmad</td><td>42</td><td>26g</td><td>49g</td></tr>
-      <tr><td>Laquanda</td><td>27</td><td>27g</td><td>49g</td></tr>
-    </tbody>
-  </table>
-  sticky header should continue to the bottom of this container
-</div>
-<div class='below'>below</div>
-
-<style>
-  .above { height: 400px; }
-  .below { height: 1000px; }
-  .extendedcontainer { padding-bottom: 50px; border: 1px solid black; }
-  table {
-    position: relative;
-    box-sizing: border-box;
-  }
-  table th {
-    background: lightgray;
-    border: 2px solid black;
-  }
-  th:first-child, td:first-child {
-    width: 20em;
-  }
-  th:last-child, td:last-child {
-    width: 8em;
-  }
-</style>

package/dist/ts/tests/CollapsingTable/CollapsingTable.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/ts/tests/CollapsingTable/CollapsingTableTest.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-  import CollapsingTable from '../../components/CollapsingTable.svelte'
-  import { CollapsingTableColumn } from '../../types'
-  export let stickyheader = false
-  const items = [
-    { id: 1, name: 'John Smith', age: 42, one: 1, two: 2, three: 3, four: 4, five: 5, six: 6 },
-    { id: 3, name: 'Mary Sue', age: 23, one: 1, two: 2, three: 3, four: 4, five: 5, six: 6 },
-    { id: 6, name: 'Billy Bob', age: 12, one: 1, two: 2, three: 3, four: 4, five: 5, six: 6 }
-  ]
-  const config: CollapsingTableColumn[] = [
-    { key: 'id' },
-    { key: 'name', neverhide: true },
-    { key: 'age' },
-    { key: 'one' },
-    { key: 'two' },
-    { key: 'three' },
-    { key: 'four', bodyCellClass: 'four' },
-    { key: 'five' },
-    { key: 'six' }
-  ]
-</script>
-
-<div class="before"></div>
-<CollapsingTable {items} {config} {stickyheader} let:key let:value>
-  {#if key === 'five'}
-    <span class='test'>{value}</span>
-  {:else}
-    {value}
-  {/if}
-</CollapsingTable>
-<div class="after"></div>
-
-<style>
-  .before { height: 40px; }
-  .after { height: 1000px; }
-</style>

package/dist/ts/tests/Modal/Modal.stories.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/ts/tests/Modal/Modal.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';