@usssa/component-library 1.0.0-alpha.123 → 1.0.0-alpha.124

package/README.md

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

package/src/components/core/UBtnIcon.vue

@@ -1,11 +1,12 @@
 <script setup>
 import { computed } from 'vue'
 import UTooltip from './UTooltip.vue'
+
+const emit = defineEmits(['onClick'])
 const props = defineProps({
-  iconClass: {
+  anchor: {
     type: String,
-    required: true,
-    default: 'fa-kit-duotone fa-circle-bolt',
+    default: 'center left',
   },
   ariaLabel: {
     type: String,
@@ -15,10 +16,27 @@ const props = defineProps({
     type: String,
     default: 'primary',
   },
+  dataTestId: {
+    type: String,
+    default: 'button-icon',
+  },
+  iconClass: {
+    type: String,
+    required: true,
+    default: 'fa-kit-duotone fa-circle-bolt',
+  },
+  offset: {
+    type: Array,
+    default: () => [4, 4],
+  },
   round: {
     type: Boolean,
     default: true,
   },
+  self: {
+    type: String,
+    default: 'center end',
+  },
   size: {
     type: String,
     default: 'md',
@@ -32,26 +50,20 @@ const props = defineProps({
     type: String,
     default: 'top',
   },
-  anchor: {
-    type: String,
-    default: 'center left',
-  },
-  self: {
-    type: String,
-    default: 'center end',
-  },
-  offset: {
-    type: Array,
-    default: () => [4, 4],
-  },
 })
 
-const emit = defineEmits(['onClick'])
-
-const handleClick = () => {
-  return emit('onClick')
-}
-
+const btnClass = computed(() => {
+  if (props.color === 'neutral') {
+    return 'neutral-4'
+  }
+  return props.color
+})
+const iconColor = computed(() => {
+  if (props.color === 'neutral') {
+    return 'neutral-9'
+  }
+  return props.color
+})
 const iconSize = computed(() => {
   if (props.size === 'sm') {
     return 'xs'
@@ -62,47 +74,37 @@ const iconSize = computed(() => {
   if (props.size === 'lg') {
     return 'md'
   }
-
   return props.size
 })
-const iconColor = computed(() => {
-  if (props.color === 'neutral') {
-    return 'neutral-9'
-  }
-  return props.color
-})
 
-const btnClass = computed(() => {
-  if (props.color === 'neutral') {
-    return 'neutral-4'
-  }
-  return props.color
-})
+const handleClick = () => {
+  return emit('onClick')
+}
 </script>
 
 <template>
   <q-btn
-    @click="handleClick"
+    :class="`u-btn-icon size-${size} ${btnClass}`"
+    :aria-label="ariaLabel"
+    :dataTestId="dataTestId"
     flat="flat"
     :round="round"
-    :aria-label="ariaLabel"
-    class="u-btn-icon"
-    :class="`size-${size} ${btnClass}`"
+    @click="handleClick"
   >
     <template #default>
       <q-icon
-        :color="iconColor"
-        :aria-hidden="true"
         :class="`${iconClass} size-${size}`"
+        :aria-hidden="true"
+        :color="iconColor"
         :size="iconSize"
       />
 
       <UTooltip
         v-if="tooltip"
-        :description="tooltip"
         :anchor="anchor"
-        :self="self"
+        :description="tooltip"
         :offset="offset"
+        :self="self"
       />
       <slot name="menu" />
     </template>

package/src/components/core/UDrawer.vue

@@ -17,21 +17,25 @@ const open = defineModel('open', {
   type: Boolean,
 })
 const props = defineProps({
-  menu: {
-    default: () => [],
-    type: Array,
-  },
   brandLogo: {
     default: '',
   },
   brandMiniLogo: {
     default: '',
   },
+  dataTestId:{
+    default:'drawer-std',
+    type: String
+  },
   homeLink: {
     required: true,
     default: '/home',
     type: String,
   },
+  menu: {
+    default: () => [],
+    type: Array,
+  }
 })
 
 const $router = useRouter()
@@ -64,6 +68,7 @@ const handleCloseDrawer = () => {
     v-model="open"
     :class="`u-drawer ${miniState ? 'u-mini-drawer' : ''}`"
     :breakpoint="400"
+    :dataTestId="dataTestId"
     :mini="miniState"
     :mini-width="64"
     show-if-above
@@ -183,7 +188,7 @@ const handleCloseDrawer = () => {
       outline: auto !important
       .q-focus-helper
         display: none
-       
+
 .u-drawer-scrollable-area
   height: calc(100% - 0px)
   margin-top: 0px

package/src/components/core/UTooltip.vue

@@ -1,23 +1,27 @@
 <script setup>
-import { computed, useSlots  } from 'vue'
+import { computed, useSlots } from 'vue'
 
 const props = defineProps({
-  icon: {
+  anchor: {
     type: String,
   },
-  description: {
+  dataTestId: {
     type: String,
-    required: true,
+    default: 'tooltip-std',
   },
-  anchor: {
+  description: {
     type: String,
+    required: true,
   },
-  self: {
+  icon: {
     type: String,
   },
   offset: {
     type: Array,
   },
+  self: {
+    type: String,
+  },
   target: {
     type: String,
     default: '',
@@ -40,17 +44,18 @@ const getTooltipText = computed(() => {
 
 <template>
   <q-tooltip
-    v-if="getTooltipText || slots.item"
     v-bind="$attrs"
+    v-if="getTooltipText || slots.item"
     class="u-tooltip shadow-2 bg-dark row"
     :anchor="anchor"
+    :dataTestId="dataTestId"
     :offset="offset"
     :self="self"
     :target="target"
   >
     <div class="row no-wrap tooltip-content">
       <div v-if="icon" class="flex items-center">
-        <q-icon :class="icon" size="1rem"></q-icon>
+        <q-icon :class="icon" size="1rem" />
       </div>
       <div class="text-body-xs tooltip-text">{{ getTooltipText }}</div>
       <slot name="item" />