@htlkg/components 0.0.1

package/src/forms/DateRange.vue

@@ -0,0 +1,110 @@
+<template>
+  <uiDateRange
+    :id="id"
+    :loading="loading"
+    :literals="literals"
+    :values="internalValues"
+    :color="color"
+    :error="error"
+    :disabled="disabled"
+    :label="label"
+    :placeholder="placeholder"
+    @uiDateRangeButtonClicked="handleSearch"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import { uiDateRange } from '@hotelinking/ui';
+
+export interface DateRangeValue {
+  from: Date | string;
+  to: Date | string;
+}
+
+export interface DateRangeLiterals {
+  from: string;
+  to: string;
+  search: string;
+}
+
+interface Props {
+  id?: string;
+  modelValue?: DateRangeValue;
+  literals?: DateRangeLiterals;
+  loading?: boolean;
+  color?: 'primary' | 'secondary' | 'light' | 'green' | 'yellow' | 'red' | 'black' | 'gray' | 'white';
+  error?: string;
+  disabled?: boolean;
+  label?: string;
+  placeholder?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  id: () => `date-range-${Math.random().toString(36).substr(2, 9)}`,
+  loading: false,
+  literals: () => ({
+    from: 'From',
+    to: 'To',
+    search: 'Search'
+  }),
+  modelValue: () => ({
+    from: '',
+    to: new Date().toISOString().slice(0, 16)
+  })
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: DateRangeValue | undefined];
+  'search': [value: DateRangeValue | undefined];
+  'change': [value: DateRangeValue | undefined];
+}>();
+
+// Internal state
+const internalValues = ref<DateRangeValue>({
+  from: props.modelValue?.from || '',
+  to: props.modelValue?.to || new Date().toISOString().slice(0, 16)
+});
+
+// Watch for external changes
+watch(() => props.modelValue, (newValue) => {
+  if (newValue) {
+    internalValues.value = {
+      from: newValue.from || '',
+      to: newValue.to || new Date().toISOString().slice(0, 16)
+    };
+  }
+}, { deep: true });
+
+// Handle search button click
+function handleSearch(dates: DateRangeValue | undefined) {
+  emit('update:modelValue', dates);
+  emit('search', dates);
+  emit('change', dates);
+}
+
+// Exposed methods
+function reset() {
+  const resetValue: DateRangeValue = {
+    from: '',
+    to: new Date().toISOString().slice(0, 16)
+  };
+  internalValues.value = resetValue;
+  emit('update:modelValue', resetValue);
+}
+
+function getValue() {
+  return internalValues.value;
+}
+
+function setValue(value: DateRangeValue) {
+  internalValues.value = value;
+  emit('update:modelValue', value);
+}
+
+defineExpose({
+  reset,
+  getValue,
+  setValue
+});
+</script>

package/src/forms/JsonSchemaForm.demo.vue

