Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@socketsupply/components

Package Overview
Dependencies
Maintainers
7
Versions
32
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@socketsupply/components - npm Package Compare versions

Comparing version 13.2.22 to 14.0.0

2

_test/fixtures/test-form.js
'use strict'
const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'

@@ -5,0 +5,0 @@ class TestForm extends Tonic {

15

_test/fixtures/testcafe.js

@@ -1,3 +0,7 @@

'use strict'
import Tonic from '@socketsupply/tonic'
import { Components } from '../../'
import { html } from '../util'
import './test-form'
window.promiseCounter = 0

@@ -11,11 +15,4 @@ const OldPromise = window.Promise

const Tonic = require('@socketsupply/tonic')
Components(Tonic)
const components = require('../../')
const { html } = require('../util')
require('./test-form')
components(Tonic)
document.body.appendChild(html`

@@ -22,0 +19,0 @@ <div>

53

_test/index.js
// @ts-check
'use strict'
require('../_dist/index.js')
require('../accordion/test')
require('../badge/test')
require('../button/test')
require('../chart/test')
require('../chart/test')
require('../checkbox/test')
require('../dialog/test')
require('../form/test')
require('../icon/test')
require('../input/test')
require('../panel/test')
require('../popover/test')
require('../profile-image/test')
require('../progress-bar/test')
require('../range/test')
require('../relative-time/test')
require('../router/test')
require('../select/test')
require('../sprite/test')
require('../tabs/test')
require('../textarea/test')
require('../toaster-inline/test')
require('../toaster/test')
require('../toggle/test')
require('../tooltip/test')
require('../windowed/test')
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'

4

_test/old/build.js

@@ -1,3 +0,3 @@

const fs = require('fs')
const path = require('path')
import fs from 'node:fs'
import path from 'node:path'

@@ -4,0 +4,0 @@ const root = path.join(__dirname, '..', '..')

4

_test/old/tape.js

@@ -1,2 +0,2 @@

const tape = require('@pre-bundled/tape')
import tape from '@pre-bundled/tape'
const stream = tape.createStream({ objectMode: true })

@@ -67,2 +67,2 @@

module.exports = tape
export { tape }

52

_test/old/test.js

@@ -1,30 +0,30 @@

const Tonic = require('@socketsupply/tonic')
const components = require('../..')
import { Tonic } from '@socketsupply/tonic'
import { Components } from '../..'
require('./tape.js')
import 'tape.js'
components(Tonic)
Components(Tonic)
function ready () {
require('../../router/test')
require('../../panel/test')
require('../../dialog/test')
require('../../tabs/test')
require('../../windowed/test')
require('../../tooltip/test')
require('../../popover/test')
require('../../badge/test')
require('../../button/test')
require('../../chart/test')
require('../../checkbox/test')
require('../../icon/test')
require('../../input/test')
require('../../progress-bar/test')
require('../../profile-image/test')
require('../../range/test')
require('../../select/test')
require('../../textarea/test')
require('../../toaster/test')
require('../../toaster-inline/test')
require('../../toggle/test')
async function ready () {
await import('../../router/test')
await import('../../panel/test')
await import('../../dialog/test')
await import('../../tabs/test')
await import('../../windowed/test')
await import('../../tooltip/test')
await import('../../popover/test')
await import('../../badge/test')
await import('../../button/test')
await import('../../chart/test')
await import('../../checkbox/test')
await import('../../icon/test')
await import('../../input/test')
await import('../../progress-bar/test')
await import('../../profile-image/test')
await import('../../range/test')
await import('../../select/test')
await import('../../textarea/test')
await import('../../toaster/test')
await import('../../toaster-inline/test')
await import('../../toggle/test')

@@ -31,0 +31,0 @@ document.addEventListener('keydown', e => {

2

_test/testcafe/test-form.js

@@ -1,3 +0,1 @@

'use strict'
/* global fixture, test, window */

@@ -4,0 +2,0 @@ import { Selector } from 'testcafe'

6

_test/util.js
'use strict'
const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'

@@ -22,7 +22,5 @@ class MainComp extends Tonic {

exports.html = html
function html ([str, ...strings], ...values) {
export function html ([str, ...strings], ...values) {
const comp = new MainComp(str, strings, values)
return comp
}

11

accordion/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class TonicAccordion extends Tonic {
export class TonicAccordion extends Tonic {
defaults () {

@@ -128,3 +128,3 @@ return {

class TonicAccordionSection extends Tonic {
export class TonicAccordionSection extends Tonic {
static stylesheet () {

@@ -239,6 +239,1 @@ return `

}
module.exports = {
TonicAccordion,
TonicAccordionSection
}

15

accordion/test.js

@@ -1,7 +0,8 @@

const tape = require('tapzero').test
const { qs } = require('qsa-min')
import { test } from 'tapzero'
import { qs } from 'qsa-min'
const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import { Components } from '..'
Components(Tonic)

@@ -61,3 +62,3 @@ document.body.appendChild(html`

tape('{{accordion-1}} has correct default state', t => {
test('{{accordion-1}} has correct default state', t => {
const container = qs('#accordion-1')

@@ -69,3 +70,3 @@ const component = qs('tonic-accordion', container)

tape('{{accordion-2}} is styled', t => {
test('{{accordion-2}} is styled', async t => {
const container = qs('#accordion-2')

@@ -72,0 +73,0 @@ const comp = qs('tonic-accordion', container)

8

badge/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class TonicBadge extends Tonic {
export class TonicBadge extends Tonic {
defaults () {

@@ -90,5 +90,1 @@ return {

}
module.exports = {
TonicBadge
}

18

badge/test.js

@@ -1,8 +0,10 @@

const tape = require('tapzero').test
const { qs } = require('qsa-min')
import { test } from 'tapzero'
import { qs } from 'qsa-min'
const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import { Components } from '..'
Components(Tonic)
document.body.appendChild(html`

@@ -35,3 +37,3 @@ <section id="badge">

tape('{{badge-1}} has correct default state', t => {
test('{{badge-1}} has correct default state', t => {
const container = qs('#badge-1')

@@ -44,3 +46,3 @@ const component = qs('tonic-badge', container)

tape('{{badge-2}} shows a count', t => {
test('{{badge-2}} shows a count', t => {
const container = qs('#badge-2')

@@ -57,3 +59,3 @@ const component = qs('tonic-badge', container)

tape('badge shows tonic--new style', t => {
test('badge shows tonic--new style', t => {
const span1 = qs('#badge-1 tonic-badge span')

@@ -60,0 +62,0 @@ const span2 = qs('#badge-2 tonic-badge span')

6

button/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class TonicButton extends Tonic {
export class TonicButton extends Tonic {
get value () {

@@ -278,3 +278,1 @@ return this.props.value

}
module.exports = { TonicButton }

34

button/test.js

@@ -1,8 +0,10 @@

const tape = require('tapzero').test
const { qs } = require('qsa-min')
import { test } from 'tapzero'
import { qs } from 'qsa-min'
const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import { Components } from '..'
Components(Tonic)
const sleep = n => new Promise(resolve => setTimeout(resolve, n))

@@ -90,3 +92,3 @@

tape('{{button-1}} has correct default state', t => {
test('{{button-1}} has correct default state', t => {
const container = qs('#button-1')

@@ -106,3 +108,3 @@ const component = qs('tonic-button', container)

tape('has styles', t => {
test('has styles', t => {
const container = qs('#button-1 tonic-button')

@@ -115,3 +117,3 @@ const button = qs('button', container)

tape('{{button-2}} has textContent', t => {
test('{{button-2}} has textContent', t => {
const container = qs('#button-2')

@@ -126,3 +128,3 @@ const component = qs('tonic-button', container)

tape('{{button-2-5}} has value', t => {
test('{{button-2-5}} has value', t => {
const container = qs('#button-2-5')

@@ -138,3 +140,3 @@ const component = qs('tonic-button', container)

tape('{{button-3}} is disabled', t => {
test('{{button-3}} is disabled', t => {
const container = qs('#button-3')

@@ -148,3 +150,3 @@ const component = qs('tonic-button', container)

tape('{{button-4}} is not disabled when disabled="false"', t => {
test('{{button-4}} is not disabled when disabled="false"', t => {
const container = qs('#button-4')

@@ -159,3 +161,3 @@ const component = qs('tonic-button', container)

tape('{{button-5}} has correct attributes', t => {
test('{{button-5}} has correct attributes', t => {
const container = qs('#button-5')

@@ -176,3 +178,3 @@ const component = qs('tonic-button', container)

tape('{{button-7}} gets border style derived from component attributes', t => {
test('{{button-7}} gets border style derived from component attributes', t => {
const container = qs('#button-7')

@@ -186,3 +188,3 @@ const component = qs('tonic-button', container)

tape('{{button-8}} is async, shows loading state when clicked', async t => {
test('{{button-8}} is async, shows loading state when clicked', async t => {
const container = qs('#button-8')

@@ -208,3 +210,3 @@ const component = qs('tonic-button', container)

tape('{{button-9}} is not async, does not show loading when clicked', async t => {
test('{{button-9}} is not async, does not show loading when clicked', async t => {
const container = qs('#button-9')

@@ -232,3 +234,3 @@ const component = qs('tonic-button', container)

tape('{{button-10}} has tabindex attribute', t => {
test('{{button-10}} has tabindex attribute', t => {
const container = qs('#button-10')

@@ -235,0 +237,0 @@ const component = qs('tonic-button', container)

6

chart/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class TonicChart extends Tonic {
export class TonicChart extends Tonic {
static stylesheet () {

@@ -111,3 +111,1 @@ return `

}
module.exports = { TonicChart }

17

chart/test.js

@@ -1,8 +0,11 @@

const tape = require('tapzero').test
const { qs } = require('qsa-min')
import { test } from 'tapzero'
import { qs } from 'qsa-min'
const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import chart from 'chart.js'
import { Components } from '..'
Components(Tonic)
// const CHART_OPTS = {

@@ -39,3 +42,3 @@ // tooltips: {

src="${CHART_DATA}"
library="${require('chart.js')}"
library="${chart}"
></tonic-chart>

@@ -46,3 +49,3 @@ </div>

tape('got a chart', t => {
test('got a chart', t => {
const container = qs('#chart-1')

@@ -49,0 +52,0 @@ const chart = qs('#chart-1 tonic-chart')

6

checkbox/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class TonicCheckbox extends Tonic {
export class TonicCheckbox extends Tonic {
constructor () {

@@ -209,3 +209,1 @@ super()

}
module.exports = { TonicCheckbox }

26

checkbox/test.js

@@ -1,8 +0,10 @@

const tape = require('tapzero').test
const { qs } = require('qsa-min')
import { test } from 'tapzero'
import { qs } from 'qsa-min'
const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import { Components } from '..'
Components(Tonic)
document.body.appendChild(html`

@@ -101,3 +103,3 @@ <section id="checkbox">

tape('{{checkbox-1}} has correct default state', t => {
test('{{checkbox-1}} has correct default state', t => {
const container = qs('#checkbox-1')

@@ -122,3 +124,3 @@ const component = qs('tonic-checkbox', container)

tape('{{checkbox-2}} has correct label', t => {
test('{{checkbox-2}} has correct label', t => {
const container = qs('#checkbox-2')

@@ -134,3 +136,3 @@ const component = qs('tonic-checkbox', container)

tape('{{checkbox-3}} is checked', t => {
test('{{checkbox-3}} is checked', t => {
const container = qs('#checkbox-3')

@@ -145,3 +147,3 @@ const component = qs('tonic-checkbox', container)

tape('{{checkbox-4}} is disabled', t => {
test('{{checkbox-4}} is disabled', t => {
const container = qs('#checkbox-4')

@@ -156,3 +158,3 @@ const component = qs('tonic-checkbox', container)

tape('{{checkbox-5}} has size attributes', t => {
test('{{checkbox-5}} has size attributes', t => {
const container = qs('#checkbox-5')

@@ -171,3 +173,3 @@ const component = qs('tonic-checkbox', container)

tape('{{checkbox-6}} has Tabindex', t => {
test('{{checkbox-6}} has Tabindex', t => {
const container = qs('#checkbox-6')

@@ -183,3 +185,3 @@ const component = qs('tonic-checkbox', container)

tape('{{checkbox-6-5}} has title', t => {
test('{{checkbox-6-5}} has title', t => {
const container = qs('#checkbox-6-5')

@@ -186,0 +188,0 @@ const component = qs('tonic-checkbox', container)

6

dialog/index.js

@@ -1,2 +0,2 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'

@@ -18,3 +18,3 @@ const FOCUS_CHANGE_TIMEOUT = 100

class TonicDialog extends Tonic {
export class TonicDialog extends Tonic {
constructor () {

@@ -266,3 +266,1 @@ super()

}
module.exports = { TonicDialog }

15

dialog/test.js

@@ -1,7 +0,10 @@

const Tonic = require('@socketsupply/tonic')
import { test } from 'tapzero'
import { qs } from 'qsa-min'
import { html } from '../_test/util'
const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
import { Tonic } from '@socketsupply/tonic'
import { Components } from '..'
Components(Tonic)
class DialogInner extends Tonic {

@@ -45,6 +48,4 @@ async click (e) {

//
const tape = require('tapzero').test
const { qs } = require('qsa-min')
tape('{{dialog-1}} is constructed properly, opens and closes properly', async t => {
test('{{dialog-1}} is constructed properly, opens and closes properly', async t => {
const container = qs('#dialog-1')

@@ -51,0 +52,0 @@ const component = qs('#dialog-default', container)

6

form/index.js

@@ -1,6 +0,6 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
const NON_EXISTANT = { type: 'TonicForm_NON_EXISTANT' }
class TonicForm extends Tonic {
export class TonicForm extends Tonic {
static isNumber (s) {

@@ -185,3 +185,1 @@ return !isNaN(Number(s))

TonicForm.NON_EXISTANT = NON_EXISTANT
module.exports = { TonicForm }

24

form/test.js

@@ -1,9 +0,11 @@

const tape = require('tapzero').test
const { qs } = require('qsa-min')
import { test } from 'tapzero'
import { qs } from 'qsa-min'
const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
const { TonicForm } = require('.')
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import { TonicForm } from '.'
import { Components } from '..'
Components(Tonic)
document.body.appendChild(html`

@@ -50,3 +52,3 @@ <section id="form">

tape('{{form-1}} get data from form', t => {
test('{{form-1}} get data from form', t => {
const component = qs('tonic-form#f1')

@@ -59,2 +61,4 @@ const inputA = qs('#a', component)

console.log('component', component.name)
const expected = {

@@ -71,3 +75,3 @@ ka: 'va',

tape('{{form-2}} populate form data', t => {
test('{{form-2}} populate form data', t => {
const component = qs('tonic-form#f2')

@@ -93,3 +97,3 @@ const inputA = qs('#a2', component)

tape('{{form-3}} get and set data', t => {
test('{{form-3}} get and set data', t => {
const o = {

@@ -150,3 +154,3 @@ a: {

tape('{{form-4}} reset form data', t => {
test('{{form-4}} reset form data', t => {
const component = qs('tonic-form#f2')

@@ -153,0 +157,0 @@ console.log(component.value)

6

icon/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class TonicIcon extends Tonic {
export class TonicIcon extends Tonic {
defaults () {

@@ -66,3 +66,1 @@ return {

}
module.exports = { TonicIcon }

22

icon/test.js

@@ -1,8 +0,10 @@

const tape = require('tapzero').test
const { qs } = require('qsa-min')
import { test } from 'tapzero'
import { qs } from 'qsa-min'
const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import { Components } from '..'
Components(Tonic)
document.body.appendChild(html`

@@ -59,3 +61,3 @@ <section id="icon">

tape('{{icon-1}} is constructed properly', t => {
test('{{icon-1}} is constructed properly', t => {
const container = qs('#icon-1')

@@ -69,3 +71,3 @@ const component = qs('tonic-icon', container)

tape('{{icon-2}} has size attribute', t => {
test('{{icon-2}} has size attribute', t => {
const container = qs('#icon-2')

@@ -85,3 +87,3 @@ const component = qs('tonic-icon', container)

tape('{{icon-3}} has color attribute', t => {
test('{{icon-3}} has color attribute', t => {
const container = qs('#icon-3')

@@ -96,3 +98,3 @@ const component = qs('tonic-icon', container)

tape('{{icon-4}} uses custom symbol', t => {
test('{{icon-4}} uses custom symbol', t => {
const container = qs('#icon-4')

@@ -113,3 +115,3 @@ const component = qs('tonic-icon', container)

tape('{{icon-5}} has tabindex attribute', t => {
test('{{icon-5}} has tabindex attribute', t => {
const container = qs('#icon-5')

@@ -116,0 +118,0 @@ const component = qs('tonic-icon', container)

70

index.js

@@ -1,9 +0,30 @@

let Tonic
try {
Tonic = require('@socketsupply/tonic')
} catch (err) {
console.error('Missing dependency. Try `npm install @socketsupply/tonic`.')
throw err
}
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'
const version = Tonic.version

@@ -17,30 +38,5 @@ const major = version ? version.split('.')[0] : '0'

const { TonicAccordion, TonicAccordionSection } = require('./accordion')
const { TonicBadge } = require('./badge')
const { TonicButton } = require('./button')
const { TonicChart } = require('./chart')
const { TonicCheckbox } = require('./checkbox')
const { TonicDialog } = require('./dialog')
const { TonicForm } = require('./form')
const { TonicIcon } = require('./icon')
const { TonicInput } = require('./input')
const { TonicLoader } = require('./loader')
const { TonicPanel } = require('./panel')
const { TonicPopover } = require('./popover')
const { TonicProfileImage } = require('./profile-image')
const { TonicProgressBar } = require('./progress-bar')
const { TonicRange } = require('./range')
const { TonicRelativeTime } = require('./relative-time')
const { TonicRouter } = require('./router')
const { TonicSelect } = require('./select')
const { TonicSprite } = require('./sprite')
const { TonicSplit, TonicSplitLeft, TonicSplitRight, TonicSplitTop, TonicSplitBottom } = require('./split')
const { TonicTabs, TonicTab, TonicTabPanel } = require('./tabs')
const { TonicTextarea } = require('./textarea')
const { TonicTooltip } = require('./tooltip')
const { TonicToasterInline } = require('./toaster-inline')
const { TonicToaster } = require('./toaster')
const { TonicToggle } = require('./toggle')
let once = false
// For supporting unpkg / dist / jsfiddle.
Components.Tonic = Tonic

@@ -50,7 +46,3 @@ //

//
module.exports = components
// For supporting unpkg / dist / jsfiddle.
components.Tonic = Tonic
function components (Tonic) {
export function Components (Tonic) {
if (once) {

@@ -57,0 +49,0 @@ return

6

input/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class TonicInput extends Tonic {
export class TonicInput extends Tonic {
constructor () {

@@ -429,3 +429,1 @@ super()

}
module.exports = { TonicInput }

39

input/test.js

@@ -1,9 +0,10 @@

const tape = require('tapzero').test
const { qs } = require('qsa-min')
import { test } from 'tapzero'
import { qs } from 'qsa-min'
const { html } = require('../_test/util')
const components = require('..')
const Tonic = require('@socketsupply/tonic')
components(Tonic)
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import { Components } from '..'
Components(Tonic)
class InputWrapper extends Tonic {

@@ -206,3 +207,3 @@ constructor (o) {

tape('{{input-1}} default state is constructed', t => {
test('{{input-1}} default state is constructed', t => {
const component = qs('tonic-input#input-1')

@@ -219,3 +220,3 @@ const wrapper = qs('.tonic--wrapper', component)

tape('{{input-2}} contains a default value', t => {
test('{{input-2}} contains a default value', t => {
const component = qs('tonic-input#input-2')

@@ -229,3 +230,3 @@ const input = qs('input', component)

tape('{{input-3}} contains a type', t => {
test('{{input-3}} contains a type', t => {
const component = qs('tonic-input#input-3')

@@ -239,3 +240,3 @@ const input = qs('input', component)

tape('{{input-4}} is required', t => {
test('{{input-4}} is required', t => {
const component = qs('tonic-input#input-4')

@@ -252,3 +253,3 @@ const input = qs('input', component)

tape('{{input-5}} is disabled', t => {
test('{{input-5}} is disabled', t => {
const component = qs('tonic-input#input-5')

@@ -262,3 +263,3 @@ const input = qs('input', component)

tape('{{input-6}} has spellcheck attribute', t => {
test('{{input-6}} has spellcheck attribute', t => {
const component = qs('tonic-input#input-6')

@@ -272,3 +273,3 @@ const input = qs('input', component)

tape('{{input-7}} shows error message', t => {
test('{{input-7}} shows error message', t => {
const component = qs('tonic-input#input-7')

@@ -285,3 +286,3 @@ const input = qs('input', component)

tape('{{input-8}} has placeholder', t => {
test('{{input-8}} has placeholder', t => {
const component = qs('tonic-input#input-8')

@@ -294,3 +295,3 @@ const input = qs('input', component)

tape('{{input-9}} has label', t => {
test('{{input-9}} has label', t => {
const component = qs('tonic-input#input-9')

@@ -305,3 +306,3 @@ const input = qs('input', component)

tape('{{input-10}} has tabindex', t => {
test('{{input-10}} has tabindex', t => {
const component = qs('tonic-input#input-10')

@@ -315,3 +316,3 @@ const input = qs('input', component)

tape('{{input-11}} has readonly attribute', t => {
test('{{input-11}} has readonly attribute', t => {
const component = qs('tonic-input#input-11')

@@ -325,3 +326,3 @@ const input = qs('input', component)

tape('{{input-1}} event handlers', t => {
test('{{input-1}} event handlers', t => {
const component = qs('tonic-input#input-1')

@@ -343,3 +344,3 @@ const input = qs('input', component)

tape('input wrapper component interactions', async t => {
test('input wrapper component interactions', async t => {
const comp = qs('input-test-wrapper-comp')

@@ -346,0 +347,0 @@

6

loader/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class TonicLoader extends Tonic {
export class TonicLoader extends Tonic {
constructor () {

@@ -60,3 +60,1 @@ super()

}
module.exports = { TonicLoader }

16

package.json
{
"name": "@socketsupply/components",
"version": "13.2.22",
"version": "14.0.0",
"description": "Example components",
"type": "module",
"scripts": {
"dist": "esbuild --format=cjs --bundle --keep-names index.js > _dist/index.js",
"dist-esm": "esbuild --format=esm --bundle --keep-names index.js > _dist/index.esm.js",
"dist-min-esm": "esbuild --format=esm --minify --bundle --keep-names index.js > _dist/index.min.esm.js",
"prepare": "npm run dist && npm run dist-esm && npm run lint",
"prepare": "npm run lint",
"lint": "standard -v",
"test": "standard && npm run dist && esbuild --bundle _test/index.js | tape-run",
"test:ci": "npm run dist && esbuild --bundle _test/index.js | tape-run",
"test:open": "npm run dist && esbuild --bundle _test/index.js | tape-run --browser chrome --keep-open",
"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",
"pub": "npm pub && npm publish --registry https://npm.pkg.github.com"

@@ -34,3 +32,3 @@ },

"devDependencies": {
"@socketsupply/tonic": "14.1.0",
"@socketsupply/tonic": "15.0.0",
"standard": "16.0.4",

@@ -37,0 +35,0 @@ "tape-run": "9.0.0",

6

panel/index.js

@@ -1,4 +0,4 @@

const { TonicDialog } = require('../dialog')
import { TonicDialog } from '../dialog'
class TonicPanel extends TonicDialog {
export class TonicPanel extends TonicDialog {
constructor () {

@@ -73,3 +73,1 @@ super()

}
module.exports = { TonicPanel }

15

panel/test.js

@@ -1,9 +0,10 @@

const tape = require('tapzero').test
const { qs } = require('qsa-min')
const Tonic = require('@socketsupply/tonic')
import { test } from 'tapzero'
import { qs } from 'qsa-min'
const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import { Components } from '..'
Components(Tonic)
class PanelInner extends Tonic {

@@ -82,3 +83,3 @@ async click (e) {

tape('opening a panel', async t => {
test('opening a panel', async t => {
const container = qs('#example-panel-default')

@@ -85,0 +86,0 @@ const overlay = qs('.tonic--overlay')

6

popover/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class TonicPopover extends Tonic {
export class TonicPopover extends Tonic {
constructor () {

@@ -197,3 +197,1 @@ super()

}
module.exports = { TonicPopover }

14

popover/test.js

@@ -1,7 +0,9 @@

const tape = require('tapzero').test
const { qs } = require('qsa-min')
const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
import { test } from 'tapzero'
import { qs } from 'qsa-min'
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import { Components } from '..'
Components(Tonic)
document.body.appendChild(html`

@@ -42,3 +44,3 @@ <section id="popover">

// TODO: write tests for popover.
tape('opening popover', async t => {
test('opening popover', async t => {
const container = qs('#popover')

@@ -45,0 +47,0 @@ const popover = qs('#tonic-popover-default', container)

6

profile-image/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class TonicProfileImage extends Tonic {
export class TonicProfileImage extends Tonic {
get value () {

@@ -200,3 +200,1 @@ const state = this.state

`)
module.exports = { TonicProfileImage }

14

profile-image/test.js

@@ -1,7 +0,9 @@

const tape = require('tapzero').test
const { qs } = require('qsa-min')
const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
import { test } from 'tapzero'
import { qs } from 'qsa-min'
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import { Components } from '..'
Components(Tonic)
document.body.appendChild(html`

@@ -120,3 +122,3 @@ <section id="profile-image">

// TODO: write tests for profile-image
tape('test a profile image', t => {
test('test a profile image', t => {
const img = qs('#profile-image-default')

@@ -123,0 +125,0 @@ const imgDiv = qs('.tonic--image', img)

6

progress-bar/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class TonicProgressBar extends Tonic {
export class TonicProgressBar extends Tonic {
set value (value) {

@@ -79,3 +79,1 @@ this.setProgress(value)

}
module.exports = { TonicProgressBar }

14

progress-bar/test.js

@@ -1,7 +0,9 @@

const tape = require('tapzero').test
const { qs } = require('qsa-min')
const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
import { test } from 'tapzero'
import { qs } from 'qsa-min'
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import { Components } from '..'
Components(Tonic)
document.body.appendChild(html`

@@ -127,3 +129,3 @@ <section id="progress-bar">

// TODO: convert to tape tests.
tape('get a progress bar', t => {
test('get a progress bar', t => {
const bar = qs('#progress-bar-30')

@@ -130,0 +132,0 @@ const wrapper = qs('.tonic--wrapper', bar)

6

range/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class TonicRange extends Tonic {
export class TonicRange extends Tonic {
defaults () {

@@ -210,3 +210,1 @@ return {

}
module.exports = { TonicRange }

14

range/test.js

@@ -1,7 +0,9 @@

const tape = require('tapzero').test
const { qs } = require('qsa-min')
const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
import { test } from 'tapzero'
import { qs } from 'qsa-min'
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import { Components } from '..'
Components(Tonic)
document.body.appendChild(html`

@@ -138,3 +140,3 @@ <section id="range">

// TODO: convert to tape tests
tape('test a range elem', t => {
test('test a range elem', t => {
const range = qs('#range-default')

@@ -141,0 +143,0 @@ const range2 = qs('#range-thumb-value')

2

README.md

@@ -18,3 +18,3 @@ # SYNOPSIS

```js
inport Tonic from '@socketsupply/tonic'
import Tonic from '@socketsupply/tonic'
import { TonicInput } from '@socketsupply/components/input'

@@ -21,0 +21,0 @@ import { TonicIcon } from '@socketsupply/components/icon'

8

relative-time/index.js

@@ -1,2 +0,2 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'

@@ -206,3 +206,3 @@ const weekdays = [

class RelativeTime {
export class RelativeTime {
constructor (date, locale) {

@@ -449,3 +449,3 @@ this.date = date

class TonicRelativeTime extends Tonic {
export class TonicRelativeTime extends Tonic {
render () {

@@ -482,3 +482,1 @@ let date = this.props.date || ''

})
module.exports = { TonicRelativeTime, RelativeTime }

19

relative-time/test.js

@@ -1,8 +0,9 @@

const tape = require('tapzero').test
const { qs } = require('qsa-min')
import { test } from 'tapzero'
import { qs } from 'qsa-min'
const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
const { RelativeTime } = require('.')
import { html } from '../_test/util'
import { Components } from '..'
import { RelativeTime } from '.'
import { Tonic } from '@socketsupply/tonic'
Components(Tonic)

@@ -32,3 +33,3 @@ const NOW_MINUS_5 = new Date()

tape('{{relative-time-1}} default state is constructed', t => {
test('{{relative-time-1}} default state is constructed', t => {
const now = qs('#relative-time-now')

@@ -38,3 +39,3 @@ t.equal(now.textContent, 'now')

tape('{{relative-time-2}} default state is constructed', t => {
test('{{relative-time-2}} default state is constructed', t => {
const now = qs('#relative-time-then')

@@ -44,5 +45,5 @@ t.equal(now.textContent, '5 minutes ago')

tape('{{relative-time-3}} stand-alone ctor', t => {
test('{{relative-time-3}} stand-alone ctor', t => {
const s = new RelativeTime(NOW_MINUS_5)
t.equal(s.toString(), '5 minutes ago')
})

6

router/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class TonicRouter extends Tonic {
export class TonicRouter extends Tonic {
constructor () {

@@ -288,3 +288,1 @@ super()

})()
module.exports = { TonicRouter }

8

router/test.js

@@ -1,5 +0,7 @@

const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import { Components } from '..'
Components(Tonic)
document.body.appendChild(html`

@@ -6,0 +8,0 @@ <section id="router">

6

select/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class TonicSelect extends Tonic {
export class TonicSelect extends Tonic {
defaults () {

@@ -404,3 +404,1 @@ return {

}
module.exports = { TonicSelect }

14

select/test.js

@@ -1,7 +0,9 @@

const tape = require('tapzero').test
const { qs } = require('qsa-min')
const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
import { test } from 'tapzero'
import { qs } from 'qsa-min'
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import { Components } from '..'
Components(Tonic)
document.body.appendChild(html`

@@ -197,3 +199,3 @@ <section id="select">

// TODO: write tests
tape('test a select', t => {
test('test a select', t => {
const select = qs('#default-select')

@@ -200,0 +202,0 @@

20

split/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class TonicSplitLeft extends Tonic {
export class TonicSplitLeft extends Tonic {
render () {

@@ -15,3 +15,3 @@ if (this.props.width) {

class TonicSplitTop extends Tonic {
export class TonicSplitTop extends Tonic {
render () {

@@ -28,6 +28,6 @@ if (this.props.height) {

class TonicSplitRight extends TonicSplitLeft {}
class TonicSplitBottom extends TonicSplitTop {}
export class TonicSplitRight extends TonicSplitLeft {}
export class TonicSplitBottom extends TonicSplitTop {}
class TonicSplit extends Tonic {
export class TonicSplit extends Tonic {
constructor () {

@@ -365,9 +365,1 @@ super()

}
module.exports = {
TonicSplit,
TonicSplitLeft,
TonicSplitRight,
TonicSplitTop,
TonicSplitBottom
}

6

sprite/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class TonicSprite extends Tonic {
export class TonicSprite extends Tonic {
static stylesheet () {

@@ -71,3 +71,1 @@ return `

}
module.exports = { TonicSprite }

14

sprite/test.js

@@ -1,7 +0,9 @@

const tape = require('tapzero').test
const { qs } = require('qsa-min')
const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
import { test } from 'tapzero'
import { qs } from 'qsa-min'
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import { Components } from '..'
Components(Tonic)
document.body.appendChild(html`

@@ -23,3 +25,3 @@ <section id="sprite">

tape('test an icon', t => {
test('test an icon', t => {
const svg = qs('#svg-close')

@@ -26,0 +28,0 @@ const use = qs('use', svg)

14

tabs/index.js

@@ -1,6 +0,6 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
const CustomEvent = window.CustomEvent
class TonicTabs extends Tonic {
export class TonicTabs extends Tonic {
constructor (o) {

@@ -193,3 +193,3 @@ super(o)

class TonicTabPanel extends Tonic {
export class TonicTabPanel extends Tonic {
static stylesheet () {

@@ -248,3 +248,3 @@ return `

class TonicTab extends Tonic {
export class TonicTab extends Tonic {
render () {

@@ -268,7 +268,1 @@ const ariaControls = this.props.for

}
module.exports = {
TonicTabs,
TonicTab,
TonicTabPanel
}

17

tabs/test.js

@@ -1,9 +0,10 @@

const Tonic = require('@socketsupply/tonic')
const tape = require('tapzero').test
const { qs } = require('qsa-min')
import { test } from 'tapzero'
import { qs } from 'qsa-min'
const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import { Components } from '..'
Components(Tonic)
document.body.appendChild(html`

@@ -189,3 +190,3 @@ <section id="tabs">

tape('{{tabs-3}} has correct default state', t => {
test('{{tabs-3}} has correct default state', t => {
const container = qs('component-container')

@@ -196,3 +197,3 @@

tape('tabs only render what is visible', async t => {
test('tabs only render what is visible', async t => {
document.body.appendChild(html`

@@ -199,0 +200,0 @@ <div id="tabs-4" class="test-container">

6

textarea/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class TonicTextarea extends Tonic {
export class TonicTextarea extends Tonic {
mutate (e) {

@@ -296,3 +296,1 @@ const { width, height } = e.target.style

}
module.exports = { TonicTextarea }

8

textarea/test.js

@@ -1,5 +0,7 @@

const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import { Components } from '..'
Components(Tonic)
document.body.appendChild(html`

@@ -6,0 +8,0 @@ <section id="textarea">

6

toaster-inline/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class TonicToasterInline extends Tonic {
export class TonicToasterInline extends Tonic {
defaults () {

@@ -217,3 +217,1 @@ return {

}
module.exports = { TonicToasterInline }

8

toaster-inline/test.js
const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import { Components } from '..'
Components(Tonic)
document.body.appendChild(html`

@@ -7,0 +9,0 @@ <section id="toaster-inline">

6

toaster/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class TonicToaster extends Tonic {
export class TonicToaster extends Tonic {
defaults () {

@@ -297,3 +297,1 @@ return {

}
module.exports = { TonicToaster }

24

toaster/test.js

@@ -1,8 +0,10 @@

const tape = require('tapzero').test
const { qs } = require('qsa-min')
import { test } from 'tapzero'
import { qs } from 'qsa-min'
const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import { Components } from '..'
Components(Tonic)
document.body.appendChild(html`

@@ -149,3 +151,3 @@ <section id="toaster">

tape('{{toaster}} is created and destroyed', async t => {
test('{{toaster}} is created and destroyed', async t => {
notification.create({

@@ -179,3 +181,3 @@ message: 'You have been notified.'

tape('{{toaster}} with dismiss false is created without close icon', async t => {
test('{{toaster}} with dismiss false is created without close icon', async t => {
notification.create({

@@ -197,3 +199,3 @@ message: 'I will stay open',

tape('{{toaster}} with type success is created', async t => {
test('{{toaster}} with type success is created', async t => {
notification.create({

@@ -219,3 +221,3 @@ type: 'success',

tape('{{toaster}} is created and destroyed after duration', async t => {
test('{{toaster}} is created and destroyed after duration', async t => {
notification.create({

@@ -237,3 +239,3 @@ message: 'Short and sweet',

tape('{{toaster}} is created on the left', async t => {
test('{{toaster}} is created on the left', async t => {
const notificationLeft = qs('tonic-toaster[position="left"]')

@@ -255,3 +257,3 @@ const wrapper = qs('.tonic--left', notificationLeft)

tape('{{toaster}} is created on the right', async t => {
test('{{toaster}} is created on the right', async t => {
const notificationRight = qs('tonic-toaster[position="right"]')

@@ -258,0 +260,0 @@ const wrapper = qs('.tonic--right', notificationRight)

6

toggle/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class TonicToggle extends Tonic {
export class TonicToggle extends Tonic {
constructor () {

@@ -211,3 +211,1 @@ super()

}
module.exports = { TonicToggle }

16

toggle/test.js

@@ -1,8 +0,10 @@

const tape = require('tapzero').test
const { qs } = require('qsa-min')
import { test } from 'tapzero'
import { qs } from 'qsa-min'
const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import { Components } from '..'
Components(Tonic)
document.body.appendChild(html`

@@ -90,3 +92,3 @@ <section id="toggle">

tape('{{toggle-1}} default state renders properly', t => {
test('{{toggle-1}} default state renders properly', t => {
const container = qs('#toggle-1')

@@ -104,3 +106,3 @@ const component = qs('tonic-toggle', container)

tape('{{toggle-2}} has tabindex attribute', t => {
test('{{toggle-2}} has tabindex attribute', t => {
const container = qs('#toggle-2')

@@ -107,0 +109,0 @@ const component = qs('tonic-toggle', container)

6

tooltip/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class TonicTooltip extends Tonic {
export class TonicTooltip extends Tonic {
connected () {

@@ -169,3 +169,1 @@ const target = this.props.for

TonicTooltip.timers = {}
module.exports = { TonicTooltip }

8

tooltip/test.js

@@ -1,5 +0,7 @@

const { html } = require('../_test/util')
const components = require('..')
components(require('@socketsupply/tonic'))
import { html } from '../_test/util'
import { Tonic } from '@socketsupply/tonic'
import { Components } from '..'
Components(Tonic)
document.body.appendChild(html`

@@ -6,0 +8,0 @@ <section id="tooltip">

6

windowed/index.js

@@ -1,4 +0,4 @@

const Tonic = require('@socketsupply/tonic')
import { Tonic } from '@socketsupply/tonic'
class Windowed extends Tonic {
export class Windowed extends Tonic {
constructor (o) {

@@ -544,3 +544,1 @@ super(o)

}
module.exports = { Windowed }

2

windowed/test.js

@@ -1,2 +0,2 @@

const { html } = require('../_test/util')
import { html } from '../_test/util'

@@ -3,0 +3,0 @@ document.body.appendChild(html`

_dist/index.esm.js
_dist/index.js
_dist/index.min.esm.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc