@progress/kendo-vue-inputs 5.3.0-dev.202409130647 → 5.3.0-develop.1

package/range-slider/RangeSlider.mjs

@@ -0,0 +1,392 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 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
+};

package/range-slider/range-raducer.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let n=function(e){return e.start="start",e.end="end",e.min="min",e.max="max",e.increase="increase",e.decrease="decrease",e}({});const l=(e,r)=>{let d,m;switch(r.type){case n.start:if(r.payload===void 0)return e;d={start:r.payload>e.end?e.end:Math.max(r.payload,r.min),end:e.end};break;case n.end:if(r.payload===void 0)return e;d={start:e.start,end:r.payload<e.start?e.start:Math.min(r.payload,r.max)};break;case n.min:r.key==="start"?d={...e,start:r.min}:d={...e,end:Math.max(r.min,e.start)};break;case n.max:r.key==="start"?d={...e,start:Math.min(r.max,e.end)}:d={...e,end:r.max};break;case n.increase:if(r.step===void 0||r.key===void 0)return e;m=e[r.key]+r.step,r.key==="start"?m<r.min?d={...e,start:r.min}:d={...e,start:Math.min(m,e.end)}:m>r.max?d={...e,end:r.max}:d={...e,end:Math.max(m,e.start)};break;case n.decrease:if(r.step===void 0||r.key===void 0)return e;m=e[r.key]-r.step,r.key==="start"?m<r.min?d={...e,start:r.min}:d={...e,start:Math.min(m,e.end)}:m>r.max?d={...e,end:r.max}:d={...e,end:Math.max(m,e.start)};break;default:d=e;break}return d};exports.RANGE_ACTION=n;exports.rangeReducer=l;

package/range-slider/range-raducer.mjs

@@ -0,0 +1,91 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+let n = /* @__PURE__ */ function(e) {
+  return e.start = "start", e.end = "end", e.min = "min", e.max = "max", e.increase = "increase", e.decrease = "decrease", e;
+}({});
+const f = (e, r) => {
+  let d, m;
+  switch (r.type) {
+    case n.start:
+      if (r.payload === void 0)
+        return e;
+      d = {
+        start: r.payload > e.end ? e.end : Math.max(r.payload, r.min),
+        end: e.end
+      };
+      break;
+    case n.end:
+      if (r.payload === void 0)
+        return e;
+      d = {
+        start: e.start,
+        end: r.payload < e.start ? e.start : Math.min(r.payload, r.max)
+      };
+      break;
+    case n.min:
+      r.key === "start" ? d = {
+        ...e,
+        start: r.min
+      } : d = {
+        ...e,
+        end: Math.max(r.min, e.start)
+      };
+      break;
+    case n.max:
+      r.key === "start" ? d = {
+        ...e,
+        start: Math.min(r.max, e.end)
+      } : d = {
+        ...e,
+        end: r.max
+      };
+      break;
+    case n.increase:
+      if (r.step === void 0 || r.key === void 0)
+        return e;
+      m = e[r.key] + r.step, r.key === "start" ? m < r.min ? d = {
+        ...e,
+        start: r.min
+      } : d = {
+        ...e,
+        start: Math.min(m, e.end)
+      } : m > r.max ? d = {
+        ...e,
+        end: r.max
+      } : d = {
+        ...e,
+        end: Math.max(m, e.start)
+      };
+      break;
+    case n.decrease:
+      if (r.step === void 0 || r.key === void 0)
+        return e;
+      m = e[r.key] - r.step, r.key === "start" ? m < r.min ? d = {
+        ...e,
+        start: r.min
+      } : d = {
+        ...e,
+        start: Math.min(m, e.end)
+      } : m > r.max ? d = {
+        ...e,
+        end: r.max
+      } : d = {
+        ...e,
+        end: Math.max(m, e.start)
+      };
+      break;
+    default:
+      d = e;
+      break;
+  }
+  return d;
+};
+export {
+  n as RANGE_ACTION,
+  f as rangeReducer
+};

