waibu-bootstrap 2.9.2 → 2.11.0

package/extend/waibuMpa/theme/component/method/after-build-tag/_lib.js

@@ -5,7 +5,7 @@ export const fstyles = ['italic', 'normal']
 export const heights = ['1', 'sm', 'base', 'lg']
 export const cvariants = ['emphasis', 'secondary', 'tertiary']
 export const cbgvariants = ['subtle']
-export const opacities = ['0', '25', '50', '75', '100']
+export const opacities = ['10', '25', '50', '75', '100']
 export const aligns = ['top', 'bottom', 'start', 'end', 'middle']
 export const dirs = ['up', 'down', 'start', 'end']
 export const widths = ['0', '1', '2', '3', '4', '5']

package/extend/waibuMpa/theme/component/widget/_lib.js

@@ -53,12 +53,12 @@ export async function buildFormLabel (group, tag, cls) {
   return await this.component.buildTag({ tag: tag ?? 'label', attr: group.label, html: group._.label })
 }
 
-export async function buildFormInput (group, params) {
+export async function buildFormInput (group) {
   const attr = await getInputAttr.call(this, group)
   return await this.component.buildTag({ tag: 'input', attr, selfClosing: true })
 }
 
-export async function buildFormCheck (group, params) {
+export async function buildFormCheck (group) {
   const { has, get } = this.app.lib._
   const attr = await getInputAttr.call(this, group, false)
   attr.type = 'checkbox'
@@ -68,7 +68,7 @@ export async function buildFormCheck (group, params) {
   return await this.component.buildTag({ tag: 'input', attr, selfClosing: true })
 }
 
-export async function buildFormSwitch (group, params) {
+export async function buildFormSwitch (group) {
   const { has } = this.app.lib._
   const attr = await getInputAttr.call(this, group, false)
   attr.type = 'checkbox'
@@ -79,14 +79,14 @@ export async function buildFormSwitch (group, params) {
   return await this.component.buildTag({ tag: 'input', attr, selfClosing: true })
 }
 
-export async function buildFormRadio (group, params) {
+export async function buildFormRadio (group) {
   const attr = await getInputAttr.call(this, group, false)
   attr.type = 'radio'
   attr.class.push('form-check-input')
   return await this.component.buildTag({ tag: 'input', attr, selfClosing: true })
 }
 
-export async function buildFormCheckToggle (group, params) {
+export async function buildFormCheckToggle (group) {
   const attr = await getInputAttr.call(this, group, false)
   attr.type = 'checkbox'
   attr.autocomplete = 'off'
@@ -94,7 +94,7 @@ export async function buildFormCheckToggle (group, params) {
   return await this.component.buildTag({ tag: 'input', attr, selfClosing: true })
 }
 
-export async function buildFormRadioToggle (group, params) {
+export async function buildFormRadioToggle (group) {
   const attr = await getInputAttr.call(this, group, false)
   attr.type = 'radio'
   attr.autocomplete = 'off'
@@ -102,7 +102,7 @@ export async function buildFormRadioToggle (group, params) {
   return await this.component.buildTag({ tag: 'input', attr, selfClosing: true })
 }
 
-export async function buildFormPlaintext (group, params) {
+export async function buildFormPlaintext (group) {
   const { omit } = this.app.lib._
   const attr = await getInputAttr.call(this, group, false, true)
   attr.class.push('form-control-plaintext')
@@ -110,7 +110,7 @@ export async function buildFormPlaintext (group, params) {
   return await this.component.buildTag({ tag: 'div', attr: omit(attr, ['value']), html: attr.value })
 }
 
-export async function buildFormColor (group, params) {
+export async function buildFormColor (group) {
   const attr = await getInputAttr.call(this, group)
   attr.class.push('form-control-color')
   attr.type = 'color'
@@ -118,21 +118,21 @@ export async function buildFormColor (group, params) {
   return await this.component.buildTag({ tag: 'input', attr, selfClosing: true })
 }
 
-export async function buildFormFile (group, params) {
+export async function buildFormFile (group) {
   const attr = await getInputAttr.call(this, group)
   attr.type = 'file'
   return await this.component.buildTag({ tag: 'input', attr, selfClosing: true })
 }
 
-export async function buildFormTextarea (group, params) {
+export async function buildFormTextarea (group) {
   const attr = await getInputAttr.call(this, group)
-  params.html = attr.value
+  this.params.html = attr.value
   attr.style.minHeight = '100px'
   delete attr.value
-  return await this.component.buildTag({ tag: 'textarea', attr, html: params.html })
+  return await this.component.buildTag({ tag: 'textarea', attr, html: this.params.html })
 }
 
-export async function buildFormSelect (group, params) {
+export async function buildFormSelect (group) {
   const { omit, trim } = this.app.lib._
   const { isSet } = this.app.lib.aneka
   const { $ } = this.component
@@ -144,7 +144,7 @@ export async function buildFormSelect (group, params) {
   } catch (err) {}
   attr.value = isSet(attr.value) ? (attr.value + '') : undefined
   attr.class.push('form-select')
-  let html = params.html
+  let html = this.params.html
   if (sizes.includes(attr.size)) attr.class.push(`form-select-${attr.size}`)
   if (attr.options) html = await this.component.buildOptions({ attr })
   else {
@@ -158,7 +158,7 @@ export async function buildFormSelect (group, params) {
   return await this.component.buildTag({ tag: attr.tag ?? 'select', attr, html })
 }
 
-export async function buildFormRange (group, params) {
+export async function buildFormRange (group) {
   const attr = await getInputAttr.call(this, group, false)
   attr.type = 'range'
   attr.class.push('form-range')

package/extend/waibuMpa/theme/component/widget/form-check-toggle.js

@@ -2,7 +2,7 @@ import { buildFormLabel, buildFormCheckToggle } from './_lib.js'
 import { parseVariant, colors } from '../method/after-build-tag/_lib.js'
 const variants = ['outline']
 
-export async function build (handler, params = {}) {
+export async function build (handler) {
   const { groupAttrs } = this.app.waibuMpa
   const { generateId } = this.app.lib.aneka
   this.component.normalizeAttr(this.params)
@@ -26,7 +26,7 @@ async function formCheckToggle () {
       const { has } = this.app.lib._
       const { req } = this.component
       if (!has(this.params.attr, 'label')) this.params.attr.label = req.t('Toggle Check')
-      await build.call(this, buildFormCheckToggle, this.params)
+      await build.call(this, buildFormCheckToggle)
     }
   }
 }

package/extend/waibuMpa/theme/component/widget/form-check.js

@@ -1,6 +1,6 @@
 import { buildFormHint, buildFormLabel, buildFormCheck } from './_lib.js'
 
-export async function build (handler, params = {}) {
+export async function build (handler) {
   const { isEmpty, get, find } = this.app.lib._
   const { groupAttrs } = this.app.waibuMpa
   const { generateId } = this.app.lib.aneka
@@ -49,7 +49,7 @@ export async function build (handler, params = {}) {
 async function formCheck () {
   return class FormCheck extends this.app.baseClass.MpaWidget {
     build = async () => {
-      await build.call(this, buildFormCheck, this.params)
+      await build.call(this, buildFormCheck)
     }
   }
 }

package/extend/waibuMpa/theme/component/widget/form-color.js

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

package/extend/waibuMpa/theme/component/widget/form-datetime.js

@@ -53,7 +53,7 @@ export function inlineScript (cls) {
   return (cls.inlineScript ?? '') + '\n' + items
 }
 
-export async function handler (opts, params = {}) {
+export async function handler (opts) {
   const { jsonStringify } = this.app.waibuMpa
   const { generateId } = this.app.lib.aneka
   this.params.attr.id = generateId('alpha')
@@ -71,7 +71,7 @@ export async function handler (opts, params = {}) {
       }
     })
   `
-  await build.call(this, buildFormInput, this.params)
+  await build.call(this, buildFormInput)
 }
 
 async function formDatetime () {
@@ -88,7 +88,7 @@ async function formDatetime () {
       set(opts, 'display.buttons.today', true)
       set(opts, 'display.buttons.clear', true)
       if (this.params.attr.dateRange) set(opts, 'dateRange', true)
-      await handler.call(this, opts, this.params)
+      await handler.call(this, opts)
     }
   }
 }

package/extend/waibuMpa/theme/component/widget/form-file.js

@@ -9,7 +9,7 @@ async function formFile () {
     }
 
     build = async () => {
-      await build.call(this, buildFormFile, this.params)
+      await build.call(this, buildFormFile)
     }
   }
 }

package/extend/waibuMpa/theme/component/widget/form-input.js

@@ -1,11 +1,11 @@
 import { buildFormHint, buildFormLabel, buildFormInput } from './_lib.js'
 import { sizes } from '../method/after-build-tag/_lib.js'
 
-export async function handleInput ({ handler, group, params } = {}) {
+export async function handleInput ({ handler, group } = {}) {
   const { trim, filter, has, omit, pull, find, get } = this.app.lib._
   const { attrToArray } = this.app.waibu
   const { $ } = this.component
-  const addons = []
+  const addons = [...(this.params.addons ?? [])]
   const isLabel = has(this.params.attr, 'label')
   const isLabelFloating = group.label && group.label.floating && isLabel
   if (isLabelFloating) {
@@ -23,7 +23,7 @@ export async function handleInput ({ handler, group, params } = {}) {
   const result = {
     prepend: [],
     append: [],
-    input: await handler.call(this, group, this.params)
+    input: await handler.call(this, group)
   }
   if (group._.name) {
     const details = get(this, 'component.locals.error.details', [])
@@ -82,7 +82,7 @@ export async function handleInput ({ handler, group, params } = {}) {
   return contents
 }
 
-export async function build (handler, params = {}) {
+export async function build (handler) {
   const { generateId } = this.app.lib.aneka
   const { groupAttrs } = this.app.waibuMpa
   this.component.normalizeAttr(this.params, { autoId: true, type: this.params.attr.type ?? 'text' })
@@ -100,7 +100,7 @@ export async function build (handler, params = {}) {
     datalist = group._.datalist
     group._.list = generateId('alpha')
   }
-  const contents = await handleInput.call(this, { handler, params, group })
+  const contents = await handleInput.call(this, { handler, group })
   if (datalist) {
     const args = { tag: 'datalist', attr: { id: group._.list, options: datalist }, html: '' }
     const cmp = await this.component.buildTag(args)
@@ -124,7 +124,7 @@ export async function build (handler, params = {}) {
 async function formInput () {
   return class FormInput extends this.app.baseClass.MpaWidget {
     build = async () => {
-      await build.call(this, buildFormInput, this.params)
+      await build.call(this, buildFormInput)
     }
   }
 }

package/extend/waibuMpa/theme/component/widget/form-password.js

@@ -5,7 +5,7 @@ async function formPassword () {
   return class FormPassword extends this.app.baseClass.MpaWidget {
     build = async () => {
       this.params.attr.type = 'password'
-      await build.call(this, buildFormInput, this.params)
+      await build.call(this, buildFormInput)
     }
   }
 }

package/extend/waibuMpa/theme/component/widget/form-plaintext.js

@@ -8,6 +8,7 @@ async function formPlaintext () {
       const { isEmpty, get } = this.app.lib._
       const { escape } = this.app.waibu
       this.params.attr.disabled = true
+      this.params.attr.background = 'color:secondary opacity:10'
       const { name } = this.params.attr
       if (this.params.attr.labelFloating) this.params.attr.class.push('border', 'rounded')
       if (!isEmpty(name) && isEmpty(this.params.attr.value)) {
@@ -26,7 +27,7 @@ async function formPlaintext () {
         this.params.attr.value = value
         this.params.attr.dataType = prop.type
       }
-      await build.call(this, buildFormPlaintext, this.params)
+      await build.call(this, buildFormPlaintext)
     }
   }
 }

package/extend/waibuMpa/theme/component/widget/form-radio-toggle.js

@@ -5,7 +5,7 @@ async function formRadioToggle () {
   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)
+      await build.call(this, buildFormRadioToggle)
     }
   }
 }

package/extend/waibuMpa/theme/component/widget/form-radio.js

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

package/extend/waibuMpa/theme/component/widget/form-range.js

@@ -6,7 +6,7 @@ async function formRange () {
     build = async () => {
       this.params.attr.type = 'range'
       delete this.params.attr.labelFloating
-      await build.call(this, buildFormRange, this.params)
+      await build.call(this, buildFormRange)
     }
   }
 }

package/extend/waibuMpa/theme/component/widget/form-select-ext.js

@@ -142,7 +142,7 @@ async function formSelectExt () {
       this.params.attr['x-data'] = `{ ${xData.join(',\n')} }`
       // this.params.attr['@load.window'] = 'onLoad()'
       this.params.attr['x-init'] = 'onLoad()'
-      await build.call(this, buildFormSelect, this.params)
+      await build.call(this, buildFormSelect)
       /*
       let options = []
       if (this.params.attr.options) {

package/extend/waibuMpa/theme/component/widget/form-switch.js

@@ -10,7 +10,7 @@ async function formSwitch () {
     }
 
     build = async () => {
-      await build.call(this, buildFormSwitch, this.params)
+      await build.call(this, buildFormSwitch)
     }
   }
 }

package/extend/waibuMpa/theme/component/widget/form-textarea.js

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

package/extend/waibuMpa/theme/component/widget/nav-dropdown-setting.js

@@ -93,9 +93,7 @@ async function navDropdownSetting () {
               async signout () {
                 await wbs.confirmation(\`${this.component.req.t('signoutWarning')}\`, {
                   ok: '${id}:post',
-                  close: 'y',
-                  theme: '${this.component.theme.name}',
-                  iconset: '${this.component.iconset.name}'
+                  close: 'y'
                 })
               },
               post () {

package/extend/waibuMpa/theme/component/widget/nav-item-signout.js

@@ -10,9 +10,7 @@ async function navItemSignout () {
         async signout () {
           await wbs.confirmation(\`${this.component.req.t('signoutWarning')}\`, {
             ok: '${this.params.attr.id}:post',
-            close: 'y',
-            theme: '${this.component.theme.name}',
-            iconset: '${this.component.iconset.name}'
+            close: 'y'
           })
         },
         post () {

package/extend/waibuMpa/theme/component/widget/sidebar.js

@@ -1,4 +1,4 @@
-function formatSentence (item, params) {
+function formatSentence (item) {
   const { kebabCase, omit, merge } = this.app.lib._
   const { isSet } = this.app.lib.aneka
   if (item.divider) return '<c:li class="nav-item"><c:hr margin="y-2"/></c:li>'
@@ -59,14 +59,14 @@ async function sidebar () {
           let items = filter(this.component.locals.sidebar ?? [], s => !s.bottom)
           html.push(`<c:nav tag="ul" flex="column" margin="bottom-auto" text="align:${this.params.attr.align}" type="pills" ${this.params.attr.expanded ? '' : 'padding="all-1"'}>`)
           for (const item of items) {
-            html.push(formatSentence.call(this, item, this.params))
+            html.push(formatSentence.call(this, item))
           }
           html.push('</c:nav>')
           // bottom
           html.push(`<c:nav tag="ul" flex="column" text="align:${this.params.attr.align}" type="pills" ${this.params.attr.expanded ? '' : 'padding="all-1"'} ${this.params.attr.fancyProfile ? 'fancy-profile' : ''}>`)
           items = filter(this.component.locals.sidebar ?? [], s => s.bottom)
           for (const item of items) {
-            html.push(formatSentence.call(this, item, this.params))
+            html.push(formatSentence.call(this, item))
           }
           html.push('</c:nav>')
         }

package/package.json

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

package/wiki/CHANGES.md

@@ -1,5 +1,16 @@
 # Changes
 
+## 2026-06-01
+
+- [2.11.0] Remove ```params``` on all widget since it already there through ```this.params```
+- [2.11.0] Add feature to add addons on all form inputs through schema
+
+## 2026-05-25
+
+- [2.10.0] Bug fix in ```_lib.js```
+- [2.10.0] Add dimmed background for ```form-plaintext``` widget
+- [2.10.0] Auto detect theme & iconset
+
 ## 2026-05-22
 
 - [2.9.2] Bug fix in ```drawer``` widget