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

package/dist/es/panelbar/PanelBarItem.js

@@ -1,56 +1,31 @@
-// @ts-ignore
-import * as Vue from 'vue';
-var allVue = Vue;
-var gh = allVue.h;
-import { classNames } from '@progress/kendo-vue-common';
-import { Reveal } from '@progress/kendo-vue-animation';
-/**
- * @hidden
- */
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
 
-function iconElement(_a) {
-  var imageUrl = _a.imageUrl,
-      icon = _a.icon,
-      iconClass = _a.iconClass;
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
 
-  if (imageUrl) {
-    return h("img", {
-      role: "presentation",
-      attrs: this.v3 ? undefined : {
-        role: "presentation",
-        src: imageUrl
-      },
-      "class": 'k-panelbar-item-icon k-image',
-      src: imageUrl
-    });
-  } else if (icon) {
-    var iconClasses = classNames('k-panelbar-item-icon', 'k-icon', 'k-i-' + icon);
-    return h("span", {
-      role: "presentation",
-      attrs: this.v3 ? undefined : {
-        role: "presentation"
-      },
-      "class": iconClasses
-    });
-  } else if (iconClass) {
-    return h("span", {
-      role: "presentation",
-      attrs: this.v3 ? undefined : {
-        role: "presentation"
-      },
-      "class": 'k-panelbar-item-icon ' + iconClass
-    });
-  }
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+}; // @ts-ignore
 
