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

package/src/types/components.d.ts

@@ -23,11 +23,16 @@ import type {
   QInputProps,
   QInputSlots,
   QItemProps,
+  QOptionGroupProps,
+  QOptionGroupSlots,
   QRadioProps,
   QSelectProps,
-  QTableProps,
-  QTimeProps
+  QTimeProps,
+  QToggleProps,
+  QUploaderProps,
+  QUploaderSlots
 } from 'quasar'
+import { QDialogProps, QMenuProps, QPopupProxyProps, QTooltipProps } from 'quasar'
 import type {
   ComputedRef,
   MaybeRefOrGetter,
@@ -42,17 +47,18 @@ import type {
 import type { TypedOptions } from 'typed.js'
 import type { FieldContext, FieldOptions, FormContext, FormOptions, FormState } from 'vee-validate'
 import type { ThemeShadow, ThemeSize } from './theme'
-import type {
-  GenericMDtBtn,
-  MDtExportOptions,
-  MDtItem,
-  MDtRequestParamsCallbackProp,
-  MDtRequestParamsObjectProp,
-  MDtServiceNameCallbackProp,
-  MDtServiceNameStringProp
-} from './dt'
-import type { RouteLocationRaw } from 'vue-router'
 import type { AxiosRequestConfig } from 'axios'
+import { ApiInterface, HelpersStubSchema } from './api-helpers'
+import {
+  MDatatableProps,
+  MDatatableSlots,
+  MDtAvatarProps,
+  MDtAvatarSlots,
+  MDtBtnProps,
+  MDtBtnSlots,
+  MDtContextmenuItemsProps,
+  MDtContextmenuItemsSlots
+} from './m-datatable'
 
 export interface MTransitionProps extends TransitionGroupProps {
   enterIn?: string;
@@ -715,150 +721,437 @@ export interface MFormSlots {
 
 export declare type GenericFormValues = Record<any, any>;
 
-export interface MDtBtnProps extends MBtnProps {
-  show?: boolean;
-  update?: boolean;
-  destroy?: boolean;
-  tooltip?: string | undefined;
-  color?: string;
-  icon?: string;
-  listItem?: boolean;
-  fabMini?: boolean;
-  flat?: boolean;
-  round?: boolean;
-  dense?: boolean;
-  label?: string | undefined;
+type ParamsReq = Record<string, any>;
+
+export interface MAxiosProps extends Omit<MSelectProps, 'options' | 'axiosMode'> {
+  /**
+   * Request method. Default is GET.
+   */
+  service: ((config?: AxiosRequestConfig) => Promise<any>) | string;
+  /**
+   * Send request as guest request. If false, send request as authenticated user. Default is true.
+   */
+  guest?: boolean | MaybeRefOrGetter<boolean>;
+  /**
+   * Request params.
+   */
+  params?: Ref<ParamsReq> | ShallowRef<ParamsReq> | WritableComputedRef<ParamsReq> | ComputedRef<ParamsReq> | (() => ParamsReq);
+  /**
+   * Request relations.
+   */
+  requestWith?: MaybeRefOrGetter<string> | undefined;
+  /**
+   * Component items.
+   */
+  items?: any[];
+  /**
+   *  The name of the attribute to be used as a label
+   */
+  attributeName?: string;
+  /**
+   * Do fetch asynchronous
+   */
+  lazy?: boolean;
 }
 
-export interface MDtBtnSlots extends MBtnSlots {
+export interface MAxiosSlots extends MSelectSlots {
+  //
+}
+
+export interface MOptionsOptionContext extends Omit<QToggleProps, 'modelValue'>, Omit<QRadioProps, 'modelValue'>, Omit<QCheckboxProps, 'modelValue'> {
   /**
-   * Use for custom content, instead of relying on 'icon' and 'label' props
+   * Label to display along the component
    */
+  label: string;
+  /**
+   * Value of the option that will be used by the component model
+   */
+  value: any;
+  /**
+   * If true, the option will be disabled
+   */
+  disable?: boolean;
+  /**
+   * Any other props from QToggle, QCheckbox, or QRadio
+   */
+}
+
+export interface MOptionsProps extends Omit<QOptionGroupProps, 'name' | 'modelValue' | 'options'>,
+  Omit<BaseInputsProps, 'autocomplete' | 'modelValue'> {
+  modelValue?: any;
+  /**
+   * Array of objects with value, label, and disable (optional) props. The binary components will be created according to this array; Props from QToggle, QCheckbox or QRadio can also be added as key/value pairs to control the components singularly
+   */
+  options?: MOptionsOptionContext[];
+  /**
+   * Get options by function. any send the current value to this function to get options.
+   */
+  service?: ((value?: any) => Promise<ApiInterface>) | undefined;
+  /**
+   * Service loading.
+   */
+  loading?: boolean | undefined;
+  /**
+   * Set content to be full width.
+   */
+  fullWidth?: boolean;
+  /**
+   * Set width of content to be equals.
+   * Default is: 33.33333333%
+   */
+  fitWidth?: boolean;
+}
+
+export interface MOtpProps extends Omit<QInputProps, 'modelValue'> {
+  modelValue?: string | number;
+  inputLength?: string | number;
+  numeric?: boolean;
+  time?: string | number;
+  hideTime?: boolean;
+  hideSendAgain?: boolean;
+  topLabel?: string | undefined;
+  topLabelProps?: any | undefined;
+  errors?: string[];
+}
+
+export interface MOtpSlots extends QInputSlots {
   default: () => VNode[];
+  'before-all': () => VNode[];
+  'after-all': () => VNode[];
+  'after-input': () => VNode[];
+}
+
+export interface MOptionsSlots extends QOptionGroupSlots, QFieldSlots, BaseInputsSlots {
+  //
+}
+
+export interface MToggleProps extends Omit<BaseInputsProps, 'placeholder' | 'topLabel' | 'autocomplete' | 'modelValue'>,
+  Omit<QToggleProps, 'modelValue' | 'label' | 'name'> {
+  modelValue?: number;
   /**
-   * Override the default QSpinner when in 'loading' state
+   * Customize the label when the toggle is true.
+   * Default is: Yes.
    */
-  loading: () => VNode[];
+  activeLabel?: string;
+  /**
+   * Customize the label when the toggle is false.
+   * Default is: No.
+   */
+  inactiveLabel?: string;
+  /**
+   * Set labels of toggle to status, Active & Inactive.
+   */
+  status?: boolean;
+  /**
+   * Input row props.
+   */
+  rowProps?: Record<string, any>;
+  /**
+   * Input column props.
+   */
+  colProps?: Record<string, any>;
 }
 
-export interface MDatatableProps<I extends GenericFormValues = GenericFormValues> extends Omit<QTableProps, 'rows' | 'rowsPerPageOptions' | 'visibleColumns'> {
-  rows?: any[];
-  controlKey?: string;
-  defaultItem?: Partial<MDtItem<I>>
-  contextItems?: GenericMDtBtn[];
-  hideAutoMessage?: boolean;
-  headers: string[] | Partial<QTableProps['columns']> | any[];
-  serviceName?: MDtServiceNameStringProp | MDtServiceNameCallbackProp;
-  requestParams?: MDtRequestParamsObjectProp | MDtRequestParamsCallbackProp;
+export interface MToggleSlots extends MCheckboxSlots, Pick<BaseInputsProps, 'topLabel'> {
+  //
+}
+
+export type MUploaderMediaItem = {
+  id: number;
+  value: number;
+  name: string;
+  file_name: string;
+  type: string;
+  size: number;
+  size_to_string: string;
+  url: string;
+  download_url: string;
+  icon: string;
+  description: string;
+  attachment_type: string;
+  attachment_type_id: number;
+  attachment_type_id_to_string: string;
+  user_id: number | null;
+  user_id_to_string: string;
+  order_column: number;
+  [k: string]: any;
+};
+
+export type MUploaderServiceType = Pick<HelpersStubSchema, 'getUploadAttachmentsUrl' | 'updateAttachment' | 'uploadAttachments' | 'deleteAttachment'>
+
+export interface MUploaderProps extends Omit<QUploaderProps, 'formFields' | 'headers' | 'url'>, MColProps, Pick<BaseInputsProps, 'fieldOptions'> {
+  /**
+   * Name fo field input, Attachments key name.
+   * Default is: 'attachments'
+   */
+  name?: string;
+  /**
+   * Put component in disabled mode
+   */
+  disable?: boolean;
+  /**
+   * Put component in readonly mode
+   */
+  readonly?: boolean;
+  /**
+   * Comma separated list of unique file type specifiers. Maps to 'accept' attribute of native input type=file element
+   */
+  accept?: string;
+  /**
+   *  Support for uploading images
+   */
+  images?: boolean;
+  /**
+   * Support for uploading svg
+   */
+  svg?: boolean;
+  /**
+   * Support for uploading videos
+   */
+  video?: boolean;
+  /**
+   * Support for uploading pdf
+   */
   pdf?: boolean;
+  /**
+   * Support for uploading excel
+   */
   excel?: boolean;
-  exportUrl?: MDtExportOptions | boolean;
-  hideSearch?: boolean;
-  searchDebounce?: string | number;
-  withIndex?: string | string[];
-  withStore?: string | string[];
-  withShow?: string | string[];
-  withUpdate?: string | string[];
-  hideAddBtn?: boolean;
-  hideUpdateBtn?: boolean;
-  hideShowBtn?: boolean;
-  hideDestroyBtn?: boolean;
-  storeRoute?: string | RouteLocationRaw;
-  storeQueryParams?: boolean;
-  updateRoute?: string | RouteLocationRaw;
-  updateQueryParams?: boolean;
-  showRoute?: string | RouteLocationRaw;
-  showQueryParams?: boolean;
-  mouse?: boolean;
-  noRefreshBtn?: boolean;
-  endReach?: boolean;
-  showSelection?: boolean;
-  hideSelection?: boolean;
-  multiSelection?: boolean;
-  multiDestroy?: boolean;
-  rowsPerPageOptions?: (string | number)[];
-  ignoreKeys?: string[] | ((form: Record<string, any>) => string[]) | any[];
-  manageColumns?: boolean;
-  visibleColumns?: (string | null | undefined)[] | any[];
-  searchColumns?: string[];
   /**
-   * Show Add btn top of table,
+   * Upload files immediately when added
    */
-  addTopBtn?: boolean;
+  autoUpload?: boolean;
   /**
-   * Show Add btn inside more list
+   * Field name for each file upload; This goes into the following header: 'Content-Disposition: form-data; name="__HERE__"; filename="somefile.png"; If using a function then for best performance, reference it from your scope and do not define it inline
+   * Default value: (file) => file.name
+   * @param files The current file being processed
+   * @returns Field name for the current file upload
    */
-  addListBtn?: boolean;
+  fieldName?: string | ((files: File) => string);
   /**
-   * Show Fab Add btn
+   * Collection send to API
    */
-  addFabBtn?: boolean;
+  collection?: string | number | symbol;
   /**
-   * make datatable fullscreen mode
+   * Field Attachment Type
    */
-  fullscreenBtn?: boolean;
+  attachmentType?: any;
   /**
-   * Auto actions body headers 'control'
+   * return attachments after upload;
+   * Default current collection name;
    */
-  noBodyControl?: boolean;
+  returnType?: 'all' | 'current' | undefined;
   /**
-   * Auto actions card 'control'
+   * Object with additional fields definitions (used by Form to be uploaded);
    */
-  showCardControlHeader?: boolean;
+  formFields?: Record<string, any>;
   /**
-   * Set datatable to fixed view
+   * Extra headers
    */
-  fixed?: boolean;
+  headers?: Record<string, any>;
   /**
-   * Names of image columns in the table.
+   * Label for the uploader
    */
-  imageColumns?: string[] | any[];
+  label?: string | null | undefined;
   /**
-   * How to display image button in table.
+   * The Attachments list.
    */
-  imageMode?: 'icon' | 'image';
+  modelValue?: MUploaderMediaItem[];
   /**
-   * Image size in display
+   *  Hide delete media items from uploader, no delete media For API
    */
-  imageSize?: string;
+  hideDeleteMedia?: boolean;
+  /**
+   *  Show update button of media.
+   */
+  updateBtn?: boolean;
+  /**
+   * User APi service for upload & delete
+   */
+  service: string | MUploaderServiceType;
+  /**
+   * The ID of model will use in attachments
+   */
+  modelId?: string | number | undefined;
+  uploading?: boolean | undefined;
+  defaultFileIcon?: string | undefined;
+  deleteMediaIcon?: string | undefined;
+  uploadFilesIcon?: string | undefined;
+  pickFilesIcon?: string | undefined;
+  removeUploadedIcon?: string | undefined;
+  removeQueuedIcon?: string | undefined;
+  abortUploadIcon?: string | undefined;
+  downloadFileIcon?: string | undefined;
+  errorsIcon?: string | undefined;
+  iconsSize?: string | undefined;
+  displayMode?: 'list' | 'card' | undefined;
+  shadow?: string | undefined;
+  /**
+   * Media Item Label Field.
+   * Default is: name.
+   */
+  mediaLabel?: string | undefined;
+}
+
+export interface MUploaderSlots extends QUploaderSlots {
+  /**
+   * Field main content
+   */
+  default: () => VNode[];
+  /**
+   * list of item will be display
+   */
+  // list: (scope: { item: MUploaderMediaItem, index: number }) => VNode[];
+  /**
+   * list of item will be display
+   */
+  'item-list': (scope: { item: MUploaderMediaItem, index: number }) => VNode[];
+}
+
+export type MUploaderXhrInfo = { files: readonly any[]; xhr: any; }
 
+export type MModalMenuProps = Partial<QDialogProps> & Partial<QMenuProps> & Partial<QPopupProxyProps> & {
+  noCloseBtn?: boolean;
 }
 
-type ParamsReq = Record<string, any>;
+export type MModalMenuSlots = {
+  default: () => VNode[];
+}
 
-export interface MAxiosProps extends Omit<MSelectProps, 'options' | 'axiosMode'> {
+export type MTooltipProps = Partial<QTooltipProps> & {
   /**
-   * Request method. Default is GET.
+   * One of Quasar's embedded transitions
+   * Default value: jump-down
    */
-  service: ((config?: AxiosRequestConfig) => Promise<any>) | string;
+  transitionShow?: string | undefined;
   /**
-   * Send request as guest request. If false, send request as authenticated user. Default is true.
+   * One of Quasar's embedded transitions
+   * Default value: jump-up
    */
-  guest?: boolean | MaybeRefOrGetter<boolean>;
+  transitionHide?: string | undefined;
   /**
-   * Request params.
+   * Transition duration (in milliseconds, without unit)
+   * Default value: 300
    */
-  params?: Ref<ParamsReq> | ShallowRef<ParamsReq> | WritableComputedRef<ParamsReq> | ComputedRef<ParamsReq> | (() => ParamsReq);
+  transitionDuration?: string | number | undefined;
   /**
-   * Request relations.
+   * Model of the component defining shown/hidden state; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive
    */
-  requestWith?: MaybeRefOrGetter<string> | undefined;
+  modelValue?: boolean;
   /**
-   * Component items.
+   * The maximum height of the Tooltip; Size in CSS units, including unit name
    */
-  items?: any[];
+  maxHeight?: string | undefined;
   /**
-   *  The name of the attribute to be used as a label
+   * The maximum width of the Tooltip; Size in CSS units, including unit name
    */
-  attributeName?: string;
+  maxWidth?: string | undefined;
   /**
-   * Do fetch asynchronous
+   * Two values setting the starting position or anchor point of the Tooltip relative to its target
+   * Default value: bottom middle
    */
-  lazy?: boolean;
+  anchor?:
+    | 'top left'
+    | 'top middle'
+    | 'top right'
+    | 'top start'
+    | 'top end'
+    | 'center left'
+    | 'center middle'
+    | 'center right'
+    | 'center start'
+    | 'center end'
+    | 'bottom left'
+    | 'bottom middle'
+    | 'bottom right'
+    | 'bottom start'
+    | 'bottom end'
+    | undefined;
+  /**
+   * Two values setting the Tooltip's own position relative to its target
+   * Default value: top middle
+   */
+  self?:
+    | 'top left'
+    | 'top middle'
+    | 'top right'
+    | 'top start'
+    | 'top end'
+    | 'center left'
+    | 'center middle'
+    | 'center right'
+    | 'center start'
+    | 'center end'
+    | 'bottom left'
+    | 'bottom middle'
+    | 'bottom right'
+    | 'bottom start'
+    | 'bottom end'
+    | undefined;
+  /**
+   * An array of two numbers to offset the Tooltip horizontally and vertically in pixels
+   * Default value: [14, 14]
+   */
+  offset?: readonly any[] | undefined;
+  /**
+   * CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one
+   */
+  scrollTarget?: Element | string | undefined;
+  /**
+   * Configure a target element to trigger Tooltip toggle; 'true' means it enables the parent DOM element, 'false' means it disables attaching events to any DOM elements; By using a String (CSS selector) it attaches the events to the specified DOM element (if it exists)
+   * Default value: true
+   */
+  target?: boolean | string | undefined;
+  /**
+   * Skips attaching events to the target DOM element (that trigger the element to get shown)
+   */
+  noParentEvent?: boolean | undefined;
+  /**
+   * Configure Tooltip to appear with delay
+   */
+  delay?: number | undefined;
+  /**
+   * Configure Tooltip to disappear with delay
+   */
+  hideDelay?: number | undefined;
+  /**
+   * Emitted when showing/hidden state changes; Is also used by v-model
+   * @param value New state (showing/hidden)
+   */
+  'onUpdate:modelValue'?: (value: boolean) => void;
+  /**
+   * Emitted after component has triggered show()
+   * @param evt JS event object
+   */
+  onShow?: (evt: Event) => void;
+  /**
+   * Emitted when component triggers show() but before it finishes doing it
+   * @param evt JS event object
+   */
+  onBeforeShow?: (evt: Event) => void;
+  /**
+   * Emitted after component has triggered hide()
+   * @param evt JS event object
+   */
+  onHide?: (evt: Event) => void;
+  /**
+   * Emitted when component triggers hide() but before it finishes doing it
+   * @param evt JS event object
+   */
+  onBeforeHide?: (evt: Event) => void;
 }
 
-export interface MAxiosSlots extends MSelectSlots {
-  //
+export type MTooltipSlots = {
+  default: () => VNode[];
+}
+
+export type MDialogProps = Partial<QDialogProps> & {
+  slide?: boolean | undefined;
+  from?: 'up' | 'down' | 'left' | 'right';
+}
+
+export type MDialogSlots = {
+  default: () => VNode[];
 }
 
 declare module '@vue/runtime-core' {
@@ -880,11 +1173,15 @@ declare module '@vue/runtime-core' {
     MInputFieldControl: GlobalComponentConstructor<MInputFieldControlProps, MInputFieldControlSlots>;
     MInputLabel: GlobalComponentConstructor<MInputLabelProps, MInputLabelSlots>;
     MMobile: GlobalComponentConstructor<MInputProps, MInputSlots>;
+    MOptions: GlobalComponentConstructor<MOptionsProps, MOptionsSlots>;
+    MOtp: GlobalComponentConstructor<MOtpProps, MOtpSlots>;
     MPassword: GlobalComponentConstructor<MPasswordProps, MInputSlots>;
     MPicker: GlobalComponentConstructor<MPickerProps, MPickerSlots>;
     MRadio: GlobalComponentConstructor<MRadioProps, MRadioSlots>;
     MSelect: GlobalComponentConstructor<MSelectProps, MSelectSlots>;
     MTime: GlobalComponentConstructor<MTimeProps, MTimeSlots>;
+    MToggle: GlobalComponentConstructor<MToggleProps, MToggleSlots>;
+    MUploader: GlobalComponentConstructor<MUploaderProps, MUploaderSlots>;
 
     // Grid.
     MBlock: GlobalComponentConstructor<MBlockProps, MBlockSlots>;
@@ -901,5 +1198,14 @@ declare module '@vue/runtime-core' {
     MTransition: GlobalComponentConstructor<MTransitionProps, MTransitionsSlots>;
     MFadeTransition: GlobalComponentConstructor<TransitionProps, MTransitionsSlots>;
     MFadeXTransition: GlobalComponentConstructor<TransitionProps, MTransitionsSlots>;
+    // Modals.
+    MDialog: GlobalComponentConstructor<MDialogProps, MDialogSlots>;
+    MModalMenu: GlobalComponentConstructor<MModalMenuProps, MModalMenuSlots>;
+    MTooltip: GlobalComponentConstructor<MTooltipProps, MTooltipSlots>;
+    // Datatable
+    MDatatable: GlobalComponentConstructor<MDatatableProps, MDatatableSlots>;
+    MDtAvatar: GlobalComponentConstructor<MDtAvatarProps, MDtAvatarSlots>;
+    MDtBtn: GlobalComponentConstructor<MDtBtnProps, MDtBtnSlots>;
+    MDtContextmenuItems: GlobalComponentConstructor<MDtContextmenuItemsProps, MDtContextmenuItemsSlots>;
   }
 }