@usssa/component-library 1.0.0-alpha.267 → 1.0.0-alpha.269

package/README.md

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

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.267",
+  "version": "1.0.0-alpha.269",
   "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"

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/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>