vlite3 0.1.0 → 0.1.2

package/src/components/Form/CustomFields.vue

@@ -1,294 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import type { IForm, IFormFieldChangePayload } from './types'
-import type { InputVariant, InputSize, InputRounded } from '@/types'
-import FormField from './FormField.vue'
-import Button from '@/components/Button.vue'
-import Label from '../Label.vue'
-
-interface Props {
-  modelValue?: Record<string, any>[]
-  schema: IForm[]
-  headers?: string[]
-  variant?: InputVariant
-  size?: InputSize
-  rounded?: InputRounded
-  disabled?: boolean
-  minRows?: number
-  maxRows?: number
-  addButtonText?: string
-  label: string
-  showRowNumbers?: boolean
-  /** All form values for context */
-  values?: Record<string, any>
-  isUpdate?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: () => [],
-  headers: () => [],
-  variant: 'outline',
-  size: 'md',
-  rounded: 'md',
-  disabled: false,
-  minRows: 0,
-  addButtonText: 'Add Row',
-  showRowNumbers: false,
-  isUpdate: false,
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: Record<string, any>[]): void
-  (e: 'change', value: Record<string, any>[]): void
-}>()
-
-// Internal rows state with unique ID for transitions
-const rows = ref<(Record<string, any> & { _id: string })[]>([])
-
-const generateId = () => `row_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
-
-// Sync with modelValue
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    if (Array.isArray(newValue)) {
-      // Merge existing rows to preserve _id if possible
-      rows.value = newValue.map((row, index) => {
-        const existing = rows.value[index]
-        return {
-          ...row,
-          _id: existing?._id || generateId(),
-        }
-      })
-    } else {
-      rows.value = []
-    }
-  },
-  { immediate: true, deep: true }
-)
-
-const createEmptyRow = (): Record<string, any> & { _id: string } => {
-  const row: Record<string, any> = {}
-  for (const field of props.schema) {
-    const defaultValue = typeof field.value === 'function' ? field.value() : field.value
-    row[field.name] = defaultValue ?? null
-  }
-  return { ...row, _id: generateId() }
-}
-
-const addRow = () => {
-  if (props.disabled) return
-  if (props.maxRows && rows.value.length >= props.maxRows) return
-  const newRows = [...rows.value, createEmptyRow()]
-  rows.value = newRows
-  emitChange(newRows)
-}
-
-const removeRow = (index: number) => {
-  if (props.disabled) return
-  if (rows.value.length <= props.minRows) return
-  const newRows = [...rows.value]
-  newRows.splice(index, 1)
-  rows.value = newRows
-  emitChange(newRows)
-}
-
-const handleFieldChange = (
-  rowIndex: number,
-  fieldName: string,
-  payload: IFormFieldChangePayload
-) => {
-  const newRows = [...rows.value]
-  newRows[rowIndex] = {
-    ...newRows[rowIndex],
-    [fieldName]: payload.value,
-  }
-  rows.value = newRows
-  emitChange(newRows)
-}
-
-const emitChange = (value: (Record<string, any> & { _id: string })[]) => {
-  const cleanValue = value.map(({ _id, ...rest }) => rest)
-  emit('update:modelValue', cleanValue)
-  emit('change', cleanValue)
-}
-
-const getFieldValue = (rowIndex: number, fieldName: string): any => {
-  return rows.value[rowIndex]?.[fieldName]
-}
-
-const canAddRow = computed(() => {
-  if (props.disabled) return false
-  if (props.maxRows && rows.value.length >= props.maxRows) return false
-  return true
-})
-
-const canRemoveRow = computed(() => {
-  if (props.disabled) return false
-  return rows.value.length > props.minRows
-})
-
-const columnHeaders = computed(() => {
-  if (props.headers && props.headers.length > 0) return props.headers
-  return props.schema.map((field) => field.label || field.name)
-})
-</script>
-
-<template>
-  <div class="custom-fields-wrapper">
-    <!-- Header / Label Area -->
-    <div class="flex justify-between items-center mb-2">
-      <Label class="text-sm font-medium text-foreground">
-        {{ label }}
-      </Label>
-      <Button
-        type="button"
-        variant="outline"
-        size="xs"
-        rounded="full"
-        icon="lucide:plus"
-        :disabled="!canAddRow"
-        @click="addRow" />
-    </div>
-
-    <!-- Table Container -->
-    <div class="custom-fields-table border border-border rounded overflow-hidden bg-background">
-      <!-- Table Header -->
-      <div
-        v-if="columnHeaders.length > 0"
-        class="flex border-b border-border bg-muted/50 text-gray-800 text-xs font-semibold uppercase tracking-wider">
-        <div v-if="showRowNumbers" class="w-10 flex-none p-3 text-center border-r border-border">
-          #
-        </div>
-        <div
-          v-for="(header, idx) in columnHeaders"
-          :key="idx"
-          class="flex-1 p-3 min-w-0 truncate"
-          :class="{ 'border-l border-border': idx > 0 }">
-          {{ header }}
-        </div>
-        <div v-if="canRemoveRow" class="w-10 flex-none p-3"></div>
-      </div>
-
-      <!-- Table Body (Rows) -->
-      <TransitionGroup name="list" tag="div" class="divide-y divide-border">
-        <div
-          v-for="(row, rowIndex) in rows"
-          :key="row._id"
-          class="flex group bg-white transition-colors">
-          <!-- Row Number -->
-          <div
-            v-if="showRowNumbers"
-            class="w-10 flex-none flex items-center justify-center text-xs text-muted-foreground border-r border-border bg-muted/20">
-            {{ rowIndex + 1 }}
-          </div>
-
-          <!-- Fields -->
-          <div
-            v-for="(field, fIdx) in schema"
-            :key="field.name"
-            class="flex-1 min-w-0 relative"
-            :class="{ 'border-l border-border': fIdx > 0 }">
-            <FormField
-              :field="{ ...field, label: undefined }"
-              :value="getFieldValue(rowIndex, field.name)"
-              :values="values || {}"
-              :variant="'transparent'"
-              size="sm"
-              rounded="none"
-              :disabled="disabled"
-              :isUpdate="isUpdate"
-              class="w-full h-full min-h-[40px]"
-              @change="(payload) => handleFieldChange(rowIndex, field.name, payload)" />
-          </div>
-
-          <!-- Remove Button -->
-          <div
-            v-if="canRemoveRow"
-            class="w-10 flex-none flex items-center justify-center border-l border-border bg-muted/20">
-            <Button
-              type="button"
-              variant="ghost"
-              size="xs"
-              icon="lucide:trash-2"
-              :disabled="disabled"
-              @click="removeRow(rowIndex)" />
-          </div>
-        </div>
-      </TransitionGroup>
-
-      <!-- Empty State -->
-      <div
-        v-if="rows.length === 0"
-        class="flex flex-col items-center justify-center py-6 text-center bg-muted/5">
-        <p class="text-sm font-medium text-foreground">No items added</p>
-        <p class="text-xs text-muted-foreground mt-1">Add a new item to get started</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-/* Remove default margins/padding from inputs inside the table to make them flush */
-.custom-fields-table :deep(.form-field-item) {
-  margin-bottom: 0 !important;
-  height: 100%;
-}
-
-.custom-fields-table :deep(input),
-.custom-fields-table :deep(textarea) {
-  padding-left: 1em;
-  padding-right: 0.5em;
-}
-
-.custom-fields-table :deep(input),
-.custom-fields-table :deep(textarea),
-.custom-fields-table :deep(select),
-.custom-fields-table :deep(.input-wrapper),
-.custom-fields-table :deep(.tooltip-trigger button) {
-  border: none !important;
-  background: transparent !important;
-  box-shadow: none !important;
-  border-radius: 0 !important;
-  height: 100% !important;
-  min-height: 40px;
-}
-
-.custom-fields-table :deep(.tooltip-trigger button) {
-  justify-content: space-between !important;
-}
-
-/* Focus state indication via inset shadow or background */
-.custom-fields-table :deep(input):focus,
-.custom-fields-table :deep(textarea):focus,
-.custom-fields-table :deep(select):focus,
-.custom-fields-table :deep(.input-wrapper):focus-within {
-  background-color: hsla(var(--primary) / 0.03) !important;
-  box-shadow: inset 0 0 0 2px hsla(var(--primary) / 0.1) !important;
-}
-
-/* Fix dropdown and other components ensuring they fill cell */
-.custom-fields-table :deep(.w-full) {
-  width: 100%;
-  height: 100%;
-}
-
-/* Transitions */
-.list-move,
-.list-enter-active,
-.list-leave-active {
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.list-enter-from,
-.list-leave-to {
-  opacity: 0;
-  transform: translateY(-10px);
-}
-
-.list-leave-active {
-  position: absolute;
-  width: 100%;
-  z-index: 0;
-}
-</style>

package/src/components/Form/Form.vue

@@ -1,406 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import type { IForm, IFormStep, IFormSubmitPayload } from './types'
-import type {
-  InputVariant,
-  InputSize,
-  InputRounded,
-  TimelineTextPosition,
-  ButtonProps,
-} from '@/types'
-import { useForm } from './composables/useForm'
-import FormFields from './FormFields.vue'
-import Button from '@/components/Button.vue'
-import Timeline from '@/components/Timeline.vue'
-import type { TimelineStep } from '@/types'
-
-interface Props {
-  /** 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
-  /** 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
-  /* submit button props */
-  submitProps?: ButtonProps
-  /** 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) */
-  className?: string
-  /** Custom class for group containers */
-  groupClass?: string
-  /** Custom class for group/step headers */
-  headerClass?: string
-  /** Custom class for the footer area */
-  footerClass?: string
-  /** Timeline text position */
-  timelineTextPosition?: TimelineTextPosition
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  values: () => ({}),
-  variant: 'outline',
-  size: 'md',
-  rounded: 'md',
-  loading: false,
-  footer: true,
-  groupsHeadings: () => [],
-  groupHeadingsDescription: () => [],
-  submitText: 'Submit',
-  cancelText: 'Cancel',
-  showCancel: false,
-  isUpdate: false,
-  class: '',
-  className: '',
-  groupClass: '',
-  headerClass: '',
-  footerClass: '',
-  timelineTextPosition: 'bottom',
-})
-
-const emit = defineEmits<{
-  (e: 'onSubmit', payload: IFormSubmitPayload): void
-  (e: 'onCancel'): void
-  (e: 'onStepChange', step: number): void
-}>()
-
-// Determine form mode
-const isGroupedMode = computed(() => {
-  if (!props.schema || props.schema.length === 0) return false
-  return Array.isArray(props.schema[0])
-})
-
-const isMultiStepMode = computed(() => {
-  return props.tabs && props.tabs.length > 0 && isGroupedMode.value
-})
-
-// Current step for multi-step mode
-const currentStep = ref(0)
-
-// Convert props.tabs to TimelineStep format
-const timelineSteps = computed((): TimelineStep[] => {
-  if (!props.tabs) return []
-  return props.tabs.map((tab, index) => ({
-    id: tab.id?.toString() || index.toString(),
-    title: tab.title,
-    icon: tab.icon,
-    description: tab.description,
-    status:
-      index < currentStep.value
-        ? 'completed'
-        : index === currentStep.value
-          ? 'current'
-          : 'upcoming',
-  }))
-})
-
-// Get grouped schemas
-const groupedSchemas = computed((): IForm[][] => {
-  if (!isGroupedMode.value) {
-    return [props.schema as IForm[]]
-  }
-  return props.schema as IForm[][]
-})
-
-// Get current step schema for multi-step mode
-const currentStepSchema = computed((): IForm[] => {
-  if (!isMultiStepMode.value) return []
-  return groupedSchemas.value[currentStep.value] || []
-})
-
-// Initialize form hook
-const {
-  formValues,
-  errors,
-  isSubmitting,
-  handleFieldChange,
-  validateField,
-  validateAll,
-  isFieldVisible,
-  isFieldDisabled,
-  isFieldReadonly,
-  getFieldValue,
-  handleSubmit: formSubmit,
-  flatSchema,
-} = useForm({
-  schema: props.schema,
-  values: props.values,
-  isUpdate: props.isUpdate,
-  onSubmit: (payload) => {
-    emit('onSubmit', payload)
-  },
-})
-
-// Watch for external value changes
-watch(
-  () => props.values,
-  (newValues) => {
-    if (newValues) {
-      // Re-initialize is handled in useForm watch
-    }
-  },
-  { deep: true }
-)
-
-// Handle field change from FormFields
-const onFieldChange = (name: string, payload: { value: any; data?: any }) => {
-  handleFieldChange(name, payload.value, payload.data)
-}
-
-// Validate current step (for multi-step mode)
-const validateCurrentStep = (): boolean => {
-  if (!isMultiStepMode.value) return true
-
-  const stepSchema = currentStepSchema.value
-  let isValid = true
-
-  for (const field of stepSchema) {
-    if (!isFieldVisible(field)) continue
-    if (isFieldDisabled(field)) continue
-
-    const error = validateField(field)
-    if (error) {
-      isValid = false
-    }
-  }
-
-  return isValid
-}
-
-// Can go to next step?
-const canGoNext = computed(() => {
-  if (!isMultiStepMode.value) return false
-  return currentStep.value < groupedSchemas.value.length - 1
-})
-
-// Can go to previous step?
-const canGoPrevious = computed(() => {
-  if (!isMultiStepMode.value) return false
-  return currentStep.value > 0
-})
-
-// Is on last step?
-const isLastStep = computed(() => {
-  if (!isMultiStepMode.value) return true
-  return currentStep.value === groupedSchemas.value.length - 1
-})
-
-// Go to next step
-const goNext = () => {
-  if (!canGoNext.value) return
-
-  // Validate current step first
-  if (!validateCurrentStep()) {
-    return
-  }
-
-  currentStep.value++
-  emit('onStepChange', currentStep.value)
-}
-
-// Go to previous step
-const goPrevious = () => {
-  if (!canGoPrevious.value) return
-  currentStep.value--
-  emit('onStepChange', currentStep.value)
-}
-
-// Go to specific step (via timeline click)
-const goToStep = (step: TimelineStep, index: number) => {
-  // Only allow going back or to already completed steps
-  if (index <= currentStep.value) {
-    currentStep.value = index
-    emit('onStepChange', currentStep.value)
-  }
-}
-
-// Handle form submit
-const handleSubmit = async () => {
-  // For multi-step mode, validate current step first
-  if (isMultiStepMode.value && !isLastStep.value) {
-    goNext()
-    return
-  }
-
-  await formSubmit()
-}
-
-// Handle cancel
-const handleCancel = () => {
-  emit('onCancel')
-}
-</script>
-
-<template>
-  <form :class="['form-container', props.class]" @submit.prevent="handleSubmit">
-    <!-- Multi-Step Timeline -->
-    <div v-if="isMultiStepMode && timelineSteps.length > 0" class="form-timeline mb-18">
-      <Timeline
-        :steps="timelineSteps"
-        :activeStep="currentStep"
-        direction="horizontal"
-        :textPosition="timelineTextPosition"
-        :clickable="true"
-        @step-click="goToStep" />
-    </div>
-
-    <!-- Single Schema Mode -->
-    <div v-if="!isGroupedMode" class="form-fields-single">
-      <FormFields
-        :schema="schema as IForm[]"
-        :values="formValues"
-        :errors="errors"
-        :variant="variant"
-        :size="size"
-        :rounded="rounded"
-        :className="className"
-        :isUpdate="isUpdate"
-        :isFieldVisible="isFieldVisible"
-        :isFieldDisabled="isFieldDisabled"
-        :isFieldReadonly="isFieldReadonly"
-        @change="onFieldChange" />
-    </div>
-
-    <!-- Grouped Schema Mode (Cards) -->
-    <div v-else-if="isGroupedMode && !isMultiStepMode" class="form-groups space-y-6">
-      <div
-        v-for="(groupSchema, groupIndex) in groupedSchemas"
-        :key="groupIndex"
-        :class="['form-group border rounded-lg overflow-hidden', groupClass]">
-        <!-- Group Header -->
-        <div
-          v-if="groupsHeadings?.[groupIndex]"
-          :class="['form-group-header bg-muted/50 px-6 py-4 border-b', headerClass]">
-          <h3 class="text-base font-semibold text-foreground">
-            {{ groupsHeadings[groupIndex] }}
-          </h3>
-          <p
-            v-if="groupHeadingsDescription?.[groupIndex]"
-            class="text-sm text-muted-foreground mt-1">
-            {{ groupHeadingsDescription[groupIndex] }}
-          </p>
-        </div>
-
-        <!-- Group Fields -->
-        <div class="form-group-body p-6">
-          <FormFields
-            :schema="groupSchema"
-            :values="formValues"
-            :errors="errors"
-            :variant="variant"
-            :size="size"
-            :rounded="rounded"
-            :className="className"
-            :isUpdate="isUpdate"
-            :isFieldVisible="isFieldVisible"
-            :isFieldDisabled="isFieldDisabled"
-            :isFieldReadonly="isFieldReadonly"
-            @change="onFieldChange" />
-        </div>
-      </div>
-    </div>
-
-    <!-- Multi-Step Mode (One Group at a Time) -->
-    <div v-else-if="isMultiStepMode" class="form-step">
-      <!-- Step Header -->
-      <div v-if="tabs?.[currentStep]" :class="['form-step-header mb-6', headerClass]">
-        <h2 class="text-lg font-semibold text-foreground">
-          {{ tabs[currentStep].title }}
-        </h2>
-        <p v-if="tabs[currentStep].description" class="text-sm text-muted-foreground mt-1">
-          {{ tabs[currentStep].description }}
-        </p>
-      </div>
-
-      <!-- Step Fields -->
-      <FormFields
-        :schema="currentStepSchema"
-        :values="formValues"
-        :errors="errors"
-        :variant="variant"
-        :size="size"
-        :rounded="rounded"
-        :className="className"
-        :isUpdate="isUpdate"
-        :isFieldVisible="isFieldVisible"
-        :isFieldDisabled="isFieldDisabled"
-        :isFieldReadonly="isFieldReadonly"
-        @change="onFieldChange" />
-    </div>
-
-    <!-- Custom Content Slot -->
-    <slot
-      :values="formValues"
-      :errors="errors"
-      :isSubmitting="isSubmitting"
-      :handleSubmit="handleSubmit" />
-
-    <!-- Footer -->
-    <div
-      v-if="footer"
-      :class="['form-footer mt-6 flex items-center justify-end gap-3', footerClass]">
-      <!-- Cancel Button -->
-      <Button
-        v-if="showCancel"
-        type="button"
-        variant="outline"
-        :text="cancelText"
-        :disabled="loading || isSubmitting"
-        @click="handleCancel" />
-
-      <!-- Previous Button (Multi-Step) -->
-      <Button
-        v-if="isMultiStepMode && canGoPrevious"
-        type="button"
-        variant="outline"
-        icon="lucide:arrow-left"
-        text="Previous"
-        @click="goPrevious" />
-
-      <!-- Next/Submit Button -->
-      <Button
-        v-if="isMultiStepMode && !isLastStep"
-        type="button"
-        variant="primary"
-        text="Next"
-        iconRight="lucide:arrow-right"
-        @click="goNext" />
-
-      <Button
-        v-else
-        type="submit"
-        variant="primary"
-        :text="submitText"
-        v-bind="submitProps"
-        :loading="loading || isSubmitting" />
-    </div>
-  </form>
-</template>
-
-<style scoped>
-.form-container {
-  width: 100%;
-}
-</style>