@datametria/vue-components 1.1.2 → 1.2.0

package/package.json

@@ -1,98 +1,98 @@
-{
-  "name": "@datametria/vue-components",
-  "version": "1.1.2",
-  "description": "DATAMETRIA Vue.js 3 Component Library with Design System - 56 components enterprise-ready",
-  "type": "module",
-  "main": "./dist/index.umd.js",
-  "module": "./dist/index.es.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./style.css": "./dist/style.css"
-  },
-  "files": [
-    "dist",
-    "src",
-    "README.md",
-    "ACCESSIBILITY.md",
-    "DESIGN-SYSTEM.md",
-    "PROGRESS.md"
-  ],
-  "sideEffects": [
-    "*.css",
-    "*.vue"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc && vite build",
-    "preview": "vite preview",
-    "test": "vitest",
-    "test:ui": "vitest --ui",
-    "test:coverage": "vitest --coverage",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
-    "type-check": "vue-tsc --noEmit",
-    "prepublishOnly": "npm run build"
-  },
-  "dependencies": {
-    "axios": "^1.12.2",
-    "vue": "^3.4.0"
-  },
-  "devDependencies": {
-    "@eslint/config-array": "^0.19.0",
-    "@eslint/object-schema": "^2.1.4",
-    "@testing-library/jest-dom": "^6.1.5",
-    "@testing-library/vue": "^8.0.1",
-    "@types/node": "^22.0.0",
-    "@vitejs/plugin-vue": "^5.0.0",
-    "@vitest/coverage-v8": "^2.1.0",
-    "@vue/eslint-config-prettier": "^10.0.0",
-    "@vue/eslint-config-typescript": "^14.0.0",
-    "@vue/test-utils": "^2.4.0",
-    "@vue/tsconfig": "^0.5.0",
-    "eslint": "^9.17.0",
-    "eslint-plugin-vue": "^9.31.0",
-    "jsdom": "^25.0.0",
-    "prettier": "^3.4.0",
-    "typescript": "~5.7.0",
-    "vite": "^6.0.0",
-    "vitest": "^2.1.0",
-    "vue-tsc": "^2.2.0"
-  },
-  "peerDependencies": {
-    "vue": "^3.4.0"
-  },
-  "keywords": [
-    "vue",
-    "vue3",
-    "vuejs",
-    "components",
-    "design-system",
-    "datametria",
-    "typescript",
-    "enterprise",
-    "ui-library",
-    "component-library",
-    "composition-api",
-    "wcag",
-    "accessibility",
-    "a11y",
-    "responsive",
-    "mobile-first",
-    "dark-mode"
-  ],
-  "author": "DATAMETRIA Team <dev@datametria.io>",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/datametria/DATAMETRIA-common-libraries",
-    "directory": "packages/vue-components"
-  },
-  "bugs": {
-    "url": "https://github.com/datametria/DATAMETRIA-common-libraries/issues"
-  },
-  "homepage": "https://github.com/datametria/DATAMETRIA-common-libraries#readme"
-}
+{
+  "name": "@datametria/vue-components",
+  "version": "1.2.0",
+  "description": "DATAMETRIA Vue.js 3 Component Library - 41 modules (31 components + 10 composables) with 100% UX/UI compliance, WCAG 2.1 AA, dark mode, responsive system, micro-interactions",
+  "type": "module",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "ACCESSIBILITY.md",
+    "DESIGN-SYSTEM.md",
+    "PROGRESS.md"
+  ],
+  "sideEffects": [
+    "*.css",
+    "*.vue"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
+    "type-check": "vue-tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "axios": "^1.12.2",
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@eslint/config-array": "^0.19.0",
+    "@eslint/object-schema": "^2.1.4",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/vue": "^8.0.1",
+    "@types/node": "^22.19.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vitest/coverage-v8": "^2.1.0",
+    "@vue/eslint-config-prettier": "^10.0.0",
+    "@vue/eslint-config-typescript": "^14.0.0",
+    "@vue/test-utils": "^2.4.0",
+    "@vue/tsconfig": "^0.5.0",
+    "eslint": "^9.17.0",
+    "eslint-plugin-vue": "^9.31.0",
+    "jsdom": "^25.0.0",
+    "prettier": "^3.4.0",
+    "typescript": "~5.7.0",
+    "vite": "^6.0.0",
+    "vitest": "^2.1.0",
+    "vue-tsc": "^2.2.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "vuejs",
+    "components",
+    "design-system",
+    "datametria",
+    "typescript",
+    "enterprise",
+    "ui-library",
+    "component-library",
+    "composition-api",
+    "wcag",
+    "accessibility",
+    "a11y",
+    "responsive",
+    "mobile-first",
+    "dark-mode"
+  ],
+  "author": "DATAMETRIA Team <dev@datametria.io>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/datametria/DATAMETRIA-common-libraries",
+    "directory": "packages/vue-components"
+  },
+  "bugs": {
+    "url": "https://github.com/datametria/DATAMETRIA-common-libraries/issues"
+  },
+  "homepage": "https://github.com/datametria/DATAMETRIA-common-libraries#readme"
+}

