From 9ac47480ce6b7251e7c6bd37ea9019972fe06c3f Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 2 Mar 2020 22:41:52 +0800
Subject: [PATCH 1/8] chore: some fixes
---
README.md | 11 +++++++++--
demo/documentation/landing/index.vue | 2 +-
package.json | 2 +-
styles/Tag.scss | 2 +-
think.md | 1 +
5 files changed, 13 insertions(+), 5 deletions(-)
diff --git a/README.md b/README.md
index 6553f6df7..5b91c29a6 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,14 @@
Naive UI
-A style first Vue-based component library.
+An Experimental Vue UI Framework
+Caring About Styles, Themed, Batteries Included, Fast
+Interesting Somehow
## Documentation
-[www.naiveui.com](www.naiveui.com)
+[www.naiveui.com](http://www.naiveui.com)
+
+## License
+Naive UI is licensed under the [MIT license](https://opensource.org/licenses/MIT).
+
+Graphics resouces of `result` 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.
\ No newline at end of file
diff --git a/demo/documentation/landing/index.vue b/demo/documentation/landing/index.vue
index 2ed74fabd..92e2e88dc 100644
--- a/demo/documentation/landing/index.vue
+++ b/demo/documentation/landing/index.vue
@@ -10,7 +10,7 @@
"start": "Getting Start",
"intro1": "An Experimental Vue UI Framework",
"intro2": "Caring About Styles, Themed, Batteries Included, Fast",
- "intro3": "Intresting Somehow"
+ "intro3": "Interesting Somehow"
}
}
diff --git a/package.json b/package.json
index df7e78a00..b85617652 100644
--- a/package.json
+++ b/package.json
@@ -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***"
},
diff --git a/styles/Tag.scss b/styles/Tag.scss
index 105abb14d..17ee2ed4f 100644
--- a/styles/Tag.scss
+++ b/styles/Tag.scss
@@ -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
);
diff --git a/think.md b/think.md
index ac0ce7fe2..933320da4 100644
--- a/think.md
+++ b/think.md
@@ -185,6 +185,7 @@ const devtoolIsOpened = e.target === document.activeElement
62. Table cascader 差一点国际化
63. Anchor 初次滚动的逻辑是不是要手动调整一下，现在位置实际上不一致
64. 将所有的 Typography 组件改为非 Functional 的，因为获取不到 context 本身的主题
+65. 搞明白 table layout 这个 css 属性是在干什么
```
Done
From 0526158ff76bd7a6e80eaae361f58262f4f24023 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 2 Mar 2020 23:24:44 +0800
Subject: [PATCH 2/8] Update README.md
---
README.md | 17 ++++++++++++++---
1 file changed, 14 insertions(+), 3 deletions(-)
diff --git a/README.md b/README.md
index 5b91c29a6..bd8582140 100644
--- a/README.md
+++ b/README.md
@@ -3,14 +3,25 @@
Naive UI
-An Experimental Vue UI Framework
-Caring About Styles, Themed, Batteries Included, Fast
+A Vue UI Framework
+Very Caring About Styles, Themed, Batteries Included
Interesting Somehow
## Documentation
[www.naiveui.com](http://www.naiveui.com)
+## Features
+### Very Caring About Styles
+All of the components has well designed styles & transitions.
+> 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.
+### Well Themed
+Dark theme included. Theme can be changed seamlessly. Utils are provided for building themed components.
+> 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.
+> No carousel.
+
## License
Naive UI is licensed under the [MIT license](https://opensource.org/licenses/MIT).
-Graphics resouces of `result` 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.
\ No newline at end of file
+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.
From 622fd5d5adba6f360b59da16ee581fad68f671a7 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 2 Mar 2020 23:44:05 +0800
Subject: [PATCH 3/8] doc: intro changed
---
README.md | 9 +++---
demo/documentation/landing/index.vue | 48 ++++++++++++++++++++++------
2 files changed, 42 insertions(+), 15 deletions(-)
diff --git a/README.md b/README.md
index bd8582140..7e281c681 100644
--- a/README.md
+++ b/README.md
@@ -12,14 +12,13 @@
## Features
### Very Caring About Styles
-All of the components has well designed styles & transitions.
+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.
-### Well Themed
-Dark theme included. Theme can be changed seamlessly. Utils are provided for building themed components.
+### 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.
-> No carousel.
+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).
diff --git a/demo/documentation/landing/index.vue b/demo/documentation/landing/index.vue
index 92e2e88dc..808b6c657 100644
--- a/demo/documentation/landing/index.vue
+++ b/demo/documentation/landing/index.vue
@@ -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": "Interesting Somehow"
+ "intro1": "A Vue UI Framework",
+ "intro2": "Very Caring About Styles, Themed, Batteries Included",
+ "intro3": "Interesting Somehow",
+ "intro4": "Change Theme"
}
}
@@ -41,9 +43,14 @@
{{ $t("intro3") }}
-
- {{ $t("start") }}
-
+
+
+ {{ $t("intro4") }}
+
+
+ {{ $t("start") }}
+
+
@@ -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
}
}
}
From 07659bbbb27194e77643d2485523bc1fc5fa9c27 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Tue, 3 Mar 2020 12:40:05 +0800
Subject: [PATCH 4/8] doc: size on data input components
---
README.md | 2 +-
.../components/autoComplete/zhCN/index.md | 2 +-
.../components/autoComplete/zhCN/size.md | 8 +-
.../components/button/enUS/index.md | 2 +-
.../components/button/zhCN/index.md | 2 +-
.../components/cascader/zhCN/size.md | 6 +-
.../components/dataTable/enUS/index.md | 1 +
.../components/dataTable/zhCN/index.md | 1 +
.../components/datePicker/enUS/index.md | 2 +-
.../components/datePicker/zhCN/index.md | 1 +
.../components/datePicker/zhCN/size.md | 2 +-
.../components/radio/enUS/buttonGroup.md | 26 +------
.../components/radio/enUS/index.md | 2 +
.../components/radio/enUS/size.md | 75 +++++++++++++++++++
.../components/radio/zhCN/buttonGroup.md | 24 ------
.../components/radio/zhCN/index.md | 2 +
.../components/radio/zhCN/size.md | 75 +++++++++++++++++++
.../components/timePicker/enUS/index.md | 1 +
.../components/timePicker/zhCN/index.md | 1 +
.../components/timePicker/zhCN/size.md | 2 +-
.../components/transfer/enUS/index.md | 3 +
.../components/transfer/enUS/size.md | 43 +++++++++++
.../components/transfer/zhCN/index.md | 3 +
.../components/transfer/zhCN/size.md | 43 +++++++++++
src/Transfer/src/Transfer.vue | 6 +-
25 files changed, 269 insertions(+), 66 deletions(-)
create mode 100644 demo/documentation/components/radio/enUS/size.md
create mode 100644 demo/documentation/components/radio/zhCN/size.md
create mode 100644 demo/documentation/components/transfer/enUS/size.md
create mode 100644 demo/documentation/components/transfer/zhCN/size.md
diff --git a/README.md b/README.md
index 7e281c681..f89ecbec9 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ As is.
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.
+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).
diff --git a/demo/documentation/components/autoComplete/zhCN/index.md b/demo/documentation/components/autoComplete/zhCN/index.md
index 9a958015f..0540631c3 100644
--- a/demo/documentation/components/autoComplete/zhCN/index.md
+++ b/demo/documentation/components/autoComplete/zhCN/index.md
@@ -18,7 +18,7 @@ after-select
|-|-|-|-|
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|value|`string`|`null`||
-|options|`Array`|`[]`||
+|options|`Array`|`[]`||
|placeholder|`string`|`null`||
|blur-after-select|`boolean`|`false`||
|clear-after-select|`boolean`|`false`||
diff --git a/demo/documentation/components/autoComplete/zhCN/size.md b/demo/documentation/components/autoComplete/zhCN/size.md
index 54d483e6e..288073205 100644
--- a/demo/documentation/components/autoComplete/zhCN/size.md
+++ b/demo/documentation/components/autoComplete/zhCN/size.md
@@ -1,8 +1,8 @@
-# Size
+# 尺寸
```html
-
-
-
+
+
+
```
```js
export default {
diff --git a/demo/documentation/components/button/enUS/index.md b/demo/documentation/components/button/enUS/index.md
index 2b5840203..8ec6d8d12 100644
--- a/demo/documentation/components/button/enUS/index.md
+++ b/demo/documentation/components/button/enUS/index.md
@@ -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`||
diff --git a/demo/documentation/components/button/zhCN/index.md b/demo/documentation/components/button/zhCN/index.md
index 920d55d81..718d909b7 100644
--- a/demo/documentation/components/button/zhCN/index.md
+++ b/demo/documentation/components/button/zhCN/index.md
@@ -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`||
diff --git a/demo/documentation/components/cascader/zhCN/size.md b/demo/documentation/components/cascader/zhCN/size.md
index 63e181e62..e3c82b19f 100644
--- a/demo/documentation/components/cascader/zhCN/size.md
+++ b/demo/documentation/components/cascader/zhCN/size.md
@@ -3,21 +3,21 @@
```html
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.
diff --git a/demo/documentation/components/dataTable/zhCN/index.md b/demo/documentation/components/dataTable/zhCN/index.md
index ebdb492bb..401f2df77 100644
--- a/demo/documentation/components/dataTable/zhCN/index.md
+++ b/demo/documentation/components/dataTable/zhCN/index.md
@@ -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
这些方法可以帮助你在非受控的状态下改变表格，但是，并不推荐在异步的状况下使用这些方法。如果需要异步操作，最好用**受控**的方式使用表格。
diff --git a/demo/documentation/components/datePicker/enUS/index.md b/demo/documentation/components/datePicker/enUS/index.md
index ccdccb325..df5387424 100644
--- a/demo/documentation/components/datePicker/enUS/index.md
+++ b/demo/documentation/components/datePicker/enUS/index.md
@@ -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|
diff --git a/demo/documentation/components/datePicker/zhCN/index.md b/demo/documentation/components/datePicker/zhCN/index.md
index 99098da2d..70cff2621 100644
--- a/demo/documentation/components/datePicker/zhCN/index.md
+++ b/demo/documentation/components/datePicker/zhCN/index.md
@@ -28,6 +28,7 @@ format
|clearable|`boolean`|`false`||
|disabled|`boolean`|`false`||
|type|`'date' \| 'datetime' \| 'daterange' \|'datetimerange'`|`'date`||
+|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
### Date 类型的 Props
diff --git a/demo/documentation/components/datePicker/zhCN/size.md b/demo/documentation/components/datePicker/zhCN/size.md
index b342613f2..d43e669a5 100644
--- a/demo/documentation/components/datePicker/zhCN/size.md
+++ b/demo/documentation/components/datePicker/zhCN/size.md
@@ -1,5 +1,5 @@
# 尺寸
-Date Picker 有 `small`、`medium` 和 `large` 尺寸。
+有 `small`、`medium` 和 `large` 尺寸。
```html
-
-
- {{ song.label }}
-
-
-
-
-
-
- {{ song.label }}
-
-
-
-
-
+
+
+
+ {{ song.label }}
+
+
+
+
+
+ {{ song.label }}
+
+
+
+
+ 禁用 Shakemaker
+
+
+ 禁用 Live Forever
+
+```
+```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
+ })
+ }
+ }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/radio/zhCN/buttonGroup.md b/demo/documentation/components/radio/zhCN/buttonGroup.md
index c1c267d28..cc8b646c9 100644
--- a/demo/documentation/components/radio/zhCN/buttonGroup.md
+++ b/demo/documentation/components/radio/zhCN/buttonGroup.md
@@ -13,30 +13,6 @@
-
-
-
- {{ song.label }}
-
-
-
-
-
-
- {{ song.label }}
-
-
-
+
+
+ {{ song.label }}
+
+
+
+
+
+
+ {{ song.label }}
+
+
+
+
+ 禁用 Shakemaker
+
+
+ 禁用 Live Forever
+
+```
+```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
+ })
+ }
+ }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/timePicker/enUS/index.md b/demo/documentation/components/timePicker/enUS/index.md
index ab17f8833..79c8d0bdf 100644
--- a/demo/documentation/components/timePicker/enUS/index.md
+++ b/demo/documentation/components/timePicker/enUS/index.md
@@ -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|
diff --git a/demo/documentation/components/timePicker/zhCN/index.md b/demo/documentation/components/timePicker/zhCN/index.md
index 1538915cc..4e632aa40 100644
--- a/demo/documentation/components/timePicker/zhCN/index.md
+++ b/demo/documentation/components/timePicker/zhCN/index.md
@@ -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
|名称|参数|说明|
diff --git a/demo/documentation/components/timePicker/zhCN/size.md b/demo/documentation/components/timePicker/zhCN/size.md
index d1c0eba36..5c20801b2 100644
--- a/demo/documentation/components/timePicker/zhCN/size.md
+++ b/demo/documentation/components/timePicker/zhCN/size.md
@@ -1,5 +1,5 @@
# 尺寸
-Time Picker 可以是 `small`、`medium` 或 `large` 尺寸。
+可以是 `small`、`medium` 或 `large` 尺寸。
```html
boolean`|A basic label string match function||
+|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
+
### TransferOption Type
|Property|Type|Description|
diff --git a/demo/documentation/components/transfer/enUS/size.md b/demo/documentation/components/transfer/enUS/size.md
new file mode 100644
index 000000000..29e642369
--- /dev/null
+++ b/demo/documentation/components/transfer/enUS/size.md
@@ -0,0 +1,43 @@
+# Size
+They doesn't look harmonious.
+```html
+
+
+```
+```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;
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/transfer/zhCN/index.md b/demo/documentation/components/transfer/zhCN/index.md
index 6b7080fe3..eca6c0248 100644
--- a/demo/documentation/components/transfer/zhCN/index.md
+++ b/demo/documentation/components/transfer/zhCN/index.md
@@ -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
|属性|类型|说明|
diff --git a/demo/documentation/components/transfer/zhCN/size.md b/demo/documentation/components/transfer/zhCN/size.md
new file mode 100644
index 000000000..7cecbb009
--- /dev/null
+++ b/demo/documentation/components/transfer/zhCN/size.md
@@ -0,0 +1,43 @@
+# 尺寸
+太小太大好像都不怎么好看。
+```html
+
+
+```
+```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;
+}
+```
\ No newline at end of file
diff --git a/src/Transfer/src/Transfer.vue b/src/Transfer/src/Transfer.vue
index 25d5fd4e7..64f4dd8df 100644
--- a/src/Transfer/src/Transfer.vue
+++ b/src/Transfer/src/Transfer.vue
@@ -419,7 +419,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 +622,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 +630,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)
}
From ad435379713965ff0d53c0d97e647ec1db826096 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Tue, 3 Mar 2020 14:34:24 +0800
Subject: [PATCH 5/8] feat(form): size
---
.../components/form/enUS/index.md | 3 +
.../components/form/enUS/inline.md | 7 ++
.../components/form/enUS/left.md | 7 ++
.../documentation/components/form/enUS/top.md | 6 ++
.../components/form/zhCN/index.md | 2 +
.../components/form/zhCN/inline.md | 7 ++
.../components/form/zhCN/left.md | 7 ++
.../documentation/components/form/zhCN/top.md | 7 ++
src/Button/src/Button.vue | 12 ++-
src/Form/src/FormItem.vue | 5 +-
src/Input/src/Input.vue | 5 ++
src/Popover/src/PopoverContent.js | 4 +-
styles/Form.scss | 90 +++++++++++++------
styles/Popover.scss | 4 +-
styles/Radio.scss | 3 +
15 files changed, 134 insertions(+), 35 deletions(-)
diff --git a/demo/documentation/components/form/enUS/index.md b/demo/documentation/components/form/enUS/index.md
index 00fd6d0d1..e74e73b7f 100644
--- a/demo/documentation/components/form/enUS/index.md
+++ b/demo/documentation/components/form/enUS/index.md
@@ -20,6 +20,7 @@ async
|model|`object`|`{}`|The object to get collected value from form items.|
|rules|`type FormRules = { [itemValidatePath: string]: FormItemRule \| Array \| 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`|`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)
diff --git a/demo/documentation/components/form/enUS/inline.md b/demo/documentation/components/form/enUS/inline.md
index c06575090..91f70ff2e 100644
--- a/demo/documentation/components/form/enUS/inline.md
+++ b/demo/documentation/components/form/enUS/inline.md
@@ -1,11 +1,17 @@
# Inline Form
A Example of inline form.
```html
+
+ 小
+ 中
+ 大
+
@@ -30,6 +36,7 @@ A Example of inline form.
export default {
data () {
return {
+ size: 'medium',
formValue: {
user: {
name: '',
diff --git a/demo/documentation/components/form/enUS/left.md b/demo/documentation/components/form/enUS/left.md
index 4bc90d8ac..ca932c524 100644
--- a/demo/documentation/components/form/enUS/left.md
+++ b/demo/documentation/components/form/enUS/left.md
@@ -1,11 +1,17 @@
# Label Placement Left
```html
+
+ Small
+ Medium
+ Large
+
+ Small
+ Medium
+ Large
+
\| 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`|`null`|验证表项的规则，它会被通过 `rule-path` 从外层表单获取的规则合并来作为表项的验证规则。推荐还是在外层表单设置所有规则。|
|first|`boolean`|`false`|是否只展示首个出错信息。|
+|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
### Form Item Row Props
接受 Form Item & [Row](n-row#Row-Props) 所有的 Props。
diff --git a/demo/documentation/components/form/zhCN/inline.md b/demo/documentation/components/form/zhCN/inline.md
index b6c7ef85c..de4997d0e 100644
--- a/demo/documentation/components/form/zhCN/inline.md
+++ b/demo/documentation/components/form/zhCN/inline.md
@@ -1,11 +1,17 @@
# 行内表单
一个行内表单的例子。
```html
+
+ 小
+ 中
+ 大
+
@@ -30,6 +36,7 @@
export default {
data () {
return {
+ size: 'medium',
formValue: {
user: {
name: '',
diff --git a/demo/documentation/components/form/zhCN/left.md b/demo/documentation/components/form/zhCN/left.md
index 8e0c2c3f8..1492077de 100644
--- a/demo/documentation/components/form/zhCN/left.md
+++ b/demo/documentation/components/form/zhCN/left.md
@@ -1,5 +1,10 @@
# 标签左置
```html
+
+ 小
+ 中
+ 大
+
+ 小
+ 中
+ 大
+
@@ -103,6 +109,7 @@
export default {
data () {
return {
+ size: 'medium',
model: {
inputValue: null,
textareaValue: null,
diff --git a/src/Button/src/Button.vue b/src/Button/src/Button.vue
index bad78fc20..f703ecee2 100644
--- a/src/Button/src/Button.vue
+++ b/src/Button/src/Button.vue
@@ -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
},
diff --git a/src/Form/src/FormItem.vue b/src/Form/src/FormItem.vue
index 8ac265312..c41b694b1 100644
--- a/src/Form/src/FormItem.vue
+++ b/src/Form/src/FormItem.vue
@@ -2,12 +2,13 @@