vlite3 0.1.0 → 0.1.2

package/src/components/Form/FormField.vue

@@ -1,404 +0,0 @@
-<script setup lang="ts">
-import { computed, defineAsyncComponent, markRaw, type Component } from 'vue'
-import type { IForm, IFormFieldChangePayload } from './types'
-import type { InputVariant, InputSize, InputRounded } from '@/types'
-import { isComponent } from './utils/form.utils'
-
-// Core components - imported directly for better tree-shaking and to prevent slot context issues
-import Input from '@/components/Input.vue'
-import Switch from '@/components/Switch.vue'
-import CheckBox from '@/components/CheckBox.vue'
-import Textarea from '@/components/Textarea.vue'
-import FilePicker from '@/components/FilePicker/FilePicker.vue'
-import AvatarUploader from '@/components/AvatarUploader/AvatarUploader.vue'
-
-// Async imports for complex or heavy components
-const Dropdown = defineAsyncComponent(
-	() => import('@/components/Dropdown/Dropdown.vue'),
-)
-const MultiSelect = defineAsyncComponent(
-	() => import('@/components/MultiSelect/MultiSelect.vue'),
-)
-const DatePicker = defineAsyncComponent(
-	() => import('@/components/DatePicker.vue'),
-)
-const ColorPicker = defineAsyncComponent(
-	() => import('@/components/ColorPicker/ColorPicker.vue'),
-)
-const IconPicker = defineAsyncComponent(
-	() => import('@/components/IconPicker.vue'),
-)
-const CustomFieldsComponent = defineAsyncComponent(
-	() => import('./CustomFields.vue'),
-)
-
-interface Props {
-	field: IForm
-	value: any
-	values: Record<string, any>
-	variant?: InputVariant
-	size?: InputSize
-	rounded?: InputRounded
-	disabled?: boolean
-	readonly?: boolean
-	error?: string
-	isUpdate?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	variant: 'outline',
-	size: 'md',
-	rounded: 'md',
-	disabled: false,
-	readonly: false,
-	error: '',
-	isUpdate: false,
-})
-
-const emit = defineEmits<{
-	(e: 'change', payload: IFormFieldChangePayload): void
-}>()
-
-// Handle value change
-const handleChange = (value: any, data?: any) => {
-	emit('change', { value, data })
-}
-
-// Handle input events (for v-model style components)
-const handleInput = (value: any) => {
-	emit('change', { value })
-}
-
-// Get the component to render based on field type
-const fieldComponent = computed(() => {
-	const type = props.field.type
-
-	// Custom component passed directly
-	if (isComponent(type)) {
-		return markRaw(type as Component)
-	}
-
-	// Map type to component
-	switch (type) {
-		case 'text':
-		case 'email':
-		case 'password':
-		case 'number':
-		case 'tel':
-		case 'url':
-		case 'search':
-			return Input
-
-		case 'textarea':
-			return Textarea
-
-		case 'switch':
-			return Switch
-
-		case 'check':
-			return CheckBox
-
-		case 'select':
-			return Dropdown
-
-		case 'multiSelect':
-			return MultiSelect
-
-		case 'date':
-		case 'time':
-			return DatePicker
-
-		case 'file':
-		case 'fileUploader':
-			return FilePicker
-
-		case 'avatarUpload':
-			return AvatarUploader
-
-		case 'color':
-			return ColorPicker
-
-		case 'iconPicker':
-			return IconPicker
-
-		case 'customFields':
-			return CustomFieldsComponent
-
-		default:
-			return Input
-	}
-})
-
-// Build props for the component
-const fieldProps = computed(() => {
-	const type = props.field.type
-	const baseProps: Record<string, any> = {
-		disabled: props.disabled || props.field.disabled === true,
-		...(props.field.props || {}),
-	}
-
-	// Input-based components
-	if (
-		type === 'text' ||
-		type === 'email' ||
-		type === 'password' ||
-		type === 'number' ||
-		type === 'tel' ||
-		type === 'url' ||
-		type === 'search' ||
-		!type
-	) {
-		return {
-			...baseProps,
-			modelValue: props.value ?? '',
-			type: type || 'text',
-			placeholder: props.field.placeholder,
-			icon: props.field.icon,
-			iconRight: props.field.iconRight,
-			addonLeft: props.field.addonLeft,
-			addonRight: props.field.addonRight,
-			variant: props.variant,
-			size: props.size,
-			rounded: props.rounded,
-			error: props.error,
-			min: props.field.min,
-			max: props.field.max,
-			class: props.field.className,
-		}
-	}
-
-	// Textarea
-	if (type === 'textarea') {
-		return {
-			...baseProps,
-			modelValue: props.value ?? '',
-			placeholder: props.field.placeholder,
-			rows: props.field.props?.rows || 3,
-			class: props.field.className,
-		}
-	}
-
-	// Switch
-	if (type === 'switch') {
-		return {
-			...baseProps,
-			modelValue: !!props.value,
-			label: '', // Label handled externally
-		}
-	}
-
-	// Checkbox
-	if (type === 'check') {
-		return {
-			...baseProps,
-			modelValue: !!props.value,
-			label: '', // Label handled externally
-		}
-	}
-
-	// Dropdown (Select)
-	if (type === 'select') {
-		return {
-			...baseProps,
-			modelValue: props.value,
-			options: props.field.options || [],
-			placeholder: props.field.placeholder,
-			selectable: true,
-			closeOnSelect: true,
-		}
-	}
-
-	// MultiSelect
-	if (type === 'multiSelect') {
-		return {
-			...baseProps,
-			modelValue: Array.isArray(props.value) ? props.value : [],
-			options: props.field.options || [],
-			placeholder: props.field.placeholder,
-		}
-	}
-
-	// DatePicker / TimePicker
-	if (type === 'date' || type === 'time') {
-		return {
-			...baseProps,
-			modelValue: props.value,
-			mode: type === 'time' ? 'time' : 'date',
-			placeholder: props.field.placeholder,
-		}
-	}
-
-	// FilePicker
-	if (type === 'fileUploader' || type === 'file') {
-		return {
-			...baseProps,
-			modelValue: props.value,
-			multiSelect: props.field.props?.multiple || false,
-			fileTypes: props.field.props?.accept
-				? props.field.props.accept.split(',')
-				: [],
-			returnFormat: 'base64',
-			variant: type === 'file' ? 'input' : 'dropzone',
-			placeholder: props.field.placeholder,
-			size: props.size,
-			rounded: props.rounded,
-		}
-	}
-
-	// AvatarUploader
-	if (type === 'avatarUpload') {
-		return {
-			...baseProps,
-			modelValue: props.value,
-			editable: !props.readonly,
-		}
-	}
-
-	// ColorPicker
-	if (type === 'color') {
-		return {
-			...baseProps,
-			modelValue: props.value || '#000000',
-		}
-	}
-
-	// IconPicker
-	if (type === 'iconPicker') {
-		return {
-			...baseProps,
-			value: props.value || 'lucide:smile',
-		}
-	}
-
-	// CustomFields
-	if (type === 'customFields') {
-		return {
-			...baseProps,
-			modelValue: Array.isArray(props.value) ? props.value : [],
-			schema: props.field.props?.schema || [],
-			headers: props.field.props?.headers || [],
-			values: props.values,
-			variant: props.variant,
-			size: props.size,
-			rounded: props.rounded,
-			isUpdate: props.isUpdate,
-		}
-	}
-
-	// Custom component
-	if (isComponent(type)) {
-		return {
-			...baseProps,
-			value: props.value,
-			values: props.values,
-		}
-	}
-
-	return baseProps
-})
-
-// Build event handlers
-const fieldEvents = computed(() => {
-	const type = props.field.type
-
-	// v-model components (emit 'update:modelValue')
-	if (
-		type === 'text' ||
-		type === 'email' ||
-		type === 'password' ||
-		type === 'number' ||
-		type === 'tel' ||
-		type === 'url' ||
-		type === 'search' ||
-		type === 'textarea' ||
-		type === 'switch' ||
-		type === 'check' ||
-		!type
-	) {
-		return {
-			'update:modelValue': handleInput,
-		}
-	}
-
-	// Dropdown emits onSelect
-	if (type === 'select') {
-		return {
-			onSelect: (payload: { value: any; data?: any }) => {
-				handleChange(payload.value, payload.data)
-			},
-		}
-	}
-
-	// MultiSelect emits change
-	if (type === 'multiSelect') {
-		return {
-			change: (value: any) => handleChange(value),
-		}
-	}
-
-	// DatePicker emits onChange
-	if (type === 'date' || type === 'time') {
-		return {
-			change: (value: any) => handleChange(value),
-		}
-	}
-
-	// FilePicker emits change
-	if (type === 'fileUploader' || type === 'file') {
-		return {
-			change: (value: any) => {
-				handleChange(value)
-			},
-		}
-	}
-
-	// AvatarUploader emits change
-	if (type === 'avatarUpload') {
-		return {
-			change: (value: any) => {
-				handleChange(value)
-			},
-		}
-	}
-
-	// ColorPicker emits change
-	if (type === 'color') {
-		return {
-			change: (value: string) => handleChange(value),
-		}
-	}
-
-	// IconPicker emits onSelect
-	if (type === 'iconPicker') {
-		return {
-			onSelect: (value: string) => handleChange(value),
-		}
-	}
-
-	// CustomFields emits change
-	if (type === 'customFields') {
-		return {
-			change: (value: any) => handleChange(value),
-		}
-	}
-
-	// Custom component emits onChange
-	if (isComponent(type)) {
-		return {
-			onChange: (payload: { value: any; data?: any }) => {
-				handleChange(payload.value, payload.data)
-			},
-		}
-	}
-
-	return {}
-})
-</script>
-
-<template>
-	<component
-		:is="fieldComponent"
-		v-bind="fieldProps"
-		v-on="fieldEvents" />
-</template>
-