package/rating/Rating.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("vue"),l=require("@progress/kendo-vue-common"),M=require("../package-metadata.js"),B=require("./RatingItem.js"),n=require("./utils/main.js"),F=require("@progress/kendo-vue-intl"),g=require("../messages/main.js"),i=require("./utils/rating-reducer.js"),w=c.defineComponent({name:"Rating",emits:{change:null,keydown:null,focus:null,blur:null,click:null,mouseleave:null,mousemove:null},props:{min:{type:Number,default:1},max:{type:Number,default:5},step:{type:Number,default:1},item:{type:[String,Object,Function]},precision:{type:String,default:"item",validator:function(e){return["item","half"].includes(e)}},selection:{type:String,default:"continues",validator:function(e){return["continues","single"].includes(e)}},value:Number,icon:String,svgIconOutline:Object,svgIcon:Object,tabIndex:Number,disabled:Boolean,readonly:Boolean,id:String,half:Boolean,defaultValue:Number,label:String},created(){l.validatePackage(M.packageMetadata)},inject:{kendoLocalizationService:{default:null}},data:function(){return{focused:!1,currentValue:this.defaultValue||null,currentHovered:null}},setup(){return{inputRef:c.ref(null)}},computed:{base(){return this.$props.step/(this.$props.precision==="half"?2:1)},computedValue(){return this.$props.value!==void 0?this.$props.value:this.$data.currentValue}},render(){const e=F.provideLocalizationService(this),{min:t,max:a,step:s,id:o,dir:u,label:d,selection:f,precision:N,svgIcon:R,icon:T,item:b,value:v,tabIndex:A,disabled:h,readonly:I,ariaLabelledBy:k,ariaDescribedBy:V,svgIconOutline:C}=this.$props,O=Array.from({length:a-t+1},(y,r)=>t+r),S=n.getRemainder(n.toRound(a-t,this.base),s),m=this.computedValue,p=this.$data.currentHovered;return c.createVNode("span",{id:o,ref:"ratingRef",role:"slider",dir:u,"tab-index":l.getTabIndex(A,h,void 0),class:l.classNames("k-rating",{"k-rtl":u==="rtl","k-readonly":I,"k-disabled":h}),onKeydown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,onClick:()=>this.$data.focused=!0,"aria-valuemin":t,"aria-valuemax":a,"aria-valuenow":v!==null?v:void 0,"aria-disabled":h?"true":void 0,"aria-label":e.toLanguageString(g.ratingAriaLabel,g.messages[g.ratingAriaLabel]),"aria-labelledby":k,"aria-describedby":V},[c.createVNode("input",{id:"rating",class:"k-hidden",readonly:I,disabled:h},null),c.createVNode("span",{class:"k-rating-container"},[O.map(function(y){const r=n.toRound(y+S,this.base),$=N==="half"?n.isHalf(r,p!==null?p:m!==null?m:0,s):!1,H=n.isSelected(r,m,s,f),_=n.isSelected(r,p!==null?p:m,s,f),G=n.isSelected(r,p,s,f),x=l.templateRendering.call(this,b,l.getListeners.call(this));return c.createVNode(B.RatingItem,{key:r,value:r,dir:u,title:String($?n.toRound(r-s/2,this.base):r),icon:T,svgIcon:R,svgIconOutline:C,haveSelectedValue:H,half:$,selected:_,hovered:G,item:b,itemTemplate:x,onClick:this.handleItemClick,onMousemove:this.handleMouseMove,onMouseleave:this.handleMouseLeave},null)},this)]),d&&c.createVNode("span",{class:"k-rating-label"},[d])])},methods:{handleFocus(e){this.$emit("focus",e)},handleBlur(e){this.$emit("blur",e)},handleChange(e,t){this.$emit("change",{value:e,target:this.$refs.ratingRef,event:t})},handleKeyDown(e){if(!(this.$props.readonly||this.$props.disabled)){switch(e.keyCode){case l.Keys.right:e.preventDefault(),this.dispatchValue({type:this.$props.dir==="rtl"?i.RATING_ACTION.decrease:i.RATING_ACTION.increase,event:e});break;case l.Keys.left:e.preventDefault(),this.dispatchValue({type:this.$props.dir==="rtl"?i.RATING_ACTION.increase:i.RATING_ACTION.decrease,event:e});break;case l.Keys.home:e.preventDefault(),this.dispatchValue({type:this.$props.dir==="rtl"?i.RATING_ACTION.min:i.RATING_ACTION.max,event:e});break;case l.Keys.end:e.preventDefault(),this.dispatchValue({type:this.$props.dir==="rtl"?i.RATING_ACTION.max:i.RATING_ACTION.min,event:e});break;case l.Keys.esc:e.preventDefault(),this.dispatchValue({type:i.RATING_ACTION.deselect,event:e});break}this.$emit("keydown",{value:this.$data.currentValue,event:e})}},handleItemClick(e){const{event:t,value:a,target:s}=e;if(!(!s||!a||this.$props.readonly||this.$props.disabled)){if(this.$props.precision==="half"){const o=s.getBoundingClientRect(),d=n.calcIsFirstHalf(this.$props.dir?this.$props.dir:"ltr",o,e.event.clientX)?n.toRound(a-this.$props.step/2,this.base):a;this.dispatchValue({type:i.RATING_ACTION.select,payload:d,event:t})}else this.dispatchValue({type:i.RATING_ACTION.select,payload:a,event:t});this.$emit("click",t)}},handleMouseMove(e){const{event:t,value:a,target:s}=e;if(!(!s||!a))if(this.$props.precision==="half"){const o=s.getBoundingClientRect(),d=n.calcIsFirstHalf(this.$props.dir?this.$props.dir:"ltr",o,t.clientX)?a-this.$props.step/2:a;this.dispatchHover({type:i.RATING_ACTION.select,payload:d,event:t})}else this.dispatchHover({type:i.RATING_ACTION.select,payload:a,event:t})},handleMouseLeave(e){this.dispatchHover({type:i.RATING_ACTION.reset,event:e.event})},dispatchValue(e){const t={state:this.$props.value,min:this.$props.min,max:this.$props.max,step:this.base},a=t.state||this.$data.currentValue,s=i.ratingReducer(a,{...e,...t}),o=e.event;this.handleChange(s,o),this.$data.currentValue=s},dispatchHover(e){const t={state:this.$props.value,min:this.$props.min,max:this.$props.max,step:this.base,precision:this.$props.precision},a=t.state,s=i.ratingReducer(a,{...e,...t});this.$data.currentHovered=s}}});exports.Rating=w;