@mythpe/quasar-ui-qui 0.1.81 → 0.1.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.1.81",
+  "version": "0.1.82",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": {
     "name": "MyTh Ahmed Faiz",
@@ -31,10 +31,11 @@
     "@vee-validate/i18n": "^4.14.7",
     "@vee-validate/rules": "^4.14.7",
     "axios": "^1.7.8",
+    "change-case": "^5.4.4",
     "ckeditor5": "^43.3.1",
-    "lodash": "^4.17.21",
-    "lodash-inflection": "^1.5.0",
+    "pluralize": "^8.0.0",
     "qs": "^6.13.1",
+    "radash": "^12.1.0",
     "typed.js": "^2.1.0",
     "vee-validate": "^4.14.7",
     "vue-i18n": "^11.0.0-beta.2",
@@ -48,8 +49,8 @@
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-replace": "^6.0.1",
     "@types/express": "^5.0.0",
-    "@types/lodash": "^4.17.13",
     "@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/datatable/MDatatable.vue

@@ -15,7 +15,6 @@ import type { InvalidSubmissionHandler, SubmissionHandler } from 'vee-validate'
 import { useForm } from 'vee-validate'
 import { computed, onMounted, ref, toValue, watch } from 'vue'
 import { is as quasarHelpers, QCardSection, QTable, useQuasar } from 'quasar'
-import { isArray } from 'lodash'
 import { useDtHelpers, useMyth } from '../../composable'
 import { useI18n } from 'vue-i18n'
 
@@ -1065,10 +1064,10 @@ defineExpose({
                       }}</span>
                       <span v-else-if="typeof filterValue === 'string'">: {{ filterValue }}</span>
                       <span
-                        v-else-if="isArray(filterValue) && !quasarHelpers.object(filterValue[0])"
+                        v-else-if="Array.isArray(filterValue) && !quasarHelpers.object(filterValue[0])"
                       >: {{ filterValue.join(', ') }}</span>
                       <span
-                        v-else-if="isArray(filterValue) && quasarHelpers.object(filterValue[0])"
+                        v-else-if="Array.isArray(filterValue) && quasarHelpers.object(filterValue[0])"
                       >: {{ filterValue.map(e => e.label).join(', ') }}</span>
                       <span
                         v-else-if="quasarHelpers.object(filterValue) && filterValue.label"

package/src/components/form/MOtp.vue

@@ -11,7 +11,6 @@
   setup
 >
 
-import { isNaN } from 'lodash'
 import { computed, nextTick, onBeforeUnmount, onBeforeUpdate, ref, watch, watchEffect } from 'vue'
 import { date } from 'quasar'
 import type { MOtpProps as Props } from '../../types'
