@usssa/component-library 1.0.0-alpha.152 → 1.0.0-alpha.154

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.152",
+  "version": "1.0.0-alpha.154",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",

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/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