@mythpe/quasar-ui-qui 0.0.29-dev → 0.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.0.29-dev",
+  "version": "0.0.30",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": {
     "name": "MyTh Ahmed Faiz",
@@ -12,7 +12,10 @@
   "type": "module",
   "module": "src/index.esm.js",
   "main": "src/index.common.js",
+  "types": "./types.d.ts",
   "scripts": {
+    "lint": "eslint ./src --ext .js,.ts,.vue ./",
+    "lint:fix": "eslint --fix --ext .js,.ts,.vue ./src",
     "dev": "cd ../dev && yarn dev && cd ..",
     "dev:umd": "yarn build && node build/script.open-umd.js",
     "dev:ssr": "cd ../dev && yarn 'dev:ssr' && cd ..",
@@ -36,6 +39,7 @@
     "vue-i18n": "^10.0.0"
   },
   "devDependencies": {
+    "color-name": "^2.0.0",
     "@quasar/app-webpack": "^3.13.0",
     "@quasar/extras": "^1.16.4",
     "@rollup/plugin-buble": "^0.21.3",

package/src/components/datatable/MDatatable.vue

@@ -28,7 +28,7 @@ import type {
 import type { AxiosRequestConfig } from 'axios'
 import type { InvalidSubmissionHandler, SubmissionHandler } from 'vee-validate'
 import { useForm } from 'vee-validate'
-import { computed, defineEmits, nextTick, onMounted, reactive, ref, toRef, toValue, useSlots, watch } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref, toRef, toValue, useSlots, watch } from 'vue'
 import { is as quasarHelpers, QCardSection, QTable, useQuasar } from 'quasar'
 import lodash from 'lodash'
 import { useRoute, useRouter } from 'vue-router'

package/src/components/datatable/MDtContextmenuItems.vue

@@ -12,7 +12,8 @@
 >
 
 import type { MDatatableDialogsOptions, MDatatableProps } from '../../types'
-import { computed, UnwrapRef } from 'vue'
+import type { UnwrapRef } from 'vue'
+import { computed } from 'vue'
 import { useMyth } from '../../composable'
 
 interface Props {

package/src/components/form/MCkeditor.vue

@@ -16,6 +16,7 @@ import type { MCkeditorProps as Props } from '../../types'
 import { computed, reactive, toValue, useTemplateRef } from 'vue'
 import { useBindInput, useMyth } from '../../composable'
 
+import type { EditorConfig } from 'ckeditor5'
 import {
   Alignment,
   Autoformat,
@@ -28,7 +29,6 @@ import {
   CloudServices,
   Code,
   CodeBlock,
-  EditorConfig,
   Essentials,
   FontBackgroundColor,
   FontColor,
@@ -133,8 +133,8 @@ const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
 const { value, errorMessage, handleChange } = inputScope
 
 const isRtl = computed(() => props.lang === 'ar')
-const getConfig = computed<EditorConfig>(() => {
-  const inpConfig = {
+const getConfig = computed<any>(() => {
+  const inpConfig: EditorConfig = {
     language: {
       ui: props.lang as string,
       content: props.lang as string,
@@ -301,7 +301,7 @@ const getConfig = computed<EditorConfig>(() => {
   if (props.config) {
     return props.config(inpConfig as EditorConfig)
   }
-  return inpConfig as EditorConfig
+  return inpConfig
 })
 const listeners = {
   'update:modelValue': (v: Props['modelValue']) => handleChange(v, !!errorMessage.value)

package/src/components/form/MColor.vue

@@ -14,7 +14,7 @@ import type { MInputProps as Props, MInputSlots } from '../../types'
 import { reactive, toValue, useTemplateRef } from 'vue'
 import { useField } from 'vee-validate'
 import { useBindInput } from '../../composable'
-import { QField, QInput } from 'quasar'
+import type { QField, QInput } from 'quasar'
 
 const props = withDefaults(defineProps<Props>(), {
   name: () => '',

package/src/components/form/MField.vue

@@ -14,7 +14,8 @@
 import { useFieldError, useFieldValue } from 'vee-validate'
 import type { MFieldProps as Props } from '../../types'
 import { useTemplateRef } from 'vue'
-import { QField, QFieldSlots } from 'quasar'
+import type { QFieldSlots } from 'quasar'
+import { QField } from 'quasar'
 import { useBindInput, useMyth } from '../../composable'
 import { myth } from '../../utils'
 
@@ -63,7 +64,7 @@ const { __ } = useMyth()
 const { props: options } = myth
 const modelValue = defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const helper = useBindInput<P>(() => props, 'input')
-const { hasTopLabel, getLabel, getPlaceholder, inputRules, attrs } = helper
+const { hasTopLabel, getLabel, getPlaceholder, inputRules } = helper
 const value = useFieldValue(() => props.name)
 const errorMessage = useFieldError(() => props.name)
 const input = useTemplateRef<InstanceType<typeof QField>>('input')

package/src/components/form/MFile.vue

@@ -11,7 +11,8 @@
   setup
 >
 
-import { QField, QFile, QFileSlots } from 'quasar'
+import type { QFileSlots } from 'quasar'
+import { QField, QFile } from 'quasar'
 import { useBindInput, useMyth } from '../../composable'
 import { useField } from 'vee-validate'
 import { reactive, toValue, useTemplateRef } from 'vue'

package/src/components/form/MOtp.vue

@@ -123,7 +123,7 @@ const onUpdate = (value: string | number | null, index: number) => {
   }
 }
 
-const onKeyDown = (evt: KeyboardEvent, index: number) => {
+const onKeyDown = (evt: KeyboardEvent/*,  index: number */) => {
   if (props.numeric !== !1 && evt.key && evt.key.toString() !== '0' && !parseInt(evt.key) && evt.key?.length === 1) {
     evt.preventDefault()
   }
@@ -253,7 +253,7 @@ defineOptions({
         outlined
         style="width: 6ch"
         v-bind="{...pluginOptions.otp as any,...$attrs}"
-        @keydown="onKeyDown($event, i - 1)"
+        @keydown="onKeyDown($event)"
         @keyup="onKeyUp($event, i - 1)"
         @paste.prevent="onPaste($event,i - 1)"
         @update:model-value="onUpdate($event, i - 1)"

package/src/components/form/MPicker.vue

@@ -14,7 +14,8 @@ import { computed, reactive, ref, toValue, useTemplateRef } from 'vue'
 import type { MPickerProps as Props } from '../../types'
 import { useBindInput, useMyth } from '../../composable'
 import { useField } from 'vee-validate'
-import { QDate, QField, QFieldSlots, QTime } from 'quasar'
+import type { QFieldSlots } from 'quasar'
+import { QDate, QField, QTime } from 'quasar'
 import { myth } from '../../utils'
 
 const defSeparator = ' - '

package/src/components/parials/UploaderItem.vue

@@ -13,7 +13,8 @@
 
 import { computed, nextTick, reactive, ref } from 'vue'
 import type { MUploaderMediaItem, MUploaderProps as Props, MUploaderServiceType } from '../../types'
-import { QUploader, useQuasar } from 'quasar'
+import type { QUploader } from 'quasar'
+import { useQuasar } from 'quasar'
 import { useMyth } from '../../composable'
 import { useI18n } from 'vue-i18n'
 

package/src/composable/useBindInput.ts

@@ -1,10 +1,11 @@
-import { computed, MaybeRefOrGetter, ref, toValue } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+import { computed, ref, toValue } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useMyth } from './useMyth'
 import { useSplitAttrs } from 'quasar'
 import { myth } from '../utils'
 import { camelCase, kebabCase, snakeCase, uniq } from 'lodash'
-import { PropsContext as UiOpt } from '../types/plugin-props-option'
+import type { PropsContext as UiOpt } from '../types/plugin-props-option'
 
 type G = { name: string; [k: string]: any };
 type OptsContext = { choose?: boolean; };

package/src/composable/useError.ts

@@ -1,4 +1,5 @@
-import { computed, MaybeRefOrGetter } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+import { computed } from 'vue'
 import { useFieldError, useSetFieldError } from 'vee-validate'
 
 export const useError = (name: MaybeRefOrGetter<string>) => {

package/src/composable/useMyth.ts

@@ -9,7 +9,8 @@
 import lodash from 'lodash'
 import { useI18n } from 'vue-i18n'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
-import { copyToClipboard, extend, QDialogOptions, QNotifyCreateOptions, useQuasar } from 'quasar'
+import type { QDialogOptions, QNotifyCreateOptions } from 'quasar'
+import { copyToClipboard, extend, useQuasar } from 'quasar'
 import { Helpers, myth, Str, veeRules } from '../utils'
 import type { MDtColumn, MDtHeadersParameter, ParseHeaderOptions, Vue3MAlertMessage, Vue3MAlertMessageOptions, Vue3MConfirmMessage } from '../types'
 import { computed } from 'vue'

package/src/composable/useValue.ts

@@ -1,4 +1,5 @@
-import { computed, MaybeRefOrGetter } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+import { computed } from 'vue'
 import { useFieldValue, useSetFieldValue } from 'vee-validate'
 
 export const useValue = <T = any> (name: MaybeRefOrGetter<string>) => {

package/src/index.common.js

@@ -6,14 +6,10 @@
  * Github: https://github.com/mythpe
  */
 
-import * as composable from './composable'
-import * as utils from './utils'
-
-export default {
-  ...composable,
-  ...utils
-}
-
 export * from './components'
 export * from './composable'
 export * from './utils'
+
+import * as Plugin from './utils'
+
+export default Plugin

package/src/index.esm.js

@@ -6,14 +6,10 @@
  * Github: https://github.com/mythpe
  */
 
-import * as composable from './composable'
-import * as utils from './utils'
-
-export default {
-  ...composable,
-  ...utils
-}
-
 export * from './components'
 export * from './composable'
 export * from './utils'
+
+import * as Plugin from './utils'
+
+export default Plugin

package/src/index.js

@@ -6,14 +6,10 @@
  * Github: https://github.com/mythpe
  */
 
-import * as composable from './composable'
-import * as utils from './utils'
-
-export default {
-  ...composable,
-  ...utils
-}
-
 export * from './components'
 export * from './composable'
 export * from './utils'
+
+import * as Plugin from './utils'
+
+export default Plugin

package/src/index.umd.js

@@ -6,12 +6,10 @@
  * Github: https://github.com/mythpe
  */
 
-import * as components from './components'
-import * as composable from './composable'
-import * as utils from './utils'
+export * from './components'
+export * from './composable'
+export * from './utils'
 
-export default {
-  ...components,
-  ...composable,
-  ...utils
-}
+import * as Plugin from './utils'
+
+export default Plugin

package/src/types/components.d.ts

@@ -31,8 +31,8 @@ import type {
   QToggleProps,
   QUploaderProps,
   QUploaderSlots
+  , QDialogProps, QMenuProps, QPopupProxyProps, QTooltipProps
 } from 'quasar'
-import { QDialogProps, QMenuProps, QPopupProxyProps, QTooltipProps } from 'quasar'
 import type {
   ComputedRef,
   MaybeRefOrGetter,
@@ -48,8 +48,8 @@ import type { TypedOptions } from 'typed.js'
 import type { FieldContext, FieldOptions, FormContext, FormOptions, FormState } from 'vee-validate'
 import type { ThemeShadow, ThemeSize } from './theme'
 import type { AxiosRequestConfig } from 'axios'
-import { ApiInterface, HelpersStubSchema } from './api-helpers'
-import {
+import type { ApiInterface, HelpersStubSchema } from './api-helpers'
+import type {
   MDatatableProps,
   MDatatableSlots,
   MDtAvatarProps,

package/src/types/index.d.ts

@@ -6,7 +6,7 @@
  * Github: https://github.com/mythpe
  */
 
-import { myth } from '../utils'
+import type { myth } from '../utils'
 
 export type MythContext = typeof myth;
 

package/src/types/m-datatable.d.ts

@@ -10,9 +10,9 @@ import type { AxiosResponse } from 'axios'
 import type { QAvatarProps, QAvatarSlots, QTableProps, QTableSlots } from 'quasar'
 import type { ComputedRef, MaybeRef, Ref, UnwrapNestedRefs, UnwrapRef, VNode } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
-import { GenericFormValues, MBtnProps, MBtnSlots, MFormSlots } from './components'
-import { StubSchema } from './api-helpers'
-import { ApiMetaInterface, Generic } from './m-helpers'
+import type { GenericFormValues, MBtnProps, MBtnSlots, MFormSlots } from './components'
+import type { StubSchema } from './api-helpers'
+import type { ApiMetaInterface, Generic } from './m-helpers'
 
 export type MDtItem<T extends object = Record<keyof T, any>> = T & {
   id: string | number;

package/src/types/plugin-props-option.d.ts

@@ -37,7 +37,7 @@ import type {
   QPageStickyProps,
   QPopupProxyProps
 } from 'quasar'
-import { MDatatableProps, MDtBtnProps } from './m-datatable'
+import type { MDatatableProps, MDtBtnProps } from './m-datatable'
 
 export interface PropsContext {
   // Grid.

package/src/utils/vue-plugin.ts

@@ -56,7 +56,7 @@ import {
   MDtContextmenuItems
 } from '../components'
 
-import { InstallOptions } from '../types/install-options'
+import type { InstallOptions } from '../types'
 
 function install (app: App, options: InstallOptions = {}) {
   if (options.rounded !== undefined) {
@@ -93,6 +93,19 @@ function install (app: App, options: InstallOptions = {}) {
     myth.mAxios.value = options.mAxios
   }
 
+  // const importList = import.meta.glob('./components/**/*.vue')
+  // const startIndex = '/components/'.length
+  // const routes = Object.keys(importList).map(key => {
+  //   return {
+  //     path: key.substring(startIndex, key.length - 4),
+  //     component: importList[key]
+  //   }
+  // })
+  // console.log(routes)
+  // for (const routesKey in routes) {
+  //   console.log(routesKey)
+  // }
+
   // Form.
   app.component('MAvatarViewer', MAvatarViewer)
   app.component('MAxios', MAxios)

package/src/index.ts

@@ -1,19 +0,0 @@
-/*
- * 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
- */
-
-import * as composable from './composable'
-import * as utils from './utils'
-
-export default {
-  ...composable,
-  ...utils
-}
-
-export * from './components'
-export * from './composable'
-export * from './utils'