diff --git a/lerna.json b/lerna.json index d731f79c2b7..56e9498822a 100644 --- a/lerna.json +++ b/lerna.json @@ -13,6 +13,6 @@ } }, "npmClient": "yarn", - "version": "3.6.3", + "version": "3.6.9", "useWorkspaces": true } diff --git a/package.json b/package.json index 986155b7f7d..df2ba25274d 100755 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "@typescript-eslint/eslint-plugin": "^6.21.0", "@typescript-eslint/parser": "^6.21.0", "@unhead/vue": "^1.9.4", - "@vue/compiler-sfc": "^3.4.21", + "@vue/compiler-sfc": "^3.4.27", "@vueuse/head": "^1.3.1", "babel-eslint": "^10.1.0", "babel-jest": "^28.1.3", @@ -82,7 +82,7 @@ "upath": "^2.0.1", "vite-plugin-inspect": "^0.8.3", "vite-plugin-warmup": "^0.1.0", - "vue": "^3.4.21", + "vue": "^3.4.27", "vue-analytics": "^5.16.1", "vue-router": "^4.3.0", "vue-tsc": "^1.8.27", diff --git a/packages/api-generator/package.json b/packages/api-generator/package.json index ba8f15c7a9c..ee0d5f5f1d2 100755 --- a/packages/api-generator/package.json +++ b/packages/api-generator/package.json @@ -1,6 +1,6 @@ { "name": "@vuetify/api-generator", - "version": "3.6.3", + "version": "3.6.9", "private": true, "description": "", "scripts": { @@ -16,8 +16,8 @@ "prettier": "^3.2.5", "ts-morph": "^22.0.0", "tsx": "^4.7.2", - "vue": "^3.4.21", - "vuetify": "^3.6.3" + "vue": "^3.4.27", + "vuetify": "^3.6.9" }, "devDependencies": { "@types/stringify-object": "^4.0.5" diff --git a/packages/api-generator/src/locale/en/Stepper.json b/packages/api-generator/src/locale/en/Stepper.json new file mode 100644 index 00000000000..797be50f8e6 --- /dev/null +++ b/packages/api-generator/src/locale/en/Stepper.json @@ -0,0 +1,27 @@ +{ + "props": { + "altLabels": "Places the labels beneath the step.", + "editable": "Marks step as editable.", + "hideActions": "Hide actions bar (prev and next buttons).", + "itemTitle": "Property on supplied `items` that contains its title.", + "itemValue": "Property on supplied `items` that contains its value.", + "mobile": "Forces the stepper into a mobile state, removing labels from stepper items.", + "nextText": "The text used for the Next button.", + "prevText": "The text used for the Prev button.", + "nonLinear": "Allow user to jump to any step." + }, + "slots": { + "[`header-item.${string}`]": "Slot for customizing header items when using the [items](/api/v-stepper/#props-items) prop.", + "[`item.${string}`]": "Slot for customizing the content for each step.", + "actions": "Slot for customizing [v-stepper-actions](/api/v-stepper-actions/).", + "header": "Slot for customizing the header.", + "header-item": "Slot for customizing all header items.", + "icon": "Slot for customizing all stepper item icons.", + "next": "Slot for customizing the next step functionailty", + "prev": "Slot for customizing the prev step functionality" + }, + "exposed": { + "next": "Move to the next step.", + "prev": "Move to the prev step." + } +} diff --git a/packages/api-generator/src/locale/en/StepperItem.json b/packages/api-generator/src/locale/en/StepperItem.json new file mode 100644 index 00000000000..3f1ddeb13a5 --- /dev/null +++ b/packages/api-generator/src/locale/en/StepperItem.json @@ -0,0 +1,12 @@ +{ + "props": { + "complete": "Marks step as complete.", + "completeIcon": "Icon to display when step is marked as completed.", + "editable": "Marks step as editable.", + "editIcon": "Icon to display when step is editable.", + "errorIcon": "Icon to display when step has an error.", + "error": "Puts the stepper item in a manual error state.", + "rules": "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`.", + "step": "Content to display inside step circle." + } +} diff --git a/packages/api-generator/src/locale/en/VDataTable.json b/packages/api-generator/src/locale/en/VDataTable.json index 96c8ef0c5db..2e5bdcdefb6 100644 --- a/packages/api-generator/src/locale/en/VDataTable.json +++ b/packages/api-generator/src/locale/en/VDataTable.json @@ -14,11 +14,13 @@ "fixedHeader": "Fixed header to top of table.", "groupBy": "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.", "groupDesc": "Changes which direction grouping is done. Can be used with `.sync` modifier.", - "headerProps": "Pass props to the default header. See [`v-data-table-header` API](/api/v-data-table-header) for more information.", + "headerProps": "Pass props to the default header. See [`v-data-table-headers` API](/api/v-data-table-headers) for more information.", "headers": "An array of objects that each describe a header column. See the example below for a definition of all properties.", "headersLength": "Can be used in combination with `hide-default-header` to specify the number of columns in the table to allow expansion rows and loading bar to function properly.", "height": "Set an explicit height of table.", - "hideDefaultHeader": "Hide the default headers.", + "hideDefaultBody": "Hides the default body.", + "hideDefaultHeader": "Hides the default header.", + "hideDefaultFooter": "Hides the default footer. This has no effect on `v-data-table-virtual`.", "hover": "Adds a hover effects to a table rows.", "itemClass": "Property on supplied `items` that contains item's row class or function that takes an item as an argument and returns the class of corresponding row.", "itemsPerPage": "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.", @@ -52,9 +54,9 @@ "group.summary": "Slot to customize the default rendering of group summaries.", "heading": "Slot to add a custom header.", "header.": "Slot to customize a specific header column.", - "header.data-table-select": "Slot to replace the default `v-simple-checkbox` in header.", + "header.data-table-select": "Slot to replace the default `v-checkbox-btn` in header.", "item": "Slot to replace the default rendering of a row.", - "item.data-table-select": "Slot to replace the default `v-simple-checkbox` used when selecting rows.", + "item.data-table-select": "Slot to replace the default `v-checkbox-btn` used when selecting rows.", "item.data-table-expand": "Slot to replace the default `v-icon` used when expanding rows.", "item.": "Slot to customize a specific column.", "loading": "Defines content for when `loading` is true and no items are provided.", diff --git a/packages/api-generator/src/locale/en/VDataTableHeader.json b/packages/api-generator/src/locale/en/VDataTableHeader.json index 5f4ddba267f..9ac97c72528 100644 --- a/packages/api-generator/src/locale/en/VDataTableHeader.json +++ b/packages/api-generator/src/locale/en/VDataTableHeader.json @@ -1,6 +1,5 @@ { "props": { - "disableSort": "Toggles rendering of sort button.", "everyItem": "Indicates if all items in table are selected.", "headers": "Array of header items to display.", "mobile": "Renders mobile view of headers.", diff --git a/packages/api-generator/src/locale/en/VDataTableHeaders.json b/packages/api-generator/src/locale/en/VDataTableHeaders.json index 9670a86c82e..d00ed1ab290 100644 --- a/packages/api-generator/src/locale/en/VDataTableHeaders.json +++ b/packages/api-generator/src/locale/en/VDataTableHeaders.json @@ -1,5 +1,6 @@ { "props": { + "disableSort": "Toggles rendering of sort button.", "sortAscIcon": "Icon used for ascending sort button.", "sortDescIcon": "Icon used for descending sort button.", "sticky": "Sticks the header to the top of the table." diff --git a/packages/api-generator/src/locale/en/VDataTableServer.json b/packages/api-generator/src/locale/en/VDataTableServer.json index ce305f63a7b..c4c85b60cf3 100644 --- a/packages/api-generator/src/locale/en/VDataTableServer.json +++ b/packages/api-generator/src/locale/en/VDataTableServer.json @@ -9,9 +9,10 @@ "bottom": "Slot to add content below the table.", "colgroup": "Slot to replace the default rendering of the `` element.", "column.data-table-expand": "Slot to replace the default `v-icon` used when expanding rows.", - "column.data-table-select": "Slot to replace the default `v-simple-checkbox` used when selecting rows.", + "column.data-table-select": "Slot to replace the default `v-checkbox-btn` used when selecting rows.", "dataTableGroup": "Slot for custom rendering of a group.", "data-table-select": "Slot for custom rendering of a header cell with the select checkbox.", + "disableSort": "Disables sorting completely.", "expanded-row": "Slot for custom rendering of an expanded row.", "footer.prepend": "Adds content to the empty space in the footer.", "group-header": "Slot for custom rendering of a group header.", diff --git a/packages/api-generator/src/locale/en/VDataTableVirtual.json b/packages/api-generator/src/locale/en/VDataTableVirtual.json index 7428773c59f..e24b810ffb4 100644 --- a/packages/api-generator/src/locale/en/VDataTableVirtual.json +++ b/packages/api-generator/src/locale/en/VDataTableVirtual.json @@ -6,9 +6,10 @@ "bottom": "Slot to add content below the table.", "colgroup": "Slot to replace the default rendering of the `` element.", "column.data-table-expand": "Slot to replace the default `v-icon` used when expanding rows.", - "column.data-table-select": "Slot to replace the default `v-simple-checkbox` used when selecting rows.", + "column.data-table-select": "Slot to replace the default `v-checkbox-btn` used when selecting rows.", "data-table-group": "Slot for custom rendering of a group.", "data-table-select": "Slot for custom rendering of a header cell with the select checkbox.", + "disableSort": "Disables sorting completely.", "expanded-row": "Slot for custom rendering of an expanded row.", "group-header": "Slot for custom rendering of a group header.", "headers": "Slot to replace the default rendering of the `` element.", diff --git a/packages/api-generator/src/locale/en/VExpansionPanelTitle.json b/packages/api-generator/src/locale/en/VExpansionPanelTitle.json index 814c6cca0c8..c3d385c2bf4 100644 --- a/packages/api-generator/src/locale/en/VExpansionPanelTitle.json +++ b/packages/api-generator/src/locale/en/VExpansionPanelTitle.json @@ -2,6 +2,7 @@ "props": { "collapseIcon": "Icon used when the expansion panel is in a collapsable state.", "expandIcon": "Icon used when the expansion panel is in a expandable state.", - "hideActions": "Hide the expand icon in the content title." + "hideActions": "Hide the expand icon in the content title.", + "static": "Remove title size expansion when selected." } } diff --git a/packages/api-generator/src/locale/en/VStepper.json b/packages/api-generator/src/locale/en/VStepper.json index 43b4515f855..ae3f59342c2 100644 --- a/packages/api-generator/src/locale/en/VStepper.json +++ b/packages/api-generator/src/locale/en/VStepper.json @@ -1,26 +1,6 @@ { "props": { - "altLabels": "Places the labels beneath the step.", - "editable": "Marks step as editable.", - "flat": "Removes the stepper's elevation.", - "hideActions": "Hide actions bar (prev and next buttons).", - "itemTitle": "Property on supplied `items` that contains its title.", - "itemValue": "Property on supplied `items` that contains its value.", - "mobile": "Forces the stepper into a mobile state, removing labels from stepper items.", - "nextText": "The text used for the Next button.", - "prevText": "The text used for the Prev button.", - "nonLinear": "Allow user to jump to any step.", - "vertical": "Display steps vertically." - }, - "slots": { - "[`header-item.${string}`]": "Slot for customizing header items when using the [items](/api/v-stepper/#props-items) prop.", - "[`item.${string}`]": "Slot for customizing the content for each step.", - "actions": "Slot for customizing [v-stepper-actions](/api/v-stepper-actions/).", - "header": "Slot for customizing the header.", - "header-item": "Slot for customizing all header items.", - "icon": "Slot for customizing all stepper item icons.", - "next": "Slot for customizing the next step functionailty", - "prev": "Slot for customizing the prev step functionality" + "flat": "Removes the stepper's elevation." }, "exposed": { "next": "Move to the next step.", diff --git a/packages/api-generator/src/locale/en/VStepperItem.json b/packages/api-generator/src/locale/en/VStepperItem.json index 6a4eb04f3bf..6ee1816d2a3 100644 --- a/packages/api-generator/src/locale/en/VStepperItem.json +++ b/packages/api-generator/src/locale/en/VStepperItem.json @@ -1,16 +1,7 @@ { "props": { - "complete": "Marks step as complete.", - "completeIcon": "Icon to display when step is marked as completed.", - "editable": "Marks step as editable.", - "editIcon": "Icon to display when step is editable.", - "errorIcon": "Icon to display when step has an error.", - "error": "Puts the stepper item in a manual error state.", - "rules": "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`.", - "step": "Content to display inside step circle." }, "events": { - "click": "Emitted when component is clicked." }, "slots": { "icon": "Slot for customizing all stepper item icons." diff --git a/packages/api-generator/src/locale/en/VStepperVerticalActions.json b/packages/api-generator/src/locale/en/VStepperVerticalActions.json new file mode 100644 index 00000000000..4ecea34c2de --- /dev/null +++ b/packages/api-generator/src/locale/en/VStepperVerticalActions.json @@ -0,0 +1,9 @@ +{ + "props": { + "finish": "Changes the Next button to use the finish text.", + "finishText": "The text used for the finish button. Shown when using the **finish** prop." + }, + "events": { + "click:finish": "Emitted when the clicking the finish button." + } +} diff --git a/packages/api-generator/src/locale/en/VStepperVerticalItem.json b/packages/api-generator/src/locale/en/VStepperVerticalItem.json new file mode 100644 index 00000000000..ca6696cfa26 --- /dev/null +++ b/packages/api-generator/src/locale/en/VStepperVerticalItem.json @@ -0,0 +1,7 @@ +{ + "events": { + "click:finish": "Event emitted when clicking the finish button", + "click:next": "Event emitted when clicking the next button", + "click:previous": "Event emitted when clicking the previous button" + } +} diff --git a/packages/api-generator/src/locale/en/VTabs.json b/packages/api-generator/src/locale/en/VTabs.json index 8eefdaf55c6..e44e73503a4 100644 --- a/packages/api-generator/src/locale/en/VTabs.json +++ b/packages/api-generator/src/locale/en/VTabs.json @@ -13,7 +13,7 @@ "height": "Sets the height of the tabs bar.", "hideSlider": "Hide's the generated `v-tabs-slider`.", "iconsAndText": "Will stack icon and text vertically.", - "items": "The items to display in the component. This can be an array of strings or objects with a property `title`.", + "items": "The items to display in the component. This can be an array of strings or objects with a property `text`.", "light": "Applies the light theme variant to the component.", "mobileBreakpoint": "Sets the designated mobile breakpoint for the component.", "optional": "Does not require an active item. Useful when using `v-tab` as a `router-link`.", diff --git a/packages/api-generator/src/locale/en/display.json b/packages/api-generator/src/locale/en/display.json index 1fea0af1766..22b1639681f 100644 --- a/packages/api-generator/src/locale/en/display.json +++ b/packages/api-generator/src/locale/en/display.json @@ -1,6 +1,6 @@ { "props": { - "mobile": "Explicitly designate as a mobile display configuration.", - "mobileBreakpoint": "Overrides the display configuration default." + "mobile": "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", + "mobileBreakpoint": "Overrides the display configuration default screen size that the component should be considered in mobile." } } diff --git a/packages/api-generator/src/types.ts b/packages/api-generator/src/types.ts index 76c410b852a..0f14e001888 100644 --- a/packages/api-generator/src/types.ts +++ b/packages/api-generator/src/types.ts @@ -309,6 +309,7 @@ function count (arr: string[], needle: string) { // Types that are displayed as links const allowedRefs = [ 'Anchor', + 'ActiveStrategy', 'DataIteratorItem', 'DataTableHeader', 'DataTableItem', @@ -319,12 +320,15 @@ const allowedRefs = [ 'ListItem', 'LocationStrategyFn', 'OpenSelectStrategyFn', + 'OpenStrategy', 'OpenStrategyFn', 'ScrollStrategyFn', 'SelectItemKey', + 'SelectStrategy', 'SelectStrategyFn', 'SortItem', 'SubmitEventPromise', + 'TemplateRef', 'TouchHandlers', 'ValidationRule', ] diff --git a/packages/docs/components.d.ts b/packages/docs/components.d.ts index f34eac93cda..0a814fa77f1 100644 --- a/packages/docs/components.d.ts +++ b/packages/docs/components.d.ts @@ -129,8 +129,10 @@ declare module 'vue' { IntroductionComparison: typeof import('./src/components/introduction/Comparison.vue')['default'] IntroductionDirectSupport: typeof import('./src/components/introduction/DirectSupport.vue')['default'] IntroductionDiscordDeck: typeof import('./src/components/introduction/DiscordDeck.vue')['default'] + 'IntroductionDiscordDeck.1': typeof import('./src/components/introduction/DiscordDeck.1.vue')['default'] IntroductionEnterpriseDeck: typeof import('./src/components/introduction/EnterpriseDeck.vue')['default'] IntroductionEnterpriseForm: typeof import('./src/components/introduction/EnterpriseForm.vue')['default'] + IntroductionSlaDeck: typeof import('./src/components/introduction/SlaDeck.vue')['default'] PageFeatures: typeof import('./src/components/PageFeatures.vue')['default'] PromotedBase: typeof import('./src/components/promoted/Base.vue')['default'] PromotedCarbon: typeof import('./src/components/promoted/Carbon.vue')['default'] diff --git a/packages/docs/package.json b/packages/docs/package.json index 449a64171ab..b81806c85d6 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -3,7 +3,7 @@ "description": "A Vue.js project", "private": true, "author": "John Leider ", - "version": "3.6.3", + "version": "3.6.9", "repository": { "type": "git", "url": "git+https://github.com/vuetifyjs/vuetify.git", @@ -24,7 +24,7 @@ "@vuelidate/core": "^2.0.3", "@vuelidate/validators": "^2.0.4", "@vuetify/one": "^1.8.1", - "algoliasearch": "^4.23.2", + "algoliasearch": "^4.23.3", "fflate": "^0.8.2", "isomorphic-fetch": "^3.0.0", "lodash-es": "^4.17.21", @@ -33,12 +33,12 @@ "prismjs": "^1.29.0", "roboto-fontface": "^0.10.0", "vee-validate": "^4.12.6", - "vue": "^3.4.21", + "vue": "^3.4.27", "vue-gtag-next": "^1.14.0", "vue-i18n": "^9.11.0", - "vue-instantsearch": "^4.15.0", + "vue-instantsearch": "^4.16.1", "vue-prism-component": "^2.0.0", - "vuetify": "^3.6.3" + "vuetify": "^3.6.9" }, "devDependencies": { "@emailjs/browser": "^4.3.3", @@ -49,8 +49,8 @@ "@types/prismjs": "^1.26.3", "@vitejs/plugin-basic-ssl": "^1.1.0", "@vitejs/plugin-vue": "^5.0.4", - "@vue/compiler-sfc": "^3.4.21", - "@vuetify/api-generator": "^3.6.3", + "@vue/compiler-sfc": "^3.4.27", + "@vuetify/api-generator": "^3.6.9", "ajv": "^8.12.0", "async-es": "^3.2.5", "date-fns": "^3.6.0", diff --git a/packages/docs/src/components/api/ApiTable.vue b/packages/docs/src/components/api/ApiTable.vue index 06ee575b55f..28149fd2fa8 100644 --- a/packages/docs/src/components/api/ApiTable.vue +++ b/packages/docs/src/components/api/ApiTable.vue @@ -22,7 +22,7 @@ name="row" v-bind="{ props: { - class: 'bg-surface-bright' + style: 'background: rgba(0,0,0,.1)' }, item, }" diff --git a/packages/docs/src/components/app/bar/EnterpriseLink.vue b/packages/docs/src/components/app/bar/EnterpriseLink.vue index 3ef7f5b43dd..31c5ca9569b 100644 --- a/packages/docs/src/components/app/bar/EnterpriseLink.vue +++ b/packages/docs/src/components/app/bar/EnterpriseLink.vue @@ -3,7 +3,7 @@ :to="rpath('/introduction/enterprise-support/')" class="ms-1" color="primary" - text="enterprise" + text="support" variant="outlined" @click="gtagClick('app-bar', 'enterprise', name)" /> diff --git a/packages/docs/src/components/examples/Example.vue b/packages/docs/src/components/examples/Example.vue index ff0ae47ffe9..18723796c94 100644 --- a/packages/docs/src/components/examples/Example.vue +++ b/packages/docs/src/components/examples/Example.vue @@ -7,7 +7,6 @@ > @@ -46,31 +45,33 @@ - - +
- + + + + + + + + + + + + + diff --git a/packages/docs/src/data/301.json b/packages/docs/src/data/301.json index 0e5eb9338c4..d87996b6863 100644 --- a/packages/docs/src/data/301.json +++ b/packages/docs/src/data/301.json @@ -114,7 +114,6 @@ "customization/sass-variables": "/features/sass-variables", "customization/theme": "/features/theme", "about/sponsors-and-backers": "/introduction/sponsors-and-backers", - "components/application": "/features/application-layout", "components/simple-tables": "/components/tables", "components/data-tables": "/components/data-tables/basics", "components/date-pickers-month": "/introduction/roadmap", diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json index 91446a8eadb..9d0a526bde2 100644 --- a/packages/docs/src/data/nav.json +++ b/packages/docs/src/data/nav.json @@ -88,6 +88,7 @@ "routePath": "explorer", "subtitle": "browse-components" }, + "application", { "divider": true }, { "subheader": "containment" }, "bottom-sheets", @@ -248,6 +249,10 @@ "title": "snackbar-queue", "subfolder": "components" }, + { + "title": "vertical-steppers", + "subfolder": "components" + }, { "title": "time-pickers", "subfolder": "components" diff --git a/packages/docs/src/data/team.json b/packages/docs/src/data/team.json index 3a1279181ca..e3e9f304b8f 100644 --- a/packages/docs/src/data/team.json +++ b/packages/docs/src/data/team.json @@ -35,22 +35,6 @@ "work": "COO @ Vuetify", "joined": "Nov 2019" }, - "alexandriajackson": { - "avatar": "https://cdn.vuetifyjs.com/docs/images/team/alexandria.jpg", - "discord": "alexandriajackson_", - "focus": [ - "vuetifyjs/*" - ], - "languages": [ - "English" - ], - "location": "Dallas, TX, USA", - "name": "Alexandria Jackson", - "team": "company", - "twitter": "AlexxJackson96", - "work": "Marketing Coordinator @ Vuetify", - "joined": "Sept 2023" - }, "KaelWD": { "discord": "kaelwd", "focus": [ @@ -182,6 +166,22 @@ "twitter": "kieuminhcanh", "joined": "April 2024" }, + "MatthewAry": { + "discord": "bitshift_", + "focus": [ + "[vuetifyjs/*](https://github.com/vuetifyjs)" + ], + "languages": [ + "English" + ], + "location": "Spokane, WA, USA", + "name": "Matthew Ary", + "twitter": "MatthewAry", + "linkedin": "matthewary", + "work": "Director of Product Development at Symplsoft Inc.", + "team": "core", + "joined": "May 2024" + }, "jacekkarczmarczyk": { "discord": "jacek#3542", "languages": [ @@ -251,5 +251,21 @@ "name": "Yoones Khoshghadam", "team": "legends", "joined": "January 2023" + }, + "alexandriajackson": { + "avatar": "https://cdn.vuetifyjs.com/docs/images/team/alexandria.jpg", + "discord": "alexandriajackson_", + "focus": [ + "[vuetifyjs/*](https://github.com/vuetifyjs)" + ], + "languages": [ + "English" + ], + "location": "Dallas, TX, USA", + "name": "Alexandria Jackson", + "team": "company", + "twitter": "AlexxJackson96", + "work": "Marketing Coordinator @ Vuetify", + "joined": "Sept 2023" } } diff --git a/packages/docs/src/examples/application/app-bar-drawer.vue b/packages/docs/src/examples/application/app-bar-drawer.vue new file mode 100644 index 00000000000..16d07d8482e --- /dev/null +++ b/packages/docs/src/examples/application/app-bar-drawer.vue @@ -0,0 +1,19 @@ + diff --git a/packages/docs/src/examples/application/drawer-app-bar.vue b/packages/docs/src/examples/application/drawer-app-bar.vue new file mode 100644 index 00000000000..5cd4b7f20be --- /dev/null +++ b/packages/docs/src/examples/application/drawer-app-bar.vue @@ -0,0 +1,19 @@ + diff --git a/packages/docs/src/examples/application/theme.vue b/packages/docs/src/examples/application/theme.vue index ca74fedd374..fbbdba8569f 100644 --- a/packages/docs/src/examples/application/theme.vue +++ b/packages/docs/src/examples/application/theme.vue @@ -1,22 +1,24 @@ + + diff --git a/packages/docs/src/examples/v-sparkline/misc-dashboard-cards.vue b/packages/docs/src/examples/v-sparkline/misc-dashboard-cards.vue deleted file mode 100644 index 3510d210937..00000000000 --- a/packages/docs/src/examples/v-sparkline/misc-dashboard-cards.vue +++ /dev/null @@ -1,112 +0,0 @@ - - - - - diff --git a/packages/docs/src/examples/v-stepper-vertical/slot-actions.vue b/packages/docs/src/examples/v-stepper-vertical/slot-actions.vue new file mode 100644 index 00000000000..8b9b45cc840 --- /dev/null +++ b/packages/docs/src/examples/v-stepper-vertical/slot-actions.vue @@ -0,0 +1,84 @@ + + + + + diff --git a/packages/docs/src/examples/v-stepper-vertical/usage.vue b/packages/docs/src/examples/v-stepper-vertical/usage.vue new file mode 100644 index 00000000000..141dc55bf82 --- /dev/null +++ b/packages/docs/src/examples/v-stepper-vertical/usage.vue @@ -0,0 +1,53 @@ + + + diff --git a/packages/docs/src/examples/v-time-picker/prop-ampm-in-title.vue b/packages/docs/src/examples/v-time-picker/prop-ampm-in-title.vue index 6c594128398..0cdf903a812 100644 --- a/packages/docs/src/examples/v-time-picker/prop-ampm-in-title.vue +++ b/packages/docs/src/examples/v-time-picker/prop-ampm-in-title.vue @@ -10,7 +10,7 @@ > diff --git a/packages/docs/src/examples/v-time-picker/prop-disabled.vue b/packages/docs/src/examples/v-time-picker/prop-disabled.vue index fb9a3d930c7..471529f3ba7 100644 --- a/packages/docs/src/examples/v-time-picker/prop-disabled.vue +++ b/packages/docs/src/examples/v-time-picker/prop-disabled.vue @@ -9,7 +9,7 @@ > diff --git a/packages/docs/src/examples/v-tooltip-directive/object-literals.vue b/packages/docs/src/examples/v-tooltip-directive/object-literals.vue index 00075b8682f..d990da4ed31 100644 --- a/packages/docs/src/examples/v-tooltip-directive/object-literals.vue +++ b/packages/docs/src/examples/v-tooltip-directive/object-literals.vue @@ -14,8 +14,10 @@ diff --git a/packages/docs/src/examples/v-treeview/prop-item-disabled.vue b/packages/docs/src/examples/v-treeview/prop-item-disabled.vue deleted file mode 100644 index 8d1815c0528..00000000000 --- a/packages/docs/src/examples/v-treeview/prop-item-disabled.vue +++ /dev/null @@ -1,167 +0,0 @@ - - - - - diff --git a/packages/docs/src/examples/v-treeview/prop-item-props.vue b/packages/docs/src/examples/v-treeview/prop-item-props.vue new file mode 100644 index 00000000000..a79c0c5d173 --- /dev/null +++ b/packages/docs/src/examples/v-treeview/prop-item-props.vue @@ -0,0 +1,86 @@ + + + diff --git a/packages/docs/src/layouts/default.vue b/packages/docs/src/layouts/default.vue index 50f5540a07c..20cd94f2ae7 100644 --- a/packages/docs/src/layouts/default.vue +++ b/packages/docs/src/layouts/default.vue @@ -8,7 +8,7 @@ - + diff --git a/packages/docs/src/pages/en/components/application.md b/packages/docs/src/pages/en/components/application.md index 684253a796f..95dd3a1a7c6 100644 --- a/packages/docs/src/pages/en/components/application.md +++ b/packages/docs/src/pages/en/components/application.md @@ -1,5 +1,5 @@ --- -disabled: true +emphasized: true meta: title: Application description: Vuetify comes equipped with a default markup that makes it easy to create layouts (boilerplate) for any Vue application. @@ -8,47 +8,44 @@ related: - /features/theme/ - /components/app-bars/ - /components/navigation-drawers/ +features: + report: true --- # Application The `v-app` component is an optional feature that serves as the root layout component as well as providing an easy way to control the theme used at the root level. + + -In Vuetify, the `v-app` component is a convenient way to dynamically modify your application's current theme and provide an entry point for your layouts. This allows you to create truly unique interfaces without the hassle of managing your layout sizing. When an application is mounted, each layout child registers itself with the closest layout parent and is then automatically placed in your window. +## API -The order of your layout components will dictate the order in which they are registered, and ultimately placed, within your application. The following example demonstrates how the `v-app-bar` component takes priority over `v-navigation-drawer` because of its rendering order: +| Component | Description | +| - | - | +| [v-app](/api/v-app/) | Primary Component | +| [v-main](/api/v-main/) | Content area | -``` html - -``` +In Vuetify, the `v-app` component is a convenient way to dynamically modify your application's current theme and provide an entry point for your layouts. When an application is mounted, each layout child registers itself with the closest layout parent and is then automatically placed in your window. -![Pending graphic](https://cdn.vuetifyjs.com/docs/images/graphics/img-placeholder.png "Rendered Application") +::: info + More information on how to interact with the root sizing and styling is on the [Application](/features/application-layout/) page. +::: -If we swap `v-app-bar` and `v-navigation-drawer`, the registration order changes and the layout system layers the two components differently. +When placing your application level components, the order matters. Elements are stacked based on when they register and are rendered in the DOM after the first **nextTick** (to account for suspense). Layouts utilize [suspense](https://vuejs.org/guide/built-ins/suspense) to allow all layout components to register before rendering the initial layout. -``` html - -``` +If we swap `v-app-bar` and `v-navigation-drawer`, the registration order changes and the layout system layers the two components differently. -![Pending graphic](https://cdn.vuetifyjs.com/docs/images/graphics/img-placeholder.png "Rendered Application") + ## Theme @@ -56,64 +53,4 @@ The `v-app` component makes it easy to enable one of your application defined th The following example demonstrates how to use the **theme** prop to toggle the theme from dark to light. - - -```html { resource="src/App.vue" } - - - -``` - -::: tip - All components support to override the currently inherited theme locally using the **theme** prop. -::: - -## API - -| Component | Description | -| - | - | -| [v-app](/api/v-app/) | Primary Component | -| [v-main](/api/v-main/) | Content area | - - - -### Layout components - -The following components are compatible with the [Application layout](/features/application-layout/) system: - -| Component | Default location | Default orientation | Description | -| - | :-: | :-: | - | -| [v-system-bar](/api/v-system-bar/) | top | horizontal | Used to simulate the system bar on phones and desktop applications | -| [v-app-bar](/api/v-app-bar/) | top | horizontal | Top level application actions and navigation links | -| [v-navigation-drawer](/api/v-navigation-drawer/) | start | vertical | The primary component used for application navigation | -| [v-footer](/api/v-footer/) | bottom | horizontal | The only application component that is not bound to the current layout by default. Must explicitly specify the **app** prop | -| [v-bottom-navigation](/api/v-bottom-navigation/) | bottom | horizontal | This component is often used as a replacement for application actions and navigation links on mobile and tablet devices | - -
- - - -::: info - More information on how to interact with the root sizing and styling is on the [Application](/features/application-layout/) page. -::: + diff --git a/packages/docs/src/pages/en/components/avatars.md b/packages/docs/src/pages/en/components/avatars.md index 569638bd63e..60a41608999 100644 --- a/packages/docs/src/pages/en/components/avatars.md +++ b/packages/docs/src/pages/en/components/avatars.md @@ -41,7 +41,7 @@ Avatars in their simplest form display content within a circular container. The recommended placement of elements inside of `v-avatar` is: -* Place a [v-img](/components/images/) or [v-icon](/components/images/) component within the default *slot* +* Place a [v-img](/components/images/) or [v-icon](/components/icons/) component within the default *slot* * Place textual content within the default *slot* ![Avatar Anatomy](https://cdn.vuetifyjs.com/docs/images/components-temp/v-avatar/v-avatar-anatomy.png) diff --git a/packages/docs/src/pages/en/components/checkboxes.md b/packages/docs/src/pages/en/components/checkboxes.md index 744d1a29c29..0f7a3048b35 100644 --- a/packages/docs/src/pages/en/components/checkboxes.md +++ b/packages/docs/src/pages/en/components/checkboxes.md @@ -31,7 +31,7 @@ A `v-checkbox` in its simplest form provides a toggle between 2 values. ::: tip -A simpler version, `v-simple-checkbox` is used primarily as a lightweight alternative in data-table components to select rows or display inline boolean data. +A simpler version, [`v-checkbox-btn`](/components/data-tables/basics/#simple-checkbox) is used primarily as a lightweight alternative in data-table components to select rows or display inline boolean data. ::: diff --git a/packages/docs/src/pages/en/components/data-tables/basics.md b/packages/docs/src/pages/en/components/data-tables/basics.md index 615f7619ca5..b7d4cc19a87 100644 --- a/packages/docs/src/pages/en/components/data-tables/basics.md +++ b/packages/docs/src/pages/en/components/data-tables/basics.md @@ -34,7 +34,8 @@ The standard data table presumes that the entire data set is available locally. | Component | Description | | - | - | | [v-data-table](/api/v-data-table/) | Primary Component | -| [v-data-table-footer](/api/v-data-table-footer/) | Functional Component used to display Data-table headers | +| [v-data-table-headers](/api/v-data-table-headers/) | Functional Component used to display Data-table headers | +| [v-data-table-footer](/api/v-data-table-footer/) | Functional Component used to display Data-table footers | | [v-checkbox-btn](/api/v-checkbox-btn/) | Reusable lightweight [v-checkbox](/components/checkboxes) | @@ -140,11 +141,11 @@ The `v-data-table` renders a default footer using the `v-data-footer` component. --> - + #### Selection diff --git a/packages/docs/src/pages/en/components/data-tables/data-and-display.md b/packages/docs/src/pages/en/components/data-tables/data-and-display.md index b76e817ea9e..4f024946ad1 100644 --- a/packages/docs/src/pages/en/components/data-tables/data-and-display.md +++ b/packages/docs/src/pages/en/components/data-tables/data-and-display.md @@ -80,6 +80,12 @@ Use the **item-selectable** prop to designate a property on your items that cont +### Custom select column + +Use the **item.data-table-select** slot alongside `v-checkbox-btn` to customize the checkbox used for row selection. You can also use the **header.data-table-select** slot to customize the select-all checkbox in the header of the column. + + + ### Select strategies Data-tables support three different select strategies. diff --git a/packages/docs/src/pages/en/components/sparklines.md b/packages/docs/src/pages/en/components/sparklines.md index dce852fa122..693c8e3a0af 100644 --- a/packages/docs/src/pages/en/components/sparklines.md +++ b/packages/docs/src/pages/en/components/sparklines.md @@ -71,9 +71,3 @@ The `v-sparkline` component pairs nicely with `v-card` and `v-sheet` to create c For concise information, a complete chart might be overkill. Using a trend line with gradient provides enough detail for the user without showing too much information. - -#### Dashboard cards - -The `v-sparkline` component can be used to create a variety of different cards for a dashboard. Here we show a few examples of how it can be used to display different types of data. - - diff --git a/packages/docs/src/pages/en/components/steppers.md b/packages/docs/src/pages/en/components/steppers.md index 8c567dd420a..c5cc8c3dd85 100644 --- a/packages/docs/src/pages/en/components/steppers.md +++ b/packages/docs/src/pages/en/components/steppers.md @@ -38,7 +38,7 @@ A stepper can be used for a multitude of scenarios, including shopping carts, re ::: warning -Due to the massive differences in display and functionality between horizontal and vertical steppers, the **vertical** property is moving to a new component `v-stepper-vertical`. +Due to the massive differences in display and functionality between horizontal and vertical steppers, the **vertical** property is moving to a new component [v-stepper-vertical](/components/vertical-steppers/). ::: diff --git a/packages/docs/src/pages/en/components/tables.md b/packages/docs/src/pages/en/components/tables.md index b126d64c9f7..f760e48d50b 100644 --- a/packages/docs/src/pages/en/components/tables.md +++ b/packages/docs/src/pages/en/components/tables.md @@ -20,7 +20,7 @@ features: The simpler of the table components is `v-table`, a basic wrapper component for the HTML `` element. In addition, regular table elements such as ``, ``, ``, and `
` work by default. ::: info -More advanced tables such as [v-data-table](/components/data-tables/basics/) are available for preview in [Vuetify Labs](/labs/introduction/). +More advanced tables such as [v-data-table](/components/data-tables/basics/) are available. ::: diff --git a/packages/docs/src/pages/en/components/treeview.md b/packages/docs/src/pages/en/components/treeview.md index fb3c132a28c..664e700c1d9 100644 --- a/packages/docs/src/pages/en/components/treeview.md +++ b/packages/docs/src/pages/en/components/treeview.md @@ -86,11 +86,11 @@ Treeview nodes can have a hover effect. --> -#### Item disabled +#### Item props -Setting **item-disabled** prop allows to control which node's property disables the node when set to `true`. +If **item-props** is set to `true` then the whole item will be spread. In the following example, the disabled prop defined in each item will disable the item accordingly. - + #### Load children diff --git a/packages/docs/src/pages/en/components/vertical-steppers.md b/packages/docs/src/pages/en/components/vertical-steppers.md new file mode 100644 index 00000000000..39d5aa4d5b1 --- /dev/null +++ b/packages/docs/src/pages/en/components/vertical-steppers.md @@ -0,0 +1,70 @@ +--- +emphasized: true +meta: + nav: Steppers Vertical + title: Vertical Stepper component + description: The vertical stepper component is a navigation element that guides users through a sequence of steps. + keywords: vertical stepper, vuetify vertical stepper component, vue vertical stepper component +related: + - /components/buttons/ + - /components/icons/ + - /styles/transitions/ +features: + report: true +--- + +# Vertical Steppers + +The `v-stepper-vertical` component can be used as a navigation element that guides users through a sequence of steps. + + + +::: warning + +This feature requires [v3.6.5](/getting-started/release-notes/?version=v3.6.5) + +::: + +## Installation + +Labs components require a manual import and installation of the component. + +```js { resource="src/plugins/vuetify.js" } +import { VStepperVertical } from 'vuetify/labs/VStepperVertical' + +export default createVuetify({ + components: { + VStepperVertical, + }, +}) +``` + +## Usage + +Vertical steppers allow users to complete a series of actions in step order. + + + + + +## API + +| Component | Description | +| - | - | +| [v-stepper-vertical](/api/v-stepper-vertical/) | Primary Component | + + + +### Guide + +The `v-stepper-vertical` is the vertical variant of the [v-stepper](/components/steppers/) component. It also extends functionality of [v-expansion-panels](/components/expansion-panels/). + +#### Slots + +The `v-stepper-vertical` component has several slots for customization. + +##### Actions + +Customize the flow of your stepper by hooking into the available **prev** and **next** slots. + + diff --git a/packages/docs/src/pages/en/features/accessibility.md b/packages/docs/src/pages/en/features/accessibility.md index 662c7a01c3b..c16ffa843ac 100644 --- a/packages/docs/src/pages/en/features/accessibility.md +++ b/packages/docs/src/pages/en/features/accessibility.md @@ -7,6 +7,8 @@ related: - /features/internationalization/ - /components/menus/ - /components/lists/ +features: + report: true --- # Accessibility (a11y) diff --git a/packages/docs/src/pages/en/features/aliasing.md b/packages/docs/src/pages/en/features/aliasing.md index 01cf5abf6ba..f072e212c71 100644 --- a/packages/docs/src/pages/en/features/aliasing.md +++ b/packages/docs/src/pages/en/features/aliasing.md @@ -7,6 +7,8 @@ related: - /features/blueprints/ - /features/global-configuration/ - /features/treeshaking/ +features: + report: true --- # Aliasing & virtual components diff --git a/packages/docs/src/pages/en/features/application-layout.md b/packages/docs/src/pages/en/features/application-layout.md index 4bf81021444..0cd6236b3dd 100644 --- a/packages/docs/src/pages/en/features/application-layout.md +++ b/packages/docs/src/pages/en/features/application-layout.md @@ -7,6 +7,8 @@ related: - /components/app-bars/ - /components/navigation-drawers/ - /components/footers/ +features: + report: true --- # Application layout diff --git a/packages/docs/src/pages/en/features/blueprints.md b/packages/docs/src/pages/en/features/blueprints.md index edddf1f8ab6..b21f855a845 100644 --- a/packages/docs/src/pages/en/features/blueprints.md +++ b/packages/docs/src/pages/en/features/blueprints.md @@ -7,6 +7,8 @@ related: - /features/global-configuration/ - /features/theme/ - /features/display-and-platform/ +features: + report: true --- # Blueprints @@ -42,6 +44,12 @@ While Vuetify is built under the guise of Google's [Material Design](https://mat | [Material Design 2](#material-design-2) | 2017 | ✅ Available | [Specification](https://m2.material.io) | | [Material Design 3](#material-design-3) | 2022 | ✅ Available | [Specification](https://m3.material.io) | +::: error + +Blueprints require the use of utility classes to properly function. + +::: + ### Material Design 1 Released in 2014, the original Material Design specification aimed to create a visual language that combined principles and good design with technical and scientific innovation. diff --git a/packages/docs/src/pages/en/features/display-and-platform.md b/packages/docs/src/pages/en/features/display-and-platform.md index f66e895086a..ac247142438 100644 --- a/packages/docs/src/pages/en/features/display-and-platform.md +++ b/packages/docs/src/pages/en/features/display-and-platform.md @@ -7,6 +7,8 @@ related: - /directives/resize/ - /styles/display/ - /styles/text-and-typography/ +features: + report: true --- # Display & Platform diff --git a/packages/docs/src/pages/en/features/global-configuration.md b/packages/docs/src/pages/en/features/global-configuration.md index b286dca6c8f..2a8c3c4b8f1 100644 --- a/packages/docs/src/pages/en/features/global-configuration.md +++ b/packages/docs/src/pages/en/features/global-configuration.md @@ -7,6 +7,8 @@ related: - /features/accessibility/ - /features/treeshaking/ - /features/blueprints/ +features: + report: true --- # Global configuration diff --git a/packages/docs/src/pages/en/features/icon-fonts.md b/packages/docs/src/pages/en/features/icon-fonts.md index 8824912cfbb..c1cf2fd6f9c 100644 --- a/packages/docs/src/pages/en/features/icon-fonts.md +++ b/packages/docs/src/pages/en/features/icon-fonts.md @@ -7,6 +7,8 @@ related: - /components/icons - /components/buttons - /components/avatars +features: + report: true --- # Icon Fonts diff --git a/packages/docs/src/pages/en/features/internationalization.md b/packages/docs/src/pages/en/features/internationalization.md index 57b753d8b8c..37e4ff24105 100644 --- a/packages/docs/src/pages/en/features/internationalization.md +++ b/packages/docs/src/pages/en/features/internationalization.md @@ -7,6 +7,8 @@ related: - /features/accessibility/ - /components/locale-providers/ - /getting-started/browser-support/ +features: + report: true --- # Internationalization (i18n) diff --git a/packages/docs/src/pages/en/features/sass-variables.md b/packages/docs/src/pages/en/features/sass-variables.md index 0a6e7617536..bc68b50c121 100644 --- a/packages/docs/src/pages/en/features/sass-variables.md +++ b/packages/docs/src/pages/en/features/sass-variables.md @@ -7,6 +7,8 @@ related: - /styles/colors/ - /features/theme/ - /features/treeshaking/ +features: + report: true --- # SASS variables diff --git a/packages/docs/src/pages/en/features/theme.md b/packages/docs/src/pages/en/features/theme.md index ce3aee9e81b..fd24610f66f 100644 --- a/packages/docs/src/pages/en/features/theme.md +++ b/packages/docs/src/pages/en/features/theme.md @@ -7,6 +7,8 @@ related: - /styles/colors/ - /styles/transitions/ - /getting-started/wireframes/ +features: + report: true --- # Theme configuration @@ -165,7 +167,7 @@ import { useTheme } from 'vuetify' const theme = useTheme() function toggleTheme () { - theme.global.name = theme.global.current.dark ? 'light' : 'dark' + theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark' } ``` diff --git a/packages/docs/src/pages/en/features/treeshaking.md b/packages/docs/src/pages/en/features/treeshaking.md index 77a6e18e9f7..85d722053d1 100644 --- a/packages/docs/src/pages/en/features/treeshaking.md +++ b/packages/docs/src/pages/en/features/treeshaking.md @@ -7,6 +7,8 @@ related: - /features/sass-variables/ - /features/blueprints/ - /introduction/why-vuetify/ +features: + report: true --- # Treeshaking diff --git a/packages/docs/src/pages/en/getting-started/frequently-asked-questions.md b/packages/docs/src/pages/en/getting-started/frequently-asked-questions.md index 0b41d3c1b9c..36c6ac88a46 100644 --- a/packages/docs/src/pages/en/getting-started/frequently-asked-questions.md +++ b/packages/docs/src/pages/en/getting-started/frequently-asked-questions.md @@ -99,6 +99,10 @@ The following responses are a collection of common questions asked by the Vuetif * **Is Vuetify 3 compatible with `@vue/compat`?** - No. If this changes in the future, we will update this FAQ and make a public notification. + Not directly, you have to set `configureCompat({ MODE: 3 })` globally and `MODE: 2` in each of your components that you want to run in compatibility mode. There will still be some incorrect warnings that can be ignored with the `-ATTR_FALSE_VALUE` filter in devtools. + +* **Why don't elements exist in the DOM yet in `onMounted()`?** ([#19736](https://github.com/vuetifyjs/vuetify/issues/19736)) + + Some vuetify components are asynchronous, so there is no guarantee that their children will be mounted immediately. Either wait for the target element itself to be mounted with `v-on:vue:mounted` or use `onMounted` in a separate component that only has plain elements between the `