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

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.267
+# 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.13",
+  "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/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 }}
@@ -219,6 +240,7 @@ const viewClick = () => {
           :aria-label="props.eventRegisterText || 'Register Event'"
           color="primary"
           data-testid="eventRegisterBtn"
+          :disable="isRegisterEventActionDisabled"
           size="md"
           @click="registerClick"
         >
@@ -233,6 +255,7 @@ const viewClick = () => {
           :aria-label="props.eventViewText || 'View Event'"
           color="primary"
           data-testid="eventViewBtn"
+          :disable="isViewEventActionDisabled"
           flat
           size="md"
           @click="viewClick"
@@ -259,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 }}
@@ -351,6 +373,7 @@ const viewClick = () => {
           :aria-label="props.eventViewText || 'View Event'"
           color="primary"
           data-testid="eventViewBtn"
+          :disable="isViewEventActionDisabled"
           flat
           :label="eventViewText.text"
           size="md"
@@ -361,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/USelectStd.vue

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