{
  "type": "component",
  "props": {
    "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",
      "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 applies 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",
      "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"
    },
    "transition-show": {
      "type": "String",
      "desc": "Transition when showing the menu; One of Quasar's embedded transitions; Works only if \"options-cover\" is not used",
      "examples": [
        "fade",
        "slide-down"
      ],
      "category": "behavior",
      "default": "fade"
    },
    "transition-hide": {
      "type": "String",
      "desc": "Transition when hiding the menu; One of Quasar's embedded transitions; Works only if \"options-cover\" is not used",
      "examples": [
        "fade",
        "slide-down"
      ],
      "category": "behavior",
      "default": "fade"
    }
  },
  "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"
    }
  },
  "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": {
    "input": {
      "desc": "Emitted when component's model changes; 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?"
    }
  },
  "methods": {
    "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"
        }
      }
    }
  }
}