@htlkg/components 0.0.1 → 0.0.2

package/src/navigation/Tabs.test.ts

@@ -24,38 +24,37 @@ describe('Tabs Component', () => {
     const wrapper = mount(Tabs, {
       props: {
         tabs: mockTabs,
-        activeTab: 'tab1',
-        'onUpdate:activeTab': (value: string) => wrapper.setProps({ activeTab: value })
+        modelValue: 'tab1',
+        'onUpdate:modelValue': (value: string) => wrapper.setProps({ modelValue: value })
       }
     });
 
-    expect(wrapper.props('activeTab')).toBe('tab1');
+    expect(wrapper.props('modelValue')).toBe('tab1');
 
-    // Change active tab
-    const component = wrapper.vm as any;
-    component.handleTabClick('tab2');
+    // Click on tab2
+    const buttons = wrapper.findAll('button');
+    await buttons[1].trigger('click');
 
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted('update:activeTab')).toBeTruthy();
-    expect(wrapper.emitted('update:activeTab')?.[0]).toEqual(['tab2']);
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['tab2']);
   });
 
   it('emits tab-change event when tab is clicked', async () => {
     const wrapper = mount(Tabs, {
       props: {
         tabs: mockTabs,
-        activeTab: 'tab1'
+        modelValue: 'tab1'
       }
     });
 
-    const component = wrapper.vm as any;
-    component.handleTabClick('tab2');
+    const buttons = wrapper.findAll('button');
+    await buttons[1].trigger('click');
 
     expect(wrapper.emitted('tab-change')).toBeTruthy();
     expect(wrapper.emitted('tab-change')?.[0]).toEqual(['tab2']);
   });
 
