waibu-db 1.0.1 → 1.0.3

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

@@ -0,0 +1,177 @@
+import wdbBase from '../wdb-base.js'
+
+async function query () {
+  const WdbBase = await wdbBase.call(this)
+
+  return class WdbQuery extends WdbBase {
+    async build () {
+      const { generateId } = this.plugin.app.bajo
+      const { jsonStringify } = this.plugin.app.waibuMpa
+      const { find, get, without, isEmpty, filter, upperFirst } = this.plugin.app.bajo.lib._
+      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
+      fields = filter(fields, f => schema.sortables.includes(f))
+      const id = generateId('alpha')
+      const columns = []
+      const models = []
+      const selects = ['eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'in', 'contains', 'starts', 'ends', '!in', '!contains', '!starts', '!ends']
+      for (const f of schema.view.fields) {
+        if (!fields.includes(f)) continue
+        const prop = find(schema.properties, { name: f })
+        const ops = []
+        if (['float', 'double', 'integer', 'smallint'].includes(prop.type)) ops.push('eq', 'neq', 'gt', 'gte', 'lt', 'lte')
+        else if (['datetime', 'date', 'time'].includes(prop.type)) ops.push('eq', 'neq', 'gt', 'gte', 'lt', 'lte')
+        else if (['boolean'].includes(prop.type)) ops.push('eq', 'neq')
+        else ops.push(...selects)
+        if (ops.length === 0) continue
+        const sels = ops.map(o => `<c:option>${o}</c:option>`)
+        models.push(`${f}Op: 'eq'`, `${f}Val: ''`)
+        columns.push(`
+          <c:grid-col col="4-md" flex="align-items:center">
+            <c:form-check x-model="selected" t:label="field.${f}" value="${f}" />
+          </c:grid-col>
+          <c:grid-col col="3-md">
+            <c:form-select x-model="${f}Op">
+              ${sels.join('\n')}
+            </c:form-select>
+          </c:grid-col>
+          <c:grid-col col="5-md">
+            <c:form-input x-model="${f}Val" />
+          </c:grid-col>
+        `)
+      }
+      this.params.noTag = true
+      const container = this.params.attr.modal ? 'modal' : 'drawer'
+      this.params.html = await this.component.buildSentence(`
+        <c:form-input type="search" t:placeholder="Query" id="${id}" x-data="{ query: '' }" x-init="
+          const url = new URL(window.location.href)
+          query = url.searchParams.get('${qsKey.query}') ?? ''
+        " x-model="query" @on-query.window="query = $event.detail ?? ''" @keyup.enter="$dispatch('on-submit')">
+          <c:form-input-addon>
+            <c:${container} launch-icon="${this.params.attr.icon ?? 'dotsThree'}" launch-on-end t:title="Query Builder" x-ref="query" x-data="{
+              fields: ${jsonStringify(fields, true)},
+              builder: '',
+              selected: [],
+              ${models.join(',\n')},
+              ops: { eq: ':', neq: ':-', gt: ':>', gte: ':>=', lt: ':<', lte: ':<=' },
+              opsIn (v, neg) { return ':' + (neg ? '-' : '') + '[' + this.expandArray(v) + ']' },
+              opsExt (v, neg, ext) {
+                let prefix = (neg ? '-' : '') + '~'
+                if (ext) prefix += ext
+                return ':' + prefix + '\\'' + v + '\\''
+              },
+              initBuilder () {
+                this.builder = document.getElementById('${id}').value
+                if (_.isEmpty(this.builder)) return
+                const tokens = _.merge({}, this.ops, {
+                  in: ':[',
+                  contains: ':~',
+                  starts: ':~^',
+                  ends: ':~$$',
+                  '!in': ':-[',
+                  '!contains': ':-~',
+                  '!starts': ':-~^',
+                  '!ends': ':-~$$'
+                })
+                for (const part of this.builder.split('+')) {
+                  let [f, opv] = part.split(':')
+                  opv = ':' + opv
+                  this.selected.push(f)
+                  let op
+                  let val
+                  _.each(tokens, (v, k) => {
+                    if (opv.slice(0, v.length) === v) {
+                      op = k
+                      val = opv.slice(v.length).replaceAll('[', '').replaceAll(']', '').replaceAll('\\'', '')
+                    }
+                  })
+                  console.log(op, val)
+                  if (_.isEmpty(op)) continue
+                  this[f + 'Op'] = op
+                  this[f + 'Val'] = val
+                }
+              },
+              expandArray (val = '') {
+                return _.map(val.split(','), item => {
+                  item = _.trim(item)
+                  if (Number(item)) return item
+                  return '\\'' + item + '\\''
+                })
+              },
+              rebuild () {
+                const items = []
+                for (const sel of this.selected) {
+                  const key = this[sel + 'Op']
+                  let val = this[sel + 'Val']
+                  if (_.isEmpty(val)) continue
+                  let item
+                  if (key === 'in') item = this.opsIn(val)
+                  else if (key === '!in') item = this.opsIn(val, true)
+                  else if (key === 'contains') item = this.opsExt(val)
+                  else if (key === '!contains') item = this.opsExt(val, true)
+                  else if (key === 'starts') item = this.opsExt(val, false, '^')
+                  else if (key === '!starts') item = this.opsExt(val, true, '^')
+                  else if (key === 'ends') item = this.opsExt(val, false, '$$')
+                  else if (key === '!ends') item = this.opsExt(val, true, '$$')
+                  else if (val.includes(' ')) item = this.ops[key] + '\\'' + val + '\\''
+                  else item = this.ops[key] + val
+                  items.push(sel + item)
+                }
+                this.builder = items.join('+')
+              },
+              submit (run) {
+                if (run) {
+                  const url = new URL(window.location.href)
+                  const params = new URLSearchParams(url.search)
+                  params.set('${qsKey.page}', 1)
+                  params.set('${qsKey.query}', this.builder ?? '')
+                  window.location.href = '?' + params.toString()
+                } else $dispatch('on-query', this.builder)
+                const instance = wbs.getInstance('${upperFirst(container)}', $refs.query)
+                instance.hide()
+              }
+            }" x-init="
+              initBuilder()
+              const ops = _.map(fields, f => (f + 'Op'))
+              const vals = _.map(fields, f => (f + 'Val'))
+              const watcher = ['selected', ...ops, ...vals].join(',')
+              $watch(watcher, v => rebuild())
+            ">
+              <c:grid-row gutter="2">
+                <c:grid-col col="12">
+                  <c:form-textarea x-model="builder" readonly rows="4"/>
+                </c:grid-col>
+                ${columns.join('\n')}
+              </c:grid-row>
+              <c:div flex="justify-content:end" margin="top-3">
+                <c:btn color="secondary" t:content="Close" dismiss="${container}" />
+                <c:btn color="primary" t:content="Apply" margin="start-2" @click="submit()" />
+                <c:btn color="primary" t:content="Submit Query" margin="start-2" @click="submit(true)" />
+              </c:div>
+            </c:${container}>
+          </c:form-input-addon>
+          <c:form-input-addon>
+            <c:btn t:content="Submit" x-data="{
+              submit () {
+                const val = document.getElementById('${id}').value ?? ''
+                const url = new URL(window.location.href)
+                const params = new URLSearchParams(url.search)
+                params.set('${qsKey.page}', 1)
+                params.set('${qsKey.query}', val)
+                window.location.href = '?' + params.toString()
+              }
+            }" @click="submit" @on-submit.window="submit()" />
+          </c:form-input-addon>
+        </c:form-input>
+      `)
+    }
+  }
+}
+
+export default query

package/waibuBootstrap/theme/component/factory/recs-info.js

@@ -0,0 +1,58 @@
+import { getUrlOpts } from './pagination.js'
+import wdbBase from '../wdb-base.js'
+
+async function recsInfo () {
+  const WdbBase = await wdbBase.call(this)
+
+  return class WdbRecsInfo extends WdbBase {
+    async build () {
+      const { req } = this.component
+      const { attrToObject, groupAttrs, attrToArray } = this.plugin.app.waibuMpa
+      const { get, isEmpty, omit, merge } = 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, pages } = attrToObject(this.params.attr.options)
+      count = count ?? get(this, 'component.locals.list.count', 0)
+      page = page ?? get(this, 'component.locals.list.page', 1)
+      limit = limit ?? get(this, 'component.locals.list.limit', 25)
+      pages = pages ?? get(this, 'component.locals.list.pages', 0)
+
+      this.params.tag = 'div'
+      this.params.attr.flex = 'justify-center:start align-items:center'
+      if (count === 0) {
+        this.params.html = req.t('No record found')
+        return
+      }
+      if (!this.params.attr.dropdown) this.params.attr.dropdown = true
+      const group = groupAttrs(this.params.attr, ['dropdown'])
+      const html = []
+      if (this.params.attr.count) html.push(req.t('%s record(s) found', req.format(count, 'integer')))
+      if (this.params.attr.pages) {
+        if (!isEmpty(html)) html[html.length - 1] += '.'
+        html.push(req.t('Page %s of %s pages', req.format(page, 'integer'), req.format(pages, 'integer')))
+      }
+      if (this.params.attr.recsPerPage) {
+        this.params.attr.recsPerPageValues = this.params.attr.recsPerPageValues ?? '10 25 50'
+        this.params.attr.recsPerPageValues = attrToArray(this.params.attr.recsPerPageValues)
+        if (!isEmpty(html)) html[html.length - 1] += ','
+        const items = []
+        for (const i of this.params.attr.recsPerPageValues) {
+          const attr = { href: this.component.buildUrl(merge(getUrlOpts.call(this), { params: { limit: i, page: 1 } })), disabled: i === limit }
+          items.push(await this.component.buildTag({ tag: 'dropdownItem', attr, html: i + '' }))
+        }
+        const attr = group.dropdown
+        attr.content = limit + ''
+        attr.color = attr.color ?? 'secondary-outline'
+        html.push(await this.component.buildTag({ tag: 'dropdown', attr, html: items.join('\n') }))
+        html.push(' ', req.t('recs per page'))
+      }
+      this.params.attr = omit(this.params.attr, ['count', 'pages', 'recsPerPage', 'dropdown', 'recsPerPageValues'])
+      this.params.html = html.map(h => `<div class="me-1">${h}</div>`).join('\n')
+    }
+  }
+}
+
+export default recsInfo

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

