`;
-exports[`renders ./components/input/demo/tooltip.md correctly 1`] = `
`;
+exports[`renders ./components/input/demo/textarea-resize.md correctly 1`] = `
`;
+
+exports[`renders ./components/input/demo/tooltip.md correctly 1`] = `
`;
diff --git a/components/input/calculateNodeHeight.js b/components/input/calculateNodeHeight.js
index c1dcf48ab..12c194e23 100644
--- a/components/input/calculateNodeHeight.js
+++ b/components/input/calculateNodeHeight.js
@@ -5,15 +5,15 @@
*/
const HIDDEN_TEXTAREA_STYLE = `
-min-height:0 !important;
-max-height:none !important;
-height:0 !important;
-visibility:hidden !important;
-overflow:hidden !important;
-position:absolute !important;
-z-index:-1000 !important;
-top:0 !important;
-right:0 !important
+ min-height:0 !important;
+ max-height:none !important;
+ height:0 !important;
+ visibility:hidden !important;
+ overflow:hidden !important;
+ position:absolute !important;
+ z-index:-1000 !important;
+ top:0 !important;
+ right:0 !important
`
const SIZING_STYLE = [
@@ -38,11 +38,9 @@ const computedStyleCache = {}
let hiddenTextarea
function calculateNodeStyling (node, useCache = false) {
- const nodeRef = (
- node.getAttribute('id') ||
- node.getAttribute('data-reactid') ||
- node.getAttribute('name')
- )
+ const nodeRef = (node.getAttribute('id') ||
+ node.getAttribute('data-reactid') ||
+ node.getAttribute('name'))
if (useCache && computedStyleCache[nodeRef]) {
return computedStyleCache[nodeRef]
@@ -50,25 +48,20 @@ function calculateNodeStyling (node, useCache = false) {
const style = window.getComputedStyle(node)
- const boxSizing = (
+ const boxSizing =
style.getPropertyValue('box-sizing') ||
- style.getPropertyValue('-moz-box-sizing') ||
- style.getPropertyValue('-webkit-box-sizing')
- )
+ style.getPropertyValue('-moz-box-sizing') ||
+ style.getPropertyValue('-webkit-box-sizing')
- const paddingSize = (
+ const paddingSize =
parseFloat(style.getPropertyValue('padding-bottom')) +
- parseFloat(style.getPropertyValue('padding-top'))
- )
+ parseFloat(style.getPropertyValue('padding-top'))
- const borderSize = (
+ const borderSize =
parseFloat(style.getPropertyValue('border-bottom-width')) +
- parseFloat(style.getPropertyValue('border-top-width'))
- )
+ parseFloat(style.getPropertyValue('border-top-width'))
- const sizingStyle = SIZING_STYLE
- .map(name => `${name}:${style.getPropertyValue(name)}`)
- .join(';')
+ const sizingStyle = SIZING_STYLE.map(name => `${name}:${style.getPropertyValue(name)}`).join(';')
const nodeInfo = {
sizingStyle,
@@ -105,10 +98,10 @@ export default function calculateNodeHeight (
// Copy all CSS properties that have an impact on the height of the content in
// the textbox
- const {
- paddingSize, borderSize,
- boxSizing, sizingStyle,
- } = calculateNodeStyling(uiTextNode, useCache)
+ const { paddingSize, borderSize, boxSizing, sizingStyle } = calculateNodeStyling(
+ uiTextNode,
+ useCache,
+ )
// Need to have the overflow attribute to hide the scrollbar otherwise
// text-lines will not calculated properly as the shadow will technically be
@@ -116,22 +109,22 @@ export default function calculateNodeHeight (
hiddenTextarea.setAttribute('style', `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`)
hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || ''
- let minHeight = -Infinity
- let maxHeight = Infinity
+ let minHeight = Number.MIN_SAFE_INTEGER
+ let maxHeight = Number.MAX_SAFE_INTEGER
let height = hiddenTextarea.scrollHeight
let overflowY
if (boxSizing === 'border-box') {
- // border-box: add border, since height = content + padding + border
+ // border-box: add border, since height = content + padding + border
height = height + borderSize
} else if (boxSizing === 'content-box') {
- // remove padding, since height = content
+ // remove padding, since height = content
height = height - paddingSize
}
if (minRows !== null || maxRows !== null) {
- // measure height of a textarea with a single row
- hiddenTextarea.value = ''
+ // measure height of a textarea with a single row
+ hiddenTextarea.value = ' '
const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize
if (minRows !== null) {
minHeight = singleRowHeight * minRows
@@ -150,6 +143,7 @@ export default function calculateNodeHeight (
}
}
// Remove scroll bar flash when autosize without maxRows
+ // donot remove in vue
if (!maxRows) {
overflowY = 'hidden'
}
diff --git a/components/input/demo/textarea-resize.md b/components/input/demo/textarea-resize.md
new file mode 100644
index 000000000..b853cd8e7
--- /dev/null
+++ b/components/input/demo/textarea-resize.md
@@ -0,0 +1,28 @@
+
+#### 文本域
+用于多行输入。
+
+
+
+#### TextArea
+For multi-line input.
+
+
+```html
+
+
+
+ Auto Resize: {String(autoResize)}
+
+
+
+
+```
diff --git a/components/input/style/index.less b/components/input/style/index.less
index 0d93f4343..25bac308a 100644
--- a/components/input/style/index.less
+++ b/components/input/style/index.less
@@ -1,6 +1,6 @@
-@import "../../style/themes/default";
-@import "../../style/mixins/index";
-@import "./mixin";
+@import '../../style/themes/default';
+@import '../../style/mixins/index';
+@import './mixin';
// Input styles
.@{ant-prefix}-input {
@@ -11,7 +11,7 @@
//== Style for input-group: input with label, with button or dropdown...
.@{ant-prefix}-input-group {
.reset-component;
- .input-group(~"@{ant-prefix}-input");
+ .input-group(~'@{ant-prefix}-input');
&-wrapper {
display: inline-block;
vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
@@ -22,12 +22,12 @@
// Input with affix: prefix or suffix
.@{ant-prefix}-input-affix-wrapper {
.reset-component;
- .input-affix-wrapper(~"@{ant-prefix}-input");
+ .input-affix-wrapper(~'@{ant-prefix}-input');
// https://github.com/ant-design/ant-design/issues/6144
.@{ant-prefix}-input {
- min-height: 100%; // use min-height, assume that no smaller height to override
+ min-height: 100%; // use min-height, assume that no smaller height to override
}
}
-@import "./search-input";
+@import './search-input';
diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less
index 5f8ffaa33..d782fa35f 100644
--- a/components/input/style/mixin.less
+++ b/components/input/style/mixin.less
@@ -1,5 +1,5 @@
-@import "../../style/themes/default";
-@import "../../style/mixins/index";
+@import '../../style/themes/default';
+@import '../../style/mixins/index';
@input-affix-width: 19px;
@@ -18,16 +18,16 @@
// input status
// == when focus or actived
.active(@color: @outline-color) {
- border-color: ~`colorPalette("@{color}", 5)`;
+ border-color: ~`colorPalette('@{color}', 5) `;
outline: 0;
box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, 20%);
- border-right-width: 1px !important;
+ border-right-width: @border-width-base !important;
}
// == when hoverd
.hover(@color: @input-hover-border-color) {
- border-color: ~`colorPalette("@{color}", 5)`;
- border-right-width: 1px !important;
+ border-color: ~`colorPalette('@{color}', 5) `;
+ border-right-width: @border-width-base !important;
}
.disabled() {
@@ -55,7 +55,7 @@
border: @border-width-base @border-style-base @input-border-color;
border-radius: @border-radius-base;
.placeholder(); // Reset placeholder
- transition: all .3s;
+ transition: all 0.3s;
&:hover {
.hover();
@@ -74,7 +74,7 @@
max-width: 100%; // prevent textearea resize from coming out of its container
height: auto;
vertical-align: bottom;
- transition: all .3s, height 0s;
+ transition: all 0.3s, height 0s;
min-height: @input-height-base;
}
@@ -97,13 +97,13 @@
width: 100%;
// Undo padding and float of grid classes
- &[class*="col-"] {
+ &[class*='col-'] {
float: none;
padding-left: 0;
padding-right: 0;
}
- > [class*="col-"] {
+ > [class*='col-'] {
padding-right: 8px;
&:last-child {
padding-right: 0;
@@ -156,7 +156,7 @@
border: @border-width-base @border-style-base @input-border-color;
border-radius: @border-radius-base;
position: relative;
- transition: all .3s;
+ transition: all 0.3s;
// Reset Select's style in addon
.@{ant-prefix}-select {
@@ -181,7 +181,7 @@
// https://github.com/ant-design/ant-design/issues/3714
> i:only-child:after {
position: absolute;
- content: "";
+ content: '';
top: 0;
left: 0;
right: 0;
@@ -267,28 +267,26 @@
&-wrap,
> .@{inputClass} {
&:not(:first-child):not(:last-child) {
- border-right-width: 1px;
- border-right-color: transparent;
+ border-right-width: @border-width-base;
&:hover {
- .hover();
+ z-index: 1;
}
&:focus {
- .active();
+ z-index: 1;
}
}
}
& > * {
border-radius: 0;
- border-right-width: 0;
vertical-align: top; // https://github.com/ant-design/ant-design-pro/issues/139
float: none;
display: inline-block;
}
- // https://github.com/ant-design/ant-design/issues/11863
- & > span:not(:last-child) > .@{inputClass} {
- border-right-width: 0;
+ & > *:not(:last-child) {
+ border-right-width: @border-width-base;
+ margin-right: -@border-width-base;
}
// Undo float for .ant-input-group .ant-input
@@ -304,13 +302,12 @@
& > .@{ant-prefix}-mention-wrapper .@{ant-prefix}-mention-editor,
& > .@{ant-prefix}-time-picker .@{ant-prefix}-time-picker-input {
border-radius: 0;
- border-right-width: 1px;
- border-right-color: transparent;
+ border-right-width: @border-width-base;
&:hover {
- .hover();
+ z-index: 1;
}
&:focus {
- .active();
+ z-index: 1;
}
}
@@ -335,17 +332,7 @@
& > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input {
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
- border-right-width: 1px;
- border-right-color: @input-border-color;
- &:hover {
- .hover();
- }
- &:focus {
- .active();
- .@{ant-prefix}-cascader-input {
- .active();
- }
- }
+ border-right-width: @border-width-base;
}
// https://github.com/ant-design/ant-design/issues/12493
@@ -365,13 +352,14 @@
}
.@{inputClass} {
- position: static;
+ position: relative;
}
.@{inputClass}-prefix,
.@{inputClass}-suffix {
position: absolute;
top: 50%;
+ z-index: 2;
transform: translateY(-50%);
line-height: 0;
color: @input-color;
diff --git a/components/input/style/search-input.less b/components/input/style/search-input.less
index 9d77b7d1f..057b08ef8 100644
--- a/components/input/style/search-input.less
+++ b/components/input/style/search-input.less
@@ -1,15 +1,15 @@
-@import "../../style/themes/default";
-@import "../../style/mixins/index";
-@import "../../button/style/mixin";
-@import "./mixin";
+@import '../../style/themes/default';
+@import '../../style/mixins/index';
+@import '../../button/style/mixin';
+@import './mixin';
-@search-prefix: ~"@{ant-prefix}-input-search";
+@search-prefix: ~'@{ant-prefix}-input-search';
.@{search-prefix} {
&-icon {
color: @text-color-secondary;
cursor: pointer;
- transition: all .3s;
+ transition: all 0.3s;
&:hover {
color: #333;
}
diff --git a/components/layout/Sider.jsx b/components/layout/Sider.jsx
index 5914821bb..0b909895c 100644
--- a/components/layout/Sider.jsx
+++ b/components/layout/Sider.jsx
@@ -77,18 +77,6 @@ export default {
collapsedWidth: 80,
}),
- // static childContextTypes = {
- // siderCollapsed: PropTypes.bool,
- // collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
- // };
-
- // static contextTypes = {
- // siderHook: PropTypes.object,
- // };
-
- // private mql: MediaQueryList;
- // private uniqueId: string;
-
data () {
this.uniqueId = generateId('ant-sider-')
let matchMedia
diff --git a/components/layout/index.en-US.md b/components/layout/index.en-US.md
index 766f84205..5b0e2dfdc 100644
--- a/components/layout/index.en-US.md
+++ b/components/layout/index.en-US.md
@@ -34,7 +34,7 @@ The sidebar.
| breakpoint | [breakpoints](/ant-desing-vue/components/grid#api) of the responsive layout | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - |
| class | container className | string | - |
| collapsed(v-model) | to set the current status | boolean | - |
-| collapsedWidth | width of the collapsed sidebar, by setting to `0` a special trigger will appear | number | 64 |
+| collapsedWidth | width of the collapsed sidebar, by setting to `0` a special trigger will appear | number | 80 |
| collapsible | whether can be collapsed | boolean | false |
| defaultCollapsed | to set the initial status | boolean | false |
| reverseArrow | reverse direction of arrow, for a sider that expands from the right | boolean | false |
diff --git a/components/layout/index.zh-CN.md b/components/layout/index.zh-CN.md
index f2769b1f3..ab1d407ed 100644
--- a/components/layout/index.zh-CN.md
+++ b/components/layout/index.zh-CN.md
@@ -34,7 +34,7 @@
| breakpoint | 触发响应式布局的[断点](/ant-design-vue/components/grid#API) | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - |
| class | 容器 class | string | - |
| collapsed(v-model) | 当前收起状态 | boolean | - |
-| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 64 |
+| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 80 |
| collapsible | 是否可收起 | boolean | false |
| defaultCollapsed | 是否默认收起 | boolean | false |
| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false |
diff --git a/components/layout/style/index.less b/components/layout/style/index.less
index 2bfa089a5..ed2fca114 100644
--- a/components/layout/style/index.less
+++ b/components/layout/style/index.less
@@ -1,7 +1,7 @@
-@import "../../style/themes/default";
-@import "../../style/mixins/index";
+@import '../../style/themes/default';
+@import '../../style/mixins/index';
-@layout-prefix-cls: ~"@{ant-prefix}-layout";
+@layout-prefix-cls: ~'@{ant-prefix}-layout';
.@{layout-prefix-cls} {
display: flex;
@@ -50,7 +50,7 @@
}
&-sider {
- transition: all .2s;
+ transition: all 0.2s;
position: relative;
background: @layout-sider-background;
@@ -84,7 +84,7 @@
color: @layout-trigger-color;
background: @layout-trigger-background;
z-index: 1;
- transition: all .2s;
+ transition: all 0.2s;
}
&-zero-width {
@@ -105,7 +105,7 @@
font-size: @layout-zero-trigger-width / 2;
border-radius: 0 @border-radius-base @border-radius-base 0;
cursor: pointer;
- transition: background .3s ease;
+ transition: background 0.3s ease;
&:hover {
background: tint(@layout-sider-background, 10%);
diff --git a/components/list/__tests__/__snapshots__/empty.test.js.snap b/components/list/__tests__/__snapshots__/empty.test.js.snap
index c2c5b6d91..ea1877936 100644
--- a/components/list/__tests__/__snapshots__/empty.test.js.snap
+++ b/components/list/__tests__/__snapshots__/empty.test.js.snap
@@ -1,3 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`List renders empty list 1`] = `
`;
+exports[`List renders empty list 1`] = `
+
+`;
diff --git a/components/list/demo/infinite-load.md b/components/list/demo/infinite-load.md
index cbf9119dc..d7503092c 100644
--- a/components/list/demo/infinite-load.md
+++ b/components/list/demo/infinite-load.md
@@ -46,12 +46,12 @@ export default {
}
},
beforeMount () {
- this.getData((res) => {
+ this.fetchData((res) => {
this.data = res.results
})
},
methods: {
- getData (callback) {
+ fetchData (callback) {
reqwest({
url: fakeDataUrl,
type: 'json',
@@ -71,7 +71,7 @@ export default {
this.loading = false
return
}
- this.getData((res) => {
+ this.fetchData((res) => {
this.data = data.concat(res.results)
this.loading = false
})
diff --git a/components/list/demo/infinite-virtualized-load.md b/components/list/demo/infinite-virtualized-load.md
index d30b85279..1322ea8cd 100644
--- a/components/list/demo/infinite-virtualized-load.md
+++ b/components/list/demo/infinite-virtualized-load.md
@@ -48,12 +48,12 @@ export default {
}
},
beforeMount () {
- this.getData((res) => {
+ this.fetchData((res) => {
this.data = res.results.map((item, index) => ({ ...item, index }))
})
},
methods: {
- getData (callback) {
+ fetchData (callback) {
reqwest({
url: fakeDataUrl,
type: 'json',
@@ -73,7 +73,7 @@ export default {
this.loading = false
return
}
- this.getData((res) => {
+ this.fetchData((res) => {
this.data = data.concat(res.results).map((item, index) => ({ ...item, index }))
this.loading = false
})
diff --git a/components/list/demo/test.vue b/components/list/demo/test.vue
deleted file mode 100644
index 922a207af..000000000
--- a/components/list/demo/test.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-
diff --git a/components/list/index.jsx b/components/list/index.jsx
index 5c49b418a..170af2a1e 100644
--- a/components/list/index.jsx
+++ b/components/list/index.jsx
@@ -39,7 +39,10 @@ export const ListProps = () => ({
itemLayout: PropTypes.string,
loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
loadMore: PropTypes.any,
- pagination: PaginationConfig(),
+ pagination: PropTypes.oneOfType([
+ PropTypes.shape(PaginationConfig()).loose,
+ PropTypes.bool,
+ ]),
prefixCls: PropTypes.string,
rowKey: PropTypes.any,
renderItem: PropTypes.any,
diff --git a/components/list/style/index.less b/components/list/style/index.less
index 4546f627a..45520433c 100644
--- a/components/list/style/index.less
+++ b/components/list/style/index.less
@@ -1,7 +1,7 @@
-@import "../../style/themes/default";
-@import "../../style/mixins/index";
+@import '../../style/themes/default';
+@import '../../style/mixins/index';
-@list-prefix-cls: ~"@{ant-prefix}-list";
+@list-prefix-cls: ~'@{ant-prefix}-list';
.@{list-prefix-cls} {
.reset-component;
@@ -53,7 +53,7 @@
line-height: 22px;
> a {
color: @text-color;
- transition: all .3s;
+ transition: all 0.3s;
&:hover {
color: @primary-color;
}
diff --git a/components/locale-provider/LocaleReceiver.jsx b/components/locale-provider/LocaleReceiver.jsx
index b65196ae7..65b815dd6 100644
--- a/components/locale-provider/LocaleReceiver.jsx
+++ b/components/locale-provider/LocaleReceiver.jsx
@@ -1,9 +1,10 @@
import PropTypes from '../_util/vue-types'
+import defaultLocaleData from './default'
export default {
props: {
- componentName: PropTypes.string,
+ componentName: PropTypes.string.def('global'),
defaultLocale: PropTypes.oneOfType([
PropTypes.object,
PropTypes.func,
@@ -16,10 +17,12 @@ export default {
methods: {
getLocale () {
const { componentName, defaultLocale } = this
+ const locale = defaultLocale || defaultLocaleData[componentName || 'global']
const { antLocale } = this.localeData
- const localeFromContext = antLocale && antLocale[componentName]
+
+ const localeFromContext = componentName && antLocale ? antLocale[componentName] : {}
return {
- ...(typeof defaultLocale === 'function' ? defaultLocale() : defaultLocale),
+ ...(typeof locale === 'function' ? locale() : locale),
...(localeFromContext || {}),
}
},
@@ -29,7 +32,7 @@ export default {
const localeCode = antLocale && antLocale.locale
// Had use LocaleProvide but didn't set locale
if (antLocale && antLocale.exist && !localeCode) {
- return 'en-us'
+ return defaultLocaleData.locale
}
return localeCode
},
diff --git a/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap b/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
index 83ce94898..f5947ff8c 100644
--- a/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
@@ -21,10 +21,10 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
@@ -32,12 +32,12 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `