@htlkg/components 0.0.1

package/src/forms/JsonSchemaForm.md

@@ -0,0 +1,112 @@
+# JsonSchemaForm Component
+
+A dynamic form generator that creates forms from JSON Schema definitions with built-in validation using AJV.
+
+## Features
+
+- **JSON Schema validation**: Full AJV validation with format support
+- **Dynamic field generation**: Auto-generates form fields from schema
+- **Widget inference**: Smart widget selection based on field types
+- **Custom UI schema**: Override default widgets and add placeholders
+- **v-model support**: Two-way binding for form data
+- **Real-time validation**: Validates fields as user types
+- **Exposed methods**: Programmatic validation and reset
+
+## Import
+
+```typescript
+import { JsonSchemaForm } from '@htlkg/components';
+// or
+import { JsonSchemaForm } from '@htlkg/components/forms';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `schema` | `JsonSchema` | required | JSON Schema definition |
+| `modelValue` | `Record<string, any>` | `{}` | Form data (v-model) |
+| `uiSchema` | `Record<string, any>` | `{}` | UI customization schema |
+| `loading` | `boolean` | `false` | Show loading state |
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:modelValue` | `Record<string, any>` | Form data changed |
+| `validation-error` | `Array<{field: string, message: string}>` | Validation failed |
+| `submit` | `Record<string, any>` | Form submitted successfully |
+
+## Exposed Methods
+
+| Method | Description |
+|--------|-------------|
+| `validate()` | Validate form and return errors |
+| `reset()` | Reset form to empty state |
+
+## Usage Examples
+
+### Basic Form
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { JsonSchemaForm } from '@htlkg/components';
+
+const formData = ref({});
+
+const schema = {
+  type: 'object',
+  title: 'User Profile',
+  properties: {
+    name: { type: 'string', title: 'Name', minLength: 1 },
+    email: { type: 'string', title: 'Email', format: 'email', minLength: 1 },
+    age: { type: 'number', title: 'Age', minimum: 18, maximum: 120 }
+  },
+  required: ['name', 'email']
+};
+
+const handleSubmit = (data) => {
+  console.log('Form submitted:', data);
+};
+</script>
+
+<template>
+  <JsonSchemaForm
+    v-model="formData"
+    :schema="schema"
+    @submit="handleSubmit"
+  />
+</template>
+```
+
+### With Custom Widgets
+
+```vue
+<script setup>
+const schema = {
+  type: 'object',
+  properties: {
+    password: { type: 'string', title: 'Password' },
+    volume: { type: 'integer', title: 'Volume', minimum: 0, maximum: 100 }
+  }
+};
+
+const uiSchema = {
+  password: { 'ui:widget': 'password' },
+  volume: { 'ui:widget': 'slider' }
+};
+</script>
+
+<template>
+  <JsonSchemaForm
+    v-model="formData"
+    :schema="schema"
+    :uiSchema="uiSchema"
+  />
+</template>
+```
+
+## Demo
+
+See the [JsonSchemaForm demo page](/components/json-schema-form) for interactive examples.