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

package/rating/Rating.mjs

@@ -0,0 +1,306 @@
+/**
+ * @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 j, ref as A, createVNode as d } from "vue";
+import { validatePackage as K, getTabIndex as z, classNames as X, templateRendering as _, getListeners as G, Keys as u } from "@progress/kendo-vue-common";
+import { packageMetadata as P } from "../package-metadata.mjs";
+import { RatingItem as q } from "./RatingItem.mjs";
+import { getRemainder as E, toRound as m, isHalf as J, isSelected as g, calcIsFirstHalf as V } from "./utils/main.mjs";
+import { provideLocalizationService as Q } from "@progress/kendo-vue-intl";
+import { ratingAriaLabel as I, messages as U } from "../messages/main.mjs";
+import { RATING_ACTION as i, ratingReducer as S } from "./utils/rating-reducer.mjs";
+const le = /* @__PURE__ */ j({
+  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() {
+    K(P);
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data: function() {
+    return {
+      focused: !1,
+      currentValue: this.defaultValue || null,
+      currentHovered: null
+    };
+  },
+  setup() {
+    return {
+      inputRef: A(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 = Q(this), {
+      min: t,
+      max: s,
+      step: a,
+      id: l,
+      dir: o,
+      label: r,
+      selection: f,
+      precision: x,
+      svgIcon: H,
+      icon: R,
+      item: v,
+      value: b,
+      tabIndex: C,
+      disabled: p,
+      readonly: $,
+      ariaLabelledBy: B,
+      ariaDescribedBy: N,
+      svgIconOutline: w
+    } = this.$props, F = Array.from({
+      length: s - t + 1
+    }, (y, n) => t + n), M = E(m(s - t, this.base), a), h = this.computedValue, c = this.$data.currentHovered;
+    return d("span", {
+      id: l,
+      ref: "ratingRef",
+      role: "slider",
+      dir: o,
+      "tab-index": z(C, p, void 0),
+      class: X("k-rating", {
+        "k-rtl": o === "rtl",
+        "k-readonly": $,
+        "k-disabled": p
+      }),
+      onKeydown: this.handleKeyDown,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      onClick: () => this.$data.focused = !0,
+      "aria-valuemin": t,
+      "aria-valuemax": s,
+      "aria-valuenow": b !== null ? b : void 0,
+      "aria-disabled": p ? "true" : void 0,
+      "aria-label": e.toLanguageString(I, U[I]),
+      "aria-labelledby": B,
+      "aria-describedby": N
+    }, [d("input", {
+      id: "rating",
+      class: "k-hidden",
+      readonly: $,
+      disabled: p
+    }, null), d("span", {
+      class: "k-rating-container"
+    }, [F.map(function(y) {
+      const n = m(y + M, this.base), k = x === "half" ? J(n, c !== null ? c : h !== null ? h : 0, a) : !1, L = g(n, h, a, f), D = g(n, c !== null ? c : h, a, f), O = g(n, c, a, f), T = _.call(this, v, G.call(this));
+      return d(q, {
+        key: n,
+        value: n,
+        dir: o,
+        title: String(k ? m(n - a / 2, this.base) : n),
+        icon: R,
+        svgIcon: H,
+        svgIconOutline: w,
+        haveSelectedValue: L,
+        half: k,
+        selected: D,
+        hovered: O,
+        item: v,
+        itemTemplate: T,
+        onClick: this.handleItemClick,
+        onMousemove: this.handleMouseMove,
+        onMouseleave: this.handleMouseLeave
+      }, null);
+    }, this)]), r && d("span", {
+      class: "k-rating-label"
+    }, [r])]);
+  },
+  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 u.right:
+            e.preventDefault(), this.dispatchValue({
+              type: this.$props.dir === "rtl" ? i.decrease : i.increase,
+              event: e
+            });
+            break;
+          case u.left:
+            e.preventDefault(), this.dispatchValue({
+              type: this.$props.dir === "rtl" ? i.increase : i.decrease,
+              event: e
+            });
+            break;
+          case u.home:
+            e.preventDefault(), this.dispatchValue({
+              type: this.$props.dir === "rtl" ? i.min : i.max,
+              event: e
+            });
+            break;
+          case u.end:
+            e.preventDefault(), this.dispatchValue({
+              type: this.$props.dir === "rtl" ? i.max : i.min,
+              event: e
+            });
+            break;
+          case u.esc:
+            e.preventDefault(), this.dispatchValue({
+              type: i.deselect,
+              event: e
+            });
+            break;
+        }
+        this.$emit("keydown", {
+          value: this.$data.currentValue,
+          event: e
+        });
+      }
+    },
+    handleItemClick(e) {
+      const {
+        event: t,
+        value: s,
+        target: a
+      } = e;
+      if (!(!a || !s || this.$props.readonly || this.$props.disabled)) {
+        if (this.$props.precision === "half") {
+          const l = a.getBoundingClientRect(), r = V(this.$props.dir ? this.$props.dir : "ltr", l, e.event.clientX) ? m(s - this.$props.step / 2, this.base) : s;
+          this.dispatchValue({
+            type: i.select,
+            payload: r,
+            event: t
+          });
+        } else
+          this.dispatchValue({
+            type: i.select,
+            payload: s,
+            event: t
+          });
+        this.$emit("click", t);
+      }
+    },
+    handleMouseMove(e) {
+      const {
+        event: t,
+        value: s,
+        target: a
+      } = e;
+      if (!(!a || !s))
+        if (this.$props.precision === "half") {
+          const l = a.getBoundingClientRect(), r = V(this.$props.dir ? this.$props.dir : "ltr", l, t.clientX) ? s - this.$props.step / 2 : s;
+          this.dispatchHover({
+            type: i.select,
+            payload: r,
+            event: t
+          });
+        } else
+          this.dispatchHover({
+            type: i.select,
+            payload: s,
+            event: t
+          });
+    },
+    handleMouseLeave(e) {
+      this.dispatchHover({
+        type: i.reset,
+        event: e.event
+      });
+    },
+    dispatchValue(e) {
+      const t = {
+        state: this.$props.value,
+        min: this.$props.min,
+        max: this.$props.max,
+        step: this.base
+      }, s = t.state || this.$data.currentValue, a = S(s, {
+        ...e,
+        ...t
+      }), l = e.event;
+      this.handleChange(a, l), this.$data.currentValue = a;
+    },
+    dispatchHover(e) {
+      const t = {
+        state: this.$props.value,
+        min: this.$props.min,
+        max: this.$props.max,
+        step: this.base,
+        precision: this.$props.precision
+      }, s = t.state, a = S(s, {
+        ...e,
+        ...t
+      });
+      this.$data.currentHovered = a;
+    }
+  }
+});
+export {
+  le as Rating
+};

