added case and space-repace prop

app/src/interfaces/tags/index.ts

@@ -18,6 +18,18 @@ export default defineInterface(({ i18n }) => ({
 				interface: 'tags',
 			},
 		},
+		{
+			field: 'placeholder',
+			name: i18n.t('placeholder'),
+			type: 'string',
+			meta: {
+				width: 'full',
+				interface: 'text-input',
+				options: {
+					placeholder: i18n.t('enter_a_placeholder'),
+				},
+			},
+		},
 		{
 			field: 'alphabetize',
 			name: i18n.t('interfaces.tags.alphabetize'),
@@ -33,33 +45,6 @@ export default defineInterface(({ i18n }) => ({
 				default_value: false,
 			},
 		},
-		{
-			field: 'lowercase',
-			name: i18n.t('interfaces.tags.lowercase'),
-			type: 'boolean',
-			meta: {
-				width: 'half',
-				interface: 'toggle',
-				options: {
-					label: i18n.t('interfaces.tags.lowercase_label'),
-				},
-			},
-			schema: {
-				default_value: false,
-			},
-		},
-		{
-			field: 'placeholder',
-			name: i18n.t('placeholder'),
-			type: 'string',
-			meta: {
-				width: 'half',
-				interface: 'text-input',
-				options: {
-					placeholder: i18n.t('enter_a_placeholder'),
-				},
-			},
-		},
 		{
 			field: 'allowCustom',
 			name: i18n.t('interfaces.dropdown.allow_other'),
@@ -75,6 +60,40 @@ export default defineInterface(({ i18n }) => ({
 				default_value: false,
 			},
 		},
+		{
+			field: 'spaceReplace',
+			name: i18n.t('interfaces.tags.space_replace'),
+			type: 'string',
+			meta: {
+				width: 'half',
+				interface: 'dropdown',
+				options: {
+					showDeselect: true,
+					choices: [
+						{ text: i18n.t('interfaces.tags.hyphen'), value: '-' },
+						{ text: i18n.t('interfaces.tags.underscore'), value: '_' },
+						{ text: i18n.t('interfaces.tags.remove'), value: '' },
+					],
+				},
+			},
+		},
+		{
+			field: 'case',
+			name: i18n.t('interfaces.tags.case'),
+			type: 'string',
+			meta: {
+				width: 'half',
+				interface: 'dropdown',
+				options: {
+					showDeselect: true,
+					choices: [
+						{ text: i18n.t('interfaces.tags.uppercase'), value: 'uppercase' },
+						{ text: i18n.t('interfaces.tags.lowercase'), value: 'lowercase' },
+						{ text: i18n.t('interfaces.tags.auto_formatter'), value: 'auto-format' },
+					],
+				},
+			},
+		},
 		{
 			field: 'iconLeft',
 			name: i18n.t('icon_left'),

app/src/interfaces/tags/tags.vue

@@ -43,6 +43,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType, ref, computed, watch } from '@vue/composition-api';
+import formatTitle from '@directus/format-title';
 
 export default defineComponent({
 	props: {
@@ -58,9 +59,13 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
-		lowercase: {
-			type: Boolean,
-			default: false,
+		spaceReplace: {
+			type: String,
+			default: null,
+		},
+		case: {
+			type: String as PropType<'uppercase' | 'lowercase' | 'auto-format'>,
+			default: null,
 		},
 		alphabetize: {
 			type: Boolean,
@@ -117,7 +122,19 @@ export default defineComponent({
 		});
 
 		function processArray(array: string[]): string[] {
-			array = array.map((val) => (props.lowercase ? val.toLowerCase().trim() : val.trim()));
+			array = array.map((val) => {
+				val = val.trim();
+				if (props.case === 'uppercase') val = val.toUpperCase();
+				if (props.case === 'lowercase') val = val.toLowerCase();
+
+				const spaceReplace = props.spaceReplace === null ? ' ' : props.spaceReplace;
+
+				if (props.case === 'auto-format') val = formatTitle(val, new RegExp(spaceReplace));
+
+				val = val.replaceAll(/ +/g, spaceReplace);
+
+				return val;
+			});
 
 			if (props.alphabetize) {
 				array = array.concat().sort();
@@ -160,9 +177,9 @@ export default defineComponent({
 		}
 
 		function removeTag(tag: string) {
-			selectedValsLocal.value = selectedValsLocal.value.filter(
-				(savedTag) => (props.lowercase ? savedTag.toLowerCase() : savedTag) !== tag
-			);
+			console.log(tag);
+
+			selectedValsLocal.value = selectedValsLocal.value.filter((savedTag) => savedTag !== tag);
 			emitValue();
 		}
 

app/src/lang/en-US/interfaces.json

@@ -152,8 +152,14 @@
 		"tags": {
 			"tags": "Tags",
 			"description": "Select or add tags",
-			"lowercase": "Lowercase",
-			"lowercase_label": "Force Lowercase",
+			"space_replace": "Replace Space",
+			"hyphen": "Replace with hyphen",
+			"underscore": "Replace with underscore",
+			"remove": "Remove space",
+			"case": "Case",
+			"uppercase": "Convert Uppercase",
+			"lowercase": "Convert Lowercase",
+			"auto_formatter": "Use Title Auto-Formatter",
 			"alphabetize": "Alphabetize",
 			"alphabetize_label": "Force Alphabetical Order",
 			"add_tags": "Add tags..."