{
  "type": "component",
  "props": {
    "virtual-scroll-horizontal": {
      "type": "Boolean",
      "desc": "Make virtual list work in horizontal mode",
      "category": "behavior"
    },
    "virtual-scroll-slice-size": {
      "type": "Number",
      "desc": "Number of options to render in the virtual list",
      "default": "30",
      "examples": [
        ":virtual-scroll-slice-size=\"60\""
      ],
      "category": "virtual-scroll"
    },
    "virtual-scroll-item-size": {
      "type": "Number",
      "desc": "Default size in pixels (height if vertical, width if horizontal) of an option; This value is used for rendering the initial list; Try to use a value close to the minimum size of an item",
      "default": "24",
      "examples": [
        ":virtual-scroll-item-size=\"48\""
      ],
      "category": "virtual-scroll"
    },
    "virtual-scroll-sticky-size-start": {
      "type": "Number",
      "desc": "Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the start of the list; A correct value will improve scroll precision",
      "default": "0",
      "examples": [
        ":virtual-scroll-sticky-size-start=\"48\""
      ],
      "category": "virtual-scroll"
    },
    "virtual-scroll-sticky-size-end": {
      "type": "Number",
      "desc": "Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the end of the list; A correct value will improve scroll precision",
      "default": "0",
      "examples": [
        ":virtual-scroll-sticky-size-end=\"48\""
      ],
      "category": "virtual-scroll"
    },
    "error": {
      "type": "Boolean",
      "desc": "Does field have validation errors?",
      "category": "behavior"
    },
    "error-message": {
      "type": "String",
      "desc": "Validation error message (gets displayed only if 'error' is set to 'true')",
      "examples": [
        "Username must have at least 5 characters"
      ],
      "category": "content"
    },
    "no-error-icon": {
      "type": "Boolean",
      "desc": "Hide error icon when there is an error",
      "category": "content"
    },
    "rules": {
      "type": "Array",
      "desc": "Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules",
      "examples": [
        ":rules=\"[ val => val.length <= 3 || 'Please use maximum 3 characters' ]\"",
        ":rules=\"[ 'fulltime' ]\""
      ],
      "category": "behavior"
    },
    "lazy-rules": {
      "type": "Boolean",
      "desc": "Check validation status against the 'rules' only after field loses focus for first time",
      "category": "behavior"
    },
    "label": {
      "type": "String",
      "desc": "A text label that will “float” up above the input field, once the field gets focus",
      "examples": [
        "Username"
      ],
      "category": "content"
    },
    "stack-label": {
      "type": "Boolean",
      "desc": "Label will be always shown above the field regardless of field content (if any)",
      "category": "content"
    },
    "hint": {
      "type": "String",
      "desc": "Helper (hint) text which gets placed below your wrapped form component",
      "examples": [
        "Fill in between 3 and 12 characters"
      ],
      "category": "content"
    },
    "hide-hint": {
      "type": "Boolean",
      "desc": "Hide the helper (hint) text when field doesn't have focus",
      "category": "content"
    },
    "prefix": {
      "type": "String",
      "desc": "Prefix",
      "examples": [
        "$"
      ],
      "category": "content"
    },
    "suffix": {
      "type": "String",
      "desc": "Suffix",
      "examples": [
        "@gmail.com"
      ],
      "category": "content"
    },
    "color": {
      "type": "String",
      "desc": "Color name for component from the Quasar Color Palette",
      "examples": [
        "primary",
        "teal-10"
      ],
      "category": "style"
    },
    "bg-color": {
      "type": "String",
      "desc": "Color name for component from the Quasar Color Palette",
      "examples": [
        "primary",
        "teal-10"
      ],
      "category": "style"
    },
    "dark": {
      "type": "Boolean",
      "desc": "Notify the component that the background is a dark color",
      "category": "style"
    },
    "loading": {
      "type": "Boolean",
      "desc": "Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the 'loading' slot.",
      "category": "behavior|content"
    },
    "clearable": {
      "type": "Boolean",
      "desc": "Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null",
      "category": "behavior|content"
    },
    "clear-icon": {
      "type": "String",
      "desc": "Custom icon to use for the clear button when using along with 'clearable' prop",
      "examples": [
        "close"
      ],
      "category": "content"
    },
    "filled": {
      "type": "Boolean",
      "desc": "Use 'filled' design for the field",
      "category": "style"
    },
    "outlined": {
      "type": "Boolean",
      "desc": "Use 'outlined' design for the field",
      "category": "style"
    },
    "borderless": {
      "type": "Boolean",
      "desc": "Use 'borderless' design for the field",
      "category": "style"
    },
    "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\""
      ],
      "category": "style"
    },
    "bottom-slots": {
      "type": "Boolean",
      "desc": "Enables bottom slots ('error', 'hint', 'counter')",
      "category": "content"
    },
    "hide-bottom-space": {
      "type": "Boolean",
      "desc": "Does not reserves space for hint/error/counter anymore when these are not used; as a result, it also disables the animation for those",
      "category": "style"
    },
    "counter": {
      "type": "Boolean",
      "desc": "Show an automatic counter on bottom right",
      "category": "content"
    },
    "rounded": {
      "type": "Boolean",
      "desc": "Applies a small standard border-radius for a squared shape of the component",
      "category": "style"
    },
    "square": {
      "type": "Boolean",
      "desc": "Remove border-radius so borders are squared; Overrides 'rounded' prop",
      "category": "style"
    },
    "dense": {
      "type": "Boolean",
      "desc": "Dense mode; occupies less space",
      "category": "style"
    },
    "items-aligned": {
      "type": "Boolean",
      "desc": "Align content to match QItem",
      "category": "content"
    },
    "disable": {
      "type": "Boolean",
      "desc": "Put component in disabled mode",
      "category": "state"
    },
    "readonly": {
      "type": "Boolean",
      "desc": "Put component in readonly mode",
      "category": "state"
    },
    "autofocus": {
      "type": "Boolean",
      "desc": "Focus field on initial component render",
      "category": "behavior"
    },
    "value": {
      "type": [
        "Number",
        "String",
        "Array"
      ],
      "desc": "Model of the component; Must be Array if using 'multiple' prop; Either use this property (along with a listener for 'input' event) OR use v-model directive",
      "required": true,
      "examples": [
        "v-model=\"myModel\""
      ],
      "category": "model"
    },
    "multiple": {
      "type": "Boolean",
      "desc": "Allow multiple selection; Model must be Array",
      "category": "model|selection"
    },
    "display-value": {
      "type": [
        "Number",
        "String"
      ],
      "desc": "Override default selection string, if not using 'selected' slot/scoped slot and if not using 'use-chips' prop",
      "examples": [
        "Options: x, y, z"
      ],
      "category": "selection"
    },
    "display-value-sanitize": {
      "type": "Boolean",
      "default": "false",
      "desc": "Force use of textContent instead of innerHTML to render selected option(s); Use it when the selected option(s) might be unsafe (from user input); Does NOT apply when using 'selected' or 'selected-item' slots!",
      "category": "selection"
    },
    "options": {
      "type": "Array",
      "desc": "Available options that the user can select from. For best performance freeze the list of options.",
      "default": "[]",
      "examples": [
        ":options=\"[ 'BMW', 'Samsung Phone' ]\"",
        ":options=\"[ { label: 'BMW', value: 'car' }, { label: 'Samsung Phone', value: 'phone' } ]\""
      ],
      "category": "options"
    },
    "option-value": {
      "type": [
        "Function",
        "String"
      ],
      "desc": "Property of option which holds the 'value'",
      "default": "value",
      "examples": [
        "option-value=\"modelNumber\"",
        ":option-value=\"(item) => item === null ? null : item.modelNumber\""
      ],
      "category": "options"
    },
    "option-label": {
      "type": [
        "Function",
        "String"
      ],
      "desc": "Property of option which holds the 'label'",
      "default": "label",
      "examples": [
        "option-label=\"itemName\"",
        ":option-label=\"(item) => item === null ? 'Null value' : item.itemName\""
      ],
      "category": "options"
    },
    "option-disable": {
      "type": [
        "Function",
        "String"
      ],
      "desc": "Property of option which tells it's disabled; The value of the property must be a Boolean",
      "default": "disable",
      "examples": [
        "option-disable=\"cannotSelect\"",
        ":option-disable=\"(item) => item === null ? true : item.cannotSelect\""
      ],
      "category": "options"
    },
    "hide-selected": {
      "type": "Boolean",
      "desc": "Hides selection; Use the underlying input tag to hold the label (instead of showing it to the right of the input) of the selected option; Only works for non 'multiple' Selects",
      "category": "selection"
    },
    "hide-dropdown-icon": {
      "type": "Boolean",
      "desc": "Hides dropdown icon",
      "category": "content|behavior"
    },
    "dropdown-icon": {
      "type": "String",
      "desc": "Icon name following Quasar convention; make sure you have the icon library installed unless you are using 'img:' prefix",
      "examples": [
        "map",
        "ion-add",
        "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
        "img:statics/path/to/some_image.png"
      ],
      "category": "content"
    },
    "max-values": {
      "type": [
        "Number",
        "String"
      ],
      "desc": "Allow a maximum number of selections that the user can do",
      "examples": [
        "5"
      ],
      "category": "selection"
    },
    "options-dense": {
      "type": "Boolean",
      "desc": "Dense mode for options list; occupies less space",
      "category": "options"
    },
    "options-dark": {
      "type": "Boolean",
      "desc": "Options menu will be colored with a dark color",
      "category": "options"
    },
    "options-selected-class": {
      "type": "String",
      "desc": "CSS class name for options that are active/selected",
      "examples": [
        "text-orange"
      ],
      "category": "options"
    },
    "options-cover": {
      "type": "Boolean",
      "desc": "Expanded menu will cover the component (will not work along with 'use-input' prop for obvious reasons)",
      "category": "options"
    },
    "options-sanitize": {
      "type": "Boolean",
      "default": "false",
      "desc": "Force use of textContent instead of innerHTML to render options; Use it when the options might be unsafe (from user input); Does NOT apply when using 'option' slot!",
      "category": "options"
    },
    "popup-content-class": {
      "type": "String",
      "desc": "Class definitions to be attributed to the popup content",
      "examples": [
        "my-special-class"
      ],
      "category": "style"
    },
    "popup-content-style": {
      "type": [
        "Array",
        "String",
        "Object"
      ],
      "desc": "Style definitions to be attributed to the popup content",
      "examples": [
        "background-color: #ff0000",
        ":content-style=\"{ backgroundColor: '#ff0000' }\""
      ],
      "category": "style"
    },
    "use-input": {
      "type": "Boolean",
      "desc": "Use an input tag where users can type",
      "category": "content"
    },
    "use-chips": {
      "type": "Boolean",
      "desc": "Use QChip to show what is currently selected",
      "category": "selection"
    },
    "fill-input": {
      "type": "Boolean",
      "desc": "Fills the input with current value; Useful along with 'hide-selected'; Does NOT works along with 'multiple' selection",
      "category": "behavior"
    },
    "new-value-mode": {
      "type": "String",
      "desc": "Enables creation of new values and defines behavior when a new value is added: 'add' means it adds the value (even if possible duplicate), 'add-unique' adds only unique values, and 'toggle' adds or removes the value (based on if it exists or not already); When using this prop then listening for @new-value becomes optional (only to override the behavior defined by 'new-value-mode')",
      "values": [
        "add",
        "add-unique",
        "toggle"
      ],
      "category": "behavior"
    },
    "map-options": {
      "type": "Boolean",
      "desc": "Try to map labels of model from 'options' Array; has a small performance penalty; If you are using emit-value you will probably need to use map-options to display the label text in the select field rather than the value;  Refer to the 'Affecting model' section above",
      "category": "options"
    },
    "emit-value": {
      "type": "Boolean",
      "desc": "Update model with the value of the selected option instead of the whole option",
      "category": "model"
    },
    "input-debounce": {
      "type": [
        "Number",
        "String"
      ],
      "desc": "Debounce the input model update with an amount of milliseconds",
      "default": 500,
      "examples": [
        650
      ],
      "category": "content"
    },
    "input-class": {
      "type": [
        "Array",
        "String",
        "Object"
      ],
      "desc": "Class definitions to be attributed to the underlying input tag",
      "examples": [
        "my-special-class",
        ":input-class=\"{ 'my-special-class': <condition> }\""
      ],
      "category": "style",
      "addedIn": "v1.1.7"
    },
    "input-style": {
      "type": [
        "Array",
        "String",
        "Object"
      ],
      "desc": "Style definitions to be attributed to the underlying input tag",
      "examples": [
        "background-color: #ff0000",
        ":input-style=\"{ backgroundColor: '#ff0000' }\""
      ],
      "category": "style",
      "addedIn": "v1.1.7"
    },
    "transition-show": {
      "type": "String",
      "desc": "Transition when showing the menu/dialog; One of Quasar's embedded transitions",
      "examples": [
        "fade",
        "slide-down"
      ],
      "category": "behavior",
      "default": "fade"
    },
    "transition-hide": {
      "type": "String",
      "desc": "Transition when hiding the menu/dialog; One of Quasar's embedded transitions",
      "examples": [
        "fade",
        "slide-down"
      ],
      "category": "behavior",
      "default": "fade"
    },
    "behavior": {
      "type": "String",
      "desc": "Overrides the default dynamic mode of showing as menu on desktop and dialog on mobiles",
      "values": [
        "default",
        "menu",
        "dialog"
      ],
      "default": "default",
      "category": "behavior",
      "addedIn": "v1.1.0"
    }
  },
  "slots": {
    "default": {
      "desc": "Field main content"
    },
    "prepend": {
      "desc": "Prepend inner field; Suggestions: QIcon, QBtn"
    },
    "append": {
      "desc": "Append to inner field; Suggestions: QIcon, QBtn"
    },
    "before": {
      "desc": "Prepend outer field; Suggestions: QIcon, QBtn"
    },
    "after": {
      "desc": "Append outer field; Suggestions: QIcon, QBtn"
    },
    "error": {
      "desc": "Slot for errors; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>"
    },
    "hint": {
      "desc": "Slot for hint text; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>"
    },
    "counter": {
      "desc": "Slot for counter text; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>"
    },
    "loading": {
      "desc": "Override default spinner when component is in loading mode; Suggestion: spinners"
    },
    "selected": {
      "desc": "Override default selection slot; Suggestion: QChip"
    },
    "before-options": {
      "desc": "Template slot for the elements that should be rendered before the list of options",
      "addedIn": "v1.1.0"
    },
    "after-options": {
      "desc": "Template slot for the elements that should be rendered after the list of options",
      "addedIn": "v1.1.0"
    }
  },
  "scopedSlots": {
    "no-option": {
      "desc": "What should the menu display after filtering options and none are left to be displayed; Suggestion: <div>",
      "scope": {
        "inputValue": {
          "type": "String",
          "desc": "Input textfield value, if any (not QSelect model)",
          "examples": [
            "typed something"
          ]
        }
      }
    },
    "selected-item": {
      "desc": "Override default selection slot; Suggestion: QChip",
      "scope": {
        "index": {
          "type": "Number",
          "desc": "Selection index",
          "examples": [
            0
          ]
        },
        "opt": {
          "type": "Any",
          "desc": "Selected option -- its value is taken from model"
        },
        "selected": {
          "type": "Boolean",
          "desc": "Always true -- passed down as prop to QItem (when using QItem)"
        },
        "removeAtIndex": {
          "type": "Function",
          "desc": "Remove selected option located at specific index",
          "params": {
            "index": {
              "type": "Number",
              "desc": "Index at which to remove selection",
              "examples": [
                0
              ]
            }
          },
          "returns": null
        },
        "toggleOption": {
          "type": "Function",
          "desc": "Add/remove option from model",
          "params": {
            "opt": {
              "type": "Any",
              "desc": "Option to add to model"
            }
          },
          "returns": null
        },
        "tabindex": {
          "type": "Number",
          "desc": "Tabindex HTML attribute value associated with respective option",
          "values": [
            0,
            -1
          ]
        }
      }
    },
    "option": {
      "desc": "Customize how options are rendered; Suggestion: QItem",
      "scope": {
        "index": {
          "type": "Number",
          "desc": "Option index",
          "examples": [
            0
          ]
        },
        "opt": {
          "type": "Any",
          "desc": "Option -- its value is taken from 'options' prop"
        },
        "selected": {
          "type": "Boolean",
          "desc": "Is option selected?"
        },
        "focused": {
          "type": "Boolean",
          "desc": "Is option focused?"
        },
        "toggleOption": {
          "type": "Function",
          "desc": "Add/remove option from model",
          "params": {
            "opt": {
              "type": "Any",
              "desc": "Option to add to model"
            }
          },
          "returns": null
        },
        "setOptionIndex": {
          "type": "Function",
          "desc": "Sets option from menu as 'focused'",
          "params": {
            "index": {
              "type": "Number",
              "desc": "Index of option from menu",
              "examples": [
                10
              ]
            }
          },
          "returns": null
        },
        "itemProps": {
          "type": "Object",
          "desc": "Computed properties passed down to QItem"
        },
        "itemEvents": {
          "type": "Object",
          "desc": "Computed events passed down to QItem"
        }
      }
    }
  },
  "events": {
    "virtual-scroll": {
      "desc": "Emitted when the virtual scroll occurs",
      "params": {
        "details": {
          "type": "Object",
          "desc": "Object of properties on the new scroll position",
          "definition": {
            "index": {
              "type": "Number",
              "desc": "Index of the list item that was scrolled into view (0 based)",
              "examples": [
                30
              ]
            },
            "from": {
              "type": "Number",
              "desc": "The index of the first list item that is rendered (0 based)",
              "examples": [
                10
              ]
            },
            "to": {
              "type": "Number",
              "desc": "The index of the last list item that is rendered (0 based)",
              "examples": [
                50
              ]
            },
            "direction": {
              "type": "String",
              "desc": "Direction of change",
              "values": [
                "increase",
                "decrease"
              ]
            }
          }
        }
      }
    },
    "clear": {
      "desc": "When using the 'clearable' property, this event is emitted when the clear icon is clicked",
      "addedIn": "v1.1.5",
      "params": {
        "value": {
          "type": [
            "Any"
          ],
          "desc": "The previous value before clearing it"
        }
      }
    },
    "input": {
      "desc": "Emitted when the component needs to change the model; Is also used by v-model",
      "params": {
        "value": {
          "type": "Any",
          "desc": "New model value",
          "required": true
        }
      }
    },
    "remove": {
      "desc": "Emitted when an option is removed from selection",
      "params": {
        "details": {
          "type": "Object",
          "desc": "Removal details",
          "definition": {
            "index": {
              "type": "Number",
              "desc": "Model index at which removal took place",
              "examples": [
                2
              ]
            },
            "value": {
              "type": "Any",
              "desc": "The actual value that was removed"
            }
          }
        }
      }
    },
    "add": {
      "desc": "Emitted when an option is added to the selection",
      "params": {
        "details": {
          "type": "Object",
          "desc": "Addition details",
          "definition": {
            "index": {
              "type": "Number",
              "desc": "Model index at which addition took place",
              "examples": [
                2
              ]
            },
            "value": {
              "type": "Any",
              "desc": "The actual value that was added"
            }
          }
        }
      }
    },
    "new-value": {
      "desc": "Enables creation of new values; Emitted when a new value has been created; You can override 'new-value-mode' property with it",
      "params": {
        "inputValue": {
          "type": "String",
          "desc": "What the user typed",
          "examples": [
            "phone"
          ]
        },
        "doneFn": {
          "type": "Function",
          "desc": "Adds (optional) value to the model; Do not forget to call it after you validate the newly created value; Call it with no parameters if nothing should be added",
          "params": {
            "item": {
              "type": "Any",
              "desc": "Item to add"
            },
            "mode": {
              "type": "String",
              "desc": "Override 'new-value-mode' (prop) behavior should you wish to",
              "values": [
                "add",
                "add-unique",
                "toggle"
              ],
              "default": "add"
            }
          },
          "returns": null
        }
      }
    },
    "filter": {
      "desc": "Emitted when user wants to filter a value",
      "params": {
        "inputValue": {
          "type": "String",
          "desc": "What the user typed",
          "examples": [
            "phone"
          ]
        },
        "doneFn": {
          "type": "Function",
          "desc": "Supply a function which makes the necessary updates",
          "params": {
            "callbackFn": {
              "type": "Function",
              "desc": "Callback to call to make the actual updates",
              "params": null,
              "returns": null
            }
          },
          "returns": null
        },
        "abortFn": {
          "type": "Function",
          "desc": "Call this function if something went wrong",
          "params": null,
          "returns": null
        }
      }
    },
    "filter-abort": {
      "desc": "Emitted when a filtering was aborted; Probably a new one was requested?"
    },
    "popup-show": {
      "desc": "Emitted when the select options menu or dialog is shown.",
      "params": {
        "evt": {
          "type": "Object",
          "desc": "JS event object"
        }
      },
      "addedIn": "v1.1.3"
    },
    "popup-hide": {
      "desc": "Emitted when the select options menu or dialog is hidden.",
      "params": {
        "evt": {
          "type": "Object",
          "desc": "JS event object"
        }
      },
      "addedIn": "v1.1.3"
    }
  },
  "methods": {
    "scrollTo": {
      "desc": "Scroll the virtual scroll list to the item with the specified index (0 based)",
      "params": {
        "index": {
          "type": [
            "String",
            "Number"
          ],
          "desc": "The index of the list item (0 based)",
          "required": true,
          "examples": [
            "1",
            23
          ]
        }
      }
    },
    "reset": {
      "desc": "Resets the computations; Needed for custom edge-cases"
    },
    "resetValidation": {
      "desc": "Reset validation status"
    },
    "validate": {
      "desc": "Trigger a validation",
      "params": {
        "value": {
          "type": "Any",
          "desc": "Optional value to validate against"
        }
      }
    },
    "focus": {
      "desc": "Focus component"
    },
    "showPopup": {
      "desc": "Focus and open popup"
    },
    "hidePopup": {
      "desc": "Hide popup"
    },
    "removeAtIndex": {
      "desc": "Remove selected option located at specific index",
      "params": {
        "index": {
          "type": "Number",
          "desc": "Index at which to remove selection",
          "required": true,
          "examples": [
            0
          ]
        }
      }
    },
    "add": {
      "desc": "Adds option to model",
      "params": {
        "opt": {
          "type": "Any",
          "desc": "Option to add to model",
          "required": true
        }
      }
    },
    "toggleOption": {
      "desc": "Add/remove option from model",
      "params": {
        "opt": {
          "type": "Any",
          "desc": "Option to add to model",
          "required": true
        }
      }
    },
    "setOptionIndex": {
      "desc": "Sets option from menu as 'focused'",
      "params": {
        "index": {
          "type": "Number",
          "desc": "Index of option from menu",
          "required": true,
          "examples": [
            10
          ]
        }
      }
    },
    "filter": {
      "desc": "Filter options",
      "params": {
        "value": {
          "type": "String",
          "desc": "String to filter with",
          "required": true,
          "examples": [
            "car"
          ]
        }
      }
    },
    "updateMenuPosition": {
      "desc": "Recomputes menu position"
    },
    "updateInputValue": {
      "desc": "If 'use-input' is specified, this updates the value that it holds",
      "params": {
        "value": {
          "type": "String",
          "desc": "String to set the input value to",
          "examples": [
            "hotel"
          ]
        },
        "noFilter": {
          "type": "Boolean",
          "desc": "Set to true if you don't want the filter (if any) to be also triggered"
        }
      }
    }
  }
}