@progress/kendo-vue-inputs/signature/SignatureCanvas.mjs

TODO

/**
 * @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 n, createVNode as a } from "vue";
import { SignaturePad as o } from "@progress/kendo-inputs-common";
import { getTabIndex as r } from "@progress/kendo-vue-common";
const p = /* @__PURE__ */ n({
  name: "KendoSignatureCanvas",
  emits: {
    change: null,
    draw: null,
    drawend: null
  },
  inject: {
    kendoIntlService: {
      default: null
    }
  },
  props: {
    strokeWidth: Number,
    popupScale: Number,
    scale: Number,
    name: String,
    value: String,
    tabIndex: Number,
    disabled: Boolean,
    readOnly: Boolean,
    color: String,
    backgroundColor: String,
    elementSize: Function,
    smooth: Boolean
  },
  watch: {
    color() {
      this.setOptions();
    },
    backgroundColor() {
      this.setOptions();
    },
    smooth() {
      this.setOptions();
    },
    strokeWidth() {
      this.setOptions();
    },
    readOnly() {
      this.setOptions();
    }
  },
  mounted() {
    this.canvas = this.$el;
    const t = new o(this.canvas, this.getOptions());
    this.value && t.loadImage(this.value), this.instance = t, this.instance.setOptions({
      onChange: this.onValueChange,
      onDraw: this.onDraw,
      onDrawEnd: this.onDrawEnd
    });
  },
  unmounted() {
    this.instance && this.instance.destroy();
  },
  render() {
    return a("div", {
      class: "k-signature-canvas",
      tabindex: r(this.$props.tabIndex, this.$props.disabled),
      role: "img",
      id: this.$props.id,
      "aria-label": this.$props.ariaLabel,
      "aria-labelledby": this.$props.ariaLabelledBy,
      "aria-describedby": this.$props.ariaDescribedBy,
      "aria-disabled": this.$props.disabled ? "true" : void 0
    }, null);
  },
  methods: {
    onValueChange() {
      this.exportImage(this.elementSize()).then((t) => {
        this.$emit("change", t);
      });
    },
    onDraw() {
      this.$emit("draw");
    },
    onDrawEnd() {
      this.$emit("drawend");
    },
    loadImage(t) {
      this.instance.loadImage(t);
    },
    clear() {
      this.instance.clear();
    },
    getOptions() {
      return {
        scale: this.popupScale,
        color: this.color,
        backgroundColor: this.backgroundColor,
        strokeWidth: this.$props.strokeWidth,
        smooth: this.$props.smooth,
        readonly: this.$props.readOnly
      };
    },
    exportImage(t) {
      var e;
      const {
        width: i,
        height: s
      } = t;
      return (e = this.instance) == null ? void 0 : e.exportImage({
        width: i * this.scale,
        height: s * this.scale
      });
    },
    setOptions() {
      this.instance && this.instance.setOptions(this.getOptions());
    }
  }
});
export {
  p as SignatureCanvas
};