* @param scope
*/
"marker-label": (scope: {
/**
* Config for current marker label
*/
marker: SliderMarkerLabelConfig;
/**
* Array of marker label configs
*/
markerList: SliderMarkerLabelConfig[];
/**
* Object with key-value where key is the model and the value is the marker label config
*/
markerMap: SliderMarkerLabelObjectConfig;
/**
* Required CSS classes to be applied to the marker element
*/
classes: string;
/**
* Get CSS style Object to apply to a marker element at respective model value; For perf reasons, use only if requested model value is not already part of markerMap
* @param value The marker label equivalent model value
* @returns CSS style Object to apply to a marker element at respective model value
*/
getStyle: (value: number) => any;
}) => VNode[];
/**
* What should the menu display after filtering options and none are left to be displayed; Suggestion:
* @param scope
*/
"marker-label-group": (scope: {
/**
* Array of marker label configs
*/
markerList: SliderMarkerLabelConfig[];
/**
* Object with key-value where key is the model and the value is the marker label config
*/
markerMap: SliderMarkerLabelObjectConfig;
/**
* Required CSS classes to be applied to the marker element
*/
classes: string;
/**
* Get CSS style Object to apply to a marker element at respective model value; For perf reasons, use only if requested model value is not already part of markerMap
* @param value The marker label equivalent model value
* @returns CSS style Object to apply to a marker element at respective model value
*/
getStyle: (value: number) => any;
}) => VNode[];
}
export interface QRange extends ComponentPublicInstance
{}
export interface QRatingProps {
/**
* Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
*/
name?: string | undefined;
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
*/
size?: string | undefined;
/**
* Model of the component; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive
*/
modelValue: number;
/**
* Number of icons to display
* Default value: 5
*/
max?: number | string | undefined;
/**
* Icon name following Quasar convention; make sure you have the icon library installed unless you are using 'img:' prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)
*/
icon?: string | readonly any[] | undefined;
/**
* Icon name following Quasar convention to be used when selected (optional); make sure you have the icon library installed unless you are using 'img:' prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)
*/
iconSelected?: string | readonly any[] | undefined;
/**
* Icon name following Quasar convention to be used when selected (optional); make sure you have the icon library installed unless you are using 'img:' prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)
*/
iconHalf?: string | readonly any[] | undefined;
/**
* Label to be set on aria-label for Icon; If an array is provided each rating value will use the corresponding aria-label in the array (0 based); If string value is provided the rating value will be appended; If not provided the name of the icon will be used
*/
iconAriaLabel?: string | readonly any[] | undefined;
/**
* Color name for component from the Quasar Color Palette; v1.5.0+: If an array is provided each rating value will use the corresponding color in the array (0 based)
*/
color?: NamedColor | NamedColor[] | undefined;
/**
* Color name from the Quasar Palette for selected icons
*/
colorSelected?: NamedColor | NamedColor[] | undefined;
/**
* Color name from the Quasar Palette for half selected icons
*/
colorHalf?: NamedColor | NamedColor[] | undefined;
/**
* Does not lower opacity for unselected icons
*/
noDimming?: boolean | undefined;
/**
* When used, disables default behavior of clicking/tapping on icon which represents current model value to reset model to 0
*/
noReset?: boolean | undefined;
/**
* Put component in readonly mode
*/
readonly?: boolean | undefined;
/**
* Put component in disabled mode
*/
disable?: boolean | undefined;
/**
* Emitted when the component needs to change the model; Is also used by v-model
* @param value New model value
*/
"onUpdate:modelValue"?: (value: any) => void;
}
export interface QRatingSlots {
/**
* Slot to define the tooltip of icon at '[name]' where name is a 1-based index; Suggestion: QTooltip
*/
[key: `tip-${string}`]: () => VNode[];
}
export interface QRating extends ComponentPublicInstance {}
export interface QResizeObserverProps {
/**
* Debounce amount (in milliseconds)
* Default value: 100
*/
debounce?: string | number | undefined;
/**
* Parent element has resized (width or height changed)
* @param size New size
*/
onResize?: (size: {
/**
* Layout height
*/
height: number;
/**
* Layout width
*/
width: number;
}) => void;
}
export interface QResizeObserverSlots {}
export interface QResizeObserver extends ComponentPublicInstance {
/**
* Emit a 'resize' event
* @param immediately Skip over the debounce amount
*/
trigger: (immediately?: boolean) => void;
}
export interface QResponsiveProps {
/**
* Aspect ratio for the content; If value is a String, then avoid using a computational statement (like '16/9') and instead specify the String value of the result directly (eg. '1.7777')
*/
ratio?: string | number | undefined;
}
export interface QResponsiveSlots {
/**
* Default slot in the devland unslotted content of the component
*/
default: () => VNode[];
}
export interface QResponsive extends ComponentPublicInstance {}
export interface QScrollAreaProps {
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null | undefined;
/**
* Adds [top, bottom] offset to vertical thumb
* Default value: # [0, 0]
*/
verticalOffset?: readonly any[] | undefined;
/**
* Adds [left, right] offset to horizontal thumb
* Default value: # [0, 0]
*/
horizontalOffset?: readonly any[] | undefined;
/**
* Object with CSS properties and values for custom styling the scrollbars (both vertical and horizontal)
*/
barStyle?: VueStyleProp | undefined;
/**
* Object with CSS properties and values for custom styling the vertical scrollbar; Is applied on top of 'bar-style' prop
*/
verticalBarStyle?: VueStyleProp | undefined;
/**
* Object with CSS properties and values for custom styling the horizontal scrollbar; Is applied on top of 'bar-style' prop
*/
horizontalBarStyle?: VueStyleProp | undefined;
/**
* Object with CSS properties and values for custom styling the thumb of scrollbars (both vertical and horizontal)
*/
thumbStyle?: VueStyleObjectProp | undefined;
/**
* Object with CSS properties and values for custom styling the thumb of the vertical scrollbar; Is applied on top of 'thumb-style' prop
*/
verticalThumbStyle?: VueStyleObjectProp | undefined;
/**
* Object with CSS properties and values for custom styling the thumb of the horizontal scrollbar; Is applied on top of 'thumb-style' prop
*/
horizontalThumbStyle?: VueStyleObjectProp | undefined;
/**
* Object with CSS properties and values for styling the container of QScrollArea
*/
contentStyle?: VueStyleProp | undefined;
/**
* Object with CSS properties and values for styling the container of QScrollArea when scroll area becomes active (is mouse hovered)
*/
contentActiveStyle?: VueStyleProp | undefined;
/**
* Manually control the visibility of the scrollbar; Overrides default mouse over/leave behavior
* Default value: null
*/
visible?: boolean | null | undefined;
/**
* When content changes, the scrollbar appears; this delay defines the amount of time (in milliseconds) before scrollbars disappear again (if component is not hovered)
* Default value: 1000
*/
delay?: number | string | undefined;
/**
* Tabindex HTML attribute value
*/
tabindex?: number | string | undefined;
/**
* Emitted when scroll information changes (and listener is configured)
* @param info An object containing scroll information
*/
onScroll?: (info: {
/**
* Vue reference to the QScrollArea which triggered the event
*/
ref: QScrollArea;
/**
* Vertical scroll position (in px)
*/
verticalPosition: number;
/**
* Vertical scroll percentage (0.0 <= x <= 1.0)
*/
verticalPercentage: number;
/**
* Vertical scroll size (in px)
*/
verticalSize: number;
/**
* Height of the container (in px)
*/
verticalContainerSize: number;
/**
* Height of the container without the vertical offset (in px)
*/
verticalContainerInnerSize: number;
/**
* Horizontal scroll position (in px)
*/
horizontalPosition: number;
/**
* Horizontal scroll percentage (0.0 <= x <= 1.0)
*/
horizontalPercentage: number;
/**
* Horizontal scroll size (in px)
*/
horizontalSize: number;
/**
* Width of the container (in px)
*/
horizontalContainerSize: number;
/**
* Width of the container without the horizontal offset (in px)
*/
horizontalContainerInnerSize: number;
}) => void;
}
export interface QScrollAreaSlots {
/**
* Default slot in the devland unslotted content of the component
*/
default: () => VNode[];
}
export interface QScrollArea extends ComponentPublicInstance {
/**
* Get the scrolling DOM element target
* @returns DOM element upon which scrolling takes place
*/
getScrollTarget: () => Element;
/**
* Get the current scroll information
* @returns Scroll information
*/
getScroll: () => {
/**
* Vertical scroll position (in px)
*/
verticalPosition: number;
/**
* Vertical scroll percentage (0.0 <= x <= 1.0)
*/
verticalPercentage: number;
/**
* Vertical scroll size (in px)
*/
verticalSize: number;
/**
* Height of the container (in px)
*/
verticalContainerSize: number;
/**
* Height of the container without the vertical offset (in px)
*/
verticalContainerInnerSize: number;
/**
* Horizontal scroll position (in px)
*/
horizontalPosition: number;
/**
* Horizontal scroll percentage (0.0 <= x <= 1.0)
*/
horizontalPercentage: number;
/**
* Horizontal scroll size (in px)
*/
horizontalSize: number;
/**
* Width of the container (in px)
*/
horizontalContainerSize: number;
/**
* Width of the container without the horizontal offset (in px)
*/
horizontalContainerInnerSize: number;
};
/**
* Get current scroll position
* @returns An object containing scroll position information
*/
getScrollPosition: () => {
/**
* Scroll offset from top (vertical)
*/
top: number;
/**
* Scroll offset from left (horizontal)
*/
left: number;
};
/**
* Get current scroll position in percentage (0.0 <= x <= 1.0)
* @returns An object containing scroll position information in percentage
*/
getScrollPercentage: () => {
/**
* Scroll percentage (0.0 <= x <= 1.0) offset from top (vertical)
*/
top: number;
/**
* Scroll percentage (0.0 <= x <= 1.0) offset from left (horizontal)
*/
left: number;
};
/**
* Set scroll position to an offset; If a duration (in milliseconds) is specified then the scroll is animated
* @param axis Scroll axis
* @param offset Scroll position offset from top (in pixels)
* @param duration Duration (in milliseconds) enabling animated scroll
*/
setScrollPosition: (axis: "vertical" | "horizontal", offset: number, duration?: number) => void;
/**
* Set scroll position to a percentage (0.0 <= x <= 1.0) of the total scrolling size; If a duration (in milliseconds) is specified then the scroll is animated
* @param axis Scroll axis
* @param offset Scroll percentage (0.0 <= x <= 1.0) of the total scrolling size
* @param duration Duration (in milliseconds) enabling animated scroll
*/
setScrollPercentage: (axis: "vertical" | "horizontal", offset: number, duration?: number) => void;
}
export interface QScrollObserverProps {
/**
* Debounce amount (in milliseconds)
*/
debounce?: string | number | undefined;
/**
* Axis on which to detect changes
* Default value: 'vertical'
*/
axis?: "both" | "vertical" | "horizontal" | undefined;
/**
* CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one
*/
scrollTarget?: Element | string | undefined;
/**
* Emitted when scroll position changes
* @param details Scroll details
*/
onScroll?: (details: {
/**
* Scroll offset (from top and left)
*/
position: {
/**
* Scroll offset from top (vertical)
*/
top: number;
/**
* Scroll offset from left (horizontal)
*/
left: number;
};
/**
* Direction of scroll
*/
direction: "up" | "down" | "left" | "right";
/**
* Has scroll direction changed since event was last emitted?
*/
directionChanged: boolean;
/**
* Delta of distance (in pixels) since event was last emitted
*/
delta: {
/**
* Vertical delta distance since event was last emitted
*/
top: number;
/**
* Horizontal delta distance since event was last emitted
*/
left: number;
};
/**
* Last scroll offset where scroll direction has changed
*/
inflectionPoint: {
/**
* Scroll offset from top (vertical)
*/
top: number;
/**
* Scroll offset from left (horizontal)
*/
left: number;
};
}) => void;
}
export interface QScrollObserverSlots {}
export interface QScrollObserver extends ComponentPublicInstance {
/**
* Emit a 'scroll' event
* @param immediately Skip over the debounce amount
*/
trigger: (immediately?: boolean) => void;
/**
* Get current scroll details under the form of an Object: { position, direction, directionChanged, inflectionPoint }
*/
getPosition: () => void;
}
export interface QSelectProps {
/**
* Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of 'for' prop, if it exists
*/
name?: string | undefined;
/**
* Make virtual list work in horizontal mode
*/
virtualScrollHorizontal?: boolean | undefined;
/**
* Minimum number of items to render in the virtual list
* Default value: 10
*/
virtualScrollSliceSize?: number | string | null | undefined;
/**
* Ratio of number of items in visible zone to render before it
* Default value: 1
*/
virtualScrollSliceRatioBefore?: number | string | undefined;
/**
* Ratio of number of items in visible zone to render after it
* Default value: 1
*/
virtualScrollSliceRatioAfter?: number | string | undefined;
/**
* Default size in pixels (height if vertical, width if horizontal) of an item; This value is used for rendering the initial list; Try to use a value close to the minimum size of an item
* Default value: 24
*/
virtualScrollItemSize?: number | string | undefined;
/**
* Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the start of the list; A correct value will improve scroll precision
* Default value: 0
*/
virtualScrollStickySizeStart?: number | string | undefined;
/**
* Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the end of the list; A correct value will improve scroll precision
* Default value: 0
*/
virtualScrollStickySizeEnd?: number | string | undefined;
/**
* The number of columns in the table (you need this if you use table-layout: fixed)
*/
tableColspan?: number | string | undefined;
/**
* Model of the component; Must be Array if using 'multiple' prop; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive
*/
modelValue: any;
/**
* Does field have validation errors?
* Default value: null
*/
error?: boolean | null | undefined;
/**
* Validation error message (gets displayed only if 'error' is set to 'true')
*/
errorMessage?: string | undefined;
/**
* Hide error icon when there is an error
*/
noErrorIcon?: boolean | undefined;
/**
* Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules
*/
rules?: ValidationRule[] | undefined;
/**
* By default a change in the rules does not trigger a new validation until the model changes; If set to true then a change in the rules will trigger a validation; Has a performance penalty, so use it only when you really need it
*/
reactiveRules?: boolean | undefined;
/**
* If set to boolean true then it checks validation status against the 'rules' only after field loses focus for first time; If set to 'ondemand' then it will trigger only when component's validate() method is manually called or when the wrapper QForm submits itself
* Default value: false
*/
lazyRules?: boolean | "ondemand" | undefined;
/**
* A text label that will “float” up above the input field, once the field gets focus
*/
label?: string | undefined;
/**
* Label will be always shown above the field regardless of field content (if any)
*/
stackLabel?: boolean | undefined;
/**
* Helper (hint) text which gets placed below your wrapped form component
*/
hint?: string | undefined;
/**
* Hide the helper (hint) text when field doesn't have focus
*/
hideHint?: boolean | undefined;
/**
* Prefix
*/
prefix?: string | undefined;
/**
* Suffix
*/
suffix?: string | undefined;
/**
* Color name for the label from the Quasar Color Palette; Overrides the 'color' prop; The difference from 'color' prop is that the label will always have this color, even when field is not focused
*/
labelColor?: NamedColor | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
bgColor?: NamedColor | undefined;
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null | undefined;
/**
* Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the 'loading' slot.
*/
loading?: boolean | undefined;
/**
* Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null
*/
clearable?: boolean | undefined;
/**
* Custom icon to use for the clear button when using along with 'clearable' prop
*/
clearIcon?: string | undefined;
/**
* Use 'filled' design for the field
*/
filled?: boolean | undefined;
/**
* Use 'outlined' design for the field
*/
outlined?: boolean | undefined;
/**
* Use 'borderless' design for the field
*/
borderless?: boolean | undefined;
/**
* Use 'standout' design for the field; Specifies classes to be applied when focused (overriding default ones)
*/
standout?: boolean | string | undefined;
/**
* Enables label slot; You need to set it to force use of the 'label' slot if the 'label' prop is not set
*/
labelSlot?: boolean | undefined;
/**
* Enables bottom slots ('error', 'hint', 'counter')
*/
bottomSlots?: boolean | undefined;
/**
* Do not reserve space for hint/error/counter anymore when these are not used; As a result, it also disables the animation for those; It also allows the hint/error area to stretch vertically based on its content
*/
hideBottomSpace?: boolean | undefined;
/**
* Show an automatic counter on bottom right
*/
counter?: boolean | undefined;
/**
* Applies a small standard border-radius for a squared shape of the component
*/
rounded?: boolean | undefined;
/**
* Remove border-radius so borders are squared; Overrides 'rounded' prop
*/
square?: boolean | undefined;
/**
* Dense mode; occupies less space
*/
dense?: boolean | undefined;
/**
* Match inner content alignment to that of QItem
*/
itemAligned?: boolean | undefined;
/**
* Put component in disabled mode
*/
disable?: boolean | undefined;
/**
* Put component in readonly mode
*/
readonly?: boolean | undefined;
/**
* Focus field on initial component render
*/
autofocus?: boolean | undefined;
/**
* Used to specify the 'id' of the control and also the 'for' attribute of the label that wraps it; If no 'name' prop is specified, then it is used for this attribute as well
*/
for?: string | undefined;
/**
* Allow multiple selection; Model must be Array
*/
multiple?: boolean | undefined;
/**
* Override default selection string, if not using 'selected' slot/scoped slot and if not using 'use-chips' prop
*/
displayValue?: number | string | undefined;
/**
* Force render the selected option(s) as HTML; This can lead to XSS attacks so make sure that you sanitize the content; Does NOT apply when using 'selected' or 'selected-item' slots!
*/
displayValueHtml?: boolean | undefined;
/**
* Array of objects with available options that the user can select from. For best performance freeze the list of options. Canonical form of each object is with 'label' (String), 'value' (Any) and optional 'disable' (Boolean) props (can be customized with options-value/option-label/option-disable props).
* Default value: []
*/
options?: readonly any[] | undefined;
/**
* Property of option which holds the 'value'; If using a function then for best performance, reference it from your scope and do not define it inline
* Default value: 'value'
* @param option The current option being processed
* @returns Value of the current option
*/
optionValue?: ((option: string | any) => any) | string | undefined;
/**
* Property of option which holds the 'label'; If using a function then for best performance, reference it from your scope and do not define it inline
* Default value: 'label'
* @param option The current option being processed
* @returns Label of the current option
*/
optionLabel?: ((option: string | any) => string) | string | undefined;
/**
* Property of option which tells it's disabled; The value of the property must be a Boolean; If using a function then for best performance, reference it from your scope and do not define it inline
* Default value: 'disable'
* @param option The current option being processed
* @returns If true, the current option will be disabled
*/
optionDisable?: ((option: string | any) => boolean) | string | undefined;
/**
* Hides selection; Use the underlying input tag to hold the label (instead of showing it to the right of the input) of the selected option; Only works for non 'multiple' Selects
*/
hideSelected?: boolean | undefined;
/**
* Hides dropdown icon
*/
hideDropdownIcon?: boolean | undefined;
/**
* Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
*/
dropdownIcon?: string | undefined;
/**
* Allow a maximum number of selections that the user can do
*/
maxValues?: number | string | undefined;
/**
* Dense mode for options list; occupies less space
*/
optionsDense?: boolean | undefined;
/**
* Options menu will be colored with a dark color
* Default value: null
*/
optionsDark?: boolean | null | undefined;
/**
* CSS class name for options that are active/selected; Set it to an empty string to stop applying the default (which is text-* where * is the 'color' prop value)
*/
optionsSelectedClass?: string | undefined;
/**
* Force render the options as HTML; This can lead to XSS attacks so make sure that you sanitize the content; Does NOT apply when using 'option' slot!
*/
optionsHtml?: boolean | undefined;
/**
* Expanded menu will cover the component (will not work along with 'use-input' prop for obvious reasons)
*/
optionsCover?: boolean | undefined;
/**
* Allow the options list to be narrower than the field (only in menu mode)
*/
menuShrink?: boolean | undefined;
/**
* Two values setting the starting position or anchor point of the options list relative to the field (only in menu mode)
*/
menuAnchor?:
| "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 options list's own position relative to its target (only in menu mode)
*/
menuSelf?:
| "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 options list horizontally and vertically in pixels (only in menu mode)
*/
menuOffset?: readonly any[] | undefined;
/**
* Class definitions to be attributed to the popup content
*/
popupContentClass?: string | undefined;
/**
* Style definitions to be attributed to the popup content
*/
popupContentStyle?: VueStyleProp | undefined;
/**
* Changing route app won't dismiss the popup (menu or dialog)
*/
popupNoRouteDismiss?: boolean | undefined;
/**
* Use QChip to show what is currently selected
*/
useChips?: boolean | undefined;
/**
* Use an input tag where users can type
*/
useInput?: boolean | undefined;
/**
* Specify a max length for the inner input tag (if 'use-input' is enabled)
*/
maxlength?: string | number | undefined;
/**
* Fills the input with current value; Useful along with 'hide-selected'; Does NOT work along with 'multiple' selection
*/
fillInput?: boolean | undefined;
/**
* Enables creation of new values and defines behavior when a new value is added: 'add' means it adds the value (even if possible duplicate), 'add-unique' adds only unique values, and 'toggle' adds or removes the value (based on if it exists or not already); When using this prop then listening for @new-value becomes optional (only to override the behavior defined by 'new-value-mode')
*/
newValueMode?: "add" | "add-unique" | "toggle" | undefined;
/**
* Try to map labels of model from 'options' Array; has a small performance penalty; If you are using emit-value you will probably need to use map-options to display the label text in the select field rather than the value; Refer to the 'Affecting model' section above
*/
mapOptions?: boolean | undefined;
/**
* Prevents the tab key from confirming the currently hovered option
*/
disableTabSelection?: boolean | undefined;
/**
* Update model with the value of the selected option instead of the whole option
*/
emitValue?: boolean | undefined;
/**
* Debounce the input model update with an amount of milliseconds (also affects the 'filter' event, if used)
* Default value: 500
*/
inputDebounce?: number | string | undefined;
/**
* Class definitions to be attributed to the underlying input tag
*/
inputClass?: VueClassProp | undefined;
/**
* Style definitions to be attributed to the underlying input tag
*/
inputStyle?: VueStyleProp | undefined;
/**
* Tabindex HTML attribute value
* Default value: 0
*/
tabindex?: number | string | undefined;
/**
* Autocomplete attribute for field
*/
autocomplete?: string | undefined;
/**
* Transition when showing the menu/dialog; One of Quasar's embedded transitions
* Default value: 'fade'
*/
transitionShow?: string | undefined;
/**
* Transition when hiding the menu/dialog; One of Quasar's embedded transitions
* Default value: 'fade'
*/
transitionHide?: string | undefined;
/**
* Transition duration when hiding the menu/dialog (in milliseconds, without unit)
* Default value: 300
*/
transitionDuration?: string | number | undefined;
/**
* Overrides the default dynamic mode of showing as menu on desktop and dialog on mobiles
* Default value: 'default'
*/
behavior?: "default" | "menu" | "dialog" | undefined;
/**
* Emitted when the virtual scroll occurs
* @param details Object of properties on the new scroll position
*/
onVirtualScroll?: (details: {
/**
* Index of the list item that was scrolled into view (0 based)
*/
index: number;
/**
* The index of the first list item that is rendered (0 based)
*/
from: number;
/**
* The index of the last list item that is rendered (0 based)
*/
to: number;
/**
* Direction of change
*/
direction: "increase" | "decrease";
/**
* Vue reference to the QSelect
*/
ref: QSelect;
}) => void;
/**
* Emitted when the component needs to change the model; Is also used by v-model
* @param value New model value
*/
"onUpdate:modelValue"?: (value: any) => void;
/**
* Emitted when component gets focused
* @param evt JS event object
*/
onFocus?: (evt: Event) => void;
/**
* Emitted when component loses focus
* @param evt JS event object
*/
onBlur?: (evt: Event) => void;
/**
* When using the 'clearable' property, this event is emitted when the clear icon is clicked
* @param value The previous value before clearing it
*/
onClear?: (value: any) => void;
/**
* Emitted when the value in the text input changes
* @param value New text value
*/
onInputValue?: (value: string) => void;
/**
* Emitted when an option is removed from selection
* @param details Removal details
*/
onRemove?: (details: {
/**
* Model index at which removal took place
*/
index: number;
/**
* The actual value that was removed
*/
value: any;
}) => void;
/**
* Emitted when an option is added to the selection
* @param details Addition details
*/
onAdd?: (details: {
/**
* Model index at which addition took place
*/
index: number;
/**
* The actual value that was added
*/
value: any;
}) => void;
/**
* Enables creation of new values; Emitted when a new value has been created; You can override 'new-value-mode' property with it
* @param inputValue What the user typed
* @param doneFn Adds (optional) value to the model; Do not forget to call it after you validate the newly created value; Call it with no parameters if nothing should be added
*/
onNewValue?: (
inputValue: string,
doneFn: (item?: any, mode?: "add" | "add-unique" | "toggle") => void,
) => void;
/**
* Emitted when user wants to filter a value
* @param inputValue What the user typed
* @param doneFn Supply a function which makes the necessary updates
* @param abortFn Call this function if something went wrong
*/
onFilter?: (
inputValue: string,
doneFn: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
abortFn: () => void,
) => void;
/**
* Emitted when a filtering was aborted; Probably a new one was requested?
*/
onFilterAbort?: () => void;
/**
* Emitted when the select options menu or dialog is shown.
* @param evt JS event object
*/
onPopupShow?: (evt: Event) => void;
/**
* Emitted when the select options menu or dialog is hidden.
* @param evt JS event object
*/
onPopupHide?: (evt: Event) => void;
}
export interface QSelectSlots {
/**
* Field main content
*/
default: () => VNode[];
/**
* Prepend inner field; Suggestions: QIcon, QBtn
*/
prepend: () => VNode[];
/**
* Append to inner field; Suggestions: QIcon, QBtn
*/
append: () => VNode[];
/**
* Prepend outer field; Suggestions: QIcon, QBtn
*/
before: () => VNode[];
/**
* Append outer field; Suggestions: QIcon, QBtn
*/
after: () => VNode[];
/**
* Slot for label; Used only if 'label-slot' prop is set or the 'label' prop is set; When it is used the text in the 'label' prop is ignored
*/
label: () => VNode[];
/**
* Slot for errors; Enabled only if 'bottom-slots' prop is used; Suggestion:
*/
error: () => VNode[];
/**
* Slot for hint text; Enabled only if 'bottom-slots' prop is used; Suggestion:
*/
hint: () => VNode[];
/**
* Slot for counter text; Enabled only if 'bottom-slots' prop is used; Suggestion:
*/
counter: () => VNode[];
/**
* Override default spinner when component is in loading mode; Suggestion: spinners
*/
loading: () => VNode[];
/**
* Override default selection slot; Suggestion: QChip
*/
selected: () => VNode[];
/**
* Template slot for the elements that should be rendered before the list of options
*/
"before-options": () => VNode[];
/**
* Template slot for the elements that should be rendered after the list of options
*/
"after-options": () => VNode[];
/**
* What should the menu display after filtering options and none are left to be displayed; Suggestion:
* @param scope
*/
"no-option": (scope: {
/**
* Input textfield value, if any (not QSelect model)
*/
inputValue: string;
}) => VNode[];
/**
* Override default selection slot; Suggestion: QChip
* @param scope
*/
"selected-item": (scope: {
/**
* Selection index
*/
index: number;
/**
* Selected option -- its value is taken from model
*/
opt: any;
/**
* Always true -- passed down as prop to QItem (when using QItem)
*/
selected: boolean;
/**
* Is the content HTML?
*/
html: boolean;
/**
* Remove selected option located at specific index
* @param index Index at which to remove selection
*/
removeAtIndex: (index: number) => void;
/**
* Add/remove option from model
* @param opt Option to add to model
*/
toggleOption: (opt: any) => void;
/**
* Tabindex HTML attribute value associated with respective option
*/
tabindex: number;
}) => VNode[];
/**
* Customize how options are rendered; Suggestion: QItem
* @param scope
*/
option: (scope: {
/**
* Option index
*/
index: number;
/**
* Option -- its value is taken from 'options' prop
*/
opt: any;
/**
* Is the content HTML?
*/
html: boolean;
/**
* Label of the option
*/
label: string;
/**
* Is option selected?
*/
selected: boolean;
/**
* Is option focused?
*/
focused: boolean;
/**
* Add/remove option from model
* @param opt Option to add to model
*/
toggleOption: (opt: any) => void;
/**
* Sets option from menu as 'focused'
* @param index Index of option from menu
*/
setOptionIndex: (index: number) => void;
/**
* Computed properties passed down to QItem
*/
itemProps: any;
}) => VNode[];
}
export interface QSelect extends ComponentPublicInstance
{
/**
* Scroll the virtual scroll list to the item with the specified index (0 based)
* @param index The index of the list item (0 based)
* @param edge The edge to align to if the item is not visible already (by default it aligns to end if scrolling towards the end and to start otherwise); If the '-force' version is used then it always aligns
*/
scrollTo: (
index: number | string,
edge?: "start" | "center" | "end" | "start-force" | "center-force" | "end-force",
) => void;
/**
* Resets the virtual scroll computations; Needed for custom edge-cases
*/
reset: () => void;
/**
* Refreshes the virtual scroll list; Use it after appending items
* @param index The index of the list item to scroll to after refresh (0 based); If it's not specified the scroll position is not changed; Use a negative value to keep scroll position
*/
refresh: (index?: string | number) => void;
/**
* Reset validation status
*/
resetValidation: () => void;
/**
* Trigger a validation
* @param value Optional value to validate against
* @returns True/false if no async rules, otherwise a Promise with the outcome (true -> validation was a success, false -> invalid models detected)
*/
validate: (value?: any) => boolean | Promise;
/**
* Focus component
*/
focus: () => void;
/**
* Blur component (lose focus)
*/
blur: () => void;
/**
* Focus and open popup
*/
showPopup: () => void;
/**
* Hide popup
*/
hidePopup: () => void;
/**
* Remove selected option located at specific index
* @param index Index at which to remove selection
*/
removeAtIndex: (index: number) => void;
/**
* Adds option to model
* @param opt Option to add to model
* @param unique Option must be unique
*/
add: (opt: any, unique?: boolean) => void;
/**
* Add/remove option from model
* @param opt Option to add to model
* @param keepOpen Don't close the menu and do not clear the filter
*/
toggleOption: (opt: any, keepOpen?: boolean) => void;
/**
* Gets current focused option index from menu; It's -1 if no option is focused
* @returns Index of option from menu; It's -1 if no option is focused
*/
getOptionIndex: () => number;
/**
* Sets option from menu as 'focused'; -1 to focus none
* @param index Index of option from menu; -1 to focus none
*/
setOptionIndex: (index: number) => void;
/**
* Move selected option from menu by index offset
* @param offset Number of options to move up or down
* @param skipInputValue Don't set input-value on navigation
*/
moveOptionSelection: (offset?: number, skipInputValue?: boolean) => void;
/**
* Filter options
* @param value String to filter with
*/
filter: (value: string) => void;
/**
* Recomputes menu position
*/
updateMenuPosition: () => void;
/**
* If 'use-input' is specified, this updates the value that it holds
* @param value String to set the input value to
* @param noFilter Set to true if you don't want the filter (if any) to be also triggered
*/
updateInputValue: (value: string, noFilter?: boolean) => void;
/**
* Tells if an option is selected
* @param opt Option entry
* @returns Option is selected or not
*/
isOptionSelected: (opt: any) => boolean;
/**
* Get the model value that would be emitted by QSelect when selecting a said option; Also takes into consideration if 'emit-value' is set
* @param opt Option entry
* @returns Emitting model value of said option
*/
getEmittingOptionValue: (opt: any) => any;
/**
* Get the model value of an option; Takes into consideration 'option-value' (if used), but does not looks for 'emit-value', like getEmittingOptionValue() does
* @param opt Option entry
* @returns Model value of said option
*/
getOptionValue: (opt: any) => any;
/**
* Get the label of an option; Takes into consideration the 'option-label' prop (if used)
* @param opt Option entry
* @returns Label of said option
*/
getOptionLabel: (opt: any) => any;
/**
* Tells if an option is disabled; Takes into consideration 'option-disable' prop (if used)
* @param opt Option entry
* @returns Option is disabled or not
*/
isOptionDisabled: (opt: any) => boolean;
/**
* Whether the component is in error state
*/
readonly hasError: boolean;
}
export interface QSeparatorProps {
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null | undefined;
/**
* If set to true, the corresponding direction margins will be set to 8px; It can also be set to a size in CSS units, including unit name, or one of the xs|sm|md|lg|xl predefined sizes
*/
spaced?: boolean | string | undefined;
/**
* If set to Boolean true, the left and right margins will be set to 16px. If set to 'item' then it will match a QItem's design. If set to 'item-thumbnail' then it will match the design of a QItem with a thumbnail on the left side
*/
inset?: boolean | "item" | "item-thumbnail" | undefined;
/**
* If set to true, the separator will be vertical.
*/
vertical?: boolean | undefined;
/**
* Size in CSS units, including unit name
*/
size?: string | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSeparatorSlots {}
export interface QSeparator extends ComponentPublicInstance {}
export interface QSkeletonProps {
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null | undefined;
/**
* Type of skeleton placeholder
* Default value: 'rect'
*/
type?:
| "text"
| "rect"
| "circle"
| "QBtn"
| "QBadge"
| "QChip"
| "QToolbar"
| "QCheckbox"
| "QRadio"
| "QToggle"
| "QSlider"
| "QRange"
| "QInput"
| "QAvatar"
| undefined;
/**
* The animation effect of the skeleton placeholder
* Default value: 'wave'
*/
animation?: "wave" | "pulse" | "pulse-x" | "pulse-y" | "fade" | "blink" | "none" | undefined;
/**
* Animation speed (in milliseconds, without unit)
* Default value: 1500
*/
animationSpeed?: string | number | undefined;
/**
* Removes border-radius so borders are squared
*/
square?: boolean | undefined;
/**
* Applies a default border to the component
*/
bordered?: boolean | undefined;
/**
* Size in CSS units, including unit name; Overrides 'height' and 'width' props and applies the value to both height and width
*/
size?: string | undefined;
/**
* Width in CSS units, including unit name; Apply custom width; Use this prop or through CSS; Overridden by 'size' prop if used
*/
width?: string | undefined;
/**
* Height in CSS units, including unit name; Apply custom height; Use this prop or through CSS; Overridden by 'size' prop if used
*/
height?: string | undefined;
/**
* HTML tag to use
* Default value: 'div'
*/
tag?: string | undefined;
}
export interface QSkeletonSlots {
/**
* Default slot in the devland unslotted content of the component
*/
default: () => VNode[];
}
export interface QSkeleton extends ComponentPublicInstance {}
export interface QSlideItemProps {
/**
* Color name for left-side background from the Quasar Color Palette
*/
leftColor?: NamedColor | undefined;
/**
* Color name for right-side background from the Quasar Color Palette
*/
rightColor?: NamedColor | undefined;
/**
* Color name for top-side background from the Quasar Color Palette
*/
topColor?: NamedColor | undefined;
/**
* Color name for bottom-side background from the Quasar Color Palette
*/
bottomColor?: NamedColor | undefined;
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null | undefined;
/**
* Emitted when user finished sliding the item to the left
* @param details Details
*/
onLeft?: (details: {
/**
* When called, it resets the component to its initial non-slided state
*/
reset: () => void;
}) => void;
/**
* Emitted when user finished sliding the item to the right
* @param details Details
*/
onRight?: (details: {
/**
* When called, it resets the component to its initial non-slided state
*/
reset: () => void;
}) => void;
/**
* Emitted when user finished sliding the item up
* @param details Details
*/
onTop?: (details: {
/**
* When called, it resets the component to its initial non-slided state
*/
reset: () => void;
}) => void;
/**
* Emitted when user finished sliding the item down
* @param details Details
*/
onBottom?: (details: {
/**
* When called, it resets the component to its initial non-slided state
*/
reset: () => void;
}) => void;
/**
* Emitted while user is sliding the item to one of the available sides
* @param details Details
*/
onSlide?: (details: {
/**
* Side to which sliding is taking effect
*/
side: "left" | "right" | "top" | "bottom";
/**
* Ratio of how much of the required slide was performed (0 <= x <= 1)
*/
ratio: number;
/**
* Ratio has been reset
*/
isReset: boolean;
}) => void;
/**
* Emitted when user finished sliding the item to either sides
* @param details Details
*/
onAction?: (details: {
/**
* Side to which sliding has taken effect
*/
side: "left" | "right" | "top" | "bottom";
/**
* When called, it resets the component to its initial non-slided state
*/
reset: () => void;
}) => void;
}
export interface QSlideItemSlots {
/**
* This is where item's sections go; Suggestion: QItemSection
*/
default: () => VNode[];
/**
* Left side content when sliding
*/
left: () => VNode[];
/**
* Right side content when sliding
*/
right: () => VNode[];
/**
* Top side content when sliding
*/
top: () => VNode[];
/**
* Bottom side content when sliding
*/
bottom: () => VNode[];
}
export interface QSlideItem extends ComponentPublicInstance {
/**
* Reset to initial state (not swiped to any side)
*/
reset: () => void;
}
export interface QSlideTransitionProps {
/**
* If set to true, the transition will be applied on the initial render.
*/
appear?: boolean | undefined;
/**
* Duration (in milliseconds) enabling animated scroll.
* Default value: 300
*/
duration?: number | undefined;
/**
* Emitted when component show animation is finished
*/
onShow?: () => void;
/**
* Emitted when component hide animation is finished
*/
onHide?: () => void;
}
export interface QSlideTransitionSlots {
/**
* This is where content goes
*/
default: () => VNode[];
}
export interface QSlideTransition extends ComponentPublicInstance {}
export interface QSliderProps {
/**
* Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
*/
name?: string | undefined;
/**
* Minimum value of the model; Set track's minimum value
* Default value: 0
*/
min?: number | undefined;
/**
* Maximum value of the model; Set track's maximum value
* Default value: 100
*/
max?: number | undefined;
/**
* Inner minimum value of the model; Use in case you need the model value to be inside of the track's min-max values; Needs to be higher or equal to 'min' prop; Defaults to 'min' prop
*/
innerMin?: number | undefined;
/**
* Inner maximum value of the model; Use in case you need the model value to be inside of the track's min-max values; Needs to be lower or equal to 'max' prop; Defaults to 'max' prop
*/
innerMax?: number | undefined;
/**
* Specify step amount between valid values (> 0.0); When step equals to 0 it defines infinite granularity
* Default value: 1
*/
step?: number | undefined;
/**
* Snap on valid values, rather than sliding freely; Suggestion: use with 'step' prop
*/
snap?: boolean | undefined;
/**
* Work in reverse (changes direction)
*/
reverse?: boolean | undefined;
/**
* Display in vertical direction
*/
vertical?: boolean | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
/**
* Color name for the track (can be 'transparent' too) from the Quasar Color Palette
*/
trackColor?: NamedColor | undefined;
/**
* Apply a pattern image on the track
*/
trackImg?: string | undefined;
/**
* Color name for the inner track (can be 'transparent' too) from the Quasar Color Palette
*/
innerTrackColor?: NamedColor | undefined;
/**
* Apply a pattern image on the inner track
*/
innerTrackImg?: string | undefined;
/**
* Color name for the selection bar (can be 'transparent' too) from the Quasar Color Palette
*/
selectionColor?: NamedColor | undefined;
/**
* Apply a pattern image on the selection bar
*/
selectionImg?: string | undefined;
/**
* Popup a label when user clicks/taps on the slider thumb and moves it
*/
label?: boolean | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
labelColor?: NamedColor | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
labelTextColor?: NamedColor | undefined;
/**
* Switch the position of the label (top <-> bottom or left <-> right)
*/
switchLabelSide?: boolean | undefined;
/**
* Always display the label
*/
labelAlways?: boolean | undefined;
/**
* Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)
*/
markers?: boolean | number | undefined;
/**
* Configure the marker labels (or show the default ones if 'true'); Array of definition Objects or Object with key-value where key is the model and the value is the marker label definition
* @param value The marker value to transform
* @returns Marker definition Object or directly a String for the label of the marker
*/
markerLabels?: SliderMarkerLabels | undefined;
/**
* CSS class(es) to apply to the marker labels container
*/
markerLabelsClass?: string | undefined;
/**
* Switch the position of the marker labels (top <-> bottom or left <-> right)
*/
switchMarkerLabelsSide?: boolean | undefined;
/**
* Track size (including CSS unit)
* Default value: '4px'
*/
trackSize?: string | undefined;
/**
* Thumb size (including CSS unit)
* Default value: '20px'
*/
thumbSize?: string | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
thumbColor?: NamedColor | undefined;
/**
* Set custom thumb svg path
* Default value: 'M 4, 10 a 6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0'
*/
thumbPath?: string | undefined;
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null | undefined;
/**
* Dense mode; occupies less space
*/
dense?: boolean | undefined;
/**
* Put component in disabled mode
*/
disable?: boolean | undefined;
/**
* Put component in readonly mode
*/
readonly?: boolean | undefined;
/**
* Tabindex HTML attribute value
*/
tabindex?: number | string | undefined;
/**
* Model of the component (must be between min/max); Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive
* Default value: null
*/
modelValue: number | null | undefined;
/**
* Override default label value
*/
labelValue?: string | number | undefined;
/**
* Emitted on lazy model value change (after user slides then releases the thumb)
* @param value New model value
*/
onChange?: (value: any) => void;
/**
* Triggered when user starts panning on the component
* @param phase Phase of panning
*/
onPan?: (phase: "start" | "end") => void;
/**
* Emitted when the component needs to change the model; Is also used by v-model
* @param value New model value
*/
"onUpdate:modelValue"?: (value: number | null) => void;
}
export interface QSliderSlots {
/**
* What should the menu display after filtering options and none are left to be displayed; Suggestion:
* @param scope
*/
"marker-label": (scope: {
/**
* Config for current marker label
*/
marker: SliderMarkerLabelConfig;
/**
* Array of marker label configs
*/
markerList: SliderMarkerLabelConfig[];
/**
* Object with key-value where key is the model and the value is the marker label config
*/
markerMap: SliderMarkerLabelObjectConfig;
/**
* Required CSS classes to be applied to the marker element
*/
classes: string;
/**
* Get CSS style Object to apply to a marker element at respective model value; For perf reasons, use only if requested model value is not already part of markerMap
* @param value The marker label equivalent model value
* @returns CSS style Object to apply to a marker element at respective model value
*/
getStyle: (value: number) => any;
}) => VNode[];
/**
* What should the menu display after filtering options and none are left to be displayed; Suggestion:
* @param scope
*/
"marker-label-group": (scope: {
/**
* Array of marker label configs
*/
markerList: SliderMarkerLabelConfig[];
/**
* Object with key-value where key is the model and the value is the marker label config
*/
markerMap: SliderMarkerLabelObjectConfig;
/**
* Required CSS classes to be applied to the marker element
*/
classes: string;
/**
* Get CSS style Object to apply to a marker element at respective model value; For perf reasons, use only if requested model value is not already part of markerMap
* @param value The marker label equivalent model value
* @returns CSS style Object to apply to a marker element at respective model value
*/
getStyle: (value: number) => any;
}) => VNode[];
}
export interface QSlider extends ComponentPublicInstance
{}
export interface QSpaceProps {}
export interface QSpaceSlots {}
export interface QSpace extends ComponentPublicInstance {}
export interface QSpinnerProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
/**
* Override value to use for stroke-width
* Default value: 5
*/
thickness?: number | undefined;
}
export interface QSpinnerSlots {}
export interface QSpinner extends ComponentPublicInstance {}
export interface QSpinnerAudioProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerAudioSlots {}
export interface QSpinnerAudio extends ComponentPublicInstance {}
export interface QSpinnerBallProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerBallSlots {}
export interface QSpinnerBall extends ComponentPublicInstance {}
export interface QSpinnerBarsProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerBarsSlots {}
export interface QSpinnerBars extends ComponentPublicInstance {}
export interface QSpinnerBoxProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerBoxSlots {}
export interface QSpinnerBox extends ComponentPublicInstance {}
export interface QSpinnerClockProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerClockSlots {}
export interface QSpinnerClock extends ComponentPublicInstance {}
export interface QSpinnerCommentProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerCommentSlots {}
export interface QSpinnerComment extends ComponentPublicInstance {}
export interface QSpinnerCubeProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerCubeSlots {}
export interface QSpinnerCube extends ComponentPublicInstance {}
export interface QSpinnerDotsProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerDotsSlots {}
export interface QSpinnerDots extends ComponentPublicInstance {}
export interface QSpinnerFacebookProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerFacebookSlots {}
export interface QSpinnerFacebook extends ComponentPublicInstance {}
export interface QSpinnerGearsProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerGearsSlots {}
export interface QSpinnerGears extends ComponentPublicInstance {}
export interface QSpinnerGridProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerGridSlots {}
export interface QSpinnerGrid extends ComponentPublicInstance {}
export interface QSpinnerHeartsProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerHeartsSlots {}
export interface QSpinnerHearts extends ComponentPublicInstance {}
export interface QSpinnerHourglassProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerHourglassSlots {}
export interface QSpinnerHourglass extends ComponentPublicInstance {}
export interface QSpinnerInfinityProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerInfinitySlots {}
export interface QSpinnerInfinity extends ComponentPublicInstance {}
export interface QSpinnerIosProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerIosSlots {}
export interface QSpinnerIos extends ComponentPublicInstance {}
export interface QSpinnerOrbitProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerOrbitSlots {}
export interface QSpinnerOrbit extends ComponentPublicInstance {}
export interface QSpinnerOvalProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerOvalSlots {}
export interface QSpinnerOval extends ComponentPublicInstance {}
export interface QSpinnerPieProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerPieSlots {}
export interface QSpinnerPie extends ComponentPublicInstance {}
export interface QSpinnerPuffProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerPuffSlots {}
export interface QSpinnerPuff extends ComponentPublicInstance {}
export interface QSpinnerRadioProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerRadioSlots {}
export interface QSpinnerRadio extends ComponentPublicInstance {}
export interface QSpinnerRingsProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerRingsSlots {}
export interface QSpinnerRings extends ComponentPublicInstance {}
export interface QSpinnerTailProps {
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
* Default value: '1em'
*/
size?: string | number | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
}
export interface QSpinnerTailSlots {}
export interface QSpinnerTail extends ComponentPublicInstance {}
export interface QSplitterProps {
/**
* Model of the component defining the size of first panel (or second if using reverse) in the unit specified (for '%' it's the split ratio percent - 0.0 < x < 100.0; for 'px' it's the size in px); Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive
*/
modelValue: number;
/**
* Apply the model size to the second panel (by default it applies to the first)
*/
reverse?: boolean | undefined;
/**
* CSS unit for the model
* Default value: '%'
*/
unit?: "%" | "px" | undefined;
/**
* Emit model while user is panning on the separator
*/
emitImmediately?: boolean | undefined;
/**
* Allows the splitter to split its two panels horizontally, instead of vertically
*/
horizontal?: boolean | undefined;
/**
* An array of two values representing the minimum and maximum split size of the two panels; When 'px' unit is set then you can use Infinity as the second value to make it unbound on the other side; Default value: for '%' unit it is [10, 90], while for 'px' unit it is [50, Infinity]
* Default value: # [10, 90]/[50, Infinity]
*/
limits?: readonly any[] | undefined;
/**
* Put component in disabled mode
*/
disable?: boolean | undefined;
/**
* Class definitions to be attributed to the 'before' panel
*/
beforeClass?: VueClassProp | undefined;
/**
* Class definitions to be attributed to the 'after' panel
*/
afterClass?: VueClassProp | undefined;
/**
* Class definitions to be attributed to the splitter separator
*/
separatorClass?: VueClassProp | undefined;
/**
* Style definitions to be attributed to the splitter separator
*/
separatorStyle?: VueStyleProp | undefined;
/**
* Applies a default lighter color on the separator; To be used when background is darker; Avoid using when you are overriding through separator-class or separator-style props
* Default value: null
*/
dark?: boolean | null | undefined;
/**
* Emitted when component's model value changes; Is also used by v-model
* @param value New model value (0.0 < x < 100.0) defining the ratio between panels
*/
"onUpdate:modelValue"?: (value: number) => void;
}
export interface QSplitterSlots {
/**
* Default slot in the devland unslotted content of the component; Suggestion: QTooltip, QMenu
*/
default: () => VNode[];
/**
* Content of the panel on left/top
*/
before: () => VNode[];
/**
* Content of the panel on right/bottom
*/
after: () => VNode[];
/**
* Content to be placed inside the separator; By default it is centered
*/
separator: () => VNode[];
}
export interface QSplitter extends ComponentPublicInstance {}
export interface QStepProps {
/**
* Panel name
*/
name: any;
/**
* Put component in disabled mode
*/
disable?: boolean | undefined;
/**
* Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
*/
icon?: string | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
/**
* Step title
*/
title: string;
/**
* Step’s additional information that appears beneath the title
*/
caption?: string | undefined;
/**
* Step's prefix (max 2 characters) which replaces the icon if step does not has error, is being edited or is marked as done
*/
prefix?: string | number | undefined;
/**
* Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix
*/
doneIcon?: string | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
doneColor?: NamedColor | undefined;
/**
* Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix
*/
activeIcon?: string | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
activeColor?: NamedColor | undefined;
/**
* Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix
*/
errorIcon?: string | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
errorColor?: NamedColor | undefined;
/**
* Allow navigation through the header
* Default value: true
*/
headerNav?: boolean | undefined;
/**
* Mark the step as 'done'
*/
done?: boolean | undefined;
/**
* Mark the step as having an error
*/
error?: boolean | undefined;
}
export interface QStepSlots {
/**
* The content of the step; Can also contain a QStepperNavigation if you want to handle step navigation and don't have a global navigation in place
*/
default: () => VNode[];
}
export interface QStep extends ComponentPublicInstance {}
export interface QStepperProps {
/**
* Model of the component defining the current panel's name; If a Number is used, it does not define the panel's index, but rather the panel's name which can also be an Integer; Either use this property (along with a listener for 'update:model-value' event) OR use the v-model directive.
*/
modelValue: any;
/**
* Equivalent to using Vue's native component on the content
*/
keepAlive?: boolean | undefined;
/**
* Equivalent to using Vue's native include prop for ; Values must be valid Vue component names
*/
keepAliveInclude?: string | readonly any[] | RegExp | undefined;
/**
* Equivalent to using Vue's native exclude prop for ; Values must be valid Vue component names
*/
keepAliveExclude?: string | readonly any[] | RegExp | undefined;
/**
* Equivalent to using Vue's native max prop for
*/
keepAliveMax?: number | undefined;
/**
* Enable transitions between panel (also see 'transition-prev' and 'transition-next' props)
*/
animated?: boolean | undefined;
/**
* Makes component appear as infinite (when reaching last panel, next one will become the first one)
*/
infinite?: boolean | undefined;
/**
* Enable swipe events (may interfere with content's touch/mouse events)
*/
swipeable?: boolean | undefined;
/**
* Put Stepper in vertical mode (instead of horizontal by default)
*/
vertical?: boolean | undefined;
/**
* One of Quasar's embedded transitions (has effect only if 'animated' prop is set)
* Default value: # slide-right/slide-down
*/
transitionPrev?: string | undefined;
/**
* One of Quasar's embedded transitions (has effect only if 'animated' prop is set)
* Default value: # slide-left/slide-up
*/
transitionNext?: string | undefined;
/**
* Transition duration (in milliseconds, without unit)
* Default value: 300
*/
transitionDuration?: string | number | undefined;
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null | undefined;
/**
* Applies a 'flat' design (no default shadow)
*/
flat?: boolean | undefined;
/**
* Applies a default border to the component
*/
bordered?: boolean | undefined;
/**
* Use alternative labels - stacks the icon on top of the label (applies only to horizontal stepper)
*/
alternativeLabels?: boolean | undefined;
/**
* Allow navigation through the header
*/
headerNav?: boolean | undefined;
/**
* Hide header labels on narrow windows
*/
contracted?: boolean | undefined;
/**
* Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
*/
inactiveIcon?: string | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
inactiveColor?: NamedColor | undefined;
/**
* Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix
*/
doneIcon?: string | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
doneColor?: NamedColor | undefined;
/**
* Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix
*/
activeIcon?: string | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
activeColor?: NamedColor | undefined;
/**
* Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix
*/
errorIcon?: string | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
errorColor?: NamedColor | undefined;
/**
* Class definitions to be attributed to the header
*/
headerClass?: string | undefined;
/**
* Emitted when the component changes the model; This event _isn't_ fired if the model is changed externally; Is also used by v-model
* @param value New current panel name
*/
"onUpdate:modelValue"?: (value: string | number) => void;
/**
* Emitted before transitioning to a new panel
* @param newVal Panel name towards transition is going
* @param oldVal Panel name from which transition is happening
*/
onBeforeTransition?: (newVal: string | number, oldVal: string | number) => void;
/**
* Emitted after component transitioned to a new panel
* @param newVal Panel name towards transition has occurred
* @param oldVal Panel name from which transition has happened
*/
onTransition?: (newVal: string | number, oldVal: string | number) => void;
}
export interface QStepperSlots {
/**
* Suggestion: QStep
*/
default: () => VNode[];
/**
* Slot specific for the global navigation; Suggestion: QStepperNavigation
*/
navigation: () => VNode[];
/**
* Slot specific for putting a message on top of each step (if horizontal stepper) or above steps (if vertical); Suggestion: QBanner, div.q-pa-lg
*/
message: () => VNode[];
}
export interface QStepper extends ComponentPublicInstance {
/**
* Go to next panel
*/
next: () => void;
/**
* Go to previous panel
*/
previous: () => void;
/**
* Go to specific panel
* @param panelName Panel's name, which may be a String or Number; Number does not refers to panel index, but to its name, which may be an Integer
*/
goTo: (panelName: string | number) => void;
}
export interface QStepperNavigationProps {}
export interface QStepperNavigationSlots {
/**
* The content of the custom navigation, child of a QStep or of a QStepper (globally, through 'navigation' slot)
*/
default: () => VNode[];
}
export interface QStepperNavigation extends ComponentPublicInstance {}
export interface QTabPanelProps {
/**
* Panel name
*/
name: any;
/**
* Put component in disabled mode
*/
disable?: boolean | undefined;
}
export interface QTabPanelSlots {
/**
* Default slot in the devland unslotted content of the component
*/
default: () => VNode[];
}
export interface QTabPanel extends ComponentPublicInstance {}
export interface QTabPanelsProps {
/**
* Model of the component defining the current panel's name; If a Number is used, it does not define the panel's index, but rather the panel's name which can also be an Integer; Either use this property (along with a listener for 'update:model-value' event) OR use the v-model directive.
*/
modelValue: any;
/**
* Equivalent to using Vue's native component on the content
*/
keepAlive?: boolean | undefined;
/**
* Equivalent to using Vue's native include prop for ; Values must be valid Vue component names
*/
keepAliveInclude?: string | readonly any[] | RegExp | undefined;
/**
* Equivalent to using Vue's native exclude prop for ; Values must be valid Vue component names
*/
keepAliveExclude?: string | readonly any[] | RegExp | undefined;
/**
* Equivalent to using Vue's native max prop for
*/
keepAliveMax?: number | undefined;
/**
* Enable transitions between panel (also see 'transition-prev' and 'transition-next' props)
*/
animated?: boolean | undefined;
/**
* Makes component appear as infinite (when reaching last panel, next one will become the first one)
*/
infinite?: boolean | undefined;
/**
* Enable swipe events (may interfere with content's touch/mouse events)
*/
swipeable?: boolean | undefined;
/**
* Default transitions and swipe actions will be on the vertical axis
*/
vertical?: boolean | undefined;
/**
* One of Quasar's embedded transitions (has effect only if 'animated' prop is set)
* Default value: # slide-right/slide-down
*/
transitionPrev?: string | undefined;
/**
* One of Quasar's embedded transitions (has effect only if 'animated' prop is set)
* Default value: # slide-left/slide-up
*/
transitionNext?: string | undefined;
/**
* Transition duration (in milliseconds, without unit)
* Default value: 300
*/
transitionDuration?: string | number | undefined;
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null | undefined;
/**
* Emitted when the component changes the model; This event _isn't_ fired if the model is changed externally; Is also used by v-model
* @param value New current panel name
*/
"onUpdate:modelValue"?: (value: string | number) => void;
/**
* Emitted before transitioning to a new panel
* @param newVal Panel name towards transition is going
* @param oldVal Panel name from which transition is happening
*/
onBeforeTransition?: (newVal: string | number, oldVal: string | number) => void;
/**
* Emitted after component transitioned to a new panel
* @param newVal Panel name towards transition has occurred
* @param oldVal Panel name from which transition has happened
*/
onTransition?: (newVal: string | number, oldVal: string | number) => void;
}
export interface QTabPanelsSlots {
/**
* Default slot in the devland unslotted content of the component
*/
default: () => VNode[];
}
export interface QTabPanels extends ComponentPublicInstance {
/**
* Go to next panel
*/
next: () => void;
/**
* Go to previous panel
*/
previous: () => void;
/**
* Go to specific panel
* @param panelName Panel's name, which may be a String or Number; Number does not refers to panel index, but to its name, which may be an Integer
*/
goTo: (panelName: string | number) => void;
}
export interface QTableProps {
/**
* Fullscreen mode
*/
fullscreen?: boolean | undefined;
/**
* Changing route app won't exit fullscreen
*/
noRouteFullscreenExit?: boolean | undefined;
/**
* Rows of data to display
*/
rows: readonly any[];
/**
* Property of each row that defines the unique key of each row (the result must be a primitive, not Object, Array, etc); The value of property must be string or a function taking a row and returning the desired (nested) key in the row; If supplying a function then for best performance, reference it from your scope and do not define it inline
* Default value: 'id'
* @param row The current row being processed
* @returns Current row's key
*/
rowKey?: string | ((row: any) => any) | undefined;
/**
* Display data using QVirtualScroll (for non-grid mode only)
*/
virtualScroll?: boolean | undefined;
/**
* CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one
*/
virtualScrollTarget?: Element | string | undefined;
/**
* Minimum number of rows to render in the virtual list
* Default value: 10
*/
virtualScrollSliceSize?: number | string | null | undefined;
/**
* Ratio of number of rows in visible zone to render before it
* Default value: 1
*/
virtualScrollSliceRatioBefore?: number | string | undefined;
/**
* Ratio of number of rows in visible zone to render after it
* Default value: 1
*/
virtualScrollSliceRatioAfter?: number | string | undefined;
/**
* Default size in pixels of a row; This value is used for rendering the initial table; Try to use a value close to the minimum size of a row; Default value: 48 (24 if dense)
* Default value: # 48/24
*/
virtualScrollItemSize?: number | string | undefined;
/**
* Size in pixels of the sticky header (if using one); A correct value will improve scroll precision; Will be also used for non-virtual-scroll tables for fixing top alignment when using scrollTo method
* Default value: 0
*/
virtualScrollStickySizeStart?: number | string | undefined;
/**
* Size in pixels of the sticky footer part (if using one); A correct value will improve scroll precision
* Default value: 0
*/
virtualScrollStickySizeEnd?: number | string | undefined;
/**
* The number of columns in the table (you need this if you use table-layout: fixed)
*/
tableColspan?: number | string | undefined;
/**
* Color name for component from the Quasar Color Palette
* Default value: 'grey-8'
*/
color?: NamedColor | undefined;
/**
* Icon name following Quasar convention for stepping to first page; Make sure you have the icon library installed unless you are using 'img:' prefix
*/
iconFirstPage?: string | undefined;
/**
* Icon name following Quasar convention for stepping to previous page; Make sure you have the icon library installed unless you are using 'img:' prefix
*/
iconPrevPage?: string | undefined;
/**
* Icon name following Quasar convention for stepping to next page; Make sure you have the icon library installed unless you are using 'img:' prefix
*/
iconNextPage?: string | undefined;
/**
* Icon name following Quasar convention for stepping to last page; Make sure you have the icon library installed unless you are using 'img:' prefix
*/
iconLastPage?: string | undefined;
/**
* Display data as a grid instead of the default table
*/
grid?: boolean | undefined;
/**
* Display header for grid-mode also
*/
gridHeader?: boolean | undefined;
/**
* Dense mode; Connect with $q.screen for responsive behavior
*/
dense?: boolean | undefined;
/**
* The column definitions (Array of Objects)
*/
columns?:
| {
/**
* 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
* Default value: false
*/
sortable?: boolean;
/**
* Compare function if you have some custom data or want a specific way to compare two rows; rows with null/undefined values will get sorted without triggering this method (use 'rawSort' instead if you want to handle those values too)
* @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;
/**
* Compare function if you have some custom data or want a specific way to compare two rows; includes rows with null/undefined values (use 'sort' instead if you don't want that)
* @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
*/
rawSort?: (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;
}[]
| undefined;
/**
* Array of Strings defining column names ('name' property of each column from 'columns' prop definitions); Columns marked as 'required' are not affected by this property
*/
visibleColumns?: readonly any[] | undefined;
/**
* Put Table into 'loading' state; Notify the user something is happening behind the scenes
*/
loading?: boolean | undefined;
/**
* Table title
*/
title?: string | undefined;
/**
* Hide table header layer
*/
hideHeader?: boolean | undefined;
/**
* Hide table bottom layer regardless of what it has to display
*/
hideBottom?: boolean | undefined;
/**
* Hide the selected rows banner (if any)
*/
hideSelectedBanner?: boolean | undefined;
/**
* Hide the default no data bottom layer
*/
hideNoData?: boolean | undefined;
/**
* Hide the pagination controls at the bottom
*/
hidePagination?: boolean | undefined;
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null | undefined;
/**
* Applies a 'flat' design (no default shadow)
*/
flat?: boolean | undefined;
/**
* Applies a default border to the component
*/
bordered?: boolean | undefined;
/**
* Removes border-radius so borders are squared
*/
square?: boolean | undefined;
/**
* Use a separator/border between rows, columns or all cells
* Default value: 'horizontal'
*/
separator?: "horizontal" | "vertical" | "cell" | "none" | undefined;
/**
* Wrap text within table cells
*/
wrapCells?: boolean | undefined;
/**
* Skip the third state (unsorted) when user toggles column sort direction
*/
binaryStateSort?: boolean | undefined;
/**
* Set column sort order: 'ad' (ascending-descending) or 'da' (descending-ascending); It gets applied to all columns unless a column has its own sortOrder specified in the 'columns' definition prop
* Default value: 'ad'
*/
columnSortOrder?: "ad" | "da" | undefined;
/**
* Override default text to display when no data is available
*/
noDataLabel?: string | undefined;
/**
* Override default text to display when user filters the table and no matched results are found
*/
noResultsLabel?: string | undefined;
/**
* Override default text to display when table is in loading state (see 'loading' prop)
*/
loadingLabel?: string | undefined;
/**
* Text to display when user selected at least one row; For best performance, reference it from your scope and do not define it inline
* @param numberOfRows Number of rows available
* @returns Label to display
*/
selectedRowsLabel?: ((numberOfRows: number) => string) | undefined;
/**
* Text to override default rows per page label at bottom of table
*/
rowsPerPageLabel?: string | undefined;
/**
* Text to override default pagination label at bottom of table (unless 'pagination' scoped slot is used); For best performance, reference it from your scope and do not define it inline
* @param firstRowIndex Index of first displayed row
* @param endRowIndex Index of last displayed row
* @param totalRowsNumber Number of total rows available in data
* @returns Label to display
*/
paginationLabel?:
| ((firstRowIndex: number, endRowIndex: number, totalRowsNumber: number) => string)
| undefined;
/**
* CSS style to apply to native HTML element's wrapper (which is a DIV)
*/
tableStyle?: VueStyleProp | undefined;
/**
* CSS classes to apply to native HTML element's wrapper (which is a DIV)
*/
tableClass?: VueClassProp | undefined;
/**
* CSS style to apply to header of native HTML (which is a TR)
*/
tableHeaderStyle?: VueStyleProp | undefined;
/**
* CSS classes to apply to header of native HTML (which is a TR)
*/
tableHeaderClass?: VueClassProp | undefined;
/**
* CSS style to apply to the table rows (which are TR elements); For best performance, reference it from your scope and do not define it inline
* @param row The current row being processed
* @returns CSS style to apply to the row
*/
tableRowStyleFn?: ((row: any) => string) | undefined;
/**
* CSS class(es) to apply the table rows (which are TR elements); For best performance, reference it from your scope and do not define it inline
* @param row The current row being processed
* @returns CSS class(es) to apply to the row, space separated
*/
tableRowClassFn?: ((row: any) => string) | undefined;
/**
* CSS style to apply to the cards container (when in grid mode)
*/
cardContainerStyle?: VueStyleProp | undefined;
/**
* CSS classes to apply to the cards container (when in grid mode)
*/
cardContainerClass?: VueClassProp | undefined;
/**
* CSS style to apply to the card (when in grid mode) or container card (when not in grid mode)
*/
cardStyle?: VueStyleProp | undefined;
/**
* CSS classes to apply to the card (when in grid mode) or container card (when not in grid mode)
*/
cardClass?: VueClassProp | undefined;
/**
* (Grid mode only) CSS style to apply to the row/record card; Has no effect when the 'item' slot is used; For best performance, reference it from your scope and do not define it inline
* @param row The current row/record being processed
* @returns CSS style to apply to the row/record
*/
cardStyleFn?: ((row: any) => string) | undefined;
/**
* (Grid mode only) CSS class(es) to apply the row/record card; Has no effect when the 'item' slot is used; For best performance, reference it from your scope and do not define it inline
* @param row The current row/record being processed
* @returns CSS class(es) to apply to the row, space separated
*/
cardClassFn?: ((row: any) => string) | undefined;
/**
* CSS classes to apply to the title (if using 'title' prop)
*/
titleClass?: VueClassProp | undefined;
/**
* String/Object to filter table with; When using an Object it requires 'filter-method' to also be specified since it will be a custom filtering
*/
filter?: string | any | undefined;
/**
* The actual filtering mechanism; For best performance, reference it from your scope and do not define it inline
* @param rows Array of rows
* @param terms Terms to filter with (is essentially the 'filter' prop value)
* @param cols Column definitions
* @param getCellValue Optional function to get a cell value
* @returns Filtered rows
*/
filterMethod?:
| ((
rows: readonly any[],
terms: string | any,
cols: readonly any[],
getCellValue: (col: any, row: any) => any,
) => readonly any[])
| undefined;
/**
* Pagination object; You can also use the 'v-model:pagination' for synching; When not synching it simply initializes the pagination on first render
*/
pagination?:
| {
/**
* Column name (from column definition)
*/
sortBy?: string | null;
/**
* Is sorting in descending order?
*/
descending?: boolean;
/**
* Page number (1-based)
*/
page?: number;
/**
* How many rows per page? 0 means Infinite
*/
rowsPerPage?: number;
/**
* For server-side fetching only. How many total database rows are there to be added to the table. If set, causes the QTable to emit @request when data is required.
*/
rowsNumber?: number;
}
| undefined;
/**
* Options for user to pick (Numbers); Number 0 means 'Show all rows in one page'
* Default value: [5, 7, 10, 15, 20, 25, 50, 0]
*/
rowsPerPageOptions?: readonly any[] | undefined;
/**
* Selection type
* Default value: 'none'
*/
selection?: "single" | "multiple" | "none" | undefined;
/**
* Keeps the user selection array
* Default value: []
*/
selected?: any[] | undefined;
/**
* Keeps the array with expanded rows keys
*/
expanded?: any[] | undefined;
/**
* The actual sort mechanism. Function (rows, sortBy, descending) => sorted rows; For best performance, reference it from your scope and do not define it inline
* @param rows Array with rows
* @param sortBy Column name (from column definition)
* @param descending Is sorting in descending order?
* @returns Sorted rows
*/
sortMethod?:
| ((rows: readonly any[], sortBy: string, descending: boolean) => readonly any[])
| undefined;
/**
* Emitted when fullscreen state changes
* @param value Fullscreen state (showing/hidden)
*/
onFullscreen?: (value: boolean) => void;
/**
* Used by Vue on 'v-model:fullscreen' prop for updating its value
* @param value Fullscreen state (showing/hidden)
*/
"onUpdate:fullscreen"?: (value: boolean) => void;
/**
* Emitted when user clicks/taps on a row; Is not emitted when using body/row/item scoped slots
* @param evt JS event object
* @param row The row upon which user has clicked/tapped
* @param index Index of the row in the current page
*/
onRowClick?: (evt: Event, row: any, index: number) => void;
/**
* Emitted when user quickly double clicks/taps on a row; Is not emitted when using body/row/item scoped slots; Please check JS dblclick event support before using
* @param evt JS event object
* @param row The row upon which user has double clicked/tapped
* @param index Index of the row in the current page
*/
onRowDblclick?: (evt: Event, row: any, index: number) => void;
/**
* Emitted when user right clicks/long taps on a row; Is not emitted when using body/row/item scoped slots
* @param evt JS event object
* @param row The row upon which user has right clicked/long tapped
* @param index Index of the row in the current page
*/
onRowContextmenu?: (evt: Event, row: any, index: number) => void;
/**
* Emitted when a server request is triggered
* @param requestProp Props of the request
*/
onRequest?: (requestProp: {
/**
* Pagination object
*/
pagination: {
/**
* Column name (from column definition)
*/
sortBy: string;
/**
* Is sorting in descending order?
*/
descending: boolean;
/**
* Page number (1-based)
*/
page: number;
/**
* How many rows per page? 0 means Infinite
*/
rowsPerPage: number;
/**
* For server-side fetching only. How many total database rows are there to be added to the table.
*/
rowsNumber?: number;
};
/**
* String/Object to filter table with (the 'filter' prop)
*/
filter?: string | any;
/**
* Function to get a cell value
* @param col Column name from column definitions
* @param row The row object
* @returns Parsed/Processed cell value
*/
getCellValue: (col: any, row: any) => any;
}) => void;
/**
* Emitted when user selects/unselects row(s)
* @param details Selection details
*/
onSelection?: (details: {
/**
* Array of row objects that were selected/unselected
*/
rows: readonly any[];
/**
* Array of the keys of rows that were selected/unselected
*/
keys: readonly any[];
/**
* Were the rows added to selection (true) or removed from selection (false)
*/
added: boolean;
/**
* JS event object
*/
evt: Event;
}) => void;
/**
* Used by Vue on 'v-model:pagination' for updating its value
* @param newPagination The updated pagination object
*/
"onUpdate:pagination"?: (newPagination: {
/**
* Column name (from column definition)
*/
sortBy: string | null;
/**
* Is sorting in descending order?
*/
descending: boolean;
/**
* Page number (1-based)
*/
page: number;
/**
* How many rows per page? 0 means Infinite
*/
rowsPerPage: number;
/**
* For server-side fetching only. How many total database rows are there to be added to the table.
*/
rowsNumber?: number;
}) => void;
/**
* Used by Vue on 'v-model:selected' prop for updating its value
* @param newSelected The updated selected array
*/
"onUpdate:selected"?: (newSelected: readonly any[]) => void;
/**
* Used by Vue on 'v-model:expanded' prop for updating its value
* @param newExpanded The updated expanded array
*/
"onUpdate:expanded"?: (newExpanded: readonly any[]) => void;
/**
* Emitted when the virtual scroll occurs, if using virtual scroll
* @param details Object of properties on the new scroll position
*/
onVirtualScroll?: (details: {
/**
* Index of the list item that was scrolled into view (0 based)
*/
index: number;
/**
* The index of the first list item that is rendered (0 based)
*/
from: number;
/**
* The index of the last list item that is rendered (0 based)
*/
to: number;
/**
* Direction of change
*/
direction: "increase" | "decrease";
/**
* Vue reference to the underlying QVirtualScroll instance
*/
ref: Component;
}) => void;
}
export interface QTableSlots {
/**
* Override default effect when table is in loading state; Suggestion: QInnerLoading
*/
loading: () => VNode[];
/**
* Slot to use for defining an item when in 'grid' mode; Suggestion: QCard
* @param scope
*/
item: (scope: {
/**
* Row/Item's key
*/
key: any;
/**
* Row/Item object
*/
row: any;
/**
* Row/Item's index (0 based) in the filtered and sorted table
*/
rowIndex: number;
/**
* Row/Item's index (0 based) in the current page of the filtered and sorted table
*/
pageIndex: number;
/**
* Column definitions
*/
cols: any;
/**
* Column mapping (key is column name, value is column object)
*/
colsMap: any;
/**
* Trigger a table sort
* @param col Column name or column definition object
*/
sort: (col: string | any) => void;
/**
* (Only if using selection) Is row/item selected? Can directly be assigned new Boolean value which changes selection state
*/
selected: boolean;
/**
* Is row/item expanded? Can directly be assigned new Boolean value which changes expanded state
*/
expand: boolean;
/**
* Color name for component from the Quasar Color Palette
*/
color: NamedColor;
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null;
/**
* Dense mode; occupies less space
*/
dense: boolean;
}) => VNode[];
/**
* Slot to define how a body row looks like; Suggestion: QTr + Td
* @param scope
*/
body: (scope: {
/**
* Row's key
*/
key: any;
/**
* Row object
*/
row: any;
/**
* Row's index (0 based) in the filtered and sorted table
*/
rowIndex: number;
/**
* Row's index (0 based) in the current page of the filtered and sorted table
*/
pageIndex: number;
/**
* Column definitions
*/
cols: any;
/**
* Column mapping (key is column name, value is column object)
*/
colsMap: any;
/**
* Trigger a table sort
* @param col Column name or column definition object
*/
sort: (col: string | any) => void;
/**
* (Only if using selection) Is row selected? Can directly be assigned new Boolean value which changes selection state
*/
selected: boolean;
/**
* Is row expanded? Can directly be assigned new Boolean value which changes expanded state
*/
expand: boolean;
/**
* Color name for component from the Quasar Color Palette
*/
color: NamedColor;
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null;
/**
* Dense mode; occupies less space
*/
dense: boolean;
/**
* Internal prop passed down to QTr (if used)
*/
__trClass: string;
/**
* Internal prop passed down to QTr (if used)
*/
__trStyle?: string;
}) => VNode[];
/**
* Slot to define how all body cells look like; Suggestion: QTd
* @param scope
*/
"body-cell": (scope: {
/**
* Column definition for column associated with table cell
*/
col: any;
/**
* Parsed/Formatted value of table cell
*/
value: any;
/**
* Row's key
*/
key: any;
/**
* Row object
*/
row: any;
/**
* Row's index (0 based) in the filtered and sorted table
*/
rowIndex: number;
/**
* Row's index (0 based) in the current page of the filtered and sorted table
*/
pageIndex: number;
/**
* Column definitions
*/
cols: any;
/**
* Column mapping (key is column name, value is column object)
*/
colsMap: any;
/**
* Trigger a table sort
* @param col Column name or column definition object
*/
sort: (col: string | any) => void;
/**
* (Only if using selection) Is row selected? Can directly be assigned new Boolean value which changes selection state
*/
selected: boolean;
/**
* Is row expanded? Can directly be assigned new Boolean value which changes expanded state
*/
expand: boolean;
/**
* Color name for component from the Quasar Color Palette
*/
color: NamedColor;
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null;
/**
* Dense mode; occupies less space
*/
dense: boolean;
}) => VNode[];
/**
* Slot to define how a specific column cell looks like; replace '[name]' with column name (from columns definition object)
* @param scope
*/
[key: `body-cell-${string}`]: (scope: {
/**
* Column definition for column associated with table cell
*/
col: any;
/**
* Parsed/Formatted value of table cell
*/
value: any;
/**
* Row's key
*/
key: any;
/**
* Row object
*/
row: any;
/**
* Row's index (0 based) in the filtered and sorted table
*/
rowIndex: number;
/**
* Row's index (0 based) in the current page of the filtered and sorted table
*/
pageIndex: number;
/**
* Column definitions
*/
cols: any;
/**
* Column mapping (key is column name, value is column object)
*/
colsMap: any;
/**
* Trigger a table sort
* @param col Column name or column definition object
*/
sort: (col: string | any) => void;
/**
* (Only if using selection) Is row selected? Can directly be assigned new Boolean value which changes selection state
*/
selected: boolean;
/**
* Is row expanded? Can directly be assigned new Boolean value which changes expanded state
*/
expand: boolean;
/**
* Color name for component from the Quasar Color Palette
*/
color: NamedColor;
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null;
/**
* Dense mode; occupies less space
*/
dense: boolean;
}) => VNode[];
/**
* Slot to define how header looks like; Suggestion: QTr + QTh
* @param scope
*/
header: (scope: {
/**
* Column definitions
*/
cols: any;
/**
* Column mapping (key is column name, value is column object)
*/
colsMap: any;
/**
* Trigger a table sort
* @param col Column name or column definition object
*/
sort: (col: string | any) => void;
/**
* (Only if using selection) Is row selected? Can directly be assigned new Boolean value which changes selection state
*/
selected: boolean;
/**
* Is row expanded? Can directly be assigned new Boolean value which changes expanded state
*/
expand: boolean;
/**
* Color name for component from the Quasar Color Palette
*/
color: NamedColor;
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null;
/**
* Dense mode; occupies less space
*/
dense: boolean;
/**
* Internal prop passed down to QTr (if used)
*/
__trClass: string;
/**
* Internal prop passed down to QTh (if used); Always 'true'
*/
header: boolean;
}) => VNode[];
/**
* Slot to define how each header cell looks like; Suggestion: QTh
* @param scope
*/
"header-cell": (scope: {
/**
* Column definition associated to header cell
*/
col: any;
/**
* Column definitions
*/
cols: any;
/**
* Column mapping (key is column name, value is column object)
*/
colsMap: any;
/**
* Trigger a table sort
* @param col Column name or column definition object
*/
sort: (col: string | any) => void;
/**
* (Only if using selection) Is row selected? Can directly be assigned new Boolean value which changes selection state
*/
selected: boolean;
/**
* Is row expanded? Can directly be assigned new Boolean value which changes expanded state
*/
expand: boolean;
/**
* Color name for component from the Quasar Color Palette
*/
color: NamedColor;
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null;
/**
* Dense mode; occupies less space
*/
dense: boolean;
}) => VNode[];
/**
* Slot to define how a specific header cell looks like; replace '[name]' with column name (from columns definition object)
* @param scope
*/
[key: `header-cell-${string}`]: (scope: {
/**
* Column definition associated to header cell
*/
col: any;
/**
* Column definitions
*/
cols: any;
/**
* Column mapping (key is column name, value is column object)
*/
colsMap: any;
/**
* Trigger a table sort
* @param col Column name or column definition object
*/
sort: (col: string | any) => void;
/**
* (Only if using selection) Is row selected? Can directly be assigned new Boolean value which changes selection state
*/
selected: boolean;
/**
* Is row expanded? Can directly be assigned new Boolean value which changes expanded state
*/
expand: boolean;
/**
* Color name for component from the Quasar Color Palette
*/
color: NamedColor;
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null;
/**
* Dense mode; occupies less space
*/
dense: boolean;
}) => VNode[];
/**
* Slot to define how body selection column looks like; Suggestion: QCheckbox
* @param scope
*/
"body-selection": (scope: {
/**
* Row's key
*/
key: any;
/**
* Row object
*/
row: any;
/**
* Row's index (0 based) in the filtered and sorted table
*/
rowIndex: number;
/**
* Row's index (0 based) in the current page of the filtered and sorted table
*/
pageIndex: number;
/**
* Column definitions
*/
cols: any;
/**
* Column mapping (key is column name, value is column object)
*/
colsMap: any;
/**
* Trigger a table sort
* @param col Column name or column definition object
*/
sort: (col: string | any) => void;
/**
* (Only if using selection) Is row selected? Can directly be assigned new Boolean value which changes selection state
*/
selected: boolean;
/**
* Is row expanded? Can directly be assigned new Boolean value which changes expanded state
*/
expand: boolean;
/**
* Color name for component from the Quasar Color Palette
*/
color: NamedColor;
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null;
/**
* Dense mode; occupies less space
*/
dense: boolean;
}) => VNode[];
/**
* Slot to define how header selection column looks like (available only for multiple selection mode); Suggestion: QCheckbox
* @param scope
*/
"header-selection": (scope: {
/**
* Column definitions
*/
cols: any;
/**
* Column mapping (key is column name, value is column object)
*/
colsMap: any;
/**
* Trigger a table sort
* @param col Column name or column definition object
*/
sort: (col: string | any) => void;
/**
* (Only if using selection) Is row selected? Can directly be assigned new Boolean value which changes selection state
*/
selected: boolean;
/**
* Is row expanded? Can directly be assigned new Boolean value which changes expanded state
*/
expand: boolean;
/**
* Color name for component from the Quasar Color Palette
*/
color: NamedColor;
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null;
/**
* Dense mode; occupies less space
*/
dense: boolean;
}) => VNode[];
/**
* Slot to define how top extra row looks like
* @param scope
*/
"top-row": (scope: {
/**
* Column definitions
*/
cols: any;
}) => VNode[];
/**
* Slot to define how bottom extra row looks like
* @param scope
*/
"bottom-row": (scope: {
/**
* Column definitions
*/
cols: any;
}) => VNode[];
/**
* Slot to define how table top looks like
* @param scope
*/
top: (scope: {
/**
* Pagination object
*/
pagination: {
/**
* Column name (from column definition)
*/
sortBy: string | null;
/**
* Is sorting in descending order?
*/
descending: boolean;
/**
* Page number (1-based)
*/
page: number;
/**
* How many rows per page? 0 means Infinite
*/
rowsPerPage: number;
/**
* For server-side fetching only. How many total database rows are there to be added to the table.
*/
rowsNumber?: number;
};
/**
* Number of pages available
*/
pagesNumber: number;
/**
* Are we on first page?
*/
isFirstPage: boolean;
/**
* Are we on last page?
*/
isLastPage: boolean;
/**
* Navigates to first page
*/
firstPage: () => void;
/**
* Navigates to previous page, if available
*/
prevPage: () => void;
/**
* Navigates to next page, if available
*/
nextPage: () => void;
/**
* Navigates to last page
*/
lastPage: () => void;
/**
* Is table in fullscreen mode?
*/
inFullscreen: boolean;
/**
* Toggles fullscreen mode
*/
toggleFullscreen: () => void;
}) => VNode[];
/**
* Slot to define how table bottom looks like
* @param scope
*/
bottom: (scope: {
/**
* Pagination object
*/
pagination: {
/**
* Column name (from column definition)
*/
sortBy: string | null;
/**
* Is sorting in descending order?
*/
descending: boolean;
/**
* Page number (1-based)
*/
page: number;
/**
* How many rows per page? 0 means Infinite
*/
rowsPerPage: number;
/**
* For server-side fetching only. How many total database rows are there to be added to the table.
*/
rowsNumber?: number;
};
/**
* Number of pages available
*/
pagesNumber: number;
/**
* Are we on first page?
*/
isFirstPage: boolean;
/**
* Are we on last page?
*/
isLastPage: boolean;
/**
* Navigates to first page
*/
firstPage: () => void;
/**
* Navigates to previous page, if available
*/
prevPage: () => void;
/**
* Navigates to next page, if available
*/
nextPage: () => void;
/**
* Navigates to last page
*/
lastPage: () => void;
/**
* Is table in fullscreen mode?
*/
inFullscreen: boolean;
/**
* Toggles fullscreen mode
*/
toggleFullscreen: () => void;
}) => VNode[];
/**
* Slot to override default pagination label and buttons
* @param scope
*/
pagination: (scope: {
/**
* Pagination object
*/
pagination: {
/**
* Column name (from column definition)
*/
sortBy: string | null;
/**
* Is sorting in descending order?
*/
descending: boolean;
/**
* Page number (1-based)
*/
page: number;
/**
* How many rows per page? 0 means Infinite
*/
rowsPerPage: number;
/**
* For server-side fetching only. How many total database rows are there to be added to the table.
*/
rowsNumber?: number;
};
/**
* Number of pages available
*/
pagesNumber: number;
/**
* Are we on first page?
*/
isFirstPage: boolean;
/**
* Are we on last page?
*/
isLastPage: boolean;
/**
* Navigates to first page
*/
firstPage: () => void;
/**
* Navigates to previous page, if available
*/
prevPage: () => void;
/**
* Navigates to next page, if available
*/
nextPage: () => void;
/**
* Navigates to last page
*/
lastPage: () => void;
/**
* Is table in fullscreen mode?
*/
inFullscreen: boolean;
/**
* Toggles fullscreen mode
*/
toggleFullscreen: () => void;
}) => VNode[];
/**
* Slot to define how left part of the table top looks like
* @param scope
*/
"top-left": (scope: {
/**
* Pagination object
*/
pagination: {
/**
* Column name (from column definition)
*/
sortBy: string | null;
/**
* Is sorting in descending order?
*/
descending: boolean;
/**
* Page number (1-based)
*/
page: number;
/**
* How many rows per page? 0 means Infinite
*/
rowsPerPage: number;
/**
* For server-side fetching only. How many total database rows are there to be added to the table.
*/
rowsNumber?: number;
};
/**
* Number of pages available
*/
pagesNumber: number;
/**
* Are we on first page?
*/
isFirstPage: boolean;
/**
* Are we on last page?
*/
isLastPage: boolean;
/**
* Navigates to first page
*/
firstPage: () => void;
/**
* Navigates to previous page, if available
*/
prevPage: () => void;
/**
* Navigates to next page, if available
*/
nextPage: () => void;
/**
* Navigates to last page
*/
lastPage: () => void;
/**
* Is table in fullscreen mode?
*/
inFullscreen: boolean;
/**
* Toggles fullscreen mode
*/
toggleFullscreen: () => void;
}) => VNode[];
/**
* Slot to define how right part of the table top looks like
* @param scope
*/
"top-right": (scope: {
/**
* Pagination object
*/
pagination: {
/**
* Column name (from column definition)
*/
sortBy: string | null;
/**
* Is sorting in descending order?
*/
descending: boolean;
/**
* Page number (1-based)
*/
page: number;
/**
* How many rows per page? 0 means Infinite
*/
rowsPerPage: number;
/**
* For server-side fetching only. How many total database rows are there to be added to the table.
*/
rowsNumber?: number;
};
/**
* Number of pages available
*/
pagesNumber: number;
/**
* Are we on first page?
*/
isFirstPage: boolean;
/**
* Are we on last page?
*/
isLastPage: boolean;
/**
* Navigates to first page
*/
firstPage: () => void;
/**
* Navigates to previous page, if available
*/
prevPage: () => void;
/**
* Navigates to next page, if available
*/
nextPage: () => void;
/**
* Navigates to last page
*/
lastPage: () => void;
/**
* Is table in fullscreen mode?
*/
inFullscreen: boolean;
/**
* Toggles fullscreen mode
*/
toggleFullscreen: () => void;
}) => VNode[];
/**
* Slot to define how top table section looks like when user has selected at least one row
* @param scope
*/
"top-selection": (scope: {
/**
* Pagination object
*/
pagination: {
/**
* Column name (from column definition)
*/
sortBy: string | null;
/**
* Is sorting in descending order?
*/
descending: boolean;
/**
* Page number (1-based)
*/
page: number;
/**
* How many rows per page? 0 means Infinite
*/
rowsPerPage: number;
/**
* For server-side fetching only. How many total database rows are there to be added to the table.
*/
rowsNumber?: number;
};
/**
* Number of pages available
*/
pagesNumber: number;
/**
* Are we on first page?
*/
isFirstPage: boolean;
/**
* Are we on last page?
*/
isLastPage: boolean;
/**
* Navigates to first page
*/
firstPage: () => void;
/**
* Navigates to previous page, if available
*/
prevPage: () => void;
/**
* Navigates to next page, if available
*/
nextPage: () => void;
/**
* Navigates to last page
*/
lastPage: () => void;
/**
* Is table in fullscreen mode?
*/
inFullscreen: boolean;
/**
* Toggles fullscreen mode
*/
toggleFullscreen: () => void;
}) => VNode[];
/**
* Slot to define how the bottom will look like when is nothing to display
* @param scope
*/
"no-data": (scope: {
/**
* The suggested message
*/
message: string;
/**
* The suggested icon name (following Quasar convention)
*/
icon: string;
/**
* String/Object to filter table with (the 'filter' prop)
*/
filter: string | any;
}) => VNode[];
}
export interface QTable extends ComponentPublicInstance {
/**
* Toggles fullscreen mode
*/
toggleFullscreen: () => void;
/**
* Enter the fullscreen view
*/
setFullscreen: () => void;
/**
* Leave the fullscreen view
*/
exitFullscreen: () => void;
/**
* Trigger a server request (emits 'request' event)
* @param props Request details
*/
requestServerInteraction: (props?: {
/**
* Optional pagination object
*/
pagination?: {
/**
* Column name (from column definition)
*/
sortBy?: string;
/**
* Is sorting in descending order?
*/
descending?: boolean;
/**
* Page number (1-based)
*/
page?: number;
/**
* How many rows per page? 0 means Infinite
*/
rowsPerPage?: number;
/**
* For server-side fetching only. How many total database rows are there to be added to the table.
*/
rowsNumber?: number;
};
/**
* Filtering method (the 'filter-method' prop)
* @param rows Array of rows
* @param terms Terms to filter with (is essentially the 'filter' prop value)
* @param cols Optional column definitions
* @param getCellValue Optional function to get a cell value
* @returns Filtered rows
*/
filter?: (
rows: readonly any[],
terms: string | any,
cols?: readonly any[],
getCellValue?: (col?: any, row?: any) => any,
) => readonly any[];
}) => void;
/**
* Unless using an external pagination Object (through 'v-model:pagination' prop), you can use this method and force the internal pagination to change
* @param pagination Pagination object
* @param forceServerRequest Also force a server request
*/
setPagination: (
pagination: {
/**
* Column name (from column definition)
*/
sortBy?: string | null;
/**
* Is sorting in descending order?
*/
descending?: boolean;
/**
* Page number (1-based)
*/
page?: number;
/**
* How many rows per page? 0 means Infinite
*/
rowsPerPage?: number;
/**
* For server-side fetching only. How many total database rows are there to be added to the table.
*/
rowsNumber?: number;
},
forceServerRequest?: boolean,
) => void;
/**
* Navigates to first page
*/
firstPage: () => void;
/**
* Navigates to previous page, if available
*/
prevPage: () => void;
/**
* Navigates to next page, if available
*/
nextPage: () => void;
/**
* Navigates to last page
*/
lastPage: () => void;
/**
* Determine if a row has been selected by user
* @param key Row key value
* @returns Is row selected or not?
*/
isRowSelected: (key: any) => boolean;
/**
* Clears user selection (emits 'update:selected' with empty array)
*/
clearSelection: () => void;
/**
* Determine if a row is expanded or not
* @param key Row key value
* @returns Is row expanded or not?
*/
isRowExpanded: (key: any) => boolean;
/**
* Sets the expanded rows keys array; Especially useful if not using an external 'expanded' state otherwise just emits 'update:expanded' with the value
* @param expanded Array containing keys of the expanded rows
*/
setExpanded: (expanded: readonly any[]) => void;
/**
* Trigger a table sort
* @param col Column name or column definition object
*/
sort: (col: string | any) => void;
/**
* Resets the virtual scroll (if using it) computations; Needed for custom edge-cases
*/
resetVirtualScroll: () => void;
/**
* Scroll the table to the row with the specified index in page (0 based)
* @param index The index of the row in page (0 based)
* @param edge Only for virtual scroll - the edge to align to if the row is not visible already; If the '-force' version is used then it always aligns; Default value: end (if scrolling towards the end) / start (if scrolling towards the start)
*/
scrollTo: (
index: number | string,
edge?: "start" | "center" | "end" | "start-force" | "center-force" | "end-force",
) => void;
/**
* The filtered and sorted rows (same as the rows prop if using server-side fetching)
*/
readonly filteredSortedRows: readonly any[];
/**
* Paginated, filtered, and sorted rows (same as the rows prop if using server-side fetching)
*/
readonly computedRows: readonly any[];
/**
* The number of computed rows
*/
readonly computedRowsNumber: number;
}
export interface QTdProps {
/**
* QTable's column scoped slot property
*/
props?: any | undefined;
/**
* Tries to shrink column width size; Useful for columns with a checkbox/radio/toggle
*/
autoWidth?: boolean | undefined;
/**
* Disable hover effect
*/
noHover?: boolean | undefined;
}
export interface QTdSlots {
/**
* Default slot in the devland unslotted content of the component
*/
default: () => VNode[];
}
export interface QTd extends ComponentPublicInstance {}
export interface QThProps {
/**
* QTable's header column scoped slot property
*/
props?: any | undefined;
/**
* Tries to shrink header column width size; Useful for columns with a checkbox/radio/toggle
*/
autoWidth?: boolean | undefined;
}
export interface QThSlots {
/**
* Default slot in the devland unslotted content of the component
*/
default: () => VNode[];
}
export interface QTh extends ComponentPublicInstance {}
export interface QTrProps {
/**
* QTable's row scoped slot property
*/
props?: any | undefined;
/**
* Disable hover effect
*/
noHover?: boolean | undefined;
}
export interface QTrSlots {
/**
* Default slot in the devland unslotted content of the component
*/
default: () => VNode[];
}
export interface QTr extends ComponentPublicInstance {}
export interface QRouteTabProps {
/**
* Equivalent to Vue Router 'to' property; Superseded by 'href' prop if used
*/
to?: string | any | undefined;
/**
* Equivalent to Vue Router 'exact' property; Superseded by 'href' prop if used
*/
exact?: boolean | undefined;
/**
* Equivalent to Vue Router 'replace' property; Superseded by 'href' prop if used
*/
replace?: boolean | undefined;
/**
* Equivalent to Vue Router 'active-class' property; Superseded by 'href' prop if used
* Default value: 'q-router-link--active'
*/
activeClass?: string | undefined;
/**
* Equivalent to Vue Router 'active-class' property; Superseded by 'href' prop if used
* Default value: 'q-router-link--exact-active'
*/
exactActiveClass?: string | undefined;
/**
* Native link href attribute; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props
*/
href?: string | undefined;
/**
* Native link target attribute; Use it only along with 'href' prop; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props
*/
target?: string | undefined;
/**
* Put component in disabled mode
*/
disable?: boolean | undefined;
/**
* Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
*/
icon?: string | undefined;
/**
* A number or string to label the tab
*/
label?: number | string | undefined;
/**
* Adds an alert symbol to the tab, notifying the user there are some updates; If its value is not a Boolean, then you can specify a color
*/
alert?: boolean | string | undefined;
/**
* Adds a floating icon to the tab, notifying the user there are some updates; It's displayed only if 'alert' is set; Can use the color specified by 'alert' prop
*/
alertIcon?: string | undefined;
/**
* Panel name
* Default value: # a random UUID
*/
name?: number | string | undefined;
/**
* Turns off capitalizing all letters within the tab (which is the default)
*/
noCaps?: boolean | undefined;
/**
* Class definitions to be attributed to the content wrapper
*/
contentClass?: string | undefined;
/**
* Configure material ripple (disable it by setting it to 'false' or supply a config object)
* Default value: true
*/
ripple?: boolean | any | undefined;
/**
* Tabindex HTML attribute value
*/
tabindex?: number | string | undefined;
/**
* Emitted when the component is clicked
* @param evt JS event object; If you want to cancel navigation then call evt.preventDefault() synchronously in your event handler
* @param go When you need to control the time at which the component should trigger the route navigation then call evt.preventDefault() synchronously and then call this function at your convenience; Useful if you have async work to be done before the actual route navigation or if you want to redirect somewhere else
*/
onClick?: (
evt: Event,
go?: (opts?: {
/**
* Equivalent to Vue Router 'to' property; Specify it explicitly otherwise it will be set with same value as component's 'to' prop
*/
to?: string | any;
/**
* Equivalent to Vue Router 'replace' property; Specify it explicitly otherwise it will be set with same value as component's 'replace' prop
*/
replace?: boolean;
/**
* Return the router error, if any; Otherwise the returned Promise will always fulfill
*/
returnRouterError?: boolean;
}) => Promise,
) => void;
}
export interface QRouteTabSlots {
/**
* Suggestion: QMenu, QTooltip
*/
default: () => VNode[];
}
export interface QRouteTab extends ComponentPublicInstance {}
export interface QTabProps {
/**
* Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
*/
icon?: string | undefined;
/**
* A number or string to label the tab
*/
label?: number | string | undefined;
/**
* Adds an alert symbol to the tab, notifying the user there are some updates; If its value is not a Boolean, then you can specify a color
*/
alert?: boolean | string | undefined;
/**
* Adds a floating icon to the tab, notifying the user there are some updates; It's displayed only if 'alert' is set; Can use the color specified by 'alert' prop
*/
alertIcon?: string | undefined;
/**
* Panel name
* Default value: # a random UUID
*/
name?: number | string | undefined;
/**
* Turns off capitalizing all letters within the tab (which is the default)
*/
noCaps?: boolean | undefined;
/**
* Class definitions to be attributed to the content wrapper
*/
contentClass?: string | undefined;
/**
* Configure material ripple (disable it by setting it to 'false' or supply a config object)
* Default value: true
*/
ripple?: boolean | any | undefined;
/**
* Tabindex HTML attribute value
*/
tabindex?: number | string | undefined;
/**
* Put component in disabled mode
*/
disable?: boolean | undefined;
}
export interface QTabSlots {
/**
* Suggestion: QMenu, QTooltip
*/
default: () => VNode[];
}
export interface QTab extends ComponentPublicInstance {}
export interface QTabsProps {
/**
* Model of the component defining current panel name; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive
*/
modelValue?: number | string | null | undefined;
/**
* Use vertical design (tabs one on top of each other rather than one next to the other horizontally)
*/
vertical?: boolean | undefined;
/**
* Reserve space for arrows to place them on each side of the tabs (the arrows fade when inactive)
*/
outsideArrows?: boolean | undefined;
/**
* Force display of arrows (if needed) on mobile
*/
mobileArrows?: boolean | undefined;
/**
* Horizontal alignment the tabs within the tabs container
* Default value: 'center'
*/
align?: "left" | "center" | "right" | "justify" | undefined;
/**
* Breakpoint (in pixels) of tabs container width at which the tabs automatically turn to a justify alignment
* Default value: 600
*/
breakpoint?: number | string | undefined;
/**
* The color to be attributed to the text of the active tab
*/
activeColor?: NamedColor | undefined;
/**
* The color to be attributed to the background of the active tab
*/
activeBgColor?: NamedColor | undefined;
/**
* The color to be attributed to the indicator (the underline) of the active tab
*/
indicatorColor?: NamedColor | undefined;
/**
* Class definitions to be attributed to the content wrapper
*/
contentClass?: string | undefined;
/**
* The class to be set on the active tab
*/
activeClass?: string | undefined;
/**
* The name of an icon to replace the default arrow used to scroll through the tabs to the left, when the tabs extend past the width of the tabs container
*/
leftIcon?: string | undefined;
/**
* The name of an icon to replace the default arrow used to scroll through the tabs to the right, when the tabs extend past the width of the tabs container
*/
rightIcon?: string | undefined;
/**
* When used on flexbox parent, tabs will stretch to parent's height
*/
stretch?: boolean | undefined;
/**
* By default, QTabs is set to grow to the available space; However, you can reverse that with this prop; Useful (and required) when placing the component in a QToolbar
*/
shrink?: boolean | undefined;
/**
* Switches the indicator position (on left of tab for vertical mode or above the tab for default horizontal mode)
*/
switchIndicator?: boolean | undefined;
/**
* Allows the indicator to be the same width as the tab's content (text or icon), instead of the whole width of the tab
*/
narrowIndicator?: boolean | undefined;
/**
* Allows the text to be inline with the icon, should one be used
*/
inlineLabel?: boolean | undefined;
/**
* Turns off capitalizing all letters within the tab (which is the default)
*/
noCaps?: boolean | undefined;
/**
* Dense mode; occupies less space
*/
dense?: boolean | undefined;
/**
* Emitted when the component needs to change the model; Is also used by v-model
* @param value New model value
*/
"onUpdate:modelValue"?: (value: any) => void;
}
export interface QTabsSlots {
/**
* Default slot in the devland unslotted content of the component
*/
default: () => VNode[];
}
export interface QTabs extends ComponentPublicInstance {}
export interface QTimeProps {
/**
* Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
*/
name?: string | undefined;
/**
* Display the component in landscape mode
*/
landscape?: boolean | undefined;
/**
* Mask (formatting string) used for parsing and formatting value
* Default value: 'HH:mm'
*/
mask?: string | null | undefined;
/**
* Locale formatting options
*/
locale?:
| {
/**
* List of full day names (DDDD), starting with Sunday
*/
days?: readonly any[];
/**
* List of short day names (DDD), starting with Sunday
*/
daysShort?: readonly any[];
/**
* List of full month names (MMMM), starting with January
*/
months?: readonly any[];
/**
* List of short month names (MMM), starting with January
*/
monthsShort?: readonly any[];
}
| undefined;
/**
* Specify calendar type
* Default value: 'gregorian'
*/
calendar?: "gregorian" | "persian" | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
/**
* Overrides text color (if needed); Color name from the Quasar Color Palette
*/
textColor?: NamedColor | undefined;
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null | undefined;
/**
* Removes border-radius so borders are squared
*/
square?: boolean | undefined;
/**
* Applies a 'flat' design (no default shadow)
*/
flat?: boolean | undefined;
/**
* Applies a default border to the component
*/
bordered?: boolean | undefined;
/**
* Put component in readonly mode
*/
readonly?: boolean | undefined;
/**
* Put component in disabled mode
*/
disable?: boolean | undefined;
/**
* Time of the component; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive
*/
modelValue: string | null | undefined;
/**
* Forces 24 hour time display instead of AM/PM system; If prop is not set, then the default is based on Quasar lang language being used
* Default value: null
*/
format24h?: boolean | null | undefined;
/**
* The default date to use (in YYYY/MM/DD format) when model is unfilled (undefined or null)
* Default value: # current day
*/
defaultDate?: string | undefined;
/**
* Optionally configure what time is the user allowed to set; Overridden by 'hour-options', 'minute-options' and 'second-options' if those are set; For best performance, reference it from your scope and do not define it inline
* @param hr Hour
* @param min Minutes
* @param sec Seconds
* @returns Is the user allowed to set the specified time?
*/
options?: (hr: number, min: number | null, sec: number | null) => boolean | null | undefined;
/**
* Optionally configure what hours is the user allowed to set; Overrides 'options' prop if that is also set
*/
hourOptions?: readonly any[] | undefined;
/**
* Optionally configure what minutes is the user allowed to set; Overrides 'options' prop if that is also set
*/
minuteOptions?: readonly any[] | undefined;
/**
* Optionally configure what seconds is the user allowed to set; Overrides 'options' prop if that is also set
*/
secondOptions?: readonly any[] | undefined;
/**
* Allow the time to be set with seconds
*/
withSeconds?: boolean | undefined;
/**
* Display a button that selects the current time
*/
nowBtn?: boolean | undefined;
/**
* Emitted when the component needs to change the model; Is also used by v-model
* @param value New model value
* @param details Object of properties on the new model
*/
"onUpdate:modelValue"?: (
value: string | null,
details: {
/**
* The year
*/
year: number;
/**
* The month
*/
month: number;
/**
* The day of the month
*/
day: number;
/**
* The hour
*/
hour: number;
/**
* The minute
*/
minute: number;
/**
* The second
*/
second: number;
/**
* The millisecond
*/
millisecond: number;
/**
* Did the model change?
*/
changed: boolean;
},
) => void;
}
export interface QTimeSlots {
/**
* This is where additional buttons can go
*/
default: () => VNode[];
}
export interface QTime extends ComponentPublicInstance {
/**
* Change model to current moment
*/
setNow: () => void;
}
export interface QTimelineProps {
/**
* Color name for component from the Quasar Color Palette
* Default value: 'primary'
*/
color?: NamedColor | undefined;
/**
* Side to place the timeline entries in dense and comfortable layout; For loose layout it gets overridden by QTimelineEntry side prop
* Default value: 'right'
*/
side?: "left" | "right" | undefined;
/**
* Layout of the timeline. Dense keeps content and labels on one side. Comfortable keeps content on one side and labels on the opposite side. Loose puts content on both sides.
* Default value: 'dense'
*/
layout?: "dense" | "comfortable" | "loose" | undefined;
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null | undefined;
}
export interface QTimelineSlots {
/**
* Used for content of component
*/
default: () => VNode[];
}
export interface QTimeline extends ComponentPublicInstance {}
export interface QTimelineEntryProps {
/**
* Defines a heading timeline item
*/
heading?: boolean | undefined;
/**
* Tag to use, if of type 'heading' only
* Default value: 'h3'
*/
tag?: string | undefined;
/**
* Side to place the timeline entry; Works only if QTimeline layout is loose.
* Default value: 'right'
*/
side?: "left" | "right" | undefined;
/**
* Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
*/
icon?: string | undefined;
/**
* URL to the avatar image; Icon takes precedence if used, so it replaces avatar
*/
avatar?: string | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
/**
* Title of timeline entry; Is overridden if using 'title' slot
*/
title?: string | undefined;
/**
* Subtitle of timeline entry; Is overridden if using 'subtitle' slot
*/
subtitle?: string | undefined;
/**
* Body content of timeline entry; Use this prop or the default slot
*/
body?: string | undefined;
}
export interface QTimelineEntrySlots {
/**
* Timeline entry content (body)
*/
default: () => VNode[];
/**
* Optional slot for title; When used, it overrides 'title' prop
*/
title: () => VNode[];
/**
* Optional slot for subtitle; When used, it overrides 'subtitle' prop
*/
subtitle: () => VNode[];
}
export interface QTimelineEntry extends ComponentPublicInstance {}
export interface QToggleProps {
/**
* Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
*/
name?: string | undefined;
/**
* Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
*/
size?: string | undefined;
/**
* Model of the component; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive
* Default value: null
*/
modelValue: any | any[];
/**
* Works when model ('value') is Array. It tells the component which value should add/remove when ticked/unticked
*/
val?: any | undefined;
/**
* What model value should be considered as checked/ticked/on?
* Default value: true
*/
trueValue?: any | undefined;
/**
* What model value should be considered as unchecked/unticked/off?
* Default value: false
*/
falseValue?: any | undefined;
/**
* What model value should be considered as 'indeterminate'?
* Default value: null
*/
indeterminateValue?: any | undefined;
/**
* Determines toggle order of the two states ('t' stands for state of true, 'f' for state of false); If 'toggle-indeterminate' is true, then the order is: indet -> first state -> second state -> indet (and repeat), otherwise: indet -> first state -> second state -> first state -> second state -> ...
*/
toggleOrder?: "tf" | "ft" | undefined;
/**
* When user clicks/taps on the component, should we toggle through the indeterminate state too?
*/
toggleIndeterminate?: boolean | undefined;
/**
* Label to display along the component (or use the default slot instead of this prop)
*/
label?: string | undefined;
/**
* Label (if any specified) should be displayed on the left side of the component
*/
leftLabel?: boolean | undefined;
/**
* The icon to be used when the toggle is on
*/
checkedIcon?: string | undefined;
/**
* The icon to be used when the toggle is off
*/
uncheckedIcon?: string | undefined;
/**
* The icon to be used when the model is indeterminate
*/
indeterminateIcon?: string | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
/**
* Should the color (if specified any) be kept when the component is unticked/ off?
*/
keepColor?: boolean | undefined;
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null | undefined;
/**
* Dense mode; occupies less space
*/
dense?: boolean | undefined;
/**
* Put component in disabled mode
*/
disable?: boolean | undefined;
/**
* Tabindex HTML attribute value
*/
tabindex?: number | string | undefined;
/**
* Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
*/
icon?: string | undefined;
/**
* Override default icon color (for truthy state only); Color name for component from the Quasar Color Palette
*/
iconColor?: NamedColor | undefined;
/**
* Emitted when the component needs to change the model; Is also used by v-model
* @param value New model value
* @param evt JS event object
*/
"onUpdate:modelValue"?: (value: any, evt: Event) => void;
}
export interface QToggleSlots {
/**
* Default slot can be used as label, unless 'label' prop is specified; Suggestion: string
*/
default: () => VNode[];
}
export interface QToggle extends ComponentPublicInstance {
/**
* Toggle the state (of the model)
*/
toggle: () => void;
}
export interface QToolbarProps {
/**
* Apply an inset to content (useful for subsequent toolbars)
*/
inset?: boolean | undefined;
}
export interface QToolbarSlots {
/**
* Default slot in the devland unslotted content of the component
*/
default: () => VNode[];
}
export interface QToolbar extends ComponentPublicInstance {}
export interface QToolbarTitleProps {
/**
* By default, QToolbarTitle is set to grow to the available space. However, you can reverse that with this prop
*/
shrink?: boolean | undefined;
}
export interface QToolbarTitleSlots {
/**
* Default slot in the devland unslotted content of the component
*/
default: () => VNode[];
}
export interface QToolbarTitle extends ComponentPublicInstance {}
export interface 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;
/**
* Configure a target element to trigger component 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) or a DOM element it attaches the events to the specified DOM element (if it exists)
* Default value: true
*/
target?: boolean | string | Element | undefined;
/**
* Skips attaching events to the target DOM element (that trigger the element to get shown)
*/
noParentEvent?: boolean | 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
* Default value: null
*/
modelValue?: boolean | null;
/**
* The maximum height of the Tooltip; Size in CSS units, including unit name
* Default value: null
*/
maxHeight?: string | null | undefined;
/**
* The maximum width of the Tooltip; Size in CSS units, including unit name
* Default value: null
*/
maxWidth?: string | null | 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 Tooltip to appear with delay
* Default value: 0
*/
delay?: number | undefined;
/**
* Configure Tooltip to disappear with delay
* Default value: 0
*/
hideDelay?: number | undefined;
/**
* Prevents Tooltip from auto-closing when app's route changes
*/
persistent?: boolean | 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 QTooltipSlots {
/**
* Default slot in the devland unslotted content of the component
*/
default: () => VNode[];
}
export interface QTooltip extends ComponentPublicInstance {
/**
* Triggers component to show
* @param evt JS event object
*/
show: (evt?: Event) => void;
/**
* Triggers component to hide
* @param evt JS event object
*/
hide: (evt?: Event) => void;
/**
* Triggers component to toggle between show/hide
* @param evt JS event object
*/
toggle: (evt?: Event) => void;
/**
* There are some custom scenarios for which Quasar cannot automatically reposition the tooltip without significant performance drawbacks so the optimal solution is for you to call this method when you need it
*/
updatePosition: () => void;
/**
* The DOM Element of the rendered content
*/
readonly contentEl: Element;
}
export interface QTreeProps {
/**
* The array of nodes that designates the tree structure
*/
nodes: QTreeNode[];
/**
* The property name of each node object that holds a unique node id
*/
nodeKey: string;
/**
* The property name of each node object that holds the label of the node
* Default value: 'label'
*/
labelKey?: string | undefined;
/**
* The property name of each node object that holds the list of children of the node
* Default value: 'children'
*/
childrenKey?: string | undefined;
/**
* Do not display the connector lines between nodes
*/
noConnectors?: boolean | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
/**
* Color name for controls (like checkboxes) from the Quasar Color Palette
*/
controlColor?: NamedColor | undefined;
/**
* Overrides text color (if needed); Color name from the Quasar Color Palette
*/
textColor?: NamedColor | undefined;
/**
* Color name for selected nodes (from the Quasar Color Palette)
*/
selectedColor?: NamedColor | undefined;
/**
* Dense mode; occupies less space
*/
dense?: boolean | undefined;
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null | undefined;
/**
* Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
*/
icon?: string | undefined;
/**
* The type of strategy to use for the selection of the nodes
* Default value: 'none'
*/
tickStrategy?: "none" | "strict" | "leaf" | "leaf-filtered" | undefined;
/**
* Keys of nodes that are ticked
*/
ticked?: any[] | undefined;
/**
* Keys of nodes that are expanded
*/
expanded?: any[] | undefined;
/**
* Key of node currently selected
*/
selected?: any | undefined;
/**
* Do not allow un-selection when clicking currently selected node
*/
noSelectionUnset?: boolean | undefined;
/**
* Allow the tree to have all its branches expanded, when first rendered
*/
defaultExpandAll?: boolean | undefined;
/**
* Allows the tree to be set in accordion mode
*/
accordion?: boolean | undefined;
/**
* Turn off transition effects when expanding/collapsing nodes; Also enhances perf by a lot as a side-effect; Recommended for big trees
*/
noTransition?: boolean | undefined;
/**
* The text value to be used for filtering nodes
*/
filter?: string | undefined;
/**
* The function to use to filter the tree nodes; For best performance, reference it from your scope and do not define it inline
* @param node Node currently being filtered
* @param filter Filter text to match against
* @returns Matches or not
*/
filterMethod?: ((node: any, filter: string) => boolean) | undefined;
/**
* Toggle animation duration (in milliseconds)
* Default value: 300
*/
duration?: number | undefined;
/**
* Override default such label for when no nodes are available
*/
noNodesLabel?: string | undefined;
/**
* Override default such label for when no nodes are available due to filtering
*/
noResultsLabel?: string | undefined;
/**
* Triggered when nodes are expanded or collapsed; Used by Vue on 'v-model:update' to update its value
* @param expanded The expanded node keys
*/
"onUpdate:expanded"?: (expanded: readonly any[]) => void;
/**
* Emitted when the lazy loading of nodes is finished
* @param details Lazy loading details
*/
onLazyLoad?: (details: {
/**
* The node to which the new nodes (the children) will be appended
*/
node: any;
/**
* The key of the node getting the newly loaded child nodes
*/
key: string;
/**
* The callback to be carried out when the loading is successful
* @param children Array of nodes
*/
done: (children?: readonly any[]) => void;
/**
* The callback to be carried out should the loading fails
*/
fail: () => void;
}) => void;
/**
* Emitted when nodes are ticked/unticked via the checkbox; Used by Vue on 'v-model:ticked' to update its value
* @param target The ticked node keys
*/
"onUpdate:ticked"?: (target: readonly any[]) => void;
/**
* Emitted when selected node changes; Used by Vue on 'v-model:selected' to update its value
* @param target The selected node key
*/
"onUpdate:selected"?: (target: any) => void;
/**
* Emitted when component show animation is finished
*/
onAfterShow?: () => void;
/**
* Emitted when component hide animation is finished
*/
onAfterHide?: () => void;
}
export interface QTreeSlots {
/**
* Slot to use for defining the header of a node
* @param scope
*/
"default-header": (scope: {
/**
* Is node expanded? Can directly be assigned new Boolean value which changes expanded state
*/
expanded: boolean;
/**
* Is node ticked? Can directly be assigned new Boolean value which changes ticked state
*/
ticked: boolean;
/**
* QTree instance
*/
tree: QTree;
/**
* Node object
*/
node: any;
/**
* Node's key
*/
key: any;
/**
* QTree instance 'color' supplied prop value
*/
color: string;
/**
* QTree instance 'dark' supplied prop value
*/
dark: boolean;
}) => VNode[];
/**
* Header template slot for describing node header; Used by nodes which have their 'header' prop set to '[name]', where '[name]' can be any string
* @param scope
*/
[key: `header-${string}`]: (scope: {
/**
* Is node expanded? Can directly be assigned new Boolean value which changes expanded state
*/
expanded: boolean;
/**
* Is node ticked? Can directly be assigned new Boolean value which changes ticked state
*/
ticked: boolean;
/**
* QTree instance
*/
tree: QTree;
/**
* Node object
*/
node: any;
/**
* Node's key
*/
key: any;
/**
* QTree instance 'color' supplied prop value
*/
color: string;
/**
* QTree instance 'dark' supplied prop value
*/
dark: boolean;
}) => VNode[];
/**
* Slot to use for defining the body of a node
* @param scope
*/
"default-body": (scope: {
/**
* Is node expanded? Can directly be assigned new Boolean value which changes expanded state
*/
expanded: boolean;
/**
* Is node ticked? Can directly be assigned new Boolean value which changes ticked state
*/
ticked: boolean;
/**
* QTree instance
*/
tree: QTree;
/**
* Node object
*/
node: any;
/**
* Node's key
*/
key: any;
/**
* QTree instance 'color' supplied prop value
*/
color: string;
/**
* QTree instance 'dark' supplied prop value
*/
dark: boolean;
}) => VNode[];
/**
* Body template slot for describing node body; Used by nodes which have their 'body' prop set to '[name]', where '[name]' can be any string
* @param scope
*/
[key: `body-${string}`]: (scope: {
/**
* Is node expanded? Can directly be assigned new Boolean value which changes expanded state
*/
expanded: boolean;
/**
* Is node ticked? Can directly be assigned new Boolean value which changes ticked state
*/
ticked: boolean;
/**
* QTree instance
*/
tree: QTree;
/**
* Node object
*/
node: any;
/**
* Node's key
*/
key: any;
/**
* QTree instance 'color' supplied prop value
*/
color: string;
/**
* QTree instance 'dark' supplied prop value
*/
dark: boolean;
}) => VNode[];
}
export interface QTree extends ComponentPublicInstance {
/**
* Get the node with the given key
* @param key The key of a node
* @returns Requested node
*/
getNodeByKey: (key: any) => any;
/**
* Get array of nodes that are ticked
* @returns Ticked node objects
*/
getTickedNodes: () => readonly any[];
/**
* Get array of nodes that are expanded
* @returns Expanded node objects
*/
getExpandedNodes: () => readonly any[];
/**
* Determine if a node is expanded
* @param key The key of a node
* @returns Is specified node expanded?
*/
isExpanded: (key: any) => boolean;
/**
* Use to expand all branches of the tree
*/
expandAll: () => void;
/**
* Use to collapse all branches of the tree
*/
collapseAll: () => void;
/**
* Expands the tree at the point of the node with the key given
* @param key The key of a node
* @param state Set to 'true' to expand the branch of the tree, otherwise 'false' collapses it
*/
setExpanded: (key: any, state: boolean) => void;
/**
* Method to check if a node's checkbox is selected or not
* @param key The key of a node
* @returns Is specified node ticked?
*/
isTicked: (key: any) => boolean;
/**
* Method to set a node's checkbox programmatically
* @param keys The keys of nodes to tick/untick
* @param state Set to 'true' to tick the checkbox of nodes, otherwise 'false' unticks them
*/
setTicked: (keys: readonly any[], state: boolean) => void;
}
export interface QUploaderProps {
/**
* Function which should return an Object or a Promise resolving with an Object; For best performance, reference it from your scope and do not define it inline
* @param files Uploaded files
* @returns Optional configuration for the upload process; You can override QUploader props in this Object (url, method, headers, formFields, fieldName, withCredentials, sendRaw); Props of these Object can also be Functions with the form of (file[s]) => value
*/
factory?: QUploaderFactoryFn | undefined;
/**
* URL or path to the server which handles the upload. Takes String or factory function, which returns String. Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline
* @param files Uploaded files
* @returns URL or path to the server which handles the upload
*/
url?: string | ((files: readonly any[]) => string) | undefined;
/**
* HTTP method to use for upload; Takes String or factory function which returns a String; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline
* Default value: 'POST'
* @param files Uploaded files
* @returns HTTP method to use for upload
*/
method?: "POST" | "PUT" | ((files: readonly any[]) => string) | undefined;
/**
* 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) | undefined;
/**
* Array or a factory function which returns an array; Array consists of objects with header definitions; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline
* @param files Uploaded files
* @returns An array consisting of objects with header definitions
*/
headers?:
| {
/**
* Header name
*/
name: string;
/**
* Header value
*/
value: string;
}[]
| ((files: readonly any[]) => string)
| undefined;
/**
* Array or a factory function which returns an array; Array consists of objects with additional fields definitions (used by Form to be uploaded); Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline
* @param files Uploaded files
* @returns An array consists of objects with additional fields definitions (used by Form to be uploaded)
*/
formFields?:
| {
/**
* Field name
*/
name: string;
/**
* Field value
*/
value: string;
}[]
| ((files: readonly any[]) => string)
| undefined;
/**
* Sets withCredentials to true on the XHR that manages the upload; Takes boolean or factory function for Boolean; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline
* @param files Uploaded files
* @returns If true, withCredentials will be set to true on the XHR that manages the upload
*/
withCredentials?: boolean | ((files: readonly any[]) => boolean) | undefined;
/**
* Send raw files without wrapping into a Form(); Takes boolean or factory function for Boolean; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline
* @param files Uploaded files
* @returns If true, raw files will get sent without wrapping into a Form()
*/
sendRaw?: boolean | ((files: readonly any[]) => boolean) | undefined;
/**
* Upload files in batch (in one XHR request); Takes boolean or factory function for Boolean; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline
* @param files Uploaded files
* @returns If true, files will be uploaded in a batch (in one XHR request)
*/
batch?: boolean | ((files: readonly any[]) => boolean) | undefined;
/**
* Allow multiple file uploads
*/
multiple?: boolean | undefined;
/**
* Comma separated list of unique file type specifiers. Maps to 'accept' attribute of native input type=file element
*/
accept?: string | undefined;
/**
* Optionally, specify that a new file should be captured, and which device should be used to capture that new media of a type defined by the 'accept' prop. Maps to 'capture' attribute of native input type=file element
*/
capture?: "user" | "environment" | undefined;
/**
* Maximum size of individual file in bytes
*/
maxFileSize?: number | string | undefined;
/**
* Maximum size of all files combined in bytes
*/
maxTotalSize?: number | string | undefined;
/**
* Maximum number of files to contain
*/
maxFiles?: number | string | undefined;
/**
* Custom filter for added files; Only files that pass this filter will be added to the queue and uploaded; For best performance, reference it from your scope and do not define it inline
* @param files Candidate files to be added to queue
* @returns Filtered files to be added to queue
*/
filter?: ((files: File[]) => File[]) | undefined;
/**
* Label for the uploader
*/
label?: string | undefined;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor | undefined;
/**
* Overrides text color (if needed); Color name from the Quasar Color Palette
*/
textColor?: NamedColor | undefined;
/**
* Notify the component that the background is a dark color
* Default value: null
*/
dark?: boolean | null | undefined;
/**
* Removes border-radius so borders are squared
*/
square?: boolean | undefined;
/**
* Applies a 'flat' design (no default shadow)
*/
flat?: boolean | undefined;
/**
* Applies a default border to the component
*/
bordered?: boolean | undefined;
/**
* Don't display thumbnails for image files
*/
noThumbnails?: boolean | undefined;
/**
* Upload files immediately when added
*/
autoUpload?: boolean | undefined;
/**
* Don't show the upload button
*/
hideUploadBtn?: boolean | undefined;
/**
* How the thumbnail image will fit into the container; Equivalent of the background-size prop
* Default value: 'cover'
*/
thumbnailFit?: string | undefined;
/**
* Put component in disabled mode
*/
disable?: boolean | undefined;
/**
* Put component in readonly mode
*/
readonly?: boolean | undefined;
/**
* Emitted when file or batch of files is uploaded
* @param info Object containing information about the event
*/
onUploaded?: (info: {
/**
* Uploaded files
*/
files: readonly any[];
/**
* XMLHttpRequest that has been used to upload this batch of files
*/
xhr: any;
}) => void;
/**
* Emitted when file or batch of files has encountered error while uploading
* @param info Object containing information about the event
*/
onFailed?: (info: {
/**
* Files which encountered error
*/
files: readonly any[];
/**
* XMLHttpRequest that has been used to upload this batch of files
*/
xhr: any;
}) => void;
/**
* Emitted when file or batch of files started uploading
* @param info Object containing information about the event
*/
onUploading?: (info: {
/**
* Files which are now uploading
*/
files: readonly any[];
/**
* XMLHttpRequest used for uploading
*/
xhr: any;
}) => void;
/**
* Emitted when factory function is supplied with a Promise which is rejected
* @param err Error object which is the Promise rejection reason
* @param files Files which were to get uploaded
*/
onFactoryFailed?: (err: Error, files: readonly any[]) => void;
/**
* Emitted after files are picked and some do not pass the validation props (accept, max-file-size, max-total-size, filter, etc)
* @param rejectedEntries Array of { failedPropValidation: string, file: File } Objects for files that do not pass the validation
*/
onRejected?: (rejectedEntries: QRejectedEntry[]) => void;
/**
* Emitted when files are added into the list
* @param files Array of files that were added
*/
onAdded?: (files: readonly any[]) => void;
/**
* Emitted when files are removed from the list
* @param files Array of files that were removed
*/
onRemoved?: (files: readonly any[]) => void;
/**
* Started working
*/
onStart?: () => void;
/**
* Finished working (regardless of success or fail)
*/
onFinish?: () => void;
}
export interface QUploaderSlots {
/**
* Slot for custom header; Scope is the QUploader instance itself
* @param scope QUploader instance
*/
header: (scope: QUploader) => VNode[];
/**
* Slot for custom list; Scope is the QUploader instance itself
* @param scope QUploader instance
*/
list: (scope: QUploader) => VNode[];
}
export interface QUploader extends ComponentPublicInstance {
/**
* Trigger the file picker dialog; The event must come from a user interaction event handler
* @param evt JS event object of the original user interaction handler
*/
pickFiles: (evt: Event) => void;
/**
* Add files programmatically
* @param files Array of files (instances of File) or FileList
*/
addFiles: (files: QUseFileAddInput) => void;
/**
* Start uploading (same as clicking the upload button)
*/
upload: () => void;
/**
* Abort upload of all files (same as clicking the abort button)
*/
abort: () => void;
/**
* Resets uploader to default; Empties queue, aborts current uploads
*/
reset: () => void;
/**
* Removes already uploaded files from the list
*/
removeUploadedFiles: () => void;
/**
* Remove files that are waiting for upload to start (same as clicking the left clear button)
*/
removeQueuedFiles: () => void;
/**
* Remove specified file from the queue
* @param file The file to remove
*/
removeFile: (file: File) => void;
/**
* Update the status of a file
* @param file The file to update
* @param status Status of file
* @param uploadedSize The number of uploaded bytes of the file; Is required explicitly only when status is NOT 'uploaded'
*/
updateFileStatus: (
file: File,
status: "idle" | "failed" | "uploading" | "uploaded",
uploadedSize: number,
) => void;
/**
* Is the component alive (activated but not unmounted); Useful to determine if you still need to compute anything going further
* @returns If true, the current component is still activated and mounted
*/
isAlive: () => boolean;
/**
* List of all files
*/
readonly files: readonly any[];
/**
* List of files that are waiting to be uploaded
*/
readonly queuedFiles: readonly any[];
/**
* List of files that have been uploaded
*/
readonly uploadedFiles: readonly any[];
/**
* Size of all uploaded files in bytes
*/
readonly uploadedSize: number;
/**
* Label for the size total of all files
*/
readonly uploadSizeLabel: string;
/**
* Label for the upload progress (in %)
*/
readonly uploadProgressLabel: string;
/**
* Whether new files can be added to the list
*/
readonly canAddFiles: boolean;
/**
* Whether the files can be uploaded
*/
readonly canUpload: boolean;
/**
* The component state is set as busy; User should not be able to interact with the component
*/
readonly isBusy: boolean;
/**
* The component is uploading files
*/
readonly isUploading: boolean;
}
export interface QUploaderAddTriggerProps {}
export interface QUploaderAddTriggerSlots {}
export interface QUploaderAddTrigger extends ComponentPublicInstance {}
export interface QVideoProps {
/**
* Aspect ratio for the content; If value is a String, then avoid using a computational statement (like '16/9') and instead specify the String value of the result directly (eg. '1.7777')
*/
ratio?: string | number | undefined;
/**
* The source url to display in an iframe
*/
src: string;
/**
* (Accessibility) Set the native 'title' attribute value of the inner iframe being used
*/
title?: string | undefined;
/**
* Provides a hint of the relative priority to use when fetching the iframe document
* Default value: 'auto'
*/
fetchpriority?: "high" | "low" | "auto" | undefined;
/**
* Indicates how the browser should load the iframe
* Default value: 'eager'
*/
loading?: "eager" | "lazy" | undefined;
/**
* Indicates which referrer to send when fetching the frame's resource
* Default value: 'strict-origin-when-cross-origin'
*/
referrerpolicy?:
| "no-referrer"
| "no-referrer-when-downgrade"
| "origin"
| "origin-when-cross-origin"
| "same-origin"
| "strict-origin"
| "strict-origin-when-cross-origin"
| "unsafe-url"
| undefined;
}
export interface QVideoSlots {}
export interface QVideo extends ComponentPublicInstance {}
export interface QVirtualScrollProps {
/**
* Make virtual list work in horizontal mode
*/
virtualScrollHorizontal?: boolean | undefined;
/**
* Minimum number of items to render in the virtual list
* Default value: 10
*/
virtualScrollSliceSize?: number | string | null | undefined;
/**
* Ratio of number of items in visible zone to render before it
* Default value: 1
*/
virtualScrollSliceRatioBefore?: number | string | undefined;
/**
* Ratio of number of items in visible zone to render after it
* Default value: 1
*/
virtualScrollSliceRatioAfter?: number | string | undefined;
/**
* Default size in pixels (height if vertical, width if horizontal) of an item; This value is used for rendering the initial list; Try to use a value close to the minimum size of an item
* Default value: 24
*/
virtualScrollItemSize?: number | string | undefined;
/**
* Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the start of the list; A correct value will improve scroll precision
* Default value: 0
*/
virtualScrollStickySizeStart?: number | string | undefined;
/**
* Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the end of the list; A correct value will improve scroll precision
* Default value: 0
*/
virtualScrollStickySizeEnd?: number | string | undefined;
/**
* The number of columns in the table (you need this if you use table-layout: fixed)
*/
tableColspan?: number | string | undefined;
/**
* The type of content: list (default) or table
* Default value: 'list'
*/
type?: "list" | "table" | undefined;
/**
* Available list items that will be passed to the scoped slot; For best performance freeze the list of items; Required if 'itemsFn' is not supplied
* Default value: []
*/
items?: readonly any[] | undefined;
/**
* Number of available items in the list; Required and used only if 'itemsFn' is provided
*/
itemsSize?: number | undefined;
/**
* Function to return the scope for the items to be displayed; Should return an array for items starting from 'from' index for size length; For best performance, reference it from your scope and do not define it inline
* @param from Index of the first item (0 based)
* @param size Number of items to return
* @returns List of scope for items to be displayed
*/
itemsFn?: ((from: number, size: number) => 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;
/**
* Emitted when the virtual scroll occurs
* @param details Object of properties on the new scroll position
*/
onVirtualScroll?: (details: {
/**
* Index of the list item that was scrolled into view (0 based)
*/
index: number;
/**
* The index of the first list item that is rendered (0 based)
*/
from: number;
/**
* The index of the last list item that is rendered (0 based)
*/
to: number;
/**
* Direction of change
*/
direction: "increase" | "decrease";
/**
* Vue reference to the QVirtualScroll
*/
ref: QVirtualScroll;
}) => void;
}
export interface QVirtualScrollSlots {
/**
* Template slot for the elements that should be rendered before the list; Suggestion: thead before a table
*/
before: () => VNode[];
/**
* Template slot for the elements that should be rendered after the list; Suggestion: tfoot after a table
*/
after: () => VNode[];
/**
* Template slot for defining the list item; Suggestion: QItem
* @param scope
*/
default: (scope: {
/**
* Item index in the items list
*/
index: number;
/**
* Item data -- its value is taken from 'items' prop
*/
item: any;
}) => VNode[];
}
export interface QVirtualScroll extends ComponentPublicInstance {
/**
* Scroll the virtual scroll list to the item with the specified index (0 based)
* @param index The index of the list item (0 based)
* @param edge The edge to align to if the item is not visible already (by default it aligns to end if scrolling towards the end and to start otherwise); If the '-force' version is used then it always aligns
*/
scrollTo: (
index: number | string,
edge?: "start" | "center" | "end" | "start-force" | "center-force" | "end-force",
) => void;
/**
* Resets the virtual scroll computations; Needed for custom edge-cases
*/
reset: () => void;
/**
* Refreshes the virtual scroll list; Use it after appending items
* @param index The index of the list item to scroll to after refresh (0 based); If it's not specified the scroll position is not changed; Use a negative value to keep scroll position
*/
refresh: (index?: string | number) => void;
}
import { VueClassProp } from "./api";
import { VueStyleProp } from "./api";
export interface DialogChainObject {
/**
* Receives a Function param to tell what to do when OK is pressed / option is selected
* @param callbackFn Tell what to do
* @returns Chained Object
*/
onOk: (callbackFn: (payload?: any) => void) => DialogChainObject;
/**
* Receives a Function as param to tell what to do when Cancel is pressed / dialog is dismissed
* @param callbackFn Tell what to do
* @returns Chained Object
*/
onCancel: (callbackFn: () => void) => DialogChainObject;
/**
* Receives a Function param to tell what to do when the dialog is closed
* @param callbackFn Tell what to do
* @returns Chained Object
*/
onDismiss: (callbackFn: () => void) => DialogChainObject;
/**
* Hides the dialog when called
* @returns Chained Object
*/
hide: () => DialogChainObject;
/**
* Updates the initial properties (given as create() param) except for 'component'
* @param opts If using with 'component' prop then the props to update the current 'componentProps' (will be shallowly merged on top of the previous 'componentProps'); Otherwise the props to be shallowly merged with the previous create() param Object
* @returns Chained Object
*/
update: (opts: any) => DialogChainObject;
}
import { CookiesGetMethodType } from "./api";
import { QDialogInputPrompt } from "./api";
import { QDialogSelectionPrompt } from "./api";
import { NamedColor } from "./api";
export interface QDialogOptions {
/**
* CSS Class name to apply to the Dialog's QCard
*/
class?: VueClassProp;
/**
* CSS style to apply to the Dialog's QCard
*/
style?: VueStyleProp;
/**
* A text for the heading title of the dialog
*/
title?: string;
/**
* A text with more information about what needs to be input, selected or confirmed.
*/
message?: string;
/**
* Render title and message as HTML; This can lead to XSS attacks, so make sure that you sanitize the message first
*/
html?: boolean;
/**
* Position of the Dialog on screen. Standard is centered.
* Default value: 'standard'
*/
position?: "top" | "right" | "bottom" | "left" | "standard";
/**
* An object definition of the input field for the prompting question.
*/
prompt?: QDialogInputPrompt;
/**
* An object definition for creating the selection form content
*/
options?: QDialogSelectionPrompt;
/**
* Display a Quasar spinner (if value is true, then the defaults are used); Useful for conveying the idea that something is happening behind the covers; Tip: use along with persistent, ok: false and update() method
*/
progress?:
| boolean
| {
/**
* One of the QSpinners
*/
spinner?: Component;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor;
};
/**
* Props for an 'OK' button
*/
ok?:
| string
| {
/**
* See QBtn for available props
*/
[props: string]: any | undefined;
}
| boolean;
/**
* Props for a 'CANCEL' button
*/
cancel?:
| string
| {
/**
* See QBtn for available props
*/
[props: string]: any | undefined;
}
| boolean;
/**
* What button to focus, unless you also have 'prompt' or 'options'
* Default value: 'ok'
*/
focus?: "ok" | "cancel" | "none";
/**
* Makes buttons be stacked instead of vertically aligned
*/
stackButtons?: boolean;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor;
/**
* Apply dark mode
* Default value: null
*/
dark?: boolean | null;
/**
* User cannot dismiss Dialog if clicking outside of it or hitting ESC key; Also, an app route change won't dismiss it
*/
persistent?: boolean;
/**
* User cannot dismiss Dialog by hitting ESC key; No need to set it if 'persistent' prop is also set
*/
noEscDismiss?: boolean;
/**
* User cannot dismiss Dialog by clicking outside of it; No need to set it if 'persistent' prop is also set
*/
noBackdropDismiss?: boolean;
/**
* Changing route app won't dismiss Dialog; No need to set it if 'persistent' prop is also set
*/
noRouteDismiss?: boolean;
/**
* Put Dialog into seamless mode; Does not use a backdrop so user is able to interact with the rest of the page too
*/
seamless?: boolean;
/**
* Put Dialog into maximized mode
*/
maximized?: boolean;
/**
* Dialog will try to render with same width as the window
*/
fullWidth?: boolean;
/**
* Dialog will try to render with same height as the window
*/
fullHeight?: boolean;
/**
* One of Quasar's embedded transitions
* Default value: 'scale'
*/
transitionShow?: string;
/**
* One of Quasar's embedded transitions
* Default value: 'scale'
*/
transitionHide?: string;
/**
* Use custom dialog component; use along with 'componentProps' prop where possible
*/
component?: Component | string;
/**
* User defined props which will be forwarded to underlying custom component if 'component' prop is used; May also include any built-in QDialog option such as 'persistent' or 'seamless'
*/
componentProps?: any;
}
export interface QLoadingShowOptions {
/**
* Wait a number of millisecond before showing; Not worth showing for 100ms for example then hiding it, so wait until you're sure it's a process that will take some considerable amount of time
*/
delay?: number;
/**
* Message to display
*/
message?: string;
/**
* Loading group name
*/
group?: string;
/**
* Render the message as HTML; This can lead to XSS attacks so make sure that you sanitize the message first
*/
html?: boolean;
/**
* Content wrapped element custom classes
*/
boxClass?: string;
/**
* Spinner size (in pixels)
*/
spinnerSize?: number;
/**
* Color name for spinner from the Quasar Color Palette
*/
spinnerColor?: NamedColor;
/**
* Color name for text from the Quasar Color Palette
*/
messageColor?: NamedColor;
/**
* Color name for background from the Quasar Color Palette
*/
backgroundColor?: NamedColor;
/**
* One of the QSpinners
*/
spinner?: Component;
/**
* Add a CSS class to easily customize the component
*/
customClass?: string;
/**
* Ignore the default configuration (set by setDefaults()) for this instance only
*/
ignoreDefaults?: boolean;
}
import { QLoadingUpdateOptions } from "./api";
import { QLoadingBarOptions } from "./api";
import { QNotifyAction } from "./api";
export interface QNotifyCreateOptions {
/**
* Optional type (that has been previously registered) or one of the out of the box ones ('positive', 'negative', 'warning', 'info', 'ongoing')
*/
type?: string;
/**
* Color name for component from the Quasar Color Palette
*/
color?: NamedColor;
/**
* Overrides text color (if needed); Color name from the Quasar Color Palette
*/
textColor?: NamedColor;
/**
* The content of your message
*/
message?: string;
/**
* The content of your optional caption
*/
caption?: string;
/**
* Render the message as HTML; This can lead to XSS attacks, so make sure that you sanitize the message first
*/
html?: boolean;
/**
* Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
*/
icon?: string;
/**
* Color name for component from the Quasar Color Palette
*/
iconColor?: NamedColor;
/**
* Size in CSS units, including unit name
*/
iconSize?: string;
/**
* URL to an avatar/image; Suggestion: use public folder
*/
avatar?: string;
/**
* Useful for notifications that are updated; Displays a Quasar spinner instead of an avatar or icon; If value is Boolean 'true' then the default QSpinner is shown
*/
spinner?: boolean | Component;
/**
* Color name for component from the Quasar Color Palette
*/
spinnerColor?: NamedColor;
/**
* Size in CSS units, including unit name
*/
spinnerSize?: string;
/**
* Window side/corner to stick to
* Default value: 'bottom'
*/
position?:
| "top-left"
| "top-right"
| "bottom-left"
| "bottom-right"
| "top"
| "bottom"
| "left"
| "right"
| "center";
/**
* Override the auto generated group with custom one; Grouped notifications cannot be updated; String or number value inform this is part of a specific group, regardless of its options; When a new notification is triggered with same group name, it replaces the old one and shows a badge with how many times the notification was triggered
* Default value: # message + caption + multiline + actions labels + position
*/
group?: boolean | string | number;
/**
* Color name for the badge from the Quasar Color Palette
*/
badgeColor?: NamedColor;
/**
* Color name for the badge text from the Quasar Color Palette
*/
badgeTextColor?: NamedColor;
/**
* Notification corner to stick badge to; If notification is on the left side then default is top-right otherwise it is top-left
* Default value: # top-left/top-right
*/
badgePosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
/**
* Style definitions to be attributed to the badge
*/
badgeStyle?: VueStyleProp;
/**
* Class definitions to be attributed to the badge
*/
badgeClass?: VueClassProp;
/**
* Show progress bar to detail when notification will disappear automatically (unless timeout is 0)
*/
progress?: boolean;
/**
* Class definitions to be attributed to the progress bar
*/
progressClass?: VueClassProp;
/**
* Add CSS class(es) to the notification for easier customization
*/
classes?: string;
/**
* Key-value for attributes to be set on the notification
*/
attrs?: any;
/**
* Amount of time to display (in milliseconds). Set to 0 to never dismiss automatically.
* Default value: 5000
*/
timeout?: number;
/**
* Notification actions (buttons); Unless 'noDismiss' is true, clicking/tapping on the button will close the notification; Also check 'closeBtn' convenience prop
*/
actions?: QNotifyAction[];
/**
* Function to call when notification gets dismissed
*/
onDismiss?: () => void;
/**
* Convenient way to add a dismiss button with a specific label, without using the 'actions' prop; If set to true, it uses a label according to the current Quasar language
*/
closeBtn?: boolean | string;
/**
* Put notification into multi-line mode; If this prop isn't used and more than one 'action' is specified then notification goes into multi-line mode by default
*/
multiLine?: boolean;
/**
* Ignore the default configuration (set by setDefaults()) for this instance only
*/
ignoreDefaults?: boolean;
}
import { QNotifyUpdateOptions } from "./api";
import { QNotifyOptions } from "./api";
import { WebStorageGetItemMethodType } from "./api";
import { WebStorageGetIndexMethodType } from "./api";
import { WebStorageGetKeyMethodType } from "./api";
import { WebStorageGetAllKeysMethodType } from "./api";
export interface QEditorCommand {
/**
* Label of the button
*/
label?: string;
/**
* Text to be displayed as a tooltip on hover
*/
tip?: string;
/**
* HTML formatted text to be displayed within a tooltip on hover
*/
htmlTip?: string;
/**
* Icon of the button
*/
icon?: string;
/**
* Keycode of a key to be used together with the key for use as a shortcut to trigger this element
*/
key?: number;
/**
* Either this or "cmd" is required. Function for when button gets clicked/tapped.
*/
handler?: () => void;
/**
* Either this or "handler" is required. This must be a valid execCommand method according to the designMode API.
*/
cmd?: string;
/**
* Only set a param if using a "cmd". This is commonly text or HTML to inject, but is highly dependent upon the specific cmd being called.
*/
param?: string;
/**
* Is button disabled?
* @returns If true, the button will be disabled
*/
disable?: boolean | (() => boolean);
/**
* Pass the value "no-state" if the button should not have an "active" state
*/
type?: null | "no-state" | null;
/**
* Lock the button label, so it doesn't change based on the child option selected.
*/
fixedLabel?: boolean;
/**
* Lock the button icon, so it doesn't change based on the child option selected.
*/
fixedIcon?: boolean;
/**
* Highlight the toolbar button, when a child option has been selected.
*/
highlight?: boolean;
}
import { VueStyleObjectProp } from "./api";
import { QEditorCaret } from "./api";
import { ValidationRule } from "./api";
import { QRejectedEntry } from "./api";
import { QUseFileAddInput } from "./api";
import { QFileNativeElement } from "./api";
import { QFormChildComponent } from "./api";
import { QInputNativeElement } from "./api";
import { QPopupProxyInnerComponent } from "./api";
import { SliderMarkerLabels } from "./api";
import { SliderMarkerLabelConfig } from "./api";
import { SliderMarkerLabelObjectConfig } from "./api";
import { QTreeNode } from "./api";
import { QUploaderFactoryFn } from "./api";
import { QVueGlobals, QSingletonGlobals } from "./globals";
declare module "./globals" {
export interface QVueGlobals {
addressbarColor: AddressbarColor;
fullscreen: AppFullscreen;
/**
* Does the app have user focus? Or the app runs in the background / another tab has the user's attention
*/
appVisible: boolean;
/**
* Creates an ad-hoc Bottom Sheet; Same as calling $q.bottomSheet(...)
* @param opts Bottom Sheet options
* @returns Chainable Object
*/
bottomSheet: (opts: {
/**
* CSS Class name to apply to the Dialog's QCard
*/
class?: VueClassProp;
/**
* CSS style to apply to the Dialog's QCard
*/
style?: VueStyleProp;
/**
* Title
*/
title?: string;
/**
* Message
*/
message?: string;
/**
* Array of Objects, each Object defining an action
*/
actions?: {
/**
* CSS classes for this action
*/
classes?: VueClassProp;
/**
* Style definitions to be attributed to this action element
*/
style?: VueStyleProp;
/**
* Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
*/
icon?: string;
/**
* Path to an image for this action
*/
img?: string;
/**
* Path to an avatar image for this action
*/
avatar?: string;
/**
* Action label
*/
label?: string | number;
/**
* Any other custom props
*/
[key: string]: any | undefined;
}[];
/**
* Display actions as a grid instead of as a list
*/
grid?: boolean;
/**
* Apply dark mode
* Default value: null
*/
dark?: boolean | null;
/**
* Put Bottom Sheet into seamless mode; Does not use a backdrop so user is able to interact with the rest of the page too
*/
seamless?: boolean;
/**
* User cannot dismiss Bottom Sheet if clicking outside of it or hitting ESC key; Also, an app route change won't dismiss it
*/
persistent?: boolean;
}) => DialogChainObject;
cookies: Cookies;
dark: Dark;
/**
* Creates an ad-hoc Dialog; Same as calling $q.dialog(...)
* @param opts Dialog options
* @returns Chainable Object
*/
dialog: (opts: QDialogOptions) => DialogChainObject;
loading: Loading;
loadingBar: LoadingBar;
/**
* Creates a notification; Same as calling $q.notify(...)
* @param opts Notification options
* @returns Calling this function with no parameters hides the notification; When called with one Object parameter (the original notification must NOT be grouped), it updates the notification (specified properties are shallow merged with previous ones; note that group and position cannot be changed while updating and so they are ignored)
*/
notify: (opts: QNotifyCreateOptions | string) => (props?: QNotifyUpdateOptions) => void;
platform: Platform;
screen: Screen;
localStorage: LocalStorage;
sessionStorage: SessionStorage;
}
}
declare module "vue" {
interface ComponentCustomProperties {
$q: QVueGlobals;
// Directives
/**
* If value is 0 or 'false' then directive is disabled; if value is < 0 then it closes all popups in the chain; if value is 1 or 'true' or undefined then it closes only the parent popup; if value is > 1 it closes the specified number of parent popups in the chain (note that chained QMenus are considered 1 popup only & QPopupProxy separates chained menus)
*
* @see https://v2.quasar.dev/vue-directives/close-popup
*/
vClosePopup: ClosePopup;
/**
* Function to call when scrolling occurs (identical to description of 'handler' prop of the Object form); If using the Object form, it is HIGHLY recommended to reference it from your vue component scope, otherwise the directive update cycle will continuously recreate the observer which hits performance hard
*
* Modifiers:
* - once:
* - type: boolean
* - description: Call handler only once, when the conditions are first met
* - examples:
* - # v-intersection.once
*
* @see https://v2.quasar.dev/vue-directives/intersection
*/
vIntersection: Intersection;
/**
* Configuration object or trigger value
*
* Directive argument:
* - type: string
* - description: x:x2:y:z, where x is the morph element name, x2 is the morph group, y is the animation duration (in milliseconds) and z is the amount of time to wait (in milliseconds) or the 'transitionend' string
* - examples:
* - # v-morph:name="options"
* - # v-morph:name:groupName="options"
* - # v-morph:name:groupName:400="options"
* - # v-morph:name:groupName:400:100="options"
* - # v-morph:name:groupName:400:transitionend="options"
*
* Modifiers:
* - resize:
* - type: boolean
* - description: Use resize instead of scale transform for morph (forceResize option of the morph function)
* - useCSS:
* - type: boolean
* - description: Use CSS animations for morph (forceCssAnimation option of the morph function)
* - hideFromClone:
* - type: boolean
* - description: Hide the spacer for the initial element (hideFromClone option of the morph function)
* - keepToClone:
* - type: boolean
* - description: Keep the final element visible while morphing (keepToClone option of the morph function)
* - tween:
* - type: boolean
* - description: Use opacity tween morphing between initial and final elements (tween option of the morph function)
*
* @see https://v2.quasar.dev/vue-directives/morph
*/
vMorph: Morph;
/**
* Function to call when mutation occurs; It is HIGHLY recommended to reference it from your vue component scope, otherwise the directive update cycle will continuously recreate the observer which hits performance hard
*
* Modifiers:
* - once:
* - type: boolean
* - description: Call handler only once, when the first mutation was triggered, then stop monitoring
* - examples:
* - # v-mutation.once
* - childList:
* - type: boolean
* - description: Monitor the target node (and, if 'subtree' is also set, its descendants) for the addition of new child nodes or removal of existing child nodes
* - examples:
* - # v-mutation.childList
* - subtree:
* - type: boolean
* - description: Extend monitoring to the entire subtree of nodes rooted at target
* - examples:
* - # v-mutation.subtree
* - attributes:
* - type: boolean
* - description: Watch for changes to the value of attributes on the node or nodes being monitored
* - examples:
* - # v-mutation.attributes
* - characterData:
* - type: boolean
* - description: Monitor the specified target node or subtree for changes to the character data contained within the node or nodes
* - examples:
* - # v-mutation.characterData
* - attributeOldValue:
* - type: boolean
* - description: Record the previous value of any attribute that changes when monitoring the node or nodes for attribute changes
* - examples:
* - # v-mutation.attributeOldValue
* - characterDataOldValue:
* - type: boolean
* - description: Record the previous value of a node's text whenever the text changes on nodes being monitored
* - examples:
* - # v-mutation.characterDataOldValue
*
* @see https://v2.quasar.dev/vue-directives/mutation
*/
vMutation: Mutation;
/**
* Boolean (if just wanting to enable/disable) or Object for configuring more options
*
* Directive argument:
* - type: string
* - description: Color name from Quasar Color Palette; Overrides default dynamic color
* - examples:
* - # v-ripple:orange-5
*
* Modifiers:
* - early:
* - type: boolean
* - description: Trigger early/immediately on user interaction
* - stop:
* - type: boolean
* - description: Stop click/touch event propagation
* - examples:
* - # v-ripple.stop
* - center:
* - type: boolean
* - description: Ripple starts from the absolute center
* - examples:
* - # v-ripple.center
*
* @see https://v2.quasar.dev/vue-directives/material-ripple
*/
vRipple: Ripple;
/**
* Function to call when scrolling occurs (use undefined to disable)
*
* @see https://v2.quasar.dev/vue-directives/scroll
*/
vScroll: Scroll;
/**
* Function to call when scrolling and element comes into the viewport (use undefined to disable)
*
* @see https://v2.quasar.dev/vue-directives/scroll-fire
*/
vScrollFire: ScrollFire;
/**
* Function to call after user has hold touch/click for the specified amount of time (use undefined to disable)
*
* Directive argument:
* - type: string
* - default: '600:5:7'
* - description: x:y:z, where x is the amount of time to wait (in milliseconds), y is the touch event sensitivity (in pixels) and z is the mouse event sensitivity (in pixels)
* - examples:
* - # v-touch-hold:400="fnToCall"
* - # v-touch-hold:400:15="fnToCall"
* - # v-touch-hold:400:10:10="fnToCall"
*
* Modifiers:
* - capture:
* - type: boolean
* - description: Use capture for touchstart event
* - mouse:
* - type: boolean
* - description: Listen for mouse events too
* - mouseCapture:
* - type: boolean
* - description: Use capture for mousedown event
*
* @see https://v2.quasar.dev/vue-directives/touch-hold
*/
vTouchHold: TouchHold;
/**
* Handler for panning (use undefined to disable)
*
* Modifiers:
* - stop:
* - type: boolean
* - description: Stop event propagation for touch events
* - prevent:
* - type: boolean
* - description: Calls event.preventDefault() for touch events
* - capture:
* - type: boolean
* - description: Use capture for touchstart event
* - mouse:
* - type: boolean
* - description: Listen for mouse events too
* - mouseCapture:
* - type: boolean
* - description: Use capture for mousedown event
* - mouseAllDir:
* - type: boolean
* - description: Ignore initial mouse move direction (do not abort if the first mouse move is in an unaccepted direction)
* - preserveCursor:
* - type: boolean
* - description: Prevent the mouse cursor from automatically displaying as grabbing when panning
* - horizontal:
* - type: boolean
* - description: Catch horizontal (left/right) movement
* - vertical:
* - type: boolean
* - description: Catch vertical (up/down) movement
* - up:
* - type: boolean
* - description: Catch panning to up
* - right:
* - type: boolean
* - description: Catch panning to right
* - down:
* - type: boolean
* - description: Catch panning to down
* - left:
* - type: boolean
* - description: Catch panning to left
*
* @see https://v2.quasar.dev/vue-directives/touch-pan
*/
vTouchPan: TouchPan;
/**
* Handler for touch-repeat (use undefined to disable)
*
* Directive argument:
* - type: string
* - default: '0:600:300'
* - description: String of numbers (at least one number) separated by ':' which defines the amount of time to wait for 1st handler call, 2nd, 3rd and so on; All subsequent calls will use last value as time to wait until triggering
* - examples:
* - # v-touch-repeat:0:400="fnToCall"
*
* Modifiers:
* - capture:
* - type: boolean
* - description: Use capture for touchstart event
* - mouse:
* - type: boolean
* - description: Listen for mouse events too
* - mouseCapture:
* - type: boolean
* - description: Use capture for mousedown event
* - keyCapture:
* - type: boolean
* - description: Use capture for keydown event
* - esc:
* - type: boolean
* - description: Catch ESC key
* - tab:
* - type: boolean
* - description: Catch TAB key
* - enter:
* - type: boolean
* - description: Catch ENTER key
* - space:
* - type: boolean
* - description: Catch SPACE key
* - up:
* - type: boolean
* - description: Catch UP arrow key
* - left:
* - type: boolean
* - description: Catch LEFT arrow key
* - right:
* - type: boolean
* - description: Catch RIGHT arrow key
* - down:
* - type: boolean
* - description: Catch DOWN key
* - delete:
* - type: boolean
* - description: Catch DELETE key
* - [keycode]:
* - type: number
* - description: Key code to catch
* - examples:
* - # v-touch-repeat.68="fnToCall"
*
* @see https://v2.quasar.dev/vue-directives/touch-repeat
*/
vTouchRepeat: TouchRepeat;
/**
* Handler for swipe (use undefined to disable)
*
* Directive argument:
* - type: string
* - default: '6e-2:6:50'
* - description: x:y:z, where x is minimum velocity (dist/time; please use float without a dot, example: 6e-2 which is equivalent to 6 * 10^-2 = 0.06), y is minimum distance on first move on mobile, z is minimum distance on desktop until deciding if it's a swipe indeed
* - examples:
* - # v-touch-swipe:7e-2:10:100="fnToCall"
*
* Modifiers:
* - capture:
* - type: boolean
* - description: Use capture for touchstart event
* - mouse:
* - type: boolean
* - description: Listen for mouse events too
* - mouseCapture:
* - type: boolean
* - description: Use capture for mousedown event
* - horizontal:
* - type: boolean
* - description: Catch horizontal (left/right) movement
* - vertical:
* - type: boolean
* - description: Catch vertical (up/down) movement
* - up:
* - type: boolean
* - description: Catch swipe to up
* - right:
* - type: boolean
* - description: Catch swipe to right
* - down:
* - type: boolean
* - description: Catch swipe to down
* - left:
* - type: boolean
* - description: Catch swipe to left
*
* @see https://v2.quasar.dev/vue-directives/touch-swipe
*/
vTouchSwipe: TouchSwipe;
}
}
interface _GlobalComponents {
QAjaxBar: GlobalComponentConstructor;
QAvatar: GlobalComponentConstructor;
QBadge: GlobalComponentConstructor;
QBanner: GlobalComponentConstructor;
QBar: GlobalComponentConstructor;
QBreadcrumbs: GlobalComponentConstructor;
QBreadcrumbsEl: GlobalComponentConstructor;
QBtn: GlobalComponentConstructor;
QBtnDropdown: GlobalComponentConstructor;
QBtnGroup: GlobalComponentConstructor;
QBtnToggle: GlobalComponentConstructor;
QCard: GlobalComponentConstructor;
QCardActions: GlobalComponentConstructor;
QCardSection: GlobalComponentConstructor;
QCarousel: GlobalComponentConstructor;
QCarouselControl: GlobalComponentConstructor;
QCarouselSlide: GlobalComponentConstructor;
QChatMessage: GlobalComponentConstructor;
QCheckbox: GlobalComponentConstructor;
QChip: GlobalComponentConstructor;
QCircularProgress: GlobalComponentConstructor;
QColor: GlobalComponentConstructor;
QDate: GlobalComponentConstructor;
QDialog: GlobalComponentConstructor;
QDrawer: GlobalComponentConstructor;
QEditor: GlobalComponentConstructor