@usssa/component-library 1.0.0-alpha.97 → 1.0.0-alpha.98

package/package.json

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

package/src/components/core/UMenuDropdown.vue

@@ -8,17 +8,17 @@ const props = defineProps({
   iconClass: {
     type: String,
   },
-  size: {
-    type: String,
-    default: 'md',
-    validator: (val) => ['sm', 'md', 'lg'].includes(val),
-  },
   menuClass: {
     type: String,
   },
   selected: {
     type: Boolean,
   },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['sm', 'md', 'lg'].includes(val),
+  },
 })
 </script>
 
@@ -30,6 +30,7 @@ const props = defineProps({
         :destructive="item.destructive"
         :disable="item.disable"
         :hide="item.hide"
+        :index="index"
         :label="item.label"
         :leftIcon="item.leftIcon"
         :rightIcon="item.rightIcon"

package/src/components/core/UMenuItem.vue

@@ -3,47 +3,46 @@ import { computed, ref, watch } from 'vue'
 
 const emit = defineEmits(['onClick'])
 const props = defineProps({
-  leftIcon: {
-    type: String,
-  },
-  rightIcon: {
-    type: String,
-  },
-  label: {
-    type: String,
-  },
-  selected: {
+  destructive: {
     type: Boolean,
     default: false,
   },
-  destructive: {
+  disable: {
+    default: false,
     type: Boolean,
+  },
+  hide: {
     default: false,
+    type: Boolean,
   },
   iconClass: {
     type: String,
   },
-  hide: {
-    default: false,
-    type: Boolean,
+  label: {
+    type: String,
   },
-  disable: {
-    default: false,
+  leftIcon: {
+    type: String,
+  },
+  rightIcon: {
+    type: String,
+  },
+  selected: {
     type: Boolean,
+    default: false,
   },
 })
 
 const type = ref(props.destructive ? 'destructive' : 'default')
 
 /* Computed variables */
-const labelColor = computed(() => {
-  if (props.destructive) {
-    return 'text-accent'
-  } else if (props.selected) {
-    return 'text-primary'
+const backgroundColor = computed(() => {
+  if (props.selected && !props.destructive) {
+    return 'bg-blue-1'
   }
-  return 'text-dark'
+  return 'bg-neutral-1'
 })
+
 const iconColor = computed(() => {
   if (props.destructive) {
     return 'accent'
@@ -52,11 +51,14 @@ const iconColor = computed(() => {
   }
   return 'dark'
 })
-const backgroundColor = computed(() => {
-  if (props.selected && !props.destructive) {
-    return 'bg-blue-1'
+
+const labelColor = computed(() => {
+  if (props.destructive) {
+    return 'text-accent'
+  } else if (props.selected) {
+    return 'text-primary'
   }
-  return 'bg-neutral-1'
+  return 'text-dark'
 })
 
 const handleClick = () => {

package/src/components/core/UTableStd.vue

@@ -11,24 +11,13 @@ import UTable from './UTable/UTable.vue'
 import UTd from './UTable/UTd.vue'
 import UTh from './UTable/UTh.vue'
 import UTr from './UTable/UTr.vue'
+import UTooltip from './UTooltip.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,
@@ -37,58 +26,71 @@ const moreActionDialogData = defineModel('moreActionDialogData', {
   type: Object,
   default: null,
 })
+const pagination = defineModel('pagination', {
+  default: { page: 1, rowsPerPage: 15 },
+  type: Object,
+})
+const rows = defineModel('rows', {
+  default: () => [],
+  type: Array,
+})
+const selectedRows = defineModel('selectedRows', {
+  default: () => [],
+  type: Array,
+})
+
 const props = defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  tableRowHover: {
+  bordered: {
     type: Boolean,
     default: false,
   },
-  separator: {
+  customClass: {
     type: String,
-    default: 'horizontal',
-  },
-  multiSelection: {
-    type: Boolean,
-    default: false,
+    default: '',
   },
   flat: {
     type: Boolean,
     default: false,
   },
-  bordered: {
+  grid: {
     type: Boolean,
     default: false,
   },
-  grid: {
+  isCustomSort: {
     type: Boolean,
     default: false,
   },
-  virtualScroll: {
+  multiSelection: {
     type: Boolean,
     default: false,
   },
-  verticalMoreActions: {
+  separator: {
+    type: String,
+    default: 'horizontal',
+  },
+  showPagination: {
     type: Boolean,
-    default: false,
+    default: true,
   },
   stickyHeader: {
     type: Boolean,
     default: false,
   },
-  isCustomSort: {
+  tableRowHover: {
     type: Boolean,
     default: false,
   },
-  customClass: {
+  title: {
     type: String,
     default: '',
   },
-  showPagination: {
+  verticalMoreActions: {
     type: Boolean,
-    default: true,
+    default: false,
+  },
+  virtualScroll: {
+    type: Boolean,
+    default: false,
   },
 })
 
@@ -150,6 +152,16 @@ const dataSort = (data, key, order, type) => {
   }
 }
 
+//getting the chip color accroding to value of chip from row
+const getChipColor = (data, value) => {
+  const foundObject = data.find((chip) => chip.value === value)
+  if (foundObject) {
+    return foundObject['color']
+  } else {
+    return 'neutral-3'
+  }
+}
+
 //getting the sorted icon according the order
 const getSortingIcon = (col) => {
   if (col) {
@@ -161,16 +173,6 @@ const getSortingIcon = (col) => {
   }
 }
 
-//getting the chip color accroding to value of chip from row
-const getChipColor = (data, value) => {
-  const foundObject = data.find((chip) => chip.value === value)
-  if (foundObject) {
-    return foundObject['color']
-  } else {
-    return 'neutral-3'
-  }
-}
-
 const handleActionColClick = (e) => {
   e.preventDefault()
   e.stopPropagation()
@@ -509,19 +511,57 @@ const onRowPerPageChange = (value) => {
                       ? !action.hide(props.row)
                       : true
                   "
-                  :color="action.color"
+                  :color="
+                    typeof action.color === 'function'
+                      ? action.color(props.row)
+                      : action.color
+                  "
                   :disable="
                     typeof action.disable === 'function' &&
                     action.disable(props.row)
                   "
-                  :flat="action.flat"
+                  :flat="
+                    typeof action.flat === 'function'
+                      ? action.flat(props.row)
+                      : action.flat
+                  "
                   :key="key"
-                  :label="action.label"
-                  :leftIcon="action.icon"
-                  :outline="action.outline"
+                  :label="
+                    typeof action.label === 'function'
+                      ? action.label(props.row)
+                      : action.label
+                  "
+                  :leftIcon="
+                    typeof action.icon === 'function'
+                      ? action.icon(props.row)
+                      : action.icon
+                  "
+                  :outline="
+                    typeof action.outline === 'function'
+                      ? action.outline(props.row)
+                      : action.outline
+                  "
                   :size="action.size"
                   @onClick="action.handler(props.row)"
-                />
+                >
+                  <template #tooltip>
+                    <UTooltip
+                      v-if="
+                        typeof action.tooltip === 'function'
+                          ? action.tooltip(props.row)
+                          : action.tooltip
+                      "
+                      :anchor="action.anchor"
+                      :description="
+                        typeof action.tooltip === 'function'
+                          ? action.tooltip(props.row)
+                          : action.tooltip
+                      "
+                      :offset="action.offset ? action.offset : [10, 40]"
+                      :self="action.anchor"
+                    />
+                  </template>
+                </UBtnStd>
               </template>
             </template>
             <!-- to show the actions list if the actions are multiple -->
@@ -591,6 +631,7 @@ const onRowPerPageChange = (value) => {
                       :disable="moreActionDialogData.secondaryAction.disable"
                       :flat="moreActionDialogData.secondaryAction.flat"
                       :label="moreActionDialogData.secondaryAction.label"
+                      :loading="moreActionDialogData.secondaryAction.loading"
                       :outline="moreActionDialogData.secondaryAction.outline"
                       :size="moreActionDialogData.secondaryAction.size"
                       @on-click="
@@ -604,6 +645,7 @@ const onRowPerPageChange = (value) => {
                       :disable="moreActionDialogData.primaryAction.disable"
                       :flat="moreActionDialogData.primaryAction.flat"
                       :label="moreActionDialogData.primaryAction.label"
+                      :loading="moreActionDialogData.primaryAction.loading"
                       :outline="moreActionDialogData.primaryAction.outline"
                       :size="moreActionDialogData.primaryAction.size"
                       @on-click="
@@ -638,16 +680,31 @@ const onRowPerPageChange = (value) => {
                               : true && !verticalMoreActions
                           "
                           :class="`more-action-icon cursor-pointer table-more-action`"
-                          :iconClass="action.icon"
-                          :ariaLabel="action.label"
+                          :iconClass="
+                            typeof action.icon === 'function'
+                              ? action.icon(props.row)
+                              : action.icon
+                          "
+                          :anchor="action.anchor"
+                          :ariaLabel="
+                            typeof action.label === 'function'
+                              ? action.label(props.row)
+                              : action.label
+                          "
                           :disable="
                             typeof action.disable === 'function' &&
                             action.disable(props.row)
                           "
                           :id="`more-action-${key}`"
+                          :offset="action.offset ? action.offset : [10, 40]"
                           ref="btn-icon"
+                          :self="action.self"
                           :size="action.size"
-                          :tooltip="action.tooltip"
+                          :tooltip="
+                            typeof action.tooltip === 'function'
+                              ? action.tooltip(props.row)
+                              : action.tooltip
+                          "
                           @click.stop="handleMenuEventStop"
                           @onClick="action.handler(props.row)"
                         />
@@ -661,15 +718,21 @@ const onRowPerPageChange = (value) => {
                       :data="
                         col.actions.map((action) => {
                           return {
-                            label: action.label,
-                            leftIcon: action.icon,
-                            hide: !(typeof action.hide === 'function'
-                              ? !action.hide(props.row)
-                              : true),
+                            destructive: action.destructive,
                             disable:
                               typeof action.disable === 'function' &&
                               action.disable(props.row),
-                            destructive: action.destructive,
+                            hide: !(typeof action.hide === 'function'
+                              ? !action.hide(props.row)
+                              : true),
+                            label:
+                              typeof action.label === 'function'
+                                ? action.label(props.row)
+                                : action.label,
+                            leftIcon:
+                              typeof action.icon === 'function'
+                                ? action.icon(props.row)
+                                : action.icon,
                             handler: function () {
                               return action.handler(props.row)
                             },