@knowark/componarkjs 1.11.1 → 1.11.2

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/lib/components/paginator.old/README.md

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,110 @@
+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

@@ -0,0 +1,128 @@
+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

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

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

@@ -0,0 +1,196 @@
+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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knowark/componarkjs",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "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'
       })
     ]
   }