ayrisdev/mucomutfak-webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: admin listelerinde açılır-kapanır öğe kartları

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
AyrisAI
2026-07-21 01:38:40 +03:00
co-authored by Claude Fable 5
parent 9ee4c94278
commit 8974cb3e1e
1 changed files with 65 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Admin/Field.vue
+65 -22
View File
@@ -14,7 +14,7 @@
<details
v-else-if="kind === 'object'"
class="border border-gray-200 rounded-xl bg-white"
:open="(depth ?? 0) < 1"
:open="(depth ?? 0) < 1 && field !== 'meta'"
>
<summary
class="cursor-pointer select-none px-4 py-2.5 font-semibold text-sm text-[#3C393D] flex items-center gap-2"
@@ -43,18 +43,69 @@
{{ displayLabel }}
<span class="text-xs font-normal text-gray-400">({{ value.length }})</span>
</p>
<div
v-for="(item, i) in value"
:key="i"
class="relative border border-gray-200 rounded-xl bg-[#fafbfc]"
>
<div
class="flex items-center gap-1 px-3 py-1.5 border-b border-gray-100 text-xs text-gray-500"
<template v-for="(item, i) in value" :key="i">
<!-- Nesne öğeler: açılır-kapanır kart -->
<details
v-if="item !== null && typeof item === 'object'"
class="border border-gray-200 rounded-xl bg-[#fafbfc] group"
>
<span class="font-semibold truncate">{{ itemTitle(item, i) }}</span>
<span class="flex-1"></span>
<summary
class="flex items-center gap-1.5 px-3 py-2 text-xs text-gray-600 cursor-pointer select-none list-none"
>
<span
class="text-gray-400 transition-transform group-open:rotate-90 shrink-0"
>▶</span
>
<span class="font-semibold truncate text-[13px]">{{
itemTitle(item, i)
}}</span>
<span class="flex-1"></span>
<button
class="px-1.5 py-0.5 rounded hover:bg-gray-200 cursor-pointer disabled:opacity-30"
:disabled="i === 0"
title="Yukarı taşı"
@click.stop.prevent="move(i, -1)"
>
▲
</button>
<button
class="px-1.5 py-0.5 rounded hover:bg-gray-200 cursor-pointer disabled:opacity-30"
:disabled="i === value.length - 1"
title="Aşağı taşı"
@click.stop.prevent="move(i, 1)"
>
▼
</button>
<button
class="px-1.5 py-0.5 rounded text-red-500 hover:bg-red-50 cursor-pointer"
title="Sil"
@click.stop.prevent="removeAt(i)"
>
Sil
</button>
</summary>
<div class="p-3 border-t border-gray-100">
<AdminField
:parent="value"
:field="i"
:depth="(depth ?? 0) + 1"
bare
/>
</div>
</details>
<!-- Basit (metin/sayı) öğeler: tek satır -->
<div v-else class="flex items-center gap-1.5">
<div class="flex-1 min-w-0">
<AdminField
:parent="value"
:field="i"
:depth="(depth ?? 0) + 1"
bare
/>
</div>
<button
class="px-1.5 py-0.5 rounded hover:bg-gray-200 cursor-pointer disabled:opacity-30"
class="px-1.5 py-0.5 rounded text-xs text-gray-400 hover:bg-gray-200 cursor-pointer disabled:opacity-30"
:disabled="i === 0"
title="Yukarı taşı"
@click="move(i, -1)"
@@ -62,7 +113,7 @@
▲
</button>
<button
class="px-1.5 py-0.5 rounded hover:bg-gray-200 cursor-pointer disabled:opacity-30"
class="px-1.5 py-0.5 rounded text-xs text-gray-400 hover:bg-gray-200 cursor-pointer disabled:opacity-30"
:disabled="i === value.length - 1"
title="Aşağı taşı"
@click="move(i, 1)"
@@ -70,22 +121,14 @@
▼
</button>
<button
class="px-1.5 py-0.5 rounded text-red-500 hover:bg-red-50 cursor-pointer"
class="px-1.5 py-0.5 rounded text-xs text-red-400 hover:bg-red-50 cursor-pointer"
title="Sil"
@click="removeAt(i)"
>
Sil
</button>
</div>
<div class="p-3">
<AdminField
:parent="value"
:field="i"
:depth="(depth ?? 0) + 1"
bare
/>
</div>
</div>
</template>
<button
class="w-full border border-dashed border-gray-300 rounded-xl py-2 text-sm text-gray-500 hover:border-[#3FA0C7] hover:text-[#3FA0C7] cursor-pointer"
@click="addItem"