@progress/kendo-vue-layout 3.2.0 → 3.2.1

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: 1649822873,
+    publishDate: 1650007910,
     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/tabstrip/TabStrip.d.ts

@@ -49,6 +49,10 @@ export interface TabStripProps extends TabStripEmits {
      * - `"right"`—Renders the `TabStripNavigation` components to the right of the TabStrip.
      */
     tabPosition?: string;
+    /**
+     * Sets the array of tabs.
+     */
+    tabs?: TabStripTabProperties[];
     /**
      * Sets the `tabIndex` of the TabStripNavigation.
      */

package/dist/es/tabstrip/TabStrip.js

@@ -22,7 +22,7 @@ var ref = allVue.ref;
 var inject = allVue.inject;
 import { TabStripNavigation } from './TabStripNavigation';
 import { TabStripContent } from './TabStripContent';
-import { Keys, classNames, getDefaultSlots, validatePackage } from '@progress/kendo-vue-common';
+import { Keys, classNames, getDefaultSlots, validatePackage, templateRendering, getListeners } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 /**
  * Represents the default `TabStrip` component.
@@ -45,6 +45,10 @@ var TabStripVue2 = {
       type: String,
       default: 'top'
     },
+    tabs: {
+      type: Array,
+      default: undefined
+    },
     tabIndex: Number,
     dir: String
   },
@@ -54,6 +58,16 @@ var TabStripVue2 = {
       currentTabs: []
     };
   },
+  computed: {
+    compTabs: function compTabs() {
+      return this.tabs !== undefined ? this.tabs.map(function (tab) {
+        var content = templateRendering.call(this, tab.content, getListeners.call(this));
+        return __assign(__assign({}, tab), {
+          content: content
+        });
+      }, this) : this.currentTabs;
+    }
+  },
   provide: function provide() {
     return {
       addRenderTitle: this.addRenderTitle,
@@ -77,7 +91,7 @@ var TabStripVue2 = {
     }, _a[Keys.home] = function () {
       return 0;
     }, _a[Keys.end] = function () {
-      return _this.currentTabs.length - 1;
+      return _this.compTabs.length - 1;
     }, _a);
     validatePackage(packageMetadata);
   },
@@ -93,14 +107,14 @@ var TabStripVue2 = {
   },
   methods: {
     addRenderTitle: function addRenderTitle(currentId, titleTemplate) {
-      var indexToUpdate = this.currentTabs.findIndex(function (e) {
+      var indexToUpdate = this.compTabs.findIndex(function (e) {
         return e.id === currentId;
       });
 
       if (this.v3) {
-        this.currentTabs[indexToUpdate].titleRender = titleTemplate;
+        this.compTabs[indexToUpdate].titleRender = titleTemplate;
       } else {
-        this.currentTabs[indexToUpdate] = __assign(__assign({}, this.currentTabs[indexToUpdate]), {
+        this.compTabs[indexToUpdate] = __assign(__assign({}, this.compTabs[indexToUpdate]), {
           titleRender: titleTemplate
         });
       }
@@ -163,29 +177,29 @@ var TabStripVue2 = {
       return rtl ? inverted : original;
     },
     firstNavigatableTab: function firstNavigatableTab() {
-      var length = this.currentTabs.length;
+      var length = this.compTabs.length;
 
       if (length) {
         for (var i = 0; i < length; i++) {
-          if (!this.currentTabs[i].disabled) {
+          if (!this.compTabs[i].disabled) {
             return i;
           }
         }
       }
     },
     lastNavigatableTab: function lastNavigatableTab() {
-      var length = this.currentTabs.length;
+      var length = this.compTabs.length;
 
       if (length) {
         for (var i = length - 1; i > 0; i--) {
-          if (!this.currentTabs[i].disabled) {
+          if (!this.compTabs[i].disabled) {
             return i;
           }
         }
       }
     },
     prevNavigatableTab: function prevNavigatableTab() {
-      var length = this.currentTabs.length;
+      var length = this.compTabs.length;
       var selected = this.$props.selected;
       var index = selected ? selected - 1 : -1;
 
@@ -195,7 +209,7 @@ var TabStripVue2 = {
 
       if (length) {
         for (var i = index; i > -1; i--) {
-          if (!this.currentTabs[i].disabled) {
+          if (!this.compTabs[i].disabled) {
             return i;
           }
 
@@ -206,7 +220,7 @@ var TabStripVue2 = {
       }
     },
     nextNavigatableTab: function nextNavigatableTab() {
-      var length = this.currentTabs.length;
+      var length = this.compTabs.length;
       var selected = this.$props.selected;
       var index = selected ? selected + 1 : 1;
 
@@ -216,7 +230,7 @@ var TabStripVue2 = {
 
       if (length) {
         for (var i = index; i < length; i++) {
-          if (!this.currentTabs[i].disabled) {
+          if (!this.compTabs[i].disabled) {
             return i;
           }
 
@@ -238,12 +252,10 @@ var TabStripVue2 = {
     var _a;
 
     var h = gh || createElement;
-
-    var tabProps = __assign({}, this.$props);
-
-    var tabPosition = tabProps.tabPosition,
-        _b = tabProps.tabIndex,
-        tabIndex = _b === void 0 ? 0 : _b;
+    var _b = this.$props,
+        tabPosition = _b.tabPosition,
+        _c = _b.tabIndex,
+        tabIndex = _c === void 0 ? 0 : _c;
     var bottom = tabPosition === 'bottom';
     var componentClasses = classNames('k-widget', 'k-header', 'k-floatwrap', 'k-tabstrip', (_a = {}, _a['k-tabstrip-left'] = tabPosition === 'left', _a['k-tabstrip-right'] = tabPosition === 'right', _a['k-tabstrip-bottom'] = tabPosition === 'bottom', _a['k-tabstrip-top'] = tabPosition === 'top', _a));
 
@@ -254,7 +266,8 @@ var TabStripVue2 = {
       var tabContentProps = {
         index: selected,
         animation: this.$props.animation,
-        tabs: this.currentTabs,
+        tabs: this.compTabs,
+        hasTabs: this.tabs !== undefined,
         selected: selected,
         tabContentStyle: tabContentStyle,
         showAll: this.currentShowAll
@@ -274,15 +287,15 @@ var TabStripVue2 = {
       "class": componentClasses
     }, [!bottom && // @ts-ignore function children
     h(TabStripNavigation, {
-      tabs: this.currentTabs,
+      tabs: this.compTabs,
       attrs: this.v3 ? undefined : {
-        tabs: this.currentTabs,
-        selected: tabProps.selected,
-        tabContentStyle: tabProps.tabContentStyle,
+        tabs: this.compTabs,
+        selected: this.$props.selected,
+        tabContentStyle: this.$props.tabContentStyle,
         tabIndex: tabIndex
       },
-      selected: tabProps.selected,
-      tabContentStyle: tabProps.tabContentStyle,
+      selected: this.$props.selected,
+      tabContentStyle: this.$props.tabContentStyle,
       onSelect: this.onSelect,
       on: this.v3 ? undefined : {
         "select": this.onSelect,
@@ -290,17 +303,17 @@ var TabStripVue2 = {
       },
       onKeydown: this.onKeyDown,
       tabIndex: tabIndex
-    }), renderContent.call(this, tabProps), bottom && // @ts-ignore function children
+    }), renderContent.call(this, this.$props), bottom && // @ts-ignore function children
     h(TabStripNavigation, {
-      tabs: this.currentTabs,
+      tabs: this.compTabs,
       attrs: this.v3 ? undefined : {
-        tabs: this.currentTabs,
-        selected: tabProps.selected,
-        tabContentStyle: tabProps.tabContentStyle,
+        tabs: this.compTabs,
+        selected: this.$props.selected,
+        tabContentStyle: this.$props.tabContentStyle,
         tabIndex: tabIndex
       },
-      selected: tabProps.selected,
-      tabContentStyle: tabProps.tabContentStyle,
+      selected: this.$props.selected,
+      tabContentStyle: this.$props.tabContentStyle,
       onSelect: this.onSelect,
       on: this.v3 ? undefined : {
         "select": this.onSelect,

package/dist/es/tabstrip/TabStripContent.d.ts

@@ -31,6 +31,10 @@ export interface TabStripContentProps {
      * @hidden
      */
     keepTabsMounted?: boolean;
+    /**
+     * @hidden
+     */
+    hasTabs?: boolean;
 }
 /**
  * @hidden

package/dist/es/tabstrip/TabStripContent.js

@@ -5,7 +5,7 @@ var gh = allVue.h;
 var ref = allVue.ref;
 var inject = allVue.inject;
 import { Fade } from '@progress/kendo-vue-animation';
-import { classNames, guid, getDefaultSlots } from '@progress/kendo-vue-common';
+import { classNames, guid, getDefaultSlots, getTemplate } from '@progress/kendo-vue-common';
 import { getTabs } from './utils';
 /**
  * Represents the default `TabStripContent` component.
@@ -17,7 +17,8 @@ var TabStripContentVue2 = {
     showAll: Boolean,
     animation: Boolean,
     tabs: Array,
-    selected: Number
+    selected: Number,
+    hasTabs: Boolean
   },
   created: function created() {
     this.contentId = guid();
@@ -29,15 +30,33 @@ var TabStripContentVue2 = {
       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;
+        showAll = _a.showAll,
+        hasTabs = _a.hasTabs;
     var selectedTab = tabs && typeof selected === 'number' && tabs[selected];
     var defaultSlots = getDefaultSlots(this);
-    var innerTabs = getTabs.call(this, [], defaultSlots);
+    var innerTabs = hasTabs ? tabs : getTabs.call(this, [], defaultSlots || []);
     var tabStyles = selected < innerTabs.length && selected > -1;
     var contentClasses = classNames({
       'k-content': tabStyles
@@ -51,8 +70,14 @@ var TabStripContentVue2 = {
       var visible = idx === this.$props.selected;
       var animationStyle = {
         position: 'initial',
-        display: visible ? undefined : 'none'
+        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,
@@ -62,6 +87,7 @@ var TabStripContentVue2 = {
             exit: this.$props.keepTabsMounted
           },
           key: idx,
+          "class": this.animationClass[idx],
           enter: this.$props.animation,
           exit: this.$props.keepTabsMounted,
           style: animationStyle
@@ -76,7 +102,10 @@ var TabStripContentVue2 = {
             "aria-expanded": true,
             id: String(_this.contentId + idx),
             key: idx
-          }, [tab])];
+          }, [//  hasTabs ? 
+          //     visible ? content : null
+          //     : 
+          content])];
         } : [h("div", {
           role: 'tabpanel',
           attrs: _this.v3 ? undefined : {
@@ -87,12 +116,12 @@ var TabStripContentVue2 = {
           "aria-expanded": true,
           id: String(_this.contentId + idx),
           key: idx
-        }, [tab])])
+        }, [content])])
       );
     };
 
     var renderContent = function renderContent() {
-      return showAll && innerTabs.map(function (tab, idx) {
+      return innerTabs.map(function (tab, idx) {
         return renderChild.call(this, tab, idx);
       }, this);
     };

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

@@ -8,6 +8,7 @@ export interface TabStripTabProperties {
     id: string;
     title?: string;
     titleRender?: any;
+    content?: any;
     contentClassName?: string;
 }
 /**

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-layout',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1649822873,
+    publishDate: 1650007910,
     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/npm/tabstrip/TabStrip.d.ts

@@ -49,6 +49,10 @@ export interface TabStripProps extends TabStripEmits {
      * - `"right"`—Renders the `TabStripNavigation` components to the right of the TabStrip.
      */
     tabPosition?: string;
