@txstate-mws/svelte-components 1.0.4 → 1.1.0

package/src/test/PopupMenuButtonIsParent.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { buttonify, PopupMenu } from '$lib'
+  let button: HTMLElement
+
+  export let 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 }
+  ]
+</script>
+
+<div class="topspacer"></div>
+<div class="container">
+  <div class="ui gold button" use:buttonify bind:this={button}>
+    Popup Menu
+    <PopupMenu buttonelement={button} {items}></PopupMenu>
+  </div>
+</div>
+
+<style>
+  .topspacer {
+    height: 20px;
+  }
+  .container {
+    margin-left: 12px;
+  }
+  .button {
+    position: relative;
+    margin-left: 12px;
+    width: 210px;
+  }
+</style>

package/src/test/PopupMenuComplex.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import PopupMenu from '$lib/components/PopupMenu.svelte'
+  let button: HTMLElement
+
+  export let items: { value: string, label: string, disabled?: boolean }[] = [
+    { 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 }
+  ]
+</script>
+
+<div class="topspacer"></div>
+<div class="container">
+  <div class="container">
+    <button data-testid="button" class="ui gold button" bind:this={button}>Popup Menu</button>
+  </div>
+  <div class="topspacer"></div>
+  <div class="container">
+    <PopupMenu usePortal buttonelement={button} {items}></PopupMenu>
+  </div>
+</div>
+
+<style>
+  .topspacer {
+    height: 20px;
+  }
+  .container {
+    position: relative;
+  }
+</style>

package/src/test/PopupMenuSimple.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { hashify } from 'txstate-utils'
+  import PopupMenu from '$lib/components/PopupMenu.svelte'
+
+  export let showSelected = false
+  export let 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 }
+  ]
+
+  let button: HTMLElement
+  let value: string
+  $: itemsByValue = hashify(items, 'value')
+  $: selected = itemsByValue[value]
+</script>
+
+<div class="topspacer"></div>
+<div class="container">
+  <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>
+
+<style>
+  .topspacer {
+    height: 20px;
+  }
+  .container {
+    position: relative;
+  }
+</style>

package/src/test/Resize.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { resize, ResizeStore } from '$lib'
+  export let debounce = false
+  const mysize = new ResizeStore()
+</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/src/test/Sticky.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { sticky, stickyfixed } from '$lib'
+  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/static/layout.css

