@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/lib/select/style/token.less

@@ -0,0 +1,43 @@
+@import '../../style/themes/token.less';
+
+@select-custom-prefix: ~'--@{kd-prefix}-c-select';
+
+
+// color
+@select-dropdown-bg: var(~'@{select-custom-prefix}-dropdown-color-background', @color-background);
+@select-disabled-option-bg: var(~'@{select-custom-prefix}-item-color-background-disabled', @color-background-contain-disabled);
+@select-item-active-bg: var(~'@{select-custom-prefix}-color-background', @color-hover);
+@select-item-selected-bg: var(~'@{select-custom-prefix}-color-background-selected', #f2f9ff);
+@select-g-color-border: var(~'@{select-custom-prefix}-color-border', @color-input);
+@select-g-color-border-foucs: var(~'@{select-custom-prefix}-color-border-foucs', @color-theme);
+@select-g-color-border-hover: var(~'@{select-custom-prefix}-color-border-hover', @color-theme);
+@select-border-g-color-border: var(~'@{select-custom-prefix}-border-color-border', @color-border-strong);
+@select-placeholder-color: var(~'@{select-custom-prefix}-placeholder-color-text', @color-text-third);
+@select-item-selected-color: var(~'@{select-custom-prefix}-item-color-text-selected', @color-ongoing);
+@select-font-color: var(~'@{select-custom-prefix}-footer-color-text', @color-text-primary);
+@select-footer-g-text-color-selected: var(~'@{select-custom-prefix}-footer-color-text-selected', @color-text-link);
+@select-g-item-text-color-disabled: var(~'@{select-custom-prefix}-item-color-text-disabled', @color-disabled);
+
+// font
+@select-list-font-size: var(~'@{select-custom-prefix}-dropdown-font-size', 12px); // 下拉列表文字大小
+@select-large-font-size: var(~'@{select-custom-prefix}-font-size-large', 16px); // 大号字体
+@select-middle-font-size: var(~'@{select-custom-prefix}-font-size-middle', 14px); // 中号高度
+@select-small-font-size: var(~'@{select-custom-prefix}-font-size-small', 12px); // 小号高度
+
+// sizing
+@select-dropdown-height: var(~'@{select-custom-prefix}-item-sizing-height', 22px);
+@select-large-height: var(~'@{select-custom-prefix}-sizing-height-large', 36px); // 大号高度 lh:28px
+@select-middle-height: var(~'@{select-custom-prefix}-sizing-height-middle', 30px); // 中号高度lh:22px
+@select-small-height: var(~'@{select-custom-prefix}-sizing-height-small', 24px); // 小号高度lh:12px
+
+// line-height
+@select-dropdown-line-height: var(~'@{select-custom-prefix}-dropdown-line-height', 22px);
+@select-large-line-height: var(~'@{select-custom-prefix}-line-height-large', 28px);
+@select-middle-line-height: var(~'@{select-custom-prefix}-line-height-middle', 22px);
+@select-small-line-height: var(~'@{select-custom-prefix}-line-height-small', 14px);
+
+// radius
+@select-g-radius-border: var(~'@{select-custom-prefix}-radius-border', @radius-border);
+
+// z-index
+@select-z-index: var(~'@{select-custom-prefix}-z-index', @z-index-popper);

package/lib/slider/slider.js

@@ -99,7 +99,6 @@ var InteranalSlider = function InteranalSlider(props, ref) {
   var sliderRef = ref || thisSliderRef;
   var handleRef = (0, _react.useRef)();
   var sliderClasses = (0, _classnames.default)(sliderPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(sliderPrefixCls, "-vertical"), vertical), (0, _defineProperty2.default)(_classNames, "".concat(sliderPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(sliderPrefixCls, "-reverse"), reverse), _classNames));
-  console.log('object :>> ', defaultValue, onAfterChange, onChange, marks, sliderProps);
 
   var _useMergedState = (0, _hooks.useMergedState)(0, {
     defaultValue: defaultValue,
@@ -115,7 +114,6 @@ var InteranalSlider = function InteranalSlider(props, ref) {
       setDraging = _useState2[1];
 
   var mouseOffset;
-  console.log(setValue, dragging, setDraging);
 
   var addDocumentMouseEvents = function addDocumentMouseEvents() {
     document.addEventListener('mousemove', handleMouseMove);
@@ -192,8 +190,7 @@ var InteranalSlider = function InteranalSlider(props, ref) {
     setDraging(false);
   };
 
-  var handleTouchStart = function handleTouchStart() {
-    console.log('object :>> ', 'object', addDocumentMouseEvents);
+  var handleTouchStart = function handleTouchStart() {// console.log('object :>> ', 'object', addDocumentMouseEvents)
   };
 
   var handleMouseDown = function handleMouseDown(e) {
@@ -203,7 +200,6 @@ var InteranalSlider = function InteranalSlider(props, ref) {
     var position = vertical ? e.clientY : e.pageX; // 判断当前点击的区域是否是拖拽点还是bar条
 
     var isHandlePoint = handleRef.current === e.target;
-    console.log('object :>> ', isHandlePoint, handleRef.current, e.target);
 
     if (!isHandlePoint) {
       mouseOffset = 0;
@@ -211,9 +207,8 @@ var InteranalSlider = function InteranalSlider(props, ref) {
       var handlePosition = (0, _utils2.getHandleCenterposition)(vertical, e.target);
       mouseOffset = position - handlePosition;
       position = handlePosition;
-    }
+    } // 设置状态值
 
-    console.log('mouseOffset :>> ', mouseOffset); // 设置状态值
 
     setDraging(true);
     var newV = calcValueByPos(position);
@@ -231,12 +226,10 @@ var InteranalSlider = function InteranalSlider(props, ref) {
     onEnd();
   };
 
-  var handleKeyDown = function handleKeyDown() {
-    console.log('object :>> ', 'object');
+  var handleKeyDown = function handleKeyDown() {// console.log('object :>> ', 'object')
   };
 
-  var handleFocus = function handleFocus() {
-    console.log('object :>> ', 'object');
+  var handleFocus = function handleFocus() {// console.log('object :>> ', 'object')
   };
 
   var handleBlur = function handleBlur(e) {
@@ -320,8 +313,7 @@ var InteranalSlider = function InteranalSlider(props, ref) {
     min: min,
     max: max,
     bound: value,
-    onClickLabel: function onClickLabel() {
-      console.log('hello world!');
+    onClickLabel: function onClickLabel() {// console.log('hello world!')
     }
   }));
 };

package/lib/slider/sliderTooltip.js

@@ -60,7 +60,6 @@ var SliderTooltip = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var range = max - min;
   var offset = "".concat(Math.abs(bound - min) / range * 100, "%");
   var handleStyle = vertical ? (_ref = {}, (0, _defineProperty2.default)(_ref, reverse ? 'top' : 'bottom', offset), (0, _defineProperty2.default)(_ref, reverse ? 'bottom' : 'top', 'auto'), _ref) : (_ref2 = {}, (0, _defineProperty2.default)(_ref2, reverse ? 'right' : 'left', offset), (0, _defineProperty2.default)(_ref2, reverse ? 'left' : 'right', 'auto'), _ref2);
-  console.log('visible :>> ', visible);
   var placement = vertical ? 'right' : 'top';
   return /*#__PURE__*/_react.default.createElement(_tooltip.default, (0, _extends2.default)({
     ref: tooltipRef

package/lib/slider/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 */
 .slider {
   position: relative;
   -webkit-box-sizing: border-box;
@@ -132,7 +141,7 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   background-color: #fff;
-  border: 2px solid #91d5ff;
+  border: 2px solid var(--kd-c-slider-handle-color-border, var(--kd-g-color-theme, #5582f3));
   border-radius: 50%;
   cursor: pointer;
 }
@@ -151,13 +160,13 @@
   position: absolute;
   width: 100%;
   height: 4px;
-  background-color: #f5f5f5;
+  background-color: var(--kd-c-slider-trail-color-background, var(--kd-g-color-border-weak, #e5e5e5));
   border-radius: 2px;
 }
 .kd-slider-track {
   position: absolute;
   height: 4px;
-  background-color: #91d5ff;
+  background-color: var(--kd-c-slider-track-color-background, var(--kd-g-color-theme, #5582f3));
 }
 .kd-slider-step {
   position: absolute;
@@ -178,7 +187,7 @@
   cursor: pointer;
 }
 .kd-slider-dot.kd-slider-dot-actived {
-  border-color: #8cc8ff;
+  border-color: var(--kd-c-slider-dot-color-border-actived, var(--kd-g-color-theme, #5582f3));
 }
 .kd-slider-handle {
   position: absolute;
@@ -189,7 +198,7 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   background-color: #fff;
-  border: 2px solid #91d5ff;
+  border: 2px solid var(--kd-c-slider-handle-color-border, var(--kd-g-color-theme, #5582f3));
   border-radius: 50%;
   cursor: pointer;
 }
@@ -201,7 +210,7 @@
 .kd-slider-mark-text {
   position: absolute;
   display: inline-block;
-  color: rgba(0, 0, 0, 0.45);
+  color: var(--kd-c-slider-mark-color-text, var(--kd-g-color-text-primary, #212121));
   word-break: keep-all;
   cursor: pointer;
   -webkit-user-select: none;
@@ -212,16 +221,16 @@
           transform: translateX(-50%);
 }
 .kd-slider-mark-text.kd-slider-mark-text-actived {
-  color: rgba(0, 0, 0, 0.85);
+  color: var(--kd-c-slider-mark-color-text-actived, var(--kd-g-color-text-primary-2, #ffffff));
 }
 .kd-slider:hover > .kd-slider-rail {
   background-color: #e1e1e1;
 }
 .kd-slider:not(.kd-slider-disabled):hover > .kd-slider-handle {
-  border-color: #69c0ff;
+  border-color: var(--kd-c-slider-handle-color-border-hover, var(--kd-g-color-theme-5, #87adff));
 }
 .kd-slider:not(.kd-slider-disabled):hover .kd-slider-track {
-  background-color: #69c0ff;
+  background-color: var(--kd-c-slider-track-color-background-hover, var(--kd-g-color-theme-5, #87adff));
 }
 .kd-slider-reverse .kd-slider-dot {
   top: -2px;
@@ -293,13 +302,13 @@
   cursor: not-allowed;
 }
 .kd-slider-disabled .kd-slider-track {
-  background-color: rgba(0, 0, 0, 0.25);
+  background-color: var(--kd-c-slider-track-color-background-hover, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-slider-disabled .kd-slider-dot {
-  border-color: rgba(0, 0, 0, 0.25);
+  border-color: var(--kd-c-slider-dot-color-border-actived, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
 }
 .kd-slider-disabled .kd-slider-handle {
-  border-color: rgba(0, 0, 0, 0.25);
+  border-color: var(--kd-c-slider-handle-color-border-hover, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
 }

package/lib/slider/style/index.less

@@ -9,14 +9,14 @@
     position: absolute;
     width: 100%;
     height: 4px;
-    background-color: #f5f5f5;
+    background-color: @slider-trail-color-background;
     border-radius: 2px;
   }
   
   &-track {
     position: absolute;
     height: 4px;
-    background-color: #91d5ff;
+    background-color: @slider-track-color-background;
   }
   
   &-step {
@@ -29,7 +29,7 @@
   }
 
   &-dot.@{slider-prefix-cls}-dot-actived {
-    border-color: #8cc8ff;
+    border-color: @slider-dot-color-border-actived;
   }
 
   &-handle {
@@ -45,7 +45,7 @@
   &-mark-text {
     position: absolute;
     display: inline-block;
-    color: rgba(0, 0, 0, .45);
+    color: @slider-mark-text-color;
     word-break: keep-all;
     cursor: pointer;
     user-select: none;
@@ -53,7 +53,7 @@
   }
 
   &-mark-text.@{slider-prefix-cls}-mark-text-actived {
-    color: rgba(0, 0, 0, .85);
+    color: @slider-mark-text-color-actived;
   }
 
   &:hover > &-rail{
@@ -61,11 +61,11 @@
   }
 
   &:not(&-disabled):hover > &-handle{
-    border-color: #69c0ff;
+    border-color: @slider-handle-color-border-hover;
   }
 
   &:not(&-disabled):hover &-track{
-    background-color: #69c0ff;
+    background-color: @slider-track-color-background-hover;
   }
 
   &-reverse {
@@ -151,16 +151,16 @@
     cursor: not-allowed;
 
     .@{slider-prefix-cls}-track {
-      background-color: rgba(0, 0, 0, .25);
+      background-color: @slider-track-color-background-disabled;
     }
 
     .@{slider-prefix-cls}-dot {
-      border-color: rgba(0, 0, 0, .25);
+      border-color: @slider-dot-color-border-disabled;
       cursor: not-allowed;
     }
 
     .@{slider-prefix-cls}-handle {
-      border-color: rgba(0, 0, 0, .25);
+      border-color: @slider-handle-color-border-disabled;
       cursor: not-allowed;
     }
   }

package/lib/slider/style/mixin.less

@@ -1,3 +1,5 @@
+@import './token.less';
+
 .slider {
   position: relative;
   box-sizing: border-box;
@@ -34,7 +36,7 @@
   height: 14px;
   box-sizing: border-box;
   background-color: #fff;
-  border: 2px solid #91d5ff;
+  border: 2px solid @slider-handle-color-border;
   border-radius: 50%;
   cursor: pointer;
 }

package/lib/slider/style/token.less

@@ -0,0 +1,17 @@
+@import '../../style/themes/token.less';
+
+@slider-custom-prefix: ~'--@{kd-prefix}-c-slider';
+
+// color
+@slider-trail-color-background: var(~'@{slider-custom-prefix}-trail-color-background', @color-border-weak);
+@slider-track-color-background: var(~'@{slider-custom-prefix}-track-color-background', @color-theme);
+@slider-track-color-background-hover: var(~'@{slider-custom-prefix}-track-color-background-hover', @color-theme-hover);
+@slider-track-color-background-disabled: var(~'@{slider-custom-prefix}-track-color-background-hover', @color-disabled);
+@slider-handle-color-border: var(~'@{slider-custom-prefix}-handle-color-border', @color-theme);
+@slider-handle-color-border-hover: var(~'@{slider-custom-prefix}-handle-color-border-hover', @color-theme-hover);
+@slider-handle-color-border-disabled: var(~'@{slider-custom-prefix}-handle-color-border-hover', @color-disabled);
+@slider-dot-color-border: var(~'@{slider-custom-prefix}-dot-color-border', @color-theme);
+@slider-dot-color-border-actived: var(~'@{slider-custom-prefix}-dot-color-border-actived', @color-theme);
+@slider-dot-color-border-disabled: var(~'@{slider-custom-prefix}-dot-color-border-actived', @color-disabled);
+@slider-mark-text-color: var(~'@{slider-custom-prefix}-mark-color-text', @color-text-primary);
+@slider-mark-text-color-actived: var(~'@{slider-custom-prefix}-mark-color-text-actived', @color-text-primary-2);

package/lib/space/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 */
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/

package/lib/spin/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-spin-page .kd-spin-dot-spin {
   width: 50px;
   height: 50px;
@@ -110,9 +119,9 @@
       align-content: space-between;
 }
 .kd-spin-page .kd-spin-dot-item {
-  width: 15px;
-  height: 15px;
-  background-color: #2386ee;
+  width: var(--kd-c-spin-page-sizing, 15px);
+  height: var(--kd-c-spin-page-sizing, 15px);
+  background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #2386ee));
   border-radius: 50%;
 }
 .kd-spin-page .kd-spin-dot-item:nth-child(2n+1) {
@@ -121,17 +130,17 @@
           animation: pageLoading 1s 0.3s ease-in-out infinite;
 }
 .kd-spin-page .kd-spin-dot-item:nth-child(2n+2) {
-  background-color: #00ccfe;
+  background-color: var(--kd-c-spin-dot-color-backgroung-second, var(--kd-g-color-logo-2, #00ccfe));
   -webkit-animation: pageLoading 1s 0.2s ease-in-out infinite;
           animation: pageLoading 1s 0.2s ease-in-out infinite;
 }
 .kd-spin-page .kd-spin-dot-item:nth-child(2n+3) {
-  background-color: #05c8c8;
+  background-color: var(--kd-c-spin-dot-color-backgroung-third, var(--kd-g-color-logo-3, #05c8c8));
   -webkit-animation: pageLoading 1s 0.1s ease-in-out infinite;
           animation: pageLoading 1s 0.1s ease-in-out infinite;
 }
 .kd-spin-page .kd-spin-dot-item:nth-child(2n+4) {
-  background-color: #a06eff;
+  background-color: var(--kd-c-spin-dot-color-backgroung-fourth, var(--kd-g-color-logo-4, #a06eff));
   -webkit-animation: pageLoading 1s ease-in-out infinite;
           animation: pageLoading 1s ease-in-out infinite;
 }
@@ -169,9 +178,9 @@
           align-items: flex-end;
 }
 .kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item {
-  width: 5px;
-  height: 5px;
-  background-color: #2386ee;
+  width: var(--kd-c-spin-dot-container-sizing, 5px);
+  height: var(--kd-c-spin-dot-container-sizing, 5px);
+  background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #2386ee));
   border-radius: 50%;
 }
 .kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+1) {
@@ -179,17 +188,17 @@
           animation: containerLoading 1s 0.6s ease-in-out infinite;
 }
 .kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+2) {
-  background-color: #00ccfe;
+  background-color: var(--kd-c-spin-dot-color-backgroung-second, var(--kd-g-color-logo-2, #00ccfe));
   -webkit-animation: containerLoading 1s 0.45s ease-in-out infinite;
           animation: containerLoading 1s 0.45s ease-in-out infinite;
 }
 .kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+3) {
-  background-color: #05c8c8;
+  background-color: var(--kd-c-spin-dot-color-backgroung-third, var(--kd-g-color-logo-3, #05c8c8));
   -webkit-animation: containerLoading 1s 0.3s ease-in-out infinite;
           animation: containerLoading 1s 0.3s ease-in-out infinite;
 }
 .kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+4) {
-  background-color: #a06eff;
+  background-color: var(--kd-c-spin-dot-color-backgroung-fourth, var(--kd-g-color-logo-4, #a06eff));
   -webkit-animation: containerLoading 1s 0.15s ease-in-out infinite;
           animation: containerLoading 1s 0.15s ease-in-out infinite;
 }
@@ -216,7 +225,7 @@
 .kd-spin-component .kd-spin-dot-spin {
   width: 13px;
   height: 13px;
-  border: 1px solid #e1e1e1;
+  border: 1px solid var(--kd-c-spin-component-dot-color-border, #e1e1e1);
   border-radius: 50%;
   position: relative;
   -webkit-box-sizing: border-box;
@@ -228,7 +237,7 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   border: 1px solid transparent;
-  border-right-color: #5582f3;
+  border-right-color: var(--kd-c-spin-component-dot-item-color-border, var(--kd-g-color-theme, #5582f3));
   border-radius: 50%;
   position: absolute;
   top: -1px;

package/lib/spin/style/index.less

@@ -15,6 +15,7 @@
       width: 50px;
       height: 50px;
       padding: 5px;
+      // background: @logo-color-1;
       box-sizing: border-box;
       display: flex;
       flex-wrap: wrap;
@@ -104,7 +105,7 @@
     .@{spin-prefix-cls}-dot-spin {
       width: 13px;
       height: 13px;
-      border: 1px solid #e1e1e1;
+      border: 1px solid @spin-component-dot-color-border;
       border-radius: 50%;
       position: relative;
       box-sizing: border-box;
@@ -115,7 +116,7 @@
         box-sizing: border-box;
         border: 1px solid transparent;
         // border-top-color: #5582f3;
-        border-right-color: #5582f3;
+        border-right-color: @spin-component-dot-item-color-border;
         border-radius: 50%;
         position: absolute;
         top: -1px;

package/lib/spin/style/mixin.less

@@ -1,3 +1,4 @@
+@import './token.less';
 
 // code component mixin here
 .dot(@size, @color) {

package/lib/spin/style/token.less

@@ -0,0 +1,15 @@
+@import '../../style/themes/token.less';
+
+@spin-custom-prefix: ~'--@{kd-prefix}-c-spin';
+
+// color
+@spin-dot-color-first: var(~'@{spin-custom-prefix}-dot-color-backgroung-first', @color-logo-1);
+@spin-dot-color-second: var(~'@{spin-custom-prefix}-dot-color-backgroung-second', @color-logo-2);
+@spin-dot-color-third: var(~'@{spin-custom-prefix}-dot-color-backgroung-third', @color-logo-3);
+@spin-dot-color-fourth: var(~'@{spin-custom-prefix}-dot-color-backgroung-fourth', @color-logo-4);
+@spin-component-dot-color-border: var(~'@{spin-custom-prefix}-component-dot-color-border', #e1e1e1);
+@spin-component-dot-item-color-border: var(~'@{spin-custom-prefix}-component-dot-item-color-border', @color-theme);
+
+// sizing
+@spin-page-size: var(~'@{spin-custom-prefix}-page-sizing', 15px);
+@spin-container-size: var(~'@{spin-custom-prefix}-dot-container-sizing', 5px);