@progress/kendo-vue-popup 3.5.0 → 3.5.1-dev.202208100944

package/dist/esm/Popup.js

@@ -0,0 +1,424 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { Slide } from '@progress/kendo-vue-animation';
+import { CollisionType, AlignPoint, throttle, FRAME_DURATION, isWindowAvailable } from './util.js';
+import { AlignService } from './services/alignService.js';
+import { DOMService } from './services/domService.js';
+import { PositionService } from './services/positionService.js';
+import { canUseDOM, getDefaultSlots, validatePackage } from '@progress/kendo-vue-common';
+import { packageMetadata } from './package-metadata.js';
+var DEFAULT_POPUP_ZINDEX = 100;
+var ZINDEX_POPUP_STEP = 1;
+var DEFAULT_OFFSET = {
+  left: -1000,
+  top: 0
+};
+var ANIMATION_CONTAINER = 'k-animation-container';
+var ANIMATION_CONTAINER_SHOWN = 'k-animation-container-shown';
+var K_POPUP = 'k-popup';
+/**
+ * @hidden
+ */
+
+var PopupVue2 = {
+  name: 'Popup',
+  props: {
+    appendTo: {
+      type: String,
+      default: ''
+    },
+    anchor: {
+      type: String,
+      default: ''
+    },
+    className: String,
+    id: String,
+    popupClass: String,
+    collision: {
+      type: Object,
+      default: function _default() {
+        return {
+          horizontal: CollisionType.fit,
+          vertical: CollisionType.flip
+        };
+      }
+    },
+    anchorAlign: {
+      type: Object,
+      default: function _default() {
+        return {
+          horizontal: AlignPoint.left,
+          vertical: AlignPoint.bottom
+        };
+      }
+    },
+    popupAlign: {
+      type: Object,
+      default: function _default() {
+        return {
+          horizontal: AlignPoint.left,
+          vertical: AlignPoint.top
+        };
+      }
+    },
+    offset: {
+      type: Object,
+      default: function _default() {
+        return DEFAULT_OFFSET;
+      }
+    },
+    show: {
+      type: Boolean,
+      default: false
+    },
+    animate: {
+      type: [Boolean, Object],
+      default: function _default() {
+        return true;
+      }
+    },
+    direction: {
+      type: String,
+      default: 'down'
+    },
+    transition: {
+      type: String,
+      default: 'expand'
+    }
+  },
+  inject: {
+    kCurrentZIndex: {
+      default: null
+    }
+  },
+  data: function data() {
+    return {
+      hasMounted: false
+    };
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this.mountedAppendTo = undefined;
+    this.mountedAnchor = undefined;
+    this._initiallyMountedContent = undefined;
+    this._flipped = false;
+    this._offsetTop = 0;
+    this._offsetLeft = -1000;
+    this._exitingAnimation = false;
+    this._prevShow = false;
+    this._prevShow = this.$props.show;
+    this._domService = new DOMService();
+    this._alignService = new AlignService(this._domService);
+    this._positionService = new PositionService(this._domService);
+    this.reposition = throttle(this.reposition.bind(this), FRAME_DURATION);
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  mounted: function mounted() {
+    if (canUseDOM) {
+      this.mountedAppendTo = this.$props.appendTo ? this.getParentRef(this.$props.appendTo) : document.body;
+      this.mountedAnchor = this.$props.anchor ? this.getParentRef(this.$props.anchor) : document.body;
+    }
+
+    this._parentElement = this.$el.parentElement;
+    this._initiallyMountedContent = this.$el.cloneNode(true);
+    this.hasMounted = true;
+    this.mountedAppendTo.appendChild(this.$el);
+  },
+  updated: function updated() {
+    this._prevShow = this.$props.show;
+  },
+  destroyed: !!isV3 ? undefined : function () {
+    this.detachRepositionHandlers();
+  },
+  beforeDestroy: !!isV3 ? undefined : function () {
+    if (this._parentElement) {
+      this._parentElement.appendChild(this.$el);
+    }
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    this.detachRepositionHandlers();
+  },
+  // @ts-ignore
+  beforeUnmount: function beforeUnmount() {
+    if (this._parentElement) {
+      this._parentElement.appendChild(this.$el);
+    }
+  },
+  methods: {
+    onOpened: function onOpened() {
+      var element = this.$el;
+
+      if (this.$props.show) {
+        element.classList.add(ANIMATION_CONTAINER_SHOWN);
+      }
+
+      this.attachRepositionHandlers(element);
+      this.$emit('open', {
+        target: this
+      });
+    },
+    onClosing: function onClosing() {
+      if (!this.$props.show) {
+        var element = this.$el;
+        element.classList.remove(ANIMATION_CONTAINER_SHOWN);
+      }
+
+      this.detachRepositionHandlers();
+    },
+    onClosed: function onClosed() {
+      if (this._exitingAnimation) {
+        this._exitingAnimation = false;
+        this.$forceUpdate();
+      }
+
+      this.$emit('close', {
+        target: this
+      });
+    },
+    transitionDuration: function transitionDuration() {
+      var animate = this.$props.animate;
+      var transitionEnterDuration = 0;
+      var transitionExitDuration = 0;
+
+      if (animate) {
+        if (animate === true) {
+          // Inherit the default duration of the Animation component.
+          transitionEnterDuration = transitionExitDuration = undefined;
+        } else {
+          transitionEnterDuration = animate.openDuration;
+          transitionExitDuration = animate.closeDuration;
+        }
+      }
+
+      return {
+        transitionEnterDuration: transitionEnterDuration,
+        transitionExitDuration: transitionExitDuration
+      };
+    },
+    getParentRef: function getParentRef(anchor) {
+      // @ts-ignore
+      var parent = this.$parent;
+
+      while (!parent.$refs[anchor]) {
+        // @ts-ignore
+        if (parent && parent.kendoAnchorRef) {
+          // @ts-ignore
+          return parent.kendoAnchorRef;
+        } // @ts-ignore
+
+
+        parent = parent.$parent;
+
+        if (!parent && canUseDOM) {
+          return document.body;
+        }
+      } // @ts-ignore
+
+
+      return parent.$refs[anchor].$el || parent.$refs[anchor];
+    },
+    position: function position(settings, element, anchor) {
+      var anchorAlign = settings.anchorAlign,
+          popupAlign = settings.popupAlign,
+          collision = settings.collision,
+          offset = settings.offset;
+      var anchorElement = anchor ? this.v3 ? this.mountedAnchor : this.getParentRef(anchor) : document.body;
+
+      var alignedOffset = this._alignService.alignElement({
+        anchor: anchor ? anchorElement : undefined,
+        element: element,
+        elementAlign: popupAlign,
+        anchorAlign: anchorAlign,
+        offset: offset
+      });
+
+      var result = this._positionService.positionElement({
+        anchor: anchorElement,
+        anchorAlign: anchorAlign,
+        collisions: collision,
+        element: element,
+        currentLocation: alignedOffset,
+        elementAlign: popupAlign
+      });
+
+      return result;
+    },
+    calculatePosition: function calculatePosition($props, appendToElement) {
+      if (!appendToElement || !isWindowAvailable() || !canUseDOM) {
+        return {
+          flipped: false,
+          offset: $props.offset
+        };
+      }
+
+      var defaultSlot = getDefaultSlots(this);
+      var root = document.createElement('div');
+      var contentElement = this.$el && this.$el.firstChild ? this.$el.firstChild.firstChild ? this.$el.firstChild.firstChild.cloneNode(true) : null : null;
+      var divWrapper = contentElement && contentElement.getBoundingClientRect ? contentElement : this._initiallyMountedContent;
+
+      if (divWrapper) {
+        root.appendChild(divWrapper);
+      } else {
+        // @ts-ignore
+        var internalClass = this.v3 ? defaultSlot && defaultSlot[0].props ? defaultSlot[0].props.class : '' : defaultSlot && defaultSlot[0].data ? defaultSlot[0].data.staticClass : ''; // @ts-ignore
+
+        var domClass = this.v3 ? this.$props.popupClass ? this.$props.popupClass : '' : defaultSlot && defaultSlot[0].data ? defaultSlot[0].data.class : '';
+        root.innerHTML = "<div class=\"k-animation-container k-animation-container-relative\">\t\n                        <div class=\"k-popup k-animation-container k-animation-container-relative\">\n                            <div class=\"".concat(internalClass, " ").concat(domClass, "\" >\n                            </div>\t\n                        </div>\t\n                </div>");
+      }
+
+      appendToElement.appendChild(root);
+
+      if (root && root.firstChild) {
+        var firstChild = root.firstChild;
+        firstChild.style.position = 'absolute';
+        firstChild.style.visibility = 'hidden';
+        firstChild.style.display = 'block';
+        firstChild.style.left = '-1000';
+        firstChild.style.top = '0';
+        var inlineStyles = this.v3 ? defaultSlot && defaultSlot[0].props ? defaultSlot[0].props.style : {} : defaultSlot[0].data ? defaultSlot[0].data.style : {};
+
+        if (inlineStyles) {
+          for (var _i = 0, _a = Object.entries(inlineStyles); _i < _a.length; _i++) {
+            var _b = _a[_i],
+                key = _b[0],
+                value = _b[1];
+            firstChild.style[key] = value;
+          }
+        }
+      }
+
+      var newPosition = this.position($props, root.firstChild, this.$props.anchor);
+      root.parentNode.removeChild(root);
+      return newPosition;
+    },
+    attachRepositionHandlers: function attachRepositionHandlers(element) {
+      var _this = this;
+
+      this.detachRepositionHandlers();
+      this._scrollableParents = this._domService.scrollableParents(this.$props.anchor ? this.mountedAnchor : element);
+
+      this._scrollableParents.map(function (p) {
+        return p.addEventListener('scroll', _this.reposition);
+      });
+
+      window.addEventListener('resize', this.reposition);
+    },
+    detachRepositionHandlers: function detachRepositionHandlers() {
+      var _this = this;
+
+      if (this._scrollableParents) {
+        this._scrollableParents.map(function (p) {
+          return p.removeEventListener('scroll', _this.reposition);
+        });
+
+        this._scrollableParents = undefined;
+      }
+
+      window.removeEventListener('resize', this.reposition);
+    },
+    reposition: function reposition() {
+      this.$forceUpdate();
+    },
+    getCurrentZIndex: function getCurrentZIndex() {
+      return this.kCurrentZIndex ? this.kCurrentZIndex + ZINDEX_POPUP_STEP : DEFAULT_POPUP_ZINDEX;
+    }
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+        className = _a.className,
+        popupClass = _a.popupClass,
+        show = _a.show,
+        id = _a.id;
+    var defaultSlots = getDefaultSlots(this);
+    var defaultSlot = this.v3 ? defaultSlots : show ? defaultSlots : null;
+    var defaultAppentTo = isWindowAvailable() ? this.$props.appendTo ? this.mountedAppendTo || this.getParentRef(this.$props.appendTo) : document.body : undefined;
+
+    if (this.$props.show) {
+      var newPosition = this.calculatePosition(this.$props, defaultAppentTo);
+      this._offsetLeft = newPosition.offset.left;
+      this._offsetTop = newPosition.offset.top;
+      this._flipped = !!newPosition.flipped;
+    }
+
+    var direction = this._flipped ? 'up' : 'down';
+
+    var _b = this.transitionDuration(),
+        transitionEnterDuration = _b.transitionEnterDuration,
+        transitionExitDuration = _b.transitionExitDuration;
+
+    var currentZIndex = this.getCurrentZIndex();
+    this._exitingAnimation = this._exitingAnimation || this._prevShow && !show;
+
+    if (!this.hasMounted) {
+      return h("div", {
+        style: {
+          display: 'none'
+        },
+        "class": className
+      }, [h("div", {
+        "class": [popupClass, K_POPUP]
+      }, [defaultSlots])]);
+    }
+
+    if (show || this._exitingAnimation && defaultAppentTo) {
+      var popup = // @ts-ignore function children
+      h(Slide, {
+        id: id,
+        attrs: this.v3 ? undefined : {
+          id: id,
+          role: this.appendTo ? '' : 'region',
+          componentChildClassName: [popupClass, K_POPUP],
+          className: className,
+          direction: direction,
+          transitionEnterDuration: transitionEnterDuration,
+          transitionExitDuration: transitionExitDuration,
+          appear: show
+        },
+        role: this.appendTo ? '' : 'region',
+        componentChildClassName: [popupClass, K_POPUP],
+        className: className,
+        onEntered: this.onOpened,
+        on: this.v3 ? undefined : {
+          "entered": this.onOpened,
+          "exiting": this.onClosing,
+          "exited": this.onClosed
+        },
+        onExiting: this.onClosing,
+        onExited: this.onClosed,
+        direction: direction,
+        style: {
+          zIndex: currentZIndex,
+          position: 'absolute',
+          top: this._offsetTop + 'px',
+          left: this._offsetLeft + 'px'
+        },
+        transitionEnterDuration: transitionEnterDuration,
+        transitionExitDuration: transitionExitDuration,
+        appear: show
+      }, this.v3 ? function () {
+        return [defaultSlot];
+      } : [defaultSlot]);
+      return popup;
+    }
+
+    return null;
+  }
+};
+/**
+ * @hidden
+ */
+
+var Popup = PopupVue2;
+export { Popup, PopupVue2 };

package/dist/esm/additionalTypes.ts

@@ -0,0 +1,21 @@
+// @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 };

package/dist/esm/main.d.ts

@@ -0,0 +1,9 @@
+import { Popup, PopupVue2 } from './Popup';
+import { PopupProps } from './models/PopupProps';
+import { PopupSettings } from './models/PopupSettings';
+import { Align } from './models/Align';
+import { Collision } from './models/Collision';
+import { Offset } from './models/Offset';
+import { PopupAnimation } from './models/PopupAnimation';
+import { OpenEvent as PopupOpenEvent, CloseEvent as PopupCloseEvent } from './models/Events';
+export { Popup, PopupVue2, PopupProps, PopupSettings, Align, Collision, Offset, PopupAnimation, PopupOpenEvent, PopupCloseEvent };

package/dist/esm/main.js

@@ -0,0 +1,2 @@
+import { Popup, PopupVue2 } from './Popup.js';
+export { Popup, PopupVue2 };

package/dist/esm/models/Align.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Defines the horizontal and vertical aligning point of the Popup.
+ */
+export interface Align {
+    /**
+     * Defines the possible horizontal point values that are relative to the anchor or the Popup.
+     *
+     * The available options are:
+     * - `left`—Uses the leftmost point of the anchor element.
+     * - `center`—Uses the center point of the anchor element.
+     * - `right`—Uses the rightmost point of the anchor element.
+     */
+    horizontal: 'left' | 'center' | 'right';
+    /**
+     * Defines the possible vertical point values that are relative to the anchor or the Popup.
+     *
+     * The available options are:
+     * - `top`—Uses the top point of the anchor element.
+     * - `center`—Uses the center point of the anchor element.
+     * - `bottom`—Uses the bottom point of the anchor element.
+     */
+    vertical: 'top' | 'center' | 'bottom';
+}

package/dist/esm/models/Align.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/AlignElementSettings.d.ts

@@ -0,0 +1,11 @@
+import { AlignStrategy, OffsetPosition } from '@progress/kendo-popup-common';
+/**
+ * @hidden
+ */
+export interface AlignElementSettings {
+    anchor?: HTMLElement;
+    anchorAlign: AlignStrategy;
+    element: HTMLElement;
+    elementAlign: AlignStrategy;
+    offset?: OffsetPosition;
+}

package/dist/esm/models/AlignElementSettings.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/Collision.d.ts

@@ -0,0 +1,14 @@
+import { CollisionType } from './CollisionType';
+/**
+ * Defines the horizontal and vertical collision behavior of the Popup.
+ */
+export interface Collision {
+    /**
+     * Defines the horizontal collision behavior of the Popup.
+     */
+    horizontal: CollisionType;
+    /**
+     * Defines the vertical collision behavior of the Popup.
+     */
+    vertical: CollisionType;
+}

package/dist/esm/models/Collision.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/CollisionType.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Defines the possible collision behavior when the Popup is not fully visible.
+ *
+ * The available options are:
+ * - `fit`—Moves the Popup horizontally until it is fully displayed in the viewport.
+ * - `flip`—Flips the Popup position based on the origin and the position properties.
+ */
+export declare type CollisionType = 'fit' | 'flip';

package/dist/esm/models/CollisionType.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/Events.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Represents the object of the `Open` Popup event.
+ */
+export interface OpenEvent {
+    /**
+     * An event target.
+     */
+    target: any;
+}
+/**
+ * Represents the object of the `Close` Popup event.
+ */
+export interface CloseEvent {
+    /**
+     * An event target.
+     */
+    target: any;
+}

package/dist/esm/models/Events.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/Offset.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The offset position of the Popup.
+ */
+export interface Offset {
+    /**
+     * Defines the top position of the Popup.
+     */
+    top: number;
+    /**
+     * Defines the left position of the Popup.
+     */
+    left: number;
+}

package/dist/esm/models/Offset.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/PopupAnimation.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The animation settings for the Popup component.
+ */
+export interface PopupAnimation {
+    /**
+     * The duration of the opening animation in milliseconds. Defaults to `300ms`.
+     */
+    openDuration?: number;
+    /**
+     * The duration of the closing animation in milliseconds. Defaults to `300ms`.
+     */
+    closeDuration?: number;
+}

package/dist/esm/models/PopupAnimation.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/PopupProps.d.ts

@@ -0,0 +1,10 @@
+import { PopupSettings } from './PopupSettings';
+/**
+ * Represents the props of the [KendoVue Popup component]({% slug overview_popup %}).
+ */
+export interface PopupProps extends PopupSettings {
+    /**
+     * Controls the Popup visibility ([see example]({% slug hidden_popup %})). Defaults to `false`.
+     */
+    show?: boolean;
+}

package/dist/esm/models/PopupProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/PopupSettings.d.ts

@@ -0,0 +1,68 @@
+import { OpenEvent, CloseEvent } from './Events';
+import { Offset } from './Offset';
+import { PopupAnimation } from './PopupAnimation';
+/**
+ * @hidden
+ */
+export interface PopupSettings {
+    /**
+     * Controls the Popup animation ([see example]({% slug animations_popup %})). By default, the opening and closing animations are enabled.
+     */
+    animate?: boolean | PopupAnimation;
+    /**
+     * Specifies the element which will be used as an anchor ([see example]({% slug alignmentpositioning_popup %})). The Popup opens next to that element.
+     */
+    anchor: string;
+    /**
+     * Specifies the pivot point of the anchor ([see example]({% slug alignmentpositioning_popup %})).
+     */
+    anchorAlign?: object;
+    /**
+     * Defines the container to which the Popup will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
+     */
+    appendTo?: string;
+    /**
+     * Configures the collision behavior of the Popup ([see example]({% slug viewportboundarydetection_popup %})).
+     */
+    collision?: object;
+    /**
+     * Specifies the pivot point of the Popup ([see example]({% slug alignmentpositioning_popup %})).
+     */
+    popupAlign?: object;
+    /**
+     * Specifies a list of CSS classes that will be added to the Popup element.
+     */
+    className?: string | Array<string>;
+    /**
+     * Specifies the id that will be added to the Popup element.
+     */
+    id?: string;
+    /**
+     * Specifies the direction of the Expand Animation. Defaults to `down`.
+     */
+    direction?: String;
+    /**
+     * Specifies the direction of the Expand Animation. Defaults to `expand`.
+     */
+    transition?: String;
+    /**
+     * Specifies a list of CSS classes that will be added to the internal animated element ([see example]({% slug appearance_popup %})).
+     */
+    popupClass?: string | Array<string>;
+    /**
+     * Represents the styles that are applied to the Popup.
+     */
+    style?: any;
+    /**
+     * Specifies the absolute position of the element ([see example]({% slug alignmentpositioning_popup %})). The Popup opens next to that point. The pivot point of the Popup is defined by the `popupAlign` configuration option. The boundary detection is applied by using the window viewport.
+     */
+    offset?: Offset;
+    /**
+     * Fires after the Popup is opened and the opening animation ends.
+     */
+    onOpen?: (event: OpenEvent) => void;
+    /**
+     * Fires after the Popup is closed.
+     */
+    onClose?: (event: CloseEvent) => void;
+}

package/dist/esm/models/PopupSettings.js

@@ -0,0 +1,2 @@
+export {};
+// tslint:enable:max-line-length

package/dist/esm/models/Position.d.ts

@@ -0,0 +1,8 @@
+import { OffsetPosition as Offset } from '@progress/kendo-popup-common';
+/**
+ * @hidden
+ */
+export interface Position {
+    flipped?: boolean;
+    offset?: Offset;
+}