@progress/kendo-vue-layout 3.1.3 → 3.1.5-dev.202204110939

package/dist/es/splitter/Splitter.js

@@ -12,19 +12,6 @@ var __assign = this && this.__assign || function () {
   };
 
   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
 
 
@@ -33,7 +20,7 @@ var allVue = Vue;
 var gh = allVue.h;
 import { SplitterPane } from './SplitterPane';
 import { SplitterBar } from './SplitterBar';
-import { classNames } from '@progress/kendo-vue-common';
+import { classNames, getListeners, templateRendering } from '@progress/kendo-vue-common';
 import { validatePackage } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 /**
@@ -57,7 +44,7 @@ var SplitterVue2 = {
   props: {
     orientation: {
       type: String,
-      default: 'vertical',
+      default: 'horizontal',
       validator: function validator(value) {
         return ['vertical', 'horizontal'].includes(value);
       }
@@ -69,21 +56,17 @@ var SplitterVue2 = {
     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';
+    computedPanes: function computedPanes() {
+      // return this.panesDuringOnChange !== undefined ?
+      //     this.panesDuringOnChange :
+      return this.isControlledState ? this.$props.panes : this.currentPanes;
     },
     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);
-    // },
-
+      return this.$el && getComputedStyle(this.$el).direction === 'rtl' || false;
+    }
   },
   created: function created() {
-    validatePackage(packageMetadata); // private panesDuringOnChange?: SplitterPaneProps[];
+    validatePackage(packageMetadata); // this.panesDuringOnChange?: SplitterPaneProps[];
   },
   data: function data() {
     return {
@@ -94,7 +77,7 @@ var SplitterVue2 = {
       originalY: 0,
       originalPrevSize: 0,
       originalNextSize: 0,
-      panes: this.$props.defaultPanes || []
+      currentPanes: this.$props.defaultPanes || []
     };
   },
   // @ts-ignore
@@ -106,63 +89,14 @@ var SplitterVue2 = {
   },
   // @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);
+    var panesOptions = this.panesOptions();
+    var className = classNames('k-widget', 'k-splitter', 'k-splitter-flex', "k-splitter-" + this.orientation);
     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;
 
+    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;
@@ -174,36 +108,90 @@ var SplitterVue2 = {
             index: index,
             attrs: this.v3 ? undefined : {
               index: index,
-              orientation: pane.orientation,
+              orientation: this.orientation,
               prev: pane,
               next: next
             },
-            orientation: pane.orientation,
+            orientation: this.orientation,
             prev: pane,
             next: next,
-            onDrag: _this.onBarDragResize,
+            onDrag: this.onBarDragResize,
             on: this.v3 ? undefined : {
-              "drag": _this.onBarDragResize,
-              "toggle": _this.onBarToggle,
-              "keyboardResize": _this.onBarKeyboardResize
+              "drag": this.onBarDragResize,
+              "toggle": this.onBarToggle,
+              "keyboardresize": this.onBarKeyboardResize
             },
-            onToggle: _this.onBarToggle,
-            onKeyboardResize: _this.onBarKeyboardResize
+            onToggle: this.onBarToggle,
+            onKeyboardresize: this.onBarKeyboardResize
           });
         }
 
         var splitterPane = h(SplitterPane, {
-          key: paneKey
-        }, [panesContent[index]]);
+          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.');
+      }
     },
-    onBarToggle: function onBarToggle(index, event) {
-      var _this = this;
+    mapPaneOptions: function mapPaneOptions(panes) {
+      var orientation = this.orientation;
+      var paneOptions = [];
 
-      var panesOptions = this.panesOptions(this.panesContent);
+      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 = _this.getPaneProps(pane);
+        var paneProps = pane;
 
         if (idx === index) {
           return __assign(__assign({}, paneProps), {
@@ -213,14 +201,11 @@ var SplitterVue2 = {
           return __assign({}, paneProps);
         }
       });
-
-      if (this.$props.onChange) {
-        this.$props.onChange({
-          newState: updatedState,
-          isLast: true,
-          nativeEvent: event
-        });
-      }
+      this.$emit('change', {
+        newState: updatedState,
+        isLast: true,
+        nativeEvent: event
+      });
     },
     onBarDragResize: function onBarDragResize(event, barElement, index, isFirst, isLast) {
       var time = new Date().getTime();
@@ -236,19 +221,17 @@ var SplitterVue2 = {
       }
 
       if (isFirst) {
-        this.setState({
-          isDragging: true,
-          dragIndex: index,
-          startTime: time,
-          originalX: pageX,
-          originalY: pageY,
-          originalPrevSize: this.elementSize(prevElement),
-          originalNextSize: this.elementSize(nextElement)
-        });
+        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.state,
+      var _b = this.$data,
           originalPrevSize = _b.originalPrevSize,
           originalNextSize = _b.originalNextSize,
           startTime = _b.startTime,
@@ -295,11 +278,11 @@ var SplitterVue2 = {
       };
     },
     containerSize: function containerSize() {
-      if (!this._container) {
+      if (!this.$el) {
         return 0;
       }
 
-      return this.elementSize(this._container, true);
+      return this.elementSize(this.$el, true);
     },
     isPercent: function isPercent(size) {
       return /%$/.test(size);
@@ -313,19 +296,17 @@ var SplitterVue2 = {
 
       return result;
     },
-    panesOptions: function panesOptions(panesContent) {
-      return this.mapPaneOptions(this.panes, panesContent);
+    panesOptions: function panesOptions() {
+      return this.mapPaneOptions(this.computedPanes);
     },
     resetDragState: function resetDragState() {
-      this.setState({
-        isDragging: false,
-        dragIndex: undefined,
-        startTime: 0,
-        originalX: 0,
-        originalY: 0,
-        originalPrevSize: 0,
-        originalNextSize: 0
-      });
+      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';
@@ -345,7 +326,7 @@ var SplitterVue2 = {
     resize: function resize(prevIndex, nextIndex, originalPrevSize, originalNextSize, delta, isLast, event) {
       var _this = this;
 
-      var panesOptions = this.panesOptions(this.panesContent);
+      var panesOptions = this.panesOptions();
       var prevOptions = panesOptions[prevIndex];
       var nextOptions = panesOptions[nextIndex];
       var total = originalPrevSize + originalNextSize;
@@ -393,7 +374,7 @@ var SplitterVue2 = {
       }
 
       var updatedState = panesOptions.map(function (pane, idx) {
-        var paneProps = _this.getPaneProps(pane);
+        var paneProps = pane;
 
         if (idx === prevIndex) {
           return __assign(__assign({}, paneProps), {
@@ -410,28 +391,15 @@ var SplitterVue2 = {
       this.panesDuringOnChange = updatedState;
 
       if (!this.isControlledState) {
-        this.setState({
-          panes: updatedState
-        });
-      }
-
-      if (this.$props.onChange) {
-        this.$props.onChange({
-          newState: updatedState,
-          isLast: isLast,
-          nativeEvent: event
-        });
+        this.currentPanes = updatedState;
       }
 
+      this.$emit('change', {
+        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;
     }
   }
 };

package/dist/es/splitter/SplitterBar.js

@@ -6,6 +6,12 @@ import { classNames, Draggable, Keys } from '@progress/kendo-vue-common'; // tsl
 
 var SplitterBarVue2 = {
   name: 'KendoSplitterBar',
+  // @ts-ignore
+  emits: {
+    drag: null,
+    toggle: null,
+    keyboardresize: null
+  },
   props: {
     orientation: {
       type: String,
@@ -20,13 +26,10 @@ var SplitterBarVue2 = {
   },
   created: function created() {
     this.draggable = null;
-    this.state = {
-      focused: false
-    };
   },
   computed: {
     isStatic: function isStatic() {
-      var _a = this.props,
+      var _a = this.$props,
           prev = _a.prev,
           next = _a.next;
       var betweenResizablePanes = prev.resizable && next.resizable;
@@ -34,7 +37,7 @@ var SplitterBarVue2 = {
       return !betweenResizablePanes && !nearCollapsiblePane;
     },
     isDraggable: function isDraggable() {
-      var _a = this.props,
+      var _a = this.$props,
           prev = _a.prev,
           next = _a.next;
       var betweenResizablePanes = prev.resizable && next.resizable;
@@ -42,7 +45,7 @@ var SplitterBarVue2 = {
       return !!betweenResizablePanes && !nearCollapsedPane;
     },
     isHorizontal: function isHorizontal() {
-      return this.props.orientation === 'horizontal';
+      return this.$props.orientation === 'horizontal';
     }
   },
   data: function data() {
@@ -50,6 +53,11 @@ var SplitterBarVue2 = {
       focused: false
     };
   },
+  mounted: function mounted() {
+    if (this.$el) {
+      this.draggable = this.$refs.draggable;
+    }
+  },
   // @ts-ignore
   setup: !gh ? undefined : function () {
     var v3 = !!gh;
@@ -59,6 +67,8 @@ var SplitterBarVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
+    var _this2 = this;
+
     var _a;
 
     var _this = this;
@@ -67,72 +77,112 @@ var SplitterBarVue2 = {
     var isDraggable = this.isDraggable;
     var isStatic = this.isStatic;
     var isHorizontal = this.isHorizontal;
-    var barClasses = classNames('k-splitbar', (_a = {}, _a['k-state-focused'] = this.state.focused, _a['k-splitbar-horizontal'] = isHorizontal, _a['k-splitbar-vertical'] = !isHorizontal, _a['k-splitbar-draggable-horizontal'] = isHorizontal && isDraggable, _a['k-splitbar-draggable-vertical'] = !isHorizontal && isDraggable, _a['k-splitbar-static-horizontal'] = isHorizontal && isStatic, _a['k-splitbar-static-vertical'] = !isHorizontal && isStatic, _a));
+    var barClasses = classNames('k-splitbar', (_a = {}, _a['k-state-focused'] = this.focused, _a['k-splitbar-horizontal'] = isHorizontal, _a['k-splitbar-vertical'] = !isHorizontal, _a['k-splitbar-draggable-horizontal'] = isHorizontal && isDraggable, _a['k-splitbar-draggable-vertical'] = !isHorizontal && isDraggable, _a['k-splitbar-static-horizontal'] = isHorizontal && isStatic, _a['k-splitbar-static-vertical'] = !isHorizontal && isStatic, _a));
     var previousArrowClass = this.previousArrowClass(isHorizontal);
     var nextArrowClass = this.nextArrowClass(isHorizontal);
-    return h(Draggable, {
-      onPress: function onPress(event) {
-        return _this.onDrag(event, true, false);
-      },
-      on: this.v3 ? undefined : {
-        "press": function onPress(event) {
+    return (// @ts-ignore  function children
+      h(Draggable, {
+        onPress: function onPress(event) {
           return _this.onDrag(event, true, false);
         },
-        "drag": function drag(event) {
+        on: this.v3 ? undefined : {
+          "press": function onPress(event) {
+            return _this.onDrag(event, true, false);
+          },
+          "drag": function drag(event) {
+            return _this.onDrag(event, false, false);
+          },
+          "release": function release(event) {
+            return _this.onDrag(event, false, true);
+          }
+        },
+        onDrag: function drag(event) {
           return _this.onDrag(event, false, false);
         },
-        "release": function release(event) {
+        onRelease: function release(event) {
           return _this.onDrag(event, false, true);
-        }
-      },
-      onDrag: function drag(event) {
-        return _this.onDrag(event, false, false);
-      },
-      onRelease: function release(event) {
-        return _this.onDrag(event, false, true);
-      }
-    }, [h("div", {
-      tabIndex: isStatic ? -1 : 0,
-      attrs: this.v3 ? undefined : {
+        },
+        ref: 'draggable'
+      }, this.v3 ? function () {
+        return [h("div", {
+          tabIndex: isStatic ? -1 : 0,
+          attrs: _this2.v3 ? undefined : {
+            tabIndex: isStatic ? -1 : 0,
+            role: 'separator'
+          },
+          role: 'separator',
+          "class": barClasses,
+          style: {
+            touchAction: 'none'
+          },
+          onFocusin: _this2.onFocus,
+          on: _this2.v3 ? undefined : {
+            "focusin": _this2.onFocus,
+            "focusout": _this2.onBlur,
+            "dblclick": _this2.onToggle,
+            "keydown": _this2.onKeyDown
+          },
+          onFocusout: _this2.onBlur,
+          onDblclick: _this2.onToggle,
+          onKeydown: _this2.onKeyDown
+        }, [h("div", {
+          "class": previousArrowClass,
+          onClick: _this2.onPrevToggle,
+          on: _this2.v3 ? undefined : {
+            "click": _this2.onPrevToggle
+          }
+        }), h("div", {
+          "class": 'k-resize-handle'
+        }), h("div", {
+          "class": nextArrowClass,
+          onClick: _this2.onNextToggle,
+          on: _this2.v3 ? undefined : {
+            "click": _this2.onNextToggle
+          }
+        })])];
+      } : [h("div", {
         tabIndex: isStatic ? -1 : 0,
-        role: 'separator'
-      },
-      role: 'separator',
-      "class": barClasses,
-      style: {
-        touchAction: 'none'
-      },
-      onFocus: this.onFocus,
-      on: this.v3 ? undefined : {
-        "focus": this.onFocus,
-        "blur": this.onBlur,
-        "dblclick": this.onToggle,
-        "keydown": this.onKeyDown
-      },
-      onBlur: this.onBlur,
-      onDblclick: this.onToggle,
-      onKeydown: this.onKeyDown
-    }, [h("div", {
-      "class": previousArrowClass,
-      onClick: this.onPrevToggle,
-      on: this.v3 ? undefined : {
-        "click": this.onPrevToggle
-      }
-    }), h("div", {
-      "class": 'k-resize-handle'
-    }), h("div", {
-      "class": nextArrowClass,
-      onClick: this.onNextToggle,
-      on: this.v3 ? undefined : {
-        "click": this.onNextToggle
-      }
-    })])]);
+        attrs: _this2.v3 ? undefined : {
+          tabIndex: isStatic ? -1 : 0,
+          role: 'separator'
+        },
+        role: 'separator',
+        "class": barClasses,
+        style: {
+          touchAction: 'none'
+        },
+        onFocusin: _this2.onFocus,
+        on: _this2.v3 ? undefined : {
+          "focusin": _this2.onFocus,
+          "focusout": _this2.onBlur,
+          "dblclick": _this2.onToggle,
+          "keydown": _this2.onKeyDown
+        },
+        onFocusout: _this2.onBlur,
+        onDblclick: _this2.onToggle,
+        onKeydown: _this2.onKeyDown
+      }, [h("div", {
+        "class": previousArrowClass,
+        onClick: _this2.onPrevToggle,
+        on: _this2.v3 ? undefined : {
+          "click": _this2.onPrevToggle
+        }
+      }), h("div", {
+        "class": 'k-resize-handle'
+      }), h("div", {
+        "class": nextArrowClass,
+        onClick: _this2.onNextToggle,
+        on: _this2.v3 ? undefined : {
+          "click": _this2.onNextToggle
+        }
+      })])])
+    );
   },
   methods: {
     onDrag: function onDrag(data, isFirst, isLast) {
-      var event = data.event;
-      var index = this.props.index;
-      var element = this.$el; // this.draggable && this.draggable.element;
+      var event = data;
+      var index = this.$props.index;
+      var element = this.draggable && this.draggable.element;
 
       if (!isLast && event) {
         event.originalEvent.preventDefault();
@@ -149,7 +199,7 @@ var SplitterBarVue2 = {
       this.focused = false;
     },
     onToggle: function onToggle(event) {
-      var _a = this.props,
+      var _a = this.$props,
           index = _a.index,
           prev = _a.prev,
           next = _a.next;
@@ -159,7 +209,7 @@ var SplitterBarVue2 = {
       }
     },
     onPrevToggle: function onPrevToggle(event) {
-      var _a = this.props,
+      var _a = this.$props,
           index = _a.index,
           prev = _a.prev;
 
@@ -168,7 +218,7 @@ var SplitterBarVue2 = {
       }
     },
     onNextToggle: function onNextToggle(event) {
-      var _a = this.props,
+      var _a = this.$props,
           index = _a.index,
           next = _a.next;
 
@@ -181,8 +231,8 @@ var SplitterBarVue2 = {
 
       var keyCode = event && event.keyCode;
       var isHorizontal = this.isHorizontal;
-      var index = this.props.index;
-      var element = this.$el; // this.draggable && this.draggable.element;
+      var index = this.$props.index;
+      var element = this.draggable && this.draggable.element;
 
       var onKeyboardResize = function onKeyboardResize(el, idx, offset) {
         event.preventDefault();
@@ -212,7 +262,7 @@ var SplitterBarVue2 = {
     previousArrowClass: function previousArrowClass(isHorizontal) {
       var _a;
 
-      var prev = this.props.prev;
+      var prev = this.$props.prev;
       var isCollapsible = prev.collapsible;
       var isCollapsed = prev.collapsed;
       return classNames('k-icon', (_a = {}, _a['k-hidden'] = !isCollapsible, _a['k-collapse-prev'] = isCollapsible, _a['k-i-arrow-60-left'] = isCollapsible && isHorizontal && !isCollapsed, _a['k-i-arrow-60-right'] = isCollapsible && isHorizontal && isCollapsed, _a['k-i-arrow-60-up'] = isCollapsible && !isHorizontal && !isCollapsed, _a['k-i-arrow-60-down'] = isCollapsible && !isHorizontal && isCollapsed, _a));
@@ -220,7 +270,7 @@ var SplitterBarVue2 = {
     nextArrowClass: function nextArrowClass(isHorizontal) {
       var _a;
 
-      var next = this.props.next;
+      var next = this.$props.next;
       var isCollapsible = next.collapsible;
       var isCollapsed = next.collapsed;
       return classNames('k-icon', (_a = {}, _a['k-hidden'] = !isCollapsible, _a['k-collapse-next'] = isCollapsible, _a['k-i-arrow-60-right'] = isCollapsible && isHorizontal && !isCollapsed, _a['k-i-arrow-60-left'] = isCollapsible && isHorizontal && isCollapsed, _a['k-i-arrow-60-down'] = isCollapsible && !isHorizontal && !isCollapsed, _a['k-i-arrow-60-up'] = isCollapsible && !isHorizontal && isCollapsed, _a));