waibu-bootstrap 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Ardhi Lukianto
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,23 @@
+# waibu-bootstrap
+
+Plugin name: **waibuBootstrap**, alias: **wbs**
+
+![GitHub package.json version](https://img.shields.io/github/package-json/v/ardhi/waibu-bootstrap) ![NPM Version](https://img.shields.io/npm/v/waibu-bootstrap)
+
+> <br />**Attention**: I do NOT accept any pull request at the moment, thanks!<br /><br />
+
+Bootstrap support for [Waibu MPA](https://github.com/ardhi/waibu-mpa)
+
+## Installation
+
+Goto your ```<bajo-base-dir>``` and type:
+
+```bash
+$ npm install waibu-bootstrap
+```
+
+Now open your ```<bajo-data-dir>/config/.plugins``` and put ```waibu-bootstrap``` in it.
+
+## License
+
+[MIT](LICENSE)

package/bajo/.alias

@@ -0,0 +1 @@
+wbs

package/bajo/config.json

@@ -0,0 +1,6 @@
+{
+  "waibu": {
+    "prefix": "bootstrap"
+  },
+  "dependencies": ["waibu-mpa", "waibu-extra"]
+}

package/bajo/hook/waibu-mpa.bootstrap@after-build-page.js

@@ -0,0 +1,5 @@
+async function waibuMpaBootstrapAfterBuildPage ({ $, req }) {
+  if (req.darkMode) $('html').attr('data-bs-theme', 'dark')
+}
+
+export default waibuMpaBootstrapAfterBuildPage

package/bajoI18N/resource/id.json

@@ -0,0 +1,2 @@
+{
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "waibu-bootstrap",
+  "version": "1.0.1",
+  "description": "Bootstrap suport for Waibu Framework",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ardhi/waibu-bootstrap.git"
+  },
+  "keywords": [
+    "bootstrap",
+    "waibu",
+    "web",
+    "webserver",
+    "bajo",
+    "framework",
+    "fastify",
+    "modular"
+  ],
+  "author": "Ardhi Lukianto <ardhi@lukianto.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ardhi/waibu-bootstrap/issues"
+  },
+  "homepage": "https://github.com/ardhi/waibu-bootstrap#readme",
+  "dependencies": {
+    "bootstrap": "^5.3.3"
+  }
+}

package/waibuMpa/theme/component/factory/_lib.js

