@datametria/vue-components 2.0.1 → 2.1.1

package/src/components/__tests__/DatametriaFloatingBar.test.ts

@@ -0,0 +1,137 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaFloatingBar from '../DatametriaFloatingBar.vue'
+
+describe('DatametriaFloatingBar', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaFloatingBar)
+    expect(wrapper.find('.dm-floating-bar').exists()).toBe(true)
+  })
+
+  it('applies position classes', () => {
+    const positions = ['top', 'bottom', 'left', 'right'] as const
+    positions.forEach(position => {
+      const wrapper = mount(DatametriaFloatingBar, { props: { position } })
+      expect(wrapper.find(`.dm-floating-bar--${position}`).exists()).toBe(true)
+    })
+  })
+
+  it('applies variant classes', () => {
+    const variants = ['light', 'dark', 'primary'] as const
+    variants.forEach(variant => {
+      const wrapper = mount(DatametriaFloatingBar, { props: { variant } })
+      expect(wrapper.find(`.dm-floating-bar--${variant}`).exists()).toBe(true)
+    })
+  })
+
+  it('applies shadow class when shadow is true', () => {
+    const wrapper = mount(DatametriaFloatingBar, { props: { shadow: true } })
+    expect(wrapper.find('.dm-floating-bar--shadow').exists()).toBe(true)
+  })
+
+  it('does not apply shadow class when shadow is false', () => {
+    const wrapper = mount(DatametriaFloatingBar, { props: { shadow: false } })
+    expect(wrapper.find('.dm-floating-bar--shadow').exists()).toBe(false)
+  })
+
+  it('applies rounded class when rounded is true', () => {
+    const wrapper = mount(DatametriaFloatingBar, { props: { rounded: true } })
+    expect(wrapper.find('.dm-floating-bar--rounded').exists()).toBe(true)
+  })
+
+  it('does not apply rounded class when rounded is false', () => {
+    const wrapper = mount(DatametriaFloatingBar, { props: { rounded: false } })
+    expect(wrapper.find('.dm-floating-bar--rounded').exists()).toBe(false)
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(DatametriaFloatingBar, {
+      slots: { default: '<button class="test-button">Action</button>' }
+    })
+    expect(wrapper.find('.test-button').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Action')
+  })
+
+  it('applies correct position style for top', () => {
+    const wrapper = mount(DatametriaFloatingBar, {
+      props: { position: 'top', offset: '20px' }
+    })
+    const style = wrapper.find('.dm-floating-bar').attributes('style')
+    expect(style).toContain('top: 20px')
+  })
+
+  it('applies correct position style for bottom', () => {
+    const wrapper = mount(DatametriaFloatingBar, {
+      props: { position: 'bottom', offset: '24px' }
+    })
+    const style = wrapper.find('.dm-floating-bar').attributes('style')
+    expect(style).toContain('bottom: 24px')
+  })
+
+  it('applies correct position style for left', () => {
+    const wrapper = mount(DatametriaFloatingBar, {
+      props: { position: 'left', offset: '32px' }
+    })
+    const style = wrapper.find('.dm-floating-bar').attributes('style')
+    expect(style).toContain('left: 32px')
+  })
+
+  it('applies correct position style for right', () => {
+    const wrapper = mount(DatametriaFloatingBar, {
+      props: { position: 'right', offset: '40px' }
+    })
+    const style = wrapper.find('.dm-floating-bar').attributes('style')
+    expect(style).toContain('right: 40px')
+  })
+
+  it('uses default offset when not provided', () => {
+    const wrapper = mount(DatametriaFloatingBar, { props: { position: 'bottom' } })
+    const style = wrapper.find('.dm-floating-bar').attributes('style')
+    expect(style).toContain('bottom: 16px')
+  })
+
+  it('has correct aria attributes', () => {
+    const wrapper = mount(DatametriaFloatingBar, {
+      props: { ariaLabel: 'Floating toolbar' }
+    })
+    const bar = wrapper.find('.dm-floating-bar')
+    expect(bar.attributes('role')).toBe('toolbar')
+    expect(bar.attributes('aria-label')).toBe('Floating toolbar')
+  })
+
+  it('renders content wrapper', () => {
+    const wrapper = mount(DatametriaFloatingBar)
+    expect(wrapper.find('.dm-floating-bar__content').exists()).toBe(true)
+  })
+
+  it('applies all classes correctly', () => {
+    const wrapper = mount(DatametriaFloatingBar, {
+      props: {
+        position: 'top',
+        variant: 'primary',
+        shadow: true,
+        rounded: true
+      }
+    })
+    const bar = wrapper.find('.dm-floating-bar')
+    expect(bar.classes()).toContain('dm-floating-bar--top')
+    expect(bar.classes()).toContain('dm-floating-bar--primary')
+    expect(bar.classes()).toContain('dm-floating-bar--shadow')
+    expect(bar.classes()).toContain('dm-floating-bar--rounded')
+  })
+
+  it('renders multiple action buttons', () => {
+    const wrapper = mount(DatametriaFloatingBar, {
+      slots: {
+        default: `
+          <button class="btn-1">Action 1</button>
+          <button class="btn-2">Action 2</button>
+          <button class="btn-3">Action 3</button>
+        `
+      }
+    })
+    expect(wrapper.find('.btn-1').exists()).toBe(true)
+    expect(wrapper.find('.btn-2').exists()).toBe(true)
+    expect(wrapper.find('.btn-3').exists()).toBe(true)
+  })
+})

