nocodb/packages/nc-gui-v2/components/api-client/Params.vue

<script setup lang="ts">
import MdiPlusIcon from '~icons/mdi/plus'
import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'

interface Props {
  modelValue: Record<string, any>[]
}

const props = defineProps<Props>()

const emits = defineEmits(['update:modelValue'])

const vModel = useVModel(props, 'modelValue', emits)

const addParamRow = () => vModel.value.push({})

const deleteParamRow = (idx: number) => vModel.value.splice(idx, 1)
</script>

<template>
  <div class="flex flex-row justify-center">
    <table>
      <thead>
        <tr>
          <th>
            <!-- Intended to be empty - For checkbox -->
          </th>
          <th>
            <div class="text-center font-normal mb-2">Param Name</div>
          </th>
          <th>
            <div class="text-center font-normal mb-2">Value</div>
          </th>
          <th>
            <!-- Intended to be empty - For delete button -->
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(paramRow, idx) in vModel" :key="idx">
          <td class="px-2">
            <a-form-item>
              <a-checkbox v-model:checked="paramRow.enabled" />
            </a-form-item>
          </td>
          <td class="px-2">
            <a-form-item>
              <a-input v-model:value="paramRow.name" size="large" placeholder="Key" />
            </a-form-item>
          </td>
          <td class="px-2">
            <a-form-item>
              <a-input v-model:value="paramRow.value" size="large" placeholder="Value" />
            </a-form-item>
          </td>
          <td class="relative">
            <div v-if="idx !== 0" class="absolute flex flex-col justify-start mt-2 -right-6 top-0">
              <MdiDeleteOutlineIcon class="cursor-pointer" @click="deleteParamRow(idx)" />
            </div>
          </td>
        </tr>
        <tr>
          <td :colspan="12" class="text-center">
            <a-button type="default" class="!bg-gray-100 rounded-md border-none mr-1" @click="addParamRow">
              <template #icon>
                <MdiPlusIcon class="flex mx-auto" />
              </template>
            </a-button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>