waibu-db 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waibu-db",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "DB Helper",
   "main": "index.js",
   "scripts": {

package/waibuBootstrap/theme/component/factory/btn-add.js

@@ -0,0 +1,24 @@
+import wdbBase from '../wdb-base.js'
+
+async function btnAdd () {
+  const WdbBase = await wdbBase.call(this)
+
+  return class WdbBtnAdd extends WdbBase {
+    async build () {
+      const { isEmpty, get } = this.plugin.app.bajo.lib._
+      const { req } = this.component
+      this.params.noTag = true
+      const schema = get(this, 'component.locals.schema', {})
+      if (schema.view.disabled.includes('create')) {
+        this.params.html = ''
+        return
+      }
+      if (isEmpty(this.params.attr.content)) this.params.attr.content = req.t('Add')
+      this.params.attr.color = this.params.attr.color ?? 'secondary-outline'
+      if (!this.params.attr.href) this.params.attr.href = this.component.buildUrl({ base: 'add' })
+      this.params.html = await this.component.buildTag({ tag: 'btn', attr: this.params.attr, html: this.params.html })
+    }
+  }
+}
+
+export default btnAdd

package/waibuBootstrap/theme/component/factory/btn-back.js

@@ -0,0 +1,22 @@
+import wdbBase from '../wdb-base.js'
+
+async function btnBack () {
+  const WdbBase = await wdbBase.call(this)
+
+  return class WdbBtnBack extends WdbBase {
+    async build () {
+      const { isEmpty } = this.plugin.app.bajo.lib._
+      const { attrToArray } = this.plugin.app.waibuMpa
+      const { req } = this.component
+      this.params.noTag = true
+      if (isEmpty(this.params.attr.content)) this.params.attr.content = req.t('Back')
+      if (isEmpty(this.params.attr.icon)) this.params.attr.icon = 'arrowStart'
+      this.params.attr.color = this.params.attr.color ?? 'secondary-outline'
+      this.params.attr.excludeQs = ['mode', 'id', ...attrToArray(this.params.attr.excludeQs ?? '')]
+      if (!this.params.attr.href) this.params.attr.href = this.component.buildUrl({ base: 'list', exclude: this.params.attr.excludeQs })
+      this.params.html = await this.component.buildTag({ tag: 'btn', attr: this.params.attr, html: this.params.html })
+    }
+  }
+}
+
+export default btnBack

package/waibuBootstrap/theme/component/factory/btn-clone.js

@@ -0,0 +1,39 @@
+import wdbBase from '../wdb-base.js'
+
+async function btnClone () {
+  const WdbBase = await wdbBase.call(this)
+
+  return class WdbBtnClone extends WdbBase {
+    async build () {
+      const { req } = this.component
+      const { isEmpty, get } = this.plugin.app.bajo.lib._
+      this.params.noTag = true
+      const schema = get(this, 'component.locals.schema', {})
+      if (schema.view.disabled.includes('create')) {
+        this.params.html = ''
+        return
+      }
+      if (isEmpty(this.params.attr.content)) this.params.attr.content = req.t('Clone')
+      this.params.attr.color = this.params.attr.color ?? 'secondary-outline'
+      if (!this.params.attr.href) this.params.attr.href = this.component.buildUrl({ base: 'add', exclude: ['id'] }) + '&mode=clone'
+      if (this.params.attr.onList) {
+        this.params.attr['x-ref'] = 'clone'
+        this.params.attr.disabled = true
+        this.params.attr['x-data'] = `{
+          path: '${this.params.attr.href}'
+        }`
+        this.params.attr['@on-selection.window'] = `
+          const recId = $event.detail[0] ?? ''
+          if ($event.detail.length === 1) $refs.clone.classList.remove('disabled')
+          else $refs.clone.classList.add('disabled')
+          $refs.clone.href = path + '&id=' + recId
+        `
+      } else {
+        this.params.attr.href += '&id=' + req.query.id
+      }
+      this.params.html = await this.component.buildTag({ tag: 'btn', attr: this.params.attr, html: this.params.html })
+    }
+  }
+}
+
+export default btnClone

package/waibuBootstrap/theme/component/factory/btn-columns.js

@@ -0,0 +1,55 @@
+import wdbBase from '../wdb-base.js'
+
+async function btnColumns () {
+  const WdbBase = await wdbBase.call(this)
+
+  return class WdbBtnColumns extends WdbBase {
+    async build () {
+      const { get, isEmpty, without } = this.plugin.app.bajo.lib._
+      const { jsonStringify } = this.plugin.app.waibuMpa
+      const { req } = this.component
+      const qsKey = this.plugin.app.waibu.config.qsKey
+      const schema = get(this, 'component.locals.schema', {})
+      if (schema.view.disabled.includes('find')) {
+        this.params.html = ''
+        return
+      }
+      let fields = without(get(this, `component.locals._meta.query.${qsKey.fields}`, '').split(','), '')
+      if (isEmpty(fields)) fields = schema.view.fields
+      const items = []
+      this.params.attr.color = this.params.attr.color ?? 'secondary-outline'
+      if (isEmpty(this.params.attr.content)) this.params.attr.content = req.t('Columns')
+      for (const f of schema.view.fields) {
+        if (f === 'id') {
+          items.push(await this.component.buildTag({ tag: 'formCheck', attr: { checked: true, label: req.t('ID'), value: f, disabled: true } }))
+          continue
+        }
+        const attr = { 'x-model': 'selected', label: req.t(`field.${f}`), value: f }
+        if (fields.includes(f)) attr.checked = true
+        items.push(await this.component.buildTag({ tag: 'formCheck', attr }))
+      }
+      const href = this.component.buildUrl({ exclude: [qsKey.fields] })
+      const html = ['<form class="mt-1 mb-2 mx-3" ']
+      html.push(`x-data="{
+        selected: ${jsonStringify(fields, true)},
+        all: ${jsonStringify(schema.view.fields, true)}
+      }"`)
+      html.push(`x-init="
+        $refs.apply.href = '${href}&${qsKey.fields}=' + selected.join(',')
+        $watch('selected', v => {
+          $refs.apply.href = '${href}&${qsKey.fields}=' + v.join(',')
+        })
+      ">`)
+      html.push(...items)
+      const attr = { size: 'sm', 'x-ref': 'apply', margin: 'top-2', color: this.params.attr.applyColor ?? 'primary', icon: this.params.attr.applyIcon ?? 'arrowsStartEnd', href }
+      html.push(await this.component.buildTag({ tag: 'btn', attr, html: req.t('Apply') }))
+      html.push('</form>')
+      this.params.attr.autoClose = 'outside'
+      this.params.attr.triggerColor = this.params.attr.color
+      this.params.html = await this.component.buildTag({ tag: 'dropdown', attr: this.params.attr, html: html.join('\n') })
+      this.params.noTag = true
+    }
+  }
+}
+
+export default btnColumns

package/waibuBootstrap/theme/component/factory/btn-delete.js

@@ -0,0 +1,52 @@
+import wdbBase from '../wdb-base.js'
+
+async function btnDelete () {
+  const WdbBase = await wdbBase.call(this)
+
+  return class WdbBtnDelete extends WdbBase {
+    async build () {
+      const { req } = this.component
+      const { generateId } = this.plugin.app.bajo
+      const { isEmpty, get } = this.plugin.app.bajo.lib._
+      this.params.noTag = true
+      const schema = get(this, 'component.locals.schema', {})
+      if (schema.view.disabled.includes('remove')) {
+        this.params.html = ''
+        return
+      }
+      if (isEmpty(this.params.attr.content)) this.params.attr.content = req.t('Delete')
+      this.params.attr.color = this.params.attr.color ?? 'danger-outline'
+      this.params.attr.id = generateId('alpha')
+      if (this.params.attr.onList) {
+        this.params.attr.disabled = true
+        this.params.attr['x-data'] = `{
+          selected: [],
+          remove (modalId, ids) {
+            wmpa.postForm({ ids }, '${this.component.buildUrl({ base: 'delete' })}')
+          }
+        }`
+        this.params.attr['@on-selection.window'] = `
+        const el = document.getElementById('${this.params.attr.id}')
+        selected = $event.detail
+        if (selected.length > 0) el.classList.remove('disabled')
+        else el.classList.add('disabled')
+      `
+      } else {
+        this.params.attr['x-data'] = `{
+          selected: ['${req.query.id}'],
+          remove (modalId, ids) {
+            wmpa.postForm({ ids }, '${this.component.buildUrl({ base: 'delete', exclude: ['id', 'page'] })}')
+          }
+        }`
+      }
+      const msg = 'You\'re about to remove one or more records. Are you really sure to do this?'
+      this.params.attr['@click'] = `
+        const opts = selected.join(',')
+        await wbs.confirmation(\`${req.t(msg)}\`, { ok: '${this.params.attr.id}:remove', close: 'y', opts })
+      `
+      this.params.html = await this.component.buildTag({ tag: 'btn', attr: this.params.attr, html: this.params.html })
+    }
+  }
+}
+
+export default btnDelete

package/waibuBootstrap/theme/component/factory/btn-details.js

@@ -0,0 +1,41 @@
+import wdbBase from '../wdb-base.js'
+
+async function btnDetails () {
+  const WdbBase = await wdbBase.call(this)
+
+  return class WdbBtnDetails extends WdbBase {
+    async build () {
+      const { req } = this.component
+      const { generateId } = this.plugin.app.bajo
+      const { isEmpty, get } = this.plugin.app.bajo.lib._
+      this.params.noTag = true
+      const schema = get(this, 'component.locals.schema', {})
+      if (schema.view.disabled.includes('update')) {
+        this.params.html = ''
+        return
+      }
+      if (isEmpty(this.params.attr.content)) this.params.attr.content = req.t('Details')
+      this.params.attr.color = this.params.attr.color ?? 'secondary-outline'
+      this.params.attr.id = generateId('alpha')
+      if (!this.params.attr.href) this.params.attr.href = this.component.buildUrl({ base: 'details', exclude: ['id'] })
+      if (this.params.attr.onList) {
+        this.params.attr.disabled = true
+        this.params.attr['x-ref'] = 'details'
+        this.params.attr['x-data'] = `{
+          path: '${this.params.attr.href}'
+        }`
+        this.params.attr['@on-selection.window'] = `
+          const recId = $event.detail[0] ?? ''
+          if ($event.detail.length === 1) $refs.details.classList.remove('disabled')
+          else $refs.details.classList.add('disabled')
+          $refs.details.href = path + '&id=' + recId
+        `
+      } else {
+        this.params.attr.href += '&id=' + req.query.id
+      }
+      this.params.html = await this.component.buildTag({ tag: 'btn', attr: this.params.attr, html: this.params.html })
+    }
+  }
+}
+
+export default btnDetails

package/waibuBootstrap/theme/component/factory/btn-edit.js

@@ -0,0 +1,67 @@
+import wdbBase from '../wdb-base.js'
+
+async function btnEdit () {
+  const WdbBase = await wdbBase.call(this)
+
+  return class WdbBtnEdit extends WdbBase {
+    async build () {
+      const { req } = this.component
+      const { generateId } = this.plugin.app.bajo
+      const { isEmpty, get } = this.plugin.app.bajo.lib._
+      this.params.noTag = true
+      const schema = get(this, 'component.locals.schema', {})
+      if (schema.view.disabled.includes('update')) {
+        this.params.html = ''
+        return
+      }
+      if (isEmpty(this.params.attr.content)) this.params.attr.content = req.t('Edit')
+      this.params.attr.color = this.params.attr.color ?? 'secondary-outline'
+      this.params.attr.id = generateId('alpha')
+      if (!this.params.attr.href) this.params.attr.href = this.component.buildUrl({ base: 'edit', exclude: ['id'] })
+      if (this.params.attr.onList) {
+        this.params.attr.split = true
+        this.params.attr.triggerDisabled = true
+        this.params.attr.triggerId = this.params.attr.id
+        this.params.attr['trigger-x-data'] = `{
+          path: '${this.params.attr.href}'
+        }`
+        if (this.params.attr.noClone) {
+          this.params.attr['trigger-@on-selection.window'] = `
+            const recId = $event.detail[0] ?? ''
+            const el = document.getElementById('${this.params.attr.id}')
+            if ($event.detail.length === 1) el.classList.remove('disabled')
+            else el.classList.add('disabled')
+            el.href = path + '&id=' + recId
+          `
+          this.params.html = await this.component.buildTag({ tag: 'btn', attr: this.params.attr, html: this.params.html })
+        } else {
+          this.params.attr['trigger-@on-selection.window'] = `
+            const recId = $event.detail[0] ?? ''
+            const elId = '${this.params.attr.id}'
+            for (const id of [elId, elId + '-split']) {
+              const el = document.getElementById(id)
+              if ($event.detail.length === 1) el.classList.remove('disabled')
+              else el.classList.add('disabled')
+              const href = path + '&id=' + recId
+              if (id.slice(-6) === '-split') {
+                const selector = '#' + id.replace('-split', '-menu') + ' a.dropdown-item'
+                const item = document.querySelector(selector)
+                item.href = href.replace('/edit', '/add') + '&mode=clone'
+              } else el.href = href
+            }
+          `
+          const html = [
+            await this.component.buildTag({ tag: 'dropdownItem', attr: { content: req.t('Add as New Clone') } })
+          ]
+          this.params.attr.triggerColor = this.params.attr.color
+          this.params.html = await this.component.buildTag({ tag: 'dropdown', attr: this.params.attr, html: html.join('\n') })
+        }
+      } else {
+        this.params.attr.href += '&id=' + req.query.id
+        this.params.html = await this.component.buildTag({ tag: 'btn', attr: this.params.attr, html: this.params.html })
+      }
+    }
+  }
+}
+
+export default btnEdit

package/waibuBootstrap/theme/component/factory/btn-export.js

@@ -0,0 +1,138 @@
+import wdbBase from '../wdb-base.js'
+
+async function btnExport () {
+  const WdbBase = await wdbBase.call(this)
+
+  return class WdbBtnExport extends WdbBase {
+    async build () {
+      const { isEmpty, get } = this.plugin.app.bajo.lib._
+      const { req } = this.component
+      this.params.noTag = true
+      const schema = get(this, 'component.locals.schema', {})
+      if (schema.view.disabled.includes('find')) {
+        this.params.html = ''
+        return
+      }
+      if (isEmpty(this.params.attr.launch)) this.params.attr.launch = req.t('Export')
+      this.params.attr.launchColor = this.params.attr.launchColor ?? 'secondary-outline'
+      this.params.attr.title = req.t('Data Export')
+      const html = await this.component.buildSentence(`
+        <c:div x-data="{
+          delivery: 'clipboard',
+          options: [],
+          ftype: 'json',
+          toggle (val) {
+            if (val === 'clipboard') {
+              $refs.zip.setAttribute('disabled', '')
+              $refs.xlsx.setAttribute('disabled', '')
+              $refs.xml.setAttribute('disabled', '')
+              _.pull(this.options, 'zip')
+              if (!['json', 'csv'].includes(this.ftype)) this.ftype = 'json'
+            } else {
+              $refs.zip.removeAttribute('disabled')
+              $refs.xlsx.removeAttribute('disabled')
+              $refs.xml.removeAttribute('disabled')
+            }
+          },
+          extractForm (selector) {
+            let item = {}
+            const els = document.querySelectorAll(selector + ' [data-value]')
+            for (const el of els) {
+              const value = this.options.includes('fvalue') ? el.getAttribute('value') : wmpa.parseValue(el.dataset.value, el.dataset.type)
+              let key = el.getAttribute('name')
+              if (this.options.includes('fkey')) {
+                try {
+                  const elLabel = document.querySelector('label[for=' + el.getAttribute('id') + ']')
+                  key = elLabel.innerText
+                } catch (err) {}
+              }
+              item[key] = value
+            }
+            return this.ftype === 'csv' ? CSVJSON.json2csv(item) : JSON.stringify(item)
+          },
+          extractTable (selector) {
+            let items = []
+            let checker = false
+            const keys = []
+            const types = []
+            let els = document.querySelectorAll(selector + ' thead th')
+            for (const el of els) {
+              keys.push(this.options.includes('fkey') ? el.innerText : el.dataset.key)
+              types.push(el.dataset.type)
+            }
+            if (_.isEmpty(keys[0])) {
+              checker = true
+              keys.shift()
+              types.shift()
+            }
+            els = document.querySelectorAll(selector + ' tbody tr')
+            for (const el of els) {
+              let data = []
+              _.each(el.children, (v, i) => {
+                if ((i + '') === '0' && checker) return undefined
+                data.push(this.options.includes('fvalue') ? v.innerText : wmpa.parseValue(v.dataset.value, types[parseInt(i - 1)]))
+              })
+              const item = {}
+              for (const i in keys) {
+                item[keys[i]] = data[i]
+              }
+              items.push(item)
+            }
+            return this.ftype === 'csv' ? CSVJSON.json2csv(items) : JSON.stringify(items)
+          },
+          async submit () {
+            const instance = wbs.getInstance('Modal', $refs.export)
+            const handler = '${this.params.attr.handler ?? ''}'
+            if (this.delivery === 'clipboard') {
+              const selector = '${this.params.attr.selector}'
+              if (_.isEmpty(selector)) {
+                await wbs.notify('Cant get data selector', { type: 'danger' })
+              } else {
+                const item = handler === 'list' ? this.extractTable(selector) : this.extractForm(selector)
+                await wbs.copyToClipboard(item)
+              }
+              instance.hide()
+              return
+            }
+            wmpa.postForm({ options: this.options.join(','), ftype: this.ftype, handler }, '${this.component.buildUrl({ base: 'export' })}')
+            instance.hide()
+          }
+        }" x-init="
+          toggle(delivery)
+          $watch('delivery', val => toggle(val))
+        ">
+          <c:grid-row gutter="2">
+            <c:grid-col col="6-md">
+              <c:fieldset t:legend="Delivery" legend-type="6">
+                <c:form-radio x-model="delivery" value="file" t:label="Save as File" />
+                <c:form-radio x-model="delivery" value="clipboard" t:label="Copy to Clipboard" />
+              </c:fieldset>
+              <c:fieldset t:legend="Options" legend-type="6" margin="top-2">
+                <c:form-check x-ref="fkey" x-model="options" value="fkey" t:label="Formatted Field" />
+                <c:form-check x-ref="fvalue" x-model="options" value="fvalue" t:label="Formatted Value" />
+                <c:form-check x-ref="zip" x-model="options" value="zip" t:label="Zipped" />
+              </c:fieldset>
+            </c:grid-col>
+            <c:grid-col col="6-md">
+              <c:fieldset t:legend="File Type" legend-type="6">
+                <c:form-radio x-ref="xlsx" x-model="ftype" value="xlsx" t:label="Excel XLSX" />
+                <c:form-radio x-ref="csv" x-model="ftype" value="csv" t:label="CSV" />
+                <c:form-radio x-ref="xml" x-model="ftype" value="xml" t:label="XML" />
+                <c:form-radio x-ref="json" x-model="ftype" value="json" t:label="JSON" />
+              </c:fieldset />
+            </c:grid-col>
+          </c:grid-row>
+          <c:div flex="justify-content:end" margin="top-3">
+            <c:btn color="secondary" t:content="Close" dismiss />
+            <c:btn color="primary" t:content="Submit" margin="start-2" @click="await submit()" />
+          </c:div>
+        </c:div>
+      `)
+      this.params.attr['x-data'] = true
+      this.params.attr['x-ref'] = 'export'
+      this.params.html = await this.component.buildTag({ tag: 'modal', attr: this.params.attr, html })
+    }
+  }
+}
+
+export default btnExport

package/waibuBootstrap/theme/component/factory/echarts.js

@@ -0,0 +1,68 @@
+import wdbBase from '../wdb-base.js'
+
+async function echarts () {
+  const WdbBase = await wdbBase.call(this)
+
+  return class WdbEcharts extends WdbBase {
+    static scripts = [...super.scripts,
+      '^waibuDb.virtual:/echarts/echarts.min.js'
+    ]
+
+    constructor (options) {
+      super(options)
+      this.defOption = {
+        grid: {
+          top: 8,
+          bottom: 20,
+          left: 25,
+          right: 0
+        }
+      }
+    }
+
+    async build () {
+      const { defaultsDeep, generateId } = this.plugin.app.bajo
+      const { base64JsonDecode, jsonStringify } = this.plugin.app.waibuMpa
+      const { cloneDeep } = this.plugin.app.bajo.lib._
+      this._normalizeAttr(this.params, { tag: 'div' })
+      this.params.attr.dim = this.params.attr.dim ?? 'width:100 height:100'
+      this.params.attr.id = generateId('alpha')
+      this.params.attr['x-data'] = `chart${this.params.attr.id}`
+      this.params.attr['@resize.window.debounce.500ms'] = `
+        if (chart) {
+          chart.resize()
+        }
+      `
+      let option = cloneDeep(this.defOption)
+      if (this.params.attr.option === true) this.params.attr.option = 'e30='
+      if (this.params.attr.option) option = defaultsDeep(base64JsonDecode(this.params.attr.option), this.defOption)
+      this.params.attr['x-init'] = `
+        $watch('option', val => {
+          if (chart) chart.setOption(val)
+        })
+      `
+      this.params.append = `
+        <script>
+          document.addEventListener('alpine:init', () => {
+            Alpine.data('chart${this.params.attr.id}', () => {
+              let chart
+              return {
+                init () {
+                  const el = document.getElementById('${this.params.attr.id}')
+                  chart = echarts.init(el, null, { renderer: 'canvas' })
+                  chart.setOption(this.option)
+                },
+                get chart () {
+                  return chart
+                },
+                option: ${jsonStringify(option, true)}
+              }
+            })
+          })
+        </script>
+      `
+    }
+  }
+}
+
+export default echarts

package/waibuBootstrap/theme/component/factory/pagination.js

@@ -0,0 +1,69 @@
+import wdbBase from '../wdb-base.js'
+
+export function getUrlOpts (params = {}) {
+  const { get } = this.plugin.app.bajo.lib._
+  return {
+    params,
+    excludes: [
+      get(this, 'plugin.app.waibu.config.qsKey.lang', 'lang'),
+      get(this, 'plugin.app.waibuMpa.config.darkMode.qsKey', 'dark-mode')
+    ]
+  }
+}
+
+async function pagination () {
+  const WdbBase = await wdbBase.call(this)
+
+  return class WdbPagination extends WdbBase {
+    async build () {
+      const { req } = this.component
+      const { attrToObject, paginationLayout, groupAttrs } = this.plugin.app.waibuMpa
+      const { get, isNumber } = this.plugin.app.bajo.lib._
+      const schema = get(this, 'component.locals.schema', {})
+      if (schema.view.disabled.includes('find')) {
+        this.params.html = ''
+        return
+      }
+      let { count, limit, page } = attrToObject(this.params.attr.options)
+      count = count ?? get(this, 'component.locals.list.count', 0)
+      limit = limit ?? get(this, 'component.locals.list.limit', 25)
+      page = page ?? get(this, 'component.locals.list.page', 1)
+      const pages = paginationLayout(count, limit, page) ?? []
+      this.params.noTag = true
+      const group = groupAttrs(this.params.attr, ['pagination'])
+      const html = []
+      let icon
+      let attr
+      if (this.params.attr.first) {
+        icon = await this.component.buildTag({ tag: 'icon', attr: { name: this.params.attr.firstIcon ?? 'playSkipStart' } })
+        attr = { disabled: page <= pages[0], href: this.component.buildUrl(getUrlOpts.call(this, { page: 1 })) }
+        html.push(await this.component.buildTag({ tag: 'paginationItem', attr, html: icon }))
+      }
+      if (this.params.attr.prev) {
+        icon = await this.component.buildTag({ tag: 'icon', attr: { name: this.params.attr.prevIcon ?? 'playFastBackward' } })
+        attr = { disabled: page <= pages[0], href: this.component.buildUrl(getUrlOpts.call(this, { page: page - 1 })) }
+        html.push(await this.component.buildTag({ tag: 'paginationItem', attr, html: icon }))
+      }
+      if (!this.params.attr.noPages) {
+        for (const p of pages) {
+          attr = { disabled: p === '...', href: this.component.buildUrl(getUrlOpts.call(this, { page: p })), active: p === page }
+          html.push(await this.component.buildTag({ tag: 'paginationItem', attr, html: isNumber(p) ? req.format(p, 'integer') : p }))
+        }
+      }
+      if (this.params.attr.next) {
+        icon = await this.component.buildTag({ tag: 'icon', attr: { name: this.params.attr.nextIcon ?? 'playFastForward' } })
+        attr = { disabled: page >= pages[pages.length - 1], href: this.component.buildUrl(getUrlOpts.call(this, { page: page + 1 })) }
+        html.push(await this.component.buildTag({ tag: 'paginationItem', attr, html: icon }))
+      }
+      if (this.params.attr.last) {
+        icon = await this.component.buildTag({ tag: 'icon', attr: { name: this.params.attr.lastIcon ?? 'playSkipEnd' } })
+        attr = { disabled: page >= pages[pages.length - 1], href: this.component.buildUrl(getUrlOpts.call(this, { page: pages[pages.length - 1] })) }
+        html.push(await this.component.buildTag({ tag: 'paginationItem', attr, html: icon }))
+      }
+      this.params.attr = group.pagination
+      this.params.html = await this.component.buildTag({ tag: 'pagination', attr: this.params.attr, html: html.join('\n') })
+    }
+  }
+}
+
+export default pagination