quasar

{ "type": "component", "meta": { "docsUrl": "https://v1.quasar.dev/vue-components/popup-edit" }, "props": { "value": { "desc": "Model of the component; Either use this property (along with a listener for 'input' event) OR use v-model directive", "category": "model", "type": "Any", "examples": [ "v-model=\"myValue\"" ] }, "auto-save": { "type": "Boolean", "desc": "Automatically save the model (if changed) when user clicks/taps outside of the popup; It does not apply to ESC key", "category": "behavior", "addedIn": "v1.9.0" }, "title": { "type": "String", "desc": "Optional title (unless 'title' slot is used)", "examples": [ "Calories" ], "category": "content" }, "buttons": { "type": "Boolean", "desc": "Show Set and Cancel buttons", "category": "content" }, "label-set": { "type": "String", "desc": "Override Set button label", "examples": [ "OK" ], "category": "content" }, "label-cancel": { "type": "String", "desc": "Override Cancel button label", "examples": [ "Cancel" ], "category": "content" }, "content-class": { "type": "String", "desc": "Class definitions to be attributed to the content", "examples": [ "my-special-class" ], "category": "style" }, "content-style": { "type": [ "Array", "String", "Object" ], "desc": "Style definitions to be attributed to the content", "examples": [ "background-color: #ff0000", ":content-style=\"{ color: '#ff0000' }\"" ], "category": "style" }, "color": { "type": "String", "desc": "Color name for component from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "style", "default": "primary" }, "validate": { "type": "Function", "desc": "Validates model then triggers 'save' and closes Popup; Returns a Boolean ('true' means valid, 'false' means abort); Syntax: validate(value); For best performance, reference it from your scope and do not define it inline", "params": { "value": { "type": "Any", "desc": "Model to validate", "examples": [ "My car" ] } }, "returns": { "type": "Boolean", "desc": "Is the model valid or not?" }, "examples": [ ":validate=\"myValidation\"" ], "category": "model" }, "disable": { "type": "Boolean", "desc": "Put component in disabled mode", "category": "state" }, "fit": { "type": "Boolean", "desc": "Allows the menu to match at least the full width of its target", "category": "position" }, "cover": { "type": "Boolean", "default": true, "desc": "Allows the menu to cover its target. When used, the 'self' and 'fit' props are no longer effective", "category": "position" }, "anchor": { "type": "String", "desc": "Two values setting the starting position or anchor point of the menu relative to its target", "values": [ "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" ], "examples": [ "top left", "bottom right" ], "category": "position" }, "self": { "type": "String", "desc": "Two values setting the menu's own position relative to its target", "values": [ "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" ], "examples": [ "top left", "bottom right" ], "category": "position" }, "offset": { "type": "Array", "desc": "An array of two numbers to offset the menu horizontally and vertically in pixels", "examples": [ "[8, 8]", "[5, 10]" ], "category": "style" }, "touch-position": { "type": "Boolean", "desc": "Allows for the target position to be set by the mouse position, when the target of the menu is either clicked or touched", "category": "behavior" }, "persistent": { "type": "Boolean", "desc": "Avoid menu closing by hitting ESC key or by clicking/tapping outside of the Popup", "category": "behavior" }, "separate-close-popup": { "type": "Boolean", "desc": "Separate from parent menu, marking it as a separate closing point for v-close-popup (without this, chained menus close all together)", "category": "behavior" }, "square": { "type": "Boolean", "desc": "Forces menu to have squared borders", "category": "style" }, "max-height": { "type": "String", "desc": "The maximum height of the menu; Size in CSS units, including unit name", "examples": [ "16px", "2rem" ], "category": "style" }, "max-width": { "type": "String", "desc": "The maximum width of the menu; Size in CSS units, including unit name", "examples": [ "16px", "2rem" ], "category": "style" } }, "slots": { "title": { "desc": "Slot for custom title (overrides 'title' prop when used)" } }, "scopedSlots": { "default": { "desc": "Used for injecting the form component", "scope": { "initialValue": { "type": "Any", "desc": "Initial value", "examples": [ 0.241, "Text" ] }, "value": { "type": "Any", "desc": "Current value", "examples": [ 0.241, "Text" ] }, "emitValue": { "type": "Function", "desc": "Function that emits an @input event in the context of the popup edit", "params": { "value": { "type": "Any", "desc": "Value to be emitted", "examples": [ 0, "Changed text" ] } }, "returns": null }, "validate": { "type": "Function", "desc": "Function that checks if the value is valid", "params": { "value": { "type": "Any", "desc": "Value to be checked", "examples": [ 0, "Changed text" ] } }, "returns": { "type": "Boolean", "desc": "Checked value is valid or not" } }, "set": { "type": "Function", "desc": "Function that sets the value and closes the popup", "params": null, "returns": null }, "cancel": { "type": "Function", "desc": "Function that cancels the editing and reverts the value to the initialValue", "params": null, "returns": null } } } }, "events": { "input": { "desc": "Emitted when Popup gets cancelled in order to reset model to its initial value; Is also used by v-model", "params": { "value": { "type": "Any", "desc": "New model value", "required": true } } }, "before-show": { "desc": "Emitted right before Popup gets shown" }, "show": { "desc": "Emitted right after Popup gets shown" }, "before-hide": { "desc": "Emitted right before Popup gets dismissed" }, "hide": { "desc": "Emitted right after Popup gets dismissed" }, "save": { "desc": "Emitted when value has been successfully validated and it should be saved", "params": { "value": { "type": "Any", "desc": "Validated value to be saved" }, "initialValue": { "type": "Any", "desc": "Initial value, before changes" } } }, "cancel": { "desc": "Emitted when user cancelled the change (hit ESC key or clicking outside of Popup or hit 'Cancel' button)", "params": { "value": { "type": "Any", "desc": "Edited value" }, "initialValue": { "type": "Any", "desc": "Initial value, before changes" } } } }, "methods": { "set": { "desc": "Trigger a model update; Validates model (and emits 'save' event if it's the case) then closes Popup" }, "cancel": { "desc": "Triggers a model reset to its initial value ('cancel' event is emitted) then closes Popup" }, "show": { "desc": "Triggers component to show", "params": { "evt": { "type": "Object", "required": false, "desc": "JS event object" } }, "addedIn": "v1.12.0" }, "hide": { "desc": "Triggers component to hide", "params": { "evt": { "type": "Object", "required": false, "desc": "JS event object" } }, "addedIn": "v1.12.0" } } }