@progress/kendo-vue-layout 3.1.1 → 3.1.3-dev.202203311441

package/dist/es/splitter/Splitter.js

@@ -0,0 +1,439 @@
+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);
+};
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+import { SplitterPane } from './SplitterPane';
+import { SplitterBar } from './SplitterBar';
+import { classNames } from '@progress/kendo-vue-common';
+import { validatePackage } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata';
+/**
+ * @hidden
+ */
+
+var PANE_DEFAULTS = {
+  collapsible: false,
+  collapsed: false,
+  resizable: true,
+  scrollable: true
+};
+/**
+ * @hidden
+ */
+
+var DOUBLE_CLICK_WAIT_TIME = 150; // tslint:enable:max-line-length
+
+var SplitterVue2 = {
+  name: 'KendoSplitter',
+  props: {
+    orientation: {
+      type: String,
+      default: 'vertical',
+      validator: function validator(value) {
+        return ['vertical', 'horizontal'].includes(value);
+      }
+    },
+    panes: Array,
+    defaultPanes: Array
+  },
+  computed: {
+    isControlledState: function isControlledState() {
+      return this.$props.panes !== undefined;
+    },
+    panes: function panes() {
+      return this.panesDuringOnChange !== undefined ? this.panesDuringOnChange : this.isControlledState ? this.$props.panes : this.state.panes;
+    },
+    orientation: function orientation() {
+      return this.$props.orientation || 'horizontal';
+    },
+    isRtl: function isRtl() {
+      return this._container && getComputedStyle(this._container).direction === 'rtl' || false;
+    } //  panesContent(): React.ReactNode[] {
+    //     return React.Children.toArray(this.$props.children).filter(c => c);
+    // },
+
+  },
+  created: function created() {
+    validatePackage(packageMetadata); // private panesDuringOnChange?: SplitterPaneProps[];
+  },
+  data: function data() {
+    return {
+      isDragging: false,
+      dragIndex: undefined,
+      startTime: 0,
+      originalX: 0,
+      originalY: 0,
+      originalPrevSize: 0,
+      originalNextSize: 0,
+      panes: this.$props.defaultPanes || []
+    };
+  },
+  // @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 panesContent = this.panesContent;
+    var panesOptions = this.panesOptions(panesContent);
+    var className = classNames('k-widget', 'k-splitter', 'k-splitter-flex', "k-splitter-" + this.orientation, this.$props.className);
+    this.validatePanes(panesOptions);
+    return h("div", {
+      style: this.$props.style,
+      ref: function ref(_ref) {
+        return _this._container = _ref;
+      },
+      "class": className
+    }, [this.mapSplitterPanes(panesOptions, panesContent)]);
+  },
+  methods: {
+    validatePanes: function validatePanes(panesOptions) {
+      var withoutSize = panesOptions.filter(function (pane) {
+        return pane.size === undefined;
+      });
+
+      if (!withoutSize.length) {
+        throw new Error('The Splitter should have at least one pane without a set size.');
+      }
+    },
+    mapPaneOptions: function mapPaneOptions(panes, panesContent) {
+      var orientation = this.orientation;
+      var _a = this.state,
+          dragIndex = _a.dragIndex,
+          isDragging = _a.isDragging;
+      var paneOptions = [];
+
+      for (var index = 0; index < panesContent.length; index++) {
+        var containsSplitter = false;
+        var paneContent = panesContent[index]; // if (React.isValidElement(paneContent)) {
+        //     containsSplitter = (paneContent.type as React.ComponentType).displayName === 'Splitter';
+        // }
+
+        var overlay = false;
+
+        if (isDragging && dragIndex !== undefined) {
+          overlay = dragIndex === index || dragIndex + 1 === index;
+        }
+
+        paneOptions.push(__assign(__assign(__assign({}, PANE_DEFAULTS), {
+          orientation: orientation,
+          containsSplitter: containsSplitter,
+          overlay: overlay
+        }), (panes || [])[index]));
+      }
+
+      return paneOptions;
+    },
+    mapSplitterPanes: function mapSplitterPanes(panes, panesContent) {
+      var _this = this;
+
+      return panes.map(function (pane, index) {
+        var splitterBar;
+        var paneKey = index * 2;
+        var barKey = paneKey + 1;
+
+        if (index + 1 < panes.length) {
+          var next = panes[index + 1];
+          splitterBar = h(SplitterBar, {
+            key: barKey,
+            index: index,
+            attrs: this.v3 ? undefined : {
+              index: index,
+              orientation: pane.orientation,
+              prev: pane,
+              next: next
+            },
+            orientation: pane.orientation,
+            prev: pane,
+            next: next,
+            onDrag: _this.onBarDragResize,
+            on: this.v3 ? undefined : {
+              "drag": _this.onBarDragResize,
+              "toggle": _this.onBarToggle,
+              "keyboardResize": _this.onBarKeyboardResize
+            },
+            onToggle: _this.onBarToggle,
+            onKeyboardResize: _this.onBarKeyboardResize
+          });
+        }
+
+        var splitterPane = h(SplitterPane, {
+          key: paneKey
+        }, [panesContent[index]]);
+        return [splitterPane, splitterBar];
+      });
+    },
+    onBarToggle: function onBarToggle(index, event) {
+      var _this = this;
+
+      var panesOptions = this.panesOptions(this.panesContent);
+      var updatedState = panesOptions.map(function (pane, idx) {
+        var paneProps = _this.getPaneProps(pane);
+
+        if (idx === index) {
+          return __assign(__assign({}, paneProps), {
+            collapsed: !pane.collapsed
+          });
+        } else {
+          return __assign({}, paneProps);
+        }
+      });
+
+      if (this.$props.onChange) {
+        this.$props.onChange({
+          newState: updatedState,
+          isLast: true,
+          nativeEvent: event
+        });
+      }
+    },
+    onBarDragResize: function onBarDragResize(event, barElement, index, isFirst, isLast) {
+      var time = new Date().getTime();
+      var pageX = event.pageX,
+          pageY = event.pageY;
+
+      var _a = this.surroudingPanes(barElement),
+          prevElement = _a.prevElement,
+          nextElement = _a.nextElement;
+
+      if (!prevElement || !nextElement) {
+        return;
+      }
+
+      if (isFirst) {
+        this.setState({
+          isDragging: true,
+          dragIndex: index,
+          startTime: time,
+          originalX: pageX,
+          originalY: pageY,
+          originalPrevSize: this.elementSize(prevElement),
+          originalNextSize: this.elementSize(nextElement)
+        });
+        return;
+      }
+
+      var _b = this.state,
+          originalPrevSize = _b.originalPrevSize,
+          originalNextSize = _b.originalNextSize,
+          startTime = _b.startTime,
+          originalX = _b.originalX,
+          originalY = _b.originalY;
+
+      if (!isFirst && time - startTime < DOUBLE_CLICK_WAIT_TIME) {
+        if (isLast) {
+          this.resetDragState();
+        }
+
+        return;
+      }
+
+      var delta;
+
+      if (this.orientation === 'vertical') {
+        delta = pageY - originalY;
+      } else if (this.isRtl) {
+        delta = originalX - pageX;
+      } else {
+        delta = pageX - originalX;
+      }
+
+      this.resize(index, index + 1, originalPrevSize, originalNextSize, delta, isLast, event);
+
+      if (isLast) {
+        this.resetDragState();
+      }
+    },
+    onBarKeyboardResize: function onBarKeyboardResize(barElement, index, delta, event) {
+      var _a = this.surroudingPanes(barElement),
+          prevElement = _a.prevElement,
+          nextElement = _a.nextElement;
+
+      var originalPrevSize = this.elementSize(prevElement);
+      var originalNextSize = this.elementSize(nextElement);
+      this.resize(index, index + 1, originalPrevSize, originalNextSize, delta, true, event);
+    },
+    surroudingPanes: function surroudingPanes(barElement) {
+      return {
+        prevElement: barElement.previousElementSibling,
+        nextElement: barElement.nextElementSibling
+      };
+    },
+    containerSize: function containerSize() {
+      if (!this._container) {
+        return 0;
+      }
+
+      return this.elementSize(this._container, true);
+    },
+    isPercent: function isPercent(size) {
+      return /%$/.test(size);
+    },
+    toPixels: function toPixels(size, splitterSize) {
+      var result = parseInt(size, 10);
+
+      if (this.isPercent(size)) {
+        result = splitterSize * result / 100;
+      }
+
+      return result;
+    },
+    panesOptions: function panesOptions(panesContent) {
+      return this.mapPaneOptions(this.panes, panesContent);
+    },
+    resetDragState: function resetDragState() {
+      this.setState({
+        isDragging: false,
+        dragIndex: undefined,
+        startTime: 0,
+        originalX: 0,
+        originalY: 0,
+        originalPrevSize: 0,
+        originalNextSize: 0
+      });
+    },
+    elementSize: function elementSize(el, isContainer) {
+      var sizeType = isContainer ? 'client' : 'offset';
+
+      if (this.orientation === 'vertical') {
+        return el[sizeType + "Height"];
+      } else {
+        return el[sizeType + "Width"];
+      }
+    },
+    clamp: function clamp(min, max, v) {
+      return Math.min(max, Math.max(min, v));
+    },
+    fixedSize: function fixedSize(size) {
+      return size && size.length > 0;
+    },
+    resize: function resize(prevIndex, nextIndex, originalPrevSize, originalNextSize, delta, isLast, event) {
+      var _this = this;
+
+      var panesOptions = this.panesOptions(this.panesContent);
+      var prevOptions = panesOptions[prevIndex];
+      var nextOptions = panesOptions[nextIndex];
+      var total = originalPrevSize + originalNextSize;
+      var splitterSize = this.containerSize();
+
+      var px = function px(s) {
+        return _this.toPixels(s, splitterSize);
+      };
+
+      var prevDragState = {
+        index: prevIndex,
+        initialSize: originalPrevSize,
+        min: px(prevOptions.min) || total - px(nextOptions.max) || 0,
+        max: px(prevOptions.max) || total - px(nextOptions.min) || total
+      };
+      var nextDragState = {
+        index: nextIndex,
+        initialSize: originalNextSize,
+        min: px(nextOptions.min) || total - px(prevOptions.max) || 0,
+        max: px(nextOptions.max) || total - px(prevOptions.min) || total
+      };
+
+      var resize = function resize(paneState, change) {
+        var pane = panesOptions[paneState.index];
+
+        var newSize = _this.clamp(paneState.min, paneState.max, paneState.initialSize + change);
+
+        if (_this.isPercent(pane.size || '')) {
+          return 100 * newSize / splitterSize + '%';
+        } else {
+          return newSize + 'px';
+        }
+      };
+
+      var prevSize;
+      var nextSize;
+
+      if (this.fixedSize(prevOptions.size) && this.fixedSize(nextOptions.size)) {
+        prevSize = resize(prevDragState, delta);
+        nextSize = resize(nextDragState, -delta);
+      } else if (nextOptions.collapsible || this.fixedSize(nextOptions.size)) {
+        nextSize = resize(nextDragState, -delta);
+      } else {
+        prevSize = resize(prevDragState, delta);
+      }
+
+      var updatedState = panesOptions.map(function (pane, idx) {
+        var paneProps = _this.getPaneProps(pane);
+
+        if (idx === prevIndex) {
+          return __assign(__assign({}, paneProps), {
+            size: prevSize
+          });
+        } else if (idx === nextIndex) {
+          return __assign(__assign({}, paneProps), {
+            size: nextSize
+          });
+        } else {
+          return __assign({}, paneProps);
+        }
+      });
+      this.panesDuringOnChange = updatedState;
+
+      if (!this.isControlledState) {
+        this.setState({
+          panes: updatedState
+        });
+      }
+
+      if (this.$props.onChange) {
+        this.$props.onChange({
+          newState: updatedState,
+          isLast: isLast,
+          nativeEvent: event
+        });
+      }
+
+      this.panesDuringOnChange = undefined;
+    },
+    getPaneProps: function getPaneProps(pane) {
+      var orientation = pane.orientation,
+          overlay = pane.overlay,
+          containsSplitter = pane.containsSplitter,
+          others = __rest(pane, ["orientation", "overlay", "containsSplitter"]);
+
+      return others;
+    }
+  }
+};
+var Splitter = SplitterVue2;
+export { Splitter, SplitterVue2 };

