Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(dropdown): [dropdown,select,slider] Adapt to xdesign themes #2108

Merged
merged 7 commits into from
Sep 20, 2024
Merged

feat(dropdown): [dropdown,select,slider] Adapt to xdesign themes #2108

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
805bdab
feat(dropdown): [dropdown,select,slider] Adapt to xdesign themes
MomoPoppy Sep 9, 2024
6cc0ada
feat(dropdown): [dropdown,select,action-menu] Adapt to xdesign themes
MomoPoppy Sep 12, 2024
ff2e92d
feat(test): [dropdown,select,slider] Modify test cases
MomoPoppy Sep 14, 2024
245817a
feat(test): [dropdown,select,slider] Modify test cases
MomoPoppy Sep 18, 2024
e779208
feat(test): [dropdown,select,slider] Modify test cases
MomoPoppy Sep 19, 2024
e78b274
feat(test): [dropdown,select,slider] Modify test cases
MomoPoppy Sep 20, 2024
cf30445
feat(test): [dropdown,select,slider] Modify test cases
MomoPoppy Sep 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/action-menu/icon-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const options = ref([
},
{
label: '网络设置',
children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
children: [{ label: '更改安全组' }, { label: '切换VPC' }]
}
])

Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/action-menu/icon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default {
},
{
label: '网络设置',
children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
children: [{ label: '更改安全组' }, { label: '切换VPC' }]
}
],
options1: [
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/dropdown/border-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<br />
<div>场景2：显示边框并圆角</div>
<br />
<tiny-dropdown border round>
<tiny-dropdown border round type="primary">
<span>下拉菜单</span>
<template #dropdown>
<tiny-dropdown-menu>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/dropdown/border.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<br />
<div>场景2：显示边框并圆角</div>
<br />
<tiny-dropdown border round>
<tiny-dropdown border round type="primary">
<span>下拉菜单</span>
<template #dropdown>
<tiny-dropdown-menu>
Expand Down
43 changes: 43 additions & 0 deletions examples/sites/demos/pc/app/dropdown/multi-level-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,35 @@
<div>
<p>场景1：使用 menu-options 属性定义 children</p>
<tiny-dropdown :menu-options="menuOptions" @item-click="itemClick"></tiny-dropdown>
<br />

<p>场景2：使用 options 属性定义 children</p>
<tiny-dropdown @item-click="itemClick">
<template #dropdown>
<tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
</template>
</tiny-dropdown>
<br />
<br />
<tiny-dropdown @item-click="itemClick">
<template #dropdown>
<tiny-dropdown-menu :options="options1"> </tiny-dropdown-menu>
</template>
</tiny-dropdown>
<br />
<br />
<tiny-dropdown @item-click="itemClick" border>
<template #dropdown>
<tiny-dropdown-menu :options="options1"> </tiny-dropdown-menu>
</template>
</tiny-dropdown>
<br />
<br />
<tiny-dropdown @item-click="itemClick" border type="primary">
<template #dropdown>
<tiny-dropdown-menu :options="options1"> </tiny-dropdown-menu>
</template>
</tiny-dropdown>
</div>
</template>

Expand Down Expand Up @@ -39,6 +62,26 @@ const options = reactive([
}
])

const options1 = reactive([
{
label: '老友粉'
},
{
label: '狮子头',
children: [
{
label: '狮子头2.1'
},
{ label: '狮子头2.2' },
{ label: '狮子头2.3', disabled: true }
]
},
{
label: '黄金糕',
disabled: true
}
])

