@htlkg/components 0.0.1

package/src/navigation/Stepper.demo.vue

@@ -0,0 +1,337 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { Stepper } from '@htlkg/components/navigation';
+import { JsonSchemaForm } from '@htlkg/components/forms';
+
+// Step interface (matches Stepper component)
+interface Step {
+  id?: string | number;
+  label: string;
+  status?: 'complete' | 'current' | 'upcoming';
+  valid?: boolean;
+}
+
+// Current step
+const currentStep = ref(0);
+
+// Form data for each step
+const step1Data = ref({ username: '', email: '', password: '' });
+const step2Data = ref({ firstName: '', lastName: '', phone: '' });
+const step3Data = ref({ language: 'en', timezone: 'UTC', notifications: true });
+
+// Form schemas for each step
+const step1Schema = {
+	type: 'object',
+	title: 'Account Information',
+	properties: {
+		username: { type: 'string', title: 'Username', minLength: 3 },
+		email: { type: 'string', title: 'Email', format: 'email' },
+		password: { type: 'string', title: 'Password', minLength: 6 }
+	},
+	required: ['username', 'email', 'password']
+};
+
+const step2Schema = {
+	type: 'object',
+	title: 'Personal Details',
+	properties: {
+		firstName: { type: 'string', title: 'First Name', minLength: 2 },
+		lastName: { type: 'string', title: 'Last Name', minLength: 2 },
+		phone: { type: 'string', title: 'Phone Number' }
+	},
+	required: ['firstName', 'lastName']
+};
+
+const step3Schema = {
+	type: 'object',
+	title: 'Preferences',
+	properties: {
+		language: { 
+			type: 'string', 
+			title: 'Language',
+			enum: ['en', 'es', 'fr', 'de']
+		},
+		timezone: { 
+			type: 'string', 
+			title: 'Timezone',
+			enum: ['UTC', 'EST', 'PST', 'CET']
+		},
+		notifications: { type: 'boolean', title: 'Enable Notifications' }
+	},
+	required: ['language', 'timezone']
+};
+
+// Form refs to access validation
+const step1FormRef = ref<any>(null);
+const step2FormRef = ref<any>(null);
+const step3FormRef = ref<any>(null);
+
+// Validate each step
+const isStep1Valid = computed(() => {
+	return step1Data.value.username.length >= 3 &&
+		step1Data.value.email.includes('@') &&
+		step1Data.value.password.length >= 6;
+});
+
+const isStep2Valid = computed(() => {
+	return step2Data.value.firstName.length >= 2 &&
+		step2Data.value.lastName.length >= 2;
+});
+
+const isStep3Valid = computed(() => {
+	return !!(step3Data.value.language && step3Data.value.timezone);
+});
+
+// Steps configuration with validation
+const steps = computed<Step[]>(() => [
+	{ id: '01', label: 'Account', valid: isStep1Valid.value },
+	{ id: '02', label: 'Personal', valid: isStep2Valid.value },
+	{ id: '03', label: 'Preferences', valid: isStep3Valid.value },
+	{ id: '04', label: 'Review', valid: true }
+]);
+
+// Event log
+const eventLog = ref<string[]>([]);
+
+const logEvent = (message: string) => {
+	eventLog.value.unshift(`[${new Date().toLocaleTimeString()}] ${message}`);
+	if (eventLog.value.length > 5) {
+		eventLog.value = eventLog.value.slice(0, 5);
+	}
+};
+
+// Navigation handlers
+const goToNext = () => {
+	if (currentStep.value < steps.value.length - 1) {
+		currentStep.value++;
+		logEvent(`Advanced to step ${currentStep.value + 1}`);
+	}
+};
+
+const goToPrevious = () => {
+	if (currentStep.value > 0) {
+		currentStep.value--;
+		logEvent(`Went back to step ${currentStep.value + 1}`);
+	}
+};
+
+const handleValidationFailed = (step: Step) => {
+	logEvent(`❌ Cannot proceed: "${step.label}" step has invalid data`);
+};
+
+const handleStepClick = (step: Step) => {
+	logEvent(`Clicked on step: ${step.label}`);
+};
+
+// Final submission
+const handleFinalSubmit = () => {
+	logEvent('✅ Form submitted successfully!');
+	alert('Registration complete! Check the console for submitted data.');
+	console.log('Submitted data:', {
+		account: step1Data.value,
+		personal: step2Data.value,
+		preferences: step3Data.value
+	});
+};
+</script>
+
+<template>
+	<div>
+		<!-- Info Banner -->
+		<div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+			<p class="text-sm text-blue-800">
+				<strong>🔒 Validation Enabled:</strong> Fill out all required fields in each step to proceed. 
+				You can only advance if the current step's form is valid.
+			</p>
+		</div>
+
+		<!-- Stepper Component -->
+		<div class="mb-8">
+			<Stepper
+				v-model:current-step="currentStep"
+				:steps="steps"
+				:validate-on-next="true"
+				@step-click="handleStepClick"
+				@validation-failed="handleValidationFailed"
+			/>
+		</div>
+
+		<!-- Step Content -->
+		<div class="bg-white p-6 rounded-lg border mb-6">
+			<!-- Step 1: Account Information -->
+			<div v-if="currentStep === 0">
+				<JsonSchemaForm
+					ref="step1FormRef"
+					v-model="step1Data"
+					:schema="step1Schema"
+					:loading="false"
+				>
+					<template #actions>
+						<div class="flex justify-end">
+							<button
+								type="button"
+								@click="goToNext"
+								:disabled="!isStep1Valid"
+								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"
+							>
+								Next →
+							</button>
+						</div>
+					</template>
+				</JsonSchemaForm>
+			</div>
+
+			<!-- Step 2: Personal Details -->
+			<div v-else-if="currentStep === 1">
+				<JsonSchemaForm
+					ref="step2FormRef"
+					v-model="step2Data"
+					:schema="step2Schema"
+					:loading="false"
+				>
+					<template #actions>
+						<div class="flex justify-between">
+							<button
+								type="button"
+								@click="goToPrevious"
+								class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
+							>
+								← Previous
+							</button>
+							<button
+								type="button"
+								@click="goToNext"
+								:disabled="!isStep2Valid"
+								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"
+							>
+								Next →
+							</button>
+						</div>
+					</template>
+				</JsonSchemaForm>
+			</div>
+
+			<!-- Step 3: Preferences -->
+			<div v-else-if="currentStep === 2">
+				<JsonSchemaForm
+					ref="step3FormRef"
+					v-model="step3Data"
+					:schema="step3Schema"
+					:loading="false"
+				>
+					<template #actions>
+						<div class="flex justify-between">
+							<button
+								type="button"
+								@click="goToPrevious"
+								class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
+							>
+								← Previous
+							</button>
+							<button
+								type="button"
+								@click="goToNext"
+								:disabled="!isStep3Valid"
+								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"
+							>
+								Next →
+							</button>
+						</div>
+					</template>
+				</JsonSchemaForm>
+			</div>
+
+			<!-- Step 4: Review & Submit -->
+			<div v-else-if="currentStep === 3">
+				<h3 class="text-xl font-bold text-gray-900 mb-4">Review Your Information</h3>
+				
+				<div class="space-y-6">
+					<!-- Account Info Review -->
+					<div class="p-4 bg-gray-50 rounded border">
+						<h4 class="font-semibold text-gray-900 mb-3">Account Information</h4>
+						<div class="space-y-2 text-sm">
+							<div><span class="text-gray-600">Username:</span> <span class="font-medium">{{ step1Data.username }}</span></div>
+							<div><span class="text-gray-600">Email:</span> <span class="font-medium">{{ step1Data.email }}</span></div>
+							<div><span class="text-gray-600">Password:</span> <span class="font-medium">••••••••</span></div>
+						</div>
+					</div>
+
+					<!-- Personal Info Review -->
+					<div class="p-4 bg-gray-50 rounded border">
+						<h4 class="font-semibold text-gray-900 mb-3">Personal Details</h4>
+						<div class="space-y-2 text-sm">
+							<div><span class="text-gray-600">First Name:</span> <span class="font-medium">{{ step2Data.firstName }}</span></div>
+							<div><span class="text-gray-600">Last Name:</span> <span class="font-medium">{{ step2Data.lastName }}</span></div>
+							<div><span class="text-gray-600">Phone:</span> <span class="font-medium">{{ step2Data.phone || 'Not provided' }}</span></div>
+						</div>
+					</div>
+
+					<!-- Preferences Review -->
+					<div class="p-4 bg-gray-50 rounded border">
+						<h4 class="font-semibold text-gray-900 mb-3">Preferences</h4>
+						<div class="space-y-2 text-sm">
+							<div><span class="text-gray-600">Language:</span> <span class="font-medium">{{ step3Data.language }}</span></div>
+							<div><span class="text-gray-600">Timezone:</span> <span class="font-medium">{{ step3Data.timezone }}</span></div>
+							<div><span class="text-gray-600">Notifications:</span> <span class="font-medium">{{ step3Data.notifications ? 'Enabled' : 'Disabled' }}</span></div>
+						</div>
+					</div>
+				</div>
+
+				<div class="flex justify-between mt-6">
+					<button
+						type="button"
+						@click="goToPrevious"
+						class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
+					>
+						← Previous
+					</button>
+					<button
+						type="button"
+						@click="handleFinalSubmit"
+						class="px-6 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
+					>
+						✓ Submit Registration
+					</button>
+				</div>
+			</div>
+		</div>
+
+		<!-- Validation Status -->
+		<div class="mb-6 p-4 bg-gray-50 rounded border">
+			<h4 class="text-sm font-semibold text-gray-900 mb-3">Step Validation Status:</h4>
+			<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+				<div
+					v-for="(step, index) in steps"
+					:key="index"
+					:class="[
+						'p-3 rounded border text-center',
+						step.valid
+							? 'bg-green-50 border-green-300'
+							: 'bg-red-50 border-red-300'
+					]"
+				>
+					<div class="text-2xl mb-1">{{ step.valid ? '✅' : '❌' }}</div>
+					<div class="text-xs font-medium text-gray-700">{{ step.label }}</div>
+					<div class="text-xs text-gray-500">{{ step.valid ? 'Valid' : 'Invalid' }}</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Event Log -->
+		<div class="p-4 bg-gray-50 rounded border">
+			<h4 class="text-sm font-semibold text-gray-900 mb-2">Event Log:</h4>
+			<div class="space-y-1">
+				<p
+					v-for="(event, index) in eventLog"
+					:key="index"
+					class="text-xs text-gray-700"
+				>
+					{{ event }}
+				</p>
+				<p v-if="eventLog.length === 0" class="text-xs text-gray-500 italic">
+					No events yet. Try navigating between steps or filling out forms.
+				</p>
+			</div>
+		</div>
+	</div>
+</template>

