Editing of the project's Kariz page

apps/web/src/components/pipeline/PipelineColumn.vue

@@ -3,17 +3,21 @@ import { nextTick, onBeforeUnmount, ref, watch } from 'vue';
 import UiIcon from '@/components/UiIcon.vue';
 import AddDealButton from './AddDealButton.vue';
 import DealCard from './DealCard.vue';
-import type { PipelineDeal, PipelineStage } from '@/lib/pipeline-board';
-import { PIPELINE_ACCENT, toFaDealCount } from '@/lib/pipeline-board';
+import type { PipelineDeal, PipelineStage, PipelineUiCopy } from '@/lib/pipeline-board';
+import { DEAL_BOARD_COPY, PIPELINE_ACCENT, toFaItemCount } from '@/lib/pipeline-board';
 
-const props = defineProps<{
-  stage: PipelineStage;
-  draggingId: string | null;
-  dropActive: boolean;
-  canManage?: boolean;
-  isFirst?: boolean;
-  isLast?: boolean;
-}>();
+const props = withDefaults(
+  defineProps<{
+    stage: PipelineStage;
+    draggingId: string | null;
+    dropActive: boolean;
+    canManage?: boolean;
+    isFirst?: boolean;
+    isLast?: boolean;
+    copy?: PipelineUiCopy;
+  }>(),
+  { copy: () => DEAL_BOARD_COPY },
+);
 
 const emit = defineEmits<{
   dragStart: [deal: PipelineDeal, event: DragEvent];
@@ -150,7 +154,7 @@ onBeforeUnmount(() => {
           {{ stage.title }}
         </h2>
       </div>
-      <span class="count">{{ toFaDealCount(stage.deals.length) }}</span>
+      <span class="count">{{ toFaItemCount(stage.deals.length, copy.itemNoun) }}</span>
       <div v-if="canManage" ref="menuRoot" class="more-wrap">
         <button
           type="button"
@@ -194,7 +198,7 @@ onBeforeUnmount(() => {
       <button
         type="button"
         class="plus"
-        aria-label="افزودن معامله به این مرحله"
+        :aria-label="copy.addItemAria"
         @click="emit('addDeal', stage.id)"
       >
         <UiIcon name="plus" :size="16" />
@@ -213,16 +217,17 @@ onBeforeUnmount(() => {
           :deal="deal"
           :accent="stage.color"
           :dragging="draggingId === deal.id"
+          :copy="copy"
           @drag-start="(d, e) => emit('dragStart', d, e)"
           @drag-end="emit('dragEnd')"
           @open="emit('openDeal', $event)"
           @menu="emit('menuDeal', $event)"
         />
       </div>
-      <p v-if="!stage.deals.length" class="empty">معامله‌ای نیست</p>
+      <p v-if="!stage.deals.length" class="empty">{{ copy.empty }}</p>
     </div>
 
-    <AddDealButton :accent="stage.color" @add="emit('addDeal', stage.id)" />
+    <AddDealButton :accent="stage.color" :label="copy.addItem" @add="emit('addDeal', stage.id)" />
   </section>
 </template>