@usssa/component-library 1.0.0-alpha.132 → 1.0.0-alpha.133

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.132
+# Component Library v1.0.0-alpha.133
 
 **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.132",
+  "version": "1.0.0-alpha.133",
   "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,11 +1,10 @@
 <script setup>
 import { computed } from 'vue'
+import { useScreenType } from '../../composables/useScreenType'
 import URadioStd from './URadioStd.vue'
 
 const emit = defineEmits(['onClick', 'onButtonClick'])
-
 const model = defineModel()
-
 const props = defineProps({
   altText: {
     type: String,
@@ -46,6 +45,8 @@ const props = defineProps({
   },
 })
 
+const $screen = useScreenType()
+
 const activeClass = computed(() => {
   if (model.value === props.value) {
     return 'active'
@@ -53,6 +54,8 @@ const activeClass = computed(() => {
   return ''
 })
 
+const isMobile = computed(() => $screen.value.isMobile)
+
 const handleChange = () => {
   model.value = props.value
 }
@@ -60,33 +63,44 @@ const handleChange = () => {
 
 <template>
   <q-btn
-    :class="`u-radio-btn ${activeClass}`"
+    :class="`u-radio-btn ${activeClass}${isMobile ? ' full-width' : ''}`"
     :dataTestId="dataTestId"
     flat
     @click="handleChange"
   >
-    <div class="radio-btn-content flex items-center">
-      <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 class="radio-btn-content flex items-center justify-between full-width">
+      <div
+        class="flex items-center justify-center radio-btn-text-wrapper no-wrap"
+      >
+        <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>
       </div>
 
-      <img
-        v-if="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"
-      />
+      <div class="flex items-center">
+        <img
+          v-if="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"
+        />
+      </div>
     </div>
   </q-btn>
 </template>
@@ -123,4 +137,7 @@ const handleChange = () => {
 
   .q-radio .q-radio__inner
     color: $primary !important
+
+.radio-btn-text-wrapper
+  gap: $xs
 </style>