2019-06-17 19:52:16 +08:00
|
|
|
# naive-ui
|
|
|
|
|
TuSimple Vue-Based Frontend Component Library
|
2019-07-10 11:42:46 +08:00
|
|
|
## Documentation
|
2019-07-10 14:08:16 +08:00
|
|
|
[http://***REMOVED***/#/start](http://***REMOVED***/#/start)
|
|
|
|
|
## Repository
|
|
|
|
|
[https://***REMOVED***/naive-ui/tree/develop](https://***REMOVED***/naive-ui/tree/develop)
|
2019-07-10 11:42:46 +08:00
|
|
|
## Develop Guidelines
|
|
|
|
|
### Git Commit Message Style
|
2019-07-10 14:16:25 +08:00
|
|
|
You **MUST** follow [Angular Commit Format](https://gist.github.com/brianclements/841ea7bffdb01346392c).
|
2019-07-10 11:42:46 +08:00
|
|
|
|
|
|
|
|
If you want see some example, see [Angular Commits on Github](https://github.com/angular/angular/commits/master).
|
|
|
|
|
### Code Styles
|
|
|
|
|
#### Javascript Style
|
2019-07-10 14:16:25 +08:00
|
|
|
You **MUST** follow [Standard JS](https://standardjs.com/).
|
2019-07-10 11:42:46 +08:00
|
|
|
#### SCSS Style
|
2019-07-10 14:18:00 +08:00
|
|
|
Run `npm run lint-style` to check styles.
|
2019-07-10 11:42:46 +08:00
|
|
|
#### Check Both
|
|
|
|
|
Run `npm run lint`
|
|
|
|
|
You **MUST** fix all lint warnings and errors before you push your branch.
|
|
|
|
|
### Unit test
|
|
|
|
|
If you create a component, you **MUST** add unit test for it.
|
|
|
|
|
|
|
|
|
|
Run `npm run test` to test all components.
|
|
|
|
|
Run `npm run test-cov` to test all components and see detailed test coverage report.
|
|
|
|
|
|
|
|
|
|
## Want to see how component works
|
2019-07-22 19:14:47 +08:00
|
|
|
1. Run `npm run dev`
|
2019-07-10 11:18:19 +08:00
|
|
|
2. Open `http://localhost:8086/` in browser.
|
2019-07-10 11:42:46 +08:00
|
|
|
## Want to add your own component
|
2019-07-10 14:49:20 +08:00
|
|
|
There is no guideline for now. If you want to know how to do it, you can explore by yourself or ask `lecong.zhang@tusimple.ai`.
|
2019-07-10 11:42:46 +08:00
|
|
|
## Publish a new version
|
|
|
|
|
1. You **MUST** change your version according to [semver](https://semver.org/)
|
2019-07-10 11:18:19 +08:00
|
|
|
2. `npm run release`
|
2019-07-10 11:42:46 +08:00
|
|
|
3. You **MAY** publish documentation by running `npm run release-doc`
|
|
|
|
|
## Installation & Usage
|
|
|
|
|
First install it.
|
|
|
|
|
```
|
|
|
|
|
npm install --save-dev naive-ui
|
|
|
|
|
```
|
|
|
|
|
Then add the following lines in you entry point js file.
|
2019-06-17 20:10:35 +08:00
|
|
|
```
|
|
|
|
|
...
|
2019-07-10 11:00:50 +08:00
|
|
|
import naiveUi from 'naive-ui'
|
|
|
|
|
import 'naive-ui/dist/lib/index.css
|
|
|
|
|
|
|
|
|
|
Vue.use(naiveUi)
|
2019-06-17 20:10:35 +08:00
|
|
|
...
|
|
|
|
|
```
|
2019-07-10 11:42:46 +08:00
|
|
|
## Component Develop Status
|
2019-07-10 15:04:08 +08:00
|
|
|
|Component|Develop status|Unit Test|Note|
|
|
|
|
|
|--|:--:|:--:|--|
|
|
|
|
|
|Alert|😍|❌||
|
|
|
|
|
|Button|😍|🆗||
|
|
|
|
|
|Checkbox|😍|🆗||
|
|
|
|
|
|DatePicker|😍|❌||
|
2019-09-03 14:13:01 +08:00
|
|
|
|TimePicker|😍|❌||
|
2019-07-10 15:04:08 +08:00
|
|
|
|GradientText|😍|🆗||
|
|
|
|
|
|Icon|😍|🆗||
|
|
|
|
|
|Input|😍|🆗||
|
|
|
|
|
|Message|😍|❌|Code clean in need|
|
|
|
|
|
|Modal|😍|❌|Code clean in need|
|
|
|
|
|
|Notification|😍|❌|Code clean in need|
|
|
|
|
|
|Pagination|😍|🆗|Unit test is not enough|
|
|
|
|
|
|Select|😍|🆗|Multiple search is not done|
|
|
|
|
|
|Switch|😍|❌||
|
2019-07-14 18:41:52 +08:00
|
|
|
|Tooltip|😍|❌||
|
|
|
|
|
|Popover|😍|❌||
|
2019-07-14 18:43:27 +08:00
|
|
|
|InputNumber|😍|❌||
|
2019-07-29 17:06:44 +08:00
|
|
|
|Radio|😍|||
|
2019-09-03 14:13:01 +08:00
|
|
|
|Tab|😍|||
|
2019-08-07 14:52:24 +08:00
|
|
|
|Badge|😍|||
|
|
|
|
|
|Steps|😍|||
|
2019-08-08 18:00:30 +08:00
|
|
|
|Tag|😍|||
|
2019-08-13 17:50:14 +08:00
|
|
|
|Divider|😍|||
|
|
|
|
|
|Popconfirm|😍|||
|
2019-08-08 18:00:30 +08:00
|
|
|
|BackTop|😍|||
|
2019-08-13 17:50:14 +08:00
|
|
|
|Progress|😍||Multiple Value|
|
|
|
|
|
|Timeline|😍|||
|
|
|
|
|
|Collapse|😍|||
|
2019-09-03 14:13:01 +08:00
|
|
|
|Cascader|😍|||
|
|
|
|
|
|Dropdown|😍|||
|
2019-08-13 17:50:14 +08:00
|
|
|
|Affix|🚧|||
|
2019-09-03 14:13:01 +08:00
|
|
|
|Transfer|🚧|||
|
|
|
|
|
|Carousel|🚧|||
|
|
|
|
|
|Grid|🚧|||
|
|
|
|
|
|Card|🚧|||
|
|
|
|
|
|Anchor|🚧|||
|
|
|
|
|
|Statistic|🚧|||
|
|
|
|
|
|Breadcrumb|🚧|||
|
|
|
|
|
|FormItem|🚧|❌||
|
|
|
|
|
|Form|🚧|❌||
|
|
|
|
|
|Table|🚧|❌|Function is not fulfilled|
|
|
|
|
|
|AutoComplete|🚧|||
|
|
|
|
|
|Slider|🚧|||
|
|
|
|
|
|TreeSelect|🚧|||
|
|
|
|
|
|Transfer|🚧|||
|
|
|
|
|
|Upload|🚧|||
|
|
|
|
|
|Empty|🚧|||
|
|
|
|
|
|Tree|🚧|||
|
|
|
|
|
|Spin|🚧|||
|
|
|
|
|
|Drawer|🚧|||
|
2019-08-13 17:50:14 +08:00
|
|
|
|
2019-07-10 11:18:19 +08:00
|
|
|
1. Z-index management on `Select` & `Tooltip` & `Modal`(Low Priority)
|
|
|
|
|
2. Full featured table component(Medium Priority)
|
|
|
|
|
3. Form component(Medium Priority)
|
2019-07-10 14:40:25 +08:00
|
|
|
4. FormItem component(High Priority)
|
|
|
|
|
5. Complete unit test for all existing components(High Priority)
|
|
|
|
|
6. Create a Markdown webpack loader to convert documentation(Low Priority)
|
|
|
|
|
7. Refactor documentation page(for code clairity)
|
2019-07-10 19:07:16 +08:00
|
|
|
8. Code refactor for some 😢 messy code(which is my bad...)
|
2019-09-03 14:13:01 +08:00
|
|
|
9. Refactor CSS use mixins(which means I should learn SCSS hard...)
|
|
|
|
|
|
|
|
|
|
## RoadMap
|
|
|
|
|
v0.3 cascader
|
|
|
|
|
v0.4 refactor popover
|
|
|
|
|
v0.5 finish all planned components
|
2019-09-03 19:18:16 +08:00
|
|
|
v0.6 add keyboard event on planned components
|
|
|
|
|
v0.7 refactor form component
|
|
|
|
|
v0.8 refactor table component
|
|
|
|
|
v0.9 fulfill props for all components
|
|
|
|
|
v0.10 split icons for components
|
|
|
|
|
v0.11 refactor css
|
|
|
|
|
v0.12 import on demand
|
|
|
|
|
v0.13 i18n
|
|
|
|
|
v0.14 unit test
|
|
|
|
|
v0.15 light theme
|
|
|
|
|
v0.16 refactor using proper html tags
|
|
|
|
|
v0.17 document formation
|
|
|
|
|
v0.18 refactor document page
|
