@usssa/component-library 1.0.0-alpha.120 → 1.0.0-alpha.121

package/README.md

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

package/src/components/core/UInputPhoneStd.vue

@@ -12,6 +12,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  dataTestId: {
+    type: String,
+    default: 'input-phone-std',
+  },
   disable: {
     type: Boolean,
     default: false,
@@ -78,7 +82,7 @@ const props = defineProps({
 const selectCountry = (country) => {
   emit('update-country', country)
 }
-const toLowerCase = (str) => str.toLowerCase()
+const toLowerCase = (str) => str?.toLowerCase()
 </script>
 
 <template>
@@ -86,6 +90,7 @@ const toLowerCase = (str) => str.toLowerCase()
     v-model="modelValue"
     class="phone-input"
     :borderless="borderless"
+    :dataTestId="'input-text-std'"
     :disable="disable"
     :error="error"
     :error-message="errorMessage"
@@ -108,6 +113,7 @@ const toLowerCase = (str) => str.toLowerCase()
         :class="['u-phone-dropdown', 'text-body-sm', 'btn-field-' + size]"
         content-class="u-dropdown-list"
         :aria-label="ariaLabel"
+        :dataTestId="dataTestId"
         :disable="disable"
         flat
         menu-anchor="top right"
@@ -118,12 +124,12 @@ const toLowerCase = (str) => str.toLowerCase()
         <template #label>
           <q-icon
             :class="`fi fi-${toLowerCase(
-              selectedCountry.flag
+              selectedCountry?.flag
             )} flag-icon q-mr-xs`"
-            :aria-label="selectedCountry.name"
+            :aria-label="selectedCountry?.name"
             left
           />
-          <label class="selected-code">{{ selectedCountry.code }}</label>
+          <label class="selected-code">{{ selectedCountry?.code }}</label>
         </template>
 
         <q-list class="u-list">
@@ -133,20 +139,20 @@ const toLowerCase = (str) => str.toLowerCase()
             v-ripple
             class="q-my-xxs"
             clickable
-            :key="country.code"
+            :key="country?.code"
             @click="selectCountry(country)"
           >
             <q-item-section class="flag-section">
               <q-icon
-                :class="`fi fi-${toLowerCase(country.flag)} flag-icon q-mr-xs`"
-                :aria-label="country.name"
+                :class="`fi fi-${toLowerCase(country?.flag)} flag-icon q-mr-xs`"
+                :aria-label="country?.name"
                 left
                 size="1.25rem"
               />
             </q-item-section>
             <q-item-section>
               <q-item-label class="text-body-sm">
-                {{ country.name }}
+                {{ country?.name }}
               </q-item-label>
             </q-item-section>
           </q-item>

package/src/components/core/UInputTextStd.vue

@@ -13,6 +13,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  dataTestId: {
+    type: String,
+    default: 'input-text-std',
+  },
   disable: {
     type: Boolean,
     default: false,
@@ -93,7 +97,7 @@ const handleRightIconClick = () => {
 </script>
 
 <template>
-  <div :class="`q-gutter-xs ${parentClass}`">
+  <div :class="`q-gutter-xs ${parentClass}`" :dataTestId="dataTestId">
     <label
       v-if="label"
       class="row items-center q-mb-xxs"
@@ -125,6 +129,7 @@ const handleRightIconClick = () => {
       v-bind="$attrs"
       v-model="modelValue"
       :class="`u-input field-${size} ${leftBorderRadius}`"
+      :aria-describedby="hintText"
       :borderless="borderless"
       :bottom-slots="!!hintText"
       :disable="disable"

package/src/components/core/UTableStd.vue

@@ -49,6 +49,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  dataTestId: {
+    type: String,
+    default: 'table-std',
+  },
   filter: {
     type: String,
     default: '',
@@ -314,11 +318,9 @@ const onRowPerPageChange = (value) => {
 const updatedRows = computed(() => {
   if (props.filter.length && filteredRows.value?.length)
     return filteredRows.value
-  else if(props.filter.length)
-    return []
+  else if (props.filter.length) return []
   return rows.value
 })
-
 </script>
 
 <template>
@@ -329,6 +331,7 @@ const updatedRows = computed(() => {
     v-model:rows="rows"
     :class="customClass"
     :bordered="bordered"
+    :dataTestId="dataTestId"
     :filter="filter"
     :flat="flat"
     :grid="grid"
@@ -793,12 +796,15 @@ const updatedRows = computed(() => {
   <div
     v-if="showPagination"
     class="row justify-end items-center pagination-wrapper"
+    dataTestId="table-pagination"
   >
     <UPagination
       v-if="updatedRows.length >= 6"
       v-model="pagination.page"
       :maxPageLink="
-        Number(Math.ceil(updatedRows.length / pagination.rowsPerPage > 10 ? 6 : 3))
+        Number(
+          Math.ceil(updatedRows.length / pagination.rowsPerPage > 10 ? 6 : 3)
+        )
       "
       :maxPages="Number(Math.ceil(updatedRows.length / pagination.rowsPerPage))"
       :perPageOptions="getRowsPerPageOptions"