@usssa/component-library 1.0.0-alpha.87 → 1.0.0-alpha.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.87",
+  "version": "1.0.0-alpha.89",
   "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'
+import UTooltip from './UTooltip.vue'
 
 const props = defineProps({
   color: {
@@ -39,6 +40,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  showTooltip: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const emit = defineEmits(['onClick'])
@@ -81,16 +86,24 @@ const initials = computed(() => {
 
 <template>
   <q-avatar
+    v-bind="$attrs"
     class="u-avatar"
     :class="`size-${size}`"
     :color="bgColor"
+    :icon="icon"
     :round="round"
     :rounded="!round"
-    :icon="icon"
     @click="handleClick"
-    v-bind="$attrs"
   >
-    <img v-if="image" :src="image" :alt="`avatar ${name}`" :aria-label="name" />
+    <UTooltip
+      v-if="showTooltip"
+      anchor="bottom middle"
+      :description="name"
+      :offset="[4, 4]"
+      self="top middle"
+    >
+    </UTooltip>
+    <img v-if="image" :alt="`avatar ${name}`" :aria-label="name" :src="image"/>
     <span
       v-if="!image"
       class="name"
@@ -100,9 +113,10 @@ const initials = computed(() => {
     </span>
     <UBadgeStd
       v-if="showIndicator"
-      :color="indicatorColor"
       :class="`indicator`"
+      :color="indicatorColor"
       size="xs"
+      tabindex="-1"
       type="indicator"
     />
     <slot name="item" />

package/src/components/core/UAvatarGroup.vue

@@ -23,10 +23,6 @@ const props = defineProps({
     type: String,
     default: 'neutral-4',
   },
-  name: {
-    type: String,
-    required: true,
-  },
   showIndicator: {
     type: Boolean,
     default: false,
@@ -39,6 +35,10 @@ const props = defineProps({
     type: Number,
     default: 4,
   },
+  showEachTooltip: {
+    type: Boolean,
+    default: true
+  }
 })
 
 const emit = defineEmits(['onClick'])
@@ -59,27 +59,28 @@ const remainingAvatars = computed(() => {
   <UAvatar
     v-for="(avatar, index) in displayedAvatars"
     class="avatarGroup"
-    :name="avatar.name"
-    :size="size"
-    :showIndicator="showIndicator"
-    :indicatorColor="indicatorColor"
-    :round="round"
     :image="avatar.image"
+    :indicatorColor="indicatorColor"
     :key="index"
+    :name="avatar.name"
+    :round="round"
+    :showIndicator="showIndicator"
+    :showTooltip="showEachTooltip"
+    :size="size"
+    tabindex="0"
     @click="handleClick"
   />
-
   <q-icon
+    v-if="remainingAvatars.length"
     :class="`avatarGroup additonalUsersAvatar size-${size} fa-duotone fa-solid fa-circle-plus`"
-    color="primary"
     aria-label="See more Avatar"
-    v-if="remainingAvatars.length"
+    color="primary"
   >
     <UTooltip
       anchor="bottom middle"
       description=""
-      self="top middle"
       :offset="[4, 4]"
+      self="top middle"
     >
       <template v-slot:item>
         <div class="text-body-xs tooltip-text">
@@ -97,7 +98,6 @@ const remainingAvatars = computed(() => {
   border-radius:50%
 
 .additonalUsersAvatar
-  cursor: pointer
 
   &.size-sm
     font-size: $ba !important
@@ -113,6 +113,7 @@ const remainingAvatars = computed(() => {
 
 .avatarGroup
   margin: -0.125rem
+
 .avatarGroup:not(:nth-child(1)) .q-avatar__content
     border: 1.5px solid $neutral-1
     background : lightgray 0px -0.033px / 100% 150.273% no-repeat

package/src/components/core/UInputAddressLookup.vue

@@ -348,13 +348,14 @@ watch(modelValue, async (value) => {
       </template>
     </q-input>
   </div>
+  
   <UInputTextStd
     v-if="JSON.stringify(resultItem) !== '{}'"
     v-model="resultItem.street_address"
     :label="label"
     readonly
     rightIcon="fa-kit-duotone fa-circle-xmark"
-    size="sm"
+    :size="size"
     @onRightIconClick="handleClear"
   />
 </template>

package/src/components/core/UTooltip.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, useSlots  } from 'vue'
 
 const props = defineProps({
   icon: {
@@ -24,6 +24,8 @@ const props = defineProps({
   },
 })
 
+const slots = useSlots()
+
 /**
  * checking if string contains only white spaces
  */
@@ -38,16 +40,16 @@ const getTooltipText = computed(() => {
 
 <template>
   <q-tooltip
-    class="u-tooltip shadow-2 bg-dark row"
+    v-if="getTooltipText || slots.item"
     v-bind="$attrs"
+    class="u-tooltip shadow-2 bg-dark row"
     :anchor="anchor"
-    :self="self"
     :offset="offset"
+    :self="self"
     :target="target"
-    v-if="getTooltipText"
   >
     <div class="row no-wrap tooltip-content">
-      <div class="flex items-center" v-if="icon">
+      <div v-if="icon" class="flex items-center">
         <q-icon :class="icon" size="1rem"></q-icon>
       </div>
       <div class="text-body-xs tooltip-text">{{ getTooltipText }}</div>

package/src/components/core/UUploader.vue

@@ -482,7 +482,7 @@ defineExpose({ upload })
   .q-uploader__overlay
     display: none !important
   .progress-bar
-    width: 85% !important
+    width: 84% !important
   .progress-bar-container
       gap: $xs
   .card-section