@@ -0,0 +1,549 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { JsonSchemaForm } from '@htlkg/components/forms';
+
+// Comprehensive JSON Schema showcasing different field types
+const schema = ref({
+	type: 'object',
+	title: 'Product Configuration',
+	description: 'Configure your product settings with various field types',
+	properties: {
+		// Basic string input
+		productName: {
+			type: 'string',
+			title: 'Product Name',
+			description: 'Enter a unique product name',
+			minLength: 3,
+			maxLength: 50
+		},
+		
+		// Email format
+		contactEmail: {
+			type: 'string',
+			title: 'Contact Email',
+			format: 'email',
+			description: 'Primary contact email address'
+		},
+		
+		// URL format
+		websiteUrl: {
+			type: 'string',
+			title: 'Website URL',
+			format: 'uri',
+			description: 'Product website or documentation URL'
+		},
+		
+		// Number with range
+		price: {
+			type: 'number',
+			title: 'Price (USD)',
+			description: 'Product price in US dollars',
+			minimum: 0,
+			maximum: 10000
+		},
+		
+		// Integer with range (good for slider)
+		quantity: {
+			type: 'integer',
+			title: 'Stock Quantity',
+			description: 'Available inventory',
+			minimum: 0,
+			maximum: 1000,
+			default: 100
+		},
+		
+		// Enum/Select dropdown
+		category: {
+			type: 'string',
+			title: 'Product Category',
+			enum: ['Electronics', 'Clothing', 'Food', 'Books', 'Toys', 'Other'],
+			description: 'Select the product category'
+		},
+		
+		// Boolean toggle
+		isActive: {
+			type: 'boolean',
+			title: 'Active Status',
+			description: 'Enable or disable this product',
+			default: true
+		},
+		
+		// Boolean checkbox
+		featured: {
+			type: 'boolean',
+			title: 'Featured Product',
+			description: 'Display on homepage',
+			default: false
+		},
+		
+		// Textarea (long string)
+		description: {
+			type: 'string',
+			title: 'Product Description',
+			description: 'Detailed product description',
+			minLength: 10,
+			maxLength: 500
+		},
+		
+		// Array of strings (tags)
+		tags: {
+			type: 'array',
+			title: 'Product Tags',
+			description: 'Add searchable tags',
+			items: {
+				type: 'string'
+			},
+			minItems: 1,
+			maxItems: 10
+		},
+		
+		// Array of objects (variants)
+		variants: {
+			type: 'array',
+			title: 'Product Variants',
+			description: 'Different versions of this product',
+			items: {
+				type: 'object',
+				properties: {
+					name: {
+						type: 'string',
+						title: 'Variant Name'
+					},
+					sku: {
+						type: 'string',
+						title: 'SKU'
+					},
+					price: {
+						type: 'number',
+						title: 'Price'
+					},
+					inStock: {
+						type: 'boolean',
+						title: 'In Stock'
+					}
+				},
+				required: ['name', 'sku']
+			}
+		},
+		
+		// Nested object
+		shipping: {
+			type: 'object',
+			title: 'Shipping Information',
+			properties: {
+				weight: {
+					type: 'number',
+					title: 'Weight (kg)',
+					minimum: 0
+				},
+				dimensions: {
+					type: 'object',
+					title: 'Dimensions (cm)',
+					properties: {
+						length: { type: 'number', title: 'Length' },
+						width: { type: 'number', title: 'Width' },
+						height: { type: 'number', title: 'Height' }
+					}
+				},
+				freeShipping: {
+					type: 'boolean',
+					title: 'Free Shipping',
+					default: false
+				}
+			}
+		},
+		
+		// Advanced settings (collapsible)
+		advanced: {
+			type: 'object',
+			title: 'Advanced Settings',
+			properties: {
+				enableAnalytics: {
+					type: 'boolean',
+					title: 'Enable Analytics',
+					default: true
+				},
+				customCss: {
+					type: 'string',
+					title: 'Custom CSS',
+					description: 'Additional styling'
+				},
+				apiKey: {
+					type: 'string',
+					title: 'API Key',
+					description: 'Integration API key'
+				}
+			}
+		}
+	},
+	required: ['productName', 'contactEmail', 'category', 'price']
+});
+
+// UI Schema for better rendering
+const uiSchema = ref({
+	'ui:order': [
+		'productName',
+		'contactEmail',
+		'websiteUrl',
+		'category',
+		'price',
+		'quantity',
+		'isActive',
+		'featured',
+		'description',
+		'tags',
+		'variants',
+		'shipping',
+		'advanced'
+	],
+	productName: {
+		'ui:placeholder': 'e.g., Premium Wireless Headphones'
+	},
+	contactEmail: {
+		'ui:placeholder': 'contact@example.com'
+	},
+	websiteUrl: {
+		'ui:placeholder': 'https://example.com/product'
+	},
+	description: {
+		'ui:widget': 'textarea',
+		'ui:placeholder': 'Enter a detailed product description...'
+	},
+	quantity: {
+		'ui:widget': 'slider',
+		'ui:help': 'Use slider to set inventory quantity'
+	},
+	tags: {
+		'ui:widget': 'array',
+		'ui:help': 'Press Enter to add each tag'
+	},
+	variants: {
+		'ui:widget': 'array'
+	},
+	shipping: {
+		'ui:widget': 'card',
+		'ui:collapsed': false
+	},
+	advanced: {
+		'ui:widget': 'collapsible',
+		'ui:collapsed': true,
+		apiKey: {
+			'ui:widget': 'password'
+		}
+	}
+});
+
+// Form data with sample values
+const formData = ref({
+	productName: 'Premium Wireless Headphones',
+	contactEmail: 'sales@example.com',
+	websiteUrl: 'https://example.com/headphones',
+	price: 299.99,
+	quantity: 150,
+	category: 'Electronics',
+	isActive: true,
+	featured: false,
+	description: 'High-quality wireless headphones with active noise cancellation, 30-hour battery life, and premium sound quality.',
+	tags: ['wireless', 'audio', 'premium'],
+	variants: [
+		{ name: 'Black', sku: 'WH-001-BLK', price: 299.99, inStock: true },
+		{ name: 'Silver', sku: 'WH-001-SLV', price: 299.99, inStock: true }
+	],
+	shipping: {
+		weight: 0.5,
+		dimensions: {
+			length: 20,
+			width: 18,
+			height: 10
+		},
+		freeShipping: true
+	},
+	advanced: {
+		enableAnalytics: true,
+		customCss: '',
+		apiKey: ''
+	}
+});
+
+// Interactive controls
+const loading = ref(false);
+const showValidation = ref(true);
+
+// Form state
+const submitResult = ref<{ success: boolean; message: string } | null>(null);
+const validationErrors = ref<Array<{ field: string; message: string }>>([]);
+
+// Predefined schema examples
+const schemaExamples = {
+	product: {
+		name: 'Product Configuration',
+		schema: schema.value,
+		uiSchema: uiSchema.value,
+		data: formData.value
+	},
+	simple: {
+		name: 'Simple Form',
+		schema: {
+			type: 'object',
+			title: 'User Profile',
+			description: 'Basic user information',
+			properties: {
+				name: { type: 'string', title: 'Full Name', minLength: 1 },
+				email: { type: 'string', title: 'Email', format: 'email', minLength: 1 },
+				age: { type: 'number', title: 'Age', minimum: 18, maximum: 120 },
+				subscribe: { type: 'boolean', title: 'Subscribe to Newsletter' }
+			},
+			required: ['name', 'email']
+		},
+		uiSchema: {},
+		data: { name: '', email: '', age: 25, subscribe: false }
+	},
+	advanced: {
+		name: 'Advanced Settings',
+		schema: {
+			type: 'object',
+			title: 'API Configuration',
+			description: 'Configure API integration settings',
+			properties: {
+				apiUrl: { type: 'string', title: 'API URL', format: 'uri', minLength: 1 },
+				apiKey: { type: 'string', title: 'API Key', minLength: 1 },
+				timeout: { type: 'integer', title: 'Timeout (seconds)', minimum: 5, maximum: 300 },
+				retries: { type: 'integer', title: 'Max Retries', minimum: 0, maximum: 10 },
+				enableLogging: { type: 'boolean', title: 'Enable Logging' },
+				logLevel: { 
+					type: 'string', 
+					title: 'Log Level',
+					enum: ['debug', 'info', 'warn', 'error']
+				}
+			},
+			required: ['apiUrl', 'apiKey']
+		},
+		uiSchema: {
+			apiKey: { 'ui:widget': 'password' },
+			timeout: { 'ui:widget': 'slider' },
+			retries: { 'ui:widget': 'slider' }
+		},
+		data: {
+			apiUrl: 'https://api.example.com',
+			apiKey: '',
+			timeout: 30,
+			retries: 3,
+			enableLogging: true,
+			logLevel: 'info'
+		}
+	}
+};
+
+const currentExample = ref<keyof typeof schemaExamples>('product');
+
+// Switch schema example
+const switchExample = (exampleKey: keyof typeof schemaExamples) => {
+	currentExample.value = exampleKey;
+	const example = schemaExamples[exampleKey];
+	schema.value = example.schema;
+	uiSchema.value = example.uiSchema;
+	formData.value = { ...example.data };
+	submitResult.value = null;
+	validationErrors.value = [];
+};
+
+// Handle form submission
+const handleSubmit = (values: any) => {
+	loading.value = true;
+	
+	// Simulate API call
+	setTimeout(() => {
+		loading.value = false;
+		submitResult.value = {
+			success: true,
+			message: 'Configuration saved successfully!'
+		};
+		validationErrors.value = [];
+		console.log('Form submitted:', values);
+	}, 1500);
+};
+
+// Handle validation errors
+const handleValidationError = (errors: Array<{ field: string; message: string }>) => {
+	validationErrors.value = errors;
+	submitResult.value = {
+		success: false,
+		message: 'Please fix the validation errors'
+	};
+};
+
+// Reset to empty form
+const resetForm = () => {
+	const example = schemaExamples[currentExample.value];
+	formData.value = { ...example.data };
+	submitResult.value = null;
+	validationErrors.value = [];
+};
+
+// Toggle loading state
+const toggleLoading = () => {
+	loading.value = !loading.value;
+};
+</script>
+
+<template>
+	<div>
+		<!-- Interactive Controls Panel -->
+		<div class="mb-6 p-4 bg-purple-50 border border-purple-200 rounded-lg">
+			<h4 class="text-sm font-semibold text-purple-900 mb-3">🎮 Interactive Controls</h4>
+			
+			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+				<!-- Schema Examples -->
+				<div>
+					<label class="block text-sm font-medium text-gray-700 mb-2">
+						Schema Example:
+					</label>
+					<div class="flex gap-2">
+						<button
+							v-for="(example, key) in schemaExamples"
+							:key="key"
+							@click="switchExample(key as keyof typeof schemaExamples)"
+							:class="[
+								'px-3 py-2 text-sm rounded-md transition-colors',
+								currentExample === key
+									? 'bg-purple-600 text-white'
+									: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
+							]"
+						>
+							{{ example.name }}
+						</button>
+					</div>
+				</div>
+
+				<!-- State Controls -->
+				<div>
+					<label class="block text-sm font-medium text-gray-700 mb-2">
+						Component State:
+					</label>
+					<div class="flex gap-2">
+						<button
+							@click="toggleLoading"
+							:class="[
+								'px-3 py-2 text-sm rounded-md transition-colors',
+								loading
+									? 'bg-blue-600 text-white'
+									: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
+							]"
+						>
+							{{ loading ? '⏳ Loading ON' : '⚡ Loading OFF' }}
+						</button>
+						<button
+							@click="resetForm"
+							class="px-3 py-2 text-sm bg-white text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
+						>
+							🔄 Reset Form
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Result Display -->
+		<div
+			v-if="submitResult"
+			class="mb-6 p-4 rounded border"
+			:class="
+				submitResult.success
+					? 'bg-green-50 border-green-200'
+					: 'bg-red-50 border-red-200'
+			"
+		>
+			<p
+				class="text-sm font-medium"
+				:class="submitResult.success ? 'text-green-800' : 'text-red-800'"
+			>
+				{{ submitResult.message }}
+			</p>
+			<ul v-if="validationErrors.length > 0" class="mt-2 text-sm text-red-700">
+				<li v-for="error in validationErrors" :key="error.field">
+					{{ error.field }}: {{ error.message }}
+				</li>
+			</ul>
+		</div>
+
+		<!-- Field Types Info -->
+		<div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+			<h4 class="text-sm font-semibold text-blue-900 mb-2">📋 Field Types Demonstrated:</h4>
+			<div class="grid grid-cols-2 md:grid-cols-3 gap-2 text-xs text-blue-800">
+				<div>✓ Text inputs</div>
+				<div>✓ Email validation</div>
+				<div>✓ URL validation</div>
+				<div>✓ Number inputs</div>
+				<div>✓ Range sliders</div>
+				<div>✓ Select dropdowns</div>
+				<div>✓ Boolean toggles</div>
+				<div>✓ Checkboxes</div>
+				<div>✓ Textarea</div>
+				<div>✓ Arrays (tags)</div>
+				<div>✓ Array of objects</div>
+				<div>✓ Nested objects</div>
+				<div>✓ Collapsible sections</div>
+				<div>✓ Password fields</div>
+				<div>✓ Required validation</div>
+			</div>
+		</div>
+
+		<!-- JSON Schema Form Component -->
+		<div class="bg-white p-6 rounded-lg border">
+			<JsonSchemaForm
+				v-model="formData"
+				:schema="schema"
+				:ui-schema="uiSchema"
+				:loading="loading"
+				@submit="handleSubmit"
+				@validation-error="handleValidationError"
+			>
+				<template #actions>
+					<div class="flex justify-end gap-3">
+						<button
+							type="button"
+							@click="resetForm"
+							:disabled="loading"
+							class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+						>
+							Reset
+						</button>
+						<button
+							type="submit"
+							:disabled="loading"
+							class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+						>
+							{{ loading ? 'Saving...' : 'Save Configuration' }}
+						</button>
+					</div>
+				</template>
+			</JsonSchemaForm>
+		</div>
+
+		<!-- Form Data Display -->
+		<div class="mt-6 p-4 bg-gray-50 rounded border">
+			<h4 class="text-sm font-semibold text-gray-900 mb-2">Current Form Data:</h4>
+			<pre class="text-xs text-gray-700 overflow-x-auto">{{ JSON.stringify(formData, null, 2) }}</pre>
+		</div>
+
+		<!-- Schema Display -->
+		<div class="mt-6 p-4 bg-gray-50 rounded border">
+			<details>
+				<summary class="text-sm font-semibold text-gray-900 mb-2 cursor-pointer">
+					View JSON Schema Definition
+				</summary>
+				<pre class="text-xs text-gray-700 overflow-x-auto mt-2">{{ JSON.stringify(schema, null, 2) }}</pre>
+			</details>
+		</div>
+
+		<!-- UI Schema Display -->
+		<div class="mt-6 p-4 bg-gray-50 rounded border">
+			<details>
+				<summary class="text-sm font-semibold text-gray-900 mb-2 cursor-pointer">
+					View UI Schema Configuration
+				</summary>
+				<pre class="text-xs text-gray-700 overflow-x-auto mt-2">{{ JSON.stringify(uiSchema, null, 2) }}</pre>
+			</details>
+		</div>
+	</div>
+</template>