feat(CategorySearch): 选择项较多时，支持折叠

Author: xingyan

packages/devui-vue/devui/category-search/src/category-search-types.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';
@@ -131,6 +132,9 @@ export interface ExtendConfig {
 export interface ITagContext {
   toggle: (status?: boolean) => void;
 }
+export interface SelectedCategoryEvent {
+  tag: ICategorySearchTagItem;
+}
 
 export const categorySearchProps = {
   category: {
@@ -190,7 +194,7 @@ export const categorySearchProps = {
       filterTitle: '',
       labelConnector: '|',
       noCategoriesAvailable: '',
-      tagMenuEmpty: ''
+      tagMenuEmpty: '',
     }),
   },
   extendConfig: {
@@ -202,12 +206,19 @@ export const categorySearchProps = {
   },
   appendToBody: {
     type: Boolean,
-    default: true
+    default: true,
   },
   inputAutofocus: {
     type: Boolean,
-    default: true
-  }
+    default: true,
+  },
+  collapseTags: {
+    type: [Boolean, Number],
+    default: false,
+  },
+  collapseTagsTooltip: {
+    type: Object as PropType<PopoverProps>,
+  },
 };
 export type CategorySearchProps = ExtractPropTypes<typeof categorySearchProps>;
 

packages/devui-vue/devui/category-search/src/category-search.tsx

@@ -9,12 +9,15 @@ import CategorySearchMore from './components/category-search-more';
 import { categorySearchProps } from './category-search-types';
 import type { CategorySearchProps } from './category-search-types';
 import { useCategorySearch } from './composables/use-category-search';
+import { useCategorySelectedTags } from './composables/use-category-selected-tags';
+import { Popover } from '../../popover';
+import { Tag } from '../../tag';
 import './category-search.scss';
 
 export default defineComponent({
   name: 'DCategorySearch',
   props: categorySearchProps,
-  emits: ['search', 'selectedTagsChange', 'createFilter', 'clearAll', 'searchKeyChange'],
+  emits: ['search', 'selectedTagsChange', 'selectedCategory', 'createFilter', 'clearAll', 'searchKeyChange'],
   setup(props: CategorySearchProps, ctx: SetupContext) {
     const {
       rootRef,
@@ -28,6 +31,7 @@ export default defineComponent({
       operationConfig,
       onSearch,
     } = useCategorySearch(props, ctx);
+    const { isCollapseTags, collapseTagsCount, popoverConfig } = useCategorySelectedTags(props);
 
     return () => (
       <div
@@ -42,9 +46,31 @@ export default defineComponent({
         )}
         <div ref={scrollBarRef} class="dp-category-search-line-container">
           <ul class="dp-category-search-line">
-            {innerSelectedTags.value.map((item) => (
-              <CategorySearchTagDropdown item={item} isJoinLabelType={joinLabelTypes.includes(item.type || '')} />
-            ))}
+            {innerSelectedTags.value.map((item, index) => {
+              if (isCollapseTags.value) {
+                return (
+                  index < collapseTagsCount.value && (
+                    <CategorySearchTagDropdown item={item} isJoinLabelType={joinLabelTypes.includes(item.type || '')} />
+                  )
+                );
+              } else {
+                return <CategorySearchTagDropdown item={item} isJoinLabelType={joinLabelTypes.includes(item.type || '')} />;
+              }
+            })}
+            {isCollapseTags.value && innerSelectedTags.value.length > collapseTagsCount.value && (
+              <Popover auto-update-position {...popoverConfig.value}>
+                {{
+                  default: () => <Tag deletable={false}>{`+${innerSelectedTags.value.length - collapseTagsCount.value}`}</Tag>,
+                  content: () =>
+                    innerSelectedTags.value.map(
+                      (item, index) =>
+                        index >= collapseTagsCount.value && (
+                          <CategorySearchTagDropdown item={item} isJoinLabelType={joinLabelTypes.includes(item.type || '')} />
+                        )
+                    ),
+                }}
+              </Popover>
+            )}
             <CategorySearchInput ref={inputRef} />
           </ul>
         </div>

packages/devui-vue/devui/category-search/src/composables/use-category-search.ts

@@ -38,7 +38,7 @@ export function useCategorySearch(props: CategorySearchProps, ctx: SetupContext)
     showSearchCategory,
     filterNameRules,
     extendConfig,
-    appendToBody
+    appendToBody,
   } = toRefs(props);
   const innerCategory: Ref<ICategorySearchTagItem[]> = ref([]);
   const innerSelectedTags: Ref<ICategorySearchTagItem[]> = ref([]);
@@ -210,6 +210,7 @@ export function useCategorySearch(props: CategorySearchProps, ctx: SetupContext)
       currentSelectTag.value.title = setTitle(currentSelectTag.value, currentSelectTag.value.type || '', '');
       inputRef.value.openMenu();
       props.inputAutofocus && inputRef.value.focus();
+      ctx.emit('selectedCategory', { tag: item });
     }, DROPDOWN_ANIMATION_TIMEOUT);
   };
 
@@ -250,6 +251,7 @@ export function useCategorySearch(props: CategorySearchProps, ctx: SetupContext)
     innerSearchKey.value = '';
     inputRef.value.closeMenu();
     chooseCategory(tag);
+    ctx.emit('selectedCategory', { tag });
     setTimeout(() => {
       isFocus.value = true;
       enterSearch.value = false;

packages/devui-vue/devui/category-search/src/composables/use-category-selected-tags.ts

@@ -0,0 +1,39 @@
+import { ref, watch } from 'vue';
+import type { CategorySearchProps } from '../category-search-types';
+
+export function useCategorySelectedTags(props: CategorySearchProps) {
+  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 };
+}

packages/devui-vue/devui/overlay/src/flexible-overlay/flexible-overlay-types.ts

@@ -69,6 +69,10 @@ export const flexibleOverlayProps = {
     type: Boolean,
     default: false,
   },
+  autoUpdatePosition: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export type FlexibleOverlayProps = ExtractPropTypes<typeof flexibleOverlayProps>;

packages/devui-vue/devui/overlay/src/flexible-overlay/use-flexible-overlay.ts

@@ -29,6 +29,7 @@ export function useOverlay(props: FlexibleOverlayProps, emit: EmitEventFn) {
   const arrowRef = ref<HTMLElement | undefined>();
   const overlayWidth = ref(0);
   let originObserver: ResizeObserver;
+  let overlayObserver: ResizeObserver;
 
   const styles = computed(() => {
     if (fitOriginWidth.value) {
@@ -104,6 +105,17 @@ export function useOverlay(props: FlexibleOverlayProps, emit: EmitEventFn) {
     originEl && 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?.unobserve(overlayRef.value);
+  };
+
   watch(
     () => props.modelValue,
     () => {
@@ -112,17 +124,20 @@ export function useOverlay(props: FlexibleOverlayProps, emit: EmitEventFn) {
         window.addEventListener('scroll', scrollCallback, true);
         window.addEventListener('resize', updatePosition);
         observeOrigin();
+        nextTick(observeOverlay);
       } else {
         window.removeEventListener('scroll', scrollCallback, true);
         window.removeEventListener('resize', updatePosition);
         unobserveOrigin();
+        unobserveOverlay();
       }
     }
   );
   onUnmounted(() => {
     window.removeEventListener('scroll', scrollCallback, true);
     window.removeEventListener('resize', updatePosition);
     unobserveOrigin();
+    unobserveOverlay();
   });
 
   return { arrowRef, overlayRef, styles, updatePosition };