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

package/dist/esm/splitter/Splitter.d.ts

@@ -0,0 +1,139 @@
+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 { SplitterPaneProps } from './SplitterPane';
+/**
+ * Represents the onChange event of the Splitter.
+ */
+export interface SplitterOnChangeEvent {
+    /**
+     * The new panes state.
+     */
+    newState: SplitterPaneProps[];
+    /**
+     * Indicates if is the last event during drag. Can be used to optimize performance.
+     */
+    isLast: boolean;
+    /**
+     * The native DOM event.
+     */
+    nativeEvent: any;
+}
+/**
+ * Represents the options of the Splitter.
+ */
+export interface SplitterProps {
+    /**
+     * Sets the options of the Splitter panes ([more information and examples]({% slug panes_splitter %})). Can be used for controlled state.
+     */
+    panes?: SplitterPaneProps[];
+    /**
+     * Sets the initial options of the Splitter panes ([more information and examples]({% slug panes_splitter %})). Can be used for uncontrolled state.
+     */
+    defaultPanes?: SplitterPaneProps[];
+    /**
+     * Specifies the orientation of the panes within the Splitter ([more information and examples]({% slug orientation_splitter %})). Panes in a horizontal Splitter are placed horizontally. Panes in a vertical Splitter are placed vertically.
+     */
+    orientation?: 'vertical' | 'horizontal' | string;
+    /**
+     * Fires after a Splitter pane is resized or collapsed. Useful for updating the pane options and triggering layout calculations on components which are positioned inside the panes.
+     */
+    onChange?: (event: SplitterOnChangeEvent) => void;
+}
+/**
+ * @hidden
+ */
+export interface SplitterState {
+}
+/**
+ * @hidden
+ */
+export interface SplitterComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SplitterMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SplitterData {
+    isDragging: boolean;
+    dragIndex?: number;
+    startTime: number;
+    originalX: number;
+    originalY: number;
+    originalPrevSize: number;
+    originalNextSize: number;
+    currentPanes: SplitterPaneProps[];
+}
+/**
+ * @hidden
+ */
+export interface SplitterAll extends Vue2type, SplitterMethods, SplitterData, SplitterComputed, SplitterState {
+}
+/**
+ * @hidden
+ */
+declare let SplitterVue2: ComponentOptions<SplitterAll, DefaultData<SplitterData>, DefaultMethods<SplitterAll>, SplitterComputed, RecordPropsDefinition<SplitterProps>>;
+/**
+ * Represents the [Kendo UI for Vue Native Splitter component]({% slug overview_splitter %}).
+ *
+ * ```js-no-run
+ * <template>
+ *   <Splitter
+ *     :style="{ height: '340px' }"
+ *     :panes="panes"
+ *     :orientation="'vertical'"
+ *     @change="onChange"
+ *   >
+ *     <template v-slot:first>
+ *       <div class="pane-content">
+ *         <h3>Top Pane</h3>
+ *       </div>
+ *     </template>
+ *     <template v-slot:second>
+ *       <div class="pane-content">
+ *         <h3>Bottom Pane</h3>
+ *       </div>
+ *     </template>
+ *   </Splitter>
+ * </template>
+ *
+ * <script>
+ * import { Splitter } from '@progress/kendo-vue-layout';
+ * import './styles.css';
+ *
+ * export default {
+ *   components: {
+ *     Splitter,
+ *   },
+ *   data() {
+ *     return {
+ *       panes: [
+ *         { size: '40%', containsSplitter: true, content: 'first' },
+ *         { content: 'second' },
+ *       ],
+ *     };
+ *   },
+ *   methods: {
+ *     onChange(event) {
+ *       this.panes = event.newState;
+ *     },
+ *   },
+ * };
+ * </script>
+ * ```
+ *
+ *
+ *
+ * ### props <span class='code'>Readonly&lt;[SplitterProps]({% slug api_layout_splitterprops %})</span>
+ * The props of the Splitter component.
+ */
+declare const Splitter: DefineComponent<SplitterProps, any, SplitterData, SplitterComputed, SplitterMethods, {}, {}, {}, string, SplitterProps, SplitterProps, {}>;
+export { Splitter, SplitterVue2 };

