"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VContainer",
"source": {
"module": "./src/components/index.ts",
"symbol": "VContainer"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-container",
"attributes": [
{
"name": "fluid",
"description": "Removes viewport maximum-width size breakpoints.",
"doc-url": "https://vuetifyjs.com/api/VContainer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "height",
"description": "Sets the height for the component.",
"doc-url": "https://vuetifyjs.com/api/VContainer#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "maxHeight",
"description": "Sets the maximum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VContainer#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "maxWidth",
"description": "Sets the maximum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VContainer#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minHeight",
"description": "Sets the minimum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VContainer#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minWidth",
"description": "Sets the minimum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VContainer#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "width",
"description": "Sets the width for the component.",
"doc-url": "https://vuetifyjs.com/api/VContainer#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://vuetifyjs.com/api/VContainer#props",
"default": "'div'",
"value": {
"kind": "expression",
"type": "string"
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-container#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VCounter",
"source": {
"module": "./src/components/index.ts",
"symbol": "VCounter"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-counter",
"attributes": [
{
"name": "active",
"description": "Determines whether the counter is visible or not.",
"doc-url": "https://vuetifyjs.com/api/VCounter#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "disabled",
"description": "Removes the ability to click or target the component.",
"doc-url": "https://vuetifyjs.com/api/VCounter#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "max",
"description": "Sets the maximum allowed value.",
"doc-url": "https://vuetifyjs.com/api/VCounter#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "value",
"description": "Sets the current counter value.",
"doc-url": "https://vuetifyjs.com/api/VCounter#props",
"default": "0",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "transition",
"description": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.",
"doc-url": "https://vuetifyjs.com/api/VCounter#props",
"default": "{component: {name: 'slide-y-transition'}}",
"value": {
"kind": "expression",
"type": "| string\n | boolean\n | (TransitionProps & { component: Component })\n | { component: Component }"
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-counter#slots",
"vue-properties": [
{
"name": "counter",
"type": "string"
},
{
"name": "max",
"type": "string | number"
},
{
"name": "value",
"type": "string | number"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDataIterator",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDataIterator"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator",
"attributes": [
{
"name": "search",
"description": "Text input used to filter items.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "loading",
"description": "If `true` and no items are provided, then a loading text will be shown.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "items",
"description": "An array of strings or objects used for automatically generating children components.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "unknown[]"
}
},
{
"name": "itemValue",
"description": "Property on supplied `items` that contains its value.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "'id'",
"value": {
"kind": "expression",
"type": "SelectItemKey"
}
},
{
"name": "itemSelectable",
"description": "Property on supplied `items` that contains the boolean value indicating if the item is selectable.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "null",
"value": {
"kind": "expression",
"type": "SelectItemKey"
}
},
{
"name": "returnObject",
"description": "Changes the selection behavior to return the object directly rather than the value specified with **item-value**.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "showSelect",
"description": "Shows the column with checkboxes for selecting items in the list.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "selectStrategy",
"description": "Defines the strategy of selecting items in the list. Possible values are: 'single' (only one item can be selected at a time), 'page' ('Select all' button will select only items on the current page), 'all' ('Select all' button will select all items in the list).",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "'page'",
"value": {
"kind": "expression",
"type": "'single' | 'page' | 'all'"
}
},
{
"name": "page",
"description": "The current displayed page number (1-indexed).",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "1",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "modelValue",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "any[]"
}
},
{
"name": "valueComparator",
"description": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"value": {
"kind": "expression",
"type": "(a: any, b: any) => boolean"
}
},
{
"name": "sortBy",
"description": "Changes which item property (or properties) should be used for sort order. Can be used with `.sync` modifier.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "SortItem[]"
}
},
{
"name": "multiSort",
"description": "If `true` then one can sort on multiple properties.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "mustSort",
"description": "If `true` then one can not disable sorting, it will always switch between ascending and descending.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "customKeySort",
"description": "Function used on specific keys within the item object. `customSort` is skipped for columns with `customKeySort` specified.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "itemsPerPage",
"description": "Changes how many items per page should be visible. Can be used with `.sync` modifier. Setting this prop to `-1` will display all items on the page.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "5",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "expandOnClick",
"description": "Expands item when the row is clicked.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "showExpand",
"description": "Shows the expand icon.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "expanded",
"description": "Array of expanded items. Can be used with `.sync` modifier.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "string[]"
}
},
{
"name": "groupBy",
"description": "Changes which item property should be used for grouping items. Currently only supports a single grouping in the format: `group` or `['group']`. When using an array, only the first element is considered. Can be used with `.sync` modifier.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "SortItem[]"
}
},
{
"name": "filterMode",
"description": "Controls how the results of `customFilter` and `customKeyFilter` are combined. All modes only apply `customFilter` to columns not specified in `customKeyFilter`.\n\n- **some**: There is at least one match from either the custom filter or the custom key filter.\n- **every**: All columns match either the custom filter or the custom key filter.\n- **union**: There is at least one match from the custom filter, or all columns match the custom key filters.\n- **intersection**: There is at least one match from the custom filter, and all columns match the custom key filters.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "'intersection'",
"value": {
"kind": "expression",
"type": "'every' | 'some' | 'union' | 'intersection'"
}
},
{
"name": "noFilter",
"description": "Disables all item filtering.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "customFilter",
"description": "Function to filter items.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"value": {
"kind": "expression",
"type": "FilterFunction"
}
},
{
"name": "customKeyFilter",
"description": "Function used on specific keys within the item object. `customFilter` is skipped for columns with `customKeyFilter` specified.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "filterKeys",
"description": "Array of specific keys to filter on the item.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"value": {
"kind": "expression",
"type": "string | string[]"
}
},
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "'div'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "transition",
"description": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "{component: {name: 'fade-transition'}, hideOnLeave: true}",
"value": {
"kind": "expression",
"type": "| string\n | boolean\n | (TransitionProps & { component: Component })\n | { component: Component; hideOnLeave: boolean }"
}
}
],
"events": [
{
"name": "update:modelValue",
"description": "Event that is emitted when the component's model changes.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#events",
"arguments": [
{
"name": "argument",
"type": "[any[]]\n"
}
]
},
{
"name": "update:expanded",
"description": "The `.sync` event for `expanded` prop.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:groupBy",
"description": "The `.sync` event for `groupBy` prop.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:page",
"description": "The `.sync` event for `page` prop.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#events",
"arguments": [
{
"name": "argument",
"type": "[number]\n"
}
]
},
{
"name": "update:itemsPerPage",
"description": "The `.sync` event for `itemsPerPage` prop.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#events",
"arguments": [
{
"name": "argument",
"type": "[number]\n"
}
]
},
{
"name": "update:sortBy",
"description": "The `.sync` event for `sortBy` prop.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:options",
"description": "The `.sync` event for `options` prop.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:currentItems",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataIterator.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
}
],
"slots": [
{
"name": "default",
"description": "The default slot. Use this to render your items.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "DataIteratorItem[]"
},
{
"name": "groupedItems",
"type": "(DataIteratorItem | Group)[]"
}
]
},
{
"name": "header",
"description": "Defines a header above the items.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "DataIteratorItem[]"
},
{
"name": "groupedItems",
"type": "(DataIteratorItem | Group)[]"
}
]
},
{
"name": "footer",
"description": "Defines a footer below the items.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "DataIteratorItem[]"
},
{
"name": "groupedItems",
"type": "(DataIteratorItem | Group)[]"
}
]
},
{
"name": "loader",
"description": "Slot for custom loader (displayed when [loading](#props-loading) prop is equal to true).",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#slots",
"vue-properties": [
{
"name": "color",
"type": "string"
},
{
"name": "isActive",
"type": "boolean"
}
]
},
{
"name": "no-data",
"description": "Defines content for when no items are provided.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDataTable",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDataTable"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-data-table",
"attributes": [
{
"name": "width",
"description": "Sets the width for the component.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "headerProps",
"description": "Pass props to the default header. See [`v-data-table-headers` API](/api/v-data-table-headers) for more information.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "cellProps",
"description": "An object of additional props to be passed to each `` in the table body. Also accepts a function that will be called for each cell. If the same prop is defined both here and in `cellProps` in a headers object, the value from the headers object will be used.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "| Record\n | ((\n data: Pick<\n ItemKeySlot,\n 'value' | 'item' | 'index' | 'internalItem' | 'column'\n >,\n ) => Record)"
}
},
{
"name": "mobile",
"description": "Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "loading",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | boolean"
}
},
{
"name": "headers",
"description": "An array of objects that each describe a header column. See the example below for a definition of all properties.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "{\n readonly key?:\n | 'data-table-group'\n | 'data-table-select'\n | 'data-table-expand'\n | (string & {})\n | undefined\n readonly value?: SelectItemKey\n readonly title?: string | undefined\n readonly fixed?: boolean | undefined\n readonly align?: 'start' | 'end' | 'center' | undefined\n readonly width?: string | number | undefined\n readonly minWidth?: string | undefined\n readonly maxWidth?: string | undefined\n readonly nowrap?: boolean | undefined\n readonly headerProps?: { readonly [x: string]: any } | undefined\n readonly cellProps?:\n | { readonly [x: string]: any }\n | ((\n data: Pick<\n ItemKeySlot,\n 'value' | 'item' | 'index' | 'internalItem'\n >,\n ) => Record)\n | undefined\n readonly sortable?: boolean | undefined\n readonly sort?: DataTableCompareFunction | undefined\n readonly sortRaw?: DataTableCompareFunction | undefined\n readonly filter?: FilterFunction | undefined\n readonly mobile?: boolean | undefined\n readonly children?: readonly any[] | undefined\n}[]"
}
},
{
"name": "page",
"description": "The current displayed page number (1-indexed).",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "1",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "itemsPerPage",
"description": "Changes how many items per page should be visible. Can be used with `.sync` modifier. Setting this prop to `-1` will display all items on the page.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "10",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "loadingText",
"description": "Text shown when the data is loading.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$vuetify.dataIterator.loadingText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "hideNoData",
"description": "Hides the menu when there are no options to show. Useful for preventing the menu from opening before results are fetched asynchronously. Also has the effect of opening the menu when the `items` array changes if not already open.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "items",
"description": "An array of strings or objects used for automatically generating children components.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "any[]"
}
},
{
"name": "noDataText",
"description": "Text shown when no items are provided to the component.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$vuetify.noDataText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "mobileBreakpoint",
"description": "Overrides the display configuration default screen size that the component should be considered in mobile.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
}
},
{
"name": "rowProps",
"description": "An object of additional props to be passed to each `` in the table body. Also accepts a function that will be called for each row.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "| Record\n | ((\n data: Pick, 'item' | 'index' | 'internalItem'>,\n ) => Record)"
}
},
{
"name": "hideDefaultBody",
"description": "Hides the default body.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "hideDefaultFooter",
"description": "Hides the default footer. This has no effect on `v-data-table-virtual`.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "hideDefaultHeader",
"description": "Hides the default header.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "search",
"description": "Text input used to filter items.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "expandOnClick",
"description": "Expands item when the row is clicked.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "showExpand",
"description": "Shows the expand toggle in default rows.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "expanded",
"description": "Whether the item is expanded or not.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "string[]"
}
},
{
"name": "groupBy",
"description": "Changes which item property should be used for grouping items. Currently only supports a single grouping in the format: `group` or `['group']`. When using an array, only the first element is considered. Can be used with `.sync` modifier.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "SortItem[]"
}
},
{
"name": "itemValue",
"description": "Property on supplied `items` that contains its value.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'id'",
"value": {
"kind": "expression",
"type": "SelectItemKey"
}
},
{
"name": "itemSelectable",
"description": "Property on supplied `items` that indicates whether the item is selectable.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "null",
"value": {
"kind": "expression",
"type": "SelectItemKey"
}
},
{
"name": "returnObject",
"description": "Changes the selection behavior to return the object directly rather than the value specified with **item-value**.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "showSelect",
"description": "Shows the select checkboxes in both the header and rows (if using default rows).",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "selectStrategy",
"description": "Defines the strategy of selecting items in the list. Possible values are: 'single' (only one item can be selected at a time), 'page' ('Select all' button will select only items on the current page), 'all' ('Select all' button will select all items in the list).",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'page'",
"value": {
"kind": "expression",
"type": "'page' | 'single' | 'all'"
}
},
{
"name": "modelValue",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "valueComparator",
"description": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "(a: any, b: any) => boolean"
}
},
{
"name": "sortBy",
"description": "Changes which item property (or properties) should be used for sort order. Can be used with `.sync` modifier.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "SortItem[]"
}
},
{
"name": "multiSort",
"description": "If `true` then one can sort on multiple properties.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "mustSort",
"description": "If `true` then one can not disable sorting, it will always switch between ascending and descending.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "customKeySort",
"description": "Function used on specific keys within the item object. `customSort` is skipped for columns with `customKeySort` specified.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "color",
"description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "sticky",
"description": "Sticks the header to the top of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "disableSort",
"description": "Disables sorting completely.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "sortAscIcon",
"description": "Icon used for ascending sort button.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$sortAsc'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "sortDescIcon",
"description": "Icon used for descending sort button.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$sortDesc'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "fixedHeader",
"description": "Fixed header to top of table.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "fixedFooter",
"description": "Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "height",
"description": "Set an explicit height of table.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "hover",
"description": "Adds a hover effects to a table rows.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "density",
"description": "Adjusts the vertical height of the table rows.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'default'",
"value": {
"kind": "expression",
"type": "'default' | 'comfortable' | 'compact'"
}
},
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'div'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "theme",
"description": "Specify a theme for this component and all of its children.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "filterMode",
"description": "Controls how the results of `customFilter` and `customKeyFilter` are combined. All modes only apply `customFilter` to columns not specified in `customKeyFilter`.\n\n- **some**: There is at least one match from either the custom filter or the custom key filter.\n- **every**: All columns match either the custom filter or the custom key filter.\n- **union**: There is at least one match from the custom filter, or all columns match the custom key filters.\n- **intersection**: There is at least one match from the custom filter, and all columns match the custom key filters.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'intersection'",
"value": {
"kind": "expression",
"type": "'every' | 'some' | 'union' | 'intersection'"
}
},
{
"name": "noFilter",
"description": "Disables all item filtering.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "customFilter",
"description": "Function to filter items.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "FilterFunction"
}
},
{
"name": "customKeyFilter",
"description": "Function used on specific keys within the item object. `customFilter` is skipped for columns with `customKeyFilter` specified.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "filterKeys",
"description": "Array of specific keys to filter on the item.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "string | string[]"
}
},
{
"name": "prevIcon",
"description": "Previous icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$prev'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "nextIcon",
"description": "Next icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$next'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "firstIcon",
"description": "First icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$first'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "lastIcon",
"description": "Last icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$last'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "itemsPerPageText",
"description": "Text for items-per-page dropdown.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$vuetify.dataFooter.itemsPerPageText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "pageText",
"description": "Label for page number.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$vuetify.dataFooter.pageText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "firstPageLabel",
"description": "Label for first page.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$vuetify.dataFooter.firstPage'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "prevPageLabel",
"description": "Label for previous page.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$vuetify.dataFooter.prevPage'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "nextPageLabel",
"description": "Label for next page.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$vuetify.dataFooter.nextPage'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "lastPageLabel",
"description": "Label for last page.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$vuetify.dataFooter.lastPage'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "itemsPerPageOptions",
"description": "Array of options to show in the items-per-page dropdown.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "[\n {value: 10, title: '10'},\n {value: 25, title: '25'},\n {value: 50, title: '50'},\n {value: 100, title: '100'},\n {value: -1, title: '$vuetify.dataFooter.itemsPerPageAll'}\n]",
"value": {
"kind": "expression",
"type": "(number | { title: string; value: number })[]"
}
},
{
"name": "showCurrentPage",
"description": "Show current page number between prev/next icons.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
}
],
"events": [
{
"name": "update:expanded",
"description": "Emits when the **expanded** property of the **options** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:modelValue",
"description": "Emits when the component's model changes.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#events",
"arguments": [
{
"name": "argument",
"type": "[unknown]\n"
}
]
},
{
"name": "update:page",
"description": "Emits when the **page** property of the **options** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#events",
"arguments": [
{
"name": "argument",
"type": "[number]\n"
}
]
},
{
"name": "update:itemsPerPage",
"description": "Emits when the **items-per-page** property of the **options** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#events",
"arguments": [
{
"name": "argument",
"type": "[number]\n"
}
]
},
{
"name": "update:sortBy",
"description": "Emits when the **sortBy** property of the **options** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:options",
"description": "Emits when one of the **options** properties is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:groupBy",
"description": "Emits when the **group-by** property of the **options** property is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:currentItems",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTable.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
}
],
"slots": [
{
"name": "data-table-group",
"description": "Slot for custom rendering of a group.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "item",
"type": "Group"
},
{
"name": "count",
"type": "number"
},
{
"name": "props",
"type": "Record"
}
]
},
{
"name": "data-table-select",
"description": "Slot for custom rendering of a header cell with the select checkbox.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "props",
"type": "Record"
}
]
},
{
"name": "item.data-table-select",
"description": "Slot to replace the default `v-checkbox-btn` used when selecting rows.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots"
},
{
"name": "item.data-table-expand",
"description": "Slot to replace the default `v-icon` used when expanding rows.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots"
},
{
"name": "header.data-table-select",
"description": "Slot to replace the default `v-checkbox-btn` in header.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "header.data-table-expand",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTableHeaders.tsx#L42-L51.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "item",
"description": "Slot to replace the default rendering of a row.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots"
},
{
"name": "loading",
"description": "Defines content for when `loading` is true and no items are provided.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots"
},
{
"name": "group-header",
"description": "Slot for custom rendering of a group header.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "index",
"type": "number"
},
{
"name": "item",
"type": "Group"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
}
]
},
{
"name": "no-data",
"description": "Defines content for when no items are provided.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots"
},
{
"name": "expanded-row",
"description": "Slot for custom rendering of an expanded row.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots"
},
{
"name": "headers",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTableHeaders.tsx#L30-L40.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
}
]
},
{
"name": "loader",
"description": "Slot for custom loader (displayed when [loading](#props-loading) prop is equal to true).",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "color",
"type": "string"
},
{
"name": "isActive",
"type": "boolean"
}
]
},
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "colgroup",
"description": "Slot to replace the default rendering of the `` element.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "top",
"description": "Slot to add content above the table.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "body",
"description": "Slot to replace the default table ``.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "tbody",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTable.tsx#L35-L57.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "thead",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTable.tsx#L35-L57.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "tfoot",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTable.tsx#L35-L57.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "bottom",
"description": "Slot for custom rendering of a data table footer.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "body.prepend",
"description": "Prepends elements to the start of the default table ``.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "body.append",
"description": "Appends elements to the end of the default table ``.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "footer.prepend",
"description": "Adds content to the empty space in the footer.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots"
},
{
"name": "[`item.${string}`]",
"description": "Slot for custom rendering of a row cell.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots"
},
{
"name": "[`header.${string}`]",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTableHeaders.tsx#L42-L51.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDataTableFooter",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDataTableFooter"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-data-table-footer",
"attributes": [],
"events": [],
"slots": [
{
"name": "[string]",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableFooter.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-footer#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDataTableHeaders",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDataTableHeaders"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-data-table-headers",
"attributes": [
{
"name": "color",
"description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "sticky",
"description": "Sticks the header to the top of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "disableSort",
"description": "Toggles rendering of sort button.",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "multiSort",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableHeaders.json))",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "sortAscIcon",
"description": "Icon used for ascending sort button.",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"default": "'$sortAsc'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "sortDescIcon",
"description": "Icon used for descending sort button.",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"default": "'$sortDesc'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "headerProps",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableHeaders.json))",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "mobile",
"description": "Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "mobileBreakpoint",
"description": "Overrides the display configuration default screen size that the component should be considered in mobile.",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"value": {
"kind": "expression",
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
}
},
{
"name": "loading",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color.",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | boolean"
}
}
],
"events": [],
"slots": [
{
"name": "headers",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTableHeaders.tsx#L30-L40.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-headers#slots",
"vue-properties": [
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
}
]
},
{
"name": "loader",
"description": "Slot for custom loader (displayed when [loading](#props-loading) prop is equal to true).",
"doc-url": "https://vuetifyjs.com/api/v-data-table-headers#slots",
"vue-properties": [
{
"name": "color",
"type": "string"
},
{
"name": "isActive",
"type": "boolean"
}
]
},
{
"name": "header.data-table-select",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTableHeaders.tsx#L42-L51.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-headers#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "header.data-table-expand",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTableHeaders.tsx#L42-L51.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-headers#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "[`header.${string}`]",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTableHeaders.tsx#L42-L51.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-headers#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDataTableRow",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDataTableRow"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-data-table-row",
"attributes": [
{
"name": "cellProps",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableRow.json))",
"doc-url": "https://vuetifyjs.com/api/VDataTableRow#props",
"value": {
"kind": "expression",
"type": "| Record\n | ((\n data: Pick<\n ItemKeySlot,\n 'value' | 'index' | 'item' | 'internalItem' | 'column'\n >,\n ) => Record)"
}
},
{
"name": "mobile",
"description": "Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint",
"doc-url": "https://vuetifyjs.com/api/VDataTableRow#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "index",
"description": "Row index.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRow#props",
"value": {
"kind": "expression",
"type": "number"
}
},
{
"name": "mobileBreakpoint",
"description": "Overrides the display configuration default screen size that the component should be considered in mobile.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRow#props",
"value": {
"kind": "expression",
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
}
},
{
"name": "item",
"description": "Data (key, index and column values) of the displayed item.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRow#props",
"value": {
"kind": "expression",
"type": "unknown"
}
}
],
"events": [
{
"name": "click",
"description": "Event that is emitted when the component is clicked.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-row#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
},
{
"name": "contextmenu",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableRow.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-row#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
},
{
"name": "dblclick",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableRow.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-row#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
}
],
"slots": [
{
"name": "item.data-table-select",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/typescript/lib/lib.es5.d.ts#L6-L6.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-row#slots"
},
{
"name": "item.data-table-expand",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/typescript/lib/lib.es5.d.ts#L6-L6.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-row#slots"
},
{
"name": "header.data-table-select",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTableHeaders.tsx#L42-L51.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-row#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "header.data-table-expand",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTableHeaders.tsx#L42-L51.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-row#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "[`item.${string}`]",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/types.ts#L82-L85.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-row#slots"
},
{
"name": "[`header.${string}`]",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTableHeaders.tsx#L42-L51.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-row#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDataTableRows",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDataTableRows"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows",
"attributes": [
{
"name": "cellProps",
"description": "An object of additional props to be passed to each `` in the table body. Also accepts a function that will be called for each cell. If the same prop is defined both here and in `cellProps` in a headers object, the value from the headers object will be used.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"value": {
"kind": "expression",
"type": "| Record\n | ((\n data: Pick<\n ItemKeySlot,\n 'value' | 'item' | 'index' | 'internalItem' | 'column'\n >,\n ) => Record)"
}
},
{
"name": "mobile",
"description": "Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "loading",
"description": "Displays `loading` slot if set to `true`",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | boolean"
}
},
{
"name": "loadingText",
"description": "Text shown when the data is loading.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"default": "'$vuetify.dataIterator.loadingText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "hideNoData",
"description": "Hides the menu when there are no options to show. Useful for preventing the menu from opening before results are fetched asynchronously. Also has the effect of opening the menu when the `items` array changes if not already open.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "items",
"description": "An array of strings or objects used for automatically generating children components.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "(DataTableItem | Group)[]"
}
},
{
"name": "noDataText",
"description": "Text shown when no items are provided to the component.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"default": "'$vuetify.noDataText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "mobileBreakpoint",
"description": "Overrides the display configuration default screen size that the component should be considered in mobile.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"value": {
"kind": "expression",
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
}
},
{
"name": "rowProps",
"description": "An object of additional props to be passed to each `` in the table body. Also accepts a function that will be called for each row.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"value": {
"kind": "expression",
"type": "| Record\n | ((\n data: Pick, 'item' | 'index' | 'internalItem'>,\n ) => Record)"
}
}
],
"events": [],
"slots": [
{
"name": "data-table-group",
"description": "Slot for custom rendering of a group.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots",
"vue-properties": [
{
"name": "item",
"type": "Group"
},
{
"name": "count",
"type": "number"
},
{
"name": "props",
"type": "Record"
}
]
},
{
"name": "data-table-select",
"description": "Slot for custom rendering of a header cell with the select checkbox.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots",
"vue-properties": [
{
"name": "props",
"type": "Record"
}
]
},
{
"name": "item.data-table-select",
"description": "Slot for custom rendering of a row cell with the select checkbox.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots"
},
{
"name": "item.data-table-expand",
"description": "Slot for custom rendering of a row cell with the expand icon.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots"
},
{
"name": "header.data-table-select",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTableHeaders.tsx#L42-L51.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "header.data-table-expand",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTableHeaders.tsx#L42-L51.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "item",
"description": "Define a custom item appearance.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots"
},
{
"name": "loading",
"description": "Slot for custom rendering of the loading state.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots"
},
{
"name": "group-header",
"description": "Slot for custom rendering of a group header.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots",
"vue-properties": [
{
"name": "index",
"type": "number"
},
{
"name": "item",
"type": "Group"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
}
]
},
{
"name": "no-data",
"description": "Defines content for when no items are provided.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots"
},
{
"name": "expanded-row",
"description": "Slot for custom rendering of an expanded row.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots"
},
{
"name": "[`item.${string}`]",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/types.ts#L82-L85.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots"
},
{
"name": "[`header.${string}`]",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTableHeaders.tsx#L42-L51.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDataTableServer",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDataTableServer"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server",
"attributes": [
{
"name": "width",
"description": "Sets the width for the component.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "headerProps",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableHeaders.json))",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "cellProps",
"description": "An object of additional props to be passed to each `` in the table body. Also accepts a function that will be called for each cell. If the same prop is defined both here and in `cellProps` in a headers object, the value from the headers object will be used.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "| Record\n | ((\n data: Pick<\n ItemKeySlot,\n 'value' | 'item' | 'index' | 'internalItem' | 'column'\n >,\n ) => Record)"
}
},
{
"name": "mobile",
"description": "Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "loading",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | boolean"
}
},
{
"name": "headers",
"description": "An array of objects that each describe a header column.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "{\n readonly key?:\n | 'data-table-group'\n | 'data-table-select'\n | 'data-table-expand'\n | (string & {})\n | undefined\n readonly value?: SelectItemKey>\n readonly title?: string | undefined\n readonly fixed?: boolean | undefined\n readonly align?: 'start' | 'end' | 'center' | undefined\n readonly width?: string | number | undefined\n readonly minWidth?: string | undefined\n readonly maxWidth?: string | undefined\n readonly nowrap?: boolean | undefined\n readonly headerProps?: { readonly [x: string]: any } | undefined\n readonly cellProps?:\n | { readonly [x: string]: any }\n | ((\n data: Pick<\n ItemKeySlot,\n 'value' | 'item' | 'index' | 'internalItem'\n >,\n ) => Record)\n | undefined\n readonly sortable?: boolean | undefined\n readonly sort?: DataTableCompareFunction | undefined\n readonly sortRaw?: DataTableCompareFunction | undefined\n readonly filter?: FilterFunction | undefined\n readonly mobile?: boolean | undefined\n readonly children?:\n | readonly {\n readonly key?:\n | 'data-table-group'\n | 'data-table-select'\n | 'data-table-expand'\n | (string & {})\n | undefined\n readonly value?: SelectItemKey>\n readonly title?: string | undefined\n readonly fixed?: boolean | undefined\n readonly align?: 'start' | 'end' | 'center' | undefined\n readonly width?: string | number | undefined\n readonly minWidth?: string | undefined\n readonly maxWidth?: string | undefined\n readonly nowrap?: boolean | undefined\n readonly headerProps?: { readonly [x: string]: any } | undefined\n readonly cellProps?:\n | { readonly [x: string]: any }\n | ((\n data: Pick<\n ItemKeySlot,\n 'value' | 'item' | 'index' | 'internalItem'\n >,\n ) => Record)\n | undefined\n readonly sortable?: boolean | undefined\n readonly sort?: DataTableCompareFunction | undefined\n readonly sortRaw?: DataTableCompareFunction | undefined\n readonly filter?: FilterFunction | undefined\n readonly mobile?: boolean | undefined\n readonly children?: readonly any[] | undefined\n }[]\n | undefined\n}[]"
}
},
{
"name": "itemsLength",
"description": "Number of all items.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "page",
"description": "The current displayed page number (1-indexed).",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "1",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "itemsPerPage",
"description": "The number of items to display on each page.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "10",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "loadingText",
"description": "Text shown when the data is loading.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$vuetify.dataIterator.loadingText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "hideNoData",
"description": "Hides the menu when there are no options to show. Useful for preventing the menu from opening before results are fetched asynchronously. Also has the effect of opening the menu when the `items` array changes if not already open.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "items",
"description": "An array of strings or objects used for automatically generating children components.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "any[]"
}
},
{
"name": "noDataText",
"description": "Text shown when no items are provided to the component.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$vuetify.noDataText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "mobileBreakpoint",
"description": "Overrides the display configuration default screen size that the component should be considered in mobile.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
}
},
{
"name": "rowProps",
"description": "An object of additional props to be passed to each `` in the table body. Also accepts a function that will be called for each row.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "| Record\n | ((\n data: Pick, 'item' | 'index' | 'internalItem'>,\n ) => Record)"
}
},
{
"name": "hideDefaultBody",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/DataTable.json))",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "hideDefaultFooter",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/DataTable.json))",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "hideDefaultHeader",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/DataTable.json))",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "search",
"description": "Text input used to filter items.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "expandOnClick",
"description": "Expands item when the row is clicked.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "showExpand",
"description": "Shows the expand icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "expanded",
"description": "Whether the item is expanded or not.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "string[]"
}
},
{
"name": "groupBy",
"description": "Defines the grouping of the table items.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "SortItem[]"
}
},
{
"name": "itemValue",
"description": "Property on supplied `items` that contains its value.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'id'",
"value": {
"kind": "expression",
"type": "SelectItemKey"
}
},
{
"name": "itemSelectable",
"description": "Property on supplied `items` that indicates whether the item is selectable.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "null",
"value": {
"kind": "expression",
"type": "SelectItemKey"
}
},
{
"name": "returnObject",
"description": "Changes the selection behavior to return the object directly rather than the value specified with **item-value**.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "showSelect",
"description": "Shows the column with checkboxes for selecting items in the list.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "selectStrategy",
"description": "Defines the strategy of selecting items in the list. Possible values are: 'single' (only one item can be selected at a time), 'page' ('Select all' button will select only items on the current page), 'all' ('Select all' button will select all items in the list).",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'page'",
"value": {
"kind": "expression",
"type": "'page' | 'single' | 'all'"
}
},
{
"name": "modelValue",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "valueComparator",
"description": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "(a: any, b: any) => boolean"
}
},
{
"name": "sortBy",
"description": "Array of column keys and sort orders that determines the sort order of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "SortItem[]"
}
},
{
"name": "multiSort",
"description": "Allows sorting by multiple columns.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "mustSort",
"description": "Forces sorting on the column(s).",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "customKeySort",
"description": "Function used on specific keys within the item object. `customSort` is skipped for columns with `customKeySort` specified.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "color",
"description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "sticky",
"description": "Sticks the header to the top of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "disableSort",
"description": "Toggles rendering of sort button.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "sortAscIcon",
"description": "Icon used for ascending sort button.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$sortAsc'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "sortDescIcon",
"description": "Icon used for descending sort button.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$sortDesc'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "fixedHeader",
"description": "Use the fixed-header prop together with the height prop to fix the header to the top of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "fixedFooter",
"description": "Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "height",
"description": "Use the height prop to set the height of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "hover",
"description": "Will add a hover effect to a table's row when the mouse is over it.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "density",
"description": "Adjusts the vertical height used by the component.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'default'",
"value": {
"kind": "expression",
"type": "'default' | 'comfortable' | 'compact'"
}
},
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'div'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "theme",
"description": "Specify a theme for this component and all of its children.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "prevIcon",
"description": "Previous icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$prev'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "nextIcon",
"description": "Next icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$next'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "firstIcon",
"description": "First icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$first'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "lastIcon",
"description": "Last icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$last'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "itemsPerPageText",
"description": "Text for items-per-page dropdown.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$vuetify.dataFooter.itemsPerPageText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "pageText",
"description": "Label for page number.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$vuetify.dataFooter.pageText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "firstPageLabel",
"description": "Label for first page.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$vuetify.dataFooter.firstPage'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "prevPageLabel",
"description": "Label for previous page.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$vuetify.dataFooter.prevPage'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "nextPageLabel",
"description": "Label for next page.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$vuetify.dataFooter.nextPage'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "lastPageLabel",
"description": "Label for last page.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$vuetify.dataFooter.lastPage'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "itemsPerPageOptions",
"description": "Array of options to show in the items-per-page dropdown.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "[\n {value: 10, title: '10'},\n {value: 25, title: '25'},\n {value: 50, title: '50'},\n {value: 100, title: '100'},\n {value: -1, title: '$vuetify.dataFooter.itemsPerPageAll'}\n]",
"value": {
"kind": "expression",
"type": "(number | { title: string; value: number })[]"
}
},
{
"name": "showCurrentPage",
"description": "Show current page number between prev/next icons.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
}
],
"events": [
{
"name": "update:expanded",
"description": "Emits when the **expanded** property of the **options** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:modelValue",
"description": "Emits when the component's model changes.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#events",
"arguments": [
{
"name": "argument",
"type": "[unknown]\n"
}
]
},
{
"name": "update:page",
"description": "Emits when the **page** property of the **options** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#events",
"arguments": [
{
"name": "argument",
"type": "[number]\n"
}
]
},
{
"name": "update:itemsPerPage",
"description": "Emits when the **items-per-page** property of the **options** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#events",
"arguments": [
{
"name": "argument",
"type": "[number]\n"
}
]
},
{
"name": "update:sortBy",
"description": "Emits when the **sort-by** property of the **options** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:options",
"description": "Emits when one of the **options** properties is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:groupBy",
"description": "Emits when the **group-by** property of the **options** property is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
}
],
"slots": [
{
"name": "data-table-group",
"description": "Slot for custom rendering of a group.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "item",
"type": "Group"
},
{
"name": "count",
"type": "number"
},
{
"name": "props",
"type": "Record"
}
]
},
{
"name": "data-table-select",
"description": "Slot for custom rendering of a header cell with the select checkbox.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "props",
"type": "Record"
}
]
},
{
"name": "item.data-table-select",
"description": "Slot to replace the default checkbox used when selecting rows.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots"
},
{
"name": "item.data-table-expand",
"description": "Slot to replace the default `v-icon` used when expanding rows.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots"
},
{
"name": "header.data-table-select",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTableHeaders.tsx#L42-L51.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "header.data-table-expand",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTableHeaders.tsx#L42-L51.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "item",
"description": "Slot to replace the default rendering of a row.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots"
},
{
"name": "loading",
"description": "Defines content for when `loading` is true and no items are provided.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots"
},
{
"name": "group-header",
"description": "Slot for custom rendering of a group header.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "index",
"type": "number"
},
{
"name": "item",
"type": "Group"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
}
]
},
{
"name": "no-data",
"description": "Defines content for when no items are provided.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots"
},
{
"name": "expanded-row",
"description": "Slot for custom rendering of an expanded row.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots"
},
{
"name": "headers",
"description": "Slot to replace the default rendering of the `` element.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
}
]
},
{
"name": "loader",
"description": "Slot for custom loader (displayed when [loading](#props-loading) prop is equal to true).",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "color",
"type": "string"
},
{
"name": "isActive",
"type": "boolean"
}
]
},
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "colgroup",
"description": "Slot to replace the default rendering of the `` element.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "top",
"description": "Slot to add content above the table.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "body",
"description": "Slot to replace the default rendering of the `` element.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "tbody",
"description": "Slot to replace the default rendering of the `` element.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "thead",
"description": "Slot to replace the default rendering of the `` element.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "tfoot",
"description": "Slot to replace the default rendering of the `` element.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "bottom",
"description": "Slot to add content below the table.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "body.prepend",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTable.tsx#L35-L57.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "body.append",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTable.tsx#L35-L57.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "footer.prepend",
"description": "Adds content to the empty space in the footer.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots"
},
{
"name": "[`item.${string}`]",
"description": "Slot for custom rendering of a row cell.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots"
},
{
"name": "[`header.${string}`]",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTableHeaders.tsx#L42-L51.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDataTableVirtual",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDataTableVirtual"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual",
"attributes": [
{
"name": "width",
"description": "Sets the width for the component.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "headerProps",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableHeaders.json))",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "cellProps",
"description": "An object of additional props to be passed to each `` in the table body. Also accepts a function that will be called for each cell. If the same prop is defined both here and in `cellProps` in a headers object, the value from the headers object will be used.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "| Record\n | ((\n data: Pick<\n ItemKeySlot,\n 'value' | 'item' | 'index' | 'internalItem' | 'column'\n >,\n ) => Record)"
}
},
{
"name": "mobile",
"description": "Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "headers",
"description": "An array of objects that each describe a header column.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "{\n readonly key?:\n | 'data-table-group'\n | 'data-table-select'\n | 'data-table-expand'\n | (string & {})\n | undefined\n readonly value?: SelectItemKey>\n readonly title?: string | undefined\n readonly fixed?: boolean | undefined\n readonly align?: 'start' | 'end' | 'center' | undefined\n readonly width?: string | number | undefined\n readonly minWidth?: string | undefined\n readonly maxWidth?: string | undefined\n readonly nowrap?: boolean | undefined\n readonly headerProps?: { readonly [x: string]: any } | undefined\n readonly cellProps?:\n | { readonly [x: string]: any }\n | ((\n data: Pick<\n ItemKeySlot,\n 'value' | 'item' | 'index' | 'internalItem'\n >,\n ) => Record)\n | undefined\n readonly sortable?: boolean | undefined\n readonly sort?: DataTableCompareFunction | undefined\n readonly sortRaw?: DataTableCompareFunction | undefined\n readonly filter?: FilterFunction | undefined\n readonly mobile?: boolean | undefined\n readonly children?:\n | readonly {\n readonly key?:\n | 'data-table-group'\n | 'data-table-select'\n | 'data-table-expand'\n | (string & {})\n | undefined\n readonly value?: SelectItemKey>\n readonly title?: string | undefined\n readonly fixed?: boolean | undefined\n readonly align?: 'start' | 'end' | 'center' | undefined\n readonly width?: string | number | undefined\n readonly minWidth?: string | undefined\n readonly maxWidth?: string | undefined\n readonly nowrap?: boolean | undefined\n readonly headerProps?: { readonly [x: string]: any } | undefined\n readonly cellProps?:\n | { readonly [x: string]: any }\n | ((\n data: Pick<\n ItemKeySlot,\n 'value' | 'item' | 'index' | 'internalItem'\n >,\n ) => Record)\n | undefined\n readonly sortable?: boolean | undefined\n readonly sort?: DataTableCompareFunction | undefined\n readonly sortRaw?: DataTableCompareFunction | undefined\n readonly filter?: FilterFunction | undefined\n readonly mobile?: boolean | undefined\n readonly children?: readonly any[] | undefined\n }[]\n | undefined\n}[]"
}
},
{
"name": "loading",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | boolean"
}
},
{
"name": "loadingText",
"description": "Text shown when the data is loading.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "'$vuetify.dataIterator.loadingText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "hideNoData",
"description": "Hides the menu when there are no options to show. Useful for preventing the menu from opening before results are fetched asynchronously. Also has the effect of opening the menu when the `items` array changes if not already open.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "items",
"description": "An array of strings or objects used for automatically generating children components.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "any[]"
}
},
{
"name": "noDataText",
"description": "Text shown when no items are provided to the component.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "'$vuetify.noDataText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "mobileBreakpoint",
"description": "Overrides the display configuration default screen size that the component should be considered in mobile.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
}
},
{
"name": "rowProps",
"description": "An object of additional props to be passed to each `` in the table body. Also accepts a function that will be called for each row.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "| Record\n | ((\n data: Pick, 'item' | 'index' | 'internalItem'>,\n ) => Record)"
}
},
{
"name": "hideDefaultBody",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/DataTable.json))",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "hideDefaultFooter",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/DataTable.json))",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "hideDefaultHeader",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/DataTable.json))",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "search",
"description": "Text input used to filter items.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "expandOnClick",
"description": "Expands item when the row is clicked.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "showExpand",
"description": "Shows the expand icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "expanded",
"description": "Whether the item is expanded or not.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "string[]"
}
},
{
"name": "groupBy",
"description": "Defines the grouping of the table items.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "SortItem[]"
}
},
{
"name": "itemValue",
"description": "Property on supplied `items` that contains its value.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "'id'",
"value": {
"kind": "expression",
"type": "SelectItemKey"
}
},
{
"name": "itemSelectable",
"description": "Property on supplied `items` that indicates whether the item is selectable.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "null",
"value": {
"kind": "expression",
"type": "SelectItemKey"
}
},
{
"name": "returnObject",
"description": "Changes the selection behavior to return the object directly rather than the value specified with **item-value**.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "showSelect",
"description": "Shows the column with checkboxes for selecting items in the list.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "selectStrategy",
"description": "Defines the strategy of selecting items in the list. Possible values are: 'single' (only one item can be selected at a time), 'page' ('Select all' button will select only items on the current page), 'all' ('Select all' button will select all items in the list).",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "'page'",
"value": {
"kind": "expression",
"type": "'single' | 'page' | 'all'"
}
},
{
"name": "modelValue",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "valueComparator",
"description": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "(a: any, b: any) => boolean"
}
},
{
"name": "sortBy",
"description": "Array of column keys and sort orders that determines the sort order of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "SortItem[]"
}
},
{
"name": "multiSort",
"description": "Allows sorting by multiple columns.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "mustSort",
"description": "Forces sorting on the column(s).",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "customKeySort",
"description": "Function used on specific keys within the item object. `customSort` is skipped for columns with `customKeySort` specified.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "color",
"description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "sticky",
"description": "Sticks the header to the top of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "disableSort",
"description": "Toggles rendering of sort button.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "sortAscIcon",
"description": "Icon used for ascending sort button.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "'$sortAsc'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "sortDescIcon",
"description": "Icon used for descending sort button.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "'$sortDesc'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "fixedHeader",
"description": "Use the fixed-header prop together with the height prop to fix the header to the top of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "fixedFooter",
"description": "Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "height",
"description": "Use the height prop to set the height of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "hover",
"description": "Will add a hover effect to a table's row when the mouse is over it.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "density",
"description": "Adjusts the vertical height used by the component.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "'default'",
"value": {
"kind": "expression",
"type": "'default' | 'comfortable' | 'compact'"
}
},
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "'div'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "theme",
"description": "Specify a theme for this component and all of its children.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "itemHeight",
"description": "Height in pixels of each item to display.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "null",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "filterMode",
"description": "Controls how the results of `customFilter` and `customKeyFilter` are combined. All modes only apply `customFilter` to columns not specified in `customKeyFilter`.\n\n- **some**: There is at least one match from either the custom filter or the custom key filter.\n- **every**: All columns match either the custom filter or the custom key filter.\n- **union**: There is at least one match from the custom filter, or all columns match the custom key filters.\n- **intersection**: There is at least one match from the custom filter, and all columns match the custom key filters.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "'intersection'",
"value": {
"kind": "expression",
"type": "'every' | 'some' | 'union' | 'intersection'"
}
},
{
"name": "noFilter",
"description": "Disables all item filtering.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "customFilter",
"description": "Function used to filter items, called for each filterable key on each item in the list. The first argument is the filterable value from the item, the second is the search term, and the third is the internal item object. The function should return true if the item should be included in the filtered list, or the index of the match in the value if it should be included with the result highlighted.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "FilterFunction"
}
},
{
"name": "customKeyFilter",
"description": "Function used on specific keys within the item object. `customFilter` is skipped for columns with `customKeyFilter` specified.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "filterKeys",
"description": "Array of specific keys to filter on the item.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "string | string[]"
}
}
],
"events": [
{
"name": "update:expanded",
"description": "Emits when the **expanded** property of the **options** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:modelValue",
"description": "Emits when the component's model changes.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#events",
"arguments": [
{
"name": "argument",
"type": "[unknown]\n"
}
]
},
{
"name": "update:sortBy",
"description": "Emits when the **sort-by** property of the **options** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:options",
"description": "Emits when one of the **options** properties is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:groupBy",
"description": "Emits when the **group-by** property of the **options** property is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
}
],
"slots": [
{
"name": "data-table-group",
"description": "Slot for custom rendering of a group.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#slots",
"vue-properties": [
{
"name": "item",
"type": "Group"
},
{
"name": "count",
"type": "number"
},
{
"name": "props",
"type": "Record"
}
]
},
{
"name": "data-table-select",
"description": "Slot for custom rendering of a header cell with the select checkbox.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#slots",
"vue-properties": [
{
"name": "props",
"type": "Record"
}
]
},
{
"name": "item.data-table-select",
"description": "Slot to replace the default checkbox used when selecting rows.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#slots"
},
{
"name": "item.data-table-expand",
"description": "Slot to replace the default `v-icon` used when expanding rows.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#slots"
},
{
"name": "header.data-table-select",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTableHeaders.tsx#L42-L51.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "header.data-table-expand",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTableHeaders.tsx#L42-L51.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "item",
"description": "Slot to replace the default rendering of a row.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#slots"
},
{
"name": "loading",
"description": "Defines content for when `loading` is true and no items are provided.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#slots"
},
{
"name": "group-header",
"description": "Slot for custom rendering of a group header.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#slots",
"vue-properties": [
{
"name": "index",
"type": "number"
},
{
"name": "item",
"type": "Group"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
}
]
},
{
"name": "no-data",
"description": "Defines content for when no items are provided.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#slots"
},
{
"name": "expanded-row",
"description": "Slot for custom rendering of an expanded row.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#slots"
},
{
"name": "headers",
"description": "Slot to replace the default rendering of the `` element.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#slots",
"vue-properties": [
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
}
]
},
{
"name": "loader",
"description": "Slot for custom loader (displayed when [loading](#props-loading) prop is equal to true).",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#slots",
"vue-properties": [
{
"name": "color",
"type": "string"
},
{
"name": "isActive",
"type": "boolean"
}
]
},
{
"name": "colgroup",
"description": "Slot to replace the default rendering of the `` element.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#slots",
"vue-properties": [
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
}
]
},
{
"name": "top",
"description": "Slot to add content above the table",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#slots",
"vue-properties": [
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
}
]
},
{
"name": "bottom",
"description": "Slot to add content below the table.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#slots",
"vue-properties": [
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
}
]
},
{
"name": "body.prepend",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTableVirtual.tsx#L32-L38.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#slots",
"vue-properties": [
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
}
]
},
{
"name": "body.append",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTableVirtual.tsx#L32-L38.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#slots",
"vue-properties": [
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isSelected",
"type": "(items: { value: any; selectable: boolean } | SelectableItem[]) => boolean"
},
{
"name": "toggleSelect",
"type": "(item: { value: any; selectable: boolean }) => void"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
}
]
},
{
"name": "[`item.${string}`]",
"description": "Slot for custom rendering of a row cell.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#slots"
},
{
"name": "[`header.${string}`]",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDataTable/VDataTableHeaders.tsx#L42-L51.json))",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDateInput",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDateInput"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-date-input",
"attributes": [
{
"name": "flat",
"description": "Removes box shadow when using a variant with elevation.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "hideActions",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDateInput.json))",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "focused",
"description": "Forces a focused state styling on the component.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "reverse",
"description": "Reverses the orientation.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "modelValue",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "any"
}
},
{
"name": "color",
"description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "cancelText",
"description": "Text for the cancel button",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "'$vuetify.confirmEdit.cancel'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "type",
"description": "Determines the type of the picker - `date` for date picker, `month` for month picker.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "'text'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "okText",
"description": "Text for the ok button",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "'$vuetify.confirmEdit.ok'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "autofocus",
"description": "Enables autofocus.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "counter",
"description": "Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | number | boolean"
}
},
{
"name": "prefix",
"description": "Displays prefix text.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "placeholder",
"description": "Sets the input’s placeholder text.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "'mm/dd/yyyy'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "persistentPlaceholder",
"description": "Forces placeholder to always be visible.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "persistentCounter",
"description": "Forces counter to always be visible.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "suffix",
"description": "Displays suffix text.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "role",
"description": "The role attribute applied to the input.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "text",
"description": "Specify content text for the component.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "id",
"description": "Sets the DOM id on the component.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "appendIcon",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "centerAffix",
"description": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "prependIcon",
"description": "Prepends an icon to the outnside the component's input, uses the same syntax as `v-icon`.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "'$calendar'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "hideSpinButtons",
"description": "Hides spin buttons on the input when type is set to `number`.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "hint",
"description": "Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "persistentHint",
"description": "Forces [hint](#props-hint) to always be visible.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "messages",
"description": "Displays a list of messages or a single message if using a string.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "string | string[]"
}
},
{
"name": "direction",
"description": "Changes the direction of the input.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "'horizontal'",
"value": {
"kind": "expression",
"type": "'horizontal' | 'vertical'"
}
},
{
"name": "density",
"description": "Adjusts the vertical height used by the component.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "'default'",
"value": {
"kind": "expression",
"type": "'default' | 'comfortable' | 'compact'"
}
},
{
"name": "height",
"description": "Sets the height of the input.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "maxHeight",
"description": "Sets the maximum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "maxWidth",
"description": "Sets the maximum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minHeight",
"description": "Sets the minimum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minWidth",
"description": "Sets the minimum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "width",
"description": "Width of the picker.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "theme",
"description": "Specify a theme for this component and all of its children.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "disabled",
"description": "Removes the ability to click or target the input.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "error",
"description": "Puts the input in a manual error state.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "errorMessages",
"description": "Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the **rules** prop. This field will not trigger validation.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "string | string[]"
}
},
{
"name": "maxErrors",
"description": "Control the maximum number of shown errors from validation.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "1",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "name",
"description": "Sets the component's name attribute.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "label",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "readonly",
"description": "Makes the picker readonly (doesn't allow to select new date).",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "null",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "rules",
"description": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "ValidationRule[]"
}
},
{
"name": "validateOn",
"description": "Change what type of event triggers validation to run.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "| 'blur'\n | 'input'\n | 'submit'\n | 'invalid-input'\n | 'blur lazy'\n | 'input lazy'\n | 'submit lazy'\n | 'invalid-input lazy'\n | 'blur eager'\n | 'input eager'\n | 'submit eager'\n | 'invalid-input eager'\n | 'lazy blur'\n | 'lazy input'\n | 'lazy submit'\n | 'lazy invalid-input'\n | 'eager blur'\n | 'eager input'\n | 'eager submit'\n | 'eager invalid-input'\n | 'lazy'\n | 'eager'"
}
},
{
"name": "validationValue",
"description": "The value used when applying validation rules.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "any"
}
},
{
"name": "hideDetails",
"description": "Hides hint and validation errors. When set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean | 'auto'"
}
},
{
"name": "appendInnerIcon",
"description": "Creates a [v-icon](/api/v-icon/) component in the **append-inner** slot.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "bgColor",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "clearable",
"description": "Allows for the component to be cleared.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "clearIcon",
"description": "The icon used when the **clearable** prop is set to true.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "'$clear'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "active",
"description": "Controls the **active** state of the item. This is typically used to highlight the component.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "baseColor",
"description": "Sets the color of the input when it is not focused.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "dirty",
"description": "Manually apply the dirty state styling.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "persistentClear",
"description": "Always show the clearable icon when the input is dirty (By default it only shows on hover).",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "prependInnerIcon",
"description": "Creates a [v-icon](/api/v-icon/) component in the **prepend-inner** slot.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "singleLine",
"description": "Label does not move on focus/dirty.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "variant",
"description": "Applies a distinct style to the component.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "'filled'",
"value": {
"kind": "expression",
"type": "| 'underlined'\n | 'outlined'\n | 'filled'\n | 'solo'\n | 'solo-inverted'\n | 'solo-filled'\n | 'plain'"
}
},
{
"name": "loading",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | boolean"
}
},
{
"name": "rounded",
"description": "Adds a border radius to the input.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string | number | boolean"
}
},
{
"name": "tile",
"description": "Removes any applied **border-radius** from the component.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "counterValue",
"description": "Function returns the counter display text.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "number | ((value: any) => number)"
}
},
{
"name": "modelModifiers",
"description": "**FOR INTERNAL USE ONLY**",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "header",
"description": "Text shown when no **display-date** is set.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "'$vuetify.datePicker.header'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "nextIcon",
"description": "Sets the icon for next month/year button.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "'$next'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "prevIcon",
"description": "Sets the icon for previous month/year button.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "'$prev'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "modeIcon",
"description": "Icon displayed next to the current month and year, toggles year selection when clicked.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "'$subgroup'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "viewMode",
"description": "Determines which picker in the date or month picker is being displayed. Allowed values: `'month'`, `'months'`, `'year'`.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "'month'",
"value": {
"kind": "expression",
"type": "'month' | 'months' | 'year'"
}
},
{
"name": "month",
"description": "The current month number to show",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "year",
"description": "The current year number to show",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "number"
}
},
{
"name": "hideWeekdays",
"description": "Hide the days of the week letters.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "showWeek",
"description": "Toggles visibility of the week numbers in the body of the calendar.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "transition",
"description": "The transition used when changing months into the future",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "'picker-transition'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "reverseTransition",
"description": "The transition used when changing months into the past",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "'picker-reverse-transition'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "showAdjacentMonths",
"description": "Toggles visibility of days from previous and next months.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "weekdays",
"description": "An array of weekdays to display.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "[0, 1, 2, 3, 4, 5, 6]",
"value": {
"kind": "expression",
"type": "number[]"
}
},
{
"name": "weeksInMonth",
"description": "A dynamic number of weeks in a month will grow and shrink depending on how many days are in the month. A static number always shows 7 weeks.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "'dynamic'",
"value": {
"kind": "expression",
"type": "'dynamic' | 'static'"
}
},
{
"name": "firstDayOfWeek",
"description": "Sets the first day of the week, starting with 0 for Sunday.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "allowedDates",
"description": "Restricts which dates can be selected.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "unknown[] | ((date: unknown) => boolean)"
}
},
{
"name": "displayValue",
"description": "The value that determines the month to show. This is different from modelValue, which determines the selected value.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "max",
"description": "Maximum allowed date/month (ISO 8601 format).",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "min",
"description": "Minimum allowed date/month (ISO 8601 format).",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "multiple",
"description": "Allow the selection of multiple dates. The **range** value selects all dates between two selections.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "number | boolean | (string & {}) | 'range'"
}
},
{
"name": "landscape",
"description": "Puts the picker into landscape mode.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "title",
"description": "Specify a title text for the component.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "'$vuetify.datePicker.title'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "hideHeader",
"description": "Hide the picker header.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "true",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "border",
"description": "Designates the **border-radius** applied to the component. This can be **xs**, **sm**, **md**, **lg**, **xl**.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | number | boolean"
}
},
{
"name": "elevation",
"description": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "location",
"description": "Specifies the component's location. Can combine by using a space separated string.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "Anchor"
}
},
{
"name": "position",
"description": "Sets the position for the component.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"value": {
"kind": "expression",
"type": "'static' | 'relative' | 'fixed' | 'absolute' | 'sticky'"
}
},
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://vuetifyjs.com/api/VDateInput#props",
"default": "'div'",
"value": {
"kind": "expression",
"type": "string"
}
}
],
"events": [
{
"name": "update:focused",
"description": "Emitted when the input is focused or blurred",
"doc-url": "https://vuetifyjs.com/api/v-date-input#events",
"arguments": [
{
"name": "argument",
"type": "[boolean]\n"
}
]
},
{
"name": "click:prepend",
"description": "Emitted when prepended icon is clicked.",
"doc-url": "https://vuetifyjs.com/api/v-date-input#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
},
{
"name": "click:append",
"description": "Emitted when append icon is clicked.",
"doc-url": "https://vuetifyjs.com/api/v-date-input#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
},
{
"name": "click:clear",
"description": "Emitted when clearable icon clicked.",
"doc-url": "https://vuetifyjs.com/api/v-date-input#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
},
{
"name": "click:appendInner",
"description": "Emitted when appended inner icon is clicked.",
"doc-url": "https://vuetifyjs.com/api/v-date-input#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
},
{
"name": "click:prependInner",
"description": "Emitted when prepended inner icon is clicked.",
"doc-url": "https://vuetifyjs.com/api/v-date-input#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
},
{
"name": "update:modelValue",
"description": "Event that is emitted when the component's model changes.",
"doc-url": "https://vuetifyjs.com/api/v-date-input#events",
"arguments": [
{
"name": "argument",
"type": "[string]\n"
}
]
}
],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-date-input#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDatePicker",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDatePicker"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-date-picker",
"attributes": [
{
"name": "header",
"description": "Text shown when no **display-date** is set.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"default": "'$vuetify.datePicker.header'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "title",
"description": "Specify a title text for the component.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"default": "'$vuetify.datePicker.title'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "active",
"description": "Controls the **active** state of the item. This is typically used to highlight the component.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "string | string[]"
}
},
{
"name": "disabled",
"description": "Removes the ability to click or target the component.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "nextIcon",
"description": "Sets the icon for next month/year button.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"default": "'$next'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "prevIcon",
"description": "Sets the icon for previous month/year button.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"default": "'$prev'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "modeIcon",
"description": "Icon displayed next to the current month and year, toggles year selection when clicked.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"default": "'$subgroup'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "text",
"description": "Specify content text for the component.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "viewMode",
"description": "Determines which picker in the date or month picker is being displayed. Allowed values: `'month'`, `'months'`, `'year'`.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"default": "'month'",
"value": {
"kind": "expression",
"type": "'month' | 'months' | 'year'"
}
},
{
"name": "month",
"description": "The current month number to show",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "year",
"description": "The current year number to show",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "number"
}
},
{
"name": "color",
"description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "hideWeekdays",
"description": "Hide the days of the week letters.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "showWeek",
"description": "Toggles visibility of the week numbers in the body of the calendar.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "transition",
"description": "The transition used when changing months into the future",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"default": "'picker-transition'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "reverseTransition",
"description": "The transition used when changing months into the past",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"default": "'picker-reverse-transition'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "showAdjacentMonths",
"description": "Toggles visibility of days from previous and next months.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "weekdays",
"description": "An array of weekdays to display.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"default": "[0, 1, 2, 3, 4, 5, 6]",
"value": {
"kind": "expression",
"type": "number[]"
}
},
{
"name": "weeksInMonth",
"description": "A dynamic number of weeks in a month will grow and shrink depending on how many days are in the month. A static number always shows 7 weeks.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"default": "'static'",
"value": {
"kind": "expression",
"type": "'dynamic' | 'static'"
}
},
{
"name": "firstDayOfWeek",
"description": "Sets the first day of the week, starting with 0 for Sunday.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "allowedDates",
"description": "Restricts which dates can be selected.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "unknown[] | ((date: unknown) => boolean)"
}
},
{
"name": "displayValue",
"description": "The value that determines the month to show. This is different from modelValue, which determines the selected value.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "modelValue",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "max",
"description": "Maximum allowed date/month (ISO 8601 format).",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "min",
"description": "Minimum allowed date/month (ISO 8601 format).",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "multiple",
"description": "Allow the selection of multiple dates. The **range** value selects all dates between two selections.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"default": "false",
"value": {
"kind": "expression",
"type": "number | boolean | (string & {}) | 'range'"
}
},
{
"name": "height",
"description": "Sets the height for the component.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "bgColor",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "landscape",
"description": "Puts the picker into landscape mode.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "hideHeader",
"description": "Hide the picker header.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "border",
"description": "Designates the **border-radius** applied to the component. This can be **xs**, **sm**, **md**, **lg**, **xl**.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | number | boolean"
}
},
{
"name": "maxHeight",
"description": "Sets the maximum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "maxWidth",
"description": "Sets the maximum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minHeight",
"description": "Sets the minimum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minWidth",
"description": "Sets the minimum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "width",
"description": "Width of the picker.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "elevation",
"description": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "location",
"description": "Specifies the component's location. Can combine by using a space separated string.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "Anchor"
}
},
{
"name": "position",
"description": "Sets the position for the component.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "'static' | 'relative' | 'fixed' | 'absolute' | 'sticky'"
}
},
{
"name": "rounded",
"description": "Designates the **border-radius** applied to the component. This can be **0**, **xs**, **sm**, true, **lg**, **xl**, **pill**, **circle**, and **shaped**. Find more information on available border radius classes on the [Border Radius page](/styles/border-radius).",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "string | number | boolean"
}
},
{
"name": "tile",
"description": "Removes any applied **border-radius** from the component.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"default": "'div'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "theme",
"description": "Specify a theme for this component and all of its children.",
"doc-url": "https://vuetifyjs.com/api/VDatePicker#props",
"value": {
"kind": "expression",
"type": "string"
}
}
],
"events": [
{
"name": "update:modelValue",
"description": "Event that is emitted when the component's model changes.",
"doc-url": "https://vuetifyjs.com/api/v-date-picker#events",
"arguments": [
{
"name": "argument",
"type": "[unknown]\n"
}
]
},
{
"name": "update:month",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePicker.json))",
"doc-url": "https://vuetifyjs.com/api/v-date-picker#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:year",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePicker.json))",
"doc-url": "https://vuetifyjs.com/api/v-date-picker#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:viewMode",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePicker.json))",
"doc-url": "https://vuetifyjs.com/api/v-date-picker#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
}
],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-date-picker#slots"
},
{
"name": "actions",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePicker.json))",
"doc-url": "https://vuetifyjs.com/api/v-date-picker#slots"
},
{
"name": "title",
"description": "Slot for the component's title content.",
"doc-url": "https://vuetifyjs.com/api/v-date-picker#slots"
},
{
"name": "header",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDatePicker/VDatePicker.tsx#L29-L32.json))",
"doc-url": "https://vuetifyjs.com/api/v-date-picker#slots",
"vue-properties": [
{
"name": "header",
"type": "string"
},
{
"name": "transition",
"type": "string"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDatePickerControls",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDatePickerControls"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-controls",
"attributes": [
{
"name": "active",
"description": "Controls the **active** state of the item. This is typically used to highlight the component.",
"doc-url": "https://vuetifyjs.com/api/VDatePickerControls#props",
"value": {
"kind": "expression",
"type": "string | string[]"
}
},
{
"name": "disabled",
"description": "Removes the ability to click or target the component.",
"doc-url": "https://vuetifyjs.com/api/VDatePickerControls#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | boolean | string[]"
}
},
{
"name": "nextIcon",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerControls.json))",
"doc-url": "https://vuetifyjs.com/api/VDatePickerControls#props",
"default": "'$next'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "prevIcon",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerControls.json))",
"doc-url": "https://vuetifyjs.com/api/VDatePickerControls#props",
"default": "'$prev'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "modeIcon",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerControls.json))",
"doc-url": "https://vuetifyjs.com/api/VDatePickerControls#props",
"default": "'$subgroup'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "text",
"description": "Specify content text for the component.",
"doc-url": "https://vuetifyjs.com/api/VDatePickerControls#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "viewMode",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerControls.json))",
"doc-url": "https://vuetifyjs.com/api/VDatePickerControls#props",
"default": "'month'",
"value": {
"kind": "expression",
"type": "'month' | 'months' | 'year'"
}
}
],
"events": [
{
"name": "click:year",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerControls.json))",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-controls#events",
"arguments": [
{
"name": "argument",
"type": "[]\n"
}
]
},
{
"name": "click:month",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerControls.json))",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-controls#events",
"arguments": [
{
"name": "argument",
"type": "[]\n"
}
]
},
{
"name": "click:prev",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerControls.json))",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-controls#events",
"arguments": [
{
"name": "argument",
"type": "[]\n"
}
]
},
{
"name": "click:next",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerControls.json))",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-controls#events",
"arguments": [
{
"name": "argument",
"type": "[]\n"
}
]
},
{
"name": "click:text",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerControls.json))",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-controls#events",
"arguments": [
{
"name": "argument",
"type": "[]\n"
}
]
}
],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-controls#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDatePickerHeader",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDatePickerHeader"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-header",
"attributes": [
{
"name": "appendIcon",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot.",
"doc-url": "https://vuetifyjs.com/api/VDatePickerHeader#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "color",
"description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VDatePickerHeader#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "header",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerHeader.json))",
"doc-url": "https://vuetifyjs.com/api/VDatePickerHeader#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "transition",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerHeader.json))",
"doc-url": "https://vuetifyjs.com/api/VDatePickerHeader#props",
"value": {
"kind": "expression",
"type": "string"
}
}
],
"events": [
{
"name": "click",
"description": "Event that is emitted when the component is clicked.",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-header#events",
"arguments": [
{
"name": "argument",
"type": "[]\n"
}
]
},
{
"name": "click:append",
"description": "Emitted when appended icon is clicked.",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-header#events",
"arguments": [
{
"name": "argument",
"type": "[]\n"
}
]
}
],
"slots": [
{
"name": "prepend",
"description": "Adds an item outside the input and before input content.",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-header#slots"
},
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-header#slots"
},
{
"name": "append",
"description": "Adds an item inside the input and after input content.",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-header#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDatePickerMonth",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDatePickerMonth"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-month",
"attributes": [
{
"name": "color",
"description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonth#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "hideWeekdays",
"description": "Hide the days of the week letters.",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonth#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "showWeek",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerMonth.json))",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonth#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "transition",
"description": "The transition used when changing months into the future",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonth#props",
"default": "'picker-transition'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "reverseTransition",
"description": "The transition used when changing months into the past",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonth#props",
"default": "'picker-reverse-transition'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "disabled",
"description": "Removes the ability to click or target the component.",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonth#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "month",
"description": "The current month number to show",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonth#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "showAdjacentMonths",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/calendar.json))",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonth#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "year",
"description": "The current year number to show",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonth#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "weekdays",
"description": "An array of weekdays to display.",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonth#props",
"default": "[0, 1, 2, 3, 4, 5, 6]",
"value": {
"kind": "expression",
"type": "number[]"
}
},
{
"name": "weeksInMonth",
"description": "A dynamic number of weeks in a month will grow and shrink depending on how many days are in the month. A static number always shows 7 weeks.",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonth#props",
"default": "'dynamic'",
"value": {
"kind": "expression",
"type": "'dynamic' | 'static'"
}
},
{
"name": "firstDayOfWeek",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/calendar.json))",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonth#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "allowedDates",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/calendar.json))",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonth#props",
"value": {
"kind": "expression",
"type": "unknown[] | ((date: unknown) => boolean)"
}
},
{
"name": "displayValue",
"description": "The value that determines the month to show. This is different from modelValue, which determines the selected value.",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonth#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "modelValue",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonth#props",
"value": {
"kind": "expression",
"type": "unknown[]"
}
},
{
"name": "max",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/calendar.json))",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonth#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "min",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/calendar.json))",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonth#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "multiple",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerMonth.json))",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonth#props",
"default": "false",
"value": {
"kind": "expression",
"type": "number | boolean | 'range' | (string & {})"
}
}
],
"events": [
{
"name": "update:modelValue",
"description": "Event that is emitted when the component's model changes.",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-month#events",
"arguments": [
{
"name": "argument",
"type": "[unknown]\n"
}
]
},
{
"name": "update:month",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerMonth.json))",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-month#events",
"arguments": [
{
"name": "argument",
"type": "[number]\n"
}
]
},
{
"name": "update:year",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerMonth.json))",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-month#events",
"arguments": [
{
"name": "argument",
"type": "[number]\n"
}
]
}
],
"slots": [
{
"name": "day",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx#L21-L27.json))",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-month#slots",
"vue-properties": [
{
"name": "props",
"type": "{ onClick: () => void }"
},
{
"name": "item",
"type": "any"
},
{
"name": "i",
"type": "number"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDatePickerMonths",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDatePickerMonths"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-months",
"attributes": [
{
"name": "color",
"description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonths#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "height",
"description": "Sets the height for the component.",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonths#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "modelValue",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonths#props",
"value": {
"kind": "expression",
"type": "number"
}
},
{
"name": "year",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerMonths.json))",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonths#props",
"value": {
"kind": "expression",
"type": "number"
}
},
{
"name": "min",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerMonths.json))",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonths#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "max",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerMonths.json))",
"doc-url": "https://vuetifyjs.com/api/VDatePickerMonths#props",
"value": {
"kind": "expression",
"type": "unknown"
}
}
],
"events": [
{
"name": "update:modelValue",
"description": "Event that is emitted when the component's model changes.",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-months#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
}
],
"slots": [
{
"name": "month",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDatePicker/VDatePickerMonths.tsx#L19-L28.json))",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-months#slots",
"vue-properties": [
{
"name": "month",
"type": "{ text: string; value: number }"
},
{
"name": "i",
"type": "number"
},
{
"name": "props",
"type": "{ onClick: () => void }"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDatePickerYears",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDatePickerYears"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-years",
"attributes": [
{
"name": "color",
"description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VDatePickerYears#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "height",
"description": "Sets the height for the component.",
"doc-url": "https://vuetifyjs.com/api/VDatePickerYears#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "modelValue",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.",
"doc-url": "https://vuetifyjs.com/api/VDatePickerYears#props",
"value": {
"kind": "expression",
"type": "number"
}
},
{
"name": "min",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerYears.json))",
"doc-url": "https://vuetifyjs.com/api/VDatePickerYears#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "max",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerYears.json))",
"doc-url": "https://vuetifyjs.com/api/VDatePickerYears#props",
"value": {
"kind": "expression",
"type": "unknown"
}
}
],
"events": [
{
"name": "update:modelValue",
"description": "Event that is emitted when the component's model changes.",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-years#events",
"arguments": [
{
"name": "argument",
"type": "[number]\n"
}
]
}
],
"slots": [
{
"name": "year",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VDatePicker/VDatePickerYears.tsx#L20-L34.json))",
"doc-url": "https://vuetifyjs.com/api/v-date-picker-years#slots",
"vue-properties": [
{
"name": "year",
"type": "{ text: string; value: number }"
},
{
"name": "i",
"type": "number"
},
{
"name": "props",
"type": "{ active: boolean; color: string; rounded: boolean; text: string; variant: \"flat\" | \"text\"; onClick: () => void }"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDefaultsProvider",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDefaultsProvider"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-defaults-provider",
"attributes": [
{
"name": "disabled",
"description": "Turns off all calculations of new default values for improved performance in situations where defaults propagation isn't necessary.",
"doc-url": "https://vuetifyjs.com/api/VDefaultsProvider#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "reset",
"description": "Reset the default values up the nested chain by {n} amount.",
"doc-url": "https://vuetifyjs.com/api/VDefaultsProvider#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "root",
"description": "Force current defaults to match the application root defaults.",
"doc-url": "https://vuetifyjs.com/api/VDefaultsProvider#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | boolean"
}
},
{
"name": "scoped",
"description": "Prevents the ability for default values to be inherited from parent components.",
"doc-url": "https://vuetifyjs.com/api/VDefaultsProvider#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "defaults",
"description": "Specify new default prop values for components. Keep in mind that this will be merged with previously defined values.",
"doc-url": "https://vuetifyjs.com/api/VDefaultsProvider#props",
"value": {
"kind": "expression",
"type": "{\n global: Record\n [string]: Record\n}"
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-defaults-provider#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDialog",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDialog"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-dialog",
"attributes": [
{
"name": "activator",
"description": "Explicitly sets the overlay's activator.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"value": {
"kind": "expression",
"type": "Element | 'parent' | (string & {}) | ComponentPublicInstance"
}
},
{
"name": "fullscreen",
"description": "Changes layout for fullscreen display.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "retainFocus",
"description": "Tab focus will return to the first child of the dialog by default. Disable this when using external tools that require focus such as TinyMCE or vue-clipboard.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "true",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "scrollable",
"description": "When set to true, expects a `v-card` and a `v-card-text` component with a designated height. For more information, check out the [scrollable example](/components/dialogs#scrollable).",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "absolute",
"description": "Applies **position: absolute** to the content element.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "closeOnBack",
"description": "Closes the overlay content when the browser's back button is pressed or `$router.back()` is called, cancelling the original navigation. `persistent` overlays will cancel navigation and animate as if they were clicked outside instead of closing.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "true",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "contained",
"description": "Limits the size of the component and scrim to its offset parent. Implies `absolute` and `attach`. (Note: The parent element must have position: relative.).",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "contentClass",
"description": "Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the `v-app` component (unless the **attach** prop is provided) and is not targetable by classes passed directly on the component.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"value": {
"kind": "expression",
"type": "any"
}
},
{
"name": "contentProps",
"description": "Apply custom properties to the content.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"value": {
"kind": "expression",
"type": "any"
}
},
{
"name": "disabled",
"description": "Removes the ability to click or target the component.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "opacity",
"description": "Sets the overlay opacity.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "noClickAnimation",
"description": "Disables the bounce effect when clicking outside of a `v-dialog`'s content when using the **persistent** prop.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "modelValue",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "persistent",
"description": "Clicking outside of the element or pressing **esc** key will not deactivate it.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "scrim",
"description": "Accepts true/false to enable background, and string to define color.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "true",
"value": {
"kind": "expression",
"type": "string | boolean"
}
},
{
"name": "zIndex",
"description": "The z-index used for the component.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "2400",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "target",
"description": "For locationStrategy=\"connected\", specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"value": {
"kind": "expression",
"type": "| Element\n | 'parent'\n | 'cursor'\n | (string & {})\n | ComponentPublicInstance\n | [number, number]"
}
},
{
"name": "activatorProps",
"description": "Apply custom properties to the activator.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "{}",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "openOnClick",
"description": "Activate the component when the activator is clicked.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "openOnHover",
"description": "Designates whether component should activate when its activator is hovered.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "openOnFocus",
"description": "Activate the component when the activator is focused.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "closeOnContentClick",
"description": "Closes component when you click on its content.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "closeDelay",
"description": "Milliseconds to wait before closing component. Only applies to hover and focus events.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "openDelay",
"description": "Milliseconds to wait before opening component. Only applies to hover and focus events.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "height",
"description": "Sets the height for the component.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "maxHeight",
"description": "Sets the maximum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "maxWidth",
"description": "Sets the maximum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minHeight",
"description": "Sets the minimum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minWidth",
"description": "Sets the minimum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "width",
"description": "Sets the width for the component.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "eager",
"description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "locationStrategy",
"description": "A function used to specifies how the component should position relative to its activator.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "'static'",
"value": {
"kind": "expression",
"type": "'static' | 'connected' | LocationStrategyFn"
}
},
{
"name": "location",
"description": "Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both..",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "'bottom'",
"value": {
"kind": "expression",
"type": "Anchor"
}
},
{
"name": "origin",
"description": "Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "'center center'",
"value": {
"kind": "expression",
"type": "Anchor | 'auto' | 'overlap'"
}
},
{
"name": "offset",
"description": "A single value that offsets content away from the target based upon what side it is on.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"value": {
"kind": "expression",
"type": "string | number | number[]"
}
},
{
"name": "scrollStrategy",
"description": "Strategy used when the component is activate and user scrolls.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "'block'",
"value": {
"kind": "expression",
"type": "'none' | 'close' | 'block' | 'reposition' | ScrollStrategyFn"
}
},
{
"name": "theme",
"description": "Specify a theme for this component and all of its children.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "transition",
"description": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "{component: {name: 'VDialogTransition'}}",
"value": {
"kind": "expression",
"type": "| string\n | boolean\n | (TransitionProps & { component: Component })\n | { component: Component }"
}
},
{
"name": "attach",
"description": "Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or `true` to disable teleporting. Uses `body` by default.",
"doc-url": "https://vuetifyjs.com/api/VDialog#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | boolean | Element"
}
}
],
"events": [
{
"name": "update:modelValue",
"description": "Event that is emitted when the component's model changes.",
"doc-url": "https://vuetifyjs.com/api/v-dialog#events",
"arguments": [
{
"name": "argument",
"type": "[boolean]\n"
}
]
},
{
"name": "afterEnter",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDialog.json))",
"doc-url": "https://vuetifyjs.com/api/v-dialog#events",
"arguments": [
{
"name": "argument",
"type": "[]\n"
}
]
},
{
"name": "afterLeave",
"description": "Event that fires after the overlay has finished transitioning out.",
"doc-url": "https://vuetifyjs.com/api/v-dialog#events",
"arguments": [
{
"name": "argument",
"type": "[]\n"
}
]
}
],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-dialog#slots",
"vue-properties": [
{
"name": "isActive",
"type": "Ref"
}
]
},
{
"name": "activator",
"description": "When used, will activate the component when clicked (or hover for specific components). This manually stops the event propagation. Without this slot, if you open the component through its model, you will need to manually stop the event propagation.",
"doc-url": "https://vuetifyjs.com/api/v-dialog#slots",
"vue-properties": [
{
"name": "isActive",
"type": "boolean"
},
{
"name": "props",
"type": "Record"
},
{
"name": "targetRef",
"type": "TemplateRef"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDialogBottomTransition",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDialogBottomTransition"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-dialog-bottom-transition",
"attributes": [
{
"name": "disabled",
"description": "Removes the ability to click or target the component.",
"doc-url": "https://vuetifyjs.com/api/VDialogBottomTransition#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "group",
"description": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).",
"doc-url": "https://vuetifyjs.com/api/VDialogBottomTransition#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "hideOnLeave",
"description": "Hides the leaving element (no exit animation).",
"doc-url": "https://vuetifyjs.com/api/VDialogBottomTransition#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "leaveAbsolute",
"description": "Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/)).",
"doc-url": "https://vuetifyjs.com/api/VDialogBottomTransition#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "mode",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).",
"doc-url": "https://vuetifyjs.com/api/VDialogBottomTransition#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "origin",
"description": "Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).",
"doc-url": "https://vuetifyjs.com/api/VDialogBottomTransition#props",
"value": {
"kind": "expression",
"type": "string"
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-dialog-bottom-transition#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDialogTopTransition",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDialogTopTransition"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-dialog-top-transition",
"attributes": [
{
"name": "disabled",
"description": "Removes the ability to click or target the component.",
"doc-url": "https://vuetifyjs.com/api/VDialogTopTransition#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "group",
"description": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).",
"doc-url": "https://vuetifyjs.com/api/VDialogTopTransition#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "hideOnLeave",
"description": "Hides the leaving element (no exit animation).",
"doc-url": "https://vuetifyjs.com/api/VDialogTopTransition#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "leaveAbsolute",
"description": "Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/)).",
"doc-url": "https://vuetifyjs.com/api/VDialogTopTransition#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "mode",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).",
"doc-url": "https://vuetifyjs.com/api/VDialogTopTransition#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "origin",
"description": "Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).",
"doc-url": "https://vuetifyjs.com/api/VDialogTopTransition#props",
"value": {
"kind": "expression",
"type": "string"
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-dialog-top-transition#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDialogTransition",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDialogTransition"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-dialog-transition",
"attributes": [
{
"name": "target",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/v-dialog-transition.json))",
"doc-url": "https://vuetifyjs.com/api/VDialogTransition#props",
"value": {
"kind": "expression",
"type": "HTMLElement | [number, number]"
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-dialog-transition#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDivider",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDivider"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-divider",
"attributes": [
{
"name": "length",
"description": "Sets the dividers length. Default unit is px.",
"doc-url": "https://vuetifyjs.com/api/VDivider#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "color",
"description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VDivider#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "inset",
"description": "Adds indentation (72px) for **normal** dividers, reduces max height for **vertical**.",
"doc-url": "https://vuetifyjs.com/api/VDivider#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "opacity",
"description": "Sets the component's opacity value",
"doc-url": "https://vuetifyjs.com/api/VDivider#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "thickness",
"description": "Sets the dividers thickness. Default unit is px.",
"doc-url": "https://vuetifyjs.com/api/VDivider#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "vertical",
"description": "Displays dividers vertically.",
"doc-url": "https://vuetifyjs.com/api/VDivider#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "theme",
"description": "Specify a theme for this component and all of its children.",
"doc-url": "https://vuetifyjs.com/api/VDivider#props",
"value": {
"kind": "expression",
"type": "string"
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-divider#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VEmptyState",
"source": {
"module": "./src/components/index.ts",
"symbol": "VEmptyState"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-empty-state",
"attributes": [
{
"name": "headline",
"description": "A large headline often used for 404 pages.",
"doc-url": "https://vuetifyjs.com/api/VEmptyState#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "title",
"description": "Specify a title text for the component.",
"doc-url": "https://vuetifyjs.com/api/VEmptyState#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "text",
"description": "Specify content text for the component.",
"doc-url": "https://vuetifyjs.com/api/VEmptyState#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "actionText",
"description": "The text used for the action button.",
"doc-url": "https://vuetifyjs.com/api/VEmptyState#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "bgColor",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VEmptyState#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "color",
"description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VEmptyState#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "icon",
"description": "Apply a specific icon using the [v-icon](/components/icons/) component.",
"doc-url": "https://vuetifyjs.com/api/VEmptyState#props",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "image",
"description": "Apply a specific image using [v-img](/components/images/).",
"doc-url": "https://vuetifyjs.com/api/VEmptyState#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "justify",
"description": "Control the justification of the text.",
"doc-url": "https://vuetifyjs.com/api/VEmptyState#props",
"default": "'center'",
"value": {
"kind": "expression",
"type": "'start' | 'center' | 'end'"
}
},
{
"name": "textWidth",
"description": "Sets the width of the text container.",
"doc-url": "https://vuetifyjs.com/api/VEmptyState#props",
"default": "500",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "href",
"description": "The URL the action button links to.",
"doc-url": "https://vuetifyjs.com/api/VEmptyState#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "to",
"description": "The URL the action button links to.",
"doc-url": "https://vuetifyjs.com/api/VEmptyState#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "height",
"description": "Sets the height for the component.",
"doc-url": "https://vuetifyjs.com/api/VEmptyState#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "maxHeight",
"description": "Sets the maximum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VEmptyState#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "maxWidth",
"description": "Sets the maximum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VEmptyState#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minHeight",
"description": "Sets the minimum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VEmptyState#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minWidth",
"description": "Sets the minimum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VEmptyState#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "width",
"description": "Sets the width for the component.",
"doc-url": "https://vuetifyjs.com/api/VEmptyState#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "size",
"description": "Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: **x-small**, **small**, **default**, **large**, and **x-large**.",
"doc-url": "https://vuetifyjs.com/api/VEmptyState#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "theme",
"description": "Specify a theme for this component and all of its children.",
"doc-url": "https://vuetifyjs.com/api/VEmptyState#props",
"value": {
"kind": "expression",
"type": "string"
}
}
],
"events": [
{
"name": "click:action",
"description": "Event emitted when the action button is clicked.",
"doc-url": "https://vuetifyjs.com/api/v-empty-state#events",
"arguments": [
{
"name": "argument",
"type": "[Event]\n"
}
]
}
],
"slots": [
{
"name": "actions",
"description": "Slot for the action button.",
"doc-url": "https://vuetifyjs.com/api/v-empty-state#slots",
"vue-properties": [
{
"name": "props",
"type": "{ onClick: (e: Event) => void }"
}
]
},
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-empty-state#slots"
},
{
"name": "headline",
"description": "Slot for the component's headline.",
"doc-url": "https://vuetifyjs.com/api/v-empty-state#slots"
},
{
"name": "title",
"description": "Slot for the component's title content.",
"doc-url": "https://vuetifyjs.com/api/v-empty-state#slots"
},
{
"name": "media",
"description": "Slot for the component's media.",
"doc-url": "https://vuetifyjs.com/api/v-empty-state#slots"
},
{
"name": "text",
"description": "Slot for the component's text content.",
"doc-url": "https://vuetifyjs.com/api/v-empty-state#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VExpandTransition",
"source": {
"module": "./src/components/index.ts",
"symbol": "VExpandTransition"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-expand-transition",
"attributes": [
{
"name": "disabled",
"description": "Removes the ability to click or target the component.",
"doc-url": "https://vuetifyjs.com/api/VExpandTransition#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "group",
"description": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).",
"doc-url": "https://vuetifyjs.com/api/VExpandTransition#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "mode",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).",
"doc-url": "https://vuetifyjs.com/api/VExpandTransition#props",
"default": "'in-out'",
"value": {
"kind": "expression",
"type": "'default' | 'in-out' | 'out-in'"
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-expand-transition#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VExpandXTransition",
"source": {
"module": "./src/components/index.ts",
"symbol": "VExpandXTransition"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-expand-x-transition",
"attributes": [
{
"name": "disabled",
"description": "Removes the ability to click or target the component.",
"doc-url": "https://vuetifyjs.com/api/VExpandXTransition#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "group",
"description": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).",
"doc-url": "https://vuetifyjs.com/api/VExpandXTransition#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "mode",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).",
"doc-url": "https://vuetifyjs.com/api/VExpandXTransition#props",
"default": "'in-out'",
"value": {
"kind": "expression",
"type": "'default' | 'in-out' | 'out-in'"
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-expand-x-transition#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VExpansionPanel",
"source": {
"module": "./src/components/index.ts",
"symbol": "VExpansionPanel"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-expansion-panel",
"attributes": [
{
"name": "title",
"description": "Specify a title text for the component.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "text",
"description": "Specify content text for the component.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "bgColor",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "elevation",
"description": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "value",
"description": "Controls the opened/closed state of content.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"value": {
"kind": "expression",
"type": "any"
}
},
{
"name": "disabled",
"description": "Disables the expansion-panel content.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "selectedClass",
"description": "Configure the active CSS class applied when an item is selected.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "rounded",
"description": "Designates the **border-radius** applied to the component. This can be **0**, **xs**, **sm**, true, **lg**, **xl**, **pill**, **circle**, and **shaped**. Find more information on available border radius classes on the [Border Radius page](/styles/border-radius).",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"value": {
"kind": "expression",
"type": "string | number | boolean"
}
},
{
"name": "tile",
"description": "Removes any applied **border-radius** from the component.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"default": "'div'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "color",
"description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "expandIcon",
"description": "Icon used when the expansion panel is in a expandable state.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"default": "'$expand'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "collapseIcon",
"description": "Icon used when the expansion panel is in a collapsable state.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"default": "'$collapse'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "hideActions",
"description": "Hide the expand icon in the content title.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "focusable",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VExpansionPanelTitle.json))",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "static",
"description": "Remove title size expansion when selected.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "ripple",
"description": "Applies the [v-ripple](/directives/ripple) directive.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean | { class: string }"
}
},
{
"name": "readonly",
"description": "Makes the expansion-panel content read only.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "height",
"description": "Sets the height for the component.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "maxHeight",
"description": "Sets the maximum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "maxWidth",
"description": "Sets the maximum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minHeight",
"description": "Sets the minimum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minWidth",
"description": "Sets the minimum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "width",
"description": "Sets the width for the component.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "eager",
"description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanel#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
}
],
"events": [
{
"name": "group:selected",
"description": "Event that is emitted when an item is selected within a group.",
"doc-url": "https://vuetifyjs.com/api/v-expansion-panel#events",
"arguments": [
{
"name": "argument",
"type": "[{ value: boolean }]\n"
}
]
}
],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-expansion-panel#slots"
},
{
"name": "title",
"description": "Slot for the component's title content.",
"doc-url": "https://vuetifyjs.com/api/v-expansion-panel#slots"
},
{
"name": "text",
"description": "Slot for the component's text content.",
"doc-url": "https://vuetifyjs.com/api/v-expansion-panel#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VExpansionPanelText",
"source": {
"module": "./src/components/index.ts",
"symbol": "VExpansionPanelText"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-expansion-panel-text",
"attributes": [
{
"name": "eager",
"description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanelText#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-expansion-panel-text#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VExpansionPanelTitle",
"source": {
"module": "./src/components/index.ts",
"symbol": "VExpansionPanelTitle"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-expansion-panel-title",
"attributes": [
{
"name": "color",
"description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanelTitle#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "expandIcon",
"description": "Icon used when the expansion panel is in a expandable state.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanelTitle#props",
"default": "'$expand'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "collapseIcon",
"description": "Icon used when the expansion panel is in a collapsable state.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanelTitle#props",
"default": "'$collapse'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "hideActions",
"description": "Hide the expand icon in the content title.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanelTitle#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "focusable",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VExpansionPanelTitle.json))",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanelTitle#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "static",
"description": "Remove title size expansion when selected.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanelTitle#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "ripple",
"description": "Applies the [v-ripple](/directives/ripple) directive.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanelTitle#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean | { class: string }"
}
},
{
"name": "readonly",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VExpansionPanelTitle.json))",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanelTitle#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "height",
"description": "Sets the height for the component.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanelTitle#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "maxHeight",
"description": "Sets the maximum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanelTitle#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "maxWidth",
"description": "Sets the maximum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanelTitle#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minHeight",
"description": "Sets the minimum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanelTitle#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minWidth",
"description": "Sets the minimum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanelTitle#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "width",
"description": "Sets the width for the component.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanelTitle#props",
"value": {
"kind": "expression",
"type": "string | number"
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-expansion-panel-title#slots",
"vue-properties": [
{
"name": "collapseIcon",
"type": "string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
},
{
"name": "disabled",
"type": "boolean"
},
{
"name": "expanded",
"type": "boolean"
},
{
"name": "expandIcon",
"type": "string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
},
{
"name": "readonly",
"type": "boolean"
}
]
},
{
"name": "actions",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx#L23-L29.json))",
"doc-url": "https://vuetifyjs.com/api/v-expansion-panel-title#slots",
"vue-properties": [
{
"name": "collapseIcon",
"type": "string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
},
{
"name": "disabled",
"type": "boolean"
},
{
"name": "expanded",
"type": "boolean"
},
{
"name": "expandIcon",
"type": "string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
},
{
"name": "readonly",
"type": "boolean"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VExpansionPanels",
"source": {
"module": "./src/components/index.ts",
"symbol": "VExpansionPanels"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-expansion-panels",
"attributes": [
{
"name": "flat",
"description": "Removes the expansion-panel's elevation and borders.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "modelValue",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"value": {
"kind": "expression",
"type": "any"
}
},
{
"name": "multiple",
"description": "Allows one to select multiple items.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "max",
"description": "Sets a maximum number of selections that can be made.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"value": {
"kind": "expression",
"type": "number"
}
},
{
"name": "selectedClass",
"description": "Configure the active CSS class applied when an item is selected.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "disabled",
"description": "Puts all children components into a disabled state.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "mandatory",
"description": "Forces at least one item to always be selected (if available).",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean | 'force'"
}
},
{
"name": "bgColor",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "elevation",
"description": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "rounded",
"description": "Designates the **border-radius** applied to the component. This can be **0**, **xs**, **sm**, true, **lg**, **xl**, **pill**, **circle**, and **shaped**. Find more information on available border radius classes on the [Border Radius page](/styles/border-radius).",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"value": {
"kind": "expression",
"type": "string | number | boolean"
}
},
{
"name": "tile",
"description": "Removes the border-radius.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"default": "'div'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "color",
"description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "expandIcon",
"description": "Icon used when the expansion panel is in a expandable state.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"default": "'$expand'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "collapseIcon",
"description": "Icon used when the expansion panel is in a collapsable state.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"default": "'$collapse'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "hideActions",
"description": "Hide the expand icon in the content title.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "focusable",
"description": "Makes the expansion-panel headers focusable.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "static",
"description": "Remove title size expansion when selected.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "ripple",
"description": "Applies the [v-ripple](/directives/ripple) directive.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean | { class: string }"
}
},
{
"name": "readonly",
"description": "Makes the entire expansion-panel read only.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "eager",
"description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "theme",
"description": "Specify a theme for this component and all of its children.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "variant",
"description": "Applies a distinct style to the component.",
"doc-url": "https://vuetifyjs.com/api/VExpansionPanels#props",
"default": "'default'",
"value": {
"kind": "expression",
"type": "'default' | 'accordion' | 'inset' | 'popout'"
}
}
],
"events": [
{
"name": "update:modelValue",
"description": "Event that is emitted when the component's model changes.",
"doc-url": "https://vuetifyjs.com/api/v-expansion-panels#events",
"arguments": [
{
"name": "argument",
"type": "[unknown]\n"
}
]
}
],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-expansion-panels#slots",
"vue-properties": [
{
"name": "prev",
"type": "() => void"
},
{
"name": "next",
"type": "() => void"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VFab",
"source": {
"module": "./src/components/index.ts",
"symbol": "VFab"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-fab",
"attributes": [
{
"name": "symbol",
"description": "The [Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) used to hook into group functionality for components like [v-btn-toggle](/components/btn-toggle) and [v-bottom-navigation](/components/bottom-navigations/).",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "any"
}
},
{
"name": "flat",
"description": "Removes the button box shadow. This is different than using the 'flat' variant.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "app",
"description": "If true, attaches to the closest layout and positions according to the value of **location**.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "appear",
"description": "Used to control the animation of the FAB.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "extended",
"description": "An alternate style for the FAB that expects text.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "layout",
"description": "If true, will effect layout dimensions based on size and position.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "offset",
"description": "Translates the Fab up or down, depending on if location is set to **top** or **bottom**.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "modelValue",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "true",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "active",
"description": "Controls the **active** state of the item. This is typically used to highlight the component.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "true",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "activeColor",
"description": "The applied color when the component is in an active state.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "baseColor",
"description": "Sets the color of component when not focused.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "prependIcon",
"description": "Creates a [v-icon](/api/v-icon/) component in the **prepend** slot before default content.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "appendIcon",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "block",
"description": "Expands the button to 100% of available space.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "readonly",
"description": "Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "slim",
"description": "Reduces padding to 0 8px.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "stacked",
"description": "Displays the button as a flex-column.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "ripple",
"description": "Applies the [v-ripple](/directives/ripple) directive.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "true",
"value": {
"kind": "expression",
"type": "boolean | { class: string }"
}
},
{
"name": "value",
"description": "The value used when the component is selected in a group. If not provided, a unique ID will be used.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "any"
}
},
{
"name": "text",
"description": "Specify content text for the component.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "border",
"description": "Designates the **border-radius** applied to the component. This can be **xs**, **sm**, **md**, **lg**, **xl**.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | number | boolean"
}
},
{
"name": "density",
"description": "Adjusts the vertical height used by the component.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "'default'",
"value": {
"kind": "expression",
"type": "'default' | 'comfortable' | 'compact'"
}
},
{
"name": "height",
"description": "Sets the height for the component.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "maxHeight",
"description": "Sets the maximum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "maxWidth",
"description": "Sets the maximum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minHeight",
"description": "Sets the minimum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minWidth",
"description": "Sets the minimum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "width",
"description": "Sets the width for the component.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "elevation",
"description": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "disabled",
"description": "Removes the ability to click or target the component.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "selectedClass",
"description": "Configure the active CSS class applied when an item is selected.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "loading",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | boolean"
}
},
{
"name": "location",
"description": "The location of the fab relative to the layout. Only works when using **app**.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "Anchor"
}
},
{
"name": "position",
"description": "Sets the position for the component.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "'static' | 'relative' | 'fixed' | 'absolute' | 'sticky'"
}
},
{
"name": "absolute",
"description": "Applies **position: absolute** to the component.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "rounded",
"description": "Designates the **border-radius** applied to the component. This can be **0**, **xs**, **sm**, true, **lg**, **xl**, **pill**, **circle**, and **shaped**. Find more information on available border radius classes on the [Border Radius page](/styles/border-radius).",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "string | number | boolean"
}
},
{
"name": "tile",
"description": "Removes any applied **border-radius** from the component.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "href",
"description": "Designates the component as anchor and applies the **href** attribute.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "replace",
"description": "Setting **replace** prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record. You can find more information about the [replace](https://router.vuejs.org/api/#replace) prop on the vue-router documentation.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "exact",
"description": "Exactly match the link. Without this, '/' will match every route. You can find more information about the [**exact** prop](https://router.vuejs.org/api/#exact) on the vue-router documentation.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "to",
"description": "Denotes the target route of the link. You can find more information about the [**to** prop](https://router.vuejs.org/api/#to) on the vue-router documentation.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "RouteLocationRaw"
}
},
{
"name": "size",
"description": "Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: **x-small**, **small**, **default**, **large**, and **x-large**.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "'default'",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "'button'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "theme",
"description": "Specify a theme for this component and all of its children.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "color",
"description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "variant",
"description": "Applies a distinct style to the component.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "'elevated'",
"value": {
"kind": "expression",
"type": "'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain'"
}
},
{
"name": "icon",
"description": "Apply a specific icon using the [v-icon](/components/icons/) component. The button will become _round_.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "false",
"value": {
"kind": "expression",
"type": "| boolean\n | string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "name",
"description": "Assign a specific name for layout registration.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "order",
"description": "Adjust the order of the component in relation to its registration order.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "0",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "transition",
"description": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.",
"doc-url": "https://vuetifyjs.com/api/VFab#props",
"default": "'fab-transition'",
"value": {
"kind": "expression",
"type": "string | boolean | (TransitionProps & { component: Component })"
}
}
],
"events": [
{
"name": "update:modelValue",
"description": "Event that is emitted when the component's model changes.",
"doc-url": "https://vuetifyjs.com/api/v-fab#events",
"arguments": [
{
"name": "argument",
"type": "[boolean]\n"
}
]
}
],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-fab#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VFabTransition",
"source": {
"module": "./src/components/index.ts",
"symbol": "VFabTransition"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-fab-transition",
"attributes": [
{
"name": "disabled",
"description": "Removes the ability to click or target the component.",
"doc-url": "https://vuetifyjs.com/api/VFabTransition#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "group",
"description": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).",
"doc-url": "https://vuetifyjs.com/api/VFabTransition#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "hideOnLeave",
"description": "Hides the leaving element (no exit animation).",
"doc-url": "https://vuetifyjs.com/api/VFabTransition#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "leaveAbsolute",
"description": "Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/)).",
"doc-url": "https://vuetifyjs.com/api/VFabTransition#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "mode",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).",
"doc-url": "https://vuetifyjs.com/api/VFabTransition#props",
"default": "'out-in'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "origin",
"description": "Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).",
"doc-url": "https://vuetifyjs.com/api/VFabTransition#props",
"default": "'center center'",
"value": {
"kind": "expression",
"type": "string"
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-fab-transition#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VFadeTransition",
"source": {
"module": "./src/components/index.ts",
"symbol": "VFadeTransition"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-fade-transition",
"attributes": [
{
"name": "disabled",
"description": "Removes the ability to click or target the component.",
"doc-url": "https://vuetifyjs.com/api/VFadeTransition#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "group",
"description": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).",
"doc-url": "https://vuetifyjs.com/api/VFadeTransition#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "hideOnLeave",
"description": "Hides the leaving element (no exit animation).",
"doc-url": "https://vuetifyjs.com/api/VFadeTransition#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "leaveAbsolute",
"description": "Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/)).",
"doc-url": "https://vuetifyjs.com/api/VFadeTransition#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "mode",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).",
"doc-url": "https://vuetifyjs.com/api/VFadeTransition#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "origin",
"description": "Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).",
"doc-url": "https://vuetifyjs.com/api/VFadeTransition#props",
"value": {
"kind": "expression",
"type": "string"
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-fade-transition#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VField",
"source": {
"module": "./src/components/index.ts",
"symbol": "VField"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-field",
"attributes": [
{
"name": "label",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "id",
"description": "Sets the DOM id on the component.",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "focused",
"description": "Forces a focused state styling on the component.",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "reverse",
"description": "Reverses the orientation.",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "flat",
"description": "Removes box shadow when using a variant with elevation.",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "appendInnerIcon",
"description": "Creates a [v-icon](/api/v-icon/) component in the **append-inner** slot.",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "bgColor",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "clearable",
"description": "Allows for the component to be cleared.",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "clearIcon",
"description": "The icon used when the **clearable** prop is set to true.",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"default": "'$clear'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "active",
"description": "Controls the **active** state of the item. This is typically used to highlight the component.",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "centerAffix",
"description": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center.",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "color",
"description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "baseColor",
"description": "Sets the color of the input when it is not focused.",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "dirty",
"description": "Manually apply the dirty state styling.",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "disabled",
"description": "Removes the ability to click or target the input.",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"default": "null",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "error",
"description": "Puts the input in a manual error state.",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "persistentClear",
"description": "Always show the clearable icon when the input is dirty (By default it only shows on hover).",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "prependInnerIcon",
"description": "Creates a [v-icon](/api/v-icon/) component in the **prepend-inner** slot.",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "singleLine",
"description": "Label does not move on focus/dirty.",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "variant",
"description": "Applies a distinct style to the component.",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"default": "'filled'",
"value": {
"kind": "expression",
"type": "| 'underlined'\n | 'outlined'\n | 'filled'\n | 'solo'\n | 'solo-inverted'\n | 'solo-filled'\n | 'plain'"
}
},
{
"name": "loading",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color.",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | boolean"
}
},
{
"name": "rounded",
"description": "Designates the **border-radius** applied to the component. This can be **0**, **xs**, **sm**, true, **lg**, **xl**, **pill**, **circle**, and **shaped**. Find more information on available border radius classes on the [Border Radius page](/styles/border-radius).",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"value": {
"kind": "expression",
"type": "string | number | boolean"
}
},
{
"name": "tile",
"description": "Removes any applied **border-radius** from the component.",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "theme",
"description": "Specify a theme for this component and all of its children.",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "modelValue",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.",
"doc-url": "https://vuetifyjs.com/api/VField#props",
"value": {
"kind": "expression",
"type": "unknown"
}
}
],
"events": [
{
"name": "update:focused",
"description": "Emitted when the input is focused or blurred",
"doc-url": "https://vuetifyjs.com/api/v-field#events",
"arguments": [
{
"name": "argument",
"type": "[boolean]\n"
}
]
},
{
"name": "click:clear",
"description": "Emitted when clearable icon clicked.",
"doc-url": "https://vuetifyjs.com/api/v-field#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
},
{
"name": "click:appendInner",
"description": "Emitted when appended inner icon is clicked.",
"doc-url": "https://vuetifyjs.com/api/v-field#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
},
{
"name": "click:prependInner",
"description": "Emitted when prepended inner icon is clicked.",
"doc-url": "https://vuetifyjs.com/api/v-field#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
},
{
"name": "update:modelValue",
"description": "Event that is emitted when the component's model changes.",
"doc-url": "https://vuetifyjs.com/api/v-field#events",
"arguments": [
{
"name": "argument",
"type": "[unknown]\n"
}
]
}
],
"slots": [
{
"name": "clear",
"description": "Slot for custom clear icon (displayed when the **clearable** prop is equal to true).",
"doc-url": "https://vuetifyjs.com/api/v-field#slots"
},
{
"name": "prepend-inner",
"description": "Slot that is prepended to the input.",
"doc-url": "https://vuetifyjs.com/api/v-field#slots",
"vue-properties": [
{
"name": "isActive",
"type": "Ref"
},
{
"name": "isFocused",
"type": "Ref"
},
{
"name": "controlRef",
"type": "Ref"
},
{
"name": "focus",
"type": "() => void"
},
{
"name": "blur",
"type": "() => void"
}
]
},
{
"name": "append-inner",
"description": "Adds an item inside the input content.",
"doc-url": "https://vuetifyjs.com/api/v-field#slots",
"vue-properties": [
{
"name": "isActive",
"type": "Ref"
},
{
"name": "isFocused",
"type": "Ref"
},
{
"name": "controlRef",
"type": "Ref"
},
{
"name": "focus",
"type": "() => void"
},
{
"name": "blur",
"type": "() => void"
}
]
},
{
"name": "label",
"description": "The default slot of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.",
"doc-url": "https://vuetifyjs.com/api/v-field#slots"
},
{
"name": "loader",
"description": "Slot for custom loader (displayed when [loading](#props-loading) prop is equal to true).",
"doc-url": "https://vuetifyjs.com/api/v-field#slots",
"vue-properties": [
{
"name": "color",
"type": "string"
},
{
"name": "isActive",
"type": "boolean"
}
]
},
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-field#slots",
"vue-properties": [
{
"name": "props",
"type": "Record"
},
{
"name": "isActive",
"type": "Ref"
},
{
"name": "isFocused",
"type": "Ref"
},
{
"name": "controlRef",
"type": "Ref"
},
{
"name": "focus",
"type": "() => void"
},
{
"name": "blur",
"type": "() => void"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VFieldLabel",
"source": {
"module": "./src/components/index.ts",
"symbol": "VFieldLabel"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-field-label",
"attributes": [
{
"name": "floating",
"description": "Elevates the label above the slotted content.",
"doc-url": "https://vuetifyjs.com/api/VFieldLabel#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-field-label#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VFileInput",
"source": {
"module": "./src/components/index.ts",
"symbol": "VFileInput"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-file-input",
"attributes": [
{
"name": "label",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "counter",
"description": "Displays the number of selected files.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "flat",
"description": "Removes box shadow when using a variant with elevation.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "chips",
"description": "Changes display of selections to chips.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "counterSizeString",
"description": "The text displayed when using the **counter** and **show-size** props. Can also be customized globally on the [internationalization page](/customization/internationalization).",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "'$vuetify.fileInput.counterSize'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "counterString",
"description": "The text displayed when using the **counter** prop. Can also be customized globally on the [internationalization page](/customization/internationalization).",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "'$vuetify.fileInput.counter'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "hideInput",
"description": "Display the icon only without the input (file names).",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "multiple",
"description": "Adds the **multiple** attribute to the input, allowing multiple file selections.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "showSize",
"description": "Sets the displayed size of selected file(s). When using **true** will default to _1000_ displaying (**kB, MB, GB**) while _1024_ will display (**KiB, MiB, GiB**).",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean | 1000 | 1024"
}
},
{
"name": "id",
"description": "Sets the DOM id on the component.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "appendIcon",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "centerAffix",
"description": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "prependIcon",
"description": "Prepends an icon to the component, uses the same syntax as `v-icon`.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "'$file'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "hideSpinButtons",
"description": "Hides spin buttons on the input when type is set to `number`.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "hint",
"description": "Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "persistentHint",
"description": "Forces [hint](#props-hint) to always be visible.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "messages",
"description": "Displays a list of messages or a single message if using a string.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "string | string[]"
}
},
{
"name": "direction",
"description": "Changes the direction of the input.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "'horizontal'",
"value": {
"kind": "expression",
"type": "'horizontal' | 'vertical'"
}
},
{
"name": "reverse",
"description": "Reverses the orientation.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "density",
"description": "Adjusts the vertical height used by the component.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "'default'",
"value": {
"kind": "expression",
"type": "'default' | 'comfortable' | 'compact'"
}
},
{
"name": "maxWidth",
"description": "Sets the maximum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minWidth",
"description": "Sets the minimum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "width",
"description": "Sets the width for the component.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "theme",
"description": "Specify a theme for this component and all of its children.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "disabled",
"description": "Removes the ability to click or target the input.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "null",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "error",
"description": "Puts the input in a manual error state.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "errorMessages",
"description": "Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the **rules** prop. This field will not trigger validation.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "string | string[]"
}
},
{
"name": "maxErrors",
"description": "Control the maximum number of shown errors from validation.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "1",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "name",
"description": "Sets the component's name attribute.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "readonly",
"description": "Puts input in readonly state.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "null",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "rules",
"description": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "ValidationRule[]"
}
},
{
"name": "modelValue",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "null",
"value": {
"kind": "expression",
"type": "File | File[]"
}
},
{
"name": "validateOn",
"description": "Change what type of event triggers validation to run.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"value": {
"kind": "expression",
"type": "| 'blur'\n | 'input'\n | 'submit'\n | 'invalid-input'\n | 'blur lazy'\n | 'input lazy'\n | 'submit lazy'\n | 'invalid-input lazy'\n | 'blur eager'\n | 'input eager'\n | 'submit eager'\n | 'invalid-input eager'\n | 'lazy blur'\n | 'lazy input'\n | 'lazy submit'\n | 'lazy invalid-input'\n | 'eager blur'\n | 'eager input'\n | 'eager submit'\n | 'eager invalid-input'\n | 'lazy'\n | 'eager'"
}
},
{
"name": "validationValue",
"description": "The value used when applying validation rules.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"value": {
"kind": "expression",
"type": "any"
}
},
{
"name": "focused",
"description": "Forces a focused state styling on the component.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "hideDetails",
"description": "Hides hint and validation errors. When set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean | 'auto'"
}
},
{
"name": "appendInnerIcon",
"description": "Creates a [v-icon](/api/v-icon/) component in the **append-inner** slot.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "bgColor",
"description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "clearable",
"description": "Allows for the component to be cleared.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "true",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "clearIcon",
"description": "The icon used when the **clearable** prop is set to true.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "'$clear'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "active",
"description": "Controls the **active** state of the item. This is typically used to highlight the component.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "color",
"description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "baseColor",
"description": "Sets the color of the input when it is not focused.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "dirty",
"description": "Manually apply the dirty state styling.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "persistentClear",
"description": "Always show the clearable icon when the input is dirty (By default it only shows on hover).",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "prependInnerIcon",
"description": "Creates a [v-icon](/api/v-icon/) component in the **prepend-inner** slot.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "singleLine",
"description": "Label does not move on focus/dirty.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "variant",
"description": "Applies a distinct style to the component.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "'filled'",
"value": {
"kind": "expression",
"type": "| 'underlined'\n | 'outlined'\n | 'filled'\n | 'solo'\n | 'solo-inverted'\n | 'solo-filled'\n | 'plain'"
}
},
{
"name": "loading",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | boolean"
}
},
{
"name": "rounded",
"description": "Designates the **border-radius** applied to the component. This can be **0**, **xs**, **sm**, true, **lg**, **xl**, **pill**, **circle**, and **shaped**. Find more information on available border radius classes on the [Border Radius page](/styles/border-radius).",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"value": {
"kind": "expression",
"type": "string | number | boolean"
}
},
{
"name": "tile",
"description": "Removes any applied **border-radius** from the component.",
"doc-url": "https://vuetifyjs.com/api/VFileInput#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
}
],
"events": [
{
"name": "click:prepend",
"description": "Emitted when prepended icon is clicked.",
"doc-url": "https://vuetifyjs.com/api/v-file-input#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
},
{
"name": "click:append",
"description": "Emitted when append icon is clicked.",
"doc-url": "https://vuetifyjs.com/api/v-file-input#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
},
{
"name": "update:focused",
"description": "Emitted when the input is focused or blurred",
"doc-url": "https://vuetifyjs.com/api/v-file-input#events",
"arguments": [
{
"name": "argument",
"type": "[boolean]\n"
}
]
},
{
"name": "click:clear",
"description": "Emitted when clearable icon clicked.",
"doc-url": "https://vuetifyjs.com/api/v-file-input#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
},
{
"name": "click:appendInner",
"description": "Emitted when appended inner icon is clicked.",
"doc-url": "https://vuetifyjs.com/api/v-file-input#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
},
{
"name": "click:prependInner",
"description": "Emitted when prepended inner icon is clicked.",
"doc-url": "https://vuetifyjs.com/api/v-file-input#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
},
{
"name": "click:control",
"description": "Emitted when the main input is clicked.",
"doc-url": "https://vuetifyjs.com/api/v-file-input#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
},
{
"name": "mousedown:control",
"description": "Event that is emitted when using mousedown on the main control area.",
"doc-url": "https://vuetifyjs.com/api/v-file-input#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
},
{
"name": "update:modelValue",
"description": "Event that is emitted when the component's model changes.",
"doc-url": "https://vuetifyjs.com/api/v-file-input#events",
"arguments": [
{
"name": "argument",
"type": "[File | File[]]\n"
}
]
}
],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-file-input#slots"
},
{
"name": "prepend",
"description": "Adds an item outside the input and before input content.",
"doc-url": "https://vuetifyjs.com/api/v-file-input#slots",
"vue-properties": [
{
"name": "id",
"type": "ComputedRef"
},
{
"name": "messagesId",
"type": "ComputedRef"
},
{
"name": "isDirty",
"type": "ComputedRef"
},
{
"name": "isDisabled",
"type": "ComputedRef"
},
{
"name": "isReadonly",
"type": "ComputedRef"
},
{
"name": "isPristine",
"type": "Ref"
},
{
"name": "isValid",
"type": "ComputedRef"
},
{
"name": "isValidating",
"type": "Ref"
},
{
"name": "reset",
"type": "() => void"
},
{
"name": "resetValidation",
"type": "() => void"
},
{
"name": "validate",
"type": "() => void"
}
]
},
{
"name": "append",
"description": "Adds an item inside the input and after input content.",
"doc-url": "https://vuetifyjs.com/api/v-file-input#slots",
"vue-properties": [
{
"name": "id",
"type": "ComputedRef"
},
{
"name": "messagesId",
"type": "ComputedRef"
},
{
"name": "isDirty",
"type": "ComputedRef"
},
{
"name": "isDisabled",
"type": "ComputedRef"
},
{
"name": "isReadonly",
"type": "ComputedRef"
},
{
"name": "isPristine",
"type": "Ref"
},
{
"name": "isValid",
"type": "ComputedRef"
},
{
"name": "isValidating",
"type": "Ref"
},
{
"name": "reset",
"type": "() => void"
},
{
"name": "resetValidation",
"type": "() => void"
},
{
"name": "validate",
"type": "() => void"
}
]
},
{
"name": "details",
"description": "Slot for custom input details to modifying the display of [messages](#props-messages).",
"doc-url": "https://vuetifyjs.com/api/v-file-input#slots",
"vue-properties": [
{
"name": "id",
"type": "ComputedRef"
},
{
"name": "messagesId",
"type": "ComputedRef"
},
{
"name": "isDirty",
"type": "ComputedRef"
},
{
"name": "isDisabled",
"type": "ComputedRef"
},
{
"name": "isReadonly",
"type": "ComputedRef"
},
{
"name": "isPristine",
"type": "Ref"
},
{
"name": "isValid",
"type": "ComputedRef"
},
{
"name": "isValidating",
"type": "Ref"
},
{
"name": "reset",
"type": "() => void"
},
{
"name": "resetValidation",
"type": "() => void"
},
{
"name": "validate",
"type": "() => void"
}
]
},
{
"name": "message",
"description": "Slot used to customize the message content.",
"doc-url": "https://vuetifyjs.com/api/v-file-input#slots",
"vue-properties": [
{
"name": "message",
"type": "string"
}
]
},
{
"name": "clear",
"description": "Slot for custom clear icon (displayed when the **clearable** prop is equal to true).",
"doc-url": "https://vuetifyjs.com/api/v-file-input#slots"
},
{
"name": "prepend-inner",
"description": "Slot that is prepended to the input.",
"doc-url": "https://vuetifyjs.com/api/v-file-input#slots",
"vue-properties": [
{
"name": "isActive",
"type": "Ref | | | |