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

package/dist/es/input/Input.d.ts

@@ -126,14 +126,23 @@ export interface InputProps extends FormComponentProps {
      */
     inputClass?: String;
     /**
-     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
-     * For example these elements could contain error or hint message.
+     * Identifies the element(s) which will label the component.
      */
     ariaDescribedBy?: string;
     /**
-     * Identifies the element(s) which will label the component.
+     * Defines a string value that labels an interactive element.
      */
     ariaLabelledBy?: string;
+    /**
+     * Defines the built-in [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength) property of the text inputs.
+     * * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `minlength`. Camel-case and kebap-case won't work in this scenario.
+     */
+    minlength?: string;
+    /**
+     * Defines the built-in [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength) property of the text inputs.
+     * * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `maxlength`. Camel-case and kebap-case won't work in this scenario.
+     */
+    maxlength?: string;
 }
 /**
  * @hidden

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-inputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1673512136,
+    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/es/signature/Signature.js

@@ -135,13 +135,15 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 import { Button } from '@progress/kendo-vue-buttons';
 import { kendoThemeMaps, setRef, getRef, validatePackage } from '@progress/kendo-vue-common';
-import { Dialog } from '@progress/kendo-vue-dialogs';
+import { SignatureDialog } from './SignatureDialog';
+import { SignatureBottomActions } from './SignatureBottomActions';
+import { SignatureLine } from './SignatureLine';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
-import { messages, signatureClear, signatureMaximize, signatureMinimize } from '../messages/main';
+import { messages, signatureClear, signatureMaximize } from '../messages/main';
 import { packageMetadata } from '../package-metadata';
 import { SignatureCanvas } from './SignatureCanvas';
 import { hasParent } from './utils';
-import { hyperlinkOpenIcon, xIcon } from '@progress/kendo-svg-icons';
+import { hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
 var DEFAULT_WIDTH = 250;
 var DEFAULT_HEIGHT = 84;
 var DEFAULT_POPUP_SCALE = 3;
@@ -186,6 +188,7 @@ var SignatureVue2 = {
       default: DEFAULT_EXPORT_SCALE
     },
     modelValue: String,
+    name: String,
     value: String,
     tabIndex: Number,
     dir: String,
@@ -214,6 +217,10 @@ var SignatureVue2 = {
       type: Boolean,
       default: false
     },
+    valid: {
+      type: Boolean,
+      default: undefined
+    },
     size: {
       type: String,
       default: 'medium',
@@ -247,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,
@@ -277,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,
@@ -287,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 () {
@@ -304,48 +317,13 @@ var SignatureVue2 = {
     };
   },
   render: function render(createElement) {
-    var _this = this;
     var h = gh || createElement;
     var ls = provideLocalizationService(this);
     var showMaximize = !(this.computedOpen || this.isDrawing || !this.$props.maximizable || this.$props.disabled);
-    var showMinimize = this.computedOpen && !this.isDrawing;
     var isEmpty = !this.computedValue;
     var showClear = !(isEmpty || this.isDrawing || this.$props.readOnly || this.$props.disabled);
     var maximizeTitle = ls.toLanguageString(signatureMaximize, messages[signatureMaximize]);
-    var minimizeTitle = ls.toLanguageString(signatureMinimize, messages[signatureMinimize]);
     var clearTitle = ls.toLanguageString(signatureClear, messages[signatureClear]);
-    var renderCanvas = function renderCanvas(refName) {
-      return h(SignatureCanvas, {
-        ref: setRef(this, refName),
-        value: this.computedValue,
-        attrs: this.v3 ? undefined : {
-          value: this.computedValue,
-          tabIndex: this.tabIndex,
-          disabled: this.disabled,
-          color: this.computedColor,
-          backgroundColor: this.computedBgColor,
-          strokeWidth: this.strokeWidth,
-          smooth: this.smooth,
-          popupScale: refName === 'openCanvas' ? this.$props.popupScale : 1,
-          scale: refName === 'openCanvas' ? 1 / this.popupScale * this.exportScale : this.exportScale,
-          elementSize: this.elementSize
-        },
-        tabIndex: this.tabIndex,
-        disabled: this.disabled,
-        color: this.computedColor,
-        backgroundColor: this.computedBgColor,
-        strokeWidth: this.strokeWidth,
-        smooth: this.smooth,
-        popupScale: refName === 'openCanvas' ? this.$props.popupScale : 1,
-        scale: refName === 'openCanvas' ? 1 / this.popupScale * this.exportScale : this.exportScale,
-        onChange: this.onValueChange,
-        on: this.v3 ? undefined : {
-          "change": this.onValueChange
-        },
-        elementSize: this.elementSize
-      });
-    };
-    var canvasDiv = renderCanvas.call(this, 'canvas');
     var actions = h("div", {
       "class": 'k-signature-actions k-signature-actions-top'
     }, [showMaximize &&
@@ -373,66 +351,22 @@ var SignatureVue2 = {
       },
       "aria-label": maximizeTitle,
       title: maximizeTitle
-    }), showMinimize &&
-    // @ts-ignore
-    h(Button, {
-      "class": 'k-signature-action k-signature-minimize k-rotate-180',
-      ref: setRef(this, 'minimizeButton'),
-      icon: 'hyperlink-open',
-      attrs: this.v3 ? undefined : {
-        icon: 'hyperlink-open',
-        svgIcon: hyperlinkOpenIcon,
-        shape: null,
-        fillMode: 'flat',
-        size: this.$props.size,
-        "aria-label": minimizeTitle,
-        title: minimizeTitle
-      },
-      svgIcon: hyperlinkOpenIcon,
-      shape: null,
-      fillMode: 'flat',
-      size: this.$props.size,
-      onClick: this.onMinimizeClick,
-      on: this.v3 ? undefined : {
-        "click": this.onMinimizeClick
-      },
-      "aria-label": minimizeTitle,
-      title: minimizeTitle
     })]);
-    var hideLine = !this.$props.hideLine && h("div", {
-      "class": 'k-signature-line',
-      style: {
-        zIndex: 2,
-        pointerEvents: 'none'
-      }
-    });
-    var bottomActions = h("div", {
-      "class": 'k-signature-actions k-signature-actions-bottom'
-    }, [showClear &&
-    // @ts-ignore
-    h(Button, {
-      "class": 'k-signature-action k-signature-clear',
-      icon: 'x',
+    var hideLine = !this.$props.hideLine && h(SignatureLine);
+    var bottomActions = h(SignatureBottomActions, {
+      showClear: showClear,
       attrs: this.v3 ? undefined : {
-        icon: 'x',
-        svgIcon: xIcon,
-        shape: null,
-        fillMode: 'flat',
-        size: this.$props.size,
-        "aria-label": clearTitle,
+        showClear: showClear,
+        size: this.size,
         title: clearTitle
       },
-      svgIcon: xIcon,
-      shape: null,
-      fillMode: 'flat',
-      size: this.$props.size,
-      onClick: this.onClear,
+      size: this.size,
+      onClear: this.onClear,
       on: this.v3 ? undefined : {
-        "click": this.onClear
+        "clear": this.onClear
       },
-      "aria-label": clearTitle,
       title: clearTitle
-    })]);
+    });
     return h("div", {
       dir: this.$props.dir,
       attrs: this.v3 ? undefined : {
@@ -445,51 +379,105 @@ var SignatureVue2 = {
         "blur": this.onBlur
       },
       onBlur: this.onBlur
-    }, [canvasDiv, actions, hideLine, bottomActions, this.computedOpen &&
-    // @ts-ignore function children
-    h(Dialog, {
-      ref: setRef(this, 'dialog'),
-      onOverlayclick: this.onOverlayClick,
+    }, [h(SignatureCanvas, {
+      ref: setRef(this, 'canvas'),
+      name: this.name,
+      attrs: this.v3 ? undefined : {
+        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,
+        elementSize: this.elementSize
+      },
+      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,
       on: this.v3 ? undefined : {
-        "overlayclick": this.onOverlayClick
-      }
-    }, this.v3 ? function () {
-      return [h("div", {
-        style: {
-          width: _this.popupWidth + 'px',
-          height: _this.popupHeight + 'px'
-        },
-        dir: _this.$props.dir,
-        attrs: _this.v3 ? undefined : {
-          dir: _this.$props.dir
-        },
-        "class": _this.openWrapperClass,
-        onFocus: _this.onFocus,
-        on: _this.v3 ? undefined : {
-          "focus": _this.onFocus,
-          "blur": _this.onBlur
-        },
-        onBlur: _this.onBlur
-      }, [renderCanvas.call(_this, 'openCanvas'), actions, hideLine, bottomActions])];
-    } : [h("div", {
-      style: {
-        width: _this.popupWidth + 'px',
-        height: _this.popupHeight + 'px'
+        "change": this.onValueChange,
+        "draw": this.onDraw,
+        "drawend": this.onDrawEnd
       },
-      dir: _this.$props.dir,
-      attrs: _this.v3 ? undefined : {
-        dir: _this.$props.dir
+      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,
+        popupWidth: this.popupWidth,
+        popupHeight: this.popupHeight,
+        showClear: showClear,
+        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,
+        elementSize: this.elementSize
       },
-      "class": _this.openWrapperClass,
-      onFocus: _this.onFocus,
-      on: _this.v3 ? undefined : {
-        "focus": _this.onFocus,
-        "blur": _this.onBlur
+      popupWidth: this.popupWidth,
+      popupHeight: this.popupHeight,
+      showClear: showClear,
+      onClose: this.onMinimizeClick,
+      on: this.v3 ? undefined : {
+        "close": this.onMinimizeClick,
+        "clear": this.onClear,
+        "overlayclick": this.onOverlayClick,
+        "focus": this.onFocus,
+        "blur": this.onBlur,
+        "change": this.onValueChange,
+        "draw": this.onDraw,
+        "drawend": this.onDrawEnd
       },
-      onBlur: _this.onBlur
-    }, [renderCanvas.call(_this, 'openCanvas'), actions, hideLine, bottomActions])])]);
+      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
+    })]);
   },
   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;
     },
@@ -505,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);
@@ -514,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,
@@ -551,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) {
@@ -582,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*/];
         });
       });
     },
