quasar

{ "type": "plugin", "meta": { "docsUrl": "https://v2.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" ], "tsType": "VueClassProp", "desc": "CSS Class name to apply to the Dialog's QCard", "examples": [ "my-class" ] }, "style": { "type": [ "String", "Array", "Object" ], "tsType": "VueStyleProp", "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", "required": false }, "prompt": { "type": "Object", "tsType": "QDialogInputPrompt", "desc": "An object definition of the input field for the prompting question.", "examples": [ "prompt: { model: this.promptVal, type: 'number' }" ], "definition": { "model": { "type": "String", "required": true, "desc": "The initial value of the input" }, "type": { "type": "String", "desc": "Optional property to determine the input field type", "default": "text", "examples": [ "text", "number", "textarea" ], "required": false }, "isValid": { "type": "Function", "desc": "Is typed content valid?", "params": { "val": { "type": "String", "required": true, "desc": "The value of the input" } }, "returns": { "type": "Boolean", "desc": "The text passed validation or not" } }, "...QInputProps": { "type": "Any", "desc": "Any QInput props, like color, label, stackLabel, filled, outlined, rounded, prefix etc", "examples": [ "label: 'My Label'", "standout: true", "counter: true", "maxlength: 12" ] }, "...nativeAttributes": { "type": "Object", "desc": "Any native attributes to pass to the prompt control", "examples": [ "autocomplete: 'off'" ] } } }, "options": { "type": "Object", "tsType": "QDialogSelectionPrompt", "desc": "An object definition for creating the selection form content", "examples": [ "{ model: this.dialogSelection, type: 'radio', items: [...listOfItems] }" ], "definition": { "model": { "type": [ "String", "Array" ], "required": true, "desc": "The value of the selection (String if it's of type radio or Array otherwise)", "examples": [ "[]" ] }, "type": { "type": "String", "desc": "The type of selection", "default": "radio", "values": [ "radio", "checkbox", "toggle" ], "required": false }, "items": { "type": "Array", "desc": "The list of options to interact with; Equivalent to options prop of the QOptionGroup 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" ], "required": true, "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" } }, "...QOptionGroupProps": { "type": "Any", "desc": "Any QOptionGroup props", "examples": [ "color: 'deep-purple-4'", "inline: true", "dense: true", "leftLabel: true" ] }, "...nativeAttributes": { "type": "Object", "desc": "Any native attributes to pass to the inner QOptionGroup" } } }, "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" } } }, "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", "required": false }, "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": "transition", "default": "scale", "required": false }, "transitionHide": { "type": "String", "desc": "One of Quasar's embedded transitions", "examples": [ "fade", "slide-down" ], "category": "transition", "default": "scale", "required": false }, "component": { "type": [ "Component", "String" ], "desc": "Use custom dialog component; use along with 'componentProps' prop where possible", "examples": [ "CustomComponent", "'custom-component'" ] }, "componentProps": { "type": "Object", "desc": "User defined props which will be forwarded to underlying custom component if 'component' prop is used" } }, "desc": "Dialog options", "tsType": "QDialogOptions", "autoDefineTsType": true } }, "returns": { "type": "Object", "desc": "Chainable Object", "tsType": "DialogChainObject", "autoDefineTsType": true, "definition": { "onOk": { "type": "Function", "required": true, "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": { "payload": { "type": "Any", "desc": "The payload if called onDialogOK with the parameter or emitted one with the 'ok' event", "required": false, "examples": [ "'Quasar Framework'", "[ 1, 2, 6, 3 ]", "{ book: { id: 1, name: 'Lorem Ipsum' }, user: { name: 'Lorem J. Ipsum', role: 'admin' } }" ] } }, "returns": null, "examples": [ "() => console.log('OK!')", "(payload) => Notify.create({ type: 'positive', message: `Successfully saved '${payload.book.name}' book!` })" ] } }, "returns": { "type": "Object", "desc": "Chained Object", "tsType": "DialogChainObject" } }, "onCancel": { "type": "Function", "required": true, "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", "required": true, "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", "required": true, "desc": "Hides the dialog when called", "params": null, "returns": { "type": "Object", "desc": "Chained Object", "tsType": "DialogChainObject" } }, "update": { "type": "Function", "required": true, "desc": "Updates the initial properties (given as create() param) except for 'component'", "params": { "opts": { "type": "Object", "required": true, "desc": "Props (except 'component') which will overwrite the initial create() params; If create() was invoked with a custom dialog component then this param should contain the new componentProps" } }, "returns": { "type": "Object", "desc": "Chained Object", "tsType": "DialogChainObject" } } } }, "tsInjectionPoint": true } } }