{
  "type": "component",
  "meta": {
    "docsUrl": "https://quasarframework.github.io/quasar-ui-qscroller/docs"
  },
  "props": {
    "value": {
      "type": [
        "String",
        "Array",
        "Object",
        "Date"
      ],
      "category": "model",
      "applicable": [
        "All"
      ],
      "required": true,
      "desc": "The `type` property is dependent on the `view` property",
      "examples": [
        "v-model=\"myVar\""
      ]
    },
    "view": {
      "type": "String",
      "category": "behavior",
      "applicable": [
        "string",
        "time",
        "date",
        "time-range",
        "date-range",
        "date-time"
      ],
      "required": true,
      "desc": "This determines the type of scroller to be used",
      "values": [
        "string",
        "time",
        "date",
        "time-range",
        "date-range",
        "date-time"
      ],
      "examples": [
        "view=\"string\"",
        "view=\"time-range\"",
        "view=\"date-time\""
      ]
    },
    "bar-color": {
      "type": "String",
      "category": "style",
      "applicable": [
        "All"
      ],
      "desc": "This is the color of the middle bars. It can be from the Quasar color palette or a CSS hash value (ie: '#0000FF')",
      "examples": [
        "bar-color=\"blue-8\"",
        "bar-color=\"#ccc\"",
        "bar-color=\"ghostwhite\""
      ]
    },
    "border-color": {
      "type": "String",
      "category": "style",
      "applicable": [
        "All"
      ],
      "desc": "This is the color of outside border when `no-border` property is not `true`. It can be from the Quasar color palette or a CSS hash value (ie: '#0000FF')",
      "examples": [
        "border-color=\"blue-8\"",
        "border-color=\"#ccc\"",
        "border-color=\"ghostwhite\""
      ]
    },
    "color": {
      "type": "String",
      "category": "style",
      "applicable": [
        "All"
      ],
      "default": "primary",
      "desc": "This is the color of the background (header and footer). It can be from the Quasar color palette or a CSS hash value (ie: '#0000FF')",
      "examples": [
        "color=\"blue-8\"",
        "color=\"#ccc\"",
        "color=\"ghostwhite\""
      ]
    },
    "text-color": {
      "type": "String",
      "category": "style",
      "applicable": [
        "All"
      ],
      "default": "white",
      "desc": "This is the color of the text (header and footer). It can be from the Quasar color palette or a CSS hash value (ie: '#0000FF')",
      "examples": [
        "text-color=\"blue-8\"",
        "text-color=\"#ccc\"",
        "text-color=\"ghostwhite\""
      ]
    },
    "inner-color": {
      "type": "String",
      "category": "style",
      "applicable": [
        "string",
        "time",
        "date",
        "date-time"
      ],
      "default": "white",
      "desc": "This is the color of the background (scroller area). It can be from the Quasar color palette or a CSS hash value (ie: '#0000FF')",
      "examples": [
        "inner-color=\"blue-8\"",
        "inner-color=\"#ccc\"",
        "inner-color=\"ghostwhite\""
      ]
    },
    "inner-text-color": {
      "type": "String",
      "category": "style",
      "applicable": [
        "string",
        "time",
        "date",
        "date-time"
      ],
      "default": "primary",
      "desc": "This is the color of the text (scroller area). It can be from the Quasar color palette or a CSS hash value (ie: '#0000FF')",
      "examples": [
        "inner-text-color=\"blue-8\"",
        "inner-text-color=\"#ccc\"",
        "inner-text-color=\"ghostwhite\""
      ]
    },
    "disabled-text-color": {
      "type": "String",
      "category": "style",
      "applicable": [
        "all"
      ],
      "default": "grey-7",
      "desc": "Sets the color that will be used when in the disabled state",
      "examples": [
        "disabled-text-color=\"yellow-2\"",
        "disabled-text-color=\"#dadada\"",
        "disabled-text-color=\"ghostwhite\""
      ]
    },
    "disable-validation": {
      "type": "Boolean",
      "category": "behavior",
      "applicable": [
        "time-range",
        "date-range"
      ],
      "desc": "Disables range checking validation (ie: allows right-side of range to be less than left-side range)",
      "addedIn": "v1.0.0"
    },
    "error-color": {
      "type": "String",
      "category": "style",
      "applicable": [
        "time-range",
        "date-range"
      ],
      "default": "red-1",
      "desc": "This is the error color of the background (end inner section) when end section is less than start section. It can be from the Quasar color palette or a CSS hash value (ie: '#0000FF')",
      "examples": [
        "error-color=\"blue-8\"",
        "error-color=\"#ccc\"",
        "error-color=\"ghostwhite\""
      ]
    },
    "error-text-color": {
      "type": "String",
      "category": "style",
      "applicable": [
        "time-range",
        "date-range"
      ],
      "default": "red-10",
      "desc": "This is the error color of the text (end inner section) when end section is less than start section. It can be from the Quasar color palette or a CSS hash value (ie: '#0000FF')",
      "examples": [
        "error-text-color=\"blue-8\"",
        "error-text-color=\"#ccc\"",
        "error-text-color=\"ghostwhite\""
      ]
    },
    "dense": {
      "type": "Boolean",
      "category": "style",
      "applicable": [
        "All"
      ],
      "desc": "If the component should be in dense mode"
    },
    "disable": {
      "type": "Boolean",
      "category": "state",
      "applicable": [
        "All"
      ],
      "desc": "If the component should be disabled"
    },
    "rounded-border": {
      "type": "Boolean",
      "category": "style",
      "applicable": [
        "All"
      ],
      "desc": "If the component should have rounded corners"
    },
    "no-border": {
      "type": "Boolean",
      "category": "style",
      "applicable": [
        "All"
      ],
      "desc": "If the component should not have a border"
    },
    "no-shadow": {
      "type": "Boolean",
      "category": "style",
      "applicable": [
        "All"
      ],
      "desc": "If the component should not display shadow when header/footer are displayed"
    },
    "no-header": {
      "type": "Boolean",
      "category": "behavior",
      "applicable": [
        "All"
      ],
      "desc": "If the component should not display the header"
    },
    "no-footer": {
      "type": "Boolean",
      "category": "behavior",
      "applicable": [
        "All"
      ],
      "desc": "If the component should not display the footer"
    },
    "hour12": {
      "type": "Boolean",
      "category": "behavior",
      "applicable": [
        "time",
        "time-range",
        "date-time"
      ],
      "desc": "Turns on 12 hour time"
    },
    "items": {
      "type": "Array",
      "category": "content",
      "applicable": [
        "string"
      ],
      "desc": "An array of objects",
      "examples": [
        "{ value: 'Anteater', noCaps: true, icon: '', iconRight: '', disabled: false, align: 'around' }"
      ],
      "definition": {
        "value": {
          "type": "String",
          "required": true,
          "desc": "This is the value that will be emitted when selected. It is also used for display, when the optional `display` property is not available"
        },
        "noCaps": {
          "type": "Boolean",
          "desc": "If set to true, the displayed text will not be converted to uppercase"
        },
        "icon": {
          "type": "String",
          "desc": "Optional icon to be used",
          "examples": [
            "icon: 'bolt'"
          ]
        },
        "iconRight": {
          "type": "String",
          "desc": "Optional icon to be used on the right of the displayed text",
          "examples": [
            "iconRight: 'fas fa-calendar'"
          ]
        },
        "disabled": {
          "type": "Boolean",
          "desc": "When set to true the item will be disabled"
        },
        "align": {
          "type": "String",
          "desc": "How the text will be aligned within its area",
          "values": [
            "left",
            "center",
            "right",
            "between",
            "around",
            "evenly"
          ],
          "examples": [
            "align: 'center'",
            "align: 'left'"
          ]
        }
      }
    },
    "locale": {
      "type": "String",
      "category": "state",
      "desc": "Changes the locale used for the header",
      "default": "en-us",
      "applicable": [
        "date",
        "date-range",
        "date-time"
      ],
      "examples": [
        "locale=\"ca\""
      ]
    },
    "am-pm-labels": {
      "type": "Array",
      "tsType": "StringArray",
      "category": "content",
      "desc": "This is an array of two strings to replace the AM/PM labels. Only applicable when the `hour12` property is used",
      "applicable": [
        "time",
        "date-time"
      ],
      "default": "['AM', 'PM']",
      "examples": [
        ":am-pm-labels=\"['a', 'p']\""
      ]
    },
    "hour-interval": {
      "type": [
        "String",
        "Number"
      ],
      "category": "content",
      "desc": "Used to create intervals. For instance, if '2', then every other value will be displayed",
      "default": "1",
      "applicable": [
        "time",
        "date-time"
      ],
      "examples": [
        ":hour-interval=\"2\""
      ]
    },
    "minute-interval": {
      "type": [
        "String",
        "Number"
      ],
      "category": "content",
      "desc": "Used to create intervals. For instance, if '2', then every other value will be displayed",
      "default": "1",
      "applicable": [
        "time",
        "date-time"
      ],
      "examples": [
        ":minute-interval=\"2\""
      ]
    },
    "disabled-hours": {
      "type": "Array",
      "tsType": "StringArray",
      "category": "content",
      "desc": "Hours that should be disabled (always use 0 through to 24)",
      "applicable": [
        "time",
        "date-time"
      ],
      "examples": [
        ":disabled-hours=\"[17, 18, 19, 20, 21, 22, 23]\""
      ]
    },
    "disabled-minutes": {
      "type": "Array",
      "tsType": "NumberArray",
      "category": "content",
      "desc": "Minutes that should be disabled (always use 0 through to 59)",
      "applicable": [
        "time",
        "date-time"
      ],
      "examples": [
        ":disabled-minutes=\"[0, 1, 2, 3, 4, 5]\""
      ]
    },
    "no-hours": {
      "type": "Boolean",
      "category": "content",
      "desc": "Hide the hours section",
      "applicable": [
        "time",
        "date-time"
      ]
    },
    "no-minutes": {
      "type": "Boolean",
      "category": "content",
      "desc": "Hide the minutes section",
      "applicable": [
        "time",
        "date-time"
      ]
    },
    "display-separator": {
      "type": "String",
      "category": "style",
      "desc": "Provide an alternative display separator",
      "applicable": [
        "time-range",
        "date-range"
      ],
      "default": "' - '",
      "examples": [
        "display-separator=\" : \"",
        "display-separator=\" & \""
      ]
    },
    "start-am-pm-labels": {
      "type": "Array",
      "tsType": "StringArray",
      "category": "content",
      "desc": "This is an array of two strings to replace the AM/PM labels. Only applicable when the `hour12` property is used",
      "applicable": [
        "time-range"
      ],
      "default": "['AM', 'PM']",
      "examples": [
        ":start-am-pm-labels=\"['a', 'p']\""
      ]
    },
    "end-am-pm-labels": {
      "type": "Array",
      "tsType": "StringArray",
      "category": "content",
      "desc": "This is an array of two strings to replace the AM/PM labels. Only applicable when the `hour12` property is used",
      "applicable": [
        "time-range"
      ],
      "default": "['AM', 'PM']",
      "examples": [
        ":end-am-pm-labels=\"['a', 'p']\""
      ]
    },
    "start-hour-interval": {
      "type": [
        "String",
        "Number"
      ],
      "tsType": "StringOrNumber",
      "category": "content",
      "desc": "Used to create intervals. For instance, if '2', then every other value will be displayed",
      "default": "1",
      "applicable": [
        "time-range"
      ],
      "examples": [
        ":start-hour-interval=\"2\""
      ]
    },
    "end-hour-interval": {
      "type": [
        "String",
        "Number"
      ],
      "tsType": "StringOrNumber",
      "category": "content",
      "desc": "Used to create intervals. For instance, if '2', then every other value will be displayed",
      "default": "1",
      "applicable": [
        "time-range"
      ],
      "examples": [
        ":end-hour-interval=\"2\""
      ]
    },
    "start-minute-interval": {
      "type": [
        "String",
        "Number"
      ],
      "tsType": "StringOrNumber",
      "category": "content",
      "desc": "Used to create intervals. For instance, if '2', then every other value will be displayed",
      "default": "1",
      "applicable": [
        "time-range"
      ],
      "examples": [
        ":start-minute-interval=\"2\""
      ]
    },
    "end-minute-interval": {
      "type": [
        "String",
        "Number"
      ],
      "tsType": "StringOrNumber",
      "category": "content",
      "desc": "Used to create intervals. For instance, if '2', then every other value will be displayed",
      "default": "1",
      "applicable": [
        "time-range"
      ],
      "examples": [
        ":end-minute-interval=\"2\""
      ]
    },
    "start-disabled-hours": {
      "type": "Array",
      "tsType": "NumberArray",
      "category": "content",
      "desc": "Hours that should be disabled (always use 0 through to 24)",
      "applicable": [
        "time-range"
      ],
      "examples": [
        ":start-disabled-hours=\"[17, 18, 19, 20, 21, 22, 23]\""
      ]
    },
    "end-disabled-hours": {
      "type": "Array",
      "tsType": "NumberArray",
      "category": "content",
      "desc": "Hours that should be disabled (always use 0 through to 24)",
      "applicable": [
        "time-range"
      ],
      "examples": [
        ":end-disabled-hours=\"[17, 18, 19, 20, 21, 22, 23]\""
      ]
    },
    "start-disabled-minutes": {
      "type": "Array",
      "tsType": "NumberArray",
      "category": "content",
      "desc": "Minutes that should be disabled (always use 0 through to 59)",
      "applicable": [
        "time-range"
      ],
      "examples": [
        ":start-disabled-minutes=\"[0, 1, 2, 3, 4, 5]\""
      ]
    },
    "end-disabled-minutes": {
      "type": "Array",
      "tsType": "NumberArray",
      "category": "content",
      "desc": "Minutes that should be disabled (always use 0 through to 59)",
      "applicable": [
        "time-range"
      ],
      "examples": [
        ":end-disabled-minutes=\"[0, 1, 2, 3, 4, 5]\""
      ]
    },
    "start-no-hours": {
      "type": "Boolean",
      "category": "content",
      "desc": "Hide the hours section",
      "applicable": [
        "time-range"
      ]
    },
    "end-no-hours": {
      "type": "Boolean",
      "category": "content",
      "desc": "Hide the hours section",
      "applicable": [
        "time-range"
      ]
    },
    "start-no-minutes": {
      "type": "Boolean",
      "category": "content",
      "desc": "Hide the minutes section",
      "applicable": [
        "time",
        "date-time"
      ]
    },
    "end-no-minutes": {
      "type": "Boolean",
      "category": "content",
      "desc": "Hide the minutes section",
      "applicable": [
        "time",
        "date-time"
      ]
    },
    "disabled-years": {
      "type": "Array",
      "tsType": "NumberArray",
      "category": "content",
      "desc": "Array of years that should be disabled",
      "applicable": [
        "date",
        "date-time"
      ],
      "examples": [
        ":disabled-years=\"[ 2015, 2016, 2017, 2018, 2019 ]\""
      ]
    },
    "disabled-months": {
      "type": "Array",
      "tsType": "NumberArray",
      "category": "content",
      "desc": "Array of months that should be disabled",
      "applicable": [
        "date",
        "date-time"
      ],
      "examples": [
        ":disabled-months=\"[ 10, 11, 12 ]\""
      ]
    },
    "disabled-days": {
      "type": "Array",
      "tsType": "NumberArray",
      "category": "content",
      "desc": "Array of days that should be disabled",
      "applicable": [
        "date",
        "date-time"
      ],
      "examples": [
        ":disabled-days=\"[ 1, 2, 3 ]\""
      ]
    },
    "no-year": {
      "type": "Boolean",
      "category": "content",
      "desc": "Hide the years section",
      "applicable": [
        "date",
        "date-time"
      ]
    },
    "no-month": {
      "type": "Boolean",
      "category": "content",
      "desc": "Hide the months section",
      "applicable": [
        "date",
        "date-time"
      ]
    },
    "no-day": {
      "type": "Boolean",
      "category": "content",
      "desc": "Hide the day section",
      "applicable": [
        "date",
        "date-time"
      ]
    },
    "start-disabled-years": {
      "type": "Array",
      "tsType": "NumberArray",
      "category": "content",
      "desc": "Array of years that should be disabled",
      "applicable": [
        "date-range"
      ],
      "examples": [
        ":start-disabled-years=\"[ 2015, 2016, 2017, 2018, 2019 ]\""
      ]
    },
    "end-disabled-years": {
      "type": "Array",
      "tsType": "NumberArray",
      "category": "content",
      "desc": "Array of years that should be disabled",
      "applicable": [
        "date-range"
      ],
      "examples": [
        ":end-disabled-years=\"[ 2015, 2016, 2017, 2018, 2019 ]\""
      ]
    },
    "start-disabled-months": {
      "type": "Array",
      "tsType": "NumberArray",
      "category": "content",
      "desc": "Array of months that should be disabled",
      "applicable": [
        "date-range"
      ],
      "examples": [
        ":start-disabled-months=\"[ 10, 11, 12 ]\""
      ]
    },
    "end-disabled-months": {
      "type": "Array",
      "tsType": "NumberArray",
      "category": "content",
      "desc": "Array of months that should be disabled",
      "applicable": [
        "date-range"
      ],
      "examples": [
        ":end-disabled-months=\"[ 10, 11, 12 ]\""
      ]
    },
    "start-disabled-days": {
      "type": "Array",
      "tsType": "NumberArray",
      "category": "content",
      "desc": "Array of days that should be disabled",
      "applicable": [
        "date-range"
      ],
      "examples": [
        ":start-disabled-days=\"[ 1, 2, 3 ]\""
      ]
    },
    "end-disabled-days": {
      "type": "Array",
      "tsType": "NumberArray",
      "category": "content",
      "desc": "Array of days that should be disabled",
      "applicable": [
        "date-range"
      ],
      "examples": [
        ":end-disabled-days=\"[ 1, 2, 3 ]\""
      ]
    },
    "start-no-year": {
      "type": "Boolean",
      "category": "content",
      "desc": "Hide the years section",
      "applicable": [
        "date-range"
      ]
    },
    "end-no-year": {
      "type": "Boolean",
      "category": "content",
      "desc": "Hide the years section",
      "applicable": [
        "date-range"
      ]
    },
    "start-no-month": {
      "type": "Boolean",
      "category": "content",
      "desc": "Hide the months section",
      "applicable": [
        "date-range"
      ]
    },
    "end-no-month": {
      "type": "Boolean",
      "category": "content",
      "desc": "Hide the months section",
      "applicable": [
        "date-range"
      ]
    },
    "start-no-day": {
      "type": "Boolean",
      "category": "content",
      "desc": "Hide the day section",
      "applicable": [
        "date-range"
      ]
    },
    "end-no-day": {
      "type": "Boolean",
      "category": "content",
      "desc": "Hide the day section",
      "applicable": [
        "date-range"
      ]
    },
    "year-start": {
      "type": [
        "Number",
        "String"
      ],
      "category": "content",
      "desc": "This is the starting year to be used",
      "applicable": [
        "date"
      ],
      "default": "5 years before current year",
      "examples": [
        "year-start=\"2000\""
      ]
    },
    "year-end": {
      "type": [
        "Number",
        "String"
      ],
      "category": "content",
      "desc": "This is the ending year to be used",
      "applicable": [
        "date"
      ],
      "default": "5 years after current year",
      "examples": [
        "year-end=\"2025\""
      ]
    },
    "start-year-begin": {
      "type": [
        "Number",
        "String"
      ],
      "category": "content",
      "desc": "This is the starting year to be used for the start date section",
      "applicable": [
        "date-range"
      ],
      "default": "5 years before current year",
      "examples": [
        "start-year-start=\"2000\""
      ]
    },
    "start-year-stop": {
      "type": [
        "Number",
        "String"
      ],
      "category": "content",
      "desc": "This is the ending year to be used for the start date section",
      "applicable": [
        "date-range"
      ],
      "default": "5 years after current year",
      "examples": [
        "start-year-end=\"2025\""
      ]
    },
    "end-year-begin": {
      "type": [
        "Number",
        "String"
      ],
      "category": "content",
      "desc": "This is the starting year to be used for the end date section",
      "applicable": [
        "date-range"
      ],
      "default": "5 years before current year",
      "examples": [
        "end-year-start=\"2000\""
      ]
    },
    "end-year-stop": {
      "type": [
        "Number",
        "String"
      ],
      "category": "content",
      "desc": "This is the ending year to be used for the end date section",
      "applicable": [
        "date-range"
      ],
      "default": "5 years after current year",
      "examples": [
        "end-year-end=\"2025\""
      ]
    }
  },
  "scopedSlots": {
    "header": {
      "desc": "Used to replace the header, when displayed",
      "scope": {
        "value": {
          "type": [
            "String",
            "Object",
            "Array"
          ],
          "desc": "When view is `string`, the returned value is the selected string value. For views of `date`, `time` and `date-time`, the returned value is a timestamp object. For views of `time-range` and `date-range` the returned value is an array of timestamp objects"
        }
      }
    },
    "footer": {
      "desc": "Used to replace the footer, when displayed",
      "scope": {
        "value": {
          "type": [
            "String",
            "Object",
            "Array"
          ],
          "desc": "When view is `string`, the returned value is the selected string value. For views of `date`, `time` and `date-time`, the returned value is a timestamp object. For views of `time-range` and `date-range` the returned value is an array of timestamp objects"
        }
      }
    }
  },
  "events": {
    "input": {
      "desc": "Emitted when the component needs to change the model; Is also used by v-model",
      "applicable": [
        "All"
      ],
      "params": {
        "value": {
          "type": "Any",
          "desc": "New model value",
          "required": true
        }
      }
    },
    "invalid-range": {
      "desc": "Emitted when an end range value is less than the start range",
      "applicable": [
        "time-range",
        "date-range"
      ],
      "params": {
        "value": {
          "type": "Object",
          "desc": "An object containing the current start and end ranges"
        }
      }
    },
    "close": {
      "desc": "Emitted when button on footer is clicked",
      "applicable": [
        "All"
      ]
    }
  }
}