@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/lib/tabs/style/index.css

@@ -92,6 +92,15 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 .kd-tabs {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -105,7 +114,7 @@
   height: 100%;
 }
 .kd-tabs-noContainer {
-  height: 48px;
+  height: var(--kd-c-tabs-sizing-height, 48px);
 }
 .kd-tabs-tab-wrap {
   position: relative;
@@ -122,8 +131,8 @@
   white-space: nowrap;
   top: 0;
   left: 0;
-  -webkit-transition: all 0.3s cubic-bezier(0.42, 0, 1, 1);
-  transition: all 0.3s cubic-bezier(0.42, 0, 1, 1);
+  -webkit-transition: all var(--kd-c-tabs-motion-duration, var(--kd-g-duration, 0.3s)) var(--kd-c-tabs-motion-timing-function, cubic-bezier(0.42, 0, 1, 1));
+  transition: all var(--kd-c-tabs-motion-duration, var(--kd-g-duration, 0.3s)) var(--kd-c-tabs-motion-timing-function, cubic-bezier(0.42, 0, 1, 1));
 }
 .kd-tabs-bottom {
   -webkit-box-orient: vertical;
@@ -168,7 +177,7 @@
   background-color: #fff;
   -webkit-box-shadow: unset;
           box-shadow: unset;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-tabs-right-arrows-grid .kd-tabs-more-btn {
   line-height: 22px;
@@ -194,7 +203,7 @@
   top: 50%;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
-  background-color: #d9d9d9;
+  background-color: var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-tabs-left-operations-item {
   padding: 0 12px;
@@ -213,7 +222,7 @@
   top: 50%;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
-  background-color: #d9d9d9;
+  background-color: var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-tabs-right-operations-item {
   padding: 0 12px;
@@ -230,14 +239,14 @@
   cursor: pointer;
 }
 .kd-tabs-more-btn:hover {
-  color: #5582f3;
+  color: var(--kd-c-tabs-color-text-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-tabs-more-btn-disabled {
-  color: #b2b2b2;
+  color: var(--kd-c-tabs-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
 }
 .kd-tabs-more-btn-disabled:hover {
-  color: #b2b2b2;
+  color: var(--kd-c-tabs-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-tabs-navs {
   position: relative;
@@ -255,11 +264,11 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  height: 48px;
-  border-bottom: 1px solid #d9d9d9;
+  height: var(--kd-c-tabs-sizing-height, 48px);
+  border-bottom: var(--kd-c-tabs-sizing-border, 1px) solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-tabs-navs-line.kd-tabs-navs-bottom {
-  border-top: 1px solid #d9d9d9;
+  border-top: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   border-bottom: unset;
 }
 .kd-tabs-navs-line.kd-tabs-navs-bottom .kd-tabs-tab-wrap {
@@ -273,8 +282,8 @@
   bottom: unset;
 }
 .kd-tabs-navs-card {
-  border-top: 1px solid #d9d9d9;
-  background-color: #f5f5f5;
+  border-top: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  background-color: var(--kd-c-tabs-card-color-background, var(--kd-g-color-background-contain-disabled, #f5f5f5));
 }
 .kd-tabs-navs-card .kd-tabs-tab-wrap {
   top: -1px;
@@ -295,7 +304,7 @@
   display: inline-block;
   width: 1px;
   height: 100%;
-  background-color: #d9d9d9;
+  background-color: var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-tabs-navs-card.kd-tabs-navs-left::before,
 .kd-tabs-navs-card.kd-tabs-navs-right::before {
@@ -334,7 +343,7 @@
   border-bottom: unset;
 }
 .kd-tabs-navs-dynamic {
-  background-color: #f5f5f5;
+  background-color: var(--kd-c-tabs-card-color-background, var(--kd-g-color-background-contain-disabled, #f5f5f5));
   border-bottom: unset;
   height: 40px;
 }
@@ -355,31 +364,31 @@
   vertical-align: middle;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  font-size: 14px;
-  color: #666;
-  height: 48px;
-  line-height: 48px;
-  margin-right: 24px;
+  font-size: var(--kd-c-tabs-pane-font-size, var(--kd-g-font-size-middle, 14px));
+  color: var(--kd-c-tabs-color-text, var(--kd-g-color-text-secondary, #666));
+  height: var(--kd-c-tabs-pane-sizing-height, 48px);
+  line-height: var(--kd-c-tabs-pane-line-height, 48px);
+  margin-right: var(--kd-c-tabs-pane-spacing-margin-right, 24px);
   cursor: pointer;
 }
 .kd-tab-pane-text {
   display: inline-block;
-  -webkit-transition: color 0.3s;
-  transition: color 0.3s;
+  -webkit-transition: color var(--kd-c-tabs-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: color var(--kd-c-tabs-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-tab-pane-text-active,
 .kd-tab-pane-text:hover {
-  color: #5582f3;
+  color: var(--kd-c-tabs-color-text-active, var(--kd-g-color-theme, #5582f3));
 }
 .kd-tab-pane-text-disabled:hover {
-  color: #b2b2b2;
+  color: var(--kd-c-tabs-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-tab-pane-disabled {
-  color: #b2b2b2;
+  color: var(--kd-c-tabs-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
 }
 .kd-tab-pane-disabled:hover {
-  color: #b2b2b2;
+  color: var(--kd-c-tabs-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-tab-pane-type-card {
   margin-right: 0;
@@ -389,11 +398,11 @@
 }
 .kd-tab-pane-type-card.kd-tab-pane-box-active {
   background-color: #fff;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   border-top: 2px solid;
-  border-color: #5582f3 #d9d9d9 transparent #d9d9d9;
-  -webkit-transition: background-color 0.2s cubic-bezier(0.42, 0, 1, 1);
-  transition: background-color 0.2s cubic-bezier(0.42, 0, 1, 1);
+  border-color: var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3)) var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9)) transparent var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  -webkit-transition: background-color 0.2s var(--kd-c-tabs-motion-timing-function, cubic-bezier(0.42, 0, 1, 1));
+  transition: background-color 0.2s var(--kd-c-tabs-motion-timing-function, cubic-bezier(0.42, 0, 1, 1));
 }
 .kd-tab-pane-type-card.kd-tab-pane-box-active:first-of-type {
   border-left: unset;
@@ -403,29 +412,29 @@
   width: 100%;
   padding: 0;
   text-align: center;
-  border-top: 1px solid #d9d9d9;
+  border-top: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-tab-pane-type-card.kd-tab-pane-left:last-of-type,
 .kd-tab-pane-type-card.kd-tab-pane-right:last-of-type {
-  border-bottom: 1px solid #d9d9d9;
+  border-bottom: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-tab-pane-type-card.kd-tab-pane-left {
   border-left: 1px solid transparent;
 }
 .kd-tab-pane-type-card.kd-tab-pane-left.kd-tab-pane-box-active {
-  border-left: 2px solid #5582f3;
+  border-left: 2px solid var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3));
   border-right: 1px solid transparent;
 }
 .kd-tab-pane-type-card.kd-tab-pane-right {
   border-right: 1px solid transparent;
 }
 .kd-tab-pane-type-card.kd-tab-pane-right.kd-tab-pane-box-active {
-  border-right: 2px solid #5582f3;
+  border-right: 2px solid var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3));
   border-left: 1px solid transparent;
 }
 .kd-tab-pane-type-card.kd-tab-pane-bottom.kd-tab-pane-box-active {
   border-bottom: 2px solid;
-  border-color: transparent #d9d9d9 #5582f3 #d9d9d9;
+  border-color: transparent var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9)) var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3)) var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-tab-pane-type-dynamic {
   height: 40px;
@@ -449,7 +458,7 @@
   height: 24px;
   line-height: 22px;
   padding: 0 19px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   margin-right: -1px;
 }
 .kd-tab-pane-type-grid:first-of-type {
@@ -461,19 +470,19 @@
 .kd-tab-pane-type-grid.kd-tab-pane-box-active {
   position: relative;
   z-index: 2;
-  background-color: #5582f3;
-  border: 1px solid #5582f3;
-  -webkit-transition: background-color 0.2s cubic-bezier(0.42, 0, 1, 1);
-  transition: background-color 0.2s cubic-bezier(0.42, 0, 1, 1);
+  background-color: var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3));
+  border: 1px solid var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3));
+  -webkit-transition: background-color 0.2s var(--kd-c-tabs-motion-timing-function, cubic-bezier(0.42, 0, 1, 1));
+  transition: background-color 0.2s var(--kd-c-tabs-motion-timing-function, cubic-bezier(0.42, 0, 1, 1));
 }
 .kd-tab-pane-type-grid.kd-tab-pane-box-active .kd-tab-pane-text-active {
   color: #fff;
 }
 .kd-tab-pane-type-grid.kd-tab-pane-disabled {
-  background-color: #f2f2f2;
+  background-color: var(--kd-c-tabs-color-background-disabled, var(--kd-g-color-background-2, #f2f2f2));
 }
 .kd-tab-pane-type-grid:hover {
-  color: #5582f3;
+  color: var(--kd-c-tabs-color-text-active, var(--kd-g-color-theme, #5582f3));
 }
 .kd-tab-pane-operations {
   position: relative;
@@ -492,7 +501,7 @@
   content: '';
   width: 1px;
   height: 14px;
-  background-color: #d9d9d9;
+  background-color: var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   right: 0;
   top: 50%;
   opacity: 1;
@@ -512,9 +521,9 @@
   left: 0;
   bottom: 0;
   height: 2px;
-  background-color: #5582f3;
-  -webkit-transition: all 0.3s cubic-bezier(0.42, 0, 1, 1);
-  transition: all 0.3s cubic-bezier(0.42, 0, 1, 1);
+  background-color: var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3));
+  -webkit-transition: all var(--kd-c-tabs-motion-duration, var(--kd-g-duration, 0.3s)) var(--kd-c-tabs-motion-timing-function, cubic-bezier(0.42, 0, 1, 1));
+  transition: all var(--kd-c-tabs-motion-duration, var(--kd-g-duration, 0.3s)) var(--kd-c-tabs-motion-timing-function, cubic-bezier(0.42, 0, 1, 1));
 }
 .kd-arrow-button {
   display: inline-block;
@@ -527,7 +536,7 @@
   cursor: pointer;
 }
 .kd-arrow-button:hover {
-  color: #5582f3;
+  color: var(--kd-c-tabs-color-text-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-arrow-button-line {
   width: 24px;
@@ -537,11 +546,11 @@
   line-height: 40px;
 }
 .kd-arrow-button-disabled {
-  color: #b2b2b2;
+  color: var(--kd-c-tabs-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
 }
 .kd-arrow-button-disabled:hover {
-  color: #b2b2b2;
+  color: var(--kd-c-tabs-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-arrow-button .kdicon {
   font-size: 14px;

package/lib/tabs/style/index.less

@@ -24,7 +24,7 @@
     white-space: nowrap;
     top: 0;
     left: 0;
-    transition: all @transition-duration @tab-transition-fn;
+    transition: all @tab-g-motion-duration @tab-transition-fn;
   }
   &-bottom {
     flex-direction: column-reverse;
@@ -215,7 +215,7 @@
   .tabPane;
   &-text {
     display: inline-block;
-    transition: color @transition-duration;
+    transition: color @tab-g-motion-duration;
     &-active, &:hover {
       color: @tabPane-font-color-active;
     }
@@ -362,7 +362,7 @@
   bottom: 0;
   height: 2px;
   background-color: @tab-line-color-active;
-  transition: all @transition-duration @tab-transition-fn;
+  transition: all @tab-g-motion-duration @tab-transition-fn;
 }
 
 .@{arrowBtn-prefix-cls} {

package/lib/tabs/style/mixin.less

@@ -1,3 +1,5 @@
+@import './token.less';
+
 .tabs() {
   display: flex;
   flex-direction: column;

package/lib/tabs/style/token.less

@@ -0,0 +1,32 @@
+@import '../../style/themes/token.less';
+
+@tabs-custom-prefix: ~'--@{kd-prefix}-c-tabs';
+
+// color
+@tabs-border-color: var(~'@{tabs-custom-prefix}-color-border', @color-border-strong);
+@tab-line-color-active: var(~'@{tabs-custom-prefix}-line-color-active', @color-theme);
+@tabs-card-bg: var(~'@{tabs-custom-prefix}-card-color-background', @color-background-contain-disabled);
+@tab-disabled-bg: var(~'@{tabs-custom-prefix}-color-background-disabled', @color-background-2);
+@tabs-font-color: var(~'@{tabs-custom-prefix}-color-text', @color-text-secondary);
+@tabPane-font-color-active: var(~'@{tabs-custom-prefix}-color-text-active', @color-theme);
+@tabPane-font-color-hover: var(~'@{tabs-custom-prefix}-color-text-hover', @color-theme);
+@tabPane-font-color-disabled: var(~'@{tabs-custom-prefix}-color-text-disabled', @color-disabled);
+
+// font
+@tabPane-font-size: var(~'@{tabs-custom-prefix}-pane-font-size', @font-size-middle);
+
+// line-height
+@tab-pane-line-height: var(~'@{tabs-custom-prefix}-pane-line-height', 48px);
+
+// motion
+@tab-transition-fn: var(~'@{tabs-custom-prefix}-motion-timing-function', cubic-bezier(0.42, 0, 1, 1));
+@tab-g-motion-duration: var(~'@{tabs-custom-prefix}-motion-duration', @duration-promptly);
+
+// sizing
+@tabs-height: var(~'@{tabs-custom-prefix}-sizing-height', 48px);
+@tabs-border-width: var(~'@{tabs-custom-prefix}-sizing-border', 1px);
+@tab-pane-height: var(~'@{tabs-custom-prefix}-pane-sizing-height', 48px);
+
+
+// spacing
+@tab-pane-margin-right: var(~'@{tabs-custom-prefix}-pane-spacing-margin-right', 24px);

package/lib/tabs/tabs.js

@@ -293,10 +293,12 @@ var Tabs = function Tabs(props) {
     var menu = (0, _map.default)(nodes).call(nodes, function (node) {
       var tmp = {
         label: '',
-        key: 0
+        key: 0,
+        disabled: false
       };
       tmp.label = node.props.tab;
       tmp.key = node.props.id;
+      tmp.disabled = node.props.disabled;
       return tmp;
     });