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

package/dist/esm/splitter/SplitterBar.js

@@ -0,0 +1,289 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { classNames, Draggable, Keys } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var SplitterBarVue2 = {
+  name: 'KendoSplitterBar',
+  // @ts-ignore
+  emits: {
+    drag: null,
+    toggle: null,
+    keyboardresize: null
+  },
+  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;
+  },
+  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
+    };
+  },
+  mounted: function mounted() {
+    if (this.$el) {
+      this.draggable = this.$refs.draggable;
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this2 = this;
+
+    var _a;
+
+    var _this = this;
+
+    var h = gh || createElement;
+    var isDraggable = this.isDraggable;
+    var isStatic = this.isStatic;
+    var isHorizontal = this.isHorizontal;
+    var barClasses = classNames('k-splitbar', (_a = {}, _a['k-focus'] = 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 (// @ts-ignore  function children
+      h(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);
+        },
+        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,
+        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;
+      var index = this.$props.index;
+      var element = 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.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 === Keys.enter) {
+        event.preventDefault();
+        this.onToggle(event);
+      } else if (this.isDraggable) {
+        if (isHorizontal && keyCode === Keys.left) {
+          onKeyboardResize(element, index, -10);
+        } else if (isHorizontal && keyCode === Keys.right) {
+          onKeyboardResize(element, index, 10);
+        } else if (!isHorizontal && keyCode === Keys.up) {
+          onKeyboardResize(element, index, -10);
+        } else if (!isHorizontal && keyCode === 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 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 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));
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var SplitterBar = SplitterBarVue2;
+export { SplitterBar, SplitterBarVue2 };

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

@@ -0,0 +1,93 @@
+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 content of the pane contains Splitter.
+     */
+    containsSplitter: boolean;
+    /**
+     * Specifies if the children of the pane should be mounted when it's in collapsed state.
+     */
+    keepMounted?: boolean;
+    /**
+     * The slot template for the content of the splitter
+     */
+    content?: any;
+}
+/**
+ * @hidden
+ */
+export interface SplitterPaneExtendedProps extends SplitterPaneProps {
+    orientation: 'vertical' | 'horizontal' | string;
+    overlay: 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 {
+}
+/**
+ * @hidden
+ */
+declare let SplitterPaneVue2: ComponentOptions<SplitterPaneAll, DefaultData<SplitterPaneData>, DefaultMethods<SplitterPaneAll>, SplitterPaneComputed, RecordPropsDefinition<SplitterPaneExtendedProps>>;
+/**
+ * @hidden
+ */
+declare const SplitterPane: DefineComponent<SplitterPaneProps, any, SplitterPaneData, SplitterPaneComputed, SplitterPaneMethods, {}, {}, {}, string, SplitterPaneProps, SplitterPaneProps, {}>;
+export { SplitterPane, SplitterPaneVue2 };

package/dist/esm/splitter/SplitterPane.js

@@ -0,0 +1,79 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { classNames, getTemplate } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+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,
+    content: [Object, Function, String]
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    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 = classNames('k-pane', (_a = {}, _a['k-hidden'] = collapsed, _a['hidden'] = collapsed, _a['k-pane-flex'] = containsSplitter, _a['k-pane-static'] = !resizable && !collapsible || fixedSize, _a['k-scrollable'] = scrollable, _a));
+    var content = getTemplate.call(this, {
+      h: h,
+      template: this.$props.content,
+      defaultRendering: null
+    });
+    return h("div", {
+      style: style,
+      "class": paneClasses
+    }, [!collapsed || keepMounted ? content : undefined, overlay ? h("div", {
+      "class": 'k-splitter-overlay k-overlay'
+    }) : undefined]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var SplitterPane = SplitterPaneVue2;
+export { SplitterPane, SplitterPaneVue2 };

package/dist/esm/stepper/Step.d.ts

@@ -0,0 +1,54 @@
+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 { StepProps } from './interfaces/StepProps';
+/**
+ * @hidden
+ */
+export interface StepState {
+}
+/**
+ * @hidden
+ */
+export interface StepComputed {
+    itemClassNames: object;
+    itemStyles: object;
+}
+/**
+ * @hidden
+ */
+export interface StepMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface StepData {
+}
+/**
+ * @hidden
+ */
+export interface StepAll extends Vue2type, StepMethods, StepData, StepComputed, StepState {
+}
+/**
+ * @hidden
+ */
+declare let StepVue2: ComponentOptions<StepAll, DefaultData<StepData>, DefaultMethods<StepAll>, StepComputed, RecordPropsDefinition<StepProps>>;
+/**
+ * Represents the [Kendo UI for Vue Step component]({% slug overview_stepper %}).
+ *
+ * ```jsx
+ * <Step v-bind="props" @change="(e) => props.onChange(e)">
+ * <span class="k-step-indicator" aria-hidden="true">
+ *    <span class="emoji">{{ props.emoji }}</span>
+ * </span>
+ * <span class="k-step-label">
+ *    <span class="k-step-text">{{ props.label }}</span>
+ * </span>
+ * </Step>
+ * ```
+ */
+declare const Step: DefineComponent<StepProps, any, StepData, StepComputed, StepMethods, {}, {}, {}, string, StepProps, StepProps, {}>;
+export { Step, StepVue2 };