feat: use <script setup> syntax

Author: abetomo

Diff for: components/DbTableInfo.vue

@@ -1,3 +1,17 @@
+<script lang="ts" setup>
+const props = defineProps({
+  dbColumnNames: {
+    type: Array,
+    required: true,
+  },
+
+  csvColumnNames: {
+    type: Array,
+    required: true,
+  }
+})
+</script>
+
 <template>
   <div v-show="props.dbColumnNames.length > 0" class="has-text-centered">
     <div class="scroll">
@@ -19,23 +33,3 @@
     <p>TableName: <strong>hoge</strong></p>
   </div>
 </template>
-
-<script lang="ts">
-export default defineComponent({
-  props: {
-    dbColumnNames: {
-      type: Array,
-      required: true,
-    },
-
-    csvColumnNames: {
-      type: Array,
-      required: true,
-    },
-  },
-
-  setup(props: { dbColumnNames: string[]; csvColumnNames: string[] }) {
-    return { props }
-  },
-})
-</script>

Diff for: components/DragAndDrop.vue

@@ -1,3 +1,48 @@
+<script lang="ts" setup>
+import { parse } from 'csv-parse/lib/sync'
+import { useContext } from '@nuxtjs/composition-api'
+
+const state = reactive<{
+  loading: boolean
+}>({
+  loading: false,
+})
+
+const { root } = useContext()
+const emit = defineEmits(['set'])
+const onDrop = (event: any) => {
+  state.loading = true
+  const files = event.dataTransfer.files
+  setTimeout(() => {
+    const reader = new FileReader()
+    reader.onload = (e: any) => {
+      let rows = []
+      try {
+        rows = parse(e.target.result, { skip_empty_lines: true })
+      } catch (e) {
+        ;(root as any).$buefy.toast.open({
+          duration: 5000,
+          message: e,
+          position: 'is-bottom',
+          type: 'is-danger'
+        })
+        state.loading = false
+        return
+      }
+      const columnLength = rows[0].length
+      emit(
+        'set',
+        rows.filter((row: string[]) => row.length === columnLength)
+      )
+      state.loading = false
+    }
+    reader.readAsText(files[0])
+  }, 200)
+}
+
+const { loading } = toRefs(state)
+</script>
+
 <template>
   <div
     class="drop-area"
@@ -6,62 +51,13 @@
     @drop.prevent="onDrop"
   >
     <p>Drag and drop file</p>
-    <div class="modal" :class="{ 'is-active': state.loading }">
+    <div class="modal" :class="{ 'is-active': loading }">
       <div class="modal-background"></div>
       <div class="modal-content">Loading...</div>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { parse } from 'csv-parse/lib/sync'
-
-export default defineComponent({
-  setup(_, ctx) {
-    const state = reactive<{
-      loading: boolean
-    }>({
-      loading: false,
-    })
-
-    const onDrop = (event: any) => {
-      state.loading = true
-      const files = event.dataTransfer.files
-      setTimeout(() => {
-        const reader = new FileReader()
-        reader.onload = (e: any) => {
-          let rows = []
-          try {
-            rows = parse(e.target.result, { skip_empty_lines: true })
-          } catch (e) {
-            ;(ctx.root as any).$buefy.toast.open({
-              duration: 5000,
-              message: e,
-              position: 'is-bottom',
-              type: 'is-danger'
-            })
-            state.loading = false
-            return
-          }
-          const columnLength = rows[0].length
-          ctx.emit(
-            'set',
-            rows.filter((row: string[]) => row.length === columnLength)
-          )
-          state.loading = false
-        }
-        reader.readAsText(files[0])
-      }, 200)
-    }
-
-    return {
-      state,
-      onDrop,
-    }
-  },
-})
-</script>
-
 <style scoped>
 .drop-area {
   display: block;

Diff for: components/ErrorMessage.vue

@@ -1,3 +1,12 @@
+<script lang="ts" setup>
+const props = defineProps({
+  message: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
 <template>
   <div v-show="props.message && props.message.length > 0">
     <article class="message is-danger">
@@ -10,18 +19,3 @@
     </article>
   </div>
 </template>
-
-<script lang="ts">
-export default defineComponent({
-  props: {
-    message: {
-      type: String,
-      required: true,
-    },
-  },
-
-  setup(props: { message: string }) {
-    return { props }
-  },
-})
-</script>

Diff for: components/ResultTable.vue

@@ -1,3 +1,17 @@
+<script lang="ts" setup>
+const props = defineProps({
+  columnNames: {
+    type: Array,
+    required: true,
+  },
+
+  result: {
+    type: Array,
+    required: true,
+  },
+})
+</script>
+
 <template>
   <div class="scroll">
     <table class="table is-hoverable is-fullwidth scroll">
@@ -16,23 +30,3 @@
     </table>
   </div>
 </template>
-
-<script lang="ts">
-export default defineComponent({
-  props: {
-    columnNames: {
-      type: Array,
-      required: true,
-    },
-
-    result: {
-      type: Array,
-      required: true,
-    },
-  },
-
-  setup(props: { columnNames: string[]; result: string[][] }) {
-    return { props }
-  },
-})
-</script>