Unify the web UI on shared controls and let pipeline columns be managed on the board.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import UiButton from '@/components/ui/UiButton.vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import type { PipelineAccent } from '@/lib/pipeline-board';
|
||||
import { PIPELINE_ACCENT } from '@/lib/pipeline-board';
|
||||
@@ -13,48 +14,15 @@ const emit = defineEmits<{
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
<UiButton
|
||||
variant="dashed"
|
||||
block
|
||||
class="add-deal"
|
||||
:style="{
|
||||
'--add-color': PIPELINE_ACCENT[accent].text,
|
||||
'--add-border': PIPELINE_ACCENT[accent].solid,
|
||||
'--add-soft': PIPELINE_ACCENT[accent].soft,
|
||||
}"
|
||||
:style="{ color: PIPELINE_ACCENT[accent].text }"
|
||||
aria-label="افزودن معامله"
|
||||
@click="emit('add')"
|
||||
>
|
||||
<UiIcon name="plus" :size="16" />
|
||||
افزودن معامله
|
||||
</button>
|
||||
</UiButton>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.add-deal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
width: 100%;
|
||||
margin-top: 0.15rem;
|
||||
padding: 0.9rem 1rem;
|
||||
border: 1.5px dashed var(--add-border);
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
color: var(--add-color);
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.add-deal:hover {
|
||||
background: var(--add-soft);
|
||||
}
|
||||
|
||||
.add-deal:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -38,52 +38,50 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
|
||||
@dragend="emit('dragEnd')"
|
||||
@dblclick="emit('open', deal.id)"
|
||||
>
|
||||
<div class="top">
|
||||
<div class="identity">
|
||||
<span class="badge" aria-hidden="true">{{ deal.initials }}</span>
|
||||
<div class="titles">
|
||||
<h3 @click.stop="emit('open', deal.id)">{{ deal.title }}</h3>
|
||||
<p v-if="deal.description" class="desc">{{ deal.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="menu"
|
||||
aria-label="گزینههای معامله"
|
||||
@click.stop="emit('menu', deal.id)"
|
||||
>
|
||||
<UiIcon name="dots-v" :size="18" />
|
||||
</button>
|
||||
<span class="badge" aria-hidden="true">{{ deal.initials }}</span>
|
||||
<div class="titles">
|
||||
<h3 @click.stop="emit('open', deal.id)">{{ deal.title }}</h3>
|
||||
<p v-if="deal.description" class="desc">{{ deal.description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="meta">
|
||||
<div class="who">
|
||||
<img
|
||||
class="avatar"
|
||||
src="/brand/user-avatar.png"
|
||||
alt=""
|
||||
width="28"
|
||||
height="28"
|
||||
/>
|
||||
<span class="date">
|
||||
<UiIcon name="calendar" :size="14" />
|
||||
{{ deal.date }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="amount" dir="ltr">
|
||||
<strong>{{ money.number }}</strong>
|
||||
<span>{{ money.unit }}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="menu"
|
||||
aria-label="گزینههای معامله"
|
||||
@click.stop="emit('menu', deal.id)"
|
||||
>
|
||||
<UiIcon name="dots-v" :size="16" />
|
||||
</button>
|
||||
<img
|
||||
class="avatar"
|
||||
src="/brand/user-avatar.png"
|
||||
alt=""
|
||||
width="32"
|
||||
height="32"
|
||||
/>
|
||||
<span class="date">
|
||||
{{ deal.date }}
|
||||
<UiIcon name="calendar" :size="13" />
|
||||
</span>
|
||||
<div class="amount">
|
||||
<strong>{{ money.number }}</strong>
|
||||
<span>{{ money.unit }}</span>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.deal-card {
|
||||
--face: 32px;
|
||||
display: grid;
|
||||
grid-template-columns: var(--face) minmax(0, 1fr) auto;
|
||||
grid-template-rows: auto auto;
|
||||
column-gap: 0.5rem;
|
||||
row-gap: 0.65rem;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
|
||||
border-radius: 16px;
|
||||
padding: 1rem;
|
||||
border-radius: var(--radius);
|
||||
padding: 0.85rem 0.7rem 0.85rem 0.55rem;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
|
||||
@@ -118,45 +116,40 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.identity {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.65rem;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
.badge,
|
||||
.avatar {
|
||||
width: var(--face);
|
||||
height: var(--face);
|
||||
max-width: var(--face);
|
||||
border-radius: 999px;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.badge {
|
||||
flex: 0 0 auto;
|
||||
width: 2.35rem;
|
||||
height: 2.35rem;
|
||||
border-radius: 999px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: var(--badge-bg);
|
||||
color: var(--badge-fg);
|
||||
font-size: 0.72rem;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.titles {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.titles h3 {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.45;
|
||||
line-height: 1.4;
|
||||
color: var(--ink);
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
@@ -167,64 +160,45 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin: 0.15rem 0 0;
|
||||
margin: 0.1rem 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.4;
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.35;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.menu {
|
||||
align-self: start;
|
||||
justify-self: end;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
background: none;
|
||||
color: var(--muted);
|
||||
padding: 0.15rem;
|
||||
border-radius: 8px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 0;
|
||||
cursor: pointer;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.menu:hover,
|
||||
.menu:focus-visible {
|
||||
color: var(--ink);
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.meta {
|
||||
margin-top: 0.85rem;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.who {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
max-width: 28px;
|
||||
border-radius: 999px;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--line);
|
||||
flex: 0 0 auto;
|
||||
background: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.date {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
justify-content: flex-start;
|
||||
gap: 0.25rem;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -234,14 +208,13 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
|
||||
.amount {
|
||||
text-align: left;
|
||||
display: grid;
|
||||
justify-items: start;
|
||||
justify-items: end;
|
||||
gap: 0.02rem;
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.amount strong {
|
||||
font-size: 1.05rem;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 800;
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.01em;
|
||||
@@ -250,7 +223,7 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
|
||||
}
|
||||
|
||||
.amount span {
|
||||
font-size: 0.72rem;
|
||||
font-size: 0.65rem;
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { nextTick, ref } from 'vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import PipelineColumn from './PipelineColumn.vue';
|
||||
import type { PipelineDeal, PipelineStage } from '@/lib/pipeline-board';
|
||||
|
||||
@@ -6,6 +8,7 @@ defineProps<{
|
||||
stages: PipelineStage[];
|
||||
draggingId: string | null;
|
||||
dropStageId: string | null;
|
||||
canManage?: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -16,17 +19,51 @@ const emit = defineEmits<{
|
||||
addDeal: [stageId: string];
|
||||
openDeal: [dealId: string];
|
||||
menuDeal: [dealId: string];
|
||||
renameStage: [stageId: string, title: string];
|
||||
deleteStage: [stageId: string];
|
||||
moveStage: [stageId: string, dir: -1 | 1];
|
||||
columnDragStart: [stageId: string, event: DragEvent];
|
||||
columnDragEnd: [];
|
||||
addStage: [name: string];
|
||||
}>();
|
||||
|
||||
const adding = ref(false);
|
||||
const newName = ref('');
|
||||
const addInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
async function startAdd() {
|
||||
adding.value = true;
|
||||
newName.value = '';
|
||||
await nextTick();
|
||||
addInput.value?.focus();
|
||||
}
|
||||
|
||||
function cancelAdd() {
|
||||
adding.value = false;
|
||||
newName.value = '';
|
||||
}
|
||||
|
||||
function submitAdd() {
|
||||
const name = newName.value.trim();
|
||||
if (!name) return;
|
||||
emit('addStage', name);
|
||||
adding.value = false;
|
||||
newName.value = '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="board" dir="rtl">
|
||||
<div class="board-shell" dir="rtl">
|
||||
<div class="board">
|
||||
<PipelineColumn
|
||||
v-for="stage in stages"
|
||||
v-for="(stage, index) in stages"
|
||||
:key="stage.id"
|
||||
:stage="stage"
|
||||
:dragging-id="draggingId"
|
||||
:drop-active="dropStageId === stage.id"
|
||||
:can-manage="canManage"
|
||||
:is-first="index === 0"
|
||||
:is-last="index === stages.length - 1"
|
||||
@drag-start="(d, e) => emit('dragStart', d, e)"
|
||||
@drag-end="emit('dragEnd')"
|
||||
@drag-over="(id, e) => emit('dragOver', id, e)"
|
||||
@@ -34,11 +71,48 @@ const emit = defineEmits<{
|
||||
@add-deal="emit('addDeal', $event)"
|
||||
@open-deal="emit('openDeal', $event)"
|
||||
@menu-deal="emit('menuDeal', $event)"
|
||||
@rename="(id, title) => emit('renameStage', id, title)"
|
||||
@delete="emit('deleteStage', $event)"
|
||||
@move="(id, dir) => emit('moveStage', id, dir)"
|
||||
@column-drag-start="(id, e) => emit('columnDragStart', id, e)"
|
||||
@column-drag-end="emit('columnDragEnd')"
|
||||
/>
|
||||
|
||||
<section v-if="canManage" class="add-col">
|
||||
<form v-if="adding" class="add-form" @submit.prevent="submitAdd">
|
||||
<input
|
||||
ref="addInput"
|
||||
v-model="newName"
|
||||
maxlength="80"
|
||||
placeholder="نام ستون جدید…"
|
||||
aria-label="نام ستون جدید"
|
||||
@keydown.esc.prevent="cancelAdd"
|
||||
/>
|
||||
<div class="add-actions">
|
||||
<button class="ok" type="submit" :disabled="newName.trim().length < 1">
|
||||
افزودن
|
||||
</button>
|
||||
<button class="cancel" type="button" @click="cancelAdd">انصراف</button>
|
||||
</div>
|
||||
</form>
|
||||
<button v-else type="button" class="add-btn" @click="startAdd">
|
||||
<UiIcon name="plus" :size="18" />
|
||||
افزودن ستون
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.board-shell {
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--pad-modal);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.board {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -66,10 +140,100 @@ const emit = defineEmits<{
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.add-col {
|
||||
flex: 0 0 17.5rem;
|
||||
min-width: 17.5rem;
|
||||
min-height: 420px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding-top: 0.15rem;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
width: 100%;
|
||||
min-height: 3.2rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
border: 1.5px dashed var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: #f8fafc;
|
||||
color: var(--muted);
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.add-btn:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent-deep, #0f766e);
|
||||
background: color-mix(in srgb, var(--accent) 6%, #fff);
|
||||
}
|
||||
|
||||
.add-form {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.add-form input {
|
||||
width: 100%;
|
||||
min-height: var(--control-h);
|
||||
padding: 0 0.75rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.add-actions {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.add-actions .ok,
|
||||
.add-actions .cancel {
|
||||
min-height: var(--control-h);
|
||||
padding: 0 0.85rem;
|
||||
border-radius: var(--radius);
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.add-actions .ok {
|
||||
border: 0;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.add-actions .ok:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.add-actions .cancel {
|
||||
border: 1px solid var(--line);
|
||||
background: #fff;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
@container pipeline (max-width: 720px) {
|
||||
.board {
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-padding-inline: 0.25rem;
|
||||
}
|
||||
|
||||
.add-col {
|
||||
flex: 0 0 min(20rem, 86cqi);
|
||||
width: min(20rem, 86cqi);
|
||||
min-width: min(20rem, 86cqi);
|
||||
min-height: 360px;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,14 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
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';
|
||||
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
stage: PipelineStage;
|
||||
draggingId: string | null;
|
||||
dropActive: boolean;
|
||||
canManage?: boolean;
|
||||
isFirst?: boolean;
|
||||
isLast?: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -19,8 +23,19 @@ const emit = defineEmits<{
|
||||
addDeal: [stageId: string];
|
||||
openDeal: [dealId: string];
|
||||
menuDeal: [dealId: string];
|
||||
rename: [stageId: string, title: string];
|
||||
delete: [stageId: string];
|
||||
move: [stageId: string, dir: -1 | 1];
|
||||
columnDragStart: [stageId: string, event: DragEvent];
|
||||
columnDragEnd: [];
|
||||
}>();
|
||||
|
||||
const renaming = ref(false);
|
||||
const draft = ref('');
|
||||
const titleInput = ref<HTMLInputElement | null>(null);
|
||||
const menuOpen = ref(false);
|
||||
const menuRoot = ref<HTMLElement | null>(null);
|
||||
|
||||
function onCardDragOver(stageId: string, event: DragEvent) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
@@ -32,6 +47,60 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
|
||||
event.stopPropagation();
|
||||
emit('drop', stageId, event, index);
|
||||
}
|
||||
|
||||
function startRename() {
|
||||
if (!props.canManage) return;
|
||||
draft.value = props.stage.title;
|
||||
renaming.value = true;
|
||||
menuOpen.value = false;
|
||||
void nextTick(() => titleInput.value?.select());
|
||||
}
|
||||
|
||||
function commitRename() {
|
||||
if (!renaming.value) return;
|
||||
const title = draft.value.trim();
|
||||
renaming.value = false;
|
||||
if (!title || title === props.stage.title) return;
|
||||
emit('rename', props.stage.id, title);
|
||||
}
|
||||
|
||||
function cancelRename() {
|
||||
renaming.value = false;
|
||||
draft.value = props.stage.title;
|
||||
}
|
||||
|
||||
function toggleMenu() {
|
||||
menuOpen.value = !menuOpen.value;
|
||||
}
|
||||
|
||||
function onColumnDragStart(event: DragEvent) {
|
||||
event.dataTransfer?.setData('text/plain', `stage:${props.stage.id}`);
|
||||
event.dataTransfer!.effectAllowed = 'move';
|
||||
emit('columnDragStart', props.stage.id, event);
|
||||
}
|
||||
|
||||
function onDocPointerDown(event: PointerEvent) {
|
||||
const target = event.target as Node | null;
|
||||
const root = menuRoot.value;
|
||||
if (root && target && !root.contains(target)) menuOpen.value = false;
|
||||
}
|
||||
|
||||
function onMenuOpened() {
|
||||
document.addEventListener('pointerdown', onDocPointerDown);
|
||||
}
|
||||
|
||||
function onMenuClosed() {
|
||||
document.removeEventListener('pointerdown', onDocPointerDown);
|
||||
}
|
||||
|
||||
watch(menuOpen, (open) => {
|
||||
if (open) onMenuOpened();
|
||||
else onMenuClosed();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('pointerdown', onDocPointerDown);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -48,21 +117,88 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
|
||||
@drop.prevent="emit('drop', stage.id, $event)"
|
||||
>
|
||||
<header class="column-head">
|
||||
<span
|
||||
v-if="canManage"
|
||||
class="grip"
|
||||
draggable="true"
|
||||
title="کشیدن برای جابهجایی"
|
||||
aria-label="جابهجایی ستون"
|
||||
@dragstart="onColumnDragStart"
|
||||
@dragend="emit('columnDragEnd')"
|
||||
>
|
||||
<UiIcon name="grip" :size="14" />
|
||||
</span>
|
||||
<div class="title-wrap">
|
||||
<span class="dot" aria-hidden="true" />
|
||||
<h2>{{ stage.title }}</h2>
|
||||
<input
|
||||
v-if="renaming"
|
||||
ref="titleInput"
|
||||
v-model="draft"
|
||||
class="title-input"
|
||||
maxlength="80"
|
||||
aria-label="نام ستون"
|
||||
@keydown.enter.prevent="commitRename"
|
||||
@keydown.esc.prevent="cancelRename"
|
||||
@blur="commitRename"
|
||||
/>
|
||||
<h2
|
||||
v-else
|
||||
:class="{ editable: canManage }"
|
||||
:title="canManage ? 'برای تغییر نام کلیک کنید' : undefined"
|
||||
@click="startRename"
|
||||
>
|
||||
{{ stage.title }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="head-actions">
|
||||
<span class="count">{{ toFaDealCount(stage.deals.length) }}</span>
|
||||
<span class="count">{{ toFaDealCount(stage.deals.length) }}</span>
|
||||
<div v-if="canManage" ref="menuRoot" class="more-wrap">
|
||||
<button
|
||||
type="button"
|
||||
class="plus"
|
||||
aria-label="افزودن معامله به این مرحله"
|
||||
@click="emit('addDeal', stage.id)"
|
||||
class="icon-btn"
|
||||
aria-label="گزینههای ستون"
|
||||
:aria-expanded="menuOpen"
|
||||
@click.stop="toggleMenu"
|
||||
>
|
||||
<UiIcon name="plus" :size="16" />
|
||||
<UiIcon name="dots-v" :size="16" />
|
||||
</button>
|
||||
<div v-if="menuOpen" class="col-menu" role="menu">
|
||||
<button type="button" role="menuitem" @click="startRename">
|
||||
تغییر نام
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
:disabled="isFirst"
|
||||
@click="emit('move', stage.id, -1); menuOpen = false"
|
||||
>
|
||||
انتقال به راست
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
:disabled="isLast"
|
||||
@click="emit('move', stage.id, 1); menuOpen = false"
|
||||
>
|
||||
انتقال به چپ
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
class="danger"
|
||||
@click="emit('delete', stage.id); menuOpen = false"
|
||||
>
|
||||
حذف ستون
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="plus"
|
||||
aria-label="افزودن معامله به این مرحله"
|
||||
@click="emit('addDeal', stage.id)"
|
||||
>
|
||||
<UiIcon name="plus" :size="16" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="cards" role="list" :aria-label="stage.title">
|
||||
@@ -98,10 +234,10 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
|
||||
flex: 1 1 17.5rem;
|
||||
min-width: 17.5rem;
|
||||
min-height: 420px;
|
||||
padding: 0.15rem 0.1rem 0.35rem;
|
||||
border-radius: 18px;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
padding: 0.75rem;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--line);
|
||||
background: #fff;
|
||||
transition: background 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
@@ -113,16 +249,31 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
|
||||
.column-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
padding: 0.15rem 0.25rem;
|
||||
gap: 0.4rem;
|
||||
padding: 0.1rem 0.1rem 0.15rem;
|
||||
}
|
||||
|
||||
.grip {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 1.25rem;
|
||||
color: var(--muted);
|
||||
cursor: grab;
|
||||
flex: 0 0 auto;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.grip:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.45rem;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dot {
|
||||
@@ -133,21 +284,34 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.column-head h2 {
|
||||
.column-head h2,
|
||||
.title-input {
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
font-size: 0.98rem;
|
||||
font-weight: 800;
|
||||
color: var(--ink);
|
||||
font: inherit;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.column-head h2 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.head-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
flex: 0 0 auto;
|
||||
.column-head h2.editable {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.title-input {
|
||||
height: 1.7rem;
|
||||
padding: 0 0.4rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.count {
|
||||
@@ -157,24 +321,85 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.more-wrap {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.icon-btn,
|
||||
.plus {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 8px;
|
||||
border: 1.5px solid var(--accent);
|
||||
width: var(--control-h);
|
||||
height: var(--control-h);
|
||||
border-radius: var(--radius);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #fff;
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
border: 1px solid transparent;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.icon-btn:hover,
|
||||
.icon-btn:focus-visible {
|
||||
background: var(--stage-soft);
|
||||
color: var(--stage-solid);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.plus {
|
||||
border: 1.5px solid var(--stage-solid);
|
||||
color: var(--stage-solid);
|
||||
}
|
||||
|
||||
.plus:hover,
|
||||
.plus:focus-visible {
|
||||
background: var(--accent-soft);
|
||||
background: var(--stage-soft);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.col-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
inset-inline-end: 0;
|
||||
z-index: 8;
|
||||
min-width: 10.5rem;
|
||||
padding: 0.3rem;
|
||||
display: grid;
|
||||
gap: 0.1rem;
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.col-menu button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0.45rem 0.7rem;
|
||||
font: inherit;
|
||||
font-size: 0.86rem;
|
||||
color: var(--ink);
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.col-menu button:hover:not(:disabled) {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.col-menu button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.col-menu .danger {
|
||||
color: var(--danger, #dc2626);
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -170,7 +170,7 @@ function money(deal: PipelineDeal) {
|
||||
.table-wrap {
|
||||
background: #fff;
|
||||
border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
|
||||
border-radius: 18px;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import UiFilterBar from '@/components/ui/UiFilterBar.vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import UiSegmented from '@/components/ui/UiSegmented.vue';
|
||||
import UiSelect from '@/components/ui/UiSelect.vue';
|
||||
|
||||
export type PipelineViewMode = 'kanban' | 'list';
|
||||
|
||||
@@ -7,28 +10,32 @@ withDefaults(
|
||||
defineProps<{
|
||||
pipelineName: string;
|
||||
pipelineOptions: Array<{ id: string; name: string }>;
|
||||
selectedPipelineId: string;
|
||||
viewMode: PipelineViewMode;
|
||||
search: string;
|
||||
canCreate?: boolean;
|
||||
}>(),
|
||||
{ canCreate: false },
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:viewMode': [PipelineViewMode];
|
||||
'update:search': [string];
|
||||
'update:selectedPipelineId': [string];
|
||||
filter: [];
|
||||
create: [];
|
||||
}>();
|
||||
|
||||
const viewMode = defineModel<PipelineViewMode>('viewMode', { required: true });
|
||||
const search = defineModel<string>('search', { default: '' });
|
||||
const selectedPipelineId = defineModel<string>('selectedPipelineId', { required: true });
|
||||
const amountMin = defineModel<string>('amountMin', { default: '' });
|
||||
const amountMax = defineModel<string>('amountMax', { default: '' });
|
||||
|
||||
const viewOptions = [
|
||||
{ value: 'kanban' as const, label: 'نمای کاریز', icon: 'grid' as const },
|
||||
{ value: 'list' as const, label: 'نمای لیست', icon: 'list' as const },
|
||||
];
|
||||
|
||||
function onPick(value: string) {
|
||||
if (value === '__create__') {
|
||||
emit('create');
|
||||
return;
|
||||
}
|
||||
emit('update:selectedPipelineId', value);
|
||||
selectedPipelineId.value = value;
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -41,62 +48,37 @@ function onPick(value: string) {
|
||||
<h1>{{ pipelineName }}</h1>
|
||||
</div>
|
||||
|
||||
<div class="view-toggle" role="group" aria-label="نوع نمایش">
|
||||
<button
|
||||
type="button"
|
||||
class="seg"
|
||||
:class="{ on: viewMode === 'kanban' }"
|
||||
:aria-pressed="viewMode === 'kanban'"
|
||||
@click="emit('update:viewMode', 'kanban')"
|
||||
>
|
||||
<UiIcon name="grid" :size="16" />
|
||||
<span class="seg-label">نمای کاریز</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="seg"
|
||||
:class="{ on: viewMode === 'list' }"
|
||||
:aria-pressed="viewMode === 'list'"
|
||||
@click="emit('update:viewMode', 'list')"
|
||||
>
|
||||
<UiIcon name="list" :size="16" />
|
||||
<span class="seg-label">نمای لیست</span>
|
||||
</button>
|
||||
</div>
|
||||
<UiSegmented v-model="viewMode" :options="viewOptions">
|
||||
<template #icon="{ option }">
|
||||
<UiIcon :name="option.icon ?? 'grid'" :size="16" />
|
||||
</template>
|
||||
</UiSegmented>
|
||||
|
||||
<label class="pipeline-pick">
|
||||
<span class="sr">انتخاب کاریز</span>
|
||||
<select
|
||||
:value="selectedPipelineId"
|
||||
@change="onPick(($event.target as HTMLSelectElement).value)"
|
||||
<UiSelect
|
||||
class="pipeline-pick"
|
||||
:model-value="selectedPipelineId"
|
||||
@update:model-value="onPick"
|
||||
>
|
||||
<option
|
||||
v-for="opt in pipelineOptions"
|
||||
:key="opt.id"
|
||||
:value="opt.id"
|
||||
>
|
||||
<option
|
||||
v-for="opt in pipelineOptions"
|
||||
:key="opt.id"
|
||||
:value="opt.id"
|
||||
>
|
||||
{{ opt.name }}
|
||||
</option>
|
||||
<option v-if="canCreate" value="__create__">کاریز جدید…</option>
|
||||
</select>
|
||||
<UiIcon class="chev" name="chevron" :size="16" />
|
||||
</label>
|
||||
{{ opt.name }}
|
||||
</option>
|
||||
<option v-if="canCreate" value="__create__">کاریز جدید…</option>
|
||||
</UiSelect>
|
||||
|
||||
<label class="search">
|
||||
<UiIcon name="search" :size="16" />
|
||||
<span class="sr">جستجو</span>
|
||||
<input
|
||||
:value="search"
|
||||
type="search"
|
||||
placeholder="جستجو..."
|
||||
@input="emit('update:search', ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<button type="button" class="filter-btn" aria-label="فیلترها" @click="emit('filter')">
|
||||
<UiIcon name="filter" :size="16" />
|
||||
فیلترها
|
||||
</button>
|
||||
<UiFilterBar v-model:search="search" class="filters">
|
||||
<label class="field">
|
||||
<span>حداقل مبلغ</span>
|
||||
<input v-model="amountMin" type="number" min="0" placeholder="۰" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>حداکثر مبلغ</span>
|
||||
<input v-model="amountMax" type="number" min="0" placeholder="—" />
|
||||
</label>
|
||||
</UiFilterBar>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
@@ -120,19 +102,19 @@ function onPick(value: string) {
|
||||
}
|
||||
|
||||
.brand-ico {
|
||||
width: 2.15rem;
|
||||
height: 2.15rem;
|
||||
border-radius: 10px;
|
||||
width: var(--control-h);
|
||||
height: var(--control-h);
|
||||
border-radius: var(--radius);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #0f766e;
|
||||
background: var(--accent-deep);
|
||||
color: #fff;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 800;
|
||||
color: var(--ink);
|
||||
overflow: hidden;
|
||||
@@ -140,127 +122,25 @@ h1 {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
display: inline-flex;
|
||||
background: #e8eef1;
|
||||
border-radius: 12px;
|
||||
padding: 0.18rem;
|
||||
gap: 0.12rem;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.seg {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #7b8794;
|
||||
font-weight: 700;
|
||||
font-size: 0.82rem;
|
||||
padding: 0.42rem 0.7rem;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.seg.on {
|
||||
background: #fff;
|
||||
color: var(--accent);
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.seg:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.pipeline-pick {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-width: 8.5rem;
|
||||
flex: 0 1 13rem;
|
||||
min-width: 8.5rem;
|
||||
}
|
||||
|
||||
.pipeline-pick select {
|
||||
appearance: none;
|
||||
border: 1px solid var(--line);
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 0.52rem 2rem 0.52rem 0.85rem;
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
width: 100%;
|
||||
.filters {
|
||||
flex: 1 1 12rem;
|
||||
min-width: 0;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pipeline-pick .chev {
|
||||
position: absolute;
|
||||
left: 0.65rem;
|
||||
pointer-events: none;
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.field span {
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
flex: 1 1 8rem;
|
||||
min-width: 6.5rem;
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.45rem 0.75rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.search input {
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
color: var(--ink);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
padding: 0.52rem 0.95rem;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.filter-btn:focus-visible,
|
||||
.pipeline-pick select:focus-visible,
|
||||
.search:focus-within {
|
||||
outline: 2px solid var(--accent-soft);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.sr {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
}
|
||||
|
||||
@container pipeline (max-width: 720px) {
|
||||
@@ -272,37 +152,9 @@ h1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.seg {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.pipeline-pick {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.search {
|
||||
flex: 1 1 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
@container pipeline (max-width: 520px) {
|
||||
.seg-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-btn,
|
||||
.pipeline-pick {
|
||||
width: 100%;
|
||||
.pipeline-pick,
|
||||
.filters {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user