chore: script setup components (#7299)

frontend/components/global/RecipeJsonEditor.vue

@@ -8,53 +8,40 @@
   />
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
 import JsonEditorVue from "json-editor-vue";
 
-export default defineComponent({
-  name: "RecipeJsonEditor",
-  components: { JsonEditorVue },
-  props: {
-    modelValue: {
-      type: Object,
-      default: () => ({}),
-    },
-    height: {
-      type: String,
-      default: "1500px",
-    },
-  },
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    function parseEvent(event: any): object {
-      if (!event) {
-        return props.modelValue || {};
-      }
-      try {
-        if (event.json) {
-          return event.json;
-        }
-        else if (event.text) {
-          return JSON.parse(event.text);
-        }
-        else {
-          return event;
-        }
-      }
-      catch {
-        return props.modelValue || {};
-      }
-    }
-    function onChange(event: any) {
-      const parsed = parseEvent(event);
-      if (parsed !== props.modelValue) {
-        emit("update:modelValue", parsed);
-      }
-    }
-    return {
-      onChange,
-    };
+const modelValue = defineModel<object>("modelValue", { default: () => ({}) });
+defineProps({
+  height: {
+    type: String,
+    default: "1500px",
   },
 });
+
+function parseEvent(event: any): object {
+  if (!event) {
+    return modelValue.value || {};
+  }
+  try {
+    if (event.json) {
+      return event.json;
+    }
+    else if (event.text) {
+      return JSON.parse(event.text);
+    }
+    else {
+      return event;
+    }
+  }
+  catch {
+    return modelValue.value || {};
+  }
+}
+function onChange(event: any) {
+  const parsed = parseEvent(event);
+  if (parsed !== modelValue.value) {
+    modelValue.value = parsed;
+  }
+}
 </script>