waibu-bootstrap/extend/waibuMpa/theme/component/widget/accordion-item.js

Bootstrap suport for Waibu Framework

const cls = 'accordion-item'

async function accordionItem () {
  return class AccordionItem extends this.app.baseClass.MpaWidget {
    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
    }

    build = async () => {
      const { omit, without } = this.app.lib._
      const { groupAttrs, stringifyAttribs } = this.app.waibuMpa
      const group = groupAttrs(this.params.attr, ['body', 'header'])
      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 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']
      this.params.html = await this.component.buildSentence(`${header.join(' ')}\n${details.join(' ')}`)
      this.params.attr = omit(this.params.attr, ['id', 'noPadding', 'narrowHeader', 'bodyClass'])
    }
  }
}

export default accordionItem