package/src/components/DatametriaAlert.vue

@@ -1,123 +1,137 @@
-<template>
-  <div v-if="modelValue" :class="alertClasses">
-    <div class="datametria-alert__icon">
-      <span v-if="variant === 'success'">✓</span>
-      <span v-else-if="variant === 'error'">✕</span>
-      <span v-else-if="variant === 'warning'">⚠</span>
-      <span v-else>ℹ</span>
-    </div>
-    
-    <div class="datametria-alert__content">
-      <h4 v-if="title" class="datametria-alert__title">{{ title }}</h4>
-      <p class="datametria-alert__message">
-        <slot>{{ message }}</slot>
-      </p>
-    </div>
-    
-    <button
-      v-if="closable"
-      class="datametria-alert__close"
-      @click="$emit('update:modelValue', false)"
-    >
-      ×
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-type AlertVariant = 'success' | 'error' | 'warning' | 'info'
-
-interface Props {
-  modelValue?: boolean
-  variant?: AlertVariant
-  title?: string
-  message?: string
-  closable?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: true,
-  variant: 'info',
-  closable: true
-})
-
-defineEmits<{
-  'update:modelValue': [value: boolean]
-}>()
-
-const alertClasses = computed(() => [
-  'datametria-alert',
-  `datametria-alert--${props.variant}`
-])
-</script>
-
-<style scoped>
-.datametria-alert {
-  display: flex;
-  gap: 0.75rem;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  border-left: 4px solid;
-}
-
-.datametria-alert--success {
-  background: #f0fdf4;
-  border-color: #10b981;
-  color: #065f46;
-}
-
-.datametria-alert--error {
-  background: #fef2f2;
-  border-color: #ef4444;
-  color: #991b1b;
-}
-
-.datametria-alert--warning {
-  background: #fffbeb;
-  border-color: #f59e0b;
-  color: #92400e;
-}
-
-.datametria-alert--info {
-  background: #eff6ff;
-  border-color: #0072CE;
-  color: #1e3a8a;
-}
-
-.datametria-alert__icon {
-  font-size: 1.25rem;
-  font-weight: bold;
-}
-
-.datametria-alert__content {
-  flex: 1;
-}
-
-.datametria-alert__title {
-  margin: 0 0 0.25rem 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.datametria-alert__message {
-  margin: 0;
-  font-size: 0.875rem;
-}
-
-.datametria-alert__close {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  line-height: 1;
-  cursor: pointer;
-  padding: 0;
-  opacity: 0.5;
-  transition: opacity 0.2s;
-}
-
-.datametria-alert__close:hover {
-  opacity: 1;
-}
-</style>
+<template>
+  <div v-if="modelValue" :class="alertClasses">
+    <div class="datametria-alert__icon">
+      <span v-if="variant === 'success'">✓</span>
+      <span v-else-if="variant === 'error'">✕</span>
+      <span v-else-if="variant === 'warning'">⚠</span>
+      <span v-else>ℹ</span>
+    </div>
+    
+    <div class="datametria-alert__content">
+      <h4 v-if="title" class="datametria-alert__title">{{ title }}</h4>
+      <p class="datametria-alert__message">
+        <slot>{{ message }}</slot>
+      </p>
+    </div>
+    
+    <button
+      v-if="closable"
+      class="datametria-alert__close"
+      @click="$emit('update:modelValue', false)"
+    >
+      ×
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type AlertVariant = 'success' | 'error' | 'warning' | 'info' | 'primary'
+
+interface Props {
+  modelValue?: boolean
+  variant?: AlertVariant
+  title?: string
+  message?: string
+  closable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: true,
+  variant: 'info',
+  closable: true
+})
+
+// Validação em desenvolvimento
+if (process.env.NODE_ENV === 'development') {
+  const validVariants: AlertVariant[] = ['success', 'error', 'warning', 'info', 'primary']
+  if (!validVariants.includes(props.variant)) {
+    console.warn(`[DatametriaAlert] Invalid variant "${props.variant}". Valid options: ${validVariants.join(', ')}`)
+  }
+}
+
+defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const alertClasses = computed(() => [
+  'datametria-alert',
+  `datametria-alert--${props.variant}`
+])
+</script>
+
+<style scoped>
+.datametria-alert {
+  display: flex;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  border-left: 4px solid;
+}
+
+.datametria-alert--success {
+  background: #f0fdf4;
+  border-color: #10b981;
+  color: #065f46;
+}
+
+.datametria-alert--error {
+  background: #fef2f2;
+  border-color: #ef4444;
+  color: #991b1b;
+}
+
+.datametria-alert--warning {
+  background: #fffbeb;
+  border-color: #f59e0b;
+  color: #92400e;
+}
+
+.datametria-alert--primary {
+  background: #eff6ff;
+  border-color: #0072CE;
+  color: #1e3a8a;
+}
+
+.datametria-alert--info {
+  background: #f9fafb;
+  border-color: #6b7280;
+  color: #374151;
+}
+
+.datametria-alert__icon {
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+
+.datametria-alert__content {
+  flex: 1;
+}
+
+.datametria-alert__title {
+  margin: 0 0 0.25rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.datametria-alert__message {
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.datametria-alert__close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+  opacity: 0.5;
+  transition: opacity 0.2s;
+}
+
+.datametria-alert__close:hover {
+  opacity: 1;
+}
+</style>

package/src/components/DatametriaBadge.vue

@@ -1,90 +1,98 @@
-<template>
-  <span
-    class="dm-badge"
-    :class="[`dm-badge--${variant}`, `dm-badge--${size}`]"
-    :aria-label="ariaLabel"
-  >
-    <slot>{{ label }}</slot>
-  </span>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  label?: string
-  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'
-  size?: 'sm' | 'md' | 'lg'
-  ariaLabel?: string
-}
-
-withDefaults(defineProps<Props>(), {
-  variant: 'primary',
-  size: 'md'
-})
-</script>
-
-<style scoped>
-.dm-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  border-radius: 12px;
-  white-space: nowrap;
-  user-select: none;
-}
-
-.dm-badge--sm {
-  padding: 2px 8px;
-  font-size: var(--dm-text-xs);
-  min-height: 20px;
-}
-
-.dm-badge--md {
-  padding: 4px 12px;
-  font-size: var(--dm-text-sm);
-  min-height: 24px;
-}
-
-.dm-badge--lg {
-  padding: 6px 16px;
-  font-size: var(--dm-text-base);
-  min-height: 32px;
-}
-
-.dm-badge--primary {
-  background: var(--dm-primary);
-  color: var(--dm-white);
-}
-
-.dm-badge--secondary {
-  background: var(--dm-secondary);
-  color: var(--dm-white);
-}
-
-.dm-badge--success {
-  background: var(--dm-success);
-  color: var(--dm-white);
-}
-
-.dm-badge--warning {
-  background: var(--dm-warning);
-  color: var(--dm-gray-900);
-}
-
-.dm-badge--error {
-  background: var(--dm-error);
-  color: var(--dm-white);
-}
-
-.dm-badge--info {
-  background: var(--dm-gray-200);
-  color: var(--dm-gray-900);
-}
-
-@media (prefers-color-scheme: dark) {
-  .dm-badge--info {
-    background: var(--dm-gray-700);
-    color: var(--dm-white);
-  }
-}
-</style>
+<template>
+  <span
+    class="dm-badge"
+    :class="[`dm-badge--${variant}`, `dm-badge--${size}`]"
+    :aria-label="ariaLabel"
+  >
+    <slot>{{ label }}</slot>
+  </span>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  label?: string
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'
+  size?: 'sm' | 'md' | 'lg'
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  size: 'md'
+})
+
+// Validação em desenvolvimento
+if (process.env.NODE_ENV === 'development') {
+  const validVariants = ['primary', 'secondary', 'success', 'warning', 'error', 'info']
+  if (!validVariants.includes(props.variant)) {
+    console.warn(`[DatametriaBadge] Invalid variant "${props.variant}". Valid options: ${validVariants.join(', ')}`)
+  }
+}
+</script>
+
+<style scoped>
+.dm-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  border-radius: 12px;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.dm-badge--sm {
+  padding: 2px 8px;
+  font-size: var(--dm-text-xs);
+  min-height: 20px;
+}
+
+.dm-badge--md {
+  padding: 4px 12px;
+  font-size: var(--dm-text-sm);
+  min-height: 24px;
+}
+
+.dm-badge--lg {
+  padding: 6px 16px;
+  font-size: var(--dm-text-base);
+  min-height: 32px;
+}
+
+.dm-badge--primary {
+  background: var(--dm-primary);
+  color: var(--dm-white);
+}
+
+.dm-badge--secondary {
+  background: var(--dm-secondary);
+  color: var(--dm-white);
+}
+
+.dm-badge--success {
+  background: var(--dm-success);
+  color: var(--dm-white);
+}
+
+.dm-badge--warning {
+  background: var(--dm-warning);
+  color: var(--dm-gray-900);
+}
+
+.dm-badge--error {
+  background: var(--dm-error);
+  color: var(--dm-white);
+}
+
+.dm-badge--info {
+  background: var(--dm-gray-200);
+  color: var(--dm-gray-900);
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-badge--info {
+    background: var(--dm-gray-700);
+    color: var(--dm-white);
+  }
+}
+</style>