@progress/kendo-vue-layout 8.4.0-develop.3 → 8.4.0-develop.4

package/splitter/SplitterBar.mjs

@@ -5,12 +5,12 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as v, createVNode as r } from "vue";
-import { Keys as n, classNames as x, Draggable as w, Icon as u } from "@progress/kendo-vue-common";
+import { defineComponent as m, createVNode as n } from "vue";
+import { Keys as a, classNames as x, Draggable as w, Icon as d } from "@progress/kendo-vue-common";
 import { provideLocalizationService as k } from "@progress/kendo-vue-intl";
-import { splitterPaneLabel as b, messages as $ } from "../messages/main.mjs";
-import { caretAltLeftIcon as c, caretAltRightIcon as p, caretAltDownIcon as f, caretAltUpIcon as m } from "@progress/kendo-svg-icons";
-const C = /* @__PURE__ */ v({
+import { splitterPaneLabel as f, messages as $ } from "../messages/main.mjs";
+import { chevronLeftIcon as c, chevronRightIcon as p, chevronDownIcon as b, chevronUpIcon as v } from "@progress/kendo-svg-icons";
+const C = /* @__PURE__ */ m({
   name: "KendoSplitterBar",
   emits: {
     drag: null,
@@ -37,16 +37,16 @@ const C = /* @__PURE__ */ v({
     isStatic() {
       const {
         prev: t,
-        next: s
-      } = this.$props, e = t.resizable && s.resizable, l = t.collapsible || s.collapsible;
-      return !e && !l;
+        next: r
+      } = this.$props, e = t.resizable && r.resizable, s = t.collapsible || r.collapsible;
+      return !e && !s;
     },
     isDraggable() {
       const {
         prev: t,
-        next: s
-      } = this.$props, e = t.resizable && s.resizable, l = t.collapsed || s.collapsed;
-      return !!e && !l;
+        next: r
+      } = this.$props, e = t.resizable && r.resizable, s = t.collapsed || r.collapsed;
+      return !!e && !s;
     },
     isHorizontal() {
       return this.$props.orientation === "horizontal";
@@ -66,25 +66,25 @@ const C = /* @__PURE__ */ v({
     this.$el && (this.draggable = this.$refs.draggable);
   },
   render() {
-    const t = this.isDraggable, s = this.isStatic, e = this.isHorizontal, l = x("k-splitbar", {
+    const t = this.isDraggable, r = this.isStatic, e = this.isHorizontal, s = x("k-splitbar", {
       "k-focus": this.focused,
       "k-splitbar-horizontal": e,
       "k-splitbar-vertical": !e,
       "k-splitbar-draggable-horizontal": e && t,
       "k-splitbar-draggable-vertical": !e && t,
-      "k-splitbar-static-horizontal": e && s,
-      "k-splitbar-static-vertical": !e && s
-    }), i = this.previousArrowName(e), o = this.previousArrowSVG(e), h = this.nextArrowName(e), g = this.nextArrowSVG(e), d = k(this).toLanguageString(b, $[b]);
-    return r(w, {
-      onPress: (a) => this.onDrag(a, !0, !1),
-      onDrag: (a) => this.onDrag(a, !1, !1),
-      onRelease: (a) => this.onDrag(a, !1, !0),
+      "k-splitbar-static-horizontal": e && r,
+      "k-splitbar-static-vertical": !e && r
+    }), i = this.previousArrowName(e), o = this.previousArrowSVG(e), h = this.nextArrowName(e), u = this.nextArrowSVG(e), g = k(this).toLanguageString(f, $[f]);
+    return n(w, {
+      onPress: (l) => this.onDrag(l, !0, !1),
+      onDrag: (l) => this.onDrag(l, !1, !1),
+      onRelease: (l) => this.onDrag(l, !1, !0),
       ref: "draggable"
     }, {
-      default: () => [r("div", {
-        tabindex: s ? -1 : 0,
+      default: () => [n("div", {
+        tabindex: r ? -1 : 0,
         role: "separator",
-        class: l,
+        class: s,
         style: {
           touchAction: "none"
         },
@@ -92,33 +92,33 @@ const C = /* @__PURE__ */ v({
         onFocusout: this.onBlur,
         onDblclick: this.onToggle,
         onKeydown: this.onKeyDown,
-        "aria-label": d,
+        "aria-label": g,
         "aria-orientation": this.isHorizontal ? "vertical" : "horizontal"
-      }, [this.prev.collapsible && r("span", {
+      }, [this.prev.collapsible && n("span", {
         class: "k-collapse-prev",
         onClick: this.onPrevToggle
-      }, [r(u, {
+      }, [n(d, {
         name: i,
         icon: o,
         size: "xsmall"
-      }, null)]), r("div", {
+      }, null)]), n("div", {
         class: "k-resize-handle"
-      }, null), this.next.collapsible && r("span", {
+      }, null), this.next.collapsible && n("span", {
         class: "k-collapse-next",
         onClick: this.onNextToggle
-      }, [r(u, {
+      }, [n(d, {
         name: h,
-        icon: g,
+        icon: u,
         size: "xsmall"
       }, null)])])]
     });
   },
   methods: {
-    onDrag(t, s, e) {
-      const l = t, {
+    onDrag(t, r, e) {
+      const s = t, {
         index: i
       } = this.$props, o = this.draggable && this.draggable.element;
-      !e && l && l.originalEvent.preventDefault(), o && !this.isStatic && this.isDraggable && this.$emit("drag", l, o, i, s, e);
+      !e && s && s.originalEvent.preventDefault(), o && !this.isStatic && this.isDraggable && this.$emit("drag", s, o, i, r, e);
     },
     onFocus() {
       this.focused = !0;
@@ -128,57 +128,71 @@ const C = /* @__PURE__ */ v({
     },
     onToggle(t) {
       const {
-        index: s,
+        index: r,
         prev: e,
-        next: l
+        next: s
       } = this.$props;
-      (e.collapsible || l.collapsible) && this.$emit("toggle", e.collapsible ? s : s + 1, t);
+      (e.collapsible || s.collapsible) && this.$emit("toggle", e.collapsible ? r : r + 1, t);
     },
     onPrevToggle(t) {
       const {
-        index: s,
+        index: r,
         prev: e
       } = this.$props;
-      e.collapsible && this.$emit("toggle", s, t);
+      e.collapsible && this.$emit("toggle", r, t);
     },
     onNextToggle(t) {
       const {
-        index: s,
+        index: r,
         next: e
       } = this.$props;
-      e.collapsible && this.$emit("toggle", s + 1, t);
+      e.collapsible && this.$emit("toggle", r + 1, t);
     },
     onKeyDown(t) {
-      const s = t && t.keyCode, e = this.isHorizontal, {
-        index: l
-      } = this.$props, i = this.draggable && this.draggable.element, o = (h, g, d) => {
-        t.preventDefault(), this.$emit("keyboardresize", h, g, d, t);
+      const r = t && t.keyCode, e = this.isHorizontal, {
+        index: s
+      } = this.$props, i = this.draggable && this.draggable.element, o = (h, u, g) => {
+        t.preventDefault(), this.$emit("keyboardresize", h, u, g, t);
       };
-      i && (s === n.enter ? (t.preventDefault(), this.onToggle(t)) : this.isDraggable && (e && s === n.left ? o(i, l, -10) : e && s === n.right ? o(i, l, 10) : !e && s === n.up ? o(i, l, -10) : !e && s === n.down && o(i, l, 10)));
+      i && (r === a.enter ? (t.preventDefault(), this.onToggle(t)) : this.isDraggable && (e && r === a.left ? o(i, s, -10) : e && r === a.right ? o(i, s, 10) : !e && r === a.up ? o(i, s, -10) : !e && r === a.down && o(i, s, 10)));
     },
     previousArrowName(t) {
       const {
-        prev: s
-      } = this.$props, e = s.collapsed;
-      return t && !e ? this.isRtl ? "caret-alt-right" : "caret-alt-left" : t && e ? this.isRtl ? "caret-alt-left" : "caret-alt-right" : !t && !e ? "caret-alt-up" : !t && e ? "caret-alt-down" : "";
+        prev: r
+      } = this.$props, e = r.collapsed;
+      return t && !e ? this.isRtl ? "chevron-right" : "chevron-left" : t && e ? this.isRtl ? "chevron-left" : "chevron-right" : !t && !e ? "chevron-up" : !t && e ? "chevron-down" : "";
     },
     previousArrowSVG(t) {
       const {
-        prev: s
-      } = this.$props, e = s.collapsed;
-      return t && !e ? this.isRtl ? p : c : t && e ? this.isRtl ? c : p : !t && !e ? m : !t && e ? f : void 0;
+        prev: r
+      } = this.$props, e = r.collapsed;
+      if (t && !e)
+        return this.isRtl ? p : c;
+      if (t && e)
+        return this.isRtl ? c : p;
+      if (!t && !e)
+        return v;
+      if (!t && e)
+        return b;
     },
     nextArrowName(t) {
       const {
-        next: s
-      } = this.$props, e = s.collapsed;
-      return t && !e ? this.isRtl ? "caret-alt-left" : "caret-alt-right" : t && e ? this.isRtl ? "caret-alt-right" : "caret-alt-left" : !t && !e ? "caret-alt-down" : !t && e ? "caret-alt-up" : "";
+        next: r
+      } = this.$props, e = r.collapsed;
+      return t && !e ? this.isRtl ? "chevron-left" : "chevron-right" : t && e ? this.isRtl ? "chevron-right" : "chevron-left" : !t && !e ? "chevron-down" : !t && e ? "chevron-up" : "";
     },
     nextArrowSVG(t) {
       const {
-        next: s
-      } = this.$props, e = s.collapsed;
-      return t && !e ? this.isRtl ? c : p : t && e ? this.isRtl ? p : c : !t && !e ? f : !t && e ? m : void 0;
+        next: r
+      } = this.$props, e = r.collapsed;
+      if (t && !e)
+        return this.isRtl ? c : p;
+      if (t && e)
+        return this.isRtl ? p : c;
+      if (!t && !e)
+        return b;
+      if (!t && e)
+        return v;
     }
   }
 });

package/stepper/Step.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 t=require("vue"),r=require("@progress/kendo-vue-common"),q=require("@progress/kendo-vue-intl"),k=require("@progress/kendo-svg-icons"),S=require("./contants.js"),b=require("./messages/main.js"),D=t.defineComponent({name:"KendoStep",props:{current:Boolean,disabled:Boolean,icon:String,svgIcon:Object,index:Number,isValid:{type:Boolean,default:void 0},focused:Boolean,label:String,optional:Boolean,tabIndex:{type:Number,default:0},text:String,animationDuration:[Boolean,Number],isVertical:Boolean,item:[String,Object,Boolean,Function],linear:Boolean,mode:String,numOfSteps:Number,value:Number,successIcon:String,successSvgIcon:Object,errorIcon:String,errorSvgIcon:Object,onChange:Function,onFocus:Function},inject:{kendoLocalizationService:{default:null}},computed:{itemClassNames(){const{current:e,disabled:n,focused:i,index:o,isValid:s,optional:d}=this.$props;return{"k-step":!0,"k-step-first":o===0,"k-step-last":this.numOfSteps&&o===this.numOfSteps-1,"k-step-done":o<this.value,"k-step-current":e,"k-step-optional":d,"k-disabled":n,"k-focus":i,"k-step-error":s!==void 0&&!s,"k-step-success":s}},itemStyles(){const{index:e}=this.$props,n=!this.linear||e===this.value-1||e===this.value||e===this.value+1;return{maxWidth:this.isVertical?void 0:`calc(100% / ${this.numOfSteps})`,pointerEvents:n?void 0:"none"}}},watch:{focused(e){this.aElement=this.$refs.aElement,this.aElement&&e&&this.aElement.focus()}},setup(){return{kendoLocalizationService:t.inject("kendoLocalizationService",{})}},render(){const e=r.getDefaultSlots(this),{current:n,disabled:i,focused:o,icon:s,svgIcon:d,index:a,isValid:c,label:l,optional:I,tabIndex:m,text:g,animationDuration:u,item:v,linear:N,mode:V,value:p,successIcon:x,successSvgIcon:C,errorIcon:O,errorSvgIcon:F}=this.$props,y=!N||a===p-1||a===p||a===p+1,B=q.provideLocalizationService(this),$=(f=>B.toLanguageString(f,b.messages[f]))(b.optionalText),z=typeof u=="number"?u:u!==!1?S.DEFAULT_ANIMATION_DURATION:S.NO_ANIMATION,L=c?x||"check-circle":O||"exclamation-circle",j=c?C||k.checkOutlineIcon:F||k.exclamationCircleIcon,h=t.createVNode(r.Icon,{class:"k-step-indicator-icon",name:r.getIconName(L),icon:j,"aria-hidden":"true"},null),A=function(){return V!=="labels"?t.createVNode("span",{class:"k-step-indicator","aria-hidden":!0,style:{transitionDuration:z+"ms"}},[this.getStepIndicatorContent(l,s,d,g,a,c,h)]):null},E=function(){return t.createVNode("span",{class:"k-step-label"},[l&&t.createVNode("span",{class:"k-step-text"},[l]),l&&c!==void 0&&h,I&&t.createVNode("span",{class:"k-step-label-optional"},[$])])};return t.createVNode("li",{class:this.itemClassNames,style:this.itemStyles},[t.createVNode("a",{ref:"aElement",class:"k-step-link",title:l||void 0,onClick:this.handleClick,onFocusin:this.handleFocus,"tab-index":m||(n?0:-1),"aria-current":n?!0:void 0,"aria-disabled":i||!y||void 0,"aria-invalid":c!==void 0&&!c||void 0},[v?e:[A.call(this),E.call(this)]])])},methods:{getStepIndicatorContent(e,n,i,o,s,d,a){return e?n||i?t.createVNode(r.Icon,{class:"k-step-indicator-icon",name:n,icon:i},null):t.createVNode("span",{class:"k-step-indicator-text"},[o||s+1]):d!==void 0?a:n||i?t.createVNode(r.Icon,{class:"k-step-indicator-icon",name:n,icon:i},null):t.createVNode("span",{class:"k-step-indicator-text"},[o||s+1])},focus(){this.$el&&r.focusFirstFocusableChild(this.$el)},handleClick(e){this.disabled||this.$emit("change",{event:e,value:this.index,component:this})},handleFocus(e){this.disabled||this.$emit("focus",e)}}});exports.Step=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),r=require("@progress/kendo-vue-common"),q=require("@progress/kendo-vue-intl"),k=require("@progress/kendo-svg-icons"),S=require("./contants.js"),b=require("./messages/main.js"),D=t.defineComponent({name:"KendoStep",props:{current:Boolean,disabled:Boolean,icon:String,svgIcon:Object,index:Number,isValid:{type:Boolean,default:void 0},focused:Boolean,label:String,optional:Boolean,tabIndex:{type:Number,default:0},text:String,animationDuration:[Boolean,Number],isVertical:Boolean,item:[String,Object,Boolean,Function],linear:Boolean,mode:String,numOfSteps:Number,value:Number,successIcon:String,successSvgIcon:Object,errorIcon:String,errorSvgIcon:Object,onChange:Function,onFocus:Function},inject:{kendoLocalizationService:{default:null}},computed:{itemClassNames(){const{current:e,disabled:n,focused:i,index:o,isValid:s,optional:d}=this.$props;return{"k-step":!0,"k-step-first":o===0,"k-step-last":this.numOfSteps&&o===this.numOfSteps-1,"k-step-done":o<this.value,"k-step-current":e,"k-step-optional":d,"k-disabled":n,"k-focus":i,"k-step-error":s!==void 0&&!s,"k-step-success":s}},itemStyles(){const{index:e}=this.$props,n=!this.linear||e===this.value-1||e===this.value||e===this.value+1;return{maxWidth:this.isVertical?void 0:`calc(100% / ${this.numOfSteps})`,pointerEvents:n?void 0:"none"}}},watch:{focused(e){this.aElement=this.$refs.aElement,this.aElement&&e&&this.aElement.focus()}},setup(){return{kendoLocalizationService:t.inject("kendoLocalizationService",{})}},render(){const e=r.getDefaultSlots(this),{current:n,disabled:i,focused:o,icon:s,svgIcon:d,index:a,isValid:c,label:l,optional:I,tabIndex:m,text:g,animationDuration:u,item:v,linear:N,mode:V,value:p,successIcon:x,successSvgIcon:C,errorIcon:O,errorSvgIcon:F}=this.$props,y=!N||a===p-1||a===p||a===p+1,B=q.provideLocalizationService(this),$=(f=>B.toLanguageString(f,b.messages[f]))(b.optionalText),z=typeof u=="number"?u:u!==!1?S.DEFAULT_ANIMATION_DURATION:S.NO_ANIMATION,L=c?x||"check-circle":O||"exclamation-circle",j=c?C||k.checkIcon:F||k.exclamationCircleIcon,h=t.createVNode(r.Icon,{class:"k-step-indicator-icon",name:r.getIconName(L),icon:j,"aria-hidden":"true"},null),A=function(){return V!=="labels"?t.createVNode("span",{class:"k-step-indicator","aria-hidden":!0,style:{transitionDuration:z+"ms"}},[this.getStepIndicatorContent(l,s,d,g,a,c,h)]):null},E=function(){return t.createVNode("span",{class:"k-step-label"},[l&&t.createVNode("span",{class:"k-step-text"},[l]),l&&c!==void 0&&h,I&&t.createVNode("span",{class:"k-step-label-optional"},[$])])};return t.createVNode("li",{class:this.itemClassNames,style:this.itemStyles},[t.createVNode("a",{ref:"aElement",class:"k-step-link",title:l||void 0,onClick:this.handleClick,onFocusin:this.handleFocus,"tab-index":m||(n?0:-1),"aria-current":n?!0:void 0,"aria-disabled":i||!y||void 0,"aria-invalid":c!==void 0&&!c||void 0},[v?e:[A.call(this),E.call(this)]])])},methods:{getStepIndicatorContent(e,n,i,o,s,d,a){return e?n||i?t.createVNode(r.Icon,{class:"k-step-indicator-icon",name:n,icon:i},null):t.createVNode("span",{class:"k-step-indicator-text"},[o||s+1]):d!==void 0?a:n||i?t.createVNode(r.Icon,{class:"k-step-indicator-icon",name:n,icon:i},null):t.createVNode("span",{class:"k-step-indicator-text"},[o||s+1])},focus(){this.$el&&r.focusFirstFocusableChild(this.$el)},handleClick(e){this.disabled||this.$emit("change",{event:e,value:this.index,component:this})},handleFocus(e){this.disabled||this.$emit("focus",e)}}});exports.Step=D;

package/stepper/Step.mjs

@@ -8,7 +8,7 @@
 import { defineComponent as E, createVNode as n, inject as j } from "vue";
 import { focusFirstFocusableChild as D, Icon as p, getDefaultSlots as V, getIconName as M } from "@progress/kendo-vue-common";
 import { provideLocalizationService as T } from "@progress/kendo-vue-intl";
-import { checkOutlineIcon as w, exclamationCircleIcon as _ } from "@progress/kendo-svg-icons";
+import { checkIcon as w, exclamationCircleIcon as _ } from "@progress/kendo-svg-icons";
 import { DEFAULT_ANIMATION_DURATION as U, NO_ANIMATION as K } from "./contants.mjs";
 import { messages as R, optionalText as W } from "./messages/main.mjs";
 const Y = /* @__PURE__ */ E({