@progress/kendo-vue-inputs
Version:
374 lines (373 loc) • 11.1 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 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 C, createVNode as s } from "vue";
import { Button as v } from "@progress/kendo-vue-buttons";
import { validatePackage as S, kendoThemeMaps as l, setRef as a, getRef as n } from "@progress/kendo-vue-common";
import { SignatureDialog as $ } from "./SignatureDialog.mjs";
import { SignatureBottomActions as y } from "./SignatureBottomActions.mjs";
import { SignatureLine as k } from "./SignatureLine.mjs";
import { provideLocalizationService as b } from "@progress/kendo-vue-intl";
import { signatureMaximize as u, messages as p, signatureClear as h } from "../messages/main.mjs";
import { packageMetadata as z } from "../package-metadata.mjs";
import { SignatureCanvas as O } from "./SignatureCanvas.mjs";
import { hasParent as B } from "./utils/main.mjs";
import { hyperlinkOpenIcon as w } from "@progress/kendo-svg-icons";
const D = 250, x = 84, V = 3, I = 2, L = "#000000", E = "#ffffff", N = /* @__PURE__ */ f({
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: V
},
exportScale: {
type: Number,
default: I
},
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() {
S(z);
},
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-${l.sizeMap[this.$props.size] || this.$props.size}`]: this.$props.size,
[`k-input-${this.$props.fillMode}`]: this.$props.fillMode,
[`k-rounded-${l.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 = L;
return !this.$props.color && typeof document != "undefined" && this.$el && (e = getComputedStyle(this.$el).color), this.$props.color || e;
},
computedBgColor() {
let e = E;
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: C(null)
};
},
render() {
const e = b(this), t = !(this.computedOpen || this.isDrawing || !this.$props.maximizable || this.$props.disabled), o = !(!this.computedValue || this.isDrawing || this.$props.readOnly || this.$props.disabled), r = e.toLanguageString(u, p[u]), d = e.toLanguageString(h, p[h]), c = s("div", {
class: "k-signature-actions k-signature-actions-top"
}, [t && s(v, {
class: "k-signature-action k-signature-maximize",
ref: a(this, "maximizeButton"),
icon: "hyperlink-open",
svgIcon: w,
shape: null,
fillMode: "flat",
size: this.$props.size,
onClick: this.onMaximizeClick,
"aria-label": r,
title: r
}, null)]), m = !this.$props.hideLine && s(k, null, null), g = s(y, {
showClear: o,
size: this.size,
onClear: this.onClear,
title: d
}, null);
return s("div", {
dir: this.$props.dir,
class: this.wrapperClass,
onFocus: this.onFocus,
onBlur: this.onBlur
}, [s(O, {
ref: a(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), c, m, g, this.computedOpen && s($, {
ref: a(this, "dialog"),
openWrapperClass: this.openWrapperClass,
popupWidth: this.popupWidth,
popupHeight: this.popupHeight,
showClear: o,
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 = n(this, "canvas"), this.minimizeButton = n(this, "minimizeButton"), this.maximizeButton = n(this, "maximizeButton"), this.dialog = n(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 o;
const {
width: t,
height: i
} = e;
return (o = this.canvas.instance) == null ? void 0 : o.exportImage({
width: t * this.exportScale,
height: i * this.exportScale
});
},
validityGetter() {
const e = this.$props.validationMessage !== void 0, i = !this.computedValue, o = this.$props.valid !== void 0 ? this.$props.valid : !this.required || !i;
return {
customError: e,
valid: o,
valueMissing: i
};
},
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) {
B(e.relatedTarget, this.$el) || (this.focused = !1, this.$emit("blur", {
event: e,
...this.getImperativeHandle()
}));
},
onMaximizeClick: async function(t) {
this.exportImage(this.popupSize()).then((i) => {
this.currentValue = i;
}), 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 || D, t = this.$props.height || this.$el && this.$el.offsetHeight || x;
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;
}
}
});
export {
N as Signature
};