package/rating/RatingItem.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 t=require("vue"),o=require("@progress/kendo-vue-common"),u=require("@progress/kendo-svg-icons"),I=t.defineComponent({name:"KendoReactRatingItem",emits:{click:null,keydown:null,focus:null,blur:null,mouseenter:null,mouseleave:null,mousemove:null},props:{id:String,tabIndex:Number,half:Boolean,title:String,icon:Object,selected:Boolean,hovered:Boolean,onClick:Function,onKeyDown:Function,onFocus:Function,onBlur:Function,onMouseEnter:Function,svgIconOutline:Object,svgIcon:Object,haveSelectedValue:Boolean,item:String,itemTemplate:Object,dir:{type:String,default:"ltr",validator:function(e){return[null,"ltr","rtl"].includes(e)}},value:{type:Number,required:!0}},setup(){return{inputRef:t.ref(null)}},computed:{wrapperClass(){return o.classNames(`k-rating-item${this.$props.dir==="rtl"?" k-rtl":""}${this.$props.haveSelectedValue||this.$props.selected?" k-selected":""}${this.$props.hovered?" k-hover":""}`)}},render(){const{id:e,dir:r,half:s,tabIndex:h,title:d,icon:n,svgIcon:l,svgIconOutline:a,hovered:i,selected:c,haveSelectedValue:m,item:p,itemTemplate:g}=this.$props,v=o.getTemplate.call(this,{h:t.h,template:g,additionalProps:{dir:r,half:s,title:d,icon:n,svgIcon:l,svgIconOutline:a,hovered:i,selected:c,haveSelectedValue:m},additionalListeners:{onclick:this.handleClick,onkeydown:this.handleKeyDown,onfocus:this.handleFocus,onblur:this.handleBlur,onmouseenter:this.handleMouseEnter,onmouseleave:this.handleMouseLeave,onmousemove:this.handleMouseMove}});return t.createVNode("span",{id:e,dir:r,"data-half":s,tabindex:h,title:d,class:this.wrapperClass,onClick:this.handleClick,onKeydown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,onMouseenter:this.handleMouseEnter,onMouseleave:this.handleMouseLeave,onMousemove:this.handleMouseMove},[p?v:[s&&t.createVNode("span",{class:"k-rating-precision-complement"},[!(n||a)&&t.createVNode(o.Icon,{name:"star-outline",icon:u.starOutlineIcon,style:r==="rtl"?{clipPath:"inset(0 50% 0 0)"}:{clipPath:"inset(0 0 0 50%)"},size:"xlarge"},null),(n||a)&&t.createVNode(o.Icon,{name:o.getIconName(`${n}-outline`),icon:a,size:"xlarge"},null)]),s&&t.createVNode("span",{class:"k-rating-precision-part"},[!(n||l)&&t.createVNode(o.Icon,{name:"star",icon:u.starIcon,style:r==="rtl"?{clipPath:"inset(0 0 0 50%)"}:{clipPath:"inset(0 50% 0 0)"},size:"xlarge"},null),(n||l)&&t.createVNode(o.Icon,{name:n?o.getIconName(n):void 0,icon:l,size:"xlarge"},null)]),s&&t.createVNode("span",{style:{width:"24px",height:"24px",display:"block"}},null),!s&&(!(n||l)&&(i||c&&!i)&&t.createVNode(o.Icon,{name:"star",icon:u.starIcon,size:"xlarge"},null)||!(n||l)&&!i&&!c&&t.createVNode(o.Icon,{name:"star-outline",icon:u.starOutlineIcon,size:"xlarge"},null)||(n||l)&&(i||c&&!i)&&t.createVNode(o.Icon,{name:n,icon:l,size:"xlarge"},null)||(n||l)&&!i&&t.createVNode(o.Icon,{name:o.getIconName(`${n}-outline`),icon:a,size:"xlarge"},null))]])},methods:{handleClick(e){this.$emit("click",{value:this.$props.value,target:this.$el,event:e})},handleMouseLeave(e){this.$emit("mouseleave",{target:this.$el,event:e})},handleMouseMove(e){this.$emit("mousemove",{value:this.$props.value,target:this.$el,event:e})},handleMouseEnter(e){this.$emit("mouseenter",{target:this.$el,event:e})},handleKeyDown(e){this.$emit("keydown",e)},handleFocus(e){this.$emit("focus",e)},handleBlur(e){this.$emit("blur",e)}}});exports.RatingItem=I;

