@usssa/component-library 1.0.0-alpha.129 → 1.0.0-alpha.130

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.129
+# Component Library v1.0.0-alpha.130
 
 **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.129",
+  "version": "1.0.0-alpha.130",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",

package/src/components/core/UMenuButtonStd.vue

@@ -35,6 +35,10 @@ const props = defineProps({
     type: Array,
     default: () => [4, 4],
   },
+  outline: {
+    type: Boolean,
+    default: true,
+  },
   selectedCountry: {
     type: Object,
   },
@@ -60,9 +64,6 @@ const props = defineProps({
 const handleClick = () => {
   return emit('onClick')
 }
-const selectCountry = (country) => {
-  emit('update-country', country)
-}
 const toLowerCase = (str) => str.toLowerCase()
 </script>
 
@@ -81,13 +82,14 @@ const toLowerCase = (str) => str.toLowerCase()
   >
     <template #label>
       <q-icon v-if="iconClass" :class="iconClass" size="sm" />
-      <div class="text-body-md q-ml-xs">{{ label }}</div>
+      <div class="text-body-md q-ml-xs label">{{ label }}</div>
     </template>
     <slot name="menu" />
   </q-btn-dropdown>
 
   <!-- 2. Menu button Icon state -->
   <UBtnIcon
+    v-bind="$attrs"
     v-if="states === 'Icon'"
     class="u-mb-icon"
     :anchor="anchor"
@@ -109,13 +111,14 @@ const toLowerCase = (str) => str.toLowerCase()
 
   <!-- 3. Menu button Button state -->
   <UBtnStd
+    v-bind="$attrs"
     v-if="states === 'Button'"
     class="u-mb-btn"
     :color="color"
     :dataTestId="dataTestId"
     :label="label"
     :left-icon="iconClass"
-    outline
+    :outline="outline"
     :size="size"
   >
     <template v-slot:menu>
@@ -127,8 +130,8 @@ const toLowerCase = (str) => str.toLowerCase()
   <q-btn-dropdown
     v-if="states === 'Avatar'"
     :class="`u-mb-avatar size-${size}`"
-    :color="color"
     content-class="u-options-menu"
+    :color="color"
     :dataTestId="dataTestId"
     :menu-offset="menuOffset"
     no-caps
@@ -156,7 +159,7 @@ const toLowerCase = (str) => str.toLowerCase()
           />
         </q-item-section>
         <q-item-section v-if="displayName">
-          <q-item-label class="text-body-md">
+          <q-item-label class="text-body-md text-dark">
             {{ displayName }}
           </q-item-label>
         </q-item-section>
@@ -193,13 +196,15 @@ const toLowerCase = (str) => str.toLowerCase()
 .u-mb-basic
   .q-icon
     font-size: 1.875rem
+  .label
+    text-wrap: wrap
+    overflow-wrap: anywhere
 
 .u-mb-avatar
   padding: 0rem $xs
   align-items: center
   &:hover::before
     background-color: $neutral-3
-  gap: $xs
   .account-drop-down
     padding: 0
     min-height: 0
@@ -225,13 +230,13 @@ const toLowerCase = (str) => str.toLowerCase()
     background-color: $neutral-3
   &.size-sm
     min-height: $md
-    padding: 0 $sm !important
+    padding: $xs $sm !important
   &.size-md
     min-height: $lg
-    padding: 0 $ba !important
+    padding: $xs $ba !important
   &.size-lg
     min-height: $xl
-    padding: 0 $ba !important
+    padding: $xs $ba !important
 
 .u-mb-avatar
   &.size-sm