@datametria/vue-components 2.3.0 → 2.4.0

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

@@ -1,137 +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)
-  })
-})
+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__/DatametriaForm.test.ts

@@ -0,0 +1,96 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaForm from '../DatametriaForm.vue'
+
+describe('DatametriaForm', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaForm)
+    expect(wrapper.find('.datametria-form').exists()).toBe(true)
+  })
+
+  it('applies inline class', () => {
+    const wrapper = mount(DatametriaForm, {
+      props: { inline: true }
+    })
+    expect(wrapper.find('.datametria-form--inline').exists()).toBe(true)
+  })
+
+  it('applies label position class', () => {
+    const wrapper = mount(DatametriaForm, {
+      props: { labelPosition: 'left' }
+    })
+    expect(wrapper.find('.datametria-form--label-left').exists()).toBe(true)
+  })
+
+  it('validates form returns true when no fields', async () => {
+    const wrapper = mount(DatametriaForm)
+    const valid = await wrapper.vm.validate()
+    expect(valid).toBe(true)
+  })
+
+  it('validates single field returns true when field not found', async () => {
+    const wrapper = mount(DatametriaForm)
+    const valid = await wrapper.vm.validateField('nonexistent')
+    expect(valid).toBe(true)
+  })
+
+  it('resets all fields', () => {
+    const wrapper = mount(DatametriaForm)
+    wrapper.vm.resetFields()
+    expect(wrapper.vm.errors).toEqual({})
+  })
+
+  it('clears validation', () => {
+    const wrapper = mount(DatametriaForm)
+    wrapper.vm.clearValidate()
+    expect(wrapper.vm.errors).toEqual({})
+  })
+
+  it('clears validation for specific field', () => {
+    const wrapper = mount(DatametriaForm)
+    wrapper.vm.clearValidate('name')
+    expect(wrapper.vm.errors).toEqual({})
+  })
+
+  it('clears validation for array of fields', () => {
+    const wrapper = mount(DatametriaForm)
+    wrapper.vm.clearValidate(['name', 'email'])
+    expect(wrapper.vm.errors).toEqual({})
+  })
+
+  it('emits validate event', async () => {
+    const wrapper = mount(DatametriaForm)
+    await wrapper.vm.validate()
+    expect(wrapper.emitted('validate')).toBeTruthy()
+  })
+
+  it('emits submit event on form submit', async () => {
+    const model = { name: 'Test' }
+    const wrapper = mount(DatametriaForm, {
+      props: { model }
+    })
+    await wrapper.find('form').trigger('submit')
+    expect(wrapper.emitted('submit')).toBeTruthy()
+    expect(wrapper.emitted('submit')?.[0]).toEqual([model])
+  })
+
+  it('exposes validate method', () => {
+    const wrapper = mount(DatametriaForm)
+    expect(wrapper.vm.validate).toBeDefined()
+  })
+
+  it('exposes validateField method', () => {
+    const wrapper = mount(DatametriaForm)
+    expect(wrapper.vm.validateField).toBeDefined()
+  })
+
+  it('exposes resetFields method', () => {
+    const wrapper = mount(DatametriaForm)
+    expect(wrapper.vm.resetFields).toBeDefined()
+  })
+
+  it('exposes clearValidate method', () => {
+    const wrapper = mount(DatametriaForm)
+    expect(wrapper.vm.clearValidate).toBeDefined()
+  })
+})

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

