fix(comp:select): responsive maxLabel size calculation error

packages/cdk/utils/src/dom.ts

@@ -13,6 +13,18 @@ export type EventTarget = HTMLElement | Document | Window | null | undefined
 
 export type Dimensions = { [key in 'width' | 'height']: number }
 
+export interface BoxSizingData {
+  boxSizing: 'border-box' | 'padding-box' | 'content-box'
+  paddingTop: number
+  paddingBottom: number
+  paddingLeft: number
+  paddingRight: number
+  borderTop: number
+  borderBottom: number
+  borderLeft: number
+  borderRight: number
+}
+
 export function on<K extends keyof HTMLElementEventMap>(
   el: EventTarget,
   type: K | undefined,
@@ -155,10 +167,16 @@ export function getMouseClientXY(evt: MouseEvent | TouchEvent): { clientX: numbe
   return { clientX, clientY }
 }
 
+function parseSize(size: string): number {
+  const parsedSize = parseFloat(size)
+
+  return Number.isNaN(parsedSize) ? 0 : parsedSize
+}
+
 export function getCssDimensions(element: HTMLElement): Dimensions & { fallback: boolean } {
   const css = getComputedStyle(element)
-  let width = parseFloat(css.width)
-  let height = parseFloat(css.height)
+  let width = parseSize(css.width)
+  let height = parseSize(css.height)
   const offsetWidth = element.offsetWidth
   const offsetHeight = element.offsetHeight
   const shouldFallback = Math.round(width) !== offsetWidth || Math.round(height) !== offsetHeight
@@ -174,3 +192,27 @@ export function getCssDimensions(element: HTMLElement): Dimensions & { fallback:
     fallback: shouldFallback,
   }
 }
+
+export function getBoxSizingData(node: HTMLElement): BoxSizingData {
+  const css = window.getComputedStyle(node)
+
+  return (
+    [
+      'paddingTop',
+      'paddingBottom',
+      'paddingLeft',
+      'paddingRight',
+      'borderTop',
+      'borderBottom',
+      'borderLeft',
+      'borderRight',
+    ] as const
+  ).reduce(
+    (data, key) => {
+      data[key] = parseSize(css[key])
+
+      return data
+    },
+    { boxSizing: css.boxSizing } as BoxSizingData,
+  )
+}

packages/components/_private/overflow/src/Item.tsx

@@ -17,7 +17,7 @@ export default defineComponent({
   props: overflowItemProps,
   setup(props, { slots }) {
     const itemElRef = ref<HTMLElement | undefined>()
-    const handleResize = (entry: ResizeObserverEntry) => callEmit(props.onSizeChange, entry.target, props.itemKey ?? '')
+    const handleResize = (entry: ResizeObserverEntry) => callEmit(props.onSizeChange, entry, props.itemKey ?? '')
     useResizeObserver(itemElRef, handleResize)
 
     return () => {

packages/components/_private/overflow/src/Overflow.tsx

@@ -12,7 +12,7 @@ import { Ref, computed, defineComponent, ref, watch } from 'vue'
 import { isNumber } from 'lodash-es'
 
 import { useResizeObserver } from '@idux/cdk/resize'
-import { throwError } from '@idux/cdk/utils'
+import { getBoxSizingData, throwError } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
 
 import Item from './Item'
@@ -73,9 +73,10 @@ export default defineComponent({
           return
         }
 
+        const internalContainerWidth = containerWidth.value - suffixWidth.value
+
         for (let i = 0; i < len; i++) {
           const getItemWidth = (index: number) => itemsWidthMap.value.get(props.getKey(data[index])) ?? 0
-          const internalContainerWidth = containerWidth.value - suffixWidth.value
           const curItemWidth = getItemWidth(i)
 
           // break when item is not ready
@@ -126,7 +127,7 @@ export default defineComponent({
           key={key}
           itemKey={key}
           display={index < displayCount.value}
-          onSizeChange={(itemEl: Element, key?: VKey) => setItemWidth(key!, itemEl)}
+          onSizeChange={(entry, key) => setItemWidth(key!, entry)}
         >
           {nodeContent}
         </Item>
@@ -141,7 +142,7 @@ export default defineComponent({
           class={`${mergedPrefixCls.value}-rest`}
           itemKey={restNodeKey}
           display={displayRest.value}
-          onSizeChange={(itemEl: Element) => (restWidth.value = itemEl.clientWidth ?? 0)}
+          onSizeChange={({ contentRect }) => (restWidth.value = contentRect.width ?? 0)}
         >
           {nodeContent}
         </Item>
@@ -155,7 +156,7 @@ export default defineComponent({
           {...itemSharedProps}
           class={`${mergedPrefixCls.value}-suffix`}
           itemKey={suffixNodeKey}
-          onSizeChange={(itemEl: Element) => (suffixWidth.value = itemEl.clientWidth ?? 0)}
+          onSizeChange={({ contentRect }) => (suffixWidth.value = contentRect.width ?? 0)}
         >
           {nodeContent}
         </Item>
@@ -175,8 +176,19 @@ export default defineComponent({
 
 const useContainerSize = (containerElRef: Ref<HTMLElement | undefined>) => {
   const containerWidth = ref(0)
+  const _getContainerWidth = () => {
+    const containerEl = containerElRef.value
+    if (!containerEl) {
+      return 0
+    }
+
+    const { width } = containerEl.getBoundingClientRect()
+    const { paddingLeft, paddingRight } = getBoxSizingData(containerEl)
+
+    return width - paddingLeft - paddingRight
+  }
   const setContainerWidth = () => {
-    containerWidth.value = containerElRef.value?.clientWidth ?? 0
+    containerWidth.value = _getContainerWidth()
   }
 
   return {
@@ -187,11 +199,15 @@ const useContainerSize = (containerElRef: Ref<HTMLElement | undefined>) => {
 
 const useItemSize = () => {
   const itemsWidthMap = ref<Map<VKey, number>>(new Map())
-  const setItemWidth = (key: VKey, itemEl?: Element) => {
-    if (!itemEl && itemsWidthMap.value.get(key)) {
+  const setItemWidth = (key: VKey, entry: ResizeObserverEntry) => {
+    const {
+      contentRect: { width },
+      target,
+    } = entry
+    if (!target && itemsWidthMap.value.get(key)) {
       itemsWidthMap.value.delete(key)
-    } else {
-      itemEl?.clientWidth && itemsWidthMap.value.set(key, itemEl?.clientWidth ?? 0)
+    } else if (width) {
+      itemsWidthMap.value.set(key, width)
     }
   }
 

packages/components/_private/overflow/src/types.ts

@@ -29,7 +29,7 @@ export const overflowItemProps = {
     required: true,
   },
   data: Object as PropType<ItemData>,
-  onSizeChange: Function as PropType<(itemEl: Element, key?: VKey) => void>,
+  onSizeChange: Function as PropType<(entry: ResizeObserverEntry, key?: VKey) => void>,
 } as const
 
 export const overflowProps = {

packages/components/textarea/src/composables/useAutoRows.ts

@@ -55,7 +55,7 @@ export function useAutoRows(
   const cachedLineHeight = useLineHeight(textareaRef)
   const boxSizingData = computed(() => {
     if (!textareaRef.value) {
-      return { paddingSize: 0, borderSize: 0, boxSizing: '' } as BoxSizingData
+      return { paddingSize: 0, borderSize: 0, boxSizing: '' } as unknown as BoxSizingData
     }
 
     return getBoxSizingData(textareaRef.value)

packages/components/textarea/src/utils/getBoxSizingData.ts

@@ -5,37 +5,20 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-export interface BoxSizingData {
-  boxSizing: string
+import { type BoxSizingData as IBoxSizingData, getBoxSizingData as _getBoxSizingData } from '@idux/cdk/utils'
+
+export interface BoxSizingData extends IBoxSizingData {
   paddingSize: number
   borderSize: number
-  paddingTop: number
-  paddingBottom: number
-  borderTop: number
-  borderBottom: number
 }
 
 export function getBoxSizingData(node: HTMLElement): BoxSizingData {
-  const { boxSizing, paddingBottom, paddingTop, borderBottom, borderTop } = window.getComputedStyle(node)
-
-  const _paddingTop = parseSize(paddingTop)
-  const _paddingBottom = parseSize(paddingBottom)
-  const _borderTop = parseSize(borderTop)
-  const _borderBottom = parseSize(borderBottom)
+  const data = _getBoxSizingData(node)
+  const { paddingBottom, paddingTop, borderBottom, borderTop } = data
 
   return {
-    boxSizing,
-    paddingSize: _paddingTop + _paddingBottom,
-    borderSize: _borderTop + _borderBottom,
-    paddingTop: _paddingTop,
-    paddingBottom: _paddingBottom,
-    borderTop: _borderTop,
-    borderBottom: _borderBottom,
+    ...data,
+    paddingSize: paddingTop + paddingBottom,
+    borderSize: borderTop + borderBottom,
   }
 }
-
-function parseSize(size: string): number {
-  const parsedSize = parseFloat(size)
-
-  return Number.isNaN(parsedSize) ? 0 : parsedSize
-}