@progress/kendo-vue-tooltip 5.3.0-dev.202410141143 → 5.3.0-develop.2

package/dist/esm/utils.js

@@ -1,76 +0,0 @@
-import { canUseDOM } from '@progress/kendo-vue-common';
-var arrowWidth = 10;
-var arrowHeight = 10;
-/**
- * @hidden
- */
-export var getLeftPosition = function getLeftPosition(left, elementWidth, targetElement, anchorElement, position) {
-  switch (position) {
-    case 'bottom':
-      return anchorElement === 'pointer' ? left - elementWidth / 2 : targetElement.left - elementWidth / 2 + targetElement.width / 2;
-    case 'left':
-      return anchorElement === 'pointer' ? left - elementWidth - arrowWidth : targetElement.left - elementWidth - arrowWidth;
-    case 'right':
-      return anchorElement === 'pointer' ? left + arrowWidth : targetElement.right + arrowWidth;
-    case 'top':
-      return anchorElement === 'pointer' ? left - elementWidth / 2 : targetElement.left - elementWidth / 2 + targetElement.width / 2;
-    default:
-      if (anchorElement === 'pointer') {
-        return canUseDOM && left < window.screen.availWidth / 2 ? left - arrowWidth : left - elementWidth + arrowWidth;
-      } else {
-        return canUseDOM && left < window.screen.availWidth / 2 ? targetElement.left : targetElement.right - elementWidth;
-      }
-  }
-};
-/**
- * @hidden
- */
-export var getTopPosition = function getTopPosition(top, targetElement, elementHeight, anchorElement, position) {
-  switch (position) {
-    case 'bottom':
-      return anchorElement === 'pointer' ? top + arrowHeight : targetElement.bottom + arrowHeight;
-    case 'left':
-      return anchorElement === 'pointer' ? top - elementHeight / 2 : targetElement.top - elementHeight / 2 + targetElement.height / 2;
-    case 'right':
-      return anchorElement === 'pointer' ? top - elementHeight / 2 : targetElement.top - elementHeight / 2 + targetElement.height / 2;
-    case 'top':
-      return anchorElement === 'pointer' ? top - elementHeight - arrowHeight : targetElement.top - elementHeight - arrowHeight;
-    default:
-      if (anchorElement === 'pointer') {
-        return canUseDOM && top < window.innerHeight / 2 ? top + arrowWidth : top - elementHeight - arrowWidth;
-      } else {
-        return canUseDOM && top < window.innerHeight / 2 ? targetElement.bottom + arrowHeight : targetElement.top - elementHeight - arrowHeight;
-      }
-  }
-};
-/**
- * @hidden
- */
-export var getDomRect = function getDomRect(currentTarget) {
-  if (currentTarget !== null) {
-    return currentTarget.getBoundingClientRect();
-  }
-  return document.body.getBoundingClientRect();
-};
-/**
- * @hidden
- */
-export var toolTipSelectors = ['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'];
-/**
- * @hidden
- */
-export var isTooltipElement = function isTooltipElement(element) {
-  if (element === null) {
-    return false;
-  }
-  var node = element;
-  while (node) {
-    if (node !== null && node.classList && node.classList.contains('k-tooltip')) {
-      return true;
-    }
-    node.parentNode !== null ? node = node.parentNode : node = false;
-  }
-  return toolTipSelectors.filter(function (t) {
-    return t === element.className;
-  }).length > 0;
-};

package/dist/npm/Tooltip.d.ts

@@ -1,52 +0,0 @@
-import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from './additionalTypes';
-declare type DefaultData<V> = object | ((this: V) => {});
-declare type DefaultMethods<V> = {
-    [key: string]: (this: V, ...args: any[]) => any;
-};
-import { TooltipProps } from './TooltipProps';
-/**
- * @hidden
- */
-interface TooltipData {
-    targetElement: HTMLElement | null;
-    open: boolean;
-    title: string;
-}
-/**
- * @hidden
- */
-export interface TooltipComputed {
-    [key: string]: any;
-    computedTarget: any;
-    computedOpen: any;
-}
-/**
- * @hidden
- */
-export interface TooltipMethods {
-    [key: string]: any;
-}
-/**
- * @hidden
- */
-export interface TooltipState {
-    top: number;
-    left: number;
-    openTimeoutId?: any;
-    updateIntervalId?: any;
-    willOpen: boolean;
-}
-/**
- * @hidden
- */
-export interface TooltipAll extends Vue2type, TooltipMethods, TooltipData, TooltipComputed, TooltipState {
-}
-/**
- * @hidden
- */
-declare let TooltipVue2: ComponentOptions<TooltipAll, DefaultData<TooltipData>, DefaultMethods<TooltipAll>, TooltipComputed, RecordPropsDefinition<TooltipProps>>;
-/**
- * @hidden
- */
-declare const Tooltip: DefineComponent<TooltipProps, any, TooltipData, TooltipComputed, TooltipMethods, {}, {}, {}, string, TooltipProps, TooltipProps, {}>;
-export { Tooltip, TooltipVue2 };

