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

package/dist/esm/panelbar/PanelBarItem.js

@@ -0,0 +1,217 @@
+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];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+}; // @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';
+import { PanelBarGroup } from './PanelBarGroup.js';
+/**
+ * @hidden
+ */
+
+var PanelBarItemVue2 = {
+  name: 'KendoPanelBarItem',
+  props: {
+    item: Object,
+    items: Array,
+    animation: Boolean,
+    expanded: Boolean,
+    disabled: Boolean,
+    selected: Boolean,
+    level: Number,
+    title: {
+      type: [String, Object, Function],
+      default: function _default() {
+        return 'Untitled';
+      }
+    },
+    id: [String, Number],
+    focused: Boolean,
+    keepItemsMounted: Boolean,
+    uniquePrivateKey: [String, Number],
+    parentUniquePrivateKey: Array,
+    parentExpanded: Boolean,
+    headerClassName: String,
+    iconClass: String,
+    imageUrl: String,
+    icon: String,
+    content: Object,
+    header: Object
+  },
+  inject: {
+    dispatchItemSelect: {
+      default: null
+    }
+  },
+  // @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,
+        id = _b.id,
+        item = _b.item,
+        icon = _b.icon,
+        items = _b.items,
+        content = _b.content,
+        title = _b.title,
+        uniquePrivateKey = _b.uniquePrivateKey,
+        disabled = _b.disabled,
+        selected = _b.selected,
+        focused = _b.focused,
+        expanded = _b.expanded,
+        className = _b.className,
+        level = _b.level,
+        headerClassName = _b.headerClassName,
+        animation = _b.animation,
+        keepItemsMounted = _b.keepItemsMounted;
+    var hasContent = !!items || content;
+    var panelBarItemClassName = classNames('k-item', {
+      'k-panelbar-header': level === 0,
+      'k-panelbar-item': level !== 0,
+      'k-expanded': expanded && hasContent
+    }, "k-level-".concat(level), className);
+    var panelBarLinkClassName = classNames('k-link', {
+      'k-selected': !disabled && selected,
+      'k-focus': focused,
+      'k-disabled': disabled
+    }, headerClassName);
+    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 iconRender = iconElement.call(this);
+    var arrow = !disabled && (items || content) ? h("span", {
+      "class": panelBarItemArrowClassName
+    }) : null;
+    var group = items || content ? h(PanelBarGroup, {
+      items: items,
+      attrs: this.v3 ? undefined : {
+        items: items,
+        item: item,
+        content: content,
+        uniquePrivateKey: uniquePrivateKey,
+        disabled: disabled,
+        expanded: expanded,
+        animation: animation,
+        keepItemsMounted: keepItemsMounted
+      },
+      item: item,
+      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,
+        role: 'treeitem',
+        "aria-disabled": disabled,
+        "aria-hidden": !disabled && !expanded,
+        "aria-selected": !disabled && selected,
+        "aria-expanded": !disabled && expanded && hasContent
+      },
+      "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
+      }
+    }, [iconRender, this.$props.header ? header : h("span", {
+      "class": 'k-panelbar-item-text'
+    }, [title]), arrow]), group]);
+  },
+  methods: {
+    handleItemClick: function handleItemClick() {
+      var _a = this.$props,
+          disabled = _a.disabled,
+          id = _a.id;
+
+      if (!disabled) {
+        this.dispatchItemSelect({
+          uniquePrivateKey: this.$props.uniquePrivateKey,
+          id: id,
+          target: this
+        });
+      }
+    },
+    childFactory: function childFactory(child) {
+      return child;
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var PanelBarItem = PanelBarItemVue2;
+export { PanelBarItem, PanelBarItemVue2 };

package/dist/esm/panelbar/interfaces/NavigationAction.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @hidden
+ */
+export declare enum NavigationAction {
+    Toggle = 0,
+    Next = 1,
+    Previous = 2
+}

package/dist/esm/panelbar/interfaces/NavigationAction.js

@@ -0,0 +1,9 @@
+/**
+ * @hidden
+ */
+export var NavigationAction;
+(function (NavigationAction) {
+    NavigationAction[NavigationAction["Toggle"] = 0] = "Toggle";
+    NavigationAction[NavigationAction["Next"] = 1] = "Next";
+    NavigationAction[NavigationAction["Previous"] = 2] = "Previous";
+})(NavigationAction || (NavigationAction = {}));

package/dist/esm/panelbar/interfaces/PanelBarItemClickEventArguments.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @hidden
+ */
+export interface PanelBarItemClickEventArguments {
+    uniquePrivateKey: number;
+    target: any;
+}

package/dist/esm/panelbar/interfaces/PanelBarItemClickEventArguments.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,85 @@
+/**
+ * Represents the props of the PanelBarItem component.
+ */
+export interface PanelBarItemProps {
+    /**
+     * Sets the subitems of the item.
+     */
+    items?: any[];
+    /**
+     * Allows individual animation control over the child ([see example]({% slug animations_panelbar %})). By default, it is controlled by the PanelBar component.
+     */
+    animation?: boolean;
+    /**
+     * The class name that is set to the PanelBarItem header.
+     */
+    headerClassName?: string;
+    /**
+     * Sets the initial expanded state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-expanded-items)). Controlled by the PanelBar component.
+     */
+    expanded?: boolean;
+    /**
+     * Sets the disabled state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-disabled-items)).
+     */
+    disabled?: boolean;
+    /**
+     * @hidden
+     */
+    level?: number;
+    /**
+     * Defines an icon that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
+     */
+    icon?: string;
+    /**
+     * Defines an icon with a custom CSS class that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
+     */
+    iconClass?: string;
+    /**
+     * Defines the location of the image that will be displayed next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-images)).
+     */
+    imageUrl?: string;
+    /**
+     * Sets the initial selected state of the PanelBarItem. Controlled by the PanelBarItem component ([see example]({% slug statesitems_panelbar %}#toc-selected-items)).
+     */
+    selected?: boolean;
+    /**
+     * Sets the title of the PanelBar item ([see example]({% slug titlesitems_panelbar %}#toc-getting-started)).
+     */
+    title?: any;
+    /**
+     * Allows the component to set the `id` property to each item. If not set, a default `id` is applied.
+     */
+    id?: string | number;
+    /**
+     * Sets the initial focused state of the PanelBarItem. Controlled by the PanelBar component.
+     */
+    focused?: boolean;
+    /**
+     * @hidden
+     */
+    parentExpanded?: boolean;
+    /**
+     *  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.
+     */
+    uniquePrivateKey?: string | number;
+    /**
+     * @hidden
+     */
+    parentUniquePrivateKey?: string[];
+    /**
+     * @hidden
+     */
+    keepItemsMounted?: boolean;
+    /**
+     * @hidden
+     */
+    item?: any;
+}

package/dist/esm/panelbar/interfaces/PanelBarItemProps.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,58 @@
+import { PanelBarSelectEventArguments } from './PanelBarSelectEventArguments';
+/**
+ * Represents the expand modes of the Kendo UI for Vue PanelBar. Defaults to `multiple`.
+ */
+export declare type PanelBarExpandMode = 'single' | 'multiple';
+/**
+ * Represents the props of the [Kendo UI for Vue PanelBar component]({% slug overview_panelbar %}).
+ */
+export interface PanelBarProps {
+    /**
+     * The class name that is set to the PanelBar.
+     */
+    className?: string;
+    /**
+     * 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 %})).
+     *
+     * The available modes are:
+     * - `"single"`—Allows you to expand only one item at a time. The expanding of an item collapses the item that was previously expanded.
+     * - `"multiple"` (default)—Allows you to expand two or more items at a time. Items can also be toggled.
+     */
+    expandMode?: PanelBarExpandMode | string;
+    /**
+     * Sets the direction of the PanelBar component.
+     */
+    dir?: string;
+    /**
+     * If set, overrides the currently selected property in the PanelBar state.
+     */
+    selected?: string;
+    /**
+     * Sets the initial expanded state of the PanelBar.
+     */
+    expanded?: string[];
+    /**
+     * Sets the initial focused state of the PanelBar.
+     */
+    focused?: string;
+    /**
+     * Determines if the PanelBar items will be mounted after expand collapse. Defaults to `false`.
+     */
+    keepItemsMounted?: boolean;
+    /**
+     * Determines if the PanelBar is going to be used in controlled state.
+     */
+    isControlled?: boolean;
+    /**
+     * Fires each time the user makes a selection ([see example]({% slug controlling_state_panelbar %})).
+     */
+    onSelect?: (event: PanelBarSelectEventArguments) => void;
+}

package/dist/esm/panelbar/interfaces/PanelBarProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/panelbar/interfaces/PanelBarSelectEventArguments.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The arguments that are passed to the `onSelect` callback function.
+ */
+export interface PanelBarSelectEventArguments {
+    /**
+     * The selected PanelBar item.
+     */
+    target: any;
+    /**
+     * The new expanded PanelBar items state.
+     */
+    expandedItems: string[];
+}

package/dist/esm/panelbar/interfaces/PanelBarSelectEventArguments.js

@@ -0,0 +1 @@
+export {};

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

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

package/dist/esm/panelbar/interfaces/RenderPanelBarItem.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,35 @@
+import { PanelBarAll, PanelBarData } from './PanelBar';
+import { RenderPanelBarItem } from './interfaces/RenderPanelBarItem';
+import { PanelBarExpandMode } from './interfaces/PanelBarProps';
+/**
+ * @hidden
+ */
+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;
+/**
+ * @hidden
+ */
+export declare const getInitialState: (props: any, expandMode: PanelBarExpandMode, result?: PanelBarData, parentExpanded?: boolean, parentPrivateKey?: string[]) => PanelBarData;
+/**
+ * @hidden
+ */
+export declare function flatVisibleItems(data: any, flattedItems?: any[]): any[];
+/**
+ * @hidden
+ */
+export declare function flatChildren(children: any, flattenChildren?: any[]): any[];
+/**
+ * @hidden
+ */
+export declare function flatVisibleChildren(children: any, flattenVisibleChildren?: any[]): any[];
+/**
+ * @hidden
+ */
+export declare const isPresent: Function;
+/**
+ * @hidden
+ */
+export declare const isArrayEqual: (firstArray: any[], secondArray: any[]) => boolean;

package/dist/esm/panelbar/util.js

@@ -0,0 +1,232 @@
+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];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+
+import { getListeners, templateRendering } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+export var renderChildren = function renderChildren(items, _a) {
+  var _b = _a.animation,
+      animation = _b === void 0 ? true : _b,
+      _c = _a.keepItemsMounted,
+      keepItemsMounted = _c === void 0 ? false : _c,
+      state = _a.state,
+      expanded = _a.expanded,
+      handleSelect = _a.handleSelect,
+      _d = _a.parentExpanded,
+      parentExpanded = _d === void 0 ? true : _d,
+      _e = _a.level,
+      level = _e === void 0 ? 0 : _e,
+      _f = _a.parentPrivateKey,
+      parentPrivateKey = _f === void 0 ? [] : _f;
+  return items.map(function (child, idx) {
+    var nestedChildren;
+    var privateKey = getId(child, parentPrivateKey, idx);
+    var content = templateRendering.call(this, child.content, getListeners.call(this));
+    var header = templateRendering.call(this, child.header, getListeners.call(this));
+
+    if (child.items) {
+      var renderState = {
+        animation: animation,
+        keepItemsMounted: keepItemsMounted,
+        state: state,
+        expanded: expanded,
+        handleSelect: handleSelect,
+        parentExpanded: (expanded || []).indexOf(privateKey) > -1,
+        level: level + 1,
+        parentPrivateKey: __spreadArray(__spreadArray([], parentPrivateKey, true), [privateKey], false)
+      };
+      nestedChildren = renderChildren.call(this, child.items, renderState);
+    }
+
+    return __assign(__assign({}, child), {
+      animation: child.animation !== undefined ? child.animation : animation,
+      keepItemsMounted: keepItemsMounted,
+      id: child.id || "k-panelbar-item-default-".concat(privateKey),
+      uniquePrivateKey: privateKey,
+      parentUniquePrivateKey: parentPrivateKey,
+      parentExpanded: parentExpanded,
+      level: level,
+      expanded: (expanded || []).indexOf(privateKey) > -1,
+      focused: state.currentFocused === privateKey && state.wrapperFocused,
+      selected: state.currentSelected === privateKey,
+      items: nestedChildren,
+      content: content,
+      header: header
+    });
+  }, this);
+};
+/**
+ * @hidden
+ */
+
+export var getFirstId = function getFirstId(props) {
+  var firstItem = props.items[0];
+
+  if (firstItem) {
+    return getId(firstItem, [], 0);
+  }
+
+  return '';
+};
+/**
+ * @hidden
+ */
+
+export var getInitialState = function getInitialState(props, expandMode, result, parentExpanded, parentPrivateKey) {
+  if (result === void 0) {
+    result = {
+      currentExpanded: props.expanded || [],
+      currentSelected: props.selected || '',
+      currentFocused: props.focused || '',
+      wrapperFocused: false
+    };
+  }
+
+  if (parentExpanded === void 0) {
+    parentExpanded = true;
+  }
+
+  if (parentPrivateKey === void 0) {
+    parentPrivateKey = [];
+  }
+
+  props.items.forEach(function (item, idx) {
+    var privateKey = getId(item, parentPrivateKey, idx);
+
+    if (!item.disabled && parentExpanded) {
+      if (item.selected) {
+        result.currentSelected = privateKey;
+      }
+
+      if (item.focused) {
+        result.currentFocused = privateKey;
+      }
+
+      if (item.expanded) {
+        if (expandMode === 'multiple') {
+          result.currentExpanded.push(privateKey);
+        } else if (expandMode === 'single') {
+          result.currentExpanded = [privateKey];
+        }
+      }
+
+      if (item.items) {
+        result = getInitialState(item, expandMode, result, !!item.expanded, __spreadArray(__spreadArray([], parentPrivateKey, true), [privateKey], false));
+      }
+    }
+  });
+  return result;
+};
+/**
+ * @hidden
+ */
+
+var getId = function getId(child, parentPrivateKey, idx) {
+  return child && child && child.id ? child.id : parentPrivateKey.length ? parentPrivateKey[parentPrivateKey.length - 1] + ".".concat(idx) : ".".concat(idx);
+};
+/**
+ * @hidden
+ */
+
+
+export function flatVisibleItems(data, flattedItems) {
+  if (flattedItems === void 0) {
+    flattedItems = [];
+  }
+
+  (data || []).forEach(function (item) {
+    if (!item.disabled) {
+      flattedItems.push(item);
+
+      if (item.expanded && item.children) {
+        flatVisibleItems(item.children, flattedItems);
+      }
+    }
+  });
+  return flattedItems;
+}
+/**
+ * @hidden
+ */
+
+export function flatChildren(children, flattenChildren) {
+  if (flattenChildren === void 0) {
+    flattenChildren = [];
+  }
+
+  children.forEach(function (child) {
+    if (child && child && !child.disabled) {
+      flattenChildren.push(child);
+
+      if (child.items) {
+        flatChildren(child.items, flattenChildren);
+      }
+    }
+  });
+  return flattenChildren;
+}
+/**
+ * @hidden
+ */
+
+export function flatVisibleChildren(children, flattenVisibleChildren) {
+  if (flattenVisibleChildren === void 0) {
+    flattenVisibleChildren = [];
+  }
+
+  children.forEach(function (child) {
+    if (child && (child.expanded || child.parentExpanded)) {
+      flattenVisibleChildren.push(child);
+
+      if (child.items) {
+        flatVisibleChildren(child.items, flattenVisibleChildren);
+      }
+    }
+  });
+  return flattenVisibleChildren;
+}
+/**
+ * @hidden
+ */
+
+export var isPresent = function isPresent(value) {
+  return value !== null && value !== undefined;
+};
+/**
+ * @hidden
+ */
+
+export var isArrayEqual = function isArrayEqual(firstArray, secondArray) {
+  if (firstArray.length !== secondArray.length) {
+    return false;
+  }
+
+  return firstArray.every(function (ex, i) {
+    return ex === secondArray[i];
+  });
+};