vlite3 0.1.0 → 0.1.2

package/src/components/Form/composables/useForm.ts

@@ -1,356 +0,0 @@
-import { ref, computed, watch, type Ref, type ComputedRef } from 'vue'
-import type {
-  IForm,
-  IFormProps,
-  IFormContext,
-  IFormFieldChangePayload,
-  IFormSubmitPayload,
-} from '../types'
-import {
-  getNestedValue,
-  setNestedValue,
-  initializeFormValues,
-  evaluateConditional,
-  filterNullCustomFields,
-  collectFileFields,
-  deepClone,
-} from '../utils/form.utils'
-import { useFileUpload } from './useFileUpload'
-
-export interface UseFormOptions {
-  schema: IForm[] | IForm[][]
-  values?: Record<string, any>
-  isUpdate?: boolean
-  onSubmit?: (payload: IFormSubmitPayload) => void | Promise<void>
-}
-
-export interface UseFormReturn {
-  /** Current form values */
-  formValues: Ref<Record<string, any>>
-  /** Validation errors by field name */
-  errors: Ref<Record<string, string>>
-  /** Whether form is currently submitting */
-  isSubmitting: Ref<boolean>
-  /** Whether form has been modified */
-  isDirty: Ref<boolean>
-  /** Handle field value change */
-  handleFieldChange: (name: string, value: any, data?: any) => void
-  /** Validate a single field */
-  validateField: (field: IForm) => string
-  /** Validate all fields */
-  validateAll: () => boolean
-  /** Check if field is visible */
-  isFieldVisible: (field: IForm) => boolean
-  /** Check if field is disabled */
-  isFieldDisabled: (field: IForm) => boolean
-  /** Check if field is readonly */
-  isFieldReadonly: (field: IForm) => boolean
-  /** Get field value (supports nested paths) */
-  getFieldValue: (name: string) => any
-  /** Get field error */
-  getFieldError: (name: string) => string
-  /** Set field error manually */
-  setFieldError: (name: string, error: string) => void
-  /** Clear all errors */
-  clearErrors: () => void
-  /** Reset form to initial values */
-  resetForm: () => void
-  /** Handle form submission */
-  handleSubmit: () => Promise<void>
-  /** Flattened schema for iteration */
-  flatSchema: ComputedRef<IForm[]>
-}
-
-/**
- * Main form composable for managing form state, validation, and submission
- */
-export function useForm(options: UseFormOptions): UseFormReturn {
-  const { schema, values: initialValues, isUpdate = false, onSubmit } = options
-  const { handleUploadFile, loading: uploadLoading } = useFileUpload()
-
-  // Initialize form values
-  const formValues = ref<Record<string, any>>(initializeFormValues(schema, initialValues))
-  const errors = ref<Record<string, string>>({})
-  const isSubmitting = ref(false)
-  const isDirty = ref(false)
-  const initialSnapshot = ref<Record<string, any>>(deepClone(formValues.value))
-
-  // Flatten schema for easy iteration
-  const flatSchema = computed<IForm[]>(() => {
-    if (!schema) return []
-    return Array.isArray(schema[0]) ? (schema as IForm[][]).flat() : (schema as IForm[])
-  })
-
-  // Watch for external value changes
-  watch(
-    () => initialValues,
-    (newValues) => {
-      if (newValues) {
-        formValues.value = initializeFormValues(schema, newValues)
-        initialSnapshot.value = deepClone(formValues.value)
-        isDirty.value = false
-      }
-    },
-    { deep: true }
-  )
-
-  // Get form context for conditional evaluations
-  const getContext = (): IFormContext => ({
-    values: formValues.value,
-    isUpdate,
-  })
-
-  /**
-   * Get a field value by name (supports dot notation)
-   */
-  const getFieldValue = (name: string): any => {
-    return getNestedValue(formValues.value, name)
-  }
-
-  /**
-   * Get field error
-   */
-  const getFieldError = (name: string): string => {
-    return errors.value[name] || ''
-  }
-
-  /**
-   * Set field error manually
-   */
-  const setFieldError = (name: string, error: string): void => {
-    if (error) {
-      errors.value[name] = error
-    } else {
-      delete errors.value[name]
-    }
-  }
-
-  /**
-   * Clear all errors
-   */
-  const clearErrors = (): void => {
-    errors.value = {}
-  }
-
-  /**
-   * Check if field should be visible
-   */
-  const isFieldVisible = (field: IForm): boolean => {
-    if (!field.when) return true
-    return evaluateConditional(field.when, getContext())
-  }
-
-  /**
-   * Check if field is disabled
-   */
-  const isFieldDisabled = (field: IForm): boolean => {
-    return evaluateConditional(field.disabled, getContext())
-  }
-
-  /**
-   * Check if field is readonly
-   */
-  const isFieldReadonly = (field: IForm): boolean => {
-    return evaluateConditional(field.readonly, getContext())
-  }
-
-  /**
-   * Validate a single field
-   */
-  const validateField = (field: IForm): string => {
-    const value = getFieldValue(field.name)
-    let error = ''
-
-    // Required validation
-    if (field.required) {
-      const isEmpty =
-        value === undefined ||
-        value === null ||
-        value === '' ||
-        (Array.isArray(value) && value.length === 0)
-
-      if (isEmpty) {
-        error = `${field.label || field.name} is required`
-      }
-    }
-
-    // Custom validation (only if required passed or not required)
-    if (!error && field.validation) {
-      error = field.validation({
-        value,
-        values: formValues.value,
-        isUpdate,
-      })
-    }
-
-    // Update error state
-    if (error) {
-      errors.value[field.name] = error
-    } else {
-      delete errors.value[field.name]
-    }
-
-    return error
-  }
-
-  /**
-   * Validate all visible fields
-   */
-  const validateAll = (): boolean => {
-    clearErrors()
-    let isValid = true
-
-    for (const field of flatSchema.value) {
-      // Skip invisible fields
-      if (!isFieldVisible(field)) continue
-      // Skip disabled fields
-      if (isFieldDisabled(field)) continue
-
-      const error = validateField(field)
-      if (error) {
-        isValid = false
-      }
-    }
-
-    return isValid
-  }
-
-  /**
-   * Handle field value change with updateValues cascade
-   */
-  const handleFieldChange = (name: string, value: any, data?: any): void => {
-    // Set the new value
-    formValues.value = setNestedValue(formValues.value, name, value)
-    isDirty.value = true
-
-    // Clear error for this field
-    delete errors.value[name]
-
-    // Find the field in schema
-    const field = flatSchema.value.find((f) => f.name === name)
-
-    // Execute updateValues if defined
-    if (field?.updateValues) {
-      const updatedValues = field.updateValues({
-        values: formValues.value,
-        data,
-        isUpdate,
-        updateError: setFieldError,
-      })
-
-      if (updatedValues && typeof updatedValues === 'object') {
-        formValues.value = { ...formValues.value, ...updatedValues }
-      }
-    }
-  }
-
-  /**
-   * Process file uploads before submission
-   */
-  const processFileUploads = async (): Promise<Record<string, any>> => {
-    const values = deepClone(formValues.value)
-    const fileFields = collectFileFields(schema, values)
-
-    for (const fileField of fileFields) {
-      const { name, value, type } = fileField
-
-      // Check if value is a File or FilePickerValue that needs uploading
-      const needsUpload =
-        value instanceof File || (value && typeof value === 'object' && value.file instanceof File)
-
-      if (needsUpload) {
-        const url = await handleUploadFile(value)
-        if (url) {
-          // Update the value in the cloned values
-          Object.assign(values, setNestedValue(values, name, url))
-        }
-      }
-    }
-
-    return values
-  }
-
-  /**
-   * Clean up customFields values (remove null entries)
-   */
-  const cleanCustomFieldsValues = (values: Record<string, any>): Record<string, any> => {
-    const cleaned = { ...values }
-
-    for (const field of flatSchema.value) {
-      if (field.type === 'customFields' && field.props?.schema) {
-        const fieldValue = getNestedValue(cleaned, field.name)
-        if (Array.isArray(fieldValue)) {
-          const filteredValue = filterNullCustomFields(fieldValue, field.props.schema as IForm[])
-          Object.assign(cleaned, setNestedValue(cleaned, field.name, filteredValue))
-        }
-      }
-    }
-
-    return cleaned
-  }
-
-  /**
-   * Handle form submission
-   */
-  const handleSubmit = async (): Promise<void> => {
-    // Validate all fields
-    const isValid = validateAll()
-    if (!isValid) return
-
-    isSubmitting.value = true
-
-    try {
-      // Process file uploads
-      let processedValues = await processFileUploads()
-
-      // Clean up customFields
-      processedValues = cleanCustomFieldsValues(processedValues)
-
-      // Call onSubmit callback
-      if (onSubmit) {
-        await onSubmit({
-          values: processedValues,
-          isUpdate,
-        })
-      }
-
-      // Reset dirty state after successful submit
-      isDirty.value = false
-      initialSnapshot.value = deepClone(processedValues)
-    } catch (error) {
-      console.error('[useForm] Submit error:', error)
-      throw error
-    } finally {
-      isSubmitting.value = false
-    }
-  }
-
-  /**
-   * Reset form to initial values
-   */
-  const resetForm = (): void => {
-    formValues.value = deepClone(initialSnapshot.value)
-    clearErrors()
-    isDirty.value = false
-  }
-
-  return {
-    formValues,
-    errors,
-    isSubmitting,
-    isDirty,
-    handleFieldChange,
-    validateField,
-    validateAll,
-    isFieldVisible,
-    isFieldDisabled,
-    isFieldReadonly,
-    getFieldValue,
-    getFieldError,
-    setFieldError,
-    clearErrors,
-    resetForm,
-    handleSubmit,
-    flatSchema,
-  }
-}

