@progress/kendo-vue-tooltip 10.2.0-develop.4 → 10.2.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/dist/cdn/js/kendo-vue-tooltip.js +1 -1
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +4 -4
- package/tooltip/Tooltip.d.ts +4 -0
- package/tooltip/Tooltip.js +1 -1
- package/tooltip/Tooltip.mjs +99 -42
|
@@ -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-vue-common"),require("@progress/kendo-vue-popup")):"function"==typeof define&&define.amd?define(["exports","vue","@progress/kendo-vue-common","@progress/kendo-vue-popup"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoVueTooltip={},t.Vue,t.KendoVueCommon,t.KendoVuePopup)}(this,function(t,e,o,i){"use strict";const n=10,s=10,r=(t,e,i,s,r)=>{switch(r){case"bottom":case"top":return"pointer"===s?t-e/2:i.left-e/2+i.width/2;case"left":return"pointer"===s?t-e-n:i.left-e-n;case"right":return"pointer"===s?t+n:i.right+n;default:return"pointer"===s?o.canUseDOM&&t<window.screen.availWidth/2?t-n:t-e+n:o.canUseDOM&&t<window.screen.availWidth/2?i.left:i.right-e}},l=(t,e,i,r,l)=>{switch(l){case"bottom":return"pointer"===r?t+s:e.bottom+s;case"left":case"right":return"pointer"===r?t-i/2:e.top-i/2+e.height/2;case"top":return"pointer"===r?t-i-s:e.top-i-s;default:return"pointer"===r?o.canUseDOM&&t<window.innerHeight/2?t+n:t-i-n:o.canUseDOM&&t<window.innerHeight/2?e.bottom+s:e.top-i-s}},a=["k-tooltip-content","k-animation-container","k-tooltip","k-tooltip-title","k-tooltip k-tooltip-closable","k-icon k-i-x","k-svg-icon k-svg-i-x"],p=t=>{if(null===t)return!1;let e=t;for(;e;){if(null!==e&&e.classList&&e.classList.contains("k-tooltip"))return!0;e=null!==e.parentNode&&e.parentNode}return a.filter(e=>e===t.className).length>0},d={name:"@progress/kendo-vue-tooltip",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate:1639571344,version:"10.2.0-develop.4",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"},h="_tb_active",u=e.defineComponent({name:"KendoTooltip",inheritAttrs:!1,props:{showCallout:{type:Boolean,default:!0},setCalloutOnPositionAuto:{type:String,default:void 0},anchorElement:{type:String,default:"pointer",validator:function(t){return["pointer","target"].includes(t)}},content:[String,Object,Function],filter:Function,openDelay:{type:Number,default:400},open:{type:Boolean,default:void 0},position:{type:String,default:"auto",validator:function(t){return["right","left","top","bottom","auto"].includes(t)}},updatePosition:{type:Function,default:void 0},updateInterval:Number,className:String,wrapperStyle:Object,tooltipClassName:String,tooltipStyle:Object,targetElement:{type:void 0},parentTitle:{type:Boolean,default:!1}},data:()=>({top:0,left:0,currentTargetElement:null,currentOpen:!1,title:""}),computed:{wrapperClass(){return{"k-animation-container":!0,"k-animation-container-fixed":!0,"k-animation-container-shown":!0,[this.$props.className]:!0}},computedTarget(){return void 0!==this.targetElement?this.targetElement:this.currentTargetElement},computedOpen(){return void 0!==this.open?this.open:this.currentOpen}},inject:{kCurrentZIndex:{default:null}},created(){o.validatePackage(d),this.top=0,this.left=0,this.willOpen=!1},mounted(){this.element=o.getRef(this,"element"),document&&document.body.addEventListener("mousemove",this.handleBodyMousemove)},unmounted(){this.destroyElement()},updated(){if(this.$props.open&&this.$props.targetElement&&this.showToolTip({target:this.$props.targetElement}),this.element=o.getRef(this,"element"),this.element){if(this.resetPosition(),this.computedTarget){const t=this.$props.appendTo?this.$props.appendTo:this.computedTarget.ownerDocument.body;this.element.parentElement!==t&&t.append(this.element)}this.callout=this.calloutRef,this.callout&&(this.callout.className=this.calloutClassName(),"auto"===this.$props.position&&o.canUseDOM&&(this.left<window.screen.availWidth/2?this.callout.style.left=this.$props.setCalloutOnPositionAuto||"25%":this.callout.style.left=this.$props.setCalloutOnPositionAuto||"75%"))}},render(){const t=o.getDefaultSlots(this),i=this.getCurrentZIndex(),n=this.$props.content?o.templateRendering.call(this,this.$props.content,o.getListeners.call(this)):void 0,s=this.title;let r=o.guid()+h;this.computedTarget&&(this.computedTarget.hasAttribute("id")&&(r=this.computedTarget.getAttribute("id")+h),this.computedTarget.setAttribute("aria-describedby",r));const l=o.getTemplate.call(this,{h:e.h,template:n,defaultRendering:s,additionalProps:{title:this.title,target:this.computedTarget}}),a=this.computedOpen&&e.createVNode("div",{class:o.classNames("k-tooltip",this.$props.tooltipClassName),role:"tooltip",id:r,style:{position:"relative",...this.$props.tooltipStyle}},[e.createVNode("div",{class:"k-tooltip-content"},[l]),this.$props.showCallout&&e.createVNode("div",{ref:o.setRef(this,"callout")},null)]),p=this.computedTarget&&this.title&&this.computedTarget.ownerDocument&&e.createVNode("div",{ref:o.setRef(this,"element"),class:this.wrapperClass,style:{zIndex:i,...this.$props.wrapperStyle},tabindex:0,onMouseleave:this.handleTooltipMouseOut},[e.createVNode("div",{class:"k-child-animation-container"},[a])]);return t?e.createVNode("div",{onMouseover:this.handleMouseOver,onMouseout:this.handleMouseOut},[p,t]):p},methods:{destroyElement(){clearTimeout(this.openTimeoutId),clearInterval(this.updateIntervalId),document&&document.body.removeEventListener("mousemove",this.handleBodyMousemove),this.element&&this.element.remove()},handleTooltipMouseOut(t){this.onClose(t)},handleMouseOut(t){const e=this.computedTarget?this.computedTarget.ownerDocument:document;let o=e&&e.elementFromPoint(t.clientX,t.clientY);this.willOpen=!1,!p(o)&&this.computedTarget===t.target&&(this.$props.open||(clearInterval(this.updateIntervalId),this.onClose(t)))},handleMouseOver(t){const e=t.target;!this.isVisible(e)||p(e)||e===this.computedTarget||this.showToolTip(t)},handleBodyMousemove(t){this.top=t.clientY,this.left=t.clientX},onClose(t){this.$emit("close",{event:t,component:this}),this.computedTarget.removeAttribute("aria-describedby"),this.currentTargetElement=null,this.currentOpen=!1,this.title=""},showToolTip(t){clearTimeout(this.openTimeoutId),clearInterval(this.updateIntervalId),t.target.hasChildNodes()&&t.target.childNodes.forEach(e=>{"title"===e.nodeName&&(t.target.titleExpando=e.innerHTML,e.remove())});const e=this.computedTarget||t.target;let i=this.getTitle(e);i.title?(i.element&&(i.element.titleExpando=i.title,i.element.title=""),this.willOpen=!0,this.$props.openDelay?o.canUseDOM&&(this.openTimeoutId=window.setTimeout(()=>{this.willOpen&&(this.currentTargetElement=e,this.currentOpen=!0,this.title=i.title,this.setUpdateInterval())},this.$props.openDelay)):(this.currentTargetElement=e,this.currentOpen=!0,this.title=i.title,this.setUpdateInterval()),this.title!==i.title&&this.$emit("open",{event:t,compoponent:this})):this.computedOpen&&this.onClose(t)},setUpdateInterval(){this.$props.updateInterval&&(this.updateIntervalId=setInterval(this.onIntervalUpdate,this.$props.updateInterval))},onIntervalUpdate(){const t=this.computedTarget;t&&(null===t.parentElement?this.onClose({target:t}):this.showToolTip({target:t}))},resetPosition(){if(this.element){let t=this.setPosition(this.element);this.$props.updatePosition&&(t=this.$props.updatePosition({element:this.element,targetElement:this.computedTarget,mouseTop:this.top,mouseLeft:this.left,anchorElement:this.$props.anchorElement,position:this.$props.position,target:this,defaultPosition:t})),this.element.style.left=t.left+"px",this.element.style.top=t.top+"px"}},isVisible(t){return!this.$props.filter||this.$props.filter(t)},setPosition(t){let e=(t=>null!==t?t.getBoundingClientRect():document.body.getBoundingClientRect())(this.parentTitle?this.getTitle(this.computedTarget).element:this.computedTarget);return{left:r(this.left,t.offsetWidth,e,this.$props.anchorElement,this.$props.position),top:l(this.top,e,t.offsetHeight,this.$props.anchorElement,this.$props.position)}},getTitle(t){for(;t;){if(null!==t.getAttribute("title")||t.titleExpando)return{title:t.getAttribute("title")||t.titleExpando,element:t};t=this.$props.parentTitle&&t.parentElement||null}return{title:"",element:t}},calloutClassName(){switch(this.$props.position){case"bottom":return"k-callout k-callout-n";case"left":return"k-callout k-callout-e";case"right":return"k-callout k-callout-w";case"top":return"k-callout k-callout-s";default:return o.canUseDOM&&this.top<window.innerHeight/2?"k-callout k-callout-n":"k-callout k-callout-s"}},getCurrentZIndex(){return this.kCurrentZIndex?this.kCurrentZIndex:100}}}),c=e.defineComponent({name:"KendoPopoverActionsBar",props:{alignment:{type:String,default:"stretched"},orientation:{type:String,default:"horizontal"}},render(){return e.createVNode("div",{class:o.classNames("k-popover-actions","k-actions",`k-actions-${this.$props.alignment}`,`k-actions-${this.$props.orientation}`)},[o.getDefaultSlots(this)])}}),m={top:"k-callout-s",left:"k-callout-e",bottom:"k-callout-n",right:"k-callout-w"},g={top:"k-callout-n",left:"k-callout-w",bottom:"k-callout-s",right:"k-callout-e"},f={top:{vertical:"bottom",horizontal:"center"},left:{vertical:"center",horizontal:"right"},bottom:{vertical:"top",horizontal:"center"},right:{vertical:"center",horizontal:"left"}},v={top:{vertical:"top",horizontal:"center"},left:{vertical:"center",horizontal:"left"},bottom:{vertical:"bottom",horizontal:"center"},right:{vertical:"center",horizontal:"right"}},y=e.defineComponent({name:"KendoPopover",inheritAttrs:!1,emits:["open","close","position","keydown"],props:{autoFocus:{type:Boolean,default:!0},title:[String,Object,Function],position:{type:String,default:"top"},callout:{type:Boolean,default:!0},animate:[Boolean,Object],anchor:Object,appendTo:Object,collision:{type:Object,default:()=>({horizontal:"none",vertical:"none"})},margin:Object,positionMode:{type:String,default:"fixed"},scale:Number,offset:Object,popoverClass:[String,Array,Object],className:[String,Array,Object],id:String,style:Object,contentStyle:Object,show:{type:Boolean,default:!1}},inject:{kCurrentZIndex:{default:null}},provide(){return{kCurrentZIndex:this.currentZIndex}},data:()=>({flipped:!1}),computed:{currentZIndex(){return this.kCurrentZIndex?this.kCurrentZIndex+2e3:12e3},popoverId(){return this.$props.id||this._popoverId},headerId(){return`${this.popoverId}-header`},bodyId(){return`${this.popoverId}-body`},popoverMargin(){if(this.$props.margin)return this.$props.margin;const t="top"===this.$props.position||"bottom"===this.$props.position;return{horizontal:this.$props.callout&&!t?15:0,vertical:this.$props.callout&&t?15:0}},calloutClass(){const t=this.$props.position;return this.flipped?g[t]:m[t]}},created(){o.validatePackage(d),this._popoverId=o.guid()},methods:{element(){return document.getElementById(this.popoverId)},handleOpen(){this.$props.autoFocus&&e.nextTick(()=>{var t;const e=null==(t=document.getElementById(this.popoverId))?void 0:t.querySelector(".k-popover-inner"),o=null==e?void 0:e.querySelector('a[href], area[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])');null==o||o.focus()}),this.$emit("open",{target:this})},handleClose(){var t;this.$emit("close",{target:this}),null==(t=this.$props.anchor)||t.focus()},handlePosition(t){this.flipped=t.flipped,this.$emit("position",{target:this,fitted:t.fitted,flipped:t.flipped})},handleKeydown(t){var e;if("Tab"===t.key){const o=Array.from((null==(e=document.getElementById(this.popoverId))?void 0:e.querySelectorAll('a[href], area[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'))||[]),i=o[0],n=o[o.length-1];t.shiftKey&&document.activeElement===i?(t.preventDefault(),n.focus()):!t.shiftKey&&document.activeElement===n&&(t.preventDefault(),i.focus())}"Escape"===t.key&&this.$emit("keydown",{target:this,show:!1})},getContent:t=>t.filter(t=>t.type!==c),getActionBar:t=>t.filter(t=>t.type===c)},render(){const t=o.getDefaultSlots(this)||[];let n=null;"string"==typeof this.$props.title?n=this.$props.title:this.$props.title&&(n=o.getTemplate.call(this,{h:e.h,template:o.templateRendering.call(this,this.$props.title,o.getListeners.call(this)),defaultRendering:this.$props.title}));const s=e.createVNode(e.Fragment,null,[n&&e.createVNode("div",{class:"k-popover-header",id:this.headerId},[n]),e.createVNode("div",{class:"k-popover-body",id:this.bodyId,style:this.$props.contentStyle},[this.getContent(t)]),this.getActionBar(t)]),r=this.$props.position;return e.createVNode(i.Popup,{id:this.popoverId,role:"dialog",ariaLabelledBy:n?this.headerId:void 0,ariaDescribedBy:this.bodyId,animate:this.$props.animate,collision:this.$props.collision,anchor:this.$props.anchor,appendTo:this.$props.appendTo,offset:this.$props.offset,margin:this.popoverMargin,popupAlign:f[r],anchorAlign:v[r],show:this.$props.show,scale:this.$props.scale,positionMode:this.$props.positionMode,style:this.$props.style,className:this.$props.className,popupClass:o.classNames("k-popover",this.$props.popoverClass),onOpen:this.handleOpen,onClose:this.handleClose,onPosition:this.handlePosition,onKeydown:this.handleKeydown},{default:()=>[this.$props.callout?e.createVNode(e.Fragment,null,[e.createVNode("div",{class:o.classNames("k-popover-callout",this.calloutClass)},null),e.createVNode("div",{class:"k-popover-inner"},[s])]):s]})}});t.Popover=y,t.PopoverActionsBar=c,t.Tooltip=u});
|
|
15
|
+
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("vue"),require("@progress/kendo-vue-common"),require("@progress/kendo-vue-popup")):"function"==typeof define&&define.amd?define(["exports","vue","@progress/kendo-vue-common","@progress/kendo-vue-popup"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoVueTooltip={},t.Vue,t.KendoVueCommon,t.KendoVuePopup)}(this,function(t,e,o,i){"use strict";const n=10,s=10,r=(t,e,i,s,r)=>{switch(r){case"bottom":case"top":return"pointer"===s?t-e/2:i.left-e/2+i.width/2;case"left":return"pointer"===s?t-e-n:i.left-e-n;case"right":return"pointer"===s?t+n:i.right+n;default:return"pointer"===s?o.canUseDOM&&t<window.screen.availWidth/2?t-n:t-e+n:o.canUseDOM&&t<window.screen.availWidth/2?i.left:i.right-e}},l=(t,e,i,r,l)=>{switch(l){case"bottom":return"pointer"===r?t+s:e.bottom+s;case"left":case"right":return"pointer"===r?t-i/2:e.top-i/2+e.height/2;case"top":return"pointer"===r?t-i-s:e.top-i-s;default:return"pointer"===r?o.canUseDOM&&t<window.innerHeight/2?t+n:t-i-n:o.canUseDOM&&t<window.innerHeight/2?e.bottom+s:e.top-i-s}},a=t=>null!==t?t.getBoundingClientRect():document.body.getBoundingClientRect(),p=["k-tooltip-content","k-animation-container","k-tooltip","k-tooltip-title","k-tooltip k-tooltip-closable","k-icon k-i-x","k-svg-icon k-svg-i-x"],h=t=>{if(null===t)return!1;let e=t;for(;e;){if(null!==e&&e.classList&&e.classList.contains("k-tooltip"))return!0;e=null!==e.parentNode&&e.parentNode}return p.filter(e=>e===t.className).length>0},d={name:"@progress/kendo-vue-tooltip",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate:1639571344,version:"10.2.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"},c="100vw",u="_tb_active",m=e.defineComponent({name:"KendoTooltip",inheritAttrs:!1,props:{showCallout:{type:Boolean,default:!0},setCalloutOnPositionAuto:{type:String,default:void 0},anchorElement:{type:String,default:"pointer",validator:function(t){return["pointer","target"].includes(t)}},content:[String,Object,Function],filter:Function,openDelay:{type:Number,default:400},open:{type:Boolean,default:void 0},position:{type:String,default:"auto",validator:function(t){return["right","left","top","bottom","auto"].includes(t)}},updatePosition:{type:Function,default:void 0},updateInterval:Number,className:String,wrapperStyle:Object,tooltipClassName:String,tooltipStyle:Object,targetElement:{type:void 0},parentTitle:{type:Boolean,default:!1}},data:()=>({top:0,left:0,currentTargetElement:null,currentOpen:!1,title:""}),computed:{wrapperClass(){return{"k-animation-container":!0,"k-animation-container-fixed":!0,"k-animation-container-shown":!0,[this.$props.className]:!0}},computedTarget(){return void 0!==this.targetElement?this.targetElement:this.currentTargetElement},computedOpen(){return void 0!==this.open?this.open:this.currentOpen}},inject:{kCurrentZIndex:{default:null}},created(){o.validatePackage(d),this.top=0,this.left=0,this.willOpen=!1},mounted(){this.element=o.getRef(this,"element"),this.resizeObserver=new ResizeObserver(()=>this.positionTooltip()),window.addEventListener("resize",this.positionTooltip),document&&document.body.addEventListener("mousemove",this.handleBodyMousemove)},unmounted(){this.destroyElement()},updated(){if(this.$props.open&&this.$props.targetElement&&this.showToolTip({target:this.$props.targetElement}),this.element=o.getRef(this,"element"),!this.element)return this.shownElement=null,void(this.shownAnchor=null);if(this.computedTarget){const t=this.$props.appendTo?this.$props.appendTo:this.computedTarget.ownerDocument.body;this.element.parentElement!==t&&t.append(this.element),this.resizeObserver.observe(this.element)}this.callout=this.calloutRef,this.callout&&(this.callout.className=this.calloutClassName()),this.positionTooltip();const t=this.computedTarget&&this.getAnchorElement();if(this.shownElement===this.element&&this.shownAnchor===t)return;this.shownElement=this.element,this.shownAnchor=t;const e=this.element;e.style.visibility="hidden",window.requestAnimationFrame(()=>{this.positionTooltip(),e.style.visibility=""})},render(){const t=o.getDefaultSlots(this),i=this.getCurrentZIndex(),n=this.$props.content?o.templateRendering.call(this,this.$props.content,o.getListeners.call(this)):void 0,s=this.title;let r=o.guid()+u;this.computedTarget&&(this.computedTarget.hasAttribute("id")&&(r=this.computedTarget.getAttribute("id")+u),this.computedTarget.setAttribute("aria-describedby",r));const l=o.getTemplate.call(this,{h:e.h,template:n,defaultRendering:s,additionalProps:{title:this.title,target:this.computedTarget}}),a=this.computedOpen&&e.createVNode("div",{class:o.classNames("k-tooltip",this.$props.tooltipClassName),role:"tooltip",id:r,style:{position:"relative",...this.$props.tooltipStyle}},[e.createVNode("div",{class:"k-tooltip-content"},[l]),this.$props.showCallout&&e.createVNode("div",{ref:o.setRef(this,"callout")},null)]),p=this.computedTarget&&this.title&&this.computedTarget.ownerDocument&&e.createVNode("div",{ref:o.setRef(this,"element"),class:this.wrapperClass,style:{zIndex:i,width:"max-content",maxWidth:c,...this.$props.wrapperStyle},tabindex:0,onMouseleave:this.handleTooltipMouseOut},[e.createVNode("div",{class:"k-child-animation-container"},[a])]);return t?e.createVNode("div",{onMouseover:this.handleMouseOver,onMouseout:this.handleMouseOut},[p,t]):p},methods:{destroyElement(){var t;clearTimeout(this.openTimeoutId),clearInterval(this.updateIntervalId),null==(t=this.resizeObserver)||t.disconnect(),window.removeEventListener("resize",this.positionTooltip),document&&document.body.removeEventListener("mousemove",this.handleBodyMousemove),this.element&&this.element.remove()},handleTooltipMouseOut(t){this.onClose(t)},handleMouseOut(t){const e=this.computedTarget?this.computedTarget.ownerDocument:document;let o=e&&e.elementFromPoint(t.clientX,t.clientY);this.willOpen=!1,!h(o)&&this.computedTarget===t.target&&(this.$props.open||(clearInterval(this.updateIntervalId),this.onClose(t)))},handleMouseOver(t){const e=t.target;!this.isVisible(e)||h(e)||e===this.computedTarget||this.showToolTip(t)},handleBodyMousemove(t){this.top=t.clientY,this.left=t.clientX},onClose(t){var e;this.$emit("close",{event:t,component:this}),this.computedTarget.removeAttribute("aria-describedby"),this.currentTargetElement=null,null==(e=this.resizeObserver)||e.disconnect(),this.currentOpen=!1,this.title=""},showToolTip(t){clearTimeout(this.openTimeoutId),clearInterval(this.updateIntervalId),t.target.hasChildNodes()&&t.target.childNodes.forEach(e=>{"title"===e.nodeName&&(t.target.titleExpando=e.innerHTML,e.remove())});const e=this.computedTarget||t.target;let i=this.getTitle(e);i.title?(i.element&&(i.element.titleExpando=i.title,i.element.title=""),this.willOpen=!0,this.$props.openDelay?o.canUseDOM&&(this.openTimeoutId=window.setTimeout(()=>{this.willOpen&&(this.currentTargetElement=e,this.currentOpen=!0,this.title=i.title,this.setUpdateInterval())},this.$props.openDelay)):(this.currentTargetElement=e,this.currentOpen=!0,this.title=i.title,this.setUpdateInterval()),this.title!==i.title&&this.$emit("open",{event:t,compoponent:this})):this.computedOpen&&this.onClose(t)},setUpdateInterval(){this.$props.updateInterval&&(this.updateIntervalId=setInterval(this.onIntervalUpdate,this.$props.updateInterval))},onIntervalUpdate(){const t=this.computedTarget;t&&(null===t.parentElement?this.onClose({target:t}):this.showToolTip({target:t}))},resetPosition(){if(this.element){let t=this.setPosition(this.element);this.$props.updatePosition&&(t=this.$props.updatePosition({element:this.element,targetElement:this.computedTarget,mouseTop:this.top,mouseLeft:this.left,anchorElement:this.$props.anchorElement,position:this.$props.position,target:this,defaultPosition:t})),this.element.style.left=t.left+"px",this.element.style.top=t.top+"px"}},isVisible(t){return!this.$props.filter||this.$props.filter(t)},setPosition(t){const e=this.getAnchorElement(),o=a(e),i=e.ownerDocument.documentElement.clientWidth,n="left"===this.$props.position||"right"===this.$props.position;this.fitToSide(t,o,i,n);const s=r(this.left,t.offsetWidth,o,this.$props.anchorElement,this.$props.position),p=l(this.top,o,t.offsetHeight,this.$props.anchorElement,this.$props.position),h=i-t.offsetWidth;return{left:n?s:Math.max(0,Math.min(s,h)),top:p}},fitToSide(t,e,o,i){const n=this.$props.wrapperStyle||{};if(void 0===n.minWidth&&(t.style.minWidth=i?"min-content":""),void 0!==n.maxWidth)return;if(!i)return void(t.style.maxWidth=c);const s=r(this.left,0,e,this.$props.anchorElement,this.$props.position),l="right"===this.$props.position?o-s:s;t.style.maxWidth=Math.max(0,l)+"px"},positionCallout(){if(!this.callout||!this.element||!this.computedTarget)return;const{anchorElement:t,position:e,setCalloutOnPositionAuto:o}=this.$props;if("left"===e||"right"===e)return void(this.callout.style.left="");if("auto"===e&&o)return void(this.callout.style.left=o);const i=this.element.getBoundingClientRect();let n=this.left;if("pointer"!==t){const t=a(this.getAnchorElement());n=t.left+t.width/2}const s=this.callout.offsetWidth/2,r=Math.min(Math.max(n-i.left,s),i.width-s);this.callout.style.left=r+"px"},positionTooltip(){!this.element||!this.computedTarget||(this.resetPosition(),this.positionCallout())},getAnchorElement(){const t=this.computedTarget;return this.$props.parentTitle&&this.getTitle(t).element||t},getTitle(t){for(;t;){if(null!==t.getAttribute("title")||t.titleExpando)return{title:t.getAttribute("title")||t.titleExpando,element:t};t=this.$props.parentTitle&&t.parentElement||null}return{title:"",element:t}},calloutClassName(){switch(this.$props.position){case"bottom":return"k-callout k-callout-n";case"left":return"k-callout k-callout-e";case"right":return"k-callout k-callout-w";case"top":return"k-callout k-callout-s";default:return o.canUseDOM&&this.top<window.innerHeight/2?"k-callout k-callout-n":"k-callout k-callout-s"}},getCurrentZIndex(){return this.kCurrentZIndex?this.kCurrentZIndex:100}}}),g=e.defineComponent({name:"KendoPopoverActionsBar",props:{alignment:{type:String,default:"stretched"},orientation:{type:String,default:"horizontal"}},render(){return e.createVNode("div",{class:o.classNames("k-popover-actions","k-actions",`k-actions-${this.$props.alignment}`,`k-actions-${this.$props.orientation}`)},[o.getDefaultSlots(this)])}}),f={top:"k-callout-s",left:"k-callout-e",bottom:"k-callout-n",right:"k-callout-w"},v={top:"k-callout-n",left:"k-callout-w",bottom:"k-callout-s",right:"k-callout-e"},y={top:{vertical:"bottom",horizontal:"center"},left:{vertical:"center",horizontal:"right"},bottom:{vertical:"top",horizontal:"center"},right:{vertical:"center",horizontal:"left"}},b={top:{vertical:"top",horizontal:"center"},left:{vertical:"center",horizontal:"left"},bottom:{vertical:"bottom",horizontal:"center"},right:{vertical:"center",horizontal:"right"}},$=e.defineComponent({name:"KendoPopover",inheritAttrs:!1,emits:["open","close","position","keydown"],props:{autoFocus:{type:Boolean,default:!0},title:[String,Object,Function],position:{type:String,default:"top"},callout:{type:Boolean,default:!0},animate:[Boolean,Object],anchor:Object,appendTo:Object,collision:{type:Object,default:()=>({horizontal:"none",vertical:"none"})},margin:Object,positionMode:{type:String,default:"fixed"},scale:Number,offset:Object,popoverClass:[String,Array,Object],className:[String,Array,Object],id:String,style:Object,contentStyle:Object,show:{type:Boolean,default:!1}},inject:{kCurrentZIndex:{default:null}},provide(){return{kCurrentZIndex:this.currentZIndex}},data:()=>({flipped:!1}),computed:{currentZIndex(){return this.kCurrentZIndex?this.kCurrentZIndex+2e3:12e3},popoverId(){return this.$props.id||this._popoverId},headerId(){return`${this.popoverId}-header`},bodyId(){return`${this.popoverId}-body`},popoverMargin(){if(this.$props.margin)return this.$props.margin;const t="top"===this.$props.position||"bottom"===this.$props.position;return{horizontal:this.$props.callout&&!t?15:0,vertical:this.$props.callout&&t?15:0}},calloutClass(){const t=this.$props.position;return this.flipped?v[t]:f[t]}},created(){o.validatePackage(d),this._popoverId=o.guid()},methods:{element(){return document.getElementById(this.popoverId)},handleOpen(){this.$props.autoFocus&&e.nextTick(()=>{var t;const e=null==(t=document.getElementById(this.popoverId))?void 0:t.querySelector(".k-popover-inner"),o=null==e?void 0:e.querySelector('a[href], area[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])');null==o||o.focus()}),this.$emit("open",{target:this})},handleClose(){var t;this.$emit("close",{target:this}),null==(t=this.$props.anchor)||t.focus()},handlePosition(t){this.flipped=t.flipped,this.$emit("position",{target:this,fitted:t.fitted,flipped:t.flipped})},handleKeydown(t){var e;if("Tab"===t.key){const o=Array.from((null==(e=document.getElementById(this.popoverId))?void 0:e.querySelectorAll('a[href], area[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'))||[]),i=o[0],n=o[o.length-1];t.shiftKey&&document.activeElement===i?(t.preventDefault(),n.focus()):!t.shiftKey&&document.activeElement===n&&(t.preventDefault(),i.focus())}"Escape"===t.key&&this.$emit("keydown",{target:this,show:!1})},getContent:t=>t.filter(t=>t.type!==g),getActionBar:t=>t.filter(t=>t.type===g)},render(){const t=o.getDefaultSlots(this)||[];let n=null;"string"==typeof this.$props.title?n=this.$props.title:this.$props.title&&(n=o.getTemplate.call(this,{h:e.h,template:o.templateRendering.call(this,this.$props.title,o.getListeners.call(this)),defaultRendering:this.$props.title}));const s=e.createVNode(e.Fragment,null,[n&&e.createVNode("div",{class:"k-popover-header",id:this.headerId},[n]),e.createVNode("div",{class:"k-popover-body",id:this.bodyId,style:this.$props.contentStyle},[this.getContent(t)]),this.getActionBar(t)]),r=this.$props.position;return e.createVNode(i.Popup,{id:this.popoverId,role:"dialog",ariaLabelledBy:n?this.headerId:void 0,ariaDescribedBy:this.bodyId,animate:this.$props.animate,collision:this.$props.collision,anchor:this.$props.anchor,appendTo:this.$props.appendTo,offset:this.$props.offset,margin:this.popoverMargin,popupAlign:y[r],anchorAlign:b[r],show:this.$props.show,scale:this.$props.scale,positionMode:this.$props.positionMode,style:this.$props.style,className:this.$props.className,popupClass:o.classNames("k-popover",this.$props.popoverClass),onOpen:this.handleOpen,onClose:this.handleClose,onPosition:this.handlePosition,onKeydown:this.handleKeydown},{default:()=>[this.$props.callout?e.createVNode(e.Fragment,null,[e.createVNode("div",{class:o.classNames("k-popover-callout",this.calloutClass)},null),e.createVNode("div",{class:"k-popover-inner"},[s])]):s]})}});t.Popover=$,t.PopoverActionsBar=g,t.Tooltip=m});
|
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-tooltip",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-tooltip",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate: 1792675932,version:"10.2.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: "10.2.0-develop.
|
|
13
|
+
publishDate: 1792675932,
|
|
14
|
+
version: "10.2.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-tooltip",
|
|
3
|
-
"version": "10.2.0-develop.
|
|
3
|
+
"version": "10.2.0-develop.5",
|
|
4
4
|
"description": "TODO",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"sideEffects": false,
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"@progress/kendo-licensing": "^1.7.2",
|
|
28
|
-
"@progress/kendo-vue-common": "10.2.0-develop.
|
|
29
|
-
"@progress/kendo-vue-popup": "10.2.0-develop.
|
|
28
|
+
"@progress/kendo-vue-common": "10.2.0-develop.5",
|
|
29
|
+
"@progress/kendo-vue-popup": "10.2.0-develop.5",
|
|
30
30
|
"vue": "^3.0.2"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {},
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"package": {
|
|
47
47
|
"productName": "Kendo UI for Vue",
|
|
48
48
|
"productCode": "KENDOUIVUE",
|
|
49
|
-
"publishDate":
|
|
49
|
+
"publishDate": 1792675932,
|
|
50
50
|
"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"
|
|
51
51
|
}
|
|
52
52
|
},
|
package/tooltip/Tooltip.d.ts
CHANGED
|
@@ -88,6 +88,10 @@ declare const Tooltip: import('vue').DefineComponent<import('vue').ExtractPropTy
|
|
|
88
88
|
left: any;
|
|
89
89
|
top: any;
|
|
90
90
|
};
|
|
91
|
+
fitToSide(element: HTMLElement, domRect: DOMRect, viewportWidth: number, horizontalPosition: boolean): void;
|
|
92
|
+
positionCallout(): void;
|
|
93
|
+
positionTooltip(): void;
|
|
94
|
+
getAnchorElement(): any;
|
|
91
95
|
getTitle(element: HTMLElement | null): {
|
|
92
96
|
title: string;
|
|
93
97
|
element: HTMLElement;
|
package/tooltip/Tooltip.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
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),s=require("@progress/kendo-vue-common"),p=require("./utils.js"),d=require("../package-metadata.js"),m=100,u="100vw",c="_tb_active",f=r.defineComponent({name:"KendoTooltip",inheritAttrs:!1,props:{showCallout:{type:Boolean,default:!0},setCalloutOnPositionAuto:{type:String,default:void 0},anchorElement:{type:String,default:"pointer",validator:function(t){return["pointer","target"].includes(t)}},content:[String,Object,Function],filter:Function,openDelay:{type:Number,default:400},open:{type:Boolean,default:void 0},position:{type:String,default:"auto",validator:function(t){return["right","left","top","bottom","auto"].includes(t)}},updatePosition:{type:Function,default:void 0},updateInterval:Number,className:String,wrapperStyle:Object,tooltipClassName:String,tooltipStyle:Object,targetElement:{type:void 0},parentTitle:{type:Boolean,default:!1}},data(){return{top:0,left:0,currentTargetElement:null,currentOpen:!1,title:""}},computed:{wrapperClass(){return{"k-animation-container":!0,"k-animation-container-fixed":!0,"k-animation-container-shown":!0,[this.$props.className]:!0}},computedTarget(){return this.targetElement!==void 0?this.targetElement:this.currentTargetElement},computedOpen(){return this.open!==void 0?this.open:this.currentOpen}},inject:{kCurrentZIndex:{default:null}},created(){s.validatePackage(d.packageMetadata),this.top=0,this.left=0,this.willOpen=!1},mounted(){this.element=s.getRef(this,"element"),this.resizeObserver=new ResizeObserver(()=>this.positionTooltip()),window.addEventListener("resize",this.positionTooltip),document&&document.body.addEventListener("mousemove",this.handleBodyMousemove)},unmounted(){this.destroyElement()},updated(){if(this.$props.open&&this.$props.targetElement&&this.showToolTip({target:this.$props.targetElement}),this.element=s.getRef(this,"element"),!this.element){this.shownElement=null,this.shownAnchor=null;return}if(this.computedTarget){const i=this.$props.appendTo?this.$props.appendTo:this.computedTarget.ownerDocument.body;this.element.parentElement!==i&&i.append(this.element),this.resizeObserver.observe(this.element)}this.callout=this.calloutRef,this.callout&&(this.callout.className=this.calloutClassName()),this.positionTooltip();const t=this.computedTarget&&this.getAnchorElement();if(this.shownElement===this.element&&this.shownAnchor===t)return;this.shownElement=this.element,this.shownAnchor=t;const e=this.element;e.style.visibility="hidden",window.requestAnimationFrame(()=>{this.positionTooltip(),e.style.visibility=""})},render(){const t=s.getDefaultSlots(this),e=this.getCurrentZIndex(),i=this.$props.content?s.templateRendering.call(this,this.$props.content,s.getListeners.call(this)):void 0,o=this.title;let n=s.guid()+c;this.computedTarget&&(this.computedTarget.hasAttribute("id")&&(n=this.computedTarget.getAttribute("id")+c),this.computedTarget.setAttribute("aria-describedby",n));const l=s.getTemplate.call(this,{h:r.h,template:i,defaultRendering:o,additionalProps:{title:this.title,target:this.computedTarget}}),a=this.computedOpen&&r.createVNode("div",{class:s.classNames("k-tooltip",this.$props.tooltipClassName),role:"tooltip",id:n,style:{position:"relative",...this.$props.tooltipStyle}},[r.createVNode("div",{class:"k-tooltip-content"},[l]),this.$props.showCallout&&r.createVNode("div",{ref:s.setRef(this,"callout")},null)]),h=this.computedTarget&&this.title&&this.computedTarget.ownerDocument&&r.createVNode("div",{ref:s.setRef(this,"element"),class:this.wrapperClass,style:{zIndex:e,width:"max-content",maxWidth:u,...this.$props.wrapperStyle},tabindex:0,onMouseleave:this.handleTooltipMouseOut},[r.createVNode("div",{class:"k-child-animation-container"},[a])]);return t?r.createVNode("div",{onMouseover:this.handleMouseOver,onMouseout:this.handleMouseOut},[h,t]):h},methods:{destroyElement(){var t;clearTimeout(this.openTimeoutId),clearInterval(this.updateIntervalId),(t=this.resizeObserver)==null||t.disconnect(),window.removeEventListener("resize",this.positionTooltip),document&&document.body.removeEventListener("mousemove",this.handleBodyMousemove),this.element&&this.element.remove()},handleTooltipMouseOut(t){this.onClose(t)},handleMouseOut(t){const e=this.computedTarget?this.computedTarget.ownerDocument:document;let i=e&&e.elementFromPoint(t.clientX,t.clientY);this.willOpen=!1,!(p.isTooltipElement(i)||this.computedTarget!==t.target)&&(this.$props.open||(clearInterval(this.updateIntervalId),this.onClose(t)))},handleMouseOver(t){const e=t.target;!this.isVisible(e)||p.isTooltipElement(e)||e===this.computedTarget||this.showToolTip(t)},handleBodyMousemove(t){this.top=t.clientY,this.left=t.clientX},onClose(t){var e;this.$emit("close",{event:t,component:this}),this.computedTarget.removeAttribute("aria-describedby"),this.currentTargetElement=null,(e=this.resizeObserver)==null||e.disconnect(),this.currentOpen=!1,this.title=""},showToolTip(t){clearTimeout(this.openTimeoutId),clearInterval(this.updateIntervalId),t.target.hasChildNodes()&&t.target.childNodes.forEach(o=>{o.nodeName==="title"&&(t.target.titleExpando=o.innerHTML,o.remove())});const e=this.computedTarget||t.target;let i=this.getTitle(e);if(!i.title){this.computedOpen&&this.onClose(t);return}i.element&&(i.element.titleExpando=i.title,i.element.title=""),this.willOpen=!0,this.$props.openDelay?s.canUseDOM&&(this.openTimeoutId=window.setTimeout(()=>{this.willOpen&&(this.currentTargetElement=e,this.currentOpen=!0,this.title=i.title,this.setUpdateInterval())},this.$props.openDelay)):(this.currentTargetElement=e,this.currentOpen=!0,this.title=i.title,this.setUpdateInterval()),this.title!==i.title&&this.$emit("open",{event:t,compoponent:this})},setUpdateInterval(){this.$props.updateInterval&&(this.updateIntervalId=setInterval(this.onIntervalUpdate,this.$props.updateInterval))},onIntervalUpdate(){const t=this.computedTarget;t&&(t.parentElement===null?this.onClose({target:t}):this.showToolTip({target:t}))},resetPosition(){if(this.element){let t=this.setPosition(this.element);this.$props.updatePosition&&(t=this.$props.updatePosition({element:this.element,targetElement:this.computedTarget,mouseTop:this.top,mouseLeft:this.left,anchorElement:this.$props.anchorElement,position:this.$props.position,target:this,defaultPosition:t})),this.element.style.left=t.left+"px",this.element.style.top=t.top+"px"}},isVisible(t){return!this.$props.filter||this.$props.filter(t)},setPosition(t){const e=this.getAnchorElement(),i=p.getDomRect(e),o=e.ownerDocument.documentElement.clientWidth,n=this.$props.position==="left"||this.$props.position==="right";this.fitToSide(t,i,o,n);const l=p.getLeftPosition(this.left,t.offsetWidth,i,this.$props.anchorElement,this.$props.position),a=p.getTopPosition(this.top,i,t.offsetHeight,this.$props.anchorElement,this.$props.position),h=o-t.offsetWidth;return{left:n?l:Math.max(0,Math.min(l,h)),top:a}},fitToSide(t,e,i,o){const n=this.$props.wrapperStyle||{};if(n.minWidth===void 0&&(t.style.minWidth=o?"min-content":""),n.maxWidth!==void 0)return;if(!o){t.style.maxWidth=u;return}const l=p.getLeftPosition(this.left,0,e,this.$props.anchorElement,this.$props.position),a=this.$props.position==="right"?i-l:l;t.style.maxWidth=Math.max(0,a)+"px"},positionCallout(){if(!this.callout||!this.element||!this.computedTarget)return;const{anchorElement:t,position:e,setCalloutOnPositionAuto:i}=this.$props;if(e==="left"||e==="right"){this.callout.style.left="";return}if(e==="auto"&&i){this.callout.style.left=i;return}const o=this.element.getBoundingClientRect();let n=this.left;if(t!=="pointer"){const h=p.getDomRect(this.getAnchorElement());n=h.left+h.width/2}const l=this.callout.offsetWidth/2,a=Math.min(Math.max(n-o.left,l),o.width-l);this.callout.style.left=a+"px"},positionTooltip(){!this.element||!this.computedTarget||(this.resetPosition(),this.positionCallout())},getAnchorElement(){const t=this.computedTarget;return this.$props.parentTitle&&this.getTitle(t).element||t},getTitle(t){for(;t;){if(t.getAttribute("title")!==null||t.titleExpando)return{title:t.getAttribute("title")||t.titleExpando,element:t};t=this.$props.parentTitle&&t.parentElement||null}return{title:"",element:t}},calloutClassName(){switch(this.$props.position){case"bottom":return"k-callout k-callout-n";case"left":return"k-callout k-callout-e";case"right":return"k-callout k-callout-w";case"top":return"k-callout k-callout-s";default:return s.canUseDOM&&this.top<window.innerHeight/2?"k-callout k-callout-n":"k-callout k-callout-s"}},getCurrentZIndex(){return this.kCurrentZIndex?this.kCurrentZIndex:m}}});exports.Tooltip=f;
|
package/tooltip/Tooltip.mjs
CHANGED
|
@@ -5,11 +5,11 @@
|
|
|
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 { canUseDOM as
|
|
10
|
-
import { getDomRect as
|
|
11
|
-
import { packageMetadata as
|
|
12
|
-
const
|
|
8
|
+
import { defineComponent as T, h as v, createVNode as a } from "vue";
|
|
9
|
+
import { canUseDOM as h, getDefaultSlots as w, templateRendering as E, getListeners as y, guid as $, getTemplate as I, classNames as b, setRef as p, getRef as u, validatePackage as O } from "@progress/kendo-vue-common";
|
|
10
|
+
import { getDomRect as c, getLeftPosition as d, getTopPosition as x, isTooltipElement as m } from "./utils.mjs";
|
|
11
|
+
import { packageMetadata as C } from "../package-metadata.mjs";
|
|
12
|
+
const k = 100, f = "100vw", g = "_tb_active", P = /* @__PURE__ */ T({
|
|
13
13
|
name: "KendoTooltip",
|
|
14
14
|
inheritAttrs: !1,
|
|
15
15
|
props: {
|
|
@@ -93,10 +93,10 @@ const C = 100, h = "_tb_active", D = /* @__PURE__ */ m({
|
|
|
93
93
|
}
|
|
94
94
|
},
|
|
95
95
|
created() {
|
|
96
|
-
|
|
96
|
+
O(C), this.top = 0, this.left = 0, this.willOpen = !1;
|
|
97
97
|
},
|
|
98
98
|
mounted() {
|
|
99
|
-
this.element =
|
|
99
|
+
this.element = u(this, "element"), this.resizeObserver = new ResizeObserver(() => this.positionTooltip()), window.addEventListener("resize", this.positionTooltip), document && document.body.addEventListener("mousemove", this.handleBodyMousemove);
|
|
100
100
|
},
|
|
101
101
|
unmounted() {
|
|
102
102
|
this.destroyElement();
|
|
@@ -104,58 +104,71 @@ const C = 100, h = "_tb_active", D = /* @__PURE__ */ m({
|
|
|
104
104
|
updated() {
|
|
105
105
|
if (this.$props.open && this.$props.targetElement && this.showToolTip({
|
|
106
106
|
target: this.$props.targetElement
|
|
107
|
-
}), this.element =
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
107
|
+
}), this.element = u(this, "element"), !this.element) {
|
|
108
|
+
this.shownElement = null, this.shownAnchor = null;
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
111
|
+
if (this.computedTarget) {
|
|
112
|
+
const i = this.$props.appendTo ? this.$props.appendTo : this.computedTarget.ownerDocument.body;
|
|
113
|
+
this.element.parentElement !== i && i.append(this.element), this.resizeObserver.observe(this.element);
|
|
113
114
|
}
|
|
115
|
+
this.callout = this.calloutRef, this.callout && (this.callout.className = this.calloutClassName()), this.positionTooltip();
|
|
116
|
+
const t = this.computedTarget && this.getAnchorElement();
|
|
117
|
+
if (this.shownElement === this.element && this.shownAnchor === t)
|
|
118
|
+
return;
|
|
119
|
+
this.shownElement = this.element, this.shownAnchor = t;
|
|
120
|
+
const e = this.element;
|
|
121
|
+
e.style.visibility = "hidden", window.requestAnimationFrame(() => {
|
|
122
|
+
this.positionTooltip(), e.style.visibility = "";
|
|
123
|
+
});
|
|
114
124
|
},
|
|
115
125
|
render() {
|
|
116
|
-
const t =
|
|
117
|
-
let
|
|
118
|
-
this.computedTarget && (this.computedTarget.hasAttribute("id") && (
|
|
119
|
-
const
|
|
120
|
-
h:
|
|
126
|
+
const t = w(this), e = this.getCurrentZIndex(), i = this.$props.content ? E.call(this, this.$props.content, y.call(this)) : void 0, o = this.title;
|
|
127
|
+
let s = $() + g;
|
|
128
|
+
this.computedTarget && (this.computedTarget.hasAttribute("id") && (s = this.computedTarget.getAttribute("id") + g), this.computedTarget.setAttribute("aria-describedby", s));
|
|
129
|
+
const n = I.call(this, {
|
|
130
|
+
h: v,
|
|
121
131
|
template: i,
|
|
122
132
|
defaultRendering: o,
|
|
123
133
|
additionalProps: {
|
|
124
134
|
title: this.title,
|
|
125
135
|
target: this.computedTarget
|
|
126
136
|
}
|
|
127
|
-
}),
|
|
128
|
-
class:
|
|
137
|
+
}), l = this.computedOpen && a("div", {
|
|
138
|
+
class: b("k-tooltip", this.$props.tooltipClassName),
|
|
129
139
|
role: "tooltip",
|
|
130
|
-
id:
|
|
140
|
+
id: s,
|
|
131
141
|
style: {
|
|
132
142
|
position: "relative",
|
|
133
143
|
...this.$props.tooltipStyle
|
|
134
144
|
}
|
|
135
|
-
}, [
|
|
145
|
+
}, [a("div", {
|
|
136
146
|
class: "k-tooltip-content"
|
|
137
|
-
}, [
|
|
138
|
-
ref:
|
|
139
|
-
}, null)]), r = this.computedTarget && this.title && this.computedTarget.ownerDocument &&
|
|
140
|
-
ref:
|
|
147
|
+
}, [n]), this.$props.showCallout && a("div", {
|
|
148
|
+
ref: p(this, "callout")
|
|
149
|
+
}, null)]), r = this.computedTarget && this.title && this.computedTarget.ownerDocument && a("div", {
|
|
150
|
+
ref: p(this, "element"),
|
|
141
151
|
class: this.wrapperClass,
|
|
142
152
|
style: {
|
|
143
153
|
zIndex: e,
|
|
154
|
+
width: "max-content",
|
|
155
|
+
maxWidth: f,
|
|
144
156
|
...this.$props.wrapperStyle
|
|
145
157
|
},
|
|
146
158
|
tabindex: 0,
|
|
147
159
|
onMouseleave: this.handleTooltipMouseOut
|
|
148
|
-
}, [
|
|
160
|
+
}, [a("div", {
|
|
149
161
|
class: "k-child-animation-container"
|
|
150
|
-
}, [
|
|
151
|
-
return t ?
|
|
162
|
+
}, [l])]);
|
|
163
|
+
return t ? a("div", {
|
|
152
164
|
onMouseover: this.handleMouseOver,
|
|
153
165
|
onMouseout: this.handleMouseOut
|
|
154
166
|
}, [r, t]) : r;
|
|
155
167
|
},
|
|
156
168
|
methods: {
|
|
157
169
|
destroyElement() {
|
|
158
|
-
|
|
170
|
+
var t;
|
|
171
|
+
clearTimeout(this.openTimeoutId), clearInterval(this.updateIntervalId), (t = this.resizeObserver) == null || t.disconnect(), window.removeEventListener("resize", this.positionTooltip), document && document.body.removeEventListener("mousemove", this.handleBodyMousemove), this.element && this.element.remove();
|
|
159
172
|
},
|
|
160
173
|
handleTooltipMouseOut(t) {
|
|
161
174
|
this.onClose(t);
|
|
@@ -163,20 +176,21 @@ const C = 100, h = "_tb_active", D = /* @__PURE__ */ m({
|
|
|
163
176
|
handleMouseOut(t) {
|
|
164
177
|
const e = this.computedTarget ? this.computedTarget.ownerDocument : document;
|
|
165
178
|
let i = e && e.elementFromPoint(t.clientX, t.clientY);
|
|
166
|
-
this.willOpen = !1, !(
|
|
179
|
+
this.willOpen = !1, !(m(i) || this.computedTarget !== t.target) && (this.$props.open || (clearInterval(this.updateIntervalId), this.onClose(t)));
|
|
167
180
|
},
|
|
168
181
|
handleMouseOver(t) {
|
|
169
182
|
const e = t.target;
|
|
170
|
-
!this.isVisible(e) ||
|
|
183
|
+
!this.isVisible(e) || m(e) || e === this.computedTarget || this.showToolTip(t);
|
|
171
184
|
},
|
|
172
185
|
handleBodyMousemove(t) {
|
|
173
186
|
this.top = t.clientY, this.left = t.clientX;
|
|
174
187
|
},
|
|
175
188
|
onClose(t) {
|
|
189
|
+
var e;
|
|
176
190
|
this.$emit("close", {
|
|
177
191
|
event: t,
|
|
178
192
|
component: this
|
|
179
|
-
}), this.computedTarget.removeAttribute("aria-describedby"), this.currentTargetElement = null, this.currentOpen = !1, this.title = "";
|
|
193
|
+
}), this.computedTarget.removeAttribute("aria-describedby"), this.currentTargetElement = null, (e = this.resizeObserver) == null || e.disconnect(), this.currentOpen = !1, this.title = "";
|
|
180
194
|
},
|
|
181
195
|
showToolTip(t) {
|
|
182
196
|
clearTimeout(this.openTimeoutId), clearInterval(this.updateIntervalId), t.target.hasChildNodes() && t.target.childNodes.forEach((o) => {
|
|
@@ -188,7 +202,7 @@ const C = 100, h = "_tb_active", D = /* @__PURE__ */ m({
|
|
|
188
202
|
this.computedOpen && this.onClose(t);
|
|
189
203
|
return;
|
|
190
204
|
}
|
|
191
|
-
i.element && (i.element.titleExpando = i.title, i.element.title = ""), this.willOpen = !0, this.$props.openDelay ?
|
|
205
|
+
i.element && (i.element.titleExpando = i.title, i.element.title = ""), this.willOpen = !0, this.$props.openDelay ? h && (this.openTimeoutId = window.setTimeout(() => {
|
|
192
206
|
this.willOpen && (this.currentTargetElement = e, this.currentOpen = !0, this.title = i.title, this.setUpdateInterval());
|
|
193
207
|
}, this.$props.openDelay)) : (this.currentTargetElement = e, this.currentOpen = !0, this.title = i.title, this.setUpdateInterval()), this.title !== i.title && this.$emit("open", {
|
|
194
208
|
event: t,
|
|
@@ -225,14 +239,57 @@ const C = 100, h = "_tb_active", D = /* @__PURE__ */ m({
|
|
|
225
239
|
return !this.$props.filter || this.$props.filter(t);
|
|
226
240
|
},
|
|
227
241
|
setPosition(t) {
|
|
228
|
-
const e = this.
|
|
229
|
-
|
|
230
|
-
const
|
|
242
|
+
const e = this.getAnchorElement(), i = c(e), o = e.ownerDocument.documentElement.clientWidth, s = this.$props.position === "left" || this.$props.position === "right";
|
|
243
|
+
this.fitToSide(t, i, o, s);
|
|
244
|
+
const n = d(this.left, t.offsetWidth, i, this.$props.anchorElement, this.$props.position), l = x(this.top, i, t.offsetHeight, this.$props.anchorElement, this.$props.position), r = o - t.offsetWidth;
|
|
231
245
|
return {
|
|
232
|
-
left:
|
|
233
|
-
top:
|
|
246
|
+
left: s ? n : Math.max(0, Math.min(n, r)),
|
|
247
|
+
top: l
|
|
234
248
|
};
|
|
235
249
|
},
|
|
250
|
+
fitToSide(t, e, i, o) {
|
|
251
|
+
const s = this.$props.wrapperStyle || {};
|
|
252
|
+
if (s.minWidth === void 0 && (t.style.minWidth = o ? "min-content" : ""), s.maxWidth !== void 0)
|
|
253
|
+
return;
|
|
254
|
+
if (!o) {
|
|
255
|
+
t.style.maxWidth = f;
|
|
256
|
+
return;
|
|
257
|
+
}
|
|
258
|
+
const n = d(this.left, 0, e, this.$props.anchorElement, this.$props.position), l = this.$props.position === "right" ? i - n : n;
|
|
259
|
+
t.style.maxWidth = Math.max(0, l) + "px";
|
|
260
|
+
},
|
|
261
|
+
positionCallout() {
|
|
262
|
+
if (!this.callout || !this.element || !this.computedTarget)
|
|
263
|
+
return;
|
|
264
|
+
const {
|
|
265
|
+
anchorElement: t,
|
|
266
|
+
position: e,
|
|
267
|
+
setCalloutOnPositionAuto: i
|
|
268
|
+
} = this.$props;
|
|
269
|
+
if (e === "left" || e === "right") {
|
|
270
|
+
this.callout.style.left = "";
|
|
271
|
+
return;
|
|
272
|
+
}
|
|
273
|
+
if (e === "auto" && i) {
|
|
274
|
+
this.callout.style.left = i;
|
|
275
|
+
return;
|
|
276
|
+
}
|
|
277
|
+
const o = this.element.getBoundingClientRect();
|
|
278
|
+
let s = this.left;
|
|
279
|
+
if (t !== "pointer") {
|
|
280
|
+
const r = c(this.getAnchorElement());
|
|
281
|
+
s = r.left + r.width / 2;
|
|
282
|
+
}
|
|
283
|
+
const n = this.callout.offsetWidth / 2, l = Math.min(Math.max(s - o.left, n), o.width - n);
|
|
284
|
+
this.callout.style.left = l + "px";
|
|
285
|
+
},
|
|
286
|
+
positionTooltip() {
|
|
287
|
+
!this.element || !this.computedTarget || (this.resetPosition(), this.positionCallout());
|
|
288
|
+
},
|
|
289
|
+
getAnchorElement() {
|
|
290
|
+
const t = this.computedTarget;
|
|
291
|
+
return this.$props.parentTitle && this.getTitle(t).element || t;
|
|
292
|
+
},
|
|
236
293
|
getTitle(t) {
|
|
237
294
|
for (; t; ) {
|
|
238
295
|
if (t.getAttribute("title") !== null || t.titleExpando)
|
|
@@ -258,14 +315,14 @@ const C = 100, h = "_tb_active", D = /* @__PURE__ */ m({
|
|
|
258
315
|
case "top":
|
|
259
316
|
return "k-callout k-callout-s";
|
|
260
317
|
default:
|
|
261
|
-
return
|
|
318
|
+
return h && this.top < window.innerHeight / 2 ? "k-callout k-callout-n" : "k-callout k-callout-s";
|
|
262
319
|
}
|
|
263
320
|
},
|
|
264
321
|
getCurrentZIndex() {
|
|
265
|
-
return this.kCurrentZIndex ? this.kCurrentZIndex :
|
|
322
|
+
return this.kCurrentZIndex ? this.kCurrentZIndex : k;
|
|
266
323
|
}
|
|
267
324
|
}
|
|
268
325
|
});
|
|
269
326
|
export {
|
|
270
|
-
|
|
327
|
+
P as Tooltip
|
|
271
328
|
};
|