@mythpe/quasar-ui-qui 0.4.4 → 0.4.5

package/package.json

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

package/src/components/form/MPhone.vue

@@ -9,7 +9,7 @@
 <script lang="ts" setup>
 
 import { useFieldValue } from 'vee-validate'
-import { computed, useTemplateRef } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 import type { MInputSlots, MPhoneProps as Props } from '../../types'
 import { useMyth } from '../../composable'
 import MInput from './MInput.vue'
@@ -36,12 +36,15 @@ interface P {
   noIcon?: Props['noIcon'];
   selectProps?: Props['selectProps'];
   noCountry?: Props['noCountry'];
+  prefix?: Props['prefix'];
+  suffix?: Props['suffix'];
 }
 
 const props = defineProps<P>()
 const countryName = computed(() => props.countryPhone || `${props.name}_country`)
 const countryValue = useFieldValue(countryName)
 const $q = useQuasar()
+const rtl = computed(() => $q.lang.rtl)
 const { __ } = useMyth()
 const getPlaceholder = computed(() => {
   return !countryValue.value ? __('replace.choose', { name: __(`attributes.${countryName.value}`) }) : props.placeholder
@@ -58,6 +61,13 @@ const onSelectCountry = () => {
 }
 
 const phoneRef = useTemplateRef<InstanceType<typeof MInput>>('phoneRef')
+const countries = ref<any[]>([])
+const selectedCountryKey = computed<string | undefined>(() => {
+  if (!countryValue.value) {
+    return undefined
+  }
+  return countries.value.find((e: any) => !!e?.id && e?.id === countryValue.value)?.key || undefined
+})
 
 interface MPhoneExposed {
   focus: () => void;
@@ -92,6 +102,7 @@ defineOptions({
   >
     <MRow :col="noCountry ? undefined : !0">
       <MAxios
+        v-model:items="countries"
         :autocomplete="false"
         :class="['self-start overflow-hidden',{hidden: readonly || !!noCountry,'order-last': $q.lang.rtl}]"
         :dense="dense"
@@ -121,6 +132,8 @@ defineOptions({
         :ltr="!!countryValue"
         :mobile="mobile === undefined ? !1 : mobile"
         :name="name"
+        :prefix="noCountry ? (prefix ?? (!rtl ? (selectedCountryKey ?? prefix) : prefix)) : prefix"
+        :suffix="noCountry ? (suffix ?? (rtl ? (selectedCountryKey ?? suffix) : suffix)) : suffix"
         prepend-icon="ion-ios-phone-portrait"
         stack-label
         type="text"