Add support for Conditional Fields (#6864)

* Add conditions field to directus_fields

* Add conditions configuration

* Apply conditional overrides

* Handle conditions in nested groups

* Fix reverse mutating conditions

* Start on filter setup interface

* Move field types/constants to shared

* [WIP] Updated client side filter validation

* Support logical operators in client validation step

* Use new validation util in conditions check

* Add nesting in filter seutp

* Add filter rule setup configurator

* Fixes that should've been done in the merge

* Strip out filter-settings interface

TBD in a new PR

* Move browser to index

app/src/interfaces/_system/system-interface-options/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSystemInterfaceOptions from './system-interface-options.vue';
 
 export default defineInterface({

app/src/interfaces/_system/system-interface-options/system-interface-options.vue

@@ -20,7 +20,6 @@
 			:is="`interface-options-${selectedInterface.id}`"
 			v-else
 			:value="value"
-			:field-data="fieldData"
 			@input="$emit('input', $event)"
 		/>
 	</div>
@@ -40,7 +39,11 @@ export default defineComponent({
 		},
 		interfaceField: {
 			type: String,
-			required: true,
+			default: null,
+		},
+		interface: {
+			type: String,
+			default: null,
 		},
 	},
 	emits: ['input'],
@@ -52,6 +55,10 @@ export default defineComponent({
 		const values = inject('values', ref<Record<string, any>>({}));
 
 		const selectedInterface = computed(() => {
+			if (props.interface) {
+				return interfaces.value.find((inter: InterfaceConfig) => inter.id === props.interface);
+			}
+
 			if (!values.value[props.interfaceField]) return;
 
 			return interfaces.value.find((inter: InterfaceConfig) => inter.id === values.value[props.interfaceField]);
@@ -64,8 +71,15 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .inset {
-	padding: 8px;
+	--form-horizontal-gap: 24px;
+	--form-vertical-gap: 24px;
+
+	padding: 12px;
 	border: var(--border-width) solid var(--border-normal);
 	border-radius: var(--border-radius);
+
+	:deep(.type-label) {
+		font-size: 1rem;
+	}
 }
 </style>