@usssa/component-library 1.0.0-beta.8 → 1.0.0-rc.1

package/src/components/core/UBtnIcon.vue

@@ -49,10 +49,13 @@ const props = defineProps({
     type: String,
     default: 'center end',
   },
+  showIconBorder: {
+    type: Boolean,
+    default: false,
+  },
   size: {
     type: String,
     default: 'md',
-    validator: (val) => ['sm', 'md', 'lg'].includes(val),
   },
   tooltip: {
     type: String,
@@ -65,8 +68,8 @@ const props = defineProps({
 })
 
 const btnAriaLabel = computed(() => {
-  if(props.badge) {
-    return props.ariaLabel + " " + props.badgeLabel
+  if (props.badge) {
+    return props.ariaLabel + ' ' + props.badgeLabel
   }
   return props.ariaLabel
 })
@@ -140,6 +143,7 @@ const handleClick = () => {
         :offset="offset"
         :self="self"
       />
+
       <slot name="menu" />
     </template>
   </q-btn>

package/src/components/core/UChip.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, nextTick, ref, watch } from 'vue'
-import UTooltip from './UTooltip.vue'
 import { isQuasarColor } from '../../utils/data'
+import UTooltip from './UTooltip.vue'
 
 const emit = defineEmits(['update:modelValue', 'onClick'])
 const props = defineProps({
@@ -151,7 +151,7 @@ watch(
   padding: $xs
   border-radius: 20px
   height: $lg
-  margin-left: 0px !important
+  margin: 0px !important
 
   &.q-chip--dense
     .chip-label

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/UExpansionStd.vue

@@ -1,6 +1,8 @@
 <script setup>
-import { ref } from 'vue'
+import { nextTick, ref, watch } from 'vue'
+import UBtnStd from './UBtnStd.vue'
 import URadioStd from './URadioStd.vue'
+import UTooltip from './UTooltip.vue'
 
 const emit = defineEmits(['handleSelectChange'])
 const isSelected = defineModel('isSelected', {
@@ -36,6 +38,19 @@ const props = defineProps({
     type: String,
     default: 'Expand',
   },
+  expansionButtonProps: {
+    type: Object,
+    default: () => ({
+      flat: true,
+      outline: false,
+      color: 'primary',
+      label: '',
+      size: '',
+      rightIcon: 'fa-kit fa-caret-down',
+      leftIcon: '',
+      disable: false,
+    }),
+  },
   expansionIcon: {
     type: String,
     default: 'fa-kit fa-caret-down',
@@ -60,6 +75,10 @@ const props = defineProps({
     type: Number,
     default: 20.563,
   },
+  useExpansionButton: {
+    type: Boolean,
+    default: false,
+  },
   toggleIconLeft: {
     type: Boolean,
     default: false,
@@ -71,6 +90,17 @@ const props = defineProps({
 })
 
 const isExpanded = ref(false)
+const isOverflowing = ref(false)
+const labelRef = ref(null)
+
+const checkOverflow = () => {
+  nextTick(() => {
+    if (labelRef.value) {
+      const el = labelRef.value
+      isOverflowing.value = el.scrollWidth > el.clientWidth
+    }
+  })
+}
 
 const handleChange = (value) => {
   emit('handleSelectChange', value)
@@ -89,6 +119,16 @@ const toggleExpansion = () => {
     isExpanded.value = !isExpanded.value
   }
 }
+
+watch(
+  () => props.label,
+  () => {
+    checkOverflow()
+  },
+  {
+    immediate: true,
+  }
+)
 </script>
 
 <template>
@@ -139,26 +179,54 @@ const toggleExpansion = () => {
         </q-icon>
         <slot name="avatar" />
         <div class="column u-expansion-label">
-          <span class="text-caption-lg">{{ label }}</span>
-          <span class="text-body-xs">{{ caption }}</span>
+          <span
+            :class="`text-caption-lg text-truncate ${
+              isOverflowing ? `cursor-pointer` : ``
+            }`"
+            ref="labelRef"
+            @mouseenter="checkOverflow"
+            >{{ label }}</span
+          >
+          <UTooltip
+            v-if="isOverflowing"
+            anchor="bottom middle"
+            :description="label"
+            :offset="[14, 14]"
+          />
+          <template v-if="$slots.caption">
+            <slot name="caption" />
+          </template>
+          <template v-else>
+            <span class="text-body-xs text-description">{{ caption }}</span>
+          </template>
         </div>
-        <q-icon
-          v-if="!toggleIconLeft"
-          :class="[
-            'cursor-pointer',
-            'icon-secondary-opacity',
-            'transition-all',
-            expansionIcon,
-            isExpanded ? toggleIconRotationClass : '',
-          ]"
-          :aria-label="isExpanded ? collapsedAriaLabel : expandAriaLabel"
-          :color="expansionIconColor"
-          :size="expansionIconSize"
-          :tabindex="disabled ? -1 : 0"
-          @click.stop="toggleExpansion"
-          @keydown.stop="onIconKeydown"
-        >
-        </q-icon>
+        <template v-if="!toggleIconLeft">
+          <UBtnStd
+            v-bind="expansionButtonProps"
+            v-if="useExpansionButton"
+            :class="{ 'u-expansion-btn--expanded': isExpanded }"
+            :aria-label="isExpanded ? collapsedAriaLabel : expandAriaLabel"
+            :tabindex="disabled ? -1 : 0"
+            @click.stop="toggleExpansion"
+            @keydown.stop="onIconKeydown"
+          />
+          <q-icon
+            v-else
+            :class="[
+              'cursor-pointer',
+              'icon-secondary-opacity',
+              'transition-all',
+              expansionIcon,
+              isExpanded ? toggleIconRotationClass : '',
+            ]"
+            :aria-label="isExpanded ? collapsedAriaLabel : expandAriaLabel"
+            :color="expansionIconColor"
+            :size="expansionIconSize"
+            :tabindex="disabled ? -1 : 0"
+            @click.stop="toggleExpansion"
+            @keydown.stop="onIconKeydown"
+          />
+        </template>
       </div>
     </template>
     <slot name="body" />
@@ -209,22 +277,49 @@ const toggleExpansion = () => {
         </q-icon>
         <slot name="avatar" />
         <div class="column u-expansion-label">
-          <span class="text-caption-lg">{{ label }}</span>
-          <span class="text-body-xs text-description">{{ caption }}</span>
+          <span
+            :class="`text-caption-lg text-truncate ${
+              isOverflowing ? `cursor-pointer` : ``
+            }`"
+            ref="labelRef"
+            @mouseenter="checkOverflow"
+            >{{ label }}</span
+          >
+          <UTooltip
+            v-if="isOverflowing"
+            anchor="bottom middle"
+            :description="label"
+            :offset="[14, 14]"
+          />
+          <template v-if="$slots.caption">
+            <slot name="caption" />
+          </template>
+          <template v-else>
+            <span class="text-body-xs text-description">{{ caption }}</span>
+          </template>
         </div>
-        <q-icon
-          v-if="!toggleIconLeft"
-          :class="[
-            'cursor-pointer',
-            'icon-secondary-opacity',
-            'transition-all',
-            expansionIcon,
-            isExpanded ? toggleIconRotationClass : '',
-          ]"
-          :color="expansionIconColor"
-          :size="expansionIconSize"
-        >
-        </q-icon>
+        <template v-if="!toggleIconLeft">
+          <UBtnStd
+            v-if="useExpansionButton"
+            v-bind="expansionButtonProps"
+            :aria-label="isExpanded ? collapsedAriaLabel : expandAriaLabel"
+            :tabindex="disabled ? -1 : 0"
+            @click.stop="toggleExpansion"
+            @keydown.stop="onIconKeydown"
+          />
+          <q-icon
+            v-else
+            :class="[
+              'cursor-pointer',
+              'icon-secondary-opacity',
+              'transition-all',
+              expansionIcon,
+              isExpanded ? toggleIconRotationClass : '',
+            ]"
+            :color="expansionIconColor"
+            :size="expansionIconSize"
+          />
+        </template>
       </div>
     </template>
     <slot name="body" />
@@ -254,6 +349,13 @@ const toggleExpansion = () => {
     word-break: break-word
     overflow-wrap: break-word
 
+    .text-truncate
+      overflow: hidden
+      text-overflow: ellipsis
+      white-space: nowrap
+      display: block
+      max-width: 100%
+
   .q-expansion-item__content > :first-child
     padding: $xs $ba $ba $ba
 
@@ -268,6 +370,10 @@ const toggleExpansion = () => {
     transform: rotate(90deg)
     transition: 0.3s
 
+  .u-expansion-btn--expanded .q-icon.on-right
+    transform: rotate(180deg)
+    transition: 0.3s
+
 .expansion-radio-wrapper
   .q-radio__label
     padding-left: 0px !important

package/src/components/core/UExpansionTableStd.vue

@@ -151,6 +151,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  showCustomTable: {
+    type: Boolean,
+    default: false,
+  },
   tableCustomClass: {
     type: String,
     default: '',
@@ -200,7 +204,9 @@ const virtualScroll = ref(false)
       <UAvatar name="UExpansion" :round="true" size="lg" />
     </template>
     <template #body>
+      <slot v-if="showCustomTable" name="custom_table" />
       <UTableStd
+        v-else
         v-model:columns="columns"
         v-model:grid="grid"
         v-model:pagination="pagination"
@@ -257,8 +263,6 @@ const virtualScroll = ref(false)
   .q-expansion-item__content
     padding: 0px !important
 
-
-
   .q-table__grid-content
     .expansion-table-card
       padding: 0px !important