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

package/dist/esm/panelbar/PanelBar.js

@@ -0,0 +1,318 @@
+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));
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { PanelBarItem } from './PanelBarItem.js';
+import { renderChildren, getInitialState, flatVisibleChildren, flatChildren, isArrayEqual, getFirstId } from './util.js';
+import { classNames, Keys } from '@progress/kendo-vue-common';
+import { validatePackage } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata.js';
+import { NavigationAction } from './interfaces/NavigationAction.js';
+/**
+ * @hidden
+ */
+
+var PanelBarVue2 = {
+  name: 'KendoPanelBar',
+  // @ts-ignore
+  emits: {
+    select: null,
+    keydown: null
+  },
+  props: {
+    animation: {
+      type: Boolean,
+      default: true
+    },
+    items: Array,
+    dir: String,
+    selected: String,
+    expanded: {
+      type: Array,
+      default: undefined
+    },
+    focused: String,
+    expandMode: {
+      type: String,
+      default: 'multiple',
+      validator: function validator(value) {
+        return ['single', 'multiple'].includes(value);
+      }
+    },
+    className: String,
+    keepItemsMounted: Boolean
+  },
+  created: function created() {
+    this.activeDescendant = null;
+    validatePackage(packageMetadata);
+  },
+  data: function data() {
+    var initialState = getInitialState(this.$props, this.expandMode);
+
+    if (!initialState.currentFocused) {
+      initialState.currentFocused = getFirstId(this.$props);
+    }
+
+    return initialState;
+  },
+  computed: {
+    selectedItem: function selectedItem() {
+      var _a = this.$props.selected,
+          selected = _a === void 0 ? this.currentSelected : _a;
+      return selected;
+    },
+    expandedItems: function expandedItems() {
+      var expanded = this.$props.expanded !== undefined ? this.$props.expanded || [] : this.currentExpanded;
+      return expanded;
+    },
+    computedItems: function computedItems() {
+      var state = __assign(__assign({
+        currentExpanded: []
+      }, this.$data), {
+        selected: this.selectedItem
+      });
+
+      var renderState = {
+        animation: this.$props.animation,
+        keepItemsMounted: this.$props.keepItemsMounted,
+        state: state,
+        expanded: this.expandedItems,
+        handleSelect: this.handleSelect
+      };
+      return renderChildren.call(this, this.items, renderState);
+    }
+  },
+  provide: function provide() {
+    return {
+      dispatchItemSelect: this.handleSelect
+    };
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var className = classNames('k-panelbar', this.$props.className);
+    return h("ul", {
+      dir: this.$props.dir,
+      attrs: this.v3 ? undefined : {
+        dir: this.$props.dir,
+        role: 'tree',
+        tabindex: 0,
+        "aria-activedescendant": this.activeDescendant
+      },
+      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,
+      "aria-activedescendant": this.activeDescendant
+    }, [this.computedItems.map(function (item) {
+      return h(PanelBarItem, __assign(__assign({
+        props: this.v3 ? undefined : __assign(__assign({}, item), {
+          item: item
+        })
+      }, item), {
+        item: item
+      }));
+    }, this)]);
+  },
+  methods: {
+    handleSelect: function handleSelect(event) {
+      this.onSelect(event);
+      this.onFocus(event);
+    },
+    onSelect: function onSelect(event) {
+      var _this = this;
+
+      var flattenChildren = flatChildren(this.computedItems);
+      var selectedChild;
+      var newExpanded;
+      flattenChildren.forEach(function (child) {
+        if (child.uniquePrivateKey === (event.uniquePrivateKey || _this.currentFocused)) {
+          selectedChild = child;
+        }
+      });
+
+      if (selectedChild) {
+        switch (this.expandMode) {
+          case 'single':
+            newExpanded = __spreadArray(__spreadArray([], selectedChild.parentUniquePrivateKey, true), [selectedChild.uniquePrivateKey], false);
+
+            if (isArrayEqual(this.expandedItems, newExpanded)) {
+              if (selectedChild.parentUniquePrivateKey) {
+                newExpanded = __spreadArray([], selectedChild.parentUniquePrivateKey, true);
+              } else {
+                newExpanded = [];
+              }
+            }
+
+            break;
+
+          case 'multiple':
+            newExpanded = this.expandedItems.slice();
+            var index = newExpanded.indexOf(selectedChild.uniquePrivateKey);
+            index === -1 ? newExpanded.push(selectedChild.uniquePrivateKey) : newExpanded.splice(index, 1);
+            break;
+
+          default:
+            newExpanded = this.expandedItems.slice();
+            break;
+        }
+
+        this.currentSelected = selectedChild.uniquePrivateKey;
+        this.currentExpanded = newExpanded;
+        this.$emit('select', {
+          target: selectedChild,
+          expandedItems: newExpanded
+        });
+      }
+    },
+    onFocus: function onFocus(event, step) {
+      var _this = this;
+
+      if (step === void 0) {
+        step = 0;
+      }
+
+      var flattenChildren = flatVisibleChildren(this.computedItems);
+      var focusedChild;
+      flattenChildren.forEach(function (child, ixd) {
+        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.id;
+        this.currentFocused = focusedChild.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.wrapperFocused) {
+        this.wrapperFocused = true;
+      }
+    },
+    handleWrapperBlur: function handleWrapperBlur() {
+      // this.nextTick(() => {
+      this.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);
+        }
+      }
+
+      this.$emit('keydown', event);
+    }
+  }
+};
+/**
+ *
+ * ### props <span class='code'>[PanelBarProps]({% slug api_layout_panelbarprops %})</span>
+ * The props of the PanelBar component.
+ */
+
+var PanelBar = PanelBarVue2;
+export { PanelBar, PanelBarVue2 };

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

