Update accordingly for changes in newer vueitfy version

Author: webdevnerdstuff

src/documentation/components/MenuComponent.vue

@@ -98,4 +98,10 @@ function smoothScroll() {
 		margin-right: 1em !important;
 	}
 }
+
+:deep(.v-list-group__items) {
+	.v-list-item__spacer {
+		display: none;
+	}
+}
 </style>

src/documentation/components/PropsTable.vue

@@ -40,34 +40,34 @@
 					<template #[`item.name`]="{ item }">
 						<td>
 							<span
-								:id="`props-${sectionId ? `${sectionId}-${item.raw.name}` : item.raw.name}`"
+								:id="`props-${sectionId ? `${sectionId}-${item.name}` : item.name}`"
 								class="name-item text-mono ml-n2"
 							>
 								<span class="text-primary">#</span>
 								<a
 									class="text-primary"
 									:class="classes.appLink"
-									:href="`#props-${sectionId ? `${sectionId}-${item.raw.name}` : item.raw.name}`"
-								>{{ item.raw.name }}</a>
+									:href="`#props-${sectionId ? `${sectionId}-${item.name}` : item.name}`"
+								>{{ item.name }}</a>
 							</span>
 						</td>
 					</template>
 
 					<template #[`item.type`]="{ item }">
 						<td class="text-success">
-							{{ item.raw.type }}
+							{{ item.type }}
 						</td>
 					</template>
 
 					<template #[`item.default`]="{ item }">
 						<td
 							class="text-accent"
-							v-html="item.raw.default"
+							v-html="item.default"
 						></td>
 					</template>
 
 					<template #[`item.desc`]="{ item }">
-						<td v-html="item.raw.desc"></td>
+						<td v-html="item.desc"></td>
 					</template>
 				</v-data-table>
 			</v-card>

src/documentation/layout/AppBar.vue

@@ -44,10 +44,10 @@
 				<v-list-item
 					:key="item.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>

src/documentation/sections/EventsSection.vue

@@ -43,21 +43,21 @@
 								<tr>
 									<td>
 										<span
-											:id="`events-${item.raw.name}`"
+											:id="`events-${item.name}`"
 											class="name-item text-mono ml-n2"
 										>
 											<span class="text-primary">#</span>
 											<a
 												class="text-primary"
 												:class="classes.appLink"
-												:href="`#events-${item.raw.name}`"
+												:href="`#events-${item.name}`"
 											>
-												{{ item.raw.name }}
+												{{ item.name }}
 											</a>
 										</span>
 									</td>
 
-									<td><span v-html="item.raw.desc"></span></td>
+									<td><span v-html="item.desc"></span></td>
 								</tr>
 							</template>
 						</v-data-table>

src/playground/configs/templates/PlaygroundPage.vue

@@ -11,7 +11,7 @@
 			>
 				<template #[`item.active`]="{ item }">
 					<VInlineSwitch
-						v-model="item.raw.active"
+						v-model="item.active"
 						:cancel-button-color="componentOptions.cancelButtonColor"
 						:cancel-button-title="componentOptions.cancelButtonTitle"
 						:cancel-button-variant="componentOptions.cancelButtonVariant"
@@ -33,21 +33,21 @@
 						:icon-true-title="componentOptions.iconTrueTitle"
 						:item="item"
 						:label="componentOptions.label"
-						:loading="item.raw.loading"
+						:loading="item.loading"
 						:loading-wait="componentOptions.loadingWait"
 						name="active"
 						:underline-color="componentOptions.underlineColor"
 						:underline-style="componentOptions.underlineStyle"
 						:underline-width="componentOptions.underlineWidth"
 						:underlined="componentOptions.underlined"
 						@error="showError = $event"
-						@update="updatedValue(item.raw, 'reviewed')"
+						@update="updatedValue(item, 'reviewed')"
 					/>
 				</template>
 
 				<template #[`item.userId`]="{ item }">
 					<VInlineSelect
-						v-model="item.raw.user"
+						v-model="item.user"
 						:cancel-button-color="componentOptions.cancelButtonColor"
 						:cancel-button-title="componentOptions.cancelButtonTitle"
 						:cancel-button-variant="componentOptions.cancelButtonVariant"
@@ -74,7 +74,7 @@
 						item-value="id"
 						:items="users"
 						:label="componentOptions.label"
