@progress/kendo-vue-layout 3.1.1 → 3.1.2-dev.202203221454

package/dist/npm/splitter/SplitterBar.js

@@ -0,0 +1,241 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SplitterBarVue2 = exports.SplitterBar = void 0; // @ts-ignore
+
+var Vue = require("vue");
+
+var allVue = Vue;
+var gh = allVue.h;
+
+var kendo_vue_common_1 = require("@progress/kendo-vue-common"); // tslint:enable:max-line-length
+
+
+var SplitterBarVue2 = {
+  name: 'KendoSplitterBar',
+  props: {
+    orientation: {
+      type: String,
+      default: 'vertical',
+      validator: function validator(value) {
+        return ['vertical', 'horizontal'].includes(value);
+      }
+    },
+    index: Number,
+    prev: Object,
+    next: Object
+  },
+  created: function created() {
+    this.draggable = null;
+    this.state = {
+      focused: false
+    };
+  },
+  computed: {
+    isStatic: function isStatic() {
+      var _a = this.props,
+          prev = _a.prev,
+          next = _a.next;
+      var betweenResizablePanes = prev.resizable && next.resizable;
+      var nearCollapsiblePane = prev.collapsible || next.collapsible;
+      return !betweenResizablePanes && !nearCollapsiblePane;
+    },
+    isDraggable: function isDraggable() {
+      var _a = this.props,
+          prev = _a.prev,
+          next = _a.next;
+      var betweenResizablePanes = prev.resizable && next.resizable;
+      var nearCollapsedPane = prev.collapsed || next.collapsed;
+      return !!betweenResizablePanes && !nearCollapsedPane;
+    },
+    isHorizontal: function isHorizontal() {
+      return this.props.orientation === 'horizontal';
+    }
+  },
+  data: function data() {
+    return {
+      focused: false
+    };
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _a;
+
+    var _this = this;
+
+    var h = gh || createElement;
+    var isDraggable = this.isDraggable;
+    var isStatic = this.isStatic;
+    var isHorizontal = this.isHorizontal;
+    var barClasses = kendo_vue_common_1.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 previousArrowClass = this.previousArrowClass(isHorizontal);
+    var nextArrowClass = this.nextArrowClass(isHorizontal);
+    return h(kendo_vue_common_1.Draggable, {
+      onPress: function onPress(event) {
+        return _this.onDrag(event, true, false);
+      },
+      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);
+      },
+      onRelease: function release(event) {
+        return _this.onDrag(event, false, true);
+      }
+    }, [h("div", {
+      tabIndex: isStatic ? -1 : 0,
+      attrs: this.v3 ? undefined : {
+        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
+      }
+    })])]);
+  },
+  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;
+
+      if (!isLast && event) {
+        event.originalEvent.preventDefault();
+      }
+
+      if (element && !this.isStatic && this.isDraggable) {
+        this.$emit('drag', event, element, index, isFirst, isLast);
+      }
+    },
+    onFocus: function onFocus() {
+      this.focused = true;
+    },
+    onBlur: function onBlur() {
+      this.focused = false;
+    },
+    onToggle: function onToggle(event) {
+      var _a = this.props,
+          index = _a.index,
+          prev = _a.prev,
+          next = _a.next;
+
+      if (prev.collapsible || next.collapsible) {
+        this.$emit('toggle', prev.collapsible ? index : index + 1, event);
+      }
+    },
+    onPrevToggle: function onPrevToggle(event) {
+      var _a = this.props,
+          index = _a.index,
+          prev = _a.prev;
+
+      if (prev.collapsible) {
+        this.$emit('toggle', index, event);
+      }
+    },
+    onNextToggle: function onNextToggle(event) {
+      var _a = this.props,
+          index = _a.index,
+          next = _a.next;
+
+      if (next.collapsible) {
+        this.$emit('toggle', index + 1, event);
+      }
+    },
+    onKeyDown: function onKeyDown(event) {
+      var _this = this;
+
+      var keyCode = event && event.keyCode;
+      var isHorizontal = this.isHorizontal;
+      var index = this.props.index;
+      var element = this.$el; // this.draggable && this.draggable.element;
+
+      var onKeyboardResize = function onKeyboardResize(el, idx, offset) {
+        event.preventDefault();
+
+        _this.$emit('keyboardresize', el, idx, offset, event);
+      };
+
+      if (!element) {
+        return;
+      }
+
+      if (keyCode === kendo_vue_common_1.Keys.enter) {
+        event.preventDefault();
+        this.onToggle(event);
+      } else if (this.isDraggable) {
+        if (isHorizontal && keyCode === kendo_vue_common_1.Keys.left) {
+          onKeyboardResize(element, index, -10);
+        } else if (isHorizontal && keyCode === kendo_vue_common_1.Keys.right) {
+          onKeyboardResize(element, index, 10);
+        } else if (!isHorizontal && keyCode === kendo_vue_common_1.Keys.up) {
+          onKeyboardResize(element, index, -10);
+        } else if (!isHorizontal && keyCode === kendo_vue_common_1.Keys.down) {
+          onKeyboardResize(element, index, 10);
+        }
+      }
+    },
+    previousArrowClass: function previousArrowClass(isHorizontal) {
+      var _a;
+
+      var prev = this.props.prev;
+      var isCollapsible = prev.collapsible;
+      var isCollapsed = prev.collapsed;
+      return kendo_vue_common_1.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));
+    },
+    nextArrowClass: function nextArrowClass(isHorizontal) {
+      var _a;
+
+      var next = this.props.next;
+      var isCollapsible = next.collapsible;
+      var isCollapsed = next.collapsed;
+      return kendo_vue_common_1.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));
+    }
+  }
+};
+exports.SplitterBarVue2 = SplitterBarVue2;
+var SplitterBar = SplitterBarVue2;
+exports.SplitterBar = SplitterBar;

