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

package/src/composable/useMyth.ts

@@ -0,0 +1,302 @@
+/*
+ * 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 { useI18n } from 'vue-i18n'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import { copyToClipboard, Dialog, extend, QDialogOptions, QNotifyCreateOptions, useQuasar } from 'quasar'
+import { Helpers, myth, Str, veeRules } from '../utils'
+import type { MDtColumn, MDtHeadersParameter, ParseHeaderOptions, Vue3MAlertMessage, Vue3MAlertMessageOptions, Vue3MConfirmMessage } from '../types'
+import { computed } from 'vue'
+
+export const useMyth = () => {
+  const { t, te } = useI18n({ useScope: 'global' })
+  const { props: pluginOptions } = myth
+  const q = useQuasar()
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const __ = (key: any, ...rest: unknown[]) => !key ? '' : te(`attributes.${key}`) ? t(`attributes.${key}`, ...rest) : te(key) ? t(key, ...rest) : key
+  const getPageTitle = (route: RouteLocationNormalizedLoaded, number?: number | string): string => {
+    number = number || 2
+    number = parseInt(number.toString())
+    const defaultValue = ''
+    // Not is route
+    // No page title
+    if (!route) {
+      return defaultValue
+    }
+
+    const routePath = route?.path?.toString() || null
+    const routeName = route?.name?.toString() || null
+
+    // Not is route
+    // No page title
+    if (!routePath || !routeName) {
+      return defaultValue
+    }
+
+    let lastRouteName = routeName.split('.').pop() || ''
+    if (lastRouteName === 'index') {
+      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 keys = lodash.filter(lodash.uniq([
+      `${lastRouteName}Page.title`,
+      `${lodash.camelCase(lastRouteName)}Page.title`,
+      `choice.${pluralize}`,
+      `choice.${singular}`,
+      `replace.${lastRouteName}_details`,
+      `replace.${lastRouteName}`,
+      pluralize,
+      lodash.snakeCase(pluralize),
+      singular,
+      lodash.snakeCase(singular)
+    ]))
+
+    let str: string | null = null
+    let k: string | any
+
+    if (te((k = `routes.${routeName}`)) && lodash.isString((str = t(k)))) {
+      return str
+    }
+
+    if (te((k = `routes.${routePath}`)) && lodash.isString((str = t(k)))) {
+      return str
+    }
+
+    for (const f in keys) {
+      if (!(k = keys[f])) {
+        continue
+      }
+      if (te && te(k) && lodash.isString(t(k))) {
+        if (lodash.startsWith(k, '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 _modelChoiceKey = `choice.${pluralizeModel}`
+            if (te(_modelChoiceKey)) {
+              const l = t(_modelChoiceKey, number as any)
+              const rep = lodash.singularize(n[n.length - 1]).toLocaleLowerCase()
+              const e = `replace.${rep}`
+              str = te(e) ? t(e, { name: l }) : null
+            } else {
+              const pop: string = k.split('.').pop() || ''
+              str = te(k) ? t(k, number as any, { [pop]: number }) : null
+            }
+          } else {
+            const pop: string = k.split('.').pop() || ''
+            str = te(k) ? t(k, number as any, { [pop]: number }) : null
+          }
+        } else {
+          const parents: string[] = routeName.split('.')
+          if (parents.length > 1) {
+            const e = `choice.${Str.pascalCase(lodash.pluralize(parents[parents.length - 2]))}`
+            str = te(e) ? t(k, { name: t(e, '1') }) : null
+          } else {
+            str = te(k) ? t(k, { name: '' }) : null
+          }
+        }
+        return str || defaultValue
+      }
+    }
+    return defaultValue
+  }
+  /**
+   * Custom transformer
+   * @param headers
+   * @param options
+   */
+  const parseHeaders = (headers: MDtHeadersParameter, options: ParseHeaderOptions = {}): MDtColumn[] => {
+    const defaultOptions: Partial<ParseHeaderOptions> = {
+      controlKey: 'control',
+      // controlStyle: 'max-width: 150px',
+      align: 'center'
+      // sortable: !0
+    }
+    const opts = extend<ParseHeaderOptions>(!0, defaultOptions, options)
+    let control: string | undefined = defaultOptions.controlKey
+    let controlStyle: string | undefined = defaultOptions.controlStyle
+    if (opts.controlKey) {
+      control = opts.controlKey
+      delete opts.controlKey
+    }
+    if (opts.controlStyle) {
+      controlStyle = opts.controlStyle
+      delete opts.controlStyle
+    }
+
+    const result: MDtColumn[] = []
+
+    headers.forEach((elm: string | MDtColumn | undefined) => {
+      if (typeof elm !== 'string' && !elm?.name) return elm
+      // Todo: will do this
+      let item: MDtColumn = typeof elm === 'string' ? {
+        name: elm as string,
+        label: elm as string,
+        field: elm as string
+      } : { ...elm }
+      item.name = item.name ?? ''
+      item.label = (item.label === undefined || item.label === null) ? item.name : item.label
+      item.field = (item.field === undefined || item.field === null) ? item.name : item.field
+      item = {
+        ...item,
+        name: Str.strBefore(Str.strBefore(item.name), 'ToString'),
+        label: (item.label !== undefined && item.label !== null) ? Str.strBefore(Str.strBefore(item.label), 'ToString') : item.label
+      }
+      const name = item.name
+      let k
+      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)}`))) {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          item.label = t(k)
+        } else if (te((k = `attributes.${lodash.camelCase(item.label)}`))) {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          item.label = t(k)
+        } else if (te((k = `attributes.${Str.pascalCase(item.label)}`))) {
+          // 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))}`))) {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          item.label = t(k, 2)
+        } else if (te((k = item.label))) {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          item.label = t(k)
+        }
+      }
+
+      if (name === control) {
+        if (controlStyle && !item.style) {
+          item.style = controlStyle + (item.style ? ` ${item.style}` : '')
+        }
+        item.headerClasses = (item.headerClasses ? item.headerClasses : '') + ' m--control-header'
+        item.headerClasses = item.headerClasses.trim()
+        item.sortable = !1
+        if (!item.align) {
+          item.align = 'right'
+        }
+        opts.classes = opts.classes || ''
+        if (typeof opts.classes === 'function') {
+          opts.classes = opts.classes()
+        }
+        opts.classes += ' m--control-cell'
+        opts.classes = opts.classes.trim()
+      }
+
+      item = { ...opts, ...item }
+
+      if (item.sortable === undefined && (options.noSort ?? []).length > 0 && options.noSort?.includes(item.name)) {
+        item.sortable = !1
+      } else if (item.sortable === undefined) {
+        item.sortable = !0
+      }
+      result.push(item)
+    })
+    return lodash.uniqBy(result, (e: MDtColumn) => e.name)
+  }
+  /**
+   * Copy text
+   * @param text
+   */
+  const copyText = async (text: string | any) => copyToClipboard(text)
+
+  const quasarNotifyOptions = (opts: QNotifyCreateOptions | string): QNotifyCreateOptions => {
+    return {
+      badgeColor: 'primary',
+      progress: !0,
+      ...pluginOptions.value.notify as any,
+      message: typeof opts === 'string' ? opts : opts.message,
+      ...(typeof opts !== 'string' ? opts : {})
+    }
+  }
+  const alertMessage = (opts: Vue3MAlertMessageOptions): Vue3MAlertMessage => {
+    return q.notify(quasarNotifyOptions(opts))
+  }
+  const alertSuccess = (message: string) => {
+    return alertMessage({ type: 'positive', message })
+  }
+  const alertError = (message: string) => {
+    return alertMessage({ type: 'negative', message })
+  }
+  const confirmMessage = (message?: string, title?: string, opts?: QDialogOptions): Vue3MConfirmMessage => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    title = title || t('messages.are_you_sure') || ''
+    message = message || ''
+    opts = opts || {}
+    const buttonsProps = {
+      ...(pluginOptions.value.btn || {})
+      // ...(options.value.confirmDialogOptions?.buttons || {})
+    }
+    // const okProps = options.value.confirmDialogOptions?.okProps || {}
+    const okProps: any = {}
+    // const cancelProps = options.value.confirmDialogOptions?.cancelProps || {}
+    const cancelProps: any = {}
+    // const dialogProps = options.value.confirmDialog || {} as any
+    const dialogProps: any = {}
+    dialogProps.transitionShow = dialogProps.transitionShow || 'jump-down'
+    dialogProps.transitionHide = dialogProps.transitionHide || 'jump-up'
+    dialogProps.class = ('m--confirm ') + (dialogProps.class || '')
+    return Dialog.create({
+      title,
+      message,
+      focus: 'none',
+      cancel: {
+        color: cancelProps.color || 'positive',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        label: t(cancelProps?.label || 'no'),
+        ...buttonsProps as any,
+        flat: !0,
+        unelevated: !0,
+        ...cancelProps as any
+      },
+      ok: {
+        color: okProps.color || 'negative',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        label: t(okProps?.label || 'yes'),
+        ...buttonsProps as any,
+        flat: !0,
+        unelevated: !0,
+        ...okProps as any
+      },
+      persistent: !0,
+      ...dialogProps as any,
+      ...opts as any
+    })
+  }
+  const api = computed(() => myth.api.value)
+  return {
+    api,
+    __,
+    getPageTitle,
+    parseHeaders,
+    copyText,
+    quasarNotifyOptions,
+    alertMessage,
+    alertSuccess,
+    alertError,
+    confirmMessage,
+    ...Helpers,
+    ...Str,
+    veeRules
+  }
+}