@@ -0,0 +1,140 @@
+import { sizes } from '../method/after-build-tag/_lib.js'
+
+function getInputAttr (group, formControl = true, ro) {
+  const { omit, get, isPlainObject, isArray, isString, has } = this.plugin.app.bajo.lib._
+  const { escape } = this.plugin.app.waibu
+  if (formControl) group._.class.push('form-control')
+  const attr = omit(group._, ['hint', 'label', 'wrapper'])
+  if (has(attr, 'name') && !attr.value && this.component.locals.form) {
+    attr.dataType = attr.dataType ?? 'auto'
+    const val = get(this, `locals.form.${attr.name}`)
+    if (isPlainObject(val) || isArray(val)) attr.dataValue = escape(JSON.stringify(val))
+    else if (isString(val)) attr.dataValue = escape(val)
+    else attr.dataValue = val
+    if (ro) {
+      if (attr.dataType === 'boolean') attr.value = this.component.req.t(val ? 'Yes' : 'No')
+      else if (has(attr, 'name') === 'lat') attr.value = escape(this.component.req.format(val, attr.dataType, { latitude: true }))
+      else if (has(attr, 'name') === 'lng') attr.value = escape(this.component.req.format(val, attr.dataType, { longitude: true }))
+      else attr.value = escape(this.component.req.format(val, attr.dataType))
+    } else attr.value = attr.dataValue
+  }
+  if (sizes.includes(attr.size) && formControl) attr.class.push(`form-control-${attr.size}`)
+  return omit(attr, ['size', 'col'])
+}
+
+export async function buildFormHint (group, tag, cls) {
+  if (!group.hint.id && group._.id) group.hint.id = group._.id + '-hint'
+  group.hint.class.push(cls ?? 'form-text')
+  return await this.component.render({ tag: tag ?? 'div', attr: group.hint, html: group._.hint })
+}
+
+export async function buildFormLabel (group, tag, cls) {
+  const { omit } = this.plugin.app.bajo.lib._
+  group.label.for = group._.id
+  if (!group.label.floating) group.label.class.push(cls ?? 'form-label')
+  group.label = omit(group.label, ['floating'])
+  return await this.component.render({ tag: tag ?? 'label', attr: group.label, html: group._.label })
+}
+
+export async function buildFormInput (group, params) {
+  const attr = getInputAttr.call(this, group)
+  return await this.component.render({ tag: 'input', attr, selfClosing: true })
+}
+
+export async function buildFormCheck (group, params) {
+  const { has, get } = this.plugin.app.bajo.lib._
+  const attr = getInputAttr.call(this, group, false)
+  attr.type = 'checkbox'
+  attr.class.push('form-check-input')
+  if (has(attr, 'name') && !attr.value) attr.value = 'true'
+  if (has(attr, 'name') && !has(attr, 'checked') && attr.value === get(this, `locals.form.${attr.name}`)) attr.checked = true
+  return await this.component.render({ tag: 'input', attr, selfClosing: true })
+}
+
+export async function buildFormSwitch (group, params) {
+  const { has, get } = this.plugin.app.bajo.lib._
+  const attr = getInputAttr.call(this, group, false)
+  attr.type = 'checkbox'
+  attr.class.push('form-check-input')
+  attr.role = 'switch'
+  if (has(attr, 'name') && !attr.value) attr.value = 'true'
+  if (has(attr, 'name') && !has(attr, 'checked') && attr.value === get(this, `locals.form.${attr.name}`)) attr.checked = true
+  return await this.component.render({ tag: 'input', attr, selfClosing: true })
+}
+
+export async function buildFormRadio (group, params) {
+  const attr = getInputAttr.call(this, group, false)
+  attr.type = 'radio'
+  attr.class.push('form-check-input')
+  return await this.component.render({ tag: 'input', attr, selfClosing: true })
+}
+
+export async function buildFormCheckToggle (group, params) {
+  const attr = getInputAttr.call(this, group, false)
+  attr.type = 'checkbox'
+  attr.autocomplete = 'off'
+  attr.class.push('btn-check')
+  return await this.component.render({ tag: 'input', attr, selfClosing: true })
+}
+
+export async function buildFormRadioToggle (group, params) {
+  const attr = getInputAttr.call(this, group, false)
+  attr.type = 'radio'
+  attr.autocomplete = 'off'
+  attr.class.push('btn-check')
+  return await this.component.render({ tag: 'input', attr, selfClosing: true })
+}
+
+export async function buildFormPlaintext (group, params) {
+  const attr = getInputAttr.call(this, group, false, true)
+  attr.class.push('form-control-plaintext')
+  attr.readonly = ''
+  return await this.component.render({ tag: 'input', attr, selfClosing: true })
+}
+
+export async function buildFormColor (group, params) {
+  const attr = getInputAttr.call(this, group)
+  attr.class.push('form-control-color')
+  attr.type = 'color'
+  return await this.component.render({ tag: 'input', attr, selfClosing: true })
+}
+
+export async function buildFormFile (group, params) {
+  const attr = getInputAttr.call(this, group)
+  attr.type = 'file'
+  return await this.component.render({ tag: 'input', attr, selfClosing: true })
+}
+
+export async function buildFormTextarea (group, params) {
+  const attr = getInputAttr.call(this, group)
+  params.html = attr.value
+  delete attr.value
+  return await this.component.render({ tag: 'textarea', attr, html: params.html })
+}
+
+export async function buildFormSelect (group, params) {
+  const { omit, trim } = this.plugin.app.bajo.lib._
+  const { $ } = this.component
+  let attr = getInputAttr.call(this, group, false)
+  attr.value = attr.value + ''
+  attr.class.push('form-select')
+  let html = params.html
+  if (sizes.includes(attr.size)) attr.class.push(`form-select-${attr.size}`)
+  if (attr.options) html = this._buildOptions({ attr, html: '' })
+  else {
+    const items = []
+    $(`<div>${trim(html ?? '')}</div>`).find('option').each(function () {
+      items.push(trim($(this).prop('outerHTML')))
+    })
+    html = items.join('\n')
+  }
+  attr = omit(attr, ['size', 'type', 'options', 'value'])
+  return await this.component.render({ tag: 'select', attr, html })
+}
+
+export async function buildFormRange (group, params) {
+  const attr = getInputAttr.call(this, group, false)
+  attr.type = 'range'
+  attr.class.push('form-range')
+  return await this.component.render({ tag: 'input', attr, selfClosing: true })
+}

