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

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-layout',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1646205274,
+    publishDate: 1647960367,
     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/es/panelbar/PanelBar.d.ts

@@ -0,0 +1,40 @@
+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 { PanelBarProps } from './interfaces/PanelBarProps';
+/**
+ * @hidden
+ */
+export interface PanelBarState {
+    focused?: string;
+    wrapperFocused?: boolean;
+    selected?: string;
+    expanded: string[];
+}
+/**
+ * @hidden
+ */
+export interface PanelBarComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface PanelBarMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface PanelBarData {
+}
+/**
+ * @hidden
+ */
+export interface PanelBarAll extends Vue2type, PanelBarMethods, PanelBarData, PanelBarComputed, PanelBarState {
+}
+declare let PanelBarVue2: ComponentOptions<PanelBarAll, DefaultData<PanelBarData>, DefaultMethods<PanelBarAll>, PanelBarComputed, RecordPropsDefinition<PanelBarProps>>;
+declare const PanelBar: DefineComponent<PanelBarProps, any, PanelBarData, PanelBarComputed, PanelBarMethods, {}, {}, {}, string, PanelBarProps, PanelBarProps, {}>;
+export { PanelBar, PanelBarVue2 };

package/dist/es/panelbar/PanelBar.js

@@ -0,0 +1,329 @@
+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 __spreadArrays = this && this.__spreadArrays || function () {
+  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
+    s += arguments[i].length;
+  }
+
+  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
+    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
+      r[k] = a[j];
+    }
+  }
+
+  return r;
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+import { renderChildren, isArrayEqual } from './util';
+import { classNames, Keys } from '@progress/kendo-vue-common';
+import { validatePackage } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata';
+import { NavigationAction } from './interfaces/NavigationAction'; // tslint:enable:max-line-length
+
+var PanelBarVue2 = {
+  name: 'KendoPanelBar',
+  props: {
+    animation: {
+      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;
+    //     }
+    // },
+    dir: String,
+    selected: String,
+    expanded: Array,
+    focused: String,
+    expandMode: {
+      type: String,
+      default: 'multiple',
+      validator: function validator(value) {
+        return ['single', 'multiple'].includes(value);
+      }
+    },
+    className: String,
+    keepItemsMounted: Boolean
+  },
+  created: function created() {
+    // /**
+    //  * @hidden
+    //  */
+    // readonly state: PanelBarState;
+    // private activeDescendant?: string;
+    // private _element: HTMLElement | null = null;
+    // private nextTickId: any;
+    validatePackage(packageMetadata); // const initialState = getInitialState(props, this.expandMode);
+    // if (!initialState.focused) {
+    //     initialState.focused = getFirstId(props);
+    // }
+    // this.state = 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;
+      return selected;
+    },
+    expandedItems: function expandedItems() {
+      var expanded = this.props.isControlled ? this.props.expanded || [] : this.state.expanded;
+      return expanded;
+    },
+    children: function children() {
+      var state = __assign(__assign({}, this.state), {
+        selected: this.selectedItem
+      });
+
+      var renderState = {
+        animation: this.props.animation,
+        keepItemsMounted: this.props.keepItemsMounted,
+        state: state,
+        expanded: this.expandedItems,
+        handleSelect: this.handleSelect
+      };
+      return renderChildren(); // (renderState);
+    }
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    var ariaProps = {
+      'aria-activedescendant': this.activeDescendant
+    };
+    var className = classNames('k-panelbar', this.props.className);
+    return h("ul", {
+      ref: function ref(div) {
+        _this._element = div;
+      },
+      dir: this.props.dir,
+      attrs: this.v3 ? undefined : {
+        dir: this.props.dir,
+        role: 'tree',
+        tabIndex: 0
+      },
+      role: 'tree',
+      tabIndex: 0,
+      onKeyDown: this.handleKeyDown,
+      on: this.v3 ? undefined : {
+        "keyDown": this.handleKeyDown,
+        "focus": this.handleWrapperFocus,
+        "blur": this.handleWrapperBlur
+      },
+      onFocus: this.handleWrapperFocus,
+      onBlur: this.handleWrapperBlur,
+      "class": className,
+      style: this.props.style
+    }, [this.children]);
+  },
+  methods: {
+    handleSelect: function handleSelect(event) {
+      this.onSelect(event);
+      this.onFocus(event);
+    },
+    onSelect: function onSelect(event) {
+      var _this = this;
+
+      var flattenChildren = []; // flatChildren(React.Children.toArray(this.children));
+
+      var selectedChild;
+      var newExpanded;
+      flattenChildren.forEach(function (child) {
+        if (child.props.uniquePrivateKey === (event.uniquePrivateKey || _this.state.focused)) {
+          selectedChild = child;
+        }
+      });
+
+      switch (this.expandMode) {
+        case 'single':
+          newExpanded = __spreadArrays(selectedChild.props.parentUniquePrivateKey, [selectedChild.props.uniquePrivateKey]);
+
+          if (isArrayEqual(this.expandedItems, newExpanded)) {
+            if (selectedChild.props.parentUniquePrivateKey) {
+              newExpanded = __spreadArrays(selectedChild.props.parentUniquePrivateKey);
+            } else {
+              newExpanded = [];
+            }
+          }
+
+          break;
+
+        case 'multiple':
+          newExpanded = this.expandedItems.slice();
+          var index = newExpanded.indexOf(selectedChild.props.uniquePrivateKey);
+          index === -1 ? newExpanded.push(selectedChild.props.uniquePrivateKey) : newExpanded.splice(index, 1);
+          break;
+
+        default:
+          newExpanded = this.expandedItems.slice();
+          break;
+      }
+
+      this.setState({
+        selected: selectedChild.props.uniquePrivateKey,
+        expanded: newExpanded
+      });
+
+      if (this.props.onSelect) {
+        this.props.onSelect.call(undefined, {
+          target: selectedChild,
+          expandedItems: newExpanded
+        });
+      }
+    },
+    onFocus: function onFocus(event, step) {
+      var _this = this;
+
+      if (step === void 0) {
+        step = 0;
+      }
+
+      var flattenChildren = []; // flatVisibleChildren(React.Children.toArray(this.children));
+
+      var focusedChild;
+      flattenChildren.forEach(function (child, ixd) {
+        if (child.props.uniquePrivateKey === (event.uniquePrivateKey || _this.state.focused)) {
+          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
+        });
+      }
+    },
+    onNavigate: function onNavigate(event, action) {
+      var step;
+
+      switch (action) {
+        case NavigationAction.Previous:
+          step = -1;
+          this.onFocus(event, step);
+          break;
+
+        case NavigationAction.Next:
+          step = 1;
+          this.onFocus(event, step);
+          break;
+
+        case NavigationAction.Toggle:
+          this.onSelect(event);
+          break;
+
+        default:
+      }
+    },
+    nextTick: function nextTick(f) {
+      this.nextTickId = window.setTimeout(function () {
+        return f();
+      });
+    },
+    handleWrapperFocus: function handleWrapperFocus() {
+      clearTimeout(this.nextTickId);
+
+      if (!this.state.wrapperFocused) {
+        this.setState({
+          wrapperFocused: true
+        });
+      }
+    },
+    handleWrapperBlur: function handleWrapperBlur() {
+      var _this = this;
+
+      this.nextTick(function () {
+        _this.setState({
+          wrapperFocused: false
+        });
+      });
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      var rtl = this._element && getComputedStyle(this._element).direction === 'rtl' || false;
+
+      if (event.target === event.currentTarget) {
+        var keyCode = event.keyCode;
+        var action = void 0;
+
+        switch (keyCode) {
+          case Keys.left:
+            action = !rtl ? NavigationAction.Previous : NavigationAction.Next;
+            break;
+
+          case Keys.up:
+            action = NavigationAction.Previous;
+            break;
+
+          case Keys.right:
+            action = !rtl ? NavigationAction.Next : NavigationAction.Previous;
+            break;
+
+          case Keys.down:
+            action = NavigationAction.Next;
+            break;
+
+          case Keys.space:
+          case Keys.enter:
+            action = NavigationAction.Toggle;
+            break;
+
+          default:
+            action = null;
+            break;
+        }
+
+        if (action !== null) {
+          event.preventDefault();
+          this.onNavigate(event, action);
+        }
+      }
+    }
+  }
+};
+var PanelBar = PanelBarVue2;
+export { PanelBar, PanelBarVue2 };

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