+    /**
+     * Sets the array of tabs.
+     */
+    tabs?: TabStripTabProperties[];
     /**
      * Sets the `tabIndex` of the TabStripNavigation.
      */

package/dist/npm/tabstrip/TabStrip.js

@@ -57,6 +57,10 @@ var TabStripVue2 = {
       type: String,
       default: 'top'
     },
+    tabs: {
+      type: Array,
+      default: undefined
+    },
     tabIndex: Number,
     dir: String
   },
@@ -66,6 +70,16 @@ var TabStripVue2 = {
       currentTabs: []
     };
   },
+  computed: {
+    compTabs: function compTabs() {
+      return this.tabs !== undefined ? this.tabs.map(function (tab) {
+        var content = kendo_vue_common_1.templateRendering.call(this, tab.content, kendo_vue_common_1.getListeners.call(this));
+        return __assign(__assign({}, tab), {
+          content: content
+        });
+      }, this) : this.currentTabs;
+    }
+  },
   provide: function provide() {
     return {
       addRenderTitle: this.addRenderTitle,
@@ -89,7 +103,7 @@ var TabStripVue2 = {
     }, _a[kendo_vue_common_1.Keys.home] = function () {
       return 0;
     }, _a[kendo_vue_common_1.Keys.end] = function () {
-      return _this.currentTabs.length - 1;
+      return _this.compTabs.length - 1;
     }, _a);
     kendo_vue_common_1.validatePackage(package_metadata_1.packageMetadata);
   },
