fix(theme): [tree,tooltip,transfer, cascader] update unsolved smb components

examples/sites/demos/pc/app/tree/icons-composition-api.vue

@@ -23,8 +23,8 @@ import { Tree as TinyTree } from '@opentiny/vue'
 import { iconPutAway, iconExpand, iconRightO, iconEditorTable, iconFile } from '@opentiny/vue-icon'
 
 const icon = iconRightO()
-const shrinkIcon = iconPutAway()
-const expandIcon = iconExpand()
+const shrinkIcon = iconExpand()
+const expandIcon = iconPutAway()
 const tinyIconEditorTable = iconEditorTable()
 const tinyIconFile = iconFile()
 

examples/sites/demos/pc/app/tree/icons.vue

@@ -28,8 +28,8 @@ export default {
   data() {
     return {
       icon: iconRightO(),
-      shrinkIcon: iconPutAway(),
-      expandIcon: iconExpand(),
+      shrinkIcon: iconExpand(),
+      expandIcon: iconPutAway(),
       tinyIconEditorTable: iconEditorTable(),
       tinyIconFile: iconFile(),
       data: [

packages/theme/src/cascader-menu/vars.less

@@ -18,13 +18,9 @@
   // 下拉菜单为空时的文本色
   --ti-cascader-menu-empty-text-color: var(--ti-common-color-text-weaken, #8a8e99);
   // 下拉菜单列表垂直方向的内边距
-  --ti-cascader-menu-list-padding-vertical: var(--ti-common-space-0, 0px);
+  --ti-cascader-menu-list-padding-vertical: var(--ti-common-space-2x);
   // 下拉菜单列表水平方向的内边距
   --ti-cascader-menu-list-padding-horizontal: var(--ti-common-space-0, 0px);
-  // 下拉菜单列表垂直方向的外边距
-  --ti-cascader-menu-list-padding-vertical: var(--ti-common-space-0, 0px);
-  // 下拉菜单列表水平方向的外边距
-  --ti-cascader-menu-list-padding-horizontal: var(--ti-common-space-0, 0px);
   // 下拉菜单的宽度
   --ti-cascader-menu-width: 159px;
 }

packages/theme/src/cascader/index.less

@@ -104,7 +104,7 @@
     margin-bottom: var(--ti-cascader-dropdown-margin-bottom);
     font-size: var(--ti-cascader-font-size);
     background: var(--ti-cascader-dropdown-bg-color);
-    border: 1px solid #e4e7ed;
+    border: none;
     border-radius: var(--ti-cascader-border-radius);
     box-shadow: var(--ti-cascader-dropdown-box-shadow);
     &.is-auto-size {

packages/theme/src/cascader/vars.less

@@ -62,7 +62,7 @@
   // 搜索框的占位符的文本色（没有生效）
   --ti-cascader-search-input-placeholder-text-color: var(--ti-common-color-placeholder, #adb0b8);
   // 下拉框的阴影
-  --ti-cascader-dropdown-box-shadow: var(--ti-common-box-shadow);
+  --ti-cascader-dropdown-box-shadow: var(--ti-common-shadow-3-left);
   // 多选模式输入框宽度
   --ti-cascader-width: '100%';
   // 下拉框的左侧外边距

packages/theme/src/mixins/tooltip.less

@@ -14,73 +14,7 @@
   background: @bgcolor;
   color: @color;
 
-  &[x-placement^='top'] .popper__arrow {
-    border-top-color: @border-color;
-
-    &::after {
-      border-top-color: @border-color;
-    }
-  }
-
-  &[x-placement^='bottom'] .popper__arrow {
-    border-bottom-color: @border-color;
-
-    &::after {
-      border-bottom-color: @border-color;
-    }
-  }
-
-  &[x-placement^='left'] .popper__arrow {
-    border-left-color: @border-color;
-
-    &::after {
-      border-left-color: @border-color;
-    }
-  }
-
-  &[x-placement^='right'] .popper__arrow {
-    border-right-color: @border-color;
-
-    &::after {
-      border-right-color: @border-color;
-    }
-  }
-}
-
-.tooltip-light (@color, @bgcolor, @border-color) {
-  background: @bgcolor;
-  color: @color;
-  border: 1px solid @border-color;
-
-  &[x-placement^='top'] .popper__arrow {
-    border-top-color: @border-color;
-
-    &::after {
-      border-top-color: @bgcolor;
-    }
-  }
-
-  &[x-placement^='bottom'] .popper__arrow {
-    border-bottom-color: @border-color;
-
-    &::after {
-      border-bottom-color: @bgcolor;
-    }
-  }
-
-  &[x-placement^='left'] .popper__arrow {
-    border-left-color: @border-color;
-
-    &::after {
-      border-left-color: @bgcolor;
-    }
-  }
-
-  &[x-placement^='right'] .popper__arrow {
-    border-right-color: @border-color;
-
-    &::after {
-      border-right-color: @bgcolor;
-    }
+  & .popper__arrow {
+    background-color: @bgcolor;
   }
 }

packages/theme/src/tooltip/index.less

@@ -43,94 +43,46 @@
     word-wrap: break-word;
     box-shadow: var(--ti-tooltip-box-shadow);
 
-    .popper__arrow,
-    .popper__arrow::after {
+    .popper__arrow {
       position: absolute;
       display: block;
-      width: 0;
-      height: 0;
-      border-color: transparent;
-      border-style: solid;
-    }
-    /* 控制箭头尺寸
-    6px:  var(--ti-tooltip-popper-border-width);
-    -6px:  var(--ti-tooltip-popper-neg-border-width);
-    */
-    .popper__arrow {
-      border-width: var(--ti-tooltip-popper-border-width);
-    }
-
-    .popper__arrow::after {
-      content: ' ';
-      border-width: var(--ti-tooltip-popper-border-width);
+      // 原来是用border来模拟三角形的，现在是通过div模拟，所以将border-width赋值给div的width.
+      width: var(--ti-tooltip-popper-border-width);
+      height: var(--ti-tooltip-popper-border-height);
+      background-color: var(--ti-tooltip-popper-border-color);
+      transform: rotateZ(45deg);
+      border-radius: 2px;
     }
 
     &[x-placement^='top'] {
       margin-bottom: 12px;
 
       .popper__arrow {
-        bottom: var(--ti-tooltip-popper-neg-border-width);
-        border-top-color: var(--ti-tooltip-popper-border-color);
-        border-bottom-width: 0;
-
-        &::after {
-          bottom: 1px;
-          margin-left: var(--ti-tooltip-popper-neg-border-width);
-          border-top-color: var(--ti-tooltip-popper-border-color);
-          border-bottom-width: 0;
-        }
+        bottom: -7px;
       }
     }
 
     &[x-placement^='bottom'] {
       margin-top: 12px;
 
       .popper__arrow {
-        top: var(--ti-tooltip-popper-neg-border-width);
-        border-top-width: 0;
-        border-bottom-color: var(--ti-tooltip-popper-border-color);
-
-        &::after {
-          top: 1px;
-          margin-left: var(--ti-tooltip-popper-neg-border-width);
-          border-top-width: 0;
-          border-bottom-color: var(--ti-tooltip-popper-border-color);
-        }
+        top: -7px;
       }
     }
 
     &[x-placement^='right'] {
       margin-left: 12px;
 
       .popper__arrow {
-        left: var(--ti-tooltip-popper-neg-border-width);
-        border-right-color: var(--ti-tooltip-popper-border-color);
-        border-left-width: 0;
-
-        &::after {
-          bottom: var(--ti-tooltip-popper-neg-border-width);
-          left: 1px;
-          border-right-color: var(--ti-tooltip-popper-border-color);
-          border-left-width: 0;
-        }
+        left: -3px;
       }
     }
 
     &[x-placement^='left'] {
       margin-right: 12px;
 
       .popper__arrow {
-        right: var(--ti-tooltip-popper-neg-border-width);
-        border-right-width: 0;
-        border-left-color: var(--ti-tooltip-popper-border-color);
-
-        &::after {
-          right: 1px;
-          bottom: var(--ti-tooltip-popper-neg-border-width);
-          margin-left: var(--ti-tooltip-popper-neg-border-width);
-          border-right-width: 0;
-          border-left-color: var(--ti-tooltip-popper-border-color);
-        }
+        right: -3px;
       }
     }
     &.is-normal {
@@ -184,7 +136,7 @@
     }
 
     &.is-light {
-      .tooltip-light(
+      .tooltip-type(
         var(--ti-tooltip-popper-light-text-color),
         var(--ti-tooltip-popper-light-bg-color),
         var(--ti-tooltip-popper-light-border-color)

packages/theme/src/tooltip/vars.less

@@ -11,10 +11,14 @@
 */
 
 .component-css-vars-tooltip() {
-  // 弹框箭头的尺寸,(hide)
-  --ti-tooltip-popper-border-width: 8px;
-  // 弹框箭头的负尺寸,用于偏移(hide)
-  --ti-tooltip-popper-neg-border-width: calc(var(--ti-tooltip-popper-border-width) * -1);
+  // 弹框箭头的宽度,(hide)
+  --ti-tooltip-popper-border-width: 12px;
+  // 弹框箭头的高度,(hide)
+  --ti-tooltip-popper-border-height: 20px;
+  // 弹框箭头的圆角(hide)
+  --ti-tooltip-popper-border-radius: 2px;
+  // 弹框三角默认边框色
+  --ti-tooltip-popper-border-color: #191919;
   // 弹框字体行高(hide)
   --ti-tooltip-popper-font-line-height: var(--ti-common-line-height-number);
   // 弹框字体(hide)
@@ -32,8 +36,7 @@
   --ti-tooltip-popper-border-radius: 8px;
   // 悬浮弹出框字号
   --ti-tooltip-popper-font-size: var(--ti-common-font-size-base, 12px);
-  // 弹框三角默认边框色
-  --ti-tooltip-popper-border-color: #191919;
+
   // 正常背景色 (hide)
   --ti-tooltip-popper-normal-bg-color: var(--ti-common-color-bg-dark-deep, #464c59);
   // 文字提示正常文本色(hide)
@@ -42,11 +45,11 @@
   --ti-tooltip-popper-normal-border-color: var(--ti-common-color-bg-dark-deep, #464c59);
 
   // info类型弹框背景色
-  --ti-tooltip-popper-info-bg-color: #1476FF;
+  --ti-tooltip-popper-info-bg-color: #1476ff;
   // info类型弹框文本色
   --ti-tooltip-popper-info-text-color: var(--ti-common-color-light, #fff);
   // info类型弹框三角边框色
-  --ti-tooltip-popper-info-border-color: #1476FF;
+  --ti-tooltip-popper-info-border-color: #1476ff;
 
   // error类型弹框背景色
   --ti-tooltip-popper-error-bg-color: var(--ti-common-color-danger-normal, #c7000b);
@@ -82,7 +85,7 @@
   --ti-tooltip-popper-light-border-color: #fff;
 
   // 弹框阴影
-  --ti-tooltip-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.08);
+  --ti-tooltip-box-shadow: 0px 5px 9px 0px rgba(51, 56, 84, 0.25);
   // 弹框垂直内边距
   --ti-tooltip-padding-vertical: 12px;
   // 弹框水平内边距

packages/theme/src/transfer/index.less

@@ -277,6 +277,16 @@
       display: inline-block;
       box-sizing: border-box;
       border-radius: var(--ti-transfer-panel-filter-border-radius);
+      border-bottom-color: #f0f0f0 !important;
+      padding-left: 24px;
+      padding-right: 0;
+    }
+    .@{input-prefix-cls}__prefix {
+      left: 0;
+    }
+
+    .@{input-prefix-cls}__suffix {
+      right: 4px;
     }
   }
 

packages/theme/src/transfer/vars.less

@@ -106,7 +106,7 @@
   // 面板头部背景色
   --ti-transfer-header-bg-color: #fff;
   // 面板头部边框色
-  --ti-transfer-header-border-color: rgba(0,0,0,0.08);
+  --ti-transfer-header-border-color: rgba(0, 0, 0, 0.08);
   // 面板头部文本色
   --ti-transfer-header-text-color: var(--ti-common-color-info-normal, #252b3a);
   // 面板头部span文本色
@@ -162,9 +162,9 @@
   // 面板多选框左侧内边距
   --ti-transfer-panel-item-checkbox-padding-left: calc(var(--ti-common-space-5x, 20px) + 2px);
   // 面板搜索框左侧内边距
-  --ti-transfer-panel-filter-padding-left: var(--ti-common-space-2x, 8px);
+  --ti-transfer-panel-filter-padding-left: var(--ti-common-space-4x, 8px);
   // 面板搜索框右侧内边距
-  --ti-transfer-panel-filter-padding-right: var(--ti-common-space-2x, 8px);
+  --ti-transfer-panel-filter-padding-right: var(--ti-common-space-4x, 8px);
   // 面板搜索框顶部内边距
   --ti-transfer-panel-filter-padding-top: var(--ti-common-space-2x, 8px);
   // 面板搜索框底部内边距

packages/theme/src/tree/index.less

@@ -93,7 +93,7 @@
     .@{tree-node-prefix-cls}.is-current:not(.show-checkbox) > .@{tree-node-prefix-cls}__content {
       .@{tree-node-prefix-cls}__content-box,
       .@{tree-node-prefix-cls}__content-right {
-        background-color: var(--ti-tree-node-content-current-bg-color);
+        background-color: var(--ti-tree-node-highlight-bg-color);
       }
     }
   }

packages/theme/src/tree/vars.less

@@ -69,7 +69,7 @@
   // 节点左内边距
   --ti-tree-node-padding-left: var(--ti-common-space-4x);
   // 节点高亮背景色
-  --ti-tree-node-highlight-bg-color: var(--ti-common-color-light);
+  --ti-tree-node-highlight-bg-color: var(--ti-base-text-color-2);
   // 节点内容高度
   --ti-tree-node-content-height: var(--ti-common-space-8x);
   // 节点内容边框弧度

packages/vue/src/cascader/src/pc.vue

@@ -199,7 +199,7 @@ import Scrollbar from '@opentiny/vue-scrollbar'
 import CascaderPanel from '@opentiny/vue-cascader-panel'
 import FilterBox from '@opentiny/vue-filter-box'
 import Tooltip from '@opentiny/vue-tooltip'
-import { iconClose, iconChevronDown, iconChevronUp, iconYes } from '@opentiny/vue-icon'
+import { iconClose, IconTriangleDown, IconUpWard, iconYes } from '@opentiny/vue-icon'
 import '@opentiny/vue-theme/cascader/index.less'
 
 export default defineComponent({
@@ -259,8 +259,8 @@ export default defineComponent({
     TinyFilterBox: FilterBox,
     TinyCascaderPanel: CascaderPanel,
     IconClose: iconClose(),
-    IconChevronDown: iconChevronDown(),
-    IconChevronUp: iconChevronUp(),
+    IconChevronDown: IconTriangleDown(),
+    IconChevronUp: IconUpWard(),
     IconYes: iconYes(),
     TinyTooltip: Tooltip
   },