@progress/kendo-vue-dialogs 5.3.0-dev.202409130647 → 5.3.0-develop.1

package/dist/esm/Window.js

@@ -1,663 +0,0 @@
-var __assign = this && this.__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);
-};
-// @ts-ignore
-import * as Vue from 'vue';
-var allVue = Vue;
-var gh = allVue.h;
-var isV3 = allVue.version && allVue.version[0] === '3';
-import { WindowTitleBar } from './WindowTitlebar.js';
-import { Keys, guid, Draggable, templateDefinition, getDefaultSlots, templateRendering, getListeners, validatePackage, WatermarkOverlay, shouldShowValidationUI } from '@progress/kendo-vue-common';
-import { ResizeHandlers } from './WindowResizeHandlers.js';
-import { windowStage } from './StageEnum.js';
-import { packageMetadata } from './package-metadata.js';
-import { DEFAULT_DIALOGS_ZINDEX } from './constants.js';
-var DEFAULT_WIDTH = 300;
-var DEFAULT_HEIGHT = 300;
-var DEFAULT_MIN_WIDTH = 120;
-var DEFAULT_MIN_HEIGHT = 100;
-var DEFAULT_STEP = 5;
-/**
- * @hidden
- */
-var WindowVue2 = {
-  name: 'KendoWindow',
-  // @ts-ignore
-  emits: {
-    'resize': null,
-    'move': null,
-    'close': null,
-    'stagechange': null,
-    'overlayclick': null
-  },
-  provide: function provide() {
-    return {
-      kCurrentZIndex: DEFAULT_DIALOGS_ZINDEX
-    };
-  },
-  props: {
-    id: String,
-    appendTo: String,
-    width: {
-      type: [Number],
-      default: undefined
-    },
-    height: {
-      type: [Number],
-      default: undefined
-    },
-    left: {
-      type: [Number],
-      default: undefined
-    },
-    windowStyle: Object,
-    windowClass: String,
-    top: {
-      type: [Number],
-      default: undefined
-    },
-    initialWidth: [Number],
-    initialHeight: [Number],
-    initialLeft: [Number],
-    initialTop: [Number],
-    minWidth: {
-      type: [Number],
-      default: DEFAULT_MIN_WIDTH
-    },
-    minHeight: {
-      type: [Number],
-      default: DEFAULT_MIN_HEIGHT
-    },
-    resizable: {
-      type: Boolean,
-      default: true
-    },
-    draggable: {
-      type: Boolean,
-      default: true
-    },
-    modal: {
-      type: Boolean,
-      default: false
-    },
-    doubleClickStageChange: {
-      type: Boolean,
-      default: true
-    },
-    title: String,
-    titleRender: templateDefinition,
-    closeButton: templateDefinition,
-    minimizeButton: templateDefinition,
-    maximizeButton: templateDefinition,
-    restoreButton: templateDefinition,
-    shouldUpdateOnDrag: Boolean,
-    stage: {
-      type: String,
-      validator: function validator(value) {
-        return ['DEFAULT', 'MINIMIZED', 'FULLSCREEN'].indexOf(value) !== -1;
-      }
-    },
-    themeColor: {
-      type: String,
-      validator: function validator(value) {
-        return [undefined, 'primary', 'dark', 'light'].includes(value);
-      }
-    }
-  },
-  // @ts-ignore
-  setup: !isV3 ? undefined : function () {
-    var v3 = !!isV3;
-    return {
-      v3: v3
-    };
-  },
-  created: function created() {
-    validatePackage(packageMetadata);
-    this.showLicenseWatermark = shouldShowValidationUI(packageMetadata);
-    this.windowCoordinatesState = {
-      leftBeforeAction: this.getInitialLeft(),
-      topBeforeAction: this.getInitialTop(),
-      widthBeforeAction: this.getInitialWidth(),
-      heightBeforeAction: this.getInitialHeight()
-    };
-    this.titleId = this.generateTitleId();
-  },
-  beforeDestroy: !!isV3 ? undefined : function () {
-    if (this.$props.appendTo) {
-      this.windowWrapper.remove();
-    }
-  },
-  beforeUnmount: function beforeUnmount() {
-    if (this.$props.appendTo) {
-      this.windowWrapper.remove();
-    }
-  },
-  data: function data() {
-    return {
-      currentStage: this.$props.stage || windowStage.DEFAULT,
-      isDragging: false,
-      currentTop: this.getInitialTop(),
-      currentLeft: this.getInitialLeft(),
-      currentWidth: this.getInitialWidth(),
-      currentHeight: this.getInitialHeight(),
-      titleId: undefined,
-      showLicenseWatermark: false
-    };
-  },
-  mounted: function mounted() {
-    if (window) {
-      window.addEventListener('resize', this.handleBrowserWindowResize);
-      if (this.$props.appendTo) {
-        var body = document.querySelector(this.$props.appendTo);
-        this.windowWrapper = this.$refs.wrapper;
-        body.append(this.windowWrapper);
-      }
-    }
-    if (this.$el) {
-      // this.draggable = this.$refs.draggable;
-      this.windowElement = this.$refs.windowElement;
-    }
-  },
-  destroyed: !!isV3 ? undefined : function () {
-    if (window) {
-      window.removeEventListener('resize', this.handleBrowserWindowResize);
-    }
-  },
-  // @ts-ignore
-  unmounted: function unmounted() {
-    if (window) {
-      window.removeEventListener('resize', this.handleBrowserWindowResize);
-    }
-  },
-  computed: {
-    wrapperClass: function wrapperClass() {
-      return {
-        'k-dialog-wrapper': this.$props.modal
-      };
-    },
-    windowElementClass: function windowElementClass() {
-      var _a;
-      var _b = this.$props,
-        windowClass = _b.windowClass,
-        themeColor = _b.themeColor;
-      return _a = {
-        'k-window': true
-      }, _a[windowClass] = windowClass, _a["k-window-".concat(themeColor)] = themeColor, _a['k-window-minimized'] = this.currentStage === 'MINIMIZED', _a;
-    },
-    computedTop: function computedTop() {
-      if (this.windowStage !== windowStage.FULLSCREEN) {
-        return Math.max(this.$props.top || this.currentTop, 0);
-      }
-      return 0;
-    },
-    computedLeft: function computedLeft() {
-      if (this.windowStage !== windowStage.FULLSCREEN) {
-        return Math.max(this.$props.left || this.currentLeft, 0);
-      }
-      return 0;
-    },
-    computedWidth: function computedWidth() {
-      var width = this.$props.width || this.currentWidth;
-      if (this.windowStage === windowStage.FULLSCREEN) {
-        width = window.innerWidth;
-      }
-      return width;
-    },
-    computedHeight: function computedHeight() {
-      var height = this.$props.height || this.currentHeight;
-      if (this.windowStage === windowStage.FULLSCREEN) {
-        height = window.innerHeight;
-      } else if (this.windowStage === windowStage.MINIMIZED) {
-        height = 0;
-      }
-      return height;
-    },
-    windowStage: function windowStage() {
-      return this.$props.stage || this.currentStage;
-    }
-  },
-  methods: {
-    onPress: function onPress(event) {
-      var e = event;
-      this.windowCoordinatesState.differenceLeft = e.pageX - this.computedLeft;
-      this.windowCoordinatesState.differenceTop = e.pageY - this.computedTop;
-    },
-    onDrag: function onDrag(event) {
-      var e = event;
-      e.originalEvent.preventDefault();
-      if (this.windowStage !== windowStage.FULLSCREEN && this.$props.draggable) {
-        this.currentTop = Math.max(e.pageY - this.windowCoordinatesState.differenceTop, 0);
-        this.currentLeft = e.pageX - this.windowCoordinatesState.differenceLeft;
-        this.isDragging = true;
-        this.dispatchMoveEvent('move', e, true, false);
-      }
-    },
-    onRelease: function onRelease(event) {
-      var e = event;
-      if (this.windowStage !== windowStage.FULLSCREEN && this.$props.draggable) {
-        this.dispatchMoveEvent('move', e, true, true);
-      }
-      this.isDragging = false;
-    },
-    handleKeyDown: function handleKeyDown(event) {
-      if (event.target !== event.currentTarget) {
-        return;
-      }
-      var minWidth = this.$props.minWidth || DEFAULT_MIN_WIDTH;
-      var minHeight = this.$props.minHeight || DEFAULT_MIN_HEIGHT;
-      if (event.ctrlKey && this.$props.resizable) {
-        switch (event.keyCode) {
-          case Keys.up:
-            event.preventDefault();
-            if (minHeight <= this.computedHeight - DEFAULT_STEP) {
-              this.currentHeight = this.currentHeight - DEFAULT_STEP;
-            }
-            break;
-          case Keys.down:
-            event.preventDefault();
-            this.currentHeight = this.currentHeight + DEFAULT_STEP;
-            break;
-          case Keys.left:
-            if (minWidth <= this.computedWidth - DEFAULT_STEP) {
-              this.currentWidth = this.currentWidth - DEFAULT_STEP;
-            }
-            break;
-          case Keys.right:
-            this.currentWidth = this.currentWidth + DEFAULT_STEP;
-            break;
-          default:
-            return;
-        }
-        this.dispatchMoveEvent('resize', event, false, undefined);
-        return;
-      }
-      if (event.altKey) {
-        switch (event.keyCode) {
-          case Keys.up:
-            if (this.windowStage === windowStage.MINIMIZED) {
-              this.handleRestore(event);
-              this.$emit('stagechange', event, this, {
-                state: windowStage.DEFAULT
-              });
-            } else if (this.windowStage === windowStage.DEFAULT) {
-              this.handleFullscreen(event);
-              this.$emit('stagechange', event, this, {
-                state: windowStage.FULLSCREEN
-              });
-            }
-            break;
-          case Keys.down:
-            if (this.windowStage === windowStage.FULLSCREEN) {
-              this.handleRestore(event);
-              this.$emit('stagechange', event, this, {
-                state: windowStage.DEFAULT
-              });
-            } else if (this.windowStage === windowStage.DEFAULT) {
-              this.handleMinimize(event);
-              this.$emit('stagechange', event, this, {
-                state: windowStage.MINIMIZED
-              });
-            }
-            break;
-          default:
-        }
-        return;
-      }
-      if (!event.ctrlKey) {
-        switch (event.keyCode) {
-          case Keys.esc:
-            this.handleCloseWindow(event);
-            return;
-          case Keys.up:
-            event.preventDefault();
-            this.currentTop = this.currentTop - DEFAULT_STEP;
-            break;
-          case Keys.down:
-            event.preventDefault();
-            this.currentTop = this.currentTop + DEFAULT_STEP;
-            break;
-          case Keys.left:
-            event.preventDefault();
-            this.currentLeft = this.currentLeft - DEFAULT_STEP;
-            break;
-          case Keys.right:
-            event.preventDefault();
-            this.currentLeft = this.currentLeft + DEFAULT_STEP;
-            break;
-          default:
-            return;
-        }
-      }
-      this.dispatchMoveEvent('move', event, false, undefined);
-    },
-    getInitialTop: function getInitialTop() {
-      if (this.$props.top !== undefined) {
-        return this.$props.top;
-      }
-      if (this.$props.initialTop !== undefined) {
-        return this.$props.initialTop;
-      }
-      var height = DEFAULT_HEIGHT;
-      if (this.$props.height !== undefined) {
-        height = this.$props.height;
-      } else if (this.$props.initialHeight !== undefined) {
-        height = this.$props.initialHeight;
-      }
-      return window.innerHeight / 2 - height / 2;
-    },
-    getInitialLeft: function getInitialLeft() {
-      if (this.$props.left !== undefined) {
-        return this.$props.left;
-      }
-      if (this.$props.initialLeft !== undefined) {
-        return this.$props.initialLeft;
-      }
-      var width = DEFAULT_WIDTH;
-      if (this.$props.width !== undefined) {
-        width = this.$props.width;
-      } else if (this.$props.initialWidth !== undefined) {
-        width = this.$props.initialWidth;
-      }
-      return window.innerWidth / 2 - width / 2;
-    },
-    getInitialWidth: function getInitialWidth() {
-      var width = DEFAULT_WIDTH;
-      if (this.$props.width !== undefined) {
-        width = this.$props.width;
-      } else if (this.$props.initialWidth !== undefined) {
-        width = this.$props.initialWidth;
-      }
-      return width;
-    },
-    getInitialHeight: function getInitialHeight() {
-      var height = DEFAULT_HEIGHT;
-      if (this.$props.height !== undefined) {
-        height = this.$props.height;
-      } else if (this.$props.initialHeight !== undefined) {
-        height = this.$props.initialHeight;
-      }
-      return height;
-    },
-    handleMinimize: function handleMinimize(event) {
-      event.preventDefault();
-      this.windowCoordinatesState.leftBeforeAction = this.computedLeft;
-      this.windowCoordinatesState.topBeforeAction = this.computedTop;
-      this.windowCoordinatesState.widthBeforeAction = this.computedWidth;
-      this.windowCoordinatesState.heightBeforeAction = this.computedHeight;
-      this.currentStage = windowStage.MINIMIZED;
-      this.currentHeight = 0;
-      this.$emit('stagechange', event, this, {
-        state: windowStage.MINIMIZED
-      });
-    },
-    handleFullscreen: function handleFullscreen(event) {
-      event.preventDefault();
-      this.windowCoordinatesState.leftBeforeAction = this.computedLeft;
-      this.windowCoordinatesState.topBeforeAction = this.computedTop;
-      this.windowCoordinatesState.widthBeforeAction = this.computedWidth;
-      this.windowCoordinatesState.heightBeforeAction = this.computedHeight;
-      this.currentLeft = 0;
-      this.currentTop = 0;
-      this.currentWidth = window.innerWidth;
-      this.currentHeight = window.innerHeight;
-      this.currentStage = windowStage.FULLSCREEN;
-      this.$emit('stagechange', event, this, {
-        state: windowStage.FULLSCREEN
-      });
-    },
-    handleRestore: function handleRestore(event) {
-      event.preventDefault();
-      if (this.windowStage === windowStage.FULLSCREEN) {
-        this.currentStage = windowStage.DEFAULT;
-        this.currentLeft = this.windowCoordinatesState.leftBeforeAction;
-        this.currentTop = this.windowCoordinatesState.topBeforeAction;
-        this.currentWidth = this.windowCoordinatesState.widthBeforeAction;
-        this.currentHeight = this.windowCoordinatesState.heightBeforeAction;
-      } else if (this.windowStage === windowStage.MINIMIZED) {
-        this.currentStage = windowStage.DEFAULT;
-        this.currentHeight = this.windowCoordinatesState.heightBeforeAction;
-      }
-      this.$emit('stagechange', event, this, {
-        state: windowStage.DEFAULT
-      });
-    },
-    handleCloseWindow: function handleCloseWindow(event) {
-      event.preventDefault();
-      this.$emit('close', event, this, {
-        state: undefined
-      });
-    },
-    handleDoubleClick: function handleDoubleClick(e) {
-      if (!this.$props.doubleClickStageChange) {
-        return;
-      }
-      if (this.windowStage === windowStage.FULLSCREEN || this.windowStage === windowStage.MINIMIZED) {
-        this.handleRestore(e);
-      } else {
-        this.handleFullscreen(e);
-      }
-    },
-    handleResize: function handleResize(event, props) {
-      var currentWidth = this.computedWidth;
-      var currentHeight = this.computedHeight;
-      var minWidth = this.$props.minWidth || DEFAULT_MIN_WIDTH;
-      var minHeight = this.$props.minHeight || DEFAULT_MIN_HEIGHT;
-      var heightDifference = this.computedTop - event.pageY;
-      var widthDifference = this.computedLeft - event.pageX;
-      var newWidth = event.pageX - this.computedLeft;
-      var newHeight = event.pageY - this.computedTop;
-      this.isDragging = !props.end;
-      if (props.direction.indexOf('n') >= 0 && minHeight - (currentHeight + heightDifference) < 0) {
-        this.currentTop = event.pageY;
-        this.currentHeight = currentHeight + heightDifference;
-      }
-      if (props.direction.indexOf('s') >= 0 && minHeight - newHeight < 0) {
-        this.currentHeight = newHeight;
-      }
-      if (props.direction.indexOf('w') >= 0 && minWidth - (currentWidth + widthDifference) < 0) {
-        this.currentLeft = event.pageX;
-        this.currentWidth = currentWidth + widthDifference;
-      }
-      if (props.direction.indexOf('e') >= 0 && minWidth - newWidth < 0) {
-        this.currentWidth = newWidth;
-      }
-      this.dispatchMoveEvent('resize', event, true, props.end);
-    },
-    dispatchMoveEvent: function dispatchMoveEvent(eventName, event, drag, end) {
-      this.$emit(eventName, {
-        event: event.event,
-        drag: drag,
-        end: end,
-        target: this,
-        left: this.currentLeft,
-        top: this.currentTop,
-        width: this.currentWidth,
-        height: this.currentHeight
-      });
-    },
-    handleBrowserWindowResize: function handleBrowserWindowResize() {
-      if (this.windowStage === windowStage.FULLSCREEN) {
-        this.currentWidth = window.innerWidth;
-        this.currentHeight = window.innerHeight;
-      }
-    },
-    handleClick: function handleClick(e) {
-      this.$emit('overlayclick', e);
-    },
-    getActionBarIndex: function getActionBarIndex(children) {
-      var actionBarIndex = children.findIndex(function (child) {
-        return child && child.tag && child.tag.toLowerCase().indexOf('dialogactionsbar') !== -1 || child.componentOptions && child.componentOptions.tag && child.componentOptions.tag.toLowerCase().indexOf('actions-bar') !== -1 || child.type && child.type.name && child.type.name.toLowerCase().indexOf('dialogactionsbar') !== -1;
-      });
-      return actionBarIndex;
-    },
-    generateTitleId: function generateTitleId() {
-      return 'window-title-' + guid();
-    }
-  },
-  // @ts-ignore
-  render: function render(createElement) {
-    var _this = this;
-    var h = gh || createElement;
-    var titleRender = templateRendering.call(this, this.$props.titleRender, getListeners.call(this));
-    var closeButton = templateRendering.call(this, this.$props.closeButton, getListeners.call(this));
-    var minimizeButton = templateRendering.call(this, this.$props.minimizeButton, getListeners.call(this));
-    var maximizeButton = templateRendering.call(this, this.$props.maximizeButton, getListeners.call(this));
-    var restoreButton = templateRendering.call(this, this.$props.restoreButton, getListeners.call(this));
-    var defaultSlot = getDefaultSlots(this);
-    var content = defaultSlot || [];
-    var actionBarIndex = this.getActionBarIndex(content);
-    var actions;
-    if (actionBarIndex !== -1) {
-      actions = content[actionBarIndex];
-      content.splice(actionBarIndex, 1);
-    }
-    var watermark = this.showLicenseWatermark ? h(WatermarkOverlay) : null;
-    var windowElement = h("div", {
-      "class": this.wrapperClass,
-      ref: 'wrapper'
-    }, [this.$props.modal && h("div", {
-      "class": "k-overlay",
-      onClick: this.handleClick,
-      on: this.v3 ? undefined : {
-        "click": this.handleClick
-      }
-    }), h("div", {
-      tabindex: 0,
-      attrs: this.v3 ? undefined : {
-        tabindex: 0,
-        role: 'dialog',
-        "aria-modal": this.$props.modal ? true : undefined,
-        "aria-labelledby": this.titleId
-      },
-      onFocus: function onFocus(e) {
-        return e.target.classList.add('k-focus');
-      },
-      on: this.v3 ? undefined : {
-        "focus": function onFocus(e) {
-          return e.target.classList.add('k-focus');
-        },
-        "blur": function blur(e) {
-          return e.target.classList.remove('k-focus');
-        },
-        "keydown": this.handleKeyDown
-      },
-      onBlur: function blur(e) {
-        return e.target.classList.remove('k-focus');
-      },
-      onKeydown: this.handleKeyDown,
-      ref: 'windowElement',
-      "class": this.windowElementClass,
-      role: 'dialog',
-      "aria-modal": this.$props.modal ? true : undefined,
-      "aria-labelledby": this.titleId,
-      style: __assign({
-        top: this.computedTop + 'px',
-        left: this.computedLeft + 'px',
-        width: this.computedWidth + 'px',
-        height: this.computedHeight + 'px' || ''
-      }, this.$props.windowStyle)
-    }, [
-    // @ts-ignore  function children
-    h(Draggable, {
-      onPress: this.onPress,
-      on: this.v3 ? undefined : {
-        "press": this.onPress,
-        "drag": this.onDrag,
-        "release": this.onRelease
-      },
-      onDrag: this.onDrag,
-      onRelease: this.onRelease,
-      ref: 'draggable'
-    }, this.v3 ? function () {
-      return [
-      // @ts-ignore  function children
-      h(WindowTitleBar, {
-        stage: _this.windowStage,
-        attrs: _this.v3 ? undefined : {
-          stage: _this.windowStage,
-          title: _this.$props.title,
-          titleId: _this.titleId,
-          titleRender: titleRender,
-          closeButton: closeButton,
-          minimizeButton: minimizeButton,
-          maximizeButton: maximizeButton,
-          restoreButton: restoreButton
-        },
-        title: _this.$props.title,
-        titleId: _this.titleId,
-        titleRender: titleRender,
-        onDoubleclick: _this.handleDoubleClick,
-        on: _this.v3 ? undefined : {
-          "doubleclick": _this.handleDoubleClick,
-          "minimizeclick": _this.handleMinimize,
-          "fullscreenclick": _this.handleFullscreen,
-          "restoreclick": _this.handleRestore,
-          "closeclick": _this.handleCloseWindow
-        },
-        onMinimizeclick: _this.handleMinimize,
-        onFullscreenclick: _this.handleFullscreen,
-        onRestoreclick: _this.handleRestore,
-        onCloseclick: _this.handleCloseWindow,
-        closeButton: closeButton,
-        minimizeButton: minimizeButton,
-        maximizeButton: maximizeButton,
-        restoreButton: restoreButton
-      })];
-    } : [h(WindowTitleBar, {
-      stage: _this.windowStage,
-      attrs: _this.v3 ? undefined : {
-        stage: _this.windowStage,
-        title: _this.$props.title,
-        titleId: _this.titleId,
-        titleRender: titleRender,
-        closeButton: closeButton,
-        minimizeButton: minimizeButton,
-        maximizeButton: maximizeButton,
-        restoreButton: restoreButton
-      },
-      title: _this.$props.title,
-      titleId: _this.titleId,
-      titleRender: titleRender,
-      onDoubleclick: _this.handleDoubleClick,
-      on: _this.v3 ? undefined : {
-        "doubleclick": _this.handleDoubleClick,
-        "minimizeclick": _this.handleMinimize,
-        "fullscreenclick": _this.handleFullscreen,
-        "restoreclick": _this.handleRestore,
-        "closeclick": _this.handleCloseWindow
-      },
-      onMinimizeclick: _this.handleMinimize,
-      onFullscreenclick: _this.handleFullscreen,
-      onRestoreclick: _this.handleRestore,
-      onCloseclick: _this.handleCloseWindow,
-      closeButton: closeButton,
-      minimizeButton: minimizeButton,
-      maximizeButton: maximizeButton,
-      restoreButton: restoreButton
-    })]), this.windowStage !== windowStage.MINIMIZED ? [h("div", {
-      "class": "k-window-content"
-    }, [defaultSlot]), actions] : null, this.windowStage === windowStage.DEFAULT && this.$props.resizable
-    // @ts-ignore  function children
-    ? h(ResizeHandlers, {
-      onResize: this.handleResize,
-      on: this.v3 ? undefined : {
-        "resize": this.handleResize
-      }
-    }) : null, watermark])]);
-    return this.$props.appendTo ? h("div", [windowElement]) : windowElement;
-  }
-};
-/**
- * @hidden
- */
-var Window = WindowVue2;
-export { Window, WindowVue2 };