@@ -0,0 +1,263 @@
+:root {
+  --menu-width: 12rem;
+}
+
+.pure-img-responsive {
+  max-width: 100%;
+  height: auto;
+}
+
+/*
+Add transition to containers so they can push in and out.
+*/
+#layout,
+#menu,
+.menu-link {
+  -webkit-transition: all 0.2s ease-out;
+  -moz-transition: all 0.2s ease-out;
+  -ms-transition: all 0.2s ease-out;
+  -o-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+/*
+This is the parent `<div>` that contains the menu and the content area.
+*/
+#layout {
+  position: relative;
+  left: 0;
+  padding-left: 0;
+}
+  #layout.active #menu {
+    left: var(--menu-width);
+  }
+
+  #layout.active .menu-link {
+    left: var(--menu-width);
+  }
+/*
+The content `<div>` is where all your content goes.
+*/
+.content {
+  margin: 2em auto;
+  padding: 0 2em;
+  max-width: 1200px;
+  margin-bottom: 50px;
+  line-height: 1.6em;
+}
+
+.header {
+   margin: 0;
+   color: #333;
+   text-align: center;
+   padding: 2.5em 2em 0;
+   border-bottom: 1px solid #eee;
+}
+  .header h1 {
+      margin: 0.2em 0;
+      font-size: 3em;
+      font-weight: 300;
+  }
+   .header h2 {
+      font-weight: 300;
+      color: #ccc;
+      padding: 0;
+      margin-top: 0;
+  }
+
+.content-subhead {
+  margin: 50px 0 20px 0;
+  font-weight: 300;
+  color: #888;
+}
+
+
+
+/*
+The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
+appears on the left side of the page.
+*/
+
+#menu {
+  margin-left: calc(-1 * var(--menu-width));
+  width: var(--menu-width);
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 1000; /* so the menu or its navicon stays above all content */
+  background: #191818;
+  overflow-y: auto;
+}
+  /*
+  All anchors inside the menu should be styled like this.
+  */
+  #menu a {
+    color: #999;
+    border: none;
+    padding: 0.6em;
+  }
+
+  /*
+  Remove all background/borders, since we are applying them to #menu.
+  */
+   #menu .pure-menu,
+   #menu .pure-menu ul {
+    border: none;
+    background: transparent;
+  }
+
+  /*
+  Add that light border to separate items into groups.
+  */
+  #menu .pure-menu ul,
+  #menu .pure-menu .menu-item-divided {
+    border-top: 1px solid #666;
+  }
+    /*
+    Change color of the anchor links on hover/focus.
+    */
+    #menu .pure-menu li a:hover,
+    #menu .pure-menu li a:focus {
+      background: #333;
+    }
+    #menu .pure-menu li.pure-menu-selected a:hover,
+    #menu .pure-menu li.pure-menu-selected a:focus,
+    #menu .pure-menu li.pure-menu-subselected a:hover,
+    #menu .pure-menu li.pure-menu-subselected a:focus {
+        background: inherit;
+    }
+
+
+  #menu .pure-menu-parent {
+    border-top: 1px solid #666;
+  }
+  #menu .pure-menu-parent a {
+    color: #fff;
+  }
+  /*
+  This styles the selected menu item `<li>`.
+  */
+  #menu .pure-menu-selected {
+    background: #1f8dd6;
+  }
+    /*
+    This styles a link within a selected menu item `<li>`.
+    */
+    #menu .pure-menu-selected a {
+      color: #fff;
+    }
+
+  #menu .pure-menu-parent.pure-menu-subselected {
+    background: #8bb6d3;
+  }
+    #menu .pure-menu-parent.pure-menu-subselected a {
+      color: black;
+    }
+
+  /*
+  This styles the menu heading.
+  */
+  #menu .pure-menu-heading {
+    font-size: 110%;
+    color: #fff;
+    margin: 0;
+  }
+
+/* -- Dynamic Button For Responsive Menu -------------------------------------*/
+
+/*
+The button to open/close the Menu is custom-made and not part of Pure. Here's
+how it works:
+*/
+
+/*
+`.menu-link` represents the responsive menu toggle that shows/hides on
+small screens.
+*/
+.menu-link {
+  position: fixed;
+  display: block; /* show this only on small screens */
+  top: 0;
+  left: 0; /* "#menu width" */
+  background: #000;
+  background: rgba(0,0,0,0.7);
+  font-size: 10px; /* change this value to increase/decrease button size */
+  z-index: 10;
+  width: 3em;
+  height: 2em;
+  padding: 2.1em 1.6em;
+}
+
+  .menu-link:hover,
+  .menu-link:focus {
+      background: #000;
+  }
+
+  .menu-link span {
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .menu-link span,
+  .menu-link span:before,
+  .menu-link span:after {
+      background-color: #fff;
+      pointer-events: none;
+      width: 2em;
+      height: 0.2em;
+  }
+
+      .menu-link span:before,
+      .menu-link span:after {
+          position: absolute;
+          margin-top: -0.6em;
+          content: " ";
+      }
+
+      .menu-link span:after {
+          margin-top: 0.6em;
+      }
+
+
+/* -- Responsive Styles (Media Queries) ------------------------------------- */
+
+/*
+Hides the menu at `48em`, but modify this based on your app's needs.
+*/
+@media (min-width: 48em) {
+
+  .header,
+  .content {
+      padding-left: 2em;
+      padding-right: 2em;
+  }
+
+  #layout {
+      padding-left: var(--menu-width); /* left col width "#menu" */
+      left: 0;
+  }
+  #menu {
+      left: var(--menu-width);
+  }
+
+  .menu-link {
+      display: none;
+  }
+}
+
+@media (max-width: 48em) {
+  /* Only apply this when the window is small. Otherwise, the following
+  case results in extra padding on the left:
+      * Make the window small.
+      * Tap the menu to trigger the active state.
+      * Make the window large again.
+  */
+  #layout.active {
+      position: relative;
+      left: var(--menu-width);
+  }
+}

