@htlkg/components 0.0.1

package/src/overlays/Drawer.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  open?: boolean;
+  position?: 'left' | 'right' | 'top' | 'bottom';
+  title?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false,
+  position: 'right',
+  title: ''
+});
+
+const emit = defineEmits<{
+  'update:open': [value: boolean];
+  'close': [];
+}>();
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (value: boolean) => {
+    emit('update:open', value);
+    if (!value) emit('close');
+  }
+});
+
+function close() {
+  isOpen.value = false;
+}
+
+// Expose methods for parent components
+defineExpose({
+  open: () => { isOpen.value = true; },
+  close: () => { isOpen.value = false; },
+  toggle: () => { isOpen.value = !isOpen.value; }
+});
+</script>
+
+<template>
+  <!-- Overlay -->
+  <div
+    v-if="isOpen"
+    class="fixed inset-0 bg-black bg-opacity-50 z-50"
+    @click="close"
+  >
+    <!-- Drawer -->
+    <div
+      class="fixed bg-white shadow-xl z-51"
+      :class="{
+        'top-0 right-0 bottom-0 w-96 max-w-[90vw]': position === 'right',
+        'top-0 left-0 bottom-0 w-96 max-w-[90vw]': position === 'left',
+        'top-0 left-0 right-0 h-96 max-h-[90vh]': position === 'top',
+        'bottom-0 left-0 right-0 h-96 max-h-[90vh]': position === 'bottom'
+      }"
+      @click.stop
+    >
+      <!-- Header -->
+      <div class="flex justify-between items-center p-4 border-b border-gray-200">
+        <h3 class="text-lg font-medium">{{ title }}</h3>
+        <button
+          @click="close"
+          class="text-2xl text-gray-500 hover:text-gray-700 bg-transparent border-none cursor-pointer"
+        >
+          ×
+        </button>
+      </div>
+      
+      <!-- Content -->
+      <div class="p-4 overflow-auto">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

package/src/overlays/Modal.demo.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Modal } from '@htlkg/components/overlays';
+
+const isOpen = ref(false);
+const isConfirmOpen = ref(false);
+const formOpen = ref(false);
+const formData = ref({
+	name: '',
+	email: ''
+});
+
+const openModal = () => {
+	isOpen.value = true;
+};
+
+const closeModal = () => {
+	isOpen.value = false;
+};
+
+const openConfirm = () => {
+	isConfirmOpen.value = true;
+};
+
+const handleConfirm = () => {
+	alert('Confirmed!');
+	isConfirmOpen.value = false;
+};
+
+const openForm = () => {
+	formOpen.value = true;
+};
+
+const handleSubmit = () => {
+	alert(`Submitted: ${formData.value.name}, ${formData.value.email}`);
+	formOpen.value = false;
+	formData.value = { name: '', email: '' };
+};
+</script>
+
+<template>
+	<div class="space-y-4">
+		<div>
+			<button 
+				@click="openModal"
+				class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+			>
+				Open Basic Modal
+			</button>
+		</div>
+
+		<div>
+			<button 
+				@click="openConfirm"
+				class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
+			>
+				Open Confirmation Modal
+			</button>
+		</div>
+
+		<div>
+			<button 
+				@click="openForm"
+				class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition-colors"
+			>
+				Open Form Modal
+			</button>
+		</div>
+
+		<!-- Basic Modal -->
+		<Modal v-model:open="isOpen" title="Basic Modal">
+			<div class="p-4">
+				<p class="text-gray-700">This is a basic modal with some content.</p>
+				<p class="text-gray-700 mt-2">You can close it by clicking the X button or outside the modal.</p>
+			</div>
+			<template #footer>
+				<button 
+					@click="closeModal"
+					class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors"
+				>
+					Close
+				</button>
+			</template>
+		</Modal>
+
+		<!-- Confirmation Modal -->
+		<Modal v-model:open="isConfirmOpen" title="Confirm Action">
+			<div class="p-4">
+				<p class="text-gray-700">Are you sure you want to proceed with this action?</p>
+			</div>
+			<template #footer>
+				<div class="flex gap-2">
+					<button 
+						@click="isConfirmOpen = false"
+						class="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400 transition-colors"
+					>
+						Cancel
+					</button>
+					<button 
+						@click="handleConfirm"
+						class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
+					>
+						Confirm
+					</button>
+				</div>
+			</template>
+		</Modal>
+
+		<!-- Form Modal -->
+		<Modal v-model:open="formOpen" title="User Form">
+			<div class="p-4 space-y-4">
+				<div>
+					<label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
+					<input 
+						v-model="formData.name"
+						type="text"
+						class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-green-500 focus:border-transparent"
+						placeholder="Enter name"
+					/>
+				</div>
+				<div>
+					<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+					<input 
+						v-model="formData.email"
+						type="email"
+						class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-green-500 focus:border-transparent"
+						placeholder="Enter email"
+					/>
+				</div>
+			</div>
+			<template #footer>
+				<div class="flex gap-2">
+					<button 
+						@click="formOpen = false"
+						class="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400 transition-colors"
+					>
+						Cancel
+					</button>
+					<button 
+						@click="handleSubmit"
+						class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition-colors"
+					>
+						Submit
+					</button>
+				</div>
+			</template>
+		</Modal>
+	</div>
+</template>

