@datametria/vue-components 2.3.0 → 2.4.0

package/src/theme/ThemeProvider.vue

@@ -1,96 +1,96 @@
-<!--
-  Theme Provider Component
-  @author Vander Loto - CTO DATAMETRIA
-  @date 13/11/2025
--->
-
-<template>
-  <div :class="themeClass" :style="cssVariables">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, provide } from 'vue'
-import type { Theme } from './types'
-import { THEME_INJECTION_KEY, DEFAULT_THEME_PREFIX, CSS_VARIABLE_PREFIX } from './constants'
-
-interface Props {
-  theme: Theme
-  prefix?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  prefix: DEFAULT_THEME_PREFIX
-})
-
-// Provide theme to child components
-const themeRef = computed(() => props.theme)
-provide(THEME_INJECTION_KEY, themeRef)
-
-const themeClass = computed(() => `${props.prefix}-theme`)
-
-const cssVariables = computed(() => {
-  const vars: Record<string, string> = {}
-  const { tokens } = props.theme
-  const prefix = `${CSS_VARIABLE_PREFIX}${props.prefix}`
-
-  // Colors
-  vars[`${prefix}-primary`] = tokens.colors.primary
-  vars[`${prefix}-secondary`] = tokens.colors.secondary
-  vars[`${prefix}-success`] = tokens.colors.success
-  vars[`${prefix}-warning`] = tokens.colors.warning
-  vars[`${prefix}-error`] = tokens.colors.error
-  vars[`${prefix}-info`] = tokens.colors.info
-
-  // Neutral colors
-  Object.entries(tokens.colors.neutral).forEach(([key, value]) => {
-    vars[`${prefix}-neutral-${key}`] = value
-  })
-
-  // Typography - Font Family
-  vars[`${prefix}-font-sans`] = tokens.typography.fontFamily.sans
-  vars[`${prefix}-font-mono`] = tokens.typography.fontFamily.mono
-
-  // Typography - Font Size
-  Object.entries(tokens.typography.fontSize).forEach(([key, value]) => {
-    vars[`${prefix}-text-${key}`] = value
-  })
-
-  // Typography - Font Weight
-  Object.entries(tokens.typography.fontWeight).forEach(([key, value]) => {
-    vars[`${prefix}-font-${key}`] = value.toString()
-  })
-
-  // Typography - Line Height
-  Object.entries(tokens.typography.lineHeight).forEach(([key, value]) => {
-    vars[`${prefix}-leading-${key}`] = value.toString()
-  })
-
-  // Spacing
-  Object.entries(tokens.spacing).forEach(([key, value]) => {
-    vars[`${prefix}-space-${key}`] = value
-  })
-
-  // Radius
-  Object.entries(tokens.radius).forEach(([key, value]) => {
-    vars[`${prefix}-radius-${key}`] = value
-  })
-
-  // Shadows
-  Object.entries(tokens.shadows).forEach(([key, value]) => {
-    vars[`${prefix}-shadow-${key}`] = value
-  })
-
-  // Transitions
-  Object.entries(tokens.transitions).forEach(([key, value]) => {
-    vars[`${prefix}-transition-${key}`] = value
-  })
-
-  return vars
-})
-</script>
-
-<style scoped>
-/* Theme container - no additional styles needed */
-</style>
+<!--
+  Theme Provider Component
+  @author Vander Loto - CTO DATAMETRIA
+  @date 13/11/2025
+-->
+
+<template>
+  <div :class="themeClass" :style="cssVariables">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import type { Theme } from './types'
+import { THEME_INJECTION_KEY, DEFAULT_THEME_PREFIX, CSS_VARIABLE_PREFIX } from './constants'
+
+interface Props {
+  theme: Theme
+  prefix?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  prefix: DEFAULT_THEME_PREFIX
+})
+
+// Provide theme to child components
+const themeRef = computed(() => props.theme)
+provide(THEME_INJECTION_KEY, themeRef)
+
+const themeClass = computed(() => `${props.prefix}-theme`)
+
+const cssVariables = computed(() => {
+  const vars: Record<string, string> = {}
+  const { tokens } = props.theme
+  const prefix = `${CSS_VARIABLE_PREFIX}${props.prefix}`
+
+  // Colors
+  vars[`${prefix}-primary`] = tokens.colors.primary
+  vars[`${prefix}-secondary`] = tokens.colors.secondary
+  vars[`${prefix}-success`] = tokens.colors.success
+  vars[`${prefix}-warning`] = tokens.colors.warning
+  vars[`${prefix}-error`] = tokens.colors.error
+  vars[`${prefix}-info`] = tokens.colors.info
+
+  // Neutral colors
+  Object.entries(tokens.colors.neutral).forEach(([key, value]) => {
+    vars[`${prefix}-neutral-${key}`] = value
+  })
+
+  // Typography - Font Family
+  vars[`${prefix}-font-sans`] = tokens.typography.fontFamily.sans
+  vars[`${prefix}-font-mono`] = tokens.typography.fontFamily.mono
+
+  // Typography - Font Size
+  Object.entries(tokens.typography.fontSize).forEach(([key, value]) => {
+    vars[`${prefix}-text-${key}`] = value
+  })
+
+  // Typography - Font Weight
+  Object.entries(tokens.typography.fontWeight).forEach(([key, value]) => {
+    vars[`${prefix}-font-${key}`] = value.toString()
+  })
+
+  // Typography - Line Height
+  Object.entries(tokens.typography.lineHeight).forEach(([key, value]) => {
+    vars[`${prefix}-leading-${key}`] = value.toString()
+  })
+
+  // Spacing
+  Object.entries(tokens.spacing).forEach(([key, value]) => {
+    vars[`${prefix}-space-${key}`] = value
+  })
+
+  // Radius
+  Object.entries(tokens.radius).forEach(([key, value]) => {
+    vars[`${prefix}-radius-${key}`] = value
+  })
+
+  // Shadows
+  Object.entries(tokens.shadows).forEach(([key, value]) => {
+    vars[`${prefix}-shadow-${key}`] = value
+  })
+
+  // Transitions
+  Object.entries(tokens.transitions).forEach(([key, value]) => {
+    vars[`${prefix}-transition-${key}`] = value
+  })
+
+  return vars
+})
+</script>
+
+<style scoped>
+/* Theme container - no additional styles needed */
+</style>

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

