@knowark/componarkjs 1.11.2 → 1.12.1

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

@@ -15,16 +15,17 @@ export class Droparea extends Component {
   }
 
   render () {
+    this._grabSlots()
     this.content = /* html */ `
     <form class="${tag}__form">
-      <div class="${tag}__header">
+      <div data-content class="${tag}__header">
         <div class="${tag}__open">${this.title || 'Upload'}</div>
-        <input id="fileElement"class="${tag}__input" type="file" 
-          data-input multiple />
       </div>
       <ark-droparea-preview></ark-droparea-preview>
     </form>
     `
+    this.querySelector('[data-content]').appendChild(
+      this._buildFileInput(this.fileInput))
     this.dragDropEvents = ['dragenter', 'dragover', 'dragleave', 'drop']
     this.dragEvents = this.dragDropEvents.slice(0, 2)
     this.dropEvents = this.dragDropEvents.slice(2)
@@ -149,6 +150,20 @@ export class Droparea extends Component {
     return true
   }
 
+  _grabSlots() {
+    const [fileInput] = [this.slots.general].flat()
+    this.fileInput = this.fileInput ?? fileInput
+
+  }
+
+  _buildFileInput (element) {
+    const input = element ?? document.createElement('input')
+    const attributes = [['id', 'fileElement'], ['class', `${tag}__input`],
+      ['type', 'file'], ['data-input', ''], ['multiple', '']]
+    attributes.forEach(([key, value]) => input.setAttribute(key, value))
+    return input
+  }
+  
   get dropZone () {
     return this.select('.ark-droparea__form')
   }

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

@@ -317,4 +317,37 @@ describe('Droparea', () => {
     dropZone.dispatchEvent(dropEvent)
     expect(droparea.maxSizeValidate).toBeCalled
   })
+
+
+  it('allows to be passed a custom input element', () => {
+    container.innerHTML = /* html */ `
+      <ark-droparea single>
+        <input data-custom-input style="font-weight:bold" type="file">
+      </ark-droparea>
+    `
+
+    const droparea = container.querySelector('ark-droparea')
+    const input = droparea.querySelector('[data-custom-input]')
+    expect(input).toBeTruthy()
+    expect(input.style.fontWeight).toEqual('bold')
+    const dropZone = droparea.querySelector('.ark-droparea__form')
+    const myFile = new File(['image'], 'Snoopy.png', {
+      type: 'image/png'
+    })
+    const myFile2 = new File(['image'], 'Scooby.png', {
+      type: 'image/png'
+    })
+
+    const dropEvent = createBubbledEvent('drop', {
+      clientX: 0,
+      clientY: 1,
+      dataTransfer: {
+        files: [myFile, myFile2]
+      }
+    })
+
+    dropZone.dispatchEvent(dropEvent)
+    expect(droparea.fileList.length).toBe(1)
+    expect(droparea.fileList[1]).toBeFalsy()
+  })
 })

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

