@knowark/componarkjs 1.13.4 → 1.14.0

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/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/splitview/components/splitview.detail.test.js

@@ -1,3 +1,5 @@
+import { it } from 'node:test';
+import assert from 'node:assert/strict';
 import { Component } from '#base/index.js'
 import './splitview.detail.js'
 
@@ -18,77 +20,77 @@ class MockMain extends Component {
 }
 Component.define('mock-main', MockMain)
 
-describe('SplitViewDetail', () => {
-  let container = null
-  beforeEach(() => {
-    container = document.createElement('div')
-    document.body.appendChild(container)
-  })
-
-  afterEach(() => {
-    container.remove()
-    container = null
-  })
-
-  it('can be instantiated', () => {
-    container.innerHTML = `
-    <ark-splitview-detail>
-    </ark-splitview-detail>
-    `
-    const detail = container.querySelector('ark-splitview-detail')
-    expect(detail).toBeTruthy()
-
-    expect(detail).toBe(detail.init())
-  })
-
-  it('can be instantiated with an inner main Component', () => {
-    container.innerHTML = /* html */`
-    <ark-splitview-detail>
-      <mock-main>MAIN CONTENT</mock-main>
-    </ark-splitview-detail>
-    `
-    const detail = container.querySelector('ark-splitview-detail')
-
-    expect(detail.firstElementChild.textContent).toEqual('MAIN CONTENT')
-  })
-
-  it('can initialize its main Component', () => {
-    container.innerHTML = /* html */`
-    <ark-splitview-detail>
-      <mock-main></mock-main>
-    </ark-splitview-detail>
-    `
-    const detail = container.querySelector('ark-splitview-detail')
-
-    detail.init({ name: 'Servagro' }).render()
-
-    expect(detail.firstElementChild.textContent).toEqual('Servagro')
-  })
-
-  it('can manipulate its hidden attribute', () => {
-    container.innerHTML = /* html */`
-    <ark-splitview-detail>
-      <mock-main></mock-main>
-    </ark-splitview-detail>
-    `
-    const detail = container.querySelector('ark-splitview-detail')
-
-    detail.show()
-    expect(detail.hasAttribute('hidden')).toBeFalsy()
-
-    detail.hide()
-    expect(detail.hasAttribute('hidden')).toBeTruthy()
-  })
-
-  it('listens to close events to hide itself', () => {
-    container.innerHTML = /* html */`
-    <ark-splitview-detail>
-      <mock-main></mock-main>
-    </ark-splitview-detail>
-    `
-    const detail = container.querySelector('ark-splitview-detail')
-    detail.dispatchEvent(new Event('close'))
-
-    expect(detail.hasAttribute('hidden')).toBeTruthy()
-  })
+let container = null
+
+const setup = () => {
+  document.body.innerHTML = '';
+  container = document.createElement('div')
+  document.body.appendChild(container)
+};
+
+it('can be instantiated', () => {
+  setup();
+  container.innerHTML = `
+  <ark-splitview-detail>
+  </ark-splitview-detail>
+  `
+  const detail = container.querySelector('ark-splitview-detail')
+  assert.ok(detail)
+
+  assert.strictEqual(detail, detail.init())
+})
+
+it('can be instantiated with an inner main Component', () => {
+  setup();
+  container.innerHTML = /* html */`
+  <ark-splitview-detail>
+    <mock-main>MAIN CONTENT</mock-main>
+  </ark-splitview-detail>
+  `
+  const detail = container.querySelector('ark-splitview-detail')
+
+  assert.deepStrictEqual(detail.firstElementChild.textContent, 'MAIN CONTENT')
+})
+
+it('can initialize its main Component', () => {
+  setup();
+  container.innerHTML = /* html */`
+  <ark-splitview-detail>
+    <mock-main></mock-main>
+  </ark-splitview-detail>
+  `
+  const detail = container.querySelector('ark-splitview-detail')
+
+  detail.init({ name: 'Servagro' }).render()
+
+  assert.deepStrictEqual(detail.firstElementChild.textContent, 'Servagro')
+})
+
+it('can manipulate its hidden attribute', () => {
+  setup();
+  container.innerHTML = /* html */`
+  <ark-splitview-detail>
+    <mock-main></mock-main>
+  </ark-splitview-detail>
+  `
+  const detail = container.querySelector('ark-splitview-detail')
+
+  detail.show()
+  assert.ok(!detail.hasAttribute('hidden'))
+
+  detail.hide()
+  assert.ok(detail.hasAttribute('hidden'))
+})
+
+it('listens to close events to hide itself', () => {
+  setup();
+  container.innerHTML = /* html */`
+  <ark-splitview-detail>
+    <mock-main></mock-main>
+  </ark-splitview-detail>
+  `
+  const detail = container.querySelector('ark-splitview-detail')
+  detail.dispatchEvent(new Event('close'))
+
+  assert.ok(detail.hasAttribute('hidden'))
 })

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

@@ -7,13 +7,44 @@ export class SplitView extends Component {
   constructor () {
     super()
     this.binding = 'splitview-listen'
-    this.setDimensions()
-    globalThis.addEventListener('resize', this.setDimensions.bind(this))
+    this._onResize = this.setDimensions.bind(this)
+    this._onMasterChange = this.onMasterChange.bind(this)
+    this._master = null
   }
 
   setDimensions () {
-    this.style.setProperty('--inner-height', `${innerHeight}px`)
-    this.style.setProperty('--inner-width', `${innerWidth}px`)
+    if (typeof globalThis.innerHeight !== 'number') return
+    if (typeof globalThis.innerWidth !== 'number') return
+
+    this.style.setProperty('--inner-height', `${globalThis.innerHeight}px`)
+    this.style.setProperty('--inner-width', `${globalThis.innerWidth}px`)
+  }
+
+  connectedCallback () {
+    this.setDimensions()
+    globalThis.addEventListener('resize', this._onResize)
+    super.connectedCallback()
+  }
+
+  disconnectedCallback () {
+    globalThis.removeEventListener('resize', this._onResize)
+    this._removeMasterListener()
+    super.disconnectedCallback()
+  }
+
+  _setMasterListener () {
+    const master = this.master
+    if (master === this._master) return
+
+    this._removeMasterListener()
+    this._master = master
+    this._master?.addEventListener('master-change', this._onMasterChange)
+  }
+
+  _removeMasterListener () {
+    if (!this._master) return
+    this._master.removeEventListener('master-change', this._onMasterChange)
+    this._master = null
   }
 
   get master () {
@@ -26,10 +57,7 @@ export class SplitView extends Component {
 
   render () {
     this.renderDetail()
-    if (this.master) {
-      this.master.addEventListener(
-        'master-change', this.onMasterChange.bind(this))
-    }
+    this._setMasterListener()
     return super.render()
   }
 

package/lib/components/splitview/components/splitview.master.js

@@ -4,9 +4,9 @@ const tag = 'ark-splitview-master'
 export class SplitViewMaster extends Component {
   constructor () {
     super()
+    this._onMasterEvent = this.onMasterEvent.bind(this)
+    this._boundMasterEvent = null
     this.masterEvent = this.masterEvent
-    this.addEventListener(
-      this.masterEvent, this.onMasterEvent.bind(this))
   }
 
   init (context = {}) {
@@ -18,6 +18,31 @@ export class SplitViewMaster extends Component {
     return ['masterEvent']
   }
 
+  connectedCallback () {
+    this._syncMasterEventListener()
+    super.connectedCallback()
+  }
+
+  disconnectedCallback () {
+    this._removeMasterEventListener()
+    super.disconnectedCallback()
+  }
+
+  _syncMasterEventListener () {
+    const masterEvent = (this.masterEvent || '').trim()
+    if (!masterEvent || masterEvent === this._boundMasterEvent) return
+
+    this._removeMasterEventListener()
+    this.addEventListener(masterEvent, this._onMasterEvent)
+    this._boundMasterEvent = masterEvent
+  }
+
+  _removeMasterEventListener () {
+    if (!this._boundMasterEvent) return
+    this.removeEventListener(this._boundMasterEvent, this._onMasterEvent)
+    this._boundMasterEvent = null
+  }
+
   /** @param {CustomEvent} event */
   onMasterEvent (event) {
     event.stopPropagation()