From 607e32ea36c115a9d6cf820a26475ebbf9e6e9ed Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Mon, 30 Aug 2021 22:54:17 +0200
Subject: [PATCH] Resolve editor/type warnings (#7687)

* resolve editor/type warnings

* dont rename props
---
 app/src/components/v-checkbox/v-checkbox.vue  |  4 ---
 app/src/components/v-error/v-error.vue        |  2 +-
 app/src/components/v-form/form-field.vue      |  3 +-
 app/src/components/v-input/v-input.vue        |  2 +-
 .../components/v-pagination/v-pagination.vue  |  2 ++
 app/src/composables/groupable/groupable.ts    |  2 +-
 .../formatted-json-value.vue                  |  4 +--
 .../related-values/related-values.vue         |  2 +-
 app/src/interfaces/file-image/file-image.vue  |  6 ++--
 app/src/interfaces/file/file.vue              |  6 ++--
 app/src/interfaces/group-raw/group-raw.vue    |  3 +-
 app/src/interfaces/list-m2m/list-m2m.vue      |  3 +-
 app/src/interfaces/list-m2m/options.vue       |  2 +-
 app/src/interfaces/list-m2m/use-relation.ts   |  4 +--
 .../list-o2m-tree-view/list-o2m-tree-view.vue | 30 ++++++++--------
 .../interfaces/list-o2m-tree-view/options.vue |  2 +-
 app/src/interfaces/list-o2m/list-o2m.vue      | 36 ++++++++++---------
 app/src/interfaces/list-o2m/options.vue       |  2 +-
 app/src/interfaces/list/options.vue           |  2 +-
 .../select-dropdown-m2o/options.vue           |  2 +-
 app/src/interfaces/translations/options.vue   |  2 +-
 .../interfaces/translations/translations.vue  | 33 ++++++++++-------
 22 files changed, 80 insertions(+), 74 deletions(-)

diff --git a/app/src/components/v-checkbox/v-checkbox.vue b/app/src/components/v-checkbox/v-checkbox.vue
index c556b1e039..573346efd8 100644
--- a/app/src/components/v-checkbox/v-checkbox.vue
+++ b/app/src/components/v-checkbox/v-checkbox.vue
@@ -224,10 +224,6 @@ body {
 				opacity: 0.1;
 			}
 		}
-
-		input {
-			//
-		}
 	}
 
 	.prepend,
diff --git a/app/src/components/v-error/v-error.vue b/app/src/components/v-error/v-error.vue
index 37583597e3..684571902c 100644
--- a/app/src/components/v-error/v-error.vue
+++ b/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,
 		},
 	},
diff --git a/app/src/components/v-form/form-field.vue b/app/src/components/v-form/form-field.vue
index 27042ccc42..f5730b0e50 100644
--- a/app/src/components/v-form/form-field.vue
+++ b/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';
 
diff --git a/app/src/components/v-input/v-input.vue b/app/src/components/v-input/v-input.vue
index 77cfd76d8d..8fdffa9f54 100644
--- a/app/src/components/v-input/v-input.vue
+++ b/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),
 		}));
diff --git a/app/src/components/v-pagination/v-pagination.vue b/app/src/components/v-pagination/v-pagination.vue
index 96ab9008b7..af1fbc078b 100644
--- a/app/src/components/v-pagination/v-pagination.vue
+++ b/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;
 
diff --git a/app/src/composables/groupable/groupable.ts b/app/src/composables/groupable/groupable.ts
index b63e0b3739..78190b4d78 100644
--- a/app/src/composables/groupable/groupable.ts
+++ b/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;
 };
 