@@ -0,0 +1,168 @@
+import wdbBase from '../wdb-base.js'
+
+async function table () {
+  const WdbBase = await wdbBase.call(this)
+
+  return class WdbTable extends WdbBase {
+    isRightAligned (type) {
+      return ['smallint', 'integer', 'float', 'double'].includes(type)
+    }
+
+    async build () {
+      const { req } = this.component
+      const { escape } = this.plugin.app.waibu
+      const { attrToArray, groupAttrs } = this.plugin.app.waibuMpa
+      const { get, omit, set, find, isEmpty, without } = this.plugin.app.bajo.lib._
+      const group = groupAttrs(this.params.attr, ['body', 'head', 'foot'])
+      this.params.attr = group._
+
+      const data = get(this, 'component.locals.list.data', [])
+      const schema = get(this, 'component.locals.schema', {})
+      if (schema.view.disabled.includes('find')) {
+        this.params.html = ''
+        return
+      }
+      const qsKey = this.plugin.app.waibu.config.qsKey
+      let fields = without(get(this, `component.locals._meta.query.${qsKey.fields}`, '').split(','), '')
+      if (isEmpty(fields)) fields = schema.view.fields
+      const sort = this.params.attr.sort ? attrToArray(this.params.attr.sort) : get(this, `component.locals._meta.query.${qsKey.sort}`, '')
+
+      let [sortCol, sortDir] = sort.split(':')
+      if (!['-1', '1'].includes(sortDir)) sortDir = '1'
+
+      let selection
+      const canDelete = !schema.view.disabled.includes('remove')
+      const canEdit = !schema.view.disabled.includes('update')
+      if (canEdit) selection = 'single'
+      if (canDelete) selection = 'multi'
+      if (selection) this.params.attr.hover = true
+
+      this.params.noTag = true
+      const html = []
+      let items = []
+      // head
+      for (const f of schema.view.fields) {
+        if (!fields.includes(f)) continue
+        const prop = find(schema.properties, { name: f })
+        let head = req.t(`field.${f}`)
+        if (!this.params.attr.noSort && (schema.sortables ?? []).includes(f)) {
+          let sortItem = `${f}:-1`
+          let icon = this.params.attr.sortUpIcon ?? 'caretUp'
+          if (f === sortCol) {
+            sortItem = `${f}:${sortDir === '1' ? '-1' : '1'}`
+            icon = sortDir === '1' ? (this.params.attr.sortUpIcon ?? 'caretUp') : (this.params.attr.sortDownIcon ?? 'caretDown')
+          }
+          const item = set({ page: 1 }, qsKey.sort, sortItem)
+          const href = this.component.buildUrl({ params: item })
+          const attr = this.isRightAligned(prop.type) ? { text: 'align:end' } : {}
+          const content = [
+            await this.component.buildTag({ tag: 'div', attr, html: req.t(`field.${f}`) }),
+            await this.component.buildTag({ tag: 'a', attr: { icon, href }, prepend: '<div class="ms-1">', append: '</div>' })
+          ]
+          head = await this.component.buildTag({ tag: 'div', attr: { flex: 'justify-content:between align-items:end' }, html: content.join('\n') })
+        }
+        let text = this.params.attr.headerNowrap ? '' : 'nowrap'
+        if (this.isRightAligned(prop.type)) text += ' align:end'
+        const attr = { dataKey: f, dataType: prop.type, text }
+        items.push(await this.component.buildTag({ tag: 'th', attr, html: head }))
+      }
+      if (items.length > 0 && selection) {
+        let item = '<th></th>'
+        if (selection === 'multi') {
+          const attr = { 'x-model': 'toggleAll', name: '_rtm', noWrapper: true, noLabel: true }
+          item = await this.component.buildTag({ tag: 'formCheck', attr, prepend: '<th>', append: '</th>' })
+        } else {
+          const attr = { name: 'remove', '@click': 'selected = \'\'', style: { cursor: 'pointer' } }
+          item = await this.component.buildTag({ tag: 'icon', attr, prepend: '<th>', append: '</th>' })
+        }
+        items.unshift(item)
+      }
+      const header = await this.component.buildTag({ tag: 'tr', html: items.join('\n') })
+      html.push(await this.component.buildTag({ tag: 'thead', attr: group.head, html: header }))
+      // body
+      items = []
+      for (const d of data) {
+        const lines = []
+        if (selection) {
+          const tag = selection === 'single' ? 'formRadio' : 'formCheck'
+          const attr = { 'x-model': 'selected', name: '_rt', value: d.id, noLabel: true, noWrapper: true }
+          lines.push(await this.component.buildTag({ tag, attr, prepend: '<td>', append: '</td>' }))
+        }
+        for (const f of schema.view.fields) {
+          const prop = find(schema.properties, { name: f })
+          if (!fields.includes(f)) continue
+          const opts = {}
+          if (f === 'lng') opts.longitude = true
+          else if (f === 'lat') opts.latitude = true
+          let value = req.format(d[f], prop.type, opts)
+          if (prop.type === 'boolean') {
+            value = (await this.component.buildTag({ tag: 'icon', attr: { name: `circle${d[f] ? 'Check' : ''}` } })) +
+              ' ' + (req.t(d[f] ? 'Yes' : 'No'))
+          } else value = escape(value)
+          let dataValue = d[f] ?? ''
+          if (['string', 'text'].includes(prop.type)) dataValue = escape(dataValue)
+          if (['array', 'object'].includes(prop.type)) dataValue = escape(JSON.stringify(d[f]))
+          const attr = { dataValue }
+          if (!['object', 'array'].includes(prop.type)) {
+            if (this.isRightAligned(prop.type)) attr.text = 'align:end nowrap'
+            else attr.text = 'nowrap'
+          }
+          const line = await this.component.buildTag({ tag: 'td', attr, html: value })
+          lines.push(line)
+        }
+        const attr = {}
+        if (!schema.view.disabled.includes('update') || !schema.view.disabled.includes('remove')) attr['@click'] = `toggle('${d.id}')`
+        if (!schema.view.disabled.includes('get')) attr['@dblclick'] = `goDetails('${d.id}')`
+        items.push(await this.component.buildTag({ tag: 'tr', attr, html: lines.join('\n') }))
+      }
+      html.push(await this.component.buildTag({ tag: 'tbody', attr: group.body, html: items.join('\n') }))
+      this.params.attr = omit(this.params.attr, ['sortUpIcon', 'sortDownIcon', 'noSort', 'selection', 'headerNowrap'])
+      const goDetails = `
+        goDetails (id) {
+          window.location.href = '${this.component.buildUrl({ base: 'details' })}&id=' + id
+        }
+      `
+      if (selection === 'multi') {
+        this.params.attr['x-data'] = `{
+          toggleAll: false,
+          selected: [],
+          toggle (id) {
+            if (this.selected.includes(id)) {
+              const idx = this.selected.indexOf(id)
+              this.selected.splice(idx, 1)
+            } else this.selected.push(id)
+          },
+          ${goDetails}
+        }`
+        this.params.attr['x-init'] = `
+          $watch('toggleAll', val => {
+            if (val) {
+              const els = document.getElementsByName('_rt')
+              const items = Array.from(els)
+              selected = items.map(el => el.value)
+            } else selected = []
+          })
+          $watch('selected', val => $dispatch('on-selection', val))
+        `
+      } else if (selection === 'single') {
+        this.params.attr['x-data'] = `{
+          selected: '',
+          toggle (id) {
+            this.selected = id
+          },
+          ${goDetails}
+        }`
+        this.params.attr['x-init'] = `
+          $watch('selected', val => $dispatch('on-selection', [val]))
+        `
+      } else {
+        this.params.attr['x-data'] = `{
+          ${goDetails}
+        }`
+      }
+      this.params.html = await this.component.buildTag({ tag: 'table', attr: this.params.attr, html: html.join('\n') })
+    }
+  }
+}
+
+export default table

