Skip to content

Commit 431b565

Browse files
shenjunjianshenjunjian
authored
fix(dropdown): [dropdown] rename getTip api in dropdown-item; replace reset.less cssvars by --tv- vars (#2331)
* fix(dropdown): rename getTip api; replace reset.less cssvars * fix(reset): move scrollbar css into scrollbar's index.less
1 parent 71bbf49 commit 431b565

File tree

6 files changed

+73
-87
lines changed

6 files changed

+73
-87
lines changed

‎packages/renderless/src/dropdown-item/index.ts

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -186,10 +186,12 @@ export const computedGetIcon =
186186
return designConfig?.icons[name] || constants?.ICON_MAP[name]
187187
}
188188

189-
export const getTip = ({ props, vm }: Pick<IDropdownItemRenderlessParams, 'props' | 'vm'>): string => {
190-
if (props.tip && typeof props.tip === 'function') {
191-
return props.tip({ itemData: props.itemData, vm })
192-
}
189+
export const computedTip =
190+
({ props, vm }: Pick<IDropdownItemRenderlessParams, 'props' | 'vm'>): string =>
191+
() => {
192+
if (props.tip && typeof props.tip === 'function') {
193+
return props.tip({ itemData: props.itemData, vm })
194+
}
193195

194-
return props.tip || ''
195-
}
196+
return props.tip || ''
197+
}

‎packages/renderless/src/dropdown-item/vue.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ import {
3737
getItemStyle,
3838
handleClick,
3939
computedGetIcon,
40-
getTip
40+
computedTip
4141
} from './index'
4242

