feat(date-picker): [date-picker] support xdesign (#1417)

* feat(date-picker): support xdesign type="date"

* feat(date-picker): support xdesign type="month"

* feat(date-picker): support xdesign type="date-range"

* feat(date-picker): support xdesign type="month-range"

* feat(date-picker): support xdesign type="dates"

* feat(theme-tool): theme config support setting multiple selectors

packages/theme/src/date-panel/index.less

@@ -40,6 +40,10 @@
 
   &__content {
     position: relative;
+    border-top: solid 1px var(--ti-picker-panel-content-border-color);
+    padding-top: var(--ti-picker-panel-content-padding-top);
+    padding-left: var(--ti-picker-panel-content-padding-left);
+    padding-right: var(--ti-picker-panel-content-padding-right);
   }
 
   &__footer {
@@ -109,7 +113,7 @@
 
   &__icon-btn {
     font-size: var(--ti-picker-panel-font-size);
-    line-height: 30px;
+    line-height: var(--ti-picker-panel-icon-btn-line-height);
     fill: var(--ti-picker-panel-icon-color-btn);
     border: 0;
     background: 0 0;

packages/theme/src/date-panel/smb-theme.js

@@ -0,0 +1,7 @@
+export const tinyDatePanelSmbTheme = {
+  'ti-picker-panel-content-border-color': 'var(--ti-base-color-common-5, #f0f0f0)',
+  'ti-picker-panel-content-padding-top': '12px',
+  'ti-picker-panel-content-padding-left': '16px',
+  'ti-picker-panel-content-padding-right': '16px',
+  'ti-picker-panel-icon-btn-line-height': '20px'
+}

packages/theme/src/date-panel/vars.less

@@ -25,6 +25,11 @@
   --ti-picker-panel-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
   --ti-picker-panel-hover-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
   --ti-picker-panel-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
+  --ti-picker-panel-content-border-color: transparent;
+  --ti-picker-panel-content-padding-top: 0;
+  --ti-picker-panel-content-padding-left: 0;
+  --ti-picker-panel-content-padding-right: 0;
+  --ti-picker-panel-icon-btn-line-height: 30px;
   // 无用(hide)
   --ti-picker-panel-shortcut-selected-text-color: var(--ti-common-color-selected-text-color, #fff);
   // 无用(hide)

packages/theme/src/date-picker/index.less

@@ -58,6 +58,7 @@
   &__header {
     margin: 12px;
     text-align: center;
+    line-height: var(--ti-date-picker-header-line-height);
   }
 
   &__header--bordered {

packages/theme/src/date-picker/smb-theme.js

@@ -0,0 +1,6 @@
+export const tinyDatePickerSmbTheme = {
+  'ti-date-picker-width': '284px',
+  'ti-date-picker-header-line-height': '20px',
+  'ti-date-picker-header-label-hover-text-color': 'var(--ti-base-color-brand-2)',
+  'ti-date-picker-border-color': 'transparent'
+}

packages/theme/src/date-picker/vars.less

@@ -28,4 +28,5 @@
   --ti-date-picker-range-bg-color: var(--ti-base-color-brand-2, #e9edfa);
   --ti-date-picker-range-hover-bg-color: var(--ti-base-color-brand-2, #e9edfa);
   --ti-date-picker-header-label-hover-text-color: var(--ti-base-color-brand-7, #526ecc);
+  --ti-date-picker-header-line-height: 32px;
 }

packages/theme/src/date-table/index.less

@@ -79,8 +79,8 @@
     position: relative;
 
     div {
-      height: 24px;
+      height: var(--ti-date-table-td-div-height);
-      min-width: 36px;
+      min-width: var(--ti-date-table-td-div-width);
       padding: 3px 0;
       box-sizing: border-box;
     }
@@ -93,7 +93,7 @@
       margin: 0 auto;
       position: absolute;
       left: 50%;
-      top: 5px;
+      top: var(--ti-date-table-td-span-top);
       transform: translateX(-50%);
     }
 
@@ -123,6 +123,13 @@
         bottom: 5px;
       }
 
+      span {
+        min-width: var(--ti-date-table-td-today-width);
+        height: var(--ti-date-table-td-today-height);
+        border-radius: var(--ti-date-table-td-today-border-radius);
+        border: solid var(--ti-date-table-td-today-circle-border-width) var(--ti-date-table-td-today-circle-border-color);
+      }
+
       &.end-date,
       &.start-date {
         span {
@@ -131,15 +138,23 @@
       }
     }
 
-    &.available:hover span {
+    &.available:not(.today):hover span {
       background-color: var(--ti-date-table-hover-bg-color);
       border-radius: var(--ti-date-table-border-radius-current-select);
+      border-color: transparent;
     }
 
-    &.current:not(.disabled) span {
+    &.current:not(.disabled) {
-      color: var(--ti-date-table-td-normal-text-color);
+      span {
-      background-color: var(--ti-date-table-bg-color-current-select);
+        color: var(--ti-date-table-td-normal-text-color);
-      border-radius: var(--ti-date-table-border-radius-current-select);
+        background-color: var(--ti-date-table-bg-color-current-select);
+        border-radius: var(--ti-date-table-border-radius-current-select);
+        border-color: transparent;
+      }
+
+      &:after {
+        background-color: transparent;
+      }
     }
 
     &.end-date,
@@ -150,6 +165,8 @@
 
       span {
         background-color: var(--ti-date-table-bg-color-current-select);
+        border-radius: var(--ti-date-table-start-date-border-radius);
+        border: 0;
       }
     }
 
@@ -214,6 +231,7 @@
         background-color: var(--ti-date-table-bg-color-current-select);
         color: var(--ti-date-table-td-normal-text-color);
         border: none;
+        border-radius: var(--ti-date-table-cell-selected-border-radius);
       }
 
       &.available:hover span {

packages/theme/src/date-table/smb-theme.js

@@ -4,5 +4,21 @@ export const tinyDateTableSmbTheme = {
   'ti-date-table-td-span-height': '28px',
   'ti-date-table-bg-color-current-select': 'var(--ti-base-color-brand-2)',
   'ti-date-table-week-bg-color-current-select': 'var(--ti-base-color-brand-8)',
-  'ti-date-table-week-bg-color-current-hover': 'var(--ti-base-color-brand-8)'
+  'ti-date-table-week-bg-color-current-hover': 'var(--ti-base-color-brand-8)',
+  'ti-date-table-td-today-width': '26px',
+  'ti-date-table-td-today-height': '26px',
+  'ti-date-table-td-today-border-radius': '13px',
+  'ti-date-table-td-today-circle-border-color': 'var(--ti-base-color-brand)',
+  'ti-date-table-td-today-circle-border-width': '1px',
+  'ti-date-table-hover-bg-color': 'var(--ti-base-color-brand-8)',
+
+  'ti-date-table-range-bg-color': 'var(--ti-base-color-brand-8)',
+  'ti-date-table-td-div-height': '28px',
+  'ti-date-table-td-div-width': '28px',
+  'ti-date-table-range-hover-bg-color': 'var(--ti-base-color-brand-8)',
+  'ti-date-table-td-border-radius': '14px',
+  'ti-date-table-td-span-top': '3px',
+  'ti-date-table-start-date-border-radius': '14px',
+  'ti-date-table-td-today-border-color': 'transparent',
+  'ti-date-table-cell-selected-border-radius': '14px'
 }

packages/theme/src/date-table/vars.less

@@ -37,4 +37,15 @@
   --ti-date-table-bg-color-current-select: var(--ti-base-color-brand-6, #5e7ce0);
   --ti-date-table-text-color: var(--ti-common-color-info-normal, #252b3a);
   --ti-date-table-border-radius-current-select: 0;
+  --ti-date-table-td-today-width: 36px;
+  --ti-date-table-td-today-height: 24px;
+  --ti-date-table-td-today-border-radius: 0;
+  --ti-date-table-td-today-circle-border-color: transparent;
+  --ti-date-table-td-today-circle-border-width: 0;
+
+  --ti-date-table-td-div-height: 24px;
+  --ti-date-table-td-div-width: 36px;
+  --ti-date-table-td-span-top: 5px;
+  --ti-date-table-start-date-border-radius: 0;
+  --ti-date-table-cell-selected-border-radius: 0;
 }

packages/theme/src/month-table/index.less

@@ -41,20 +41,23 @@
     }
 
     div {
-      height: 32px;
+      height: var(--ti-month-table-td-div-height);
       box-sizing: border-box;
+      padding: 0 4px;
     }
 
     &.today {
       .cell {
-        color: var(--ti-month-table-td-text-bg-color);
+        color: var(--ti-month-table-cell-today-text-color);
-        font-weight: 700;
+        font-weight: var(--ti-month-table-cell-today-font-weight);
+        border: solid 1px var(--ti-month-table-cell-today-border-color);
       }
 
       &.end-date,
       &.start-date {
         .cell {
           color: var(--ti-month-table-td-date-text-color);
+          border-color: transparent;
         }
       }
     }
@@ -73,14 +76,15 @@
 
     .cell {
       width: 100%;
-      height: 32px;
+      height: var(--ti-month-table-cell-height);
-      line-height: 32px;
+      line-height: var(--ti-month-table-cell-height);
       display: block;
       color: var(--ti-date-picker-text-color);
 
       &:hover {
         color: var(--ti-date-picker-text-color);
-        background: var(--ti-date-picker-hover-bg-color);
+        background: var(--ti-month-table-cell-hover-bg-color);
+        border-color: transparent;
       }
     }
 
@@ -106,7 +110,7 @@
     &:not(.in-range) {
       .cell {
         width: auto;
-        border-radius: 2px;
+        border-radius: var(--ti-month-table-cell-border-radius);
       }
     }
 
@@ -115,6 +119,7 @@
       &:hover {
         color: var(--ti-date-table-td-normal-text-color);
         background: var(--ti-month-table-td-text-bg-color);
+        border-color: transparent;
       }
     }
   }

packages/theme/src/month-table/smb-theme.js

@@ -0,0 +1,10 @@
+export const tinyMonthTableSmbTheme = {
+  'ti-month-table-td-text-bg-color': 'var(--ti-base-color-brand-2)',
+  'ti-month-table-cell-today-font-weight': 'normal',
+  'ti-month-table-cell-height': '28px',
+  'ti-month-table-cell-border-radius': '14px',
+  'ti-month-table-cell-today-text-color': 'var(--ti-common-color-info-normal)',
+  'ti-month-table-cell-today-border-color': 'var(--ti-base-color-brand)',
+  'ti-month-table-cell-hover-bg-color': 'var(--ti-base-color-brand-8)',
+  'ti-month-table-td-div-height': '28px'
+}

packages/theme/src/month-table/vars.less

@@ -12,7 +12,14 @@
 
 .component-css-vars-month-table() {
   --ti-month-table-td-text-bg-color: var(--ti-base-color-brand-7, #526ecc);
+  --ti-month-table-cell-today-text-color: var(--ti-common-color-info-normal, #252b3a);
   --ti-month-table-td-range-bg-color: #f2f6fc;
   --ti-month-table-td-date-text-color: var(--ti-common-color-light, #fff);
   --ti-month-table-td-date-border-radius: 24px;
+  --ti-month-table-cell-today-font-weight: 700;
+  --ti-month-table-cell-height: 32px;
+  --ti-month-table-cell-border-radius: 2px;
+  --ti-month-table-cell-today-border-color: transparent;
+  --ti-month-table-cell-hover-bg-color: var(--ti-base-color-brand-2);
+  --ti-month-table-td-div-height: 32px;
 }

packages/theme/src/picker/index.js

@@ -1,84 +0,0 @@
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-
-export default {
-  'tiny-date-picker-width': '280px',
-  'tiny-date-picker-font-size': '12px',
-  'tiny-date-picker-text-color': '#333',
-  'tiny-date-picker-bg-color': '#fff',
-  'tiny-date-picker-border-radius': '2px',
-  'tiny-date-picker-border-color': '#d9d9d9',
-  'tiny-date-picker-hover-bg-color': '#e6f7ff',
-  'tiny-date-picker-disabled-text-color': '#999',
-  'tiny-date-picker-disabled-bg-color': '#f5f5f5',
-  'tiny-date-picker-selected-bg-color': '#f5f5f5',
-  'tiny-date-picker-icon-font-size': '14px',
-  'tiny-date-picker-current-select-bg-color': '#1890ff',
-  'tiny-date-picker-current-border-color': '#1890ff',
-  'tiny-date-table-td-border-radius': '15px',
-  'tiny-date-table-td-pre-month-text-color': '#999',
-  'tiny-date-table-td-nomal-text-color': '#fff',
-  'tiny-date-table-td-range-bg-color': '#f2f6fc',
-  'tiny-month-table-td-text-bg-color': '#40a9ff',
-  'tiny-month-table-td-range-bg-color': '#f2f6fc',
-  'tiny-month-table-td-date-text-color': '#fff',
-  'tiny-month-table-td-date-border-radius': '24px',
-  'tiny-year-table-td-text-color': '#40a9ff',
-  'tiny-year-table-td-icon-color': '#303133',
-  'tiny-time-spinner-arrow-text-color': '#909399',
-  'tiny-time-spinner-arrow-hover-text-color': '#40a9ff',
-  'tiny-time-spinner-item-active-text-color': '#303133',
-  'tiny-picker-panel-line-height': '30px',
-  'tiny-picker-panel-shortcut-font-size': '14px',
-  'tiny-picker-panel-icon-color-btn': '#999',
-  'tiny-picker-panel-icon-color-btn-hover': '#40a9ff',
-  'tiny-picker-panel-icon-color-btn-disabled': '#bfbfbf',
-  'tiny-date-picker-header-label-hover-text-color': '#40a9ff',
-  'tiny-date-range-picker-header-font-size': '16px',
-  'tiny-date-range-picker-time-header-icon-color': '#303133',
-  'tiny-time-range-picker-header-font-size': '14px',
-  'tiny-time-panel-footer-height': '36px',
-  'tiny-time-panel-btn-text-color': '#303133',
-  'tiny-time-panel-btn-confirm-text-color': '#40a9ff',
-  'tiny-range-separator-text-color': '#303133',
-
-  'tiny-date-picker-current-border-radius': '0',
-  'tiny-date-picker-range-bg-color': '#e9edfa',
-  'tiny-date-picker-range-hover-bg-color': '#e9edfa',
-  'tiny-date-table-td-width': '36px',
-  'tiny-date-table-td-height': '34px',
-  'tiny-date-table-td-padding-vertical': '4px',
-  'tiny-date-table-td-padding-horizontal': '0',
-  'tiny-date-table-td-span-width': '36px',
-  'tiny-date-table-td-span-height': '24px',
-  'tiny-date-table-th-text-color': '#adb0b8',
-  'tiny-date-table-td-today-border-color': '#5e7ce0',
-  'tiny-date-table-td-today-text-color': '#333',
-  'tiny-date-table-week-current-bg-color': '#e9edfa',
-  'tiny-date-table-week-current-hover-bg-color': '#beccfa',
-  'tiny-time-spinner-item-font-weight': '700',
-  'tiny-time-spinner-item-bg-color': 'transparent',
-  'tiny-time-spinner-list-border-color': 'transparent',
-  'tiny-picker-panel-border-color': 'rgba(0, 0, 0, 0.15)',
-  'tiny-picker-panel-box-shadow': '2px 3px 7px rgba(0, 0, 0, 0.15)',
-  'tiny-time-panel-border-color': '#d9d9d9',
-  'tiny-time-panel-box-shadow': '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
-  'tiny-time-panel-btn-bg-color': 'transparent',
-  'tiny-time-panel-btn-padding-vertical': '0',
-  'tiny-time-panel-btn-padding-horizontal': '5px',
-  'tiny-time-panel-btn-border-radius': '2px',
-  'tiny-time-panel-btn-height': '28px',
-  'tiny-time-panel-btn-min-width': 'inherit',
-  'tiny-time-panel-btn-font-weight': '800',
-  'tiny-time-panel-btn-confirm-hover-bg-color': 'transparent',
-  'tiny-date-editor-input-icon-color-fill': '#575d6c'
-}

packages/theme/src/picker/index.less

@@ -86,7 +86,7 @@
   .@{input-prefix-cls}__icon-container {
     width: initial;
     cursor: pointer;
-    fill: var(--ti-date-editor-input-icon-color-fill);
+    color: var(--ti-date-editor-input-icon-color-fill);
 
     .baseClearicon {
       margin-right: 8px;

packages/theme/src/picker/smb-theme.js

@@ -0,0 +1,3 @@
+export const tinyPickerSmbTheme = {
+  'ti-date-editor-input-icon-color-fill': 'var(--ti-base-color-common-2)'
+}

packages/theme/src/theme-tool.js

@@ -75,22 +75,37 @@ export default class TinyThemeTool {
     this.contentElement.setAttribute('tiny-theme', this.currentTheme.id)
   }
 
+  /**
+   * 获取需要设置主题变量的选择器，支持多个选择器（在 theme.config.js 中配置，多个选择器之间通过逗号分隔）
+   * @param {theme.config 配置文件中的 key} key
+   * @returns 需要设置主题变量的选择器
+   * @example
+   * 示例1：输入：checkbox-button，输出：.tiny-checkbox-button[class*=tiny]
+   * 示例2：输入：month-table，输出：.tiny-month-table[class*=tiny],.tiny-year-table[class*=tiny]
+   */
+  getSelectorByKey(key) {
+    if (!definedComponents[key]) return
+
+    let selector = ''
+    const keyItems = definedComponents[key].split(',')
+    keyItems.forEach((componentName, index) => {
+      // 加上 [class*=tiny] 是为了提高权重，促使主题变换成功
+      selector += '.tiny-' + componentName + '[class*=tiny]' + (index < keyItems.length - 1 ? ',' : '')
+    })
+    return selector
+  }
+
   // 通过 `组件css变量`，来推导出组件名： 从 ti-checkbox-button-bg-color， 推导出 checkbox-button
   findClassName(name) {
     const compNameList = name.split('-')
     if (compNameList.length < 2) {
       return false
     }
-    let compName = 'tiny-'
     const threeKey = `${compNameList[1]}-${compNameList[2]}-${compNameList[3]}`
     const twoKey = `${compNameList[1]}-${compNameList[2]}`
 
     // 优先三段式命名的组件名，优先级从高到低为三段-二段-一段
-    compName += definedComponents[threeKey] || definedComponents[twoKey] || compNameList[1]
+    return this.getSelectorByKey(threeKey) || this.getSelectorByKey(twoKey) || compNameList[1]
-
-    // 提高权重，促使主题变换成功
-    compName = `${compName}[class*=tiny]`
-    return compName
   }
 
   formatCSSVariables(themeData) {
@@ -115,7 +130,7 @@ export default class TinyThemeTool {
     })
 
     Object.keys(componentsMap).forEach((item) => {
-      componentsCssVar += `.${item}{${componentsMap[item].join('')}}`
+      componentsCssVar += `${item}{${componentsMap[item].join('')}}`
     })
 
     return `${rootCssVar}}${componentsCssVar}`

packages/theme/src/theme.config.js

@@ -37,6 +37,7 @@ export default {
   'date-picker': 'date-picker',
   'data-range': 'data-range',
   'date-table': 'date-table',
+  'date-editor': 'date-editor',
   'fall-menu': 'fall-menu',
   'form-valid': 'form__valid',
   'form-item': 'form-item',
@@ -45,7 +46,7 @@ export default {
   'ip-address': 'ip-address',
   'link-menu': 'link-menu',
   'month-range': 'month-range',
-  'month-table': 'month-table',
+  'month-table': 'month-table,year-table',
   'nav-menu': 'nav-menu',
   'option-group': 'option-group',
   'popup-horiz-menu': 'popup-horiz-menu',