waibu-bootstrap 2.3.0 → 2.5.0

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

@@ -5,7 +5,7 @@ const variants = ['subtle', 'secondary', 'tertiary']
 
 function background ({ key, params }) {
   const { uniq } = this.app.lib._
-  const attrs = this.app.waibuMpa.attrToArray(params.attr[key])
+  const attrs = this.app.waibu.attrToArray(params.attr[key])
   const bgColors = ['body', 'black', 'white', 'transparent', ...colors]
   for (const attr of attrs) {
     const [item, val] = attr.split(':')

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

@@ -5,7 +5,7 @@ const variants = ['subtle', 'secondary', 'tertiary']
 function border ({ tag, key, params }) {
   if (['table'].includes(tag)) return
   const { uniq } = this.app.lib._
-  const attrs = this.app.waibuMpa.attrToArray(params.attr[key])
+  const attrs = this.app.waibu.attrToArray(params.attr[key])
   const borderColors = ['body', 'black', 'white', ...colors]
   let hasSide
   for (const attr of attrs) {

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

@@ -2,7 +2,7 @@ import { dims } from './_lib.js'
 
 function dim ({ key, params }) {
   const { uniq } = this.app.lib._
-  const attrs = this.app.waibuMpa.attrToArray(params.attr[key])
+  const attrs = this.app.waibu.attrToArray(params.attr[key])
   for (const attr of attrs) {
     const [item, val] = attr.split(':')
     for (const value of uniq((val ?? '').split(','))) {

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

@@ -2,7 +2,7 @@ import { breakpoints, displays } from './_lib.js'
 
 function display ({ key, params }) {
   const { uniq, isEmpty } = this.app.lib._
-  const attrs = this.app.waibuMpa.attrToArray(params.attr[key])
+  const attrs = this.app.waibu.attrToArray(params.attr[key])
   let canHaveGap
   for (const attr of attrs) {
     const [item, val] = attr.split(':')

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

@@ -19,7 +19,7 @@ function flex ({ key, params }) {
     params.attr.class.push('d-flex')
     return
   }
-  const attrs = this.app.waibuMpa.attrToArray(params.attr[key])
+  const attrs = this.app.waibu.attrToArray(params.attr[key])
   const inline = attrs.includes('inline')
   let hasFlex = false
   for (const attr of attrs) {

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

@@ -2,7 +2,7 @@ import { levels, weights, fstyles, parseSimple } from './_lib.js'
 
 function font ({ key, params }) {
   const { uniq } = this.app.lib._
-  const attrs = this.app.waibuMpa.attrToArray(params.attr[key])
+  const attrs = this.app.waibu.attrToArray(params.attr[key])
   for (const attr of attrs) {
     const [item, val] = attr.split(':')
     for (const value of uniq((val ?? '').split(','))) {

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

@@ -5,7 +5,7 @@ const prefixes = ['x', 'y', '']
 
 function gutter ({ key, params }) {
   const { isString } = this.app.lib._
-  const { attrToArray } = this.app.waibuMpa
+  const { attrToArray } = this.app.waibu
   if (isString(params.attr.gutter)) {
     const items = attrToArray(params.attr.gutter)
     for (const item of items) {

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

@@ -5,7 +5,7 @@ const ovariants = ['hover']
 
 function link ({ key, params }) {
   const { uniq } = this.app.lib._
-  const attrs = this.app.waibuMpa.attrToArray(params.attr[key])
+  const attrs = this.app.waibu.attrToArray(params.attr[key])
   const linkColors = ['body', 'black', 'white', ...colors]
   for (const attr of attrs) {
     const [item, val] = attr.split(':')

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

@@ -4,7 +4,7 @@ const sides = ['x', 'y', 'all', ...aligns]
 const sizes = ['0', 'auto', ...widths]
 
 function marginPadding ({ key, params }) {
-  for (const item of this.app.waibuMpa.attrToArray(params.attr[key])) {
+  for (const item of this.app.waibu.attrToArray(params.attr[key])) {
     let [side, size, bp] = item.split('-')
     if (bp && !breakpoints.includes(bp)) bp = undefined
     if (sides.includes(side) && (!size || sizes.includes(size))) {

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

@@ -4,7 +4,7 @@ const zes = ['n1', '0', '1', '2', '3']
 function position ({ key, params }) {
   const { without } = this.app.lib._
   if (params.attr[key].includes(':')) {
-    const attrs = this.app.waibuMpa.attrToArray(params.attr[key])
+    const attrs = this.app.waibu.attrToArray(params.attr[key])
     for (const attr of attrs) {
       const [item, val] = attr.split(':')
       /*
@@ -19,7 +19,7 @@ function position ({ key, params }) {
       }
     }
   } else {
-    const [type, arrangeStart, arrangeEnd, translateMiddle] = this.app.waibuMpa.attrToArray(params.attr[key])
+    const [type, arrangeStart, arrangeEnd, translateMiddle] = this.app.waibu.attrToArray(params.attr[key])
     if (positions.includes(type)) {
       params.attr.class.push(`position-${type}`)
       if (without(positions, 'static').includes(type) && arrangeStart &&

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

@@ -7,7 +7,7 @@ function rounded ({ key, params }) {
     params.attr.class.push('rounded')
     return
   }
-  const attrs = this.app.waibuMpa.attrToArray(params.attr[key])
+  const attrs = this.app.waibu.attrToArray(params.attr[key])
   let hasType
   for (const attr of attrs) {
     const [item, val] = attr.split(':')

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

@@ -8,7 +8,7 @@ const variants = ['emphasis', 'secondary', 'tertiary']
 
 function text ({ key, params }) {
   const { uniq } = this.app.lib._
-  const attrs = this.app.waibuMpa.attrToArray(params.attr[key])
+  const attrs = this.app.waibu.attrToArray(params.attr[key])
   const textColors = ['body', 'black', 'white', ...colors]
   for (const attr of attrs) {
     const [item, val] = attr.split(':')

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

@@ -3,8 +3,9 @@ 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._
+  const { omit, get, set, isPlainObject, isArray, isString, has, forOwn, find } = 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,13 @@ 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) {
+        const item = find(prop.values, { value: val })
+        attr.value = escape(req.format(item ? req.t(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(' ')
   }
@@ -110,7 +117,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 })
   }
@@ -147,7 +154,7 @@ export async function buildFormSelect (group, params) {
   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, html: '' })
+  if (attr.options) html = this.component.buildOptions({ attr })
   else {
     const items = []
     $(`<div>${trim(html ?? '')}</div>`).find('option').each(function () {

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

@@ -10,8 +10,8 @@ async function appLauncher () {
 
     build = async () => {
       const { locals } = this.component
-      const { routePath } = this.app.waibu
-      const { groupAttrs, attrToArray } = this.app.waibuMpa
+      const { routePath, attrToArray } = this.app.waibu
+      const { groupAttrs } = this.app.waibuMpa
       const menu = this.params.attr.menu ?? 'pages'
       const group = groupAttrs(this.params.attr, ['trigger'])
       let launcher = `<c:drawer id="${this.params.attr.id}" t:title="Modules" no-padding style="${menu === 'pages' ? 'width:350px' : ''}">\n`

package/extend/waibuMpa/theme/component/widget/breadcrumb-item.js

@@ -10,7 +10,7 @@ async function breadcrumbItem () {
 
     build = async () => {
       const { omit } = this.app.lib._
-      const { attrToArray } = this.app.waibuMpa
+      const { attrToArray } = this.app.waibu
       if (this.params.attr.href) {
         if (this.params.attr.hrefRebuild) {
           this.params.attr.hrefRebuild = attrToArray(this.params.attr.hrefRebuild)

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

@@ -38,8 +38,8 @@ async function breadcrumb () {
 
     build = async () => {
       const { isString, omit } = this.app.lib._
-      const { routePath } = this.app.waibu
-      const { urlToBreadcrumb, attrToArray } = this.app.waibuMpa
+      const { routePath, attrToArray } = this.app.waibu
+      const { urlToBreadcrumb } = this.app.waibuMpa
       let divider = ''
       if (this.params.attr.noDivider) divider = ' style="--bs-breadcrumb-divider: \'\';"'
       else if (isString(this.params.attr.divider)) divider = ` style="--bs-breadcrumb-divider: '${this.params.attr.divider}';"`

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

@@ -14,7 +14,7 @@ async function carousel () {
     }
 
     build = async () => {
-      const { attrToArray } = this.app.waibuMpa
+      const { attrToArray } = this.app.waibu
       const { $ } = this.component
       let activeItem = 0
       $(this.params.html).children().each(function (idx) {

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

@@ -11,7 +11,8 @@ async function collapse () {
     build = async () => {
       const { generateId } = this.app.lib.aneka
       const { merge, isString } = this.app.lib._
-      const { attrToArray, groupAttrs } = this.app.waibuMpa
+      const { attrToArray } = this.app.waibu
+      const { groupAttrs } = this.app.waibuMpa
       const items = []
       const { $ } = this.component
       const me = this

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

@@ -3,7 +3,7 @@ import { sizes } from '../method/after-build-tag/_lib.js'
 
 export async function handleInput ({ handler, group, params } = {}) {
   const { trim, filter, has, omit, pull, find, get } = this.app.lib._
-  const { attrToArray } = this.app.waibuMpa
+  const { attrToArray } = this.app.waibu
   const { $ } = this.component
   const addons = []
   const isLabel = has(this.params.attr, 'label')

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

@@ -9,14 +9,15 @@ export const scripts = 'waibuExtra.virtual:/tom-select/js/tom-select.complete.mi
 
 async function formSelectExt () {
   return class FormSelectExt extends this.app.baseClass.MpaWidget {
-    static css = [...super.css, css]
+    static css = [...super.css, ...css]
     static scripts = [...super.scripts, scripts]
 
     build = async () => {
       const { generateId } = this.app.lib.aneka
       const { omit, merge, has } = this.app.lib._
       const { routePath } = this.app.waibu
-      const { jsonStringify, base64JsonDecode, groupAttrs } = this.app.waibuMpa
+      const { jsonStringify, groupAttrs } = this.app.waibuMpa
+      const { base64JsonDecode } = this.app.waibu
       const { req } = this.component
       let apiKey = ''
       if (req.user && this.app.sumba) apiKey = await this.app.sumba.getApiKeyFromUserId(req.user.id)
@@ -35,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 }
@@ -131,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/extend/waibuMpa/theme/component/widget/form.js

@@ -10,7 +10,7 @@ async function form () {
       this.component.locals.form = this.component.locals.form ?? {}
       const { pascalCase } = this.app.lib.aneka
       const { isEmpty, omit, has } = this.app.lib._
-      const { attrToArray } = this.app.waibuMpa
+      const { attrToArray } = this.app.waibu
       const { groupAttrs } = this.app.waibuMpa
       if (!has(this.params.attr, 'autocomplete')) this.params.attr.autocomplete = 'off'
       if (!has(this.params.attr, 'method')) this.params.attr.method = 'POST'

package/extend/waibuMpa/theme/component/widget/grid-col.js

@@ -22,7 +22,7 @@ async function gridCol () {
 
     build = async () => {
       const { map, without, isString } = this.app.lib._
-      const { attrToArray } = this.app.waibuMpa
+      const { attrToArray } = this.app.waibu
       if (this.params.attr.break) {
         const ext = breakpoints.includes(this.params.attr.break) ? `d-none d-${this.params.attr.break}-block` : ''
         this.params.attr.class.push('w-100', ext)

package/package.json

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

package/wiki/CHANGES.md

@@ -1,5 +1,14 @@
 # Changes
 
+## 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
 
 - [2.3.0] Add capability to use custom tag on ```select```

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.waibuMpa
-      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