package/waibuBootstrap/theme/component/wdb-base.js

@@ -0,0 +1,6 @@
+async function wdbBase () {
+  return class WdbBase extends this.baseFactory {
+  }
+}
+
+export default wdbBase

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

@@ -1,15 +0,0 @@
-async function btnAdd (params = {}) {
-  const { isEmpty, get } = this.plugin.app.bajo.lib._
-  params.noTag = true
-  const schema = get(this, 'locals.schema', {})
-  if (schema.view.disabled.includes('create')) {
-    params.html = ''
-    return
-  }
-  if (isEmpty(params.attr.content)) params.attr.content = this.req.t('Add')
-  params.attr.color = params.attr.color ?? 'secondary-outline'
-  if (!params.attr.href) params.attr.href = this._buildUrl({ base: 'add' })
-  params.html = await this.buildTag({ tag: 'btn', attr: params.attr, html: params.html })
-}
-
-export default btnAdd

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

@@ -1,13 +0,0 @@
-async function btnBack (params = {}) {
-  const { isEmpty } = this.plugin.app.bajo.lib._
-  const { attrToArray } = this.plugin.app.waibuMpa
-  params.noTag = true
-  if (isEmpty(params.attr.content)) params.attr.content = this.req.t('Back')
-  if (isEmpty(params.attr.icon)) params.attr.icon = 'arrowStart'
-  params.attr.color = params.attr.color ?? 'secondary-outline'
-  params.attr.excludeQs = ['mode', 'id', ...attrToArray(params.attr.excludeQs ?? '')]
-  if (!params.attr.href) params.attr.href = this._buildUrl({ base: 'list', exclude: params.attr.excludeQs })
-  params.html = await this.buildTag({ tag: 'btn', attr: params.attr, html: params.html })
-}
-
-export default btnBack

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