package/src/components/__tests__/DatametriaSidebar.test.ts

@@ -0,0 +1,169 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaSidebar from '../DatametriaSidebar.vue'
+
+describe('DatametriaSidebar', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaSidebar)
+    expect(wrapper.find('.dm-sidebar').exists()).toBe(true)
+  })
+
+  it('applies position classes', () => {
+    const wrapperLeft = mount(DatametriaSidebar, { props: { position: 'left' } })
+    expect(wrapperLeft.find('.dm-sidebar--left').exists()).toBe(true)
+
+    const wrapperRight = mount(DatametriaSidebar, { props: { position: 'right' } })
+    expect(wrapperRight.find('.dm-sidebar--right').exists()).toBe(true)
+  })
+
+  it('applies variant classes', () => {
+    const variants = ['light', 'dark', 'primary'] as const
+    variants.forEach(variant => {
+      const wrapper = mount(DatametriaSidebar, { props: { variant } })
+      expect(wrapper.find(`.dm-sidebar--${variant}`).exists()).toBe(true)
+    })
+  })
+
+  it('renders header slot', () => {
+    const wrapper = mount(DatametriaSidebar, {
+      slots: { header: '<div class="test-header">Header</div>' }
+    })
+    expect(wrapper.find('.test-header').exists()).toBe(true)
+    expect(wrapper.find('.dm-sidebar__header').exists()).toBe(true)
+  })
+
+  it('renders default slot content', () => {
+    const wrapper = mount(DatametriaSidebar, {
+      slots: { default: '<div class="test-content">Content</div>' }
+    })
+    expect(wrapper.find('.test-content').exists()).toBe(true)
+    expect(wrapper.find('.dm-sidebar__content').exists()).toBe(true)
+  })
+
+  it('renders footer slot', () => {
+    const wrapper = mount(DatametriaSidebar, {
+      slots: { footer: '<div class="test-footer">Footer</div>' }
+    })
+    expect(wrapper.find('.test-footer').exists()).toBe(true)
+    expect(wrapper.find('.dm-sidebar__footer').exists()).toBe(true)
+  })
+
+  it('shows toggle button when collapsible', () => {
+    const wrapper = mount(DatametriaSidebar, {
+      props: { collapsible: true },
+      slots: { header: 'Header' }
+    })
+    expect(wrapper.find('.dm-sidebar__toggle').exists()).toBe(true)
+  })
+
+  it('hides toggle button when not collapsible', () => {
+    const wrapper = mount(DatametriaSidebar, {
+      props: { collapsible: false },
+      slots: { header: 'Header' }
+    })
+    expect(wrapper.find('.dm-sidebar__toggle').exists()).toBe(false)
+  })
+
+  it('toggles open state when toggle button clicked', async () => {
+    const wrapper = mount(DatametriaSidebar, {
+      props: { collapsible: true, defaultOpen: true },
+      slots: { header: 'Header' }
+    })
+
+    expect(wrapper.vm.isOpen).toBe(true)
+    expect(wrapper.find('.dm-sidebar--collapsed').exists()).toBe(false)
+
+    await wrapper.find('.dm-sidebar__toggle').trigger('click')
+    expect(wrapper.vm.isOpen).toBe(false)
+    expect(wrapper.find('.dm-sidebar--collapsed').exists()).toBe(true)
+
+    await wrapper.find('.dm-sidebar__toggle').trigger('click')
+    expect(wrapper.vm.isOpen).toBe(true)
+  })
+
+  it('emits toggle event with correct value', async () => {
+    const wrapper = mount(DatametriaSidebar, {
+      props: { collapsible: true, defaultOpen: true },
+      slots: { header: 'Header' }
+    })
+
+    await wrapper.find('.dm-sidebar__toggle').trigger('click')
+    expect(wrapper.emitted('toggle')).toBeTruthy()
+    expect(wrapper.emitted('toggle')?.[0]).toEqual([false])
+
+    await wrapper.find('.dm-sidebar__toggle').trigger('click')
+    expect(wrapper.emitted('toggle')?.[1]).toEqual([true])
+  })
+
+  it('emits open event when opening', async () => {
+    const wrapper = mount(DatametriaSidebar, {
+      props: { collapsible: true, defaultOpen: false },
+      slots: { header: 'Header' }
+    })
+
+    await wrapper.find('.dm-sidebar__toggle').trigger('click')
+    expect(wrapper.emitted('open')).toBeTruthy()
+  })
+
+  it('emits close event when closing', async () => {
+    const wrapper = mount(DatametriaSidebar, {
+      props: { collapsible: true, defaultOpen: true },
+      slots: { header: 'Header' }
+    })
+
+    await wrapper.find('.dm-sidebar__toggle').trigger('click')
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+
+  it('respects defaultOpen prop', () => {
+    const wrapperOpen = mount(DatametriaSidebar, { props: { defaultOpen: true } })
+    expect(wrapperOpen.vm.isOpen).toBe(true)
+
+    const wrapperClosed = mount(DatametriaSidebar, { props: { defaultOpen: false } })
+    expect(wrapperClosed.vm.isOpen).toBe(false)
+  })
+
+  it('updates isOpen when defaultOpen prop changes', async () => {
+    const wrapper = mount(DatametriaSidebar, { props: { defaultOpen: true } })
+    expect(wrapper.vm.isOpen).toBe(true)
+
+    await wrapper.setProps({ defaultOpen: false })
+    expect(wrapper.vm.isOpen).toBe(false)
+  })
+
+  it('has correct aria attributes', () => {
+    const wrapper = mount(DatametriaSidebar, {
+      props: { ariaLabel: 'Test sidebar', defaultOpen: true }
+    })
+    const sidebar = wrapper.find('.dm-sidebar')
+    expect(sidebar.attributes('role')).toBe('complementary')
+    expect(sidebar.attributes('aria-label')).toBe('Test sidebar')
+    expect(sidebar.attributes('aria-expanded')).toBe('true')
+  })
+
+  it('exposes toggle method', () => {
+    const wrapper = mount(DatametriaSidebar, {
+      props: { collapsible: true, defaultOpen: true }
+    })
+
+    expect(wrapper.vm.isOpen).toBe(true)
+    wrapper.vm.toggle()
+    expect(wrapper.vm.isOpen).toBe(false)
+    wrapper.vm.toggle()
+    expect(wrapper.vm.isOpen).toBe(true)
+  })
+
+  it('applies collapsed class when closed and collapsible', () => {
+    const wrapper = mount(DatametriaSidebar, {
+      props: { collapsible: true, defaultOpen: false }
+    })
+    expect(wrapper.find('.dm-sidebar--collapsed').exists()).toBe(true)
+  })
+
+  it('does not apply collapsed class when open', () => {
+    const wrapper = mount(DatametriaSidebar, {
+      props: { collapsible: true, defaultOpen: true }
+    })
+    expect(wrapper.find('.dm-sidebar--collapsed').exists()).toBe(false)
+  })
+})

