refactor: Refactor input components to composition API (no-changelog) (#9744)

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

@@ -21,72 +21,49 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useToast } from '@/composables/useToast';
-import { i18n } from '@/plugins/i18n';
+<script setup lang="ts">
 import { useClipboard } from '@/composables/useClipboard';
+import { useI18n } from '@/composables/useI18n';
+import { useToast } from '@/composables/useToast';
 
-export default defineComponent({
-	props: {
-		label: {
-			type: String,
-		},
-		hint: {
-			type: String,
-		},
-		value: {
-			type: String,
-		},
-		copyButtonText: {
-			type: String,
-			default(): string {
-				return i18n.baseText('generic.copy');
-			},
-		},
-		toastTitle: {
-			type: String,
-			default(): string {
-				return i18n.baseText('generic.copiedToClipboard');
-			},
-		},
-		toastMessage: {
-			type: String,
-		},
-		collapse: {
-			type: Boolean,
-			default: false,
-		},
-		size: {
-			type: String,
-			default: 'large',
-		},
-		redactValue: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup() {
-		const clipboard = useClipboard();
+type Props = {
+	label?: string;
+	hint?: string;
+	value?: string;
+	copyButtonText: string;
+	toastTitle?: string;
+	toastMessage?: string;
+	size?: 'medium' | 'large';
+	collapse?: boolean;
+	redactValue?: boolean;
+};
 
-		return {
-			clipboard,
-			...useToast(),
-		};
-	},
-	methods: {
-		copy(): void {
-			this.$emit('copy');
-			void this.clipboard.copy(this.value ?? '');
-
-			this.showMessage({
-				title: this.toastTitle,
-				message: this.toastMessage,
-				type: 'success',
-			});
-		},
-	},
+const props = withDefaults(defineProps<Props>(), {
+	value: '',
+	placeholder: '',
+	label: '',
+	hint: '',
+	size: 'medium',
+	copyButtonText: useI18n().baseText('generic.copy'),
+	toastTitle: useI18n().baseText('generic.copiedToClipboard'),
 });
+const emit = defineEmits<{
+	(event: 'copy'): void;
+}>();
+
+const clipboard = useClipboard();
+const { showMessage } = useToast();
+
+function copy() {
+	emit('copy');
+	void clipboard.copy(props.value ?? '');
+
+	showMessage({
+		title: props.toastTitle,
+		message: props.toastMessage,
+		type: 'success',
+	});
+}
 </script>
 
 <style lang="scss" module>