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

package/src/types/dt.d.ts

@@ -0,0 +1,144 @@
+import type { QTableProps } from 'quasar'
+import type { GenericFormValues, MDatatableProps, MDtBtnProps } from './components'
+import type { MaybeRef, Ref, UnwrapRef } from 'vue'
+import type { AxiosResponse } from 'axios'
+
+type Generic = Record<any, any>;
+
+export type MDtItem<T extends object = Record<keyof T, any>> = T & {
+  id: string | number;
+  [K: keyof T]: any;
+}
+export type MDtItemIndex = number;
+export type MDtExportOptions = 'pdf' | 'excel';
+
+type MDDIP<T extends Generic = Generic | any> = Partial<MDtItem> & Record<string, any> | T;
+export type MDatatableDialogsOptions<T extends MDDIP = MDDIP> = {
+  filter: Ref<boolean>;
+  show: Ref<boolean>;
+  form: Ref<boolean>;
+  isUpdate: Ref<boolean>;
+  item: T | MaybeRef<MDDIP<T>> | UnwrapRef<MDDIP<T>> | Record<string, any> | undefined;
+  index: Ref<MDtItemIndex | undefined>;
+  errors: Record<string | number | symbol, string[]> | any;
+}
+
+type E = MDatatableDialogsOptions['item'];
+export type GenericMDtBtn<T extends E = E> = Record<string, any> & {
+  name: string;
+  label?: string;
+  contextLabel?: string | null;
+  tooltip?: string;
+  click?: (item: UnwrapRef<T> | Ref<T> | T, index: UnwrapRef<MDatatableDialogsOptions['index']>) => void;
+  multiClick?: (items: T[]) => void;
+  showIf?: boolean | ((item: UnwrapRef<MDatatableDialogsOptions['item']>, index: UnwrapRef<MDatatableDialogsOptions['index']>) => boolean);
+  order?: number;
+  attr?: Partial<MDtBtnProps> & Partial<{ icon?: string; textColor?: string; color?: string; }>;
+}
+
+export interface ApiServiceParams {
+  filter?: Record<string, any>;
+  search?: string | null;
+  searchColumns?: string[] | string;
+  // headers: string[];
+  headerItems?: any[] | string[] | string;
+  ids?: number[];
+  indexType: 'index' | 'pdf' | 'excel';
+  // For Datatable, index,export-pdf|excel,update,create,show,delete
+  fdt: 'i' | 'e' | 'u' | 'c' | 's' | 'd';
+  requestWith?: string;
+  itemsPerPage: number;
+  page: number;
+  sortBy?: string;
+  sortDesc?: number;
+  toUrl?: MDtExportOptions | boolean;
+
+  [key: string]: any;
+}
+
+export type MDtServiceNameCallbackProp = (() => Record<string, (() => Promise<AxiosResponse>)>)
+export type MDtServiceNameStringProp = string
+export type MDtRequestParamsCallbackProp = (params: ApiServiceParams) => Partial<GenericFormValues>
+export type MDtRequestParamsObjectProp = Partial<GenericFormValues>
+
+export type ParseHeaderOptions = {
+  controlKey?: 'control' | string
+  controlStyle?: 'max-width: 150px' | string
+  align?: 'left' | 'right' | 'center' | undefined
+  sortable?: boolean | undefined;
+  classes?: string | (() => string),
+  noSort?: string[]
+}
+
+// export interface ParsedHeader {
+//   /**
+//    * Unique id, identifies column, (used by pagination.sortBy, 'body-cell-[name]' slot, ...)
+//    */
+//   name: string;
+//   /**
+//    * Label for header
+//    */
+//   label: string;
+//   /**
+//    * Row Object property to determine value for this column or function which maps to the required property
+//    * @param row The current row being processed
+//    * @returns Value for this column
+//    */
+//   field: string | ((row: any) => any);
+//   /**
+//    * If we use visible-columns, this col will always be visible
+//    */
+//   required?: boolean;
+//   /**
+//    * Horizontal alignment of cells in this column
+//    * Default value: right
+//    */
+//   align?: 'left' | 'right' | 'center';
+//   /**
+//    * Tell QTable you want this column sortable
+//    */
+//   sortable?: boolean;
+//   /**
+//    * Compare function if you have some custom data or want a specific way to compare two rows
+//    * @param a Value of the first comparison term
+//    * @param b Value of the second comparison term
+//    * @param rowA Full Row object in which is contained the first term
+//    * @param rowB Full Row object in which is contained the second term
+//    * @returns Comparison result of term 'a' with term 'b'. Less than 0 when 'a' should come first; greater than 0 if 'b' should come first; equal to 0 if their position must not be changed with respect to each other
+//    */
+//   sort?: (a: any, b: any, rowA: any, rowB: any) => number;
+//   /**
+//    * Set column sort order: 'ad' (ascending-descending) or 'da' (descending-ascending); Overrides the 'column-sort-order' prop
+//    * Default value: ad
+//    */
+//   sortOrder?: 'ad' | 'da';
+//   /**
+//    * Function you can apply to format your data
+//    * @param val Value of the cell
+//    * @param row Full Row object in which the cell is contained
+//    * @returns The resulting formatted value
+//    */
+//   format?: (val: any, row: any) => any;
+//   /**
+//    * Style to apply on normal cells of the column
+//    * @param row The current row being processed
+//    */
+//   style?: string | ((row: any) => string);
+//   /**
+//    * Classes to add on normal cells of the column
+//    * @param row The current row being processed
+//    */
+//   classes?: string | ((row: any) => string);
+//   /**
+//    * Style to apply on header cells of the column
+//    */
+//   headerStyle?: string;
+//   /**
+//    * Classes to add on header cells of the column
+//    */
+//   headerClasses?: string;
+// }
+
+export type MDtColumn = QTableProps['columns'][number]
+
+export type MDtHeadersParameter = MDtColumn[] | (keyof MDatatableProps['defaultItem'])[]

