waibu-bootstrap 1.1.5 → 1.1.7

package/package.json

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

package/plugin/factory.js

@@ -0,0 +1,21 @@
+async function factory (pkgName) {
+  const me = this
+
+  return class WaibuBootstrap extends this.lib.BajoPlugin {
+    constructor () {
+      super(pkgName, me.app)
+      this.alias = 'wbs'
+      this.dependencies = ['waibu-mpa', 'waibu-extra']
+      this.config = {
+        waibu: {
+          prefix: 'bootstrap'
+        },
+        siteSetting: {
+          toastAutohideDelayDur: '5s'
+        }
+      }
+    }
+  }
+}
+
+export default factory

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

@@ -11,21 +11,22 @@ async function accordionItem () {
 
     build = async () => {
       const { omit, without } = this.plugin.lib._
-      const { groupAttrs } = this.plugin.app.waibuMpa
-      const group = groupAttrs(this.params.attr, ['body'])
+      const { groupAttrs, attribsStringify } = this.plugin.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)
-      const header = ['<h2 class="accordion-header">',
+      group.header.class.push('accordion-header')
+      const header = [`<c:h2 ${attribsStringify(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}"`,
         'x-data',
         `@click="$dispatch('accordion-item', { id: $el.closest('.accordion').id, cls: '${clsList.join(' ')}' })"`,
-        `aria-controls="${this.params.attr.id}">${this.params.attr.header}</button></h2>`]
+        `aria-controls="${this.params.attr.id}">${this.params.attr.header}</button></c:h2>`]
       const body = await this.component.buildTag({ tag: 'div', attr: group.body, html: this.params.html })
       const details = [`<div id="${this.params.attr.id}" class="accordion-collapse collapse${this.params.attr.showOnStart ? ' show' : ''}">`,
         body, '</div']
-      this.params.html = `${header.join(' ')}\n${details.join(' ')}`
+      this.params.html = await this.component.buildSentence(`${header.join(' ')}\n${details.join(' ')}`)
       this.params.attr = omit(this.params.attr, ['id', 'noPadding', 'narrowHeader', 'bodyClass'])
     }
   }

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

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

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

