@omnitend/dashboard-for-laravel 0.4.13 → 0.5.0

package/resources/js/components/extended/DXTable.vue

@@ -3,10 +3,18 @@
         <DRow class="justify-content-center">
             <DCol :md="columnSize">
                 <DCard>
-                    <template v-if="title || $slots.header" #header>
+                    <template v-if="title || createUrl || $slots.header" #header>
                         <slot name="header">
                             <div class="d-flex justify-content-between align-items-center">
                                 <h4 class="mb-0">{{ title }}</h4>
+                                <DButton
+                                    v-if="createUrl"
+                                    variant="primary"
+                                    size="sm"
+                                    @click="handleCreateNew"
+                                >
+                                    New {{ singularItemName }}
+                                </DButton>
                             </div>
                         </slot>
                     </template>
@@ -447,134 +455,76 @@
             :title="computedModalTitle"
             :size="editModalSize"
         >
-            <!-- Tabbed view (if editTabs provided) -->
-            <template v-if="editTabs && editTabs.length > 0 && editForm">
-                <DTabs v-model="activeTabIndex">
-                    <DTab
-                        v-for="(tab, index) in visibleTabs"
-                        :key="tab.key"
-                        :title="tab.label || tab.key"
-                        :lazy="tab.lazy"
-                        :active="index === 0"
-                    >
-                        <!-- Custom tab content slot -->
-                        <slot
-                            v-if="$slots[`tab-content(${tab.key})`]"
-                            :name="`tab-content(${tab.key})`"
-                            :item="selectedItem"
-                            :tab="tab"
-                        />
-
-                        <!-- Default: render fields for this tab -->
-                        <div v-else class="p-3">
-                            <!-- Before slot -->
-                            <slot :name="`tab-before(${tab.key})`" :item="selectedItem" :tab="tab" />
-
-                            <!-- Form fields for this tab -->
-                            <template v-for="fieldKey in tab.fieldKeys" :key="fieldKey">
-                                <div v-if="getField(fieldKey).span" class="mb-3">
-                                    <!-- Full-width span field -->
-                                    <slot
-                                        :name="`edit-span(${fieldKey})`"
-                                        :item="selectedItem"
-                                        :value="editForm.data[fieldKey]"
-                                        :update="(v: any) => editForm.data[fieldKey] = v"
-                                        :close="handleEditCancel"
-                                    />
-                                </div>
-                                <!-- Checkbox (no label wrapper needed) -->
-                                <div v-else-if="getField(fieldKey).type === 'checkbox'" class="mb-3">
-                                    <!-- Custom value slot -->
-                                    <slot
-                                        v-if="$slots[`edit-value(${fieldKey})`]"
-                                        :name="`edit-value(${fieldKey})`"
-                                        :item="selectedItem"
-                                        :value="editForm.data[fieldKey]"
-                                        :update="(v: any) => editForm.data[fieldKey] = v"
-                                        :field="getField(fieldKey)"
-                                    />
-                                    <DFormCheckbox
-                                        v-else
-                                        v-model="editForm.data[fieldKey]"
-                                    >
-                                        {{ getField(fieldKey).label || fieldKey }}
-                                    </DFormCheckbox>
-                                </div>
-                                <!-- Other field types with label -->
-                                <DFormGroup
-                                    v-else
-                                    :label="getFieldLabel(fieldKey)"
-                                    class="mb-3"
-                                >
-                                    <!-- Custom value slot -->
-                                    <slot
-                                        v-if="$slots[`edit-value(${fieldKey})`]"
-                                        :name="`edit-value(${fieldKey})`"
-                                        :item="selectedItem"
-                                        :value="editForm.data[fieldKey]"
-                                        :update="(v: any) => editForm.data[fieldKey] = v"
-                                        :field="getField(fieldKey)"
-                                    />
-                                    <DFormTextarea
-                                        v-else-if="getField(fieldKey).type === 'textarea'"
-                                        v-model="editForm.data[fieldKey]"
-                                        :required="getField(fieldKey).required"
-                                        :rows="getField(fieldKey).rows || 3"
-                                        :state="editForm.getState(fieldKey)"
-                                        :disabled="isFieldDisabled(fieldKey)"
-                                        @input="editForm.clearError(fieldKey)"
-                                    />
-                                    <DFormSelect
-                                        v-else-if="getField(fieldKey).type === 'select'"
-                                        v-model="editForm.data[fieldKey]"
-                                        :required="getField(fieldKey).required"
-                                        :options="getField(fieldKey).options"
-                                        :state="editForm.getState(fieldKey)"
-                                        :disabled="isFieldDisabled(fieldKey)"
-                                        @change="editForm.clearError(fieldKey)"
-                                    />
-                                    <DFormInput
-                                        v-else
-                                        v-model="editForm.data[fieldKey]"
-                                        :type="getField(fieldKey).type || 'text'"
-                                        :required="getField(fieldKey).required"
-                                        :step="getField(fieldKey).step"
-                                        :state="editForm.getState(fieldKey)"
-                                        :disabled="isFieldDisabled(fieldKey)"
-                                        @input="editForm.clearError(fieldKey)"
-                                    />
-                                    <!-- Validation error -->
-                                    <DFormInvalidFeedback v-if="editForm.hasError(fieldKey)">
-                                        {{ editForm.getError(fieldKey) }}
-                                    </DFormInvalidFeedback>
-                                    <!-- Hint text -->
-                                    <DFormText v-if="getFieldHint(fieldKey)" class="text-muted">
-                                        {{ getFieldHint(fieldKey) }}
-                                    </DFormText>
-                                </DFormGroup>
-                            </template>
-
-                            <!-- After slot -->
-                            <slot :name="`tab-after(${tab.key})`" :item="selectedItem" :tab="tab" />
-                        </div>
-                    </DTab>
-                </DTabs>
-            </template>
-
-            <!-- Fallback: no tabs, render flat form (current behavior) -->
-            <DXBasicForm
-                v-else-if="editForm"
+            <!-- Edit/create form (tabbed when editTabs provided, flat otherwise) -->
+            <DXForm
+                v-if="editForm"
+                v-model:active-tab="activeTabIndex"
                 :form="editForm"
