feat: Add option to show kebab-case component names

[Aareksio]

The change replaces classifyComponents setting with new componentNameStyle, allowing for additional styles of component names including kebab-case.Also provides somehow standardized approach to transforming component names for display.

// Instead of:
return this.$shared.classifyComponents ? classify(this.instance.name) : this.instance.name

// We now do:
return getComponentDisplayName(this.instance.name, this.$shared.componentNameStyle)

I had to double check filter-instances, but it seem to work alright, as both the filtered value and component names are passed through classify (expect here, but it's dead code, so I left it untouched).

I am not particularly proud of kebabize function, I tried to keep it close to already existing, similiar functions (classify and camelize), but it turned rather ugly - I'll be glad if you suggest how it could be improved!

One other thing worth mention is that I initially considered using enum instead of a string value for componentNameStyle value, but since there are no enums currently in the project and similar properties (eg. displayDensity) uses strings as well, I dropped the idea.

Motivation

Inspired by #239, the style guide and my strong preferences towards kebab-case in anything HTML-alike.

Currently present "original" option often leaves us with inconsistencies when using 3rd party libraries which use different casing than the one adopted in the project.

Since there are 2 widely accepted casings, we should be able to coerce to either of them.

Afterthoughts

getComponentDisplayName could potentially return Anonymous Component when the name string is empty.

Consider renaming getComponentDisplayName to normalizeComponentName to match the label?

[vue-bot]

Hey @Aareksio, thank you for your time and effort spent on this PR, contributions like yours help make Vue better for everyone. Cheers! 💚