@@ -0,0 +1,58 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaFormItem from '../DatametriaFormItem.vue'
+
+describe('DatametriaFormItem', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaFormItem, {
+      props: { label: 'Test Label' }
+    })
+    expect(wrapper.find('.datametria-form-item').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Test Label')
+  })
+
+  it('renders without label', () => {
+    const wrapper = mount(DatametriaFormItem)
+    expect(wrapper.find('.datametria-form-item__label').exists()).toBe(false)
+  })
+
+  it('shows required indicator', () => {
+    const wrapper = mount(DatametriaFormItem, {
+      props: { label: 'Name', required: true }
+    })
+    expect(wrapper.find('.is-required').exists()).toBe(true)
+  })
+
+  it('validates field returns true when no rules', async () => {
+    const wrapper = mount(DatametriaFormItem)
+    const valid = await wrapper.vm.validate()
+    expect(valid).toBe(true)
+  })
+
+  it('resets field clears error', () => {
+    const wrapper = mount(DatametriaFormItem)
+    wrapper.vm.reset()
+    expect(wrapper.vm.errorMessage).toBe('')
+  })
+
+  it('clears validation removes error', () => {
+    const wrapper = mount(DatametriaFormItem)
+    wrapper.vm.clearValidate()
+    expect(wrapper.vm.errorMessage).toBe('')
+  })
+
+  it('exposes validate method', () => {
+    const wrapper = mount(DatametriaFormItem)
+    expect(wrapper.vm.validate).toBeDefined()
+  })
+
+  it('exposes reset method', () => {
+    const wrapper = mount(DatametriaFormItem)
+    expect(wrapper.vm.reset).toBeDefined()
+  })
+
+  it('exposes clearValidate method', () => {
+    const wrapper = mount(DatametriaFormItem)
+    expect(wrapper.vm.clearValidate).toBeDefined()
+  })
+})

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

@@ -1,31 +1,31 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaGrid from '../DatametriaGrid.vue'
-
-describe('DatametriaGrid', () => {
-  it('renders correctly', () => {
-    const wrapper = mount(DatametriaGrid)
-    expect(wrapper.find('.dm-grid').exists()).toBe(true)
-  })
-
-  it('applies custom cols', () => {
-    const wrapper = mount(DatametriaGrid, {
-      props: { cols: 6 }
-    })
-    expect(wrapper.find('.dm-grid').attributes('style')).toContain('--dm-grid-cols: 6')
-  })
-
-  it('applies custom gap', () => {
-    const wrapper = mount(DatametriaGrid, {
-      props: { gap: '2rem' }
-    })
-    expect(wrapper.find('.dm-grid').attributes('style')).toContain('--dm-grid-gap: 2rem')
-  })
-
-  it('renders slot content', () => {
-    const wrapper = mount(DatametriaGrid, {
-      slots: { default: '<div>Grid Item</div>' }
-    })
-    expect(wrapper.html()).toContain('Grid Item')
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaGrid from '../DatametriaGrid.vue'
+
+describe('DatametriaGrid', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaGrid)
+    expect(wrapper.find('.dm-grid').exists()).toBe(true)
+  })
+
+  it('applies custom cols', () => {
+    const wrapper = mount(DatametriaGrid, {
+      props: { cols: 6 }
+    })
+    expect(wrapper.find('.dm-grid').attributes('style')).toContain('--dm-grid-cols: 6')
+  })
+
+  it('applies custom gap', () => {
+    const wrapper = mount(DatametriaGrid, {
+      props: { gap: '2rem' }
+    })
+    expect(wrapper.find('.dm-grid').attributes('style')).toContain('--dm-grid-gap: 2rem')
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(DatametriaGrid, {
+      slots: { default: '<div>Grid Item</div>' }
+    })
+    expect(wrapper.html()).toContain('Grid Item')
+  })
+})

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

