changes of boursecu

2026-06-29 11:20:02 +02:00
parent 809bd69068
commit 2583becda7
21 changed files with 748 additions and 261 deletions
@@ -0,0 +1,189 @@
+<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>
+
+    <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)"
+      >
+        <BoursecuBankAccountOption :card="card" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } 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 emit = defineEmits<{
+  'update:id': [value: number | string | undefined]
+  'add-account': []
+}>()
+
+const rootRef = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+
+const selectedId = computed({
+  get: () => props.id,
+  set: (value) => emit('update:id', value),
+})
+
+const selectedCard = computed(() =>
+  props.items.find((item) => item.id === selectedId.value) ?? props.items[0],
+)
+
+function toggleOpen() {
+  if (!props.items.length) {
+    return
+  }
+  isOpen.value = !isOpen.value
+}
+
+function selectCard(cardId?: number) {
+  selectedId.value = cardId
+  isOpen.value = false
+}
+
+onClickOutside(rootRef, () => {
+  isOpen.value = false
+})
+</script>
+
+<style scoped lang="less">
+.boursecu-bank-picker {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  z-index: 1;
+}
+
+.boursecu-bank-picker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.boursecu-bank-picker__heading {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #6b7280;
+}
+
+.boursecu-bank-picker__add {
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 0;
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: #2563eb;
+  cursor: pointer;
+}
+
+.boursecu-bank-picker__trigger {
+  appearance: none;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border: none;
+  border-radius: 14px;
+  background: #eceff1;
+  cursor: pointer;
+  text-align: right;
+}
+
+.boursecu-bank-picker__trigger:disabled {
+  cursor: default;
+}
+
+.boursecu-bank-picker__chevron {
+  flex-shrink: 0;
+  color: #6b7280;
+  transition: transform 0.2s ease;
+}
+
+.boursecu-bank-picker__chevron--open {
+  transform: rotate(180deg);
+}
+
+.boursecu-bank-picker__empty {
+  width: 100%;
+  text-align: center;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.boursecu-bank-picker__dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  left: 0;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
+}
+
+.boursecu-bank-picker__option {
+  appearance: none;
+  width: 100%;
+  border: none;
+  border-radius: 12px;
+  background: transparent;
+  padding: 10px 12px;
+  cursor: pointer;
+  text-align: right;
+  transition: background-color 0.15s ease;
+}
+
+.boursecu-bank-picker__option--active,
+.boursecu-bank-picker__option:hover {
+  background: #eceff1;
+}
+</style>