UBuilder Simple Components
npm install @ubuilder/simplejavascript
import UBSimple from '@ubuilder/simple';Vue.use(UBSimple);
`UNavbar
rendering navigation data as (prepend slot)? - nav = ul = li = (ul = li)? - (append slot)?$3
* vue-router
* @ubuilder/auth >= 7.1.1$3
javascript
import { UNavbar } from '@ubuilder/simple';Vue.use(UNavbar);
`
html
`properties
javascript
NavData = {
label: String,
link: String?,
children: [NavData]?,
permission: String?,
exact: Boolean?,
};
`
* data: \[NavData\]$3
prepend, append
Combo, CheckCombo
Renders select combo.Combo added @7.1.4
CheckCombo not implemented yet.
$3
javascript
import { UCombo, UCheckCombo } from '@ubuilder/simple';Vue.use(UCombo);
Vue.use(UCheckCombo);
`
html
`$3
* data: \[Object\], required.
* textKey: String, default 'text'.
* valueKey: String, default 'value'.
* placeholder: String, default null. placeholder option always set value to empty string.
* disabled: Boolean, default false.
* required: Boolean, default false.
Button
Button added @7.1.17$3
javascript
import { UButton } from '@ubuilder/simple';Vue.use(UButton);
`
html
BUTTON TEXT
`$3
* type: String, 'submit', 'reset', or 'button'. default 'button'.
* progress: Boolean, default false.$3
* @click
Page
UBuilder page checks route.meta.auth permission with current user.Requirements: vue-router, @ubuilder/auth
Added @7.2.1.
$3
* tag: rendering tag. default value is 'div'. added @7.2.2.$3
* default: page contents.
* 401: If user not logged in. Renders Unautorized
when not provided.
* 403: If user don't have permssion. Renders Forbidden
when not provided.$3
javascript
import { UPage } from '@ubuilder/simple';Vue.use(UPage);
`
html
Here is content.
Login please.
Not allowed!
`Table, Pagination and Grid
Added @7.2.3
javascript
// columns
{
id: 'column id, optional',
label: 'column label',
field: 'column field, optional if use slot',
slot: 'column slot name, if using custom column rendering. props: row, index',
}
// data should array includes object
`Modal
Added @7.2.5Alert
Added @7.2.5Renders as section tag contains header, p, footer.
* v-model : active or not, boolean.
* :title : alert title, render in header.
* :message : alert message, render in p.
* :dialogClass : for class of alert section. string or object. default ''. ('u-dialog' implicitly applied)
* :buttonText: button text, render in footer button. string, default 'OK'.
* :buttonClass: button css class, default ''.
* @close : on alert dialog closes event.
* :onClose : same as @close, programmatic api only.
* slot title : header rendering, has title property.
* slot default : p rendering.
$3
Added @7.2.9
javascript
import { UAlertProgrammatic } from '@ubuilder/simple';
Vue.use(UAlertProgrammatic);vm.$ub.alert({
title: 'Alert',
message: 'alert message',
onClose() {
// close event
},
});
`Confirm
Added @7.2.5Renders as section tag contains header, p, footer.
* v-model : active or not, boolean.
* :title : alert title, render in header.
* :message : alert message, render in p.
* :dialogClass : for class of confirm section. string, array or object. default ''. ('u-dialog' implicitly applied)
* :buttonText: confirm button text, render in footer button. string, default 'OK'.
* :buttonClass: confirm button css class, default ''.
* :cancelText: button text, render in footer button. string, default 'Cancel'.
* :cancelClass: cancel button css class, default ''.
* :focusConfirm: boolean, focus on confirm button on present. default value is false, cancel button is focused.
* @confirm : on confirmed.
* @cancel : on canceled.
* :onConfirm : same as @confirm, programmatic api only.
* :onCancel : same as @cancel, programmatic api only.
* slot title : header rendering, has title property.
* slot default : p rendering.
$3
Added @7.2.11
javascript
import { UConfirmProgrammatic } from '@ubuilder/simple';
Vue.use(UConfirmProgrammatic);vm.$ub.confirm({
title: 'Confirm',
message: 'confirm message',
onConfirm() {
// confirm event
},
onCancel() {
// cancel event
},
});
`Prompt
Added @7.2.15Renders as section tag contains header, p(label-message-input), footer.
* v-model : active or not, boolean.
* :title : alert title, render in header.
* :message : alert message, render in p.
* :placeholder: input placeholder.
* :defaultText: input text on appear.
* :dialogClass : for class of confirm section. string, array or object. default ''. ('u-dialog' implicitly applied)
* :buttonText: confirm button text, render in footer button. string, default 'OK'.
* :buttonClass: confirm button css class, default ''.
* :cancelText: button text, render in footer button. string, default 'Cancel'.
* :cancelClass: cancel button css class, default ''.
* @confirm : on confirmed, first argument is input text.
* @cancel : on canceled.
* :onConfirm : same as @confirm, programmatic api only.
* :onCancel : same as @cancel, programmatic api only.
* slot title : header rendering, has title property.
* slot default : p message rendering.
$3
javascript
import { UPromptProgrammatic } from '@ubuilder/simple';
Vue.use(UPromptProgrammatic);vm.$ub.prompt({
title: 'Prompt',
message: 'prompt message',
onConfirm(text) {
// confirm event
},
onCancel() {
// cancel event
},
});
`Loading
Added @7.2.10Tabs
Added @7.3.0Blank page is slot.
javascript
import UTabs from '@ubuilder/simple';
`
scss
@use '@ubuilder/simple/styles/tabs'
`div.utabs - nav - ul - li.u-tab
.active on active tab
UBuilder simple styles
Styles on scss.global
should use global css on app. normalizes and minimal component styles. all mixins forwarded mixinname-*
scss
@use '@ubuilder/simple/styles/global';
`Mixins
use all mixins by
scss
@use '@ubuilder/simple/styles/mixin';
`
all mixins forwarded mixinname-*$3
color with dark mode supports. dark color is inverted lightness of light color.
scss
@use '@ubuilder/simple/styles/mixin/color';
`
* background($color) : set background color with dark mode.
* text($color) : set color with dark mode.
* set($color, $background: false) : set color on element with dark mode.
* without-dark($color, $background: false) : set color on element without dark mode.
* border($color) : set border-color with dark mode.
* caret($color) : set caret-color with dark mode.
* column-rule($color) : set column-rule-color with dark mode.
* outline($color) : set outline-color with dark mode.
* box-shadow($values, $color) : set box-shadow color with dark mode.
* text-shadow($values, $color) : set text-shadow color with dark mode.$3
flex container
scss
@use '@ubuilder/simple/styles/mixin/container';
`
* horizontal($fill: false, $wrap: false)
* vertical($fill: false, $wrap: false)
* centeredTransitions
* fade added @7.1.7
* vertical added @7.1.7
* horizontal added @7.1.8$3
First parameter is transition duration. default to 2.5s.
Vertical's second parameter is max-height on transition end. default to 100vh, should adjust with actual element height.
scss
@use '@ubuilder/simple/styles/mixin/transition';li {
@include transition.fade(0.25s);
@include transition.horizontal(0.25s);
@include transition.vertical(0.25s, 100vh);
}
``