@usssa/component-library 1.0.0-alpha.265 → 1.0.0-alpha.267

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.262
+# Component Library v1.0.0-alpha.267
 
 **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.265",
+  "version": "1.0.0-alpha.267",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Engineering Team <engineering@usssa.com>",

package/src/components/core/UDrawer/UDrawer.vue

@@ -340,6 +340,12 @@ watch(
       .q-focus-helper
         display: none
 
+  .u-menu-link
+    .q-badge
+      position: absolute
+      right: 0
+      margin-right: $xs
+
   .q-list--padding
     padding: 0 !important
   .drawer-menu-list

package/src/components/core/UDrawer/UDrawerMenuItem.vue

@@ -71,22 +71,13 @@ const handleMenuClick = (menu) => {
       @on-click="handleMenuClick(menuItem)"
     >
       <template v-if="!miniState" #trailing_slot>
-        <UBadgeStd
-          v-if="menuItem.badgeInfo"
-          :class="{
-            'nested-badge-margin': multiLevel,
-          }"
-          :label="menuItem.badgeInfo"
-          size="lg"
-          tabindex="-1"
-        />
         <q-icon
           v-if="menuItem.rightIcon && !multiLevel"
           :class="`${menuItem.rightIcon} ${
             currentPath === menuItem.to.replaceAll('/', '')
               ? ''
               : 'non-active-right-icon'
-          }`"
+          } q-ml-xs`"
           :aria-label="menuItem.badgeInfo"
           size="1rem"
           tabindex="-1"
@@ -101,6 +92,19 @@ const handleMenuClick = (menu) => {
           size="1.5rem"
           tabindex="-1"
         />
+        <UBadgeStd
+          v-if="menuItem.badgeInfo"
+          :class="{
+            'badge-with-navigation-icon':
+              (menuItem.children && menuItem.children.length && multiLevel) ||
+              (menuItem.slot && menuItem.slot.hasSlot && multiLevel),
+          }"
+          class="default-badge-position"
+          :color="menuItem.badgeStyle?.color ?? 'primary'"
+          :label="menuItem.badgeInfo"
+          :size="menuItem.badgeStyle?.size ?? 'lg'"
+          tabindex="-1"
+        />
       </template>
     </UMenuItem>
   </transition>
@@ -118,7 +122,9 @@ const handleMenuClick = (menu) => {
 .drawer-menu-list .q-icon.navigation-right-icon
   margin-left: $xs
   color: $dark !important
+  position: absolute
+  right: 0
 
-.nested-badge-margin
-  margin-right: 0px !important
+.badge-with-navigation-icon
+  margin-right: $ms !important
 </style>

package/src/components/core/UEventCard.vue

@@ -185,7 +185,7 @@ const viewClick = () => {
               :description="props.eventAgeGroup"
             />
           </span>
-          |
+          <span v-if="props.eventAgeGroup && props.eventLocation">|</span>
           <span v-if="props.eventLocation" class="q-px-xxs">
             {{ eventLocation.text }}
             <UTooltip
@@ -193,7 +193,13 @@ const viewClick = () => {
               :description="props.eventLocation"
             />
           </span>
-          |
+          <span
+            v-if="
+              (props.eventAgeGroup || props.eventLocation) && props.eventHost
+            "
+          >
+            |
+          </span>
           <span v-if="props.eventHost" class="q-ml-xxs">
             {{ eventHost.text }}
             <UTooltip
@@ -310,14 +316,14 @@ const viewClick = () => {
     </div>
 
     <div class="event-item-mobile text-body-md text-description q-mt-ba">
-      <span v-if="props.eventAgeGroup" class="q-ml-xxs">
+      <span v-if="props.eventAgeGroup" class="q-mx-xxs">
         {{ eventAgeGroup.text }}
         <UTooltip
           v-if="eventAgeGroup.isTrimmed"
           :description="props.eventAgeGroup"
         />
       </span>
-      |
+      <span v-if="props.eventAgeGroup && props.eventLocation">|</span>
       <span v-if="props.eventLocation" class="q-px-xxs">
         {{ eventLocation.text }}
         <UTooltip
@@ -325,7 +331,10 @@ const viewClick = () => {
           :description="props.eventLocation"
         />
       </span>
-      |
+      <span
+        v-if="(props.eventAgeGroup || props.eventLocation) && props.eventHost"
+        >|</span
+      >
       <span v-if="props.eventHost" class="q-ml-xxs">
         {{ eventHost.text }}
         <UTooltip v-if="eventHost.isTrimmed" :description="props.eventHost" />

package/src/components/core/UMultiSelectStd.vue

@@ -479,10 +479,7 @@ watch(selectedTab, () => {
             <q-item-label class="text-body-sm">
               {{ scope.opt.label }}
             </q-item-label>
-            <q-item-label
-              v-if="scope.opt.description"
-              caption
-            >
+            <q-item-label v-if="scope.opt.description" caption>
               {{ scope.opt.description }}
             </q-item-label>
           </div>
@@ -624,6 +621,7 @@ watch(selectedTab, () => {
     min-height: $md
     align-items: center
     padding: 0px
+    gap: $xxs
 
   &.q-field--outlined .q-field__control
     border-radius: $xs