Typing error on Vue 3 with TypeScript

[thomas-fortin]

Hello,

I tried to use the package in my Vue 3 TypeScript (v3.2.45) with Composiiton API project, but an error occurs when I am trying to instanciate a VueDrawableCanvas component.

Here is my code (reduced to the interesting part) :

<script setup lang="ts">
import { ref, reactive, provide } from 'vue';
import VueDrawableCanvas from 'vue-drawable-canvas';
import DrawingToolbar from './DrawingToolbar.vue';

...

const drawableCanvas = ref();
const state = reactive({
  shape: 'pencil',
  mode: 'draw',
  strokeStyle: '#000000',
  lineWidth: undefined,
  backgroundColor: undefined,
});
</script>

<template>
  <div :class="baseClass">
    <DrawingToolbar
      :default-active-shape="state.shape"
      @shape="state.shape = $event"
      @mode="state.mode = $event"
      @stroke-style="state.strokeStyle = $event"
      @line-width="state.lineWidth = $event"
      @background-color="state.backgroundColor = $event"
      @undo="onUndo()"
      @redo="onRedo()"
      @clear="onClear()"
    />
    <VueDrawableCanvas
      ref="drawableCanvas"
      class="canvas"
      :background-image="backgroundImage"
      :shape="state.shape"
      :stroke-style="state.strokeStyle"
      :line-width="state.lineWidth"
      :background-color="state.backgroundColor"
      :mode="state.mode"
      :height="height"
      :width="width"
      @mouseup="onChange"
    />
  </div>
</template>

With this, the components "works" but a TypeScript error is thrown. Here is the error :

Type '{
  ref: string;
  class: string;
  backgroundImage: string | undefined;
  'background-image': string | undefined;
  shape: string;
  strokeStyle: string;
  'stroke-style': string;
  lineWidth: undefined;
  ... 5 more ...;
  width: number;
}' is not assignable to type 'ComponentProps<typeof import("/path/to/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vue-drawable-canvas/dist/types")>'.

Type '{
  ref: string;
  class: string;
  backgroundImage: string | undefined;
  'background-image': string | undefined;
  shape: string;
  strokeStyle: string;
  'stroke-style': string;
  lineWidth: undefined;
  ... 5 more ...;
  width: number;
}' is missing the following properties from type 'typeof import("/path/to/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vue-drawable-canvas/dist/types")': CanvasShape, CanvasMode`

---

Moreover, I have additional errors when I am trying to instanciate the state using the enum in a cleaner way as below (with imports correctly added) :

const state = reactive({
  shape: CanvasShape.Pencil,
  mode: CanvasMode.Draw,
  strokeStyle: '#000000',
  lineWidth: undefined,
  backgroundColor: undefined,
});

Do I badly instanciate the component, or is it an error in the package ?

FYI, when I am taking the given playground code and put it in my component, and just change the import to the node_modules path to make it work (import VueDrawableCanvas from 'vue-drawable-canvas';), I also have the error.