@knowark/componarkjs 1.7.3

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

@@ -0,0 +1,138 @@
+import './emit.js'
+
+describe('Emit', () => {
+  let container = null
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    container.remove()
+    container = null
+  })
+  
+  it('can be instantiated', () => {
+    container.innerHTML = `
+    <ark-emit></ark-emit>
+    `
+
+    const emit = container.querySelector('ark-emit')
+    expect(emit).toEqual(emit.init())
+  })
+
+  it('emits a target event when handling the one listened at', () => {
+    container.innerHTML = `
+    <ark-emit receive="click" dispatch="custom">
+      <button>Sending a click event when pressed!</button>
+    </ark-emit>
+    `
+    const emit = container.querySelector('ark-emit')
+    let customCalled = false
+    emit.addEventListener('custom', (event) => { customCalled = true })
+
+    container.querySelector('button').click()
+
+    expect(customCalled).toBe(true)
+  })
+
+  it('listens to click events and dispatches emit events by default', () => {
+    container.innerHTML = `
+    <ark-emit>
+      <button>Sending a click event when pressed!</button>
+    </ark-emit>
+    `
+    const emit = container.querySelector('ark-emit')
+    let emitCalled = false
+    emit.addEventListener('emit', (event) => { emitCalled = true })
+
+    container.querySelector('button').click()
+
+    expect(emitCalled).toBe(true)
+  })
+
+  it('it carries over the json data given to it', () => {
+    expect.assertions(2)
+    const data = {
+      id: '7a792bda-6f8a-44ed-a63a-a48bba1e76bf',
+      name: 'John Doe'
+    }
+    container.innerHTML = `
+    <ark-emit>
+      <data>${JSON.stringify(data)}</data>
+      <button>Sending a click event when pressed!</button>
+    </ark-emit>
+    `
+
+    const emit = container.querySelector('ark-emit')
+
+    const dataElement = emit.querySelector('data')
+    expect(dataElement).toBe(null)
+
+    emit.addEventListener('emit', (event) => { 
+      const detail = event.detail
+      expect(detail).toEqual(data)
+    })
+
+    container.querySelector('button').click()
+  })
+
+  it('it merges upstream event details', () => {
+    expect.assertions(1)
+    const data = {
+      id: '7a792bda-6f8a-44ed-a63a-a48bba1e76bf',
+      name: 'John Doe'
+    }
+    container.innerHTML = `
+    <ark-emit data-outer receive="inner" dispatch="outer">
+      <data>
+        {
+          "age": 34,
+          "job": "programmer"
+        }
+      </data>
+      <ark-emit data-inner dispatch="inner">
+        <data>${JSON.stringify(data)}</data>
+        <button>Sending a click event when pressed!</button>
+      </ark-emit>
+    </ark-emit>
+    `
+
+    const emit = container.querySelector('[data-outer]')
+    emit.addEventListener('outer', (event) => { 
+      const detail = event.detail
+      expect(detail).toEqual({
+        id: '7a792bda-6f8a-44ed-a63a-a48bba1e76bf',
+        name: 'John Doe',
+        age: 34,
+        job: "programmer"
+      })
+    })
+
+    container.querySelector('[data-inner]').click()
+  })
+
+  it('receives the target.value of regular events', async () => {
+    expect.assertions(1)
+
+    container.innerHTML = `
+    <ark-emit receive="change">
+      <input type="text"></input>
+    </ark-emit>
+    `
+    const input = container.querySelector('input')
+    const inputEvent = new Event('change', { bubbles: true })
+    const target = { name: 'input', value: 'XYZ' }
+    Object.defineProperty(
+      inputEvent, 'target', { writable: false, value: target })
+
+    const emit = container.querySelector('ark-emit')
+    emit.addEventListener('emit', (event) => { 
+      const detail = event.detail
+      expect(detail).toEqual({ value: 'XYZ' })
+    })
+
+    input.dispatchEvent(inputEvent)
+  })
+})

package/lib/components/emit/index.js

@@ -0,0 +1 @@
+export { Emit } from './components/emit.js'

package/lib/components/index.js

@@ -0,0 +1,9 @@
+export * from './audio/index.js'
+export * from './camera/index.js'
+export * from './capture/index.js'
+export * from './emit/index.js'
+export * from './list/index.js'
+export * from './paginator/index.js'
+export * from './spinner/index.js'
+export * from './splitview/index.js'
+export * from './translate/index.js'

package/lib/components/list/README.md

