@mythpe/quasar-ui-qui 0.0.25-dev → 0.0.26-dev

package/package.json

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

package/src/components/form/MAxios.vue

@@ -0,0 +1,141 @@
+<!--
+  - 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 type { MAxiosProps as Props, MSelectModelEmit } from '../../types'
+import type { QSelectSlots } from 'quasar'
+import { computed, onMounted, ref, toValue, watch } from 'vue'
+import { useSetFieldValue } from 'vee-validate'
+import MSelect from './MSelect.vue'
+import { useMyth } from '../../composable'
+
+type P = {
+  name: Props['name'];
+  label?: Props['label'];
+  placeholder?: Props['placeholder'];
+  viewMode?: Props['viewMode'];
+  viewModeValue?: Props['viewModeValue'];
+  service?: Props['service'];
+  guest?: Props['guest'];
+  requestWith?: Props['requestWith'];
+  params?: Props['params'];
+  lazy?: Props['lazy'];
+  useChoice?: Props['useChoice'];
+}
+
+const props = withDefaults(defineProps<P>(), {
+  name: () => '',
+  label: undefined,
+  placeholder: undefined,
+  viewMode: () => !1,
+  viewModeValue: undefined,
+  service: undefined,
+  guest: undefined,
+  requestWith: undefined,
+  params: () => () => ({}),
+  lazy: () => !1,
+  useChoice: undefined
+})
+const modelValue = defineModel<Props['modelValue']>({ required: !1, default: undefined })
+type Emits = {
+  (e: 'model', value: MSelectModelEmit): void;
+}
+const emit = defineEmits<Emits>()
+const search = defineModel<string>('search', { required: !1, default: '' })
+const setFieldValue = useSetFieldValue(() => props.name)
+const { alertError, api } = useMyth()
+const loading = defineModel<Props['loading']>('loading', { required: !1, default: !1 })
+const items = defineModel<Props['items']>('items', { required: !1, default: [] })
+const isGuest = computed(() => {
+  const v = toValue(props.guest)
+  return v !== undefined && v !== null && v !== !1
+})
+const prepare = async (fromWatch = !1) => {
+  if (!props.service || loading.value) {
+    return
+  }
+  const method = typeof props.service === 'string'
+    ? (isGuest.value ? api.value[props.service].staticIndex : api.value[props.service].index)
+    : props.service
+  if (!method) {
+    throw Error(`No service: ${props.service}`)
+  }
+  const params: any = {
+    requestWith: undefined,
+    search: search.value,
+    itemsPerPage: -1,
+    page: 1,
+    staticRequest: 1,
+    ...(toValue(props.params) || {})
+  }
+  if (props.requestWith) {
+    params.requestWith = toValue(props.requestWith)
+  }
+  loading.value = !0
+  items.value = []
+  method({ params })
+    .then(({ _data }: any) => {
+      items.value = _data || []
+    })
+    .catch((e: any) => {
+      alertError(e?.message || 'An error occurred')
+    })
+    .finally(() => {
+      loading.value = !1
+      if (fromWatch) {
+        if (modelValue.value !== null && modelValue.value !== undefined) {
+          setFieldValue(undefined)
+        }
+      }
+    })
+}
+const listeners = {
+  'update:search': prepare,
+  model: (v: MSelectModelEmit) => emit('model', v)
+}
+onMounted(() => {
+  if (!props.lazy) {
+    prepare()
+  }
+})
+watch(props.params, () => prepare(!0), { deep: !0 })
+const input = ref<InstanceType<typeof MSelect> | null>(null)
+defineExpose<{ input: typeof input }>({ input })
+defineOptions({ name: 'MAxios', inheritAttrs: !1 })
+</script>
+
+<template>
+  <MSelect
+    ref="input"
+    v-model="modelValue"
+    v-model:loading="loading"
+    v-model:search="search"
+    :label="label"
+    :name="name"
+    :options="items"
+    :placeholder="placeholder"
+    :view-mode="viewMode"
+    :view-mode-value="viewModeValue"
+    axios-mode
+    no-filter
+    v-bind="$attrs"
+    v-on="listeners"
+  >
+    <template
+      v-for="(_,slot) in $slots as Readonly<QSelectSlots>"
+      :key="slot"
+      #[slot]="inputSlot"
+    >
+      <slot
+        :name="slot"
+        v-bind="inputSlot || {}"
+      />
+    </template>
+  </MSelect>
+</template>

package/src/components/form/MForm.vue