package/waibuMpa/theme/component/factory/a.js

@@ -0,0 +1,12 @@
+async function a () {
+  return class A extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.component.normalizeAttr(this.params, { tag: 'a' })
+      if (!this.params.attr.href) this.params.attr.href = '#'
+      if (this.params.html.includes('<i class="')) this.params.attr.class.push('icon-link')
+    }
+  }
+}
+
+export default a

package/waibuMpa/theme/component/factory/accordion-item.js

@@ -0,0 +1,34 @@
+const cls = 'accordion-item'
+
+async function accordionItem () {
+  return class AccordionItem extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+      this.component.normalizeAttr(this.params, { tag: 'div', cls, autoId: true })
+      this.params.attr.body = this.params.attr.body ?? true
+    }
+
+    async build () {
+      const { omit, without } = this.plugin.app.bajo.lib._
+      const { groupAttrs } = this.plugin.app.waibuMpa
+      const group = groupAttrs(this.params.attr, ['body'])
+      if (!group.body.noPadding) group.body.class.push('accordion-body')
+      const clsList = without(this.params.attr.class, cls)
+      const header = ['<h2 class="accordion-header">',
+        `<button class="${this.params.attr.narrowHeader ? 'px-3 py-2 ' : ''}accordion-button${this.params.attr.showOnStart ? '' : ' collapsed'}"`,
+        `type="button" data-bs-toggle="collapse" data-bs-target="#${this.params.attr.id}"`,
+        `aria-expanded="${this.params.attr.showOnStart}"`,
+        'x-data',
+        `@click="$dispatch('accordion-item', { id: $el.closest('.accordion').id, cls: '${clsList.join(' ')}' })"`,
+        `aria-controls="${this.params.attr.id}">${this.params.attr.header}</button></h2>`]
+      const body = await this.component.buildTag({ tag: 'div', attr: group.body, html: this.params.html })
+      const details = [`<div id="${this.params.attr.id}" class="accordion-collapse collapse${this.params.attr.showOnStart ? ' show' : ''}">`,
+        body, '</div']
+      this.params.html = `${header.join(' ')}\n${details.join(' ')}`
+      this.params.attr = omit(this.params.attr, ['id', 'noPadding', 'narrowHeader', 'bodyClass'])
+    }
+  }
+}
+
+export default accordionItem

package/waibuMpa/theme/component/factory/accordion.js

@@ -0,0 +1,24 @@
+const cls = 'accordion'
+
+async function accordion () {
+  return class Accordion extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+      this.component.normalizeAttr(this.params, { tag: 'div', cls, autoId: true })
+      if (this.params.attr.noBorder) this.params.attr.class.push('accordion-flush')
+    }
+
+    async build () {
+      const { $ } = this.component
+      if (!this.params.attr.alwaysOpen) {
+        const me = this
+        this.params.html = $(`<div>${this.params.html}</div>`).children().each(function () {
+          $(this).find('.accordion-collapse').prop('data-bs-parent', '#' + me.params.attr.id)
+        }).parent().html()
+      }
+    }
+  }
+}
+
+export default accordion

package/waibuMpa/theme/component/factory/alert.js

@@ -0,0 +1,33 @@
+import { colors, parseVariant } from '../method/after-build-tag/_lib.js'
+
+const cls = 'alert'
+
+async function alert () {
+  return class Alert extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      const { without } = this.plugin.app.bajo.lib._
+      this.selector = '.' + cls
+      const myColors = without(colors, 'link')
+      this.component.normalizeAttr(this.params, { cls, tag: 'div', role: 'alert' })
+      if (this.params.attr.color) this.params.attr.class.push(parseVariant.call(this, { cls, value: this.params.attr.color, values: myColors, prepend: true }))
+    }
+
+    async build () {
+      const { isEmpty } = this.plugin.app.bajo.lib._
+      const { $ } = this.component
+      const html = $(`<div>${this.params.html}</div>`).children().each(function () {
+        if (this.name === 'a') $(this).addClass('alert-link')
+        if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(this.name)) $(this).addClass('alert-heading')
+      }).parent().html()
+      if (!isEmpty(html)) this.params.html = html
+      if (this.params.attr.dismiss) {
+        this.params.attr.class.push('alert-dismissible', 'fade', 'show')
+        const attr = { 'data-bs-dismiss': 'alert' }
+        this.params.html += await this.component.buildTag({ tag: 'btnClose', attr })
+      }
+    }
+  }
+}
+
+export default alert

