Update related collection selection as well

Unfortunately, modifiying the font via css var doesn't work so we need to pass it down via prop. See vuejs/core#7312
directus · Aug 18, 2023 · 6025ade · 6025ade
1 parent 28f57de
commit 6025ade
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 20 deletions.
diff --git a/app/src/components/v-select/select-list-item-group.vue b/app/src/components/v-select/select-list-item-group.vue
@@ -27,6 +27,7 @@
 			<select-list-item-group
 				v-if="childItem.children"
 				:item="childItem"
+				:item-label-font-family="itemLabelFontFamily"
 				:model-value="modelValue"
 				:multiple="multiple"
 				:allow-other="allowOther"
@@ -37,6 +38,7 @@
 				v-else
 				:model-value="modelValue"
 				:item="childItem"
+				:item-label-font-family="itemLabelFontFamily"
 				:multiple="multiple"
 				:allow-other="allowOther"
 				@update:model-value="$emit('update:modelValue', $event)"
@@ -52,6 +54,7 @@ import SelectListItem from './select-list-item.vue';
 
 interface Props {
 	item: Option;
+	itemLabelFontFamily?: string;
 	modelValue?: string | number | (string | number)[] | null;
 	multiple?: boolean;
 	allowOther?: boolean;

diff --git a/app/src/components/v-select/select-list-item.vue b/app/src/components/v-select/select-list-item.vue
@@ -17,6 +17,7 @@
 			<span v-if="multiple === false || item.selectable === false" class="item-text">{{ item.text }}</span>
 			<v-checkbox
 				v-else
+				class="checkbox"
 				:model-value="modelValue || []"
 				:label="item.text"
 				:value="item.value"
@@ -33,12 +34,14 @@ import { Option } from './types';
 
 interface Props {
 	item: Option;
+	itemLabelFontFamily: string;
 	modelValue?: string | number | (string | number)[] | null;
 	multiple?: boolean;
 	allowOther?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
+	itemLabelFontFamily: 'var(--v-select-font-family)',
 	modelValue: null,
 	multiple: true,
 	allowOther: false,
@@ -58,3 +61,9 @@ const isActive = computed(() => {
 	}
 });
 </script>
+
+<style scoped>
+.checkbox :deep(.type-text) {
+	font-family: v-bind('$props.itemLabelFontFamily');
+}
+</style>
diff --git a/app/src/components/v-select/v-select.vue b/app/src/components/v-select/v-select.vue
@@ -68,6 +68,7 @@
 				<select-list-item-group
 					v-if="item.children"
 					:item="item"
+					:item-label-font-family="itemLabelFontFamily"
 					:model-value="modelValue"
 					:multiple="multiple"
 					:allow-other="allowOther"
@@ -78,6 +79,7 @@
 					v-else
 					:model-value="modelValue"
 					:item="item"
+					:item-label-font-family="itemLabelFontFamily"
 					:multiple="multiple"
 					:allow-other="allowOther"
 					@update:model-value="$emit('update:modelValue', $event)"
@@ -155,6 +157,8 @@ interface Props {
 	itemValue?: string;
 	/** Which key in items is used to show an icon */
 	itemIcon?: string | null;
+	/** Which font family to use for checkbox item label */
+	itemLabelFontFamily?: string;
 	/** Which key in items is used to model the disabled state */
 	itemDisabled?: string;
 	/** Which key in items is used to model the selectable state */
@@ -368,10 +372,6 @@ function useDisplayValue() {
 	--v-list-min-width: 0;
 }
 
-.item-text {
-	font-family: var(--v-select-font-family);
-}
-
 .v-input {
 	--v-input-font-family: var(--v-select-font-family);
 

diff --git a/.../data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2a.vue b/.../data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2a.vue
@@ -22,6 +22,7 @@
 					:items="availableCollections"
 					item-value="collection"
 					item-text="collection"
+					item-label-font-family="var(--family-monospace)"
 					item-disabled="meta.singleton"
 					multiple
 					:is-menu-same-width="false"

diff --git a/...ettings/routes/data-model/field-detail/field-detail-simple/relationship-configuration.vue b/...ettings/routes/data-model/field-detail/field-detail-simple/relationship-configuration.vue
@@ -58,7 +58,8 @@
 				:placeholder="t('collection') + '...'"
 				:items="availableCollections"
 				item-value="collection"
-				item-text="name"
+				item-text="collection"
+				item-label-font-family="var(--family-monospace)"
 				item-disabled="meta.singleton"
 				multiple
 				:multiple-preview-threshold="0"
@@ -90,21 +91,17 @@ const o2mField = syncFieldDetailStoreProperty('relations.o2m.field');
 const oneAllowedCollections = syncFieldDetailStoreProperty('relations.m2o.meta.one_allowed_collections', []);
 
 const availableCollections = computed(() => {
-	return orderBy(
-		[
-			...collectionsStore.databaseCollections,
-			{
-				divider: true,
-			},
-			{
-				name: t('system'),
-				selectable: false,
-				children: collectionsStore.crudSafeSystemCollections,
-			},
-		],
-		['collection'],
-		['asc']
-	);
+	return [
+		...orderBy(collectionsStore.databaseCollections, ['collection'], ['asc']),
+		{
+			divider: true,
+		},
+		{
+			collection: t('system'),
+			selectable: false,
+			children: orderBy(collectionsStore.crudSafeSystemCollections, ['collection'], ['asc']),
+		},
+	];
 });
 </script>