waibu-bootstrap 2.0.1 → 2.1.1

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/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.plugin.app.waibuMpa.attrToArray(params.attr[key])
+  const attrs = this.app.waibuMpa.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.plugin.app.waibuMpa.attrToArray(params.attr[key])
+  const attrs = this.app.waibuMpa.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.plugin.app.waibuMpa.attrToArray(params.attr[key])
+  const attrs = this.app.waibuMpa.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.plugin.app.waibuMpa.attrToArray(params.attr[key])
+  const attrs = this.app.waibuMpa.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.plugin.app.waibuMpa.attrToArray(params.attr[key])
+  const attrs = this.app.waibuMpa.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.plugin.app.waibuMpa.attrToArray(params.attr[key])
+  const attrs = this.app.waibuMpa.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.plugin.app.waibuMpa
+  const { attrToArray } = this.app.waibuMpa
   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.plugin.app.waibuMpa.attrToArray(params.attr[key])
+  const attrs = this.app.waibuMpa.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.plugin.app.waibuMpa.attrToArray(params.attr[key])) {
+  for (const item of this.app.waibuMpa.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.plugin.app.waibuMpa.attrToArray(params.attr[key])
+    const attrs = this.app.waibuMpa.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.plugin.app.waibuMpa.attrToArray(params.attr[key])
+    const [type, arrangeStart, arrangeEnd, translateMiddle] = this.app.waibuMpa.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.plugin.app.waibuMpa.attrToArray(params.attr[key])
+  const attrs = this.app.waibuMpa.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.plugin.app.waibuMpa.attrToArray(params.attr[key])
+  const attrs = this.app.waibuMpa.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/{factory → widget}/_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 → widget}/a.js

@@ -1,10 +1,10 @@
 async function a () {
-  return class A extends this.baseFactory {
+  return class A extends this.app.baseClass.MpaWidget {
     constructor (options) {
       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 → widget}/accordion-item.js

@@ -1,7 +1,7 @@
 const cls = 'accordion-item'
 
 async function accordionItem () {
-  return class AccordionItem extends this.baseFactory {
+  return class AccordionItem extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls
@@ -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 → widget}/accordion.js

@@ -1,7 +1,7 @@
 const cls = 'accordion'
 
 async function accordion () {
-  return class Accordion extends this.baseFactory {
+  return class Accordion extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/alert.js

@@ -3,7 +3,7 @@ import { colors, parseVariant } from '../method/after-build-tag/_lib.js'
 const cls = 'alert'
 
 async function alert () {
-  return class Alert extends this.baseFactory {
+  return class Alert extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       const { without } = this.app.lib._

package/extend/waibuMpa/theme/component/{factory → widget}/app-launcher-trigger.js

@@ -1,5 +1,5 @@
 async function appLauncherTrigger () {
-  return class AppLauncherTrigger extends this.baseFactory {
+  return class AppLauncherTrigger extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       const { isString } = this.app.lib._
@@ -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 → widget}/app-launcher.js

@@ -1,8 +1,8 @@
 async function appLauncher () {
-  return class AppLauncher extends this.baseFactory {
+  return class AppLauncher extends this.app.baseClass.MpaWidget {
     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 → widget}/badge.js

@@ -1,7 +1,7 @@
 const cls = 'badge'
 
 async function badge () {
-  return class Badge extends this.baseFactory {
+  return class Badge extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/blockquote.js

@@ -1,7 +1,7 @@
 const cls = 'blockquote'
 
 async function blockquote () {
-  return class Blockquote extends this.baseFactory {
+  return class Blockquote extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/breadcrumb-item.js

@@ -1,7 +1,7 @@
 const cls = 'breadcrumb-item'
 
 async function breadcrumbItem () {
-  return class BreadcrumbItem extends this.baseFactory {
+  return class BreadcrumbItem extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls
@@ -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 → widget}/breadcrumb.js

@@ -29,7 +29,7 @@ async function generateItems (breadcrumb) {
 }
 
 async function breadcrumb () {
-  return class Breadcrumb extends this.baseFactory {
+  return class Breadcrumb extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls
@@ -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 → widget}/btn-back-to-top.js

@@ -1,5 +1,5 @@
 async function btnBackToTop () {
-  return class BtnBackToTop extends this.baseFactory {
+  return class BtnBackToTop extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.params.noTag = true

package/extend/waibuMpa/theme/component/{factory → widget}/btn-close.js

@@ -1,7 +1,7 @@
 const cls = 'btn-close'
 
 async function btnClose () {
-  return class BtnClose extends this.baseFactory {
+  return class BtnClose extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/btn-group.js

@@ -3,7 +3,7 @@ import { parseSimple, sizes } from '../method/after-build-tag/_lib.js'
 const cls = 'btn-group'
 
 async function btnGroup () {
-  return class BtnGroup extends this.baseFactory {
+  return class BtnGroup extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/btn-toolbar.js

@@ -1,7 +1,7 @@
 const cls = 'btn-toolbar'
 
 async function btnToolbar () {
-  return class BtnToolbar extends this.baseFactory {
+  return class BtnToolbar extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/btn.js

@@ -3,7 +3,7 @@ import { parseVariant, parseSimple, sizes, colors, colorVariants } from '../meth
 const cls = 'btn'
 
 async function btn () {
-  return class Btn extends this.baseFactory {
+  return class Btn extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/card-body.js

@@ -1,7 +1,7 @@
 const cls = 'card-body'
 
 async function cardBody () {
-  return class CardBody extends this.baseFactory {
+  return class CardBody extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/card-footer.js

@@ -2,7 +2,7 @@ import { handler } from './card-header.js'
 const cls = 'card-footer'
 
 async function cardFooter () {
-  return class CardFooter extends this.baseFactory {
+  return class CardFooter extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/card-group.js

@@ -1,7 +1,7 @@
 const cls = 'card-group'
 
 async function cardGroup () {
-  return class CardGroup extends this.baseFactory {
+  return class CardGroup extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/card-header.js

@@ -12,7 +12,7 @@ export async function handler (cls, params = {}) {
 }
 
 async function cardHeader () {
-  return class CardHeader extends this.baseFactory {
+  return class CardHeader extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/card-link.js

@@ -1,7 +1,7 @@
 const cls = 'card-link'
 
 async function cardLink () {
-  return class CardLink extends this.baseFactory {
+  return class CardLink extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/card-subtitle.js

@@ -1,7 +1,7 @@
 const cls = 'card-subtitle'
 
 async function cardSubtitle () {
-  return class CardSubtitle extends this.baseFactory {
+  return class CardSubtitle extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls

package/extend/waibuMpa/theme/component/{factory → widget}/card-text.js

@@ -1,7 +1,7 @@
 const cls = 'card-text'
 
 async function cardBody () {
-  return class CardBody extends this.baseFactory {
+  return class CardBody extends this.app.baseClass.MpaWidget {
     constructor (options) {
       super(options)
       this.selector = '.' + cls