quasar
Version:
Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
2,280 lines (2,265 loc) • 534 kB
TypeScript
// @ts-ignore
/// <reference types="@quasar/app" />
/// <reference types="@quasar/app-webpack" />
/// <reference types="@quasar/app-vite" />
import { App, Component, ComponentPublicInstance, Directive, VNode } from "vue";
import { ComponentConstructor, GlobalComponentConstructor } from "./ts-helpers";
export interface AddressbarColor {
/**
* Sets addressbar color (for browsers that support it)
* @param hexColor Color in hex format
*/
set: (hexColor: string) => void;
}
export interface AppFullscreen {
/**
* Does browser support it?
*/
isCapable: boolean;
/**
* Is Fullscreen active?
*/
isActive: boolean;
/**
* The DOM element used as root for fullscreen, otherwise 'null'
*/
activeEl: Element | null;
/**
* Request going into Fullscreen (with optional target)
* @param target Optional Element of target to request Fullscreen on
* @returns A Promise which is resolved when transitioned to fullscreen mode. It gets rejected with 'Not capable' if the browser is not capable, and with an Error object if something else went wrong.
*/
request: (target?: Element) => Promise<void>;
/**
* Request exiting out of Fullscreen mode
* @returns A Promise which is resolved when exited out of fullscreen mode. It gets rejected with 'Not capable' if the browser is not capable, and with an Error object if something else went wrong.
*/
exit: () => Promise<void>;
/**
* Request toggling Fullscreen mode (with optional target if requesting going into Fullscreen only)
* @param target Optional Element of target to request Fullscreen on
* @returns A Promise which is resolved when transitioned to / exited out of fullscreen mode. It gets rejected with 'Not capable' if the browser is not capable, and with an Error object if something else went wrong.
*/
toggle: (target?: Element) => Promise<void>;
}
export interface AppVisibility {
/**
* Does the app have user focus? Or the app runs in the background / another tab has the user's attention
*/
appVisible: boolean;
}
export interface BottomSheet {
/**
* Creates an ad-hoc Bottom Sheet; Same as calling $q.bottomSheet(...)
* @param opts Bottom Sheet options
* @returns Chainable Object
*/
create: (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;
}
export interface Cookies {
/**
* Get cookie
* @param name Cookie name
* @returns Cookie value; Returns null if cookie not found
*/
get: CookiesGetMethodType;
/**
* Get all cookies
* @returns Object with cookie names (as keys) and their values
*/
getAll: () => any;
/**
* Set cookie
* @param name Cookie name
* @param value Cookie value
* @param options Cookie options
*/
set: (
name: string,
value: string,
options?: {
/**
* Cookie expires detail; If specified as Number, then the unit is days; If specified as String, it can either be raw stringified date or in Xd Xh Xm Xs format (see examples)
*/
expires?: number | string | Date;
/**
* Cookie path
*/
path?: string;
/**
* Cookie domain
*/
domain?: string;
/**
* SameSite cookie option
*/
sameSite?: "Lax" | "Strict" | "None";
/**
* Is cookie Http Only?
*/
httpOnly?: boolean;
/**
* Is cookie secure? (https only)
*/
secure?: boolean;
/**
* Raw string for other cookie options; To be used as a last resort for possible newer props that are currently not yet implemented in Quasar
*/
other?: string;
},
) => void;
/**
* Check if cookie exists
* @param name Cookie name
* @returns Does cookie exists or not?
*/
has: (name: string) => boolean;
/**
* Remove a cookie
* @param name Cookie name
* @param options Cookie options
*/
remove: (
name: string,
options?: {
/**
* Cookie path
*/
path?: string;
/**
* Cookie domain
*/
domain?: string;
},
) => void;
/**
* For SSR usage only, and only on the global import (not on $q.cookies)
* @param ssrContext SSR Context Object
* @returns Cookie object (like $q.cookies) for SSR usage purposes
*/
parseSSR: (ssrContext: any) => Cookies;
}
export interface Dark {
/**
* Is Dark mode active?
*/
isActive: boolean;
/**
* Dark mode configuration (not status)
*/
mode: boolean | "auto";
/**
* Set dark mode status
* @param status Dark mode status
*/
set: (status: boolean | "auto") => void;
/**
* Toggle dark mode status
*/
toggle: () => void;
}
export interface Dialog {
/**
* Creates an ad-hoc Dialog; Same as calling $q.dialog(...)
* @param opts Dialog options
* @returns Chainable Object
*/
create: (opts: QDialogOptions) => DialogChainObject;
}
export interface IconSet {
/**
* Contents (icons) of the Quasar icon set
*/
props: {
/**
* Name of the Quasar icon set
*/
name: string;
/**
* Generic types
*/
type: {
/**
* Icon name following Quasar convention
*/
positive: string;
/**
* Icon name following Quasar convention
*/
negative: string;
/**
* Icon name following Quasar convention
*/
info: string;
/**
* Icon name following Quasar convention
*/
warning: string;
};
/**
* Arrow types
*/
arrow: {
/**
* Icon name following Quasar convention
*/
up: string;
/**
* Icon name following Quasar convention
*/
right: string;
/**
* Icon name following Quasar convention
*/
down: string;
/**
* Icon name following Quasar convention
*/
left: string;
/**
* Icon name following Quasar convention
*/
dropdown: string;
};
/**
* Chevron types
*/
chevron: {
/**
* Icon name following Quasar convention
*/
left: string;
/**
* Icon name following Quasar convention
*/
right: string;
};
/**
* Used by QColorPicker
*/
colorPicker: {
/**
* Icon name following Quasar convention
*/
spectrum: string;
/**
* Icon name following Quasar convention
*/
tune: string;
/**
* Icon name following Quasar convention
*/
palette: string;
};
/**
* Used by QPullToRefresh
*/
pullToRefresh: {
/**
* Icon name following Quasar convention
*/
icon: string;
};
/**
* Used by QCarousel
*/
carousel: {
/**
* Icon name following Quasar convention
*/
left: string;
/**
* Icon name following Quasar convention
*/
right: string;
/**
* Icon name following Quasar convention
*/
up: string;
/**
* Icon name following Quasar convention
*/
down: string;
/**
* Icon name following Quasar convention
*/
navigationIcon: string;
};
/**
* Used by QChip
*/
chip: {
/**
* Icon name following Quasar convention
*/
remove: string;
/**
* Icon name following Quasar convention
*/
selected: string;
};
/**
* Used by QDate/QTime
*/
datetime: {
/**
* Icon name following Quasar convention
*/
arrowLeft: string;
/**
* Icon name following Quasar convention
*/
arrowRight: string;
/**
* Icon name following Quasar convention
*/
now: string;
/**
* Icon name following Quasar convention
*/
today: string;
};
/**
* Used by QEditor
*/
editor: {
/**
* Icon name following Quasar convention
*/
bold: string;
/**
* Icon name following Quasar convention
*/
italic: string;
/**
* Icon name following Quasar convention
*/
strikethrough: string;
/**
* Icon name following Quasar convention
*/
underline: string;
/**
* Icon name following Quasar convention
*/
unorderedList: string;
/**
* Icon name following Quasar convention
*/
orderedList: string;
/**
* Icon name following Quasar convention
*/
subscript: string;
/**
* Icon name following Quasar convention
*/
superscript: string;
/**
* Icon name following Quasar convention
*/
hyperlink: string;
/**
* Icon name following Quasar convention
*/
toggleFullscreen: string;
/**
* Icon name following Quasar convention
*/
quote: string;
/**
* Icon name following Quasar convention
*/
left: string;
/**
* Icon name following Quasar convention
*/
center: string;
/**
* Icon name following Quasar convention
*/
right: string;
/**
* Icon name following Quasar convention
*/
justify: string;
/**
* Icon name following Quasar convention
*/
print: string;
/**
* Icon name following Quasar convention
*/
outdent: string;
/**
* Icon name following Quasar convention
*/
indent: string;
/**
* Icon name following Quasar convention
*/
removeFormat: string;
/**
* Icon name following Quasar convention
*/
formatting: string;
/**
* Icon name following Quasar convention
*/
fontSize: string;
/**
* Icon name following Quasar convention
*/
align: string;
/**
* Icon name following Quasar convention
*/
hr: string;
/**
* Icon name following Quasar convention
*/
undo: string;
/**
* Icon name following Quasar convention
*/
redo: string;
/**
* Used only when headingX is missing; Icon name following Quasar convention
*/
heading: string;
/**
* (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention
*/
heading1: string;
/**
* (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention
*/
heading2: string;
/**
* (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention
*/
heading3: string;
/**
* (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention
*/
heading4: string;
/**
* (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention
*/
heading5: string;
/**
* (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention
*/
heading6: string;
/**
* Icon name following Quasar convention
*/
code: string;
/**
* Used only when sizeX is missing; Icon name following Quasar convention
*/
size: string;
/**
* (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention
*/
size1: string;
/**
* (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention
*/
size2: string;
/**
* (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention
*/
size3: string;
/**
* (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention
*/
size4: string;
/**
* (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention
*/
size5: string;
/**
* (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention
*/
size6: string;
/**
* (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention
*/
size7: string;
/**
* Icon name following Quasar convention
*/
font: string;
/**
* Icon name following Quasar convention
*/
viewSource: string;
};
/**
* Used by QExpansionItem
*/
expansionItem: {
/**
* Icon name following Quasar convention
*/
icon: string;
/**
* Icon name following Quasar convention
*/
denseIcon: string;
};
/**
* Used by QFab
*/
fab: {
/**
* Icon name following Quasar convention
*/
icon: string;
/**
* Icon name following Quasar convention
*/
activeIcon: string;
};
/**
* Used by QField/QInput/QSelect/...
*/
field: {
/**
* Icon name following Quasar convention
*/
clear: string;
/**
* Icon name following Quasar convention
*/
error: string;
};
/**
* Used by QPagination
*/
pagination: {
/**
* Icon name following Quasar convention
*/
first: string;
/**
* Icon name following Quasar convention
*/
prev: string;
/**
* Icon name following Quasar convention
*/
next: string;
/**
* Icon name following Quasar convention
*/
last: string;
};
/**
* Used by QRating
*/
rating: {
/**
* Icon name following Quasar convention
*/
icon: string;
};
/**
* Used by QStepper
*/
stepper: {
/**
* Icon name following Quasar convention
*/
done: string;
/**
* Icon name following Quasar convention
*/
active: string;
/**
* Icon name following Quasar convention
*/
error: string;
};
/**
* Used by QTabs
*/
tabs: {
/**
* Icon name following Quasar convention
*/
left: string;
/**
* Icon name following Quasar convention
*/
right: string;
/**
* Icon name following Quasar convention
*/
up: string;
/**
* Icon name following Quasar convention
*/
down: string;
};
/**
* Used by QTable
*/
table: {
/**
* Icon name following Quasar convention
*/
arrowUp: string;
/**
* Icon name following Quasar convention
*/
warning: string;
/**
* Icon name following Quasar convention
*/
firstPage: string;
/**
* Icon name following Quasar convention
*/
prevPage: string;
/**
* Icon name following Quasar convention
*/
nextPage: string;
/**
* Icon name following Quasar convention
*/
lastPage: string;
};
/**
* Used by QTree
*/
tree: {
/**
* Icon name following Quasar convention
*/
icon: string;
};
/**
* Used by QUploader
*/
uploader: {
/**
* Icon name following Quasar convention
*/
done: string;
/**
* Icon name following Quasar convention
*/
clear: string;
/**
* Icon name following Quasar convention
*/
add: string;
/**
* Icon name following Quasar convention
*/
upload: string;
/**
* Icon name following Quasar convention
*/
removeQueue: string;
/**
* Icon name following Quasar convention
*/
removeUploaded: string;
};
};
/**
* Function to map icon names to other icon names; It is designed to be used internally by Quasar only; Only assign a function to it, but do not call it yourself
* @param iconName Icon name to test
* @returns The icon following Quasar convention
*/
iconMapFn:
| ((iconName: string) =>
| {
/**
* The mapped icon string, which will be handled by Quasar as if the original icon name was this value; ; Either use only 'icon' or 'cls' + 'content'
*/
icon?: string;
/**
* CSS classes to apply to the created DOM element; Either use 'cls' + 'content' or only 'icon'
*/
cls?: string;
/**
* Optional, in case you are using a ligature font and you need it as content of the created DOM element; Either use 'cls' + 'content' or only 'icon'
*/
content?: string;
}
| undefined)
| null;
/**
* Set another Quasar Icon Set
* @param iconSet Usually you will import such an object directly from quasar (eg: import qIconSet from 'quasar/icon-set/<icon-set-name>')
* @param ssrContent Required for SSR only
*/
set: (
iconSet: {
/**
* Name of the Quasar icon set
*/
name: string;
/**
* Generic types
*/
type: {
/**
* Icon name following Quasar convention
*/
positive: string;
/**
* Icon name following Quasar convention
*/
negative: string;
/**
* Icon name following Quasar convention
*/
info: string;
/**
* Icon name following Quasar convention
*/
warning: string;
};
/**
* Arrow types
*/
arrow: {
/**
* Icon name following Quasar convention
*/
up: string;
/**
* Icon name following Quasar convention
*/
right: string;
/**
* Icon name following Quasar convention
*/
down: string;
/**
* Icon name following Quasar convention
*/
left: string;
/**
* Icon name following Quasar convention
*/
dropdown: string;
};
/**
* Chevron types
*/
chevron: {
/**
* Icon name following Quasar convention
*/
left: string;
/**
* Icon name following Quasar convention
*/
right: string;
};
/**
* Used by QColorPicker
*/
colorPicker?: {
/**
* Icon name following Quasar convention
*/
spectrum: string;
/**
* Icon name following Quasar convention
*/
tune: string;
/**
* Icon name following Quasar convention
*/
palette: string;
};
/**
* Used by QPullToRefresh
*/
pullToRefresh: {
/**
* Icon name following Quasar convention
*/
icon: string;
};
/**
* Used by QCarousel
*/
carousel: {
/**
* Icon name following Quasar convention
*/
left: string;
/**
* Icon name following Quasar convention
*/
right: string;
/**
* Icon name following Quasar convention
*/
up: string;
/**
* Icon name following Quasar convention
*/
down: string;
/**
* Icon name following Quasar convention
*/
navigationIcon: string;
};
/**
* Used by QChip
*/
chip: {
/**
* Icon name following Quasar convention
*/
remove: string;
/**
* Icon name following Quasar convention
*/
selected: string;
};
/**
* Used by QDate/QTime
*/
datetime: {
/**
* Icon name following Quasar convention
*/
arrowLeft: string;
/**
* Icon name following Quasar convention
*/
arrowRight: string;
/**
* Icon name following Quasar convention
*/
now: string;
/**
* Icon name following Quasar convention
*/
today: string;
};
/**
* Used by QEditor
*/
editor: {
/**
* Icon name following Quasar convention
*/
bold: string;
/**
* Icon name following Quasar convention
*/
italic: string;
/**
* Icon name following Quasar convention
*/
strikethrough: string;
/**
* Icon name following Quasar convention
*/
underline: string;
/**
* Icon name following Quasar convention
*/
unorderedList: string;
/**
* Icon name following Quasar convention
*/
orderedList: string;
/**
* Icon name following Quasar convention
*/
subscript: string;
/**
* Icon name following Quasar convention
*/
superscript: string;
/**
* Icon name following Quasar convention
*/
hyperlink: string;
/**
* Icon name following Quasar convention
*/
toggleFullscreen: string;
/**
* Icon name following Quasar convention
*/
quote: string;
/**
* Icon name following Quasar convention
*/
left: string;
/**
* Icon name following Quasar convention
*/
center: string;
/**
* Icon name following Quasar convention
*/
right: string;
/**
* Icon name following Quasar convention
*/
justify: string;
/**
* Icon name following Quasar convention
*/
print: string;
/**
* Icon name following Quasar convention
*/
outdent: string;
/**
* Icon name following Quasar convention
*/
indent: string;
/**
* Icon name following Quasar convention
*/
removeFormat: string;
/**
* Icon name following Quasar convention
*/
formatting: string;
/**
* Icon name following Quasar convention
*/
fontSize: string;
/**
* Icon name following Quasar convention
*/
align: string;
/**
* Icon name following Quasar convention
*/
hr: string;
/**
* Icon name following Quasar convention
*/
undo: string;
/**
* Icon name following Quasar convention
*/
redo: string;
/**
* Used only when headingX is missing; Icon name following Quasar convention
*/
heading: string;
/**
* (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention
*/
heading1?: string;
/**
* (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention
*/
heading2?: string;
/**
* (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention
*/
heading3?: string;
/**
* (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention
*/
heading4?: string;
/**
* (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention
*/
heading5?: string;
/**
* (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention
*/
heading6?: string;
/**
* Icon name following Quasar convention
*/
code: string;
/**
* Used only when sizeX is missing; Icon name following Quasar convention
*/
size: string;
/**
* (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention
*/
size1?: string;
/**
* (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention
*/
size2?: string;
/**
* (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention
*/
size3?: string;
/**
* (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention
*/
size4?: string;
/**
* (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention
*/
size5?: string;
/**
* (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention
*/
size6?: string;
/**
* (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention
*/
size7?: string;
/**
* Icon name following Quasar convention
*/
font: string;
/**
* Icon name following Quasar convention
*/
viewSource: string;
};
/**
* Used by QExpansionItem
*/
expansionItem: {
/**
* Icon name following Quasar convention
*/
icon: string;
/**
* Icon name following Quasar convention
*/
denseIcon: string;
};
/**
* Used by QFab
*/
fab: {
/**
* Icon name following Quasar convention
*/
icon: string;
/**
* Icon name following Quasar convention
*/
activeIcon: string;
};
/**
* Used by QField/QInput/QSelect/...
*/
field: {
/**
* Icon name following Quasar convention
*/
clear: string;
/**
* Icon name following Quasar convention
*/
error: string;
};
/**
* Used by QPagination
*/
pagination: {
/**
* Icon name following Quasar convention
*/
first: string;
/**
* Icon name following Quasar convention
*/
prev: string;
/**
* Icon name following Quasar convention
*/
next: string;
/**
* Icon name following Quasar convention
*/
last: string;
};
/**
* Used by QRating
*/
rating: {
/**
* Icon name following Quasar convention
*/
icon: string;
};
/**
* Used by QStepper
*/
stepper: {
/**
* Icon name following Quasar convention
*/
done: string;
/**
* Icon name following Quasar convention
*/
active: string;
/**
* Icon name following Quasar convention
*/
error: string;
};
/**
* Used by QTabs
*/
tabs: {
/**
* Icon name following Quasar convention
*/
left: string;
/**
* Icon name following Quasar convention
*/
right: string;
/**
* Icon name following Quasar convention
*/
up: string;
/**
* Icon name following Quasar convention
*/
down: string;
};
/**
* Used by QTable
*/
table: {
/**
* Icon name following Quasar convention
*/
arrowUp: string;
/**
* Icon name following Quasar convention
*/
warning: string;
/**
* Icon name following Quasar convention
*/
firstPage: string;
/**
* Icon name following Quasar convention
*/
prevPage: string;
/**
* Icon name following Quasar convention
*/
nextPage: string;
/**
* Icon name following Quasar convention
*/
lastPage: string;
};
/**
* Used by QTree
*/
tree: {
/**
* Icon name following Quasar convention
*/
icon: string;
};
/**
* Used by QUploader
*/
uploader: {
/**
* Icon name following Quasar convention
*/
done: string;
/**
* Icon name following Quasar convention
*/
clear: string;
/**
* Icon name following Quasar convention
*/
add: string;
/**
* Icon name following Quasar convention
*/
upload: string;
/**
* Icon name following Quasar convention
*/
removeQueue: string;
/**
* Icon name following Quasar convention
*/
removeUploaded: string;
};
},
ssrContent?: any,
) => void;
}
export interface Lang {
/**
* Quasar language pack
*/
props: {
/**
* The ISO name of the Quasar language pack
*/
isoName: string;
/**
* The native name of the Quasar language pack
*/
nativeName: string;
/**
* Whether the language is RTL (right-to-left)
*/
rtl: boolean;
/**
* Generic labels
*/
label: {
/**
* Label
*/
clear: string;
/**
* Label
*/
ok: string;
/**
* Label
*/
cancel: string;
/**
* Label
*/
close: string;
/**
* Label
*/
set: string;
/**
* Label
*/
select: string;
/**
* Label
*/
reset: string;
/**
* Label
*/
remove: string;
/**
* Label
*/
update: string;
/**
* Label
*/
create: string;
/**
* Label
*/
search: string;
/**
* Label
*/
filter: string;
/**
* Label
*/
refresh: string;
/**
* Label function
* @param label Item to expand
* @returns Label
*/
expand: (label?: string) => string;
/**
* Label function
* @param label Item to collapse
* @returns Label
*/
collapse: (label?: string) => string;
};
/**
* QDate labels
*/
date: {
/**
* Label
*/
days: readonly any[];
/**
* Label
*/
daysShort: readonly any[];
/**
* Label
*/
months: readonly any[];
/**
* Label
*/
monthsShort: readonly any[];
/**
* 0-6, 0 - Sunday, 1 Monday, ...
*/
firstDayOfWeek: number;
/**
* Uses 24-hour format
*/
format24h: boolean;
/**
* Label
*/
pluralDay: string;
};
/**
* QTable labels
*/
table: {
/**
* Label
*/
noData: string;
/**
* Label
*/
noResults: string;
/**
* Label
*/
loading: string;
/**
* Label function
* @param rows Number of selected rows
* @returns Label
*/
selectedRecords: (rows: number) => string;
/**
* Label
*/
recordsPerPage: string;
/**
* Label
*/
allRows: string;
/**
* Label function
* @param start Page start index
* @param end Page end index
* @param total Total number of rows
* @returns Label
*/
pagination: (start: number, end: number, total: number) => string;
/**
* Label
*/
columns: string;
};
/**
* QEditor labels
*/
editor: {
/**
* Label
*/
url: string;
/**
* Label
*/
bold: string;
/**
* Label
*/
italic: string;
/**
* Label
*/
strikethrough: string;
/**
* Label
*/
underline: string;
/**
* Label
*/
unorderedList: string;
/**
* Label
*/
orderedList: string;
/**
* Label
*/
subscript: string;
/**
* Label
*/
superscript: string;
/**
* Label
*/
hyperlink: string;
/**
* Label
*/
toggleFullscreen: string;
/**
* Label
*/
quote: string;
/**
* Label
*/
left: string;
/**
* Label
*/
center: string;
/**
* Label
*/
right: string;
/**
* Label
*/
justify: string;
/**
* Label
*/
print: string;
/**
* Label
*/
outdent: string;
/**
* Label
*/
indent: string;
/**
* Label
*/
removeFormat: string;
/**
* Label
*/
formatting: string;
/**
* Label
*/
fontSize: string;
/**
* Label
*/
align: string;
/**
* Label
*/
hr: string;
/**
* Label
*/
undo: string;
/**
* Label
*/
redo: string;
/**
* Label
*/
heading1: string;
/**
* Label
*/
heading2: string;
/**
* Label
*/
heading3: string;
/**
* Label
*/
heading4: string;
/**
* Label
*/
heading5: string;
/**
* Label
*/
heading6: string;
/**
* Label
*/
paragraph: string;
/**
* Label
*/
code: string;
/**
* Label
*/
size1: string;
/**
* Label
*/
size2: string;
/**
* Label
*/
size3: string;
/**
* Label
*/
size4: string;
/**
* Label
*/
size5: string;
/**
* Label
*/
size6: string;
/**
* Label
*/
size7: string;
/**
* Label
*/
defaultFont: string;
/**
* Label
*/
viewSource: string;
};
/**
* QTree labels
*/
tree: {
/**
* Label
*/
noNodes: string;
/**
* Label
*/
noResults: string;
};
};
/**
* Set another Quasar Language Pack
* @param quasarLanguagePack Usually you will import such an object directly from quasar (eg: import qIconSet from 'quasar/lang/<lang-name>')
* @param ssrContent Required for SSR only
*/
set: (
quasarLanguagePack: {
/**
* The ISO name of the Quasar language pack
*/
isoName: string;
/**
* The native name of the Quasar language pack
*/
nativeName: string;
/**
* Whether the language is RTL (right-to-left)
* Default value: true
*/
rtl?: boolean;
/**
* Generic labels
*/
label: {
/**
* Label
*/
clear: string;
/**
* Label
*/
ok: string;
/**
* Label
*/
cancel: string;
/**
* Label
*/
close: string;
/**
* Label
*/
set: string;
/**
* Label
*/
select: string;
/**
* Label
*/
reset: string;
/**
* Label
*/
remove: string;
/**
* Label
*/
update: string;
/**
* Label
*/
create: string;
/**
* Label
*/
search: string;
/**
* Label
*/
filter: string;
/**
* Label
*/
refresh: string;
/**
* Label function
* @param label Item to expand
* @returns Label
*/
expand: (label?: string) => string;
/**
* Label function
* @param label Item to collapse
* @returns Label
*/
collapse: (label?: string) => string;
};
/**
* QDate labels
*/
date: {
/**
* Label
*/
days: readonly any[];
/**
* Label
*/
daysShort: readonly any[];
/**
* Label
*/
months: readonly any[];
/**
* Label
*/
monthsShort: readonly any[];
/**
* 0-6, 0 - Sunday, 1 Monday, ...
*/
firstDayOfWeek: number;
/**
* Uses 24-hour format
*/
format24h: boolean;
/**
* Label
*/
pluralDay: string;
};
/**
* QTable labels
*/
table: {
/**
* Label
*/
noData: string;
/**
* Label
*/
noResults: string;
/**
* Label
*/
loading: string;
/**
* Label function
* @param rows Number of selected rows
* @returns Label
*/
selectedRecords: (rows: number) => string;
/**
* Label
*/
recordsPerPage: string;
/**
* Label
*/
allRows: string;
/**
* Label function
* @param start Page start index
* @param end Page end index
* @param total Total number of rows
* @returns Label
*/
pagination: (start: number, end: number, total: number) => string;
/**
* Label
*/
columns: string;
};
/**
* QEditor labels
*/
editor: {
/**
* Label
*/
url: string;
/**
* Label
*/
bold: string;
/**
* Label
*/
italic: string;
/**
* Label
*/
strikethrough: string;
/**
* Label
*/
underline: string;
/**
* Label
*/
unorderedList: string;
/**
* Label
*/
orderedList: string;
/**
* Label
*/
subscript: string;
/**
* Label
*/
superscript: string;
/**
* Label
*/
hyperlink: string;
/**
* Label
*/
toggleFullscreen: string;
/**
* Label
*/
quote: string;
/**
* Label
*/
left: string;
/**
* Label
*/
center: string;
/**
* Label
*/
right: string;
/**
* Label
*/
justify: string;
/**
* Label
*/
print: string;
/**
* Label
*/
outdent: string;
/**
* Label
*/
indent: string;
/**
* Label
*/
removeFormat: string;
/**
* Label
*/
formatting: string;
/**
* Label
*/
fontSize: string;
/**
* Label
*/
align: string;
/**
* Label
*/
hr: string;
/**
* Label
*/
undo: string;
/**
* Label
*/
redo: string;
/**
* Label
*/
heading1: string;
/**
* Label
*/
heading2: string;
/**
* Label
*/
heading3: string;
/**
* Label
*/
heading4: string;
/**
* Label
*/
heading5: string;
/**
* Label
*/
heading6: string;
/**
* Label
*/
paragraph: string;
/**
* Label
*/
code: string;
/**
* Label
*/
size1: string;
/**
* Label
*/
size2: string;
/**
* Label
*/
size3: string;
/**
* Label
*/
size4: string;
/**
* Label
*/
size5: string;
/**
* Label
*/
size6: string;
/**
* Label
*/
size7: string;
/**
* Label
*/
defaultFont: string;
/**
* Label
*/
viewSource: string;
};
/**
* QTree labels
*/
tree: {
/**
* Label
*/
noNodes: string;
/**
* Label
*/
noResults: string;
};
},
ssrContent?: any,
) => void;
/**
* Get the browser locale ISO name; Returns undefined when it cannot determine current browser locale or when running on server in SSR mode
* @returns Browser locale ISO name
*/
getLocale: () => string | undefined;
}
export interface Loading {
/**
* Is Loading active?
*/
isActive: boolean;
/**
* Activate and show
* @param opts All props are optional
* @returns Calling this function with no parameters hides the group; When called with one Object parameter then it updates the Loading group (specified properties are shallow merged with the group ones; note that group cannot be changed while updating and it is ignored)
*/
show: (opts?: QLoadingShowOptions) => (props?: QLoadingUpdateOptions) => void;
/**
* Hide it
* @param group Optional Loading group name to hide instead of hiding all groups
*/
hide: (group?: string) => void;
/**
* Merge options into the default ones
* @param opts Pick the subprop you want to define
*/
setDefaults: (opts: {
/**
* 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;
/**
* Default Loading group name
* Default value: '__default_quasar_group__'
*/
group?: 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;
}) => void;
}
export interface LoadingBar {
/**
* Is LoadingBar active?
*/
isActive: boolean;
/**
* Notify bar you've started a background activity
* @param speed Delay (in milliseconds) between bar progress increments
*/
start: (speed?: number) => void;
/**
* Notify bar one background activity has finalized
*/
stop: () => void;
/**
* Manually trigger a bar progress increment
* @param amount Amount (0.0 < x < 1.0) to increment with
*/
increment: (amount?: number) => void;
/**
* Set the inner QAjaxBar's props
* @param props QAjaxBar component props
*/
setDefaults: (props: QLoadingBarOptions) => void;
}
export interface Meta {}
export interface Notify {
/**
* 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)
*/
create: (
opts: QNotifyCreateOptions | string,
) => (props?: QNotifyUpdateOptions) => void;
/**
* Merge options into the default ones
* @param opts Notification options except 'ignoreDefaults' (See 'opts' param of 'create()' for object properties)
*/
setDefaults: (opts: QNotifyOptions) => void;
/**
* Register a new type of notification (or override an existing one)
* @param typeName Name of the type (to be used as 'type' prop later on)
* @param typeOpts Notification options except 'ignoreDefaults' (See 'opts' param of 'create()' for object properties)
*/
registerType: (typeName: string, typeOpts: QNotifyOptions) => void;
}
export interface Platform {
/**
* Client browser User Agent
*/
userAgent: string;
/**
* Client browser details (property names depend on browser)
*/
is: {
/**
* Browser name
*/
name: string;
/**
* Platform name
*/
platform: string;
/**
* Detailed browser version
*/
version?: string;
/**
* Major browser version as a number
*/
versionNumber?: number;
/**
* Whether the platform is desktop
*/
desktop?: boolean;
/**
* Whether the platform is mobile
*/
mobile?: boolean;
/**
* Whether the platform is Electron
*/
electron?: boolean;
/**
* Whether the platform is BEX(Browser Extension)
*/
bex?: boolean;
/**
* Whether the platform is Capacitor
*/
capacitor?: boolean;
/**
* Whether the platform is Cordova
*/
cordova?: boolean;
/**
* Whether the platform is a native mobile wrapper
*/
nativeMobile?: boolean;
/**
* Type of the native mobile wrapper
*/
nativeMobileWrapper?: "cordova" | "capacitor";
/**
* Whether the browser is a Webkit one
*/
webkit?: boolean;
/**
* Whether the browser is Google Chrome
*/
chrome?: boolean;
/**
* Whether the browser is Firefox
*/
firefox?: boolean;
/**
* Whether the browser is Safari
*/
safari?: boolean;
/**
* Whether the browser is Microsoft Edge (Chromium)
*/
edgeChromium?: boolean;
/**
* Whether the browser is Microsoft Edge Legacy
*/
edge?: boolean;
/**
* Whether the browser is Opera
*/
opera?: boolean;
/**
* Whether the browser is Vivaldi
*/
vivaldi?: boolean;
/**
* Whether the operating system is Windows
*/
win?: boolean;
/**
* Whether the operating system is Linux
*/
linux?: boolean;
/**
* Whether the operating system is Mac OS
*/
mac?: boolean;
/**
* Whether the operating system is Chrome OS
*/
cros?: boolean;
/**
* Whether the operating system is Android
*/
android?: boolean;
/**
* Whether the operating system is iOS
*/
ios?: boolean;
/**
* Whether the operating system is Windows Phone
*/
winphone?: boolean;
/**
* Whether the device is an iPhone
*/
iphone?: boolean;
/**
* Whether the device is an iPad
*/
ipad?: boolean;
/**
* Whether the device is an iPod
*/
ipod?: boolean;
/**
* Whether the device is a Kindle
*/
kindle?: boolean;
/**
* Whether the browser is Amazon Silk
*/
silk?: boolean;
};
/**
* Client browser detectable properties
*/
has: {
/**
* Client browser runs on device with touch support
*/
touch: boolean;
/**
* Client browser has Web Storage support
*/
webStorage: boolean;
};
/**
* Client browser environment
*/
within: {
/**
* Does the app run under an iframe?
*/
iframe: boolean;
};
/**
* For SSR usage only, and only on the global import (not on $q.platform)
* @param ssrContext SSR Context Object
* @returns Platform object (like $q.platform) for SSR usage purposes
*/
parseSSR: (ssrContext: any) => Platform;
}
export interface