Momo poppy/fix select 1126

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

@@ -42,9 +42,9 @@ test('multiple-limit', async ({ page }) => {
   await expect(option.filter({ hasText: '全部' })).toHaveCount(0)
 
   const list = await option.all()
-  await expect(list[0]).toHaveClass(/selected hover is-required/)
+  await expect(list[0]).toHaveClass(/selected is-required/)
   await expect(list[1]).toHaveClass(/is-disabled/)
-  await expect(list[2]).toHaveClass(/selected/)
+  await expect(list[2]).toHaveClass(/selected hover/)
   await expect(list[3]).toHaveClass(/is-disabled/)
   await expect(list[4]).toHaveClass(/is-disabled/)
   await expect(list[5]).toHaveClass(/is-disabled/)

packages/renderless/src/option/index.ts

@@ -49,6 +49,14 @@ export const handleGroupDisabled =
     vm.groupDisabled = val
   }
 
+export const hoverItem =
+  ({ select, props, state }) =>
+  () => {
+    if (!props.disabled && !state.groupDisabled && !select.state.disabledOptionHover) {
+      select.state.hoverIndex = select.state.optionIndexArr.indexOf(state.index)
+    }
+  }
+
 export const selectOptionClick =
   ({ props, state, select, constants, vm }) =>
   () => {

packages/renderless/src/option/vue.ts

@@ -10,9 +10,18 @@
  *
  */
 
-import { isEqual, contains, handleGroupDisabled, selectOptionClick, queryChange, toggleEvent, initValue } from './index'
-
-export const api = ['state', 'visible', 'selectOptionClick']
+import {
+  isEqual,
+  contains,
+  handleGroupDisabled,
+  hoverItem,
+  selectOptionClick,
+  queryChange,
+  toggleEvent,
+  initValue
+} from './index'
+
+export const api = ['state', 'visible', 'hoverItem', 'selectOptionClick']
 
 const initState = ({ reactive, computed, props, api, markRaw, select, parent }) => {
   const state = reactive({
@@ -59,6 +68,7 @@ const initApi = ({ api, props, state, select, constants, vm }) => {
     state,
     isEqual: isEqual({ select, state }),
     contains: contains({ select, state }),
+    hoverItem: hoverItem({ select, props, state }),
     queryChange: queryChange({ select, props, state }),
     selectOptionClick: selectOptionClick({ constants, vm, props, state, select }),
     handleGroupDisabled: handleGroupDisabled({ state, vm }),

packages/renderless/src/select/index.ts

@@ -739,7 +739,6 @@ export const resetInputHeight =
         api.calcCollapseTags()
       }
 
-      const sizeInMap = designConfig?.state.initialInputHeight || Math.round(state.initialInputHeight) || 32
       const noSelected = state.selected.length === 0
       // tiny 新增的spacing (design中配置：aui为4，smb为0，tiny 默认为0)
       const spacingHeight = designConfig?.state?.spacingHeight ?? constants.SPACING_HEIGHT
@@ -750,11 +749,11 @@ export const resetInputHeight =
             const tagsClientHeight = tags.clientHeight
 
             fastdom.mutate(() => {
-              input.style.height = Math.max(tagsClientHeight + spacingHeight, sizeInMap) + 'px'
+              input.style.height = Math.max(tagsClientHeight + spacingHeight, state.currentSizeMap) + 'px'
             })
           })
         } else {
-          input.style.height = noSelected ? sizeInMap + 'px' : Math.max(0, sizeInMap) + 'px'
+          input.style.height = noSelected ? state.currentSizeMap + 'px' : Math.max(0, state.currentSizeMap) + 'px'
         }
       } else {
         input.style.height = 'auto'
@@ -2049,6 +2048,15 @@ export const initQuery =
     return Promise.resolve(selected)
   }
 
+export const computedCurrentSizeMap =
+  ({ state, designConfig }) =>
+  () => {
+    const defaultSizeMap = { default: 32, mini: 24, small: 28, medium: 40 }
+    const sizeMap = designConfig?.state?.sizeMap || defaultSizeMap
+
+    return sizeMap[state.selectSize || 'default']
+  }
+
 export const mounted =
   ({ api, parent, state, props, vm, designConfig }) =>
   () => {
@@ -2064,18 +2072,10 @@ export const mounted =
 
     state.completed = true
 
-    // tiny 新增：  sizeMap适配不同主题
-    const defaultSizeMap = { default: 32, mini: 24, small: 36, medium: 40 }
-    const sizeMap = designConfig?.state?.sizeMap || defaultSizeMap
-
     if (props.multiple && Array.isArray(props.modelValue) && props.modelValue.length > 0) {
       state.currentPlaceholder = ''
     }
 
-    state.initialInputHeight = state.isDisplayOnly
-      ? sizeMap[state.selectSize || 'default'] // tiny 新增 : default, aui只处理了另3种情况，不传入时，要固定为default
-      : inputClientRect.height || sizeMap[state.selectSize]
-
     addResizeListener(parentEl, api.handleResize)
 
     if (vm.$refs.tags) {

packages/renderless/src/select/vue.ts

@@ -109,7 +109,8 @@ import {
   onClickCollapseTag,
   computedIsExpand,
   computedShowTagText,
-  isTagClosable
+  isTagClosable,
+  computedCurrentSizeMap
 } from './index'
 import debounce from '../common/deps/debounce'
 import { isNumber } from '../common/type'
@@ -243,7 +244,8 @@ const initState = ({ reactive, computed, props, api, emitter, parent, constants,
       }
       return true // tiny 默认为true
     })(),
-    designConfig
+    designConfig,
+    currentSizeMap: computed(() => api.computedCurrentSizeMap())
   })
 
   return state
