@mythpe/quasar-ui-qui 0.3.78 → 0.3.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.3.78",
+  "version": "0.3.80",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": {
     "name": "MyTh Ahmed Faiz",

package/src/components/form/MEmail.vue

@@ -16,7 +16,13 @@ import MInput from './MInput.vue'
 
 const modelValue = defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const input = useTemplateRef<InstanceType<typeof MInput>>('input')
-defineExpose<{ input: typeof input }>({ input })
+const focus = () => {
+  input?.value?.focus?.()
+}
+const select = () => {
+  input?.value?.select?.()
+}
+defineExpose<{ input: typeof input; focus:() => void; select: () => void; }>({ focus, select, input })
 defineOptions({
   name: 'MEmail',
   inheritAttrs: !1

package/src/components/form/MInput.vue

@@ -70,7 +70,7 @@ const listeners = {
   blur: (v: any) => handleBlur(v, !0),
   'update:modelValue': (v: Props['modelValue']) => handleChange(v, !!errorMessage.value)
 }
-const input = useTemplateRef<InstanceType<typeof QInput> | InstanceType<typeof QField>>('input')
+const input = useTemplateRef<InstanceType<typeof QInput>>('input')
 const scopes = reactive(inputScope)
 const sarValue = computed<string | null>(() => {
   if (!props.sar) {
@@ -102,7 +102,14 @@ const computedInputClass = computed(() => {
   }
   return classes
 })
-defineExpose<typeof scopes & { input: typeof input }>({ input, ...scopes })
+const focus = () => {
+  input?.value?.focus?.()
+}
+const select = () => {
+  input?.value?.select?.()
+}
+
+defineExpose<typeof scopes & { input: typeof input; focus:() => void; select: () => void; }>({ focus, select, input, ...scopes })
 defineOptions({
   name: 'MInput',
   inheritAttrs: !1

package/src/components/form/MPhone.vue

@@ -12,7 +12,8 @@ import { useFieldValue } from 'vee-validate'
 import { computed, useTemplateRef } from 'vue'
 import type { MInputSlots, MPhoneProps as Props } from '../../types'
 import { useMyth } from '../../composable'
-import type MInput from './MInput.vue'
+import MInput from './MInput.vue'
+import { useQuasar } from 'quasar'
 
 interface P {
   name: Props['name'];
@@ -35,11 +36,32 @@ interface P {
 const props = defineProps<P>()
 const countryName = computed(() => props.countryPhone || `${props.name}_country`)
 const countryValue = useFieldValue(countryName)
+const $q = useQuasar()
 const { __ } = useMyth()
-const phoneRef = useTemplateRef<any>('phoneRef')
-const onSelectCountry = () => {
+const focus = () => {
   phoneRef?.value?.input?.focus?.()
 }
+const select = () => {
+  phoneRef?.value?.input?.select?.()
+}
+const onSelectCountry = () => {
+  focus()
+}
+
+const phoneRef = useTemplateRef<InstanceType<typeof MInput>>('phoneRef')
+
+interface MPhoneExposed {
+  focus: () => void;
+  select: () => void;
+  input?: typeof phoneRef | null | any
+}
+
+defineExpose<MPhoneExposed>({
+  focus,
+  select,
+  input: phoneRef
+})
+
 defineOptions({
   name: 'MPhone',
   inheritAttrs: !1
@@ -91,11 +113,11 @@ defineOptions({
       <MAxios
         :autocomplete="false"
         :class="{hidden: readonly}"
+        :dense="dense"
         :name="countryName"
         :prepend-icon="$q.screen.gt.xs ? 'ion-keypad' : undefined"
         :required="readonly ? undefined : required"
         :view-mode="readonly"
-        :dense="dense"
         col
         hide-bottom-space
         hide-dropdown-icon