-  it('defaults to first tab when no activeTab is provided', () => {
+  it('defaults to first tab when no modelValue is provided', () => {
     const wrapper = mount(Tabs, {
       props: {
         tabs: mockTabs
@@ -63,14 +62,14 @@ describe('Tabs Component', () => {
     });
 
     const component = wrapper.vm as any;
-    expect(component.currentTab).toBe('tab1');
+    expect(component.getActiveTab()).toBe('tab1');
   });
 
-  it('exposes setActiveTab method', () => {
+  it('exposes setActiveTab method', async () => {
     const wrapper = mount(Tabs, {
       props: {
         tabs: mockTabs,
-        activeTab: 'tab1'
+        modelValue: 'tab1'
       }
     });
 
@@ -79,14 +78,15 @@ describe('Tabs Component', () => {
     expect(typeof component.setActiveTab).toBe('function');
 
     component.setActiveTab('tab3');
-    expect(wrapper.emitted('update:activeTab')).toBeTruthy();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
   });
 
   it('exposes getActiveTab method', () => {
     const wrapper = mount(Tabs, {
       props: {
         tabs: mockTabs,
-        activeTab: 'tab2'
+        modelValue: 'tab2'
       }
     });
 
@@ -100,7 +100,7 @@ describe('Tabs Component', () => {
     const wrapper = mount(Tabs, {
       props: {
         tabs: mockTabs,
-        activeTab: 'tab1'
+        modelValue: 'tab1'
       }
     });
 
@@ -108,15 +108,15 @@ describe('Tabs Component', () => {
     component.nextTab();
 
     await wrapper.vm.$nextTick();
-    expect(wrapper.emitted('update:activeTab')).toBeTruthy();
-    expect(wrapper.emitted('update:activeTab')?.[0]).toEqual(['tab2']);
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['tab2']);
   });
 
   it('exposes previousTab method', async () => {
     const wrapper = mount(Tabs, {
       props: {
         tabs: mockTabs,
-        activeTab: 'tab2'
+        modelValue: 'tab2'
       }
     });
 
@@ -124,15 +124,15 @@ describe('Tabs Component', () => {
     component.previousTab();
 
     await wrapper.vm.$nextTick();
-    expect(wrapper.emitted('update:activeTab')).toBeTruthy();
-    expect(wrapper.emitted('update:activeTab')?.[0]).toEqual(['tab1']);
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['tab1']);
   });
 
   it('does not go beyond last tab with nextTab', async () => {
     const wrapper = mount(Tabs, {
       props: {
         tabs: mockTabs,
-        activeTab: 'tab3'
+        modelValue: 'tab3'
       }
     });
 
@@ -142,13 +142,14 @@ describe('Tabs Component', () => {
     await wrapper.vm.$nextTick();
     // Should not emit since we're already at the last tab
     expect(component.getActiveTab()).toBe('tab3');
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy();
   });
 
   it('does not go before first tab with previousTab', async () => {
     const wrapper = mount(Tabs, {
       props: {
         tabs: mockTabs,
-        activeTab: 'tab1'
+        modelValue: 'tab1'
       }
     });
 
@@ -158,13 +159,14 @@ describe('Tabs Component', () => {
     await wrapper.vm.$nextTick();
     // Should not emit since we're already at the first tab
     expect(component.getActiveTab()).toBe('tab1');
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy();
   });
 
   it('renders tab content slot', () => {
     const wrapper = mount(Tabs, {
       props: {
         tabs: mockTabs,
-        activeTab: 'tab1'
+        modelValue: 'tab1'
       },
       slots: {
         tab1: '<div class="tab1-content">Tab 1 Content</div>'
@@ -172,5 +174,31 @@ describe('Tabs Component', () => {
     });
 
     expect(wrapper.find('.tabs-content').exists()).toBe(true);
+    expect(wrapper.html()).toContain('Tab 1 Content');
+  });
+
+  it('renders tab labels', () => {
+    const wrapper = mount(Tabs, {
+      props: {
+        tabs: mockTabs
+      }
+    });
+
+    expect(wrapper.text()).toContain('Tab 1');
+    expect(wrapper.text()).toContain('Tab 2');
+    expect(wrapper.text()).toContain('Tab 3');
+  });
+
+  it('shows count badges when provided', () => {
+    const wrapper = mount(Tabs, {
+      props: {
+        tabs: mockTabs,
+        modelValue: 'tab1'
+      }
+    });
+
+    // Tab 1 has count 5, Tab 2 has count 10
+    expect(wrapper.text()).toContain('5');
+    expect(wrapper.text()).toContain('10');
   });
 });

package/src/navigation/index.ts

@@ -3,3 +3,4 @@ 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';
+export { default as AdminWrapper } from './AdminWrapper.vue';

package/src/overlays/Alert.test.ts

@@ -1,10 +1,35 @@
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import { h, defineComponent } from 'vue';
+
+// Mock the @hotelinking/ui module before importing the component
+vi.mock('@hotelinking/ui', () => ({
+  uiAlert: defineComponent({
+    name: 'uiAlert',
+    props: ['title', 'type', 'actions', 'loading'],
+    emits: ['alert-event'],
+    setup(props, { slots, emit }) {
+      return () => h('div', { class: 'ui-alert', 'data-type': props.type }, [
+        h('div', { class: 'alert-title' }, props.title),
+        slots.default?.(),
+        props.actions?.map((action: any, index: number) => 
+          h('button', { 
+            key: index,
+            class: 'alert-action',
+            onClick: () => emit('alert-event', action.event)
+          }, action.name)
+        )
+      ]);
+    }
+  })
+}));
+
+// Import after mocking
 import Alert from './Alert.vue';
 
 describe('Alert Component', () => {
   it('renders with basic props', () => {
-    const wrapper = mount(Alert, {
+    const wrapper = shallowMount(Alert, {
       props: {
         title: 'Test Alert',
         type: 'info'
@@ -18,7 +43,7 @@ describe('Alert Component', () => {
     const types = ['info', 'success', 'warning', 'danger'] as const;
     
     types.forEach(type => {
-      const wrapper = mount(Alert, {
+      const wrapper = shallowMount(Alert, {
         props: {
           title: 'Test Alert',
           type
@@ -35,7 +60,7 @@ describe('Alert Component', () => {
       { name: 'Cancel', event: 'cancel' }
     ];
 
-    const wrapper = mount(Alert, {
+    const wrapper = shallowMount(Alert, {
       props: {
         title: 'Test Alert',
         type: 'warning',
@@ -47,25 +72,8 @@ describe('Alert Component', () => {
     expect(wrapper.props('actions')).toEqual(actions);
   });
 
-  it('emits alertEvent when action is triggered', async () => {
-    const wrapper = mount(Alert, {
-      props: {
-        title: 'Test Alert',
-        type: 'info',
-        actions: [{ name: 'OK', event: 'ok' }]
-      }
-    });
-
-    const component = wrapper.vm as any;
-    if (component.handleAlertEvent) {
-      component.handleAlertEvent('ok');
-      expect(wrapper.emitted('alertEvent')).toBeTruthy();
-      expect(wrapper.emitted('alertEvent')?.[0]).toEqual(['ok']);
-    }
-  });
-
   it('renders with show prop', () => {
-    const wrapper = mount(Alert, {
+    const wrapper = shallowMount(Alert, {
       props: {
         title: 'Test Alert',
         type: 'info',
@@ -78,7 +86,7 @@ describe('Alert Component', () => {
   });
 
   it('hides when show is false', () => {
-    const wrapper = mount(Alert, {
+    const wrapper = shallowMount(Alert, {
       props: {
         title: 'Test Alert',
         type: 'info',
@@ -86,28 +94,12 @@ describe('Alert Component', () => {
       }
     });
 
-    expect(wrapper.find('div').exists()).toBe(false);
-  });
-
-  it('supports v-model for show state', async () => {
-    const wrapper = mount(Alert, {
-      props: {
-        title: 'Test Alert',
-        type: 'info',
-        show: false,
-        'onUpdate:show': (value: boolean) => wrapper.setProps({ show: value })
-      }
-    });
-
-    const component = wrapper.vm as any;
-    component.show();
-
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted('update:show')).toBeTruthy();
+    // When show is false, the alert should not render its content
+    expect(wrapper.find('.ui-alert').exists()).toBe(false);
   });
 
   it('exposes show, hide, and toggle methods', () => {
-    const wrapper = mount(Alert, {
+    const wrapper = shallowMount(Alert, {
       props: {
         title: 'Test Alert',
         type: 'info'
@@ -115,40 +107,13 @@ describe('Alert Component', () => {
     });
 
     const component = wrapper.vm as any;
-    expect(component.show).toBeDefined();
-    expect(component.hide).toBeDefined();
-    expect(component.toggle).toBeDefined();
-  });
-
-  it('renders with loading state', () => {
-    const wrapper = mount(Alert, {
-      props: {
-        title: 'Loading Alert',
-        type: 'info',
-        loading: true
-      }
-    });
-
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.props('loading')).toBe(true);
-  });
-
-  it('renders slot content', () => {
-    const wrapper = mount(Alert, {
-      props: {
-        title: 'Test Alert',
-        type: 'info'
-      },
-      slots: {
-        default: '<p>Custom alert content</p>'
-      }
-    });
-
-    expect(wrapper.html()).toContain('Custom alert content');
+    expect(typeof component.show).toBe('function');
+    expect(typeof component.hide).toBe('function');
+    expect(typeof component.toggle).toBe('function');
   });
 
   it('emits close event when hidden', async () => {
-    const wrapper = mount(Alert, {
+    const wrapper = shallowMount(Alert, {
       props: {
         title: 'Test Alert',
         type: 'info',

package/src/overlays/Drawer.test.ts

@@ -12,24 +12,18 @@ describe('Drawer Component', () => {
     });
 
     expect(wrapper.exists()).toBe(true);
+    expect(wrapper.find('.fixed').exists()).toBe(true);
   });
 
-  it('supports v-model for open state', async () => {
+  it('does not render when closed', () => {
     const wrapper = mount(Drawer, {
       props: {
         open: false,
-        'onUpdate:open': (value: boolean) => wrapper.setProps({ open: value })
+        title: 'Test Drawer'
       }
     });
 
-    expect(wrapper.props('open')).toBe(false);
-
-    const component = wrapper.vm as any;
-    if (component.open) {
-      component.open();
-      await wrapper.vm.$nextTick();
-      expect(wrapper.emitted('update:open')).toBeTruthy();
-    }
+    expect(wrapper.find('.fixed').exists()).toBe(false);
   });
 
   it('emits close event when drawer is closed', async () => {
@@ -40,15 +34,15 @@ describe('Drawer Component', () => {
     });
 
     const component = wrapper.vm as any;
-    if (component.close) {
-      component.close();
-      await wrapper.vm.$nextTick();
-      expect(wrapper.emitted('update:open')).toBeTruthy();
-      expect(wrapper.emitted('close')).toBeTruthy();
-    }
+    component.close();
+
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted('update:open')).toBeTruthy();
+    expect(wrapper.emitted('update:open')?.[0]).toEqual([false]);
+    expect(wrapper.emitted('close')).toBeTruthy();
   });
 
-  it('exposes open and close methods', () => {
+  it('exposes open, close, and toggle methods', () => {
     const wrapper = mount(Drawer, {
       props: {
         open: false
@@ -56,20 +50,19 @@ describe('Drawer Component', () => {
     });
 
     const component = wrapper.vm as any;
-    if (component.open && component.close) {
-      expect(typeof component.open).toBe('function');
-      expect(typeof component.close).toBe('function');
-    }
+    expect(typeof component.open).toBe('function');
+    expect(typeof component.close).toBe('function');
+    expect(typeof component.toggle).toBe('function');
   });
 
   it('renders with different positions', () => {
-    const positions = ['left', 'right', 'top', 'bottom'];
+    const positions = ['left', 'right', 'top', 'bottom'] as const;
     
     positions.forEach(position => {
       const wrapper = mount(Drawer, {
         props: {
           open: true,
-          position: position as any
+          position
         }
       });
 
@@ -88,5 +81,46 @@ describe('Drawer Component', () => {
     });
 
     expect(wrapper.html()).toContain('drawer-content');
+    expect(wrapper.html()).toContain('Custom Content');
+  });
+
+  it('closes when clicking overlay', async () => {
+    const wrapper = mount(Drawer, {
+      props: {
+        open: true
+      }
+    });
+
+    // Click the overlay (first fixed div)
+    await wrapper.find('.bg-black').trigger('click');
+    
+    expect(wrapper.emitted('update:open')).toBeTruthy();
+    expect(wrapper.emitted('update:open')?.[0]).toEqual([false]);
+  });
+
+  it('does not close when clicking drawer content', async () => {
+    const wrapper = mount(Drawer, {
+      props: {
+        open: true
+      }
+    });
+
+    // Click the drawer content area (the white bg div)
+    const drawerContent = wrapper.find('.bg-white');
+    await drawerContent.trigger('click');
+    
+    // Should not emit close
+    expect(wrapper.emitted('update:open')).toBeFalsy();
+  });
+
+  it('displays title', () => {
+    const wrapper = mount(Drawer, {
+      props: {
+        open: true,
+        title: 'My Drawer Title'
+      }
+    });
+
+    expect(wrapper.text()).toContain('My Drawer Title');
   });
 });

package/src/overlays/Modal.test.ts

@@ -1,5 +1,31 @@
-import { describe, it, expect, beforeAll } from 'vitest';
-import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi, beforeAll, beforeEach } from 'vitest';
+import { mount, shallowMount } from '@vue/test-utils';
+import { h, defineComponent } from 'vue';
+
+// Mock the @hotelinking/ui module before importing the component
+vi.mock('@hotelinking/ui', () => ({
+  uiModal: defineComponent({
+    name: 'uiModal',
+    props: ['title', 'content', 'modalName', 'open', 'actions'],
+    emits: ['modalAction'],
+    setup(props, { slots, emit }) {
+      return () => props.open ? h('div', { class: 'ui-modal' }, [
+        h('div', { class: 'modal-title' }, props.title),
+        h('div', { class: 'modal-content' }, props.content),
+        slots.default?.(),
+        props.actions?.map((action: any, index: number) => 
+          h('button', { 
+            key: index,
+            class: 'modal-action',
+            onClick: () => emit('modalAction', { modal: props.modalName, action: action.value })
+          }, action.text)
+        )
+      ]) : null;
+    }
+  })
+}));
+
+// Import after mocking
 import Modal from './Modal.vue';
 
 // Mock ResizeObserver
@@ -13,7 +39,7 @@ beforeAll(() => {
 
 describe('Modal Component', () => {
   it('renders with basic props', () => {
-    const wrapper = mount(Modal, {
+    const wrapper = shallowMount(Modal, {
       props: {
         open: true,
         title: 'Test Modal',
@@ -24,8 +50,19 @@ describe('Modal Component', () => {
     expect(wrapper.exists()).toBe(true);
   });
 
+  it('does not render modal content when closed', () => {
+    const wrapper = shallowMount(Modal, {
+      props: {
+        open: false,
+        title: 'Test Modal'
+      }
+    });
+
+    expect(wrapper.find('.ui-modal').exists()).toBe(false);
+  });
+
   it('supports v-model for open state', async () => {
-    const wrapper = mount(Modal, {
+    const wrapper = shallowMount(Modal, {
       props: {
         open: false,
         'onUpdate:open': (value: boolean) => wrapper.setProps({ open: value })
@@ -34,7 +71,6 @@ describe('Modal Component', () => {
 
     expect(wrapper.props('open')).toBe(false);
 
-    // Open the modal using exposed method
     const component = wrapper.vm as any;
     component.open();
 
@@ -44,7 +80,7 @@ describe('Modal Component', () => {
   });
 
   it('emits close event when modal is closed', async () => {
-    const wrapper = mount(Modal, {
+    const wrapper = shallowMount(Modal, {
       props: {
         open: true
       }
@@ -60,23 +96,20 @@ describe('Modal Component', () => {
   });
 
   it('exposes open, close, and toggle methods', () => {
-    const wrapper = mount(Modal, {
+    const wrapper = shallowMount(Modal, {
       props: {
         open: false
       }
     });
 
     const component = wrapper.vm as any;
-    expect(component.open).toBeDefined();
-    expect(component.close).toBeDefined();
-    expect(component.toggle).toBeDefined();
     expect(typeof component.open).toBe('function');
     expect(typeof component.close).toBe('function');
     expect(typeof component.toggle).toBe('function');
   });
 
-  it('handles action events', async () => {
-    const wrapper = mount(Modal, {
+  it('renders with actions', () => {
+    const wrapper = shallowMount(Modal, {
       props: {
         open: true,
         actions: [
@@ -86,43 +119,22 @@ describe('Modal Component', () => {
       }
     });
 
-    const component = wrapper.vm as any;
-    component.handleAction({ value: 'confirm' });
-
-    expect(wrapper.emitted('action')).toBeTruthy();
-    expect(wrapper.emitted('action')?.[0]).toEqual([{ value: 'confirm' }]);
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.props('actions')).toHaveLength(2);
   });
 
-  it('closes modal when action value is close or cancel', async () => {
-    const wrapper = mount(Modal, {
+  it('toggle method switches open state', async () => {
+    const wrapper = shallowMount(Modal, {
       props: {
-        open: true
+        open: false
       }
     });
 
     const component = wrapper.vm as any;
-    component.handleAction({ value: 'cancel' });
-
+    
+    // Toggle to open
+    component.toggle();
     await wrapper.vm.$nextTick();
-    expect(wrapper.emitted('update:open')).toBeTruthy();
-    expect(wrapper.emitted('update:open')?.[0]).toEqual([false]);
-  });
-
-  it('renders slots correctly', () => {
-    const wrapper = mount(Modal, {
-      props: {
-        open: true
-      },
-      slots: {
-        default: '<div class="custom-content">Custom Content</div>',
-        header: '<div class="custom-header">Custom Header</div>',
-        footer: '<div class="custom-footer">Custom Footer</div>'
-      }
-    });
-
-    // Modal uses uiModal which may not render slots immediately in test environment
-    // Just verify the component exists and has the right props
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.props('open')).toBe(true);
+    expect(wrapper.emitted('update:open')?.[0]).toEqual([true]);
   });
 });

package/src/stores/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Stores
+ * 
+ * Nanostores for shared state management
+ */
+
+export { $user, setUser, clearUser, type User } from './user';