fix(products): open one row menu so edit and other actions run

Desktop and mobile dropdowns shared an id, so both opened and the extra menu closed the click before the action.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-11-08 11:54:38 +03:30
co-authored by Cursor
parent b8c49293f7
commit 97f00d7e6d
+29 -13
View File
@@ -411,25 +411,25 @@ onMounted(load);
</td>
<td class="ops" @click.stop>
<UiDropdownMenu
:open="menuId === p.id"
:open="menuId === `d:${p.id}`"
align="end"
@update:open="(v) => (menuId = v ? p.id : null)"
@update:open="(v) => (menuId = v ? `d:${p.id}` : null)"
>
<template #trigger="{ toggle }">
<button
type="button"
class="icon-btn"
class="more"
aria-label="عملیات"
@click.stop="toggle"
>
<UiIcon name="dots" :size="16" />
<UiIcon name="dots-v" :size="16" />
</button>
</template>
<button type="button" @click="goEdit(p.id)">ویرایش</button>
<button type="button" @click="toggleActive(p)">
<button type="button" @click.stop="goEdit(p.id)">ویرایش</button>
<button type="button" @click.stop="toggleActive(p)">
{{ p.isActive ? 'غیرفعال کردن' : 'فعال کردن' }}
</button>
<button type="button" class="danger" @click="removeProduct(p)">حذف</button>
<button type="button" class="danger" @click.stop="removeProduct(p)">حذف</button>
</UiDropdownMenu>
</td>
</tr>
@@ -460,25 +460,25 @@ onMounted(load);
</div>
<div class="mob-side">
<UiDropdownMenu
:open="menuId === p.id"
:open="menuId === `m:${p.id}`"
align="end"
@update:open="(v) => (menuId = v ? p.id : null)"
@update:open="(v) => (menuId = v ? `m:${p.id}` : null)"
>
<template #trigger="{ toggle }">
<button
type="button"
class="icon-btn"
class="more"
aria-label="عملیات"
@click.stop="toggle"
>
<UiIcon name="dots-v" :size="16" />
</button>
</template>
<button type="button" @click="goEdit(p.id)">ویرایش</button>
<button type="button" @click="toggleActive(p)">
<button type="button" @click.stop="goEdit(p.id)">ویرایش</button>
<button type="button" @click.stop="toggleActive(p)">
{{ p.isActive ? 'غیرفعال کردن' : 'فعال کردن' }}
</button>
<button type="button" class="danger" @click="removeProduct(p)">حذف</button>
<button type="button" class="danger" @click.stop="removeProduct(p)">حذف</button>
</UiDropdownMenu>
<UiBadge :variant="p.isActive ? 'success' : 'neutral'" size="sm" dot>
{{ p.isActive ? 'فعال' : 'غیرفعال' }}
@@ -680,6 +680,22 @@ tr:last-child td {
.ops {
width: 64px;
}
.more {
width: 32px;
height: 32px;
border: 0;
background: none;
color: #94a3b8;
border-radius: var(--radius);
display: grid;
place-items: center;
cursor: pointer;
padding: 0;
}
.more:hover {
background: var(--accent-soft);
color: var(--accent);
}
.mob-list {
display: none;
gap: 0.65rem;