UBuilder simple components

To use all components:

import UBSimple from '@ubuilder/simple';

Vue.use(UBSimple);

UNavbar

rendering navigation data as (prepend slot)? - nav = ul = li* = (ul = li*)? - (append slot)?

prerequirements

• vue-router
• @ubuilder/auth >= 7.1.1

usage

import { UNavbar } from '@ubuilder/simple';

Vue.use(UNavbar);

<u-navbar id="navsample" :data="[ { label: 'label', link: 'router-link to',  children: [], permission: 'PERM'}]" />

properties

NavData = {
  label: String,
  link: String?,
  children: [NavData]?,
  permission: String?,
  exact: Boolean?,
};

• data: [NavData]

slots

prepend, append

Combo, CheckCombo

Renders select combo.

Combo added @7.1.4 CheckCombo not implemented yet.

usage

import { UCombo, UCheckCombo } from '@ubuilder/simple';

Vue.use(UCombo);
Vue.use(UCheckCombo);

<u-combo :data="[ { text: 'name', value: 'value' } ]" textKey="text" valueKey="value" v-model="String" placeholder="select one" />
<u-check-combo :data="[ { name: 'name', v: 'value' } ]" textKey="name" valueKey="value" v-model="[String]" placeholder="select many" />

properties

• 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

usage

import { UButton } from '@ubuilder/simple';

Vue.use(UButton);

<u-button :progress="boolean_value">BUTTON TEXT</u-button>

properties

• type: String, 'submit', 'reset', or 'button'. default 'button'.
• progress: Boolean, default false.

events

• @click

Page

UBuilder page checks route.meta.auth permission with current user.

Requirements: vue-router, @ubuilder/auth Added @7.2.1.

props

• tag: rendering tag. default value is 'div'. added @7.2.2.

slots

• 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.

usage

import { UPage } from '@ubuilder/simple';

Vue.use(UPage);

<template>
  <u-page>
    <p>Here is content.</p>
    <template #401>
      <p>Login please.</p>
    </template>
    <template #403>
      <p>Not allowed!</p>
    </template>
  </u-page>
</template>

Table, Pagination and Grid

Added @7.2.3

// 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.5

Alert

Added @7.2.5

Renders 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.

Programmatic Alert

Added @7.2.9

import { UAlertProgrammatic } from '@ubuilder/simple';
Vue.use(UAlertProgrammatic);

vm.$ub.alert({
  title: 'Alert',
  message: 'alert message',
  onClose() {
    // close event
  },
});

Confirm

Added @7.2.5

Renders 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.

Programmatic Confirm

Added @7.2.11

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.15

Renders 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.

Programmatic Prompt

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.10

Tabs

Added @7.3.0

Blank page is slot.

import UTabs from '@ubuilder/simple';

@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-*

@use '@ubuilder/simple/styles/global';

Mixins

use all mixins by

@use '@ubuilder/simple/styles/mixin';

all mixins forwarded mixinname-*

color

color with dark mode supports. dark color is inverted lightness of light color.

@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.

container

flex container

@use '@ubuilder/simple/styles/mixin/container';

• horizontal($fill: false, $wrap: false)
• vertical($fill: false, $wrap: false)
• centered

Transitions

• fade added @7.1.7
• vertical added @7.1.7
• horizontal added @7.1.8

usage

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.

@use '@ubuilder/simple/styles/mixin/transition';

li {
  @include transition.fade(0.25s);
  @include transition.horizontal(0.25s);
  @include transition.vertical(0.25s, 100vh);
}