Skip to content

Commit

Permalink
feat: reusable component for selecting account from a dropdown while …
Browse files Browse the repository at this point in the history 
…typing
  • Loading branch information
Alexandros Kalogerakis committed Oct 25, 2024
1 parent e1fde63 commit e086f7e
Show file tree
Hide file tree
Showing 7 changed files with 351 additions and 79 deletions.
36 changes: 29 additions & 7 deletions src/popup/components/InputField.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
<div
class="input-field"
:class="{
error: hasError,
warning: hasWarning,
error: hasError && (!hideError || !focused),
warning: hasWarning && (!hideError || !focused),
readonly,
code,
focused,
Expand Down Expand Up @@ -44,8 +44,13 @@
<label
data-cy="input-wrapper"
class="input-wrapper"
@click="$emit('click', $event)"
@click="handleLabelClick"
@focusin="focused = true"
@focusout="focused = false"
>
<slot
name="before-main"
/>
<div class="main-inner">
<slot
v-if="!hasError && !hasWarning"
Expand Down Expand Up @@ -76,8 +81,6 @@
:autocapitalize="autoCapitalize"
@input="handleInput"
@keydown="checkIfNumber"
@focusin="focused = true"
@focusout="focused = false"
>
</slot>
<slot
Expand All @@ -97,6 +100,7 @@
<div
v-if="showMessage"
class="message"
:class="{ hidden: (hideError && focused) }"
data-cy="input-message"
>
<label
Expand Down Expand Up @@ -167,6 +171,10 @@ export default defineComponent({
type: Number,
default: null,
},
/** Forces the error to be hidden, i.e. when the autocomplete dropdown is open */
hideError: Boolean,
/** Makes the label not clickable to prevent unwanted presses on buttons inside the label */
disableLabelFocus: Boolean,
},
emits: [
'update:modelValue',
Expand Down Expand Up @@ -228,6 +236,13 @@ export default defineComponent({
emit('update:modelValue', props.type === 'number' ? value?.replace(',', '.') : value);
}
function handleLabelClick(event: Event) {
if (props.disableLabelFocus) {
event.preventDefault();
}
emit('click', event);
}
watch(
() => focused.value,
(val) => emit('focus-change', val),
Expand Down Expand Up @@ -268,6 +283,7 @@ export default defineComponent({
availableTextLimit,
checkIfNumber,
handleInput,
handleLabelClick,
};
},
});
Expand Down Expand Up @@ -326,6 +342,7 @@ export default defineComponent({
@extend %face-sans-15-regular;
margin-left: auto;
margin-right: 2px;
user-select: none;
color: $color-grey-dark;
Expand All @@ -336,12 +353,12 @@ export default defineComponent({
}
.input-wrapper {
position: relative;
display: block;
padding: 10px 12px; // Decides on the input size
padding: 10px 8px 12px 10px; // Decides on the input size
background-color: var(--color-bg);
border: none;
border-radius: $border-radius-interactive;
overflow: hidden;
box-shadow: inset 0 0 0 2px var(--color-border);
transition: 100ms ease-in-out;
cursor: text;
Expand All @@ -350,6 +367,7 @@ export default defineComponent({
display: flex;
align-items: center;
width: 100%;
gap: 6px;
:deep(.icon) {
width: var(--size, 24px);
Expand Down Expand Up @@ -413,6 +431,10 @@ export default defineComponent({
padding-left: 5px;
color: rgba($color-black, 0.75);
}
&.hidden {
visibility: hidden;
}
}
&.error {
Expand Down
108 changes: 52 additions & 56 deletions src/popup/components/Modals/MultisigVaultCreate.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,17 +34,17 @@
<Field
v-else
v-slot="{ field, errorMessage }"
v-model.trim="signer.address"
v-model="signer.address"
:name="`signer-address-${index}`"
:rules="{
required: true,
account_address: [PROTOCOLS.aeternity],
}"
>
<FormTextarea
<FormAccountInput
v-bind="field"
:model-value="signer.address"
auto-height
hide-clear-icon
:label="getSignerLabel(index)"
:placeholder="$t('modals.createMultisigAccount.signerInputPlaceholder')"
:name="`signer-address-${index}`"
Expand All @@ -66,15 +66,27 @@
</div>
</template>
<template #after>
<BtnPlain
v-if="index >= MULTISIG_VAULT_MIN_NUM_OF_SIGNERS"
class="btn-remove-signer"
<BtnIcon
v-if="(
signers.length > MULTISIG_VAULT_MIN_NUM_OF_SIGNERS
&& (!signer.address || signer.address.length === 0)
)"
:icon="TrashIcon"
data-cy="clear-address-button"
class="close-icon"
size="sm"
@click="removeSigner(index)"
>
<PlusCircleIcon class="remove-signer-icon" />
</BtnPlain>
/>
<BtnIcon
v-if="signer.address?.length > 0"
:icon="CircleCloseIcon"
data-cy="clear-address-button"
class="close-icon"
size="sm"
@click="clearSigner(index)"
/>
</template>
</FormTextarea>
</FormAccountInput>
</Field>
</div>
Expand Down Expand Up @@ -196,18 +208,9 @@ import {
} from 'vee-validate';
import { Encoded } from '@aeternity/aepp-sdk';
import {
MODAL_ADDRESS_BOOK_ACCOUNT_SELECTOR,
PROTOCOLS,
} from '@/constants';
import {
excludeFalsy,
handleUnknownError,
} from '@/utils';
import type {
ICreateMultisigAccount,
ObjectValues,
} from '@/types';
import type { ICreateMultisigAccount, ObjectValues } from '@/types';
import { MODAL_ADDRESS_BOOK_ACCOUNT_SELECTOR, PROTOCOLS } from '@/constants';
import { excludeFalsy, handleUnknownError } from '@/utils';
import { ROUTE_MULTISIG_ACCOUNT } from '@/popup/router/routeNames';
import {
useAccounts,
Expand All @@ -221,21 +224,21 @@ import {
MULTISIG_VAULT_MIN_NUM_OF_SIGNERS,
} from '@/protocols/aeternity/config';
import Modal from '../Modal.vue';
import BtnMain from '../buttons/BtnMain.vue';
import BtnPlain from '../buttons/BtnPlain.vue';
import BtnIcon from '../buttons/BtnIcon.vue';
import BtnText from '../buttons/BtnText.vue';
import BtnHelp from '../buttons/BtnHelp.vue';
import FormSelect from '../form/FormSelect.vue';
import FormTextarea from '../form/FormTextarea.vue';
import FormNumberSelect from '../form/FormNumberSelect.vue';
import MultisigVaultCreateReview from '../MultisigVaultCreateReview.vue';
import MultisigVaultCreateProgress from '../MultisigVaultCreateProgress.vue';
import QrScanIcon from '../../../icons/qr-scan.svg?vue-component';
import PlusCircleIcon from '../../../icons/plus-circle-fill.svg?vue-component';
import AddressBookIcon from '../../../icons/menu-card-fill.svg?vue-component';
import FormAccountInput from '@/popup/components/form/FormAccountInput.vue';
import Modal from '@/popup/components/Modal.vue';
import BtnMain from '@/popup/components/buttons/BtnMain.vue';
import BtnIcon from '@/popup/components/buttons/BtnIcon.vue';
import BtnText from '@/popup/components/buttons/BtnText.vue';
import BtnHelp from '@/popup/components/buttons/BtnHelp.vue';
import FormSelect from '@/popup/components/form/FormSelect.vue';
import FormNumberSelect from '@/popup/components/form/FormNumberSelect.vue';
import MultisigVaultCreateReview from '@/popup/components/MultisigVaultCreateReview.vue';
import MultisigVaultCreateProgress from '@/popup/components/MultisigVaultCreateProgress.vue';
import TrashIcon from '@/icons/trash.svg?vue-component';
import CircleCloseIcon from '@/icons/circle-close.svg?vue-component';
import QrScanIcon from '@/icons/qr-scan.svg?vue-component';
import AddressBookIcon from '@/icons/menu-card-fill.svg?vue-component';
const STEPS = {
form: 'form',
Expand All @@ -247,11 +250,10 @@ type Step = ObjectValues<typeof STEPS>;
export default defineComponent({
name: 'MultisigVaultCreate',
components: {
FormAccountInput,
FormNumberSelect,
FormTextarea,
Modal,
BtnMain,
BtnPlain,
BtnIcon,
BtnText,
BtnHelp,
Expand All @@ -260,7 +262,6 @@ export default defineComponent({
FormSelect,
Field,
Form,
PlusCircleIcon,
},
props: {
resolve: { type: Function as PropType<() => void>, required: true },
Expand Down Expand Up @@ -334,6 +335,10 @@ export default defineComponent({
signers.value.splice(index, 1);
}
function clearSigner(index: number) {
signers.value[index].address = undefined;
}
function updateSigner(index: number, address: Encoded.AccountAddress) {
// Check if signer address already added
if (
Expand Down Expand Up @@ -457,9 +462,10 @@ export default defineComponent({
);
return {
TrashIcon,
CircleCloseIcon,
QrScanIcon,
AddressBookIcon,
PlusCircleIcon,
MULTISIG_VAULT_MIN_NUM_OF_SIGNERS,
MULTISIG_CREATION_PHASES,
PROTOCOLS,
Expand All @@ -484,6 +490,7 @@ export default defineComponent({
scanSignerAccountQrCode,
addNewSigner,
removeSigner,
clearSigner,
getSignerLabel,
navigateToMultisigVault,
checkIfSignerAddressDuplicated,
Expand Down Expand Up @@ -516,21 +523,10 @@ export default defineComponent({
}
}
.btn-remove-signer {
display: flex;
.remove-signer-icon {
width: 20px !important;
margin: -4px -6px -4px 0;
transform: rotate(45deg);
cursor: pointer;
transition: $transition-interactive;
color: $color-grey-light;
&:hover {
opacity: 0.8;
}
}
.close-icon {
padding: 0;
opacity: 0.5;
z-index: 0;
}
.buttons {
Expand Down
19 changes: 10 additions & 9 deletions src/popup/components/TransferSend/TransferSendRecipient.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@
...validationRules,
}"
>
<FormTextarea
<FormAccountInput
v-bind="field"
:model-value="modelValue"
name="address"
data-cy="address"
auto-height
show-help
show-message-help
:protocol="protocol"
:label="$t('modals.send.recipientLabel')"
:placeholder="placeholder"
:message="addressMessage"
Expand All @@ -39,7 +39,7 @@
/>
</div>
</template>
</FormTextarea>
</FormAccountInput>
</Field>
<div
v-if="isTipUrl"
Expand All @@ -60,23 +60,24 @@ import { Field } from 'vee-validate';
import type { Protocol, IInputMessage } from '@/types';
import { getMessageByFieldName } from '@/utils';
import { MODAL_ADDRESS_BOOK_ACCOUNT_SELECTOR, MODAL_RECIPIENT_INFO, PROTOCOLS } from '@/constants';
import {
useAccounts,
useModals,
} from '@/composables';
MODAL_ADDRESS_BOOK_ACCOUNT_SELECTOR,
MODAL_RECIPIENT_INFO,
PROTOCOLS,
} from '@/constants';
import { useAccounts, useModals } from '@/composables';
import { useAeTippingUrls } from '@/protocols/aeternity/composables';
import UrlStatus from '@/popup/components/UrlStatus.vue';
import FormTextarea from '@/popup/components/form/FormTextarea.vue';
import BtnIcon from '@/popup/components/buttons/BtnIcon.vue';
import QrScanIcon from '@/icons/qr-scan.svg?vue-component';
import AddressBookIcon from '@/icons/menu-card-fill.svg?vue-component';
import FormAccountInput from '@/popup/components/form/FormAccountInput.vue';
export default defineComponent({
components: {
FormTextarea,
FormAccountInput,
UrlStatus,
Field,
BtnIcon,
Expand Down
4 changes: 2 additions & 2 deletions src/popup/components/Truncate.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,8 +155,8 @@ export default defineComponent({
linear-gradient(
90deg,
rgba(black, 0) 0%,
rgba(black, 1) 2px,
rgba(black, 1) calc(100% - 2px),
rgba(black, 1) 4px,
rgba(black, 1) calc(100% - 4px),
rgba(black, 0) 100%
);
Expand Down
Loading

0 comments on commit e086f7e

Please sign in to comment.