package/src/components/Form/FormFields.vue

@@ -1,161 +0,0 @@
-<script setup lang="ts">
-import { computed, type Component } from 'vue'
-import type { IForm, IFormFieldChangePayload } from './types'
-import type { InputVariant, InputSize, InputRounded } from '@/types'
-import { getNestedValue, isComponent } from './utils/form.utils'
-import Label from '@/components/Label.vue'
-import FormField from './FormField.vue'
-
-interface Props {
-  schema: IForm[]
-  values: Record<string, any>
-  errors: Record<string, string>
-  variant?: InputVariant
-  size?: InputSize
-  rounded?: InputRounded
-  className?: string
-  isUpdate?: boolean
-  /** Function to check if field is visible */
-  isFieldVisible?: (field: IForm) => boolean
-  /** Function to check if field is disabled */
-  isFieldDisabled?: (field: IForm) => boolean
-  /** Function to check if field is readonly */
-  isFieldReadonly?: (field: IForm) => boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: 'outline',
-  size: 'md',
-  rounded: 'md',
-  columns: 1,
-  isUpdate: false,
-})
-
-const emit = defineEmits<{
-  (e: 'change', name: string, payload: IFormFieldChangePayload): void
-}>()
-
-// Grid class for layout
-const className = computed(() => {
-  if (props.className) return props.className
-})
-
-// Get value for a field
-const getFieldValue = (field: IForm): any => {
-  return getNestedValue(props.values, field.name)
-}
-
-// Get error for a field
-const getFieldError = (field: IForm): string => {
-  return props.errors[field.name] || ''
-}
-
-// Check if field should be visible
-const checkFieldVisible = (field: IForm): boolean => {
-  if (props.isFieldVisible) {
-    return props.isFieldVisible(field)
-  }
-  return true
-}
-
-// Check if field is disabled
-const checkFieldDisabled = (field: IForm): boolean => {
-  if (props.isFieldDisabled) {
-    return props.isFieldDisabled(field)
-  }
-  return field.disabled === true
-}
-
-// Check if field is readonly
-const checkFieldReadonly = (field: IForm): boolean => {
-  if (props.isFieldReadonly) {
-    return props.isFieldReadonly(field)
-  }
-  return field.readonly === true
-}
-
-// Render label as component or string
-const renderLabel = (label: string | Component | undefined): string | Component | undefined => {
-  if (!label) return undefined
-  if (isComponent(label)) return label as Component
-  return label as string
-}
-
-// Handle field change
-const handleFieldChange = (field: IForm, payload: IFormFieldChangePayload) => {
-  emit('change', field.name, payload)
-}
-
-// Get item class for field (for grid column span)
-const getItemClass = (field: IForm): string => {
-  return field.itemClass || ''
-}
-</script>
-
-<template>
-  <div class="grid gap-4" :class="className">
-    <template v-for="field in schema" :key="field.name">
-      <div v-if="checkFieldVisible(field)" :class="['form-field-item', getItemClass(field)]">
-        <!-- Label -->
-        <Label
-          v-if="
-            field.label &&
-            field.type !== 'switch' &&
-            field.type !== 'check' &&
-            field.type !== 'customFields'
-          "
-          :for="field.name"
-          class="mb-2 block text-sm font-medium">
-          <component v-if="isComponent(field.label)" :is="renderLabel(field.label)" />
-          <template v-else>
-            {{ field.label }}
-            <span v-if="field.required" class="text-destructive ml-0.5">*</span>
-          </template>
-        </Label>
-
-        <!-- Field Component -->
-        <FormField
-          :field="field"
-          :value="getFieldValue(field)"
-          :label="field.type === 'customFields' ? field.label : undefined"
-          :values="values"
-          :variant="variant"
-          :size="size"
-          :rounded="rounded"
-          :disabled="checkFieldDisabled(field)"
-          :readonly="checkFieldReadonly(field)"
-          :error="getFieldError(field)"
-          :isUpdate="isUpdate"
-          @change="(payload) => handleFieldChange(field, payload)" />
-
-        <!-- Inline Label for Switch/Checkbox -->
-        <Label
-          v-if="field.label && (field.type === 'switch' || field.type === 'check')"
-          :for="field.name"
-          class="ml-2 text-sm font-medium cursor-pointer">
-          {{ field.label }}
-          <span v-if="field.required" class="text-destructive ml-0.5">*</span>
-        </Label>
-
-        <!-- Error Message -->
-        <p v-if="getFieldError(field)" class="mt-1 text-sm text-destructive">
-          {{ getFieldError(field) }}
-        </p>
-      </div>
-    </template>
-  </div>
-</template>
-
-<style scoped>
-.form-field-item {
-  display: flex;
-  flex-direction: column;
-}
-
-/* Handle switch/checkbox inline layout */
-.form-field-item:has([role='switch']),
-.form-field-item:has([role='checkbox']) {
-  flex-direction: row;
-  align-items: center;
-}
-</style>

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

