@fidt/dynamic-form 0.0.0

package/README.md

@@ -0,0 +1,458 @@
+# @fidt/dynamic-form
+
+Thư viện dynamic form cho Vue 3 với hỗ trợ validation tích hợp (Zod, ArkType).
+
+## ✨ Tính năng
+
+- 🎯 **Dynamic Form Generation** - Tạo form từ schema JSON
+- 📐 **Flexible Layout** - Hỗ trợ grid layout đa cột và nested fields
+- ✅ **Built-in Validation** - Validation tích hợp với Zod/ArkType
+- 🎨 **UI Component Agnostic** - Tương thích với bất kỳ UI component nào
+- 📦 **Type-safe** - Fully typed với TypeScript
+- 🔄 **Reactive** - Tích hợp Vue reactivity system
+
+## 📦 Cài đặt
+
+```bash
+npm install @fidt/dynamic-form
+# hoặc
+pnpm add @fidt/dynamic-form
+```
+
+## 🚀 Sử dụng cơ bản
+
+### 1. Import và đăng ký
+
+```typescript
+import DymikForm from '@fidt/dynamic-form'
+import '@fidt/dynamic-form/dist/dynamic-form.css'
+
+// Đăng ký global (optional)
+app.use(DymikForm)
+
+// Hoặc import trực tiếp trong component
+import { DynamicForm, FormModel } from '@fidt/dynamic-form'
+```
+
+### 2. Tạo form đơn giản
+
+```vue
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { DynamicForm, FormModel } from '@fidt/dynamic-form'
+
+const form = reactive(
+  new FormModel({
+    name: 'contact-form',
+    description: 'Form liên hệ đơn giản',
+    fields: [
+      {
+        name: 'fullName',
+        label: 'Họ và tên',
+        type: 'FInput',
+        required: true,
+        required_text: 'Vui lòng nhập họ tên',
+        props: { placeholder: 'Nhập họ và tên' },
+        validation_rules: [
+          { type: 'minLength', value: 2, message: 'Tên phải có ít nhất 2 ký tự' }
+        ]
+      },
+      {
+        name: 'email',
+        label: 'Email',
+        type: 'FInput',
+        required: true,
+        props: { placeholder: 'your@email.com' },
+        validation_rules: [
+          { type: 'email', message: 'Email không hợp lệ' }
+        ]
+      },
+      {
+        name: 'submit',
+        type: 'FButton',
+        role: 'submit',
+        props: { label: 'Gửi', order: 'primary' }
+      }
+    ]
+  })
+)
+
+function onSubmit(values: Record<string, unknown>) {
+  console.log('Form data:', values)
+}
+</script>
+
+<template>
+  <DynamicForm :form="form" @submit="onSubmit" />
+</template>
+```
+
+## 📐 Layout nâng cao
+
+### Grid Layout với nhiều cột
+
+```typescript
+const form = reactive(
+  new FormModel({
+    name: 'registration-form',
+    columns: 3, // Số cột trong grid
+    layout: [
+      ['fullName', 'email', 'phone'],          // Hàng 1: 3 fields
+      [['idCard', 'issueDate'], 'address', null], // Hàng 2: nested fields, 1 field, 1 ô trống
+      [null, null, 'submit'],                  // Hàng 3: button căn phải
+    ],
+    fields: {
+      fullName: {
+        label: 'Họ và tên',
+        type: 'FInput',
+        required: true,
+        props: { placeholder: 'Nhập họ tên' }
+      },
+      email: {
+        label: 'Email',
+        type: 'FInput',
+        required: true,
+        validation_rules: [{ type: 'email', message: 'Email không hợp lệ' }]
+      },
+      phone: {
+        label: 'Số điện thoại',
+        type: 'FInput',
+        props: { placeholder: '0123456789' }
+      },
+      idCard: {
+        label: 'CCCD',
+        type: 'FInput',
+        required: true,
+        props: { placeholder: 'Số CCCD' }
+      },
+      issueDate: {
+        label: 'Ngày cấp',
+        type: 'FInput',
+        props: { type: 'date' }
+      },
+      address: {
+        label: 'Địa chỉ',
+        type: 'FInput',
+        props: { placeholder: 'Địa chỉ hiện tại' }
+      },
+      submit: {
+        type: 'FButton',
+        role: 'submit',
+        props: { label: 'Đăng ký', order: 'primary' }
+      }
+    }
+  })
+)
+```
+
+### Giải thích Layout
+
+- **`columns`**: Số cột trong grid (mặc định: auto)
+- **`layout`**: Mảng 2D định nghĩa vị trí các field
+  - `'fieldName'` - Field đơn chiếm 1 ô
+  - `['field1', 'field2']` - Nhiều field nested trong 1 ô
+  - `null` - Ô trống (dùng để căn chỉnh)
+
+### Format Fields
+
+Có 2 cách định nghĩa fields:
+
+**1. Array format** (truyền thống):
+```typescript
+fields: [
+  {
+    name: 'email',
+    label: 'Email',
+    type: 'FInput',
+    // ...
+  }
+]
+```
+
+**2. Object format** (recommended với layout):
+```typescript
+fields: {
+  email: {
+    label: 'Email',
+    type: 'FInput',
+    // ...
+  }
+  // name tự động lấy từ key
+}
+```
+
+## ✅ Validation
+
+### Các loại validation được hỗ trợ
+
+```typescript
+validation_rules: [
+  // String validation
+  { type: 'string', message: 'Phải là chuỗi' },
+  { type: 'minLength', value: 3, message: 'Tối thiểu 3 ký tự' },
+  { type: 'maxLength', value: 50, message: 'Tối đa 50 ký tự' },
+  
+  // Number validation
+  { type: 'number', message: 'Phải là số' },
+  { type: 'min', value: 18, message: 'Tối thiểu 18' },
+  { type: 'max', value: 100, message: 'Tối đa 100' },
+  
+  // Special formats
+  { type: 'email', message: 'Email không hợp lệ' },
+  { type: 'url', message: 'URL không hợp lệ' },
+  { type: 'regex', value: /^\d{9,12}$/, message: 'CCCD không đúng định dạng' },
+  
+  // Custom validation
+  { 
+    type: 'custom', 
+    value: (value, formValues) => value !== formValues.password,
+    message: 'Mật khẩu không khớp'
+  }
+]
+```
+
+### Custom Validator
+
+```typescript
+import { ValidatorUtils } from '@fidt/dynamic-form'
+
+ValidatorUtils.addCustomValidator('isAdult', (rule, value) => {
+  const age = parseInt(value)
+  return age >= 18
+})
+
+// Sử dụng
+validation_rules: [
+  { type: 'isAdult', message: 'Phải từ 18 tuổi trở lên' }
+]
+```
+
+## 🎯 FormModel API
+
+### Properties
+
+```typescript
+interface FormItem {
+  name: string                    // Tên form
+  description?: string            // Mô tả
+  id?: string                     // ID duy nhất
+  fields: FormField[]             // Danh sách fields
+  columns?: number                // Số cột grid
+  layout?: (string | null | string[])[][]  // Layout grid
+  css_classes?: string            // CSS classes tùy chỉnh
+  disabled?: boolean              // Disable toàn bộ form
+  invalid?: boolean               // Trạng thái invalid (readonly)
+}
+```
+
+### Methods
+
+```typescript
+// Validation
+form.validate(): boolean                    // Validate toàn bộ form
+form.validateField(name, value): boolean    // Validate 1 field
+
+// Get/Set values
+form.getFormValue(): Record<string, any>              // Lấy tất cả giá trị
+form.setFormValue(values: Record<string, any>): void  // Set nhiều giá trị
+form.setFieldValue(name: string, value: any): void    // Set 1 giá trị
+
+// Errors
+form.getFormErrors(): Record<string, string>          // Lấy tất cả lỗi
+form.getFormError(name: string): string | undefined   // Lấy lỗi của 1 field
+form.setFormError(name: string, error: string): void  // Set lỗi cho 1 field
+
+// Reset
+form.reset(): void  // Reset form về trạng thái ban đầu
+```
+
+## 🎨 Events
+
+```vue
+<DynamicForm 
+  :form="form"
+  @submit="onSubmit"              
+  @value-change="onValueChange"   
+  @loading="onLoading"            
+  @submit-result="onSubmitResult" 
+/>
+```
+
+### Event handlers
+
+```typescript
+function onSubmit(values: Record<string, unknown>) {
+  // Được gọi khi form submit và validation pass
+  console.log('Submit data:', values)
+}
+
+function onValueChange(values: Record<string, unknown>) {
+  // Được gọi mỗi khi có field thay đổi
+  console.log('Current form values:', values)
+}
+
+function onLoading(isLoading: boolean) {
+  // Trạng thái loading khi submit
+  console.log('Loading:', isLoading)
+}
+
+function onSubmitResult(result: any) {
+  // Kết quả sau khi submit (nếu có saulFunctionName)
+  console.log('Result:', result)
+}
+```
+
+## 🎛️ Field Configuration
+
+### FormField Interface
+
+```typescript
+interface FormField {
+  name: string                    // Tên field (unique)
+  label?: string                  // Label hiển thị
+  type: string                    // Component type (VD: 'FInput', 'FButton')
+  role?: 'submit' | 'reset' | 'field'  // Vai trò của field
+  required?: boolean              // Bắt buộc
+  disabled?: boolean              // Disable
+  required_text?: string          // Thông báo lỗi khi required
+  props: any                      // Props truyền cho component
+  error?: string                  // Error message (readonly)
+  classes?: string                // CSS classes
+  value?: any                     // Giá trị hiện tại
+  validation_rules?: ValidationRule[]  // Quy tắc validation
+}
+```
+
+### Ví dụ Field types
+
+```typescript
+// Input
+{
+  name: 'username',
+  type: 'FInput',
+  props: { placeholder: 'Enter username', type: 'text' }
+}
+
+// Button
+{
+  name: 'submit',
+  type: 'FButton',
+  role: 'submit',
+  props: { label: 'Submit', order: 'primary', size: 'large' }
+}
+
+// Select (tùy component library)
+{
+  name: 'country',
+  type: 'FSelect',
+  props: { 
+    options: [
+      { label: 'Vietnam', value: 'vn' },
+      { label: 'USA', value: 'us' }
+    ]
+  }
+}
+```
+
+## 🎨 Custom Styling
+
+### CSS Classes
+
+```scss
+.dymik-form {
+  // Form container
+  
+  &.layout-mode {
+    // Grid layout mode
+    display: grid;
+    grid-template-columns: repeat(var(--columns), 1fr);
+    gap: 1rem;
+  }
+  
+  .field {
+    // Field wrapper
+    
+    label {
+      .required {
+        color: red;
+      }
+    }
+    
+    .error {
+      color: red;
+      font-size: 0.875rem;
+    }
+  }
+  
+  .field-group {
+    // Nested fields container
+    
+    .nested-fields {
+      display: flex;
+      gap: 0.5rem;
+    }
+  }
+}
+```
+
+### Custom CSS Classes
+
+```typescript
+const form = new FormModel({
+  name: 'my-form',
+  css_classes: 'custom-form theme-dark', // Form-level classes
+  fields: [
+    {
+      name: 'email',
+      classes: 'highlighted-field',      // Field-level classes
+      // ...
+    }
+  ]
+})
+```
+
+## 🔌 Tích hợp với UI Components
+
+Dynamic Form hoàn toàn component-agnostic. Bạn có thể sử dụng với bất kỳ UI library nào:
+
+```typescript
+// Với FIDT UI Components
+{
+  type: 'FInput',
+  props: { placeholder: 'Enter text' }
+}
+
+// Với Element Plus
+{
+  type: 'el-input',
+  props: { placeholder: 'Enter text' }
+}
+
+// Với Ant Design Vue
+{
+  type: 'a-input',
+  props: { placeholder: 'Enter text' }
+}
+
+// Hoặc custom component của bạn
+{
+  type: 'MyCustomInput',
+  props: { /* custom props */ }
+}
+```
+
+**Lưu ý**: Component phải hỗ trợ `v-model` và emit `value-change` event.
+
+## 📚 Ví dụ hoàn chỉnh
+
+Xem thêm các ví dụ trong thư mục `examples/`:
+- [ContactForm.vue](./examples/with-fidt-ui-component/src/pages/ContactForm.vue) - Form liên hệ đơn giản
+- [ThreeColumnForm.vue](./examples/with-fidt-ui-component/src/pages/ThreeColumnForm.vue) - Form đăng ký 3 cột với nested fields
+
+## 🤝 Contributing
+
+Contributions, issues và feature requests đều được chào đón!
+
+## 📝 License
+
+MIT © fidt

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@fidt/dynamic-form",
+  "version": "0.0.0",
+  "description": "A dynamic form library for Vue 3 with built-in validation support (Zod, ArkType)",
+  "keywords": [
+    "vue",
+    "vue3",
+    "form",
+    "dynamic-form",
+    "validation",
+    "zod",
+    "arktype"
+  ],
+  "author": "fidt",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "homepage": "",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "package.json",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js"
+    },
+    "./dist/dynamic-form.css": "./dist/dynamic-form.css"
+  },
+  "scripts": {
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.13"
+  },
+  "dependencies": {
+    "@standard-schema/spec": "^1.0.0",
+    "arktype": "^2.1.20",
+    "zod": "^3.24.2"
+  },
+  "sideEffects": [
+    "*.vue",
+    "*.scss"
+  ],
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "sass-embedded": "^1.98.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.2.0",
+    "vite-plugin-dts": "^4.5.3",
+    "vitest": "^1.0.0"
+  }
+}