package/dist/npm/Tooltip.js

@@ -1,427 +0,0 @@
-"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.TooltipVue2 = exports.Tooltip = void 0;
-// @ts-ignore
-var Vue = require("vue");
-var allVue = Vue;
-var gh = allVue.h;
-var isV3 = allVue.version && allVue.version[0] === '3';
-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;
-var ARIAIDSUFFIX = '_tb_active';
-/**
- * @hidden
- */
-var TooltipVue2 = {
-  name: 'KendoTooltip',
-  inheritAttrs: false,
-  props: {
-    showCallout: {
-      type: Boolean,
-      default: true
-    },
-    setCalloutOnPositionAuto: {
-      type: String,
-      default: undefined
-    },
-    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);
-      }
-    },
-    updatePosition: {
-      type: Function,
-      default: undefined
-    },
-    updateInterval: Number,
-    className: String,
-    wrapperStyle: Object,
-    tooltipClassName: String,
-    tooltipStyle: Object,
-    targetElement: {
-      type: undefined
-    },
-    parentTitle: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data: function data() {
-    return {
-      top: 0,
-      left: 0,
-      currentTargetElement: 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;
-    },
-    computedTarget: function computedTarget() {
-      return this.targetElement !== undefined ? this.targetElement : this.currentTargetElement;
-    },
-    computedOpen: function computedOpen() {
-      return this.open !== undefined ? this.open : this.currentOpen;
-    }
-  },
-  inject: {
-    kCurrentZIndex: {
-      default: null
-    }
-  },
-  created: function created() {
-    (0, kendo_vue_common_1.validatePackage)(package_metadata_1.packageMetadata);
-    this.top = 0;
-    this.left = 0;
-    this.willOpen = false;
-  },
-  mounted: function mounted() {
-    this.element = (0, kendo_vue_common_1.getRef)(this, 'element');
-    if (document) {
-      document.body.addEventListener('mousemove', this.handleBodyMousemove);
-    }
-  },
-  destroyed: !!isV3 ? undefined : function () {
-    this.destroyElement();
-  },
-  // @ts-ignore
-  unmounted: function unmounted() {
-    this.destroyElement();
-  },
-  updated: function updated() {
-    if (this.$props.open && this.$props.targetElement) {
-      this.showToolTip({
-        target: this.$props.targetElement
-      });
-    }
-    this.element = (0, kendo_vue_common_1.getRef)(this, 'element');
-    if (!this.element) {
-      return;
-    }
-    this.resetPosition();
-    if (this.computedTarget) {
-      var appendToElement = this.$props.appendTo ? this.$props.appendTo : this.computedTarget.ownerDocument.body;
-      if (this.element.parentElement !== appendToElement) {
-        this.computedTarget.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' && kendo_vue_common_1.canUseDOM) {
-      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: !isV3 ? undefined : function () {
-    var v3 = !!isV3;
-    return {
-      v3: v3
-    };
-  },
-  // @ts-ignore
-  render: function render(createElement) {
-    var h = gh || createElement;
-    var defaultSlot = (0, kendo_vue_common_1.getDefaultSlots)(this);
-    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 ariaId = (0, kendo_vue_common_1.guid)() + ARIAIDSUFFIX;
-    if (this.computedTarget) {
-      if (this.computedTarget.hasAttribute('id')) {
-        ariaId = this.computedTarget.getAttribute('id') + ARIAIDSUFFIX;
-      }
-      this.computedTarget.setAttribute('aria-describedby', ariaId);
-    }
-    var contentRendering = kendo_vue_common_1.getTemplate.call(this, {
-      h: h,
-      template: content,
-      defaultRendering: contentDefaultRendering,
-      additionalProps: {
-        title: this.title,
-        target: this.computedTarget
-      }
-    });
-    var innerToolTip = this.computedOpen && h("div", {
-      "class": (0, kendo_vue_common_1.classNames)('k-tooltip', this.$props.tooltipClassName),
-      role: 'tooltip',
-      attrs: this.v3 ? undefined : {
-        role: 'tooltip',
-        id: ariaId
-      },
-      id: ariaId,
-      style: __assign({
-        position: 'relative'
-      }, this.$props.tooltipStyle)
-    }, [h("div", {
-      "class": "k-tooltip-content"
-    }, [contentRendering]), this.$props.showCallout && h("div", {
-      ref: (0, kendo_vue_common_1.setRef)(this, 'callout')
-    })]);
-    var tooltip = this.computedTarget && this.title && this.computedTarget.ownerDocument && h("div", {
-      ref: (0, kendo_vue_common_1.setRef)(this, 'element'),
-      "class": this.wrapperClass,
-      style: __assign({
-        zIndex: currentZIndex
-      }, this.$props.wrapperStyle),
-      tabindex: 0,
-      attrs: this.v3 ? undefined : {
-        tabindex: 0
-      },
-      onMouseleave: this.handleTooltipMouseOut,
-      on: this.v3 ? undefined : {
-        "mouseleave": this.handleTooltipMouseOut
-      }
-    }, [h("div", {
-      "class": "k-child-animation-container"
-    }, [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;
-    }
-  },
-  methods: {
-    destroyElement: function destroyElement() {
-      clearTimeout(this.openTimeoutId);
-      clearInterval(this.updateIntervalId);
-      if (document) {
-        document.body.removeEventListener('mousemove', this.handleBodyMousemove);
-      }
-      if (this.element) {
-        this.element.remove();
-      }
-    },
-    handleTooltipMouseOut: function handleTooltipMouseOut(event) {
-      this.onClose(event);
-    },
-    handleMouseOut: function handleMouseOut(event) {
-      var currentDocument = this.computedTarget ? this.computedTarget.ownerDocument : document;
-      var element = currentDocument && currentDocument.elementFromPoint(event.clientX, event.clientY);
-      this.willOpen = false;
-      if ((0, utils_1.isTooltipElement)(element) || this.computedTarget !== event.target) {
-        return;
-      }
-      if (this.$props.open) {
-        return;
-      }
-      clearInterval(this.updateIntervalId);
-      this.onClose(event);
-    },
-    handleMouseOver: function handleMouseOver(event) {
-      var target = event.target;
-      if (!this.isVisible(target) || (0, utils_1.isTooltipElement)(target) || target === this.computedTarget) {
-        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.computedTarget.removeAttribute('aria-describedby');
-      this.currentTargetElement = 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.computedTarget || event.target;
-      var titleResult = this.getTitle(target);
-      if (!titleResult.title) {
-        if (this.computedOpen) {
-          this.onClose(event);
-        }
-        return;
-      }
-      if (titleResult.element) {
-        titleResult.element.titleExpando = titleResult.title;
-        titleResult.element.title = '';
-      }
-      this.willOpen = true;
-      if (!this.$props.openDelay) {
-        this.currentTargetElement = target;
-        this.currentOpen = true;
-        this.title = titleResult.title;
-        this.setUpdateInterval();
-      } else {
-        if (kendo_vue_common_1.canUseDOM) {
-          this.openTimeoutId = window.setTimeout(function () {
-            if (_this.willOpen) {
-              _this.currentTargetElement = 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.computedTarget;
-      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
-        });
-      }
-    },
-    resetPosition: function resetPosition() {
-      if (this.element) {
-        var position = this.setPosition(this.element);
-        if (this.$props.updatePosition) {
-          position = 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: position
-          });
-        }
-        this.element.style.left = position.left + 'px';
-        this.element.style.top = position.top + 'px';
-      }
-    },
-    isVisible: function isVisible(element) {
-      return !this.$props.filter || this.$props.filter(element);
-    },
-    setPosition: function setPosition(element) {
-      var target = this.parentTitle ? this.getTitle(this.computedTarget).element : this.computedTarget;
-      var domRect = (0, utils_1.getDomRect)(target);
-      var left = (0, utils_1.getLeftPosition)(this.left, element.offsetWidth, domRect, this.$props.anchorElement, this.$props.position);
-      var top = (0, 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 kendo_vue_common_1.canUseDOM && this.top < window.innerHeight / 2 ? 'k-callout k-callout-n' : 'k-callout k-callout-s';
-      }
-    },
-    getCurrentZIndex: function getCurrentZIndex() {
-      return this.kCurrentZIndex ? this.kCurrentZIndex : DEFAULT_TOOLTIP_ZINDEX;
-    }
-  }
-};
-exports.TooltipVue2 = TooltipVue2;
-/**
- * @hidden
- */
-var Tooltip = TooltipVue2;
-exports.Tooltip = Tooltip;

package/dist/npm/TooltipProps.d.ts

@@ -1,100 +0,0 @@
-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;
-    /**
-     * 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.
-     */
-    updatePosition?: (event: TooltipPositionEvent) => {
-        top: number;
-        left: number;
-    };
-    /**
-     * Fires when the Tooltip is shown.
-     */
-    onOpen?: (event: TooltipEvent) => void;
-    /**
-     * Fires when the Tooltip is hidden.
-     */
-    onClose?: (event: TooltipEvent) => void;
-    /**
-     * 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

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

package/dist/npm/additionalTypes.ts

@@ -1,21 +0,0 @@
-// @ts-ignore
-import { DefineComponent } from 'vue';
-// @ts-ignore
-import * as Vue from 'vue';
-
-/**
- * @hidden
- */
-// @ts-ignore
-type Vue2type = Vue.default;
-
-/**
- * @hidden
- */
-// @ts-ignore
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
-/**
- * @hidden
- */
-// @ts-ignore
-export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };