Clean-up and fixes after script[setup] migration (#18473)

app/src/layouts/cards/cards.vue

@@ -144,7 +144,7 @@ const { width } = useElementSize(layoutElement);
 
 watch(
 	() => props.page,
-	() => mainElement?.value?.scrollTo({ top: 0, behavior: 'smooth' })
+	() => mainElement.value?.scrollTo({ top: 0, behavior: 'smooth' })
 );
 
 watch(width, () => {

app/src/layouts/cards/components/card.vue

@@ -105,7 +105,7 @@ const selectionIcon = computed(() => {
 });
 
 function toggleSelection() {
-	if (props.item === undefined) return null;
+	if (!props.item) return null;
 
 	if (props.modelValue.includes(props.item[props.itemKey])) {
 		emit(

app/src/layouts/cards/components/header.vue

@@ -63,11 +63,11 @@ const props = withDefaults(
 		size: number;
 		sort: string[];
 		showSelect?: ShowSelect;
-		selection?: Record<string, any>;
+		selection?: (number | string)[];
 	}>(),
 	{
 		showSelect: 'multiple',
-		selection: () => ({}),
+		selection: () => [],
 	}
 );
 

app/src/modules/files/routes/add-new.vue

@@ -3,7 +3,7 @@
 		<v-card>
 			<v-card-title>{{ t('add_file') }}</v-card-title>
 			<v-card-text>
-				<v-upload :preset="{ folder }" multiple from-url @input="close" />
+				<v-upload :preset="props.folder ? { folder: props.folder } : undefined" multiple from-url @input="close" />
 			</v-card-text>
 			<v-card-actions>
 				<v-button secondary @click="close">{{ t('done') }}</v-button>

app/src/modules/files/routes/collection.vue

@@ -586,10 +586,10 @@ function useFileUpload() {
 			loading: true,
 		});
 
+		const preset = props.folder ? { folder: props.folder } : undefined;
+
 		await uploadFiles(files, {
-			preset: {
-				folder: props.folder,
-			},
+			preset,
 			onProgressChange: (progress) => {
 				const percentageDone = progress.reduce((val, cur) => (val += cur)) / progress.length;
 

app/src/modules/settings/routes/data-model/collections/components/collection-dialog.vue

@@ -79,15 +79,10 @@ import { useI18n } from 'vue-i18n';
 import { isEqual } from 'lodash';
 import { Collection } from '@/types/collections';
 
-const props = withDefaults(
-	defineProps<{
-		modelValue?: boolean;
-		collection?: Collection;
-	}>(),
-	{
-		modelValue: false,
-	}
-);
+const props = defineProps<{
+	modelValue?: boolean;
+	collection?: Collection;
+}>();
 
 const emit = defineEmits(['update:modelValue']);
 

app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-translations.vue

@@ -15,7 +15,7 @@
 			</div>
 			<div class="field">
 				<div class="type-label">{{ t('languages_collection') }}</div>
-				<related-collection-select v-model="relatedCollection" :disabled="isExisting" />
+				<related-collection-select v-model="relatedCollection" :disabled="type === 'files' || isExisting" />
 			</div>
 			<v-input disabled :model-value="currentPrimaryKey" />
 			<related-field-select
@@ -159,7 +159,7 @@ const { t } = useI18n();
 const fieldDetailStore = useFieldDetailStore();
 const fieldsStore = useFieldsStore();
 
-const { collection, editing } = storeToRefs(fieldDetailStore);
+const { field, collection, editing } = storeToRefs(fieldDetailStore);
 
 const junctionCollection = syncFieldDetailStoreProperty('relations.o2m.collection');
 const junctionFieldCurrent = syncFieldDetailStoreProperty('relations.o2m.field');
@@ -170,6 +170,7 @@ const onDeleteCurrent = syncFieldDetailStoreProperty('relations.o2m.schema.on_de
 const onDeleteRelated = syncFieldDetailStoreProperty('relations.m2o.schema.on_delete');
 const deselectAction = syncFieldDetailStoreProperty('relations.o2m.meta.one_deselect_action');
 
+const type = computed(() => field.value.type);
 const isExisting = computed(() => editing.value !== '+');
 
 const currentPrimaryKey = computed(() => fieldsStore.getPrimaryKeyFieldForCollection(collection.value!)?.field);

app/src/modules/settings/routes/data-model/field-detail/shared/extension-options.vue

@@ -46,10 +46,7 @@ const props = withDefaults(
 		rawEditorEnabled?: boolean;
 	}>(),
 	{
-		showAdvanced: false,
 		modelValue: () => ({}),
-		disabled: false,
-		rawEditorEnabled: false,
 	}
 );
 

app/src/modules/settings/routes/data-model/field-detail/shared/related-collection-select.vue

@@ -61,15 +61,10 @@ import { orderBy } from 'lodash';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-const props = withDefaults(
-	defineProps<{
-		modelValue?: string;
-		disabled?: boolean;
-	}>(),
-	{
-		disabled: false,
-	}
-);
+const props = defineProps<{
+	modelValue?: string;
+	disabled?: boolean;
+}>();
 
 defineEmits(['update:modelValue']);
 

app/src/modules/settings/routes/data-model/field-detail/shared/related-field-select.vue

@@ -49,19 +49,15 @@ const props = withDefaults(
 		disabled?: boolean;
 		collection?: string;
 		disabledFields?: string[];
-
 		typeDenyList?: string[];
 		typeAllowList?: string[];
-
 		placeholder?: string;
 		nullable?: boolean;
 	}>(),
 	{
-		disabled: false,
 		disabledFields: () => [],
 		typeDenyList: () => [],
 		placeholder: () => i18n.global.t('foreign_key') + '...',
-		nullable: false,
 	}
 );
 

app/src/modules/settings/routes/data-model/fields/components/field-select-menu.vue

@@ -82,15 +82,10 @@ import { Field } from '@directus/types';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-const props = withDefaults(
-	defineProps<{
-		field: Field;
-		noDelete?: boolean;
-	}>(),
-	{
-		noDelete: false,
-	}
-);
+const props = defineProps<{
+	field: Field;
+	noDelete?: boolean;
+}>();
 
 defineEmits(['toggleVisibility', 'duplicate', 'delete', 'setWidth']);
 

app/src/modules/settings/routes/data-model/fields/components/field-select.vue

@@ -177,7 +177,6 @@ const props = withDefaults(
 		fields?: Field[];
 	}>(),
 	{
-		disabled: false,
 		fields: () => [],
 	}
 );

app/src/modules/settings/routes/roles/item/components/permissions-overview-row.vue

@@ -59,18 +59,13 @@ import { useI18n } from 'vue-i18n';
 import useUpdatePermissions from '../composables/use-update-permissions';
 import PermissionsOverviewToggle from './permissions-overview-toggle.vue';
 
-const props = withDefaults(
-	defineProps<{
-		collection: Collection;
-		permissions: Permission[];
-		refreshing: number[];
-		role?: string;
-		appMinimal?: false | Partial<Permission>[];
-	}>(),
-	{
-		appMinimal: false,
-	}
-);
+const props = defineProps<{
+	collection: Collection;
+	permissions: Permission[];
+	refreshing: number[];
+	role?: string;
+	appMinimal?: Partial<Permission>[];
+}>();
 
 const { t } = useI18n();
 

app/src/modules/settings/routes/roles/item/components/permissions-overview-toggle.vue

@@ -71,20 +71,14 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import useUpdatePermissions from '../composables/use-update-permissions';
 
-const props = withDefaults(
-	defineProps<{
-		collection: Collection;
-		action: string;
-		role?: string;
-		permissions?: Permission[];
-		loading?: boolean;
-		appMinimal?: false | Partial<Permission>;
-	}>(),
-	{
-		loading: false,
-		appMinimal: false,
-	}
-);
+const props = defineProps<{
+	collection: Collection;
+	action: string;
+	role?: string;
+	permissions?: Permission[];
+	loading?: boolean;
+	appMinimal?: Partial<Permission>;
+}>();
 
 const { t } = useI18n();
 
@@ -114,7 +108,7 @@ const saving = ref(false);
 const refresh = inject<() => Promise<void>>('refresh-permissions');
 
 const appMinimalLevel = computed(() => {
-	if (props.appMinimal === false) return null;
+	if (!props.appMinimal) return null;
 	if (Object.keys(props.appMinimal).length === 2) return 'full';
 	return 'partial';
 });

app/src/modules/settings/routes/roles/item/components/permissions-overview.vue

@@ -74,17 +74,12 @@ import { appMinimalPermissions, appRecommendedPermissions } from '../../app-perm
 import PermissionsOverviewHeader from './permissions-overview-header.vue';
 import PermissionsOverviewRow from './permissions-overview-row.vue';
 
-const props = withDefaults(
-	defineProps<{
-		role?: string;
-		// the permission row primary key in case we're on the permission detail modal view
-		permission?: string;
-		appAccess?: boolean;
-	}>(),
-	{
-		appAccess: false,
-	}
-);
+const props = defineProps<{
+	role?: string;
+	// the permission row primary key in case we're on the permission detail modal view
+	permission?: string;
+	appAccess?: boolean;
+}>();
 
 const { t } = useI18n();
 

app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue

@@ -19,7 +19,7 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps<{
-	permission: Permission;
+	permission?: Permission;
 	role?: Role;
 }>();
 

app/src/modules/users/components/user-info-sidebar-detail.vue

@@ -49,15 +49,10 @@ import { localizedFormat } from '@/utils/localized-format';
 import { ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-const props = withDefaults(
-	defineProps<{
-		user?: Record<string, any>;
-		isNew: boolean;
-	}>(),
-	{
-		isNew: false,
-	}
-);
+const props = defineProps<{
+	user?: Record<string, any>;
+	isNew?: boolean;
+}>();
 
 const { t } = useI18n();
 

app/src/views/private/components/archive-sidebar-detail.vue

@@ -48,8 +48,10 @@ watch(selectedItem, () => {
 	url.searchParams.delete('archived');
 	url.searchParams.delete('all');
 
-	if (unref(selectedItem)) {
-		url.searchParams.set(selectedItem.value!, '');
+	const selectedItemValue = unref(selectedItem);
+
+	if (selectedItemValue) {
+		url.searchParams.set(selectedItemValue, '');
 	}
 
 	router.push(url.pathname + url.search);

app/src/views/private/components/refresh-sidebar-detail.vue

@@ -13,14 +13,9 @@
 import { useI18n } from 'vue-i18n';
 import { computed, ref, watch } from 'vue';
 
-const props = withDefaults(
-	defineProps<{
-		modelValue: number | null;
-	}>(),
-	{
-		modelValue: null,
-	}
-);
+const props = defineProps<{
+	modelValue: number | null;
+}>();
 
 const emit = defineEmits<{
 	(e: 'update:modelValue', value: number | null): void;

app/src/views/private/components/revisions-drawer-detail.vue

@@ -62,7 +62,7 @@ const { revisions, revisionsByDate, loading, refresh, revisionsCount, pagesCount
 );
 
 const modalActive = ref(false);
-const modalCurrentRevision = ref<number | null>(null);
+const modalCurrentRevision = ref<number>();
 const page = ref<number>(1);
 
 watch(

app/src/views/private/components/revisions-drawer.vue

@@ -52,14 +52,14 @@ import RevisionsDrawerUpdates from './revisions-drawer-updates.vue';
 
 const props = defineProps<{
 	revisions: Revision[];
-	current?: number | string | null;
-	active: boolean;
+	current?: number | string;
+	active?: boolean;
 }>();
 
 const emit = defineEmits<{
 	(e: 'revert', value: Record<string, unknown>): void;
 	(e: 'update:active', value: boolean): void;
-	(e: 'update:current', value: number | string | null): void;
+	(e: 'update:current', value: number | string): void;
 }>();
 
 const { t } = useI18n();

app/src/views/private/components/shares-sidebar-detail.vue

@@ -96,7 +96,7 @@ const { t } = useI18n();
 
 const { copyToClipboard } = useClipboard();
 
-const shares = ref<Share[]>([]);
+const shares = ref<Share[] | null>([]);
 const count = ref(0);
 const error = ref(null);
 const loading = ref(false);

app/src/views/private/components/users-invite.vue

@@ -47,15 +47,10 @@ import { unexpectedError } from '@/utils/unexpected-error';
 import { APIError } from '@/types/error';
 import api from '@/api';
 
-const props = withDefaults(
-	defineProps<{
-		modelValue: boolean;
-		role?: string | null;
-	}>(),
-	{
-		role: null,
-	}
-);
+const props = defineProps<{
+	modelValue: boolean;
+	role?: string;
+}>();
 
 const emit = defineEmits<{
 	(e: 'update:modelValue', value: boolean): void;
@@ -65,7 +60,7 @@ const { t } = useI18n();
 
 const emails = ref<string>('');
 const roles = ref<Record<string, any>[]>([]);
-const roleSelected = ref<string | null>(props.role);
+const roleSelected = ref<string | undefined>(props.role);
 const loading = ref(false);
 
 const uniqueValidationErrors = ref([]);