Merge pull request #927 from 3YOURMIND/enable-rules-for-vue-migration

chore(eslint-config): activate eslint rules warning of deprecated features
3YOURMIND · May 31, 2024 · 5c211fe · 5c211fe
2 parents a528701 + 60faf49
commit 5c211fe
Show file tree

Hide file tree

Showing 32 changed files with 511 additions and 375 deletions.
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -76,7 +76,12 @@ const config = tseslint.config(
 		...config,
 		files: [...config.files, 'packages/kotti-ui/source/test-utils/**/*.ts'],
 	})),
-	...eslintConfig3YD.configs.vue,
+	{
+		extends: eslintConfig3YD.configs.vue,
+		rules: {
+			'vue/no-deprecated-dollar-listeners-api': 'error',
+		},
+	},
 	{
 		rules: {
 			'@typescript-eslint/no-restricted-imports': [

diff --git a/packages/documentation/components/NavBar.vue b/packages/documentation/components/NavBar.vue
@@ -5,11 +5,11 @@
 		@logoClick="$router.push('/')"
 		@setIsNarrow="setIsNarrow"
 	>
-		<div slot="navbar-footer">
+		<template #navbar-footer>
 			<a class="github-link" href="https://github.com/3YOURMIND/kotti">
 				<img height="24" src="~/assets/img/icon_github.svg" width="24" />
 			</a>
-		</div>
+		</template>
 	</KtNavbar>
 </template>
 

diff --git a/packages/documentation/layouts/default.vue b/packages/documentation/layouts/default.vue
@@ -1,11 +1,15 @@
 <template>
 	<KtI18nContext locale="en-US">
 		<LayoutContainer>
-			<NavBar slot="navbar" />
-			<ActionBar slot="actionbar" />
-			<div slot="workspace">
+			<template #navbar>
+				<NavBar />
+			</template>
+			<template #actionbar>
+				<ActionBar />
+			</template>
+			<template #workspace>
 				<nuxt class="content" />
-			</div>
+			</template>
 		</LayoutContainer>
 	</KtI18nContext>
 </template>

diff --git a/packages/documentation/pages/examples/layouts.vue b/packages/documentation/pages/examples/layouts.vue
@@ -1,30 +1,32 @@
 <template>
 	<LayoutContainer>
-		<KtNavbar
-			slot="navbar"
-			:isNarrow="isNarrow"
-			logoUrl="https://via.placeholder.com/160x50"
-			:notification="navbarNotification"
-			:quickLinks="quickLinksData"
-			:sections="navbarMenu"
-			:theme="theme"
-			@setIsNarrow="setIsNarrow"
-		>
-			<div slot="navbar-footer">
-				<KtUserMenu
-					:sections="userMenuData"
-					userName="Jony'O Five"
-					userStatus="Invisible"
-					@click="handleMenuClick($event)"
-				/>
-			</div>
-		</KtNavbar>
-		<KtActionbar
-			slot="actionbar"
-			headerTitle="LayoutContainer Example"
-			:menu="actionbarMenu"
-		/>
-		<div slot="workspace">
+		<template #navbar>
+			<KtNavbar
+				:isNarrow="isNarrow"
+				logoUrl="https://via.placeholder.com/160x50"
+				:notification="navbarNotification"
+				:quickLinks="quickLinksData"
+				:sections="navbarMenu"
+				:theme="theme"
+				@setIsNarrow="setIsNarrow"
+			>
+				<template #navbar-footer>
+					<KtUserMenu
+						:sections="userMenuData"
+						userName="Jony'O Five"
+						userStatus="Invisible"
+						@click="handleMenuClick($event)"
+					/>
+				</template>
+			</KtNavbar>
+		</template>
+		<template #actionbar>
+			<KtActionbar
+				headerTitle="LayoutContainer Example"
+				:menu="actionbarMenu"
+			/>
+		</template>
+		<template #workspace>
 			<KtFieldSingleSelect
 				v-model="theme"
 				hideClear
@@ -37,7 +39,7 @@
 					{ label: 'Default', value: Kotti.Navbar.Theme.DEFAULT },
 				]"
 			/>
-		</div>
+		</template>
 	</LayoutContainer>
 </template>
 

diff --git a/packages/documentation/pages/usage/components/card.vue b/packages/documentation/pages/usage/components/card.vue
@@ -8,22 +8,30 @@
 				primaryActionLabel="Confirm"
 				secondaryActionLabel="Cancel"
 			>
-				<h2 slot="card-header">Lorem Ipsum</h2>
-				<p slot="card-body">
-					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
-					consequat nisl at nisl condimentum vehicula.
-				</p>
+				<template #card-header>
+					<h2>Lorem Ipsum</h2>
+				</template>
+				<template #card-body>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
+						consequat nisl at nisl condimentum vehicula.
+					</p>
+				</template>
 			</KtCard>
 		</div>
 		<br />
 
 		<div class="card-view-example-2">
 			<KtCard v-bind="{ imgPosition }" imgUrl="https://picsum.photos/900/300">
-				<h2 slot="card-header">Lorem Ipsum</h2>
-				<p slot="card-body">
-					Moebius ring by pmaegermanis licensed under CC BY 3.0 (Creative
-					Commons https://www.thingiverse.com/thing:1649028
-				</p>
+				<template #card-header>
+					<h2>Lorem Ipsum</h2>
+				</template>
+				<template #card-body>
+					<p>
+						Moebius ring by pmaegermanis licensed under CC BY 3.0 (Creative
+						Commons https://www.thingiverse.com/thing:1649028
+					</p>
+				</template>
 			</KtCard>
 		</div>
 		<br />
@@ -36,29 +44,39 @@
 				primaryActionLabel="Confirm"
 				secondaryActionLabel="Cancel"
 			>
-				<h2 slot="card-header">Lorem Ipsum</h2>
-				<p slot="card-body">
-					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
-					consequat nisl at nisl condimentum vehicula.
-				</p>
-			</KtCard>
-		</div>
-		<br />
-		<div class="element-example">
-			<KtCard>
-				<div slot="card-header">
+				<template #card-header>
 					<h2>Lorem Ipsum</h2>
-					<b>consectetur adipiscing elit</b>
-				</div>
-				<div slot="card-body">
+				</template>
+				<template #card-body>
 					<p>
 						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
 						consequat nisl at nisl condimentum vehicula.
 					</p>
-				</div>
-				<div slot="card-footer">
-					<KtButton label="Button" />
-				</div>
+				</template>
+			</KtCard>
+		</div>
+		<br />
+		<div class="element-example">
+			<KtCard>
+				<template #card-header>
+					<div>
+						<h2>Lorem Ipsum</h2>
+						<b>consectetur adipiscing elit</b>
+					</div>
+				</template>
+				<template #card-body>
+					<div>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
+							consequat nisl at nisl condimentum vehicula.
+						</p>
+					</div>
+				</template>
+				<template #card-footer>
+					<div>
+						<KtButton label="Button" />
+					</div>
+				</template>
 			</KtCard>
 		</div>
 
@@ -73,20 +91,33 @@
 			</KtCol>
 			<KtCol :span="12">
 				<KtCard v-bind="{ imgPosition }" imgUrl="https://picsum.photos/900/300">
-					<h2 slot="card-header">Lorem Ipsum</h2>
-					<p slot="card-body">
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
-						consequat nisl at nisl condimentum vehicula.
-					</p>
-					<p slot="card-footer">This is the end</p>
+					<template #card-header>
+						<h2>Lorem Ipsum</h2>
+					</template>
+					<template #card-body>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
+							consequat nisl at nisl condimentum vehicula.
+						</p>
+					</template>
+					<template #card-footer>
+						<p>This is the end</p>
+					</template>
 				</KtCard>
 			</KtCol>
 		</KtRow>
 	</div>
 </template>
 
 <script lang="ts">
-import { Kotti, KtCard } from '@3yourmind/kotti-ui'
+import {
+	Kotti,
+	KtButton,
+	KtCard,
+	KtCol,
+	KtFieldSingleSelect,
+	KtRow,
+} from '@3yourmind/kotti-ui'
 import { defineComponent, ref } from 'vue'
 
 import ComponentInfo from '~/components/ComponentInfo.vue'
@@ -95,6 +126,11 @@ export default defineComponent({
 	name: 'DocumentationPageUsageComponentsCards',
 	components: {
 		ComponentInfo,
+		KtButton,
+		KtCard,
+		KtCol,
+		KtFieldSingleSelect,
+		KtRow,
 	},
 	setup() {
 		return {