package/src/types/index.d.ts

@@ -1,2 +1,156 @@
+/*
+ * 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 { QBtnProps, QFieldProps, QNotifyCreateOptions } from 'quasar'
+import {
+  MAvatarViewerProps,
+  MBlockProps,
+  MBtnProps,
+  MCheckboxProps,
+  MColProps,
+  MColumnProps,
+  MContainerProps,
+  MDateProps,
+  MEditorProps,
+  MFileProps,
+  MHelpRowProps,
+  MInputProps,
+  MPickerProps,
+  MRadioProps,
+  MRowProps,
+  MSelectProps,
+  MTimeProps,
+  MTypingStringProps
+} from './components'
+import { myth } from '../utils'
+import { ThemeBtn, ThemeFluid, ThemeInput, ThemeRounded, ThemeShadow, ThemeSize } from './theme'
+import { HelpersStubSchema } from './api-helpers'
+
+/**
+ * Default loading q-btn loading slot.
+ */
+export type BtnLoading = {
+  type: 'audio' | 'ball' | 'bars' | 'box' | 'clock' | 'comment' | 'cube' | 'dots' | 'facebook' | 'gears' | 'grid' | 'hearts' | 'hourglass' | 'infinity' | 'ios' | 'orbit' | 'oval' | 'pie' | 'puff' | 'radio' | 'rings' | 'tail' | 'spinner';
+  color?: string | undefined;
+  size?: string | undefined;
+  noLabel?: boolean;
+}
+
+export interface PropsContext {
+  // Grid.
+  /**
+   * MBlock component.
+   */
+  block?: Partial<MBlockProps>;
+  /**
+   * MCol component.
+   */
+  col?: Partial<MColProps>;
+  /**
+   * MColumn component.
+   */
+  column?: Partial<MColumnProps>;
+  /**
+   * MContainer component.
+   */
+  container?: Partial<MContainerProps>;
+  /**
+   * MHelpRow component.
+   */
+  helpRow?: Partial<MHelpRowProps>;
+  /**
+   * MRow component.
+   */
+  row?: Partial<MRowProps>;
+  /**
+   * MTypingString component.
+   */
+  typingString?: Partial<MTypingStringProps>;
+  /**
+   * MAvatarViewer component.
+   */
+  avatarViewer?: Partial<MAvatarViewerProps>;
+  /**
+   * MBtn component.
+   */
+  btn?: Partial<MBtnProps>;
+  /**
+   * MInput component.
+   */
+  input?: Partial<MInputProps>;
+  /**
+   * MFile component.
+   */
+  file?: Partial<MFileProps>;
+  /**
+   * MMobile component.
+   */
+  mobile?: Partial<MInputProps>;
+  /**
+   * MInput view mode props.
+   */
+  field?: Partial<QFieldProps>;
+  /**
+   * MCheckbox component.
+   */
+  checkbox?: Partial<MCheckboxProps>;
+  /**
+   * MRadio component.
+   */
+  radio?: Partial<MRadioProps>;
+  /**
+   * MSelect component.
+   */
+  select?: Partial<MSelectProps>;
+  /**
+   * MPicker component.
+   */
+  picker?: Partial<MPickerProps>;
+  /**
+   * q-btn component props.
+   */
+  pickerBtn?: Partial<QBtnProps>;
+  /**
+   * MDate component.
+   */
+  date?: Partial<MDateProps>;
+  /**
+   * MEditor component.
+   */
+  editor?: Partial<MEditorProps>;
+  /**
+   * MTime component.
+   */
+  time?: Partial<MTimeProps>;
+  /**
+   * Notify Props.
+   */
+  notify?: Partial<QNotifyCreateOptions>;
+}
+
+export interface InstallOptions {
+  size?: ThemeSize;
+  rounded?: ThemeRounded;
+  shadow?: ThemeShadow;
+  fluid?: ThemeFluid;
+  rules?: string[];
+  btnLoading?: BtnLoading;
+  props?: PropsContext;
+  themeInput?: ThemeInput;
+  themeBtn?: ThemeBtn;
+  api?: HelpersStubSchema;
+}
+
+export type MythContext = typeof myth;
+
+export * from './api-helpers'
 export * from './components'
