@mythpe/quasar-ui-qui 0.0.19-dev → 0.0.19

package/src/types/components.d.ts

@@ -6,12 +6,71 @@
  * Github: https://github.com/mythpe
  */
 
-import type { GlobalComponentConstructor, QBtnProps, QBtnSlots, QFieldSlots, QInputProps, QInputSlots, QItemProps } from 'quasar'
-import type { MaybeRefOrGetter, UnwrapNestedRefs, VNode } from 'vue'
+import type {
+  GlobalComponentConstructor,
+  QAvatarProps,
+  QAvatarSlots,
+  QBtnProps,
+  QBtnSlots,
+  QCheckboxProps,
+  QDateProps,
+  QEditorProps,
+  QEditorSlots,
+  QFieldSlots,
+  QFileProps,
+  QFileSlots,
+  QImgProps,
+  QInputProps,
+  QInputSlots,
+  QItemProps,
+  QOptionGroupProps,
+  QOptionGroupSlots,
+  QRadioProps,
+  QSelectProps,
+  QTimeProps,
+  QToggleProps,
+  QUploaderProps,
+  QUploaderSlots
+  , QDialogProps, QMenuProps, QPopupProxyProps, QTooltipProps
+} from 'quasar'
+import type {
+  ComputedRef,
+  MaybeRefOrGetter,
+  Ref,
+  ShallowRef,
+  TransitionGroupProps,
+  TransitionProps,
+  UnwrapNestedRefs,
+  VNode,
+  WritableComputedRef
+} from 'vue'
 import type { TypedOptions } from 'typed.js'
-import type { FieldContext, FieldOptions } from 'vee-validate'
+import type { FieldContext, FieldOptions, FormContext, FormOptions, FormState } from 'vee-validate'
+import type { ThemeShadow, ThemeSize } from './theme'
+import type { AxiosRequestConfig } from 'axios'
+import type { ApiInterface, HelpersStubSchema } from './api-helpers'
+import type {
+  MDatatableProps,
+  MDatatableSlots,
+  MDtAvatarProps,
+  MDtAvatarSlots,
+  MDtBtnProps,
+  MDtBtnSlots,
+  MDtContextmenuItemsProps,
+  MDtContextmenuItemsSlots
+} from './m-datatable'
+import type { EditorConfig } from 'ckeditor5'
 
