mirror of
https://github.com/nocodb/nocodb.git
synced 2026-05-01 05:16:54 +00:00
99 lines
2.6 KiB
Vue
99 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
modelValue: any[]
|
|
disabled?: boolean
|
|
}>()
|
|
|
|
const emits = defineEmits(['update:modelValue'])
|
|
|
|
const vModel = useVModel(props, 'modelValue', emits)
|
|
|
|
const addParamRow = () =>
|
|
vModel.value.push({
|
|
enabled: true,
|
|
name: '',
|
|
value: '',
|
|
})
|
|
|
|
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" :disabled="disabled" />
|
|
</a-form-item>
|
|
<a-form-item class="form-item w-3/6">
|
|
<a-input
|
|
v-model:value="paramRow.name"
|
|
:disabled="disabled"
|
|
:placeholder="$t('placeholder.key')"
|
|
class="!rounded-l-lg !border-nc-border-gray-medium"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item class="form-item w-3/6">
|
|
<a-input
|
|
v-model:value="paramRow.value"
|
|
:disabled="disabled"
|
|
:placeholder="$t('placeholder.value')"
|
|
class="nc-webhook-parameters-value-input !border-x-0 !border-nc-border-gray-medium !rounded-none"
|
|
/>
|
|
</a-form-item>
|
|
|
|
<NcButton
|
|
class="!rounded-l-none delete-btn !border-nc-border-gray-medium !shadow-none"
|
|
type="secondary"
|
|
size="small"
|
|
:disabled="vModel.length === 1 || disabled"
|
|
@click="deleteParamRow(idx)"
|
|
>
|
|
<component :is="iconMap.deleteListItem" />
|
|
</NcButton>
|
|
</div>
|
|
|
|
<div class="mt-1.5">
|
|
<NcButton size="small" type="secondary" class="nc-btn-focus" :disabled="disabled" @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:not(:disabled) {
|
|
@apply !hover:bg-nc-bg-gray-extralight;
|
|
}
|
|
}
|
|
|
|
.delete-btn:not([disabled]) {
|
|
@apply !text-nc-content-gray-muted;
|
|
}
|
|
|
|
:deep(.ant-input) {
|
|
@apply !placeholder-nc-content-gray-muted;
|
|
}
|
|
|
|
: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-nc-border-brand border-nc-border-gray-medium !ring-0;
|
|
}
|
|
|
|
.nc-btn-focus:focus {
|
|
@apply !text-nc-content-brand !shadow-none;
|
|
}
|
|
</style>
|