@usssa/component-library 1.0.0-alpha.125 → 1.0.0-alpha.127

package/README.md

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

package/src/components/core/UBannerStd.vue

@@ -1,11 +1,12 @@
 <script setup>
 import { computed } from 'vue'
 import UBtnStd from './UBtnStd.vue'
+import { useScreenType } from '../../composables/useScreenType'
 
 const emit = defineEmits(['primaryAction', 'secondaryAction'])
 
 const props = defineProps({
-  dataTestId:{
+  dataTestId: {
     type: String,
     default: 'banner-std',
   },
@@ -13,6 +14,10 @@ const props = defineProps({
     type: String,
     default: 'fa-kit-duotone fa-circle-info',
   },
+  label: {
+    type: String,
+    default: '',
+  },
   message: {
     type: String,
     default: '',
@@ -31,7 +36,7 @@ const props = defineProps({
   },
   showBorder: {
     type: Boolean,
-    default: true
+    default: true,
   },
   type: {
     type: String,
@@ -39,6 +44,8 @@ const props = defineProps({
   },
 })
 
+const $screen = useScreenType()
+
 const bordered = computed(() => {
   if (props.showBorder) {
     return 'bordered'
@@ -57,10 +64,13 @@ const handleSecondaryActionClick = () => {
 
 <template>
   <q-banner
-    v-if="show && message"
-    :class="`u-banner u-banner-${type} ${
-      !icon ? 'no-padding-label' : ''
-    } ${bordered}`"
+    v-if="show && (message.trim() || label.trim())"
+    :class="[
+      `u-banner u-banner-${type}`,
+      !icon ? 'no-padding-label' : '',
+      bordered,
+      $screen.isMobile ? 'u-banner-sm' : 'u-banner-md',
+    ]"
     :dataTestId="dataTestId"
     inline-actions
     tabindex="0"
@@ -72,41 +82,68 @@ const handleSecondaryActionClick = () => {
         alt="Banner Info Icon"
         aria-label="Banner Icon"
         :color="type"
-        size="1.5rem"
+        size="sm"
       />
     </template>
-    <span class="text-caption-lg">{{ message }}</span>
+
+    <div>
+      <span v-if="!label" class="text-caption-lg">{{ message }}</span>
+      <div v-else class="column">
+        <span class="text-caption-lg">{{ label }}</span>
+        <span class="text-body-sm">{{ message }}</span>
+      </div>
+    </div>
+
     <template v-slot:action>
-      <u-btn-std
-        v-if="primaryActionLabel"
-        :color="type"
-        :flat="false"
-        :label="primaryActionLabel"
-        size="md"
-        @onClick="handlePrimaryActionClick"
-      />
-      <u-btn-std
-        v-if="secondaryActionLabel"
-        class="q-ml-sm"
-        :color="type"
-        :label="secondaryActionLabel"
-        :outline="true"
-        size="md"
-        @onClick="handleSecondaryActionClick"
-      />
+      <div :class="['row', $screen.isMobile ? 'full-width q-mt-ba' : '']">
+        <u-btn-std
+          v-if="primaryActionLabel"
+          :color="type"
+          :label="primaryActionLabel"
+          :outline="true"
+          size="md"
+          @onClick="handlePrimaryActionClick"
+        />
+        <u-btn-std
+          v-if="secondaryActionLabel"
+          :color="type"
+          :label="secondaryActionLabel"
+          size="md"
+          @onClick="handleSecondaryActionClick"
+        />
+      </div>
     </template>
   </q-banner>
 </template>
 
 <style lang="sass">
 .u-banner
-  min-width: 24.563rem
-  padding: $sm
   .q-banner__avatar
     align-self: center
 
   .q-banner__content
     padding-left: $xs !important
+    word-break: break-word
+    overflow-wrap: break-word
+
+.u-banner-sm
+  flex-wrap: wrap
+  padding: $ba
+  .q-banner__actions
+    width: 100%
+    padding-left: 0px !important
+    >div
+      gap: $sm
+    .q-btn
+      flex: 1
+      min-width: 0
+
+.u-banner-md
+  padding: $sm
+  .q-banner__actions
+    padding-left: $xs
+    >div
+      gap: $xs !important
 
 .u-banner-positive
   background: $green-1 !important

package/src/components/core/UInnerLoader.vue

@@ -1,8 +1,8 @@
 <script setup>
 defineProps({
-  dataTestId:{
-   type: String,
-   default: 'inner-loader'
+  dataTestId: {
+    type: String,
+    default: 'inner-loader',
   },
   image: {
     type: String,
@@ -30,11 +30,16 @@ defineProps({
     type: String,
     requried: false,
     default: '2rem',
-  }
+  },
 })
 </script>
 <template>
-  <q-inner-loading v-bind="$attrs" color="primary" :dataTestId="dataTestId" :showing="loading" >
+  <q-inner-loading
+    v-bind="$attrs"
+    color="primary"
+    :dataTestId="dataTestId"
+    :showing="loading"
+  >
     <div class="column items-center q-gutter-y-sm">
       <img
         class="q-my-none"
@@ -44,10 +49,10 @@ defineProps({
         :width="imageWidth"
       />
       <div class="row items-center">
-        <div v-if="loadingMessage">
+        <div v-if="loadingMessage" class="text-center">
           <span class="message q-mr-sm">{{ loadingMessage }}</span>
+          <q-spinner-facebook :color="spinnerColor" :size="spinnerSize" />
         </div>
-        <q-spinner-facebook :color="spinnerColor" :size="spinnerSize" />
       </div>
     </div>
   </q-inner-loading>