@mythpe/quasar-ui-qui 0.3.93 → 0.3.94

package/package.json

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

package/src/components/form/MPhone.vue

@@ -19,6 +19,7 @@ interface P {
   name: Props['name'];
   countryPhone?: Props['countryPhone'];
   readonly?: Props['readonly'];
+  viewMode?: Props['viewMode'];
   required?: Props['required'];
   placeholder?: Props['placeholder'];
   viewModeValue?: Props['viewModeValue'];
@@ -41,6 +42,10 @@ const countryName = computed(() => props.countryPhone || `${props.name}_country`
 const countryValue = useFieldValue(countryName)
 const $q = useQuasar()
 const { __ } = useMyth()
+const getPlaceholder = computed(() => {
+  return !countryValue.value ? __('replace.choose', { name: __(`attributes.${countryName.value}`) }) : props.placeholder
+})
+const isSmall = computed(() => $q.screen.lt.md)
 const focus = () => {
   phoneRef?.value?.input?.focus?.()
 }
@@ -85,6 +90,30 @@ defineOptions({
     }"
   >
     <MRow col>
+      <MAxios
+        :autocomplete="false"
+        :class="['self-start overflow-hidden',{hidden: readonly,'order-last': $q.lang.rtl}]"
+        :dense="dense"
+        :name="countryName"
+        :prepend-icon="noIcon ? undefined : (!isSmall ? 'ion-keypad' : undefined)"
+        :required="readonly ? undefined : required"
+        :search-length="searchLength??0"
+        :style="`width: ${isSmall ? 150 : 200}px;max-height: 60px;`"
+        :use-input="!0"
+        :view-mode="readonly"
+        auto
+        hide-bottom-space
+        hide-dropdown-icon
+        hide-hint
+        no-filter
+        no-loading
+        option-label="code_label"
+        popup-content-class="m-select__popup-phone"
+        popup-no-route-dismiss
+        service="country.codes"
+        v-bind="selectProps"
+        @model="onSelectCountry"
+      />
       <MInput
         ref="phoneRef"
         :input-class="!countryValue ? undefined : `ltr`"
@@ -98,11 +127,11 @@ defineOptions({
           ...$attrs,
           required,
           dense,
-          viewModeValue,
-          placeholder: !countryValue ? __('replace.choose',{name: __(`attributes.${countryName}`) }) : placeholder,
-          col: readonly ? 12 : 7,
-          readonly: readonly ? !1 : !countryValue,
-          viewMode: readonly,
+          viewModeValue: viewModeValue !== undefined ? viewModeValue : getPlaceholder,
+          placeholder:getPlaceholder,
+          col: !0,
+          viewMode: (readonly || viewMode) ? !0 : !countryValue,
+          readonly: undefined,
         }"
       >
         <template
@@ -113,26 +142,6 @@ defineOptions({
           <slot :name="slot" />
         </template>
       </MInput>
-      <MAxios
-        :autocomplete="false"
-        :class="{hidden: readonly}"
-        :dense="dense"
-        :name="countryName"
-        :prepend-icon="noIcon ? undefined : ($q.screen.gt.xs ? 'ion-keypad' : undefined)"
-        :required="readonly ? undefined : required"
-        :search-length="searchLength??0"
-        :view-mode="readonly"
-        col
-        hide-bottom-space
-        hide-dropdown-icon
-        hide-hint
-        option-label="code_label"
-        popup-content-class="m-select__popup-phone"
-        popup-no-route-dismiss
-        service="country.codes"
-        v-bind="selectProps"
-        @model="onSelectCountry"
-      />
     </MRow>
   </MCol>
 </template>