@socketsupply/components - npm Package Compare versions

Comparing version 14.0.13 to 14.1.0

_test/index.js

 // @ts-check
 'use strict'
 
-import '../accordion/test'
-import '../badge/test'
-import '../button/test'
-import '../chart/test'
-import '../checkbox/test'
-import '../dialog/test'
-import '../form/test'
-import '../icon/test'
-import '../input/test'
-import '../panel/test'
-import '../popover/test'
-import '../profile-image/test'
-import '../progress-bar/test'
-import '../range/test'
-import '../relative-time/test'
-import '../router/test'
-import '../select/test'
-import '../sprite/test'
-import '../tabs/test'
-import '../textarea/test'
-import '../toaster-inline/test'
-import '../toaster/test'
-import '../toggle/test'
-import '../tooltip/test'
-import '../windowed/test'
+import '../accordion/test.js'
+import '../badge/test.js'
+import '../button/test.js'
+import '../chart/test.js'
+import '../checkbox/test.js'
+import '../dialog/test.js'
+import '../form/test.js'
+import '../icon/test.js'
+import '../input/test.js'
+import '../panel/test.js'
+import '../popover/test.js'
+import '../profile-image/test.js'
+import '../progress-bar/test.js'
+import '../range/test.js'
+import '../relative-time/test.js'
+import '../router/test.js'
+import '../select/test.js'
+import '../sprite/test.js'
+import '../tabs/test.js'
+import '../textarea/test.js'
+import '../toaster-inline/test.js'
+import '../toaster/test.js'
+import '../toggle/test.js'
+import '../tooltip/test.js'
+import '../windowed/test.js'

_test/util.js

@@ -26,1 +26,6 @@ 'use strict'
 }
+
+const qs = (s, p) => (p || document).querySelector(s)
+const qsa = (s, p) => [...(p || document).querySelectorAll(s)]
+
+export { qs, qsa }

accordion/test.js

@@ -1,7 +0,5 @@
-import { test } from 'tapzero'
-import { qs } from 'qsa-min'
-
-import { html } from '../_test/util'
+import { test } from 'socket:test'
+import { html, qs } from '../_test/util.js'
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 Components(Tonic)
@@ -8,0 +6,0 @@

badge/test.js

@@ -1,7 +0,6 @@
-import { test } from 'tapzero'
-import { qs } from 'qsa-min'
+import { test } from 'socket:test'
+import { html, qs } from '../_test/util.js'
 
-import { html } from '../_test/util'
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
@@ -8,0 +7,0 @@ Components(Tonic)

button/index.js

@@ -216,4 +216,4 @@ import { Tonic } from '@socketsupply/tonic'
         height,
-        borderRadius: radius,
-        borderWidth: borderWidth
+        borderWidth,
+        borderRadius: radius
       },
