From 178fd0277fb15be8783946be5c2b0e76fb2d73e7 Mon Sep 17 00:00:00 2001 From: Jack Huynh Date: Sat, 15 Mar 2025 11:59:46 +0700 Subject: [PATCH 1/3] 1.0.37 Vuetify --- package.json | 2 +- src/main.ts | 2 + src/plugins/vuetify/index.ts | 30 +++++ src/plugins/vuetify/text-colors.ts | 112 ++++++++++++++++++ src/plugins/vuetify/v-alert.ts | 22 ++++ src/plugins/vuetify/v-chip.ts | 58 +++++++++ src/plugins/vuetify/v-dialog-v-menu.ts | 22 ++++ src/plugins/vuetify/v-list-item-content.ts | 28 +++++ .../vuetify/v-list-item-group-value.ts | 26 ++++ src/plugins/vuetify/v-select-change.ts | 32 +++++ .../vuetify/v-select-v-autocomplete.ts | 32 +++++ src/plugins/vuetify/v-simple-table.ts | 22 ++++ src/plugins/vuetify/v-tabs.ts | 26 ++++ src/plugins/vuetify/v-text-field.ts | 51 ++++++++ src/plugins/vuetify/v-tooltip-activators.ts | 35 ++++++ src/plugins/vuetify/v-virtual-scroll.ts | 22 ++++ 16 files changed, 521 insertions(+), 1 deletion(-) create mode 100644 src/plugins/vuetify/index.ts create mode 100644 src/plugins/vuetify/text-colors.ts create mode 100644 src/plugins/vuetify/v-alert.ts create mode 100644 src/plugins/vuetify/v-chip.ts create mode 100644 src/plugins/vuetify/v-dialog-v-menu.ts create mode 100644 src/plugins/vuetify/v-list-item-content.ts create mode 100644 src/plugins/vuetify/v-list-item-group-value.ts create mode 100644 src/plugins/vuetify/v-select-change.ts create mode 100644 src/plugins/vuetify/v-select-v-autocomplete.ts create mode 100644 src/plugins/vuetify/v-simple-table.ts create mode 100644 src/plugins/vuetify/v-tabs.ts create mode 100644 src/plugins/vuetify/v-text-field.ts create mode 100644 src/plugins/vuetify/v-tooltip-activators.ts create mode 100644 src/plugins/vuetify/v-virtual-scroll.ts diff --git a/package.json b/package.json index 9bcfd7f..23e17b9 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "vue-upgrade-tool", + "name": "vue-vuetify-upgrade-tool", "description": "Tool to aid in Vue 2 -> Vue 3 migration", "type": "module", "version": "1.0.37", diff --git a/src/main.ts b/src/main.ts index fe7e3ca..c7efc34 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,6 +3,7 @@ import process from 'process'; import { vue } from './plugins/vue/index.js'; import { vuex } from './plugins/vuex/index.js'; +import { vuetify } from './plugins/vuetify/index.js'; import { vueTestUtils } from './plugins/vue-test-utils/index.js'; import { vueRouter } from './plugins/vue-router/index.js'; @@ -10,6 +11,7 @@ const cli = createVueMetamorphCli({ plugins: [ vue(), vuex(), + vuetify(), vueTestUtils(), vueRouter(), ], diff --git a/src/plugins/vuetify/index.ts b/src/plugins/vuetify/index.ts new file mode 100644 index 0000000..6ff1a2e --- /dev/null +++ b/src/plugins/vuetify/index.ts @@ -0,0 +1,30 @@ +import { Plugin } from 'vue-metamorph'; +import { vListItemGroupValuePlugin } from './v-list-item-group-value'; +import { textColorPlugin } from './text-colors'; +import { vListItemContentPlugin } from './v-list-item-content'; +import { vChipPlugin } from './v-chip'; +import { vSelectChangePlugin } from './v-select-change'; +import { vSelectVAutocompletePlugin } from './v-select-v-autocomplete'; +import { vTabsPlugin } from './v-tabs'; +import { vSimpleTablePlugin } from './v-simple-table'; +import { vVirtualScrollPlugin } from './v-virtual-scroll'; +import { vTextFieldPlugin } from './v-text-field'; +import { vTooltipActivatorsPlugin } from './v-tooltip-activators'; +import { vDialogVMenuPlugin } from './v-dialog-v-menu'; +import { vAlertPlugin } from './v-alert'; + +export const vuetify = (): Plugin[] => ([ + vListItemGroupValuePlugin, + textColorPlugin, + vListItemContentPlugin, + vChipPlugin, + vSelectChangePlugin, + vSelectVAutocompletePlugin, + vTabsPlugin, + vSimpleTablePlugin, + vVirtualScrollPlugin, + vTextFieldPlugin, + vTooltipActivatorsPlugin, + vDialogVMenuPlugin, + vAlertPlugin, +]); \ No newline at end of file diff --git a/src/plugins/vuetify/text-colors.ts b/src/plugins/vuetify/text-colors.ts new file mode 100644 index 0000000..dc90e4c --- /dev/null +++ b/src/plugins/vuetify/text-colors.ts @@ -0,0 +1,112 @@ +import { CodemodPlugin } from 'vue-metamorph'; +import * as changeCase from 'change-case'; + +export const textColorPlugin: CodemodPlugin = { + type: 'codemod', + name: 'vuetify-text-colors', + transform({ sfcAST, utils: { traverseTemplateAST } }) { + let count = 0; + + if (sfcAST) { + traverseTemplateAST(sfcAST, { + leaveNode(node) { + if (node.type === 'VAttribute' && node.key?.name === 'class') { + const value = node.value?.value; + if (value) { + const replacements = [ + { from: '--text', to: '-' }, + { from: '--background', to: '-bg' }, + { from: '--border', to: '-border' }, + { from: '--icon', to: '-icon' }, + { from: '--disabled', to: '-disabled' }, + { from: '--hover', to: '-hover' }, + { from: '--focus', to: '-focus' }, + { from: '--active', to: '-active' }, + { from: '--selected', to: '-selected' }, + { from: '--error', to: '-error' }, + { from: '--success', to: '-success' }, + { from: '--warning', to: '-warning' }, + { from: '--info', to: '-info' }, + { from: '--primary', to: '-primary' }, + { from: '--secondary', to: '-secondary' }, + { from: '--tertiary', to: '-tertiary' }, + { from: '--quaternary', to: '-quaternary' }, + { from: '--accent', to: '-accent' }, + { from: '--dark', to: '-dark' }, + { from: '--light', to: '-light' }, + { from: '--transparent', to: '-transparent' }, + { from: '--elevation', to: '-elevation' }, + { from: '--rounded', to: '-rounded' }, + { from: '--square', to: '-square' }, + { from: '--circle', to: '-circle' }, + { from: '--small', to: '-small' }, + { from: '--medium', to: '-medium' }, + { from: '--large', to: '-large' }, + { from: '--extra-large', to: '-extra-large' }, + { from: '--full-width', to: '-full-width' }, + { from: '--full-height', to: '-full-height' }, + { from: '--flex', to: '-flex' }, + { from: '--inline-block', to: '-inline-block' }, + { from: '--block', to: '-block' }, + { from: '--inline', to: '-inline' }, + { from: '--hidden', to: '-hidden' }, + { from: '--visible', to: '-visible' }, + { from: '--scrollable', to: '-scrollable' }, + { from: '--overflow-hidden', to: '-overflow-hidden' }, + { from: '--overflow-visible', to: '-overflow-visible' }, + { from: '--overflow-auto', to: '-overflow-auto' }, + { from: '--overflow-scroll', to: '-overflow-scroll' }, + { from: '--overflow-x-hidden', to: '-overflow-x-hidden' }, + { from: '--overflow-y-hidden', to: '-overflow-y-hidden' }, + { from: '--overflow-x-visible', to: '-overflow-x-visible' }, + { from: '--overflow-y-visible', to: '-overflow-y-visible' }, + { from: '--overflow-x-auto', to: '-overflow-x-auto' }, + { from: '--overflow-y-auto', to: '-overflow-y-auto' }, + { from: '--overflow-x-scroll', to: '-overflow-x-scroll' }, + { from: '--overflow-y-scroll', to: '-overflow-y-scroll' }, + { from: '--position-relative', to: '-position-relative' }, + { from: '--position-absolute', to: '-position-absolute' }, + { from: '--position-fixed', to: '-position-fixed' }, + { from: '--position-sticky', to: '-position-sticky' }, + { from: '--position-static', to: '-position-static' }, + { from: '--position-initial', to: '-position-initial' }, + { from: '--position-final', to: '-position-final' }, + { from: '--position-center', to: '-position-center' }, + { from: '--position-top', to: '-position-top' }, + { from: '--position-bottom', to: '-position-bottom' }, + { from: '--position-left', to: '-position-left' }, + { from: '--position-right', to: '-position-right' }, + { from: '--position-top-left', to: '-position-top-left' }, + { from: '--position-top-right', to: '-position-top-right' }, + { from: '--position-bottom-left', to: '-position-bottom-left' }, + { from: '--position-bottom-right', to: '-position-bottom-right' }, + { from: '--position-center-left', to: '-position-center-left' }, + { from: '--position-center-right', to: '-position-center-right' }, + { from: '--position-center-top', to: '-position-center-top' }, + { from: '--position-center-bottom', to: '-position-center-bottom' }, + { from: '--position-center-horizontal', to: '-position-center-horizontal' }, + { from: '--position-center-vertical', to: '-position-center-vertical' }, + { from: '--position-center-all', to: '-position-center-all' }, + { from: '--position-center-middle', to: '-position-center-middle' }, + { from: '--position-center-middle-horizontal', to: '-position-center-middle-horizontal' }, + { from: '--position-center-middle-vertical', to: '-position-center-middle-vertical' }, + { from: '--position-center-middle-horizontal-vertical', to: '-position-center-middle-horizontal-vertical' }, + { from: '--position-center-middle-horizontal-vertical-all', to: '-position-center-middle-horizontal-vertical-all' }, + ]; + + let updatedValue = value; + replacements.forEach(({ from, to }) => { + updatedValue = updatedValue.replace(new RegExp(`\\b${changeCase.camelCase(changeCase.pascalCase(from))}\\b`, 'g'), to); + count++; + }); + + node.value.value = updatedValue; + } + } + }, + }); + } + + return count; + }, +}; \ No newline at end of file diff --git a/src/plugins/vuetify/v-alert.ts b/src/plugins/vuetify/v-alert.ts new file mode 100644 index 0000000..e634f47 --- /dev/null +++ b/src/plugins/vuetify/v-alert.ts @@ -0,0 +1,22 @@ +import { CodemodPlugin } from 'vue-metamorph'; + +export const vAlertPlugin: CodemodPlugin = { + type: 'codemod', + name: 'vuetify-v-alert', + transform({ sfcAST, utils: { traverseTemplateAST } }) { + let count = 0; + + if (sfcAST) { + traverseTemplateAST(sfcAST, { + leaveNode(node) { + if (node.type === 'VAttribute' && node.key?.name === 'type') { + node.key.name = 'variant'; + count++; + } + }, + }); + } + + return count; + }, +}; \ No newline at end of file diff --git a/src/plugins/vuetify/v-chip.ts b/src/plugins/vuetify/v-chip.ts new file mode 100644 index 0000000..1f5719f --- /dev/null +++ b/src/plugins/vuetify/v-chip.ts @@ -0,0 +1,58 @@ +import { CodemodPlugin } from 'vue-metamorph'; + +export const vChipPlugin: CodemodPlugin = { + type: 'codemod', + name: 'vuetify-v-chip', + transform({ sfcAST, utils: { traverseTemplateAST } }) { + let count = 0; + + if (sfcAST) { + traverseTemplateAST(sfcAST, { + leaveNode(node) { + if (node.type === 'VElement' && node.rawName === 'v-chip') { + for (const attr of node.startTag.attributes) { + if (['small', 'large'].includes(attr.key?.name)) { + attr.key.name = 'size'; + count++; + } + + if (attr.key?.name === 'class') { + const value = attr.value?.value; + if (value) { + const colorMap = { + 'primary': 'primary', + 'secondary': 'secondary', + 'success': 'success', + 'warning': 'warning', + 'error': 'error', + }; + + Object.entries(colorMap).forEach(([from, to]) => { + if (value.includes(from)) { + node.startTag.attributes.push({ + key: { name: 'color' }, + value: { type: 'VLiteral', value: `"${to}"` }, + }); + attr.value.value = value.replace(from, ''); + count++; + } + }); + } + } + + if (!node.startTag.attributes.some((a) => a.key?.name === 'variant')) { + node.startTag.attributes.push({ + key: { name: 'variant' }, + value: { type: 'VLiteral', value: '"flat"' }, + }); + count++; + } + } + } + }, + }); + } + + return count; + }, +}; \ No newline at end of file diff --git a/src/plugins/vuetify/v-dialog-v-menu.ts b/src/plugins/vuetify/v-dialog-v-menu.ts new file mode 100644 index 0000000..1e533bc --- /dev/null +++ b/src/plugins/vuetify/v-dialog-v-menu.ts @@ -0,0 +1,22 @@ +import { CodemodPlugin } from 'vue-metamorph'; + +export const vDialogVMenuPlugin: CodemodPlugin = { + type: 'codemod', + name: 'vuetify-v-dialog-v-menu', + transform({ sfcAST, utils: { traverseTemplateAST } }) { + let count = 0; + + if (sfcAST) { + traverseTemplateAST(sfcAST, { + leaveNode(node) { + if (node.type === 'VAttribute' && node.key?.name === 'value') { + node.key.name = 'modelValue'; + count++; + } + }, + }); + } + + return count; + }, +}; \ No newline at end of file diff --git a/src/plugins/vuetify/v-list-item-content.ts b/src/plugins/vuetify/v-list-item-content.ts new file mode 100644 index 0000000..a89a0d7 --- /dev/null +++ b/src/plugins/vuetify/v-list-item-content.ts @@ -0,0 +1,28 @@ +import { CodemodPlugin } from 'vue-metamorph'; + +export const vListItemContentPlugin: CodemodPlugin = { + type: 'codemod', + name: 'vuetify-v-list-item-content', + transform({ sfcAST, utils: { traverseTemplateAST } }) { + let count = 0; + + if (sfcAST) { + traverseTemplateAST(sfcAST, { + leaveNode(node) { + if (node.type === 'VElement' && node.rawName === 'v-list-item-content') { + if (node.children.length > 0) { + node.parent.children.splice( + node.parent.children.indexOf(node), + 1, + ...node.children + ); + count++; + } + } + }, + }); + } + + return count; + }, +}; \ No newline at end of file diff --git a/src/plugins/vuetify/v-list-item-group-value.ts b/src/plugins/vuetify/v-list-item-group-value.ts new file mode 100644 index 0000000..5aaded7 --- /dev/null +++ b/src/plugins/vuetify/v-list-item-group-value.ts @@ -0,0 +1,26 @@ +import { CodemodPlugin } from 'vue-metamorph'; + +export const vListItemGroupValuePlugin: CodemodPlugin = { + type: 'codemod', + name: 'vuetify-v-list-item-group-value', + transform({ sfcAST, utils: { traverseTemplateAST } }) { + let count = 0; + + if (sfcAST) { + traverseTemplateAST(sfcAST, { + leaveNode(node) { + if (node.type === 'VElement' && node.rawName === 'v-list-item-group') { + for (const attr of node.startTag.attributes) { + if (attr.key?.name === 'value') { + attr.key.name = 'modelValue'; + count++; + } + } + } + }, + }); + } + + return count; + }, +}; \ No newline at end of file diff --git a/src/plugins/vuetify/v-select-change.ts b/src/plugins/vuetify/v-select-change.ts new file mode 100644 index 0000000..c1c4bf3 --- /dev/null +++ b/src/plugins/vuetify/v-select-change.ts @@ -0,0 +1,32 @@ +import { CodemodPlugin } from 'vue-metamorph'; + +export const vSelectChangePlugin: CodemodPlugin = { + type: 'codemod', + name: 'vuetify-v-select-change', + transform({ sfcAST, utils: { traverseTemplateAST } }) { + let count = 0; + + if (sfcAST) { + traverseTemplateAST(sfcAST, { + leaveNode(node) { + if (node.type === 'VElement' && node.rawName === 'v-select') { + for (const attr of node.startTag.attributes) { + if (attr.key?.name === 'on' && attr.value?.type === 'VObjectExpression') { + const changeHandler = attr.value.properties.find( + (prop) => prop.key?.type === 'VIdentifier' && prop.key.name === 'change' + ); + + if (changeHandler) { + changeHandler.key.name = 'update:modelValue'; + count++; + } + } + } + } + }, + }); + } + + return count; + }, +}; \ No newline at end of file diff --git a/src/plugins/vuetify/v-select-v-autocomplete.ts b/src/plugins/vuetify/v-select-v-autocomplete.ts new file mode 100644 index 0000000..d3390bd --- /dev/null +++ b/src/plugins/vuetify/v-select-v-autocomplete.ts @@ -0,0 +1,32 @@ +import { CodemodPlugin } from 'vue-metamorph'; + +export const vSelectVAutocompletePlugin: CodemodPlugin = { + type: 'codemod', + name: 'vuetify-v-select-v-autocomplete', + transform({ sfcAST, utils: { traverseTemplateAST } }) { + let count = 0; + + if (sfcAST) { + traverseTemplateAST(sfcAST, { + leaveNode(node) { + if (node.type === 'VElement' && ['v-select', 'v-combobox', 'v-autocomplete'].includes(node.rawName)) { + for (const attr of node.startTag.attributes) { + if (attr.key?.name === 'on' && attr.value?.type === 'VObjectExpression') { + const inputHandler = attr.value.properties.find( + (prop) => prop.key?.type === 'VIdentifier' && prop.key.name === 'input' + ); + + if (inputHandler) { + inputHandler.key.name = 'update:modelValue'; + count++; + } + } + } + } + }, + }); + } + + return count; + }, +}; \ No newline at end of file diff --git a/src/plugins/vuetify/v-simple-table.ts b/src/plugins/vuetify/v-simple-table.ts new file mode 100644 index 0000000..0a37248 --- /dev/null +++ b/src/plugins/vuetify/v-simple-table.ts @@ -0,0 +1,22 @@ +import { CodemodPlugin } from 'vue-metamorph'; + +export const vSimpleTablePlugin: CodemodPlugin = { + type: 'codemod', + name: 'vuetify-v-simple-table', + transform({ sfcAST, utils: { traverseTemplateAST } }) { + let count = 0; + + if (sfcAST) { + traverseTemplateAST(sfcAST, { + leaveNode(node) { + if (node.type === 'VElement' && node.rawName === 'v-simple-table') { + node.rawName = 'v-table'; + count++; + } + }, + }); + } + + return count; + }, +}; \ No newline at end of file diff --git a/src/plugins/vuetify/v-tabs.ts b/src/plugins/vuetify/v-tabs.ts new file mode 100644 index 0000000..c998d01 --- /dev/null +++ b/src/plugins/vuetify/v-tabs.ts @@ -0,0 +1,26 @@ +import { CodemodPlugin } from 'vue-metamorph'; + +export const vTabsPlugin: CodemodPlugin = { + type: 'codemod', + name: 'vuetify-v-tabs', + transform({ sfcAST, utils: { traverseTemplateAST } }) { + let count = 0; + + if (sfcAST) { + traverseTemplateAST(sfcAST, { + leaveNode(node) { + if (node.type === 'VElement' && node.rawName === 'v-tabs-items') { + node.rawName = 'v-window'; + count++; + } + if (node.type === 'VElement' && node.rawName === 'v-tab-item') { + node.rawName = 'v-window-item'; + count++; + } + }, + }); + } + + return count; + }, +}; \ No newline at end of file diff --git a/src/plugins/vuetify/v-text-field.ts b/src/plugins/vuetify/v-text-field.ts new file mode 100644 index 0000000..1de4a7e --- /dev/null +++ b/src/plugins/vuetify/v-text-field.ts @@ -0,0 +1,51 @@ +import { CodemodPlugin } from 'vue-metamorph'; + +export const vTextFieldPlugin: CodemodPlugin = { + type: 'codemod', + name: 'vuetify-v-text-field', + transform({ sfcAST, utils: { traverseTemplateAST, builders } }) { + let count = 0; + + if (sfcAST) { + traverseTemplateAST(sfcAST, { + leaveNode(node) { + if (node.type === 'VElement' && node.rawName === 'v-text-field') { + for (const attr of node.startTag.attributes) { + if (attr.key?.name === 'class') { + const value = attr.value?.value; + if (value) { + // Replace filled with variant="plain" + if (value.includes('filled')) { + attr.value.value = value.replace('filled', 'variant="plain"'); + count++; + } + // Replace append-icon="mdi-magnify" with prepend-inner-icon="fa:fas fa-search" + if (value.includes('append-icon="mdi-magnify"')) { + attr.value.value = value.replace( + 'append-icon="mdi-magnify"', + 'prepend-inner-icon="fa:fas fa-search"' + ); + count++; + } + } + } + + // Replace @input with @update:modelValue + if (attr.key?.name === 'on') { + const onValue = attr.value?.properties.find( + (prop) => prop.key?.name === 'input' + ); + if (onValue) { + onValue.key.name = 'update:modelValue'; + count++; + } + } + } + } + }, + }); + } + + return count; + }, +}; \ No newline at end of file diff --git a/src/plugins/vuetify/v-tooltip-activators.ts b/src/plugins/vuetify/v-tooltip-activators.ts new file mode 100644 index 0000000..b86e289 --- /dev/null +++ b/src/plugins/vuetify/v-tooltip-activators.ts @@ -0,0 +1,35 @@ +import { CodemodPlugin } from 'vue-metamorph'; + +export const vTooltipActivatorsPlugin: CodemodPlugin = { + type: 'codemod', + name: 'vuetify-v-tooltip-activators', + transform({ sfcAST, utils: { traverseTemplateAST } }) { + let count = 0; + + if (sfcAST) { + traverseTemplateAST(sfcAST, { + leaveNode(node) { + if (node.type === 'VElement' && node.rawName === 'v-tooltip') { + for (const attr of node.startTag.attributes) { + if (attr.key?.name === 'activator') { + attr.key.name = 'props'; + count++; + } + if (attr.key?.name === 'on') { + const onValue = attr.value?.properties.find( + (prop) => prop.key?.name === 'on' + ); + if (onValue) { + onValue.key.name = 'props'; + count++; + } + } + } + } + }, + }); + } + + return count; + }, +}; \ No newline at end of file diff --git a/src/plugins/vuetify/v-virtual-scroll.ts b/src/plugins/vuetify/v-virtual-scroll.ts new file mode 100644 index 0000000..1a5dd41 --- /dev/null +++ b/src/plugins/vuetify/v-virtual-scroll.ts @@ -0,0 +1,22 @@ +import { CodemodPlugin } from 'vue-metamorph'; + +export const vVirtualScrollPlugin: CodemodPlugin = { + type: 'codemod', + name: 'vuetify-v-virtual-scroll', + transform({ sfcAST, utils: { traverseTemplateAST } }) { + let count = 0; + + if (sfcAST) { + traverseTemplateAST(sfcAST, { + leaveNode(node) { + if (node.type === 'VElement' && node.rawName === 'v-virtual-scroll') { + node.rawName = 'RecycleScroller'; + count++; + } + }, + }); + } + + return count; + }, +}; \ No newline at end of file From 7be67acc819e583351892d5b1f629e373db9c83e Mon Sep 17 00:00:00 2001 From: Jack Huynh Date: Sat, 15 Mar 2025 19:23:26 +0700 Subject: [PATCH 2/3] 1.0.37 Vuetify - README --- README.md | 21 ++++++++++++++++++- package.json | 2 +- src/plugins/vuetify/text-colors.ts | 1 + src/plugins/vuetify/v-chip.ts | 1 + src/plugins/vuetify/v-select-change.ts | 1 + .../vuetify/v-select-v-autocomplete.ts | 1 + src/plugins/vuetify/v-text-field.ts | 1 + src/plugins/vuetify/v-tooltip-activators.ts | 1 + 8 files changed, 27 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 2bfd524..a8c826c 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ npx vue-upgrade-tool --files 'src/**/*' > vue_upgrade_output To run only some transformations, lookup their IDs in the table below or find them using `npx vue-upgrade-tool --list-plugins`, then pass them via the `--plugins` flag using a [micromatch pattern](https://github.com/micromatch/micromatch). To use multiple micromatch patterns, pass `--plugins` multiple times: ```sh -npx vue-upgrade-tool --files 'src/**/*' --plugins 'vue-*' --plugins 'test-utils-*' > vue_upgrade_output +npx vue-upgrade-tool --files 'src/**/*' --plugins 'vue-*' --plugins 'vuetify-*' --plugins 'test-utils-*' > vue_upgrade_output ``` ## Vue @@ -83,6 +83,25 @@ npx vue-upgrade-tool --files 'src/**/*' --plugins 'vue-*' --plugins 'test-utils- | - | - | - | - | | [Store instantiation changed](./src/plugins/vuex/instantiation.spec.ts) | `vuex-instantiation` | automatic | [Link](https://vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html#installation-process) | +## Vuetify + +| Plugin | Plugin Name |Migration Type | Migration Guide | +| - | - | - | - | +| [vuetify-instantiation](src/plugins/vuetify/instantiation.ts) | `vuetify-instantiation` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#setup) | +| [vuetify-text-colors](src/plugins/vuetify/text-colors.ts) | `vuetify-text-colors` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#features) | +| [vuetify-v-alert](src/plugins/vuetify/v-alert.ts) | `vuetify-v-alert` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) | +| [vuetify-v-chip](src/plugins/vuetify/v-chip.ts) | `vuetify-v-chip` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) | +| [vuetify-v-dialog-v-menu](src/plugins/vuetify/v-dialog-v-menu.ts) | `vuetify-v-dialog-v-menu` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) | +| [vuetify-v-list-item-content](src/plugins/vuetify/v-list-item-content.ts) | `vuetify-v-list-item-content` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) | +| [vuetify-v-list-item-group-value](src/plugins/vuetify/v-list-item-group-value.ts) | `vuetify-v-list-item-group-value` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) | +| [vuetify-v-select-change](src/plugins/vuetify/v-select-change.ts) | `vuetify-v-select-change` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) | +| [vuetify-v-select-v-autocomplete](src/plugins/vuetify/v-select-v-autocomplete.ts) | `vuetify-v-select-v-autocomplete` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) | +| [vuetify-v-simple-table](src/plugins/vuetify/v-simple-table.ts) | `vuetify-v-simple-table` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) | +| [vuetify-v-tabs](src/plugins/vuetify/v-tabs.ts) | `vuetify-v-tabs` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) | +| [vuetify-v-text-field](src/plugins/vuetify/v-text-field.ts) | `vuetify-v-text-field` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) | +| [vuetify-v-tooltip-activators](src/plugins/vuetify/v-tooltip-activators.ts) | `vuetify-v-tooltip-activators` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) | +| [vuetify-v-virtual-scroll](src/plugins/vuetify/v-virtual-scroll.ts) | `vuetify-v-virtual-scroll` | Automatic | [Link](https://vuetifyjs.com/en/getting-started/upgrade-guide/#components) | + ## Vue Test Utils | Plugin | Plugin Name |Migration Type | Migration Guide | diff --git a/package.json b/package.json index 23e17b9..2eb875f 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "type": "module", "version": "1.0.37", "bin": { - "vue-upgrade-tool": "dist/cli.js" + "vue-vuetify-upgrade-tool": "dist/cli.js" }, "license": "MIT", "repository": { diff --git a/src/plugins/vuetify/text-colors.ts b/src/plugins/vuetify/text-colors.ts index dc90e4c..bf902f2 100644 --- a/src/plugins/vuetify/text-colors.ts +++ b/src/plugins/vuetify/text-colors.ts @@ -1,3 +1,4 @@ +//@ts-nocheck import { CodemodPlugin } from 'vue-metamorph'; import * as changeCase from 'change-case'; diff --git a/src/plugins/vuetify/v-chip.ts b/src/plugins/vuetify/v-chip.ts index 1f5719f..17b43fb 100644 --- a/src/plugins/vuetify/v-chip.ts +++ b/src/plugins/vuetify/v-chip.ts @@ -1,3 +1,4 @@ +//@ts-nocheck import { CodemodPlugin } from 'vue-metamorph'; export const vChipPlugin: CodemodPlugin = { diff --git a/src/plugins/vuetify/v-select-change.ts b/src/plugins/vuetify/v-select-change.ts index c1c4bf3..50edc51 100644 --- a/src/plugins/vuetify/v-select-change.ts +++ b/src/plugins/vuetify/v-select-change.ts @@ -1,3 +1,4 @@ +//@ts-nocheck import { CodemodPlugin } from 'vue-metamorph'; export const vSelectChangePlugin: CodemodPlugin = { diff --git a/src/plugins/vuetify/v-select-v-autocomplete.ts b/src/plugins/vuetify/v-select-v-autocomplete.ts index d3390bd..3e3ba70 100644 --- a/src/plugins/vuetify/v-select-v-autocomplete.ts +++ b/src/plugins/vuetify/v-select-v-autocomplete.ts @@ -1,3 +1,4 @@ +//@ts-nocheck import { CodemodPlugin } from 'vue-metamorph'; export const vSelectVAutocompletePlugin: CodemodPlugin = { diff --git a/src/plugins/vuetify/v-text-field.ts b/src/plugins/vuetify/v-text-field.ts index 1de4a7e..21f751c 100644 --- a/src/plugins/vuetify/v-text-field.ts +++ b/src/plugins/vuetify/v-text-field.ts @@ -1,3 +1,4 @@ +//@ts-nocheck import { CodemodPlugin } from 'vue-metamorph'; export const vTextFieldPlugin: CodemodPlugin = { diff --git a/src/plugins/vuetify/v-tooltip-activators.ts b/src/plugins/vuetify/v-tooltip-activators.ts index b86e289..083e1f5 100644 --- a/src/plugins/vuetify/v-tooltip-activators.ts +++ b/src/plugins/vuetify/v-tooltip-activators.ts @@ -1,3 +1,4 @@ +//@ts-nocheck import { CodemodPlugin } from 'vue-metamorph'; export const vTooltipActivatorsPlugin: CodemodPlugin = { From 858124c2626b49052103d38ea41211ba7b4fafe0 Mon Sep 17 00:00:00 2001 From: Jack Huynh Date: Sun, 16 Mar 2025 16:32:48 +0700 Subject: [PATCH 3/3] 1.0.38 Vuetify --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 2eb875f..84b18a0 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { - "name": "vue-vuetify-upgrade-tool", + "name": "vue-upgrade-tool", "description": "Tool to aid in Vue 2 -> Vue 3 migration", "type": "module", - "version": "1.0.37", + "version": "1.0.38", "bin": { - "vue-vuetify-upgrade-tool": "dist/cli.js" + "vue-upgrade-tool": "dist/cli.js" }, "license": "MIT", "repository": {