update components

components/button/style/index.less

@@ -156,7 +156,7 @@
   }
 
   &-background-ghost&-primary {
-    .button-variant-ghost(@primary-color);
+    .button-variant-ghost(@btn-primary-bg);
   }
 
   &-background-ghost&-danger {

components/card/Card.vue

@@ -162,7 +162,7 @@
       const coverDom = cover ? <div class={`${prefixCls}-cover`}>{cover}</div> : null
       const body = (
         <div class={`${prefixCls}-body`} style={bodyStyle}>
-          {loading ? loadingBlock : <div>{children}</div>}
+          {loading ? loadingBlock : children}
         </div>
       )
       const actions = getComponentFromProp(this, 'actions')

components/dropdown/dropdown.vue

@@ -41,8 +41,7 @@ const Dropdown = {
     const overlay = $slots.overlay && $slots.overlay[0]
     // menu cannot be selectable in dropdown defaultly
     const overlayProps = overlay && getPropsData(overlay)
-    const selectable = (overlayProps && 'selectable' in overlayProps)
+    const selectable = overlayProps.selectable || false
-      ? overlayProps.selectable : false
     const fixedModeOverlay = cloneElement(overlay, {
       props: {
         mode: 'vertical',

components/style/themes/default.less

@@ -384,7 +384,18 @@
 // ---
 @tabs-card-head-background: @background-color-light;
 @tabs-card-height: 40px;
+@tabs-card-active-color: @primary-color;
 @tabs-title-font-size: @font-size-base;
+@tabs-ink-bar-bg-color: @primary-color;
+@tab-bar-margin: 0 0 16px 0;
+@tab-horizontal-margin: 0 32px 0 0;
+@tab-vertical-margin: 0 0 16px 0;
+@tab-horizontal-padding: 12px 16px;
+@tab-vertical-padding: 8px 24px;
+@tab-scrolling-size: 32px;
+@tab-highlight-color: @primary-color;
+@tab-hover-color: @primary-5;
+@tab-active-color: @primary-7;
 
 // BackTop
 // ---

components/tabs/index.vue

@@ -29,6 +29,7 @@ export default {
       },
     },
     animated: { type: [Boolean, Object], default: undefined },
+    tabBarGutter: Number,
   },
   model: {
     prop: 'activeKey',
@@ -77,6 +78,7 @@ export default {
       tabPosition,
       tabBarStyle,
       hideAdd,
+      onTabClick,
       onPrevClick,
       onNextClick,
       animated,
@@ -84,6 +86,7 @@ export default {
       activeKey,
       defaultActiveKey,
       $slots,
+      tabBarGutter,
     } = this
     let { inkBarAnimated, tabPaneAnimated } = typeof animated === 'object' ? { // eslint-disable-line
       inkBarAnimated: !!animated.inkBar, tabPaneAnimated: !!animated.tabPane,
@@ -126,9 +129,10 @@ export default {
         removeTab: this.removeTab,
         createNewTab: this.createNewTab,
         inkBarAnimated,
+        tabBarGutter,
       },
       on: {
-        // tabClick: onTabClick,
+        tabClick: onTabClick,
         prevClick: onPrevClick,
         nextClick: onNextClick,
       },

components/tabs/index.zh-CN.md

@@ -28,11 +28,12 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | animated | 是否使用动画切换 Tabs，在 `tabPosition=top|bottom` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false |
 | defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板 |
 | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |
-| size | 大小，提供 `default` 和 `small` 两种大小，仅当 `type="line"` 时生效。 | string | 'default' |
+| size | 大小，提供 `large` `default` 和 `small` 三种大小，仅当 `type="line"` 时生效。 | string | 'default' |
 | tabBarExtraContent | tab bar 上额外的元素 | string\|Function\|slot | 无 |
 | tabBarStyle | tab bar 的样式对象 | object | - |
 | tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | 'top' |
 | type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | 'line' |
+| tabBarGutter | tabs 之间的间隙 | number | 无 |
 
 
 ### 事件 emit

components/tabs/src/TabBarMixin.js

@@ -23,12 +23,13 @@ export default {
       default: noop,
       type: Function,
     },
+    tabBarGutter: Number,
   },
   methods: {
     getTabs (h) {
-      const { panels: children, activeKey, prefixCls } = this
+      const { panels: children, activeKey, prefixCls, tabBarGutter } = this
       const rst = []
-      children.forEach((child) => {
+      children.forEach((child, index) => {
         if (!child) {
           return
         }
@@ -69,6 +70,7 @@ export default {
             class={cls}
             key={tabKey}
             onClick={onClick}
+            style={{ marginRight: tabBarGutter && index === children.length - 1 ? `0px` : `${tabBarGutter}px` }}
             ref={activeKey === tabKey ? 'activeTab' : undefined}
           >
             {tabC}

components/tabs/style/card-style.less

@@ -25,7 +25,7 @@
   &&-card > &-bar &-tab-active {
     background: @component-background;
     border-color: @border-color-split;
-    color: @primary-color;
+    color: @tabs-card-active-color;
     padding-bottom: 1px;
   }
   &&-card > &-bar &-tab-inactive {
@@ -77,8 +77,8 @@
       color: @text-color;
       transition: all .3s;
       &:hover {
-        color: @primary-color;
+        color: @tabs-card-active-color;
-        border-color: @primary-color;
+        border-color: @tabs-card-active-color;
       }
     }
   }
@@ -132,4 +132,17 @@
       }
     }
   }
+
+  // https://github.com/ant-design/ant-design/issues/9104
+  &&-card&-bottom > &-bar &-tab {
+    border-bottom: @border-width-base @border-style-base @border-color-split;
+    border-top: 0;
+    border-radius: 0 0 @border-radius-base @border-radius-base;
+  }
+
+  &&-card&-bottom > &-bar &-tab-active {
+    color: @primary-color;
+    padding-bottom: 0;
+    padding-top: 1px;
+  }
 }

components/tabs/style/index.less

@@ -1,9 +1,10 @@
 @import "../../style/themes/default";
 @import "../../style/mixins/index";
-@tab-prefix-cls: ~"@{ant-prefix}-tabs";
 
 @import "./card-style";
 
+@tab-prefix-cls: ~"@{ant-prefix}-tabs";
+
 .@{tab-prefix-cls} {
   .reset-component;
   position: relative;
@@ -17,13 +18,13 @@
     bottom: 1px;
     box-sizing: border-box;
     height: 2px;
-    background-color: @primary-color;
+    background-color: @tabs-ink-bar-bg-color;
     transform-origin: 0 0;
   }
 
   &-bar {
     border-bottom: @border-width-base @border-style-base @border-color-split;
-    margin-bottom: 16px;
+    margin: @tab-bar-margin;
     outline: none;
     transition: padding .3s @ease-in-out;
   }
@@ -40,11 +41,27 @@
     .clearfix;
 
     &-scrolling {
-      padding-left: 32px;
+      padding-left: @tab-scrolling-size;
-      padding-right: 32px;
+      padding-right: @tab-scrolling-size;
     }
   }
 
+  // https://github.com/ant-design/ant-design/issues/9104
+  &-bottom &-bar {
+    border-bottom: none;
+    border-top: @border-width-base @border-style-base @border-color-split;
+  }
+
+  &-bottom &-ink-bar {
+    bottom: auto;
+    top: 1px;
+  }
+
+  &-bottom &-nav-container {
+    margin-bottom: 0;
+    margin-top: -1px;
+  }
+
   &-tab-prev,
   &-tab-next {
     user-select: none;
@@ -63,7 +80,7 @@
 
     &.@{tab-prefix-cls}-tab-arrow-show {
       opacity: 1;
-      width: 32px;
+      width: @tab-scrolling-size;
       height: 100%;
       pointer-events: auto;
     }
@@ -157,7 +174,8 @@
     .@{tab-prefix-cls}-tab {
       display: inline-block;
       height: 100%;
-      margin-right: 32px;
+      margin: @tab-horizontal-margin;
+      padding: @tab-horizontal-padding;
       box-sizing: border-box;
       position: relative;
 
@@ -165,17 +183,16 @@
         margin-right: 0;
       }
 
-      padding: 12px 16px;
       transition: color 0.3s @ease-in-out;
       cursor: pointer;
       text-decoration: none;
 
       &:hover {
-        color: @primary-5;
+        color: @tab-hover-color;
       }
 
       &:active {
-        color: @primary-7;
+        color: @tab-active-color;
       }
 
       .@{iconfont-css-prefix} {
@@ -184,7 +201,7 @@
     }
 
     .@{tab-prefix-cls}-tab-active {
-      color: @primary-color;
+      color: @tab-highlight-color;
       font-weight: 500;
     }
   }
@@ -236,22 +253,21 @@
       border-bottom: 0;
       height: 100%;
       &-tab-prev, &-tab-next {
-        width: 32px;
+        width: @tab-scrolling-size;
         height: 0;
         transition: height .3s @ease-in-out, opacity .3s @ease-in-out, color .3s @ease-in-out;
       }
       &-tab-prev.@{tab-prefix-cls}-tab-arrow-show,
       &-tab-next.@{tab-prefix-cls}-tab-arrow-show {
         width: 100%;
-        height: 32px;
+        height: @tab-scrolling-size;
       }
 
       .@{tab-prefix-cls}-tab {
         float: none;
-        margin-right: 0;
+        margin: @tab-vertical-margin;
-        margin-bottom: 16px;
+        padding: @tab-vertical-padding;
         display: block;
-        padding: 8px 24px;
 
         &:last-child {
           margin-bottom: 0;
@@ -275,7 +291,7 @@
         margin-bottom: 0;
 
         &.@{tab-prefix-cls}-nav-container-scrolling {
-          padding: 32px 0;
+          padding: @tab-scrolling-size 0;
         }
       }
 
@@ -297,7 +313,7 @@
       .@{tab-prefix-cls}-tab-next {
         width: 100%;
         bottom: 0;
-        height: 32px;
+        height: @tab-scrolling-size;
         &-icon:before {
           content: "\e61d";
         }
@@ -306,7 +322,7 @@
       .@{tab-prefix-cls}-tab-prev {
         top: 0;
         width: 100%;
-        height: 32px;
+        height: @tab-scrolling-size;
         &-icon:before {
           content: "\e61e";
         }

components/tag/Tag.vue

@@ -9,9 +9,7 @@
       :class="classes"
       :style="tagStyle"
     >
-      <span :class="`${prefixCls}-text`">
+      <slot></slot>
-        <slot></slot>
-      </span>
       <Icon v-if="closable" type="cross" @click="close" />
     </div>
   </transition>

components/tag/style/index.less

@@ -29,12 +29,10 @@
     color: @tag-default-color;
   }
 
-  &-text {
+  >a:first-child:last-child {
-    a:first-child:last-child {
+    display: inline-block;
-      display: inline-block;
+    margin: 0 -8px;
-      margin: 0 -8px;
+    padding: 0 8px;
-      padding: 0 8px;
-    }
   }
 
   .@{iconfont-css-prefix}-cross {