Skip to content

Commit f559970

Browse files
MomoPoppyMomoPoppy
authored
feat(dropdown): [dropdown,action-menu,select] Additional features xdesign theme adaptation (#2140)
* feat(dropdown): [dropdown,action-menu] Additional features xdesign theme adaptation * feat(select): [select] Additional features xdesign theme adaptation * feat(test): [dropdown,select,slider] Modify test cases * feat(test): [dropdown,select,slider] Modify test cases * feat(test): [dropdown,select,slider] Modify test cases * feat(test): [dropdown,select,slider] Modify test cases * feat(test): [dropdown,select,slider] Modify test cases * feat(test): [dropdown,select,action-menu] Modify test cases
1 parent b39016b commit f559970

File tree

20 files changed

+136
-90
lines changed

20 files changed

+136
-90
lines changed

‎examples/sites/demos/pc/app/action-menu/basic-usage.spec.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@ test('基本用法', async ({ page }) => {
1616
// 更多按钮
1717
await expect(moreItem).toHaveText(/更多/)
1818
// 图标显示
19-
await expect(moreItem.locator('svg > path').nth(0)).toHaveAttribute('d', 'M2 6h20L12 19z')
19+
await expect(moreItem.locator('svg > path').nth(0)).toHaveAttribute(
20+
'd',
21+
'M8 11.43c-.15 0-.31-.06-.42-.18L1.92 5.6c-.23-.23-.23-.61 0-.85s.61-.23.85 0L8 9.98l5.23-5.23a.61.61 0 0 1 .85 0c.23.23.23.61 0 .85l-5.66 5.66c-.11.11-.27.17-.42.17z'
22+
)
2023
// 分割线
2124
await expect(actionMenu.locator('.tiny-action-menu__item-line')).toHaveCount(2)
2225
// 图标旋转

‎examples/sites/demos/pc/app/action-menu/icon.spec.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,8 @@ test('只显示图标', async ({ page }) => {
1111
await page.waitForTimeout(1500)
1212
await expect(actionMenuItem.nth(0).locator('.tiny-svg')).toBeVisible()
1313
await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg')).toBeVisible()
14-
await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg')).toHaveCSS('width', '20px')
15-
await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg')).toHaveCSS('height', '20px')
16-
await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg')).toHaveCSS('margin', '2px')
14+
await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg')).toHaveCSS('width', '24px')
15+
await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg')).toHaveCSS('height', '24px')
1716
await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-dropdown__title')).toBeHidden()
1817

1918
await actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg').hover()

‎examples/sites/demos/pc/app/select/copy-multi-composition-api.vue

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,35 @@
55
<tiny-select ref="selectTagSelectable" v-model="value1" multiple tag-selectable>
66
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
77
</tiny-select>
8-
<br /><br />
8+
<br />
9+
<br />
910
<p>场景2：多选一键复制所有标签</p>
1011
<br />
1112
<tiny-select ref="selectCopyable" v-model="value2" multiple copyable>
1213
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
1314
</tiny-select>
14-
<br /><br />
15+
<br />
16+
<br />
1517
<p>场景3：多选设置复制文本分隔符</p>
1618
<br />
1719
<tiny-select ref="selectCopyable" v-model="value2" multiple copyable text-split="/">
1820
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
1921
</tiny-select>
20-
<br /><br />
22+
<br />
23+
<br />
24+
<tiny-select
25+
ref="selectCopyable"
26+
v-model="value2"
27+
multiple
28+
copyable
29+
text-split="/"
30+
:multiple-limit="2"
31+
show-limit-text
32+
>
33+
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
34+
</tiny-select>
35+
<br />
36+
<br />
2137
<p>复制到此处：</p>
2238
<tiny-input v-model="copyValue" class="copy-value" type="text"></tiny-input>
2339
</div>

‎examples/sites/demos/pc/app/select/copy-multi.vue

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,35 @@
55
<tiny-select ref="selectTagSelectable" v-model="value1" multiple tag-selectable>
66
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
77
</tiny-select>
8-
<br /><br />
8+
<br />
9+
<br />
910
<p>场景2：多选一键复制所有标签</p>
1011
<br />
1112
<tiny-select ref="selectCopyable" v-model="value2" multiple copyable>
1213
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
1314
</tiny-select>
14-
<br /><br />
15+
<br />
16+
<br />
1517
<p>场景3：多选设置复制文本分隔符</p>
1618
<br />
1719
<tiny-select ref="selectCopyable" v-model="value2" multiple copyable text-split="/">
1820
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
1921
</tiny-select>
20-
<br /><br />
22+
<br />
23+
<br />
24+
<tiny-select
25+
ref="selectCopyable"
26+
v-model="value2"
27+
multiple
28+
copyable
29+
text-split="/"
30+
:multiple-limit="2"
31+
show-limit-text
32+
>
33+
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
34+
</tiny-select>
35+
<br />
36+
<br />
2137
<p>复制到此处：</p>
2238
<br />
2339
<tiny-input v-model="copyValue" class="copy-value" type="text"></tiny-input>

‎examples/sites/demos/pc/app/select/slot-prefix-composition-api.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<tiny-select v-model="value" multiple collapse-tags>
33
<template #prefix>
4-
<tiny-icon-share></tiny-icon-share>
4+
<tiny-icon-location></tiny-icon-location>
55
</template>
66
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
77
</tiny-select>
@@ -10,7 +10,7 @@
1010
<script setup>
1111
import { ref } from 'vue'
1212
import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
13-
import { iconShare } from '@opentiny/vue-icon'
13+
import { iconLocation } from '@opentiny/vue-icon'
1414
1515
const options = ref([
1616
{ value: '选项1', label: '北京' },
@@ -21,7 +21,7 @@ const options = ref([
2121
])
2222
const value = ref('')
2323
24-
const TinyIconShare = iconShare()
24+
const TinyIconLocation = iconLocation()
2525
</script>
2626

2727
<style lang="less" scoped>

‎examples/sites/demos/pc/app/select/slot-prefix.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
<template>
22
<tiny-select v-model="value" multiple collapse-tags>
33
<template #prefix>
4-
<icon-share></icon-share>
4+
<tiny-icon-location></tiny-icon-location>
55
</template>
66
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
77
</tiny-select>
88
</template>
99

1010
<script>
1111
import { Select, Option } from '@opentiny/vue'
12-
import { iconShare } from '@opentiny/vue-icon'
12+
import { iconLocation } from '@opentiny/vue-icon'
1313
1414
export default {
1515
components: {
1616
TinySelect: Select,
1717
TinyOption: Option,
18-
IconShare: iconShare()
18+
TinyIconLocation: iconLocation()
1919
},
2020
data() {
2121
return {

‎packages/design/saas/src/select/icon-loading.svg

Lines changed: 3 additions & 0 deletions
Loading

‎packages/design/saas/src/select/index.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
import { iconChevronDown } from '@opentiny/vue-icon'
1+
import { iconChevronDown, iconPlus } from '@opentiny/vue-icon'
2+
import loadingIcon from './icon-loading.svg'
23

34
export default {
45
// 虚拟滚动的默认options不一致
56
baseOpts: { optionHeight: 34, limit: 20 },
67
icons: {
7-
dropdownIcon: iconChevronDown()
8+
dropdownIcon: iconChevronDown(),
9+
addIcon: iconPlus(),
10+
loadingIcon
811
},
912
state: {
1013
sizeMap: {

‎packages/renderless/src/select/vue.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,8 @@ const initState = ({ reactive, computed, props, api, emitter, parent, constants,
240240
return designConfig.state.autoHideDownIcon
241241
}
242242
return true // tiny 默认为true
243-
})()
243+
})(),
244+
designConfig
244245
})
245246

246247
return state

‎packages/theme-saas/src/select-dropdown/index.less

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
}
6060
// tiny 新增
6161
.@{select-dropdown-prefix-cls}__empty-images {
62-
background-image: url('../images/select-nodata.png');
62+
background-image: url('../images/empty-nodata.png');
6363
@apply w-16;
6464
@apply h-16;
6565
@apply mb-2;
@@ -105,7 +105,7 @@
105105
@apply inline-block;
106106
@apply align-top;
107107

108-
.path {
108+
circle{
109109
animation: loading-dash 1.5s ease-in-out infinite;
110110
stroke-dasharray: 90, 150;
111111
stroke-dashoffset: 0;

‎packages/theme/src/action-menu/index.less

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -88,15 +88,17 @@
8888
}
8989

9090
&.@{action-menu-prefix-cls}__item-visable {
91-
.@{dropdown-item-prefix-cls}__wrap {
92-
color: var(--ti-action-menu-text-color);
93-
padding: var(--ti-action-menu-item-padding-top) var(--ti-action-menu-item-padding-right)
94-
var(--ti-action-menu-item-padding-bottom) var(--ti-action-menu-item-padding-left);
91+
.@{dropdown-item-prefix-cls} {
92+
.@{dropdown-item-prefix-cls}__wrap {
93+
color: var(--ti-action-menu-text-color);
94+
margin: 0px;
95+
height: auto;
9596

96-
&:hover {
97-
background-color: var(--ti-action-menu-item-hover-bg-color);
98-
text-decoration: var(--ti-action-menu-hover-text-decoratio);
99-
color: var(--ti-action-menu-item-hover-text-color);
97+
&:hover {
98+
background-color: var(--ti-action-menu-item-hover-bg-color);
99+
text-decoration: var(--ti-action-menu-hover-text-decoration);
100+
color: var(--ti-action-menu-item-hover-text-color);
101+
}
100102
}
101103
}
102104

‎packages/theme/src/action-menu/vars.less

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,39 +14,31 @@
1414
// 按钮文本字重
1515
--ti-action-menu-font-weight: var(--ti-common-font-weight-normal);
1616
// 按钮文本装饰
17-
--ti-action-menu-hover-text-decoratio: underline;
17+
--ti-action-menu-hover-text-decoration: underline;
1818
// 更多...图标的宽度
1919
--ti-action-menu-more-icon-width: var(--ti-common-size-4x);
2020
// 更多...图标的高度
2121
--ti-action-menu-more-icon-height: var(--ti-common-size-4x);
2222
// 更多...图标的右边外边距
2323
--ti-action-menu-more-icon-margin-right: var(--ti-common-space-0, 0px);
2424
// 下拉触发源文本颜色
25-
--ti-action-menu-text-color: var(--ti-common-color-text-link, #526ecc);
25+
--ti-action-menu-text-color: var(--ti-common-color-text-link, #1476ff);
2626
// 下拉触发源文本禁用色
27-
--ti-action-menu-item-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
27+
--ti-action-menu-item-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
2828
// 下拉触发源文本字号
29-
--ti-action-menu-font-size: var(--ti-common-font-size-base, 12px);
29+
--ti-action-menu-font-size: var(--ti-common-font-size-base, 14px);
3030
// 分割线颜色
31-
--ti-action-menu-item-line-bg-color: var(--ti-common-color-transparent);
31+
--ti-action-menu-item-line-bg-color: transparent;
3232
// 分割线宽度
3333
--ti-action-menu-item-line-width: var(--ti-common-space-0);
3434
// 下拉菜单项悬浮背景色
35-
--ti-action-menu-item-hover-bg-color: var(--ti-common-color-transparent, transparent);
35+
--ti-action-menu-item-hover-bg-color: transparent;
3636
// 下拉菜单项文本悬浮色
3737
--ti-action-menu-item-hover-text-color: var(--ti-common-color-text-link);
3838
// 下拉菜单项图标悬浮色
39-
--ti-action-menu-item-hover-icon-color: var(--ti-common-color-text-link-hover, #344899); // 没有这个颜色的图标色
40-
// 下拉菜单项顶部内边距
41-
--ti-action-menu-item-padding-top: var(--ti-common-space-0, 0px);
42-
// 下拉菜单项右侧内边距
43-
--ti-action-menu-item-padding-right: var(--ti-common-space-0, 0px);
44-
// 下拉菜单项底部内边距
45-
--ti-action-menu-item-padding-bottom: var(--ti-common-space-0, 0px);
46-
// 下拉菜单项右侧内边距
47-
--ti-action-menu-item-padding-left: var(--ti-common-space-0, 0px);
39+
--ti-action-menu-item-hover-icon-color: var(--ti-common-color-text-link-hover, #1476ff); // 没有这个颜色的图标色
4840
// 下拉菜单项图标顶部内边距
49-
--ti-action-menu-item-svg-margin-top: 0;
41+
--ti-action-menu-item-svg-margin-top: 0px;
5042
// 下拉菜单项图标右侧内边距
5143
--ti-action-menu-item-svg-margin-right: var(--ti-common-space-base, 4px);
5244
// 下拉菜单项图标底部部内边距

‎packages/theme/src/dropdown-item/index.less

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939

4040
&__wrap {
4141
line-height: var(--ti-dropdown-item-line-height);
42-
padding: var(--ti-dropdown-item-padding-vertical) var(--ti-dropdown-item-padding-horizontal);
42+
margin: var(--ti-dropdown-item-margin-vertical) var(--ti-dropdown-item-margin-horizontal);
4343
height: var(--ti-dropdown-item-height);
4444
display: flex;
4545
align-items: center;
@@ -148,8 +148,11 @@
148148

149149
.@{dropdown-item-prefix-cls}--divided {
150150
position: relative;
151-
border-top: var(--ti-dropdown-item-divided-border-weight) var(--ti-dropdown-item-divided-border-style)
152-
var(--ti-dropdown-item-divided-border-color);
151+
152+
.@{dropdown-item-prefix-cls}__wrap {
153+
border-top: var(--ti-dropdown-item-divided-border-weight) var(--ti-dropdown-item-divided-border-style)
154+
var(--ti-dropdown-item-divided-border-color);
155+
}
153156

154157
&:before {
155158
content: '';

‎packages/theme/src/dropdown-item/vars.less

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,13 @@
2020
// 下拉菜单项选中文本字重
2121
--ti-dropdown-item-font-weight-selected: var(--ti-common-font-weight-6);
2222
// 下拉菜单项选中文本色
23-
--ti-dropdown-item-text-color-selected: #1476FF;
23+
--ti-dropdown-item-text-color-selected: #1476ff;
2424
// 下拉菜单非禁用项悬浮文本色
2525
--ti-dropdown-item-hover-text-color: var(--ti-common-color-text-primary);
2626
// 下拉菜单项点击瞬间背景色
2727
--ti-dropdown-item-active-bg-color: var(--ti-common-color-bg-white-normal);
2828
// 下拉菜单项点击瞬间文本色
29-
--ti-dropdown-item-active-text-color: #1476FF;
29+
--ti-dropdown-item-active-text-color: #1476ff;
3030
// 下拉菜单项禁用文本色
3131
--ti-dropdown-item-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
3232
// 下拉菜单项文本色
@@ -35,10 +35,10 @@
3535
--ti-dropdown-item-font-size: var(--ti-common-font-size-base, 12px);
3636
// 默认尺寸下拉菜单项的行高
3737
--ti-dropdown-item-line-height: var(--ti-common-line-height-number, 1.5);
38-
// 下拉菜单项垂直内边距
39-
--ti-dropdown-item-padding-vertical: var(--ti-common-space-0);
40-
// 下拉菜单项水平内边距
41-
--ti-dropdown-item-padding-horizontal: var(--ti-common-space-4x);
38+
// 下拉菜单项垂直外边距
39+
--ti-dropdown-item-margin-vertical: var(--ti-common-space-0);
40+
// 下拉菜单项水平外边距
41+
--ti-dropdown-item-margin-horizontal: var(--ti-common-space-4x);
4242
// 拉菜单项底部外边距
4343
--ti-dropdown-item-margin-bottom: var(--ti-common-space-0, 0px);
4444
// 拉菜单项左边外边距
@@ -68,7 +68,7 @@
6868
// 下拉项内容悬浮时的字重
6969
--ti-dropdown-item-content-font-weight-hover: var(--ti-common-font-weight-4);
7070
// 有二级菜单下拉项内容悬浮时的文本色
71-
--ti-dropdown-item-content-text-hover: #1476FF;
71+
--ti-dropdown-item-content-text-hover: #1476ff;
7272
// 有二级菜单下拉项内容悬浮时的背景色
7373
--ti-dropdown-item-content-bg-hover: transparent;
7474
// 下拉项分割线尺寸

‎packages/theme/src/filter-box/index.less

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,8 @@
5454
height: inherit;
5555
line-height: var(--ti-filter-box-btn-title-line-height);
5656
font-size: var(--ti-filter-box-btn-font-size);
57+
/* TODO: title 这个类名不符合组件类名规范，被公共样式污染，故在此处重置间距为 0.计划优化这个类名 */
58+
margin-right: 0px;
5759

5860
label {
5961
display: inline-block;
@@ -62,7 +64,8 @@
6264
text-overflow: ellipsis;
6365
white-space: nowrap;
6466
color: var(--ti-filter-box-btn-text-color);
65-
margin-right: 4px;
67+
margin-right: 8px;
68+
margin-top: 3px;
6669
}
6770

6871
&.active label {
@@ -112,6 +115,12 @@
112115
}
113116
}
114117

118+
&:hover {
119+
.filter-box-icon {
120+
fill: var(--ti-filter-box-expand-btn-icon-color-hover);
121+
}
122+
}
123+
115124
.filter-icon-close {
116125
width: 16px;
117126
height: 16px;

‎packages/theme/src/filter-box/vars.less

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
// 按钮水平内边距
2020
--ti-filter-box-btn-padding-horizontal: var(--ti-common-space-2x);
2121
// 按钮文本色
22-
--ti-filter-box-btn-text-color: var(--ti-common-color-text-primary);
22+
--ti-filter-box-btn-text-color: var(--ti-common-color-text-weaken);
2323
// 按钮悬浮文本色和图标色
2424
--ti-filter-box-btn-hover-text-color: var(--ti-common-color-text-primary);
2525
// 按钮文本字号
@@ -33,7 +33,9 @@
3333
// 按钮问号top定位(hide)
3434
--ti-filter-box-help-btn-position-top: var(--ti-common-space-base);
3535
// 按钮展开图标色
36-
--ti-filter-box-expand-btn-icon-color: var(--ti-common-color-info-active);
36+
--ti-filter-box-expand-btn-icon-color: var(--ti-common-color-icon-normal);
37+
// 按钮展开图标悬浮色
38+
--ti-filter-box-expand-btn-icon-color-hover: var(--ti-common-color-icon-hover);
3739
// 按钮展开图标尺寸
3840
--ti-filter-box-expand-btn-icon-size: var(--ti-common-font-size-2);
3941
}

0 commit comments

Comments
 (0)