@usssa/component-library 1.0.0-beta.12 → 1.0.0-beta.14

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.262
+# Component Library v1.0.0-alpha.273
 
 **This library provides custom UI components for USSSA applications**
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-beta.12",
+  "version": "1.0.0-beta.14",
   "description": "A Quasar component library project",
-  "productName": "Quasar component library App",
+  "productName": "Quasar component library app",
   "author": "Engineering Team <engineering@usssa.com>",
   "main": "src/components/index.js",
   "files": [

package/src/components/core/UDate.vue

@@ -4,6 +4,7 @@ import { useScreenType } from '../../composables/useScreenType'
 import UBtnStd from './UBtnStd.vue'
 import UInputTextStd from './UInputTextStd.vue'
 import USheet from './USheet.vue'
+import { debounce } from 'quasar'
 
 const date = defineModel('date', { default: null })
 
@@ -63,6 +64,10 @@ const props = defineProps({
   toolTipText: {
     type: String,
   },
+  useDebounce: {
+    type: Boolean,
+    default: false,
+  },
   validationRules: { type: Array, default: () => [] },
 })
 
@@ -115,7 +120,7 @@ const onUpdateSheet = (value) => {
   }
 }
 
-const onUpdateValue = (value) => {
+const updateValue = (value) => {
   if (value.search('-') > -1) {
     date.value = { from: value.split('-')[0], to: value.split('-')[1] }
   } else {
@@ -123,6 +128,16 @@ const onUpdateValue = (value) => {
   }
 }
 
+const debouncedUpdateValue = debounce(updateValue, 1000)
+
+const onUpdateValue = (value) => {
+  if (props.useDebounce) {
+    debouncedUpdateValue(value)
+  } else {
+    updateValue(value)
+  }
+}
+
 const openDatePicker = () => {
   if ($screen.value.isMobile) {
     openDialogs()
@@ -183,6 +198,7 @@ watch(
   <UInputTextStd
     v-model="selectedDate"
     :class="inputClass ? inputClass : ''"
+    autocomplete="off"
     :borderless="borderless"
     :dataTestId="dataTestId"
     :disable="disable"
@@ -205,7 +221,7 @@ watch(
         aria-label="open date picker"
         :flat="true"
         :size="size"
-        :tabindex="disable ? -1 : 0"
+        :tabindex="-1"
         @mousedown.prevent
         @touchstart.prevent="openDatePicker"
         @on-click="openDatePicker"
@@ -214,7 +230,7 @@ watch(
           class="cursor-pointer date-picker-icon fa-kit-duotone fa-calendar-event"
           alt="open date picker"
           size="1rem"
-          tabindex="-1"
+          tabindex="0"
         >
           <q-popup-proxy
             v-if="!$screen.isMobile"
@@ -260,7 +276,7 @@ watch(
         :dataTestId="dataTestId"
         :hint-icon="hintIcon"
         :mask="`${range ? '##/##/####-##/##/####' : '##/##/####'}`"
-        tabindex="-1"
+        tabindex="0"
         @update:modelValue="onUpdateSheet"
       >
         <template #append>
@@ -269,13 +285,13 @@ watch(
             aria-label="open date picker"
             :flat="true"
             :size="size"
-            :tabindex="disable ? -1 : 0"
+            :tabindex="-1"
           >
             <q-icon
               class="cursor-pointer date-picker-icon fa-kit-duotone fa-calendar-event"
               alt="open date picker"
               size="1rem"
-              tabindex="-1"
+              tabindex="0"
             >
             </q-icon>
           </UBtnStd>
@@ -565,18 +581,36 @@ watch(
   padding: 0px !important
   min-width: 0px !important
 
+  // remove hover background
+  &:hover
+    background: transparent !important
+    box-shadow: none !important
+
+  // disable ripple effect
+  .q-ripple
+    display: none !important
+
+
   &.q-hoverable:hover > .q-focus-helper
     opacity: 0
 
   &:focus-visible
-    outline: auto !important
+    background: transparent !important
+    box-shadow: none !important
+    outline: none !important
+
+  .q-focus-helper
+    display: none !important
+    background: transparent !important
 
-    .q-focus-helper
-      display: none
 
 .date-picker-icon
   color: $description
 
+  &:focus-visible
+    outline: auto !important
+
+
 .selected-month-year
   color: #12316C
   background: #234ba926

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 import defaultImage from '../../assets/no-result.svg'
 import { useScreenType } from '../../composables/useScreenType'
@@ -48,13 +48,27 @@ const props = defineProps({
   eventViewText: {
     type: String,
   },
+  isRegisterEventActionDisabled: {
+    type: Boolean,
+    default: false,
+  },
+  isViewEventActionDisabled: {
+    type: Boolean,
+    default: false,
+  },
+  registerEventTooltip: {
+    type: String,
+    default: '',
+  },
 })
 
+const VERTICAL_TEXT_LIMIT = 13
+
 const $screen = useScreenType()
+
 const eventChip = ref(true) // this is required to show chip
 const isCategoryOverflowing = ref(false)
 const isNameOverflowing = ref(false)
-const textECategory = ref(null)
 const textEName = ref(null)
 
 const eventAgeGroup = computed(() => trimmedLabel(props.eventAgeGroup, 30))
@@ -75,10 +89,8 @@ const eventViewText = computed(() =>
 const isMobile = computed(() => $screen.value.isMobile)
 
 const checkOverflow = () => {
-  if (textECategory.value) {
-    isCategoryOverflowing.value =
-      textECategory.value.scrollWidth > textECategory.value.clientWidth ||
-      textECategory.value.scrollHeight > textECategory.value.clientHeight
+  if (props.eventCategory.length > VERTICAL_TEXT_LIMIT) {
+    isCategoryOverflowing.value = true
   }
 
   if (textEName.value) {
@@ -95,6 +107,16 @@ const registerClick = () => {
 const viewClick = () => {
   emit('onView')
 }
+
+onMounted(() => {
+  const verticalTextEle = document.getElementsByClassName('event-vertical-text')
+  Array.from(verticalTextEle).forEach((el) => {
+    const originalText = el.innerText.trim()
+    if (originalText.length > VERTICAL_TEXT_LIMIT) {
+      el.innerText = originalText.slice(0, VERTICAL_TEXT_LIMIT) + '...'
+    }
+  })
+})
 </script>
 
 <template>
@@ -109,9 +131,8 @@ const viewClick = () => {
   >
     <!-- Column 1: Rotated Text -->
     <div
-      class="flex items-center justify-center q-py-sm q-px-xs rotated-text text-dark text-italic text-display-xxxs text-center cornero-font-family ellipsis"
+      class="flex items-center justify-center q-py-sm q-px-xs rotated-text event-vertical-text text-dark text-italic text-display-xxxs text-center cornero-font-family ellipsis"
       data-testid="eventCategory"
-      ref="textECategory"
       @mouseenter="checkOverflow"
     >
       {{ props.eventCategory }}
@@ -185,7 +206,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 +214,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
@@ -213,6 +240,7 @@ const viewClick = () => {
           :aria-label="props.eventRegisterText || 'Register Event'"
           color="primary"
           data-testid="eventRegisterBtn"
+          :disable="isRegisterEventActionDisabled"
           size="md"
           @click="registerClick"
         >
@@ -227,6 +255,7 @@ const viewClick = () => {
           :aria-label="props.eventViewText || 'View Event'"
           color="primary"
           data-testid="eventViewBtn"
+          :disable="isViewEventActionDisabled"
           flat
           size="md"
           @click="viewClick"
@@ -253,7 +282,6 @@ const viewClick = () => {
       <div
         class="text-dark text-display-xxxs text-italic cornero-font-family text-no-wrap ellipsis"
         data-testid="eventCategory"
-        ref="textECategory"
         @mouseenter="checkOverflow"
       >
         {{ props.eventCategory }}
@@ -310,14 +338,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 +353,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" />
@@ -342,6 +373,7 @@ const viewClick = () => {
           :aria-label="props.eventViewText || 'View Event'"
           color="primary"
           data-testid="eventViewBtn"
+          :disable="isViewEventActionDisabled"
           flat
           :label="eventViewText.text"
           size="md"
@@ -352,6 +384,7 @@ const viewClick = () => {
           :aria-label="props.eventRegisterText || 'Register Event'"
           color="primary"
           data-testid="eventRegisterBtn"
+          :disable="isRegisterEventActionDisabled"
           :label="eventRegisterText.text"
           size="md"
           @click="registerClick"

package/src/components/core/UInputAddressLookup.vue

@@ -91,9 +91,9 @@ const menuWidth = ref(0)
 const predictions = ref([])
 const resultItem = ref(
   props.selectedAddress?.length
-    ? { formattedAddress: props.selectedAddress }
+    ? { displayName: props.selectedAddress }
     : modelValue.value?.length
-    ? { formattedAddress: modelValue.value }
+    ? { displayName: modelValue.value }
     : {}
 )
 const resultsMenuRef = ref(null)
@@ -420,7 +420,7 @@ watch(
 
   <UInputTextStd
     v-if="JSON.stringify(resultItem) !== '{}'"
-    v-model="resultItem.formattedAddress"
+    v-model="resultItem.displayName"
     :dataTestId="dataTestId"
     :label="label"
     :size="size"

package/src/components/core/UInputPhoneStd.vue

@@ -139,6 +139,11 @@ const toLowerCase = (str) => str?.toLowerCase()
             v-for="country in options"
             v-ripple
             class="q-my-xxs"
+            :class="{
+              'selected-item':
+                selectedCountry?.code === country?.code &&
+                selectedCountry?.label === country?.label,
+            }"
             clickable
             :key="country?.code"
             @click="selectCountry(country)"
@@ -165,8 +170,10 @@ const toLowerCase = (str) => str?.toLowerCase()
 
 <style lang="sass">
 .selected-code
-  width: 1.5rem
+  width: auto
   color: $dark
+.selected-item
+  background-color: $blue-1
 .u-dropdown-list
   .q-item__section--main
     margin-left: 0px

package/src/components/core/UInputTextStd.vue

@@ -19,6 +19,10 @@ defineOptions({
   inheritAttrs: false,
 })
 const props = defineProps({
+  autocomplete: {
+    type: String,
+    default: 'on',
+  },
   borderless: {
     type: Boolean,
     default: false,
@@ -146,6 +150,7 @@ const handleRightIconClick = () => {
       v-model="modelValue"
       :class="`u-input field-${size} ${leftBorderRadius}`"
       :aria-describedby="hintText"
+      :autocomplete="autocomplete"
       :borderless="borderless"
       :bottom-slots="!!hintText"
       :disable="disable"

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

package/src/components/core/USelectStd.vue

@@ -280,6 +280,14 @@ watch(
     }
   }
 )
+
+watch(
+  () => props.options,
+  (newOptions) => {
+    initialOptions.value = [...newOptions]
+  },
+  { immediate: true }
+)
 </script>
 
 <template>