diff --git a/components/ComponentPreview.vue b/components/ComponentPreview.vue
index 05078d3..92c5e47 100644
--- a/components/ComponentPreview.vue
+++ b/components/ComponentPreview.vue
@@ -492,6 +492,8 @@
@update:model-value="updateTableData"
@debug-data="(data) => console.log('[ComponentPreview] Table debug data:', data)"
@mounted="() => console.log('[ComponentPreview] RepeatingTable mounted with data:', getTableData(component.props.name))"
+ @custom-action="handleTableCustomAction"
+ @custom-navigation="handleTableCustomNavigation"
/>
@@ -873,7 +875,7 @@ const props = defineProps({
}
});
-const emit = defineEmits(['select-nested-component', 'form-data-updated', 'button-clicked']);
+const emit = defineEmits(['select-nested-component', 'form-data-updated', 'button-clicked', 'custom-action', 'custom-navigation']);
// Get access to the form builder store
const formStore = useFormBuilderStore();
@@ -2700,6 +2702,20 @@ onMounted(() => {
});
}
});
+
+// Custom Action Handlers for RepeatingTable
+const handleTableCustomAction = ({ action, rowData, event }) => {
+ console.log('[ComponentPreview] Table custom action:', { action, rowData, event })
+ // Emit to parent if needed
+ emit('custom-action', { action, rowData, event })
+}
+
+const handleTableCustomNavigation = ({ action, url, rowData }) => {
+ console.log('[ComponentPreview] Table custom navigation:', { action, url, rowData })
+ // Navigation is already handled by CustomActionButton
+ // Emit to parent if additional handling is needed
+ emit('custom-navigation', { action, url, rowData })
+}
\ No newline at end of file
diff --git a/components/FormBuilderFieldSettingsModal.vue b/components/FormBuilderFieldSettingsModal.vue
index 118ff5f..ecfe8f0 100644
--- a/components/FormBuilderFieldSettingsModal.vue
+++ b/components/FormBuilderFieldSettingsModal.vue
@@ -1258,6 +1258,114 @@ if (name && email) {
+
+
+
+
+
Custom Actions
+
+
+ Add Action
+
+
+
Add custom action buttons that appear in each table row
+
+
+
+
+
Action {{ index + 1 }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
No custom actions configured
+
Add custom actions to enable additional functionality in your table rows
+
+
+
@@ -3934,6 +4042,28 @@ const removeColumnOption = (columnIndex, optionIndex) => {
}
}
+// Custom actions management for repeating-table
+const addCustomAction = () => {
+ if (!configModel.value.customActions) {
+ configModel.value.customActions = []
+ }
+ configModel.value.customActions.push({
+ label: 'New Action',
+ url: '/action/{id}',
+ urlType: 'dynamic',
+ variant: 'primary',
+ target: '_self',
+ icon: '',
+ confirmMessage: ''
+ })
+}
+
+const removeCustomAction = (index) => {
+ if (configModel.value.customActions) {
+ configModel.value.customActions.splice(index, 1)
+ }
+}
+
const removeNestedComponent = (index) => {
if (configModel.value.children) {
configModel.value.children.splice(index, 1)
diff --git a/components/RepeatingTable.vue b/components/RepeatingTable.vue
index 3b5946c..0a3ed51 100644
--- a/components/RepeatingTable.vue
+++ b/components/RepeatingTable.vue
@@ -132,6 +132,16 @@
>
+
+
@@ -296,6 +306,7 @@
import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
import { v4 as uuidv4 } from 'uuid'
import { useDebounceFn } from '@vueuse/core'
+import CustomActionButton from './CustomActionButton.vue'
// SimpleCellValue component removed - using direct template rendering instead
@@ -314,7 +325,7 @@ const props = defineProps({
}
})
-const emit = defineEmits(['update:modelValue', 'debug-data', 'mounted'])
+const emit = defineEmits(['update:modelValue', 'debug-data', 'mounted', 'custom-action', 'custom-navigation'])
// Reactive state
const data = ref([...(props.modelValue || [])])
@@ -433,7 +444,7 @@ const isAddDisabled = computed(() => {
})
const showActions = computed(() => {
- return props.config.allowEdit || props.config.allowDelete
+ return props.config.allowEdit || props.config.allowDelete || (props.config.customActions && props.config.customActions.length > 0)
})
const showRecordCount = computed(() => {
@@ -775,6 +786,19 @@ onUnmounted(() => {
columnCache.value.clear()
recordKeys.value.clear()
})
+
+// Custom Action Handlers
+const handleCustomAction = ({ action, rowData, event }) => {
+ console.log('[RepeatingTable] Custom action clicked:', { action, rowData })
+ // Emit custom action event to parent for additional handling
+ emit('custom-action', { action, rowData, event })
+}
+
+const handleCustomNavigation = async ({ action, url, rowData }) => {
+ console.log('[RepeatingTable] Custom navigation:', { action, url, rowData })
+ // Emit navigation event to parent for additional handling
+ emit('custom-navigation', { action, url, rowData })
+}