chore: more refactoring

src/components/DevTools/ContractManageForm.vue

@@ -5,10 +5,9 @@
     {{ $t("message.DevTools.DefaultText") }}
   </div>
 
+  <FieldList ref="fieldList" :form-title="title ?? 'title'" :inputs="inputs" />
 
-  <FieldList :form-title="title ?? 'title'" :inputs="inputs" :register-element="registerElement" />
-
-  <button class="button is-primary" @click="execute">Execute</button>
+  <button class="button is-primary" @click="devTools.execute($refs.fieldList?.getElements() ?? [])">Execute</button>
 
   <div v-if="getterResult" class="content">
     <ul>
@@ -21,7 +20,9 @@
 <script lang="ts">
 import { toNano, type ABIGetter, type ABIReceiver, type ABIType, type ContractProvider } from 'ton-core';
 import FieldList from '../Fields/FieldList.vue';
-import { BaseDevTools, GetterDevTools, ReceiverDevTools, type BaseFieldElement } from '@/utils/devTools';
+import { BaseDevTools } from '@/devTools/base';
+import { GetterDevTools } from '@/devTools/getter';
+import { ReceiverDevTools } from '@/devTools/receiver';
 
 export default {
   components: { FieldList },
@@ -53,7 +54,6 @@ export default {
     setGetter(getter: ABIGetter) {
       this.devTools = new GetterDevTools({
         getter,
-        types: this.types,
         provider: this.provider,
       });
     },
@@ -66,12 +66,6 @@ export default {
         tonAmount: toNano("0.1")
       });
     },
-    registerElement(el: BaseFieldElement) {
-      this.devTools.registerInput(el);
-    },
-    async execute() {
-      this.devTools.execute()
-    },
   }
 }
 </script>

src/components/Fields/AddressField.vue

@@ -1,25 +1,40 @@
 <template>
-  <TextInput ref="input" :optional="optional" :label="label"
-    :placeholder="placeholder || $t('message.Fields.Address_Placeholder')"
-    :help-text="helpText || $t('message.Fields.Address_HelpText')" />
+  <FieldLabelWrapper :label="label" :help-text="helpText ?? $t('message.Fields.Address.HelpText')"
+    :error-text="errorText" :optional="optional">
+    <input class="input" type="text" :placeholder="placeholder ?? $t('message.Fields.Address.Placeholder')"
+      v-model="value" @input="validate">
+  </FieldLabelWrapper>
 </template>
 
 <script lang="ts">
 import { Builder, Address } from 'ton-core';
-import TextInput from '../Inputs/TextInput.vue';
 import BaseField from './BaseField.vue';
+import FieldLabelWrapper from './FieldLabelWrapper.vue';
 
 export default {
   extends: BaseField,
   components: {
-    TextInput
+    FieldLabelWrapper
   },
   methods: {
     validate(): boolean {
-      return (this.$refs.input as typeof TextInput).validate();
+      if (!this.optional && !this.value) {
+        this.errorText = this.$t("message.Fields.Errors.RequiredField");
+        return false;
+      }
+
+      try {
+        Address.parse(this.value);
+      } catch {
+        this.errorText = this.$t("message.Fields.Errors.WrongAddress");
+        return false
+      }
+
+      this.errorText = "";
+      return true;
     },
     store(builder: Builder): void {
-      builder.storeAddress(Address.parse((this.$refs.input as typeof TextInput).value))
+      builder.storeAddress(Address.parse(this.value))
     }
   }
 }

src/components/Fields/BaseField.vue

@@ -1,18 +1,17 @@
 <template>
-  <TextInput ref="input" :optional="optional" :label="label" :placeholder="placeholder" :help-text="helpText" />
+  <FieldLabelWrapper :label="label" :help-text="helpText" :error-text="errorText" :optional="optional">
+    <input class="input" type="text" :placeholder="placeholder" v-model="value">
+  </FieldLabelWrapper>
 </template>
 
 <script lang="ts">
