@progress/kendo-vue-layout
Version:
281 lines (280 loc) • 8.33 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { defineComponent as g, createVNode as d, h as I } from "vue";
import { Keys as a, focusFirstFocusableChild as b, getDefaultSlots as S, templateRendering as V, getListeners as x, getTemplate as v, isRtl as y, validatePackage as C } from "@progress/kendo-vue-common";
import { Step as D } from "./Step.mjs";
import { ProgressBar as F } from "@progress/kendo-vue-progressbars";
import { DEFAULT_ANIMATION_DURATION as k, NO_ANIMATION as $ } from "./contants.mjs";
import { packageMetadata as w } from "../package-metadata.mjs";
import { ariaLabel as u, messages as N } from "./messages/main.mjs";
import { provideLocalizationService as O } from "@progress/kendo-vue-intl";
const _ = /* @__PURE__ */ g({
name: "KendoStepper",
model: {
event: "changemodel"
},
inject: {
kendoLocalizationService: {
default: null
}
},
props: {
animationDuration: {
type: [Boolean, Number],
default: 400
},
dir: String,
disabled: Boolean,
item: {
type: [String, Object, Function, Boolean],
default: void 0
},
items: Array,
linear: Boolean,
mode: {
type: String,
default: "steps",
validator: function(e) {
return ["steps", "labels"].includes(e);
}
},
orientation: {
type: String,
default: "horizontal",
validator: function(e) {
return ["horizontal", "vertical"].includes(e);
}
},
value: {
type: Number,
default: 0
},
progressTotal: {
type: Number
},
progress: {
type: Number
},
modelValue: Number,
successIcon: String,
errorIcon: String
},
created() {
C(w), this.focusedIdx = this.computedValue !== void 0 ? this.computedValue : 0;
},
mounted() {
this.currentDir = this.$props.dir !== void 0 ? this.$props.dir : y(this.$el) ? "rtl" : "ltr";
},
data() {
return {
currentDir: "ltr",
focusedIdx: 0,
stepper: {},
currentFocused: !1
};
},
watch: {
value(e) {
this.focusedIdx = e;
}
},
computed: {
computedValue() {
return this.$props.modelValue !== void 0 ? this.$props.modelValue : this.$props.value;
},
isVertical() {
return this.$props.orientation === "vertical";
},
numOfSteps() {
const {
items: e
} = this.$props;
return e ? e.length : 0;
},
stepperClasses() {
return {
"k-stepper": !0,
"k-stepper-linear": this.$props.linear
};
},
stepperStyles() {
return {
display: "grid",
gridTemplateColumns: this.isVertical ? void 0 : "repeat(" + this.numOfSteps * 2 + ", 1fr)",
gridTemplateRows: this.isVertical ? "repeat(" + this.numOfSteps * 4 + ", 1fr)" : void 0
};
},
listClasses() {
return {
"k-step-list": !0,
"k-step-list-horizontal": !this.isVertical,
"k-step-list-vertical": this.isVertical
};
},
listStyles() {
return {
gridColumnStart: this.isVertical ? "" : 1,
gridColumnEnd: this.isVertical ? "" : -1,
gridRowStart: this.isVertical ? 1 : "",
gridRowEnd: this.isVertical ? -1 : ""
};
},
progressbarStyles() {
return {
gridColumnStart: this.isVertical ? "" : 2,
gridColumnEnd: this.isVertical ? "" : this.numOfSteps * 2,
gridRowStart: this.isVertical ? 2 : "",
gridRowEnd: this.isVertical ? this.numOfSteps * 4 - 2 : ""
};
}
},
render() {
const e = S(this), {
animationDuration: t,
disabled: s,
items: r,
orientation: l
} = this.$props, o = this.computedValue, h = typeof t == "number" ? t : t !== !1 ? k : $, p = O(this).toLanguageString(u, N[u]), c = r && r.map(function(i, n) {
const f = this.$props.item ? V.call(this, this.$props.item, x.call(this)) : void 0, m = d(D, {
key: n,
index: n,
disabled: s || i.disabled,
focused: n === this.focusedIdx && this.currentFocused,
current: n === o,
onChange: this.handleChange,
onFocus: this.handleFocus,
class: i.class,
style: i.style,
icon: i.icon,
label: i.label,
optional: i.optional,
text: i.text,
isValid: i.isValid,
tabIndex: i.tabIndex,
animationDuration: this.animationDuration,
isVertical: this.isVertical,
item: this.item,
linear: this.linear,
mode: this.mode,
numOfSteps: this.numOfSteps,
value: o,
successIcon: this.successIcon,
errorIcon: this.errorIcon,
svgIcon: i.svgIcon,
successSvgIcon: i.successSvgIcon,
errorSvgIcon: i.errorSvgIcon
}, null);
return v.call(this, {
h: I,
template: f,
defaultRendering: m,
additionalProps: {
...i,
disabled: s || i.disabled,
focused: n === this.focusedIdx,
current: n === o,
value: o
},
additionalListeners: {
change: this.handleChange,
focus: this.handleFocus
}
});
}, this);
return d("nav", {
tabindex: this.currentFocused ? -1 : 0,
class: this.stepperClasses,
style: this.stepperStyles,
dir: this.currentDir,
onFocusin: this.handleFocusin,
onFocusout: this.handleFocusout,
onKeydown: this.handleKeyDown
}, [d("ol", {
class: this.listClasses,
style: this.listStyles
}, [c || e]), d(F, {
style: this.progressbarStyles,
animation: {
duration: h
},
"aria-hidden": !0,
"aria-label": p,
max: this.progressTotal || this.numOfSteps - 1,
labelVisible: !1,
orientation: l,
reverse: l === "vertical",
value: this.progress || o,
disabled: s,
tabIndex: -1
}, null)]);
},
methods: {
focus() {
this.$el && b(this.$el);
},
dispatchChangeEvent(e, t) {
const s = t === this.computedValue - 1, r = t === this.computedValue, l = t === this.computedValue + 1, o = !this.linear || s || r || l;
this.computedValue !== t && !this.disabled && o && (this.focusedIdx = t, this.$emit("changemodel", t), this.$emit("update:modelValue", t), this.$emit("change", {
component: this,
event: e,
value: t
}));
},
handleChange(e) {
let t = e.value;
this.dispatchChangeEvent(e, t);
},
handleFocus(e) {
this.disabled || this.$emit("focus", e, void 0);
},
handleEnter(e) {
const t = {
component: this,
event: e,
value: this.focusedIdx
};
this.dispatchChangeEvent(t, this.focusedIdx);
},
handleFocusin() {
this.currentFocused = !0;
},
handleFocusout() {
this.currentFocused = !1;
},
handleKeyDown(e) {
const t = this.currentDir === "rtl", s = this.focusedIdx, r = this.items.length - 1;
switch (e.keyCode) {
case a.left:
e.preventDefault(), !t && s > 0 && (this.focusedIdx = s - 1), t && s < r && (this.focusedIdx = s + 1);
break;
case a.right:
e.preventDefault(), !t && s < r && (this.focusedIdx = s + 1), t && s > 0 && (this.focusedIdx = s - 1);
break;
case a.up:
e.preventDefault(), !t && s > 0 && (this.focusedIdx = s - 1), t && s > 0 && (this.focusedIdx = s - 1);
break;
case a.down:
e.preventDefault(), !t && s < r && (this.focusedIdx = s + 1), t && s < r && (this.focusedIdx = s + 1);
break;
case a.home:
e.preventDefault(), this.focusedIdx = 0;
break;
case a.end:
e.preventDefault(), this.focusedIdx = r;
break;
case a.space:
case a.enter:
e.preventDefault(), this.items[s].disabled || this.handleEnter(e);
break;
}
}
}
});
export {
_ as Stepper
};