Resolve editor/type warnings (#7687)

* resolve editor/type warnings

* dont rename props

app/src/components/v-checkbox/v-checkbox.vue

@@ -224,10 +224,6 @@ body {
 				opacity: 0.1;
 			}
 		}
-
-		input {
-			//
-		}
 	}
 
 	.prepend,

app/src/components/v-error/v-error.vue

@@ -21,7 +21,7 @@ import { isPlainObject } from 'lodash';
 export default defineComponent({
 	props: {
 		error: {
-			type: [Object, Error] as PropType<any>,
+			type: [Object, Error] as PropType<Record<string, any>>,
 			required: true,
 		},
 	},

app/src/components/v-form/form-field.vue

@@ -61,11 +61,10 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed, ref } from 'vue';
-import { Field } from '@directus/shared/types';
+import { Field, ValidationError } from '@directus/shared/types';
 import FormFieldLabel from './form-field-label.vue';
 import FormFieldMenu from './form-field-menu.vue';
 import FormFieldInterface from './form-field-interface.vue';
-import { ValidationError } from '@/types';
 import { getJSType } from '@/utils/get-js-type';
 import { isEqual } from 'lodash';
 

app/src/components/v-input/v-input.vue

@@ -152,7 +152,7 @@ export default defineComponent({
 			keydown: processValue,
 			blur: (e: Event) => {
 				trimIfEnabled();
-				attrs?.onBlur?.(e);
+				if (typeof attrs.onBlur === 'function') attrs.onBlur(e);
 			},
 			focus: (e: PointerEvent) => emit('focus', e),
 		}));

app/src/components/v-pagination/v-pagination.vue

