waibu-bootstrap 1.0.1

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

@@ -0,0 +1,25 @@
+import { parseSimple, sizes } from '../method/after-build-tag/_lib.js'
+
+const cls = 'btn-group'
+
+async function btnGroup () {
+  return class BtnGroup extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+      this.component.normalizeAttr(this.params, { tag: 'div', cls, role: 'group' })
+      if (this.params.attr.size) this.params.attr.class.push(parseSimple.call(this, { cls, value: this.params.attr.size, values: sizes }))
+    }
+
+    async build () {
+      const { $ } = this.component
+      const html = []
+      $(`<div>${this.params.html}</div>`).children().each(function () {
+        html.push($(this).hasClass('dropdown') ? $(this).html() : $(this).prop('outerHTML'))
+      })
+      this.params.html = html.join('\n')
+    }
+  }
+}
+
+export default btnGroup

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

@@ -0,0 +1,13 @@
+const cls = 'btn-toolbar'
+
+async function btnToolbar () {
+  return class BtnToolbar extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+      this.component.normalizeAttr(this.params, { tag: 'div', cls, role: 'toolbar' })
+    }
+  }
+}
+
+export default btnToolbar

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

@@ -0,0 +1,40 @@
+import { parseVariant, parseSimple, sizes, colors, colorVariants } from '../method/after-build-tag/_lib.js'
+
+const cls = 'btn'
+
+async function btn () {
+  return class Btn extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+      this.component.normalizeAttr(this.params, { cls })
+      this.params.attr.class.push(cls)
+    }
+
+    async build () {
+      const { has, omit, isString } = this.plugin.app.bajo.lib._
+      // tag
+      this.params.tag = !!this.params.attr.href || this.params.attr.tag === 'a' ? 'a' : 'button'
+      if (this.params.tag === 'button' && this.params.attr.href) delete this.params.attr.href
+      if (this.params.tag === 'a' && this.params.attr.href === true) this.params.attr.href = '#'
+      if (this.params.tag === 'a') this.params.attr.role = 'button'
+      if (this.params.tag === 'button' && !has(this.params.attr, 'type')) this.params.attr.type = 'button'
+
+      if (this.params.attr.disabled && this.params.tag === 'a') {
+        this.params.attr.class.push('disabled')
+        this.params.attr.ariaDisabled = true
+        this.params.attr.tabIndex = -1
+        this.params.attr = omit(this.params.attr, ['disabled', 'href'])
+      }
+      if (this.params.attr.dismiss === 'drawer') this.params.attr.dismiss = 'offcanvas'
+      if (this.params.attr.toggle) this.params.attr.dataBsToggle = 'button'
+      if (this.params.attr.active) this.params.attr.ariaPressed = true
+      if (this.params.attr.color) this.params.attr.class.push(parseVariant.call(this, { cls, value: this.params.attr.color, values: colors, variants: colorVariants, prepend: true }))
+      if (this.params.attr.size) this.params.attr.class.push(parseSimple.call(this, { cls, value: this.params.attr.size, values: sizes }))
+      if (this.params.attr.dismiss) this.params.attr.dataBsDismiss = isString(this.params.attr.dismiss) ? this.params.attr.dismiss : 'modal'
+      if (this.params.html.includes('<i class="') && this.params.attr.href) this.params.attr.class.push('icon-link')
+    }
+  }
+}
+
+export default btn

package/waibuMpa/theme/component/factory/card-body.js

@@ -0,0 +1,13 @@
+const cls = 'card-body'
+
+async function cardBody () {
+  return class CardBody extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+      this.component.normalizeAttr(this.params, { tag: 'div', cls })
+    }
+  }
+}
+
+export default cardBody

package/waibuMpa/theme/component/factory/card-footer.js

@@ -0,0 +1,17 @@
+import { handler } from './card-header.js'
+const cls = 'card-footer'
+
+async function cardFooter () {
+  return class CardFooter extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+    }
+
+    async build () {
+      await handler.call(this, cls, this.params)
+    }
+  }
+}
+
+export default cardFooter

package/waibuMpa/theme/component/factory/card-group.js