@@ -220,0 +220,0 @@ wrapper: {

button/test.js

@@ -1,7 +0,6 @@
-import { test } from 'tapzero'
-import { qs } from 'qsa-min'
+import { test } from 'socket:test'
+import { html, qs } from '../_test/util.js'
 
-import { html } from '../_test/util'
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
@@ -8,0 +7,0 @@ Components(Tonic)

chart/test.js

@@ -1,8 +0,7 @@
-import { test } from 'tapzero'
-import { qs } from 'qsa-min'
+import { test } from 'socket:test'
+import { html, qs } from '../_test/util.js'
 
-import { html } from '../_test/util'
 import { Tonic } from '@socketsupply/tonic'
 import chart from 'chart.js'
-import { Components } from '..'
+import { Components } from '../index.js'
 
@@ -9,0 +8,0 @@ Components(Tonic)

checkbox/test.js

@@ -1,7 +0,6 @@
-import { test } from 'tapzero'
-import { qs } from 'qsa-min'
+import { test } from 'socket:test'
+import { html, qs } from '../_test/util.js'
 
-import { html } from '../_test/util'
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
@@ -8,0 +7,0 @@ Components(Tonic)

dialog/test.js

@@ -1,7 +0,6 @@
-import { test } from 'tapzero'
-import { qs } from 'qsa-min'
-import { html } from '../_test/util'
+import { test } from 'socket:test'
+import { html, qs } from '../_test/util.js'
 
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
@@ -8,0 +7,0 @@ Components(Tonic)

form/test.js

@@ -1,8 +0,7 @@
-import { test } from 'tapzero'
-import { qs } from 'qsa-min'
+import { test } from 'socket:test'
+import { html, qs } from '../_test/util.js'
 
-import { html } from '../_test/util'
 import { Tonic } from '@socketsupply/tonic'
-import { TonicForm } from '.'
-import { Components } from '..'
+import { TonicForm } from './index.js'
+import { Components } from '../index.js'
 
@@ -9,0 +8,0 @@ Components(Tonic)

icon/test.js

@@ -1,7 +0,6 @@
-import { test } from 'tapzero'
-import { qs } from 'qsa-min'
+import { test } from 'socket:test'
+import { html, qs } from '../_test/util.js'
 
-import { html } from '../_test/util'
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
@@ -8,0 +7,0 @@ Components(Tonic)

index.js

 import Tonic from '@socketsupply/tonic'
 
-import { TonicAccordion, TonicAccordionSection } from './accordion'
-import { TonicBadge } from './badge'
-import { TonicButton } from './button'
-import { TonicChart } from './chart'
-import { TonicCheckbox } from './checkbox'
-import { TonicDialog } from './dialog'
-import { TonicForm } from './form'
-import { TonicIcon } from './icon'
-import { TonicInput } from './input'
-import { TonicLoader } from './loader'
-import { TonicPanel } from './panel'
-import { TonicPopover } from './popover'
-import { TonicProfileImage } from './profile-image'
-import { TonicProgressBar } from './progress-bar'
-import { TonicRange } from './range'
-import { TonicRelativeTime } from './relative-time'
-import { TonicRouter } from './router'
-import { TonicSelect } from './select'
-import { TonicSprite } from './sprite'
-import { TonicSplit, TonicSplitLeft, TonicSplitRight, TonicSplitTop, TonicSplitBottom } from './split'
-import { TonicTabs, TonicTab, TonicTabPanel } from './tabs'
-import { TonicTextarea } from './textarea'
-import { TonicTooltip } from './tooltip'
-import { TonicToasterInline } from './toaster-inline'
-import { TonicToaster } from './toaster'
-import { TonicToggle } from './toggle'
+import { TonicAccordion, TonicAccordionSection } from './accordion/index.js'
+import { TonicBadge } from './badge/index.js'
+import { TonicButton } from './button/index.js'
+import { TonicChart } from './chart/index.js'
+import { TonicCheckbox } from './checkbox/index.js'
+import { TonicDialog } from './dialog/index.js'
+import { TonicForm } from './form/index.js'
+import { TonicIcon } from './icon/index.js'
+import { TonicInput } from './input/index.js'
+import { TonicLoader } from './loader/index.js'
+import { TonicPanel } from './panel/index.js'
+import { TonicPopover } from './popover/index.js'
+import { TonicProfileImage } from './profile-image/index.js'
+import { TonicProgressBar } from './progress-bar/index.js'
+import { TonicRange } from './range/index.js'
+import { TonicRelativeTime } from './relative-time/index.js'
+import { TonicRouter } from './router/index.js'
+import { TonicSelect } from './select/index.js'
+import { TonicSprite } from './sprite/index.js'
+import { TonicSplit, TonicSplitLeft, TonicSplitRight, TonicSplitTop, TonicSplitBottom } from './split/index.js'
+import { TonicTabs, TonicTab, TonicTabPanel } from './tabs/index.js'
+import { TonicTextarea } from './textarea/index.js'
+import { TonicTooltip } from './tooltip/index.js'
+import { TonicToasterInline } from './toaster-inline/index.js'
+import { TonicToaster } from './toaster/index.js'
+import { TonicToggle } from './toggle/index.js'
 
@@ -45,3 +45,3 @@ const version = Tonic.version
 //
-export function Components (Tonic) {
+function Components (Tonic) {
   if (once) {
@@ -87,2 +87,3 @@ return
 
+export { Components }
 export default Components

input/test.js

@@ -1,7 +0,6 @@
-import { test } from 'tapzero'
-import { qs } from 'qsa-min'
+import { test } from 'socket:test'
+import { html, qs } from '../_test/util.js'
 
-import { html } from '../_test/util'
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
@@ -8,0 +7,0 @@ Components(Tonic)

package.json

 {
   "name": "@socketsupply/components",
-  "version": "14.0.13",
+  "version": "14.1.0",
   "description": "Example components",
   "type": "module",
   "scripts": {
-    "prepare": "npm run lint",
-    "prepublishOnly": "git push --follow-tags",
     "lint": "standard -v",
-    "test": "standard && esbuild --format=esm --bundle _test/index.js | tape-run",
-    "test:ci": "esbuild --format=esm --bundle _test/index.js | tape-run",
-    "test:open": "esbuild --format=esm --bundle _test/index.js | tape-run --browser chrome --keep-open",
+    "test": "npm run lint && ssc build -r",
     "pub": "npm pub && npm publish --registry https://npm.pkg.github.com"
@@ -33,10 +29,7 @@ },
   "devDependencies": {
+    "@socketsupply/socket": "github:socketsupply/socket#next",
     "@socketsupply/tonic": "15.0.0",
-    "standard": "16.0.4",
-    "tape-run": "9.0.0",
     "chart.js": "^2.9.2",
-    "esbuild": "0.13.8",
-    "qsa-min": "1.0.2",
-    "tapzero": "^0.6.0"
+    "standard": "16.0.4"
   }
 }

panel/index.js

@@ -1,2 +0,2 @@
-import { TonicDialog } from '../dialog'
+import { TonicDialog } from '../dialog/index.js'
 
@@ -3,0 +3,0 @@ export class TonicPanel extends TonicDialog {

panel/test.js

@@ -1,7 +0,6 @@
-import { test } from 'tapzero'
-import { qs } from 'qsa-min'
+import { test } from 'socket:test'
+import { html, qs } from '../_test/util.js'
 
-import { html } from '../_test/util'
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
@@ -85,14 +84,14 @@ Components(Tonic)
   const container = qs('#example-panel-default')
-  const overlay = qs('.tonic--overlay')
+  const overlay = qs('.tonic--dialog--overlay')
   const main = qs('main', container)
   const h3 = qs('h3', main)
 
-  t.ok(container)
-  t.ok(overlay)
-  t.ok(main)
-  t.ok(h3)
+  t.ok(container, 'container created')
+  t.ok(overlay, 'overlay created')
+  t.ok(main, 'main found')
+  t.ok(h3, 'h3 found')
 
-  t.equal(h3.textContent.trim(), 'Hello')
+  t.equal(h3.textContent.trim(), 'Hello', 'should contain "Hello"')
 
-  t.ok(container.hasAttribute('hidden'))
+  t.ok(container.hasAttribute('hidden'), 'should be hidden')
 
@@ -105,3 +104,3 @@ await container.show()
 
-  t.ok(container.hasAttribute('hidden'))
+  t.ok(container.hasAttribute('hidden'), 'container is hidden')
 })

popover/index.js

@@ -115,3 +115,4 @@ import { Tonic } from '@socketsupply/tonic'
 
-  show (triggerNode) {
+  show () {
+    const triggerNode = document.querySelector(`#${this.props.for}`)
     const popover = this.querySelector('.tonic--popover')
@@ -122,3 +123,6 @@ let scrollableArea = triggerNode.parentNode
       if (!scrollableArea || scrollableArea.tagName === 'BODY') break
-      if (window.getComputedStyle(scrollableArea).overflow === 'scroll') break
+
+      const overflow = window.getComputedStyle(scrollableArea).overflow
+      if (['scroll', 'scroll-x', 'scroll-y', 'auto'].includes(overflow)) break
+
       scrollableArea = scrollableArea.parentNode
@@ -152,3 +156,3 @@ }
       case 'bottom':
-        pos += triggerNode.offsetHeight + margin
+        pos += triggerNode.parentNodeNode.offsetHeight + margin
         left += (triggerNode.offsetWidth / 2) - (popover.offsetWidth / 2)
@@ -161,7 +165,5 @@ break
 
-    window.requestAnimationFrame(() => {
-      popover.className = `tonic--popover tonic--show tonic--popover--${this.props.position}`
-      const event = new window.Event('show')
-      this.dispatchEvent(event)
-    })
+    popover.className = `tonic--popover tonic--show tonic--popover--${this.props.position}`
+    const event = new window.Event('show')
+    this.dispatchEvent(event)
   }
@@ -168,0 +170,0 @@

popover/test.js

@@ -1,6 +0,6 @@
-import { test } from 'tapzero'
-import { qs } from 'qsa-min'
-import { html } from '../_test/util'
+import { test } from 'socket:test'
+import { html, qs } from '../_test/util.js'
+
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
@@ -16,5 +16,5 @@ Components(Tonic)
     <span>Default Popover</span>
-    <tonic-button id="tonic-popover-default-button">
+    <button id="tonic-popover-default-button">
       Open Popover
-    </tonic-button>
+    </button>
   </div>
@@ -34,13 +34,2 @@
 
-//
-// Panel Default
-//
-const popover = document.getElementById('tonic-popover-default')
-popover.addEventListener('show', event => {
-  document.body.addEventListener('click', e => {
-    popover.hide()
-  }, { once: true })
-})
-
-// TODO: write tests for popover.
 test('opening popover', async t => {
@@ -54,16 +43,20 @@ const container = qs('#popover')
 
-  const popoverCont = qs('.tonic--popover', popover)
-  t.ok(popoverCont)
+  const coPopover = qs('.tonic--popover', popover)
+  t.ok(coPopover)
 
-  const divs = popoverCont.querySelectorAll('div')
+  popover.addEventListener('show', event => {
+    t.ok(coPopover.classList.contains('tonic--show'), 'the component should be visible')
+    popover.hide()
+  })
+
+  const divs = coPopover.querySelectorAll('div')
   t.equal(divs.length, 3)
 
-  const styles = window.getComputedStyle(divs[0])
-  t.equal(styles.visibility, 'hidden')
+  t.ok(!coPopover.classList.contains('tonic--show'), 'the component should be hidden')
 
-  button.querySelector('button').click()
   await sleep(512)
+  button.click()
 
-  const styles2 = window.getComputedStyle(divs[0])
-  t.equal(styles2.visibility, 'visible')
+  await sleep(512)
+  t.ok(!coPopover.classList.contains('tonic--show'), 'the component should not be visible')
 })
@@ -70,0 +63,0 @@

profile-image/index.js

@@ -94,3 +94,3 @@ import { Tonic } from '@socketsupply/tonic'
         height: size,
-        border: border,
+        border,
         borderRadius: radius
@@ -97,0 +97,0 @@ }

profile-image/test.js

@@ -1,6 +0,6 @@
-import { test } from 'tapzero'
-import { qs } from 'qsa-min'
-import { html } from '../_test/util'
+import { test } from 'socket:test'
+import { html, qs } from '../_test/util.js'
+
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
@@ -7,0 +7,0 @@ Components(Tonic)

progress-bar/test.js

@@ -1,6 +0,6 @@
-import { test } from 'tapzero'
-import { qs } from 'qsa-min'
-import { html } from '../_test/util'
+import { test } from 'socket:test'
+import { html, qs } from '../_test/util.js'
+
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
@@ -7,0 +7,0 @@ Components(Tonic)

range/test.js

@@ -1,6 +0,6 @@
-import { test } from 'tapzero'
-import { qs } from 'qsa-min'
-import { html } from '../_test/util'
+import { test } from 'socket:test'
+import { html, qs } from '../_test/util.js'
+
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
@@ -7,0 +7,0 @@ Components(Tonic)

relative-time/test.js

@@ -1,8 +0,8 @@
-import { test } from 'tapzero'
-import { qs } from 'qsa-min'
+import { test } from 'socket:test'
+import { html, qs } from '../_test/util.js'
 
-import { html } from '../_test/util'
-import { Components } from '..'
-import { RelativeTime } from '.'
+import { Components } from '../index.js'
+import { RelativeTime } from './index.js'
 import { Tonic } from '@socketsupply/tonic'
+
 Components(Tonic)
@@ -9,0 +9,0 @@

router/index.js

@@ -162,6 +162,6 @@ import { Tonic } from '@socketsupply/tonic'
         prefix: prev,
-        delimiter: delimiter,
-        optional: optional,
-        repeat: repeat,
-        partial: partial,
+        delimiter,
+        optional,
+        repeat,
+        partial,
         pattern: pattern ? escapeGroup(pattern) : '[^' + escapeString(delimiter) + ']+?'
@@ -168,0 +168,0 @@ })

