@usssa/component-library 1.0.0-alpha.21 → 1.0.0-alpha.211

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

@@ -0,0 +1,471 @@
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useScreenType } from '../../../composables/useScreenType.js'
+import UBtnIcon from '../UBtnIcon.vue'
+import UBtnStd from '../UBtnStd.vue'
+import UDrawerMenuItem from './UDrawerMenuItem.vue'
+import UTooltip from '../UTooltip.vue'
+
+const emit = defineEmits(['menuItemClicked', 'closeDrawer'])
+const miniState = defineModel('miniState', {
+  default: false,
+  type: Boolean,
+})
+const open = defineModel('open', {
+  default: false,
+  type: Boolean,
+})
+const props = defineProps({
+  brandLogo: {
+    default: '',
+  },
+  brandMiniLogo: {
+    default: '',
+  },
+  breadCrumb: {
+    default: false,
+    type: Boolean,
+  },
+  collapseMenuLabel: {
+    default: 'Collapse Menu',
+    type: String,
+  },
+  dataTestId: {
+    default: 'drawer-std',
+    type: String,
+  },
+  homeLink: {
+    default: '/home',
+    type: String,
+  },
+  menu: {
+    default: () => [],
+    type: Array,
+  },
+  multiLevel: {
+    default: false,
+    type: Boolean,
+  },
+  showFooter: {
+    type: Boolean,
+    default: false,
+  },
+  side: {
+    type: String,
+    default: 'left',
+  },
+  sidebarShrinkIcon: {
+    type: String,
+    default: 'Sidebar shrink icon',
+  },
+  usssaLogo: {
+    type: String,
+    default: 'usssa logo',
+  },
+})
+
+const $router = useRouter()
+const $screen = useScreenType()
+
+const currentPath = computed(() => getCurrentPath())
+const currentRoute = computed(() => $router.currentRoute.value.fullPath)
+
+const animationType = ref('backward')
+const breadcrumbLabels = ref([])
+const menuList = ref([])
+const navigationStack = ref([])
+const showSlots = ref(false)
+
+const checkSlots = (elements) => {
+  elements.forEach((element) => {
+    if (element.children && element.children.length) {
+      checkSlots(element.children) // Recursive call
+    }
+    if (element.slot && element.slot.hasSlot) {
+      showSlots.value = false
+    }
+  })
+}
+
+/**
+ * Adding scroll to drawer content
+ */
+const drawerContentScroll = () => {
+  const footerEle = document.getElementById('drawer-footer')
+  const listEle = document.getElementById('drawer-scrollable-list')
+  if (footerEle && listEle) {
+    listEle.style.marginBottom = `${footerEle.clientHeight + 16}px`
+  }
+}
+
+const getCurrentPath = (int = 1) => {
+  return currentRoute.value.split('/')[int]
+}
+
+const handleBackClick = () => {
+  if (navigationStack.value.length) {
+    const prevList = navigationStack.value.pop()
+    menuList.value = prevList.children
+    animationType.value = 'backward'
+    checkSlots(prevList.children)
+    breadcrumbLabels.value.pop()
+  }
+}
+
+const handleClick = (menu) => {
+  if (props.multiLevel) {
+    if (menu.slot && menu.slot.hasSlot) {
+      showSlots.value = true
+      navigationStack.value.push({
+        label: menu.label,
+        children: menuList.value,
+      })
+      if (breadcrumbLabels.value.indexOf(menu.label) === -1) {
+        breadcrumbLabels.value.push(menu.label)
+      }
+    } else {
+      if (menu.children && menu.children.length) {
+        navigationStack.value.push({
+          label: menu.label,
+          children: menuList.value,
+        })
+        menuList.value = menu.children
+        animationType.value = 'forward'
+        if (breadcrumbLabels.value.indexOf(menu.label) === -1) {
+          breadcrumbLabels.value.push(menu.label)
+        }
+      } else {
+        emit('menuItemClicked', menu)
+      }
+    }
+  } else {
+    emit('menuItemClicked', menu)
+  }
+}
+
+const handleCloseDrawer = () => {
+  emit('closeDrawer')
+}
+
+onMounted(() => {
+  drawerContentScroll()
+})
+
+watch($screen, () => {
+  if ($screen.value.isDesktop) {
+    open.value = true
+  }
+})
+
+// rendering fresh menu after closing the drawer
+watch(
+  open,
+  (newData) => {
+    if (!newData) {
+      navigationStack.value = []
+      showSlots.value = false
+      menuList.value = []
+    } else {
+      menuList.value = props.menu
+    }
+    drawerContentScroll()
+  },
+  { immediate: true }
+)
+</script>
+<template>
+  <q-drawer
+    v-model="open"
+    :class="[
+      'u-drawer',
+      { 'u-mini-drawer': miniState },
+      { 'drawer-desktop': $screen.isDesktop },
+      { 'drawer-open': open },
+      { 'u-nested-drawer': multiLevel },
+    ]"
+    :behavior="$screen.isMobile ? 'default' : 'desktop'"
+    :dataTestId="dataTestId"
+    :mini="miniState"
+    :mini-width="64"
+    :overlay="$screen.isDesktop ? false : true"
+    :show-if-above="$screen.isMobile || $screen.isTablet ? false : true"
+    :side="side"
+    :width="224"
+  >
+    <q-scroll-area class="u-drawer-scrollable-area">
+      <div
+        v-if="$screen.isDesktop"
+        :class="`flex items-center justify-${
+          miniState ? 'center q-py-ba' : 'between q-py-ba q-pl-xs q-pr-xxs'
+        } `"
+      >
+        <UBtnStd
+          class="flex items-center justify-center drawer-logo q-pa-none"
+          flat
+          :ripple="false"
+          size="sm"
+          :to="homeLink"
+        >
+          <q-img
+            v-if="!miniState"
+            class="full-logo"
+            :alt="props.usssaLogo"
+            :aria-label="props.usssaLogo"
+            :src="`${brandLogo}`"
+          />
+          <q-img
+            v-else
+            class="mini-state-logo"
+            :alt="props.usssaLogo"
+            :aria-label="props.usssaLogo"
+            :src="brandMiniLogo"
+          />
+        </UBtnStd>
+        <div
+          v-if="!miniState"
+          class="drawer-open-close-icon-wrapper flex items-center justify-center"
+        >
+          <UBtnIcon
+            v-if="$screen.isDesktop"
+            iconClass="fa-kit-duotone fa-sidebar-shrink"
+            :ariaLabel="props.sidebarShrinkIcon"
+            color="primary"
+            dense
+            ref="btn-icon"
+            size="sm"
+            @click="handleCloseDrawer"
+          />
+          <UTooltip
+            anchor="center right"
+            :description="props.collapseMenuLabel"
+            :offset="[4, 14]"
+            self="center start"
+          />
+        </div>
+      </div>
+
+      <q-list
+        :class="{
+          'drawer-menu-list': true,
+          'drawer-menu-mini-list': miniState,
+          'slots-padding-wrapper': showSlots,
+        }"
+        id="drawer-scrollable-list"
+        padding
+      >
+        <div
+          v-if="multiLevel && navigationStack.length"
+          class="flex justify-start items-center no-wrap drawer-back-action-wrapper"
+        >
+          <UBtnStd
+            class="drawer-back-action q-mr-xs"
+            aria-label="Back"
+            :flat="true"
+            tabindex="0"
+            @click="handleBackClick()"
+          >
+            <q-icon
+              class="fa-kit-duotone fa-circle-arrow-left nested-drawer-back-icon icon-secondary-opacity"
+              aria-label="Back"
+              size="1.5rem"
+              tabindex="-1"
+            />
+          </UBtnStd>
+          <div class="text-heading-xs">
+            {{ !breadCrumb ? 'Back' : breadcrumbLabels.join(' / ') }}
+          </div>
+        </div>
+
+        <template v-for="(m, i) in menuList" :key="m.label">
+          <UDrawerMenuItem
+            v-if="!showSlots"
+            :animation-type="animationType"
+            :current-path="currentPath"
+            :index="i"
+            :menu-item="m"
+            :mini-state="miniState"
+            :multi-level="multiLevel"
+            @child-menu-item-click="handleClick"
+          />
+
+          <q-separator
+            v-if="multiLevel && i < menuList.length - 1 && !showSlots"
+            class="menu-item-separator"
+          />
+
+          <slot
+            v-if="m.slot && m.slot.hasSlot && showSlots"
+            :name="m.slot.slotName"
+          >
+          </slot>
+        </template>
+      </q-list>
+      <div
+        v-if="showFooter && !$screen.isDesktop"
+        :class="{
+          'drawer-footer q-mt-ba q-pb-ba full-width flex justify-center bg-neutral-1': true,
+          'slots-padding-wrapper': showSlots,
+        }"
+        id="drawer-footer"
+      >
+        <slot name="footer"></slot>
+      </div>
+    </q-scroll-area>
+  </q-drawer>
+</template>
+<style lang="sass">
+.mini-state-logo
+  height: $ms
+  width: 2.022rem
+
+.q-drawer:has(.u-drawer)
+  width: 14rem !important
+  padding: 0 $xs
+
+.q-drawer:has(.u-mini-drawer)
+  width: 4rem !important
+
+.u-drawer
+  background: $surface-bg-1
+  .q-scrollarea__content
+    width: 100%
+  .drawer-logo
+    padding: 0px !important
+    min-width: 0px !important
+    &.q-hoverable:hover > .q-focus-helper
+      opacity: 0
+    &:focus-visible
+      outline: auto !important
+      .q-focus-helper
+        display: none
+
+  .q-list--padding
+    padding: 0 !important
+  .drawer-menu-list
+    &:not(.drawer-menu-mini-list)
+      .u-menu-link
+        gap: 0 !important
+        .q-item__section--side
+          margin-right: $xs
+        .q-item__section--main
+          margin-right: $xs
+.u-drawer-scrollable-area
+  height: calc(100% - 0px)
+  margin-top: 0px
+
+.menu-icon-class
+  font-size: 1rem
+
+.menu-icon-wrapper
+  min-width: auto !important
+
+.full-logo
+  width: 5.918rem
+  height: $ms
+
+.drawer-open-close-icon
+  font-size: 1rem
+  color: $primary
+
+.drawer-open-close-icon-wrapper
+  height: $md
+  width: $md
+
+.q-drawer:has(.mobile-menu)
+  padding: 0px $ba !important
+
+  .u-menu-link
+    .q-item
+      margin-bottom: 0
+
+.drawer-menu-mini-list
+  display: grid
+  place-content: center
+  place-items: center
+  padding: 0 $xs
+
+.u-drawer
+  .drawer-menu-list
+    .q-icon
+      color: $primary !important
+
+.mini-menu-box
+  width: 3.5rem
+  gap: 0 !important
+.u-drawer
+  .drawer-menu-list
+    .non-active-right-icon
+      color: $dark !important
+    .drawer-items
+      margin-bottom: $xs!important
+
+.drawer-footer
+  bottom: 0
+  position: fixed
+
+
+.list-icons
+  font-size : $ba !important
+
+.mobile-menu
+  .label
+    font-size: 1rem
+    line-height: 1.5rem
+    letter-spacing: .01786rem
+    font-weight: 400
+@media (max-width: 600px)
+  .q-drawer__backdrop
+    top: 50px
+  .q-drawer:has(.drawer-open)
+    top: 50px
+    width: 100% !important
+  .q-drawer:has(.u-drawer)
+    top: 50px !important
+  .drawer-menu-list
+    margin-top: $ba
+@media (min-width: 1024px)
+  .q-drawer__backdrop
+    top: 0px !important
+  .q-drawer--mini:has(.u-drawer)
+    top: 0px !important
+  .q-drawer:has(.u-drawer)
+    top: 0px !important
+@media ( min-width: 601px ) and (max-width: 1023px)
+  .q-drawer:has(.drawer-open)
+    width: 100% !important
+  .drawer-menu-list
+    margin-top: $ba
+
+.menu-item-separator
+  margin: $xs 0
+
+.drawer-menu-list
+  .drawer-back-action-wrapper
+    .q-btn.drawer-back-action
+      padding: 0px 0px !important
+      min-width: 1.5rem !important
+      min-height: 0px !important
+      height: fit-content !important
+      border-radius: 0px
+      .nested-drawer-back-icon
+        color: $description !important
+
+.drawer-back-action-wrapper
+  margin-bottom: $xs
+  padding: $xs 0
+
+.nested-drawer-inherited-icons
+  div .q-icon.list-icons
+    color: $dark !important
+
+.u-drawer, .u-nested-drawer
+  .q-scrollarea__thumb
+    width: 3px
+
+.u-drawer .q-list--padding.slots-padding-wrapper
+  padding: 0 $xs !important
+
+.u-drawer .drawer-footer.slots-padding-wrapper
+  padding: 0 $xs $ba $xs !important
+</style>

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

@@ -0,0 +1,124 @@
+<script setup>
+import { useScreenType } from '../../../composables/useScreenType.js'
+import UBadgeStd from '../UBadgeStd.vue'
+import UMenuItem from '../UMenuItem.vue'
+import UTooltip from '../UTooltip.vue'
+
+const emit = defineEmits(['childMenuItemClick'])
+
+const animationType = defineModel('animationType', {
+  default: 'backward',
+  type: String,
+})
+const currentPath = defineModel('currentPath', {
+  default: '',
+  type: String,
+})
+const index = defineModel('index', {
+  default: '',
+  type: Number,
+})
+const menuItem = defineModel('menuItem', {
+  default: null,
+  type: Object,
+})
+const miniState = defineModel('miniState', {
+  default: false,
+  type: Boolean,
+})
+const multiLevel = defineModel('multiLevel', {
+  default: false,
+  type: Boolean,
+})
+
+const $screen = useScreenType()
+
+/**
+ * returning x offset for tooltip for long text
+ * @param {*} label
+ */
+const getXOffset = (label) => {
+  let labelLength = label.trim().length
+  return labelLength <= 4 ? 65 : labelLength < 9 ? 85 : 145
+}
+
+const handleMenuClick = (menu) => {
+  emit('childMenuItemClick', menu)
+}
+</script>
+
+<template>
+  <transition
+    appear
+    :enter-active-class="`animated ${
+      animationType === 'backward' ? 'slideInLeft' : 'slideInRight'
+    } delay-0.6s`"
+  >
+    <UMenuItem
+      :class="{
+        'drawer-items': true,
+        'mini-menu-box': miniState,
+        'mobile-menu': !$screen.isDesktop,
+        'nested-drawer-inherited-icons': multiLevel,
+      }"
+      :icon-class="!$screen.isDesktop ? 'list-icons' : ''"
+      :id="`u-drawer-menu-${index}`"
+      :label="menuItem.label"
+      :left-icon="menuItem.leftIcon"
+      :selected="
+        !multiLevel ? currentPath === menuItem.to.replaceAll('/', '') : false
+      "
+      @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'
+          }`"
+          :aria-label="menuItem.badgeInfo"
+          size="1rem"
+          tabindex="-1"
+        />
+        <q-icon
+          v-if="
+            (menuItem.children && menuItem.children.length && multiLevel) ||
+            (menuItem.slot && menuItem.slot.hasSlot && multiLevel)
+          "
+          class="fa-kit fa-chevron-right navigation-right-icon"
+          aria-label="Open menu"
+          size="1.5rem"
+          tabindex="-1"
+        />
+      </template>
+    </UMenuItem>
+  </transition>
+  <UTooltip
+    v-if="miniState"
+    anchor="center right"
+    :description="menuItem.label"
+    :offset="[getXOffset(menuItem.label), 20]"
+    self="center right"
+    :target="`#u-drawer-menu-${index}`"
+  />
+</template>
+
+<style lang="sass">
+.drawer-menu-list .q-icon.navigation-right-icon
+  margin-left: $xs
+  color: $dark !important
+
+.nested-badge-margin
+  margin-right: 0px !important
+</style>