@@ -626,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/es/signature/SignatureBottomActions.d.ts

@@ -0,0 +1,45 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * @hidden
+ */
+export interface SignatureBottomActionsProps {
+    showClear: boolean;
+    size: string;
+    title: string;
+}
+/**
+ * @hidden
+ */
+export interface SignatureBottomActionsComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SignatureBottomActionsMethods {
+    [key: string]: any;
+    element: () => HTMLSpanElement | null;
+}
+/**
+ * @hidden
+ */
+export interface SignatureBottomActionsData {
+}
+/**
+ * @hidden
+ */
+export interface SignatureBottomActionsAll extends Vue2type, SignatureBottomActionsMethods, SignatureBottomActionsData, SignatureBottomActionsComputed, SignatureBottomActionsProps {
+}
+/**
+ * @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/es/signature/SignatureBottomActions.js

@@ -0,0 +1,73 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { Button } from '@progress/kendo-vue-buttons';
+import { xIcon } from '@progress/kendo-svg-icons';
+/**
+ * @hidden
+ */
+var SignatureBottomActionsVue2 = {
+  name: 'KendoSignatureBottomActions',
+  // @ts-ignore
+  emits: {
+    clear: null
+  },
+  props: {
+    showClear: Boolean,
+    size: String,
+    title: String
+  },
+  methods: {
+    onClear: function onClear(e) {
+      this.$emit('clear', e);
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+      showClear = _a.showClear,
+      title = _a.title,
+      size = _a.size;
+    return h("div", {
+      "class": 'k-signature-actions k-signature-actions-bottom'
+    }, [showClear &&
+    // @ts-ignore
+    h(Button, {
+      "class": 'k-signature-action k-signature-clear',
+      icon: 'x',
+      attrs: this.v3 ? undefined : {
+        icon: 'x',
+        svgIcon: xIcon,
+        shape: null,
+        fillMode: 'flat',
+        size: size,
+        "aria-label": title,
+        title: title
+      },
+      svgIcon: xIcon,
+      shape: null,
+      fillMode: 'flat',
+      size: size,
+      onClick: this.onClear,
+      on: this.v3 ? undefined : {
+        "click": this.onClear
+      },
+      "aria-label": title,
+      title: title
+    })]);
+  }
+};
+/**
+ * @hidden
+ */
+var SignatureBottomActions = SignatureBottomActionsVue2;
+export { SignatureBottomActions, SignatureBottomActionsVue2 };