chore: ParamXXXEditor vues now uses <script setup> syntax (#1524)

Signed-off-by: Eric Le Ponner <[email protected]>
hashgraph · Nov 28, 2024 · b973c62 · b973c62
1 parent bf0f0fb
commit b973c62
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 128 deletions.
diff --git a/src/components/values/abi/ParamBooleanEditor.vue b/src/components/values/abi/ParamBooleanEditor.vue
@@ -30,52 +30,41 @@
 <!--                                                      SCRIPT                                                     -->
 <!-- --------------------------------------------------------------------------------------------------------------- -->
 
-<script lang="ts">
+<script setup lang="ts">
 
-import {computed, defineComponent, onBeforeUnmount, onMounted, PropType, ref, watch, WatchStopHandle} from "vue";
+import {computed, onBeforeUnmount, onMounted, PropType, ref, watch, WatchStopHandle} from "vue";
 import {ContractParamBuilder} from "@/components/values/abi/ContractCallBuilder";
 import {AppStorage} from "@/AppStorage";
 
-export default defineComponent({
-  name: "ParamBooleanEditor",
-  components: {},
-  props: {
-    paramBuilder: {
-      type: Object as PropType<ContractParamBuilder>,
-      required: true
-    },
+const props = defineProps({
+  paramBuilder: {
+    type: Object as PropType<ContractParamBuilder>,
+    required: true
   },
-  setup(props) {
-    const checked = ref<boolean>(false)
-
-    const lastParamData = computed(() => {
-      const functionHash = props.paramBuilder.callBuilder.fragment.selector
-      const paramName = props.paramBuilder.paramType.name
-      return AppStorage.getInputParam(functionHash, paramName)
-    })
-
-    let watchHandle: WatchStopHandle | null = null
-    onMounted(() => {
-      checked.value = !!lastParamData.value
-      watchHandle = watch(checked, () => {
-        props.paramBuilder.paramData.value = checked.value
-      }, {immediate: true})
-    })
-    onBeforeUnmount(() => {
-      if (watchHandle !== null) {
-        watchHandle()
-        watchHandle = null
-      }
-      props.paramBuilder.paramData.value = null
-      checked.value = false
-    })
+})
 
-    return {
-      checked
-    }
+const checked = ref<boolean>(false)
 
+const lastParamData = computed(() => {
+  const functionHash = props.paramBuilder.callBuilder.fragment.selector
+  const paramName = props.paramBuilder.paramType.name
+  return AppStorage.getInputParam(functionHash, paramName)
+})
 
+let watchHandle: WatchStopHandle | null = null
+onMounted(() => {
+  checked.value = !!lastParamData.value
+  watchHandle = watch(checked, () => {
+    props.paramBuilder.paramData.value = checked.value
+  }, {immediate: true})
+})
+onBeforeUnmount(() => {
+  if (watchHandle !== null) {
+    watchHandle()
+    watchHandle = null
   }
+  props.paramBuilder.paramData.value = null
+  checked.value = false
 })
 
 </script>

diff --git a/src/components/values/abi/ParamJsonEditor.vue b/src/components/values/abi/ParamJsonEditor.vue
@@ -24,39 +24,29 @@
 
 <template>
   <button class="button is-white h-is-smaller" @click="jsonEditorController.visible.value = true">EDIT…</button>
-  <JsonEditorDialog :controller="jsonEditorController" :param-builder="paramBuilder"/>
+  <JsonEditorDialog :controller="jsonEditorController" :param-builder="props.paramBuilder"/>
 </template>
 
 <!-- --------------------------------------------------------------------------------------------------------------- -->
 <!--                                                      SCRIPT                                                     -->
 <!-- --------------------------------------------------------------------------------------------------------------- -->
 
-<script lang="ts">
+<script setup lang="ts">
 
-import {defineComponent, PropType} from "vue";
+import {PropType} from "vue";
 import {ContractParamBuilder} from "@/components/values/abi/ContractCallBuilder";
 import {DialogController} from "@/components/dialog/DialogController";
 import JsonEditorDialog from "@/components/values/abi/JsonEditorDialog.vue";
 
-export default defineComponent({
-  name: "ParamJsonEditor",
-  components: {JsonEditorDialog},
-  props: {
-    paramBuilder: {
-      type: Object as PropType<ContractParamBuilder>,
-      required: true
-    },
+const props = defineProps({
+  paramBuilder: {
+    type: Object as PropType<ContractParamBuilder>,
+    required: true
   },
-  setup() {
-
-    const jsonEditorController = new DialogController()
-
-    return {
-      jsonEditorController
-    }
-  }
 })
 
+const jsonEditorController = new DialogController()
+
 </script>
 
 <!-- --------------------------------------------------------------------------------------------------------------- -->

diff --git a/src/components/values/abi/ParamTextEditor.vue b/src/components/values/abi/ParamTextEditor.vue
@@ -30,50 +30,41 @@
 <!--                                                      SCRIPT                                                     -->
 <!-- --------------------------------------------------------------------------------------------------------------- -->
 
-<script lang="ts">
+<script setup lang="ts">
 
-import {computed, defineComponent, onBeforeUnmount, onMounted, PropType, ref, watch, WatchStopHandle} from "vue";
+import {computed, onBeforeUnmount, onMounted, PropType, ref, watch, WatchStopHandle} from "vue";
 import {ContractParamBuilder} from "@/components/values/abi/ContractCallBuilder";
 import {AppStorage} from "@/AppStorage";
 
-export default defineComponent({
-  name: "ParamTextEditor",
-  components: {},
-  props: {
-    paramBuilder: {
-      type: Object as PropType<ContractParamBuilder>,
-      required: true
-    },
+const props = defineProps({
+  paramBuilder: {
+    type: Object as PropType<ContractParamBuilder>,
+    required: true
   },
-  setup(props) {
-    const currentText = ref<string>("")
+})
 
-    const lastParamData = computed(() => {
-      const functionHash = props.paramBuilder.callBuilder.fragment.selector
-      const paramName = props.paramBuilder.paramType.name
-      return AppStorage.getInputParam(functionHash, paramName)
-    })
+const currentText = ref<string>("")
 
-    let watchHandle: WatchStopHandle | null = null
-    onMounted(() => {
-      currentText.value = lastParamData.value?.toString() ?? ""
-      watchHandle = watch(currentText, () => {
-        props.paramBuilder.paramData.value = currentText.value
-      }, {immediate: true})
-    })
-    onBeforeUnmount(() => {
-      if (watchHandle !== null) {
-        watchHandle()
-        watchHandle = null
-      }
-      props.paramBuilder.paramData.value = null
-      currentText.value = ""
-    })
+const lastParamData = computed(() => {
+  const functionHash = props.paramBuilder.callBuilder.fragment.selector
+  const paramName = props.paramBuilder.paramType.name
+  return AppStorage.getInputParam(functionHash, paramName)
+})
 
-    return {
-      currentText
-    }
+let watchHandle: WatchStopHandle | null = null
+onMounted(() => {
+  currentText.value = lastParamData.value?.toString() ?? ""
+  watchHandle = watch(currentText, () => {
+    props.paramBuilder.paramData.value = currentText.value
+  }, {immediate: true})
+})
+onBeforeUnmount(() => {
+  if (watchHandle !== null) {
+    watchHandle()
+    watchHandle = null
   }
+  props.paramBuilder.paramData.value = null
+  currentText.value = ""
 })
 
 </script>

diff --git a/src/components/values/abi/ParamTypeEditor.vue b/src/components/values/abi/ParamTypeEditor.vue
@@ -25,13 +25,13 @@
 <template>
   <div>
     <template v-if="needsTextEditor">
-      <ParamTextEditor :param-builder="paramBuilder"/>
+      <ParamTextEditor :param-builder="props.paramBuilder"/>
     </template>
     <template v-else-if="needsBooleanEditor">
-      <ParamBooleanEditor :param-builder="paramBuilder"/>
+      <ParamBooleanEditor :param-builder="props.paramBuilder"/>
     </template>
     <template v-else>
-      <ParamJsonEditor :param-builder="paramBuilder"/>
+      <ParamJsonEditor :param-builder="props.paramBuilder"/>
     </template>
   </div>
 </template>
@@ -40,50 +40,39 @@
 <!--                                                      SCRIPT                                                     -->
 <!-- --------------------------------------------------------------------------------------------------------------- -->
 
-<script lang="ts">
+<script setup lang="ts">
 
-import {computed, defineComponent, PropType} from "vue";
+import {computed, PropType} from "vue";
 import ParamTextEditor from "@/components/values/abi/ParamTextEditor.vue";
 import ParamBooleanEditor from "@/components/values/abi/ParamBooleanEditor.vue";
 import ParamJsonEditor from "@/components/values/abi/ParamJsonEditor.vue";
 import {ContractParamBuilder} from "@/components/values/abi/ContractCallBuilder";
 
-export default defineComponent({
-  name: "ParamTypeEditor",
-  components: {ParamJsonEditor, ParamBooleanEditor, ParamTextEditor},
-  props: {
-    paramBuilder: {
-      type: Object as PropType<ContractParamBuilder>,
-      required: true
-    },
+const props = defineProps({
+  paramBuilder: {
+    type: Object as PropType<ContractParamBuilder>,
+    required: true
   },
-  setup(props) {
-
-    const needsBooleanEditor = computed(
-        () => props.paramBuilder.paramType.baseType == "bool")
+})
 
-    const needsTextEditor = computed(() => {
-      let result: boolean
-      switch (clearSize(props.paramBuilder.paramType.baseType)) {
-        case "int":
-        case "uint":
-        case "string":
-        case "address":
-        case "bytes":
-          result = true
-          break
-        default:
-          result = false
-          break
-      }
-      return result
-    })
+const needsBooleanEditor = computed(
+    () => props.paramBuilder.paramType.baseType == "bool")
 
-    return {
-      needsBooleanEditor,
-      needsTextEditor
-    }
+const needsTextEditor = computed(() => {
+  let result: boolean
+  switch (clearSize(props.paramBuilder.paramType.baseType)) {
+    case "int":
+    case "uint":
+    case "string":
+    case "address":
+    case "bytes":
+      result = true
+      break
+    default:
+      result = false
+      break
   }
+  return result
 })
 
 interface SizedType {