@@ -0,0 +1,35 @@
+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 { PanelBarItemProps } from './interfaces/PanelBarItemProps';
+/** @hidden */
+interface PanelBarItemState {
+    show: boolean;
+}
+/**
+ * @hidden
+ */
+export interface PanelBarItemComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface PanelBarItemMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface PanelBarItemData {
+}
+/**
+ * @hidden
+ */
+export interface PanelBarItemAll extends Vue2type, PanelBarItemMethods, PanelBarItemData, PanelBarItemComputed, PanelBarItemState {
+}
+declare let PanelBarItemVue2: ComponentOptions<PanelBarItemAll, DefaultData<PanelBarItemData>, DefaultMethods<PanelBarItemAll>, PanelBarItemComputed, RecordPropsDefinition<PanelBarItemProps>>;
+declare const PanelBarItem: DefineComponent<PanelBarItemProps, any, PanelBarItemData, PanelBarItemComputed, PanelBarItemMethods, {}, {}, {}, string, PanelBarItemProps, PanelBarItemProps, {}>;
+export { PanelBarItem, PanelBarItemVue2 };

package/dist/es/panelbar/PanelBarItem.js

@@ -0,0 +1,219 @@
+// @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
+ */
+
+function iconElement(_a) {
+  var imageUrl = _a.imageUrl,
+      icon = _a.icon,
+      iconClass = _a.iconClass;
+
+  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 null;
+} // tslint:enable:max-line-length
+
+
+var PanelBarItemVue2 = {
+  name: 'KendoPanelBarItem',
+  props: {
+    animation: Boolean,
+    className: String,
+    expanded: Boolean,
+    disabled: Boolean,
+    selected: Boolean,
+    level: Number,
+    title: {
+      type: [String, Object, Function],
+      default: function _default() {
+        return 'Untitled';
+      }
+    },
+    id: String,
+    focused: Boolean,
+    keepItemsMounted: Boolean
+  },
+  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 _a;
+
+    var _this = this;
+
+    var h = gh || createElement;
+    var _b = this.props,
+        id = _b.id,
+        children = _b.children,
+        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 panelBarItemAriaAttributes = {
+      'role': 'treeitem',
+      'aria-disabled': disabled,
+      'aria-hidden': !disabled && !expanded,
+      'aria-selected': !disabled && selected,
+      'aria-expanded': !disabled && expanded && !!children
+    };
+    var panelBarItemClassName = classNames('k-item', {
+      'k-panelbar-header': level === 0,
+      'k-panelbar-item': level !== 0,
+      'k-state-expanded': expanded && !!children
+    }, "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 icon = iconElement(this.props);
+    var arrow = !disabled && children ? h("span", {
+      "class": panelBarItemArrowClassName
+    }) : null;
+    var opened = !disabled && expanded;
+    var content = opened || keepItemsMounted ? h("ul", {
+      role: "group",
+      attrs: this.v3 ? undefined : {
+        role: "group",
+        className: "k-panelbar-group k-panel k-group"
+      },
+      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;
+    return h("li", {
+      id: id,
+      attrs: this.v3 ? undefined : {
+        id: id
+      },
+      "class": panelBarItemClassName
+    }, [h("span", {
+      "class": panelBarLinkClassName,
+      onClick: this.handleItemClick,
+      on: this.v3 ? undefined : {
+        "click": this.handleItemClick
+      }
+    }, [icon, h("span", {
+      "class": 'k-panelbar-item-text'
+    }, [title]), arrow]), child]);
+  },
+  methods: {
+    handleItemClick: function handleItemClick() {
+      var _a = this.props,
+          onSelect = _a.onSelect,
+          disabled = _a.disabled,
+          id = _a.id;
+
+      if (onSelect && !disabled) {
+        onSelect.call(undefined, {
+          uniquePrivateKey: this.props.uniquePrivateKey,
+          id: id,
+          target: this
+        });
+      }
+    },
+    childFactory: function childFactory(child) {
+      // if (this.props.keepItemsMounted) {
+      //     return React.cloneElement(child, {
+      //         ...child.props,
+      //         in: this.props.expanded
+      //     });
+      // }
+      return child;
+    }
+  }
+};
+var PanelBarItem = PanelBarItemVue2;
+export { PanelBarItem, PanelBarItemVue2 };

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

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

package/dist/es/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/es/panelbar/interfaces/PanelBarItemClickEventArguments.d.ts

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