@mythpe/quasar-ui-qui 0.4.4 → 0.4.6

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -103,6 +103,7 @@ type Props = {
   align?: MDatatableProps['align'];
   importBtn?: MDatatableProps['importBtn'];
   noExampleBtn?: MDatatableProps['noExampleBtn'];
+  wrapCells?: MDatatableProps['wrapCells'];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -182,7 +183,8 @@ const props = withDefaults(defineProps<Props>(), {
   lockValue: undefined,
   align: 'left',
   importBtn: undefined,
-  noExampleBtn: undefined
+  noExampleBtn: undefined,
+  wrapCells: undefined
 })
 
 interface Emits {
@@ -482,8 +484,7 @@ const mainAttrs = computed(() => ({
   title: getTableTitle.value,
   bordered: props.bordered === undefined ? pluginOptions.value.datatable?.bordered : props.bordered,
   dense: props.dense === undefined ? (theme.value?.inputs?.dense !== undefined ? theme.value.inputs.dense : pluginOptions.value.datatable?.dense) : props.dense,
-  flat: props.flat === undefined ? pluginOptions.value.datatable?.flat : props.flat,
-  wrapCells: wrapCellsRef.value
+  flat: props.flat === undefined ? pluginOptions.value.datatable?.flat : props.flat
 }))
 const attrs = useAttrs()
 const bindAttr = computed(() => ({
@@ -622,6 +623,7 @@ defineExpose({
         :rows-per-page-options="getRowsPerPageOptions"
         :selection="getShowSelection ? (multiSelection ? 'multiple' : 'single') : 'none'"
         :visible-columns="visibleHeaders"
+        :wrap-cells="wrapCellsRef"
         card-container-class="m-datatable-container"
         color="primary"
         table-class="m-datatable-container"

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"