Vuetify 3

Question

Vuetify 3

KaelWD opened this issue 2 years ago · comments

Kael commented 2 years ago

Components

VTabsItems -> VWindow
VTabItem -> VWindowItem
VTabsSlider removed - only sliderColor allowed

Props

color: primary darken-1 -> primary-darken-1
light -> theme="light"
dark -> theme="dark"

App Bar

bottom -> position="bottom"
dense -> density="compact" **double-check this
src -> image
value -> model-value

Avatar

tile -> rounded="0"

Badge

value -> model-value
tile -> rounded="0"
top -> location="top"
bottom -> location="bottom"
left -> location="left"
right -> location="right"

Banner

single-line -> lines="one"
tile -> rounded="0"

Bottom Navigation

background-color -> bg-color
shift -> mode="shift"
horizontal -> mode="horizontal"
value -> model-value

Btn

outlined -> variant="outlined"
plain -> variant="plain"
text -> variant="text"
x-small -> size="x-small"
small -> size="small"
large -> size="large"
x-large -> size="x-large"
absolute -> position="absolute"
fixed -> position="fixed"
depressed -> elevation="0"
ripple - needs to be updated to accept an object

Card

img -> image

Chip

x-small -> size="x-small"
small -> size="small"
large -> size="large"
x-large -> size="x-large"
outlined -> variant="outline"

Expansion Panel

active-class -> selected-class

Expansion Panels

accordion -> variant="accordion"
inset -> variant="inset"
popout -> variant="popout"

File Input

background-color -> bg-color
filled -> variant="filled"
outlined -> variant="outlined"
'underlined', 'outlined', 'filled', 'contained', 'plain'

Footer

absolute -> position="absolute"
fixed -> position="fixed"

Icon

x-small -> size="x-small"
small -> size="small"
large -> size="large"
x-large -> size="x-large"

Input

dense -> density="compact"
value -> model-value

Item Group

value -> model-value

Item

active-class -> selected-class

List

three-line -> lines="three"
two-line -> lines="two"
color -> bg-color

Radio/checkbox

onIcon -> trueIcon
offIcon -> falseIcon

RadioGroup

row -> inline

Slider

vertical -> direction="vertical"
ticks -> show-ticks
- One-time
tick-labels -> ticks

Text Field

filled -> variant="filled"
- filled is the new default variant
outlined -> variant="outlined"
plain -> variant="plain"
solo -> variant="contained"
variant="underlined" -> was the v2 default variant

Tabs

backgroundColor -> bgColor

Slots

Classes

.primary .darken-1 -> .primary-darken-1
.text--primary -> .text-high-emphasis
.text--secondary -> .text-medium-emphasis
.text--disabled -> .text-disabled

JD Solanki · Answer 1 · Tue Apr 26 2022 13:29:00 GMT+0800 (China Standard Time)

v2 to v3

Updates / Breaking Changes

Components

Alert

Default margin-bottom is removed

Badge

location prop top-{left|right} & bottom-{left|right} is now top-{start|end} & bottom-{start|end}.

All left and right have been changed to start and end. vuetifyjs/vuetify#15000

Styles/SCSS

Default margin-bottom for p tag is removed
No default styling for code tag
Setting $color-pack SASS variable to false will not generate class .text-white (there might be more)

Might be in WIP

Button: does not have fab floating button.
Button: does not have loader feature.
Button: does not have speed dial button.
Avatar: avatar rounded feature missing
Alert: does not support transition prop.
List: No flat prop

Kael · Answer 2 · Sat Oct 29 2022 21:03:59 GMT+0800 (China Standard Time)

Published 2.0.0-beta.0. Still need to add events and slots, and make sure I didn't miss anything.

Tobias Trumm · Answer 3 · Thu Nov 03 2022 23:19:20 GMT+0800 (China Standard Time)

I tried using the 2.0.0-beta.0 with vuetify 3.0.0 and got the following error:

$ npx eslint