@@ -105,14 +119,14 @@ var TabStripVue2 = {
   },
   methods: {
     addRenderTitle: function addRenderTitle(currentId, titleTemplate) {
-      var indexToUpdate = this.currentTabs.findIndex(function (e) {
+      var indexToUpdate = this.compTabs.findIndex(function (e) {
         return e.id === currentId;
       });
 
       if (this.v3) {
-        this.currentTabs[indexToUpdate].titleRender = titleTemplate;
+        this.compTabs[indexToUpdate].titleRender = titleTemplate;
       } else {
-        this.currentTabs[indexToUpdate] = __assign(__assign({}, this.currentTabs[indexToUpdate]), {
+        this.compTabs[indexToUpdate] = __assign(__assign({}, this.compTabs[indexToUpdate]), {
           titleRender: titleTemplate
         });
       }
@@ -175,29 +189,29 @@ var TabStripVue2 = {
       return rtl ? inverted : original;
     },
     firstNavigatableTab: function firstNavigatableTab() {
-      var length = this.currentTabs.length;
+      var length = this.compTabs.length;
 
       if (length) {
         for (var i = 0; i < length; i++) {
-          if (!this.currentTabs[i].disabled) {
+          if (!this.compTabs[i].disabled) {
             return i;
           }
         }
       }
     },
     lastNavigatableTab: function lastNavigatableTab() {
-      var length = this.currentTabs.length;
+      var length = this.compTabs.length;
 
       if (length) {
         for (var i = length - 1; i > 0; i--) {
-          if (!this.currentTabs[i].disabled) {
+          if (!this.compTabs[i].disabled) {
             return i;
           }
         }
       }
     },
     prevNavigatableTab: function prevNavigatableTab() {
-      var length = this.currentTabs.length;
+      var length = this.compTabs.length;
       var selected = this.$props.selected;
       var index = selected ? selected - 1 : -1;
 
@@ -207,7 +221,7 @@ var TabStripVue2 = {
 
       if (length) {
         for (var i = index; i > -1; i--) {
-          if (!this.currentTabs[i].disabled) {
+          if (!this.compTabs[i].disabled) {
             return i;
           }
 
@@ -218,7 +232,7 @@ var TabStripVue2 = {
       }
     },
     nextNavigatableTab: function nextNavigatableTab() {
-      var length = this.currentTabs.length;
+      var length = this.compTabs.length;
       var selected = this.$props.selected;
       var index = selected ? selected + 1 : 1;
 
@@ -228,7 +242,7 @@ var TabStripVue2 = {
 
       if (length) {
         for (var i = index; i < length; i++) {
-          if (!this.currentTabs[i].disabled) {
+          if (!this.compTabs[i].disabled) {
             return i;
           }
 
@@ -250,12 +264,10 @@ var TabStripVue2 = {
     var _a;
 
     var h = gh || createElement;
-
-    var tabProps = __assign({}, this.$props);
-
-    var tabPosition = tabProps.tabPosition,
-        _b = tabProps.tabIndex,
-        tabIndex = _b === void 0 ? 0 : _b;
+    var _b = this.$props,
+        tabPosition = _b.tabPosition,
+        _c = _b.tabIndex,
+        tabIndex = _c === void 0 ? 0 : _c;
     var bottom = tabPosition === 'bottom';
     var componentClasses = kendo_vue_common_1.classNames('k-widget', 'k-header', 'k-floatwrap', 'k-tabstrip', (_a = {}, _a['k-tabstrip-left'] = tabPosition === 'left', _a['k-tabstrip-right'] = tabPosition === 'right', _a['k-tabstrip-bottom'] = tabPosition === 'bottom', _a['k-tabstrip-top'] = tabPosition === 'top', _a));
 
@@ -266,7 +278,8 @@ var TabStripVue2 = {
       var tabContentProps = {
         index: selected,
         animation: this.$props.animation,
-        tabs: this.currentTabs,
+        tabs: this.compTabs,
+        hasTabs: this.tabs !== undefined,
         selected: selected,
         tabContentStyle: tabContentStyle,
         showAll: this.currentShowAll
@@ -286,15 +299,15 @@ var TabStripVue2 = {
       "class": componentClasses
     }, [!bottom && // @ts-ignore function children
     h(TabStripNavigation_1.TabStripNavigation, {
-      tabs: this.currentTabs,
+      tabs: this.compTabs,
       attrs: this.v3 ? undefined : {
-        tabs: this.currentTabs,
-        selected: tabProps.selected,
-        tabContentStyle: tabProps.tabContentStyle,
+        tabs: this.compTabs,
+        selected: this.$props.selected,
+        tabContentStyle: this.$props.tabContentStyle,
         tabIndex: tabIndex
       },
-      selected: tabProps.selected,
-      tabContentStyle: tabProps.tabContentStyle,
+      selected: this.$props.selected,
+      tabContentStyle: this.$props.tabContentStyle,
       onSelect: this.onSelect,
       on: this.v3 ? undefined : {
         "select": this.onSelect,
@@ -302,17 +315,17 @@ var TabStripVue2 = {
       },
       onKeydown: this.onKeyDown,
       tabIndex: tabIndex
-    }), renderContent.call(this, tabProps), bottom && // @ts-ignore function children
+    }), renderContent.call(this, this.$props), bottom && // @ts-ignore function children
     h(TabStripNavigation_1.TabStripNavigation, {
-      tabs: this.currentTabs,
+      tabs: this.compTabs,
       attrs: this.v3 ? undefined : {
-        tabs: this.currentTabs,
-        selected: tabProps.selected,
-        tabContentStyle: tabProps.tabContentStyle,
+        tabs: this.compTabs,
+        selected: this.$props.selected,
+        tabContentStyle: this.$props.tabContentStyle,
         tabIndex: tabIndex
       },
-      selected: tabProps.selected,
-      tabContentStyle: tabProps.tabContentStyle,
+      selected: this.$props.selected,
+      tabContentStyle: this.$props.tabContentStyle,
       onSelect: this.onSelect,
       on: this.v3 ? undefined : {
         "select": this.onSelect,

package/dist/npm/tabstrip/TabStripContent.d.ts

@@ -31,6 +31,10 @@ export interface TabStripContentProps {
      * @hidden
      */
     keepTabsMounted?: boolean;
+    /**
+     * @hidden
+     */
+    hasTabs?: boolean;
 }
 /**
  * @hidden

package/dist/npm/tabstrip/TabStripContent.js

@@ -28,7 +28,8 @@ var TabStripContentVue2 = {
     showAll: Boolean,
     animation: Boolean,
     tabs: Array,
-    selected: Number
+    selected: Number,
+    hasTabs: Boolean
   },
   created: function created() {
     this.contentId = kendo_vue_common_1.guid();
@@ -40,15 +41,33 @@ var TabStripContentVue2 = {
       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;
+        showAll = _a.showAll,
+        hasTabs = _a.hasTabs;
     var selectedTab = tabs && typeof selected === 'number' && tabs[selected];
     var defaultSlots = kendo_vue_common_1.getDefaultSlots(this);
-    var innerTabs = utils_1.getTabs.call(this, [], defaultSlots);
+    var innerTabs = hasTabs ? tabs : utils_1.getTabs.call(this, [], defaultSlots || []);
     var tabStyles = selected < innerTabs.length && selected > -1;
     var contentClasses = kendo_vue_common_1.classNames({
       'k-content': tabStyles
@@ -62,8 +81,14 @@ var TabStripContentVue2 = {
       var visible = idx === this.$props.selected;
       var animationStyle = {
         position: 'initial',
-        display: visible ? undefined : 'none'
+        height: visible ? undefined : '0px',
+        width: visible ? undefined : '0px'
       };
+      var content = hasTabs ? kendo_vue_common_1.getTemplate.call(this, {
+        h: h,
+        template: tab.content,
+        defaultRendering: null
+      }) : tab;
       return (// @ts-ignore function children
         h(kendo_vue_animation_1.Fade, {
           appear: this.v3 ? true : visible,
@@ -73,6 +98,7 @@ var TabStripContentVue2 = {
             exit: this.$props.keepTabsMounted
           },
           key: idx,
+          "class": this.animationClass[idx],
           enter: this.$props.animation,
           exit: this.$props.keepTabsMounted,
           style: animationStyle
@@ -87,7 +113,10 @@ var TabStripContentVue2 = {
             "aria-expanded": true,
             id: String(_this.contentId + idx),
             key: idx
-          }, [tab])];
+          }, [//  hasTabs ? 
+          //     visible ? content : null
+          //     : 
+          content])];
         } : [h("div", {
           role: 'tabpanel',
           attrs: _this.v3 ? undefined : {
@@ -98,12 +127,12 @@ var TabStripContentVue2 = {
           "aria-expanded": true,
           id: String(_this.contentId + idx),
           key: idx
-        }, [tab])])
+        }, [content])])
       );
     };
 
     var renderContent = function renderContent() {
-      return showAll && innerTabs.map(function (tab, idx) {
+      return innerTabs.map(function (tab, idx) {
         return renderChild.call(this, tab, idx);
       }, this);
     };

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

@@ -8,6 +8,7 @@ export interface TabStripTabProperties {
     id: string;
     title?: string;
     titleRender?: any;
+    content?: any;
     contentClassName?: string;
 }
 /**