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-collection/index.ts

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

app/src/interfaces/_system/system-collections/index.ts

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

app/src/interfaces/_system/system-display-template/index.ts

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

app/src/interfaces/_system/system-field-tree/index.ts

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

app/src/interfaces/_system/system-field/index.ts

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

app/src/interfaces/_system/system-folder/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSystemFolder from './folder.vue';
 
 export default defineInterface({

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>

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

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

app/src/interfaces/_system/system-language/index.ts

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

app/src/interfaces/_system/system-mfa-setup/index.ts

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

app/src/interfaces/_system/system-scope/index.ts

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

app/src/interfaces/boolean/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceBoolean from './boolean.vue';
 
 export default defineInterface({

app/src/interfaces/datetime/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceDateTime from './datetime.vue';
 
 export default defineInterface({

app/src/interfaces/file-image/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceFileImage from './file-image.vue';
 
 export default defineInterface({

app/src/interfaces/file/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceFile from './file.vue';
 
 export default defineInterface({

app/src/interfaces/group-divider/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceGroupDivider from './group-divider.vue';
 
 export default defineInterface({

app/src/interfaces/group-raw/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceGroupRaw from './group-raw.vue';
 
 export default defineInterface({

app/src/interfaces/input-autocomplete-api/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceInputAutocompleteAPI from './input-autocomplete-api.vue';
 
 export default defineInterface({

app/src/interfaces/input-code/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import CodeMirror from 'codemirror';
 import 'codemirror/mode/meta';
 import InterfaceCode from './input-code.vue';

app/src/interfaces/input-hash/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceInputHash from './input-hash.vue';
 
 export default defineInterface({

app/src/interfaces/input-multiline/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceInputMultiline from './input-multiline.vue';
 
 export default defineInterface({

app/src/interfaces/input-rich-text-html/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import { defineAsyncComponent } from 'vue';
 
 const InterfaceWYSIWYG = defineAsyncComponent(() => import('./input-rich-text-html.vue'));

app/src/interfaces/input-rich-text-md/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceInputRichTextMD from './input-rich-text-md.vue';
 
 export default defineInterface({

app/src/interfaces/input/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceInput from './input.vue';
 import Options from './options.vue';
 

app/src/interfaces/list-m2a/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceListM2A from './list-m2a.vue';
 
 export default defineInterface({

app/src/interfaces/list-m2m/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceListM2M from './list-m2m.vue';
 import Options from './options.vue';
 

app/src/interfaces/list-o2m-tree-view/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import Options from './options.vue';
 import InterfaceListO2MTreeView from './list-o2m-tree-view.vue';
 

app/src/interfaces/list-o2m/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceListO2M from './list-o2m.vue';
 import Options from './options.vue';
 

app/src/interfaces/list/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import RepeaterOptions from './options.vue';
 import InterfaceList from './list.vue';
 

app/src/interfaces/presentation-divider/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfacePresentationDivider from './presentation-divider.vue';
 
 export default defineInterface({

app/src/interfaces/presentation-links/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfacePresentationLinks from './presentation-links.vue';
 
 export default defineInterface({

app/src/interfaces/presentation-notice/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfacePresentationNotice from './presentation-notice.vue';
 
 export default defineInterface({

app/src/interfaces/select-color/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceColor from './select-color.vue';
 
 export default defineInterface({

app/src/interfaces/select-dropdown-m2o/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSelectDropdownM2O from './select-dropdown-m2o.vue';
 import Options from './options.vue';
 

app/src/interfaces/select-dropdown/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSelectDropdown from './select-dropdown.vue';
 
 export default defineInterface({

app/src/interfaces/select-icon/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSelectIcon from './select-icon.vue';
 
 export default defineInterface({

app/src/interfaces/select-multiple-checkbox-tree/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import { DeepPartial, Field } from '@directus/shared/types';
 import InterfaceSelectMultipleCheckboxesTree from './select-multiple-checkbox-tree.vue';
 

app/src/interfaces/select-multiple-checkbox/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSelectMultipleCheckboxes from './select-multiple-checkbox.vue';
 
 export default defineInterface({

app/src/interfaces/select-multiple-dropdown/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSelectMultipleDropdown from './select-multiple-dropdown.vue';
 
 export default defineInterface({

app/src/interfaces/select-radio/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSelectRadio from './select-radio.vue';
 
 export default defineInterface({

app/src/interfaces/slider/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSlider from './slider.vue';
 
 export default defineInterface({

app/src/interfaces/tags/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceTags from './tags.vue';
 
 export default defineInterface({

app/src/interfaces/translations/index.ts

@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import TranslationsOptions from './options.vue';
 import InterfaceTranslations from './translations.vue';