package/waibuMpa/theme/component/factory/app-launcher-trigger.js

@@ -0,0 +1,37 @@
+async function appLauncherTrigger () {
+  return class AppLauncherTrigger extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      const { isString } = this.plugin.app.bajo.lib._
+      this.params.attr.color = this.params.attr.color ?? 'color:body-emphasis'
+      this.params.attr.text = this.params.attr.text ?? 'decoration:none'
+      this.params.attr.display = 'type:block'
+      this.params.attr.flex = 'justify-content:center align-items:center'
+      this.params.attr.href = this.params.attr.href ?? '#'
+      if (isString(this.params.attr.open)) {
+        const [id, type = 'modal'] = this.params.attr.open.split(':')
+        this.params.attr['data-bs-target'] = `#${id}`
+        this.params.attr['data-bs-toggle'] = type === 'drawer' ? 'offcanvas' : type
+        this.params.attr['aria-controls'] = id
+      }
+      this.params.attr.padding = this.params.attr.padding ?? 'all-1'
+      this.params.attr.imgDimWidth = this.params.attr.imgDimWidth ?? 48
+      this.params.attr.imgDimHeight = this.params.attr.imgDimHeight ?? 48
+    }
+
+    async build () {
+      const { fastGlob } = this.plugin.app.bajo.lib
+      const { get, omit, merge } = this.plugin.app.bajo.lib._
+      let logo = 'waibu'
+      const files = await fastGlob(`${this.plugin.app.main.dir.pkg}/bajo/logo.*`)
+      if (files.length > 0) logo = 'main'
+      this.params.tag = 'a'
+      const logoStyle = get(this, `plugin.app.${logo}.config.waibu.logoStyle`)
+      if (logoStyle) this.params.attr.style = merge({}, logoStyle, this.params.attr.style)
+      this.params.html = await this.component.buildSentence(`<c:img width="${this.params.attr.imgDimWidth}" height="${this.params.attr.imgDimHeight}" src="waibuMpa:/logo/${logo}" />`)
+      this.params.attr = omit(this.params.attr, ['imgDimHeight', 'imgDimWidth'])
+    }
+  }
+}
+
+export default appLauncherTrigger

package/waibuMpa/theme/component/factory/app-launcher.js

@@ -0,0 +1,55 @@
+async function appLauncher () {
+  return class AppLauncher extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      const { generateId } = this.plugin.app.bajo
+      this.params.noTag = true
+      this.params.attr.id = this.params.attr.id ?? generateId('alpha')
+      this.params.attr.type = this.params.attr.type ?? 'drawer'
+    }
+
+    async build () {
+      const { groupAttrs, attrToArray } = this.plugin.app.waibuMpa
+      const group = groupAttrs(this.params.attr, ['trigger'])
+      let launcher = `<c:drawer id="${this.params.attr.id}" t:title="Modules" no-padding>\n`
+      launcher += '<c:div padding="start-3 bottom-3 end-3">'
+      if (this.params.attr.type === 'modal') launcher = `<c:modal id="${this.params.attr.id}" t:title="Modules" centered>\n`
+      const toolbar = attrToArray(this.params.attr.toolbar)
+      if (toolbar.length > 0) {
+        launcher += '<c:navbar>\n<c:nav tag="ul" dim="width:100" flex="justify-content:end">\n'
+        for (const t of toolbar) {
+          if (t === 'user') launcher += '<c:nav-dropdown-user />\n'
+          if (t === '-') launcher += '<c:nav-divider />\n'
+          if (t === 'fullscreen') launcher += '<c:nav-toggle-fullscreen />\n'
+          if (t === 'darkmode') launcher += '<c:nav-dropdown-darkmode dropdown-menu="end" />\n'
+          if (t === 'language') launcher += '<c:nav-dropdown-language dropdown-menu="end" />\n'
+        }
+        launcher += '</c:nav></c:navbar>\n'
+      }
+      launcher += '<c:grid-row gutter="1">\n'
+      for (const m of (this.component.locals.menu.homes ?? [])) {
+        launcher += `
+          <c:grid-col col="4" text="align:center">
+            <c:a href="${m.href}" display="type:block" border rounded padding="all-2" text="decoration:none">
+              <c:img src="waibuMpa:/logo/${m.ns}" height="60" fluid/>
+              <c:div margin="top-2">${m.title}</c:div>
+            </c:a>
+          </c:grid-col>
+        `
+      }
+      launcher += '</c:grid-row>\n'
+      if (this.params.attr.type === 'modal') launcher += '</c:modal>'
+      else launcher += '</c:div></c:drawer>'
+      let trigger = ''
+      if (group.trigger) {
+        this.params.attr = group._
+        group.trigger.open = `${this.params.attr.id}:drawer`
+        trigger = await this.component.buildTag({ tag: 'appLauncherTrigger', attr: group.trigger })
+      }
+      launcher = `${trigger} ${launcher}`
+      this.params.html = await this.component.buildSentence(launcher)
+    }
+  }
+}
+
+export default appLauncher