@@ -1,208 +1,208 @@
-/**
- * ThemeProvider 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
-}
-
-const customTheme: Theme = {
-  name: 'Custom Theme',
-  tokens: {
-    ...defaultTokens,
-    colors: {
-      ...defaultTokens.colors,
-      primary: '#FF0000',
-      secondary: '#00FF00'
-    }
-  }
-}
-
-describe('ThemeProvider', () => {
-  it('should render children', () => {
-    const wrapper = mount(ThemeProvider, {
-      props: { theme: testTheme },
-      slots: {
-        default: '<div class="test-child">Child Content</div>'
-      }
-    })
-
-    expect(wrapper.text()).toContain('Child Content')
-    expect(wrapper.find('.test-child').exists()).toBe(true)
-  })
-
-  it('should apply default theme class', () => {
-    const wrapper = mount(ThemeProvider, {
-      props: { theme: testTheme },
-      slots: { default: '<div>Content</div>' }
-    })
-
-    expect(wrapper.classes()).toContain('dm-theme')
-  })
-
-  it('should apply custom prefix class', () => {
-    const wrapper = mount(ThemeProvider, {
-      props: { theme: testTheme, prefix: 'custom' },
-      slots: { default: '<div>Content</div>' }
-    })
-
-    expect(wrapper.classes()).toContain('custom-theme')
-  })
-
-  it('should generate CSS variables for colors', () => {
-    const wrapper = mount(ThemeProvider, {
-      props: { theme: testTheme },
-      slots: { default: '<div>Content</div>' }
-    })
-
-    const style = wrapper.attributes('style')
-    expect(style).toContain('--dm-primary')
-    expect(style).toContain('#0072CE')
-    expect(style).toContain('--dm-secondary')
-    expect(style).toContain('#4B0078')
-  })
-
-  it('should generate CSS variables for neutral colors', () => {
-    const wrapper = mount(ThemeProvider, {
-      props: { theme: testTheme },
-      slots: { default: '<div>Content</div>' }
-    })
-
-    const style = wrapper.attributes('style')
-    expect(style).toContain('--dm-neutral-50')
-    expect(style).toContain('--dm-neutral-900')
-  })
-
-  it('should generate CSS variables for typography', () => {
-    const wrapper = mount(ThemeProvider, {
-      props: { theme: testTheme },
-      slots: { default: '<div>Content</div>' }
-    })
-
-    const style = wrapper.attributes('style')
-    expect(style).toContain('--dm-font-sans')
-    expect(style).toContain('--dm-text-base')
-    expect(style).toContain('--dm-font-bold')
-  })
-
-  it('should generate CSS variables for spacing', () => {
-    const wrapper = mount(ThemeProvider, {
-      props: { theme: testTheme },
-      slots: { default: '<div>Content</div>' }
-    })
-
-    const style = wrapper.attributes('style')
-    expect(style).toContain('--dm-space-4')
-    expect(style).toContain('1rem')
-  })
-
-  it('should generate CSS variables for radius', () => {
-    const wrapper = mount(ThemeProvider, {
-      props: { theme: testTheme },
-      slots: { default: '<div>Content</div>' }
-    })
-
-    const style = wrapper.attributes('style')
-    expect(style).toContain('--dm-radius-md')
-  })
-
-  it('should generate CSS variables for shadows', () => {
-    const wrapper = mount(ThemeProvider, {
-      props: { theme: testTheme },
-      slots: { default: '<div>Content</div>' }
-    })
-
-    const style = wrapper.attributes('style')
-    expect(style).toContain('--dm-shadow-md')
-  })
-
-  it('should generate CSS variables for transitions', () => {
-    const wrapper = mount(ThemeProvider, {
-      props: { theme: testTheme },
-      slots: { default: '<div>Content</div>' }
-    })
-
-    const style = wrapper.attributes('style')
-    expect(style).toContain('--dm-transition-base')
-  })
-
-  it('should use custom prefix for CSS variables', () => {
-    const wrapper = mount(ThemeProvider, {
-      props: { theme: testTheme, prefix: 'custom' },
-      slots: { default: '<div>Content</div>' }
-    })
-
-    const style = wrapper.attributes('style')
-    expect(style).toContain('--custom-primary')
-    expect(style).not.toContain('--dm-primary')
-  })
-
-  it('should update CSS variables when theme changes', async () => {
-    const wrapper = mount(ThemeProvider, {
-      props: { theme: testTheme },
-      slots: { default: '<div>Content</div>' }
-    })
-
-    let style = wrapper.attributes('style')
-    expect(style).toContain('#0072CE')
-
-    await wrapper.setProps({ theme: customTheme })
-
-    style = wrapper.attributes('style')
-    expect(style).toContain('#FF0000')
-  })
-
-  it('should provide theme to child components', () => {
-    const ChildComponent = {
-      setup() {
-        const theme = useTheme()
-        return () => h('div', { class: 'child' }, theme.value.name)
-      }
-    }
-
-    const wrapper = mount(ThemeProvider, {
-      props: { theme: testTheme },
-      slots: {
-        default: h(ChildComponent)
-      }
-    })
-
-    expect(wrapper.text()).toContain('Test Theme')
-  })
-
-  it('should provide updated theme when changed', async () => {
-    const ChildComponent = {
-      setup() {
-        const theme = useTheme()
-        return () => h('div', { class: 'child' }, `${theme.value.name}-${theme.value.tokens.colors.primary}`)
-      }
-    }
-
-    const wrapper = mount(ThemeProvider, {
-      props: { theme: testTheme },
-      slots: {
-        default: h(ChildComponent)
-      }
-    })
-
-    expect(wrapper.text()).toContain('Test Theme')
-    expect(wrapper.text()).toContain('#0072CE')
-
-    await wrapper.setProps({ theme: customTheme })
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.text()).toContain('Custom Theme')
-    expect(wrapper.text()).toContain('#FF0000')
-  })
-})
+/**
+ * ThemeProvider 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
+}
+
+const customTheme: Theme = {
+  name: 'Custom Theme',
+  tokens: {
+    ...defaultTokens,
+    colors: {
+      ...defaultTokens.colors,
+      primary: '#FF0000',
+      secondary: '#00FF00'
+    }
+  }
+}
+
+describe('ThemeProvider', () => {
+  it('should render children', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: {
+        default: '<div class="test-child">Child Content</div>'
+      }
+    })
+
+    expect(wrapper.text()).toContain('Child Content')
+    expect(wrapper.find('.test-child').exists()).toBe(true)
+  })
+
+  it('should apply default theme class', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    expect(wrapper.classes()).toContain('dm-theme')
+  })
+
+  it('should apply custom prefix class', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme, prefix: 'custom' },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    expect(wrapper.classes()).toContain('custom-theme')
+  })
+
+  it('should generate CSS variables for colors', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    const style = wrapper.attributes('style')
+    expect(style).toContain('--dm-primary')
+    expect(style).toContain('#0072CE')
+    expect(style).toContain('--dm-secondary')
+    expect(style).toContain('#4B0078')
+  })
+
+  it('should generate CSS variables for neutral colors', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    const style = wrapper.attributes('style')
+    expect(style).toContain('--dm-neutral-50')
+    expect(style).toContain('--dm-neutral-900')
+  })
+
+  it('should generate CSS variables for typography', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    const style = wrapper.attributes('style')
+    expect(style).toContain('--dm-font-sans')
+    expect(style).toContain('--dm-text-base')
+    expect(style).toContain('--dm-font-bold')
+  })
+
+  it('should generate CSS variables for spacing', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    const style = wrapper.attributes('style')
+    expect(style).toContain('--dm-space-4')
+    expect(style).toContain('1rem')
+  })
+
+  it('should generate CSS variables for radius', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    const style = wrapper.attributes('style')
+    expect(style).toContain('--dm-radius-md')
+  })
+
+  it('should generate CSS variables for shadows', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    const style = wrapper.attributes('style')
+    expect(style).toContain('--dm-shadow-md')
+  })
+
+  it('should generate CSS variables for transitions', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    const style = wrapper.attributes('style')
+    expect(style).toContain('--dm-transition-base')
+  })
+
+  it('should use custom prefix for CSS variables', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme, prefix: 'custom' },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    const style = wrapper.attributes('style')
+    expect(style).toContain('--custom-primary')
+    expect(style).not.toContain('--dm-primary')
+  })
+
+  it('should update CSS variables when theme changes', async () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    let style = wrapper.attributes('style')
+    expect(style).toContain('#0072CE')
+
+    await wrapper.setProps({ theme: customTheme })
+
+    style = wrapper.attributes('style')
+    expect(style).toContain('#FF0000')
+  })
+
+  it('should provide theme to child components', () => {
+    const ChildComponent = {
+      setup() {
+        const theme = useTheme()
+        return () => h('div', { class: 'child' }, theme.value.name)
+      }
+    }
+
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: {
+        default: h(ChildComponent)
+      }
+    })
+
+    expect(wrapper.text()).toContain('Test Theme')
+  })
+
+  it('should provide updated theme when changed', async () => {
+    const ChildComponent = {
+      setup() {
+        const theme = useTheme()
+        return () => h('div', { class: 'child' }, `${theme.value.name}-${theme.value.tokens.colors.primary}`)
+      }
+    }
+
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: {
+        default: h(ChildComponent)
+      }
+    })
+
+    expect(wrapper.text()).toContain('Test Theme')
+    expect(wrapper.text()).toContain('#0072CE')
+
+    await wrapper.setProps({ theme: customTheme })
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('Custom Theme')
+    expect(wrapper.text()).toContain('#FF0000')
+  })
+})

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

@@ -1,31 +1,31 @@
-/**
- * Theme Constants Tests
- * @author Vander Loto - CTO DATAMETRIA
- * @date 13/11/2025
- */
-
-import { describe, it, expect } from 'vitest'
-import { THEME_INJECTION_KEY, DEFAULT_THEME_PREFIX, CSS_VARIABLE_PREFIX } from '../constants'
-
-describe('Theme Constants', () => {
-  it('should have THEME_INJECTION_KEY as Symbol', () => {
-    expect(typeof THEME_INJECTION_KEY).toBe('symbol')
-    expect(THEME_INJECTION_KEY.toString()).toContain('theme')
-  })
-
-  it('should have DEFAULT_THEME_PREFIX', () => {
-    expect(DEFAULT_THEME_PREFIX).toBe('dm')
-    expect(typeof DEFAULT_THEME_PREFIX).toBe('string')
-  })
-
-  it('should have CSS_VARIABLE_PREFIX', () => {
-    expect(CSS_VARIABLE_PREFIX).toBe('--')
-    expect(typeof CSS_VARIABLE_PREFIX).toBe('string')
-  })
-
-  it('should have unique injection key', () => {
-    const key1 = THEME_INJECTION_KEY
-    const key2 = Symbol('theme')
-    expect(key1).not.toBe(key2)
-  })
-})
+/**
+ * Theme Constants Tests
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+
+import { describe, it, expect } from 'vitest'
+import { THEME_INJECTION_KEY, DEFAULT_THEME_PREFIX, CSS_VARIABLE_PREFIX } from '../constants'
+
+describe('Theme Constants', () => {
+  it('should have THEME_INJECTION_KEY as Symbol', () => {
+    expect(typeof THEME_INJECTION_KEY).toBe('symbol')
+    expect(THEME_INJECTION_KEY.toString()).toContain('theme')
+  })
+
+  it('should have DEFAULT_THEME_PREFIX', () => {
+    expect(DEFAULT_THEME_PREFIX).toBe('dm')
+    expect(typeof DEFAULT_THEME_PREFIX).toBe('string')
+  })
+
+  it('should have CSS_VARIABLE_PREFIX', () => {
+    expect(CSS_VARIABLE_PREFIX).toBe('--')
+    expect(typeof CSS_VARIABLE_PREFIX).toBe('string')
+  })
+
+  it('should have unique injection key', () => {
+    const key1 = THEME_INJECTION_KEY
+    const key2 = Symbol('theme')
+    expect(key1).not.toBe(key2)
+  })
+})