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

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

@@ -35,10 +35,18 @@ export interface SplitterPaneProps {
      * 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
@@ -46,36 +54,6 @@ export interface SplitterPaneProps {
 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

package/dist/es/splitter/SplitterPane.js

@@ -2,7 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
-import { classNames } from '@progress/kendo-vue-common'; // tslint:enable:max-line-length
+import { classNames, getTemplate } from '@progress/kendo-vue-common'; // tslint:enable:max-line-length
 
 var SplitterPaneVue2 = {
   name: 'KendoSplitterPane',
@@ -25,7 +25,8 @@ var SplitterPaneVue2 = {
     collapsible: Boolean,
     collapsed: Boolean,
     scrollable: Boolean,
-    keepMounted: Boolean
+    keepMounted: Boolean,
+    content: [Object, Function, String]
   },
   // @ts-ignore
   setup: !gh ? undefined : function () {
@@ -39,7 +40,7 @@ var SplitterPaneVue2 = {
     var _a;
 
     var h = gh || createElement;
-    var _b = this.props,
+    var _b = this.$props,
         size = _b.size,
         collapsed = _b.collapsed,
         overlay = _b.overlay,
@@ -53,10 +54,15 @@ var SplitterPaneVue2 = {
       flexBasis: size
     };
     var paneClasses = 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));
+    var content = getTemplate.call(this, {
+      h: h,
+      template: this.$props.content,
+      defaultRendering: null
+    });
     return h("div", {
       style: style,
       "class": paneClasses
-    }, [!collapsed || keepMounted ? this.props.children : undefined, overlay ? h("div", {
+    }, [!collapsed || keepMounted ? content : undefined, overlay ? h("div", {
       "class": 'k-splitter-overlay k-overlay'
     }) : undefined]);
   }

package/dist/npm/card/Avatar.js

@@ -84,7 +84,7 @@ var AvatarVue2 = {
       return _a = {
         'k-avatar-bordered': border,
         'k-avatar': true
-      }, _a["k-avatar-" + type] = type, _a["k-avatar-" + (kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-rounded-" + (kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a["k-avatar-" + fillMode] = fillMode, _a["k-avatar-" + fillMode + "-" + themeColor] = Boolean(fillMode && themeColor), _a;
+      }, _a["k-avatar-" + (kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-rounded-" + (kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a["k-avatar-" + fillMode] = fillMode, _a["k-avatar-" + fillMode + "-" + themeColor] = Boolean(fillMode && themeColor), _a;
     },
     innerClass: function innerClass() {
       var _a;

package/dist/npm/main.d.ts

@@ -38,3 +38,12 @@ export * from './menu/components/MenuItemLink';
 export * from './menu/components/MenuItemArrow';
 export * from './menu/models/MenuItemModel';
 export * from './menu/events';
+export * from './splitter/Splitter';
+export * from './splitter/SplitterPane';
+export * from './panelbar/PanelBar';
+export * from './panelbar/PanelBarItem';
+export * from './panelbar/util';
+export * from './panelbar/interfaces/PanelBarProps';
+export * from './panelbar/interfaces/PanelBarItemProps';
+export * from './panelbar/interfaces/RenderPanelBarItem';
+export * from './panelbar/interfaces/PanelBarSelectEventArguments';

package/dist/npm/main.js

@@ -50,3 +50,12 @@ __exportStar(require("./menu/components/MenuItemLink"), exports);
 __exportStar(require("./menu/components/MenuItemArrow"), exports);
 __exportStar(require("./menu/models/MenuItemModel"), exports);
 __exportStar(require("./menu/events"), exports);
+__exportStar(require("./splitter/Splitter"), exports);
+__exportStar(require("./splitter/SplitterPane"), exports);
+__exportStar(require("./panelbar/PanelBar"), exports);
+__exportStar(require("./panelbar/PanelBarItem"), exports);
+__exportStar(require("./panelbar/util"), exports);
+__exportStar(require("./panelbar/interfaces/PanelBarProps"), exports);
+__exportStar(require("./panelbar/interfaces/PanelBarItemProps"), exports);
+__exportStar(require("./panelbar/interfaces/RenderPanelBarItem"), exports);
+__exportStar(require("./panelbar/interfaces/PanelBarSelectEventArguments"), exports);

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-layout',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1648787840,
+    publishDate: 1649669495,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/npm/panelbar/PanelBar.d.ts

@@ -8,10 +8,6 @@ import { PanelBarProps } from './interfaces/PanelBarProps';
  * @hidden
  */
 export interface PanelBarState {
-    focused?: string;
-    wrapperFocused?: boolean;
-    selected?: string;
-    expanded: string[];
 }
 /**
  * @hidden
@@ -29,6 +25,10 @@ export interface PanelBarMethods {
  * @hidden
  */
 export interface PanelBarData {
+    currentFocused?: string;
+    wrapperFocused?: boolean;
+    currentSelected?: string;
+    currentExpanded: string[];
 }
 /**
  * @hidden

package/dist/npm/panelbar/PanelBar.js

@@ -40,6 +40,8 @@ var Vue = require("vue");
 var allVue = Vue;
 var gh = allVue.h;
 
+var PanelBarItem_1 = require("./PanelBarItem");
+
 var util_1 = require("./util");
 
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
@@ -58,25 +60,7 @@ var PanelBarVue2 = {
       type: Boolean,
       default: true
     },
-    // children: function (props: PanelBarProps, propName: any) {
-    //     const prop = props[propName];
-    //     if (prop) {
-    //         if (Array.isArray(prop)) {
-    //             for (let value of prop) {
-    //                 if (!value.type || value.type !== PanelBarItem) {
-    //                     return new Error(
-    //                         'PanelBar children should be either PanelBarItem or Array of PanelBarItem.');
-    //                 }
-    //             }
-    //         } else {
-    //             if (prop.type !== PanelBarItem) {
-    //                 return new Error(
-    //                     'PanelBar child should be either PanelBarItem or Array of PanelBarItem.');
-    //             }
-    //         }
-    //         return null;
-    //     }
-    // },
+    items: Array,
     dir: String,
     selected: String,
     expanded: Array,
@@ -92,47 +76,50 @@ var PanelBarVue2 = {
     keepItemsMounted: Boolean
   },
   created: function created() {
-    // /**
-    //  * @hidden
-    //  */
-    // readonly state: PanelBarState;
-    // private activeDescendant?: string;
-    // private _element: HTMLElement | null = null;
-    // private nextTickId: any;
-    kendo_vue_common_2.validatePackage(package_metadata_1.packageMetadata); // const initialState = getInitialState(props, this.expandMode);
-    // if (!initialState.focused) {
-    //     initialState.focused = getFirstId(props);
-    // }
-    // this.state = initialState;
+    this.activeDescendant = null;
+    kendo_vue_common_2.validatePackage(package_metadata_1.packageMetadata);
+  },
+  data: function data() {
+    var initialState = util_1.getInitialState(this.$props, this.expandMode);
+
+    if (!initialState.currentFocused) {
+      initialState.currentFocused = util_1.getFirstId(this.$props);
+    }
+
+    return initialState;
   },
   computed: {
-    expandMode: function expandMode() {
-      return this.props.expandMode || 'multiple';
-    },
     selectedItem: function selectedItem() {
-      var _a = this.props.selected,
-          selected = _a === void 0 ? this.state.selected : _a;
+      var _a = this.$props.selected,
+          selected = _a === void 0 ? this.currentSelected : _a;
       return selected;
     },
     expandedItems: function expandedItems() {
-      var expanded = this.props.isControlled ? this.props.expanded || [] : this.state.expanded;
+      var expanded = this.$props.isControlled ? this.$props.expanded || [] : this.currentExpanded;
       return expanded;
     },
-    children: function children() {
-      var state = __assign(__assign({}, this.state), {
+    computedItems: function computedItems() {
+      var state = __assign(__assign({
+        currentExpanded: []
+      }, this.$data), {
         selected: this.selectedItem
       });
 
       var renderState = {
-        animation: this.props.animation,
-        keepItemsMounted: this.props.keepItemsMounted,
+        animation: this.$props.animation,
+        keepItemsMounted: this.$props.keepItemsMounted,
         state: state,
         expanded: this.expandedItems,
         handleSelect: this.handleSelect
       };
-      return util_1.renderChildren(); // (renderState);
+      return util_1.renderChildren.call(this, this.items, renderState);
     }
   },
+  provide: function provide() {
+    return {
+      dispatchItemSelect: this.handleSelect
+    };
+  },
   // @ts-ignore
   setup: !gh ? undefined : function () {
     var v3 = !!gh;
@@ -142,36 +129,33 @@ var PanelBarVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
-    var _this = this;
-
     var h = gh || createElement;
-    var ariaProps = {
-      'aria-activedescendant': this.activeDescendant
-    };
-    var className = kendo_vue_common_1.classNames('k-panelbar', this.props.className);
+    var className = kendo_vue_common_1.classNames('k-panelbar', this.$props.className);
     return h("ul", {
-      ref: function ref(div) {
-        _this._element = div;
-      },
-      dir: this.props.dir,
+      dir: this.$props.dir,
       attrs: this.v3 ? undefined : {
-        dir: this.props.dir,
+        dir: this.$props.dir,
         role: 'tree',
-        tabIndex: 0
+        tabIndex: 0,
+        "aria-activedescendant": this.activeDescendant
       },
       role: 'tree',
       tabIndex: 0,
-      onKeyDown: this.handleKeyDown,
+      onKeydown: this.handleKeyDown,
       on: this.v3 ? undefined : {
-        "keyDown": this.handleKeyDown,
+        "keydown": this.handleKeyDown,
         "focus": this.handleWrapperFocus,
         "blur": this.handleWrapperBlur
       },
       onFocus: this.handleWrapperFocus,
       onBlur: this.handleWrapperBlur,
       "class": className,
-      style: this.props.style
-    }, [this.children]);
+      "aria-activedescendant": this.activeDescendant
+    }, [this.computedItems.map(function (item) {
+      return h(PanelBarItem_1.PanelBarItem, __assign({
+        props: this.v3 ? undefined : item
+      }, item));
+    }, this)]);
   },
   methods: {
     handleSelect: function handleSelect(event) {
@@ -181,23 +165,22 @@ var PanelBarVue2 = {
     onSelect: function onSelect(event) {
       var _this = this;
 
-      var flattenChildren = []; // flatChildren(React.Children.toArray(this.children));
-
+      var flattenChildren = util_1.flatChildren(this.computedItems);
       var selectedChild;
       var newExpanded;
       flattenChildren.forEach(function (child) {
-        if (child.props.uniquePrivateKey === (event.uniquePrivateKey || _this.state.focused)) {
+        if (child.uniquePrivateKey === (event.uniquePrivateKey || _this.currentFocused)) {
           selectedChild = child;
         }
       });
 
       switch (this.expandMode) {
         case 'single':
-          newExpanded = __spreadArrays(selectedChild.props.parentUniquePrivateKey, [selectedChild.props.uniquePrivateKey]);
+          newExpanded = __spreadArrays(selectedChild.parentUniquePrivateKey, [selectedChild.uniquePrivateKey]);
 
           if (util_1.isArrayEqual(this.expandedItems, newExpanded)) {
-            if (selectedChild.props.parentUniquePrivateKey) {
-              newExpanded = __spreadArrays(selectedChild.props.parentUniquePrivateKey);
+            if (selectedChild.parentUniquePrivateKey) {
+              newExpanded = __spreadArrays(selectedChild.parentUniquePrivateKey);
             } else {
               newExpanded = [];
             }
@@ -207,8 +190,8 @@ var PanelBarVue2 = {
 
         case 'multiple':
           newExpanded = this.expandedItems.slice();
-          var index = newExpanded.indexOf(selectedChild.props.uniquePrivateKey);
-          index === -1 ? newExpanded.push(selectedChild.props.uniquePrivateKey) : newExpanded.splice(index, 1);
+          var index = newExpanded.indexOf(selectedChild.uniquePrivateKey);
+          index === -1 ? newExpanded.push(selectedChild.uniquePrivateKey) : newExpanded.splice(index, 1);
           break;
 
         default:
@@ -216,17 +199,12 @@ var PanelBarVue2 = {
           break;
       }
 
-      this.setState({
-        selected: selectedChild.props.uniquePrivateKey,
-        expanded: newExpanded
+      this.currentSelected = selectedChild.uniquePrivateKey;
+      this.currentExpanded = newExpanded;
+      this.$emit('select', {
+        target: selectedChild,
+        expandedItems: newExpanded
       });
-
-      if (this.props.onSelect) {
-        this.props.onSelect.call(undefined, {
-          target: selectedChild,
-          expandedItems: newExpanded
-        });
-      }
     },
     onFocus: function onFocus(event, step) {
       var _this = this;
@@ -235,21 +213,18 @@ var PanelBarVue2 = {
         step = 0;
       }
 
-      var flattenChildren = []; // flatVisibleChildren(React.Children.toArray(this.children));
-
+      var flattenChildren = util_1.flatVisibleChildren(this.computedItems);
       var focusedChild;
       flattenChildren.forEach(function (child, ixd) {
-        if (child.props.uniquePrivateKey === (event.uniquePrivateKey || _this.state.focused)) {
+        if (child.uniquePrivateKey === (event.uniquePrivateKey || _this.currentFocused)) {
           var index = ixd + step < 0 ? 0 : ixd + step > flattenChildren.length ? flattenChildren.length - 1 : ixd + step;
           focusedChild = flattenChildren[index];
         }
       });
 
       if (focusedChild) {
-        this.activeDescendant = focusedChild.props.id;
-        this.setState({
-          focused: focusedChild.props.uniquePrivateKey
-        });
+        this.activeDescendant = focusedChild.id;
+        this.currentFocused = focusedChild.uniquePrivateKey;
       }
     },
     onNavigate: function onNavigate(event, action) {
@@ -281,20 +256,13 @@ var PanelBarVue2 = {
     handleWrapperFocus: function handleWrapperFocus() {
       clearTimeout(this.nextTickId);
 
-      if (!this.state.wrapperFocused) {
-        this.setState({
-          wrapperFocused: true
-        });
+      if (!this.wrapperFocused) {
+        this.wrapperFocused = true;
       }
     },
     handleWrapperBlur: function handleWrapperBlur() {
-      var _this = this;
-
-      this.nextTick(function () {
-        _this.setState({
-          wrapperFocused: false
-        });
-      });
+      // this.nextTick(() => {
+      this.wrapperFocused = false; // });
     },
     handleKeyDown: function handleKeyDown(event) {
       var rtl = this._element && getComputedStyle(this._element).direction === 'rtl' || false;

package/dist/npm/panelbar/PanelBarGroup.d.ts

@@ -0,0 +1,47 @@
+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;
+};
+/**
+ * @hidden
+ */
+export interface PanelBarGroupProps {
+    item?: object;
+    items?: any[];
+    animation?: boolean;
+    expanded?: boolean;
+    disabled?: boolean;
+    content?: any;
+    keepItemsMounted?: boolean;
+    uniquePrivateKey?: string;
+}
+/** @hidden */
+interface PanelBarGroupState {
+}
+/**
+ * @hidden
+ */
+export interface PanelBarGroupComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface PanelBarGroupMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface PanelBarGroupData {
+    show: boolean;
+}
+/**
+ * @hidden
+ */
+export interface PanelBarGroupAll extends Vue2type, PanelBarGroupMethods, PanelBarGroupData, PanelBarGroupComputed, PanelBarGroupState {
+}
+declare let PanelBarGroupVue2: ComponentOptions<PanelBarGroupAll, DefaultData<PanelBarGroupData>, DefaultMethods<PanelBarGroupAll>, PanelBarGroupComputed, RecordPropsDefinition<PanelBarGroupProps>>;
+declare const PanelBarGroup: DefineComponent<PanelBarGroupProps, any, PanelBarGroupData, PanelBarGroupComputed, PanelBarGroupMethods, {}, {}, {}, string, PanelBarGroupProps, PanelBarGroupProps, {}>;
+export { PanelBarGroup, PanelBarGroupVue2 };

package/dist/npm/panelbar/PanelBarGroup.js

@@ -0,0 +1,138 @@
+"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.PanelBarGroupVue2 = exports.PanelBarGroup = void 0; // @ts-ignore
+
+var Vue = require("vue");
+
+var allVue = Vue;
+var gh = allVue.h;
+
+var kendo_vue_animation_1 = require("@progress/kendo-vue-animation");
+
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+
+var PanelBarItem_1 = require("./PanelBarItem"); // tslint:enable:max-line-length
+
+
+var PanelBarGroupVue2 = {
+  name: 'KendoPanelBarGroup',
+  props: {
+    item: Object,
+    items: Array,
+    animation: Boolean,
+    expanded: Boolean,
+    disabled: Boolean,
+    keepItemsMounted: Boolean,
+    uniquePrivateKey: String,
+    content: Object
+  },
+  data: function data() {
+    return {
+      show: this.$props.expanded
+    };
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+        items = _a.items,
+        uniquePrivateKey = _a.uniquePrivateKey,
+        disabled = _a.disabled,
+        expanded = _a.expanded,
+        animation = _a.animation,
+        keepItemsMounted = _a.keepItemsMounted;
+    var animationStyle = {
+      display: 'block'
+    };
+    var content = kendo_vue_common_1.getTemplate.call(this, {
+      h: h,
+      template: this.$props.content,
+      defaultRendering: null,
+      additionalProps: __assign(__assign({}, this.$props), {
+        show: this.show
+      })
+    });
+    var opened = !disabled && expanded;
+    var itemContent = opened || keepItemsMounted ? items ? h("ul", {
+      role: "group",
+      attrs: this.v3 ? undefined : {
+        role: "group"
+      },
+      "class": "k-panelbar-group k-panel k-group",
+      style: {
+        display: keepItemsMounted ? this.$data.show ? 'block' : 'none' : 'block'
+      }
+    }, [items.map(function (item) {
+      return h(PanelBarItem_1.PanelBarItem, __assign({
+        props: this.v3 ? undefined : item
+      }, item));
+    }, this)]) : this.$props.content ? h("div", {
+      "class": "k-panelbar-content k-content"
+    }, [content]) : null : null;
+    return (animation !== undefined ? animation : true) && !disabled ? // @ts-ignore  function children
+    h(kendo_vue_animation_1.Reveal, {
+      appear: opened,
+      attrs: this.v3 ? undefined : {
+        appear: opened,
+        transitionEnterDuration: 200,
+        transitionExitDuration: 200,
+        //   childFactory={keepItemsMounted && this.childFactory}
+        unmountOnExit: !keepItemsMounted
+      },
+      transitionEnterDuration: 200,
+      transitionExitDuration: 200,
+      key: uniquePrivateKey + '_animation',
+      style: animationStyle,
+      unmountOnExit: !keepItemsMounted,
+      onEntering: this.handleEntering,
+      on: this.v3 ? undefined : {
+        "entering": this.handleEntering,
+        "exited": this.handleExited
+      },
+      onExited: this.handleExited
+    }, this.v3 ? function () {
+      return [itemContent];
+    } : [itemContent]) : itemContent;
+  },
+  methods: {
+    handleEntering: function handleEntering() {
+      if (this.keepItemsMounted) {
+        this.show = true;
+      }
+    },
+    handleExited: function handleExited() {
+      if (this.keepItemsMounted) {
+        this.show = false;
+      }
+    }
+  }
+};
+exports.PanelBarGroupVue2 = PanelBarGroupVue2;
+var PanelBarGroup = PanelBarGroupVue2;
+exports.PanelBarGroup = PanelBarGroup;

package/dist/npm/panelbar/PanelBarItem.d.ts

@@ -6,7 +6,6 @@ declare type DefaultMethods<V> = {
 import { PanelBarItemProps } from './interfaces/PanelBarItemProps';
 /** @hidden */
 interface PanelBarItemState {
-    show: boolean;
 }
 /**
  * @hidden