package/rating/RatingItem.mjs

@@ -0,0 +1,209 @@
+/**
+ * @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 f, ref as M, h as x, createVNode as n } from "vue";
+import { classNames as y, getTemplate as b, Icon as i, getIconName as c } from "@progress/kendo-vue-common";
+import { starOutlineIcon as d, starIcon as m } from "@progress/kendo-svg-icons";
+const B = /* @__PURE__ */ f({
+  name: "KendoReactRatingItem",
+  emits: {
+    click: null,
+    keydown: null,
+    focus: null,
+    blur: null,
+    mouseenter: null,
+    mouseleave: null,
+    mousemove: null
+  },
+  props: {
+    id: String,
+    tabIndex: Number,
+    half: Boolean,
+    title: String,
+    icon: Object,
+    selected: Boolean,
+    hovered: Boolean,
+    onClick: Function,
+    onKeyDown: Function,
+    onFocus: Function,
+    onBlur: Function,
+    onMouseEnter: Function,
+    svgIconOutline: Object,
+    svgIcon: Object,
+    haveSelectedValue: Boolean,
+    item: String,
+    itemTemplate: Object,
+    dir: {
+      type: String,
+      default: "ltr",
+      validator: function(e) {
+        return [null, "ltr", "rtl"].includes(e);
+      }
+    },
+    value: {
+      type: Number,
+      required: !0
+    }
+  },
+  setup() {
+    return {
+      inputRef: M(null)
+    };
+  },
+  computed: {
+    wrapperClass() {
+      return y(`k-rating-item${this.$props.dir === "rtl" ? " k-rtl" : ""}${this.$props.haveSelectedValue || this.$props.selected ? " k-selected" : ""}${this.$props.hovered ? " k-hover" : ""}`);
+    }
+  },
+  render() {
+    const {
+      id: e,
+      dir: r,
+      half: s,
+      tabIndex: p,
+      title: h,
+      icon: t,
+      svgIcon: l,
+      svgIconOutline: a,
+      hovered: o,
+      selected: u,
+      haveSelectedValue: v,
+      item: g,
+      itemTemplate: $
+    } = this.$props, k = b.call(this, {
+      h: x,
+      template: $,
+      additionalProps: {
+        dir: r,
+        half: s,
+        title: h,
+        icon: t,
+        svgIcon: l,
+        svgIconOutline: a,
+        hovered: o,
+        selected: u,
+        haveSelectedValue: v
+      },
+      additionalListeners: {
+        onclick: this.handleClick,
+        onkeydown: this.handleKeyDown,
+        onfocus: this.handleFocus,
+        onblur: this.handleBlur,
+        onmouseenter: this.handleMouseEnter,
+        onmouseleave: this.handleMouseLeave,
+        onmousemove: this.handleMouseMove
+      }
+    });
+    return n("span", {
+      id: e,
+      dir: r,
+      "data-half": s,
+      tabindex: p,
+      title: h,
+      class: this.wrapperClass,
+      onClick: this.handleClick,
+      onKeydown: this.handleKeyDown,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      onMouseenter: this.handleMouseEnter,
+      onMouseleave: this.handleMouseLeave,
+      onMousemove: this.handleMouseMove
+    }, [g ? k : [s && n("span", {
+      class: "k-rating-precision-complement"
+    }, [!(t || a) && n(i, {
+      name: "star-outline",
+      icon: d,
+      style: r === "rtl" ? {
+        clipPath: "inset(0 50% 0 0)"
+      } : {
+        clipPath: "inset(0 0 0 50%)"
+      },
+      size: "xlarge"
+    }, null), (t || a) && n(i, {
+      name: c(`${t}-outline`),
+      icon: a,
+      size: "xlarge"
+    }, null)]), s && n("span", {
+      class: "k-rating-precision-part"
+    }, [!(t || l) && n(i, {
+      name: "star",
+      icon: m,
+      style: r === "rtl" ? {
+        clipPath: "inset(0 0 0 50%)"
+      } : {
+        clipPath: "inset(0 50% 0 0)"
+      },
+      size: "xlarge"
+    }, null), (t || l) && n(i, {
+      name: t ? c(t) : void 0,
+      icon: l,
+      size: "xlarge"
+    }, null)]), s && n("span", {
+      style: {
+        width: "24px",
+        height: "24px",
+        display: "block"
+      }
+    }, null), !s && (!(t || l) && (o || u && !o) && n(i, {
+      name: "star",
+      icon: m,
+      size: "xlarge"
+    }, null) || !(t || l) && !o && !u && n(i, {
+      name: "star-outline",
+      icon: d,
+      size: "xlarge"
+    }, null) || (t || l) && (o || u && !o) && n(i, {
+      name: t,
+      icon: l,
+      size: "xlarge"
+    }, null) || (t || l) && !o && n(i, {
+      name: c(`${t}-outline`),
+      icon: a,
+      size: "xlarge"
+    }, null))]]);
+  },
+  methods: {
+    handleClick(e) {
+      this.$emit("click", {
+        value: this.$props.value,
+        target: this.$el,
+        event: e
+      });
+    },
+    handleMouseLeave(e) {
+      this.$emit("mouseleave", {
+        target: this.$el,
+        event: e
+      });
+    },
+    handleMouseMove(e) {
+      this.$emit("mousemove", {
+        value: this.$props.value,
+        target: this.$el,
+        event: e
+      });
+    },
+    handleMouseEnter(e) {
+      this.$emit("mouseenter", {
+        target: this.$el,
+        event: e
+      });
+    },
+    handleKeyDown(e) {
+      this.$emit("keydown", e);
+    },
+    handleFocus(e) {
+      this.$emit("focus", e);
+    },
+    handleBlur(e) {
+      this.$emit("blur", e);
+    }
+  }
+});
+export {
+  B as RatingItem
+};

