@usssa/component-library 1.0.0-alpha.122 → 1.0.0-alpha.124

package/README.md

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

package/src/components/core/UBtnIcon.vue

@@ -1,11 +1,12 @@
 <script setup>
 import { computed } from 'vue'
 import UTooltip from './UTooltip.vue'
+
+const emit = defineEmits(['onClick'])
 const props = defineProps({
-  iconClass: {
+  anchor: {
     type: String,
-    required: true,
-    default: 'fa-kit-duotone fa-circle-bolt',
+    default: 'center left',
   },
   ariaLabel: {
     type: String,
@@ -15,10 +16,27 @@ const props = defineProps({
     type: String,
     default: 'primary',
   },
+  dataTestId: {
+    type: String,
+    default: 'button-icon',
+  },
+  iconClass: {
+    type: String,
+    required: true,
+    default: 'fa-kit-duotone fa-circle-bolt',
+  },
+  offset: {
+    type: Array,
+    default: () => [4, 4],
+  },
   round: {
     type: Boolean,
     default: true,
   },
+  self: {
+    type: String,
+    default: 'center end',
+  },
   size: {
     type: String,
     default: 'md',
@@ -32,26 +50,20 @@ const props = defineProps({
     type: String,
     default: 'top',
   },
-  anchor: {
-    type: String,
-    default: 'center left',
-  },
-  self: {
-    type: String,
-    default: 'center end',
-  },
-  offset: {
-    type: Array,
-    default: () => [4, 4],
-  },
 })
 
-const emit = defineEmits(['onClick'])
-
-const handleClick = () => {
-  return emit('onClick')
-}
-
+const btnClass = computed(() => {
+  if (props.color === 'neutral') {
+    return 'neutral-4'
+  }
+  return props.color
+})
+const iconColor = computed(() => {
+  if (props.color === 'neutral') {
+    return 'neutral-9'
+  }
+  return props.color
+})
 const iconSize = computed(() => {
   if (props.size === 'sm') {
     return 'xs'
@@ -62,47 +74,37 @@ const iconSize = computed(() => {
   if (props.size === 'lg') {
     return 'md'
   }
-
   return props.size
 })
-const iconColor = computed(() => {
-  if (props.color === 'neutral') {
-    return 'neutral-9'
-  }
-  return props.color
-})
 
-const btnClass = computed(() => {
-  if (props.color === 'neutral') {
-    return 'neutral-4'
-  }
-  return props.color
-})
+const handleClick = () => {
+  return emit('onClick')
+}
 </script>
 
 <template>
   <q-btn
-    @click="handleClick"
+    :class="`u-btn-icon size-${size} ${btnClass}`"
+    :aria-label="ariaLabel"
+    :dataTestId="dataTestId"
     flat="flat"
     :round="round"
-    :aria-label="ariaLabel"
-    class="u-btn-icon"
-    :class="`size-${size} ${btnClass}`"
+    @click="handleClick"
   >
     <template #default>
       <q-icon
-        :color="iconColor"
-        :aria-hidden="true"
         :class="`${iconClass} size-${size}`"
+        :aria-hidden="true"
+        :color="iconColor"
         :size="iconSize"
       />
 
       <UTooltip
         v-if="tooltip"
-        :description="tooltip"
         :anchor="anchor"
-        :self="self"
+        :description="tooltip"
         :offset="offset"
+        :self="self"
       />
       <slot name="menu" />
     </template>

package/src/components/core/UBtnStd.vue

@@ -10,7 +10,7 @@ const props = defineProps({
   },
   dataTestId: {
     type: String,
-    default: 'button-std'
+    default: 'button-std',
   },
   disable: {
     type: Boolean,
@@ -31,6 +31,11 @@ const props = defineProps({
   leftIcon: {
     type: String,
   },
+  leftIconSize: {
+    type: String,
+    default: 'ba',
+    validator: (val) => ['sm', 'md', 'lg', 'ms', 'ba'].includes(val),
+  },
   outline: {
     type: Boolean,
     default: false,
@@ -45,9 +50,12 @@ const props = defineProps({
   },
 })
 
-const handleClick = () => {
-  return emit('onClick')
-}
+const isFullWidth = computed(() => {
+  if (props.fullWidth === true) {
+    return 'full-width'
+  }
+  return ''
+})
 
 const textClass = computed(() => {
   if (props.color === 'neutral') {
@@ -56,25 +64,21 @@ const textClass = computed(() => {
   return ''
 })
 
-const isFullWidth = computed(() => {
-  if (props.fullWidth === true) {
-    return 'full-width'
-  }
-  return ''
-})
+const handleClick = () => {
+  return emit('onClick')
+}
 </script>
 
 <template>
   <q-btn
-    class="u-btn q-py-none"
-    :class="`size-${size} ${textClass} focus-${color} ${isFullWidth}`"
+    :class="`u-btn q-py-none size-${size} ${textClass} focus-${color} ${isFullWidth}`"
     :color="color"
     :dataTestId="dataTestId"
     :disable="disable"
     :flat="flat"
     no-caps
-    :unelevated="!outline"
     :outline="outline"
+    :unelevated="!outline"
     @click="handleClick"
   >
     <template #default>
@@ -82,10 +86,9 @@ const isFullWidth = computed(() => {
         <div class="row items-center no-wrap">
           <q-icon
             v-if="leftIcon"
-            :class="leftIcon"
-            class="q-mr-xs"
+            :class="`q-mr-xs ${leftIcon}`"
             left
-            size="1rem"
+            :size="leftIconSize"
           />
 
           <div class="text-center text-caption-md button-label">
@@ -93,8 +96,7 @@ const isFullWidth = computed(() => {
           </div>
           <q-icon
             v-if="rightIcon"
-            :class="rightIcon"
-            class="q-ml-xs"
+            :class="`q-ml-xs ${rightIcon}`"
             right
             size="1rem"
           />
@@ -123,12 +125,10 @@ const isFullWidth = computed(() => {
     min-height: $lg
     padding: 0 $ba !important
 
-
   &.size-lg
     min-height: $xl
     padding: 0 $ba !important
 
-
 .button-label
   word-break: break-all
 </style>

package/src/components/core/UDrawer.vue

@@ -17,21 +17,25 @@ const open = defineModel('open', {
   type: Boolean,
 })
 const props = defineProps({
-  menu: {
-    default: () => [],
-    type: Array,
-  },
   brandLogo: {
     default: '',
   },
   brandMiniLogo: {
     default: '',
   },
+  dataTestId:{
+    default:'drawer-std',
+    type: String
+  },
   homeLink: {
     required: true,
     default: '/home',
     type: String,
   },
+  menu: {
+    default: () => [],
+    type: Array,
+  }
 })
 
 const $router = useRouter()
@@ -64,6 +68,7 @@ const handleCloseDrawer = () => {
     v-model="open"
     :class="`u-drawer ${miniState ? 'u-mini-drawer' : ''}`"
     :breakpoint="400"
+    :dataTestId="dataTestId"
     :mini="miniState"
     :mini-width="64"
     show-if-above
@@ -183,7 +188,7 @@ const handleCloseDrawer = () => {
       outline: auto !important
       .q-focus-helper
         display: none
-       
+
 .u-drawer-scrollable-area
   height: calc(100% - 0px)
   margin-top: 0px

package/src/components/core/UPagination.vue

@@ -7,6 +7,10 @@ const emit = defineEmits(['update:modelValue', 'onRowChange', 'onPageChange'])
 const model = defineModel()
 
 const props = defineProps({
+  dataTestId:{
+    type: String,
+    default:'pagination-std'
+  },
   maxPageLink: {
     //Maximum number of page links to display at a time
     type: Number,
@@ -62,6 +66,7 @@ watch(currentPage, (newValue) => {
       active-color="primary"
       boundary-numbers
       color="dark"
+      :dataTestId="dataTestId"
       direction-links
       flat
       gutter="sm"

package/src/components/core/USelectStd.vue

@@ -11,6 +11,10 @@ const props = defineProps({
     type: String,
     default: 'neutral-7',
   },
+  dataTestId:{
+   type: String,
+   default: 'select-std'
+  },
   disableAvatar: {
     type: Boolean,
     default: true,
@@ -44,19 +48,16 @@ const props = defineProps({
     type: String,
     required: false,
   },
-  options: {
-    type: Array,
-    required: true,
-  },
-  optionValue: {
-    type: String,
-  },
   optionLabel: {
     type: String,
   },
-  toolTipText: {
+  optionValue: {
     type: String,
   },
+  options: {
+    type: Array,
+    required: true,
+  },
   placeholder: {
     type: String,
     default: 'Select',
@@ -74,6 +75,9 @@ const props = defineProps({
     default: 'md',
     validator: (val) => ['sm', 'md', 'lg'].includes(val),
   },
+  toolTipText: {
+    type: String,
+  },
   useInput: {
     type: Boolean,
     required: false,
@@ -116,7 +120,7 @@ const handleKeydown = () => {
 </script>
 
 <template>
-  <section class="column q-gutter-y-xs">
+  <section class="column q-gutter-y-xs" :dataTestId="dataTestId">
     <label class="row items-center" for="select">
       <div class="u-select-label text-body-sm">
         <span>{{ label }}</span>
@@ -143,6 +147,7 @@ const handleKeydown = () => {
       v-model="model"
       :class="`u-select field-${size}`"
       :popup-content-class="`u-options-menu ${popupClass}`"
+      options-selected-class="primary bg-blue-1"
       bottom-slots
       :color="color"
       emit-value
@@ -154,7 +159,6 @@ const handleKeydown = () => {
       :option-label="optionLabel"
       :option-value="optionValue"
       :options="options"
-      options-selected-class="primary bg-blue-1"
       outlined
       :placeholder="placeholder"
       :use-input="useInput"

package/src/components/core/USheet.vue

@@ -0,0 +1,317 @@
+<script setup>
+import { onUnmounted, watch } from 'vue'
+import UBtnStd from './UBtnStd.vue'
+
+const emit = defineEmits(['onBackIconClick'])
+const dialogs = defineModel('dialogs', { default: () => [], type: Array })
+const props = defineProps({
+  closeIcon: {
+    default: 'fa-kit-duotone fa-circle-xmark',
+    type: String,
+  },
+  closeIconLabel: { type: String, default: 'close Icon' },
+  heading: {
+    default: 'Select Option',
+    type: String,
+  },
+  headingCaption: {
+    default: null,
+    type: String,
+  },
+  isLeftIcon: { type: Boolean, default: false },
+  leftIcon: { type: String, default: 'fa-kit-duotone fa-circle-arrow-left' },
+  leftIconLabel: { type: String, default: 'Back Icon' },
+  showActionButtons: {
+    default: false,
+    type: Boolean,
+  },
+})
+
+// constants
+const MAX_HEIGHT = 750
+const MIN_HEIGHT = 40
+let isDragging = false
+let startHeight = 0
+let startY = 0
+
+// custom functions
+const getDialogTransitions = (position) => {
+  let defaultTransition = { show: 'slide-up', hide: 'slide-down' }
+  if (position === 'right') {
+    defaultTransition = { show: 'slide-left', hide: 'slide-right' }
+  } else if (position === 'left') {
+    defaultTransition = { show: 'slide-right', hide: 'slide-left' }
+  }
+  return defaultTransition
+}
+
+const handleBackClick = () => {
+  return emit('onBackIconClick')
+}
+
+const handleCloseDialog = (index) => {
+  setTimeout(() => {
+    if (dialogs.value[index]) {
+      dialogs.value[index].open = false
+    }
+  }, 100)
+  // removing closed dialog data from the dialogs
+  setTimeout(() => {
+    dialogs.value.splice(index, 1)
+  }, 500)
+}
+
+const onDragEnd = () => {
+  isDragging = false
+  window.removeEventListener('mousemove', onDragMove)
+  window.removeEventListener('mouseup', onDragEnd)
+  window.removeEventListener('touchmove', onDragMove)
+  window.removeEventListener('touchend', onDragEnd)
+}
+
+const onDragMove = (index, event) => {
+  if (!isDragging || index !== dialogs.value.length - 1) return
+  event.preventDefault()
+  const currentY = event.touches ? event.touches[0].clientY : event.clientY
+  const deltaY = startY - currentY
+  const newHeight = startHeight + deltaY
+  // limiting dialog height to MAX HEIGHT
+  dialogs.value[index].height = Math.min(
+    Math.max(MIN_HEIGHT, newHeight),
+    MAX_HEIGHT
+  )
+  if (Math.min(Math.max(MIN_HEIGHT, newHeight), MAX_HEIGHT) <= MIN_HEIGHT) {
+    setTimeout(() => {
+      dialogs.value.splice(index, 1) // if user is dragging then it should close from here
+    }, 200)
+  }
+  // dialogs.value[index].height = Math.max(MIN_HEIGHT, startHeight + deltaY) // if limiting not required
+}
+
+const onMouseDown = (index, event) => {
+  if (index !== dialogs.value.length - 1) return // Only allow dragging for the topmost dialog
+  event.preventDefault()
+  isDragging = true
+  startY = event.clientY
+  startHeight = dialogs.value[index].height
+  window.addEventListener('mousemove', (e) => onDragMove(index, e))
+  window.addEventListener('mouseup', onDragEnd)
+}
+
+const onTouchStart = (index, event) => {
+  if (index !== dialogs.value.length - 1) return // Only allow dragging for the topmost dialog
+  event.preventDefault()
+  isDragging = true
+  startY = event.touches[0].clientY
+  startHeight = dialogs.value[index].height
+  window.addEventListener('touchmove', (e) => onDragMove(index, e))
+  window.addEventListener('touchend', onDragEnd)
+}
+
+onUnmounted(() => {
+  window.removeEventListener('mousemove', onDragMove)
+  window.removeEventListener('mouseup', onDragEnd)
+  window.removeEventListener('touchmove', onDragMove)
+  window.removeEventListener('touchend', onDragEnd)
+})
+
+watch(
+  dialogs,
+  (newVal) => {
+    const len = newVal.length
+    if (len > 1) {
+      if (dialogs.value[len - 2]) {
+        dialogs.value[len - 1].height = dialogs.value[len - 2].height // opening same height of previous dialog
+      }
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  dialogs, // to watch deep and for nested dialog
+  () => {
+    const index = dialogs.value.findIndex((dialog) => !dialog.open)
+    if (index > -1) {
+      handleCloseDialog(index)
+    }
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<template>
+  <q-dialog
+    v-for="(dialog, key) in dialogs"
+    v-model="dialog.open"
+    :key="key"
+    :persistent="
+      typeof dialog.persistent === 'undefined' ? true : dialog.persistent
+    "
+    position="bottom"
+    :transition-duration="
+      dialog.transitionDuration ? dialog.transitionDuration : 300
+    "
+    :transition-hide="getDialogTransitions(dialog.position).hide"
+    :transition-show="getDialogTransitions(dialog.position).show"
+  >
+    <div>
+      <q-card
+        class="sheet-card-wrapper"
+        :style="{
+          height: dialog.height + 'px',
+        }"
+      >
+        <div
+          class="drag-handle-wrapper"
+          @mousedown="onMouseDown(key, $event)"
+          @touchstart="onTouchStart(key, $event)"
+        >
+          <div class="drag-handle" />
+        </div>
+
+        <q-card-section
+          class="row items-start justify-between no-wrap q-pt-none q-pb-xs q-px-ba"
+        >
+          <div class="heading-wrapper row">
+            <div
+              class="flex items-center justify-center dialog-heading-container"
+            >
+              <UBtnStd
+                v-if="isLeftIcon"
+                class="dialog-action-icons q-mr-xs"
+                :aria-label="leftIconLabel"
+                :flat="true"
+                tabindex="0"
+                @click="handleBackClick()"
+              >
+                <q-icon
+                  :class="`icon-close ${leftIcon}`"
+                  size="1.5rem"
+                  tabindex="-1"
+                />
+              </UBtnStd>
+              <div>
+                <div class="text-heading-xs">
+                  {{ heading }}
+                </div>
+                <div>
+                  <span
+                    v-if="headingCaption"
+                    class="text-body-sm dialog-caption"
+                  >
+                    {{ headingCaption }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <UBtnStd
+            class="dialog-action-icons"
+            :aria-label="closeIconLabel"
+            :flat="true"
+            tabindex="0"
+            @click="handleCloseDialog(key)"
+          >
+            <q-icon
+              :class="`icon-close ${closeIcon} icon-secondary-opacity`"
+              size="1.5rem"
+              tabindex="-1"
+            />
+          </UBtnStd>
+        </q-card-section>
+        <q-card-section
+          class="main-content-dialog scroll q-px-ba"
+          :style="{ height: dialog.height - 84 + 'px !important' }"
+          tabindex="-1"
+        >
+          <slot name="content"></slot>
+        </q-card-section>
+      </q-card>
+      <div
+        v-if="showActionButtons && dialog.height > 70"
+        class="action-wrapper"
+      >
+        <q-card-actions class="action-buttons q-px-sm" align="center">
+          <slot name="action_primary_one"></slot>
+          <slot name="action_primary_two"></slot>
+        </q-card-actions>
+      </div>
+    </div>
+  </q-dialog>
+</template>
+
+<style lang="sass">
+.sheet-card-wrapper
+  position: relative
+  width: 100%
+  overflow: hidden
+  transition: height 0.02s ease-in-out
+  background: $neutral-1
+  border-radius: $sm $sm 0 0 !important
+  box-shadow: none !important
+  touch-action: none
+
+.q-btn.dialog-action-icons
+  padding: 0px 0px !important
+  min-width: 1.5rem !important
+  min-height: 0px !important
+  height: fit-content !important
+  border-radius: 0px
+
+  &:focus
+    outline: auto !important
+
+  .q-focus-helper
+    background: transparent !important
+
+.drag-handle-wrapper
+  width: 100%
+  height: 1rem
+  z-index: 9
+  display: flex
+  align-items: center
+  justify-content: center
+
+.drag-handle
+  width: 2rem
+  height: 0.25rem
+  cursor: ns-resize
+  background: $neutral-5
+  border-radius: $xxl !important
+
+.outer-wrapper
+  overflow: auto
+
+.action-buttons
+  display: flex
+  align-items: center
+  gap: $xs
+  flex-wrap: nowrap
+  .q-btn
+    margin: 0 !important
+    width: 50%
+
+.destructive-item
+  .q-item__section
+    color: red !important
+
+.action-wrapper
+  background: $neutral-1
+
+.main-content-dialog
+  margin-bottom: $ba
+  padding-bottom: 0
+
+.dialog-caption
+  color: $neutral-9
+
+.heading-wrapper
+  justify-content: space-between
+  flex-wrap: nowrap
+  margin-bottom: 0px !important
+
+.dialog-heading-container
+  gap: $xs
+</style>

package/src/components/core/UToolbar/UCustomMenuIcon.vue

@@ -0,0 +1,60 @@
+<script setup>
+const emit = defineEmits(['toggleDrawer'])
+const props = defineProps({
+  menuOpen: {
+    type: Boolean,
+    default: true,
+  },
+})
+const toggleDrawer = () => {
+  emit('toggleDrawer')
+}
+
+console.log('menu', props.menuOpen)
+</script>
+
+<template>
+  <div class="menu-container q-ml-ba" @click="toggleDrawer">
+    <div class="bar top" :class="{ open: !menuOpen }" />
+    <div class="bar bottom" :class="{ open: !menuOpen }" />
+  </div>
+</template>
+
+<style lang="sass">
+$bar-width: 1.25rem
+$bar-height: 0.125rem
+$tap-area: $md
+$transition-speed: 0.2s
+
+.menu-container
+  width: $tap-area
+  height: $tap-area
+  display: flex
+  justify-content: center
+  align-items: center
+  position: relative
+  cursor: pointer
+
+.bar
+  width: $bar-width
+  height: $bar-height
+  background-color: black
+  position: absolute
+  transition: transform $transition-speed ease-in-out
+
+  &.top
+    top: 50%
+    transform: translateY(-4px)
+
+  &.bottom
+    top: 50%
+    transform: translateY(4px)
+
+  /* Morphing into X */
+  &.open
+    &.top
+      transform: translateY(0) rotate(-45deg)
+
+    &.bottom
+      transform: translateY(0) rotate(45deg)
+</style>

package/src/components/core/UToolbar/UToolbar.vue

@@ -0,0 +1,206 @@
+<script setup>
+import { computed } from 'vue'
+import UBtnIcon from '../UBtnIcon.vue'
+import UBtnStd from '../UBtnStd.vue'
+import UCustomMenuIcon from './UCustomMenuIcon.vue'
+import { useScreenType } from '../../../composables/useScreenType'
+
+const emit = defineEmits(['navigateBack', 'toggleDrawer', 'onLogoClick'])
+const props = defineProps({
+  dataTestId: {
+    type: String,
+    default: 'toolbar',
+  },
+  isMiniState: {
+    type: Boolean,
+    required: true,
+  },
+  isSubPage: {
+    type: Boolean,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+})
+const $screen = useScreenType()
+
+// Computed property for the title text
+const pageTitle = computed(() => {
+  return props.isSubPage ? `Back to ${props.title} ` : props.title
+})
+
+// Function to handle the back navigation
+const handleClick = () => {
+  emit('navigateBack')
+}
+
+const onLogoClick = () => {
+  emit('onLogoClick')
+}
+
+const toggleDrawer = () => {
+  emit('toggleDrawer')
+}
+</script>
+
+<template>
+  <q-toolbar
+    v-if="$screen.isTablet"
+    class="u-header-toolbar-container"
+    :dataTestId="dataTestId"
+  >
+    <UCustomMenuIcon
+      aria-label="Menu icon"
+      :menuOpen="isMiniState"
+      tabindex="0"
+      @toggleDrawer="toggleDrawer"
+    />
+
+    <section class="fit row justify-between items-center q-ml-xxs q-mr-ba">
+      <UBtnStd
+        class="q-pa-none"
+        aria-label="usssa logo"
+        flat
+        :ripple="false"
+        @click="onLogoClick"
+      >
+        <img
+          class="mini-state-logo full-logo"
+          alt="usssa-logo"
+          aria-label="usssa logo"
+          src="/images/logo.svg"
+        />
+      </UBtnStd>
+
+      <!-- Action element container -->
+      <div class="u-header-toolbar-action-container">
+        <slot name="right_section" />
+      </div>
+    </section>
+  </q-toolbar>
+
+  <q-toolbar
+    v-if="$screen.isMobile"
+    class="u-header-toolbar-container"
+    :dataTestId="dataTestId"
+  >
+    <section class="fit row items-center q-mr-ba">
+      <UCustomMenuIcon
+        aria-label="Menu icon"
+        :menuOpen="isMiniState"
+        tabindex="0"
+        @toggleDrawer="toggleDrawer"
+      />
+
+      <div class="logo-container-mb items-center justify-center">
+        <!-- Add logo click emitter -->
+        <UBtnStd
+          class="q-pa-none"
+          aria-label="usssa logo"
+          flat
+          :ripple="false"
+          size="sm"
+          @click="onLogoClick"
+        >
+          <img
+            class="mini-state-logo full-logo"
+            alt="usssa-logo"
+            aria-label="usssa logo"
+            src="/images/logo.svg"
+          />
+        </UBtnStd>
+      </div>
+
+      <!-- Action element container -->
+      <div class="u-header-toolbar-action-container">
+        <slot name="right_section" />
+      </div>
+    </section>
+  </q-toolbar>
+
+  <q-toolbar
+    v-if="$screen.isDesktop"
+    class="u-header-toolbar-container"
+    :dataTestId="dataTestId"
+  >
+    <!-- Expand icon to open sidebar or drawer-->
+    <UBtnIcon
+      v-if="isMiniState"
+      class="q-ml-xxs"
+      ariaLabel="Sidebar expand icon"
+      color="primary"
+      dataTestId="expand-button"
+      iconClass="fa-kit-duotone fa-sidebar-expand"
+      size="md"
+    />
+
+    <section class="fit row justify-between items-center q-ml-xs q-mr-ba">
+      <!-- Title container with dynamic title and optional back button -->
+      <UBtnStd
+        v-if="isSubPage"
+        class="back_to_button icon-secondary-opacity"
+        :aria-label="pageTitle"
+        color="primary"
+        dataTestId="back-button"
+        :flat="true"
+        :label="pageTitle"
+        leftIconSize="ms"
+        left-icon="fa-kit-duotone fa-circle-arrow-left"
+        tabindex="0"
+        @click="handleClick"
+      />
+      <span
+        v-else
+        class="q-my-none text-heading-xxs q-ml-xxs"
+        dataTestId="toolbar-title"
+        tabindex="0"
+      >
+        {{ pageTitle }}
+      </span>
+
+      <!-- Action element container -->
+      <div class="u-header-toolbar-action-container">
+        <slot name="right_section" />
+      </div>
+    </section>
+  </q-toolbar>
+</template>
+
+<style lang="sass">
+.u-header-toolbar-container
+  background-color: white
+  width: 100%
+  padding: 0px
+  display: flex
+  align-items: center
+  align-self: stretch
+  padding: $xs 0
+
+  .full-logo
+    width: 5.918rem
+    height: $md
+    margin-top: $xxs
+
+  .logo-container-mb
+    flex: 1
+    display: flex
+
+.u-header-toolbar-inner-container
+  width: 100%
+
+.u-header-toolbar-title-container
+  display: flex
+  align-items: center
+  gap: $xs
+
+.u-header-toolbar-action-container
+  display: flex
+  align-items: center
+  gap: $sm
+
+.back_to_button
+  .button-label
+    color: $dark !important
+</style>

package/src/components/core/UTooltip.vue

@@ -1,23 +1,27 @@
 <script setup>
-import { computed, useSlots  } from 'vue'
+import { computed, useSlots } from 'vue'
 
 const props = defineProps({
-  icon: {
+  anchor: {
     type: String,
   },
-  description: {
+  dataTestId: {
     type: String,
-    required: true,
+    default: 'tooltip-std',
   },
-  anchor: {
+  description: {
     type: String,
+    required: true,
   },
-  self: {
+  icon: {
     type: String,
   },
   offset: {
     type: Array,
   },
+  self: {
+    type: String,
+  },
   target: {
     type: String,
     default: '',
@@ -40,17 +44,18 @@ const getTooltipText = computed(() => {
 
 <template>
   <q-tooltip
-    v-if="getTooltipText || slots.item"
     v-bind="$attrs"
+    v-if="getTooltipText || slots.item"
     class="u-tooltip shadow-2 bg-dark row"
     :anchor="anchor"
+    :dataTestId="dataTestId"
     :offset="offset"
     :self="self"
     :target="target"
   >
     <div class="row no-wrap tooltip-content">
       <div v-if="icon" class="flex items-center">
-        <q-icon :class="icon" size="1rem"></q-icon>
+        <q-icon :class="icon" size="1rem" />
       </div>
       <div class="text-body-xs tooltip-text">{{ getTooltipText }}</div>
       <slot name="item" />

package/src/components/index.js

@@ -23,19 +23,22 @@ import UMenuDropdownAdvancedSearch from './core/UMenuDropdownAdvancedSearch.vue'
 import UMenuItem from './core/UMenuItem.vue'
 import UMenuSearch from './core/UMenuSearch.vue'
 import UMultiSelectStd from './core/UMultiSelectStd.vue'
+import UPagination from './core/UPagination.vue'
 import URadioBtn from './core/URadioBtn.vue'
 import URadioStd from './core/URadioStd.vue'
 import USelectStd from './core/USelectStd.vue'
+import USheet from './core/USheet.vue'
 import UTabBtnStd from './core/UTabBtnStd.vue'
 import UTableStd from './core/UTableStd.vue'
 import UTabsStd from './core/UTabsStd.vue'
 import UToggleStd from './core/UToggleStd.vue'
-import UToolbar from './core/UToolbar.vue'
+import UToolbar from './core/UToolbar/UToolbar.vue'
 import UTooltip from './core/UTooltip.vue'
 import UUploader from './core/UUploader.vue'
 
 import { useNotify } from '../composables/useNotify.js'
 import { useOverlayLoader } from '../composables/useOverlayLoader.js'
+import { useScreenType } from '../composables/useScreenType.js'
 
 export {
   UAvatar,
@@ -62,9 +65,11 @@ export {
   UMenuItem,
   UMenuSearch,
   UMultiSelectStd,
+  UPagination,
   URadioBtn,
   URadioStd,
   USelectStd,
+  USheet,
   UTabBtnStd,
   UTableStd,
   UTabsStd,
@@ -74,4 +79,5 @@ export {
   UUploader,
   useNotify,
   useOverlayLoader,
+  useScreenType,
 }

package/src/composables/useScreenType.js

@@ -0,0 +1,30 @@
+import { computed, ref, watch } from 'vue'
+import { useQuasar } from 'quasar'
+
+export const useScreenType = () => {
+  const $q = useQuasar()
+
+  const getScreenType = () => {
+    if ($q.screen.xs) return 'mobile' // Extra small screens (phones)
+    if ($q.screen.sm) return 'tablet' // Small screens (tablets)
+    return 'desktop' // Default is desktop
+  }
+
+  const screenType = ref(getScreenType())
+
+  const screen = computed(() => ({
+    isDesktop: screenType.value === 'desktop',
+    isMobile: screenType.value === 'mobile',
+    isTablet: screenType.value === 'tablet',
+  }))
+
+  // Watch for Quasar's screen changes and update `screenType`
+  watch(
+    () => $q.screen.name,
+    () => {
+      screenType.value = getScreenType()
+    }
+  )
+
+  return screen
+}

package/src/components/core/UToolbar.vue

@@ -1,101 +0,0 @@
-<script setup>
-import { computed } from 'vue'
-import UBtnIcon from './UBtnIcon.vue'
-import UBtnStd from './UBtnStd.vue'
-
-const emit = defineEmits(['navigateBack'])
-const props = defineProps({
-  dataTestId: {
-    type: String,
-    default: 'toolbar',
-  },
-  isMiniState: {
-    type: Boolean,
-    required: true,
-  },
-  isSubPage: {
-    type: Boolean,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-})
-
-// Computed property for the title text
-const pageTitle = computed(() => {
-  return props.isSubPage ? `Back to ${props.title} ` : props.title
-})
-
-// Function to handle the back navigation
-const handleClick = () => {
-  emit('navigateBack')
-}
-</script>
-
-<template>
-  <q-toolbar class="u-header-toolbar-container" :dataTestId="dataTestId">
-    <!-- Expand icon to open sidebar or drawer-->
-    <UBtnIcon
-      v-if="isMiniState"
-      class="q-ml-xxs"
-      ariaLabel="Sidebar expand icon"
-      color="primary"
-      dataTestId="expand-button"
-      iconClass="fa-kit-duotone fa-sidebar-shrink"
-      size="md"
-    />
-
-    <section class="fit row justify-between items-center q-mx-ms">
-      <!-- Title container with dynamic title and optional back button -->
-      <UBtnStd
-        v-if="isSubPage"
-        class="back_to_button"
-        :aria-label="pageTitle"
-        color="primary"
-        dataTestId="back-button"
-        :flat="true"
-        :label="pageTitle"
-        left-icon="fa-kit-duotone fa-circle-arrow-left"
-        @click="handleClick"
-      />
-      <span v-else class="q-my-none text-heading-sm" dataTestId="toolbar-title">
-        {{ pageTitle }}
-      </span>
-
-      <!-- Action element container -->
-      <div class="u-header-toolbar-action-container">
-        <slot name="right_section" />
-      </div>
-    </section>
-  </q-toolbar>
-</template>
-
-<style lang="sass">
-.u-header-toolbar-container
-  background-color: white
-  width: 100%
-  padding: 0px
-  display: flex
-  align-items: center
-  align-self: stretch
-  padding: $sm 0
-
-.u-header-toolbar-inner-container
-  width: 100%
-
-.u-header-toolbar-title-container
-  display: flex
-  align-items: center
-  gap: $xs
-
-.u-header-toolbar-action-container
-  display: flex
-  align-items: center
-  gap: $sm
-
-.back_to_button
-  .button-label
-    color: $dark !important
-</style>