@@ -1,72 +1,72 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaInput from '../DatametriaInput.vue'
-
-describe('DatametriaInput', () => {
-  it('renders correctly', () => {
-    const wrapper = mount(DatametriaInput)
-    expect(wrapper.find('.datametria-input').exists()).toBe(true)
-  })
-
-  it('renders label when provided', () => {
-    const wrapper = mount(DatametriaInput, {
-      props: { label: 'Test Label' }
-    })
-    expect(wrapper.find('.datametria-input__label').text()).toContain('Test Label')
-  })
-
-  it('shows required asterisk when required', () => {
-    const wrapper = mount(DatametriaInput, {
-      props: { label: 'Test', required: true }
-    })
-    expect(wrapper.find('.datametria-input__required').exists()).toBe(true)
-  })
-
-  it('binds modelValue correctly', () => {
-    const wrapper = mount(DatametriaInput, {
-      props: { modelValue: 'test value' }
-    })
-    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('test value')
-  })
-
-  it('emits update:modelValue on input', async () => {
-    const wrapper = mount(DatametriaInput)
-    const input = wrapper.find('input')
-    await input.setValue('new value')
-    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new value'])
-  })
-
-  it('applies disabled state', () => {
-    const wrapper = mount(DatametriaInput, {
-      props: { disabled: true }
-    })
-    expect(wrapper.find('input').attributes('disabled')).toBeDefined()
-  })
-
-  it('shows error message when provided', () => {
-    const wrapper = mount(DatametriaInput, {
-      props: { errorMessage: 'Error text' }
-    })
-    expect(wrapper.find('.datametria-input__error').text()).toBe('Error text')
-  })
-
-  it('applies error class when error exists', () => {
-    const wrapper = mount(DatametriaInput, {
-      props: { errorMessage: 'Error' }
-    })
-    expect(wrapper.find('.datametria-input__field--error').exists()).toBe(true)
-  })
-
-  it('applies placeholder', () => {
-    const wrapper = mount(DatametriaInput, {
-      props: { placeholder: 'Enter text' }
-    })
-    expect(wrapper.find('input').attributes('placeholder')).toBe('Enter text')
-  })
-
-  it('uses CSS variables with fallbacks', () => {
-    const wrapper = mount(DatametriaInput)
-    const styles = wrapper.find('.datametria-input').attributes('style')
-    expect(wrapper.html()).toContain('datametria-input')
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaInput from '../DatametriaInput.vue'
+
+describe('DatametriaInput', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaInput)
+    expect(wrapper.find('.datametria-input').exists()).toBe(true)
+  })
+
+  it('renders label when provided', () => {
+    const wrapper = mount(DatametriaInput, {
+      props: { label: 'Test Label' }
+    })
+    expect(wrapper.find('.datametria-input__label').text()).toContain('Test Label')
+  })
+
+  it('shows required asterisk when required', () => {
+    const wrapper = mount(DatametriaInput, {
+      props: { label: 'Test', required: true }
+    })
+    expect(wrapper.find('.datametria-input__required').exists()).toBe(true)
+  })
+
+  it('binds modelValue correctly', () => {
+    const wrapper = mount(DatametriaInput, {
+      props: { modelValue: 'test value' }
+    })
+    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('test value')
+  })
+
+  it('emits update:modelValue on input', async () => {
+    const wrapper = mount(DatametriaInput)
+    const input = wrapper.find('input')
+    await input.setValue('new value')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new value'])
+  })
+
+  it('applies disabled state', () => {
+    const wrapper = mount(DatametriaInput, {
+      props: { disabled: true }
+    })
+    expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+  })
+
+  it('shows error message when provided', () => {
+    const wrapper = mount(DatametriaInput, {
+      props: { errorMessage: 'Error text' }
+    })
+    expect(wrapper.find('.datametria-input__error').text()).toBe('Error text')
+  })
+
+  it('applies error class when error exists', () => {
+    const wrapper = mount(DatametriaInput, {
+      props: { errorMessage: 'Error' }
+    })
+    expect(wrapper.find('.datametria-input__field--error').exists()).toBe(true)
+  })
+
+  it('applies placeholder', () => {
+    const wrapper = mount(DatametriaInput, {
+      props: { placeholder: 'Enter text' }
+    })
+    expect(wrapper.find('input').attributes('placeholder')).toBe('Enter text')
+  })
+
+  it('uses CSS variables with fallbacks', () => {
+    const wrapper = mount(DatametriaInput)
+    const styles = wrapper.find('.datametria-input').attributes('style')
+    expect(wrapper.html()).toContain('datametria-input')
+  })
+})