@txstate-mws/svelte-components 1.1.0 → 1.1.1

package/src/test/PopupMenuSimple.svelte

@@ -1,36 +0,0 @@
-<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

@@ -1,29 +0,0 @@
-<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

@@ -1,65 +0,0 @@
-<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

@@ -1,263 +0,0 @@
-: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

@@ -1,15 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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)
-})

package/tests/PopupMenu.test.js

@@ -1,55 +0,0 @@
-import { test, expect } from '@playwright/test'
-import { goto } from './common.js'
-
-test.beforeEach(async ({ page }) => {
-  await goto(page, '/popupmenu')
-})
-
-test('menu toggles when button is clicked', async ({ page }) => {
-  const button = page.locator('#test-button')
-  const monday = page.locator('text="Monday"')
-  await expect(button).toHaveCount(1)
-  await expect(monday).toHaveCount(0)
-  button.click()
-  await expect(monday).toHaveCount(1)
-  button.click()
-  await expect(monday).toHaveCount(0)
-  button.press('Enter')
-  await expect(monday).toHaveCount(1)
-  button.press('Enter')
-  await expect(monday).toHaveCount(0)
-})
-
-test('has five menu items', async ({ page }) => {
-  const button = page.locator('#test-button')
-  await expect(button).toHaveCount(1)
-  button.click()
-  await expect(page.locator('text="Monday"')).toHaveCount(1)
-  await expect(page.locator('text="Tuesday"')).toHaveCount(1)
-  await expect(page.locator('text="Wednesday"')).toHaveCount(1)
-  await expect(page.locator('text="Thursday"')).toHaveCount(1)
-  await expect(page.locator('text="Friday"')).toHaveCount(1)
-})
-
-test('clicking a menu option selects it', async ({ page }) => {
-  const button = page.locator('#test-button')
-  await expect(button).toHaveCount(1)
-  button.click()
-  const option = page.locator('text="Monday"')
-  await expect(option).toHaveCount(1)
-  await expect(page.locator('text=selected: 1')).toHaveCount(0)
-  option.click()
-  await expect(page.locator('text=selected: 1')).toHaveCount(1)
-})
-
-test('may select a menu option with the keyboard', async ({ page }) => {
-  const button = page.locator('#test-button')
-  await expect(button).toHaveCount(1)
-  button.click()
-  const option = page.locator('text="Monday"')
-  await expect(option).toHaveCount(1)
-  await expect(page.locator('text=selected: 1')).toHaveCount(0)
-  await button.press('ArrowDown')
-  await button.press('Enter')
-  await expect(page.locator('text=selected: 1')).toHaveCount(1)
-})

package/tests/common.js

@@ -1,4 +0,0 @@
-export async function goto (page, href) {
-  await page.goto(href, { waitUntil: 'commit' })
-  await page.evaluate(() => new Promise(resolve => window.addEventListener('sveltekit:start', resolve)))
-}

package/tsconfig.json

@@ -1,31 +0,0 @@
-{
-	"compilerOptions": {
-		"moduleResolution": "node",
-		"module": "es2020",
-		"lib": ["es2020", "DOM"],
-		"target": "es2020",
-		/**
-			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
-			to enforce using \`import type\` instead of \`import\` for Types.
-			*/
-		"importsNotUsedAsValues": "error",
-		"isolatedModules": true,
-		"resolveJsonModule": true,
-		/**
-			To have warnings/errors of the Svelte compiler at the correct position,
-			enable source maps by default.
-			*/
-		"sourceMap": true,
-		"esModuleInterop": true,
-		"skipLibCheck": true,
-		"forceConsistentCasingInFileNames": true,
-		"baseUrl": ".",
-		"allowJs": true,
-		"checkJs": true,
-		"paths": {
-			"$lib": ["src/lib"],
-			"$lib/*": ["src/lib/*"]
-		}
-	},
-	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
-}