package/waibuMpa/theme/component/factory/badge.js

@@ -0,0 +1,24 @@
+const cls = 'badge'
+
+async function badge () {
+  return class Badge extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+      this.component.normalizeAttr(this.params, { tag: 'span' })
+    }
+
+    async build () {
+      const { isString, omit } = this.plugin.app.bajo.lib._
+      if (isString(this.params.attr.alt)) this.params.html += `<span class="visually-hidden">${this.params.attr.alt}</span>`
+      if (this.params.attr.dot) {
+        this.params.attr.class.push('p-2')
+        this.params.html = ''
+      } else this.params.attr.class.push(cls)
+
+      this.params.attr = omit(this.params.attr, ['alt', 'dot'])
+    }
+  }
+}
+
+export default badge

package/waibuMpa/theme/component/factory/blockquote.js

@@ -0,0 +1,22 @@
+const cls = 'blockquote'
+
+async function blockquote () {
+  return class Blockquote extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+    }
+
+    async build () {
+      const { isString } = this.plugin.app.bajo.lib._
+      this.component.normalizeAttr(this.params, { cls })
+      if (isString(this.params.attr.attribution)) {
+        this.params.prepend = '<figure>'
+        this.params.append = `<figcaption class="blockquote-footer">${this.params.attr.attribution}</figcaption></figure>`
+        delete this.params.attr.attribution
+      }
+    }
+  }
+}
+
+export default blockquote

package/waibuMpa/theme/component/factory/breadcrumb-item.js

@@ -0,0 +1,27 @@
+const cls = 'breadcrumb-item'
+
+async function breadcrumbItem () {
+  return class BreadcrumbItem extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+      this.component.normalizeAttr(this.params, { tag: 'li', cls })
+    }
+
+    async build () {
+      const { omit } = this.plugin.app.bajo.lib._
+      const { attrToArray } = this.plugin.app.waibuMpa
+      if (this.params.attr.href) {
+        if (this.params.attr.hrefRebuild) {
+          this.params.attr.hrefRebuild = attrToArray(this.params.attr.hrefRebuild)
+          const [path, ...exclude] = this.params.attr.hrefRebuild
+          this.params.attr.href = this.component.buildUrl({ exclude, base: path })
+        }
+        this.params.html = `<a href="${this.params.attr.href}">${this.params.html}</a>`
+      }
+      this.params.attr = omit(this.params.attr, ['href', 'hrefRebuild'])
+    }
+  }
+}
+
+export default breadcrumbItem

package/waibuMpa/theme/component/factory/breadcrumb.js