@@ -90,6 +90,8 @@ export default defineComponent({
 	emits: ['update:modelValue'],
 	setup(props, { emit }) {
 		const visiblePages = computed<number[]>(() => {
+			if (props.totalVisible === undefined) return [];
+
 			let startPage: number;
 			let endPage: number;
 

app/src/composables/groupable/groupable.ts

@@ -92,7 +92,7 @@ export function useGroupable(options?: GroupableOptions): UsableGroupable {
 }
 
 type GroupableParentState = {
-	selection?: Ref<(string | number)[]> | Ref<readonly (string | number)[]>;
+	selection?: Ref<(string | number)[] | undefined> | Ref<readonly (string | number)[] | undefined>;
 	onSelectionChange?: (newSelectionValues: readonly (string | number)[]) => void;
 };
 

app/src/displays/formatted-json-value/formatted-json-value.vue

@@ -25,13 +25,13 @@
 
 <script lang="ts">
 import { render } from 'micromustache';
-import { defineComponent, computed } from 'vue';
+import { defineComponent, computed, PropType } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 export default defineComponent({
 	props: {
 		value: {
-			type: [Object, Array],
+			type: [Object, Array] as PropType<Record<string, any> | Record<string, any>[]>,
 			default: null,
 		},
 		format: {

app/src/displays/related-values/related-values.vue

@@ -48,7 +48,7 @@ export default defineComponent({
 			required: true,
 		},
 		value: {
-			type: [Array, Object] as PropType<any | any[]>,
+			type: [Array, Object] as PropType<Record<string, any> | Record<string, any>[]>,
 			default: null,
 		},
 		template: {

app/src/interfaces/file-image/file-image.vue

@@ -48,7 +48,7 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { defineComponent, ref, watch, computed } from 'vue';
+import { defineComponent, ref, watch, computed, PropType } from 'vue';
 import api from '@/api';
 import formatFilesize from '@/utils/format-filesize';
 import FileLightbox from '@/views/private/components/file-lightbox';
@@ -71,7 +71,7 @@ export default defineComponent({
 	components: { FileLightbox, DrawerItem },
 	props: {
 		value: {
-			type: [String, Object],
+			type: [String, Object] as PropType<string | Record<string, any>>,
 			default: null,
 		},
 		disabled: {
@@ -162,7 +162,7 @@ export default defineComponent({
 			loading.value = true;
 
 			try {
-				const id = typeof props.value === 'string' ? props.value : (props.value as Record<string, any>)?.id;
+				const id = typeof props.value === 'string' ? props.value : props.value?.id;
 
 				const response = await api.get(`/files/${id}`, {
 					params: {

app/src/interfaces/file/file.vue

@@ -136,7 +136,7 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { defineComponent, ref, watch, computed } from 'vue';
+import { defineComponent, ref, watch, computed, PropType } from 'vue';
 import DrawerCollection from '@/views/private/components/drawer-collection';
 import api from '@/api';
 import readableMimeType from '@/utils/readable-mime-type';
@@ -156,7 +156,7 @@ export default defineComponent({
 	components: { DrawerCollection, DrawerItem },
 	props: {
 		value: {
-			type: [String, Object],
+			type: [String, Object] as PropType<string | Record<string, any>>,
 			default: null,
 		},
 		disabled: {
@@ -183,7 +183,7 @@ export default defineComponent({
 		});
 
 		const assetURL = computed(() => {
-			const id = typeof props.value === 'string' ? props.value : (props.value as Record<string, any>)?.id;
+			const id = typeof props.value === 'string' ? props.value : props.value?.id;
 			return addTokenToURL(getRootPath() + `assets/${id}`);
 		});
 

app/src/interfaces/group-raw/group-raw.vue

@@ -14,9 +14,8 @@
 </template>
 
 <script lang="ts">
-import { Field } from '@directus/shared/types';
+import { Field, ValidationError } from '@directus/shared/types';
 import { defineComponent, PropType } from 'vue';
-import { ValidationError } from '@/types';
 export default defineComponent({
 	name: 'InterfaceGroupRaw',
 	props: {

app/src/interfaces/list-m2m/list-m2m.vue

@@ -104,7 +104,6 @@ import useSort from './use-sort';
 import { getFieldsFromTemplate } from '@/utils/get-fields-from-template';
 import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
 import { usePermissionsStore, useUserStore } from '@/stores';
-import { DisplayConfig } from '@directus/shared/types';
 
 export default defineComponent({
 	components: { DrawerItem, DrawerCollection, Draggable },
@@ -160,7 +159,7 @@ export default defineComponent({
 			let relatedDisplayTemplate = relationCollection.value.meta?.display_template;
 			if (relatedDisplayTemplate) {
 				const regex = /({{.*?}})/g;
-				const parts = relatedDisplayTemplate.split(regex).filter((p: DisplayConfig) => p);
+				const parts = relatedDisplayTemplate.split(regex).filter((p) => p);
 
 				for (const part of parts) {
 					if (part.startsWith('{{') === false) continue;

app/src/interfaces/list-m2m/options.vue

@@ -49,7 +49,7 @@ export default defineComponent({
 			default: () => [],
 		},
 		value: {
-			type: Object as PropType<any>,
+			type: Object as PropType<Record<string, any>>,
 			default: null,
 		},
 		newCollections: {

app/src/interfaces/list-m2m/use-relation.ts

@@ -59,8 +59,8 @@ export default function useRelation(collection: Ref<string>, field: Ref<string>)
 
 	const relationInfo = computed(() => {
 		return {
-			junctionPkField: junctionPrimaryKeyField.value.field,
-			relationPkField: relationPrimaryKeyField.value.field,
+			junctionPkField: junctionPrimaryKeyField.value?.field,
+			relationPkField: relationPrimaryKeyField.value?.field,
 			junctionField: junction.value.meta?.junction_field as string,
 			sortField: junction.value.meta?.sort_field as string,
 			junctionCollection: junctionCollection.value.collection,

app/src/interfaces/list-o2m-tree-view/list-o2m-tree-view.vue

@@ -112,7 +112,7 @@ export default defineComponent({
 		const { addNewActive, addNew } = useAddNew();
 
 		const template = computed(() => {
-			return props.displayTemplate || info.value?.meta?.display_template || `{{${primaryKeyField.value.field}}}`;
+			return props.displayTemplate || info.value?.meta?.display_template || `{{${primaryKeyField.value?.field}}}`;
 		});
 
 		onMounted(fetchValues);
@@ -178,7 +178,7 @@ export default defineComponent({
 			function getFieldsToFetch() {
 				const fields = [
 					...new Set([
-						primaryKeyField.value.field,
+						primaryKeyField.value?.field,
 						relation.value.meta!.one_field,
 						...getFieldsFromTemplate(template.value),
 					]),
@@ -234,28 +234,28 @@ export default defineComponent({
 			const selectDrawer = ref(false);
 
 			const selectedPrimaryKeys = computed<(number | string)[]>(() => {
-				if (stagedValues.value === null) return [];
-
-				const pkField = primaryKeyField.value.field;
+				const pkField = primaryKeyField.value?.field;
+				if (stagedValues.value === null || !pkField || !props.primaryKey) return [];
 
 				return [props.primaryKey, ...getPKs(stagedValues.value)];
 
 				function getPKs(values: Record<string, any>[]): (string | number)[] {
 					const pks = [];
 
-					for (const value of values) {
-						if (!value[pkField]) continue;
-						pks.push(value[pkField]);
-						const childPKs = getPKs(value[relation.value.meta!.one_field!]);
-						pks.push(...childPKs);
-					}
+					if (pkField)
+						for (const value of values) {
+							if (!value[pkField]) continue;
+							pks.push(value[pkField]);
+							const childPKs = getPKs(value[relation.value.meta!.one_field!]);
+							pks.push(...childPKs);
+						}
 
 					return pks;
 				}
 			});
 
 			const selectionFilters = computed<Filter[]>(() => {
-				const pkField = primaryKeyField.value.field;
+				const pkField = primaryKeyField.value?.field;
 
 				if (selectedPrimaryKeys.value.length === 0) return [];
 
@@ -286,7 +286,7 @@ export default defineComponent({
 
 				const fields = [
 					...new Set([
-						primaryKeyField.value.field,
+						primaryKeyField.value?.field,
 						relation.value.meta!.one_field,
 						...getFieldsFromTemplate(template.value),
 					]),
@@ -302,11 +302,13 @@ export default defineComponent({
 					}
 				}
 
+				if (!primaryKeyField.value?.field) return;
+
 				const response = await api.get(`/items/${props.collection}`, {
 					params: {
 						fields: [...fields, ...result],
 						filter: {
-							[primaryKeyField.value.field]: {
+							[primaryKeyField.value?.field]: {
 								_in: selection,
 							},
 						},

app/src/interfaces/list-o2m-tree-view/options.vue

@@ -40,7 +40,7 @@ export default defineComponent({
 			default: () => [],
 		},
 		value: {
-			type: Object as PropType<any>,
+			type: Object as PropType<Record<string, any>>,
 			default: null,
 		},
 	},

app/src/interfaces/list-o2m/list-o2m.vue

@@ -192,8 +192,8 @@ export default defineComponent({
 		}
 
 		function getNewItems() {
-			const pkField = relatedPrimaryKeyField.value.field;
-			if (props.value === null) return [];
+			const pkField = relatedPrimaryKeyField.value?.field;
+			if (props.value === null || !pkField) return [];
 			return props.value.filter((item) => typeof item === 'object' && pkField in item === false) as Record<
 				string,
 				any
@@ -201,8 +201,8 @@ export default defineComponent({
 		}
 
 		function getUpdatedItems() {
-			const pkField = relatedPrimaryKeyField.value.field;
-			if (props.value === null) return [];
+			const pkField = relatedPrimaryKeyField.value?.field;
+			if (props.value === null || !pkField) return [];
 			return props.value.filter((item) => typeof item === 'object' && pkField in item === true) as Record<
 				string,
 				any
@@ -210,8 +210,8 @@ export default defineComponent({
 		}
 
 		function getPrimaryKeys() {
-			if (props.value === null) return [];
-			const pkField = relatedPrimaryKeyField.value.field;
+			const pkField = relatedPrimaryKeyField.value?.field;
+			if (props.value === null || !pkField) return [];
 			return props.value
 				.map((item) => {
 					if (typeof item === 'object') {
@@ -224,9 +224,8 @@ export default defineComponent({
 		}
 
 		function deleteItem(item: Record<string, any>) {
-			if (props.value === null) return;
-
-			const relatedPrimKey = relatedPrimaryKeyField.value.field;
+			const relatedPrimKey = relatedPrimaryKeyField.value?.field;
+			if (props.value === null || !relatedPrimKey) return;
 
 			if (relatedPrimKey in item === false) {
 				emit(
@@ -302,7 +301,8 @@ export default defineComponent({
 					if (isEqual(newVal, oldVal)) return;
 
 					loading.value = true;
-					const pkField = relatedPrimaryKeyField.value.field;
+					const pkField = relatedPrimaryKeyField.value?.field;
+					if (!pkField) return;
 
 					const fieldsList = [...(fields.value.length > 0 ? fields.value : getDefaultFields())];
 
@@ -375,13 +375,15 @@ export default defineComponent({
 			return { currentlyEditing, editItem, editsAtStart, stageEdits, cancelEdit };
 
 			function editItem(item: any) {
-				const pkField = relatedPrimaryKeyField.value.field;
+				const pkField = relatedPrimaryKeyField.value?.field;
+				if (!pkField) return;
 				const hasPrimaryKey = pkField in item;
 
 				const edits = (props.value || []).find(
 					(edit: any) =>
 						typeof edit === 'object' &&
-						edit[relatedPrimaryKeyField.value.field] === item[relatedPrimaryKeyField.value.field]
+						relatedPrimaryKeyField.value?.field &&
+						edit[relatedPrimaryKeyField.value?.field] === item[relatedPrimaryKeyField.value?.field]
 				);
 
 				editsAtStart.value = edits || { [pkField]: item[pkField] || {} };
@@ -389,7 +391,8 @@ export default defineComponent({
 			}
 
 			function stageEdits(edits: any) {
-				const pkField = relatedPrimaryKeyField.value.field;
+				const pkField = relatedPrimaryKeyField.value?.field;
+				if (!pkField) return;
 
 				const newValue = (props.value || []).map((item) => {
 					if (typeof item === 'object' && pkField in item && pkField in edits && item[pkField] === edits[pkField]) {
@@ -425,15 +428,14 @@ export default defineComponent({
 			const selectModalActive = ref(false);
 
 			const selectedPrimaryKeys = computed<(number | string)[]>(() => {
-				if (items.value === null) return [];
-
-				const pkField = relatedPrimaryKeyField.value.field;
+				const pkField = relatedPrimaryKeyField.value?.field;
+				if (items.value === null || !pkField) return [];
 
 				return items.value.filter((currentItem) => pkField in currentItem).map((currentItem) => currentItem[pkField]);
 			});
 
 			const selectionFilters = computed<Filter[]>(() => {
-				const pkField = relatedPrimaryKeyField.value.field;
+				const pkField = relatedPrimaryKeyField.value?.field;
 
 				if (selectedPrimaryKeys.value.length === 0) return [];
 

app/src/interfaces/list-o2m/options.vue

@@ -50,7 +50,7 @@ export default defineComponent({
 			default: () => [],
 		},
 		value: {
-			type: Object as PropType<any>,
+			type: Object as PropType<Record<string, any>>,
 			default: null,
 		},
 		newCollections: {

app/src/interfaces/list/options.vue

@@ -35,7 +35,7 @@ export default defineComponent({
 	components: { Repeater },
 	props: {
 		value: {
-			type: Object as PropType<any>,
+			type: Object as PropType<Record<string, any>>,
 			default: null,
 		},
 	},

app/src/interfaces/select-dropdown-m2o/options.vue

@@ -31,7 +31,7 @@ export default defineComponent({
 			default: () => [],
 		},
 		value: {
-			type: Object as PropType<any>,
+			type: Object as PropType<Record<string, any>>,
 			default: null,
 		},
 	},

app/src/interfaces/translations/options.vue

@@ -53,7 +53,7 @@ export default defineComponent({
 			default: () => [],
 		},
 		value: {
-			type: Object as PropType<any>,
+			type: Object as PropType<Record<string, any>>,
 			default: null,
 		},
 	},

app/src/interfaces/translations/translations.vue

@@ -136,7 +136,7 @@ export default defineComponent({
 				return translationsRelation.value.collection;
 			});
 
-			const translationsPrimaryKeyField = computed<string>(() => {
+			const translationsPrimaryKeyField = computed<string | null>(() => {
 				if (!translationsRelation.value) return null;
 				return fieldsStore.getPrimaryKeyFieldForCollection(translationsRelation.value.collection).field;
 			});
@@ -151,8 +151,8 @@ export default defineComponent({
 				return languagesRelation.value.related_collection;
 			});
 
-			const languagesPrimaryKeyField = computed<string>(() => {
-				if (!languagesRelation.value) return null;
+			const languagesPrimaryKeyField = computed<string | null>(() => {
+				if (!languagesRelation.value || !languagesRelation.value.related_collection) return null;
 				return fieldsStore.getPrimaryKeyFieldForCollection(languagesRelation.value.related_collection).field;
 			});
 
@@ -195,7 +195,7 @@ export default defineComponent({
 			return { languages, loading, error, template };
 
 			async function fetchLanguages() {
-				if (!languagesCollection.value) return;
+				if (!languagesCollection.value || !languagesPrimaryKeyField.value) return;
 
 				const fields = getFieldsFromTemplate(template.value);
 
@@ -226,10 +226,12 @@ export default defineComponent({
 			const edits = ref<Record<string, any>>();
 
 			const existingPrimaryKeys = computed(() => {
+				const pkField = translationsPrimaryKeyField.value;
+				if (!pkField) return [];
 				return (props.value || [])
 					.map((value) => {
 						if (typeof value === 'string' || typeof value === 'number') return value;
-						return value[translationsPrimaryKeyField.value];
+						return value[pkField];
 					})
 					.filter((key) => key);
 			});
@@ -239,7 +241,7 @@ export default defineComponent({
 			return { startEditing, editing, edits, stageEdits, cancelEdit };
 
 			function startEditing(language: string | number) {
-				if (!translationsLanguageField.value) return;
+				if (!translationsLanguageField.value || !translationsPrimaryKeyField.value) return;
 
 				edits.value = {
 					[translationsLanguageField.value]: language,
@@ -276,12 +278,14 @@ export default defineComponent({
 				if (!props.value) return;
 				if (keyMap.value) return;
 				if (!existingPrimaryKeys.value?.length) return;
+				const pkField = translationsPrimaryKeyField.value;
+				if (!pkField) return;
 
 				const collection = translationsRelation.value?.collection;
 
 				if (!collection) return;
 
-				const fields = [translationsPrimaryKeyField.value, translationsLanguageField.value];
+				const fields = [pkField, translationsLanguageField.value];
 
 				loading.value = true;
 
@@ -290,7 +294,7 @@ export default defineComponent({
 						params: {
 							fields,
 							filter: {
-								[translationsPrimaryKeyField.value]: {
+								[pkField]: {
 									_in: existingPrimaryKeys.value,
 								},
 							},
@@ -308,6 +312,8 @@ export default defineComponent({
 
 			function stageEdits(edits: any) {
 				if (!translationsLanguageField.value) return;
+				const pkField = translationsPrimaryKeyField.value;
+				if (!pkField) return;
 
 				const editedLanguage = edits[translationsLanguageField.value];
 
@@ -339,7 +345,7 @@ export default defineComponent({
 								if (typeof val === 'string' || typeof val === 'number') {
 									if (val === editing.value) return edits;
 								} else {
-									if (val[translationsPrimaryKeyField.value] === editing.value) return edits;
+									if (val[pkField] === editing.value) return edits;
 								}
 
 								return val;
@@ -406,20 +412,21 @@ export default defineComponent({
 					});
 
 					previewItems.value = languages.value.map((language) => {
+						const pkField = languagesPrimaryKeyField.value;
+						if (!pkField) return;
+
 						const existingEdit =
 							props.value && Array.isArray(props.value)
 								? (props.value.find(
 										(edit) =>
 											isPlainObject(edit) &&
-											(edit as Record<string, any>)[languagesRelation.value!.field] ===
-												language[languagesPrimaryKeyField.value]
+											(edit as Record<string, any>)[languagesRelation.value!.field] === language[pkField]
 								  ) as Record<string, any>)
 								: {};
 
 						return {
 							...(existing.data.data?.find(
-								(item: Record<string, any>) =>
-									item[languagesRelation.value!.field] === language[languagesPrimaryKeyField.value]
+								(item: Record<string, any>) => item[languagesRelation.value!.field] === language[pkField]
 							) ?? {}),
 							...existingEdit,
 						};