waibu-bootstrap 1.0.19 → 1.1.0

package/package.json

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

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

@@ -9,7 +9,7 @@ async function accordionItem () {
       this.params.attr.body = this.params.attr.body ?? true
     }
 
-    async build () {
+    build = async () => {
       const { omit, without } = this.plugin.app.bajo.lib._
       const { groupAttrs } = this.plugin.app.waibuMpa
       const group = groupAttrs(this.params.attr, ['body'])

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

@@ -9,7 +9,7 @@ async function accordion () {
       if (this.params.attr.noBorder) this.params.attr.class.push('accordion-flush')
     }
 
-    async build () {
+    build = async () => {
       const { $ } = this.component
       if (!this.params.attr.alwaysOpen) {
         const me = this

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

@@ -13,7 +13,7 @@ async function alert () {
       if (this.params.attr.color) this.params.attr.class.push(parseVariant.call(this, { cls, value: this.params.attr.color, values: myColors, prepend: true }))
     }
 
-    async build () {
+    build = async () => {
       const { isEmpty } = this.plugin.app.bajo.lib._
       const { $ } = this.component
       const html = $(`<div>${this.params.html}</div>`).children().each(function () {

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

@@ -19,7 +19,7 @@ async function appLauncherTrigger () {
       this.params.attr.imgDimHeight = this.params.attr.imgDimHeight ?? 48
     }
 
-    async build () {
+    build = async () => {
       const { fastGlob } = this.plugin.app.bajo.lib
       const { omit } = this.plugin.app.bajo.lib._
       let logo = 'waibu'

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

@@ -8,7 +8,7 @@ async function appLauncher () {
       this.params.attr.type = this.params.attr.type ?? 'drawer'
     }
 
-    async build () {
+    build = async () => {
       const { groupAttrs, attrToArray } = this.plugin.app.waibuMpa
       const group = groupAttrs(this.params.attr, ['trigger'])
       let launcher = `<c:drawer id="${this.params.attr.id}" t:title="Modules" no-padding>\n`

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

@@ -8,7 +8,7 @@ async function badge () {
       this.component.normalizeAttr(this.params, { tag: 'span' })
     }
 
-    async build () {
+    build = async () => {
       const { isString, omit } = this.plugin.app.bajo.lib._
       if (isString(this.params.attr.alt)) this.params.html += `<span class="visually-hidden">${this.params.attr.alt}</span>`
       if (this.params.attr.dot) {

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

@@ -7,7 +7,7 @@ async function blockquote () {
       this.selector = '.' + cls
     }
 
-    async build () {
+    build = async () => {
       const { isString } = this.plugin.app.bajo.lib._
       this.component.normalizeAttr(this.params, { cls })
       if (isString(this.params.attr.attribution)) {

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

@@ -8,7 +8,7 @@ async function breadcrumbItem () {
       this.component.normalizeAttr(this.params, { tag: 'li', cls })
     }
 
-    async build () {
+    build = async () => {
       const { omit } = this.plugin.app.bajo.lib._
       const { attrToArray } = this.plugin.app.waibuMpa
       if (this.params.attr.href) {

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

@@ -37,7 +37,7 @@ async function breadcrumb () {
       this.component.normalizeAttr(this.params, { tag: 'ol', cls })
     }
 
-    async build () {
+    build = async () => {
       const { isString, omit } = this.plugin.app.bajo.lib._
       const { routePath } = this.plugin.app.waibu
       const { urlToBreadcrumb, attrToArray } = this.plugin.app.waibuMpa

package/waibuMpa/theme/component/factory/btn-back-to-top.js

@@ -14,7 +14,7 @@ async function btnBackToTop () {
       }
     }
 
-    async build () {
+    build = async () => {
       this.params.attr['x-data'] = `{
         scroll () {
           if (document.body.scrollTop > ${this.params.attr.revealAt} || document.documentElement.scrollTop > ${this.params.attr.revealAt}) {

package/waibuMpa/theme/component/factory/btn-group.js

@@ -11,7 +11,7 @@ async function btnGroup () {
       if (this.params.attr.size) this.params.attr.class.push(parseSimple.call(this, { cls, value: this.params.attr.size, values: sizes }))
     }
 
-    async build () {
+    build = async () => {
       const { $ } = this.component
       const html = []
       $(`<div>${this.params.html}</div>`).children().each(function () {

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

@@ -11,7 +11,7 @@ async function btn () {
       this.params.attr.class.push(cls)
     }
 
-    async build () {
+    build = async () => {
       const { has, omit, isString } = this.plugin.app.bajo.lib._
       // tag
       this.params.tag = !!this.params.attr.href || this.params.attr.tag === 'a' ? 'a' : 'button'

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

@@ -8,7 +8,7 @@ async function cardFooter () {
       this.selector = '.' + cls
     }
 
-    async build () {
+    build = async () => {
       await handler.call(this, cls, this.params)
     }
   }

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

@@ -18,7 +18,7 @@ async function cardHeader () {
       this.selector = '.' + cls
     }
 
-    async build () {
+    build = async () => {
       await handler.call(this, cls, this.params)
     }
   }

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

@@ -8,7 +8,7 @@ async function card () {
       this.component.normalizeAttr(this.params, { tag: 'div', cls })
     }
 
-    async build () {
+    build = async () => {
       const { $ } = this.component
       const children = $(`<div>${this.params.html}</div>`).children()
       this.params.html = children.each(function (idx) {

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

@@ -8,7 +8,7 @@ async function carouselItem () {
       this.component.normalizeAttr(this.params, { tag: 'div', cls, dataBsInterval: this.params.attr.interval })
     }
 
-    async build () {
+    build = async () => {
       const { isString } = this.plugin.app.bajo.lib._
       if (isString(this.params.attr.caption)) {
         const captions = ['<div class="carousel-caption d-none d-md-block">']

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

@@ -13,7 +13,7 @@ async function carousel () {
       this.params.html = `<div class="${cls}-inner">${this.params.html}</div>`
     }
 
-    async build () {
+    build = async () => {
       const { attrToArray } = this.plugin.app.waibuMpa
       const { $ } = this.component
       let activeItem = 0

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

@@ -8,7 +8,7 @@ function collectAttr (group, item) {
 
 async function collapse () {
   return class Collapse extends this.baseFactory {
-    async build () {
+    build = async () => {
       const { generateId } = this.plugin.app.bajo
       const { merge, isString } = this.plugin.app.bajo.lib._
       const { attrToArray, groupAttrs } = this.plugin.app.waibuMpa

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

@@ -9,7 +9,7 @@ async function container () {
       this.component.normalizeAttr(this.params, { tag: 'div' })
     }
 
-    async build () {
+    build = async () => {
       const { has, omit } = this.plugin.app.bajo.lib._
       if (has(this.params.attr, 'responsive')) this.params.attr.class.push(`${cls}-fluid`)
       else if (has(this.params.attr, 'breakpoint')) this.params.attr.class.push(parseSimple({ cls, value: this.params.attr.breakpoint, values: breakpoints }))

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

@@ -9,7 +9,7 @@ async function drawer () {
       this.component.normalizeAttr(this.params, { tag: 'div', autoId: true, tabIndex: -1 })
     }
 
-    async build () {
+    build = async () => {
       const { isString, omit, trim } = this.plugin.app.bajo.lib._
       const { groupAttrs } = this.plugin.app.waibuMpa
       const { $ } = this.component

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

@@ -8,7 +8,7 @@ async function dropdownItem () {
       this.component.normalizeAttr(this.params, { tag: 'a' })
     }
 
-    async build () {
+    build = async () => {
       const { $ } = this.component
       if ($(this.params.html).children().length === 0 && !this.params.attr.href) this.params.attr.href = '#'
       if (this.params.attr.divider) {

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

@@ -71,7 +71,7 @@ async function dropdown () {
       this.component.normalizeAttr(this.params, { tag })
     }
 
-    async build () {
+    build = async () => {
       const { merge, cloneDeep, omit } = this.plugin.app.bajo.lib._
       const { groupAttrs } = this.plugin.app.waibuMpa
       const alpinejs = this.plugin.app.waibuAlpinejs

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

@@ -6,7 +6,7 @@ async function fieldset () {
       if (!this.params.attr.legendType) this.params.attr.legendType = '5'
     }
 
-    async build () {
+    build = async () => {
       const { omit } = this.plugin.app.bajo.lib._
       const { groupAttrs } = this.plugin.app.waibuMpa
       const group = groupAttrs(this.params.attr, ['grid', 'legend', 'card'])

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

@@ -8,7 +8,7 @@ async function figure () {
       this.component.normalizeAttr(this.params, { cls })
     }
 
-    async build () {
+    build = async () => {
       const { $ } = this.component
       this.params.html = $(`<div>${this.params.html}</div>`).children().each(function () {
         if (this.name === 'img') $(this).addClass('figure-img')

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

@@ -21,7 +21,7 @@ export async function build (handler, params = {}) {
 
 async function formCheckToggle () {
   return class FormCheckToggle extends this.baseFactory {
-    async build () {
+    build = async () => {
       const { has } = this.plugin.app.bajo.lib._
       const { req } = this.component
       if (!has(this.params.attr, 'label')) this.params.attr.label = req.t('Toggle Check')

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

@@ -47,7 +47,7 @@ export async function build (handler, params = {}) {
 
 async function formCheck () {
   return class FormCheck extends this.baseFactory {
-    async build () {
+    build = async () => {
       await build.call(this, buildFormCheck, this.params)
     }
   }

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

@@ -3,7 +3,7 @@ import { build } from './form-input.js'
 
 async function formColor () {
   return class FormColor extends this.baseFactory {
-    async build () {
+    build = async () => {
       await build.call(this, buildFormColor, this.params)
     }
   }

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

@@ -9,7 +9,7 @@ async function formDate () {
       this.inlineScript = inlineScript
     }
 
-    async build () {
+    build = async () => {
       const { set } = this.plugin.app.bajo.lib._
       const opts = {}
       if (this.params.attr.calendarWeeks) set(opts, 'display.calendarWeeks', true)

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

@@ -67,7 +67,7 @@ async function formDatetime () {
       this.inlineScript = inlineScript
     }
 
-    async build () {
+    build = async () => {
       const { set } = this.plugin.app.bajo.lib._
       const opts = {}
       if (this.params.attr.sideBySide) set(opts, 'display.sideBySide', true)

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

@@ -8,7 +8,7 @@ async function formFile () {
       this.params.attr.type = 'file'
     }
 
-    async build () {
+    build = async () => {
       await build.call(this, buildFormFile, this.params)
     }
   }

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

@@ -123,7 +123,7 @@ export async function build (handler, params = {}) {
 
 async function formInput () {
   return class FormInput extends this.baseFactory {
-    async build () {
+    build = async () => {
       await build.call(this, buildFormInput, this.params)
     }
   }

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

@@ -3,7 +3,7 @@ import { build } from './form-input.js'
 
 async function formPassword () {
   return class FormPassword extends this.baseFactory {
-    async build () {
+    build = async () => {
       this.params.attr.type = 'password'
       await build.call(this, buildFormInput, this.params)
     }

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

@@ -3,7 +3,7 @@ import { build } from './form-input.js'
 
 async function formPlaintext () {
   return class FormPlaintext extends this.baseFactory {
-    async build () {
+    build = async () => {
       this.params.attr.disabled = true
       if (this.params.attr.labelFloating) this.params.attr.class.push('border', 'rounded')
       await build.call(this, buildFormPlaintext, this.params)

package/waibuMpa/theme/component/factory/form-radio-toggle.js

@@ -3,7 +3,7 @@ import { build } from './form-check-toggle.js'
 
 async function formRadioToggle () {
   return class FormRadioToggle extends this.baseFactory {
-    async build () {
+    build = async () => {
       if (!this.params.attr.label) this.params.attr.label = this.component.req.t('Toggle Radio')
       await build.call(this, buildFormRadioToggle, this.params)
     }

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

@@ -3,7 +3,7 @@ import { build } from './form-check.js'
 
 async function formRadio () {
   return class FormRadio extends this.baseFactory {
-    async build () {
+    build = async () => {
       await build.call(this, buildFormRadio, this.params)
     }
   }

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

@@ -3,7 +3,7 @@ import { build } from './form-input.js'
 
 async function formRange () {
   return class FormRange extends this.baseFactory {
-    async build () {
+    build = async () => {
       this.params.attr.type = 'range'
       delete this.params.attr.labelFloating
       await build.call(this, buildFormRange, this.params)

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

@@ -13,7 +13,7 @@ async function formSelectCountry () {
       this.params.noTag = true
     }
 
-    async build () {
+    build = async () => {
       const { readConfig } = this.plugin.app.bajo
       const { map } = this.plugin.app.bajo.lib._
       const { base64JsonEncode } = this.plugin.app.waibuMpa

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

@@ -33,7 +33,7 @@ async function formSelectExt () {
       this.scripts = scripts
     }
 
-    async build () {
+    build = async () => {
       const { omit } = this.plugin.app.bajo.lib._
       const { jsonStringify, base64JsonDecode } = this.plugin.app.waibuMpa
       this.params.attr['x-ref'] = 'select'

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

@@ -10,7 +10,7 @@ async function formSelect () {
       if (this.params.attr.noLabel) delete this.params.attr.label
     }
 
-    async build () {
+    build = async () => {
       const { groupAttrs } = this.plugin.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 })

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

@@ -9,7 +9,7 @@ async function formSwitch () {
       this.params.attr.wrapperClass += ' form-switch'
     }
 
-    async build () {
+    build = async () => {
       await build.call(this, buildFormSwitch, this.params)
     }
   }

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

@@ -3,7 +3,7 @@ import { build } from './form-input.js'
 
 async function formTextarea () {
   return class FormTextarea extends this.baseFactory {
-    async build () {
+    build = async () => {
       await build.call(this, buildFormTextarea, this.params)
     }
   }

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

@@ -9,7 +9,7 @@ async function formTime () {
       this.scripts = scripts
     }
 
-    async build () {
+    build = async () => {
       const { set } = this.plugin.app.bajo.lib._
       const opts = {}
       set(opts, 'display.components.calendar', false)

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

@@ -6,7 +6,7 @@ async function form () {
       if (!this.params.attr.method) this.params.attr.method = 'POST'
     }
 
-    async build () {
+    build = async () => {
       this.component.locals.form = this.component.locals.form ?? {}
       const { pascalCase } = this.plugin.app.bajo
       const { isEmpty, omit } = this.plugin.app.bajo.lib._

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

@@ -20,7 +20,7 @@ async function gridCol () {
       this.component.normalizeAttr(this.params, { tag: 'div' })
     }
 
-    async build () {
+    build = async () => {
       const { map, without, isString } = this.plugin.app.bajo.lib._
       const { attrToArray } = this.plugin.app.waibuMpa
       if (this.params.attr.break) {

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

@@ -15,7 +15,7 @@ async function img () {
       delete this.params.attr.holder
     }
 
-    async build () {
+    build = async () => {
       const { isString } = this.plugin.app.bajo.lib._
       const mouseenter = []
       const mouseleave = []

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

@@ -7,7 +7,7 @@ async function listItem () {
       this.component.normalizeAttr(this.params, { tag: 'li' })
     }
 
-    async build () {
+    build = async () => {
       const { isString } = this.plugin.app.bajo.lib._
       const { groupAttrs } = this.plugin.app.waibuMpa
       const group = groupAttrs(this.params.attr, ['badge'])

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

@@ -9,7 +9,7 @@ async function list () {
       this.component.normalizeAttr(this.params, { tag: this.params.attr.ordered ? 'ol' : 'ul' })
     }
 
-    async build () {
+    build = async () => {
       const { isString, omit } = this.plugin.app.bajo.lib._
       const { attribsStringify } = this.plugin.app.waibuMpa
       const { $ } = this.component

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

@@ -8,7 +8,7 @@ async function masonry () {
       this.params.noTag = true
     }
 
-    async build () {
+    build = async () => {
       const { pick } = this.plugin.app.bajo.lib._
       const { attribsStringify } = this.plugin.app.waibuMpa
       const { $ } = this.component

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

@@ -11,7 +11,7 @@ async function modal () {
       this.component.normalizeAttr(this.params, { tag: 'div', cls, autoId: true, tabIndex: -1, ariaHidden: 'true' })
     }
 
-    async build () {
+    build = async () => {
       const { isString, omit } = this.plugin.app.bajo.lib._
       const { groupAttrs } = this.plugin.app.waibuMpa
       const { $ } = this.component

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

@@ -8,7 +8,7 @@ async function navDivider () {
       this.component.normalizeAttr(this.params, { tag: 'li', cls })
     }
 
-    async build () {
+    build = async () => {
       this.params.attr.padding = 'y-2'
       const attr = {
         class: ['vr'],

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

@@ -1,6 +1,6 @@
 async function navDropdownDarkmode () {
   return class NavDropdownDarkmode extends this.baseFactory {
-    async build () {
+    build = async () => {
       const { titleize } = this.plugin.app.bajo
       const { set } = this.plugin.app.bajo.lib._
       const cfgWmpa = this.plugin.app.waibuMpa.config

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

@@ -1,6 +1,6 @@
 async function navDropdownLanguage () {
   return class NavDropdownLanguage extends this.baseFactory {
-    async build () {
+    build = async () => {
       const { camelCase } = this.plugin.app.bajo.lib._
       const { supported } = this.plugin.app.bajo.config.intl
       const lang = this.component.req.lang

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

@@ -1,11 +1,12 @@
 async function navDropdownSetting () {
   return class NavDropdownSetting extends this.baseFactory {
-    async build () {
+    build = async () => {
       const { set, camelCase } = this.plugin.app.bajo.lib._
       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
+      const { req } = this.component
       const cfgWmpa = this.plugin.app.waibuMpa.config
 
       const group = groupAttrs(this.params.attr, ['icon'])
@@ -13,15 +14,29 @@ async function navDropdownSetting () {
       const icon = this.component.req.iconset ? await this.component.buildTag({ tag: 'icon', attr: group.icon }) : ''
       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" />
+      `
+      if (this.params.attr.fancyProfile) {
+        profile = await this.component.buildSentence(`
+          <div>
+            <c:dropdown-item href="sumba:/my-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>
+          </div>
+        `)
+      }
       let html = `
-        <c:dropdown-item header t:content="Display Mode" />
-        <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" />
+        ${profile}
+        <c:dropdown-item divider />
+        <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 (supported.length > 0) {
         html += `
           <c:dropdown-item divider />
-          <c:dropdown-item header t:content="Language" />
         `
         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)}" />`

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

@@ -1,20 +1,18 @@
 async function navDropdownUser () {
   return class NavDropdownUser extends this.baseFactory {
-    async build () {
+    build = async () => {
       const { has } = this.plugin.app.bajo.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' } }) : ''
       let text = ''
-      if (has(this.params.attr, 'showName')) {
+      if (has(this.params.attr, 'title')) {
         if (req.user) {
-          if (this.params.attr.showName === 'username') text = req.user.username
-          else if (this.params.attr.showName === 'full') text = `${req.user.firstName} ${req.user.lastName}`
-          else if (this.params.attr.showName === 'short') text = `${req.user.firstName} ${req.user.lastName[0]}.`
-          else text = req.user[this.params.attr.showName]
+          if (this.params.attr.title === 'short') text = `${req.user.firstName} ${req.user.lastName[0]}.`
+          else if (['firstName', 'lastName', 'username'].includes(this.params.attr.title)) text = req.user[this.params.attr.title]
+          else text = `${req.user.firstName} ${req.user.lastName}`
         } else text = req.t('guest')
       }
-      if (this.params.attr.noText) text = ''
       const html = []
       const attr = {
         dropdown: true,
@@ -27,11 +25,26 @@ async function navDropdownUser () {
         delete attr.dropdownMenu
         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('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') }))
+        if (req.user) {
+          if (this.params.attr.fancyProfile) {
+            const profile = await this.component.buildSentence(`
+              <div>
+                <c:dropdown-item href="sumba:/my-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>
+              </div>
+            `)
+            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:/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: { divider: true } }))
+            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: { divider: true } }))

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

@@ -1,6 +1,6 @@
 async function navItemSignout () {
   return class NavItemSignout extends this.baseFactory {
-    async build () {
+    build = async () => {
       if (!this.component.req.user) return
       const { generateId } = this.plugin.app.bajo
       const { routePath } = this.plugin.app.waibu

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

@@ -9,7 +9,7 @@ async function navItem () {
       this.component.normalizeAttr(this.params, { tag: 'a', cls: 'nav-link', href: this.params.attr.href ?? '#' })
     }
 
-    async build () {
+    build = async () => {
       const { isString } = this.plugin.app.bajo.lib._
       const { groupAttrs } = this.plugin.app.waibuMpa
       const { $ } = this.component

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

@@ -1,6 +1,6 @@
 async function navToggleFullscreen () {
   return class NavToggleFullscreen extends this.baseFactory {
-    async build () {
+    build = async () => {
       const { iconset, req } = this.component
       if (!req.iconset) return
       const inIcon = iconset.resolve('fullscreen')

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

@@ -13,7 +13,7 @@ async function nav () {
       if (isString(this.params.attr.tag)) this.params.tag = this.params.attr.tag
     }
 
-    async build () {
+    build = async () => {
       const { $ } = this.component
       if (!['ol', 'ul'].includes(this.params.tag)) {
         const html = []

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

@@ -9,7 +9,7 @@ async function navbar () {
       this.component.normalizeAttr(this.params, { tag: 'nav', cls })
     }
 
-    async build () {
+    build = async () => {
       const { omit, cloneDeep, has } = this.plugin.app.bajo.lib._
       const { generateId, numUnit } = this.plugin.app.bajo
       const { groupAttrs } = this.plugin.app.waibuMpa

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

@@ -8,7 +8,7 @@ async function paginationItem () {
       this.component.normalizeAttr(this.params, { tag: 'li', cls })
     }
 
-    async build () {
+    build = async () => {
       const attr = { class: 'page-link', href: this.params.attr.href ?? '#' }
       const tag = this.params.attr.active || this.params.attr.disabled ? 'span' : 'a'
       if (this.params.attr.active || this.params.attr.disabled) delete attr.href

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

@@ -9,7 +9,7 @@ async function pagination () {
       this.component.normalizeAttr(this.params, { tag: 'ul', cls })
     }
 
-    async build () {
+    build = async () => {
       const { isString } = this.plugin.app.bajo.lib._
       if (!this.params.attr.margin) this.params.attr.margin = 'bottom-0'
       if (this.params.attr.size) this.params.attr.class.push(parseSimple.call(this, { cls, value: this.params.attr.size, values: sizes }))

package/waibuMpa/theme/component/factory/progress-stack.js

@@ -8,7 +8,7 @@ async function progressStack () {
       this.component.normalizeAttr(this.params, { tag: 'div', cls })
     }
 
-    async build () {
+    build = async () => {
       const { pick } = this.plugin.app.bajo.lib._
       const { $ } = this.component
       this.params.html = $(`<div>${this.params.html}</div>`).children().each(function () {

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

@@ -7,7 +7,7 @@ async function progress () {
       this.selector = '.' + cls
     }
 
-    async build () {
+    build = async () => {
       const { omit, isString } = this.plugin.app.bajo.lib._
       const { numUnit } = this.plugin.app.bajo
       const min = Number(this.params.attr.min) || 0

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

@@ -7,7 +7,7 @@ async function scrollspy () {
       this.selector = '.' + cls
     }
 
-    async build () {
+    build = async () => {
       const { isString } = this.plugin.app.bajo.lib._
       const { generateId } = this.plugin.app.bajo
       const target = isString(this.params.attr.target) ? this.params.attr.target : generateId()

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

@@ -28,7 +28,7 @@ async function sidebar () {
       this.component.normalizeAttr(this.params, { tag: 'div', flex: 'column' })
     }
 
-    async build () {
+    build = async () => {
       const { generateId } = this.plugin.app.bajo
       const { omit, filter } = this.plugin.app.bajo.lib._
       this.params.attr.margin = this.params.attr.margin ?? 'all-3'
@@ -55,7 +55,7 @@ async function sidebar () {
           }
           items = filter(this.component.locals.sidebar ?? [], s => s.bottom)
           if (items.length > 0) {
-            html.push(`<c:nav tag="ul" flex="column" text="align:${this.params.attr.align}" type="pills" ${this.params.attr.expanded ? '' : 'padding="all-1"'}>`)
+            html.push(`<c:nav tag="ul" flex="column" text="align:${this.params.attr.align}" type="pills" ${this.params.attr.expanded ? '' : 'padding="all-1"'} ${this.params.attr.fancyProfile ? 'fancy-profile' : ''}>`)
             for (const item of items) {
               html.push(formatSentence.call(this, item, this.params))
             }

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

@@ -22,7 +22,7 @@ async function table () {
       this.component.normalizeAttr(this.params, { cls })
     }
 
-    async build () {
+    build = async () => {
       const { omit } = this.plugin.app.bajo.lib._
       if (this.params.attr.strip) setStrip.call(this, this.params)
       if (this.params.attr.responsive) setResponsive.call(this, this.params)

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

@@ -8,7 +8,7 @@ async function toast () {
       this.component.normalizeAttr(this.params, { cls, tag: 'div', role: 'alert', ariaLive: 'assertive', ariaAtomic: 'true' })
     }
 
-    async build () {
+    build = async () => {
       const { isString, omit, has, get } = this.plugin.app.bajo.lib._
       const header = []
       if (this.params.attr.noHide) this.params.attr.dataBsAutohide = 'false'

package/waibuStatic/asset/css/wbs.css

@@ -10,3 +10,9 @@
 .icon-rotate-270::before {
   transform: rotate(270deg);
 }
+.avtr {
+  vertical-align: middle;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+}