Fix/Random address input-field (#41)

Co-authored-by: Yehor Podporinov <[email protected]>
dl-solarity · Oct 17, 2023 · 9239aa9 · 9239aa9
1 parent df75611
commit 9239aa9
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 24 deletions.
diff --git a/fields/InputField.vue b/fields/InputField.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="input-field" :class="inputClasses">
-    <label v-if="label" class="input-field__label" :for="`input-field--${uid}`">
+    <label v-if="label" class="input-field__label" :for="uid">
       {{ label }}
     </label>
     <div class="input-field__input-wrp">
@@ -15,7 +15,7 @@
         ref="inputEl"
         class="input-field__input"
         spellcheck="false"
-        :id="`input-field--${uid}`"
+        :id="uid"
         v-bind="$attrs"
         v-on="listeners"
         :value="modelValue"
@@ -71,6 +71,7 @@ const props = withDefaults(
   defineProps<{
     scheme?: 'primary'
     modelValue: string | number
+    uid?: string
     label?: string
     placeholder?: string
     type?: 'text' | 'number'
@@ -81,6 +82,7 @@ const props = withDefaults(
   {
     scheme: 'primary',
     type: 'text',
+    uid: '',
     label: '',
     placeholder: ' ',
     errorMessage: '',
@@ -98,12 +100,12 @@ const attrs = useAttrs()
 
 const slots = useSlots()
 
-const uid = uuidv4()
-
 const inputEl = ref<HTMLInputElement>()
 const nodeLeftWrp = ref<HTMLDivElement>()
 const nodeRightWrp = ref<HTMLDivElement>()
 
+const uid = computed<string>(() => props.uid || `input-field--${uuidv4()}`)
+
 const isNumberType = computed(() => props.type === 'number')
 
 const hasRightNode = computed<boolean>(() =>

diff --git a/forms/CommonAddressesForm.vue b/forms/CommonAddressesForm.vue
@@ -2,26 +2,46 @@
   <form class="common-addresses-form" @submit.prevent>
     <div class="common-addresses-form__input">
       <h3>{{ $t('common-addresses-form.input-title') }}</h3>
-      <input-field
-        v-for="(_, key) in form"
-        :key="key"
-        readonly
-        :label="$t(`common-addresses-form.${key}-label`)"
-        :model-value="form[key]"
-      >
-        <template #nodeLeft>
-          <app-copy :value="form[key]" />
-          <button
-            v-if="key === 'randomAddress'"
-            @click="form.randomAddress = generateRandomAddress()"
+      <template v-for="(_, key) in form" :key="key">
+        <div v-if="key === 'randomAddress'">
+          <div class="common-addresses-form__label-wrp">
+            <label
+              class="common-addresses-form__label"
+              :for="randomAddressInputFieldUid"
+            >
+              {{ $t(`common-addresses-form.${key}-label`) }}
+            </label>
+            <button
+              v-if="key === 'randomAddress'"
+              @click="form.randomAddress = generateRandomAddress()"
+            >
+              <app-icon
+                class="common-addresses-form__btn-icon"
+                :name="$icons.refresh"
+              />
+            </button>
+          </div>
+          <input-field
+            readonly
+            :model-value="form[key]"
+            :uid="randomAddressInputFieldUid"
           >
-            <app-icon
-              class="common-addresses-form__btn-icon"
-              :name="$icons.refresh"
-            />
-          </button>
-        </template>
-      </input-field>
+            <template #nodeLeft>
+              <app-copy :value="form[key]" />
+            </template>
+          </input-field>
+        </div>
+        <input-field
+          v-else
+          readonly
+          :label="$t(`common-addresses-form.${key}-label`)"
+          :model-value="form[key]"
+        >
+          <template #nodeLeft>
+            <app-copy :value="form[key]" />
+          </template>
+        </input-field>
+      </template>
     </div>
   </form>
 </template>
@@ -30,8 +50,10 @@
 import { AppCopy, AppIcon } from '#components'
 import { InputField } from '@/fields'
 import { Wallet } from 'ethers'
+import { v4 as uuidv4 } from 'uuid'
 import { onMounted, reactive } from 'vue'
 
+const randomAddressInputFieldUid = `input-field--${uuidv4()}`
 const generateRandomAddress = (): string => Wallet.createRandom().address
 
 const form = reactive({
@@ -55,6 +77,19 @@ onMounted(() => {
   @include solidity-tools-form-part;
 }
 
+.common-addresses-form__label-wrp {
+  display: flex;
+  gap: toRem(8);
+  align-items: center;
+  margin-bottom: var(--field-label-margin-bottom);
+}
+
+.common-addresses-form__label {
+  @include field-label;
+
+  margin-bottom: 0;
+}
+
 .common-addresses-form .common-addresses-form__btn-icon {
   height: toRem(16);
   width: toRem(16);

diff --git a/plugins/localization/resources/en.json b/plugins/localization/resources/en.json
@@ -118,7 +118,7 @@
     "zeroAddress-label": "Zero Address",
     "allFsAddress-label": "All Fs Address",
     "allEsAddress-label": "All Es Address",
-    "randomAddress-label": "Random address"
+    "randomAddress-label": "Random Address"
   },
   "date-form": {
     "input-title": "Enter Date and Time",