@datametria/vue-components 1.1.3 → 2.0.1

package/src/composables/useRipple.ts

@@ -1,219 +1,219 @@
-import { ref, onMounted, onUnmounted, watch } from 'vue'
-
-interface RippleOptions {
-  color?: string
-  duration?: number
-  disabled?: boolean
-}
-
-interface RippleEffect {
-  x: number
-  y: number
-  size: number
-  id: string
-}
-
-/**
- * Composable para efeito ripple em elementos clicáveis
- * Implementa Material Design ripple effect com acessibilidade
- */
-export function useRipple(options: RippleOptions = {}) {
-  const {
-    color = 'rgba(255, 255, 255, 0.3)',
-    duration = 600,
-    disabled = false
-  } = options
-
-  const elementRef = ref<HTMLElement>()
-  const ripples = ref<RippleEffect[]>([])
-
-  // Criar elemento ripple DOM
-  const createRipple = (event: MouseEvent | TouchEvent) => {
-    if (disabled || !elementRef.value) return
-
-    const element = elementRef.value
-    const rect = element.getBoundingClientRect()
-    
-    // Calcular posição do clique
-    let clientX: number, clientY: number
-    
-    if (event instanceof MouseEvent) {
-      clientX = event.clientX
-      clientY = event.clientY
-    } else {
-      const touch = event.touches[0] || event.changedTouches[0]
-      clientX = touch.clientX
-      clientY = touch.clientY
-    }
-
-    const x = clientX - rect.left
-    const y = clientY - rect.top
-
-    // Calcular tamanho do ripple (maior dimensão)
-    const size = Math.max(rect.width, rect.height)
-
-    // Criar elemento DOM do ripple
-    const rippleElement = document.createElement('div')
-    rippleElement.className = 'datametria-ripple'
-    rippleElement.style.cssText = `
-      position: absolute;
-      left: ${x - size / 2}px;
-      top: ${y - size / 2}px;
-      width: ${size}px;
-      height: ${size}px;
-      border-radius: 50%;
-      background: ${color};
-      transform: scale(0);
-      animation: ripple-animation ${duration / 1000}s ease-out;
-      pointer-events: none;
-      z-index: 1;
-    `
-
-    element.appendChild(rippleElement)
-
-    // Remover ripple após animação
-    setTimeout(() => {
-      if (rippleElement.parentNode) {
-        rippleElement.parentNode.removeChild(rippleElement)
-      }
-    }, duration)
-  }
-
-  // Event handlers
-  const handleClick = (event: MouseEvent) => {
-    createRipple(event)
-  }
-
-  // Aplicar ripple ao elemento
-  const applyRipple = (element: HTMLElement) => {
-    if (!element) return
-
-    elementRef.value = element
-
-    // Garantir posição relativa para ripples
-    const computedStyle = window.getComputedStyle(element)
-    if (computedStyle.position === 'static') {
-      element.style.position = 'relative'
-    }
-
-    // Garantir overflow hidden
-    element.style.overflow = 'hidden'
-
-    // Adicionar event listeners
-    element.addEventListener('click', handleClick)
-
-    return () => {
-      element.removeEventListener('click', handleClick)
-    }
-  }
-
-  // Remover ripple específico
-  const removeRipple = (id: string) => {
-    const index = ripples.value.findIndex(r => r.id === id)
-    if (index > -1) {
-      ripples.value.splice(index, 1)
-    }
-  }
-
-  // Limpar todos os ripples
-  const clearRipples = () => {
-    ripples.value = []
-  }
-
-  // Cleanup
-  onUnmounted(() => {
-    clearRipples()
-  })
-
-  // Computed styles para ripples
-  const getRippleStyle = (ripple: RippleEffect) => ({
-    position: 'absolute' as const,
-    left: `${ripple.x}px`,
-    top: `${ripple.y}px`,
-    width: `${ripple.size}px`,
-    height: `${ripple.size}px`,
-    borderRadius: '50%',
-    backgroundColor: color,
-    transform: 'scale(0)',
-    animation: `ripple-animation ${duration}ms ease-out`,
-    pointerEvents: 'none' as const,
-    zIndex: 1
-  })
-
-  // CSS para animação (deve ser injetado no head)
-  const injectRippleCSS = () => {
-    const styleId = 'ripple-keyframes'
-    
-    if (document.getElementById(styleId)) return
-
-    const style = document.createElement('style')
-    style.id = styleId
-    style.textContent = `
-      @keyframes ripple-animation {
-        0% {
-          transform: scale(0);
-          opacity: 1;
-        }
-        100% {
-          transform: scale(2);
-          opacity: 0;
-        }
-      }
-      
-      @media (prefers-reduced-motion: reduce) {
-        @keyframes ripple-animation {
-          0%, 100% {
-            transform: scale(0);
-            opacity: 0;
-          }
-        }
-      }
-    `
-    
-    document.head.appendChild(style)
-  }
-
-
-
-  // Método para adicionar efeito ripple ao elemento
-  const addRippleEffect = () => {
-    if (!elementRef.value) return
-    return applyRipple(elementRef.value)
-  }
-
-  // Método para remover efeito ripple do elemento
-  const removeRippleEffect = () => {
-    if (!elementRef.value) return
-    
-    elementRef.value.removeEventListener('click', handleClick)
-  }
-
-  // Injetar CSS na montagem
-  onMounted(() => {
-    injectRippleCSS()
-    
-    // Auto-aplicar se elemento já existe
-    if (elementRef.value) {
-      addRippleEffect()
-    }
-  })
-
-  // Watch para aplicar ripple quando elemento for definido
-  watch(elementRef, (newElement) => {
-    if (newElement) {
-      addRippleEffect()
-    }
-  })
-
-  return {
-    rippleRef: elementRef,
-    ripples,
-    applyRipple,
-    removeRipple,
-    clearRipples,
-    getRippleStyle,
-    createRipple,
-    addRippleEffect,
-    removeRippleEffect
-  }
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+
+interface RippleOptions {
+  color?: string
+  duration?: number
+  disabled?: boolean
+}
+
+interface RippleEffect {
+  x: number
+  y: number
+  size: number
+  id: string
+}
+
+/**
+ * Composable para efeito ripple em elementos clicáveis
+ * Implementa Material Design ripple effect com acessibilidade
+ */
+export function useRipple(options: RippleOptions = {}) {
+  const {
+    color = 'rgba(255, 255, 255, 0.3)',
+    duration = 600,
+    disabled = false
+  } = options
+
+  const elementRef = ref<HTMLElement>()
+  const ripples = ref<RippleEffect[]>([])
+
+  // Criar elemento ripple DOM
+  const createRipple = (event: MouseEvent | TouchEvent) => {
+    if (disabled || !elementRef.value) return
+
+    const element = elementRef.value
+    const rect = element.getBoundingClientRect()
+    
+    // Calcular posição do clique
+    let clientX: number, clientY: number
+    
+    if (event instanceof MouseEvent) {
+      clientX = event.clientX
+      clientY = event.clientY
+    } else {
+      const touch = event.touches[0] || event.changedTouches[0]
+      clientX = touch.clientX
+      clientY = touch.clientY
+    }
+
+    const x = clientX - rect.left
+    const y = clientY - rect.top
+
+    // Calcular tamanho do ripple (maior dimensão)
+    const size = Math.max(rect.width, rect.height)
+
+    // Criar elemento DOM do ripple
+    const rippleElement = document.createElement('div')
+    rippleElement.className = 'datametria-ripple'
+    rippleElement.style.cssText = `
+      position: absolute;
+      left: ${x - size / 2}px;
+      top: ${y - size / 2}px;
+      width: ${size}px;
+      height: ${size}px;
+      border-radius: 50%;
+      background: ${color};
+      transform: scale(0);
+      animation: ripple-animation ${duration / 1000}s ease-out;
+      pointer-events: none;
+      z-index: 1;
+    `
+
+    element.appendChild(rippleElement)
+
+    // Remover ripple após animação
+    setTimeout(() => {
+      if (rippleElement.parentNode) {
+        rippleElement.parentNode.removeChild(rippleElement)
+      }
+    }, duration)
+  }
+
+  // Event handlers
+  const handleClick = (event: MouseEvent) => {
+    createRipple(event)
+  }
+
+  // Aplicar ripple ao elemento
+  const applyRipple = (element: HTMLElement) => {
+    if (!element) return
+
+    elementRef.value = element
+
+    // Garantir posição relativa para ripples
+    const computedStyle = window.getComputedStyle(element)
+    if (computedStyle.position === 'static') {
+      element.style.position = 'relative'
+    }
+
+    // Garantir overflow hidden
+    element.style.overflow = 'hidden'
+
+    // Adicionar event listeners
+    element.addEventListener('click', handleClick)
+
+    return () => {
+      element.removeEventListener('click', handleClick)
+    }
+  }
+
+  // Remover ripple específico
+  const removeRipple = (id: string) => {
+    const index = ripples.value.findIndex(r => r.id === id)
+    if (index > -1) {
+      ripples.value.splice(index, 1)
+    }
+  }
+
+  // Limpar todos os ripples
+  const clearRipples = () => {
+    ripples.value = []
+  }
+
+  // Cleanup
+  onUnmounted(() => {
+    clearRipples()
+  })
+
+  // Computed styles para ripples
+  const getRippleStyle = (ripple: RippleEffect) => ({
+    position: 'absolute' as const,
+    left: `${ripple.x}px`,
+    top: `${ripple.y}px`,
+    width: `${ripple.size}px`,
+    height: `${ripple.size}px`,
+    borderRadius: '50%',
+    backgroundColor: color,
+    transform: 'scale(0)',
+    animation: `ripple-animation ${duration}ms ease-out`,
+    pointerEvents: 'none' as const,
+    zIndex: 1
+  })
+
+  // CSS para animação (deve ser injetado no head)
+  const injectRippleCSS = () => {
+    const styleId = 'ripple-keyframes'
+    
+    if (document.getElementById(styleId)) return
+
+    const style = document.createElement('style')
+    style.id = styleId
+    style.textContent = `
+      @keyframes ripple-animation {
+        0% {
+          transform: scale(0);
+          opacity: 1;
+        }
+        100% {
+          transform: scale(2);
+          opacity: 0;
+        }
+      }
+      
+      @media (prefers-reduced-motion: reduce) {
+        @keyframes ripple-animation {
+          0%, 100% {
+            transform: scale(0);
+            opacity: 0;
+          }
+        }
+      }
+    `
+    
+    document.head.appendChild(style)
+  }
+
+
+
+  // Método para adicionar efeito ripple ao elemento
+  const addRippleEffect = () => {
+    if (!elementRef.value) return
+    return applyRipple(elementRef.value)
+  }
+
+  // Método para remover efeito ripple do elemento
+  const removeRippleEffect = () => {
+    if (!elementRef.value) return
+    
+    elementRef.value.removeEventListener('click', handleClick)
+  }
+
+  // Injetar CSS na montagem
+  onMounted(() => {
+    injectRippleCSS()
+    
+    // Auto-aplicar se elemento já existe
+    if (elementRef.value) {
+      addRippleEffect()
+    }
+  })
+
+  // Watch para aplicar ripple quando elemento for definido
+  watch(elementRef, (newElement) => {
+    if (newElement) {
+      addRippleEffect()
+    }
+  })
+
+  return {
+    rippleRef: elementRef,
+    ripples,
+    applyRipple,
+    removeRipple,
+    clearRipples,
+    getRippleStyle,
+    createRipple,
+    addRippleEffect,
+    removeRippleEffect
+  }
 }

package/src/index.ts

@@ -1,61 +1,68 @@
-// Components - Form
-export { default as DatametriaButton } from './components/DatametriaButton.vue'
-export { default as DatametriaInput } from './components/DatametriaInput.vue'
-export { default as DatametriaSelect } from './components/DatametriaSelect.vue'
-export { default as DatametriaCheckbox } from './components/DatametriaCheckbox.vue'
-export { default as DatametriaRadio } from './components/DatametriaRadio.vue'
-export { default as DatametriaSwitch } from './components/DatametriaSwitch.vue'
-export { default as DatametriaTextarea } from './components/DatametriaTextarea.vue'
-export { default as DatametriaDatePicker } from './components/DatametriaDatePicker.vue'
-export { default as DatametriaTimePicker } from './components/DatametriaTimePicker.vue'
-export { default as DatametriaSlider } from './components/DatametriaSlider.vue'
-export { default as DatametriaFileUpload } from './components/DatametriaFileUpload.vue'
-export { default as DatametriaAutocomplete } from './components/DatametriaAutocomplete.vue'
-
-// Components - Layout
-export { default as DatametriaCard } from './components/DatametriaCard.vue'
-export { default as DatametriaModal } from './components/DatametriaModal.vue'
-export { default as DatametriaContainer } from './components/DatametriaContainer.vue'
-export { default as DatametriaGrid } from './components/DatametriaGrid.vue'
-export { default as DatametriaDivider } from './components/DatametriaDivider.vue'
-
-// Components - Feedback
-export { default as DatametriaAlert } from './components/DatametriaAlert.vue'
-export { default as DatametriaToast } from './components/DatametriaToast.vue'
-export { default as DatametriaTooltip } from './components/DatametriaTooltip.vue'
-export { default as DatametriaSkeleton } from './components/DatametriaSkeleton.vue'
-export { default as DatametriaProgress } from './components/DatametriaProgress.vue'
-export { default as DatametriaSpinner } from './components/DatametriaSpinner.vue'
-
-// Components - Data Display
-export { default as DatametriaTable } from './components/DatametriaTable.vue'
-export { default as DatametriaAvatar } from './components/DatametriaAvatar.vue'
-export { default as DatametriaBadge } from './components/DatametriaBadge.vue'
-export { default as DatametriaChip } from './components/DatametriaChip.vue'
-
-// Components - Navigation
-export { default as DatametriaNavbar } from './components/DatametriaNavbar.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'
-
-// Composables - Core
-export { useTheme } from './composables/useTheme'
-export { useValidation, required, email, minLength, maxLength, pattern, custom } from './composables/useValidation'
-export { useAPI } from './composables/useAPI'
-
-// Composables - Utility
-export { useAccessibilityScale } from './composables/useAccessibilityScale'
-export { useBreakpoints } from './composables/useBreakpoints'
-export { useRipple } from './composables/useRipple'
-export { useHapticFeedback } from './composables/useHapticFeedback'
-export { useLocalStorage } from './composables/useLocalStorage'
-export { useDebounce } from './composables/useDebounce'
-export { useClipboard } from './composables/useClipboard'
-
-// Types
-export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'outline'
-export type ButtonSize = 'sm' | 'md' | 'lg'
-export type AlertVariant = 'info' | 'success' | 'warning' | 'error'
-export type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info'
-export type BadgeSize = 'sm' | 'md' | 'lg'
+// Components - Form
+export { default as DatametriaButton } from './components/DatametriaButton.vue'
+export { default as DatametriaInput } from './components/DatametriaInput.vue'
+export { default as DatametriaPasswordInput } from './components/DatametriaPasswordInput.vue'
+export { default as DatametriaSelect } from './components/DatametriaSelect.vue'
+export { default as DatametriaCheckbox } from './components/DatametriaCheckbox.vue'
+export { default as DatametriaRadio } from './components/DatametriaRadio.vue'
+export { default as DatametriaSwitch } from './components/DatametriaSwitch.vue'
+export { default as DatametriaTextarea } from './components/DatametriaTextarea.vue'
+export { default as DatametriaDatePicker } from './components/DatametriaDatePicker.vue'
+export { default as DatametriaTimePicker } from './components/DatametriaTimePicker.vue'
+export { default as DatametriaSlider } from './components/DatametriaSlider.vue'
+export { default as DatametriaFileUpload } from './components/DatametriaFileUpload.vue'
+export { default as DatametriaAutocomplete } from './components/DatametriaAutocomplete.vue'
+
+// Components - Layout
+export { default as DatametriaCard } from './components/DatametriaCard.vue'
+export { default as DatametriaModal } from './components/DatametriaModal.vue'
+export { default as DatametriaContainer } from './components/DatametriaContainer.vue'
+export { default as DatametriaGrid } from './components/DatametriaGrid.vue'
+export { default as DatametriaDivider } from './components/DatametriaDivider.vue'
+
+// Components - Feedback
+export { default as DatametriaAlert } from './components/DatametriaAlert.vue'
+export { default as DatametriaToast } from './components/DatametriaToast.vue'
+export { default as DatametriaTooltip } from './components/DatametriaTooltip.vue'
+export { default as DatametriaSkeleton } from './components/DatametriaSkeleton.vue'
+export { default as DatametriaProgress } from './components/DatametriaProgress.vue'
+export { default as DatametriaSpinner } from './components/DatametriaSpinner.vue'
+
+// Components - Data Display
+export { default as DatametriaTable } from './components/DatametriaTable.vue'
+export { default as DatametriaSortableTable } from './components/DatametriaSortableTable.vue'
+export { default as DatametriaAvatar } from './components/DatametriaAvatar.vue'
+export { default as DatametriaBadge } from './components/DatametriaBadge.vue'
+export { default as DatametriaChip } from './components/DatametriaChip.vue'
+
+// Components - Navigation
+export { default as DatametriaNavbar } from './components/DatametriaNavbar.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'
+
+// Composables - Core
+export { useValidation, required, email, minLength, maxLength, pattern, custom } from './composables/useValidation'
+export { useAPI } from './composables/useAPI'
+
+// Composables - Utility
+export { useAccessibilityScale } from './composables/useAccessibilityScale'
+export { useBreakpoints } from './composables/useBreakpoints'
+export { useRipple } from './composables/useRipple'
+export { useHapticFeedback } from './composables/useHapticFeedback'
+export { useLocalStorage } from './composables/useLocalStorage'
+export { useDebounce } from './composables/useDebounce'
+export { useClipboard } from './composables/useClipboard'
+
+// Theming System (v2.0)
+export { default as ThemeProvider } from './theme/ThemeProvider.vue'
+export { useTheme } from './theme/useTheme'
+export { datametriaTheme, defaultTheme } from './theme/presets'
+export type { Theme, ThemeTokens } from './theme/types'
+
+// Types
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'outline'
+export type ButtonSize = 'sm' | 'md' | 'lg'
+export type AlertVariant = 'info' | 'success' | 'warning' | 'error'
+export type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info'
+export type BadgeSize = 'sm' | 'md' | 'lg'

package/src/stories/Variants.stories.js

@@ -0,0 +1,96 @@
+import DatametriaButton from '../components/DatametriaButton.vue'
+import DatametriaAlert from '../components/DatametriaAlert.vue'
+import DatametriaBadge from '../components/DatametriaBadge.vue'
+import DatametriaChip from '../components/DatametriaChip.vue'
+import DatametriaToast from '../components/DatametriaToast.vue'
+import DatametriaNavbar from '../components/DatametriaNavbar.vue'
+
+export default {
+  title: 'Design System/Variants',
+  parameters: {
+    docs: {
+      description: {
+        component: 'Showcase of all component variants with primary variant standardization'
+      }
+    }
+  }
+}
+
+export const AllVariants = () => ({
+  components: {
+    DatametriaButton,
+    DatametriaAlert,
+    DatametriaBadge,
+    DatametriaChip,
+    DatametriaToast,
+    DatametriaNavbar
+  },
+  template: `
+    <div style="padding: 2rem; space-y: 2rem;">
+      <section>
+        <h2>Button Variants</h2>
+        <div style="display: flex; gap: 1rem; margin: 1rem 0;">
+          <DatametriaButton variant="primary">Primary</DatametriaButton>
+          <DatametriaButton variant="secondary">Secondary</DatametriaButton>
+          <DatametriaButton variant="outline">Outline</DatametriaButton>
+          <DatametriaButton variant="ghost">Ghost</DatametriaButton>
+        </div>
+      </section>
+
+      <section>
+        <h2>Alert Variants</h2>
+        <div style="display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0;">
+          <DatametriaAlert variant="primary" message="Primary alert message" />
+          <DatametriaAlert variant="success" message="Success alert message" />
+          <DatametriaAlert variant="error" message="Error alert message" />
+          <DatametriaAlert variant="warning" message="Warning alert message" />
+          <DatametriaAlert variant="info" message="Info alert message" />
+        </div>
+      </section>
+
+      <section>
+        <h2>Badge Variants</h2>
+        <div style="display: flex; gap: 1rem; margin: 1rem 0;">
+          <DatametriaBadge variant="primary" label="Primary" />
+          <DatametriaBadge variant="secondary" label="Secondary" />
+          <DatametriaBadge variant="success" label="Success" />
+          <DatametriaBadge variant="error" label="Error" />
+          <DatametriaBadge variant="warning" label="Warning" />
+          <DatametriaBadge variant="info" label="Info" />
+        </div>
+      </section>
+
+      <section>
+        <h2>Chip Variants</h2>
+        <div style="display: flex; gap: 1rem; margin: 1rem 0;">
+          <DatametriaChip variant="primary" label="Primary" />
+          <DatametriaChip variant="secondary" label="Secondary" />
+          <DatametriaChip variant="success" label="Success" />
+          <DatametriaChip variant="error" label="Error" />
+          <DatametriaChip variant="warning" label="Warning" />
+        </div>
+      </section>
+
+      <section>
+        <h2>Toast Variants</h2>
+        <div style="display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0;">
+          <DatametriaToast variant="primary" message="Primary toast" :model-value="true" />
+          <DatametriaToast variant="success" message="Success toast" :model-value="true" />
+          <DatametriaToast variant="error" message="Error toast" :model-value="true" />
+          <DatametriaToast variant="warning" message="Warning toast" :model-value="true" />
+          <DatametriaToast variant="info" message="Info toast" :model-value="true" />
+        </div>
+      </section>
+
+      <section>
+        <h2>Navbar Variants</h2>
+        <div style="display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0;">
+          <DatametriaNavbar variant="primary" brand="Primary Navbar" />
+          <DatametriaNavbar variant="light" brand="Light Navbar" />
+          <DatametriaNavbar variant="dark" brand="Dark Navbar" />
+          <DatametriaNavbar variant="transparent" brand="Transparent Navbar" />
+        </div>
+      </section>
+    </div>
+  `
+})