@knowark/componarkjs 1.7.3 → 1.7.5

package/lib/components/droparea/components/droparea.test.js

@@ -4,7 +4,7 @@ import './droparea.js'
 describe('Droparea', () => {
   const createBubbledEvent = (type, props = {}) => {
     const event = new Event(type, {
-      bubbles: true,
+      bubbles: true
     })
     Object.assign(event, props)
     return event
@@ -45,7 +45,7 @@ describe('Droparea', () => {
     dragNode.dispatchEvent(
       createBubbledEvent('dragover', {
         clientX: 0,
-        clientY: 1,
+        clientY: 1
       })
     )
     expect(dropZone.classList['1']).toBe('highlight')
@@ -62,7 +62,7 @@ describe('Droparea', () => {
     dropZone.dispatchEvent(
       createBubbledEvent('dragleave', {
         clientX: 0,
-        clientY: 1,
+        clientY: 1
       })
     )
     expect(dropZone.classList.length).toBe(1)
@@ -76,17 +76,17 @@ describe('Droparea', () => {
     const droparea = container.querySelector('ark-droparea')
     const dropZone = droparea.querySelector('.ark-droparea__form')
     const myFile = new File(['image'], 'Doggy.png', {
-      type: 'image/png',
+      type: 'image/png'
     })
     const myFile2 = new File(['image'], 'Scooby.png', {
-      type: 'image/png',
+      type: 'image/png'
     })
     const dropEvent = createBubbledEvent('drop', {
       clientX: 0,
       clientY: 1,
       dataTransfer: {
-        files: [myFile, myFile2],
-      },
+        files: [myFile, myFile2]
+      }
     })
 
     dropZone.dispatchEvent(dropEvent)
@@ -102,18 +102,18 @@ describe('Droparea', () => {
     const droparea = container.querySelector('ark-droparea')
     const dropZone = droparea.querySelector('.ark-droparea__form')
     const myFile = new File(['image'], 'Snoopy.png', {
-      type: 'image/png',
+      type: 'image/png'
     })
     const myFile2 = new File(['image'], 'Scooby.png', {
-      type: 'image/png',
+      type: 'image/png'
     })
 
     const dropEvent = createBubbledEvent('drop', {
       clientX: 0,
       clientY: 1,
       dataTransfer: {
-        files: [myFile, myFile2],
-      },
+        files: [myFile, myFile2]
+      }
     })
 
     dropZone.dispatchEvent(dropEvent)
@@ -129,18 +129,18 @@ describe('Droparea', () => {
     const droparea = container.querySelector('ark-droparea')
     const dropZone = droparea.querySelector('.ark-droparea__form')
     const myFile = new File(['image'], 'Snoopy.png', {
-      type: 'image/png',
+      type: 'image/png'
     })
     const myFile2 = new File(['image'], 'Scooby.png', {
-      type: 'image/png',
+      type: 'image/png'
     })
 
     const dropEvent = createBubbledEvent('drop', {
       clientX: 0,
       clientY: 1,
       dataTransfer: {
-        files: [myFile, myFile2],
-      },
+        files: [myFile, myFile2]
+      }
     })
 
     dropZone.dispatchEvent(dropEvent)
@@ -155,18 +155,18 @@ describe('Droparea', () => {
     const droparea = container.querySelector('ark-droparea')
     const dropZone = droparea.querySelector('.ark-droparea__form')
     const myFile = new File(['image'], 'Snoopy.png', {
-      type: 'image/png',
+      type: 'image/png'
     })
     const myFile2 = new File(['image'], 'Scooby.png', {
-      type: 'image/png',
+      type: 'image/png'
     })
 
     const dropEvent = createBubbledEvent('drop', {
       clientX: 0,
       clientY: 1,
       dataTransfer: {
-        files: [myFile, myFile2],
-      },
+        files: [myFile, myFile2]
+      }
     })
 
     dropZone.dispatchEvent(dropEvent)
@@ -176,14 +176,14 @@ describe('Droparea', () => {
         name: 'Snoopy.png',
         size: 5,
         type: 'image/png',
-        url: undefined,
+        url: undefined
       },
       {
         name: 'Scooby.png',
         size: 5,
         type: 'image/png',
-        url: undefined,
-      },
+        url: undefined
+      }
     ])
   })
 
@@ -196,13 +196,13 @@ describe('Droparea', () => {
     const dropOpen = droparea.querySelector('.ark-droparea__open')
     const input = droparea.querySelector('.ark-droparea__input')
     const myFile = new File(['image'], 'Snoopy.png', {
-      type: 'image/png',
+      type: 'image/png'
     })
     const changeEvent = createBubbledEvent('change', {})
     Object.defineProperty(changeEvent, 'target', {
       value: {
-        files: [myFile],
-      },
+        files: [myFile]
+      }
     })
     dropOpen.click()
     input.dispatchEvent(changeEvent)
@@ -217,16 +217,16 @@ describe('Droparea', () => {
     const droparea = container.querySelector('ark-droparea')
     const input = droparea.querySelector('.ark-droparea__input')
     const myFile = new File(['image'], 'Snoopy.jpg', {
-      type: 'image/png',
+      type: 'image/png'
     })
     const myFile2 = new File(['image'], 'Scrappy.png', {
-      type: 'image/png',
+      type: 'image/png'
     })
     const changeEvent = createBubbledEvent('change', {})
     Object.defineProperty(changeEvent, 'target', {
       value: {
-        files: [myFile, myFile2],
-      },
+        files: [myFile, myFile2]
+      }
     })
 
     input.dispatchEvent(changeEvent)
@@ -241,13 +241,13 @@ describe('Droparea', () => {
     const droparea = container.querySelector('ark-droparea')
     const input = droparea.querySelector('.ark-droparea__input')
     const myFile = new File(['text'], 'Snoopy.txt', {
-      type: 'text/txt',
+      type: 'text/txt'
     })
     const changeEvent = createBubbledEvent('change', {})
     Object.defineProperty(changeEvent, 'target', {
       value: {
-        files: [myFile],
-      },
+        files: [myFile]
+      }
     })
     input.dispatchEvent(changeEvent)
     expect(droparea.fileList.length).toBeFalsy()
@@ -262,16 +262,16 @@ describe('Droparea', () => {
     const droparea = container.querySelector('ark-droparea')
     const dropZone = droparea.querySelector('.ark-droparea__form')
     const myFile = new File(['audio'], 'autechre.mp3', {
-      type: 'audio/mp3',
+      type: 'audio/mp3'
     })
     const myFile2 = new File(['video'], 'cats.mov', {
-      type: 'video/mov',
+      type: 'video/mov'
     })
     const myFile3 = new File(['image'], 'snoopy.jpg', {
-      type: 'image/jpg',
+      type: 'image/jpg'
     })
     const myFile4 = new File(['text'], 'styles.css', {
-      type: 'text/css',
+      type: 'text/css'
     })
 
     const files = [myFile, myFile2, myFile3, myFile4]
@@ -279,8 +279,8 @@ describe('Droparea', () => {
       clientX: 0,
       clientY: 1,
       dataTransfer: {
-        files: files,
-      },
+        files
+      }
     })
     dropZone.dispatchEvent(dropEvent)
 
@@ -297,10 +297,10 @@ describe('Droparea', () => {
     const droparea = container.querySelector('ark-droparea')
     const dropZone = droparea.querySelector('.ark-droparea__form')
     const myFile = new File(['image'], 'Doggy.png', {
-      type: 'image/png',
+      type: 'image/png'
     })
     const myFile2 = new File(['image'], 'Scooby.png', {
-      type: 'image/png',
+      type: 'image/png'
     })
     Object.defineProperty(myFile2, 'size', { value: 1024 * 1024 + 1 })
 
@@ -308,8 +308,8 @@ describe('Droparea', () => {
       clientX: 0,
       clientY: 1,
       dataTransfer: {
-        files: [myFile, myFile2],
-      },
+        files: [myFile, myFile2]
+      }
     })
 
     droparea.maxSizeValidate([])

package/lib/components/droparea/styles/ark.css.js

@@ -232,4 +232,4 @@ const css = String.raw; export default css`
   .ark-droparea__open:active {
     transform: scale(0.95);
   }
-` 
+`

package/lib/components/emit/components/emit.js

@@ -4,7 +4,7 @@ const tag = 'ark-emit'
 export class Emit extends Component {
   constructor () {
     super()
-    const type = this['receive'] || 'click'
+    const type = this.receive || 'click'
     this.source = JSON.parse(this._pop(':scope > data')?.textContent || null)
     this.addEventListener(type, this.handle.bind(this))
   }
@@ -16,11 +16,11 @@ export class Emit extends Component {
   handle (event) {
     const detail = Object.assign({}, event.detail)
     if (this.source) Object.assign(detail, this.source)
-    
+
     const value = event.target.value
     if (value) Object.assign(detail, { value })
-    
-    const type = this['dispatch'] || 'emit'
+
+    const type = this.dispatch || 'emit'
     this.emit(type, detail)
   }
 

package/lib/components/emit/components/emit.test.js

@@ -12,7 +12,7 @@ describe('Emit', () => {
     container.remove()
     container = null
   })
-  
+
   it('can be instantiated', () => {
     container.innerHTML = `
     <ark-emit></ark-emit>
@@ -70,7 +70,7 @@ describe('Emit', () => {
     const dataElement = emit.querySelector('data')
     expect(dataElement).toBe(null)
 
-    emit.addEventListener('emit', (event) => { 
+    emit.addEventListener('emit', (event) => {
       const detail = event.detail
       expect(detail).toEqual(data)
     })
@@ -100,13 +100,13 @@ describe('Emit', () => {
     `
 
     const emit = container.querySelector('[data-outer]')
-    emit.addEventListener('outer', (event) => { 
+    emit.addEventListener('outer', (event) => {
       const detail = event.detail
       expect(detail).toEqual({
         id: '7a792bda-6f8a-44ed-a63a-a48bba1e76bf',
         name: 'John Doe',
         age: 34,
-        job: "programmer"
+        job: 'programmer'
       })
     })
 
@@ -128,7 +128,7 @@ describe('Emit', () => {
       inputEvent, 'target', { writable: false, value: target })
 
     const emit = container.querySelector('ark-emit')
-    emit.addEventListener('emit', (event) => { 
+    emit.addEventListener('emit', (event) => {
       const detail = event.detail
       expect(detail).toEqual({ value: 'XYZ' })
     })

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

@@ -15,12 +15,12 @@ describe('List item', () => {
   })
 
   it('can be instantiated', () => {
-     container.innerHTML = `
+    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 item = list.querySelector('ark-list-item')
 
@@ -28,12 +28,12 @@ describe('List item', () => {
   })
 
   it('can be rendered with data', () => {
-     container.innerHTML = `
+    container.innerHTML = `
       <ark-list></ark-list>
     `
 
     const list = container.querySelector('ark-list')
-    list.source =  ['Colombia']
+    list.source = ['Colombia']
     list.render()
     const item = list.querySelector('ark-list-item')
 
@@ -49,24 +49,24 @@ describe('List item', () => {
     `
 
     const list = container.querySelector('[data-template-list]')
-    list.source =  ['Colombia']
+    list.source = ['Colombia']
     list.render()
     const item = list.querySelector('ark-list-item')
-    
+
     item.data = 'my data'
-    item.template = data => /* html */ `<span>${data}</span>` 
+    item.template = data => /* html */ `<span>${data}</span>`
     item.render()
 
     expect(item.innerHTML.trim()).toEqual('<span>my data</span>')
   })
-  
+
   it('can be rendered with template', () => {
     container.innerHTML = `
       <ark-list data-template-list></ark-list>
     `
 
     const list = container.querySelector('[data-template-list]')
-    list.source =  ['Colombia']
+    list.source = ['Colombia']
     list.render()
     const item = list.querySelector('ark-list-item')
 
@@ -75,19 +75,17 @@ describe('List item', () => {
     item.render()
 
     item.addEventListener('list-item:selected', event => {
-      expect(event['detail'].data).toEqual('my data')
+      expect(event.detail.data).toEqual('my data')
     })
     item.click()
   })
-  
+
   it('can be rendered without template', () => {
     const item = new ListItem()
     item.init({
-      data:'my data'
+      data: 'my data'
     }).render()
 
     expect(item.innerHTML.trim()).toEqual('my data')
-
   })
-
 })

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

@@ -1,24 +1,24 @@
-import { Component } from "../../../base/component/index.js"
-import { ListItem } from "./list.item.js"
+import { Component } from '../../../base/component/index.js'
+import { ListItem } from './list.item.js'
 
-const tag = "ark-list"
+const tag = 'ark-list'
 
 export class List extends Component {
   constructor () {
     super()
-    this.addEventListener("click", this._onSelected.bind(this))
-    this.addEventListener("delete", this.onDeleted.bind(this))
+    this.addEventListener('click', this._onSelected.bind(this))
+    this.addEventListener('delete', this.onDeleted.bind(this))
   }
 
   /** @param {Object} context */
-  init(context = {}) {
+  init (context = {}) {
     this.source = /** @type {Array} */ (context.source) || this.source || []
     this.template = context.template || this.template || ((data) => `${data}`)
 
     return super.init()
   }
 
-  render() {
+  render () {
     const listData = this.select('data')
     const list = JSON.parse(listData?.textContent || null)
     const source = list || this.source
@@ -26,29 +26,29 @@ export class List extends Component {
     const itemTemplate = (this.select('template'))?.innerHTML
     this.template = itemTemplate ? this._format(itemTemplate) : this.template
 
-    this.content = ""
+    this.content = ''
 
     source.forEach((data, index) => {
       const item = new ListItem()
 
-      if (this.hasAttribute("click-disabled")) {
-        item.setAttribute("click-disabled", "")
+      if (this.hasAttribute('click-disabled')) {
+        item.setAttribute('click-disabled', '')
       }
-      
+
       this.appendChild(item)
 
       item.init({
-          data: data,
-          template: this.template,
-          index: index,
-        }).render()
+        data,
+        template: this.template,
+        index
+      }).render()
     })
 
     return super.render()
   }
 
   /** @param {number} start @param {number?} deleteCount  */
-  delete(start, deleteCount = 1) {
+  delete (start, deleteCount = 1) {
     this.source.splice(start, deleteCount)
     const deletions = []
     for (let i = start; i < (deleteCount + start); i++) {
@@ -58,37 +58,37 @@ export class List extends Component {
     deletions.map(item => item.remove())
   }
 
-  _format(template) {
+  _format (template) {
     return (data) => Function(`return \`${template}\``).call(data)
   }
 
   /** @param {MouseEvent} event */
-  _onSelected(event) {
+  _onSelected (event) {
     event.stopImmediatePropagation()
 
     const target = /** @type {HTMLElement} */ (event.target)
-    const item = /** @type {ListItem} */ (target.closest("ark-list-item"))
+    const item = /** @type {ListItem} */ (target.closest('ark-list-item'))
 
-    if (!item || item.hasAttribute("click-disabled")) return
+    if (!item || item.hasAttribute('click-disabled')) return
 
     this.dispatchEvent(
-      new CustomEvent("list-selected", {
+      new CustomEvent('list-selected', {
         bubbles: true,
         detail: {
           index: item.index,
           data: item.data,
-          origin: event,
-        },
+          origin: event
+        }
       })
     )
   }
 
   /** @param {MouseEvent} event */
-  onDeleted(event) {
+  onDeleted (event) {
     event.stopImmediatePropagation()
 
     const target = /** @type {HTMLElement} */ (event.target)
-    const item = /** @type {ListItem} */ (target.closest("ark-list-item"))
+    const item = /** @type {ListItem} */ (target.closest('ark-list-item'))
 
     this.delete(Number(item.index))
   }