474 lines
16 KiB
JSON
474 lines
16 KiB
JSON
|
{
|
||
|
|
"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",
|
||
|
|
"tsType": "NamedColor",
|
||
|
|
"desc": "Color name for component from the Quasar Color Palette",
|
||
|
|
"examples": [
|
||
|
|
"primary",
|
||
|
|
"teal",
|
||
|
|
"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",
|
||
|
|
"tsType": "NamedColor",
|
||
|
|
"desc": "Color name for component from the Quasar Color Palette",
|
||
|
|
"examples": [
|
||
|
|
"primary",
|
||
|
|
"teal",
|
||
|
|
"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
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|