-                :fields="resolvedEditFields"
+                :fields="editFields"
+                :tabs="editTabs"
+                :context="selectedItem ?? undefined"
                 :show-submit="false"
                 @submit="handleEditSave"
-            />
+            >
+                <!-- Forward DXTable's edit-value(key) → DXForm value(key) -->
+                <template
+                    v-for="key in editValueSlotKeys"
+                    :key="`ev-${key}`"
+                    #[`value(${key})`]="sp"
+                >
+                    <slot
+                        :name="`edit-value(${key})`"
+                        :item="selectedItem"
+                        :value="sp.value"
+                        :update="sp.update"
+                        :field="sp.field"
+                    />
+                </template>
+
+                <!-- Forward edit-span(key) → span(key) -->
+                <template
+                    v-for="key in editSpanSlotKeys"
+                    :key="`es-${key}`"
+                    #[`span(${key})`]="sp"
+                >
+                    <slot
+                        :name="`edit-span(${key})`"
+                        :item="selectedItem"
+                        :value="sp.value"
+                        :update="sp.update"
+                        :close="handleEditCancel"
+                    />
+                </template>
+
+                <!-- Forward tab-content / tab-before / tab-after slots -->
+                <template
+                    v-for="key in tabContentSlotKeys"
+                    :key="`tc-${key}`"
+                    #[`tab-content(${key})`]="sp"
+                >
+                    <slot :name="`tab-content(${key})`" :item="selectedItem" :tab="sp.tab" />
+                </template>
+                <template
+                    v-for="key in tabBeforeSlotKeys"
+                    :key="`tb-${key}`"
+                    #[`tab-before(${key})`]="sp"
+                >
+                    <slot :name="`tab-before(${key})`" :item="selectedItem" :tab="sp.tab" />
+                </template>
+                <template
+                    v-for="key in tabAfterSlotKeys"
+                    :key="`taf-${key}`"
+                    #[`tab-after(${key})`]="sp"
+                >
+                    <slot :name="`tab-after(${key})`" :item="selectedItem" :tab="sp.tab" />
+                </template>
+            </DXForm>
 
             <template #footer>
                 <div class="d-flex justify-content-between w-100">
                     <div>
                         <DButton
-                            v-if="deleteUrl"
+                            v-if="deleteUrl && !isCreateMode"
                             variant="danger"
                             :disabled="editForm?.processing"
                             @click="handleDelete"
@@ -591,7 +541,12 @@
                             :disabled="editForm?.processing"
                             @click="handleEditSave"
                         >
