Change print width to 120 (#671)

* Increase line-width to 120

* Auto-fix 100->120 columns

src/interfaces/checkboxes/checkboxes.vue

@@ -121,11 +121,7 @@ export default defineComponent({
 			return 'grid-1';
 		});
 
-		const { otherValues, addOtherValue, setOtherValue } = useCustomSelectionMultiple(
-			value,
-			choices,
-			emit
-		);
+		const { otherValues, addOtherValue, setOtherValue } = useCustomSelectionMultiple(value, choices, emit);
 
 		return { gridClass, otherValues, addOtherValue, setOtherValue };
 	},

src/interfaces/code/code.vue

@@ -2,11 +2,7 @@
 	<div class="interface-code codemirror-custom-styles">
 		<textarea ref="codemirrorEl" :value="stringValue" />
 
-		<v-button
-			v-if="template"
-			v-tooltip="$t('interfaces.code.fill_template')"
-			@click="fillTemplate"
-		>
+		<v-button v-if="template" v-tooltip="$t('interfaces.code.fill_template')" @click="fillTemplate">
 			<v-icon name="playlist_add" />
 		</v-button>
 
@@ -24,14 +20,7 @@
 <script lang="ts">
 import CodeMirror from 'codemirror';
 
-import {
-	defineComponent,
-	computed,
-	ref,
-	onMounted,
-	onUnmounted,
-	watch,
-} from '@vue/composition-api';
+import { defineComponent, computed, ref, onMounted, onUnmounted, watch } from '@vue/composition-api';
 
 import 'codemirror/mode/meta';
 import 'codemirror/addon/search/searchcursor.js';

src/interfaces/color/color.vue

@@ -11,21 +11,14 @@
 				maxlength="7"
 			>
 				<template #prepend>
-					<v-input
-						type="color"
-						class="html-color-select"
-						v-model="hexValue"
-						ref="htmlColorInput"
-					/>
+					<v-input type="color" class="html-color-select" v-model="hexValue" ref="htmlColorInput" />
 					<v-button
 						@click="activateColorPicker"
 						class="swatch"
 						:icon="true"
 						:style="{
 							'--v-button-background-color': isValidColor ? hexValue : 'transparent',
-							border: isValidColor
-								? 'none'
-								: 'var(--border-width) solid var(--border-normal)',
+							border: isValidColor ? 'none' : 'var(--border-width) solid var(--border-normal)',
 						}"
 					>
 						<v-icon v-if="!isValidColor" name="colorize" />
