@mythpe/quasar-ui-qui 0.0.25 → 0.0.26-dev

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

@@ -0,0 +1,13 @@
+/*
+ * 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
+ */
+
+export * from './myth'
+export * from './Str'
+export * from './Helpers'
+export * from './vee-rules'
+export * from './vue-plugin'

package/src/utils/myth.ts

@@ -0,0 +1,95 @@
+/*
+ * 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 { ref } from 'vue'
+import { extend } from 'quasar'
+import type { BtnLoading, HelpersStubSchema, 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>({})
+const api = ref<HelpersStubSchema>({} as HelpersStubSchema)
+export const myth = {
+  /**
+   * 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,
+  api,
+  setApi (v: HelpersStubSchema) {
+    api.value = v
+  }
+}

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

@@ -0,0 +1,129 @@
+/*
+ * 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 type { App } from 'vue'
+import { name, version } from '../../package.json'
+import { myth } from './myth'
+import {
+  MAvatarViewer,
+  MAxios,
+  MBlock,
+  MBtn,
+  MCheckbox,
+  MCol,
+  MColor,
+  MColumn,
+  MContainer,
+  MDate,
+  MEditor,
+  MEmail,
+  MFadeTransition,
+  MFadeXTransition,
+  MField,
+  MFile,
+  MForm,
+  MHelpRow,
+  MHidden,
+  MHiddenInput,
+  MInput,
+  MInputFieldControl,
+  MInputLabel,
+  MMobile,
+  MPassword,
+  MPicker,
+  MRadio,
+  MRow,
+  MSelect,
+  MTime,
+  MTransition,
+  MTypingString
+} from '../components'
+
+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.api !== undefined) {
+    myth.setApi(options.api)
+  }
+
+  // Form.
+  app.component('MAvatarViewer', MAvatarViewer)
+  app.component('MAxios', MAxios)
+  app.component('MBtn', MBtn)
+  app.component('MCheckbox', MCheckbox)
+  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('MPassword', MPassword)
+  app.component('MPicker', MPicker)
+  app.component('MRadio', MRadio)
+  app.component('MSelect', MSelect)
+  app.component('MTime', MTime)
+
+  // Grid.
+  app.component('MBlock', MBlock)
+  app.component('MCol', MCol)
+  app.component('MColumn', MColumn)
+  app.component('MContainer', MContainer)
+  app.component('MHelpRow', MHelpRow)
+  app.component('MRow', MRow)
+
+  // Typography.
+  app.component('MTypingString', MTypingString)
+
+  // Transitions.
+  app.component('MTransition', MTransition)
+  app.component('MFadeTransition', MFadeTransition)
+  app.component('MFadeXTransition', MFadeXTransition)
+}
+
+export {
+  name,
+  version,
+  install
+}
+
+export default {
+  name,
+  version,
+  install
+}

package/tsconfig.json

@@ -1,8 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": "./",
-    "rootDir": ".",
-    "outDir": "./dist",
     "esModuleInterop": true,
     "skipLibCheck": true,
     "target": "esnext",
@@ -10,7 +7,6 @@
     "resolveJsonModule": true,
     "moduleDetection": "force",
     "isolatedModules": true,
-    "verbatimModuleSyntax": true,
     "module": "preserve",
     "noEmit": true,
     "lib": [
@@ -22,13 +18,13 @@
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,
     "noImplicitOverride": true,
-    "exactOptionalPropertyTypes": true,
-    "noUncheckedIndexedAccess": true
-  },
-  "exclude": [
-    "./build"
-  ],
-  "include": [
-    "src/**/*"
-  ]
+    "exactOptionalPropertyTypes": false,
+    "noUncheckedIndexedAccess": true,
+    "types": [
+      "vite/client"
+    ],
+    "noImplicitAny": false,
+    "moduleResolution": "Bundler",
+    "newLine": "lf"
+  }
 }

package/src/myth.ts

@@ -1,30 +0,0 @@
-import { ref } from 'vue'
-import type { QBtnProps } from 'quasar'
-import { extend } from 'quasar'
-import type { MythContext, UiOptionsContext } from './types'
-
-const defGutters = 'md'
-const defaultOptions: UiOptionsContext = {
-  style: {
-    gutters: defGutters
-  }
-}
-const optionsRef = ref<UiOptionsContext>({ ...defaultOptions })
-
-export const myth : MythContext = {
-  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
-      }
-    })
-  }
-}
-export default myth

package/src/types/myth.ts

@@ -1,42 +0,0 @@
-import type { QBtnProps } from 'quasar'
-import type { Ref } from 'vue'
-import type { MBlockProps, StyleSize } from './components'
-
-export interface UiOptionsContext {
-  /**
-   * Style of the components.
-   */
-  style?: {
-    /**
-     * Apply Padding on all sides of components.
-     */
-    gutters?: StyleSize | undefined;
-    /**
-     * Apply Fluid on all sides of containers.
-     */
-    fluid?: boolean | undefined;
-  };
-  /**
-   * MBtn component.
-   */
-  btn?: {
-    props?: Partial<QBtnProps>;
-    loading?: {
-      type: 'audio' | 'ball' | 'bars' | 'box' | 'clock' | 'comment' | 'cube' | 'dots' | 'facebook' | 'gears' | 'grid' | 'hearts' | 'hourglass' | 'infinity' | 'ios' | 'orbit' | 'oval' | 'pie' | 'puff' | 'radio' | 'rings' | 'tail';
-      color?: string | undefined;
-      size?: string | undefined;
-      label?: boolean | undefined;
-    }
-  };
-  /**
-   * MBlock component.
-   */
-  block?: Partial<MBlockProps>;
-}
-
-export interface MythContext {
-  options: Ref<UiOptionsContext>;
-  setOptions: (values: Partial<UiOptionsContext>) => void;
-  withOptions: (values: Partial<UiOptionsContext>) => void;
-  withBtnOptions: (values: Partial<QBtnProps>) => void;
-}

package/src/vue-plugin.ts

@@ -1,41 +0,0 @@
-import js from './../package.json'
-import myth from './myth'
-import MBtn from './components/form/MBtn.vue'
-import MBlock from './components/grid/MBlock.vue'
-import MCol from './components/grid/MCol.vue'
-import MColumn from './components/grid/MColumn.vue'
-import MContainer from './components/grid/MContainer.vue'
-import MHelpRow from './components/grid/MHelpRow.vue'
-import MRow from './components/grid/MRow.vue'
-import MTypingString from './components/typography/MTypingString.vue'
-import type { App } from 'vue'
-
-const name = js.name
-const version = js.version
-
-function install (app: App, options = {}) {
-  myth.withOptions(options)
-
-  // Form.
-  app.component('MBtn', MBtn)
-
-  // Grid.
-  app.component('MBlock', MBlock)
-  app.component('MCol', MCol)
-  app.component('MColumn', MColumn)
-  app.component('MContainer', MContainer)
-  app.component('MHelpRow', MHelpRow)
-  app.component('MRow', MRow)
-
-  // Typography.
-  app.component('MTypingString', MTypingString)
-}
-
-export const e = {
-  name,
-  version,
-  install,
-  myth
-}
-
-export default e

package/types.d.ts

@@ -1 +0,0 @@
-export * from './src/types'