Merge branch 'develop' into feature/anchor-child-level

docs/web/api/table.en-US.md

@@ -28,6 +28,13 @@ Simple table with data switched using pagination. Use border lines and zebra str
 
 {{ base }}
 
+### Highlight Row Table
+
+set table property `activeRowType` to allow table row highlight.
+You try it with different keyboards, for example: ArrowUp/ArrowDown/Space/Shift/ESC.
+
+{{ highlight }}
+
 ### Customizable Style Table
 
 - Use the table property `rowClassName` to set the row class name.

docs/web/api/table.md

@@ -26,6 +26,13 @@ spline: data
 
 {{ base }}
 
+### 行高亮表格
+
+支持鼠标点击或者键盘操作高亮表格行，支持仅高亮一行，或者高亮多行。
+键盘操作说明：表格聚焦后，上下键操作切换高亮行，ESC 清空所有高亮行，空格键切换当前停留行高亮状态，Shift 连续选中高亮行。
+
+{{ highlight }}
+
 ### 可自定义样式的表格
 
 - 使用表格属性 `rowClassName` 设置行类名。

docs/web/api/tree-select.md

@@ -53,3 +53,9 @@ spline: form
 支持自定义选中项展示，常用于组合 label 和 value 展示。
 
 {{ valuedisplay }}
+
+### 自定义前后缀
+
+支持自定义选择器的前缀、后缀，也可以使用suffixIcon自定义翻转箭头图标。
+
+{{ prefixsuffix }}

js/common.ts

@@ -35,3 +35,11 @@ export enum EKeyboardDirection {
   right = 39,
   down = 40,
 }
+
+export const ARROW_DOWN_REG = /ArrowDown/i;
+export const ARROW_UP_REG = /ArrowUp/i;
+export const ESCAPE_REG = /Escape/i;
+export const SPACE_REG = /Space/i;
+export const SHIFT_REG = /Shift/i;
+export const CLEAR_REG = /KeyC/i;
+export const ALL_REG = /(KeyA|KeyL)/i;

style/mobile/components/action-sheet/v2/_index.less

