@mythpe/quasar-ui-qui 0.0.23-dev → 0.0.24-dev

package/src/utils/Helpers.ts

@@ -0,0 +1,321 @@
+/*
+ * 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 { AxiosInstance, AxiosRequestConfig } from 'axios'
+import lodash from 'lodash'
+import { openURL, scroll } from 'quasar'
+import type {
+  ConfigType,
+  DownloadFromResponse,
+  DownloadFromResponseCode,
+  HelpersStubSchema,
+  ParamsType,
+  UrlType
+} from '../types'
+
+import { nextTick } from 'vue'
+
+export const Helpers = {
+  appendArray (formData: FormData, values: File | Blob | Record<string, any> | any, name?: string | null | undefined) {
+    let value: never | any
+    if ((values instanceof File || values instanceof Blob) && name) {
+      const _name = values instanceof File ? values.name : name
+      formData.append(name, values, _name)
+    } else {
+      for (const key in values) {
+        value = values[key]
+        if (value !== null && value !== undefined && typeof value === 'object') {
+          const k = name ? name + '[' + key + ']' : key
+          if (lodash.isArray(value) && value.length < 1) {
+            formData.append(`${key}`, '')
+          } else {
+            this.appendArray(formData, value, k)
+          }
+        } else {
+          if (value === !0) {
+            value = 1
+          }
+          if (value === false) {
+            value = 0
+          }
+          if (value === null || value === undefined) {
+            value = ''
+            // console.log('null----', name,key, value)
+          }
+          // if (value !== undefined) {
+          if (name) {
+            formData.append(name + '[' + key + ']', value)
+          } else {
+            formData.append(key, value)
+          }
+          // }
+        }
+      }
+    }
+    return formData
+  },
+  Stub (baseUrl: UrlType, axios: () => AxiosInstance): HelpersStubSchema {
+    const makeUrl = Helpers.StubUrl(baseUrl)
+    return {
+      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)
+      },
+      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)
+        return axios().post(u, formData, config)
+      },
+      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`),
+      async uploadAttachments (id: UrlType, data: Record<string, any>, config?: AxiosRequestConfig) {
+        const _url = makeUrl(`${id}/Attachment/Upload`)
+        return axios().post(_url, data, config)
+      },
+      async deleteAttachment (id: UrlType, fileId: string | number, config?: AxiosRequestConfig) {
+        const _url = makeUrl(`${id}/Attachment/${fileId}/Delete`)
+        return axios().delete(_url, config)
+      },
+      async updateAttachment (id: UrlType, fileId: string | number, data: Record<string, any>, config?: AxiosRequestConfig) {
+        const _url = makeUrl(`${id}/Attachment/${fileId}/Update`)
+        return axios().post(_url, data, config)
+      }
+    }
+  },
+  StubUrl: (group?: UrlType): ((segments?: UrlType, parent?: UrlType) => string) => (
+    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
+   *
+   * @param url
+   * @param reject
+   * @param windowFeatures
+   */
+  openWindow<F extends (...args: any[]) => any> (url: string, reject?: F, windowFeatures?: object) {
+    return openURL(url, reject, windowFeatures)
+  },
+  /**
+   * Customized helper to download blob from axios response
+   * @param response
+   * @param callback
+   */
+  downloadFromResponse (response: any, callback?: ((url: string, response: any) => void)) {
+    return new Promise<DownloadFromResponse>((resolve, reject) => {
+      const rejectPromise = (e?: { code: DownloadFromResponseCode }) => reject(e ?? { status: !1, code: 'unknown' })
+      const resolvePromise = (response: DownloadFromResponse['response']) => resolve({ status: !0, response })
+      try {
+        if (!response) {
+          rejectPromise({ code: 'no_response' })
+          return
+        }
+
+        if (response?.data?.data?.url) {
+          const url = response?.data?.data?.url
+          if (callback) {
+            callback(url, response)
+            resolvePromise(response)
+            return
+          }
+          const elm = document.createElement('a')
+          elm.setAttribute('href', url)
+          elm.setAttribute('target', '_blank')
+          document.body.appendChild(elm)
+          elm.click()
+          resolvePromise(response)
+          return
+        }
+
+        const name = (response.headers['content-disposition'] || '').split('filename=').pop().replace(/^"+|"+$/g, '')
+        if (!name) {
+          rejectPromise({ code: 'no_file_name' })
+          return
+        }
+        const file = new Blob([response.data])
+        const fileURL = window.URL.createObjectURL(file)
+        const fileLink = document.createElement('a')
+        if (!fileLink || !fileURL) {
+          rejectPromise({ code: 'no_file_url' })
+          return
+        }
+
+        fileLink.href = fileURL
+        fileLink.setAttribute('download', name)
+        document.body.appendChild(fileLink)
+        fileLink.click()
+        resolvePromise(response)
+        setTimeout(() => {
+          try {
+            document.body.removeChild(fileLink)
+            URL.revokeObjectURL(fileURL)
+          } catch (e: any) {
+            console.log(e)
+            if (e?.message) {
+              alert(e.message)
+            }
+          }
+        }, 3000)
+      } catch (e: any) {
+        console.log(e)
+        rejectPromise(e)
+      }
+    })
+  },
+  async scrollToElement (el: HTMLElement | string, opt?: { target?: HTMLElement | string, duration?: number; }) {
+    await nextTick()
+    const { getScrollTarget, setVerticalScrollPosition, getVerticalScrollPosition } = scroll
+    const scrollTo = typeof el === 'string' ? document.querySelector(el) as HTMLElement : el
+    if (!scrollTo) {
+      return
+    }
+    await nextTick()
+    const { target: t } = opt || {}
+    const targetSelector = typeof t === 'string' ? document.querySelector(t) as HTMLElement : t
+    const target = getScrollTarget(scrollTo, targetSelector || window.document.documentElement)
+    // console.log(targetSelector, target)
+    // let offset = 0
+    // try {
+    //   let parent = scrollTo
+    //   do {
+    //     // console.log(parent.getBoundingClientRect().top)
+    //     offset += parent?.offsetTop || 0
+    //     parent = parent.offsetParent as HTMLElement
+    //   } while (parent?.offsetParent)
+    // } catch (e) {
+    //   offset = scrollTo?.offsetTop || 0
+    // }
+    // offset = scrollTo.getBoundingClientRect().top
+    const current = getVerticalScrollPosition(target)
+    // console.log(current, target)
+    // const offset = scrollTo.getBoundingClientRect().top
+    const duration = opt?.duration || 1000
+
+    let offset = 0
+    let parent = scrollTo
+    try {
+      do {
+        offset = parent.getBoundingClientRect().top
+        if (offset === 0 && !parent.parentElement) {
+          offset = parent.scrollTop
+          break
+        } else if (offset !== 0 && parent.parentElement) {
+          break
+        }
+        parent = parent.parentElement as HTMLElement
+      } while (parent)
+    } catch (e) {
+      console.log(e)
+      offset = scrollTo?.offsetTop || 0
+    }
+    // console.log(offset, parent, current)
+    // const position = offset
+    // if (offset > current) {
+    //   position = (current - offset) + current
+    // } else if (offset < current) {
+    //   position = current + offset
+    // }
+    // console.log({
+    //   target,
+    //   scrollTo,
+    //   position,
+    //   offset,
+    //   current
+    // })
+    setVerticalScrollPosition(target, (offset + current) - 100, duration)
+  },
+  async scrollToElementFromErrors (errors?: Partial<Record<string, string[] | string | null | undefined>>, elm?: any, target?: any) {
+    if (!errors) {
+      return
+    }
+    for (const [name, value] of Object.entries(errors)) {
+      const val = value && Array.isArray(value) ? value[0] : value
+      if (val?.toString?.()?.length) {
+        if (!elm) {
+          const selector = `[data-input-name='${name}']`
+          const e = document.querySelector(selector) as HTMLElement
+          // console.log(e)
+          await this.scrollToElement(e || `[name='${name}']`, { target })
+        } else {
+          await this.scrollToElement(elm, { target })
+        }
+        break
+      }
+    }
+  },
+  makeUrl (path: string) {
+    path = path || ''
+    if (path.slice(0, 1) === '/') {
+      path = path.slice(1)
+    }
+    if (window) {
+      const l = window.location
+      return `${l.protocol}//${l.host}/${path}`
+    }
+    return `//${path}`
+  }
+}