@@ -73,7 +72,7 @@ const inputValue = computed(() => {
 watch(inputValue, (v) => {
   if (v) {
     if (props.string) {
-      if (!isNaN(v) && v?.toString?.()?.length?.toString?.() === props.inputLength.toString()) {
+      if (!isNaN(parseInt(v?.toString() || '')) && v?.toString?.()?.length?.toString?.() === props.inputLength.toString()) {
         modelValue.value = v
       }
     } else {
@@ -114,7 +113,7 @@ const blur = (index: number) => {
 
 const onUpdate = (value: string | number | null, index: number) => {
   if (value) {
-    if (props.string && isNaN(value)) {
+    if (props.string && isNaN(parseInt(value?.toString() || ''))) {
       nextTick(() => setTimeout(() => focus(index), 100))
       return
     }

package/src/components/grid/MCol.vue

@@ -11,9 +11,9 @@
   setup
 >
 import { computed } from 'vue'
-import { uniq } from 'lodash'
 import type { MColProps as Props } from '../../types'
-
+import { useMyth } from '../../composable'
+const { uniq } = useMyth()
 const props = defineProps<Props>()
 const classes = computed(() => {
   const list: string[] = ['m--col']

package/src/composable/useBindInput.ts

@@ -2,7 +2,6 @@ import type { MaybeRefOrGetter } from 'vue'
 import { computed, ref, toValue, useAttrs } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useMyth } from './useMyth'
-import { camelCase, kebabCase, snakeCase, uniq } from 'lodash'
 import type { MythComponentsProps as UiOpt } from '../types/plugin-props-option'
 
 type G = { name: string; [k: string]: any };
@@ -12,7 +11,11 @@ export const useBindInput = <P extends G = G> (Props: MaybeRefOrGetter<P>, key:
   const {
     __, theme: mTheme,
     props: pluginProps,
-    rules: mRules
+    rules: mRules,
+    uniq,
+    camelCase,
+    kebabCase,
+    snakeCase
   } = useMyth()
   const attributes = useAttrs()
   const props = toValue<P>(Props)

package/src/composable/useDtHelpers.ts

@@ -17,8 +17,7 @@ import type {
 } from '../types'
 import { useI18n } from 'vue-i18n'
 import { useMyth } from './useMyth'
-import { useQuasar } from 'quasar'
-import lodash from 'lodash'
+import { is, useQuasar } from 'quasar'
 import { useRoute, useRouter } from 'vue-router'
 import type { AxiosRequestConfig } from 'axios'
 import { useResetForm, useSetFormValues } from 'vee-validate'
@@ -244,15 +243,15 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
         v = params.split(',')
       }
 
-      if (lodash.isArray(params)) {
+      if (Array.isArray(params)) {
         v = [...params]
-      } else if (lodash.isObject(params) && typeof params !== 'function') {
+      } else if (typeof params !== 'function') {
         let e
         for (const k in params) {
           e = params[k]
           v.push(`${k}=${e}`)
         }
-      } else if (lodash.isFunction(params)) {
+      } else if (typeof params === 'function') {
         const f = params()
         v = typeof f === 'string' ? f.split(',') : f
       }
@@ -277,7 +276,7 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
     if (Object.keys(filterForm.value).length > 0) {
       const TempFilter = { ...filterForm.value } as any
       for (const fKey in TempFilter) {
-        if (lodash.isArray(TempFilter[fKey])) {
+        if (Array.isArray(TempFilter[fKey])) {
           TempFilter[fKey] = TempFilter[fKey].map((elm: any) => {
             if (elm.id) {
               return elm.id
@@ -286,7 +285,7 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
             }
             return elm
           })
-        } else if (lodash.isPlainObject(TempFilter[fKey])) {
+        } else if (is.object(TempFilter[fKey])) {
           if (TempFilter[fKey].id) {
             TempFilter[fKey] = TempFilter[fKey].id
           } else if (TempFilter[fKey].value) {

package/src/composable/useMyth.ts

@@ -6,7 +6,6 @@
  * Github: https://github.com/mythpe
  */
 
-import lodash from 'lodash'
 import { useI18n } from 'vue-i18n'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import { useRoute } from 'vue-router'
@@ -34,8 +33,6 @@ export const useMyth = () => {
     number = parseInt(number.toString())
     route = route || $route
     const defaultValue = ''
-    // Not route
-    // No page title
     if (!route) {
       return defaultValue
     }
@@ -52,23 +49,23 @@ export const useMyth = () => {
       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 pluralize = Str.pascalCase(Str.pluralize(lastRouteName))
+    const singular = Str.pascalCase(Str.singular(lastRouteName))
 
-    const keys = lodash.filter(lodash.uniq([
+    const keys = Helpers.uniq<string>([
       `routes.${routeName}`,
       `routes.${routePath}`,
       `${lastRouteName}Page.title`,
-      `${lodash.camelCase(lastRouteName)}Page.title`,
+      `${Str.camelCase(lastRouteName)}Page.title`,
       `choice.${pluralize}`,
       `choice.${singular}`,
       `replace.${lastRouteName}_details`,
       `replace.${lastRouteName}`,
       pluralize,
-      lodash.snakeCase(pluralize),
+      Str.snakeCase(pluralize),
       singular,
-      lodash.snakeCase(singular)
-    ]))
+      Str.snakeCase(singular)
+    ]).filter(e => !e)
     // console.log(keys)
     let str: string | null = null
     let k: string | any
@@ -77,17 +74,17 @@ export const useMyth = () => {
       if (!(k = keys[f])) {
         continue
       }
-      if (te && te(k) && lodash.isString(t(k))) {
-        if (lodash.startsWith(k, 'choice.')) {
+      if (te && te(k) && typeof t(k) === 'string') {
+        if (k.toString().startsWith('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 pluralizeModel = Str.pluralize(Str.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 rep = Str.singular(n[n.length - 1]).toLocaleLowerCase()
               const e = `replace.${rep}`
               str = te(e) ? t(e, { name: l }) : null
             } else {
@@ -101,7 +98,7 @@ export const useMyth = () => {
         } else {
           const parents: string[] = routeName.split('.')
           if (parents.length > 1) {
-            const e = `choice.${Str.pascalCase(lodash.pluralize(parents[parents.length - 2]))}`
+            const e = `choice.${Str.pascalCase(Str.pluralize(parents[parents.length - 2]))}`
             if (te(e)) {
               str = t(k, { name: t(e, '1') })
             } else {
@@ -124,7 +121,7 @@ export const useMyth = () => {
   const parseHeaders = (headers: MDtHeadersParameter, options: ParseHeaderOptions = {}): MDtColumn[] => {
     const defaultOptions: Partial<ParseHeaderOptions> = {
       controlKey: 'control',
-      // controlStyle: 'max-width: 150px',
+      // controlStyle: 'max-width: 150 px',
       align: 'center'
       // sortable: !0
     }
@@ -159,17 +156,17 @@ export const useMyth = () => {
         label: (item.label !== undefined && item.label !== null) ? Str.strBefore(Str.strBefore(item.label), 'ToString') : item.label
       }
       const name = item.name
-      let k
+      let k: unknown
       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)}`))) {
+        } else if (te((k = `attributes.${Str.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)}`))) {
+        } else if (te((k = `attributes.${Str.camelCase(item.label)}`))) {
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore
           item.label = t(k)
@@ -177,7 +174,7 @@ export const useMyth = () => {
           // 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))}`))) {
+        } else if (te((k = `choice.${Str.pluralize(Str.pascalCase(item.label))}`))) {
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore
           item.label = t(k, 2)
@@ -215,7 +212,7 @@ export const useMyth = () => {
       }
       result.push(item)
     })
-    return lodash.uniqBy(result, (e: MDtColumn) => e.name)
+    return Helpers.uniqBy(result, 'name')
   }
   /**
    * Copy text

package/src/types/index.d.ts

@@ -9,7 +9,6 @@
 export * from './api-helpers'
 export * from './components'
 export * from './install-options'
-export * from './lodash'
 export * from './m-datatable'
 export * from './m-geolocation'
 export * from './myth-api'

package/src/utils/Helpers.ts

@@ -8,7 +8,6 @@
 
 import type { AxiosInstance, AxiosRequestConfig } from 'axios'
 import type { ConfigType, DownloadFromResponse, DownloadFromResponseCode, HelpersStubSchema, ParamsType, UrlType } from '../types'
-import lodash from 'lodash'
 import { colors, openURL, scroll, setCssVar } from 'quasar'
 import { nextTick } from 'vue'
 
@@ -46,7 +45,7 @@ export const Helpers = {
         value = values[key]
         if (value !== null && value !== undefined && typeof value === 'object') {
           const k = name ? name + '[' + key + ']' : key
-          if (lodash.isArray(value) && value.length < 1) {
+          if (Array.isArray(value) && value.length < 1) {
             formData.append(`${key}`, '')
           } else {
             this.appendArray(formData, value, k)
@@ -142,14 +141,6 @@ export const Helpers = {
     segments?: UrlType,
     parent?: UrlType
   ): string => ((parent ?? '') + (parent && group ? '/' : '')) + (group ?? '') + ((group && segments ? '/' : '') + (segments ?? '')),
-  findBy (search: any, value: any, column: string | number = 'id') {
-    return lodash.find(search, (e: any) => lodash.isPlainObject(e) ? e[column] === value : e === value)
-  },
-  // queryStringify: (v: never) => new URLSearchParams(qs.stringify(v, {
-  //   arrayFormat: 'indices'
-  //   // encodeValuesOnly: true,
-  //   // encode: false,
-  // })),
   /**
    * Open unique window popup of application
    *
@@ -339,5 +330,19 @@ export const Helpers = {
   lightenColor,
   darkenColor,
   setCss,
-  colorIsDark
+  colorIsDark,
+  uniqBy<T> (array: T[], key: keyof T): T[] {
+    const seen = new Set()
+    return array.filter(item => {
+      const value = item[key]
+      if (seen.has(value)) {
+        return false
+      }
+      seen.add(value)
+      return true
+    })
+  },
+  uniq<T> (array: T[]): T[] {
+    return [...new Set(array)]
+  }
 }

package/src/utils/Str.ts

@@ -6,7 +6,8 @@
  * Github: https://github.com/mythpe
  */
 
-import lodash from 'lodash'
+import { plural as pluralCase, singular as singularCase } from 'pluralize'
+import { camelCase, capitalCase, dotCase, kebabCase, pascalCase, snakeCase } from 'change-case'
 
 export const Str = {
   /**
@@ -72,17 +73,29 @@ export const Str = {
     return mobile && (mobile.length === 10 && (c1 === '05' || parseInt(c1) === 5))
     // return mobile && ((mobile.length === 10 && (c1 === '05' || parseInt(c1) === 5)) || (mobile.length === 9 && c2 === 5))
   },
-  pascalCase (string?: string): string {
-    if (!lodash.pascalCase) {
-      lodash.mixin({ pascalCase: lodash.flow(lodash.camelCase, lodash.upperFirst) })
-    }
-    return lodash.pascalCase(string)
+  pascalCase (string?: unknown): string {
+    return string ? pascalCase(string?.toString() || '') : ''
+  },
+  camelCase (string?: unknown): string {
+    return string ? camelCase(string?.toString() || '') : ''
+  },
+  snakeCase (string?: unknown): string {
+    return string ? snakeCase(string?.toString() || '') : ''
+  },
+  kebabCase (string?: unknown): string {
+    return string ? kebabCase(string?.toString() || '') : ''
+  },
+  capitalCase (string?: unknown): string {
+    return string ? capitalCase(string?.toString() || '') : ''
+  },
+  dotCase (string?: unknown): string {
+    return string ? dotCase(string?.toString() || '') : ''
   },
-  pluralize (string?: string): string {
-    return lodash.pluralize?.(string)
+  pluralize (string?: unknown): string {
+    return string ? pluralCase(string?.toString() || '') : ''
   },
-  singular (string?: string): string {
-    return lodash.singularize(string)
+  singular (string?: unknown): string {
+    return string ? singularCase(string?.toString() || '') : ''
   },
   flipChoice (data: Record<any, any>) {
     const f: Record<any, any> = {}

package/src/utils/vee-rules.ts

@@ -6,8 +6,7 @@
  * Github: https://github.com/mythpe
  */
 
-import lodash from 'lodash'
-import { patterns } from 'quasar'
+import { patterns, is } from 'quasar'
 
 const { testPattern } = patterns
 
@@ -16,7 +15,7 @@ export const veeRules = {
     if (v === undefined || v === null) {
       return !0
     }
-    return lodash.isNumber(parseInt(v)) && !isNaN(parseInt(v)) &&
+    return is.number(parseInt(v)) && !isNaN(parseInt(v)) &&
       v?.toString().split('.')?.length <= 2 &&
       (/(\d)+/g.test(v) && !/[a-zA-Z]/.test(v))
   },

package/src/utils/vue-plugin.ts

@@ -5,10 +5,8 @@
  * Website: https://www.4myth.com
  * Github: https://github.com/mythpe
  */
-// import inflection from 'lodash-inflection'
 import type { App } from 'vue'
 import { name, version } from '../../package.json'
-
 import type { InstallOptions } from '../types'
 import { defineAsyncComponents } from '../plugin/defineAsyncComponents'
 import { defineComponents } from '../plugin/defineComponents'
@@ -16,10 +14,6 @@ import { defineComponents } from '../plugin/defineComponents'
 import { createMyth } from './createMyth'
 import { MythKey } from './const'
 
-// if (process?.env?.NODE_ENV !== 'development') {
-//   lodash.mixin(inflection)
-// }
-
 function install (app: App, options: InstallOptions) {
   const myth = createMyth(options)
   app.provide(MythKey, myth)

package/src/types/lodash.d.ts

@@ -1,26 +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
- */
-/* eslint-disable */
-
-declare module 'lodash' {
-  interface LoDashStatic {
-    /**
-     * Converts string to pascal case.
-     *
-     * @param string The string to convert.
-     * @return Returns the pascal cased string.
-     */
-    pascalCase (string?: string): string;
-
-    pluralize (string?: string): string;
-
-    singularize (string?: string): string;
-  }
-}
-
-export {}