@progress/kendo-vue-inputs 8.4.0-develop.2 → 8.4.0-develop.4

package/slider/Slider.mjs

@@ -5,15 +5,15 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as b, createVNode as i, ref as k, inject as V } from "vue";
-import { Button as l } from "@progress/kendo-vue-buttons";
-import { Keys as a, getDefaultSlots as y, classNames as D, Draggable as S, validatePackage as w } from "@progress/kendo-vue-common";
-import { provideLocalizationService as x } from "@progress/kendo-vue-intl";
-import { sliderDecreaseValue as u, messages as o, 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({
+import { defineComponent as v, createVNode as r, ref as b, inject as k } from "vue";
+import { Button as h } from "@progress/kendo-vue-buttons";
+import { Keys as s, getDefaultSlots as V, classNames as y, Draggable as S, validatePackage as D } from "@progress/kendo-vue-common";
+import { provideLocalizationService as w } from "@progress/kendo-vue-intl";
+import { sliderDecreaseValue as p, messages as c, sliderDragTitle as m, sliderIncreaseValue as g } from "../messages/main.mjs";
+import { SLIDER_LABEL_ATTRIBUTE as x } from "./SliderLabel.mjs";
+import { packageMetadata as L } from "../package-metadata.mjs";
+import { chevronUpIcon as I, chevronDownIcon as B, chevronLeftIcon as f, chevronRightIcon as $ } from "@progress/kendo-svg-icons";
+const R = /* @__PURE__ */ v({
   name: "KendoSlider",
   model: {
     event: "changemodel"
@@ -78,16 +78,16 @@ const M = /* @__PURE__ */ b({
     computedValue() {
       const e = this.$props.value !== void 0 ? this.$props.value : this.currentValue, {
         min: t,
-        max: s
+        max: i
       } = this.$props;
-      return e === void 0 ? e : Math.min(Math.max(e, t), s);
+      return e === void 0 ? e : Math.min(Math.max(e, t), i);
     },
     sliderTrack() {
       return this._sliderTrack;
     }
   },
   created() {
-    w(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;
+    D(L), 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) {
@@ -99,17 +99,18 @@ const M = /* @__PURE__ */ b({
     this.$el && (this.draggable = this.$refs.draggable);
   },
   setup() {
-    const e = k(null), t = V("kendoLocalizationService", {});
+    const e = b(null), t = k("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 = y(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", {
+    const e = w(this), t = (this.computedValue - this.$props.min) / (this.$props.max - this.$props.min) * 100, i = V(this), {
+      vertical: u
+    } = this.$props, d = this.currentDir === "rtl";
+    let n, a, o, l;
+    return u ? (n = I, a = B, o = "chevron-up", l = "chevron-down") : d ? (n = f, a = $, o = "chevron-left", l = "chevron-right") : (n = $, a = f, o = "chevron-right", l = "chevron-left"), r("div", {
       dir: this.currentDir,
       id: this.$props.id,
       style: this.$props.style,
@@ -117,47 +118,47 @@ const M = /* @__PURE__ */ b({
       onBlur: this.onBlur,
       onKeydown: this.onKeyDown,
       "aria-label": this.$props.ariaLabel,
-      class: D("k-slider", {
+      class: y("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(l, {
+    }, [this.$props.buttons && r(h, {
       type: "button",
       tabIndex: -1,
-      icon: v,
-      svgIcon: f,
+      icon: l,
+      svgIcon: a,
       style: {
         position: "relative"
       },
       rounded: "full",
       class: "k-button-decrease",
-      title: e.toLanguageString(u, o[u]),
+      title: e.toLanguageString(p, c[p]),
       onClick: this.decrement
-    }, null), i(S, {
+    }, null), r(S, {
       onDrag: this.dragOver,
       onPress: this.dragStart,
       ref: "draggable"
     }, {
-      default: () => [i("div", {
+      default: () => [r("div", {
         class: "k-slider-track-wrap",
         style: {
           touchAction: "none"
         }
-      }, [s && i("ul", {
+      }, [i && r("ul", {
         class: "k-reset k-slider-items"
-      }, [s]), i("div", {
+      }, [i]), r("div", {
         class: "k-slider-track",
         ref: "sliderTrack"
-      }, [i("div", {
+      }, [r("div", {
         class: "k-slider-selection",
         style: this.$props.vertical ? {
           height: t + "%"
         } : {
           width: t + "%"
         }
-      }, null), i("span", {
+      }, null), r("span", {
         class: "k-draghandle",
         role: "slider",
         tabindex: "0",
@@ -166,7 +167,7 @@ const M = /* @__PURE__ */ b({
         "aria-valuemax": this.$props.max,
         "aria-valuetext": this.computedValue.toString(),
         "aria-disabled": this.$props.disabled ? "true" : void 0,
-        title: e.toLanguageString(d, o[d]),
+        title: e.toLanguageString(m, c[m]),
         style: this.$props.vertical ? {
           bottom: t + "%",
           zIndex: 1
@@ -175,17 +176,17 @@ const M = /* @__PURE__ */ b({
           zIndex: 1
         }
       }, null)])])]
-    }), this.$props.buttons && i(l, {
+    }), this.$props.buttons && r(h, {
       type: "button",
       tabIndex: -1,
-      icon: $,
+      icon: o,
       svgIcon: n,
       rounded: "full",
       style: {
         position: "relative"
       },
       class: "k-button-increase",
-      title: e.toLanguageString(c, o[c]),
+      title: e.toLanguageString(g, c[g]),
       onClick: this.increment
     }, null)]);
   },
@@ -196,7 +197,7 @@ const M = /* @__PURE__ */ b({
     isLabel(e) {
       let t = e;
       for (; t; ) {
-        if (t.getAttribute(L))
+        if (t.getAttribute(x))
           return !0;
         t = t.parentElement;
       }
@@ -214,7 +215,7 @@ const M = /* @__PURE__ */ b({
     },
     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));
+      e.keyCode === s.left || e.keyCode === s.down ? t = this.currentValue - (this.$props.step || 0) : e.keyCode === s.right || e.keyCode === s.up ? t = this.currentValue + (this.$props.step || 0) : e.keyCode === s.home ? t = this.$props.min : e.keyCode === s.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));
@@ -229,8 +230,8 @@ const M = /* @__PURE__ */ b({
       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));
+      const t = this.draggable.element.getBoundingClientRect(), i = this.$props.vertical ? t.bottom - e.clientY : this.currentDir === "rtl" ? t.right - e.clientX : e.clientX - t.left, u = this.$props.vertical ? t.height : t.width, d = i / u;
+      this.change(e, this.$props.min + d * (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", {
@@ -246,5 +247,5 @@ const M = /* @__PURE__ */ b({
   }
 });
 export {
-  M as Slider
+  R as Slider
 };