package/src/utils/Str.ts

@@ -0,0 +1,210 @@
+/*
+ * 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,5 +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,84 @@
  */
 
 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, PropsContext, ThemeBtn, ThemeInput, ThemeRounded, ThemeShadow, ThemeSize } from '../types'
 
+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>({})
 export const myth = {
-  options: optionsRef,
-  setOptions (values: Partial<UiOptionsContext>) {
-    optionsRef.value = extend(!0, defaultOptions, 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]
   },
-  withOptions (values: Partial<UiOptionsContext>) {
-    optionsRef.value = extend(!0, defaultOptions, optionsRef.value, values)
+  /**
+   * Default loading q-btn loading slot.
+   */
+  // btnLoading: computed({
+  //   get: () => btnLoading.value,
+  //   set: v => (btnLoading.value = v)
+  // }),
+  btnLoading,
+  setBtnLoading (v: BtnLoading) {
+    btnLoading.value = v
   },
-  withBtnOptions (values: Partial<QBtnProps>) {
-    this.withOptions({
-      btn: {
-        props: values
-      }
-    })
-  }
+  /**
+   * Default Buttons style.
+   */
+  themeBtn,
+  /**
+   * Default Inputs style.
+   */
+  themeInput,
+  /**
+   * Theme Rounded.
+   */
+  rounded,
+  /**
+   * Theme Shadow.
+   */
+  shadow
 }

package/src/utils/vee-rules.ts

@@ -12,7 +12,8 @@ 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(
+  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),