51 lines
1.2 KiB
Vue
51 lines
1.2 KiB
Vue
<template>
|
|
<div class="space-y-3 min-w-0">
|
|
<div v-for="(header, index) in headers" :key="index" class="flex items-center gap-3 min-w-0">
|
|
<input type="checkbox" v-model="header.active" class="w-4 h-4 flex-shrink-0" />
|
|
<FormKit
|
|
type="text"
|
|
v-model="header.key"
|
|
placeholder="Key"
|
|
outer-class="!mb-0 flex-1 min-w-0"
|
|
inner-class="!mb-0"
|
|
/>
|
|
<FormKit
|
|
type="text"
|
|
v-model="header.value"
|
|
placeholder="Value"
|
|
outer-class="!mb-0 flex-1 min-w-0"
|
|
inner-class="!mb-0"
|
|
/>
|
|
<rs-button
|
|
variant="danger-outline"
|
|
size="sm"
|
|
@click="removeRow(index)"
|
|
class="flex-shrink-0"
|
|
>
|
|
<Icon name="ic:outline-delete" size="16" />
|
|
</rs-button>
|
|
</div>
|
|
<rs-button variant="secondary-outline" size="sm" @click="addRow">
|
|
Add Header
|
|
</rs-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { addRow: addRowUtil, removeRow: removeRowUtil } = useApiRequest()
|
|
|
|
const props = defineProps({
|
|
headers: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const addRow = () => {
|
|
addRowUtil(toRef(props, 'headers'))
|
|
}
|
|
|
|
const removeRow = (index) => {
|
|
removeRowUtil(toRef(props, 'headers'), index)
|
|
}
|
|
</script> |