@@ -10,34 +10,60 @@ async function appLauncher () {
 
     build = async () => {
       const { groupAttrs, attrToArray } = this.plugin.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>\n`
-      launcher += '<c:div padding="start-3 bottom-3 end-3">'
+      let launcher = `<c:drawer id="${this.params.attr.id}" t:title="Modules" no-padding style="${menu === 'pages' ? 'width:350px' : ''}">\n`
       if (this.params.attr.type === 'modal') launcher = `<c:modal id="${this.params.attr.id}" t:title="Modules" centered>\n`
       const toolbar = attrToArray(this.params.attr.toolbar)
       if (toolbar.length > 0) {
-        launcher += '<c:navbar>\n<c:nav tag="ul" dim="width:100" flex="justify-content:end">\n'
+        if (menu === 'pages') toolbar.unshift('home')
+        launcher += `<c:div padding="x-3 ${menu === 'home' ? 'bottom-3' : ''}">`
+        launcher += '<c:navbar padding="y-0">\n<c:nav tag="ul" dim="width:100" flex="justify-content:end">\n'
         for (const t of toolbar) {
-          if (t === 'user') launcher += '<c:nav-dropdown-user />\n'
+          if (t === 'home') launcher += '<c:nav-item href="/" icon="house" padding="end-2" />\n'
+          if (t === 'user') launcher += '<c:nav-dropdown-user padding="end-2" />\n'
           if (t === '-') launcher += '<c:nav-divider />\n'
-          if (t === 'fullscreen') launcher += '<c:nav-toggle-fullscreen />\n'
-          if (t === 'darkmode') launcher += '<c:nav-dropdown-darkmode dropdown-menu="end" />\n'
-          if (t === 'language') launcher += '<c:nav-dropdown-language dropdown-menu="end" />\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'
+          if (t === 'language') launcher += '<c:nav-dropdown-language padding="end-2" dropdown-menudir="end" />\n'
         }
-        launcher += '</c:nav></c:navbar>\n'
+        launcher += '</c:nav></c:navbar></c:div>\n'
       }
-      launcher += '<c:grid-row gutter="1">\n'
-      for (const m of (this.component.locals.menu.homes ?? [])) {
-        launcher += `
-          <c:grid-col col="4" text="align:center">
-            <c:a href="${m.href}" display="type:block" border rounded padding="all-2" text="decoration:none">
-              <c:img src="waibuMpa:/logo/${m.ns}" height="60" fluid/>
-              <c:div margin="top-2">${m.title}</c:div>
-            </c:a>
-          </c:grid-col>
-        `
+      const items = this.component.locals.menu[menu] ?? []
+      if (menu === 'pages') {
+        launcher += '<c:hr margin="all-0" /><c:accordion no-border>\n'
+        for (const m of items) {
+          const sm = []
+          if (!m.children) continue
+          for (const s of m.children) {
+            if (s.visible === 'anon' && this.component.locals._meta.user) continue
+            if (s.visible === 'auth' && !this.component.locals._meta.user) continue
+            if (s.title === '-') continue
+            sm.push(`<c:list-item href="${s.href}" t:content="${s.title}" style="padding-left:1.2rem"/>`)
+          }
+          launcher += `
+            <c:accordion-item t:header="${m.title}" body-no-padding header-font="weight:bold">\n
+            <c:list type="group" hover no-border>\n
+            ${sm.join('\n')}\n
+            </c:list>\n
+            </c:accordion-item>\n
+          `
+        }
+      } else {
+        launcher += '<c:div padding="start-3 bottom-3 end-3">'
+        launcher += '<c:grid-row gutter="1">\n'
+        for (const m of items) {
+          launcher += `
+            <c:grid-col col="4" text="align:center">
+              <c:a href="${m.href}" display="type:block" border rounded padding="all-2" text="decoration:none">
+                <c:img src="waibuMpa:/logo/${m.ns}" class="app-launcher-img" height="60" fluid/>
+                <c:div margin="top-2">${m.title}</c:div>
+              </c:a>
+            </c:grid-col>
+          `
+        }
+        launcher += '</c:grid-row></c:div>\n'
       }
-      launcher += '</c:grid-row>\n'
       if (this.params.attr.type === 'modal') launcher += '</c:modal>'
       else launcher += '</c:div></c:drawer>'
       let trigger = ''

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

@@ -6,6 +6,7 @@ async function card () {
       super(options)
       this.selector = '.' + cls
       this.component.normalizeAttr(this.params, { tag: 'div', cls })
+      if (this.params.attr.noBorder) this.params.attr.border = 'none'
     }
 
     build = async () => {

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

@@ -2,12 +2,9 @@ import { css, scripts, inlineScript, handler } from './form-datetime.js'
 
 async function formDate () {
   return class FormDate extends this.baseFactory {
-    constructor (options) {
-      super(options)
-      this.css = css
-      this.scripts = scripts
-      this.inlineScript = inlineScript
-    }
+    static css = [...super.css, ...css]
+    static scripts = [...super.scripts, ...scripts(this.component.req)]
+    static inlineScript = inlineScript(this.component.req)
 
     build = async () => {
       const { set } = this.plugin.lib._

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

@@ -60,12 +60,9 @@ export async function handler (opts, params = {}) {
 
 async function formDatetime () {
   return class FormDatetime extends this.baseFactory {
-    constructor (options) {
-      super(options)
-      this.css = css
-      this.scripts = scripts
-      this.inlineScript = inlineScript
-    }
+    static css = [...super.css, ...css]
+    static scripts = [...super.scripts, ...scripts(this.component.req)]
+    static inlineScript = inlineScript(this.component.req)
 
     build = async () => {
       const { set } = this.plugin.lib._

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

@@ -21,18 +21,9 @@ export const scripts = 'waibuExtra.virtual:/tom-select/js/tom-select.complete.mi
 async function formSelectExt () {
   return class FormSelectExt extends this.baseFactory {
     static css = [...super.css, css]
-
     static scripts = [...super.scripts, scripts]
-
     static inlineCss = inlineCss
 
-    constructor (options) {
-      super(options)
-      this.css = css
-      this.inlineCss = inlineCss
-      this.scripts = scripts
-    }
-
     build = async () => {
       const { omit } = this.plugin.lib._
       const { jsonStringify, base64JsonDecode } = this.plugin.app.waibuMpa

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

@@ -2,12 +2,9 @@ import { css, scripts, inlineScript, handler } from './form-datetime.js'
 
 async function formTime () {
   return class FormTime extends this.baseFactory {
-    constructor (options) {
-      super(options)
-      this.css = css
-      this.inlineScript = inlineScript
-      this.scripts = scripts
-    }
+    static css = [...super.css, ...css]
+    static scripts = [...super.scripts, ...scripts(this.component.req)]
+    static inlineScript = inlineScript(this.component.req)
 
     build = async () => {
       const { set } = this.plugin.lib._

package/waibuMpa/theme/component/factory/list-item.js

@@ -20,7 +20,7 @@ async function listItem () {
       }
       if (isString(this.params.attr.target) && !this.params.attr.href) this.params.attr.href = '#'
       if (this.params.attr.href) {
-        const attr = { href: this.params.attr.href, class: [] }
+        const attr = this.params.attr
         const html = this.params.html
         if (isString(this.params.attr.target)) {
           const [id, toggle = 'modal'] = this.params.attr.target.split(':')

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

@@ -2,7 +2,7 @@ async function navDropdownDarkmode () {
   return class NavDropdownDarkmode extends this.baseFactory {
     build = async () => {
       const { titleize, isSet } = this.plugin.app.bajo
-      const { set } = this.plugin.lib._
+      const { set, omit } = this.plugin.lib._
       const cfgWmpa = this.plugin.app.waibuMpa.config
       this.params.noTag = true
       if (isSet(this.plugin.app.waibuMpa.config.darkMode.set)) {
@@ -11,12 +11,9 @@ async function navDropdownDarkmode () {
       }
       const name = this.component.req.darkMode ? 'dark' : 'bright'
       const content = this.component.req.iconset ? await this.component.buildTag({ tag: 'icon', attr: { name } }) : this.component.req.t(titleize(name))
-      const attr = {
-        dropdown: true,
-        dropdownDir: this.params.attr.dropdownDir,
-        dropdownMenudir: this.params.attr.dropdownMenudir,
-        content
-      }
+      const attr = omit(this.params.attr, ['text'])
+      attr.dropdown = true
+      attr.content = content
       if (this.params.attr.text) attr.text = this.params.attr.text
       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('brightMode') }),

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

@@ -1,16 +1,13 @@
 async function navDropdownLanguage () {
   return class NavDropdownLanguage extends this.baseFactory {
     build = async () => {
-      const { camelCase } = this.plugin.lib._
+      const { camelCase, cloneDeep, omit } = this.plugin.lib._
       const { supported } = this.plugin.app.bajo.config.intl
       const lang = this.component.req.lang
-      const attr = {
-        dropdown: true,
-        dropdownDir: this.params.attr.dropdownDir,
-        dropdownMenudir: this.params.attr.dropdownMenudir,
-        content: lang.toUpperCase()
-      }
-      if (this.params.attr.text) attr.text = this.params.attr.text
+      const attr = cloneDeep(this.params.attr)
+      this.params.attr = omit(this.params.attr, ['text'])
+      attr.dropdown = true
+      attr.content = lang.toUpperCase()
       const html = []
       for (const s of supported) {
         html.push(await this.component.buildTag({

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

@@ -16,13 +16,13 @@ async function navDropdownSetting () {
       this.params.attr.dropdown = true
       this.params.attr.content = icon
       let profile = `
-        <c:dropdown-item href="sumba:/my-stuff/profile" t:content="yourProfile" />
-        <c:dropdown-item href="sumba:/my-stuff/change-password" t:content="changePassword" />
+        <c:dropdown-item href="sumba:/your-stuff/profile" t:content="yourProfile" />
+        <c:dropdown-item href="sumba:/your-stuff/change-password" t:content="changePassword" />
       `
       if (this.params.attr.fancyProfile) {
         profile = await this.component.buildSentence(`
           <div>
-            <c:dropdown-item href="sumba:/my-stuff/profile">
+            <c:dropdown-item href="sumba:/your-stuff/profile">
               <c:img src="dobo:/attachment/SumbaUser/${req.user.id}/profile/main.png" responsive rounded />
               <c:div margin="top-1">${req.user.firstName} ${req.user.lastName}</c:div>
             </c:dropdown-item>

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

@@ -6,7 +6,7 @@ async function navDropdownUser () {
         this.params.html = ''
         return
       }
-      const { has } = this.plugin.lib._
+      const { has, omit } = this.plugin.lib._
       const { routePath } = this.plugin.app.waibu
       const { req } = this.component
       const icon = this.component.req.iconset ? await this.component.buildTag({ tag: 'icon', attr: { name: 'person' } }) : ''
@@ -19,24 +19,20 @@ async function navDropdownUser () {
         } else text = req.t('guest')
       }
       const html = []
-      const attr = {
-        dropdown: true,
-        dropdownDir: this.params.attr.dropdownDir,
-        dropdownMenudir: this.params.attr.dropdownMenudir,
-        content: `${icon} ${text}`
-      }
-      if (this.params.attr.text) attr.text = this.params.attr.text
+      const attr = omit(this.params.attr, ['text'])
+      attr.dropdown = true
+      attr.content = `${icon} ${text}`
       if (this.params.attr.noMenu) {
         delete attr.dropdown
         delete attr.dropdownMenu
-        attr.href = routePath(this.component.req.user ? 'sumba:/my-stuff/profile' : 'sumba:/signin')
+        attr.href = routePath(this.component.req.user ? 'sumba:/your-stuff/profile' : 'sumba:/signin')
       } else {
         if (req.user) {
           if (this.params.attr.fancyProfile) {
             const replacer = 'sumba.asset:/user-profile.png'
             const profile = await this.component.buildSentence(`
               <div>
-                <c:dropdown-item href="sumba:/my-stuff/profile">
+                <c:dropdown-item href="sumba:/your-stuff/profile">
                   <c:img src="dobo:/attachment/SumbaUser/${req.user.id}/profile/main.png?notfound=${replacer}" responsive rounded />
                   <c:div margin="top-1" text="align:center">${req.user.firstName} ${req.user.lastName}</c:div>
                 </c:dropdown-item>
@@ -44,11 +40,11 @@ async function navDropdownUser () {
             `)
             html.push(profile)
             html.push(await this.component.buildTag({ tag: 'dropdownItem', attr: { divider: true } }))
-            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: { href: routePath('sumba:/your-stuff/change-password') }, html: this.component.req.t('changePassword') }))
             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:/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: { href: routePath('sumba:/your-stuff/profile') }, html: this.component.req.t('yourProfile') }))