package/rating/utils/main.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 n=(r,t)=>{if(r%1){const o=Math.pow(10,(t.toString().split(".")[1]||t.toString().split(".")[0]).length);return Math.round(r*o)/o}return r},f=(r,t)=>r-t*Math.floor(r/t),i=(r,t,o)=>n(r-o,o)<t&&t<r,l=(r,t,o,s)=>t===null?!1:s==="continues"?i(r,t,o)?n(r-o/2,o/2)<=t:r<=t:s==="single"?i(r,t,o)?n(r-o/2,o/2)===t:r===t:!1,c=(r,t,o)=>r==="ltr"?o<t.x+t.width/2:o>t.x+t.width/2;exports.calcIsFirstHalf=c;exports.getRemainder=f;exports.isHalf=i;exports.isSelected=l;exports.toRound=n;

package/rating/utils/main.mjs

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+const n = (r, t) => {
+  if (r % 1) {
+    const o = Math.pow(10, (t.toString().split(".")[1] || t.toString().split(".")[0]).length);
+    return Math.round(r * o) / o;
+  }
+  return r;
+}, s = (r, t) => r - t * Math.floor(r / t), i = (r, t, o) => n(r - o, o) < t && t < r, c = (r, t, o, f) => t === null ? !1 : f === "continues" ? i(r, t, o) ? n(r - o / 2, o / 2) <= t : r <= t : f === "single" ? i(r, t, o) ? n(r - o / 2, o / 2) === t : r === t : !1, h = (r, t, o) => r === "ltr" ? o < t.x + t.width / 2 : o > t.x + t.width / 2;
+export {
+  h as calcIsFirstHalf,
+  s as getRemainder,
+  i as isHalf,
+  c as isSelected,
+  n as toRound
+};

