@mythpe/quasar-ui-qui 0.4.3 → 0.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.4.3",
+  "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'
@@ -35,12 +35,16 @@ interface P {
   searchLength?: Props['searchLength'];
   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
@@ -57,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;
@@ -89,10 +100,11 @@ defineOptions({
       xl: xl,
     }"
   >
-    <MRow col>
+    <MRow :col="noCountry ? undefined : !0">
       <MAxios
+        v-model:items="countries"
         :autocomplete="false"
-        :class="['self-start overflow-hidden',{hidden: readonly,'order-last': $q.lang.rtl}]"
+        :class="['self-start overflow-hidden',{hidden: readonly || !!noCountry,'order-last': $q.lang.rtl}]"
         :dense="dense"
         :name="countryName"
         :prepend-icon="noIcon ? undefined : (!isSmall ? 'ion-keypad' : undefined)"
@@ -120,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"
@@ -129,7 +143,7 @@ defineOptions({
           dense,
           viewModeValue: viewModeValue !== undefined ? viewModeValue : getPlaceholder,
           placeholder:getPlaceholder,
-          col: !0,
+          col: noCountry ? 12 : !0,
           viewMode: (readonly || viewMode) ? !0 : !countryValue,
           readonly: undefined,
         }"

package/src/types/api/MPhone.d.ts

@@ -17,4 +17,5 @@ export type MPhoneProps = MInputProps & {
   searchLength?: MAxiosProps['searchLength'];
   noIcon?: boolean;
   selectProps?: MAxiosProps;
+  noCountry?: boolean;
 }