@@ -120,12 +120,12 @@
 
   &__gap-list {
     height: 8px;
-    background-color: @action-sheet-border-color;
+    background-color: @action-sheet-gap-color;
   }
 
   &__gap-grid {
     height: .5px;
-    background-color: @action-sheet-border-color;
+    background-color: @action-sheet-gap-color;
   }
 
   &__cancel {

style/mobile/components/action-sheet/v2/_var.less

@@ -1,14 +1,15 @@
 @action-sheet: ~"@{prefix}-action-sheet";
 
 @action-sheet-list-item-height: var(--td-action-sheet-list-item-height, 56px);
-@action-sheet-list-item-disabled-color: var(--td-action-sheet-list-item-disabled-color, @font-gray-4);
-@action-sheet-border-color: var(--td-action-sheet-border-color, @gray-color-1);
-@action-sheet-color: var(--td-action-sheet-color, @font-gray-1);
+@action-sheet-list-item-disabled-color: var(--td-action-sheet-list-item-disabled-color, @text-color-disabled);
+@action-sheet-border-color: var(--td-action-sheet-border-color, @component-stroke);
+@action-sheet-color: var(--td-action-sheet-color, @text-color-primary);
 @action-sheet-border-radius: var(--td-action-sheet-border-radius, @radius-extra-large);
-@action-sheet-description-color: var(--td-action-sheet-description-color, @font-gray-3);
+@action-sheet-description-color: var(--td-action-sheet-description-color, @text-color-placeholder);
 @action-sheet-text-align: var(--td-action-sheet-text-align, center);
 @action-sheet-cancel-height: var(--td-action-sheet-cancel-height, 48px);
 @action-sheet-dot-size: var(--td-action-sheet-dot-size, 8px);
-@action-sheet-dot-color: var(--td-action-sheet-dot-color, @font-gray-4);
+@action-sheet-dot-color: var(--td-action-sheet-dot-color, @text-color-disabled);
 @action-sheet-dot-active-color: var(--td-action-sheet-dot-active-color, @brand-color);
 @action-sheet-text-weight: var(--td-action-sheet-text-weight, 400);
+@action-sheet-gap-color: var(--td-action-sheet-gap-color, var(--td-bg-color-page, @component-stroke));

style/mobile/components/avatar/v2/_var.less

@@ -15,7 +15,7 @@
 @avatar-border-width-small: var(--td-avatar-border-width-small, 2px);
 @avatar-border-width-medium: var(--td-avatar-border-width-medium, 3px);
 @avatar-border-width-large: var(--td-avatar-border-width-large, 4px);
-@avatar-border-color: var(--td-avatar-border-color, #fff);
+@avatar-border-color: var(--td-avatar-border-color, @bg-color-container);
 @avatar-circle-border-radius: var(--td-avatar-circle-border-radius, @radius-circle);
 @avatar-round-border-radius: var(--td-avatar-round-border-radius, @radius-default);
 

style/mobile/components/button/v2/_var.less

@@ -29,10 +29,10 @@
 @button-large-icon-font-size: var(--td-button-large-icon-font-size, 24px);
 
 // default
-@button-default-color: var(--td-button-default-color, @font-gray-1);
+@button-default-color: var(--td-button-default-color, @text-color-primary);
 @button-default-bg-color: var(--td-button-default-bg-color, @bg-color-component);
 @button-default-border-color: var(--td-button-default-border-color, @bg-color-component);
-@button-default-disabled-color: var(--td-button-default-disabled-color, @font-gray-4);
+@button-default-disabled-color: var(--td-button-default-disabled-color, @text-color-disabled);
 @button-default-disabled-bg: var(--td-button-default-disabled-bg, @bg-color-component-disabled);
 @button-default-disabled-border-color: var(--td-button-default-disabled-border-color, @bg-color-component-disabled);
 // primary
@@ -57,7 +57,7 @@
 @button-danger-disabled-bg: var(--td-button-danger-disabled-bg, @error-color-3);
 @button-danger-disabled-border-color: var(--td-button-danger-disabled-border-color, @error-color-3);
 // default + outline
-@button-default-outline-color: var(--td-button-default-outline-color, @font-gray-1);
+@button-default-outline-color: var(--td-button-default-outline-color, @text-color-primary);
 @button-default-outline-border-color: var(--td-button-default-outline-border-color, @component-border);
 @button-default-outline-disabled-color: var(--td-button-default-outline-disabled-color, @component-border);
 // primary + outline

style/mobile/components/calendar/v2/_index.less

@@ -36,6 +36,7 @@
     right: 16px;
     margin: -12px;
     padding: 12px;
+    color: @calendar-title-color;
   }
 
   &__days {
@@ -93,6 +94,7 @@
       line-height: 24px;
       font-weight: 600;
       margin-top: 8px;
+      color: @calendar-dates-color;
 
       .cursor-pointer();
 

style/mobile/components/calendar/v2/_var.less

@@ -1,10 +1,11 @@
 @calendar-radius: var(--td-calendar-radius, 12px);
 @calendar-bg-color: var(--td-calendar-bg-color, @bg-color-container);
 @calendar-active-color: var(--td-calendar-active-color, @brand-color);
-@calendar-selected-color: var(--td-calendar-selected-color, @font-white-1);
+@calendar-selected-color: var(--td-calendar-selected-color, @text-color-anti);
 @calendar-title-font-size: var(--td-calendar-title-font-size, 18px);
-@calendar-title-color: var(--td-calendar-title-color, @font-gray-1);
-@calendar-days-color: var(--td-calendar-days-color, @font-gray-2);
-@calendar-item-suffix-color: var(--td-calendar-item-suffix-color, @font-gray-3);
+@calendar-title-color: var(--td-calendar-title-color, @text-color-primary);
+@calendar-dates-color: var(--td-calendar-dates-color, @text-color-primary);
+@calendar-days-color: var(--td-calendar-days-color, @text-color-secondary);
+@calendar-item-suffix-color: var(--td-calendar-item-suffix-color, @text-color-placeholder);
 @calendar-item-centre-color: var(--td-calendar-item-centre-color, @brand-color-light);
-@calendar-item-disabled-color: var(--td-calendar-item-disabled-color, @font-gray-4);
+@calendar-item-disabled-color: var(--td-calendar-item-disabled-color, @text-color-disabled);

style/mobile/components/cascader/v2/_index.less

@@ -5,7 +5,7 @@
 .@{cascader} {
   display: flex;
   flex-direction: column;
-  background-color: #fff;
+  background-color: @cascader-bg-color;
   color: @cascader-title-color;
   border-radius: 12px 12px 0 0;
 
@@ -24,6 +24,7 @@
     font-weight: 700;
     text-align: center;
     line-height: 48px;
+    height: 48px;
     font-size: @cascder-title-font-size;
   }
 

style/mobile/components/cascader/v2/_var.less

@@ -1,9 +1,10 @@
 @cascader: ~"@{prefix}-cascader";
 
+@cascader-bg-color: var(--td-cascader-bg-color, @bg-color-container);
 @cascader-active-color: var(--td-cascader-active-color, @brand-color);
-@cascader-disabled-color: var(--td-cascader-disabled-color, @font-gray-4);
-@cascader-title-color: var(--td-cascader-title-color, @font-gray-1);
-@cascader-options-title-color: var(--td-cascader-options-title-color, @font-gray-3);
+@cascader-disabled-color: var(--td-cascader-disabled-color, @text-color-disabled);
+@cascader-title-color: var(--td-cascader-title-color, @text-color-primary);
+@cascader-options-title-color: var(--td-cascader-options-title-color, @text-color-placeholder);
 @cascader-border-color: var(--td-cascader-border-color, @border-color);
 
 @cascader-options-height: var(--td-cascader-options-height, 320px);
@@ -12,4 +13,4 @@
 // steps
 @cascader-step-height: var(--td-cascader-step-height, 44px);
 @cascader-step-dot-size: var(--td-cascader-step-dot-size, 8px);
-@cascader-step-arrow-color: var(--td-cascader-step-arrow-color, @font-gray-3);
+@cascader-step-arrow-color: var(--td-cascader-step-arrow-color, @text-color-placeholder);

style/mobile/components/cell/v2/_index.less

@@ -43,6 +43,10 @@
     font-size: @cell-note-font-size;
   }
 
+  &__title {
+    color: @cell-title-color;
+  }
+
   &__title,
   &__note {
     flex: 1 1 auto;

style/mobile/components/cell/v2/_var.less

@@ -5,18 +5,18 @@
 @cell-bg-color: var(--td-cell-bg-color, @bg-color-container);
 @cell-hover-color: var(--td-cell-hover-color, @bg-color-secondarycontainer);
 @cell-border-color: var(--td-cell-border-color, @component-stroke);
-@cell-border-left-space: var(--td-cell-border-left-space, @cell-horizontal-padding);
+@cell-border-left-space: var(--td-border-left-space, @cell-horizontal-padding);
 @cell-border-right-space: var(--td-cell-border-right-space, 0);
-@cell-description-color: var(--td-cell-description-color, @font-gray-2);
+@cell-description-color: var(--td-cell-description-color, @text-color-secondary);
 @cell-description-font-size: var(--td-cell-description-font-size, @font-size-base);
 @cell-description-line-height: var(--td-cell-description-line-height, 22px);
-@cell-note-color: var(--td-cell-note-color, @font-gray-3);
+@cell-note-color: var(--td-cell-note-color, @text-color-placeholder);
 @cell-note-font-size: var(--td-cell-note-font-size, @font-size-m);
-@cell-title-color: var(--td-cell-title-color, @font-gray-1);
+@cell-title-color: var(--td-cell-title-color, @text-color-primary);
 @cell-title-font-size: var(--td-cell-title-font-size, @font-size-m);
 @cell-left-icon-color: var(--td-cell-left-icon-color, @brand-color);
 @cell-left-icon-font-size: var(--td-cell-left-icon-font-size, 24px);
-@cell-right-icon-color: var(--td-cell-right-icon-color, @font-gray-3);
+@cell-right-icon-color: var(--td-cell-right-icon-color, @text-color-placeholder);
 @cell-right-icon-font-size: var(--td-cell-right-icon-font-size, 24px);
 @cell-required-color: var(--td-cell-required-color, @error-color-6);
 @cell-required-font-size: var(--td-cell-required-font-size, @font-size-m);
@@ -28,5 +28,5 @@
 @cell-group-title-line-height: var(--td-cell-group-title-line-height, 45px);
 @cell-group-title-padding-left: var(--td-cell-group-title-padding-left, 16px);
 @cell-group-title-bg-color: var(--td-cell-group-title-bg-color, @bg-color-secondarycontainer);
-@cell-group-title-color: var(--td-cell-group-title-color, @font-gray-3);
+@cell-group-title-color: var(--td-cell-group-title-color, @text-color-placeholder);
 @cell-group-border-color: var(--td-cell-group-border-color, @border-color);

style/mobile/components/check-tag/v2/_var.less

@@ -12,10 +12,10 @@
 
 // variant
 @tag-outline-bg-color: var(--td-tag-outline-bg-color, @bg-color-container);
-@tag-default-font-color: var(--td-tag-default-font-color, @font-gray-1);
+@tag-default-font-color: var(--td-tag-default-font-color, @text-color-primary);
 
 // status
-@tag-disabled-color: var(--td-tag-disabled-color, @font-gray-4);
+@tag-disabled-color: var(--td-tag-disabled-color, @text-color-disabled);
 @tag-disabled-background-color: var(--td-tag-disabled-background-color, @bg-color-component-disabled);
 @tag-disabled-border-color: var(--td-tag-disabled-border-color, @component-border);
 

style/mobile/components/checkbox/v2/_index.less

@@ -197,7 +197,7 @@
     padding-top: 8px;
     padding-bottom: 8px;
     text-align: center;
-    background-color: #f3f3f3;
+    background-color: @checkbox-tag-bg-color;
     border-radius: 6px;
 
     &.@{checkbox}--checked {

style/mobile/components/checkbox/v2/_var.less

@@ -8,13 +8,14 @@
 @checkbox-vertical-padding: var(--td-checkbox-vertical-padding, 16px);
 @checkbox-bg-color: var(--td-checkbox-bg-color, @bg-color-container);
 @checkbox-border-color: var(--td-checkbox-border-color, @component-stroke);
-@checkbox-title-color: var(--td-checkbox-title-color, @font-gray-1);
-@checkbox-title-disabled-color: var(--td-checkbox-title-disabled-color, @font-gray-4);
-@checkbox-description-color: var(--td-checkbox-description-color, @font-gray-2);
-@checkbox-description-disabled-color: var(--td-checkbox-description-disabled-color, @font-gray-4);
-@checkbox-icon-color: var(--td-checkbox-icon-color, @gray-color-4);
+@checkbox-title-color: var(--td-checkbox-title-color, @text-color-primary);
+@checkbox-title-disabled-color: var(--td-checkbox-title-disabled-color, @text-color-disabled);
+@checkbox-description-color: var(--td-checkbox-description-color, @text-color-secondary);
+@checkbox-description-disabled-color: var(--td-checkbox-description-disabled-color, @text-color-disabled);
+@checkbox-icon-color: var(--td-checkbox-icon-color, var(--td-border-level-2-color, @gray-color-4));
 @checkbox-icon-disabled-color: var(--td-checkbox-icon-disabled-color, @brand-color-disabled);
 @checkbox-icon-disabled-bg-color: var(--td-checkbox-icon-disabled-bg-color, @bg-color-component-disabled);
 @checkbox-icon-checked-color: var(--td-checkbox-icon-checked-color, @brand-color);
 @checkbox-tag-active-bg-color: var(--td-checkbox-tag-active-bg-color, @brand-color-light);
 @checkbox-tag-active-color: var(--td-checkbox-tag-active-color, @brand-color);
+@checkbox-tag-bg-color: var(--td-checkbox-tag-bg-color, @bg-color-component);

style/mobile/components/collapse/v2/_index.less

@@ -62,7 +62,7 @@
     }
 
     .@{cell}__right-icon {
-      color: var(--td-collapse-icon-color, @font-gray-3);
+      color: @collapse-icon-color;
     }
   }
 

style/mobile/components/collapse/v2/_var.less

@@ -1,6 +1,7 @@
-@collapse-header-text-color: var(--td-collapse-header-text-color, @font-gray-1);
-@collapse-content-text-color: var(--td-collapse-content-text-color, @font-gray-1);
-@collapse-header-text-disabled-color: var(--td-collapse-header-text-disabled-color, @font-gray-4);
+@collapse-header-text-color: var(--td-collapse-header-text-color, @text-color-primary);
+@collapse-content-text-color: var(--td-collapse-content-text-color, @text-color-primary);
+@collapse-header-text-disabled-color: var(--td-collapse-header-text-disabled-color, @text-color-disabled);
+@collapse-icon-color: var(--td-collapse-icon-color, @text-color-placeholder);
 
 // font-size
 @collapse-title-font-size: var(--td-collapse-title-font-size, @font-size-m);

style/mobile/components/count-down/v2/_var.less

@@ -1,7 +1,7 @@
 @countdown-small-unit-margin: 4px; // 'small'尺寸单位分割文本左右间距
 @countdown-medium-unit-margin: 5px; // 'medium'尺寸单位分割文本左右间距
 @countdown-large-unit-margin: 6px; // 'large'尺寸单位分割文本左右间距
-@countdown-unit-color: @font-gray-1; // 带单位分割线文本颜色
+@countdown-unit-color: @text-color-primary; // 带单位分割线文本颜色
 @countdown-no-unit-color: @error-color-6; // 无单位分割线文本颜色
 @countdown-large-no-unit-margin: 6px; // 'large'尺寸无单位分割文本左右间距
 @countdown-medium-no-unit-margin: 3px; // 'medium'尺寸无单位分割文本左右间距
@@ -26,9 +26,9 @@
 @countdown-large-no-unit-font-size: 18px; // 'large'尺寸无单位分割文本大小
 
 // 纯数字倒计时文本颜色
-@countdown-default-text-color: var(--td-countdown-default-color, @font-gray-1);
+@countdown-default-text-color: var(--td-countdown-default-color, @text-color-primary);
 // 方形/圆形底倒计时文本颜色
-@countdown-text-color: var(--td-countdown-round-color, @font-white-1);
+@countdown-text-color: var(--td-countdown-round-color, @text-color-anti);
 // 方形/圆形底背景颜色
 @countdown-bg-color: var(--td-countdown-bg-color, @error-color-6);
 // 带方形底倒计时圆角大小

style/mobile/components/dialog/v2/_var.less

@@ -8,12 +8,12 @@
 
 // color
 @dialog-title-font-size: var(--td-dialog-title-font-size, 18px);
-@dialog-title-color: var(--td-dialog-title-color, @font-gray-1);
+@dialog-title-color: var(--td-dialog-title-color, @text-color-primary);
 @dialog-title-line-height: var(--td-dialog-title-line-height, 26px);
 
 @dialog-content-font-size: var(--td-dialog-content-font-size, 16px);
-@dialog-content-color: var(--td-dialog-content-color, @font-gray-2);
+@dialog-content-color: var(--td-dialog-content-color, @text-color-secondary);
 @dialog-content-line-height: var(--td-dialog-content-line-height, 24px);
 
 @dialog-close-font-size: var(--td-dialog-close-font-size, 22px);
-@dialog-close-color: var(--td-dialog-close-color, @font-gray-3);
+@dialog-close-color: var(--td-dialog-close-color, @text-color-placeholder);

style/mobile/components/divider/v2/_var.less

@@ -1,5 +1,5 @@
 @divider-color: var(--td-divider-color, @bg-color-component);
-@divider-content-color: var(--td-divider-content-color, @font-gray-3);
+@divider-content-color: var(--td-divider-content-color, @text-color-placeholder);
 @divider-content-font-size: var(--td-divider-content-font-size, 12px);
 @divider-content-line-height: var(--td-divider-content-line-height, 20px);
 @divider-content-line-style: var(--td-divider-content-line-style, solid);

style/mobile/components/drawer/v2/_index.less

@@ -17,6 +17,7 @@
     font-weight: 600;
     font-size: @drawer-title-font-size;
     padding: 24px 16px 8px;
+    color: @drawer-title-color;
   }
 
   &__sidebar {
@@ -37,7 +38,7 @@
 
       &-title {
         flex: 1;
-        color: var(--td-drawer-title-color);
+        color: @drawer-title-color;
       }
 
       &-icon {

style/mobile/components/drawer/v2/_var.less

@@ -3,7 +3,7 @@
 @drawer-title-padding: var(--td-drawer-title-padding, 24px 16px 8px);
 @drawer-bg-color: var(--td-drawer-bg-color, @bg-color-container);
 @drawer-border-color: var(--td-drawer-border-color, @border-color);
-@drawer-title-color: var(--td-drawer-title-color, @font-gray-1);
+@drawer-title-color: var(--td-drawer-title-color, @text-color-primary);
 @drawer-icon-color: var(--td-drawer-title-color, @drawer-title-color);
 @drawer-item-padding: var(--td-drawer-item-padding, 16px);
 @drawer-item-height: var(--td-drawer-item-height, 24px);

style/mobile/components/dropdown-menu/v2/_var.less

@@ -1,7 +1,7 @@
 @dropdown-menu-bg-color: var(--td-dropdown-menu-bg-colorm, @bg-color-container);
-@dropdown-menu-color: var(--td-dropdown-menu-colorm, @font-gray-1);
+@dropdown-menu-color: var(--td-dropdown-menu-colorm, @text-color-primary);
 @dropdown-menu-active-color: var(--td-dropdown-menu-active-colorm, @brand-color);
-@dropdown-menu-disabled-color: var(--td-dropdown-menu-disabled-colorm, @font-gray-4);
+@dropdown-menu-disabled-color: var(--td-dropdown-menu-disabled-colorm, @text-color-disabled);
 @dropdown-menu-font-size: var(--td-dropdown-menu-font-sizem, 14px);
 @dropdown-menu-icon-size: var(--td-dropdown-menu-icon-sizem, 24px);
 

style/mobile/components/empty/_var.less

@@ -1,7 +1,7 @@
 @empty-icon-font-size: 96px;
 
-@empty-description-color: var(--td-empty-description-color, @font-gray-3);
-@empty-icon-color: var(--td-empty-icon-color, @font-gray-3);
+@empty-description-color: var(--td-empty-description-color, @text-color-placeholder);
+@empty-icon-color: var(--td-empty-icon-color, @text-color-placeholder);
 @empty-description-font-size: var(--td-empty-description-font-size, @font-size-base);
 @empty-description-line-height: var(--td-empty-description-line-height, 44rpx);
 @empty-description-margin-top: var(--td-empty-description-margin-top, @spacer-2);

style/mobile/components/footer/_index.less

@@ -55,6 +55,7 @@
     font-size: @footer-logo-title-font-size; // 图标配置，标题文本大小
     line-height: @footer-logo-title-line-height; // 图标配置，标题文本行高
     font-style: italic;
+    color: @footer-title-color;
   }
 
   &__title-url {