package/src/composable/useValue.ts

@@ -0,0 +1,12 @@
+import { computed, MaybeRefOrGetter } from 'vue'
+import { useFieldValue, useSetFieldValue } from 'vee-validate'
+
+export const useValue = <T = any> (name: MaybeRefOrGetter<string>) => {
+  const [value, setValue] = [useFieldValue<T>(name), useSetFieldValue<T>(name)]
+  const field = computed<T>({
+    get: () => value.value,
+    set: (v: T) => setValue(v)
+  })
+
+  return { field, value, setValue }
+}

package/src/index.common.js

@@ -1 +1,19 @@
-export * from './vue-plugin'
+/*
+ * 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'

package/src/index.esm.js

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

package/src/index.js

@@ -0,0 +1,19 @@
+/*
+ * 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'

package/src/index.sass

@@ -1,27 +1,9 @@
-@import 'quasar/src/css/variables.sass'
-$m--container-padding: $space-base !default
-$m--container-fluid-width: 1440px !default
-$m--row-margin-top: $m--container-padding !default
-
-.flex-break
-  flex: 1 0 100% !important
-
-.row
-  .flex-break
-    height: 0 !important
-
-.column
-  .flex-break
-    width: 0 !important
+// 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
 
-.m--container
-  &__dense
-    padding: 0 !important
-
-  &__fluid
-    max-width: $m--container-fluid-width
-    margin-left: auto
-    margin-right: auto
-
-.m--row + .m--row
-  margin-top: $m--row-margin-top
+@import 'quasar/src/css/variables.sass'
+@import './style/main.sass'
+@import './style/m-container'

package/src/index.ts

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

package/src/index.umd.js

@@ -1,2 +1,17 @@
-import * as VuePlugin from './vue-plugin'
-export default VuePlugin
+/*
+ * 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 components from './components'
+import * as composable from './composable'
+import * as utils from './utils'
+
+export default {
+  ...components,
+  ...composable,
+  ...utils
+}

package/src/style/m-container.sass

@@ -0,0 +1,13 @@
+@use "quasar/src/css/variables" as q
+
+$m--container-padding: q.$space-base !default
+$m--container-fluid-width: 1440px !default
+
+.m--container
+  &__dense
+    padding: 0
+
+  &__fluid
+    max-width: $m--container-fluid-width
+    margin-left: auto
+    margin-right: auto

package/src/style/main.sass

@@ -0,0 +1,42 @@
+// Flex.
+.flex-break
+  flex: 1 0 100% !important
+  padding: 0 !important
+  margin: 0 !important
+
+.row
+  .flex-break
+    height: 0 !important
+
+.column
+  .flex-break
+    width: 0 !important
+
+$m--row-margin-top: 1rem !default
+
+.m--row + .m--row
+  margin-top: $m--row-margin-top
+
+
+// Directions.
+.ltr
+  direction: ltr #{"/* rtl:ignore */"}
+
+.rtl
+  direction: rtl #{"/* rtl:ignore */"}
+
+// Colors.
+$text-light-color: #111111 !default
+$text-dark-color: #ffffff !default
+
+.body--light
+  color: $text-light-color
+
+  .text-color
+    color: $text-light-color
+
+.body--dark
+  color: $text-dark-color
+
+  .text-color
+    color: $text-dark-color

