@knowark/componarkjs 1.13.4 → 1.14.1

package/lib/components/paginator/components/paginator.js

@@ -2,7 +2,12 @@ import { Component } from '#base/index.js'
 import styles from '../styles/index.js'
 
 const tag = 'ark-paginator'
+/**
+ * Pagination control component.
+ */
 export class Paginator extends Component {
+  /** @param {object} context
+   *  @returns {this} */
   init (context = {}) {
     this.binding = 'paginator-listen'
     this.collectionSize = (
@@ -21,6 +26,7 @@ export class Paginator extends Component {
     return ['collectionSize', 'pageSize', 'displayedPages', 'currentPage']
   }
 
+  /** @returns {this} */
   render () {
     this._grabSlots()
     this.content = /* html */`
@@ -42,12 +48,13 @@ export class Paginator extends Component {
       this._buildButton(this.previousButton, '_prev', '<'))
 
     for (const page of this.currentPages) {
-      const attributes = [['data-page', page]]
+      /** @type {[string, string][]} */
+      const attributes = [['data-page', String(page)]]
       if ((Number(page) === Number(this.currentPage))) {
         attributes.unshift(['active', ''])
       }
       this.querySelector('[data-middle]').appendChild(
-        this._buildButton(this.pageButton, null, page, attributes))
+        this._buildButton(this.pageButton, null, `${page}`, attributes))
     }
 
     this.querySelector('[data-end]').appendChild(
@@ -58,10 +65,12 @@ export class Paginator extends Component {
     return super.render()
   }
 
+  /** @returns {number} */
   get totalPages () {
     return Math.ceil(this.collectionSize / this.pageSize)
   }
 
+  /** @returns {number[]} */
   get currentPages () {
     const displayedPages = Math.min(
       parseInt(this.displayedPages), this.totalPages)
@@ -72,6 +81,7 @@ export class Paginator extends Component {
     return Array.from({ length: displayedPages }, (_, i) => i + startPage)
   }
 
+  /** @returns {void} */
   _notifyChange () {
     const page = parseInt(this.currentPage)
     const limit = parseInt(this.pageSize)
@@ -80,6 +90,8 @@ export class Paginator extends Component {
   }
 
   /** @param {number} currentPage */
+  /** @param {number} currentPage
+   * @returns {void} */
   _setCurrentPage (currentPage) {
     if (currentPage > 0 && currentPage <= this.totalPages) {
       this.currentPage = currentPage
@@ -88,19 +100,22 @@ export class Paginator extends Component {
     }
   }
 
-  /** @param {Event} event */
+  /** @param {Event} event
+   * @returns {void} */
   _first (event) {
     event.stopPropagation()
     this._setCurrentPage(1)
   }
 
-  /** @param {Event} event */
+  /** @param {Event} event
+   * @returns {void} */
   _prev (event) {
     event.stopPropagation()
     this._setCurrentPage(parseInt(this.currentPage) - 1)
   }
 
-  /** @param {Event} event */
+  /** @param {Event} event
+   * @returns {void} */
   _move (event) {
     event.stopPropagation()
     const target = /** @type {HTMLElement} */ (event.target)
@@ -108,18 +123,21 @@ export class Paginator extends Component {
     this._setCurrentPage(page)
   }
 
-  /** @param {Event} event */
+  /** @param {Event} event
+   * @returns {void} */
   _next (event) {
     event.stopPropagation()
     this._setCurrentPage(parseInt(this.currentPage) + 1)
   }
 
-  /** @param {Event} event */
+  /** @param {Event} event
+   * @returns {void} */
   _last (event) {
     event.stopPropagation()
     this._setCurrentPage(this.totalPages)
   }
 
+  /** @returns {void} */
   _grabSlots() {
     const [pageButton] = [this.slots.page].flat()
     this.pageButton = this.pageButton ?? pageButton
@@ -133,8 +151,16 @@ export class Paginator extends Component {
     this.lastButton = this.lastButton ?? lastButton
   }
 
+  /**
+   * @param {HTMLButtonElement|null} element
+   * @param {string|null} handler
+   * @param {string} content
+   * @param {Array<[string,string]>} attributes
+   * @returns {HTMLButtonElement}
+   */
   _buildButton (element, handler, content, attributes = []) {
-    const button = (element ?? document.createElement('button')).cloneNode(true)
+    const button = /** @type {HTMLButtonElement} */ (
+      (element ?? document.createElement('button')).cloneNode(true))
     button.innerHTML = button.innerHTML || content
     if (handler) {
       button.setAttribute('paginator-listen', '')

package/lib/components/paginator/components/paginator.test.js

@@ -1,152 +1,155 @@
+import { it } from 'node:test';
+import assert from 'node:assert/strict';
 import './paginator.js'
 
-describe('Paginator', () => {
-  let container = null
-
-  beforeEach(() => {
-    container = document.createElement('div')
-    document.body.appendChild(container)
-  })
+let container = null
 
-  afterEach(() => {
-    container.remove()
-    container = null
-  })
+const setup = () => {
+  document.body.innerHTML = '';
+  container = document.createElement('div')
+  document.body.appendChild(container)
+};
 
-  it('can be instantiated', () => {
-    container.innerHTML = /* html */ `
-      <ark-paginator></ark-paginator>
-    `
-    const paginator = container.querySelector('ark-paginator')
+it('can be instantiated', () => {
+  setup();
+  container.innerHTML = /* html */ `
+    <ark-paginator></ark-paginator>
+  `
+  const paginator = container.querySelector('ark-paginator')
 
-    expect(paginator).toBe(paginator.init())
-  })
+  assert.strictEqual(paginator, paginator.init())
+})
+
+it('can be instantiated with parameters', () => {
+  setup();
+  container.innerHTML = /* html */ `
+    <ark-paginator page-size="12" displayed-pages="5"></ark-paginator>
+  `
+  const paginator = container.querySelector('ark-paginator')
+  paginator.init({ collectionSize: 120, currentPage: 4 })
+
+  assert.strictEqual(paginator.pageSize, '12')
+  assert.strictEqual(paginator.collectionSize, '120')
+  assert.strictEqual(paginator.currentPage, '4')
+  assert.strictEqual(paginator.displayedPages, '5')
+  assert.strictEqual(paginator.totalPages, 10)
+
+  paginator.init({ collectionSize: 120, pageSize: 10 })
+  assert.strictEqual(paginator.totalPages, 12)
+})
+
+it('computes the current shown pages', () => {
+  setup();
+  container.innerHTML = /* html */ `
+  <ark-paginator collection-size="120" page-size="12" 
+    displayed-pages="5" current-page="1"></ark-paginator>
+  `
+  const paginator = container.querySelector('ark-paginator')
+
+  assert.deepStrictEqual(paginator.currentPages, [1, 2, 3, 4, 5])
+  assert.deepStrictEqual(paginator.totalPages, 10)
+
+  paginator.init({ currentPage: 3 })
+  assert.deepStrictEqual(paginator.currentPages, [1, 2, 3, 4, 5])
+
+  paginator.init({ currentPage: 4 })
+  assert.deepStrictEqual(paginator.currentPages, [2, 3, 4, 5, 6])
+
+  paginator.init({ currentPage: 5 })
+  assert.deepStrictEqual(paginator.currentPages, [3, 4, 5, 6, 7])
+
+  paginator.init({ currentPage: 7 })
+  assert.deepStrictEqual(paginator.currentPages, [5, 6, 7, 8, 9])
+
+  paginator.init({ currentPage: 8 })
+  assert.deepStrictEqual(paginator.currentPages, [6, 7, 8, 9, 10])
+
+  paginator.init({ currentPage: 9 })
+  assert.deepStrictEqual(paginator.currentPages, [6, 7, 8, 9, 10])
+
+  paginator.init({ currentPage: 10 })
+  assert.deepStrictEqual(paginator.currentPages, [6, 7, 8, 9, 10])
+
+  paginator.init({ displayedPages: 6, currentPage: 5 })
+  assert.deepStrictEqual(paginator.currentPages, [2, 3, 4, 5, 6, 7])
+
+  paginator.init({ displayedPages: 6, currentPage: 7 })
+  assert.deepStrictEqual(paginator.currentPages, [4, 5, 6, 7, 8, 9])
 
-  it('can be instantiated with parameters', () => {
-    container.innerHTML = /* html */ `
-      <ark-paginator page-size="12" displayed-pages="5"></ark-paginator>
-    `
-    const paginator = container.querySelector('ark-paginator')
-    paginator.init({ collectionSize: 120, currentPage: 4 })
+  paginator.init({ displayedPages: 6, currentPage: 9 })
+  assert.deepStrictEqual(paginator.currentPages, [5, 6, 7, 8, 9, 10])
+})
+
+it('enables and notifies page changes', () => {
+  setup();
+  container.innerHTML = /* html */ `
+  <ark-paginator collection-size="100" page-size="10" 
+    displayed-pages="5" current-page="1"></ark-paginator>
+  `
+  const paginator = container.querySelector('ark-paginator')
+
+  let pageChangedEvent = null
+  paginator.addEventListener(
+    'page-changed', (event) => pageChangedEvent = event)
+
+  paginator._setCurrentPage(4)
+
+  assert.deepStrictEqual(paginator.currentPage, '4')
+  assert.ok(pageChangedEvent)
+})
+
+it('moves to the different pages', () => {
+  setup();
+  container.innerHTML = /* html */ `
+  <ark-paginator collection-size="100" page-size="10" 
+    displayed-pages="5" current-page="1"></ark-paginator>
+  `
+  const paginator = container.querySelector('ark-paginator')
 
-    expect(paginator.pageSize).toBe('12')
-    expect(paginator.collectionSize).toBe('120')
-    expect(paginator.currentPage).toBe('4')
-    expect(paginator.displayedPages).toBe('5')
-    expect(paginator.totalPages).toBe(10)
-
-    paginator.init({ collectionSize: 120, pageSize: 10 })
-    expect(paginator.totalPages).toBe(12)
-  })
-
-  it('computes the current shown pages', () => {
-    container.innerHTML = /* html */ `
-    <ark-paginator collection-size="120" page-size="12" 
-      displayed-pages="5" current-page="1"></ark-paginator>
-    `
-    const paginator = container.querySelector('ark-paginator')
-
-    expect(paginator.currentPages).toEqual([1, 2, 3, 4, 5])
-    expect(paginator.totalPages).toEqual(10)
-
-    paginator.init({ currentPage: 3 })
-    expect(paginator.currentPages).toEqual([1, 2, 3, 4, 5])
-
-    paginator.init({ currentPage: 4 })
-    expect(paginator.currentPages).toEqual([2, 3, 4, 5, 6])
-
-    paginator.init({ currentPage: 5 })
-    expect(paginator.currentPages).toEqual([3, 4, 5, 6, 7])
-
-    paginator.init({ currentPage: 7 })
-    expect(paginator.currentPages).toEqual([5, 6, 7, 8, 9])
-
-    paginator.init({ currentPage: 8 })
-    expect(paginator.currentPages).toEqual([6, 7, 8, 9, 10])
-
-    paginator.init({ currentPage: 9 })
-    expect(paginator.currentPages).toEqual([6, 7, 8, 9, 10])
-
-    paginator.init({ currentPage: 10 })
-    expect(paginator.currentPages).toEqual([6, 7, 8, 9, 10])
-
-    paginator.init({ displayedPages: 6, currentPage: 5 })
-    expect(paginator.currentPages).toEqual([2, 3, 4, 5, 6, 7])
-
-    paginator.init({ displayedPages: 6, currentPage: 7 })
-    expect(paginator.currentPages).toEqual([4, 5, 6, 7, 8, 9])
-
-    paginator.init({ displayedPages: 6, currentPage: 9 })
-    expect(paginator.currentPages).toEqual([5, 6, 7, 8, 9, 10])
-  })
-
-  it('enables and notifies page changes', () => {
-    container.innerHTML = /* html */ `
-    <ark-paginator collection-size="100" page-size="10" 
-      displayed-pages="5" current-page="1"></ark-paginator>
-    `
-    const paginator = container.querySelector('ark-paginator')
-
-    let pageChangedEvent = null
-    paginator.addEventListener(
-      'page-changed', (event) => pageChangedEvent = event)
-
-    paginator._setCurrentPage(4)
-
-    expect(paginator.currentPage).toEqual('4')
-    expect(pageChangedEvent).toBeTruthy()
-  })
-
-  it('moves to the different pages', () => {
-    container.innerHTML = /* html */ `
-    <ark-paginator collection-size="100" page-size="10" 
-      displayed-pages="5" current-page="1"></ark-paginator>
-    `
-    const paginator = container.querySelector('ark-paginator')
-
-    paginator.select('[data-page="4"]').click()
-    expect(paginator.currentPage).toEqual('4')
-
-    paginator.select('[data-page="6"]').click()
-    expect(paginator.currentPage).toEqual('6')
-
-    paginator.select('[on-click="_prev"]').click()
-    expect(paginator.currentPage).toEqual('5')
-
-    paginator.select('[on-click="_next"]').click()
-    expect(paginator.currentPage).toEqual('6')
-
-    paginator.select('[on-click="_first"]').click()
-    expect(paginator.currentPage).toEqual('1')
-
-    paginator.select('[on-click="_last"]').click()
-    expect(paginator.currentPage).toEqual('10')
-
-    paginator.select('[on-click="_next"]').click()
-    expect(paginator.currentPage).toEqual('10')
-  })
-
-  it('can be provided with custom styleable elements', () => {
-    container.innerHTML = /* html */ `
-      <ark-paginator page-size="12" displayed-pages="5">
-        <button data-first slot="first">
-          <span style="pointer-events: none">FIRST</span>
-        </button>
-        <button data-previous slot="previous">BACK</button>
-        <button data-page-general slot="page"></button>
-        <button data-next slot="next"></button>
-        <button data-last slot="last"></button>
-      </ark-paginator>
-    `
+  paginator.select('[data-page="4"]').click()
+  assert.deepStrictEqual(paginator.currentPage, '4')
+
+  paginator.select('[data-page="6"]').click()
+  assert.deepStrictEqual(paginator.currentPage, '6')
+
+  paginator.select('[on-click="_prev"]').click()
+  assert.deepStrictEqual(paginator.currentPage, '5')
+
+  paginator.select('[on-click="_next"]').click()
+  assert.deepStrictEqual(paginator.currentPage, '6')
+
+  paginator.select('[on-click="_first"]').click()
+  assert.deepStrictEqual(paginator.currentPage, '1')
+
+  paginator.select('[on-click="_last"]').click()
+  assert.deepStrictEqual(paginator.currentPage, '10')
+
+  paginator.select('[on-click="_next"]').click()
+  assert.deepStrictEqual(paginator.currentPage, '10')
+})
 
-    const paginator = container.querySelector('ark-paginator')
-
-    expect(paginator.querySelector('[data-first]').innerHTML.trim()).toEqual(
-      '<span style="pointer-events: none">FIRST</span>')
-    expect(paginator.querySelector('[data-previous]').innerHTML.trim()).toEqual(
-      'BACK')
-    expect(paginator.querySelector('[data-page-general]')).toBeTruthy()
-    expect(paginator.querySelector('[data-next]')).toBeTruthy()
-    expect(paginator.querySelector('[data-last]')).toBeTruthy()
-  })
+it('can be provided with custom styleable elements', () => {
+  setup();
+  container.innerHTML = /* html */ `
+    <ark-paginator page-size="12" displayed-pages="5">
+      <button data-first slot="first">
+        <span style="pointer-events: none">FIRST</span>
+      </button>
+      <button data-previous slot="previous">BACK</button>
+      <button data-page-general slot="page"></button>
+      <button data-next slot="next"></button>
+      <button data-last slot="last"></button>
+    </ark-paginator>
+  `
+
+  const paginator = container.querySelector('ark-paginator')
+
+  assert.deepStrictEqual(
+    paginator.querySelector('[data-first]').innerHTML.trim(),
+    '<span style="pointer-events: none">FIRST</span>'
+  )
+  assert.deepStrictEqual(paginator.querySelector('[data-previous]').innerHTML.trim(), 'BACK')
+  assert.ok(paginator.querySelector('[data-page-general]'))
+  assert.ok(paginator.querySelector('[data-next]'))
+  assert.ok(paginator.querySelector('[data-last]'))
 })

package/lib/components/paginator/index.js

@@ -1 +1,2 @@
+/** Pagination controls component. */
 export { Paginator } from './components/paginator.js'

package/lib/components/paginator/styles/index.js

@@ -1,2 +1,6 @@
 import styles from './ark.css.js'
-export default styles
+
+/** @type {string} */
+const stylesText = styles
+
+export default stylesText

package/lib/components/spinner/components/spinner.js

@@ -2,7 +2,12 @@ import { Component } from '#base/index.js'
 import styles from '../styles/index.js'
 
 const tag = 'ark-spinner'
+/**
+ * Configurable loading spinner component.
+ */
 export class Spinner extends Component {
+  /** @param {object} context
+   *  @returns {this} */
   init (context = {}) {
     this.scale = context.scale || this.scale || '1'
     this.type = context.type || this.type || 'circle'
@@ -14,6 +19,7 @@ export class Spinner extends Component {
     return ['scale', 'type']
   }
 
+  /** @returns {this} */
   render () {
     this.innerHTML = /* html */ `
       ${this.spinnerType(this.type)}
@@ -22,6 +28,8 @@ export class Spinner extends Component {
     return super.render()
   }
 
+  /** @param {string} scale
+   * @returns {void} */
   setScale (scale) {
     this.style.setProperty('transform', `scale(${scale})`)
   }
@@ -31,6 +39,8 @@ export class Spinner extends Component {
     return this.querySelector('[data-loader]')
   }
 
+  /** @param {string} type
+   * @returns {string} */
   spinnerType (type) {
     let content = ''
 

package/lib/components/spinner/components/spinner.test.js

@@ -1,50 +1,45 @@
+import { it } from 'node:test'
+import assert from 'node:assert/strict'
 import './spinner.js'
 
-describe('Spinner', () => {
-  let container = null
+let container = null
 
-  beforeEach(() => {
-    container = document.createElement('div')
-    document.body.appendChild(container)
-  })
+const setup = () => {
+  document.body.innerHTML = ''
+  container = document.createElement('div')
+  document.body.appendChild(container)
+}
 
-  afterEach(() => {
-    container.remove()
-    container = null
-  })
+it('can be instantiated', () => {
+  setup()
+  container.innerHTML = /* html */ `
+    <ark-spinner></ark-spinner>
+  `
+  const spinner = container.querySelector('ark-spinner')
 
-  it('can be instantiated', () => {
-    container.innerHTML = /* html */ `
-      <ark-spinner></ark-spinner>
-    `
-    const spinner = container.querySelector('ark-spinner')
-
-    expect(spinner).toBeTruthy
-    expect(spinner).toBe(spinner.init())
-  })
-
-  it('Different types of spinner can be used', () => {
-    container.innerHTML = /* html */ `
-      <ark-spinner type="chase"></ark-spinner>
-      <ark-spinner type="rect"></ark-spinner>
-      <ark-spinner type="loader"></ark-spinner>
-      <ark-spinner type="bounce"></ark-spinner>
-    `
-    const spinner = container.querySelector('ark-spinner')
-    const loader = spinner.loader
+  assert.ok(spinner)
+  assert.strictEqual(spinner, spinner.init())
+})
 
-    expect(spinner.loader).toBeCalled
-  })
+it('Different types of spinner can be used', () => {
+  setup()
+  container.innerHTML = /* html */ `
+    <ark-spinner type="chase"></ark-spinner>
+    <ark-spinner type="rect"></ark-spinner>
+    <ark-spinner type="loader"></ark-spinner>
+    <ark-spinner type="bounce"></ark-spinner>
+  `
+  const spinner = container.querySelector('ark-spinner')
+  assert.ok(spinner.loader)
+})
 
-  it('Can set the scale of the spinner', () => {
-    container.innerHTML = /* html */ `
-      <ark-spinner scale="2.5" type="chase"></ark-spinner>
-    `
-    const spinner = container.querySelector('ark-spinner')
+it('Can set the scale of the spinner', () => {
+  setup()
+  container.innerHTML = /* html */ `
+    <ark-spinner scale="2.5" type="chase"></ark-spinner>
+  `
+  const spinner = container.querySelector('ark-spinner')
 
-    expect(spinner.loader).toBeCalled
-    expect(spinner.style.transform.split(')')[0].split('(')[1]).toBe(
-      spinner.scale
-    )
-  })
+  assert.ok(spinner.loader)
+  assert.strictEqual(spinner.style.transform.split(')')[0].split('(')[1], spinner.scale)
 })

package/lib/components/spinner/index.js

@@ -1 +1,2 @@
+/** Loading indicator component. */
 export { Spinner } from './components/spinner.js'

package/lib/components/spinner/styles/index.js

@@ -1,2 +1,6 @@
 import styles from './ark.css.js'
-export default styles
+
+/** @type {string} */
+const stylesText = styles
+
+export default stylesText

package/lib/components/splitview/components/splitview.detail.js

@@ -1,6 +1,9 @@
 import { Component } from "#base/index.js"
 
 const tag = 'ark-splitview-detail'
+/**
+ * Detail slot wrapper for split-view component.
+ */
 export class SplitViewDetail extends Component {
   constructor () {
     super()
@@ -8,6 +11,8 @@ export class SplitViewDetail extends Component {
       'close', this.onClose.bind(this))
   }
 
+  /** @param {object} context
+   *  @returns {this} */
   init (context = {}) {
     this.binding = 'splitview-detail-listen'
 
@@ -22,6 +27,7 @@ export class SplitViewDetail extends Component {
     return super.init(context)
   }
 
+  /** @returns {this} */
   render () {
     this.content = ''
     this.append(this.main)
@@ -29,16 +35,19 @@ export class SplitViewDetail extends Component {
     return super.render()
   }
 
-  /** @param {Event} event */
+  /** @param {Event} event
+   * @returns {void} */
   onClose (event) {
     event.stopPropagation()
     this.hide()
   }
 
+  /** @returns {void} */
   show () {
     this.removeAttribute('hidden')
   }
 
+  /** @returns {void} */
   hide () {
     this.setAttribute('hidden', '')
   }