@progress/kendo-vue-tooltip 2.7.1-dev.202112201049

package/dist/npm/Tooltip.js

@@ -0,0 +1,416 @@
+"use strict";
+
+var __assign = undefined && undefined.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipVue3 = exports.Tooltip = void 0; // @ts-ignore
+
+var Vue = require("vue");
+
+var allVue = Vue;
+var gh = allVue.h;
+
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+
+var utils_1 = require("./utils");
+
+var package_metadata_1 = require("./package-metadata");
+
+var DEFAULT_TOOLTIP_ZINDEX = 100; // tslint:enable:max-line-length
+
+var Tooltip = {
+  name: 'KendoTooltip',
+  inheritAttrs: false,
+  props: {
+    anchorElement: {
+      type: String,
+      default: 'pointer',
+      validator: function validator(value) {
+        return ['pointer', 'target'].includes(value);
+      }
+    },
+    content: [String, Object, Function],
+    filter: Function,
+    openDelay: {
+      type: Number,
+      default: 400
+    },
+    open: {
+      type: Boolean,
+      default: undefined
+    },
+    position: {
+      type: String,
+      default: 'auto',
+      validator: function validator(value) {
+        return ['right', 'left', 'top', 'bottom', 'auto'].includes(value);
+      }
+    },
+    updateInterval: Number,
+    className: String,
+    wrapperStyle: Object,
+    tooltipClassName: String,
+    tooltipStyle: Object,
+    parentTitle: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: function data() {
+    return {
+      top: 0,
+      left: 0,
+      targetElement: null,
+      currentOpen: false,
+      title: ''
+    };
+  },
+  computed: {
+    wrapperClass: function wrapperClass() {
+      var _a;
+
+      return _a = {
+        'k-animation-container': true,
+        'k-animation-container-fixed': true,
+        'k-animation-container-shown': true
+      }, _a[this.$props.className] = true, _a;
+    }
+  },
+  created: function created() {
+    kendo_vue_common_1.validatePackage(package_metadata_1.packageMetadata);
+    this.top = 0;
+    this.left = 0;
+    this.willOpen = false;
+  },
+  mounted: function mounted() {
+    if (document) {
+      document.body.addEventListener('mousemove', this.handleBodyMousemove);
+    }
+  },
+  destroyed: function destroyed() {
+    clearTimeout(this.openTimeoutId);
+    clearInterval(this.updateIntervalId);
+
+    if (document) {
+      document.body.removeEventListener('mousemove', this.handleBodyMousemove);
+    }
+
+    if (this.element) {
+      this.element.remove();
+    }
+  },
+  updated: function updated() {
+    if (this.$props.targetElement) {
+      this.showToolTip({
+        target: this.$props.targetElement
+      });
+    }
+
+    this.element = this.v3 ? this.elementRef : this.$refs.element;
+
+    if (!this.element) {
+      return;
+    }
+
+    var position;
+
+    if (this.$props.onPosition) {
+      position = this.$props.onPosition.call(undefined, {
+        element: this.element,
+        targetElement: this.state.targetElement,
+        mouseTop: this.top,
+        mouseLeft: this.left,
+        anchorElement: this.$props.anchorElement,
+        position: this.$props.position,
+        target: this
+      });
+    } else {
+      position = this.setPosition(this.element);
+    }
+
+    this.element.style.left = position.left + 'px';
+    this.element.style.top = position.top + 'px';
+
+    if (this.targetElement) {
+      var appendToElement = this.$props.appendTo ? this.$props.appendTo : this.targetElement.ownerDocument.body;
+
+      if (this.element.parentElement !== appendToElement) {
+        this.targetElement.ownerDocument.body.append(this.element);
+      }
+    }
+
+    this.callout = this.v3 ? this.calloutRef : this.$refs.callout;
+
+    if (!this.callout) {
+      return;
+    }
+
+    this.callout.className = this.calloutClassName();
+
+    if (this.$props.position === 'auto') {
+      this.left < window.screen.availWidth / 2 ? this.callout.style.left = this.$props.setCalloutOnPositionAuto || '25%' : this.callout.style.left = this.$props.setCalloutOnPositionAuto || '75%';
+    }
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    var defaultSlot = kendo_vue_common_1.getDefaultSlots(this);
+
+    if (this.$props.open === false) {
+      return null;
+    }
+
+    var currentZIndex = this.getCurrentZIndex();
+    var content = this.$props.content ? kendo_vue_common_1.templateRendering.call(this, this.$props.content, kendo_vue_common_1.getListeners.call(this)) : undefined;
+    var contentDefaultRendering = this.title;
+    var contentRendering = kendo_vue_common_1.getTemplate.call(this, {
+      h: h,
+      template: content,
+      defaultRendering: contentDefaultRendering,
+      additionalProps: {
+        title: this.title,
+        target: this.targetElement
+      }
+    });
+    var innerToolTip = h("div", {
+      "class": kendo_vue_common_1.classNames('k-tooltip', this.$props.tooltipClassName),
+      style: __assign({
+        position: 'relative'
+      }, this.$props.tooltipStyle)
+    }, [h("div", {
+      "class": "k-tooltip-content"
+    }, [contentRendering]), this.$props.showCallout && h("div", {
+      ref: this.v3 ? function (el) {
+        _this.calloutRef = el;
+      } : 'callout'
+    })]);
+    var tooltip = this.targetElement && this.title && this.targetElement.ownerDocument && h("div", {
+      ref: this.v3 ? function (el) {
+        _this.elementRef = el;
+      } : 'element',
+      "class": this.wrapperClass,
+      style: __assign({
+        zIndex: currentZIndex
+      }, this.$props.wrapperStyle),
+      tabIndex: 0,
+      attrs: this.v3 ? undefined : {
+        tabIndex: 0
+      }
+    }, [innerToolTip]);
+
+    if (defaultSlot) {
+      return h("div", {
+        onMouseover: this.handleMouseOver,
+        on: this.v3 ? undefined : {
+          "mouseover": this.handleMouseOver,
+          "mouseout": this.handleMouseOut
+        },
+        onMouseout: this.handleMouseOut
+      }, [tooltip, defaultSlot]);
+    } else {
+      return {
+        tooltip: tooltip
+      };
+    }
+  },
+  methods: {
+    handleMouseOut: function handleMouseOut(event) {
+      var currentDocument = this.targetElement ? this.targetElement.ownerDocument : document;
+      var element = currentDocument && currentDocument.elementFromPoint(event.clientX, event.clientY);
+
+      if (utils_1.isTooltipElement(element)) {
+        return;
+      }
+
+      if (this.$props.open) {
+        return;
+      }
+
+      clearInterval(this.updateIntervalId);
+      this.willOpen = false;
+      this.onClose(event);
+    },
+    handleMouseOver: function handleMouseOver(event) {
+      var target = event.target;
+
+      if (!this.isVisible(target) || utils_1.isTooltipElement(target) || target === this.targetElement) {
+        return;
+      }
+
+      this.showToolTip(event);
+    },
+    handleBodyMousemove: function handleBodyMousemove(event) {
+      this.top = event.clientY;
+      this.left = event.clientX;
+    },
+    onClose: function onClose(event) {
+      this.$emit('close', {
+        event: event,
+        component: this
+      });
+      this.targetElement = null;
+      this.currentOpen = false;
+      this.title = '';
+    },
+    showToolTip: function showToolTip(event) {
+      var _this = this;
+
+      clearTimeout(this.openTimeoutId);
+      clearInterval(this.updateIntervalId);
+
+      if (event.target.hasChildNodes()) {
+        event.target.childNodes.forEach(function (childElement) {
+          if (childElement.nodeName === 'title') {
+            event.target.titleExpando = childElement.innerHTML;
+            childElement.remove();
+          }
+        });
+      }
+
+      var target = this.$props.targetElement || event.target;
+      var titleResult = this.getTitle(target);
+
+      if (!titleResult.title) {
+        if (this.currentOpen) {
+          this.onClose(event);
+        }
+
+        return;
+      }
+
+      if (titleResult.element) {
+        titleResult.element.titleExpando = titleResult.title;
+        titleResult.element.title = '';
+      }
+
+      this.willOpen = true;
+
+      if (!this.$props.openDelay) {
+        this.targetElement = target;
+        this.currentOpen = true;
+        this.title = titleResult.title;
+        this.setUpdateInterval();
+      } else {
+        this.openTimeoutId = window.setTimeout(function () {
+          if (_this.willOpen) {
+            _this.targetElement = target;
+            _this.currentOpen = true;
+            _this.title = titleResult.title;
+
+            _this.setUpdateInterval();
+          }
+        }, this.$props.openDelay);
+      }
+
+      if (this.title !== titleResult.title) {
+        this.$emit('open', {
+          event: event,
+          compoponent: this
+        });
+      }
+    },
+    setUpdateInterval: function setUpdateInterval() {
+      if (this.$props.updateInterval) {
+        this.updateIntervalId = setInterval(this.onIntervalUpdate, this.$props.updateInterval);
+      }
+    },
+    onIntervalUpdate: function onIntervalUpdate() {
+      var target = this.targetElement;
+
+      if (!target) {
+        return;
+      }
+
+      if (target.parentElement === null) {
+        // Getting element from previous target coordinates will cause reflow which is performance hit.
+        // Also remount case can be avoided easily
+        this.onClose({
+          target: target
+        });
+      } else {
+        this.showToolTip({
+          target: target
+        });
+      }
+    },
+    isVisible: function isVisible(element) {
+      return !this.$props.filter || this.$props.filter(element);
+    },
+    setPosition: function setPosition(element) {
+      var domRect = utils_1.getDomRect(this.targetElement);
+      var left = utils_1.getLeftPosition(this.left, element.offsetWidth, domRect, this.$props.anchorElement, this.$props.position);
+      var top = utils_1.getTopPosition(this.top, domRect, element.offsetHeight, this.$props.anchorElement, this.$props.position);
+      return {
+        left: left,
+        top: top
+      };
+    },
+    getTitle: function getTitle(element) {
+      while (element) {
+        if (element.getAttribute('title') !== null || element.titleExpando) {
+          var title = element.getAttribute('title') || element.titleExpando;
+          return {
+            title: title,
+            element: element
+          };
+        }
+
+        element = this.$props.parentTitle && element.parentElement || null;
+      }
+
+      return {
+        title: '',
+        element: element
+      };
+    },
+    calloutClassName: function 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 this.top < window.innerHeight / 2 ? 'k-callout k-callout-n' : 'k-callout k-callout-s';
+      }
+    },
+    getCurrentZIndex: function getCurrentZIndex() {
+      return this.context ? this.context : DEFAULT_TOOLTIP_ZINDEX;
+    }
+  }
+};
+exports.Tooltip = Tooltip;
+var TooltipVue3 = Tooltip;
+exports.TooltipVue3 = TooltipVue3;

