@htlkg/components 0.0.1

package/src/forms/JsonSchemaForm.vue

@@ -0,0 +1,615 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import Ajv from 'ajv';
+import addFormats from 'ajv-formats';
+import {
+  uiInput,
+  uiSelect,
+  uiToggle,
+  uiRangeSlider,
+  uiTextArea,
+  uiButton
+} from '@hotelinking/ui';
+
+// Initialize AJV for JSON Schema validation with format support
+const ajv = new Ajv({ allErrors: true });
+addFormats(ajv); // Add support for format keywords like "email", "uri", "date", etc.
+
+interface JsonSchema {
+  type: string;
+  properties?: Record<string, any>;
+  required?: string[];
+  title?: string;
+  description?: string;
+}
+
+interface Props {
+  schema: JsonSchema;
+  modelValue?: Record<string, any>;
+  uiSchema?: Record<string, any>;
+  loading?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => ({}),
+  uiSchema: () => ({}),
+  loading: false
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Record<string, any>];
+  'validation-error': [errors: Array<{ field: string; message: string }>];
+  'submit': [value: Record<string, any>];
+}>();
+
+// Internal form data
+const formData = computed({
+  get: () => props.modelValue,
+  set: (value: Record<string, any>) => {
+    emit('update:modelValue', value);
+  }
+});
+
+const errors = ref<Record<string, string>>({});
+const touched = ref<Record<string, boolean>>({});
+
+// Get widget type from UI schema or infer from field schema
+function getWidget(fieldName: string): string {
+  const uiSchemaField = props.uiSchema[fieldName];
+  if (uiSchemaField?.['ui:widget']) {
+    return uiSchemaField['ui:widget'];
+  }
+  
+  const fieldSchema = props.schema.properties?.[fieldName];
+  if (!fieldSchema) return 'text';
+  
+  // Infer widget from schema
+  if (fieldSchema.type === 'boolean') return 'toggle';
+  if (fieldSchema.type === 'number' || fieldSchema.type === 'integer') {
+    // Only use slider if explicitly specified in uiSchema
+    // Don't auto-infer from min/max presence
+    return 'number';
+  }
+  if (fieldSchema.type === 'string') {
+    if (fieldSchema.enum) return 'select';
+    if (fieldSchema.format === 'email') return 'email';
+    if (fieldSchema.format === 'uri') return 'url';
+    if (fieldSchema.minLength && fieldSchema.minLength > 100) return 'textarea';
+  }
+  if (fieldSchema.type === 'array') return 'array';
+  if (fieldSchema.type === 'object') return 'object';
+  
+  return 'text';
+}
+
+// Get input type for uiInput component
+function getInputType(fieldName: string): 'text' | 'email' | 'password' | 'number' | 'date' | 'datetime-local' {
+  const widget = getWidget(fieldName);
+  
+  if (widget === 'password') return 'password';
+  if (widget === 'email') return 'email';
+  if (widget === 'number') return 'number';
+  if (widget === 'date') return 'date';
+  if (widget === 'datetime-local') return 'datetime-local';
+  
+  return 'text';
+}
+
+// Get field color based on validation state (computed for reactivity)
+function getFieldColor(fieldName: string): 'gray' | 'green' | 'red' | 'yellow' {
+  // Check for errors first (most important)
+  if (errors.value[fieldName]) return 'red';
+  
+  // If field has been touched and has a valid value, show green
+  if (touched.value[fieldName]) {
+    const value = formData.value[fieldName];
+    if (isRequired(fieldName) && value !== undefined && value !== null && value !== '') {
+      return 'green';
+    }
+  }
+  
+  // Default to gray
+  return 'gray';
+}
+
+// Check if field is required
+function isRequired(fieldName: string): boolean {
+  return props.schema.required?.includes(fieldName) ?? false;
+}
+
+// Get field label
+function getFieldLabel(fieldName: string): string {
+  const fieldSchema = props.schema.properties?.[fieldName];
+  return fieldSchema?.title || fieldName;
+}
+
+// Get field description
+function getFieldDescription(fieldName: string): string {
+  const fieldSchema = props.schema.properties?.[fieldName];
+  return fieldSchema?.description || '';
+}
+
+// Get placeholder from UI schema
+function getPlaceholder(fieldName: string): string {
+  return props.uiSchema[fieldName]?.['ui:placeholder'] || '';
+}
+
+// Get autocomplete attribute for better UX (especially for passwords)
+// Following https://www.chromium.org/developers/design-documents/create-amazing-password-forms/
+function getAutocomplete(fieldName: string): string | undefined {
+  const widget = getWidget(fieldName);
+  const fieldSchema = props.schema.properties?.[fieldName];
+  
+  // Check if explicitly set in uiSchema
+  if (props.uiSchema[fieldName]?.['ui:autocomplete']) {
+    return props.uiSchema[fieldName]['ui:autocomplete'];
+  }
+  
+  // Auto-detect based on field name and type
+  const lowerFieldName = fieldName.toLowerCase();
+  
+  if (widget === 'email' || fieldSchema?.format === 'email') {
+    return 'email';
+  }
+  
+  if (widget === 'password') {
+    // Check for common password field patterns
+    if (lowerFieldName.includes('new') || lowerFieldName.includes('confirm')) {
+      return 'new-password';
+    }
+    if (lowerFieldName.includes('current') || lowerFieldName === 'password') {
+      return 'current-password';
+    }
+    return 'current-password'; // Default for password fields
+  }
+  
+  // Common autocomplete values
+  if (lowerFieldName.includes('username') || lowerFieldName === 'user') {
+    return 'username';
+  }
+  if (lowerFieldName.includes('name')) {
+    if (lowerFieldName.includes('first')) return 'given-name';
+    if (lowerFieldName.includes('last')) return 'family-name';
+    return 'name';
+  }
+  if (lowerFieldName.includes('phone') || lowerFieldName.includes('tel')) {
+    return 'tel';
+  }
+  if (lowerFieldName.includes('address')) {
+    return 'street-address';
+  }
+  if (lowerFieldName.includes('city')) {
+    return 'address-level2';
+  }
+  if (lowerFieldName.includes('country')) {
+    return 'country-name';
+  }
+  if (lowerFieldName.includes('postal') || lowerFieldName.includes('zip')) {
+    return 'postal-code';
+  }
+  
+  return undefined;
+}
+
+// Validate form data against schema using AJV
+function validate(): Array<{ field: string; message: string }> {
+  const validationErrors: Array<{ field: string; message: string }> = [];
+  errors.value = {};
+
+  // Compile and validate using AJV
+  const validateFn = ajv.compile(props.schema);
+  const valid = validateFn(formData.value);
+
+  if (!valid && validateFn.errors) {
+    for (const error of validateFn.errors) {
+      // Extract field name from instancePath (e.g., "/fieldName" -> "fieldName")
+      const field = error.instancePath.replace(/^\//, '') || error.params.missingProperty || 'form';
+      
+      // Generate user-friendly error message
+      let message = '';
+      
+      if (error.keyword === 'required') {
+        const missingField = error.params.missingProperty;
+        message = `${getFieldLabel(missingField)} is required`;
+        errors.value[missingField] = message;
+        validationErrors.push({ field: missingField, message });
+      } else if (error.keyword === 'type') {
+        message = `${getFieldLabel(field)} must be a ${error.params.type}`;
+        errors.value[field] = message;
+        validationErrors.push({ field, message });
+      } else if (error.keyword === 'minimum') {
+        message = `${getFieldLabel(field)} must be at least ${error.params.limit}`;
+        errors.value[field] = message;
+        validationErrors.push({ field, message });
+      } else if (error.keyword === 'maximum') {
+        message = `${getFieldLabel(field)} must be at most ${error.params.limit}`;
+        errors.value[field] = message;
+        validationErrors.push({ field, message });
+      } else if (error.keyword === 'minLength') {
+        message = `${getFieldLabel(field)} must be at least ${error.params.limit} characters`;
+        errors.value[field] = message;
+        validationErrors.push({ field, message });
+      } else if (error.keyword === 'maxLength') {
+        message = `${getFieldLabel(field)} must be at most ${error.params.limit} characters`;
+        errors.value[field] = message;
+        validationErrors.push({ field, message });
+      } else if (error.keyword === 'format') {
+        message = `${getFieldLabel(field)} must be a valid ${error.params.format}`;
+        errors.value[field] = message;
+        validationErrors.push({ field, message });
+      } else if (error.keyword === 'enum') {
+        message = `${getFieldLabel(field)} must be one of: ${error.params.allowedValues.join(', ')}`;
+        errors.value[field] = message;
+        validationErrors.push({ field, message });
+      } else {
+        // Generic error message
+        message = error.message || 'Invalid value';
+        errors.value[field] = message;
+        validationErrors.push({ field, message });
+      }
+    }
+  }
+
+  return validationErrors;
+}
+
+// Handle form submission
+function handleSubmit(event: Event) {
+  event.preventDefault();
+  
+  const validationErrors = validate();
+  if (validationErrors.length > 0) {
+    emit('validation-error', validationErrors);
+    return;
+  }
+  
+  emit('submit', formData.value);
+}
+
+// Update field value
+function updateField(field: string, value: any) {
+  touched.value[field] = true;
+  
+  // Update formData by emitting the new value
+  const newData = {
+    ...formData.value,
+    [field]: value
+  };
+  emit('update:modelValue', newData);
+  
+  // Validate field on change with the new value
+  validateFieldWithValue(field, value);
+}
+
+// Validate a single field using AJV (reads from formData)
+function validateField(fieldName: string) {
+  validateFieldWithValue(fieldName, formData.value[fieldName]);
+}
+
+// Validate a single field with a specific value
+function validateFieldWithValue(fieldName: string, fieldValue: any) {
+  const fieldSchema = props.schema.properties?.[fieldName];
+  if (!fieldSchema) return;
+  
+  // Clear existing error
+  delete errors.value[fieldName];
+  
+  // If field is empty/null/undefined and required, show required error
+  if (isRequired(fieldName) && (fieldValue === undefined || fieldValue === null || fieldValue === '')) {
+    errors.value[fieldName] = `${getFieldLabel(fieldName)} is required`;
+    return;
+  }
+  
+  // If field is empty and not required, no validation needed
+  if (fieldValue === undefined || fieldValue === null || fieldValue === '') {
+    return;
+  }
+  
+  // Create a mini schema for just this field (without required)
+  const singleFieldSchema = {
+    type: 'object',
+    properties: {
+      [fieldName]: fieldSchema
+    }
+  };
+  
+  // Validate just this field
+  const validateFn = ajv.compile(singleFieldSchema);
+  const valid = validateFn({ [fieldName]: fieldValue });
+  
+  if (!valid && validateFn.errors) {
+    for (const error of validateFn.errors) {
+      let message = '';
+      
+      if (error.keyword === 'type') {
+        message = `${getFieldLabel(fieldName)} must be a ${error.params.type}`;
+      } else if (error.keyword === 'minimum') {
+        message = `${getFieldLabel(fieldName)} must be at least ${error.params.limit}`;
+      } else if (error.keyword === 'maximum') {
+        message = `${getFieldLabel(fieldName)} must be at most ${error.params.limit}`;
+      } else if (error.keyword === 'minLength') {
+        message = `${getFieldLabel(fieldName)} must be at least ${error.params.limit} characters`;
+      } else if (error.keyword === 'maxLength') {
+        message = `${getFieldLabel(fieldName)} must be at most ${error.params.limit} characters`;
+      } else if (error.keyword === 'format') {
+        message = `${getFieldLabel(fieldName)} must be a valid ${error.params.format}`;
+      } else if (error.keyword === 'enum') {
+        message = `${getFieldLabel(fieldName)} must be one of: ${error.params.allowedValues.join(', ')}`;
+      } else {
+        message = error.message || 'Invalid value';
+      }
+      
+      errors.value[fieldName] = message;
+      break; // Only show first error per field
+    }
+  }
+}
+
+// Get enum options for select
+function getSelectOptions(fieldName: string) {
+  const fieldSchema = props.schema.properties?.[fieldName];
+  if (!fieldSchema?.enum) return [];
+  
+  return fieldSchema.enum.map((value: any) => ({
+    id: String(value),
+    name: String(value),
+    label: String(value)
+  }));
+}
+
+// Get selected option for select
+function getSelectedOption(fieldName: string) {
+  const value = formData.value[fieldName];
+  if (!value) {
+    // Return first option as default if available
+    const options = getSelectOptions(fieldName);
+    return options.length > 0 ? options[0] : { id: '', name: '', label: '' };
+  }
+  
+  return {
+    id: String(value),
+    name: String(value),
+    label: String(value)
+  };
+}
+
+// Array field helpers
+function addArrayItem(fieldName: string) {
+  const currentArray = formData.value[fieldName] || [];
+  updateField(fieldName, [...currentArray, '']);
+}
+
+function removeArrayItem(fieldName: string, index: number) {
+  const currentArray = formData.value[fieldName] || [];
+  const newArray = currentArray.filter((_: any, i: number) => i !== index);
+  updateField(fieldName, newArray);
+}
+
+function updateArrayItem(fieldName: string, index: number, value: any) {
+  const currentArray = formData.value[fieldName] || [];
+  const newArray = [...currentArray];
+  newArray[index] = value;
+  updateField(fieldName, newArray);
+}
+
+// Expose methods
+defineExpose({
+  validate,
+  reset: () => { 
+    emit('update:modelValue', {});
+    errors.value = {}; 
+    touched.value = {};
+  }
+});
+</script>
+
+<template>
+  <form @submit="handleSubmit" class="space-y-6">
+    <!-- Form Title and Description -->
+    <div v-if="schema.title || schema.description" class="mb-6">
+      <h2 v-if="schema.title" class="text-2xl font-bold text-gray-900 mb-2">
+        {{ schema.title }}
+      </h2>
+      <p v-if="schema.description" class="text-gray-600">
+        {{ schema.description }}
+      </p>
+    </div>
+
+    <!-- Form Fields -->
+    <div v-if="schema.properties" class="space-y-6">
+      <div
+        v-for="(fieldSchema, fieldName) in schema.properties"
+        :key="fieldName"
+      >
+        <!-- Text/Email/URL/Password Input -->
+        <uiInput
+          v-if="['text', 'email', 'url', 'password'].includes(getWidget(fieldName))"
+          :name="fieldName"
+          :label="getFieldLabel(fieldName)"
+          :type="getInputType(fieldName)"
+          :value="formData[fieldName] || ''"
+          :placeholder="getPlaceholder(fieldName)"
+          :error="errors[fieldName]"
+          :color="getFieldColor(fieldName)"
+          :loading="loading"
+          :required-text="isRequired(fieldName) ? '*' : undefined"
+          @input-changed="updateField(fieldName, $event.value)"
+        />
+
+        <!-- Number Input -->
+        <uiInput
+          v-else-if="getWidget(fieldName) === 'number'"
+          :name="fieldName"
+          :label="getFieldLabel(fieldName)"
+          type="number"
+          :value="String(formData[fieldName] ?? '')"
+          :placeholder="getPlaceholder(fieldName)"
+          :error="errors[fieldName]"
+          :color="getFieldColor(fieldName)"
+          :loading="loading"
+          :required-text="isRequired(fieldName) ? '*' : undefined"
+          :min="schema.properties?.[fieldName]?.minimum"
+          :max="schema.properties?.[fieldName]?.maximum"
+          @input-changed="updateField(fieldName, $event.value === '' ? null : Number($event.value))"
+        />
+
+        <!-- Textarea -->
+        <uiTextArea
+          v-else-if="getWidget(fieldName) === 'textarea'"
+          :name="fieldName"
+          :label="getFieldLabel(fieldName)"
+          :value="formData[fieldName] || ''"
+          :placeholder="getPlaceholder(fieldName)"
+          :error="errors[fieldName]"
+          :color="getFieldColor(fieldName)"
+          :loading="loading"
+          :required-text="isRequired(fieldName) ? '*' : undefined"
+          :rows="4"
+          @input-changed="updateField(fieldName, $event.value)"
+        />
+
+        <!-- Select Dropdown -->
+        <uiSelect
+          v-else-if="getWidget(fieldName) === 'select'"
+          :label="getFieldLabel(fieldName)"
+          :items="getSelectOptions(fieldName)"
+          :select="getSelectedOption(fieldName)"
+          :placeholder="getPlaceholder(fieldName) || 'Select an option'"
+          :error="errors[fieldName]"
+          :color="getFieldColor(fieldName)"
+          :loading="loading"
+          :required-text="isRequired(fieldName) ? '*' : undefined"
+          @select-changed="(item: any) => updateField(fieldName, item.id)"
+        />
+
+        <!-- Toggle (Boolean) -->
+        <uiToggle
+          v-else-if="getWidget(fieldName) === 'toggle'"
+          :item="{
+            title: getFieldLabel(fieldName),
+            subtitle: getFieldDescription(fieldName),
+            action: fieldName
+          }"
+          :checked="formData[fieldName]"
+          :loading="loading"
+          @toggle-changed="updateField(fieldName, $event.active)"
+        />
+
+        <!-- Checkbox (Boolean alternative) -->
+        <div v-else-if="getWidget(fieldName) === 'checkbox'" class="flex items-start">
+          <input
+            :id="fieldName"
+            type="checkbox"
+            :checked="formData[fieldName]"
+            :disabled="loading"
+            @change="updateField(fieldName, ($event.target as HTMLInputElement).checked)"
+            class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mt-1"
+          />
+          <label :for="fieldName" class="ml-2 block">
+            <span class="text-sm font-medium text-gray-700">
+              {{ getFieldLabel(fieldName) }}
+              <span v-if="isRequired(fieldName)" class="text-red-500">*</span>
+            </span>
+            <p v-if="getFieldDescription(fieldName)" class="text-sm text-gray-500">
+              {{ getFieldDescription(fieldName) }}
+            </p>
+          </label>
+        </div>
+
+        <!-- Range Slider -->
+        <uiRangeSlider
+          v-else-if="getWidget(fieldName) === 'slider'"
+          :label="getFieldLabel(fieldName)"
+          :min="schema.properties[fieldName].minimum ?? 0"
+          :max="schema.properties[fieldName].maximum ?? 100"
+          :slider-value="formData[fieldName] ?? schema.properties[fieldName].minimum ?? 0"
+          :loading="loading"
+          :required-text="isRequired(fieldName) ? '*' : undefined"
+          @sliderUpdated="updateField(fieldName, $event)"
+        />
+
+        <!-- Array (Simple list) -->
+        <div v-else-if="getWidget(fieldName) === 'array'" class="space-y-2">
+          <label class="block text-sm font-medium text-gray-700">
+            {{ getFieldLabel(fieldName) }}
+            <span v-if="isRequired(fieldName)" class="text-red-500">*</span>
+          </label>
+          <p v-if="getFieldDescription(fieldName)" class="text-sm text-gray-500 mb-2">
+            {{ getFieldDescription(fieldName) }}
+          </p>
+          <div v-if="errors[fieldName]" class="text-sm text-red-600 mb-2">
+            {{ errors[fieldName] }}
+          </div>
+          <div class="space-y-2">
+            <div
+              v-for="(item, index) in (formData[fieldName] || [])"
+              :key="index"
+              class="flex gap-2"
+            >
+              <input
+                type="text"
+                :value="item"
+                :disabled="loading"
+                @input="updateArrayItem(fieldName, index, ($event.target as HTMLInputElement).value)"
+                class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+              <button
+                type="button"
+                @click="removeArrayItem(fieldName, index)"
+                :disabled="loading"
+                class="px-3 py-2 text-red-600 hover:text-red-800 border border-red-300 rounded-md"
+              >
+                Remove
+              </button>
+            </div>
+          </div>
+          <button
+            type="button"
+            @click="addArrayItem(fieldName)"
+            :disabled="loading"
+            class="mt-2 px-4 py-2 text-sm text-blue-600 hover:text-blue-800 border border-blue-300 rounded-md"
+          >
+            + Add Item
+          </button>
+        </div>
+
+        <!-- Nested Object (Simple rendering) -->
+        <div v-else-if="getWidget(fieldName) === 'object' || getWidget(fieldName) === 'card'" class="border border-gray-200 rounded-lg p-4 space-y-4">
+          <div>
+            <h3 class="text-lg font-semibold text-gray-900 mb-1">
+              {{ getFieldLabel(fieldName) }}
+            </h3>
+            <p v-if="getFieldDescription(fieldName)" class="text-sm text-gray-600 mb-4">
+              {{ getFieldDescription(fieldName) }}
+            </p>
+          </div>
+          <div class="space-y-4 pl-4 border-l-2 border-gray-200">
+            <!-- Recursively render nested fields -->
+            <div
+              v-for="(subSchema, subName) in fieldSchema.properties"
+              :key="subName"
+            >
+              <!-- Nested field rendering would go here -->
+              <p class="text-sm text-gray-500">
+                Nested field: {{ subName }} (type: {{ subSchema.type }})
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Form Actions -->
+    <div class="flex justify-end gap-3 pt-6 border-t">
+      <slot name="actions">
+        <uiButton
+          type="submit"
+          color="primary"
+          :loading="loading"
+        >
+          Submit
+        </uiButton>
+      </slot>
+    </div>
+  </form>
+</template>

package/src/forms/index.ts

@@ -0,0 +1,3 @@
+export { default as JsonSchemaForm } from './JsonSchemaForm.vue';
+export { default as DateRange } from './DateRange.vue';
+export type { DateRangeValue, DateRangeLiterals } from './DateRange.vue';

package/src/index.ts

@@ -0,0 +1,17 @@
+// Data components
+export * from './data';
+
+// Form components
+export * from './forms';
+
+// Navigation components
+export * from './navigation';
+
+// Overlay components
+export * from './overlays';
+
+// Domain components
+export * from './domain';
+
+// Composables
+export * from './composables';