feat(select): [select] Additional features xdesign theme adaptation

Author: MomoPoppy

examples/sites/demos/pc/app/select/copy-multi-composition-api.vue

@@ -5,19 +5,35 @@
     <tiny-select ref="selectTagSelectable" v-model="value1" multiple tag-selectable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
-    <br /><br />
+    <br />
+    <br />
     <p>场景2：多选一键复制所有标签</p>
     <br />
     <tiny-select ref="selectCopyable" v-model="value2" multiple copyable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
-    <br /><br />
+    <br />
+    <br />
     <p>场景3：多选设置复制文本分隔符</p>
     <br />
     <tiny-select ref="selectCopyable" v-model="value2" multiple copyable text-split="/">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
-    <br /><br />
+    <br />
+    <br />
+    <tiny-select
+      ref="selectCopyable"
+      v-model="value2"
+      multiple
+      copyable
+      text-split="/"
+      :multiple-limit="2"
+      show-limit-text
+    >
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
     <p>复制到此处：</p>
     <tiny-input v-model="copyValue" class="copy-value" type="text"></tiny-input>
   </div>

examples/sites/demos/pc/app/select/copy-multi.vue

@@ -5,19 +5,35 @@
     <tiny-select ref="selectTagSelectable" v-model="value1" multiple tag-selectable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
-    <br /><br />
+    <br />
+    <br />
     <p>场景2：多选一键复制所有标签</p>
     <br />
     <tiny-select ref="selectCopyable" v-model="value2" multiple copyable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
-    <br /><br />
+    <br />
+    <br />
     <p>场景3：多选设置复制文本分隔符</p>
     <br />
     <tiny-select ref="selectCopyable" v-model="value2" multiple copyable text-split="/">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
-    <br /><br />
+    <br />
+    <br />
+    <tiny-select
+      ref="selectCopyable"
+      v-model="value2"
+      multiple
+      copyable
+      text-split="/"
+      :multiple-limit="2"
+      show-limit-text
+    >
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
     <p>复制到此处：</p>
     <br />
     <tiny-input v-model="copyValue" class="copy-value" type="text"></tiny-input>

packages/design/saas/src/select/icon-loading.svg

@@ -1,10 +1,13 @@
-import { iconChevronDown } from '@opentiny/vue-icon'
+import { iconChevronDown, iconPlus } from '@opentiny/vue-icon'
+import loadingIcon from './icon-loading.svg'
 
 export default {
   // 虚拟滚动的默认options不一致
   baseOpts: { optionHeight: 34, limit: 20 },
   icons: {
-    dropdownIcon: iconChevronDown()
+    dropdownIcon: iconChevronDown(),
+    addIcon: iconPlus(),
+    loadingIcon
   },
   state: {
     sizeMap: {

packages/design/saas/src/select/index.ts

@@ -240,7 +240,8 @@ const initState = ({ reactive, computed, props, api, emitter, parent, constants,
         return designConfig.state.autoHideDownIcon
       }
       return true // tiny 默认为true
-    })()
+    })(),
+    designConfig
   })
 
   return state

packages/renderless/src/select/vue.ts