package/dist/npm/TooltipProps.d.ts

@@ -0,0 +1,100 @@
+import { TooltipEvent, TooltipPositionEvent } from './events';
+import { TooltipPosition } from './utils';
+/**
+ * Represents the props of the [Kendo UI for Vue Tooltip component]({% slug overview_tooltip %}).
+ */
+export interface TooltipProps {
+    /**
+     * Sets the anchor element of the Tooltip.
+     *
+     * The available options are:
+     * - (Default) `pointer`—Shows a Tooltip where the cursor is located.
+     * - `target`—Positions the Tooltip based on the anchor element.
+     */
+    anchorElement?: string;
+    /**
+     * Defines the container to which the Tooltip will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
+     */
+    appendTo?: HTMLElement | null;
+    /**
+     * Sets the position of the Tooltip ([see example]({% slug positioning_tooltip %})).
+     *
+     * The available options are:
+     * - (Default) `auto`—Positions the Tooltip depending on the available space.
+     * - `right`—Positions the Tooltip to the right side of the element.
+     * - `left`—Positions the Tooltip to the left side of the element.
+     * - `bottom`—Positions the Tooltip at the bottom of the element.
+     * - `top`—Positions the Tooltip at the top of the element.
+     */
+    position?: TooltipPosition | String;
+    /**
+     * Sets a class of the Tooltip animation container.
+     */
+    className?: string;
+    /**
+     * Sets a class of the Tooltip animation container.
+     */
+    wrapperStyle?: object;
+    /**
+     * Sets the content of the Tooltip ([see example]({% slug templates_tooltip %})).
+     */
+    content?: any;
+    /**
+     * Specifies if the Tooltip will be open.
+     * Sets the Tooltip in its controlled mode ([see example]({% slug controlledmode_tooltip %})).
+     * Requires you to set the `targetElement` property.
+     */
+    open?: boolean;
+    /**
+     * Sets a delay in milliseconds.
+     */
+    openDelay?: number;
+    /**
+     * If any of the parent elements has a title, displays a Tooltip.
+     */
+    parentTitle?: boolean;
+    /**
+     * Specifies if the Tooltip callout will be displayed.
+     */
+    showCallout?: boolean;
+    /**
+     * When the position is set to `auto`, sets the start point of the Tooltip callout (in pixels).
+     */
+    setCalloutOnPositionAuto?: any;
+    /**
+     * Sets the Tooltip target element. You have to use it with the `open` property.
+     */
+    targetElement?: any;
+    /**
+     * Specifies the CSS class names which are set to the Tooltip DOM element.
+     */
+    tooltipClassName?: string;
+    /**
+     * Specifies the styles which are set to the Tooltip DOM element.
+     */
+    tooltipStyle?: any;
+    /**
+     * Fires when the Tooltip is shown.
+     */
+    onOpen?: (event: TooltipEvent) => void;
+    /**
+     * Fires when the Tooltip is hidden.
+     */
+    onClose?: (event: TooltipEvent) => void;
+    /**
+     * Callback called when the Tooltip calculates it's position. Useful to modify the default position behavior.
+     * Require to return the `top` and `left` position of the Tooltip.
+     */
+    onPosition?: (event: TooltipPositionEvent) => {
+        top: number;
+        left: number;
+    };
+    /**
+     * Represents a callback function which determines if a Tooltip will be displayed ([see example]({% slug filter_elements_tooltip %})).
+     */
+    filter?: (target: HTMLElement) => void;
+    /**
+     * The milliseconds interval on which the Tooltip will check for title change. By default the Tooltip does not track for title updates.
+     */
+    updateInterval?: number;
+}

