fixed card display &...

src/views/base/wallet/components/BoursecuBankAccountPicker.vue

@@ -1,56 +1,90 @@
 <template>
-  <div ref="rootRef" class="boursecu-bank-picker">
-    <div class="boursecu-bank-picker__header">
-      <span class="boursecu-bank-picker__heading">واریز به</span>
-      <button type="button" class="boursecu-bank-picker__add" @click="$emit('add-account')">
-        + افزودن شبا
-      </button>
-    </div>
+  <div ref="rootRef" class="boursecu-bank-picker" :class="`boursecu-bank-picker--${variant}`">
+    <template v-if="variant === 'mobile'">
+      <div class="boursecu-bank-picker__header">
+        <span class="boursecu-bank-picker__heading">واریز به</span>
+        <button type="button" class="boursecu-bank-picker__add" @click="$emit('add-account')">
+          + افزودن شبا
+        </button>
+      </div>
 
-    <button
-      type="button"
-      class="boursecu-bank-picker__trigger"
-      :disabled="!items.length"
-      @click="toggleOpen"
-    >
-      <template v-if="selectedCard">
-        <BoursecuBankAccountOption :card="selectedCard" compact />
-        <BasicIcon
-          icon="vuesax-linear:arrow-down"
-          size="18"
-          class="boursecu-bank-picker__chevron"
-          :class="{ 'boursecu-bank-picker__chevron--open': isOpen }"
-        />
-      </template>
-      <span v-else class="boursecu-bank-picker__empty">حساب بانکی ثبت نشده است</span>
-    </button>
-
-    <div v-if="isOpen && items.length" class="boursecu-bank-picker__dropdown">
       <button
-        v-for="card in items"
-        :key="card.id"
         type="button"
-        class="boursecu-bank-picker__option"
-        :class="{ 'boursecu-bank-picker__option--active': card.id === selectedId }"
-        @click="selectCard(card.id)"
+        class="boursecu-bank-picker__trigger"
+        :disabled="!items.length"
+        @click="toggleOpen"
       >
-        <BoursecuBankAccountOption :card="card" />
+        <template v-if="selectedCard">
+          <BoursecuBankAccountOption :card="selectedCard" compact />
+          <BasicIcon
+            icon="vuesax-linear:arrow-down"
+            size="18"
+            class="boursecu-bank-picker__chevron"
+            :class="{ 'boursecu-bank-picker__chevron--open': isOpen }"
+          />
+        </template>
+        <span v-else class="boursecu-bank-picker__empty">حساب بانکی ثبت نشده است</span>
       </button>
-    </div>
+
+      <Teleport to="body">
+        <div v-if="isOpen && items.length" class="boursecu-bank-picker__overlay" @click="close">
+          <div class="boursecu-bank-picker__sheet" @click.stop>
+            <button
+              v-for="card in items"
+              :key="card.id"
+              type="button"
+              class="boursecu-bank-picker__sheet-item"
+              :class="{ 'boursecu-bank-picker__sheet-item--active': card.id === selectedId }"
+              @click="selectCard(card.id)"
+            >
+              <BoursecuBankAccountOption :card="card" />
+            </button>
+          </div>
+        </div>
+      </Teleport>
+    </template>
+
+    <template v-else>
+      <div v-if="!items.length" class="boursecu-bank-picker__empty boursecu-bank-picker__empty--desktop">
+        حساب بانکی ثبت نشده است
+      </div>
+      <div v-else class="boursecu-bank-picker__list">
+        <button
+          v-for="card in items"
+          :key="card.id"
+          type="button"
+          class="boursecu-bank-picker__list-item"
+          :class="{ 'boursecu-bank-picker__list-item--active': card.id === selectedId }"
+          @click="selectCard(card.id)"
+        >
+          <BoursecuBankAccountOption :card="card" />
+          <BasicIcon
+            v-if="card.id === selectedId"
+            icon="vuesax-linear:arrow-up-2"
+            size="18"
+            class="boursecu-bank-picker__list-chevron"
+          />
+        </button>
+      </div>
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { onClickOutside } from '@vueuse/core'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import type { Card } from '@/models/wallet'
 import BoursecuBankAccountOption from './BoursecuBankAccountOption.vue'
 
