@knowark/componarkjs 1.7.3

package/lib/components/list/components/list.test.js

@@ -0,0 +1,267 @@
+import './list.js'
+
+describe('List', () => {
+  let container = null
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    container.remove()
+    container = null
+  })
+  
+  it('can be instantiated', () => {
+    container.innerHTML = `
+    <ark-list></ark-list>
+    `
+
+    const list = container.querySelector('ark-list')
+    expect(list).toEqual(list.init())
+    
+  })
+  
+  it('can be instantiated with items', async () => {
+    container.innerHTML = `
+    <ark-list></ark-list>
+    `
+    
+    const list =  container.querySelector('ark-list')
+    list.source =  ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+    list.render()
+      
+    const items = list.selectAll('ark-list-item')
+
+    expect(items.length).toEqual(4)
+    expect(items[0].textContent.trim()).toEqual('Colombia')
+    expect(items[1].textContent.trim()).toEqual('Uruguay')
+    expect(items[2].textContent.trim()).toEqual('Brasil')
+    expect(items[3].textContent.trim()).toEqual('Perú')
+  })
+
+  it('can be instantiated with items click-disabled', () => {
+    expect.assertions(5)
+    container.innerHTML = `
+    <ark-list click-disabled></ark-list
+    `
+
+    const list = container.querySelector('ark-list')
+    list.source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+    list.render()
+    const items = list.selectAll('ark-list-item')
+    
+    expect(items.length).toEqual(4)
+    expect(items[0].textContent.trim()).toEqual('Colombia')
+    expect(items[1].textContent.trim()).toEqual('Uruguay')
+    expect(items[2].textContent.trim()).toEqual('Brasil')
+    expect(items[3].textContent.trim()).toEqual('Perú')
+
+    list.addEventListener('list-selected', event => {
+      expect(true).toBe(false) // never reached
+    })
+    items[0].click()
+  })
+  
+  it('can delete', async () => {
+    container.innerHTML = `
+    <ark-list click-disabled></ark-list
+    `
+  
+    const list = container.querySelector('ark-list')
+    list.source =  ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+    list.render()
+
+    list.delete(1)
+    let items = list.selectAll('ark-list-item')
+    expect(items.length).toEqual(3)
+    expect(items[1].textContent.trim()).toEqual('Brasil')
+
+    list.delete(0, 2)
+    items = list.selectAll('ark-list-item')
+    expect(items.length).toEqual(1)
+    expect(items[0].textContent.trim()).toEqual('Perú')
+  })
+
+
+  it('can select an item when it is clicked', (done) => {
+    expect.assertions(2)
+    container.innerHTML = `
+    <ark-list></ark-list
+    `
+    
+    const list = container.querySelector('ark-list')
+    list.source =  ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+    list.render()
+
+    const items = list.selectAll('ark-list-item')
+    expect(items.length).toEqual(4)
+
+    list.addEventListener('list-selected', event => {
+      expect(event['detail'].data).toEqual('Brasil')
+      done()
+    })
+
+    items[2].click()
+  })
+
+  it('can be declaratively instantiated with JSON source', async () => {
+    const source =  ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+
+    container.innerHTML = `
+    <ark-list>
+      <data>${JSON.stringify(source)}</data>
+    </ark-list>
+    `
+    
+    const list = container.querySelector('ark-list')
+      
+    const items = list.selectAll('ark-list-item')
+
+    expect(items.length).toEqual(4)
+    expect(items[0].textContent.trim()).toEqual('Colombia')
+    expect(items[1].textContent.trim()).toEqual('Uruguay')
+    expect(items[2].textContent.trim()).toEqual('Brasil')
+    expect(items[3].textContent.trim()).toEqual('Perú')
+  })
+
+  it('can be provided with a list item template', async () => {
+    const source =  [
+      { name: 'Colombia', code: 'CO' },
+      { name: 'Uruguay', code: 'UY' },
+      { name: 'Brasil', code: 'BR' },
+      { name: 'Perú', code: 'PE' },
+    ]
+
+    container.innerHTML = `
+    <ark-list>
+      <data hidden>${JSON.stringify(source)}</data>
+      <template>
+        <dl>
+          <div>
+            <dt>Name</dt>
+            <dd>\${this.name}</dd>
+          </div>
+          <div>
+            <dt>Code</dt>
+            <dd>\${this.code}</dd>
+          </div>
+        </dl>
+      </template>
+    </ark-list>
+    `
+    
+    const list = container.querySelector('ark-list')
+      
+    const items = list.selectAll('ark-list-item')
+
+    expect(items.length).toEqual(4)
+    expect(items[0].innerHTML.replace(/\s/g, '')).toEqual(
+      '<dl><div><dt>Name</dt><dd>Colombia</dd></div>' +
+      '<div><dt>Code</dt><dd>CO</dd></div></dl>')
+    expect(items[1].innerHTML.replace(/\s/g, '')).toEqual(
+      '<dl><div><dt>Name</dt><dd>Uruguay</dd></div>' +
+      '<div><dt>Code</dt><dd>UY</dd></div></dl>')
+    expect(items[2].innerHTML.replace(/\s/g, '')).toEqual(
+      '<dl><div><dt>Name</dt><dd>Brasil</dd></div>' +
+      '<div><dt>Code</dt><dd>BR</dd></div></dl>')
+    expect(items[3].innerHTML.replace(/\s/g, '')).toEqual(
+      '<dl><div><dt>Name</dt><dd>Perú</dd></div>' +
+      '<div><dt>Code</dt><dd>PE</dd></div></dl>')
+  })
+
+  it('can be render simple lists with an item template', async () => {
+    const source =  ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+
+    container.innerHTML = `
+    <ark-list>
+      <data hidden>${JSON.stringify(source)}</data>
+      <template>
+        <span><strong>\${this}</strong></span>
+      </template>
+    </ark-list>
+    `
+    
+    const list = container.querySelector('ark-list')
+      
+    const items = list.selectAll('ark-list-item')
+
+    expect(items.length).toEqual(4)
+    expect(items[0].innerHTML.replace(/\s/g, '')).toEqual(
+      '<span><strong>Colombia</strong></span>')
+    expect(items[1].innerHTML.replace(/\s/g, '')).toEqual(
+      '<span><strong>Uruguay</strong></span>')
+    expect(items[2].innerHTML.replace(/\s/g, '')).toEqual(
+      '<span><strong>Brasil</strong></span>')
+    expect(items[3].innerHTML.replace(/\s/g, '')).toEqual(
+      '<span><strong>Perú</strong></span>')
+  })
+
+  it('can be rendered again given a new array through init', async () => {
+    let source =  ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+    container.innerHTML = `
+    <ark-list>
+      <data hidden>${JSON.stringify(source)}</data>
+      <template>
+        <span><strong>\${this}</strong></span>
+      </template>
+    </ark-list>
+    `
+    const list = container.querySelector('ark-list')
+    let items = list.selectAll('ark-list-item')
+    expect(items.length).toEqual(4)
+    expect(items[0].innerHTML.replace(/\s/g, '')).toEqual(
+      '<span><strong>Colombia</strong></span>')
+    expect(items[1].innerHTML.replace(/\s/g, '')).toEqual(
+      '<span><strong>Uruguay</strong></span>')
+    expect(items[2].innerHTML.replace(/\s/g, '')).toEqual(
+      '<span><strong>Brasil</strong></span>')
+    expect(items[3].innerHTML.replace(/\s/g, '')).toEqual(
+      '<span><strong>Perú</strong></span>')
+
+    source =  ['Ecuador', 'Panama', 'Venezuela', 'USA']
+    list.init({ source }).render()
+    items = list.selectAll('ark-list-item')
+
+    expect(items.length).toEqual(4)
+    expect(items[0].innerHTML.replace(/\s/g, '')).toEqual(
+      '<span><strong>Ecuador</strong></span>')
+    expect(items[1].innerHTML.replace(/\s/g, '')).toEqual(
+      '<span><strong>Panama</strong></span>')
+    expect(items[2].innerHTML.replace(/\s/g, '')).toEqual(
+      '<span><strong>Venezuela</strong></span>')
+    expect(items[3].innerHTML.replace(/\s/g, '')).toEqual(
+      '<span><strong>USA</strong></span>')
+  })
+
+  it('listens to delete events to remove its items', () => {
+    let source =  ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+    container.innerHTML = `
+    <ark-list>
+      <data hidden>${JSON.stringify(source)}</data>
+      <template>
+        <span>
+          <strong>\${this}</strong></span>
+          <button data-\${this} onclick="this.dispatchEvent(
+            new CustomEvent('delete', { bubbles: true }))">
+            DELETE
+          </button>
+      </template>
+    </ark-list>
+    `
+    const list = container.querySelector('ark-list')
+    let button = list.querySelector('[data-colombia]')
+
+    let items = list.selectAll('ark-list-item')
+    expect(items.length).toEqual(4)
+
+    button.click()
+
+    button = list.querySelector('[data-colombia]')
+    items = list.selectAll('ark-list-item')
+  
+    expect(items.length).toEqual(3)
+    expect(button).toBeNull()
+  })
+})

