@datametria/vue-components 2.4.0 → 2.4.2

package/src/components/DatametriaCheckboxGroup.vue

@@ -1,61 +1,164 @@
-<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;
-}
-
-/* Dark Mode Support - Hybrid Approach */
-
-/* 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);
-  }
+<template>
+  <div
+    class="datametria-checkbox-group"
+    :class="groupClasses"
+    role="group"
+    :aria-label="label"
+    :aria-disabled="disabled"
+  >
+    <label v-if="label" class="datametria-checkbox-group__label">
+      {{ label }}
+      <span v-if="required" class="datametria-checkbox-group__required">*</span>
+    </label>
+    <div class="datametria-checkbox-group__content">
+      <slot></slot>
+    </div>
+    <div
+      v-if="errorMessage"
+      :id="`${groupId}-error`"
+      role="alert"
+      aria-live="polite"
+      class="datametria-checkbox-group__error"
+    >
+      {{ errorMessage }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { provide, computed } from 'vue'
+import { useAnalytics } from '@/composables/useAnalytics'
+
+interface Props {
+  modelValue?: (string | number)[]
+  disabled?: boolean
+  label?: string
+  required?: boolean
+  errorMessage?: string
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  disabled: false,
+  required: false,
+  size: 'md'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: (string | number)[]]
+  change: [value: (string | number)[]]
+}>()
+
+const { trackEvent } = useAnalytics()
+const groupId = `datametria-checkbox-group-${Math.random().toString(36).substr(2, 9)}`
+
+const groupClasses = computed(() => ({
+  'is-disabled': props.disabled,
+  'is-error': !!props.errorMessage,
+  [`datametria-checkbox-group--${props.size}`]: true
+}))
+
+const updateValue = (value: (string | number)[]) => {
+  emit('update:modelValue', value)
+  emit('change', value)
+  
+  trackEvent('checkbox_group_change', {
+    component: 'DatametriaCheckboxGroup',
+    selectedCount: value.length,
+    size: props.size
+  })
+}
+
+provide('checkboxGroup', {
+  modelValue: computed(() => props.modelValue),
+  disabled: computed(() => props.disabled),
+  updateValue
+})
+</script>
+
+<style scoped>
+.datametria-checkbox-group {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.datametria-checkbox-group__label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-primary, #1f2937);
+}
+
+.datametria-checkbox-group__required {
+  color: var(--color-error, #ef4444);
+  margin-left: 2px;
+}
+
+.datametria-checkbox-group__content {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.datametria-checkbox-group__error {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--color-error, #ef4444);
+}
+
+.datametria-checkbox-group.is-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 
-/* 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);
+/* Tamanhos */
+.datametria-checkbox-group--xs .datametria-checkbox-group__content {
+  gap: 8px;
+}
+
+.datametria-checkbox-group--xs .datametria-checkbox-group__label {
+  font-size: 11px;
+}
+
+.datametria-checkbox-group--sm .datametria-checkbox-group__content {
+  gap: 10px;
+}
+
+.datametria-checkbox-group--sm .datametria-checkbox-group__label {
+  font-size: 12px;
+}
+
+.datametria-checkbox-group--md .datametria-checkbox-group__content {
+  gap: 12px;
+}
+
+.datametria-checkbox-group--md .datametria-checkbox-group__label {
+  font-size: 14px;
+}
+
+.datametria-checkbox-group--lg .datametria-checkbox-group__content {
+  gap: 14px;
+}
+
+.datametria-checkbox-group--lg .datametria-checkbox-group__label {
+  font-size: 16px;
+}
+
+.datametria-checkbox-group--xl .datametria-checkbox-group__content {
+  gap: 16px;
+}
+
+.datametria-checkbox-group--xl .datametria-checkbox-group__label {
+  font-size: 18px;
+}
+
+/* Responsividade mobile */
+@media (max-width: 640px) {
+  .datametria-checkbox-group__content {
+    gap: 16px;
+  }
 }
-</style>
+</style>