@htlkg/components 0.0.1

package/src/navigation/Tabs.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+export interface Tab {
+  id: string;
+  label: string;
+  count?: number;
+}
+
+interface Props {
+  tabs: Tab[];
+  modelValue?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: ''
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [tabId: string];
+  'tab-change': [tabId: string];
+}>();
+
+// Internal state synced with v-model
+const currentTab = computed({
+  get: () => props.modelValue || (props.tabs.length > 0 ? props.tabs[0].id : ''),
+  set: (value: string) => {
+    emit('update:modelValue', value);
+    emit('tab-change', value);
+  }
+});
+
+
+
+// Expose methods for parent components
+defineExpose({
+  setActiveTab: (tabId: string) => { currentTab.value = tabId; },
+  getActiveTab: () => currentTab.value,
+  nextTab: () => {
+    const currentIndex = props.tabs.findIndex(t => t.id === currentTab.value);
+    if (currentIndex < props.tabs.length - 1) {
+      currentTab.value = props.tabs[currentIndex + 1].id;
+    }
+  },
+  previousTab: () => {
+    const currentIndex = props.tabs.findIndex(t => t.id === currentTab.value);
+    if (currentIndex > 0) {
+      currentTab.value = props.tabs[currentIndex - 1].id;
+    }
+  }
+});
+</script>
+
+<template>
+  <div class="tabs-wrapper">
+    <div class="border-b border-gray-200">
+      <nav class="-mb-px flex space-x-8" aria-label="Tabs">
+        <button
+          v-for="tab in tabs"
+          :key="tab.id"
+          @click="currentTab = tab.id"
+          :class="[
+            currentTab === tab.id
+              ? 'border-blue-500 text-blue-600'
+              : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
+            'whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium transition-colors'
+          ]"
+          :aria-current="currentTab === tab.id ? 'page' : undefined"
+        >
+          {{ tab.label }}
+          <span
+            v-if="tab.count !== undefined && tab.count > 0"
+            :class="[
+              currentTab === tab.id
+                ? 'bg-blue-100 text-blue-600'
+                : 'bg-gray-100 text-gray-900',
+              'ml-3 hidden rounded-full py-0.5 px-2.5 text-xs font-medium md:inline-block'
+            ]"
+          >
+            {{ tab.count }}
+          </span>
+        </button>
+      </nav>
+    </div>
+    
+    <div class="tabs-content mt-4">
+      <template v-for="tab in tabs" :key="tab.id">
+        <div v-if="currentTab === tab.id">
+          <slot :name="tab.id" :active-tab="currentTab" />
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tabs-wrapper {
+  width: 100%;
+}
+
+.tabs-content {
+  margin-top: 1rem;
+}
+</style>

package/src/navigation/index.ts

@@ -0,0 +1,5 @@
+export { default as Tabs } from './Tabs.vue';
+export type { Tab } from './Tabs.vue';
+export { default as Stepper } from './Stepper.vue';
+export type { Step } from './Stepper.vue';
+export { default as Breadcrumbs } from './Breadcrumbs.vue';

package/src/overlays/Alert.demo.vue

