@usssa/component-library 1.0.0-alpha.104 → 1.0.0-alpha.105

package/package.json

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

package/src/components/core/UInputTypeaheadAdvanceSearch.vue

@@ -18,10 +18,14 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['updateInputVal'])
+const emit = defineEmits(['updateInputVal', 'onInputBlur'])
 
 const searchInputRef = ref(null)
 
+const onInputBlur = () => {
+  emit('onInputBlur')
+}
+
 const updateInputVal = (event) => {
   emit('updateInputVal', event)
 }
@@ -41,6 +45,7 @@ const updateInputVal = (event) => {
       :modelValue="searchText"
       ref="searchInputRef"
       spellcheck="false"
+      @blur="onInputBlur"
       @update:modelValue="updateInputVal($event)"
     />
 

package/src/components/core/UMenuSearch.vue

@@ -24,6 +24,9 @@ const props = defineProps({
   actionButtonLoading: {
     type: Boolean,
   },
+  addedBtnIcon: {
+    type: String,
+  },
   // Set default tab
   advancedSearchSelectedTab: {
     type: String,
@@ -31,6 +34,9 @@ const props = defineProps({
   algoliaIndex: {
     type: Object,
   },
+  alreadyAddedIds: {
+    type: Array,
+  },
   // Set context for component for special handling
   // context.action (e.g. addContact)
   // context.data (e.g. array of existing contacts)
@@ -53,7 +59,6 @@ const props = defineProps({
   },
   labelIcon: {
     type: String,
-    default: 'fa-kit-duotone fa-filter-search',
   },
   menuClass: {
     type: String,
@@ -351,19 +356,35 @@ const specialContextHandler = (results) => {
         if (data?.label) {
           result.label = data?.label
         }
+        result.color = data?.color ?? props.disabledButtonColor
       }
     })
 
     if (isAlreadyAddedSearch && isAlreadyAddedSearch.length > 0) {
-      const color = props.disabledButtonColor
       return {
         ...result,
         disable: true,
         btnProps: {
-          color,
+          ...result.btnProps,
+          color: result.btnProps?.color ?? result?.color,
         },
       }
     }
+    if (props.alreadyAddedIds?.length) {
+      if (props.alreadyAddedIds.includes(result.docId || result.id)) {
+        return {
+          ...result,
+          disable: true,
+          label: 'Added',
+          icon: props.addedBtnIcon,
+          btnProps: {
+            ...result.btnProps,
+            color: result.btnProps?.color ?? 'positive',
+            outline: false,
+          },
+        }
+      }
+    }
     return {
       ...result,
     }
@@ -549,11 +570,12 @@ watch(
                     item.disable ||
                     (selectedItem?.id !== item.id && actionButtonLoading)
                   "
+                  :leftIcon="item.icon"
                   :label="item.label ? item.label : actionButtonLabel"
                   :loading="
                     selectedItem?.id === item.id ? actionButtonLoading : false
                   "
-                  outline
+                  :outline="item.btnProps?.outline ?? true"
                   size="sm"
                   @click.stop="onItemActionClick(item)"
                 >
@@ -645,7 +667,12 @@ watch(
             />
           </div>
           <div
-            v-if="showRecentSelected && recentSearches && recentSearches.length"
+            v-if="
+              showRecentSelected &&
+              recentSearches &&
+              recentSearches.length &&
+              !recentSearchesLoading
+            "
           >
             <span class="text-overline-xs"> Recently Selected </span>
 
@@ -690,11 +717,12 @@ watch(
                       item.disable ||
                       (selectedItem?.id !== item.id && actionButtonLoading)
                     "
+                    :leftIcon="item.icon"
                     :label="item.label ? item.label : actionButtonLabel"
                     :loading="
                       selectedItem?.id === item.id ? actionButtonLoading : false
                     "
-                    outline
+                    :outline="item.btnProps?.outline ?? true"
                     size="sm"
                     @click.stop="onItemActionClick(item, true)"
                   >