@usssa/component-library 1.0.0-alpha.118 → 1.0.0-alpha.119

package/package.json

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

package/src/components/core/URadioBtn.vue

@@ -1,23 +1,33 @@
 <script setup>
 import { computed } from 'vue'
 import URadioStd from './URadioStd.vue'
+
+const emit = defineEmits(['onClick', 'onButtonClick'])
+
+const model = defineModel()
+
 const props = defineProps({
-  iconClass: {
+  altText: {
     type: String,
     default: '',
   },
-  label: {
+  dataTestId: {
     type: String,
-    default: '',
+    default: 'radio-btn-std',
   },
   description: {
     type: String,
     default: '',
   },
-  value: {
+  iconClass: {
     type: String,
     default: '',
   },
+  iconColor: {
+    type: String,
+    default: 'primary',
+  },
+  id: { String },
   image: {
     type: String,
     default: '',
@@ -26,56 +36,56 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  altText: {
+  label: {
     type: String,
     default: '',
   },
-  iconColor: {
+  value: {
     type: String,
-    default: 'primary',
+    default: '',
   },
-
-  id: { String },
 })
 
-const emit = defineEmits(['onClick', 'onButtonClick'])
-const model = defineModel()
-
-const handleChange = () => {
-  model.value = props.value
-}
-
 const activeClass = computed(() => {
   if (model.value === props.value) {
     return 'active'
   }
   return ''
 })
+
+const handleChange = () => {
+  model.value = props.value
+}
 </script>
 
 <template>
-  <q-btn flat class="u-radio-btn" @click="handleChange" :class="activeClass">
+  <q-btn
+    :class="`u-radio-btn ${activeClass}`"
+    :dataTestId="dataTestId"
+    flat
+    @click="handleChange"
+  >
     <div class="radio-btn-content flex items-center">
-      <URadioStd v-model="model" :value="value" :id="id" :aria-label="label" />
+      <URadioStd v-model="model" :aria-label="label" :id="id" :value="value" />
       <div class="button-text">
         <div class="text-caption-lg">{{ label }}</div>
         <div class="description-text text-body-sm">{{ description }}</div>
       </div>
 
       <img
-        class="radio-btn-img"
         v-if="image"
-        size="1.5rem"
-        :src="image"
+        class="radio-btn-img"
         :alt="altText"
         :aria-label="imgAriaLabel"
+        size="1.5rem"
+        :src="image"
       />
       <q-icon
         v-if="iconClass"
+        :class="iconClass"
         :aria-label="imgAriaLabel"
         :color="iconColor"
         size="1.5rem"
-        :class="iconClass"
       />
     </div>
   </q-btn>

package/src/components/core/URadioStd.vue

@@ -1,15 +1,15 @@
 <script setup>
 import { onMounted } from 'vue'
 
+const radioValue = defineModel()
+
 const props = defineProps({
-  label: {
-    type: String,
-  },
   ariaLabel: {
     type: String,
   },
-  value: {
+  dataTestId: {
     type: String,
+    default: 'radio-std',
   },
   disable: {
     type: Boolean,
@@ -20,34 +20,41 @@ const props = defineProps({
     default: 'u-radio',
     required: true, // it is required for to match accessibility crieteria
   },
+  label: {
+    type: String,
+  },
+  value: {
+    type: String,
+  },
 })
 onMounted(() => {
   const radioElement = document.getElementById(props.id)
   if (radioElement) {
     const inputElement = radioElement.querySelector('input')
-    inputElement.id = props.id
+    if (inputElement) {
+      inputElement.id = props.id
+    }
   }
 })
-
-const radioValue = defineModel()
 </script>
 
 <template>
-  <label class="hidden" :for="id" v-if="label || ariaLabel">{{
+  <label v-if="label || ariaLabel" class="hidden" :for="id">{{
     label || ariaLabel
   }}</label>
   <q-radio
     v-model="radioValue"
     class="u-radio"
-    :val="value"
     color="primary"
-    keep-color
+    :dataTestId="dataTestId"
     dense
-    size="3rem"
     :disable="disable"
     :id="id"
+    keep-color
+    size="3rem"
+    :val="value"
   >
-    <div class="text-center text-caption-lg radio-label" v-if="label">
+    <div v-if="label" class="text-center text-caption-lg radio-label">
       {{ label }}
     </div>
   </q-radio>