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

package/src/types/plugin-props-option.d.ts

@@ -0,0 +1,301 @@
+import type {
+  MAvatarViewerProps,
+  MBlockProps,
+  MBtnProps,
+  MCheckboxProps,
+  MColProps,
+  MColumnProps,
+  MContainerProps,
+  MDateProps,
+  MDialogProps,
+  MEditorProps,
+  MFileProps,
+  MHelpRowProps,
+  MInputProps,
+  MModalMenuProps,
+  MOptionsProps,
+  MOtpProps,
+  MPickerProps,
+  MRadioProps,
+  MRowProps,
+  MSelectProps,
+  MTimeProps,
+  MToggleProps,
+  MTooltipProps,
+  MTypingStringProps,
+  MUploaderProps
+} from './components'
+import type {
+  QBtnDropdownProps,
+  QBtnProps,
+  QCardProps, QDialogOptions,
+  QDialogProps,
+  QFieldProps, QIconProps, QItemLabelProps,
+  QItemProps, QItemSectionProps, QListProps,
+  QMenuProps,
+  QNotifyCreateOptions,
+  QPageStickyProps,
+  QPopupProxyProps
+} from 'quasar'
+import { MDatatableProps, MDtBtnProps } from './m-datatable'
+
+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>;
+  /**
+   * MOptions component.
+   */
+  options?: Partial<MOptionsProps>;
+  /**
+   * MOtp component.
+   */
+  otp?: Partial<MOtpProps>;
+  /**
+   * 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>;
+  /**
+   * MToggle component.
+   */
+  toggle?: Partial<MToggleProps>;
+  /**
+   * MUploader component.
+   */
+  uploader?: Partial<MUploaderProps>;
+  /**
+   * MUploader options.
+   */
+  uploaderOptions?: {
+    downloadBtnProps?: Partial<QBtnProps>;
+    removeBtnProps?: Partial<QBtnProps>;
+    iconsSize?: MUploaderProps['iconsSize'];
+  };
+  /**
+   * Notify Props.
+   */
+  notify?: Partial<QNotifyCreateOptions>;
+  /**
+   * MDialog component.
+   */
+  dialog?: Partial<MDialogProps>;
+  confirmDialog?: Partial<QDialogOptions>;
+  confirmDialogOptions?: {
+    buttons?: Partial<QBtnProps>;
+    okProps?: Partial<QBtnProps>;
+    cancelProps?: Partial<QBtnProps>;
+  };
+  /**
+   * MModalMenu component.
+   */
+  modalMenu?: Partial<MModalMenuProps>;
+  /**
+   * MModalMenu options.
+   */
+  modalMenuOptions?: {
+    card?: Partial<QCardProps>;
+    closeBtn?: Partial<QItemProps>;
+  };
+  /**
+   * MTooltip component.
+   */
+  tooltip?: Partial<MTooltipProps>;
+  /**
+   * MDatatable component.
+   */
+  datatable?: Partial<MDatatableProps>;
+  /**
+   * Styles for DataTable.
+   */
+  dt?: {
+    /**
+     * Style of the DataTable.
+     */
+    dense?: boolean;
+    /**
+     * Quasar loading with datatable loading props.
+     */
+    useQuasarLoading?: boolean;
+    /**
+     * MModalMenu props.
+     * Inside table top slot.
+     * defaults: no-close-btn & persistent & position="top"
+     */
+    filterDialogProps?: Partial<QDialogProps> & Partial<QMenuProps> & Partial<QPopupProxyProps>;
+    showDialogProps?: Partial<QDialogProps>;
+    formDialogProps?: Partial<QDialogProps>;
+    fabBtn?: {
+      pageStickyProps?: Partial<QPageStickyProps>;
+      offset?: QPageStickyProps['offset'];
+      position?: QPageStickyProps['position'];
+      buttonProps?: Partial<QBtnProps>;
+    },
+    contextmenu?: {
+      menu?: Partial<MModalMenuProps>;
+      list?: Partial<QListProps>;
+      btnStyle?: {
+        showLabel?: boolean;
+        updateColor?: string;
+        showColor?: string;
+        destroyColor?: string;
+      }
+    },
+    buttons?: {
+      filter?: Partial<MDtBtnProps>;
+      refresh?: Partial<MDtBtnProps>;
+      more?: Partial<MDtBtnProps>;
+      fullscreen?: Partial<MDtBtnProps>;
+      moreMenu?: Partial<QMenuProps>;
+      moreList?: Partial<QListProps>;
+      moreItem?: Partial<QItemProps>;
+    },
+    topSelection?: {
+      btn?: Partial<MDtBtnProps>;
+    },
+    searchInput?: {
+      props?: Partial<MInputProps>;
+      optionsIcon?: string;
+      menuProps?: Partial<QMenuProps>;
+      menuBtn?: Partial<QBtnProps>;
+    };
+    dialogButtonsProps?: Partial<MBtnProps>;
+    listItem?: {
+      item?: Partial<QItemProps>;
+      avatarSection?: Partial<QItemSectionProps>;
+      icon?: Partial<QIconProps>;
+      labelSection?: Partial<QItemSectionProps>;
+      labelItem?: Partial<QItemLabelProps>;
+    };
+    btn?: Partial<MDtBtnProps>;
+    /**
+     * Dropdown of control column in table.
+     * q-btn-dropdown
+     */
+    controlDropdown?: Partial<QBtnDropdownProps>;
+    MDtBtn?: {
+      /**
+       * List mode Props.
+       */
+      item?: {
+        /**
+         * Item Props.
+         */
+        props?: Partial<QItemProps>;
+        /**
+         * q-item-section.
+         * Props of avatar section.
+         */
+        avatarProps?: Partial<QItemSectionProps>;
+        /**
+         * q-icon.
+         * Props of icon inside avatar section.
+         */
+        iconProps?: Partial<QIconProps>;
+        /**
+         * q-item-section.
+         * Props of label section.
+         */
+        labelSectionProps?: Partial<QItemSectionProps>;
+        /**
+         * q-item-label.
+         * Props of label inside label section.
+         */
+        itemLabelProps?: Partial<QItemLabelProps>;
+      };
+      /**
+       * MDtBtn btn mode Props.
+       */
+      btn?: {
+        props?: Partial<QBtnProps>;
+      };
+    }
+  };
+}
+
+/**
+ * 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;
+}

package/src/utils/myth.ts

@@ -9,6 +9,7 @@
 import { ref } from 'vue'
 import { extend } from 'quasar'
 import type { BtnLoading, HelpersStubSchema, PropsContext, ThemeBtn, ThemeInput, ThemeRounded, ThemeShadow, ThemeSize } from '../types'
+import type { AxiosInstance } from 'axios'
 
 const props = ref<PropsContext>({})
 const size = ref<ThemeSize>('md')
@@ -21,7 +22,9 @@ const btnLoading = ref<BtnLoading>({
 })
 const themeBtn = ref<ThemeBtn>({})
 const themeInput = ref<ThemeInput>({})
+const baseUrl = ref<string>('')
 const api = ref<HelpersStubSchema>({} as HelpersStubSchema)
+const mAxios = ref<AxiosInstance>({} as AxiosInstance)
 export const myth = {
   /**
    * Apply Padding on all sides of components.
@@ -88,8 +91,19 @@ export const myth = {
    * Theme Shadow.
    */
   shadow,
