innoboxrr-vue-datatable 1.2.26 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "innoboxrr-vue-datatable",
-  "version": "1.2.26",
+  "version": "1.3.0",
   "description": "Datatable para vue3",
   "main": "index.js",
   "scripts": {

package/src/DataTable.vue

@@ -101,6 +101,7 @@
 
 <script>
 
+	import { markRaw } from 'vue';
 	import NavDropdownComponent from './components/NavDropdownComponent.vue'
 	import IconRouteComponent from './components/IconRouteComponent.vue'
 	import IconLinkComponent from './components/IconLinkComponent.vue'
@@ -190,7 +191,7 @@
 					meta: [],
 					links: []
 				},
-				dataTableComponents: this.model.dataTableComponents(),
+				dataTableComponents: this.registerComponents(),
 				sort: this.model.dataTableSort(),
 				orderBy: 'id',
 				internalSort: false,
@@ -228,6 +229,15 @@
 				}
 				return cols;
 			},
+			registerComponents() {
+				// Usar `markRaw` para cada componente
+				let components = Object.keys(this.model.dataTableComponents())
+					.reduce((acc, key) => {
+						acc[key] = markRaw(this.model.dataTableComponents()[key]);
+						return acc;
+					}, {});
+				return components;
+			},
 			fetchData() {	
 				const requestData = {
 					method: this.dataMethod,

package/src/components/DataTableComponent.vue

@@ -97,7 +97,6 @@
 
 <script>
 	
-	import { shallowRef } from 'vue';
 	import NavDropdownComponent from './NavDropdownComponent.vue'
 	import IconRouteComponent from './IconRouteComponent.vue'
 	import IconLinkComponent from './IconLinkComponent.vue'
@@ -134,12 +133,8 @@
 		},
 		emits: ['sortColumn', 'actionButtonClicked', 'actionClicked'],
 		setup(props) {
-			// Registrar componentes dinámicos
-			const components = shallowRef(props.dataTableComponents);
-
-			// Resolver el componente dinámico desde el mapeo
 			const getComponent = (componentName) => {
-				return components.value[componentName] || null;
+				return props.dataTableComponents[componentName] || null;
 			};
 
 			return {