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

package/dist/esm/tabstrip/TabStripContent.js

@@ -0,0 +1,141 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var ref = allVue.ref;
+var inject = allVue.inject;
+import { Fade } from '@progress/kendo-vue-animation';
+import { classNames, guid, getDefaultSlots, getTemplate } from '@progress/kendo-vue-common';
+import { getTabs } from './utils.js';
+/**
+ * @hidden
+ */
+
+var TabStripContentVue2 = {
+  name: 'KendoTabStripContent',
+  props: {
+    showAll: Boolean,
+    animation: Boolean,
+    tabs: Array,
+    selected: Number,
+    hasTabs: Boolean
+  },
+  created: function created() {
+    this.contentId = guid();
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  data: function data() {
+    return {
+      midAnimation: false
+    };
+  },
+  computed: {
+    animationClass: function animationClass() {
+      var that = this;
+      return this.tabs.map(function (_t, idx) {
+        var visible = idx === that.$props.selected;
+        return {
+          'k-fade-appear': that.animation && !visible,
+          'k-fade-enter-active': that.animation && visible
+        };
+      });
+    }
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+        tabs = _a.tabs,
+        selected = _a.selected,
+        showAll = _a.showAll,
+        hasTabs = _a.hasTabs;
+    var selectedTab = tabs && typeof selected === 'number' && tabs[selected];
+    var defaultSlots = getDefaultSlots(this);
+    var innerTabs = hasTabs ? tabs : getTabs.call(this, [], defaultSlots || []);
+    var tabStyles = selected < innerTabs.length && selected > -1;
+    var contentClasses = classNames({
+      'k-content': tabStyles
+    }, {
+      'k-active': tabStyles
+    }, selectedTab && selectedTab.contentClassName);
+
+    var renderChild = function renderChild(tab, idx) {
+      var _this = this;
+
+      var visible = idx === this.$props.selected;
+      var animationStyle = {
+        position: 'initial',
+        height: visible ? undefined : '0px',
+        width: visible ? undefined : '0px'
+      };
+      var content = hasTabs ? getTemplate.call(this, {
+        h: h,
+        template: tab.content,
+        defaultRendering: null
+      }) : tab;
+      return (// @ts-ignore function children
+        h(Fade, {
+          appear: this.v3 ? true : visible,
+          attrs: this.v3 ? undefined : {
+            appear: this.v3 ? true : visible,
+            enter: this.$props.animation,
+            exit: this.$props.keepTabsMounted
+          },
+          key: idx,
+          "class": this.animationClass[idx],
+          enter: this.$props.animation,
+          exit: this.$props.keepTabsMounted,
+          style: animationStyle
+        }, this.v3 ? function () {
+          return [h("div", {
+            role: 'tabpanel',
+            attrs: _this.v3 ? undefined : {
+              role: 'tabpanel',
+              "aria-expanded": true,
+              id: String(_this.contentId + idx)
+            },
+            "aria-expanded": true,
+            id: String(_this.contentId + idx),
+            key: idx
+          }, [//  hasTabs ? 
+          //     visible ? content : null
+          //     : 
+          content])];
+        } : [h("div", {
+          role: 'tabpanel',
+          attrs: _this.v3 ? undefined : {
+            role: 'tabpanel',
+            "aria-expanded": true,
+            id: String(_this.contentId + idx)
+          },
+          "aria-expanded": true,
+          id: String(_this.contentId + idx),
+          key: idx
+        }, [content])])
+      );
+    };
+
+    var renderContent = function renderContent() {
+      return innerTabs.map(function (tab, idx) {
+        return renderChild.call(this, tab, idx);
+      }, this);
+    };
+
+    return h("div", {
+      "class": contentClasses,
+      style: this.$props.style
+    }, [renderContent.call(this)]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var TabStripContent = TabStripContentVue2;
+export { TabStripContent, TabStripContentVue2 };

package/dist/esm/tabstrip/TabStripNavigation.d.ts

@@ -0,0 +1,79 @@
+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;
+};
+/**
+ * The props that are passed to the TabStripNavigation by the TabStrip.
+ */
+export interface TabStripNavigationProps {
+    /**
+     * The tabs collection.
+     */
+    tabs?: Array<any>;
+    /**
+     * Sets the index of the selected tab. Controlled by the TabStrip component.
+     */
+    selected?: number;
+    /**
+     * @hidden
+     */
+    tabIndex?: number;
+    /**
+     * @hidden
+     */
+    tabPosition?: string;
+}
+/**
+ * The props that are passed to the TabStripNavigation by the TabStrip.
+ */
+export interface TabStripNavigationEmits {
+    /**
+     * @hidden
+     */
+    keydown?: any;
+    /**
+     * @hidden
+     */
+    select?(idx: number): void;
+}
+/**
+ * @hidden
+ */
+interface TabStripNavigationState {
+}
+/**
+ * @hidden
+ */
+interface TabStripNavigationData {
+}
+/**
+ * @hidden
+ */
+export interface TabStripNavigationMethods {
+    [key: string]: any;
+    onKeyDown: (e: any) => void;
+    onSelect: (idx: number) => void;
+}
+/**
+ * @hidden
+ */
+export interface TabStripNavigationComputed {
+    [key: string]: any;
+    wrapperNavClasses: object;
+    navClasses: object;
+}
+/**
+ * @hidden
+ */
+export interface TabStripNavigationAll extends TabStripNavigationMethods, TabStripNavigationState, TabStripNavigationData, TabStripNavigationComputed, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let TabStripNavigationVue2: ComponentOptions<Vue2type, DefaultData<TabStripNavigationData>, DefaultMethods<TabStripNavigationAll>, TabStripNavigationComputed, RecordPropsDefinition<TabStripNavigationProps>>;
+/**
+ * @hidden
+ */
+declare const TabStripNavigation: DefineComponent<TabStripNavigationProps, any, TabStripNavigationData, TabStripNavigationComputed, TabStripNavigationMethods, {}, {}, {}, string, TabStripNavigationProps, TabStripNavigationProps, {}>;
+export { TabStripNavigation, TabStripNavigationVue2 };

package/dist/esm/tabstrip/TabStripNavigation.js

@@ -0,0 +1,127 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var ref = allVue.ref;
+var inject = allVue.inject;
+import { TabStripNavigationItem } from './TabStripNavigationItem.js';
+/**
+ * @hidden
+ */
+
+var times = function times(count) {
+  return Array.apply(null, Array(count));
+};
+/**
+ * @hidden
+ */
+
+
+var TabStripNavigationVue2 = {
+  name: 'KendoTabStripNavigation',
+  // @ts-ignore
+  emits: {
+    select: null,
+    keydown: null
+  },
+  props: {
+    tabs: Array,
+    selected: Number,
+    tabIndex: Number,
+    tabPosition: String
+  },
+  computed: {
+    wrapperNavClasses: {
+      get: function get() {
+        return {
+          'k-tabstrip-items-wrapper': true,
+          'k-hstack': this.$props.tabPosition === 'top' || this.$props.tabPosition === 'bottom',
+          'k-vstack': this.$props.tabPosition === 'left' || this.$props.tabPosition === 'right'
+        };
+      }
+    },
+    navClasses: {
+      get: function get() {
+        return {
+          'k-tabstrip-items': true,
+          'k-reset': true
+        };
+      }
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+        tabs = _a.tabs,
+        selected = _a.selected;
+    var tabsCount = tabs.length;
+
+    var renderTabs = function renderTabs() {
+      return times(tabsCount).map(function (_, index, array) {
+        return (// @ts-ignore function children
+          h(TabStripNavigationItem, {
+            key: index,
+            active: selected === index,
+            attrs: this.v3 ? undefined : {
+              active: selected === index,
+              disabled: tabs[index].disabled,
+              index: index,
+              title: tabs[index].title,
+              titleRender: tabs[index].titleRender,
+              first: index === 0,
+              last: index === array.length - 1
+            },
+            disabled: tabs[index].disabled,
+            index: index,
+            title: tabs[index].title,
+            titleRender: tabs[index].titleRender,
+            first: index === 0,
+            last: index === array.length - 1,
+            onSelect: this.onSelect,
+            on: this.v3 ? undefined : {
+              "select": this.onSelect
+            }
+          })
+        );
+      }, this);
+    };
+
+    return h("div", {
+      "class": this.wrapperNavClasses
+    }, [h("ul", {
+      "class": this.navClasses,
+      role: 'tablist',
+      attrs: this.v3 ? undefined : {
+        role: 'tablist',
+        tabindex: this.$props.tabIndex
+      },
+      tabindex: this.$props.tabIndex,
+      onKeydown: this.onKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.onKeyDown
+      }
+    }, [renderTabs.call(this)])]);
+  },
+  methods: {
+    onKeyDown: function onKeyDown(e) {
+      this.$emit('keydown', e);
+    },
+    onSelect: function onSelect(idx) {
+      this.$emit('select', idx);
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var TabStripNavigation = TabStripNavigationVue2;
+export { TabStripNavigation, TabStripNavigationVue2 };

package/dist/esm/tabstrip/TabStripNavigationItem.d.ts

@@ -0,0 +1,85 @@
+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;
+};
+/**
+ * The props that are passed by the TabStripNavigation to the TabStripNavigationItem.
+ */
+export interface TabStripNavigationItemProps {
+    /**
+     * Defines whether the current TabStripNavigationItem is selected.
+     */
+    active?: boolean;
+    /**
+     * Defines whether the TabStripNavigationItem is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the index of the TabStripNavigationItem that is used to identify it.
+     */
+    index: number;
+    /**
+     * Sets the title of the TabStripNavigationItem.
+     */
+    title?: any;
+    /**
+     * Defines the custom rendering of the title. Accepts a Vue component, a `render` function, or a slot name.
+     */
+    titleRender?: any;
+    /**
+     * @hidden
+     */
+    first?: boolean;
+    /**
+     * @hidden
+     */
+    last?: boolean;
+}
+/**
+ * The emits that are triggered by the TabStripNavigation to the TabStripNavigationItem.
+ */
+export interface TabStripNavigationItemEmits {
+    /**
+     * @hidden
+     */
+    select?(idx: number): void;
+}
+/**
+ * @hidden
+ */
+interface TabStripNavigationItemState {
+}
+/**
+ * @hidden
+ */
+interface TabStripNavigationItemData {
+}
+/**
+ * @hidden
+ */
+export interface TabStripNavigationItemMethods {
+    [key: string]: any;
+    onClick: (e: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface TabStripNavigationItemComputed {
+    [key: string]: any;
+    itemClasses: string;
+}
+/**
+ * @hidden
+ */
+export interface TabStripNavigationItemAll extends TabStripNavigationItemMethods, TabStripNavigationItemState, TabStripNavigationItemData, TabStripNavigationItemComputed, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let TabStripNavigationItemVue2: ComponentOptions<Vue2type, DefaultData<TabStripNavigationItemData>, DefaultMethods<TabStripNavigationItemAll>, TabStripNavigationItemComputed, RecordPropsDefinition<TabStripNavigationItemProps>>;
+/**
+ * @hidden
+ */
+declare const TabStripNavigationItem: DefineComponent<TabStripNavigationItemProps, any, TabStripNavigationItemData, TabStripNavigationItemComputed, TabStripNavigationItemMethods, {}, {}, {}, string, TabStripNavigationItemProps, TabStripNavigationItemProps, {}>;
+export { TabStripNavigationItem, TabStripNavigationItemVue2 };

package/dist/esm/tabstrip/TabStripNavigationItem.js

@@ -0,0 +1,101 @@
+// @ts-ignore
+import { getTemplate } from '@progress/kendo-vue-common';
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+/**
+ * @hidden
+ */
+
+var TabStripNavigationItemVue2 = {
+  name: 'KendoTabStripNavigationItem',
+  // @ts-ignore
+  emits: {
+    select: null
+  },
+  props: {
+    active: Boolean,
+    disabled: Boolean,
+    index: Number,
+    title: {
+      type: String,
+      default: 'Untitled'
+    },
+    titleRender: [String, Function, Object],
+    first: {
+      type: Boolean,
+      default: undefined
+    },
+    last: {
+      type: Boolean,
+      default: undefined
+    }
+  },
+  computed: {
+    itemClasses: {
+      get: function get() {
+        var _a;
+
+        var _b = this.$props,
+            active = _b.active,
+            disabled = _b.disabled,
+            first = _b.first,
+            last = _b.last;
+        return _a = {}, _a['k-first'] = first, _a['k-last'] = last, _a['k-item'] = true, _a['k-disabled'] = disabled, _a['k-active'] = active, _a;
+      }
+    }
+  },
+  methods: {
+    onClick: function onClick() {
+      if (!this.$props.disabled) {
+        this.$emit('select', this.$props.index);
+      }
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+        active = _a.active,
+        _b = _a.title,
+        title = _b === void 0 ? 'Untitled' : _b;
+    var titleRender = this.$props.titleRender;
+    var titleElement = getTemplate.call(this, {
+      h: h,
+      template: titleRender,
+      defaultRendering: title,
+      additionalProps: this.$props,
+      additionalListeners: {
+        select: this.onClick
+      }
+    });
+    return h("li", {
+      "aria-selected": active,
+      attrs: this.v3 ? undefined : {
+        "aria-selected": active,
+        role: 'tab'
+      },
+      role: 'tab',
+      onClick: this.onClick,
+      on: this.v3 ? undefined : {
+        "click": this.onClick
+      },
+      "class": this.itemClasses
+    }, [h("span", {
+      "class": "k-link"
+    }, [titleElement])]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var TabStripNavigationItem = TabStripNavigationItemVue2;
+export { TabStripNavigationItem, TabStripNavigationItemVue2 };

package/dist/esm/tabstrip/TabStripTab.d.ts

@@ -0,0 +1,74 @@
+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;
+};
+export interface TabStripTabProperties {
+    disabled?: boolean;
+    id: string;
+    title?: string;
+    titleRender?: any;
+    content?: any;
+    contentClassName?: string;
+}
+/**
+ * Represents the props of the TabStrip tabs.
+ */
+export interface TabStripTabProps {
+    /**
+     * Defines whether a tab is disabled ([see example]({% slug tabs_tabstrip %}#toc-disabled-state)).
+     */
+    disabled?: boolean;
+    /**
+     * Sets the title of the tab ([see example]({% slug tabs_tabstrip %}#toc-titles)).
+     */
+    title?: any;
+    /**
+     * Defines the custom rendering of the title. Accepts a Vue component, a `render` function, or a slot name.
+     */
+    titleRender?: ((h: any, defaultRendering: any | null, props: any, listeners: any) => any) | any;
+    /**
+     * Specifies the CSS class names of the TabStripTab content.
+     */
+    contentClassName?: string;
+}
+/**
+ * @hidden
+ */
+interface TabStripTabState {
+    tabId: string;
+}
+/**
+ * @hidden
+ */
+interface TabStripTabData {
+}
+/**
+ * @hidden
+ */
+export interface TabStripTabMethods {
+    [key: string]: any;
+    addRenderTitle: (id: string, renderTitle: any) => void;
+    addTab: (newTab: TabStripTabProperties) => void;
+    removeTab: (id: string) => void;
+}
+/**
+ * @hidden
+ */
+export interface TabStripTabComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface TabStripTabAll extends TabStripTabMethods, TabStripTabState, TabStripTabData, TabStripTabComputed, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let TabStripTabVue2: ComponentOptions<Vue2type, DefaultData<TabStripTabData>, DefaultMethods<TabStripTabAll>, TabStripTabComputed, RecordPropsDefinition<TabStripTabProps>>;
+/**
+ * @hidden
+ */
+declare const TabStripTab: DefineComponent<TabStripTabProps, any, TabStripTabData, TabStripTabComputed, TabStripTabMethods, {}, {}, {}, string, TabStripTabProps, TabStripTabProps, {}>;
+export { TabStripTab, TabStripTabVue2 };

package/dist/esm/tabstrip/TabStripTab.js

@@ -0,0 +1,71 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var ref = allVue.ref;
+var inject = allVue.inject;
+import { guid, getDefaultSlots, templateRendering, getListeners } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var TabStripTabVue2 = {
+  name: 'KendoTabStripTab',
+  props: {
+    disabled: Boolean,
+    contentClassName: String,
+    title: String,
+    titleRender: [String, Function, Object]
+  },
+  inject: {
+    addRenderTitle: {
+      default: null
+    },
+    addTab: {
+      default: null
+    },
+    removeTab: {
+      default: null
+    }
+  },
+  created: function created() {
+    this.tabId = guid();
+    this.addTab({
+      title: this.$props.title,
+      id: this.tabId,
+      disabled: this.$props.disabled,
+      contentClassName: this.$props.contentClassName
+    });
+  },
+  destroyed: !!isV3 ? undefined : function () {
+    this.removeTab(this.tabId);
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    this.removeTab(this.tabId);
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var titleRender = this.$props.titleRender ? templateRendering.call(this, this.$props.titleRender, getListeners.call(this)) : null;
+
+    if (titleRender) {
+      this.addRenderTitle(this.tabId, titleRender);
+    }
+
+    return h("div", [getDefaultSlots(this)]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var TabStripTab = TabStripTabVue2;
+export { TabStripTab, TabStripTabVue2 };

package/dist/esm/tabstrip/utils.d.ts

@@ -0,0 +1 @@
+export declare const getTabs: (this: any, curTabs: any[], children: any) => any[];

package/dist/esm/tabstrip/utils.js

@@ -0,0 +1,14 @@
+export var getTabs = function (curTabs, children) {
+    var that = this;
+    var foundTabs = [];
+    children.forEach(function (child) {
+        if (that.v3 && child.children && child.children.length) {
+            foundTabs = getTabs.call(that, curTabs, child.children);
+        }
+        if (child && child.tag && child.tag.toLowerCase().indexOf('tab') !== -1 ||
+            child.type && child.type.name && child.type.name.toLowerCase().indexOf('kendotabstriptab') !== -1) {
+            foundTabs.push(child);
+        }
+    });
+    return foundTabs;
+};