+  /**
+   * Axios instance.
+   */
+  mAxios,
+  /**
+   * Api stubs.
+   */
   api,
   setApi (v: HelpersStubSchema) {
     api.value = v
-  }
+  },
+  /**
+   * Base API Url.
+   */
+  baseUrl
 }

package/src/utils/vue-plugin.ts

@@ -34,17 +34,28 @@ import {
   MInputFieldControl,
   MInputLabel,
   MMobile,
+  MOptions,
+  MOtp,
   MPassword,
   MPicker,
   MRadio,
   MRow,
   MSelect,
   MTime,
+  MToggle,
   MTransition,
-  MTypingString
+  MTypingString,
+  MUploader,
+  MDialog,
+  MModalMenu,
+  MTooltip,
+  MDatatable,
+  MDtAvatar,
+  MDtBtn,
+  MDtContextmenuItems
 } from '../components'
 
-import type { InstallOptions } from '../types'
+import { InstallOptions } from '../types/install-options'
 
 function install (app: App, options: InstallOptions = {}) {
   if (options.rounded !== undefined) {
@@ -71,9 +82,15 @@ function install (app: App, options: InstallOptions = {}) {
   if (options.themeInput !== undefined) {
     myth.themeInput.value = options.themeInput
   }
+  if (options.baseUrl !== undefined) {
+    myth.baseUrl.value = options.baseUrl
+  }
   if (options.api !== undefined) {
     myth.setApi(options.api)
   }
+  if (options.mAxios !== undefined) {
+    myth.mAxios.value = options.mAxios
+  }
 
   // Form.
   app.component('MAvatarViewer', MAvatarViewer)
@@ -93,11 +110,15 @@ function install (app: App, options: InstallOptions = {}) {
   app.component('MInputFieldControl', MInputFieldControl)
   app.component('MInputLabel', MInputLabel)
   app.component('MMobile', MMobile)
+  app.component('MOptions', MOptions)
+  app.component('MOtp', MOtp)
   app.component('MPassword', MPassword)
   app.component('MPicker', MPicker)
   app.component('MRadio', MRadio)
   app.component('MSelect', MSelect)
   app.component('MTime', MTime)
+  app.component('MToggle', MToggle)
+  app.component('MUploader', MUploader)
 
   // Grid.
   app.component('MBlock', MBlock)
@@ -114,6 +135,17 @@ function install (app: App, options: InstallOptions = {}) {
   app.component('MTransition', MTransition)
   app.component('MFadeTransition', MFadeTransition)
   app.component('MFadeXTransition', MFadeXTransition)
+
+  // Modals.
+  app.component('MDialog', MDialog)
+  app.component('MModalMenu', MModalMenu)
+  app.component('MTooltip', MTooltip)
+
+  // Datatable
+  app.component('MDatatable', MDatatable)
+  app.component('MDtAvatar', MDtAvatar)
+  app.component('MDtBtn', MDtBtn)
+  app.component('MDtContextmenuItems', MDtContextmenuItems)
 }
 
 export {

package/src/types/dt.d.ts

@@ -1,144 +0,0 @@
-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'])[]