feat(editor): Refactor several smaller components to composition API (no-changelog) (#10038)

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

@@ -35,51 +35,41 @@
 	</el-tag>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
 
-export default defineComponent({
-	name: 'Banner',
-	props: {
-		theme: {
-			type: String,
-			validator: (value: string): boolean => ['success', 'danger'].indexOf(value) !== -1,
-		},
-		message: {
-			type: String,
-		},
-		buttonLabel: {
-			type: String,
-		},
-		buttonLoadingLabel: {
-			type: String,
-		},
-		buttonTitle: {
-			type: String,
-		},
-		details: {
-			type: String,
-		},
-		buttonLoading: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			expanded: false,
-		};
-	},
-	methods: {
-		expand() {
-			this.expanded = true;
-		},
-		onClick() {
-			this.expanded = false;
-			this.$emit('click');
-		},
-	},
+interface Props {
+	theme: 'success' | 'danger';
+	message: string;
+	buttonLabel?: string;
+	buttonLoadingLabel?: string;
+	buttonTitle?: string;
+	details?: string;
+	buttonLoading?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+	buttonLoading: false,
+	buttonLabel: '',
+	buttonLoadingLabel: '',
+	buttonTitle: '',
+	details: '',
 });
+
+const emit = defineEmits<{
+	click: [];
+}>();
+
+const expanded = ref(false);
+
+const expand = () => {
+	expanded.value = true;
+};
+
+const onClick = () => {
+	expanded.value = false;
+	emit('click');
+};
 </script>
 
 <style module lang="scss">