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

package/src/types/dt.d.ts

@@ -0,0 +1,142 @@
+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

@@ -6,68 +6,149 @@
  * Github: https://github.com/mythpe
  */
 
-import type { QBtnProps, QFieldProps } from 'quasar'
-import type { Ref } from 'vue'
-import type { MBlockProps, MInputProps, StyleSize } from './components'
+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'
 
-export interface UiOptionsContext {
-  /**
-   * Rules keys that can be added to Input Rules as Vue Attr
-   */
-  inputRules?: string[];
-  /**
-   * 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;
-    /**
-     * Apply style of all inputs.
-     */
-    // inputs?: {
-    //   dense?: boolean;
-    //   rounded?: boolean;
-    //   outlined?: boolean;
-    //   standout?: boolean;
-    // }
-  };
-  /**
-   * 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;
-    }
-  };
+/**
+ * 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 MythContext {
-  options: Ref<UiOptionsContext>;
-  setOptions: (values: Partial<UiOptionsContext>) => void;
-  withOptions: (values: Partial<UiOptionsContext>) => void;
-  withBtnOptions: (values: Partial<QBtnProps>) => void;
+export interface InstallOptions {
+  size?: ThemeSize;
+  rounded?: ThemeRounded;
+  shadow?: ThemeShadow;
+  fluid?: ThemeFluid;
+  rules?: string[];
+  btnLoading?: BtnLoading;
+  props?: PropsContext;
+  themeInput?: ThemeInput;
+  themeBtn?: ThemeBtn;
 }
 
+export type MythContext = typeof myth;
+
+export * from './api-helpers'
 export * from './components'
+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'>>