Oops! Something went wrong! :(

ESLint: 8.26.0

Error [ERR_REQUIRE_ESM]: Failed to load plugin 'vuetify' declared in '': require() of ES Module /<redacted>/node_modules/vuetify/lib/framework.mjs not supported.
Instead change the require of /<redacted>/node_modules/vuetify/lib/framework.mjs to a dynamic import() which is available in all CommonJS modules.
Referenced from: 
    at Object.<anonymous> (/<redacted>/node_modules/eslint-plugin-vuetify/lib/rules/grid-unknown-attributes.js:17:5)

grid-unknown-attributes.js requires vuetify

const { components } = require('vuetify')

but I think vuetify 3.0.0 no longer provides a commonJS build. Deleting node_modules/eslint-plugin-vuetify/lib/rules/grid-unknown-attributes.js "fixes" this issue.

Edgar Schnüriger · Answer 4 · Tue Jan 31 2023 23:52:18 GMT+0800 (China Standard Time)

v-form: lazy-validation ~~-> validate-on="submit"~~ see below

Kael · Answer 5 · Wed Feb 01 2023 00:17:33 GMT+0800 (China Standard Time)

Not really the same. lazy-validation set the model to true unless there was a visible error in the form, v3's form uses true | false | null instead so you can do the same thing by treating null as true (isValid = model !== false).
v2 didn't have anything like validate-on, you could set validate-on-blur on individual inputs but there was no way to delay validation of the entire form.

Edgar Schnüriger · Answer 6 · Wed Feb 08 2023 00:15:10 GMT+0800 (China Standard Time)

What about absolute prop on v-linear-progress? Docs say it's still supported, but the linter complains...

Mathieu Laurent · Answer 7 · Wed Feb 22 2023 21:36:35 GMT+0800 (China Standard Time)

I added a small PR #47 VSimpleTable -> VTable

Christian Grossmüller · Answer 8 · Fri Feb 24 2023 04:01:24 GMT+0800 (China Standard Time)

Hi since i came across this error while configuring eslint for a new project

Error: Failed to load plugin 'vuetify' declared in '.eslintrc.js': Cannot find module ' <... root ...>/node_modules/vuetify/es5/components/VGrid/VContainer'
Referenced from: <... root ...>/.eslintrc.js

I found no hints whatsoever (since vuetify and eslint-plugin-vuetify is installed) so i wonder if it has to do with vuetify 3.0 and the latest version forgot the grid components?

Kael · Answer 9 · Fri Feb 24 2023 21:26:43 GMT+0800 (China Standard Time)

@chgad you have an old version of eslint-plugin-vuetify installed

Christian Grossmüller · Answer 10 · Sat Feb 25 2023 00:20:35 GMT+0800 (China Standard Time)

@chgad you have an old version of eslint-plugin-vuetify installed

I could have sworn i quadruple checked that one, please excuse the inconvenience.

Manoah Tervoort · Answer 11 · Wed Mar 01 2023 20:46:46 GMT+0800 (China Standard Time)

v-snackbar: :elevation="xx" -> class="elevation-xx"

Michał Olejniczak · Answer 12 · Wed Mar 08 2023 02:07:45 GMT+0800 (China Standard Time)

Do you have any progress documentation for that?
I want to help, but I don't know what is already done.

Masashi Yoshikawa · Answer 13 · Tue Apr 04 2023 10:11:30 GMT+0800 (China Standard Time)

How can I exclude only v-data-table judgment with the vuetify/no-deprecated-components rule?

As long as it's in labs, I understand that the API will change eventually.

Lucas Ruston · Answer 14 · Fri Nov 03 2023 22:10:59 GMT+0800 (China Standard Time)

Hi,

Do you have a list (like your first comment) of the changes that must be implemented? I'm ready to help.

Kael · Answer 15 · Fri Dec 08 2023 08:49:26 GMT+0800 (China Standard Time)

@logue follow #59 for exclusion settings