@progress/kendo-vue-tooltip 2.7.1-dev.202112201049
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/LICENSE.md +11 -0
- package/NOTICE.txt +33 -0
- package/README.md +49 -0
- package/dist/cdn/js/kendo-vue-tooltip.js +1 -0
- package/dist/es/Tooltip.d.ts +45 -0
- package/dist/es/Tooltip.js +404 -0
- package/dist/es/TooltipProps.d.ts +100 -0
- package/dist/es/TooltipProps.js +1 -0
- package/dist/es/additionalTypes.ts +3 -0
- package/dist/es/events.d.ts +29 -0
- package/dist/es/events.js +0 -0
- package/dist/es/main.d.ts +5 -0
- package/dist/es/main.js +2 -0
- package/dist/es/package-metadata.d.ts +5 -0
- package/dist/es/package-metadata.js +11 -0
- package/dist/es/utils.d.ts +24 -0
- package/dist/es/utils.js +95 -0
- package/dist/npm/Tooltip.d.ts +45 -0
- package/dist/npm/Tooltip.js +416 -0
- package/dist/npm/TooltipProps.d.ts +100 -0
- package/dist/npm/TooltipProps.js +3 -0
- package/dist/npm/additionalTypes.ts +3 -0
- package/dist/npm/events.d.ts +29 -0
- package/dist/npm/events.js +2 -0
- package/dist/npm/main.d.ts +5 -0
- package/dist/npm/main.js +5 -0
- package/dist/npm/package-metadata.d.ts +5 -0
- package/dist/npm/package-metadata.js +14 -0
- package/dist/npm/utils.d.ts +24 -0
- package/dist/npm/utils.js +104 -0
- package/package.json +53 -0
package/LICENSE.md
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
# Kendo UI for Vue
|
|
2
|
+
|
|
3
|
+
This package is part of the [Kendo UI for Vue](https://www.telerik.com/kendo-vue-ui/) suite.
|
|
4
|
+
|
|
5
|
+
## License
|
|
6
|
+
|
|
7
|
+
This is commercial software. To use it, you need to agree to the [**Telerik End User License Agreement for Kendo UI**](https://www.telerik.com/purchase/license-agreement/kendo-ui). If you do not own a commercial license, this file shall be governed by the trial license terms.
|
|
8
|
+
|
|
9
|
+
All available Kendo UI commercial licenses may be obtained at https://www.telerik.com/purchase/kendo-ui.
|
|
10
|
+
|
|
11
|
+
*Copyright © 2021 Progress Software Corporation and/or one of its subsidiaries or affiliates. All Rights Reserved.*
|
package/NOTICE.txt
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
Progress Kendo UI for Vue 2021
|
|
2
|
+
|
|
3
|
+
Copyright © 2021 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.
|
|
4
|
+
|
|
5
|
+
Portions of the Product include certain open source and commercial third-party components listed below (“Third-Party Components”). The authors of the Third-Party Components require Progress Software Corporation (“PSC”) to include the following notices and additional licensing terms as a condition of PSC’s use of such Third-Party Components. You acknowledge that the authors of the Third-Party Components have no obligation to provide support to you for the Third-Party Components or the Product. You hereby undertake to comply with all licenses related to the applicable Third-Party Components. Notwithstanding anything to the contrary, to the extent that any of the terms and conditions of the Product Agreement conflict, vary, or are in addition to the terms and conditions of the aforementioned third-party licenses for these technologies, such terms and conditions are offered by PSC alone and not by any other party.
|
|
6
|
+
|
|
7
|
+
1. Special Notices Regarding Open Source Third-Party Components incorporated in the Product:
|
|
8
|
+
|
|
9
|
+
(1) MIT-style Licenses:
|
|
10
|
+
|
|
11
|
+
(a) Progress Kendo UI for Vue 2021 incorporates jszip-esm v1.0. Such technology is subject to the following terms and conditions:
|
|
12
|
+
The MIT License
|
|
13
|
+
Copyright (c) 2009-2016 Stuart Knightley, David Duponchel, Franz Buchinger, António Afonso
|
|
14
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
15
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
17
|
+
|
|
18
|
+
(b) Progress Kendo UI for Vue 2021 incorporates pako-esm v1.0 (as modified by PSC). Such technology is subject to the following terms and conditions:
|
|
19
|
+
Copyright © 2020 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved. (as modified)
|
|
20
|
+
Copyright (C) 2014-2017 by Vitaly Puzrin and Andrei Tuputcyn
|
|
21
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
22
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
23
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
2. Special Notices Regarding Commercially Licensed Third-Party Components incorporated in the Product:
|
|
27
|
+
|
|
28
|
+
(a) Progress Kendo UI for Vue 2021 incorporates Progress Kendo UI Licensing CLI v1.1 licensed from Progress Software Corporation. See NOTICE.txt text file within products for third-party license requirements/agreements.
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
NOTICE FROM PROGRESS SOFTWARE CORPORATION: Additional notices may be included in the release notes or other documentation that accompanies updates received in connection with support of the Product.
|
|
32
|
+
|
|
33
|
+
Updated 1/14/2021
|
package/README.md
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<a href="https://www.telerik.com/kendo-vue-ui/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip&utm_content=banner" target="_blank">
|
|
2
|
+
<img src="https://www.telerik.com/kendo-vue-ui/npm-banner.svg">
|
|
3
|
+
</a>
|
|
4
|
+
|
|
5
|
+
# Kendo UI for Vue Tooltip Component for Vue
|
|
6
|
+
|
|
7
|
+
> **Important**
|
|
8
|
+
> * This package is а part of [Kendo UI for Vue](https://www.telerik.com/kendo-vue-ui/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip)—a commercial UI library.
|
|
9
|
+
> * You will need to install a license key when adding the package to your project. For more information, please refer to the [Kendo UI for Vue My License page](https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip).
|
|
10
|
+
> * To receive a license key, you need to either [purchase a license](https://www.telerik.com/kendo-vue-ui/pricing/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-vue-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip). Doing so indicates that you [accept the Kendo UI for Vue License Agreement](https://www.telerik.com/purchase/license-agreement/progress-kendovue?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip).
|
|
11
|
+
> * The 30-day free trial gives you access to all the Kendo UI for Vue components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Vue dev team!
|
|
12
|
+
>
|
|
13
|
+
> [Start using Kendo UI for Vue](https://www.telerik.com/download-login-v2-kendo-vue-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip) and speed up your development process!
|
|
14
|
+
|
|
15
|
+
The Kendo UI for Vue Tooltip represents a popup with information that is related to a UI element and which is displayed when this UI element is clicked or hovered over.
|
|
16
|
+
|
|
17
|
+
## Vue Tooltip
|
|
18
|
+
|
|
19
|
+
Among the features which the Kendo UI for Vue Tooltip component delivers are:
|
|
20
|
+
|
|
21
|
+
* [Controlled mode](https://www.telerik.com/kendo-vue-ui/components/tooltip/controlled-mode/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip)—Supports both standard tooltip visualization, by hovering and showing it programmatically.
|
|
22
|
+
* [Anchor elements](https://www.telerik.com/kendo-vue-ui/components/tooltip/anchor-elements/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip)—You can target specific anchor elements which will render a tooltip.
|
|
23
|
+
* [Positioning](https://www.telerik.com/kendo-vue-ui/components/tooltip/positioning/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip)—By default, the position of the Tooltip is determined by the available space around it. Additionally, you can set specific position from a property.
|
|
24
|
+
* [Templates](https://www.telerik.com/kendo-vue-ui/components/tooltip/templates/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip)—You can provide a custom rendering for the content of the Tooltip.
|
|
25
|
+
* [Multiple tooltips](https://www.telerik.com/kendo-vue-ui/components/tooltip/multiple-tooltips/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip)—Enables the visualization of multiple tooltips on the same page.
|
|
26
|
+
* [Customization](https://www.telerik.com/kendo-vue-ui/components/tooltip/tooltip-customization/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip)—You can place the Tooltip in a specific location and attach its handlers there.
|
|
27
|
+
* [Theme support](https://www.telerik.com/kendo-vue-ui/components/styling/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip)—The Kendo UI for Vue Tooltip, as well as all 100+ components in the Kendo UI for Vue suite, are styled in three polished themes (Bootstrap, Material, and Default) and can be further customized to match your specific design guidelines.
|
|
28
|
+
|
|
29
|
+
## Support Options
|
|
30
|
+
|
|
31
|
+
For any issues you might encounter while working with the Kendo UI for Vue Tooltip, use any of the available support channels:
|
|
32
|
+
|
|
33
|
+
* Industry-leading technical support—Kendo UI for Vue paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use [the dedicated Kendo UI for Vue support system](https://www.telerik.com/account/support-tickets?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-listview).
|
|
34
|
+
* Product forums—The [Kendo UI for Vue forums](https://www.telerik.com/forums/kendo-ui-vue?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-listview) are part of the free support you can get from the community and from the Kendo UI for Vue team.
|
|
35
|
+
* Feedback portal—The [Kendo UI for Vue feedback portal](https://feedback.telerik.com/kendo-vue-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip) is where you can request and vote for new features to be added.
|
|
36
|
+
|
|
37
|
+
## Resources
|
|
38
|
+
|
|
39
|
+
* [Getting Started with Kendo UI for Vue](https://www.telerik.com/kendo-vue-ui/getting-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip)
|
|
40
|
+
* [Get Started with the Kendo UI for Vue Tooltip](https://www.telerik.com/kendo-vue-ui/components/tooltip/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip)
|
|
41
|
+
* [API Reference of the Kendo UI for Vue Tooltip](https://www.telerik.com/kendo-vue-ui/components/tooltip/api/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip)
|
|
42
|
+
* [Kendo UI for Vue Roadmap](https://www.telerik.com/support/whats-new/kendo-vue-ui/roadmap/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip)
|
|
43
|
+
* [Blogs](https://www.telerik.com/blogs/tag/kendo?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip)
|
|
44
|
+
* [Demos, documentation, and component reference](https://www.telerik.com/kendo-vue-ui/components/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip)
|
|
45
|
+
* [Kendo UI for Vue pricing and licensing](https://www.telerik.com/kendo-vue-ui/pricing/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-vue-trial-npm-tooltip)
|
|
46
|
+
|
|
47
|
+
*Copyright © 2021 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.*
|
|
48
|
+
|
|
49
|
+
*Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.*
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("vue"),require("@progress/kendo-licensing")):"function"==typeof define&&define.amd?define(["vue","@progress/kendo-licensing"],e):"object"==typeof exports?exports.KendoVueTooltip=e(require("vue"),require("@progress/kendo-licensing")):t.KendoVueTooltip=e(t.Vue,t.KendoLicensing)}(window,(function(t,e){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(o,i,function(e){return t[e]}.bind(null,i));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=2)}([function(e,n){e.exports=t},function(t,n){t.exports=e},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.Tooltip=void 0;var o=n(3);Object.defineProperty(e,"Tooltip",{enumerable:!0,get:function(){return o.Tooltip}})},function(t,e,n){"use strict";var o=function(){return(o=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)},i=Object.create?function(t,e,n,o){void 0===o&&(o=n),Object.defineProperty(t,o,{enumerable:!0,get:function(){return e[n]}})}:function(t,e,n,o){void 0===o&&(o=n),t[o]=e[n]},r=Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e},s=function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var n in t)"default"!==n&&Object.hasOwnProperty.call(t,n)&&i(e,t,n);return r(e,t),e};Object.defineProperty(e,"__esModule",{value:!0}),e.TooltipVue3=e.Tooltip=void 0;var u=s(n(0)).h,l=n(6),a=n(4),c=n(5),p={name:"KendoTooltip",inheritAttrs:!1,props:{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)}},updateInterval:Number,className:String,wrapperStyle:Object,tooltipClassName:String,tooltipStyle:Object,parentTitle:{type:Boolean,default:!1}},data:function(){return{top:0,left:0,targetElement:null,currentOpen:!1,title:""}},computed:{wrapperClass:function(){var t;return(t={"k-animation-container":!0,"k-animation-container-fixed":!0,"k-animation-container-shown":!0})[this.$props.className]=!0,t}},created:function(){l.validatePackage(c.packageMetadata),this.top=0,this.left=0,this.willOpen=!1},mounted:function(){document&&document.body.addEventListener("mousemove",this.handleBodyMousemove)},destroyed:function(){clearTimeout(this.openTimeoutId),clearInterval(this.updateIntervalId),document&&document.body.removeEventListener("mousemove",this.handleBodyMousemove),this.element&&this.element.remove()},updated:function(){if(this.$props.targetElement&&this.showToolTip({target:this.$props.targetElement}),this.element=this.v3?this.elementRef:this.$refs.element,this.element){var t;if(t=this.$props.onPosition?this.$props.onPosition.call(void 0,{element:this.element,targetElement:this.state.targetElement,mouseTop:this.top,mouseLeft:this.left,anchorElement:this.$props.anchorElement,position:this.$props.position,target:this}):this.setPosition(this.element),this.element.style.left=t.left+"px",this.element.style.top=t.top+"px",this.targetElement){var e=this.$props.appendTo?this.$props.appendTo:this.targetElement.ownerDocument.body;this.element.parentElement!==e&&this.targetElement.ownerDocument.body.append(this.element)}this.callout=this.v3?this.calloutRef:this.$refs.callout,this.callout&&(this.callout.className=this.calloutClassName(),"auto"===this.$props.position&&(this.left<window.screen.availWidth/2?this.callout.style.left=this.$props.setCalloutOnPositionAuto||"25%":this.callout.style.left=this.$props.setCalloutOnPositionAuto||"75%"))}},setup:u?function(){return{v3:!!u}}:void 0,render:function(t){var e=this,n=u||t,i=l.getDefaultSlots(this);if(!1===this.$props.open)return null;var r=this.getCurrentZIndex(),s=this.$props.content?l.templateRendering.call(this,this.$props.content,l.getListeners.call(this)):void 0,a=this.title,c=l.getTemplate.call(this,{h:n,template:s,defaultRendering:a,additionalProps:{title:this.title,target:this.targetElement}}),p=n("div",{class:l.classNames("k-tooltip",this.$props.tooltipClassName),style:o({position:"relative"},this.$props.tooltipStyle)},[n("div",{class:"k-tooltip-content"},[c]),this.$props.showCallout&&n("div",{ref:this.v3?function(t){e.calloutRef=t}:"callout"})]),d=this.targetElement&&this.title&&this.targetElement.ownerDocument&&n("div",{ref:this.v3?function(t){e.elementRef=t}:"element",class:this.wrapperClass,style:o({zIndex:r},this.$props.wrapperStyle),tabIndex:0,attrs:this.v3?void 0:{tabIndex:0}},[p]);return i?n("div",{onMouseover:this.handleMouseOver,on:this.v3?void 0:{mouseover:this.handleMouseOver,mouseout:this.handleMouseOut},onMouseout:this.handleMouseOut},[d,i]):{tooltip:d}},methods:{handleMouseOut:function(t){var e=this.targetElement?this.targetElement.ownerDocument:document,n=e&&e.elementFromPoint(t.clientX,t.clientY);a.isTooltipElement(n)||this.$props.open||(clearInterval(this.updateIntervalId),this.willOpen=!1,this.onClose(t))},handleMouseOver:function(t){var e=t.target;this.isVisible(e)&&!a.isTooltipElement(e)&&e!==this.targetElement&&this.showToolTip(t)},handleBodyMousemove:function(t){this.top=t.clientY,this.left=t.clientX},onClose:function(t){this.$emit("close",{event:t,component:this}),this.targetElement=null,this.currentOpen=!1,this.title=""},showToolTip:function(t){var e=this;clearTimeout(this.openTimeoutId),clearInterval(this.updateIntervalId),t.target.hasChildNodes()&&t.target.childNodes.forEach((function(e){"title"===e.nodeName&&(t.target.titleExpando=e.innerHTML,e.remove())}));var n=this.$props.targetElement||t.target,o=this.getTitle(n);o.title?(o.element&&(o.element.titleExpando=o.title,o.element.title=""),this.willOpen=!0,this.$props.openDelay?this.openTimeoutId=window.setTimeout((function(){e.willOpen&&(e.targetElement=n,e.currentOpen=!0,e.title=o.title,e.setUpdateInterval())}),this.$props.openDelay):(this.targetElement=n,this.currentOpen=!0,this.title=o.title,this.setUpdateInterval()),this.title!==o.title&&this.$emit("open",{event:t,compoponent:this})):this.currentOpen&&this.onClose(t)},setUpdateInterval:function(){this.$props.updateInterval&&(this.updateIntervalId=setInterval(this.onIntervalUpdate,this.$props.updateInterval))},onIntervalUpdate:function(){var t=this.targetElement;t&&(null===t.parentElement?this.onClose({target:t}):this.showToolTip({target:t}))},isVisible:function(t){return!this.$props.filter||this.$props.filter(t)},setPosition:function(t){var e=a.getDomRect(this.targetElement);return{left:a.getLeftPosition(this.left,t.offsetWidth,e,this.$props.anchorElement,this.$props.position),top:a.getTopPosition(this.top,e,t.offsetHeight,this.$props.anchorElement,this.$props.position)}},getTitle:function(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:function(){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 this.top<window.innerHeight/2?"k-callout k-callout-n":"k-callout k-callout-s"}},getCurrentZIndex:function(){return this.context?this.context:100}}};e.Tooltip=p;var d=p;e.TooltipVue3=d},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.isTooltipElement=e.toolTipSelectors=e.getDomRect=e.getTopPosition=e.getLeftPosition=void 0;e.getLeftPosition=function(t,e,n,o,i){switch(i){case"bottom":return"pointer"===o?t-e/2:n.left-e/2+n.width/2;case"left":return"pointer"===o?t-e-10:n.left-e-10;case"right":return"pointer"===o?t+10:n.right+10;case"top":return"pointer"===o?t-e/2:n.left-e/2+n.width/2;default:return"pointer"===o?t<window.screen.availWidth/2?t-10:t-e+10:t<window.screen.availWidth/2?n.left:n.right-e}},e.getTopPosition=function(t,e,n,o,i){switch(i){case"bottom":return"pointer"===o?t+10:e.bottom+10;case"left":case"right":return"pointer"===o?t-n/2:e.top-n/2+e.height/2;case"top":return"pointer"===o?t-n-10:e.top-n-10;default:return"pointer"===o?t<window.innerHeight/2?t+10:t-n-10:t<window.innerHeight/2?e.bottom+10:e.top-n-10}},e.getDomRect=function(t){return null!==t?t.getBoundingClientRect():document.body.getBoundingClientRect()},e.toolTipSelectors=["k-tooltip-content","k-animation-container","k-tooltip","k-tooltip-title","k-tooltip k-tooltip-closable","k-icon k-i-close"],e.isTooltipElement=function(t){if(null===t)return!1;for(var n=t;n;){if(null!==n&&n.classList&&n.classList.contains("k-tooltip"))return!0;n=null!==n.parentNode&&n.parentNode}return e.toolTipSelectors.filter((function(e){return e===t.className})).length>0}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.packageMetadata=void 0,e.packageMetadata={name:"@progress/kendo-vue-tooltip",productName:"Kendo UI for Vue",productCodes:["KENDOUIVUE","KENDOUICOMPLETE"],publishDate:1639997199,version:"",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"}},function(t,e,n){"use strict";n.r(e),n.d(e,"classNames",(function(){return o})),n.d(e,"guid",(function(){return i})),n.d(e,"Keys",(function(){return r})),n.d(e,"noop",(function(){return j})),n.d(e,"getListeners",(function(){return L})),n.d(e,"hasListener",(function(){return D})),n.d(e,"canUseDOM",(function(){return s})),n.d(e,"focusFirstFocusableChild",(function(){return u})),n.d(e,"clone",(function(){return E})),n.d(e,"Draggable",(function(){return O})),n.d(e,"cloneArray",(function(){return P})),n.d(e,"cloneValue",(function(){return k})),n.d(e,"cloneObject",(function(){return $})),n.d(e,"cloneDate",(function(){return T})),n.d(e,"getTemplate",(function(){return R})),n.d(e,"templateRendering",(function(){return K})),n.d(e,"getTabIndex",(function(){return A})),n.d(e,"getDefaultSlots",(function(){return _})),n.d(e,"isRtl",(function(){return X})),n.d(e,"getDir",(function(){return Y})),n.d(e,"getter",(function(){return M})),n.d(e,"setter",(function(){return S})),n.d(e,"validatePackage",(function(){return V}));var o=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];return t.filter((function(t){return!0!==t&&!!t})).map((function(t){return Array.isArray(t)?o.apply(void 0,t):"object"==typeof t?Object.keys(t).map((function(e,n){return t[n]||t[e]&&e||null})).filter((function(t){return null!==t})).join(" "):t})).filter((function(t){return!!t})).join(" ")},i=function(){var t,e,n="";for(t=0;t<32;t++)e=16*Math.random()|0,8!==t&&12!==t&&16!==t&&20!==t||(n+="-"),n+=(12===t?4:16===t?3&e|8:e).toString(16);return n},r={backspace:8,tab:9,enter:13,shift:16,esc:27,space:32,pageUp:33,pageDown:34,end:35,home:36,left:37,up:38,right:39,down:40,delete:46},s=Boolean("undefined"!=typeof window&&window.document&&window.document.createElement),u=function(t){if(t){var e=t.querySelectorAll('input, [tabindex]:not([tabindex="-1"])');e.length&&e[0].focus&&e[0].focus()}},l=n(0),a=function(t,e){return function(n){return e(t(n))}},c=function(t,e,n){return t.addEventListener&&t.addEventListener(e,n)},p=function(t,e,n){return t&&t.removeEventListener&&t.removeEventListener(e,n)},d=function(){},h=function(t){return t.preventDefault()},f=/touch/;function m(t){return t.type.match(f)?{pageX:t.changedTouches[0].pageX,pageY:t.changedTouches[0].pageY,clientX:t.changedTouches[0].clientX,clientY:t.changedTouches[0].clientY,type:t.type,originalEvent:t,isTouch:!0}:{pageX:t.pageX,pageY:t.pageY,clientX:t.clientX,clientY:t.clientY,offsetX:t.offsetX,offsetY:t.offsetY,type:t.type,ctrlKey:t.ctrlKey,shiftKey:t.shiftKey,altKey:t.altKey,originalEvent:t}}var v=function(t){var e=this,n=t.press;void 0===n&&(n=d);var o=t.drag;void 0===o&&(o=d);var i=t.release;void 0===i&&(i=d);var r=t.mouseOnly;void 0===r&&(r=!1),this._pressHandler=a(m,n),this._dragHandler=a(m,o),this._releaseHandler=a(m,i),this._ignoreMouse=!1,this._mouseOnly=r,this._touchstart=function(t){1===t.touches.length&&e._pressHandler(t)},this._touchmove=function(t){1===t.touches.length&&e._dragHandler(t)},this._touchend=function(t){0===t.touches.length&&1===t.changedTouches.length&&(e._releaseHandler(t),e._ignoreMouse=!0,setTimeout(e._restoreMouse,2e3))},this._restoreMouse=function(){e._ignoreMouse=!1},this._mousedown=function(t){var n=t.which;n&&n>1||e._ignoreMouse||(c(document,"mousemove",e._mousemove),c(document,"mouseup",e._mouseup),e._pressHandler(t))},this._mousemove=function(t){e._dragHandler(t)},this._mouseup=function(t){p(document,"mousemove",e._mousemove),p(document,"mouseup",e._mouseup),e._releaseHandler(t)},this._pointerdown=function(t){t.isPrimary&&0===t.button&&(c(document,"pointermove",e._pointermove),c(document,"pointerup",e._pointerup),c(document,"pointercancel",e._pointerup),c(document,"contextmenu",h),e._pressHandler(t))},this._pointermove=function(t){t.isPrimary&&e._dragHandler(t)},this._pointerup=function(t){t.isPrimary&&(p(document,"pointermove",e._pointermove),p(document,"pointerup",e._pointerup),p(document,"pointercancel",e._pointerup),p(document,"contextmenu",h),e._releaseHandler(t))}};v.supportPointerEvent=function(){return"undefined"!=typeof window&&window.PointerEvent},v.prototype.bindTo=function(t){t!==this._element&&(this._element&&this._unbindFromCurrent(),this._element=t,this._bindToCurrent())},v.prototype._bindToCurrent=function(){var t=this._element;this._usePointers()?c(t,"pointerdown",this._pointerdown):(c(t,"mousedown",this._mousedown),this._mouseOnly||(c(t,"touchstart",this._touchstart),c(t,"touchmove",this._touchmove),c(t,"touchend",this._touchend)))},v.prototype._unbindFromCurrent=function(){var t=this._element;if(this._usePointers())return p(t,"pointerdown",this._pointerdown),p(document,"pointermove",this._pointermove),p(document,"pointerup",this._pointerup),p(document,"contextmenu",h),void p(document,"pointercancel",this._pointerup);p(t,"mousedown",this._mousedown),this._mouseOnly||(p(t,"touchstart",this._touchstart),p(t,"touchmove",this._touchmove),p(t,"touchend",this._touchend))},v.prototype._usePointers=function(){return!this._mouseOnly&&v.supportPointerEvent()},v.prototype.update=function(t){var e=t.press;void 0===e&&(e=d);var n=t.drag;void 0===n&&(n=d);var o=t.release;void 0===o&&(o=d);var i=t.mouseOnly;void 0===i&&(i=!1),this._pressHandler=a(m,e),this._dragHandler=a(m,n),this._releaseHandler=a(m,o),this._mouseOnly=i},v.prototype.destroy=function(){this._unbindFromCurrent(),this._element=null},v.default=v;var g,y=v;function _(t){var e=t.$slots.default;return t.v3&&e&&"function"==typeof e?e():e}function b(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var w=l.h,O=(b(g={emits:{press:null,drag:null,release:null},inheritAttrs:!1,created:function(){this.element=null,this.draggable=new y({press:this.press,drag:this.drag,release:this.release})},setup:w?function(){return{v3:!!w}}:void 0,mounted:function(){this.$el&&(this.element=3===this.$el.nodeType?this.$el.nextElementSibling:this.$el,this.draggable.bindTo(this.element))},destroyed:w?void 0:function(){this.draggable.destroy()},unmounted:function(){this.draggable.destroy()},methods:{press:function(t){this.element&&this.$emit("press",t,this.element)},drag:function(t){this.element&&this.$emit("drag",t,this.element)},release:function(t){this.element&&this.$emit("release",t,this.element)}}},"setup",w?function(){return{v3:!!w}}:void 0),b(g,"render",(function(t){return _(this)})),g),T=function(t){return t?new Date(t.getTime()):null};function E(t){var e={};return $(t,e),e}function $(t,e){for(var n in t)if(t.hasOwnProperty(n)){var o=t[n];e[n]=k(o,e[n])}}function k(t,e){if(Array.isArray(t))return P(t);if(t instanceof Date)return T(t);if(t&&"object"==typeof t){var n=e||{};return $(t,n),n}return t}function P(t){return t.map((function(t){return k(t,void 0)}))}var j=function(){},C=/\[(?:(\d+)|['"](.*?)['"])\]|((?:(?!\[.*?\]|\.).)+)/g,I={};function M(t){if(I[t])return I[t];var e=[];return t.replace(C,(function(t,n,o,i){e.push(void 0!==n?n:o||i)})),I[t]=function(t){for(var n=t,o=0;o<e.length&&n;o++)n=n[e[o]];return n},I[t]}I.undefined=function(){};var x={};function S(t){if(x[t])return x[t];var e=[];return t.replace(C,(function(t,n,o,i){e.push(void 0!==n?n:o||i)})),x[t]=function(t,n){for(var o=t,i=e.length-1,r=0;r<i&&o;r++)o=o[e[r]]=o[e[r]]||{};o[e[i]]=n},x[t]}function D(t){return this.v3?Object.keys(this.$attrs).map((function(t){return t.toLowerCase()})).some((function(e){return e.endsWith(t.toLowerCase())})):this.$listeners[t]}function L(){if(this.v3){var t={};for(var e in this.$attrs)e.startsWith("on")&&(t[e]=this.$attrs[e]);return t}return this.$listeners}x.undefined=function(t){return t};var N=function(){return(N=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)},H=l.h;function K(t,e){if(t){var n=H?this.$slots[t]||(t.toLowerCase?this.$slots[t.toLowerCase()]:null):this.$scopedSlots[t]||(t.toLowerCase?this.$scopedSlots[t.toLowerCase()]:null);return"string"==typeof t&&n?{type:"slot",render:n,listeners:e}:"string"==typeof t||"object"==typeof t||"function"==typeof t&&t.component?{type:"component",render:t,listeners:e}:{type:"renderFunction",render:t,listeners:e}}}function R(t){var e,n,o,i=t.h,r=t.template,s=t.defaultRendering,u=t.defaultSlots,l=t.additionalProps,a=t.additionalListeners,c=t.swapDefaultSlots;if(!r)return s;if(H){var p=s?s.props:{};e=N(N({},U(a)),r.listeners),n=N(N(N({},p),l),e),o=N(N({},n),e)}else{var d=s&&s.componentOptions,h=d?s.componentOptions.listeners:{},f=d?s.componentOptions.propsData:{};e=N(N(N(N({},h),a),U(a)),r.listeners),o={props:n=N(N(N({},f),l),e),on:e}}if("slot"===r.type){var m=r.render({props:n,listeners:e,methods:e,defaultSlots:u});return m?m[0]:void 0}return"renderFunction"===r.type?c?r.render(i,s,u,n,e):r.render(i,s,n,e,u):i(r.render,o,H?function(){return[u]}:[u])}function U(t){if(!t)return t;for(var e={},n=Object.keys(t),o=0;o<n.length;o++){var i=n[o];e["on"+i.charAt(0).toUpperCase()+i.slice(1)]=t[i]}return e}var A=function(t,e,n){var o="string"==typeof t?parseInt(t,void 0):t;if(NaN!==o)return void 0!==o?o:e?n?void 0:-1:0};function X(t){return Boolean(s&&t&&"rtl"===getComputedStyle(t).direction)}function Y(t,e){if(!e&&s&&t){var n=window.getComputedStyle(t).direction;if(n)return n}return e}var F=n(1);function V(t){if(void 0!==F)F.validatePackage(t);else{var e="License activation failed for "+t.name+"\n";e+="The @progress/kendo-licensing script is not loaded.\n",e+="See "+t.licensingDocsUrl+" for more information.\n",console.warn(e)}}}])}));
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { DefineComponent } from './additionalTypes';
|
|
2
|
+
import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
|
|
3
|
+
declare type DefaultData<V> = object | ((this: V) => {});
|
|
4
|
+
declare type DefaultMethods<V> = {
|
|
5
|
+
[key: string]: (this: V, ...args: any[]) => any;
|
|
6
|
+
};
|
|
7
|
+
import { TooltipProps } from './TooltipProps';
|
|
8
|
+
/**
|
|
9
|
+
* @hidden
|
|
10
|
+
*/
|
|
11
|
+
interface TooltipData {
|
|
12
|
+
targetElement: HTMLElement | null;
|
|
13
|
+
open: boolean;
|
|
14
|
+
title: string;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* @hidden
|
|
18
|
+
*/
|
|
19
|
+
export interface TooltipComputed {
|
|
20
|
+
[key: string]: any;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* @hidden
|
|
24
|
+
*/
|
|
25
|
+
export interface TooltipMethods {
|
|
26
|
+
[key: string]: any;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* @hidden
|
|
30
|
+
*/
|
|
31
|
+
export interface TooltipState {
|
|
32
|
+
top: number;
|
|
33
|
+
left: number;
|
|
34
|
+
openTimeoutId?: any;
|
|
35
|
+
updateIntervalId?: any;
|
|
36
|
+
willOpen: boolean;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* @hidden
|
|
40
|
+
*/
|
|
41
|
+
export interface TooltipAll extends Vue, TooltipMethods, TooltipData, TooltipComputed, TooltipState {
|
|
42
|
+
}
|
|
43
|
+
declare let Tooltip: ComponentOptions<TooltipAll, DefaultData<TooltipData>, DefaultMethods<TooltipAll>, TooltipComputed, RecordPropsDefinition<TooltipProps>>;
|
|
44
|
+
declare const TooltipVue3: DefineComponent<TooltipProps, any, TooltipData, TooltipComputed, TooltipMethods, {}, {}, {}, string, TooltipProps, TooltipProps, {}>;
|
|
45
|
+
export { Tooltip, TooltipVue3 };
|
|
@@ -0,0 +1,404 @@
|
|
|
1
|
+
var __assign = this && this.__assign || function () {
|
|
2
|
+
__assign = Object.assign || function (t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
|
|
6
|
+
for (var p in s) {
|
|
7
|
+
if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
return t;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
return __assign.apply(this, arguments);
|
|
15
|
+
}; // @ts-ignore
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
import * as Vue from 'vue';
|
|
19
|
+
var allVue = Vue;
|
|
20
|
+
var gh = allVue.h;
|
|
21
|
+
import { classNames, validatePackage, getDefaultSlots, getListeners, templateRendering, getTemplate } from '@progress/kendo-vue-common';
|
|
22
|
+
import { getLeftPosition, getTopPosition, getDomRect, isTooltipElement } from './utils';
|
|
23
|
+
import { packageMetadata } from './package-metadata';
|
|
24
|
+
var DEFAULT_TOOLTIP_ZINDEX = 100; // tslint:enable:max-line-length
|
|
25
|
+
|
|
26
|
+
var Tooltip = {
|
|
27
|
+
name: 'KendoTooltip',
|
|
28
|
+
inheritAttrs: false,
|
|
29
|
+
props: {
|
|
30
|
+
anchorElement: {
|
|
31
|
+
type: String,
|
|
32
|
+
default: 'pointer',
|
|
33
|
+
validator: function validator(value) {
|
|
34
|
+
return ['pointer', 'target'].includes(value);
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
content: [String, Object, Function],
|
|
38
|
+
filter: Function,
|
|
39
|
+
openDelay: {
|
|
40
|
+
type: Number,
|
|
41
|
+
default: 400
|
|
42
|
+
},
|
|
43
|
+
open: {
|
|
44
|
+
type: Boolean,
|
|
45
|
+
default: undefined
|
|
46
|
+
},
|
|
47
|
+
position: {
|
|
48
|
+
type: String,
|
|
49
|
+
default: 'auto',
|
|
50
|
+
validator: function validator(value) {
|
|
51
|
+
return ['right', 'left', 'top', 'bottom', 'auto'].includes(value);
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
updateInterval: Number,
|
|
55
|
+
className: String,
|
|
56
|
+
wrapperStyle: Object,
|
|
57
|
+
tooltipClassName: String,
|
|
58
|
+
tooltipStyle: Object,
|
|
59
|
+
parentTitle: {
|
|
60
|
+
type: Boolean,
|
|
61
|
+
default: false
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
data: function data() {
|
|
65
|
+
return {
|
|
66
|
+
top: 0,
|
|
67
|
+
left: 0,
|
|
68
|
+
targetElement: null,
|
|
69
|
+
currentOpen: false,
|
|
70
|
+
title: ''
|
|
71
|
+
};
|
|
72
|
+
},
|
|
73
|
+
computed: {
|
|
74
|
+
wrapperClass: function wrapperClass() {
|
|
75
|
+
var _a;
|
|
76
|
+
|
|
77
|
+
return _a = {
|
|
78
|
+
'k-animation-container': true,
|
|
79
|
+
'k-animation-container-fixed': true,
|
|
80
|
+
'k-animation-container-shown': true
|
|
81
|
+
}, _a[this.$props.className] = true, _a;
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
created: function created() {
|
|
85
|
+
validatePackage(packageMetadata);
|
|
86
|
+
this.top = 0;
|
|
87
|
+
this.left = 0;
|
|
88
|
+
this.willOpen = false;
|
|
89
|
+
},
|
|
90
|
+
mounted: function mounted() {
|
|
91
|
+
if (document) {
|
|
92
|
+
document.body.addEventListener('mousemove', this.handleBodyMousemove);
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
destroyed: function destroyed() {
|
|
96
|
+
clearTimeout(this.openTimeoutId);
|
|
97
|
+
clearInterval(this.updateIntervalId);
|
|
98
|
+
|
|
99
|
+
if (document) {
|
|
100
|
+
document.body.removeEventListener('mousemove', this.handleBodyMousemove);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
if (this.element) {
|
|
104
|
+
this.element.remove();
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
updated: function updated() {
|
|
108
|
+
if (this.$props.targetElement) {
|
|
109
|
+
this.showToolTip({
|
|
110
|
+
target: this.$props.targetElement
|
|
111
|
+
});
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
this.element = this.v3 ? this.elementRef : this.$refs.element;
|
|
115
|
+
|
|
116
|
+
if (!this.element) {
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
var position;
|
|
121
|
+
|
|
122
|
+
if (this.$props.onPosition) {
|
|
123
|
+
position = this.$props.onPosition.call(undefined, {
|
|
124
|
+
element: this.element,
|
|
125
|
+
targetElement: this.state.targetElement,
|
|
126
|
+
mouseTop: this.top,
|
|
127
|
+
mouseLeft: this.left,
|
|
128
|
+
anchorElement: this.$props.anchorElement,
|
|
129
|
+
position: this.$props.position,
|
|
130
|
+
target: this
|
|
131
|
+
});
|
|
132
|
+
} else {
|
|
133
|
+
position = this.setPosition(this.element);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
this.element.style.left = position.left + 'px';
|
|
137
|
+
this.element.style.top = position.top + 'px';
|
|
138
|
+
|
|
139
|
+
if (this.targetElement) {
|
|
140
|
+
var appendToElement = this.$props.appendTo ? this.$props.appendTo : this.targetElement.ownerDocument.body;
|
|
141
|
+
|
|
142
|
+
if (this.element.parentElement !== appendToElement) {
|
|
143
|
+
this.targetElement.ownerDocument.body.append(this.element);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
this.callout = this.v3 ? this.calloutRef : this.$refs.callout;
|
|
148
|
+
|
|
149
|
+
if (!this.callout) {
|
|
150
|
+
return;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
this.callout.className = this.calloutClassName();
|
|
154
|
+
|
|
155
|
+
if (this.$props.position === 'auto') {
|
|
156
|
+
this.left < window.screen.availWidth / 2 ? this.callout.style.left = this.$props.setCalloutOnPositionAuto || '25%' : this.callout.style.left = this.$props.setCalloutOnPositionAuto || '75%';
|
|
157
|
+
}
|
|
158
|
+
},
|
|
159
|
+
// @ts-ignore
|
|
160
|
+
setup: !gh ? undefined : function () {
|
|
161
|
+
var v3 = !!gh;
|
|
162
|
+
return {
|
|
163
|
+
v3: v3
|
|
164
|
+
};
|
|
165
|
+
},
|
|
166
|
+
// @ts-ignore
|
|
167
|
+
render: function render(createElement) {
|
|
168
|
+
var _this = this;
|
|
169
|
+
|
|
170
|
+
var h = gh || createElement;
|
|
171
|
+
var defaultSlot = getDefaultSlots(this);
|
|
172
|
+
|
|
173
|
+
if (this.$props.open === false) {
|
|
174
|
+
return null;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
var currentZIndex = this.getCurrentZIndex();
|
|
178
|
+
var content = this.$props.content ? templateRendering.call(this, this.$props.content, getListeners.call(this)) : undefined;
|
|
179
|
+
var contentDefaultRendering = this.title;
|
|
180
|
+
var contentRendering = getTemplate.call(this, {
|
|
181
|
+
h: h,
|
|
182
|
+
template: content,
|
|
183
|
+
defaultRendering: contentDefaultRendering,
|
|
184
|
+
additionalProps: {
|
|
185
|
+
title: this.title,
|
|
186
|
+
target: this.targetElement
|
|
187
|
+
}
|
|
188
|
+
});
|
|
189
|
+
var innerToolTip = h("div", {
|
|
190
|
+
"class": classNames('k-tooltip', this.$props.tooltipClassName),
|
|
191
|
+
style: __assign({
|
|
192
|
+
position: 'relative'
|
|
193
|
+
}, this.$props.tooltipStyle)
|
|
194
|
+
}, [h("div", {
|
|
195
|
+
"class": "k-tooltip-content"
|
|
196
|
+
}, [contentRendering]), this.$props.showCallout && h("div", {
|
|
197
|
+
ref: this.v3 ? function (el) {
|
|
198
|
+
_this.calloutRef = el;
|
|
199
|
+
} : 'callout'
|
|
200
|
+
})]);
|
|
201
|
+
var tooltip = this.targetElement && this.title && this.targetElement.ownerDocument && h("div", {
|
|
202
|
+
ref: this.v3 ? function (el) {
|
|
203
|
+
_this.elementRef = el;
|
|
204
|
+
} : 'element',
|
|
205
|
+
"class": this.wrapperClass,
|
|
206
|
+
style: __assign({
|
|
207
|
+
zIndex: currentZIndex
|
|
208
|
+
}, this.$props.wrapperStyle),
|
|
209
|
+
tabIndex: 0,
|
|
210
|
+
attrs: this.v3 ? undefined : {
|
|
211
|
+
tabIndex: 0
|
|
212
|
+
}
|
|
213
|
+
}, [innerToolTip]);
|
|
214
|
+
|
|
215
|
+
if (defaultSlot) {
|
|
216
|
+
return h("div", {
|
|
217
|
+
onMouseover: this.handleMouseOver,
|
|
218
|
+
on: this.v3 ? undefined : {
|
|
219
|
+
"mouseover": this.handleMouseOver,
|
|
220
|
+
"mouseout": this.handleMouseOut
|
|
221
|
+
},
|
|
222
|
+
onMouseout: this.handleMouseOut
|
|
223
|
+
}, [tooltip, defaultSlot]);
|
|
224
|
+
} else {
|
|
225
|
+
return {
|
|
226
|
+
tooltip: tooltip
|
|
227
|
+
};
|
|
228
|
+
}
|
|
229
|
+
},
|
|
230
|
+
methods: {
|
|
231
|
+
handleMouseOut: function handleMouseOut(event) {
|
|
232
|
+
var currentDocument = this.targetElement ? this.targetElement.ownerDocument : document;
|
|
233
|
+
var element = currentDocument && currentDocument.elementFromPoint(event.clientX, event.clientY);
|
|
234
|
+
|
|
235
|
+
if (isTooltipElement(element)) {
|
|
236
|
+
return;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
if (this.$props.open) {
|
|
240
|
+
return;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
clearInterval(this.updateIntervalId);
|
|
244
|
+
this.willOpen = false;
|
|
245
|
+
this.onClose(event);
|
|
246
|
+
},
|
|
247
|
+
handleMouseOver: function handleMouseOver(event) {
|
|
248
|
+
var target = event.target;
|
|
249
|
+
|
|
250
|
+
if (!this.isVisible(target) || isTooltipElement(target) || target === this.targetElement) {
|
|
251
|
+
return;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
this.showToolTip(event);
|
|
255
|
+
},
|
|
256
|
+
handleBodyMousemove: function handleBodyMousemove(event) {
|
|
257
|
+
this.top = event.clientY;
|
|
258
|
+
this.left = event.clientX;
|
|
259
|
+
},
|
|
260
|
+
onClose: function onClose(event) {
|
|
261
|
+
this.$emit('close', {
|
|
262
|
+
event: event,
|
|
263
|
+
component: this
|
|
264
|
+
});
|
|
265
|
+
this.targetElement = null;
|
|
266
|
+
this.currentOpen = false;
|
|
267
|
+
this.title = '';
|
|
268
|
+
},
|
|
269
|
+
showToolTip: function showToolTip(event) {
|
|
270
|
+
var _this = this;
|
|
271
|
+
|
|
272
|
+
clearTimeout(this.openTimeoutId);
|
|
273
|
+
clearInterval(this.updateIntervalId);
|
|
274
|
+
|
|
275
|
+
if (event.target.hasChildNodes()) {
|
|
276
|
+
event.target.childNodes.forEach(function (childElement) {
|
|
277
|
+
if (childElement.nodeName === 'title') {
|
|
278
|
+
event.target.titleExpando = childElement.innerHTML;
|
|
279
|
+
childElement.remove();
|
|
280
|
+
}
|
|
281
|
+
});
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
var target = this.$props.targetElement || event.target;
|
|
285
|
+
var titleResult = this.getTitle(target);
|
|
286
|
+
|
|
287
|
+
if (!titleResult.title) {
|
|
288
|
+
if (this.currentOpen) {
|
|
289
|
+
this.onClose(event);
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
return;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
if (titleResult.element) {
|
|
296
|
+
titleResult.element.titleExpando = titleResult.title;
|
|
297
|
+
titleResult.element.title = '';
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
this.willOpen = true;
|
|
301
|
+
|
|
302
|
+
if (!this.$props.openDelay) {
|
|
303
|
+
this.targetElement = target;
|
|
304
|
+
this.currentOpen = true;
|
|
305
|
+
this.title = titleResult.title;
|
|
306
|
+
this.setUpdateInterval();
|
|
307
|
+
} else {
|
|
308
|
+
this.openTimeoutId = window.setTimeout(function () {
|
|
309
|
+
if (_this.willOpen) {
|
|
310
|
+
_this.targetElement = target;
|
|
311
|
+
_this.currentOpen = true;
|
|
312
|
+
_this.title = titleResult.title;
|
|
313
|
+
|
|
314
|
+
_this.setUpdateInterval();
|
|
315
|
+
}
|
|
316
|
+
}, this.$props.openDelay);
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
if (this.title !== titleResult.title) {
|
|
320
|
+
this.$emit('open', {
|
|
321
|
+
event: event,
|
|
322
|
+
compoponent: this
|
|
323
|
+
});
|
|
324
|
+
}
|
|
325
|
+
},
|
|
326
|
+
setUpdateInterval: function setUpdateInterval() {
|
|
327
|
+
if (this.$props.updateInterval) {
|
|
328
|
+
this.updateIntervalId = setInterval(this.onIntervalUpdate, this.$props.updateInterval);
|
|
329
|
+
}
|
|
330
|
+
},
|
|
331
|
+
onIntervalUpdate: function onIntervalUpdate() {
|
|
332
|
+
var target = this.targetElement;
|
|
333
|
+
|
|
334
|
+
if (!target) {
|
|
335
|
+
return;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
if (target.parentElement === null) {
|
|
339
|
+
// Getting element from previous target coordinates will cause reflow which is performance hit.
|
|
340
|
+
// Also remount case can be avoided easily
|
|
341
|
+
this.onClose({
|
|
342
|
+
target: target
|
|
343
|
+
});
|
|
344
|
+
} else {
|
|
345
|
+
this.showToolTip({
|
|
346
|
+
target: target
|
|
347
|
+
});
|
|
348
|
+
}
|
|
349
|
+
},
|
|
350
|
+
isVisible: function isVisible(element) {
|
|
351
|
+
return !this.$props.filter || this.$props.filter(element);
|
|
352
|
+
},
|
|
353
|
+
setPosition: function setPosition(element) {
|
|
354
|
+
var domRect = getDomRect(this.targetElement);
|
|
355
|
+
var left = getLeftPosition(this.left, element.offsetWidth, domRect, this.$props.anchorElement, this.$props.position);
|
|
356
|
+
var top = getTopPosition(this.top, domRect, element.offsetHeight, this.$props.anchorElement, this.$props.position);
|
|
357
|
+
return {
|
|
358
|
+
left: left,
|
|
359
|
+
top: top
|
|
360
|
+
};
|
|
361
|
+
},
|
|
362
|
+
getTitle: function getTitle(element) {
|
|
363
|
+
while (element) {
|
|
364
|
+
if (element.getAttribute('title') !== null || element.titleExpando) {
|
|
365
|
+
var title = element.getAttribute('title') || element.titleExpando;
|
|
366
|
+
return {
|
|
367
|
+
title: title,
|
|
368
|
+
element: element
|
|
369
|
+
};
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
element = this.$props.parentTitle && element.parentElement || null;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
return {
|
|
376
|
+
title: '',
|
|
377
|
+
element: element
|
|
378
|
+
};
|
|
379
|
+
},
|
|
380
|
+
calloutClassName: function calloutClassName() {
|
|
381
|
+
switch (this.$props.position) {
|
|
382
|
+
case 'bottom':
|
|
383
|
+
return 'k-callout k-callout-n';
|
|
384
|
+
|
|
385
|
+
case 'left':
|
|
386
|
+
return 'k-callout k-callout-e';
|
|
387
|
+
|
|
388
|
+
case 'right':
|
|
389
|
+
return 'k-callout k-callout-w';
|
|
390
|
+
|
|
391
|
+
case 'top':
|
|
392
|
+
return 'k-callout k-callout-s';
|
|
393
|
+
|
|
394
|
+
default:
|
|
395
|
+
return this.top < window.innerHeight / 2 ? 'k-callout k-callout-n' : 'k-callout k-callout-s';
|
|
396
|
+
}
|
|
397
|
+
},
|
|
398
|
+
getCurrentZIndex: function getCurrentZIndex() {
|
|
399
|
+
return this.context ? this.context : DEFAULT_TOOLTIP_ZINDEX;
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
};
|
|
403
|
+
var TooltipVue3 = Tooltip;
|
|
404
|
+
export { Tooltip, TooltipVue3 };
|