daybrush / guides

A Guides component that can draw ruler and manage guidelines.
https://daybrush.com/guides/
MIT License
339 stars 44 forks source link

Style Property: Vue Warning #14

Open markusnissl opened 4 years ago

markusnissl commented 4 years ago

Environments

Description

Vue does not allow to use style as a property and triggers a warning in the console: [Vue warn]: "style" is a reserved attribute and cannot be used as component prop.

The problem is the 'style' property in PROPERTIES (https://github.com/daybrush/guides/blob/master/src/consts.ts), which Vue does not like.

teleinfo-fed commented 4 years ago

hi, have you solved this problem?

daybrush commented 4 years ago

@markusnissl @teleinfo-fed

I think there are no problems because it is a warning.

markusnissl commented 4 years ago

The warning is produced because it is a conflicting option. Vue uses the style property to allow developers setting style elements on the "included element" conditionally. See https://vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles

I have not used the vue style property or your style property for the guides package. So I am not aware, how the two properties conflict (I even do not know what your style property does, so maybe this option is redundant with vue default behavior). But at least one (either yours or the vue default behavior) should not work. One suggestion, given in other repositories was to rename the style property to styles.

I would really appreciate, if in a future release, you are able to remove the warning.

daybrush commented 4 years ago

@markusnissl guides's new version is released. Try vueStyle props instead of style

markusnissl commented 4 years ago

@daybrush Thanks for adding vueStyle. I think, the style property is still set in this version, since vue is still printing the warning.

I think, that filtering style is required, where you define the properties, so that the 'style' prop is not given as possible property to vue:

@Properties(PROPERTIES as any, (prototype, name) => {
    Prop()(prototype, name);
})