@ubuilder/simple/README.md

UBuilder Simple Components

# UBuilder simple components
To use all components:
```javascript
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
```javascript
import { UNavbar } from '@ubuilder/simple';

Vue.use(UNavbar);
```
```html
<u-navbar id="navsample" :data="[ { label: 'label', link: 'router-link to',  children: [], permission: 'PERM'}]" />
```

## properties
```javascript
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
```javascript
import { UCombo, UCheckCombo } from '@ubuilder/simple';

Vue.use(UCombo);
Vue.use(UCheckCombo);
```
```html
<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
```javascript
import { UButton } from '@ubuilder/simple';

Vue.use(UButton);
```
```html
<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 <p>Unautorized</p> when not provided.
* 403: If user don't have permssion. Renders <p>Forbidden</p> when not provided.

### usage
```javascript
import { UPage } from '@ubuilder/simple';

Vue.use(UPage);
```
```html
<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
```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.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
```javascript
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
```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.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
```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.10

## Tabs
Added @7.3.0

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

### color
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.

### container
flex container
```scss
@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.
```scss
@use '@ubuilder/simple/styles/mixin/transition';

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