@@ -0,0 +1,13 @@
+const cls = 'card-group'
+
+async function cardGroup () {
+  return class CardGroup extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+      this.component.normalizeAttr(this.params, { tag: 'div', cls })
+    }
+  }
+}
+
+export default cardGroup

package/waibuMpa/theme/component/factory/card-header.js

@@ -0,0 +1,27 @@
+import { levels } from '../method/after-build-tag/_lib.js'
+const cls = 'card-header'
+
+export async function handler (cls, params = {}) {
+  const headings = levels.map(l => `h${l}`)
+  const { isString } = this.plugin.app.bajo.lib._
+  const { $ } = this.component
+  const tag = isString(this.params.attr.tag) && headings.includes(this.params.attr.tag) ? this.params.attr.tag : 'div'
+  this.component.normalizeAttr(this.params, { tag, cls })
+  const tabs = $(`<div>${this.params.html}</div>`).find('.nav-tabs')
+  if (tabs.length > 0) this.params.html = tabs.addClass('card-header-tabs').parent().prop('outerHTML')
+}
+
+async function cardHeader () {
+  return class CardHeader extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+    }
+
+    async build () {
+      await handler.call(this, cls, this.params)
+    }
+  }
+}
+
+export default cardHeader

package/waibuMpa/theme/component/factory/card-link.js

@@ -0,0 +1,14 @@
+const cls = 'card-link'
+
+async function cardLink () {
+  return class CardLink extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+      this.component.normalizeAttr(this.params, { tag: 'a', cls })
+      if (!this.params.attr.href) this.params.attr.href = '#'
+    }
+  }
+}
+
+export default cardLink

package/waibuMpa/theme/component/factory/card-subtitle.js

@@ -0,0 +1,13 @@
+const cls = 'card-subtitle'
+
+async function cardSubtitle () {
+  return class CardSubtitle extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+      this.component.normalizeAttr(this.params, { tag: 'h6', cls: [cls, 'mb-2', 'text-body-secondary'] })
+    }
+  }
+}
+
+export default cardSubtitle

package/waibuMpa/theme/component/factory/card-text.js

@@ -0,0 +1,15 @@
+const cls = 'card-text'
+
+async function cardBody () {
+  return class CardBody extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+      const { isString } = this.plugin.app.bajo.lib._
+      const tag = isString(this.params.attr.tag) ? this.params.attr.tag : 'p'
+      this.component.normalizeAttr(this.params, { tag, cls })
+    }
+  }
+}
+
+export default cardBody

package/waibuMpa/theme/component/factory/card-title.js

@@ -0,0 +1,13 @@
+const cls = 'card-title'
+
+async function cardTitle () {
+  return class CardTitle extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+      this.component.normalizeAttr(this.params, { tag: 'h5', cls })
+    }
+  }
+}
+
+export default cardTitle

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

@@ -0,0 +1,23 @@
+const cls = 'card'
+
+async function card () {
+  return class Card extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+      this.component.normalizeAttr(this.params, { tag: 'div', cls })
+    }
+
+    async build () {
+      const { $ } = this.component
+      const children = $(`<div>${this.params.html}</div>`).children()
+      this.params.html = children.each(function (idx) {
+        if (idx === 0 && this.name === 'img') $(this).addClass('card-img-top')
+        if ($(this).hasClass('list-group')) $(this).addClass('list-group-flush')
+        if (idx === (children.length - 1) && this.name === 'img') $(this).addClass('card-img-bottom')
+      }).parent().html()
+    }
+  }
+}
+
+export default card

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

@@ -0,0 +1,25 @@
+const cls = 'carousel-item'
+
+async function carouselItem () {
+  return class CarouselItem extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+      this.component.normalizeAttr(this.params, { tag: 'div', cls, dataBsInterval: this.params.attr.interval })
+    }
+
+    async build () {
+      const { isString } = this.plugin.app.bajo.lib._
+      if (isString(this.params.attr.caption)) {
+        const captions = ['<div class="carousel-caption d-none d-md-block">']
+        captions.push(`<h5>${this.params.attr.caption}</h5>`)
+        if (isString(this.params.attr.description)) captions.push(`<p>${this.params.attr.description}</p>`)
+        captions.push('</div>')
+        this.params.html += `\n${captions.join('\n')}`
+      }
+      delete this.params.attr.caption
+    }
+  }
+}
+
+export default carouselItem

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

