@htlkg/components 0.0.1

package/src/navigation/Breadcrumbs.demo.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Breadcrumbs } from '@htlkg/components/navigation';
+import type { BreadcrumbItem } from '@htlkg/components/navigation';
+
+// Breadcrumb configurations
+const currentBreadcrumbs = ref<BreadcrumbItem[]>([
+	{ label: 'Home', routeName: '/' },
+	{ label: 'Products', routeName: '/products' },
+	{ label: 'Electronics', routeName: '/products/electronics' },
+	{ label: 'Laptops', routeName: '/products/electronics/laptops', current: true }
+]);
+
+const loading = ref(false);
+
+// Event tracking
+const eventLog = ref<string[]>([]);
+
+// Predefined breadcrumb examples
+const breadcrumbExamples = [
+	{
+		name: 'Product Detail',
+		items: [
+			{ label: 'Home', routeName: '/' },
+			{ label: 'Products', routeName: '/products' },
+			{ label: 'Electronics', routeName: '/products/electronics' },
+			{ label: 'Laptops', routeName: '/products/electronics/laptops', current: true }
+		]
+	},
+	{
+		name: 'User Profile',
+		items: [
+			{ label: 'Home', routeName: '/' },
+			{ label: 'Settings', routeName: '/settings' },
+			{ label: 'Profile', routeName: '/settings/profile', current: true }
+		]
+	},
+	{
+		name: 'Admin Dashboard',
+		items: [
+			{ label: 'Home', routeName: '/' },
+			{ label: 'Admin', routeName: '/admin' },
+			{ label: 'Users', routeName: '/admin/users' },
+			{ label: 'User Details', routeName: '/admin/users/123', current: true }
+		]
+	},
+	{
+		name: 'Simple Path',
+		items: [
+			{ label: 'Home', routeName: '/' },
+			{ label: 'About', routeName: '/about', current: true }
+		]
+	}
+];
+
+// Handle breadcrumb click
+const handleBreadcrumbClick = (routeName: string) => {
+	logEvent(`Breadcrumb clicked: ${routeName}`);
+	// In a real app, you would navigate to the route here
+};
+
+// Switch to different breadcrumb example
+const switchExample = (example: typeof breadcrumbExamples[0]) => {
+	currentBreadcrumbs.value = example.items;
+	logEvent(`Switched to: ${example.name}`);
+};
+
+// Toggle loading state
+const toggleLoading = () => {
+	loading.value = !loading.value;
+	logEvent(`Loading state: ${loading.value ? 'ON' : 'OFF'}`);
+};
+
+const logEvent = (message: string) => {
+	eventLog.value.unshift(`[${new Date().toLocaleTimeString()}] ${message}`);
+	if (eventLog.value.length > 5) {
+		eventLog.value = eventLog.value.slice(0, 5);
+	}
+};
+</script>
+
+<template>
+	<div>
+		<!-- Breadcrumbs Component -->
+		<div class="mb-6 p-4 bg-white rounded-lg border">
+			<Breadcrumbs
+				:items="currentBreadcrumbs"
+				:loading="loading"
+				@breadcrumb-click="handleBreadcrumbClick"
+			/>
+		</div>
+
+		<!-- Example Switcher -->
+		<div class="mb-6">
+			<h3 class="text-sm font-semibold text-gray-900 mb-3">Try Different Examples:</h3>
+			<div class="grid grid-cols-2 md:grid-cols-4 gap-2">
+				<button
+					v-for="example in breadcrumbExamples"
+					:key="example.name"
+					@click="switchExample(example)"
+					class="px-3 py-2 text-sm border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
+				>
+					{{ example.name }}
+				</button>
+			</div>
+		</div>
+
+		<!-- Controls -->
+		<div class="mb-6 p-4 bg-white rounded-lg border">
+			<h3 class="text-sm font-semibold text-gray-900 mb-3">Controls:</h3>
+			<button
+				@click="toggleLoading"
+				class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+			>
+				{{ loading ? 'Stop Loading' : 'Start Loading' }}
+			</button>
+		</div>
+
+		<!-- Event Log -->
+		<div class="p-4 bg-gray-50 rounded border mb-6">
+			<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. Click on breadcrumb items or try different examples.
+				</p>
+			</div>
+		</div>
+
+		<!-- Current State Display -->
+		<div class="p-4 bg-gray-50 rounded border">
+			<h4 class="text-sm font-semibold text-gray-900 mb-2">Current Breadcrumbs:</h4>
+			<pre class="text-xs text-gray-700 overflow-x-auto">{{ JSON.stringify(currentBreadcrumbs, null, 2) }}</pre>
+		</div>
+	</div>
+</template>

package/src/navigation/Breadcrumbs.md

