waibu-bootstrap 2.1.0 → 2.1.2

package/extend/waibuMpa/theme/component/{factory → widget}/a.js

@@ -1,5 +1,5 @@
 async function a () {
-  return class A extends this.baseFactory {
+  return class A extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.component.normalizeAttr(this.params, { tag: 'a' })

package/extend/waibuMpa/theme/component/{factory → widget}/accordion-item.js

@@ -1,7 +1,7 @@
 const cls = 'accordion-item'
 
 async function accordionItem () {
-  return class AccordionItem extends this.baseFactory {
+  return class AccordionItem extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls
@@ -16,13 +16,18 @@ async function accordionItem () {
       if (!group.body.noPadding) group.body.class.push('accordion-body')
       const clsList = without(this.params.attr.class, cls)
       group.header.class.push('accordion-header')
-      const header = [`<c:h2 ${stringifyAttribs(group.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}"><c:span margin="end-2">${this.params.attr.header}</c:span></button></c:h2>`]
+      const btnAttr = {
+        class: `${this.params.attr.narrowHeader ? 'px-3 py-2 ' : ''}accordion-button${this.params.attr.showOnStart ? '' : ' collapsed'}`,
+        type: 'button',
+        dataBsToggle: 'collapse',
+        dataBsTarget: `#${this.params.attr.id}`,
+        ariaExpanded: this.params.attr.showOnStart,
+        ariaControls: this.params.attr.id,
+        'x-data': true,
+        '@click': `$dispatch('accordion-item', { id: $el.closest('.accordion').id,  cls: '${clsList.join(' ')}' })`
+      }
+      const btn = await this.component.buildTag({ tag: 'button', attr: btnAttr, html: `<c:span margin="end-2">${this.params.attr.header}</c:span>` })
+      const header = [`<c:h2 ${stringifyAttribs(group.header)}>`, btn, '</c: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']

package/extend/waibuMpa/theme/component/{factory → widget}/accordion.js

@@ -1,7 +1,7 @@
 const cls = 'accordion'
 
 async function accordion () {
-  return class Accordion extends this.baseFactory {
+  return class Accordion extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/alert.js

@@ -3,7 +3,7 @@ import { colors, parseVariant } from '../method/after-build-tag/_lib.js'
 const cls = 'alert'
 
 async function alert () {
-  return class Alert extends this.baseFactory {
+  return class Alert extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       const { without } = this.app.lib._

package/extend/waibuMpa/theme/component/{factory → widget}/app-launcher-trigger.js

@@ -1,5 +1,5 @@
 async function appLauncherTrigger () {
-  return class AppLauncherTrigger extends this.baseFactory {
+  return class AppLauncherTrigger extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       const { isString } = this.app.lib._

package/extend/waibuMpa/theme/component/{factory → widget}/app-launcher.js

@@ -1,5 +1,5 @@
 async function appLauncher () {
-  return class AppLauncher extends this.baseFactory {
+  return class AppLauncher extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       const { generateId } = this.app.lib.aneka

package/extend/waibuMpa/theme/component/{factory → widget}/badge.js

@@ -1,7 +1,7 @@
 const cls = 'badge'
 
 async function badge () {
-  return class Badge extends this.baseFactory {
+  return class Badge extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/blockquote.js

@@ -1,7 +1,7 @@
 const cls = 'blockquote'
 
 async function blockquote () {
-  return class Blockquote extends this.baseFactory {
+  return class Blockquote extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/breadcrumb-item.js

@@ -1,7 +1,7 @@
 const cls = 'breadcrumb-item'
 
 async function breadcrumbItem () {
-  return class BreadcrumbItem extends this.baseFactory {
+  return class BreadcrumbItem extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/breadcrumb.js

@@ -29,7 +29,7 @@ async function generateItems (breadcrumb) {
 }
 
 async function breadcrumb () {
-  return class Breadcrumb extends this.baseFactory {
+  return class Breadcrumb extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/btn-back-to-top.js

@@ -1,5 +1,5 @@
 async function btnBackToTop () {
-  return class BtnBackToTop extends this.baseFactory {
+  return class BtnBackToTop extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.params.noTag = true

package/extend/waibuMpa/theme/component/{factory → widget}/btn-close.js

@@ -1,7 +1,7 @@
 const cls = 'btn-close'
 
 async function btnClose () {
-  return class BtnClose extends this.baseFactory {
+  return class BtnClose extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/btn-group.js

@@ -3,7 +3,7 @@ import { parseSimple, sizes } from '../method/after-build-tag/_lib.js'
 const cls = 'btn-group'
 
 async function btnGroup () {
-  return class BtnGroup extends this.baseFactory {
+  return class BtnGroup extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/btn-toolbar.js

@@ -1,7 +1,7 @@
 const cls = 'btn-toolbar'
 
 async function btnToolbar () {
-  return class BtnToolbar extends this.baseFactory {
+  return class BtnToolbar extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/btn.js

@@ -3,7 +3,7 @@ import { parseVariant, parseSimple, sizes, colors, colorVariants } from '../meth
 const cls = 'btn'
 
 async function btn () {
-  return class Btn extends this.baseFactory {
+  return class Btn extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/card-body.js

@@ -1,7 +1,7 @@
 const cls = 'card-body'
 
 async function cardBody () {
-  return class CardBody extends this.baseFactory {
+  return class CardBody extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/card-footer.js

@@ -2,7 +2,7 @@ import { handler } from './card-header.js'
 const cls = 'card-footer'
 
 async function cardFooter () {
-  return class CardFooter extends this.baseFactory {
+  return class CardFooter extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/card-group.js

@@ -1,7 +1,7 @@
 const cls = 'card-group'
 
 async function cardGroup () {
-  return class CardGroup extends this.baseFactory {
+  return class CardGroup extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/card-header.js

@@ -12,7 +12,7 @@ export async function handler (cls, params = {}) {
 }
 
 async function cardHeader () {
-  return class CardHeader extends this.baseFactory {
+  return class CardHeader extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/card-link.js

@@ -1,7 +1,7 @@
 const cls = 'card-link'
 
 async function cardLink () {
-  return class CardLink extends this.baseFactory {
+  return class CardLink extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/card-subtitle.js

@@ -1,7 +1,7 @@
 const cls = 'card-subtitle'
 
 async function cardSubtitle () {
-  return class CardSubtitle extends this.baseFactory {
+  return class CardSubtitle extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/card-text.js

@@ -1,7 +1,7 @@
 const cls = 'card-text'
 
 async function cardBody () {
-  return class CardBody extends this.baseFactory {
+  return class CardBody extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/card-title.js

@@ -1,7 +1,7 @@
 const cls = 'card-title'
 
 async function cardTitle () {
-  return class CardTitle extends this.baseFactory {
+  return class CardTitle extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/card.js

@@ -1,7 +1,7 @@
 const cls = 'card'
 
 async function card () {
-  return class Card extends this.baseFactory {
+  return class Card extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/carousel-item.js

@@ -1,7 +1,7 @@
 const cls = 'carousel-item'
 
 async function carouselItem () {
-  return class CarouselItem extends this.baseFactory {
+  return class CarouselItem extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/carousel.js

@@ -1,7 +1,7 @@
 const cls = 'carousel'
 
 async function carousel () {
-  return class Carousel extends this.baseFactory {
+  return class Carousel extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       const { isEmpty } = this.app.lib._

package/extend/waibuMpa/theme/component/{factory → widget}/collapse-item.js

@@ -1,7 +1,7 @@
 const cls = 'collapse'
 
 async function collapseItem () {
-  return class CollapseItem extends this.baseFactory {
+  return class CollapseItem extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/collapse.js

@@ -7,7 +7,7 @@ function collectAttr (group, item) {
 }
 
 async function collapse () {
-  return class Collapse extends this.baseFactory {
+  return class Collapse extends this.app.baseClass.MpaWidget {
     build = async () => {
       const { generateId } = this.app.lib.aneka
       const { merge, isString } = this.app.lib._

package/extend/waibuMpa/theme/component/{factory → widget}/container.js

@@ -2,7 +2,7 @@ import { breakpoints, parseSimple } from '../method/after-build-tag/_lib.js'
 const cls = 'container'
 
 async function container () {
-  return class Container extends this.baseFactory {
+  return class Container extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/widget/drawer-toolbar.js

@@ -0,0 +1,6 @@
+async function drawerToolbar () {
+  return class DrawerToolbar extends this.app.baseClass.MpaWidget {
+  }
+}
+
+export default drawerToolbar

package/extend/waibuMpa/theme/component/{factory → widget}/drawer.js

@@ -2,7 +2,7 @@ import { aligns, breakpoints, parseVariant, parseSimple } from '../method/after-
 const cls = 'offcanvas'
 
 async function drawer () {
-  return class Drawer extends this.baseFactory {
+  return class Drawer extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/dropdown-item.js

@@ -1,7 +1,7 @@
 const cls = 'dropdown-item'
 
 async function dropdownItem () {
-  return class DropdownItem extends this.baseFactory {
+  return class DropdownItem extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/dropdown.js

@@ -62,7 +62,7 @@ export async function buildMenu (params = {}) { // scope: component
 }
 
 async function dropdown () {
-  return class Dropdown extends this.baseFactory {
+  return class Dropdown extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       const { isString } = this.app.lib._

package/extend/waibuMpa/theme/component/{factory → widget}/fieldset.js

@@ -1,5 +1,5 @@
 async function fieldset () {
-  return class Fieldset extends this.baseFactory {
+  return class Fieldset extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.component.normalizeAttr(this.params, { tag: 'fieldset' })

package/extend/waibuMpa/theme/component/{factory → widget}/figcaption.js

@@ -1,7 +1,7 @@
 const cls = 'figure-caption'
 
 async function figcaption () {
-  return class Figcaption extends this.baseFactory {
+  return class Figcaption extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/figure.js

@@ -1,7 +1,7 @@
 const cls = 'figure'
 
 async function figure () {
-  return class Figure extends this.baseFactory {
+  return class Figure extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/form-check-toggle.js

@@ -21,7 +21,7 @@ export async function build (handler, params = {}) {
 }
 
 async function formCheckToggle () {
-  return class FormCheckToggle extends this.baseFactory {
+  return class FormCheckToggle extends this.app.baseClass.MpaWidget {
     build = async () => {
       const { has } = this.app.lib._
       const { req } = this.component

package/extend/waibuMpa/theme/component/{factory → widget}/form-check.js

@@ -47,7 +47,7 @@ export async function build (handler, params = {}) {
 }
 
 async function formCheck () {
-  return class FormCheck extends this.baseFactory {
+  return class FormCheck extends this.app.baseClass.MpaWidget {
     build = async () => {
       await build.call(this, buildFormCheck, this.params)
     }

package/extend/waibuMpa/theme/component/{factory → widget}/form-color.js

@@ -2,7 +2,7 @@ import { buildFormColor } from './_lib.js'
 import { build } from './form-input.js'
 
 async function formColor () {
-  return class FormColor extends this.baseFactory {
+  return class FormColor extends this.app.baseClass.MpaWidget {
     build = async () => {
       await build.call(this, buildFormColor, this.params)
     }

package/extend/waibuMpa/theme/component/{factory → widget}/form-date.js

@@ -1,7 +1,7 @@
 import { css, scripts, inlineScript, handler } from './form-datetime.js'
 
 async function formDate () {
-  return class FormDate extends this.baseFactory {
+  return class FormDate extends this.app.baseClass.MpaWidget {
     static css = [...super.css, ...css]
     static scripts = [...super.scripts, ...scripts(this.component.req)]
     static inlineScript = inlineScript(this.component.req)

package/extend/waibuMpa/theme/component/{factory → widget}/form-datetime.js

@@ -59,7 +59,7 @@ export async function handler (opts, params = {}) {
 }
 
 async function formDatetime () {
-  return class FormDatetime extends this.baseFactory {
+  return class FormDatetime extends this.app.baseClass.MpaWidget {
     static css = [...super.css, ...css]
     static scripts = [...super.scripts, ...scripts(this.component.req)]
     static inlineScript = inlineScript(this.component.req)

package/extend/waibuMpa/theme/component/{factory → widget}/form-file.js

@@ -2,7 +2,7 @@ import { buildFormFile } from './_lib.js'
 import { build } from './form-input.js'
 
 async function formFile () {
-  return class FormFile extends this.baseFactory {
+  return class FormFile extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.params.attr.type = 'file'

package/extend/waibuMpa/theme/component/{factory → widget}/form-input-addon.js

@@ -1,5 +1,5 @@
 async function formInputAddon () {
-  return class FormInputAddon extends this.baseFactory {
+  return class FormInputAddon extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.component.normalizeAttr(this.params, { tag: 'div', addon: this.params.attr.prepend ? 'prepend' : 'append' })

package/extend/waibuMpa/theme/component/{factory → widget}/form-input.js

@@ -122,7 +122,7 @@ export async function build (handler, params = {}) {
 }
 
 async function formInput () {
-  return class FormInput extends this.baseFactory {
+  return class FormInput extends this.app.baseClass.MpaWidget {
     build = async () => {
       await build.call(this, buildFormInput, this.params)
     }

package/extend/waibuMpa/theme/component/{factory → widget}/form-password.js

@@ -2,7 +2,7 @@ import { buildFormInput } from './_lib.js'
 import { build } from './form-input.js'
 
 async function formPassword () {
-  return class FormPassword extends this.baseFactory {
+  return class FormPassword extends this.app.baseClass.MpaWidget {
     build = async () => {
       this.params.attr.type = 'password'
       await build.call(this, buildFormInput, this.params)

package/extend/waibuMpa/theme/component/{factory → widget}/form-plaintext.js

@@ -2,7 +2,7 @@ import { buildFormPlaintext } from './_lib.js'
 import { build } from './form-input.js'
 
 async function formPlaintext () {
-  return class FormPlaintext extends this.baseFactory {
+  return class FormPlaintext extends this.app.baseClass.MpaWidget {
     build = async () => {
       this.params.attr.disabled = true
       if (this.params.attr.labelFloating) this.params.attr.class.push('border', 'rounded')

package/extend/waibuMpa/theme/component/{factory → widget}/form-radio-toggle.js

@@ -2,7 +2,7 @@ import { buildFormRadioToggle } from './_lib.js'
 import { build } from './form-check-toggle.js'
 
 async function formRadioToggle () {
-  return class FormRadioToggle extends this.baseFactory {
+  return class FormRadioToggle extends this.app.baseClass.MpaWidget {
     build = async () => {
       if (!this.params.attr.label) this.params.attr.label = this.component.req.t('Toggle Radio')
       await build.call(this, buildFormRadioToggle, this.params)

package/extend/waibuMpa/theme/component/{factory → widget}/form-radio.js

@@ -2,7 +2,7 @@ import { buildFormRadio } from './_lib.js'
 import { build } from './form-check.js'
 
 async function formRadio () {
-  return class FormRadio extends this.baseFactory {
+  return class FormRadio extends this.app.baseClass.MpaWidget {
     build = async () => {
       await build.call(this, buildFormRadio, this.params)
     }

package/extend/waibuMpa/theme/component/{factory → widget}/form-range.js

@@ -2,7 +2,7 @@ import { buildFormRange } from './_lib.js'
 import { build } from './form-input.js'
 
 async function formRange () {
-  return class FormRange extends this.baseFactory {
+  return class FormRange extends this.app.baseClass.MpaWidget {
     build = async () => {
       this.params.attr.type = 'range'
       delete this.params.attr.labelFloating

package/extend/waibuMpa/theme/component/{factory → widget}/form-select-country.js

@@ -1,7 +1,7 @@
 import { inlineCss, css, scripts } from './form-select-ext.js'
 
 async function formSelectCountry () {
-  return class FormSelectCountry extends this.baseFactory {
+  return class FormSelectCountry extends this.app.baseClass.MpaWidget {
     static css = [...super.css, css]
 
     static scripts = [...super.scripts, scripts]

package/extend/waibuMpa/theme/component/{factory → widget}/form-select-ext.js

@@ -38,7 +38,7 @@ export const css = 'waibuExtra.virtual:/tom-select/css/tom-select.bootstrap5.min
 export const scripts = 'waibuExtra.virtual:/tom-select/js/tom-select.complete.min.js'
 
 async function formSelectExt () {
-  return class FormSelectExt extends this.baseFactory {
+  return class FormSelectExt extends this.app.baseClass.MpaWidget {
     static css = [...super.css, css]
     static scripts = [...super.scripts, scripts]
     static inlineCss = inlineCss

package/extend/waibuMpa/theme/component/{factory → widget}/form-select.js

@@ -2,7 +2,7 @@ import { buildFormSelect } from './_lib.js'
 import { handleInput } from './form-input.js'
 
 async function formSelect () {
-  return class FormSelect extends this.baseFactory {
+  return class FormSelect extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.component.normalizeAttr(this.params, { autoId: true })

package/extend/waibuMpa/theme/component/{factory → widget}/form-switch.js

@@ -2,7 +2,7 @@ import { buildFormSwitch } from './_lib.js'
 import { build } from './form-check.js'
 
 async function formSwitch () {
-  return class FormSwitch extends this.baseFactory {
+  return class FormSwitch extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.params.attr.wrapperClass = this.params.attr.wrapperClass ?? ''

package/extend/waibuMpa/theme/component/{factory → widget}/form-textarea.js

@@ -2,7 +2,7 @@ import { buildFormTextarea } from './_lib.js'
 import { build } from './form-input.js'
 
 async function formTextarea () {
-  return class FormTextarea extends this.baseFactory {
+  return class FormTextarea extends this.app.baseClass.MpaWidget {
     build = async () => {
       await build.call(this, buildFormTextarea, this.params)
     }

package/extend/waibuMpa/theme/component/{factory → widget}/form-time.js

@@ -1,7 +1,7 @@
 import { css, scripts, inlineScript, handler } from './form-datetime.js'
 
 async function formTime () {
-  return class FormTime extends this.baseFactory {
+  return class FormTime extends this.app.baseClass.MpaWidget {
     static css = [...super.css, ...css]
     static scripts = [...super.scripts, ...scripts(this.component.req)]
     static inlineScript = inlineScript(this.component.req)

package/extend/waibuMpa/theme/component/{factory → widget}/form.js

@@ -1,5 +1,5 @@
 async function form () {
-  return class Form extends this.baseFactory {
+  return class Form extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.component.normalizeAttr(this.params, { tag: 'form' })

package/extend/waibuMpa/theme/component/{factory → widget}/grid-col.js

@@ -13,7 +13,7 @@ function parse (item) {
 }
 
 async function gridCol () {
-  return class GridCol extends this.baseFactory {
+  return class GridCol extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = `[class^=${cls}]`

package/extend/waibuMpa/theme/component/{factory → widget}/grid-row.js

@@ -7,7 +7,7 @@ const cls = 'row'
 const col = buildCol()
 
 async function gridRow () {
-  return class GridRow extends this.baseFactory {
+  return class GridRow extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/heading.js

@@ -1,5 +1,5 @@
 async function heading () {
-  return class Heading extends this.baseFactory {
+  return class Heading extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.params.attr.type = this.params.attr.type ?? '1'

package/extend/waibuMpa/theme/component/{factory → widget}/img.js

@@ -1,7 +1,7 @@
 const cls = 'img'
 
 async function img () {
-  return class Img extends this.baseFactory {
+  return class Img extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = `img[class^='${cls}']`

package/extend/waibuMpa/theme/component/{factory → widget}/lead.js

@@ -1,7 +1,7 @@
 const cls = 'lead'
 
 async function lead () {
-  return class Lead extends this.baseFactory {
+  return class Lead extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/list-item.js

@@ -1,7 +1,7 @@
 const inlineClass = 'list-inline-item'
 
 async function listItem () {
-  return class ListItem extends this.baseFactory {
+  return class ListItem extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.component.normalizeAttr(this.params, { tag: 'li' })

package/extend/waibuMpa/theme/component/{factory → widget}/list.js

@@ -2,7 +2,7 @@ import { breakpoints, colors, parseVariant } from '../method/after-build-tag/_li
 const cls = 'list'
 
 async function list () {
-  return class List extends this.baseFactory {
+  return class List extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/masonry.js

@@ -1,7 +1,7 @@
 import gutter from '../method/after-build-tag/gutter.js'
 
 async function masonry () {
-  return class Masonry extends this.baseFactory {
+  return class Masonry extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.component.normalizeAttr(this.params)

package/extend/waibuMpa/theme/component/{factory → widget}/modal-body.js

@@ -1,7 +1,7 @@
 const cls = 'modal-body'
 
 async function modalBody () {
-  return class ModalBody extends this.baseFactory {
+  return class ModalBody extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/modal-footer.js

@@ -1,7 +1,7 @@
 const cls = 'modal-footer'
 
 async function modalFooter () {
-  return class ModalFooter extends this.baseFactory {
+  return class ModalFooter extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/modal-header.js

@@ -1,7 +1,7 @@
 const cls = 'modal-header'
 
 async function modalHeader () {
-  return class ModalHeader extends this.baseFactory {
+  return class ModalHeader extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/modal.js

@@ -4,7 +4,7 @@ const modalSizes = ['xl', ...sizes]
 const fullscreens = breakpoints.map(b => `${b}-down`)
 
 async function modal () {
-  return class Modal extends this.baseFactory {
+  return class Modal extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/nav-divider.js

@@ -1,7 +1,7 @@
 const cls = 'nav-item'
 
 async function navDivider () {
-  return class NavDivider extends this.baseFactory {
+  return class NavDivider extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/nav-dropdown-darkmode.js

@@ -1,5 +1,5 @@
 async function navDropdownDarkmode () {
-  return class NavDropdownDarkmode extends this.baseFactory {
+  return class NavDropdownDarkmode extends this.app.baseClass.MpaWidget {
     build = async () => {
       const { titleize, isSet } = this.app.lib.aneka
       const { set, omit } = this.app.lib._

package/extend/waibuMpa/theme/component/{factory → widget}/nav-dropdown-language.js

@@ -1,5 +1,5 @@
 async function navDropdownLanguage () {
-  return class NavDropdownLanguage extends this.baseFactory {
+  return class NavDropdownLanguage extends this.app.baseClass.MpaWidget {
     build = async () => {
       const { camelCase, cloneDeep, omit } = this.app.lib._
       const { supported } = this.app.bajo.config.intl

package/extend/waibuMpa/theme/component/{factory → widget}/nav-dropdown-setting.js

@@ -1,5 +1,5 @@
 async function navDropdownSetting () {
-  return class NavDropdownSetting extends this.baseFactory {
+  return class NavDropdownSetting extends this.app.baseClass.MpaWidget {
     build = async () => {
       const { set, camelCase } = this.app.lib._
       const { supported } = this.app.bajo.config.intl

package/extend/waibuMpa/theme/component/{factory → widget}/nav-item-signout.js

@@ -1,5 +1,5 @@
 async function navItemSignout () {
-  return class NavItemSignout extends this.baseFactory {
+  return class NavItemSignout extends this.app.baseClass.MpaWidget {
     build = async () => {
       if (!this.component.req.user) return
       const { generateId } = this.app.lib.aneka

package/extend/waibuMpa/theme/component/{factory → widget}/nav-item.js

@@ -2,7 +2,7 @@ import { buildMenu, autoCloses } from './dropdown.js'
 const cls = 'nav-item'
 
 async function navItem () {
-  return class NavItem extends this.baseFactory {
+  return class NavItem extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/nav-toggle-fullscreen.js

@@ -1,5 +1,5 @@
 async function navToggleFullscreen () {
-  return class NavToggleFullscreen extends this.baseFactory {
+  return class NavToggleFullscreen extends this.app.baseClass.MpaWidget {
     build = async () => {
       const { iconset, req } = this.component
       if (!req.iconset) return

package/extend/waibuMpa/theme/component/{factory → widget}/nav.js

@@ -2,7 +2,7 @@ const cls = 'nav'
 const types = ['tabs', 'pills', 'underline']
 
 async function nav () {
-  return class Nav extends this.baseFactory {
+  return class Nav extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       const { isString } = this.app.lib._

package/extend/waibuMpa/theme/component/{factory → widget}/navbar-brand.js

@@ -1,7 +1,7 @@
 const cls = 'navbar-brand'
 
 async function navbarBrand () {
-  return class NavbarBrand extends this.baseFactory {
+  return class NavbarBrand extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/navbar-text.js

@@ -1,7 +1,7 @@
 const cls = 'navbar-text'
 
 async function navbarText () {
-  return class NavbarText extends this.baseFactory {
+  return class NavbarText extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/navbar.js

@@ -2,7 +2,7 @@ import { breakpoints, parseSimple } from '../method/after-build-tag/_lib.js'
 const cls = 'navbar'
 
 async function navbar () {
-  return class Navbar extends this.baseFactory {
+  return class Navbar extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/pagination-item.js

@@ -1,7 +1,7 @@
 const cls = 'page-item'
 
 async function paginationItem () {
-  return class PaginationItem extends this.baseFactory {
+  return class PaginationItem extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/pagination.js

@@ -2,7 +2,7 @@ import { sizes, parseSimple } from '../method/after-build-tag/_lib.js'
 const cls = 'pagination'
 
 async function pagination () {
-  return class Pagination extends this.baseFactory {
+  return class Pagination extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/progress-stack.js

@@ -1,7 +1,7 @@
 const cls = 'progress-stacked'
 
 async function progressStack () {
-  return class ProgressStack extends this.baseFactory {
+  return class ProgressStack extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/progress.js

@@ -1,7 +1,7 @@
 const cls = 'progress'
 
 async function progress () {
-  return class Progress extends this.baseFactory {
+  return class Progress extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/scrollspy.js

@@ -1,7 +1,7 @@
 const cls = 'scrollspy'
 
 async function scrollspy () {
-  return class Scrollspy extends this.baseFactory {
+  return class Scrollspy extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/sidebar.js

@@ -27,7 +27,7 @@ function formatSentence (item, params) {
 }
 
 async function sidebar () {
-  return class Sidebar extends this.baseFactory {
+  return class Sidebar extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.component.normalizeAttr(this.params, { tag: 'div', flex: 'column' })
@@ -47,7 +47,7 @@ async function sidebar () {
       this.params.attr.id = generateId('alpha')
       const html = []
       if (this.params.attr.mini) {
-        this.params.attr.style.width = this.params.attr.style.width ?? '60px'
+        // this.params.attr.style.width = this.params.attr.style.width ?? '60px'
         this.params.attr.align = this.params.attr.align ?? 'center'
         this.params.attr.margin = 'all-0'
         if (this.params.attr.autoFill) {

package/extend/waibuMpa/theme/component/{factory → widget}/spinner.js

@@ -2,7 +2,7 @@ import { sizes, parseSimple } from '../method/after-build-tag/_lib.js'
 const types = ['border', 'grow']
 
 async function spinner () {
-  return class Spinner extends this.baseFactory {
+  return class Spinner extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       const type = types.includes(this.params.attr.type) ? this.params.attr.type : 'border'

package/extend/waibuMpa/theme/component/{factory → widget}/table.js

@@ -15,7 +15,7 @@ function setResponsive (params) {
 }
 
 async function table () {
-  return class Table extends this.baseFactory {
+  return class Table extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/tbody.js

@@ -1,7 +1,7 @@
 const cls = 'table'
 
 async function tbody () {
-  return class Tbody extends this.baseFactory {
+  return class Tbody extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = `.${cls} tbody`

package/extend/waibuMpa/theme/component/{factory → widget}/td.js

@@ -2,7 +2,7 @@ import { colors, parseVariant } from '../method/after-build-tag/_lib.js'
 const cls = 'table'
 
 async function td () {
-  return class Td extends this.baseFactory {
+  return class Td extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = `.${cls} td`

package/extend/waibuMpa/theme/component/{factory → widget}/tfoot.js

@@ -1,7 +1,7 @@
 const cls = 'table'
 
 async function tfoot () {
-  return class Tfoot extends this.baseFactory {
+  return class Tfoot extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = `.${cls} tfoot`

package/extend/waibuMpa/theme/component/{factory → widget}/th.js

@@ -2,7 +2,7 @@ import { colors, parseVariant } from '../method/after-build-tag/_lib.js'
 const cls = 'table'
 
 async function th () {
-  return class Th extends this.baseFactory {
+  return class Th extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = `.${cls} th`

package/extend/waibuMpa/theme/component/{factory → widget}/thead.js

@@ -1,7 +1,7 @@
 const cls = 'table'
 
 async function thead () {
-  return class Thead extends this.baseFactory {
+  return class Thead extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = `.${cls} thead`

package/extend/waibuMpa/theme/component/{factory → widget}/toast-stack.js

@@ -1,7 +1,7 @@
 const cls = 'toast-container'
 
 async function toastStack () {
-  return class ToastStack extends this.baseFactory {
+  return class ToastStack extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/toast.js

@@ -1,7 +1,7 @@
 const cls = 'toast'
 
 async function toast () {
-  return class Toast extends this.baseFactory {
+  return class Toast extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/tr.js

@@ -2,7 +2,7 @@ import { colors, parseVariant } from '../method/after-build-tag/_lib.js'
 const cls = 'table'
 
 async function tr () {
-  return class Tr extends this.baseFactory {
+  return class Tr extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = `.${cls} tr`

package/extend/waibuStatic/asset/js/wbs.js

@@ -1,18 +1,19 @@
-/* global bootstrap, wmpa, _ */
+/* global wmpa, _ */
 
 class Wbs {
   constructor () {
+    this.engine = window.mdb ?? window.bootstrap
     this.init()
   }
 
   init () {
     window.addEventListener('load', evt => {
       const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
-      const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl)) // eslint-disable-line no-unused-vars
+      const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new this.engine.Popover(popoverTriggerEl)) // eslint-disable-line no-unused-vars
       const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
-      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) // eslint-disable-line no-unused-vars
+      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new this.engine.Tooltip(tooltipTriggerEl)) // eslint-disable-line no-unused-vars
       const toastElList = document.querySelectorAll('.toast')
-      const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl))
+      const toastList = [...toastElList].map(toastEl => new this.engine.Toast(toastEl))
       toastList.forEach(toast => toast.show())
     })
   }
@@ -20,7 +21,7 @@ class Wbs {
   getInstance (type, id) {
     if (type === 'Drawer') type = 'Offcanvas'
     const el = typeof id === 'string' ? document.getElementById(id) : id
-    return bootstrap[type].getOrCreateInstance(el)
+    return this.engine[type].getOrCreateInstance(el)
   }
 
   notifyHtml (id, html) {
@@ -110,8 +111,9 @@ class Wbs {
     const menuId = menu ? `menu="${menu}"` : ''
     const body = [`<c:app-launcher id="${id}" ${toolbar} ${menuId} />`]
     await wmpa.addComponent(body.join('\n'), 'body')
-    const item = new bootstrap.Offcanvas(`#${id}`)
+    const item = new this.engine.Offcanvas(`#${id}`)
     const itemEl = document.getElementById(id)
+    if (window.mdb) this.engine.Collapse.getOrCreateInstance(itemEl)
     itemEl.addEventListener('hidden.bs.offcanvas', evt => {
       itemEl.remove()
     })
@@ -155,7 +157,7 @@ class Wbs {
     body.push(...buttons)
     body.push('</c:div></c:modal>')
     await wmpa.addComponent(body.join('\n'), 'body')
-    const modal = new bootstrap.Modal(`#${id}`)
+    const modal = new this.engine.Modal(`#${id}`)
     const modalEl = document.getElementById(id)
     modalEl.addEventListener('hidden.bs.modal', evt => {
       modalEl.remove()
@@ -198,7 +200,7 @@ class Wbs {
     if (_.isArray(body)) body = body.join('\n')
     if (!['modal', 'offcanvas'].includes(type)) type = 'modal'
     await wmpa.addComponent(body)
-    const item = new bootstrap[_.upperFirst(type)](`#${id}`)
+    const item = new this.engine[_.upperFirst(type)](`#${id}`)
     const itemEl = document.getElementById(id)
     itemEl.addEventListener(`hidden.bs.${type}`, evt => {
       itemEl.remove()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waibu-bootstrap",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "Bootstrap suport for Waibu Framework",
   "main": "index.js",
   "scripts": {

package/wiki/CHANGES.md

@@ -1,5 +1,9 @@
 # Changes
 
+## 2026-01-13
+
+- [2.1.1] Bug fix on waibuMpa's widgeting system
+
 ## 2025-12-31
 
 - [2.1.0] Ported to match ```bajo@2.2.x``` specs

package/extend/waibuMpa/theme/component/factory/drawer-toolbar.js

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