first commit 🔥

Author: fadymondy

package.json

@@ -48,7 +48,11 @@
         "prepublishOnly": "npm run build:npm",
         "format": "prettier --write resources/",
         "format:check": "prettier --check resources/",
-        "lint": "eslint . --fix"
+        "lint": "eslint . --fix",
+        "test": "npx playwright test",
+        "test:headed": "npx playwright test --headed",
+        "test:ui": "npx playwright test --ui",
+        "test:debug": "npx playwright test --debug"
     },
     "peerDependencies": {
         "@inertiajs/vue3": "^2.0.0",

playwright-report/index.html

@@ -0,0 +1,45 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * Laravilt Forms Package - E2E Testing Configuration
+ *
+ * Tests form components (TextInput, Select, Toggle, DatePicker, etc.)
+ * against the demo application
+ */
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [['html', { open: 'never' }], ['list']],
+
+  use: {
+    baseURL: process.env.APP_URL || 'https://laravilt.test',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'on-first-retry',
+    ignoreHTTPSErrors: true,
+    actionTimeout: 10000,
+    navigationTimeout: 30000,
+  },
+
+  projects: [
+    {
+      name: 'setup',
+      testMatch: /.*\.setup\.ts/,
+    },
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: 'tests/e2e/.auth/user.json',
+      },
+      dependencies: ['setup'],
+    },
+  ],
+
+  timeout: 30000,
+  expect: { timeout: 5000 },
+  outputDir: 'test-results/',
+})

playwright.config.ts

@@ -1,2 +1,13 @@
 // Laravilt Forms Package Entry Point
-export { default as FormRenderer } from './components/FormRenderer.vue';
+import FormRenderer from './components/FormRenderer.vue'
+import Select from './components/fields/Select.vue'
+
+export { FormRenderer, Select }
+
+export default {
+    install(app, options = {}) {
+        // Register global components with laravilt- prefix for LaraviltComponentRenderer
+        app.component('laravilt-select', Select)
+        app.component('FormRenderer', FormRenderer)
+    }
+}

resources/js/app.ts

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { provide, computed } from 'vue'
+import { provide, computed, watch } from 'vue'
 
 const props = defineProps<{
     errors: Record<string, string | string[]>
 }>()
 
 // Provide errors to all child components
-provide('errors', computed(() => props.errors || {}))
+const errorsComputed = computed(() => props.errors || {})
+provide('errors', errorsComputed)
 </script>
 
 <template>

resources/js/components/ErrorProvider.vue

@@ -1,33 +1,60 @@
 <template>
     <form ref="formRef" :class="containerClass" @submit.prevent>
         <template v-for="(component, index) in internalSchema" :key="component.name || component.id || index">
-            <!-- Render action buttons with form data -->
+            <!-- Group consecutive actions together (only render on first action in group) -->
+            <div v-if="isAction(component) && !isPreviousItemAction(index) && isNextItemAction(index)" class="flex flex-wrap gap-2 items-start">
+                <FormActionButton
+                    v-bind="component"
+                    :getFormData="getFormData"
+                />
+                <template v-for="(nextComponent, nextIndex) in getConsecutiveActions(index)" :key="nextComponent.name || nextComponent.id || (index + nextIndex + 1)">
+                    <FormActionButton
+                        v-bind="nextComponent"
+                        :getFormData="getFormData"
+                    />
+                </template>
+            </div>
+
+            <!-- Render single action (not part of a group) -->
             <FormActionButton
-                v-if="isAction(component)"
+                v-else-if="isAction(component) && !isPreviousItemAction(index) && !isNextItemAction(index)"
                 v-bind="component"
                 :getFormData="getFormData"
             />
 
             <!-- Render regular form components -->
             <component
-                v-else
+                v-else-if="!isAction(component)"
                 :is="getComponent(component)"
                 v-bind="getComponentProps(component)"
                 :value="isSchemaComponent(component) ? undefined : internalFormData[component.name]"
                 :modelValue="isSchemaComponent(component) ? internalFormData : undefined"
