@progress/kendo-vue-popup 9.3.0-develop.3 → 9.3.0-develop.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Popup.d.ts +61 -24
- package/Popup.js +3 -3
- package/Popup.mjs +241 -152
- package/dist/cdn/js/kendo-vue-popup.js +1 -1
- package/index.d.mts +2 -2
- package/index.d.ts +2 -2
- package/models/Events.d.ts +17 -0
- package/models/PopupSettings.d.ts +45 -8
- package/models/Position.d.ts +1 -0
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +4 -4
- package/services/positionService.js +1 -1
- package/services/positionService.mjs +15 -14
package/Popup.d.ts
CHANGED
|
@@ -14,32 +14,36 @@ import { MouseDownOutsideEvent } from './models/Events';
|
|
|
14
14
|
*/
|
|
15
15
|
declare const Popup: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
16
16
|
appendTo: {
|
|
17
|
-
type: PropType<string>;
|
|
17
|
+
type: PropType<string | HTMLElement>;
|
|
18
18
|
default: string;
|
|
19
19
|
};
|
|
20
20
|
anchor: {
|
|
21
|
-
type: PropType<string>;
|
|
21
|
+
type: PropType<string | HTMLElement>;
|
|
22
22
|
default: string;
|
|
23
23
|
};
|
|
24
|
-
className: PropType<string | string[]
|
|
24
|
+
className: PropType<string | string[] | {
|
|
25
|
+
[key: string]: boolean;
|
|
26
|
+
}>;
|
|
25
27
|
id: PropType<string>;
|
|
26
|
-
popupClass: PropType<string | string[]
|
|
28
|
+
popupClass: PropType<string | string[] | {
|
|
29
|
+
[key: string]: boolean;
|
|
30
|
+
}>;
|
|
27
31
|
collision: {
|
|
28
|
-
type: PropType<
|
|
32
|
+
type: PropType<import('.').Collision>;
|
|
29
33
|
default: () => {
|
|
30
34
|
horizontal: string;
|
|
31
35
|
vertical: string;
|
|
32
36
|
};
|
|
33
37
|
};
|
|
34
38
|
anchorAlign: {
|
|
35
|
-
type: PropType<
|
|
39
|
+
type: PropType<import('.').Align>;
|
|
36
40
|
default: () => {
|
|
37
41
|
horizontal: string;
|
|
38
42
|
vertical: string;
|
|
39
43
|
};
|
|
40
44
|
};
|
|
41
45
|
popupAlign: {
|
|
42
|
-
type: PropType<
|
|
46
|
+
type: PropType<import('.').Align>;
|
|
43
47
|
default: () => {
|
|
44
48
|
horizontal: string;
|
|
45
49
|
vertical: string;
|
|
@@ -64,8 +68,18 @@ declare const Popup: import('vue').DefineComponent<import('vue').ExtractPropType
|
|
|
64
68
|
type: PropType<string>;
|
|
65
69
|
default: string;
|
|
66
70
|
};
|
|
71
|
+
margin: PropType<{
|
|
72
|
+
horizontal?: number;
|
|
73
|
+
vertical?: number;
|
|
74
|
+
}>;
|
|
75
|
+
positionMode: PropType<"absolute" | "fixed">;
|
|
76
|
+
scale: PropType<number>;
|
|
77
|
+
role: PropType<string>;
|
|
78
|
+
ariaLabelledBy: PropType<string>;
|
|
79
|
+
ariaDescribedBy: PropType<string>;
|
|
67
80
|
onOpen: PropType<(event: import('./models/Events').OpenEvent) => void>;
|
|
68
81
|
onClose: PropType<(event: import('./models/Events').CloseEvent) => void>;
|
|
82
|
+
onPosition: PropType<(event: import('./models/Events').PositionEvent) => void>;
|
|
69
83
|
onMousedownoutside: PropType<(event: MouseDownOutsideEvent) => void>;
|
|
70
84
|
}>, {}, {
|
|
71
85
|
hasMounted: boolean;
|
|
@@ -82,42 +96,49 @@ declare const Popup: import('vue').DefineComponent<import('vue').ExtractPropType
|
|
|
82
96
|
_cancelPendingAnimations(): void;
|
|
83
97
|
animateElement(element: HTMLElement, type: 'enter' | 'exit', callback: Function): any;
|
|
84
98
|
isAnimationInstant(type: 'enter' | 'exit'): boolean;
|
|
85
|
-
getParentRef(anchor: string, isAnchor?: boolean): any;
|
|
86
|
-
position(settings: PopupProps, element: HTMLElement, anchor
|
|
99
|
+
getParentRef(anchor: string | HTMLElement | null | undefined, isAnchor?: boolean): any;
|
|
100
|
+
position(settings: PopupProps, element: HTMLElement, anchor?: string | HTMLElement | null, scale?: number): Position;
|
|
101
|
+
applyMargin(position: Position, settings: PopupProps): Position;
|
|
87
102
|
calculatePosition($props: any, appendToElement?: HTMLElement): Position;
|
|
88
103
|
attachRepositionHandlers(element: any): void;
|
|
89
104
|
detachRepositionHandlers(): void;
|
|
105
|
+
attachResizeObserver(element: HTMLElement): void;
|
|
106
|
+
detachResizeObserver(): void;
|
|
90
107
|
reposition(): void;
|
|
91
108
|
getCurrentZIndex(): number;
|
|
92
109
|
hasCustomOffset(offset: any): boolean;
|
|
93
|
-
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin,
|
|
110
|
+
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("close" | "keydown" | "position" | "open" | "mousedownoutside")[], "close" | "keydown" | "position" | "open" | "mousedownoutside", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
94
111
|
appendTo: {
|
|
95
|
-
type: PropType<string>;
|
|
112
|
+
type: PropType<string | HTMLElement>;
|
|
96
113
|
default: string;
|
|
97
114
|
};
|
|
98
115
|
anchor: {
|
|
99
|
-
type: PropType<string>;
|
|
116
|
+
type: PropType<string | HTMLElement>;
|
|
100
117
|
default: string;
|
|
101
118
|
};
|
|
102
|
-
className: PropType<string | string[]
|
|
119
|
+
className: PropType<string | string[] | {
|
|
120
|
+
[key: string]: boolean;
|
|
121
|
+
}>;
|
|
103
122
|
id: PropType<string>;
|
|
104
|
-
popupClass: PropType<string | string[]
|
|
123
|
+
popupClass: PropType<string | string[] | {
|
|
124
|
+
[key: string]: boolean;
|
|
125
|
+
}>;
|
|
105
126
|
collision: {
|
|
106
|
-
type: PropType<
|
|
127
|
+
type: PropType<import('.').Collision>;
|
|
107
128
|
default: () => {
|
|
108
129
|
horizontal: string;
|
|
109
130
|
vertical: string;
|
|
110
131
|
};
|
|
111
132
|
};
|
|
112
133
|
anchorAlign: {
|
|
113
|
-
type: PropType<
|
|
134
|
+
type: PropType<import('.').Align>;
|
|
114
135
|
default: () => {
|
|
115
136
|
horizontal: string;
|
|
116
137
|
vertical: string;
|
|
117
138
|
};
|
|
118
139
|
};
|
|
119
140
|
popupAlign: {
|
|
120
|
-
type: PropType<
|
|
141
|
+
type: PropType<import('.').Align>;
|
|
121
142
|
default: () => {
|
|
122
143
|
horizontal: string;
|
|
123
144
|
vertical: string;
|
|
@@ -142,18 +163,34 @@ declare const Popup: import('vue').DefineComponent<import('vue').ExtractPropType
|
|
|
142
163
|
type: PropType<string>;
|
|
143
164
|
default: string;
|
|
144
165
|
};
|
|
166
|
+
margin: PropType<{
|
|
167
|
+
horizontal?: number;
|
|
168
|
+
vertical?: number;
|
|
169
|
+
}>;
|
|
170
|
+
positionMode: PropType<"absolute" | "fixed">;
|
|
171
|
+
scale: PropType<number>;
|
|
172
|
+
role: PropType<string>;
|
|
173
|
+
ariaLabelledBy: PropType<string>;
|
|
174
|
+
ariaDescribedBy: PropType<string>;
|
|
145
175
|
onOpen: PropType<(event: import('./models/Events').OpenEvent) => void>;
|
|
146
176
|
onClose: PropType<(event: import('./models/Events').CloseEvent) => void>;
|
|
177
|
+
onPosition: PropType<(event: import('./models/Events').PositionEvent) => void>;
|
|
147
178
|
onMousedownoutside: PropType<(event: MouseDownOutsideEvent) => void>;
|
|
148
|
-
}>> & Readonly<{
|
|
149
|
-
|
|
150
|
-
|
|
179
|
+
}>> & Readonly<{
|
|
180
|
+
onKeydown?: (...args: any[]) => any;
|
|
181
|
+
onClose?: (...args: any[]) => any;
|
|
182
|
+
onOpen?: (...args: any[]) => any;
|
|
183
|
+
onPosition?: (...args: any[]) => any;
|
|
184
|
+
onMousedownoutside?: (...args: any[]) => any;
|
|
185
|
+
}>, {
|
|
186
|
+
show: boolean;
|
|
187
|
+
anchor: string | HTMLElement;
|
|
188
|
+
anchorAlign: import('.').Align;
|
|
151
189
|
offset: import('.').Offset;
|
|
152
190
|
animate: boolean;
|
|
153
191
|
direction: string;
|
|
154
|
-
appendTo: string;
|
|
155
|
-
collision:
|
|
156
|
-
popupAlign:
|
|
157
|
-
show: boolean;
|
|
192
|
+
appendTo: string | HTMLElement;
|
|
193
|
+
collision: import('.').Collision;
|
|
194
|
+
popupAlign: import('.').Align;
|
|
158
195
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
159
196
|
export { Popup };
|
package/Popup.js
CHANGED
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("vue"),b=require("@progress/kendo-popup-common"),f=require("./util.js"),C=require("./services/alignService.js"),E=require("./services/domService.js"),P=require("./services/positionService.js"),v=require("@progress/kendo-vue-common"),T=require("./package-metadata.js"),D=100,S=1,w={left:-1e3,top:0},$="k-animation-container-shown",O="k-popup",M={margin:"0"},k=A.defineComponent({name:"Popup",emits:["open","close","position","keydown","mousedownoutside"],props:{appendTo:{type:[String,Object],default:""},anchor:{type:[String,Object],default:""},className:[String,Array,Object],id:String,popupClass:[String,Array,Object],collision:{type:Object,default:function(){return{horizontal:f.CollisionType.fit,vertical:f.CollisionType.flip}}},anchorAlign:{type:Object,default:function(){return{horizontal:f.AlignPoint.left,vertical:f.AlignPoint.bottom}}},popupAlign:{type:Object,default:function(){return{horizontal:f.AlignPoint.left,vertical:f.AlignPoint.top}}},offset:{type:Object,default:function(){return w}},show:{type:Boolean,default:!1},animate:{type:[Boolean,Object],default:!0},direction:{type:String,default:"down"},margin:Object,positionMode:String,scale:Number,role:String,ariaLabelledBy:String,ariaDescribedBy:String,onOpen:Function,onClose:Function,onPosition:Function,onMousedownoutside:Function},inject:{kCurrentZIndex:{default:null}},data(){return{hasMounted:!1,animationOpen:!1}},watch:{anchor(e){!this.hasMounted||!v.canUseDOM||(this.mountedAnchor=e?this.getParentRef(e,!0):document.body,this.reposition())},appendTo(e){!this.hasMounted||!v.canUseDOM||(this.mountedAppendTo=e?this.getParentRef(e):document.body,this.$el.parentElement!==this.mountedAppendTo&&this.mountedAppendTo.appendChild(this.$el),this.reposition())},show(e,i){if(i&&!e)if(this._cancelPendingAnimations(),this._opened&&(this._opened=!1,this.onClosing()),this.transitionDuration().exit===0)this.onClosed();else{this._exitingAnimation=!0;const n=this._animationGeneration;this.$nextTick(()=>{if(n!==this._animationGeneration)return;const o=this.$el;if(!o||!this._exitingAnimation){this._exitingAnimation=!1,this.$forceUpdate(),this.onClosed();return}const r=o.firstChild;r?this.animateElement(r,"exit",()=>{n===this._animationGeneration&&(this._exitingAnimation=!1,this.$forceUpdate(),this.onClosed())}):(this._exitingAnimation=!1,this.$forceUpdate(),this.onClosed())})}else!i&&e&&(this._cancelPendingAnimations(),this._exitingAnimation=!1)}},created(){v.validatePackage(T.packageMetadata),this.mountedAppendTo=void 0,this.mountedAnchor=void 0,this._clonedElement=void 0,this._flipped=!1,this._offsetTop=0,this._offsetLeft=-1e3,this._opened=!1,this._exitingAnimation=!1,this._animationGeneration=0,this._enterTimerId=null,this._cancelAnimation=null,this._resizeObserver=void 0,this._domService=new E.DOMService,this._alignService=new C.AlignService(this._domService),this._positionService=new P.PositionService(this._domService),this.reposition=f.throttle(this.reposition.bind(this),f.FRAME_DURATION)},mounted(){v.canUseDOM&&(this.mountedAppendTo=this.appendTo?this.getParentRef(this.appendTo):document.body,this.mountedAnchor=this.anchor?this.getParentRef(this.anchor,!0):document.body),this._parentElement=this.$el.parentElement,this._clonedElement=this.$el.cloneNode(!0),this.hasMounted=!0,this.mountedAppendTo.appendChild(this.$el),this.$forceUpdate()},updated(){if(this.hasMounted&&this.mountedAppendTo){const e=this.$el;(e==null?void 0:e.nodeType)===1&&e.parentElement!==this.mountedAppendTo&&this.mountedAppendTo.appendChild(e)}},unmounted(){this.detachRepositionHandlers(),this.detachResizeObserver(),typeof window!="undefined"&&window.removeEventListener("mousedown",this.handleMouseDown)},beforeUnmount(){this._parentElement&&this._parentElement.appendChild(this.$el)},methods:{handleMouseDown(e){var n,o;const i=((n=e==null?void 0:e.target)==null?void 0:n.closest(".k-animation-container"))===null,t=((o=this.mountedAnchor)==null?void 0:o.contains(e==null?void 0:e.target))||!1;if(i){const r={target:this,event:e,isAnchorClicked:t};this.$emit("mousedownoutside",r),typeof window!="undefined"&&window.removeEventListener("mousedown",this.handleMouseDown)}},onOpened(){var t,n;const e=this.$el;typeof window!="undefined"&&window.addEventListener("mousedown",this.handleMouseDown),this.$props.show&&(e.classList.add($),this.animationOpen=!0),this.attachRepositionHandlers(e),this.attachResizeObserver(e);const i={target:this};(n=(t=this.$props).onOpen)==null||n.call(t,i),this.$emit("open",i)},onClosing(){this.$props.show||(this.$el.classList.remove($),this.animationOpen=!1),this.detachRepositionHandlers(),this.detachResizeObserver(),typeof window!="undefined"&&window.removeEventListener("mousedown",this.handleMouseDown)},onClosed(){var i,t;const e={target:this};(t=(i=this.$props).onClose)==null||t.call(i,e),this.$emit("close",e)},transitionDuration(){const e=this.$props.animate;let i=0,t=0;return e&&(e===!0?i=t=300:(i=e.openDuration||0,t=e.closeDuration||0)),{enter:i,exit:t}},_cancelPendingAnimations(){this._animationGeneration++,this._enterTimerId!==null&&(clearTimeout(this._enterTimerId),this._enterTimerId=null),this._cancelAnimation&&(this._cancelAnimation(),this._cancelAnimation=null)},animateElement(e,i,t){const n=this.transitionDuration()[i];if(n===0)return t();const o=e.ownerDocument,r=o==null?void 0:o.defaultView;if(!r)return t();const d=this.$props.direction==="down",h=this._flipped?"up":"down",u=this._flipped?"down":"up",c=d?h:u,p=`k-slide-${c}-${i}`,s=`k-slide-${c}-${i}-active`;let a=!1,l=null;const m=()=>{e.removeEventListener("transitionend",_),l&&(clearTimeout(l),l=null),e.style.transitionDuration="",e.classList.remove(p,s)},g=()=>{a||(a=!0,m(),i==="exit"?e.style.display="none":e.style.display="",this._cancelAnimation=null,t())},_=y=>{y.target===e&&g()};e.addEventListener("transitionend",_),l=setTimeout(g,n+50),e.style.transitionDuration="",e.classList.remove(p,s),i==="enter"&&(e.style.display=""),e.classList.add(p),r.requestAnimationFrame(()=>{a||(e.style.transitionDuration=n+"ms",e.classList.add(s))}),this._cancelAnimation=()=>{a||(a=!0,m(),e.style.display="")}},isAnimationInstant(e){if(this.transitionDuration()[e]===0)return!0;if(typeof window!="undefined"&&this.$el){const t=this.$el.firstChild;if(t){const n=window.getComputedStyle(t),o=parseFloat(n.transitionDuration||"0"),r=parseFloat(n.animationDuration||"0");if(o===0&&r===0)return!0}}return!1},getParentRef(e,i){if(e instanceof HTMLElement)return e;if(!e)return document.body;let t=this.$parent;for(;t&&!t.$refs[e];){if(t&&t.kendoAnchorRef&&i)return t.kendoAnchorRef;if(t=t.$parent,!t&&v.canUseDOM)return document.getElementById(e)||document.body}return t.$refs[e].$el||t.$refs[e]},position(e,i,t,n){var a,l,m,g;const{anchorAlign:o,popupAlign:r,collision:d,offset:h}=e,u=n||1,c=t?this.mountedAnchor:document.body;if(u===1){const _=this._alignService.alignElement({anchor:t?c:void 0,element:i,elementAlign:r,anchorAlign:o,offset:h}),y=this._positionService.positionElement({anchor:c,anchorAlign:o,collisions:d,element:i,currentLocation:_,elementAlign:r});return this.applyMargin(y,e)}const p=b.alignElement({anchor:t?c:void 0,element:i,elementAlign:r,anchorAlign:o,offset:h,margin:{horizontal:((a=e.margin)==null?void 0:a.horizontal)||0,vertical:((l=e.margin)==null?void 0:l.vertical)||0},positionMode:e.positionMode,scale:u});return b.positionElement({anchor:c,anchorAlign:o,collisions:d,element:i,currentLocation:p,elementAlign:r,margin:{horizontal:((m=e.margin)==null?void 0:m.horizontal)||0,vertical:((g=e.margin)==null?void 0:g.vertical)||0},scale:u})},applyMargin(e,i){var h,u,c,p,s,a,l,m;const t=i.margin;if(!t||!e.offset)return e;const n={...e.offset},o=t.horizontal||0,r=t.vertical||0,d=e.flipped?-1:1;return((h=i.anchorAlign)==null?void 0:h.horizontal)==="left"&&((u=i.popupAlign)==null?void 0:u.horizontal)==="right"?n.left-=o*d:((c=i.anchorAlign)==null?void 0:c.horizontal)==="right"&&((p=i.popupAlign)==null?void 0:p.horizontal)==="left"&&(n.left+=o*d),((s=i.anchorAlign)==null?void 0:s.vertical)==="top"&&((a=i.popupAlign)==null?void 0:a.vertical)==="bottom"?n.top-=r*d:((l=i.anchorAlign)==null?void 0:l.vertical)==="bottom"&&((m=i.popupAlign)==null?void 0:m.vertical)==="top"&&(n.top+=r*d),{...e,offset:n}},calculatePosition(e,i){if(!i||!f.isWindowAvailable()||!v.canUseDOM)return{flipped:!1,offset:e.offset};const t=v.getDefaultSlots(this),n=document.createElement("div"),o=this.$el&&this.$el.firstChild&&this.$el.firstChild.firstChild?this.$el.firstChild.firstChild.cloneNode(!0):null,r=o&&o.getBoundingClientRect?o:this._clonedElement;if(r)n.appendChild(r);else{const s=t&&t[0].props?t[0].props.class:"",a=this.$props.popupClass;n.innerHTML=`<div class="k-animation-container k-animation-container-relative">
|
|
9
9
|
<div class="k-popup k-animation-container k-animation-container-relative">
|
|
10
|
-
<div class="${
|
|
10
|
+
<div class="${s} ${a}" >
|
|
11
11
|
</div>
|
|
12
12
|
</div>
|
|
13
|
-
</div>`}if(
|
|
13
|
+
</div>`}if(i.appendChild(n),n&&n.firstChild){const s=n.firstChild;s.style.position="absolute",s.style.visibility="hidden",s.style.display="block",s.style.left="-1000",s.style.top="0";const a=t&&t[0].props?t[0].props.style:{};if(a)for(const[l,m]of Object.entries(a))s.style[l]=m}const d=n.firstChild,h=parseFloat(window.getComputedStyle(d).width),u=h>0?d.getBoundingClientRect().width/h:1,c=(this.$props.scale||1)*u,p=this.position(e,d,this.$props.anchor,c);return n.parentNode.removeChild(n),p},attachRepositionHandlers(e){this.detachRepositionHandlers(),this._scrollableParents=this._domService.scrollableParents(this.$props.anchor?this.mountedAnchor:e),this._scrollableParents.map(i=>i.addEventListener("scroll",this.reposition)),f.isWindowAvailable()&&window.addEventListener("resize",this.reposition)},detachRepositionHandlers(){this._scrollableParents&&(this._scrollableParents.map(e=>e.removeEventListener("scroll",this.reposition)),this._scrollableParents=void 0),f.isWindowAvailable()&&window.removeEventListener("resize",this.reposition)},attachResizeObserver(e){this.detachResizeObserver(),typeof ResizeObserver!="undefined"&&(this._resizeObserver=new ResizeObserver(()=>this.reposition()),this._resizeObserver.observe(e))},detachResizeObserver(){var e;(e=this._resizeObserver)==null||e.disconnect(),this._resizeObserver=void 0},reposition(){this._clonedElement=this.$el.cloneNode(!0),this.$forceUpdate()},getCurrentZIndex(){return this.kCurrentZIndex?this.kCurrentZIndex+S:D},hasCustomOffset(e){return e?e.left!==w.left||e.top!==w.top:!1}},render(){var c,p;const{className:e,popupClass:i,show:t,id:n}=this.$props,o=v.getDefaultSlots(this),r=o,d=this.hasCustomOffset(this.$props.offset)?M:void 0,h=f.isWindowAvailable()?this.$props.appendTo?this.mountedAppendTo||this.getParentRef(this.$props.appendTo):document.body:void 0;if(this.$props.show){const s=this.calculatePosition(this.$props,h);this._offsetLeft=s.offset.left,this._offsetTop=s.offset.top,this._flipped=!!s.flipped;const a={target:this,fitted:!!s.fitted,flipped:!!s.flipped};(p=(c=this.$props).onPosition)==null||p.call(c,a),this.$emit("position",a)}const u=this.getCurrentZIndex();if(!this.hasMounted)return A.createVNode("div",{id:n,style:{display:"none",...this.$props.style},class:e},[A.createVNode("div",{class:[i,O],style:d},[o])]);if((t||this._exitingAnimation)&&h){const s={zIndex:u,position:this.$props.positionMode||"absolute",top:this._offsetTop+"px",left:this._offsetLeft+"px",pointerEvents:t?"auto":"none",...this.$props.style};if(t&&!this._opened){this._opened=!0;const l=this._animationGeneration;this.transitionDuration().enter===0?this._enterTimerId=setTimeout(()=>{this._enterTimerId=null,l===this._animationGeneration&&(!this.$props.show||!this._opened||this.onOpened())},0):this.$nextTick(()=>{if(l!==this._animationGeneration||!this.$props.show||!this._opened)return;const g=this.$el;if(!g)return;const _=g.firstChild;_?this.animateElement(_,"enter",()=>{l===this._animationGeneration&&this.$props.show&&this.onOpened()}):this.onOpened()})}const a=this.animationOpen?$:"";return A.createVNode("div",{id:n,class:["k-animation-container",a,e],style:s,onKeydown:l=>{this.$emit("keydown",l)}},[A.createVNode("div",{class:["k-child-animation-container"],style:{transitionDelay:"0ms",display:"block"}},[A.createVNode("div",{role:this.$props.role,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,class:[i,O]},[r])])])}return A.createVNode("div",{id:n,style:{display:"none"},class:e},null)}});exports.Popup=k;
|
package/Popup.mjs
CHANGED
|
@@ -5,32 +5,34 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { defineComponent as
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
8
|
+
import { defineComponent as T, createVNode as g } from "vue";
|
|
9
|
+
import { alignElement as P, positionElement as D } from "@progress/kendo-popup-common";
|
|
10
|
+
import { isWindowAvailable as A, throttle as S, AlignPoint as y, CollisionType as C, FRAME_DURATION as z } from "./util.mjs";
|
|
11
|
+
import { AlignService as R } from "./services/alignService.mjs";
|
|
11
12
|
import { DOMService as k } from "./services/domService.mjs";
|
|
12
|
-
import { PositionService as
|
|
13
|
-
import { getDefaultSlots as
|
|
14
|
-
import { packageMetadata as
|
|
15
|
-
const
|
|
13
|
+
import { PositionService as L } from "./services/positionService.mjs";
|
|
14
|
+
import { getDefaultSlots as O, canUseDOM as v, validatePackage as x } from "@progress/kendo-vue-common";
|
|
15
|
+
import { packageMetadata as M } from "./package-metadata.mjs";
|
|
16
|
+
const I = 100, N = 1, $ = {
|
|
16
17
|
left: -1e3,
|
|
17
18
|
top: 0
|
|
18
|
-
},
|
|
19
|
+
}, b = "k-animation-container-shown", E = "k-popup", F = {
|
|
19
20
|
margin: "0"
|
|
20
|
-
},
|
|
21
|
+
}, X = /* @__PURE__ */ T({
|
|
21
22
|
name: "Popup",
|
|
23
|
+
emits: ["open", "close", "position", "keydown", "mousedownoutside"],
|
|
22
24
|
props: {
|
|
23
25
|
appendTo: {
|
|
24
|
-
type: String,
|
|
26
|
+
type: [String, Object],
|
|
25
27
|
default: ""
|
|
26
28
|
},
|
|
27
29
|
anchor: {
|
|
28
30
|
type: [String, Object],
|
|
29
31
|
default: ""
|
|
30
32
|
},
|
|
31
|
-
className: String,
|
|
33
|
+
className: [String, Array, Object],
|
|
32
34
|
id: String,
|
|
33
|
-
popupClass: String,
|
|
35
|
+
popupClass: [String, Array, Object],
|
|
34
36
|
collision: {
|
|
35
37
|
type: Object,
|
|
36
38
|
default: function() {
|
|
@@ -44,8 +46,8 @@ const L = 100, R = 1, g = {
|
|
|
44
46
|
type: Object,
|
|
45
47
|
default: function() {
|
|
46
48
|
return {
|
|
47
|
-
horizontal:
|
|
48
|
-
vertical:
|
|
49
|
+
horizontal: y.left,
|
|
50
|
+
vertical: y.bottom
|
|
49
51
|
};
|
|
50
52
|
}
|
|
51
53
|
},
|
|
@@ -53,15 +55,15 @@ const L = 100, R = 1, g = {
|
|
|
53
55
|
type: Object,
|
|
54
56
|
default: function() {
|
|
55
57
|
return {
|
|
56
|
-
horizontal:
|
|
57
|
-
vertical:
|
|
58
|
+
horizontal: y.left,
|
|
59
|
+
vertical: y.top
|
|
58
60
|
};
|
|
59
61
|
}
|
|
60
62
|
},
|
|
61
63
|
offset: {
|
|
62
64
|
type: Object,
|
|
63
65
|
default: function() {
|
|
64
|
-
return
|
|
66
|
+
return $;
|
|
65
67
|
}
|
|
66
68
|
},
|
|
67
69
|
show: {
|
|
@@ -76,8 +78,15 @@ const L = 100, R = 1, g = {
|
|
|
76
78
|
type: String,
|
|
77
79
|
default: "down"
|
|
78
80
|
},
|
|
81
|
+
margin: Object,
|
|
82
|
+
positionMode: String,
|
|
83
|
+
scale: Number,
|
|
84
|
+
role: String,
|
|
85
|
+
ariaLabelledBy: String,
|
|
86
|
+
ariaDescribedBy: String,
|
|
79
87
|
onOpen: Function,
|
|
80
88
|
onClose: Function,
|
|
89
|
+
onPosition: Function,
|
|
81
90
|
onMousedownoutside: Function
|
|
82
91
|
},
|
|
83
92
|
inject: {
|
|
@@ -92,35 +101,41 @@ const L = 100, R = 1, g = {
|
|
|
92
101
|
};
|
|
93
102
|
},
|
|
94
103
|
watch: {
|
|
95
|
-
|
|
96
|
-
|
|
104
|
+
anchor(t) {
|
|
105
|
+
!this.hasMounted || !v || (this.mountedAnchor = t ? this.getParentRef(t, !0) : document.body, this.reposition());
|
|
106
|
+
},
|
|
107
|
+
appendTo(t) {
|
|
108
|
+
!this.hasMounted || !v || (this.mountedAppendTo = t ? this.getParentRef(t) : document.body, this.$el.parentElement !== this.mountedAppendTo && this.mountedAppendTo.appendChild(this.$el), this.reposition());
|
|
109
|
+
},
|
|
110
|
+
show(t, i) {
|
|
111
|
+
if (i && !t)
|
|
97
112
|
if (this._cancelPendingAnimations(), this._opened && (this._opened = !1, this.onClosing()), this.transitionDuration().exit === 0)
|
|
98
113
|
this.onClosed();
|
|
99
114
|
else {
|
|
100
115
|
this._exitingAnimation = !0;
|
|
101
|
-
const
|
|
116
|
+
const n = this._animationGeneration;
|
|
102
117
|
this.$nextTick(() => {
|
|
103
|
-
if (
|
|
118
|
+
if (n !== this._animationGeneration)
|
|
104
119
|
return;
|
|
105
|
-
const
|
|
106
|
-
if (!
|
|
120
|
+
const o = this.$el;
|
|
121
|
+
if (!o || !this._exitingAnimation) {
|
|
107
122
|
this._exitingAnimation = !1, this.$forceUpdate(), this.onClosed();
|
|
108
123
|
return;
|
|
109
124
|
}
|
|
110
|
-
const
|
|
111
|
-
|
|
112
|
-
|
|
125
|
+
const r = o.firstChild;
|
|
126
|
+
r ? this.animateElement(r, "exit", () => {
|
|
127
|
+
n === this._animationGeneration && (this._exitingAnimation = !1, this.$forceUpdate(), this.onClosed());
|
|
113
128
|
}) : (this._exitingAnimation = !1, this.$forceUpdate(), this.onClosed());
|
|
114
129
|
});
|
|
115
130
|
}
|
|
116
|
-
else !
|
|
131
|
+
else !i && t && (this._cancelPendingAnimations(), this._exitingAnimation = !1);
|
|
117
132
|
}
|
|
118
133
|
},
|
|
119
134
|
created() {
|
|
120
|
-
x(
|
|
135
|
+
x(M), this.mountedAppendTo = void 0, this.mountedAnchor = void 0, this._clonedElement = void 0, this._flipped = !1, this._offsetTop = 0, this._offsetLeft = -1e3, this._opened = !1, this._exitingAnimation = !1, this._animationGeneration = 0, this._enterTimerId = null, this._cancelAnimation = null, this._resizeObserver = void 0, this._domService = new k(), this._alignService = new R(this._domService), this._positionService = new L(this._domService), this.reposition = S(this.reposition.bind(this), z);
|
|
121
136
|
},
|
|
122
137
|
mounted() {
|
|
123
|
-
|
|
138
|
+
v && (this.mountedAppendTo = this.appendTo ? this.getParentRef(this.appendTo) : document.body, this.mountedAnchor = this.anchor ? this.getParentRef(this.anchor, !0) : document.body), this._parentElement = this.$el.parentElement, this._clonedElement = this.$el.cloneNode(!0), this.hasMounted = !0, this.mountedAppendTo.appendChild(this.$el), this.$forceUpdate();
|
|
124
139
|
},
|
|
125
140
|
updated() {
|
|
126
141
|
if (this.hasMounted && this.mountedAppendTo) {
|
|
@@ -129,226 +144,300 @@ const L = 100, R = 1, g = {
|
|
|
129
144
|
}
|
|
130
145
|
},
|
|
131
146
|
unmounted() {
|
|
132
|
-
this.detachRepositionHandlers(), typeof window != "undefined" && window.removeEventListener("mousedown", this.handleMouseDown);
|
|
147
|
+
this.detachRepositionHandlers(), this.detachResizeObserver(), typeof window != "undefined" && window.removeEventListener("mousedown", this.handleMouseDown);
|
|
133
148
|
},
|
|
134
149
|
beforeUnmount() {
|
|
135
150
|
this._parentElement && this._parentElement.appendChild(this.$el);
|
|
136
151
|
},
|
|
137
152
|
methods: {
|
|
138
153
|
handleMouseDown(t) {
|
|
139
|
-
var
|
|
140
|
-
const
|
|
141
|
-
if (
|
|
142
|
-
const
|
|
154
|
+
var n, o;
|
|
155
|
+
const i = ((n = t == null ? void 0 : t.target) == null ? void 0 : n.closest(".k-animation-container")) === null, e = ((o = this.mountedAnchor) == null ? void 0 : o.contains(t == null ? void 0 : t.target)) || !1;
|
|
156
|
+
if (i) {
|
|
157
|
+
const r = {
|
|
143
158
|
target: this,
|
|
144
159
|
event: t,
|
|
145
|
-
isAnchorClicked:
|
|
160
|
+
isAnchorClicked: e
|
|
146
161
|
};
|
|
147
|
-
this.$emit("mousedownoutside",
|
|
162
|
+
this.$emit("mousedownoutside", r), typeof window != "undefined" && window.removeEventListener("mousedown", this.handleMouseDown);
|
|
148
163
|
}
|
|
149
164
|
},
|
|
150
165
|
onOpened() {
|
|
166
|
+
var e, n;
|
|
151
167
|
const t = this.$el;
|
|
152
|
-
typeof window != "undefined" && window.addEventListener("mousedown", this.handleMouseDown), this.$props.show && (this.animationOpen = !0), this.attachRepositionHandlers(t), this
|
|
168
|
+
typeof window != "undefined" && window.addEventListener("mousedown", this.handleMouseDown), this.$props.show && (t.classList.add(b), this.animationOpen = !0), this.attachRepositionHandlers(t), this.attachResizeObserver(t);
|
|
169
|
+
const i = {
|
|
153
170
|
target: this
|
|
154
|
-
}
|
|
171
|
+
};
|
|
172
|
+
(n = (e = this.$props).onOpen) == null || n.call(e, i), this.$emit("open", i);
|
|
155
173
|
},
|
|
156
174
|
onClosing() {
|
|
157
|
-
this.$props.show || (this.animationOpen = !1), this.detachRepositionHandlers(), typeof window != "undefined" && window.removeEventListener("mousedown", this.handleMouseDown);
|
|
175
|
+
this.$props.show || (this.$el.classList.remove(b), this.animationOpen = !1), this.detachRepositionHandlers(), this.detachResizeObserver(), typeof window != "undefined" && window.removeEventListener("mousedown", this.handleMouseDown);
|
|
158
176
|
},
|
|
159
177
|
onClosed() {
|
|
160
|
-
|
|
178
|
+
var i, e;
|
|
179
|
+
const t = {
|
|
161
180
|
target: this
|
|
162
|
-
}
|
|
181
|
+
};
|
|
182
|
+
(e = (i = this.$props).onClose) == null || e.call(i, t), this.$emit("close", t);
|
|
163
183
|
},
|
|
164
184
|
transitionDuration() {
|
|
165
185
|
const t = this.$props.animate;
|
|
166
|
-
let
|
|
167
|
-
return t && (t === !0 ?
|
|
168
|
-
enter:
|
|
169
|
-
exit:
|
|
186
|
+
let i = 0, e = 0;
|
|
187
|
+
return t && (t === !0 ? i = e = 300 : (i = t.openDuration || 0, e = t.closeDuration || 0)), {
|
|
188
|
+
enter: i,
|
|
189
|
+
exit: e
|
|
170
190
|
};
|
|
171
191
|
},
|
|
172
192
|
_cancelPendingAnimations() {
|
|
173
193
|
this._animationGeneration++, this._enterTimerId !== null && (clearTimeout(this._enterTimerId), this._enterTimerId = null), this._cancelAnimation && (this._cancelAnimation(), this._cancelAnimation = null);
|
|
174
194
|
},
|
|
175
|
-
animateElement(t,
|
|
176
|
-
const
|
|
177
|
-
if (
|
|
178
|
-
return
|
|
179
|
-
const
|
|
180
|
-
if (!
|
|
181
|
-
return
|
|
182
|
-
const d = this.$props.direction === "down",
|
|
183
|
-
let
|
|
184
|
-
const
|
|
185
|
-
t.removeEventListener("transitionend",
|
|
186
|
-
},
|
|
187
|
-
|
|
188
|
-
},
|
|
189
|
-
|
|
195
|
+
animateElement(t, i, e) {
|
|
196
|
+
const n = this.transitionDuration()[i];
|
|
197
|
+
if (n === 0)
|
|
198
|
+
return e();
|
|
199
|
+
const o = t.ownerDocument, r = o == null ? void 0 : o.defaultView;
|
|
200
|
+
if (!r)
|
|
201
|
+
return e();
|
|
202
|
+
const d = this.$props.direction === "down", c = this._flipped ? "up" : "down", f = this._flipped ? "down" : "up", h = d ? c : f, p = `k-slide-${h}-${i}`, s = `k-slide-${h}-${i}-active`;
|
|
203
|
+
let a = !1, l = null;
|
|
204
|
+
const u = () => {
|
|
205
|
+
t.removeEventListener("transitionend", _), l && (clearTimeout(l), l = null), t.style.transitionDuration = "", t.classList.remove(p, s);
|
|
206
|
+
}, m = () => {
|
|
207
|
+
a || (a = !0, u(), i === "exit" ? t.style.display = "none" : t.style.display = "", this._cancelAnimation = null, e());
|
|
208
|
+
}, _ = (w) => {
|
|
209
|
+
w.target === t && m();
|
|
190
210
|
};
|
|
191
|
-
t.addEventListener("transitionend",
|
|
192
|
-
|
|
211
|
+
t.addEventListener("transitionend", _), l = setTimeout(m, n + 50), t.style.transitionDuration = "", t.classList.remove(p, s), i === "enter" && (t.style.display = ""), t.classList.add(p), r.requestAnimationFrame(() => {
|
|
212
|
+
a || (t.style.transitionDuration = n + "ms", t.classList.add(s));
|
|
193
213
|
}), this._cancelAnimation = () => {
|
|
194
|
-
|
|
214
|
+
a || (a = !0, u(), t.style.display = "");
|
|
195
215
|
};
|
|
196
216
|
},
|
|
197
217
|
isAnimationInstant(t) {
|
|
198
218
|
if (this.transitionDuration()[t] === 0)
|
|
199
219
|
return !0;
|
|
200
220
|
if (typeof window != "undefined" && this.$el) {
|
|
201
|
-
const
|
|
202
|
-
if (
|
|
203
|
-
const
|
|
204
|
-
if (
|
|
221
|
+
const e = this.$el.firstChild;
|
|
222
|
+
if (e) {
|
|
223
|
+
const n = window.getComputedStyle(e), o = parseFloat(n.transitionDuration || "0"), r = parseFloat(n.animationDuration || "0");
|
|
224
|
+
if (o === 0 && r === 0)
|
|
205
225
|
return !0;
|
|
206
226
|
}
|
|
207
227
|
}
|
|
208
228
|
return !1;
|
|
209
229
|
},
|
|
210
|
-
getParentRef(t,
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
230
|
+
getParentRef(t, i) {
|
|
231
|
+
if (t instanceof HTMLElement)
|
|
232
|
+
return t;
|
|
233
|
+
if (!t)
|
|
234
|
+
return document.body;
|
|
235
|
+
let e = this.$parent;
|
|
236
|
+
for (; e && !e.$refs[t]; ) {
|
|
237
|
+
if (e && e.kendoAnchorRef && i)
|
|
238
|
+
return e.kendoAnchorRef;
|
|
239
|
+
if (e = e.$parent, !e && v)
|
|
216
240
|
return document.getElementById(t) || document.body;
|
|
217
241
|
}
|
|
218
|
-
return
|
|
242
|
+
return e.$refs[t].$el || e.$refs[t];
|
|
219
243
|
},
|
|
220
|
-
position(t,
|
|
244
|
+
position(t, i, e, n) {
|
|
245
|
+
var a, l, u, m;
|
|
221
246
|
const {
|
|
222
|
-
anchorAlign:
|
|
223
|
-
popupAlign:
|
|
224
|
-
collision:
|
|
225
|
-
offset:
|
|
226
|
-
} = t,
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
247
|
+
anchorAlign: o,
|
|
248
|
+
popupAlign: r,
|
|
249
|
+
collision: d,
|
|
250
|
+
offset: c
|
|
251
|
+
} = t, f = n || 1, h = e ? this.mountedAnchor : document.body;
|
|
252
|
+
if (f === 1) {
|
|
253
|
+
const _ = this._alignService.alignElement({
|
|
254
|
+
anchor: e ? h : void 0,
|
|
255
|
+
element: i,
|
|
256
|
+
elementAlign: r,
|
|
257
|
+
anchorAlign: o,
|
|
258
|
+
offset: c
|
|
259
|
+
}), w = this._positionService.positionElement({
|
|
260
|
+
anchor: h,
|
|
261
|
+
anchorAlign: o,
|
|
262
|
+
collisions: d,
|
|
263
|
+
element: i,
|
|
264
|
+
currentLocation: _,
|
|
265
|
+
elementAlign: r
|
|
266
|
+
});
|
|
267
|
+
return this.applyMargin(w, t);
|
|
268
|
+
}
|
|
269
|
+
const p = P({
|
|
270
|
+
anchor: e ? h : void 0,
|
|
271
|
+
element: i,
|
|
272
|
+
elementAlign: r,
|
|
273
|
+
anchorAlign: o,
|
|
274
|
+
offset: c,
|
|
275
|
+
margin: {
|
|
276
|
+
horizontal: ((a = t.margin) == null ? void 0 : a.horizontal) || 0,
|
|
277
|
+
vertical: ((l = t.margin) == null ? void 0 : l.vertical) || 0
|
|
278
|
+
},
|
|
279
|
+
positionMode: t.positionMode,
|
|
280
|
+
scale: f
|
|
232
281
|
});
|
|
233
|
-
return
|
|
234
|
-
anchor:
|
|
235
|
-
anchorAlign:
|
|
236
|
-
collisions:
|
|
237
|
-
element:
|
|
238
|
-
currentLocation:
|
|
239
|
-
elementAlign:
|
|
282
|
+
return D({
|
|
283
|
+
anchor: h,
|
|
284
|
+
anchorAlign: o,
|
|
285
|
+
collisions: d,
|
|
286
|
+
element: i,
|
|
287
|
+
currentLocation: p,
|
|
288
|
+
elementAlign: r,
|
|
289
|
+
margin: {
|
|
290
|
+
horizontal: ((u = t.margin) == null ? void 0 : u.horizontal) || 0,
|
|
291
|
+
vertical: ((m = t.margin) == null ? void 0 : m.vertical) || 0
|
|
292
|
+
},
|
|
293
|
+
scale: f
|
|
240
294
|
});
|
|
241
295
|
},
|
|
242
|
-
|
|
243
|
-
|
|
296
|
+
applyMargin(t, i) {
|
|
297
|
+
var c, f, h, p, s, a, l, u;
|
|
298
|
+
const e = i.margin;
|
|
299
|
+
if (!e || !t.offset)
|
|
300
|
+
return t;
|
|
301
|
+
const n = {
|
|
302
|
+
...t.offset
|
|
303
|
+
}, o = e.horizontal || 0, r = e.vertical || 0, d = t.flipped ? -1 : 1;
|
|
304
|
+
return ((c = i.anchorAlign) == null ? void 0 : c.horizontal) === "left" && ((f = i.popupAlign) == null ? void 0 : f.horizontal) === "right" ? n.left -= o * d : ((h = i.anchorAlign) == null ? void 0 : h.horizontal) === "right" && ((p = i.popupAlign) == null ? void 0 : p.horizontal) === "left" && (n.left += o * d), ((s = i.anchorAlign) == null ? void 0 : s.vertical) === "top" && ((a = i.popupAlign) == null ? void 0 : a.vertical) === "bottom" ? n.top -= r * d : ((l = i.anchorAlign) == null ? void 0 : l.vertical) === "bottom" && ((u = i.popupAlign) == null ? void 0 : u.vertical) === "top" && (n.top += r * d), {
|
|
305
|
+
...t,
|
|
306
|
+
offset: n
|
|
307
|
+
};
|
|
308
|
+
},
|
|
309
|
+
calculatePosition(t, i) {
|
|
310
|
+
if (!i || !A() || !v)
|
|
244
311
|
return {
|
|
245
312
|
flipped: !1,
|
|
246
313
|
offset: t.offset
|
|
247
314
|
};
|
|
248
|
-
const
|
|
249
|
-
if (
|
|
250
|
-
|
|
315
|
+
const e = O(this), n = document.createElement("div"), o = this.$el && this.$el.firstChild && this.$el.firstChild.firstChild ? this.$el.firstChild.firstChild.cloneNode(!0) : null, r = o && o.getBoundingClientRect ? o : this._clonedElement;
|
|
316
|
+
if (r)
|
|
317
|
+
n.appendChild(r);
|
|
251
318
|
else {
|
|
252
|
-
const
|
|
253
|
-
|
|
319
|
+
const s = e && e[0].props ? e[0].props.class : "", a = this.$props.popupClass;
|
|
320
|
+
n.innerHTML = `<div class="k-animation-container k-animation-container-relative">
|
|
254
321
|
<div class="k-popup k-animation-container k-animation-container-relative">
|
|
255
|
-
<div class="${
|
|
322
|
+
<div class="${s} ${a}" >
|
|
256
323
|
</div>
|
|
257
324
|
</div>
|
|
258
325
|
</div>`;
|
|
259
326
|
}
|
|
260
|
-
if (
|
|
261
|
-
const
|
|
262
|
-
|
|
263
|
-
const
|
|
264
|
-
if (
|
|
265
|
-
for (const [
|
|
266
|
-
|
|
327
|
+
if (i.appendChild(n), n && n.firstChild) {
|
|
328
|
+
const s = n.firstChild;
|
|
329
|
+
s.style.position = "absolute", s.style.visibility = "hidden", s.style.display = "block", s.style.left = "-1000", s.style.top = "0";
|
|
330
|
+
const a = e && e[0].props ? e[0].props.style : {};
|
|
331
|
+
if (a)
|
|
332
|
+
for (const [l, u] of Object.entries(a))
|
|
333
|
+
s.style[l] = u;
|
|
267
334
|
}
|
|
268
|
-
const d = this.position(t,
|
|
269
|
-
return
|
|
335
|
+
const d = n.firstChild, c = parseFloat(window.getComputedStyle(d).width), f = c > 0 ? d.getBoundingClientRect().width / c : 1, h = (this.$props.scale || 1) * f, p = this.position(t, d, this.$props.anchor, h);
|
|
336
|
+
return n.parentNode.removeChild(n), p;
|
|
270
337
|
},
|
|
271
338
|
attachRepositionHandlers(t) {
|
|
272
|
-
this.detachRepositionHandlers(), this._scrollableParents = this._domService.scrollableParents(this.$props.anchor ? this.mountedAnchor : t), this._scrollableParents.map((
|
|
339
|
+
this.detachRepositionHandlers(), this._scrollableParents = this._domService.scrollableParents(this.$props.anchor ? this.mountedAnchor : t), this._scrollableParents.map((i) => i.addEventListener("scroll", this.reposition)), A() && window.addEventListener("resize", this.reposition);
|
|
273
340
|
},
|
|
274
341
|
detachRepositionHandlers() {
|
|
275
|
-
this._scrollableParents && (this._scrollableParents.map((t) => t.removeEventListener("scroll", this.reposition)), this._scrollableParents = void 0),
|
|
342
|
+
this._scrollableParents && (this._scrollableParents.map((t) => t.removeEventListener("scroll", this.reposition)), this._scrollableParents = void 0), A() && window.removeEventListener("resize", this.reposition);
|
|
343
|
+
},
|
|
344
|
+
attachResizeObserver(t) {
|
|
345
|
+
this.detachResizeObserver(), typeof ResizeObserver != "undefined" && (this._resizeObserver = new ResizeObserver(() => this.reposition()), this._resizeObserver.observe(t));
|
|
346
|
+
},
|
|
347
|
+
detachResizeObserver() {
|
|
348
|
+
var t;
|
|
349
|
+
(t = this._resizeObserver) == null || t.disconnect(), this._resizeObserver = void 0;
|
|
276
350
|
},
|
|
277
351
|
reposition() {
|
|
278
352
|
this._clonedElement = this.$el.cloneNode(!0), this.$forceUpdate();
|
|
279
353
|
},
|
|
280
354
|
getCurrentZIndex() {
|
|
281
|
-
return this.kCurrentZIndex ? this.kCurrentZIndex +
|
|
355
|
+
return this.kCurrentZIndex ? this.kCurrentZIndex + N : I;
|
|
282
356
|
},
|
|
283
357
|
hasCustomOffset(t) {
|
|
284
|
-
return t ? t.left !==
|
|
358
|
+
return t ? t.left !== $.left || t.top !== $.top : !1;
|
|
285
359
|
}
|
|
286
360
|
},
|
|
287
361
|
render() {
|
|
362
|
+
var h, p;
|
|
288
363
|
const {
|
|
289
364
|
className: t,
|
|
290
|
-
popupClass:
|
|
291
|
-
show:
|
|
292
|
-
id:
|
|
293
|
-
} = this.$props,
|
|
365
|
+
popupClass: i,
|
|
366
|
+
show: e,
|
|
367
|
+
id: n
|
|
368
|
+
} = this.$props, o = O(this), r = o, d = this.hasCustomOffset(this.$props.offset) ? F : void 0, c = A() ? this.$props.appendTo ? this.mountedAppendTo || this.getParentRef(this.$props.appendTo) : document.body : void 0;
|
|
294
369
|
if (this.$props.show) {
|
|
295
|
-
const
|
|
296
|
-
this._offsetLeft =
|
|
370
|
+
const s = this.calculatePosition(this.$props, c);
|
|
371
|
+
this._offsetLeft = s.offset.left, this._offsetTop = s.offset.top, this._flipped = !!s.flipped;
|
|
372
|
+
const a = {
|
|
373
|
+
target: this,
|
|
374
|
+
fitted: !!s.fitted,
|
|
375
|
+
flipped: !!s.flipped
|
|
376
|
+
};
|
|
377
|
+
(p = (h = this.$props).onPosition) == null || p.call(h, a), this.$emit("position", a);
|
|
297
378
|
}
|
|
298
|
-
const
|
|
379
|
+
const f = this.getCurrentZIndex();
|
|
299
380
|
if (!this.hasMounted)
|
|
300
|
-
return
|
|
301
|
-
id:
|
|
381
|
+
return g("div", {
|
|
382
|
+
id: n,
|
|
302
383
|
style: {
|
|
303
|
-
display: "none"
|
|
384
|
+
display: "none",
|
|
385
|
+
...this.$props.style
|
|
304
386
|
},
|
|
305
387
|
class: t
|
|
306
|
-
}, [
|
|
307
|
-
class: [
|
|
388
|
+
}, [g("div", {
|
|
389
|
+
class: [i, E],
|
|
308
390
|
style: d
|
|
309
|
-
}, [
|
|
310
|
-
if ((
|
|
311
|
-
const
|
|
312
|
-
zIndex:
|
|
313
|
-
position: "absolute",
|
|
391
|
+
}, [o])]);
|
|
392
|
+
if ((e || this._exitingAnimation) && c) {
|
|
393
|
+
const s = {
|
|
394
|
+
zIndex: f,
|
|
395
|
+
position: this.$props.positionMode || "absolute",
|
|
314
396
|
top: this._offsetTop + "px",
|
|
315
397
|
left: this._offsetLeft + "px",
|
|
316
|
-
pointerEvents:
|
|
398
|
+
pointerEvents: e ? "auto" : "none",
|
|
399
|
+
...this.$props.style
|
|
317
400
|
};
|
|
318
|
-
if (
|
|
401
|
+
if (e && !this._opened) {
|
|
319
402
|
this._opened = !0;
|
|
320
|
-
const
|
|
403
|
+
const l = this._animationGeneration;
|
|
321
404
|
this.transitionDuration().enter === 0 ? this._enterTimerId = setTimeout(() => {
|
|
322
|
-
this._enterTimerId = null,
|
|
405
|
+
this._enterTimerId = null, l === this._animationGeneration && (!this.$props.show || !this._opened || this.onOpened());
|
|
323
406
|
}, 0) : this.$nextTick(() => {
|
|
324
|
-
if (
|
|
407
|
+
if (l !== this._animationGeneration || !this.$props.show || !this._opened)
|
|
325
408
|
return;
|
|
326
|
-
const
|
|
327
|
-
if (!
|
|
409
|
+
const m = this.$el;
|
|
410
|
+
if (!m)
|
|
328
411
|
return;
|
|
329
|
-
const
|
|
330
|
-
|
|
331
|
-
|
|
412
|
+
const _ = m.firstChild;
|
|
413
|
+
_ ? this.animateElement(_, "enter", () => {
|
|
414
|
+
l === this._animationGeneration && this.$props.show && this.onOpened();
|
|
332
415
|
}) : this.onOpened();
|
|
333
416
|
});
|
|
334
417
|
}
|
|
335
|
-
const
|
|
336
|
-
return
|
|
337
|
-
id:
|
|
338
|
-
class: ["k-animation-container",
|
|
339
|
-
style:
|
|
340
|
-
|
|
418
|
+
const a = this.animationOpen ? b : "";
|
|
419
|
+
return g("div", {
|
|
420
|
+
id: n,
|
|
421
|
+
class: ["k-animation-container", a, t],
|
|
422
|
+
style: s,
|
|
423
|
+
onKeydown: (l) => {
|
|
424
|
+
this.$emit("keydown", l);
|
|
425
|
+
}
|
|
426
|
+
}, [g("div", {
|
|
341
427
|
class: ["k-child-animation-container"],
|
|
342
428
|
style: {
|
|
343
429
|
transitionDelay: "0ms",
|
|
344
430
|
display: "block"
|
|
345
431
|
}
|
|
346
|
-
}, [
|
|
347
|
-
|
|
348
|
-
|
|
432
|
+
}, [g("div", {
|
|
433
|
+
role: this.$props.role,
|
|
434
|
+
"aria-labelledby": this.$props.ariaLabelledBy,
|
|
435
|
+
"aria-describedby": this.$props.ariaDescribedBy,
|
|
436
|
+
class: [i, E]
|
|
437
|
+
}, [r])])]);
|
|
349
438
|
}
|
|
350
|
-
return
|
|
351
|
-
id:
|
|
439
|
+
return g("div", {
|
|
440
|
+
id: n,
|
|
352
441
|
style: {
|
|
353
442
|
display: "none"
|
|
354
443
|
},
|
|
@@ -357,5 +446,5 @@ const L = 100, R = 1, g = {
|
|
|
357
446
|
}
|
|
358
447
|
});
|
|
359
448
|
export {
|
|
360
|
-
|
|
449
|
+
X as Popup
|
|
361
450
|
};
|
|
@@ -12,4 +12,4 @@
|
|
|
12
12
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
13
13
|
*-------------------------------------------------------------------------------------------
|
|
14
14
|
*/
|
|
15
|
-
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("vue"),require("@progress/kendo-popup-common"),require("@progress/kendo-vue-common")):"function"==typeof define&&define.amd?define(["exports","vue","@progress/kendo-popup-common","@progress/kendo-vue-common"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoVuePopup={},t.Vue,t.KendoPopupCommon,t.KendoVueCommon)}(this,function(t,e,n,i){"use strict";const o=(t,e)=>t||{height:0,left:e.left,top:e.top,width:0},s=()=>"undefined"!=typeof document&&!!document.body,r=()=>"undefined"!=typeof window,l=/auto|scroll/,a=t=>{const e=window.getComputedStyle(t);return`${e.overflow}${e.overflowX}${e.overflowY}`},d=1e3/60,c=(()=>{if(!s())return!1;const t=document.createElement("div");if(t.style.transform="matrix(10, 0, 0, 10, 0, 0)",t.innerHTML="<div>child</div>",document.body.appendChild(t),t&&t.firstChild){const e=t.firstChild;e.style.position="fixed",e.style.top="10px"}const e=10!==t.children[0].getBoundingClientRect().top;return document.body.removeChild(t),e})(),h="fit",p="flip",u="left",f="bottom",m="top";class w{constructor(t){this._dom=t}alignElement(t){const{anchor:e,element:n,anchorAlign:i,elementAlign:o,offset:s}=t,r=this._dom.hasOffsetParent(n)?this.relativeRect(e,n,s):this.absoluteRect(e,n,s);return this._dom.align({anchorAlign:i,anchorRect:r,elementAlign:o,elementRect:this._dom.offset(n)})}absoluteRect(t,e,n){const i=this._dom,s=((t,e)=>e?{height:t.height,left:t.left-e.left,top:t.top-e.top,width:t.width}:t)(o(i.offset(t),n),i.stackingElementOffset(e)),r=i.stackingElementScroll(e),l=i.addScroll(s,r),a=this.elementScrollPosition(t,e),d=i.removeScroll(l,a);return d.left+=window.scrollX||window.pageXOffset,d.top+=window.scrollY||window.pageYOffset,d}elementScrollPosition(t,e){return t?{x:0,y:0}:this._dom.scrollPosition(e)}relativeRect(t,e,n){return o(this._dom.position(t,e),n)}}class g{addOffset(t,e){return{left:t.left+e.left,top:t.top+e.top}}align(t){return n.align(t)}boundingOffset(t){return n.boundingOffset(t)}getWindow(){return r()?window:null}isBodyOffset(t){return n.isBodyOffset(t)}hasOffsetParent(t){if(!t)return!1;const e=t.offsetParent;return e&&!("BODY"===e.nodeName&&"static"===window.getComputedStyle(e).position)}offset(t){return t?n.offset(t):null}staticOffset(t){if(!t)return null;const{left:e,top:i}=t.style;t.style.left="0px",t.style.top="0px";const o=n.offset(t);return t.style.left=e,t.style.top=i,o}position(t,e){if(!t||!e)return null;const i=n.siblingContainer(t,e);return n.positionWithScroll(t,i)}relativeOffset(t,e){return n.applyLocationOffset(this.offset(t),e,this.isBodyOffset(t))}addScroll(t,e){return n.addScroll(t,e)}removeScroll(t,e){return n.removeScroll(t,e)}restrictToView(t){return n.restrictToView(t)}scrollPosition(t){return n.scrollPosition(t)}scrollableParents(t){return(t=>{const e=[];if(!s()||!r())return e;let n=t.parentElement;for(;n;)l.test(a(n))&&e.push(n),n=n.parentElement;return e.push(window),e})(t)}stackingElementOffset(t){const e=this.getRelativeContextElement(t);return e?n.offset(e):null}stackingElementScroll(t){const e=this.getRelativeContextElement(t);return e?{x:e.scrollLeft,y:e.scrollTop}:{x:0,y:0}}stackingElementViewPort(t){const e=this.getRelativeContextElement(t);return e?{height:e.scrollHeight,width:e.scrollWidth}:null}getRelativeContextElement(t){if(!t||!c)return null;let e=t.parentElement;for(;e;){if("none"!==window.getComputedStyle(e).transform)return e;e=e.parentElement}return null}useRelativePosition(t){return!!this.getRelativeContextElement(t)}windowViewPort(t){return n.getWindowViewPort(t)}zIndex(t,e){return((t,e)=>{if(!t||!s()||!r())return null;const i=n.siblingContainer(t,e);if(!i)return null;const o=[t].concat(n.parents(t,i)).reduce((t,e)=>{const n=e.style.zIndex||window.getComputedStyle(e).zIndex,i=parseInt(n,10);return i>t?i:t},0);return o?o+1:null})(t,e)}zoomLevel(){return s()&&r()?parseFloat((document.documentElement.clientWidth/window.innerWidth).toFixed(2)):1}isZoomed(){return this.zoomLevel()>1}}let v=class{constructor(t){this._dom=t}positionElement(t){const{anchor:e,currentLocation:n,element:i,anchorAlign:s,elementAlign:r,collisions:l}=t,a=this._dom,d=t.viewPort||a.stackingElementViewPort(i)||a.windowViewPort(i),c=o(a.offset(e),n),h=((t,e)=>e?{height:t.height,left:e.left,top:e.top,width:t.width}:t)(a.staticOffset(i),n),p=this.elementRect(i,h),u=a.restrictToView({anchorAlign:s,anchorRect:c,collisions:l,elementAlign:r,elementRect:p,viewPort:d});return{flipped:u.flipped,offset:a.addOffset(h,u.offset)}}elementRect(t,e){return this._dom.removeScroll(e,this._dom.scrollPosition(t))}};const _={name:"@progress/kendo-vue-popup",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate:1657007252,version:"9.3.0-develop.3",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"},y={left:-1e3,top:0},C="k-popup",$={margin:"0"},E=e.defineComponent({name:"Popup",props:{appendTo:{type:String,default:""},anchor:{type:[String,Object],default:""},className:String,id:String,popupClass:String,collision:{type:Object,default:function(){return{horizontal:h,vertical:p}}},anchorAlign:{type:Object,default:function(){return{horizontal:u,vertical:f}}},popupAlign:{type:Object,default:function(){return{horizontal:u,vertical:m}}},offset:{type:Object,default:function(){return y}},show:{type:Boolean,default:!1},animate:{type:[Boolean,Object],default:!0},direction:{type:String,default:"down"},onOpen:Function,onClose:Function,onMousedownoutside:Function},inject:{kCurrentZIndex:{default:null}},data:()=>({hasMounted:!1,animationOpen:!1}),watch:{show(t,e){if(e&&!t)if(this._cancelPendingAnimations(),this._opened&&(this._opened=!1,this.onClosing()),0===this.transitionDuration().exit)this.onClosed();else{this._exitingAnimation=!0;const t=this._animationGeneration;this.$nextTick(()=>{if(t!==this._animationGeneration)return;const e=this.$el;if(!e||!this._exitingAnimation)return this._exitingAnimation=!1,this.$forceUpdate(),void this.onClosed();const n=e.firstChild;n?this.animateElement(n,"exit",()=>{t===this._animationGeneration&&(this._exitingAnimation=!1,this.$forceUpdate(),this.onClosed())}):(this._exitingAnimation=!1,this.$forceUpdate(),this.onClosed())})}else!e&&t&&(this._cancelPendingAnimations(),this._exitingAnimation=!1)}},created(){i.validatePackage(_),this.mountedAppendTo=void 0,this.mountedAnchor=void 0,this._clonedElement=void 0,this._flipped=!1,this._offsetTop=0,this._offsetLeft=-1e3,this._opened=!1,this._exitingAnimation=!1,this._animationGeneration=0,this._enterTimerId=null,this._cancelAnimation=null,this._domService=new g,this._alignService=new w(this._domService),this._positionService=new v(this._domService),this.reposition=function(t,e,n={}){let i,o,s,r,l=0;n=n||{};const a=function(){l=!1===n.leading?0:(new Date).getTime(),i=null,r=t.apply(o,s),i||(o=s=null)};return function(){const d=(new Date).getTime();!l&&!1===n.leading&&(l=d);const c=e-(d-l);return o=this,s=arguments,c<=0||c>e?(i&&(clearTimeout(i),i=null),l=d,r=t.apply(o,s),i||(o=s=null)):!i&&!1!==n.trailing&&(i=setTimeout(a,c)),r}}(this.reposition.bind(this),d)},mounted(){i.canUseDOM&&(this.mountedAppendTo=this.appendTo?this.getParentRef(this.appendTo):document.body,this.mountedAnchor=this.anchor?this.getParentRef(this.anchor,!0):document.body),this._parentElement=this.$el.parentElement,this._clonedElement=this.$el.cloneNode(!0),this.hasMounted=!0,this.mountedAppendTo.appendChild(this.$el)},updated(){if(this.hasMounted&&this.mountedAppendTo){const t=this.$el;1===(null==t?void 0:t.nodeType)&&t.parentElement!==this.mountedAppendTo&&this.mountedAppendTo.appendChild(t)}},unmounted(){this.detachRepositionHandlers(),"undefined"!=typeof window&&window.removeEventListener("mousedown",this.handleMouseDown)},beforeUnmount(){this._parentElement&&this._parentElement.appendChild(this.$el)},methods:{handleMouseDown(t){var e,n;const i=null===(null==(e=null==t?void 0:t.target)?void 0:e.closest(".k-animation-container")),o=(null==(n=this.mountedAnchor)?void 0:n.contains(null==t?void 0:t.target))||!1;if(i){const e={target:this,event:t,isAnchorClicked:o};this.$emit("mousedownoutside",e),"undefined"!=typeof window&&window.removeEventListener("mousedown",this.handleMouseDown)}},onOpened(){const t=this.$el;"undefined"!=typeof window&&window.addEventListener("mousedown",this.handleMouseDown),this.$props.show&&(this.animationOpen=!0),this.attachRepositionHandlers(t),this.$emit("open",{target:this})},onClosing(){this.$props.show||(this.animationOpen=!1),this.detachRepositionHandlers(),"undefined"!=typeof window&&window.removeEventListener("mousedown",this.handleMouseDown)},onClosed(){this.$emit("close",{target:this})},transitionDuration(){const t=this.$props.animate;let e=0,n=0;return t&&(!0===t?e=n=300:(e=t.openDuration||0,n=t.closeDuration||0)),{enter:e,exit:n}},_cancelPendingAnimations(){this._animationGeneration++,null!==this._enterTimerId&&(clearTimeout(this._enterTimerId),this._enterTimerId=null),this._cancelAnimation&&(this._cancelAnimation(),this._cancelAnimation=null)},animateElement(t,e,n){const i=this.transitionDuration()[e];if(0===i)return n();const o=t.ownerDocument,s=null==o?void 0:o.defaultView;if(!s)return n();const r="down"===this.$props.direction,l=this._flipped?"up":"down",a=this._flipped?"down":"up",d=r?l:a,c=`k-slide-${d}-${e}`,h=`k-slide-${d}-${e}-active`;let p=!1,u=null;const f=()=>{t.removeEventListener("transitionend",w),u&&(clearTimeout(u),u=null),t.style.transitionDuration="",t.classList.remove(c,h)},m=()=>{p||(p=!0,f(),t.style.display="exit"===e?"none":"",this._cancelAnimation=null,n())},w=e=>{e.target===t&&m()};t.addEventListener("transitionend",w),u=setTimeout(m,i+50),t.style.transitionDuration="",t.classList.remove(c,h),"enter"===e&&(t.style.display=""),t.classList.add(c),s.requestAnimationFrame(()=>{p||(t.style.transitionDuration=i+"ms",t.classList.add(h))}),this._cancelAnimation=()=>{p||(p=!0,f(),t.style.display="")}},isAnimationInstant(t){if(0===this.transitionDuration()[t])return!0;if("undefined"!=typeof window&&this.$el){const t=this.$el.firstChild;if(t){const e=window.getComputedStyle(t),n=parseFloat(e.transitionDuration||"0"),i=parseFloat(e.animationDuration||"0");if(0===n&&0===i)return!0}}return!1},getParentRef(t,e){let n=this.$parent;for(;!n.$refs[t];){if(n&&n.kendoAnchorRef&&e)return n.kendoAnchorRef;if(n=n.$parent,!n&&i.canUseDOM)return document.getElementById(t)||document.body}return n.$refs[t].$el||n.$refs[t]},position(t,e,n){const{anchorAlign:i,popupAlign:o,collision:s,offset:r}=t,l=n?this.mountedAnchor:document.body,a=this._alignService.alignElement({anchor:n?l:void 0,element:e,elementAlign:o,anchorAlign:i,offset:r});return this._positionService.positionElement({anchor:l,anchorAlign:i,collisions:s,element:e,currentLocation:a,elementAlign:o})},calculatePosition(t,e){if(!e||!r()||!i.canUseDOM)return{flipped:!1,offset:t.offset};const n=i.getDefaultSlots(this),o=document.createElement("div"),s=this.$el&&this.$el.firstChild&&this.$el.firstChild.firstChild?this.$el.firstChild.firstChild.cloneNode(!0):null,l=s&&s.getBoundingClientRect?s:this._clonedElement;if(l)o.appendChild(l);else{const t=n&&n[0].props?n[0].props.class:"",e=this.$props.popupClass;o.innerHTML=`<div class="k-animation-container k-animation-container-relative">\n <div class="k-popup k-animation-container k-animation-container-relative">\n <div class="${t} ${e}" >\n </div>\n </div>\n </div>`}if(e.appendChild(o),o&&o.firstChild){const t=o.firstChild;t.style.position="absolute",t.style.visibility="hidden",t.style.display="block",t.style.left="-1000",t.style.top="0";const e=n&&n[0].props?n[0].props.style:{};if(e)for(const[n,i]of Object.entries(e))t.style[n]=i}const a=this.position(t,o.firstChild,this.$props.anchor);return o.parentNode.removeChild(o),a},attachRepositionHandlers(t){this.detachRepositionHandlers(),this._scrollableParents=this._domService.scrollableParents(this.$props.anchor?this.mountedAnchor:t),this._scrollableParents.map(t=>t.addEventListener("scroll",this.reposition)),r()&&window.addEventListener("resize",this.reposition)},detachRepositionHandlers(){this._scrollableParents&&(this._scrollableParents.map(t=>t.removeEventListener("scroll",this.reposition)),this._scrollableParents=void 0),r()&&window.removeEventListener("resize",this.reposition)},reposition(){this._clonedElement=this.$el.cloneNode(!0),this.$forceUpdate()},getCurrentZIndex(){return this.kCurrentZIndex?this.kCurrentZIndex+1:100},hasCustomOffset:t=>!!t&&(t.left!==y.left||t.top!==y.top)},render(){const{className:t,popupClass:n,show:o,id:s}=this.$props,l=i.getDefaultSlots(this),a=l,d=this.hasCustomOffset(this.$props.offset)?$:void 0,c=r()?this.$props.appendTo?this.mountedAppendTo||this.getParentRef(this.$props.appendTo):document.body:void 0;if(this.$props.show){const t=this.calculatePosition(this.$props,c);this._offsetLeft=t.offset.left,this._offsetTop=t.offset.top,this._flipped=!!t.flipped}const h=this.getCurrentZIndex();if(!this.hasMounted)return e.createVNode("div",{id:s,style:{display:"none"},class:t},[e.createVNode("div",{class:[n,C],style:d},[l])]);if((o||this._exitingAnimation)&&c){const i={zIndex:h,position:"absolute",top:this._offsetTop+"px",left:this._offsetLeft+"px",pointerEvents:o?"auto":"none"};if(o&&!this._opened){this._opened=!0;const t=this._animationGeneration;0===this.transitionDuration().enter?this._enterTimerId=setTimeout(()=>{this._enterTimerId=null,t===this._animationGeneration&&(!this.$props.show||!this._opened||this.onOpened())},0):this.$nextTick(()=>{if(t!==this._animationGeneration||!this.$props.show||!this._opened)return;const e=this.$el;if(!e)return;const n=e.firstChild;n?this.animateElement(n,"enter",()=>{t===this._animationGeneration&&this.$props.show&&this.onOpened()}):this.onOpened()})}const r=this.animationOpen?"k-animation-container-shown":"";return e.createVNode("div",{id:s,class:["k-animation-container","k-animation-container-relative",r,t],style:i},[e.createVNode("div",{class:["k-child-animation-container"],style:{transitionDelay:"0ms",display:"block"}},[e.createVNode("div",{class:[n,C]},[a])])])}return e.createVNode("div",{id:s,style:{display:"none"},class:t},null)}});t.Popup=E});
|
|
15
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("@progress/kendo-popup-common"),require("@progress/kendo-vue-common")):"function"==typeof define&&define.amd?define(["exports","vue","@progress/kendo-popup-common","@progress/kendo-vue-common"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoVuePopup={},e.Vue,e.KendoPopupCommon,e.KendoVueCommon)}(this,function(e,t,n,i){"use strict";const o=(e,t)=>e||{height:0,left:t.left,top:t.top,width:0},s=()=>"undefined"!=typeof document&&!!document.body,r=()=>"undefined"!=typeof window,l=/auto|scroll/,a=e=>{const t=window.getComputedStyle(e);return`${t.overflow}${t.overflowX}${t.overflowY}`},d=1e3/60,h=(()=>{if(!s())return!1;const e=document.createElement("div");if(e.style.transform="matrix(10, 0, 0, 10, 0, 0)",e.innerHTML="<div>child</div>",document.body.appendChild(e),e&&e.firstChild){const t=e.firstChild;t.style.position="fixed",t.style.top="10px"}const t=10!==e.children[0].getBoundingClientRect().top;return document.body.removeChild(e),t})(),c="fit",p="flip",u="left",f="bottom",m="top";class g{constructor(e){this._dom=e}alignElement(e){const{anchor:t,element:n,anchorAlign:i,elementAlign:o,offset:s}=e,r=this._dom.hasOffsetParent(n)?this.relativeRect(t,n,s):this.absoluteRect(t,n,s);return this._dom.align({anchorAlign:i,anchorRect:r,elementAlign:o,elementRect:this._dom.offset(n)})}absoluteRect(e,t,n){const i=this._dom,s=((e,t)=>t?{height:e.height,left:e.left-t.left,top:e.top-t.top,width:e.width}:e)(o(i.offset(e),n),i.stackingElementOffset(t)),r=i.stackingElementScroll(t),l=i.addScroll(s,r),a=this.elementScrollPosition(e,t),d=i.removeScroll(l,a);return d.left+=window.scrollX||window.pageXOffset,d.top+=window.scrollY||window.pageYOffset,d}elementScrollPosition(e,t){return e?{x:0,y:0}:this._dom.scrollPosition(t)}relativeRect(e,t,n){return o(this._dom.position(e,t),n)}}class v{addOffset(e,t){return{left:e.left+t.left,top:e.top+t.top}}align(e){return n.align(e)}boundingOffset(e){return n.boundingOffset(e)}getWindow(){return r()?window:null}isBodyOffset(e){return n.isBodyOffset(e)}hasOffsetParent(e){if(!e)return!1;const t=e.offsetParent;return t&&!("BODY"===t.nodeName&&"static"===window.getComputedStyle(t).position)}offset(e){return e?n.offset(e):null}staticOffset(e){if(!e)return null;const{left:t,top:i}=e.style;e.style.left="0px",e.style.top="0px";const o=n.offset(e);return e.style.left=t,e.style.top=i,o}position(e,t){if(!e||!t)return null;const i=n.siblingContainer(e,t);return n.positionWithScroll(e,i)}relativeOffset(e,t){return n.applyLocationOffset(this.offset(e),t,this.isBodyOffset(e))}addScroll(e,t){return n.addScroll(e,t)}removeScroll(e,t){return n.removeScroll(e,t)}restrictToView(e){return n.restrictToView(e)}scrollPosition(e){return n.scrollPosition(e)}scrollableParents(e){return(e=>{const t=[];if(!s()||!r())return t;let n=e.parentElement;for(;n;)l.test(a(n))&&t.push(n),n=n.parentElement;return t.push(window),t})(e)}stackingElementOffset(e){const t=this.getRelativeContextElement(e);return t?n.offset(t):null}stackingElementScroll(e){const t=this.getRelativeContextElement(e);return t?{x:t.scrollLeft,y:t.scrollTop}:{x:0,y:0}}stackingElementViewPort(e){const t=this.getRelativeContextElement(e);return t?{height:t.scrollHeight,width:t.scrollWidth}:null}getRelativeContextElement(e){if(!e||!h)return null;let t=e.parentElement;for(;t;){if("none"!==window.getComputedStyle(t).transform)return t;t=t.parentElement}return null}useRelativePosition(e){return!!this.getRelativeContextElement(e)}windowViewPort(e){return n.getWindowViewPort(e)}zIndex(e,t){return((e,t)=>{if(!e||!s()||!r())return null;const i=n.siblingContainer(e,t);if(!i)return null;const o=[e].concat(n.parents(e,i)).reduce((e,t)=>{const n=t.style.zIndex||window.getComputedStyle(t).zIndex,i=parseInt(n,10);return i>e?i:e},0);return o?o+1:null})(e,t)}zoomLevel(){return s()&&r()?parseFloat((document.documentElement.clientWidth/window.innerWidth).toFixed(2)):1}isZoomed(){return this.zoomLevel()>1}}class w{constructor(e){this._dom=e}positionElement(e){const{anchor:t,currentLocation:n,element:i,anchorAlign:s,elementAlign:r,collisions:l}=e,a=this._dom,d=e.viewPort||a.stackingElementViewPort(i)||a.windowViewPort(i),h=o(a.offset(t),n),c=((e,t)=>t?{height:e.height,left:t.left,top:t.top,width:e.width}:e)(a.staticOffset(i),n),p=this.elementRect(i,c),u=a.restrictToView({anchorAlign:s,anchorRect:h,collisions:l,elementAlign:r,elementRect:p,viewPort:d});return{fitted:u.fitted,flipped:u.flipped,offset:a.addOffset(c,u.offset)}}elementRect(e,t){return this._dom.removeScroll(t,this._dom.scrollPosition(e))}}const y={name:"@progress/kendo-vue-popup",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate:1657007252,version:"9.3.0-develop.5",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"},_={left:-1e3,top:0},b="k-animation-container-shown",$="k-popup",A={margin:"0"},C=t.defineComponent({name:"Popup",emits:["open","close","position","keydown","mousedownoutside"],props:{appendTo:{type:[String,Object],default:""},anchor:{type:[String,Object],default:""},className:[String,Array,Object],id:String,popupClass:[String,Array,Object],collision:{type:Object,default:function(){return{horizontal:c,vertical:p}}},anchorAlign:{type:Object,default:function(){return{horizontal:u,vertical:f}}},popupAlign:{type:Object,default:function(){return{horizontal:u,vertical:m}}},offset:{type:Object,default:function(){return _}},show:{type:Boolean,default:!1},animate:{type:[Boolean,Object],default:!0},direction:{type:String,default:"down"},margin:Object,positionMode:String,scale:Number,role:String,ariaLabelledBy:String,ariaDescribedBy:String,onOpen:Function,onClose:Function,onPosition:Function,onMousedownoutside:Function},inject:{kCurrentZIndex:{default:null}},data:()=>({hasMounted:!1,animationOpen:!1}),watch:{anchor(e){!this.hasMounted||!i.canUseDOM||(this.mountedAnchor=e?this.getParentRef(e,!0):document.body,this.reposition())},appendTo(e){!this.hasMounted||!i.canUseDOM||(this.mountedAppendTo=e?this.getParentRef(e):document.body,this.$el.parentElement!==this.mountedAppendTo&&this.mountedAppendTo.appendChild(this.$el),this.reposition())},show(e,t){if(t&&!e)if(this._cancelPendingAnimations(),this._opened&&(this._opened=!1,this.onClosing()),0===this.transitionDuration().exit)this.onClosed();else{this._exitingAnimation=!0;const e=this._animationGeneration;this.$nextTick(()=>{if(e!==this._animationGeneration)return;const t=this.$el;if(!t||!this._exitingAnimation)return this._exitingAnimation=!1,this.$forceUpdate(),void this.onClosed();const n=t.firstChild;n?this.animateElement(n,"exit",()=>{e===this._animationGeneration&&(this._exitingAnimation=!1,this.$forceUpdate(),this.onClosed())}):(this._exitingAnimation=!1,this.$forceUpdate(),this.onClosed())})}else!t&&e&&(this._cancelPendingAnimations(),this._exitingAnimation=!1)}},created(){i.validatePackage(y),this.mountedAppendTo=void 0,this.mountedAnchor=void 0,this._clonedElement=void 0,this._flipped=!1,this._offsetTop=0,this._offsetLeft=-1e3,this._opened=!1,this._exitingAnimation=!1,this._animationGeneration=0,this._enterTimerId=null,this._cancelAnimation=null,this._resizeObserver=void 0,this._domService=new v,this._alignService=new g(this._domService),this._positionService=new w(this._domService),this.reposition=function(e,t,n={}){let i,o,s,r,l=0;n=n||{};const a=function(){l=!1===n.leading?0:(new Date).getTime(),i=null,r=e.apply(o,s),i||(o=s=null)};return function(){const d=(new Date).getTime();!l&&!1===n.leading&&(l=d);const h=t-(d-l);return o=this,s=arguments,h<=0||h>t?(i&&(clearTimeout(i),i=null),l=d,r=e.apply(o,s),i||(o=s=null)):!i&&!1!==n.trailing&&(i=setTimeout(a,h)),r}}(this.reposition.bind(this),d)},mounted(){i.canUseDOM&&(this.mountedAppendTo=this.appendTo?this.getParentRef(this.appendTo):document.body,this.mountedAnchor=this.anchor?this.getParentRef(this.anchor,!0):document.body),this._parentElement=this.$el.parentElement,this._clonedElement=this.$el.cloneNode(!0),this.hasMounted=!0,this.mountedAppendTo.appendChild(this.$el),this.$forceUpdate()},updated(){if(this.hasMounted&&this.mountedAppendTo){const e=this.$el;1===(null==e?void 0:e.nodeType)&&e.parentElement!==this.mountedAppendTo&&this.mountedAppendTo.appendChild(e)}},unmounted(){this.detachRepositionHandlers(),this.detachResizeObserver(),"undefined"!=typeof window&&window.removeEventListener("mousedown",this.handleMouseDown)},beforeUnmount(){this._parentElement&&this._parentElement.appendChild(this.$el)},methods:{handleMouseDown(e){var t,n;const i=null===(null==(t=null==e?void 0:e.target)?void 0:t.closest(".k-animation-container")),o=(null==(n=this.mountedAnchor)?void 0:n.contains(null==e?void 0:e.target))||!1;if(i){const t={target:this,event:e,isAnchorClicked:o};this.$emit("mousedownoutside",t),"undefined"!=typeof window&&window.removeEventListener("mousedown",this.handleMouseDown)}},onOpened(){var e,t;const n=this.$el;"undefined"!=typeof window&&window.addEventListener("mousedown",this.handleMouseDown),this.$props.show&&(n.classList.add(b),this.animationOpen=!0),this.attachRepositionHandlers(n),this.attachResizeObserver(n);const i={target:this};null==(t=(e=this.$props).onOpen)||t.call(e,i),this.$emit("open",i)},onClosing(){this.$props.show||(this.$el.classList.remove(b),this.animationOpen=!1),this.detachRepositionHandlers(),this.detachResizeObserver(),"undefined"!=typeof window&&window.removeEventListener("mousedown",this.handleMouseDown)},onClosed(){var e,t;const n={target:this};null==(t=(e=this.$props).onClose)||t.call(e,n),this.$emit("close",n)},transitionDuration(){const e=this.$props.animate;let t=0,n=0;return e&&(!0===e?t=n=300:(t=e.openDuration||0,n=e.closeDuration||0)),{enter:t,exit:n}},_cancelPendingAnimations(){this._animationGeneration++,null!==this._enterTimerId&&(clearTimeout(this._enterTimerId),this._enterTimerId=null),this._cancelAnimation&&(this._cancelAnimation(),this._cancelAnimation=null)},animateElement(e,t,n){const i=this.transitionDuration()[t];if(0===i)return n();const o=e.ownerDocument,s=null==o?void 0:o.defaultView;if(!s)return n();const r="down"===this.$props.direction,l=this._flipped?"up":"down",a=this._flipped?"down":"up",d=r?l:a,h=`k-slide-${d}-${t}`,c=`k-slide-${d}-${t}-active`;let p=!1,u=null;const f=()=>{e.removeEventListener("transitionend",g),u&&(clearTimeout(u),u=null),e.style.transitionDuration="",e.classList.remove(h,c)},m=()=>{p||(p=!0,f(),e.style.display="exit"===t?"none":"",this._cancelAnimation=null,n())},g=t=>{t.target===e&&m()};e.addEventListener("transitionend",g),u=setTimeout(m,i+50),e.style.transitionDuration="",e.classList.remove(h,c),"enter"===t&&(e.style.display=""),e.classList.add(h),s.requestAnimationFrame(()=>{p||(e.style.transitionDuration=i+"ms",e.classList.add(c))}),this._cancelAnimation=()=>{p||(p=!0,f(),e.style.display="")}},isAnimationInstant(e){if(0===this.transitionDuration()[e])return!0;if("undefined"!=typeof window&&this.$el){const e=this.$el.firstChild;if(e){const t=window.getComputedStyle(e),n=parseFloat(t.transitionDuration||"0"),i=parseFloat(t.animationDuration||"0");if(0===n&&0===i)return!0}}return!1},getParentRef(e,t){if(e instanceof HTMLElement)return e;if(!e)return document.body;let n=this.$parent;for(;n&&!n.$refs[e];){if(n&&n.kendoAnchorRef&&t)return n.kendoAnchorRef;if(n=n.$parent,!n&&i.canUseDOM)return document.getElementById(e)||document.body}return n.$refs[e].$el||n.$refs[e]},position(e,t,i,o){var s,r,l,a;const{anchorAlign:d,popupAlign:h,collision:c,offset:p}=e,u=o||1,f=i?this.mountedAnchor:document.body;if(1===u){const n=this._alignService.alignElement({anchor:i?f:void 0,element:t,elementAlign:h,anchorAlign:d,offset:p}),o=this._positionService.positionElement({anchor:f,anchorAlign:d,collisions:c,element:t,currentLocation:n,elementAlign:h});return this.applyMargin(o,e)}const m=n.alignElement({anchor:i?f:void 0,element:t,elementAlign:h,anchorAlign:d,offset:p,margin:{horizontal:(null==(s=e.margin)?void 0:s.horizontal)||0,vertical:(null==(r=e.margin)?void 0:r.vertical)||0},positionMode:e.positionMode,scale:u});return n.positionElement({anchor:f,anchorAlign:d,collisions:c,element:t,currentLocation:m,elementAlign:h,margin:{horizontal:(null==(l=e.margin)?void 0:l.horizontal)||0,vertical:(null==(a=e.margin)?void 0:a.vertical)||0},scale:u})},applyMargin(e,t){var n,i,o,s,r,l,a,d;const h=t.margin;if(!h||!e.offset)return e;const c={...e.offset},p=h.horizontal||0,u=h.vertical||0,f=e.flipped?-1:1;return"left"===(null==(n=t.anchorAlign)?void 0:n.horizontal)&&"right"===(null==(i=t.popupAlign)?void 0:i.horizontal)?c.left-=p*f:"right"===(null==(o=t.anchorAlign)?void 0:o.horizontal)&&"left"===(null==(s=t.popupAlign)?void 0:s.horizontal)&&(c.left+=p*f),"top"===(null==(r=t.anchorAlign)?void 0:r.vertical)&&"bottom"===(null==(l=t.popupAlign)?void 0:l.vertical)?c.top-=u*f:"bottom"===(null==(a=t.anchorAlign)?void 0:a.vertical)&&"top"===(null==(d=t.popupAlign)?void 0:d.vertical)&&(c.top+=u*f),{...e,offset:c}},calculatePosition(e,t){if(!t||!r()||!i.canUseDOM)return{flipped:!1,offset:e.offset};const n=i.getDefaultSlots(this),o=document.createElement("div"),s=this.$el&&this.$el.firstChild&&this.$el.firstChild.firstChild?this.$el.firstChild.firstChild.cloneNode(!0):null,l=s&&s.getBoundingClientRect?s:this._clonedElement;if(l)o.appendChild(l);else{const e=n&&n[0].props?n[0].props.class:"",t=this.$props.popupClass;o.innerHTML=`<div class="k-animation-container k-animation-container-relative">\n <div class="k-popup k-animation-container k-animation-container-relative">\n <div class="${e} ${t}" >\n </div>\n </div>\n </div>`}if(t.appendChild(o),o&&o.firstChild){const e=o.firstChild;e.style.position="absolute",e.style.visibility="hidden",e.style.display="block",e.style.left="-1000",e.style.top="0";const t=n&&n[0].props?n[0].props.style:{};if(t)for(const[n,i]of Object.entries(t))e.style[n]=i}const a=o.firstChild,d=parseFloat(window.getComputedStyle(a).width),h=d>0?a.getBoundingClientRect().width/d:1,c=(this.$props.scale||1)*h,p=this.position(e,a,this.$props.anchor,c);return o.parentNode.removeChild(o),p},attachRepositionHandlers(e){this.detachRepositionHandlers(),this._scrollableParents=this._domService.scrollableParents(this.$props.anchor?this.mountedAnchor:e),this._scrollableParents.map(e=>e.addEventListener("scroll",this.reposition)),r()&&window.addEventListener("resize",this.reposition)},detachRepositionHandlers(){this._scrollableParents&&(this._scrollableParents.map(e=>e.removeEventListener("scroll",this.reposition)),this._scrollableParents=void 0),r()&&window.removeEventListener("resize",this.reposition)},attachResizeObserver(e){this.detachResizeObserver(),"undefined"!=typeof ResizeObserver&&(this._resizeObserver=new ResizeObserver(()=>this.reposition()),this._resizeObserver.observe(e))},detachResizeObserver(){var e;null==(e=this._resizeObserver)||e.disconnect(),this._resizeObserver=void 0},reposition(){this._clonedElement=this.$el.cloneNode(!0),this.$forceUpdate()},getCurrentZIndex(){return this.kCurrentZIndex?this.kCurrentZIndex+1:100},hasCustomOffset:e=>!!e&&(e.left!==_.left||e.top!==_.top)},render(){var e,n;const{className:o,popupClass:s,show:l,id:a}=this.$props,d=i.getDefaultSlots(this),h=d,c=this.hasCustomOffset(this.$props.offset)?A:void 0,p=r()?this.$props.appendTo?this.mountedAppendTo||this.getParentRef(this.$props.appendTo):document.body:void 0;if(this.$props.show){const t=this.calculatePosition(this.$props,p);this._offsetLeft=t.offset.left,this._offsetTop=t.offset.top,this._flipped=!!t.flipped;const i={target:this,fitted:!!t.fitted,flipped:!!t.flipped};null==(n=(e=this.$props).onPosition)||n.call(e,i),this.$emit("position",i)}const u=this.getCurrentZIndex();if(!this.hasMounted)return t.createVNode("div",{id:a,style:{display:"none",...this.$props.style},class:o},[t.createVNode("div",{class:[s,$],style:c},[d])]);if((l||this._exitingAnimation)&&p){const e={zIndex:u,position:this.$props.positionMode||"absolute",top:this._offsetTop+"px",left:this._offsetLeft+"px",pointerEvents:l?"auto":"none",...this.$props.style};if(l&&!this._opened){this._opened=!0;const e=this._animationGeneration;0===this.transitionDuration().enter?this._enterTimerId=setTimeout(()=>{this._enterTimerId=null,e===this._animationGeneration&&(!this.$props.show||!this._opened||this.onOpened())},0):this.$nextTick(()=>{if(e!==this._animationGeneration||!this.$props.show||!this._opened)return;const t=this.$el;if(!t)return;const n=t.firstChild;n?this.animateElement(n,"enter",()=>{e===this._animationGeneration&&this.$props.show&&this.onOpened()}):this.onOpened()})}const n=this.animationOpen?b:"";return t.createVNode("div",{id:a,class:["k-animation-container",n,o],style:e,onKeydown:e=>{this.$emit("keydown",e)}},[t.createVNode("div",{class:["k-child-animation-container"],style:{transitionDelay:"0ms",display:"block"}},[t.createVNode("div",{role:this.$props.role,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,class:[s,$]},[h])])])}return t.createVNode("div",{id:a,style:{display:"none"},class:o},null)}});e.Popup=C});
|
package/index.d.mts
CHANGED
|
@@ -12,5 +12,5 @@ import { Align } from './models/Align.js';
|
|
|
12
12
|
import { Collision } from './models/Collision.js';
|
|
13
13
|
import { Offset } from './models/Offset.js';
|
|
14
14
|
import { PopupAnimation } from './models/PopupAnimation.js';
|
|
15
|
-
import { OpenEvent as PopupOpenEvent, CloseEvent as PopupCloseEvent } from './models/Events.js';
|
|
16
|
-
export { Popup, type PopupProps, type PopupSettings, type Align, type Collision, type Offset, type PopupAnimation, type PopupOpenEvent, type PopupCloseEvent };
|
|
15
|
+
import { OpenEvent as PopupOpenEvent, CloseEvent as PopupCloseEvent, PositionEvent as PopupPositionEvent } from './models/Events.js';
|
|
16
|
+
export { Popup, type PopupProps, type PopupSettings, type Align, type Collision, type Offset, type PopupAnimation, type PopupOpenEvent, type PopupCloseEvent, type PopupPositionEvent };
|
package/index.d.ts
CHANGED
|
@@ -12,5 +12,5 @@ import { Align } from './models/Align';
|
|
|
12
12
|
import { Collision } from './models/Collision';
|
|
13
13
|
import { Offset } from './models/Offset';
|
|
14
14
|
import { PopupAnimation } from './models/PopupAnimation';
|
|
15
|
-
import { OpenEvent as PopupOpenEvent, CloseEvent as PopupCloseEvent } from './models/Events';
|
|
16
|
-
export { Popup, type PopupProps, type PopupSettings, type Align, type Collision, type Offset, type PopupAnimation, type PopupOpenEvent, type PopupCloseEvent };
|
|
15
|
+
import { OpenEvent as PopupOpenEvent, CloseEvent as PopupCloseEvent, PositionEvent as PopupPositionEvent } from './models/Events';
|
|
16
|
+
export { Popup, type PopupProps, type PopupSettings, type Align, type Collision, type Offset, type PopupAnimation, type PopupOpenEvent, type PopupCloseEvent, type PopupPositionEvent };
|
package/models/Events.d.ts
CHANGED
|
@@ -23,6 +23,23 @@ export interface CloseEvent {
|
|
|
23
23
|
*/
|
|
24
24
|
target: any;
|
|
25
25
|
}
|
|
26
|
+
/**
|
|
27
|
+
* Represents the object of the `Position` Popup event.
|
|
28
|
+
*/
|
|
29
|
+
export interface PositionEvent {
|
|
30
|
+
/**
|
|
31
|
+
* An event target.
|
|
32
|
+
*/
|
|
33
|
+
target: any;
|
|
34
|
+
/**
|
|
35
|
+
* Indicates whether the Popup position was fitted.
|
|
36
|
+
*/
|
|
37
|
+
fitted: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Indicates whether the Popup position was flipped.
|
|
40
|
+
*/
|
|
41
|
+
flipped: boolean;
|
|
42
|
+
}
|
|
26
43
|
/**
|
|
27
44
|
* Represents the object of the `MouseDownOutside` Popup event.
|
|
28
45
|
*/
|
|
@@ -5,7 +5,9 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { OpenEvent, CloseEvent, MouseDownOutsideEvent } from './Events';
|
|
8
|
+
import { OpenEvent, CloseEvent, MouseDownOutsideEvent, PositionEvent } from './Events';
|
|
9
|
+
import { Align } from './Align';
|
|
10
|
+
import { Collision } from './Collision';
|
|
9
11
|
import { Offset } from './Offset';
|
|
10
12
|
import { PopupAnimation } from './PopupAnimation';
|
|
11
13
|
/**
|
|
@@ -19,27 +21,29 @@ export interface PopupSettings {
|
|
|
19
21
|
/**
|
|
20
22
|
* Specifies the element which will be used as an anchor ([see example]({% slug alignmentpositioning_popup %})). The Popup opens next to that element.
|
|
21
23
|
*/
|
|
22
|
-
anchor
|
|
24
|
+
anchor?: string | HTMLElement | null;
|
|
23
25
|
/**
|
|
24
26
|
* Specifies the pivot point of the anchor ([see example]({% slug alignmentpositioning_popup %})).
|
|
25
27
|
*/
|
|
26
|
-
anchorAlign?:
|
|
28
|
+
anchorAlign?: Align;
|
|
27
29
|
/**
|
|
28
30
|
* Defines the 'id' or 'ref' of the container to which the Popup will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
|
|
29
31
|
*/
|
|
30
|
-
appendTo?: string;
|
|
32
|
+
appendTo?: string | HTMLElement | null;
|
|
31
33
|
/**
|
|
32
34
|
* Configures the collision behavior of the Popup ([see example]({% slug viewportboundarydetection_popup %})).
|
|
33
35
|
*/
|
|
34
|
-
collision?:
|
|
36
|
+
collision?: Collision;
|
|
35
37
|
/**
|
|
36
38
|
* Specifies the pivot point of the Popup ([see example]({% slug alignmentpositioning_popup %})).
|
|
37
39
|
*/
|
|
38
|
-
popupAlign?:
|
|
40
|
+
popupAlign?: Align;
|
|
39
41
|
/**
|
|
40
42
|
* Specifies a list of CSS classes that will be added to the Popup element.
|
|
41
43
|
*/
|
|
42
|
-
className?: string | Array<string
|
|
44
|
+
className?: string | Array<string> | {
|
|
45
|
+
[key: string]: boolean;
|
|
46
|
+
};
|
|
43
47
|
/**
|
|
44
48
|
* Specifies the id that will be added to the Popup element.
|
|
45
49
|
*/
|
|
@@ -51,7 +55,36 @@ export interface PopupSettings {
|
|
|
51
55
|
/**
|
|
52
56
|
* Specifies a list of CSS classes that will be added to the internal animated element ([see example]({% slug appearance_popup %})).
|
|
53
57
|
*/
|
|
54
|
-
popupClass?: string | Array<string
|
|
58
|
+
popupClass?: string | Array<string> | {
|
|
59
|
+
[key: string]: boolean;
|
|
60
|
+
};
|
|
61
|
+
/**
|
|
62
|
+
* Defines the horizontal and vertical margin between the Popup and its anchor.
|
|
63
|
+
*/
|
|
64
|
+
margin?: {
|
|
65
|
+
horizontal?: number;
|
|
66
|
+
vertical?: number;
|
|
67
|
+
};
|
|
68
|
+
/**
|
|
69
|
+
* Specifies the positioning mode of the Popup.
|
|
70
|
+
*/
|
|
71
|
+
positionMode?: 'absolute' | 'fixed';
|
|
72
|
+
/**
|
|
73
|
+
* Specifies the document scale used when positioning the Popup.
|
|
74
|
+
*/
|
|
75
|
+
scale?: number;
|
|
76
|
+
/**
|
|
77
|
+
* Specifies the ARIA role of the Popup.
|
|
78
|
+
*/
|
|
79
|
+
role?: string;
|
|
80
|
+
/**
|
|
81
|
+
* Specifies the element that labels the Popup.
|
|
82
|
+
*/
|
|
83
|
+
ariaLabelledBy?: string;
|
|
84
|
+
/**
|
|
85
|
+
* Specifies the element that describes the Popup.
|
|
86
|
+
*/
|
|
87
|
+
ariaDescribedBy?: string;
|
|
55
88
|
/**
|
|
56
89
|
* Represents the styles that are applied to the Popup.
|
|
57
90
|
*/
|
|
@@ -77,4 +110,8 @@ export interface PopupSettings {
|
|
|
77
110
|
* Fires after the Popup is closed.
|
|
78
111
|
*/
|
|
79
112
|
onClose?: (event: CloseEvent) => void;
|
|
113
|
+
/**
|
|
114
|
+
* Fires after the Popup position is calculated.
|
|
115
|
+
*/
|
|
116
|
+
onPosition?: (event: PositionEvent) => void;
|
|
80
117
|
}
|
package/models/Position.d.ts
CHANGED
package/package-metadata.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-vue-popup",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-vue-popup",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate: 1788276473,version:"9.3.0-develop.5",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"};exports.packageMetadata=e;
|
package/package-metadata.mjs
CHANGED
|
@@ -10,8 +10,8 @@ const e = {
|
|
|
10
10
|
productName: "Kendo UI for Vue",
|
|
11
11
|
productCode: "KENDOUIVUE",
|
|
12
12
|
productCodes: ["KENDOUIVUE"],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: "9.3.0-develop.
|
|
13
|
+
publishDate: 1788276473,
|
|
14
|
+
version: "9.3.0-develop.5",
|
|
15
15
|
licensingDocsUrl: "https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"
|
|
16
16
|
};
|
|
17
17
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-vue-popup",
|
|
3
|
-
"version": "9.3.0-develop.
|
|
3
|
+
"version": "9.3.0-develop.5",
|
|
4
4
|
"description": "Kendo UI for Vue Popup package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@progress/kendo-licensing": "^1.7.2",
|
|
29
|
-
"@progress/kendo-vue-animation": "9.3.0-develop.
|
|
30
|
-
"@progress/kendo-vue-common": "9.3.0-develop.
|
|
29
|
+
"@progress/kendo-vue-animation": "9.3.0-develop.5",
|
|
30
|
+
"@progress/kendo-vue-common": "9.3.0-develop.5",
|
|
31
31
|
"vue": "^3.0.2"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"package": {
|
|
46
46
|
"productName": "Kendo UI for Vue",
|
|
47
47
|
"productCode": "KENDOUIVUE",
|
|
48
|
-
"publishDate":
|
|
48
|
+
"publishDate": 1788276473,
|
|
49
49
|
"licensingDocsUrl": "https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"
|
|
50
50
|
}
|
|
51
51
|
},
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../util.js");class h{constructor(e){this._dom=e}positionElement(e){const{anchor:i,currentLocation:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../util.js");class h{constructor(e){this._dom=e}positionElement(e){const{anchor:i,currentLocation:c,element:o,anchorAlign:l,elementAlign:f,collisions:m}=e,t=this._dom,d=e.viewPort||t.stackingElementViewPort(o)||t.windowViewPort(o),a=r.eitherRect(t.offset(i),c),s=r.replaceOffset(t.staticOffset(o),c),u=this.elementRect(o,s),n=t.restrictToView({anchorAlign:l,anchorRect:a,collisions:m,elementAlign:f,elementRect:u,viewPort:d});return{fitted:n.fitted,flipped:n.flipped,offset:t.addOffset(s,n.offset)}}elementRect(e,i){return this._dom.removeScroll(i,this._dom.scrollPosition(e))}}exports.PositionService=h;
|
|
@@ -7,32 +7,33 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import { eitherRect as h, replaceOffset as p } from "../util.mjs";
|
|
9
9
|
class R {
|
|
10
|
-
constructor(
|
|
11
|
-
this._dom =
|
|
10
|
+
constructor(t) {
|
|
11
|
+
this._dom = t;
|
|
12
12
|
}
|
|
13
|
-
positionElement(
|
|
13
|
+
positionElement(t) {
|
|
14
14
|
const {
|
|
15
15
|
anchor: i,
|
|
16
|
-
currentLocation:
|
|
16
|
+
currentLocation: c,
|
|
17
17
|
element: o,
|
|
18
18
|
anchorAlign: r,
|
|
19
19
|
elementAlign: l,
|
|
20
|
-
collisions:
|
|
21
|
-
} =
|
|
20
|
+
collisions: f
|
|
21
|
+
} = t, e = this._dom, m = t.viewPort || e.stackingElementViewPort(o) || e.windowViewPort(o), d = h(e.offset(i), c), s = p(e.staticOffset(o), c), a = this.elementRect(o, s), n = e.restrictToView({
|
|
22
22
|
anchorAlign: r,
|
|
23
|
-
anchorRect:
|
|
24
|
-
collisions:
|
|
23
|
+
anchorRect: d,
|
|
24
|
+
collisions: f,
|
|
25
25
|
elementAlign: l,
|
|
26
|
-
elementRect:
|
|
27
|
-
viewPort:
|
|
26
|
+
elementRect: a,
|
|
27
|
+
viewPort: m
|
|
28
28
|
});
|
|
29
29
|
return {
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
fitted: n.fitted,
|
|
31
|
+
flipped: n.flipped,
|
|
32
|
+
offset: e.addOffset(s, n.offset)
|
|
32
33
|
};
|
|
33
34
|
}
|
|
34
|
-
elementRect(
|
|
35
|
-
return this._dom.removeScroll(i, this._dom.scrollPosition(
|
|
35
|
+
elementRect(t, i) {
|
|
36
|
+
return this._dom.removeScroll(i, this._dom.scrollPosition(t));
|
|
36
37
|
}
|
|
37
38
|
}
|
|
38
39
|
export {
|