@@ -0,0 +1,53 @@
+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 | number;
+}
+/** @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 {
+}
+/**
+ * @hidden
+ */
+declare let PanelBarGroupVue2: ComponentOptions<PanelBarGroupAll, DefaultData<PanelBarGroupData>, DefaultMethods<PanelBarGroupAll>, PanelBarGroupComputed, RecordPropsDefinition<PanelBarGroupProps>>;
+/**
+ * @hidden
+ */
+declare const PanelBarGroup: DefineComponent<PanelBarGroupProps, any, PanelBarGroupData, PanelBarGroupComputed, PanelBarGroupMethods, {}, {}, {}, string, PanelBarGroupProps, PanelBarGroupProps, {}>;
+export { PanelBarGroup, PanelBarGroupVue2 };

package/dist/esm/panelbar/PanelBarGroup.js

@@ -0,0 +1,139 @@
+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 { Reveal } from '@progress/kendo-vue-animation';
+import { getTemplate } from '@progress/kendo-vue-common';
+import { PanelBarItem } from './PanelBarItem.js';
+/**
+ * @hidden
+ */
+
+var PanelBarGroupVue2 = {
+  name: 'KendoPanelBarGroup',
+  props: {
+    item: Object,
+    items: Array,
+    animation: Boolean,
+    expanded: Boolean,
+    disabled: Boolean,
+    keepItemsMounted: Boolean,
+    uniquePrivateKey: [String, Number],
+    content: Object
+  },
+  data: function data() {
+    return {
+      show: this.$props.expanded
+    };
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+        item = _a.item,
+        items = _a.items,
+        uniquePrivateKey = _a.uniquePrivateKey,
+        disabled = _a.disabled,
+        expanded = _a.expanded,
+        animation = _a.animation,
+        keepItemsMounted = _a.keepItemsMounted;
+    var animationStyle = {
+      display: 'block'
+    };
+    var content = 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 (currentItem) {
+      return h(PanelBarItem, __assign(__assign({
+        props: this.v3 ? undefined : __assign(__assign({}, currentItem), {
+          item: item
+        })
+      }, currentItem), {
+        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(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;
+      }
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var PanelBarGroup = PanelBarGroupVue2;
+export { PanelBarGroup, PanelBarGroupVue2 };

package/dist/esm/panelbar/PanelBarItem.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 { PanelBarItemProps } from './interfaces/PanelBarItemProps';
+/** @hidden */
+interface PanelBarItemState {
+}
+/**
+ * @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 {
+}
+/**
+ * @hidden
+ */
+declare let PanelBarItemVue2: ComponentOptions<PanelBarItemAll, DefaultData<PanelBarItemData>, DefaultMethods<PanelBarItemAll>, PanelBarItemComputed, RecordPropsDefinition<PanelBarItemProps>>;
+/**
+ * @hidden
+ */
+declare const PanelBarItem: DefineComponent<PanelBarItemProps, any, PanelBarItemData, PanelBarItemComputed, PanelBarItemMethods, {}, {}, {}, string, PanelBarItemProps, PanelBarItemProps, {}>;
+export { PanelBarItem, PanelBarItemVue2 };