package/svelte.config.js

@@ -0,0 +1,15 @@
+import adapter from '@sveltejs/adapter-auto';
+import preprocess from 'svelte-preprocess';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://github.com/sveltejs/svelte-preprocess
+	// for more information about preprocessors
+	preprocess: preprocess(),
+
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;

package/tests/.eslintrc.cjs

@@ -0,0 +1,19 @@
+module.exports = {
+  root: true,
+  parser: undefined,
+  extends: 'standard',
+  plugins: [],
+  ignorePatterns: [],
+  overrides: [],
+  settings: {},
+  rules: {
+  },
+  parserOptions: {
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+    es2017: true,
+    node: true
+  }
+}

package/tests/CardLayout.test.js

@@ -0,0 +1,41 @@
+import { test, expect } from '@playwright/test'
+import { goto } from './common.js'
+
+test.describe('Image Layout', () => {
+  test.beforeEach(async ({ page }) => {
+    await goto(page, '/cards')
+  })
+
+  test('should show all 9 cards', async ({ page }) => {
+    const cards = page.locator('.cardlayout-card')
+    await expect(cards).toHaveCount(9)
+  })
+  test('should place each card further from the top than the last', async ({ page }) => {
+    const cards = page.locator('.cardlayout-card')
+    await expect(cards).toHaveCount(9)
+
+    let lastoffset = 0
+    for (let i = 0; i < 9; i++) {
+      const top = (await cards.nth(i).boundingBox()).y
+      expect(top).toBeGreaterThanOrEqual(lastoffset)
+      lastoffset = top
+    }
+    expect(lastoffset).toBeGreaterThan(0)
+  })
+})
+test.describe('Preserve Order Layout', () => {
+  test.beforeEach(async ({ page }) => {
+    await goto(page, '/cards/preserve')
+  })
+
+  test('should preserve card order when instructed', async ({ page }) => {
+    const cards = page.locator('.cardlayout-card')
+    await expect(cards).toHaveCount(9)
+    let lastleft = 0
+    for (let i = 0; i < 9; i++) {
+      const left = (await cards.nth(i).boundingBox()).x
+      expect(left).toBeGreaterThanOrEqual(lastleft)
+      lastleft = left
+    }
+  })
+})

package/tests/CollapsingTable.test.js

@@ -0,0 +1,37 @@
+import { test, expect } from '@playwright/test'
+import { goto } from './common.js'
+
+test.beforeEach(async ({ page }) => {
+  await goto(page, '/collapsingtable')
+})
+
+test('has two rows in tbody', async ({ page }) => {
+  await expect(page.locator('text=John Smith')).toHaveCount(1)
+  await expect(page.locator('text=Mary Sue')).toHaveCount(1)
+})
+test('hides the numerated columns on a small screen', async ({ page }) => {
+  await page.setViewportSize({ width: 400, height: 1024 })
+  await expect(page.locator('text="one"')).toHaveCount(0)
+})
+
+test('menu toggles when button is clicked', async ({ page }) => {
+  await page.setViewportSize({ width: 400, height: 1024 })
+  const button = page.locator('th').last()
+  const menuitemtwo = page.locator('text="two"')
+  await expect(menuitemtwo).toHaveCount(0)
+  button.click()
+  await expect(menuitemtwo).toHaveCount(1)
+  button.click()
+  await expect(menuitemtwo).toHaveCount(0)
+})
+
+test('able to activate a new row', async ({ page }) => {
+  await page.setViewportSize({ width: 400, height: 1024 })
+  const button = page.locator('th').last()
+  const menuitemtwo = page.locator('text="two"')
+  await expect(menuitemtwo).toHaveCount(0)
+  button.click()
+  await expect(menuitemtwo).toHaveCount(1)
+  menuitemtwo.click()
+  await expect(page.locator('text="2"')).toHaveCount(3)
+})

