@txstate-mws/svelte-components 1.0.1 → 1.1.0

package/src/routes/__layout.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+  import { page } from '$app/stores'
+  interface Link {
+    label: string
+    href: string
+    subtitle?: string
+    sublinks?: Link[]
+    selected?: boolean
+    parent?: boolean
+  }
+  let links: Link[] = [
+    { label: 'Home', href: '/', subtitle: 'Overview of everything svelte-components provides.' },
+    {
+      label: 'Actions',
+      href: '/actions',
+      subtitle: 'A generic component for presenting a dropdown menu.',
+      sublinks: [
+        { label: 'offset', href: '/actions/offset' },
+        { label: 'offset debounced', href: '/actions/offsetdebounce' },
+        { label: 'resize', href: '/actions/resize' },
+        { label: 'resize debounced', href: '/actions/resizedebounce' },
+        { label: 'sticky', href: '/actions/sticky' }
+      ]
+    },
+    { label: 'Modal', href: '/modal', subtitle: 'A component for accessible modal dialogs.' },
+    {
+      label: 'PopupMenu',
+      href: '/popupmenu',
+      subtitle: 'A generic component for presenting a dropdown menu.',
+      sublinks: [
+        { label: 'show selected', href: '/popupmenu/showselected' },
+        { label: 'complex placement', href: '/popupmenu/complex' },
+        { label: 'body placement', href: '/popupmenu/body' },
+        { label: 'button is parent', href: '/popupmenu/parent' },
+        { label: 'scrollable', href: '/popupmenu/scrollable' },
+        { label: 'no items', href: '/popupmenu/empty' }
+      ]
+    },
+    {
+      label: 'CollapsingTable',
+      href: '/collapsingtable',
+      subtitle: 'A table that hides columns on small screens and introduces a dropdown to show one at a time.',
+      sublinks: [
+        { label: 'sticky header', href: '/collapsingtable/stickyheader' }
+      ]
+    },
+    {
+      label: 'Cards',
+      href: '/cards',
+      subtitle: 'Components for generating a pinterest-style card layout.',
+      sublinks: [
+        { label: 'preserve order', href: '/cards/preserve' }
+      ]
+    },
+    { label: 'MultiSelect', href: '/multiselect', subtitle: 'A component for selecting multiple items from a list.' }
+  ]
+  $: current = links.find(l => l.href === '/' ? $page.url.pathname === '/' : $page.url.pathname.startsWith(l.href))
+  $: title = current?.label
+  $: subtitle = current?.subtitle
+
+  function isSelected (link: Link) {
+    return $page.url.pathname === link.href && link.href !== '/'
+  }
+
+  function isParentOfSelected (link: Link) {
+    return !isSelected(link) && link.href !== '/' && $page.url.pathname.startsWith(link.href)
+  }
+
+  function updateLinks (links: Link[], ..._: any) {
+    if (!links) return []
+    return links.map(l => ({ ...l, selected: isSelected(l), parent: isParentOfSelected(l), sublinks: updateLinks(l.sublinks) }))
+  }
+  $: links = updateLinks(links, $page)
+
+  let active = false
+  function onClick () {
+    active = !active
+  }
+</script>
+
+<div id="layout" class:active>
+  <!-- Menu toggle -->
+  <a role="button" id="menuLink" class="menu-link" on:click={onClick}>
+    <!-- Hamburger icon -->
+    <span></span>
+  </a>
+
+  <div id="menu">
+    <div class="pure-menu">
+      <ul class="pure-menu-list">
+        {#each links as link}
+          <li class="pure-menu-item pure-menu-parent" class:pure-menu-selected={link.selected} class:pure-menu-subselected={link.parent}>
+            <a href="{link.href}" class="pure-menu-link">{link.label}</a>
+          </li>
+          {#if link.sublinks && link.sublinks.length && (link.selected || link.parent)}
+            <ul class="pure-menu-list">
+              {#each link.sublinks as sublink}
+                <li class="pure-menu-item" class:pure-menu-selected={sublink.selected}>
+                  <a href="{sublink.href}" class="pure-menu-link">{sublink.label}</a>
+                </li>
+              {/each}
+            </ul>
+          {/if}
+        {/each}
+      </ul>
+    </div>
+  </div>
+
+  <div id="main">
+    <div class="header">
+      <h1>{title}</h1>
+      {#if subtitle}<h2>{subtitle}</h2>{/if}
+    </div>
+
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+</div>
+
+<style>
+  #menuLink {
+    cursor: pointer;
+  }
+</style>

package/src/routes/actions/index.svelte

@@ -0,0 +1 @@
+See menu at left.

package/src/routes/actions/offset.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+  import Offset from '../../test/Offset.svelte'
+</script>
+<Offset></Offset>

package/src/routes/actions/offsetdebounce.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+  import Offset from '../../test/Offset.svelte'
+</script>
+<Offset debounce></Offset>

package/src/routes/actions/resize.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+  import Resize from '../../test/Resize.svelte'
+</script>
+<Resize></Resize>

package/src/routes/actions/resizedebounce.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+  import Resize from '../../test/Resize.svelte'
+</script>
+<Resize debounce></Resize>

package/src/routes/actions/sticky.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+  import Sticky from '../../test/Sticky.svelte'
+</script>
+<Sticky></Sticky>

package/src/routes/cards/index.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+  import Cards from '../../test/Cards.svelte'
+</script>
+<Cards></Cards>

package/src/routes/cards/preserve.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+  import Cards from '../../test/Cards.svelte'
+</script>
+<Cards preserveorder></Cards>

package/src/routes/collapsingtable/index.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+  import CollapsingTableTest from '../../test/CollapsingTableTest.svelte'
+</script>
+<CollapsingTableTest></CollapsingTableTest>

package/src/routes/collapsingtable/stickyheader.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+  import CollapsingTableTest from '../../test/CollapsingTableTest.svelte'
+</script>
+<CollapsingTableTest stickyheader></CollapsingTableTest>

package/src/routes/index.svelte

@@ -0,0 +1,2 @@
+<h1>Welcome to SvelteKit</h1>
+<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

package/src/routes/modal.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+  import ModalTest from '../test/ModalTest.svelte'
+</script>
+<ModalTest></ModalTest>

package/src/routes/multiselect.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+  import MultiSelectTest from '../test/MultiSelectTest.svelte'
+</script>
+<MultiSelectTest></MultiSelectTest>

package/src/routes/popupmenu/body.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+  import PopupMenuBody from '../../test/PopupMenuBody.svelte'
+</script>
+<PopupMenuBody></PopupMenuBody>

package/src/routes/popupmenu/complex.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+  import PopupMenuComplex from '../../test/PopupMenuComplex.svelte'
+</script>
+<PopupMenuComplex></PopupMenuComplex>

package/src/routes/popupmenu/empty.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import PopupMenuComplex from '../../test/PopupMenuComplex.svelte'
+  const items = []
+</script>
+<PopupMenuComplex {items}></PopupMenuComplex>

package/src/routes/popupmenu/index.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+  import PopupMenuSimple from '../../test/PopupMenuSimple.svelte'
+</script>
+<PopupMenuSimple></PopupMenuSimple>

package/src/routes/popupmenu/parent.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+  import PopupMenuButtonIsParent from '../../test/PopupMenuButtonIsParent.svelte'
+</script>
+<PopupMenuButtonIsParent></PopupMenuButtonIsParent>

package/src/routes/popupmenu/scrollable.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import PopupMenuComplex from '../../test/PopupMenuComplex.svelte'
+  const items = [
+    { value: '0', label: 'Sunday', disabled: true },
+    { value: '1', label: 'Monday' },
+    { value: '2', label: 'Tuesday' },
+    { value: '3', label: 'Wednesday' },
+    { value: '4', label: 'Thursday', disabled: true },
+    { value: '5', label: 'Friday' },
+    { value: '6', label: 'Saturday', disabled: true },
+    { value: '7', label: 'Sunday', disabled: true },
+    { value: '8', label: 'Monday' },
+    { value: '9', label: 'Tuesday' },
+    { value: '10', label: 'Wednesday' },
+    { value: '11', label: 'Thursday', disabled: true },
+    { value: '12', label: 'Friday' },
+    { value: '13', label: 'Saturday', disabled: true },
+    { value: '14', label: 'Sunday', disabled: true },
+    { value: '15', label: 'Monday' },
+    { value: '16', label: 'Tuesday' },
+    { value: '17', label: 'Wednesday' },
+    { value: '18', label: 'Thursday', disabled: true },
+    { value: '19', label: 'Friday' },
+    { value: '20', label: 'Saturday', disabled: true }
+  ]
+</script>
+<PopupMenuComplex {items}></PopupMenuComplex>

package/src/routes/popupmenu/showselected.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+  import PopupMenuSimple from '../../test/PopupMenuSimple.svelte'
+</script>
+<PopupMenuSimple showSelected></PopupMenuSimple>

package/src/test/Cards.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import CardLayout from '$lib/components/CardLayout.svelte'
+  import Card from '$lib/components/Card.svelte'
+  export let maxwidth = 300
+  export let className = 'test1'
+  export let preserveorder = false
+  let cards = [
+    { ptop: 30 },
+    { ptop: 50 },
+    { ptop: 20 },
+    { ptop: 100 },
+    { ptop: 40 },
+    { ptop: 56.25 },
+    { ptop: 150 },
+    { ptop: 80 },
+    { ptop: 10 }
+  ]
+  function randheight () {
+    return Math.ceil(Math.random() * 150) + 20
+  }
+  function mutateall () {
+    cards = cards.map(_ => ({ ptop: randheight() }))
+  }
+  function mutatecard () {
+    const which = Math.floor(Math.random() * cards.length)
+    cards[which].ptop = randheight()
+  }
+  function addcard () {
+    cards = [...cards, { ptop: randheight() }]
+  }
+  function add20 () {
+    const newcards = []
+    for (let i = 0; i < 20; i++) newcards.push({ ptop: randheight() })
+    cards = [...cards, ...newcards]
+  }
+</script>
+
+<CardLayout className={className} maxwidth={maxwidth} preserveorder={preserveorder}>
+  {#each cards as card, i}
+    <Card><div class="card card{i + 1}" style:padding-top={card.ptop + '%'} tabindex=0><span>Card {i + 1}</span></div></Card>
+  {/each}
+</CardLayout>
+
+<button on:click={mutateall}>Randomize All</button>
+<button on:click={mutatecard}>Randomize Card</button>
+<button on:click={addcard}>Add Card</button>
+<button on:click={add20}>Add 20 Cards</button>
+
+<style>
+  .card {
+    position: relative;
+    background-color: rgba(0, 0, 0, 0.3);
+    transition: padding-top 0.5s;
+  }
+  .card:focus {
+    outline: 2px solid blue;
+  }
+  .card span {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+  }
+</style>

package/{dist/ts/tests/CollapsingTable → src/test}/CollapsingTableTest.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import CollapsingTable from '../../components/CollapsingTable.svelte'
-  import { CollapsingTableColumn } from '../../types'
+  import CollapsingTable from '$lib/components/CollapsingTable.svelte'
+  import type { CollapsingTableColumn } from '$lib/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 },

package/{dist/ts/tests/Modal → src/test}/ModalTest.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import Modal from '../../components/Modal.svelte'
+  import Modal from '$lib/components/Modal.svelte'
   let shown = true
 </script>
 
 {#if shown}
-<Modal on:escape={() => shown = false}>
+<Modal on:escape={() => { shown = false }} >
   <form>
     <div class="formfield">
       <label for="firstname">First Name:</label><input id="firstname" type="text" name="firstname">
@@ -23,7 +23,7 @@
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus nulla ut nulla auctor, quis sodales massa laoreet. Duis erat lacus, gravida vitae massa vel, semper accumsan urna. Morbi gravida dui sit amet sodales luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum eget pulvinar dui. Vivamus quis eros eu ex semper consectetur nec at elit. Praesent faucibus arcu a nisi semper, eu tempus felis vehicula. Suspendisse potenti.</p>
 
   <p>Donec luctus nulla mattis ipsum aliquam imperdiet. Vestibulum nec finibus enim. Proin et arcu arcu. Quisque feugiat leo velit, vitae mollis felis ornare sed. Suspendisse sollicitudin, libero sed ullamcorper finibus, diam turpis eleifend velit, ut suscipit orci mauris id purus. Donec dapibus facilisis mauris a venenatis. Maecenas gravida velit maximus nibh tincidunt, eget auctor tellus efficitur. Aenean varius tristique lacus, sit amet placerat sem tempor at. Sed imperdiet fermentum nibh, sit amet tempor est cursus ac.</p>
-  <button data-testid="button" on:click={() => shown = true}>Show Modal</button>
+  <button id="test-button" on:click={() => { shown = true }}>Show Modal</button>
   <p>Praesent augue magna, maximus at mattis eget, euismod nec neque. Phasellus ut dolor a turpis molestie fermentum. Phasellus condimentum, ipsum sed rutrum maximus, diam ex ultrices sapien, quis iaculis nisi arcu at turpis. Morbi aliquam mattis posuere. Integer pretium diam diam, non lobortis quam consectetur laoreet. Sed posuere blandit venenatis. Nulla gravida maximus arcu non consectetur.</p>
 
   <p>Cras egestas massa mattis dictum imperdiet. Nulla bibendum nisl ipsum, ut scelerisque arcu consectetur vitae. Integer convallis id nunc sit amet faucibus. Maecenas suscipit diam orci, ac suscipit dolor convallis sed. Mauris vel tellus eget nunc mattis faucibus sit amet sed lorem. Cras lobortis, massa at vestibulum dignissim, quam tellus sagittis purus, eget dictum dolor quam in leo. Aliquam condimentum, ante sit amet semper laoreet, lacus est scelerisque mi, nec mollis diam massa et massa. Donec sagittis massa quis diam dictum, sit amet convallis mauris tincidunt. Nam vulputate ligula quis ex condimentum, in sollicitudin dolor accumsan. Donec volutpat dui in faucibus tempus. Proin vitae tincidunt ex. Proin ut ultricies diam. Praesent sed purus in purus efficitur fermentum vulputate quis dolor. Morbi viverra quam ac dolor facilisis consectetur.</p>

package/src/test/MultiSelectTest.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { MultiSelect } from '$lib'
+  import { sleep } from 'txstate-utils'
+  let firstid
+  let secondid
+  function getOptionsFirst (val: string) {
+    return ['apple', 'orange', 'banana'].filter(o => o.includes(val)).map(value => ({ value }))
+  }
+
+  const secondItems = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'orange', label: 'Orange' },
+    { value: 'banana', label: 'Banana' }
+  ]
+  async function getOptionsSecond (val: string) {
+    if (!val) return secondItems
+    await sleep(400)
+    return secondItems.filter(o => o.value.includes(val.toLocaleLowerCase()))
+  }
+</script>
+
+<label for={firstid}>Fruit with only values</label><br>
+<MultiSelect bind:id={firstid} name="test1" selected={[{ value: 'apple', label: 'apple' }]} getOptions={getOptionsFirst} />
+
+<label for={secondid}>Fruit with value and label</label><br>
+<MultiSelect bind:id={secondid} name="test2" selected={[{ value: 'orange', label: 'Orange' }, { value: 'banana', label: 'Banana' }]} placeholder='Choose some fruit' getOptions={getOptionsSecond} />

package/{dist/ts/tests/Actions → src/test}/Offset.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-  import { writable } from 'svelte/store'
-  import type { ElementOffsets } from '../../lib/repositioned'
-  import { offset } from '../../actions/offset'
+  import { offset, OffsetStore } from '$lib'
   export let debounce = false
-  let myoffset = writable<ElementOffsets>({})
+  const myoffset = new OffsetStore()
 </script>
 
 <div class='resizable'>resize this div</div>

package/{dist/ts/tests/PopupMenu → src/test}/PopupMenuBody.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import PopupMenu from '../../components/PopupMenu.svelte'
+  import PopupMenu from '$lib/components/PopupMenu.svelte'
   let button: HTMLElement
 
   export let items = [

package/{dist/ts/tests/PopupMenu → src/test}/PopupMenuButtonIsParent.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import PopupMenu from '../../components/PopupMenu.svelte'
+  import { buttonify, PopupMenu } from '$lib'
   let button: HTMLElement
 
   export let items = [
@@ -15,7 +15,7 @@
 
 <div class="topspacer"></div>
 <div class="container">
-  <div class="ui gold button" bind:this={button}>
+  <div class="ui gold button" use:buttonify bind:this={button}>
     Popup Menu
     <PopupMenu buttonelement={button} {items}></PopupMenu>
   </div>

package/{dist/ts/tests/PopupMenu → src/test}/PopupMenuComplex.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import PopupMenu from '../../components/PopupMenu.svelte'
+  import PopupMenu from '$lib/components/PopupMenu.svelte'
   let button: HTMLElement
 
-  export let items = [
+  export let items: { value: string, label: string, disabled?: boolean }[] = [
     { value: '0', label: 'Sunday', disabled: true },
     { value: '1', label: 'Monday' },
     { value: '2', label: 'Tuesday' },

package/{dist/ts/tests/PopupMenu → src/test}/PopupMenuSimple.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { hashify } from 'txstate-utils'
-  import PopupMenu from '../../components/PopupMenu.svelte'
+  import PopupMenu from '$lib/components/PopupMenu.svelte'
 
   export let showSelected = false
   export let items = [
@@ -21,7 +21,7 @@
 
 <div class="topspacer"></div>
 <div class="container">
-  <button data-testid="button" class="ui gold button" bind:this={button}>Popup Menu</button>
+  <button id="test-button" class="ui gold button" bind:this={button}>Popup Menu</button>
   <div>selected: {#if selected}{selected.value}, {selected.label}{:else}none{/if}</div>
   <PopupMenu bind:value buttonelement={button} {items} {showSelected}></PopupMenu>
 </div>

package/{dist/ts/tests/Actions → src/test}/Resize.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-  import { writable } from 'svelte/store'
-  import type { ElementSize } from '../../actions/resize'
-  import { resize } from '../../actions/resize'
+  import { resize, ResizeStore } from '$lib'
   export let debounce = false
-  let mysize = writable<ElementSize>({})
+  const mysize = new ResizeStore()
 </script>
 
 <div use:resize={{ store: mysize, debounce }} class='resizable'>resize this div</div>

package/{dist/ts/tests/Actions → src/test}/Sticky.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { sticky, stickyfixed } from '../../actions'
+  import { sticky, stickyfixed } from '$lib'
   let target: HTMLElement
 </script>