@@ -0,0 +1,102 @@
+# Breadcrumbs Component
+
+A navigation component showing the current page's location in the site hierarchy. Wraps `@hotelinking/ui`'s `uiBreadcrumbs` component.
+
+## Features
+
+- **Hierarchical navigation**: Shows page path
+- **Click handling**: Navigate to any level
+- **Loading state**: Skeleton loading indicator
+- **Auto-current**: Automatically marks last item as current
+
+## Import
+
+```typescript
+import { Breadcrumbs } from '@htlkg/components';
+// or
+import { Breadcrumbs } from '@htlkg/components/navigation';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `BreadcrumbItem[]` | required | Breadcrumb items |
+| `loading` | `boolean` | `false` | Show loading state |
+
+### BreadcrumbItem Interface
+
+```typescript
+interface BreadcrumbItem {
+  label: string;
+  routeName: string;
+  current?: boolean;
+}
+```
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `breadcrumb-click` | `string` | Emitted when breadcrumb is clicked (routeName) |
+
+## Exposed Methods
+
+| Method | Description |
+|--------|-------------|
+| `getItems()` | Get current breadcrumb items |
+
+## Usage Examples
+
+### Basic Breadcrumbs
+
+```vue
+<script setup>
+import { Breadcrumbs } from '@htlkg/components';
+
+const items = [
+  { label: 'Home', routeName: '/' },
+  { label: 'Users', routeName: '/users' },
+  { label: 'John Doe', routeName: '/users/1' }
+];
+
+const handleClick = (routeName) => {
+  router.push(routeName);
+};
+</script>
+
+<template>
+  <Breadcrumbs
+    :items="items"
+    @breadcrumb-click="handleClick"
+  />
+</template>
+```
+
+### With Loading State
+
+```vue
+<script setup>
+import { ref, onMounted } from 'vue';
+import { Breadcrumbs } from '@htlkg/components';
+
+const loading = ref(true);
+const items = ref([]);
+
+onMounted(async () => {
+  items.value = await fetchBreadcrumbs();
+  loading.value = false;
+});
+</script>
+
+<template>
+  <Breadcrumbs
+    :items="items"
+    :loading="loading"
+  />
+</template>
+```
+
+## Demo
+
+See the [Breadcrumbs demo page](/components/breadcrumbs) for interactive examples.

package/src/navigation/Breadcrumbs.test.ts

@@ -0,0 +1,69 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Breadcrumbs from './Breadcrumbs.vue';
+
+describe('Breadcrumbs Component', () => {
+  const mockBreadcrumbs = [
+    { label: 'Home', routeName: '/' },
+    { label: 'Products', routeName: '/products' },
+    { label: 'Details', routeName: '/products/123' }
+  ];
+
+  it('renders with basic props', () => {
+    const wrapper = mount(Breadcrumbs, {
+      props: {
+        items: mockBreadcrumbs
+      }
+    });
+
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('renders all breadcrumb items', () => {
+    const wrapper = mount(Breadcrumbs, {
+      props: {
+        items: mockBreadcrumbs
+      }
+    });
+
+    // Breadcrumbs uses uiBreadcrumbs component which renders the items
+    // We can verify the component received the correct props
+    const component = wrapper.vm as any;
+    expect(component.pagesConfig.length).toBe(mockBreadcrumbs.length);
+  });
+
+  it('emits breadcrumb-click event when item is clicked', async () => {
+    const wrapper = mount(Breadcrumbs, {
+      props: {
+        items: mockBreadcrumbs
+      }
+    });
+
+    const component = wrapper.vm as any;
+    if (component.handleBreadcrumbClick) {
+      component.handleBreadcrumbClick(mockBreadcrumbs[0]);
+      expect(wrapper.emitted('breadcrumb-click')).toBeTruthy();
+      expect(wrapper.emitted('breadcrumb-click')?.[0]).toEqual([mockBreadcrumbs[0]]);
+    }
+  });
+
+  it('handles empty breadcrumbs array', () => {
+    const wrapper = mount(Breadcrumbs, {
+      props: {
+        items: []
+      }
+    });
+
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('marks last item as current', () => {
+    const wrapper = mount(Breadcrumbs, {
+      props: {
+        items: mockBreadcrumbs
+      }
+    });
+
+    expect(wrapper.exists()).toBe(true);
+  });
+});

package/src/navigation/Breadcrumbs.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { uiBreadcrumbs } from '@hotelinking/ui';
+
+export interface BreadcrumbItem {
+  label: string;
+  routeName: string;
+  current?: boolean;
+}
+
+interface Props {
+  items: BreadcrumbItem[];
+  loading?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false
+});
+
+const emit = defineEmits<{
+  'breadcrumb-click': [routeName: string];
+}>();
+
+// Convert items to uiBreadcrumbs format
+const pagesConfig = computed(() =>
+  props.items.map((item, index) => ({
+    name: item.label,
+    routeName: item.routeName,
+    current: item.current ?? (index === props.items.length - 1)
+  }))
+);
+
+// Handle breadcrumb click
+function handleBreadcrumbClick(routeName: string) {
+  emit('breadcrumb-click', routeName);
+}
+
+// Expose methods for parent components
+defineExpose({
+  getItems: () => props.items
+});
+</script>
+
+<template>
+  <div class="breadcrumbs-wrapper">
+    <uiBreadcrumbs
+      :pages="pagesConfig"
+      :loading="loading"
+      @bread-crumb-clicked="handleBreadcrumbClick"
+    />
+  </div>
+</template>
+
+<style scoped>
+.breadcrumbs-wrapper {
+  width: 100%;
+}
+</style>