package/dist/npm/TooltipProps.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// tslint:enable:max-line-length

package/dist/npm/additionalTypes.ts

@@ -0,0 +1,3 @@
+// @ts-ignore
+import { DefineComponent } from 'vue';
+export { DefineComponent };

package/dist/npm/events.d.ts

@@ -0,0 +1,29 @@
+import { TooltipPosition } from './utils';
+export interface TooltipEvent {
+}
+export interface TooltipPositionEvent {
+    /**
+     * The Tooltip element. Useful to get the actual `width` and `height` of rendered Tooltip.
+     */
+    element: HTMLDivElement;
+    /**
+     * The current target element. Useful to calculate `top` and `left` position of the Tooltip element.
+     */
+    targetElement: HTMLElement | null;
+    /**
+     * The current mouse `top` position;
+     */
+    mouseTop: number;
+    /**
+     * The current mouse `left` position.
+     */
+    mouseLeft: number;
+    /**
+     * The Tooltip anchor element prop.
+     */
+    anchorElement?: string;
+    /**
+     * The Tooltip position prop.
+     */
+    position?: TooltipPosition;
+}

package/dist/npm/events.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/main.d.ts

@@ -0,0 +1,5 @@
+import { Tooltip } from './Tooltip';
+import { TooltipProps } from './TooltipProps';
+import { TooltipEvent, TooltipPositionEvent } from './events';
+import { TooltipPosition } from './utils';
+export { Tooltip, TooltipEvent, TooltipPositionEvent, TooltipProps, TooltipPosition };

package/dist/npm/main.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+var Tooltip_1 = require("./Tooltip");
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });

package/dist/npm/package-metadata.d.ts

@@ -0,0 +1,5 @@
+import { PackageMetadata } from '@progress/kendo-licensing';
+/**
+ * @hidden
+ */
+export declare const packageMetadata: PackageMetadata;

package/dist/npm/package-metadata.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.packageMetadata = void 0;
+/**
+ * @hidden
+ */
+exports.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'
+};

package/dist/npm/utils.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @hidden
+ */
+export declare type TooltipPosition = 'right' | 'left' | 'bottom' | 'top' | 'auto';
+/**
+ * @hidden
+ */
+export declare const getLeftPosition: (left: any, elementWidth: any, targetElement: any, anchorElement: any, position: any) => any;
+/**
+ * @hidden
+ */
+export declare const getTopPosition: (top: any, targetElement: any, elementHeight: any, anchorElement: any, position: any) => any;
+/**
+ * @hidden
+ */
+export declare const getDomRect: (currentTarget: any) => any;
+/**
+ * @hidden
+ */
+export declare const toolTipSelectors: string[];
+/**
+ * @hidden
+ */
+export declare const isTooltipElement: (element: any) => boolean;