-  return null;
-} // tslint:enable:max-line-length
 
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+import { classNames, getTemplate } from '@progress/kendo-vue-common';
+import { PanelBarGroup } from './PanelBarGroup'; // tslint:enable:max-line-length
 
 var PanelBarItemVue2 = {
   name: 'KendoPanelBarItem',
   props: {
+    items: Array,
     animation: Boolean,
-    className: String,
     expanded: Boolean,
     disabled: Boolean,
     selected: Boolean,
@@ -63,12 +38,21 @@ var PanelBarItemVue2 = {
     },
     id: String,
     focused: Boolean,
-    keepItemsMounted: Boolean
+    keepItemsMounted: Boolean,
+    uniquePrivateKey: String,
+    parentUniquePrivateKey: Array,
+    parentExpanded: Boolean,
+    headerClassName: String,
+    iconClass: String,
+    imageUrl: String,
+    icon: String,
+    content: Object,
+    header: Object
   },
-  data: function data() {
-    return {
-      show: this.$props.expanded
-    };
+  inject: {
+    dispatchItemSelect: {
+      default: null
+    }
   },
   // @ts-ignore
   setup: !gh ? undefined : function () {
@@ -81,12 +65,11 @@ var PanelBarItemVue2 = {
   render: function render(createElement) {
     var _a;
 
-    var _this = this;
-
     var h = gh || createElement;
-    var _b = this.props,
+    var _b = this.$props,
         id = _b.id,
-        children = _b.children,
+        items = _b.items,
+        content = _b.content,
         title = _b.title,
         uniquePrivateKey = _b.uniquePrivateKey,
         disabled = _b.disabled,
@@ -98,117 +81,127 @@ var PanelBarItemVue2 = {
         headerClassName = _b.headerClassName,
         animation = _b.animation,
         keepItemsMounted = _b.keepItemsMounted;
-    var panelBarItemAriaAttributes = {
-      'role': 'treeitem',
-      'aria-disabled': disabled,
-      'aria-hidden': !disabled && !expanded,
-      'aria-selected': !disabled && selected,
-      'aria-expanded': !disabled && expanded && !!children
-    };
+    var hasContent = !!items || content;
     var panelBarItemClassName = classNames('k-item', {
       'k-panelbar-header': level === 0,
       'k-panelbar-item': level !== 0,
-      'k-state-expanded': expanded && !!children
+      'k-state-expanded': expanded && hasContent
     }, "k-level-" + level, className);
     var panelBarLinkClassName = classNames('k-link', {
       'k-state-selected': !disabled && selected,
       'k-state-focus': !disabled && focused,
       'k-state-disabled': disabled
     }, headerClassName);
-    var panelBarItemArrowClassName = classNames('k-panelbar-toggle', 'k-icon', (_a = {}, _a['k-i-arrow-chevron-up'] = expanded && !!children, _a['k-panelbar-collapse'] = expanded && !!children, _a['k-i-arrow-chevron-down'] = !expanded && !!children, _a['k-panelbar-expand'] = !expanded && !!children, _a));
-    var animationStyle = {
-      display: 'block'
+    var panelBarItemArrowClassName = classNames('k-panelbar-toggle', 'k-icon', (_a = {}, _a['k-i-arrow-chevron-up'] = expanded && hasContent, _a['k-panelbar-collapse'] = expanded && hasContent, _a['k-i-arrow-chevron-down'] = !expanded && hasContent, _a['k-panelbar-expand'] = !expanded && hasContent, _a));
+
+    var iconElement = function iconElement() {
+      if (this.imageUrl) {
+        return h("img", {
+          role: "presentation",
+          attrs: this.v3 ? undefined : {
+            role: "presentation",
+            src: this.imageUrl
+          },
+          "class": 'k-panelbar-item-icon k-image',
+          src: this.imageUrl
+        });
+      } else if (icon) {
+        var iconClasses = classNames('k-panelbar-item-icon', 'k-icon', 'k-i-' + icon);
+        return h("span", {
+          role: "presentation",
+          attrs: this.v3 ? undefined : {
+            role: "presentation"
+          },
+          "class": iconClasses
+        });
+      } else if (this.iconClass) {
+        return h("span", {
+          role: "presentation",
+          attrs: this.v3 ? undefined : {
+            role: "presentation"
+          },
+          "class": 'k-panelbar-item-icon ' + this.iconClass
+        });
+      }
+
+      return null;
     };
-    var icon = iconElement(this.props);
-    var arrow = !disabled && children ? h("span", {
+
+    var icon = iconElement.call(this);
+    var arrow = !disabled && (items || content) ? h("span", {
       "class": panelBarItemArrowClassName
     }) : null;
-    var opened = !disabled && expanded;
-    var content = opened || keepItemsMounted ? h("ul", {
-      role: "group",
+    var group = items || content ? h(PanelBarGroup, {
+      items: items,
       attrs: this.v3 ? undefined : {
-        role: "group",
-        className: "k-panelbar-group k-panel k-group"
+        items: items,
+        item: __assign({}, this.$props),
+        content: content,
+        uniquePrivateKey: uniquePrivateKey,
+        disabled: disabled,
+        expanded: expanded,
+        animation: animation,
+        keepItemsMounted: keepItemsMounted
       },
-      className: "k-panelbar-group k-panel k-group",
-      style: {
-        display: keepItemsMounted ? this.state.show ? 'block' : 'none' : 'block'
-      }
-    }, [children]) : null;
-    var child = (animation !== undefined ? animation : true) && !disabled && children ? h(Reveal, {
-      transitionEnterDuration: 200,
-      attrs: this.v3 ? undefined : {
-        transitionEnterDuration: 200,
-        transitionExitDuration: 200,
-        children: content,
-        childFactory: keepItemsMounted && this.childFactory,
-        unmountOnExit: !keepItemsMounted
-      },
-      transitionExitDuration: 200,
-      key: uniquePrivateKey + '_animation',
-      style: animationStyle,
-      children: content,
-      childFactory: keepItemsMounted && this.childFactory,
-      unmountOnExit: !keepItemsMounted,
-      onBeforeEnter: function onBeforeEnter() {
-        return keepItemsMounted && _this.setState({
-          show: true
-        });
-      },
-      on: this.v3 ? undefined : {
-        "beforeEnter": function onBeforeEnter() {
-          return keepItemsMounted && _this.setState({
-            show: true
-          });
-        },
-        "afterExited": function afterExited() {
-          return keepItemsMounted && _this.setState({
-            show: false
-          });
-        }
-      },
-      onAfterExited: function afterExited() {
-        return keepItemsMounted && _this.setState({
-          show: false
-        });
-      }
-    }) : content;
+      item: __assign({}, this.$props),
+      content: content,
+      uniquePrivateKey: uniquePrivateKey,
+      disabled: disabled,
+      expanded: expanded,
+      animation: animation,
+      keepItemsMounted: keepItemsMounted
+    }) : null;
+    var header = getTemplate.call(this, {
+      h: h,
+      template: this.$props.header,
+      defaultRendering: null,
+      additionalProps: __assign({}, this.$props)
+    });
     return h("li", {
       id: id,
       attrs: this.v3 ? undefined : {
-        id: id
+        id: id,
+        role: 'treeitem',
+        "aria-disabled": disabled,
+        "aria-hidden": !disabled && !expanded,
+        "aria-selected": !disabled && selected,
+        "aria-expanded": !disabled && expanded && hasContent
       },
-      "class": panelBarItemClassName
+      "class": panelBarItemClassName,
+      role: 'treeitem',
+      "aria-disabled": disabled,
+      "aria-hidden": !disabled && !expanded,
+      "aria-selected": !disabled && selected,
+      "aria-expanded": !disabled && expanded && hasContent
     }, [h("span", {
       "class": panelBarLinkClassName,
       onClick: this.handleItemClick,
       on: this.v3 ? undefined : {
         "click": this.handleItemClick
       }
-    }, [icon, h("span", {
+    }, [icon, this.$props.header ? header : h("span", {
       "class": 'k-panelbar-item-text'
-    }, [title]), arrow]), child]);
+    }, [title]), arrow]), group]);
   },
   methods: {
     handleItemClick: function handleItemClick() {
-      var _a = this.props,
-          onSelect = _a.onSelect,
+      var _a = this.$props,
           disabled = _a.disabled,
           id = _a.id;
 
-      if (onSelect && !disabled) {
-        onSelect.call(undefined, {
-          uniquePrivateKey: this.props.uniquePrivateKey,
+      if (!disabled) {
+        this.dispatchItemSelect({
+          uniquePrivateKey: this.$props.uniquePrivateKey,
           id: id,
           target: this
         });
       }
     },
     childFactory: function childFactory(child) {
-      // if (this.props.keepItemsMounted) {
+      // if (this.$props.keepItemsMounted) {
       //     return React.cloneElement(child, {
       //         ...child.props,
-      //         in: this.props.expanded
+      //         in: this.$props.expanded
       //     });
       // }
       return child;

package/dist/es/panelbar/interfaces/PanelBarItemProps.d.ts

@@ -3,13 +3,13 @@
  */
 export interface PanelBarItemProps {
     /**
-     * Allows individual animation control over the child ([see example]({% slug animations_panelbar %})). By default, it is controlled by the PanelBar component.
+     * Sets the subitems of the item.
      */
-    animation?: boolean;
+    items?: any[];
     /**
-     * The class name that is set to the PanelBarItem component.
+     * Allows individual animation control over the child ([see example]({% slug animations_panelbar %})). By default, it is controlled by the PanelBar component.
      */
-    className?: string;
+    animation?: boolean;
     /**
      * The class name that is set to the PanelBarItem header.
      */
@@ -22,10 +22,6 @@ export interface PanelBarItemProps {
      * Sets the disabled state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-disabled-items)).
      */
     disabled?: boolean;
-    /**
-     * @hidden
-     */
-    onSelect?: Function;
     /**
      * @hidden
      */
@@ -63,9 +59,13 @@ export interface PanelBarItemProps {
      */
     parentExpanded?: boolean;
     /**
-     * @hidden
+     *  Defines the custom rendering of the content of the PanelBarItem. Accepts a Vue component, a `render` function, or a slot name.
      */
     content?: any;
+    /**
+     *  Defines the custom rendering of the header of the PanelBarItem. Accepts a Vue component, a `render` function, or a slot name.
+     */
+    header?: any;
     /**
      * Used to identify the PanelBarItems inside the PanelBar ([see example]({% slug controlling_state_panelbar %})). Does not depend on the state of the PanelBarItem.
      */
@@ -78,8 +78,4 @@ export interface PanelBarItemProps {
      * @hidden
      */
     keepItemsMounted?: boolean;
-    /**
-     * Sets a custom property. Contained in the PanelBarItem props that are returned from the `onSelect` PanelBar event.
-     */
-    [customProp: string]: any;
 }

package/dist/es/panelbar/interfaces/PanelBarProps.d.ts

@@ -15,6 +15,10 @@ export interface PanelBarProps {
      * Sets the animation state of the PanelBar.
      */
     animation?: boolean;
+    /**
+     * Sets the items of the PanelBar.
+     */
+    items?: any[];
     /**
      * Sets the expand mode of the PanelBar ([see example]({% slug expandmodes_panelbar %})).
      *

package/dist/es/panelbar/interfaces/RenderPanelBarItem.d.ts

@@ -1,11 +1,11 @@
-import { PanelBarState } from '../PanelBar';
+import { PanelBarData } from '../PanelBar';
 /**
  * @hidden
  */
 export interface RenderPanelBarItem {
     animation?: boolean;
     keepItemsMounted?: boolean;
-    state: PanelBarState;
+    state: PanelBarData;
     expanded: string[];
     handleSelect: any;
     parentExpanded?: boolean;

package/dist/es/panelbar/util.d.ts

@@ -1,18 +1,18 @@
-import { PanelBarState } from './PanelBar';
-import { PanelBarItemProps } from './interfaces/PanelBarItemProps';
+import { PanelBarAll, PanelBarData } from './PanelBar';
+import { RenderPanelBarItem } from './interfaces/RenderPanelBarItem';
 import { PanelBarExpandMode } from './interfaces/PanelBarProps';
 /**
  * @hidden
  */
-export declare const renderChildren: () => any;
+export declare const renderChildren: (this: PanelBarAll, items: any[], { animation, keepItemsMounted, state, expanded, handleSelect, parentExpanded, level, parentPrivateKey }: RenderPanelBarItem) => any;
 /**
  * @hidden
  */
-export declare const getFirstId: (_props: any) => any;
+export declare const getFirstId: (props: any) => any;
 /**
  * @hidden
  */
-export declare const getInitialState: (props: any, _expandMode: PanelBarExpandMode, result?: PanelBarState, _parentExpanded?: boolean, _parentPrivateKey?: string[]) => PanelBarState;
+export declare const getInitialState: (props: any, expandMode: PanelBarExpandMode, result?: PanelBarData, parentExpanded?: boolean, parentPrivateKey?: string[]) => PanelBarData;
 /**
  * @hidden
  */
@@ -20,29 +20,15 @@ export declare function flatVisibleItems(data: any, flattedItems?: any[]): any[]
 /**
  * @hidden
  */
-export declare function flatChildren(_children: any, flattenChildren?: any[]): any[];
+export declare function flatChildren(children: any, flattenChildren?: any[]): any[];
 /**
  * @hidden
  */
-export declare function flatVisibleChildren(_children: any, flattenVisibleChildren?: any[]): any[];
+export declare function flatVisibleChildren(children: any, flattenVisibleChildren?: any[]): any[];
 /**
  * @hidden
  */
 export declare const isPresent: Function;
-/**
- * Represents the PanelBarUtils functions.
- */
-export declare namespace PanelBarUtils {
-    /**
-     * Maps a collection of PanelBarItemProps to PanelBarItem components
-     * ([see example]({% slug customization_panelbar %})).
-     * Contained in the `PanelBarUtils` object.
-     *
-     * @param items - A collection of PanelBarItemProps.
-     * @return {PanelBarItem[]} Returns an array of PanelBarItem components.
-     */
-    function mapItemsToComponents(items: Array<PanelBarItemProps>): any[];
-}
 /**
  * @hidden
  */