@@ -59,7 +59,7 @@
   }
   // tiny 新增
   .@{select-dropdown-prefix-cls}__empty-images {
-    background-image: url('../images/select-nodata.png');
+    background-image: url('../images/empty-nodata.png');
     @apply w-16;
     @apply h-16;
     @apply mb-2;
@@ -105,7 +105,7 @@
       @apply inline-block;
       @apply align-top;
 
-      .path {
+      circle{
         animation: loading-dash 1.5s ease-in-out infinite;
         stroke-dasharray: 90, 150;
         stroke-dashoffset: 0;

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

@@ -54,6 +54,8 @@
     height: inherit;
     line-height: var(--ti-filter-box-btn-title-line-height);
     font-size: var(--ti-filter-box-btn-font-size);
+    /* TODO: title 这个类名不符合组件类名规范，被公共样式污染，故在此处重置间距为 0.计划优化这个类名 */
+    margin-right: 0px;
 
     label {
       display: inline-block;
@@ -62,7 +64,8 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       color: var(--ti-filter-box-btn-text-color);
-      margin-right: 4px;
+      margin-right: 8px;
+      margin-top: 3px;
     }
 
     &.active label {
@@ -112,6 +115,12 @@
     }
   }
 
+  &:hover {
+    .filter-box-icon {
+      fill: var(--ti-filter-box-expand-btn-icon-color-hover);
+    }
+  }
+
   .filter-icon-close {
     width: 16px;
     height: 16px;

packages/theme/src/filter-box/index.less

@@ -19,11 +19,11 @@
   // 按钮水平内边距
   --ti-filter-box-btn-padding-horizontal: var(--ti-common-space-2x);
   // 按钮文本色
-  --ti-filter-box-btn-text-color: var(--ti-common-color-text-primary);
+  --ti-filter-box-btn-text-color: var(--ti-common-color-text-weaken);
   // 按钮悬浮文本色和图标色
   --ti-filter-box-btn-hover-text-color: var(--ti-common-color-text-primary);
   // 按钮文本字号
-  --ti-filter-box-btn-font-size: var(--ti-common-font-size-base, 12px);
+  --ti-filter-box-btn-font-size: var(--ti-common-font-size-0, 12px);
   // 按钮文本行高
   --ti-filter-box-btn-title-line-height: var(--ti-common-line-height-number);
   // 按钮问号图标色
@@ -33,7 +33,9 @@
   // 按钮问号top定位(hide)
   --ti-filter-box-help-btn-position-top: var(--ti-common-space-base);
   // 按钮展开图标色
-  --ti-filter-box-expand-btn-icon-color: var(--ti-common-color-info-active);
+  --ti-filter-box-expand-btn-icon-color: var(--ti-common-color-icon-normal);
+  // 按钮展开图标悬浮色
+  --ti-filter-box-expand-btn-icon-color-hover: var(--ti-common-color-icon-hover);
   // 按钮展开图标尺寸
   --ti-filter-box-expand-btn-icon-size: var(--ti-common-font-size-2);
 }

packages/theme/src/filter-box/vars.less

@@ -82,7 +82,7 @@
       border-top-color: var(--ti-select-dropdown-search-border-color-top);
       border-left-color: var(--ti-select-dropdown-search-border-color-left);
       border-right-color: var(--ti-select-dropdown-search-border-color-right);
-      border-bottom-color:var(--ti-select-dropdown-search-border-color-bottom) ;
+      border-bottom-color: var(--ti-select-dropdown-search-border-color-bottom);
     }
 
     .@{input-prefix-cls}__suffix {
@@ -172,7 +172,7 @@
   }
   // tiny 新增
   &__empty-images {
-    background-image: url('../images/select-nodata.png');
+    background-image: url('../images/empty-nodata.png');
     width: var(--ti-select-dropdown-empty-image-width);
     height: var(--ti-select-dropdown-empty-image-height);
     margin-bottom: var(--ti-select-dropdown-empty-image-margin-bottom);
@@ -223,38 +223,30 @@
   }
 
   & &__loading {
-    text-align: center;
-    padding: 10px 0;
-
     > .circular {
       fill: var(--ti-common-color-line-hover);
-      height: 16px;
-      width: 16px;
-      animation: loading-rotate 2s linear infinite;
-
-      .path {
-        animation: loading-dash 1.5s ease-in-out infinite;
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: 0;
-        stroke-width: 2;
-        stroke: var(--ti-common-color-line-hover);
-        stroke-linecap: round;
-      }
+      font-size: 16px;
+    }
+
+    &.show-loading-icon {
+      text-align: left;
+      padding-left: 16px;
+      height: 32px;
     }
   }
 
   .@{select-prefix-cls}__top-create {
     margin: 0 8px 4px;
+    height: 32px;
     border-bottom: var(--ti-select-dropdown-top-create-border-weight-bottom)
       var(--ti-select-dropdown-top-create-border-style-bottom) var(--ti-select-dropdown-top-create-border-color-bottom);
 
     > div {
       width: fit-content;
-      height: 32px;
+      height: 100%;
       display: flex;
       align-items: center;
       font-size: 12px;
-      line-height: 20px;
       color: var(--ti-select-dropdown-top-create-text-color);
       cursor: pointer;
 

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

@@ -75,7 +75,7 @@
   // 下拉面板搜索框右侧外边距
   --ti-select-dropdown-search-margin-right: var(--ti-common-space-4x);
   // 下拉面板搜索框的宽度
-  --ti-select-dropdown-search-width: calc(100% - var(--ti-common-space-4x)*2);
+  --ti-select-dropdown-search-width: calc(100% - var(--ti-common-space-4x) * 2);
   // 下拉面板搜索框的边框宽度
   --ti-select-dropdown-search-border-width: var(--ti-common-border-weight-normal);
   // 下拉面板搜索框的边框圆角
@@ -109,7 +109,7 @@
   // 下拉面板图标颜色
   --ti-select-dropdown-icon-color: var(--ti-common-color-icon-normal);
   // 下拉面板新增按钮的文本色
-  --ti-select-dropdown-top-create-text-color: var(--ti-common-color-text-link);
+  --ti-select-dropdown-top-create-text-color: var(--ti-common-color-text-primary);
   // 下拉面板新增按钮的文本悬浮色
   --ti-select-dropdown-top-create-text-color-hover: var(--ti-common-color-text-link-hover);
   // 下拉面板新增按钮图标色