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,99 @@
+<template>
+  <div class="boursecu-bank-option" :class="{ 'boursecu-bank-option--compact': compact }">
+    <div class="boursecu-bank-option__logo" :style="{ backgroundColor: accentColor }">
+      <span>{{ monogram }}</span>
+    </div>
+    <div class="boursecu-bank-option__content">
+      <div class="boursecu-bank-option__title">{{ card.bank_name || 'بانک' }}</div>
+      <div class="boursecu-bank-option__sheba">{{ shebaText }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Card } from '@/models/wallet'
+import {
+  formatShebaForDisplay,
+  getBankAccentColor,
+  getBankMonogram,
+} from '@/utils/bankBranding'
+
+const props = withDefaults(
+  defineProps<{
+    card: Card
+    compact?: boolean
+  }>(),
+  { compact: false },
+)
+
+const accentColor = computed(() => getBankAccentColor(props.card.bank_name))
+const monogram = computed(() => getBankMonogram(props.card.bank_name))
+const shebaText = computed(() => formatShebaForDisplay(props.card.shaba_number))
+</script>
+
+<style scoped lang="less">
+.boursecu-bank-option {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  min-width: 0;
+}
+
+.boursecu-bank-option__logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  color: #fff;
+  font-size: 0.72rem;
+  font-weight: 800;
+  line-height: 1.1;
+  text-align: center;
+  padding: 4px;
+}
+
+.boursecu-bank-option--compact .boursecu-bank-option__logo {
+  width: 38px;
+  height: 38px;
+}
+
+.boursecu-bank-option__content {
+  min-width: 0;
+  flex: 1;
+  text-align: right;
+}
+
+.boursecu-bank-option__title {
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: #111827;
+  line-height: 1.3;
+}
+
+.boursecu-bank-option--compact .boursecu-bank-option__title {
+  font-size: 0.875rem;
+}
+
+.boursecu-bank-option__sheba {
+  margin-top: 4px;
+  font-size: 1rem;
+  font-weight: 700;
+  color: #111827;
+  direction: ltr;
+  text-align: right;
+  letter-spacing: 0.01em;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.boursecu-bank-option--compact .boursecu-bank-option__sheba {
+  font-size: 0.92rem;
+}
+</style>