diff --git a/lerna.json b/lerna.json index b3ae1a6e7b6..d731f79c2b7 100644 --- a/lerna.json +++ b/lerna.json @@ -13,6 +13,6 @@ } }, "npmClient": "yarn", - "version": "3.5.17", + "version": "3.6.3", "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 8e47c036e75..113dae776c2 100755 --- a/packages/api-generator/package.json +++ b/packages/api-generator/package.json @@ -1,6 +1,6 @@ { "name": "@vuetify/api-generator", - "version": "3.5.17", + "version": "3.6.3", "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.5.17" + "vue": "^3.4.27", + "vuetify": "^3.6.3" }, "devDependencies": { "@types/stringify-object": "^4.0.5" diff --git a/packages/api-generator/src/locale/en/VBtn.json b/packages/api-generator/src/locale/en/VBtn.json index 4b1b7db3bf8..196ab42b0ec 100644 --- a/packages/api-generator/src/locale/en/VBtn.json +++ b/packages/api-generator/src/locale/en/VBtn.json @@ -4,6 +4,7 @@ "flat": "Removes the button box shadow. This is different than using the 'flat' variant.", "icon": "Apply a specific icon using the [v-icon](/components/icons/) component. The button will become _round_.", "plain": "Removes the default background change applied when hovering over the button.", + "readonly": "Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard.", "stacked": "Displays the button as a flex-column.", "slim": "Reduces padding to 0 8px." }, diff --git a/packages/api-generator/src/locale/en/VDataTable.json b/packages/api-generator/src/locale/en/VDataTable.json index 22501b3e7c3..96c8ef0c5db 100644 --- a/packages/api-generator/src/locale/en/VDataTable.json +++ b/packages/api-generator/src/locale/en/VDataTable.json @@ -23,7 +23,6 @@ "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.", "locale": "Sets the locale used for sorting. This is passed into [`Intl.Collator()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator) in the default `customSort` function.", - "mobileBreakpoint": "Used to set when to toggle between regular table and mobile view.", "multiSort": "If `true` then one can sort on multiple properties.", "mustSort": "If `true` then one can not disable sorting, it will always switch between ascending and descending.", "page": "The current displayed page number (1-indexed).", diff --git a/packages/api-generator/src/locale/en/VDatePickerMonth.json b/packages/api-generator/src/locale/en/VDatePickerMonth.json new file mode 100644 index 00000000000..e7697b78d2b --- /dev/null +++ b/packages/api-generator/src/locale/en/VDatePickerMonth.json @@ -0,0 +1,7 @@ +{ + "props": { + "hideWeekdays": "Hide the days of the week letters.", + "transition": "The transition used when changing months into the future", + "reverseTransition": "The transition used when changing months into the past" + } +} diff --git a/packages/api-generator/src/locale/en/VImg.json b/packages/api-generator/src/locale/en/VImg.json index e77a05fcaa9..30af575e029 100644 --- a/packages/api-generator/src/locale/en/VImg.json +++ b/packages/api-generator/src/locale/en/VImg.json @@ -4,7 +4,7 @@ "aspectRatio": "Calculated as `width/height`, so for a 1920x1080px image this will be `1.7778`. Will be calculated automatically if omitted.", "cover": "Resizes the background image to cover the entire container.", "draggable": "Controls the `draggable` behavior of the image. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable).", - "lazySrc": "Something to show while waiting for the main image to load, typically a small base64-encoded thumbnail. Has a slight blur filter applied.\n\nUse [vuetify-loader](https://github.com/vuetifyjs/vuetify-loader) to generate automatically. NOTE: This prop has no effect unless either `height` or `aspect-ratio` are provided.", + "lazySrc": "Something to show while waiting for the main image to load, typically a small base64-encoded thumbnail. Has a slight blur filter applied. \nNOTE: This prop has no effect unless either `height` or `aspect-ratio` are provided.", "crossorigin": "Specify that images should be fetched with CORS enabled [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#crossorigin)", "position": "Applies [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) styles to the image and placeholder elements.", "referrerpolicy": "Define which referrer is sent when fetching the resource [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy)", diff --git a/packages/api-generator/src/locale/en/VPicker.json b/packages/api-generator/src/locale/en/VPicker.json new file mode 100644 index 00000000000..0e720d6074f --- /dev/null +++ b/packages/api-generator/src/locale/en/VPicker.json @@ -0,0 +1,6 @@ +{ + "props": { + "landscape": "Puts the picker into landscape mode.", + "hideHeader": "Hide the picker header." + } +} diff --git a/packages/api-generator/src/locale/en/VProgressLinear.json b/packages/api-generator/src/locale/en/VProgressLinear.json index fa54196b6d4..07f0f123590 100644 --- a/packages/api-generator/src/locale/en/VProgressLinear.json +++ b/packages/api-generator/src/locale/en/VProgressLinear.json @@ -4,10 +4,13 @@ "active": "Reduce the height to 0, hiding component.", "bgOpacity": "Background opacity, if null it defaults to 0.3 if background color is not specified or 1 otherwise.", "bottom": "Aligns the component towards the bottom.", + "bufferColor": "Sets the color of the buffer bar.", + "bufferOpacity": "Set the opacity of the buffer bar.", "bufferValue": "The percentage value for the buffer.", "clickable": "Clicking on the progress track will automatically set the value.", "indeterminate": "Constantly animates, use when loading progress is unknown.", "max": "Sets the maximum value the progress can reach.", + "opacity": "Set the opacity of the progress bar.", "reverse": "Displays reversed progress (right to left in LTR mode and left to right in RTL).", "roundedBar": "Applies a border radius to the progress bar.", "stream": "An alternative style for portraying loading that works in tandem with **buffer-value**.", diff --git a/packages/api-generator/src/locale/en/calendar.json b/packages/api-generator/src/locale/en/calendar.json new file mode 100644 index 00000000000..e96908554f0 --- /dev/null +++ b/packages/api-generator/src/locale/en/calendar.json @@ -0,0 +1,9 @@ +{ + "props": { + "displayValue": "The value that determines the month to show. This is different from modelValue, which determines the selected value.", + "month": "The current month number to show", + "weekdays": "An array of weekdays to display.", + "weeksInMonth": "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.", + "year": "The current year number to show" + } +} diff --git a/packages/api-generator/src/locale/en/display.json b/packages/api-generator/src/locale/en/display.json index b60f4b1ce3f..22b1639681f 100644 --- a/packages/api-generator/src/locale/en/display.json +++ b/packages/api-generator/src/locale/en/display.json @@ -1,5 +1,6 @@ { "props": { - "mobileBreakpoint": "Sets the designated mobile breakpoint for the component." + "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/locale/en/generic.json b/packages/api-generator/src/locale/en/generic.json index 83ac1671c82..7eaf6c89242 100644 --- a/packages/api-generator/src/locale/en/generic.json +++ b/packages/api-generator/src/locale/en/generic.json @@ -37,6 +37,7 @@ "modelValue": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.", "name": "Sets the component's name attribute.", "noDataText": "Text shown when no items are provided to the component.", + "opacity": "Sets the component's opacity value", "origin": "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).", "persistent": "Clicking outside or pressing **esc** key will not dismiss the dialog.", "persistentCounter": "Forces counter to always be visible.", diff --git a/packages/api-generator/src/locale/en/v-click-outside.json b/packages/api-generator/src/locale/en/v-click-outside.json index 4ad298e984b..c497b88056c 100644 --- a/packages/api-generator/src/locale/en/v-click-outside.json +++ b/packages/api-generator/src/locale/en/v-click-outside.json @@ -1,5 +1,3 @@ { - "argument": { - "value": "By default takes a function that is invoked when user clicks outside of the element the directive is attached to. It can also be an object, which allows you to provide `closeConditional` and `include` callbacks." - } + "value": "Takes either a function that is invoked when user clicks outside of the element the directive is attached to, or an object containing `handler`, `closeConditional` and `include` callbacks." } diff --git a/packages/api-generator/src/locale/en/v-intersect.json b/packages/api-generator/src/locale/en/v-intersect.json index 3f8323b59bc..cfcc797ad29 100644 --- a/packages/api-generator/src/locale/en/v-intersect.json +++ b/packages/api-generator/src/locale/en/v-intersect.json @@ -1,9 +1,7 @@ { - "argument": { - "value": "By default takes a handler function that is invoked when the element that the directive is attached to enters or leaves the visible browser area. It can also take an object, which allows you to pass along [IntersectionObserver options](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver)." - }, + "value": "A handler function that is invoked when the element that the directive is attached to enters or leaves the visible browser area, or an object of [IntersectionObserver options](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver).", "modifiers": { - "once": "The provided handler function is only invoked once, the first time the element is visible.", + "once": "The handler function is only invoked once, the first time the element is visible.", "quiet": "Will not invoke the handler function if the element is visible when the IntersectionObserver is created." } } diff --git a/packages/api-generator/src/locale/en/v-mutate.json b/packages/api-generator/src/locale/en/v-mutate.json index 14ccab50ff3..35cdb4c1d65 100644 --- a/packages/api-generator/src/locale/en/v-mutate.json +++ b/packages/api-generator/src/locale/en/v-mutate.json @@ -1,7 +1,5 @@ { - "argument": { - "value": "By default takes a handler function that is invoked when the element that the directive is attached to is mutated. It can also take an object, which allows you to pass along [MutationObserver options](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe)." - }, + "value": "A handler function that is invoked when the element that the directive is attached to is mutated, or an object of [MutationObserver options](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe).", "modifiers": { "attr": "Sets the value of [attributes](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/attributes) to true.", "char": "Sets the value of [characterData](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/characterData) to true.", diff --git a/packages/api-generator/src/locale/en/v-resize.json b/packages/api-generator/src/locale/en/v-resize.json index cf1e2cbfc47..74617b6ab0a 100644 --- a/packages/api-generator/src/locale/en/v-resize.json +++ b/packages/api-generator/src/locale/en/v-resize.json @@ -1,9 +1,7 @@ { - "argument": { - "value": "The provided handler function will be invoked each time the browser window is resized." - }, + "value": "A function that will be invoked each time the browser window is resized.", "modifiers": { "active": "By default the resize event listener is added to window with the `passive` option. This modifier sets `passive` to **false**.", - "quiet": "By default the provided handler function is invoked once when the directive is attached to the element. This modifier disabled that behavior." + "quiet": "By default the provided handler function is invoked once when the directive is attached to the element. This modifier disables that behavior." } } diff --git a/packages/api-generator/src/locale/en/v-ripple.json b/packages/api-generator/src/locale/en/v-ripple.json index a2bc46b706c..dc62d082184 100644 --- a/packages/api-generator/src/locale/en/v-ripple.json +++ b/packages/api-generator/src/locale/en/v-ripple.json @@ -1,7 +1,5 @@ { - "argument": { - "value": "An object containing options for the ripple effect. `class` applies a custom class to the ripple, and can be used for changing color. `center` forces the ripple to originate from the center of the target." - }, + "value": "An object containing options for the ripple effect. `class` applies a custom class to the ripple, and can be used for changing color. `center` forces the ripple to originate from the center of the target instead of the cursor position.", "modifiers": { "center": "Makes it so that the ripple originates from the center of the element, instead where the user clicked on it.", "circle": "Changes the ripple behavior to better match circular elements.", diff --git a/packages/api-generator/src/locale/en/v-scroll.json b/packages/api-generator/src/locale/en/v-scroll.json index 53c15a46610..408d0cff9a2 100644 --- a/packages/api-generator/src/locale/en/v-scroll.json +++ b/packages/api-generator/src/locale/en/v-scroll.json @@ -1,8 +1,6 @@ { - "argument": { - "arg": "The argument can be used to specify a query selector to attach the scroll event listener to. If no argument is provided then it is attached to the window object.", - "value": "By default takes a handler function that is invoked whenever the target of the directive is scrolled. It can also take an object, which allows you to pass along event listener options as described [here](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)." - }, + "argument": "Specify a query selector to attach the scroll event listener to. If no argument is provided then it is attached to the window object.", + "value": "A handler function that is invoked whenever the target element is scrolled, or an object of [event listener options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).", "modifiers": { "self": "By default the scroll event listener is attached to the argument provided to the directive, interpreted as a query selector. If no argument is provided then it is attached to the window object. If this modifier is used then it is instead attached to the element the directive is used on." } diff --git a/packages/api-generator/src/locale/en/v-tooltip.json b/packages/api-generator/src/locale/en/v-tooltip.json new file mode 100644 index 00000000000..2f4b2229614 --- /dev/null +++ b/packages/api-generator/src/locale/en/v-tooltip.json @@ -0,0 +1,4 @@ +{ + "argument": "Applies the VTooltip location prop.", + "value": "**string**: Sets the tooltip content. \n**boolean**: Controls visibility, tooltip content will be the innerText of the bound element. \n**object**: Use any [VTooltip props](/api/v-tooltip), content can be set with `text`. Keys are camelCase." +} diff --git a/packages/api-generator/src/locale/en/v-touch.json b/packages/api-generator/src/locale/en/v-touch.json index fc54d336092..58316fdb587 100644 --- a/packages/api-generator/src/locale/en/v-touch.json +++ b/packages/api-generator/src/locale/en/v-touch.json @@ -1,5 +1,3 @@ { - "argument": { - "value": "The value is always an object. The `start`, `end`, `move`, `left`, `right`, `up` and `down` functions can be used to invoke a function when the corresponding touch action occurs. If the `parent` option attaches the touch listeners to the parent element instead of the element the directive is used on. The `options` object is described [here](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)." - } + "value": "The value is always an object. The `start`, `end`, `move`, `left`, `right`, `up` and `down` functions can be used to invoke a function when the corresponding touch action occurs. If the `parent` option attaches the touch listeners to the parent element instead of the element the directive is used on. The `options` object is described [here](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)." } diff --git a/packages/api-generator/src/shims.d.ts b/packages/api-generator/src/shims.d.ts index 4c34c60a035..da9265cb539 100644 --- a/packages/api-generator/src/shims.d.ts +++ b/packages/api-generator/src/shims.d.ts @@ -1,4 +1,4 @@ -import { ts } from '@ts-morph/common' +import '@ts-morph/common' declare module 'ts-morph' { export interface Type { @@ -18,3 +18,5 @@ declare module 'ts-morph' { } } } + +export {} diff --git a/packages/api-generator/src/types.ts b/packages/api-generator/src/types.ts index 998b7b83481..0f14e001888 100644 --- a/packages/api-generator/src/types.ts +++ b/packages/api-generator/src/types.ts @@ -81,7 +81,8 @@ export async function generateDirectiveDataFromTypes (): Promise { const sourceFile = project.addSourceFileAtPath(`./templates/tmp/${component}.d.ts`) - const props = await inspect(project, sourceFile.getTypeAlias('ComponentProps')) - const events = await inspect(project, sourceFile.getTypeAlias('ComponentEvents')) - const slots = await inspect(project, sourceFile.getTypeAlias('ComponentSlots')) - const exposed = await inspect(project, sourceFile.getTypeAlias('ComponentExposed')) + const [ + props, + events, + slots, + exposed, + ] = await Promise.all([ + inspect(project, sourceFile.getTypeAlias('ComponentProps')), + inspect(project, sourceFile.getTypeAlias('ComponentEvents')), + inspect(project, sourceFile.getTypeAlias('ComponentSlots')), + inspect(project, sourceFile.getTypeAlias('ComponentExposed')), + ]) const sections = [props, events, slots, exposed] @@ -114,6 +122,10 @@ export async function generateComponentDataFromTypes (component: string): Promis events: events.properties, slots: slots.properties, exposed: exposed.properties, + displayName: component, + fileName: component, + pathName: kebabCase(component), + sass: {}, } } @@ -217,6 +229,7 @@ export type ComponentData = BaseData & { slots: Record events: Record exposed: Record + value?: never argument?: never modifiers?: never } @@ -226,7 +239,8 @@ export type DirectiveData = BaseData & { slots?: never events?: never exposed?: never - argument: { value: Definition } + value: Definition + argument: Definition modifiers: Record } export type ComposableData = BaseData & { @@ -235,6 +249,7 @@ export type ComposableData = BaseData & { slots?: never events?: never exposed: Record + value?: never argument?: never modifiers?: never } @@ -268,21 +283,21 @@ function getSource (declaration?: Node) { return filePath && startLine ? `${filePath}#L${startLine}-L${endLine}` : undefined } -function listFlags (flags: object, value?: number) { - if (!value) return [] +// function listFlags (flags: object, value?: number) { +// if (!value) return [] - const entries = Object.entries(flags).filter(([_, flag]) => typeof flag === 'number') +// const entries = Object.entries(flags).filter(([_, flag]) => typeof flag === 'number') - return entries.reduce((arr, [name, flag]) => { - if (value & flag) { - arr.push(name) - } - return arr - }, []) -} +// return entries.reduce((arr, [name, flag]) => { +// if (value & flag) { +// arr.push(name) +// } +// return arr +// }, []) +// } function getCleanText (text: string) { - return text.replaceAll(/import\(.*?\)\./g, '') + return text.replace(/import\(.*?\)\./g, '') } function count (arr: string[], needle: string) { @@ -294,6 +309,7 @@ function count (arr: string[], needle: string) { // Types that are displayed as links const allowedRefs = [ 'Anchor', + 'ActiveStrategy', 'DataIteratorItem', 'DataTableHeader', 'DataTableItem', @@ -304,12 +320,15 @@ const allowedRefs = [ 'ListItem', 'LocationStrategyFn', 'OpenSelectStrategyFn', + 'OpenStrategy', 'OpenStrategyFn', 'ScrollStrategyFn', 'SelectItemKey', + 'SelectStrategy', 'SelectStrategyFn', 'SortItem', 'SubmitEventPromise', + 'TemplateRef', 'TouchHandlers', 'ValidationRule', ] @@ -607,7 +626,7 @@ function getRecursiveTypes (recursiveTypes: string[], type: Type) { function findPotentialRecursiveTypes (type?: Type): string[] { if (type == null) return [] - const recursiveTypes = [] + const recursiveTypes: string[] = [] if (type.isUnion()) { recursiveTypes.push(...getUnionTypes(type).map(t => t.getText())) diff --git a/packages/api-generator/src/utils.ts b/packages/api-generator/src/utils.ts index 66ee2f0450d..b575f215039 100644 --- a/packages/api-generator/src/utils.ts +++ b/packages/api-generator/src/utils.ts @@ -2,7 +2,7 @@ import { execSync } from 'child_process' import stringifyObject from 'stringify-object' import prettier from 'prettier' import * as typescriptParser from 'prettier/plugins/typescript' -import type { Definition } from './types' +import type { Definition, DirectiveData } from './types' function parseFunctionParams (func: string) { const [, regular] = /function\s\((.*)\)\s\{.*/i.exec(func) || [] @@ -134,10 +134,12 @@ async function getSources (name: string, locale: string, sources: string[]) { const sourcesMap = [name, ...sources, 'generic'] return { - find: (section: string, key: string, ogSource = name) => { + find (section: string, key?: string, ogSource = name) { for (let i = 0; i < arr.length; i++) { const source = arr[i] as any - const found: string | undefined = source?.[section]?.[key] + const found: string | undefined = ['argument', 'value'].includes(section) + ? source?.[section] + : source?.[section]?.[key!] if (found) { return { text: found, source: sourcesMap[i] } } @@ -167,25 +169,26 @@ export async function addDescriptions (name: string, componentData: ComponentDat export async function addDirectiveDescriptions ( name: string, - componentData: { argument: { value: Definition }, modifiers: Record }, + componentData: DirectiveData, locales: string[], sources: string[] = [], ) { for (const locale of locales) { const descriptions = await getSources(name, locale, sources) - if (componentData.argument) { - for (const [name, arg] of Object.entries(componentData.argument)) { - arg.description = arg.description ?? {} + if (componentData.value) { + componentData.value.description = componentData.value.description ?? {} + componentData.value.description[locale] = descriptions.find('value')?.text + } - arg.description[locale] = descriptions.find('argument', name)?.text - } + if (componentData.argument) { + componentData.argument.description = componentData.argument.description ?? {} + componentData.argument.description[locale] = descriptions.find('argument')?.text } if (componentData.modifiers) { for (const [name, modifier] of Object.entries(componentData.modifiers)) { modifier.description = modifier.description ?? {} - modifier.description[locale] = descriptions.find('modifiers', name)?.text } } diff --git a/packages/api-generator/src/web-types.ts b/packages/api-generator/src/web-types.ts index 2303e7a2271..e2cc530afb7 100644 --- a/packages/api-generator/src/web-types.ts +++ b/packages/api-generator/src/web-types.ts @@ -95,7 +95,7 @@ export const createWebTypesApi = (componentData: ComponentData[], directiveData: const createAttributeValue = (argument: any) => { return { kind: 'expression', - type: argument.type?.trim(), + type: argument.text, } } @@ -106,14 +106,14 @@ export const createWebTypesApi = (componentData: ComponentData[], directiveData: 'doc-url': getDocUrl(directive.pathName), default: '', required: false, - value: createAttributeValue(directive.argument), + value: createAttributeValue(directive.value), source: { module: './src/directives/index.ts', symbol: capitalize(directive.displayName.slice(2)), }, - 'vue-argument': directive.argument?.value && createAttributeVueArgument(directive.argument?.value), // TODO: how to use this in comparison to value? + 'vue-argument': directive.argument && createAttributeVueArgument(directive.argument), 'vue-modifiers': directive.modifiers && - Object.entries(directive.modifiers ?? {}).map(createAttributeVueModifier), + Object.entries(directive.modifiers).map(createAttributeVueModifier), } } diff --git a/packages/api-generator/templates/directives.d.ts b/packages/api-generator/templates/directives.d.ts index 94eb580b2a5..06211c10b29 100644 --- a/packages/api-generator/templates/directives.d.ts +++ b/packages/api-generator/templates/directives.d.ts @@ -1,17 +1,30 @@ -import type { DirectiveBinding } from 'vue' -import type * as directives from '../../vuetify/lib/directives/index.d.mts' +import type { DirectiveBinding, ObjectDirective } from 'vue' +import type { CustomDirective } from '../../vuetify/src/composables/directiveComponent' +import type * as directives from '../../vuetify/src/directives/index.ts' type ExtractDirectiveBindings = T extends object ? { - [K in keyof T]: T[K] extends { mounted: infer M } - ? M extends (first: any, second: infer B) => any - ? B extends object - ? { - [KK in keyof B as KK extends keyof Omit ? never : KK]: B[KK] - } + [K in keyof T]: T[K] extends CustomDirective + ? { + [K in Exclude]: K extends 'modifiers' + ? Record extends M[K] ? never : M[K] + : K extends 'arg' + ? string extends M[K] ? never : M[K] + : M[K] + } & {} + : T[K] extends { mounted: infer M } + ? M extends (first: any, second: infer B) => any + ? B extends object + ? { + [KK in keyof B as KK extends keyof Omit ? never : KK]: B[KK] + } + : never + : never + : T[K] extends ObjectDirective + ? B extends object + ? { value: B, modifiers: {} } + : never : never - : never - : {} } : never diff --git a/packages/docs/auto-imports.d.ts b/packages/docs/auto-imports.d.ts index 0d3ec60e412..15cb2c8530e 100644 --- a/packages/docs/auto-imports.d.ts +++ b/packages/docs/auto-imports.d.ts @@ -77,6 +77,7 @@ declare global { const usePlayground: typeof import('./src/composables/playground')['usePlayground'] const useProductsStore: typeof import('@vuetify/one')['useProductsStore'] const usePromotionsStore: typeof import('./src/stores/promotions')['usePromotionsStore'] + const useQueueStore: typeof import('@vuetify/one')['useQueueStore'] const useReleasesStore: typeof import('./src/stores/releases')['useReleasesStore'] const useRoute: typeof import('vue-router')['useRoute'] const useRouter: typeof import('vue-router')['useRouter'] @@ -168,6 +169,7 @@ declare module 'vue' { readonly usePlayground: UnwrapRef readonly useProductsStore: UnwrapRef readonly usePromotionsStore: UnwrapRef + readonly useQueueStore: UnwrapRef readonly useReleasesStore: UnwrapRef readonly useRoute: UnwrapRef readonly useRouter: UnwrapRef @@ -258,6 +260,7 @@ declare module '@vue/runtime-core' { readonly usePlayground: UnwrapRef readonly useProductsStore: UnwrapRef readonly usePromotionsStore: UnwrapRef + readonly useQueueStore: UnwrapRef readonly useReleasesStore: UnwrapRef readonly useRoute: UnwrapRef readonly useRouter: UnwrapRef diff --git a/packages/docs/build/api-plugin.ts b/packages/docs/build/api-plugin.ts index 8da512afb60..60433356134 100644 --- a/packages/docs/build/api-plugin.ts +++ b/packages/docs/build/api-plugin.ts @@ -14,7 +14,7 @@ const API_PAGES_ROOT = resolve('./node_modules/.cache/api-pages') const require = createRequire(import.meta.url) -const sections = ['props', 'events', 'slots', 'exposed', 'sass', 'argument', 'modifiers'] as const +const sections = ['props', 'events', 'slots', 'exposed', 'sass', 'argument', 'modifiers', 'value'] as const // This can't be imported from the api-generator because it mixes the type definitions up type Data = { displayName: string // user visible name used in page titles diff --git a/packages/docs/components.d.ts b/packages/docs/components.d.ts index abf04edb7ee..f34eac93cda 100644 --- a/packages/docs/components.d.ts +++ b/packages/docs/components.d.ts @@ -11,6 +11,7 @@ declare module 'vue' { AboutTeamMembers: typeof import('./src/components/about/TeamMembers.vue')['default'] Alert: typeof import('./src/components/Alert.vue')['default'] ApiApiTable: typeof import('./src/components/api/ApiTable.vue')['default'] + ApiDirectiveTable: typeof import('./src/components/api/DirectiveTable.vue')['default'] ApiEventsTable: typeof import('./src/components/api/EventsTable.vue')['default'] ApiExposedTable: typeof import('./src/components/api/ExposedTable.vue')['default'] ApiInline: typeof import('./src/components/api/Inline.vue')['default'] diff --git a/packages/docs/package.json b/packages/docs/package.json index 57d655cad2d..2d39be53f3d 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.5.17", + "version": "3.6.3", "repository": { "type": "git", "url": "git+https://github.com/vuetifyjs/vuetify.git", @@ -23,8 +23,8 @@ "@cosmicjs/sdk": "^1.0.11", "@vuelidate/core": "^2.0.3", "@vuelidate/validators": "^2.0.4", - "@vuetify/one": "^1.7.2", - "algoliasearch": "^4.23.2", + "@vuetify/one": "^1.8.1", + "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.5.17" + "vuetify": "^3.6.3" }, "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.5.17", + "@vue/compiler-sfc": "^3.4.27", + "@vuetify/api-generator": "^3.6.3", "ajv": "^8.12.0", "async-es": "^3.2.5", "date-fns": "^3.6.0", diff --git a/packages/docs/src/components/api/DirectiveTable.vue b/packages/docs/src/components/api/DirectiveTable.vue new file mode 100644 index 00000000000..e749fbaf545 --- /dev/null +++ b/packages/docs/src/components/api/DirectiveTable.vue @@ -0,0 +1,32 @@ + + + diff --git a/packages/docs/src/components/api/Section.vue b/packages/docs/src/components/api/Section.vue index 558924c8668..f586345d7ac 100644 --- a/packages/docs/src/components/api/Section.vue +++ b/packages/docs/src/components/api/Section.vue @@ -15,6 +15,7 @@ diff --git a/packages/docs/src/examples/v-data-iterator/slot-loader.vue b/packages/docs/src/examples/v-data-iterator/slot-loader.vue new file mode 100644 index 00000000000..f846676a210 --- /dev/null +++ b/packages/docs/src/examples/v-data-iterator/slot-loader.vue @@ -0,0 +1,443 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-input/misc-passenger.vue b/packages/docs/src/examples/v-date-input/misc-passenger.vue new file mode 100644 index 00000000000..546a5207657 --- /dev/null +++ b/packages/docs/src/examples/v-date-input/misc-passenger.vue @@ -0,0 +1,53 @@ + diff --git a/packages/docs/src/examples/v-date-input/prop-model.vue b/packages/docs/src/examples/v-date-input/prop-model.vue new file mode 100644 index 00000000000..5123cc86bf6 --- /dev/null +++ b/packages/docs/src/examples/v-date-input/prop-model.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-input/prop-multiple-range.vue b/packages/docs/src/examples/v-date-input/prop-multiple-range.vue new file mode 100644 index 00000000000..db613aabd24 --- /dev/null +++ b/packages/docs/src/examples/v-date-input/prop-multiple-range.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-input/prop-multiple.vue b/packages/docs/src/examples/v-date-input/prop-multiple.vue new file mode 100644 index 00000000000..15202ef1eeb --- /dev/null +++ b/packages/docs/src/examples/v-date-input/prop-multiple.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-input/prop-prepend-icon.vue b/packages/docs/src/examples/v-date-input/prop-prepend-icon.vue new file mode 100644 index 00000000000..427c4be6487 --- /dev/null +++ b/packages/docs/src/examples/v-date-input/prop-prepend-icon.vue @@ -0,0 +1,22 @@ + diff --git a/packages/docs/src/examples/v-date-input/usage.vue b/packages/docs/src/examples/v-date-input/usage.vue new file mode 100644 index 00000000000..93e6dfdd1a5 --- /dev/null +++ b/packages/docs/src/examples/v-date-input/usage.vue @@ -0,0 +1,44 @@ + + + diff --git a/packages/docs/src/examples/v-progress-linear/misc-buffer-color.vue b/packages/docs/src/examples/v-progress-linear/misc-buffer-color.vue new file mode 100644 index 00000000000..f270e6f2cb6 --- /dev/null +++ b/packages/docs/src/examples/v-progress-linear/misc-buffer-color.vue @@ -0,0 +1,24 @@ + diff --git a/packages/docs/src/examples/v-pull-to-refresh/usage.vue b/packages/docs/src/examples/v-pull-to-refresh/usage.vue new file mode 100644 index 00000000000..9ac2ee24d71 --- /dev/null +++ b/packages/docs/src/examples/v-pull-to-refresh/usage.vue @@ -0,0 +1,92 @@ + + + + + + + diff --git a/packages/docs/src/examples/v-tabs/misc-content.vue b/packages/docs/src/examples/v-tabs/misc-content.vue index 8b826cbf07c..98cab1775c3 100644 --- a/packages/docs/src/examples/v-tabs/misc-content.vue +++ b/packages/docs/src/examples/v-tabs/misc-content.vue @@ -7,13 +7,9 @@ - - mdi-magnify - + - - mdi-dots-vertical - + - - + {{ text }} - - + + diff --git a/packages/docs/src/examples/v-tabs/misc-dynamic-height.vue b/packages/docs/src/examples/v-tabs/misc-dynamic-height.vue index a4dc590e6be..a2e0619037e 100644 --- a/packages/docs/src/examples/v-tabs/misc-dynamic-height.vue +++ b/packages/docs/src/examples/v-tabs/misc-dynamic-height.vue @@ -2,7 +2,6 @@ @@ -24,9 +23,8 @@ - Item {{ n }} - + :text="`Item ${n}`" + > diff --git a/packages/docs/src/examples/v-tabs/misc-dynamic.vue b/packages/docs/src/examples/v-tabs/misc-dynamic.vue index cca6835ff4c..fe290dc018d 100644 --- a/packages/docs/src/examples/v-tabs/misc-dynamic.vue +++ b/packages/docs/src/examples/v-tabs/misc-dynamic.vue @@ -7,29 +7,29 @@ - Item {{ n }} - + > + - Remove Tab - + > + + - Add Tab - + > diff --git a/packages/docs/src/examples/v-tabs/misc-mobile.vue b/packages/docs/src/examples/v-tabs/misc-mobile.vue index 9d36535411f..3d9835c10c7 100644 --- a/packages/docs/src/examples/v-tabs/misc-mobile.vue +++ b/packages/docs/src/examples/v-tabs/misc-mobile.vue @@ -1,19 +1,15 @@ diff --git a/packages/docs/src/examples/v-tabs/misc-overflow-to-menu.vue b/packages/docs/src/examples/v-tabs/misc-overflow-to-menu.vue index c5d95d4a8de..93b537be551 100644 --- a/packages/docs/src/examples/v-tabs/misc-overflow-to-menu.vue +++ b/packages/docs/src/examples/v-tabs/misc-overflow-to-menu.vue @@ -9,13 +9,9 @@ - - mdi-magnify - + - - mdi-dots-vertical - + - - + - - + + diff --git a/packages/docs/src/examples/v-tabs/misc-pagination.vue b/packages/docs/src/examples/v-tabs/misc-pagination.vue index c6a0f07403c..54311a3d4c0 100644 --- a/packages/docs/src/examples/v-tabs/misc-pagination.vue +++ b/packages/docs/src/examples/v-tabs/misc-pagination.vue @@ -8,10 +8,9 @@ - Item {{ i }} - + > diff --git a/packages/docs/src/examples/v-tabs/misc-tab-items.vue b/packages/docs/src/examples/v-tabs/misc-tab-items.vue index b9afa6164dc..3208dbfeefb 100644 --- a/packages/docs/src/examples/v-tabs/misc-tab-items.vue +++ b/packages/docs/src/examples/v-tabs/misc-tab-items.vue @@ -7,9 +7,8 @@ - {{ item.tab }} - + :title="item.tab" + > diff --git a/packages/docs/src/examples/v-tabs/prop-align-tabs-center.vue b/packages/docs/src/examples/v-tabs/prop-align-tabs-center.vue index 7d503eca5f0..f6c7b87386e 100644 --- a/packages/docs/src/examples/v-tabs/prop-align-tabs-center.vue +++ b/packages/docs/src/examples/v-tabs/prop-align-tabs-center.vue @@ -9,8 +9,9 @@ City Abstract - - + - - + + diff --git a/packages/docs/src/examples/v-tabs/prop-align-tabs-end.vue b/packages/docs/src/examples/v-tabs/prop-align-tabs-end.vue index 9d8e075ab1c..cdb081c8430 100644 --- a/packages/docs/src/examples/v-tabs/prop-align-tabs-end.vue +++ b/packages/docs/src/examples/v-tabs/prop-align-tabs-end.vue @@ -9,8 +9,9 @@ City Abstract - - + - - + + diff --git a/packages/docs/src/examples/v-tabs/prop-align-tabs-title.vue b/packages/docs/src/examples/v-tabs/prop-align-tabs-title.vue index 6cd501b2006..80a979eb1e8 100644 --- a/packages/docs/src/examples/v-tabs/prop-align-tabs-title.vue +++ b/packages/docs/src/examples/v-tabs/prop-align-tabs-title.vue @@ -7,13 +7,9 @@ - - mdi-magnify - + - - mdi-dots-vertical - + - - + - - + + diff --git a/packages/docs/src/examples/v-tabs/prop-direction.vue b/packages/docs/src/examples/v-tabs/prop-direction.vue index 29112515403..4b4c8dc2ec7 100644 --- a/packages/docs/src/examples/v-tabs/prop-direction.vue +++ b/packages/docs/src/examples/v-tabs/prop-direction.vue @@ -1,37 +1,21 @@ diff --git a/packages/docs/src/examples/v-tabs/prop-fixed-tabs.vue b/packages/docs/src/examples/v-tabs/prop-fixed-tabs.vue index 5aeece5c879..40c53637210 100644 --- a/packages/docs/src/examples/v-tabs/prop-fixed-tabs.vue +++ b/packages/docs/src/examples/v-tabs/prop-fixed-tabs.vue @@ -3,11 +3,8 @@ bg-color="indigo-darken-2" fixed-tabs > - - Option - - - Another Option - + + + diff --git a/packages/docs/src/examples/v-tabs/prop-grow.vue b/packages/docs/src/examples/v-tabs/prop-grow.vue index 6e015e5f11b..eec8625e747 100644 --- a/packages/docs/src/examples/v-tabs/prop-grow.vue +++ b/packages/docs/src/examples/v-tabs/prop-grow.vue @@ -15,14 +15,13 @@ - {{ item }} - + > - - + {{ text }} - - + + diff --git a/packages/docs/src/examples/v-tabs/prop-icons.vue b/packages/docs/src/examples/v-tabs/prop-icons.vue index 6219e73017a..3c5d10caaf2 100644 --- a/packages/docs/src/examples/v-tabs/prop-icons.vue +++ b/packages/docs/src/examples/v-tabs/prop-icons.vue @@ -9,9 +9,8 @@ - Item {{ i }} - + :text="`Item ${i}`" + > diff --git a/packages/docs/src/examples/v-tabs/prop-stacked.vue b/packages/docs/src/examples/v-tabs/prop-stacked.vue index 993f5edb995..db0ba0eafe0 100644 --- a/packages/docs/src/examples/v-tabs/prop-stacked.vue +++ b/packages/docs/src/examples/v-tabs/prop-stacked.vue @@ -7,23 +7,26 @@ stacked > - mdi-phone + + Recents - mdi-heart + + Favorites - mdi-account-box + + Nearby - - + {{ text }} - - + + diff --git a/packages/docs/src/examples/v-tabs/slot-tabs.vue b/packages/docs/src/examples/v-tabs/slot-tabs.vue new file mode 100644 index 00000000000..5888db54568 --- /dev/null +++ b/packages/docs/src/examples/v-tabs/slot-tabs.vue @@ -0,0 +1,85 @@ + + + + + diff --git a/packages/docs/src/examples/v-tabs/usage.vue b/packages/docs/src/examples/v-tabs/usage.vue index d3e4df2f719..d3e8bf85626 100644 --- a/packages/docs/src/examples/v-tabs/usage.vue +++ b/packages/docs/src/examples/v-tabs/usage.vue @@ -10,19 +10,19 @@ - - + + One - + - + Two - + - + Three - - + + diff --git a/packages/docs/src/examples/v-tooltip-directive/args.vue b/packages/docs/src/examples/v-tooltip-directive/args.vue new file mode 100644 index 00000000000..0144dfa746c --- /dev/null +++ b/packages/docs/src/examples/v-tooltip-directive/args.vue @@ -0,0 +1,19 @@ + diff --git a/packages/docs/src/examples/v-tooltip-directive/modifiers.vue b/packages/docs/src/examples/v-tooltip-directive/modifiers.vue new file mode 100644 index 00000000000..7150bc7bb97 --- /dev/null +++ b/packages/docs/src/examples/v-tooltip-directive/modifiers.vue @@ -0,0 +1,5 @@ + diff --git a/packages/docs/src/examples/v-tooltip-directive/object-literals.vue b/packages/docs/src/examples/v-tooltip-directive/object-literals.vue new file mode 100644 index 00000000000..00075b8682f --- /dev/null +++ b/packages/docs/src/examples/v-tooltip-directive/object-literals.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/packages/docs/src/examples/v-tooltip-directive/usage.vue b/packages/docs/src/examples/v-tooltip-directive/usage.vue new file mode 100644 index 00000000000..0177d215963 --- /dev/null +++ b/packages/docs/src/examples/v-tooltip-directive/usage.vue @@ -0,0 +1,27 @@ + + + diff --git a/packages/docs/src/i18n/messages/en.json b/packages/docs/src/i18n/messages/en.json index ce4cccbb38c..e818fbf05f2 100644 --- a/packages/docs/src/i18n/messages/en.json +++ b/packages/docs/src/i18n/messages/en.json @@ -19,7 +19,8 @@ "props": "Props", "sass": "SASS Variables", "slots": "Slots", - "exposed": "Exposed" + "exposed": "Exposed", + "value": "Value" }, "api-explorer": "API Explorer", "application": "Application", diff --git a/packages/docs/src/main.ts b/packages/docs/src/main.ts index f2ef73fbf3d..f328c802bfe 100644 --- a/packages/docs/src/main.ts +++ b/packages/docs/src/main.ts @@ -1,17 +1,11 @@ // Styles import 'prism-theme-vars/base.css' -// App -import App from './App.vue' - -// Virtual -// import 'virtual:api' -import { setupLayouts } from 'virtual:generated-layouts' - // Plugins import { createApp } from 'vue' import { createRouter, createWebHistory } from 'vue-router' import { createHead } from '@unhead/vue' +import { installVuetify } from '@/plugins/vuetify' import { installPinia, pinia } from '@/plugins/pinia' import { installGlobalComponents } from '@/plugins/global-components' import { installGtag } from '@/plugins/gtag' @@ -21,7 +15,13 @@ import { useAppStore } from '@/stores/app' import { useLocaleStore } from '@/stores/locale' import { installPwa } from '@/plugins/pwa' import { useUserStore } from '@vuetify/one' -import { installVuetify } from '@/plugins/vuetify' + +// App +import App from './App.vue' + +// Virtual +// import 'virtual:api' +import { setupLayouts } from 'virtual:generated-layouts' // Utilities import { diff --git a/packages/docs/src/pages/en/components/all.md b/packages/docs/src/pages/en/components/all.md index fd84b53b5be..8b40a29be15 100644 --- a/packages/docs/src/pages/en/components/all.md +++ b/packages/docs/src/pages/en/components/all.md @@ -114,7 +114,7 @@ Navigation components are used to navigate between different views or pages. - + The floating action button is used for a promoted actions within an application @@ -150,7 +150,7 @@ Navigation components are used to navigate between different views or pages. - + The speed dial component is a floating action button that can reveal additional actions when clicked @@ -334,6 +334,12 @@ These components are used to display data and information in a variety of ways. + + + The confirm edit component is used to confirm changes to data + + + The data iterator component provides an easy interface for paginating and sorting data @@ -358,7 +364,7 @@ These components are used to display data and information in a variety of ways. - + The sparkline component creates beautiful and expressive simple graphs for displaying numerical data @@ -410,7 +416,7 @@ These components are used to provide feedback to the user within content, over c - + The empty state component is used to indicate that a page or area on a page has no content. diff --git a/packages/docs/src/pages/en/components/buttons.md b/packages/docs/src/pages/en/components/buttons.md index 817d97cc3bd..0b8e586a2f0 100644 --- a/packages/docs/src/pages/en/components/buttons.md +++ b/packages/docs/src/pages/en/components/buttons.md @@ -203,6 +203,12 @@ In this example we use a [v-banner](/components/banners/) component to display a +### Readonly buttons + +In this example, we change the properties of the `v-btn` based upon a "subscription" state. When the user is subscribed, we want to disable interaction with the button, but not change its appearance; which is what occurs when using the **disabled** property. + + + ## Global Configuration Modify the default values and set a default style for all `v-btn` components using the [Global configuration](/features/global-configuration/). This helps keep your application consistent and allows you to change it in the future with minimal effort. diff --git a/packages/docs/src/pages/en/components/confirm-edit.md b/packages/docs/src/pages/en/components/confirm-edit.md index d4b97aebb85..3facd46470d 100644 --- a/packages/docs/src/pages/en/components/confirm-edit.md +++ b/packages/docs/src/pages/en/components/confirm-edit.md @@ -10,7 +10,7 @@ related: - /components/icons/ - /components/toolbars/ features: - github: /labs/VConfirmEdit/ + github: /components/VConfirmEdit/ label: 'C: VConfirmEdit' report: true --- @@ -19,30 +19,14 @@ features: The `v-confirm-edit` component is used to allow the user to verify their changes before they are committed. -![Badge Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-badge/v-badge-entry.png) - -::: warning +::: success -This feature requires [v3.4.0](/getting-started/release-notes/?version=v3.4.0) +This feature was introduced in [v3.6.0](/getting-started/release-notes/?version=v3.6.0) ::: -## Installation - -Labs components require a manual import and installation of the component. - -```js { resource="src/plugins/vuetify.js" } -import { VConfirmEdit } from 'vuetify/labs/VConfirmEdit' - -export default createVuetify({ - components: { - VConfirmEdit, - }, -}) -``` - ## Usage diff --git a/packages/docs/src/pages/en/components/data-iterators.md b/packages/docs/src/pages/en/components/data-iterators.md index 7c09a47ebe5..39d985ad3cc 100644 --- a/packages/docs/src/pages/en/components/data-iterators.md +++ b/packages/docs/src/pages/en/components/data-iterators.md @@ -82,7 +82,7 @@ The following are a collection of examples that demonstrate more advanced and re ### Slots -The `v-data-iterator` component has 3 main slots +The `v-data-iterator` component has 4 main slots #### Default @@ -101,3 +101,9 @@ The `v-data-iterator` has both a **header** and **footer** slot for adding extra Sorting, filters and pagination can be controlled externally by using the individual props + +#### Loader props + +Loader can be used to change loader on "loading" prop + + diff --git a/packages/docs/src/pages/en/components/date-inputs.md b/packages/docs/src/pages/en/components/date-inputs.md new file mode 100644 index 00000000000..0bf278bad86 --- /dev/null +++ b/packages/docs/src/pages/en/components/date-inputs.md @@ -0,0 +1,102 @@ +--- +emphasized: true +meta: + nav: Date inputs + title: Date input component + description: The date input is a specialized input that provides a clean interface for selecting dates, showing detailed selection information. + keywords: date input, date picker, date field +related: + - /components/date-pickers/ + - /components/text-fields/ + - /components/menus/ +features: + label: 'C: VDateInput' + report: true + github: /labs/VDateInput/ +--- + +# Date inputs + +The `v-date-input` component combines a text field with a date picker. It is meant to be a direct replacement for a standard date input. + + + +::: warning + +This feature requires [v3.6.0](/getting-started/release-notes/?version=v3.6.0) + +::: + +## Installation + +Labs components require a manual import and installation of the component. + +```js { resource="src/plugins/vuetify.js" } +import { VDateInput } from 'vuetify/labs/VDateInput' + +export default createVuetify({ + components: { + VDateInput, + }, +}) +``` + +## Usage + +At its core, the `v-date-input` component is a basic container that extends [v-text-field](/components/text-fields). + + + + + +## API + +| Component | Description | +| - | - | +| [v-date-input](/api/v-date-input/) | Primary component | +| [v-date-picker](/api/v-date-picker/) | Date picker component | +| [v-text-field](/api/v-text-field/) | Text field component | + + + +## Guide + +The `v-date-input` component is a replacement for the standard date input. It provides a clean interface for selecting dates and shows detailed selection information. + +### Props + +The `v-date-input` component extends the [v-text-field](/components/text-fields/) and [v-date-picker](/components/date-pickers/) component; and supports all of their props. + +#### Model + +The default model value is a Date object, but is displayed as formatted text in the input.. + + + +#### Multiple + +Using the **multiple** prop, the default model value is an empty array. + + + +#### Range + +Using the multiple prop with a value of **range**, select 2 dates to select them and all the dates between them. + + + +#### Calendar icon + +You can move the calendar icon within the input or entirely by utilizing the **prepend-icon** and **prepend-inner-icon** properties. + + + +## Examples + +The following are a collection of examples that demonstrate more advanced and real world use of the `v-date-input` component. + +### Passenger + +In this example, the `v-date-input` component is used to select a date of birth. + + diff --git a/packages/docs/src/pages/en/components/empty-states.md b/packages/docs/src/pages/en/components/empty-states.md index e84eaeaffc8..ed47f908a6d 100644 --- a/packages/docs/src/pages/en/components/empty-states.md +++ b/packages/docs/src/pages/en/components/empty-states.md @@ -12,7 +12,7 @@ features: report: true spec: https://m2.material.io/design/communication/empty-states.html label: 'C: VEmptyState' - github: '/labs/VEmptyState/' + github: '/components/VEmptyState/' --- # Empty states @@ -21,26 +21,12 @@ The `v-empty-state` component is used to indicate that a list is empty or that n -::: warning +::: success -This feature requires [v3.5.7](/getting-started/release-notes/?version=v3.5.7) +This feature was introduced in [v3.6.0](/getting-started/release-notes/?version=v3.6.0) ::: -## Installation - -Labs components require a manual import and installation of the component. - -```js { resource="src/plugins/vuetify.js" } -import { VEmptyState } from 'vuetify/labs/VEmptyState' - -export default createVuetify({ - components: { - VEmptyState, - }, -}) -``` - ## Usage A basic empty state is composed of a title and a description. It can also include an icon and a button. diff --git a/packages/docs/src/pages/en/components/floating-action-buttons.md b/packages/docs/src/pages/en/components/floating-action-buttons.md index 976d834ccdc..5cc714bdc82 100644 --- a/packages/docs/src/pages/en/components/floating-action-buttons.md +++ b/packages/docs/src/pages/en/components/floating-action-buttons.md @@ -11,6 +11,8 @@ related: - /styles/transitions/ features: report: true + label: 'C: VFab' + github: /components/VFab/ spec: https://m2.material.io/components/buttons-floating-action-button --- @@ -20,26 +22,12 @@ The `v-fab` component can be used as a floating action button. This provides an -::: warning +::: success -This feature requires [v3.5.7](/getting-started/release-notes/?version=v3.5.7) +This feature was introduced in [v3.6.0](/getting-started/release-notes/?version=v3.6.0) ::: -## Installation - -Labs components require a manual import and installation of the component. - -```js { resource="src/plugins/vuetify.js" } -import { VFab } from 'vuetify/labs/VFab' - -export default createVuetify({ - components: { - VFab, - }, -}) -``` - ## Usage Floating action buttons can be attached to material to signify a promoted action in your application. The default size will be used in most cases, whereas the `small` variant can be used to maintain continuity with similar sized elements. diff --git a/packages/docs/src/pages/en/components/progress-linear.md b/packages/docs/src/pages/en/components/progress-linear.md index 57e678b2dec..c2e4047dff1 100644 --- a/packages/docs/src/pages/en/components/progress-linear.md +++ b/packages/docs/src/pages/en/components/progress-linear.md @@ -115,3 +115,15 @@ The `v-progress-linear` component is good for communicating to the user that the Using the **absolute** prop we are able to position the `v-progress-linear` component at the bottom of the `v-toolbar`. We also use the **active** prop which allows us to control the visibility of the progress. + +#### Buffer color and opacity + +::: success + +This feature was introduced in [v3.6.0 (Nebula)](/getting-started/release-notes/?version=v3.6.0) + +::: + +The buffer color and opacity can be controlled using the **buffer-color** and **buffer-opacity** props. This enables you to make multi colored progress bars. + + diff --git a/packages/docs/src/pages/en/components/pull-to-refresh.md b/packages/docs/src/pages/en/components/pull-to-refresh.md new file mode 100644 index 00000000000..1b762526753 --- /dev/null +++ b/packages/docs/src/pages/en/components/pull-to-refresh.md @@ -0,0 +1,59 @@ +--- +emphasized: true +meta: + title: Pull To Refresh + description: The PullToRefresh allows users to update content with a simple downward swipe on their screen. + keywords: Pull to refresh, vuetify Pull to refresh component, vue pull to refresh component +features: + label: 'C: VPullToRefresh' + github: /components/VPullToRefresh/ + report: true +--- + +# Pull To Refresh + +The PullToRefresh allows users to update content with a simple downward swipe on their screen. Works for Mobile and Desktop. + + + +::: warning + +This feature requires [v3.6.0](/getting-started/release-notes/?version=v3.6.0) + +::: + +## Installation + +Labs components require a manual import and installation of the component. + +```js { resource="src/plugins/vuetify.js" } +import { VPullToRefresh } from 'vuetify/labs/VPullToRefresh' + +export default createVuetify({ + components: { + VPullToRefresh, + }, +}) +``` + +## Usage + +Drag the list downward to activate the pull-to-refresh feature. + + + +::: tip + +Pull down functionality is available as soon as its immediate scrollable parent has scrolled to the top. + +::: + + + +## API + +| Component | Description | +| - | - | +| [v-pull-to-refresh](/api/v-pull-to-refresh/) | Primary Component | + + diff --git a/packages/docs/src/pages/en/components/sparklines.md b/packages/docs/src/pages/en/components/sparklines.md index ed86be9ffd2..dce852fa122 100644 --- a/packages/docs/src/pages/en/components/sparklines.md +++ b/packages/docs/src/pages/en/components/sparklines.md @@ -8,40 +8,32 @@ related: - /components/cards/ - /components/sheets/ - /components/expansion-panels/ +features: + github: /components/VSparkline/ + label: 'C: VSparkline' + report: true --- # Sparklines The sparkline component can be used to create simple graphs, like GitHub's contribution chart. - + -::: warning +::: success -This feature requires [v3.5.5](/getting-started/release-notes/?version=v3.5.5) +This feature was introduced in [v3.6.0](/getting-started/release-notes/?version=v3.6.0) ::: -## Installation - -Labs components require a manual import and installation of the component. - -```js { resource="src/plugins/vuetify.js" } -import { VSparkline } from 'vuetify/labs/VSparkline' - -export default createVuetify({ - components: { - VSparkline, - }, -}) -``` - ## Usage A sparkline is a tiny chart that provides a visual representation of data. The sparkline component comes in 2 variations, **trend** (default) and **bar**. Each supports a multitude of options for customizing the look and feel of the sparkline. + + ## API | Component | Description | diff --git a/packages/docs/src/pages/en/components/speed-dials.md b/packages/docs/src/pages/en/components/speed-dials.md index c9dcb407ba4..f95a52d2eb8 100644 --- a/packages/docs/src/pages/en/components/speed-dials.md +++ b/packages/docs/src/pages/en/components/speed-dials.md @@ -11,6 +11,8 @@ related: - /styles/transitions/ features: report: true + github: /components/VSpeedDial/ + label: 'C: VSpeedDial' --- # Speed Dials @@ -19,26 +21,12 @@ The `v-speed-dial` component can be used as a floating action button that can re -::: warning +::: success -This feature requires [v3.5.8](/getting-started/release-notes/?version=v3.5.8) +This feature was introduced in [v3.6.0](/getting-started/release-notes/?version=v3.6.0) ::: -## Installation - -Labs components require a manual import and installation of the component. - -```js { resource="src/plugins/vuetify.js" } -import { VSpeedDial } from 'vuetify/labs/VSpeedDial' - -export default createVuetify({ - components: { - VSpeedDial, - }, -}) -``` - ## Usage Speed dials can be attached to material to signify a promoted action in your application. The default size will be used in most cases, whereas the `small` variant can be used to maintain continuity with similar sized elements. diff --git a/packages/docs/src/pages/en/components/tabs.md b/packages/docs/src/pages/en/components/tabs.md index f24ae4fcd10..75383cdfba1 100644 --- a/packages/docs/src/pages/en/components/tabs.md +++ b/packages/docs/src/pages/en/components/tabs.md @@ -124,3 +124,17 @@ Tabs can be dynamically added and removed. In this example when we add a new tab You can use a menu to hold additional tabs, swapping them out on the fly. + +### Slots + +#### Tab and window items + +Use the **tab** and **item** slots with the **items** prop to reduce the markup required to build tabs. + +::: success + +This feature was introduced in [v3.6.0 (Nebula)](/getting-started/release-notes/?version=v3.6.0) + +::: + + diff --git a/packages/docs/src/pages/en/directives/tooltip.md b/packages/docs/src/pages/en/directives/tooltip.md new file mode 100644 index 00000000000..312dd5ec6ad --- /dev/null +++ b/packages/docs/src/pages/en/directives/tooltip.md @@ -0,0 +1,56 @@ +--- +emphasized: true +meta: + nav: Tooltip + title: Tooltip directive + description: The Tooltip directive is an easy to use implementation of VTooltip. + keywords: Tooltip, vuetify Tooltip directive, vue Tooltip directive, mobile Tooltip directive +related: + - /components/navigation-drawers/ + - /components/slide-groups/ + - /components/windows/ +features: + report: true +--- + +# Tooltip directive + +The `v-tooltip` directive is a shorthand way of adding tooltips to elements in your application. + + + + + +## Usage + +The `v-tooltip` directive makes it easy to add a tooltip to any element in your application. It is a wrapper around the `v-tooltip` component. + + + +## API + +| Directive | Description | +|------------------------------------|---------------------| +| [v-tooltip](/api/v-tooltip-directive/) | The Tooltip directive | + +## Guide + +The `v-tooltip` directive is a simple way to add a tooltip to any element in your application. It is a wrapper around the `v-tooltip`. + +### Args + +The `v-tooltip` directive has a number of args that can be used to customize the behavior of the tooltip. + + + +### Modifiers + +Modifiers are values that are passed to the `v-tooltip` component. This is an easy way to make small modifications to boolean [v-tooltip](/api/v-tooltip/) props. + + + +### Object literals + +The `v-tooltip` directive can also accept an object literal as a value. This is useful when you need to pass multiple props to the `v-tooltip` component. + + diff --git a/packages/docs/src/pages/en/features/dates.md b/packages/docs/src/pages/en/features/dates.md index 7bb2b43690f..41e95852a3e 100644 --- a/packages/docs/src/pages/en/features/dates.md +++ b/packages/docs/src/pages/en/features/dates.md @@ -29,19 +29,6 @@ This feature was introduced in [v3.4.0 (Blackguard)](/getting-started/release-no The date composable provides a shared architecture that is used by components such as date picker and calendar. The default implementation is built using the native Date object, but can be swapped out for another date library. If no other date adapter is given, the default Vuetify one is used. -The following example demonstrates explicitly importing the Vuetify date adapter and passing it to the date options. - -```js { resource="src/plugins/vuetify.js" } -import { createVuetify } from 'vuetify' -import { VuetifyDateAdapter } from 'vuetify/date/adapters/vuetify' - -export default createVuetify({ - date: { - adapter: VuetifyDateAdapter, - }, -}) -``` - Within your application, import the **useDate** function and use it to access the date composable. ```html { resource="src/views/Date.vue" } @@ -64,16 +51,35 @@ For a list of all supported date adapters, visit the [date-io](https://github.co The date composable supports the following date formatting options: -* fullDateWithWeekday -* normalDateWithWeekday -* keyboardDate -* monthAndDate -* monthAndYear -* month -* monthShort -* dayOfMonth -* shortDate -* year +| Format Name | Format Output | +| - | - | +| fullDate | "Jan 1, 2024" | +| fullDateWithWeekday | "Tuesday, January 1, 2024" | +| normalDate | "1 January" | +| normalDateWithWeekday | "Wed, Jan 1" | +| shortDate | "Jan 1" | +| year | "2024" | +| month | "January" | +| monthShort | "Jan" | +| monthAndYear | "January 2024" | +| monthAndDate | "January 1" | +| weekday | "Wednesday" | +| weekdayShort | "Wed" | +| dayOfMonth | "1" | +| hours12h | "11" | +| hours24h | "23" | +| minutes | "44" | +| seconds | "00" | +| fullTime | "11:44 PM" for US, "23:44" for Europe | +| fullTime12h | "11:44 PM" | +| fullTime24h | "23:44" | +| fullDateTime | "Jan 1, 2024 11:44 PM" | +| fullDateTime12h | "Jan 1, 2024 11:44 PM" | +| fullDateTime24h | "Jan 1, 2024 23:44" | +| keyboardDate | "02/13/2024" | +| keyboardDateTime | "02/13/2024 23:44" | +| keyboardDateTime12h | "02/13/2024 11:44 PM" | +| keyboardDateTime24h | "02/13/2024 23:44" | The following example shows how to use the date composable to format a date string: @@ -105,11 +111,40 @@ The built-in date adapter implements a subset of functionality from the [DateIOF import { createVuetify } from 'vuetify' import LuxonAdapter from "@date-io/luxon" -const luxon = new LuxonAdapter({ locale: "sv" }); +export default createVuetify({ + date: { + adapter: LuxonAdapter, + }, +}) +``` +For TypeScript users, an interface is also exposed for [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation): + +```ts { resource="src/plugins/vuetify.js" } export default createVuetify({ + ... +}) + +declare module 'vuetify' { + namespace DateModule { + interface Adapter extends LuxonAdapter {} + } +} +``` + +### Localization + +The date composable will use the current vuetify [locale](/features/internationalization/) for formatting and getting the first day of the week. These do not always line up perfectly, so a list of aliases can be provided to map language codes to locales. The following configuration will look up `en` keys for translations, but use `en-GB` for date formatting: + +```js { resource="src/plugins/vuetify.js" } +export default createVuetify({ + locale: { + locale: 'en', + }, date: { - adapter: luxon, + locale: { + en: 'en-GB', + }, }, }) ``` diff --git a/packages/docs/src/pages/en/features/sass-variables.md b/packages/docs/src/pages/en/features/sass-variables.md index dbed260679e..0a6e7617536 100644 --- a/packages/docs/src/pages/en/features/sass-variables.md +++ b/packages/docs/src/pages/en/features/sass-variables.md @@ -233,6 +233,30 @@ Color packs are handy for quickly applying a color to a component but mostly unu ); ``` +## Enabling CSS cascade layers + +::: success +This feature was introduced in [v3.6.0 (Nebula)](/getting-started/release-notes/?version=v3.6.0) +::: + +[Cascade layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) are a modern CSS feature that makes it easier to write custom styles without having to deal with specificity issues and `!important`. This will be included by default in Vuetify 4 but can optionally be used now: + +```scss { resource="src/styles/settings.scss" } +@forward 'vuetify/settings' with ( + $layers: true, +); +``` + +Import order of stylesheets becomes much more important with layers enabled, `import 'vuetify/styles'` or a file containing `@use 'vuetify'` **must** be loaded *before* any components or the CSS reset will take precedence over component styles and break everything. If you have separate plugin files make sure to import vuetify's before `App.vue`. + +Your own styles will always* override vuetify's if you don't use `@layer` yourself, or you can specify an order for custom layers in a stylesheet loaded before vuetify. + +```css { resource="src/styles/layers.css" } +@layer base, vuetify, overrides; +``` + +\* Layers invert `!important`, so anything trying to override an important vuetify style must also be in a layer. { class="text-caption" } + ## Caveats When using sass variables, there are a few considerations to be aware of. diff --git a/packages/docs/src/pages/en/getting-started/installation.md b/packages/docs/src/pages/en/getting-started/installation.md index 10bdb524b5f..fe3fe4e3f53 100644 --- a/packages/docs/src/pages/en/getting-started/installation.md +++ b/packages/docs/src/pages/en/getting-started/installation.md @@ -218,7 +218,6 @@ You should now have access to all Vuetify components and tools in Nuxt app. ```js import { createApp } from 'vue' -import App from './App.vue' // Vuetify import '@mdi/font/css/materialdesignicons.css' @@ -227,6 +226,9 @@ import { createVuetify } from 'vuetify' import * as components from 'vuetify/components' import * as directives from 'vuetify/directives' +// Components +import App from './App.vue' + const vuetify = createVuetify({ components, directives @@ -293,7 +295,6 @@ In the file where you create the Vue application, add the following code ```js import { createApp } from 'vue' -import App from './App.vue' // Vuetify import 'vuetify/styles' @@ -301,6 +302,9 @@ import { createVuetify } from 'vuetify' import * as components from 'vuetify/components' import * as directives from 'vuetify/directives' +// Components +import App from './App.vue' + const vuetify = createVuetify({ components, directives, diff --git a/packages/docs/src/pages/en/introduction/roadmap.md b/packages/docs/src/pages/en/introduction/roadmap.md index 8bcf3e8e016..65b71a80a31 100644 --- a/packages/docs/src/pages/en/introduction/roadmap.md +++ b/packages/docs/src/pages/en/introduction/roadmap.md @@ -24,22 +24,16 @@ The following is a list of all planned components for the year 2024. | Component | Entering Labs | Production Release | | - | - | - | -| [v3.6 (Nebula)](https://github.com/vuetifyjs/vuetify/milestone/72) | | { .bg-surface-light } | -| [v-fab](/components/floating-action-buttons/) | *️⃣ | April 2024 | -| [v-empty-state](/components/empty-states/) | *️⃣ | April 2024 | -| [v-sparkline](/components/sparklines/) | *️⃣ | April 2024 | -| [v-speed-dial](/components/speed-dials/) | *️⃣ | April 2024 | -| [v-confirm-edit](/components/confirm-edit/) | *️⃣ | April 2024 | -| [v3.7 (Odyssey)](https://github.com/vuetifyjs/vuetify/milestone/73) | | { .bg-surface-light } | +| [v3.7 (Odyssey)](https://github.com/vuetifyjs/vuetify/milestone/73) | | July 2024 { .bg-surface-light } | | [v-treeview](/components/treeview/) | *️⃣ | July 2024 | | [v-number-input](/components/number-inputs/) | *️⃣ | July 2024 | | [v-time-picker](/components/time-pickers/) | *️⃣ | July 2024 | -| v-date-input | April 2024 | July 2024 | -| v-file-upload | April 2024 | July 2024 | -| v-time-input | April 2024 | July 2024 | -| v-stepper-vertical | ~~March~~ May 2024 | July 2024 | -| [v3.8 (Andromeda)](https://github.com/vuetifyjs/vuetify/milestone/74) | | { .bg-surface-light } | -| v-calendar | *️⃣ | Q4 | +| [v-date-input](/components/date-inputs/) | *️⃣ | July 2024 | +| [v-file-upload](https://github.com/vuetifyjs/vuetify/pull/19667) | ~~April~~ May 2024 | July 2024 | +| [v-time-input](https://github.com/vuetifyjs/vuetify/pull/19709) | ~~April~~ May 2024 | July 2024 | +| [v-stepper-vertical](https://github.com/vuetifyjs/vuetify/pull/19524) | ~~March~~ May 2024 | July 2024 | +| [v3.8 (Andromeda)](https://github.com/vuetifyjs/vuetify/milestone/74) | | Q4 { .bg-surface-light } | +| [v-calendar](/components/calendars/) | *️⃣ | Q4 | | v-date-time-picker | May 2024 | Q4 | | v-date-range-picker | June 2024 | Q4 | | v-video | July 2024 | Q4 | @@ -51,6 +45,21 @@ The following is a list of all planned components for the year 2024. The following are the already released **minor** and **major** version updates. Find more information on the [latest releases](https://github.com/vuetifyjs/vuetify/releases/latest) on GitHub. +### v3.6 (Nebula) + +- **Released:** April 2024 +- **Hero:** [Banner](https://cdn.vuetifyjs.com/docs/images/release-banners/nebula-36.png) +- **Target Release:** Q2 2024 +- **Notes:** [v3.6 Release](/getting-started/release-notes/?version=v3.6.0) +- **Overview:** Introduced 5 new components to the main framework from Labs: + - [v-fab](/components/floating-action-buttons/) + - [v-empty-state](/components/empty-states/) + - [v-sparkline](/components/sparklines/) + - [v-speed-dial](/components/speed-dials/) + - [v-confirm-edit](/components/confirm-edit/) + - Multiple bug fixes and improvements. +- **Milestone Issues:** [Github Issues](https://github.com/vuetifyjs/vuetify/milestone/72) + ### v3.5 (Polaris) - **Released:** January 2024 diff --git a/packages/docs/src/pages/en/labs/introduction.md b/packages/docs/src/pages/en/labs/introduction.md index 532e8cac8eb..e7fd1afd69c 100644 --- a/packages/docs/src/pages/en/labs/introduction.md +++ b/packages/docs/src/pages/en/labs/introduction.md @@ -77,13 +77,9 @@ The following is a list of available and up-and-coming components for use with L | Component | Description | Min Version | | - | - | - | | [v-calendar](/components/calendars/) | A calendar component | [v3.4.9](/getting-started/release-notes/?version=v3.4.9) | -| [v-confirm-edit](/components/confirm-edit/) | A component for confirming model changes | [v3.4.0](/getting-started/release-notes/?version=v3.4.0) | -| [v-empty-state](/components/empty-states/) | A component for displaying empty states | [v3.5.7](/getting-started/release-notes/?version=v3.5.7) | -| [v-fab](/components/floating-action-buttons/) | A layout aware [v-btn](/components/buttons/) | [v3.5.7](/getting-started/release-notes/?version=v3.5.7) | +| [v-date-input](/components/date-inputs/) | A date input component | [v3.6.0](/getting-started/release-notes/?version=v3.6.0) | | [v-number-input](/components/number-input/) | A component for numerical data | [v3.5.10](/getting-started/release-notes/?version=v3.5.10) | | [v-snackbar-queue](/components/snackbar-queue/) | A queue for snackbars | [v3.6.0](/getting-started/release-notes/?version=v3.6.0) | -| [v-sparkline](/components/sparklines/) | A basic data display component | [v3.5.5](/getting-started/release-notes/?version=v3.5.5) | -| [v-speed-dial](/components/speed-dials/) | A component for display actions | [v3.5.8](/getting-started/release-notes/?version=v3.5.8) | | [v-time-picker](/components/time-pickers/) | A time-picker component | [v3.5.12](/getting-started/release-notes/?version=v3.5.12) | | [v-treeview](/components/treeview/) | A treeview component | [v3.5.9](/getting-started/release-notes/?version=v3.5.9) | diff --git a/packages/docs/src/pages/en/styles/opacity.md b/packages/docs/src/pages/en/styles/opacity.md new file mode 100644 index 00000000000..96d8e0ec46b --- /dev/null +++ b/packages/docs/src/pages/en/styles/opacity.md @@ -0,0 +1,95 @@ +--- +emphasized: true +meta: + title: Opacity + description: Use opacity utilities to quickly style the opacity of any element. + keywords: opacity classes, opacity utilities, vuetify opacity helper classes +related: + - /styles/opacity-radius/ + - /styles/display/ + - /styles/content/ +features: + report: true +--- + +# Opacity + +Utilities for controlling the opacity of elements in your application. + + + +::: success + +This feature was introduced in [v3.6.0 (Nebula)](/getting-started/release-notes/?version=v3.6.0) + +::: + +| Class | Properties | +| - | - | +| **opacity-0** | opacity: 0; | +| **opacity-10** | opacity: .1; | +| **opacity-20** | opacity: .2; | +| **opacity-30** | opacity: .3; | +| **opacity-40** | opacity: .4; | +| **opacity-50** | opacity: .5; | +| **opacity-60** | opacity: .6; | +| **opacity-70** | opacity: .7; | +| **opacity-80** | opacity: .8; | +| **opacity-90** | opacity: .9; | +| **opacity-100** | opacity: 1; | +| **opacity-hover** | opacity: var(--v-hover-opacity); | +| **opacity-focus** | opacity: var(--v-focus-opacity); | +| **opacity-selected** | opacity: var(--v-selected-opacity); | +| **opacity-activated** | opacity: var(--v-activated-opacity); | +| **opacity-pressed** | opacity: var(--v-pressed-opacity); | +| **opacity-dragged** | opacity: var(--v-dragged-opacity); { style="max-height: 420px;" fixed-header } | + + + +## Usage + +The `opacity` utilities allow you to quickly change the opacity of any element. + + + +### Hover + +Using the [v-hover](/components/hover/) component, conditionally apply an opacity class when the element is hovered over. + + + +## SASS variables + +You can also use the following SASS variables to customize the opacity color and width: + +```sass { resource="src/styles/settings.scss" } +@use 'vuetify/settings' with ( + $opacities: ( + hover: var(--v-hover-opacity), + focus: var(--v-focus-opacity), + selected: var(--v-selected-opacity), + activated: var(--v-activated-opacity), + pressed: var(--v-pressed-opacity), + dragged: var(--v-dragged-opacity), + 0: 0, + 10: .1, + 20: .2, + 30: .3, + 40: .4, + 50: .5, + 60: .6, + 70: .7, + 80: .8, + 90: .9, + 100: 1 + ) +); +``` + +Disable opacity class generation by setting the $opacities variable to **false**. + +```sass { resource="src/styles/settings.scss" } +@use 'vuetify/settings' with ( + $opacities: false +); +``` diff --git a/packages/docs/src/pages/en/styles/position.md b/packages/docs/src/pages/en/styles/position.md new file mode 100644 index 00000000000..0cf998c8bb0 --- /dev/null +++ b/packages/docs/src/pages/en/styles/position.md @@ -0,0 +1,65 @@ +--- +emphasized: true +meta: + title: Position + description: Use position utilities to quickly style the positioning of any element. + keywords: position classes, positioning utilities, vuetify position helper classes +related: + - /styles/display/ + - /styles/spacing/ + - /styles/flex/ +--- + +# Position + +Utilities for controlling the positioning of elements in your application. + + + +| Class | Properties | +| - | - | +| **position-static** | position: static; | +| **position-relative** | position: relative; | +| **position-absolute** | position: absolute; | +| **position-fixed** | position: fixed; | +| **position-sticky** | position: sticky; | +| **top-0** | top: 0; | +| **right-0** | right: 0; | +| **bottom-0** | bottom: 0; | +| **left-0** | left: 0; | + + + +## Usage + +The `position` utilities allow you to quickly style the positioning of any element. These classes can be used to apply the `position` and `top`, `right`, `bottom`, and `left` properties to an element. + +### Static + +The default position value for all elements is `static`. This means that the element is positioned according to the normal flow of the document. The `top`, `right`, `bottom`, `left` properties have no effect on a statically positioned element. + + + +### Relative + +The `position-relative` class allows you to position an element relative to its normal position in the document. This means that the `top`, `right`, `bottom`, and `left` properties can be used to move the element from its normal position. + + + +### Absolute + +The `position-absolute` class allows you to position an element relative to its closest positioned ancestor. If no positioned ancestor is found, the element is positioned relative to the document body. + + + +### Fixed + +The `position-fixed` class allows you to position an element relative to the viewport. This means that the element will stay in the same position even when the page is scrolled. + + + +### Sticky + +The `position-sticky` class allows you to position an element based on the user's scroll position. The element is treated as `relative` until it crosses a specified threshold, at which point it is treated as `fixed`. + + diff --git a/packages/docs/src/plugins/icons.ts b/packages/docs/src/plugins/icons.ts index c0cf8a9cd90..10ede5a498f 100644 --- a/packages/docs/src/plugins/icons.ts +++ b/packages/docs/src/plugins/icons.ts @@ -48,6 +48,7 @@ export { mdiBookmark, mdiBookmarkMinus, mdiBookmarkOutline, + mdiBookOpenPageVariant, mdiBookVariant, mdiBottleTonicPlus, mdiBriefcase, @@ -194,6 +195,7 @@ export { mdiGithub, mdiGlassWine, mdiGoogleNearby, + mdiHandshakeOutline, mdiHeadQuestionOutline, mdiHeart, mdiHeartOutline, @@ -222,6 +224,7 @@ export { mdiLayersOutline, mdiLayersTriple, mdiLeaf, + mdiLicense, mdiLifebuoy, mdiLightbulbOnOutline, mdiLink, @@ -239,6 +242,7 @@ export { mdiMapMarkerOff, mdiMapMarkerOutline, mdiMaterialDesign, + mdiMedal, mdiMenu, mdiMenuDown, mdiMenuLeft, diff --git a/packages/docs/src/plugins/vuetify.ts b/packages/docs/src/plugins/vuetify.ts index 784df95bdb0..ccb12aad927 100644 --- a/packages/docs/src/plugins/vuetify.ts +++ b/packages/docs/src/plugins/vuetify.ts @@ -114,10 +114,6 @@ export function installVuetify (app: App) { }, aliases: { /* eslint-disable max-len */ - 'vuetify-play': [ - 'm6.376 13.184-4.11-7.192C1.505 4.66 2.467 3 4.003 3h8.532l-.953 1.576-.006.01-.396.677c-.429.732-.214 1.507.194 2.015.404.503 1.092.878 1.869.806a3.72 3.72 0 0 1 1.005.022c.276.053.434.143.523.237.138.146.38.635-.25 2.09-.893 1.63-1.553 1.722-1.847 1.677-.213-.033-.468-.158-.756-.406a4.95 4.95 0 0 1-.8-.927c-.39-.564-1.04-.84-1.66-.846-.625-.006-1.316.27-1.693.921l-.478.826-.911 1.506Z', - ['M9.093 11.552c.046-.079.144-.15.32-.148a.53.53 0 0 1 .43.207c.285.414.636.847 1.046 1.2.405.35.914.662 1.516.754 1.334.205 2.502-.698 3.48-2.495l.014-.028.013-.03c.687-1.574.774-2.852-.005-3.675-.37-.391-.861-.586-1.333-.676a5.243 5.243 0 0 0-1.447-.044c-.173.016-.393-.073-.54-.257-.145-.18-.127-.316-.082-.392l.393-.672L14.287 3h5.71c1.536 0 2.499 1.659 1.737 2.992l-7.997 13.996c-.768 1.344-2.706 1.344-3.473 0l-3.037-5.314 1.377-2.278.004-.006.004-.007.481-.831Z', 0.6], - ], x: ['M2.04875 3.00002L9.77052 13.3248L1.99998 21.7192H3.74882L10.5519 14.3697L16.0486 21.7192H22L13.8437 10.8137L21.0765 3.00002H19.3277L13.0624 9.76874L8.0001 3.00002H2.04875ZM4.62054 4.28821H7.35461L19.4278 20.4308H16.6937L4.62054 4.28821Z'], /* eslint-enable max-len */ }, diff --git a/packages/docs/tsconfig.json b/packages/docs/tsconfig.json index cafeeee0235..433e6b2fe8a 100644 --- a/packages/docs/tsconfig.json +++ b/packages/docs/tsconfig.json @@ -29,5 +29,6 @@ ], "outDir": "./dist" }, + "include": ["../api-generator/src/shims.d.ts"], "exclude": ["dist", "node_modules"], } diff --git a/packages/docs/vite.config.mts b/packages/docs/vite.config.mts index aeb0d6eba76..cacd075e64b 100644 --- a/packages/docs/vite.config.mts +++ b/packages/docs/vite.config.mts @@ -85,6 +85,7 @@ export default defineConfig(({ command, mode, isSsrBuild }) => { 'useHttpStore', 'useOneStore', 'useUserStore', + 'useQueueStore', 'useSettingsStore', 'useProductsStore', ], diff --git a/packages/vuetify/build/rollup.types.config.mjs b/packages/vuetify/build/rollup.types.config.mjs index 16e069b0ee8..15470d083ca 100644 --- a/packages/vuetify/build/rollup.types.config.mjs +++ b/packages/vuetify/build/rollup.types.config.mjs @@ -49,8 +49,13 @@ function createTypesConfig (input, output, renderChunk, filter) { code = new MagicString(code) if (renderChunk) await renderChunk(code) + + // vue-router is optional but we need to include some of its types code.replaceAll(/import([^;])*?from 'vue-router'/gm, '// @ts-ignore\n$&') + // tsc adds extra export statements to namespaces + code.replaceAll(/^\s*export \{\s*\};?$/gm, '') + const map = code.generateMap({ // source: 'source.js', // file: 'converted.js.map', diff --git a/packages/vuetify/cypress.config.ts b/packages/vuetify/cypress.config.ts index 4f026e24f2a..7d17f380bca 100644 --- a/packages/vuetify/cypress.config.ts +++ b/packages/vuetify/cypress.config.ts @@ -11,6 +11,6 @@ export default defineConfig({ supportFile: './cypress/support/index.ts', video: false, }, - viewportWidth: 1075, + viewportWidth: 1280, viewportHeight: 825, }) diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json index 712dd6e32c9..1b82b1f18ed 100755 --- a/packages/vuetify/package.json +++ b/packages/vuetify/package.json @@ -1,7 +1,7 @@ { "name": "vuetify", "description": "Vue Material Component Framework", - "version": "3.5.17", + "version": "3.6.3", "author": { "name": "John Leider", "email": "john@vuetifyjs.com" @@ -138,7 +138,7 @@ "@vitejs/plugin-vue": "^5.0.4", "@vitejs/plugin-vue-jsx": "^3.1.0", "@vue/babel-plugin-jsx": "^1.2.2", - "@vue/test-utils": "2.4.5", + "@vue/test-utils": "2.4.6", "acorn-walk": "^8.3.2", "autoprefixer": "^10.4.19", "babel-plugin-add-import-extension": "1.5.1", diff --git a/packages/vuetify/src/components/VAlert/VAlert.sass b/packages/vuetify/src/components/VAlert/VAlert.sass index c65a3dd0fe4..4111eec72d0 100644 --- a/packages/vuetify/src/components/VAlert/VAlert.sass +++ b/packages/vuetify/src/components/VAlert/VAlert.sass @@ -1,132 +1,133 @@ @use '../../styles/tools' @use './variables' as * -.v-alert - display: grid - flex: 1 1 - grid-template-areas: "prepend content append close" ". content . ." - grid-template-columns: max-content auto max-content max-content - position: relative - padding: $alert-padding - overflow: hidden - --v-border-color: #{$alert-border-color} - - @include tools.position($alert-positions) - @include tools.rounded($alert-border-radius) - @include tools.variant($alert-variants...) - - &--prominent - grid-template-areas: "prepend content append close" "prepend content . ." - - &.v-alert--border - --v-border-opacity: #{$alert-border-opacity} - - &.v-alert--border-start - padding-inline-start: $alert-padding + $alert-border-thin-width - - &.v-alert--border-end - padding-inline-end: $alert-padding + $alert-border-thin-width - - &--variant-plain - transition: $alert-plain-transition - - @at-root - @include tools.density('v-alert', $alert-density) using ($modifier) - padding-bottom: $alert-padding + $modifier - padding-top: $alert-padding + $modifier - - &.v-alert--border-top - padding-top: $alert-padding + $alert-border-thin-width + $modifier - - &.v-alert--border-bottom - padding-bottom: $alert-padding + $alert-border-thin-width + $modifier - -.v-alert__border - border-radius: inherit - bottom: 0 - left: 0 - opacity: var(--v-border-opacity) - position: absolute - pointer-events: none - right: 0 - top: 0 - width: 100% - - @include tools.border($alert-border...) - - .v-alert--border-start & - border-inline-start-width: $alert-border-thin-width - - .v-alert--border-end & - border-inline-end-width: $alert-border-thin-width - - .v-alert--border-top & - border-top-width: $alert-border-thin-width - - .v-alert--border-bottom & - border-bottom-width: $alert-border-thin-width - -.v-alert__close - flex: 0 1 auto - grid-area: close - -.v-alert__content - align-self: center - grid-area: content - overflow: hidden - -.v-alert__append, -.v-alert__close - align-self: flex-start - margin-inline-start: $alert-append-margin-inline-start - -.v-alert__append - align-self: flex-start - grid-area: append - - + .v-alert__close - margin-inline-start: $alert-append-close-margin-inline-start - -.v-alert__prepend - align-self: flex-start - display: flex - align-items: center - grid-area: prepend - margin-inline-end: $alert-prepend-margin-inline-end - - .v-alert--prominent & +@include tools.layer('components') + .v-alert + display: grid + flex: 1 1 + grid-template-areas: "prepend content append close" ". content . ." + grid-template-columns: max-content auto max-content max-content + position: relative + padding: $alert-padding + overflow: hidden + --v-border-color: #{$alert-border-color} + + @include tools.position($alert-positions) + @include tools.rounded($alert-border-radius) + @include tools.variant($alert-variants...) + + &--prominent + grid-template-areas: "prepend content append close" "prepend content . ." + + &.v-alert--border + --v-border-opacity: #{$alert-border-opacity} + + &.v-alert--border-start + padding-inline-start: $alert-padding + $alert-border-thin-width + + &.v-alert--border-end + padding-inline-end: $alert-padding + $alert-border-thin-width + + &--variant-plain + transition: $alert-plain-transition + + @at-root + @include tools.density('v-alert', $alert-density) using ($modifier) + padding-bottom: $alert-padding + $modifier + padding-top: $alert-padding + $modifier + + &.v-alert--border-top + padding-top: $alert-padding + $alert-border-thin-width + $modifier + + &.v-alert--border-bottom + padding-bottom: $alert-padding + $alert-border-thin-width + $modifier + + .v-alert__border + border-radius: inherit + bottom: 0 + left: 0 + opacity: var(--v-border-opacity) + position: absolute + pointer-events: none + right: 0 + top: 0 + width: 100% + + @include tools.border($alert-border...) + + .v-alert--border-start & + border-inline-start-width: $alert-border-thin-width + + .v-alert--border-end & + border-inline-end-width: $alert-border-thin-width + + .v-alert--border-top & + border-top-width: $alert-border-thin-width + + .v-alert--border-bottom & + border-bottom-width: $alert-border-thin-width + + .v-alert__close + flex: 0 1 auto + grid-area: close + + .v-alert__content align-self: center + grid-area: content + overflow: hidden + + .v-alert__append, + .v-alert__close + align-self: flex-start + margin-inline-start: $alert-append-margin-inline-start + + .v-alert__append + align-self: flex-start + grid-area: append + + + .v-alert__close + margin-inline-start: $alert-append-close-margin-inline-start + + .v-alert__prepend + align-self: flex-start + display: flex + align-items: center + grid-area: prepend + margin-inline-end: $alert-prepend-margin-inline-end -.v-alert__underlay - grid-area: none - position: absolute - - .v-alert--border-start & - border-top-left-radius: 0 - border-bottom-left-radius: 0 - - .v-alert--border-end & - border-top-right-radius: 0 - border-bottom-right-radius: 0 - - .v-alert--border-top & - border-top-left-radius: 0 - border-top-right-radius: 0 - - .v-alert--border-bottom & - border-bottom-left-radius: 0 - border-bottom-right-radius: 0 - -.v-alert-title - align-items: center - align-self: center - display: flex - font-size: $alert-title-font-size - font-weight: $alert-title-font-weight - hyphens: $alert-title-hyphens - letter-spacing: $alert-title-letter-spacing - line-height: $alert-title-line-height - overflow-wrap: $alert-title-overflow-wrap - text-transform: $alert-title-text-transform - word-break: $alert-title-word-break - word-wrap: $alert-title-word-wrap + .v-alert--prominent & + align-self: center + + .v-alert__underlay + grid-area: none + position: absolute + + .v-alert--border-start & + border-top-left-radius: 0 + border-bottom-left-radius: 0 + + .v-alert--border-end & + border-top-right-radius: 0 + border-bottom-right-radius: 0 + + .v-alert--border-top & + border-top-left-radius: 0 + border-top-right-radius: 0 + + .v-alert--border-bottom & + border-bottom-left-radius: 0 + border-bottom-right-radius: 0 + + .v-alert-title + align-items: center + align-self: center + display: flex + font-size: $alert-title-font-size + font-weight: $alert-title-font-weight + hyphens: $alert-title-hyphens + letter-spacing: $alert-title-letter-spacing + line-height: $alert-title-line-height + overflow-wrap: $alert-title-overflow-wrap + text-transform: $alert-title-text-transform + word-break: $alert-title-word-break + word-wrap: $alert-title-word-wrap diff --git a/packages/vuetify/src/components/VApp/VApp.sass b/packages/vuetify/src/components/VApp/VApp.sass index 68f2ccf0bc4..5a57a27850c 100644 --- a/packages/vuetify/src/components/VApp/VApp.sass +++ b/packages/vuetify/src/components/VApp/VApp.sass @@ -1,16 +1,18 @@ +@use '../../styles/tools' @use './variables' as * -.v-application - display: flex - background: $application-background - color: $application-color +@include tools.layer('components') + .v-application + display: flex + background: $application-background + color: $application-color -.v-application__wrap - backface-visibility: hidden - display: flex - flex-direction: column - flex: 1 1 auto - max-width: 100% - min-height: 100vh - min-height: 100dvh - position: relative + .v-application__wrap + backface-visibility: hidden + display: flex + flex-direction: column + flex: 1 1 auto + max-width: 100% + min-height: 100vh + min-height: 100dvh + position: relative diff --git a/packages/vuetify/src/components/VApp/VApp.tsx b/packages/vuetify/src/components/VApp/VApp.tsx index fdbb9870bc9..063152fc1f7 100644 --- a/packages/vuetify/src/components/VApp/VApp.tsx +++ b/packages/vuetify/src/components/VApp/VApp.tsx @@ -8,6 +8,7 @@ import { useRtl } from '@/composables/locale' import { makeThemeProps, provideTheme } from '@/composables/theme' // Utilities +import { Suspense } from 'vue' import { genericComponent, propsFactory, useRender } from '@/util' export const makeVAppProps = propsFactory({ @@ -41,7 +42,11 @@ export const VApp = genericComponent()({ ]} >
- { slots.default?.() } + + <> + { slots.default?.() } + +
)) diff --git a/packages/vuetify/src/components/VAppBar/VAppBar.sass b/packages/vuetify/src/components/VAppBar/VAppBar.sass index 79714ed2f50..44d695d6d36 100644 --- a/packages/vuetify/src/components/VAppBar/VAppBar.sass +++ b/packages/vuetify/src/components/VAppBar/VAppBar.sass @@ -1,14 +1,15 @@ @use '../../styles/tools' @use './variables' as * -.v-app-bar - display: flex +@include tools.layer('components') + .v-app-bar + display: flex - &.v-toolbar - @include tools.theme($app-bar-theme...) + &.v-toolbar + @include tools.theme($app-bar-theme...) - &:not(.v-toolbar--flat) - @include tools.elevation($app-bar-elevation) + &:not(.v-toolbar--flat) + @include tools.elevation($app-bar-elevation) - &:not(.v-toolbar--absolute) - padding-inline-end: var(--v-scrollbar-offset) + &:not(.v-toolbar--absolute) + padding-inline-end: var(--v-scrollbar-offset) diff --git a/packages/vuetify/src/components/VAppBar/VAppBar.tsx b/packages/vuetify/src/components/VAppBar/VAppBar.tsx index ab1fcd0842b..ec2b9b35708 100644 --- a/packages/vuetify/src/components/VAppBar/VAppBar.tsx +++ b/packages/vuetify/src/components/VAppBar/VAppBar.tsx @@ -57,7 +57,7 @@ export const VAppBar = genericComponent()({ const behavior = new Set(props.scrollBehavior?.split(' ') ?? []) return { hide: behavior.has('hide'), - // fullyHide: behavior.has('fully-hide'), + fullyHide: behavior.has('fully-hide'), inverted: behavior.has('inverted'), collapse: behavior.has('collapse'), elevate: behavior.has('elevate'), @@ -69,7 +69,7 @@ export const VAppBar = genericComponent()({ const behavior = scrollBehavior.value return ( behavior.hide || - // behavior.fullyHide || + behavior.fullyHide || behavior.inverted || behavior.collapse || behavior.elevate || @@ -85,11 +85,18 @@ export const VAppBar = genericComponent()({ scrollRatio, } = useScroll(props, { canScroll }) + const canHide = computed(() => ( + scrollBehavior.value.hide || + scrollBehavior.value.fullyHide + )) const isCollapsed = computed(() => props.collapse || ( scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0) )) const isFlat = computed(() => props.flat || ( + scrollBehavior.value.fullyHide && + !isActive.value + ) || ( scrollBehavior.value.elevate && (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0) )) @@ -99,17 +106,19 @@ export const VAppBar = genericComponent()({ : undefined )) const height = computed(() => { - if (scrollBehavior.value.hide && scrollBehavior.value.inverted) return 0 + const height = Number(vToolbarRef.value?.contentHeight ?? props.height) + const extensionHeight = Number(vToolbarRef.value?.extensionHeight ?? 0) - const height = vToolbarRef.value?.contentHeight ?? 0 - const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0 + if (!canHide.value) return (height + extensionHeight) - return (height + extensionHeight) + return currentScroll.value < scrollThreshold.value || scrollBehavior.value.fullyHide + ? (height + extensionHeight) + : height }) useToggleScope(computed(() => !!props.scrollBehavior), () => { watchEffect(() => { - if (scrollBehavior.value.hide) { + if (canHide.value) { if (scrollBehavior.value.inverted) { isActive.value = currentScroll.value > scrollThreshold.value } else { @@ -122,7 +131,7 @@ export const VAppBar = genericComponent()({ }) const { ssrBootStyles } = useSsrBoot() - const { layoutItemStyles } = useLayoutItem({ + const { layoutItemStyles, layoutIsReady } = useLayoutItem({ id: props.name, order: computed(() => parseInt(props.order, 10)), position: toRef(props, 'location'), @@ -162,7 +171,7 @@ export const VAppBar = genericComponent()({ ) }) - return {} + return layoutIsReady }, }) diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass index 535b782dd17..b34cf13c8b9 100644 --- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass +++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass @@ -4,102 +4,103 @@ @use '../../styles/tools' @use './variables' as * -.v-autocomplete - .v-field - .v-text-field__prefix, - .v-text-field__suffix, - .v-field__input, - &.v-field - cursor: text - - .v-field - .v-field__input - > input - flex: 1 1 - - .v-field - input - min-width: $autocomplete-focused-input - - &:not(.v-field--focused) - input - min-width: 0 - - .v-field--dirty - .v-autocomplete__selection - margin-inline-end: $autocomplete-selection-gap - - .v-autocomplete__selection-text - overflow: hidden - text-overflow: ellipsis - white-space: nowrap - -.v-autocomplete - &__content - overflow: hidden - - @include tools.elevation($autocomplete-content-elevation) - @include tools.rounded($autocomplete-content-border-radius) - - &__mask - background: rgb(var(--v-theme-surface-light)) - - &__selection - display: inline-flex - align-items: center - height: calc($input-font-size * $input-line-height) - letter-spacing: inherit - line-height: inherit - max-width: calc(100% - $autocomplete-selection-gap - $autocomplete-input-buffer) - - &__selection - &:first-child - margin-inline-start: 0 - - &--chips.v-input--density-compact - .v-field--variant-solo, - .v-field--variant-solo-inverted, - .v-field--variant-filled, - .v-field--variant-solo-filled - .v-label.v-field-label - &--floating - top: 0px - - &--selecting-index - .v-autocomplete__selection - opacity: var(--v-medium-emphasis-opacity) - - &--selected - opacity: 1 - - .v-field__input > input - caret-color: transparent - - &--single:not(.v-autocomplete--selection-slot) - &.v-text-field input - flex: 1 1 - position: absolute - left: 0 - right: 0 - width: 100% - padding-inline: inherit - - .v-field--active +@include tools.layer('components') + .v-autocomplete + .v-field + .v-text-field__prefix, + .v-text-field__suffix, + .v-field__input, + &.v-field + cursor: text + + .v-field + .v-field__input + > input + flex: 1 1 + + .v-field input - transition: none + min-width: $autocomplete-focused-input - .v-field--dirty:not(.v-field--focused) - input - opacity: 0 + &:not(.v-field--focused) + input + min-width: 0 - .v-field--focused + .v-field--dirty + .v-autocomplete__selection + margin-inline-end: $autocomplete-selection-gap + + .v-autocomplete__selection-text + overflow: hidden + text-overflow: ellipsis + white-space: nowrap + + .v-autocomplete + &__content + overflow: hidden + + @include tools.elevation($autocomplete-content-elevation) + @include tools.rounded($autocomplete-content-border-radius) + + &__mask + background: rgb(var(--v-theme-surface-light)) + + &__selection + display: inline-flex + align-items: center + height: calc($input-font-size * $input-line-height) + letter-spacing: inherit + line-height: inherit + max-width: calc(100% - $autocomplete-selection-gap - $autocomplete-input-buffer) + + &__selection + &:first-child + margin-inline-start: 0 + + &--chips.v-input--density-compact + .v-field--variant-solo, + .v-field--variant-solo-inverted, + .v-field--variant-filled, + .v-field--variant-solo-filled + .v-label.v-field-label + &--floating + top: 0px + + &--selecting-index .v-autocomplete__selection - opacity: 0 + opacity: var(--v-medium-emphasis-opacity) - &__menu-icon - margin-inline-start: 4px - transition: $autocomplete-transition + &--selected + opacity: 1 - .v-autocomplete--active-menu & - opacity: var(--v-high-emphasis-opacity) - transform: rotate(180deg) + .v-field__input > input + caret-color: transparent + + &--single:not(.v-autocomplete--selection-slot) + &.v-text-field input + flex: 1 1 + position: absolute + left: 0 + right: 0 + width: 100% + padding-inline: inherit + + .v-field--active + input + transition: none + + .v-field--dirty:not(.v-field--focused) + input + opacity: 0 + + .v-field--focused + .v-autocomplete__selection + opacity: 0 + + &__menu-icon + margin-inline-start: 4px + transition: $autocomplete-transition + + .v-autocomplete--active-menu & + opacity: var(--v-high-emphasis-opacity) + transform: rotate(180deg) diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx index 81d862e4185..8e2cc9ac41c 100644 --- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx +++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx @@ -377,7 +377,7 @@ export const VAutocomplete = genericComponent