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

package/breadcrumb/index.es.js

@@ -397,6 +397,10 @@ const flexibleOverlayProps = {
   fitOriginWidth: {
     type: Boolean,
     default: false
+  },
+  autoUpdatePosition: {
+    type: Boolean,
+    default: false
   }
 };
 function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
@@ -424,6 +428,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" };
@@ -494,6 +499,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,
     () => {
@@ -502,10 +516,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();
       }
     }
   );
@@ -513,6 +529,7 @@ function useOverlay(props, emit) {
     window.removeEventListener("scroll", scrollCallback, true);
     window.removeEventListener("resize", updatePosition);
     unobserveOrigin();
+    unobserveOverlay();
   });
   return { arrowRef, overlayRef, styles, updatePosition };
 }

package/breadcrumb/index.umd.js

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

package/category-search/index.es.js

@@ -445,6 +445,10 @@ const flexibleOverlayProps = {
   fitOriginWidth: {
     type: Boolean,
     default: false
+  },
+  autoUpdatePosition: {
+    type: Boolean,
+    default: false
   }
 };
 function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
@@ -472,6 +476,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" };
@@ -542,6 +547,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,
     () => {
@@ -550,10 +564,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();
       }
     }
   );
@@ -561,6 +577,7 @@ function useOverlay(props, emit) {
     window.removeEventListener("scroll", scrollCallback, true);
     window.removeEventListener("resize", updatePosition);
     unobserveOrigin();
+    unobserveOverlay();
   });
   return { arrowRef, overlayRef, styles, updatePosition };
 }
@@ -937,7 +954,6 @@ var Tag = defineComponent({
     } = toRefs(props);
     const tagClass = useClass(props);
     const themeColor = useColor(props);
-    const tagTitle = titleContent.value || "";
     const isDefaultTag = () => !type4.value && !color.value;
     const handleClick = (e) => {
       emit("click", e);
@@ -976,7 +992,7 @@ var Tag = defineComponent({
           color: contentColor.value,
           backgroundColor: checked.value ? themeColor.value : !color.value ? "" : "var(--devui-base-bg, #ffffff)"
         },
-        "title": tagTitle
+        "title": titleContent.value || ""
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots), closeIconEl()])]);
     };
   }
@@ -1056,6 +1072,13 @@ const categorySearchProps = {
   inputAutofocus: {
     type: Boolean,
     default: true
+  },
+  collapseTags: {
+    type: [Boolean, Number],
+    default: false
+  },
+  collapseTagsTooltip: {
+    type: Object
   }
 };
 const categorySearchInjectionKey = Symbol("d-category-search");
@@ -10412,37 +10435,40 @@ var TextInputMenu = defineComponent({
   props: typeMenuProps,
   emits: ["close"],
   setup(props, ctx) {
-    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);
-      ctx.emit("close");
+      formEl.value.validate((isValid) => {
+        if (isValid) {
+          getTextInputValue(props.tag, formData.text);
+          ctx.emit("close");
+        }
+      });
     };
     const onCancelClick = () => {
       ctx.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"
@@ -10987,6 +11013,7 @@ function useCategorySearch(props, ctx) {
       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);
   };
   const searchKeyChangeEvent = (event) => {
@@ -11019,6 +11046,7 @@ function useCategorySearch(props, ctx) {
     innerSearchKey.value = "";
     inputRef.value.closeMenu();
     chooseCategory(tag2);
+    ctx.emit("selectedCategory", { tag: tag2 });
     setTimeout(() => {
       isFocus.value = true;
       enterSearch.value = false;
@@ -11464,11 +11492,44 @@ function useCategorySearch(props, ctx) {
     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, ctx) {
     const {
       rootRef,
@@ -11482,6 +11543,11 @@ var CategorySearch = defineComponent({
       operationConfig,
       onSearch
     } = useCategorySearch(props, ctx);
+    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", {
@@ -11497,10 +11563,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"