@@ -0,0 +1,53 @@
+const cls = 'carousel'
+
+async function carousel () {
+  return class Carousel extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      const { isEmpty } = this.plugin.app.bajo.lib._
+      this.selector = '.' + cls
+      this.component.normalizeAttr(this.params, { tag: 'div', cls: [cls, 'slide'], autoId: true })
+      if (this.params.attr.fade) this.params.attr.class.push(`${cls}-fade`)
+      if (this.params.attr.noTouch) this.params.attr.dataBsTouch = false
+      if (this.params.attr.autoPlay) this.params.attr.dataBsRide = isEmpty(this.params.attr.autoPlay) ? cls : this.params.attr.autoPlay
+      this.params.html = `<div class="${cls}-inner">${this.params.html}</div>`
+    }
+
+    async build () {
+      const { attrToArray } = this.plugin.app.waibuMpa
+      const { $ } = this.component
+      let activeItem = 0
+      $(this.params.html).children().each(function (idx) {
+        const classes = attrToArray(this.attribs.class)
+        if (classes.includes('active')) activeItem = idx
+      })
+      this.params.html = $(this.params.html).children().each(function (idx) {
+        if (idx === activeItem) $(this).addClass('active')
+        $(this).find('img').addClass('d-block w-100')
+      }).parent().prop('outerHTML')
+
+      if (this.params.attr.indicator) {
+        const count = $(this.params.html).children().length
+        const btns = []
+        for (let i = 0; i < count; i++) {
+          btns.push(`<button type="button" data-bs-target="#${this.params.attr.id}" data-bs-slide-to="${i}"`)
+          if (i === activeItem) btns.push('class="active" aria-current="true"')
+          btns.push(`aria-label="Slide ${i + 1}"></button>`)
+        }
+        this.params.html = `<div class="${cls}-indicators">${btns.join(' ')}</div>\n${this.params.html}`
+      }
+      if (!this.params.attr.noNavigation) {
+        const btns = []
+        const dirs = { prev: 'Previous', next: 'Next' }
+        for (const dir in dirs) {
+          btns.push(`<button class="${cls}-control-${dir}" type="button" data-bs-target="#${this.params.attr.id}" data-bs-slide="${dir}">`)
+          btns.push(`<span class="${cls}-control-${dir}-icon" aria-hidden="true"></span>`)
+          btns.push(`<span class="visually-hidden">${this.component.req.t(dirs[dir])}</span></button>`)
+        }
+        this.params.html += '\n' + btns.join('\n')
+      }
+    }
+  }
+}
+
+export default carousel

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

@@ -0,0 +1,14 @@
+const cls = 'collapse'
+
+async function collapseItem () {
+  return class CollapseItem extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+      this.component.normalizeAttr(this.params, { tag: 'div', cls, autoId: true })
+      if (this.params.attr.showOnStart) this.params.attr.class.push('show')
+    }
+  }
+}
+
+export default collapseItem

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