@@ -404,7 +406,8 @@ const initApi = ({
     clearSearchText: clearSearchText({ state, api }),
     clearNoMatchValue: clearNoMatchValue({ props, emit }),
     computedShowTagText: computedShowTagText({ state }),
-    isTagClosable: isTagClosable()
+    isTagClosable: isTagClosable(),
+    computedCurrentSizeMap: computedCurrentSizeMap({ state, designConfig })
   })
 
   addApi({ api, props, state, emit, constants, parent, nextTick, dispatch, vm, isMobileFirstMode, designConfig })

packages/theme/src/select/index.less

@@ -222,10 +222,15 @@
     }
   }
 
+  &.tiny-select__multiple.is-display-only {
+    &.is-hover-expand,
+    &.is-click-expand {
+      vertical-align: top;
+    }
+  }
+
   &.is-hover-expand,
   &.is-click-expand {
-    vertical-align: top;
-
     .@{select-prefix-cls}__tags-group {
       position: absolute;
       top: 0;
@@ -307,18 +312,6 @@
       position: absolute;
       width: 100%;
     }
-
-    &.@{select-prefix-cls}--small {
-      .@{select-prefix-cls}__tags {
-        padding-top: 2px;
-      }
-    }
-
-    &.@{select-prefix-cls}--mini {
-      .@{select-prefix-cls}__tags {
-        padding-top: 2px;
-      }
-    }
   }
 
   &.is-hover-expand.is-disabled {

packages/vue/src/option/src/mobile-first.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="option"
+    @mouseenter="hoverItem"
     @click.stop="selectOptionClick"
     @mousedown.stop=""
     :data-index="state.index"

packages/vue/src/option/src/pc.vue

@@ -1,6 +1,7 @@
 <template>
   <li
     ref="option"
+    @mouseenter="hoverItem"
     @click.stop="selectOptionClick"
     @mousedown.stop=""
     data-tag="tiny-option"

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

@@ -151,7 +151,7 @@
                   :type="state.getTagType"
                   key="tags-collapse"
                   data-tag="tags-collapse"
-                  only-icon
+                  :only-icon="!hoverExpand"
                   :closable="false"
                   :size="state.collapseTagSize"
                   @click="onClickCollapseTag($event)"