[Feature]: Prepend all components with Tnt...

[thombruce]

Feature request

As of now, there are several components which are prepended with TNT. These predominantly are form components which were named as such due to conflicts with native HTML elements (plus TntImg because of a similar naming conflict).

This has created a division between Tnt*-prepended components and non-prepended ones.

We call TntCombobox when we want the combobox form element, but just Breadcrumbs when we want breadcrumbs?

It's confusing.

Since we can't overwrite native HTML (much of which is actually consumed by our components, so conflicts and loops aplenty if that would even work), we should prepend all TNT components with Tnt to avoid the confusion.

One exception (technically a case where we'll alias our components): Where possible, TNT Content will still provide un-prepended components. We should look into whether there is a better way to alias component names than what I've been doing (creating components that just reroute to other ones). Quick googling doesn't turn up anything.

Code of Conduct

• I agree to follow this project's Code of Conduct

[thombruce]

Alternative to prepending where necessary for TNT Content is to... come up with synonyms. For instance, VeeValidate does this calling their input implementation Field instead.

[thombruce]

Was making a start on this and came across my handling of the Nuxt Icon module. Presently we're using the defaults: The Icon component is accessible via Icon(name="") or :icon{name=""} in markdown.

Other common components that aren't prepended with Tnt include... Breadcrumbs, PrevNext...

But I think we want to handle Icon first and handle it separately.

The ideal outcome would be that we'd have TntIcon instead of Icon but we'd still be able to use :icon{} in markdown documents. This should be pretty straightforward; we can change the global name of the icon component like so...

export default defineNuxtConfig({
  icon: {
    componentName: 'TntIcon'
  }
})

...and then in a components/content/Icon.vue file, do something like...

TntIcon(v-bind="$props")

Something like that.

---

Alternative to this, and simpler, is to create a components/global/TntIcon.vue component that does the opposite:

Icon(v-bind="$props")

This would maintain the existing functionality while offering a new, namespaced approach so that we can gracefully deprecate the former handling.