@@ -0,0 +1,58 @@
+function collectAttr (group, item) {
+  const { merge } = this.plugin.app.bajo.lib._
+  return merge(group.trigger, {
+    'data-bs-toggle': 'collapse',
+    'data-bs-target': item ? ('#' + item.id) : `.multi-collapse.${this.params.attr.toggleAll}`
+  })
+}
+
+async function collapse () {
+  return class Collapse extends this.baseFactory {
+    async build () {
+      const { generateId } = this.plugin.app.bajo
+      const { merge, isString } = this.plugin.app.bajo.lib._
+      const { attrToArray, groupAttrs } = this.plugin.app.waibuMpa
+      const items = []
+      const { $ } = this.component
+      const me = this
+      if (!this.params.attr.trigger) this.params.attr.triggerColor = 'primary'
+      const group = groupAttrs(this.params.attr, ['trigger'])
+      this.params.attr = group._
+      if (this.params.attr.toggleAll) this.params.attr.toggleAll = generateId('alpha')
+      const contents = $(`<div>${this.params.html}</div>`).children().each(function () {
+        const classes = attrToArray(this.attribs.class)
+        const icon = $(this).find('i').prop('outerHTML') ?? ''
+        items.push({
+          id: this.attribs.id,
+          label: isString(this.attribs.caption) ? this.attribs.caption : this.attribs.id,
+          show: classes.includes('show'),
+          icon
+        })
+        $(this).find('i').remove()
+        $(this).removeAttr('caption')
+        if (me.params.attr.toggleAll) $(this).addClass('multi-collapse').addClass(me.params.attr.toggleAll)
+      }).parent().html()
+      const tag = isString(this.params.attr.tag) ? this.params.attr.tag : 'div'
+      this.component.normalizeAttr(this.params, { tag })
+      this.params.html = []
+      for (const item of items) {
+        const attr = collectAttr.call(this, group, item)
+        const html = `${item.label} ${item.icon}`
+        this.params.html.push(await this.component.buildTag({ tag: attr.tag ?? 'btn', attr, html }))
+      }
+      if (this.params.attr.toggleAll) {
+        const attr = collectAttr.call(this, group)
+        this.params.html.push(await this.component.buildTag({ tag: attr.tag ?? 'btn', attr, html: this.component.req.t('Toggle All') }))
+      }
+      this.params.html = this.params.html.join('\n')
+      if (this.params.attr.group && !this.params.attr.tag) {
+        this.params.attr.label = !isString(this.params.attr.group) ? this.component.req.t('Collapse') : this.params.attr.group
+        this.params.html = await this.component.buildTag(merge({}, this.params, { tag: 'btnGroup' }))
+        this.params.noTag = true
+      }
+      this.params.append = contents
+    }
+  }
+}
+
+export default collapse

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

@@ -0,0 +1,22 @@
+import { breakpoints, parseSimple } from '../method/after-build-tag/_lib.js'
+const cls = 'container'
+
+async function container () {
+  return class Container extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+      this.component.normalizeAttr(this.params, { tag: 'div' })
+    }
+
+    async build () {
+      const { has, omit } = this.plugin.app.bajo.lib._
+      if (has(this.params.attr, 'responsive')) this.params.attr.class.push(`${cls}-fluid`)
+      else if (has(this.params.attr, 'breakpoint')) this.params.attr.class.push(parseSimple({ cls, value: this.params.attr.breakpoint, values: breakpoints }))
+      else this.params.attr.class.push(cls)
+      this.params.attr = omit(this.params.attr, ['responsive', 'breakpoint'])
+    }
+  }
+}
+
+export default container

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

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

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

