[6.x] Upgrade Vue Avatar component and Blade usage

[martyf]

The new Avatar in the top right of the CP looks great - but is only in Blade.

This PR updates the existing Vue Avatar component with:

• Composition API
• cva and twMerge for clean styles and 'types' (i.e. Avatar or Initials)
• adds custom class support to the Vue component (exists in the Blade one)

This also revises the User Listing to better use the new styles.

Given how seamlessly Vue components can work from a Blade view, I've (maybe questionably?) removed the Blade component as with this PR, it no longer is being used.

Ideally, exposing this Vue Avatar to the UI library (see Idea 1360) would be awesome to allow addon devs to take advantage of a centralised appearance for Avatars... but not 100% sure how to approach that with the new setup.

[jasonvarga]

We'll get this cleaned up and moved into the UI library. Good one to have I think. 👍 Thanks!

[martyf]

I also noticed where the avatar component is being included is lowercase - where as all of the others ones are Title case now - but didn't want to confuse that import statement with some in one case and others in another: but might be the focus for a larger refactor to align how things work.

So in the user listing, it's still avatar where as I'm not sure if it's better to have Avatar. Looking at the components, I'm currently using Select and Checkbox so maybe it is. But a larger discussion point than just this particular PR.

[jasonvarga]

When you import the component, the convention is uppercase.
When you're using the globally registered version (e.g in blade), you'd use lowercase.

[jackmcdade]

Would it be nicer to support passing the ID or email in addition to (or instead of) the whole user object?

<avatar :user='{{ $user->id }}' />
<avatar :user='{{ $user->email }}' />
<avatar :user='@json($user)' />

<avatar :id="user.id" />
<avatar :email="user.email" />
<avatar :user />

[martyf]

That’s not a silly idea: but more of a case of needs to be either the user object, or the name.

This would mean it could be used for use cases with non-Statamic users with greater ease as it has more intelligence.

Perhaps name (required, if no user provided) and image (optional) make more sense?

if these props are provided, what is the order of priority? user first, but can be overridden by name and image, or does user take priority instead?

What value would ID or email have? The component could look up the user object: but not sure if that’s really needed or warranted.

[jasonvarga]

Alrighty, cleaned this up.

You can use it globally with ui-avatar, or as import { Avatar } from '@statamic/cms/ui';

It accepts a user prop, which should be the json version of a Statamic user. It doesn't have to be the whole user though. You can provide an object with just an avatar string if you want. Leaving off initials will generate initials from the name.

<ui-avatar :user="{
  name: 'John Doe',
  initials: 'JD',
  avatar: '/avatar.png'
}" />

We can always add the other props (email, id, etc) in the future.