package/src/components/DynamicForm.vue

@@ -0,0 +1,229 @@
+<template>
+    <div class="dymik-form" :class="[props.form.css_classes, { 'layout-mode': hasLayout }]"
+        :style="hasLayout && props.form.columns ? { '--columns': props.form.columns } : {}">
+        
+        <!-- Layout-based rendering -->
+        <template v-if="hasLayout">
+            <template v-for="(row, rowIndex) in props.form.layout" :key="`row-${rowIndex}`">
+                <div v-for="(cell, colIndex) in row" :key="`${rowIndex}-${colIndex}`" 
+                    class="field" :class="Array.isArray(cell) ? 'field-group' : getFieldByName(cell as string | null)?.classes">
+                    
+                    <!-- Nested fields (array of field names) -->
+                    <template v-if="Array.isArray(cell)">
+                        <div class="nested-fields">
+                            <div v-for="fieldName in cell" :key="fieldName" 
+                                class="nested-field" :class="getFieldByName(fieldName)?.classes">
+                                <template v-if="getFieldByName(fieldName)">
+                                    <label v-if="getFieldByName(fieldName)!.label" :for="getFieldByName(fieldName)!.name">
+                                        {{ getFieldByName(fieldName)!.label }}
+                                        <span v-if="getFieldByName(fieldName)!.required" class="required">*</span>
+                                    </label>
+                                    <component 
+                                        v-model="getFieldByName(fieldName)!.value" 
+                                        :is="getFieldByName(fieldName)!.type" 
+                                        v-bind="getFieldByName(fieldName)!.props" 
+                                        :key="getFieldByName(fieldName)!.name"
+                                        :invalid="!!getFieldByName(fieldName)!.error" 
+                                        @value-change="(value: any) => onValueChanged(getFieldByName(fieldName)!.name, value)"
+                                        @input="(event: any) => onNativeInput(getFieldByName(fieldName)!.name, event)"
+                                        :disabled="form.disabled || getFieldByName(fieldName)!.disabled" 
+                                        @click="(event: any) => onFieldClick(getFieldByName(fieldName)!, event)" />
+                                    <span v-if="!!getFieldByName(fieldName)!.error" class="error">
+                                        {{ getFieldByName(fieldName)!.error }}
+                                    </span>
+                                </template>
+                            </div>
+                        </div>
+                    </template>
+                    
+                    <!-- Single field -->
+                    <template v-else-if="getFieldByName(cell as string | null)">
+                        <label v-if="getFieldByName(cell as string | null)!.label" :for="getFieldByName(cell as string | null)!.name">
+                            {{ getFieldByName(cell as string | null)!.label }}
+                            <span v-if="getFieldByName(cell as string | null)!.required" class="required">*</span>
+                        </label>
+                        <component 
+                            v-model="getFieldByName(cell as string | null)!.value" 
+                            :is="getFieldByName(cell as string | null)!.type" 
+                            v-bind="getFieldByName(cell as string | null)!.props" 
+                            :key="getFieldByName(cell as string | null)!.name"
+                            :invalid="!!getFieldByName(cell as string | null)!.error" 
+                            @value-change="(value: any) => onValueChanged(getFieldByName(cell as string | null)!.name, value)"
+                            @input="(event: any) => onNativeInput(getFieldByName(cell as string | null)!.name, event)"
+                            :disabled="form.disabled || getFieldByName(cell as string | null)!.disabled" 
+                            @click="(event: any) => onFieldClick(getFieldByName(cell as string | null)!, event)" />
+                        <span v-if="!!getFieldByName(cell as string | null)!.error" class="error">
+                            {{ getFieldByName(cell as string | null)!.error }}
+                        </span>
+                    </template>
+                </div>
+            </template>
+        </template>
+        
+        <!-- Legacy array-based rendering -->
+        <template v-else>
+            <div class="field" :class="field.classes" v-for="field of props.form.fields" :key="field.name">
+                <label v-if="field.label" :for="field.name">
+                    {{ field.label }}
+                    <span v-if="field.required" class="required">*</span>
+                </label>
+                <component v-model="field.value" :is="field.type" v-bind="field.props" :key="field.name"
+                    :invalid="!!field.error" @value-change="(value: any) => onValueChanged(field.name, value)"
+                    @input="(event: any) => onNativeInput(field.name, event)"
+                    :disabled="form.disabled || field.disabled" @click="(event: any) => onFieldClick(field, event)" />
+                <span v-if="!!field.error" class="error">{{ field.error }}</span>
+            </div>
+        </template>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import FormModel from '../models/form.model';
+import type { FormField } from '../interfaces';
+
+const props = defineProps<{ form: FormModel }>();
+const emit = defineEmits(['submit', 'value-change', 'loading', 'submit-result']);
+const loading = ref(false);
+
+const hasLayout = computed(() => {
+    return !!(props.form.layout && props.form.layout.length > 0);
+});
+
+function getFieldByName(fieldName: string | null): FormField | undefined {
+    if (!fieldName) return undefined;
+    return props.form.fields.find((f: FormField) => f.name === fieldName);
+}
+
+function onNativeInput(fieldName: string, event: any) {
+    if (event instanceof Event && event.target) {
+        onValueChanged(fieldName, (event.target as HTMLInputElement).value);
+    }
+}
+
+function onValueChanged(fieldName: string, value: any) {
+    const field = props.form.fields.find((f: FormField) => f.name === fieldName);
+
+    if (field) {
+        field.value = value;
+
+        emit('value-change', props.form.getFormValue());
+    }
+
+    props.form.validateField(fieldName, value);
+}
+
+async function onFieldClick(field: FormField, event: Event) {
+    if (field.role === 'submit') {
+        const isValid = props.form.validate();
+
+        if (!isValid) {
+            event.preventDefault();
+            return;
+        }
+
+        event.preventDefault();
+
+        if (props.form.saulFunctionName) {
+            loading.value = true;
+            emit('loading', true);
+
+            try {
+                await props.form.submitToEndpoint();
+                emit('submit-result', { message: 'Form submitted successfully!', type: 'success' });
+            } catch (error) {
+                console.error('Error:', error);
+                emit('submit-result', { message: 'Failed to submit form.', type: 'error' });
+            } finally {
+                loading.value = false;
+                emit('loading', false);
+            }
+        }
+
+        emit('submit', props.form.getFormValue());
+    }
+}
+</script>
+<style scoped lang="scss">
+.dymik-form {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+    padding: 1rem;
+
+    &.layout-mode {
+        display: grid;
+        grid-template-columns: repeat(var(--columns, 1), 1fr);
+        gap: 16px;
+
+        @media (max-width: 1023px) {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        @media (max-width: 767px) {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    .field {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+
+        &.field-group {
+            gap: 0;
+        }
+
+        .nested-fields {
+            display: flex;
+            gap: 8px;
+            width: 100%;
+        }
+
+        .nested-field {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            flex: 1;
+            min-width: 0;
+        }
+
+        .required {
+            color: red;
+            margin-left: 0.25rem;
+        }
+
+        .error {
+            color: red;
+            font-size: 0.875rem;
+            margin-top: 0.25rem;
+        }
+
+    }
+
+    .loading-content {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 1.5rem;
+        color: white;
+    }
+}
+</style>
+
+<style lang="scss">
+.dymik-form {
+    .field {
+        &.full_width {
+            width: 100%;
+        }
+
+        &.half_width {
+            width: calc(50% - 8px);
+        }
+
+        &.third_width {
+            width: calc(33.333% - 11px);
+        }
+    }
+}
+</style>

package/src/index.ts

@@ -0,0 +1,16 @@
+export * from './interfaces';
+export * from './models/form.model';
+export * from './utils/validator';
+
+export { default as FormModel } from './models/form.model';
+export { default as ValidatorUtils } from './utils/validator';
+
+import DynamicForm from './components/DynamicForm.vue';
+
+
+export default {
+    DynamicForm,
+    install(app: any) {
+        app.component('DynamicForm', DynamicForm);
+    },
+};

package/src/interfaces/index.ts

@@ -0,0 +1,64 @@
+import type { StandardSchemaV1 as StandardSchema } from "@standard-schema/spec";
+
+export interface FormListItem {
+  name: string;
+  description?: string;
+  id: string;
+}
+
+export interface FormItem {
+  name: string;
+  description?: string;
+  id?: string;
+  fields: FormField[] | Record<string, Omit<FormField, 'name'>>;
+  columns?: number;
+  layout?: (string | null | string[])[][];
+  css_classes?: string;
+  saulFunctionName?: string;
+  invalid?: boolean;
+  disabled?: boolean;
+}
+
+export interface FormField {
+  label?: string;
+  name: string;
+  type: string;
+  role?: 'submit' | 'reset' | 'field';
+  required?: boolean;
+  disabled?: boolean;
+  required_text?: string;
+  props: any;
+  error?: string;
+  classes?: string;
+  value?: any;
+  validation_rules?: ValidationRule[];
+  // Ensure ValidationRule is defined or imported
+}
+
+export interface ValidationRule {
+  type:
+  | 'string'
+  | 'number'
+  | 'boolean'
+  | 'date'
+  | 'regex'
+  | 'min'
+  | 'max'
+  | 'minLength'
+  | 'maxLength'
+  | 'email'
+  | 'url'
+  | 'custom';
+  message?: string;
+  value?: string | number | boolean | ((value: any, formValue: any) => boolean);
+}
+
+
+export interface IValidatorLib {
+
+  schemas: Record<ValidationRule['type'], () => StandardSchema> | {};
+
+  validate(rule: ValidationRule, value: any): boolean;
+
+  schemaFactory: (type: ValidationRule['type'], ruleValue: any) => StandardSchema;
+}

package/src/models/form.model.ts

@@ -0,0 +1,195 @@
+import type { FormField, FormItem } from "../interfaces";
+import ValidatorUtils from "../utils/validator";
+
+export default class FormModel implements FormItem {
+    name: string;
+    description?: string | undefined;
+    id?: string;
+    fields: FormField[];
+    columns?: number;
+    layout?: (string | null | string[])[][];
+    css_classes?: string | undefined;
+    saulFunctionName?: string | undefined;
+    invalid: boolean;
+    disabled?: boolean;
+
+    constructor(form: FormItem) {
+        this.name = form.name;
+        this.id = form.id;
+        this.description = form.description;
+        
+        // Normalize fields from object to array if needed
+        if (Array.isArray(form.fields)) {
+            this.fields = form.fields;
+        } else {
+            // Convert object format to array format
+            this.fields = Object.entries(form.fields).map(([name, field]) => ({
+                ...field,
+                name,
+            })) as FormField[];
+        }
+
+        // Initialize field.value from props.modelValue if value is not explicitly set
+        for (const field of this.fields) {
+            if (field.value === undefined && field.props?.modelValue !== undefined) {
+                field.value = field.props.modelValue;
+            }
+        }
+        
+        this.columns = form.columns;
+        this.layout = form.layout;
+        this.css_classes = form.css_classes;
+        this.saulFunctionName = form.saulFunctionName;
+        this.invalid = false;
+        this.disabled = form.disabled || false;
+        
+        // Validate layout if provided
+        if (this.layout) {
+            this.validateLayout();
+        }
+    }
+
+    public validateField(name: string, value: any): boolean {
+        const field = this.fields.find((field) => field.name === name);
+        if (field) {
+            field.error = ''; // Reset error message
+
+
+            if (field.required && !value) {
+                field.error = field.required_text || `${field.label} is required`;
+                this.invalid = true;
+                return false;
+            }
+
+            if (field.validation_rules) {
+
+                if (!field.required && !value) {
+                    field.error = '';
+                    return true;
+                }
+
+                for (const rule of field.validation_rules) {
+                    const fieldValid = ValidatorUtils.validate(rule, value, this.getFormValue());
+
+                    if (!fieldValid) {
+                        field.error = rule.message || `Invalid value for ${field.label}`;
+                        this.invalid = true;
+                        return false;
+                    }
+                }
+            }
+        }
+        return field?.error ? false : true;
+    }
+
+    public validate(): boolean {
+        this.invalid = false;
+        for (const field of this.fields) {
+            if (!this.validateField(field.name, field.value)) {
+                this.invalid = true;
+            }
+        }
+        return !this.invalid;
+    }
+
+    public getFormValue(): Record<string, any> {
+        const formValue: Record<string, any> = {};
+        for (const field of this.fields) {
+            if (field.role === 'submit' || field.role === 'reset' || field.value === undefined) {
+                continue;
+            }
+            formValue[field.name] = field.value;
+        }
+        return formValue;
+    }
+
+    public setFormValue(value: Record<string, any>): void {
+        for (const field of this.fields) {
+            if (value.hasOwnProperty(field.name)) {
+                field.value = value[field.name];
+            }
+        }
+    }
+
+    public setFieldValue(name: string, value: any): void {
+        const field = this.fields.find((field) => field.name === name);
+        if (field) {
+            field.value = value;
+        }
+    }
+
+    public reset(): void {
+        for (const field of this.fields) {
+            field.value = undefined;
+            field.error = '';
+        }
+
+        this.invalid = false;
+    }
+
+    public async submitToEndpoint(): Promise<any> {
+        if (this.saulFunctionName) {
+
+            const formData = this.getFormValue();
+
+            console.log(`Submitting form to ${this.saulFunctionName} with data:`, formData);
+            // TODO: SaulFunctionCall Here
+
+            this.reset();
+
+            // if (!response.ok) {
+            //     throw new Error('Failed to submit form');
+            // }
+        }
+    }
+
+    public getFormErrors(): Record<string, string> {
+        const errors: Record<string, string> = {};
+        for (const field of this.fields) {
+            if (field.error) {
+                errors[field.name] = field.error;
+            }
+        }
+        return errors;
+    }
+
+    public getFormError(name: string): string | undefined {
+        const field = this.fields.find((field) => field.name === name);
+        return field?.error;
+    }
+
+    public setFormError(name: string, error: string): void {
+        const field = this.fields.find((field) => field.name === name);
+        if (field) {
+            field.error = error;
+            this.invalid = true;
+        }
+    }
+
+    public validateLayout(): void {
+        if (!this.layout) return;
+        
+        const fieldNames = new Set(this.fields.map(f => f.name));
+        const missingFields: string[] = [];
+        
+        for (const row of this.layout) {
+            for (const cell of row) {
+                // Handle nested arrays (multiple fields in one cell)
+                if (Array.isArray(cell)) {
+                    for (const fieldName of cell) {
+                        if (fieldName && !fieldNames.has(fieldName)) {
+                            missingFields.push(fieldName);
+                        }
+                    }
+                } else if (cell && !fieldNames.has(cell)) {
+                    missingFields.push(cell);
+                }
+            }
+        }
+        
+        if (missingFields.length > 0) {
+            console.warn(`[FormModel] Layout references missing fields: ${missingFields.join(', ')}`);
+        }
+    }
+
+}

package/src/utils/validator/index.test.ts

@@ -0,0 +1,199 @@
+import ValidatorUtils from "./index";
+import type { ValidationRule } from "@/interfaces";
+import { describe, expect, it, beforeEach } from "vitest";
+
+
+describe("ValidatorUtils", () => {
+    beforeEach(() => {
+        ValidatorUtils.setLib("zod");
+        ValidatorUtils.customValidators = {};
+    });
+
+    it("should validate using the default library (zod)", () => {
+        const rule: ValidationRule = { type: "string" };
+        const value = "test";
+        expect(ValidatorUtils.validate(rule, value, {})).toBe(true);
+    });
+
+    it.skip("should switch to a different library and validate", () => {
+        ValidatorUtils.setLib("ark_type");
+        const rule: ValidationRule = { type: "string" };
+        const value = "test";
+        expect(ValidatorUtils.validate(rule, value, {})).toBe(true);
+    });
+
+    it("should throw an error when switching to an unsupported library", () => {
+        expect(() => ValidatorUtils.setLib("unsupported_lib")).toThrow(
+            'Validator library "unsupported_lib" is not supported.'
+        );
+    });
+
+    it("should add a custom validator and validate using it", () => {
+        ValidatorUtils.customValidators["isEven"] = (value) => value % 2 === 0;
+
+        const rule: ValidationRule = { type: "custom", value: "isEven" };
+        expect(ValidatorUtils.validate(rule, 4, {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, 3, {})).toBe(false);
+    });
+
+    it("should throw an error if a custom validator is not found", () => {
+        const rule: ValidationRule = { type: "custom", value: "nonExistentValidator" };
+        expect(() => ValidatorUtils.validate(rule, 4, {})).toThrow(
+            'Custom validation function "nonExistentValidator" not found.'
+        );
+    });
+
+    it("should validate string schema", () => {
+        const rule: ValidationRule = { type: "string" };
+        expect(ValidatorUtils.validate(rule, "test", {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, 123, {})).toBe(false);
+    });
+
+    it("should validate number schema", () => {
+        const rule: ValidationRule = { type: "number" };
+        expect(ValidatorUtils.validate(rule, 123, {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, "test", {})).toBe(false);
+    });
+
+    it("should validate boolean schema", () => {
+        const rule: ValidationRule = { type: "boolean" };
+        expect(ValidatorUtils.validate(rule, true, {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, "true", {})).toBe(false);
+    });
+
+    it("should validate email schema", () => {
+        const rule: ValidationRule = { type: "email" };
+        expect(ValidatorUtils.validate(rule, "test@example.com", {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, "invalid-email", {})).toBe(false);
+    });
+
+    it("should validate url schema", () => {
+        const rule: ValidationRule = { type: "url" };
+        expect(ValidatorUtils.validate(rule, "https://example.com", {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, "invalid-url", {})).toBe(false);
+    });
+
+    it("should validate minLength schema", () => {
+        const rule: ValidationRule = { type: "minLength", value: 5 };
+        expect(ValidatorUtils.validate(rule, "12345", {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, "123", {})).toBe(false);
+    });
+
+    it("should validate maxLength schema", () => {
+        const rule: ValidationRule = { type: "maxLength", value: 5 };
+        expect(ValidatorUtils.validate(rule, "12345", {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, "123456", {})).toBe(false);
+    });
+
+    it("should validate min schema", () => {
+        const rule: ValidationRule = { type: "min", value: 10 };
+        expect(ValidatorUtils.validate(rule, 15, {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, 5, {})).toBe(false);
+    });
+
+    it("should validate max schema", () => {
+        const rule: ValidationRule = { type: "max", value: 10 };
+        expect(ValidatorUtils.validate(rule, 5, {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, 15, {})).toBe(false);
+    });
+
+    it("should validate regex schema", () => {
+        const rule: ValidationRule = { type: "regex", value: "^test$" };
+        expect(ValidatorUtils.validate(rule, "test", {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, "not-test", {})).toBe(false);
+    });
+
+    it("should validate date schema", () => {
+        const rule: ValidationRule = { type: "date" };
+        expect(ValidatorUtils.validate(rule, new Date().toISOString(), {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, "invalid-date", {})).toBe(false);
+    });
+
+    it("should validate custom schema", () => {
+        ValidatorUtils.customValidators["isPositive"] = (value) => value > 0;
+        const rule: ValidationRule = { type: "custom", value: "isPositive" };
+        expect(ValidatorUtils.validate(rule, 5, {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, -5, {})).toBe(false);
+    });
+});
+
+describe("ValidatorUtils with ArkType library", () => {
+    beforeEach(() => {
+        ValidatorUtils.setLib("ark_type");
+    });
+
+    it("should validate string schema", () => {
+        const rule: ValidationRule = { type: "string" };
+        
+        expect(ValidatorUtils.validate(rule, "test", {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, 123, {})).toBe(false);
+    });
+
+    it("should validate number schema", () => {
+        const rule: ValidationRule = { type: "number" };
+        expect(ValidatorUtils.validate(rule, 123, {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, "test", {})).toBe(false);
+    });
+
+    it("should validate boolean schema", () => {
+        const rule: ValidationRule = { type: "boolean" };
+        expect(ValidatorUtils.validate(rule, true, {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, "true", {})).toBe(false);
+    });
+
+    it("should validate email schema", () => {
+        const rule: ValidationRule = { type: "email" };
+        expect(ValidatorUtils.validate(rule, "test@example.com", {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, "invalid-email", {})).toBe(false);
+    });
+
+    it("should validate url schema", () => {
+        const rule: ValidationRule = { type: "url" };
+        expect(ValidatorUtils.validate(rule, "https://example.com", {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, "invalid-url", {})).toBe(false);
+    });
+
+    it("should validate minLength schema", () => {
+        const rule: ValidationRule = { type: "minLength", value: 5 };
+        expect(ValidatorUtils.validate(rule, "12345", {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, "123", {})).toBe(false);
+    });
+
+    it("should validate maxLength schema", () => {
+        const rule: ValidationRule = { type: "maxLength", value: 5 };
+        expect(ValidatorUtils.validate(rule, "12345", {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, "123456", {})).toBe(false);
+    });
+
+    it("should validate min schema", () => {
+        const rule: ValidationRule = { type: "min", value: 10 };
+        expect(ValidatorUtils.validate(rule, 15, {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, 5, {})).toBe(false);
+    });
+
+    it("should validate max schema", () => {
+        const rule: ValidationRule = { type: "max", value: 10 };
+        expect(ValidatorUtils.validate(rule, 5, {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, 15, {})).toBe(false);
+    });
+
+    it("should validate regex schema", () => {
+        const rule: ValidationRule = { type: "regex", value: "^test$" };
+        expect(ValidatorUtils.validate(rule, "test", {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, "not-test", {})).toBe(false);
+    });
+
+    it("should validate date schema", () => {
+        const rule: ValidationRule = { type: "date" };
+        expect(ValidatorUtils.validate(rule, new Date().toISOString(), {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, "invalid-date", {})).toBe(false);
+    });
+
+
+    it("should validate custom schema", () => {
+        ValidatorUtils.customValidators["isPositive"] = (value) => value > 0;
+        const rule: ValidationRule = { type: "custom", value: "isPositive" };
+        expect(ValidatorUtils.validate(rule, 5, {})).toBe(true);
+        expect(ValidatorUtils.validate(rule, -5, {})).toBe(false);
+    });
+});

package/src/utils/validator/index.ts

@@ -0,0 +1,42 @@
+import type { IValidatorLib, ValidationRule } from "../../interfaces";
+import ArkTypeValidatorLib from "./libs/arktype";
+import ZodValidatorLib from "./libs/zod";
+
+export default class ValidatorUtils {
+    private static lib: string = 'ark_type';
+
+    public static customValidators: Record<string, (value: any, formValue: any) => boolean> = {};
+
+    private static validatorLibs: { [key: string]: IValidatorLib } = {
+        zod: new ZodValidatorLib(),
+        ark_type: new ArkTypeValidatorLib(),
+    };
+
+    public static addLib(name: string, lib: IValidatorLib) {
+        this.validatorLibs[name] = lib;
+    }
+
+    public static setLib(lib: string) {
+        if (this.validatorLibs[lib]) {
+            this.lib = lib;
+        } else {
+            throw new Error(`Validator library "${lib}" is not supported.`);
+        }
+    }
+
+    static validate(rule: ValidationRule, value: any, formValue: any): boolean {
+
+        if (rule.type === 'custom') {
+            // Resolve the custom validation function from the map
+            const customValidation = this.customValidators[rule.value as string];
+
+            if (customValidation) {
+                return customValidation(value, formValue);
+            } else {
+                throw new Error(`Custom validation function "${rule.value}" not found.`);
+            }
+        }
+
+        return this.validatorLibs[this.lib].validate(rule, value);
+    }
+}

package/src/utils/validator/libs/arktype.ts

@@ -0,0 +1,45 @@
+import { ArkErrors, type, Type } from "arktype";
+import type { IValidatorLib, ValidationRule } from "@/interfaces";
+
+export default class ArktypeValidatorLib implements IValidatorLib {
+    schemas: Record<ValidationRule['type'], (ruleValue?: any) => Type<any>> = {} as Record<ValidationRule['type'], () => Type>;
+
+    validate({ type: ruleType, value: ruleValue }: ValidationRule, value: any): boolean {
+        const schema = this.schemaFactory(ruleType, ruleValue);
+        const result = schema(value);
+
+        return !(result instanceof ArkErrors);
+    }
+
+    schemaFactory(validationType: ValidationRule['type'], ruleValue: any): Type<any> {
+        this.schemas =  {
+            string: () => type("string"),
+            number: () => type("number"),
+            boolean: () => type("boolean"),
+            email: () => type("string.email"),
+            url: () => type("string.url"),
+            minLength: () => type(`string >= ${Number(ruleValue)}`),
+            maxLength: () => type(`string <= ${Number(ruleValue)}`),
+            min: () => type(`number >= ${Number(ruleValue)}`),
+            max: () => type(`number <= ${Number(ruleValue)}`),
+            regex: () => type(`string & /${ruleValue}/`),
+            date: () => type("string.date"),
+            custom: () => {
+                if (typeof ruleValue === "function") {
+                    return type((val: any) => ({
+                        data: val,
+                        problems: ruleValue(val) ? undefined : [{ path: [], message: "Custom validation failed" }],
+                    }));
+                } else {
+                    throw new Error("Invalid rule value for custom validation. Expected a function.");
+                }
+            },
+        };
+    
+        const schemaGenerator = this.schemas[validationType];
+        if (!schemaGenerator) {
+            throw new Error(`Unsupported rule type: ${type}`);
+        }
+        return schemaGenerator(ruleValue);
+    }
+}

package/src/utils/validator/libs/zod.ts

@@ -0,0 +1,53 @@
+import { z } from "zod";
+import type { IValidatorLib, ValidationRule } from "@/interfaces";
+
+export default class ZodValidatorLib implements IValidatorLib {
+
+    schemas: Record<ValidationRule['type'], () => z.ZodTypeAny> = {} as Record<ValidationRule['type'], () => z.ZodTypeAny>;
+
+    validate({ type, value: ruleValue }: ValidationRule, value: any): boolean {
+        try {
+            const schema = this.schemaFactory(type, ruleValue);
+            // Zod does not support date validation directly, so we need to convert the value to a Date object if the type is "date"
+            schema.parse(type === "date" ? new Date(value) : value);
+
+            return true;
+        } catch {
+            return false;
+        }
+    }
+
+    schemaFactory(type: ValidationRule['type'], ruleValue: any) {
+        this.schemas = {
+            string: () => z.string(),
+            number: () => z.number(),
+            boolean: () => z.boolean(),
+            email: () => z.string().email(),
+            url: () => z.string().url(),
+            minLength: () => z.string().min(Number(ruleValue)),
+            maxLength: () => z.string().max(Number(ruleValue)),
+            min: () => z.number().min(Number(ruleValue)),
+            max: () => z.number().max(Number(ruleValue)),
+            regex: () => {
+                if (typeof ruleValue === "string") {
+                    return z.string().regex(new RegExp(ruleValue));
+                } else {
+                    throw new Error("Invalid rule value for regex validation. Expected a string.");
+                }
+            },
+            date: () => z.date(),
+            custom: () => {
+                if (typeof ruleValue === "function") {
+                    return z.custom(ruleValue);
+                } else {
+                    throw new Error("Invalid rule value for custom validation. Expected a function.");
+                }
+            },
+        };
+
+        const schema = this.schemas[type]();
+        if (!schema) throw new Error(`Unsupported rule type: ${type}`);
+
+        return schema;
+    }
+}