-                            {{ editForm?.processing ? 'Saving...' : 'Save Changes' }}
+                            <template v-if="isCreateMode">
+                                {{ editForm?.processing ? 'Creating...' : 'Create' }}
+                            </template>
+                            <template v-else>
+                                {{ editForm?.processing ? 'Saving...' : 'Save Changes' }}
+                            </template>
                         </DButton>
                     </div>
                 </div>
@@ -601,7 +556,7 @@
 </template>
 
 <script setup lang="ts" generic="T = any">
-import { computed, ref, watch } from "vue";
+import { computed, ref, watch, useSlots } from "vue";
 import { router } from "@inertiajs/vue3";
 import axios from "axios";
 import pluralize from "pluralize";
@@ -617,14 +572,7 @@ import DFormInput from "../base/DFormInput.vue";
 import DFormSelect from "../base/DFormSelect.vue";
 import DModal from "../base/DModal.vue";
 import DButton from "../base/DButton.vue";
-import DTabs from "../base/DTabs.vue";
-import DTab from "../base/DTab.vue";
-import DFormGroup from "../base/DFormGroup.vue";
-import DFormTextarea from "../base/DFormTextarea.vue";
-import DFormCheckbox from "../base/DFormCheckbox.vue";
-import DFormInvalidFeedback from "../base/DFormInvalidFeedback.vue";
-import DFormText from "../base/DFormText.vue";
-import DXBasicForm from "./DXBasicForm.vue";
+import DXForm from "./DXForm.vue";
 export type FilterType = 'text' | 'select' | 'number' | 'date' | false;
 
 export interface FilterOption {
@@ -784,6 +732,9 @@ export interface Props<TItem = any> {
     /** API endpoint pattern for deletions (e.g., "/api/products/:id") */
     deleteUrl?: string;
 
+    /** API endpoint for creating new items (e.g., "/api/products") — enables "New" button */
+    createUrl?: string;
+
     /** Enable client-side filtering, sorting, and pagination on items array */
     clientSide?: boolean;
 }
@@ -821,6 +772,8 @@ const emit = defineEmits<{
     filterChange: [filters: Record<string, string>];
     perPageChange: [perPage: number];
     rowClicked: [item: T, index: number, event: MouseEvent];
+    rowCreated: [item: any, response: any];
+    createError: [error: any];
     rowUpdated: [item: T, response: any];
     editError: [item: T, error: any];
     rowDeleted: [item: T, response: any];
@@ -1425,6 +1378,7 @@ const showEditModal = ref(false);
 const selectedItem = ref<T | null>(null);
 const editForm = ref<any>(null);
 const activeTabIndex = ref(0);
+const isCreateMode = ref(false);
 
 // Toast (may not be available in test environment)
 let createToast: ((obj: any) => any) | undefined;
@@ -1436,67 +1390,35 @@ try {
     createToast = undefined;
 }
 
-// Computed: Visible tabs (respects when condition)
-const visibleTabs = computed(() => {
-    if (!props.editTabs || props.editTabs.length === 0) return [];
-
-    return props.editTabs.filter(tab => {
-        if (tab.when === undefined) return true;
-        return typeof tab.when === 'function'
-            ? tab.when(selectedItem.value)
-            : tab.when;
-    });
-});
-
-// Helper: Get field by key
-const getField = (key: string) => {
-    return props.editFields?.find(f => f.key === key) || { key };
-};
-
-// Helper: Get field label (supports function for dynamic labels)
-const getFieldLabel = (key: string): string => {
-    const field = getField(key);
-    if (typeof field.label === 'function') {
-        return field.label(selectedItem.value);
-    }
-    return field.label || key;
-};
-
-// Helper: Get field hint (supports function for dynamic hints)
-const getFieldHint = (key: string): string | undefined => {
-    const field = getField(key);
-    if (typeof field.hint === 'function') {
-        return field.hint(selectedItem.value);
-    }
-    return field.hint;
-};
-
-// Helper: Check if field is disabled (supports disabledWhen function)
-const isFieldDisabled = (key: string): boolean => {
-    const field = getField(key);
-    if (typeof field.disabledWhen === 'function') {
-        return field.disabledWhen(selectedItem.value);
-    }
-    return field.disabled || false;
-};
-
-// Computed: Resolve edit fields with dynamic labels/hints for DXBasicForm
-const resolvedEditFields = computed(() => {
-    if (!props.editFields) return [];
-
-    return props.editFields.map(field => ({
-        ...field,
-        label: typeof field.label === 'function'
-            ? field.label(selectedItem.value)
-            : field.label,
-        hint: typeof field.hint === 'function'
-            ? field.hint(selectedItem.value)
-            : field.hint,
-        disabled: typeof field.disabledWhen === 'function'
-            ? field.disabledWhen(selectedItem.value)
-            : field.disabled,
-    }));
-});
+// The edit/create form rendering is delegated to DXForm, which
+// owns field/tab visibility, dynamic labels/hints, conditional fields,
+// and auto-switching to the first tab with a validation error.
+
+// Forward only the keyed edit slots the consumer actually provided, so
+// DXForm doesn't mistake an always-present (but empty) wrapper for
+// a real custom-value override.
+const tableSlots = useSlots();
+const editFieldKeys = computed<string[]>(() =>
+    (props.editFields ?? []).map((field: any) => field.key),
+);
+const tabKeys = computed<string[]>(() =>
+    (props.editTabs ?? []).map((tab) => tab.key),
+);
+const editValueSlotKeys = computed(() =>
+    editFieldKeys.value.filter((key) => !!tableSlots[`edit-value(${key})`]),
+);
+const editSpanSlotKeys = computed(() =>
+    editFieldKeys.value.filter((key) => !!tableSlots[`edit-span(${key})`]),
+);
+const tabContentSlotKeys = computed(() =>
+    tabKeys.value.filter((key) => !!tableSlots[`tab-content(${key})`]),
+);
+const tabBeforeSlotKeys = computed(() =>
+    tabKeys.value.filter((key) => !!tableSlots[`tab-before(${key})`]),
+);
+const tabAfterSlotKeys = computed(() =>
+    tabKeys.value.filter((key) => !!tableSlots[`tab-after(${key})`]),
+);
 
 // Computed: Singular and plural item names
 const singularItemName = computed(() => props.itemName);
@@ -1504,6 +1426,9 @@ const pluralItemName = computed(() => pluralize(props.itemName));
 
 // Computed: Modal title (supports function)
 const computedModalTitle = computed(() => {
+    if (isCreateMode.value) {
+        return `New ${singularItemName.value}`;
+    }
     if (!selectedItem.value) {
         return `Edit ${singularItemName.value}`;
     }
@@ -1529,6 +1454,7 @@ const handleRowClick = (item: T, index: number, event: MouseEvent) => {
     // If editFields provided, open edit modal
     if (props.editFields && props.editFields.length > 0) {
         // Set selected item FIRST before any rendering
+        isCreateMode.value = false;
         selectedItem.value = item;
 
         // Reset to first tab
@@ -1560,9 +1486,89 @@ const handleRowClick = (item: T, index: number, event: MouseEvent) => {
     }
 };
 
+// Handle "New" button click
+const handleCreateNew = () => {
+    if (!props.editFields || props.editFields.length === 0) return;
+
+    isCreateMode.value = true;
+    selectedItem.value = null;
+    activeTabIndex.value = 0;
+
+    const initForm = (useForm: any) => {
+        const formData: Record<string, any> = {};
+        props.editFields!.forEach(field => {
+            formData[field.key] = field.default ?? '';
+        });
+        editForm.value = useForm(formData);
+        showEditModal.value = true;
+    };
+
+    if (!editForm.value) {
+        import('../../composables/useForm').then(({ useForm }) => {
+            initForm(useForm);
+        });
+    } else {
+        // Reset existing form to defaults
+        props.editFields!.forEach(field => {
+            editForm.value.data[field.key] = field.default ?? '';
+        });
+        editForm.value.clearErrors();
+        showEditModal.value = true;
+    }
+};
+
 // Handle save from edit modal
 const handleEditSave = async () => {
-    if (!editForm.value || !selectedItem.value) return;
+    if (!editForm.value) return;
+
+    // Create mode: POST to createUrl
+    if (isCreateMode.value && props.createUrl) {
+        try {
+            await editForm.value.post(props.createUrl, {
+                onSuccess: (data: any) => {
+                    createToast?.({
+                        title: 'Success',
+                        body: `${singularItemName.value} created successfully`,
+                        variant: 'success',
+                        modelValue: 3000,
+                    });
+
+                    emit('rowCreated', data?.data ?? data, data);
+                    showEditModal.value = false;
+                    selectedItem.value = null;
+                    isCreateMode.value = false;
+
+                    refresh();
+                },
+                onError: (errors: any) => {
+                    let errorMessage = 'Failed to create. Please check the form for errors.';
+                    if (errors && typeof errors === 'object') {
+                        const firstError = Object.values(errors).flat()[0];
+                        if (typeof firstError === 'string') {
+                            errorMessage = firstError;
+                        }
+                    }
+
+                    createToast?.({
+                        title: 'Error',
+                        body: errorMessage,
+                        variant: 'danger',
+                        modelValue: 5000,
+                    });
+
+                    // DXForm switches to the first errored tab via its
+                    // own watcher on editForm.errors.
+                    emit('createError', errors);
+                }
+            });
+        } catch (error) {
+            emit('createError', error);
+        }
+        return;
+    }
+
+    // Edit mode: PUT to editUrl
+    if (!selectedItem.value) return;
 
     try {
         // If editUrl provided, handle API call internally
@@ -1605,17 +1611,8 @@ const handleEditSave = async () => {
                         modelValue: 5000, // Auto-dismiss after 5 seconds
                     });
 
-                    // Switch to tab containing error field
-                    if (props.editTabs && props.editTabs.length > 0) {
-                        const errorKeys = Object.keys(errors);
-                        const tabIndex = visibleTabs.value.findIndex(tab =>
-                            tab.fieldKeys.some(key => errorKeys.includes(key))
-                        );
-                        if (tabIndex !== -1) {
-                            activeTabIndex.value = tabIndex;
-                        }
-                    }
-
+                    // DXForm switches to the first errored tab via its
+                    // own watcher on editForm.errors.
                     emit('editError', selectedItem.value as T, errors);
                 }
             });
@@ -1634,6 +1631,7 @@ const handleEditSave = async () => {
 const handleEditCancel = () => {
     showEditModal.value = false;
     selectedItem.value = null;
+    isCreateMode.value = false;
     activeTabIndex.value = 0; // Reset tab for next time
     if (editForm.value) {
         editForm.value.clearErrors();

package/resources/js/composables/defineForm.ts

@@ -32,7 +32,14 @@ function getDefaultValueForType(type: FieldType): any {
         case "checkbox":
             return false;
         case "number":
+        case "currency":
+        case "percentage":
             return 0;
+        case "repeater":
+            return [];
+        case "image":
+        case "file":
+            return null;
         case "select":
         case "radio":
             return "";

package/resources/js/index.ts

@@ -6,8 +6,15 @@ export * from 'bootstrap-vue-next';
 
 // Extended components (custom functionality beyond Bootstrap Vue Next)
 export { default as DXDashboard } from "./components/extended/DXDashboard.vue";
-export { default as DXBasicForm } from "./components/extended/DXBasicForm.vue";
 export { default as DXForm } from "./components/extended/DXForm.vue";
+export { default as DXField } from "./components/extended/DXField.vue";
+export { default as DXRepeater } from "./components/extended/DXRepeater.vue";
+/**
+ * @deprecated Use `DXForm`. `DXBasicForm` is a thin wrapper around `DXForm`
+ * (a flat form is just `DXForm` without a `tabs` prop) that logs a one-time
+ * deprecation warning. It will be removed in a future major version.
+ */
+export { default as DXBasicForm } from "./components/extended/DXBasicForm.vue";
 export { default as DXTable } from "./components/extended/DXTable.vue";
 export { default as DXDashboardSidebar } from "./components/extended/DXDashboardSidebar.vue";
 export { default as DXDashboardNavbar } from "./components/extended/DXDashboardNavbar.vue";
@@ -37,6 +44,7 @@ export { default as DFormGroup } from "./components/base/DFormGroup.vue";
 export { default as DFormInput } from "./components/base/DFormInput.vue";
 export { default as DFormInvalidFeedback } from "./components/base/DFormInvalidFeedback.vue";
 export { default as DFormRadio } from "./components/base/DFormRadio.vue";
+export { default as DFormRadioGroup } from "./components/base/DFormRadioGroup.vue";
 export { default as DFormSelect } from "./components/base/DFormSelect.vue";
 export { default as DFormSpinbutton } from "./components/base/DFormSpinbutton.vue";
 export { default as DFormTags } from "./components/base/DFormTags.vue";
@@ -82,6 +90,9 @@ export type {
     FieldType,
     FieldOption,
     FieldDefinition,
+    FormTab,
+    MaybeFn,
+    OptionsLoader,
 } from "./types";
 
 export type {