feat: wrap shopping items in swipe-row

This commit is contained in:
Ulas
2026-03-31 12:47:37 +02:00
parent dc2e874cb2
commit 33bef8eb3f
+14 -3
View File
@@ -182,12 +182,22 @@ function renderItems() {
}
function renderItem(item) {
const isDone = Boolean(item.is_checked);
return `
<div class="shopping-item ${item.is_checked ? 'shopping-item--checked' : ''}"
<div class="swipe-row" data-swipe-id="${item.id}" data-swipe-checked="${item.is_checked}">
<div class="swipe-reveal swipe-reveal--done" aria-hidden="true">
<i data-lucide="${isDone ? 'rotate-ccw' : 'check'}" style="width:22px;height:22px" aria-hidden="true"></i>
<span>${isDone ? 'Zurück' : 'Abhaken'}</span>
</div>
<div class="swipe-reveal swipe-reveal--delete" aria-hidden="true">
<i data-lucide="trash-2" style="width:22px;height:22px" aria-hidden="true"></i>
<span>Löschen</span>
</div>
<div class="shopping-item ${isDone ? 'shopping-item--checked' : ''}"
data-item-id="${item.id}">
<button class="item-check ${item.is_checked ? 'item-check--checked' : ''}"
<button class="item-check ${isDone ? 'item-check--checked' : ''}"
data-action="toggle-item" data-id="${item.id}" data-checked="${item.is_checked}"
aria-label="${item.name} ${item.is_checked ? 'als nicht erledigt markieren' : 'abhaken'}">
aria-label="${item.name} ${isDone ? 'als nicht erledigt markieren' : 'abhaken'}">
<i data-lucide="check" class="item-check__icon" aria-hidden="true"></i>
</button>
<div class="item-body">
@@ -198,6 +208,7 @@ function renderItem(item) {
aria-label="${item.name} löschen">
<i data-lucide="x" style="width:16px;height:16px" aria-hidden="true"></i>
</button>
</div>
</div>`;
}