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

package/src/types/components.d.ts

@@ -1,8 +1,59 @@
-import type { GlobalComponentConstructor, QBtnProps, QBtnSlots, QItemProps } from 'quasar'
-import type { VNode } from 'vue'
-import { TypedOptions } from 'typed.js'
+/*
+ * 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
+ */
 
-export type StyleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
+import type {
+  GlobalComponentConstructor,
+  QAvatarProps,
+  QAvatarSlots,
+  QBtnProps,
+  QBtnSlots,
+  QCheckboxProps,
+  QDateProps,
+  QEditorProps,
+  QEditorSlots,
+  QFieldSlots,
+  QFileProps,
+  QFileSlots,
+  QImgProps,
+  QInputProps,
+  QInputSlots,
+  QItemProps,
+  QRadioProps,
+  QSelectProps,
+  QTableProps,
+  QTimeProps
+} from 'quasar'
+import type { MaybeRefOrGetter, TransitionGroupProps, TransitionProps, UnwrapNestedRefs, VNode } from 'vue'
+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'
+
+export type MTransitionProps = TransitionGroupProps & {
+  enterIn?: string;
+  enterOut?: string;
+  slowIn?: boolean;
+  slowOut?: boolean;
+}
+
+export type MTransitionsSlots = {
+  default: () => VNode[];
+}
 
 export interface MBtnProps extends QBtnProps {
   //
@@ -12,7 +63,7 @@ export interface MBtnSlots extends QBtnSlots {
   /**
    * Use for custom content, instead of relying on 'icon' and 'label' props
    */
-  default: () => VNode[];
+  default?: () => VNode[];
   /**
    * Override the default QSpinner when in 'loading' state
    */
@@ -24,19 +75,19 @@ 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 {
-  default: () => VNode[];
+  default?: () => VNode[];
 }
 
 export type ColStyleType =
@@ -73,18 +124,18 @@ 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 {
-  default: () => VNode[];
+  default?: () => VNode[];
 }
 
 export interface MColumnProps {
@@ -92,32 +143,32 @@ export interface MColumnProps {
 }
 
 export interface MColumnSlots {
-  default: () => VNode[];
+  default?: () => VNode[];
 }
 
-export interface MContainerProps {
-  readonly size?: StyleSize | string | undefined;
-  readonly dense?: boolean | undefined;
-  readonly fluid?: boolean | undefined;
+export type MContainerProps = {
+  size?: ThemeSize | string | undefined;
+  dense?: boolean | undefined;
+  fluid?: boolean | undefined;
 }
 
 export interface MContainerSlots {
-  default: () => VNode[];
+  default?: () => VNode[];
 }
 
 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 {
-  default: () => VNode[];
+  default?: () => VNode[];
 }
 
 export interface MHelpRowProps extends Partial<QItemProps> {
@@ -127,7 +178,7 @@ export interface MHelpRowProps extends Partial<QItemProps> {
 }
 
 export interface MHelpRowSlots {
-  default: () => VNode[];
+  default?: () => VNode[];
 }
 
 export interface MTypingStringProps {
@@ -142,13 +193,616 @@ export interface MTypingStringProps {
 }
 
 export interface MTypingStringSlots {
+  default?: () => VNode[];
+}
+
+export interface BaseInputFieldPropContext extends FieldContext<any> {
+  //
+}
+
+export interface BaseInputFieldProps {
+  /**
+   * Context of field input.
+   */
+  field: UnwrapNestedRefs<BaseInputFieldPropContext>;
+  label?: string | undefined;
+}
+
+export interface MInputFieldControlProps {
+  [k: string]: any;
+}
+
+export interface MInputFieldControlSlots {
+  default: () => VNode[];
+}
+
+export interface MInputLabelProps extends BaseInputFieldProps {
+  //
+}
+
+export interface MInputLabelSlots {
+  default?: () => VNode[];
+}
+
+export interface ViewModeProps {
+  /**
+   * Set input to vie mode use q-field
+   */
+  viewMode?: boolean;
+  /**
+   * View Mode value for input or modelValue.
+   */
+  viewModeValue?: any | undefined;
+}
+
+export interface InputHelpProps {
+  /**
+   * Information text with Icon.
+   */
+  help?: string;
+}
+
+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 MAvatarViewerModelValue = File | null | undefined;
+
+export type MAvatarViewerProps = 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.
+   */
+  name: string;
+  /**
+   * Input model value.
+   * can be used instead of initialValue.
+   */
+  modelValue?: any;
+  /**
+   * Input Label.
+   */
+  label?: string | undefined;
+  /**
+   * Caption under label.
+   */
+  caption?: string | undefined;
+  /**
+   * Input Hint.
+   */
+  hint?: string | undefined;
+  /**
+   * Input Placeholder.
+   */
+  placeholder?: string | undefined;
+  /**
+   * Input Required validation.
+   */
+  required?: boolean;
+  /**
+   * Input Validation Rules.
+   */
+  rules?: InputRulesContext;
+  /**
+   * Input Error Messages.
+   */
+  // errors?: InputErrorsContext;
+  /**
+   * Form Error Messages.
+   */
+  // formErrors?: InputFormErrorsContext;
+  /**
+   * Input autocomplete attribute.
+   * if true, will set from input name.
+   * if false, will set 'off'.
+   * else, will set the attribute value.
+   * Default: undefined.
+   */
+  autocomplete?: boolean | string | undefined;
+  /**
+   * Inputs Top Label.
+   */
+  topLabel?: boolean;
+  /**
+   * Mobile Rule.
+   */
+  mobile?: boolean | string | number | undefined;
+  /**
+   * Email Rule.
+   */
+  email?: boolean;
+  /**
+   * Number Rule.
+   */
+  float?: boolean;
+  /**
+   * vee-validate Field Options.
+   */
+  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 interface BaseInputsSlots extends InputHelpSlots {
+  /**
+   * VNode top of input & top of 'top label slot'.
+   */
+  'top-input': () => VNode[];
+  /**
+   * The label top on input
+   */
+  'top-label': () => VNode[];
+  /**
+   * VNode top of input & after top label.
+   */
+  caption: () => VNode[];
+  /**
+   * Field main content
+   */
+  default: () => VNode[];
+  /**
+   * VNode bottom of input.
+   */
+  'bottom-input': () => VNode[];
+}
+
+export interface MInputProps extends Omit<QInputProps, 'rules' | 'name' | 'modelValue' | 'label' | 'hint'>, BaseInputsProps {
+  //
+}
+
+export interface MInputSlots extends QInputSlots, QFieldSlots, BaseInputsSlots {
+  //
+}
+
+export type MEditorProps = Omit<QEditorProps, 'modelValue' | 'placeholder'> & BaseInputsProps
+export type MEditorSlots = QEditorSlots & BaseInputsSlots
+
+export type MSelectModelEmit = { value: any | null; model: object | null }
+export type MSelectProps = 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 type MSelectSlots = QInputSlots & QFieldSlots & BaseInputsSlots
+
+export type MFileProps =
+  Omit<QFileProps, 'modelValue' | 'rules' | 'name' | 'label' | 'hint'>
+  & Omit<BaseInputsProps, 'autocomplete'>
+  & {
+  accept?: string | undefined;
+  images?: boolean;
+  svg?: boolean;
+  video?: boolean;
+  pdf?: boolean;
+  excel?: boolean;
+}
+
+export type MFileSlots = 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 type MFieldProps = Omit<MInputProps, 'viewMode' | 'viewModeValue' | 'fieldOptions'>
+export type MFieldSlots = MInputSlots
+
+export type MHiddenInputSlots = object
+export type MHiddenInputProps = Pick<BaseInputFormProps, 'rules' | 'required'> & {
+  /**
+   * Input name.
+   */
+  name: string;
+  /**
+   * Input model value.
+   */
+  modelValue?: any;
+}
+
+export type MHiddenProps = MHiddenInputProps & Pick<ViewModeProps, 'viewMode'> & Omit<MColProps, 'name'>
+export type MHiddenSlots = {
+  /**
+   * Field main content
+   */
   default: () => VNode[];
 }
 
+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 type MFormScope = FormContext<Record<string, any>>;
+
+export interface MFormSlots {
+  default: (scope: MFormScope) => VNode[];
+}
+
+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;
+}
+
+export interface MDtBtnSlots extends MBtnSlots {
+  /**
+   * Use for custom content, instead of relying on 'icon' and 'label' props
+   */
+  default: () => VNode[];
+  /**
+   * Override the default QSpinner when in 'loading' state
+   */
+  loading: () => VNode[];
+}
+
+export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = 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;
+  pdf?: boolean;
+  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,
+   */
+  addTopBtn?: boolean;
+  /**
+   * Show Add btn inside more list
+   */
+  addListBtn?: boolean;
+  /**
+   * Show Fab Add btn
+   */
+  addFabBtn?: boolean;
+  /**
+   * make datatable fullscreen mode
+   */
+  fullscreenBtn?: boolean;
+  /**
+   * Auto actions body headers 'control'
+   */
+  noBodyControl?: boolean;
+  /**
+   * Auto actions card 'control'
+   */
+  showCardControlHeader?: boolean;
+  /**
+   * Set datatable to fixed view
+   */
+  fixed?: boolean;
+  /**
+   * Names of image columns in the table.
+   */
+  imageColumns?: string[] | any[];
+  /**
+   * How to display image button in table.
+   */
+  imageMode?: 'icon' | 'image';
+  /**
+   * Image size in display
+   */
+  imageSize?: string;
+
+}
+
 declare module '@vue/runtime-core' {
   interface GlobalComponents {
     // Form.
+    MAvatarViewer: GlobalComponentConstructor<MAvatarViewerProps, MAvatarViewerSlots>;
     MBtn: GlobalComponentConstructor<MBtnProps, MBtnSlots>;
+    MCheckbox: GlobalComponentConstructor<MCheckboxProps, MCheckboxSlots>;
+    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>;
+    MPicker: GlobalComponentConstructor<MPickerProps, MPickerSlots>;
+    MRadio: GlobalComponentConstructor<MRadioProps, MRadioSlots>;
+    MSelect: GlobalComponentConstructor<MSelectProps, MSelectSlots>;
+    MTime: GlobalComponentConstructor<MTimeProps, MTimeSlots>;
 
     // Grid.
     MBlock: GlobalComponentConstructor<MBlockProps, MBlockSlots>;
@@ -157,7 +811,13 @@ 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>;
   }
 }