@kdcloudjs/kdesign 1.7.0 → 1.7.2

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## [1.7.1](https://github.com/kdcloudone/kdesign/compare/v1.7.0...v1.7.1) (2023-03-24)
+
+
+### Bug Fixes
+
+* [cli] 添加组件概览缩略图默认值 ([9ad9386](https://github.com/kdcloudone/kdesign/commit/9ad9386fa64702605942c8bddfa8179b869db348))
+* [cli] 修复国际化配置需全量传入参数问题 fix [#297](https://github.com/kdcloudone/kdesign/issues/297) ([90de9ad](https://github.com/kdcloudone/kdesign/commit/90de9ad3f5bf952432161de40a4067f678365a9c))
+* [pagination]修复样式问题 fix [#288](https://github.com/kdcloudone/kdesign/issues/288) ([37ec001](https://github.com/kdcloudone/kdesign/commit/37ec00156fe68c7188150158ceffa0e0457d784c))
+* [pagination]修复样式问题 fix [#288](https://github.com/kdcloudone/kdesign/issues/288) ([8283ed8](https://github.com/kdcloudone/kdesign/commit/8283ed89af37eebfe2dc06c85769715558760857))
+
+
+### Features
+
+* [color-picker] add color-picker component ([74c8266](https://github.com/kdcloudone/kdesign/commit/74c8266fa426ba3d6b7b2ba03eac7cac75990fdc))
+
+
+
+# [1.7.0](https://github.com/kdcloudone/kdesign/compare/v1.6.40...v1.7.0) (2023-03-23)
+
+
+### Bug Fixes
+
+* [cascader] 选择后反选对应的显示内容错误 fix [#289](https://github.com/kdcloudone/kdesign/issues/289) ([8e645af](https://github.com/kdcloudone/kdesign/commit/8e645affebd31130c138ffa91bf50d8994f82957))
+* [cascader] 选择两个label相同的选项报错 fix [#290](https://github.com/kdcloudone/kdesign/issues/290) ([9237809](https://github.com/kdcloudone/kdesign/commit/9237809f4c95bd1daaae08de05669e3be6c84084))
+* [input]修复mouseDown失焦问题 fix [#295](https://github.com/kdcloudone/kdesign/issues/295) ([06cd8f2](https://github.com/kdcloudone/kdesign/commit/06cd8f24b995e44cb00e5581fb64814442886da8))
+
+
+### Features
+
+* [tree-select] 新增树选择器 ([50b9e0e](https://github.com/kdcloudone/kdesign/commit/50b9e0e519433c9d251e6ab2ba4c5bfa508d06f9))
+
+
+
 ## [1.6.40](https://github.com/kdcloudone/kdesign/compare/v1.6.39...v1.6.40) (2023-03-16)
 
 

package/dist/default-theme.js

@@ -1,6 +1,5 @@
 module.exports = {
-  "blue-base": "#1890ff",
-  "kd-prefix": "kd",
+  "blue-base": "#1890ff;@kd-prefix:kd",
   "theme-color": "#5582f3",
   "theme-color-level1": "rgb(242, 248, 255)",
   "theme-color-level2": "rgb(242, 248, 255)",
@@ -59,9 +58,9 @@ module.exports = {
   "logo-color-3": "#05c8c7",
   "logo-color-4": "#a06eff",
   "white": "#fff",
-  "ease-out": "cubic-bezier(0,.4,.4,1)",
-  "ease-in": "cubic-bezier(0.4,0,1,0.6)",
-  "ease": "cubic-bezier(0.4,0,0.6,1)",
+  "ease-out": "cubic-bezier(0, .4, .4, 1)",
+  "ease-in": "cubic-bezier(0.4, 0, 1, 0.6)",
+  "ease": "cubic-bezier(0.4, 0, 0.6, 1)",
   "transition-duration-slowly": "0.4s",
   "transition-duration": "0.3s",
   "transition-duration-quickly": "0.2s",

package/dist/kdesign-complete.less

@@ -2891,6 +2891,291 @@
 
 
 
+@color-picker-prefix-cls: ~'@{kd-prefix}-color-picker';
+
+.@{color-picker-prefix-cls}-container {
+    position: relative;
+
+    .@{color-picker-prefix-cls}-input {
+        width: @color-picker-input-sizing-width;
+        height: @color-picker-input-sizing-height;
+        border-bottom: 1px solid rgba(217, 217, 217, 1);
+        font-size: @color-picker-input-font-size;
+    }
+
+    .@{color-picker-prefix-cls}-icon-container {
+        position: absolute;
+        top: 3px;
+        right: 6px;
+        cursor: pointer;
+
+        .@{color-picker-prefix-cls}-icon {
+            width: @color-picker-input-suffix-sizing-width;
+            height: @color-picker-input-suffix-sizing-height;
+            border: 1px solid rgba(0, 0, 0, 0.05);
+            border-radius: 2px;
+            line-height: 18px;
+            text-align: center;
+            color: @bg;
+
+            &-underline {
+                margin-right: -6px;
+            }
+
+            &-up {
+                .kdicon-arrow-down {
+                    transform: rotate(180deg);
+                    transition: transform @transition-duration-quickly ease-in-out;
+                }
+            }
+
+            &-down {
+                .kdicon-arrow-down {
+                    transform: rotate(0deg);
+                    transition: transform @transition-duration-quickly ease-in-out;
+                }
+            }
+        }
+    }
+
+}
+
+.@{color-picker-prefix-cls}-pop {
+
+    &.topLeft.hidden,
+    &.bottomLeft.hidden,
+    &.topRight.hidden,
+    &.bottomRight.hidden {
+        opacity: 0;
+        visibility: hidden;
+        transition: all calc(@transition-duration - 0.1s) @ease;
+    }
+
+    .@{color-picker-prefix-cls}-panel {
+        box-sizing: border-box;
+        width: @color-picker-panel-sizing-width;
+        padding: 4px 12px 16px;
+        background: #FFFFFF;
+        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
+        border-radius: 2px;
+        transform-origin: top left;
+        z-index: @color-picker-panel-z-index;
+
+        &-chrome {
+            width: 278px !important;
+            margin-top: 12px;
+            box-shadow: none !important;
+
+            &>div:last-child {
+                padding: 9px 0 4px !important;
+
+                .flexbox-fix:first-child {
+                    display: flex;
+                    flex-direction: row-reverse;
+
+                    &>div:first-child {
+                        &>div {
+                            width: 28px !important;
+                            height: 28px !important;
+                            border-radius: 50% !important;
+                            margin-top: -1px !important;
+                            margin-left: 4px !important;
+                        }
+                    }
+
+                    &>div:last-child {
+
+                        .hue-horizontal {
+                            width: 240px !important;
+                            height: 12px !important;
+                            border-radius: 6px !important;
+                            padding: unset !important;
+
+                            &>div>div {
+                                margin-top: 1px;
+                            }
+                        }
+
+                        &>div:last-child {
+                            &>div {
+                                width: 240px !important;
+                                height: 12px !important;
+                                margin: unset;
+
+                                &>div:first-child {
+                                    border-radius: 6px !important;
+                                }
+
+                                &>div:nth-child(2) {
+                                    border-radius: 6px !important;
+                                }
+
+                                &>div:last-child {
+                                    margin: unset !important;
+
+                                    &>div>div {
+                                        margin-top: 1px;
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                }
+
+                .flexbox-fix:last-child {
+                    display: none !important;
+                }
+            }
+
+        }
+
+        &-switch {
+            margin: 12px 0 0;
+            font-size: 12px;
+            color: #666666;
+            letter-spacing: 0;
+            line-height: 16px;
+            font-weight: 400;
+
+            span {
+                vertical-align: middle;
+                margin-right: 9px;
+            }
+        }
+
+        &-input {
+            display: inline-block;
+            position: relative;
+            margin-top: 12px;
+            font-size: @color-picker-panel-select-font-size;
+
+            &-no-recommend {
+                margin-bottom: 8px;
+            }
+
+            .@{kd-prefix}-select {
+
+                &.bottomLeft,
+                &.topLeft {
+                    position: absolute;
+                    width: 60px !important;
+                    background: #FFFFFF;
+                    right: 0;
+                    left: unset !important;
+                    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
+                    border-radius: 2px;
+                }
+
+                .@{kd-prefix}-select-dropdown {
+                    .@{kd-prefix}-select-item-option {
+                        display: flex;
+                        justify-content: center;
+                        min-width: unset;
+                    }
+                }
+            }
+
+            .@{kd-prefix}-select-bordered {
+                border-radius: 2px;
+                width: @color-picker-panel-select-sizing-width;
+                height: @color-picker-panel-select-sizing-height;
+                min-height: 28px;
+                margin-top: -2px;
+
+                .@{kd-prefix}-select-placeholder {
+                    left: 8px;
+                }
+            }
+
+            .active-option {
+                background-color: #E3EBFF;
+            }
+        }
+
+        &-transparent {
+            width: 60px;
+            height: 28px;
+            margin-left: 8px;
+            text-align: center;
+            font-size: @color-picker-panel-alpha-font-size;
+        }
+
+        &-colorDivContainer {
+            display: grid;
+            grid-template-columns: repeat(12, 1fr);
+            grid-column-gap: 8px;
+            grid-row-gap: 8px;
+            margin-top: 12px;
+
+            li {
+                position: relative;
+                box-sizing: border-box;
+                width: @color-picker-panel-preset-sizing-width;
+                height: @color-picker-panel-preset-sizing-height;
+                border: 1px solid rgba(0, 0, 0, 0.05);
+                border-radius: 2px;
+                list-style: none;
+                cursor: pointer;
+
+                .square {
+                    display: none;
+                    position: absolute;
+                    box-sizing: inherit;
+                    top: -3px;
+                    left: -3px;
+                    width: calc(@color-picker-panel-preset-sizing-width + 4px);
+                    height: calc(@color-picker-panel-preset-sizing-height + 4px);
+                    border: 1px solid rgba(178, 178, 176, 1);
+                    border-radius: 4px;
+
+                    &-click {
+                        display: block;
+                        box-shadow: 0 0 0 1px #e5e5e5 !important;
+                    }
+                }
+
+                &:hover {
+                    .square {
+                        display: block;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// code component mixin here
+.test() {
+  display: inline;
+}
+
+
+
+@color-picker-custom-prefix: ~'--@{kd-prefix}-c-color-picker';
+
+// z-index
+@color-picker-panel-z-index: var(~'@{color-picker-custom-prefix}-panel-z-index', @z-index-popper);
+
+// font
+@color-picker-input-font-size: var(~'@{color-picker-custom-prefix}-input-font-size', @font-size-middle);
+@color-picker-panel-select-font-size: var(~'@{color-picker-custom-prefix}-panel-select-font-size', @font-size-middle);
+@color-picker-panel-alpha-font-size: var(~'@{color-picker-custom-prefix}-panel-alpha-font-size', @font-size-middle);
+
+// sizing
+@color-picker-input-sizing-width: var(~'@{color-picker-custom-prefix}-input-sizing-width', 230px);
+@color-picker-input-sizing-height: var(~'@{color-picker-custom-prefix}-input-sizing-height', 28px);
+@color-picker-input-suffix-sizing-width: var(~'@{color-picker-custom-prefix}-input-suffix-sizing-width', 20px);
+@color-picker-input-suffix-sizing-height: var(~'@{color-picker-custom-prefix}-input-suffix-sizing-height', 20px);
+@color-picker-panel-sizing-width: var(~'@{color-picker-custom-prefix}-panel-sizing-width', 304px);
+@color-picker-panel-select-sizing-width: var(~'@{color-picker-custom-prefix}-panel-select-sizing-width', 212px);
+@color-picker-panel-select-sizing-height: var(~'@{color-picker-custom-prefix}-panel-select-sizing-height', 28px);
+@color-picker-panel-preset-sizing-width: var(~'@{color-picker-custom-prefix}-panel-preset-sizing-width', 16px);
+@color-picker-panel-preset-sizing-height: var(~'@{color-picker-custom-prefix}-panel-preset-sizing-height', 16px);
+
+
+
+
 
 @datePicker-prefix-cls: ~'@{kd-prefix}-date-picker';
 @datePicker-prefix-cls-panel: ~'@{datePicker-prefix-cls}-panel';
@@ -7009,17 +7294,19 @@ textarea {
   .reset-component;
   color: @pagination-text-color;
   font-size: @pagination-font-size;
+  display: flex;
+  align-items: center;
 
   .@{pagination-prefix-cls}-total {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     margin-right: 12px;
-    vertical-align: middle;
   }
 
   .@{pagination-prefix-cls}-current {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     margin-right: 12px;
-    vertical-align: middle;
 
     .@{pagination-prefix-cls}-current-input {
       box-sizing: border-box;
@@ -7053,12 +7340,13 @@ textarea {
 
   .@{pagination-action-prefix-cls} {
     .reset-component;
-    display: inline-block;
-    vertical-align: middle;
+    display: inline-flex;
+    align-items: center;
 
     .@{pagination-action-prefix-cls}-item {
       .reset-component;
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
 
       &.bordered {
         margin-right: calc(2 * @pagination-button-spacing);
@@ -7086,7 +7374,6 @@ textarea {
         border-radius: @radius-border;
         cursor: pointer;
         outline: none;
-        vertical-align: middle;
         transition: border-color @duration-promptly;
 
         &:hover,
@@ -7129,11 +7416,11 @@ textarea {
   .@{pagination-selector-prefix-cls} {
     .reset-component;
     position: relative;
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     margin-left: 20px;
     outline: none;
     height: @pagination-size;
-    vertical-align: middle;
 
     .@{pagination-selector-prefix-cls}-size {
       box-sizing: border-box;
@@ -7210,11 +7497,11 @@ textarea {
 
       &-item {
         .reset-component;
-        display: inline-block;
         height: @pagination-size;
         overflow: hidden;
         margin: 0 8px;
-        vertical-align: middle;
+        display: inline-flex;
+        align-items: center;
         color: @color-text-primary;
 
         &:first-child,
@@ -7224,7 +7511,6 @@ textarea {
 
         .@{pagination-prefix-cls}-current {
           margin-right: 2px;
-          vertical-align: middle;
 
           .@{pagination-prefix-cls}-current-input {
             margin: 0;
@@ -7237,7 +7523,6 @@ textarea {
         }
 
         .@{pagination-prefix-cls}-total {
-          vertical-align: middle;
           margin-right: 0;
         }
 
@@ -7255,7 +7540,9 @@ textarea {
           border-radius: @radius-border;
           cursor: pointer;
           outline: none;
-          vertical-align: middle;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
           transition: border-color @duration-promptly;
 
           &:hover,
@@ -7303,9 +7590,9 @@ textarea {
       &-item {
         .reset-component;
         position: relative;
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
         margin-right: @pagination-button-spacing;
-        vertical-align: middle;
 
         &:last-child {
           margin-right: 0;
@@ -7354,6 +7641,9 @@ textarea {
           border: none;
           background: @color-background;
           transition: color @duration-promptly, border-color @duration-promptly;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
 
           &:disabled {
             cursor: not-allowed;
@@ -7368,14 +7658,15 @@ textarea {
   &.nicety {
     .@{pagination-pages-prefix-cls} {
       .reset-component;
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
 
       &-item {
         .reset-component;
         position: relative;
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
         margin-right: @pagination-button-spacing;
-        vertical-align: middle;
 
         &:last-child {
           margin-right: 0;
@@ -7424,6 +7715,9 @@ textarea {
           padding: 0 6px;
           cursor: pointer;
           outline: none;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
           font-size: @pagination-font-size;
           color: @color-text-primary;
           border-radius: @radius-border;
@@ -7457,9 +7751,9 @@ textarea {
     }
 
     .@{pagination-jumper-prefix-cls} {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
       margin-left: 4px;
-      vertical-align: middle;
 
       .@{pagination-jumper-prefix-cls}-input {
         box-sizing: border-box;
@@ -7494,8 +7788,9 @@ textarea {
         width: @pagination-size;
         height: @pagination-size;
         margin-left: @pagination-button-spacing;
-        line-height: @pagination-size;
-        vertical-align: top;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
         cursor: pointer;
         outline: none;
         color: @color-text-primary;
@@ -7525,25 +7820,24 @@ textarea {
     .@{pagination-options-prefix-cls} {
       .reset-component;
       position: relative;
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
       margin-left: 22px;
       outline: none;
       height: @pagination-size;
       color: @color-text-primary;
-      vertical-align: middle;
 
       .@{pagination-options-prefix-cls}-size {
         position: relative;
         box-sizing: border-box;
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
         min-width: 64px;
         height: @pagination-size;
         margin-right: 8px;
         padding: 0 24px 0 4px;
-        line-height: @pagination-size;
         font-size: @pagination-font-size;
         color: @color-text-primary;
-        text-align: left;
         border-radius: @radius-border;
         border: @pagination-border-size solid @color-border-strong;
         background: @color-background;
@@ -11667,7 +11961,6 @@ template {
   list-style: none;
   font-feature-settings: @font-feature-settings;
 }
-
 @kd-prefix: kd;
 
 /* -----------  color  ——————---- start */
@@ -11687,7 +11980,7 @@ template {
 
 @theme-color-disabled: @theme-color-level3;
 @theme-color-hover: @theme-color-level5;
-@theme-color-click: @theme-color-level7;// 点击色
+@theme-color-click: @theme-color-level7; // 点击色
 @theme-color-active-light: @theme-color-level1; // 浅色选中
 @theme-color-active-dark: @theme-color; // 深色选中
 @hover-color: #f5f5f5; // 中性的悬停色
@@ -11737,9 +12030,9 @@ template {
 /* -----------  color  ——————---- end */
 
 /* -----------  motion  ——————---- start */
-@ease-out: cubic-bezier(0,.4,.4,1);
-@ease-in: cubic-bezier(0.4,0,1,0.6);
-@ease: cubic-bezier(0.4,0,0.6,1);
+@ease-out: cubic-bezier(0, .4, .4, 1);
+@ease-in: cubic-bezier(0.4, 0, 1, 0.6);
+@ease: cubic-bezier(0.4, 0, 0.6, 1);
 /* -----------  motion  ——————---- end */
 
 /* -----------  transition  ——————---- start */
@@ -12157,6 +12450,11 @@ template {
 @date-ranges-width: 160px;
 
 /* -----------  DatePicker  ——————---- end */
+
+/* -----------  ColorPicker  ——————---- start */
+
+/* -----------  ColorPicker  ——————---- end */
+
 /* -----------  Tree  ——————---- start */
 @tree-node-height: 28px;
 @tree-font-size: @font-size;
@@ -12373,7 +12671,6 @@ template {
 
 /* -----------  AdvancedSelector  ——————---- end */
 
-
 @global-custom-prefix: '--@{kd-prefix}-g';
 
 @color-theme: var(~'@{global-custom-prefix}-color-theme', @theme-color);