waibu-bootstrap 2.1.1 → 2.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -16,13 +16,18 @@ async function accordionItem () {
|
|
|
16
16
|
if (!group.body.noPadding) group.body.class.push('accordion-body')
|
|
17
17
|
const clsList = without(this.params.attr.class, cls)
|
|
18
18
|
group.header.class.push('accordion-header')
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
19
|
+
const btnAttr = {
|
|
20
|
+
class: `${this.params.attr.narrowHeader ? 'px-3 py-2 ' : ''}accordion-button${this.params.attr.showOnStart ? '' : ' collapsed'}`,
|
|
21
|
+
type: 'button',
|
|
22
|
+
dataBsToggle: 'collapse',
|
|
23
|
+
dataBsTarget: `#${this.params.attr.id}`,
|
|
24
|
+
ariaExpanded: this.params.attr.showOnStart,
|
|
25
|
+
ariaControls: this.params.attr.id,
|
|
26
|
+
'x-data': true,
|
|
27
|
+
'@click': `$dispatch('accordion-item', { id: $el.closest('.accordion').id, cls: '${clsList.join(' ')}' })`
|
|
28
|
+
}
|
|
29
|
+
const btn = await this.component.buildTag({ tag: 'button', attr: btnAttr, html: `<c:span margin="end-2">${this.params.attr.header}</c:span>` })
|
|
30
|
+
const header = [`<c:h2 ${stringifyAttribs(group.header)}>`, btn, '</c:h2>']
|
|
26
31
|
const body = await this.component.buildTag({ tag: 'div', attr: group.body, html: this.params.html })
|
|
27
32
|
const details = [`<div id="${this.params.attr.id}" class="accordion-collapse collapse${this.params.attr.showOnStart ? ' show' : ''}">`,
|
|
28
33
|
body, '</div']
|
|
@@ -8,6 +8,7 @@ function formatSentence (item, params) {
|
|
|
8
8
|
if (this.params.attr.expanded) attr.rounded = 'width:0'
|
|
9
9
|
merge(attr, omit(item, ['component', 'icon', 'ohref', 'html']))
|
|
10
10
|
if (this.params.attr.text && !attr.active) attr.text = this.params.attr.text
|
|
11
|
+
if (!attr.active) attr.background = 'color:transparent'
|
|
11
12
|
const result = [`<c:${cmp}`]
|
|
12
13
|
for (const k in attr) {
|
|
13
14
|
result.push(attr[k] === true ? k : `${k}="${attr[k]}"`)
|
|
@@ -47,7 +48,7 @@ async function sidebar () {
|
|
|
47
48
|
this.params.attr.id = generateId('alpha')
|
|
48
49
|
const html = []
|
|
49
50
|
if (this.params.attr.mini) {
|
|
50
|
-
this.params.attr.style.width = this.params.attr.style.width ?? '60px'
|
|
51
|
+
// this.params.attr.style.width = this.params.attr.style.width ?? '60px'
|
|
51
52
|
this.params.attr.align = this.params.attr.align ?? 'center'
|
|
52
53
|
this.params.attr.margin = 'all-0'
|
|
53
54
|
if (this.params.attr.autoFill) {
|
|
@@ -1,18 +1,19 @@
|
|
|
1
|
-
/* global
|
|
1
|
+
/* global wmpa, _ */
|
|
2
2
|
|
|
3
3
|
class Wbs {
|
|
4
4
|
constructor () {
|
|
5
|
+
this.engine = window.mdb ?? window.bootstrap
|
|
5
6
|
this.init()
|
|
6
7
|
}
|
|
7
8
|
|
|
8
9
|
init () {
|
|
9
10
|
window.addEventListener('load', evt => {
|
|
10
11
|
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
|
|
11
|
-
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new
|
|
12
|
+
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new this.engine.Popover(popoverTriggerEl)) // eslint-disable-line no-unused-vars
|
|
12
13
|
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
|
|
13
|
-
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new
|
|
14
|
+
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new this.engine.Tooltip(tooltipTriggerEl)) // eslint-disable-line no-unused-vars
|
|
14
15
|
const toastElList = document.querySelectorAll('.toast')
|
|
15
|
-
const toastList = [...toastElList].map(toastEl => new
|
|
16
|
+
const toastList = [...toastElList].map(toastEl => new this.engine.Toast(toastEl))
|
|
16
17
|
toastList.forEach(toast => toast.show())
|
|
17
18
|
})
|
|
18
19
|
}
|
|
@@ -20,7 +21,7 @@ class Wbs {
|
|
|
20
21
|
getInstance (type, id) {
|
|
21
22
|
if (type === 'Drawer') type = 'Offcanvas'
|
|
22
23
|
const el = typeof id === 'string' ? document.getElementById(id) : id
|
|
23
|
-
return
|
|
24
|
+
return this.engine[type].getOrCreateInstance(el)
|
|
24
25
|
}
|
|
25
26
|
|
|
26
27
|
notifyHtml (id, html) {
|
|
@@ -110,8 +111,9 @@ class Wbs {
|
|
|
110
111
|
const menuId = menu ? `menu="${menu}"` : ''
|
|
111
112
|
const body = [`<c:app-launcher id="${id}" ${toolbar} ${menuId} />`]
|
|
112
113
|
await wmpa.addComponent(body.join('\n'), 'body')
|
|
113
|
-
const item = new
|
|
114
|
+
const item = new this.engine.Offcanvas(`#${id}`)
|
|
114
115
|
const itemEl = document.getElementById(id)
|
|
116
|
+
if (window.mdb) this.engine.Collapse.getOrCreateInstance(itemEl)
|
|
115
117
|
itemEl.addEventListener('hidden.bs.offcanvas', evt => {
|
|
116
118
|
itemEl.remove()
|
|
117
119
|
})
|
|
@@ -155,7 +157,7 @@ class Wbs {
|
|
|
155
157
|
body.push(...buttons)
|
|
156
158
|
body.push('</c:div></c:modal>')
|
|
157
159
|
await wmpa.addComponent(body.join('\n'), 'body')
|
|
158
|
-
const modal = new
|
|
160
|
+
const modal = new this.engine.Modal(`#${id}`)
|
|
159
161
|
const modalEl = document.getElementById(id)
|
|
160
162
|
modalEl.addEventListener('hidden.bs.modal', evt => {
|
|
161
163
|
modalEl.remove()
|
|
@@ -198,7 +200,7 @@ class Wbs {
|
|
|
198
200
|
if (_.isArray(body)) body = body.join('\n')
|
|
199
201
|
if (!['modal', 'offcanvas'].includes(type)) type = 'modal'
|
|
200
202
|
await wmpa.addComponent(body)
|
|
201
|
-
const item = new
|
|
203
|
+
const item = new this.engine[_.upperFirst(type)](`#${id}`)
|
|
202
204
|
const itemEl = document.getElementById(id)
|
|
203
205
|
itemEl.addEventListener(`hidden.bs.${type}`, evt => {
|
|
204
206
|
itemEl.remove()
|
package/package.json
CHANGED