mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.2 KiB
86 lines
2.2 KiB
<script setup lang="ts"> |
|
const props = defineProps<{ |
|
modelValue: any[] |
|
}>() |
|
|
|
const emits = defineEmits(['update:modelValue']) |
|
|
|
const vModel = useVModel(props, 'modelValue', emits) |
|
|
|
const addParamRow = () => vModel.value.push({}) |
|
|
|
const deleteParamRow = (i: number) => { |
|
if (vModel.value.length === 1) return |
|
|
|
vModel.value.splice(i, 1) |
|
} |
|
</script> |
|
|
|
<template> |
|
<div class="flex flex-col py-3 gap-1.5 w-full"> |
|
<div v-for="(paramRow, idx) in vModel" :key="idx" class="flex relative items-center w-full"> |
|
<a-form-item class="form-item w-8"> |
|
<NcCheckbox v-model:checked="paramRow.enabled" size="large" /> |
|
</a-form-item> |
|
<a-form-item class="form-item w-3/6"> |
|
<a-input v-model:value="paramRow.name" :placeholder="$t('placeholder.key')" class="!rounded-l-lg !border-gray-200" /> |
|
</a-form-item> |
|
<a-form-item class="form-item w-3/6"> |
|
<a-input |
|
v-model:value="paramRow.value" |
|
:placeholder="$t('placeholder.value')" |
|
class="nc-webhook-parameters-value-input !border-x-0 !border-gray-200 !rounded-none" |
|
/> |
|
</a-form-item> |
|
|
|
<NcButton |
|
class="!rounded-l-none delete-btn !border-gray-200 !shadow-none" |
|
type="secondary" |
|
size="small" |
|
:disabled="vModel.length === 1" |
|
@click="deleteParamRow(idx)" |
|
> |
|
<component :is="iconMap.deleteListItem" /> |
|
</NcButton> |
|
</div> |
|
|
|
<div class="mt-1.5"> |
|
<NcButton size="small" type="secondary" class="nc-btn-focus" @click="addParamRow"> |
|
<div class="flex flex-row items-center gap-x-2"> |
|
<component :is="iconMap.plus" class="flex-none" /> |
|
<div data-rec="true">{{ $t('general.add') }}</div> |
|
</div> |
|
</NcButton> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<style lang="scss" scoped> |
|
.ant-input { |
|
box-shadow: none !important; |
|
|
|
&:hover { |
|
@apply !hover:bg-gray-50; |
|
} |
|
} |
|
|
|
.delete-btn:not([disabled]) { |
|
@apply !text-gray-500; |
|
} |
|
|
|
:deep(.ant-input) { |
|
@apply !placeholder-gray-500; |
|
} |
|
|
|
:deep(.ant-input.nc-webhook-parameters-value-input) { |
|
@apply !border-x-0; |
|
} |
|
|
|
.ant-input-affix-wrapper { |
|
@apply px-4 rounded-lg py-2 w-84 border-1 focus:border-brand-500 border-gray-200 !ring-0; |
|
} |
|
|
|
.nc-btn-focus:focus { |
|
@apply !text-brand-500 !shadow-none; |
|
} |
|
</style>
|
|
|