quasar

{ "type": "plugin", "meta": { "docsUrl": "https://v1.quasar.dev/quasar-plugins/dialog" }, "injection": "$q.dialog", "methods": { "create": { "desc": "Creates an ad-hoc Dialog; Same as calling $q.dialog(...)", "params": { "opts": { "type": "Object", "required": true, "definition": { "class": { "type": [ "String", "Array", "Object" ], "desc": "CSS Class name to apply to the Dialog's QCard", "examples": [ "my-class" ] }, "style": { "type": [ "String", "Array", "Object" ], "desc": "CSS style to apply to the Dialog's QCard", "examples": [ "border: 2px solid black" ] }, "title": { "type": "String", "desc": "A text for the heading title of the dialog", "examples": [ "Continue?" ] }, "message": { "type": "String", "desc": "A text with more information about what needs to be input, selected or confirmed.", "examples": [ "Are you certain you want to continue?" ] }, "html": { "type": "Boolean", "desc": "Render title and message as HTML; This can lead to XSS attacks, so make sure that you sanitize the message first" }, "position": { "type": "String", "desc": "Position of the Dialog on screen. Standard is centered.", "values": [ "top", "right", "bottom", "left", "standard" ], "default": "standard" }, "prompt": { "type": "Object", "desc": "An object definition of the input field for the prompting question.", "examples": [ "prompt: { model: this.promptVal, type: 'number' }" ], "definition": { "model": { "type": "String", "desc": "The initial value of the input", "required": true }, "type": { "type": "String", "desc": "Optional property to determine the input field type", "default": "text", "examples": [ "text", "number", "textarea" ] }, "isValid": { "type": "Function", "desc": "Is typed content valid?", "params": { "val": { "type": "String", "desc": "The value of the input" } }, "returns": { "type": "Boolean", "desc": "The text passed validation or not" } }, "attrs": { "type": "Object", "desc": "Attributes to pass to prompt control", "examples": [ "{ autocomplete: 'off' }" ], "addedIn": "v1.9.12" }, "label": { "type": "String", "desc": "A text label that will “float” up above the input field, once the field gets focus", "examples": [ "Username" ], "addedIn": "v1.9.3" }, "stackLabel": { "type": "Boolean", "desc": "Label will be always shown above the field regardless of field content (if any)", "addedIn": "v1.9.3" }, "filled": { "type": "Boolean", "desc": "Use 'filled' design for the field", "addedIn": "v1.9.3" }, "outlined": { "type": "Boolean", "desc": "Use 'outlined' design for the field", "addedIn": "v1.9.3" }, "standout": { "type": [ "Boolean", "String" ], "desc": "Use 'standout' design for the field; Specifies classes to be applied when focused (overriding default ones)", "examples": [ "standout", "standout=\"bg-primary text-white\"" ], "addedIn": "v1.9.3" }, "rounded": { "type": "Boolean", "desc": "Applies a small standard border-radius for a squared shape of the component", "category": "style", "addedIn": "v1.12.3" }, "square": { "type": "Boolean", "desc": "Remove border-radius so borders are squared; Overrides 'rounded' prop", "addedIn": "v1.12.3" }, "counter": { "type": "Boolean", "desc": "Show an automatic counter on bottom right", "addedIn": "v1.12.3" }, "maxlength": { "type": [ "String", "Number" ], "desc": "Specify a max length of model", "examples": [ "12" ], "addedIn": "v1.12.3" }, "prefix": { "type": "String", "desc": "Prefix", "examples": [ "$" ], "addedIn": "v1.12.3" }, "suffix": { "type": "String", "desc": "Suffix", "examples": [ "@gmail.com" ], "addedIn": "v1.12.3" } } }, "options": { "type": "Object", "desc": "An object definition for creating the selection form content", "examples": [ "{ model: this.dialogSelection, type: 'radio', items: [...listOfItems] }" ], "definition": { "model": { "type": [ "String", "Array" ], "desc": "The value of the selection (String if it's of type radio or Array otherwise)", "required": true, "examples": [ "[]" ] }, "type": { "type": "String", "desc": "The type of selection", "default": "radio", "values": [ "radio", "checkbox", "toggle" ] }, "items": { "type": "Array", "desc": "The list of options to interact with; Equivalent to options prop of the QOptionsGroup component", "examples": [ "[ { label: 'Option 1', value: 'op1' }, { label: 'Option 2', value: 'op2' }, { label: 'Option 3', value: 'op3' } ]" ] }, "isValid": { "type": "Function", "desc": "Is the model valid?", "params": { "model": { "type": [ "String", "Array" ], "desc": "The current model (String if it's of type radio or Array otherwise)", "examples": [ "opt2", "[ 'opt1' ]", "[]", "[ 'opt1', 'opt3' ]" ] } }, "returns": { "type": "Boolean", "desc": "The selection passed validation or not" } } } }, "progress": { "type": [ "Boolean", "Object" ], "desc": "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", "definition": { "spinner": { "type": "Component", "desc": "One of the QSpinners" }, "color": { "type": "String", "desc": "Color name for component from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "style" } }, "addedIn": "v1.14.0" }, "ok": { "type": [ "String", "Object", "Boolean" ], "desc": "Props for an 'OK' button", "definition": { "...props": { "type": "Any", "desc": "See QBtn for available props" } } }, "cancel": { "type": [ "String", "Object", "Boolean" ], "desc": "Props for a 'CANCEL' button", "definition": { "...props": { "type": "Any", "desc": "See QBtn for available props" } } }, "focus": { "type": "String", "desc": "What button to focus, unless you also have 'prompt' or 'options'", "values": [ "ok", "cancel", "none" ], "default": "ok", "addedIn": "v1.5.0" }, "stackButtons": { "type": "Boolean", "desc": "Makes buttons be stacked instead of vertically aligned" }, "color": { "type": "String", "desc": "Color name for component from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "style" }, "dark": { "type": "Boolean", "desc": "Apply dark mode", "category": "style" }, "persistent": { "type": "Boolean", "desc": "User cannot dismiss Dialog if clicking outside of it or hitting ESC key; Also, an app route change won't dismiss it" }, "noEscDismiss": { "type": "Boolean", "desc": "User cannot dismiss Dialog by hitting ESC key; No need to set it if 'persistent' prop is also set" }, "noBackdropDismiss": { "type": "Boolean", "desc": "User cannot dismiss Dialog by clicking outside of it; No need to set it if 'persistent' prop is also set" }, "noRouteDismiss": { "type": "Boolean", "desc": "Changing route app won't dismiss Dialog; No need to set it if 'persistent' prop is also set" }, "seamless": { "type": "Boolean", "desc": "Put Dialog into seamless mode; Does not use a backdrop so user is able to interact with the rest of the page too" }, "maximized": { "type": "Boolean", "desc": "Put Dialog into maximized mode" }, "fullWidth": { "type": "Boolean", "desc": "Dialog will try to render with same width as the window" }, "fullHeight": { "type": "Boolean", "desc": "Dialog will try to render with same height as the window" }, "transitionShow": { "type": "String", "desc": "One of Quasar's embedded transitions", "examples": [ "fade", "slide-down" ], "category": "behavior", "default": "scale" }, "transitionHide": { "type": "String", "desc": "One of Quasar's embedded transitions", "examples": [ "fade", "slide-down" ], "category": "behavior", "default": "scale" }, "component": { "type": "Any", "desc": "Use custom dialog component; use along with 'parent' prop where possible; if using this prop, all others described here will be supplied to your custom component" }, "parent": { "type": "Object", "desc": "Required if using 'component' prop and you need access to vuex store, router and so on; Specify Vue parent component", "examples": [ "parent: this" ] }, "root": { "type": "Object", "desc": "Deprecated alias for parent", "examples": [ "root: this" ] }, "...props": { "type": "Any", "desc": "User defined props which will be forwarded to underlying custom component if 'component' prop is used" } }, "desc": "Dialog options", "tsType": "QDialogOptions" } }, "returns": { "type": "Object", "desc": "Chainable Object", "tsType": "DialogChainObject", "definition": { "onOk": { "type": "Function", "desc": "Receives a Function param to tell what to do when OK is pressed / option is selected", "params": { "callbackFn": { "type": "Function", "desc": "Tell what to do", "required": true, "params": null, "returns": null } }, "returns": { "type": "Object", "desc": "Chained Object", "tsType": "DialogChainObject" } }, "onCancel": { "type": "Function", "desc": "Receives a Function as param to tell what to do when Cancel is pressed / dialog is dismissed", "params": { "callbackFn": { "type": "Function", "desc": "Tell what to do", "required": true, "params": null, "returns": null } }, "returns": { "type": "Object", "desc": "Chained Object", "tsType": "DialogChainObject" } }, "onDismiss": { "type": "Function", "desc": "Receives a Function param to tell what to do when the dialog is closed", "params": { "callbackFn": { "type": "Function", "desc": "Tell what to do", "required": true, "params": null, "returns": null } }, "returns": { "type": "Object", "desc": "Chained Object", "tsType": "DialogChainObject" } }, "hide": { "type": "Function", "desc": "Hides the dialog when called", "params": null, "returns": { "type": "Object", "desc": "Chained Object", "tsType": "DialogChainObject" } }, "update": { "type": "Function", "desc": "Updates the initial properties (given as create() param) except for 'component' and 'parent' (and deprecated 'root')", "params": { "opts": { "type": "Object", "desc": "Props (except 'component' and 'parent') which will overwrite the initial create() params" } }, "returns": { "type": "Object", "desc": "Chained Object", "tsType": "DialogChainObject" }, "addedIn": "v1.14.0" } } }, "tsInjectionPoint": true } } }