const menuOptions = reactive({
options: [
{
Expand Down
41 changes: 41 additions & 0 deletions examples/sites/demos/pc/app/dropdown/multi-level.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,34 @@
<div>
<p>场景1：使用 menu-options 属性定义 children</p>
<tiny-dropdown :menu-options="menuOptions" @item-click="itemClick"></tiny-dropdown>
<br />
<p>场景2：使用 options 属性定义 children</p>
<tiny-dropdown @item-click="itemClick">
<template #dropdown>
<tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
</template>
</tiny-dropdown>
<br />
<br />
<tiny-dropdown @item-click="itemClick">
<template #dropdown>
<tiny-dropdown-menu :options="options1"> </tiny-dropdown-menu>
</template>
</tiny-dropdown>
<br />
<br />
<tiny-dropdown @item-click="itemClick" border>
<template #dropdown>
<tiny-dropdown-menu :options="options1"> </tiny-dropdown-menu>
</template>
</tiny-dropdown>
<br />
<br />
<tiny-dropdown @item-click="itemClick" border type="primary">
<template #dropdown>
<tiny-dropdown-menu :options="options1"> </tiny-dropdown-menu>
</template>
</tiny-dropdown>
</div>
</template>

Expand Down Expand Up @@ -44,6 +66,25 @@ export default {
icon: iconStarDisable()
}
],
options1: [
{
label: '老友粉'
},
{
label: '狮子头',
children: [
{
label: '狮子头2.1'
},
{ label: '狮子头2.2' },
{ label: '狮子头2.3', disabled: true }
]
},
{
label: '黄金糕',
disabled: true
}
],
menuOptions: {
options: [
{
Expand Down
66 changes: 51 additions & 15 deletions examples/sites/demos/pc/app/select/multiple-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
<template>
<div>
<br />
<div>场景1：多选</div>
<br />
<tiny-select v-model="value1" multiple>
<tiny-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
<tiny-select v-model="value1" multiple searchable>
<tiny-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
:required="item.required"
>
</tiny-option>
</tiny-select>
<br />
<br />
<br />
<div>场景2：必选</div>
<br />
<tiny-select v-model="value2" multiple>
Expand All @@ -17,38 +23,67 @@
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
:required="item.required"
>
</tiny-option>
</tiny-select>
<br />
<br />
<br />
<div>场景3：配置式必选</div>
<br />
<tiny-select v-model="value3" multiple :options="options2"> </tiny-select>
<br />
<br />
<br />
<div>场景4：多选个数限制</div>
<br />
<tiny-select v-model="value4" multiple :multiple-limit="2" show-limit-text>
<tiny-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
</tiny-select>
<br />
<tiny-select v-model="value4" :options="options1" multiple :multiple-limit="2" show-limit-text> </tiny-select>
<br />
<br />
<div>场景5：自定义图标 + 自定义样式</div>
<br />
<tiny-select
v-model="value4"
multiple
:options="options1"
:dropdown-icon="tinyIconPopup"
:drop-style="{ width: '200px', 'min-width': '200px' }"
>
<tiny-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
</tiny-select>
<br />
<br />
<div>场景6：禁用</div>
<br />
<tiny-select v-model="value5" multiple :options="options1" disabled> </tiny-select>
<br />
<br />
<div>场景7：只展示</div>
<br />
<tiny-select v-model="value5" multiple :options="options1" display-only> </tiny-select>
<br />
<br />
<div>场景8：显示全选文本</div>
<br />
<tiny-select v-model="value5" multiple :options="options1" show-all-text-tag> </tiny-select>
<br />
<br />
<tiny-select v-model="value5" multiple :options="options1" show-all-text-tag disabled> </tiny-select>
<br />
<br />
<div>场景9：折叠tag + 必选项 + 禁用项</div>
<br />
<tiny-select v-model="value5" multiple :options="options1" collapse-tags> </tiny-select>
<br />
<br />
<div>场景10：悬浮展开 + 必选项 + 禁用项</div>
<br />
<tiny-select v-model="value5" multiple :options="options1" hover-expand> </tiny-select>
<br />
<br />
<br />
<div>场景11：点击展开 + 必选项 + 禁用项</div>
<br />
<tiny-select v-model="value5" multiple :options="options1" click-expand> </tiny-select>
</div>
</template>

Expand All @@ -58,8 +93,8 @@ import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
import { iconPopup } from '@opentiny/vue-icon'

const options1 = ref([
{ value: '选项1', label: '北京' },
{ value: '选项2', label: '上海' },
{ value: '选项1', label: '北京(禁用)', disabled: true }, // 禁用项
{ value: '选项2', label: '上海(必选)', required: true }, // 必选项
{ value: '选项3', label: '天津' },
{ value: '选项4', label: '重庆' },
{ value: '选项5', label: '深圳' },
Expand All @@ -72,15 +107,16 @@ const options2 = ref([
{ value: '选项2', label: '上海' },
{ value: '选项3', label: '天津' },
{ value: '选项4', label: '重庆' },
{ value: '选项5', label: '深圳', required: true },
{ value: '选项5', label: '深圳(必选)', required: true },
{ value: '选项6', label: '南京' },
{ value: '选项7', label: '成都' }
])

const value1 = ref(['选项1', '选项2'])
const value2 = ref(['选项1', '选项2'])
const value3 = ref([])
const value3 = ref(['选项1', '选项2'])
const value4 = ref([])
const value5 = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
const tinyIconPopup = iconPopup()
</script>

Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/slider/dynamic-disable-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<tiny-slider v-model="value" disabled></tiny-slider>
<tiny-slider v-model="value" disabled :show-input="true" unit="%"></tiny-slider>
</template>

<script setup>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/slider/dynamic-disable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<tiny-slider v-model="value" disabled></tiny-slider>
<tiny-slider v-model="value" disabled :show-input="true" unit="%"></tiny-slider>
</template>

<script>
Expand Down
19 changes: 18 additions & 1 deletion packages/theme/src/dropdown/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@
.tiny-svg {
width: var(--ti-dropdown-trigger-only-svg-width);
height: var(--ti-dropdown-trigger-only-svg-height);
margin: 2px;
}

&:hover {
background-color: var(--ti-dropdown-trigger-only-svg-hover-bg-color);
border-radius: var(--ti-dropdown-trigger-only-svg-hover-radius);
Expand Down Expand Up @@ -183,6 +183,23 @@
}
}

.@{css-prefix}button {
&.tiny-button--default {
.tiny-dropdown__suffix-inner {
.tiny-svg {
fill: var(--ti-dropdown-suffix-icon-color);
}
}
&:hover {
.tiny-dropdown__suffix-inner {
.tiny-svg {
fill: var(--ti-dropdown-suffix-icon-color-hover);
}
}
}
}
}

&--visible {
// rotate(180deg) 会受svg的margin影响，位置会变动！
transform: scaleY(-1);
Expand Down
10 changes: 7 additions & 3 deletions packages/theme/src/dropdown/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@
// 下拉菜单触发元素悬浮时的图标颜色
--ti-dropdown-icon-color-hover: var(--ti-common-color-text-link);
// 下拉菜单触发元素只有图标时的图标宽度
--ti-dropdown-trigger-only-svg-width: var(--ti-common-size-4x);
--ti-dropdown-trigger-only-svg-width: var(--ti-common-size-6x);
// 下拉菜单触发元素只有图标时的图标高度
--ti-dropdown-trigger-only-svg-height: var(--ti-common-size-4x);
--ti-dropdown-trigger-only-svg-height: var(--ti-common-size-6x);
// 下拉菜单触发元素只有图标时的图标悬浮背景色
--ti-dropdown-trigger-only-svg-hover-bg-color: rgba(0,0,0,0.05);
--ti-dropdown-trigger-only-svg-hover-bg-color: var(--ti-common-color-bg-normal);
// 下拉菜单触发元素只有图标时的图标圆角
--ti-dropdown-trigger-only-svg-hover-radius: var(--ti-common-border-radius-2);
// 下拉菜单触发元素按钮类型时图标颜色
Expand Down Expand Up @@ -69,4 +69,8 @@
--ti-dropdown-title-button-padding-left: var(--ti-common-space-6x);
// 下拉图标垂直内边距
--ti-dropdown-suffix-icon-margin-vertical: var(--ti-common-space-2x);
// 默认按钮下拉图标颜色
--ti-dropdown-suffix-icon-color: var(--ti-common-color-icon-normal);
// 默认按钮下拉图标 hover 颜色
--ti-dropdown-suffix-icon-color-hover: var(--ti-common-color-icon-hover);
}
2 changes: 1 addition & 1 deletion packages/theme/src/select-dropdown/aurora-theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ export const tinySelectDropdownAuroraTheme = {
'ti-select-dropdown-padding-bottom': 'var(--ti-common-space-0)',
'ti-select-dropdown-padding-top': 'var(--ti-common-space-0)',
'ti-select-dropdown-max-height': '188px',
'ti-select-dropdown-box-shadow': '0 0 4px rgba(0,0,0,0.3)', // 没有common 变量
'ti-select-dropdown-box-shadow': 'var(--ti-common-shadow-2-down)', // 没有common 变量
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tip

Codebase Verification

The variable --ti-common-shadow-2-down is defined; update or remove the comment.

The variable --ti-common-shadow-2-down is defined in the codebase, specifically in the following files:

  • packages/theme/src/base/old-basic-vars.less
  • packages/theme/src/base/basic-var.less

The comment suggesting the absence of this variable is incorrect and should be updated or removed to avoid confusion.

Analysis chain

Verify the existence of the referenced variable and update the comment accordingly.

Using a variable for the box shadow value is a good practice for maintaining consistency across the theme. However, the comment suggests that the referenced variable --ti-common-shadow-2-down may not exist.

Run the following script to verify if the variable is defined:

If the variable is found to be defined, consider removing or updating the comment to avoid confusion.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify if the variable `--ti-common-shadow-2-down` is defined.

# Test: Search for the variable definition.
rg --type css $'--ti-common-shadow-2-down:'

Length of output: 471

Script:

#!/bin/bash
# Description: Verify if the variable `--ti-common-shadow-2-down` is defined.

# Test: Search for the variable definition.
rg --type css '--ti-common-shadow-2-down:'

Length of output: 471

Script:

#!/bin/bash
# Description: Verify if the variable `--ti-common-shadow-2-down` is defined.

# Test: Search for the variable definition across all files.
rg '--ti-common-shadow-2-down:'

Length of output: 460

Script:

#!/bin/bash
# Description: Verify if the variable `--ti-common-shadow-2-down` is defined.

# Test: Search for the variable definition across all files.
rg '\-\-ti-common-shadow-2-down:'

Length of output: 262

'ti-select-dropdown-border-weight': 'var(--ti-common-border-weight-normal)',
'ti-select-dropdown-border-color': 'var(--ti-common-color-line-normal)',
'ti-option-checkbox-border-color-hover': '#bfbfbf',
Expand Down
4 changes: 2 additions & 2 deletions packages/theme/src/select-dropdown/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
// 选择下拉框背景色
--ti-select-dropdown-bg-color: var(--ti-common-color-light, #fff);
// 选择下拉框的阴影
--ti-select-dropdown-box-shadow: var(--ti-common-shadow-2-down);
--ti-select-dropdown-box-shadow: var(--ti-common-shadow-3-down);
// 下拉选项水平内边距
--ti-select-dropdown-item-padding-horizontal: var(--ti-common-space-4x);
// 选择下拉框的顶部外边距
Expand Down Expand Up @@ -75,7 +75,7 @@
// 下拉面板搜索框右侧外边距
--ti-select-dropdown-search-margin-right: var(--ti-common-space-4x);
// 下拉面板搜索框的宽度
--ti-select-dropdown-search-width: calc(100% - var(--ti-common-space-4x)*2);
--ti-select-dropdown-search-width: calc(100% - var(--ti-common-space-4x) * 2);
// 下拉面板搜索框的边框宽度
--ti-select-dropdown-search-border-width: var(--ti-common-border-weight-normal);
// 下拉面板搜索框的边框圆角
Expand Down
Loading
Loading