@@ -0,0 +1,103 @@
+LIST
+====
+
+The ``ark-list`` component provides an indexed vertical
+list of ``ark-list-items``.
+
+
+Examples
+--------
+
+**Default list:**
+
+**Assuming ``data`` is the following array:**
+
+```javascript
+  const data = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+```
+
+**Then, the following HTML declaration would render it by passing its content
+as JSON within a ``data`` element:**
+
+```html
+   <ark-list>
+     <data>${JSON.stringify(data)}</data>
+   </ark-list>
+```
+
+**Template list:**
+
+**If ``data`` were an array of objects such as:**
+
+```javascript
+  const dataTemplate = [
+    { first: 'Colombia', second: 'Argentina', year: 2016 },
+    { first: 'Uruguay', second: 'Colombia', year: 2017 },
+    { first: 'Brasil', second: 'Argentina', year: 2018 },
+    { first: 'Perú', second: 'Bolivia', year: 2019 }
+  ]
+```
+
+**Then we could provide a ``template`` to render each of its items:**
+
+```html
+   <ark-list>
+     <data>${JSON.stringify(data)}</data>
+     <template>
+        <h1>\${this.year}</h1>
+        <span data-first>FIRST: \${this.first}</span>
+        <span> | </span>
+        <span data-second>SECOND: \${this.second}</span>
+     </template>
+   </ark-list>
+```
+
+**NOTE: remember to escape JavaScript string interpolation expressions
+inside the template tag (i.e. use ``\%{}``).**
+
+
+**Programmatic API:**
+
+**The list receives its items as a ** ``data`` **array of objects**
+
+**And its item structure in a** ``template`` **property**
+
+``` javascript
+    const template = item => `
+    <h1>${item.year}</h1>
+    <span data-first>FIRST: ${item.first}</span>
+    <span> | </span>
+    <span data-second>SECOND: ${item.second}</span>`_
+```
+
+**In order to render an** ``ark-list`` **of multiple lines, we assign the
+items in the** ``data`` **property and its content in
+the** ``template`` **property**
+
+``` javascript
+    const templateList = this.select('[data-template-list]')
+    templateList.init({
+        data: sourceTemplate,
+        template: template
+    }).render()
+```
+
+Attributes
+----------
+
+|     Component     |      Name      |  Type   | Default |              Description              |
+| :---------------: | :------------: | :-----: | :-----: | :-----------------------------------: |
+| ``ark-list-item`` |     index      | string  |  text   |   Indicates the ``list-item`` index   |
+|   ``ark-list``    | click-disabled | boolean |  null   | Disable the click event for the items |
+
+
+Properties
+----------
+
+|        Component        |   Name   |     Type     | Default |                                         Description                                          |
+| :---------------------: | :------: | ------------ | ------: | :------------------------------------------------------------------------------------------: |
+|    ``ark-list-item``    |  index   | string       |    text |                              Indicates the ``list-item`` index                               |
+| ``ark-list`` (default)  |  source  | list         |    null |                   A list of strings that represents each item in the list                    |
+| ``ark-list`` (template) |  source  | list         |    null |                An list of objects that represents data reflected in each item                |
+|    ``ark-list-item``    |   data   | list, object |    null |                 Displays the data defined in the source for a specific item                  |
+|    ``ark-list-item``    | template | string       |    null | Receives and displays a html in a template literal, the data should render in a ``span`` tag |

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

@@ -0,0 +1,93 @@
+import './list.js'
+import { ListItem } from './list.item.js'
+
+describe('List item', () => {
+  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')
+    list.source =  ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+    list.render()
+    const item = list.querySelector('ark-list-item')
+
+    expect(item).toEqual(item.init())
+  })
+
+  it('can be rendered with data', () => {
+     container.innerHTML = `
+      <ark-list></ark-list>
+    `
+
+    const list = container.querySelector('ark-list')
+    list.source =  ['Colombia']
+    list.render()
+    const item = list.querySelector('ark-list-item')
+
+    item.data = 'my data'
+    item.render()
+
+    expect(item.innerHTML.trim()).toEqual('my data')
+  })
+
+  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.render()
+    const item = list.querySelector('ark-list-item')
+    
+    item.data = 'my data'
+    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.render()
+    const item = list.querySelector('ark-list-item')
+
+    item.data = 'my data'
+    item.template = data => /* html */ `<span>${data}</span>`
+    item.render()
+
+    item.addEventListener('list-item:selected', event => {
+      expect(event['detail'].data).toEqual('my data')
+    })
+    item.click()
+  })
+  
+  it('can be rendered without template', () => {
+    const item = new ListItem()
+    item.init({
+      data:'my data'
+    }).render()
+
+    expect(item.innerHTML.trim()).toEqual('my data')
+
+  })
+
+})

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

@@ -0,0 +1,22 @@
+import { Component } from '../../../base/component/index.js'
+
+const tag = 'ark-list-item'
+export class ListItem extends Component {
+  init (context = {}) {
+    this.index = context.index
+    this.data = context.data || null
+    this.template = context.template || (data => `${data}`)
+
+    return super.init()
+  }
+
+  reflectedProperties () {
+    return ['index']
+  }
+
+  render () {
+    this.content = this.template(this.data)
+    return super.render()
+  }
+}
+Component.define(tag, ListItem)

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

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