package/src/navigation/Stepper.md

@@ -0,0 +1,174 @@
+# Stepper Component
+
+A multi-step progress indicator for wizards and multi-page forms. Wraps `@hotelinking/ui`'s `uiStepsV4` component with validation support.
+
+## Features
+
+- **Step validation**: Prevent navigation to invalid steps
+- **v-model support**: Two-way binding for current step
+- **Status tracking**: Complete, current, upcoming states
+- **Skip control**: Allow or prevent skipping steps
+- **Programmatic navigation**: Methods for step control
+- **Event system**: Track step changes and validation
+
+## Import
+
+```typescript
+import { Stepper } from '@htlkg/components';
+// or
+import { Stepper } from '@htlkg/components/navigation';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `steps` | `Step[]` | required | Step definitions |
+| `currentStep` | `number` | `0` | Current step index (v-model) |
+| `validateOnNext` | `boolean` | `false` | Validate before moving forward |
+| `allowSkip` | `boolean` | `false` | Allow skipping to any step |
+
+### Step Interface
+
+```typescript
+interface Step {
+  id?: string | number;
+  label: string;
+  status?: 'complete' | 'current' | 'upcoming';
+  valid?: boolean;
+}
+```
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:currentStep` | `number` | Current step changed (v-model) |
+| `step-click` | `Step, number` | Step clicked |
+| `step-completed` | `Step` | Step marked as complete |
+| `step-current` | `Step` | Step marked as current |
+| `step-upcoming` | `Step` | Step marked as upcoming |
+| `validation-failed` | `Step, number` | Validation failed for step |
+
+## Exposed Methods
+
+| Method | Description |
+|--------|-------------|
+| `getCurrentStep()` | Get current step index |
+| `getSteps()` | Get all steps |
+| `goToStep(index)` | Navigate to specific step |
+| `goToNext()` | Navigate to next step |
+| `goToPrevious()` | Navigate to previous step |
+| `validateCurrentStep()` | Check if current step is valid |
+| `canNavigateToStep(index)` | Check if navigation is allowed |
+
+## Usage Examples
+
+### Basic Stepper
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Stepper } from '@htlkg/components';
+
+const currentStep = ref(0);
+
+const steps = [
+  { label: 'Account Info' },
+  { label: 'Personal Details' },
+  { label: 'Confirmation' }
+];
+</script>
+
+<template>
+  <Stepper
+    v-model:currentStep="currentStep"
+    :steps="steps"
+  />
+</template>
+```
+
+### With Validation
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Stepper } from '@htlkg/components';
+
+const currentStep = ref(0);
+const formData = ref({
+  email: '',
+  name: '',
+  terms: false
+});
+
+const steps = ref([
+  { label: 'Email', valid: false },
+  { label: 'Profile', valid: false },
+  { label: 'Review', valid: true }
+]);
+
+// Validate step 1
+watch(() => formData.value.email, (email) => {
+  steps.value[0].valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+});
+
+// Validate step 2
+watch(() => formData.value.name, (name) => {
+  steps.value[1].valid = name.length >= 3;
+});
+
+const handleValidationFailed = (step, index) => {
+  alert(`Please complete ${step.label} before proceeding`);
+};
+</script>
+
+<template>
+  <Stepper
+    v-model:currentStep="currentStep"
+    :steps="steps"
+    :validateOnNext="true"
+    @validation-failed="handleValidationFailed"
+  />
+</template>
+```
+
+### Programmatic Navigation
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Stepper } from '@htlkg/components';
+
+const stepperRef = ref();
+const currentStep = ref(0);
+
+const steps = [
+  { label: 'Step 1' },
+  { label: 'Step 2' },
+  { label: 'Step 3' }
+];
+
+const next = () => stepperRef.value?.goToNext();
+const previous = () => stepperRef.value?.goToPrevious();
+const goTo = (index) => stepperRef.value?.goToStep(index);
+</script>
+
+<template>
+  <Stepper
+    ref="stepperRef"
+    v-model:currentStep="currentStep"
+    :steps="steps"
+  />
+  
+  <div class="mt-4 space-x-2">
+    <button @click="previous">Previous</button>
+    <button @click="next">Next</button>
+    <button @click="goTo(2)">Skip to End</button>
+  </div>
+</template>
+```
+
+## Demo
+
+See the [Stepper demo page](/components/stepper) for interactive examples.

package/src/navigation/Stepper.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { uiStepsV4 } from '@hotelinking/ui';
+
+export interface Step {
+  id?: string | number;
+  label: string;
+  status?: 'complete' | 'current' | 'upcoming';
+  valid?: boolean; // Validation state for the step
+}
+
+interface Props {
+  steps: Step[];
+  currentStep?: number;
+  validateOnNext?: boolean; // Enable validation when moving forward
+  allowSkip?: boolean; // Allow skipping to any step regardless of validation
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  currentStep: 0,
+  validateOnNext: false,
+  allowSkip: false
+});
+
+const emit = defineEmits<{
+  'step-click': [step: Step, index: number];
+  'step-completed': [step: Step];
+  'step-current': [step: Step];
+  'step-upcoming': [step: Step];
+  'validation-failed': [step: Step, index: number];
+  'update:currentStep': [index: number]; // v-model support
+}>();
+
+// Transform steps to uiStepsV4 format
+const uiSteps = computed(() =>
+  props.steps.map((step, index) => ({
+    id: step.id || String(index + 1).padStart(2, '0'),
+    name: step.label,
+    status: step.status || (
+      index < props.currentStep ? 'complete' :
+      index === props.currentStep ? 'current' :
+      'upcoming'
+    )
+  }))
+);
+
+// Check if navigation to a step is allowed
+function canNavigateToStep(targetIndex: number): boolean {
+  if (props.allowSkip) return true;
+  if (!props.validateOnNext) return true;
+  if (targetIndex < props.currentStep) return true;
+
+  const currentStepData = props.steps[props.currentStep];
+  if (targetIndex > props.currentStep && currentStepData.valid === false) {
+    return false;
+  }
+
+  for (let i = props.currentStep; i < targetIndex; i++) {
+    if (props.steps[i].valid === false) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+// Handle uiStepsV4 events
+function handleStepClick(step: any, index: number) {
+  const originalStep = props.steps[index];
+  
+  if (!canNavigateToStep(index)) {
+    const currentStepData = props.steps[props.currentStep];
+    emit('validation-failed', currentStepData, props.currentStep);
+    return;
+  }
+
+  emit('step-click', originalStep, index);
+  emit('update:currentStep', index);
+}
+
+function handleStepCompleted(step: any) {
+  const index = uiSteps.value.findIndex(s => s.id === step.id);
+  if (index !== -1) {
+    emit('step-completed', props.steps[index]);
+  }
+}
+
+function handleStepCurrent(step: any) {
+  const index = uiSteps.value.findIndex(s => s.id === step.id);
+  if (index !== -1) {
+    emit('step-current', props.steps[index]);
+  }
+}
+
+function handleStepUpcoming(step: any) {
+  const index = uiSteps.value.findIndex(s => s.id === step.id);
+  if (index !== -1) {
+    emit('step-upcoming', props.steps[index]);
+  }
+}
+
+// Public methods for programmatic navigation
+function goToStep(index: number): boolean {
+  if (index < 0 || index >= props.steps.length) return false;
+  if (!canNavigateToStep(index)) {
+    const currentStepData = props.steps[props.currentStep];
+    emit('validation-failed', currentStepData, props.currentStep);
+    return false;
+  }
+  emit('update:currentStep', index);
+  return true;
+}
+
+function goToNext(): boolean {
+  return goToStep(props.currentStep + 1);
+}
+
+function goToPrevious(): boolean {
+  return goToStep(props.currentStep - 1);
+}
+
+function validateCurrentStep(): boolean {
+  const currentStepData = props.steps[props.currentStep];
+  return currentStepData.valid !== false;
+}
+
+defineExpose({
+  getCurrentStep: () => props.currentStep,
+  getSteps: () => props.steps,
+  goToStep,
+  goToNext,
+  goToPrevious,
+  validateCurrentStep,
+  canNavigateToStep
+});
+</script>
+
+<template>
+  <uiStepsV4
+    :steps="uiSteps"
+    @stepClick="handleStepClick"
+    @stepCompleted="handleStepCompleted"
+    @stepCurrent="handleStepCurrent"
+    @stepUpcoming="handleStepUpcoming"
+  />
+</template>