@usssa/component-library 1.0.0-alpha.15 → 1.0.0-alpha.151

package/src/components/core/UDrawer.vue

@@ -0,0 +1,321 @@
+<script setup>
+import { computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import UBadgeStd from './UBadgeStd.vue'
+import UBtnIcon from './UBtnIcon.vue'
+import UBtnStd from './UBtnStd.vue'
+import UMenuItem from './UMenuItem.vue'
+import UTooltip from './UTooltip.vue'
+import { useScreenType } from '../../composables/useScreenType.js'
+
+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: '',
+  },
+  dataTestId: {
+    default: 'drawer-std',
+    type: String,
+  },
+  homeLink: {
+    default: '/home',
+    type: String,
+  },
+  menu: {
+    default: () => [],
+    type: Array,
+  },
+  showFooter: {
+    type: Boolean,
+    default: false,
+  },
+  side: {
+    type: String,
+    default: 'left',
+  },
+})
+
+const $screen = useScreenType()
+const $router = useRouter()
+
+const currentPath = computed(() => getCurrentPath())
+const currentRoute = computed(() => $router.currentRoute.value.fullPath)
+
+const getCurrentPath = (int = 1) => {
+  return currentRoute.value.split('/')[int]
+}
+
+/**
+ * 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 handleClick = (menu) => {
+  emit('menuItemClicked', menu)
+}
+
+const handleCloseDrawer = () => {
+  emit('closeDrawer')
+}
+
+watch($screen, () => {
+  if ($screen.value.isDesktop) {
+    open.value = true
+  }
+})
+</script>
+<template>
+  <q-drawer
+    v-model="open"
+    :class="[
+      'u-drawer',
+      { 'u-mini-drawer': miniState },
+      { 'drawer-desktop': $screen.isDesktop },
+      { 'drawer-open': open },
+    ]"
+    :dataTestId="dataTestId"
+    :behavior="$screen.isMobile ? 'default' : 'desktop'"
+    :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="usssa-logo"
+            aria-label="usssa logo"
+            :src="`${brandLogo}`"
+          />
+          <q-img
+            v-else
+            class="mini-state-logo"
+            alt="usssa-logo"
+            aria-label="usssa logo"
+            :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="Sidebar shrink icon"
+            color="primary"
+            dense
+            ref="btn-icon"
+            size="sm"
+            @click="handleCloseDrawer"
+          />
+          <UTooltip
+            anchor="center right"
+            description="Collapse Menu"
+            :offset="[4, 14]"
+            self="center start"
+          />
+        </div>
+      </div>
+      <q-list
+        :class="`drawer-menu-list ${miniState ? 'drawer-menu-mini-list' : ''}`"
+        padding
+      >
+        <template v-for="(m, i) in menu" :key="i">
+          <UMenuItem
+            :class="`drawer-items ${miniState ? 'mini-menu-box' : ''} ${
+              !$screen.isDesktop ? 'mobile-menu' : ''
+            }`"
+            :icon-class="!$screen.isDesktop ? 'list-icons' : ''"
+            :id="`u-drawer-menu-${i}`"
+            :label="m.label"
+            :left-icon="m.leftIcon"
+            :selected="currentPath === m.to.replaceAll('/', '')"
+            @onClick="handleClick(m)"
+          >
+            <template v-if="!miniState" #trailing_slot>
+              <UBadgeStd v-if="m.badgeInfo" :label="m.badgeInfo" size="lg" />
+              <q-icon
+                v-if="m.rightIcon"
+                :class="`${m.rightIcon} ${
+                  currentPath === m.to.replaceAll('/', '')
+                    ? ''
+                    : 'non-active-right-icon'
+                }`"
+                :aria-label="m.badgeInfo"
+                size="1rem"
+              />
+            </template>
+          </UMenuItem>
+          <UTooltip
+            v-if="miniState"
+            anchor="center right"
+            :description="m.label"
+            :offset="[getXOffset(m.label), 20]"
+            self="center right"
+            :target="`#u-drawer-menu-${i}`"
+          />
+        </template>
+      </q-list>
+      <div
+        v-if="showFooter && !$screen.isDesktop"
+        class="drawer-footer q-mt-xs q-pb-ba full-width flex justify-center bg-neutral-1"
+      >
+        <slot name="footer" />
+      </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 : 1.5rem !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
+</style>

package/src/components/core/UInnerLoader.vue

@@ -0,0 +1,69 @@
+<script setup>
+defineProps({
+  dataTestId: {
+    type: String,
+    default: 'inner-loader',
+  },
+  image: {
+    type: String,
+    required: true,
+  },
+  imageHeight: {
+    type: String,
+    default: '24'
+  },
+  imageWidth: {
+    type: String,
+    default: '95'
+  },
+  loading: {
+    type: Boolean,
+    required: true,
+  },
+  loadingMessage: {
+    type: String,
+    required: true,
+  },
+  spinnerColor: {
+    type: String,
+    required: false,
+  },
+  spinnerSize: {
+    type: String,
+    requried: false,
+    default: '2rem',
+  },
+})
+</script>
+<template>
+  <q-inner-loading
+    v-bind="$attrs"
+    color="primary"
+    :dataTestId="dataTestId"
+    :showing="loading"
+  >
+    <div class="column items-center q-gutter-y-sm">
+      <img
+        class="q-my-none"
+        alt="Loader Image"
+        :height="imageHeight"
+        :src="image"
+        :width="imageWidth"
+      />
+      <div class="row items-center">
+        <div v-if="loadingMessage" class="text-center">
+          <span class="message q-mr-sm">{{ loadingMessage }}</span>
+          <q-spinner-facebook :color="spinnerColor" :size="spinnerSize" />
+        </div>
+      </div>
+    </div>
+  </q-inner-loading>
+</template>
+<style scoped lang="sass">
+.u-loader
+  position: relative
+  height: 100%
+.message
+  color: $dark
+  font-weight: 500
+</style>