package/src/overlays/Modal.md

@@ -0,0 +1,385 @@
+# Modal Component
+
+A stateful Vue wrapper around `@hotelinking/ui`'s `uiModal` component. Provides dialog overlays for confirmations, forms, and content display.
+
+## Features
+
+- **v-model support**: Two-way binding for open/close state
+- **Action buttons**: Configurable action buttons with custom events
+- **Three sizes**: Small, medium, and large modal sizes
+- **Slot support**: Custom header, content, and footer
+- **Exposed methods**: Programmatic open/close/toggle control
+- **Auto-close**: Closes on action, X button, or outside click
+
+## Import
+
+```typescript
+import { Modal } from '@htlkg/components';
+// or
+import { Modal } from '@htlkg/components/overlays';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | `false` | Control visibility (v-model) |
+| `title` | `string` | `''` | Modal title |
+| `content` | `string` | `''` | Modal content text |
+| `modalName` | `string` | `'modal'` | Unique modal identifier |
+| `actions` | `Array<{name: string, action: string, type?: string}>` | `[]` | Action buttons |
+| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Modal size |
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:open` | `boolean` | Emitted when visibility changes (v-model) |
+| `close` | - | Emitted when modal is closed |
+| `action` | `{modal: string, action: string}` | Emitted when action button is clicked |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | Modal content (replaces `content` prop) |
+| `header` | Custom header content |
+| `footer` | Custom footer content |
+
+## Exposed Methods
+
+| Method | Description |
+|--------|-------------|
+| `open()` | Open the modal |
+| `close()` | Close the modal |
+| `toggle()` | Toggle modal visibility |
+
+## Usage Examples
+
+### Basic Modal
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Modal } from '@htlkg/components';
+
+const isOpen = ref(false);
+</script>
+
+<template>
+  <button @click="isOpen = true">Open Modal</button>
+  
+  <Modal
+    v-model:open="isOpen"
+    title="Welcome"
+    content="This is a basic modal dialog."
+  />
+</template>
+```
+
+### Confirmation Modal
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Modal } from '@htlkg/components';
+
+const showConfirm = ref(false);
+
+const actions = [
+  { name: 'Confirm', action: 'confirm', type: 'primary' },
+  { name: 'Cancel', action: 'cancel', type: 'secondary' }
+];
+
+const handleAction = (data) => {
+  if (data.action === 'confirm') {
+    // Proceed with action
+    console.log('Confirmed');
+  }
+  // Modal auto-closes on any action
+};
+</script>
+
+<template>
+  <Modal
+    v-model:open="showConfirm"
+    title="Confirm Deletion"
+    content="Are you sure you want to delete this item? This action cannot be undone."
+    :actions="actions"
+    @action="handleAction"
+  />
+</template>
+```
+
+### Modal with Custom Content
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Modal } from '@htlkg/components';
+
+const isOpen = ref(false);
+</script>
+
+<template>
+  <Modal
+    v-model:open="isOpen"
+    title="User Details"
+  >
+    <div class="space-y-4">
+      <div>
+        <label class="font-medium">Name:</label>
+        <p>John Doe</p>
+      </div>
+      <div>
+        <label class="font-medium">Email:</label>
+        <p>john@example.com</p>
+      </div>
+      <div>
+        <label class="font-medium">Role:</label>
+        <p>Administrator</p>
+      </div>
+    </div>
+  </Modal>
+</template>
+```
+
+### Form Modal
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Modal } from '@htlkg/components';
+
+const isOpen = ref(false);
+const formData = ref({ name: '', email: '' });
+
+const actions = [
+  { name: 'Save', action: 'save', type: 'primary' },
+  { name: 'Cancel', action: 'cancel', type: 'secondary' }
+];
+
+const handleAction = (data) => {
+  if (data.action === 'save') {
+    // Save form data
+    console.log('Saving:', formData.value);
+  }
+};
+</script>
+
+<template>
+  <Modal
+    v-model:open="isOpen"
+    title="Create User"
+    :actions="actions"
+    @action="handleAction"
+  >
+    <form class="space-y-4">
+      <div>
+        <label class="block text-sm font-medium mb-1">Name</label>
+        <input
+          v-model="formData.name"
+          type="text"
+          class="w-full px-3 py-2 border rounded"
+        />
+      </div>
+      <div>
+        <label class="block text-sm font-medium mb-1">Email</label>
+        <input
+          v-model="formData.email"
+          type="email"
+          class="w-full px-3 py-2 border rounded"
+        />
+      </div>
+    </form>
+  </Modal>
+</template>
+```
+
+### Modal Sizes
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Modal } from '@htlkg/components';
+
+const smallModal = ref(false);
+const mediumModal = ref(false);
+const largeModal = ref(false);
+</script>
+
+<template>
+  <div class="space-x-2">
+    <button @click="smallModal = true">Small Modal</button>
+    <button @click="mediumModal = true">Medium Modal</button>
+    <button @click="largeModal = true">Large Modal</button>
+  </div>
+
+  <Modal
+    v-model:open="smallModal"
+    title="Small Modal"
+    content="This is a small modal."
+    size="small"
+  />
+
+  <Modal
+    v-model:open="mediumModal"
+    title="Medium Modal"
+    content="This is a medium modal (default)."
+    size="medium"
+  />
+
+  <Modal
+    v-model:open="largeModal"
+    title="Large Modal"
+    content="This is a large modal for more content."
+    size="large"
+  />
+</template>
+```
+
+### Custom Header and Footer
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Modal } from '@htlkg/components';
+
+const isOpen = ref(false);
+</script>
+
+<template>
+  <Modal v-model:open="isOpen">
+    <template #header>
+      <div class="flex items-center gap-2">
+        <span class="text-2xl">🎉</span>
+        <h2 class="text-xl font-bold">Congratulations!</h2>
+      </div>
+    </template>
+
+    <p>You've successfully completed the setup process.</p>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <button @click="isOpen = false" class="btn btn-secondary">
+          Close
+        </button>
+        <button @click="handleNext" class="btn btn-primary">
+          Next Step
+        </button>
+      </div>
+    </template>
+  </Modal>
+</template>
+```
+
+### Programmatic Control
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Modal } from '@htlkg/components';
+
+const modalRef = ref();
+
+const openModal = () => modalRef.value?.open();
+const closeModal = () => modalRef.value?.close();
+const toggleModal = () => modalRef.value?.toggle();
+</script>
+
+<template>
+  <div class="space-x-2">
+    <button @click="openModal">Open</button>
+    <button @click="closeModal">Close</button>
+    <button @click="toggleModal">Toggle</button>
+  </div>
+  
+  <Modal
+    ref="modalRef"
+    title="Controlled Modal"
+    content="This modal is controlled programmatically."
+  />
+</template>
+```
+
+### Nested Modals
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Modal } from '@htlkg/components';
+
+const firstModal = ref(false);
+const secondModal = ref(false);
+</script>
+
+<template>
+  <button @click="firstModal = true">Open First Modal</button>
+
+  <Modal
+    v-model:open="firstModal"
+    title="First Modal"
+    modalName="first-modal"
+  >
+    <p>This is the first modal.</p>
+    <button @click="secondModal = true" class="btn btn-primary mt-4">
+      Open Second Modal
+    </button>
+  </Modal>
+
+  <Modal
+    v-model:open="secondModal"
+    title="Second Modal"
+    modalName="second-modal"
+  >
+    <p>This is a nested modal.</p>
+  </Modal>
+</template>
+```
+
+## Best Practices
+
+### UX Guidelines
+
+- Use modals sparingly - they interrupt user flow
+- Provide clear action buttons (primary and secondary)
+- Always include a way to close (X button, Cancel, or outside click)
+- Use appropriate sizes based on content
+- Keep content concise and focused
+- Use confirmation modals for destructive actions
+
+### Accessibility
+
+- Modal traps focus when open
+- Escape key closes the modal
+- Focus returns to trigger element on close
+- Use semantic HTML in modal content
+- Provide clear button labels
+
+### Performance
+
+- Lazy load modal content when possible
+- Avoid nesting too many modals
+- Clean up event listeners on unmount
+- Use v-if instead of v-show for heavy content
+
+## Design System Integration
+
+This component wraps `@hotelinking/ui`'s `uiModal` component, providing:
+
+- Reactive state management with Vue 3 Composition API
+- v-model support for open/close state
+- Exposed methods for programmatic control
+- Event handling for actions
+- Slot support for custom content
+- Consistent API with other overlay components
+
+## Related Components
+
+- **Alert**: For inline alerts and notifications
+- **Notification**: For toast-style notifications
+- **Drawer**: For side panel overlays
+
+## Demo
+
+See the [Modal demo page](/components/modal) for interactive examples.