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

package/dist/npm/splitter/Splitter.js

@@ -1,437 +0,0 @@
-"use strict";
-
-var __assign = undefined && undefined.__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);
-};
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SplitterVue2 = exports.Splitter = void 0;
-// @ts-ignore
-var Vue = require("vue");
-var allVue = Vue;
-var gh = allVue.h;
-var isV3 = allVue.version && allVue.version[0] === '3';
-var SplitterPane_1 = require("./SplitterPane");
-var SplitterBar_1 = require("./SplitterBar");
-var kendo_vue_common_1 = require("@progress/kendo-vue-common");
-var kendo_vue_common_2 = require("@progress/kendo-vue-common");
-var package_metadata_1 = require("../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 = (0, kendo_vue_common_1.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() {
-    (0, kendo_vue_common_2.validatePackage)(package_metadata_1.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 = (0, kendo_vue_common_1.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 = kendo_vue_common_1.templateRendering.call(this, pane.content, kendo_vue_common_1.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_1.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_1.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;
-    }
-  }
-};
-exports.SplitterVue2 = SplitterVue2;
-/**
- * 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;
-exports.Splitter = Splitter;

package/dist/npm/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 };