@mythpe/quasar-ui-qui 0.4.68 → 0.4.70

package/package.json

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

package/src/components/form/MInput.vue

@@ -94,6 +94,9 @@ const sarValue = computed<string | null>(() => {
 })
 const viewModeAttribute = useFieldValue(() => props.viewModeKey || props.name)
 const computedViewModeValue = computed<any>(() => {
+  if (props.viewModeValue !== undefined) {
+    return props.viewModeValue
+  }
   if (props.viewModeKey) {
     return viewModeAttribute.value
   }

package/src/components/form/MPhone.vue

@@ -14,6 +14,7 @@ import type { MInputSlots, MPhoneProps as Props } from '../../types'
 import { useMyth } from '../../composable'
 import MInput from './MInput.vue'
 import { useQuasar } from 'quasar'
+import type Select from './MAxios.vue'
 
 interface P {
   name: Props['name'];
@@ -38,6 +39,7 @@ interface P {
   noCountry?: Props['noCountry'];
   prefix?: Props['prefix'];
   suffix?: Props['suffix'];
+  copy?: Props['copy'];
 }
 
 const props = defineProps<P>()
@@ -47,7 +49,7 @@ 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
+  return !countryValue.value && !props.readonly ? __('replace.choose', { name: __(`attributes.${countryName.value}`) }) : props.placeholder
 })
 const isSmall = computed(() => $q.screen.lt.md)
 const focus = () => {
@@ -62,6 +64,7 @@ const onSelectCountry = () => {
 }
 
 const phoneRef = useTemplateRef<InstanceType<typeof MInput>>('phoneRef')
+const axiosRef = useTemplateRef<InstanceType<typeof Select>>('axiosRef')
 const countries = ref<any[]>([])
 const selectedCountryKey = computed<string | undefined>(() => {
   if (!countryValue.value) {
@@ -69,6 +72,23 @@ const selectedCountryKey = computed<string | undefined>(() => {
   }
   return countries.value.find((e: any) => !!e?.id && e?.id === countryValue.value)?.key || undefined
 })
+const copyComputed = computed(() => {
+  if (!countryValue.value) {
+    return !1
+  }
+  return props.copy
+})
+const countryIconComputed = computed<any>(() => {
+  if (props.noIcon) {
+    return undefined
+  }
+  if (!isSmall.value) {
+    if (axiosRef.value?.$el?.offsetWidth && axiosRef.value?.$el?.offsetWidth > 199) {
+      return 'ion-keypad'
+    }
+  }
+  return undefined
+})
 
 interface MPhoneExposed {
   focus: () => void;
@@ -102,15 +122,16 @@ defineOptions({
   >
     <MRow :col="noCountry ? undefined : 'xs'">
       <MAxios
+        ref="axiosRef"
         v-model:items="countries"
         :autocomplete="false"
         :class="['self-start overflow-hidden',{hidden: readonly || !!noCountry,'order-last': $q.lang.rtl}]"
         :dense="dense"
         :name="countryName"
+        :prepend-icon="countryIconComputed"
         :required="readonly ? undefined : required"
         :search-length="searchLength ?? 0"
         :style="`widthf: ${isSmall ? 150 : 200}px;max-height: 60px;`"
-        :use-input="countries.length > 4"
         :view-mode="readonly"
         col="4"
         hide-bottom-space
@@ -122,6 +143,7 @@ defineOptions({
         popup-content-class="m-select__popup-phone"
         popup-no-route-dismiss
         service="country.codes"
+        use-input
         v-bind="selectProps"
         @model="onSelectCountry"
       />
@@ -141,11 +163,12 @@ defineOptions({
           ...$attrs,
           required,
           dense,
-          viewModeValue: viewModeValue !== undefined ? viewModeValue : getPlaceholder,
-          placeholder:getPlaceholder,
+          viewModeValue: viewModeValue === undefined ? getPlaceholder : viewModeValue,
+          placeholder: getPlaceholder,
           col: (readonly || viewMode || noCountry) ? 12 : 8,
           viewMode: (readonly || viewMode) ? !0 : !countryValue,
           readonly: undefined,
+          copy: copyComputed,
         }"
       >
         <template