package/rating/utils/rating-reducer.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 s=require("./main.js");var u=(r=>(r.select="select",r.deselect="deselect",r.increase="increase",r.decrease="decrease",r.min="min",r.max="max",r.reset="reset",r))(u||{});const d=(r,e)=>{switch(e.type){case"select":return e.payload===void 0||e.step===void 0?r:e.payload===r?null:e.payload>=e.min?e.payload<e.max?s.toRound(e.payload,e.step):e.max:e.min;case"deselect":return null;case"increase":return e.step===void 0?r:r<e.min?e.min:r+e.step<e.max?s.toRound(r+e.step,e.step):e.max;case"decrease":return e.step===void 0?r:s.toRound(r-e.step,e.step)>=e.min?s.toRound(r-e.step,e.step):e.min;case"min":return e.step===void 0?r:e.min;case"max":return e.max;case"reset":return null;default:return r}};exports.RATING_ACTION=u;exports.ratingReducer=d;

package/rating/utils/rating-reducer.mjs

@@ -0,0 +1,33 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { toRound as s } from "./main.mjs";
+var u = /* @__PURE__ */ ((r) => (r.select = "select", r.deselect = "deselect", r.increase = "increase", r.decrease = "decrease", r.min = "min", r.max = "max", r.reset = "reset", r))(u || {});
+const p = (r, e) => {
+  switch (e.type) {
+    case "select":
+      return e.payload === void 0 || e.step === void 0 ? r : e.payload === r ? null : e.payload >= e.min ? e.payload < e.max ? s(e.payload, e.step) : e.max : e.min;
+    case "deselect":
+      return null;
+    case "increase":
+      return e.step === void 0 ? r : r < e.min ? e.min : r + e.step < e.max ? s(r + e.step, e.step) : e.max;
+    case "decrease":
+      return e.step === void 0 ? r : s(r - e.step, e.step) >= e.min ? s(r - e.step, e.step) : e.min;
+    case "min":
+      return e.step === void 0 ? r : e.min;
+    case "max":
+      return e.max;
+    case "reset":
+      return null;
+    default:
+      return r;
+  }
+};
+export {
+  u as RATING_ACTION,
+  p as ratingReducer
+};

