mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-24 12:45:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #75 from TuSimple/freestyle

Browse Source 
Freestyle
This commit is contained in:
07akioni 2020-03-03 17:48:54 +08:00 committed by GitHub Enterprise
commit 9362430055
60 changed files with 623 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
README.md
View File

@ -3,7 +3,24 @@
</p>
<h1 align="center">Naive UI</h1>
<p align="center">A style first Vue-based component library.</p>
<p align="center">A Vue UI Framework</p>
<p align="center"><b>Very Caring About Styles, Themed, Batteries Included</b></p>
<p align="center">Interesting Somehow</p>
## Documentation
[www.naiveui.com](www.naiveui.com)
[www.naiveui.com](http://www.naiveui.com)
## Features
### Very Caring About Styles
As is.
> The reason I started to build the library is I'm not satisfied the UI framework my company used. Maybe it's possible to caring about nearily all the details of an UI framework, except compatibility of IE.
### Themed
Dark theme included. Theme can be changed seamlessly.
> When you find that the UI drafts are already in dark mode, you can't start with light theme. But if you start to build a dark mode UI, sooner or later you have to build a light themed UI. As a result, Naive UI has both of them.
### Batteries Included
More than 60 components. Utils for building themed components are provided.
## License
Naive UI is licensed under the [MIT license](https://opensource.org/licenses/MIT).
Graphics resouces of `result` component is licensed under the [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/). The graphics resouces come from [Twemoji](https://github.com/twitter/twemoji) and none of them is modified.

2
demo/documentation/components/autoComplete/zhCN/index.md
View File

@ -18,7 +18,7 @@ after-select
|-|-|-|-|
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|value|`string`|`null`||
|options|`Array`|`[]`||
|options|`Array<AutoCompleteOption \| AutoCompleteOptionGroup>`|`[]`||
|placeholder|`string`|`null`||
|blur-after-select|`boolean`|`false`||
|clear-after-select|`boolean`|`false`||

8
demo/documentation/components/autoComplete/zhCN/size.md
View File

@ -1,8 +1,8 @@
# Size
# 尺寸
```html
<n-auto-complete :options="options" v-model="value" placeholder="Email" size="small" />
<n-auto-complete :options="options" v-model="value" placeholder="Email" size="medium" />
<n-auto-complete :options="options" v-model="value" placeholder="Email" size="large" />
<n-auto-complete :options="options" v-model="value" placeholder="邮箱" size="small" />
<n-auto-complete :options="options" v-model="value" placeholder="邮箱" size="medium" />
<n-auto-complete :options="options" v-model="value" placeholder="邮箱" size="large" />
```
```js
export default {

2
demo/documentation/components/button/enUS/index.md
View File

@ -18,7 +18,7 @@ debug
### Button Props
|Name|Type|Default|Description|
|-|-|-|-|
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|size|`'tiny' \| 'small' \| 'medium' \| 'large'`|`'medium'`||
|type|`'default' \| 'primary' \| 'success' \| 'info' \| 'warning' \| 'error'`|`'default'`||
|text|`boolean`|`false`||
|block|`boolean`|`false`||

2
demo/documentation/components/button/zhCN/index.md
View File

@ -18,7 +18,7 @@ debug
### Button Props
|名称|类型|默认值|说明|
|-|-|-|-|
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|size|`'tiny' \| 'small' \| 'medium' \| 'large'`|`'medium'`||
|type|`'default' \| 'primary' \| 'success' \| 'info' \| 'warning' \| 'error'`|`'default'`||
|text|`boolean`|`false`||
|block|`boolean`|`false`||

6
demo/documentation/components/cascader/zhCN/size.md
View File

@ -3,21 +3,21 @@
```html
<n-cascader
v-model="value"
placeholder="Please Select Something"
placeholder="请选些什么"
:options="options"
:leaf-only="false"
size="small"
/>
<n-cascader
v-model="value"
placeholder="Please Select Something"
placeholder="请选些什么"
:options="options"
:leaf-only="false"
size="medium"
/>
<n-cascader
v-model="value"
placeholder="Please Select Something"
placeholder="请选些什么"
:options="options"
:leaf-only="false"
size="large"

1
demo/documentation/components/dataTable/enUS/index.md
View File

@ -45,6 +45,7 @@ ajaxUsage
|row-key|`(rowData: object) => number \| string`|`null`|Generate the key of the row by row data (if you don't want to set the key)|
|bordered|`boolean`|`true`||
|single-line|`boolean`|`true`||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
## Methods
These methods can help you control table in an uncontrolled manner. However, it's not recommended to use them to implement some async operations. If async operations is needed, use table in a **controlled** manner.

1
demo/documentation/components/dataTable/zhCN/index.md
View File

@ -45,6 +45,7 @@ ajaxUsage
|row-key|`(rowData: object) => number \| string`|`null`|通过行数据创建行的 key（如果你不想给每一行加上 key）|
|bordered|`boolean`|`true`||
|single-line|`boolean`|`true`||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
## Methods
这些方法可以帮助你在非受控的状态下改变表格，但是，并不推荐在异步的状况下使用这些方法。如果需要异步操作，最好用**受控**的方式使用表格。

2
demo/documentation/components/datePicker/enUS/index.md
View File

@ -28,7 +28,7 @@ format
|clearable|`boolean`|`false`||
|disabled|`boolean`|`false`||
|type|`'date' \| 'datetime' \| 'daterange' \|'datetimerange'`|`'date`||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
### Date Type Props
|Name|Type|Default|Description|

1
demo/documentation/components/datePicker/zhCN/index.md
View File

@ -28,6 +28,7 @@ format
|clearable|`boolean`|`false`||
|disabled|`boolean`|`false`||
|type|`'date' \| 'datetime' \| 'daterange' \|'datetimerange'`|`'date`||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
### Date 类型的 Props

2
demo/documentation/components/datePicker/zhCN/size.md
View File

@ -1,5 +1,5 @@
# 尺寸
Date Picker 有 `small`、`medium` 和 `large` 尺寸。
有 `small`、`medium` 和 `large` 尺寸。
```html
<n-date-picker
v-model="timestamp"

3
demo/documentation/components/form/enUS/index.md
View File

@ -20,6 +20,7 @@ async
|model|`object`|`{}`|The object to get collected value from form items.|
|rules|`type FormRules = { [itemValidatePath: string]: FormItemRule \| Array<FormItemRule> \| FormRules }`|`{}`|The rules to validate form items.|
|show-require-mark|`boolean`|`true`|Whether to show require mark when form item is required.|
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
#### FormItemRule Type
|Property|Type|Description|
@ -45,6 +46,8 @@ async
|show-require-mark|`boolean`|`true`|Whether to show require mark when form item is required. If not set, use show-require-mark from wrapper form.|
|rule|`FormItemRule \| Array<FormItemRule>`|`null`|The rule to validate the form item. It will be merged with the rules acquired by rule-path from wrapper form's rules. It's recommend to set all rules on wrapper form.|
|first|`boolean`|`false`|Whether only to show the first validation error message.|
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
### Form Item Row Props
Accept all props from form-item & [Row](n-row#Row-Props)

7
demo/documentation/components/form/enUS/inline.md
View File

@ -1,11 +1,17 @@
# Inline Form
A Example of inline form.
```html
<n-radio-group v-model="size" name="left-size" style="margin-bottom: 12px;">
<n-radio-button value="small">小</n-radio-button>
<n-radio-button value="medium" >中</n-radio-button>
<n-radio-button value="large">大</n-radio-button>
</n-radio-group>
<n-form
inline
:label-width="80"
:model="formValue"
:rules="rules"
:size="size"
ref="form"
>
<n-form-item label="Name" path="user.name">
@ -30,6 +36,7 @@ A Example of inline form.
export default {
data () {
return {
size: 'medium',
formValue: {
user: {
name: '',

7
demo/documentation/components/form/enUS/left.md
View File

@ -1,11 +1,17 @@
# Label Placement Left
```html
<n-radio-group v-model="size" name="left-size" style="margin-bottom: 12px;">
<n-radio-button value="small">Small</n-radio-button>
<n-radio-button value="medium" >Medium</n-radio-button>
<n-radio-button value="large">Large</n-radio-button>
</n-radio-group>
<n-form
:model="model"
:rules="rules"
ref="form"
label-placement="left"
label-align="right"
:size="size"
:label-width="160"
:style="{
maxWidth: '640px'
@ -98,6 +104,7 @@
export default {
data () {
return {
size: 'medium',
model: {
inputValue: null,
textareaValue: null,

7
demo/documentation/components/form/enUS/top.md
View File

@ -1,8 +1,14 @@
# Label Placement Top
```html
<n-radio-group v-model="size" name="left-size" style="margin-bottom: 12px;">
<n-radio-button value="small">Small</n-radio-button>
<n-radio-button value="medium" >Medium</n-radio-button>
<n-radio-button value="large">Large</n-radio-button>
</n-radio-group>
<n-form
:model="model"
:rules="rules"
:size="size"
ref="form"
label-placement="top"
>
@ -103,6 +109,7 @@
export default {
data () {
return {
size: 'medium',
model: {
inputValue: null,
textareaValue: null,

2
demo/documentation/components/form/zhCN/index.md
View File

@ -22,6 +22,7 @@ validator-debug
|model|`object`|`{}`|获取表项中收集到的值的对象|
|rules|`type FormRules = { [itemValidatePath: string]: FormItemRule \| Array<FormItemRule> \| FormRules }`|`{}`|验证表项的规则|
|show-require-mark|`boolean`|`true`|在表项是必填的时候是不是展示星号|
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
#### FormItemRule Type
|属性|类型|说明|
@ -46,6 +47,7 @@ validator-debug
|show-require-mark|`boolean`|`true`|在表项是必填的时候是不是展示星号。如果没有被设定，使用外层表单的 show-require-mark|
|rule|`FormItemRule \| Array<FormItemRule>`|`null`|验证表项的规则，它会被通过 `rule-path` 从外层表单获取的规则合并来作为表项的验证规则。推荐还是在外层表单设置所有规则。|
|first|`boolean`|`false`|是否只展示首个出错信息。|
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
### Form Item Row Props
接受 Form Item & [Row](n-row#Row-Props) 所有的 Props。

7
demo/documentation/components/form/zhCN/inline.md
View File

@ -1,11 +1,17 @@
# 行内表单
一个行内表单的例子。
```html
<n-radio-group v-model="size" name="left-size" style="margin-bottom: 12px;">
<n-radio-button value="small">小</n-radio-button>
<n-radio-button value="medium" >中</n-radio-button>
<n-radio-button value="large">大</n-radio-button>
</n-radio-group>
<n-form
inline
:label-width="80"
:model="formValue"
:rules="rules"
:size="size"
ref="form"
>
<n-form-item label="姓名" path="user.name">
@ -30,6 +36,7 @@
export default {
data () {
return {
size: 'medium',
formValue: {
user: {
name: '',

7
demo/documentation/components/form/zhCN/left.md
View File

@ -1,5 +1,10 @@
# 标签左置
```html
<n-radio-group v-model="size" name="left-size" style="margin-bottom: 12px;">
<n-radio-button value="small">小</n-radio-button>
<n-radio-button value="medium" >中</n-radio-button>
<n-radio-button value="large">大</n-radio-button>
</n-radio-group>
<n-form
:model="model"
:rules="rules"
@ -7,6 +12,7 @@
label-placement="left"
label-align="right"
:label-width="160"
:size="size"
:style="{
maxWidth: '640px'
}"
@ -98,6 +104,7 @@
export default {
data () {
return {
size: 'medium',
model: {
inputValue: null,
textareaValue: null,

7
demo/documentation/components/form/zhCN/top.md
View File

@ -1,8 +1,14 @@
# 标签上置
```html
<n-radio-group v-model="size" name="top-size" style="margin-bottom: 12px;">
<n-radio-button value="small">小</n-radio-button>
<n-radio-button value="medium" >中</n-radio-button>
<n-radio-button value="large">大</n-radio-button>
</n-radio-group>
<n-form
:model="model"
:rules="rules"
:size="size"
ref="form"
label-placement="top"
>
@ -103,6 +109,7 @@
export default {
data () {
return {
size: 'medium',
model: {
inputValue: null,
textareaValue: null,

24
demo/documentation/components/progress/enUS/height.md Normal file
View File

@ -0,0 +1,24 @@
# Height & Border Radius
In case you aren't satisfied with height & border-radius.
```html
<n-progress
type="line"
:percentage="50"
:height="24"
:border-radius="4"
:fill-border-radius="0"
/>
<n-progress
type="line"
status="error"
:percentage="50"
:height="24"
border-radius="12px 0 12px 0"
fill-border-radius="12px 0 12px 0"
>A Kind of Art</n-progress>
```
```css
.n-progress {
margin-bottom: 8px;
}
```

7
demo/documentation/components/progress/enUS/index.md
View File

@ -8,6 +8,8 @@ multiple-circle
custom-indicator
color
no-indicator
height
processing
```
## Props
|Name|Type|Default|Description|
@ -24,6 +26,11 @@ no-indicator
|indicator-placement|`'inside' \| 'inside-label' \| 'outside'`|`'outside'`||
|indicator-text-color|`string`|`null`||
|circle-gap|`number`|`1`|The gap bewteen circles when type is `'multiple-circle'`, suppose viewbox size is `100`|
|height|`number`|`null`|`'line'` typed progress's height. Keep default height if not passed.|
|border-radius|`number \| string`|`null`|`'line'` typed progress's border-radius. Keep half of default height if not passed.|
|fill-border-radius|`number \| string`|`null`|`'line'` typed progress's fill's border-radius. Keep `border-radius` if not passed.|
|processing|`boolean`|`false`||
## Slots
|Name|Parameters|Description|

9
demo/documentation/components/progress/enUS/processing.md Normal file
View File

@ -0,0 +1,9 @@
# Processing
```html
<n-progress
type="line"
:percentage="60"
:indicator-placement="'inside'"
processing
/>
```

24
demo/documentation/components/progress/zhCN/height.md Normal file
View File

@ -0,0 +1,24 @@
# 高度 & 圆角
如果你对高度和圆角不满意。
```html
<n-progress
type="line"
:percentage="50"
:height="24"
:border-radius="4"
:fill-border-radius="0"
/>
<n-progress
type="line"
status="error"
:percentage="50"
:height="24"
border-radius="12px 12px 0 0"
fill-border-radius="12px 0 12px 12px"
>一种艺术</n-progress>
```
```css
.n-progress {
margin-bottom: 8px;
}
```

6
demo/documentation/components/progress/zhCN/index.md
View File

@ -8,6 +8,8 @@ multiple-circle
custom-indicator
color
no-indicator
height
processing
```
## Props
|名称|类型|默认值|说明|
@ -24,6 +26,10 @@ no-indicator
|indicator-placement|`'inside' \| 'inside-label' \| 'outside'`|`'outside'`||
|indicator-text-color|`string`|`null`||
|circle-gap|`number`|`1`|当类型是 `'multiple-circle'` 的时候圈之间的距离，假设 viewbox 的尺寸是 100|
|height|`number`|`null`|`'line'` 类型进度条的高度，不填写则维持默认高度|
|border-radius|`number \| string`|`null`|`'line'` 类型进度条的圆角半径，不填写则维持高度的一半|
|fill-border-radius|`number \| string`|`null`|`'line'` 类型进度条填充的圆角半径，不填写则维持 `border-radius`|
|processing|`boolean`|`false`||
## Slots
|名称|参数|说明|

9
demo/documentation/components/progress/zhCN/processing.md Normal file
View File

@ -0,0 +1,9 @@
# 进行时
```html
<n-progress
type="line"
:percentage="60"
:indicator-placement="'inside'"
processing
/>
```

26
demo/documentation/components/radio/enUS/buttonGroup.md
View File

@ -2,31 +2,7 @@
Sometimes a radio button group looks more elegant.
```html
<div style="margin-bottom: 12px;">
<n-radio-group v-model="value" name="radiobuttongroup">
<n-radio-button
v-for="song in songs"
:key="song.value"
:value="song.value"
:disabled="(song.label === 'Live Forever' && disabled1 || song.label === 'Shakermaker' && disabled2)"
>
{{ song.label }}
</n-radio-button>
</n-radio-group>
</div>
<div style="margin-bottom: 12px;">
<n-radio-group v-model="value" name="radiobuttongroup" size="medium">
<n-radio-button
v-for="song in songs"
:key="song.value"
:value="song.value"
:disabled="(song.label === 'Live Forever' && disabled1 || song.label === 'Shakermaker' && disabled2)"
>
{{ song.label }}
</n-radio-button>
</n-radio-group>
</div>
<div style="margin-bottom: 12px;">
<n-radio-group v-model="value" name="radiobuttongroup" size="large">
<n-radio-group v-model="value" name="radiobuttongroup1">
<n-radio-button
v-for="song in songs"
:key="song.value"

2
demo/documentation/components/radio/enUS/index.md
View File

@ -6,6 +6,7 @@ When I was young, I was fond of listening to the radio, such as FM 106.8 or FM 9
basic
group
button-group
size
```
## V-model
### Radio V-model
@ -42,6 +43,7 @@ button-group
|size|`'small' \| 'medium' \| 'large'`|`small`||
|value|`string \| number \| boolean`|`null`||
|disabled|`boolean`|`false`||
|size|`'small' \| 'medium' \| 'large'`|`'small'`||
## Events
### Radio, Radio Button Events

75
demo/documentation/components/radio/enUS/size.md Normal file
View File

@ -0,0 +1,75 @@
# Size
Choose whatever you want.
```html
<div style="margin-bottom: 12px;">
<n-radio-group v-model="value" name="radiobuttongroup2" size="medium">
<n-radio-button
v-for="song in songs"
:key="song.value"
:value="song.value"
:disabled="(song.label === 'Live Forever' && disabled1 || song.label === 'Shakermaker' && disabled2)"
>
{{ song.label }}
</n-radio-button>
</n-radio-group>
</div>
<div style="margin-bottom: 12px;">
<n-radio-group v-model="value" name="radiobuttongroup3" size="large">
<n-radio-button
v-for="song in songs"
:key="song.value"
:value="song.value"
:disabled="(song.label === 'Live Forever' && disabled1 || song.label === 'Shakermaker' && disabled2)"
>
{{ song.label }}
</n-radio-button>
</n-radio-group>
</div>
<n-checkbox
v-model="disabled2"
style="margin-right: 12px;"
>
禁用 Shakemaker
</n-checkbox>
<n-checkbox
v-model="disabled1"
>
禁用 Live Forever
</n-checkbox>
```
```js
export default {
data () {
return {
value: null,
disabled2: false,
disabled1: false,
songs: [
{
value: 'Rock\'n\'Roll Star',
label: 'Rock\'n\'Roll Star'
},
{
value: 'Shakermaker',
label: 'Shakermaker'
},
{
value: 'Live Forever',
label: 'Live Forever'
},
{
value: 'Up in the Sky',
label: 'Up in the Sky'
},
{
value: '...',
label: '...'
}
].map(s => {
s.value = s.value.toLowerCase()
return s
})
}
}
}
```

24
demo/documentation/components/radio/zhCN/buttonGroup.md
View File

@ -13,30 +13,6 @@
</n-radio-button>
</n-radio-group>
</div>
<div style="margin-bottom: 12px;">
<n-radio-group v-model="value" name="radiobuttongroup" size="medium">
<n-radio-button
v-for="song in songs"
:key="song.value"
:value="song.value"
:disabled="(song.label === 'Live Forever' && disabled1 || song.label === 'Shakermaker' && disabled2)"
>
{{ song.label }}
</n-radio-button>
</n-radio-group>
</div>
<div style="margin-bottom: 12px;">
<n-radio-group v-model="value" name="radiobuttongroup" size="large">
<n-radio-button
v-for="song in songs"
:key="song.value"
:value="song.value"
:disabled="(song.label === 'Live Forever' && disabled1 || song.label === 'Shakermaker' && disabled2)"
>
{{ song.label }}
</n-radio-button>
</n-radio-group>
</div>
<n-checkbox
v-model="disabled2"
style="margin-right: 12px;"

2
demo/documentation/components/radio/zhCN/index.md
View File

@ -6,6 +6,7 @@
basic
group
button-group
size
```
## V-model
### Radio V-model
@ -34,6 +35,7 @@ button-group
|checked-value|`string \| number \| boolean`|`null`||
|value|`string \| number \| boolean`|`null`||
|disabled|`boolean`|`false`||
|size|`'small' \| 'medium' \| 'large'`|`'small'`||
### Radio Group Props
|名称|类型|默认值|说明|

75
demo/documentation/components/radio/zhCN/size.md Normal file
View File

@ -0,0 +1,75 @@
# 尺寸
任君挑选。
```html
<div style="margin-bottom: 12px;">
<n-radio-group v-model="value" name="radiobuttongroup2" size="medium">
<n-radio-button
v-for="song in songs"
:key="song.value"
:value="song.value"
:disabled="(song.label === 'Live Forever' && disabled1 || song.label === 'Shakermaker' && disabled2)"
>
{{ song.label }}
</n-radio-button>
</n-radio-group>
</div>
<div style="margin-bottom: 12px;">
<n-radio-group v-model="value" name="radiobuttongroup3" size="large">
<n-radio-button
v-for="song in songs"
:key="song.value"
:value="song.value"
:disabled="(song.label === 'Live Forever' && disabled1 || song.label === 'Shakermaker' && disabled2)"
>
{{ song.label }}
</n-radio-button>
</n-radio-group>
</div>
<n-checkbox
v-model="disabled2"
style="margin-right: 12px;"
>
禁用 Shakemaker
</n-checkbox>
<n-checkbox
v-model="disabled1"
>
禁用 Live Forever
</n-checkbox>
```
```js
export default {
data () {
return {
value: null,
disabled2: false,
disabled1: false,
songs: [
{
value: 'Rock\'n\'Roll Star',
label: 'Rock\'n\'Roll Star'
},
{
value: 'Shakermaker',
label: 'Shakermaker'
},
{
value: 'Live Forever',
label: 'Live Forever'
},
{
value: 'Up in the Sky',
label: 'Up in the Sky'
},
{
value: '...',
label: '...'
}
].map(s => {
s.value = s.value.toLowerCase()
return s
})
}
}
}
```

1
demo/documentation/components/timePicker/enUS/index.md
View File

@ -21,6 +21,7 @@ format
|is-hour-disabled|`(hour: number) => boolean`|`() => false`||
|is-minute-disabled|`(minute: number, hour: number) => boolean`|`() => false`||
|is-second-disabled|`(second: number, minute: number, hour: number) => boolean`|`() => false`||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
## Events
|Name|Parameters|Description|

1
demo/documentation/components/timePicker/zhCN/index.md
View File

@ -22,6 +22,7 @@ format
|is-hour-disabled|`(hour: number) => boolean`|`() => false`||
|is-minute-disabled|`(minute: number, hour: number) => boolean`|`() => false`||
|is-second-disabled|`(second: number, minute: number, hour: number) => boolean`|`() => false`||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
## Events
|名称|参数|说明|

2
demo/documentation/components/timePicker/zhCN/size.md
View File

@ -1,5 +1,5 @@
# 尺寸
Time Picker 可以是 `small`、`medium` 或 `large` 尺寸。
可以是 `small`、`medium` 或 `large` 尺寸。
```html
<n-time-picker
v-model="timestamp"

3
demo/documentation/components/transfer/enUS/index.md
View File

@ -5,6 +5,7 @@ Left, right, left, right... As a boring guy, I can play it all day.
```demo
basic
large-data
size
filterable
```
## V-model
@ -25,6 +26,8 @@ filterable
|source-filter-placeholder|`string`|`null`||
|target-filter-placeholder|`string`|`null`||
|filter|`(pattern: string, option: TransferOption, from: 'source' \| 'target') => boolean`|A basic label string match function||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
### TransferOption Type
|Property|Type|Description|

43
demo/documentation/components/transfer/enUS/size.md Normal file
View File

@ -0,0 +1,43 @@
# Size
They doesn't look harmonious.
```html
<n-transfer
ref="transfer"
v-model="value"
:options="options"
size="small"
/>
<n-transfer
ref="transfer"
v-model="value"
:options="options"
size="large"
/>
```
```js
function createOptions () {
return Array.apply(null, { length: 20 }).map((v, i) => ({
label: 'Option' + i,
value: i,
disabled: i % 5 === 0
}))
}
function createValues () {
return Array.apply(null, { length: 5 }).map((v, i) => i)
}
export default {
data () {
return {
options: createOptions(),
value: createValues()
}
}
}
```
```css
.n-transfer {
margin-bottom: 8px;
}
```

3
demo/documentation/components/transfer/zhCN/index.md
View File

@ -5,6 +5,7 @@
```demo
basic
large-data
size
filterable
```
## V-model
@ -25,6 +26,8 @@ filterable
|source-filter-placeholder|`string`|`null`||
|target-filter-placeholder|`string`|`null`||
|filter|`(pattern: string, option: TransferOption, from: 'source' \| 'target') => boolean`|一个简单的标签字符串匹配函数||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
### TransferOption Type
|属性|类型|说明|

43
demo/documentation/components/transfer/zhCN/size.md Normal file
View File

@ -0,0 +1,43 @@
# 尺寸
太小太大好像都不怎么好看。
```html
<n-transfer
ref="transfer"
v-model="value"
:options="options"
size="small"
/>
<n-transfer
ref="transfer"
v-model="value"
:options="options"
size="large"
/>
```
```js
function createOptions () {
return Array.apply(null, { length: 20 }).map((v, i) => ({
label: 'Option' + i,
value: i,
disabled: i % 5 === 0
}))
}
function createValues () {
return Array.apply(null, { length: 5 }).map((v, i) => i)
}
export default {
data () {
return {
options: createOptions(),
value: createValues()
}
}
}
```
```css
.n-transfer {
margin-bottom: 8px;
}
```

1
demo/documentation/components/typography/enUS/index.md
View File

@ -23,6 +23,7 @@ text
|delete|`boolean`|`false`||
|code|`boolean`|`false`||
|depth|`'primary' \| 'secondary' \| 'tertiary'`|`null`||
|as|`string`|`null`|What tag should be this component be rendered as. Won't work when `code` or `del` is set.|
### P Props
|Name|Type|Default|Description|

33
demo/documentation/components/typography/enUS/text.md
View File

@ -1,23 +1,18 @@
# Text
Use different type of text to display different kind of info.
```html
<n-text type="info">Info</n-text>
<n-text type="success">Success</n-text>
<n-text type="warning">Warning</n-text>
<n-text type="error">Error</n-text>
<n-text strong>Strong</n-text>
<n-text italic>Italic</n-text>
<n-text underline>Underline</n-text>
<n-text delete>Delete</n-text>
<n-text code>Code</n-text>
<n-text code delete>Code</n-text>
<n-text depth="primary">Primary Depth</n-text>
<n-text depth="secondary">Secondary Depth</n-text>
<n-text depth="tertiary">Tertiary Depth</n-text>
```
```css
.n-text {
display: inline-block;
margin: 0 8px 12px 0;
}
<n-text type="info">Info</n-text>&nbsp;
<n-text type="success">Success</n-text>&nbsp;
<n-text type="warning">Warning</n-text>&nbsp;
<n-text type="error">Error</n-text>&nbsp;
<n-text strong>Strong</n-text>&nbsp;
<n-text italic>Italic</n-text>&nbsp;
<n-text underline>Underline</n-text>&nbsp;
<n-text delete>Delete</n-text>&nbsp;
<n-text code>Code</n-text>&nbsp;
<n-text code delete>Code</n-text>&nbsp;
<n-text depth="primary">Primary Depth</n-text>&nbsp;
<n-text depth="secondary">Secondary Depth</n-text>&nbsp;
<n-text depth="tertiary">Tertiary Depth</n-text>&nbsp;
<n-text as="div">As Div</n-text>
```

1
demo/documentation/components/typography/zhCN/index.md
View File

@ -22,6 +22,7 @@ text
|delete|`boolean`|`false`||
|code|`boolean`|`false`||
|depth|`'primary' \| 'secondary' \| 'tertiary'`|`null`||
|as|`string`|`null`|需要被渲染为什么标签，在 `code` 和 `del` 设定的情况下不生效|
### P Props
|名称|类型|默认值|说明|

33
demo/documentation/components/typography/zhCN/text.md
View File

@ -1,23 +1,18 @@
# 文本
用不同类型的文本展示各种信息。
```html
<n-text type="info">Info</n-text>
<n-text type="success">Success</n-text>
<n-text type="warning">Warning</n-text>
<n-text type="error">Error</n-text>
<n-text strong>Strong</n-text>
<n-text italic>Italic</n-text>
<n-text underline>Underline</n-text>
<n-text delete>Delete</n-text>
<n-text code>Code</n-text>
<n-text code delete>Code</n-text>
<n-text depth="primary">Primary Depth</n-text>
<n-text depth="secondary">Secondary Depth</n-text>
<n-text depth="tertiary">Tertiary Depth</n-text>
```
```css
.n-text {
display: inline-block;
margin: 0 8px 12px 0;
}
<n-text type="info">Info</n-text>&nbsp;
<n-text type="success">Success</n-text>&nbsp;
<n-text type="warning">Warning</n-text>&nbsp;
<n-text type="error">Error</n-text>&nbsp;
<n-text strong>Strong</n-text>&nbsp;
<n-text italic>Italic</n-text>&nbsp;
<n-text underline>Underline</n-text>&nbsp;
<n-text delete>Delete</n-text>&nbsp;
<n-text code>Code</n-text>&nbsp;
<n-text code delete>Code</n-text>&nbsp;
<n-text depth="primary">Primary Depth</n-text>&nbsp;
<n-text depth="secondary">Secondary Depth</n-text>&nbsp;
<n-text depth="tertiary">Tertiary Depth</n-text>&nbsp;
<n-text as="div">作为 Div</n-text>
```

48
demo/documentation/landing/index.vue
View File

@ -2,15 +2,17 @@
{
"zh-CN": {
"start": "开始使用",
"intro1": "一个实验性的 Vue UI 框架",
"intro2": "在意样式，带主题，完整，快",
"intro3": "有点意思"
"intro1": "一个 Vue UI 框架",
"intro2": "很在意样式，带主题，比较完整",
"intro3": "有点意思",
"intro4": "换个主题"
},
"en-US": {
"start": "Getting Start",
"intro1": "An Experimental Vue UI Framework",
"intro2": "Caring About Styles, Themed, Batteries Included, Fast",
"intro3": "Intresting Somehow"
"intro1": "A Vue UI Framework",
"intro2": "Very Caring About Styles, Themed, Batteries Included",
"intro3": "Interesting Somehow",
"intro4": "Change Theme"
}
}
</i18n>
@ -41,9 +43,14 @@
<n-p style="font-size: 16px; margin-top: 0;">
{{ $t("intro3") }}
</n-p>
<n-button type="primary" :ghost="theme === 'dark'" size="large" @click="handleStartClick">
{{ $t("start") }}
</n-button>
<div>
<n-button type="default" size="large" style="margin-right: 12px;" @click="handleThemeChangeClick">
{{ $t("intro4") }}
</n-button>
<n-button type="primary" :ghost="theme === 'dark'" size="large" @click="handleStartClick">
{{ $t("start") }}
</n-button>
</div>
</div>
</div>
</template>
@ -56,6 +63,11 @@ import leftImage from './Left'
import rightImage from './Right'
export default {
inject: {
NConfigProvider: {
default: null
}
},
components: {
LandingFooter,
leftImage,
@ -63,7 +75,20 @@ export default {
},
data () {
return {
hover: false
hover: false,
themeOptions: {
dark: {
next: 'light'
},
light: {
next: 'dark'
}
}
}
},
computed: {
theme () {
return this.NConfigProvider.$parent.theme
}
},
methods: {
@ -77,6 +102,9 @@ export default {
},
handleTitleMouseLeave () {
this.hover = false
},
handleThemeChangeClick () {
this.NConfigProvider.$parent.theme = this.themeOptions[this.theme].next
}
}
}

4
demo/styles/demo.scss
View File

@ -1,3 +1,7 @@
.demo {
min-height: 600px;
}
.demo-card {
margin-bottom: 16px;
}

2
package.json
View File

@ -24,7 +24,7 @@
"test:cov": "cross-env NODE_ENV=development BABEL_ENV=test karma start test/unit/karma.conf.js && http-server test/unit/coverage"
},
"author": "lecong.zhang",
"license": "ISC",
"license": "MIT",
"publishConfig": {
"registry": "***REMOVED***"
},

12
src/Button/src/Button.vue
View File

@ -128,6 +128,9 @@ export default {
inject: {
NButtonGroup: {
default: null
},
NFormItem: {
default: null
}
},
mixins: [withapp, themeable, hollowoutable],
@ -204,8 +207,13 @@ export default {
},
computed: {
syntheticSize () {
if (this.NButtonGroup && this.NButtonGroup.size) {
return this.NButtonGroup.size
const NButtonGroup = this.NButtonGroup
if (NButtonGroup && NButtonGroup.size) {
return NButtonGroup.size
}
const NFormItem = this.NFormItem
if (NFormItem && NFormItem.syntheticSize) {
return NFormItem.syntheticSize
}
return this.size
},

5
src/Form/src/FormItem.vue
View File

@ -2,12 +2,13 @@
<div
class="n-form-item"
:class="{
[`n-form-item--${syntheticSize}-size`]: true,
[`n-${syntheticTheme}-theme`]: syntheticTheme,
[`n-form-item--${syntheticLabelPlacement}-labelled`]: syntheticLabelPlacement,
[`n-form-item--${syntheticLabelAlign}-label-aligned`]: syntheticLabelAlign,
[`n-form-item--required`]: syntheticRequired && syntheticShowRequireMark,
[`n-form-item--no-label`]: !(label || $slots.label),
[`n-form-item--has-feedback`]: hasFeedback,
[`n-${syntheticTheme}-theme`]: syntheticTheme
[`n-form-item--has-feedback`]: hasFeedback
}"
>
<label

5
src/Input/src/Input.vue
View File

@ -289,6 +289,11 @@ export default {
if (this.isTextarea && this.autosize) {
this.$nextTick().then(this.updateTextAreaStyle)
}
},
syntheticSize () {
if (this.isTextarea && this.autosize) {
this.$nextTick().then(this.updateTextAreaStyle)
}
}
},
mounted () {

4
src/Popover/src/PopoverContent.js
View File

@ -279,9 +279,9 @@ export default {
},
staticClass: 'n-popover-content',
class: {
'n-popover-content--without-arrow': !this.arrow,
'n-popover-content--no-arrow': !this.arrow,
[`n-${this.syntheticTheme}-theme`]: this.syntheticTheme,
'n-popover-content--without-shadow': !this.shadow,
'n-popover-content--no-shadow': !this.shadow,
[this.overlayClass]: this.overlayClass,
'n-popover-content--fix-width': this.width !== null || this.maxWidth !== null
},

25
src/Progress/src/main.vue
View File

@ -104,7 +104,7 @@
maxWidth: fillStyleMaxWidth + '%',
backgroundColor: safeColor,
height: styleHeight,
borderRadius: styleBorderRadius
borderRadius: styleFillBorderRadius
}"
>
<div
@ -324,6 +324,14 @@ export default {
height: {
type: Number,
default: null
},
borderRadius: {
type: [String, Number],
default: null
},
fillBorderRadius: {
type: [String, Number],
default: null
}
},
data () {
@ -337,7 +345,20 @@ export default {
return formatLength(this.height)
},
styleBorderRadius () {
if (this.height) return formatLength(this.height / 2)
if (this.borderRadius !== null) {
return formatLength(this.borderRadius)
}
if (this.height !== null) return formatLength(this.height / 2)
return null
},
styleFillBorderRadius () {
if (this.fillBorderRadius !== null) {
return formatLength(this.fillBorderRadius)
}
if (this.borderRadius !== null) {
return formatLength(this.borderRadius)
}
if (this.height !== null) return formatLength(this.height / 2)
return null
},
syntheticIndicatorPlacement () {

7
src/Transfer/src/Transfer.vue
View File

@ -3,6 +3,7 @@
class="n-transfer"
:class="{
[`n-${syntheticTheme}-theme`]: syntheticTheme,
[`n-transfer--filterable`]: filterable,
[`n-transfer--${syntheticSize}-size`]: true
}"
>
@ -419,7 +420,7 @@ export default {
}
},
watch: {
options (newOptions) {
options () {
this.initialized = false
const valueSet = this.valueSet
this.memorizedSourceOptions = this.options.filter(option => !valueSet.has(option.value))
@ -622,7 +623,7 @@ export default {
const sourceLightBar = this.$refs.sourceLightBar
if (!sourceLightBar) return
if (this.virtualScroll) {
sourceLightBar.updateLightBarTop(true, () => index * itemSize)
sourceLightBar.updateLightBarTop(true, () => index * this.itemSize)
} else {
sourceLightBar.updateLightBarTop(e.target)
}
@ -630,7 +631,7 @@ export default {
handleTargetOptionMouseEnter: debounce(function (e, index) {
const targetLightBar = this.$refs.targetLightBar
if (this.virtualScroll) {
targetLightBar.updateLightBarTop(true, () => index * itemSize)
targetLightBar.updateLightBarTop(true, () => index * this.itemSize)
} else {
targetLightBar.updateLightBarTop(e.target)
}

12
src/Typography/src/text.vue
View File

@ -29,9 +29,9 @@
'n-text--underline': underline,
[`n-text--${depth}-depth`]: depth
}"
v-on="$listeners"
><slot /></del>
<span
<component
:is="as || 'span'"
v-else
class="n-text"
:class="{
@ -45,7 +45,9 @@
'n-text--underline': underline,
[`n-text--${depth}-depth`]: depth
}"
><slot /></span>
>
<slot />
</component>
</template>
<script>
@ -89,6 +91,10 @@ export default {
return ['primary', 'secondary', 'tertiary'].includes(value)
},
default: null
},
as: {
type: String,
default: null
}
}
}

90
styles/Form.scss
View File

@ -3,6 +3,7 @@
@include b(form) {
width: 100%;
font-size: 14px;
line-height: 1.5;
@include m(inline) {
width: 100%;
display: inline-flex;
@ -17,14 +18,55 @@
}
}
$form-item-label-height: (
'small': 20px,
'medium': 22px,
'large': 24px
) !global;
@mixin form-item-size-mixin ($size) {
$form-item-feedback-font-size: (
'small': 13px,
'medium': 14px,
'large': 14px
) !global;
@include m($size + '-size') {
@include m(top-labelled) {
@include m(no-label) {
padding-top: map-get($form-item-label-height, $size);
}
@include b(form-item-label) {
font-size: map-get($--n-font-size, $size) - 1px;
height: map-get($form-item-label-height, $size);
}
}
@include m(left-labelled) {
@include b(form-item-label) {
font-size: map-get($--n-font-size, $size);
height: map-get($--n-height, $size) + 6px;
line-height: map-get($--n-height, $size) + 6px;
}
}
@include b(form-item-blank) {
min-height: map-get($--n-height, $size);
}
@include b(form-item-feedback-wrapper) {
font-size: map-get($--n-font-size, $size) - 1px;
}
}
}
@include themes-mixin {
@include b(form-item) {
@include once {
width: 100%;
@include form-item-size-mixin('small');
@include form-item-size-mixin('medium');
@include form-item-size-mixin('large');
@include m(top-labelled) {
margin-right: 18px;
@include m(no-label) {
padding-top: 24px;
padding-top: map-get($form-item-label-height, 'medium');
}
@include b(form-item-label) {
display: block;
@ -37,11 +79,9 @@
display: flex;
flex-wrap: nowrap;
@include b(form-item-label) {
line-height: 40px;
box-sizing: border-box;
padding-right: 12px;
white-space: nowrap;
height: 40px;
flex-shrink: 0;
flex-grow: 0;
}
@ -49,13 +89,29 @@
flex-grow: 1;
}
}
@include m(right-label-aligned) {
@include b(form-item-label) {
text-align: right;
&::after {
display: none;
}
}
}
@include m(left-label-aligned) {
@include b(form-item-label) {
text-align: left;
&::before {
display: none;
}
}
}
@include m(has-feedback) {
padding-bottom: 0px;
}
@include b(form-item-blank) {
padding-top: 3px;
padding-bottom: 3px;
min-height: 34px;
min-height: map-get($form-item-label-height, 'medium');
display: flex;
align-items: center;
position: relative;
@ -71,30 +127,10 @@
}
}
}
@include m(right-label-aligned) {
@include b(form-item-label) {
@include once {
text-align: right;
&::after {
display: none;
}
}
}
}
@include m(left-label-aligned) {
@include b(form-item-label) {
@include once {
text-align: left;
&::before {
display: none;
}
}
}
}
@include b(form-item-label) {
@include once {
display: inline-block;
height: 24px;
height: map-get($form-item-label-height, 'medium');
box-sizing: border-box;
font-size: 14px;
transition: color .3s $--n-ease-in-out-cubic-bezier;
@ -109,10 +145,10 @@
padding-left: 2px;
padding-top: 0px;
box-sizing: border-box;
min-height: 20px;
min-height: 1.5em;
font-size: 14px;
transform-origin: top left;
line-height: 1.25;
line-height: 1.5;
transition: color .3s $--n-ease-in-out-cubic-bezier;
@include b(form-item-feedback) {
@include fade-down-transition($name: form-item-feedback, $from-offset: -3px);

4
styles/Popover.scss
View File

@ -43,7 +43,7 @@
transform: rotate(45deg);
}
}
@include m(without-arrow) {
@include m(no-arrow) {
&[n-placement$="top-start"] {
margin-bottom: 6px;
}
@ -248,7 +248,7 @@
background-color: $--popover-background-color;
}
}
@include not-m(without-shadow) {
@include not-m(no-shadow) {
box-shadow: $--popover-box-shadow;
}
@include m(fix-width) {

7
styles/Progress.scss
View File

@ -57,7 +57,7 @@
&::after {
content: '';
background-image: $--progress-line-processing-background-image;
animation: progress-#{$type}-type-ripple 3s $--n-ease-out-cubic-bezier infinite;
animation: progress-#{$type}-type-ripple 2s $--n-ease-out-cubic-bezier infinite;
}
}
}
@ -99,7 +99,9 @@
height: 18px;
line-height: 18px;
font-size: 18px;
transition: fill .3s $--n-ease-in-out-cubic-bezier;
transition:
fill .3s $--n-ease-in-out-cubic-bezier,
color .3s $--n-ease-in-out-cubic-bezier;
@include m(as-text) {
text-align: center;
width: 40px;
@ -194,6 +196,7 @@
@include b(progress-graph-circle-rail) {
@include once {
transition: stroke .3s $--n-ease-in-out-cubic-bezier;
overflow: hidden;
}
stroke: $--progress-rail-color;
}

3
styles/Radio.scss
View File

@ -130,6 +130,9 @@
@include radio-group-size-mixin('medium');
@include radio-group-size-mixin('large');
display: inline-block;
@include b(radio) {
margin-right: 18px;
}
@include m(button-group) {
white-space: nowrap;
height: 28px;

2
styles/Tag.scss
View File

@ -3,7 +3,7 @@
@mixin tag-size-mixin($size) {
$height: map-get($--n-height, $size) - 6px;
$font-size: (
"small": 12px,
"small": 13px,
"medium": 14px,
"large": 14px
);

7
styles/Transfer.scss
View File

@ -58,6 +58,13 @@
@mixin transfer-size-mixin($size) {
@include m($size + '-size') {
@include m(filterable) {
@include b(transfer-list) {
@include b(transfer-list-body) {
height: map-get($--n-height, $size) * 5.6 + 45px;
}
}
}
@include b(transfer-list) {
@include b(transfer-list-header) {
font-size: map-get($--n-font-size, $size);

1
styles/Typography.scss
View File

@ -146,7 +146,6 @@
}
@include b(text) {
@include once {
display: inline-block;
transition: color .3s $--n-ease-in-out-cubic-bezier;
@include m(strong) {
font-weight: $--n-strong-weight;

5
think.md
View File

@ -179,12 +179,13 @@ const devtoolIsOpened = e.target === document.activeElement
56. <del>Input number 按钮样式调整</del>
57. 一部分组件在 Modal 内部的样式
58. 更新 Progress 文档
59. 为所有的数据录入组件的尺寸
59. <del>为所有的数据录入组件的尺寸</del>
60. 审核文档
61. 调整 transfer 的样式
61. <del>调整 transfer 的样式</del>
62. <del>Table cascader 差一点国际化</del>
63. Anchor 初次滚动的逻辑是不是要手动调整一下，现在位置实际上不一致
64. <del>将所有的 Typography 组件改为非 Functional 的，因为获取不到 context 本身的主题</del>
65. 搞明白 table layout 这个 css 属性是在干什么
```
Done