@usssa/component-library 1.0.0-alpha.221 → 1.0.0-alpha.222

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.221",
+  "version": "1.0.0-alpha.222",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Engineering Team <engineering@usssa.com>",

package/src/components/core/UDate.vue

@@ -69,6 +69,7 @@ const props = defineProps({
 const $screen = useScreenType()
 
 //refs
+const dateInputRef = ref(null)
 const datePickerRef = ref(null)
 const dialogDate = ref('')
 const dialogs = ref([])
@@ -87,6 +88,11 @@ const closeDialog = () => {
   }, 500)
 }
 
+const focusDateInput = () => {
+  dateInputRef.value?.focus()
+  dateInputRef.value?.blur()
+}
+
 const handleApply = () => {
   date.value = dialogDate.value
   selectedDate.value = dialogSelectedDate.value
@@ -96,6 +102,7 @@ const handleApply = () => {
 const handleClose = () => {
   dialogSelectedDate.value = selectedDate.value
   dialogDate.value = date.value
+  focusDateInput()
 
   closeDialog()
 }
@@ -185,8 +192,9 @@ watch(
     :label="label"
     :mask="`${range ? '##/##/####-##/##/####' : '##/##/####'}`"
     :placeholder="placeholder"
+    ref="dateInputRef"
     :size="size"
-    tabindex="-1"
+    :tabindex="disable ? -1 : 0"
     :toolTipText="toolTipText"
     :validation-rules="validationRules"
     @update:modelValue="onUpdateValue"
@@ -198,6 +206,8 @@ watch(
         :flat="true"
         :size="size"
         :tabindex="disable ? -1 : 0"
+        @mousedown.prevent
+        @touchstart.prevent="openDatePicker"
         @on-click="openDatePicker"
       >
         <q-icon
@@ -216,6 +226,7 @@ watch(
             :self="self"
             transition-hide="scale"
             transition-show="scale"
+            @hide="focusDateInput"
           >
             <q-date
               v-model="date"
@@ -241,6 +252,7 @@ watch(
     closeIconLabel="Close Icon"
     :heading="sheetHeading"
     :show-action-buttons="true"
+    @onCloseDialog="focusDateInput"
   >
     <template #content>
       <UInputTextStd

package/src/components/core/UInputTextStd.vue

@@ -1,9 +1,19 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import UTooltip from './UTooltip.vue'
 
 const emit = defineEmits(['onRightIconClick'])
 
+defineExpose({
+  blur: () => {
+    inputRef.value?.blur?.()
+  },
+  focus: () => {
+    inputRef.value?.focus?.()
+  },
+  getInputElement: () => inputRef.value,
+})
+
 const modelValue = defineModel()
 defineOptions({
   inheritAttrs: false,
@@ -88,6 +98,8 @@ const props = defineProps({
   },
 })
 
+const inputRef = ref(null)
+
 const leftBorderRadius = computed(() => {
   if (props.leftBorderRadius === true) {
     return 'leftBorderRadius'
@@ -145,6 +157,7 @@ const handleRightIconClick = () => {
       :outlined="outlined"
       :placeholder="placeholder"
       :readonly="readonly"
+      ref="inputRef"
       :rules="validationRules"
       :standout="!outlined"
       :type="inputType"