@@ -0,0 +1,64 @@
+const cls = 'breadcrumb'
+
+function bcHandler (href, source, opts = {}) {
+  const { last } = this.plugin.app.bajo.lib._
+  const { titleize } = this.plugin.app.bajo
+  const parts = href.split('/')
+  const content = titleize(last(parts))
+  if (href === source) return { content }
+  return { content, href, hrefRebuild: opts.hrefRebuild }
+}
+
+async function generateItems (breadcrumb) {
+  const html = []
+  for (const b of breadcrumb) {
+    let href = ''
+    if (b.href) {
+      href = 'href="' + b.href + '"'
+      if (b.hrefRebuild) {
+        href += ' href-rebuild="' + b.hrefRebuild.join(' ') + '"'
+      }
+    }
+    const icon = b.icon ? (' icon="' + b.icon + '"') : ''
+    const title = b.href && b.hrefRebuild && !this.component.locals._meta.this.params.model ? this.component.locals.page.title : b.content
+    const content = b.content ? (' t:content="' + title + '"') : ''
+    const active = b.href ? ' active' : ''
+    html.push(`<c:breadcrumb-item ${icon} ${href} ${content} ${active} />`)
+  }
+  return await this.component.buildSentence(html.join('\n'))
+}
+
+async function breadcrumb () {
+  return class Breadcrumb extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+      this.component.normalizeAttr(this.params, { tag: 'ol', cls })
+    }
+
+    async build () {
+      const { isString, omit } = this.plugin.app.bajo.lib._
+      const { routePath } = this.plugin.app.waibu
+      const { urlToBreadcrumb, attrToArray } = this.plugin.app.waibuMpa
+      let divider = ''
+      if (this.params.attr.noDivider) divider = ' style="--bs-breadcrumb-divider: \'\';"'
+      else if (isString(this.params.attr.divider)) divider = ` style="--bs-breadcrumb-divider: '${this.params.attr.divider}';"`
+      this.params.prepend = `<nav aria-label="breadcrumb"${divider}>`
+      this.params.append = '</nav>'
+      if (this.params.attr.autoFill && this.component.locals.breadcrumb) {
+        this.params.html = await generateItems.call(this, this.component.locals.breadcrumb)
+      } else if (this.params.attr.autoDetect) {
+        const url = isString(this.params.attr.autoDetect) ? this.params.attr.autoDetect : this.component.locals._meta.url
+        const handlerOpts = {}
+        if (this.params.attr.hrefRebuild === true) this.params.attr.hrefRebuild = 'list id mode'
+        if (isString(this.params.attr.hrefRebuild)) handlerOpts.hrefRebuild = attrToArray(this.params.attr.hrefRebuild)
+        const breadcrumb = urlToBreadcrumb(routePath(url), { handler: bcHandler, handlerScope: this, handlerOpts })
+        if (!this.params.attr.noHome) breadcrumb.unshift({ icon: 'house', href: '/' })
+        this.params.html = await generateItems.call(this, breadcrumb)
+      }
+      this.params.attr = omit(this.params.attr, ['divider', 'autoFill', 'autoDetect', 'autoDetectHome', 'hrefRebuild'])
+    }
+  }
+}
+
+export default breadcrumb

package/waibuMpa/theme/component/factory/btn-back-to-top.js

@@ -0,0 +1,40 @@
+async function btnBackToTop () {
+  return class BtnBackToTop extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.params.noTag = true
+      this.params.attr.icon = this.params.attr.icon ?? 'arrowUp'
+      this.params.attr.color = this.params.attr.color ?? 'primary'
+      this.params.attr.revealAt = this.params.attr.revealAt ?? '20'
+      this.params.attr.style = {
+        position: 'fixed',
+        bottom: '20px',
+        right: '20px',
+        display: 'none'
+      }
+    }
+
+    async build () {
+      this.params.attr['x-data'] = `{
+        scroll () {
+          if (document.body.scrollTop > ${this.params.attr.revealAt} || document.documentElement.scrollTop > ${this.params.attr.revealAt}) {
+            this.$refs.btn.style.display = 'block'
+          } else {
+            this.$refs.btn.style.display = 'none'
+          }
+        },
+        toTop () {
+          document.body.scrollTop = 0
+          document.documentElement.scrollTop = 0
+        }
+      }`
+      this.params.attr['@scroll.window'] = 'scroll()'
+      this.params.attr['x-ref'] = 'btn'
+      this.params.attr['@click'] = 'toTop()'
+      delete this.params.attr.revealAt
+      this.params.html = await this.component.buildTag({ tag: 'btn', attr: this.params.attr })
+    }
+  }
+}
+
+export default btnBackToTop

package/waibuMpa/theme/component/factory/btn-close.js

@@ -0,0 +1,18 @@
+const cls = 'btn-close'
+
+async function btnClose () {
+  return class BtnClose extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+      this.component.normalizeAttr(this.params, { tag: 'button', cls, type: 'button', ariaLabel: this.component.req.t('Close') })
+      const { isString } = this.plugin.app.bajo.lib._
+      if (this.params.attr.close) this.params.attr.dataBsDismiss = isString(this.params.attr.close) ? this.params.attr.close : 'modal'
+      if (this.params.attr.disabled) this.params.attr.class.push('disabled')
+      this.params.html = ''
+      delete this.params.attr.disabled
+    }
+  }
+}
+
+export default btnClose