Skip to content

Commit

Permalink
feat(dropdown): [dropdown,select,action-menu] Adapt to xdesign themes
Browse files Browse the repository at this point in the history
  • Loading branch information
@MomoPoppy
MomoPoppy committed Sep 12, 2024
1 parent 805bdab commit 6cc0ada
Show file tree
Hide file tree
Showing 9 changed files with 115 additions and 22 deletions.
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/action-menu/icon-composition-api.vue
View file
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
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
16 changes: 16 additions & 0 deletions examples/sites/demos/pc/app/dropdown/multi-level-composition-api.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
<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>
Expand All @@ -15,6 +17,20 @@
<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
19 changes: 17 additions & 2 deletions examples/sites/demos/pc/app/dropdown/multi-level.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<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>
Expand All @@ -15,6 +16,20 @@
<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 @@ -51,7 +66,7 @@ export default {
icon: iconStarDisable()
}
],
options1: reactive([
options1: [
{
label: '老友粉'
},
Expand All @@ -69,7 +84,7 @@ export default {
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
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
17 changes: 17 additions & 0 deletions packages/theme/src/dropdown/index.less
View file
Original file line number Diff line number Diff line change
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
4 changes: 4 additions & 0 deletions packages/theme/src/dropdown/vars.less
View file
Original file line number Diff line number Diff line change
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);
}
6 changes: 6 additions & 0 deletions packages/theme/src/select/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -312,6 +312,12 @@
&.is-hover-expand.is-disabled {
.@{select-prefix-cls}__tags {
height: auto;

> span {
> span {
display: inline-block;
}
}
}
}

Expand Down
5 changes: 2 additions & 3 deletions packages/vue/src/select/src/pc.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@
<template v-else>
<tiny-tag
v-if="hoverExpand || clickExpand"
:class="['tiny-select__tags-collapse', { 'is-hidden': state.isHidden }]"
:class="['tiny-select__tags-collapse', { 'is-hidden': state.isHidden || state.isDisabled }]"
:type="state.getTagType"
key="tags-collapse"
data-tag="tags-collapse"
Expand Down Expand Up @@ -227,8 +227,7 @@
>
<span>
<span v-for="item in state.selected" :key="item.value">
<slot name="label" :item="item">{{ item.state ? item.state.currentLabel : item.currentLabel }}</slot
>;
<slot name="label" :item="item">{{ item.state ? item.state.currentLabel : item.currentLabel }}</slot>
</span>
</span>

Expand Down

0 comments on commit 6cc0ada

Please sign in to comment.