waibu-bootstrap 2.2.3 → 2.3.0

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

@@ -156,7 +156,7 @@ export async function buildFormSelect (group, params) {
     html = items.join('\n')
   }
   attr = omit(attr, ['size', 'type', 'options', 'value'])
-  return await this.component.buildTag({ tag: 'select', attr, html })
+  return await this.component.buildTag({ tag: attr.tag ?? 'select', attr, html })
 }
 
 export async function buildFormRange (group, params) {

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

@@ -1,13 +1,10 @@
-import { inlineCss, css, scripts } from './form-select-ext.js'
+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]
 
-    static inlineCss = inlineCss
-
     constructor (options) {
       super(options)
       this.params.noTag = true

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

@@ -1,47 +1,16 @@
 import { buildFormSelect } from './_lib.js'
 import { build } from './form-input.js'
 
-// TODO: load default values from remote
-export const inlineCss = `
-.ts-dropdown {
-  min-width: 242px;
-}
-.ts-control {
-  padding-top: 0px;
-}
-.ts-wrapper {
-  margin-left: calc(var(--bs-border-width) * -1) !important;
-  border-top-left-radius: var(--bs-border-radius) !important;
-  border-bottom-left-radius: var(--bs-border-radius) !important;
-  white-space: nowrap !important;
-}
-.ts-control, .ts-control input, .ts-dropdown {
-  color: inherit;
-}
-.form-floating > .ts-wrapper {
-  padding-top: 1.625rem !important;
-}
-
-.ts-wrapper.focus {
-  border-color: #86b7fe;
-  outline: 0;
-  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
-}
-
-.focus .ts-control {
-  box-shadow: none;
-  border: none;
-  box-shadow: none;
-}
-`
-export const css = 'waibuExtra.virtual:/tom-select/css/tom-select.bootstrap5.min.css'
+export const css = [
+  'waibuExtra.virtual:/tom-select/css/tom-select.bootstrap5.min.css',
+  'waibuBootstrap.asset:/css/widget.css'
+]
 export const scripts = 'waibuExtra.virtual:/tom-select/js/tom-select.complete.min.js'
 
 async function formSelectExt () {
   return class FormSelectExt extends this.app.baseClass.MpaWidget {
     static css = [...super.css, css]
     static scripts = [...super.scripts, scripts]
-    static inlineCss = inlineCss
 
     build = async () => {
       const { generateId } = this.app.lib.aneka
@@ -54,14 +23,13 @@ async function formSelectExt () {
       const xref = this.params.attr['x-ref'] ?? 'select'
       this.params.attr.id = this.params.attr.id ?? generateId('alpha')
       this.params.attr['x-ref'] = xref
-      this.params.attr['x-data'] = `{
-        instance: null
-      }`
+      const xData = ['instance: null', 'value: null']
       const plugins = ['drag_drop']
       if (!this.params.attr.noDropdownInput) plugins.push('dropdown_input')
       if (this.params.attr.removeBtn) plugins.push('remove_button')
       if (this.params.attr.clearBtn) plugins.push('clear_button')
       if (this.params.attr.optgroupColumns) plugins.push('optgroup_columns')
+      if (this.params.attr.noCaret) this.params.attr.class.push('no-caret') // TODO: no caret remove caret on ALL instances, need to make it instance specific
       let options = []
       if (this.params.attr.options) {
         try {
@@ -92,7 +60,7 @@ async function formSelectExt () {
           if (group.remote.apiKey === true) fetchOpts.headers.Authorization = `Bearer ${apiKey}` // TODO: get it from wmpa
           else fetchOpts.headers.Authorization = `Bearer ${group.remote.apiKey}`
         }
-        opts = `{
+        opts = opts.slice(0, -1) + `,
           searchField: '${group.remote.searchField}',
           labelField: '${group.remote.labelField}',
           valueField: '${group.remote.valueField}',
@@ -117,26 +85,52 @@ async function formSelectExt () {
           }
         }`
       }
-
-      this.params.attr['@load.window'] = `
+      let text = `onLoad () {
         const opts = ${opts}
-        instance = new TomSelect($refs.${xref}, opts)
+        this.instance = new TomSelect($refs.${xref}, opts)
         const val = $refs.${xref}.dataset.value
+        if (!_.isEmpty(val)) {
+          this.value = val.split('|')
+        }
       `
+      if (this.params.attr.valueStore) {
+        const [store, key] = this.params.attr.valueStore.split(':')
+        text += `
+          this.value = Alpine.store('${store}').${key}
+          this.instance.on('change', value => {
+            this.value = _.cloneDeep(value)
+            Alpine.store('${store}').${key} = this.value
+          })
+        `
+      }
       if (group.remote) {
-        this.params.attr['@load.window'] += `
-          if (!_.isEmpty(val)) {
-            fetch('${group.remote.url}?query=${group.remote.valueField}:' + val, ${jsonStringify(fetchOpts, true)})
+        text += `
+          if (!_.isEmpty(this.value)) {
+            if (!_.isArray(this.value)) this.value = [this.value]
+            let query = '${group.remote.valueField}:['
+            let q = ''
+            for (const v of this.value) {
+              q += ',' + v
+            }
+            query += q.slice(1) + ']'
+            fetch('${group.remote.url}?query=' + query, ${jsonStringify(fetchOpts, true)})
               .then(resp => resp.json())
               .then(json => {
                 if (json.data.length === 0) return
-                const opt = _.pick(json.data[0], ['${group.remote.valueField}', '${group.remote.labelField}'])
-                instance.addOption(opt)
-                instance.setValue(opt.${group.remote.valueField})
+                for (const d of json.data) {
+                  const opt = _.pick(d, ['${group.remote.valueField}', '${group.remote.labelField}'])
+                  this.instance.addOption(opt)
+                }
+                this.instance.setValue(json.data.map(item => item.${group.remote.valueField}))
               })
           }
         `
       }
+      text += '}'
+      xData.push(text)
+      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
       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/waibuStatic/asset/css/widget.css

@@ -0,0 +1,34 @@
+.ts-dropdown {
+  min-width: 242px;
+}
+.ts-control {
+  padding-top: 0px;
+}
+.ts-wrapper {
+  margin-left: calc(var(--bs-border-width) * -1) !important;
+  border-top-left-radius: var(--bs-border-radius) !important;
+  border-bottom-left-radius: var(--bs-border-radius) !important;
+  white-space: nowrap !important;
+}
+.ts-control, .ts-control input, .ts-dropdown {
+  color: inherit;
+}
+.form-floating > .ts-wrapper {
+  padding-top: 1.625rem !important;
+}
+
+.ts-wrapper.focus {
+  border-color: #86b7fe;
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+.focus .ts-control {
+  box-shadow: none;
+  border: none;
+  box-shadow: none;
+}
+
+.form-select.no-caret {
+  --bs-form-select-bg-img: none !important;
+}

package/package.json

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

package/wiki/CHANGES.md

@@ -1,5 +1,11 @@
 # Changes
 
+## 2026-02-15
+
+- [2.3.0] Add capability to use custom tag on ```select```
+- [2.3.0] Now you can hide caret on ```<c:form-select-ext />``` with ```no-caret``` attribute
+- [2.3.0] Add ```value-store="name:key"``` to read/write value to Alpine's store
+
 ## 2026-02-11
 
 - [2.2.3] Bug fix on widget attribute ```rounded```