@datametria/vue-components 2.4.0 → 2.4.1

package/src/components/DatametriaCheckboxGroup.vue

@@ -1,61 +1,43 @@
-<template>
-  <div class="datametria-checkbox-group" role="group">
-    <slot></slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { provide, computed } from 'vue'
-
-interface Props {
-  modelValue?: (string | number)[]
-  disabled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: () => [],
-  disabled: false
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: (string | number)[]]
-  change: [value: (string | number)[]]
-}>()
-
-const updateValue = (value: (string | number)[]) => {
-  emit('update:modelValue', value)
-  emit('change', value)
-}
-
-provide('checkboxGroup', {
-  modelValue: computed(() => props.modelValue),
-  disabled: computed(() => props.disabled),
-  updateValue
-})
-</script>
-
-<style scoped>
-.datametria-checkbox-group {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 12px;
-}
+<template>
+  <div class="datametria-checkbox-group" role="group">
+    <slot></slot>
+  </div>
+</template>
 
-/* Dark Mode Support - Hybrid Approach */
+<script setup lang="ts">
+import { provide, computed } from 'vue'
 
-/* Fallback automático (sem JS) */
-@media (prefers-color-scheme: dark) {
-  .datametria-checkbox-group {
-    background: var(--dm-bg-color-dark, #1e1e1e);
-    color: var(--dm-text-primary-dark, #e0e0e0);
-    border-color: var(--dm-border-color-dark, #404040);
-  }
+interface Props {
+  modelValue?: (string | number)[]
+  disabled?: boolean
 }
 
-/* Controle manual via useTheme() */
-[data-theme="dark"] .datametria-checkbox-group {
-  background: var(--dm-bg-color-dark, #1e1e1e);
-  color: var(--dm-text-primary-dark, #e0e0e0);
-  border-color: var(--dm-border-color-dark, #404040);
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  disabled: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: (string | number)[]]
+  change: [value: (string | number)[]]
+}>()
+
+const updateValue = (value: (string | number)[]) => {
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+
+provide('checkboxGroup', {
+  modelValue: computed(() => props.modelValue),
+  disabled: computed(() => props.disabled),
+  updateValue
+})
+</script>
+
+<style scoped>
+.datametria-checkbox-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 12px;
 }
-</style>
+</style>

package/src/components/DatametriaFileUpload.vue

@@ -244,18 +244,18 @@ const formatFileSize = (bytes: number): string => {
 }
 
 .dm-file-upload__area {
-  border: 2px dashed var(--dm-neutral-300, #d1d5db);
+  border: 2px dashed var(--dm-border-color, #d1d5db);
   border-radius: var(--dm-radius-lg, 0.5rem);
   padding: 2rem;
   text-align: center;
   cursor: pointer;
   transition: all 0.2s;
-  background-color: var(--dm-neutral-50, #f9fafb);
+  background-color: var(--dm-bg-secondary, #f9fafb);
 }
 
 .dm-file-upload__area:hover {
   border-color: var(--dm-primary, #0072ce);
-  background-color: var(--dm-neutral-100, #f3f4f6);
+  background-color: var(--dm-bg-hover, #f3f4f6);
 }
 
 .dm-file-upload__area--dragover {
@@ -277,7 +277,7 @@ const formatFileSize = (bytes: number): string => {
 .dm-file-upload__icon {
   width: 3rem;
   height: 3rem;
-  color: var(--dm-neutral-400, #9ca3af);
+  color: var(--dm-text-secondary, #9ca3af);
 }
 
 .dm-file-upload__icon svg {
@@ -292,20 +292,20 @@ const formatFileSize = (bytes: number): string => {
 .dm-file-upload__primary-text {
   font-size: 1.125rem;
   font-weight: 500;
-  color: var(--dm-neutral-700, #374151);
+  color: var(--dm-text-primary, #374151);
   margin: 0 0 0.5rem 0;
 }
 
 .dm-file-upload__secondary-text {
   font-size: 0.875rem;
-  color: var(--dm-neutral-500, #6b7280);
+  color: var(--dm-text-secondary, #6b7280);
   margin: 0;
 }
 
 .dm-file-upload__spinner {
   width: 2rem;
   height: 2rem;
-  border: 3px solid var(--dm-neutral-300, #d1d5db);
+  border: 3px solid var(--dm-border-color, #d1d5db);
   border-top: 3px solid var(--dm-primary, #0072ce);
   border-radius: 50%;
   animation: spin 1s linear infinite;
@@ -326,7 +326,7 @@ const formatFileSize = (bytes: number): string => {
 .dm-file-upload__progress-track {
   flex: 1;
   height: 0.5rem;
-  background-color: var(--dm-neutral-200, #e5e7eb);
+  background-color: var(--dm-bg-secondary, #e5e7eb);
   border-radius: var(--dm-radius-full, 9999px);
   overflow: hidden;
 }
@@ -340,7 +340,7 @@ const formatFileSize = (bytes: number): string => {
 .dm-file-upload__progress-text {
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--dm-neutral-600, #4b5563);
+  color: var(--dm-text-secondary, #4b5563);
   min-width: 3rem;
 }
 
@@ -354,8 +354,8 @@ const formatFileSize = (bytes: number): string => {
   align-items: center;
   justify-content: space-between;
   padding: 0.75rem;
-  background-color: var(--dm-neutral-50, #f9fafb);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  background-color: var(--dm-bg-secondary, #f9fafb);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
   border-radius: var(--dm-radius-md, 0.375rem);
   margin-bottom: 0.5rem;
 }
@@ -368,12 +368,12 @@ const formatFileSize = (bytes: number): string => {
 
 .dm-file-upload__file-name {
   font-weight: 500;
-  color: var(--dm-neutral-700, #374151);
+  color: var(--dm-text-primary, #374151);
 }
 
 .dm-file-upload__file-size {
   font-size: 0.875rem;
-  color: var(--dm-neutral-500, #6b7280);
+  color: var(--dm-text-secondary, #6b7280);
 }
 
 .dm-file-upload__remove {

package/src/components/DatametriaInput.vue

@@ -179,22 +179,22 @@ defineExpose({
   margin-bottom: 4px;
   font-size: 14px;
   font-weight: 500;
-  color: var(--color-text-primary, #1f2937);
+  color: var(--dm-text-primary, #1f2937);
 }
 
 .datametria-input__required {
-  color: var(--color-error, #ef4444);
+  color: var(--dm-error, #ef4444);
   margin-left: 2px;
 }
 
 .datametria-input__error {
   margin-top: 4px;
   font-size: 12px;
-  color: var(--color-error, #ef4444);
+  color: var(--dm-error, #ef4444);
 }
 
 .datametria-input__field--error {
-  border-color: var(--color-error, #ef4444) !important;
+  border-color: var(--dm-error, #ef4444) !important;
 }
 
 .datametria-input {
@@ -209,23 +209,23 @@ defineExpose({
   display: inline-flex;
   align-items: center;
   width: 100%;
-  background: var(--color-background, #ffffff);
-  border: 1px solid var(--color-border, #d1d5db);
+  background: var(--dm-bg-color, #ffffff);
+  border: 1px solid var(--dm-border-color, #d1d5db);
   border-radius: 6px;
   transition: all 0.2s;
 }
 
 .datametria-input__inner:hover {
-  border-color: var(--color-primary, #3b82f6);
+  border-color: var(--dm-primary, #3b82f6);
 }
 
 .datametria-input--focused .datametria-input__inner {
-  border-color: var(--color-primary, #3b82f6);
+  border-color: var(--dm-primary, #3b82f6);
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }
 
 .datametria-input--disabled .datametria-input__inner {
-  background: var(--color-background-disabled, #f3f4f6);
+  background: var(--dm-bg-disabled, #f3f4f6);
   cursor: not-allowed;
   opacity: 0.6;
 }
@@ -237,7 +237,7 @@ defineExpose({
   border: none;
   outline: none;
   background: transparent;
-  color: var(--color-text-primary, #1f2937);
+  color: var(--dm-text-primary, #1f2937);
   font-size: inherit;
 }
 
@@ -250,7 +250,7 @@ defineExpose({
   display: inline-flex;
   align-items: center;
   padding: 0 8px;
-  color: var(--color-text-secondary, #6b7280);
+  color: var(--dm-text-secondary, #6b7280);
 }
 
 .datametria-input__clear {
@@ -258,14 +258,14 @@ defineExpose({
   border: none;
   font-size: 18px;
   line-height: 1;
-  color: var(--color-text-secondary, #6b7280);
+  color: var(--dm-text-secondary, #6b7280);
   cursor: pointer;
   padding: 0 4px;
   transition: color 0.2s;
 }
 
 .datametria-input__clear:hover {
-  color: var(--color-text-primary, #1f2937);
+  color: var(--dm-text-primary, #1f2937);
 }
 
 .datametria-input__prepend,
@@ -273,8 +273,8 @@ defineExpose({
   display: inline-flex;
   align-items: center;
   padding: 0 12px;
-  background: var(--color-background-secondary, #f9fafb);
-  border: 1px solid var(--color-border, #d1d5db);
+  background: var(--dm-bg-secondary, #f9fafb);
+  border: 1px solid var(--dm-border-color, #d1d5db);
   white-space: nowrap;
 }
 

package/src/components/DatametriaPasswordInput.vue

@@ -243,7 +243,7 @@ watch(strength, (newStrength) => {
 .datametria-password-input__label {
   font-size: var(--dm-font-size-sm, 0.875rem);
   font-weight: var(--dm-font-weight-medium, 500);
-  color: var(--dm-neutral-700, #374151);
+  color: var(--dm-text-primary, #374151);
 }
 
 .datametria-password-input__required {
@@ -260,9 +260,11 @@ watch(strength, (newStrength) => {
   width: 100%;
   padding: var(--dm-spacing-3, 0.75rem);
   padding-right: var(--dm-spacing-12, 3rem);
-  border: 1px solid var(--dm-neutral-300, #d1d5db);
+  border: 1px solid var(--dm-border-color, #d1d5db);
   border-radius: var(--dm-radius-md, 0.375rem);
   font-size: var(--dm-font-size-base, 1rem);
+  background: var(--dm-bg-color, #ffffff);
+  color: var(--dm-text-primary, #111827);
   transition: all var(--dm-transition-base, 0.2s);
 }
 
@@ -282,7 +284,7 @@ watch(strength, (newStrength) => {
 }
 
 .datametria-password-input__field--disabled {
-  background: var(--dm-neutral-100, #f3f4f6);
+  background: var(--dm-bg-disabled, #f3f4f6);
   cursor: not-allowed;
 }
 
@@ -293,12 +295,12 @@ watch(strength, (newStrength) => {
   border: none;
   cursor: pointer;
   padding: var(--dm-spacing-1, 0.25rem);
-  color: var(--dm-neutral-500, #6b7280);
+  color: var(--dm-text-secondary, #6b7280);
   transition: color var(--dm-transition-base, 0.2s);
 }
 
 .datametria-password-input__toggle:hover {
-  color: var(--dm-neutral-700, #374151);
+  color: var(--dm-text-primary, #374151);
 }
 
 .datametria-password-input__toggle:focus {
@@ -327,7 +329,7 @@ watch(strength, (newStrength) => {
 .datametria-password-input__strength-bar {
   flex: 1;
   height: var(--dm-spacing-2, 0.5rem);
-  background: var(--dm-neutral-200, #e5e7eb);
+  background: var(--dm-bg-secondary, #e5e7eb);
   border-radius: var(--dm-radius-sm, 0.25rem);
   overflow: hidden;
 }
@@ -378,15 +380,15 @@ watch(strength, (newStrength) => {
 
 .datametria-password-input__requirements {
   padding: var(--dm-spacing-3, 0.75rem);
-  background: var(--dm-neutral-50, #f9fafb);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  background: var(--dm-bg-secondary, #f9fafb);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
   border-radius: var(--dm-radius-md, 0.375rem);
 }
 
 .datametria-password-input__requirements-title {
   font-size: var(--dm-font-size-sm, 0.875rem);
   font-weight: var(--dm-font-weight-medium, 500);
-  color: var(--dm-neutral-700, #374151);
+  color: var(--dm-text-primary, #374151);
   margin: 0 0 var(--dm-spacing-2, 0.5rem) 0;
 }
 
@@ -401,7 +403,7 @@ watch(strength, (newStrength) => {
 
 .datametria-password-input__requirements-list li {
   font-size: var(--dm-font-size-sm, 0.875rem);
-  color: var(--dm-neutral-500, #6b7280);
+  color: var(--dm-text-secondary, #6b7280);
   display: flex;
   align-items: center;
   gap: var(--dm-spacing-2, 0.5rem);
@@ -424,7 +426,7 @@ watch(strength, (newStrength) => {
 
 .datametria-password-input__help {
   font-size: var(--dm-font-size-sm, 0.875rem);
-  color: var(--dm-neutral-500, #6b7280);
+  color: var(--dm-text-secondary, #6b7280);
   margin: 0;
 }
 

package/src/components/DatametriaRadio.vue

@@ -115,7 +115,7 @@ defineExpose({
 }
 
 .datametria-radio.is-checked .datametria-radio__inner {
-  border-color: var(--dm-color-primary, #0072ce);
+  border-color: var(--dm-primary, #0072ce);
 }
 
 .datametria-radio.is-checked .datametria-radio__inner::after {
@@ -126,7 +126,7 @@ defineExpose({
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background-color: var(--dm-color-primary, #0072ce);
+  background-color: var(--dm-primary, #0072ce);
   transform: translate(-50%, -50%);
 }
 

package/src/components/DatametriaRadioGroup.vue

@@ -1,60 +1,42 @@
-<template>
-  <div class="datametria-radio-group" role="radiogroup">
-    <slot></slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { provide, computed } from 'vue'
-
-interface Props {
-  modelValue?: string | number | boolean
-  disabled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  disabled: false
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string | number | boolean]
-  change: [value: string | number | boolean]
-}>()
-
-const updateValue = (value: string | number | boolean) => {
-  emit('update:modelValue', value)
-  emit('change', value)
-}
-
-provide('radioGroup', {
-  modelValue: computed(() => props.modelValue),
-  disabled: computed(() => props.disabled),
-  updateValue
-})
-</script>
-
-<style scoped>
-.datametria-radio-group {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 12px;
-}
+<template>
+  <div class="datametria-radio-group" role="radiogroup">
+    <slot></slot>
+  </div>
+</template>
 
-/* Dark Mode Support - Hybrid Approach */
+<script setup lang="ts">
+import { provide, computed } from 'vue'
 
-/* Fallback automático (sem JS) */
-@media (prefers-color-scheme: dark) {
-  .datametria-radio-group {
-    background: var(--dm-bg-color-dark, #1e1e1e);
-    color: var(--dm-text-primary-dark, #e0e0e0);
-    border-color: var(--dm-border-color-dark, #404040);
-  }
+interface Props {
+  modelValue?: string | number | boolean
+  disabled?: boolean
 }
 
-/* Controle manual via useTheme() */
-[data-theme="dark"] .datametria-radio-group {
-  background: var(--dm-bg-color-dark, #1e1e1e);
-  color: var(--dm-text-primary-dark, #e0e0e0);
-  border-color: var(--dm-border-color-dark, #404040);
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number | boolean]
+  change: [value: string | number | boolean]
+}>()
+
+const updateValue = (value: string | number | boolean) => {
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+
+provide('radioGroup', {
+  modelValue: computed(() => props.modelValue),
+  disabled: computed(() => props.disabled),
+  updateValue
+})
+</script>
+
+<style scoped>
+.datametria-radio-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 12px;
 }
-</style>
+</style>

package/src/components/DatametriaSelect.vue

@@ -6,7 +6,7 @@
       <span v-if="required" class="datametria-select__required">*</span>
     </label>
 
-    <div ref="triggerRef" class="datametria-select__trigger" @click="toggleDropdown">
+    <div ref="triggerRef" class="datametria-select__trigger" @click.stop="toggleDropdown">
       <span v-if="displayValue" class="datametria-select__value">{{ displayValue }}</span>
       <span v-else class="datametria-select__placeholder">{{ placeholder }}</span>
       <span class="datametria-select__arrow">▼</span>
@@ -203,18 +203,18 @@ onUnmounted(() => {
   margin-bottom: 4px;
   font-size: 14px;
   font-weight: 500;
-  color: var(--color-text-primary, #1f2937);
+  color: var(--dm-text-primary, #1f2937);
 }
 
 .datametria-select__required {
-  color: var(--color-error, #ef4444);
+  color: var(--dm-error, #ef4444);
   margin-left: 2px;
 }
 
 .datametria-select__error {
   margin-top: 4px;
   font-size: 12px;
-  color: var(--color-error, #ef4444);
+  color: var(--dm-error, #ef4444);
 }
 
 .datametria-select {
@@ -227,15 +227,15 @@ onUnmounted(() => {
   align-items: center;
   justify-content: space-between;
   padding: 8px 12px;
-  border: 1px solid var(--color-border, #d1d5db);
+  border: 1px solid var(--dm-border-color, #d1d5db);
   border-radius: 6px;
-  background: var(--color-background, #fff);
+  background: var(--dm-bg-color, #fff);
   cursor: pointer;
   transition: all 0.2s;
 }
 
 .datametria-select__trigger:hover {
-  border-color: var(--color-primary, #3b82f6);
+  border-color: var(--dm-primary, #3b82f6);
 }
 
 .is-disabled .datametria-select__trigger {
@@ -244,7 +244,7 @@ onUnmounted(() => {
 }
 
 .datametria-select__placeholder {
-  color: var(--color-text-secondary, #9ca3af);
+  color: var(--dm-text-secondary, #9ca3af);
 }
 
 .datametria-select__arrow {
@@ -255,8 +255,8 @@ onUnmounted(() => {
 .datametria-select__dropdown {
   position: fixed;
   z-index: 2000;
-  background: var(--color-background, #fff);
-  border: 1px solid var(--color-border, #d1d5db);
+  background: var(--dm-bg-color, #fff);
+  border: 1px solid var(--dm-border-color, #d1d5db);
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.15);
   max-height: 300px;
@@ -267,7 +267,7 @@ onUnmounted(() => {
   width: 100%;
   padding: 8px 12px;
   border: none;
-  border-bottom: 1px solid var(--color-border, #d1d5db);
+  border-bottom: 1px solid var(--dm-border-color, #d1d5db);
   outline: none;
 }
 
@@ -283,18 +283,18 @@ onUnmounted(() => {
 }
 
 .datametria-select__option:hover {
-  background: var(--color-background-hover, #f3f4f6);
+  background: var(--dm-bg-hover, #f3f4f6);
 }
 
 .datametria-select__option.is-selected {
-  background: var(--color-primary-light, #dbeafe);
-  color: var(--color-primary, #3b82f6);
+  background: var(--dm-primary-light, #dbeafe);
+  color: var(--dm-primary, #3b82f6);
 }
 
 .datametria-select__empty {
   padding: 16px;
   text-align: center;
-  color: var(--color-text-secondary, #9ca3af);
+  color: var(--dm-text-secondary, #9ca3af);
 }
 
 /* Dark Mode Support - Hybrid Approach */