-						:loading="item.raw.loading"
+						:loading="item.loading"
 						:loading-wait="componentOptions.loadingWait"
 						:menu="componentOptions.menu"
 						name="userId"
@@ -89,14 +89,14 @@
 						:underlined="componentOptions.underlined"
 						:variant="componentOptions.variant"
 						@error="showError = $event"
-						@update="updatedValue(item.raw, 'userId')"
+						@update="updatedValue(item, 'userId')"
 					>
 					</VInlineSelect>
 				</template>
 
 				<template #[`item.title`]="{ item }">
 					<VInlineTextField
-						v-model="item.raw.title"
+						v-model="item.title"
 						:cancel-button-color="componentOptions.cancelButtonColor"
 						:cancel-button-title="componentOptions.cancelButtonTitle"
 						:cancel-button-variant="componentOptions.cancelButtonVariant"
@@ -114,7 +114,7 @@
 						:hide-details="componentOptions.hideDetails"
 						:item="item"
 						:label="componentOptions.label"
-						:loading="item.raw.loading"
+						:loading="item.loading"
 						:loading-wait="componentOptions.loadingWait"
 						name="title"
 						required
@@ -131,14 +131,14 @@
 						:underlined="componentOptions.underlined"
 						:variant="componentOptions.variant"
 						@error="showError = $event"
-						@update="updatedValue(item.raw, 'title')"
+						@update="updatedValue(item, 'title')"
 					>
 					</VInlineTextField>
 				</template>
 
 				<template #[`item.body`]="{ item }">
 					<VInlineTextarea
-						v-model="item.raw.body"
+						v-model="item.body"
 						:cancel-button-color="componentOptions.cancelButtonColor"
 						:cancel-button-title="componentOptions.cancelButtonTitle"
 						:cancel-button-variant="componentOptions.cancelButtonVariant"
@@ -159,7 +159,7 @@
 						:hide-details="componentOptions.hideDetails"
 						:item="item"
 						:label="componentOptions.label"
-						:loading="item.raw.loading"
+						:loading="item.loading"
 						:loading-wait="componentOptions.loadingWait"
 						name="body"
 						:rules="[componentOptions.rules.required, componentOptions.rules.minLength]"
@@ -174,24 +174,24 @@
 						:underlined="componentOptions.underlined"
 						:variant="componentOptions.variant"
 						@error="showError = $event"
-						@update="updatedValue(item.raw, 'body')"
+						@update="updatedValue(item, 'body')"
 					>
 					</VInlineTextarea>
 				</template>
 
 				<template #[`item.range`]="{ item }">
 					<VInlineCustomField
-						v-model="item.raw.range"
+						v-model="item.range"
 						:card-field="cardFieldState"
 						:card-offset-x="componentOptions.cardOffsetX"
 						:card-offset-y="componentOptions.cardOffsetY"
 						:card-props="componentOptions.cardProps"
-						:loading="item.raw.loading"
-						@update="updatedValue(item.raw, 'range')"
+						:loading="item.loading"
+						@update="updatedValue(item, 'range')"
 					>
 						<template #default="">
 							<v-slider
-								v-model="item.raw.range"
+								v-model="item.range"
 								hide-details
 								show-ticks
 								step="10"
@@ -202,7 +202,7 @@
 
 				<template #[`item.reviewed`]="{ item }">
 					<VInlineCheckbox
-						v-model="item.raw.reviewed"
+						v-model="item.reviewed"
 						:cancel-button-color="componentOptions.cancelButtonColor"
 						:cancel-button-title="componentOptions.cancelButtonTitle"
 						:cancel-button-variant="componentOptions.cancelButtonVariant"
@@ -220,15 +220,15 @@
 						:icon-true-title="componentOptions.iconTrueTitle"
 						:item="item"
 						:label="componentOptions.label"
-						:loading="item.raw.loading"
+						:loading="item.loading"
 						:loading-wait="componentOptions.loadingWait"
 						name="reviewed"
 						:underline-color="componentOptions.underlineColor"
 						:underline-style="componentOptions.underlineStyle"
 						:underline-width="componentOptions.underlineWidth"
 						:underlined="componentOptions.underlined"
 						@error="showError = $event"
-						@update="updatedValue(item.raw, 'reviewed')"
+						@update="updatedValue(item, 'reviewed')"
 					/>
 				</template>
 			</v-data-table>