@datametria/vue-components 2.4.0 → 2.4.2

package/src/components/DatametriaSortableTable.vue

@@ -498,22 +498,24 @@ watch(totalPages, (newTotal) => {
 <style scoped>
 .datametria-sortable-table {
   width: 100%;
-  background: var(--dm-neutral-50, #ffffff);
+  background: var(--dm-bg-color, #ffffff);
   border-radius: var(--dm-radius-md, 0.375rem);
   box-shadow: var(--dm-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
 }
 
 .datametria-sortable-table__search {
   padding: var(--dm-spacing-4, 1rem);
-  border-bottom: 1px solid var(--dm-neutral-100, #f3f4f6);
+  border-bottom: 1px solid var(--dm-border-color, #e5e7eb);
 }
 
 .datametria-sortable-table__search-input {
   width: 100%;
   padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-4, 1rem);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
   border-radius: var(--dm-radius-md, 0.375rem);
   font-size: var(--dm-font-size-sm, 0.875rem);
+  background: var(--dm-bg-color, #ffffff);
+  color: var(--dm-text-primary, #111827);
   transition: all 0.2s ease;
 }
 
@@ -533,8 +535,8 @@ watch(totalPages, (newTotal) => {
 }
 
 .datametria-sortable-table__thead {
-  background: var(--dm-neutral-50, #f9fafb);
-  border-bottom: 2px solid var(--dm-neutral-200, #e5e7eb);
+  background: var(--dm-bg-secondary, #f9fafb);
+  border-bottom: 2px solid var(--dm-border-color, #e5e7eb);
 }
 
 .datametria-sortable-table__th {
@@ -542,7 +544,7 @@ watch(totalPages, (newTotal) => {
   text-align: left;
   font-size: var(--dm-font-size-sm, 0.875rem);
   font-weight: var(--dm-font-weight-semibold, 600);
-  color: var(--dm-neutral-700, #374151);
+  color: var(--dm-text-primary, #374151);
   position: relative;
 }
 
@@ -552,7 +554,7 @@ watch(totalPages, (newTotal) => {
 }
 
 .datametria-sortable-table__th--sortable:hover {
-  background: var(--dm-neutral-100, #f3f4f6);
+  background: var(--dm-bg-hover, #f3f4f6);
 }
 
 .datametria-sortable-table__th--sortable:focus-visible {
@@ -577,7 +579,7 @@ watch(totalPages, (newTotal) => {
 }
 
 .datametria-sortable-table__sort-icon--inactive {
-  color: var(--dm-neutral-400, #9ca3af);
+  color: var(--dm-text-secondary, #9ca3af);
   opacity: 0.5;
 }
 
@@ -585,10 +587,12 @@ watch(totalPages, (newTotal) => {
   width: 100%;
   margin-top: var(--dm-spacing-2, 0.5rem);
   padding: var(--dm-spacing-2, 0.5rem);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
   border-radius: var(--dm-radius-md, 0.375rem);
   font-size: var(--dm-font-size-sm, 0.875rem);
   font-weight: 400;
+  background: var(--dm-bg-color, #ffffff);
+  color: var(--dm-text-primary, #111827);
   transition: all 0.2s ease;
 }
 
@@ -606,12 +610,13 @@ watch(totalPages, (newTotal) => {
 .datametria-sortable-table__multiselect-trigger {
   width: 100%;
   padding: var(--dm-spacing-2, 0.5rem);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
   border-radius: var(--dm-radius-md, 0.375rem);
   font-size: var(--dm-font-size-sm, 0.875rem);
   font-weight: 400;
   text-align: left;
-  background: var(--dm-neutral-50, #ffffff);
+  background: var(--dm-bg-color, #ffffff);
+  color: var(--dm-text-primary, #111827);
   cursor: pointer;
   transition: all 0.2s ease;
 }
@@ -634,8 +639,8 @@ watch(totalPages, (newTotal) => {
   margin-top: var(--dm-spacing-1, 0.25rem);
   max-height: 200px;
   overflow-y: auto;
-  background: var(--dm-neutral-50, #ffffff);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  background: var(--dm-bg-color, #ffffff);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
   border-radius: var(--dm-radius-md, 0.375rem);
   box-shadow: var(--dm-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
   z-index: 10;
@@ -647,12 +652,13 @@ watch(totalPages, (newTotal) => {
   gap: var(--dm-spacing-2, 0.5rem);
   padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-3, 0.75rem);
   font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-text-primary, #111827);
   cursor: pointer;
   transition: background-color 0.2s ease;
 }
 
 .datametria-sortable-table__multiselect-option:hover {
-  background: var(--dm-neutral-100, #f3f4f6);
+  background: var(--dm-bg-hover, #f3f4f6);
 }
 
 .datametria-sortable-table__multiselect-option input[type="checkbox"] {
@@ -660,16 +666,16 @@ watch(totalPages, (newTotal) => {
 }
 
 .datametria-sortable-table__tbody {
-  background: var(--dm-neutral-50, #ffffff);
+  background: var(--dm-bg-color, #ffffff);
 }
 
 .datametria-sortable-table__tr {
-  border-bottom: 1px solid var(--dm-neutral-100, #f3f4f6);
+  border-bottom: 1px solid var(--dm-border-color, #e5e7eb);
   transition: background-color 0.2s ease;
 }
 
 .datametria-sortable-table__tr:hover {
-  background: var(--dm-neutral-50, #f9fafb);
+  background: var(--dm-bg-hover, #f9fafb);
 }
 
 .datametria-sortable-table__tr--selected {
@@ -679,7 +685,7 @@ watch(totalPages, (newTotal) => {
 .datametria-sortable-table__td {
   padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-4, 1rem);
   font-size: var(--dm-font-size-sm, 0.875rem);
-  color: var(--dm-neutral-900, #111827);
+  color: var(--dm-text-primary, #111827);
 }
 
 .datametria-sortable-table__td--checkbox {
@@ -690,7 +696,7 @@ watch(totalPages, (newTotal) => {
 .datametria-sortable-table__empty {
   padding: var(--dm-spacing-4, 1rem);
   text-align: center;
-  color: var(--dm-neutral-500, #6b7280);
+  color: var(--dm-text-secondary, #6b7280);
   font-size: var(--dm-font-size-sm, 0.875rem);
 }
 
@@ -699,14 +705,14 @@ watch(totalPages, (newTotal) => {
   justify-content: space-between;
   align-items: center;
   padding: var(--dm-spacing-4, 1rem);
-  border-top: 1px solid var(--dm-neutral-200, #e5e7eb);
+  border-top: 1px solid var(--dm-border-color, #e5e7eb);
   flex-wrap: wrap;
   gap: var(--dm-spacing-4, 1rem);
 }
 
 .datametria-sortable-table__pagination-info {
   font-size: var(--dm-font-size-sm, 0.875rem);
-  color: var(--dm-neutral-600, #4b5563);
+  color: var(--dm-text-secondary, #4b5563);
 }
 
 .datametria-sortable-table__pagination-controls {
@@ -717,13 +723,13 @@ watch(totalPages, (newTotal) => {
 
 .datametria-sortable-table__page-size {
   padding: var(--dm-spacing-2, 0.5rem);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
   border-radius: var(--dm-radius-md, 0.375rem);
   font-size: var(--dm-font-size-sm, 0.875rem);
   cursor: pointer;
   transition: all 0.2s ease;
-  background: var(--dm-neutral-50, #ffffff);
-  color: var(--dm-neutral-900, #111827);
+  background: var(--dm-bg-color, #ffffff);
+  color: var(--dm-text-primary, #111827);
 }
 
 .datametria-sortable-table__page-size:focus {
@@ -734,17 +740,17 @@ watch(totalPages, (newTotal) => {
 
 .datametria-sortable-table__pagination-btn {
   padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-3, 0.75rem);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
   border-radius: var(--dm-radius-md, 0.375rem);
-  background: var(--dm-neutral-50, #ffffff);
-  color: var(--dm-neutral-900, #111827);
+  background: var(--dm-bg-color, #ffffff);
+  color: var(--dm-text-primary, #111827);
   font-size: var(--dm-font-size-sm, 0.875rem);
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .datametria-sortable-table__pagination-btn:hover:not(:disabled) {
-  background: var(--dm-neutral-100, #f3f4f6);
+  background: var(--dm-bg-hover, #f3f4f6);
   border-color: var(--dm-primary, #0072CE);
 }
 
@@ -761,7 +767,7 @@ watch(totalPages, (newTotal) => {
 .datametria-sortable-table__pagination-pages {
   padding: 0 var(--dm-spacing-2, 0.5rem);
   font-size: var(--dm-font-size-sm, 0.875rem);
-  color: var(--dm-neutral-600, #4b5563);
+  color: var(--dm-text-secondary, #4b5563);
 }
 
 input[type="checkbox"] {

package/src/components/DatametriaSwitch.vue

@@ -1,147 +1,320 @@
-<template>
-  <button
-    type="button"
-    role="switch"
-    class="datametria-switch"
-    :class="{
-      'is-checked': modelValue,
-      'is-disabled': disabled,
-      'is-loading': loading
-    }"
-    :aria-checked="modelValue"
-    :disabled="disabled || loading"
-    @click="handleClick"
-  >
-    <span class="datametria-switch__core" :style="coreStyle">
-      <span v-if="loading" class="datametria-switch__loading">
-        <span class="spinner"></span>
-      </span>
-    </span>
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-interface Props {
-  modelValue?: boolean
-  disabled?: boolean
-  loading?: boolean
-  activeColor?: string
-  inactiveColor?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: false,
-  disabled: false,
-  loading: false,
-  activeColor: '#0072ce',
-  inactiveColor: '#dcdfe6'
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-  change: [value: boolean]
-}>()
-
-const coreStyle = computed(() => ({
-  backgroundColor: props.modelValue ? props.activeColor : props.inactiveColor
-}))
-
-const handleClick = () => {
-  if (props.disabled || props.loading) return
-  const newValue = !props.modelValue
-  emit('update:modelValue', newValue)
-  emit('change', newValue)
-}
-</script>
-
-<style scoped>
-.datametria-switch {
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  font-size: 14px;
-  line-height: 20px;
-  height: 20px;
-  vertical-align: middle;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  padding: 0;
-}
-
-.datametria-switch.is-disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.datametria-switch.is-loading {
-  cursor: not-allowed;
-}
-
-.datametria-switch__core {
-  display: inline-block;
-  position: relative;
-  width: 40px;
-  height: 20px;
-  border-radius: 10px;
-  transition: background-color 0.3s;
-}
-
-.datametria-switch__core::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background-color: #fff;
-  transition: transform 0.3s;
-}
-
-.datametria-switch.is-checked .datametria-switch__core::after {
-  transform: translateX(20px);
-}
-
-.datametria-switch__loading {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.spinner {
-  width: 12px;
-  height: 12px;
-  border: 2px solid #fff;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.datametria-switch:focus-visible {
-  outline: 2px solid var(--dm-color-primary, #0072ce);
-  outline-offset: 2px;
-  border-radius: 10px;
-}
-
-/* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .datametria-switch__core {
-    background-color: var(--dm-bg-color-dark, #1e1e1e);
-  }
+<template>
+  <div class="datametria-switch-wrapper" :class="wrapperClasses">
+    <label v-if="label" :for="switchId" class="datametria-switch__label-text">
+      {{ label }}
+      <span v-if="required" class="datametria-switch__required">*</span>
+    </label>
+    
+    <button
+      :id="switchId"
+      type="button"
+      role="switch"
+      class="datametria-switch"
+      :aria-checked="modelValue"
+      :aria-disabled="disabled || loading"
+      :aria-label="label || ariaLabel"
+      :disabled="disabled || loading"
+      @click="handleClick"
+    >
+      <span class="datametria-switch__core" :style="coreStyle">
+        <span v-if="loading" class="datametria-switch__loading">
+          <span class="spinner" role="status" aria-label="Carregando"></span>
+        </span>
+      </span>
+    </button>
+
+    <div
+      v-if="errorMessage"
+      :id="`${switchId}-error`"
+      role="alert"
+      aria-live="polite"
+      class="datametria-switch__error"
+    >
+      {{ errorMessage }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useAnalytics } from '@/composables/useAnalytics'
+
+interface Props {
+  modelValue?: boolean
+  disabled?: boolean
+  loading?: boolean
+  label?: string
+  ariaLabel?: string
+  required?: boolean
+  errorMessage?: string
+  activeColor?: string
+  inactiveColor?: string
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  disabled: false,
+  loading: false,
+  required: false,
+  activeColor: '#3b82f6',
+  inactiveColor: '#d1d5db',
+  size: 'md'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  change: [value: boolean]
+}>()
+
+const { trackEvent } = useAnalytics()
+const switchId = `datametria-switch-${Math.random().toString(36).substr(2, 9)}`
+
+const wrapperClasses = computed(() => ({
+  'is-checked': props.modelValue,
+  'is-disabled': props.disabled,
+  'is-loading': props.loading,
+  'is-error': !!props.errorMessage,
+  [`datametria-switch-wrapper--${props.size}`]: true
+}))
+
+const coreStyle = computed(() => ({
+  backgroundColor: props.modelValue ? props.activeColor : props.inactiveColor
+}))
+
+const handleClick = () => {
+  if (props.disabled || props.loading) return
+  const newValue = !props.modelValue
+  emit('update:modelValue', newValue)
+  emit('change', newValue)
+
+  trackEvent('switch_change', {
+    component: 'DatametriaSwitch',
+    checked: newValue,
+    size: props.size
+  })
+}
+</script>
+
+<style scoped>
+.datametria-switch-wrapper {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.datametria-switch__label-text {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-primary, #1f2937);
+}
+
+.datametria-switch__required {
+  color: var(--color-error, #ef4444);
+  margin-left: 2px;
+}
+
+.datametria-switch {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.datametria-switch:focus-visible {
+  outline: none;
+}
+
+.datametria-switch:focus-visible .datametria-switch__core {
+  box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
+}
+
+.datametria-switch-wrapper.is-disabled .datametria-switch {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.datametria-switch-wrapper.is-loading .datametria-switch {
+  cursor: not-allowed;
+}
+
+.datametria-switch__core {
+  display: inline-block;
+  position: relative;
+  border-radius: 10px;
+  transition: background-color 0.3s;
+}
+
+.datametria-switch__core::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  border-radius: 50%;
+  background-color: #fff;
+  transition: transform 0.3s;
+}
+
+.datametria-switch__loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spinner {
+  border: 2px solid #fff;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
 
-[data-theme="dark"] .datametria-switch__core {
-background-color: var(--dm-bg-color-dark, #1e1e1e);
-}
-}
-</style>
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.datametria-switch__error {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--color-error, #ef4444);
+}
+
+/* Tamanhos */
+.datametria-switch-wrapper--xs .datametria-switch__core {
+  width: 32px;
+  height: 16px;
+  border-radius: 8px;
+  min-width: 44px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+}
+
+.datametria-switch-wrapper--xs .datametria-switch__core::after {
+  width: 12px;
+  height: 12px;
+}
+
+.datametria-switch-wrapper--xs.is-checked .datametria-switch__core::after {
+  transform: translateX(16px);
+}
+
+.datametria-switch-wrapper--xs .spinner {
+  width: 8px;
+  height: 8px;
+}
+
+.datametria-switch-wrapper--sm .datametria-switch__core {
+  width: 36px;
+  height: 18px;
+  border-radius: 9px;
+  min-width: 44px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+}
+
+.datametria-switch-wrapper--sm .datametria-switch__core::after {
+  width: 14px;
+  height: 14px;
+}
+
+.datametria-switch-wrapper--sm.is-checked .datametria-switch__core::after {
+  transform: translateX(18px);
+}
+
+.datametria-switch-wrapper--sm .spinner {
+  width: 10px;
+  height: 10px;
+}
+
+.datametria-switch-wrapper--md .datametria-switch__core {
+  width: 40px;
+  height: 20px;
+  border-radius: 10px;
+  min-width: 44px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+}
+
+.datametria-switch-wrapper--md .datametria-switch__core::after {
+  width: 16px;
+  height: 16px;
+}
+
+.datametria-switch-wrapper--md.is-checked .datametria-switch__core::after {
+  transform: translateX(20px);
+}
+
+.datametria-switch-wrapper--md .spinner {
+  width: 12px;
+  height: 12px;
+}
+
+.datametria-switch-wrapper--lg .datametria-switch__core {
+  width: 44px;
+  height: 22px;
+  border-radius: 11px;
+  min-width: 44px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+}
+
+.datametria-switch-wrapper--lg .datametria-switch__core::after {
+  width: 18px;
+  height: 18px;
+}
+
+.datametria-switch-wrapper--lg.is-checked .datametria-switch__core::after {
+  transform: translateX(22px);
+}
+
+.datametria-switch-wrapper--lg .spinner {
+  width: 14px;
+  height: 14px;
+}
+
+.datametria-switch-wrapper--xl .datametria-switch__core {
+  width: 48px;
+  height: 24px;
+  border-radius: 12px;
+  min-width: 48px;
+  min-height: 48px;
+  display: flex;
+  align-items: center;
+}
+
+.datametria-switch-wrapper--xl .datametria-switch__core::after {
+  width: 20px;
+  height: 20px;
+}
+
+.datametria-switch-wrapper--xl.is-checked .datametria-switch__core::after {
+  transform: translateX(24px);
+}
+
+.datametria-switch-wrapper--xl .spinner {
+  width: 16px;
+  height: 16px;
+}
+
+/* Responsividade mobile */
+@media (max-width: 640px) {
+  .datametria-switch__core {
+    min-width: 48px;
+    min-height: 48px;
+  }
+}
+</style>