@mythpe/quasar-ui-qui 0.1.85 → 0.1.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.1.85",
+  "version": "0.1.87",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": {
     "name": "MyTh Ahmed Faiz",
@@ -33,7 +33,6 @@
     "axios": "^1.7.8",
     "change-case": "^5.4.4",
     "ckeditor5": "^43.3.1",
-    "pluralize": "^8.0.0",
     "qs": "^6.13.1",
     "radash": "^12.1.0",
     "typed.js": "^2.1.0",
@@ -50,7 +49,6 @@
     "@rollup/plugin-replace": "^6.0.1",
     "@types/express": "^5.0.0",
     "@types/node": "^22.10.1",
-    "@types/pluralize": "^0.0.33",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
     "autoprefixer": "^10.4.20",

package/src/components/form/MMobile.vue

@@ -11,13 +11,30 @@
   setup
 >
 import type { MInputProps as Props, MInputSlots } from '../../types'
-import { 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(field.value)
+  }
+  if (final === !0) {
+    return 10
+  }
+  if (!final) {
+    return undefined
+  }
+  return parseInt(final?.toString() || '0') || undefined
+})
 defineExpose<{ input: typeof input }>({ input })
 defineOptions({
   name: 'MMobile',
@@ -29,7 +46,15 @@ defineOptions({
   <MInput
     ref="input"
     v-model="modelValue"
-    v-bind="{ type: 'tel', mobile, maxlength:mobile === !0 ? 10 : (mobile ?? 10), ...pluginOptions.mobile as any, ...$attrs }"
+    v-bind="{
+      type: 'tel',
+      mobile: typeof mobile === 'function' ? mobile(field) : (
+        mobile !== !1 && mobile !== undefined && mobile !== null
+      ),
+      maxlength: mobileLength,
+      ...pluginOptions.mobile as any,
+      ...$attrs
+    }"
   >
     <template
       v-for="(_,slot) in $slots as Readonly<MInputSlots>"

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;
+  mobileRule?: MInputProps['mobile'];
 }