@kdcloudjs/kdesign 1.7.46 → 1.7.47

package/dist/kdesign-complete.less

@@ -919,6 +919,114 @@
 @base-data-dropdown-z-index: var(~'@{base-data-custom-prefix}-dropdown-z-index', @z-index-popper);
 
 
+@breadcrumb-prefix-cls: ~'@{kd-prefix}-breadcrumb';
+
+.@{breadcrumb-prefix-cls},
+.@{breadcrumb-prefix-cls}-more-panel {
+  .breadcrumb;
+
+  display: flex;
+  height: 22px;
+
+  &-hide-icon {
+    position: absolute;
+    z-index: -999999;
+    top: -999999px;
+    visibility: hidden;
+  }
+
+  &-item {
+    display: flex;
+    cursor: text;
+
+    &-separator {
+      padding: 0 @breadcrumb-separator-spacing-padding-horizontal;
+      color: @breadcrumb-separator-color-text;
+    }
+
+    &-link {
+      &:hover {
+        color: #3987ed;
+        cursor: pointer;
+      }
+    }
+
+    &-emphasize-model {
+      color: @breadcrumb-color-text;
+    }
+
+    &-emphasize-model-current {
+      color: @breadcrumb-active-color-text;
+    }
+
+    &-weaken-model {
+      color: @breadcrumb-active-color-text;
+    }
+
+    &-weaken-model-current {
+      color: @breadcrumb-color-text;
+    }
+
+    &-text {
+      white-space: nowrap;
+
+      &:last-child {
+        text-overflow: ellipsis;
+      }
+    }
+
+    &-icon {
+      margin-right: 4px;
+    }
+  }
+
+  .kd-dropdown-trigger {
+    margin-left: 4px;
+  }
+}
+
+.@{breadcrumb-prefix-cls}-popper {
+  max-width: none !important;
+}
+
+
+
+.breadcrumb() {
+  color: @breadcrumb-color-text;
+  font-size: @breadcrumb-font-size;
+  font-weight: @breadcrumb-font-weight;
+}
+
+
+
+@breadcrumb-custom-prefix: ~'--@{kd-prefix}-c-breadcrumb';
+
+// color
+@breadcrumb-color-text: var(~'@{breadcrumb-custom-prefix}-color-text', #737373);
+@breadcrumb-active-color-text: var(~'@{breadcrumb-custom-prefix}-active-color-text', #111111);
+@breadcrumb-separator-color-text: var(~'@{breadcrumb-custom-prefix}-separator-color-text', #b2b2b2);
+
+// font
+@breadcrumb-font-size: var(~'@{breadcrumb-custom-prefix}-font-size', @font-size-middle);
+@breadcrumb-font-weight: var(~'@{breadcrumb-custom-prefix}-font-weight', @font-weight-light);
+
+// line-height
+
+// motion
+
+// radius
+
+// shadow
+
+// sizing
+
+// spacing
+@breadcrumb-separator-spacing-padding-horizontal: var(~'@{breadcrumb-custom-prefix}-separator-spacing-padding-horizontal', 8px);
+
+// z-index
+
+
+
 @btn-prefix-cls: ~'@{kd-prefix}-btn';
 
 .@{btn-prefix-cls} {
@@ -4568,6 +4676,145 @@
 
 
 
+@divider-prefix-cls: ~'@{kd-prefix}-divider';
+
+.@{divider-prefix-cls} {
+  .divider;
+
+  width: 900px;
+  padding: @divider-spacing-padding-horizontal;
+  border-block-start: 1px solid @color-border-strong;
+
+  &-vertical {
+    display: inline-block;
+    border-inline-start: 1px solid @color-border-strong;
+    width: 0;
+    height: 1em;
+  }
+
+  &-solid {
+    .borderStyle(solid)
+  }
+
+  &-dashed {
+    .borderStyle(dashed)
+  }
+
+  &-dotted {
+    .borderStyle(dotted)
+  }
+
+  &-with-text {
+    border: unset;
+
+    .@{divider-prefix-cls}-inner-text {
+      display: flex;
+      align-items: center;
+
+      &::before {
+        content: '';
+        width: 74px;
+        margin-right: 8px;
+        border-block-start: 1px solid @color-border-strong;
+      }
+
+      &::after {
+        content: '';
+        width: calc(100% - 74px);
+        margin-left: 8px;
+        border-block-start: 1px solid @color-border-strong;
+      }
+    }
+  }
+
+  &-with-text-center {
+    .@{divider-prefix-cls}-inner-text {
+
+      &::before,
+      &::after {
+        width: 50%;
+      }
+    }
+  }
+
+  &-with-text-right {
+    .@{divider-prefix-cls}-inner-text {
+
+      &::before {
+        width: calc(100% - 74px);
+
+      }
+
+      &::after {
+        width: 74px;
+      }
+    }
+  }
+
+  &-margin-left {
+    .@{divider-prefix-cls}-inner-text {
+
+      &::before {
+        width: 0;
+
+      }
+
+      &::after {
+        width: 100%;
+      }
+    }
+  }
+
+  &-margin-right {
+    .@{divider-prefix-cls}-inner-text {
+
+      &::before {
+        width: 100%;
+
+      }
+
+      &::after {
+        width: 0;
+      }
+    }
+  }
+}
+
+
+
+.divider() {
+  color: @divider-color-text;
+  font-size: @divider-font-size;
+}
+
+.borderStyle(@border-style) {
+  border-block-start-style: @border-style;
+  border-inline-start-style: @border-style;
+
+  .@{divider-prefix-cls}-inner-text {
+
+    &::before,
+    &::after {
+      border-block-start-style: @border-style !important
+    }
+  }
+}
+
+
+
+@divider-custom-prefix: ~'--@{kd-prefix}-c-divider';
+
+// color
+@divider-color-text: var(~'@{divider-custom-prefix}-color-text', @color-text-primary);
+
+// font
+@divider-font-size: var(~'@{divider-custom-prefix}-font-size', @font-size-small);
+
+// spacing
+@divider-spacing-padding-horizontal: var(~'@{divider-custom-prefix}-spacing-padding-horizontal', 0px);
+
+
+
 
 
 

package/dist/kdesign.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @kdcloudjs/kdesign v1.7.45
+ *   @kdcloudjs/kdesign v1.7.46
  * 
  *   Copyright 2020-present, Kingdee, Inc.
  *   All rights reserved.
@@ -3495,6 +3495,181 @@ template {
     普通组件内部自身层级应设置在0-100间
 */
 /* -----------  zIndex  ——————---- end */
+.kd-breadcrumb,
+.kd-breadcrumb-more-panel {
+  color: var(--kd-c-breadcrumb-color-text, #737373);
+  font-size: var(--kd-c-breadcrumb-font-size, var(--kd-g-font-size-middle, 14px));
+  font-weight: var(--kd-c-breadcrumb-font-weight, var(--kd-g-font-weight, 400));
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 22px;
+}
+.kd-breadcrumb-hide-icon,
+.kd-breadcrumb-more-panel-hide-icon {
+  position: absolute;
+  z-index: -999999;
+  top: -999999px;
+  visibility: hidden;
+}
+.kd-breadcrumb-item,
+.kd-breadcrumb-more-panel-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+}
+.kd-breadcrumb-item-separator,
+.kd-breadcrumb-more-panel-item-separator {
+  padding: 0 var(--kd-c-breadcrumb-separator-spacing-padding-horizontal, 8px);
+  color: var(--kd-c-breadcrumb-separator-color-text, #b2b2b2);
+}
+.kd-breadcrumb-item-link:hover,
+.kd-breadcrumb-more-panel-item-link:hover {
+  color: #3987ed;
+  cursor: pointer;
+}
+.kd-breadcrumb-item-emphasize-model,
+.kd-breadcrumb-more-panel-item-emphasize-model {
+  color: var(--kd-c-breadcrumb-color-text, #737373);
+}
+.kd-breadcrumb-item-emphasize-model-current,
+.kd-breadcrumb-more-panel-item-emphasize-model-current {
+  color: var(--kd-c-breadcrumb-active-color-text, #111111);
+}
+.kd-breadcrumb-item-weaken-model,
+.kd-breadcrumb-more-panel-item-weaken-model {
+  color: var(--kd-c-breadcrumb-active-color-text, #111111);
+}
+.kd-breadcrumb-item-weaken-model-current,
+.kd-breadcrumb-more-panel-item-weaken-model-current {
+  color: var(--kd-c-breadcrumb-color-text, #737373);
+}
+.kd-breadcrumb-item-text,
+.kd-breadcrumb-more-panel-item-text {
+  white-space: nowrap;
+}
+.kd-breadcrumb-item-text:last-child,
+.kd-breadcrumb-more-panel-item-text:last-child {
+  text-overflow: ellipsis;
+}
+.kd-breadcrumb-item-icon,
+.kd-breadcrumb-more-panel-item-icon {
+  margin-right: 4px;
+}
+.kd-breadcrumb .kd-dropdown-trigger,
+.kd-breadcrumb-more-panel .kd-dropdown-trigger {
+  margin-left: 4px;
+}
+.kd-breadcrumb-popper {
+  max-width: none !important;
+}
+
+/* -----------  color  ——————---- start */
+/* -----------  color  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  font  ——————---- start */
+/* -----------  font  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+/* -----------  Button  ——————---- start */
+/* -----------  Button  ——————---- end */
+/* -----------  Collapse  ——————---- start */
+/* -----------  Collapse  ——————---- end */
+/* -----------  Card  ——————---- start */
+/* -----------  Card  ——————---- end */
+/* -----------  Carousel  ——————---- start */
+/* -----------  Carousel  ——————---- end */
+/* -----------  Cascader  ——————---- start */
+/* -----------  Cascader  ——————---- end */
+/* -----------  Switch  ——————---- start */
+/* -----------  Switch  ——————---- end */
+/* -----------  Input  ——————---- start */
+/* -----------  Input  ——————---- end */
+/* -----------  InputNumber  ——————---- start */
+/* -----------  InputNumber  ——————---- end */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- end */
+/* -----------  Radio  ——————---- start */
+/* -----------  Radio  ——————---- end */
+/* -----------  icon  ——————---- start */
+/* -----------  icon  ——————---- end */
+/* -----------  Popconfirm  ——————---- start */
+/* -----------  Popconfirm  ——————---- end */
+/* -----------  Progress  ——————---- start */
+/* -----------  Progress  ——————---- end */
+/* -----------  Pagination  ——————---- start */
+/* -----------  Pagination  ——————---- end */
+/* -----------  Timeline  ——————---- start */
+/* -----------  Timeline  ——————---- end */
+/* -----------  Tabs  ——————---- start */
+/* -----------  Tabs  ——————---- end */
+/* -----------  Select  ——————---- start */
+/* -----------  Select  ——————---- end */
+/* -----------  Rate  ——————---- start */
+/* -----------  Rate  ——————---- end */
+/* -----------  Dropdown  ——————---- start */
+/* -----------  Dropdown  ——————---- end */
+/* -----------  Tooltip  ——————---- start */
+/* -----------  Tooltip  ——————---- end */
+/* -----------  Transfer  ——————---- start */
+/* -----------  Transfer  ——————---- end */
+/* -----------  DatePicker  ——————---- start */
+/* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
+/* -----------  Tree  ——————---- start */
+/* -----------  Tree  ——————---- end */
+/* -----------  Alert  ——————---- start */
+/* -----------  Alert  ——————---- end */
+/* -----------  Split-Panel ——————---- start */
+/* -----------  Split-Panel ——————---- end */
+/* -----------  Modal  ——————---- start */
+/* -----------  Modal  ——————---- end */
+/* -----------  Steps  ——————---- start */
+/* -----------  Steps  ——————---- end */
+/* -----------  Form  ——————---- start */
+/* -----------  Form  ——————---- end */
+/* -----------  Tag ——————---- start */
+/* -----------  Tag ——————---- end */
+/* -----------  Menu  ——————---- start */
+/* -----------  Menu  ——————---- end */
+/* -----------  notice  ——————---- start */
+/* -----------  message  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Layout  ——————---- start */
+/* -----------  Layout  ——————---- end */
+/* -----------  Typography  ——————---- start */
+/* -----------  Typography  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Badge  ——————---- start */
+/* -----------  Badge  ——————---- end */
+/* -----------  Anchor  ——————---- start */
+/* -----------  Anchor  ——————---- end */
+/* -----------  Avatar  ——————---- start */
+/* -----------  Avatar  ——————---- end */
+/* -----------  AdvancedSelector  ——————---- start */
+/* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 .kd-btn {
   padding: 0;
   position: relative;
@@ -7518,6 +7693,198 @@ template {
   cursor: pointer;
 }
 
+/* -----------  color  ——————---- start */
+/* -----------  color  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  font  ——————---- start */
+/* -----------  font  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+/* -----------  Button  ——————---- start */
+/* -----------  Button  ——————---- end */
+/* -----------  Collapse  ——————---- start */
+/* -----------  Collapse  ——————---- end */
+/* -----------  Card  ——————---- start */
+/* -----------  Card  ——————---- end */
+/* -----------  Carousel  ——————---- start */
+/* -----------  Carousel  ——————---- end */
+/* -----------  Cascader  ——————---- start */
+/* -----------  Cascader  ——————---- end */
+/* -----------  Switch  ——————---- start */
+/* -----------  Switch  ——————---- end */
+/* -----------  Input  ——————---- start */
+/* -----------  Input  ——————---- end */
+/* -----------  InputNumber  ——————---- start */
+/* -----------  InputNumber  ——————---- end */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- end */
+/* -----------  Radio  ——————---- start */
+/* -----------  Radio  ——————---- end */
+/* -----------  icon  ——————---- start */
+/* -----------  icon  ——————---- end */
+/* -----------  Popconfirm  ——————---- start */
+/* -----------  Popconfirm  ——————---- end */
+/* -----------  Progress  ——————---- start */
+/* -----------  Progress  ——————---- end */
+/* -----------  Pagination  ——————---- start */
+/* -----------  Pagination  ——————---- end */
+/* -----------  Timeline  ——————---- start */
+/* -----------  Timeline  ——————---- end */
+/* -----------  Tabs  ——————---- start */
+/* -----------  Tabs  ——————---- end */
+/* -----------  Select  ——————---- start */
+/* -----------  Select  ——————---- end */
+/* -----------  Rate  ——————---- start */
+/* -----------  Rate  ——————---- end */
+/* -----------  Dropdown  ——————---- start */
+/* -----------  Dropdown  ——————---- end */
+/* -----------  Tooltip  ——————---- start */
+/* -----------  Tooltip  ——————---- end */
+/* -----------  Transfer  ——————---- start */
+/* -----------  Transfer  ——————---- end */
+/* -----------  DatePicker  ——————---- start */
+/* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
+/* -----------  Tree  ——————---- start */
+/* -----------  Tree  ——————---- end */
+/* -----------  Alert  ——————---- start */
+/* -----------  Alert  ——————---- end */
+/* -----------  Split-Panel ——————---- start */
+/* -----------  Split-Panel ——————---- end */
+/* -----------  Modal  ——————---- start */
+/* -----------  Modal  ——————---- end */
+/* -----------  Steps  ——————---- start */
+/* -----------  Steps  ——————---- end */
+/* -----------  Form  ——————---- start */
+/* -----------  Form  ——————---- end */
+/* -----------  Tag ——————---- start */
+/* -----------  Tag ——————---- end */
+/* -----------  Menu  ——————---- start */
+/* -----------  Menu  ——————---- end */
+/* -----------  notice  ——————---- start */
+/* -----------  message  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Layout  ——————---- start */
+/* -----------  Layout  ——————---- end */
+/* -----------  Typography  ——————---- start */
+/* -----------  Typography  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Badge  ——————---- start */
+/* -----------  Badge  ——————---- end */
+/* -----------  Anchor  ——————---- start */
+/* -----------  Anchor  ——————---- end */
+/* -----------  Avatar  ——————---- start */
+/* -----------  Avatar  ——————---- end */
+/* -----------  AdvancedSelector  ——————---- start */
+/* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+.kd-divider {
+  color: var(--kd-c-divider-color-text, var(--kd-g-color-text-primary, #212121));
+  font-size: var(--kd-c-divider-font-size, var(--kd-g-font-size-small, 12px));
+  width: 900px;
+  padding: var(--kd-c-divider-spacing-padding-horizontal, 0px);
+  -webkit-border-before: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
+          border-block-start: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
+}
+.kd-divider-vertical {
+  display: inline-block;
+  -webkit-border-start: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
+          border-inline-start: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
+  width: 0;
+  height: 1em;
+}
+.kd-divider-solid {
+  border-block-start-style: solid;
+  border-inline-start-style: solid;
+}
+.kd-divider-solid .kd-divider-inner-text::before,
+.kd-divider-solid .kd-divider-inner-text::after {
+  border-block-start-style: solid !important;
+}
+.kd-divider-dashed {
+  border-block-start-style: dashed;
+  border-inline-start-style: dashed;
+}
+.kd-divider-dashed .kd-divider-inner-text::before,
+.kd-divider-dashed .kd-divider-inner-text::after {
+  border-block-start-style: dashed !important;
+}
+.kd-divider-dotted {
+  border-block-start-style: dotted;
+  border-inline-start-style: dotted;
+}
+.kd-divider-dotted .kd-divider-inner-text::before,
+.kd-divider-dotted .kd-divider-inner-text::after {
+  border-block-start-style: dotted !important;
+}
+.kd-divider-with-text {
+  border: unset;
+}
+.kd-divider-with-text .kd-divider-inner-text {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.kd-divider-with-text .kd-divider-inner-text::before {
+  content: '';
+  width: 74px;
+  margin-right: 8px;
+  -webkit-border-before: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
+          border-block-start: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
+}
+.kd-divider-with-text .kd-divider-inner-text::after {
+  content: '';
+  width: calc(100% - 74px);
+  margin-left: 8px;
+  -webkit-border-before: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
+          border-block-start: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
+}
+.kd-divider-with-text-center .kd-divider-inner-text::before,
+.kd-divider-with-text-center .kd-divider-inner-text::after {
+  width: 50%;
+}
+.kd-divider-with-text-right .kd-divider-inner-text::before {
+  width: calc(100% - 74px);
+}
+.kd-divider-with-text-right .kd-divider-inner-text::after {
+  width: 74px;
+}
+.kd-divider-margin-left .kd-divider-inner-text::before {
+  width: 0;
+}
+.kd-divider-margin-left .kd-divider-inner-text::after {
+  width: 100%;
+}
+.kd-divider-margin-right .kd-divider-inner-text::before {
+  width: 100%;
+}
+.kd-divider-margin-right .kd-divider-inner-text::after {
+  width: 0;
+}
+
 /* -----------  color  ——————---- start */
 /* -----------  color  ——————---- end */
 /* -----------  motion  ——————---- start */