4343
export const api = [
@@ -55,7 +55,7 @@ export const api = [
5555
'close',
5656
'closed',
5757
'handleClick',
58-
'getTip'
58+
'computedTip'
5959
]
6060

6161
const initState = ({ reactive, computed, api, props, parent, dropdownMenuVm, dropdownVm }) => {
@@ -80,7 +80,8 @@ const initState = ({ reactive, computed, api, props, parent, dropdownMenuVm, dro
8080
popperClass: dropdownMenuVm?.popperClass || '',
8181
sizeClass: dropdownVm?.size ? `tiny-dropdown-item--${dropdownVm?.size}` : '',
8282
getIcon: computed(() => api.computedGetIcon()),
83-
children: []
83+
children: [],
84+
computedTip: computed(() => api.computedTip())
8485
})
8586

8687
return state
@@ -107,7 +108,7 @@ const initApi = ({ api, state, emit, props, parent, dispatch, vm, constants, des
107108
confirm: confirm({ emit, props, state }),
108109
handleClick: handleClick({ state, props, dispatch, vm, emit }),
109110
computedGetIcon: computedGetIcon({ constants, designConfig }),
110-
getTip: getTip({ props, vm })
111+
computedTip: computedTip({ props, vm })
111112
})
112113
}
113114

‎packages/theme/src/base/reset.less

Lines changed: 8 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -13,27 +13,6 @@
1313
@import '../custom.less';
1414
@import './basic-var.less';
1515

16-
// 为了防止这些图标失去默认值，需要全局设置默认值 todo:以下是否有必要保留？
17-
.tiny-icon-success {
18-
fill: #5cb300;
19-
}
20-
21-
.tiny-icon-error {
22-
fill: #f23030;
23-
}
24-
25-
.tiny-icon-warning-triangle {
26-
fill: #ff8800;
27-
}
28-
29-
.tiny-icon-prompt {
30-
fill: #1476ff;
31-
}
32-
33-
.tiny-icon-text-type {
34-
fill: #9185f0;
35-
}
36-
3716
// .tiny-icon-loading 类名的动画效果。 它出现在多个组件中，故抽取到一起。
3817
.@{css-prefix-iconfont}-loading {
3918
line-height: 1;
@@ -52,7 +31,7 @@
5231

5332
// 高亮节点
5433
.tiny-hl-query-node {
55-
color: var(--ti-common-color-text-highlight) !important;
34+
color: var(----tv-color-text-active) !important;
5635
}
5736

5837
[class*=~'@{css-prefix}'] {
@@ -184,71 +163,25 @@
184163

185164
@media (min-width: 768px) {
186165
::-webkit-scrollbar {
187-
width: var(--ti-common-scrollbar-width);
188-
height: var(--ti-common-scrollbar-height);
166+
width: var(--tv-size-scrollbar-width);
167+
height: var(--tv-size-scrollbar-height);
189168
}
190169

191170
::-webkit-scrollbar-track-piece {
192-
background: var(--ti-common-scrollbar-track-piece-bg-color);
171+
background: var(--tv-color-bg-scrollbar-track);
193172
}
194173

195174
::-webkit-scrollbar-thumb {
196-
background: var(--ti-common-scrollbar-thumb-bg-color);
197-
border-radius: var(--ti-common-scrollbar-thumb-border-radius);
175+
background: var(--tv-color-bg-scrollbar-thumb);
176+
border-radius: var(--tv-border-radius-scrollbar-thumb);
198177
}
199178

200179
::-webkit-scrollbar-thumb:hover {
201-
background: var(--ti-common-scrollbar-thumb-hover-bg-color);
180+
background: var(--tv-color-bg-scrollbar-thumb-hover);
202181
}
203182

204183
::-webkit-scrollbar-thumb:active {
205-
background: var(--ti-common-scrollbar-thumb-active-bg-color);
206-
}
207-
208-
.@{css-prefix}scrollbar::-webkit-scrollbar {
209-
width: 8px;
210-
height: 8px;
211-
}
212-
213-
.@{css-prefix}scrollbar::-webkit-scrollbar-track-piece {
214-
background: transparent;
215-
border: 0;
216-
}
217-
218-
.@{css-prefix}scrollbar::-webkit-scrollbar-thumb {
219-
background: #bfbfbf;
220-
border-radius: 4px;
221-
}
222-
223-
.@{css-prefix}scrollbar::-webkit-scrollbar-thumb:hover {
224-
background: #999999;
225-
}
226-
227-
.@{css-prefix}scrollbar::-webkit-scrollbar-thumb:active {
228-
background: #999999;
229-
}
230-
231-
.@{css-prefix}min-scrollbar::-webkit-scrollbar {
232-
width: 4px;
233-
height: 4px;
234-
}
235-
236-
.@{css-prefix}min-scrollbar::-webkit-scrollbar-track-piece {
237-
background: transparent;
238-
border: 0;
239-
}
240-
241-
.@{css-prefix}min-scrollbar::-webkit-scrollbar-thumb {
242-
background: #bfbfbf;
243-
border-radius: 2px;
244-
}
245-
246-
.@{css-prefix}min-scrollbar::-webkit-scrollbar-thumb:hover {
247-
background: #999999;
248-
}
249-
250-
.@{css-prefix}min-scrollbar::-webkit-scrollbar-thumb:active {
251-
background: #999999;
184+
background: var(--tv-color-bg-scrollbar-thumb-active);
252185
}
253186
}
254187
}

‎packages/theme/src/base/vars.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -438,7 +438,7 @@
438438

439439
/** 9. 滚动条变量 **/
440440
--tv-size-scrollbar-width: 8px; // 滚动条宽度
441-
--tv-size-scrollbar-height: 80px; // 滚动条高度
441+
--tv-size-scrollbar-height: 8px; // 滚动条高度
442442
--tv-border-radius-scrollbar-thumb: 4px; // 滑块圆角
443443
--tv-color-bg-scrollbar-thumb: var(--tv-base-color-common-6); // #dbdbdb 滑块背景色
444444
--tv-color-bg-scrollbar-thumb-hover: var(--tv-base-color-common-6); // #dbdbdb 滑块hover背景色

‎packages/theme/src/scrollbar/index.less

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,3 +83,51 @@
8383
}
8484
}
8585
}
86+
87+
@media (min-width: 768px) {
88+
.@{css-prefix}scrollbar::-webkit-scrollbar {
89+
width: var(--tv-size-scrollbar-width);
90+
height: var(--tv-size-scrollbar-height);
91+
}
92+
93+
.@{css-prefix}scrollbar::-webkit-scrollbar-track-piece {
94+
background: transparent;
95+
border: 0;
96+
}
97+
98+
.@{css-prefix}scrollbar::-webkit-scrollbar-thumb {
99+
background: var(--tv-color-bg-scrollbar-thumb);
100+
border-radius: var(--tv-border-radius-scrollbar-thumb);
101+
}
102+
103+
.@{css-prefix}scrollbar::-webkit-scrollbar-thumb:hover {
104+
background: var(--tv-color-bg-scrollbar-thumb-hover);
105+
}
106+
107+
.@{css-prefix}scrollbar::-webkit-scrollbar-thumb:active {
108+
background: var(--tv-color-bg-scrollbar-thumb-active);
109+
}
110+
111+
.@{css-prefix}min-scrollbar::-webkit-scrollbar {
112+
width: 4px;
113+
height: 4px;
114+
}
115+
116+
.@{css-prefix}min-scrollbar::-webkit-scrollbar-track-piece {
117+
background: transparent;
118+
border: 0;
119+
}
120+
121+
.@{css-prefix}min-scrollbar::-webkit-scrollbar-thumb {
122+
background: var(--tv-color-bg-scrollbar-thumb);
123+
border-radius: 2px;
124+
}
125+
126+
.@{css-prefix}min-scrollbar::-webkit-scrollbar-thumb:hover {
127+
background: var(--tv-color-bg-scrollbar-thumb-hover);
128+
}
129+
130+
.@{css-prefix}min-scrollbar::-webkit-scrollbar-thumb:active {
131+
background: var(--tv-color-bg-scrollbar-thumb-active);
132+
}
133+
}

‎packages/vue/src/dropdown-item/src/pc.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@
1313
<template>
1414
<!-- TINY-TODO: tiny-dropdown-menu__item命名不规范，后续统一有个迭代去掉 -->
1515
<li
16-
v-auto-tip="getTip ? { always: true, content: getTip, effect, placement: tipPosition } : false"
16+
v-auto-tip="
17+
state.computedTip ? { always: true, content: state.computedTip, effect, placement: tipPosition } : false
18+
"
1719
:class="[
1820
'tiny-dropdown-item',
1921
'tiny-dropdown-menu__item',

0 commit comments

Comments
 (0)