@usssa/component-library 1.0.0-alpha.27 → 1.0.0-alpha.28

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.27
+# Component Library v1.0.0-alpha.28
 
 This library provides custom UI components for USSSA applications.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.27",
+  "version": "1.0.0-alpha.28",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",

package/src/components/core/UAvatar.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue'
 import UBadgeStd from './UBadgeStd.vue'
+
 const props = defineProps({
   color: {
     type: String,
@@ -59,6 +60,19 @@ const labelSize = computed(() => {
 
   return props.size
 })
+
+const initials = computed(() => {
+  if (props.name) {
+    const parts = props.name.split(' ')
+
+    if (parts.length === 1) return parts[0].substring(0, 2).toUpperCase()
+
+    return `${parts[0].substring(0, 1).toUpperCase()}${parts[1]
+      .substring(0, 1)
+      .toUpperCase()}`
+  }
+  return props?.name
+})
 </script>
 
 <template>
@@ -77,7 +91,7 @@ const labelSize = computed(() => {
       class="name"
       :class="`text-${color} text-caption-${labelSize}`"
     >
-      {{ name }}
+      {{ initials }}
     </span>
     <UBadgeStd
       v-if="showIndicator"