package/dist/esm/splitter/Splitter.js

@@ -0,0 +1,466 @@
+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 { SplitterPane } from './SplitterPane.js';
+import { SplitterBar } from './SplitterBar.js';
+import { classNames, getListeners, templateRendering } from '@progress/kendo-vue-common';
+import { validatePackage } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata.js';
+/**
+ * @hidden
+ */
+
+var PANE_DEFAULTS = {
+  collapsible: false,
+  collapsed: false,
+  resizable: true,
+  scrollable: true
+};
+/**
+ * @hidden
+ */
+
+var DOUBLE_CLICK_WAIT_TIME = 150;
+/**
+ * @hidden
+ */
+
+var SplitterVue2 = {
+  name: 'KendoSplitter',
+  props: {
+    orientation: {
+      type: String,
+      default: 'horizontal',
+      validator: function validator(value) {
+        return ['vertical', 'horizontal'].includes(value);
+      }
+    },
+    panes: Array,
+    defaultPanes: Array
+  },
+  computed: {
+    isControlledState: function isControlledState() {
+      return this.$props.panes !== undefined;
+    },
+    computedPanes: function computedPanes() {
+      // return this.panesDuringOnChange !== undefined ?
+      //     this.panesDuringOnChange :
+      return this.isControlledState ? this.$props.panes : this.currentPanes;
+    },
+    isRtl: function isRtl() {
+      return this.$el && getComputedStyle(this.$el).direction === 'rtl' || false;
+    }
+  },
+  created: function created() {
+    validatePackage(packageMetadata); // this.panesDuringOnChange?: SplitterPaneProps[];
+  },
+  data: function data() {
+    return {
+      isDragging: false,
+      dragIndex: undefined,
+      startTime: 0,
+      originalX: 0,
+      originalY: 0,
+      originalPrevSize: 0,
+      originalNextSize: 0,
+      currentPanes: this.$props.defaultPanes || []
+    };
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var panesOptions = this.panesOptions();
+    var className = classNames('k-widget', 'k-splitter', 'k-splitter-flex', "k-splitter-".concat(this.orientation));
+    this.validatePanes(panesOptions);
+
+    var mapSplitterPanes = function mapSplitterPanes(panes) {
+      return panes.map(function (pane, index) {
+        var content = templateRendering.call(this, pane.content, getListeners.call(this));
+        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: this.orientation,
+              prev: pane,
+              next: next
+            },
+            orientation: this.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,
+          containsSplitter: pane.containsSplitter,
+          attrs: this.v3 ? undefined : {
+            containsSplitter: pane.containsSplitter,
+            size: pane.size,
+            min: pane.min,
+            max: pane.max,
+            resizable: pane.resizable,
+            collapsible: pane.collapsible,
+            collapsed: pane.collapsed,
+            scrollable: pane.scrollable,
+            keepMounted: pane.keepMounted,
+            content: content
+          },
+          size: pane.size,
+          min: pane.min,
+          max: pane.max,
+          resizable: pane.resizable,
+          collapsible: pane.collapsible,
+          collapsed: pane.collapsed,
+          scrollable: pane.scrollable,
+          keepMounted: pane.keepMounted,
+          content: content
+        });
+        return [splitterPane, splitterBar];
+      }, this);
+    };
+
+    return h("div", {
+      "class": className
+    }, [mapSplitterPanes.call(this, panesOptions)]);
+  },
+  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) {
+      var orientation = this.orientation;
+      var paneOptions = [];
+
+      for (var index = 0; index < panes.length; index++) {
+        var overlay = false;
+
+        if (this.isDragging && this.dragIndex !== undefined) {
+          overlay = this.dragIndex === index || this.dragIndex + 1 === index;
+        }
+
+        paneOptions.push(__assign(__assign(__assign({}, PANE_DEFAULTS), {
+          orientation: orientation,
+          overlay: overlay
+        }), panes[index]));
+      }
+
+      return paneOptions;
+    },
+    onBarToggle: function onBarToggle(index, event) {
+      var panesOptions = this.panesOptions();
+      var updatedState = panesOptions.map(function (pane, idx) {
+        var paneProps = pane;
+
+        if (idx === index) {
+          return __assign(__assign({}, paneProps), {
+            collapsed: !pane.collapsed
+          });
+        } else {
+          return __assign({}, paneProps);
+        }
+      });
+      this.$emit('change', {
+        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.isDragging = true;
+        this.dragIndex = index;
+        this.startTime = time;
+        this.originalX = pageX;
+        this.originalY = pageY;
+        this.originalPrevSize = this.elementSize(prevElement);
+        this.originalNextSize = this.elementSize(nextElement);
+        return;
+      }
+
+      var _b = this.$data,
+          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.$el) {
+        return 0;
+      }
+
+      return this.elementSize(this.$el, 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() {
+      return this.mapPaneOptions(this.computedPanes);
+    },
+    resetDragState: function resetDragState() {
+      this.isDragging = false;
+      this.dragIndex = undefined;
+      this.startTime = 0;
+      this.originalX = 0;
+      this.originalY = 0;
+      this.originalPrevSize = 0;
+      this.originalNextSize = 0;
+    },
+    elementSize: function elementSize(el, isContainer) {
+      var sizeType = isContainer ? 'client' : 'offset';
+
+      if (this.orientation === 'vertical') {
+        return el["".concat(sizeType, "Height")];
+      } else {
+        return el["".concat(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();
+      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 = 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.currentPanes = updatedState;
+      }
+
+      this.$emit('change', {
+        newState: updatedState,
+        isLast: isLast,
+        nativeEvent: event
+      });
+      this.panesDuringOnChange = undefined;
+    }
+  }
+};
+/**
+ * Represents the [Kendo UI for Vue Native Splitter component]({% slug overview_splitter %}).
+ *
+ * ```js-no-run
+ * <template>
+ *   <Splitter
+ *     :style="{ height: '340px' }"
+ *     :panes="panes"
+ *     :orientation="'vertical'"
+ *     @change="onChange"
+ *   >
+ *     <template v-slot:first>
+ *       <div class="pane-content">
+ *         <h3>Top Pane</h3>
+ *       </div>
+ *     </template>
+ *     <template v-slot:second>
+ *       <div class="pane-content">
+ *         <h3>Bottom Pane</h3>
+ *       </div>
+ *     </template>
+ *   </Splitter>
+ * </template>
+ *
+ * <script>
+ * import { Splitter } from '@progress/kendo-vue-layout';
+ * import './styles.css.js';
+ *
+ * export default {
+ *   components: {
+ *     Splitter,
+ *   },
+ *   data() {
+ *     return {
+ *       panes: [
+ *         { size: '40%', containsSplitter: true, content: 'first' },
+ *         { content: 'second' },
+ *       ],
+ *     };
+ *   },
+ *   methods: {
+ *     onChange(event) {
+ *       this.panes = event.newState;
+ *     },
+ *   },
+ * };
+ * </script>
+ * ```
+ *
+ *
+ *
+ * ### props <span class='code'>Readonly&lt;[SplitterProps]({% slug api_layout_splitterprops %})</span>
+ * The props of the Splitter component.
+ */
+
+var Splitter = SplitterVue2;
+export { Splitter, SplitterVue2 };

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

@@ -0,0 +1,56 @@
+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 {
+}
+/**
+ * @hidden
+ */
+declare let SplitterBarVue2: ComponentOptions<SplitterBarAll, DefaultData<SplitterBarData>, DefaultMethods<SplitterBarAll>, SplitterBarComputed, RecordPropsDefinition<SplitterBarProps>>;
+/**
+ * @hidden
+ */
+declare const SplitterBar: DefineComponent<SplitterBarProps, any, SplitterBarData, SplitterBarComputed, SplitterBarMethods, {}, {}, {}, string, SplitterBarProps, SplitterBarProps, {}>;
+export { SplitterBar, SplitterBarVue2 };