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

feat(radio): [radio] Adapting to the SMB theme (#1959) 

* feat(radio): [radio] Apating to the SMB theme

* feat(radio): [radio] Adapting to the SMB theme
This commit is contained in:
东风使命必达 2024-08-22 15:39:58 +08:00 committed by GitHub
parent 86e214f66e
commit 4c1baf4b3f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 74 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/sites/demos/pc/app/radio/dynamic-disable-composition-api.vue
View File

@ -10,7 +10,7 @@
<div class="mt-20">
<tiny-radio-group v-model="radio2">
<tiny-radio-button label="1">日度</tiny-radio-button>
<tiny-radio-button disabled label="1">日度</tiny-radio-button>
<tiny-radio-button disabled label="2">月度</tiny-radio-button>
<tiny-radio-button label="3">年度</tiny-radio-button>
</tiny-radio-group>

2
examples/sites/demos/pc/app/radio/dynamic-disable.vue
View File

@ -10,7 +10,7 @@
<div class="mt-20">
<tiny-radio-group v-model="radio2">
<tiny-radio-button label="1">日度</tiny-radio-button>
<tiny-radio-button disabled label="1">日度</tiny-radio-button>
<tiny-radio-button disabled label="2">月度</tiny-radio-button>
<tiny-radio-button label="3">年度</tiny-radio-button>
</tiny-radio-group>

23
packages/theme/src/radio-button/index.less
View File

@ -18,9 +18,10 @@
.@{radio-button-prefix-cls} {
.component-css-vars-radio-button();
border-radius: var(--ti-radio-button-border-radius);
&:first-child &__inner {
border-left: 1px solid var(--ti-radio-button-border-color);
border-radius: var(--ti-radio-button-border-radius) 0 0 var(--ti-radio-button-border-radius);
border-left: var(--ti-radio-button-border-left) solid var(--ti-radio-button-border-color);
border-radius: var(--ti-radio-button-child-left-border-radius) var(--ti-radio-button-child-right-border-radius) var(--ti-radio-button-child-right-border-radius) var(--ti-radio-button-child-left-border-radius);
}
&:first-child &__orig-radio:checked + &__inner {
@ -28,7 +29,7 @@
}
&:last-child &__inner {
border-radius: 0 var(--ti-radio-button-border-radius) var(--ti-radio-button-border-radius) 0;
border-radius: var(--ti-radio-button-child-right-border-radius) var(--ti-radio-button-child-left-border-radius) var(--ti-radio-button-child-left-border-radius) var(--ti-radio-button-child-right-border-radius);
}
&:first-child:last-child &__inner {
@ -40,6 +41,7 @@
display: inline-block;
position: relative;
outline: 0;
margin-right: var(--ti-radio-button-margin-right);
}
&__inner {
@ -47,9 +49,9 @@
font-size: var(--ti-radio-button-font-size);
background: var(--ti-radio-button-bg-color);
border: 1px solid var(--ti-radio-button-border-color);
padding: 12px 20px;
padding: var(--ti-radio-button-padding-verticals) 20px;
font-weight: 500;
border-radius: 0;
border-radius: var(--ti-radio-button-border-radius);
border-left: 0;
line-height: 1;
white-space: nowrap;
@ -128,7 +130,7 @@
&--medium &__inner {
font-size: var(--ti-radio-button-medium-font-size);
padding: 10px 20px;
border-radius: 0;
border-radius: var(--ti-radio-button-margin-right);
&.is-round {
padding: 10px 20px;
@ -138,7 +140,7 @@
&--small &__inner {
font-size: var(--ti-radio-button-font-size);
padding: 9px 15px;
border-radius: 0;
border-radius: var(--ti-radio-button-margin-right);
&.is-round {
padding: 9px 15px;
@ -148,7 +150,7 @@
&--mini &__inner {
font-size: var(--ti-radio-button-font-size);
padding: 7px 15px;
border-radius: 0;
border-radius: var(--ti-radio-button-margin-right);
&.is-round {
padding: 7px 15px;
@ -158,4 +160,9 @@
&:focus:not(.is-focus):not(:active):not(.is-disabled) {
box-shadow: 0 0 2px 2px var(--ti-radio-bordered-hover-border-color);
}
&.is-active.is-disabled {
color: var(--ti-radio-button-active-disabled-color);
background-color: var(--ti-radio-button-active-disabled-bg-color);;
}
}

13
packages/theme/src/radio-button/smb-theme.js
View File

@ -2,7 +2,16 @@ export const tinyRadioButtonSmbTheme = {
'ti-radio-button-checked-normal-bg-color': '#1476FF',
'ti-radio-button-checked-normal-border-color': '#1476FF',
'ti-radio-button-checked-normal-box-shadow': '#1476FF',
'ti-radio-button-checked-hover-bg-color': '#1293ff',
'ti-radio-button-checked-hover-bg-color': 'var(--ti-common-color-prompt-bg)',
'ti-radio-button-hover-text-color': 'var(--ti-common-color-bg-emphasize)',
'ti-radio-button-checked-hover-border-color': '#1293ff',
'ti-radio-button-checked-hover-box-shadow': '#1293ff'
'ti-radio-button-checked-hover-box-shadow': '#1293ff',
'ti-radio-button-margin-right': 'var(--ti-common-space-2)',
'ti-radio-button-border-radius': 'var(--ti-common-space-6)',
'ti-radio-button-border-left': 0,
'ti-radio-button-child-left-border-radius': 'var(--ti-common-space-6)',
'ti-radio-button-child-right-border-radius': 'var(--ti-common-space-6)',
'ti-radio-button-padding-verticals': '9px',
'ti-radio-button-active-disabled-color': 'var(--ti-common-color-text-weaken)',
'ti-radio-button-active-disabled-bg-color': 'var(--ti-common-color-bg-dark-disabled)'
}

9
packages/theme/src/radio-button/vars.less
View File

@ -14,7 +14,7 @@
--ti-radio-button-text-color: var(--ti-common-color-info-normal, #252b3a);
--ti-radio-button-hover-text-color: var(--ti-common-color-light, #fff);
--ti-radio-button-border-color: var(--ti-common-color-border, #adb0b8);
--ti-radio-button-border-radius: var(--ti-common-border-radius-normal, 2px);
--ti-radio-button-border-radius: 0;
--ti-radio-button-font-size: var(--ti-common-font-size-base, 12px);
--ti-radio-button-bg-color: var(--ti-common-color-light, #fff);
--ti-radio-button-checked-normal-bg-color: var(--ti-common-color-primary-normal, #5e7ce0);
@ -26,4 +26,11 @@
--ti-radio-button-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
--ti-radio-button-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
--ti-radio-button-medium-font-size: var(--ti-common-font-size-1, 14px);
--ti-radio-button-margin-right: unset;
--ti-radio-button-border-left: 1px;
--ti-radio-button-child-left-border-radius: var(--ti-common-space-2);
--ti-radio-button-child-right-border-radius: 0;
--ti-radio-button-padding-verticals: var(--ti-common-space-3x);
--ti-radio-button-active-disabled-color: var(--ti-common-color-text-weaken);
--ti-radio-button-active-disabled-bg-color: var(--ti-common-color-bg-dark-disabled);
}

13
packages/theme/src/radio-group/index.less
View File

@ -10,6 +10,7 @@
*
*/
@import '../mixins/common.less';
@import '../custom.less';
@import './vars.less';
@ -18,6 +19,8 @@
@radio-prefix-cls: ~'@{css-prefix}radio';
.@{radio-group-prefix-cls} {
.component-css-vars-radio-group();
display: inline-flex;
&.list-inline {
@ -28,20 +31,22 @@
margin-right: 0;
&:not(:last-child) {
margin-bottom: var(--ti-radio-button-margin-bottom);
margin-bottom: var(--ti-radio-group-margin-bottom);
}
}
.@{radio-button-prefix-cls} {
display: block;
margin-bottom: var(--ti-radio-button-margin-bottom);
border-radius: var(--ti-radio-button-border-radius);
&:first-child .@{radio-button-prefix-cls}__inner {
border-radius: var(--ti-radio-button-border-radius) var(--ti-radio-button-border-radius) 0 0;
border-top: 1px solid var(--ti-radio-button-border-color);
border-radius: var(--ti-radio-button-top-border-radius) var(--ti-radio-button-top-border-radius) var(--ti-radio-button-bottom-border-radius) var(--ti-radio-button-bottom-border-radius);
border-top: var(--ti-radio-button-border-top) solid var(--ti-radio-button-border-color);
}
&:last-child .@{radio-button-prefix-cls}__inner {
border-radius: 0 0 var(--ti-radio-button-border-radius) var(--ti-radio-button-border-radius);
border-radius: var(--ti-radio-button-bottom-border-radius) var(--ti-radio-button-bottom-border-radius) var(--ti-radio-button-top-border-radius) var(--ti-radio-button-top-border-radius);
}
&.is-active .@{radio-button-prefix-cls}__inner {

11
packages/theme/src/radio-group/index.js → packages/theme/src/radio-group/smb-theme.js
View File

@ -9,7 +9,12 @@
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/
export default {
// radio-group
export const tinyRadioGroupSmbTheme = {
'ti-radio-group-margin-bottom': '16px',
'ti-radio-button-border-color': 'none',
'ti-radio-button-border-radius': '6px',
'ti-radio-button-margin-bottom': '2px',
'ti-radio-button-top-border-radius': '6px',
'ti-radio-button-bottom-border-radius': '6px',
'ti-radio-button-border-top': 0
}

8
packages/theme/src/radio-group/vars.less
View File

@ -9,3 +9,11 @@
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/
.component-css-vars-radio-group() {
--ti-radio-group-margin-bottom: var(--ti-common-space-2x);
--ti-radio-button-border-radius: unset;
--ti-radio-button-margin-bottom: 0;
--ti-radio-button-top-border-radius: var(--ti-common-space-2);
--ti-radio-button-bottom-border-radius: 0;
--ti-radio-button-border-top: var(--ti-common-border-weight-normal);
}

11
packages/theme/src/radio/smb-theme.js
View File

@ -1,3 +1,14 @@
/**
* 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 const tinyRadioSmbTheme = {
'ti-radio-margin-right': 'var(--ti-common-space-6x)',
'ti-radio-bordered-border-color': 'var(--ti-common-color-line-normal)',

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

@ -86,8 +86,8 @@ export default {
'year-table': 'year-table',
'skeleton-item': 'skeleton-item',
'radio-button': 'radio-button',
'color-select-panel': 'color-select-panel',
'color-picker': 'color-picker',
'radio': 'radio',
'radio-group': 'radio-group',
'split': 'split-wrapper',
'float-bar': 'float-bar'
}