@datametria/vue-components 1.1.1

package/src/components/DatametriaToast.vue

@@ -0,0 +1,163 @@
+<template>
+  <Teleport to="body">
+    <Transition name="dm-toast">
+      <div
+        v-if="isVisible"
+        class="dm-toast"
+        :class="`dm-toast--${variant}`"
+        role="alert"
+        :aria-live="variant === 'error' ? 'assertive' : 'polite'"
+      >
+        <div class="dm-toast__content">
+          <span class="dm-toast__message">{{ message }}</span>
+          <button
+            v-if="closable"
+            class="dm-toast__close"
+            @click="close"
+            aria-label="Fechar"
+          >×</button>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+
+interface Props {
+  message: string
+  variant?: 'success' | 'error' | 'warning' | 'info'
+  duration?: number
+  closable?: boolean
+  modelValue?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'info',
+  duration: 3000,
+  closable: true,
+  modelValue: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  close: []
+}>()
+
+const isVisible = ref(props.modelValue)
+let timer: ReturnType<typeof setTimeout> | null = null
+
+watch(() => props.modelValue, (newValue) => {
+  isVisible.value = newValue
+  if (newValue && props.duration > 0) {
+    startTimer()
+  }
+})
+
+const startTimer = () => {
+  if (timer) clearTimeout(timer)
+  timer = setTimeout(() => {
+    close()
+  }, props.duration)
+}
+
+const close = () => {
+  isVisible.value = false
+  emit('update:modelValue', false)
+  emit('close')
+  if (timer) clearTimeout(timer)
+}
+
+onMounted(() => {
+  if (isVisible.value && props.duration > 0) {
+    startTimer()
+  }
+})
+</script>
+
+<style scoped>
+.dm-toast {
+  position: fixed;
+  top: var(--dm-space-4);
+  right: var(--dm-space-4);
+  min-width: 300px;
+  max-width: 500px;
+  padding: var(--dm-space-4);
+  border-radius: var(--dm-radius);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+}
+
+.dm-toast--success {
+  background: var(--dm-success);
+  color: var(--dm-white);
+}
+
+.dm-toast--error {
+  background: var(--dm-error);
+  color: var(--dm-white);
+}
+
+.dm-toast--warning {
+  background: var(--dm-warning);
+  color: var(--dm-gray-900);
+}
+
+.dm-toast--info {
+  background: var(--dm-primary);
+  color: var(--dm-white);
+}
+
+.dm-toast__content {
+  display: flex;
+  align-items: center;
+  gap: var(--dm-space-3);
+}
+
+.dm-toast__message {
+  flex: 1;
+  font-size: var(--dm-text-sm);
+  line-height: 1.5;
+}
+
+.dm-toast__close {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: var(--dm-transition);
+}
+
+.dm-toast__close:hover {
+  opacity: 1;
+}
+
+.dm-toast-enter-active,
+.dm-toast-leave-active {
+  transition: all 0.3s ease;
+}
+
+.dm-toast-enter-from {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.dm-toast-leave-to {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+@media (max-width: 640px) {
+  .dm-toast {
+    left: var(--dm-space-4);
+    right: var(--dm-space-4);
+    min-width: auto;
+  }
+}
+</style>

package/src/composables/useAPI.ts

@@ -0,0 +1,78 @@
+import { ref } from 'vue'
+
+export interface ApiConfig {
+  baseURL?: string
+  timeout?: number
+  headers?: Record<string, string>
+}
+
+export function useAPI(config: ApiConfig = {}) {
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+  const data = ref<any>(null)
+
+  const request = async (url: string, options: RequestInit = {}) => {
+    loading.value = true
+    error.value = null
+
+    try {
+      const fullUrl = config.baseURL ? `${config.baseURL}${url}` : url
+      
+      const response = await fetch(fullUrl, {
+        ...options,
+        headers: {
+          'Content-Type': 'application/json',
+          ...config.headers,
+          ...options.headers
+        }
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+      }
+
+      const result = await response.json()
+      data.value = result
+      return result
+    } catch (err) {
+      error.value = (err as Error).message || 'Request failed'
+      throw err
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const get = (url: string, options?: RequestInit) => {
+    return request(url, { ...options, method: 'GET' })
+  }
+
+  const post = (url: string, body: any, options?: RequestInit) => {
+    return request(url, {
+      ...options,
+      method: 'POST',
+      body: JSON.stringify(body)
+    })
+  }
+
+  const put = (url: string, body: any, options?: RequestInit) => {
+    return request(url, {
+      ...options,
+      method: 'PUT',
+      body: JSON.stringify(body)
+    })
+  }
+
+  const del = (url: string, options?: RequestInit) => {
+    return request(url, { ...options, method: 'DELETE' })
+  }
+
+  return {
+    loading,
+    error,
+    data,
+    get,
+    post,
+    put,
+    delete: del
+  }
+}

package/src/composables/useClipboard.ts

@@ -0,0 +1,42 @@
+import { ref } from 'vue'
+
+export function useClipboard() {
+  const copied = ref(false)
+  const error = ref<string | null>(null)
+
+  const copy = async (text: string): Promise<boolean> => {
+    try {
+      await navigator.clipboard.writeText(text)
+      copied.value = true
+      error.value = null
+
+      setTimeout(() => {
+        copied.value = false
+      }, 2000)
+
+      return true
+    } catch (err) {
+      error.value = (err as Error).message || 'Copy failed'
+      copied.value = false
+      return false
+    }
+  }
+
+  const read = async (): Promise<string> => {
+    try {
+      const text = await navigator.clipboard.readText()
+      error.value = null
+      return text
+    } catch (err) {
+      error.value = (err as Error).message || 'Read failed'
+      return ''
+    }
+  }
+
+  return {
+    copied,
+    error,
+    copy,
+    read
+  }
+}

package/src/composables/useDebounce.ts

@@ -0,0 +1,16 @@
+import { ref, watch, type Ref } from 'vue'
+
+export function useDebounce<T>(value: Ref<T>, delay: number = 300): Ref<T> {
+  const debouncedValue = ref<T>(value.value) as Ref<T>
+  let timeout: ReturnType<typeof setTimeout> | null = null
+
+  watch(value, (newValue) => {
+    if (timeout) clearTimeout(timeout)
+    
+    timeout = setTimeout(() => {
+      debouncedValue.value = newValue
+    }, delay)
+  })
+
+  return debouncedValue
+}

package/src/composables/useLocalStorage.ts

@@ -0,0 +1,26 @@
+import { ref, watch, type Ref } from 'vue'
+
+export function useLocalStorage<T>(key: string, defaultValue: T): Ref<T> {
+  const storedValue = localStorage.getItem(key)
+  let parsedValue = defaultValue
+  
+  if (storedValue) {
+    try {
+      parsedValue = JSON.parse(storedValue)
+    } catch {
+      parsedValue = defaultValue
+    }
+  }
+  
+  const data = ref<T>(parsedValue) as Ref<T>
+
+  watch(
+    data,
+    (newValue) => {
+      localStorage.setItem(key, JSON.stringify(newValue))
+    },
+    { deep: true }
+  )
+
+  return data
+}

package/src/composables/useTheme.ts

@@ -0,0 +1,66 @@
+import { ref, computed } from 'vue'
+
+let isDark = ref(false)
+let initialized = false
+
+// Reset function for testing
+export function resetTheme() {
+  isDark = ref(false)
+  initialized = false
+  document.documentElement.classList.remove('dark')
+}
+
+export function useTheme() {
+  const toggleTheme = () => {
+    isDark.value = !isDark.value
+    document.documentElement.classList.toggle('dark', isDark.value)
+    localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
+  }
+
+  const setTheme = (theme: 'light' | 'dark') => {
+    isDark.value = theme === 'dark'
+    document.documentElement.classList.toggle('dark', isDark.value)
+    localStorage.setItem('theme', theme)
+  }
+
+  const initTheme = () => {
+    initialized = true
+    
+    const savedTheme = localStorage.getItem('theme')
+    if (savedTheme) {
+      setTheme(savedTheme as 'light' | 'dark')
+    } else if (typeof window !== 'undefined' && window.matchMedia) {
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+      setTheme(prefersDark ? 'dark' : 'light')
+    }
+
+    // Listen for system preference changes
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+        if (!localStorage.getItem('theme')) {
+          setTheme(e.matches ? 'dark' : 'light')
+        }
+      })
+    }
+  }
+
+  // Auto-initialize on first use
+  if (!initialized) {
+    initTheme()
+  }
+
+  const currentTheme = computed(() => isDark.value ? 'dark' : 'light')
+
+  const setDark = () => setTheme('dark')
+  const setLight = () => setTheme('light')
+
+  return {
+    isDark,
+    currentTheme,
+    toggle: toggleTheme,
+    setTheme,
+    setDark,
+    setLight,
+    initTheme
+  }
+}

package/src/composables/useValidation.ts

@@ -0,0 +1,39 @@
+// Simple validators that return boolean
+export const required = (value: any): boolean => {
+  return !!value
+}
+
+export const email = (value: any): boolean => {
+  if (!value) return true
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
+}
+
+export const minLength = (min: number) => (value: any): boolean => {
+  if (!value) return true
+  return value.length >= min
+}
+
+export const maxLength = (max: number) => (value: any): boolean => {
+  if (!value) return true
+  return value.length <= max
+}
+
+export const pattern = (regex: RegExp) => (value: any): boolean => {
+  if (!value) return true
+  return regex.test(value)
+}
+
+export const custom = (validator: (value: any) => boolean) => (value: any): boolean => {
+  return validator(value)
+}
+
+export function useValidation() {
+  return {
+    required,
+    email,
+    minLength,
+    maxLength,
+    pattern,
+    custom
+  }
+}

package/src/index.ts

@@ -0,0 +1,52 @@
+// 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 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 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 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 { 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'

package/src/styles/design-tokens.css

@@ -0,0 +1,31 @@
+:root {
+  --dm-primary: #0072CE;
+  --dm-secondary: #4B0078;
+  --dm-success: #10b981;
+  --dm-error: #ef4444;
+  --dm-warning: #f59e0b;
+  
+  --dm-gray-50: #f9fafb;
+  --dm-gray-100: #f3f4f6;
+  --dm-gray-700: #374151;
+  --dm-gray-900: #111827;
+  
+  --dm-space-2: 0.5rem;
+  --dm-space-3: 0.75rem;
+  --dm-space-4: 1rem;
+  
+  --dm-text-sm: 0.875rem;
+  --dm-text-base: 1rem;
+  --dm-text-lg: 1.125rem;
+  
+  --dm-radius: 0.375rem;
+  --dm-transition: 200ms ease-in-out;
+  --dm-focus-ring: 0 0 0 3px rgba(0, 114, 206, 0.1);
+}
+
+@media (max-width: 640px) {
+  :root {
+    --dm-text-sm: 0.8rem;
+    --dm-text-base: 0.9rem;
+  }
+}

package/src/types/index.ts

@@ -0,0 +1,34 @@
+export enum ButtonVariant {
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary',
+  OUTLINE = 'outline',
+  GHOST = 'ghost'
+}
+
+export enum ButtonSize {
+  SM = 'sm',
+  MD = 'md',
+  LG = 'lg'
+}
+
+export interface ButtonProps {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  disabled?: boolean
+  loading?: boolean
+  fullWidth?: boolean
+}
+
+export interface InputProps {
+  modelValue?: string | number
+  label?: string
+  placeholder?: string
+  errorMessage?: string
+  disabled?: boolean
+  required?: boolean
+}
+
+export interface CardProps {
+  title?: string
+  padding?: boolean
+}