@omnitend/dashboard-for-laravel 0.4.11 → 0.4.14

package/dist/types/index.d.ts

@@ -34,4 +34,10 @@ export interface FieldDefinition {
     class?: string;
     /** Additional props to pass to the input component */
     inputProps?: Record<string, any>;
+    /**
+     * Conditionally show or hide this field. When omitted, the field
+     * is always visible. The function is re-evaluated reactively, so
+     * it can depend on form state or other reactive sources.
+     */
+    show?: () => boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.4.11",
+  "version": "0.4.14",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",
@@ -90,7 +90,6 @@
     "vite": "^6.4.1",
     "vitest": "^4.0.3",
     "vitest-browser-vue": "^2.0.0",
-    "vue": "^3.5.25",
     "vue-tsc": "^2.2.12"
   },
   "keywords": [

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

@@ -11,7 +11,7 @@
         </DAlert>
 
         <!-- Render each field -->
-        <template v-for="field in fields" :key="field.key">
+        <template v-for="field in visibleFields" :key="field.key">
             <!-- Custom slot for this field -->
             <slot :name="`field-${field.key}`" :field="field" :form="form">
                 <!-- Default field rendering -->
@@ -111,6 +111,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import { BForm, BFormRadioGroup } from "bootstrap-vue-next";
 import DAlert from "../base/DAlert.vue";
 import DFormGroup from "../base/DFormGroup.vue";
@@ -141,12 +142,23 @@ interface Props {
     showSubmit?: boolean;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
     submitText: "Submit",
     submitLoadingText: "Submitting...",
     showSubmit: true,
 });
 
+/**
+ * Fields whose `show()` predicate evaluates to true (or omits the
+ * predicate entirely). Computed so the form re-renders when reactive
+ * sources used inside `show` change.
+ */
+const visibleFields = computed(() => {
+    return props.fields.filter((field) =>
+        field.show ? field.show() : true,
+    );
+});
+
 const emit = defineEmits<{
     submit: [];
 }>();

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>
@@ -503,7 +511,7 @@
                                 <!-- Other field types with label -->
                                 <DFormGroup
                                     v-else
-                                    :label="getField(fieldKey).label || fieldKey"
+                                    :label="getFieldLabel(fieldKey)"
                                     class="mb-3"
                                 >
                                     <!-- Custom value slot -->
@@ -521,20 +529,36 @@
                                         :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>
 
@@ -549,7 +573,7 @@
             <DXBasicForm
                 v-else-if="editForm"
                 :form="editForm"
-                :fields="editFields"
+                :fields="resolvedEditFields"
                 :show-submit="false"
                 @submit="handleEditSave"
             />
@@ -558,7 +582,7 @@
                 <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"
@@ -575,7 +599,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>
@@ -607,6 +636,7 @@ 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";
 export type FilterType = 'text' | 'select' | 'number' | 'date' | false;
 
@@ -767,6 +797,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;
 }
@@ -804,6 +837,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];
@@ -1408,6 +1443,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,12 +1472,60 @@ 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,
+    }));
+});
+
 // Computed: Singular and plural item names
 const singularItemName = computed(() => props.itemName);
 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}`;
     }
@@ -1467,6 +1551,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
@@ -1498,9 +1583,97 @@ 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,
+                    });
+
+                    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;
+                        }
+                    }
+
+                    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
@@ -1572,6 +1745,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/types/index.ts

@@ -58,4 +58,11 @@ export interface FieldDefinition {
 
     /** Additional props to pass to the input component */
     inputProps?: Record<string, any>;
+
+    /**
+     * Conditionally show or hide this field. When omitted, the field
+     * is always visible. The function is re-evaluated reactively, so
+     * it can depend on form state or other reactive sources.
+     */
+    show?: () => boolean;
 }