+            html.push(await this.component.buildTag({ tag: 'dropdownItem', attr: { href: routePath('sumba:/your-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') }))
           }

package/waibuMpa/theme/component/factory/nav-item.js

@@ -14,8 +14,8 @@ async function navItem () {
       const { groupAttrs } = this.plugin.app.waibuMpa
       const { $ } = this.component
       const group = groupAttrs(this.params.attr, ['dropdown', 'badge'])
+      this.params.attr = group._
       if (group.dropdown) {
-        this.params.attr = group._
         this.params.attr.class.push('dropdown-toggle')
         this.params.attr.role = 'button'
         this.params.attr.dataBsToggle = 'dropdown'

package/waibuMpa/theme/component/factory/nav-toggle-fullscreen.js

@@ -5,14 +5,10 @@ async function navToggleFullscreen () {
       if (!req.iconset) return
       const inIcon = iconset.resolve('fullscreen')
       const outIcon = iconset.resolve('fullscreenExit')
-      const content = await this.component.buildTag({ tag: 'icon', attr: { oname: inIcon } })
-      const attr = {
-        'x-ref': 'fullscreen',
-        '@click': 'toggle()',
-        content
-      }
-      if (this.params.attr.text) attr.text = this.params.attr.text
-      attr['@fullscreenchange.document'] = `
+      this.params.attr['x-ref'] = 'fullscreen'
+      this.params.attr['@click'] = 'toggle()'
+      this.params.attr.content = await this.component.buildTag({ tag: 'icon', attr: { oname: inIcon } })
+      this.params.attr['@fullscreenchange.document'] = `
         const el = $refs.fullscreen.querySelector('i')
         if (document.fullscreenElement) {
           el.classList.remove(inIcon)
@@ -22,7 +18,7 @@ async function navToggleFullscreen () {
           el.classList.add(inIcon)
         }
       `
-      attr['x-data'] = `{
+      this.params.attr['x-data'] = `{
         inIcon: '${inIcon}',
         outIcon: '${outIcon}',
         async toggle () {
@@ -40,7 +36,7 @@ async function navToggleFullscreen () {
         }
       }`
       this.params.noTag = true
-      this.params.html = await this.component.buildTag({ tag: 'navItem', attr })
+      this.params.html = await this.component.buildTag({ tag: 'navItem', attr: this.params.attr })
     }
   }
 }

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

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

package/waibuStatic/asset/js/wbs.js

@@ -92,11 +92,12 @@ class Wbs {
     return await this.alert(msg, opts.title ?? 'Prompt', opts)
   }
 
-  async appLauncher (params) {
+  async appLauncher (params, menu) {
     document.body.click()
     const id = wmpa.randomId()
     const toolbar = params ? `toolbar="${params}"` : ''
-    const body = [`<c:app-launcher id="${id}" ${toolbar} />`]
+    const menuId = menu ? `menu="${menu}"` : ''
+    const body = [`<c:app-launcher id="${id}" ${toolbar} ${menuId} />`]
     await wmpa.addComponent(body.join('\n'), 'body')
     const item = new bootstrap.Offcanvas(`#${id}`)
     const itemEl = document.getElementById(id)

package/plugin/.alias

@@ -1 +0,0 @@
-wbs

package/plugin/.dependencies

@@ -1,2 +0,0 @@
-waibu-mpa
-waibu-extra

package/plugin/config.json

@@ -1,8 +0,0 @@
-{
-  "waibu": {
-    "prefix": "bootstrap"
-  },
-  "siteSetting": {
-    "toastAutohideDelayDur": "5s"
-  }
-}