fix: inject overriding

fancy-crud · Feb 1, 2024 · 12c0327 · 12c0327
1 parent 0b6757b
commit 12c0327
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 69 deletions.
diff --git a/demo-element-plus/src/viewer/FTableViewer.vue b/demo-element-plus/src/viewer/FTableViewer.vue
@@ -13,96 +13,104 @@
 
     <el-input v-model="r" />
 
-    <el-select v-model="table.filterParams.gender">
+    <!-- <el-select v-model="table.filterParams.gender">
       <el-option value="m">
         Male
       </el-option>
-    </el-select>
-    <f-table v-bind="table">
+    </el-select> -->
+    <!-- <f-table v-bind="table">
       <template #column-created_at>
         <a href="https://google.com" class="underline text-primary-500" target="_blank">Haz click</a>
       </template>
       <template #column-actions-prepend>
         'hello'
       </template>
-    </f-table>
+    </f-table> -->
   </div>
+
+  <button @click="generate">
+    Generate
+  </button>
 </template>
 
 <script lang='ts' setup>
 import { FieldType, useForm, useTable } from '@fancy-crud/vue'
 
 const r = ref(1)
 
-const form = useForm({
-  id: 'formulario',
-  fields: {
-    name: {
-      type: FieldType.text,
-      label: 'First name',
-      placeholder: 'First name',
-      wrapper: {
-        class: 'col-span-12',
+function generate() {
+  const form = useForm({
+    id: 'formulario',
+    fields: {
+      name: {
+        type: FieldType.text,
+        label: 'First name',
+        placeholder: 'First name',
+        wrapper: {
+          class: 'col-span-12',
+        },
       },
-    },
-    gender: {
-      type: FieldType.select,
-      label: 'Select',
-      optionLabel: 'label',
-      optionValue: 'value',
-      options: [
-        { label: 'Male', value: 'm' },
-        { label: 'Female', value: 'f' },
-      ],
-    },
-    created_at: {
-      type: FieldType.text,
-      label: 'Created at',
-      updateOnly: true,
-      readonly: true,
-      disabled: true,
-      wrapper: {
-        class: 'col-span-12',
+      gender: {
+        type: FieldType.select,
+        label: 'Select',
+        optionLabel: 'label',
+        optionValue: 'value',
+        options: [
+          { label: 'Male', value: 'm' },
+          { label: 'Female', value: 'f' },
+        ],
       },
+      created_at: {
+        type: FieldType.text,
+        label: 'Created at',
+        updateOnly: true,
+        readonly: true,
+        disabled: true,
+        wrapper: {
+          class: 'col-span-12',
+        },
+      },
+    },
+    settings: {
+      url: 'artists/',
+      title: '{{ Crear artista | Actualizar artista }}',
     },
-  },
-  settings: {
-    url: 'artists/',
-    title: '{{ Crear artista | Actualizar artista }}',
-  },
-  responseInterceptor: {
+    responseInterceptor: {
     // 201: (formId, response) => {
     //   console.log('🚀 ~ file: FTableViewer.vue:65 ~ response:', response)
     //   console.log(response)
     // },
-  },
-})
-
-const table = useTable({
-  form,
-  columns: {
-    gender: {
-      format: (value: string) => value === 'm' ? 'Male' : 'Female',
-      width: 700,
-    },
-    created_at: {
-      format: (value: string) => 'anything',
-    },
-    actions: { value: 'actions', label: '', width: '200px', align: 'right' },
-  },
-  pagination: {
-    rowsPerPage: 10,
-    hidden: true,
-  },
-  filterParams: {
-    gender: '',
-  },
-  buttons: {
-    edit: {
-      // onClick(row) {
-      //   console.log('🚀 ~ onClick ~ row:', row)
-      // },
     },
-  },
-})
+  })
+
+  console.log(form)
+}
+
+// const table = useTable({
+//   form,
+//   columns: {
+//     gender: {
+//       format: (value: string) => value === 'm' ? 'Male' : 'Female',
+//       width: 700,
+//     },
+//     created_at: {
+//       format: (value: string) => 'anything',
+//     },
+//     actions: { value: 'actions', label: '', width: '200px', align: 'right' },
+//   },
+//   pagination: {
+//     rowsPerPage: 10,
+//     hidden: true,
+//   },
+//   filterParams: {
+//     gender: '',
+//   },
+//   buttons: {
+//     edit: {
+//       // onClick(row) {
+//       //   console.log('🚀 ~ onClick ~ row:', row)
+//       // },
+//     },
+//   },
+// })
 </script>
diff --git a/packages/vue/src/forms/composables/form.ts b/packages/vue/src/forms/composables/form.ts
@@ -6,7 +6,7 @@ import type {
   RawFormButtons,
   RawSetting,
 } from '@fancy-crud/core'
-import { Bus, CreateFormCommand, IFormStore } from '@fancy-crud/core'
+import { Bus, CreateFormCommand, IFormStore, inject as injecting } from '@fancy-crud/core'
 import type { Args, UseForm } from '../typing'
 
 export function useForm<
@@ -24,7 +24,7 @@ export function useForm<
     notifications = {},
   } = args
 
-  const formStore: IFormStore = inject(IFormStore.name)!
+  const formStore: IFormStore = injecting(IFormStore.name)!
   const bus = new Bus()
 
   const {