@usssa/component-library 1.0.0-alpha.49 → 1.0.0-alpha.50

package/package.json

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

package/src/components/core/UDrawer.vue

@@ -22,9 +22,7 @@ const props = defineProps({
     type: String,
   },
 })
-const $router = useRouter()
-const currentRoute = computed(() => $router.currentRoute.value.fullPath)
-
+const emit = defineEmits(['menuItemClicked', 'closeDrawer'])
 const open = defineModel('open', {
   default: false,
   type: Boolean,
@@ -34,14 +32,14 @@ const miniState = defineModel('miniState', {
   type: Boolean,
 })
 
+const $router = useRouter()
+const currentRoute = computed(() => $router.currentRoute.value.fullPath)
+const currentPath = computed(() => getCurrentPath())
+
 const getCurrentPath = (int = 1) => {
   return currentRoute.value.split('/')[int]
 }
 
-const currentPath = computed(() => getCurrentPath())
-
-const emit = defineEmits(['menuItemClicked', 'closeDrawer'])
-
 const handleClick = (menu) => {
   emit('menuItemClicked', menu)
 }
@@ -62,13 +60,13 @@ const getXOffset = (label) => {
 <template>
   <q-drawer
     v-model="open"
-    show-if-above
+    :class="`u-drawer ${miniState ? 'u-mini-drawer' : ''}`"
+    :breakpoint="400"
     :mini="miniState"
-    :width="224"
     :mini-width="64"
-    :breakpoint="400"
-    :class="`u-drawer ${miniState ? 'u-mini-drawer' : ''}`"
     side="left"
+    show-if-above
+    :width="224"
   >
     <q-scroll-area class="u-drawer-scrollable-area">
       <div
@@ -82,17 +80,17 @@ const getXOffset = (label) => {
         >
           <img
             v-if="!miniState"
-            :src="`${brandLogo}`"
+            class="full-logo"
             alt="usssa-logo"
             aria-label="usssa logo"
-            class="full-logo"
+            :src="`${brandLogo}`"
           />
           <img
             v-else
-            :src="brandMiniLogo"
+            class="mini-state-logo"
             alt="usssa-logo"
             aria-label="usssa logo"
-            class="mini-state-logo"
+            :src="brandMiniLogo"
           />
         </NuxtLink>
         <div
@@ -100,13 +98,13 @@ const getXOffset = (label) => {
           class="drawer-open-close-icon-wrapper flex items-center justify-center"
         >
           <UBtnIcon
-            ref="btn-icon"
-            size="sm"
             ariaLabel="Sidebar shrink icon"
             color="primary"
+            dense
             iconClass="fa-kit-duotone fa-sidebar-shrink"
+            ref="btn-icon"
+            size="sm"
             @click="handleCloseDrawer"
-            dense
           />
         </div>
       </div>
@@ -116,12 +114,12 @@ const getXOffset = (label) => {
       >
         <template v-for="(m, i) in menu" :key="i">
           <UMenuItem
+            :class="`drawer-items ${miniState ? 'mini-menu-box' : ''}`"
+            :id="`u-drawer-menu-${i}`"
             :label="m.label"
             :left-icon="m.leftIcon"
-            @onClick="handleClick(m)"
-            :id="`u-drawer-menu-${i}`"
             :selected="currentPath === m.to.replaceAll('/', '')"
-            :class="`q-pb-xs ${miniState ? 'mini-menu-box' : ''}`"
+            @onClick="handleClick(m)"
           >
             <template v-if="!miniState" #trailing_slot>
               <UBadgeStd v-if="m.badgeInfo" size="lg" :label="m.badgeInfo" />
@@ -212,4 +210,6 @@ const getXOffset = (label) => {
   .drawer-menu-list
     .non-active-right-icon
       color: $dark !important
+    .drawer-items
+      margin-bottom: $xs!important
 </style>

package/src/components/core/UMenuDropdown.vue

@@ -42,7 +42,6 @@ const props = defineProps({
         <template #leading_slot>
           <slot name="leading_slot"></slot>
         </template>
-
         <template #trailing_slot>
           <slot name="trailing_slot"></slot>
         </template>
@@ -53,21 +52,24 @@ const props = defineProps({
 
 <style lang="sass">
 .u-menu-dropdown
-   width: 11.5rem
-   padding: $xxs
-   flex-direction: column
-   align-items: flex-start
-   gap: q-my-xxs
-   flex-shrink: 0
-   border-radius: $xs
-   background: $neutral-1
-   box-shadow: 0px 0px 4px 0px rgba(16, 17, 20, 0.08)
-   &.size-sm
+  width: 11.5rem
+  padding: $xxs
+  flex-direction: column
+  align-items: flex-start
+  gap: q-my-xxs
+  flex-shrink: 0
+  border-radius: $xs
+  background: $neutral-1
+  box-shadow: 0px 0px 4px 0px rgba(16, 17, 20, 0.08)
+  &.size-sm
     min-width: 11.5rem
     max-width: 11.5rem
-   &.size-md
+  &.size-md
     min-width: 11.75rem
     max-width: 15rem
-   &.size-lg
-    width: 18rem
+  &.size-lg
+      width: 18rem
+  .u-menu-link
+    &.q-item:last-child
+      margin-bottom: 0px
 </style>

package/src/components/core/UMenuItem.vue

@@ -32,21 +32,11 @@ const props = defineProps({
   },
 })
 
-const type = ref(props.destructive ? 'destructive' : 'default')
-
-watch(
-  () => props.destructive,
-  (newValue) => {
-    type.value = newValue ? 'destructive' : 'default'
-  }
-)
-
 const emit = defineEmits(['onClick'])
 
-const handleClick = () => {
-  return emit('onClick')
-}
+const type = ref(props.destructive ? 'destructive' : 'default')
 
+/* Computed variables */
 const labelColor = computed(() => {
   if (props.destructive) {
     return 'text-red-6'
@@ -55,7 +45,6 @@ const labelColor = computed(() => {
   }
   return 'text-dark'
 })
-
 const iconColor = computed(() => {
   if (props.destructive) {
     return 'red-6'
@@ -64,53 +53,58 @@ const iconColor = computed(() => {
   }
   return 'dark'
 })
-
 const backgroundColor = computed(() => {
   if (props.selected && !props.destructive) {
     return 'bg-blue-1'
   }
   return 'bg-neutral-1'
 })
-</script>
-
-<template>
-  <div v-if="!hide" class="u-menu-link">
-    <q-item
-      :class="`${backgroundColor} item-${type} u-menu-link q-mb-xxs`"
-      clickable
-      role="button"
-      tabindex="0"
-      :aria-label="label"
-      :disable="disable"
-      @click="handleClick"
-    >
-      <q-item-section side v-if="leftIcon">
-        <q-icon
-          :color="iconColor"
-          :class="`${leftIcon} ${iconClass}`"
-          size="1rem"
-          :aria-hidden="true"
-        />
-      </q-item-section>
-
-      <slot name="leading_slot"></slot>
 
-      <q-item-section class="text-body-sm label" :class="labelColor">
-        {{ label }}
-      </q-item-section>
+const handleClick = () => {
+  return emit('onClick')
+}
 
-      <q-item-section side v-if="rightIcon">
-        <q-icon
-          :color="iconColor"
-          :class="`${rightIcon} ${iconClass}`"
-          size="1rem"
-          :aria-hidden="true"
-        />
-      </q-item-section>
+watch(
+  () => props.destructive,
+  (newValue) => {
+    type.value = newValue ? 'destructive' : 'default'
+  }
+)
+</script>
 
-      <slot name="trailing_slot"></slot>
-    </q-item>
-  </div>
+<template>
+  <q-item
+    v-if="!hide"
+    :class="`${backgroundColor} item-${type} u-menu-link q-mb-xxs`"
+    :aria-label="label"
+    clickable
+    :disable="disable"
+    role="button"
+    tabindex="0"
+    @click="handleClick"
+  >
+    <q-item-section v-if="leftIcon" side>
+      <q-icon
+        :class="`${leftIcon} ${iconClass}`"
+        :aria-hidden="true"
+        :color="iconColor"
+        size="1rem"
+      />
+    </q-item-section>
+    <slot name="leading_slot"></slot>
+    <q-item-section class="text-body-sm label" :class="labelColor">
+      {{ label }}
+    </q-item-section>
+    <q-item-section v-if="rightIcon" side>
+      <q-icon
+        :class="`${rightIcon} ${iconClass}`"
+        :color="iconColor"
+        size="1rem"
+        :aria-hidden="true"
+      />
+    </q-item-section>
+    <slot name="trailing_slot"></slot>
+  </q-item>
 </template>
 
 <style lang="sass">