@mythpe/quasar-ui-qui 0.2.42 → 0.2.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.2.42",
+  "version": "0.2.44",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": {
     "name": "MyTh Ahmed Faiz",
@@ -38,6 +38,7 @@
     "typed.js": "^2.1.0",
     "vee-validate": "^4.14.7",
     "vue-i18n": "^11.1.2",
+    "vue3-google-map": "^0.22.0",
     "vue3-signature": "^0.2.4"
   },
   "devDependencies": {
@@ -48,6 +49,7 @@
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-replace": "^6.0.1",
     "@types/express": "^5.0.0",
+    "@types/google.maps": "^3.58.1",
     "@types/node": "^22.10.1",
     "@types/pluralize": "^0.0.33",
     "@typescript-eslint/eslint-plugin": "^7.16.0",

package/src/boot/register.ts

@@ -8,8 +8,7 @@
 
 import { boot } from 'quasar/wrappers'
 import { install } from '../utils'
-import type { InstallOptions } from '../types'
 
 export default boot(({ app }) => {
-  app.use(install, {} as InstallOptions)
+  app.use(install)
 })

package/src/components/form/MOtp.vue

@@ -12,7 +12,7 @@
 >
 
 import { computed, nextTick, onBeforeUnmount, onBeforeUpdate, ref, watch, watchEffect } from 'vue'
-import { date } from 'quasar'
+import { date, useQuasar } from 'quasar'
 import type { MOtpProps as Props } from '../../types'
 import { useMyth } from '../../composable'
 
@@ -49,6 +49,7 @@ type Emits = {
   (e: 'resend', options: { start: Func, clear: Func, startTiming: Func }): void;
 }
 const emit = defineEmits<Emits>()
+const $q = useQuasar()
 
 const { __, props: pluginOptions } = useMyth()
 const modelValue = defineModel<Props['modelValue']>({ required: !1, default: undefined })

package/src/components/form/MSelect.vue

@@ -15,7 +15,7 @@ import { useField } from 'vee-validate'
 import type { MSelectProps as Props } from '../../types'
 import { computed, reactive, toValue, useTemplateRef } from 'vue'
 import { useBindInput, useMyth } from '../../composable'
-import { QField, QSelect, type QSelectSlots } from 'quasar'
+import { QField, QSelect, type QSelectSlots, useQuasar } from 'quasar'
 
 type P = {
   name: Props['name'];
@@ -118,6 +118,7 @@ type Emits = {
   (e: 'model', value: { value: any; model: object | null }): void;
 }
 const emit = defineEmits<Emits>()
+const $q = useQuasar()
 
 const { __, props: pluginOptions } = useMyth()
 const helper = useBindInput<P & Props>(() => props, 'select', () => ({ choose: !0 }))
@@ -163,6 +164,7 @@ const onDoneOptions = () => {
 const listeners = {
   blur: (v: any) => handleBlur(v, !0),
   'update:modelValue': (v: Props['modelValue']) => {
+    console.log('update:modelValue: ', v)
     handleChange(v, !!errorMessage.value)
     if (!props.emitValue) {
       emit('model', { value: v, model: v })
@@ -172,7 +174,10 @@ const listeners = {
       emit('model', { value: v, model: model ?? null })
     }
   },
-  inputValue: (v: string) => (search.value = v?.toString() || ''),
+  inputValue: (v: string) => {
+    console.log('inputValue: ', v)
+    search.value = v?.toString() || ''
+  },
   filter: filterFn
 }
 const input = useTemplateRef<InstanceType<typeof QSelect> | InstanceType<typeof QField>>('input')

package/src/components/index.ts

@@ -9,10 +9,11 @@
 export * from './datatable'
 export * from './form'
 export * from './grid'
+export * from './map'
 export * from './modal'
 export * from './parials'
 export * from './sar'
-export * from './typography'
 export * from './transition'
+export * from './typography'
 
 export default {}

package/src/components/map/MMap.vue

@@ -0,0 +1,69 @@
+<!--
+  - 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
+  -->
+
+<script lang="ts" setup>
+
+import { computed } from 'vue'
+import type { CoordsLatLng } from '../../types'
+import type { MMapProps } from '../../types/api/MMap'
+import { GoogleMap } from 'vue3-google-map'
+import { useMyth } from '../../composable'
+
+const props = defineProps<MMapProps>()
+const { google: googleOptions } = useMyth()
+const apiKey = computed(() => googleOptions.value.apiKey)
+
+const defZoom = 17
+const defWidth = '100%'
+const defHeight = '250px'
+const defLanguage = 'ar'
+
+const getZoom = computed(() => {
+  return props.zoom ? parseInt(props.zoom.toString()) : defZoom
+})
+const width = computed<string>(() => {
+  const v = props.width || defWidth
+  return typeof v === 'number' ? `${v}px` : v
+})
+const height = computed<string>(() => {
+  const v = props.width || defHeight
+  return typeof v === 'number' ? `${v}px` : v
+})
+const getLanguage = computed(() => props.language || defLanguage)
+const getCenter = computed<CoordsLatLng>(() => {
+  // if (props.center?.lat && props.center?.lng) {
+  //   return props.center
+  // }
+  return {
+    lat: 24.603885,
+    lng: 46.7124333
+  }
+})
+const onClickMap = () => {
+  //
+}
+
+defineOptions({
+  name: 'MMap',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <GoogleMap
+    :api-key="apiKey"
+    :center="getCenter"
+    :language="getLanguage"
+    :style="{width, height}"
+    :zoom="getZoom"
+    v-bind="$attrs"
+    @click="onClickMap"
+  >
+    <!--  -->
+  </GoogleMap>
+</template>

package/src/components/map/index.ts

@@ -0,0 +1,12 @@
+/*
+ * 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 MMap from './MMap.vue'
+
+export { MMap }
+
+export default {}

package/src/components/modal/MDialog.vue

@@ -14,6 +14,7 @@
 import { computed } from 'vue'
 import type { MDialogProps as Props } from '../../types'
 import { useMyth } from '../../composable'
+import { useQuasar } from 'quasar'
 
 interface P {
   slide?: Props['slide'] | undefined;
@@ -24,6 +25,7 @@ const props = withDefaults(defineProps<P>(), {
   slide: () => !1,
   from: () => 'left'
 })
+const $q = useQuasar()
 const slideProp = computed(() => props.slide !== undefined && props.slide !== !1 && props.slide !== null)
 const map = {
   left: 'right',

package/src/components/sar/MSarString.vue

@@ -7,10 +7,10 @@
   -->
 
 <script lang="ts" setup>
-// import MSarSvg from './MSarSvg.vue'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 import { useMyth } from '../../composable'
+import { useQuasar } from 'quasar'
 
 interface Props {
   text?: any;
@@ -22,6 +22,7 @@ const props = withDefaults(defineProps<Props>(), {
   string: !1
 })
 
+const $q = useQuasar()
 const { te } = useI18n({ useScope: 'global' })
 const { __, formatMoney } = useMyth()
 const getText = computed<string | undefined>(() => {

package/src/global.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
+ */
+
+/// <reference types="google.maps" />
+/// <reference types="vue3-google-map/dist/types" />
+
+import '@types/google.maps'
+
+declare global {
+  const google: typeof import('google.maps')
+}

package/src/plugin/defineAsyncComponents.ts

@@ -60,4 +60,6 @@ export const defineAsyncComponents = function (app: App) {
   // Utils.
   app.component('MSarIcon', defineAsyncComponent(() => import('../components/sar/MSarIcon.vue')))
   app.component('MSarString', defineAsyncComponent(() => import('../components/sar/MSarString.vue')))
+  // Map
+  app.component('MMap', defineAsyncComponent(() => import('../components/map/MMap.vue')))
 }

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

@@ -1,6 +1,7 @@
 import type { NamedColor, QAvatarProps, QAvatarSlots, QImgProps } from 'quasar'
 import type { VNode } from 'vue'
-import type { InputRulesContext, MColProps } from '../components'
+import type { MColProps } from './MCol'
+import type { InputRulesContext } from './MInput'
 
 export type MAvatarViewerModelValue = File | null | undefined;
 

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

@@ -0,0 +1,29 @@
+/*
+ * 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 { ThemeShadow, ThemeSize } from '../theme'
+import type { VNode } from 'vue'
+
+export type MBlockProps = {
+  /**
+   * Size of the padding block.
+   * Default: 'md'
+   */
+  size?: ThemeSize | undefined;
+  /**
+   * Rounded block
+   */
+  rounded?: boolean | undefined;
+  /**
+   * Shadow level
+   */
+  shadow?: ThemeShadow | undefined;
+}
+export type MBlockSlots = {
+  default?: () => VNode[];
+}

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

@@ -0,0 +1,25 @@
+/*
+ * 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 { QBtnProps, QBtnSlots } from 'quasar'
+import type { VNode } from 'vue'
+
+export type MBtnProps = QBtnProps & {
+  ariaLabel?: boolean | string | null | undefined;
+  nativeLabel?: boolean | undefined;
+}
+export type MBtnSlots = QBtnSlots & {
+  /**
+   * Use for custom content, instead of relying on 'icon' and 'label' props
+   */
+  default?: () => VNode[];
+  /**
+   * Override the default QSpinner when in 'loading' state
+   */
+  loading: () => VNode[];
+}

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

@@ -0,0 +1,33 @@
+/*
+ * 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 { VNode } from 'vue'
+import type { QCheckboxProps } from 'quasar'
+import type { BaseInputsProps, BaseInputsSlots } from './MInput'
+
+export type BaseCheckboxProps = Omit<BaseInputsProps, 'topLabel'> & {
+  /**
+   * Input row props.
+   */
+  rowProps?: Record<string, any>;
+  /**
+   * Input column props.
+   */
+  colProps?: Record<string, any>;
+}
+export type MCheckboxProps = BaseCheckboxProps & Omit<QCheckboxProps, 'name' | 'modelValue' | 'label'>
+export type MCheckboxSlots = Omit<BaseInputsSlots & 'top-label'> & {
+  /**
+   * VNode before field main content.
+   */
+  before: () => VNode[];
+  /**
+   * VNode after field main content.
+   */
+  after: () => VNode[];
+}

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

@@ -0,0 +1,40 @@
+/*
+ * 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 { EditorConfig } from 'https://cdn.ckeditor.com/typings/ckeditor5.d.ts'
+import type { BaseInputsProps, BaseInputsSlots } from './MInput'
+
+export type MCkeditorProps = Omit<BaseInputsProps, 'hint' | 'topLabel' | 'placeholder' | 'autocomplete'> & {
+  /**
+   * Editor language.
+   * Default value: ar.
+   */
+  lang: 'ar' | 'en';
+  /**
+   * Specifies the configuration of the editor.
+   * https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editorconfig-EditorConfig.html
+   */
+  config?: (config: EditorConfig) => EditorConfig;
+  /**
+   * By default, the editor component creates a <div> container which is used as an element passed to the editor (for example, ClassicEditor#element).
+   * The element can be configured, so for example to create a <textarea>, use the following directive:
+   * tag-name="textarea"
+   * Default value: div.
+   */
+  tagName?: string;
+  /**
+   * This directive controls the isReadOnly property of the editor.
+   * Default value: false.
+   */
+  disabled?: boolean;
+  /**
+   * Use HTML instead of Markdown.
+   */
+  html?: boolean;
+}
+export type MCkeditorSlots = BaseInputsSlots

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

@@ -0,0 +1,55 @@
+/*
+ * 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 { VNode } from 'vue'
+
+export type ColStyleType =
+  boolean
+  | undefined
+  | string
+  | number
+  | 'auto'
+  | 'grow'
+  | 'shrink'
+  | '1'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '7'
+  | '8'
+  | '9'
+  | '10'
+  | '11'
+  | '12'
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+export type MColProps = {
+  auto?: boolean;
+  col?: ColStyleType;
+  xs?: ColStyleType;
+  sm?: ColStyleType;
+  md?: ColStyleType;
+  lg?: ColStyleType;
+  xl?: ColStyleType;
+  name?: string;
+}
+export type MColSlots = {
+  default?: () => VNode[];
+}

package/src/types/api/MColumn.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 { VNode } from 'vue'
+
+export type MColumnProps = {
+  [key: string]: any;
+}
+export type MColumnSlots = {
+  default?: () => VNode[];
+}

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

@@ -0,0 +1,19 @@
+/*
+ * 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 { ThemeSize } from '../theme'
+import type { VNode } from 'vue'
+
+export type MContainerProps = {
+  size?: ThemeSize | string | undefined;
+  dense?: boolean | undefined;
+  fluid?: boolean | undefined;
+}
+export type MContainerSlots = {
+  default?: () => VNode[];
+}

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

@@ -0,0 +1,15 @@
+/*
+ * 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 { MPickerProps, MPickerSlots } from './MPicker'
+
+export interface MDateProps extends Omit<MPickerProps, 'type'> {
+  type?: 'date'
+}
+
+export type MDateSlots = MPickerSlots

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

@@ -0,0 +1,18 @@
+/*
+ * 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 { VNode } from 'vue'
+import type { QDialogProps } from 'quasar'
+
+export type MDialogProps = Partial<QDialogProps> & {
+  slide?: boolean | undefined;
+  from?: 'up' | 'down' | 'left' | 'right';
+}
+export type MDialogSlots = {
+  default: () => VNode[];
+}

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

@@ -0,0 +1,13 @@
+/*
+ * 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 { QEditorProps, QEditorSlots } from 'quasar'
+import type { BaseInputsProps, BaseInputsSlots } from './MInput'
+
+export type MEditorProps = Omit<QEditorProps, 'modelValue' | 'placeholder'> & BaseInputsProps
+export type MEditorSlots = QEditorSlots & BaseInputsSlots

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

@@ -0,0 +1,12 @@
+/*
+ * 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, MInputSlots } from './MInput'
+
+export type MFieldProps = Omit<MInputProps, 'viewMode' | 'viewModeValue' | 'fieldOptions'>
+export type MFieldSlots = MInputSlots

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

@@ -0,0 +1,21 @@
+/*
+ * 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 { QFileProps, QFileSlots } from 'quasar'
+import type { BaseInputsProps, BaseInputsSlots } from './MInput'
+
+export type MFileProps = Omit<QFileProps, 'modelValue' | 'rules' | 'name' | 'label' | 'hint'> & Omit<BaseInputsProps, 'autocomplete'> & {
+  accept?: string | undefined
+  images?: boolean | string
+  svg?: boolean | string
+  video?: boolean | string
+  pdf?: boolean | string
+  excel?: boolean | string
+  dragDrop?: boolean | undefined
+}
+export type MFileSlots = QFileSlots & BaseInputsSlots

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

@@ -0,0 +1,55 @@
+/*
+ * 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 { FormContext, FormOptions, FormState } from 'vee-validate'
+import type { MaybeRefOrGetter, VNode } from 'vue'
+
+export type MFormScope = FormContext;
+export type MFormProps = {
+  /**
+   * Form HTML element attributes.
+   */
+  formProps?: Record<string, any>;
+  /**
+   * Default options of useForm.
+   */
+  opts?: FormOptions<Record<string, any>>;
+  /**
+   * The target to which the page will be scrolled.
+   * Default is: Window.
+   */
+  target?: HTMLElement | string | undefined;
+  /**
+   * Emit values instead controlled values.
+   * Default is: false.
+   */
+  emitValues?: boolean;
+  /**
+   * Watch to reset form values.
+   */
+  readonly state?: MaybeRefOrGetter<Partial<FormState<Record<string, any>>>>;
+  /**
+   * Watch to reset form values.
+   */
+  readonly form?: MaybeRefOrGetter<Record<string, any>>;
+  /**
+   * Watch to set form values.
+   */
+  readonly values?: MaybeRefOrGetter<Record<string, any>>;
+  /**
+   * Watch to set form errors.
+   */
+  readonly errors?: MaybeRefOrGetter<Record<string, string | string[]>>;
+  /**
+   * Apply padding to form.
+   */
+  readonly padding?: boolean;
+}
+export type MFormSlots = {
+  default: (scope: MFormScope) => VNode[];
+}

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

@@ -0,0 +1,19 @@
+/*
+ * 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 { VNode } from 'vue'
+import type { QItemProps } from 'quasar'
+
+export type MHelpRowProps = Partial<QItemProps> & {
+  text?: string | undefined;
+  icon?: string | undefined;
+  tooltip?: boolean | undefined;
+}
+export type MHelpRowSlots = {
+  default?: () => VNode[];
+}

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

@@ -0,0 +1,20 @@
+/*
+ * 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 { MColProps } from './MCol'
+import type { VNode } from 'vue'
+import type { MHiddenInputProps } from './MHiddenInput'
+import type { ViewModeProps } from './MInput'
+
+export type MHiddenProps = MHiddenInputProps & Pick<ViewModeProps, 'viewMode'> & Omit<MColProps, 'name'>
+export type MHiddenSlots = {
+  /**
+   * Field main content
+   */
+  default: () => VNode[];
+}