noumena-ui v4.0.16

noumena-ui

Noumena ui vue component

黑夜模式临时方案

使用css变量，需要外部提供
解决css单独打包，外部可选引入index.scss/var.scss

usage

npm i -S noumena-ui

fully import:

import NoumenaUi from 'noumena-ui';
import { zhLang } from 'noumena-ui/lib/locale-zh';
import { enLang } from 'noumena-ui/lib/locale-en';
import 'noumena-ui/lib/theme/index.css';
Vue.use(NoumenaUi, { // en as default
  getLang: () => i18n.locale === 'en' ? enLang : zhLang;
});

import on demand:

import { button } from 'noumena-ui';
import LangEn from 'noumena-ui/lib/locale-en';
Vue.use(button[, 'component-name']);
Vue.use(LangEn);
// babel.config.js / .babelrc.json
plugins: [
    [
      'component',
      {
        libraryName: 'noumena-ui',
        styleLibrary: {
          base: false,
          name: 'theme'
        }
      }
    ]
]

components

nou-button

import { button } from 'noumena-ui';
Vue.use(button);
<nou-button>
      <i class="iconfont icon-name"></i>
      <span>a button</span>
</nou-button>

custom-input（incomplete）

import { CustomInput } from 'noumena-ui';
Vue.use(CustomInput)
<nou-custom-input v-model="value" />

nou-date-range

<nou-date-range v-model="date" />
props:
placeholder
limitDays-Number-select duration limit
maxUseEndTime-Boolean-use last second of end date

nou-dialog

<nou-dialog v-if="dialogShowing" title="TITLE" @close="dialogShowing=false">
   <div>Contain</div>
</nou-dialog>
props:
closeOnClickModal-Boolean(false)
dialogClass-Object-contain box dom class obj
showClose-Boolean(true)-show close icon
long-Boolean(false)-scroll view container

nou-form

<nou-form ref="formDom" :rules="formRules">
      <nou-form-item check="name">
        <nou-input v-model="form.name"></nou-input>
      </nou-form-item>
      <nou-form-item check="password">
        <nou-input v-model="form.password" type="password"></nou-input>
      </nou-form-item>
      <nou-form-item check="password_sec">
        <nou-input v-model="form.password_sec" type="password"></nou-input>
      </nou-form-item>
</nou-form>
formRules: {
        name: 'please enter name', // pass a string as require and error msg
        password: {
          require: 'please enter password',
          limit: [6, 32, 'please enter 6-32 characters'], // length limit
        },
        password_sec: {
          require: 'please enter again',
          validate: () => { // custom check,return error msg
            if (this.form.password !== this.form.password_sec) {
              return 'please enter same password';
            }
            return '';
          },
        },
},

nou-input

<nou-input v-model="name" placeholder="please enter name" />

nou-label-button

<nou-label-button>text button</nou-label-button>
props:
disable-Boolean(false)
type-String('normal')-normal|danger

nou-layout

<nou-layout :active-menu="selected" :menus="items" logo-class="iconLOGO">
    <Header slot="header" />
    <AppMain />
</nou-layout> 

nou-loading

<nou-loading color="green" :stroke="10"></nou-loading>
props:
color-String('#000')
stroke-Number(6)

nou-menu

nou-nav

nou-next

<nou-next></nou-next>
<nou-next disable></nou-next>
<nou-next success></nou-next>

nou-pager

<nou-pager v-model="currentPage" :size="10" :total="100" @change="getList"/>

nou-select

<nou-select v-model="selected" placeholder="please select" :options="options"/>

nou-tab

<nou-tab v-model="selectedTab" :tabs="tabs"></nou-tab>

nou-table

<nou-table :data="tableData">
      <nou-table-col prop="a" label="a"></nou-table-col>
      <nou-table-col prop="b" label="b"></nou-table-col>
      <nou-table-col prop="c" label="c"></nou-table-col>
      <nou-table-col prop="d" label="d"></nou-table-col>
</nou-table>
props:
loading-Boolean
sideDecorateWidth-Number-left/right empty col width
minWidth-String-table min-width

nou-toast

showToast() {
  this.$toast('toast contain');
}
showUniqueToast() {
  this.$toast('only one toast same time', 'toast id');
}

todo

• [] complete demo and components of readme
• [] fix eslint: import/resolver, log in console
• [] handle border-box;split padding and width;
• [] remove style scoped
• [] 主题方案
• [] css后编译
• [] iconfont、字体 内置？

tips

only form item use border-box no font file provide