+                :error="getError(component)"
                 @update:model-value="(value) => handleComponentUpdate(component, value)"
             />
         </template>
     </form>
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent, onMounted, onUnmounted, computed, h, ref, watch, provide, nextTick } from 'vue'
+import { defineAsyncComponent, onMounted, onUnmounted, computed, h, ref, watch, provide, inject, nextTick } from 'vue'
 import ActionButton from '@laravilt/actions/components/ActionButton.vue'
 
 const formRef = ref<HTMLFormElement | null>(null)
 const internalFormData = ref<Record<string, any>>({})
 
+// Local validation errors for client-side validation
+const localErrors = ref<Record<string, string>>({})
+
+// Inject errors from ErrorProvider (it's a computed ref)
+const injectedErrors = inject<any>('errors', {})
+
+// Merged errors: local client-side errors + server-side errors
+const errors = computed(() => {
+    const serverErrors = injectedErrors?.value || injectedErrors || {}
+    return { ...localErrors.value, ...serverErrors }
+})
+
 // Create a wrapper component for form actions that can collect form data
 const FormActionButton = {
     props: {
@@ -295,20 +322,95 @@ const getFormData = () => {
     return { ...internalFormData.value }
 }
 
-// Validate the form using HTML5 validation
+// Extract required fields from schema recursively
+const extractRequiredFields = (schema: Array<any>): Array<{ name: string; label: string }> => {
+    const requiredFields: Array<{ name: string; label: string }> = []
+    const schemaComponentTypes = ['tabs', 'section', 'grid']
+
+    if (!schema || !Array.isArray(schema)) {
+        return requiredFields
+    }
+
+    for (const component of schema) {
+        // Skip actions
+        if (component.hasAction === true || (component.name && !component.component)) {
+            continue
+        }
+
+        // If it's a tabs component, extract from all tabs
+        if (component.component === 'tabs' && component.tabs && Array.isArray(component.tabs)) {
+            for (const tab of component.tabs) {
+                if (tab.schema && Array.isArray(tab.schema)) {
+                    requiredFields.push(...extractRequiredFields(tab.schema))
+                }
+            }
+            continue
+        }
+
+        // If it's a schema component (section, grid), recurse into its schema
+        if (schemaComponentTypes.includes(component.component) && component.schema && Array.isArray(component.schema)) {
+            requiredFields.push(...extractRequiredFields(component.schema))
+            continue
+        }
+
+        // If it has a name and is required, add to the list
+        if (component.name && component.required) {
+            requiredFields.push({
+                name: component.name,
+                label: component.label || component.name
+            })
+        }
+    }
+
+    return requiredFields
+}
+
+// Check if a value is empty (null, undefined, empty string, empty array)
+const isValueEmpty = (value: any): boolean => {
+    if (value === null || value === undefined) return true
+    if (typeof value === 'string' && value.trim() === '') return true
+    if (Array.isArray(value) && value.length === 0) return true
+    return false
+}
+
+// Validate the form - combines HTML5 validation with custom required field checks
 const validateForm = () => {
-    if (!formRef.value) {
-        return true
+    // Clear previous local validation errors
+    localErrors.value = {}
+
+    // Get all required fields from schema
+    const requiredFields = extractRequiredFields(internalSchema.value)
+
+    // Check each required field
+    const newErrors: Record<string, string> = {}
+    for (const field of requiredFields) {
+        const value = internalFormData.value[field.name]
+        if (isValueEmpty(value)) {
+            newErrors[field.name] = `${field.label} is required.`
+        }
     }
 
-    const isValid = formRef.value.checkValidity()
+    // If there are validation errors, set them and return false
+    if (Object.keys(newErrors).length > 0) {
+        localErrors.value = newErrors
+        return false
+    }
 
-    if (!isValid) {
-        // Trigger validation UI (show error messages)
-        formRef.value.reportValidity()
+    // Also run HTML5 validation for native form elements
+    if (formRef.value) {
+        const isHtml5Valid = formRef.value.checkValidity()
+        if (!isHtml5Valid) {
+            formRef.value.reportValidity()
+            return false
+        }
     }
 
-    return isValid
+    return true
+}
+
+// Clear local validation errors (useful when modal closes or form resets)
+const clearValidationErrors = () => {
+    localErrors.value = {}
 }
 
 // Function to update schema (for reactive fields)
@@ -338,18 +440,52 @@ const updateSchema = (newSchema: any[]) => {
     })
 }
 
-// Provide getFormData, validateForm, updateSchema, and schemaId to all child components
+// Provide getFormData, validateForm, updateSchema, schemaId, and errors to all child components
 provide('getFormData', getFormData)
 provide('validateForm', validateForm)
 provide('updateSchema', updateSchema)
 provide('schemaId', props.schemaId || null)
+// Override the errors provided by ErrorProvider with our merged errors (local + server)
+provide('errors', errors)
+
+// Expose getFormData, validateForm, and clearValidationErrors to parent components via template ref
+defineExpose({
+    getFormData,
+    validateForm,
+    clearValidationErrors
+})
 
 // Check if an item is an action
 const isAction = (item: any) => {
     // Actions have hasAction property or don't have a component property
     return item.hasAction === true || (item.name && !item.component)
 }
 
+// Check if the next item is an action
+const isNextItemAction = (index: number) => {
+    const nextItem = internalSchema.value[index + 1]
+    return nextItem && isAction(nextItem)
+}
+
+// Check if the previous item is an action
+const isPreviousItemAction = (index: number) => {
+    const prevItem = internalSchema.value[index - 1]
+    return prevItem && isAction(prevItem)
+}
+
+// Get all consecutive actions starting from the next index
+const getConsecutiveActions = (startIndex: number) => {
+    const actions = []
+    let currentIndex = startIndex + 1
+
+    while (currentIndex < internalSchema.value.length && isAction(internalSchema.value[currentIndex])) {
+        actions.push(internalSchema.value[currentIndex])
+        currentIndex++
+    }
+
+    return actions
+}
+
 // Check if a component is a schema component (needs entire modelValue, not just a field value)
 const isSchemaComponent = (component: any) => {
     const schemaComponents = ['tabs', 'section', 'grid']
@@ -416,4 +552,13 @@ const getComponentProps = (component: any) => {
     const { value, modelValue, ...props } = component
     return props
 }
+
+// Get error message for a component
+const getError = (component: any) => {
+    // errors is a computed ref, access its value
+    const errorsObj = errors.value
+    if (!component.name || !errorsObj) return undefined
+    const error = errorsObj[component.name]
+    return Array.isArray(error) ? error[0] : error
+}
 </script>

resources/js/components/FormRenderer.vue

@@ -32,18 +32,15 @@ const toKebabCase = (str) => {
 const resolvedComponent = computed(() => {
     const kebabName = toKebabCase(props.component);
     const componentName = `laravilt-${kebabName}`;
-    console.log('Trying to resolve component:', componentName, 'from', props.component);
 
     // Try to get the component from the app context
     const component = instance?.appContext.components[componentName];
 
     if (component) {
-        console.log('✓ Resolved component:', componentName);
         return component;
     }
 
     console.error(`Failed to resolve component: ${componentName}`);
-    console.log('Available components:', Object.keys(instance?.appContext.components || {}));
     return 'div'; // Fallback to div
 });
 

resources/js/components/LaraviltComponentRenderer.vue

@@ -315,17 +315,10 @@ const normalizePath = (path?: string | null) => {
   return path.startsWith('/') ? path : `/${path}`
 }
 
-// Build upload URL from the current panel path so custom panel paths work
-const uploadUrl = computed(() => {
-  // Check if we have a panel context from Inertia
-  if (page?.props?.panel?.path) {
-    const panelPath = normalizePath(page.props.panel.path)
-    return `${panelPath}/uploads`
-  }
-
-  // Fallback to root uploads route (for standalone usage or demo)
-  return '/uploads'
-})
+// Upload URL is always at /uploads (global route from forms package)
+// Panel-specific upload routes are not used since the forms package
+// registers routes at the root level for all panels
+const uploadUrl = computed(() => '/uploads')
 
 const temporaryUrlEndpoint = computed(() => `${uploadUrl.value}/temporary-url`)