package/dist/npm/splitter/SplitterPane.d.ts

@@ -0,0 +1,109 @@
+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;
+};
+/**
+ * Represents the pane options of the Splitter.
+ */
+export interface SplitterPaneProps {
+    /**
+     * Sets the size of the pane ([see example]({% slug panes_splitter %}#toc-dimensions)). Has to be between the `min` and `max` properties.
+     */
+    size?: string;
+    /**
+     * Sets the minimum possible size of the pane ([see example]({% slug panes_splitter %}#toc-dimensions)).
+     */
+    min?: string;
+    /**
+     * Sets the maximum possible size of the pane ([see example]({% slug panes_splitter %}#toc-dimensions)).
+     */
+    max?: string;
+    /**
+     * Specifies if the user is allowed to resize the pane and provide space for other panes ([see example]({% slug panes_splitter %}#toc-resizing)). If `resizable` is not specified, the resizing of the pane will be enabled.
+     */
+    resizable?: boolean;
+    /**
+     * Specifies if the user is allowed to hide the pane and provide space for other panes ([see example]({% slug panes_splitter %}#toc-collapsing)).
+     */
+    collapsible?: boolean;
+    /**
+     * Specifies the pane collapsed state ([see example]({% slug panes_splitter %}#toc-collapsing)).
+     */
+    collapsed?: boolean;
+    /**
+     * Specifies if overflowing content is scrollable or hidden ([see example]({% slug panes_splitter %}#toc-scrolling)). If `scrollable` is not specified, the content will be scrollable.
+     */
+    scrollable?: boolean;
+    /**
+     * Specifies if the children of the pane should be mounted when it's in collapsed state.
+     */
+    keepMounted?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface SplitterPaneExtendedProps extends SplitterPaneProps {
+    orientation: 'vertical' | 'horizontal' | string;
+    overlay: boolean;
+    containsSplitter: boolean;
+    size?: string;
+    /**
+     * Sets the minimum possible size of the pane ([see example]({% slug panes_splitter %}#toc-dimensions)).
+     */
+    min?: string;
+    /**
+     * Sets the maximum possible size of the pane ([see example]({% slug panes_splitter %}#toc-dimensions)).
+     */
+    max?: string;
+    /**
+     * Specifies if the user is allowed to resize the pane and provide space for other panes ([see example]({% slug panes_splitter %}#toc-resizing)). If `resizable` is not specified, the resizing of the pane will be enabled.
+     */
+    resizable?: boolean;
+    /**
+     * Specifies if the user is allowed to hide the pane and provide space for other panes ([see example]({% slug panes_splitter %}#toc-collapsing)).
+     */
+    collapsible?: boolean;
+    /**
+     * Specifies the pane collapsed state ([see example]({% slug panes_splitter %}#toc-collapsing)).
+     */
+    collapsed?: boolean;
+    /**
+     * Specifies if overflowing content is scrollable or hidden ([see example]({% slug panes_splitter %}#toc-scrolling)). If `scrollable` is not specified, the content will be scrollable.
+     */
+    scrollable?: boolean;
+    /**
+     * Specifies if the children of the pane should be mounted when it's in collapsed state.
+     */
+    keepMounted?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface SplitterPaneState {
+}
+/**
+ * @hidden
+ */
+export interface SplitterPaneComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SplitterPaneMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SplitterPaneData {
+}
+/**
+ * @hidden
+ */
+export interface SplitterPaneAll extends Vue2type, SplitterPaneMethods, SplitterPaneData, SplitterPaneComputed, SplitterPaneState {
+}
+declare let SplitterPaneVue2: ComponentOptions<SplitterPaneAll, DefaultData<SplitterPaneData>, DefaultMethods<SplitterPaneAll>, SplitterPaneComputed, RecordPropsDefinition<SplitterPaneExtendedProps>>;
+declare const SplitterPane: DefineComponent<SplitterPaneProps, any, SplitterPaneData, SplitterPaneComputed, SplitterPaneMethods, {}, {}, {}, string, SplitterPaneProps, SplitterPaneProps, {}>;
+export { SplitterPane, SplitterPaneVue2 };

package/dist/npm/splitter/SplitterPane.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SplitterPaneVue2 = exports.SplitterPane = void 0; // @ts-ignore
+
+var Vue = require("vue");
+
+var allVue = Vue;
+var gh = allVue.h;
+
+var kendo_vue_common_1 = require("@progress/kendo-vue-common"); // tslint:enable:max-line-length
+
+
+var SplitterPaneVue2 = {
+  name: 'KendoSplitterPane',
+  props: {
+    orientation: {
+      type: String,
+      default: function _default() {
+        return undefined;
+      },
+      validator: function validator(value) {
+        return ['vertical', 'horizontal'].includes(value);
+      }
+    },
+    overlay: Boolean,
+    containsSplitter: Boolean,
+    size: String,
+    min: String,
+    max: String,
+    resizable: Boolean,
+    collapsible: Boolean,
+    collapsed: Boolean,
+    scrollable: Boolean,
+    keepMounted: Boolean
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _a;
+
+    var h = gh || createElement;
+    var _b = this.props,
+        size = _b.size,
+        collapsed = _b.collapsed,
+        overlay = _b.overlay,
+        containsSplitter = _b.containsSplitter,
+        collapsible = _b.collapsible,
+        resizable = _b.resizable,
+        scrollable = _b.scrollable,
+        keepMounted = _b.keepMounted;
+    var fixedSize = size && size.length > 0;
+    var style = {
+      flexBasis: size
+    };
+    var paneClasses = kendo_vue_common_1.classNames('k-pane', (_a = {}, _a['k-state-hidden'] = collapsed, _a['hidden'] = collapsed, _a['k-pane-flex'] = containsSplitter, _a['k-pane-static'] = !resizable && !collapsible || fixedSize, _a['k-scrollable'] = scrollable, _a));
+    return h("div", {
+      style: style,
+      "class": paneClasses
+    }, [!collapsed || keepMounted ? this.props.children : undefined, overlay ? h("div", {
+      "class": 'k-splitter-overlay k-overlay'
+    }) : undefined]);
+  }
+};
+exports.SplitterPaneVue2 = SplitterPaneVue2;
+var SplitterPane = SplitterPaneVue2;
+exports.SplitterPane = SplitterPane;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-layout",
   "description": "Kendo UI for Vue Layouts package",
-  "version": "3.1.1",
+  "version": "3.1.2-dev.202203221454",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -37,21 +37,21 @@
     "vue": "^2.6.12 || ^3.0.2"
   },
   "dependencies": {
-    "@progress/kendo-vue-animation": "3.1.1",
-    "@progress/kendo-vue-common": "3.1.1",
-    "@progress/kendo-vue-popup": "3.1.1"
+    "@progress/kendo-vue-animation": "3.1.2-dev.202203221454",
+    "@progress/kendo-vue-common": "3.1.2-dev.202203221454",
+    "@progress/kendo-vue-popup": "3.1.2-dev.202203221454"
   },
   "devDependencies": {
     "@progress/kendo-data-query": "^1.5.0",
     "@progress/kendo-date-math": "^1.5.1",
     "@progress/kendo-drawing": "^1.8.0",
     "@progress/kendo-licensing": "^1.0.1",
-    "@progress/kendo-vue-buttons": "3.1.1",
-    "@progress/kendo-vue-dateinputs": "3.1.1",
-    "@progress/kendo-vue-dropdowns": "3.1.1",
-    "@progress/kendo-vue-inputs": "3.1.1",
-    "@progress/kendo-vue-intl": "3.1.1",
-    "@progress/kendo-vue-progressbars": "3.1.1"
+    "@progress/kendo-vue-buttons": "3.1.2-dev.202203221454",
+    "@progress/kendo-vue-dateinputs": "3.1.2-dev.202203221454",
+    "@progress/kendo-vue-dropdowns": "3.1.2-dev.202203221454",
+    "@progress/kendo-vue-inputs": "3.1.2-dev.202203221454",
+    "@progress/kendo-vue-intl": "3.1.2-dev.202203221454",
+    "@progress/kendo-vue-progressbars": "3.1.2-dev.202203221454"
   },
   "@progress": {
     "friendlyName": "Layouts",