-export type StyleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
+export interface MTransitionProps extends TransitionGroupProps {
+  enterIn?: string;
+  enterOut?: string;
+  slowIn?: boolean;
+  slowOut?: boolean;
+}
+
+export interface MTransitionsSlots {
+  default: () => VNode[];
+}
 
 export interface MBtnProps extends QBtnProps {
   //
@@ -33,15 +92,15 @@ export interface MBlockProps {
    * Size of the padding block.
    * Default: 'md'
    */
-  readonly size?: StyleSize | undefined;
+  size?: ThemeSize | undefined;
   /**
    * Rounded block
    */
-  readonly rounded?: boolean | undefined;
+  rounded?: boolean | undefined;
   /**
    * Shadow level
    */
-  readonly shadow?: string | number | 'transition' | 'none' | undefined;
+  shadow?: ThemeShadow | undefined;
 }
 
 export interface MBlockSlots {
@@ -82,14 +141,14 @@ export type ColStyleType =
   | 12
 
 export interface MColProps {
-  readonly auto?: boolean | undefined;
-  readonly col?: ColStyleType;
-  readonly xs?: ColStyleType;
-  readonly sm?: ColStyleType;
-  readonly md?: ColStyleType;
-  readonly lg?: ColStyleType;
-  readonly xl?: ColStyleType;
-  readonly name?: string;
+  auto?: boolean | undefined;
+  col?: ColStyleType;
+  xs?: ColStyleType;
+  sm?: ColStyleType;
+  md?: ColStyleType;
+  lg?: ColStyleType;
+  xl?: ColStyleType;
+  name?: string;
 }
 
 export interface MColSlots {
@@ -105,9 +164,9 @@ export interface MColumnSlots {
 }
 
 export interface MContainerProps {
-  readonly size?: StyleSize | string | undefined;
-  readonly dense?: boolean | undefined;
-  readonly fluid?: boolean | undefined;
+  size?: ThemeSize | string | undefined;
+  dense?: boolean | undefined;
+  fluid?: boolean | undefined;
 }
 
 export interface MContainerSlots {
@@ -118,11 +177,11 @@ export interface MRowProps {
   /**
    * Default: false.
    */
-  gutter?: boolean | StyleSize | undefined;
+  gutter?: boolean | ThemeSize | undefined;
   /**
    * Default: false.
    */
-  col?: boolean | StyleSize | undefined;
+  col?: boolean | ThemeSize | undefined;
 }
 
 export interface MRowSlots {
@@ -154,55 +213,179 @@ export interface MTypingStringSlots {
   default?: () => VNode[];
 }
 
-export type BaseInputFieldPropContext = FieldContext<any>;
-export type BaseInputFieldProps = {
+export interface BaseInputFieldPropContext extends FieldContext<any> {
+  //
+}
+
+export interface BaseInputFieldProps {
   /**
    * Context of field input.
    */
   field: UnwrapNestedRefs<BaseInputFieldPropContext>;
-  readonly label?: string | undefined;
+  label?: string | undefined;
 }
 
-export type MInputFieldControlProps = Record<string, unknown>;
-export type MInputFieldControlSlots = {
+export interface MInputFieldControlProps {
+  [k: string]: any;
+}
+
+export interface MInputFieldControlSlots {
   default: () => VNode[];
 }
 
-export type MInputLabelProps = BaseInputFieldProps;
-export type MInputLabelSlots = {
+export interface MInputLabelProps extends BaseInputFieldProps {
+  //
+}
+
+export interface MInputLabelSlots {
   default?: () => VNode[];
 }
 
-export type ViewModeProps = {
+export interface ViewModeProps {
   /**
    * Set input to vie mode use q-field
    */
-  readonly viewMode?: boolean;
+  viewMode?: boolean;
   /**
    * View Mode value for input or modelValue.
    */
-  readonly viewModeValue?: any;
+  viewModeValue?: any | undefined;
 }
-export type InputHelpProps = {
+
+export interface InputHelpProps {
   /**
    * Information text with Icon.
    */
-  readonly help?: string;
+  help?: string;
 }
-export type InputHelpSlots = {
+
+export interface InputHelpSlots {
   /**
    * VNode bottom of input & before 'bottom-input slot'.
    */
   help: () => VNode[];
 }
+
 export type InputRulesContext = string | string[] | Record<string, any> | undefined;
 export type InputErrorsContext = string[];
 export type InputFormErrorsContext = Record<string, InputErrorsContext> | undefined;
-export type BaseInputFormProps = {
+
+export type MAvatarViewerModelValue = File | null | undefined;
+
+export interface MAvatarViewerProps extends QAvatarProps, MColProps {
+  /**
+   * Comma separated list of unique file type specifiers. Maps to 'accept' attribute of native input type=file element
+   */
+  accept?: string | string [] | null | Record<string, string>;
+  /**
+   * Add accept file type.
+   */
+  images?: boolean | string;
+  /**
+   * Add accept svg type.
+   */
+  svg?: boolean | string;
+  /**
+   * Add accept video type.
+   */
+  video?: boolean | string;
+  /**
+   * Add accept pdf type.
+   */
+  pdf?: boolean;
+  /**
+   * Add accept excel type.
+   */
+  excel?: boolean | string;
+  /**
+   * Show text if no image
+   */
+  avatarText?: string;
+  /**
+   * How the image will fit into the container; Equivalent of the object-fit prop; Can be coordinated with 'position' prop
+   * Default value: cover
+   */
+  fit?: QImgProps['fit'];
+  /**
+   * Can clear the input & not required
+   */
+  clearable?: boolean;
+  /**
+   * The label that will appear above the image
+   */
+  label?: string;
+  /**
+   * List of error messages.
+   */
+  errors?: InputErrorsContext;
+  /**
+   * List of form errors.
+   */
+  formErrors?: InputFormErrorsContext;
+  /**
+   * Model of the component;
+   * Must be FileList or Array if using 'multiple' prop;
+   * Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive
+   */
+  modelValue?: MAvatarViewerModelValue;
+  /**
+   * The name of the file for the image used and the field.
+   * Example: name='avatar' { avatar: https://4myth.com, avatarBlob: Blob, avatarRemoved: !0 | !1 }
+   */
+  name?: string;
+  /**
+   * Avatar url.
+   * (along with a listener for 'update:url' event) OR use v-model directive
+   */
+  url?: string;
+  /**
+   * value if user remove the image
+   * (along with a listener for 'update:removed' event) OR use v-model directive
+   */
+  removed?: boolean;
+  /**
+   * Input hint.
+   */
+  hint?: string;
+  hintProps?: Record<string, any>;
+
+  caption?: string;
+  captionProps?: Record<string, any>;
+  /**
+   * Help text after label.
+   */
+  help?: string;
+  /**
+   * Set input to readonly.
+   */
+  readonly?: boolean;
+  /**
+   * Loading for skeleton.
+   */
+  loading?: boolean;
+  /**
+   * Input Required validation.
+   */
+  required?: boolean;
+  /**
+   * Input Validation Rules.
+   */
+  rules?: InputRulesContext;
+}
+
+export interface MAvatarViewerSlots extends QAvatarSlots {
+  /**
+   * Field main content
+   */
+  default: () => VNode[];
+  hint: () => VNode[];
+}
+
+export interface BaseInputFormProps {
   /**
    * Input name.
    */
-  readonly name: string;
+  name: string;
   /**
    * Input model value.
    * can be used instead of initialValue.
@@ -211,27 +394,27 @@ export type BaseInputFormProps = {
   /**
    * Input Label.
    */
-  readonly label?: string | undefined;
+  label?: string | undefined;
   /**
    * Caption under label.
    */
-  readonly caption?: string | undefined;
+  caption?: string | undefined;
   /**
    * Input Hint.
    */
-  readonly hint?: string | undefined;
+  hint?: string | undefined;
   /**
    * Input Placeholder.
    */
-  readonly placeholder?: string | undefined;
+  placeholder?: string | undefined;
   /**
    * Input Required validation.
    */
-  readonly required?: boolean;
+  required?: boolean;
   /**
    * Input Validation Rules.
    */
-  readonly rules?: InputRulesContext;
+  rules?: InputRulesContext;
   /**
    * Input Error Messages.
    */
@@ -247,30 +430,38 @@ export type BaseInputFormProps = {
    * else, will set the attribute value.
    * Default: undefined.
    */
-  readonly autocomplete?: boolean | string | undefined;
+  autocomplete?: boolean | string | undefined;
   /**
    * Inputs Top Label.
    */
-  readonly topLabel?: boolean;
+  topLabel?: boolean;
   /**
    * Mobile Rule.
    */
-  readonly mobile?: boolean | string | number | undefined;
+  mobile?: boolean | string | number | undefined;
   /**
    * Email Rule.
    */
-  readonly email?: boolean;
+  email?: boolean;
   /**
    * Number Rule.
    */
-  readonly float?: boolean;
+  float?: boolean;
   /**
    * vee-validate Field Options.
    */
-  readonly fieldOptions?: Partial<FieldOptions> | MaybeRefOrGetter<Partial<FieldOptions>>;
+  fieldOptions?: Partial<FieldOptions> | MaybeRefOrGetter<Partial<FieldOptions>>;
+  /**
+   * choice key of auto placeholder.
+   */
+  useChoice?: boolean | string;
+}
+
+export interface BaseInputsProps extends ViewModeProps, InputHelpProps, Omit<MColProps, 'name'>, BaseInputFormProps {
+  //
 }
-export type BaseInputsProps = ViewModeProps & InputHelpProps & Omit<MColProps, 'name'> & BaseInputFormProps;
-export type BaseInputsSlots = InputHelpSlots & {
+
+export interface BaseInputsSlots extends InputHelpSlots {
   /**
    * VNode top of input & top of 'top label slot'.
    */
@@ -296,15 +487,734 @@ export type BaseInputsSlots = InputHelpSlots & {
 export interface MInputProps extends Omit<QInputProps, 'rules' | 'name' | 'modelValue' | 'label' | 'hint'>, BaseInputsProps {
   //
 }
-export type MInputSlots = QInputSlots & QFieldSlots & BaseInputsSlots
+
+export interface MInputSlots extends QInputSlots, QFieldSlots, BaseInputsSlots {
+  //
+}
+
+export interface MPasswordProps extends MInputProps {
+  /**
+   * icon prepend it to password input.
+   */
+  icon?: boolean | undefined;
+  /**
+   * toggle password append icon.
+   */
+  noToggle?: boolean | undefined;
+}
+
+export interface MEditorProps extends Omit<QEditorProps, 'modelValue' | 'placeholder'>, BaseInputsProps {
+  //
+}
+
+export interface MEditorSlots extends QEditorSlots, BaseInputsSlots {
+  //
+}
+
+export interface MSelectModelEmit {
+  value: any | null;
+  model: object | null;
+}
+
+export interface MSelectProps extends Omit<QSelectProps, 'rules' | 'name' | 'modelValue' | 'label' | 'hint' | 'autocomplete'>, BaseInputsProps {
+  /**
+   * Input search functionality. useInput prop for this feature.
+   */
+  search?: string | null | undefined;
+  /**
+   * Minimum characters to start searching. Default is 1.
+   */
+  searchLength?: string | number;
+  /**
+   * hide the default empty list message.
+   */
+  hideEmptyList?: boolean | undefined;
+  /**
+   * Disable filter functionality.
+   */
+  noFilter?: boolean | undefined;
+  /**
+   * Set mode of component to axios of filter & search.
+   * if set to true, component will fetch data from api and don't do filter functionality.
+   */
+  axiosMode?: boolean | undefined;
+  /**
+   * Fetch Data on mounted
+   */
+  // iniData?: boolean;
+}
+
+export interface MSelectSlots extends QInputSlots, QFieldSlots, BaseInputsSlots {
+  //
+}
+
+export interface MFileProps extends Omit<QFileProps, 'modelValue' | 'rules' | 'name' | 'label' | 'hint'>, Omit<BaseInputsProps, 'autocomplete'> {
+  accept?: string | undefined;
+  images?: boolean;
+  svg?: boolean;
+  video?: boolean;
+  pdf?: boolean;
+  excel?: boolean;
+}
+
+export interface MFileSlots extends QFileSlots, BaseInputsSlots {
+  //
+}
+
+export interface BaseCheckboxProps extends Omit<BaseInputsProps, 'topLabel'> {
+  /**
+   * Input row props.
+   */
+  rowProps?: Record<string, any>;
+  /**
+   * Input column props.
+   */
+  colProps?: Record<string, any>;
+}
+
+export interface MCheckboxProps extends Omit<QCheckboxProps, 'name' | 'modelValue' | 'label'>, BaseCheckboxProps {
+  //
+}
+
+export interface MCheckboxSlots extends Omit<BaseInputsSlots, 'top-label'> {
+  /**
+   * VNode before field main content.
+   */
+  before: () => VNode[];
+  /**
+   * VNode after field main content.
+   */
+  after: () => VNode[];
+}
+
+export interface MRadioProps extends Omit<QRadioProps, 'name' | 'modelValue' | 'label'>, BaseCheckboxProps {
+  //
+}
+
+export interface MRadioSlots extends MCheckboxSlots {
+  //
+}
+
+export interface MPickerProps extends BaseInputsProps,
+  Omit<QDateProps, 'modelValue' | 'options'>,
+  Omit<QTimeProps, 'modelValue'> {
+  /**
+   * Initial value of the picker.
+   * Default is: null.
+   */
+  modelValue?: any;
+  /**
+   * Type of picker. 'date' or 'time'.
+   * Default is: 'date'.
+   */
+  type?: 'date' | 'time';
+  /**
+   *  QBtn props for append button.
+   */
+  btnProps?: QBtnProps;
+  /**
+   * Value of separator for range picker.
+   * Default is: ' - '.
+   */
+  rangeSeparator?: string;
+}
+
+export interface MPickerSlots extends MInputSlots {
+  //
+}
+
+export interface MDateProps extends Omit<MPickerProps, 'type'> {
+  //
+}
+
+export interface MDateSlots extends MPickerSlots {
+  //
+}
+
+export interface MTimeProps extends Omit<MPickerProps, 'type'> {
+  //
+}
+
+export interface MTimeSlots extends MPickerSlots {
+  //
+}
+
+export interface MFieldProps extends Omit<MInputProps, 'viewMode' | 'viewModeValue' | 'fieldOptions'> {
+  //
+}
+
+export interface MFieldSlots extends MInputSlots {
+  //
+}
+
+export interface MHiddenInputSlots {
+  [key: string]: () => VNode[]
+}
+
+export interface MHiddenInputProps extends Pick<BaseInputFormProps, 'rules' | 'required'> {
+  /**
+   * Input name.
+   */
+  name: string;
+  /**
+   * Input model value.
+   */
+  modelValue?: any;
+}
+
+export interface MHiddenProps extends MHiddenInputProps, Pick<ViewModeProps, 'viewMode'>, Omit<MColProps, 'name'> {
+  //
+}
+
+export interface MHiddenSlots {
+  /**
+   * Field main content
+   */
+  default: () => VNode[];
+}
+
+export type MFormScope = FormContext<Record<string, any>>;
+
+export interface MFormProps {
+  /**
+   * Form HTML element attributes.
+   */
+  formProps?: Record<string, any>;
+  /**
+   * Default options of useForm.
+   */
+  opts?: FormOptions<Record<string, any>>;
+  /**
+   * The target to which the page will be scrolled.
+   * Default is: Window.
+   */
+  target?: HTMLElement | string | undefined;
+  /**
+   * Emit values instead controlled values.
+   * Default is: false.
+   */
+  emitValues?: boolean;
+  /**
+   * Watch to reset form values.
+   */
+  readonly state?: MaybeRefOrGetter<Partial<FormState<Record<string, any>>>>;
+  /**
+   * Watch to reset form values.
+   */
+  readonly form?: MaybeRefOrGetter<Record<string, any>>;
+  /**
+   * Watch to set form values.
+   */
+  readonly values?: MaybeRefOrGetter<Record<string, any>>;
+  /**
+   * Watch to set form errors.
+   */
+  readonly errors?: MaybeRefOrGetter<Record<string, string | string[]>>;
+  /**
+   * Apply padding to form.
+   */
+  readonly padding?: boolean;
+}
+
+export interface MFormSlots {
+  default: (scope: MFormScope) => VNode[];
+}
+
+export declare type GenericFormValues = Record<any, any>;
+
+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 MAxiosSlots extends MSelectSlots {
+  //
+}
+
+export interface MOptionsOptionContext extends Omit<QToggleProps, 'modelValue'>, Omit<QRadioProps, 'modelValue'>, Omit<QCheckboxProps, 'modelValue'> {
+  /**
+   * 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;
+  /**
+   * Customize the label when the toggle is true.
+   * Default is: Yes.
+   */
+  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 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;
+  /**
+   * Upload files immediately when added
+   */
+  autoUpload?: boolean;
+  /**
+   * 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
+   */
+  fieldName?: string | ((files: File) => string);
+  /**
+   * Collection send to API
+   */
+  collection?: string | number | symbol;
+  /**
+   * Field Attachment Type
+   */
+  attachmentType?: any;
+  /**
+   * return attachments after upload;
+   * Default current collection name;
+   */
+  returnType?: 'all' | 'current' | undefined;
+  /**
+   * Object with additional fields definitions (used by Form to be uploaded);
+   */
+  formFields?: Record<string, any>;
+  /**
+   * Extra headers
+   */
+  headers?: Record<string, any>;
+  /**
+   * Label for the uploader
+   */
+  label?: string | null | undefined;
+  /**
+   * The Attachments list.
+   */
+  modelValue?: MUploaderMediaItem[];
+  /**
+   *  Hide delete media items from uploader, no delete media For API
+   */
+  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;
+}
+
+export type MModalMenuSlots = {
+  default: () => VNode[];
+}
+
+export type MTooltipProps = Partial<QTooltipProps> & {
+  /**
+   * One of Quasar's embedded transitions
+   * Default value: jump-down
+   */
+  transitionShow?: string | undefined;
+  /**
+   * One of Quasar's embedded transitions
+   * Default value: jump-up
+   */
+  transitionHide?: string | undefined;
+  /**
+   * Transition duration (in milliseconds, without unit)
+   * Default value: 300
+   */
+  transitionDuration?: string | number | undefined;
+  /**
+   * 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
+   */
+  modelValue?: boolean;
+  /**
+   * The maximum height of the Tooltip; Size in CSS units, including unit name
+   */
+  maxHeight?: string | undefined;
+  /**
+   * The maximum width of the Tooltip; Size in CSS units, including unit name
+   */
+  maxWidth?: string | undefined;
+  /**
+   * Two values setting the starting position or anchor point of the Tooltip relative to its target
+   * Default value: bottom middle
+   */
+  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 type MTooltipSlots = {
+  default: () => VNode[];
+}
+
+export type MDialogProps = Partial<QDialogProps> & {
+  slide?: boolean | undefined;
+  from?: 'up' | 'down' | 'left' | 'right';
+}
+
+export type MDialogSlots = {
+  default: () => VNode[];
+}
+
+export type MCkeditorProps = Omit<BaseInputsProps, 'hint' | 'topLabel' | 'placeholder' | 'autocomplete'> & {
+  /**
+   * Editor language.
+   * Default value: ar.
+   */
+  lang: 'ar' | 'en';
+  /**
+   * Specifies the configuration of the editor.
+   * https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editorconfig-EditorConfig.html
+   */
+  config?: ((config: EditorConfig) => EditorConfig) | undefined;
+  /**
+   * By default, the editor component creates a <div> container which is used as an element passed to the editor (for example, ClassicEditor#element).
+   * The element can be configured, so for example to create a <textarea>, use the following directive:
+   * tag-name="textarea"
+   * Default value: div.
+   */
+  tagName?: string;
+  /**
+   * This directive controls the isReadOnly property of the editor.
+   * Default value: false.
+   */
+  disabled?: boolean;
+  /**
+   * Allows disabling the two-way data binding mechanism.
+   * Default value: false.
+   */
+  disableTwoWayDataBinding?: boolean;
+}
+export type MCkeditorSlots = BaseInputsSlots
 
 declare module '@vue/runtime-core' {
   interface GlobalComponents {
     // Form.
+    MAvatarViewer: GlobalComponentConstructor<MAvatarViewerProps, MAvatarViewerSlots>;
+    MAxios: GlobalComponentConstructor<MAxiosProps, MAxiosSlots>;
     MBtn: GlobalComponentConstructor<MBtnProps, MBtnSlots>;
-    MInput: GlobalComponentConstructor<MInputProps, MInputSlots>;
+    MCheckbox: GlobalComponentConstructor<MCheckboxProps, MCheckboxSlots>;
+    MCkeditor: GlobalComponentConstructor<MCkeditorProps, MCkeditorSlots>;
+    MColor: GlobalComponentConstructor<MInputProps, MInputSlots>;
+    MDate: GlobalComponentConstructor<MDateProps, MDateSlots>;
+    MEditor: GlobalComponentConstructor<MEditorProps, MEditorSlots>;
+    MEmail: GlobalComponentConstructor<MInputProps, MInputSlots>;
+    MField: GlobalComponentConstructor<MFieldProps, MFieldSlots>;
+    MFile: GlobalComponentConstructor<MFileProps, MFileSlots>;
+    MForm: GlobalComponentConstructor<MFormProps, MFormSlots>;
+    MHidden: GlobalComponentConstructor<MHiddenProps, MHiddenSlots>;
+    MHiddenInput: GlobalComponentConstructor<MHiddenInputProps, MHiddenInputSlots>;
     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>;
@@ -313,7 +1223,22 @@ declare module '@vue/runtime-core' {
     MContainer: GlobalComponentConstructor<MContainerProps, MContainerSlots>;
     MHelpRow: GlobalComponentConstructor<MHelpRowProps, MHelpRowSlots>;
     MRow: GlobalComponentConstructor<MRowProps, MRowSlots>;
+
     // Typography.
     MTypingString: GlobalComponentConstructor<MTypingStringProps, MTypingStringSlots>;
+
+    // Transitions.
+    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>;
   }
 }