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;

0 commit comments

Comments
 (0)