@@ -1,112 +0,0 @@
-import { ref } from 'vue'
-import { useVLiteConfig } from '@/core/config'
-
-export interface FileUploadResult {
-  url: string
-  fileName?: string
-  fileType?: string
-  fileSize?: number
-}
-
-/**
- * Composable for handling file uploads.
- *
- * This composable automatically checks the global VLite configuration
- * for a registered 'upload' service. If found, it uses that service.
- * Otherwise, it falls back to a mock implementation.
- */
-export function useFileUpload() {
-  const loading = ref(false)
-  const error = ref<string | null>(null)
-  const config = useVLiteConfig()
-
-  /**
-   * Upload a file and return the URL
-   *
-   * @param file - File object or FilePickerValue to upload
-   * @param folderId - Optional folder ID for organizing uploads
-   * @returns Promise resolving to the file URL or null on failure
-   */
-  const handleUploadFile = async (
-    file: File | { file: File; fileName?: string },
-    folderId?: string | null
-  ): Promise<string | null | undefined> => {
-    // Note: We don't set loading globally here if calling from handleUploadFiles
-    // to avoid flickering, but for single calls it's fine.
-    // If running in parallel, the parent handles the loading state usually,
-    // but safe to keep strictly for single file usage.
-    
-    try {
-      // Extract File object if FilePickerValue was passed
-      const fileToUpload = file instanceof File ? file : file.file
-
-      // ---------------------------------------------------------
-      // 1. Check for Global Custom Implementation (Registry Pattern)
-      // ---------------------------------------------------------
-      if (config.services?.upload) {
-        try {
-          const result = await config.services.upload(fileToUpload, folderId)
-          return result
-        } catch (customErr) {
-          throw customErr instanceof Error ? customErr : new Error('External upload service failed')
-        }
-      }
-
-      // ---------------------------------------------------------
-      // 2. Default Fallback Implementation (if no global service registered)
-      // ---------------------------------------------------------
-
-      // Simulate network delay
-      await new Promise((resolve) => setTimeout(resolve, 800))
-
-      // Generate a mock URL
-      const mockId = Math.random().toString(36).substring(7)
-      const safeName = fileToUpload.name.replace(/[^a-zA-Z0-9.-]/g, '_')
-
-      return `https://storage.googleapis.com/vlite-bucket/${mockId}/${safeName}`
-
-    } catch (err) {
-      const msg = err instanceof Error ? err.message : 'Upload failed'
-      console.error('[useFileUpload] Error:', err)
-      // If called individually, set error. If parallel, this might get overwritten,
-      // but usually the Promise.all catch block handles the group error.
-      error.value = msg
-      return null
-    }
-  }
-
-  /**
-   * Upload multiple files in parallel
-   */
-  const handleUploadFiles = async (
-    files: Array<File | { file: File }>,
-    folderId?: string | null
-  ): Promise<Array<string | null>> => {
-    loading.value = true
-    error.value = null
-
-    try {
-      // Create an array of promises for parallel execution
-      const uploadPromises = files.map((file) => handleUploadFile(file, folderId))
-
-      // Wait for all uploads to complete
-      const results = await Promise.all(uploadPromises)
-      
-      return results
-    } catch (err) {
-      error.value = err instanceof Error ? err.message : 'One or more uploads failed'
-      console.error('[useFileUpload] Parallel Upload Error:', err)
-      return [] 
-    } finally {
-      loading.value = false
-    }
-  }
-
-  return {
-    handleUploadFile,
-    handleUploadFiles,
-    loading,
-    error,
-  }
-}
-