@@ -1,30 +0,0 @@
-async function btnClone (params = {}) {
-  const { isEmpty, get } = this.plugin.app.bajo.lib._
-  params.noTag = true
-  const schema = get(this, 'locals.schema', {})
-  if (schema.view.disabled.includes('create')) {
-    params.html = ''
-    return
-  }
-  if (isEmpty(params.attr.content)) params.attr.content = this.req.t('Clone')
-  params.attr.color = params.attr.color ?? 'secondary-outline'
-  if (!params.attr.href) params.attr.href = this._buildUrl({ base: 'add', exclude: ['id'] }) + '&mode=clone'
-  if (params.attr.onList) {
-    params.attr['x-ref'] = 'clone'
-    params.attr.disabled = true
-    params.attr['x-data'] = `{
-      path: '${params.attr.href}'
-    }`
-    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 {
-    params.attr.href += '&id=' + this.req.query.id
-  }
-  params.html = await this.buildTag({ tag: 'btn', attr: params.attr, html: params.html })
-}
-
-export default btnClone

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

@@ -1,45 +0,0 @@
-async function btnColumns (params = {}) {
-  const { get, isEmpty, without } = this.plugin.app.bajo.lib._
-  const { jsonStringify } = this.plugin.app.waibuMpa
-  const qsKey = this.plugin.app.waibu.config.qsKey
-  const schema = get(this, 'locals.schema', {})
-  if (schema.view.disabled.includes('find')) {
-    params.html = ''
-    return
-  }
-  let fields = without(get(this, `locals._meta.query.${qsKey.fields}`, '').split(','), '')
-  if (isEmpty(fields)) fields = schema.view.fields
-  const items = []
-  params.attr.color = params.attr.color ?? 'secondary-outline'
-  if (isEmpty(params.attr.content)) params.attr.content = this.req.t('Columns')
-  for (const f of schema.view.fields) {
-    if (f === 'id') {
-      items.push(await this.buildTag({ tag: 'formCheck', attr: { checked: true, label: this.req.t('ID'), value: f, disabled: true } }))
-      continue
-    }
-    const attr = { 'x-model': 'selected', label: this.req.t(`field.${f}`), value: f }
-    if (fields.includes(f)) attr.checked = true
-    items.push(await this.buildTag({ tag: 'formCheck', attr }))
-  }
-  const href = this._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: params.attr.applyColor ?? 'primary', icon: params.attr.applyIcon ?? 'arrowsStartEnd', href }
-  html.push(await this.buildTag({ tag: 'btn', attr, html: this.req.t('Apply') }))
-  html.push('</form>')
-  params.attr.autoClose = 'outside'
-  params.html = await this.buildTag({ tag: 'dropdown', attr: params.attr, html: html.join('\n') })
-  params.noTag = true
-}
-
-export default btnColumns

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

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

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