router/test.js

@@ -1,5 +0,6 @@
-import { html } from '../_test/util'
+import { html } from '../_test/util.js'
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
 
+import { Components } from '../index.js'
+
 Components(Tonic)
@@ -6,0 +7,0 @@

select/test.js

@@ -1,6 +0,6 @@
-import { test } from 'tapzero'
-import { qs } from 'qsa-min'
-import { html } from '../_test/util'
+import { test } from 'socket:test'
+import { html, qs } from '../_test/util.js'
+
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
@@ -7,0 +7,0 @@ Components(Tonic)

sprite/test.js

@@ -1,6 +0,6 @@
-import { test } from 'tapzero'
-import { qs } from 'qsa-min'
-import { html } from '../_test/util'
+import { test } from 'socket:test'
+import { html, qs } from '../_test/util.js'
+
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
@@ -33,4 +33,4 @@ Components(Tonic)
   const size = use.getBoundingClientRect()
-  t.equal(Math.floor(size.height), 92)
-  t.equal(Math.floor(size.width), 92)
+  t.equal(Math.floor(size.height), 90)
+  t.equal(Math.floor(size.width), 90)
 
@@ -37,0 +37,0 @@ const sprite = qs('tonic-sprite')

tabs/test.js

@@ -1,7 +0,6 @@
-import { test } from 'tapzero'
-import { qs } from 'qsa-min'
+import { test } from 'socket:test'
+import { html, qs } from '../_test/util.js'
 
