refactor(select): [select] refactor theme vars for select

examples/sites/demos/pc/app/select/events.spec.ts

@@ -26,7 +26,7 @@ test('单选事件', async ({ page }) => {
 
   await page.waitForTimeout(200)
   await input.hover()
-  await select.locator('.tiny-select__caret.icon-close').click()
+  await select.locator('.tiny-select__caret.tiny-select__close').click()
   await page.waitForTimeout(500)
   await expect(input).toHaveValue('')
   await expect(model.filter({ hasText: '触发 clear 事件' })).toHaveCount(1)
@@ -65,7 +65,7 @@ test('多选事件', async ({ page }) => {
 
   await page.waitForTimeout(200)
   await select.hover()
-  await select.locator('.tiny-select__caret.icon-close').click()
+  await select.locator('.tiny-select__caret.tiny-select__close').click()
 
   await expect(tag).toHaveCount(0)
   await expect(model.filter({ hasText: '触发 change 事件' })).toHaveCount(1)

packages/theme-saas/src/select/index.less

@@ -61,7 +61,7 @@
 
     .@{input-prefix-cls} {
       &.is-show-close {
-        .icon-close {
+        .@{select-prefix-cls}__close {
           @apply mr-1;
         }
       }
@@ -335,7 +335,7 @@
         @apply pr-12;
       }
 
-      .icon-close {
+      .tiny-select__close {
         @apply mr-2;
         @apply fill-color-text-placeholder;
 

packages/theme/src/select/index.less

@@ -104,10 +104,7 @@
     position: absolute;
     line-height: normal;
     white-space: normal;
-    padding-left: var(--ti-select-tags-wrap-padding-left);
-    padding-right: var(--ti-select-tags-wrap-padding-right);
-    padding-bottom: var(--ti-select-tags-wrap-padding-bottom);
-    padding-top: var(--ti-select-tags-wrap-padding-top);
+    padding: var(--ti-Select-tags-padding);
     z-index: 1;
     top: 50%;
     margin-left: 1px;
@@ -143,24 +140,24 @@
       outline: 0;
       padding: 0;
       margin-left: 8px;
-      color: var(--ti-select-input-text-color);
-      font-size: var(--ti-select-input-font-size);
-      height: var(--ti-select-input-height);
+      color: var(--ti-Select-text-color);
+      font-size: var(--ti-Select-font-size);
+      height: var(--ti-Select-height);
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
       background-color: transparent;
 
       &.is-mini {
-        height: var(--ti-select-input-mini-height);
+        height: var(--ti-Select-height-mini);
       }
 
       &.is-small {
-        height: var(--ti-select-input-small-height);
+        height: var(--ti-Select-height-small);
       }
 
       &.is-medium {
-        height: var(--ti-select-input-medium-height);
+        height: var(--ti-Select-height-medium);
       }
     }
 
@@ -172,8 +169,7 @@
       white-space: nowrap;
       box-sizing: border-box;
       border-color: transparent;
-      margin: var(--ti-select-tags-margin-top) var(--ti-select-tags-margin-right) var(--ti-select-tags-margin-bottom)
-        var(--ti-select-tags-margin-left);
+      margin: var(--ti-Select-tag-margin);
       text-overflow: ellipsis;
       overflow: hidden;
       display: inline-flex;
@@ -194,15 +190,15 @@
         flex-shrink: 0;
       }
 
+      // TODO: Aurora 多选禁用文本显示(评估是否删除）
       &.is-disabled {
         max-height: 24px;
         display: inline-flex;
 
         > span {
-          color: var(--ti-select-tags-text-color-disabled);
-          font-size: var(--ti-tag-font-size);
-          margin: var(--ti-select-tags-margin-top) var(--ti-select-tags-margin-right)
-            var(--ti-select-tags-margin-bottom) var(--ti-select-tags-margin-left);
+          color: var(--ti-Select-text-color-disabled);
+          margin: var(--ti-Select-tags-margin-top) var(--ti-Select-tags-margin-right)
+            var(--ti-Select-tags-margin-bottom) var(--ti-Select-tags-margin-left);
           display: inline-block;
           width: 100%;
           white-space: nowrap;
@@ -216,13 +212,14 @@
     .@{select-prefix-cls}__collapse-text {
       display: inline-flex;
       align-items: center;
-      margin-left: var(--ti-select-tags-margin-left);
-      font-size: var(--ti-select-collapse-button-font-size);
-      color: var(--ti-select-collapse-button-text-icon-color);
+      margin: var(--ti-Select-collapse-margin);
+      font-size: var(--ti-Select-font-size);
+      color: var(--ti-Select-collapse-text-color);
 
       .tiny-svg {
-        margin-left: var(--ti-select-collapse-button-icon-margin-left);
-        fill: var(--ti-select-collapse-button-text-icon-color);
+        margin: var(--ti-Select-collapse-margin);
+        fill: var(--ti-Select-icon-color);
+        font-size: var(--ti-Select-icon-size);
       }
     }
   }
@@ -245,7 +242,7 @@
     }
 
     .@{select-prefix-cls}__tags {
-      height: var(--ti-select-tags-height);
+      height: var(--ti-Select-tags-height);
       overflow: hidden;
 
       &-collapse {
@@ -273,7 +270,6 @@
     &.collapse-tag-clicked {
       .@{select-prefix-cls}__tags {
         height: auto;
-        max-height: var(--ti-select-tags-max-height);
         overflow-y: auto;
 
         &-collapse {
@@ -341,7 +337,7 @@
       }
 
       &__suffix {
-        display: var(--ti-select-suffix-display);
+        display: 'inline-block';
       }
     }
 
@@ -350,7 +346,7 @@
     }
 
     .@{select-prefix-cls}__tags.is-show-tag {
-      padding-right: var(--ti-select-tags-padding-right-disabled);
+      padding-right: 32px;
     }
   }
 
@@ -373,18 +369,14 @@
     }
 
     .@{select-prefix-cls}__caret {
-      fill: var(--ti-select-input-caret-icon-color);
-      font-size: var(--ti-select-input-caret-font-size);
+      fill: var(--ti-Select-icon-color);
+      font-size: var(--ti-Select-icon-size);
       transition: transform 0.3s;
       transform: rotateZ(180deg);
       cursor: pointer;
 
-      &.@{select-prefix-cls}__close {
-        margin-right: var(--ti-select-input-icon-close-margin-right);
-      }
-
       &:hover {
-        fill: var(--ti-select-input-caret-hover-icon-color);
+        fill: var(--ti-Select-icon-color-hover);
       }
 
       &.is-reverse {
@@ -394,15 +386,14 @@
 
     .@{select-prefix-cls}__limit-txt,
     .@{select-prefix-cls}__proportion-txt {
-      font-size: var(--ti-select-suffix-font-size);
-      line-height: 1;
-      margin: 0 var(--ti-select-suffix-icon-margin-right);
-      color: var(--ti-select-suffix-text-color);
+      font-size: var(--ti-Select-font-size);
+      margin: var(--ti-Select-suffix-text-margin);
+      color: var(--ti-Select-suffix-text-color);
     }
 
     .@{select-prefix-cls}__copy {
       cursor: pointer;
-      margin-right: var(--ti-select-suffix-icon-margin-right);
+      margin-right: var(--ti-Select-suffix-icon-margin-right);
     }
 
     .@{input-prefix-cls}__suffix {
@@ -417,38 +408,12 @@
 
     &.is-disabled {
       .@{select-prefix-cls}__caret {
-        fill: var(--ti-select-input-disabled-caret-text-color);
+        fill: var(--ti-Select-icon-color-disabled);
         cursor: not-allowed;
       }
 
       .@{input-prefix-cls}__inner {
         cursor: not-allowed;
-
-        &:hover {
-          border-color: var(--ti-select-input-disabled-hover-border-color);
-        }
-      }
-    }
-
-    &.is-focus .@{input-prefix-cls}__inner {
-      border-color: var(--ti-select-inner-border-color-active);
-    }
-  }
-
-  &__underline {
-    .@{input-prefix-cls},
-    .@{input-prefix-cls}.is-disabled {
-      .@{input-prefix-cls}__inner {
-        border-radius: 0;
-        border-top-width: 0px;
-        border-left-width: 0px;
-        border-right-width: 0px;
-        padding-left: 0px;
-        background-color: var(--ti-input-bg-color);
-      }
-
-      &__suffix {
-        right: 0px;
       }
     }
   }

packages/theme/src/select/vars.less

@@ -11,69 +11,46 @@
 */
 
 .component-css-vars-select() {
-  // 输入框悬浮时的边框色(hide)
-  --ti-select-inner-border-color-active: var(--ti-common-color-line-active, #191919);
-  // 可搜索输入框文本色
-  --ti-select-input-text-color: var(--ti-common-color-text-primary, #191919);
-  // 选择器输入框字号(hide)
-  --ti-select-input-font-size: var(--ti-common-font-size-base, 14px);
+  // 文本色
+  --ti-Select-text-color: var(--tv-color-text, #191919);
+  // 多选禁用文本色
+  --ti-Select-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2);
+  // 默认字号
+  --ti-Select-font-size: var(--tv-font-size-md, 14px);
+
+  // 图标色
+  --ti-Select-icon-color: var(--tv-color-icon, #808080);
+  // 图标禁用色
+  --ti-Select-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2);
+  // 图标悬浮色
+  --ti-Select-icon-color-hover: var(--tv-color-icon-hover, #191919);
+  // 图标尺寸
+  --ti-Select-icon-size: var(--tv-icon-size, 16px);
+
+  // 选择器输入框高度
+  --ti-Select-height: var(--tv-size-height-md, 32px);
+  // 迷你型选择器输入框高度
+  --ti-Select-height-mini: var(--tv-size-height-xs, 24px);
+  // 小型选择器输入框高度
+  --ti-Select-height-small: var(--tv-size-height-sm, 28px);
+  // 中型选择器输入框高度
+  --ti-Select-height-medium: var(--tv-size-height-lg, 32px);
 
-  // 选择器输入框尾部图标的颜色
-  --ti-select-input-caret-icon-color: var(--ti-common-color-icon-normal, #808080);
-  // 选择器输入框尾部图标悬浮时的颜色
-  --ti-select-input-caret-hover-icon-color: var(--ti-common-color-icon-graybg-hover, #191919);
-  // 选择器输入框尾部图标的尺寸
-  --ti-select-input-caret-font-size: var(--ti-common-font-size-2, 16px);
-  // 选择器输入框尾部关闭图标右侧外边距
-  --ti-select-input-icon-close-margin-right: var(--ti-common-space-0, 0px);
-  // 选择器输入框尾部图标禁用时的颜色（hide）
-  --ti-select-input-disabled-caret-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
-  // 输入框禁用且悬浮时的边框色
-  --ti-select-input-disabled-hover-border-color: var(--ti-common-color-line-disabled, #dbdbdb);
-  // 选择器输入框高度（hide）
-  --ti-select-input-height: var(--ti-common-size-6x, 24px);
-  // 迷你型选择器输入框高度（hide）
-  --ti-select-input-mini-height: var(--ti-common-size-6x, 24px);
-  // 小型选择器输入框高度（hide）
-  --ti-select-input-small-height: var(--ti-common-size-7x, 28px);
-  // 中型选择器输入框高度（hide）
-  --ti-select-input-medium-height: var(--ti-common-size-42);
-  // 选择器多选标签容器的左侧内边距
-  --ti-select-tags-wrap-padding-left: var(--ti-common-space-2, 2px);
-  // 选择器多选标签容器的顶部内边距
-  --ti-select-tags-wrap-padding-top: var(--ti-common-space-2, 2px);
-  // 选择器多选标签容器的底部内边距
-  --ti-select-tags-wrap-padding-bottom: var(--ti-common-space-2, 2px);
-  // 选择器多选标签容器的右侧内边距
-  --ti-select-tags-wrap-padding-right: var(--ti-common-space-0, 0px);
-  // 选择器多选标签顶部外边距
-  --ti-select-tags-margin-top: var(--ti-common-space-2, 2px);
-  // 选择器多选标签右侧外边距
-  --ti-select-tags-margin-right: var(--ti-common-space-2, 2px);
-  // 选择器多选标签底部外边距
-  --ti-select-tags-margin-bottom: var(--ti-common-space-2, 2px);
-  // 选择器多选标签左侧外边距
-  --ti-select-tags-margin-left: var(--ti-common-space-2, 2px);
   // 选择器多选标签单行的高度
-  --ti-select-tags-height: var(--ti-common-space-8x, 32px);
-  // 选择器多选标签最大高度
-  --ti-select-tags-max-height: none;
-  // 多选禁用时右侧内边距
-  --ti-select-tags-padding-right-disabled: var(--ti-common-space-8x, 32px);
-  // 多选禁用文本色
-  --ti-select-tags-text-color-disabled: var(--ti-common-color-text-disabled, #c2c2c2);
-  // 选择器后缀图标显示状态
-  --ti-select-suffix-display: 'inline-block';
+  --ti-Select-tags-height: var(--tv-size-height-md, 32px);
+  // 选择器多选标签容器的内边距
+  --ti-Select-tags-padding: var(--tv-space-xs, 2px) 0px var(--tv-space-xs, 2px) var(--tv-space-xs, 2px);
+  //选择器多选标签左侧外边距
+  --ti-Select-tag-margin: var(--tv-space-xs, 2px);
+
   // 选择器右侧图标间距
-  --ti-select-suffix-icon-margin-right: var(--ti-common-space-base, 4px);
-  // 选择器suffix字号
-  --ti-select-suffix-font-size: var(--ti-common-font-size-base, 14px);
-  // 选择器suffix文本色
-  --ti-select-suffix-text-color: var(--ti-common-color-text-weaken, #808080);
-  // 收起按钮文本与图标色(hide)
-  --ti-select-collapse-button-text-icon-color: var(--ti-common-color-text-link, #1476ff);
-  // 收起按钮图标左边距(hide)
-  --ti-select-collapse-button-icon-margin-left: var(--ti-common-space-2, 2px);
-  // 收起按钮字号(hide)
-  --ti-select-collapse-button-font-size: var(--ti-common-font-size-base, 14px);
+  --ti-Select-suffix-icon-margin-right: var(--tv-space-sm, 4px);
+  // suffix 文本外间距
+  --ti-Select-suffix-text-margin: 0 var(--tv-space-sm, 4px);
+  // suffix 文本色
+  --ti-Select-suffix-text-color: var(--tv-color-text-weaken, #808080);
+  // 收起按钮文本色
+  --ti-Select-collapse-text-color: var(--tv-color-text-active, #1476ff);
+  // 收起按钮外间距
+  --ti-Select-collapse-margin: 0 var(--tv-space-xs, 2px);
 }

packages/vue/src/select/src/pc.vue

@@ -25,8 +25,7 @@
       hoverExpand ? 'is-hover-expand' : '',
       clickExpand ? 'is-click-expand' : '',
       state.showCollapseTag ? 'collapse-tag-clicked' : '',
-      state.isDisabled ? 'is-disabled' : '',
-      inputBoxType === 'underline' ? 'tiny-select__underline' : ''
+      state.isDisabled ? 'is-disabled' : ''
     ]"
     @mouseleave.self="
       () => {
@@ -93,7 +92,7 @@
                 :size="state.collapseTagSize"
                 :hit="state.selected[0].state ? state.selected[0].state.hitState : state.selected[0].hitState"
                 :key="state.key"
-                :disabled="state.selected[0].disabled"
+                :disabled="state.selected[0].disabled || state.isDisabled"
                 :type="state.getTagType"
                 @close="deleteTag($event, state.selected[0])"
                 disable-transitions
@@ -127,6 +126,7 @@
                 :closable="false"
                 :size="state.collapseTagSize"
                 :type="state.getTagType"
+                :disabled="state.isDisabled"
                 disable-transitions
                 class="tiny-select__tags-number"
               >
@@ -292,6 +292,7 @@
           :display-only-content="state.displayOnlyContent"
           :unselectable="state.readonly ? 'on' : 'off'"
           :validate-event="false"
+          :inputBoxType="inputBoxType"
           :class="{
             'is-focus': state.visible,
             overflow: state.overflow,
@@ -333,7 +334,7 @@
 
             <icon-close
               v-if="state.showClose"
-              class="tiny-svg-size tiny-select__caret icon-close"
+              class="tiny-svg-size tiny-select__caret tiny-select__close"
               @click="handleClearClick"
               @mouseenter="state.inputHovering = true"
             ></icon-close>