package/src/components/__tests__/DatametriaTabs.test.ts

@@ -0,0 +1,232 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaTabs from '../DatametriaTabs.vue'
+
+describe('DatametriaTabs', () => {
+  const tabs = ['Tab 1', 'Tab 2', 'Tab 3']
+
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaTabs, { props: { tabs } })
+    expect(wrapper.find('.dm-tabs').exists()).toBe(true)
+  })
+
+  it('renders all tabs', () => {
+    const wrapper = mount(DatametriaTabs, { props: { tabs } })
+    const tabButtons = wrapper.findAll('.dm-tabs__tab')
+    expect(tabButtons).toHaveLength(3)
+    expect(tabButtons[0].text()).toBe('Tab 1')
+    expect(tabButtons[1].text()).toBe('Tab 2')
+    expect(tabButtons[2].text()).toBe('Tab 3')
+  })
+
+  it('applies variant classes', () => {
+    const variants = ['default', 'pills', 'underline'] as const
+    variants.forEach(variant => {
+      const wrapper = mount(DatametriaTabs, { props: { tabs, variant } })
+      expect(wrapper.find(`.dm-tabs--${variant}`).exists()).toBe(true)
+    })
+  })
+
+  it('applies orientation classes', () => {
+    const horizontal = mount(DatametriaTabs, { props: { tabs, orientation: 'horizontal' } })
+    expect(horizontal.find('.dm-tabs--horizontal').exists()).toBe(true)
+
+    const vertical = mount(DatametriaTabs, { props: { tabs, orientation: 'vertical' } })
+    expect(vertical.find('.dm-tabs--vertical').exists()).toBe(true)
+  })
+
+  it('sets first tab as active by default', () => {
+    const wrapper = mount(DatametriaTabs, { props: { tabs } })
+    expect(wrapper.findAll('.dm-tabs__tab')[0].classes()).toContain('dm-tabs__tab--active')
+  })
+
+  it('respects modelValue prop', () => {
+    const wrapper = mount(DatametriaTabs, { props: { tabs, modelValue: 1 } })
+    expect(wrapper.findAll('.dm-tabs__tab')[1].classes()).toContain('dm-tabs__tab--active')
+  })
+
+  it('changes active tab on click', async () => {
+    const wrapper = mount(DatametriaTabs, { props: { tabs } })
+    await wrapper.findAll('.dm-tabs__tab')[1].trigger('click')
+    expect(wrapper.findAll('.dm-tabs__tab')[1].classes()).toContain('dm-tabs__tab--active')
+  })
+
+  it('emits update:modelValue on tab click', async () => {
+    const wrapper = mount(DatametriaTabs, { props: { tabs } })
+    await wrapper.findAll('.dm-tabs__tab')[2].trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([2])
+  })
+
+  it('emits change event on tab click', async () => {
+    const wrapper = mount(DatametriaTabs, { props: { tabs } })
+    await wrapper.findAll('.dm-tabs__tab')[1].trigger('click')
+    expect(wrapper.emitted('change')).toBeTruthy()
+    expect(wrapper.emitted('change')?.[0]).toEqual([1])
+  })
+
+  it('renders tab panels', () => {
+    const wrapper = mount(DatametriaTabs, {
+      props: { tabs },
+      slots: {
+        'panel-0': '<div class="panel-0">Panel 1</div>',
+        'panel-1': '<div class="panel-1">Panel 2</div>',
+        'panel-2': '<div class="panel-2">Panel 3</div>'
+      }
+    })
+    expect(wrapper.find('.panel-0').exists()).toBe(true)
+    expect(wrapper.find('.panel-1').exists()).toBe(true)
+    expect(wrapper.find('.panel-2').exists()).toBe(true)
+  })
+
+  it('shows only active panel', () => {
+    const wrapper = mount(DatametriaTabs, {
+      props: { tabs, modelValue: 1 },
+      slots: {
+        'panel-0': '<div class="panel-0">Panel 1</div>',
+        'panel-1': '<div class="panel-1">Panel 2</div>',
+        'panel-2': '<div class="panel-2">Panel 3</div>'
+      }
+    })
+    const panels = wrapper.findAll('.dm-tabs__panel')
+    expect(panels[0].classes()).not.toContain('dm-tabs__panel--active')
+    expect(panels[1].classes()).toContain('dm-tabs__panel--active')
+    expect(panels[2].classes()).not.toContain('dm-tabs__panel--active')
+  })
+
+  it('handles keyboard navigation - ArrowRight', async () => {
+    const wrapper = mount(DatametriaTabs, { props: { tabs } })
+    const tabButtons = wrapper.findAll('.dm-tabs__tab')
+    
+    await tabButtons[0].trigger('keydown', { key: 'ArrowRight' })
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([1])
+  })
+
+  it('handles keyboard navigation - ArrowLeft', async () => {
+    const wrapper = mount(DatametriaTabs, { props: { tabs, modelValue: 1 } })
+    const tabButtons = wrapper.findAll('.dm-tabs__tab')
+    
+    await tabButtons[1].trigger('keydown', { key: 'ArrowLeft' })
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([0])
+  })
+
+  it('handles keyboard navigation - Home', async () => {
+    const wrapper = mount(DatametriaTabs, { props: { tabs, modelValue: 2 } })
+    const tabButtons = wrapper.findAll('.dm-tabs__tab')
+    
+    await tabButtons[2].trigger('keydown', { key: 'Home' })
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([0])
+  })
+
+  it('handles keyboard navigation - End', async () => {
+    const wrapper = mount(DatametriaTabs, { props: { tabs, modelValue: 0 } })
+    const tabButtons = wrapper.findAll('.dm-tabs__tab')
+    
+    await tabButtons[0].trigger('keydown', { key: 'End' })
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([2])
+  })
+
+  it('wraps around with ArrowRight at last tab', async () => {
+    const wrapper = mount(DatametriaTabs, { props: { tabs, modelValue: 2 } })
+    const tabButtons = wrapper.findAll('.dm-tabs__tab')
+    
+    await tabButtons[2].trigger('keydown', { key: 'ArrowRight' })
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([0])
+  })
+
+  it('wraps around with ArrowLeft at first tab', async () => {
+    const wrapper = mount(DatametriaTabs, { props: { tabs, modelValue: 0 } })
+    const tabButtons = wrapper.findAll('.dm-tabs__tab')
+    
+    await tabButtons[0].trigger('keydown', { key: 'ArrowLeft' })
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([2])
+  })
+
+  it('renders tabs with icons', () => {
+    const tabsWithIcons = [
+      { label: 'Home', icon: '🏠' },
+      { label: 'Settings', icon: '⚙️' }
+    ]
+    const wrapper = mount(DatametriaTabs, { props: { tabs: tabsWithIcons } })
+    expect(wrapper.findAll('.dm-tabs__icon')).toHaveLength(2)
+    expect(wrapper.findAll('.dm-tabs__icon')[0].text()).toBe('🏠')
+  })
+
+  it('renders tabs with badges', () => {
+    const tabsWithBadges = [
+      { label: 'Messages', badge: '5' },
+      { label: 'Notifications', badge: 10 }
+    ]
+    const wrapper = mount(DatametriaTabs, { props: { tabs: tabsWithBadges } })
+    expect(wrapper.findAll('.dm-tabs__badge')).toHaveLength(2)
+    expect(wrapper.findAll('.dm-tabs__badge')[0].text()).toBe('5')
+    expect(wrapper.findAll('.dm-tabs__badge')[1].text()).toBe('10')
+  })
+
+  it('handles disabled tabs', async () => {
+    const tabsWithDisabled = [
+      { label: 'Tab 1' },
+      { label: 'Tab 2', disabled: true },
+      { label: 'Tab 3' }
+    ]
+    const wrapper = mount(DatametriaTabs, { props: { tabs: tabsWithDisabled } })
+    
+    const disabledTab = wrapper.findAll('.dm-tabs__tab')[1]
+    expect(disabledTab.classes()).toContain('dm-tabs__tab--disabled')
+    expect(disabledTab.attributes('disabled')).toBeDefined()
+    
+    await disabledTab.trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+  })
+
+  it('shows indicator by default', () => {
+    const wrapper = mount(DatametriaTabs, { props: { tabs } })
+    expect(wrapper.find('.dm-tabs__indicator').exists()).toBe(true)
+  })
+
+  it('hides indicator when showIndicator is false', () => {
+    const wrapper = mount(DatametriaTabs, { props: { tabs, showIndicator: false } })
+    expect(wrapper.find('.dm-tabs__indicator').exists()).toBe(false)
+  })
+
+  it('has correct aria attributes', () => {
+    const wrapper = mount(DatametriaTabs, { props: { tabs, ariaLabel: 'Main tabs' } })
+    const header = wrapper.find('.dm-tabs__header')
+    expect(header.attributes('role')).toBe('tablist')
+    expect(header.attributes('aria-label')).toBe('Main tabs')
+    expect(header.attributes('aria-orientation')).toBe('horizontal')
+  })
+
+  it('updates aria-orientation for vertical tabs', () => {
+    const wrapper = mount(DatametriaTabs, { props: { tabs, orientation: 'vertical' } })
+    const header = wrapper.find('.dm-tabs__header')
+    expect(header.attributes('aria-orientation')).toBe('vertical')
+  })
+
+  it('handles vertical keyboard navigation', async () => {
+    const wrapper = mount(DatametriaTabs, { props: { tabs, orientation: 'vertical' } })
+    const tabButtons = wrapper.findAll('.dm-tabs__tab')
+    
+    await tabButtons[0].trigger('keydown', { key: 'ArrowDown' })
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([1])
+    
+    await tabButtons[1].trigger('keydown', { key: 'ArrowUp' })
+    expect(wrapper.emitted('update:modelValue')?.[1]).toEqual([0])
+  })
+
+  it('ignores horizontal keys in vertical mode', async () => {
+    const wrapper = mount(DatametriaTabs, { props: { tabs, orientation: 'vertical' } })
+    const tabButtons = wrapper.findAll('.dm-tabs__tab')
+    
+    await tabButtons[0].trigger('keydown', { key: 'ArrowRight' })
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+  })
+
+  it('updates when modelValue prop changes', async () => {
+    const wrapper = mount(DatametriaTabs, { props: { tabs, modelValue: 0 } })
+    expect(wrapper.findAll('.dm-tabs__tab')[0].classes()).toContain('dm-tabs__tab--active')
+    
+    await wrapper.setProps({ modelValue: 2 })
+    expect(wrapper.findAll('.dm-tabs__tab')[2].classes()).toContain('dm-tabs__tab--active')
+  })
+})

package/src/index.ts

@@ -37,6 +37,8 @@ export { default as DatametriaChip } from './components/DatametriaChip.vue'
 
 // Components - Navigation
 export { default as DatametriaNavbar } from './components/DatametriaNavbar.vue'
+export { default as DatametriaSidebar } from './components/DatametriaSidebar.vue'
+export { default as DatametriaFloatingBar } from './components/DatametriaFloatingBar.vue'
 export { default as DatametriaMenu } from './components/DatametriaMenu.vue'
 export { default as DatametriaBreadcrumb } from './components/DatametriaBreadcrumb.vue'
 export { default as DatametriaTabs } from './components/DatametriaTabs.vue'