{
  "mixins": ["composables/use-form/private.use-form"],

  "meta": {
    "docsUrl": "https://v2.quasar.dev/vue-components/color-picker"
  },

  "props": {
    "model-value": {
      "extends": "model-value",
      "type": ["String", "null", "undefined"],
      "examples": ["# v-model=\"myColor\""]
    },

    "default-value": {
      "type": "String",
      "desc": "The default value to show when the model doesn't have one",
      "examples": ["'#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'"],
      "category": "model"
    },

    "palette": {
      "type": "Array",
      "desc": "Use a custom palette of colors for the palette tab",
      "default": "# hard-coded palette",
      "__runtimeDefault": true,
      "examples": ["['#019A9D', '#D9B801', 'rgb(23,120,0)', '#B2028A']"],
      "category": "content"
    },

    "square": {
      "extends": "square"
    },

    "flat": {
      "extends": "flat"
    },

    "bordered": {
      "extends": "bordered"
    },

    "no-header": {
      "type": "Boolean",
      "desc": "Do not render header",
      "category": "content"
    },

    "no-header-tabs": {
      "type": "Boolean",
      "desc": "Do not render header tabs (only the input)",
      "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": {
      "extends": "disable"
    },

    "readonly": {
      "extends": "readonly"
    },

    "dark": {
      "extends": "dark"
    }
  },

  "slots": {
    "palette": {
      "desc": "Override the default swatches of the palette view; you decide the layout, labels and accessibility of the swatches",
      "addedIn": "v2.31",
      "scope": {
        "palette": {
          "type": "Array",
          "desc": "The colors of the palette (the 'palette' prop, or the built-in list when the prop is not set)",
          "examples": ["['#019A9D', '#D9B801', 'rgb(23,120,0)', '#B2028A']"]
        },
        "select": {
          "type": "Function",
          "desc": "Set the model to a color; does nothing while the component is disabled or readonly",
          "params": {
            "color": {
              "type": "String",
              "required": true,
              "desc": "The color to select (hex, hexa, rgb or rgba string)",
              "examples": ["'#019A9D'", "'rgb(23,120,0)'"]
            }
          },
          "returns": null
        },
        "editable": {
          "type": "Boolean",
          "desc": "Whether the user can currently change the color (false while disabled or readonly)"
        }
      }
    }
  },

  "events": {
    "update:model-value": {
      "extends": "update:model-value",
      "params": {
        "value": {
          "type": ["String", "null"]
        }
      }
    },

    "change": {
      "extends": "update:model-value",
      "desc": "Emitted on lazy model value change (after user finishes selecting a color)"
    }
  }
}