{
  "type": "component",
  "meta": {
    "docsUrl": "https://v1.quasar.dev/vue-components/color-picker"
  },
  "behavior": {
    "$listeners": {
      "desc": "All native events are being propagated (you don't need the '.native' modifier)"
    }
  },
  "props": {
    "name": {
      "type": "String",
      "desc": "Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL",
      "examples": [
        "car_id"
      ],
      "category": "behavior",
      "addedIn": "v1.9.0"
    },
    "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": "String",
      "examples": [
        "v-model=\"myColor\""
      ]
    },
    "default-value": {
      "type": "String",
      "desc": "The default value to show when the model doesn't have one",
      "examples": [
        "default-value=\"#c0c0c0\""
      ],
      "category": "model"
    },
    "default-view": {
      "type": "String",
      "desc": "The default view of the picker",
      "default": "spectrum",
      "values": [
        "spectrum",
        "tune",
        "palette"
      ],
      "category": "behavior"
    },
    "format-model": {
      "type": "String",
      "desc": "Forces a certain model format upon the model",
      "default": "auto",
      "values": [
        "auto",
        "hex",
        "rgb",
        "hexa",
        "rgba"
      ],
      "examples": [
        "hex"
      ],
      "category": "model"
    },
    "palette": {
      "type": "Array",
      "desc": "Use a custom palette of colors for the palette tab",
      "default": "(hard-coded palette)",
      "examples": [
        ":palette=\"[ '#019A9D', '#D9B801', 'rgb(23,120,0)', '#B2028A' ]\""
      ],
      "category": "content"
    },
    "square": {
      "type": "Boolean",
      "desc": "Removes border-radius so borders are squared",
      "category": "style",
      "addedIn": "v1.5.2"
    },
    "flat": {
      "type": "Boolean",
      "desc": "Applies a 'flat' design (no default shadow)",
      "category": "style",
      "addedIn": "v1.5.2"
    },
    "bordered": {
      "type": "Boolean",
      "desc": "Applies a default border to the component",
      "category": "style",
      "addedIn": "v1.5.2"
    },
    "no-header": {
      "type": "Boolean",
      "desc": "Do not render header",
      "category": "content"
    },
    "no-footer": {
      "type": "Boolean",
      "desc": "Do not render footer; Useful when you want a specific view ('default-view' prop) and don't want the user to be able to switch it",
      "category": "content"
    },
    "disable": {
      "type": "Boolean",
      "desc": "Put component in disabled mode",
      "category": "state"
    },
    "readonly": {
      "type": "Boolean",
      "desc": "Put component in readonly mode",
      "category": "state"
    },
    "dark": {
      "type": "Boolean",
      "desc": "Notify the component that the background is a dark color",
      "category": "style"
    }
  },
  "events": {
    "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
        }
      }
    },
    "change": {
      "desc": "Emitted on lazy model value change (after user finishes selecting a color)",
      "params": {
        "value": {
          "type": "Any",
          "desc": "New model value",
          "required": true
        }
      }
    }
  }
}