feat(dropdown): [dropdown,action-menu,select] Additional features xde…

…sign theme adaptation (#2140) * feat(dropdown): [dropdown,action-menu] Additional features xdesign theme adaptation * feat(select): [select] Additional features xdesign theme adaptation * feat(test): [dropdown,select,slider] Modify test cases * feat(test): [dropdown,select,slider] Modify test cases * feat(test): [dropdown,select,slider] Modify test cases * feat(test): [dropdown,select,slider] Modify test cases * feat(test): [dropdown,select,slider] Modify test cases * feat(test): [dropdown,select,action-menu] Modify test cases
opentiny · Sep 23, 2024 · f559970 · f559970
1 parent b39016b
commit f559970
Show file tree

Hide file tree

Showing 20 changed files with 136 additions and 90 deletions.
diff --git a/examples/sites/demos/pc/app/action-menu/basic-usage.spec.ts b/examples/sites/demos/pc/app/action-menu/basic-usage.spec.ts
@@ -16,7 +16,10 @@ test('基本用法', async ({ page }) => {
   // 更多按钮
   await expect(moreItem).toHaveText(/更多/)
   // 图标显示
-  await expect(moreItem.locator('svg > path').nth(0)).toHaveAttribute('d', 'M2 6h20L12 19z')
+  await expect(moreItem.locator('svg > path').nth(0)).toHaveAttribute(
+    'd',
+    'M8 11.43c-.15 0-.31-.06-.42-.18L1.92 5.6c-.23-.23-.23-.61 0-.85s.61-.23.85 0L8 9.98l5.23-5.23a.61.61 0 0 1 .85 0c.23.23.23.61 0 .85l-5.66 5.66c-.11.11-.27.17-.42.17z'
+  )
   // 分割线
   await expect(actionMenu.locator('.tiny-action-menu__item-line')).toHaveCount(2)
   // 图标旋转

diff --git a/examples/sites/demos/pc/app/action-menu/icon.spec.ts b/examples/sites/demos/pc/app/action-menu/icon.spec.ts
@@ -11,9 +11,8 @@ test('只显示图标', async ({ page }) => {
   await page.waitForTimeout(1500)
   await expect(actionMenuItem.nth(0).locator('.tiny-svg')).toBeVisible()
   await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger  .tiny-svg')).toBeVisible()
-  await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg')).toHaveCSS('width', '20px')
-  await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg')).toHaveCSS('height', '20px')
-  await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg')).toHaveCSS('margin', '2px')
+  await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg')).toHaveCSS('width', '24px')
+  await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg')).toHaveCSS('height', '24px')
   await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-dropdown__title')).toBeHidden()
 
   await actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg').hover()

diff --git a/examples/sites/demos/pc/app/select/copy-multi-composition-api.vue b/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>

diff --git a/examples/sites/demos/pc/app/select/copy-multi.vue b/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>

diff --git a/examples/sites/demos/pc/app/select/slot-prefix-composition-api.vue b/examples/sites/demos/pc/app/select/slot-prefix-composition-api.vue
@@ -1,7 +1,7 @@
 <template>
   <tiny-select v-model="value" multiple collapse-tags>
     <template #prefix>
-      <tiny-icon-share></tiny-icon-share>
+      <tiny-icon-location></tiny-icon-location>
     </template>
     <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
   </tiny-select>
@@ -10,7 +10,7 @@
 <script setup>
 import { ref } from 'vue'
 import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
-import { iconShare } from '@opentiny/vue-icon'
+import { iconLocation } from '@opentiny/vue-icon'
 
 const options = ref([
   { value: '选项1', label: '北京' },
@@ -21,7 +21,7 @@ const options = ref([
 ])
 const value = ref('')
 
-const TinyIconShare = iconShare()
+const TinyIconLocation = iconLocation()
 </script>
 
 <style lang="less" scoped>

diff --git a/examples/sites/demos/pc/app/select/slot-prefix.vue b/examples/sites/demos/pc/app/select/slot-prefix.vue
@@ -1,21 +1,21 @@
 <template>
   <tiny-select v-model="value" multiple collapse-tags>
     <template #prefix>
-      <icon-share></icon-share>
+      <tiny-icon-location></tiny-icon-location>
     </template>
     <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
   </tiny-select>
 </template>
 
 <script>
 import { Select, Option } from '@opentiny/vue'
-import { iconShare } from '@opentiny/vue-icon'
+import { iconLocation } from '@opentiny/vue-icon'
 
 export default {
   components: {
     TinySelect: Select,
     TinyOption: Option,
-    IconShare: iconShare()
+    TinyIconLocation: iconLocation()
   },
   data() {
     return {

diff --git a/packages/design/saas/src/select/icon-loading.svg b/packages/design/saas/src/select/icon-loading.svg
diff --git a/packages/design/saas/src/select/index.ts b/packages/design/saas/src/select/index.ts
@@ -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: {

diff --git a/packages/renderless/src/select/vue.ts b/packages/renderless/src/select/vue.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

diff --git a/packages/theme-saas/src/select-dropdown/index.less b/packages/theme-saas/src/select-dropdown/index.less
@@ -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;

diff --git a/packages/theme/src/action-menu/index.less b/packages/theme/src/action-menu/index.less
@@ -88,15 +88,17 @@
       }
 
       &.@{action-menu-prefix-cls}__item-visable {
-        .@{dropdown-item-prefix-cls}__wrap {
-          color: var(--ti-action-menu-text-color);
-          padding: var(--ti-action-menu-item-padding-top) var(--ti-action-menu-item-padding-right)
-            var(--ti-action-menu-item-padding-bottom) var(--ti-action-menu-item-padding-left);
+        .@{dropdown-item-prefix-cls} {
+          .@{dropdown-item-prefix-cls}__wrap {
+            color: var(--ti-action-menu-text-color);
+            margin: 0px;
+            height: auto;
 
-          &:hover {
-            background-color: var(--ti-action-menu-item-hover-bg-color);
-            text-decoration: var(--ti-action-menu-hover-text-decoratio);
-            color: var(--ti-action-menu-item-hover-text-color);
+            &:hover {
+              background-color: var(--ti-action-menu-item-hover-bg-color);
+              text-decoration: var(--ti-action-menu-hover-text-decoration);
+              color: var(--ti-action-menu-item-hover-text-color);
+            }
           }
         }
 

diff --git a/packages/theme/src/action-menu/vars.less b/packages/theme/src/action-menu/vars.less
@@ -14,39 +14,31 @@
   // 按钮文本字重
   --ti-action-menu-font-weight: var(--ti-common-font-weight-normal);
   // 按钮文本装饰
-  --ti-action-menu-hover-text-decoratio: underline;
+  --ti-action-menu-hover-text-decoration: underline;
   // 更多...图标的宽度
   --ti-action-menu-more-icon-width: var(--ti-common-size-4x);
   // 更多...图标的高度
   --ti-action-menu-more-icon-height: var(--ti-common-size-4x);
   // 更多...图标的右边外边距
   --ti-action-menu-more-icon-margin-right: var(--ti-common-space-0, 0px);
   // 下拉触发源文本颜色
-  --ti-action-menu-text-color: var(--ti-common-color-text-link, #526ecc);
+  --ti-action-menu-text-color: var(--ti-common-color-text-link, #1476ff);
   // 下拉触发源文本禁用色
-  --ti-action-menu-item-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
+  --ti-action-menu-item-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
   // 下拉触发源文本字号
-  --ti-action-menu-font-size: var(--ti-common-font-size-base, 12px);
+  --ti-action-menu-font-size: var(--ti-common-font-size-base, 14px);
   // 分割线颜色
-  --ti-action-menu-item-line-bg-color: var(--ti-common-color-transparent);
+  --ti-action-menu-item-line-bg-color: transparent;
   // 分割线宽度
   --ti-action-menu-item-line-width: var(--ti-common-space-0);
   // 下拉菜单项悬浮背景色
-  --ti-action-menu-item-hover-bg-color: var(--ti-common-color-transparent, transparent);
+  --ti-action-menu-item-hover-bg-color: transparent;
   // 下拉菜单项文本悬浮色
   --ti-action-menu-item-hover-text-color: var(--ti-common-color-text-link);
   // 下拉菜单项图标悬浮色
-  --ti-action-menu-item-hover-icon-color: var(--ti-common-color-text-link-hover, #344899); // 没有这个颜色的图标色
-  // 下拉菜单项顶部内边距
-  --ti-action-menu-item-padding-top: var(--ti-common-space-0, 0px);
-  // 下拉菜单项右侧内边距
-  --ti-action-menu-item-padding-right: var(--ti-common-space-0, 0px);
-  // 下拉菜单项底部内边距
-  --ti-action-menu-item-padding-bottom: var(--ti-common-space-0, 0px);
-  // 下拉菜单项右侧内边距
-  --ti-action-menu-item-padding-left: var(--ti-common-space-0, 0px);
+  --ti-action-menu-item-hover-icon-color: var(--ti-common-color-text-link-hover, #1476ff); // 没有这个颜色的图标色
   // 下拉菜单项图标顶部内边距
-  --ti-action-menu-item-svg-margin-top: 0;
+  --ti-action-menu-item-svg-margin-top: 0px;
   // 下拉菜单项图标右侧内边距
   --ti-action-menu-item-svg-margin-right: var(--ti-common-space-base, 4px);
   // 下拉菜单项图标底部部内边距

diff --git a/packages/theme/src/dropdown-item/index.less b/packages/theme/src/dropdown-item/index.less
@@ -39,7 +39,7 @@
 
   &__wrap {
     line-height: var(--ti-dropdown-item-line-height);
-    padding: var(--ti-dropdown-item-padding-vertical) var(--ti-dropdown-item-padding-horizontal);
+    margin: var(--ti-dropdown-item-margin-vertical) var(--ti-dropdown-item-margin-horizontal);
     height: var(--ti-dropdown-item-height);
     display: flex;
     align-items: center;
@@ -148,8 +148,11 @@
 
 .@{dropdown-item-prefix-cls}--divided {
   position: relative;
-  border-top: var(--ti-dropdown-item-divided-border-weight) var(--ti-dropdown-item-divided-border-style)
-    var(--ti-dropdown-item-divided-border-color);
+
+  .@{dropdown-item-prefix-cls}__wrap {
+    border-top: var(--ti-dropdown-item-divided-border-weight) var(--ti-dropdown-item-divided-border-style)
+      var(--ti-dropdown-item-divided-border-color);
+  }
 
   &:before {
     content: '';

diff --git a/packages/theme/src/dropdown-item/vars.less b/packages/theme/src/dropdown-item/vars.less
@@ -20,13 +20,13 @@
   // 下拉菜单项选中文本字重
   --ti-dropdown-item-font-weight-selected: var(--ti-common-font-weight-6);
   // 下拉菜单项选中文本色
-  --ti-dropdown-item-text-color-selected: #1476FF;
+  --ti-dropdown-item-text-color-selected: #1476ff;
   // 下拉菜单非禁用项悬浮文本色
   --ti-dropdown-item-hover-text-color: var(--ti-common-color-text-primary);
   // 下拉菜单项点击瞬间背景色
   --ti-dropdown-item-active-bg-color: var(--ti-common-color-bg-white-normal);
   // 下拉菜单项点击瞬间文本色
-  --ti-dropdown-item-active-text-color: #1476FF;
+  --ti-dropdown-item-active-text-color: #1476ff;
   // 下拉菜单项禁用文本色
   --ti-dropdown-item-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
   // 下拉菜单项文本色
@@ -35,10 +35,10 @@
   --ti-dropdown-item-font-size: var(--ti-common-font-size-base, 12px);
   // 默认尺寸下拉菜单项的行高
   --ti-dropdown-item-line-height: var(--ti-common-line-height-number, 1.5);
-  // 下拉菜单项垂直内边距
-  --ti-dropdown-item-padding-vertical: var(--ti-common-space-0);
-  // 下拉菜单项水平内边距
-  --ti-dropdown-item-padding-horizontal: var(--ti-common-space-4x);
+  // 下拉菜单项垂直外边距
+  --ti-dropdown-item-margin-vertical: var(--ti-common-space-0);
+  // 下拉菜单项水平外边距
+  --ti-dropdown-item-margin-horizontal: var(--ti-common-space-4x);
   // 拉菜单项底部外边距
   --ti-dropdown-item-margin-bottom: var(--ti-common-space-0, 0px);
   // 拉菜单项左边外边距
@@ -68,7 +68,7 @@
   // 下拉项内容悬浮时的字重
   --ti-dropdown-item-content-font-weight-hover: var(--ti-common-font-weight-4);
   // 有二级菜单下拉项内容悬浮时的文本色
-  --ti-dropdown-item-content-text-hover: #1476FF;
+  --ti-dropdown-item-content-text-hover: #1476ff;
   // 有二级菜单下拉项内容悬浮时的背景色
   --ti-dropdown-item-content-bg-hover: transparent;
   // 下拉项分割线尺寸

diff --git a/packages/theme/src/filter-box/index.less b/packages/theme/src/filter-box/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;

diff --git a/packages/theme/src/filter-box/vars.less b/packages/theme/src/filter-box/vars.less
@@ -19,7 +19,7 @@
   // 按钮水平内边距
   --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);
   // 按钮文本字号
@@ -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);
 }