waibu-bootstrap 1.0.14 → 1.0.16

package/package.json

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

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

@@ -13,7 +13,7 @@ async function drawer () {
       const { isString, omit, trim } = this.plugin.app.bajo.lib._
       const { groupAttrs } = this.plugin.app.waibuMpa
       const { $ } = this.component
-      const group = groupAttrs(this.params.attr, ['launch'])
+      const group = groupAttrs(this.params.attr, ['trigger'])
       this.params.attr.responsive = this.params.attr.responsive ?? true
       this.params.attr.class.push(parseVariant.call(this, { cls, value: this.params.attr.responsive, values: breakpoints }))
       this.params.attr = group._
@@ -39,15 +39,15 @@ async function drawer () {
       }
       if (this.params.attr.divider) header.push('<hr class="m-0" />')
       this.params.html = `${header.join('\n')}<div${this.params.attr.noPadding ? '' : ' class="offcanvas-body"'}>${this.params.html}</div>`
-      if (group.launch) {
-        group.launch.dataBsTarget = `#${this.params.attr.id}`
-        group.launch.dataBsToggle = 'offcanvas'
-        group.launch.ariaControls = this.params.attr.id
-        if (this.params.attr.responsive) group.launch.display = `type:none-${this.params.attr.responsive}`
+      if (group.trigger) {
+        group.trigger.dataBsTarget = `#${this.params.attr.id}`
+        group.trigger.dataBsToggle = 'offcanvas'
+        group.trigger.ariaControls = this.params.attr.id
+        if (this.params.attr.responsive) group.trigger.display = `type:none-${this.params.attr.responsive}`
         const btnParams = {
           tag: 'btn',
-          attr: group.launch,
-          html: group._.launch
+          attr: group.trigger,
+          html: group._.trigger
         }
         this.params.prepend = await this.component.buildTag(btnParams)
       }

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

@@ -19,7 +19,7 @@ async function form () {
       const group = groupAttrs(this.params.attr, ['grid'])
       this.params.attr = group._
       if (group.grid) this.params.html = await this.component.buildTag({ tag: 'gridRow', attr: group.grid, html: this.params.html })
-      if (this.params.attr.button === true) this.params.attr.button = 'reset:Reset-link submit:Submit-primary'
+      if (this.params.attr.button === true) this.params.attr.button = 'reset:reset-link submit:submit-primary'
       if (this.params.attr.button) {
         const rBtns = []
         const lBtns = []

package/waibuMpa/theme/component/factory/modal.js

@@ -15,7 +15,7 @@ async function modal () {
       const { isString, omit } = this.plugin.app.bajo.lib._
       const { groupAttrs } = this.plugin.app.waibuMpa
       const { $ } = this.component
-      const group = groupAttrs(this.params.attr, ['launch'])
+      const group = groupAttrs(this.params.attr, ['trigger'])
       this.params.attr = group._
       this.params.attr.class.push(this.params.attr.noFade ? '' : 'fade')
       if (this.params.attr.noDismiss) this.params.attr.dataBsBackdrop = 'static'
@@ -40,16 +40,16 @@ async function modal () {
         ` ${!this.params.attr.size ? '' : parseSimple.call(this, { cls, value: this.params.attr.size, values: modalSizes })}` +
         ` ${this.params.attr.noCenter ? '' : 'modal-dialog-centered'} ${fullscreen}">` +
         `<div class="modal-content">${this.params.html}</div></div>`
-      if (group.launch) {
-        group.launch.dataBsTarget = `#${this.params.attr.id}`
-        group.launch.dataBsToggle = 'modal'
-        group.launch.ariaControls = this.params.attr.id
+      if (group.trigger) {
+        group.trigger.dataBsTarget = `#${this.params.attr.id}`
+        group.trigger.dataBsToggle = 'modal'
+        group.trigger.ariaControls = this.params.attr.id
         const btnParams = {
           tag: 'btn',
-          attr: group.launch,
-          html: group._.launch
+          attr: group.trigger,
+          html: group._.trigger
         }
-        const pos = group.launch.onEnd ? 'append' : 'prepend'
+        const pos = group.trigger.onEnd ? 'append' : 'prepend'
         this.params[pos] = await this.component.buildTag(btnParams)
       }
       this.params.attr = omit(this.params.attr, ['title', 'fullscreen'])

package/waibuMpa/theme/component/factory/nav-dropdown-darkmode.js

@@ -13,8 +13,8 @@ async function navDropdownDarkmode () {
         content
       }
       const html = [
-        await this.component.buildTag({ tag: 'dropdownItem', attr: { href: this.component.buildUrl({ params: set({}, cfgWmpa.darkMode.qsKey, 'false') }), active: !this.component.req.darkMode }, html: this.component.req.t('Bright Mode') }),
-        await this.component.buildTag({ tag: 'dropdownItem', attr: { href: this.component.buildUrl({ params: set({}, cfgWmpa.darkMode.qsKey, 'true') }), active: this.component.req.darkMode }, html: this.component.req.t('Dark Mode') })
+        await this.component.buildTag({ tag: 'dropdownItem', attr: { href: this.component.buildUrl({ params: set({}, cfgWmpa.darkMode.qsKey, 'false') }), active: !this.component.req.darkMode }, html: this.component.req.t('brightMode') }),
+        await this.component.buildTag({ tag: 'dropdownItem', attr: { href: this.component.buildUrl({ params: set({}, cfgWmpa.darkMode.qsKey, 'true') }), active: this.component.req.darkMode }, html: this.component.req.t('darkMode') })
       ].join('\n')
       this.params.noTag = true
       this.params.html = await this.component.buildTag({ tag: 'navItem', attr, html })

package/waibuMpa/theme/component/factory/nav-dropdown-language.js

@@ -2,7 +2,7 @@ async function navDropdownLanguage () {
   return class NavDropdownLanguage extends this.baseFactory {
     async build () {
       const { camelCase } = this.plugin.app.bajo.lib._
-      const { supportedLngs } = this.plugin.app.bajoI18N.config
+      const { supported } = this.plugin.app.bajo.config.intl
       const lang = this.component.req.lang
       const attr = {
         dropdown: true,
@@ -11,7 +11,7 @@ async function navDropdownLanguage () {
         content: lang.toUpperCase()
       }
       const html = []
-      for (const s of supportedLngs) {
+      for (const s of supported) {
         html.push(await this.component.buildTag({
           tag: 'dropdownItem',
           attr: { href: this.component.buildUrl({ params: { lang: s } }), active: lang === s },

package/waibuMpa/theme/component/factory/nav-dropdown-setting.js

@@ -2,7 +2,7 @@ async function navDropdownSetting () {
   return class NavDropdownSetting extends this.baseFactory {
     async build () {
       const { set, camelCase } = this.plugin.app.bajo.lib._
-      const { supportedLngs } = this.plugin.app.bajoI18N.config
+      const { supported } = this.plugin.app.bajo.config.intl
       const { groupAttrs } = this.plugin.app.waibuMpa
       const { generateId } = this.plugin.app.bajo
       const { routePath } = this.plugin.app.waibu
@@ -18,28 +18,28 @@ async function navDropdownSetting () {
         <c:dropdown-item href="${this.component.buildUrl({ params: set({}, cfgWmpa.darkMode.qsKey, 'false') })}" ${this.component.req.darkMode ? '' : 'active'} t:content="Bright" />
         <c:dropdown-item href="${this.component.buildUrl({ params: set({}, cfgWmpa.darkMode.qsKey, 'true') })}" ${!this.component.req.darkMode ? '' : 'active'} t:content="Dark" />
       `
-      if (supportedLngs.length > 0) {
+      if (supported.length > 0) {
         html += `
           <c:dropdown-item divider />
           <c:dropdown-item header t:content="Language" />
         `
-        for (const s of supportedLngs) {
+        for (const s of supported) {
           html += `<c:dropdown-item href="${this.component.buildUrl({ params: { lang: s } })}" ${this.component.req.lang === s ? 'active' : ''} t:content="${camelCase('lang ' + s)}" />`
         }
       }
       html += `
         <c:dropdown-item divider />
-        <c:dropdown-item t:content="Fullscreen"
+        <c:dropdown-item t:content="fullscreen"
           x-data="{
-            inText: '${this.component.req.t('Fullscreen')}',
-            outText: '${this.component.req.t('Exit Fullscreen')}',
+            inText: '${this.component.req.t('fullscreen')}',
+            outText: '${this.component.req.t('exitFullscreen')}',
             async toggle () {
               const el = document.querySelector('body')
               if (!document.fullscreenElement) {
                 try {
                   await el.requestFullscreen()
                 } catch (err) {
-                  await wbs.notify('Can\\'t go fullscreen, sorry!', { type: 'danger' })
+                  await wbs.notify('cantGoFullscreen', { type: 'danger' })
                 }
               } else {
                 document.exitFullscreen()
@@ -61,7 +61,7 @@ async function navDropdownSetting () {
       if (this.component.req.user) {
         const id = generateId('alpha')
         html += `
-          <c:dropdown-item t:content="Signout"
+          <c:dropdown-item t:content="signout"
             id="${id}"
             x-data="{
               async signout () {

package/waibuMpa/theme/component/factory/nav-dropdown-user.js

@@ -3,7 +3,7 @@ async function navDropdownUser () {
     async build () {
       const { routePath } = this.plugin.app.waibu
       const icon = this.component.req.iconset ? await this.component.buildTag({ tag: 'icon', attr: { name: 'person' } }) : ''
-      let text = this.component.req.user ? `${this.component.req.user.firstName} ${this.component.req.user.lastName}` : this.component.req.t('Guest')
+      let text = this.component.req.user ? `${this.component.req.user.firstName} ${this.component.req.user.lastName}` : this.component.req.t('guest')
       if (this.params.attr.noText) text = ''
       const html = []
       const attr = {
@@ -18,15 +18,15 @@ async function navDropdownUser () {
         attr.href = routePath(this.component.req.user ? 'sumba:/my-stuff/profile' : 'sumba:/signin')
       } else {
         if (this.component.req.user) {
-          html.push(await this.component.buildTag({ tag: 'dropdownItem', attr: { href: routePath('sumba:/my-stuff/profile') }, html: this.component.req.t('Your Profile') }))
-          html.push(await this.component.buildTag({ tag: 'dropdownItem', attr: { href: routePath('sumba:/my-stuff/change-password') }, html: this.component.req.t('Change Password') }))
+          html.push(await this.component.buildTag({ tag: 'dropdownItem', attr: { href: routePath('sumba:/my-stuff/profile') }, html: this.component.req.t('yourProfile') }))
+          html.push(await this.component.buildTag({ tag: 'dropdownItem', attr: { href: routePath('sumba:/my-stuff/change-password') }, html: this.component.req.t('changePassword') }))
           html.push(await this.component.buildTag({ tag: 'dropdownItem', attr: { divider: true } }))
-          html.push(await this.component.buildTag({ tag: 'dropdownItem', attr: { href: routePath('sumba:/signout') }, html: this.component.req.t('Signout') }))
+          html.push(await this.component.buildTag({ tag: 'dropdownItem', attr: { href: routePath('sumba:/signout') }, html: this.component.req.t('signout') }))
         } else {
-          html.push(await this.component.buildTag({ tag: 'dropdownItem', attr: { href: routePath('sumba:/signin') }, html: this.component.req.t('Signin') }))
+          html.push(await this.component.buildTag({ tag: 'dropdownItem', attr: { href: routePath('sumba:/signin') }, html: this.component.req.t('signin') }))
           html.push(await this.component.buildTag({ tag: 'dropdownItem', attr: { divider: true } }))
-          html.push(await this.component.buildTag({ tag: 'dropdownItem', attr: { href: routePath('sumba:/user/signup') }, html: this.component.req.t('Signup') }))
-          html.push(await this.component.buildTag({ tag: 'dropdownItem', attr: { href: routePath('sumba:/user/forgot-password') }, html: this.component.req.t('Forgot Password') }))
+          html.push(await this.component.buildTag({ tag: 'dropdownItem', attr: { href: routePath('sumba:/user/signup') }, html: this.component.req.t('signup') }))
+          html.push(await this.component.buildTag({ tag: 'dropdownItem', attr: { href: routePath('sumba:/user/forgot-password') }, html: this.component.req.t('forgotPassword') }))
         }
       }
       this.params.noTag = true

package/waibuMpa/theme/component/method/after-build-tag/_lib.js

@@ -6,7 +6,7 @@ export const heights = ['1', 'sm', 'base', 'lg']
 export const cvariants = ['emphasis', 'secondary', 'tertiary']
 export const cbgvariants = ['subtle', 'secondary', 'tertiary']
 export const opacities = ['25', '50', '75', '100']
-export const aligns = ['top', 'bottom', 'start', 'end']
+export const aligns = ['top', 'bottom', 'start', 'end', 'middle']
 export const dirs = ['up', 'down', 'start', 'end']
 export const widths = ['0', '1', '2', '3', '4', '5']
 export const dims = ['25', '50', '75', '100', 'auto']

package/waibuStatic/asset/js/wbs.js

@@ -65,10 +65,10 @@ class Wbs {
     }
     opts.icon = 'signQuestion'
     opts.buttons = [
-      { label: 'Cancel', color: 'secondary', dismiss: true },
-      { label: 'OK', color: 'primary', dismiss: !opts.ok, alertType: 'confirmation', handler: opts.ok, handlerOpts: opts.opts ?? '', close: opts.close ?? '' }
+      { label: 'cancel', color: 'secondary', dismiss: true },
+      { label: 'ok', color: 'primary', dismiss: !opts.ok, alertType: 'confirmation', handler: opts.ok, handlerOpts: opts.opts ?? '', close: opts.close ?? '' }
     ]
-    return await this.alert(msg, opts.title ?? 'Confirmation', opts)
+    return await this.alert(msg, opts.title ?? 'confirmation', opts)
   }
 
   async prompt (msg, handler, opts = {}) {
@@ -88,8 +88,8 @@ class Wbs {
     ].join('\n')
     opts.close = opts.close ?? ''
     opts.buttons = [
-      { label: 'Cancel', color: 'secondary', dismiss: true },
-      { label: 'OK', type: 'submit', color: 'primary', dismiss: !opts.ok, alertType: 'prompt', handler: opts.ok, handlerOpts: opts.opts ?? '', close: opts.close ?? '' }
+      { label: 'cancel', color: 'secondary', dismiss: true },
+      { label: 'ok', type: 'submit', color: 'primary', dismiss: !opts.ok, alertType: 'prompt', handler: opts.ok, handlerOpts: opts.opts ?? '', close: opts.close ?? '' }
     ]
     return await this.alert(msg, opts.title ?? 'Prompt', opts)
   }
@@ -121,9 +121,9 @@ class Wbs {
     buttons = buttons ?? [{ label: 'OK', color: 'primary', dismiss: true }]
     icon = icon ?? 'sign' + (type.charAt(0).toUpperCase() + type.slice(1))
     switch (type) {
-      case 'danger': title = title ?? 'Error'; break
-      case 'warning': title = title ?? 'Warning'; break
-      default: title = title ?? 'Information'
+      case 'danger': title = title ?? 'error'; break
+      case 'warning': title = title ?? 'warning'; break
+      default: title = title ?? 'information'
     }
     buttons = buttons.map(b => {
       b.handlerOpts = wmpa.toBase64(JSON.stringify(b.handlerOpts))