92 lines
2.9 KiB
Vue
92 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { Trash2, Plus } from 'lucide-vue-next';
|
|
import type { KeyValue } from '../stores/requestStore';
|
|
|
|
const props = defineProps<{
|
|
modelValue: KeyValue[];
|
|
title?: string;
|
|
}>();
|
|
|
|
const emit = defineEmits(['update:modelValue']);
|
|
|
|
const addRow = () => {
|
|
const newData = [...props.modelValue, {
|
|
id: crypto.randomUUID(),
|
|
key: '',
|
|
value: '',
|
|
enabled: true
|
|
}];
|
|
emit('update:modelValue', newData);
|
|
};
|
|
|
|
const removeRow = (index: number) => {
|
|
const newData = [...props.modelValue];
|
|
newData.splice(index, 1);
|
|
emit('update:modelValue', newData);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col h-full">
|
|
<div class="flex-1 overflow-y-auto p-4">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="text-xs text-slate-500 border-b border-slate-800">
|
|
<th class="pb-2 pl-2 font-medium w-8"></th>
|
|
<th class="pb-2 font-medium w-1/3">Key</th>
|
|
<th class="pb-2 font-medium">Value</th>
|
|
<th class="pb-2 w-8"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="(item, index) in modelValue"
|
|
:key="item.id"
|
|
class="group"
|
|
>
|
|
<td class="py-1 pl-2 align-middle">
|
|
<input
|
|
type="checkbox"
|
|
v-model="item.enabled"
|
|
class="rounded bg-slate-800 border-slate-700 text-indigo-500 focus:ring-indigo-500/50 focus:ring-offset-0"
|
|
>
|
|
</td>
|
|
<td class="py-1 pr-2 align-middle">
|
|
<input
|
|
type="text"
|
|
v-model="item.key"
|
|
placeholder="Key"
|
|
class="w-full bg-transparent border-b border-transparent hover:border-slate-700 focus:border-indigo-500 focus:outline-none py-1 px-1 text-sm text-slate-300 transition-colors"
|
|
>
|
|
</td>
|
|
<td class="py-1 pr-2 align-middle">
|
|
<input
|
|
type="text"
|
|
v-model="item.value"
|
|
placeholder="Value"
|
|
class="w-full bg-transparent border-b border-transparent hover:border-slate-700 focus:border-indigo-500 focus:outline-none py-1 px-1 text-sm text-slate-300 transition-colors"
|
|
>
|
|
</td>
|
|
<td class="py-1 align-middle text-right">
|
|
<button
|
|
@click="removeRow(index)"
|
|
class="p-1 text-slate-600 hover:text-rose-400 opacity-0 group-hover:opacity-100 transition-all"
|
|
title="Remove"
|
|
>
|
|
<Trash2 class="w-4 h-4" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<button
|
|
@click="addRow"
|
|
class="mt-2 flex items-center text-xs text-slate-500 hover:text-indigo-400 transition-colors px-2 py-1"
|
|
>
|
|
<Plus class="w-3 h-3 mr-1" /> Add Item
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|