-import TextInput from '../Inputs/TextInput.vue';
+import FieldLabelWrapper from './FieldLabelWrapper.vue';
 
 export default {
   components: {
-    TextInput
+    FieldLabelWrapper
   },
   props: {
-    optional: {
-      type: Boolean,
-    },
     label: {
       type: String,
       required: true,
@@ -23,13 +22,28 @@ export default {
     helpText: {
       type: String,
     },
+    optional: {
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      errorText: "",
+      value: "",
+    }
   },
   methods: {
     validate(): boolean {
-      return (this.$refs.input as typeof TextInput).validate();
+      if (!this.optional && !this.value) {
+        this.errorText = this.$t("message.Fields.Errors.RequiredField");
+        return false;
+      }
+
+      this.errorText = "";
+      return true;
     },
     store(): void {
-
+      // TODO
     }
   }
 }

src/components/Fields/BooleanField.vue

@@ -1,23 +1,32 @@
 <template>
-  <BooleanInput ref="input" :optional="optional" :label="label" :placeholder="placeholder" :help-text="helpText" />
+  <FieldLabelWrapper :label="label" :help-text="helpText ?? $t('message.Fields.Boolean.HelpText')"
+    :error-text="errorText" :optional="true">
+    <input class="checkbox" type="checkbox" :placeholder="placeholder ?? $t('message.Fields.Boolean.Placeholder')"
+      v-model="checked">
+  </FieldLabelWrapper>
 </template>
 
 <script lang="ts">
 import { Builder } from 'ton-core';
 import BaseField from './BaseField.vue';
-import BooleanInput from '../Inputs/BooleanInput.vue';
+import FieldLabelWrapper from './FieldLabelWrapper.vue';
 
 export default {
   extends: BaseField,
   components: {
-    BooleanInput
+    FieldLabelWrapper
+  },
+  data() {
+    return {
+      checked: false,
+    }
   },
   methods: {
     validate(): boolean {
-      return (this.$refs.input as typeof BooleanInput).validate();
+      return true;
     },
     store(builder: Builder): void {
-      builder.storeBit((this.$refs.input as typeof BooleanInput).value)
+      builder.storeBit(this.checked)
     }
   }
 }

src/components/Fields/CoinsField.vue

@@ -1,25 +1,53 @@
 <template>
-  <NumberInput ref="input" :optional="optional" :label="label"
-    :placeholder="placeholder || $t('message.Fields.Coins_Placeholder')"
-    :help-text="helpText || $t('message.Fields.Coins_HelpText')" />
+  <FieldLabelWrapper :label="label" :help-text="helpText ?? $t('message.Fields.Coins.HelpText')" :error-text="errorText"
+    :optional="true">
+    <input class="input" type="number" :placeholder="placeholder ?? $t('message.Fields.Coins.Placeholder')"
+      v-model="value" @input="validate">
+  </FieldLabelWrapper>
 </template>
 
 <script lang="ts">
-import type { Builder } from 'ton-core';
-import NumberInput from '../Inputs/NumberInput.vue';
+const COINS_MIN_VALUE = 0;
+const COINS_MAX_VALUE = 2 ** 257 - 1;
+
+import { type Builder } from 'ton-core';
 import BaseField from './BaseField.vue';
+import FieldLabelWrapper from './FieldLabelWrapper.vue';
 
 export default {
   extends: BaseField,
   components: {
-    NumberInput
+    FieldLabelWrapper
   },
   methods: {
     validate(): boolean {
-      return (this.$refs.input as typeof NumberInput).validate()
+      if (!this.optional && !this.value) {
+        this.errorText = this.$t("message.Fields.Errors.RequiredField");
+        return false;
+      }
+
+      try {
+        parseInt(this.value);
+      } catch {
+        this.errorText = this.$t("message.Fields.Errors.InvalidNumber");
+        return false;
+      }
+
+      const value = parseInt(this.value);
+      if (value < COINS_MIN_VALUE) {
+        this.errorText = this.$t("message.Fields.Errors.MustBeMoreThan", { min: COINS_MIN_VALUE });
+        return false;
+      }
+      if (value > COINS_MAX_VALUE) {
+        this.errorText = this.$t("message.Fields.Errors.MustBeLessThan", { max: COINS_MAX_VALUE });
+        return false;
+      }
+
+      this.errorText = "";
+      return true;
     },
     store(builder: Builder): void {
-      builder.storeCoins(parseInt((this.$refs.input as typeof NumberInput).value))
+      builder.storeCoins(parseInt(this.value));
     }
   }
 }

src/components/Fields/FieldList.vue

@@ -19,22 +19,21 @@
 <script lang="ts">
 import type { Builder } from 'ton-core';
 import type { CreateComponentPublicInstanceWithMixins } from 'vue';
-import type { InputItem } from '@/utils/devTools';
 import StringField from './StringField.vue';
 import CoinsField from './CoinsField.vue';
 import UintField from './UintField.vue';
 import SliceField from './SliceField.vue';
 import AddressField from './AddressField.vue';
 import BooleanField from './BooleanField.vue';
-import UnknownField from './UnknownField.vue';
+import type { InputItem } from '@/devTools/fields';
 
-type BaseFieldElement = CreateComponentPublicInstanceWithMixins<{
+export type BaseFieldElement = CreateComponentPublicInstanceWithMixins<{
   validate(): boolean,
   store(builder: Builder): void,
 }>;
 
 export default {
-  components: { StringField, CoinsField, UintField, SliceField, AddressField, BooleanField, UnknownField },
+  components: { StringField, CoinsField, UintField, SliceField, AddressField, BooleanField },
   props: {
     formTitle: {
       type: String,
@@ -45,15 +44,21 @@ export default {
       required: true,
     },
   },
-  computed: {
-    registerElement(index: number, el: BaseFieldElement) {
-      //
-    }
-  },
   data() {
     return {
-      fields: [] as BaseFieldElement[],
+      fields: {} as { [id: number]: BaseFieldElement },
+    }
+  },
+  methods: {
+    registerElement(index: number, element: BaseFieldElement) {
+      this.fields[index] = element;
+    },
+    getElements(): BaseFieldElement[] {
+      return Object.values(this.fields).filter(item => !!item)
     }
+  },
+  beforeUpdate() {
+    this.fields = {};
   }
 }
 </script>

src/components/Fields/SliceField.vue

@@ -1,39 +1,40 @@
 <template>
-  <strong>Slice</strong>
-
-  <article class="message">
-    <div class="message-body">
-      <div class="field has-addons">
-        <div class="control is-expanded">
-          <div class="select is-fullwidth">
-            <select name="type">
-              <option value="string">string</option>
-              <option value="uint">uint</option>
-              <option value="coins">coins</option>
-            </select>
-          </div>
-        </div>
-        <div class="control">
-          <button type="submit" class="button is-primary">Add field</button>
-        </div>
-      </div>
-    </div>
-  </article>
+  <FieldLabelWrapper :label="label" :help-text="helpText ?? $t('message.Fields.Slice.HelpText')" :error-text="errorText"
+    :optional="true">
+    <input class="input" type="text" :placeholder="placeholder ?? $t('message.Fields.Slice.Placeholder')"
+      v-model="value" @input="validate">
+  </FieldLabelWrapper>
 </template>
 
 <script lang="ts">
 import { Cell, Builder } from 'ton-core';
 import BaseField from './BaseField.vue';
-import TextInput from '../Inputs/TextInput.vue';
+import FieldLabelWrapper from './FieldLabelWrapper.vue';
 
 export default {
   extends: BaseField,
   components: {
-    TextInput
+    FieldLabelWrapper
   },
   methods: {
+    validate() {
+      if (!this.optional && !this.value) {
+        this.errorText = this.$t("message.Fields.Errors.RequiredField");
+        return false;
+      }
+
+      try {
+        Cell.fromBase64(this.value);
+      } catch {
+        this.errorText = this.$t("message.Fields.Errors.InvalidBase64");
+        return false
+      }
+
+      this.errorText = "";
+      return true;
+    },
     store(builder: Builder): void {
-      builder.storeSlice(Cell.fromBase64((this.$refs.input as typeof TextInput).value).asSlice())
+      builder.storeSlice(Cell.fromBase64(this.value).asSlice())
     }
   }
 }