package/tests/Modal.test.js

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+import { goto } from './common.js'
+
+test.beforeEach(async ({ page }) => {
+  await goto(page, '/modal')
+})
+
+test('modal is active on first render, escape dismisses, hitting enter on the button brings it back, escaping puts focus on the button', async ({ page }) => {
+  const button = page.locator('#test-button')
+  const nameInput = page.locator('#firstname')
+  await expect(nameInput).toHaveCount(1)
+  await nameInput.press('Escape')
+  await expect(nameInput).toHaveCount(0)
+  await button.press('Enter')
+  await expect(nameInput).toHaveCount(1)
+  await nameInput.press('Escape')
+  await expect(page.locator('#test-button')).toBeFocused()
+})

package/tests/MultiSelect.test.js

@@ -0,0 +1,58 @@
+import { test, expect } from '@playwright/test'
+import { goto } from './common.js'
+
+test.beforeEach(async ({ page }) => {
+  await goto(page, '/multiselect')
+})
+
+test('menus open on focus', async ({ page }) => {
+  const firstselect = page.locator('[name="test1"]')
+  const secondselect = page.locator('[name="test2"]')
+  const appleInSecond = page.locator('text="Apple"')
+  const bananaInFirst = page.locator('text="banana"')
+  await expect(appleInSecond).toHaveCount(0)
+  await expect(bananaInFirst).toHaveCount(0)
+  firstselect.focus()
+  await expect(bananaInFirst).toHaveCount(1)
+  secondselect.focus()
+  await expect(bananaInFirst).toHaveCount(0)
+  await expect(appleInSecond).toHaveCount(1)
+  secondselect.press('Escape')
+  await expect(appleInSecond).toHaveCount(0)
+})
+
+test('able to add and remove items', async ({ page }) => {
+  const firstselect = page.locator('[name="test1"]')
+  const secondselect = page.locator('[name="test2"]')
+  const bananaInFirst = page.locator('text="banana"')
+  const orangeInFirst = page.locator('text="orange"')
+  const appleInSecond = page.locator('text="Apple"')
+  const bananaInSecond = page.locator('text="Banana"')
+  const orangeInSecond = page.locator('text="Orange"')
+  await expect(bananaInFirst).toHaveCount(0)
+  firstselect.focus()
+  await expect(bananaInFirst).toHaveCount(1)
+  bananaInFirst.click()
+  await expect(orangeInFirst).toHaveCount(0)
+  await expect(bananaInFirst).toHaveCount(1)
+  bananaInFirst.click()
+  await expect(bananaInFirst).toHaveCount(0)
+
+  await expect(appleInSecond).toHaveCount(0)
+  await expect(bananaInSecond).toHaveCount(1)
+  secondselect.press('Backspace')
+  secondselect.press('Escape')
+  await expect(bananaInSecond).toHaveCount(0)
+  secondselect.press('ArrowLeft')
+  await expect(orangeInSecond).toHaveCount(1)
+  await expect(orangeInSecond).toHaveClass(/hilited/)
+})
+
+test('typing in the input reduces the options in the menu', async ({ page }) => {
+  const firstselect = page.locator('[name="test1"]')
+  const bananaInFirst = page.locator('text="banana"')
+  const orangeInFirst = page.locator('text="orange"')
+  firstselect.type('ora')
+  await expect(bananaInFirst).toHaveCount(0)
+  await expect(orangeInFirst).toHaveCount(1)
+})