@usssa/component-library 1.0.0-alpha.151 → 1.0.0-alpha.153

package/README.md

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

package/src/components/core/UDate.vue

@@ -212,6 +212,7 @@ watch(
               minimal
               :navigation-max-year-month="navigationMaxYearMonth"
               :navigation-min-year-month="navigationMinYearMonth"
+              :options="datePickerOptions"
               :range="range"
             />
           </q-popup-proxy>

package/src/components/core/UInputPhoneStd.vue

@@ -98,6 +98,7 @@ const toLowerCase = (str) => str?.toLowerCase()
     :hintText="hintText"
     :isRequired="isRequired"
     :label="label"
+    inputType="tel"
     leftIcon="true"
     :mask="mask"
     :outlined="outlined"

package/src/components/core/UInputTextStd.vue

@@ -33,6 +33,10 @@ const props = defineProps({
   hintText: {
     type: String,
   },
+  inputType: {
+    type: String,
+    default: 'text',
+  },
   isRequired: {
     type: Boolean,
     default: false,
@@ -143,7 +147,7 @@ const handleRightIconClick = () => {
       :readonly="readonly"
       :rules="validationRules"
       :standout="!outlined"
-      type="text"
+      :type="inputType"
     >
       <!--Added below line to resolve "Missing form label" accessibility issue -->
       <template class="hidden">{{ label }}</template>
@@ -193,7 +197,7 @@ const handleRightIconClick = () => {
           </div>
         </div>
       </template>
-      <slot name="menu"/>
+      <slot name="menu" />
     </q-input>
   </div>
 </template>

package/src/components/core/UMultiSelectStd.vue

@@ -38,7 +38,6 @@ const props = defineProps({
   },
   label: {
     type: String,
-    default: 'Label',
   },
   leftIcon: {
     type: String,

package/src/components/core/USelectStd.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useScreenType } from '../../composables/useScreenType'
 import UAvatar from './UAvatar.vue'
 import UBtnStd from './UBtnStd.vue'
@@ -74,6 +74,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
   sheetLabel: {
     type: String,
     default: '',
@@ -103,13 +107,7 @@ const initialOptions = ref([...props.options])
 const placeholderText = ref(props?.placeholder)
 const search = ref('')
 const selectedItem = ref(props.modelValue)
-
-const sheetHeading = computed(() => {
-  if (props.sheetLabel) {
-    return props.sheetLabel
-  }
-  return props.label
-})
+const selectRef = ref(null)
 
 const filterOptions = computed(() => {
   if (!search.value) return initialOptions.value
@@ -126,6 +124,12 @@ const model = computed({
     return emit('update:modelValue', value)
   },
 })
+const sheetHeading = computed(() => {
+  if (props.sheetLabel) {
+    return props.sheetLabel
+  }
+  return props.label
+})
 
 // sheet apply action
 const handleApply = () => {
@@ -135,8 +139,16 @@ const handleApply = () => {
 
 // for opening the sheet in mobile screen
 const handleClick = (event) => {
-  const isSelectElement = event.target.closest('.q-field__control')
-  if ($screen.value.isMobile && isSelectElement) {
+  if(props.readonly) return
+  if (!$screen.value.isMobile) return
+  const isBorderClick = event.target.classList.contains('q-field__control')
+
+  if (
+    isBorderClick ||
+    event.target.closest('.q-field__control') ||
+    event.target.closest('.q-field__append')
+  ) {
+    event.preventDefault()
     event.stopPropagation()
     dialogs.value = [
       {
@@ -217,6 +229,18 @@ const updateVal = (val) => {
   placeholderText.value = val?.length ? '' : props?.placeholder
 }
 
+onMounted(() => {
+  // Add click listener to handle border clicks more reliably
+  if (selectRef.value) {
+    const controlContainer =
+      selectRef.value?.$el.querySelector('.q-field__control')
+    if (controlContainer) {
+      controlContainer.addEventListener('click', handleClick, {
+        passive: false,
+      })
+    }
+  }
+})
 watch(
   () => props?.placeholder,
   (value) => {
@@ -234,11 +258,7 @@ watch(
 </script>
 
 <template>
-  <section
-    class="column q-gutter-xs"
-    :dataTestId="dataTestId"
-    @click="handleClick"
-  >
+  <section class="column q-gutter-xs" :dataTestId="dataTestId">
     <label class="row items-center" for="select">
       <div class="u-select-label text-body-sm">
         <span>{{ label }}</span>
@@ -271,6 +291,7 @@ watch(
       :color="color"
       emit-value
       hide-bottom-space
+      :hide-dropdown-icon="$screen.isMobile ? true : false"
       id="select"
       map-options
       :menu-offset="[0, 5]"
@@ -280,7 +301,10 @@ watch(
       :options="options"
       outlined
       :placeholder="placeholderText"
+      :readonly="readonly"
+      ref="selectRef"
       :use-input="useInput"
+      @click="handleClick"
       @filter="filterFn"
       @input="handleInput"
       @keydown="handleKeydown"
@@ -294,6 +318,13 @@ watch(
           </q-item-section>
         </q-item>
       </template>
+      <template v-if="$screen.isMobile && !readonly" v-slot:append>
+        <q-icon
+          class="cursor-pointer"
+          name="arrow_drop_down"
+          @click.stop="handleClick"
+        />
+      </template>
 
       <template v-if="leftIcon" v-slot:prepend>
         <q-icon :class="leftIcon" size="1rem" />
@@ -451,7 +482,7 @@ watch(
 
     &::before
       background: white
-      border: 1.5px solid $neutral-4
+      border: 0.094rem solid $neutral-4
 
   &.field-sm
     .q-field__marginal
@@ -465,16 +496,16 @@ watch(
       height: $xl
 
   &:hover .q-field__control::before
-    border: 1.5px solid $primary
+    border: 0.094rem solid $primary
 
   &.q-field--with-bottom
     padding-bottom: 0
 
   .q-field__control:focus-within
-    box-shadow : 0 0 0 2px rgba(35, 75, 169, .20)
+    box-shadow : 0 0 0 0.125rem rgba(35, 75, 169, .20)
 
   .q-field__bottom
-    padding: 4px 0 0 0
+    padding: $xxs 0 0 0
 
   .q-field__prepend
     padding-right: $xs

package/src/css/quasar.variables.sass

@@ -13,27 +13,58 @@
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
 @import 'vars/colors.variables'
-$primary   : $blue-8
-$secondary : $blue-9
-$accent    : $red-5
 
-$dark      : #101114
-$dark-page : #121212
-
-$positive  : $green-6
-$negative  : $red-5
-$info      : $purple-6
-$warning   : $orange-7
+// USSSA BRAND COLOR VALUES
+$primary: $blue-8
+$secondary: $blue-9
+$accent: $red-5
+$negative: $red-5
+$warning: $orange-7
+$positive: $green-6
+$info: $purple-6
+$dark: $neutral-13
+$white: $neutral-1
+$description: $neutral-9
+$transparent: rgb(0, 0, 0, .10)
+$dark-page: #121212
+
+// BG Hover variables
+$accent-bg-hover: rgb(203, 42, 61, .15)
+$primary-bg-hover: rgb(35, 75, 169, .15)
+
+// BODY
+$body-xl: (size: 1.25rem, line-height: 1.75rem, letter-spacing: .03215rem, weight: 400) !default
+$body-lg: (size: 1.125rem, line-height: 1.313rem, letter-spacing: .03215rem, weight: 400) !default
+$body-md: (size: 1.00rem, line-height: 1.188rem, letter-spacing: .01786rem, weight: 400) !default
+$body-sm: (size: 0.875rem, line-height: 1.188rem, letter-spacing: .01786rem, weight: 400) !default
+$body-xs: (size: 0.75rem, line-height: 1.063rem, letter-spacing: .01786rem, weight: 400) !default
+$body-xxs: (size: 0.688rem, line-height: 1.063rem, letter-spacing: .01786rem, weight: 400) !default
+
+// BORDER RADIUS
+$border-radius-xs: .25rem
+$border-radius-sm: .5rem
+
+// CAPTION
+$caption-lg: (size: 1rem, line-height: 1.063rem, letter-spacing: .03333rem, weight: 500) !default
+$caption-md: (size: 0.875rem, line-height: 1.063rem, letter-spacing: .03333rem, weight: 500) !default
+$caption-sm: (size: 0.75rem, line-height: 1.063rem, letter-spacing: .03333rem, weight: 500) !default
+$caption-xs: (size: 0.688rem, line-height: 1.063rem, letter-spacing: .03333rem, weight: 500) !default
+
+// OVERLINE
+$overline-lg: (size: 1.00rem, line-height: 1.50rem, letter-spacing: .53px, weight: 500) !default
+$overline-md: (size: 0.875rem, line-height: 1.5rem, letter-spacing: .03333px, weight: 500) !default
+$overline-sm: (size: 0.75rem, line-height: 1.5rem, letter-spacing: .03333px, weight: 500) !default
+$overline-xs: (size: 0.688rem, line-height: 1.5rem, letter-spacing: .03333px, weight: 500) !default
 
 // USSSA TYPOGRAPHY RESET
-$h1:        (size: 4.063rem, line-height: 5.079rem,   letter-spacing: .35px, weight: 700) !default
-$h2:        (size: 2.5rem,   line-height: 3.125rem,   letter-spacing: .35px, weight: 700) !default
-$h3:        (size: 1.5rem,   line-height: 1.875rem,   letter-spacing: .35px, weight: 700) !default
-$h4:        (size: 1.25rem,  line-height: 1.563rem,   letter-spacing: .35px, weight: 700) !default
+$h1: (size: 4.063rem, line-height: 5.079rem, letter-spacing: .35px, weight: 700) !default
+$h2: (size: 2.5rem, line-height: 3.125rem, letter-spacing: .35px, weight: 700) !default
+$h3: (size: 1.5rem, line-height: 1.875rem, letter-spacing: .35px, weight: 700) !default
+$h4: (size: 1.25rem, line-height: 1.563rem, letter-spacing: .35px, weight: 700) !default
 
 // QUASAR DEFAULTS
-$h5:        (size: 1.5rem,   line-height: 2rem,     letter-spacing: normal,    weight: 700) !default
-$h6:        (size: 1.25rem,  line-height: 2rem,     letter-spacing: .0125em,   weight: 700) !default
+$h5: (size: 1.5rem, line-height: 2rem, letter-spacing: normal, weight: 700) !default
+$h6: (size: 1.25rem, line-height: 2rem, letter-spacing: .0125em, weight: 700) !default
 
 // USSSA CUSTOM
 $h1-md: (size: 3.00rem , line-height: 3.75rem, letter-spacing: .35px, weight: bold) !default
@@ -48,64 +79,45 @@ $h3-sm: (size: 1.250rem , line-height: 1.563rem, letter-spacing: .35px, weight:
 $h4-md: (size: 1.125rem , line-height: 1.406rem, letter-spacing: .35px, weight: bold) !default
 $h4-sm: (size: 1.00rem , line-height: 1.25rem, letter-spacing: .35px, weight: bold) !default
 
+// HEADING
+$heading-xxxl: (size: 3rem, line-height: 5.25rem, letter-spacing: -0.0156rem, weight: 700) !default
+$heading-xxl: (size: 2.5rem, line-height: 3.281rem, letter-spacing: 0rem, weight: 700) !default
+$heading-xl: (size: 2.0rem, line-height: 2.734rem, letter-spacing: 0rem, weight: 700) !default
+$heading-lg: (size: 1.75rem, line-height: 1.75rem, letter-spacing: .00714rem, weight: 700) !default
+$heading-md: (size: 1.5rem, line-height: 1.5rem, letter-spacing: .00714rem, weight: 700) !default
+$heading-sm: (size: 1.25rem, line-height: 1.5rem, letter-spacing: 0rem, weight: 700) !default
+$heading-xs: (size: 1.125rem, line-height: 1.313rem, letter-spacing: .0125rem, weight: 700) !default
+$heading-xxs: (size: 1.0rem, line-height: 1.313rem, letter-spacing: .0125rem, weight: 700) !default
 
-// DESKTOP
-$caption-lg: (size: 1rem,    line-height: 1.25rem,   letter-spacing: .03333rem, weight: 500) !default
-$caption-md: (size: 0.875rem,  line-height: 1.25rem, letter-spacing: .03333rem, weight: 500) !default
-$caption-sm: (size: 0.75rem,    line-height: 1.25rem,   letter-spacing: .03333rem, weight: 500) !default
-$caption-xs: (size: 0.688rem,  line-height: 1.25rem, letter-spacing: .03333rem, weight: 500) !default
-
-$body-xl:   (size: 1.25rem, line-height: 2.5rem,   letter-spacing: .03215rem,  weight: 400) !default
-$body-lg:   (size: 1.125rem, line-height: 1.75rem,   letter-spacing: .03215rem,  weight: 400) !default
-$body-md:   (size: 1.00rem, line-height: 1.188rem,   letter-spacing: .01786rem,  weight: 400) !default
-$body-sm:   (size: 0.875rem, line-height: 1.5rem,   letter-spacing: .01786rem,  weight: 400) !default
-$body-xs:   (size: 0.75rem, line-height: 1.25rem,   letter-spacing: .01786rem,  weight: 400) !default
-$body-xxs:   (size: 0.688rem, line-height: 1.25rem,   letter-spacing: .01786rem,  weight: 400) !default
-
-$overline-lg:    (size: 1.00rem,  line-height: 1.50rem,    letter-spacing: .53px,  weight: 500) !default
-$overline-md:    (size: 0.875rem,  line-height: 2rem,    letter-spacing: .53px,  weight: 500) !default
-$overline-sm:    (size: 0.75rem,  line-height: 2rem,    letter-spacing: .53px,  weight: 500) !default
-$overline-xs:    (size: 0.688rem,  line-height: 2rem,   letter-spacing: .53px,  weight: 500) !default
-
-$heading-xxxl:   (size: 3rem,    line-height: 3.75rem,   letter-spacing: -0.0156rem, weight: 700) !default
-$heading-xxl:    (size: 2.5rem,  line-height: 3.125rem, letter-spacing: 0rem, weight: 700) !default
-$heading-xl:    (size: 2.0rem,    line-height: 2.5rem,   letter-spacing: 0rem, weight: 700) !default
-$heading-lg:    (size: 1.75rem,  line-height: 2.188rem, letter-spacing: .00714rem, weight: 700) !default
-$heading-md:    (size: 1.5rem,  line-height: 1.5rem, letter-spacing: .00714rem, weight: 700) !default
-$heading-sm:    (size: 1.25rem,  line-height: 1.5rem, letter-spacing: 0rem, weight: 700) !default
-$heading-xs:    (size: 1.125rem,  line-height: 1.406rem, letter-spacing: .0125rem, weight: 700) !default
-$heading-xxs:    (size: 1.0rem,  line-height: 1.5rem, letter-spacing: .0125rem, weight: 700) !default
-
-// VARIABLE ASSIGNMENT
 $headings: ('h1': $h1, 'h1-md': $h1-md, 'h1-sm': $h1-sm, 'h2': $h2, 'h2-md': $h2-md, 'h2-sm': $h2-sm, 'h3': $h3, 'h3-md': $h3-md, 'h3-sm': $h3-sm, 'h4': $h4, 'h4-md': $h4-md, 'h4-sm': $h4-sm, 'h5': $h5, 'h6': $h6, 'body-xl': $body-xl, 'body-lg': $body-lg, 'body-md': $body-md, 'body-sm': $body-sm, 'body-xs': $body-xs, 'body-xxs': $body-xxs, 'overline-lg': $overline-lg, 'overline-md': $overline-md, 'overline-sm': $overline-sm,'overline-xs': $overline-xs, 'caption-lg': $caption-lg, 'caption-md': $caption-md, 'caption-sm': $caption-sm, 'caption-xs': $caption-xs, 'heading-xxxl': $heading-xxxl, 'heading-xxl':$heading-xxl,'heading-xl':$heading-xl,'heading-lg':$heading-lg,'heading-md':$heading-md,'heading-sm':$heading-sm,'heading-xs':$heading-xs,'heading-xxs': $heading-xxs) !default
 
 // SPACING BASE
-$space-base   : 1rem !default
-$space-x-base : $space-base !default
-$space-y-base : $space-base !default
+$space-base: 1rem !default
+$space-x-base: $space-base !default
+$space-y-base: $space-base !default
 
 // SPACING SINGLE VARIABLES
-$xxs  : $space-base * .25 !default
-$xs   : $space-base * .5 !default
-$sm   : $space-base * .75 !default
-$ms   : $space-base * 1.5 !default
-$ba   : $space-base * 1 !default
-$md   : $space-base * 2 !default
-$lg   : $space-base * 2.5 !default
-$xl   : $space-base * 3 !default
-$xxl  : $space-base * 3.375 !default
+$xxs: $space-base * .25 !default
+$xs: $space-base * .5 !default
+$sm: $space-base * .75 !default
+$ms: $space-base * 1.5 !default
+$ba: $space-base * 1 !default
+$md: $space-base * 2 !default
+$lg: $space-base * 2.5 !default
+$xl: $space-base * 3 !default
+$xxl: $space-base * 3.375 !default
 
 // SPACING VARIABLES FOR QUASAR SPACING UTILITY CLASSES
-$space-none : (x: 0, y: 0) !default
-$space-xxs   : (x: ($space-x-base * .25), y: ($space-y-base * .25)) !default
-$space-xs   : (x: ($space-x-base * .5), y: ($space-y-base * .5)) !default
-$space-sm   : (x: ($space-x-base * .75), y: ($space-y-base * .75)) !default
-$space-ms   : (x: ($space-x-base * 1.5), y: ($space-y-base * 1.5)) !default
-$space-ba : (x: ($space-x-base * 1), y: ($space-y-base * 1)) !default
-$space-md   : (x: $space-x-base * 2, y: $space-y-base * 2) !default
-$space-lg   : (x: ($space-x-base * 2.5), y: ($space-y-base * 2.5)) !default
-$space-xl   : (x: ($space-x-base * 3), y: ($space-y-base * 3)) !default
-$space-xxl   : (x: ($space-x-base * 3.375), y: ($space-y-base * 3.375)) !default
+$space-none: (x: 0, y: 0) !default
+$space-xxs: (x: ($space-x-base * .25), y: ($space-y-base * .25)) !default
+$space-xs: (x: ($space-x-base * .5), y: ($space-y-base * .5)) !default
+$space-sm: (x: ($space-x-base * .75), y: ($space-y-base * .75)) !default
+$space-ms: (x: ($space-x-base * 1.5), y: ($space-y-base * 1.5)) !default
+$space-ba: (x: ($space-x-base * 1), y: ($space-y-base * 1)) !default
+$space-md: (x: $space-x-base * 2, y: $space-y-base * 2) !default
+$space-lg: (x: ($space-x-base * 2.5), y: ($space-y-base * 2.5)) !default
+$space-xl: (x: ($space-x-base * 3), y: ($space-y-base * 3)) !default
+$space-xxl: (x: ($space-x-base * 3.375), y: ($space-y-base * 3.375)) !default
 
 $spaces: ('none': $space-none, 'xxs': $space-xxs, 'xs': $space-xs, 'sm': $space-sm, 'ms': $space-ms, 'ba': $space-ba, 'md': $space-md, 'lg': $space-lg, 'xl': $space-xl, 'xxl': $space-xxl) !default
 
@@ -115,7 +127,14 @@ $shadow-inner: 0px 0px 1px 1px rgb(16, 17, 20, .12) inset
 $shadow-skeumorphic-primary: 0px 1px 0.4px 0px rgba(136, 136, 138, 0.40) inset, 0px -1px 0.4px 0px rgba(16, 17, 20, 0.40) inset, 0px 4px 10px 0px rgba(16,17,20,0.00), 0px 0px 0px 1px rgb(35,75,169)
 $stroke-skeuomorphic: 1px solid rgba(255, 255, 255, 0.12)
 $shadow-2: 0px 0px 8px 0px rgba(16, 17, 20, 0.12)
-$accent-bg-hover: rgba(203, 42, 61, 0.15)
-$surface-bg-link-hover :rgba(16, 17, 20, .5)
-$border-radius-sm: .75rem
-$border-radius-xs: .5rem
+
+// Surface variables
+$surface-bg-1: $neutral-1
+$surface-bg-link-hover: rgba(16, 17, 20, .5)
+
+// Transparent variables
+$accent-transparent: rgba(203, 42, 61, .20)
+$primary-transparent: rgb(35, 75, 169, .20)
+
+// Others
+$bg-blue-1: #E1E9F9

package/src/css/vars/colors.variables.sass

@@ -111,17 +111,3 @@ $yellow-6: #EBC321 !default
 $yellow-7: #D2AB0C !default
 $yellow-8: #B49104 !default
 $yellow-9: #8C7000 !default
-
-// USSSA RED TRANSPARENT
-$accent-transparent: rgba(203, 42, 61, .20)
-$accent-bg-hover: rgba(203, 42, 61, 0.15)
-
-// USSSA BLUE TRANSPARENT
-$primary-transparent: rgba(35, 75, 169, .20)
-$primary-bg-hover: rgba(35, 75, 169, .15)
-
-//USSSA Description content color
-$description : $neutral-9
-
-$surface-bg-1: #FFFFFF
-$bg-blue-1: #E1E9F9