@usssa/component-library 1.0.0-alpha.113 → 1.0.0-alpha.114

package/package.json

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

package/src/components/core/UBtnStd.vue

@@ -1,11 +1,17 @@
 <script setup>
 import { computed } from 'vue'
 
+const emit = defineEmits(['onClick'])
+
 const props = defineProps({
   color: {
     type: String,
     default: 'neutral-7',
   },
+  dataTestId: {
+    type: String,
+    default: 'button-std'
+  },
   disable: {
     type: Boolean,
     default: false,
@@ -14,6 +20,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  fullWidth: {
+    type: Boolean,
+    default: false,
+  },
   label: {
     type: String,
     default: 'Button',
@@ -21,26 +31,20 @@ const props = defineProps({
   leftIcon: {
     type: String,
   },
-  rightIcon: {
-    type: String,
-  },
   outline: {
     type: Boolean,
     default: false,
   },
+  rightIcon: {
+    type: String,
+  },
   size: {
     type: String,
     default: 'md',
     validator: (val) => ['sm', 'md', 'lg'].includes(val),
   },
-  fullWidth: {
-    type: Boolean,
-    default: false,
-  },
 })
 
-const emit = defineEmits(['onClick'])
-
 const handleClick = () => {
   return emit('onClick')
 }
@@ -65,11 +69,12 @@ const isFullWidth = computed(() => {
     class="u-btn q-py-none"
     :class="`size-${size} ${textClass} focus-${color} ${isFullWidth}`"
     :color="color"
+    :dataTestId="dataTestId"
     :disable="disable"
+    :flat="flat"
+    no-caps
     :unelevated="!outline"
     :outline="outline"
-    no-caps
-    :flat="flat"
     @click="handleClick"
   >
     <template #default>
@@ -77,9 +82,9 @@ const isFullWidth = computed(() => {
         <div class="row items-center no-wrap">
           <q-icon
             v-if="leftIcon"
-            left
             :class="leftIcon"
             class="q-mr-xs"
+            left
             size="1rem"
           />
 
@@ -88,9 +93,9 @@ const isFullWidth = computed(() => {
           </div>
           <q-icon
             v-if="rightIcon"
-            right
             :class="rightIcon"
             class="q-ml-xs"
+            right
             size="1rem"
           />
         </div>

package/src/components/core/UBtnToggle.vue

@@ -1,5 +1,9 @@
 <script setup>
 const props = defineProps({
+  dataTestId: {
+    type: String,
+    default: 'toggle-btn',
+  },
   options: {
     type: Array,
     require: true,
@@ -10,16 +14,17 @@ const model = defineModel()
 
 <template>
   <q-btn-toggle
-    class="u-btn-toggle"
     v-model="model"
-    size="md"
-    text-color="dark"
-    unelevated
+    class="u-btn-toggle"
     color="white"
+    :dataTestId="dataTestId"
     no-caps
+    :options="options"
+    size="md"
     spread
+    text-color="dark"
     toggle-color="primary"
-    :options="options"
+    unelevated
   >
     <template
       v-for="(option, index) in options"
@@ -28,8 +33,8 @@ const model = defineModel()
     >
       <div class="row items-center no-wrap slot">
         <q-icon
-          :class="options[index].iconClass"
           v-if="options[index].iconClass"
+          :class="options[index].iconClass"
         />
         <div class="text-center text-caption-md">
           {{ options[index].name }}