@@ -0,0 +1,59 @@
+import { aligns, breakpoints, parseVariant, parseSimple } from '../method/after-build-tag/_lib.js'
+const cls = 'offcanvas'
+
+async function drawer () {
+  return class Drawer extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+      this.component.normalizeAttr(this.params, { tag: 'div', autoId: true, tabIndex: -1 })
+    }
+
+    async build () {
+      const { isString, omit, trim } = this.plugin.app.bajo.lib._
+      const { groupAttrs } = this.plugin.app.waibuMpa
+      const { $ } = this.component
+      const group = groupAttrs(this.params.attr, ['launch'])
+      this.params.attr.responsive = this.params.attr.responsive ?? true
+      this.params.attr.class.push(parseVariant.call(this, { cls, value: this.params.attr.responsive, values: breakpoints }))
+      this.params.attr = group._
+      if (isString(this.params.attr.idLabel)) this.params.attr.ariaLabelledby = this.params.attr.idLabel
+      this.params.attr.class.push(parseSimple.call(this, { cls, value: this.params.attr.side ?? 'end', values: aligns }))
+      if (this.params.attr.scroll) this.params.attr.dataBsScroll = 'true'
+      if (this.params.attr.noDismiss) this.params.attr.dataBsBackdrop = 'static'
+      const buttons = []
+      const html = []
+      $(`<div>${this.params.html}</div>`).children().each(function () {
+        if (this.name === 'drawer-toolbar') buttons.push(trim($(this).prop('innerHTML')))
+        else html.push($(this).prop('outerHTML'))
+      })
+      this.params.html = html.join('\n')
+      const header = []
+      if (isString(this.params.attr.title) || !this.params.attr.noDismiss) {
+        header.push('<div class="offcanvas-header justify-content-between">')
+        if (isString(this.params.attr.title)) header.push(`<h5 class="offcanvas-title"${isString(this.params.attr.idLabel) ? ` id="${this.params.attr.idLabel}"` : ''}>${this.params.attr.title}</h5>`)
+        header.push('<ul class="nav d-flex align-items-center">')
+        header.push(...buttons)
+        if (!this.params.attr.noDismiss) header.push(await this.component.buildTag({ tag: 'btnClose', attr: { dataBsDismiss: 'offcanvas' } }))
+        header.push('</ul></div>')
+      }
+      if (this.params.attr.divider) header.push('<hr class="m-0" />')
+      this.params.html = `${header.join('\n')}<div${this.params.attr.noPadding ? '' : ' class="offcanvas-body"'}>${this.params.html}</div>`
+      if (group.launch) {
+        group.launch.dataBsTarget = `#${this.params.attr.id}`
+        group.launch.dataBsToggle = 'offcanvas'
+        group.launch.ariaControls = this.params.attr.id
+        if (this.params.attr.responsive) group.launch.display = `type:none-${this.params.attr.responsive}`
+        const btnParams = {
+          tag: 'btn',
+          attr: group.launch,
+          html: group._.launch
+        }
+        this.params.prepend = await this.component.buildTag(btnParams)
+      }
+      this.params.attr = omit(this.params.attr, ['title', 'noPadding'])
+    }
+  }
+}
+
+export default drawer

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

@@ -0,0 +1,34 @@
+const cls = 'dropdown-item'
+
+async function dropdownItem () {
+  return class DropdownItem extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      this.selector = '.' + cls
+      this.component.normalizeAttr(this.params, { tag: 'a' })
+    }
+
+    async build () {
+      const { $ } = this.component
+      if ($(this.params.html).children().length === 0 && !this.params.attr.href) this.params.attr.href = '#'
+      if (this.params.attr.divider) {
+        this.params.tag = 'hr'
+        this.params.attr.class.push('dropdown-divider')
+        this.params.selfClosing = true
+        return
+      }
+      if (this.params.attr.header) {
+        this.params.tag = 'h6'
+        this.params.attr.class.push('dropdown-header')
+        return
+      }
+      if (this.params.attr.disabled) {
+        this.params.attr.class.push('disabled')
+        delete this.params.attr.disabled
+      }
+      this.params.attr.class.push(cls)
+    }
+  }
+}
+
+export default dropdownItem

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

