Vue Dynamic Property Provider

Install

npm install @kiwiproject/vue-dynamic-property-provider

Import and register component (Dynamic Property Field)

Global

import { createApp } from 'vue';
import App from './App.vue';

import DynamicPropertyField from '@kiwiproject/vue-dynamic-property-provider';

const app = createApp(App);
app.component('DynamicPropertyField', DynamicPropertyField);

Local

<template>
  <DynamicPropertyField v-model="firstName" :field="field" />
</template>

<script setup>
  import { ref } from 'vue';
  import DynamicPropertyField from '@kiwiproject/vue-dynamic-property-provider';

  const firstName = ref(null);
  
  const field = ref({
    name: "firstName"
  });
</script>

Import and register component (Dynamic Property Table)

Global

import { createApp } from 'vue';
import App from './App.vue';

import DynamicPropertyTable from '@kiwiproject/vue-dynamic-property-provider';

const app = createApp(App);
app.component('DynamicPropertyTable', DynamicPropertyTable);

Local

<template>
  <DynamicPropertyTable :fields="fields" :data="data" />
</template>

<script setup>
  import { ref } from 'vue';
  import DynamicPropertyTable from '@kiwiproject/vue-dynamic-property-provider';

  const data = ref([
    { id: 1, firstName: "John"}
  ])
  
  const fields = ref([{
    name: "firstName"
  }]);
</script>

Slots

The DynamicPropertyTable has the ability to set a slot to provide an action column. You can use this to add whatever actions you need to each row of the table. For example:

<template>
  <DynamicPropertyTable :fields="fields" :data="data">
    <template #action="{ row }">
      <button type="button">Edit</button>
    </template>
  </DynamicPropertyTable>
</template>