search

konvajs / vue-konva

Vue & Canvas - JavaScript library for drawing complex canvas graphics using Vue.
https://konvajs.github.io/docs/vue/
MIT License
1.16k stars 130 forks source link

Support for hyphenated props #196

Closed chojnicki closed 1 month ago

chojnicki commented 2 years ago

In Vue it's common practice to use hyphenated props instead camelCased. It's also listed in eslint vue rules. https://eslint.vuejs.org/rules/attribute-hyphenation.html

But this will not work with vue-konva. If I'm using :stroke-width="1" it's ignored. I'm forced to use :strokeWidth="1" instead, which is not how I'm using props in whole project and which gives me eslint errors:

Attribute ':strokeWidth' must be hyphenated.eslint[vue/attribute-hyphenation](https://eslint.vuejs.org/rules/attribute-hyphenation.html)

My only option is to ignore eslint or pass all options as single param.

I did not looked into source, but my guess is that this library just copies all passed attributes to object and then passes to standard Konva, without defining real props in component. But I think simple conversion from hypenated props to camelCased could be possible ;)

lavrton commented 2 years ago

Well, as I remember, vue-konva doesn't support :strokeWidth="1" at all. You have to pass all options via config attribute.

But it will be nice to support separate props and hyphenated variants. I can't resolve that now, but I am happy to review/merge any related Pull Requests.

chojnicki commented 2 years ago

Well, as I remember, vue-konva doesn't support :strokeWidth="1" at all.

It does :)

Thanks for reply. I could make pull request at some point, but for now I moved to implementation with plain Konva in Vue, since it's more flexible, and I'm happy with that :)