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

fix(cascader): [cascader] fix component theme (#3184) 

* fix(cascader): [cascader] fix component theme

* fix(cascader): [cascader] fix component theme
This commit is contained in:
lcy0620 2025-03-26 10:08:44 +08:00 committed by GitHub
parent 9cf817a6e2
commit fc3abeb3e7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/sites/demos/pc/app/transfer/custom-titles-composition-api.vue
View File

@ -4,8 +4,8 @@
:data="data"
:titles="['数据列表', '已选列表']"
:format="{
noChecked: '未勾选 / 共${total}',
hasChecked: '已选择${checked} / 共${total}'
noChecked: '未选 / 共${total}',
hasChecked: '已选${checked} / 共${total}'
}"
></tiny-transfer>
</template>

6
examples/sites/demos/pc/app/transfer/custom-titles.spec.ts
View File

@ -10,12 +10,12 @@ test('测试自定义列表标题', async ({ page }) => {
const rightPanel = transferPanels.nth(1)
await expect(leftPanel.locator('.tiny-checkbox__label').first()).toHaveText(/数据列表/)
await expect(leftPanel.locator('.tiny-checkbox__label').first()).toHaveText(/未勾选 \/ 共14/)
await expect(leftPanel.locator('.tiny-checkbox__label').first()).toHaveText(/未选 \/ 共14/)
await expect(rightPanel.locator('.tiny-checkbox__label').first()).toHaveText(/已选列表/)
await expect(rightPanel.locator('.tiny-checkbox__label').first()).toHaveText(/未勾选 \/ 共2/)
await expect(rightPanel.locator('.tiny-checkbox__label').first()).toHaveText(/未选 \/ 共2/)
// 全选
const allCheckbox = leftPanel.locator('.tiny-checkbox__input').first()
await allCheckbox.click()
await expect(leftPanel.locator('.tiny-checkbox__label').first()).toHaveText(/已选择11 \/ 共14/)
await expect(leftPanel.locator('.tiny-checkbox__label').first()).toHaveText(/已选11 \/ 共14/)
})

4
examples/sites/demos/pc/app/transfer/custom-titles.vue
View File

@ -4,8 +4,8 @@
:data="data"
:titles="['数据列表', '已选列表']"
:format="{
noChecked: '未勾选 / 共${total}',
hasChecked: '已选择${checked} / 共${total}'
noChecked: '未选 / 共${total}',
hasChecked: '已选${checked} / 共${total}'
}"
></tiny-transfer>
</template>

1
packages/theme/src/cascader-node/index.less
View File

@ -52,7 +52,6 @@
&.is-disabled {
color: var(--tv-CascaderNode-disabled-text-color);
fill: var(--tv-CascaderNode-disabled-text-color);
background-color: var(--tv-CascaderNode-disabled-bg-color);
cursor: not-allowed;
.@{cascader-node-prefix-cls}__prefix,
.@{cascader-node-prefix-cls}__postfix {

8
packages/theme/src/transfer/index.less
View File

@ -95,6 +95,7 @@
&.@{button-prefix-cls}:not(.is-circle) .@{svg-prefix-cls} {
font-size: var(--tv-Transfer-svg-font-size);
margin-right: 0;
fill:var(--tv-Transfer-svg-color)
}
&.@{button-prefix-cls}:not(.is-disabled) {
@ -114,6 +115,7 @@
font-size: var(--tv-Transfer-font-size);
transform: translateY(-3px); // 适配 xdesign, 让span居中
display: inline-block;
color:var(--tv-Transfer-text-color),
}
[class*='tiny-icon'] + span {
@ -150,6 +152,7 @@
&__body {
position: relative;
height: var(--tv-Transfer-panel-body-height);
overflow: auto;
text-align: left;
padding-right: var(--tv-Transfer-panel-body-padding-right);
padding-left: var(--tv-Transfer-panel-body-padding-left);
@ -186,8 +189,7 @@
padding-top: var(--tv-Transfer-panel-body-list-padding-top);
padding-bottom: var(--tv-Transfer-panel-body-list-padding-bottom);
list-style: none;
height: var(--tv-Transfer-panel-body-height);
overflow: auto;
height: var(--tv-Transfer-panel-body-height);
box-sizing: border-box;
display: block;
@ -251,7 +253,7 @@
display: inline-block;
box-sizing: border-box;
border-radius: var(--tv-Transfer-panel-filter-border-radius);
border-bottom-color: #f0f0f0 !important;
border-bottom-color: var(--tv-Transfer-header-border-color) !important;
padding-left: 24px;
padding-right: 0;
}

8
packages/theme/src/transfer/vars.less
View File

@ -60,7 +60,7 @@
// 按钮禁用时文本色
--tv-Transfer-button-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
// 按钮禁用时边框色
--tv-Transfer-button-disabled-border-color: var(--tv-color-border, #c2c2c2);
--tv-Transfer-button-disabled-border-color: var(--tv-color-border-disabled);
// 按钮禁用时背景色
--tv-Transfer-button-disabled-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
// 按钮禁用时行高
@ -108,7 +108,7 @@
// 面板头部背景色
--tv-Transfer-header-bg-color: var(--tv-color-bg-secondary, #fff);
// 面板头部边框色
--tv-Transfer-header-border-color: #00000014; // 没有对应common变量值
--tv-Transfer-header-border-color: var(--tv-color-border-divider);
// 面板头部文本色
--tv-Transfer-header-text-color: var(--tv-color-text, #191919);
// 面板头部span文本色
@ -243,4 +243,8 @@
--tv-Transfer-button-height: 16px;
// 穿梭箭头大小
--tv-Transfer-svg-font-size: 10px;
// 穿梭箭头颜色
--tv-Transfer-svg-color: var(--tv-color-icon-inverse);
// 穿梭文字颜色
--tv-Transfer-text-color: var(--tv-color-text-inverse)
}