package/src/components/Form/index.ts

@@ -1,16 +0,0 @@
-// Main Form component
-export { default as Form } from './Form.vue'
-
-// Field components
-export { default as FormField } from './FormField.vue'
-export { default as FormFields } from './FormFields.vue'
-export { default as CustomFields } from './CustomFields.vue'
-
-// Types
-export * from './types'
-
-// Composables
-export { useForm } from './composables/useForm'
-export { useFileUpload } from './composables/useFileUpload'
-export type { UseFormOptions, UseFormReturn } from './composables/useForm'
-export type { FileUploadResult } from './composables/useFileUpload'

package/src/components/Form/types.ts

@@ -1,203 +0,0 @@
-import type { Component } from 'vue'
-import type { IDropdownOptions } from '@/types'
-import type { InputVariant, InputSize, InputRounded } from '@/types'
-
-/**
- * Form field types - maps to corresponding UI components
- */
-export type IFormFieldType =
-  | 'text'
-  | 'email'
-  | 'password'
-  | 'number'
-  | 'file'
-  | 'fileUploader'
-  | 'tel'
-  | 'url'
-  | 'search'
-  | 'date'
-  | 'textarea'
-  | 'time'
-  | 'iconPicker'
-  | 'color'
-  | 'switch'
-  | 'check'
-  | 'customFields'
-  | 'select'
-  | 'multiSelect'
-  | 'avatarUpload'
-  | Component
-
-/**
- * Context passed to conditional functions
- */
-export interface IFormContext {
-  values: Record<string, any>
-  isUpdate?: boolean
-}
-
-/**
- * Disabled/Readonly can be boolean or function
- */
-export type IFormDisabled = boolean | ((context: IFormContext) => boolean)
-
-/**
- * Validation function signature
- */
-export interface IFormValidationContext {
-  value: any
-  values: Record<string, any>
-  isUpdate?: boolean
-}
-
-export type IFormValidation = (context: IFormValidationContext) => string
-
-/**
- * UpdateValues function signature - allows computed/derived fields
- */
-export interface IFormUpdateContext {
-  values: Record<string, any>
-  data?: any
-  isUpdate?: boolean
-  updateError?: (name: string, error: string) => void
-}
-
-export type IFormUpdateValues = (context: IFormUpdateContext) => Record<string, any>
-
-/**
- * When condition - controls field visibility
- */
-export type IFormWhen = (context: IFormContext) => boolean
-
-/**
- * CustomFields schema props
- */
-export interface IFormCustomFieldsProps {
-  schema: IForm[]
-  headers?: string[]
-}
-
-/**
- * Main form field interface
- */
-export interface IForm {
-  /** Field name - supports dot notation for nested paths (e.g., 'pricing.baseAmount') */
-  name: string
-  /** Field label - can be string or Vue component */
-  label?: string | Component
-  /** Placeholder text */
-  placeholder?: string
-  /** Field type - determines which component renders */
-  type?: IFormFieldType
-  /** Initial/default value - can be static or function */
-  value?: any | (() => any)
-  /** Additional props passed to field component */
-  props?: Record<string, any>
-  /** CSS class for the field item wrapper */
-  itemClass?: string
-  /** CSS class for the input element */
-  className?: string
-  /** Left icon (for inputs) */
-  icon?: string
-  /** Right icon (for inputs) */
-  iconRight?: string
-  /** Mark field as required */
-  required?: boolean
-  /** Disabled state - boolean or conditional function */
-  disabled?: IFormDisabled
-  /** Readonly state - boolean or conditional function */
-  readonly?: IFormDisabled
-  /** Left addon text */
-  addonLeft?: string
-  /** Right addon text */
-  addonRight?: string
-  /** Options for select/multiSelect/dropdown fields */
-  options?: IDropdownOptions
-  /** Validation function - returns error message or empty string */
-  validation?: IFormValidation
-  /** UpdateValues - called when field changes, returns new values object */
-  updateValues?: IFormUpdateValues
-  /** When condition - shows/hides field based on form state */
-  when?: IFormWhen
-  /** Mark as sensitive (e.g., for masking) */
-  isSensitiveField?: boolean
-  /** Min value for number inputs */
-  min?: number
-  /** Max value for number inputs */
-  max?: number
-  /** i18n keys */
-  labelI8n?: string
-  placeholderI8n?: string
-}
-
-/**
- * Timeline step for multi-step forms
- */
-export interface IFormStep {
-  id: number | string
-  title: string
-  icon?: string
-  description?: string
-}
-
-/**
- * Form component props
- */
-export interface IFormProps {
-  /** Schema - single array or grouped arrays */
-  schema: IForm[] | IForm[][]
-  /** Initial/bound values */
-  values?: Record<string, any>
-  /** Input variant applied to all fields */
-  variant?: InputVariant
-  /** Input size applied to all fields */
-  size?: InputSize
-  /** Input rounded applied to all fields */
-  rounded?: InputRounded
-  /** Loading state during submit */
-  loading?: boolean
-  /** Show/hide default footer with submit button */
-  footer?: boolean
-  /** Grid columns (number or tailwind class) */
-  columns?: number | string
-  /** Headings for grouped schemas */
-  groupsHeadings?: string[]
-  /** Descriptions for grouped schemas */
-  groupHeadingsDescription?: string[]
-  /** Timeline steps for multi-step form mode */
-  tabs?: IFormStep[]
-  /** Submit button text */
-  submitText?: string
-  /** Cancel button text */
-  cancelText?: string
-  /** Show cancel button */
-  showCancel?: boolean
-  /** Whether this is an update operation */
-  isUpdate?: boolean
-  /** Custom class for form element */
-  class?: string
-  /** Custom class for the grid layout (overrides columns) */
-  gridClass?: string
-  /** Custom class for group containers */
-  groupClass?: string
-  /** Custom class for group/step headers */
-  headerClass?: string
-  /** Custom class for the footer area */
-  footerClass?: string
-}
-
-/**
- * Form submit payload
- */
-export interface IFormSubmitPayload {
-  values: Record<string, any>
-  isUpdate?: boolean
-}
-
-/**
- * Field change payload
- */
-export interface IFormFieldChangePayload {
-  value: any
-  data?: any
-}