waibu-bootstrap 2.0.1 → 2.1.0

package/docs/index.js.html

@@ -14,9 +14,9 @@ async function factory (pkgName) {
    *
    * @class
    */
-  class WaibuBootstrap extends this.app.pluginClass.base {
+  class WaibuBootstrap extends this.app.baseClass.Base {
     static alias = 'wbs'
-    static dependencies = ['waibu-mpa', 'waibu-extra']
+    static dependencies = ['waibu-mpa', 'waibu-extra', 'waibu-alpinejs']
 
     constructor () {
       super(pkgName, me.app)

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

@@ -1,8 +1,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, isPlainObject, isArray, isString, has, forOwn } = this.app.lib._
-  const { escape } = this.plugin.app.waibu
+  const { omit, get, set, isPlainObject, isArray, isString, has, forOwn } = this.app.lib._
+  const { escape } = this.app.waibu
   if (formControl) group._.class.push('form-control')
   const attr = omit(group._, ['hint', 'label', 'wrapper'])
   if (attr.href) {
@@ -10,17 +12,21 @@ function getInputAttr (group, formControl = true, ro) {
       attr.href = attr.href.replace(`%7B${k}%7D`, v)
     })
   }
-  if (has(attr, 'name') && !attr.value && this.component.locals.form) {
+  if (has(attr, 'name') && !has(attr, 'value') && this.component.locals.form) {
     attr.dataType = attr.dataType ?? 'auto'
-    const val = get(this, `component.locals.form.${attr.name}`)
+    let val = get(this, `component.locals.form.${attr.name}`)
+    if (attr.dataType === 'boolean') {
+      val = trueValues.includes(val)
+      set(this, `component.locals.form.${attr.name}`, val)
+    }
     if (isPlainObject(val) || isArray(val)) attr.dataValue = escape(JSON.stringify(val))
     else if (isString(val)) attr.dataValue = escape(val)
     else attr.dataValue = val
     if (ro) {
-      if (attr.rel) {
-        const [rel, fieldName = 'id'] = attr.rel.split(':')
-        attr.value = get(this, `component.locals.form._rel.${rel}.${fieldName}`, val)
-      } else if (attr.dataType === 'boolean') attr.value = this.component.req.t(val ? 'Yes' : 'No')
+      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))
@@ -55,19 +61,19 @@ export async function buildFormCheck (group, params) {
   const attr = getInputAttr.call(this, group, false)
   attr.type = 'checkbox'
   attr.class.push('form-check-input')
-  if (has(attr, 'name') && !attr.value) attr.value = 'true'
-  if (has(attr, 'name') && !has(attr, 'checked') && attr.value === get(this, `locals.form.${attr.name}`)) attr.checked = true
+  if (has(attr, 'name') && !has(attr, 'value')) attr.value = 'true'
+  if (has(attr, 'name') && !has(attr, 'checked') && attr.value === get(this, `component.locals.form.${attr.name}`)) attr.checked = true
   return await this.component.buildTag({ tag: 'input', attr, selfClosing: true })
 }
 
 export async function buildFormSwitch (group, params) {
-  const { has, get } = this.app.lib._
+  const { has } = this.app.lib._
   const attr = getInputAttr.call(this, group, false)
   attr.type = 'checkbox'
   attr.class.push('form-check-input')
   attr.role = 'switch'
-  if (has(attr, 'name') && !attr.value) attr.value = 'true'
-  if (has(attr, 'name') && !has(attr, 'checked') && attr.value === get(this, `locals.form.${attr.name}`)) attr.checked = true
+  if (has(attr, 'name')) attr.value = 'true'
+  if (has(attr, 'name') && !has(attr, 'checked') && attr.dataValue) attr.checked = 'true'
   return await this.component.buildTag({ tag: 'input', attr, selfClosing: true })
 }
 

package/extend/waibuMpa/theme/component/factory/a.js

@@ -4,7 +4,7 @@ async function a () {
       super(options)
       this.component.normalizeAttr(this.params, { tag: 'a' })
       if (!this.params.attr.href) this.params.attr.href = '#'
-      if (this.params.html.includes('<i class="')) this.params.attr.class.push('icon-link')
+      if (this.params.html.includes('<i class="') && !this.params.attr.noIconLink) this.params.attr.class.push('icon-link')
     }
   }
 }

package/extend/waibuMpa/theme/component/factory/accordion-item.js

@@ -11,12 +11,12 @@ async function accordionItem () {
 
     build = async () => {
       const { omit, without } = this.app.lib._
-      const { groupAttrs, attribsStringify } = this.plugin.app.waibuMpa
+      const { groupAttrs, stringifyAttribs } = this.app.waibuMpa
       const group = groupAttrs(this.params.attr, ['body', 'header'])
       if (!group.body.noPadding) group.body.class.push('accordion-body')
       const clsList = without(this.params.attr.class, cls)
       group.header.class.push('accordion-header')
-      const header = [`<c:h2 ${attribsStringify(group.header)}>`,
+      const header = [`<c:h2 ${stringifyAttribs(group.header)}>`,
         `<button class="${this.params.attr.narrowHeader ? 'px-3 py-2 ' : ''}accordion-button${this.params.attr.showOnStart ? '' : ' collapsed'}"`,
         `type="button" data-bs-toggle="collapse" data-bs-target="#${this.params.attr.id}"`,
         `aria-expanded="${this.params.attr.showOnStart}"`,

package/extend/waibuMpa/theme/component/factory/app-launcher-trigger.js

@@ -21,13 +21,13 @@ async function appLauncherTrigger () {
 
     build = async () => {
       const { fastGlob } = this.app.lib
-      const { groupAttrs, attribsStringify } = this.plugin.app.waibuMpa
+      const { groupAttrs, stringifyAttribs } = this.app.waibuMpa
       const group = groupAttrs(this.params.attr, ['img'])
       this.params.attr = group._
       let src = group.img.src
       if (!src) {
         let logo = 'waibu'
-        const files = await fastGlob(`${this.plugin.app.main.dir.pkg}/logo.*`)
+        const files = await fastGlob(`${this.app.main.dir.pkg}/logo.*`)
         if (files.length > 0) logo = 'main'
         src = `waibuMpa:/logo/${logo}`
       }
@@ -36,7 +36,7 @@ async function appLauncherTrigger () {
         `<c:img src="${src}"`,
         `width="${group.img.dimWidth}" height="${group.img.dimHeight}"`
       ]
-      if (group.img.style) sentence.push(`style="${attribsStringify(group.img.style)}"`)
+      if (group.img.style) sentence.push(`style="${stringifyAttribs(group.img.style)}"`)
       sentence.push('/>')
       this.params.html = await this.component.buildSentence(sentence)
     }

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

@@ -2,7 +2,7 @@ async function appLauncher () {
   return class AppLauncher extends this.baseFactory {
     constructor (options) {
       super(options)
-      const { generateId } = this.plugin.app.bajo
+      const { generateId } = this.app.lib.aneka
       this.params.noTag = true
       this.params.attr.id = this.params.attr.id ?? generateId('alpha')
       this.params.attr.type = this.params.attr.type ?? 'drawer'
@@ -25,7 +25,7 @@ async function appLauncher () {
         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'
-          if (t === 'user' && this.plugin.app.sumba) launcher += '<c:sumba-nav-dropdown-user padding="end-2" />\n'
+          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'
           if (t === 'darkmode') launcher += '<c:nav-dropdown-darkmode padding="end-2" dropdown-menudir="end" />\n'

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

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

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

@@ -38,8 +38,8 @@ async function breadcrumb () {
 
     build = async () => {
       const { isString, omit } = this.app.lib._
-      const { routePath } = this.plugin.app.waibu
-      const { urlToBreadcrumb, attrToArray } = this.plugin.app.waibuMpa
+      const { routePath } = this.app.waibu
+      const { urlToBreadcrumb, attrToArray } = 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/factory/carousel.js

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

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

@@ -9,9 +9,9 @@ function collectAttr (group, item) {
 async function collapse () {
   return class Collapse extends this.baseFactory {
     build = async () => {
-      const { generateId } = this.plugin.app.bajo
+      const { generateId } = this.app.lib.aneka
       const { merge, isString } = this.app.lib._
-      const { attrToArray, groupAttrs } = this.plugin.app.waibuMpa
+      const { attrToArray, groupAttrs } = this.app.waibuMpa
       const items = []
       const { $ } = this.component
       const me = this

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

@@ -11,7 +11,7 @@ async function drawer () {
 
     build = async () => {
       const { isString, omit, trim } = this.app.lib._
-      const { groupAttrs } = this.plugin.app.waibuMpa
+      const { groupAttrs } = this.app.waibuMpa
       const { $ } = this.component
       const group = groupAttrs(this.params.attr, ['trigger'])
       this.params.attr.responsive = this.params.attr.responsive ?? true

package/extend/waibuMpa/theme/component/factory/dropdown.js

@@ -5,7 +5,7 @@ const variants = ['center']
 export const autoCloses = ['true', 'false', 'inside', 'outside']
 
 export async function buildMenu (params = {}) { // scope: component
-  const { numUnit } = this.plugin.app.bajo
+  const { numUnit } = this.app.bajo
   const { isString } = this.app.lib._
   const $ = this.$
   let menuHtml = params.html
@@ -73,8 +73,8 @@ async function dropdown () {
 
     build = async () => {
       const { merge, cloneDeep, omit } = this.app.lib._
-      const { groupAttrs } = this.plugin.app.waibuMpa
-      const alpinejs = this.plugin.app.waibuAlpinejs
+      const { groupAttrs } = this.app.waibuMpa
+      const alpinejs = this.app.waibuAlpinejs
       const [dir, variant] = (this.params.attr.dir ?? 'down').split('-')
       const xcls = ['drop' + parseSimple.call(this, { value: dir, values: dirs })]
       if (variants.includes(variant)) xcls.push(`${xcls[0]}-${variant}`)

package/extend/waibuMpa/theme/component/factory/fieldset.js

@@ -8,7 +8,7 @@ async function fieldset () {
 
     build = async () => {
       const { omit } = this.app.lib._
-      const { groupAttrs } = this.plugin.app.waibuMpa
+      const { groupAttrs } = this.app.waibuMpa
       const group = groupAttrs(this.params.attr, ['grid', 'legend', 'card'])
       if (group.grid && !this.params.attr.card && !group.grid.margin) group.grid.margin = 'bottom-3'
       if (group.grid) this.params.html = await this.component.buildTag({ tag: 'gridRow', attr: group.grid, html: this.params.html })

package/extend/waibuMpa/theme/component/factory/form-check-toggle.js

@@ -3,12 +3,13 @@ import { parseVariant, colors } from '../method/after-build-tag/_lib.js'
 const variants = ['outline']
 
 export async function build (handler, params = {}) {
-  const { groupAttrs } = this.plugin.app.waibuMpa
+  const { groupAttrs } = this.app.waibuMpa
+  const { generateId } = this.app.lib.aneka
   this.component.normalizeAttr(this.params)
   if (!this.params.attr.label && this.params.attr.name) this.params.attr.label = this.component.req.t(`field.${this.params.attr.name}`)
   const attr = groupAttrs(this.params.attr, ['label', 'hint', 'wrapper'])
   const contents = []
-  attr._.id = this.params.attr.id ?? this.plugin.app.bajo.generateId()
+  attr._.id = this.params.attr.id ?? generateId()
   if (attr._.color) attr.label.class.push(parseVariant.call(this, { cls: 'btn', value: attr._.color, values: colors, variants, prepend: true }))
   delete attr._.color
 

package/extend/waibuMpa/theme/component/factory/form-check.js

@@ -2,14 +2,15 @@ import { buildFormHint, buildFormLabel, buildFormCheck } from './_lib.js'
 
 export async function build (handler, params = {}) {
   const { isEmpty, get, find } = this.app.lib._
-  const { groupAttrs } = this.plugin.app.waibuMpa
+  const { groupAttrs } = this.app.waibuMpa
+  const { generateId } = this.app.lib.aneka
   const { $ } = this.component
   this.component.normalizeAttr(this.params)
   if (!this.params.attr.label && this.params.attr.name) this.params.attr.label = this.component.req.t(`field.${this.params.attr.name}`)
   if (this.params.attr.noLabel) this.params.attr.label = undefined
   const group = groupAttrs(this.params.attr, ['label', 'hint', 'wrapper', 'col'], false)
   const contents = []
-  group._.id = this.params.attr.id ?? this.plugin.app.bajo.generateId()
+  group._.id = this.params.attr.id ?? generateId()
   if (!isEmpty(group._.label)) {
     group.wrapper.class.push('form-check')
     if (group.wrapper.inline) group.wrapper.class.push('form-check-inline')

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

@@ -11,7 +11,7 @@ export function scripts (req) {
   return items
 }
 export function inlineScript (req) {
-  const { jsonStringify } = this.plugin.app.waibuMpa
+  const { jsonStringify } = this.app.waibuMpa
   const opts = {
     display: {
       icons: {
@@ -45,7 +45,7 @@ export function inlineScript (req) {
 }
 
 export async function handler (opts, params = {}) {
-  const { jsonStringify } = this.plugin.app.waibuMpa
+  const { jsonStringify } = this.app.waibuMpa
   this.params.attr['x-ref'] = 'self'
   this.params.attr['x-data'] = `{
     instance: null,

package/extend/waibuMpa/theme/component/factory/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.plugin.app.waibuMpa
+  const { attrToArray } = this.app.waibuMpa
   const { $ } = this.component
   const addons = []
   const isLabel = has(this.params.attr, 'label')
@@ -29,9 +29,8 @@ export async function handleInput ({ handler, group, params } = {}) {
     const details = get(this, 'component.locals.error.details', [])
     const err = find(details, { field: group._.name })
     if (err) {
-      const ext = err.ext ?? {}
       result.input = $(result.input).addClass('is-invalid').prop('outerHTML')
-      result.input += `\n<div class="invalid-feedback">${this.component.req.t(ext.type ? `validation.${ext.type}` : err.error, ext.context)}</div>`
+      result.input += `\n<div class="invalid-feedback">${err.error}</div>`
     }
   }
   const el = {
@@ -84,8 +83,8 @@ export async function handleInput ({ handler, group, params } = {}) {
 }
 
 export async function build (handler, params = {}) {
-  const { generateId } = this.plugin.app.bajo
-  const { groupAttrs } = this.plugin.app.waibuMpa
+  const { generateId } = this.app.lib.aneka
+  const { groupAttrs } = this.app.waibuMpa
   this.component.normalizeAttr(this.params, { autoId: true, type: this.params.attr.type ?? 'text' })
   if (!this.params.attr.label && this.params.attr.name) this.params.attr.label = this.component.req.t(`field.${this.params.attr.name}`)
   if (this.params.attr.noLabel) delete this.params.attr.label

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

@@ -14,9 +14,9 @@ async function formSelectCountry () {
     }
 
     build = async () => {
-      const { readConfig } = this.plugin.app.bajo
+      const { readConfig } = this.app.bajo
       const { map } = this.app.lib._
-      const { base64JsonEncode } = this.plugin.app.waibuMpa
+      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('\'', '') }

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

@@ -44,13 +44,13 @@ async function formSelectExt () {
     static inlineCss = inlineCss
 
     build = async () => {
-      const { generateId } = this.plugin.app.bajo
+      const { generateId } = this.app.lib.aneka
       const { omit, merge, has } = this.app.lib._
-      const { routePath } = this.plugin.app.waibu
-      const { jsonStringify, base64JsonDecode, groupAttrs } = this.plugin.app.waibuMpa
+      const { routePath } = this.app.waibu
+      const { jsonStringify, base64JsonDecode, groupAttrs } = this.app.waibuMpa
       const { req } = this.component
       let apiKey = ''
-      if (req.user && this.plugin.app.sumba) apiKey = await this.plugin.app.sumba.getApiKeyFromUserId(req.user.id)
+      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

package/extend/waibuMpa/theme/component/factory/form-select.js

@@ -11,7 +11,7 @@ async function formSelect () {
     }
 
     build = async () => {
-      const { groupAttrs } = this.plugin.app.waibuMpa
+      const { groupAttrs } = this.app.waibuMpa
       const group = groupAttrs(this.params.attr, ['label', 'hint', 'wrapper', 'col'], false)
       const contents = await handleInput.call(this, { handler: buildFormSelect, params: this.params, group })
       if (this.params.attr.noWrapper) this.params.noTag = true

package/extend/waibuMpa/theme/component/factory/form.js

@@ -10,8 +10,8 @@ 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.plugin.app.waibuMpa
-      const { groupAttrs } = this.plugin.app.waibuMpa
+      const { attrToArray } = this.app.waibuMpa
+      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'
       if (this.params.attr.referer) {

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

@@ -22,7 +22,7 @@ async function gridCol () {
 
     build = async () => {
       const { map, without, isString } = this.app.lib._
-      const { attrToArray } = this.plugin.app.waibuMpa
+      const { attrToArray } = this.app.waibuMpa
       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/waibuMpa/theme/component/factory/list-item.js

@@ -9,7 +9,7 @@ async function listItem () {
 
     build = async () => {
       const { isString } = this.app.lib._
-      const { groupAttrs } = this.plugin.app.waibuMpa
+      const { groupAttrs } = this.app.waibuMpa
       const group = groupAttrs(this.params.attr, ['badge'])
       this.params.attr = group._
       if (this.params.attr.inline) this.params.attr.class.push(inlineClass)