@txstate-mws/svelte-components 1.0.1 → 1.1.0

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)
+})

package/tests/PopupMenu.test.js

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

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

@@ -0,0 +1,31 @@
+{
+	"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"]
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021 Texas State ETC
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/actions/buttonify.js

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonify = void 0;
-/**
- * Turns any HTML element into an accessible button that responds to keyboard events and has
- * role="button" and the tabindex attribute set. You are still responsible for making sure it has
- * readable content or a good label.
- */
-function buttonify(node) {
-    function keydown(e) {
-        if (e.key === 'Enter') {
-            if (!e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey) {
-                e.preventDefault();
-                e.stopPropagation();
-                node.dispatchEvent(new CustomEvent('click'));
-            }
-        }
-    }
-    node.addEventListener('keydown', keydown);
-    if (node.tabIndex < 0)
-        node.tabIndex = 0;
-    node.setAttribute('role', 'button');
-    node.style.cursor = 'pointer';
-    return {
-        destroy() {
-            node.removeEventListener('keydown', keydown);
-        }
-    };
-}
-exports.buttonify = buttonify;
-//# sourceMappingURL=buttonify.js.map

package/dist/actions/buttonify.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"buttonify.js","sourceRoot":"","sources":["../../src/actions/buttonify.ts"],"names":[],"mappings":";;;AAAA;;;;GAIG;AACH,SAAgB,SAAS,CAAE,IAAiB;IAC1C,SAAS,OAAO,CAAE,CAAgB;QAChC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACrB,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE;gBACxD,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC,CAAA;aAC7C;SACF;IACH,CAAC;IAED,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;IACzC,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC;QAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAA;IACxC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IACnC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAA;IAE7B,OAAO;QACL,OAAO;YACL,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;QAC9C,CAAC;KACF,CAAA;AACH,CAAC;AArBD,8BAqBC"}