381 lines
8.5 KiB
Vue
381 lines
8.5 KiB
Vue
<template>
|
|
<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>
|
|
|
|
<Teleport to="body">
|
|
<div v-if="isOpen && items.length" class="boursecu-bank-picker__overlay" @click="close">
|
|
<div class="boursecu-bank-picker__sheet" @click.stop>
|
|
<div
|
|
v-for="card in items"
|
|
:key="card.id"
|
|
class="boursecu-bank-picker__sheet-item"
|
|
:class="{ 'boursecu-bank-picker__sheet-item--active': card.id === selectedId }"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="boursecu-bank-picker__sheet-select"
|
|
@click="selectCard(card.id)"
|
|
>
|
|
<BoursecuBankAccountOption :card="card" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="boursecu-bank-picker__delete"
|
|
aria-label="حذف حساب"
|
|
@click.stop="requestDelete(card)"
|
|
>
|
|
<BasicIcon icon="vuesax-linear:trash" size="18" />
|
|
</button>
|
|
</div>
|
|
</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">
|
|
<div
|
|
v-for="card in items"
|
|
:key="card.id"
|
|
class="boursecu-bank-picker__list-item"
|
|
:class="{ 'boursecu-bank-picker__list-item--active': card.id === selectedId }"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="boursecu-bank-picker__list-select"
|
|
@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>
|
|
<button
|
|
type="button"
|
|
class="boursecu-bank-picker__delete"
|
|
aria-label="حذف حساب"
|
|
@click.stop="requestDelete(card)"
|
|
>
|
|
<BasicIcon icon="vuesax-linear:trash" size="18" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
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 { deleteCard } from '@/api/wallet'
|
|
import { confirmDeleteItem } from '@/utils/useConfirm'
|
|
import BoursecuBankAccountOption from './BoursecuBankAccountOption.vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
items: Card[]
|
|
id?: number | string
|
|
variant?: 'mobile' | 'desktop'
|
|
}>(),
|
|
{ variant: 'mobile' },
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
'update:id': [value: number | string | undefined]
|
|
'add-account': []
|
|
'card-deleted': []
|
|
}>()
|
|
|
|
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],
|
|
)
|
|
|
|
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
|
|
}
|
|
isOpen.value = !isOpen.value
|
|
}
|
|
|
|
function close() {
|
|
isOpen.value = false
|
|
}
|
|
|
|
function selectCard(cardId?: number) {
|
|
selectedId.value = cardId
|
|
isOpen.value = false
|
|
}
|
|
|
|
function requestDelete(card: Card) {
|
|
if (card.id == null) {
|
|
return
|
|
}
|
|
|
|
confirmDeleteItem('این حساب بانکی', card.id, deleteCard, () => {
|
|
emit('card-deleted')
|
|
})
|
|
}
|
|
|
|
if (props.variant === 'mobile') {
|
|
onClickOutside(rootRef, close)
|
|
}
|
|
|
|
watch(isOpen, (open) => {
|
|
if (typeof document === 'undefined') return
|
|
document.body.style.overflow = open ? 'hidden' : ''
|
|
})
|
|
</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;
|
|
|
|
&--desktop {
|
|
padding: 24px 0;
|
|
}
|
|
}
|
|
|
|
.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: 6px;
|
|
padding: 10px;
|
|
border-radius: 16px;
|
|
background: #fff;
|
|
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
|
|
}
|
|
|
|
.boursecu-bank-picker__sheet-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
border-radius: 12px;
|
|
transition: background-color 0.15s ease;
|
|
|
|
&--active,
|
|
&:hover {
|
|
background: #eceff1;
|
|
}
|
|
}
|
|
|
|
.boursecu-bank-picker__sheet-select {
|
|
appearance: none;
|
|
flex: 1;
|
|
min-width: 0;
|
|
border: none;
|
|
background: transparent;
|
|
padding: 10px 0 10px 12px;
|
|
cursor: pointer;
|
|
text-align: right;
|
|
}
|
|
|
|
.boursecu-bank-picker__delete {
|
|
appearance: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
width: 36px;
|
|
height: 36px;
|
|
margin-inline-end: 8px;
|
|
border: none;
|
|
border-radius: 10px;
|
|
background: transparent;
|
|
color: #dc2626;
|
|
cursor: pointer;
|
|
transition: background-color 0.15s ease, color 0.15s ease;
|
|
|
|
&:hover {
|
|
background: rgba(220, 38, 38, 0.08);
|
|
color: #b91c1c;
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
border-radius: 12px;
|
|
transition: background-color 0.15s ease;
|
|
|
|
&--active {
|
|
background: #eceff1;
|
|
}
|
|
|
|
&:hover:not(&--active) {
|
|
background: #f8fafc;
|
|
}
|
|
}
|
|
|
|
.boursecu-bank-picker__list-select {
|
|
appearance: none;
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
border: none;
|
|
border-radius: 12px;
|
|
background: transparent;
|
|
padding: 10px 0 10px 12px;
|
|
cursor: pointer;
|
|
text-align: right;
|
|
}
|
|
|
|
.boursecu-bank-picker__list-chevron {
|
|
flex-shrink: 0;
|
|
color: #6b7280;
|
|
}
|
|
</style>
|