@progress/kendo-vue-inputs
Version:
247 lines (246 loc) • 8.14 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 b, ref as k, inject as V, createVNode as i } from "vue";
import { Button as o } from "@progress/kendo-vue-buttons";
import { validatePackage as y, getDefaultSlots as D, classNames as S, Draggable as w, Keys as a } from "@progress/kendo-vue-common";
import { provideLocalizationService as x } from "@progress/kendo-vue-intl";
import { sliderDecreaseValue as u, messages as l, sliderDragTitle as d, sliderIncreaseValue as c } from "../messages/main.mjs";
import { SLIDER_LABEL_ATTRIBUTE as L } from "./SliderLabel.mjs";
import { packageMetadata as I } from "../package-metadata.mjs";
import { caretAltUpIcon as p, caretAltLeftIcon as h, caretAltRightIcon as m, caretAltDownIcon as g } from "@progress/kendo-svg-icons";
const M = /* @__PURE__ */ b({
name: "KendoSlider",
model: {
event: "changemodel"
},
emits: {
changemodel: null,
"update:modelValue": null,
change: null,
blur: null,
focus: null
},
props: {
modelValue: {
type: Number,
default: void 0
},
defaultValue: {
type: Number,
default: void 0
},
name: String,
buttons: Boolean,
tabIndex: Number,
disabled: Boolean,
dir: String,
step: Number,
min: {
type: Number,
required: !0
},
max: {
type: Number,
required: !0
},
value: Number,
vertical: Boolean,
id: String,
ariaLabelledBy: String,
ariaDescribedBy: String,
ariaLabel: String
},
provide() {
return {
kendoMin: this.$props.min,
kendoMax: this.$props.max,
kendoVertical: this.$props.vertical
};
},
inject: {
kendoLocalizationService: {
default: null
}
},
data() {
return {
currentValue: void 0,
currentFocused: !1,
currentDir: "ltr"
};
},
computed: {
computedValue() {
const e = this.$props.value !== void 0 ? this.$props.value : this.currentValue, {
min: t,
max: s
} = this.$props;
return e === void 0 ? e : Math.min(Math.max(e, t), s);
},
sliderTrack() {
return this._sliderTrack;
}
},
created() {
y(I), this.$props.value !== void 0 ? this.$data.currentValue = this.$props.value : this.$props.modelValue !== void 0 ? this.$data.currentValue = this.$props.modelValue : this.$props.defaultValue !== void 0 ? this.$data.currentValue = this.$props.defaultValue : this.$data.currentValue = this.$props.min, this.currentFocused = !1, this.currentDir = this.$props.dir;
},
mounted() {
if (this._sliderTrack = this.$refs.sliderTrack, this.$el && (this.draggable = this.$refs.draggable), !this.currentDir && window && this.$el) {
const e = window.getComputedStyle(this.$el).direction;
e && (this.currentDir = e);
}
},
updated() {
this.$el && (this.draggable = this.$refs.draggable);
},
setup() {
const e = k(null), t = V("kendoLocalizationService", {});
return {
inputRef: e,
kendoLocalizationService: t
};
},
render() {
const e = x(this), t = (this.computedValue - this.$props.min) / (this.$props.max - this.$props.min) * 100, s = D(this), {
vertical: r
} = this.$props, n = this.currentDir === "rtl" ? r ? p : h : r ? p : m, f = this.currentDir === "rtl" ? r ? g : m : r ? g : h, $ = this.currentDir === "rtl" ? r ? "caret-alt-up" : "caret-alt-left" : r ? "caret-alt-up" : "caret-alt-right", v = this.currentDir === "rtl" ? r ? "caret-alt-down" : "caret-alt-right" : r ? "caret-alt-down" : "caret-alt-left";
return i("div", {
dir: this.currentDir,
id: this.$props.id,
style: this.$props.style,
onFocus: this.onFocus,
onBlur: this.onBlur,
onKeydown: this.onKeyDown,
"aria-label": this.$props.ariaLabel,
class: S("k-slider", {
"k-focus": this.currentFocused,
"k-disabled": this.$props.disabled,
"k-slider-horizontal": !this.$props.vertical,
"k-slider-vertical": this.$props.vertical
}, this.$props.className)
}, [this.$props.buttons && i(o, {
type: "button",
tabIndex: -1,
icon: v,
svgIcon: f,
style: {
position: "relative"
},
rounded: "full",
class: "k-button-decrease",
title: e.toLanguageString(u, l[u]),
onClick: this.decrement
}, null), i(w, {
onDrag: this.dragOver,
onPress: this.dragStart,
ref: "draggable"
}, {
default: () => [i("div", {
class: "k-slider-track-wrap",
style: {
touchAction: "none"
}
}, [s && i("ul", {
class: "k-reset k-slider-items"
}, [s]), i("div", {
class: "k-slider-track",
ref: "sliderTrack"
}, [i("div", {
class: "k-slider-selection",
style: this.$props.vertical ? {
height: t + "%"
} : {
width: t + "%"
}
}, null), i("span", {
class: "k-draghandle",
role: "slider",
tabindex: "0",
"aria-valuenow": this.computedValue,
"aria-valuemin": this.$props.min,
"aria-valuemax": this.$props.max,
"aria-valuetext": this.computedValue.toString(),
"aria-disabled": this.$props.disabled ? "true" : void 0,
title: e.toLanguageString(d, l[d]),
style: this.$props.vertical ? {
bottom: t + "%",
zIndex: 1
} : {
[this.currentDir === "rtl" ? "right" : "left"]: t + "%",
zIndex: 1
}
}, null)])])]
}), this.$props.buttons && i(o, {
type: "button",
tabIndex: -1,
icon: $,
svgIcon: n,
rounded: "full",
style: {
position: "relative"
},
class: "k-button-increase",
title: e.toLanguageString(c, l[c]),
onClick: this.increment
}, null)]);
},
methods: {
focus() {
this.$el && this.$el.focus();
},
isLabel(e) {
let t = e;
for (; t; ) {
if (t.getAttribute(L))
return !0;
t = t.parentElement;
}
return !1;
},
onFocus(e) {
this.currentFocused = !0, this.$emit("focus", e);
},
onBlur(e) {
this.currentFocused = !1, this.$emit("blur", e);
},
onKeyDown(e) {
let t;
e.keyCode === a.left || e.keyCode === a.down ? t = this.currentValue - (this.$props.step || 0) : e.keyCode === a.right || e.keyCode === a.up ? t = this.currentValue + (this.$props.step || 0) : e.keyCode === a.home ? t = this.$props.min : e.keyCode === a.end && (t = this.$props.max), t !== void 0 && (e.preventDefault(), this.change(e, t));
},
decrement(e) {
e.preventDefault(), this.change(e, this.currentValue - (this.$props.step || 0));
},
increment(e) {
e.preventDefault(), this.change(e, this.currentValue + (this.$props.step || 0));
},
dragStart(e) {
this.isLabel(e.originalEvent.target) || (e.isTouch && e.originalEvent.preventDefault(), this.drag(e));
},
dragOver(e) {
e.originalEvent.preventDefault(), this.drag(e);
},
drag(e) {
const t = this.draggable.element.getBoundingClientRect(), s = this.$props.vertical ? t.bottom - e.clientY : this.currentDir === "rtl" ? t.right - e.clientX : e.clientX - t.left, r = this.$props.vertical ? t.height : t.width, n = s / r;
this.change(e, this.$props.min + n * (this.$props.max - this.$props.min));
},
change(e, t) {
t = Math.min(Math.max(t, this.$props.min), this.$props.max), this.currentValue = t, this.$emit("changemodel", t), this.$emit("update:modelValue", t), this.$emit("change", {
event: e,
value: t,
component: this,
target: {
name: this.$props.name,
value: t
}
});
}
}
});
export {
M as Slider
};