-const props = defineProps<{
-  items: Card[]
-  id?: number | string
-}>()
+const props = withDefaults(
+  defineProps<{
+    items: Card[]
+    id?: number | string
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
 
 const emit = defineEmits<{
   'update:id': [value: number | string | undefined]
@@ -69,6 +103,20 @@ const selectedCard = computed(() =>
   props.items.find((item) => item.id === selectedId.value) ?? props.items[0],
 )
 
+watch(
+  () => props.items,
+  (items) => {
+    if (!items.length) {
+      selectedId.value = undefined
+      return
+    }
+    if (!items.some((item) => item.id === selectedId.value)) {
+      selectedId.value = items[0]?.id
+    }
+  },
+  { immediate: true },
+)
+
 function toggleOpen() {
   if (!props.items.length) {
     return
@@ -76,13 +124,22 @@ function toggleOpen() {
   isOpen.value = !isOpen.value
 }
 
+function close() {
+  isOpen.value = false
+}
+
 function selectCard(cardId?: number) {
   selectedId.value = cardId
   isOpen.value = false
 }
 
-onClickOutside(rootRef, () => {
-  isOpen.value = false
+if (props.variant === 'mobile') {
+  onClickOutside(rootRef, close)
+}
+
+watch(isOpen, (open) => {
+  if (typeof document === 'undefined') return
+  document.body.style.overflow = open ? 'hidden' : ''
 })
 </script>
 
@@ -153,24 +210,38 @@ onClickOutside(rootRef, () => {
   text-align: center;
   font-size: 0.875rem;
   color: #6b7280;
+
+  &--desktop {
+    padding: 24px 0;
+  }
 }
 
-.boursecu-bank-picker__dropdown {
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
-  left: 0;
-  z-index: 30;
+.boursecu-bank-picker__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 5200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.25rem;
+  background: rgba(15, 23, 42, 0.28);
+  backdrop-filter: blur(2px);
+}
+
+.boursecu-bank-picker__sheet {
+  width: min(100%, 22rem);
+  max-height: min(70vh, 28rem);
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  padding: 8px;
+  gap: 6px;
+  padding: 10px;
   border-radius: 16px;
   background: #fff;
-  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
 }
 
-.boursecu-bank-picker__option {
+.boursecu-bank-picker__sheet-item {
   appearance: none;
   width: 100%;
   border: none;
@@ -180,10 +251,54 @@ onClickOutside(rootRef, () => {
   cursor: pointer;
   text-align: right;
   transition: background-color 0.15s ease;
+
+  &--active,
+  &:hover {
+    background: #eceff1;
+  }
 }
 
-.boursecu-bank-picker__option--active,
-.boursecu-bank-picker__option:hover {
-  background: #eceff1;
+.boursecu-bank-picker--desktop {
+  gap: 0;
+  flex: 1;
+  min-height: 0;
+}
+
+.boursecu-bank-picker__list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 0 24px 24px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.boursecu-bank-picker__list-item {
+  appearance: none;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border: none;
+  border-radius: 12px;
+  background: transparent;
+  padding: 10px 12px;
+  cursor: pointer;
+  text-align: right;
+  transition: background-color 0.15s ease;
+
+  &--active {
+    background: #eceff1;
+  }
+
+  &:hover:not(&--active) {
+    background: #f8fafc;
+  }
+}
+
+.boursecu-bank-picker__list-chevron {
+  flex-shrink: 0;
+  color: #6b7280;
 }
 </style>

src/views/base/wallet/desktop/DesktopWalletView.vue

@@ -131,7 +131,15 @@
             <div class="dwallet-side__header">
               <h3 class="dwallet-side__title">{{ isBoursecu ? 'حساب‌های بانکی' : 'کارت‌های بانکی' }}</h3>
               <button
-                v-if="!isBoursecu"
+                v-if="isBoursecu"
+                type="button"
+                class="dwallet-side__add-link"
+                @click="showAddCard = true"
+              >
+                + افزودن شبا
+              </button>
+              <button
+                v-else
                 type="button"
                 class="dwallet-side__add-btn"
                 @click="showAddCard = true"
@@ -141,6 +149,8 @@
               </button>
             </div>
 
+            <p v-if="isBoursecu && cardItems.length > 0" class="dwallet-side__subtitle">واریز به</p>
+
             <div v-if="!loading && cardItems.length === 0" class="dwallet-side__empty dwallet-side__empty--cards">
               <BasicIcon icon="vuesax-linear:card" size="32" />
               <p>هیچ کارتی یافت نشد</p>
@@ -152,6 +162,7 @@
             <BoursecuBankAccountPicker
               v-else-if="isBoursecu"
               v-model:id="form.card_id"
+              variant="desktop"
               :items="cardItems"
               @add-account="showAddCard = true"
             />

src/views/base/wallet/desktop/styles/desktop-wallet.less

@@ -210,6 +210,27 @@
     margin: 0;
   }
 
+  &__subtitle {
+    margin: 0;
+    padding: 0 24px 8px;
+    font-size: 13px;
+    font-weight: 600;
+    color: #6b7280;
+    text-align: right;
+  }
+
+  &__add-link {
+    appearance: none;
+    border: none;
+    background: transparent;
+    padding: 0;
+    font-size: 14px;
+    font-weight: 700;
+    color: #2563eb;
+    cursor: pointer;
+    font-family: inherit;
+  }
+
   &__scroll {
     flex: 1;
     overflow-y: auto;

src/views/base/wallet/mobile/MobileWalletView.vue

@@ -32,6 +32,7 @@
         <BoursecuBankAccountPicker
           v-if="!isDeposit && isBoursecu"
           v-model:id="form.card_id"
+          variant="mobile"
           :items="cardItems"
           class="mb-4"
           @add-account="showAddCard = true"