-export * from './myth'
+export * from './dt'
+export * from './lodash'
+export * from './quasar-helpers'
+export * from './theme'

package/src/types/lodash.d.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 {}

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

@@ -0,0 +1,7 @@
+import type { DialogChainObject, QNotifyCreateOptions, QNotifyUpdateOptions } from 'quasar'
+
+export type Vue3MAlertMessageOptions = QNotifyCreateOptions | string;
+
+export type Vue3MAlertMessage = (props?: QNotifyUpdateOptions) => void;
+
+export type Vue3MConfirmMessage = DialogChainObject

package/src/types/theme.d.ts

@@ -0,0 +1,12 @@
+import type { QBtnProps, QInputProps } from 'quasar'
+
+export type ThemeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none' | string;
+export type ThemeShadow = string | number | 'transition' | 'none';
+export type ThemeRounded = boolean;
+export type ThemeFluid = boolean;
+export type ThemeInput =
+  Partial<Pick<QInputProps, 'standout' | 'dense' | 'filled' | 'outlined' | 'rounded' | 'borderless' | 'counter' | 'noErrorIcon' | 'hideBottomSpace' | 'bottomSlots' | 'clearIcon' | 'itemAligned' | 'square' | 'stackLabel'>>
+  & {
+  topLabel?: boolean;
+}
+export type ThemeBtn = Partial<Pick<QBtnProps, 'flat' | 'outline' | 'push' | 'unelevated' | 'noCaps' | 'rounded' | 'glossy' | 'square' | 'padding' | 'ripple' | 'dense'>>

package/src/utils/Helpers.ts

@@ -0,0 +1,293 @@
+/*
+ * 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 { AxiosInstance, AxiosRequestConfig } from 'axios'
+import type { ConfigType, DownloadFromResponse, DownloadFromResponseCode, HelpersStubSchema, ParamsType, UrlType } from '../types'
+import lodash from 'lodash'
+import { openURL, scroll } from 'quasar'
+
+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)
+      },
+      async staticIndex (config?: ConfigType) {
+        const u = `Static${baseUrl ? `/${baseUrl}` : ''}`
+        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()
+        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)
+      },
+      async staticShow (id: UrlType, config?: AxiosRequestConfig) {
+        const u = `Static${baseUrl ? `/${baseUrl}` : ''}` + `/${id}`
+        return axios().get(u, config)
+      },
+      async update (id: UrlType, data?: ParamsType, config?: AxiosRequestConfig) {
+        const u = makeUrl(id)
+        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)
+      },
+      async destroyAll (ids?: UrlType[], config?: AxiosRequestConfig) {
+        const u = makeUrl('DestroyAll')
+        return axios().post(u, { ids: (ids || []) }, config)
+      },
+      getUploadAttachmentsUrl: (id: UrlType): string => 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}`
+  }
+}