waibu-bootstrap 2.4.0 → 2.6.0

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

@@ -2,9 +2,10 @@ import { sizes } from '../method/after-build-tag/_lib.js'
 
 const trueValues = ['true', 'on', 'yes', '1', 1, true]
 
-function getInputAttr (group, formControl = true, ro) {
-  const { omit, get, set, isPlainObject, isArray, isString, has, forOwn } = this.app.lib._
+async function getInputAttr (group, formControl = true, ro) {
+  const { omit, get, set, isPlainObject, isArray, isString, has, forOwn, find, camelCase, isEmpty } = this.app.lib._
   const { escape } = this.app.waibu
+  const { req } = this.component
   if (formControl) group._.class.push('form-control')
   const attr = omit(group._, ['hint', 'label', 'wrapper'])
   if (attr.href) {
@@ -13,7 +14,10 @@ function getInputAttr (group, formControl = true, ro) {
     })
   }
   if (has(attr, 'name') && !has(attr, 'value') && this.component.locals.form) {
-    attr.dataType = attr.dataType ?? 'auto'
+    let prop = {}
+    const schema = get(this, 'component.locals.schema')
+    if (schema) prop = find(schema.properties, { name: attr.name }) ?? {}
+    attr.dataType = attr.dataType ?? prop.type ?? 'auto'
     let val = get(this, `component.locals.form.${attr.name}`)
     if (attr.dataType === 'boolean') {
       val = trueValues.includes(val)
@@ -26,10 +30,16 @@ function getInputAttr (group, formControl = true, ro) {
       if (attr.ref) {
         const [ref, fieldName = 'id'] = attr.ref.split(':')
         attr.value = get(this, `component.locals.form._ref.${ref}.${fieldName}`, val)
-      } else if (attr.dataType === 'boolean') attr.value = this.component.req.t(val ? 'true' : 'false')
-      else if (has(attr, 'name') === 'lat') attr.value = escape(this.component.req.format(val, attr.dataType, { latitude: true }))
-      else if (has(attr, 'name') === 'lng') attr.value = escape(this.component.req.format(val, attr.dataType, { longitude: true }))
-      else attr.value = escape(this.component.req.format(val, attr.dataType))
+      } else if (attr.dataType === 'boolean') attr.value = req.t(val ? 'true' : 'false')
+      else if (has(attr, 'name') === 'lat') attr.value = escape(req.format(val, attr.dataType, { latitude: true }))
+      else if (has(attr, 'name') === 'lng') attr.value = escape(req.format(val, attr.dataType, { longitude: true }))
+      else if (prop.values) {
+        let items = prop.values
+        if (typeof prop.values === 'string') items = await this.app.bajo.callHandler(prop.values)
+        const item = find(items, { value: val }) ?? {}
+        const ttext = camelCase(`${prop.name} ${item.text}`)
+        attr.value = escape(req.format(!isEmpty(item) ? (req.te(ttext) ? req.t(ttext) : item.text) : val, attr.dataType))
+      } else attr.value = escape(req.format(val, attr.dataType))
     } else attr.value = attr.dataValue
     if (isArray(val)) attr.value = val.join(' ')
   }
@@ -52,13 +62,13 @@ export async function buildFormLabel (group, tag, cls) {
 }
 
 export async function buildFormInput (group, params) {
-  const attr = getInputAttr.call(this, group)
+  const attr = await getInputAttr.call(this, group)
   return await this.component.buildTag({ tag: 'input', attr, selfClosing: true })
 }
 
 export async function buildFormCheck (group, params) {
   const { has, get } = this.app.lib._
-  const attr = getInputAttr.call(this, group, false)
+  const attr = await getInputAttr.call(this, group, false)
   attr.type = 'checkbox'
   attr.class.push('form-check-input')
   if (has(attr, 'name') && !has(attr, 'value')) attr.value = 'true'
@@ -68,7 +78,7 @@ export async function buildFormCheck (group, params) {
 
 export async function buildFormSwitch (group, params) {
   const { has } = this.app.lib._
-  const attr = getInputAttr.call(this, group, false)
+  const attr = await getInputAttr.call(this, group, false)
   attr.type = 'checkbox'
   attr.class.push('form-check-input')
   attr.role = 'switch'
@@ -78,14 +88,14 @@ export async function buildFormSwitch (group, params) {
 }
 
 export async function buildFormRadio (group, params) {
-  const attr = getInputAttr.call(this, group, false)
+  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) {
-  const attr = getInputAttr.call(this, group, false)
+  const attr = await getInputAttr.call(this, group, false)
   attr.type = 'checkbox'
   attr.autocomplete = 'off'
   attr.class.push('btn-check')
@@ -93,7 +103,7 @@ export async function buildFormCheckToggle (group, params) {
 }
 
 export async function buildFormRadioToggle (group, params) {
-  const attr = getInputAttr.call(this, group, false)
+  const attr = await getInputAttr.call(this, group, false)
   attr.type = 'radio'
   attr.autocomplete = 'off'
   attr.class.push('btn-check')
@@ -101,7 +111,7 @@ export async function buildFormRadioToggle (group, params) {
 }
 
 export async function buildFormPlaintext (group, params) {
-  const attr = getInputAttr.call(this, group, false, true)
+  const attr = await getInputAttr.call(this, group, false, true)
   delete attr.dataValue
   attr.class.push('form-control-plaintext')
   attr.readonly = ''
@@ -110,7 +120,7 @@ export async function buildFormPlaintext (group, params) {
     return await this.component.buildTag({ tag: 'textarea', attr, html: attr.value })
   }
   if (attr.href) {
-    const content = attr.value ? this.component.req.t(attr.value) : attr.href
+    const content = attr.value ? attr.value : attr.href
     const html = await this.component.buildTag({ tag: 'a', attr: { href: attr.href, content } })
     return await this.component.buildTag({ tag: 'div', attr, html })
   }
@@ -118,7 +128,7 @@ export async function buildFormPlaintext (group, params) {
 }
 
 export async function buildFormColor (group, params) {
-  const attr = getInputAttr.call(this, group)
+  const attr = await getInputAttr.call(this, group)
   attr.class.push('form-control-color')
   attr.type = 'color'
   if (!attr.dim) attr.dim = 'width:100'
@@ -126,13 +136,13 @@ export async function buildFormColor (group, params) {
 }
 
 export async function buildFormFile (group, params) {
-  const attr = getInputAttr.call(this, 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) {
-  const attr = getInputAttr.call(this, group)
+  const attr = await getInputAttr.call(this, group)
   params.html = attr.value
   attr.style.minHeight = '100px'
   delete attr.value
@@ -142,12 +152,12 @@ export async function buildFormTextarea (group, params) {
 export async function buildFormSelect (group, params) {
   const { omit, trim } = this.app.lib._
   const { $ } = this.component
-  let attr = getInputAttr.call(this, group, false)
+  let attr = await getInputAttr.call(this, group, false)
   attr.value = attr.value + ''
   attr.class.push('form-select')
   let html = params.html
   if (sizes.includes(attr.size)) attr.class.push(`form-select-${attr.size}`)
-  if (attr.options) html = this.component.buildOptions({ attr })
+  if (attr.options) html = await this.component.buildOptions({ attr })
   else {
     const items = []
     $(`<div>${trim(html ?? '')}</div>`).find('option').each(function () {
@@ -160,7 +170,7 @@ export async function buildFormSelect (group, params) {
 }
 
 export async function buildFormRange (group, params) {
-  const attr = getInputAttr.call(this, group, false)
+  const attr = await getInputAttr.call(this, group, false)
   attr.type = 'range'
   attr.class.push('form-range')
   return await this.component.buildTag({ tag: 'input', attr, selfClosing: true })

package/extend/waibuMpa/theme/component/widget/app-launcher.js

@@ -9,8 +9,7 @@ async function appLauncher () {
     }
 
     build = async () => {
-      const { locals } = this.component
-      const { routePath, attrToArray } = this.app.waibu
+      const { attrToArray } = this.app.waibu
       const { groupAttrs } = this.app.waibuMpa
       const menu = this.params.attr.menu ?? 'pages'
       const group = groupAttrs(this.params.attr, ['trigger'])
@@ -21,10 +20,11 @@ async function appLauncher () {
         if (menu === 'pages') toolbar.unshift('home')
         launcher += `<c:div padding="x-3 ${menu === 'home' ? 'bottom-3' : ''}">`
         launcher += '<c:navbar padding="y-0"><c:nav tag="ul">\n'
-        if (locals._meta.isAdmin) launcher += '<c:nav-item text="color:danger" href="' + routePath('waibuAdmin:/') + '" icon="lock" padding="start-0" />\n'
-        launcher += '</c:nav>\n<c:nav tag="ul">\n'
         for (const t of toolbar) {
           if (t === 'home') launcher += '<c:nav-item href="/" icon="house" padding="end-2" />\n'
+        }
+        launcher += '</c:nav>\n<c:nav tag="ul">\n'
+        for (const t of toolbar) {
           if (t === 'user' && this.app.sumba) launcher += '<c:sumba-nav-dropdown-user padding="end-2" />\n'
           if (t === '-') launcher += '<c:nav-divider />\n'
           if (t === 'fullscreen') launcher += '<c:nav-toggle-fullscreen padding="end-2" />\n'

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

@@ -12,7 +12,8 @@ async function drawer () {
     build = async () => {
       const { isString, omit, trim } = this.app.lib._
       const { groupAttrs } = this.app.waibuMpa
-      const { $ } = this.component
+      const { $, req, locals } = this.component
+      const { routePath } = this.app.waibu
       const group = groupAttrs(this.params.attr, ['trigger'])
       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 }))
@@ -22,6 +23,7 @@ async function drawer () {
       if (this.params.attr.scroll) this.params.attr.dataBsScroll = 'true'
       if (this.params.attr.noDismiss) this.params.attr.dataBsBackdrop = 'static'
       const buttons = []
+      if (locals._meta.isAdmin) buttons.push(await this.component.buildTag({ tag: 'btn', attr: { href: routePath('waibuAdmin:/'), icon: 'lock', text: 'color:danger', tooltip: req.t('adminArea') } }))
       const html = []
       $(`<div>${this.params.html}</div>`).children().each(function () {
         if (this.name === 'drawer-toolbar') buttons.push(trim($(this).prop('innerHTML')))

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

@@ -36,9 +36,7 @@ async function formSelectExt () {
         try {
           options = base64JsonDecode(this.params.attr.options)
         } catch (err) {
-          options = this.params.attr.options.split(' ').map(item => {
-            return { value: item, text: item }
-          })
+          options = this.params.attr.options
         }
       }
       let opts = { plugins }
@@ -132,7 +130,7 @@ async function formSelectExt () {
       this.params.attr['x-data'] = `{ ${xData.join(',\n')} }`
       // this.params.attr['@load.window'] = 'onLoad()'
       this.params.attr['x-init'] = 'onLoad()'
-      this.params.attr.options = options
+      if (options.length > 0) this.params.attr.options = options
       this.params.attr = omit(this.params.attr, ['noDropdownInput', 'removeBtn', 'clearBtn', 'c-opts', 'remoteUrl', 'remoteSearchField', 'remoteLabelField', 'remoteValueField'])
       await build.call(this, buildFormSelect, this.params)
     }

package/package.json

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

package/wiki/CHANGES.md

@@ -1,10 +1,19 @@
 # Changes
 
+## 2026-02-20
+
+- [2.6.0] Change ```getInputAttr()``` to async function
+- [2.6.0] Update to support a function handler as ```prop.values```
+- [2.6.0] Add button to admin area in ```Drawer``` if user is an admin
+
 ## 2026-02-18
 
 - [2.4.0] Update attribute functions from ```waibu```
 - [2.4.0] Bug fix on ```FormSelectExt``` 's static css
 - [2.4.0] Bug fix on ```FormSelectCountry``` 's static css
+- [2.5.0] Remove ```FormSelectCountry``` alltogther
+- [2.5.0] Bug fix on ```FormSelectExt```'s options
+- [2.5.0] In read only mode, auto detect value from model's values
 
 ## 2026-02-15
 

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

@@ -1,26 +0,0 @@
-import { css, scripts } from './form-select-ext.js'
-
-async function formSelectCountry () {
-  return class FormSelectCountry extends this.app.baseClass.MpaWidget {
-    static css = [...super.css, ...css]
-    static scripts = [...super.scripts, scripts]
-
-    constructor (options) {
-      super(options)
-      this.params.noTag = true
-    }
-
-    build = async () => {
-      const { readConfig } = this.app.bajo
-      const { map } = this.app.lib._
-      const { base64JsonEncode } = this.app.waibu
-      const countries = await readConfig('bajoCommonDb:/extend/dobo/fixture/country.json', { ignoreError: true, defValue: [] })
-      this.params.attr.options = base64JsonEncode(map(countries, c => {
-        return { value: c.id, text: c.name.replaceAll('\'', '') }
-      }))
-      this.params.html = await this.component.buildTag({ tag: 'formSelectExt', attr: this.params.attr, html: '' })
-    }
-  }
-}
-
-export default formSelectCountry