Extends UnityBase adminUI by Vue + ElementUI libraries. Starts from UB@5 Vue is a preferred way to build a UI.

This documentation contains a JS (non-visual) functions/methods/modules exported by @unitybase/adminui-vue. For documentation of the VueJS based UI components see UI library for Vue.

What included

  • VueJS - exported as global Vue variable and registered in SystemJS as 'vue'
  • Vuex - injected into Vue.prototype
  • Vuelidate - injected into Vue.prototype as $v
  • throttle-debounce - exported as throttleDebounce
  • magicLink - a hyperlink click custom actions - see module:magicLinks
  • ElementUI - exported as global ElementUI variable and registered in SystemJS as 'element-ui'
  • @unitybase/ub-pub - available as Vue.prototype.$UB (or this.$UB inside vue component)
  • UB.i18n - integrated into Vue as $ut
  • i18n filter available in vue templates. Lines below produce the same output
<div> {{ 'uba_user' | i18n}} </div>
<div> {{ $ut('uba_user') }} </div>
  • dist/adminui-vue.css theme include normalize.css && modified element-theme-chalk
  • modern login page - located in /views/ub-auth.html. The path to this page is a default for uiSettings.adminUI.loginURL

Usage

adminUI based app

An adminUI based application should adds a @unitybase/adminui-vue model into domain.models section of ubConfig after adminui-pub

"application": {
  "domain": {
    "models": [
      ...
      { "path": "./node_modules/@unitybase/adminui-vue" }
      ..

Stand-alone app

See /views/ub-auth.html for sample

Embed a compiled Vue app into adminUI

  • define output and externals section into webpack config to prevent loading modules twice:
  {output: {
    path: path.join(__dirname, 'dist'),
    library: 'YUR_LIB_NAME',
    libraryTarget: 'var',
    filename: 'your-lib-entry-point.min.js',
    publicPath: '/clientRequire/YOUR_MODULE_NAME/dist/'
  },
  externals: {
    lodash: '_',
    '@unitybase/ub-pub': 'UB',
    '@unitybase/adminui-pub': '$App',
    'vue': 'Vue',
    'element-ui': 'ElementUI',
  }}

Debugging

ElementUI in debug mode

For better debugging experience we recommend rebuilding element-ui in development mode. Use element-ui branch for a version specified in adminui-vue package.json (2.5.4 in a moment of writing this manual)

 git clone https://github.com/ElemeFE/element.git
 cd element
 git checkout v2.5.4
 npm i
 npm run clean && npm run build:file && npx webpack --config build/webpack.conf.js --mode development

and copy /lib/index.js into your project. In my case project is located in ~/dev/ubjs/apps/autotest

cp ./lib/index.js ~/dev/ubjs/apps/autotest/node_modules/element-ui/lib

Prevent debugger to dig into vue sources

While debugging a components source you can prevent debugger to dig into vue sources.

To do this in Source tab of debugger press F1 to open Preferences, select Blackboxing on the left and add a pattern vue.common.dev.js$.

After this Step into (F11) will skip vue sources

Theme

Generate variables

npm run gen-el-vars

Edit theme/ub-el.scss and build a theme using command:

npm run build:theme

Submodules

Members

# computedVuex static

See module:formHelpers.computedVuex

# dialog : uDialogs.dialog static

Show modal dialog with 3 optional button and text/html content, see uDialogs.dialog

# dialogError : uDialogs.dialogError static

Error dialog, see uDialogs.dialogError

# dialogInfo : uDialogs.dialogInfo static

Information dialog, see uDialogs.dialogInfo

# dialogYesNo : uDialogs.dialogYesNo static

Confirmation dialog, see uDialogs.dialogYesNo

# errorReporter : uDialogs.errorReporter static

Error reporter dialog, see uDialogs.errorReporter

# Form static

Creates a new instance of UI module. See module:Form.Form

# formHelpers static

Helper functions for forms. See module:formHelpers. mapInstanceFields and computedVuex are aliased into @unitybase/adminui-vue

# lookups : lookups static

A reactive (in terms of Vue reactivity) entities data cache. See examples in lookups module documentation

# mapInstanceFields static

See module:formHelpers.mapInstanceFields

# mountUtils : mountUtils static

Mount a Vue based component as a navbar tab, a modal form or inside other component (as a container). See mountUtils module documentation for samples.

# throttleDebounce : Object static

throttle-debounce see original doc

# uDialogs : uDialogs static

Modal uDialogs (message boxes) for showing errors, information and confirmation For usage examples see uDialogs module documentation

Methods

# magicLinkFocusCommand (paramsObject, targetEventTarget) inner

Magic link to focus DOM/Ext element with specified id

Arguments:
  
      <a href="#" data-cmd-type="setFocus" data-elm-id="my-html-element-id">focus other</a>
  

# mergeValidations (aobject | function | undefined, bobject) → object inner

Helper function that merges validation config defined in mixins

Events

# portal:navbar:defineSlot  --> ()

Additional components can be added to the Sidebar and NavBar using this event

  
      window.$App.on('applicationReady', () => {
    const SidebarSlotExample = require('./samples/SidebarSlotExample.vue').default
    $App.fireEvent('portal:sidebar:defineSlot', SidebarSlotExample, { some attrs })

    const NavBarSlotExample = require('./samples/NavbarSlotExample.vue').default
    $App.fireEvent('portal:navbar:defineSlot', NavBarSlotExample, { some attrs })
  }