@@ -161,9 +154,7 @@ export default defineComponent({
 			(htmlColorInput.value?.$el as HTMLElement).getElementsByTagName('input')[0].click();
 		}
 
-		const isValidColor = computed<boolean>(
-			() => hexValue.value != null && color.isHex(hexValue.value as string)
-		);
+		const isValidColor = computed<boolean>(() => hexValue.value != null && color.isHex(hexValue.value as string));
 
 		const { rgb, hsl, hexValue } = useColor();
 
@@ -307,8 +298,7 @@ export default defineComponent({
 		}
 
 		/* stylelint-disable indentation */
-		&:not(:last-child)::v-deep
-			.input:not(.active):not(:focus-within):not(:hover):not(:active):not(:focus) {
+		&:not(:last-child)::v-deep .input:not(.active):not(:focus-within):not(:hover):not(:active):not(:focus) {
 			border-right-color: transparent;
 		}
 

src/interfaces/datetime/datetime.vue

@@ -23,22 +23,13 @@
 				<v-select :placeholder="$t('date')" :items="dates" v-model="localValue.date" />
 			</div>
 			<div class="year">
-				<v-select
-					:placeholder="$t('year')"
-					:items="years"
-					v-model="localValue.year"
-					allow-other
-				/>
+				<v-select :placeholder="$t('year')" :items="years" v-model="localValue.year" allow-other />
 			</div>
 		</div>
 
 		<v-divider v-if="type === 'datetime'" />
 
-		<div
-			class="time-selects"
-			v-if="type === 'datetime' || type === 'time'"
-			:class="{ seconds: includeSeconds }"
-		>
+		<div class="time-selects" v-if="type === 'datetime' || type === 'time'" :class="{ seconds: includeSeconds }">
 			<div class="hour">
 				<v-select :items="hours" v-model="localValue.hours" />
 			</div>
@@ -88,9 +79,7 @@ export default defineComponent({
 			default: null,
 		},
 		type: {
-			type: String as PropType<
-				'datetime' | 'time' | 'date' | 'datetime_created' | 'datetime_updated'
-			>,
+			type: String as PropType<'datetime' | 'time' | 'date' | 'datetime_created' | 'datetime_updated'>,
 			required: true,
 			validator: (val: string) =>
 				['datetime', 'date', 'time', 'datetime_created', 'datetime_updated'].includes(val),
@@ -168,14 +157,7 @@ export default defineComponent({
 				) {
 					const { year, month, date, hours, minutes, seconds, period } = newValue;
 
-					const asDate = new Date(
-						year,
-						month,
-						date,
-						period === 'am' ? hours : hours + 12,
-						minutes,
-						seconds
-					);
+					const asDate = new Date(year, month, date, period === 'am' ? hours : hours + 12, minutes, seconds);
 
 					emit('input', format(asDate, formatString.value));
 				}

src/interfaces/file/file.vue

@@ -20,11 +20,7 @@
 									'is-svg': file && file.type.includes('svg'),
 								}"
 							>
-								<img
-									v-if="imageThumbnail"
-									:src="imageThumbnail"
-									:alt="file.title"
-								/>
+								<img v-if="imageThumbnail" :src="imageThumbnail" :alt="file.title" />
 								<span class="extension" v-else-if="fileExtension">
 									{{ fileExtension }}
 								</span>
@@ -32,12 +28,7 @@
 							</div>
 						</template>
 						<template #append>
-							<v-icon
-								class="deselect"
-								name="close"
-								v-if="file"
-								@click.stop="$emit('input', null)"
-							/>
+							<v-icon class="deselect" name="close" v-if="file" @click.stop="$emit('input', null)" />
 							<v-icon v-else name="attach_file" />
 						</template>
 					</v-input>
@@ -95,11 +86,7 @@
 			@input="setSelection"
 		/>
 
-		<v-dialog
-			:active="activeDialog === 'url'"
-			@toggle="activeDialog = null"
-			:persistent="urlLoading"
-		>
+		<v-dialog :active="activeDialog === 'url'" @toggle="activeDialog = null" :persistent="urlLoading">
 			<v-card>
 				<v-card-title>{{ $t('import_from_url') }}</v-card-title>
 				<v-card-text>
@@ -109,11 +96,7 @@
 					<v-button :disabled="urlLoading" @click="activeDialog = null" secondary>
 						{{ $t('cancel') }}
 					</v-button>
-					<v-button
-						:loading="urlLoading"
-						@click="importFromURL"
-						:disabled="isValidURL === false"
-					>
+					<v-button :loading="urlLoading" @click="importFromURL" :disabled="isValidURL === false">
 						{{ $t('import') }}
 					</v-button>
 				</v-card-actions>
@@ -169,17 +152,10 @@ export default defineComponent({
 			if (file.value === null) return null;
 			if (file.value.type.includes('svg')) return file.value.data.asset_url;
 			if (file.value.type.includes('image') === false) return null;
-			return file.value.data.thumbnails?.find((thumb) => thumb.key === 'directus-small-crop')
-				?.url;
+			return file.value.data.thumbnails?.find((thumb) => thumb.key === 'directus-small-crop')?.url;
 		});
 
-		const {
-			url,
-			isValidURL,
-			loading: urlLoading,
-			error: urlError,
-			importFromURL,
-		} = useURLImport();
+		const { url, isValidURL, loading: urlLoading, error: urlError, importFromURL } = useURLImport();
 
 		return {
 			activeDialog,

src/interfaces/icon/icon.vue

@@ -8,21 +8,11 @@
 				@focus="activate"
 			>
 				<template #prepend>
-					<v-icon
-						v-if="value"
-						@click="activate"
-						:name="value"
-						:class="{ active: value }"
-					/>
+					<v-icon v-if="value" @click="activate" :name="value" :class="{ active: value }" />
 				</template>
 
 				<template #append>
-					<v-icon
-						@click="activate"
-						name="expand_more"
-						class="open-indicator"
-						:class="{ open: active }"
-					/>
+					<v-icon @click="activate" name="expand_more" class="open-indicator" :class="{ open: active }" />
 				</template>
 			</v-input>
 		</template>
@@ -74,9 +64,7 @@ export default defineComponent({
 			return icons.map((group) => {
 				if (searchQuery.value.length === 0) return group;
 
-				const icons = group.icons.filter((icon) =>
-					icon.includes(searchQuery.value.toLowerCase())
-				);
+				const icons = group.icons.filter((icon) => icon.includes(searchQuery.value.toLowerCase()));
 
 				return {
 					...group,

src/interfaces/image/image.vue

@@ -6,11 +6,7 @@
 			{{ $t('disabled') }}
 		</v-notice>
 
-		<div
-			class="image-preview"
-			v-else-if="image"
-			:class="{ 'is-svg': image.type.includes('svg') }"
-		>
+		<div class="image-preview" v-else-if="image" :class="{ 'is-svg': image.type.includes('svg') }">
 			<img :src="src" alt="" role="presentation" />
 
 			<div class="shadow" />
@@ -108,9 +104,7 @@ export default defineComponent({
 				return image.value.data.full_url;
 			}
 
-			const url = image.value.data.thumbnails.find(
-				(thumb) => thumb.key === 'directus-large-crop'
-			)?.url;
+			const url = image.value.data.thumbnails.find((thumb) => thumb.key === 'directus-large-crop')?.url;
 
 			if (url) {
 				return `${url}&cache-buster=${cacheBuster.value}`;
@@ -162,16 +156,7 @@ export default defineComponent({
 			try {
 				const response = await api.get(`/${currentProjectKey}/files/${props.value}`, {
 					params: {
-						fields: [
-							'id',
-							'data',
-							'title',
-							'width',
-							'height',
-							'filesize',
-							'type',
-							'filename_download',
-						],
+						fields: ['id', 'data', 'title', 'width', 'height', 'filesize', 'type', 'filename_download'],
 					},
 				});
 

src/interfaces/many-to-one/many-to-one.vue

@@ -71,11 +71,7 @@
 						@click="setCurrent(item)"
 					>
 						<v-list-item-content>
-							<render-template
-								:collection="collection"
-								:template="displayTemplate"
-								:item="item"
-							/>
+							<render-template :collection="collection" :template="displayTemplate" :item="item" />
 						</v-list-item-content>
 					</v-list-item>
 				</template>
@@ -162,12 +158,7 @@ export default defineComponent({
 		const { displayTemplate, onPreviewClick, requiredFields } = usePreview();
 		const { totalCount, loading: itemsLoading, fetchItems, items } = useItems();
 
-		const {
-			setCurrent,
-			currentItem,
-			loading: loadingCurrent,
-			currentPrimaryKey,
-		} = useCurrent();
+		const { setCurrent, currentItem, loading: loadingCurrent, currentPrimaryKey } = useCurrent();
 
 		const { edits, stageEdits } = useEdits();
 
@@ -232,10 +223,7 @@ export default defineComponent({
 					return props.value;
 				}
 
-				if (
-					typeof props.value === 'object' &&
-					props.value.hasOwnProperty(relatedPrimaryKeyField.value.field)
-				) {
+				if (typeof props.value === 'object' && props.value.hasOwnProperty(relatedPrimaryKeyField.value.field)) {
 					return props.value[relatedPrimaryKeyField.value.field];
 				}
 
@@ -261,9 +249,7 @@ export default defineComponent({
 
 				try {
 					const endpoint = relatedCollection.value.collection.startsWith('directus_')
-						? `/${currentProjectKey}/${relatedCollection.value.collection.substring(
-								9
-						  )}/${props.value}`
+						? `/${currentProjectKey}/${relatedCollection.value.collection.substring(9)}/${props.value}`
 						: `/${currentProjectKey}/items/${relatedCollection.value.collection}/${props.value}`;
 
 					const response = await api.get(endpoint, {
@@ -356,9 +342,7 @@ export default defineComponent({
 			});
 
 			const { collection } = toRefs(relatedCollection.value);
-			const { primaryKeyField: relatedPrimaryKeyField } = useCollection(
-				collection as Ref<string>
-			);
+			const { primaryKeyField: relatedPrimaryKeyField } = useCollection(collection as Ref<string>);
 
 			return { relation, relatedCollection, relatedPrimaryKeyField };
 		}
@@ -409,10 +393,7 @@ export default defineComponent({
 			const selection = computed<(number | string)[]>(() => {
 				if (!props.value) return [];
 
-				if (
-					typeof props.value === 'object' &&
-					props.value.hasOwnProperty(relatedPrimaryKeyField.value.field)
-				) {
+				if (typeof props.value === 'object' && props.value.hasOwnProperty(relatedPrimaryKeyField.value.field)) {
 					return [props.value[relatedPrimaryKeyField.value.field]];
 				}
 

src/interfaces/one-to-many/one-to-many.vue

@@ -27,12 +27,7 @@
 			</template>
 
 			<template #item-append="{ item }" v-if="!disabled">
-				<v-icon
-					name="close"
-					v-tooltip="$t('deselect')"
-					class="deselect"
-					@click.stop="deselect(item)"
-				/>
+				<v-icon name="close" v-tooltip="$t('deselect')" class="deselect" @click.stop="deselect(item)" />
 			</template>
 		</v-table>
 
@@ -151,9 +146,7 @@ export default defineComponent({
 
 			const { collection } = toRefs(relatedCollection.value);
 
-			const { primaryKeyField: relatedPrimaryKeyField } = useCollection(
-				collection as Ref<string>
-			);
+			const { primaryKeyField: relatedPrimaryKeyField } = useCollection(collection as Ref<string>);
 
 			return { relation, relatedCollection, relatedPrimaryKeyField };
 		}
@@ -248,9 +241,7 @@ export default defineComponent({
 
 				const updatedItems = items.value
 					.map((item: any) => {
-						const changeForThisItem = changes.find(
-							(change) => change[pkField] === item[pkField]
-						);
+						const changeForThisItem = changes.find((change) => change[pkField] === item[pkField]);
 
 						if (changeForThisItem) {
 							return {
@@ -274,9 +265,7 @@ export default defineComponent({
 				const selectedPrimaryKeys = changes
 					.filter((change) => typeof change === 'string' || typeof change === 'number')
 					.filter((primaryKey) => {
-						const isAlsoUpdate = updatedItems.some(
-							(update) => update[pkField] === primaryKey
-						);
+						const isAlsoUpdate = updatedItems.some((update) => update[pkField] === primaryKey);
 
 						return isAlsoUpdate === false;
 					});
@@ -291,9 +280,9 @@ export default defineComponent({
 					}
 
 					const response = await api.get(
-						`/${currentProjectKey}/items/${
-							relatedCollection.value.collection
-						}/${selectedPrimaryKeys.join(',')}`,
+						`/${currentProjectKey}/items/${relatedCollection.value.collection}/${selectedPrimaryKeys.join(
+							','
+						)}`,
 						{
 							params: {
 								fields: fields,
@@ -326,10 +315,7 @@ export default defineComponent({
 					tableHeaders.value = props.fields
 						.split(',')
 						.map((fieldKey) => {
-							const field = fieldsStore.getField(
-								relatedCollection.value.collection,
-								fieldKey
-							);
+							const field = fieldsStore.getField(relatedCollection.value.collection, fieldKey);
 
 							if (!field) return null;
 
@@ -388,10 +374,7 @@ export default defineComponent({
 
 				// Make sure the edits have the primary key included, otherwise the api will create
 				// the item as a new one instead of update the existing
-				if (
-					primaryKey &&
-					editsAtStart.value.hasOwnProperty(relatedPrimaryKeyField.value.field) === false
-				) {
+				if (primaryKey && editsAtStart.value.hasOwnProperty(relatedPrimaryKeyField.value.field) === false) {
 					editsAtStart.value = {
 						...editsAtStart.value,
 						[relatedPrimaryKeyField.value.field]: primaryKey,
@@ -408,11 +391,7 @@ export default defineComponent({
 
 				if (props.value && Array.isArray(props.value)) {
 					const newValue = props.value.map((existingChange) => {
-						if (
-							existingChange[pkField] &&
-							edits[pkField] &&
-							existingChange[pkField] === edits[pkField]
-						) {
+						if (existingChange[pkField] && edits[pkField] && existingChange[pkField] === edits[pkField]) {
 							return edits;
 						}
 
@@ -504,9 +483,7 @@ export default defineComponent({
 			// If the item is selected in the current edits, it will only have staged the primary
 			// key so the API is able to properly set it on first creation. In that case, we have
 			// to filter out the primary key
-			const itemWasNewlySelect = !!props.value.find(
-				(stagedItem) => stagedItem === itemPrimaryKey
-			);
+			const itemWasNewlySelect = !!props.value.find((stagedItem) => stagedItem === itemPrimaryKey);
 
 			if (itemWasNewlySelect) {
 				currentItems.value = currentItems.value.filter(
@@ -520,8 +497,7 @@ export default defineComponent({
 			}
 
 			const itemHasEdits =
-				props.value.find((stagedItem: any) => stagedItem[pkField] === itemPrimaryKey) !==
-				undefined;
+				props.value.find((stagedItem: any) => stagedItem[pkField] === itemPrimaryKey) !== undefined;
 
 			if (itemHasEdits) {
 				return emit(

src/interfaces/repeater/repeater-row-form.vue

@@ -1,13 +1,7 @@
 <template>
 	<div class="form">
 		<v-divider />
-		<v-form
-			:disabled="disabled"
-			:fields="fields"
-			:edits="value"
-			primary-key="+"
-			@input="$emit('input', $event)"
-		/>
+		<v-form :disabled="disabled" :fields="fields" :edits="value" primary-key="+" @input="$emit('input', $event)" />
 	</div>
 </template>
 

src/interfaces/repeater/repeater-row-header.vue

@@ -3,12 +3,7 @@
 		<v-icon v-if="disabled === false" name="drag_handle" class="drag-handle" />
 		{{ displayValue ? displayValue : placeholder }}
 		<span class="spacer" />
-		<v-icon
-			v-if="disabled === false"
-			name="close"
-			class="delete"
-			@click.stop.prevent="$emit('delete')"
-		/>
+		<v-icon v-if="disabled === false" name="close" class="delete" @click.stop.prevent="$emit('delete')" />
 	</div>
 </template>
 
@@ -45,9 +40,7 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
-		const displayValue = computed(() =>
-			props.value ? render(props.template, props.value) : null
-		);
+		const displayValue = computed(() => (props.value ? render(props.template, props.value) : null));
 
 		return { displayValue };
 	},

src/interfaces/tags/tags.story.ts

@@ -32,11 +32,7 @@ export const basic = () =>
 				default: boolean('Allow Custom Values', true, 'Options'),
 			},
 			placeholder: {
-				default: text(
-					'Placeholder',
-					'Click tags below, or add a new one here...',
-					'Options'
-				),
+				default: text('Placeholder', 'Click tags below, or add a new one here...', 'Options'),
 			},
 			lowercase: {
 				default: boolean('Lowercase', false, 'Options'),
@@ -98,11 +94,7 @@ export const withPresets = () =>
 				default: boolean('Allow Custom Values', true, 'Options'),
 			},
 			placeholder: {
-				default: text(
-					'Placeholder',
-					'Click tags below, or add a new one here...',
-					'Options'
-				),
+				default: text('Placeholder', 'Click tags below, or add a new one here...', 'Options'),
 			},
 			lowercase: {
 				default: boolean('Lowercase', false, 'Options'),

src/interfaces/translations/translations.vue

@@ -12,11 +12,7 @@
 			#default="{ active, toggle }"
 		>
 			<div class="header" @click="toggle">
-				<render-template
-					:template="template"
-					:collection="languagesCollection"
-					:item="item"
-				/>
+				<render-template :template="template" :collection="languagesCollection" :item="item" />
 			</div>
 			<transition-expand>
 				<div v-if="active">
@@ -27,9 +23,7 @@
 							:collection="relatedCollection.collection"
 							:primary-key="existing[index][relatedPrimaryKeyField.field] || '+'"
 							:edits="edits[index]"
-							@input="
-								emitValue($event, existing[index][relatedPrimaryKeyField.field])
-							"
+							@input="emitValue($event, existing[index][relatedPrimaryKeyField.field])"
 						/>
 					</div>
 				</div>
@@ -124,9 +118,7 @@ export default defineComponent({
 
 			const { collection } = toRefs(relatedCollection.value);
 
-			const { primaryKeyField: relatedPrimaryKeyField } = useCollection(
-				collection as Ref<string>
-			);
+			const { primaryKeyField: relatedPrimaryKeyField } = useCollection(collection as Ref<string>);
 
 			return { relation, relatedCollection, relatedPrimaryKeyField };
 		}
@@ -155,15 +147,12 @@ export default defineComponent({
 				}
 
 				try {
-					const response = await api.get(
-						`/${currentProjectKey}/items/${props.languagesCollection}`,
-						{
-							params: {
-								fields: fields,
-								limit: -1,
-							},
-						}
-					);
+					const response = await api.get(`/${currentProjectKey}/items/${props.languagesCollection}`, {
+						params: {
+							fields: fields,
+							limit: -1,
+						},
+					});
 
 					languages.value = response.data.data;
 				} catch (err) {
@@ -220,9 +209,7 @@ export default defineComponent({
 				return languages.value.map((language: any) => {
 					const existing =
 						items.value.find(
-							(item) =>
-								item[props.languageField] ===
-								language[languagesPrimaryKeyField.value.field]
+							(item) => item[props.languageField] === language[languagesPrimaryKeyField.value.field]
 						) || {};
 
 					return existing;
@@ -235,9 +222,7 @@ export default defineComponent({
 				return languages.value.map((language: any) => {
 					const edits =
 						(props.value || []).find(
-							(edit) =>
-								edit[props.languageField] ===
-								language[languagesPrimaryKeyField.value.field]
+							(edit) => edit[props.languageField] === language[languagesPrimaryKeyField.value.field]
 						) || {};
 
 					edits[props.languageField] = language[languagesPrimaryKeyField.value.field];
@@ -258,11 +243,7 @@ export default defineComponent({
 					};
 				}
 
-				if (
-					currentEdits.some(
-						(edit) => edit[props.languageField] === newEdit[props.languageField]
-					)
-				) {
+				if (currentEdits.some((edit) => edit[props.languageField] === newEdit[props.languageField])) {
 					emit(
 						'input',
 						currentEdits.map((edit) => {

src/interfaces/user/user.vue

@@ -65,11 +65,7 @@
 						@click="setCurrent(item)"
 					>
 						<v-list-item-content>
-							<render-template
-								collection="directus_users"
-								:template="displayTemplate"
-								:item="item"
-							/>
+							<render-template collection="directus_users" :template="displayTemplate" :item="item" />
 						</v-list-item-content>
 					</v-list-item>
 				</template>
@@ -132,12 +128,7 @@ export default defineComponent({
 		const { displayTemplate, onPreviewClick, requiredFields } = usePreview();
 		const { totalCount, loading: usersLoading, fetchUsers, users } = useUsers();
 
-		const {
-			setCurrent,
-			currentUser,
-			loading: loadingCurrent,
-			currentPrimaryKey,
-		} = useCurrent();
+		const { setCurrent, currentUser, loading: loadingCurrent, currentPrimaryKey } = useCurrent();
 
 		const { edits, stageEdits } = useEdits();
 
@@ -174,11 +165,7 @@ export default defineComponent({
 				(newValue) => {
 					// When the newly configured value is a primitive, assume it's the primary key
 					// of the item and fetch it from the API to render the preview
-					if (
-						newValue !== null &&
-						newValue !== currentUser.value?.id &&
-						typeof newValue === 'number'
-					) {
+					if (newValue !== null && newValue !== currentUser.value?.id && typeof newValue === 'number') {
 						fetchCurrent();
 					}