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

package/README.md

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

package/src/components/core/UBtnIcon.vue

@@ -40,6 +40,10 @@ const props = defineProps({
     type: String,
     default: 'center end',
   },
+  offset: {
+    type: Array,
+    default: () => [4, 4],
+  },
 })
 
 const emit = defineEmits(['onClick'])
@@ -97,7 +101,7 @@ const btnClass = computed(() => {
       :description="tooltip"
       :anchor="anchor"
       :self="self"
-      :offset="[4, 4]"
+      :offset="offset"
     />
   </q-btn>
 </template>

package/src/components/core/UBtnStd.vue

@@ -72,26 +72,30 @@ const isFullWidth = computed(() => {
     :flat="flat"
     @click="handleClick"
   >
-    <div class="row items-center no-wrap">
-      <q-icon
-        v-if="leftIcon"
-        left
-        :class="leftIcon"
-        class="q-mr-xs"
-        size="1.25rem"
-      />
+    <template #default>
+      <slot name="default">
+        <div class="row items-center no-wrap">
+          <q-icon
+            v-if="leftIcon"
+            left
+            :class="leftIcon"
+            class="q-mr-xs"
+            size="1.25rem"
+          />
 
-      <div class="text-center text-caption-md button-label">
-        {{ label }}
-      </div>
-      <q-icon
-        v-if="rightIcon"
-        right
-        :class="rightIcon"
-        class="q-ml-xs"
-        size="1.25rem"
-      />
-    </div>
+          <div class="text-center text-caption-md button-label">
+            {{ label }}
+          </div>
+          <q-icon
+            v-if="rightIcon"
+            right
+            :class="rightIcon"
+            class="q-ml-xs"
+            size="1.25rem"
+          />
+        </div>
+      </slot>
+    </template>
   </q-btn>
 </template>
 

package/src/components/core/UCheckboxStd.vue

@@ -36,6 +36,8 @@ onMounted(() => {
   if (checkboxElement) {
     const inputElement = checkboxElement.querySelector('input')
     inputElement.id = `${props.id}`
+  } else {
+    // need to add if element is not found
   }
 })
 </script>

package/src/components/core/UInputTextStd.vue

@@ -7,7 +7,6 @@ const props = defineProps({
   },
   hintIcon: {
     type: String,
-    default: 'fa-kit-duotone fa-circle-info',
   },
   isRequired: {
     type: Boolean,
@@ -32,7 +31,6 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: 'Input Text',
   },
   size: {
     type: String,
@@ -147,13 +145,16 @@ const handleRightIconClick = () => {
             <div class="q-ml-xxs text-body-xs">{{ hintText }}</div>
           </div>
         </template>
-        <template #append v-if="rightIcon">
-          <q-icon
-            @click="handleRightIconClick"
-            :class="`slot-icon-size-${size} ${rightIcon}`"
-          />
+        <template #append>
+          <slot name="append">
+            <q-icon
+              v-if="rightIcon"
+              @click="handleRightIconClick"
+              :class="`slot-icon-size-${size} ${rightIcon}`"
+              :tabindex="0"
+            />
+          </slot>
         </template>
-
         <template v-slot:error>
           <div class="row items-center no-wrap" v-if="errorMessage">
             <q-icon

package/src/components/core/UPagination.vue

@@ -7,8 +7,8 @@ const props = defineProps({
     default: 1,
   },
   rowPerPage: {
-    type: String,
-    default: '5 / per page',
+    type: Number,
+    default: 5,
   },
   maxPageLink: {
     //Maximum number of page links to display at a time

package/src/components/core/USelectStd.vue

@@ -108,7 +108,7 @@ const model = computed({
       :class="`field-${size}`"
       id="select"
       :color="color"
-      dropdown-icon="img:icons/caret-down.svg"
+      dropdown-icon="img:/icons/caret-down.svg"
       emit-value
       map-options
       :menu-offset="[0, 5]"

package/src/components/core/UTable/UTable.vue

@@ -2,7 +2,7 @@
 const props = defineProps({
   title: {
     type: String,
-    default: 'Table',
+    default: '',
   },
   rowKey: {
     type: String,
@@ -12,10 +12,6 @@ const props = defineProps({
     type: String,
     default: 'horizontal',
   },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
   flat: {
     type: Boolean,
     default: false,
@@ -42,6 +38,10 @@ const pagination = defineModel('pagination', {
   default: null,
   type: Object,
 })
+const loading = defineModel('loading', {
+  default: null,
+  type: Boolean,
+})
 const rows = defineModel('rows', {
   default: () => [],
   type: Array,
@@ -76,7 +76,11 @@ const columns = defineModel('columns', {
     :virtual-scroll-item-size="48"
     :virtual-scroll-sticky-size-start="48"
   >
-    <template v-for="(_, slotName) in $slots" v-slot:[slotName]="scope">
+    <template
+      v-for="(_, slotName, index) in $slots"
+      v-slot:[slotName]="scope"
+      :key="index"
+    >
       <slot :name="slotName" v-bind="{ ...scope }" />
     </template>
   </q-table>

package/src/components/core/UTable/UTd.vue

@@ -34,7 +34,11 @@ const props = defineProps({
     v-bind="$attrs"
     :auto-width="tableDataAutoWidth"
   >
-    <template v-for="(_, slotName) in $slots" v-slot:[slotName]="scope">
+    <template
+      v-for="(_, slotName, index) in $slots"
+      v-slot:[slotName]="scope"
+      :key="index"
+    >
       <slot :name="slotName" v-bind="{ ...scope }" />
     </template>
   </q-td>

package/src/components/core/UTable/UTh.vue

@@ -23,7 +23,11 @@ const props = defineProps({
     v-bind="$attrs"
     :auto-width="tableHeaderAutoWidth"
   >
-    <template v-for="(_, slotName) in $slots" v-slot:[slotName]="scope">
+    <template
+      v-for="(_, slotName, index) in $slots"
+      v-slot:[slotName]="scope"
+      :key="index"
+    >
       <slot :name="slotName" v-bind="{ ...scope }" />
     </template>
   </q-th>

package/src/components/core/UTable/UTr.vue

@@ -9,7 +9,11 @@ const props = defineProps({
 
 <template>
   <q-tr v-bind="$attrs" :no-hover="tableRowHover" :props="props">
-    <template v-for="(_, slotName) in $slots" v-slot:[slotName]="scope">
+    <template
+      v-for="(_, slotName, index) in $slots"
+      v-slot:[slotName]="scope"
+      :key="index"
+    >
       <slot :name="slotName" v-bind="{ ...scope }" />
     </template>
   </q-tr>

package/src/components/core/UTableStd.vue

@@ -13,11 +13,7 @@ import UPagination from './UPagination.vue'
 const props = defineProps({
   title: {
     type: String,
-    default: 'Table',
-  },
-  loading: {
-    type: Boolean,
-    default: false,
+    default: '',
   },
   tableRowHover: {
     type: Boolean,
@@ -81,6 +77,11 @@ const pagination = defineModel('pagination', {
   default: () => {},
   type: Object,
 })
+const loading = defineModel('loading', {
+  default: () => {},
+  type: Boolean,
+})
+const customLoading = ref(false)
 const rowsPerPageOptions = ref([
   { label: '5 / per page', value: 5 },
   { label: '10 / per page', value: 10 },
@@ -146,7 +147,10 @@ const isRowSelected = (row) => {
   } else {
     return computed({
       get: () => {
-        return selectedRows.value.length === props.rows.length
+        let dataLength = props.virtualScroll
+          ? pagination.value.rowsPerPage
+          : props.rows.length
+        return selectedRows.value.length === dataLength
           ? true
           : selectedRows.value.length === 0
           ? false
@@ -156,21 +160,59 @@ const isRowSelected = (row) => {
         if (value !== null) {
           selectedRows.value.splice(0, selectedRows.value.length)
         } else {
-          props.rows.forEach((element) => {
-            if (
-              selectedRows.value.findIndex(
-                (item) => item._id === element._id
-              ) === -1
-            ) {
-              selectedRows.value.push(element)
-            }
-          })
+          if (props.virtualScroll) {
+            handleSelectAllData().then((res) => {
+              if (res === 200) {
+                customLoading.value = false
+              }
+            })
+          } else {
+            props.rows.forEach((element) => {
+              if (
+                selectedRows.value.findIndex(
+                  (item) => item._id === element._id
+                ) === -1
+              ) {
+                selectedRows.value.push(element)
+              }
+            })
+          }
         }
       },
     })
   }
 }
 
+// handling the large selection data in chunks
+const handleSelectAllData = () => {
+  customLoading.value = true
+  return new Promise((resolve, reject) => {
+    let index = 0
+    function processChunk() {
+      if (index >= pagination.value.rowsPerPage) {
+        resolve(200)
+        return
+      }
+      const chunk = props.rows.slice(index, index + 25)
+      chunk.forEach((element) => {
+        if (
+          selectedRows.value.findIndex((item) => item._id === element._id) ===
+          -1
+        ) {
+          selectedRows.value.push(element)
+        }
+      })
+      index += 25
+      setTimeout(processChunk, 10)
+    }
+    try {
+      processChunk()
+    } catch {
+      reject('error')
+    }
+  })
+}
+
 const emit = defineEmits(['onCustomSort'])
 
 // sorting funtion to handle text and number type of data
@@ -253,16 +295,18 @@ const onRowPerPageChange = (value) => {
           :separator="separator"
         >
           <UCheckboxStd
-            :id="`u-checkbox-${title}-header`"
+            :id="`u-checkbox-table-header`"
             v-model="isRowSelected(null).value"
             name="Table Header"
             :indeterminate="true"
           />
         </UTh>
         <UTh
-          v-for="col in props.cols"
-          :class="`${col.sortable ? 'cursor-pointer' : ''}`"
-          :key="col.field"
+          v-for="(col, key) in props.cols"
+          :class="`${col.sortable ? 'cursor-pointer' : ''} ${
+            col.headerClasses
+          }`"
+          :key="key"
           :tableHeaderAutoWidth="col.autoWidth"
           :tableHeadAlignment="col.field === 'action' ? col.align : col.align"
           @click="
@@ -273,6 +317,7 @@ const onRowPerPageChange = (value) => {
               : null
           "
           :separator="separator"
+          :style="col.headerStyle"
         >
           {{ col.label }}
           <span v-if="col.sortable && col.field !== 'action'">
@@ -280,7 +325,7 @@ const onRowPerPageChange = (value) => {
               <q-icon
                 size="xs"
                 :class="`${getSortingIcon(col)} sorting-icon`"
-                aria-label="sort-desc"
+                :aria-label="col.label"
                 alt="sort-desc"
                 tabindex="0"
               ></q-icon>
@@ -310,7 +355,7 @@ const onRowPerPageChange = (value) => {
             :name="props.row._id"
           />
         </UTd>
-        <template v-for="(col, index) in props.cols" :key="col.field">
+        <template v-for="(col, index) in props.cols" :key="index">
           <!-- to show the cell data without the action cell -->
           <UTd
             v-if="col.field !== 'action'"
@@ -320,6 +365,8 @@ const onRowPerPageChange = (value) => {
             :tableDataAlignment="col.align"
             :tableDataAutoWidth="col.autoWidth"
             :separator="separator"
+            :style="col.style"
+            :class="col.classes"
           >
             <!-- to show the chips with different variant -->
             <template v-if="col.chipValues && col.chipValues.length > 0">
@@ -382,11 +429,13 @@ const onRowPerPageChange = (value) => {
             :tableDataAutoWidth="false"
             style="width: 3%"
             :separator="separator"
+            :style="col.style"
+            :class="col.classes"
           >
             <template v-if="col.actions && col.actions.length === 1">
               <UBtnStd
-                v-for="(action, index) in col.actions"
-                :key="index"
+                v-for="(action, key) in col.actions"
+                :key="key"
                 :size="action.size"
                 :flat="action.flat"
                 :label="action.label"
@@ -447,7 +496,7 @@ const onRowPerPageChange = (value) => {
     </template>
     <!-- to add the custom loading state -->
     <!-- <template v-slot:loading>
-      <q-inner-loading showing color="primary" />
+      <q-inner-loading v-if="customLoading" showing color="primary" />
     </template> -->
   </UTable>
   <!-- customized pagination with the vitual scroll functionality and rows per page selection -->
@@ -463,6 +512,7 @@ const onRowPerPageChange = (value) => {
       :maxPages="Number(Math.ceil(rows.length / pagination.rowsPerPage))"
     />
   </div>
+  <q-inner-loading :showing="customLoading" class="custom-table-loader" />
 </template>
 
 <style lang="sass">
@@ -562,4 +612,8 @@ const onRowPerPageChange = (value) => {
 
 .pagination-wrapper
   margin-top: $ba
+
+.custom-table-loader
+  .q-spinner
+    color: $primary
 </style>