package/lib/components/list/index.js

@@ -0,0 +1,2 @@
+export { ListItem } from './components/list.item.js'
+export { List } from './components/list.js'

package/lib/components/paginator/README.md

@@ -0,0 +1,32 @@
+PAGINATOR
+---------
+
+The ``ark-paginator`` component allows the user to select a specific page from a range of pages.
+   
+
+Examples
+--------
+
+**This component needs to initialize with** ``collectionSize`` **and** ``pageSize`` **properties to display the button and pages needed**
+        
+``` javascript
+const paginator = this.select('ark-paginator')
+paginator.init({ collectionSize: 4, pageSize: 1 }).render()
+```
+
+**The** ``ark-paginator`` **component receive an** ``on-page-change`` **event that points to the data that's going to be displayed**  
+        
+``` html
+    <ark-paginator listen on-page-change="updateList"></ark-paginator>
+```        
+
+Properties
+----------
+
+|     Component     |      Name      |  Type  | Default |                   Description                   |
+| :---------------: | :------------: | :----: | :-----: | :---------------------------------------------: |
+| ``ark-paginator`` |    pageSize    | number |  null   |      Number of pages displayed in one page      |
+| ``ark-paginator`` | collectionSize | number |  null   | Defines a range of pages in a number of buttons |
+| ``ark-paginator`` |  currentPage   | number |  null   |            Selects an specific page             |
+
+

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

