Component naming convention

[Sqrcz]

Hey :)

TL;DR:
Standardize components naming and update linting rules to enforce it. This will allow to:

• improve flexibility of implementations
• be more aligned with style guide

Since we're still at the very early stage of development I would like to propose standardization of component names according to few rules from the official Vue's Style Guide:

Essential:

1. Use multi-word component names - this one is very important especially when combined with base components (like button, table) as users can set linters to force kebab-case in SFC templates... which make them fail since the only thing that distinguishes those components was casing.

Strongly Recommended:

2. Single-file component filename casing - same issue as above (Button stops working when converted to kebab-case button which then is just regular HTML element
3. Base component names - same issue... currently this affects: Button, Checkbox, Table, Textarea,
4. Single-instance component names - why this applies only to TheCard component... first of all it shouldn't be prefixed like that as it can be used multiple times, secondly it breaks overall naming pattern as it's the only exception like that
5. Tightly coupled component names - this is something that is already implemented well
6. Order of words in component names - this is also well implemented
7. Component name casing in templates - we should not be forcing only PascalCase when kebab-case is one of the recommended options (and with single word components it is a probem)
8. Component name casing in JS/JSX - same as above
9. Full-word component names - this is also well implemented

Above rules are available as eslint rules... currently we have enabled 'plugin:vue/essential' with explicitly removed 'vue/multi-word-component-names': 'off',

I would recommend changing that at least to "plugin:vue/vue3-strongly-recommended" or in the best scenario to "plugin:vue/vue3-recommended" as it's the strictest and apart from following best practices it will lead to minimal code differenced between contributors.

A lot of the above problems could be solved by adding some arbitrary "package prefix" like most other UI Libraries do:
Button component examples:
Ant Design Vue: <a-buttton>
Ionic Vue: <ion-button>
NaiveUI: <n-button>
Vuetify: <v-btn>

I would suggest adding prefix to all components... something like f- (or fb-/fbv- but the easier the better)

[cogor]

Hey, it's nice idea, I think about this every time I work with the library, but I thought I'd bring it up when all the components are ready.
I'm not sure about the prefix, fb sounds like Facebook.
@zoltanszogyenyi What do you think about it?

[Sqrcz]

Yeah... had the same impression about the fb- one ;)

[zoltanszogyenyi]

Thanks everyone for contributing!

Let's go with fwb :)

[Sqrcz]

Awesome.

I'll prepare PR with all the changes and we can move on from there.

[Sqrcz]

@zoltanszogyenyi @cogor

Here is PR #202 with proposed changes to our linting rules.

Would be great if you could test it and comment (approve? 🙈) to give me 🟢 light to continue on linting and refactoring component names.