refactor(editor): Refactor VariableSelector and VariableSelectorItem to composition API (no-changelog) (#10030)

packages/editor-ui/src/components/VariableSelectorItem.vue

@@ -59,87 +59,89 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
 import type { IVariableSelectorOption, IVariableItemSelected } from '@/Interface';
 
-export default defineComponent({
-	name: 'VariableSelectorItem',
-	props: ['allowParentSelect', 'extendAll', 'item', 'redactValues'],
-	data() {
-		return {
-			extended: false,
-		};
-	},
-	computed: {
-		itemAddOperations() {
-			const returnOptions = [
-				{
-					command: 'raw',
-					displayName: 'Raw value',
-				},
-			];
-			if (this.item.dataType === 'array') {
-				returnOptions.push({
-					command: 'arrayLength',
-					displayName: 'Length',
-				});
-				returnOptions.push({
-					command: 'arrayValues',
-					displayName: 'Values',
-				});
-			} else if (this.item.dataType === 'object') {
-				returnOptions.push({
-					command: 'objectKeys',
-					displayName: 'Keys',
-				});
-				returnOptions.push({
-					command: 'objectValues',
-					displayName: 'Values',
-				});
-			}
+const props = defineProps<{
+	allowParentSelect?: boolean;
+	extendAll?: boolean;
+	item: IVariableSelectorOption;
+	redactValues?: boolean;
+}>();
 
-			return returnOptions;
-		},
-	},
-	mounted() {
-		if (this.extended) return;
+const emit = defineEmits<{
+	itemSelected: [value: IVariableItemSelected];
+}>();
 
-		const shouldAutoExtend =
-			[
-				this.$locale.baseText('variableSelectorItem.currentNode'),
-				this.$locale.baseText('variableSelectorItem.inputData'),
-				this.$locale.baseText('variableSelectorItem.binary'),
-				this.$locale.baseText('variableSelectorItem.json'),
-			].includes(this.item.name) && this.item.key === undefined;
+const extended = ref(false);
 
-		if (shouldAutoExtend) {
-			this.extended = true;
-		}
-	},
-	methods: {
-		optionSelected(command: string, item: IVariableSelectorOption) {
-			// By default it is raw
-			let variable = item.key;
-			if (command === 'arrayValues') {
-				variable = `${item.key}.join(', ')`;
-			} else if (command === 'arrayLength') {
-				variable = `${item.key}.length`;
-			} else if (command === 'objectKeys') {
-				variable = `Object.keys(${item.key}).join(', ')`;
-			} else if (command === 'objectValues') {
-				variable = `Object.values(${item.key}).join(', ')`;
-			}
-			this.$emit('itemSelected', { variable });
+const itemAddOperations = computed(() => {
+	const returnOptions = [
+		{
+			command: 'raw',
+			displayName: 'Raw value',
 		},
-		selectItem(item: IVariableSelectorOption) {
-			this.$emit('itemSelected', { variable: item.key });
-		},
-		forwardItemSelected(eventData: IVariableItemSelected) {
-			this.$emit('itemSelected', eventData);
-		},
-	},
+	];
+	if (props.item.dataType === 'array') {
+		returnOptions.push(
+			{
+				command: 'arrayLength',
+				displayName: 'Length',
+			},
+			{
+				command: 'arrayValues',
+				displayName: 'Values',
+			},
+		);
+	} else if (props.item.dataType === 'object') {
+		returnOptions.push(
+			{
+				command: 'objectKeys',
+				displayName: 'Keys',
+			},
+			{
+				command: 'objectValues',
+				displayName: 'Values',
+			},
+		);
+	}
+	return returnOptions;
 });
+
+onMounted(() => {
+	if (extended.value) return;
+
+	const shouldAutoExtend =
+		['Current Node', 'Input Data', 'Binary', 'JSON'].includes(props.item.name) &&
+		props.item.key === undefined;
+
+	if (shouldAutoExtend) {
+		extended.value = true;
+	}
+});
+
+const optionSelected = (command: string, item: IVariableSelectorOption) => {
+	let variable = item.key ?? '';
+	if (command === 'arrayValues') {
+		variable = `${item.key}.join(', ')`;
+	} else if (command === 'arrayLength') {
+		variable = `${item.key}.length`;
+	} else if (command === 'objectKeys') {
+		variable = `Object.keys(${item.key}).join(', ')`;
+	} else if (command === 'objectValues') {
+		variable = `Object.values(${item.key}).join(', ')`;
+	}
+	emit('itemSelected', { variable });
+};
+
+const selectItem = (item: IVariableSelectorOption) => {
+	emit('itemSelected', { variable: item.key ?? '' });
+};
+
+const forwardItemSelected = (eventData: IVariableItemSelected) => {
+	emit('itemSelected', eventData);
+};
 </script>
 
 <style scoped lang="scss">