@usssa/component-library 1.0.0-alpha.93 → 1.0.0-alpha.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.93",
+  "version": "1.0.0-alpha.94",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",

package/src/components/core/UDrawer.vue

@@ -6,6 +6,16 @@ import UBtnIcon from './UBtnIcon.vue'
 import UBtnStd from './UBtnStd.vue'
 import UMenuItem from './UMenuItem.vue'
 import UTooltip from './UTooltip.vue'
+
+const emit = defineEmits(['menuItemClicked', 'closeDrawer'])
+const miniState = defineModel('miniState', {
+  default: false,
+  type: Boolean,
+})
+const open = defineModel('open', {
+  default: false,
+  type: Boolean,
+})
 const props = defineProps({
   menu: {
     default: () => [],
@@ -23,32 +33,15 @@ const props = defineProps({
     type: String,
   },
 })
-const emit = defineEmits(['menuItemClicked', 'closeDrawer'])
-const open = defineModel('open', {
-  default: false,
-  type: Boolean,
-})
-const miniState = defineModel('miniState', {
-  default: false,
-  type: Boolean,
-})
 
 const $router = useRouter()
-const currentRoute = computed(() => $router.currentRoute.value.fullPath)
 const currentPath = computed(() => getCurrentPath())
+const currentRoute = computed(() => $router.currentRoute.value.fullPath)
 
 const getCurrentPath = (int = 1) => {
   return currentRoute.value.split('/')[int]
 }
 
-const handleClick = (menu) => {
-  emit('menuItemClicked', menu)
-}
-
-const handleCloseDrawer = () => {
-  emit('closeDrawer')
-}
-
 /**
  * returning x offset for tooltip for long text
  * @param {*} label
@@ -57,6 +50,14 @@ const getXOffset = (label) => {
   let labelLength = label.trim().length
   return labelLength <= 4 ? 65 : labelLength < 9 ? 85 : 145
 }
+
+const handleClick = (menu) => {
+  emit('menuItemClicked', menu)
+}
+
+const handleCloseDrawer = () => {
+  emit('closeDrawer')
+}
 </script>
 <template>
   <q-drawer
@@ -65,14 +66,14 @@ const getXOffset = (label) => {
     :breakpoint="400"
     :mini="miniState"
     :mini-width="64"
-    side="left"
     show-if-above
+    side="left"
     :width="224"
   >
     <q-scroll-area class="u-drawer-scrollable-area">
       <div
         :class="`flex items-center justify-${
-          miniState ? 'center q-py-sm' : 'between q-py-xs q-pl-ba q-pr-xxs'
+          miniState ? 'center q-py-xs' : 'between q-py-xs q-pl-ba q-pr-xxs'
         } `"
       >
         <UBtnStd
@@ -102,10 +103,10 @@ const getXOffset = (label) => {
           class="drawer-open-close-icon-wrapper flex items-center justify-center"
         >
           <UBtnIcon
+            iconClass="fa-kit-duotone fa-sidebar-shrink"
             ariaLabel="Sidebar shrink icon"
             color="primary"
             dense
-            iconClass="fa-kit-duotone fa-sidebar-shrink"
             ref="btn-icon"
             size="sm"
             @click="handleCloseDrawer"
@@ -132,7 +133,7 @@ const getXOffset = (label) => {
             @onClick="handleClick(m)"
           >
             <template v-if="!miniState" #trailing_slot>
-              <UBadgeStd v-if="m.badgeInfo" size="lg" :label="m.badgeInfo" />
+              <UBadgeStd v-if="m.badgeInfo" :label="m.badgeInfo" size="lg" />
               <q-icon
                 v-if="m.rightIcon"
                 :class="`${m.rightIcon} ${
@@ -146,12 +147,12 @@ const getXOffset = (label) => {
             </template>
           </UMenuItem>
           <UTooltip
-            :description="m.label"
             v-if="miniState"
-            :target="`#u-drawer-menu-${i}`"
             anchor="center right"
-            self="center right"
+            :description="m.label"
             :offset="[getXOffset(m.label), 20]"
+            self="center right"
+            :target="`#u-drawer-menu-${i}`"
           />
         </template>
       </q-list>

package/src/components/core/UMenuDropdown.vue

@@ -26,13 +26,13 @@ const props = defineProps({
   <q-list :class="`u-menu-dropdown size-${size} ${menuClass} q-gutter-y-xxs`">
     <template v-for="(item, index) in data" :key="index">
       <UMenuItem
+        :iconClass="iconClass"
+        :destructive="item.destructive"
+        :disable="item.disable"
+        :hide="item.hide"
         :label="item.label"
         :leftIcon="item.leftIcon"
         :rightIcon="item.rightIcon"
-        :destructive="item.destructive"
-        :iconClass="iconClass"
-        :hide="item.hide"
-        :disable="item.disable"
         @onClick="item.handler"
       >
         <template #leading_slot>

package/src/components/core/UMenuItem.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref, watch } from 'vue'
 
+const emit = defineEmits(['onClick'])
 const props = defineProps({
   leftIcon: {
     type: String,
@@ -32,8 +33,6 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['onClick'])
-
 const type = ref(props.destructive ? 'destructive' : 'default')
 
 /* Computed variables */
@@ -98,9 +97,9 @@ watch(
     <q-item-section v-if="rightIcon" side>
       <q-icon
         :class="`${rightIcon} ${iconClass}`"
+        :aria-hidden="true"
         :color="iconColor"
         size="1rem"
-        :aria-hidden="true"
       />
     </q-item-section>
     <slot name="trailing_slot"></slot>

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

@@ -1,4 +1,21 @@
 <script setup>
+const pagination = defineModel('pagination', {
+  default: { page: 1, rowsPerPage: 15 },
+  type: Object,
+})
+const loading = defineModel('loading', {
+  default: null,
+  type: Boolean,
+})
+const rows = defineModel('rows', {
+  default: () => [],
+  type: Array,
+})
+const columns = defineModel('columns', {
+  default: () => [],
+  type: Array,
+})
+
 const props = defineProps({
   title: {
     type: String,
@@ -37,38 +54,12 @@ const props = defineProps({
     default: true,
   },
 })
-
-const pagination = defineModel('pagination', {
-  default: { page: 1, rowsPerPage: 15 },
-  type: Object,
-})
-const loading = defineModel('loading', {
-  default: null,
-  type: Boolean,
-})
-const rows = defineModel('rows', {
-  default: () => [],
-  type: Array,
-})
-const columns = defineModel('columns', {
-  default: () => [],
-  type: Array,
-})
 </script>
 
 <template>
   <q-table
+    v-model:pagination="pagination"
     v-bind="$attrs"
-    :title="title"
-    :columns="columns"
-    :rows="rows"
-    :row-key="rowKey"
-    :flat="flat"
-    :bordered="bordered"
-    :separator="separator"
-    :loading="loading"
-    hide-pagination
-    :grid="grid"
     :class="`u-table ${virtualScroll ? 'u-virtualscroll-table' : ''} ${
       grid ? 'u-virtualscroll-grid-table' : ''
     } ${stickyHeader ? 'u-sticky-table-header' : ''} ${
@@ -76,9 +67,18 @@ const columns = defineModel('columns', {
         ? 'force-auto-height-table'
         : ''
     }`"
-    :virtual-scroll="!grid && virtualScroll"
-    v-model:pagination="pagination"
+    :bordered="bordered"
+    :columns="columns"
+    :flat="flat"
+    :grid="grid"
+    hide-pagination
+    :loading="loading"
+    :separator="separator"
+    :rows="rows"
+    :row-key="rowKey"
     :rows-per-page-options="[0]"
+    :title="title"
+    :virtual-scroll="!grid && virtualScroll"
     :virtual-scroll-item-size="48"
     :virtual-scroll-sticky-size-start="48"
   >

package/src/components/core/UTableStd.vue

@@ -12,6 +12,27 @@ import UTd from './UTable/UTd.vue'
 import UTh from './UTable/UTh.vue'
 import UTr from './UTable/UTr.vue'
 
+const emit = defineEmits(['onCustomSort'])
+const selectedRows = defineModel('selectedRows', {
+  default: () => [],
+  type: Array,
+})
+const rows = defineModel('rows', {
+  default: () => [],
+  type: Array,
+})
+const columns = defineModel('columns', {
+  default: () => [],
+  type: Array,
+})
+const pagination = defineModel('pagination', {
+  default: { page: 1, rowsPerPage: 15 },
+  type: Object,
+})
+const loading = defineModel('loading', {
+  default: () => {},
+  type: Boolean,
+})
 const props = defineProps({
   title: {
     type: String,
@@ -67,29 +88,6 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['onCustomSort'])
-
-const selectedRows = defineModel('selectedRows', {
-  default: () => [],
-  type: Array,
-})
-const rows = defineModel('rows', {
-  default: () => [],
-  type: Array,
-})
-const columns = defineModel('columns', {
-  default: () => [],
-  type: Array,
-})
-const pagination = defineModel('pagination', {
-  default: { page: 1, rowsPerPage: 15 },
-  type: Object,
-})
-const loading = defineModel('loading', {
-  default: () => {},
-  type: Boolean,
-})
-
 const customLoading = ref(false)
 const rowsPerPageOptions = ref([
   { label: '5 / per page', value: 5 },
@@ -99,9 +97,6 @@ const rowsPerPageOptions = ref([
   { label: '25 / per page', value: 25 },
 ])
 const tableDataChip = ref(true) // this is required to show chip
-const openMenu = ref([])
-const hoveringButton = ref({})
-const hoveringMenu = ref({})
 
 // if virtual scroll is enbaled then adding large rows per page to view in virtual scroll
 const getRowsPerPageOptions = computed(() => {
@@ -273,61 +268,39 @@ const handleMenuEventStop = (e) => {
   e.preventDefault()
   e.stopPropagation()
 }
-
-const handleMouseEnter = (type, index) => {
-  if (type === 'button') {
-    hoveringButton.value[index] = true
-  } else {
-    hoveringMenu.value[index] = true
-  }
-  openMenu.value[index] = true
-}
-
-const handleMouseLeave = (type, index) => {
-  if (type === 'button') {
-    hoveringButton.value[index] = false
-  } else {
-    hoveringMenu.value[index] = false
-  }
-  setTimeout(() => {
-    if (!hoveringButton.value[index] && !hoveringMenu.value[index]) {
-      openMenu.value[index] = false
-    }
-  }, 100)
-}
 </script>
 
 <template>
   <UTable
-    :title="title"
-    v-model:rows="rows"
     v-model:columns="columns"
-    :separator="separator"
-    :loading="loading"
-    :flat="flat"
-    :bordered="bordered"
     v-model:pagination="pagination"
-    :grid="grid"
-    :virtualScroll="virtualScroll"
-    :stickyHeader="stickyHeader"
+    v-model:rows="rows"
     :class="customClass"
+    :bordered="bordered"
+    :flat="flat"
+    :grid="grid"
+    :loading="loading"
+    :separator="separator"
     :showPagination="showPagination"
+    :stickyHeader="stickyHeader"
+    :title="title"
+    :virtualScroll="virtualScroll"
   >
     <!-- custom header slot to add customized header -->
     <template v-slot:header="props">
       <UTr :props="props" :tableRowHover="tableRowHover">
         <UTh
           v-if="multiSelection"
+          :separator="separator"
           style="width: 3% !important"
           :tableHeaderAutoWidth="false"
           tableHeadAlignment="left"
-          :separator="separator"
         >
           <UCheckboxStd
-            :id="`u-checkbox-table-header`"
             v-model="isRowSelected(null).value"
-            name="Table Header"
+            id="u-checkbox-table-header"
             :indeterminate="true"
+            name="Table Header"
           />
         </UTh>
         <template v-for="(col, key) in props.cols">
@@ -337,6 +310,8 @@ const handleMouseLeave = (type, index) => {
               col.headerClasses
             }`"
             :key="key"
+            :separator="separator"
+            :style="col.headerStyle"
             :tableHeaderAutoWidth="col.autoWidth"
             :tableHeadAlignment="col.field === 'action' ? col.align : col.align"
             @click="
@@ -346,8 +321,6 @@ const handleMouseLeave = (type, index) => {
                   : handleSort(col.field, col.sortOrder, col.type)
                 : null
             "
-            :separator="separator"
-            :style="col.headerStyle"
           >
             <span
               :class="`${col.field === 'action' ? 'hidden-header-label' : ''}`"
@@ -359,8 +332,8 @@ const handleMouseLeave = (type, index) => {
               <UBtnIcon
                 :class="`more-action-icon cursor-pointer`"
                 :iconClass="`${getSortingIcon(col)}`"
-                ref="btn-icon"
                 :aria-label="`Sort ${col.label}`"
+                ref="btn-icon"
                 size="sm"
               />
             </span>
@@ -379,16 +352,17 @@ const handleMouseLeave = (type, index) => {
         <UTd
           v-if="multiSelection"
           :index="-1"
+          :separator="separator"
           tableDataAlignment="left"
           :tableHeaderAutoWidth="false"
-          :separator="separator"
         >
           <UCheckboxStd
-            :id="`u-checkbox-${props.row._id}`"
             v-model="isRowSelected(props.row).value"
+            :id="`u-checkbox-${props.row._id}`"
             :name="props.row._id"
           />
         </UTd>
+
         <template v-for="(col, index) in props.cols" :key="index">
           <!-- to show the cell data without the action cell -->
           <UTd
@@ -396,28 +370,28 @@ const handleMouseLeave = (type, index) => {
               col.field !== 'action' &&
               (typeof col.show === 'undefined' || col.show)
             "
-            :row="props.row"
+            :class="col.classes"
             :col="col"
             :index="index"
-            :tableDataAlignment="col.align"
-            :tableDataAutoWidth="col.autoWidth"
+            :row="props.row"
             :separator="separator"
             :style="col.style"
-            :class="col.classes"
+            :tableDataAlignment="col.align"
+            :tableDataAutoWidth="col.autoWidth"
           >
             <!-- to show the chips with different variant -->
             <template v-if="col.chipValues && col.chipValues.length > 0">
               <UChip
                 v-model="tableDataChip"
-                :type="getChipColor(col.chipValues, props.row[col.field])"
+                class="u-table-chip"
                 avatarLabel=""
+                :anchor="col.anchor"
                 :chipLabel="props.row[col.field].toString()"
-                :removable="false"
-                class="u-table-chip"
+                :dense="col.denseChip"
                 :is-show-tooltip="col.showChipTooltip"
                 :offset="col.offset"
-                :anchor="col.anchor"
-                :dense="col.denseChip"
+                :removable="false"
+                :type="getChipColor(col.chipValues, props.row[col.field])"
               />
             </template>
             <!-- to show the avatar of user image with name and other details -->
@@ -432,29 +406,29 @@ const handleMouseLeave = (type, index) => {
                 >
                   <UAvatar
                     v-if="props.row[col.avatarKey]?.type === 'initials'"
-                    size="md"
                     :name="`${props.row[col.avatarKey]?.value}`"
+                    size="md"
                   />
                   <UAvatar
                     v-else-if="props.row[col.avatarKey]?.type === 'image'"
-                    size="md"
+                    :image="`${props.row[col.avatarKey]?.value}`"
                     :name="
                       props.row[col.avatarKey]?.name ??
                       props.row[col.avatarKey]?.value
                     "
-                    :image="`${props.row[col.avatarKey]?.value}`"
+                    size="md"
                   />
                 </div>
                 <div v-else class="table-data-avatar">
                   <UAvatar
-                    size="md"
-                    :name="`${props.row[col.avatarKey]}`"
                     :image="`${props.row[col.avatarKey]}`"
+                    :name="`${props.row[col.avatarKey]}`"
+                    size="md"
                   />
                 </div>
                 <div class="td-grid-content">
                   <div>{{ props.row[col.field] }}</div>
-                  <div class="td-caption text-body-xs" v-if="col.captionKey">
+                  <div v-if="col.captionKey" class="td-caption text-body-xs">
                     {{ props.row[col.captionKey] }}
                   </div>
                 </div>
@@ -478,8 +452,8 @@ const handleMouseLeave = (type, index) => {
                   </template>
                 </div>
                 <div
-                  class="td-caption text-body-xs"
                   v-if="col.captionKey && col.type !== 'icon'"
+                  class="td-caption text-body-xs"
                 >
                   {{ props.row[col.captionKey] }}
                 </div>
@@ -492,11 +466,11 @@ const handleMouseLeave = (type, index) => {
             v-else-if="typeof col.show === 'undefined' || col.show"
             :class="col.classes"
             :index="index"
-            :tableDataAlignment="col.align"
-            :tableDataAutoWidth="false"
-            style="width: 3%"
             :separator="separator"
             :style="col.style"
+            style="width: 3%"
+            :tableDataAlignment="col.align"
+            :tableDataAutoWidth="false"
           >
             <template v-if="col.actions && col.actions.length === 1">
               <template v-for="(action, key) in col.actions" :key="key">
@@ -506,16 +480,16 @@ const handleMouseLeave = (type, index) => {
                       ? !action.hide(props.row)
                       : true
                   "
-                  :key="key"
-                  :label="action.label"
-                  :flat="action.flat"
-                  :outline="action.outline"
-                  :leftIcon="action.icon"
                   :color="action.color"
                   :disable="
                     typeof action.disable === 'function' &&
                     action.disable(props.row)
                   "
+                  :flat="action.flat"
+                  :key="key"
+                  :label="action.label"
+                  :leftIcon="action.icon"
+                  :outline="action.outline"
                   :size="action.size"
                   @onClick="action.handler(props.row)"
                 />
@@ -524,30 +498,16 @@ const handleMouseLeave = (type, index) => {
             <!-- to show the actions list if the actions are multiple -->
             <template v-else>
               <UBtnIcon
-                :key="index"
                 :class="`action-icon cursor-pointer`"
                 iconClass="fa-kit fa-ellipsis-vertical"
-                ref="btn-icon"
                 ariaLabel="More action"
-                @focus="handleMouseEnter('button', props.row.id)"
-                @mouseover="handleMouseEnter('button', props.row.id)"
-                @mouseleave="handleMouseLeave('button', props.row.id)"
-                @blur="handleMouseLeave('button', props.row.id)"
+                :id="`more-action-list-button-${props.row.id}`"
+                :key="index"
+                ref="btn-icon"
                 @click.stop="handleMenuEventStop"
               >
                 <template #menu>
-                  <q-menu
-                    v-if="!verticalMoreActions"
-                    v-model="openMenu[props.row.id]"
-                    role="list"
-                    no-focus
-                    no-refocus
-                    persistent
-                    @focus="handleMouseEnter('button', props.row.id)"
-                    @mouseleave="handleMouseLeave('menu', props.row.id)"
-                    @mouseover="handleMouseEnter('menu', props.row.id)"
-                    @blur="handleMouseLeave('button', props.row.id)"
-                  >
+                  <q-menu v-if="!verticalMoreActions" auto-close role="list">
                     <div
                       :class="`${
                         verticalMoreActions ? 'vertical' : 'horizontal'
@@ -560,37 +520,25 @@ const handleMouseLeave = (type, index) => {
                               ? !action.hide(props.row)
                               : true && !verticalMoreActions
                           "
-                          :id="`more-action-${key}`"
-                          :class="`more-action-icon cursor-pointer`"
+                          :class="`more-action-icon cursor-pointer table-more-action`"
                           :iconClass="action.icon"
-                          ref="btn-icon"
                           :ariaLabel="action.label"
                           :disable="
                             typeof action.disable === 'function' &&
                             action.disable(props.row)
                           "
+                          :id="`more-action-${key}`"
+                          ref="btn-icon"
                           :size="action.size"
                           :tooltip="action.tooltip"
-                          @onClick="action.handler(props.row)"
                           @click.stop="handleMenuEventStop"
-                          @focus="handleMouseEnter('button', props.row.id)"
+                          @onClick="action.handler(props.row)"
                         />
                       </template>
                     </div>
                   </q-menu>
 
-                  <q-menu
-                    v-else
-                    v-model="openMenu[props.row.id]"
-                    role="list"
-                    no-focus
-                    no-refocus
-                    persistent
-                    @focus="handleMouseEnter('button', props.row.id)"
-                    @mouseleave="handleMouseLeave('menu', props.row.id)"
-                    @mouseover="handleMouseEnter('menu', props.row.id)"
-                    @blur="handleMouseLeave('button', props.row.id)"
-                  >
+                  <q-menu v-else auto-close role="list">
                     <UMenuDropdown
                       v-if="verticalMoreActions"
                       :data="
@@ -639,12 +587,12 @@ const handleMouseLeave = (type, index) => {
     <UPagination
       v-if="rows.length >= 6"
       v-model="pagination.page"
-      :rowPerPage="pagination.rowsPerPage"
-      :perPageOptions="getRowsPerPageOptions"
       :maxPageLink="
         Number(Math.ceil(rows.length / pagination.rowsPerPage > 10 ? 6 : 3))
       "
       :maxPages="Number(Math.ceil(rows.length / pagination.rowsPerPage))"
+      :perPageOptions="getRowsPerPageOptions"
+      :rowPerPage="pagination.rowsPerPage"
       @onPageChange="onPageChange"
       @onRowChange="onRowPerPageChange"
     />
@@ -665,7 +613,6 @@ const handleMouseLeave = (type, index) => {
     &:hover
       color: $primary !important
 
-
 .table-data-avatar
   padding: $xs
   padding-left: 0px
@@ -682,7 +629,6 @@ const handleMouseLeave = (type, index) => {
   background: $surface-bg-1
   box-shadow: 0px 0px 4px 0px rgba(16, 17, 20, 0.08)
 
-
 .vertical-more-action-wrapper
   display: grid
   place-items: flex-start

package/src/css/quasar.variables.sass

@@ -99,7 +99,7 @@ $xxl  : $space-base * 3.375 !default
 $space-none : (x: 0, y: 0) !default
 $space-xxs   : (x: ($space-x-base * .25), y: ($space-y-base * .25)) !default
 $space-xs   : (x: ($space-x-base * .5), y: ($space-y-base * .5)) !default
-$space-sm   : (x: ($space-x-base * .75), y: ($space-y-base * .5)) !default
+$space-sm   : (x: ($space-x-base * .75), y: ($space-y-base * .75)) !default
 $space-ms   : (x: ($space-x-base * 1.5), y: ($space-y-base * 1.5)) !default
 $space-ba : (x: ($space-x-base * 1), y: ($space-y-base * 1)) !default
 $space-md   : (x: $space-x-base * 2, y: $space-y-base * 2) !default