@@ -1,32 +0,0 @@
-async function btnDetails (params = {}) {
-  const { generateId } = this.plugin.app.bajo
-  const { isEmpty, get } = this.plugin.app.bajo.lib._
-  params.noTag = true
-  const schema = get(this, 'locals.schema', {})
-  if (schema.view.disabled.includes('update')) {
-    params.html = ''
-    return
-  }
-  if (isEmpty(params.attr.content)) params.attr.content = this.req.t('Details')
-  params.attr.color = params.attr.color ?? 'secondary-outline'
-  params.attr.id = generateId('alpha')
-  if (!params.attr.href) params.attr.href = this._buildUrl({ base: 'details', exclude: ['id'] })
-  if (params.attr.onList) {
-    params.attr.disabled = true
-    params.attr['x-ref'] = 'details'
-    params.attr['x-data'] = `{
-      path: '${params.attr.href}'
-    }`
-    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 {
-    params.attr.href += '&id=' + this.req.query.id
-  }
-  params.html = await this.buildTag({ tag: 'btn', attr: params.attr, html: params.html })
-}
-
-export default btnDetails

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

@@ -1,56 +0,0 @@
-async function btnEdit (params = {}) {
-  const { generateId } = this.plugin.app.bajo
-  const { isEmpty, get } = this.plugin.app.bajo.lib._
-  params.noTag = true
-  const schema = get(this, 'locals.schema', {})
-  if (schema.view.disabled.includes('update')) {
-    params.html = ''
-    return
-  }
-  if (isEmpty(params.attr.content)) params.attr.content = this.req.t('Edit')
-  params.attr.color = params.attr.color ?? 'secondary-outline'
-  params.attr.id = generateId('alpha')
-  if (!params.attr.href) params.attr.href = this._buildUrl({ base: 'edit', exclude: ['id'] })
-  if (params.attr.onList) {
-    params.attr.split = true
-    params.attr.disabled = true
-    params.attr['x-data'] = `{
-      path: '${params.attr.href}'
-    }`
-    if (params.attr.noClone) {
-      params.attr['@on-selection.window'] = `
-        const recId = $event.detail[0] ?? ''
-        const el = document.getElementById('${params.attr.id}')
-        if ($event.detail.length === 1) el.classList.remove('disabled')
-        else el.classList.add('disabled')
-        el.href = path + '&id=' + recId
-      `
-      params.html = await this.buildTag({ tag: 'btn', attr: params.attr, html: params.html })
-    } else {
-      params.attr['@on-selection.window'] = `
-        const recId = $event.detail[0] ?? ''
-        const elId = '${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.buildTag({ tag: 'dropdownItem', attr: { content: this.req.t('Add as New Clone') } })
-      ]
-      params.html = await this.buildTag({ tag: 'dropdown', attr: params.attr, html: html.join('\n') })
-    }
-  } else {
-    params.attr.href += '&id=' + this.req.query.id
-    params.html = await this.buildTag({ tag: 'btn', attr: params.attr, html: params.html })
-  }
-}
-
-export default btnEdit