# acribus

> vue-kits

Latest version **1.0.29** (published 2018-05-29) · 0 weekly downloads

## Install

```sh
npm install acribus
pnpm add acribus
yarn add acribus
bun add acribus
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.29 |
| Published | 2018-05-29 |
| First published | 2018-04-25 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 10.3 MB |
| Known vulnerabilities | 0 (+26 in 3 direct dependencies) |
| Install scripts | no |
| Maintainers | xiaoshude |

## Links

- npm: https://www.npmjs.com/package/acribus
- npm.io page: https://npm.io/package/acribus

## Dependencies (10)

- [vue](https://npm.io/package/vue.md) ^2.5.16
- [vuex](https://npm.io/package/vuex.md) ^3.0.1
- [axios](https://npm.io/package/axios.md) ^0.18.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.5
- [element-ui](https://npm.io/package/element-ui.md) ^2.3.6
- [vue-router](https://npm.io/package/vue-router.md) ^3.0.1
- [vue-awesome](https://npm.io/package/vue-awesome.md) ^3.0.0
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^8.3.0
- [normalize.css](https://npm.io/package/normalize.css.md) ^8.0.0
- [vue-template-compiler](https://npm.io/package/vue-template-compiler.md) ^2.5.16

## Recent versions

- 1.0.29 (latest) — 2018-05-29
- 1.0.28 — 2018-05-29
- 1.0.27 — 2018-05-25
- 1.0.26 — 2018-05-24
- 1.0.25 — 2018-05-23
- 1.0.24 — 2018-05-23
- 1.0.23 — 2018-05-23
- 1.0.22 — 2018-05-22
- 1.0.21 — 2018-05-22
- 1.0.20 — 2018-05-22
- 1.0.19 — 2018-05-22
- 1.0.18 — 2018-05-18
- 1.0.17 — 2018-05-17
- 1.0.16 — 2018-05-17
- 1.0.15 — 2018-05-16
- … 33 more at https://npm.io/package/acribus/versions

## README

## principle: Convention over configuration
only needs to specify unconventional aspects of the application by config

### develop
开发分支在dev 发布分支在master
the way how you look at an app
### Conventions
- state structure {`moduleName`List, `moduleName`}
- action name load`moduleName`List  load`moduleName`
- field in table and editable

### helpers && keywords
keywords used to trigger a predefined action or expand  a predefined object

helpers used to generate config object easily

#form-tpl
## how to use
```html
 <FormTpl
    :model="formData"
    :fields="config.form"
    v-if="config.form"
    :options="{inline: true, nativeOn: {click: onSearch}}">
    <!--optional: some slot here -->
 </FormTpl>
```
### how to write fields
fields is an array like:
```js
[
      {
        type: 'input',
        label: 'SLS Tracking Order ID',
        key: 'sls_tracking_number',
        rule: {
          'sls_tracking_number': [{
                type: 'number',
                message: `${key} should be a number !`
              }
        }]
      },
      {
        type: 'input',
        label: 'Shopee Order SN',
        key: 'shopee_order_sn'
      },
      {
        type: 'select',
        label: 'Status',
        key: 'status',
        options: RECEIVE.STATUS.map((val, index) => ({
          value: index.toString(),
          label: val
        })),
        options: {
          on: {
            change: 'submit'
          }
        }
      },
      {
          type: 'date-picker',
          subType: 'datetimerange',
          label: 'Pick Up Time',
          key: 'pick_up_time',
          placeholder: ['start time', 'end time']
      }
   ]
```
writing this object by hand can be bored,
so the following pattern is recommended, using helper which provided by package

```js
new FieldInput('Email', 'email', ['required', 'email']),
new FieldInput('Phone', 'phone', true),
new FieldSelect('Status', 'status', [
   ...USER.STATUS.map((item, index) => ({
      label: item,
      value: index
   }))
], true),
new FieldMultiSelect('Role', 'role_list', () => {
   return this.roleOptions
}, true),
```
hint: two ways to pass options: array or function which return an array,
functional way is necessary when options is dynamic

form-tpl provide many keyword to ease your writing,
```js
options: {
   on: {
      change: 'submit'
    }
}
```
instand of writing function handler, form submitting can be triggered by a string 'submit'

| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| form | `optional` hold the reference of form component, used to get form status | Object | null |
| model | hold all the value user have input | Object | {} |
| fields | defined the form input | Array | [] |
| rules | `optional` to specify the validation rules, can be written in `fields` | Object | null |
| options | `optional` to specify the trivial things like layout | Object | null |

---
_Source: https://npm.io/package/acribus · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._