package/dist/es/splitter/SplitterBar.d.ts

@@ -0,0 +1,50 @@
+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 { SplitterPaneExtendedProps } from './SplitterPane';
+/**
+ * @hidden
+ */
+export interface SplitterBarProps {
+    orientation: 'vertical' | 'horizontal' | string;
+    index: number;
+    prev: SplitterPaneExtendedProps;
+    next: SplitterPaneExtendedProps;
+    onDrag?: (event: any, element: HTMLDivElement, index: number, isFirst: boolean, isLast: boolean) => void;
+    onToggle?: (index: number, nativeEvent: any) => void;
+    onKeyboardResize?: (element: HTMLDivElement, index: number, delta: number, nativeEvent: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface SplitterBarState {
+    draggable: any | null;
+}
+/**
+ * @hidden
+ */
+export interface SplitterBarComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SplitterBarMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SplitterBarData {
+    focused: boolean;
+}
+/**
+ * @hidden
+ */
+export interface SplitterBarAll extends Vue2type, SplitterBarMethods, SplitterBarData, SplitterBarComputed, SplitterBarState {
+}
+declare let SplitterBarVue2: ComponentOptions<SplitterBarAll, DefaultData<SplitterBarData>, DefaultMethods<SplitterBarAll>, SplitterBarComputed, RecordPropsDefinition<SplitterBarProps>>;
+declare const SplitterBar: DefineComponent<SplitterBarProps, any, SplitterBarData, SplitterBarComputed, SplitterBarMethods, {}, {}, {}, string, SplitterBarProps, SplitterBarProps, {}>;
+export { SplitterBar, SplitterBarVue2 };