Repository: directus/directus
File: app/src/interfaces/_system/system-filter/input-group.vue (Vue)

Code before:
<script setup lang="ts">
import { useFakeVersionField } from '@/composables/use-fake-version-field';
import { useFieldsStore } from '@/stores/fields';
import { useRelationsStore } from '@/stores/relations';
import { FieldFilter } from '@directus/types';
import { clone, get } from 'lodash';
import { ref, computed, onBeforeMount, toRef, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
import InputComponent from './input-component.vue';
import { fieldToFilter, getComparator, getField } from './utils';
import { useCollection } from '@directus/composables';

// Workaround because you cannot cast directly to union types inside
// the template block without running into esling/prettier issues
type ScalarValue = string | boolean | number | null;

const props = defineProps<{
	field: FieldFilter;
	collection: string;
	variableInputEnabled?: boolean;
}>();

const emit = defineEmits<{
	(e: 'update:field', value: FieldFilter): void;
}>();

const fieldsStore = useFieldsStore();
const relationsStore = useRelationsStore();
const { t } = useI18n();

const fieldPath = computed(() => getField(props.field));
const isVersionField = computed(() => fieldPath.value === '$version');

const { info: collectionInfo } = useCollection(computed(() => props.collection));
const versioningEnabled = computed(() => !!collectionInfo.value?.meta?.versioning && isVersionField.value);
const { fakeVersionField } = useFakeVersionField(toRef(props, 'collection'), versioningEnabled, isVersionField);

const fieldInfo = computed(() => {
	if (isVersionField.value) {

Review comment (suggestion):
```suggestion
// the template block without running into eslint/prettier issues
```
typo 😄 

Code after:
<script setup lang="ts">
import { useFakeVersionField } from '@/composables/use-fake-version-field';
import { useFieldsStore } from '@/stores/fields';
import { useRelationsStore } from '@/stores/relations';
import { FieldFilter } from '@directus/types';
import { clone, get } from 'lodash';
import { ref, computed, onBeforeMount, toRef, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
import InputComponent from './input-component.vue';
import { fieldToFilter, getComparator, getField } from './utils';
import { useCollection } from '@directus/composables';

// Workaround because you cannot cast directly to union types inside
// the template block without running into eslint/prettier issues
type ScalarValue = string | boolean | number | null;

const props = defineProps<{
	field: FieldFilter;
	collection: string;
	variableInputEnabled?: boolean;
}>();

const emit = defineEmits<{
	(e: 'update:field', value: FieldFilter): void;
}>();

const fieldsStore = useFieldsStore();
const relationsStore = useRelationsStore();
const { t } = useI18n();

const fieldPath = computed(() => getField(props.field));
const isVersionField = computed(() => fieldPath.value === '$version');

const { info: collectionInfo } = useCollection(computed(() => props.collection));
const versioningEnabled = computed(() => !!collectionInfo.value?.meta?.versioning && isVersionField.value);
const { fakeVersionField } = useFakeVersionField(toRef(props, 'collection'), versioningEnabled, isVersionField);

const fieldInfo = computed(() => {
	if (isVersionField.value) {