package/signature/Signature.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 s=require("vue"),p=require("@progress/kendo-vue-buttons"),i=require("@progress/kendo-vue-common"),c=require("./SignatureDialog.js"),m=require("./SignatureBottomActions.js"),g=require("./SignatureLine.js"),f=require("@progress/kendo-vue-intl"),a=require("../messages/main.js"),C=require("../package-metadata.js"),v=require("./SignatureCanvas.js"),S=require("./utils/main.js"),y=require("@progress/kendo-svg-icons"),$=250,k=84,b=3,z=2,O="#000000",V="#ffffff",B=s.defineComponent({name:"KendoSignature",model:{event:"changemodel"},emits:{change:null,focus:null,blur:null,open:null,close:null,changemodel:null,"update:modelValue":null},inject:{kendoLocalizationService:{default:null}},props:{strokeWidth:{type:Number,default:1},smooth:Boolean,popupScale:{type:Number,default:b},exportScale:{type:Number,default:z},modelValue:String,name:String,value:String,tabIndex:Number,dir:String,ariaDescribedBy:String,ariaLabelledBy:String,ariaLabel:String,hideLine:Boolean,open:{type:Boolean,default:void 0},readOnly:Boolean,disabled:Boolean,validationMessage:String,maximizable:{type:Boolean,default:!0},color:String,backgroundColor:String,validityStyles:{type:Boolean,default:!0},required:{type:Boolean,default:!1},valid:{type:Boolean,default:void 0},size:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}},rounded:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return[null,"solid","flat","outline"].includes(e)}}},created(){i.validatePackage(C.packageMetadata)},computed:{wrapperClass(){return{...this.openWrapperClass,"k-signature-maximized":!1}},openWrapperClass(){const e=!this.validityStyles||this.validityGetter().valid;return{"k-input":!0,"k-signature":!0,"k-signature-maximized":!0,[`k-signature-${i.kendoThemeMaps.sizeMap[this.$props.size]||this.$props.size}`]:this.$props.size,[`k-input-${this.$props.fillMode}`]:this.$props.fillMode,[`k-rounded-${i.kendoThemeMaps.roundedMap[this.$props.rounded]||this.$props.rounded}`]:this.$props.rounded,"k-invalid":!e,"k-required":this.$props.required,"k-disabled":this.$props.disabled,"k-focus":this.focused}},computedValue(){return this.value!==void 0?this.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.currentValue},computedOpen(){return this.open!==void 0?this.open:this.currentOpen},computedColor(){let e=O;return!this.$props.color&&typeof document!="undefined"&&this.$el&&(e=getComputedStyle(this.$el).color),this.$props.color||e},computedBgColor(){let e=V;return!this.$props.backgroundColor&&typeof document!="undefined"&&this.$el&&(e=getComputedStyle(this.$el).backgroundColor),this.$props.backgroundColor||e}},watch:{computedValue(e){e!==this.currentValue&&this.loadImage(e)},computedOpen(){this.loadImage(this.computedValue)}},data(){return{focused:!1,isDrawing:!1,currentValue:void 0,popupValue:void 0,currentOpen:!1}},mounted(){this.setRefs()},updated(){this.setRefs()},setup(){return{inputRef:s.ref(null)}},render(){const e=f.provideLocalizationService(this),t=!(this.computedOpen||this.isDrawing||!this.$props.maximizable||this.$props.disabled),n=!(!this.computedValue||this.isDrawing||this.$props.readOnly||this.$props.disabled),r=e.toLanguageString(a.signatureMaximize,a.messages[a.signatureMaximize]),l=e.toLanguageString(a.signatureClear,a.messages[a.signatureClear]),u=s.createVNode("div",{class:"k-signature-actions k-signature-actions-top"},[t&&s.createVNode(p.Button,{class:"k-signature-action k-signature-maximize",ref:i.setRef(this,"maximizeButton"),icon:"hyperlink-open",svgIcon:y.hyperlinkOpenIcon,shape:null,fillMode:"flat",size:this.$props.size,onClick:this.onMaximizeClick,"aria-label":r,title:r},null)]),d=!this.$props.hideLine&&s.createVNode(g.SignatureLine,null,null),h=s.createVNode(m.SignatureBottomActions,{showClear:n,size:this.size,onClear:this.onClear,title:l},null);return s.createVNode("div",{dir:this.$props.dir,class:this.wrapperClass,onFocus:this.onFocus,onBlur:this.onBlur},[s.createVNode(v.SignatureCanvas,{ref:i.setRef(this,"canvas"),name:this.name,value:this.computedValue,tabIndex:this.tabIndex,disabled:this.disabled,readOnly:this.readOnly,color:this.computedColor,backgroundColor:this.computedBgColor,strokeWidth:this.strokeWidth,smooth:this.smooth,popupScale:1,scale:this.exportScale,onChange:this.onValueChange,elementSize:this.elementSize,onDraw:this.onDraw,onDrawend:this.onDrawEnd},null),u,d,h,this.computedOpen&&s.createVNode(c.SignatureDialog,{ref:i.setRef(this,"dialog"),openWrapperClass:this.openWrapperClass,popupWidth:this.popupWidth,popupHeight:this.popupHeight,showClear:n,onClose:this.onMinimizeClick,onClear:this.onClear,onOverlayclick:this.onOverlayClick,onFocus:this.onFocus,onBlur:this.onBlur,value:this.computedValue,tabIndex:this.tabIndex,disabled:this.disabled,readOnly:this.readOnly,color:this.computedColor,backgroundColor:this.computedBgColor,strokeWidth:this.strokeWidth,smooth:this.smooth,popupScale:this.$props.popupScale,scale:1/this.popupScale*this.exportScale,onChange:this.onValueChange,elementSize:this.elementSize,onDraw:this.onDraw,onDrawend:this.onDrawEnd},null)])},methods:{setRefs(){this.canvas=i.getRef(this,"canvas"),this.minimizeButton=i.getRef(this,"minimizeButton"),this.maximizeButton=i.getRef(this,"maximizeButton"),this.dialog=i.getRef(this,"dialog"),this.popupWidth=this.popupSize().width,this.popupHeight=this.popupSize().height},onOverlayClick(){this.currentOpen=!1},onValueChange(e){this.currentValue=e,this.$emit("changemodel",e),this.$emit("update:modelValue",e),this.$emit("change",{value:e})},onDialogChange(e){this.onValueChange(e.value)},reset(){this.clear(),this.onValueChange()},clear(){this.canvas&&this.canvas.clear(),this.dialog&&this.dialog.openCanvas&&this.dialog.openCanvas.clear()},loadImage(e){this.canvas&&this.canvas.loadImage(e),this.dialog&&this.dialog.openCanvas&&this.dialog.openCanvas.loadImage(e)},onDialogClose(e){var t;this.onMinimizeClick(e),(t=this.maximizeButton||this.canvas.$el)==null||t.focus()},exportImage(e){var n;const{width:t,height:o}=e;return(n=this.canvas.instance)==null?void 0:n.exportImage({width:t*this.exportScale,height:o*this.exportScale})},validityGetter(){const e=this.$props.validationMessage!==void 0,o=!this.computedValue,n=this.$props.valid!==void 0?this.$props.valid:!this.required||!o;return{customError:e,valid:n,valueMissing:o}},focusElement(){this.canvas.$el.focus()},getImperativeHandle(){const e={element:this.$el,focus:this.focusElement()};return Object.defineProperty(e,"name",{get:()=>this.name}),Object.defineProperty(e,"value",{get:()=>this.computedValue}),Object.defineProperty(e,"validity",{get:()=>this.validityGetter()}),Object.defineProperty(e,"validityStyles",{get:()=>this.validityStyles}),Object.defineProperty(e,"required",{get:()=>this.required}),Object.defineProperty(e,"color",{get:()=>this.computedColor}),Object.defineProperty(e,"backgroundColor",{get:()=>this.computedBgColor}),e},onFocus(e){this.focused||this.computedOpen||(this.focused(!0),this.$emit("focus",{event:e,...this.getImperativeHandle()}))},onBlur(e){S.hasParent(e.relatedTarget,this.$el)||(this.focused=!1,this.$emit("blur",{event:e,...this.getImperativeHandle()}))},onMaximizeClick:async function(t){this.exportImage(this.popupSize()).then(o=>{this.currentValue=o}),this.currentOpen=!0,this.$emit("open",{event:t,...this.getImperativeHandle()})},onMinimizeClick(e){this.currentOpen=!1,this.$emit("close",{event:e,...this.getImperativeHandle()})},onClear(){this.reset(),this.focusElement()},elementSize(){const e=this.$props.width||this.$el&&this.$el.offsetWidth||$,t=this.$props.height||this.$el&&this.$el.offsetHeight||k;return{width:e,height:t}},popupSize(){const{width:e,height:t}=this.elementSize();return{width:e*this.popupScale,height:t*this.popupScale}},onDraw(){this.isDrawing=!0},onDrawEnd(){this.isDrawing=!1}}});exports.Signature=B;