fix: update Vbind functions

demo-element-plus/src/viewer/FSelectViewer.vue

@@ -11,23 +11,23 @@
 <script lang='ts' setup>
 import { FieldType, useForm } from '@fancy-crud/vue'
 
-const options = [
-  { id: 6, name: 'vas', gender: 'm', image: null, image2: null, is_active: true, created_at: '2022-03-26T16:53:32.689923-06:00', updated_at: '2022-04-04T22:41:03.560384-06:00' },
-  { id: 2, name: 'Richard', gender: 'm', image: 'http://localhost:9000/media/artists/XIAOMI.jpg', image2: null, is_active: false, created_at: '2021-11-25T06:03:05.227235-06:00', updated_at: '2022-05-01T19:34:58.233543-06:00' },
-  { id: 3, name: 'Hello', gender: 'f', image: null, image2: null, is_active: false, created_at: '2022-03-13T21:56:36.572596-06:00', updated_at: '2022-05-01T19:34:57.473746-06:00' },
-  { id: 4, name: 'days', gender: 'm', image: null, image2: null, is_active: true, created_at: '2022-03-24T12:13:53.170353-06:00', updated_at: '2022-05-01T19:34:43.246611-06:00' },
-  { id: 8, name: 'dsa', gender: 'f', image: null, image2: null, is_active: true, created_at: '2022-03-27T12:29:22.381332-06:00', updated_at: '2022-03-27T12:29:22.381388-06:00' },
-  { id: 9, name: 'dsa', gender: 'f', image: null, image2: null, is_active: true, created_at: '2022-03-27T12:29:58.391627-06:00', updated_at: '2022-03-27T12:29:58.391713-06:00' },
-  { id: 1, name: 'dsa', gender: 'f', image: null, image2: null, is_active: true, created_at: '2022-03-27T12:29:58.391627-06:00', updated_at: '2022-03-27T12:29:58.391713-06:00' },
-  { id: 5, name: 'dsa', gender: 'f', image: null, image2: null, is_active: true, created_at: '2022-03-27T12:29:58.391627-06:00', updated_at: '2022-03-27T12:29:58.391713-06:00' },
-]
+// const options = [
+//   { id: 6, name: 'vas', gender: 'm', image: null, image2: null, is_active: true, created_at: '2022-03-26T16:53:32.689923-06:00', updated_at: '2022-04-04T22:41:03.560384-06:00' },
+//   { id: 2, name: 'Richard', gender: 'm', image: 'http://localhost:9000/media/artists/XIAOMI.jpg', image2: null, is_active: false, created_at: '2021-11-25T06:03:05.227235-06:00', updated_at: '2022-05-01T19:34:58.233543-06:00' },
+//   { id: 3, name: 'Hello', gender: 'f', image: null, image2: null, is_active: false, created_at: '2022-03-13T21:56:36.572596-06:00', updated_at: '2022-05-01T19:34:57.473746-06:00' },
+//   { id: 4, name: 'days', gender: 'm', image: null, image2: null, is_active: true, created_at: '2022-03-24T12:13:53.170353-06:00', updated_at: '2022-05-01T19:34:43.246611-06:00' },
+//   { id: 8, name: 'dsa', gender: 'f', image: null, image2: null, is_active: true, created_at: '2022-03-27T12:29:22.381332-06:00', updated_at: '2022-03-27T12:29:22.381388-06:00' },
+//   { id: 9, name: 'dsa', gender: 'f', image: null, image2: null, is_active: true, created_at: '2022-03-27T12:29:58.391627-06:00', updated_at: '2022-03-27T12:29:58.391713-06:00' },
+//   { id: 1, name: 'dsa', gender: 'f', image: null, image2: null, is_active: true, created_at: '2022-03-27T12:29:58.391627-06:00', updated_at: '2022-03-27T12:29:58.391713-06:00' },
+//   { id: 5, name: 'dsa', gender: 'f', image: null, image2: null, is_active: true, created_at: '2022-03-27T12:29:58.391627-06:00', updated_at: '2022-03-27T12:29:58.391713-06:00' },
+// ]
 
 const form = useForm({
   fields: {
     select: {
       label: 'Select',
       type: FieldType.select,
-      // url: 'artists/',
+      url: 'artists/',
       placeholder: 'Select',
       optionLabel: 'name',
       optionValue: 'id',
@@ -38,7 +38,7 @@ const form = useForm({
       },
       clearable: true,
       modelValue: null,
-      options,
+      // options,
     },
   },
   settings: {

packages/core/src/common/http/axioma/get-foreign-key-values.ts

@@ -5,7 +5,7 @@ export class GetForeignKeyValuesCommand implements BaseCommand {
   public readonly meta = meta(IGetForeignKeyValuesHandler)
 
   constructor(
-    public readonly fields: Record<string, { type: string; options?: any[]; url?: string; filterParams?: Record<string, unknown> }>,
+    public readonly fields: Record<string, { type: string; options?: any[]; url?: string; filterParams?: Record<string, unknown>; interceptOptions: (options: any[]) => unknown[] }>,
   ) {}
 }
 

packages/core/src/common/http/capabilities/get-foreign-key-values.ts

@@ -41,7 +41,7 @@ export class GetForeignKeyValuesHandler implements IGetForeignKeyValuesHandler {
     return sameAPIEndpoint
   }
 
-  private addOptionsToField(field: { options?: any[] }, data: any) {
+  private addOptionsToField(field: { options?: any[]; interceptOptions: (options: any[]) => unknown[] }, data: any) {
     const options: any[] = field.options || []
 
     const addOptionsItems = (items: any[]) => {
@@ -60,17 +60,16 @@ export class GetForeignKeyValuesHandler implements IGetForeignKeyValuesHandler {
       const paginateResults = new PaginateResult(this.http.pagination, data)
       addOptionsItems(paginateResults.results)
     }
-    return options
+
+    field.options = field.interceptOptions(options)
   }
 
   execute({ fields }: GetForeignKeyValuesCommand): void {
     const sameAPIEndpoint: SameAPIEndpoint = this.getSameAPIEndpoint(fields)
 
     Object.entries(sameAPIEndpoint).forEach(([url, fieldKeys]) => {
       this.http.request.get(url).then((response: any) => {
-        fieldKeys.forEach((fieldKey) => {
-          fields[fieldKey].options = this.addOptionsToField(fields[fieldKey], response.data)
-        })
+        fieldKeys.forEach(fieldKey => this.addOptionsToField(fields[fieldKey], response.data))
       })
         .catch(e => console.error(e))
     })

packages/core/src/forms/axioma/typing/form.ts

@@ -25,6 +25,7 @@ export interface BaseRawField extends Record<string, any> {
   multiple?: boolean
   rules?: Rule
   recordValue?: (value: any) => unknown
+  interceptOptions?: (options: any[]) => unknown[]
 }
 
 export interface DefaultAttributes {
@@ -35,6 +36,7 @@ export interface DefaultAttributes {
   ref: any
   errors: string[]
   recordValue: (value: any) => unknown
+  interceptOptions: (options: any[]) => unknown[]
 }
 
 export type FieldNormalizer<T> = T & DefaultAttributes

packages/core/src/forms/capabilities/normalize-fields.ts

@@ -18,6 +18,7 @@ export class NormalizeFormFieldsHandler implements INormalizeFormFieldsHandler {
       name: fieldKey,
       errors: [],
       recordValue: (value: any) => value[fieldKey],
+      interceptOptions: (options: any[]) => options,
       wasFocused: false,
       modelValue: rawField.multiple ? [] : null,
       class: '',

packages/vue/src/forms/components/FFormBody.vue

@@ -60,8 +60,9 @@ onMounted(() => {
   const fields = Object.fromEntries(
     filterFields(props.fields, props.settings.mode).filter(([_, field]) => field.exclude !== true),
   )
-  const getForeignKeyValuesCommand = new GetForeignKeyValuesCommand(fields)
-  bus.execute(getForeignKeyValuesCommand)
+  bus.execute(
+    new GetForeignKeyValuesCommand(fields),
+  )
 })
 
 function getComponent(field: NormalizedField) {

packages/vue/src/tables/components/FTable.vue

@@ -1,41 +1,27 @@
 <template>
-  <slot name="table-header" v-bind="tableHeaderVBind()">
-    <f-table-header-actions
-      @create="() => baseTable.openCreateModal()"
-      @export="() => baseTable.exportData()"
-      :add="props.buttons.add"
-      :dump="props.buttons.dump"
-    />
+  <slot name="table-header" v-bind="tableHeaderVBind">
+    <f-table-header-actions v-bind="tableHeaderVBind" />
   </slot>
 
-  <slot name="table-form" v-bind="{ onSuccess: () => baseTable.onSuccess() }">
-    <f-modal v-model="table.settings.displayFormDialog">
+  <f-modal v-model="table.settings.displayFormDialog">
+    <slot name="table-form" v-bind="tableFormVBind">
       <div v-if="tableForm.settings.loading" class="loader-wrapper">
         <div :class="{ loader: tableForm.settings.loading }" />
       </div>
       <f-form
         v-else
-        @success="() => baseTable.onSuccess()"
-        v-bind="tableForm"
+        v-bind="tableFormVBind"
         :id="props.form.id"
       >
         <template v-for="(_, slotName) in slots" #[`${slotName}`]="bind" :key="slotName">
           <slot :name="slotName" v-bind="bind" />
         </template>
       </f-form>
-    </f-modal>
-  </slot>
+    </slot>
+  </f-modal>
 
-  <slot name="table-body" v-bind="tableBodyVBind()">
-    <f-table-body
-      @edit="(row: Row) => baseTable.openEditModal(row)"
-      @delete="(row: Row) => baseTable.onDelete(row)"
-      v-bind="$attrs"
-      :headers="headers"
-      :items="computedData"
-      :loading="table.list.isFetching"
-      :buttons="props.buttons"
-    >
+  <slot name="table-body" v-bind="tableBodyVBind">
+    <f-table-body v-bind="{ ...$attrs, ...tableBodyVBind }">
       <template v-for="(_, slotName) in slots" #[`${slotName}`]="bind" :key="slotName">
         <slot :name="slotName" v-bind="bind" />
       </template>
@@ -44,10 +30,7 @@
 
   <slot name="table-footer">
     <div class="flex justify-between mt-4">
-      <f-table-footer
-        @update:pagination="(newPagination: Pagination) => baseTable.setPagination(newPagination)"
-        :pagination="pagination"
-      />
+      <f-table-footer v-bind="tableFooterVBind" />
     </div>
   </slot>
 
@@ -104,21 +87,42 @@ const computedData = computed<any[]>(() => {
 
 baseTable.triggerFetchItems()
 
-function tableHeaderVBind() {
+const tableHeaderVBind = computed(() => {
   return {
-    openCreateModal: () => baseTable.openCreateModal(),
-    exportData: () => {
+    onCreate: () => baseTable.openCreateModal(),
+    onExport: () => {
       emit('export')
       baseTable.exportData()
     },
+    add: props.buttons.add,
+    dump: props.buttons.dump,
+  }
+})
+
+const tableFormVBind = computed(() => {
+  return {
+    ...tableForm,
+    id: props.form.id,
+    onSuccess: () => baseTable.onSuccess(),
   }
-}
+})
 
-function tableBodyVBind() {
+const tableBodyVBind = computed(() => {
   return {
     openEditModal: (row: Row) => baseTable.openEditModal(row),
+    onEdit: (row: Row) => baseTable.openEditModal(row),
     onDelete: (row: Row) => baseTable.onDelete(row),
-    setPagination: (p: Pagination) => baseTable.setPagination(p),
+    items: computedData.value,
+    loading: table.list.isFetching,
+    buttons: props.buttons,
+    headers: headers.value,
+  }
+})
+
+const tableFooterVBind = computed(() => {
+  return {
+    'pagination': props.pagination,
+    'onUpdate:pagination': (newPagination: Pagination) => baseTable.setPagination(newPagination),
   }
-}
+})
 </script>