@progress/kendo-vue-inputs 3.7.4-dev.202301131104 → 3.7.4-dev.202301151601

package/dist/es/signature/interfaces/SignatureCanvasProps.d.ts

@@ -1,5 +1,6 @@
 /** @hidden */
 export interface SignatureCanvasProps {
+    name?: string;
     value?: string;
     tabIndex?: number;
     disabled?: boolean;

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-inputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1673606827,
+    publishDate: 1673797599,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/esm/signature/Signature.js

@@ -188,6 +188,7 @@ var SignatureVue2 = {
       default: DEFAULT_EXPORT_SCALE
     },
     modelValue: String,
+    name: String,
     value: String,
     tabIndex: Number,
     dir: String,
@@ -216,6 +217,10 @@ var SignatureVue2 = {
       type: Boolean,
       default: false
     },
+    valid: {
+      type: Boolean,
+      default: undefined
+    },
     size: {
       type: String,
       default: 'medium',
@@ -249,9 +254,7 @@ var SignatureVue2 = {
     },
     openWrapperClass: function openWrapperClass() {
       var _a;
-      var isValid =
-      // !this.validityStylesGetter() || 
-      this.validityGetter().valid;
+      var isValid = !this.validityStyles || this.validityGetter().valid;
       return _a = {
         'k-input': true,
         'k-signature': true,
@@ -279,6 +282,16 @@ var SignatureVue2 = {
       return this.$props.backgroundColor || defaultBackgroundColor;
     }
   },
+  watch: {
+    computedValue: function computedValue(newValue) {
+      if (newValue !== this.currentValue) {
+        this.loadImage(newValue);
+      }
+    },
+    computedOpen: function computedOpen() {
+      this.loadImage(this.computedValue);
+    }
+  },
   data: function data() {
     return {
       focused: false,
@@ -289,12 +302,10 @@ var SignatureVue2 = {
     };
   },
   mounted: function mounted() {
-    this.canvas = getRef(this, 'canvas');
-    this.minimizeButton = getRef(this, 'minimizeButton');
-    this.maximizeButton = getRef(this, 'maximizeButton');
-    this.dialog = getRef(this, 'dialog');
-    this.popupWidth = this.popupSize().width;
-    this.popupHeight = this.popupSize().height;
+    this.setRefs();
+  },
+  updated: function updated() {
+    this.setRefs();
   },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
@@ -370,8 +381,9 @@ var SignatureVue2 = {
       onBlur: this.onBlur
     }, [h(SignatureCanvas, {
       ref: setRef(this, 'canvas'),
-      value: this.computedValue,
+      name: this.name,
       attrs: this.v3 ? undefined : {
+        name: this.name,
         value: this.computedValue,
         tabIndex: this.tabIndex,
         disabled: this.disabled,
@@ -384,6 +396,7 @@ var SignatureVue2 = {
         scale: this.exportScale,
         elementSize: this.elementSize
       },
+      value: this.computedValue,
       tabIndex: this.tabIndex,
       disabled: this.disabled,
       readOnly: this.readOnly,
@@ -395,10 +408,15 @@ var SignatureVue2 = {
       scale: this.exportScale,
       onChange: this.onValueChange,
       on: this.v3 ? undefined : {
-        "change": this.onValueChange
+        "change": this.onValueChange,
+        "draw": this.onDraw,
+        "drawend": this.onDrawEnd
       },
-      elementSize: this.elementSize
+      elementSize: this.elementSize,
+      onDraw: this.onDraw,
+      onDrawend: this.onDrawEnd
     }), actions, hideLine, bottomActions, this.computedOpen && h(SignatureDialog, {
+      ref: setRef(this, 'dialog'),
       openWrapperClass: this.openWrapperClass,
       attrs: this.v3 ? undefined : {
         openWrapperClass: this.openWrapperClass,
@@ -427,7 +445,9 @@ var SignatureVue2 = {
         "overlayclick": this.onOverlayClick,
         "focus": this.onFocus,
         "blur": this.onBlur,
-        "change": this.onValueChange
+        "change": this.onValueChange,
+        "draw": this.onDraw,
+        "drawend": this.onDrawEnd
       },
       onClear: this.onClear,
       onOverlayclick: this.onOverlayClick,
@@ -444,10 +464,20 @@ var SignatureVue2 = {
       popupScale: this.$props.popupScale,
       scale: 1 / this.popupScale * this.exportScale,
       onChange: this.onValueChange,
-      elementSize: this.elementSize
+      elementSize: this.elementSize,
+      onDraw: this.onDraw,
+      onDrawend: this.onDrawEnd
     })]);
   },
   methods: {
+    setRefs: function setRefs() {
+      this.canvas = getRef(this, 'canvas');
+      this.minimizeButton = getRef(this, 'minimizeButton');
+      this.maximizeButton = getRef(this, 'maximizeButton');
+      this.dialog = getRef(this, 'dialog');
+      this.popupWidth = this.popupSize().width;
+      this.popupHeight = this.popupSize().height;
+    },
     onOverlayClick: function onOverlayClick() {
       this.currentOpen = false;
     },
@@ -463,8 +493,25 @@ var SignatureVue2 = {
       this.onValueChange(e.value);
     },
     reset: function reset() {
+      this.clear();
       this.onValueChange();
     },
+    clear: function clear() {
+      if (this.canvas) {
+        this.canvas.clear();
+      }
+      if (this.dialog && this.dialog.openCanvas) {
+        this.dialog.openCanvas.clear();
+      }
+    },
+    loadImage: function loadImage(value) {
+      if (this.canvas) {
+        this.canvas.loadImage(value);
+      }
+      if (this.dialog && this.dialog.openCanvas) {
+        this.dialog.openCanvas.loadImage(value);
+      }
+    },
     onDialogClose: function onDialogClose(event) {
       var _a;
       this.onMinimizeClick(event);
@@ -472,29 +519,18 @@ var SignatureVue2 = {
     },
     exportImage: function exportImage(exportSize) {
       var _a;
-      return __awaiter(this, void 0, void 0, function () {
-        var width, height;
-        return __generator(this, function (_b) {
-          switch (_b.label) {
-            case 0:
-              width = exportSize.width, height = exportSize.height;
-              return [4 /*yield*/, (_a = this.canvas.instance) === null || _a === void 0 ? void 0 : _a.exportImage({
-                width: width * this.exportScale,
-                height: height * this.exportScale
-              })];
-            case 1:
-              return [2 /*return*/, _b.sent()];
-          }
-        });
+      var width = exportSize.width,
+        height = exportSize.height;
+      return (_a = this.canvas.instance) === null || _a === void 0 ? void 0 : _a.exportImage({
+        width: width * this.exportScale,
+        height: height * this.exportScale
       });
     },
     validityGetter: function validityGetter() {
       var customError = this.$props.validationMessage !== undefined;
-      var currentValue = this.computedValue; // valueGetter();
+      var currentValue = this.computedValue;
       var valueMissing = !currentValue;
-      var valid = this.$props.valid !== undefined ? this.$props.valid :
-      //   !requiredGetter() || 
-      !valueMissing;
+      var valid = this.$props.valid !== undefined ? this.$props.valid : !this.required || !valueMissing;
       return {
         customError: customError,
         valid: valid,
@@ -509,14 +545,27 @@ var SignatureVue2 = {
         element: this.$el,
         focus: this.focusElement()
       };
-      // Object.defineProperty(options, 'name', { get: nameGetter });
-      // Object.defineProperty(options, 'value', { get: this.computedValue }); //valueGetter
-      // Object.defineProperty(options, 'validity', { get: validityGetter });
-      // Object.defineProperty(options, 'validityStyles', { get: validityStylesGetter });
-      // Object.defineProperty(options, 'required', { get: requiredGetter });
-      // Object.defineProperty(options, 'props', { get: propsGetter });
-      // Object.defineProperty(options, 'color', { get: colorGetter });
-      // Object.defineProperty(options, 'backgroundColor', { get: backgroundColorGetter });
+      Object.defineProperty(options, 'name', {
+        get: this.name
+      });
+      Object.defineProperty(options, 'value', {
+        get: this.computedValue
+      });
+      Object.defineProperty(options, 'validity', {
+        get: this.validityGetter()
+      });
+      Object.defineProperty(options, 'validityStyles', {
+        get: this.validityStyles
+      });
+      Object.defineProperty(options, 'required', {
+        get: this.required
+      });
+      Object.defineProperty(options, 'color', {
+        get: this.computedColor
+      });
+      Object.defineProperty(options, 'backgroundColor', {
+        get: this.computedBgColor
+      });
       return options;
     },
     onFocus: function onFocus(event) {
@@ -540,20 +589,17 @@ var SignatureVue2 = {
     },
     onMaximizeClick: function onMaximizeClick(event) {
       return __awaiter(this, void 0, void 0, function () {
-        var _a;
-        return __generator(this, function (_b) {
-          switch (_b.label) {
-            case 0:
-              _a = this;
-              return [4 /*yield*/, this.exportImage(this.popupSize())];
-            case 1:
-              _a.currentValue = _b.sent();
-              this.currentOpen = true;
-              this.$emit('open', __assign({
-                event: event
-              }, this.getImperativeHandle()));
-              return [2 /*return*/];
-          }
+        var that;
+        return __generator(this, function (_a) {
+          that = this;
+          this.exportImage(this.popupSize()).then(function (newValue) {
+            that.currentValue = newValue;
+          });
+          this.currentOpen = true;
+          this.$emit('open', __assign({
+            event: event
+          }, this.getImperativeHandle()));
+          return [2 /*return*/];
         });
       });
     },
@@ -584,6 +630,12 @@ var SignatureVue2 = {
         width: width * this.popupScale,
         height: height * this.popupScale
       };
+    },
+    onDraw: function onDraw() {
+      this.isDrawing = true;
+    },
+    onDrawEnd: function onDrawEnd() {
+      this.isDrawing = false;
     }
   }
 };

package/dist/esm/signature/SignatureBottomActions.d.ts

@@ -38,5 +38,8 @@ export interface SignatureBottomActionsAll extends Vue2type, SignatureBottomActi
  * @hidden
  */
 declare let SignatureBottomActionsVue2: ComponentOptions<SignatureBottomActionsAll, DefaultData<SignatureBottomActionsData>, DefaultMethods<SignatureBottomActionsAll>, SignatureBottomActionsComputed, RecordPropsDefinition<SignatureBottomActionsProps>>;
+/**
+ * @hidden
+ */
 declare const SignatureBottomActions: DefineComponent<{}, any, SignatureBottomActionsData, SignatureBottomActionsComputed, SignatureBottomActionsMethods, {}, {}, {}, string, {}, {}, {}>;
 export { SignatureBottomActions, SignatureBottomActionsVue2 };

package/dist/esm/signature/SignatureBottomActions.js

@@ -66,5 +66,8 @@ var SignatureBottomActionsVue2 = {
     })]);
   }
 };
+/**
+ * @hidden
+ */
 var SignatureBottomActions = SignatureBottomActionsVue2;
 export { SignatureBottomActions, SignatureBottomActionsVue2 };

package/dist/esm/signature/SignatureCanvas.js

@@ -1,120 +1,3 @@
-var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-var __generator = this && this.__generator || function (thisArg, body) {
-  var _ = {
-      label: 0,
-      sent: function sent() {
-        if (t[0] & 1) throw t[1];
-        return t[1];
-      },
-      trys: [],
-      ops: []
-    },
-    f,
-    y,
-    t,
-    g;
-  return g = {
-    next: verb(0),
-    "throw": verb(1),
-    "return": verb(2)
-  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
-    return this;
-  }), g;
-  function verb(n) {
-    return function (v) {
-      return step([n, v]);
-    };
-  }
-  function step(op) {
-    if (f) throw new TypeError("Generator is already executing.");
-    while (_) {
-      try {
-        if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-        if (y = 0, t) op = [op[0] & 2, t.value];
-        switch (op[0]) {
-          case 0:
-          case 1:
-            t = op;
-            break;
-          case 4:
-            _.label++;
-            return {
-              value: op[1],
-              done: false
-            };
-          case 5:
-            _.label++;
-            y = op[1];
-            op = [0];
-            continue;
-          case 7:
-            op = _.ops.pop();
-            _.trys.pop();
-            continue;
-          default:
-            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-              _ = 0;
-              continue;
-            }
-            if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
-              _.label = op[1];
-              break;
-            }
-            if (op[0] === 6 && _.label < t[1]) {
-              _.label = t[1];
-              t = op;
-              break;
-            }
-            if (t && _.label < t[2]) {
-              _.label = t[2];
-              _.ops.push(op);
-              break;
-            }
-            if (t[2]) _.ops.pop();
-            _.trys.pop();
-            continue;
-        }
-        op = body.call(thisArg, _);
-      } catch (e) {
-        op = [6, e];
-        y = 0;
-      } finally {
-        f = t = 0;
-      }
-    }
-    if (op[0] & 5) throw op[1];
-    return {
-      value: op[0] ? op[1] : void 0,
-      done: true
-    };
-  }
-};
 // @ts-ignore
 import * as Vue from 'vue';
 var allVue = Vue;
@@ -133,12 +16,11 @@ var setOptions = function setOptions() {
  */
 var SignatureCanvasVue2 = {
   name: 'KendoSignatureCanvas',
-  model: {
-    event: 'changemodel'
-  },
   // @ts-ignore
   emits: {
-    change: null
+    change: null,
+    draw: null,
+    drawend: null
   },
   inject: {
     kendoIntlService: {
@@ -149,6 +31,7 @@ var SignatureCanvasVue2 = {
     strokeWidth: Number,
     popupScale: Number,
     scale: Number,
+    name: String,
     value: String,
     tabIndex: Number,
     disabled: Boolean,
@@ -159,15 +42,6 @@ var SignatureCanvasVue2 = {
     smooth: Boolean
   },
   watch: {
-    value: function value(newLocale) {
-      if (this.instance) {
-        if (newLocale) {
-          this.instance.loadImage(newLocale);
-        } else {
-          this.instance.clear();
-        }
-      }
-    },
     color: setOptions,
     backgroundColor: setOptions,
     smooth: setOptions,
@@ -175,7 +49,6 @@ var SignatureCanvasVue2 = {
     readOnly: setOptions
   },
   mounted: function mounted() {
-    var _this = this;
     this.canvas = this.$el;
     var pad = new SignaturePad(this.canvas, this.getOptions());
     if (this.value) {
@@ -184,12 +57,8 @@ var SignatureCanvasVue2 = {
     this.instance = pad;
     this.instance.setOptions({
       onChange: this.onValueChange,
-      onDraw: function onDraw() {
-        return _this.isDrawing = true;
-      },
-      onDrawEnd: function onDrawEnd() {
-        return _this.isDrawing = false;
-      }
+      onDraw: this.onDraw,
+      onDrawEnd: this.onDrawEnd
     });
   },
   destroyed: !!isV3 ? undefined : function () {
@@ -219,6 +88,7 @@ var SignatureCanvasVue2 = {
         tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
         role: "img",
         id: this.$props.id,
+        name: this.$props.name,
         "aria-label": this.$props.ariaLabel,
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
@@ -226,6 +96,7 @@ var SignatureCanvasVue2 = {
       },
       role: "img",
       id: this.$props.id,
+      name: this.$props.name,
       "aria-label": this.$props.ariaLabel,
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
@@ -234,21 +105,23 @@ var SignatureCanvasVue2 = {
   },
   methods: {
     onValueChange: function onValueChange() {
-      return __awaiter(this, void 0, void 0, function () {
-        var nextValue;
-        return __generator(this, function (_a) {
-          switch (_a.label) {
-            case 0:
-              return [4 /*yield*/, this.exportImage(this.elementSize())];
-            case 1:
-              nextValue = _a.sent();
-              this.$emit('change', nextValue);
-              return [2 /*return*/];
-          }
-        });
+      var that = this;
+      this.exportImage(this.elementSize()).then(function (nextValue) {
+        that.$emit('change', nextValue);
       });
     },
-
+    onDraw: function onDraw() {
+      this.$emit('draw');
+    },
+    onDrawEnd: function onDrawEnd() {
+      this.$emit('drawend');
+    },
+    loadImage: function loadImage(newLocale) {
+      this.instance.loadImage(newLocale);
+    },
+    clear: function clear() {
+      this.instance.clear();
+    },
     getOptions: function getOptions() {
       return {
         scale: this.popupScale,
@@ -261,20 +134,11 @@ var SignatureCanvasVue2 = {
     },
     exportImage: function exportImage(exportSize) {
       var _a;
-      return __awaiter(this, void 0, void 0, function () {
-        var width, height;
-        return __generator(this, function (_b) {
-          switch (_b.label) {
-            case 0:
-              width = exportSize.width, height = exportSize.height;
-              return [4 /*yield*/, (_a = this.instance) === null || _a === void 0 ? void 0 : _a.exportImage({
-                width: width * this.scale,
-                height: height * this.scale
-              })];
-            case 1:
-              return [2 /*return*/, _b.sent()];
-          }
-        });
+      var width = exportSize.width,
+        height = exportSize.height;
+      return (_a = this.instance) === null || _a === void 0 ? void 0 : _a.exportImage({
+        width: width * this.scale,
+        height: height * this.scale
       });
     }
   }

package/dist/esm/signature/SignatureDialog.d.ts

@@ -4,6 +4,9 @@ declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
 };
 import { SignatureCanvasProps } from './interfaces/SignatureCanvasProps';
+/**
+ * @hidden
+ */
 export interface SignatureDialogProps extends SignatureCanvasProps {
     openWrapperClass?: object;
     size?: string;

package/dist/esm/signature/SignatureDialog.js

@@ -8,7 +8,7 @@ import { SignatureBottomActions } from './SignatureBottomActions.js';
 import { SignatureLine } from './SignatureLine.js';
 import { Button } from '@progress/kendo-vue-buttons';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
-import { setRef } from '@progress/kendo-vue-common';
+import { getRef, setRef } from '@progress/kendo-vue-common';
 import { hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
 import { SignatureCanvas } from './SignatureCanvas.js';
 import { messages, signatureClear, signatureMinimize } from '../messages/main.js';
@@ -24,7 +24,9 @@ var SignatureDialogVue2 = {
     close: null,
     focus: null,
     blur: null,
-    overlayclick: null
+    overlayclick: null,
+    draw: null,
+    drawend: null
   },
   props: {
     openWrapperClass: Object,
@@ -50,6 +52,14 @@ var SignatureDialogVue2 = {
       default: null
     }
   },
+  data: function data() {
+    return {
+      isDrawing: false
+    };
+  },
+  mounted: function mounted() {
+    this.openCanvas = getRef(this, 'openCanvas');
+  },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
     var v3 = !!isV3;
@@ -57,7 +67,6 @@ var SignatureDialogVue2 = {
       v3: v3
     };
   },
-  // @ts-ignore
   render: function render(createElement) {
     var _this = this;
     var h = gh || createElement;
@@ -148,12 +157,16 @@ var SignatureDialogVue2 = {
         scale: scale,
         onChange: _this.onValueChange,
         on: _this.v3 ? undefined : {
-          "change": _this.onValueChange
+          "change": _this.onValueChange,
+          "draw": _this.onDraw,
+          "drawend": _this.onDrawEnd
         },
-        elementSize: elementSize
+        elementSize: elementSize,
+        onDraw: _this.onDraw,
+        onDrawend: _this.onDrawEnd
       }), h("div", {
         "class": 'k-signature-actions k-signature-actions-top'
-      }, [
+      }, [!_this.isDrawing &&
       // @ts-ignore
       h(Button, {
         "class": 'k-signature-action k-signature-minimize k-rotate-180',
@@ -222,12 +235,16 @@ var SignatureDialogVue2 = {
       scale: scale,
       onChange: _this.onValueChange,
       on: _this.v3 ? undefined : {
-        "change": _this.onValueChange
+        "change": _this.onValueChange,
+        "draw": _this.onDraw,
+        "drawend": _this.onDrawEnd
       },
-      elementSize: elementSize
+      elementSize: elementSize,
+      onDraw: _this.onDraw,
+      onDrawend: _this.onDrawEnd
     }), h("div", {
       "class": 'k-signature-actions k-signature-actions-top'
-    }, [h(Button, {
+    }, [!_this.isDrawing && h(Button, {
       "class": 'k-signature-action k-signature-minimize k-rotate-180',
       ref: setRef(_this, 'minimizeButton'),
       icon: 'hyperlink-open',
@@ -254,6 +271,14 @@ var SignatureDialogVue2 = {
     return dialog;
   },
   methods: {
+    onDraw: function onDraw() {
+      this.isDrawing = true;
+      this.$emit('draw');
+    },
+    onDrawEnd: function onDrawEnd() {
+      this.isDrawing = false;
+      this.$emit('drawend');
+    },
     onValueChange: function onValueChange(nextValue) {
       this.$emit('change', nextValue);
     },

package/dist/esm/signature/SignatureLine.d.ts

@@ -35,5 +35,8 @@ export interface SignatureLineAll extends Vue2type, SignatureLineMethods, Signat
  * @hidden
  */
 declare let SignatureLineVue2: ComponentOptions<SignatureLineAll, DefaultData<SignatureLineData>, DefaultMethods<SignatureLineAll>, SignatureLineComputed, RecordPropsDefinition<{}>>;
+/**
+ * @hidden
+ */
 declare const SignatureLine: DefineComponent<{}, any, SignatureLineData, SignatureLineComputed, SignatureLineMethods, {}, {}, {}, string, {}, {}, {}>;
 export { SignatureLine, SignatureLineVue2 };