@progress/kendo-vue-inputs/signature/Signature.js

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 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;