Comments (17)
Updated version compatible with Vue3 and Volar
/* eslint-disable @typescript-eslint/no-explicit-any */
declare module 'vue-signature-pad' {
import {
ComponentPublicInstance,
ComponentOptions,
ComputedOptions,
Plugin,
MethodOptions,
} from 'vue';
type ComponentConstructor<
Component extends ComponentPublicInstance<
Props,
RawBindings,
D,
C,
M
> = ComponentPublicInstance<any>,
Props = any,
RawBindings = any,
D = any,
C extends ComputedOptions = ComputedOptions,
M extends MethodOptions = MethodOptions
> = { new (): Component } & ComponentOptions<Props, RawBindings, D, C, M>;
export interface VueSignaturePadProps {
width?: string;
height?: string;
saveType?: string;
options?: Record<string, any>;
images?: [];
customStyle?: CSSStyleDeclaration;
}
export interface VueSignaturePad
extends ComponentPublicInstance<VueSignaturePadProps> {
saveSignature():
| { isEmpty: true; data: undefined }
| { isEmpty: false; data: string };
undoSignature(): void;
clearSignature(): void;
// eslint-disable-next-line @typescript-eslint/ban-types
mergeImagesAndSignature(signature: object | string): void;
addImages(images: []): void;
lockSignaturePad(): void;
openSignaturePad(): void;
getPropImagesAndCacheImages(): void;
clearCacheImages(): void;
fromDataURL(data: string): void;
isEmpty(): boolean;
toData(): string;
}
export const VueSignaturePad: ComponentConstructor<VueSignaturePad>;
const plugin: Plugin;
export default plugin;
}
from vue-signature-pad.
PR is welcome!
from vue-signature-pad.
I copied over and enhanced issue #61 typings (sharing code as image is pretty evil...)
Can definitely be improved further.
declare module 'vue-signature-pad' {
import { default as _Vue } from 'vue';
export interface VueSignaturePad extends _Vue {
width: string;
height: string;
saveType: string;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
options: Record<string, any>;
images: [];
customStyle: CSSStyleDeclaration;
saveSignature():
| { isEmpty: true; data: undefined }
| { isEmpty: false; data: string };
undoSignature(): void;
clearSignature(): void;
// eslint-disable-next-line @typescript-eslint/ban-types
mergeImagesAndSignature(signature: object | string): void;
addImages(images: []): void;
lockSignaturePad(): void;
openSignaturePad(): void;
getPropImagesAndCacheImages(): void;
clearCacheImages(): void;
fromDataURL(data: string): void;
isEmpty(): boolean;
toData(): string;
}
export function VueSignaturePad(Vue: typeof _Vue): void;
export default VueSignaturePad;
}
Suggested usage (with Composition API) to leverage TS discriminated unions on the signature object:
const signatureStepPadRef = ref() as Ref<VueSignaturePad>;
const methodCalledToReadSignature = () => {
const signature = signatureStepPadRef.value.saveSignature();
if (!signature.isEmpty) {
console.log(signature.data);
}
}
from vue-signature-pad.
Thanks a lot for this update !
I tried to import the module including the ".d.ts" file, but I got the following error :
143:5 Argument of type '{ components: { TopToolbar: typeof TopToolbar; VueSignaturePad: (Vue: VueConstructor<Vue>) => void; }; }' is not assignable to parameter of type 'VueClass<Vue>'.
Object literal may only specify known properties, but 'components' does not exist in type 'VueClass<Vue>'. Did you mean to write 'component'?
141 |
142 | @Component({
> 143 | components: {
| ^
144 | TopToolbar,
145 | VueSignaturePad,
146 | }
Any idea where it could come from ?
from vue-signature-pad.
I don't use Class API, sorry
from vue-signature-pad.
I copied over and enhanced issue #61 typings (sharing code as image is pretty evil...)
Can definitely be improved further.
declare module 'vue-signature-pad' { import { default as _Vue } from 'vue'; export interface VueSignaturePad extends _Vue { width: string; height: string; saveType: string; // eslint-disable-next-line @typescript-eslint/no-explicit-any options: Record<string, any>; images: []; customStyle: CSSStyleDeclaration; saveSignature(): | { isEmpty: true; data: undefined } | { isEmpty: false; data: string }; undoSignature(): void; clearSignature(): void; // eslint-disable-next-line @typescript-eslint/ban-types mergeImagesAndSignature(signature: object | string): void; addImages(images: []): void; lockSignaturePad(): void; openSignaturePad(): void; getPropImagesAndCacheImages(): void; clearCacheImages(): void; fromDataURL(data: string): void; isEmpty(): boolean; toData(): string; } export function VueSignaturePad(Vue: typeof _Vue): void; export default VueSignaturePad; }Suggested usage (with Composition API) to leverage TS discriminated unions on the signature object:
const signatureStepPadRef = ref() as Ref<VueSignaturePad>; const methodCalledToReadSignature = () => { const signature = signatureStepPadRef.value.saveSignature(); if (!signature.isEmpty) { console.log(signature.data); } }
It doesn't work with Nuxt unfortunately. Got error Invalid module name in augmentation. Module 'vue-signature-pad' resolves to an untyped module at 'D:/myproject/nuxt-ts/node_modules/vue-signature-pad/dist/vue-signature-pad.ssr.js', which cannot be augmented.ts(2665)
in index.d.ts
from vue-signature-pad.
I don't think Nuxt has something to do with it, it's a problem in TS realm. No idea why you get that tho.
It may happen if you are doing something else in that file apart declaring this module typings
from vue-signature-pad.
I don't think Nuxt has something to do with it, it's a problem in TS realm. No idea why you get that tho.
It may happen if you are doing something else in that file apart declaring this module typings
@IlCallo This is inside in my index.d.ts
file. Idk much about TS anymore.
import { accessorType } from '~/store'
import { default as _Vue } from 'vue'
declare module 'vue/types/vue' {
interface Vue {
$accessor: typeof accessorType
}
}
declare module '@nuxt/types' {
interface NuxtAppOptions {
$accessor: typeof accessorType
}
}
declare module 'vue-signature-pad' {
export interface VueSignaturePad extends _Vue {
width: string;
height: string;
saveType: string;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
options: Record<string, any>;
images: [];
customStyle: CSSStyleDeclaration;
saveSignature():
| { isEmpty: true; data: undefined }
| { isEmpty: false; data: string };
undoSignature(): void;
clearSignature(): void;
// eslint-disable-next-line @typescript-eslint/ban-types
mergeImagesAndSignature(signature: object | string): void;
addImages(images: []): void;
lockSignaturePad(): void;
openSignaturePad(): void;
getPropImagesAndCacheImages(): void;
clearCacheImages(): void;
fromDataURL(data: string): void;
isEmpty(): boolean;
toData(): string;
}
export function VueSignaturePad(Vue: typeof _Vue): void;
export default VueSignaturePad;
}
Is there something wrong with it?
from vue-signature-pad.
Well, the temporary solution for now is to make it as any. Like this
const { isEmpty, data } = (this.$refs.signaturePad as any).saveSignature()
This is the way I could think of so far.
from vue-signature-pad.
You should move your imports INTO the declare module
stuff, or the ambient declaration just won't have effect, as even a single top level import
or export
makes that file an ES module to TS and treated as such
from vue-signature-pad.
You should move your imports INTO the
declare module
stuff, or the ambient declaration just won't have effect, as even a single top levelimport
orexport
makes that file an ES module to TS and treated as such
Well, tried that but got this error
If I import vue/types/vue
, it would throw an error like this
I tried to make a two file, first is index.d.ts
then vue-shim.d.ts
then types.d.ts
and so on. No luck so far. That's why I put that on top I thought it would make a difference, but none also. Probably I would make a new project, see if my project is broken or something.
from vue-signature-pad.
Remember to restart VSCode between each rename of the files, as sometimes it get out of sync
from vue-signature-pad.
Remember to restart VSCode between each rename of the files, as sometimes it get out of sync
I even restart my pc because the past overwhelm-headache-kindof issue I have with vscode, so when someone told me to restart IDE, I restart my pc instead hehe
from vue-signature-pad.
By the way, in Nuxt, I should put it in index.d.ts
on the root project, right? not in plugins folder, isn't?
from vue-signature-pad.
Honestly dunno, never used Nuxt 😅
from vue-signature-pad.
By the way, in Nuxt, I should put it in
index.d.ts
on the root project, right? not in plugins folder, isn't?
A little late but it cost me the past half hour to figure this out, so hopefully this helps someone with "nuxt": "^2.15.3"
:
- Create plugin
vue-signature-pad
in plugins folder with this content:
import Vue from 'vue'
import VueSignaturePad from 'vue-signature-pad'
Vue.use(VueSignaturePad)
- add module declaration to
decs.d.ts
in root folder using the code created by @fahmiegerton - add plugin to nuxt.config.js
plugins: ['~/plugins/vue-signature-pad'],
from vue-signature-pad.
If you are using Nuxt 3, the plugin step is replaced with:
import VueSignaturePad from 'vue-signature-pad'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueSignaturePad);
})
By the way, in Nuxt, I should put it in
index.d.ts
on the root project, right? not in plugins folder, isn't?A little late but it cost me the past half hour to figure this out, so hopefully this helps someone with
"nuxt": "^2.15.3"
:
- Create plugin
vue-signature-pad
in plugins folder with this content:import Vue from 'vue' import VueSignaturePad from 'vue-signature-pad' Vue.use(VueSignaturePad)
- add module declaration to
decs.d.ts
in root folder using the code created by @fahmiegerton- add plugin to nuxt.config.js
plugins: ['~/plugins/vue-signature-pad'],
from vue-signature-pad.
Related Issues (20)
- Signature not set properly when the browser windows size is reduced from 100%, like 90, 80, 70%... HOT 1
- Add signature from base64 /blob in vue-signature-pad HOT 1
- Redo feature not present .
- Typescript Support / Vue 3 composition API HOT 1
- When undoSignature many times, the penColor will back to Initial value.
- Saving signature as jpeg always returns entirely black image HOT 1
- Not working on touch laptop screen
- Make the pad view only. HOT 1
- DOMException: The operation is insecure.
- vue3 使用vue-signature-pad HOT 1
- vue-signature-pad
- vue.global.js:1855 Uncaught TypeError: t.component is not a function (Vue3, via unpkg.com)
- Nuxt3 - doesn't work unless you resize your screen HOT 4
- Detect when user end making signature HOT 1
- Unresponsive based on Browsers' Window Size in Vue2 HOT 1
- 小米浏览器在绘制时会触发返回手势
- Issues with the pen color in Vue 3
- 使用fromDataUrl添加一个图片后,在使用canvas.toBlob保存,存在跨域问题
- 使用base64保存保存后调用fromDataURL 回显 图像会逐渐失真
- signature_pad HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-signature-pad.