feat(base-select): [base-select] optimize base select and fix some bugs (#2532)

kagol · web-flow · commit 2b212945eafc · 2024-11-19T11:45:37.000+08:00
* fix(base-select): [base-select] fix data init error when set options and multiple

* fix(base-select): fix data display error when set disabled and hover-expand

* fix(base-select): fix e2e test failed

* fix(base-select): fix search component style when set searchable

* fix(base-select): fix top-create style

* fix(base-select): fix slot-prefix demo style

* fix(base-select): fix option can not selected when set clear-no-match-value to true

* chore(base-select): remove beta tag
diff --git a/examples/sites/demos/pc/app/base-select/disabled.spec.ts b/examples/sites/demos/pc/app/base-select/disabled.spec.ts
@@ -64,8 +64,6 @@ test('多选，禁用项默认选中', async ({ page }) => {
 
   // 默认值显示tag数
   await expect(tag).toHaveCount(2)
-  // 禁用项默认选中不显示关闭图标
-  await expect(tag.filter({ hasText: '上海' }).locator('svg')).toHaveCount(0)
   // 非禁用项显示关闭图标
   await expect(tag.filter({ hasText: '天津' }).locator('svg')).toHaveCount(1)
 
diff --git a/examples/sites/demos/pc/app/base-select/size-composition-api.vue b/examples/sites/demos/pc/app/base-select/size-composition-api.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <p>默认</p>
-    <tiny-base-select v-model="value1" multiple :options="options"></tiny-base-select>
     <p>medium</p>
     <tiny-base-select v-model="value2" size="medium" multiple :options="options"></tiny-base-select>
+    <p>默认</p>
+    <tiny-base-select v-model="value1" multiple :options="options"></tiny-base-select>
     <p>small</p>
     <tiny-base-select v-model="value3" size="small" multiple :options="options"> </tiny-base-select>
     <p>mini</p>
diff --git a/examples/sites/demos/pc/app/base-select/size.spec.ts b/examples/sites/demos/pc/app/base-select/size.spec.ts
@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('默认尺寸', async ({ page }) => {
+test('medium 尺寸', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('base-select#size')
 
@@ -9,11 +9,12 @@ test('默认尺寸', async ({ page }) => {
   const input = select.locator('.tiny-input')
   const tag = select.locator('.tiny-tag')
 
-  await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '32px')
-  await expect(tag.nth(0)).toHaveClass(/tiny-tag--light/)
+  await expect(input).toHaveClass(/tiny-input-medium/)
+  await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '40px')
+  await expect(tag.nth(0)).toHaveClass(/tiny-tag--medium tiny-tag--light/)
 })
 
-test('medium 尺寸', async ({ page }) => {
+test('默认尺寸', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('base-select#size')
 
@@ -22,9 +23,8 @@ test('medium 尺寸', async ({ page }) => {
   const input = select.locator('.tiny-input')
   const tag = select.locator('.tiny-tag')
 
-  await expect(input).toHaveClass(/tiny-input-medium/)
-  await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '40px')
-  await expect(tag.nth(0)).toHaveClass(/tiny-tag--medium tiny-tag--light/)
+  await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '32px')
+  await expect(tag.nth(0)).toHaveClass(/tiny-tag--light/)
 })
 
 test('small 尺寸', async ({ page }) => {
diff --git a/examples/sites/demos/pc/app/base-select/size.vue b/examples/sites/demos/pc/app/base-select/size.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <p>默认</p>
-    <tiny-base-select v-model="value1" multiple :options="options"></tiny-base-select>
     <p>medium</p>
     <tiny-base-select v-model="value2" size="medium" multiple :options="options"></tiny-base-select>
+    <p>默认</p>
+    <tiny-base-select v-model="value1" multiple :options="options"></tiny-base-select>
     <p>small</p>
     <tiny-base-select v-model="value3" size="small" multiple :options="options"> </tiny-base-select>
     <p>mini</p>
diff --git a/examples/sites/demos/pc/app/base-select/slot-default-composition-api.vue b/examples/sites/demos/pc/app/base-select/slot-default-composition-api.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <p>场景1：带标签和提示信息</p>
+    <br />
     <tiny-base-select v-model="value1" popper-class="slot-default">
       <template v-for="item in options1">
         <tiny-tooltip v-if="item.tip" :content="item.tip" placement="right" effect="light" :key="item.value">
@@ -15,8 +16,10 @@
         </tiny-option>
       </template>
     </tiny-base-select>
+    <br /><br />
 
     <p>场景2：选项双行</p>
+    <br />
     <tiny-base-select v-model="value2" popper-class="double-row">
       <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
         <div>
@@ -69,11 +72,6 @@ const value2 = ref('选项1')
     margin: 6px;
   }
 }
-p {
-  font-size: 14px;
-  line-height: 1.5;
-  padding: 16px 0;
-}
 </style>
 
 <style lang="less">
diff --git a/examples/sites/demos/pc/app/base-select/slot-default.vue b/examples/sites/demos/pc/app/base-select/slot-default.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <p>场景1：带标签和提示信息</p>
+    <br />
     <tiny-base-select v-model="value1" popper-class="slot-default">
       <template v-for="item in options1">
         <tiny-tooltip v-if="item.tip" :content="item.tip" placement="right" effect="light" :key="item.value">
@@ -15,8 +16,10 @@
         </tiny-option>
       </template>
     </tiny-base-select>
+    <br /><br />
 
     <p>场景2：选项双行</p>
+    <br />
     <tiny-base-select v-model="value2" popper-class="double-row">
       <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
         <div>
@@ -78,11 +81,6 @@ export default {
     margin: 6px;
   }
 }
-p {
-  font-size: 14px;
-  line-height: 1.5;
-  padding: 16px 0;
-}
 </style>
 
 <style lang="less">
diff --git a/examples/sites/demos/pc/app/base-select/slot-prefix-composition-api.vue b/examples/sites/demos/pc/app/base-select/slot-prefix-composition-api.vue
@@ -1,7 +1,7 @@
 <template>
   <tiny-base-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-base-select>
@@ -10,7 +10,7 @@
 <script setup>
 import { ref } from 'vue'
 import { TinyBaseSelect, 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/base-select/slot-prefix.vue b/examples/sites/demos/pc/app/base-select/slot-prefix.vue
@@ -1,21 +1,21 @@
 <template>
   <tiny-base-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-base-select>
 </template>
 
 <script>
 import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
-import { iconShare } from '@opentiny/vue-icon'
+import { iconLocation } from '@opentiny/vue-icon'
 
 export default {
   components: {
     TinyBaseSelect,
     TinyOption,
-    IconShare: iconShare()
+    TinyIconLocation: iconLocation()
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/webdoc/base-select.cn.md b/examples/sites/demos/pc/app/base-select/webdoc/base-select.cn.md
@@ -4,4 +4,4 @@ title: BaseSelect 基础选择器
 
 # BaseSelect 基础选择器
 
-BaseSelect 基础选择器是 Select 组件的基础版本，用法和 Select 一样，但是不包含下拉树和下拉表格功能。
+BaseSelect 基础选择器是 Select 组件的基础版本，用法和 Select 一样，但是不包含下拉树和下拉表格功能。BaseSelect 组件的包体积更小，如果你不需要下拉树和下拉表格功能，推荐使用 BaseSelect 组件，而不是 Select 组件。
diff --git a/examples/sites/demos/pc/app/base-select/webdoc/base-select.js b/examples/sites/demos/pc/app/base-select/webdoc/base-select.js
@@ -1,9 +1,6 @@
 export default {
   column: '2',
   owner: '',
-  meta: {
-    experimental: '3.16.0'
-  },
   demos: [
     {
       demoId: 'basic-usage',
diff --git a/examples/sites/demos/pc/menus.js b/examples/sites/demos/pc/menus.js
@@ -121,10 +121,7 @@ export const cmpMenus = [
       {
         'nameCn': '基础选择器',
         'name': 'BaseSelect',
-        'key': 'base-select',
-        'meta': {
-          'experimental': '3.17.0'
-        }
+        'key': 'base-select'
       },
       { 'nameCn': '级联选择器', 'name': 'Cascader', 'key': 'cascader' },
       { 'nameCn': '级联面板', 'name': 'CascaderPanel', 'key': 'cascader-panel' },
diff --git a/packages/renderless/src/base-select/index.ts b/packages/renderless/src/base-select/index.ts
@@ -272,7 +272,7 @@ const getOptionOfSetSelected = ({ api, props }) => {
   }
 
   // tiny 新增
-  if (!option.currentLabel) {
+  if (!option.state.currentLabel) {
     api.clearNoMatchValue('')
   }
 
@@ -316,9 +316,10 @@ export const setSelected =
           : 'halfselect'
         : 'check'
 
-      if (state.selected.length === 0 || !state.selected[0].currentLabel) {
+      if (!state.selected?.[0]?.isTree && !state.selected?.[0]?.isGrid) {
         state.selected = result
       }
+      state.selected.length && (state.selectedLabel = '')
 
       state.tips = state.selected.map((item) => (item.state ? item.state.currentLabel : item.currentLabel)).join(',')
 
@@ -1875,6 +1876,23 @@ export const watchShowClose =
   }
 
 // 以下为tiny 新增功能
+/**
+ * 兼容不同主题多选禁用的展示类型
+ * default 和 smb 主题，displayOnly 时显示为 tagText,否则为 tag
+ * aurora 主题 displayOnly||disabled 时显示为tagText,否则为 tag
+ */
+export const computedShowTagText =
+  ({ state }) =>
+  () =>
+    state.isDisplayOnly
+
+/**
+ * 兼容不同主题多选，tag 在disabled 和 required 时是否显示关闭按钮的区别
+ * default 主题 ，禁用显示关闭按钮，required目前和aurora保持一致不显示，待设计图补充时更新
+ * aurora 主题，禁用时无禁用效果，required 时不显示关闭按钮
+ */
+export const isTagClosable = () => (item) => !item.required
+
 export const computedGetIcon =
   ({ designConfig, props }) =>
   () => {
diff --git a/packages/renderless/src/base-select/vue.ts b/packages/renderless/src/base-select/vue.ts
@@ -95,7 +95,9 @@ import {
   onClickCollapseTag,
   computedIsExpand,
   updateSelectedData,
-  hidePanel
+  hidePanel,
+  computedShowTagText,
+  isTagClosable
 } from './index'
 import debounce from '../common/deps/debounce'
 import { isNumber } from '../common/type'
@@ -152,7 +154,9 @@ export const api = [
   'clearSearchText',
   'onClickCollapseTag',
   'updateSelectedData',
-  'hidePanel'
+  'hidePanel',
+  'computedShowTagText',
+  'isTagClosable'
 ]
 
 const initState = ({ reactive, computed, props, api, emitter, parent, constants, useBreakpoint, vm, designConfig }) => {
@@ -267,6 +271,8 @@ const initStateAdd = ({ computed, props, api, parent }) => {
     formItemSize: computed(() => (parent.formItem || { state: {} }).state.formItemSize),
     selectDisabled: computed(() => api.computedSelectDisabled()),
     isDisplayOnly: computed(() => props.displayOnly || (parent.form || {}).displayOnly),
+    isDisabled: computed(() => props.disabled || (parent.form || {}).disabled),
+    isShowTagText: computed(() => api.computedShowTagText()),
     searchSingleCopy: computed(() => props.allowCopy && !props.multiple && props.filterable),
     childrenName: computed(() => 'children'),
     tooltipContent: {},
@@ -356,6 +362,8 @@ const initApi = ({
     computedGetTagType: computedGetTagType({ designConfig, props }),
     clearSearchText: clearSearchText({ state, api }),
     clearNoMatchValue: clearNoMatchValue({ props, emit }),
+    computedShowTagText: computedShowTagText({ state }),
+    isTagClosable: isTagClosable(),
     updateSelectedData: updateSelectedData({ state }),
     hidePanel: hidePanel({ state })
   })
diff --git a/packages/renderless/src/grid-select/index.ts b/packages/renderless/src/grid-select/index.ts
@@ -87,7 +87,8 @@ export const selectChange =
           return {
             ...node,
             currentLabel: node[props.textField],
-            value: node[props.valueField]
+            value: node[props.valueField],
+            isGrid: true
           }
         })
       )
diff --git a/packages/renderless/src/tree-select/index.ts b/packages/renderless/src/tree-select/index.ts
@@ -37,7 +37,8 @@ export const check =
           return {
             ...node,
             currentLabel: node[props.textField],
-            value: node[props.valueField]
+            value: node[props.valueField],
+            isTree: true
           }
         })
       )
diff --git a/packages/theme/src/base-select/index.less b/packages/theme/src/base-select/index.less
@@ -308,10 +308,6 @@
       &__inner {
         padding-right: 12px;
       }
-
-      &__suffix {
-        display: inline-block;
-      }
     }
 
     .@{base-select-prefix-cls}__tags {
@@ -359,8 +355,6 @@
     }
 
     .@{input-prefix-cls}__suffix {
-      top: var(--tv-BaseSelect-suffix-top);
-
       &-inner {
         font-size: 0;
       }
@@ -370,19 +364,6 @@
       overflow: hidden;
     }
 
-    &-medium .@{input-prefix-cls}__suffix {
-      top: var(--tv-BaseSelect-suffix-top-medium);
-    }
-
-    // TODO: 尾部按钮应垂直居中，待优化
-    &-small .@{input-prefix-cls}__suffix {
-      top: var(--tv-BaseSelect-suffix-top-small);
-    }
-
-    &-mini .@{input-prefix-cls}__suffix {
-      top: var(--tv-BaseSelect-suffix-top-mini);
-    }
-
     &.is-disabled {
       .@{base-select-prefix-cls}__caret {
         fill: var(--tv-BaseSelect-icon-color-disabled);
diff --git a/packages/vue/src/base-select/src/index.ts b/packages/vue/src/base-select/src/index.ts
@@ -344,6 +344,10 @@ export default defineComponent({
     allText: {
       type: String,
       default: ''
+    },
+    showAllTextTag: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, context) {
diff --git a/packages/vue/src/base-select/src/pc.vue b/packages/vue/src/base-select/src/pc.vue

Original file line number	Diff line number	Diff line change
`@@ -4,4 +4,4 @@ title: BaseSelect 基础选择器`
`4`	`4`
`5`	`5`	`# BaseSelect 基础选择器`
`6`	`6`
`7`		`-BaseSelect 基础选择器是 Select 组件的基础版本，用法和 Select 一样，但是不包含下拉树和下拉表格功能。`
	`7`	`+BaseSelect 基础选择器是 Select 组件的基础版本，用法和 Select 一样，但是不包含下拉树和下拉表格功能。BaseSelect 组件的包体积更小，如果你不需要下拉树和下拉表格功能，推荐使用 BaseSelect 组件，而不是 Select 组件。`