-import { html } from '../_test/util'
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
@@ -8,0 +7,0 @@ Components(Tonic)

textarea/index.js

@@ -145,4 +145,4 @@ import { Tonic } from '@socketsupply/tonic'
         height,
-        borderRadius: radius,
-        resize: resize
+        resize,
+        borderRadius: radius
       }
@@ -149,0 +149,0 @@ }

textarea/test.js

@@ -1,4 +0,5 @@
-import { html } from '../_test/util'
+import { html } from '../_test/util.js'
+
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
@@ -5,0 +6,0 @@ Components(Tonic)

toaster-inline/test.js

@@ -1,5 +0,4 @@
-
-import { html } from '../_test/util'
+import { html } from '../_test/util.js'
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
@@ -6,0 +5,0 @@ Components(Tonic)

toaster/index.js

@@ -251,3 +251,7 @@ import { Tonic } from '@socketsupply/tonic'
     el.classList.remove('tonic--show')
+    const timeout = setTimeout(() => {
+      el.parentNode.removeChild(el)
+    }, 128)
     el.addEventListener('transitionend', e => {
+      clearTimeout(timeout)
       if (el && el.parentNode) {
@@ -254,0 +258,0 @@ el.parentNode.removeChild(el)

toaster/test.js

@@ -1,7 +0,6 @@
-import { test } from 'tapzero'
-import { qs } from 'qsa-min'
+import { test } from 'socket:test'
+import { html, qs } from '../_test/util.js'
 
-import { html } from '../_test/util'
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
@@ -8,0 +7,0 @@ Components(Tonic)

toggle/test.js

@@ -1,7 +0,6 @@
-import { test } from 'tapzero'
-import { qs } from 'qsa-min'
+import { test } from 'socket:test'
+import { html, qs } from '../_test/util.js'
 
-import { html } from '../_test/util'
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
@@ -8,0 +7,0 @@ Components(Tonic)

tooltip/test.js

@@ -1,4 +0,5 @@
-import { html } from '../_test/util'
+import { html } from '../_test/util.js'
+
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
@@ -5,0 +6,0 @@ Components(Tonic)

windowed/index.js

@@ -276,3 +276,3 @@ import { Tonic } from '@socketsupply/tonic'
     outer.scrollTop = scrollTop
-    this.rePaint({ fromScroll: true, scrollTop: scrollTop })
+    this.rePaint({ fromScroll: true, scrollTop })
   }
@@ -508,3 +508,3 @@
         const scrollTop = this.state.scrollTop = outer.scrollTop
-        this.rePaint({ fromScroll: true, scrollTop: scrollTop })
+        this.rePaint({ fromScroll: true, scrollTop })
       }, { passive: true })
@@ -511,0 +511,0 @@ outer.__hasWindowedScrollListener = true

windowed/test.js

@@ -1,2 +0,2 @@
-import { html } from '../_test/util'
+import { html } from '../_test/util.js'
 
@@ -3,0 +3,0 @@ document.body.appendChild(html`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

282446

increased by1.18%

Dev dependency count

4

decreased by-42.86%

Worsened metrics

Number of package files

69

decreased by-4.17%

Lines of code

8451

decreased by-3.04%

No dependency changes