@@ -0,0 +1,110 @@
+import { Component } from '../../../base/component/index.js'
+import styles from '../styles/index.js'
+
+const tag = 'ark-paginator'
+export class Paginator extends Component {
+  init (context = {}) {
+    this.binding = 'paginator-listen'
+    this.collectionSize = (
+      context.collectionSize || this.collectionSize || '120')
+    this.pageSize = context.pageSize || this.pageSize || '24'
+    this.currentPage = context.currentPage || this.currentPage || '1'
+    this.displayedPages = (
+      context.displayedPages || this.displayedPages || '12')
+
+    this.global = context.global || window
+
+    return super.init()
+  }
+
+  reflectedProperties () {
+    return ['collectionSize', 'pageSize', 'displayedPages', 'currentPage']
+  }
+
+  render () {
+    this.content = /* html */ `
+      <div class="ark-paginator__body">
+        <div class="ark-paginator__buttons">
+          <button paginator-listen on-click="_first">&#60;&#60;</button>
+          <button paginator-listen on-click="_prev">&#60;</button>
+        </div>
+
+        <div paginator-listen on-click="_move" class="ark-paginator__pages">
+          ${this.currentPages.map((page) => (
+          `<button ${page == this.currentPage ? 'active' : ''} 
+            data-page="${page}">${page}</button>`)). join('')}
+        </div>
+
+        <div class="ark-paginator__buttons">
+          <button paginator-listen on-click="_next">&#62;</button>
+          <button paginator-listen on-click="_last">&#62;&#62;</button>
+        </div>
+      </div>
+    `
+
+    return super.render()
+  }
+
+  get totalPages () {
+    return Math.ceil(this.collectionSize / this.pageSize)
+  }
+
+  get currentPages () {
+    const displayedPages = Math.min(
+      parseInt(this.displayedPages), this.totalPages)
+    const currentPage = parseInt(this.currentPage)
+    let startPage = Math.max(currentPage - Math.trunc(displayedPages / 2), 1)
+    startPage = Math.min(1 + this.totalPages - displayedPages, startPage)
+
+    return Array.from({length: displayedPages}, (_, i) => i + startPage)
+  }
+
+  _notifyChange () {
+    const page = parseInt(this.currentPage)
+    const limit = parseInt(this.pageSize)
+    const offset = (page - 1) * limit
+    this.emit('page-changed', { page, limit, offset })
+  }
+
+  /** @param {number} currentPage */
+  _setCurrentPage (currentPage) {
+    if (currentPage > 0 && currentPage <= this.totalPages) {
+      this.currentPage = currentPage
+      this.render()
+      this._notifyChange()
+    }
+  }
+
+  /** @param {Event} event */
+  _first (event) {
+    event.stopPropagation()
+    this._setCurrentPage(1)
+  }
+
+  /** @param {Event} event */
+  _prev (event) {
+    event.stopPropagation()
+    this._setCurrentPage(parseInt(this.currentPage) - 1)
+  }
+
+  /** @param {Event} event */
+  _move (event) {
+    event.stopPropagation()
+    const page = parseInt(event.target.dataset.page)
+    this._setCurrentPage(page)
+  }
+
+  /** @param {Event} event */
+  _next (event) {
+    event.stopPropagation()
+    this._setCurrentPage(parseInt(this.currentPage) + 1)
+  }
+
+  /** @param {Event} event */
+  _last (event) {
+    event.stopPropagation()
+    this._setCurrentPage(this.totalPages)
+  }
+}
+
+Component.define(tag, Paginator, styles)

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

@@ -0,0 +1,131 @@
+import { Paginator } from './paginator.js'
+
+describe('Paginator', () => {
+  let container = null
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    container.remove()
+    container = null
+  })
+
+  it('can be instantiated',()=>{
+    container.innerHTML = /* html */ `
+      <ark-paginator></ark-paginator>
+    `
+    const paginator = container.querySelector('ark-paginator')
+
+    expect(paginator).toBe(paginator.init())
+  })
+
+
+  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})
+
+    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')
+
+  })
+})

package/lib/components/paginator/index.js

@@ -0,0 +1 @@
+export { Paginator } from './components/paginator.js'