refactor: refactor autocomplete component

rotki · May 24, 2024 · 72cc7de · 72cc7de
1 parent 3856b9b
commit 72cc7de
Show file tree

Hide file tree

Showing 84 changed files with 447 additions and 885 deletions.
diff --git a/frontend/app/package.json b/frontend/app/package.json
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@rotki/common": "workspace:*",
-    "@rotki/ui-library-compat": "0.24.0",
+    "@rotki/ui-library-compat": "0.25.2",
     "@types/lodash-es": "4.17.12",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",

diff --git a/frontend/app/src/components/GlobalSearch.vue b/frontend/app/src/components/GlobalSearch.vue
@@ -44,7 +44,6 @@ const { balances } = useAggregatedBalances();
 const { balancesByLocation } = useBalancesBreakdown();
 const { getLocationData } = useLocations();
 const { assetSearch } = useAssetInfoApi();
-const { dark } = useTheme();
 
 function getItemText(item: SearchItemWithoutValue): string {
   const text = item.texts ? item.texts.join(' ') : item.text;
@@ -361,7 +360,7 @@ watch(open, (open) => {
   nextTick(() => {
     if (open) {
       setTimeout(() => {
-        get(input)?.$refs?.input?.focus?.();
+        get(input)?.$refs?.textInput?.focus?.();
       }, 100);
     }
     set(selected, '');
@@ -414,27 +413,37 @@ onBeforeMount(async () => {
         <RuiIcon name="search-line" />
       </MenuTooltipButton>
     </template>
-    <AppBridge>
-      <VAutocomplete
+    <RuiCard
+      variant="flat"
+      no-padding
+      rounded="sm"
+      class="[&>div:last-child]:overflow-hidden"
+    >
+      <RuiAutoComplete
         ref="input"
         v-model="selected"
         no-filter
-        filled
         :no-data-text="t('global_search.no_actions')"
         :search-input.sync="search"
-        :background-color="dark ? 'black' : 'white'"
         hide-details
-        :items="visibleItems"
+        :loading="loading"
+        :item-height="50"
+        :options="visibleItems"
+        text-attr="text"
+        key-attr="value"
+        label=""
         auto-select-first
-        prepend-inner-icon="mdi-magnify"
-        append-icon=""
         :placeholder="t('global_search.search_placeholder')"
         @input="change($event)"
       >
+        <template #selection>
+          <span />
+        </template>
         <template #item="{ item }">
           <div class="flex items-center text-body-2 w-full">
             <AssetIcon
               v-if="item.asset"
+              class="-my-1"
               size="30px"
               :identifier="item.asset"
             />
@@ -453,35 +462,43 @@ onBeforeMount(async () => {
                 contain
                 size="26px"
               />
+              <RuiIcon
+                v-else-if="item.icon"
+                :name="item.icon"
+                size="26px"
+              />
             </template>
-            <span class="ml-3">
+            <div class="ml-3 flex items-center">
               <template v-if="item.texts">
-                <span
+                <div
                   v-for="(text, index) in item.texts"
                   :key="text + index"
+                  class="flex items-center"
                 >
-                  <span v-if="index === item.texts.length - 1">{{ text }}</span>
-                  <span
+                  <div v-if="index === item.texts.length - 1">
+                    {{ text }}
+                  </div>
+                  <div
                     v-else
-                    class="text-rui-text-secondary"
+                    class="flex items-center text-rui-text-secondary"
                   >
                     {{ text }}
                     <RuiIcon
-                      class="d-inline mr-2"
+                      class="d-inline mx-2"
                       size="16"
                       name="arrow-right-s-line"
                     />
-                  </span>
-                </span>
+                  </div>
+                </div>
               </template>
               <template v-else>
                 {{ item.text }}
               </template>
-            </span>
+            </div>
             <div class="grow" />
             <div
               v-if="item.price"
-              class="text-right"
+              class="text-right -my-6"
             >
               <div class="text-caption">
                 {{ t('common.price') }}:
@@ -494,7 +511,7 @@ onBeforeMount(async () => {
             </div>
             <div
               v-if="item.total"
-              class="text-right"
+              class="text-right -my-4"
             >
               <div class="text-caption">
                 {{ t('common.total') }}:
@@ -507,22 +524,7 @@ onBeforeMount(async () => {
             </div>
           </div>
         </template>
-        <template #append>
-          <div
-            v-if="loading"
-            class="h-full flex items-center"
-          >
-            <RuiProgress
-              class="asset-select__loading"
-              circular
-              color="primary"
-              variant="indeterminate"
-              thickness="2"
-              size="20"
-            />
-          </div>
-        </template>
-      </VAutocomplete>
-    </AppBridge>
+      </RuiAutoComplete>
+    </RuiCard>
   </RuiDialog>
 </template>
diff --git a/frontend/app/src/components/account-management/login/LoginForm.vue b/frontend/app/src/components/account-management/login/LoginForm.vue
@@ -359,24 +359,29 @@ function abortLogin() {
               data-cy="username-input"
               dense
             />
-            <VAutocomplete
+            <RuiAutoComplete
               v-else
               ref="usernameRef"
               v-model="username"
               :search-input.sync="usernameSearch"
               :label="t('login.label_username')"
-              :items="orderedUsernamesList"
+              :options="orderedUsernamesList"
               :disabled="loading || conflictExist || customBackendDisplay"
               :error-messages="usernameErrors"
               data-cy="username-input"
               class="mb-2"
               auto-select-first
-              validate-on-blur
               :hide-no-data="savedUsernames.length > 0"
               clearable
-              outlined
+              variant="outlined"
+              :item-height="38"
               dense
             >
+              <template #item="{ item }">
+                <div class="py-1">
+                  {{ item }}
+                </div>
+              </template>
               <template #no-data>
                 <div class="px-4 py-2 text-body-2 font-medium">
                   <i18n path="login.no_profiles_found">
@@ -395,7 +400,7 @@ function abortLogin() {
                   </i18n>
                 </div>
               </template>
-            </VAutocomplete>
+            </RuiAutoComplete>
 
             <RuiRevealableTextField
               ref="passwordRef"

diff --git a/frontend/app/src/components/accounts/blockchain/ChainDisplay.vue b/frontend/app/src/components/accounts/blockchain/ChainDisplay.vue
@@ -19,13 +19,17 @@ const name = getChainName(chain);
 
 <template>
   <ListItem
-    :size="dense ? 'sm' : 'md'"
+    size="sm"
     :title="name"
     no-padding
     no-hover
+    class="!py-0"
   >
     <template #avatar>
-      <ChainIcon :chain="chain" />
+      <ChainIcon
+        :chain="chain"
+        :size="dense ? '20px' : '26px'"
+      />
     </template>
   </ListItem>
 </template>
diff --git a/frontend/app/src/components/accounts/blockchain/ChainSelect.vue b/frontend/app/src/components/accounts/blockchain/ChainSelect.vue
@@ -39,8 +39,6 @@ const { isEvm, supportedChains } = useSupportedChains();
 
 const { t } = useI18n();
 
-const search = ref<string | null>(null);
-
 const filteredItems = computed(() => {
   const isEth2Enabled = get(isModuleEnabled(Module.ETH2));
 
@@ -59,62 +57,45 @@ const filteredItems = computed(() => {
   return data;
 });
 
-function clearSearch() {
-  set(search, '');
-}
-
 function updateBlockchain(blockchain: Blockchain) {
-  clearSearch();
   emit('update:model-value', blockchain);
 }
 
-function filter(chain: Blockchain, queryText: string) {
-  const item = get(supportedChains).find(blockchain => blockchain.id === chain);
-  if (!item)
-    return false;
-
-  const nameIncludes = item.name
-    .toLocaleLowerCase()
-    .includes(queryText.toLocaleLowerCase());
-
-  const idIncludes = item.id
-    .toLocaleLowerCase()
-    .includes(queryText.toLocaleLowerCase());
-
-  return nameIncludes || idIncludes;
-}
+const mappedOptions = computed(() => {
+  const filtered = get(filteredItems);
+  return get(supportedChains).filter(item => filtered.includes(item.id));
+});
 </script>
 
 <template>
-  <VAutocomplete
+  <RuiAutoComplete
     :dense="dense"
     :disabled="disabled"
-    :filter="filter"
-    :items="filteredItems"
+    :options="mappedOptions"
     :label="t('account_form.labels.blockchain')"
-    :search-input.sync="search"
     :value="modelValue"
     data-cy="account-blockchain-field"
-    outlined
+    variant="outlined"
     auto-select-first
-    single-line
+    key-attr="id"
+    text-attr="name"
+    :item-height="dense ? 48 : 56"
     v-bind="rootAttrs"
-    @change="updateBlockchain($event)"
-    @blur="clearSearch()"
+    @input="updateBlockchain($event)"
   >
     <template #selection="{ item }">
       <ChainDisplay
-        v-if="!search"
-        :chain="item"
+        :class="{ '-my-1': dense }"
         :dense="dense"
-        class="!py-0"
+        :chain="item.id"
       />
     </template>
     <template #item="{ item }">
       <ChainDisplay
-        :chain="item"
+        :class="{ 'my-1': dense }"
         :dense="dense"
+        :chain="item.id"
       />
     </template>
-  </VAutocomplete>
+  </RuiAutoComplete>
 </template>
diff --git a/frontend/app/src/components/accounts/blockchain/XpubInput.vue b/frontend/app/src/components/accounts/blockchain/XpubInput.vue
@@ -154,13 +154,9 @@ defineExpose({
         class="account-form__xpub-key-type flex-1"
         key-attr="value"
         text-attr="label"
-        full-width
+        hide-details
         variant="outlined"
-      >
-        <template #activator.text="{ value }">
-          {{ value.label }}
-        </template>
-      </RuiMenuSelect>
+      />
       <RuiTextField
         v-model="xpubKey"
         variant="outlined"

diff --git a/frontend/app/src/components/accounts/management/inputs/AccountSelector.vue b/frontend/app/src/components/accounts/management/inputs/AccountSelector.vue
@@ -39,7 +39,6 @@ function updateModelValue(value: string | null) {
     <ChainSelect
       :disabled="loading || editMode"
       :model-value="chain"
-      :clearable="false"
       @update:model-value="updateModelValue($event)"
     />
 

diff --git a/frontend/app/src/components/accounts/manual-balances/ManualBalancesForm.vue b/frontend/app/src/components/accounts/manual-balances/ManualBalancesForm.vue
@@ -296,9 +296,6 @@ onMounted(() => {
     <LocationSelector
       v-model="location"
       class="manual-balances-form__location"
-      attach=".manual-balances-form__location"
-      :menu-props="{ top: true }"
-      outlined
       :error-messages="toMessages(v$.location)"
       :disabled="submitting"
       :label="t('common.location')"

diff --git a/frontend/app/src/components/address-book-manager/AddressBookForm.vue b/frontend/app/src/components/address-book-manager/AddressBookForm.vue
@@ -111,7 +111,6 @@ onMounted(fetchNames);
       :disabled="edit"
       key-attr="key"
       text-attr="label"
-      full-width
       variant="outlined"
     />
     <RuiSwitch

diff --git a/frontend/app/src/components/address-book-manager/AddressBookManagement.vue b/frontend/app/src/components/address-book-manager/AddressBookManagement.vue
@@ -175,14 +175,14 @@ watch(formPayload, ({ blockchain }, { blockchain: oldBlockchain }) => {
         <ChainSelect
           :model-value="selectedChain"
           hide-details
-          class="flex-1 max-w-full md:max-w-[15rem]"
+          class="flex-1 max-w-full md:max-w-[18rem]"
           clearable
           dense
           exclude-eth-staking
           @update:model-value="selectedChain = $event"
         />
 
-        <div class="max-w-[25rem]">
+        <div class="w-[20rem] max-w-[30rem]">
           <TableFilter
             :matchers="matchers"
             :matches="filters"

diff --git a/frontend/app/src/components/asset-manager/UnderlyingTokenManager.vue b/frontend/app/src/components/asset-manager/UnderlyingTokenManager.vue
@@ -123,7 +123,6 @@ function resetForm() {
           :options="evmTokenKindsData"
           key-attr="identifier"
           text-attr="label"
-          full-width
           variant="outlined"
         />
       </div>