fix(suggestion): fix the dropdown width not adapting when block (#358)

* fix(suggestion): fix the dropdown width not adapting when block prop is true

* refactor(suggestion): optimize component and element width hook

* refactor: replace useElementWidth with VueUse useElementSize

* build(project): add vueuse-core to deps

---------

Co-authored-by: wzc520pyfm <[email protected]>

Author: PeikyLiu

package.json

@@ -108,7 +108,6 @@
     "@vitest/coverage-v8": "^2.1.1",
     "@vue/shared": "^3.5.13",
     "@vue/test-utils": "^2.4.6",
-    "@vueuse/core": "^12.2.0",
     "ant-design-vue": "^4.2.6",
     "changelogen": "^0.5.7",
     "eslint": "^8.57.1",
@@ -139,6 +138,7 @@
     "@ant-design/fast-color": "^2.0.6",
     "@emotion/hash": "^0.9.2",
     "@emotion/unitless": "^0.10.0",
+    "@vueuse/core": "^13.4.0",
     "classnames": "^2.5.1",
     "csstype": "^3.1.3",
     "stylis": "^4.3.4"

pnpm-lock.yaml

@@ -4,10 +4,11 @@ import type { RenderChildrenProps, SuggestionItem, SuggestionProps } from './int
 import { useXProviderContext } from '../x-provider';
 import useXComponentConfig from '../_util/hooks/use-x-component-config';
 import useStyle from './style';
-import { computed, type VNode } from 'vue';
+import { computed, type VNode, ref } from 'vue';
 import useState from '../_util/hooks/use-state';
 import { Cascader, type CascaderProps } from 'ant-design-vue';
 import useActive from './useActive';
+import { useElementSize } from '@vueuse/core';
 
 defineOptions({ name: 'AXSuggestion' });
 
@@ -38,12 +39,24 @@ const isRTL = computed(() => direction.value === 'rtl');
 // ===================== Component Config =========================
 const contextConfig = useXComponentConfig('suggestion');
 
+// ============================ Refs =============================
+const cascaderSlotRef = ref<HTMLElement>();
+
 // ============================ Styles ============================
 const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
+const {width: slotActiveWidth} = useElementSize(cascaderSlotRef)
+
+const dropdownStyle = computed(() => {
+  if(!block) return undefined
+  if (!slotActiveWidth.value) return undefined
+  return {width: `${slotActiveWidth.value}px`}
+})
+
 // =========================== Trigger ============================
 const [mergedOpen, setOpen] = useState(open);
 
+
 const [info, setInfo] = useState<T | undefined>();
 
 const triggerOpen = (nextOpen: boolean) => {
@@ -116,10 +129,11 @@ defineRender(() => {
         [`${prefixCls.value}-block`]: block,
       })}
       onChange={onInternalChange as CascaderProps['onChange']}
-      dropdownMatchSelectWidth={block}
+      dropdownStyle={dropdownStyle.value}
     >
       {{
         default: () => <div
+        ref={cascaderSlotRef}
         class={classnames(
           prefixCls.value,
           contextConfig.value.className,