@knowark/componarkjs 1.11.1 → 1.12.0

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

@@ -22,26 +22,40 @@ export class Paginator extends Component {
   }
 
   render () {
+    this._grabSlots()
     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 data-start class="ark-paginator__buttons">
         </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 data-middle paginator-listen on-click="_move"
+        class="ark-paginator__pages">
         </div>
 
-        <div class="ark-paginator__buttons">
-          <button paginator-listen on-click="_next">&#62;</button>
-          <button paginator-listen on-click="_last">&#62;&#62;</button>
+        <div data-end class="ark-paginator__buttons">
         </div>
       </div>
     `
 
+    this.querySelector('[data-start]').appendChild(
+      this._buildButton(this.firstButton, '_first', '<<'))
+    this.querySelector('[data-start]').appendChild(
+      this._buildButton(this.previousButton, '_prev', '<'))
+
+    for (const page of this.currentPages) {
+      const attributes = [['data-page', page]]
+      if ((Number(page) === Number(this.currentPage))) {
+        attributes.unshift(['active', ''])
+      }
+      this.querySelector('[data-middle]').appendChild(
+        this._buildButton(this.pageButton, null, page, attributes))
+    }
+
+    this.querySelector('[data-end]').appendChild(
+      this._buildButton(this.nextButton, '_next', '>'))
+    this.querySelector('[data-end]').appendChild(
+      this._buildButton(this.lastButton, '_last', '>>'))
+
     return super.render()
   }
 
@@ -105,6 +119,30 @@ export class Paginator extends Component {
     event.stopPropagation()
     this._setCurrentPage(this.totalPages)
   }
+
+  _grabSlots() {
+    const [pageButton] = [this.slots.general].flat()
+    this.pageButton = this.pageButton ?? pageButton
+    const [firstButton] = [this.slots.first].flat()
+    this.firstButton = this.firstButton ?? firstButton
+    const [previousButton] = [this.slots.previous].flat()
+    this.previousButton = this.previousButton ?? previousButton
+    const [nextButton] = [this.slots.next].flat()
+    this.nextButton = this.nextButton ?? nextButton
+    const [lastButton] = [this.slots.last].flat()
+    this.lastButton = this.lastButton ?? lastButton
+  }
+
+  _buildButton (element, handler, content, attributes = []) {
+    const button = element ?? document.createElement('button')
+    button.textContent = button.textContent || content
+    if (handler) {
+      button.setAttribute('paginator-listen', '')
+      button.setAttribute('on-click', handler)
+    }
+    attributes.forEach(([key, value]) => button.setAttribute(key, value))
+    return button
+  }
 }
 
 Component.define(tag, Paginator, styles)

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

@@ -125,4 +125,24 @@ describe('Paginator', () => {
     paginator.select('[on-click="_next"]').click()
     expect(paginator.currentPage).toEqual('10')
   })
+
+  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-next slot="next"></button>
+        <button data-last slot="last"></button>
+      </ark-paginator>
+    `
+
+    const paginator = container.querySelector('ark-paginator')
+
+    expect(paginator.querySelector('[data-first]')).toBeTruthy()
+    expect(paginator.querySelector('[data-previous]')).toBeTruthy()
+    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.1",
+  "version": "1.12.0",
   "author": "Knowark",
   "description": "Knowark's Web Components Library",
   "license": "ISC",

package/showcase/components/index.html

@@ -8,7 +8,7 @@
     <script type="importmap">
     {
       "imports": {
-        "@knowark/componarkjs": "https://unpkg.com/@knowark/componarkjs@1.7.3/lib/index.js"
+        "@knowark/componarkjs": "https://unpkg.com/@knowark/componarkjs@1.11.1/lib/index.js"
       }
     }
     </script>

package/webpack.config.cjs

@@ -11,17 +11,17 @@ module.exports = (env, argv) => {
   const commonConfig = {
     mode: argv.mode,
     entry: {
-      showcase: './lib/showcase/design/index.js'
+      showcase: './showcase/index.js'
     },
     plugins: [
       new CleanWebpackPlugin(),
       new HtmlWebpackPlugin({
         chunks: ['showcase', 'runtime'],
         title: 'Componark',
-        template: './lib/showcase/design/index.html'
+        template: './showcase/index.html'
       }),
       new CopyWebpackPlugin({
-        patterns: ['lib/showcase/design/.htaccess']
+        patterns: ['./showcase/.htaccess']
       }),
       new DefinePlugin({
         PRODUCTION: !devMode,
@@ -51,9 +51,9 @@ module.exports = (env, argv) => {
     },
     resolve: {
       alias: {
-        base: path.resolve(__dirname, './lib/base/'),
-        components: path.resolve(__dirname, './lib/components/'),
-        screens: path.resolve(__dirname, './lib/showcase/screens/')
+        base: path.resolve(__dirname, './base/'),
+        components: path.resolve(__dirname, './components/'),
+        screens: path.resolve(__dirname, './showcase/screens/')
       }
     }
   }
@@ -77,7 +77,7 @@ module.exports = (env, argv) => {
     name: 'root',
     mode: argv.mode,
     entry: {
-      index: './lib/showcase/index.js'
+      index: './showcase/index.js'
     },
     plugins: [
       new CleanWebpackPlugin(),
@@ -88,12 +88,12 @@ module.exports = (env, argv) => {
       }),
       new CopyWebpackPlugin({
         patterns: [
-          { from: 'lib/showcase/locales/', to: 'locales/' }
+          { from: './showcase/locales/', to: 'locales/' }
         ]
       }),
       new HtmlWebpackPlugin({
         title: 'Componark',
-        template: './lib/showcase/index.html'
+        template: './showcase/index.html'
       })
     ]
   }