vue-devui 1.6.15 → 1.6.17

package/types/category-search/src/category-search-types.d.ts

@@ -129,6 +129,9 @@ export interface ExtendConfig {
         disabled?: boolean;
     };
 }
+export interface ITagContext {
+    toggle: (status?: boolean) => void;
+}
 export declare const categorySearchProps: {
     category: {
         type: PropType<ICategorySearchTagItem[]>;
@@ -236,6 +239,8 @@ export interface CategorySearchInjection {
     showCurrentSearchCategory: (tag: ICategorySearchTagItem) => void;
     onInputBackspace: () => void;
     onInputToggle: () => void;
+    addTagContext: (field: string, context: ITagContext) => void;
+    removeTagContext: (field: string) => void;
 }
 export declare const categorySearchInjectionKey: InjectionKey<CategorySearchInjection>;
 export declare const categorySearchDropdownProps: {

package/types/editable-select/src/editable-select-types.d.ts

@@ -71,6 +71,9 @@ export declare const editableSelectProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly maxLength: {
+        readonly type: NumberConstructor;
+    };
 };
 export declare type EditableSelectProps = ExtractPropTypes<typeof editableSelectProps>;
 export interface EditableSelectContext {

package/types/overlay/src/flexible-overlay/flexible-overlay-types.d.ts

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes, PropType, Ref } from 'vue';
+import type { ExtractPropTypes, PropType } from 'vue';
 export declare type Placement = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
 export declare type Alignment = 'start' | 'end';
 export declare type OffsetOptions = {
@@ -9,11 +9,6 @@ export declare type Point = {
     x?: number;
     y?: number;
 };
-export declare type UseOverlayFn = {
-    arrowRef: Ref<HTMLElement | undefined>;
-    overlayRef: Ref<HTMLElement | undefined>;
-    updatePosition: () => void;
-};
 export declare type EmitEventFn = (event: 'positionChange' | 'update:modelValue', result?: unknown) => void;
 export interface Rect {
     x: number;
@@ -57,5 +52,9 @@ export declare const flexibleOverlayProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    fitOriginWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 };
 export declare type FlexibleOverlayProps = ExtractPropTypes<typeof flexibleOverlayProps>;

package/types/overlay/src/flexible-overlay/index.d.ts

@@ -35,6 +35,10 @@ export declare const FlexibleOverlay: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    fitOriginWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, () => false | JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "positionChange")[], "update:modelValue" | "positionChange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
@@ -71,6 +75,10 @@ export declare const FlexibleOverlay: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    fitOriginWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onPositionChange?: ((...args: any[]) => any) | undefined;
@@ -82,4 +90,5 @@ export declare const FlexibleOverlay: import("vue").DefineComponent<{
     showArrow: boolean;
     isArrowCenter: boolean;
     clickEventBubble: boolean;
+    fitOriginWidth: boolean;
 }, {}>;

package/types/overlay/src/flexible-overlay/use-flexible-overlay.d.ts

@@ -1,2 +1,11 @@
-import { FlexibleOverlayProps, UseOverlayFn, EmitEventFn } from './flexible-overlay-types';
-export declare function useOverlay(props: FlexibleOverlayProps, emit: EmitEventFn): UseOverlayFn;
+import { FlexibleOverlayProps, EmitEventFn } from './flexible-overlay-types';
+export declare function useOverlay(props: FlexibleOverlayProps, emit: EmitEventFn): {
+    arrowRef: import("vue").Ref<HTMLElement | undefined>;
+    overlayRef: import("vue").Ref<HTMLElement | undefined>;
+    styles: import("vue").ComputedRef<{
+        width: string;
+    } | {
+        width?: undefined;
+    }>;
+    updatePosition: () => Promise<void>;
+};

package/types/select/src/composables/use-select-content.d.ts

@@ -1,2 +1,21 @@
-import { UseSelectContentReturnType } from '../select-types';
-export default function useSelectContent(): UseSelectContentReturnType;
+import { OptionObjectItem } from '../select-types';
+export default function useSelectContent(): {
+    select: import("../select-types").SelectContext | undefined;
+    searchQuery: import("vue").Ref<string>;
+    selectedData: import("vue").ComputedRef<OptionObjectItem[]>;
+    isSelectDisable: import("vue").ComputedRef<boolean>;
+    isSupportCollapseTags: import("vue").ComputedRef<boolean>;
+    isDisabledTooltip: import("vue").ComputedRef<boolean>;
+    isReadOnly: import("vue").ComputedRef<boolean>;
+    selectionCls: import("vue").ComputedRef<string>;
+    inputCls: import("vue").ComputedRef<string>;
+    tagSize: import("vue").ComputedRef<string>;
+    placeholder: import("vue").ComputedRef<string>;
+    isMultiple: import("vue").ComputedRef<boolean>;
+    displayInputValue: import("vue").ComputedRef<string>;
+    handleClear: (e: MouseEvent) => void;
+    tagDelete: (data: OptionObjectItem) => void;
+    onFocus: (e: FocusEvent) => void;
+    onBlur: (e: FocusEvent) => void;
+    queryFilter: (e: Event) => void;
+};

package/types/select/src/select-types.d.ts

@@ -105,34 +105,16 @@ export declare const selectProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly menuClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly maxLength: {
+        readonly type: NumberConstructor;
+    };
 };
 export declare type SelectProps = ExtractPropTypes<typeof selectProps>;
 export declare type OptionModelValue = number | string;
-export interface UseSelectReturnType {
-    selectDisabled: ComputedRef<boolean>;
-    selectSize: ComputedRef<SelectSize>;
-    originRef: Ref<HTMLElement | undefined>;
-    dropdownRef: Ref<HTMLElement | undefined>;
-    isOpen: Ref<boolean>;
-    selectCls: ComputedRef<string>;
-    mergeOptions: Ref<OptionObjectItem[]>;
-    selectedOptions: ComputedRef<OptionObjectItem[]>;
-    filterQuery: Ref<string>;
-    emptyText: ComputedRef<string>;
-    isLoading: Ref<boolean>;
-    isShowEmptyText: ComputedRef<boolean>;
-    handleClear: (e: MouseEvent) => void;
-    valueChange: (item: OptionObjectItem) => void;
-    handleClose: () => void;
-    updateInjectOptions: (item: Record<string, unknown>, operation: string, isObject: boolean) => void;
-    tagDelete: (data: OptionObjectItem) => void;
-    onFocus: (e: FocusEvent) => void;
-    onBlur: (e: FocusEvent) => void;
-    isDisabled: (item: OptionObjectItem) => boolean;
-    toggleChange: (bool: boolean) => void;
-    debounceQueryFilter: (query: string) => void;
-    isShowCreateOption: ComputedRef<boolean>;
-}
 export interface SelectContext extends SelectProps {
     selectDisabled: boolean;
     selectSize: string;
@@ -172,25 +154,6 @@ export interface UseOptionReturnType {
     isVisible: ComputedRef<boolean>;
     optionSelect: () => void;
 }
-export interface UseSelectContentReturnType {
-    searchQuery: Ref<string>;
-    selectedData: ComputedRef<OptionObjectItem[]>;
-    isSelectDisable: ComputedRef<boolean>;
-    isSupportCollapseTags: ComputedRef<boolean>;
-    isDisabledTooltip: ComputedRef<boolean>;
-    isReadOnly: ComputedRef<boolean>;
-    selectionCls: ComputedRef<string>;
-    inputCls: ComputedRef<string>;
-    tagSize: ComputedRef<string>;
-    placeholder: ComputedRef<string>;
-    isMultiple: ComputedRef<boolean>;
-    displayInputValue: ComputedRef<string>;
-    handleClear: (e: MouseEvent) => void;
-    tagDelete: (data: OptionObjectItem) => void;
-    onFocus: (e: FocusEvent) => void;
-    onBlur: (e: FocusEvent) => void;
-    queryFilter: (e: Event) => void;
-}
 export interface UseSelectFunctionReturn {
     isSelectFocus: Ref<boolean>;
     blur: () => void;

package/types/select/src/use-select.d.ts

@@ -1,4 +1,28 @@
 import { Ref } from 'vue';
 import type { SetupContext } from 'vue';
-import { SelectProps, UseSelectReturnType } from './select-types';
-export default function useSelect(props: SelectProps, selectRef: Ref<HTMLElement | undefined>, ctx: SetupContext, focus: () => void, blur: () => void, isSelectFocus: Ref<boolean>, t: (path: string) => unknown): UseSelectReturnType;
+import { SelectProps, OptionObjectItem } from './select-types';
+export default function useSelect(props: SelectProps, selectRef: Ref<HTMLElement | undefined>, ctx: SetupContext, focus: () => void, blur: () => void, isSelectFocus: Ref<boolean>, t: (path: string) => unknown): {
+    selectDisabled: import("vue").ComputedRef<any>;
+    selectSize: import("vue").ComputedRef<import("./select-types").SelectSize>;
+    originRef: Ref<HTMLElement | undefined>;
+    dropdownRef: Ref<any>;
+    isOpen: Ref<boolean>;
+    selectCls: import("vue").ComputedRef<string>;
+    mergeOptions: import("vue").ComputedRef<OptionObjectItem[]>;
+    selectedOptions: import("vue").ComputedRef<OptionObjectItem[]>;
+    filterQuery: Ref<string>;
+    emptyText: import("vue").ComputedRef<string>;
+    isLoading: import("vue").ComputedRef<boolean>;
+    isShowEmptyText: import("vue").ComputedRef<boolean>;
+    handleClear: () => void;
+    valueChange: (item: OptionObjectItem) => void;
+    handleClose: () => void;
+    updateInjectOptions: (item: Record<string, unknown>, operation: string, isObject: boolean) => void;
+    tagDelete: (data: OptionObjectItem) => void;
+    onFocus: (e: FocusEvent) => void;
+    onBlur: (e: FocusEvent) => void;
+    isDisabled: (item: OptionObjectItem) => boolean;
+    toggleChange: (bool: boolean) => void;
+    debounceQueryFilter: import("lodash").DebouncedFunc<(query: string) => void>;
+    isShowCreateOption: import("vue").ComputedRef<boolean>;
+};

package/vue-devui.es.js

@@ -7853,6 +7853,10 @@ const flexibleOverlayProps = {
   clickEventBubble: {
     type: Boolean,
     default: false
+  },
+  fitOriginWidth: {
+    type: Boolean,
+    default: false
   }
 };
 function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
@@ -7875,9 +7879,18 @@ function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
   return { x, y };
 }
 function useOverlay(props, emit) {
-  const { position, showArrow } = toRefs(props);
+  const { fitOriginWidth, position, showArrow } = toRefs(props);
   const overlayRef = ref();
   const arrowRef = ref();
+  const overlayWidth = ref(0);
+  let originObserver;
+  const styles = computed(() => {
+    if (fitOriginWidth.value) {
+      return { width: overlayWidth.value + "px" };
+    } else {
+      return {};
+    }
+  });
   const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
     const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
     const staticSide = {
@@ -7922,21 +7935,43 @@ function useOverlay(props, emit) {
       updatePosition();
     }
   };
+  const updateWidth = (originEl) => {
+    overlayWidth.value = originEl.getBoundingClientRect().width;
+    updatePosition();
+  };
+  const observeOrigin = () => {
+    var _a2, _b;
+    if (fitOriginWidth.value && typeof window !== "undefined") {
+      const originEl = (_b = (_a2 = props.origin) == null ? void 0 : _a2.$el) != null ? _b : props.origin;
+      if (originEl) {
+        originObserver = new window.ResizeObserver(() => updateWidth(originEl));
+        originObserver.observe(originEl);
+      }
+    }
+  };
+  const unobserveOrigin = () => {
+    var _a2, _b;
+    const originEl = (_b = (_a2 = props.origin) == null ? void 0 : _a2.$el) != null ? _b : props.origin;
+    originEl && (originObserver == null ? void 0 : originObserver.unobserve(originEl));
+  };
   watch(() => props.modelValue, () => {
     if (props.modelValue && props.origin) {
       nextTick(updatePosition);
       window.addEventListener("scroll", scrollCallback, true);
       window.addEventListener("resize", updatePosition);
+      observeOrigin();
     } else {
       window.removeEventListener("scroll", scrollCallback, true);
       window.removeEventListener("resize", updatePosition);
+      unobserveOrigin();
     }
   });
   onUnmounted(() => {
     window.removeEventListener("scroll", scrollCallback, true);
     window.removeEventListener("resize", updatePosition);
+    unobserveOrigin();
   });
-  return { arrowRef, overlayRef, updatePosition };
+  return { arrowRef, overlayRef, styles, updatePosition };
 }
 var flexibleOverlay = "";
 const FlexibleOverlay = defineComponent({
@@ -7957,6 +7992,7 @@ const FlexibleOverlay = defineComponent({
     const {
       arrowRef,
       overlayRef,
+      styles,
       updatePosition
     } = useOverlay(props, emit);
     expose({
@@ -7966,7 +8002,8 @@ const FlexibleOverlay = defineComponent({
       var _a2;
       return props.modelValue && createVNode("div", mergeProps({
         "ref": overlayRef,
-        "class": ns2.b()
+        "class": ns2.b(),
+        "style": styles.value
       }, attrs, {
         "onClick": withModifiers(() => ({}), [clickEventBubble.value ? "" : "stop"]),
         "onPointerup": withModifiers(() => ({}), ["stop"])
@@ -14401,7 +14438,9 @@ var CategorySearchTagDropdown = defineComponent({
     const {
       rootCtx,
       ComponentMap,
-      onSearchKeyTagClick
+      onSearchKeyTagClick,
+      addTagContext,
+      removeTagContext
     } = inject(categorySearchInjectionKey);
     const isVisible = ref(false);
     const checkType = (tag2) => {
@@ -14416,6 +14455,21 @@ var CategorySearchTagDropdown = defineComponent({
     const onDropdownClose = () => {
       isVisible.value = false;
     };
+    const toggle = (status2) => {
+      if (typeof status2 === "boolean") {
+        isVisible.value = status2;
+      } else {
+        onTagClick();
+      }
+    };
+    onMounted(() => {
+      addTagContext(item.value.field, {
+        toggle
+      });
+    });
+    onUnmounted(() => {
+      removeTagContext(item.value.field);
+    });
     return () => item.value.type !== "keyword" ? createVNode(Dropdown$1, {
       "visible": isVisible.value,
       "trigger": "manually",
@@ -16750,12 +16804,24 @@ function useCategorySearch(props, ctx2) {
   watch(() => extendConfig == null ? void 0 : extendConfig.value, () => {
     merge$2(operationConfig, (extendConfig == null ? void 0 : extendConfig.value) || {});
   }, { immediate: true, deep: true });
+  const tagContextMap = {};
+  const addTagContext = (field, context2) => {
+    Reflect.defineProperty(tagContextMap, field, { value: context2 });
+  };
+  const removeTagContext = (field) => {
+    Reflect.deleteProperty(tagContextMap, field);
+  };
+  const toggleTagMenu = (field, status2) => {
+    var _a2;
+    (_a2 = tagContextMap[field]) == null ? void 0 : _a2.toggle(status2);
+  };
   ctx2.expose({
     chooseItem,
     chooseItems,
     getTextInputValue,
     getNumberRangeValue,
-    searchCategory
+    searchCategory,
+    toggleTagMenu
   });
   onMounted(() => scrollToTail(true));
   provide(categorySearchInjectionKey, {
@@ -16795,7 +16861,9 @@ function useCategorySearch(props, ctx2) {
     searchCategory,
     showCurrentSearchCategory,
     onInputBackspace,
-    onInputToggle
+    onInputToggle,
+    addTagContext,
+    removeTagContext
   });
   function init() {
     var _a2, _b;
@@ -33657,6 +33725,9 @@ const editableSelectProps = {
   showGlowStyle: {
     type: Boolean,
     default: true
+  },
+  maxLength: {
+    type: Number
   }
 };
 const SELECT_KEY = Symbol("EditableSelect");
@@ -33899,9 +33970,7 @@ function useSelect$3(dropdownRef, props, states, setSoftFocus, ctx2) {
     setSelected();
   });
   watch(() => props.options, (newOptions) => {
-    if (newOptions.length !== 0) {
-      cachedOptions.value = newOptions;
-    }
+    cachedOptions.value = newOptions;
   });
   onMounted(() => {
     setSelected();
@@ -34134,7 +34203,8 @@ var EditableSelect = defineComponent({
       disabled,
       modelValue,
       position,
-      placeholder
+      placeholder,
+      maxLength
     } = toRefs(props);
     const align = computed(() => position.value.some((item) => item.includes("start") || item.includes("end")) ? "start" : null);
     const {
@@ -34247,6 +34317,7 @@ var EditableSelect = defineComponent({
         "disabled": disabled.value,
         "placeholder": placeholder.value,
         "value": states.inputValue,
+        "maxlength": maxLength == null ? void 0 : maxLength.value,
         "type": "text",
         "onInput": onInput,
         "onFocus": handleFocus,
@@ -37333,6 +37404,13 @@ var EditorMd = defineComponent({
       fullscreenZIndex
     } = toRefs(props);
     const showFullscreen = ref(false);
+    const finalModelValue = computed(() => {
+      if (typeof maxlength.value === "number") {
+        return modelValue.value.substring(0, maxlength.value);
+      } else {
+        return modelValue.value;
+      }
+    });
     const {
       editorRef,
       overlayRef,
@@ -37390,7 +37468,7 @@ var EditorMd = defineComponent({
         }, [createVNode("textarea", {
           "ref": editorRef,
           "placeholder": placeholder.value
-        }, [modelValue.value]), createVNode(FlexibleOverlay, {
+        }, [finalModelValue.value]), createVNode(FlexibleOverlay, {
           "ref": overlayRef,
           "modelValue": isHintShow.value,
           "onUpdate:modelValue": ($event) => isHintShow.value = $event,
@@ -37406,11 +37484,11 @@ var EditorMd = defineComponent({
           }
         }), Boolean(maxlength == null ? void 0 : maxlength.value) && createVNode("div", {
           "class": "dp-md-count"
-        }, [modelValue.value.length || 0, createTextVNode("/"), maxlength.value])]), createVNode(MdRender, {
+        }, [finalModelValue.value.length || 0, createTextVNode("/"), maxlength.value])]), createVNode(MdRender, {
           "ref": renderRef,
           "base-url": baseUrl.value,
           "breaks": breaks.value,
-          "content": modelValue.value,
+          "content": finalModelValue.value,
           "custom-parse": customParse.value,
           "render-parse": renderParse.value,
           "md-rules": mdRules.value,
@@ -41046,10 +41124,12 @@ function ErrorIcon$1() {
 var message$1 = "";
 var Message$1 = defineComponent({
   name: "DMessage",
+  inheritAttrs: false,
   props: messageProps,
   emits: ["destroy", "close"],
   setup(props, {
     emit,
+    attrs,
     slots
   }) {
     const {
@@ -41134,19 +41214,17 @@ var Message$1 = defineComponent({
         "onClick": close2
       }, [createVNode(Close$1, null, null)]);
     });
-    return () => {
-      return createVNode(Transition, {
-        "name": "message-fade",
-        "onAfterLeave": handleDestroy
-      }, {
-        default: () => [visible.value && createVNode("div", {
-          "class": classes.value,
-          "style": __spreadValues({}, styles.value),
-          "onMouseenter": interrupt,
-          "onMouseleave": removeReset
-        }, [renderIcon.value, renderText.value, renderClose.value])]
-      });
-    };
+    return () => createVNode(Transition, {
+      "name": "message-fade",
+      "onAfterLeave": handleDestroy
+    }, {
+      default: () => [visible.value && createVNode("div", mergeProps({
+        "class": classes.value,
+        "style": __spreadValues({}, styles.value),
+        "onMouseenter": interrupt,
+        "onMouseleave": removeReset
+      }, attrs), [renderIcon.value, renderText.value, renderClose.value])]
+    });
   }
 });
 function _isSlot$6(s) {
@@ -42545,6 +42623,13 @@ const selectProps = {
   showGlowStyle: {
     type: Boolean,
     default: true
+  },
+  menuClass: {
+    type: String,
+    default: ""
+  },
+  maxLength: {
+    type: Number
   }
 };
 const optionProps = {
@@ -42730,6 +42815,7 @@ function useSelectContent() {
     }
   };
   return {
+    select: select2,
     searchQuery,
     selectedData,
     isSelectDisable,
@@ -42765,6 +42851,7 @@ var SelectContent = defineComponent({
     const multipleCls = ns2.e("multiple");
     const multipleInputCls = ns2.em("multiple", "input");
     const {
+      select: select2,
       searchQuery,
       selectedData,
       isSelectDisable,
@@ -42828,6 +42915,7 @@ var SelectContent = defineComponent({
         "placeholder": placeholder.value,
         "readonly": isReadOnly.value,
         "disabled": isSelectDisable.value,
+        "maxlength": select2 == null ? void 0 : select2.maxLength,
         "onInput": queryFilter,
         "onFocus": onFocus,
         "onBlur": onBlur
@@ -42839,6 +42927,7 @@ var SelectContent = defineComponent({
         "placeholder": placeholder.value,
         "readonly": isReadOnly.value,
         "disabled": isSelectDisable.value,
+        "maxlength": select2 == null ? void 0 : select2.maxLength,
         "onFocus": onFocus,
         "onBlur": onBlur,
         "onInput": queryFilter
@@ -42932,7 +43021,6 @@ var Select = defineComponent({
     const isRender = ref(false);
     const currentPosition = ref("bottom");
     const position = ref(["bottom-start", "top-start"]);
-    const dropdownWidth = ref("0");
     const handlePositionChange = (pos) => {
       currentPosition.value = pos.split("-")[0] === "top" ? "top" : "bottom";
     };
@@ -42940,14 +43028,9 @@ var Select = defineComponent({
       transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%",
       "z-index": "var(--devui-z-index-dropdown, 1052)"
     }));
-    const updateDropdownWidth = () => {
-      var _a2;
-      dropdownWidth.value = ((_a2 = originRef == null ? void 0 : originRef.value) == null ? void 0 : _a2.clientWidth) ? originRef.value.clientWidth + "px" : "100%";
-    };
     watch(selectRef, (val) => {
       if (val) {
         originRef.value = val.$el;
-        updateDropdownWidth();
       }
     });
     const scrollToBottom = () => {
@@ -42959,15 +43042,11 @@ var Select = defineComponent({
     };
     onMounted(() => {
       isRender.value = true;
-      updateDropdownWidth();
-      window.addEventListener("resize", updateDropdownWidth);
       nextTick(() => {
-        dropdownContainer.value.addEventListener("scroll", scrollToBottom);
+        var _a2;
+        (_a2 = dropdownContainer.value) == null ? void 0 : _a2.addEventListener("scroll", scrollToBottom);
       });
     });
-    onUnmounted(() => {
-      window.removeEventListener("resize", updateDropdownWidth);
-    });
     provide(SELECT_TOKEN, reactive(__spreadProps(__spreadValues({}, toRefs(props)), {
       selectDisabled,
       selectSize,
@@ -43003,17 +43082,16 @@ var Select = defineComponent({
             "origin": originRef.value,
             "align": "start",
             "offset": 4,
+            "fit-origin-width": true,
             "position": position.value,
             "onPositionChange": handlePositionChange,
-            "style": styles.value
+            "style": styles.value,
+            "class": props.menuClass
           }, {
             default: () => {
               var _a2, _b, _c, _d;
               return [withDirectives(createVNode("div", {
-                "class": dropdownCls,
-                "style": {
-                  width: `${dropdownWidth.value}`
-                }
+                "class": dropdownCls
               }, [withDirectives(createVNode("ul", {
                 "class": listCls,
                 "ref": dropdownContainer
@@ -54356,7 +54434,7 @@ const installs = [
   VirtualListInstall
 ];
 var vueDevui = {
-  version: "1.6.15",
+  version: "1.6.17",
   install(app) {
     installs.forEach((p) => app.use(p));
   }