@progress/kendo-vue-layout 6.0.0-develop.2 → 6.0.0-develop.4

package/tabstrip/TabStrip.mjs

@@ -5,12 +5,12 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as f, createVNode as n, h as T } from "vue";
+import { defineComponent as f, createVNode as n, h as g } from "vue";
 import { TabStripNavigation as o } from "./TabStripNavigation.mjs";
-import { TabStripContent as g } from "./TabStripContent.mjs";
-import { templateRendering as l, getListeners as h, Keys as s, validatePackage as k, shouldShowValidationUI as v, classNames as y, WatermarkOverlay as w, getDefaultSlots as S } from "@progress/kendo-vue-common";
+import { TabStripContent as T } from "./TabStripContent.mjs";
+import { templateRendering as l, getListeners as h, Keys as i, validatePackage as k, shouldShowValidationUI as v, classNames as y, WatermarkOverlay as w, getDefaultSlots as S } from "@progress/kendo-vue-common";
 import { packageMetadata as d } from "../package-metadata.mjs";
-const B = /* @__PURE__ */ f({
+const K = /* @__PURE__ */ f({
   name: "KendoTabStrip",
   emits: {
     select: null
@@ -25,6 +25,10 @@ const B = /* @__PURE__ */ f({
       type: String,
       default: "top"
     },
+    tabAlignment: {
+      type: String,
+      default: "start"
+    },
     tabs: {
       type: Array,
       default: void 0
@@ -42,11 +46,11 @@ const B = /* @__PURE__ */ f({
   computed: {
     compTabs() {
       return this.tabs !== void 0 ? this.tabs.map(function(t) {
-        const e = l.call(this, t.content, h.call(this)), i = l.call(this, t.titleRender, h.call(this));
+        const e = l.call(this, t.content, h.call(this)), s = l.call(this, t.titleRender, h.call(this));
         return {
           ...t,
           content: e,
-          titleRender: i
+          titleRender: s
         };
       }, this) : this.currentTabs;
     }
@@ -60,12 +64,12 @@ const B = /* @__PURE__ */ f({
   },
   created() {
     this.keyBinding = {
-      [s.left]: () => this.prevNavigatableTab(),
-      [s.right]: () => this.nextNavigatableTab(),
-      [s.down]: () => this.nextNavigatableTab(),
-      [s.up]: () => this.prevNavigatableTab(),
-      [s.home]: () => 0,
-      [s.end]: () => this.compTabs.length - 1
+      [i.left]: () => this.prevNavigatableTab(),
+      [i.right]: () => this.nextNavigatableTab(),
+      [i.down]: () => this.nextNavigatableTab(),
+      [i.up]: () => this.prevNavigatableTab(),
+      [i.home]: () => 0,
+      [i.end]: () => this.compTabs.length - 1
     }, k(d), this.showLicenseWatermark = v(d);
   },
   watch: {
@@ -77,14 +81,14 @@ const B = /* @__PURE__ */ f({
   },
   methods: {
     addRenderTitle(t, e) {
-      const i = this.compTabs.findIndex((a) => a.tabId === t);
-      this.compTabs[i].titleRender = e;
+      const s = this.compTabs.findIndex((a) => a.tabId === t);
+      this.compTabs[s].titleRender = e;
     },
     addTab(t) {
       this.currentTabs.push(t);
     },
     removeTab(t) {
-      const e = this.currentTabs.findIndex((i) => i.tabId === t);
+      const e = this.currentTabs.findIndex((s) => s.tabId === t);
       this.currentTabs.splice(e, 1);
     },
     onSelect(t) {
@@ -95,23 +99,23 @@ const B = /* @__PURE__ */ f({
     onKeyDown(t) {
       let e;
       switch (t.keyCode) {
-        case s.left:
-          e = this.keyBinding[this.invertKeys(s.left, s.right)];
+        case i.left:
+          e = this.keyBinding[this.invertKeys(i.left, i.right)];
           break;
-        case s.right:
-          e = this.keyBinding[this.invertKeys(s.right, s.left)];
+        case i.right:
+          e = this.keyBinding[this.invertKeys(i.right, i.left)];
           break;
-        case s.up:
-          e = this.keyBinding[s.up];
+        case i.up:
+          e = this.keyBinding[i.up];
           break;
-        case s.down:
-          e = this.keyBinding[s.down];
+        case i.down:
+          e = this.keyBinding[i.down];
           break;
-        case s.home:
-          e = this.keyBinding[s.home];
+        case i.home:
+          e = this.keyBinding[i.home];
           break;
-        case s.end:
-          e = this.keyBinding[s.end];
+        case i.end:
+          e = this.keyBinding[i.end];
           break;
       }
       e && (t.preventDefault(), this.onSelect(e()));
@@ -138,11 +142,11 @@ const B = /* @__PURE__ */ f({
     prevNavigatableTab() {
       const t = this.compTabs.length, {
         selected: e
-      } = this.$props, i = e ? e - 1 : -1;
-      if (i < 0)
+      } = this.$props, s = e ? e - 1 : -1;
+      if (s < 0)
         return this.lastNavigatableTab();
       if (t)
-        for (let a = i; a > -1; a--) {
+        for (let a = s; a > -1; a--) {
           if (!this.compTabs[a].disabled)
             return a;
           if (a === 0)
@@ -152,11 +156,11 @@ const B = /* @__PURE__ */ f({
     nextNavigatableTab() {
       const t = this.compTabs.length, {
         selected: e
-      } = this.$props, i = e ? e + 1 : 1;
-      if (i >= t)
+      } = this.$props, s = e ? e + 1 : 1;
+      if (s >= t)
         return this.firstNavigatableTab();
       if (t)
-        for (let a = i; a < t; a++) {
+        for (let a = s; a < t; a++) {
           if (!this.compTabs[a].disabled)
             return a;
           if (a + 1 === t)
@@ -168,7 +172,7 @@ const B = /* @__PURE__ */ f({
     const {
       tabPosition: t,
       tabIndex: e = 0
-    } = this.$props, i = t === "bottom", a = y("k-widget", "k-pos-relative", "k-tabstrip", {
+    } = this.$props, s = t === "bottom", a = y("k-widget", "k-pos-relative", "k-tabstrip", {
       "k-tabstrip-left": t === "left",
       "k-tabstrip-right": t === "right",
       "k-tabstrip-bottom": t === "bottom",
@@ -184,21 +188,23 @@ const B = /* @__PURE__ */ f({
         selected: r,
         showAll: this.currentShowAll
       };
-      return T(g, {
+      return g(T, {
         ...u
       }, m);
     };
     return n("div", {
       dir: this.$props.dir,
       class: a
-    }, [!i && n(o, {
+    }, [!s && n(o, {
       tabs: this.compTabs,
       selected: this.$props.selected,
+      tabAlignment: this.$props.tabAlignment,
       onSelect: this.onSelect,
       onKeydown: this.onKeyDown,
       tabIndex: e
-    }, null), b.call(this, this.$props), i && n(o, {
+    }, null), b.call(this, this.$props), s && n(o, {
       tabs: this.compTabs,
+      tabAlignment: this.$props.tabAlignment,
       selected: this.$props.selected,
       onSelect: this.onSelect,
       onKeydown: this.onKeyDown,
@@ -207,5 +213,5 @@ const B = /* @__PURE__ */ f({
   }
 });
 export {
-  B as TabStrip
+  K as TabStrip
 };

package/tabstrip/TabStripNavigation.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),r=require("./TabStripNavigationItem.js"),l=t=>Array.apply(null,Array(t)),p=s.defineComponent({name:"KendoTabStripNavigation",emits:{select:null,keydown:null},props:{tabs:Array,selected:Number,tabIndex:Number,tabPosition:String,onSelect:Function,onKeydown:Function},computed:{wrapperNavClasses(){return{"k-tabstrip-items-wrapper":!0,"k-hstack":this.$props.tabPosition==="top"||this.$props.tabPosition==="bottom","k-vstack":this.$props.tabPosition==="left"||this.$props.tabPosition==="right"}},navClasses(){return{"k-tabstrip-items":!0,"k-reset":!0}}},render(){const{tabs:t,selected:i}=this.$props,o=t.length,a=function(){return l(o).map(function(c,e,n){return s.createVNode(r.TabStripNavigationItem,{key:e,active:i===e,disabled:t[e].disabled,index:e,title:t[e].title,id:t[e].id,titleRender:t[e].titleRender,first:e===0,last:e===n.length-1,onSelect:this.onNavigationItemSelect},null)},this)};return s.createVNode("div",{class:this.wrapperNavClasses},[s.createVNode("ul",{class:this.navClasses,role:"tablist",tabindex:this.$props.tabIndex,onKeydown:this.onKeyDown},[a.call(this)])])},methods:{onKeyDown(t){this.$emit("keydown",t)},onNavigationItemSelect(t){this.$emit("select",t)}}});exports.TabStripNavigation=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),o=require("./TabStripNavigationItem.js"),p=require("@progress/kendo-vue-common"),l=t=>Array.apply(null,Array(t)),b=s.defineComponent({name:"KendoTabStripNavigation",emits:{select:null,keydown:null},props:{tabs:Array,selected:Number,tabIndex:Number,tabPosition:String,tabAlignment:String,onSelect:Function,onKeydown:Function},computed:{wrapperNavClasses(){return{"k-tabstrip-items-wrapper":!0,"k-hstack":this.$props.tabPosition==="top"||this.$props.tabPosition==="bottom","k-vstack":this.$props.tabPosition==="left"||this.$props.tabPosition==="right"}},navClasses(){return p.classNames("k-tabstrip-items",{"k-tabstrip-items-start":this.$props.tabAlignment==="start","k-tabstrip-items-center":this.$props.tabAlignment==="center","k-tabstrip-items-end":this.$props.tabAlignment==="end","k-tabstrip-items-stretched":this.$props.tabAlignment==="stretched","k-tabstrip-items-justify":this.$props.tabAlignment==="justify"},"k-reset")}},render(){const{tabs:t,selected:i}=this.$props,n=t.length,a=function(){return l(n).map(function(c,e,r){return s.createVNode(o.TabStripNavigationItem,{key:e,active:i===e,disabled:t[e].disabled,index:e,title:t[e].title,id:t[e].id,titleRender:t[e].titleRender,first:e===0,last:e===r.length-1,onSelect:this.onNavigationItemSelect},null)},this)};return s.createVNode("div",{class:this.wrapperNavClasses},[s.createVNode("ul",{class:this.navClasses,role:"tablist",tabindex:this.$props.tabIndex,onKeydown:this.onKeyDown},[a.call(this)])])},methods:{onKeyDown(t){this.$emit("keydown",t)},onNavigationItemSelect(t){this.$emit("select",t)}}});exports.TabStripNavigation=b;

package/tabstrip/TabStripNavigation.mjs

@@ -5,9 +5,10 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as a, createVNode as s } from "vue";
-import { TabStripNavigationItem as l } from "./TabStripNavigationItem.mjs";
-const p = (t) => Array.apply(null, Array(t)), u = /* @__PURE__ */ a({
+import { defineComponent as o, createVNode as s } from "vue";
+import { TabStripNavigationItem as p } from "./TabStripNavigationItem.mjs";
+import { classNames as l } from "@progress/kendo-vue-common";
+const m = (t) => Array.apply(null, Array(t)), u = /* @__PURE__ */ o({
   name: "KendoTabStripNavigation",
   emits: {
     select: null,
@@ -18,6 +19,7 @@ const p = (t) => Array.apply(null, Array(t)), u = /* @__PURE__ */ a({
     selected: Number,
     tabIndex: Number,
     tabPosition: String,
+    tabAlignment: String,
     onSelect: Function,
     onKeydown: Function
   },
@@ -30,28 +32,31 @@ const p = (t) => Array.apply(null, Array(t)), u = /* @__PURE__ */ a({
       };
     },
     navClasses() {
-      return {
-        "k-tabstrip-items": !0,
-        "k-reset": !0
-      };
+      return l("k-tabstrip-items", {
+        "k-tabstrip-items-start": this.$props.tabAlignment === "start",
+        "k-tabstrip-items-center": this.$props.tabAlignment === "center",
+        "k-tabstrip-items-end": this.$props.tabAlignment === "end",
+        "k-tabstrip-items-stretched": this.$props.tabAlignment === "stretched",
+        "k-tabstrip-items-justify": this.$props.tabAlignment === "justify"
+      }, "k-reset");
     }
   },
   render() {
     const {
       tabs: t,
-      selected: o
-    } = this.$props, i = t.length, n = function() {
-      return p(i).map(function(c, e, r) {
-        return s(l, {
+      selected: i
+    } = this.$props, n = t.length, r = function() {
+      return m(n).map(function(b, e, a) {
+        return s(p, {
           key: e,
-          active: o === e,
+          active: i === e,
           disabled: t[e].disabled,
           index: e,
           title: t[e].title,
           id: t[e].id,
           titleRender: t[e].titleRender,
           first: e === 0,
-          last: e === r.length - 1,
+          last: e === a.length - 1,
           onSelect: this.onNavigationItemSelect
         }, null);
       }, this);
@@ -63,7 +68,7 @@ const p = (t) => Array.apply(null, Array(t)), u = /* @__PURE__ */ a({
       role: "tablist",
       tabindex: this.$props.tabIndex,
       onKeydown: this.onKeyDown
-    }, [n.call(this)])]);
+    }, [r.call(this)])]);
   },
   methods: {
     onKeyDown(t) {