@mythpe/quasar-ui-qui 0.4.69 → 0.4.71

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -109,6 +109,7 @@ type Props = {
   noExampleBtn?: MDatatableProps['noExampleBtn'];
   wrapCells?: MDatatableProps['wrapCells'];
   tooSmall?: MDatatableProps['tooSmall'];
+  color?: MDatatableProps['color'];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -193,7 +194,8 @@ const props = withDefaults(defineProps<Props>(), {
   importBtn: undefined,
   noExampleBtn: undefined,
   wrapCells: undefined,
-  tooSmall: undefined
+  tooSmall: undefined,
+  color: 'primary'
 })
 
 interface Emits {
@@ -645,6 +647,7 @@ defineExpose({
         v-model:pagination="pagination"
         v-model:selected="selected"
         :class="['m-datatable',{'m-datatable-grid' : isSmall}]"
+        :color="color"
         :columns="getSortedHeaders"
         :filter="search"
         :grid="isGrid"
@@ -656,7 +659,6 @@ defineExpose({
         :visible-columns="visibleHeaders"
         :wrap-cells="wrapCellsRef"
         card-container-class="m-datatable-container"
-        color="primary"
         table-class="m-datatable-container"
         v-bind="bindAttr"
         @request="fetchDatatableItems"
@@ -1519,7 +1521,6 @@ defineExpose({
             />
           </q-td>
         </template>
-
         <template
           v-for="slotName in getSlots"
           :key="slotName"

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,11 +122,13 @@ 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;`"
@@ -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