@@ -0,0 +1,377 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { Alert } from '@htlkg/components';
+
+// State for different alert types
+const showInfo = ref(true);
+const showSuccess = ref(true);
+const showWarning = ref(true);
+const showDanger = ref(true);
+const showWithActions = ref(true);
+const showLoading = ref(true);
+
+// Interactive demo state
+const actionLog = ref<string[]>([]);
+const showInteractive = ref(true);
+const interactiveType = ref<'info' | 'success' | 'warning' | 'danger'>('warning');
+const processingAction = ref(false);
+const actionResult = ref<string>('');
+
+// Actions for interactive alert
+const actions = [
+  { name: 'Confirm', event: 'confirm' },
+  { name: 'Cancel', event: 'cancel' }
+];
+
+// Interactive alert actions - changes based on state
+const interactiveActions = computed(() => {
+  if (actionResult.value) {
+    return [{ name: 'Close', event: 'close' }];
+  }
+  return [
+    { name: 'Approve', event: 'approve' },
+    { name: 'Reject', event: 'reject' },
+    { name: 'Ask Later', event: 'later' }
+  ];
+});
+
+// Handle alert events
+const handleAlertEvent = (event: string) => {
+  console.log('Alert event:', event);
+  if (event === 'confirm') {
+    alert('Confirmed!');
+    showWithActions.value = false;
+  } else if (event === 'cancel') {
+    showWithActions.value = false;
+  }
+};
+
+// Handle interactive alert events
+const handleInteractiveEvent = async (event: string) => {
+  console.log('🔥 handleInteractiveEvent called with:', event, typeof event);
+  
+  const timestamp = new Date().toLocaleTimeString();
+  actionLog.value.unshift(`[${timestamp}] 🖱️ Action clicked: ${event}`);
+  
+  // Handle close action
+  if (event === 'close') {
+    actionLog.value.unshift(`[${timestamp}] 🚪 Alert closed`);
+    resetInteractive();
+    return;
+  }
+  
+  processingAction.value = true;
+  actionResult.value = '';
+  
+  // Simulate processing
+  await new Promise(resolve => setTimeout(resolve, 1500));
+  
+  processingAction.value = false;
+  
+  if (event === 'approve') {
+    actionResult.value = '✅ Request approved successfully!';
+    interactiveType.value = 'success';
+    actionLog.value.unshift(`[${timestamp}] ✅ Request approved`);
+  } else if (event === 'reject') {
+    actionResult.value = '❌ Request rejected';
+    interactiveType.value = 'danger';
+    actionLog.value.unshift(`[${timestamp}] ❌ Request rejected`);
+  } else if (event === 'later') {
+    actionResult.value = '⏰ Reminder set for later';
+    interactiveType.value = 'info';
+    actionLog.value.unshift(`[${timestamp}] ⏰ Reminder set`);
+  }
+  
+  // Keep only last 15 log entries
+  if (actionLog.value.length > 15) {
+    actionLog.value = actionLog.value.slice(0, 15);
+  }
+};
+
+// Reset interactive demo
+const resetInteractive = () => {
+  showInteractive.value = true;
+  interactiveType.value = 'warning';
+  actionResult.value = '';
+  actionLog.value = [];
+  processingAction.value = false;
+};
+
+// Simulate loading
+setTimeout(() => {
+  showLoading.value = false;
+}, 2000);
+</script>
+
+<template>
+  <div class="space-y-8">
+    <!-- Info Alert -->
+    <section>
+      <h2 class="text-2xl font-semibold mb-4">Info Alert</h2>
+      <Alert
+        v-model:show="showInfo"
+        title="System Update Available"
+        type="info"
+      >
+        We've updated our Design System to version 1.0. Review the changes and update your components.
+      </Alert>
+      <button
+        v-if="!showInfo"
+        @click="showInfo = true"
+        class="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+      >
+        Show Info Alert
+      </button>
+    </section>
+
+    <!-- Success Alert -->
+    <section>
+      <h2 class="text-2xl font-semibold mb-4">Success Alert</h2>
+      <Alert
+        v-model:show="showSuccess"
+        title="Operation Completed"
+        type="success"
+      >
+        The reservation has been created successfully and confirmation has been sent to the guest.
+      </Alert>
+      <button
+        v-if="!showSuccess"
+        @click="showSuccess = true"
+        class="mt-2 px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
+      >
+        Show Success Alert
+      </button>
+    </section>
+
+    <!-- Warning Alert -->
+    <section>
+      <h2 class="text-2xl font-semibold mb-4">Warning Alert</h2>
+      <Alert
+        v-model:show="showWarning"
+        title="Attention Required"
+        type="warning"
+      >
+        The reservation will be permanently cancelled. This action cannot be undone.
+      </Alert>
+      <button
+        v-if="!showWarning"
+        @click="showWarning = true"
+        class="mt-2 px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600"
+      >
+        Show Warning Alert
+      </button>
+    </section>
+
+    <!-- Danger Alert -->
+    <section>
+      <h2 class="text-2xl font-semibold mb-4">Danger Alert</h2>
+      <Alert
+        v-model:show="showDanger"
+        title="Error Processing Request"
+        type="danger"
+      >
+        Could not connect to the server. Please try again later.
+      </Alert>
+      <button
+        v-if="!showDanger"
+        @click="showDanger = true"
+        class="mt-2 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+      >
+        Show Danger Alert
+      </button>
+    </section>
+
+    <!-- Alert with Actions -->
+    <section>
+      <h2 class="text-2xl font-semibold mb-4">Alert with Actions</h2>
+      <Alert
+        v-model:show="showWithActions"
+        title="Confirm Deletion"
+        type="warning"
+        :actions="actions"
+        @alertEvent="handleAlertEvent"
+      >
+        Are you sure you want to delete this item? This action cannot be undone.
+      </Alert>
+      <button
+        v-if="!showWithActions"
+        @click="showWithActions = true"
+        class="mt-2 px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600"
+      >
+        Show Alert with Actions
+      </button>
+    </section>
+
+    <!-- Interactive Actions Demo -->
+    <section class="bg-gradient-to-br from-purple-50 to-blue-50">
+      <h2 class="text-2xl font-semibold mb-4">🎮 Interactive Actions Demo</h2>
+      <p class="text-gray-600 mb-4">
+        Click the action buttons in the alert to see real-time feedback. The alert type, title, content, and available actions all change dynamically!
+      </p>
+      
+      <div class="mb-4 p-3 bg-blue-50 border border-blue-200 rounded text-sm">
+        <strong>💡 Try this:</strong> Click "Approve", "Reject", or "Ask Later" and watch the alert transform with different colors, messages, and actions!
+      </div>
+      
+      <div class="grid md:grid-cols-2 gap-6">
+        <!-- Alert Section -->
+        <div>
+          <div class="mb-3 flex gap-2 text-xs">
+            <span class="px-2 py-1 bg-gray-100 rounded">
+              Type: <strong>{{ interactiveType }}</strong>
+            </span>
+            <span class="px-2 py-1 bg-gray-100 rounded">
+              Actions: <strong>{{ interactiveActions.length }}</strong>
+            </span>
+            <span class="px-2 py-1 bg-gray-100 rounded">
+              Loading: <strong>{{ processingAction ? 'Yes' : 'No' }}</strong>
+            </span>
+          </div>
+          
+          <Alert
+            v-model:show="showInteractive"
+            :title="processingAction ? 'Processing...' : actionResult || 'Approval Required'"
+            :type="interactiveType"
+            :actions="interactiveActions"
+            :loading="processingAction"
+            @alertEvent="handleInteractiveEvent"
+            @alert-event="handleInteractiveEvent"
+          >
+            <div v-if="!actionResult">
+              <p class="mb-2">A new request requires your attention:</p>
+              <ul class="list-disc list-inside space-y-1 text-sm">
+                <li>User: John Doe</li>
+                <li>Action: Update pricing</li>
+                <li>Priority: High</li>
+              </ul>
+            </div>
+            <div v-else>
+              <p class="font-medium">{{ actionResult }}</p>
+              <p class="text-sm mt-2 opacity-75">Click "Close" to reset and try again!</p>
+            </div>
+          </Alert>
+          
+          <div class="mt-4 flex gap-2 flex-wrap">
+            <button
+              @click="resetInteractive"
+              class="px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600 transition-colors"
+            >
+              🔄 Reset Demo
+            </button>
+            <button
+              @click="showInteractive = !showInteractive"
+              class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 transition-colors"
+            >
+              {{ showInteractive ? '👁️ Hide' : '👁️ Show' }} Alert
+            </button>
+            <button
+              @click="handleInteractiveEvent('approve')"
+              class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors text-sm"
+            >
+              🧪 Test Approve
+            </button>
+          </div>
+        </div>
+        
+        <!-- Action Log Section -->
+        <div>
+          <h3 class="text-lg font-semibold mb-2">📋 Action Log</h3>
+          <div class="bg-gray-900 text-green-400 p-4 rounded font-mono text-sm h-64 overflow-y-auto">
+            <div v-if="actionLog.length === 0" class="text-gray-500">
+              No actions yet. Click a button to see the log...
+            </div>
+            <div v-for="(log, index) in actionLog" :key="index" class="mb-1">
+              {{ log }}
+            </div>
+          </div>
+          <div class="mt-2 text-sm text-gray-600">
+            Total actions: {{ actionLog.length }}
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Loading Alert -->
+    <section>
+      <h2 class="text-2xl font-semibold mb-4">Loading Alert</h2>
+      <Alert
+        v-model:show="showLoading"
+        title="Loading Information..."
+        type="info"
+        :loading="true"
+      >
+        Preparing system update
+      </Alert>
+      <p v-if="!showLoading" class="text-gray-600 mt-2">
+        Loading complete!
+      </p>
+    </section>
+
+    <!-- Rich Content Alert -->
+    <section>
+      <h2 class="text-2xl font-semibold mb-4">Alert with Rich Content</h2>
+      <Alert
+        title="New Features Available"
+        type="success"
+        :actions="[
+          { name: 'Explore', event: 'explore' },
+          { name: 'Later', event: 'later' }
+        ]"
+        @alertEvent="(e) => console.log('Rich content alert:', e)"
+      >
+        <p class="mb-2">
+          <strong>Update 1.0:</strong> We've added new features:
+        </p>
+        <ul class="list-disc list-inside space-y-1">
+          <li>Improved pricing calendar</li>
+          <li>New notification system</li>
+          <li>Performance optimization</li>
+        </ul>
+      </Alert>
+    </section>
+
+    <!-- Code Example -->
+    <section class="mt-12">
+      <h2 class="text-2xl font-semibold mb-4">Usage Example</h2>
+      <pre class="bg-gray-100 p-4 rounded overflow-x-auto"><code>&lt;script setup&gt;
+import { ref } from 'vue';
+import { Alert } from '@htlkg/components';
+
+const showAlert = ref(true);
+const actions = [
+  { name: 'Confirm', event: 'confirm' },
+  { name: 'Cancel', event: 'cancel' }
+];
+
+const handleAlertEvent = (event) => {
+  console.log('Alert event:', event);
+  if (event === 'confirm') {
+    // Handle confirmation
+    showAlert.value = false;
+  }
+};
+&lt;/script&gt;
+
+&lt;template&gt;
+  &lt;Alert
+    v-model:show="showAlert"
+    title="Confirm Action"
+    type="warning"
+    :actions="actions"
+    @alertEvent="handleAlertEvent"
+  &gt;
+    Are you sure you want to proceed?
+  &lt;/Alert&gt;
+&lt;/template&gt;</code></pre>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+section {
+  padding: 1rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  background: white;
+}
+</style>