vue-devui 1.6.36-alpha.0 → 1.6.36-alpha.2

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

@@ -1,4 +1,5 @@
 import type { ExtractPropTypes, PropType, InjectionKey, SetupContext, Ref } from 'vue';
+import type { PopoverProps } from '../../popover';
 export type CategorySearchTagType = 'radio' | 'checkbox' | 'label' | 'textInput' | 'numberRange' | 'keyword';
 export type StyleType = 'default' | 'gray';
 export interface ITagOption {
@@ -133,6 +134,9 @@ export interface ExtendConfig {
 export interface ITagContext {
     toggle: (status?: boolean) => void;
 }
+export interface SelectedCategoryEvent {
+    tag: ICategorySearchTagItem;
+}
 export declare const categorySearchProps: {
     category: {
         type: PropType<ICategorySearchTagItem[]>;
@@ -209,6 +213,13 @@ export declare const categorySearchProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    collapseTags: {
+        type: (BooleanConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    collapseTagsTooltip: {
+        type: PropType<PopoverProps>;
+    };
 };
 export type CategorySearchProps = ExtractPropTypes<typeof categorySearchProps>;
 export interface CategorySearchInjection {

package/types/category-search/src/composables/use-category-selected-tags.d.ts

@@ -0,0 +1,15 @@
+import type { CategorySearchProps } from '../category-search-types';
+export declare function useCategorySelectedTags(props: CategorySearchProps): {
+    isCollapseTags: import("vue").Ref<boolean, boolean>;
+    collapseTagsCount: import("vue").Ref<number, number>;
+    popoverConfig: import("vue").Ref<{
+        trigger: string;
+        position: string[];
+    }, {
+        trigger: string;
+        position: string[];
+    } | {
+        trigger: string;
+        position: string[];
+    }>;
+};

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

@@ -56,5 +56,9 @@ export declare const flexibleOverlayProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    autoUpdatePosition: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 };
 export type FlexibleOverlayProps = ExtractPropTypes<typeof flexibleOverlayProps>;

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

@@ -8,6 +8,7 @@ export declare const FlexibleOverlay: import("vue").DefineComponent<{
     isArrowCenter: boolean;
     clickEventBubble: boolean;
     fitOriginWidth: boolean;
+    autoUpdatePosition: boolean;
     origin?: HTMLElement | undefined;
     shiftOffset?: number | undefined;
 }, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "positionChange")[], "update:modelValue" | "positionChange", import("vue").PublicProps, Readonly<{
@@ -19,6 +20,7 @@ export declare const FlexibleOverlay: import("vue").DefineComponent<{
     isArrowCenter: boolean;
     clickEventBubble: boolean;
     fitOriginWidth: boolean;
+    autoUpdatePosition: boolean;
     origin?: HTMLElement | undefined;
     shiftOffset?: number | undefined;
 }> & Readonly<{
@@ -33,4 +35,5 @@ export declare const FlexibleOverlay: import("vue").DefineComponent<{
     isArrowCenter: boolean;
     clickEventBubble: boolean;
     fitOriginWidth: boolean;
+    autoUpdatePosition: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue-devui.es.js

@@ -8002,6 +8002,10 @@ const flexibleOverlayProps = {
   fitOriginWidth: {
     type: Boolean,
     default: false
+  },
+  autoUpdatePosition: {
+    type: Boolean,
+    default: false
   }
 };
 function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
@@ -8029,6 +8033,7 @@ function useOverlay(props, emit) {
   const arrowRef = ref();
   const overlayWidth = ref(0);
   let originObserver;
+  let overlayObserver;
   const styles = computed(() => {
     if (fitOriginWidth.value) {
       return { width: overlayWidth.value + "px" };
@@ -8099,6 +8104,15 @@ function useOverlay(props, emit) {
     const originEl = (_b = (_a = props.origin) == null ? void 0 : _a.$el) != null ? _b : props.origin;
     originEl && (originObserver == null ? void 0 : originObserver.unobserve(originEl));
   };
+  const observeOverlay = () => {
+    if (props.autoUpdatePosition && typeof window !== "undefined" && overlayRef.value) {
+      overlayObserver = new window.ResizeObserver(updatePosition);
+      overlayObserver.observe(overlayRef.value);
+    }
+  };
+  const unobserveOverlay = () => {
+    overlayRef.value && (overlayObserver == null ? void 0 : overlayObserver.unobserve(overlayRef.value));
+  };
   watch(
     () => props.modelValue,
     () => {
@@ -8107,10 +8121,12 @@ function useOverlay(props, emit) {
         window.addEventListener("scroll", scrollCallback, true);
         window.addEventListener("resize", updatePosition);
         observeOrigin();
+        nextTick(observeOverlay);
       } else {
         window.removeEventListener("scroll", scrollCallback, true);
         window.removeEventListener("resize", updatePosition);
         unobserveOrigin();
+        unobserveOverlay();
       }
     }
   );
@@ -8118,6 +8134,7 @@ function useOverlay(props, emit) {
     window.removeEventListener("scroll", scrollCallback, true);
     window.removeEventListener("resize", updatePosition);
     unobserveOrigin();
+    unobserveOverlay();
   });
   return { arrowRef, overlayRef, styles, updatePosition };
 }
@@ -14472,7 +14489,6 @@ var Tag = defineComponent({
     } = toRefs(props);
     const tagClass = useClass(props);
     const themeColor = useColor(props);
-    const tagTitle = titleContent.value || "";
     const isDefaultTag = () => !type4.value && !color2.value;
     const handleClick = (e) => {
       emit("click", e);
@@ -14511,7 +14527,7 @@ var Tag = defineComponent({
           color: contentColor.value,
           backgroundColor: checked.value ? themeColor.value : !color2.value ? "" : "var(--devui-base-bg, #ffffff)"
         },
-        "title": tagTitle
+        "title": titleContent.value || ""
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots), closeIconEl()])]);
     };
   }
@@ -14599,6 +14615,13 @@ const categorySearchProps = {
   inputAutofocus: {
     type: Boolean,
     default: true
+  },
+  collapseTags: {
+    type: [Boolean, Number],
+    default: false
+  },
+  collapseTagsTooltip: {
+    type: Object
   }
 };
 const categorySearchInjectionKey = Symbol("d-category-search");
@@ -15397,37 +15420,40 @@ var TextInputMenu = defineComponent({
   props: typeMenuProps,
   emits: ["close"],
   setup(props, ctx2) {
-    const {
-      tag: tag2
-    } = toRefs(props);
+    const formEl = ref();
     const {
       getTextInputValue
     } = inject(categorySearchInjectionKey);
     const formData = reactive({
-      text: tag2.value.value.value
+      text: props.tag.value.value
     });
     const onConfirmClick = () => {
-      getTextInputValue(tag2.value, formData.text);
-      ctx2.emit("close");
+      formEl.value.validate((isValid2) => {
+        if (isValid2) {
+          getTextInputValue(props.tag, formData.text);
+          ctx2.emit("close");
+        }
+      });
     };
     const onCancelClick = () => {
       ctx2.emit("close");
     };
     return () => createVNode(resolveComponent("d-form"), {
+      "ref": formEl,
       "data": formData,
       "pop-position": ["right"]
     }, {
       default: () => [createVNode(resolveComponent("d-form-item"), {
         "field": "text",
-        "rules": tag2.value.validateRules
+        "rules": props.tag.validateRules
       }, {
         default: () => [createVNode(resolveComponent("d-input"), {
           "modelValue": formData.text,
           "onUpdate:modelValue": ($event) => formData.text = $event,
           "autocomplete": "off",
           "autofocus": true,
-          "maxlength": tag2.value.maxLength,
-          "placeholder": tag2.value.placeholder || ""
+          "maxlength": props.tag.maxLength,
+          "placeholder": props.tag.placeholder || ""
         }, null)]
       }), createVNode("div", {
         "class": "dp-dropdown-operation-area"
@@ -15980,6 +16006,7 @@ function useCategorySearch(props, ctx2) {
       currentSelectTag.value.title = setTitle(currentSelectTag.value, currentSelectTag.value.type || "", "");
       inputRef.value.openMenu();
       props.inputAutofocus && inputRef.value.focus();
+      ctx2.emit("selectedCategory", { tag: item });
     }, DROPDOWN_ANIMATION_TIMEOUT);
   };
   const searchKeyChangeEvent = (event) => {
@@ -16012,6 +16039,7 @@ function useCategorySearch(props, ctx2) {
     innerSearchKey.value = "";
     inputRef.value.closeMenu();
     chooseCategory(tag2);
+    ctx2.emit("selectedCategory", { tag: tag2 });
     setTimeout(() => {
       isFocus.value = true;
       enterSearch.value = false;
@@ -16457,11 +16485,44 @@ function useCategorySearch(props, ctx2) {
     onSearch
   };
 }
+function useCategorySelectedTags(props) {
+  const isCollapseTags = ref(false);
+  const collapseTagsCount = ref(0);
+  const defaultPopoverConfig = {
+    trigger: "hover",
+    position: ["top", "bottom"]
+  };
+  const popoverConfig = ref(defaultPopoverConfig);
+  watch(
+    () => props.collapseTags,
+    (val) => {
+      if (typeof val === "boolean") {
+        isCollapseTags.value = val;
+        collapseTagsCount.value = val ? 1 : 0;
+      }
+      if (typeof val === "number") {
+        isCollapseTags.value = true;
+        collapseTagsCount.value = val;
+      }
+    },
+    { immediate: true }
+  );
+  watch(
+    () => props.collapseTagsTooltip,
+    (val) => {
+      if (val) {
+        popoverConfig.value = { ...defaultPopoverConfig, ...val };
+      }
+    },
+    { immediate: true }
+  );
+  return { isCollapseTags, collapseTagsCount, popoverConfig };
+}
 var categorySearch = "";
 var CategorySearch = defineComponent({
   name: "DCategorySearch",
   props: categorySearchProps,
-  emits: ["search", "selectedTagsChange", "createFilter", "clearAll", "searchKeyChange"],
+  emits: ["search", "selectedTagsChange", "selectedCategory", "createFilter", "clearAll", "searchKeyChange"],
   setup(props, ctx2) {
     const {
       rootRef,
@@ -16475,6 +16536,11 @@ var CategorySearch = defineComponent({
       operationConfig,
       onSearch
     } = useCategorySearch(props, ctx2);
+    const {
+      isCollapseTags,
+      collapseTagsCount,
+      popoverConfig
+    } = useCategorySelectedTags(props);
     return () => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
       return createVNode("div", {
@@ -16490,10 +16556,31 @@ var CategorySearch = defineComponent({
         "class": "dp-category-search-line-container"
       }, [createVNode("ul", {
         "class": "dp-category-search-line"
-      }, [innerSelectedTags.value.map((item) => createVNode(CategorySearchTagDropdown, {
-        "item": item,
-        "isJoinLabelType": joinLabelTypes.includes(item.type || "")
-      }, null)), createVNode(CategorySearchInput, {
+      }, [innerSelectedTags.value.map((item, index2) => {
+        if (isCollapseTags.value) {
+          return index2 < collapseTagsCount.value && createVNode(CategorySearchTagDropdown, {
+            "item": item,
+            "isJoinLabelType": joinLabelTypes.includes(item.type || "")
+          }, null);
+        } else {
+          return createVNode(CategorySearchTagDropdown, {
+            "item": item,
+            "isJoinLabelType": joinLabelTypes.includes(item.type || "")
+          }, null);
+        }
+      }), isCollapseTags.value && innerSelectedTags.value.length > collapseTagsCount.value && createVNode(Popover, mergeProps({
+        "auto-update-position": true
+      }, popoverConfig.value), {
+        default: () => createVNode(Tag, {
+          "deletable": false
+        }, {
+          default: () => [`+${innerSelectedTags.value.length - collapseTagsCount.value}`]
+        }),
+        content: () => innerSelectedTags.value.map((item, index2) => index2 >= collapseTagsCount.value && createVNode(CategorySearchTagDropdown, {
+          "item": item,
+          "isJoinLabelType": joinLabelTypes.includes(item.type || "")
+        }, null))
+      }), createVNode(CategorySearchInput, {
         "ref": inputRef
       }, null)])]), showExtendedConfig.value && createVNode("div", {
         "class": "dp-category-search-extended-container"