Skip to content

Commit

Permalink
refactor(autocomplete): [autocomplete] modify variable names and add …
Browse files Browse the repository at this point in the history 
…refactor styles
  • Loading branch information
@MomoPoppy
MomoPoppy committed Oct 15, 2024
1 parent dfa22ae commit b371b72
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 83 deletions.
74 changes: 23 additions & 51 deletions packages/theme/src/autocomplete/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,42 +14,39 @@
@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);
.component-css-vars-autocomplete();

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;
}

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

& &__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 {
padding: var(--tv-Autocomplete-li-padding);
list-style: none;
white-space: nowrap;
overflow: hidden;
Expand All @@ -58,44 +55,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);
}
}
}
52 changes: 24 additions & 28 deletions packages/theme/src/autocomplete/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,32 +11,28 @@
*/

.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);
// 行高
--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);
}
2 changes: 1 addition & 1 deletion packages/theme/src/base/vars.less
View file
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
9 changes: 6 additions & 3 deletions packages/vue/src/autocomplete/src/pc.vue
View file
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 @@ -73,14 +73,17 @@
v-if="!hideLoading && state.loading"
class="tiny-autocomplete-suggestion__list-item tiny-autocomplete-suggestion__list-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

0 comments on commit b371b72

Please sign in to comment.