@progress/kendo-vue-dialogs 3.5.0 → 3.5.1-dev.202208150613

package/dist/esm/Window.js

@@ -0,0 +1,664 @@
+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, classNames, Draggable, templateDefinition, getDefaultSlots, templateRendering, getListeners, validatePackage } 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
+  },
+  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;
+      }
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this.windowCoordinatesState = {
+      leftBeforeAction: this.getInitialLeft(),
+      topBeforeAction: this.getInitialTop(),
+      widthBeforeAction: this.getInitialWidth(),
+      heightBeforeAction: this.getInitialHeight()
+    };
+  },
+  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()
+    };
+  },
+  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: {
+    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;
+      }
+    }
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    var classNamesWindow = classNames('k-widget', 'k-window', this.$props.windowClass, {
+      'k-window-minimized': this.currentStage === 'MINIMIZED'
+    });
+    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 windowElement = h("div", {
+      ref: 'wrapper'
+    }, [this.$props.modal && h("div", {
+      "class": "k-overlay"
+    }), h("div", {
+      tabindex: 0,
+      attrs: this.v3 ? undefined : {
+        tabindex: 0
+      },
+      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": classNamesWindow,
+      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,
+          titleRender: titleRender,
+          closeButton: closeButton,
+          minimizeButton: minimizeButton,
+          maximizeButton: maximizeButton,
+          restoreButton: restoreButton
+        },
+        title: _this.$props.title,
+        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,
+        titleRender: titleRender,
+        closeButton: closeButton,
+        minimizeButton: minimizeButton,
+        maximizeButton: maximizeButton,
+        restoreButton: restoreButton
+      },
+      title: _this.$props.title,
+      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-content k-window-content"
+    }, [defaultSlot]) : 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])]);
+    return this.$props.appendTo ? h("div", [windowElement]) : windowElement;
+  }
+};
+/**
+ * @hidden
+ */
+
+var Window = WindowVue2;
+export { Window, WindowVue2 };