package/src/types/api-helpers.d.ts

@@ -0,0 +1,123 @@
+/*
+ * 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 { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'
+import { ApiServiceParams } from './dt'
+
+// Axios
+type Generic = Record<any, any>;
+
+export type ApiMetaInterface = {
+  // server current page
+  current_page: number | null;
+  // server last page
+  last_page: number | null;
+  // server total items
+  total: number | null;
+  [K: any]: any;
+};
+export type ApiErrorInterface = Record<string, string[]>;
+export type ApiErrorsInterface = ApiErrorInterface[];
+
+export type ApiModel<T extends Generic = Generic> = {
+  id: string | number;
+  value: string | number;
+  label?: string;
+  [K: keyof T]: any;
+  [s: string]: any;
+};
+
+type ResponseAsMain = Generic & {
+  success: boolean;
+  errors: ApiErrorsInterface;
+  message: string;
+}
+
+type ResponseAsModel<T extends Generic = Generic> = ResponseAsMain & {
+  data: ApiModel<T>
+}
+type ResponseAsList<T extends Generic = Generic> = ResponseAsMain & {
+  data: ResponseAsModel<T>[];
+  links: {
+    first: string;
+    last: string;
+    prev: string | null;
+    next: string | null;
+  }
+  meta: ApiMetaInterface;
+}
+type ResponseDataType = ResponseAsList | ResponseAsModel | Generic;
+export type ApiFulfilledResponse = AxiosResponse<ResponseDataType>
+export type ApiErrorResponse = AxiosError<ResponseDataType>;
+
+export type ApiInterface = ApiFulfilledResponse & {
+  _data: ResponseDataType;
+  _message: ResponseAsMain['message'];
+  _meta: ResponseAsList['meta'];
+  _success: ResponseAsMain['success'];
+  _errors: ResponseAsMain['errors'];
+}
+
+// Axios
+
+export type DownloadFromResponse = {
+  status: boolean;
+  response: AxiosResponse;
+}
+
+export type DownloadFromResponseCode = 'no_response' | 'no_file_name' | 'no_file_url' | 'unknown' | string
+export type DownloadFromResponseError = {
+  code: DownloadFromResponseCode
+  status: boolean;
+}
+
+export type UrlType = string | number | any;
+export type ParamsType = Record<string, any> | FormData | object
+export type ConfigType = AxiosRequestConfig<ApiInterface> & Partial<{
+  params: Partial<ApiServiceParams> & Generic
+}>
+
+export type HelpersStubSchema = {
+  index (config?: ConfigType): Promise<ApiInterface>;
+
+  staticIndex (config?: ConfigType): Promise<ApiInterface>;
+
+  export (data?: ParamsType, config?: AxiosRequestConfig): Promise<ApiInterface>;
+
+  store (data?: ParamsType, config?: AxiosRequestConfig): Promise<ApiInterface>;
+
+  show (id: UrlType, config?: AxiosRequestConfig): Promise<ApiInterface>;
+
+  staticShow (id: UrlType, config?: AxiosRequestConfig): Promise<ApiInterface>;
+
+  update (id: UrlType, data?: ParamsType, config?: AxiosRequestConfig): Promise<ApiInterface>;
+
+  destroy (id: UrlType, config?: AxiosRequestConfig): Promise<ApiInterface>;
+
+  destroyAll (ids?: UrlType[], config?: AxiosRequestConfig): Promise<ApiInterface>;
+
+  getUploadAttachmentsUrl (id: UrlType): string;
+
+  uploadAttachments (id: UrlType, data: Generic, config?: AxiosRequestConfig): Promise<ApiInterface>;
+
+  deleteAttachment (id: UrlType, fileId: string | number, config?: AxiosRequestConfig): Promise<ApiInterface>;
+
+  updateAttachment (id: UrlType, fileId: string | number, data: Record<string, any>, config?: AxiosRequestConfig): Promise<ApiInterface>;
+
+} | (HelpersStubSchema & Record<string, HelpersStubSchema | ((...args: any) => Promise<ApiInterface>)>)
+
+export type StubSchemaContext = HelpersStubSchema
+  & Record<string, ((...args: any) => Promise<ApiInterface>)>
+  & Record<string, Record<string, ((...args: any) => Promise<ApiInterface>)>>
+  & Record<string, Record<string, Record<string, ((...args: any) => Promise<ApiInterface>)>>>
+
+export type StubSchema = StubSchemaContext
+  & ((...args: any) => Promise<ApiInterface>)
+  & string
+  & Record<string, StubSchemaContext>
+export type MythApiServicesSchema = { [key: string | symbol | number]: StubSchema }