@@ -7,7 +7,7 @@ export class Paginator extends Component {
     this.binding = 'paginator-listen'
     this.collectionSize = (
       context.collectionSize || this.collectionSize || '120')
-    this.pageSize = context.pageSize || this.pageSize || '24'
+    this.pageSize = context.pageSize || this.pageSize || '60'
     this.currentPage = context.currentPage || this.currentPage || '1'
     this.displayedPages = (
       context.displayedPages || this.displayedPages || '12')
@@ -23,14 +23,13 @@ export class Paginator extends Component {
 
   render () {
     this._grabSlots()
-    this.content = /* html */ `
+    this.content = /* html */`
       <div class="ark-paginator__body">
         <div data-start class="ark-paginator__buttons">
         </div>
 
         <div data-middle paginator-listen on-click="_move"
-        class="ark-paginator__pages">
-        </div>
+        class="ark-paginator__pages"></div>
 
         <div data-end class="ark-paginator__buttons">
         </div>
@@ -121,7 +120,7 @@ export class Paginator extends Component {
   }
 
   _grabSlots() {
-    const [pageButton] = [this.slots.general].flat()
+    const [pageButton] = [this.slots.page].flat()
     this.pageButton = this.pageButton ?? pageButton
     const [firstButton] = [this.slots.first].flat()
     this.firstButton = this.firstButton ?? firstButton
@@ -135,7 +134,7 @@ export class Paginator extends Component {
 
   _buildButton (element, handler, content, attributes = []) {
     const button = element ?? document.createElement('button')
-    button.textContent = button.textContent || content
+    button.innerHTML = button.innerHTML || content
     if (handler) {
       button.setAttribute('paginator-listen', '')
       button.setAttribute('on-click', handler)

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

@@ -1,4 +1,4 @@
-import { Paginator } from './paginator.js'
+import './paginator.js'
 
 describe('Paginator', () => {
   let container = null
@@ -129,9 +129,11 @@ describe('Paginator', () => {
   it('can be provided with custom styleable elements', () => {
     container.innerHTML = /* html */ `
       <ark-paginator page-size="12" displayed-pages="5">
-        <button data-first slot="first"></button>
-        <button data-previous slot="previous"></button>
-        <button data-page-general></button>
+        <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>
@@ -139,8 +141,10 @@ describe('Paginator', () => {
 
     const paginator = container.querySelector('ark-paginator')
 
-    expect(paginator.querySelector('[data-first]')).toBeTruthy()
-    expect(paginator.querySelector('[data-previous]')).toBeTruthy()
+    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()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knowark/componarkjs",
-  "version": "1.11.2",
+  "version": "1.12.1",
   "author": "Knowark",
   "description": "Knowark's Web Components Library",
   "license": "ISC",

package/lib/components/paginator.old/README.md

@@ -1,32 +0,0 @@
-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.old/components/paginator.js

@@ -1,110 +0,0 @@
-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.old/components/paginator.test.js

@@ -1,128 +0,0 @@
-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.old/index.js

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

package/lib/components/paginator.old/styles/ark.css.js

@@ -1,196 +0,0 @@
-const css = String.raw; export default css`
-  .ark-paginator {
-    background: var(--canvas, white);
-    color: var(--ink, black);
-  }
-
-  /*-------------- THEME-------------- */
-
-  .ark-paginator[background=primary] {
-    background: var(--primary);
-    color: white;
-  }
-
-  .ark-paginator.ark-paginator[color=primary] {
-    color: var(--primary);
-  }
-
-  .ark-paginator[background=secondary] {
-    background: var(--secondary);
-    color: white;
-  }
-
-  .ark-paginator.ark-paginator[color=secondary] {
-    color: var(--secondary);
-  }
-
-  .ark-paginator[background=success] {
-    background: var(--success);
-    color: white;
-  }
-
-  .ark-paginator.ark-paginator[color=success] {
-    color: var(--success);
-  }
-
-  .ark-paginator[background=danger] {
-    background: var(--danger);
-    color: white;
-  }
-
-  .ark-paginator.ark-paginator[color=danger] {
-    color: var(--danger);
-  }
-
-  .ark-paginator[background=warning] {
-    background: var(--warning);
-    color: white;
-  }
-
-  .ark-paginator.ark-paginator[color=warning] {
-    color: var(--warning);
-  }
-
-  .ark-paginator[background=info] {
-    background: var(--info);
-    color: white;
-  }
-
-  .ark-paginator.ark-paginator[color=info] {
-    color: var(--info);
-  }
-
-  .ark-paginator[background=dark] {
-    background: var(--dark);
-    color: white;
-  }
-
-  .ark-paginator.ark-paginator[color=dark] {
-    color: var(--dark);
-  }
-
-  .ark-paginator[background=muted] {
-    background: var(--muted);
-    color: white;
-  }
-
-  .ark-paginator.ark-paginator[color=muted] {
-    color: var(--muted);
-  }
-
-  .ark-paginator[background=light] {
-    background: var(--light);
-    color: white;
-  }
-
-  .ark-paginator.ark-paginator[color=light] {
-    color: var(--light);
-  }
-
-  /*-------------------------------------------*/
-
-  .ark-paginator__body {
-    width: 100%;
-    display: grid;
-    grid-auto-flow: column;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .ark-paginator__footer {
-    display: grid;
-    grid-auto-flow: column;
-    justify-content: center;
-  }
-
-  .ark-paginator__footer small[data-info] {
-    color: var(--primary);
-  }
-
-  .ark-paginator__buttons {
-    margin: 10px;
-  }
-
-  .ark-paginator__buttons button {
-    width: 1.8rem;
-    height: 1.8rem;
-    border: 0;
-    margin: 0.1rem;
-    background: inherit;
-  }
-
-  .ark-paginator__buttons button:focus {
-    outline: none;
-  }
-
-  .ark-paginator__buttons button:active {
-    border: 1px solid black;
-  }
-
-  .ark-paginator__buttons button[on-click=_prev],
-  .ark-paginator__buttons button[on-click=_next] {
-    border: 2px solid rgba(128, 128, 128, 0.411);
-    background: white;
-  }
-
-  .ark-paginator__buttons button[on-click=_first],
-  .ark-paginator__buttons button[on-click=_last] {
-    border: 2px solid rgba(128, 128, 128, 0.411);
-    background: white;
-  }
-
-  .ark-paginator__pages {
-    display: grid;
-    grid-auto-flow: column;
-  }
-
-  .ark-paginator__pages button {
-    min-width: 1.8rem;
-    width: 1.8rem;
-    min-height: 1.8rem;
-    height: 1.8rem;
-    border: 1px solid var(--primary);
-    margin: 0.1rem;
-    text-align: center;
-  }
-
-  .ark-paginator__pages button:focus {
-    outline: none;
-  }
-
-  .ark-paginator__pages button[active] {
-    background: var(--primary, blue);
-    color: white;
-  }
-
-  .ark-paginator__buttons button {
-    border-radius: 4px;
-    transition: transform 0.1s ease-in-out;
-  }
-
-  .ark-paginator__buttons button:hover {
-    transform: scale(1.05);
-  }
-
-  .ark-paginator__pages {
-    display: grid;
-  }
-
-  .ark-paginator__pages button {
-    border-radius: 4px;
-    transition: transform 0.1s ease-in-out;
-  }
-
-  .ark-paginator__pages button:focus {
-    outline: none;
-  }
-
-  .ark-paginator__pages button[active] {
-    background: var(--primary, blue);
-    color: white;
-  }
-
-  .ark-paginator__pages button:hover {
-    transform: scale(1.05);
-  }
-`

package/lib/components/paginator.old/styles/index.js

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