@progress/kendo-vue-layout 5.3.0-dev.202410141143 → 5.3.0-develop.2

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

@@ -1,139 +0,0 @@
-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/es/splitter/Splitter.js

@@ -1,430 +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 { SplitterPane } from './SplitterPane';
-import { SplitterBar } from './SplitterBar';
-import { classNames, getListeners, isRtl, templateRendering } 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;
-/**
- * @hidden
- */
-var SplitterVue2 = {
-  name: 'KendoSplitter',
-  props: {
-    orientation: {
-      type: String,
-      default: 'horizontal',
-      validator: function validator(value) {
-        return ['vertical', 'horizontal'].includes(value);
-      }
-    },
-    panes: Array,
-    defaultPanes: Array
-  },
-  mounted: function mounted() {
-    this.currentRtl = isRtl(this.$el);
-  },
-  // @ts-ignore
-  emits: {
-    change: null
-  },
-  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;
-    }
-  },
-  created: function created() {
-    validatePackage(packageMetadata);
-    // this.panesDuringOnChange?: SplitterPaneProps[];
-  },
-
-  data: function data() {
-    return {
-      currentRtl: false,
-      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,
-              isRtl: this.currentRtl
-            },
-            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,
-            isRtl: this.currentRtl
-          });
-        }
-        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.currentRtl) {
-        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';
- *
- * 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/es/splitter/SplitterBar.d.ts

@@ -1,54 +0,0 @@
-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;
-    isRtl?: boolean;
-}
-/**
- * @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 };