@@ -0,0 +1,121 @@
+import { dirs, breakpoints, parseSimple, parseVariant } from '../method/after-build-tag/_lib.js'
+
+const cls = 'dropdown'
+const variants = ['center']
+export const autoCloses = ['true', 'false', 'inside', 'outside']
+
+export async function buildMenu (params = {}) { // scope: component
+  const { numUnit } = this.plugin.app.bajo
+  const { isString } = this.plugin.app.bajo.lib._
+  const $ = this.$
+  let menuHtml = params.html
+  let style = params.attr.menuOnly ? 'display:block;' : ''
+  if (isString(params.attr.menuMax)) {
+    const max = parseInt(params.attr.menuMax)
+    if (max > 0) {
+      const items = []
+      $(`<div>${params.html}</div>`).children().each(function () {
+        items.push($(this).prop('outerHTML'))
+      })
+      const maxCols = Math.floor(items.length / max)
+      let els = ''
+      for (let i = 0; i < maxCols; i++) {
+        els += '<c:grid-col>'
+        for (let j = 0; j < parseInt(params.attr.menuMax); j++) {
+          els += items[max * i + j]
+        }
+        els += '</c:grid-col>'
+      }
+      menuHtml = await this.buildSentence(`<c:grid-row gutter="0">${els}</c:grid-row>`)
+      style = `min-width:${maxCols * 10}rem;`
+    }
+  } else if (params.attr.menuTag) {
+    const items = []
+    $(`<div>${params.html}</div>`).children().each(function () {
+      const children = $(this).children('form,div,p')
+      if (children.length > 0) {
+        children.each(function () {
+          items.push($(this).parent().html())
+        })
+      } else items.push($(this).prop('outerHTML'))
+    })
+    menuHtml = items.join('\n')
+  }
+
+  if (params.attr.menuScroll) {
+    const minHeight = isString(params.attr.menuScroll) ? numUnit(params.attr.menuScroll, 'px') : '80px'
+    style += `overflow:hidden;overflow-y:auto;max-height:calc(100vh - ${minHeight});`
+  }
+  const args = {
+    tag: isString(params.attr.menuTag) ? params.attr.menuTag : 'div',
+    attr: {
+      class: [
+        'dropdown-menu',
+        parseVariant.call(this, { cls: 'dropdown-menu', value: params.attr.dir, values: dirs, variants: breakpoints, prepend: true })
+      ],
+      style
+    },
+    html: menuHtml
+  }
+  if (params.attr.id) args.attr.id = params.attr.id + '-menu'
+  return await this.buildTag(args)
+}
+
+async function dropdown () {
+  return class Dropdown extends this.baseFactory {
+    constructor (options) {
+      super(options)
+      const { isString } = this.plugin.app.bajo.lib._
+      this.selector = '.' + cls
+      const tag = isString(this.params.attr.tag) ? this.params.attr.tag : 'div'
+      this.component.normalizeAttr(this.params, { tag })
+    }
+
+    async build () {
+      const { merge, cloneDeep, omit } = this.plugin.app.bajo.lib._
+      const { groupAttrs } = this.plugin.app.waibuMpa
+      const alpinejs = this.plugin.app.waibuAlpinejs
+      const [dir, variant] = (this.params.attr.dir ?? 'down').split('-')
+      const xcls = ['drop' + parseSimple.call(this, { value: dir, values: dirs })]
+      if (variants.includes(variant)) xcls.push(`${xcls[0]}-${variant}`)
+      this.params.attr.class.push(...xcls)
+      const group = groupAttrs(this.params.attr, ['trigger'])
+      this.params.attr = group._
+      let button = ''
+      if (this.params.attr.menuOnly) this.params.attr.menuTag = 'div'
+      const btnParams = {
+        attr: merge(group.trigger, {
+          class: this.params.attr.noCaret ? [] : ['dropdown-toggle'],
+          type: 'button',
+          dataBsToggle: 'dropdown',
+          ariaExpanded: false
+        }),
+        html: this.params.attr.split ? '<span class="visually-hidden">Toggle Dropdown</span>' : this.params.attr.content
+      }
+      if (this.params.attr.offset) btnParams.attr['data-bs-offset'] = this.params.attr.offset
+      if (this.params.attr.autoClose && autoCloses.includes(this.params.attr.autoClose)) btnParams.attr.dataBsAutoClose = this.params.attr.autoClose
+      if (this.params.attr.split) {
+        btnParams.attr.class.push('dropdown-toggle-split')
+        const splitParams = cloneDeep(btnParams)
+        if (btnParams.attr.id) btnParams.attr.id += '-split'
+        splitParams.tag = 'btn'
+        splitParams.attr = omit(splitParams.attr, ['class', 'dataBsToggle', 'ariaExpanded', 'dataBsAutoClose', 'dataBsOffset'])
+        if (alpinejs) btnParams.attr = alpinejs.stripAttrKeys(btnParams.attr)
+        splitParams.html = this.params.attr.content
+        button = await this.component.buildTag(splitParams)
+        // xcls.shift()
+        this.params.attr.class = ['btn-group', ...xcls]
+      }
+      btnParams.tag = 'btn'
+      const btn = await this.component.buildTag(btnParams)
+      const menu = await buildMenu.call(this.component, this.params)
+      if (this.params.attr.menuOnly) {
+        this.params.html = menu
+        this.params.noTag = true
+      } else this.params.html = [button, btn, menu].join('\n')
+      this.params.attr = omit(this.params.attr, ['noCaret'])
+    }
+  }
+}
+
+export default dropdown