@datametria/vue-components 2.3.1 → 2.4.0

package/src/theme/__tests__/types.test.ts

@@ -1,153 +1,153 @@
-/**
- * Theme Types Tests
- * @author Vander Loto - CTO DATAMETRIA
- * @date 13/11/2025
- */
-
-import { describe, it, expect } from 'vitest'
-import type { Theme, ThemeTokens, ColorTokens, TypographyTokens } from '../types'
-
-describe('Theme Types', () => {
-  it('should validate ColorTokens structure', () => {
-    const colors: ColorTokens = {
-      primary: '#0072CE',
-      secondary: '#4B0078',
-      success: '#10b981',
-      warning: '#f59e0b',
-      error: '#ef4444',
-      info: '#06b6d4',
-      neutral: {
-        50: '#f9fafb',
-        100: '#f3f4f6',
-        200: '#e5e7eb',
-        300: '#d1d5db',
-        400: '#9ca3af',
-        500: '#6b7280',
-        600: '#4b5563',
-        700: '#374151',
-        800: '#1f2937',
-        900: '#111827'
-      }
-    }
-
-    expect(colors.primary).toBe('#0072CE')
-    expect(colors.neutral[50]).toBe('#f9fafb')
-    expect(colors.neutral[900]).toBe('#111827')
-  })
-
-  it('should validate TypographyTokens structure', () => {
-    const typography: TypographyTokens = {
-      fontFamily: {
-        sans: 'Arial, sans-serif',
-        mono: 'Courier, monospace'
-      },
-      fontSize: {
-        xs: '0.75rem',
-        sm: '0.875rem',
-        base: '1rem',
-        lg: '1.125rem',
-        xl: '1.25rem',
-        '2xl': '1.5rem',
-        '3xl': '1.875rem',
-        '4xl': '2.25rem'
-      },
-      fontWeight: {
-        normal: 400,
-        medium: 500,
-        semibold: 600,
-        bold: 700
-      },
-      lineHeight: {
-        tight: 1.25,
-        normal: 1.5,
-        relaxed: 1.75
-      }
-    }
-
-    expect(typography.fontFamily.sans).toBe('Arial, sans-serif')
-    expect(typography.fontSize.base).toBe('1rem')
-    expect(typography.fontWeight.bold).toBe(700)
-    expect(typography.lineHeight.normal).toBe(1.5)
-  })
-
-  it('should validate Theme structure', () => {
-    const theme: Theme = {
-      name: 'Test Theme',
-      tokens: {
-        colors: {
-          primary: '#000',
-          secondary: '#fff',
-          success: '#0f0',
-          warning: '#ff0',
-          error: '#f00',
-          info: '#00f',
-          neutral: {
-            50: '#f9fafb',
-            100: '#f3f4f6',
-            200: '#e5e7eb',
-            300: '#d1d5db',
-            400: '#9ca3af',
-            500: '#6b7280',
-            600: '#4b5563',
-            700: '#374151',
-            800: '#1f2937',
-            900: '#111827'
-          }
-        },
-        typography: {
-          fontFamily: { sans: 'Arial', mono: 'Courier' },
-          fontSize: {
-            xs: '0.75rem',
-            sm: '0.875rem',
-            base: '1rem',
-            lg: '1.125rem',
-            xl: '1.25rem',
-            '2xl': '1.5rem',
-            '3xl': '1.875rem',
-            '4xl': '2.25rem'
-          },
-          fontWeight: { normal: 400, medium: 500, semibold: 600, bold: 700 },
-          lineHeight: { tight: 1.25, normal: 1.5, relaxed: 1.75 }
-        },
-        spacing: {
-          0: '0',
-          1: '0.25rem',
-          2: '0.5rem',
-          3: '0.75rem',
-          4: '1rem',
-          6: '1.5rem',
-          8: '2rem',
-          12: '3rem',
-          16: '4rem',
-          20: '5rem',
-          24: '6rem'
-        },
-        radius: {
-          none: '0',
-          sm: '0.25rem',
-          md: '0.375rem',
-          lg: '0.5rem',
-          xl: '0.75rem',
-          full: '9999px'
-        },
-        shadows: {
-          none: 'none',
-          sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-          md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
-          lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
-          xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
-          '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)'
-        },
-        transitions: {
-          fast: '150ms',
-          base: '200ms',
-          slow: '300ms'
-        }
-      }
-    }
-
-    expect(theme.name).toBe('Test Theme')
-    expect(theme.tokens.colors.primary).toBe('#000')
-    expect(theme.tokens.spacing[4]).toBe('1rem')
-  })
-})
+/**
+ * Theme Types Tests
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+
+import { describe, it, expect } from 'vitest'
+import type { Theme, ThemeTokens, ColorTokens, TypographyTokens } from '../types'
+
+describe('Theme Types', () => {
+  it('should validate ColorTokens structure', () => {
+    const colors: ColorTokens = {
+      primary: '#0072CE',
+      secondary: '#4B0078',
+      success: '#10b981',
+      warning: '#f59e0b',
+      error: '#ef4444',
+      info: '#06b6d4',
+      neutral: {
+        50: '#f9fafb',
+        100: '#f3f4f6',
+        200: '#e5e7eb',
+        300: '#d1d5db',
+        400: '#9ca3af',
+        500: '#6b7280',
+        600: '#4b5563',
+        700: '#374151',
+        800: '#1f2937',
+        900: '#111827'
+      }
+    }
+
+    expect(colors.primary).toBe('#0072CE')
+    expect(colors.neutral[50]).toBe('#f9fafb')
+    expect(colors.neutral[900]).toBe('#111827')
+  })
+
+  it('should validate TypographyTokens structure', () => {
+    const typography: TypographyTokens = {
+      fontFamily: {
+        sans: 'Arial, sans-serif',
+        mono: 'Courier, monospace'
+      },
+      fontSize: {
+        xs: '0.75rem',
+        sm: '0.875rem',
+        base: '1rem',
+        lg: '1.125rem',
+        xl: '1.25rem',
+        '2xl': '1.5rem',
+        '3xl': '1.875rem',
+        '4xl': '2.25rem'
+      },
+      fontWeight: {
+        normal: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700
+      },
+      lineHeight: {
+        tight: 1.25,
+        normal: 1.5,
+        relaxed: 1.75
+      }
+    }
+
+    expect(typography.fontFamily.sans).toBe('Arial, sans-serif')
+    expect(typography.fontSize.base).toBe('1rem')
+    expect(typography.fontWeight.bold).toBe(700)
+    expect(typography.lineHeight.normal).toBe(1.5)
+  })
+
+  it('should validate Theme structure', () => {
+    const theme: Theme = {
+      name: 'Test Theme',
+      tokens: {
+        colors: {
+          primary: '#000',
+          secondary: '#fff',
+          success: '#0f0',
+          warning: '#ff0',
+          error: '#f00',
+          info: '#00f',
+          neutral: {
+            50: '#f9fafb',
+            100: '#f3f4f6',
+            200: '#e5e7eb',
+            300: '#d1d5db',
+            400: '#9ca3af',
+            500: '#6b7280',
+            600: '#4b5563',
+            700: '#374151',
+            800: '#1f2937',
+            900: '#111827'
+          }
+        },
+        typography: {
+          fontFamily: { sans: 'Arial', mono: 'Courier' },
+          fontSize: {
+            xs: '0.75rem',
+            sm: '0.875rem',
+            base: '1rem',
+            lg: '1.125rem',
+            xl: '1.25rem',
+            '2xl': '1.5rem',
+            '3xl': '1.875rem',
+            '4xl': '2.25rem'
+          },
+          fontWeight: { normal: 400, medium: 500, semibold: 600, bold: 700 },
+          lineHeight: { tight: 1.25, normal: 1.5, relaxed: 1.75 }
+        },
+        spacing: {
+          0: '0',
+          1: '0.25rem',
+          2: '0.5rem',
+          3: '0.75rem',
+          4: '1rem',
+          6: '1.5rem',
+          8: '2rem',
+          12: '3rem',
+          16: '4rem',
+          20: '5rem',
+          24: '6rem'
+        },
+        radius: {
+          none: '0',
+          sm: '0.25rem',
+          md: '0.375rem',
+          lg: '0.5rem',
+          xl: '0.75rem',
+          full: '9999px'
+        },
+        shadows: {
+          none: 'none',
+          sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+          md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+          lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+          xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
+          '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)'
+        },
+        transitions: {
+          fast: '150ms',
+          base: '200ms',
+          slow: '300ms'
+        }
+      }
+    }
+
+    expect(theme.name).toBe('Test Theme')
+    expect(theme.tokens.colors.primary).toBe('#000')
+    expect(theme.tokens.spacing[4]).toBe('1rem')
+  })
+})

package/src/theme/__tests__/useTheme.test.ts

@@ -1,146 +1,146 @@
-/**
- * useTheme Composable Tests
- * @author Vander Loto - CTO DATAMETRIA
- * @date 13/11/2025
- */
-
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import { h } from 'vue'
-import ThemeProvider from '../ThemeProvider.vue'
-import { useTheme } from '../useTheme'
-import { defaultTokens } from '../tokens'
-import type { Theme } from '../types'
-
-const testTheme: Theme = {
-  name: 'Test Theme',
-  tokens: defaultTokens
-}
-
-describe('useTheme', () => {
-  it('should throw error when used outside ThemeProvider', () => {
-    // Suprimir warnings do Vue durante este teste
-    const originalWarn = console.warn
-    console.warn = () => {}
-    
-    expect(() => {
-      const TestComponent = {
-        setup() {
-          useTheme()
-          return () => h('div', 'Test')
-        }
-      }
-      mount(TestComponent)
-    }).toThrow('useTheme must be used within a ThemeProvider')
-    
-    // Restaurar console.warn
-    console.warn = originalWarn
-  })
-
-  it('should return theme when used inside ThemeProvider', () => {
-    const TestComponent = {
-      setup() {
-        const theme = useTheme()
-        expect(theme).toBeDefined()
-        expect(theme.value.name).toBe('Test Theme')
-        return () => h('div', theme.value.name)
-      }
-    }
-
-    const wrapper = mount(ThemeProvider, {
-      props: { theme: testTheme },
-      slots: {
-        default: h(TestComponent)
-      }
-    })
-
-    expect(wrapper.text()).toContain('Test Theme')
-  })
-
-  it('should return theme tokens', () => {
-    const TestComponent = {
-      setup() {
-        const theme = useTheme()
-        expect(theme.value.tokens).toBeDefined()
-        expect(theme.value.tokens.colors.primary).toBe('#0072CE')
-        return () => h('div', 'Test')
-      }
-    }
-
-    mount(ThemeProvider, {
-      props: { theme: testTheme },
-      slots: {
-        default: h(TestComponent)
-      }
-    })
-  })
-
-  it('should access all token categories', () => {
-    const TestComponent = {
-      setup() {
-        const theme = useTheme()
-        expect(theme.value.tokens.colors).toBeDefined()
-        expect(theme.value.tokens.typography).toBeDefined()
-        expect(theme.value.tokens.spacing).toBeDefined()
-        expect(theme.value.tokens.radius).toBeDefined()
-        expect(theme.value.tokens.shadows).toBeDefined()
-        expect(theme.value.tokens.transitions).toBeDefined()
-        return () => h('div', 'Test')
-      }
-    }
-
-    mount(ThemeProvider, {
-      props: { theme: testTheme },
-      slots: {
-        default: h(TestComponent)
-      }
-    })
-  })
-
-  it('should work in nested components', () => {
-    const GrandchildComponent = {
-      setup() {
-        const theme = useTheme()
-        return () => h('div', { class: 'grandchild' }, theme.value.name)
-      }
-    }
-
-    const ChildComponent = {
-      setup() {
-        return () => h('div', { class: 'child' }, h(GrandchildComponent))
-      }
-    }
-
-    const wrapper = mount(ThemeProvider, {
-      props: { theme: testTheme },
-      slots: {
-        default: h(ChildComponent)
-      }
-    })
-
-    expect(wrapper.find('.grandchild').text()).toContain('Test Theme')
-  })
-
-  it('should provide helpful error message', () => {
-    // Suprimir warnings do Vue durante este teste
-    const originalWarn = console.warn
-    console.warn = () => {}
-    
-    try {
-      const TestComponent = {
-        setup() {
-          useTheme()
-          return () => h('div', 'Test')
-        }
-      }
-      mount(TestComponent)
-    } catch (error) {
-      expect(error).toBeInstanceOf(Error)
-      expect((error as Error).message).toContain('ThemeProvider')
-      expect((error as Error).message).toContain('Wrap your component tree')
-    }
-    
-    // Restaurar console.warn
-    console.warn = originalWarn
-  })
-})
+/**
+ * useTheme Composable Tests
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import ThemeProvider from '../ThemeProvider.vue'
+import { useTheme } from '../useTheme'
+import { defaultTokens } from '../tokens'
+import type { Theme } from '../types'
+
+const testTheme: Theme = {
+  name: 'Test Theme',
+  tokens: defaultTokens
+}
+
+describe('useTheme', () => {
+  it('should throw error when used outside ThemeProvider', () => {
+    // Suprimir warnings do Vue durante este teste
+    const originalWarn = console.warn
+    console.warn = () => {}
+    
+    expect(() => {
+      const TestComponent = {
+        setup() {
+          useTheme()
+          return () => h('div', 'Test')
+        }
+      }
+      mount(TestComponent)
+    }).toThrow('useTheme must be used within a ThemeProvider')
+    
+    // Restaurar console.warn
+    console.warn = originalWarn
+  })
+
+  it('should return theme when used inside ThemeProvider', () => {
+    const TestComponent = {
+      setup() {
+        const theme = useTheme()
+        expect(theme).toBeDefined()
+        expect(theme.value.name).toBe('Test Theme')
+        return () => h('div', theme.value.name)
+      }
+    }
+
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: {
+        default: h(TestComponent)
+      }
+    })
+
+    expect(wrapper.text()).toContain('Test Theme')
+  })
+
+  it('should return theme tokens', () => {
+    const TestComponent = {
+      setup() {
+        const theme = useTheme()
+        expect(theme.value.tokens).toBeDefined()
+        expect(theme.value.tokens.colors.primary).toBe('#0072CE')
+        return () => h('div', 'Test')
+      }
+    }
+
+    mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: {
+        default: h(TestComponent)
+      }
+    })
+  })
+
+  it('should access all token categories', () => {
+    const TestComponent = {
+      setup() {
+        const theme = useTheme()
+        expect(theme.value.tokens.colors).toBeDefined()
+        expect(theme.value.tokens.typography).toBeDefined()
+        expect(theme.value.tokens.spacing).toBeDefined()
+        expect(theme.value.tokens.radius).toBeDefined()
+        expect(theme.value.tokens.shadows).toBeDefined()
+        expect(theme.value.tokens.transitions).toBeDefined()
+        return () => h('div', 'Test')
+      }
+    }
+
+    mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: {
+        default: h(TestComponent)
+      }
+    })
+  })
+
+  it('should work in nested components', () => {
+    const GrandchildComponent = {
+      setup() {
+        const theme = useTheme()
+        return () => h('div', { class: 'grandchild' }, theme.value.name)
+      }
+    }
+
+    const ChildComponent = {
+      setup() {
+        return () => h('div', { class: 'child' }, h(GrandchildComponent))
+      }
+    }
+
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: {
+        default: h(ChildComponent)
+      }
+    })
+
+    expect(wrapper.find('.grandchild').text()).toContain('Test Theme')
+  })
+
+  it('should provide helpful error message', () => {
+    // Suprimir warnings do Vue durante este teste
+    const originalWarn = console.warn
+    console.warn = () => {}
+    
+    try {
+      const TestComponent = {
+        setup() {
+          useTheme()
+          return () => h('div', 'Test')
+        }
+      }
+      mount(TestComponent)
+    } catch (error) {
+      expect(error).toBeInstanceOf(Error)
+      expect((error as Error).message).toContain('ThemeProvider')
+      expect((error as Error).message).toContain('Wrap your component tree')
+    }
+    
+    // Restaurar console.warn
+    console.warn = originalWarn
+  })
+})

package/src/theme/constants.ts

@@ -1,14 +1,14 @@
-/**
- * Theme System Constants
- * @author Vander Loto - CTO DATAMETRIA
- * @date 13/11/2025
- */
-
-import type { InjectionKey, ComputedRef } from 'vue'
-import type { Theme } from './types'
-
-export const THEME_INJECTION_KEY: InjectionKey<ComputedRef<Theme>> = Symbol('theme')
-
-export const DEFAULT_THEME_PREFIX = 'dm'
-
-export const CSS_VARIABLE_PREFIX = '--'
+/**
+ * Theme System Constants
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+
+import type { InjectionKey, ComputedRef } from 'vue'
+import type { Theme } from './types'
+
+export const THEME_INJECTION_KEY: InjectionKey<ComputedRef<Theme>> = Symbol('theme')
+
+export const DEFAULT_THEME_PREFIX = 'dm'
+
+export const CSS_VARIABLE_PREFIX = '--'

package/src/theme/index.ts

@@ -1,12 +1,12 @@
-/**
- * Theme System Exports
- * @author Vander Loto - CTO DATAMETRIA
- * @date 13/11/2025
- */
-
-export { default as ThemeProvider } from './ThemeProvider.vue'
-export { useTheme } from './useTheme'
-export * from './types'
-export * from './constants'
-export * from './tokens'
-export * from './presets'
+/**
+ * Theme System Exports
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+
+export { default as ThemeProvider } from './ThemeProvider.vue'
+export { useTheme } from './useTheme'
+export * from './types'
+export * from './constants'
+export * from './tokens'
+export * from './presets'