waibu-bootstrap 2.2.3 → 2.4.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

@@ -147,7 +147,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 () {
@@ -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/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-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 css = [...super.css, ...css]
     static scripts = [...super.scripts, scripts]
 
-    static inlineCss = inlineCss
-
     constructor (options) {
       super(options)
       this.params.noTag = true
@@ -16,7 +13,7 @@ async function formSelectCountry () {
     build = async () => {
       const { readConfig } = this.app.bajo
       const { map } = this.app.lib._
-      const { base64JsonEncode } = this.app.waibuMpa
+      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('\'', '') }

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

@@ -1,67 +1,36 @@
 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 css = [...super.css, ...css]
     static scripts = [...super.scripts, scripts]
-    static inlineCss = inlineCss
 
     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)
       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 +61,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 +86,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/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/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.4.0",
   "description": "Bootstrap suport for Waibu Framework",
   "main": "index.js",
   "scripts": {

package/wiki/CHANGES.md

@@ -1,5 +1,17 @@
 # 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
+
+## 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```