diff --git a/app/src/displays/formatted-json-value/formatted-json-value.vue b/app/src/displays/formatted-json-value/formatted-json-value.vue
index 15e420cefe..63e557468d 100644
--- a/app/src/displays/formatted-json-value/formatted-json-value.vue
+++ b/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: {
diff --git a/app/src/displays/related-values/related-values.vue b/app/src/displays/related-values/related-values.vue
index f1921c5920..eb97cd2aee 100644
--- a/app/src/displays/related-values/related-values.vue
+++ b/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: {
diff --git a/app/src/interfaces/file-image/file-image.vue b/app/src/interfaces/file-image/file-image.vue
index e245817020..fb86ca50ff 100644
--- a/app/src/interfaces/file-image/file-image.vue
+++ b/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: {
diff --git a/app/src/interfaces/file/file.vue b/app/src/interfaces/file/file.vue
index 92f25861d3..3b10df9312 100644
--- a/app/src/interfaces/file/file.vue
+++ b/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}`);
 		});
 
diff --git a/app/src/interfaces/group-raw/group-raw.vue b/app/src/interfaces/group-raw/group-raw.vue
index ad779f545b..6899c02b8c 100644
--- a/app/src/interfaces/group-raw/group-raw.vue
+++ b/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: {
diff --git a/app/src/interfaces/list-m2m/list-m2m.vue b/app/src/interfaces/list-m2m/list-m2m.vue
index ff4a93e7f7..f7bf20f88e 100644
--- a/app/src/interfaces/list-m2m/list-m2m.vue
+++ b/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;
diff --git a/app/src/interfaces/list-m2m/options.vue b/app/src/interfaces/list-m2m/options.vue
index 16c5870e13..a55c789a1a 100644
--- a/app/src/interfaces/list-m2m/options.vue
+++ b/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: {
diff --git a/app/src/interfaces/list-m2m/use-relation.ts b/app/src/interfaces/list-m2m/use-relation.ts
index 5c5e961061..48ed5ddfc9 100644
--- a/app/src/interfaces/list-m2m/use-relation.ts
+++ b/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,
diff --git a/app/src/interfaces/list-o2m-tree-view/list-o2m-tree-view.vue b/app/src/interfaces/list-o2m-tree-view/list-o2m-tree-view.vue
index 37ce0acb70..75f390a0d7 100644
--- a/app/src/interfaces/list-o2m-tree-view/list-o2m-tree-view.vue
+++ b/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,
 							},
 						},
diff --git a/app/src/interfaces/list-o2m-tree-view/options.vue b/app/src/interfaces/list-o2m-tree-view/options.vue
index 8e2ef8981d..ce1ffe6793 100644
--- a/app/src/interfaces/list-o2m-tree-view/options.vue
+++ b/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,
 		},
 	},
diff --git a/app/src/interfaces/list-o2m/list-o2m.vue b/app/src/interfaces/list-o2m/list-o2m.vue
index 421816233e..56fb9f1ce4 100644
--- a/app/src/interfaces/list-o2m/list-o2m.vue
+++ b/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 [];
 
diff --git a/app/src/interfaces/list-o2m/options.vue b/app/src/interfaces/list-o2m/options.vue
index 7344ee44aa..8bc064b1dd 100644
--- a/app/src/interfaces/list-o2m/options.vue
+++ b/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: {
diff --git a/app/src/interfaces/list/options.vue b/app/src/interfaces/list/options.vue
index 2899f38954..2a5d3b557c 100644
--- a/app/src/interfaces/list/options.vue
+++ b/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,
 		},
 	},
diff --git a/app/src/interfaces/select-dropdown-m2o/options.vue b/app/src/interfaces/select-dropdown-m2o/options.vue
index 0f62292f6f..7208023f52 100644
--- a/app/src/interfaces/select-dropdown-m2o/options.vue
+++ b/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,
 		},
 	},
diff --git a/app/src/interfaces/translations/options.vue b/app/src/interfaces/translations/options.vue
index f2baa9f1cf..34fd34aa38 100644
--- a/app/src/interfaces/translations/options.vue
+++ b/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,
 		},
 	},
diff --git a/app/src/interfaces/translations/translations.vue b/app/src/interfaces/translations/translations.vue
index 4e885dc59a..1019e33e37 100644
--- a/app/src/interfaces/translations/translations.vue
+++ b/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,
 						};