@knowark/componarkjs 1.7.3 → 1.7.5

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

@@ -12,7 +12,7 @@ describe('List', () => {
     container.remove()
     container = null
   })
-  
+
   it('can be instantiated', () => {
     container.innerHTML = `
     <ark-list></ark-list>
@@ -20,18 +20,17 @@ describe('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ú']
+
+    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)
@@ -51,7 +50,7 @@ describe('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')
@@ -63,14 +62,14 @@ describe('List', () => {
     })
     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.source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
     list.render()
 
     list.delete(1)
@@ -84,22 +83,21 @@ describe('List', () => {
     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.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')
+      expect(event.detail.data).toEqual('Brasil')
       done()
     })
 
@@ -107,16 +105,16 @@ describe('List', () => {
   })
 
   it('can be declaratively instantiated with JSON source', async () => {
-    const source =  ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+    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)
@@ -127,11 +125,11 @@ describe('List', () => {
   })
 
   it('can be provided with a list item template', async () => {
-    const source =  [
+    const source = [
       { name: 'Colombia', code: 'CO' },
       { name: 'Uruguay', code: 'UY' },
       { name: 'Brasil', code: 'BR' },
-      { name: 'Perú', code: 'PE' },
+      { name: 'Perú', code: 'PE' }
     ]
 
     container.innerHTML = `
@@ -151,9 +149,9 @@ describe('List', () => {
       </template>
     </ark-list>
     `
-    
+
     const list = container.querySelector('ark-list')
-      
+
     const items = list.selectAll('ark-list-item')
 
     expect(items.length).toEqual(4)
@@ -172,7 +170,7 @@ describe('List', () => {
   })
 
   it('can be render simple lists with an item template', async () => {
-    const source =  ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+    const source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
 
     container.innerHTML = `
     <ark-list>
@@ -182,9 +180,9 @@ describe('List', () => {
       </template>
     </ark-list>
     `
-    
+
     const list = container.querySelector('ark-list')
-      
+
     const items = list.selectAll('ark-list-item')
 
     expect(items.length).toEqual(4)
@@ -199,7 +197,7 @@ describe('List', () => {
   })
 
   it('can be rendered again given a new array through init', async () => {
-    let source =  ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+    let source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
     container.innerHTML = `
     <ark-list>
       <data hidden>${JSON.stringify(source)}</data>
@@ -220,7 +218,7 @@ describe('List', () => {
     expect(items[3].innerHTML.replace(/\s/g, '')).toEqual(
       '<span><strong>Perú</strong></span>')
 
-    source =  ['Ecuador', 'Panama', 'Venezuela', 'USA']
+    source = ['Ecuador', 'Panama', 'Venezuela', 'USA']
     list.init({ source }).render()
     items = list.selectAll('ark-list-item')
 
@@ -236,7 +234,7 @@ describe('List', () => {
   })
 
   it('listens to delete events to remove its items', () => {
-    let source =  ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+    const source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
     container.innerHTML = `
     <ark-list>
       <data hidden>${JSON.stringify(source)}</data>
@@ -260,7 +258,7 @@ describe('List', () => {
 
     button = list.querySelector('[data-colombia]')
     items = list.selectAll('ark-list-item')
-  
+
     expect(items.length).toEqual(3)
     expect(button).toBeNull()
   })

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

@@ -32,7 +32,7 @@ export class Paginator extends Component {
         <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('')}
+            data-page="${page}">${page}</button>`)).join('')}
         </div>
 
         <div class="ark-paginator__buttons">
@@ -56,7 +56,7 @@ export class Paginator extends Component {
     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)
+    return Array.from({ length: displayedPages }, (_, i) => i + startPage)
   }
 
   _notifyChange () {

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

@@ -13,7 +13,7 @@ describe('Paginator', () => {
     container = null
   })
 
-  it('can be instantiated',()=>{
+  it('can be instantiated', () => {
     container.innerHTML = /* html */ `
       <ark-paginator></ark-paginator>
     `
@@ -22,21 +22,20 @@ describe('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})
+    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})
+
+    paginator.init({ collectionSize: 120, pageSize: 10 })
     expect(paginator.totalPages).toBe(12)
   })
 
@@ -50,38 +49,37 @@ describe('Paginator', () => {
     expect(paginator.currentPages).toEqual([1, 2, 3, 4, 5])
     expect(paginator.totalPages).toEqual(10)
 
-    paginator.init({currentPage: 3})
+    paginator.init({ currentPage: 3 })
     expect(paginator.currentPages).toEqual([1, 2, 3, 4, 5])
 
-    paginator.init({currentPage: 4})
+    paginator.init({ currentPage: 4 })
     expect(paginator.currentPages).toEqual([2, 3, 4, 5, 6])
 
-    paginator.init({currentPage: 5})
+    paginator.init({ currentPage: 5 })
     expect(paginator.currentPages).toEqual([3, 4, 5, 6, 7])
 
-    paginator.init({currentPage: 7})
+    paginator.init({ currentPage: 7 })
     expect(paginator.currentPages).toEqual([5, 6, 7, 8, 9])
 
-    paginator.init({currentPage: 8})
+    paginator.init({ currentPage: 8 })
     expect(paginator.currentPages).toEqual([6, 7, 8, 9, 10])
 
-    paginator.init({currentPage: 9})
+    paginator.init({ currentPage: 9 })
     expect(paginator.currentPages).toEqual([6, 7, 8, 9, 10])
 
-    paginator.init({currentPage: 10})
+    paginator.init({ currentPage: 10 })
     expect(paginator.currentPages).toEqual([6, 7, 8, 9, 10])
 
-    paginator.init({displayedPages: 6, currentPage: 5})
+    paginator.init({ displayedPages: 6, currentPage: 5 })
     expect(paginator.currentPages).toEqual([2, 3, 4, 5, 6, 7])
 
-    paginator.init({displayedPages: 6, currentPage: 7})
+    paginator.init({ displayedPages: 6, currentPage: 7 })
     expect(paginator.currentPages).toEqual([4, 5, 6, 7, 8, 9])
 
-    paginator.init({displayedPages: 6, currentPage: 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" 
@@ -120,12 +118,11 @@ describe('Paginator', () => {
 
     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/styles/ark.css.js

@@ -193,4 +193,4 @@ const css = String.raw; export default css`
   .ark-paginator__pages button:hover {
     transform: scale(1.05);
   }
-`
+`

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

@@ -1,20 +1,20 @@
-import { Component } from "../../../base/component/index.js"
-import styles from "../styles/index.js"
+import { Component } from '../../../base/component/index.js'
+import styles from '../styles/index.js'
 
-const tag = "ark-spinner"
+const tag = 'ark-spinner'
 export class Spinner extends Component {
-  init(context = {}) {
-    this.scale = context.scale || this.scale || "1"
-    this.type = context.type || this.type || "circle"
+  init (context = {}) {
+    this.scale = context.scale || this.scale || '1'
+    this.type = context.type || this.type || 'circle'
 
     return super.init()
   }
 
-  reflectedProperties() {
-    return ["scale", "type"]
+  reflectedProperties () {
+    return ['scale', 'type']
   }
 
-  render() {
+  render () {
     this.innerHTML = /* html */ `
       ${this.spinnerType(this.type)}
     `
@@ -22,20 +22,20 @@ export class Spinner extends Component {
     return super.render()
   }
 
-  setScale(scale) {
+  setScale (scale) {
     this.style.setProperty('transform', `scale(${scale})`)
   }
 
   /** @returns {HTMLElement} */
-  get loader() {
-    return this.querySelector("[data-loader]")
+  get loader () {
+    return this.querySelector('[data-loader]')
   }
 
-  spinnerType(type) {
-    let content = ""
+  spinnerType (type) {
+    let content = ''
 
     if (type === 'circle') {
-      content = /*html*/ `
+      content = /* html */ `
       <div data-loader class="sk-fading-circle">
         <div class="sk-circle1 sk-circle"></div>
         <div class="sk-circle2 sk-circle"></div>
@@ -52,7 +52,7 @@ export class Spinner extends Component {
       </div> 
       `
     } else if (type === 'chase') {
-      content = /*html*/ `
+      content = /* html */ `
       <div data-loader class="sk-chase">
         <div class="sk-chase-dot"></div>
         <div class="sk-chase-dot"></div>
@@ -63,7 +63,7 @@ export class Spinner extends Component {
       </div>
       `
     } else if (type === 'rect') {
-      content = /*html*/ `
+      content = /* html */ `
       <div data-loader class="spinner">
         <div class="rect1"></div>
         <div class="rect2"></div>

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

@@ -1,2 +1,2 @@
 import styles from './ark.css.js'
-export default styles
+export default styles

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

@@ -2,16 +2,16 @@ import { Component } from '../../../base/component/index.js'
 
 const tag = 'ark-splitview-detail'
 export class SplitViewDetail extends Component {
-  constructor() {
+  constructor () {
     super()
     this.addEventListener(
       'close', this.onClose.bind(this))
   }
 
-  init(context = {}) {
+  init (context = {}) {
     this.binding = 'splitview-detail-listen'
 
-    const [main] = this.slots['general']
+    const [main] = this.slots.general
 
     this.main = this.main || main
 

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

@@ -1,25 +1,25 @@
-import { Component } from "base/component"
-import "./splitview.detail.js"
+import { Component } from 'base/component'
+import './splitview.detail.js'
 
 class MockMain extends Component {
-  init(context = {}) {
+  init (context = {}) {
     this.name = this.name || context.name || null
     return super.init(context)
   }
 
-  render() {
+  render () {
     if (this.name) {
       this.content = `${this.name}`
     }
     return super.render()
   }
 }
-Component.define("mock-main", MockMain)
+Component.define('mock-main', MockMain)
 
-describe("SplitViewDetail", () => {
+describe('SplitViewDetail', () => {
   let container = null
   beforeEach(() => {
-    container = document.createElement("div")
+    container = document.createElement('div')
     document.body.appendChild(container)
   })
 
@@ -28,63 +28,63 @@ describe("SplitViewDetail", () => {
     container = null
   })
 
-  it("can be instantiated", () => {
+  it('can be instantiated', () => {
     container.innerHTML = `
     <ark-splitview-detail>
     </ark-splitview-detail>
     `
-    const detail = container.querySelector("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 */`
+  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")
+    const detail = container.querySelector('ark-splitview-detail')
 
-    expect(detail.firstElementChild.textContent).toEqual("MAIN CONTENT")
+    expect(detail.firstElementChild.textContent).toEqual('MAIN CONTENT')
   })
 
-  it("can initialize its main Component", () => {
+  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")
+    const detail = container.querySelector('ark-splitview-detail')
 
-    detail.init({ name: "Servagro" }).render()
+    detail.init({ name: 'Servagro' }).render()
 
-    expect(detail.firstElementChild.textContent).toEqual("Servagro")
+    expect(detail.firstElementChild.textContent).toEqual('Servagro')
   })
 
-  it("can manipulate its hidden attribute", () => {
+  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")
+    const detail = container.querySelector('ark-splitview-detail')
 
     detail.show()
-    expect(detail.hasAttribute("hidden")).toBeFalsy()
+    expect(detail.hasAttribute('hidden')).toBeFalsy()
 
     detail.hide()
-    expect(detail.hasAttribute("hidden")).toBeTruthy()
+    expect(detail.hasAttribute('hidden')).toBeTruthy()
   })
 
-  it("listens to close events to hide itself", () => {
+  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")
+    const detail = container.querySelector('ark-splitview-detail')
     detail.dispatchEvent(new Event('close'))
 
     expect(detail.hasAttribute('hidden')).toBeTruthy()

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

@@ -2,14 +2,14 @@ import { Component, css } from '../../../base/component/index.js'
 
 const tag = 'ark-splitview'
 export class SplitView extends Component {
-  constructor() {
+  constructor () {
     super()
     this.binding = 'splitview-listen'
     this.setDimensions()
     globalThis.addEventListener('resize', this.setDimensions.bind(this))
   }
 
-  setDimensions() {
+  setDimensions () {
     this.style.setProperty('--inner-height', `${innerHeight}px`)
     this.style.setProperty('--inner-width', `${innerWidth}px`)
   }
@@ -44,7 +44,7 @@ export class SplitView extends Component {
 
     const context = event.detail
     this.renderDetail(context)
-    this.detail["show"]()
+    this.detail.show()
 
     this.emit('detail-change', context)
   }

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

@@ -5,10 +5,10 @@ export class SplitViewMaster extends Component {
   constructor () {
     super()
     this.addEventListener(
-      this['masterEvent'], this.onMasterEvent.bind(this))
+      this.masterEvent, this.onMasterEvent.bind(this))
   }
-  
-  init(context = {}) {
+
+  init (context = {}) {
     this.binding = 'splitview-master-listen'
     return super.init(context)
   }

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

@@ -13,7 +13,7 @@ describe('SplitViewMaster', () => {
   })
 
   it('can be instantiated', () => {
-    container.innerHTML = /*html*/`
+    container.innerHTML = /* html */`
     <ark-splitview-master>
     </ark-splitview-master>
     `
@@ -46,7 +46,7 @@ describe('SplitViewMaster', () => {
     const button = master.select('button')
 
     let masterEvent = null
-    master.addEventListener('master-change', (event) => {masterEvent = event})
+    master.addEventListener('master-change', (event) => { masterEvent = event })
 
     button.click()
 

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

@@ -4,32 +4,30 @@ import './splitview.detail'
 import './splitview.master.js'
 
 class NestedMaster extends Component {
-  constructor() {
+  constructor () {
     super()
     this.addEventListener('click', (_) => {
-      this.emit('nested:master', {value: 'NESTED MASTER VALUE'})
-
+      this.emit('nested:master', { value: 'NESTED MASTER VALUE' })
     })
   }
 }
 Component.define('nested-master', NestedMaster)
 
 class NestedDetail extends Component {
-  init(context) {
-    if(!context.value) return super.init()
+  init (context) {
+    if (!context.value) return super.init()
 
     this.value = context.value
     return super.init()
   }
 
-  render() {
+  render () {
     this.content = this.value
     return super.render()
   }
 }
 Component.define('nested-detail', NestedDetail)
 
-
 describe('SplitView', () => {
   let container = null
   beforeEach(() => {