chore(eslint-config): activate eslint rules warning of deprecated fea…

…tures
3YOURMIND · May 31, 2024 · 8781d5f · 8781d5f
1 parent a528701
commit 8781d5f
Show file tree

Hide file tree

Showing 24 changed files with 310 additions and 273 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/pages/usage/components/popover.vue b/packages/documentation/pages/usage/components/popover.vue
@@ -217,6 +217,9 @@ export default defineComponent({
 				label: 'User',
 				isSelected: false,
 				icon: Yoco.Icon.USER,
+				onClick: () => {
+					alert('clicked')
+				},
 			},
 			/**
 			 * `onClick` is not defined, therefore, the UI will make it not look clickable

diff --git a/packages/eslint-config/source/index.ts b/packages/eslint-config/source/index.ts
@@ -456,6 +456,24 @@ export default {
 					},
 				],
 				'vue/jsx-uses-vars': 'error',
+				'vue/no-deprecated-data-object-declaration': 'error',
+				'vue/no-deprecated-destroyed-lifecycle': 'error',
+				'vue/no-deprecated-dollar-scopedslots-api': 'error',
+				'vue/no-deprecated-events-api': 'error',
+				'vue/no-deprecated-filter': 'error',
+				'vue/no-deprecated-functional-template': 'error',
+				'vue/no-deprecated-html-element-is': 'error',
+				'vue/no-deprecated-inline-template': 'error',
+				'vue/no-deprecated-props-default-this': 'error',
+				'vue/no-deprecated-router-link-tag-prop': 'error',
+				'vue/no-deprecated-scope-attribute': 'error',
+				'vue/no-deprecated-slot-attribute': 'error',
+				'vue/no-deprecated-slot-scope-attribute': 'error',
+				'vue/no-deprecated-v-bind-sync': 'error',
+				'vue/no-deprecated-v-is': 'error',
+				'vue/no-deprecated-v-on-native-modifier': 'error',
+				'vue/no-deprecated-v-on-number-modifiers': 'error',
+				'vue/no-deprecated-vue-config-keycodes': 'error',
 				'vue/no-empty-component-block': 'error',
 				'vue/no-mutating-props': 'error',
 				'vue/no-ref-as-operand': 'error',

diff --git a/packages/kotti-ui/source/kotti-actionbar/components/ActionbarMenu.vue b/packages/kotti-ui/source/kotti-actionbar/components/ActionbarMenu.vue
@@ -1,20 +1,15 @@
 <template>
 	<div class="kt-actionbar-nav">
 		<!-- FIXME: External Dependencies Should not Be Used without Injection -->
-		<router-link
-			v-for="(item, index) in menu"
-			:key="index"
-			class="kt-actionbar-nav__item"
-			:class="navItemClass(item)"
-			tag="li"
-			:to="item.to"
-		>
-			<i
-				class="yoco kt-actionbar-nav__icon"
-				:class="`kt-actionbar-nav__icon--${iconPosition}`"
-				v-text="item.icon"
-			/>
-			<span class="kt-actionbar-nav__label" v-text="item.label" />
+		<router-link v-for="(item, index) in menu" :key="index" :to="item.to">
+			<li class="kt-actionbar-nav__item" :class="navItemClass(item)">
+				<i
+					class="yoco kt-actionbar-nav__icon"
+					:class="`kt-actionbar-nav__icon--${iconPosition}`"
+					v-text="item.icon"
+				/>
+				<span class="kt-actionbar-nav__label" v-text="item.label" />
+			</li>
 		</router-link>
 	</div>
 </template>

diff --git a/packages/kotti-ui/source/kotti-drawer/KtDrawer.vue b/packages/kotti-ui/source/kotti-drawer/KtDrawer.vue
@@ -6,7 +6,7 @@
 					<slot name="drawer-header" />
 				</div>
 				<div class="kt-drawer__body">
-					<slot slot name="drawer-body" />
+					<slot name="drawer-body" />
 				</div>
 				<div class="kt-drawer__footer">
 					<slot name="drawer-footer" />

diff --git a/packages/kotti-ui/source/kotti-field-date/KtFieldDate.vue b/packages/kotti-ui/source/kotti-field-date/KtFieldDate.vue
@@ -6,13 +6,11 @@
 		:getEmptyValue="() => null"
 		:helpTextSlot="$slots.helpText"
 	>
-		<div
-			ref="inputContainerRef"
-			slot="container"
-			class="kt-field__input-container"
-		>
-			<ElDate ref="elDateRef" v-bind="elDatePickerProps" @input="onInput" />
-		</div>
+		<template #container>
+			<div ref="inputContainerRef" class="kt-field__input-container">
+				<ElDate ref="elDateRef" v-bind="elDatePickerProps" @input="onInput" />
+			</div>
+		</template>
 	</KtField>
 </template>
 

diff --git a/packages/kotti-ui/source/kotti-field-date/KtFieldDateRange.vue b/packages/kotti-ui/source/kotti-field-date/KtFieldDateRange.vue
@@ -7,17 +7,15 @@
 		:helpTextSlot="$slots.helpText"
 		isRange
 	>
-		<div
-			ref="inputContainerRef"
-			slot="container"
-			class="kt-field__input-container"
-		>
-			<ElDate
-				ref="elDateRef"
-				v-bind="elDateRangePickerProps"
-				@input="onInput"
-			/>
-		</div>
+		<template #container>
+			<div ref="inputContainerRef" class="kt-field__input-container">
+				<ElDate
+					ref="elDateRef"
+					v-bind="elDateRangePickerProps"
+					@input="onInput"
+				/>
+			</div>
+		</template>
 	</KtField>
 </template>
 

diff --git a/packages/kotti-ui/source/kotti-field-date/KtFieldDateTime.vue b/packages/kotti-ui/source/kotti-field-date/KtFieldDateTime.vue
@@ -6,13 +6,15 @@
 		:getEmptyValue="() => null"
 		:helpTextSlot="$slots.helpText"
 	>
-		<div
-			ref="inputContainerRef"
-			slot="container"
-			class="kt-field__input-container"
-		>
-			<ElDate ref="elDateRef" v-bind="elDateTimePickerProps" @input="onInput" />
-		</div>
+		<template #container>
+			<div ref="inputContainerRef" class="kt-field__input-container">
+				<ElDate
+					ref="elDateRef"
+					v-bind="elDateTimePickerProps"
+					@input="onInput"
+				/>
+			</div>
+		</template>
 	</KtField>
 </template>
 

diff --git a/packages/kotti-ui/source/kotti-field-date/KtFieldDateTimeRange.vue b/packages/kotti-ui/source/kotti-field-date/KtFieldDateTimeRange.vue
@@ -7,17 +7,15 @@
 		:helpTextSlot="$slots.helpText"
 		isRange
 	>
-		<div
-			ref="inputContainerRef"
-			slot="container"
-			class="kt-field__input-container"
-		>
-			<ElDate
-				ref="elDateRef"
-				v-bind="elDateTimeRangePickerProps"
-				@input="onInput"
-			/>
-		</div>
+		<template #container>
+			<div ref="inputContainerRef" class="kt-field__input-container">
+				<ElDate
+					ref="elDateRef"
+					v-bind="elDateTimeRangePickerProps"
+					@input="onInput"
+				/>
+			</div>
+		</template>
 	</KtField>
 </template>
 

diff --git a/packages/kotti-ui/source/kotti-field-date/hooks.ts b/packages/kotti-ui/source/kotti-field-date/hooks.ts
@@ -32,8 +32,8 @@ export type ElDateWithInternalAPI = ElDate & {
 	haveTrigger: boolean
 	picker: Vue & {
 		$el: HTMLElement
-		leftLabel: string
-		rightLabel: string
+		leftLabel?: string
+		rightLabel?: string
 		width: number
 	}
 	popperJS: Exclude<Instance['popperInstance'], null>
@@ -337,8 +337,8 @@ const useRangePickerHeaderFix = <DATA_TYPE extends Values>({
 					 * ]
 					 */
 					const dates = [
-						dateComponent.picker.leftLabel.split(/\s+/),
-						dateComponent.picker.rightLabel.split(/\s+/),
+						dateComponent.picker.leftLabel?.split(/\s+/) ?? ['', ''],
+						dateComponent.picker.rightLabel?.split(/\s+/) ?? ['', ''],
 					]
 
 					const headers = dateComponent.picker.$el.querySelectorAll(

diff --git a/packages/kotti-ui/source/kotti-field-file-upload/KtFieldFileUpload.vue b/packages/kotti-ui/source/kotti-field-file-upload/KtFieldFileUpload.vue
@@ -4,57 +4,59 @@
 		debounceLabelClick
 		:helpTextSlot="$slots.helpText"
 	>
-		<div slot="container" class="kt-field-file-upload">
-			<DropArea
-				v-if="showDropArea"
-				v-bind="{
-					...sharedProps,
-					allowMultiple,
-					collapseExtensionsAfter,
-					externalUrl,
-					icon,
-					inputId,
-					tabIndex,
-				}"
-				@addFiles="onAddFiles"
-			>
-				<template #footer>
-					<TakePhoto
-						v-if="allowPhotos"
+		<template #container>
+			<div class="kt-field-file-upload">
+				<DropArea
+					v-if="showDropArea"
+					v-bind="{
+						...sharedProps,
+						allowMultiple,
+						collapseExtensionsAfter,
+						externalUrl,
+						icon,
+						inputId,
+						tabIndex,
+					}"
+					@addFiles="onAddFiles"
+				>
+					<template #footer>
+						<TakePhoto
+							v-if="allowPhotos"
+							v-bind="{
+								...sharedProps,
+								tabIndex,
+							}"
+							@addFiles="onAddFiles"
+						/>
+					</template>
+				</DropArea>
+				<div v-if="filesList.length > 0" :style="filesListStyle">
+					<FileItem
+						v-for="fileInfo in filesList"
 						v-bind="{
 							...sharedProps,
