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): [action-menu,dropdown,autocomplete,input] component dark theme adaptation #3014

Merged
merged 5 commits into from
Mar 4, 2025
Merged

feat(dropdown): [action-menu,dropdown,autocomplete,input] component dark theme adaptation #3014

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
977097b
feat(dropdown): [action-menu,dropdown] component dark theme adaptation
MomoPoppy Mar 4, 2025
15386bd
feat(dialog-select): [dialog-select] modify search icon alignment issue
MomoPoppy Mar 4, 2025
aff176f
feat(autocomplete): [autocomplete] dark theme adaptation
MomoPoppy Mar 4, 2025
a5326e8
feat(input): [input] dark theme adaptation
MomoPoppy Mar 4, 2025
b563ad1
test(dropdown): [action-menu,dropdown] synchronize modification of te…
MomoPoppy Mar 5, 2025
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
10 changes: 5 additions & 5 deletions 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 @@ -76,22 +76,22 @@ p {
:deep(.tiny-action-menu__wrap) {
.tiny-action-menu__item {
.tiny-dropdown-item__wrap {
color: #191919;
color: var(--tv-color-icon-control);
.tiny-svg {
fill: #191919;
fill: var(--tv-color-icon-control);
}
}

&:hover {
.tiny-dropdown-item__wrap > .tiny-dropdown-item__content .tiny-svg {
fill: #191919;
fill: var(--tv-color-icon-control);
}
}

.tiny-dropdown {
color: #191919;
color: var(--tv-color-icon-control);
.tiny-svg {
fill: #191919;
fill: var(--tv-color-icon-control);
}
}
}
Expand Down
10 changes: 5 additions & 5 deletions 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 @@ -81,22 +81,22 @@ p {
:deep(.tiny-action-menu__wrap) {
.tiny-action-menu__item {
.tiny-dropdown-item__wrap {
color: #191919;
color: var(--tv-color-icon-control);
.tiny-svg {
fill: #191919;
fill: var(--tv-color-icon-control);
}
}

&:hover {
.tiny-dropdown-item__wrap > .tiny-dropdown-item__content .tiny-svg {
fill: #191919;
fill: var(--tv-color-icon-control);
}
}

.tiny-dropdown {
color: #191919;
color: var(--tv-color-icon-control);
.tiny-svg {
fill: #191919;
fill: var(--tv-color-icon-control);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/action-menu/popper-class-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,6 @@ const options = ref([

<style>
.custom-action-menu {
background-color: antiquewhite;
background-color: var(--tv-color-bg-3);
}
</style>
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/action-menu/popper-class.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,6 @@ export default {

<style>
.custom-action-menu {
background-color: antiquewhite;
background-color: var(--tv-color-bg-3);
}
</style>
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/action-menu/slot-item-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<tiny-action-menu :options="options">
<template #item="{ data }">
<tiny-icon-smile></tiny-icon-smile>
<span style="vertical-align: middle"> {{ data.name }}</span>
<span style="vertical-align: middle; margin-left: 4px"> {{ data.name }}</span>
</template>
</tiny-action-menu>
</template>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/action-menu/slot-item.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<tiny-action-menu :options="options">
<template #item="{ data }">
<icon-smile></icon-smile>
<span style="vertical-align: middle"> {{ data.name }}</span>
<span style="vertical-align: middle; margin-left: 4px"> {{ data.name }}</span>
</template>
</tiny-action-menu>
</template>
Expand Down
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/dropdown/inherit-width-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="demo-drop">
<p class="demo-dropdown">场景 1：默认</p>
<tiny-dropdown split-button type="success">
<tiny-dropdown border type="success">
Copy link

Choose a reason for hiding this comment

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

💡 Verification agent

🧩 Analysis chain

Attribute change from split-button to border

Changing from split-button to border appears to be an API modification that may affect the component's appearance or behavior. Ensure this change is documented in the component's API documentation.

Consider adding a comment in the code explaining the purpose of the border attribute for better developer understanding.

🌐 Web query:

Is there a difference between split-button and border attributes in Vue dropdown components?

💡 Result:

Split-button and border attributes serve distinct purposes in Vue dropdown components based on implementation across different libraries:

Split-button Attribute

  • Structural division: Creates a two-part button where the main section triggers a default action and the secondary section opens the dropdown menu [1][3][4]
  • Implementation: 
    <dx-drop-down-button :split-button="true" @button-click="handleClick" />
    • Requires separate handlers for button click (main action) and menu interaction [1]
    • Supported in libraries like DevExtreme, Element Plus, and BootstrapVue [1][3][4]

Border Attributes

  • Styling control: Typically managed through CSS classes/props rather than dedicated border attributes in most Vue dropdown implementations
  • Alternative approaches:
    1. Use elementAttr for custom styling (DevExtreme):
    <DxDropDownBox :element-attr="{ class: 'custom-border' }" />
    1. Apply CSS directly:
    .dropdown-container {
  border: 2px solid #ccc;
  border-radius: 4px;
}

Key differences:

Feature Split-button Border Styling
Purpose Functional division Visual appearance
Implementation Component-specific prop CSS/Generic HTML attributes
Library Support Explicit in component APIs [1][3][4] Indirect through styling systems

No standard border-specific prop exists in major Vue dropdown implementations - borders are typically controlled through CSS classes or generic attribute passthroughs [5][8]. The split-button is a deliberate component architecture choice, while border treatment is a presentational concern handled through styling mechanisms.

Citations:

Documentation Update Required Due to Attribute Change

  • The change from using the split-button prop to border in <tiny-dropdown border type="success"> notably shifts the component’s behavior. Whereas split-button is intended for creating a dual-action (functional split) button, the border attribute appears to control only styling.
  • Based on recent research, these two attributes serve distinct purposes. Please ensure that this API change is clearly documented in the component's API documentation.
  • Additionally, consider adding an inline comment in the code explaining the rationale behind using the border attribute to aid future maintainers.

File: examples/sites/demos/pc/app/dropdown/inherit-width-composition-api.vue | Line: 4

更多菜单（标题很长示例）
<template #dropdown>
<tiny-dropdown-menu>
Expand All @@ -15,7 +15,7 @@
</tiny-dropdown>
<br /><br />
<p class="demo-dropdown">场景 2：设置 inherit-width</p>
<tiny-dropdown split-button type="success" :inherit-width="true">
<tiny-dropdown border type="success" :inherit-width="true">
更多菜单（标题很长示例）
<template #dropdown>
<tiny-dropdown-menu>
Expand Down
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/dropdown/inherit-width.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="demo-drop">
<p class="demo-dropdown">场景 1：默认</p>
<tiny-dropdown split-button type="success">
<tiny-dropdown border type="success">
更多菜单（标题很长示例）
<template #dropdown>
<tiny-dropdown-menu>
Expand All @@ -15,7 +15,7 @@
</tiny-dropdown>
<br /><br />
<p class="demo-dropdown">场景 2：设置 inherit-width</p>
<tiny-dropdown split-button type="success" :inherit-width="true">
<tiny-dropdown type="success" border :inherit-width="true">
更多菜单（标题很长示例）
<template #dropdown>
<tiny-dropdown-menu>
Expand Down
18 changes: 12 additions & 6 deletions examples/sites/demos/pc/app/dropdown/show-icon-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,14 +58,20 @@ p {
margin-top: 30px;
}

.tiny-dropdown.only-icon {
:deep(.tiny-dropdown__trigger) {
.tiny-svg {
fill: #191919;
&:hover {
fill: #191919;
.tiny-dropdown {
&.only-icon {
:deep(.tiny-dropdown__trigger) {
.tiny-svg {
fill: var(--tv-color-icon-control);
&:hover {
fill: var(--tv-color-icon-control);
}
}
}
}

:deep(.tiny-dropdown__prefix-inner) {
fill: var(--tv-color-icon-control);
}
}
</style>
18 changes: 12 additions & 6 deletions examples/sites/demos/pc/app/dropdown/show-icon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,14 +68,20 @@ p {
margin-top: 30px;
}

.tiny-dropdown.only-icon {
:deep(.tiny-dropdown__trigger) {
.tiny-svg {
fill: #191919;
&:hover {
fill: #191919;
.tiny-dropdown {
&.only-icon {
:deep(.tiny-dropdown__trigger) {
.tiny-svg {
fill: var(--tv-color-icon-control);
&:hover {
fill: var(--tv-color-icon-control);
}
}
}
}

:deep(.tiny-dropdown__prefix-inner) {
fill: var(--tv-color-icon-control);
}
}
</style>
8 changes: 4 additions & 4 deletions examples/sites/demos/pc/app/dropdown/size-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="demo-drop">
<p class="demo-dropdown">默认：</p>
<tiny-dropdown split-button type="primary">
<tiny-dropdown border type="primary">
默认尺寸
<template #dropdown>
<tiny-dropdown-menu>
Expand All @@ -14,7 +14,7 @@
</template>
</tiny-dropdown>
<p class="demo-dropdown">其他尺寸：</p>
<tiny-dropdown size="medium" split-button type="primary">
<tiny-dropdown size="medium" border type="primary">
中等尺寸
<template #dropdown>
<tiny-dropdown-menu>
Expand All @@ -27,7 +27,7 @@
</template>
</tiny-dropdown>

<tiny-dropdown size="small" split-button type="primary">
<tiny-dropdown size="small" border type="primary">
小型尺寸
<template #dropdown>
<tiny-dropdown-menu>
Expand All @@ -40,7 +40,7 @@
</template>
</tiny-dropdown>

<tiny-dropdown size="mini" split-button type="primary">
<tiny-dropdown size="mini" border type="primary">
超小尺寸
<template #dropdown>
<tiny-dropdown-menu>
Expand Down
8 changes: 4 additions & 4 deletions examples/sites/demos/pc/app/dropdown/size.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="demo-drop">
<p class="demo-dropdown">默认：</p>
<tiny-dropdown split-button type="primary">
<tiny-dropdown border type="primary">
默认尺寸
<template #dropdown>
<tiny-dropdown-menu>
Expand All @@ -14,7 +14,7 @@
</template>
</tiny-dropdown>
<p class="demo-dropdown">其他尺寸：</p>
<tiny-dropdown size="medium" split-button type="primary">
<tiny-dropdown size="medium" border type="primary">
Copy link

Choose a reason for hiding this comment

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

💡 Verification agent

🧩 Analysis chain

Verify that all dropdown sizes render correctly with the new attribute.

The medium-sized dropdown now uses the border attribute instead of split-button. Check that the rendered UI maintains the expected visual appearance in both light and dark themes.

🏁 Script executed:

#!/bin/bash
# Check for other instances of split-button that might need updating
rg "split-button" --type vue packages/ examples/ -l

Length of output: 79

Action: Verify dropdown attribute update and UI consistency

Please manually verify that:

  • The updated medium dropdown now uses the border attribute (instead of split-button) and renders correctly.
  • All dropdown size variations display as expected across both light and dark themes.
  • No outdated usage of split-button remains in any Vue component (use the above script to help confirm).

🏁 Script executed:

#!/bin/bash
# Search for any lingering "split-button" attribute in Vue files by using a glob pattern
rg "split-button" --glob "*.vue" packages/ examples/ -l

Length of output: 529

Action Required: Verify Dropdown Attribute Consistency in All Examples

It looks like the update in examples/sites/demos/pc/app/dropdown/size.vue (where the medium-sized dropdown now uses the border attribute) is correctly applied. However, our search detected several other Vue files that still reference "split-button":

  • examples/sites/demos/pc/app/dropdown/split-button.vue
  • examples/sites/demos/pc/app/dropdown/events-composition-api.vue
  • examples/sites/demos/pc/app/dropdown/disabled-composition-api.vue
  • examples/sites/demos/pc/app/dropdown/disabled.vue
  • examples/sites/demos/pc/app/dropdown/events.vue
  • examples/sites/demos/pc/app/dropdown/split-button-composition-api.vue

Please verify whether these remaining instances are intentional (e.g., for legacy demos or separate variants) or if they also require updating to use the new attribute mechanism. Additionally, double-check that all dropdown sizes render consistently in both light and dark themes.

中等尺寸
<template #dropdown>
<tiny-dropdown-menu>
Expand All @@ -27,7 +27,7 @@
</template>
</tiny-dropdown>

<tiny-dropdown size="small" split-button type="primary">
<tiny-dropdown size="small" border type="primary">
小型尺寸
<template #dropdown>
<tiny-dropdown-menu>
Expand All @@ -40,7 +40,7 @@
</template>
</tiny-dropdown>

<tiny-dropdown size="mini" split-button type="primary">
<tiny-dropdown size="mini" border type="primary">
超小尺寸
<template #dropdown>
<tiny-dropdown-menu>
Expand Down
14 changes: 0 additions & 14 deletions examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,20 +83,6 @@ export default {
},
codeFiles: ['show-icon.vue']
},
{
demoId: 'split-button',
name: {
'zh-CN': '按钮类型',
'en-US': 'Button type'
},
desc: {
'zh-CN':
'<p>通过 <code>split-button</code> 属性，设置下拉菜单显示为按钮类型。仅按钮类型时，支持 <code>type</code> 属性设置按钮状态。</p>\n',
'en-US':
'<p>Set the drop-down menu to display as a button type through the <code>split-button</code> attribute. When only button types are used, the <code>type</code> attribute setting button status is supported.</p>\n'
},
codeFiles: ['split-button.vue']
},
{
demoId: 'trigger',
name: {
Expand Down
5 changes: 5 additions & 0 deletions packages/theme/src/action-menu/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,11 @@
justify-content: space-between;
align-items: center;

.@{dropdown-prefix-cls} {
display: flex;
align-items: center;
}

// 默认
&.@{action-menu-prefix-cls}__item-visible {
.@{dropdown-item-prefix-cls} {
Expand Down
6 changes: 5 additions & 1 deletion packages/theme/src/base/dark-theme.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -384,7 +384,10 @@
--tv-color-bg-hover-4: var(--tv-base-color-common-10); // #262626 表格悬浮/下拉悬浮/左侧导航悬浮
--tv-color-bg-active-primary-1: var(--tv-base-color-common-4); // #B3B3B3 主要按钮悬浮
--tv-color-bg-inverse: var(--tv-base-color-common-1); // #fff 不发生反色的背景色：switch/slider按钮控件背景色

--tv-color-bg-active-control-1:var(--tv-base-color-brand-4); // #264DAB radio 选中禁用色
--tv-color-bg-5:var(--tv-base-color-common-6); // #808080 轮播指示器背景色
--tv-color-bg-5-active:var(--tv-base-color-common-2); // #E6E6E6 轮播指示器激活背景色
--tv-color-bg-inverse-tint-1:var(--tv-base-color-common-10); // #262626 图片工具栏背景色


/** 2.7 边框色/分割线颜色 **/
Expand All @@ -407,6 +410,7 @@
--tv-color-border-container: rgba(255, 255, 255, 0.1); // rgba(255,255,255,0.1) 卡片选择默认边框
--tv-color-border-container-hover: rgba(255, 255, 255, 0); // rgba(255,255,255,0) 卡片选择悬浮边框
--tv-color-border-container-active: var(--tv-base-color-brand-7); // #317AF7 卡片选择选中边框
--tv-color-border-inverse-tint:var(--tv-base-color-common-13); // #000 tag边框

/** 3. 字体变量 **/

Expand Down
5 changes: 5 additions & 0 deletions packages/theme/src/base/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -373,6 +373,10 @@
--tv-color-bg-hover-4: var(--tv-base-color-common-1); // #ffffff 表格悬浮/下拉悬浮/左侧导航悬浮
--tv-color-bg-active-primary-1: var(--tv-base-color-common-9); // #595959 主要按钮悬浮
--tv-color-bg-inverse: var(--tv-base-color-common-1); // #fff 不发生反色的背景色：switch/slider按钮控件背景色
--tv-color-bg-active-control-1:var(--tv-base-color-common-6); // #dbdbdb radio 选中禁用色
--tv-color-bg-5:var(--tv-base-color-common-5); // #e6e6e6 轮播指示器背景色
--tv-color-bg-5-active:var(--tv-base-color-common-9); // #595959 轮播指示器激活背景色
--tv-color-bg-inverse-tint-1:var(--tv-base-color-common-1); // #fff 图片工具栏背景色

/** 2.7 边框色/分割线颜色 **/

Expand All @@ -394,6 +398,7 @@
--tv-color-border-container: var(--tv-base-color-common-4); // #f0f0f0 卡片选择默认边框
--tv-color-border-container-hover: var(--tv-base-color-common-1); // #fff 卡片选择悬浮边框
--tv-color-border-container-active: var(--tv-base-color-brand-6); // #1476ff 卡片选择选中边框
--tv-color-border-inverse-tint:var(--tv-base-color-common-1); // #fff tag边框

/** 3. 字体变量 **/

Expand Down
7 changes: 3 additions & 4 deletions packages/theme/src/dropdown/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,14 +42,13 @@
margin-left: var(--tv-Dropdown-icon-margin-x);

.@{svg-prefix-cls} {
fill: var(--tv-Dropdown-icon-color-link);
font-size: var(--tv-Dropdown-icon-size);
}
}

&.@{css-prefix}button {
&:not(.tiny-button) {
.@{svg-prefix-cls} {
fill: var(--tv-Dropdown-icon-color-white);
fill: var(--tv-Dropdown-icon-color-link);
}
}

Expand Down Expand Up @@ -121,7 +120,7 @@

&__trigger:hover {
&.@{css-prefix}button {
&.tiny-button--default {
&.tiny-button--default:not(.is-disabled) {
.tiny-svg {
fill: var(--tv-Dropdown-icon-color-hover);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/dropdown/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
// 下拉菜单触发元素按钮类型时图标颜色
--tv-Dropdown-icon-color-white: var(--tv-color-icon-inverse-tint, #ffffff);
// 默认按钮图标 hover 颜色
--tv-Dropdown-icon-color-hover: var(--tv-icon-hover, #191919);
--tv-Dropdown-icon-color-hover: var(--tv-color-icon-hover, #191919);
// 触发源的图标颜色
--tv-Dropdown-icon-color-link: var(--tv-color-icon-link, #1476ff);
// 触发源的图标禁用色
Expand Down
6 changes: 3 additions & 3 deletions packages/theme/src/svgs/ellipsis.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 2 additions & 3 deletions packages/vue/src/dropdown/src/pc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,7 @@ export default defineComponent({
<tiny-button
ref="trigger"
round={round}
size={size}
disabled={disabled}
type={type}
class={`tiny-dropdown__border ${state.visible ? 'is-expand' : ''}${
Expand All @@ -197,9 +198,7 @@ export default defineComponent({
) : (
<span
ref="trigger"
class={`is-text${state.visible ? ' is-expand' : ' is-hide'}${
disabled ? ' is-disabled' : ''
} ${triggerClass}`}>
class={`is-text${state.visible ? ' is-expand' : ' is-hide'}${disabled ? ' is-disabled' : ''} ${triggerClass}`}>
{prefixInner}
{defaultTriggerElm}
{suffixInner}
Expand Down
Loading