@@ -18,11 +18,11 @@ interface P {
   opts?: Props['opts'];
   target?: Props['target'];
   emitValues?: Props['emitValues'];
-  readonly state?: Props['state'];
-  readonly form?: Props['form'];
-  readonly values?: Props['values'];
-  readonly errors?: Props['errors'];
-  readonly padding?: Props['padding'];
+  state?: Props['state'];
+  form?: Props['form'];
+  values?: Props['values'];
+  errors?: Props['errors'];
+  padding?: Props['padding'];
 }
 
 const props = withDefaults(defineProps<P>(), {
@@ -37,7 +37,7 @@ const props = withDefaults(defineProps<P>(), {
   padding: undefined
 })
 const formScope = useForm<Record<string, any>>(props.opts)
-const myth = useMyth()
+const { __, scrollToElementFromErrors } = useMyth()
 const scope = reactive(formScope)
 const { handleSubmit, resetForm, setErrors, setValues } = scope
 type Emits = {
@@ -48,8 +48,8 @@ const onSuccessSubmission: SubmissionHandler = async (values, ctx) => emit('subm
 const onErrorSubmission: InvalidSubmissionHandler = ({ errors }) => {
   const keys: any[] = Object.keys(errors)
   if (keys.length) {
-    const message = errors[keys[0]] as string || myth.__('messages.the_given_data_was_invalid')
-    myth.helpers.scrollToElementFromErrors({ [keys[0]]: [message] }, undefined, props.target)
+    const message = errors[keys[0]] as string || __('messages.the_given_data_was_invalid')
+    scrollToElementFromErrors({ [keys[0]]: [message] }, undefined, props.target)
   }
 }
 const defaultSubmit = props.emitValues ? handleSubmit(onSuccessSubmission, onErrorSubmission) : handleSubmit.withControlled(onSuccessSubmission,

package/src/components/form/MPassword.vue

@@ -0,0 +1,73 @@
+<!--
+  - 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 type { MInputSlots, MPasswordProps as Props } from '../../types'
+import MInput from './MInput.vue'
+import { ref, useTemplateRef } from 'vue'
+
+type P = {
+  name?: Props['name'];
+  icon?: Props['icon'];
+  noToggle?: Props['noToggle'];
+}
+
+withDefaults(defineProps<P>(), {
+  name: () => '',
+  icon: () => !1,
+  noToggle: () => !1
+})
+const modelValue = defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const inputType = ref<'text' | 'password'>('password')
+const togglePassword = () => {
+  inputType.value = inputType.value === 'text' ? 'password' : 'text'
+}
+const input = useTemplateRef<InstanceType<typeof MInput>>('input')
+defineExpose<{ input: typeof input }>({ input })
+defineOptions({
+  name: 'MPassword',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <MInput
+    ref="input"
+    v-model="modelValue"
+    :name="name"
+    v-bind="{...$attrs,type:inputType}"
+  >
+    <template
+      v-if="icon && !Boolean($slots.prepend)"
+      #prepend
+    >
+      <q-icon name="password" />
+    </template>
+    <template
+      v-if="!noToggle && !Boolean($slots.prepend)"
+      #append
+    >
+      <q-btn
+        :icon="'ion-ios-eye' + (inputType !== 'password' ? '-off' : '')"
+        flat
+        round
+        @click="togglePassword()"
+      />
+    </template>
+    <template
+      v-for="(_,slot) in $slots as Readonly<MInputSlots>"
+      :key="slot"
+      #[slot]
+    >
+      <slot :name="slot" />
+    </template>
+  </MInput>
+</template>

package/src/components/form/index.ts

@@ -6,6 +6,7 @@
  * Github: https://github.com/mythpe
  */
 
+import MAxios from './MAxios.vue'
 import MAvatarViewer from './MAvatarViewer.vue'
 import MBtn from './MBtn.vue'
 import MCheckbox from './MCheckbox.vue'
@@ -22,12 +23,14 @@ import MInput from './MInput.vue'
 import MInputFieldControl from './MInputFieldControl.vue'
 import MInputLabel from './MInputLabel.vue'
 import MMobile from './MMobile.vue'
+import MPassword from './MPassword.vue'
 import MPicker from './MPicker.vue'
 import MRadio from './MRadio.vue'
 import MSelect from './MSelect.vue'
 import MTime from './MTime.vue'
 
 export {
+  MAxios,
   MAvatarViewer,
   MBtn,
   MCheckbox,
@@ -44,6 +47,7 @@ export {
   MInputFieldControl,
   MInputLabel,
   MMobile,
+  MPassword,
   MPicker,
   MRadio,
   MSelect,

package/src/components/grid/MBlock.vue

@@ -54,7 +54,6 @@ defineOptions({
     }"
     v-bind="$attrs"
   >
-    {{ getRounded }}
     <slot />
   </div>
 </template>

package/src/composable/useMyth.ts

@@ -10,8 +10,9 @@ import lodash from 'lodash'
 import { useI18n } from 'vue-i18n'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import { copyToClipboard, Dialog, extend, QDialogOptions, QNotifyCreateOptions, useQuasar } from 'quasar'
-import { Helpers, myth, Str } from '../utils'
+import { Helpers, myth, Str, veeRules } from '../utils'
 import type { MDtColumn, MDtHeadersParameter, ParseHeaderOptions, Vue3MAlertMessage, Vue3MAlertMessageOptions, Vue3MConfirmMessage } from '../types'
+import { computed } from 'vue'
 
 export const useMyth = () => {
   const { t, te } = useI18n({ useScope: 'global' })
@@ -20,275 +21,282 @@ export const useMyth = () => {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   const __ = (key: any, ...rest: unknown[]) => !key ? '' : te(`attributes.${key}`) ? t(`attributes.${key}`, ...rest) : te(key) ? t(key, ...rest) : key
-
-  function quasarNotifyOptions (opts: QNotifyCreateOptions | string): QNotifyCreateOptions {
-    return {
-      badgeColor: 'primary',
-      progress: !0,
-      ...pluginOptions.value.notify as any,
-      message: typeof opts === 'string' ? opts : opts.message,
-      ...(typeof opts !== 'string' ? opts : {})
+  const getPageTitle = (route: RouteLocationNormalizedLoaded, number?: number | string): string => {
+    number = number || 2
+    number = parseInt(number.toString())
+    const defaultValue = ''
+    // Not is route
+    // No page title
+    if (!route) {
+      return defaultValue
     }
-  }
-
-  function alertMessage (opts: Vue3MAlertMessageOptions): Vue3MAlertMessage {
-    return q.notify(helpers.quasarNotifyOptions(opts))
-  }
 
-  const helpers = {
-    getPageTitle (route: RouteLocationNormalizedLoaded, number?: number | string): string {
-      number = number || 2
-      number = parseInt(number.toString())
-      const defaultValue = ''
-      // Not is route
-      // No page title
-      if (!route) {
-        return defaultValue
-      }
+    const routePath = route?.path?.toString() || null
+    const routeName = route?.name?.toString() || null
 
-      const routePath = route?.path?.toString() || null
-      const routeName = route?.name?.toString() || null
+    // Not is route
+    // No page title
+    if (!routePath || !routeName) {
+      return defaultValue
+    }
 
-      // Not is route
-      // No page title
-      if (!routePath || !routeName) {
-        return defaultValue
-      }
+    let lastRouteName = routeName.split('.').pop() || ''
+    if (lastRouteName === 'index') {
+      const s = routeName.split('.')
+      lastRouteName = s[s.length - 2] ?? lastRouteName
+    }
+    const pluralize = Str.pascalCase(lodash.pluralize(lastRouteName))
+    const singular = Str.pascalCase(lodash.singularize(lastRouteName))
+    const keys = lodash.filter(lodash.uniq([
+      `${lastRouteName}Page.title`,
+      `${lodash.camelCase(lastRouteName)}Page.title`,
+      `choice.${pluralize}`,
+      `choice.${singular}`,
+      `replace.${lastRouteName}_details`,
+      `replace.${lastRouteName}`,
+      pluralize,
+      lodash.snakeCase(pluralize),
+      singular,
+      lodash.snakeCase(singular)
+    ]))
 
-      let lastRouteName = routeName.split('.').pop() || ''
-      if (lastRouteName === 'index') {
-        const s = routeName.split('.')
-        lastRouteName = s[s.length - 2] ?? lastRouteName
-      }
-      const pluralize = Str.pascalCase(lodash.pluralize(lastRouteName))
-      const singular = Str.pascalCase(lodash.singularize(lastRouteName))
-      const keys = lodash.filter(lodash.uniq([
-        `${lastRouteName}Page.title`,
-        `${lodash.camelCase(lastRouteName)}Page.title`,
-        `choice.${pluralize}`,
-        `choice.${singular}`,
-        `replace.${lastRouteName}_details`,
-        `replace.${lastRouteName}`,
-        pluralize,
-        lodash.snakeCase(pluralize),
-        singular,
-        lodash.snakeCase(singular)
-      ]))
+    let str: string | null = null
+    let k: string | any
 
-      let str: string | null = null
-      let k: string | any
+    if (te((k = `routes.${routeName}`)) && lodash.isString((str = t(k)))) {
+      return str
+    }
 
-      if (te((k = `routes.${routeName}`)) && lodash.isString((str = t(k)))) {
-        return str
-      }
+    if (te((k = `routes.${routePath}`)) && lodash.isString((str = t(k)))) {
+      return str
+    }
 
-      if (te((k = `routes.${routePath}`)) && lodash.isString((str = t(k)))) {
-        return str
+    for (const f in keys) {
+      if (!(k = keys[f])) {
+        continue
       }
-
-      for (const f in keys) {
-        if (!(k = keys[f])) {
-          continue
-        }
-        if (te && te(k) && lodash.isString(t(k))) {
-          if (lodash.startsWith(k, 'choice.')) {
-            const s = k.split('.')
-            const n = routeName.split('.')
-            if (s.length === 2 && n.length > 1) {
-              const model = n[n.length - 2]
-              const pluralizeModel = lodash.pluralize(lodash.pascalCase(model))
-              const _modelChoiceKey = `choice.${pluralizeModel}`
-              if (te(_modelChoiceKey)) {
-                const l = t(_modelChoiceKey, number as any)
-                const rep = lodash.singularize(n[n.length - 1]).toLocaleLowerCase()
-                const e = `replace.${rep}`
-                str = te(e) ? t(e, { name: l }) : null
-              } else {
-                const pop: string = k.split('.').pop() || ''
-                str = te(k) ? t(k, number as any, { [pop]: number }) : null
-              }
+      if (te && te(k) && lodash.isString(t(k))) {
+        if (lodash.startsWith(k, 'choice.')) {
+          const s = k.split('.')
+          const n = routeName.split('.')
+          if (s.length === 2 && n.length > 1) {
+            const model = n[n.length - 2]
+            const pluralizeModel = lodash.pluralize(lodash.pascalCase(model))
+            const _modelChoiceKey = `choice.${pluralizeModel}`
+            if (te(_modelChoiceKey)) {
+              const l = t(_modelChoiceKey, number as any)
+              const rep = lodash.singularize(n[n.length - 1]).toLocaleLowerCase()
+              const e = `replace.${rep}`
+              str = te(e) ? t(e, { name: l }) : null
             } else {
               const pop: string = k.split('.').pop() || ''
               str = te(k) ? t(k, number as any, { [pop]: number }) : null
             }
           } else {
-            const parents: string[] = routeName.split('.')
-            if (parents.length > 1) {
-              const e = `choice.${Str.pascalCase(lodash.pluralize(parents[parents.length - 2]))}`
-              str = te(e) ? t(k, { name: t(e, '1') }) : null
-            } else {
-              str = te(k) ? t(k, { name: '' }) : null
-            }
+            const pop: string = k.split('.').pop() || ''
+            str = te(k) ? t(k, number as any, { [pop]: number }) : null
+          }
+        } else {
+          const parents: string[] = routeName.split('.')
+          if (parents.length > 1) {
+            const e = `choice.${Str.pascalCase(lodash.pluralize(parents[parents.length - 2]))}`
+            str = te(e) ? t(k, { name: t(e, '1') }) : null
+          } else {
+            str = te(k) ? t(k, { name: '' }) : null
           }
-          return str || defaultValue
         }
+        return str || defaultValue
       }
-      return defaultValue
-    },
-    /**
-     * Custom transformer
-     * @param headers
-     * @param options
-     */
-    parseHeaders (headers: MDtHeadersParameter, options: ParseHeaderOptions = {}): MDtColumn[] {
-      const defaultOptions: Partial<ParseHeaderOptions> = {
-        controlKey: 'control',
-        // controlStyle: 'max-width: 150px',
-        align: 'center'
-        // sortable: !0
-      }
-      const opts = extend<ParseHeaderOptions>(!0, defaultOptions, options)
-      let control: string | undefined = defaultOptions.controlKey
-      let controlStyle: string | undefined = defaultOptions.controlStyle
-      if (opts.controlKey) {
-        control = opts.controlKey
-        delete opts.controlKey
+    }
+    return defaultValue
+  }
+  /**
+   * Custom transformer
+   * @param headers
+   * @param options
+   */
+  const parseHeaders = (headers: MDtHeadersParameter, options: ParseHeaderOptions = {}): MDtColumn[] => {
+    const defaultOptions: Partial<ParseHeaderOptions> = {
+      controlKey: 'control',
+      // controlStyle: 'max-width: 150px',
+      align: 'center'
+      // sortable: !0
+    }
+    const opts = extend<ParseHeaderOptions>(!0, defaultOptions, options)
+    let control: string | undefined = defaultOptions.controlKey
+    let controlStyle: string | undefined = defaultOptions.controlStyle
+    if (opts.controlKey) {
+      control = opts.controlKey
+      delete opts.controlKey
+    }
+    if (opts.controlStyle) {
+      controlStyle = opts.controlStyle
+      delete opts.controlStyle
+    }
+
+    const result: MDtColumn[] = []
+
+    headers.forEach((elm: string | MDtColumn | undefined) => {
+      if (typeof elm !== 'string' && !elm?.name) return elm
+      // Todo: will do this
+      let item: MDtColumn = typeof elm === 'string' ? {
+        name: elm as string,
+        label: elm as string,
+        field: elm as string
+      } : { ...elm }
+      item.name = item.name ?? ''
+      item.label = (item.label === undefined || item.label === null) ? item.name : item.label
+      item.field = (item.field === undefined || item.field === null) ? item.name : item.field
+      item = {
+        ...item,
+        name: Str.strBefore(Str.strBefore(item.name), 'ToString'),
+        label: (item.label !== undefined && item.label !== null) ? Str.strBefore(Str.strBefore(item.label), 'ToString') : item.label
       }
-      if (opts.controlStyle) {
-        controlStyle = opts.controlStyle
-        delete opts.controlStyle
+      const name = item.name
+      let k
+      if (te) {
+        if (te((k = `attributes.${item.label}`))) {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          item.label = t(k)
+        } else if (te((k = `attributes.${lodash.snakeCase(item.label)}`))) {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          item.label = t(k)
+        } else if (te((k = `attributes.${lodash.camelCase(item.label)}`))) {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          item.label = t(k)
+        } else if (te((k = `attributes.${Str.pascalCase(item.label)}`))) {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          item.label = t(k)
+        } else if (te((k = `choice.${lodash.pluralize(Str.pascalCase(item.label))}`))) {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          item.label = t(k, 2)
+        } else if (te((k = item.label))) {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          item.label = t(k)
+        }
       }
 
-      const result: MDtColumn[] = []
-
-      headers.forEach((elm: string | MDtColumn | undefined) => {
-        if (typeof elm !== 'string' && !elm?.name) return elm
-        // Todo: will do this
-        let item: MDtColumn = typeof elm === 'string' ? {
-          name: elm as string,
-          label: elm as string,
-          field: elm as string
-        } : { ...elm }
-        item.name = item.name ?? ''
-        item.label = (item.label === undefined || item.label === null) ? item.name : item.label
-        item.field = (item.field === undefined || item.field === null) ? item.name : item.field
-        item = {
-          ...item,
-          name: Str.strBefore(Str.strBefore(item.name), 'ToString'),
-          label: (item.label !== undefined && item.label !== null) ? Str.strBefore(Str.strBefore(item.label), 'ToString') : item.label
+      if (name === control) {
+        if (controlStyle && !item.style) {
+          item.style = controlStyle + (item.style ? ` ${item.style}` : '')
         }
-        const name = item.name
-        let k
-        if (te) {
-          if (te((k = `attributes.${item.label}`))) {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            item.label = t(k)
-          } else if (te((k = `attributes.${lodash.snakeCase(item.label)}`))) {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            item.label = t(k)
-          } else if (te((k = `attributes.${lodash.camelCase(item.label)}`))) {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            item.label = t(k)
-          } else if (te((k = `attributes.${Str.pascalCase(item.label)}`))) {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            item.label = t(k)
-          } else if (te((k = `choice.${lodash.pluralize(Str.pascalCase(item.label))}`))) {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            item.label = t(k, 2)
-          } else if (te((k = item.label))) {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            item.label = t(k)
-          }
+        item.headerClasses = (item.headerClasses ? item.headerClasses : '') + ' m--control-header'
+        item.headerClasses = item.headerClasses.trim()
+        item.sortable = !1
+        if (!item.align) {
+          item.align = 'right'
         }
-
-        if (name === control) {
-          if (controlStyle && !item.style) {
-            item.style = controlStyle + (item.style ? ` ${item.style}` : '')
-          }
-          item.headerClasses = (item.headerClasses ? item.headerClasses : '') + ' m--control-header'
-          item.headerClasses = item.headerClasses.trim()
-          item.sortable = !1
-          if (!item.align) {
-            item.align = 'right'
-          }
-          opts.classes = opts.classes || ''
-          if (typeof opts.classes === 'function') {
-            opts.classes = opts.classes()
-          }
-          opts.classes += ' m--control-cell'
-          opts.classes = opts.classes.trim()
+        opts.classes = opts.classes || ''
+        if (typeof opts.classes === 'function') {
+          opts.classes = opts.classes()
         }
+        opts.classes += ' m--control-cell'
+        opts.classes = opts.classes.trim()
+      }
 
-        item = { ...opts, ...item }
+      item = { ...opts, ...item }
 
-        if (item.sortable === undefined && (options.noSort ?? []).length > 0 && options.noSort?.includes(item.name)) {
-          item.sortable = !1
-        } else if (item.sortable === undefined) {
-          item.sortable = !0
-        }
-        result.push(item)
-      })
-      return lodash.uniqBy(result, (e: MDtColumn) => e.name)
-    },
-    /**
-     * Copy text
-     * @param text
-     */
-    copyText: async (text: string | any) => copyToClipboard(text),
-    quasarNotifyOptions,
-    alertMessage,
-    alertSuccess (message: string) {
-      return alertMessage({ type: 'positive', message })
-    },
-    alertError (message: string) {
-      return alertMessage({ type: 'negative', message })
-    },
-    confirmMessage (message?: string, title?: string, opts?: QDialogOptions): Vue3MConfirmMessage {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      title = title || t('messages.are_you_sure') || ''
-      message = message || ''
-      opts = opts || {}
-      const buttonsProps = {
-        ...(pluginOptions.value.btn || {})
-        // ...(options.value.confirmDialogOptions?.buttons || {})
+      if (item.sortable === undefined && (options.noSort ?? []).length > 0 && options.noSort?.includes(item.name)) {
+        item.sortable = !1
+      } else if (item.sortable === undefined) {
+        item.sortable = !0
       }
-      // const okProps = options.value.confirmDialogOptions?.okProps || {}
-      const okProps: any = {}
-      // const cancelProps = options.value.confirmDialogOptions?.cancelProps || {}
-      const cancelProps: any = {}
-      // const dialogProps = options.value.confirmDialog || {} as any
-      const dialogProps: any = {}
-      dialogProps.transitionShow = dialogProps.transitionShow || 'jump-down'
-      dialogProps.transitionHide = dialogProps.transitionHide || 'jump-up'
-      dialogProps.class = ('m--confirm ') + (dialogProps.class || '')
-      return Dialog.create({
-        title,
-        message,
-        focus: 'none',
-        cancel: {
-          color: cancelProps.color || 'positive',
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          label: t(cancelProps?.label || 'no'),
-          ...buttonsProps as any,
-          flat: !0,
-          unelevated: !0,
-          ...cancelProps as any
-        },
-        ok: {
-          color: okProps.color || 'negative',
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          label: t(okProps?.label || 'yes'),
-          ...buttonsProps as any,
-          flat: !0,
-          unelevated: !0,
-          ...okProps as any
-        },
-        persistent: !0,
-        ...dialogProps as any,
-        ...opts as any
-      })
-    },
-    ...Helpers
+      result.push(item)
+    })
+    return lodash.uniqBy(result, (e: MDtColumn) => e.name)
   }
+  /**
+   * Copy text
+   * @param text
+   */
+  const copyText = async (text: string | any) => copyToClipboard(text)
 
-  return { __, helpers }
+  const quasarNotifyOptions = (opts: QNotifyCreateOptions | string): QNotifyCreateOptions => {
+    return {
+      badgeColor: 'primary',
+      progress: !0,
+      ...pluginOptions.value.notify as any,
+      message: typeof opts === 'string' ? opts : opts.message,
+      ...(typeof opts !== 'string' ? opts : {})
+    }
+  }
+  const alertMessage = (opts: Vue3MAlertMessageOptions): Vue3MAlertMessage => {
+    return q.notify(quasarNotifyOptions(opts))
+  }
+  const alertSuccess = (message: string) => {
+    return alertMessage({ type: 'positive', message })
+  }
+  const alertError = (message: string) => {
+    return alertMessage({ type: 'negative', message })
+  }
+  const confirmMessage = (message?: string, title?: string, opts?: QDialogOptions): Vue3MConfirmMessage => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    title = title || t('messages.are_you_sure') || ''
+    message = message || ''
+    opts = opts || {}
+    const buttonsProps = {
+      ...(pluginOptions.value.btn || {})
+      // ...(options.value.confirmDialogOptions?.buttons || {})
+    }
+    // const okProps = options.value.confirmDialogOptions?.okProps || {}
+    const okProps: any = {}
+    // const cancelProps = options.value.confirmDialogOptions?.cancelProps || {}
+    const cancelProps: any = {}
+    // const dialogProps = options.value.confirmDialog || {} as any
+    const dialogProps: any = {}
+    dialogProps.transitionShow = dialogProps.transitionShow || 'jump-down'
+    dialogProps.transitionHide = dialogProps.transitionHide || 'jump-up'
+    dialogProps.class = ('m--confirm ') + (dialogProps.class || '')
+    return Dialog.create({
+      title,
+      message,
+      focus: 'none',
+      cancel: {
+        color: cancelProps.color || 'positive',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        label: t(cancelProps?.label || 'no'),
+        ...buttonsProps as any,
+        flat: !0,
+        unelevated: !0,
+        ...cancelProps as any
+      },
+      ok: {
+        color: okProps.color || 'negative',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        label: t(okProps?.label || 'yes'),
+        ...buttonsProps as any,
+        flat: !0,
+        unelevated: !0,
+        ...okProps as any
+      },
+      persistent: !0,
+      ...dialogProps as any,
+      ...opts as any
+    })
+  }
+  const api = computed(() => myth.api.value)
+  return {
+    api,
+    __,
+    getPageTitle,
+    parseHeaders,
+    copyText,
+    quasarNotifyOptions,
+    alertMessage,
+    alertSuccess,
+    alertError,
+    confirmMessage,
+    ...Helpers,
+    ...Str,
+    veeRules
+  }
 }

package/src/types/api-helpers.d.ts

@@ -81,8 +81,8 @@ export type ParamsType = Record<string, any> | FormData | object
 export type ConfigType = AxiosRequestConfig<ApiInterface> & Partial<{
   params: Partial<ApiServiceParams> & Generic
 }>
-export type HelpersStubSchema = {
 
+export type HelpersStubSchema = {
   index (config?: ConfigType): Promise<ApiInterface>;
 
   staticIndex (config?: ConfigType): Promise<ApiInterface>;
@@ -108,11 +108,14 @@ export type HelpersStubSchema = {
   deleteAttachment (id: UrlType, fileId: string | number, config?: AxiosRequestConfig): Promise<ApiInterface>;
 
   updateAttachment (id: UrlType, fileId: string | number, data: Record<string, any>, config?: AxiosRequestConfig): Promise<ApiInterface>;
-};
+
+} | (HelpersStubSchema & Record<string, HelpersStubSchema | ((...args: any) => Promise<ApiInterface>)>)
+
 export type StubSchemaContext = HelpersStubSchema
   & Record<string, ((...args: any) => Promise<ApiInterface>)>
   & Record<string, Record<string, ((...args: any) => Promise<ApiInterface>)>>
   & Record<string, Record<string, Record<string, ((...args: any) => Promise<ApiInterface>)>>>
+
 export type StubSchema = StubSchemaContext
   & ((...args: any) => Promise<ApiInterface>)
   & string

package/src/types/components.d.ts

@@ -28,10 +28,19 @@ import type {
   QTableProps,
   QTimeProps
 } from 'quasar'
-import type { MaybeRefOrGetter, TransitionGroupProps, TransitionProps, UnwrapNestedRefs, VNode } from 'vue'
+import type {
+  ComputedRef,
+  MaybeRefOrGetter,
+  Ref,
+  ShallowRef,
+  TransitionGroupProps,
+  TransitionProps,
+  UnwrapNestedRefs,
+  VNode,
+  WritableComputedRef
+} from 'vue'
 import type { TypedOptions } from 'typed.js'
 import type { FieldContext, FieldOptions, FormContext, FormOptions, FormState } from 'vee-validate'
-
 import type { ThemeShadow, ThemeSize } from './theme'
 import type {
   GenericMDtBtn,
@@ -43,15 +52,16 @@ import type {
   MDtServiceNameStringProp
 } from './dt'
 import type { RouteLocationRaw } from 'vue-router'
+import type { AxiosRequestConfig } from 'axios'
 
-export type MTransitionProps = TransitionGroupProps & {
+export interface MTransitionProps extends TransitionGroupProps {
   enterIn?: string;
   enterOut?: string;
   slowIn?: boolean;
   slowOut?: boolean;
 }
 
-export type MTransitionsSlots = {
+export interface MTransitionsSlots {
   default: () => VNode[];
 }
 
@@ -146,7 +156,7 @@ export interface MColumnSlots {
   default?: () => VNode[];
 }
 
-export type MContainerProps = {
+export interface MContainerProps {
   size?: ThemeSize | string | undefined;
   dense?: boolean | undefined;
   fluid?: boolean | undefined;
@@ -255,7 +265,7 @@ export type InputFormErrorsContext = Record<string, InputErrorsContext> | undefi
 
 export type MAvatarViewerModelValue = File | null | undefined;
 
-export type MAvatarViewerProps = QAvatarProps & MColProps & {
+export interface MAvatarViewerProps extends QAvatarProps, MColProps {
   /**
    * Comma separated list of unique file type specifiers. Maps to 'accept' attribute of native input type=file element
    */
@@ -475,11 +485,31 @@ export interface MInputSlots extends QInputSlots, QFieldSlots, BaseInputsSlots {
   //
 }
 
-export type MEditorProps = Omit<QEditorProps, 'modelValue' | 'placeholder'> & BaseInputsProps
-export type MEditorSlots = QEditorSlots & BaseInputsSlots
+export interface MPasswordProps extends MInputProps {
+  /**
+   * icon prepend it to password input.
+   */
+  icon?: boolean | undefined;
+  /**
+   * toggle password append icon.
+   */
+  noToggle?: boolean | undefined;
+}
+
+export interface MEditorProps extends Omit<QEditorProps, 'modelValue' | 'placeholder'>, BaseInputsProps {
+  //
+}
+
+export interface MEditorSlots extends QEditorSlots, BaseInputsSlots {
+  //
+}
 
-export type MSelectModelEmit = { value: any | null; model: object | null }
-export type MSelectProps = Omit<QSelectProps, 'rules' | 'name' | 'modelValue' | 'label' | 'hint' | 'autocomplete'> & BaseInputsProps & {
+export interface MSelectModelEmit {
+  value: any | null;
+  model: object | null;
+}
+
+export interface MSelectProps extends Omit<QSelectProps, 'rules' | 'name' | 'modelValue' | 'label' | 'hint' | 'autocomplete'>, BaseInputsProps {
   /**
    * Input search functionality. useInput prop for this feature.
    */
@@ -506,12 +536,12 @@ export type MSelectProps = Omit<QSelectProps, 'rules' | 'name' | 'modelValue' |
    */
   // iniData?: boolean;
 }
-export type MSelectSlots = QInputSlots & QFieldSlots & BaseInputsSlots
 
-export type MFileProps =
-  Omit<QFileProps, 'modelValue' | 'rules' | 'name' | 'label' | 'hint'>
-  & Omit<BaseInputsProps, 'autocomplete'>
-  & {
+export interface MSelectSlots extends QInputSlots, QFieldSlots, BaseInputsSlots {
+  //
+}
+
+export interface MFileProps extends Omit<QFileProps, 'modelValue' | 'rules' | 'name' | 'label' | 'hint'>, Omit<BaseInputsProps, 'autocomplete'> {
   accept?: string | undefined;
   images?: boolean;
   svg?: boolean;
@@ -520,7 +550,9 @@ export type MFileProps =
   excel?: boolean;
 }
 
-export type MFileSlots = QFileSlots & BaseInputsSlots
+export interface MFileSlots extends QFileSlots, BaseInputsSlots {
+  //
+}
 
 export interface BaseCheckboxProps extends Omit<BaseInputsProps, 'topLabel'> {
   /**
@@ -600,11 +632,19 @@ export interface MTimeSlots extends MPickerSlots {
   //
 }
 
-export type MFieldProps = Omit<MInputProps, 'viewMode' | 'viewModeValue' | 'fieldOptions'>
-export type MFieldSlots = MInputSlots
+export interface MFieldProps extends Omit<MInputProps, 'viewMode' | 'viewModeValue' | 'fieldOptions'> {
+  //
+}
+
+export interface MFieldSlots extends MInputSlots {
+  //
+}
+
+export interface MHiddenInputSlots {
+  [key: string]: () => VNode[]
+}
 
-export type MHiddenInputSlots = object
-export type MHiddenInputProps = Pick<BaseInputFormProps, 'rules' | 'required'> & {
+export interface MHiddenInputProps extends Pick<BaseInputFormProps, 'rules' | 'required'> {
   /**
    * Input name.
    */
@@ -615,14 +655,19 @@ export type MHiddenInputProps = Pick<BaseInputFormProps, 'rules' | 'required'> &
   modelValue?: any;
 }
 
-export type MHiddenProps = MHiddenInputProps & Pick<ViewModeProps, 'viewMode'> & Omit<MColProps, 'name'>
-export type MHiddenSlots = {
+export interface MHiddenProps extends MHiddenInputProps, Pick<ViewModeProps, 'viewMode'>, Omit<MColProps, 'name'> {
+  //
+}
+
+export interface MHiddenSlots {
   /**
    * Field main content
    */
   default: () => VNode[];
 }
 
+export type MFormScope = FormContext<Record<string, any>>;
+
 export interface MFormProps {
   /**
    * Form HTML element attributes.
@@ -664,8 +709,6 @@ export interface MFormProps {
   readonly padding?: boolean;
 }
 
-export type MFormScope = FormContext<Record<string, any>>;
-
 export interface MFormSlots {
   default: (scope: MFormScope) => VNode[];
 }
@@ -698,7 +741,7 @@ export interface MDtBtnSlots extends MBtnSlots {
   loading: () => VNode[];
 }
 
-export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = Omit<QTableProps, 'rows' | 'rowsPerPageOptions' | 'visibleColumns'> & {
+export interface MDatatableProps<I extends GenericFormValues = GenericFormValues> extends Omit<QTableProps, 'rows' | 'rowsPerPageOptions' | 'visibleColumns'> {
   rows?: any[];
   controlKey?: string;
   defaultItem?: Partial<MDtItem<I>>
@@ -781,10 +824,48 @@ export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = O
 
 }
 
+type ParamsReq = Record<string, any>;
+
+export interface MAxiosProps extends Omit<MSelectProps, 'options' | 'axiosMode'> {
+  /**
+   * Request method. Default is GET.
+   */
+  service: ((config?: AxiosRequestConfig) => Promise<any>) | string;
+  /**
+   * Send request as guest request. If false, send request as authenticated user. Default is true.
+   */
+  guest?: boolean | MaybeRefOrGetter<boolean>;
+  /**
+   * Request params.
+   */
+  params?: Ref<ParamsReq> | ShallowRef<ParamsReq> | WritableComputedRef<ParamsReq> | ComputedRef<ParamsReq> | (() => ParamsReq);
+  /**
+   * Request relations.
+   */
+  requestWith?: MaybeRefOrGetter<string> | undefined;
+  /**
+   * Component items.
+   */
+  items?: any[];
+  /**
+   *  The name of the attribute to be used as a label
+   */
+  attributeName?: string;
+  /**
+   * Do fetch asynchronous
+   */
+  lazy?: boolean;
+}
+
+export interface MAxiosSlots extends MSelectSlots {
+  //
+}
+
 declare module '@vue/runtime-core' {
   interface GlobalComponents {
     // Form.
     MAvatarViewer: GlobalComponentConstructor<MAvatarViewerProps, MAvatarViewerSlots>;
+    MAxios: GlobalComponentConstructor<MAxiosProps, MAxiosSlots>;
     MBtn: GlobalComponentConstructor<MBtnProps, MBtnSlots>;
     MCheckbox: GlobalComponentConstructor<MCheckboxProps, MCheckboxSlots>;
     MColor: GlobalComponentConstructor<MInputProps, MInputSlots>;
@@ -799,6 +880,7 @@ declare module '@vue/runtime-core' {
     MInputFieldControl: GlobalComponentConstructor<MInputFieldControlProps, MInputFieldControlSlots>;
     MInputLabel: GlobalComponentConstructor<MInputLabelProps, MInputLabelSlots>;
     MMobile: GlobalComponentConstructor<MInputProps, MInputSlots>;
+    MPassword: GlobalComponentConstructor<MPasswordProps, MInputSlots>;
     MPicker: GlobalComponentConstructor<MPickerProps, MPickerSlots>;
     MRadio: GlobalComponentConstructor<MRadioProps, MRadioSlots>;
     MSelect: GlobalComponentConstructor<MSelectProps, MSelectSlots>;

package/src/types/index.d.ts

@@ -29,6 +29,7 @@ import {
 } from './components'
 import { myth } from '../utils'
 import { ThemeBtn, ThemeFluid, ThemeInput, ThemeRounded, ThemeShadow, ThemeSize } from './theme'
+import { HelpersStubSchema } from './api-helpers'
 
 /**
  * Default loading q-btn loading slot.
@@ -142,6 +143,7 @@ export interface InstallOptions {
   props?: PropsContext;
   themeInput?: ThemeInput;
   themeBtn?: ThemeBtn;
+  api?: HelpersStubSchema;
 }
 
 export type MythContext = typeof myth;

package/src/utils/Helpers.ts

@@ -6,10 +6,10 @@
  * Github: https://github.com/mythpe
  */
 
-import { AxiosInstance, AxiosRequestConfig } from 'axios'
+import type { AxiosInstance, AxiosRequestConfig } from 'axios'
+import type { ConfigType, DownloadFromResponse, DownloadFromResponseCode, HelpersStubSchema, ParamsType, UrlType } from '../types'
 import lodash from 'lodash'
 import { openURL, scroll } from 'quasar'
-import type { ConfigType, DownloadFromResponse, DownloadFromResponseCode, HelpersStubSchema, ParamsType, UrlType } from '../types'
 
 import { nextTick } from 'vue'
 
@@ -58,27 +58,16 @@ export const Helpers = {
       async index (config?: ConfigType) {
         const u = makeUrl()
         return axios().get(u, config)
-        // return typeof config === 'boolean' ? u : axios().get(u, config)
       },
       async staticIndex (config?: ConfigType) {
         const u = `Static${baseUrl ? `/${baseUrl}` : ''}`
         return axios().get(u, config)
-        // config = config || {}
-        // config.params = {
-        //   page: 1,
-        //   itemsPerPage: -1,
-        //   ...(config.params ?? {})
-        // }
-        // return axios().get(u, config)
       },
       async export (data?: ParamsType, config?: AxiosRequestConfig) {
         return axios().post(makeUrl('Export'), data, config)
       },
       async store (data?: ParamsType, config?: AxiosRequestConfig) {
         const u = makeUrl()
-        // if (typeof data === 'boolean') {
-        //   return u
-        // }
         const formData = new FormData()
         data && Helpers.appendArray(formData, data)
         return axios().post(u, formData, config)
@@ -86,22 +75,13 @@ export const Helpers = {
       async show (id: UrlType, config?: AxiosRequestConfig) {
         const u = makeUrl(id)
         return axios().get(u, config)
-        // return typeof id === 'boolean' ? u : axios().get(u, config)
       },
       async staticShow (id: UrlType, config?: AxiosRequestConfig) {
-        // const m = baseUrl ? baseUrl.toString().split('/').pop() : ''
-        // const u = 'Static' + (m ? `/${m}` : '') + `/${id}`
         const u = `Static${baseUrl ? `/${baseUrl}` : ''}` + `/${id}`
-        // if (typeof id === 'boolean') {
-        //   return u
-        // }
         return axios().get(u, config)
       },
       async update (id: UrlType, data?: ParamsType, config?: AxiosRequestConfig) {
         const u = makeUrl(id)
-        // if (typeof id === 'boolean') {
-        //   return u
-        // }
         const formData = new FormData()
         formData.append('_method', 'put')
         data && Helpers.appendArray(formData, data)
@@ -110,13 +90,12 @@ export const Helpers = {
       async destroy (id: UrlType, config?: AxiosRequestConfig) {
         const u = makeUrl(id)
         return axios().delete(u, config)
-        // return typeof id === 'boolean' ? u : axios().delete(u, config)
       },
       async destroyAll (ids?: UrlType[], config?: AxiosRequestConfig) {
         const u = makeUrl('DestroyAll')
         return axios().post(u, { ids: (ids || []) }, config)
       },
-      getUploadAttachmentsUrl: (id: UrlType) => makeUrl(`${id}/Attachment/Upload`),
+      getUploadAttachmentsUrl: (id: UrlType): string => makeUrl(`${id}/Attachment/Upload`),
       async uploadAttachments (id: UrlType, data: Record<string, any>, config?: AxiosRequestConfig) {
         const _url = makeUrl(`${id}/Attachment/Upload`)
         return axios().post(_url, data, config)

package/src/utils/myth.ts

@@ -8,7 +8,7 @@
 
 import { ref } from 'vue'
 import { extend } from 'quasar'
-import type { BtnLoading, PropsContext, ThemeBtn, ThemeInput, ThemeRounded, ThemeShadow, ThemeSize } from '../types'
+import type { BtnLoading, HelpersStubSchema, PropsContext, ThemeBtn, ThemeInput, ThemeRounded, ThemeShadow, ThemeSize } from '../types'
 
 const props = ref<PropsContext>({})
 const size = ref<ThemeSize>('md')
@@ -21,6 +21,7 @@ const btnLoading = ref<BtnLoading>({
 })
 const themeBtn = ref<ThemeBtn>({})
 const themeInput = ref<ThemeInput>({})
+const api = ref<HelpersStubSchema>({} as HelpersStubSchema)
 export const myth = {
   /**
    * Apply Padding on all sides of components.
@@ -86,5 +87,9 @@ export const myth = {
   /**
    * Theme Shadow.
    */
-  shadow
+  shadow,
+  api,
+  setApi (v: HelpersStubSchema) {
+    api.value = v
+  }
 }

package/src/utils/vue-plugin.ts

@@ -11,6 +11,7 @@ import { name, version } from '../../package.json'
 import { myth } from './myth'
 import {
   MAvatarViewer,
+  MAxios,
   MBlock,
   MBtn,
   MCheckbox,
@@ -33,6 +34,7 @@ import {
   MInputFieldControl,
   MInputLabel,
   MMobile,
+  MPassword,
   MPicker,
   MRadio,
   MRow,
@@ -69,9 +71,13 @@ function install (app: App, options: InstallOptions = {}) {
   if (options.themeInput !== undefined) {
     myth.themeInput.value = options.themeInput
   }
+  if (options.api !== undefined) {
+    myth.setApi(options.api)
+  }
 
   // Form.
   app.component('MAvatarViewer', MAvatarViewer)
+  app.component('MAxios', MAxios)
   app.component('MBtn', MBtn)
   app.component('MCheckbox', MCheckbox)
   app.component('MColor', MColor)
@@ -87,6 +93,7 @@ function install (app: App, options: InstallOptions = {}) {
   app.component('MInputFieldControl', MInputFieldControl)
   app.component('MInputLabel', MInputLabel)
   app.component('MMobile', MMobile)
+  app.component('MPassword', MPassword)
   app.component('MPicker', MPicker)
   app.component('MRadio', MRadio)
   app.component('MSelect', MSelect)