@progress/kendo-vue-inputs
Version:
393 lines (392 loc) • 11.7 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 u, ref as o, inject as p, createVNode as s } from "vue";
import { validatePackage as m, getDefaultSlots as f, classNames as k, Draggable as y, getTabIndex as d, Keys as r } from "@progress/kendo-vue-common";
import { sliderDragTitle as l, messages as c } from "../messages/main.mjs";
import { provideLocalizationService as g } from "@progress/kendo-vue-intl";
import { rangeReducer as b, RANGE_ACTION as a } from "./range-raducer.mjs";
import { packageMetadata as S } from "../package-metadata.mjs";
const T = /* @__PURE__ */ u({
name: "KendoRangeSlider",
model: {
event: "changemodel"
},
props: {
id: String,
value: {
type: Object,
validator: function(e) {
return e.start <= e.end;
}
},
defaultValue: {
type: Object,
default: function() {
return {
start: 0,
end: 0
};
},
validator: function(e) {
return e.start <= e.end;
}
},
step: {
type: Number,
default: 1
},
min: {
type: Number,
required: !0
},
max: {
type: Number,
required: !0
},
vertical: Boolean,
disabled: Boolean,
dir: {
type: String,
default: "ltr",
validator: function(e) {
return [null, "ltr", "rtl"].includes(e);
}
},
startTabIndex: Number,
endTabIndex: Number
},
provide() {
return {
kendoMin: this.$props.min,
kendoMax: this.$props.max,
kendoVertical: this.$props.vertical
};
},
inject: {
kendoLocalizationService: {
default: null
}
},
created() {
m(S);
},
data() {
return {
currentValue: this.defaultValue,
currentDrag: "",
currentDir: "ltr"
};
},
computed: {
computedValue() {
return this.$props.value !== void 0 ? this.$props.value : this.currentValue;
},
percentStart() {
return (this.computedValue.start - this.min) / (this.max - this.min) * 100;
},
percentEnd() {
return (this.computedValue.end - this.min) / (this.max - this.min) * 100;
},
sliderItemsStyle() {
return this.vertical ? {
paddingTop: 0,
height: "100%"
} : {};
},
trackStyles() {
return this.vertical ? {
marginTop: "0.5rem",
marginBottom: "0.5rem"
} : {
marginLeft: "0.5rem",
marginRight: "0.5rem"
};
}
},
mounted() {
if (this.sliderRef = this.$refs.sliderRef, this.sliderSelectionRef = this.$refs.sliderSelectionRef, this.startHandle = this.$refs.startHandle, this.endHandle = this.$refs.endHandle, this.sliderTrackRef = this.$refs.sliderTrackRef, this.sliderTrackWrapRef = this.$refs.sliderTrackWrapRef, !this.currentDir && window && this.$el) {
const e = window.getComputedStyle(this.$el).direction;
e && (this.currentDir = e);
}
},
setup() {
const e = o(null), t = p("kendoLocalizationService", {});
return {
inputRef: e,
kendoLocalizationService: t
};
},
render() {
const e = g(this), t = f(this), {
id: i,
dir: n
} = this.$props;
return s("div", {
id: i,
dir: this.currentDir,
class: k("k-slider", {
"k-rtl": this.currentDir === "rtl",
"k-disabled": this.$props.disabled,
"k-slider-vertical": this.$props.vertical,
"k-slider-horizontal": !this.$props.vertical
}, this.$props.class),
"aria-labelledby": this.$props.ariaLabelledBy,
"aria-describedby": this.$props.ariaDescribedBy
}, [s(y, {
onDrag: this.handleTrackDrag,
onPress: this.handleTrackPress,
onRelease: this.handleTrackRelease,
ref: "draggable"
}, {
default: () => [s("div", {
ref: "sliderTrackWrapRef",
class: "k-slider-track-wrap",
style: {
flexGrow: 1,
position: "relative",
touchAction: "none",
...this.trackStyles
}
}, [t && s("ul", {
class: "k-reset k-slider-items",
style: {
...this.sliderItemsStyle
}
}, [t]), s("div", {
ref: "sliderTrackRef",
class: "k-slider-track",
style: this.$props.vertical ? {
bottom: 0,
height: "100%"
} : {
[this.currentDir === "rtl" ? "right" : "left"]: 0,
width: "100%"
}
}, [this.percentStart !== null && this.percentEnd !== null && s("div", {
"data-selection": !0,
ref: "sliderSelectionRef",
title: `${this.computedValue.start} - ${this.computedValue.end}`,
class: "k-slider-selection",
style: this.vertical ? {
height: this.percentEnd - this.percentStart + "%",
bottom: this.percentStart + "%"
} : {
[this.currentDir === "rtl" ? "right" : "left"]: this.percentStart + "%",
width: this.percentEnd - this.percentStart + "%"
}
}, null), s("span", {
ref: "startHandle",
role: "slider",
tabindex: d(this.startTabIndex, this.$props.disabled, void 0),
"aria-valuemin": this.min,
"aria-valuemax": Math.max(this.max, this.computedValue.end),
"aria-valuenow": this.computedValue.start,
"aria-disabled": this.disabled ? "true" : void 0,
"aria-valuetext": this.computedValue.start,
class: "k-draghandle",
title: e.toLanguageString(l, c[l]),
style: this.vertical ? {
bottom: "calc(" + this.percentStart + "%)",
zIndex: 1
} : this.currentDir === "rtl" ? {
right: "calc(" + this.percentStart + "% - 13px)",
zIndex: 1
} : {
left: "calc(" + this.percentStart + "%)",
zIndex: 1
},
onKeydown: this.handleStartKeyDown
}, null), s("span", {
ref: "endHandle",
role: "slider",
tabindex: d(this.endTabIndex, this.$props.disabled, void 0),
"aria-valuemin": Math.min(this.min, this.computedValue.start),
"aria-valuemax": this.max,
"aria-valuenow": this.computedValue.end,
"aria-disabled": this.disabled ? "true" : void 0,
"aria-valuetext": this.computedValue.end,
class: "k-draghandle",
title: e.toLanguageString(l, c[l]),
style: this.vertical ? {
bottom: "calc(" + this.percentEnd + "%)",
zIndex: 1
} : this.currentDir === "rtl" ? {
right: "calc(" + this.percentEnd + "% - 13px)",
zIndex: 1
} : {
left: "calc(" + this.percentEnd + "%)",
zIndex: 1
},
onKeydown: this.handleEndKeyDown
}, null)])])]
})]);
},
methods: {
dispatchStateValue(e) {
const t = b({
start: this.computedValue.start,
end: this.computedValue.end
}, {
...e,
min: this.min,
max: this.max,
step: this.step
});
this.currentValue.start = t.start, this.currentValue.end = t.end, this.$emit("change", {
min: this.min,
max: this.max,
step: this.step,
value: {
start: t.start,
end: t.end
}
});
},
focus() {
this.startHandle && this.startHandle.focus();
},
handleChange(e, t) {
this.$emit("change", {
value: e,
// target: target.current,
event: t
});
},
calcNewDistance(e) {
if (!this.sliderTrackWrapRef)
return;
e.originalEvent.preventDefault();
const t = this.sliderTrackWrapRef.getBoundingClientRect(), i = this.$props.vertical ? t.bottom - e.clientY : this.currentDir === "rtl" ? t.right - e.clientX : e.clientX - t.left, n = this.$props.vertical ? t.height : t.width, h = i / n;
return this.min + h * (this.max - this.min);
},
calcKey(e) {
return e <= this.computedValue.start ? "start" : e >= this.computedValue.end ? "end" : 2 * e < this.computedValue.end + this.computedValue.start ? "start" : "end";
},
handleStartKeyDown(e) {
switch (e.keyCode) {
case r.right:
e.preventDefault(), this.dispatchStateValue({
type: this.currentDir === "rtl" ? a.decrease : a.increase,
key: "start",
event: e
});
break;
case r.up:
e.preventDefault(), this.dispatchStateValue({
type: a.increase,
key: "start",
event: e
});
break;
case r.left:
e.preventDefault(), this.dispatchStateValue({
type: this.currentDir === "rtl" ? a.increase : a.decrease,
key: "start",
event: e
});
break;
case r.down:
e.preventDefault(), this.dispatchStateValue({
type: a.decrease,
key: "start",
event: e
});
break;
case r.home:
e.preventDefault(), this.dispatchStateValue({
type: a.min,
key: "start",
event: e
});
break;
case r.end:
e.preventDefault(), this.dispatchStateValue({
type: a.max,
key: "start",
event: e
});
break;
}
},
handleEndKeyDown(e) {
switch (e.keyCode) {
case r.right:
e.preventDefault(), this.dispatchStateValue({
type: this.currentDir === "rtl" ? a.decrease : a.increase,
key: "end",
event: e
});
break;
case r.up:
e.preventDefault(), this.dispatchStateValue({
type: a.increase,
key: "end",
event: e
});
break;
case r.left:
e.preventDefault(), this.dispatchStateValue({
type: this.currentDir === "rtl" ? a.increase : a.decrease,
key: "end",
event: e
});
break;
case r.down:
e.preventDefault(), this.dispatchStateValue({
type: a.decrease,
key: "end",
event: e
});
break;
case r.home:
e.preventDefault(), this.dispatchStateValue({
type: a.min,
key: "end",
event: e
});
break;
case r.end:
e.preventDefault(), this.dispatchStateValue({
type: a.max,
key: "end",
event: e
});
break;
}
},
handleTrackPress(e) {
const t = this.calcNewDistance(e), i = this.calcKey(t);
this.currentDrag = i, i === "end" ? this.endHandle.focus() : this.startHandle.focus();
const n = i === "end" ? a.end : a.start;
this.dispatchStateValue({
type: n,
payload: t,
event: e
});
},
handleTrackDrag(e) {
const t = this.calcNewDistance(e), i = this.currentDrag === "end" ? a.end : a.start;
this.dispatchStateValue({
type: i,
payload: t,
event: e
});
},
handleTrackRelease(e) {
const t = this.calcNewDistance(e), i = this.currentDrag === "end" ? a.end : a.start;
this.dispatchStateValue({
type: i,
payload: t,
event: e
}), this.currentDrag = "";
}
}
});
export {
T as RangeSlider
};