@mythpe/quasar-ui-qui 0.0.19-dev → 0.0.19

package/src/utils/Str.ts

@@ -0,0 +1,211 @@
+/*
+ * 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 _ from 'lodash'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import inflection from 'lodash-inflection'
+
+_.mixin(inflection)
+
+export const Str = {
+  /**
+   * Str vue3
+   * @param str
+   * @param needle
+   */
+  strBefore (str: string, needle = '_to_string'): string {
+    if (!str) {
+      return ''
+    }
+    if (str.slice(-needle.length) === needle) {
+      str = str.slice(0, str.length - needle.length)
+    }
+    return str
+  },
+  /**
+   * Str to number format
+   * @param num
+   * @param c
+   */
+  toNumberFormat (num = null, c: any) {
+    if (!num) {
+      // console.log(num)
+      return num
+    }
+    const splitArray: any = Str.toNumber(num).split('.')
+    const rgx = /(\d+)(\d{3})/
+    while (rgx.test(splitArray[0])) {
+      splitArray[0] = splitArray[0].replace(rgx, '$1' + ',' + '$2')
+    }
+    let t = splitArray.join('.')
+    if (c) t = `${t} ${c}`
+    return t
+  },
+  /**
+   * Convert To string
+   * @param value
+   */
+  fromArabicNumber (value: any): string {
+    if (!value) return ''
+    value = value?.toString().replace(/٠/g, 0).replace(/١/g, 1).replace(/٢/g, 2).replace(/٣/g, 3).replace(/٤/g, 4).replace(/٥/g, 5).replace(/٦/g,
+      6).replace(/٧/g, 7).replace(/٨/g, 8).replace(/٩/g, 9)
+
+    return '' + (value || '')
+  },
+  /**
+   * Str to number 'return string'
+   * @param n
+   */
+  toNumber (n: string | null | undefined | number): string {
+    if (!n) return ''
+    n = '' + n
+    n = Str.fromArabicNumber(n)
+    n = n.replace(/,/g, '')
+    return '' + n
+  },
+  isKsaMobile (mobile: string | null) {
+    mobile = Str.fromArabicNumber(mobile) || ''
+    if (!mobile) return !1
+    const c1 = mobile.slice(0, 2)
+    // const c2 = parseInt(mobile.substr(0, 1))
+    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 (!_.pascalCase) {
+      _.mixin({ pascalCase: _.flow(_.camelCase, _.upperFirst) })
+    }
+    return _.pascalCase(string)
+  },
+  pluralize (string?: string): string {
+    return _.pluralize(string)
+  },
+  singular (string?: string): string {
+    return _.singularize(string)
+  },
+  flipChoice (data: Record<any, any>) {
+    const f: Record<any, any> = {}
+    for (const a in data) {
+      let c
+      c = data[a].split('|')
+      c = [c[1], c[0]].join('|')
+      f[a] = c
+    }
+    return f
+  },
+  /**
+   *
+   * Remove 'الـ' from words
+   * Example: الغرب => غرب
+   *
+   * @param words
+   * @param locale
+   */
+  wordsWithoutThe<T extends string = any> (words: any, locale: string): string | T {
+    if (words && locale?.toString()?.toLowerCase() === 'ar') {
+      const e = words.split(' ')
+      for (const i in e) {
+        if (e[i].slice(0, 2) === 'ال') {
+          e[i] = e[i].slice(2)
+        }
+      }
+      words = e.join(' ')
+    }
+    return words
+  },
+  /**
+   *
+   * Add 'الـ' to words
+   *
+   * Example: غرب => الغرب
+   *
+   * @param words
+   * @param locale
+   */
+  wordsWithThe<T extends string = any> (words: any, locale: string): string | T {
+    if (words && locale?.toString()?.toLowerCase() === 'ar') {
+      let i
+      const e = words.split(' ')
+      if (e[e.length - 1].slice(0, 2) === 'ال') {
+        return words
+      }
+      for (i in e) {
+        if (e[i].slice(0, 2) !== 'ال') {
+          e[i] = 'ال' + e[i]
+        }
+      }
+      words = e.join(' ')
+    }
+    return words
+  },
+  /**
+   * Example: غرب => 'الغربي'
+   * @param words
+   * @param locale
+   */
+  wordsToSingle<T extends string = any> (words: any, locale: string): string | T {
+    if (words && locale?.toString()?.toLowerCase() === 'ar') {
+      let i
+      const e = words.split(' ')
+      for (i in e) {
+        if (e[i].slice(0, 2) !== 'ال') {
+          e[i] = 'ال' + e[i]
+        }
+        if (e[i].slice(-1) !== 'ي') {
+          e[i] += 'ي'
+        }
+      }
+      words = e.join(' ')
+    }
+    return words
+  },
+  /**
+   * Custom helper
+   * @param a
+   * @param b
+   */
+  sortNumberFormatted (a: any, b: any) {
+    const f = parseFloat(Str.toNumber(a).replace(/[^\d]/g, '')) || 0
+    const s = parseFloat(Str.toNumber(b).replace(/[^\d]/g, '')) || 0
+    return f - s
+  },
+  /**
+   * Convert string new line to BR
+   * @param str
+   * @param isXhtml
+   */
+  nl2br<T extends string = any> (str: any, isXhtml: (boolean | null | undefined) = !1): string | T {
+    if (!str) {
+      return str
+    }
+    const breakTag = (isXhtml || typeof isXhtml === 'undefined') ? '<br />' : '<br>'
+    return str?.toString?.()?.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, `$1${breakTag}$2`) || str
+  },
+  prettyPrint (string: any) {
+    const jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg
+    return JSON.stringify(string, null, 3)
+      .replace(/&/g, '&amp;').replace(/\\"/g, '&quot;')
+      .replace(/</g, '&lt;').replace(/>/g, '&gt;')
+      .replace(jsonLine, (match, pIndent, pKey, pVal, pEnd) => {
+        const key = '<span class="json-key" style="color: brown">'
+        const val = '<span class="json-value" style="color: navy">'
+        const str = '<span class="json-string" style="color: olive">'
+        let r = pIndent || ''
+        if (pKey) {
+          r = r + key + pKey.replace(/[": ]/g, '') + '</span>: '
+        }
+        if (pVal) {
+          r = r + (pVal[0] === '"' ? str : val) + pVal + '</span>'
+        }
+        return r + (pEnd || '')
+      })
+  }
+}
+
+export default {}

package/src/utils/index.ts

@@ -7,4 +7,7 @@
  */
 
 export * from './myth'
+export * from './Str'
+export * from './Helpers'
+export * from './vee-rules'
 export * from './vue-plugin'

package/src/utils/myth.ts

@@ -7,31 +7,103 @@
  */
 
 import { ref } from 'vue'
-import type { QBtnProps } from 'quasar'
 import { extend } from 'quasar'
-import type { UiOptionsContext } from '../types'
-
-const defGutters = 'md'
-const defaultOptions: UiOptionsContext = {
-  style: {
-    gutters: defGutters
-  }
-}
-const optionsRef = ref<UiOptionsContext>({ ...defaultOptions })
+import type { BtnLoading, HelpersStubSchema, PropsContext, ThemeBtn, ThemeInput, ThemeRounded, ThemeShadow, ThemeSize } from '../types'
+import type { AxiosInstance } from 'axios'
 
+const props = ref<PropsContext>({})
+const size = ref<ThemeSize>('md')
+const rounded = ref<ThemeRounded>(!1)
+const shadow = ref<ThemeShadow>(2)
+const fluid = ref<boolean>(!1)
+const rules = ref<string[]>([])
+const btnLoading = ref<BtnLoading>({
+  type: 'spinner'
+})
+const themeBtn = ref<ThemeBtn>({})
+const themeInput = ref<ThemeInput>({})
+const baseUrl = ref<string>('')
+const api = ref<HelpersStubSchema>({} as HelpersStubSchema)
+const mAxios = ref<AxiosInstance>({} as AxiosInstance)
 export const myth = {
-  options: optionsRef,
-  setOptions (values: Partial<UiOptionsContext>) {
-    optionsRef.value = extend(!0, defaultOptions, values)
-  },
-  withOptions (values: Partial<UiOptionsContext>) {
-    optionsRef.value = extend(!0, defaultOptions, optionsRef.value, values)
-  },
-  withBtnOptions (values: Partial<QBtnProps>) {
-    this.withOptions({
-      btn: {
-        props: values
-      }
-    })
-  }
+  /**
+   * Apply Padding on all sides of components.
+   */
+  // size: computed({
+  //   get: () => size.value,
+  //   set: v => (size.value = v)
+  // }),
+  size,
+  setSize (v: ThemeSize) {
+    size.value = v
+  },
+  /**
+   * Apply Fluid on all sides of containers.
+   */
+  fluid,
+  setFluid (v: boolean) {
+    fluid.value = v
+  },
+  /**
+   * Components Props.
+   */
+  props,
+  setProps (values: Partial<PropsContext> | undefined) {
+    props.value = values ?? {}
+  },
+  withProps (values: Partial<PropsContext> | undefined) {
+    props.value = extend(!0, {}, props.value, values)
+  },
+  /**
+   * Rules keys that can be added to Input Rules as Vue Attr
+   */
+  rules,
+  setRules (v: string[]) {
+    rules.value = v
+  },
+  withRules (v: string[]) {
+    rules.value = [...rules.value, ...v]
+  },
+  /**
+   * Default loading q-btn loading slot.
+   */
+  // btnLoading: computed({
+  //   get: () => btnLoading.value,
+  //   set: v => (btnLoading.value = v)
+  // }),
+  btnLoading,
+  setBtnLoading (v: BtnLoading) {
+    btnLoading.value = v
+  },
+  /**
+   * Default Buttons style.
+   */
+  themeBtn,
+  /**
+   * Default Inputs style.
+   */
+  themeInput,
+  /**
+   * Theme Rounded.
+   */
+  rounded,
+  /**
+   * Theme Shadow.
+   */
+  shadow,
+  /**
+   * Axios instance.
+   */
+  mAxios,
+  /**
+   * Api stubs.
+   */
+  api,
+  setApi (v: HelpersStubSchema) {
+    api.value = v
+  },
+  /**
+   * Base API Url.
+   */
+  baseUrl
 }

package/src/utils/vee-rules.ts

@@ -0,0 +1,32 @@
+/*
+ * 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 lodash from 'lodash'
+import { patterns } from 'quasar'
+
+const { testPattern } = patterns
+
+export const veeRules = {
+  float: (v: any) => lodash.isNumber(parseInt(v)) && !isNaN(parseInt(v)) && v?.toString()
+    .split('.')?.length <= 2 && (/(\d)+/g.test(v) && !/[a-zA-Z]/.test(
+    v)),
+  date: (v: any) => /^-?[\d]+-[0-1]\d-[0-3]\d$/.test(v),
+  time: (v: any) => testPattern.time(v),
+  fulltime: (v: any) => testPattern.fulltime(v),
+  timeOrFulltime: (v: any) => testPattern.timeOrFulltime(v),
+  hexColor: (v: any) => testPattern.hexColor(v),
+  hexaColor: (v: any) => testPattern.hexaColor(v),
+  hexOrHexaColor: (v: any) => testPattern.hexOrHexaColor(v),
+  rgbColor: (v: any) => testPattern.rgbColor(v),
+  rgbaColor: (v: any) => testPattern.rgbaColor(v),
+  rgbOrRgbaColor: (v: any) => testPattern.rgbOrRgbaColor(v),
+  hexOrRgbColor: (v: any) => testPattern.hexOrRgbColor(v),
+  hexaOrRgbaColor: (v: any) => testPattern.hexaOrRgbaColor(v),
+  color: (v: any) => !v ? !0 : testPattern.anyColor(v),
+  requiredColor: (v: any) => testPattern.anyColor(v)
+}

package/src/utils/vue-plugin.ts

@@ -9,16 +9,131 @@
 import type { App } from 'vue'
 import { name, version } from '../../package.json'
 import { myth } from './myth'
-import { MBlock, MBtn, MCol, MColumn, MContainer, MHelpRow, MInput, MInputFieldControl, MInputLabel, MRow, MTypingString } from '../components'
+import {
+  MAvatarViewer,
+  MAxios,
+  MBlock,
+  MBtn,
+  MCheckbox,
+  MCkeditor,
+  MCol,
+  MColor,
+  MColumn,
+  MContainer,
+  MDate,
+  MEditor,
+  MEmail,
+  MFadeTransition,
+  MFadeXTransition,
+  MField,
+  MFile,
+  MForm,
+  MHelpRow,
+  MHidden,
+  MHiddenInput,
+  MInput,
+  MInputFieldControl,
+  MInputLabel,
+  MMobile,
+  MOptions,
+  MOtp,
+  MPassword,
+  MPicker,
+  MRadio,
+  MRow,
+  MSelect,
+  MTime,
+  MToggle,
+  MTransition,
+  MTypingString,
+  MUploader,
+  MDialog,
+  MModalMenu,
+  MTooltip,
+  MDatatable,
+  MDtAvatar,
+  MDtBtn,
+  MDtContextmenuItems
+} from '../components'
 
-function install (app: App, options = {}) {
-  myth.withOptions(options)
+import type { InstallOptions } from '../types'
+
+function install (app: App, options: InstallOptions = {}) {
+  if (options.rounded !== undefined) {
+    myth.rounded.value = options.rounded
+  }
+  if (options.shadow !== undefined) {
+    myth.shadow.value = options.shadow
+  }
+  if (options.fluid !== undefined) {
+    myth.setFluid(options.fluid)
+  }
+  if (options.size !== undefined) {
+    myth.setSize(options.size)
+  }
+  if (options.props !== undefined) {
+    myth.withProps(options.props)
+  }
+  if (options.rules !== undefined) {
+    myth.withRules(options.rules)
+  }
+  if (options.themeBtn !== undefined) {
+    myth.themeBtn.value = options.themeBtn
+  }
+  if (options.themeInput !== undefined) {
+    myth.themeInput.value = options.themeInput
+  }
+  if (options.baseUrl !== undefined) {
+    myth.baseUrl.value = options.baseUrl
+  }
+  if (options.api !== undefined) {
+    myth.setApi(options.api)
+  }
+  if (options.mAxios !== undefined) {
+    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)
   app.component('MBtn', MBtn)
+  app.component('MCheckbox', MCheckbox)
+  app.component('MCkeditor', MCkeditor)
+  app.component('MColor', MColor)
+  app.component('MDate', MDate)
+  app.component('MEditor', MEditor)
+  app.component('MEmail', MEmail)
+  app.component('MField', MField)
+  app.component('MFile', MFile)
+  app.component('MForm', MForm)
+  app.component('MHidden', MHidden)
+  app.component('MHiddenInput', MHiddenInput)
   app.component('MInput', MInput)
   app.component('MInputFieldControl', MInputFieldControl)
   app.component('MInputLabel', MInputLabel)
+  app.component('MMobile', MMobile)
+  app.component('MOptions', MOptions)
+  app.component('MOtp', MOtp)
+  app.component('MPassword', MPassword)
+  app.component('MPicker', MPicker)
+  app.component('MRadio', MRadio)
+  app.component('MSelect', MSelect)
+  app.component('MTime', MTime)
+  app.component('MToggle', MToggle)
+  app.component('MUploader', MUploader)
 
   // Grid.
   app.component('MBlock', MBlock)
@@ -30,6 +145,22 @@ function install (app: App, options = {}) {
 
   // Typography.
   app.component('MTypingString', MTypingString)
+
+  // Transitions.
+  app.component('MTransition', MTransition)
+  app.component('MFadeTransition', MFadeTransition)
+  app.component('MFadeXTransition', MFadeXTransition)
+
+  // Modals.
+  app.component('MDialog', MDialog)
+  app.component('MModalMenu', MModalMenu)
+  app.component('MTooltip', MTooltip)
+
+  // Datatable
+  app.component('MDatatable', MDatatable)
+  app.component('MDtAvatar', MDtAvatar)
+  app.component('MDtBtn', MDtBtn)
+  app.component('MDtContextmenuItems', MDtContextmenuItems)
 }
 
 export {

package/tsconfig.json

@@ -19,15 +19,12 @@
     "allowUnusedLabels": false,
     "noImplicitOverride": true,
     "exactOptionalPropertyTypes": false,
-    "noUncheckedIndexedAccess": true
-  },
-  "include": [
-    "./**/*.d.ts",
-    "./**/*"
-  ],
-  "exclude": [
-    "./build",
-    "./dist",
-    "./node_modules",
-  ]
+    "noUncheckedIndexedAccess": true,
+    "types": [
+      "vite/client"
+    ],
+    "noImplicitAny": false,
+    "moduleResolution": "Bundler",
+    "newLine": "lf"
+  }
 }