migrate to Vuetify 4

Author: webdevnerdstuff

README.md

@@ -42,7 +42,7 @@ npm i @wdns/vuetify-inline-fields
 
 ## Dependencies
 
-[Vuetify v3](https://vuetifyjs.com/)  
+[Vuetify v4](https://vuetifyjs.com/)  
 [Vue 3](https://vuejs.org/)  
 [VueUse](https://vueuse.org/)
 
@@ -54,7 +54,7 @@ npm i @wdns/vuetify-inline-fields
 
 ## License
 
-Copyright (c) 2023 WebDevNerdStuff  
+Copyright (c) 2026 WebDevNerdStuff  
 Licensed under the [MIT license](https://github.com/webdevnerdstuff/vuetify-inline-fields/blob/main/LICENSE.md).
 
 

index.html

@@ -34,7 +34,7 @@
 	/>
 	<meta
 		name="keywords"
-		content="vuetify-inline-fields, vuetify, vuetify3, checkbox, select, switch, text-field, textarea, vue, vue3, component, javascript, typescript, webdevnerdstuff, wdns"
+		content="vuetify-inline-fields, vuetify, vuetify4, checkbox, select, switch, text-field, textarea, vue, vue3, component, javascript, typescript, webdevnerdstuff, wdns"
 	/>
 	<meta
 		name="author"

package.json

@@ -12,6 +12,7 @@
 	"scripts": {
 		"dev": "NODE_OPTIONS='--no-warnings' vite",
 		"watch": "pnpm dev",
+		"build:watch": "vite build --watch --config vite.build.config.mts",
 		"play": "sh src/playground/configs/build.sh && NODE_ENV=playground pnpm dev",
 		"build": "vue-tsc && npm run test:build && vite build --config vite.build.config.mts",
 		"build:docs": "vite build",
@@ -54,7 +55,7 @@
 	"keywords": [
 		"vuetify-inline-fields",
 		"vuetify",
-		"vuetify3",
+		"vuetify4",
 		"autocomplete",
 		"checkbox",
 		"form",

src/documentation/DocsPage.vue

@@ -3,7 +3,6 @@
 		<v-col cols="12">
 			<v-img
 				class="my-3"
-				contain
 				height="200"
 				src="../assets/vuetify-logo.svg"
 			/>

src/documentation/layout/AppBar.vue

@@ -42,12 +42,11 @@
 		>
 			<template #item="{ item }">
 				<v-list-item
-					:key="item.raw.key"
 					density="compact"
-					:href="item.raw.link"
-					:prepend-icon="item.raw.icon ? item.raw.icon : '$vuetify'"
+					:href="item.link"
+					:prepend-icon="item.icon ? item.icon : '$vuetify'"
 					target="_blank"
-					:title="item.raw?.topTitle || item.title"
+					:title="item.topTitle || item.title"
 				>
 				</v-list-item>
 			</template>
@@ -146,19 +145,18 @@ function getTheme() {
 		return false;
 	}
 
-	theme.global.name.value = themeName.value;
+	theme.change(themeName.value);
 	emit('changedTheme', themeName.value);
 }
 
 function setTheme() {
 	themeName.value = store.setTheme(themeName.value);
-	theme.global.name.value = themeName.value;
+	theme.change(themeName.value);
 }
 
 function toggleDrawer() {
 	emit('updatedDrawer', drawer.value);
 }
 </script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>

src/documentation/sections/DependenciesSection.vue

@@ -18,7 +18,7 @@
 				:href="store.links.vuetify"
 				target="_blank"
 			>
-				Vuetify v3
+				Vuetify v4
 			</a>
 			<br />
 			<a

src/playground/configs/PlaygroundApp.vue

@@ -8,18 +8,24 @@
 			<v-responsive>
 				<v-container class="px-10">
 					<v-row>
-						<v-col class="v-col-12 text-center">
+						<v-col
+							class="text-center"
+							cols="12"
+						>
 							<h1>Vuetify Inline Fields</h1>
 						</v-col>
-						<v-col class="v-col-12 text-center">
+						<v-col
+							class="text-center"
+							cols="12"
+						>
 							<v-chip color="primary">
 								Playground v{{ store.pluginVersion }}
 							</v-chip>
 						</v-col>
 					</v-row>
 
 					<v-row>
-						<v-col class="v-col-12">
+						<v-col cols="12">
 							<v-container>
 								<v-row class="row mb-4">
 									<PlaygroundPage is-playground />
@@ -45,5 +51,4 @@ provide('links', store.links);
 </script>
 
 
-<style scoped>
-</style>
+<style scoped></style>

src/plugin/components/VInlineAutocomplete/VInlineAutocomplete.vue

@@ -126,7 +126,7 @@ import {
 	TimeOpened,
 } from '@/plugin/types';
 import type { VInlineAutocompleteProps } from './';
-import { IconOptions } from 'vuetify';
+import type { IconOptions } from 'vuetify';
 import type { VSelect } from 'vuetify/components';
 import {
 	autocompleteProps,
@@ -444,6 +444,6 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 :deep(.v-field__field) {
-	align-items: flex-end !important;
+	align-items: flex-end;
 }
 </style>

src/plugin/components/VInlineCheckbox/VInlineCheckbox.vue

@@ -134,7 +134,8 @@ import {
 	TimeOpened,
 } from '@/plugin/types';
 import type { VInlineCheckboxProps } from './';
-import { IconOptions, useTheme } from 'vuetify';
+import { useTheme } from 'vuetify';
+import type { IconOptions } from 'vuetify';
 import {
 	checkboxProps,
 	defaultCardProps,

src/plugin/components/VInlineCustomField/VInlineCustomField.vue

@@ -90,7 +90,7 @@ import {
 	TimeOpened,
 } from '@/plugin/types';
 import type { VInlineCustomFieldProps } from './';
-import { IconOptions } from 'vuetify';
+import type { IconOptions } from 'vuetify';
 import {
 	defaultCardProps,
 	textFieldProps,