{
  "props": {
    "readonly": {
      "type": "Boolean",
      "desc": "Put component in readonly mode",
      "category": "state"
    },

    "disable": {
      "type": "Boolean",
      "desc": "Put component in disabled mode",
      "category": "state"
    },

    "color": {
      "type": "String",
      "tsType": "NamedColor",
      "desc": "Color name for component from the Quasar Color Palette",
      "examples": ["'primary'", "'teal'", "'teal-10'"],
      "category": "style"
    },

    "text-color": {
      "type": "String",
      "tsType": "NamedColor",
      "desc": "Overrides text color (if needed); Color name from the Quasar Color Palette",
      "examples": ["'primary'", "'teal'", "'teal-10'"],
      "category": "style"
    },

    "dense": {
      "type": "Boolean",
      "desc": "Dense mode; occupies less space",
      "category": "style"
    },

    "size": {
      "type": "String",
      "desc": "Size in CSS units, including unit name",
      "examples": ["'16px'", "'2rem'"],
      "category": "style"
    },

    "dark": {
      "type": ["Boolean", "null"],
      "default": "null",
      "desc": "Notify the component that the background is a dark color",
      "category": "style"
    },

    "icon": {
      "type": "String",
      "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)",
      "examples": [
        "'map'",
        "'ion-add'",
        "'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'",
        "'img:path/to/some_image.png'"
      ],
      "category": "content"
    },

    "flat": {
      "type": "Boolean",
      "desc": "Applies a 'flat' design (no default shadow)",
      "category": "style"
    },

    "bordered": {
      "type": "Boolean",
      "desc": "Applies a default border to the component",
      "category": "style"
    },

    "square": {
      "type": "Boolean",
      "desc": "Removes border-radius so borders are squared",
      "category": "style"
    },

    "rounded": {
      "type": "Boolean",
      "desc": "Applies a small standard border-radius for a squared shape of the component",
      "category": "style"
    },

    "tabindex": {
      "type": ["Number", "String"],
      "desc": "Tabindex HTML attribute value",
      "examples": ["100", "'0'"],
      "category": "general"
    },

    "transition": {
      "type": "String",
      "desc": "One of Quasar's embedded transitions",
      "examples": ["'fade'", "'slide-down'"],
      "category": "transition"
    },

    "animation-speed": {
      "type": ["String", "Number"],
      "desc": "Animation speed (in milliseconds, without unit)",
      "examples": ["500", "'1200'"],
      "category": "style"
    },

    "model-value": {
      "desc": "Model of the component; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive",
      "required": true,
      "syncable": true,
      "category": "model"
    },

    "html": {
      "type": "Boolean",
      "desc": "Force use of textContent instead of innerHTML to render text; Use it when the text might be unsafe (from user input)",
      "category": "behavior"
    },

    "tag": {
      "type": "String",
      "desc": "HTML tag to use",
      "category": "content"
    },

    "scroll-target": {
      "type": ["Element", "String", "ComponentInstance"],
      "desc": "CSS selector, DOM element or Vue component reference (standing for its root element) to be used as a custom scroll container instead of the auto detected one",
      "examples": [
        ".scroll-target-class",
        "#scroll-target-id",
        "$refs.scrollTarget",
        "$refs.scrollAreaComponent",
        "document.body"
      ],
      "category": "behavior"
    },

    "ripple": {
      "type": ["Boolean", "Object"],
      "desc": "Configure material ripple (disable it by setting it to 'false' or supply a config object)",
      "default": "true",
      "examples": [
        "false",
        "{ early: true, center: true, color: 'teal', keyCodes: [] }"
      ],
      "category": "style"
    },

    "evt": {
      "type": "Event",
      "desc": "JS event object"
    },

    "option-value": {
      "type": ["Function", "String"],
      "desc": "Property of option which holds the 'value'; If using a function then for best performance, reference it from your scope and do not define it inline",
      "default": "'value'",
      "__runtimeDefault": true,
      "params": {
        "option": {
          "type": ["String", "Object"],
          "desc": "The current option being processed",
          "examples": [
            "'Tesla'",
            "'iPhone'",
            "{ label: 'Tesla', value: 'car', cannotSelect: true }"
          ]
        }
      },
      "returns": {
        "type": "Any",
        "desc": "Value of the current option",
        "examples": ["'car'", "34"]
      },
      "examples": [
        "'modelNumber'",
        "item => (item === null ? null : item.modelNumber)"
      ],
      "category": "options"
    },

    "option-label": {
      "type": ["Function", "String"],
      "desc": "Property of option which holds the 'label'; If using a function then for best performance, reference it from your scope and do not define it inline",
      "default": "'label'",
      "__runtimeDefault": true,
      "params": {
        "option": {
          "type": ["String", "Object"],
          "desc": "The current option being processed",
          "examples": [
            "'Tesla'",
            "'iPhone'",
            "{ label: 'Tesla', value: 'car', cannotSelect: true }"
          ]
        }
      },
      "returns": {
        "type": "String",
        "desc": "Label of the current option",
        "examples": ["'Tesla'", "'iPhone'"]
      },
      "examples": [
        "'itemName'",
        "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; If using a function then for best performance, reference it from your scope and do not define it inline",
      "default": "'disable'",
      "__runtimeDefault": true,
      "params": {
        "option": {
          "type": ["String", "Object"],
          "desc": "The current option being processed",
          "examples": [
            "'Tesla'",
            "'iPhone'",
            "{ label: 'Tesla', value: 'car', cannotSelect: true }"
          ]
        }
      },
      "returns": {
        "type": "Boolean",
        "desc": "If true, the current option will be disabled"
      },
      "examples": [
        "item => (item === null ? true : item.cannotSelect)",
        "# option-disable=\"cannotSelect\""
      ],
      "category": "options"
    },

    "input-class": {
      "type": ["String", "Array", "Object"],
      "tsType": "VueClassProp",
      "desc": "Class definitions to be attributed to the underlying input tag",
      "examples": ["'my-special-class'", "{ 'my-special-class': true }"],
      "category": "style"
    },

    "input-style": {
      "type": ["String", "Array", "Object"],
      "tsType": "VueStyleProp",
      "desc": "Style definitions to be attributed to the underlying input tag",
      "examples": [
        "'background-color: #ff0000'",
        "{ backgroundColor: '#ff0000' }"
      ],
      "category": "style"
    },

    "maxlength": {
      "type": ["String", "Number"],
      "desc": "Specify a max length of model",
      "category": "model"
    },

    "debounce": {
      "type": ["String", "Number"],
      "desc": "Debounce amount (in milliseconds)",
      "category": "behavior"
    },

    "table-separator": {
      "type": "String",
      "desc": "Use a separator/border between rows, columns or all cells",
      "default": "'horizontal'",
      "values": ["'horizontal'", "'vertical'", "'cell'", "'none'"],
      "category": "content"
    },

    "wrap-cells": {
      "type": "Boolean",
      "desc": "Wrap text within table cells",
      "category": "content"
    },

    "content-class": {
      "type": "String",
      "desc": "Class definitions to be attributed to the content wrapper",
      "examples": ["'my-special-class'"],
      "category": "style"
    },

    "field-name": {
      "desc": "Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of 'for' prop, if it exists"
    },

    "router-link-to": {
      "type": ["String", "Object"],
      "desc": "Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used",
      "examples": ["'/home/dashboard'", "{ name: 'my-route-name' }"],
      "category": "navigation"
    },

    "router-link-replace": {
      "type": "Boolean",
      "desc": "Equivalent to Vue Router <router-link> 'replace' property; Superseded by 'href' prop if used",
      "category": "navigation"
    },

    "tab-no-caps": {
      "type": "Boolean",
      "desc": "Turns off capitalizing all letters within the tab (which is the default)",
      "category": "content"
    }
  },

  "slots": {
    "default": {
      "desc": "Default slot in the devland unslotted content of the component"
    }
  },

  "events": {
    "update:model-value": {
      "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
        }
      }
    },

    "show": {
      "desc": "Emitted after component has triggered show()",
      "params": {
        "evt": {
          "extends": "evt",
          "required": true
        }
      }
    },

    "before-show": {
      "desc": "Emitted when component triggers show() but before it finishes doing it",
      "params": {
        "evt": {
          "extends": "evt",
          "required": true
        }
      }
    },

    "after-show": {
      "desc": "Emitted when component show animation is finished"
    },

    "hide": {
      "desc": "Emitted after component has triggered hide()",
      "params": {
        "evt": {
          "extends": "evt",
          "required": true
        }
      }
    },

    "before-hide": {
      "desc": "Emitted when component triggers hide() but before it finishes doing it",
      "params": {
        "evt": {
          "extends": "evt",
          "required": true
        }
      }
    },

    "after-hide": {
      "desc": "Emitted when component hide animation is finished"
    },

    "click": {
      "desc": "Emitted when user clicks/taps on the component",
      "params": {
        "evt": {
          "extends": "evt",
          "required": true
        }
      }
    },

    "navigation-click": {
      "desc": "Emitted when the component is clicked",
      "params": {
        "evt": {
          "extends": "evt",
          "desc": "JS event object; If you are using route navigation ('to'/'replace' props) and you want to cancel navigation then call evt.preventDefault() synchronously in your event handler"
        },
        "go": {
          "type": "Function",
          "desc": "Available ONLY if you are using route navigation ('to'/'replace' props); When you need to control the time at which the component should trigger the route navigation then call evt.preventDefault() synchronously and then call this function at your convenience; Useful if you have async work to be done before the actual route navigation or if you want to redirect somewhere else",
          "required": false,
          "params": {
            "opts": {
              "type": "Object",
              "desc": "Optional options",
              "required": false,
              "definition": {
                "to": {
                  "type": ["String", "Object"],
                  "desc": "Equivalent to Vue Router <router-link> 'to' property; Specify it explicitly otherwise it will be set with same value as component's 'to' prop",
                  "required": false,
                  "examples": ["'/home/dashboard'", "{ name: 'my-route-name' }"]
                },
                "replace": {
                  "type": "Boolean",
                  "desc": "Equivalent to Vue Router <router-link> 'replace' property; Specify it explicitly otherwise it will be set with same value as component's 'replace' prop",
                  "required": false
                },
                "returnRouterError": {
                  "type": "Boolean",
                  "desc": "Return the router error, if any; Otherwise the returned Promise will always fulfill",
                  "required": false
                }
              }
            }
          },
          "returns": {
            "type": "Promise<any>",
            "desc": "Returns the router's navigation promise"
          }
        }
      }
    }
  },

  "methods": {
    "show": {
      "desc": "Triggers component to show",
      "params": {
        "evt": {
          "extends": "evt",
          "required": false
        }
      },
      "returns": null
    },

    "hide": {
      "desc": "Triggers component to hide",
      "params": {
        "evt": {
          "extends": "evt",
          "required": false
        }
      },
      "returns": null
    },

    "toggle": {
      "desc": "Triggers component to toggle between show/hide",
      "params": {
        "evt": {
          "extends": "evt",
          "required": false
        }
      },
      "returns": null
    },

    "updateScrollTarget": {
      "desc": "Updates the scroll target; Useful when the parent elements change so that the scrolling target also changes",
      "params": null,
      "returns": null
    }
  },

  "modifiers": {
    "capture": {
      "type": "Boolean",
      "desc": "Use capture for touchstart event"
    },

    "mouse": {
      "type": "Boolean",
      "desc": "Listen for mouse events too"
    },

    "mouseCapture": {
      "type": "Boolean",
      "desc": "Use capture for mousedown event"
    },

    "horizontal": {
      "type": "Boolean",
      "desc": "Catch horizontal (left/right) movement"
    },

    "vertical": {
      "type": "Boolean",
      "desc": "Catch vertical (up/down) movement"
    }
  }
}