@mythpe/quasar-ui-qui 0.1.86 → 0.1.87

package/package.json

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

package/src/components/form/MMobile.vue

@@ -11,17 +11,21 @@
   setup
 >
 import type { MInputProps as Props, MInputSlots } from '../../types'
-import { computed, toValue, useTemplateRef } from 'vue'
+import { computed, toValue, useAttrs, useTemplateRef } from 'vue'
 import MInput from './MInput.vue'
 import { useMyth } from '../../composable'
+import { useFieldValue } from 'vee-validate'
 
 const { props: pluginOptions, mobileRule: mobile } = useMyth()
 const modelValue = defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const attrs = useAttrs()
+const name = computed<string>(() => (attrs.name as string) || '')
 const input = useTemplateRef<InstanceType<typeof MInput>>('input')
+const field = useFieldValue(name)
 const mobileLength = computed(() => {
   const final = toValue(mobile)
   if (typeof final === 'function') {
-    return final(modelValue.value)
+    return final(field.value)
   }
   if (final === !0) {
     return 10
@@ -44,7 +48,7 @@ defineOptions({
     v-model="modelValue"
     v-bind="{
       type: 'tel',
-      mobile: typeof mobile === 'function' ? mobile(modelValue) : (
+      mobile: typeof mobile === 'function' ? mobile(field) : (
         mobile !== !1 && mobile !== undefined && mobile !== null
       ),
       maxlength: mobileLength,

package/src/types/components.d.ts

@@ -298,7 +298,7 @@ export type BaseInputFormProps = {
   /**
    * Mobile Rule.
    */
-  mobile?: boolean | string | number | undefined;
+  mobile?: boolean | string | number | ((value: unknown) => number | undefined) | undefined;
   /**
    * Email Rule.
    */

package/src/types/myth-api.ts

@@ -2,6 +2,7 @@ import type { AxiosInstance } from 'axios'
 import type { HelpersStubSchema } from './api-helpers'
 import type { ThemeContext } from './theme'
 import type { MythComponentsProps } from './plugin-props-option'
+import type { MInputProps } from './components'
 
 export interface ApiContext {
   url: string;
@@ -38,5 +39,5 @@ export interface MythApi {
    * Default is true.
    * The Length must be 10.
    */
-  mobileRule?: boolean | string | number | ((value: unknown) => number | undefined);
+  mobileRule?: MInputProps['mobile'];
 }