Change print width to 120 (#671)

* Increase line-width to 120

* Auto-fix 100->120 columns

src/modules/activity/routes/browse/browse.vue

@@ -25,10 +25,7 @@
 			</drawer-detail>
 			<portal-target name="drawer" />
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>

src/modules/activity/routes/detail/detail.vue

@@ -14,22 +14,14 @@
 			<activity-navigation />
 		</template>
 
-		<v-form
-			collection="directus_activity"
-			:loading="loading"
-			:initial-values="item"
-			:primary-key="primaryKey"
-		/>
+		<v-form collection="directus_activity" :loading="loading" :initial-values="item" :primary-key="primaryKey" />
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
 				<div class="format-markdown" v-html="marked($t('page_help_activity_detail'))" />
 			</drawer-detail>
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>

src/modules/collections/components/navigation/navigation.vue

@@ -3,12 +3,7 @@
 		<template v-if="customNavItems && customNavItems.length > 0">
 			<div :key="group.name" v-for="(group, index) in customNavItems">
 				<div class="group-name">{{ group.name }}</div>
-				<v-list-item
-					:exact="exact"
-					v-for="navItem in group.items"
-					:key="navItem.to"
-					:to="navItem.to"
-				>
+				<v-list-item :exact="exact" v-for="navItem in group.items" :key="navItem.to" :to="navItem.to">
 					<v-list-item-icon><v-icon :name="navItem.icon" /></v-list-item-icon>
 					<v-list-item-content>{{ navItem.name }}</v-list-item-content>
 				</v-list-item>
@@ -16,13 +11,7 @@
 			</div>
 		</template>
 
-		<v-list-item
-			v-else
-			:exact="exact"
-			v-for="navItem in navItems"
-			:key="navItem.to"
-			:to="navItem.to"
-		>
+		<v-list-item v-else :exact="exact" v-for="navItem in navItems" :key="navItem.to" :to="navItem.to">
 			<v-list-item-icon><v-icon :name="navItem.icon" /></v-list-item-icon>
 			<v-list-item-content>{{ navItem.name }}</v-list-item-content>
 		</v-list-item>
@@ -61,9 +50,7 @@ export default defineComponent({
 
 			return collectionPresetsStore.state.collectionPresets
 				.filter((preset) => {
-					return (
-						preset.title !== null && preset.collection.startsWith('directus_') === false
-					);
+					return preset.title !== null && preset.collection.startsWith('directus_') === false;
 				})
 				.map((preset) => {
 					return {

src/modules/collections/routes/browse/browse.vue

@@ -308,9 +308,7 @@ export default defineComponent({
 				const batchPrimaryKeys = selection.value;
 
 				try {
-					await api.delete(
-						`/${currentProjectKey}/items/${props.collection}/${batchPrimaryKeys}`
-					);
+					await api.delete(`/${currentProjectKey}/items/${props.collection}/${batchPrimaryKeys}`);
 
 					await layout.value?.refresh?.();
 

src/modules/collections/routes/detail/detail.vue

@@ -1,10 +1,7 @@
 <template>
 	<collections-not-found v-if="error && error.code === 404" />
 	<private-view v-else :title="title">
-		<template
-			#title
-			v-if="isNew === false && isBatch === false && collectionInfo.display_template"
-		>
+		<template #title v-if="isNew === false && isBatch === false && collectionInfo.display_template">
 			<v-skeleton-loader class="title-loader" type="text" v-if="loading" />
 			<h1 class="type-title" v-else>
 				<render-template
@@ -16,14 +13,7 @@
 		</template>
 
 		<template #title-outer:prepend>
-			<v-button
-				v-if="collectionInfo.single"
-				class="header-icon"
-				rounded
-				icon
-				secondary
-				disabled
-			>
+			<v-button v-if="collectionInfo.single" class="header-icon" rounded icon secondary disabled>
 				<v-icon :name="collectionInfo.icon" />
 			</v-button>
 			<v-button
@@ -96,11 +86,7 @@
 						<v-button @click="confirmSoftDelete = false" secondary>
 							{{ $t('cancel') }}
 						</v-button>
-						<v-button
-							@click="deleteAndQuit(true)"
-							class="action-delete"
-							:loading="softDeleting"
-						>
+						<v-button @click="deleteAndQuit(true)" class="action-delete" :loading="softDeleting">
 							{{ $t('delete') }}
 						</v-button>
 					</v-card-actions>
@@ -172,10 +158,7 @@
 				:primary-key="primaryKey"
 			/>
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -238,9 +221,7 @@ export default defineComponent({
 
 		const revisionsDrawerDetail = ref<Vue>(null);
 
-		const { info: collectionInfo, softDeleteStatus, primaryKeyField } = useCollection(
-			collection
-		);
+		const { info: collectionInfo, softDeleteStatus, primaryKeyField } = useCollection(collection);
 
 		const {
 			isNew,
@@ -266,9 +247,7 @@ export default defineComponent({
 		const confirmLeave = ref(false);
 		const leaveTo = ref<string>(null);
 
-		const backLink = computed(
-			() => `/${currentProjectKey.value}/collections/${collection.value}/`
-		);
+		const backLink = computed(() => `/${currentProjectKey.value}/collections/${collection.value}/`);
 
 		const templateValues = computed(() => {
 			return {
@@ -344,9 +323,7 @@ export default defineComponent({
 			if (props.primaryKey === '+') {
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 				const newPrimaryKey = savedItem[primaryKeyField.value!.field];
-				router.replace(
-					`/${currentProjectKey.value}/collections/${props.collection}/${newPrimaryKey}`
-				);
+				router.replace(`/${currentProjectKey.value}/collections/${props.collection}/${newPrimaryKey}`);
 			}
 		}
 
@@ -357,9 +334,7 @@ export default defineComponent({
 
 		async function saveAsCopyAndNavigate() {
 			const newPrimaryKey = await saveAsCopy();
-			router.push(
-				`/${currentProjectKey.value}/collections/${props.collection}/${newPrimaryKey}`
-			);
+			router.push(`/${currentProjectKey.value}/collections/${props.collection}/${newPrimaryKey}`);
 		}
 
 		async function deleteAndQuit(soft = false) {

src/modules/collections/routes/overview/overview.vue

@@ -10,12 +10,7 @@
 			<collections-navigation />
 		</template>
 
-		<v-table
-			v-if="navItems.length > 0"
-			:headers="tableHeaders"
-			:items="navItems"
-			@click:row="navigateToCollection"
-		>
+		<v-table v-if="navItems.length > 0" :headers="tableHeaders" :items="navItems" @click:row="navigateToCollection">
 			<template #item.icon="{ item }">
 				<v-icon class="icon" :name="item.icon" />
 			</template>
@@ -35,16 +30,10 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>

src/modules/define.ts

@@ -1,9 +1,7 @@
 import { i18n } from '@/lang/';
 import { ModuleDefineParam, ModuleContext, ModuleConfig } from './types';
 
-export function defineModule(
-	config: ModuleDefineParam | ((context: ModuleContext) => ModuleConfig)
-): ModuleConfig {
+export function defineModule(config: ModuleDefineParam | ((context: ModuleContext) => ModuleConfig)): ModuleConfig {
 	let options: ModuleConfig;
 
 	if (typeof config === 'function') {

src/modules/files/components/add-folder/add-folder.vue

@@ -13,11 +13,7 @@
 			</v-card-text>
 			<v-card-actions>
 				<v-button secondary @click="dialogActive = false">{{ $t('cancel') }}</v-button>
-				<v-button
-					:disabled="!newFolderName || newFolderName.length === 0"
-					@click="addFolder"
-					:loading="saving"
-				>
+				<v-button :disabled="!newFolderName || newFolderName.length === 0" @click="addFolder" :loading="saving">
 					{{ $t('save') }}
 				</v-button>
 			</v-card-actions>

src/modules/files/routes/browse/browse.vue

@@ -70,10 +70,7 @@
 			<layout-drawer-detail @input="viewType = $event" :value="viewType" />
 			<portal-target name="drawer" />
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -107,9 +104,7 @@ export default defineComponent({
 
 		const selection = ref<Item[]>([]);
 
-		const { viewType, viewOptions, viewQuery, filters, searchQuery } = useCollectionPreset(
-			ref('directus_files')
-		);
+		const { viewType, viewOptions, viewQuery, filters, searchQuery } = useCollectionPreset(ref('directus_files'));
 		const { addNewLink, batchLink } = useLinks();
 		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
 		const { breadcrumb } = useBreadcrumb();

src/modules/files/routes/detail/components/file-info-drawer-detail.vue

@@ -73,11 +73,9 @@ export default defineComponent({
 
 		const creationDate = ref<string>(null);
 
-		localizedFormat(new Date(props.uploaded_on), String(i18n.t('date-fns_datetime'))).then(
-			(result) => {
-				creationDate.value = result;
-			}
-		);
+		localizedFormat(new Date(props.uploaded_on), String(i18n.t('date-fns_datetime'))).then((result) => {
+			creationDate.value = result;
+		});
 
 		return { readableMimeType, size, creationDate };
 	},

src/modules/files/routes/detail/detail.vue

@@ -13,13 +13,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
-					<v-button
-						rounded
-						icon
-						class="action-delete"
-						:disabled="item === null"
-						@click="on"
-					>
+					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -38,23 +32,11 @@
 				</v-card>
 			</v-dialog>
 
-			<v-button
-				v-if="item && item.type.includes('image')"
-				rounded
-				icon
-				@click="editActive = true"
-				class="edit"
-			>
+			<v-button v-if="item && item.type.includes('image')" rounded icon @click="editActive = true" class="edit">
 				<v-icon name="tune" />
 			</v-button>
 
-			<v-button
-				rounded
-				icon
-				:loading="saving"
-				:disabled="hasEdits === false"
-				@click="saveAndQuit"
-			>
+			<v-button rounded icon :loading="saving" :disabled="hasEdits === false" @click="saveAndQuit">
 				<v-icon name="check" />
 
 				<template #append-outer>
@@ -129,10 +111,7 @@
 				:primary-key="primaryKey"
 			/>
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -200,19 +179,10 @@ export default defineComponent({
 
 		const revisionsDrawerDetail = ref<Vue>(null);
 
-		const {
-			isNew,
-			edits,
-			item,
-			saving,
-			loading,
-			error,
-			save,
-			remove,
-			deleting,
-			saveAsCopy,
-			isBatch,
-		} = useItem(ref('directus_files'), primaryKey);
+		const { isNew, edits, item, saving, loading, error, save, remove, deleting, saveAsCopy, isBatch } = useItem(
+			ref('directus_files'),
+			primaryKey
+		);
 
 		const hasEdits = computed<boolean>(() => Object.keys(edits.value).length > 0);
 		const confirmDelete = ref(false);

src/modules/index.ts

@@ -5,13 +5,6 @@ import ActivityModule from './activity/';
 import DocsModule from './docs/';
 import SettingsModule from './settings/';
 
-export const modules = [
-	ActivityModule,
-	CollectionsModule,
-	UsersModule,
-	FilesModule,
-	DocsModule,
-	SettingsModule,
-];
+export const modules = [ActivityModule, CollectionsModule, UsersModule, FilesModule, DocsModule, SettingsModule];
 
 export default modules;

src/modules/register.ts

@@ -9,15 +9,8 @@ const moduleRoutes = modules
 
 replaceRoutes((routes) => insertBeforeProjectWildcard(routes, moduleRoutes));
 
-export function insertBeforeProjectWildcard(
-	currentRoutes: RouteConfig[],
-	routesToBeAdded: RouteConfig[]
-) {
+export function insertBeforeProjectWildcard(currentRoutes: RouteConfig[], routesToBeAdded: RouteConfig[]) {
 	// Find the index of the /:project/* route, so we can insert the module routes right above that
 	const wildcardIndex = currentRoutes.findIndex((route) => route.path === '/:project/*');
-	return [
-		...currentRoutes.slice(0, wildcardIndex),
-		...routesToBeAdded,
-		...currentRoutes.slice(wildcardIndex),
-	];
+	return [...currentRoutes.slice(0, wildcardIndex), ...routesToBeAdded, ...currentRoutes.slice(wildcardIndex)];
 }

src/modules/settings/routes/data-model/collections/collections.vue

@@ -17,13 +17,7 @@
 		</template>
 
 		<div class="padding-box">
-			<v-info
-				type="warning"
-				icon="box"
-				:title="$t('no_collections')"
-				v-if="items.length === 0"
-				center
-			>
+			<v-info type="warning" icon="box" :title="$t('no_collections')" v-if="items.length === 0" center>
 				{{ $t('no_collections_copy_admin') }}
 
 				<template #append>
@@ -46,9 +40,7 @@
 						:class="{
 							hidden: item.hidden,
 							system: item.collection.startsWith('directus_'),
-							unmanaged:
-								item.managed === false &&
-								item.collection.startsWith('directus_') === false,
+							unmanaged: item.managed === false && item.collection.startsWith('directus_') === false,
 						}"
 						:name="item.icon"
 					/>
@@ -60,9 +52,7 @@
 						:class="{
 							hidden: item.hidden,
 							system: item.collection.startsWith('directus_'),
-							unmanaged:
-								item.managed === false &&
-								item.collection.startsWith('directus_') === false,
+							unmanaged: item.managed === false && item.collection.startsWith('directus_') === false,
 						}"
 					>
 						{{ item.name }}
@@ -85,17 +75,11 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_settings_datamodel_collections'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_settings_datamodel_collections'))" />
 			</drawer-detail>
 			<collections-filter v-model="activeTypes" />
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -188,9 +172,7 @@ export default defineComponent({
 			const system = computed(() => {
 				return sortBy(
 					collectionsStore.state.collections
-						.filter(
-							(collection) => collection.collection.startsWith('directus_') === true
-						)
+						.filter((collection) => collection.collection.startsWith('directus_') === true)
 						.map((collection) => ({ ...collection, icon: 'settings' })),
 					'collection'
 				);
@@ -199,9 +181,7 @@ export default defineComponent({
 			const unmanaged = computed(() => {
 				return sortBy(
 					collectionsStore.state.collections
-						.filter(
-							(collection) => collection.collection.startsWith('directus_') === false
-						)
+						.filter((collection) => collection.collection.startsWith('directus_') === false)
 						.filter((collection) => collection.managed === false)
 						.map((collection) => ({ ...collection, icon: 'block' })),
 					'collection'

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

@@ -1,8 +1,6 @@
 <template>
 	<v-button
-		v-if="
-			collection.managed === false && collection.collection.startsWith('directus_') === false
-		"
+		v-if="collection.managed === false && collection.collection.startsWith('directus_') === false"
 		x-small
 		outlined
 		class="manage"

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

@@ -86,11 +86,7 @@
 				{{ $t('cancel') }}
 			</v-button>
 			<div class="spacer" />
-			<v-button
-				secondary
-				@click="currentTab = ['collection']"
-				:disabled="currentTab[0] === 'collection'"
-			>
+			<v-button secondary @click="currentTab = ['collection']" :disabled="currentTab[0] === 'collection'">
 				{{ $t('previous') }}
 			</v-button>
 			<v-button

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

@@ -2,13 +2,7 @@
 	<div :class="hidden ? 'half' : field.width">
 		<v-menu attached close-on-content-click>
 			<template #activator="{ toggle, active }">
-				<v-input
-					class="field"
-					:class="{ hidden, active }"
-					readonly
-					@click="toggle"
-					:value="field.name"
-				>
+				<v-input class="field" :class="{ hidden, active }" readonly @click="toggle" :value="field.name">
 					<template #prepend>
 						<v-icon class="drag-handle" name="drag_indicator" @click.stop />
 					</template>
@@ -123,14 +117,7 @@ export default defineComponent({
 		const collectionsStore = useCollectionsStore();
 
 		const { deleteActive, deleting, deleteField } = useDeleteField();
-		const {
-			duplicateActive,
-			duplicateName,
-			collections,
-			duplicateTo,
-			saveDuplicate,
-			duplicating,
-		} = useDuplicate();
+		const { duplicateActive, duplicateName, collections, duplicateTo, saveDuplicate, duplicating } = useDuplicate();
 
 		return {
 			editActive,

src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-display.vue

@@ -2,16 +2,10 @@
 	<div>
 		<h2 class="type-title" v-if="isNew">{{ $t('display_setup_title') }}</h2>
 
-		<v-fancy-select
-			:items="items"
-			:value="value.display"
-			@input="emitValue('display', $event)"
-		/>
+		<v-fancy-select :items="items" :value="value.display" @input="emitValue('display', $event)" />
 
 		<v-form
-			v-if="
-				selectedDisplay && selectedDisplay.options && Array.isArray(selectedDisplay.options)
-			"
+			v-if="selectedDisplay && selectedDisplay.options && Array.isArray(selectedDisplay.options)"
 			:fields="selectedDisplay.options"
 			primary-key="+"
 			:edits="value.options"

src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-interface.vue

@@ -2,18 +2,10 @@
 	<div>
 		<h2 class="type-title" v-if="isNew">{{ $t('relationship_setup_title') }}</h2>
 
-		<v-fancy-select
-			:items="items"
-			:value="value.interface"
-			@input="emitValue('interface', $event)"
-		/>
+		<v-fancy-select :items="items" :value="value.interface" @input="emitValue('interface', $event)" />
 
 		<v-form
-			v-if="
-				selectedInterface &&
-				selectedInterface.options &&
-				Array.isArray(selectedInterface.options)
-			"
+			v-if="selectedInterface && selectedInterface.options && Array.isArray(selectedInterface.options)"
 			:fields="selectedInterface.options"
 			primary-key="+"
 			:edits="value.options"

src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-relationship-m2m.vue

@@ -13,18 +13,10 @@
 			<v-select :items="collectionItems" v-model="relatedCollection" />
 		</div>
 		<v-input disabled :value="field.field" />
-		<v-select
-			:disabled="!junctionCollection"
-			:items="junctionFields"
-			v-model="junctionFieldCurrent"
-		/>
+		<v-select :disabled="!junctionCollection" :items="junctionFields" v-model="junctionFieldCurrent" />
 		<div class="spacer" />
 		<div class="spacer" />
-		<v-select
-			:disabled="!junctionCollection"
-			:items="junctionFields"
-			v-model="junctionFieldRelated"
-		/>
+		<v-select :disabled="!junctionCollection" :items="junctionFields" v-model="junctionFieldRelated" />
 		<v-input disabled value="id" />
 		<v-icon name="arrow_forward" />
 		<v-icon name="arrow_backward" />
@@ -124,12 +116,10 @@ export default defineComponent({
 		const junctionFields = computed(() => {
 			if (!junctionCollection.value) return [];
 
-			return fieldsStore
-				.getFieldsForCollection(junctionCollection.value)
-				.map((field: Field) => ({
-					text: field.name,
-					value: field.field,
-				}));
+			return fieldsStore.getFieldsForCollection(junctionCollection.value).map((field: Field) => ({
+				text: field.name,
+				value: field.field,
+			}));
 		});
 
 		const relatedCollection = computed({

src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-relationship-m2o.vue

@@ -93,10 +93,7 @@ export default defineComponent({
 
 		const existingRelation = computed(() => {
 			return props.existingRelations.find((relation) => {
-				return (
-					relation.field_many === props.field.field &&
-					relation.collection_many === props.field.collection
-				);
+				return relation.field_many === props.field.field && relation.collection_many === props.field.collection;
 			});
 		});
 

src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-relationship-o2m.vue

@@ -86,10 +86,7 @@ export default defineComponent({
 
 		const existingRelation = computed(() => {
 			return props.existingRelations.find((relation) => {
-				return (
-					relation.field_one === props.field.field &&
-					relation.collection_one === props.field.collection
-				);
+				return relation.field_one === props.field.field && relation.collection_one === props.field.collection;
 			});
 		});
 

src/modules/settings/routes/data-model/fields/components/field-setup/setup-actions.vue

@@ -54,18 +54,13 @@ export default defineComponent({
 		const _currentTab = useSync(props, 'currentTab', emit);
 
 		const { field, localType } = toRefs(props);
-		const {
-			fieldComplete,
-			relationComplete,
-			interfaceComplete,
-			displayComplete,
-			advancedComplete,
-		} = useValidation(field, localType);
-
-		const currentTabIndex = computed(() =>
-			props.tabs.findIndex((tab) => tab.value === props.currentTab[0])
+		const { fieldComplete, relationComplete, interfaceComplete, displayComplete, advancedComplete } = useValidation(
+			field,
+			localType
 		);
 
+		const currentTabIndex = computed(() => props.tabs.findIndex((tab) => tab.value === props.currentTab[0]));
+
 		const previousDisabled = computed(() => {
 			return currentTabIndex.value === 0;
 		});

src/modules/settings/routes/data-model/fields/components/field-setup/setup-tabs.vue

@@ -1,11 +1,6 @@
 <template>
 	<v-tabs vertical v-model="_currentTab">
-		<v-tab
-			v-for="tab in tabs"
-			:key="tab.value"
-			:value="tab.value"
-			:disabled="tabEnabled(tab) === false"
-		>
+		<v-tab v-for="tab in tabs" :key="tab.value" :value="tab.value" :disabled="tabEnabled(tab) === false">
 			{{ tab.text }}
 		</v-tab>
 	</v-tabs>
@@ -45,12 +40,7 @@ export default defineComponent({
 		const _currentTab = useSync(props, 'currentTab', emit);
 
 		const { field, localType } = toRefs(props);
-		const {
-			fieldComplete,
-			relationComplete,
-			interfaceComplete,
-			displayComplete,
-		} = useValidation(field, localType);
+		const { fieldComplete, relationComplete, interfaceComplete, displayComplete } = useValidation(field, localType);
 
 		const hasRelationshipTab = computed(() => {
 			const relationshipTab = props.tabs.find((tab) => tab.value === 'relationship');
@@ -69,9 +59,7 @@ export default defineComponent({
 				case 'relationship':
 					return fieldComplete.value === true;
 				case 'interface':
-					return hasRelationshipTab.value
-						? relationComplete.value === true
-						: fieldComplete.value === true;
+					return hasRelationshipTab.value ? relationComplete.value === true : fieldComplete.value === true;
 				case 'display':
 					return interfaceComplete.value === true;
 				case 'advanced':

src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue

@@ -21,14 +21,7 @@
 			/>
 
 			<template #footer>
-				<v-button
-					class="add-field"
-					align="left"
-					dashed
-					outlined
-					large
-					@click="openFieldSetup()"
-				>
+				<v-button class="add-field" align="left" dashed outlined large @click="openFieldSetup()">
 					<v-icon name="add" />
 
 					{{ $t('add_field') }}
@@ -57,14 +50,7 @@
 			/>
 
 			<template #footer>
-				<v-button
-					class="add-field"
-					align="left"
-					dashed
-					outlined
-					large
-					@click="openFieldSetup()"
-				>
+				<v-button class="add-field" align="left" dashed outlined large @click="openFieldSetup()">
 					<v-icon name="add" />
 
 					{{ $t('add_field') }}
@@ -156,8 +142,7 @@ export default defineComponent({
 		}
 
 		function toggleVisibility(field: Field, location: 'visible' | 'hidden') {
-			const fields =
-				location === 'hidden' ? sortedVisibleFields.value : sortedHiddenFields.value;
+			const fields = location === 'hidden' ? sortedVisibleFields.value : sortedHiddenFields.value;
 
 			handleChange(
 				{ added: { element: field, newIndex: fields.length } },
@@ -165,21 +150,16 @@ export default defineComponent({
 			);
 		}
 
-		function addToGroup(
-			event: Required<DraggableEvent>['added'],
-			location: 'visible' | 'hidden'
-		) {
+		function addToGroup(event: Required<DraggableEvent>['added'], location: 'visible' | 'hidden') {
 			/** @NOTE Adding to one group also means removing from the other */
 
 			const { element, newIndex } = event;
 
-			const fieldsInGroup =
-				location === 'visible' ? sortedVisibleFields.value : sortedHiddenFields.value;
+			const fieldsInGroup = location === 'visible' ? sortedVisibleFields.value : sortedHiddenFields.value;
 
 			const updates: Partial<Field>[] = fieldsInGroup.slice(newIndex).map((field) => {
 				const sortValue =
-					field.sort ||
-					fieldsInGroup.findIndex((existingField) => existingField.field === field.field);
+					field.sort || fieldsInGroup.findIndex((existingField) => existingField.field === field.field);
 
 				return {
 					field: field.field,
@@ -209,25 +189,19 @@ export default defineComponent({
 			fieldsStore.updateFields(element.collection, updates);
 		}
 
-		function sortInGroup(
-			event: Required<DraggableEvent>['moved'],
-			location: 'visible' | 'hidden'
-		) {
+		function sortInGroup(event: Required<DraggableEvent>['moved'], location: 'visible' | 'hidden') {
 			const { element, newIndex, oldIndex } = event;
 			const move = newIndex > oldIndex ? 'down' : 'up';
 
-			const selectionRange =
-				move === 'down' ? [oldIndex + 1, newIndex + 1] : [newIndex, oldIndex];
+			const selectionRange = move === 'down' ? [oldIndex + 1, newIndex + 1] : [newIndex, oldIndex];
 
-			const fields =
-				location === 'visible' ? sortedVisibleFields.value : sortedHiddenFields.value;
+			const fields = location === 'visible' ? sortedVisibleFields.value : sortedHiddenFields.value;
 
 			const updates: Partial<Field>[] = fields.slice(...selectionRange).map((field) => {
 				// If field.sort isn't set yet, base it on the index of the array. That way, the
 				// new sort value will match what's visible on the screen
 				const sortValue =
-					field.sort ||
-					fields.findIndex((existingField) => existingField.field === field.field);
+					field.sort || fields.findIndex((existingField) => existingField.field === field.field);
 
 				return {
 					field: field.field,

src/modules/settings/routes/data-model/fields/fields.vue

@@ -9,13 +9,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
-					<v-button
-						rounded
-						icon
-						class="action-delete"
-						:disabled="item === null"
-						@click="on"
-					>
+					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -34,13 +28,7 @@
 				</v-card>
 			</v-dialog>
 
-			<v-button
-				rounded
-				icon
-				:loading="saving"
-				:disabled="hasEdits === false"
-				@click="saveAndQuit"
-			>
+			<v-button rounded icon :loading="saving" :disabled="hasEdits === false" @click="saveAndQuit">
 				<v-icon name="check" />
 			</v-button>
 		</template>
@@ -70,16 +58,10 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_settings_datamodel_fields'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_settings_datamodel_fields'))" />
 			</drawer-detail>
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -111,19 +93,10 @@ export default defineComponent({
 		const { currentProjectKey } = toRefs(projectsStore.state);
 		const collectionsStore = useCollectionsStore();
 
-		const {
-			isNew,
-			edits,
-			item,
-			saving,
-			loading,
-			error,
-			save,
-			remove,
-			deleting,
-			saveAsCopy,
-			isBatch,
-		} = useItem(ref('directus_collections'), collection);
+		const { isNew, edits, item, saving, loading, error, save, remove, deleting, saveAsCopy, isBatch } = useItem(
+			ref('directus_collections'),
+			collection
+		);
 
 		const hasEdits = computed<boolean>(() => Object.keys(edits.value).length > 0);
 

src/modules/settings/routes/global/global.vue

@@ -17,12 +17,7 @@
 		</template>
 
 		<div class="settings">
-			<v-form
-				:initial-values="initialValues"
-				v-model="edits"
-				:fields="fields"
-				:primary-key="1"
-			/>
+			<v-form :initial-values="initialValues" v-model="edits" :fields="fields" :primary-key="1" />
 		</div>
 
 		<template #drawer>
@@ -53,9 +48,7 @@ export default defineComponent({
 
 		const edits = ref<{ [key: string]: any }>(null);
 
-		const noEdits = computed<boolean>(
-			() => edits.value === null || Object.keys(edits.value).length === 0
-		);
+		const noEdits = computed<boolean>(() => edits.value === null || Object.keys(edits.value).length === 0);
 
 		const saving = ref(false);
 

src/modules/settings/routes/presets/browse/browse.vue

@@ -21,11 +21,7 @@
 						<v-button @click="confirmDelete = false" secondary>
 							{{ $t('cancel') }}
 						</v-button>
-						<v-button
-							@click="deleteSelection"
-							class="action-delete"
-							:loading="deleting"
-						>
+						<v-button @click="deleteSelection" class="action-delete" :loading="deleting">
 							{{ $t('delete') }}
 						</v-button>
 					</v-card-actions>
@@ -42,13 +38,7 @@
 		</template>
 
 		<div class="presets-browse">
-			<v-info
-				center
-				type="warning"
-				v-if="presets.length === 0"
-				:title="$t('no_presets')"
-				icon="bookmark"
-			>
+			<v-info center type="warning" v-if="presets.length === 0" :title="$t('no_presets')" icon="bookmark">
 				{{ $t('no_presets_copy') }}
 
 				<template #append>
@@ -88,16 +78,10 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_settings_presets_browse'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_settings_presets_browse'))" />
 			</drawer-detail>
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>

src/modules/settings/routes/presets/detail/detail.vue

@@ -13,13 +13,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
-					<v-button
-						rounded
-						icon
-						class="action-delete"
-						:disabled="preset === null || id === '+'"
-						@click="on"
-					>
+					<v-button rounded icon class="action-delete" :disabled="preset === null || id === '+'" @click="on">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -68,19 +62,13 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_settings_presets_detail'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_settings_presets_detail'))" />
 			</drawer-detail>
 			<div class="layout-drawer">
 				<portal-target name="drawer" />
 			</div>
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -146,9 +134,7 @@ export default defineComponent({
 		const { save, saving } = useSave();
 		const { deleting, deleteAndQuit, confirmDelete } = useDelete();
 
-		const loading = computed(
-			() => usersLoading.value || presetLoading.value || rolesLoading.value
-		);
+		const loading = computed(() => usersLoading.value || presetLoading.value || rolesLoading.value);
 
 		return {
 			backLink,
@@ -202,10 +188,7 @@ export default defineComponent({
 					if (isNew.value === true) {
 						await api.post(`/${currentProjectKey}/collection_presets`, editsParsed);
 					} else {
-						await api.patch(
-							`/${currentProjectKey}/collection_presets/${props.id}`,
-							editsParsed
-						);
+						await api.patch(`/${currentProjectKey}/collection_presets/${props.id}`, editsParsed);
 					}
 
 					await collectionPresetsStore.hydrate();
@@ -334,9 +317,7 @@ export default defineComponent({
 				loading.value = true;
 
 				try {
-					const response = await api.get(
-						`/${currentProjectKey}/collection_presets/${props.id}`
-					);
+					const response = await api.get(`/${currentProjectKey}/collection_presets/${props.id}`);
 
 					preset.value = response.data.data;
 				} catch (err) {
@@ -442,8 +423,7 @@ export default defineComponent({
 					interface: 'dropdown',
 					options: {
 						choices: collectionsStore.state.collections.reduce(
-							(string, collection) =>
-								(string += `${collection.collection} :: ${collection.name}\n`),
+							(string, collection) => (string += `${collection.collection} :: ${collection.name}\n`),
 							''
 						),
 					},
@@ -463,10 +443,7 @@ export default defineComponent({
 					name: i18n.t('layout'),
 					interface: 'dropdown',
 					options: {
-						choices: layouts.reduce(
-							(string, layout) => (string += `${layout.id}::${layout.name}\n`),
-							''
-						),
+						choices: layouts.reduce((string, layout) => (string += `${layout.id}::${layout.name}\n`), ''),
 					},
 					width: 'half',
 				},

src/modules/settings/routes/roles/browse/browse.vue

@@ -9,13 +9,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
-					<v-button
-						rounded
-						icon
-						class="action-delete"
-						v-if="selection.length > 0"
-						@click="on"
-					>
+					<v-button rounded icon class="action-delete" v-if="selection.length > 0" @click="on">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -59,17 +53,11 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_settings_roles_browse'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_settings_roles_browse'))" />
 			</drawer-detail>
 			<portal-target name="drawer" />
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>

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

@@ -15,9 +15,7 @@
 					:value="field.field"
 					:key="field.field"
 					:indeterminate="readIndeterminate.includes(field.field)"
-					@update:indeterminate="
-						readIndeterminate = readIndeterminate.filter((f) => f !== field.field)
-					"
+					@update:indeterminate="readIndeterminate = readIndeterminate.filter((f) => f !== field.field)"
 					:label="field.name"
 				/>
 			</div>
@@ -109,9 +107,7 @@ export default defineComponent({
 			if (newVal !== true) return;
 
 			if (props.combined === true) {
-				readableFields.value = invertBlacklist(
-					intersection(...(props.readBlacklist as string[][]))
-				);
+				readableFields.value = invertBlacklist(intersection(...(props.readBlacklist as string[][])));
 
 				readIndeterminate.value = [...new Set(props.readBlacklist.flat())].filter((k) =>
 					readableFields.value.includes(k)
@@ -121,9 +117,7 @@ export default defineComponent({
 			}
 
 			if (props.combined === true) {
-				writableFields.value = invertBlacklist(
-					intersection(...(props.writeBlacklist as string[][]))
-				);
+				writableFields.value = invertBlacklist(intersection(...(props.writeBlacklist as string[][])));
 
 				writeIndeterminate.value = [...new Set(props.writeBlacklist.flat())].filter((k) =>
 					writableFields.value.includes(k)
@@ -154,12 +148,8 @@ export default defineComponent({
 				collection: props.collection,
 				status: props.status,
 				role: props.role,
-				read_field_blacklist: fieldKeys.value.filter(
-					(key) => readableFields.value.includes(key) === false
-				),
-				write_field_blacklist: fieldKeys.value.filter(
-					(key) => writableFields.value.includes(key) === false
-				),
+				read_field_blacklist: fieldKeys.value.filter((key) => readableFields.value.includes(key) === false),
+				write_field_blacklist: fieldKeys.value.filter((key) => writableFields.value.includes(key) === false),
 			};
 
 			if (props.permissionId) {

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

@@ -63,10 +63,7 @@
 			/>
 			<div class="spacer" v-else>--</div>
 
-			<v-icon
-				@click="detailsOpen = !detailsOpen"
-				:name="detailsOpen ? 'expand_less' : 'expand_more'"
-			/>
+			<v-icon @click="detailsOpen = !detailsOpen" :name="detailsOpen ? 'expand_less' : 'expand_more'" />
 		</div>
 
 		<div class="details" v-if="detailsOpen">
@@ -270,13 +267,9 @@ export default defineComponent({
 
 			if (statusField.value && statuses.value) {
 				const statusPermissions = statuses.value.map((status) => {
-					const existing = props.savedPermissions.find(
-						(permission) => permission.status === status.value
-					);
+					const existing = props.savedPermissions.find((permission) => permission.status === status.value);
 
-					return (
-						existing || getDefaultPermission(props.collection, props.role, status.value)
-					);
+					return existing || getDefaultPermission(props.collection, props.role, status.value);
 				});
 
 				return [...statusPermissions, createPermission];
@@ -316,9 +309,7 @@ export default defineComponent({
 			if (statusField.value) {
 				let value = permissions.value[0][type];
 
-				for (const permission of permissions.value.filter(
-					({ status }) => status !== '$create'
-				)) {
+				for (const permission of permissions.value.filter(({ status }) => status !== '$create')) {
 					if (value !== permission[type]) {
 						value = 'indeterminate';
 						break;
@@ -327,9 +318,7 @@ export default defineComponent({
 
 				return value;
 			} else {
-				const permission = permissions.value.find(
-					(permission) => permission.status === null
-				);
+				const permission = permissions.value.find((permission) => permission.status === null);
 
 				return permission?.[type];
 			}

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

@@ -13,9 +13,7 @@
 				:value="status.value"
 				:key="status.value"
 				:indeterminate="indeterminate.includes(status.value)"
-				@update:indeterminate="
-					indeterminate = indeterminate.filter((s) => s !== status.value)
-				"
+				@update:indeterminate="indeterminate = indeterminate.filter((s) => s !== status.value)"
 				:label="status.name"
 			/>
 		</div>
@@ -88,9 +86,7 @@ export default defineComponent({
 			if (newVal !== true) return;
 
 			if (props.combined === true) {
-				allowedStatuses.value = invertBlacklist(
-					intersection(...(props.statusBlacklist as string[][]))
-				);
+				allowedStatuses.value = invertBlacklist(intersection(...(props.statusBlacklist as string[][])));
 
 				allowedStatuses.value = [...new Set(props.statusBlacklist.flat())].filter((k) =>
 					allowedStatuses.value.includes(k)
@@ -118,9 +114,7 @@ export default defineComponent({
 				collection: props.collection,
 				status: props.status,
 				role: props.role,
-				status_blacklist: statusKeys.value.filter(
-					(key) => allowedStatuses.value.includes(key) === false
-				),
+				status_blacklist: statusKeys.value.filter((key) => allowedStatuses.value.includes(key) === false),
 			};
 
 			if (props.permissionId) {

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

@@ -1,11 +1,5 @@
 <template>
-	<v-menu
-		show-arrow
-		placement="left-start"
-		class="permissions-toggle"
-		close-on-content-click
-		:disabled="saving"
-	>
+	<v-menu show-arrow placement="left-start" class="permissions-toggle" close-on-content-click :disabled="saving">
 		<template #activator="{ toggle }">
 			<span>
 				<v-progress-circular class="spinner" indeterminate small v-if="saving" />

src/modules/settings/routes/roles/detail/detail.vue

@@ -1,13 +1,7 @@
 <template>
 	<private-view :title="$t('editing', { collection: $t('roles') })">
 		<template #title-outer:prepend>
-			<v-button
-				class="header-icon"
-				rounded
-				icon
-				exact
-				:to="`/${currentProjectKey}/settings/roles/`"
-			>
+			<v-button class="header-icon" rounded icon exact :to="`/${currentProjectKey}/settings/roles/`">
 				<v-icon name="arrow_back" />
 			</v-button>
 		</template>
@@ -15,13 +9,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
-					<v-button
-						rounded
-						icon
-						class="action-delete"
-						:disabled="item === null"
-						@click="on"
-					>
+					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -40,13 +28,7 @@
 				</v-card>
 			</v-dialog>
 
-			<v-button
-				rounded
-				icon
-				:loading="saving"
-				:disabled="hasEdits === false"
-				@click="saveAndQuit"
-			>
+			<v-button rounded icon :loading="saving" :disabled="hasEdits === false" @click="saveAndQuit">
 				<v-icon name="check" />
 
 				<template #append-outer>
@@ -84,21 +66,11 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_settings_roles_detail'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_settings_roles_detail'))" />
 			</drawer-detail>
-			<revisions-drawer-detail
-				v-if="isNew === false"
-				collection="directus_roles"
-				:primary-key="primaryKey"
-			/>
+			<revisions-drawer-detail v-if="isNew === false" collection="directus_roles" :primary-key="primaryKey" />
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -136,19 +108,10 @@ export default defineComponent({
 		const { currentProjectKey } = toRefs(projectsStore.state);
 		const { primaryKey } = toRefs(props);
 
-		const {
-			isNew,
-			edits,
-			item,
-			saving,
-			loading,
-			error,
-			save,
-			remove,
-			deleting,
-			saveAsCopy,
-			isBatch,
-		} = useItem(ref('directus_roles'), primaryKey);
+		const { isNew, edits, item, saving, loading, error, save, remove, deleting, saveAsCopy, isBatch } = useItem(
+			ref('directus_roles'),
+			primaryKey
+		);
 
 		const hasEdits = computed<boolean>(() => Object.keys(edits.value).length > 0);
 

src/modules/settings/routes/webhooks/browse/browse.vue

@@ -9,13 +9,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
-					<v-button
-						rounded
-						icon
-						class="action-delete"
-						v-if="selection.length > 0"
-						@click="on"
-					>
+					<v-button rounded icon class="action-delete" v-if="selection.length > 0" @click="on">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -59,17 +53,11 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_settings_webhooks_browse'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_settings_webhooks_browse'))" />
 			</drawer-detail>
 			<portal-target name="drawer" />
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>

src/modules/settings/routes/webhooks/detail/detail.vue

@@ -1,13 +1,7 @@
 <template>
 	<private-view :title="$t('editing', { collection: $t('webhooks') })">
 		<template #title-outer:prepend>
-			<v-button
-				class="header-icon"
-				rounded
-				icon
-				exact
-				:to="`/${currentProjectKey}/settings/webhooks/`"
-			>
+			<v-button class="header-icon" rounded icon exact :to="`/${currentProjectKey}/settings/webhooks/`">
 				<v-icon name="arrow_back" />
 			</v-button>
 		</template>
@@ -15,13 +9,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
-					<v-button
-						rounded
-						icon
-						class="action-delete"
-						:disabled="item === null"
-						@click="on"
-					>
+					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -40,13 +28,7 @@
 				</v-card>
 			</v-dialog>
 
-			<v-button
-				rounded
-				icon
-				:loading="saving"
-				:disabled="hasEdits === false"
-				@click="saveAndQuit"
-			>
+			<v-button rounded icon :loading="saving" :disabled="hasEdits === false" @click="saveAndQuit">
 				<v-icon name="check" />
 
 				<template #append-outer>
@@ -75,21 +57,11 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_settings_webhooks_detail'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_settings_webhooks_detail'))" />
 			</drawer-detail>
-			<revisions-drawer-detail
-				v-if="isNew === false"
-				collection="directus_webhooks"
-				:primary-key="primaryKey"
-			/>
+			<revisions-drawer-detail v-if="isNew === false" collection="directus_webhooks" :primary-key="primaryKey" />
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -123,19 +95,10 @@ export default defineComponent({
 		const { currentProjectKey } = toRefs(projectsStore.state);
 		const { primaryKey } = toRefs(props);
 
-		const {
-			isNew,
-			edits,
-			item,
-			saving,
-			loading,
-			error,
-			save,
-			remove,
-			deleting,
-			saveAsCopy,
-			isBatch,
-		} = useItem(ref('directus_webhooks'), primaryKey);
+		const { isNew, edits, item, saving, loading, error, save, remove, deleting, saveAsCopy, isBatch } = useItem(
+			ref('directus_webhooks'),
+			primaryKey
+		);
 
 		const hasEdits = computed<boolean>(() => Object.keys(edits.value).length > 0);
 

src/modules/users/routes/browse/browse.vue

@@ -68,10 +68,7 @@
 			<layout-drawer-detail @input="viewType = $event" :value="viewType" />
 			<portal-target name="drawer" />
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -109,9 +106,7 @@ export default defineComponent({
 
 		const selection = ref<Item[]>([]);
 
-		const { viewType, viewOptions, viewQuery, filters, searchQuery } = useCollectionPreset(
-			ref('directus_users')
-		);
+		const { viewType, viewOptions, viewQuery, filters, searchQuery } = useCollectionPreset(ref('directus_users'));
 		const { addNewLink, batchLink } = useLinks();
 		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
 		const { breadcrumb } = useBreadcrumb();

src/modules/users/routes/detail/detail.vue

@@ -13,13 +13,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
-					<v-button
-						rounded
-						icon
-						class="action-delete"
-						:disabled="item === null"
-						@click="on"
-					>
+					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -38,13 +32,7 @@
 				</v-card>
 			</v-dialog>
 
-			<v-button
-				rounded
-				icon
-				:loading="saving"
-				:disabled="hasEdits === false"
-				@click="saveAndQuit"
-			>
+			<v-button rounded icon :loading="saving" :disabled="hasEdits === false" @click="saveAndQuit">
 				<v-icon name="check" />
 
 				<template #append-outer>
@@ -76,12 +64,8 @@
 						<v-skeleton-loader type="text" />
 					</template>
 					<template v-else>
-						<div class="name type-title">
-							{{ item.first_name }} {{ item.last_name }}
-						</div>
-						<div class="status-role" :class="item.status">
-							{{ $t(item.status) }} {{ roleName }}
-						</div>
+						<div class="name type-title">{{ item.first_name }} {{ item.last_name }}</div>
+						<div class="status-role" :class="item.status">{{ $t(item.status) }} {{ roleName }}</div>
 						<div class="email">{{ item.email }}</div>
 					</template>
 				</div>
@@ -126,10 +110,7 @@
 				:primary-key="primaryKey"
 			/>
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -181,19 +162,10 @@ export default defineComponent({
 
 		const revisionsDrawerDetail = ref<Vue>(null);
 
-		const {
-			isNew,
-			edits,
-			item,
-			saving,
-			loading,
-			error,
-			save,
-			remove,
-			deleting,
-			saveAsCopy,
-			isBatch,
-		} = useItem(ref('directus_users'), primaryKey);
+		const { isNew, edits, item, saving, loading, error, save, remove, deleting, saveAsCopy, isBatch } = useItem(
+			ref('directus_users'),
+			primaryKey
+		);
 
 		const hasEdits = computed<boolean>(() => Object.keys(edits.value).length > 0);
 
@@ -302,14 +274,11 @@ export default defineComponent({
 				loading.value = true;
 
 				try {
-					const response = await api.get(
-						`/${currentProjectKey.value}/users/${props.primaryKey}`,
-						{
-							params: {
-								fields: ['role.name', 'avatar.data'],
-							},
-						}
-					);
+					const response = await api.get(`/${currentProjectKey.value}/users/${props.primaryKey}`, {
+						params: {
+							fields: ['role.name', 'avatar.data'],
+						},
+					});
 
 					avatarSrc.value = response.data.data.avatar?.data?.thumbnails?.find(
 						(thumb: any) => thumb.key === 'directus-medium-crop'