Skip to content

refactor(autocomplete): [autocomplete] modify variable names and add … #2263

New issue

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

#

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

Already on GitHub? # to your account

Merged
merged 3 commits into from
Oct 15, 2024
Merged

refactor(autocomplete): [autocomplete] modify variable names and add … #2263

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b371b72
refactor(autocomplete): [autocomplete] modify variable names and add …
MomoPoppy Oct 15, 2024
212fff6
refactor(autocomplete): [autocomplete] modify variable names and add …
MomoPoppy Oct 15, 2024
9b6272a
refactor(autocomplete): [autocomplete] modify variable names and add …
MomoPoppy Oct 15, 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
76 changes: 26 additions & 50 deletions packages/theme/src/autocomplete/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,42 +14,43 @@
@import './vars.less';

@autocomplete-prefix-cls: ~'@{css-prefix}autocomplete';
@icon-loading-prefix-cls: ~'@{css-prefix}icon-loading';
@popper-prefix-cls: ~'@{css-prefix}popper';

.@{autocomplete-prefix-cls} {
.component-css-vars-autocomplete();

position: relative;
display: inline-block;

&.show-auto-width {
width: 100%;
}

// 弹框
&-suggestion {
border: 1px solid var(--ti-autocomplete-suggestion-border-color);
border-radius: var(--ti-autocomplete-suggestion-border-radius);
background-color: var(--ti-autocomplete-suggestion-bg-color);
box-sizing: border-box;
box-shadow: var(--ti-common-shadow-2-down);
.inject-Autocomplete-vars();

border-radius: var(--tv-Autocomplete-panel-border-radius);
background-color: var(--tv-Autocomplete-panel-bg-color);
box-shadow: var(--tv-Autocomplete-panel-box-shadow);
margin: var(--tv-Autocomplete-panel-margin-y) 0;
line-height: var(--tv-Autocomplete-line-height);
color: var(--tv-Autocomplete-text-color);
font-size: var(--tv-Autocomplete-font-size);

&__wrap {
max-height: 280px;
box-sizing: border-box;

.tiny-scrollbar__view {
margin: 0;
padding: 8px 0;
}
}

&__list.tiny-scrollbar__view {
margin: 0;
padding: 8px 0;
&__list-item[role='option'],
&__list-item[role='loading'] {
padding: var(--tv-Autocomplete-li-padding);
}

& &__list-item {
padding: var(--ti-autocomplete-li-padding-vertical) var(--ti-autocomplete-li-padding-horizontal);
margin: 0;
line-height: var(--ti-autocomplete-li-height);
color: var(--ti-autocomplete-li-text-color);
font-size: var(--ti-autocomplete-li-font-size);
// 列表项
&__list-item {
list-style: none;
white-space: nowrap;
overflow: hidden;
Expand All @@ -58,44 +59,19 @@

&.highlighted,
&:hover {
background-color: var(--ti-autocomplete-li-hover-bg-color);
}

&.divider {
margin-top: 6px;
border-top: 1px solid var(--ti-autocomplete-li-divider-border-color);

&:last-child {
margin-bottom: -6px;
}
background-color: var(--tv-Autocomplete-li-bg-color-hover);
}

&:only-of-type {
&,
&:hover {
background-color: var(--ti-autocomplete-li-select-bg-color);
color: var(--ti-autocomplete-li-selected-text-color);
}
&.selected {
color: var(--tv-Autocomplete-text-color-selected);
}
}

// 加载
&.is-loading &__list-loading {
background-color: var(--ti-autocomplete-suggestion-bg-color);

svg {
width: 16px;
height: 16px;
}
}

&.is-loading {
.@{icon-loading-prefix-cls} {
vertical-align: middle;
.tiny-svg {
font-size: var(--tv-Autocomplete-icon-size);
}
}

&.@{popper-prefix-cls}[x-placement^='bottom'] {
margin-top: var(--ti-autocomplete-dropdown-gap);
}
}
}
54 changes: 25 additions & 29 deletions packages/theme/src/autocomplete/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,33 +10,29 @@
*
*/

.component-css-vars-autocomplete() {
// 下拉框边框圆角
--ti-autocomplete-suggestion-border-radius: var(--ti-common-border-radius-normal, 6px);
// 下拉框边框色
--ti-autocomplete-suggestion-border-color: var(--ti-common-color-transparent, transparent);
// 下拉框背景色
--ti-autocomplete-suggestion-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
// 下拉框列表项横向填充长度
--ti-autocomplete-li-padding-horizontal: var(--ti-common-size-4x, 16px);
// 下拉框列表项竖向填充长度
--ti-autocomplete-li-padding-vertical: 5px;
// 下拉框列表项的文本色
--ti-autocomplete-li-text-color: var(--ti-common-color-text-primary, #191919);
// 下拉框列表项字号
--ti-autocomplete-li-font-size: var(--ti-common-font-size-base, 14px);
// 下拉框列表项的悬浮背景色
--ti-autocomplete-li-hover-bg-color: var(--ti-common-color-hover-background, #f5f5f5);
// 下拉框列表选中项的背景色
--ti-autocomplete-li-select-bg-color: var(--ti-common-color-selected-background, #f5f5f5);
// 下拉框列表选中项的文本色
--ti-autocomplete-li-selected-text-color: var(--ti-common-color-selected-text-color, #191919);
// 每项的分配者的边框色（没有效果）
--ti-autocomplete-li-divider-border-color: var(--ti-common-color-dark, #000);
// 下拉框列表项行高
--ti-autocomplete-li-height: 22px;
// 加载图标色（没有效果
--ti-autocomplete-loading-text-color: var(--ti-common-color-placeholder, #808080);
// 下拉框面板与输入框的间隙
--ti-autocomplete-dropdown-gap: var(--ti-common-dropdown-gap, 4px);
.inject-Autocomplete-vars() {
// 行高
--tv-Autocomplete-line-height: var(--tv-line-height-number, 1.5);
// 字号
--tv-Autocomplete-font-size: var(--tv-font-size-md, 14px);
// 文本色
--tv-Autocomplete-text-color: var(--tv-color-text, #191919);
// 文本色(选中）
--tv-Autocomplete-text-color-selected: var(--tv-color-text-active, #1476ff);
// 图标尺寸
--tv-Autocomplete-icon-size: var(--tv-icon-size, 16px);

// 面板垂直外间距
--tv-Autocomplete-panel-margin-y: var(--tv-space-sm, 4px);
// 面板圆角
--tv-Autocomplete-panel-border-radius: var(--tv-border-radius-md, 6px);
// 面板背景色
--tv-Autocomplete-panel-bg-color: var(--tv-color-bg-secondary, #fff);
// 面板阴影
--tv-Autocomplete-panel-box-shadow: var(--tv-shadow-3-down, 0 4px 16px 0 rgba(0, 0, 0, 0.08));

// 列表项内间距
--tv-Autocomplete-li-padding: 5.5px var(--tv-space-xl, 16px);
// 列表项悬浮背景色
--tv-Autocomplete-li-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
Comment on lines +34 to +37
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

List item-related variables refinement

The new variables for list item padding and hover background color offer more precise control over the appearance of individual items in the Autocomplete list.

However, there's an opportunity for improvement:

Consider adding a variable for the selected item's background color to provide more flexibility in styling. For example:

  // 列表项悬浮背景色
  --tv-Autocomplete-li-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
+ // 列表项选中背景色
+ --tv-Autocomplete-li-bg-color-selected: var(--tv-color-bg-active, #e6f2ff);

This addition would allow for distinct styling of hovered and selected items, enhancing user experience.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// 列表项内间距
--tv-Autocomplete-li-padding: 5.5px var(--tv-space-xl, 16px);
// 列表项悬浮背景色
--tv-Autocomplete-li-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
// 列表项内间距
--tv-Autocomplete-li-padding: 5.5px var(--tv-space-xl, 16px);
// 列表项悬浮背景色
--tv-Autocomplete-li-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
// 列表项选中背景色
--tv-Autocomplete-li-bg-color-selected: var(--tv-color-bg-active, #e6f2ff);

}
2 changes: 1 addition & 1 deletion packages/theme/src/base/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,7 @@
/* 2.6.1 常态 */
--tv-color-bg: var(--tv-base-color-common-3); // #f5f5f5 通用背景色 /选块的默认背景颜色、滑块手柄的背景颜色/表格表头/穿梭框头部背景颜色/下拉搜索的背景、折叠面板背景色
--tv-color-bg-primary: var(--tv-base-color-brand); // #191919 主要背景色（品牌色）：slider/step/流程图
--tv-color-bg-secondary: var(--tv-base-color-common-1); // #fff 次要背景色（白色）：// 输入框背景/默认按钮背景/折叠面板头部背景色
--tv-color-bg-secondary: var(--tv-base-color-common-1); // #fff 次要背景色（白色）：// 输入框背景/默认按钮背景/折叠面板头部背景色/下拉面板背景色
--tv-color-bg-control: var(--tv-base-color-common-7); // #c2c2c2 单选/复选/开关/滑块默认背景色
--tv-color-bg-control-unactive: var(--tv-base-color-common-7); // #c2c2c2 开关组件-关闭状态-背景色
--tv-color-bg-gray-1: var(--tv-base-color-common-2); // #fafafa 灰色背景-1：灰色卡片背景色/表格下展背景色
Expand Down
10 changes: 7 additions & 3 deletions packages/vue/src/autocomplete/src/pc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
<div
ref="popper"
v-show="hideLoading ? suggestionState.showPopper && !state.loading : suggestionState.showPopper"
class="tiny-autocomplete tiny-autocomplete-suggestion tiny-popper"
class="tiny-autocomplete-suggestion tiny-popper"
:class="[popperClass ? popperClass : '', { 'is-loading': !hideLoading && state.loading }]"
:style="{ width: suggestionState.dropdownWidth }"
role="region"
Expand All @@ -72,15 +72,19 @@
<li
v-if="!hideLoading && state.loading"
class="tiny-autocomplete-suggestion__list-item tiny-autocomplete-suggestion__list-loading"
role="loading"
>
<icon-loading-shadow width="1em" height="1em" />
<icon-loading-shadow></icon-loading-shadow>
</li>
<template v-else>
<li
v-for="(item, index) in state.suggestions"
:key="index"
class="tiny-autocomplete-suggestion__list-item"
:class="{ highlighted: state.highlightedIndex === index }"
:class="{
highlighted: state.highlightedIndex === index,
selected: modelValue === item[valueKey]
}"
@click="select(item)"
:id="`${state.id}-item-${index}`"
role="option"
Expand Down
Loading