waibu-bootstrap 2.6.2 → 2.6.4

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

@@ -28,8 +28,8 @@ async function getInputAttr (group, formControl = true, ro) {
     else attr.dataValue = val
     if (ro) {
       if (attr.ref) {
-        const [ref, fieldName = 'id'] = attr.ref.split(':')
-        attr.value = get(this, `component.locals.form._ref.${ref}.${fieldName}`, val)
+        const [ref, field = 'id'] = attr.ref.split(':')
+        attr.value = get(this, `component.locals.form._ref.${ref}.${field}`, val)
       } 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 }))
@@ -151,9 +151,10 @@ export async function buildFormTextarea (group, params) {
 
 export async function buildFormSelect (group, params) {
   const { omit, trim } = this.app.lib._
+  const { isSet } = this.app.lib.aneka
   const { $ } = this.component
   let attr = await getInputAttr.call(this, group, false)
-  attr.value = attr.value + ''
+  attr.value = isSet(attr.value) ? (attr.value + '') : undefined
   attr.class.push('form-select')
   let html = params.html
   if (sizes.includes(attr.size)) attr.class.push(`form-select-${attr.size}`)

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

@@ -3,8 +3,8 @@ import { css, scripts, inlineScript, handler } from './form-datetime.js'
 async function formDate () {
   return class FormDate extends this.app.baseClass.MpaWidget {
     static css = [...super.css, ...css]
-    static scripts = [...super.scripts, ...scripts(this.component.req)]
-    static inlineScript = inlineScript(this.component.req)
+    static scripts = scripts
+    static inlineScript = inlineScript
 
     build = async () => {
       const { set } = this.app.lib._

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

@@ -2,16 +2,21 @@ import { buildFormInput } from './_lib.js'
 import { build } from './form-input.js'
 
 export const css = ['waibuExtra.virtual:/tempusDominus/css/tempus-dominus.min.css']
-export function scripts (req) {
+export function scripts (cls) {
+  const { isFunction } = this.app.lib._
   const items = [
     'waibuExtra.virtual:/popperjs/umd/popper.min.js',
     'waibuExtra.virtual:/tempusDominus/js/tempus-dominus.min.js'
   ]
-  if (req.lang === 'id') items.push('waibuExtra.asset:/js/tempus-dominus-id.js')
-  return items
+  if (this.req.lang === 'id') items.push('waibuExtra.asset:/js/tempus-dominus-id.js')
+  else if (this.req.lang !== 'en-US') items.push(`waibuExtra.virtual:/tempusDominus/locales/${this.req.lang}.js`)
+
+  if (isFunction(cls.scripts)) return items
+  return [...cls.scripts ?? [], ...items]
 }
-export function inlineScript (req) {
-  const { jsonStringify } = this.app.waibuMpa
+export function inlineScript (cls) {
+  const { jsonStringify } = this.plugin.app.waibuMpa
+  const { isFunction } = this.app.lib._
   const opts = {
     display: {
       icons: {
@@ -28,24 +33,30 @@ export function inlineScript (req) {
       components: {
         seconds: true
       },
-      theme: req.darkMode ? 'dark' : 'light'
+      theme: this.req.darkMode ? 'dark' : 'light'
     },
     localization: {
       format: 'L LTS'
     }
   }
-  const items = [`const tdGlobalOpts = ${jsonStringify(opts, true)}`]
-  if (req.lang === 'id') {
+  let items = [
+    `const tdGlobalOpts = ${jsonStringify(opts, true)}`
+  ]
+  if (this.req.lang !== 'en-US') {
     items.unshift(
-      'tempusDominus.loadLocale(tempusDominus.locales.id)',
-      'tempusDominus.locale(tempusDominus.locales.id.name)'
+      `tempusDominus.loadLocale(tempusDominus.locales.${this.req.lang})`,
+      `tempusDominus.locale(tempusDominus.locales.${this.req.lang}.name)`
     )
   }
-  return items.join('\n')
+  items = items.join('\n')
+  if (isFunction(cls.inlineScript)) return items
+  return (cls.inlineScript ?? '') + '\n' + items
 }
 
 export async function handler (opts, params = {}) {
   const { jsonStringify } = this.app.waibuMpa
+  const { generateId } = this.app.lib.aneka
+  this.params.attr.id = generateId('alpha')
   this.params.attr['x-ref'] = 'self'
   this.params.attr['x-data'] = `{
     instance: null,
@@ -54,6 +65,11 @@ export async function handler (opts, params = {}) {
   this.params.attr['@load.window'] = `
     const options = _.merge({}, tdGlobalOpts, opts ?? {})
     instance = new tempusDominus.TempusDominus($refs.self, options)
+    instance.subscribe(tempusDominus.Namespace.events.change, (e) => {
+      if (e.type === 'change.td') {
+        $dispatch('input', instance.dates.lastPicked.toISOString())
+      }
+    })
   `
   await build.call(this, buildFormInput, this.params)
 }
@@ -61,8 +77,8 @@ export async function handler (opts, params = {}) {
 async function formDatetime () {
   return class FormDatetime extends this.app.baseClass.MpaWidget {
     static css = [...super.css, ...css]
-    static scripts = [...super.scripts, ...scripts(this.component.req)]
-    static inlineScript = inlineScript(this.component.req)
+    static scripts = scripts
+    static inlineScript = inlineScript
 
     build = async () => {
       const { set } = this.app.lib._

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

@@ -14,7 +14,7 @@ async function formSelectExt () {
 
     build = async () => {
       const { generateId } = this.app.lib.aneka
-      const { omit, merge, has } = this.app.lib._
+      const { omit, merge, has, isString } = this.app.lib._
       const { routePath } = this.app.waibu
       const { jsonStringify, groupAttrs } = this.app.waibuMpa
       const { base64JsonDecode } = this.app.waibu
@@ -55,6 +55,13 @@ async function formSelectExt () {
         group.remote.searchField = group.remote.searchField ?? 'id'
         group.remote.labelField = group.remote.labelField ?? 'id'
         group.remote.valueField = group.remote.valueField ?? 'id'
+        let query = `${group.remote.searchField}:~\\'{searchItem}\\'`
+        if (isString(group.remote.query)) {
+          const q = base64JsonDecode(group.remote.query)
+          const u = new URLSearchParams()
+          u.set('q', JSON.stringify(q))
+          query = u.toString().slice(2)
+        }
         if (has(group.remote, 'apiKey')) {
           if (group.remote.apiKey === true) fetchOpts.headers.Authorization = `Bearer ${apiKey}` // TODO: get it from wmpa
           else fetchOpts.headers.Authorization = `Bearer ${group.remote.apiKey}`
@@ -63,8 +70,9 @@ async function formSelectExt () {
           searchField: '${group.remote.searchField}',
           labelField: '${group.remote.labelField}',
           valueField: '${group.remote.valueField}',
-          load: (query, callback) => {
-            fetch('${group.remote.url}?query=${group.remote.searchField}:~\\'' + query + '\\'', ${jsonStringify(fetchOpts, true)})
+          load: (search, callback) => {
+            const query = '${query}'.replace('{searchItem}', search).replace('%7BsearchItem%7D', search)
+            fetch('${group.remote.url}?query=' + query, ${jsonStringify(fetchOpts, true)})
               .then(resp => resp.json())
               .then(json => {
                 callback(json.data)
@@ -88,6 +96,7 @@ async function formSelectExt () {
         const opts = ${opts}
         this.instance = new TomSelect($refs.${xref}, opts)
         const val = $refs.${xref}.dataset.value
+        console.log(val)
         if (!_.isEmpty(val)) {
           this.value = val.split('|')
         }
@@ -131,7 +140,7 @@ async function formSelectExt () {
       // this.params.attr['@load.window'] = 'onLoad()'
       this.params.attr['x-init'] = 'onLoad()'
       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'])
+      this.params.attr = omit(this.params.attr, ['noDropdownInput', 'removeBtn', 'clearBtn', 'c-opts', 'remoteUrl', 'remoteSearchField', 'remoteLabelField', 'remoteValueField', 'remoteQuery', 'remoteApiKey'])
       await build.call(this, buildFormSelect, this.params)
     }
   }

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

@@ -3,8 +3,8 @@ import { css, scripts, inlineScript, handler } from './form-datetime.js'
 async function formTime () {
   return class FormTime extends this.app.baseClass.MpaWidget {
     static css = [...super.css, ...css]
-    static scripts = [...super.scripts, ...scripts(this.component.req)]
-    static inlineScript = inlineScript(this.component.req)
+    static scripts = scripts
+    static inlineScript = inlineScript
 
     build = async () => {
       const { set } = this.app.lib._

package/package.json

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

package/wiki/CHANGES.md

@@ -1,5 +1,14 @@
 # Changes
 
+## 2026-04-07
+
+- [2.6.4] Bug fix on widget ```form-select-ext```
+- [2.6.4] Bug fix on ```buildFormSelect()```
+
+## 2026-04-01
+
+- [2.6.3] Bug fix on widget ```form-datetime```
+
 ## 2026-03-07
 
 - [2.6.2] Bug fix on widget ```app-launcher-trigger```