@mythpe/quasar-ui-qui 0.3.44 → 0.3.46

package/package.json

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

package/src/components/form/MCheckbox.vue

@@ -139,12 +139,12 @@ defineOptions({
         >
           <q-checkbox
             ref="input"
+            :model-value="value"
             v-bind="{
-              ...theme,
-              ...pluginOptions.checkbox,
+              ...theme as any,
+              ...pluginOptions.checkbox as any,
               checkedIcon: getProp('checkedIcon'),
               ...$attrs,
-              modelValue: value,
               disable: viewMode === !0 ? !0 : disable,
               autocomplete: getAutocompleteAttribute || undefined,
               label: undefined,

package/src/components/form/MPhone.vue

@@ -0,0 +1,94 @@
+<!--
+  - MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
+  - Email: mythpe@gmail.com
+  - Mobile: +966590470092
+  - Website: https://www.4myth.com
+  - Github: https://github.com/mythpe
+  -->
+
+<script lang="ts" setup>
+
+import { useFieldValue } from 'vee-validate'
+import { computed } from 'vue'
+import type { MInputSlots, MPhoneProps as Props } from '../../types'
+
+interface P {
+  name: Props['name'];
+  countryPhone?: Props['countryPhone'];
+  readonly?: Props['readonly'];
+  viewModeValue?: Props['viewModeValue'];
+  mobile?: Props['mobile'];
+  auto?: Props['auto'];
+  col?: Props['col'];
+  xs?: Props['xs'];
+  sm?: Props['sm'];
+  md?: Props['md'];
+  lg?: Props['lg'];
+  xl?: Props['xl'];
+}
+
+const props = defineProps<P>()
+const countryName = computed(() => props.countryPhone || `${props.name}_country`)
+const countryValue = useFieldValue(countryName)
+defineOptions({
+  name: 'MPhone',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <MCol
+    :class="$attrs.class"
+    v-bind="{
+      auto: auto,
+      col: col,
+      xs: xs,
+      sm: sm,
+      md: md,
+      lg: lg,
+      xl: xl,
+    }"
+  >
+    <MRow col>
+      <MMobile
+        :mobile="mobile === undefined ? !1 : mobile"
+        :name="name"
+        input-class="ltr"
+        ltr
+        prepend-icon="ion-ios-phone-portrait"
+        type="text"
+        v-bind="{
+          ...$attrs,
+          col: readonly ? 12 : 7,
+          readonly: readonly ? !1 : !countryValue,
+          viewMode: readonly,
+        }"
+      >
+        <template
+          v-for="(_,slot) in $slots as Readonly<MInputSlots>"
+          :key="slot"
+          #[slot]
+        >
+          <slot :name="slot" />
+        </template>
+      </MMobile>
+      <MAxios
+        :autocomplete="false"
+        :class="{hidden: readonly}"
+        :name="countryName"
+        :prepend-icon="$q.screen.gt.xs ? 'ion-ios-keypad' : undefined"
+        :view-mode="readonly"
+        col
+        hide-bottom-space
+        hide-dropdown-icon
+        hide-empty-list
+        hide-hint
+        no-loading
+        option-label="code_label"
+        popup-content-class="m-select__popup-phone"
+        popup-no-route-dismiss
+        service="country.codes"
+      />
+    </MRow>
+  </MCol>
+</template>

package/src/components/form/index.ts

@@ -27,6 +27,7 @@ import MMobile from './MMobile.vue'
 import MOptions from './MOptions.vue'
 import MOtp from './MOtp.vue'
 import MPassword from './MPassword.vue'
+import MPhone from './MPhone.vue'
 import MPicker from './MPicker.vue'
 import MRadio from './MRadio.vue'
 import MSelect from './MSelect.vue'
@@ -57,6 +58,7 @@ export {
   MOptions,
   MOtp,
   MPassword,
+  MPhone,
   MPicker,
   MRadio,
   MSelect,

package/src/plugin/defineAsyncComponents.ts

@@ -23,6 +23,7 @@ export const defineAsyncComponents = function (app: App) {
   app.component('MOptions', defineAsyncComponent(() => import('../components/form/MOptions.vue')))
   app.component('MOtp', defineAsyncComponent(() => import('../components/form/MOtp.vue')))
   app.component('MPassword', defineAsyncComponent(() => import('../components/form/MPassword.vue')))
+  app.component('MPhone', defineAsyncComponent(() => import('../components/form/MPhone.vue')))
   app.component('MPicker', defineAsyncComponent(() => import('../components/form/MPicker.vue')))
   app.component('MRadio', defineAsyncComponent(() => import('../components/form/MRadio.vue')))
   app.component('MSelect', defineAsyncComponent(() => import('../components/form/MSelect.vue')))

package/src/types/api/MPhone.d.ts

@@ -0,0 +1,16 @@
+/*
+ * MyTh Ahmed Faiz Copyright © 2016-2025 All rights reserved.
+ * Email: mythpe@gmail.com
+ * Mobile: +966590470092
+ * Website: https://www.4myth.com
+ * Github: https://github.com/mythpe
+ */
+
+import type { MInputProps } from './MInput'
+
+export type MPhoneProps = MInputProps & {
+  /**
+   * Name of country phone. default: $name_country
+   */
+  countryPhone?: string;
+}

package/src/types/components.d.ts

@@ -52,6 +52,7 @@ import type { MInputLabelProps, MInputLabelSlots } from './api/MInputLabel'
 import type { MOptionsProps, MOptionsSlots } from './api/MOptions'
 import type { MOtpProps, MOtpSlots } from './api/MOtp'
 import type { MPasswordProps } from './api/MPassword'
+import type { MPhoneProps } from './api/MPhone'
 import type { MPickerProps, MPickerSlots } from './api/MPicker'
 import type { MRadioProps, MRadioSlots } from './api/MRadio'
 import type { MTimeProps, MTimeSlots } from './api/MTime'
@@ -95,6 +96,7 @@ declare module '@vue/runtime-core' {
     MOptions: GlobalComponentConstructor<MOptionsProps, MOptionsSlots>;
     MOtp: GlobalComponentConstructor<MOtpProps, MOtpSlots>;
     MPassword: GlobalComponentConstructor<MPasswordProps, MInputSlots>;
+    MPhone: GlobalComponentConstructor<MPhoneProps, MInputSlots>;
     MPicker: GlobalComponentConstructor<MPickerProps, MPickerSlots>;
     MRadio: GlobalComponentConstructor<MRadioProps, MRadioSlots>;
     MSelect: GlobalComponentConstructor<MSelectProps, MSelectSlots>;

package/src/types/index.d.ts

@@ -90,6 +90,7 @@ export { MFileProps } from './api/MFile'
 export { MEditorSlots } from './api/MEditor'
 export { MEditorProps } from './api/MEditor'
 export { MPasswordProps } from './api/MPassword'
+export { MPhoneProps } from './api/MPhone'
 export { MInputLabelSlots } from './api/MInputLabel'
 export { MInputLabelProps } from './api/MInputLabel'
 export { MInputSlots } from './api/MInput'