<script setup>
import { model, q } from "#imports";
import { LCustomFieldAdd } from "#components";
const onRequest = async (request) => {
  request.loadObjects("CustomField");
};
const { app } = await q({
  app: {
    customFieldModels: true
  }
});
const columns = model("CustomField").columns({
  name: true,
  model: true,
  type: true,
  validation: true
});
</script>

<template>
    <l-page>
        <p>
            Customize your Models with your own fields. Make sure to use the below added fields on the address formats
            on Customization settings page.
        </p>

        <l-table row-key="custom_field_id" @request-data="onRequest" :columns="columns" :add-component="LCustomFieldAdd"
            :add-component-props="{
                models: app.customFieldModels
            }" :actions="['edit', 'delete']">
        </l-table>

    </l-page>
</template>