-							tabIndex,
+							fileInfo,
 						}"
-						@addFiles="onAddFiles"
+						:key="fileInfo.id"
+						@remove="onRemoveFile"
 					/>
-				</template>
-			</DropArea>
-			<div v-if="filesList.length > 0" :style="filesListStyle">
-				<FileItem
-					v-for="fileInfo in filesList"
-					v-bind="{
-						...sharedProps,
-						fileInfo,
-					}"
-					:key="fileInfo.id"
-					@remove="onRemoveFile"
-				/>
-			</div>
-			<div
-				v-if="preUploadedFilesList.length > 0"
-				:style="preUploadedFilesListStyle"
-			>
-				<PreUploadedFileItem
-					v-for="fileInfo in preUploadedFilesList"
-					v-bind="{
-						...sharedProps,
-						fileInfo,
-					}"
-					:key="fileInfo.id"
-					@remove="onRemoveFile"
-				/>
+				</div>
+				<div
+					v-if="preUploadedFilesList.length > 0"
+					:style="preUploadedFilesListStyle"
+				>
+					<PreUploadedFileItem
+						v-for="fileInfo in preUploadedFilesList"
+						v-bind="{
+							...sharedProps,
+							fileInfo,
+						}"
+						:key="fileInfo.id"
+						@remove="onRemoveFile"
+					/>
+				</div>
 			</div>
-		</div>
+		</template>
 	</KtField>
 </template>