benyuanzhang
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
Kagol 2024-02-27 10:02:24 +08:00 committed by GitHub
parent 2a84fcdb7c
commit 2f7e49159e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 136 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/theme/src/date-panel/index.less
View File

@ -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;

7
packages/theme/src/date-panel/smb-theme.js Normal file
View File

@ -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'
}

5
packages/theme/src/date-panel/vars.less
View File

@ -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)

1
packages/theme/src/date-picker/index.less
View File

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

6
packages/theme/src/date-picker/smb-theme.js Normal file
View File

@ -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'
}

1
packages/theme/src/date-picker/vars.less
View File

@ -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;
}

34
packages/theme/src/date-table/index.less
View File

@ -79,8 +79,8 @@
position: relative;
div {
height: 24px;
min-width: 36px;
height: var(--ti-date-table-td-div-height);
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 {
color: var(--ti-date-table-td-normal-text-color);
background-color: var(--ti-date-table-bg-color-current-select);
border-radius: var(--ti-date-table-border-radius-current-select);
&.current:not(.disabled) {
span {
color: var(--ti-date-table-td-normal-text-color);
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 {

18
packages/theme/src/date-table/smb-theme.js
View File

@ -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'
}

11
packages/theme/src/date-table/vars.less
View File

@ -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;
}

19
packages/theme/src/month-table/index.less
View File

@ -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);
font-weight: 700;
color: var(--ti-month-table-cell-today-text-color);
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;
line-height: 32px;
height: var(--ti-month-table-cell-height);
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;
}
}
}

10
packages/theme/src/month-table/smb-theme.js Normal file
View File

@ -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'
}

7
packages/theme/src/month-table/vars.less
View File

@ -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;
}

84
packages/theme/src/picker/index.js
View File

@ -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'
}

2
packages/theme/src/picker/index.less
View File

@ -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;

3
packages/theme/src/picker/smb-theme.js Normal file
View File

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

29
packages/theme/src/theme-tool.js
View File

@ -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]
// 提高权重，促使主题变换成功
compName = `${compName}[class*=tiny]`
return compName
return this.getSelectorByKey(threeKey) || this.getSelectorByKey(twoKey) || compNameList[1]
}
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}`

3
packages/theme/src/theme.config.js
View File

@ -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',