vue-devui 1.6.14 → 1.6.16

package/breadcrumb/index.es.js

@@ -18,7 +18,7 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { toRefs, watch, onMounted, onUnmounted, ref, computed, defineComponent, createVNode, Transition, mergeProps, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, provide, Teleport, vShow, getCurrentInstance, onBeforeUnmount, resolveComponent } from "vue";
-import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
+import { offset, flip, arrow, computePosition } from "@floating-ui/dom";
 const breadcrumbProps = {
   source: {
     type: Array,
@@ -390,18 +390,12 @@ const flexibleOverlayProps = {
   clickEventBubble: {
     type: Boolean,
     default: false
+  },
+  fitOriginWidth: {
+    type: Boolean,
+    default: false
   }
 };
-function getScrollParent(element) {
-  const overflowRegex = /(auto|scroll|hidden)/;
-  for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
-    const style = window.getComputedStyle(parent);
-    if (overflowRegex.test(style.overflow + style.overflowX + style.overflowY)) {
-      return parent;
-    }
-  }
-  return window;
-}
 function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
   let { x, y } = point;
   if (!isArrowCenter) {
@@ -422,9 +416,18 @@ function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
   return { x, y };
 }
 function useOverlay(props, emit) {
+  const { fitOriginWidth, position, showArrow } = toRefs(props);
   const overlayRef = ref();
   const arrowRef = ref();
-  let originParent = null;
+  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 = {
@@ -445,54 +448,67 @@ function useOverlay(props, emit) {
     const hostEl = props.origin;
     const overlayEl = unref(overlayRef.value);
     const arrowEl = unref(arrowRef.value);
-    const middleware = [
-      offset(props.offset),
-      autoPlacement({
-        alignment: props.align,
-        allowedPlacements: props.position
-      })
-    ];
-    props.showArrow && middleware.push(arrow({ element: arrowEl }));
-    props.shiftOffset !== void 0 && middleware.push(shift());
-    if (!overlayEl) {
-      return;
+    const [mainPosition, ...fallbackPosition] = position.value;
+    const middleware = [offset(props.offset)];
+    middleware.push(fallbackPosition.length ? flip({ fallbackPlacements: fallbackPosition }) : flip());
+    if (showArrow.value) {
+      middleware.push(arrow({ element: arrowRef.value }));
     }
     const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
       strategy: "fixed",
+      placement: mainPosition,
       middleware
     });
     let applyX = x;
     let applyY = y;
-    if (props.shiftOffset !== void 0) {
-      const { x: shiftX, y: shiftY } = middlewareData.shift;
-      shiftX < 0 && (applyX -= props.shiftOffset);
-      shiftX > 0 && (applyX += props.shiftOffset);
-      shiftY < 0 && (applyY -= props.shiftOffset);
-      shiftY > 0 && (applyY += props.shiftOffset);
-    }
     emit("positionChange", placement);
     Object.assign(overlayEl.style, { top: `${applyY}px`, left: `${applyX}px` });
     props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
   };
+  const scrollCallback = (e) => {
+    var _a, _b;
+    const scrollElement = e.target;
+    if (scrollElement == null ? void 0 : scrollElement.contains((_b = (_a = props.origin) == null ? void 0 : _a.$el) != null ? _b : props.origin)) {
+      updatePosition();
+    }
+  };
+  const updateWidth = (originEl) => {
+    overlayWidth.value = originEl.getBoundingClientRect().width;
+    updatePosition();
+  };
+  const observeOrigin = () => {
+    var _a, _b;
+    if (fitOriginWidth.value && typeof window !== "undefined") {
+      const originEl = (_b = (_a = props.origin) == null ? void 0 : _a.$el) != null ? _b : props.origin;
+      if (originEl) {
+        originObserver = new window.ResizeObserver(() => updateWidth(originEl));
+        originObserver.observe(originEl);
+      }
+    }
+  };
+  const unobserveOrigin = () => {
+    var _a, _b;
+    const originEl = (_b = (_a = props.origin) == null ? void 0 : _a.$el) != null ? _b : props.origin;
+    originEl && (originObserver == null ? void 0 : originObserver.unobserve(originEl));
+  };
   watch(() => props.modelValue, () => {
     if (props.modelValue && props.origin) {
-      originParent = getScrollParent(props.origin);
       nextTick(updatePosition);
-      originParent == null ? void 0 : originParent.addEventListener("scroll", updatePosition);
-      originParent !== window && window.addEventListener("scroll", updatePosition);
+      window.addEventListener("scroll", scrollCallback, true);
       window.addEventListener("resize", updatePosition);
+      observeOrigin();
     } else {
-      originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
-      originParent !== window && window.removeEventListener("scroll", updatePosition);
+      window.removeEventListener("scroll", scrollCallback, true);
       window.removeEventListener("resize", updatePosition);
+      unobserveOrigin();
     }
   });
   onUnmounted(() => {
-    originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
-    originParent !== window && window.removeEventListener("scroll", updatePosition);
+    window.removeEventListener("scroll", scrollCallback, true);
     window.removeEventListener("resize", updatePosition);
+    unobserveOrigin();
   });
-  return { arrowRef, overlayRef, updatePosition };
+  return { arrowRef, overlayRef, styles, updatePosition };
 }
 var flexibleOverlay = "";
 const FlexibleOverlay = defineComponent({
@@ -513,6 +529,7 @@ const FlexibleOverlay = defineComponent({
     const {
       arrowRef,
       overlayRef,
+      styles,
       updatePosition
     } = useOverlay(props, emit);
     expose({
@@ -522,7 +539,8 @@ const FlexibleOverlay = defineComponent({
       var _a;
       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"])

package/breadcrumb/index.umd.js

@@ -1 +1 @@
-var de=Object.defineProperty,ue=Object.defineProperties;var fe=Object.getOwnPropertyDescriptors;var _=Object.getOwnPropertySymbols;var me=Object.prototype.hasOwnProperty,pe=Object.prototype.propertyIsEnumerable;var F=(f,e,h)=>e in f?de(f,e,{enumerable:!0,configurable:!0,writable:!0,value:h}):f[e]=h,z=(f,e)=>{for(var h in e||(e={}))me.call(e,h)&&F(f,h,e[h]);if(_)for(var h of _(e))pe.call(e,h)&&F(f,h,e[h]);return f},H=(f,e)=>ue(f,fe(e));(function(f,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("@floating-ui/dom")):typeof define=="function"&&define.amd?define(["exports","vue","@floating-ui/dom"],e):(f=typeof globalThis!="undefined"?globalThis:f||self,e(f.index={},f.Vue,f.dom))})(this,function(f,e,h){"use strict";const I={source:{type:Array,default:[]},separatorIcon:{type:String}},R={showMenu:{type:Boolean,default:!1},menuList:{type:Array},isSearch:{type:Boolean,dafault:!1},to:{type:[String,Object],default:""},replace:{type:Boolean,default:!1}};function x(t,n,o){let a=t;return n&&(a+=`__${n}`),o&&(a+=`--${o}`),a}function L(t,n=!1){const o=n?`.devui-${t}`:`devui-${t}`;return{b:()=>x(o),e:c=>c?x(o,c):"",m:c=>c?x(o,"",c):"",em:(c,r)=>c&&r?x(o,c,r):""}}var ge="";const U={visible:{type:Boolean,default:!1},trigger:{type:String,default:"click"},closeScope:{type:String,default:"all"},position:{type:Array,default:["bottom"]},align:{type:String,default:null},offset:{type:[Number,Object],default:4},shiftOffset:{type:Number},closeOnMouseLeaveMenu:{type:Boolean,default:!1},showAnimation:{type:Boolean,default:!0},overlayClass:{type:String,default:""},destroyOnHide:{type:Boolean,default:!0},teleport:{type:[String,Object],default:"body"}},D=Symbol("popper-trigger");function Y(t){return t instanceof Element?t:t&&typeof t=="object"&&t.$el instanceof Element?t.$el:null}const E=new Map;function P(t,n,o){return t==null||t.addEventListener(n,o),()=>{t==null||t.removeEventListener(n,o)}}const q=({id:t,isOpen:n,origin:o,dropdownRef:a,props:l,emit:s})=>{let i=!1,c=!1;const{trigger:r,closeScope:d,closeOnMouseLeaveMenu:y}=e.toRefs(l),m=g=>{n.value=g,s("toggle",n.value)},v=async(g,b)=>{await new Promise(u=>setTimeout(u,50)),!(g==="origin"&&i||g==="dropdown"&&c)&&(b&&[...E.values()].reverse().forEach(u=>{setTimeout(()=>{var p;(p=u.toggle)==null||p.call(u)},0)}),m(!1))};e.watch([r,o,a],([g,b,u],p,O)=>{const V=Y(b),T=[];setTimeout(()=>{T.push(P(document,"click",w=>{w.stopPropagation();const N=[...E.values()];!n.value||d.value==="none"||(u==null?void 0:u.contains(w.target))&&d.value==="blank"||N.some(k=>{var C;return(C=k.toggleEl)==null?void 0:C.contains(w.target)})&&N.some(k=>{var C;return(C=k.menuEl)==null?void 0:C.contains(w.target)})||([...E.values()].reverse().forEach(k=>{setTimeout(()=>{var C,A;((C=k.toggleEl)==null?void 0:C.contains(w.target))||(A=k.toggle)==null||A.call(k)},0)}),i=!1)}))},0),g==="click"?T.push(P(V,"click",()=>m(!n.value)),P(u,"mouseleave",w=>{var N;y.value&&!((N=E.get(t).child)==null?void 0:N.contains(w.relatedTarget))&&v("dropdown",!0)})):g==="hover"&&T.push(P(V,"mouseenter",()=>{c=!0,m(!0)}),P(V,"mouseleave",()=>{c=!1,v("origin")}),P(u,"mouseenter",()=>{i=!0,n.value=!0}),P(u,"mouseleave",w=>{var N;i=!1,!(w.relatedTarget&&((V==null?void 0:V.contains(w.relatedTarget))||((N=E.get(t).child)==null?void 0:N.contains(w.relatedTarget))))&&v("dropdown",!0)})),O(()=>T.forEach(w=>w()))})};function X(t,n,o,a,l,s){e.watch(n,(i,c)=>{c!==void 0&&(o.value=i,s("toggle",o.value))},{immediate:!0}),e.watch([o,l],([i,c])=>{var r;if(i){E.set(t,H(z({},E.get(t)),{menuEl:c,toggle:()=>{o.value=!1,s("toggle",o.value)}}));for(const d of E.values())((r=d.menuEl)==null?void 0:r.contains(a.value))&&(d.child=c)}}),e.onMounted(()=>{E.set(t,{toggleEl:a.value})}),e.onUnmounted(()=>{E.delete(t)})}function G(t,n,o){const{showAnimation:a,overlayClass:l,destroyOnHide:s}=e.toRefs(t),i=e.ref(!1),c=e.ref(!1),r=e.computed(()=>({transformOrigin:n.value==="top"?"0% 100%":"0% 0%",zIndex:"var(--devui-z-index-dropdown, 1052)"})),d=e.computed(()=>({"fade-in-bottom":a.value&&o.value&&n.value==="bottom","fade-in-top":a.value&&o.value&&n.value==="top",[`${l.value}`]:!0})),y=m=>{n.value=m.includes("top")||m.includes("right-end")||m.includes("left-end")?"top":"bottom"};return e.watch(o,m=>{i.value=s.value?m:!0,c.value=m}),{overlayModelValue:i,overlayShowValue:c,styles:r,classes:d,handlePositionChange:y}}const K={modelValue:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0}};function J(){if(document.documentElement.scrollHeight>document.documentElement.clientHeight){const t=document.documentElement.scrollTop,n=document.documentElement.getAttribute("style");return document.documentElement.style.position="fixed",document.documentElement.style.top=`-${t}px`,document.documentElement.style.width=document.documentElement.style.width||"100%",document.documentElement.style.overflowY="scroll",()=>{n?document.documentElement.setAttribute("style",n):document.documentElement.removeAttribute("style"),document.documentElement.scrollTop=t}}}function Q(t,n){let o;const a=s=>{s.preventDefault(),n.emit("click",s),t.closeOnClickOverlay&&n.emit("update:modelValue",!1)},l=()=>{o==null||o()};return e.watch(()=>t.modelValue,s=>{s?t.lockScroll&&(o=J()):l()}),e.onUnmounted(l),{onClick:a}}var ye="";e.defineComponent({name:"DFixedOverlay",inheritAttrs:!1,props:K,emits:["update:modelValue","click"],setup(t,n){const{modelValue:o}=e.toRefs(t),a=L("fixed-overlay"),{onClick:l}=Q(t,n);return()=>e.createVNode(e.Transition,{name:a.m("fade")},{default:()=>{var s,i;return[o.value&&e.createVNode("div",e.mergeProps({class:a.b()},n.attrs,{onClick:l}),[(i=(s=n.slots).default)==null?void 0:i.call(s)])]}})}});const W={modelValue:{type:Boolean,default:!1},origin:{type:Object,require:!0},position:{type:Array,default:["bottom"]},offset:{type:[Number,Object],default:8},shiftOffset:{type:Number},align:{type:String,default:null},showArrow:{type:Boolean,default:!1},isArrowCenter:{type:Boolean,default:!0},clickEventBubble:{type:Boolean,default:!1}};function Z(t){const n=/(auto|scroll|hidden)/;for(let o=t;o=o.parentElement;o.parentElement!==document.body){const a=window.getComputedStyle(o);if(n.test(a.overflow+a.overflowX+a.overflowY))return o}return window}function ee(t,n,o,a){let{x:l,y:s}=n;if(!t){const{width:i,height:c}=a;l&&o.includes("start")&&(l=12),l&&o.includes("end")&&(l=Math.round(i-24)),s&&o.includes("start")&&(s=10),s&&o.includes("end")&&(s=c-14)}return{x:l,y:s}}function te(t,n){const o=e.ref(),a=e.ref();let l=null;const s=(c,r,d,y)=>{const{x:m,y:v}=ee(t.isArrowCenter,d,r,y.getBoundingClientRect()),g={top:"bottom",right:"left",bottom:"top",left:"right"}[r.split("-")[0]];Object.assign(c.style,{left:m?`${m}px`:"",top:v?`${v}px`:"",right:"",bottom:"",[g]:"-4px"})},i=async()=>{const c=t.origin,r=e.unref(o.value),d=e.unref(a.value),y=[h.offset(t.offset),h.autoPlacement({alignment:t.align,allowedPlacements:t.position})];if(t.showArrow&&y.push(h.arrow({element:d})),t.shiftOffset!==void 0&&y.push(h.shift()),!r)return;const{x:m,y:v,placement:g,middlewareData:b}=await h.computePosition(c,r,{strategy:"fixed",middleware:y});let u=m,p=v;if(t.shiftOffset!==void 0){const{x:O,y:V}=b.shift;O<0&&(u-=t.shiftOffset),O>0&&(u+=t.shiftOffset),V<0&&(p-=t.shiftOffset),V>0&&(p+=t.shiftOffset)}n("positionChange",g),Object.assign(r.style,{top:`${p}px`,left:`${u}px`}),t.showArrow&&s(d,g,b.arrow,r)};return e.watch(()=>t.modelValue,()=>{t.modelValue&&t.origin?(l=Z(t.origin),e.nextTick(i),l==null||l.addEventListener("scroll",i),l!==window&&window.addEventListener("scroll",i),window.addEventListener("resize",i)):(l==null||l.removeEventListener("scroll",i),l!==window&&window.removeEventListener("scroll",i),window.removeEventListener("resize",i))}),e.onUnmounted(()=>{l==null||l.removeEventListener("scroll",i),l!==window&&window.removeEventListener("scroll",i),window.removeEventListener("resize",i)}),{arrowRef:a,overlayRef:o,updatePosition:i}}var he="";const ne=e.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:W,emits:["update:modelValue","positionChange"],setup(t,{slots:n,attrs:o,emit:a,expose:l}){const s=L("flexible-overlay"),{clickEventBubble:i}=e.toRefs(t),{arrowRef:c,overlayRef:r,updatePosition:d}=te(t,a);return l({updatePosition:d}),()=>{var y;return t.modelValue&&e.createVNode("div",e.mergeProps({ref:r,class:s.b()},o,{onClick:e.withModifiers(()=>({}),[i.value?"":"stop"]),onPointerup:e.withModifiers(()=>({}),["stop"])}),[(y=n.default)==null?void 0:y.call(n),t.showArrow&&e.createVNode("div",{ref:c,class:s.e("arrow")},null)])}}}),oe=t=>t!==null&&typeof t=="object",re=L("popper-trigger");function $(t){return e.h("span",{class:re.b()},t)}function j(t){for(const n of t){if(oe(n)){if(n.type===e.Comment)continue;return n.type==="svg"||n.type===e.Text?$(n):n.type===e.Fragment?j(n.children):n}return $(n)}return null}var ae=e.defineComponent({name:"DPopperTrigger",setup(t,n){const{slots:o,attrs:a}=n;return()=>{var c;const l=(c=o.default)==null?void 0:c.call(o,a),s=e.inject(D);if(!l)return null;const i=j(l);return i?e.withDirectives(e.cloneVNode(i,a),[[{mounted(r){s.value=r},updated(r){s.value=r},unmounted(){s.value=null}}]]):null}}}),we="";let le=1;var ie=e.defineComponent({name:"DDropdown",inheritAttrs:!1,props:U,emits:["toggle"],setup(t,{slots:n,attrs:o,emit:a,expose:l}){const{visible:s,position:i,align:c,offset:r,destroyOnHide:d,shiftOffset:y,showAnimation:m,teleport:v}=e.toRefs(t),g=e.ref(),b=e.ref(),u=e.ref(),p=`dropdown_${le++}`,O=e.ref(!1),V=e.ref("bottom"),T=L("dropdown");e.provide(D,g),q({id:p,isOpen:O,origin:g,dropdownRef:b,props:t,emit:a}),X(p,s,O,g,b,a);const{overlayModelValue:w,overlayShowValue:N,styles:k,classes:C,handlePositionChange:A}=G(t,V,O);return e.watch(N,B=>{e.nextTick(()=>{!d.value&&B&&u.value.updatePosition()})}),l({updatePosition:()=>u.value.updatePosition()}),()=>e.createVNode(e.Fragment,null,[e.createVNode(ae,null,{default:()=>{var B;return[(B=n.default)==null?void 0:B.call(n)]}}),e.createVNode(e.Teleport,{to:v.value},{default:()=>[e.createVNode(e.Transition,{name:m.value?T.m(`fade-${V.value}`):""},{default:()=>[e.withDirectives(e.createVNode(ne,{modelValue:w.value,"onUpdate:modelValue":B=>w.value=B,ref:u,origin:g.value,position:i.value,align:c.value,offset:r.value,shiftOffset:y==null?void 0:y.value,onPositionChange:A,"click-event-bubble":!0,class:C.value,style:k.value},{default:()=>{var B;return[e.createVNode("div",e.mergeProps({ref:b,class:T.e("menu-wrap")},o),[(B=n.menu)==null?void 0:B.call(n)])]}}),[[e.vShow,N.value]])]})]})])}}),S=e.defineComponent({name:"DBreadcrumbItem",components:{DDropdown:ie},props:R,setup(t,{slots:n}){var b;const o=e.inject("separatorIcon"),a=L("breadcrumb"),l=t.to?"is-link":"",s=t.showMenu&&((b=t.menuList)==null?void 0:b.length)?a.e("dropdown-title"):"",i=e.ref(null),c=e.getCurrentInstance(),r=c==null?void 0:c.appContext.config.globalProperties.$router,d=e.ref(t.showMenu),y=e.ref(t.menuList||[]),m=()=>{!t.to||!r||(t.replace?r.replace(t.to):r.push(t.to))};e.onMounted(()=>{var u;(u=i.value)==null||u.addEventListener("click",m)}),e.onBeforeUnmount(()=>{var u;(u=i.value)==null||u.removeEventListener("click",m)});const v=()=>e.createVNode("span",{class:a.e("separator")},[o]),g=()=>{var u;return d.value?e.createVNode("div",{class:a.e("item")},[e.createVNode(e.resolveComponent("d-dropdown"),{trigger:"hover","close-scope":"blank"},{default:()=>{var p;return[e.createVNode("span",{class:[l,s]},[(p=n==null?void 0:n.default)==null?void 0:p.call(n),e.createVNode("span",{class:"icon icon-chevron-down"},null)])]},menu:()=>e.createVNode("ul",{class:a.e("item-dropdown")},[y.value.map(p=>p.link?e.createVNode("a",{href:p.link,target:p.target?p.target:"_self"},[e.createVNode("li",{class:a.e("item-dropdown-item")},[p.title])]):e.createVNode("li",{class:a.e("item-dropdown-item")},[e.createVNode("span",{class:l},[p.title])]))])})]):e.createVNode("div",{class:a.e("item")},[e.createVNode("span",{ref:i,class:l},[(u=n==null?void 0:n.default)==null?void 0:u.call(n)]),v()])};return()=>g()}});function ce(t,n,o="default"){var a,l;return(l=n[o])!=null?l:(a=t[o])==null?void 0:a.call(t)}var be="",M=e.defineComponent({name:"DBreadcrumb",components:{DBreadcrumbItem:S},props:I,setup(t,{slots:n}){var c;const o=(c=ce(n,t,"separatorIcon"))!=null?c:"/";e.provide("separatorIcon",o);const a=L("breadcrumb"),l=r=>e.createVNode(e.resolveComponent("d-breadcrumb-item"),{to:`path: ${r.link}`,replace:r.replace},{default:()=>[r.title]}),s=r=>e.createVNode(e.resolveComponent("d-breadcrumb-item"),{menuList:r.children,showMenu:r.showMenu,to:`path: ${r.link}`,replace:r.replace},{default:()=>[!r.noNavigation&&(!r.linkType||r.linkType==="hrefLink")?e.createVNode("a",{href:r.link,target:r.target?r.target:"_self"},[r.title]):null,r.noNavigation?e.createVNode("span",null,[r.title]):null]}),i=r=>r.map(d=>!d.noNavigation&&d.linkType==="routerLink"?l(d):d.children&&d.children.length>0?s(d):e.createVNode(e.resolveComponent("d-breadcrumb-item"),null,{default:()=>[!d.noNavigation&&(!d.linkType||d.linkType==="hrefLink")?e.createVNode("a",{href:d.link,target:d.target?d.target:"_self"},[d.title]):null,d.noNavigation?e.createVNode("span",null,[d.title]):null]}));return()=>{var r;return e.createVNode("div",{class:a.b()},[t.source&&t.source.length?i(t.source):(r=n==null?void 0:n.default)==null?void 0:r.call(n)])}}}),se={title:"Breadcrumb \u9762\u5305\u5C51",category:"\u5BFC\u822A",status:"100%",install(t){t.component(M.name,M),t.component(S.name,S)}};f.Breadcrumb=M,f.BreadcrumbItem=S,f.breadcrumbItemProps=R,f.breadcrumbProps=I,f.default=se,Object.defineProperty(f,"__esModule",{value:!0}),f[Symbol.toStringTag]="Module"});
+var de=Object.defineProperty,fe=Object.defineProperties;var me=Object.getOwnPropertyDescriptors;var _=Object.getOwnPropertySymbols;var pe=Object.prototype.hasOwnProperty,ge=Object.prototype.propertyIsEnumerable;var F=(p,e,w)=>e in p?de(p,e,{enumerable:!0,configurable:!0,writable:!0,value:w}):p[e]=w,z=(p,e)=>{for(var w in e||(e={}))pe.call(e,w)&&F(p,w,e[w]);if(_)for(var w of _(e))ge.call(e,w)&&F(p,w,e[w]);return p},H=(p,e)=>fe(p,me(e));(function(p,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("@floating-ui/dom")):typeof define=="function"&&define.amd?define(["exports","vue","@floating-ui/dom"],e):(p=typeof globalThis!="undefined"?globalThis:p||self,e(p.index={},p.Vue,p.dom))})(this,function(p,e,w){"use strict";const I={source:{type:Array,default:[]},separatorIcon:{type:String}},R={showMenu:{type:Boolean,default:!1},menuList:{type:Array},isSearch:{type:Boolean,dafault:!1},to:{type:[String,Object],default:""},replace:{type:Boolean,default:!1}};function L(t,n,o){let a=t;return n&&(a+=`__${n}`),o&&(a+=`--${o}`),a}function A(t,n=!1){const o=n?`.devui-${t}`:`devui-${t}`;return{b:()=>L(o),e:l=>l?L(o,l):"",m:l=>l?L(o,"",l):"",em:(l,r)=>l&&r?L(o,l,r):""}}var ye="";const U={visible:{type:Boolean,default:!1},trigger:{type:String,default:"click"},closeScope:{type:String,default:"all"},position:{type:Array,default:["bottom"]},align:{type:String,default:null},offset:{type:[Number,Object],default:4},shiftOffset:{type:Number},closeOnMouseLeaveMenu:{type:Boolean,default:!1},showAnimation:{type:Boolean,default:!0},overlayClass:{type:String,default:""},destroyOnHide:{type:Boolean,default:!0},teleport:{type:[String,Object],default:"body"}},$=Symbol("popper-trigger");function W(t){return t instanceof Element?t:t&&typeof t=="object"&&t.$el instanceof Element?t.$el:null}const T=new Map;function O(t,n,o){return t==null||t.addEventListener(n,o),()=>{t==null||t.removeEventListener(n,o)}}const q=({id:t,isOpen:n,origin:o,dropdownRef:a,props:c,emit:i})=>{let s=!1,l=!1;const{trigger:r,closeScope:u,closeOnMouseLeaveMenu:N}=e.toRefs(c),m=v=>{n.value=v,i("toggle",n.value)},B=async(v,C)=>{await new Promise(f=>setTimeout(f,50)),!(v==="origin"&&s||v==="dropdown"&&l)&&(C&&[...T.values()].reverse().forEach(f=>{setTimeout(()=>{var d;(d=f.toggle)==null||d.call(f)},0)}),m(!1))};e.watch([r,o,a],([v,C,f],d,y)=>{const g=W(C),V=[];setTimeout(()=>{V.push(O(document,"click",h=>{h.stopPropagation();const b=[...T.values()];!n.value||u.value==="none"||(f==null?void 0:f.contains(h.target))&&u.value==="blank"||b.some(k=>{var E;return(E=k.toggleEl)==null?void 0:E.contains(h.target)})&&b.some(k=>{var E;return(E=k.menuEl)==null?void 0:E.contains(h.target)})||([...T.values()].reverse().forEach(k=>{setTimeout(()=>{var E,x;((E=k.toggleEl)==null?void 0:E.contains(h.target))||(x=k.toggle)==null||x.call(k)},0)}),s=!1)}))},0),v==="click"?V.push(O(g,"click",()=>m(!n.value)),O(f,"mouseleave",h=>{var b;N.value&&!((b=T.get(t).child)==null?void 0:b.contains(h.relatedTarget))&&B("dropdown",!0)})):v==="hover"&&V.push(O(g,"mouseenter",()=>{l=!0,m(!0)}),O(g,"mouseleave",()=>{l=!1,B("origin")}),O(f,"mouseenter",()=>{s=!0,n.value=!0}),O(f,"mouseleave",h=>{var b;s=!1,!(h.relatedTarget&&((g==null?void 0:g.contains(h.relatedTarget))||((b=T.get(t).child)==null?void 0:b.contains(h.relatedTarget))))&&B("dropdown",!0)})),y(()=>V.forEach(h=>h()))})};function G(t,n,o,a,c,i){e.watch(n,(s,l)=>{l!==void 0&&(o.value=s,i("toggle",o.value))},{immediate:!0}),e.watch([o,c],([s,l])=>{var r;if(s){T.set(t,H(z({},T.get(t)),{menuEl:l,toggle:()=>{o.value=!1,i("toggle",o.value)}}));for(const u of T.values())((r=u.menuEl)==null?void 0:r.contains(a.value))&&(u.child=l)}}),e.onMounted(()=>{T.set(t,{toggleEl:a.value})}),e.onUnmounted(()=>{T.delete(t)})}function Y(t,n,o){const{showAnimation:a,overlayClass:c,destroyOnHide:i}=e.toRefs(t),s=e.ref(!1),l=e.ref(!1),r=e.computed(()=>({transformOrigin:n.value==="top"?"0% 100%":"0% 0%",zIndex:"var(--devui-z-index-dropdown, 1052)"})),u=e.computed(()=>({"fade-in-bottom":a.value&&o.value&&n.value==="bottom","fade-in-top":a.value&&o.value&&n.value==="top",[`${c.value}`]:!0})),N=m=>{n.value=m.includes("top")||m.includes("right-end")||m.includes("left-end")?"top":"bottom"};return e.watch(o,m=>{s.value=i.value?m:!0,l.value=m}),{overlayModelValue:s,overlayShowValue:l,styles:r,classes:u,handlePositionChange:N}}const K={modelValue:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0}};function X(){if(document.documentElement.scrollHeight>document.documentElement.clientHeight){const t=document.documentElement.scrollTop,n=document.documentElement.getAttribute("style");return document.documentElement.style.position="fixed",document.documentElement.style.top=`-${t}px`,document.documentElement.style.width=document.documentElement.style.width||"100%",document.documentElement.style.overflowY="scroll",()=>{n?document.documentElement.setAttribute("style",n):document.documentElement.removeAttribute("style"),document.documentElement.scrollTop=t}}}function J(t,n){let o;const a=i=>{i.preventDefault(),n.emit("click",i),t.closeOnClickOverlay&&n.emit("update:modelValue",!1)},c=()=>{o==null||o()};return e.watch(()=>t.modelValue,i=>{i?t.lockScroll&&(o=X()):c()}),e.onUnmounted(c),{onClick:a}}var he="";e.defineComponent({name:"DFixedOverlay",inheritAttrs:!1,props:K,emits:["update:modelValue","click"],setup(t,n){const{modelValue:o}=e.toRefs(t),a=A("fixed-overlay"),{onClick:c}=J(t,n);return()=>e.createVNode(e.Transition,{name:a.m("fade")},{default:()=>{var i,s;return[o.value&&e.createVNode("div",e.mergeProps({class:a.b()},n.attrs,{onClick:c}),[(s=(i=n.slots).default)==null?void 0:s.call(i)])]}})}});const Q={modelValue:{type:Boolean,default:!1},origin:{type:Object,require:!0},position:{type:Array,default:["bottom"]},offset:{type:[Number,Object],default:8},shiftOffset:{type:Number},align:{type:String,default:null},showArrow:{type:Boolean,default:!1},isArrowCenter:{type:Boolean,default:!0},clickEventBubble:{type:Boolean,default:!1},fitOriginWidth:{type:Boolean,default:!1}};function Z(t,n,o,a){let{x:c,y:i}=n;if(!t){const{width:s,height:l}=a;c&&o.includes("start")&&(c=12),c&&o.includes("end")&&(c=Math.round(s-24)),i&&o.includes("start")&&(i=10),i&&o.includes("end")&&(i=l-14)}return{x:c,y:i}}function ee(t,n){const{fitOriginWidth:o,position:a,showArrow:c}=e.toRefs(t),i=e.ref(),s=e.ref(),l=e.ref(0);let r;const u=e.computed(()=>o.value?{width:l.value+"px"}:{}),N=(d,y,g,V)=>{const{x:h,y:b}=Z(t.isArrowCenter,g,y,V.getBoundingClientRect()),k={top:"bottom",right:"left",bottom:"top",left:"right"}[y.split("-")[0]];Object.assign(d.style,{left:h?`${h}px`:"",top:b?`${b}px`:"",right:"",bottom:"",[k]:"-4px"})},m=async()=>{const d=t.origin,y=e.unref(i.value),g=e.unref(s.value),[V,...h]=a.value,b=[w.offset(t.offset)];b.push(h.length?w.flip({fallbackPlacements:h}):w.flip()),c.value&&b.push(w.arrow({element:s.value}));const{x:k,y:E,placement:x,middlewareData:P}=await w.computePosition(d,y,{strategy:"fixed",placement:V,middleware:b});let se=k,ue=E;n("positionChange",x),Object.assign(y.style,{top:`${ue}px`,left:`${se}px`}),t.showArrow&&N(g,x,P.arrow,y)},B=d=>{var g,V;const y=d.target;(y==null?void 0:y.contains((V=(g=t.origin)==null?void 0:g.$el)!=null?V:t.origin))&&m()},v=d=>{l.value=d.getBoundingClientRect().width,m()},C=()=>{var d,y;if(o.value&&typeof window!="undefined"){const g=(y=(d=t.origin)==null?void 0:d.$el)!=null?y:t.origin;g&&(r=new window.ResizeObserver(()=>v(g)),r.observe(g))}},f=()=>{var y,g;const d=(g=(y=t.origin)==null?void 0:y.$el)!=null?g:t.origin;d&&(r==null||r.unobserve(d))};return e.watch(()=>t.modelValue,()=>{t.modelValue&&t.origin?(e.nextTick(m),window.addEventListener("scroll",B,!0),window.addEventListener("resize",m),C()):(window.removeEventListener("scroll",B,!0),window.removeEventListener("resize",m),f())}),e.onUnmounted(()=>{window.removeEventListener("scroll",B,!0),window.removeEventListener("resize",m),f()}),{arrowRef:s,overlayRef:i,styles:u,updatePosition:m}}var be="";const te=e.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:Q,emits:["update:modelValue","positionChange"],setup(t,{slots:n,attrs:o,emit:a,expose:c}){const i=A("flexible-overlay"),{clickEventBubble:s}=e.toRefs(t),{arrowRef:l,overlayRef:r,styles:u,updatePosition:N}=ee(t,a);return c({updatePosition:N}),()=>{var m;return t.modelValue&&e.createVNode("div",e.mergeProps({ref:r,class:i.b(),style:u.value},o,{onClick:e.withModifiers(()=>({}),[s.value?"":"stop"]),onPointerup:e.withModifiers(()=>({}),["stop"])}),[(m=n.default)==null?void 0:m.call(n),t.showArrow&&e.createVNode("div",{ref:l,class:i.e("arrow")},null)])}}}),ne=t=>t!==null&&typeof t=="object",oe=A("popper-trigger");function D(t){return e.h("span",{class:oe.b()},t)}function j(t){for(const n of t){if(ne(n)){if(n.type===e.Comment)continue;return n.type==="svg"||n.type===e.Text?D(n):n.type===e.Fragment?j(n.children):n}return D(n)}return null}var re=e.defineComponent({name:"DPopperTrigger",setup(t,n){const{slots:o,attrs:a}=n;return()=>{var l;const c=(l=o.default)==null?void 0:l.call(o,a),i=e.inject($);if(!c)return null;const s=j(c);return s?e.withDirectives(e.cloneVNode(s,a),[[{mounted(r){i.value=r},updated(r){i.value=r},unmounted(){i.value=null}}]]):null}}}),we="";let ae=1;var le=e.defineComponent({name:"DDropdown",inheritAttrs:!1,props:U,emits:["toggle"],setup(t,{slots:n,attrs:o,emit:a,expose:c}){const{visible:i,position:s,align:l,offset:r,destroyOnHide:u,shiftOffset:N,showAnimation:m,teleport:B}=e.toRefs(t),v=e.ref(),C=e.ref(),f=e.ref(),d=`dropdown_${ae++}`,y=e.ref(!1),g=e.ref("bottom"),V=A("dropdown");e.provide($,v),q({id:d,isOpen:y,origin:v,dropdownRef:C,props:t,emit:a}),G(d,i,y,v,C,a);const{overlayModelValue:h,overlayShowValue:b,styles:k,classes:E,handlePositionChange:x}=Y(t,g,y);return e.watch(b,P=>{e.nextTick(()=>{!u.value&&P&&f.value.updatePosition()})}),c({updatePosition:()=>f.value.updatePosition()}),()=>e.createVNode(e.Fragment,null,[e.createVNode(re,null,{default:()=>{var P;return[(P=n.default)==null?void 0:P.call(n)]}}),e.createVNode(e.Teleport,{to:B.value},{default:()=>[e.createVNode(e.Transition,{name:m.value?V.m(`fade-${g.value}`):""},{default:()=>[e.withDirectives(e.createVNode(te,{modelValue:h.value,"onUpdate:modelValue":P=>h.value=P,ref:f,origin:v.value,position:s.value,align:l.value,offset:r.value,shiftOffset:N==null?void 0:N.value,onPositionChange:x,"click-event-bubble":!0,class:E.value,style:k.value},{default:()=>{var P;return[e.createVNode("div",e.mergeProps({ref:C,class:V.e("menu-wrap")},o),[(P=n.menu)==null?void 0:P.call(n)])]}}),[[e.vShow,b.value]])]})]})])}}),S=e.defineComponent({name:"DBreadcrumbItem",components:{DDropdown:le},props:R,setup(t,{slots:n}){var C;const o=e.inject("separatorIcon"),a=A("breadcrumb"),c=t.to?"is-link":"",i=t.showMenu&&((C=t.menuList)==null?void 0:C.length)?a.e("dropdown-title"):"",s=e.ref(null),l=e.getCurrentInstance(),r=l==null?void 0:l.appContext.config.globalProperties.$router,u=e.ref(t.showMenu),N=e.ref(t.menuList||[]),m=()=>{!t.to||!r||(t.replace?r.replace(t.to):r.push(t.to))};e.onMounted(()=>{var f;(f=s.value)==null||f.addEventListener("click",m)}),e.onBeforeUnmount(()=>{var f;(f=s.value)==null||f.removeEventListener("click",m)});const B=()=>e.createVNode("span",{class:a.e("separator")},[o]),v=()=>{var f;return u.value?e.createVNode("div",{class:a.e("item")},[e.createVNode(e.resolveComponent("d-dropdown"),{trigger:"hover","close-scope":"blank"},{default:()=>{var d;return[e.createVNode("span",{class:[c,i]},[(d=n==null?void 0:n.default)==null?void 0:d.call(n),e.createVNode("span",{class:"icon icon-chevron-down"},null)])]},menu:()=>e.createVNode("ul",{class:a.e("item-dropdown")},[N.value.map(d=>d.link?e.createVNode("a",{href:d.link,target:d.target?d.target:"_self"},[e.createVNode("li",{class:a.e("item-dropdown-item")},[d.title])]):e.createVNode("li",{class:a.e("item-dropdown-item")},[e.createVNode("span",{class:c},[d.title])]))])})]):e.createVNode("div",{class:a.e("item")},[e.createVNode("span",{ref:s,class:c},[(f=n==null?void 0:n.default)==null?void 0:f.call(n)]),B()])};return()=>v()}});function ie(t,n,o="default"){var a,c;return(c=n[o])!=null?c:(a=t[o])==null?void 0:a.call(t)}var ve="",M=e.defineComponent({name:"DBreadcrumb",components:{DBreadcrumbItem:S},props:I,setup(t,{slots:n}){var l;const o=(l=ie(n,t,"separatorIcon"))!=null?l:"/";e.provide("separatorIcon",o);const a=A("breadcrumb"),c=r=>e.createVNode(e.resolveComponent("d-breadcrumb-item"),{to:`path: ${r.link}`,replace:r.replace},{default:()=>[r.title]}),i=r=>e.createVNode(e.resolveComponent("d-breadcrumb-item"),{menuList:r.children,showMenu:r.showMenu,to:`path: ${r.link}`,replace:r.replace},{default:()=>[!r.noNavigation&&(!r.linkType||r.linkType==="hrefLink")?e.createVNode("a",{href:r.link,target:r.target?r.target:"_self"},[r.title]):null,r.noNavigation?e.createVNode("span",null,[r.title]):null]}),s=r=>r.map(u=>!u.noNavigation&&u.linkType==="routerLink"?c(u):u.children&&u.children.length>0?i(u):e.createVNode(e.resolveComponent("d-breadcrumb-item"),null,{default:()=>[!u.noNavigation&&(!u.linkType||u.linkType==="hrefLink")?e.createVNode("a",{href:u.link,target:u.target?u.target:"_self"},[u.title]):null,u.noNavigation?e.createVNode("span",null,[u.title]):null]}));return()=>{var r;return e.createVNode("div",{class:a.b()},[t.source&&t.source.length?s(t.source):(r=n==null?void 0:n.default)==null?void 0:r.call(n)])}}}),ce={title:"Breadcrumb \u9762\u5305\u5C51",category:"\u5BFC\u822A",status:"100%",install(t){t.component(M.name,M),t.component(S.name,S)}};p.Breadcrumb=M,p.BreadcrumbItem=S,p.breadcrumbItemProps=R,p.breadcrumbProps=I,p.default=ce,Object.defineProperty(p,"__esModule",{value:!0}),p[Symbol.toStringTag]="Module"});

package/category-search/index.es.js

@@ -34,7 +34,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import { createVNode, createTextVNode, toRefs, watch, onMounted, onUnmounted, ref, computed, defineComponent, Transition, mergeProps, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, provide, Teleport, vShow, resolveComponent, reactive, onBeforeUnmount, toRef, resolveDynamicComponent, render, isVNode } from "vue";
-import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
+import { offset, flip, arrow, computePosition } from "@floating-ui/dom";
 import { onClickOutside } from "@vueuse/core";
 import "clipboard";
 function SearchIcon() {
@@ -454,18 +454,12 @@ const flexibleOverlayProps = {
   clickEventBubble: {
     type: Boolean,
     default: false
+  },
+  fitOriginWidth: {
+    type: Boolean,
+    default: false
   }
 };
-function getScrollParent(element) {
-  const overflowRegex = /(auto|scroll|hidden)/;
-  for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
-    const style = window.getComputedStyle(parent);
-    if (overflowRegex.test(style.overflow + style.overflowX + style.overflowY)) {
-      return parent;
-    }
-  }
-  return window;
-}
 function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
   let { x, y } = point;
   if (!isArrowCenter) {
@@ -486,9 +480,18 @@ function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
   return { x, y };
 }
 function useOverlay(props, emit) {
+  const { fitOriginWidth, position, showArrow } = toRefs(props);
   const overlayRef = ref();
   const arrowRef = ref();
-  let originParent = null;
+  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 = {
@@ -509,54 +512,67 @@ function useOverlay(props, emit) {
     const hostEl = props.origin;
     const overlayEl = unref(overlayRef.value);
     const arrowEl = unref(arrowRef.value);
-    const middleware = [
-      offset(props.offset),
-      autoPlacement({
-        alignment: props.align,
-        allowedPlacements: props.position
-      })
-    ];
-    props.showArrow && middleware.push(arrow({ element: arrowEl }));
-    props.shiftOffset !== void 0 && middleware.push(shift());
-    if (!overlayEl) {
-      return;
+    const [mainPosition, ...fallbackPosition] = position.value;
+    const middleware = [offset(props.offset)];
+    middleware.push(fallbackPosition.length ? flip({ fallbackPlacements: fallbackPosition }) : flip());
+    if (showArrow.value) {
+      middleware.push(arrow({ element: arrowRef.value }));
     }
     const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
       strategy: "fixed",
+      placement: mainPosition,
       middleware
     });
     let applyX = x;
     let applyY = y;
-    if (props.shiftOffset !== void 0) {
-      const { x: shiftX, y: shiftY } = middlewareData.shift;
-      shiftX < 0 && (applyX -= props.shiftOffset);
-      shiftX > 0 && (applyX += props.shiftOffset);
-      shiftY < 0 && (applyY -= props.shiftOffset);
-      shiftY > 0 && (applyY += props.shiftOffset);
-    }
     emit("positionChange", placement);
     Object.assign(overlayEl.style, { top: `${applyY}px`, left: `${applyX}px` });
     props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
   };
+  const scrollCallback = (e) => {
+    var _a, _b;
+    const scrollElement = e.target;
+    if (scrollElement == null ? void 0 : scrollElement.contains((_b = (_a = props.origin) == null ? void 0 : _a.$el) != null ? _b : props.origin)) {
+      updatePosition();
+    }
+  };
+  const updateWidth = (originEl) => {
+    overlayWidth.value = originEl.getBoundingClientRect().width;
+    updatePosition();
+  };
+  const observeOrigin = () => {
+    var _a, _b;
+    if (fitOriginWidth.value && typeof window !== "undefined") {
+      const originEl = (_b = (_a = props.origin) == null ? void 0 : _a.$el) != null ? _b : props.origin;
+      if (originEl) {
+        originObserver = new window.ResizeObserver(() => updateWidth(originEl));
+        originObserver.observe(originEl);
+      }
+    }
+  };
+  const unobserveOrigin = () => {
+    var _a, _b;
+    const originEl = (_b = (_a = props.origin) == null ? void 0 : _a.$el) != null ? _b : props.origin;
+    originEl && (originObserver == null ? void 0 : originObserver.unobserve(originEl));
+  };
   watch(() => props.modelValue, () => {
     if (props.modelValue && props.origin) {
-      originParent = getScrollParent(props.origin);
       nextTick(updatePosition);
-      originParent == null ? void 0 : originParent.addEventListener("scroll", updatePosition);
-      originParent !== window && window.addEventListener("scroll", updatePosition);
+      window.addEventListener("scroll", scrollCallback, true);
       window.addEventListener("resize", updatePosition);
+      observeOrigin();
     } else {
-      originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
-      originParent !== window && window.removeEventListener("scroll", updatePosition);
+      window.removeEventListener("scroll", scrollCallback, true);
       window.removeEventListener("resize", updatePosition);
+      unobserveOrigin();
     }
   });
   onUnmounted(() => {
-    originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
-    originParent !== window && window.removeEventListener("scroll", updatePosition);
+    window.removeEventListener("scroll", scrollCallback, true);
     window.removeEventListener("resize", updatePosition);
+    unobserveOrigin();
   });
-  return { arrowRef, overlayRef, updatePosition };
+  return { arrowRef, overlayRef, styles, updatePosition };
 }
 var flexibleOverlay = "";
 const FlexibleOverlay = defineComponent({
@@ -577,6 +593,7 @@ const FlexibleOverlay = defineComponent({
     const {
       arrowRef,
       overlayRef,
+      styles,
       updatePosition
     } = useOverlay(props, emit);
     expose({
@@ -586,7 +603,8 @@ const FlexibleOverlay = defineComponent({
       var _a;
       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"])
@@ -1124,7 +1142,9 @@ var CategorySearchTagDropdown = defineComponent({
     const {
       rootCtx,
       ComponentMap,
-      onSearchKeyTagClick
+      onSearchKeyTagClick,
+      addTagContext,
+      removeTagContext
     } = inject(categorySearchInjectionKey);
     const isVisible = ref(false);
     const checkType = (tag2) => {
@@ -1139,6 +1159,21 @@ var CategorySearchTagDropdown = defineComponent({
     const onDropdownClose = () => {
       isVisible.value = false;
     };
+    const toggle = (status) => {
+      if (typeof status === "boolean") {
+        isVisible.value = status;
+      } else {
+        onTagClick();
+      }
+    };
+    onMounted(() => {
+      addTagContext(item.value.field, {
+        toggle
+      });
+    });
+    onUnmounted(() => {
+      removeTagContext(item.value.field);
+    });
     return () => item.value.type !== "keyword" ? createVNode(Dropdown, {
       "visible": isVisible.value,
       "trigger": "manually",
@@ -6738,7 +6773,7 @@ var lodash = { exports: {} };
       var delay = baseRest2(function(func, wait, args) {
         return baseDelay(func, toNumber(wait) || 0, args);
       });
-      function flip(func) {
+      function flip2(func) {
         return createWrap(func, WRAP_FLIP_FLAG);
       }
       function memoize(func, resolver) {
@@ -7862,7 +7897,7 @@ var lodash = { exports: {} };
       lodash2.flatten = flatten;
       lodash2.flattenDeep = flattenDeep;
       lodash2.flattenDepth = flattenDepth;
-      lodash2.flip = flip;
+      lodash2.flip = flip2;
       lodash2.flow = flow;
       lodash2.flowRight = flowRight;
       lodash2.fromPairs = fromPairs;
@@ -11937,12 +11972,24 @@ function useCategorySearch(props, ctx) {
   watch(() => extendConfig == null ? void 0 : extendConfig.value, () => {
     merge$1(operationConfig, (extendConfig == null ? void 0 : extendConfig.value) || {});
   }, { immediate: true, deep: true });
+  const tagContextMap = {};
+  const addTagContext = (field, context) => {
+    Reflect.defineProperty(tagContextMap, field, { value: context });
+  };
+  const removeTagContext = (field) => {
+    Reflect.deleteProperty(tagContextMap, field);
+  };
+  const toggleTagMenu = (field, status) => {
+    var _a;
+    (_a = tagContextMap[field]) == null ? void 0 : _a.toggle(status);
+  };
   ctx.expose({
     chooseItem,
     chooseItems,
     getTextInputValue,
     getNumberRangeValue,
-    searchCategory
+    searchCategory,
+    toggleTagMenu
   });
   onMounted(() => scrollToTail(true));
   provide(categorySearchInjectionKey, {
@@ -11982,7 +12029,9 @@ function useCategorySearch(props, ctx) {
     searchCategory,
     showCurrentSearchCategory,
     onInputBackspace,
-    onInputToggle
+    onInputToggle,
+    addTagContext,
+    removeTagContext
   });
   function init() {
     var _a, _b;