@datametria/vue-components 2.4.1 → 2.4.2

package/src/components/DatametriaRadio.vue

@@ -1,153 +1,242 @@
-<template>
-  <label
-    class="datametria-radio"
-    :class="{
-      'is-checked': isChecked,
-      'is-disabled': disabled
-    }"
-  >
-    <span class="datametria-radio__input">
-      <input
-        ref="inputRef"
-        type="radio"
-        :checked="isChecked"
-        :disabled="disabled"
-        :value="modelValue"
-        @change="handleChange"
-      />
-      <span class="datametria-radio__inner"></span>
-    </span>
-    <span v-if="label || $slots.default" class="datametria-radio__label">
-      <slot>{{ label }}</slot>
-    </span>
-  </label>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, inject } from 'vue'
-
-interface Props {
-  modelValue?: string | number | boolean
-  label?: string
-  disabled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  disabled: false
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string | number | boolean]
-  change: [value: string | number | boolean]
-}>()
-
-const inputRef = ref<HTMLInputElement>()
-const radioGroup = inject<any>('radioGroup', null)
-
-const isChecked = computed(() => {
-  if (radioGroup) {
-    return radioGroup.modelValue.value === props.modelValue
-  }
-  return false
-})
-
-const handleChange = () => {
-  if (props.disabled) return
-
-  if (radioGroup) {
-    radioGroup.updateValue(props.modelValue)
-  }
-  
-  emit('update:modelValue', props.modelValue!)
-  emit('change', props.modelValue!)
-}
-
-defineExpose({
-  inputRef
-})
-</script>
-
-<style scoped>
-.datametria-radio {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-  font-size: var(--dm-font-size-base, 14px);
-  color: var(--dm-text-primary, #333);
-}
-
-.datametria-radio.is-disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.datametria-radio__input {
-  position: relative;
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-}
-
-.datametria-radio__input input {
-  position: absolute;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  z-index: 1;
-}
-
-.datametria-radio__input input:disabled {
-  cursor: not-allowed;
-}
-
-.datametria-radio__inner {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 16px;
-  height: 16px;
-  border: 1px solid var(--dm-border-color, #dcdfe6);
-  border-radius: 50%;
-  background-color: var(--dm-bg-color, #fff);
-  transition: all 0.2s;
-}
-
-.datametria-radio.is-checked .datametria-radio__inner {
-  border-color: var(--dm-primary, #0072ce);
-}
-
-.datametria-radio.is-checked .datametria-radio__inner::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: var(--dm-primary, #0072ce);
-  transform: translate(-50%, -50%);
-}
-
-.datametria-radio__label {
-  margin-left: 8px;
-  line-height: 1;
-}
-
-/* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .datametria-radio {
-    color: var(--dm-text-primary-dark, #e0e0e0);
+<template>
+  <label
+    class="datametria-radio"
+    :class="radioClasses"
+  >
+    <span class="datametria-radio__input">
+      <input
+        :id="radioId"
+        ref="inputRef"
+        type="radio"
+        :checked="isChecked"
+        :disabled="disabled"
+        :value="modelValue"
+        :aria-label="label"
+        :aria-checked="isChecked"
+        :aria-disabled="disabled"
+        @change="handleChange"
+      />
+      <span class="datametria-radio__inner"></span>
+    </span>
+    <span v-if="label || $slots.default" class="datametria-radio__label">
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, inject } from 'vue'
+import { useAnalytics } from '@/composables/useAnalytics'
+
+interface Props {
+  modelValue?: string | number | boolean
+  label?: string
+  disabled?: boolean
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  size: 'md'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number | boolean]
+  change: [value: string | number | boolean]
+}>()
+
+const { trackEvent } = useAnalytics()
+const inputRef = ref<HTMLInputElement>()
+const radioGroup = inject<any>('radioGroup', null)
+const radioId = `datametria-radio-${Math.random().toString(36).substr(2, 9)}`
+
+const isChecked = computed(() => {
+  if (radioGroup) {
+    return radioGroup.modelValue.value === props.modelValue
+  }
+  return false
+})
+
+const radioClasses = computed(() => ({
+  'is-checked': isChecked.value,
+  'is-disabled': props.disabled,
+  [`datametria-radio--${props.size}`]: true
+}))
+
+const handleChange = () => {
+  if (props.disabled) return
+
+  if (radioGroup) {
+    radioGroup.updateValue(props.modelValue)
   }
+  
+  emit('update:modelValue', props.modelValue!)
+  emit('change', props.modelValue!)
+
+  trackEvent('radio_change', {
+    component: 'DatametriaRadio',
+    value: props.modelValue,
+    size: props.size
+  })
+}
+
+defineExpose({
+  inputRef
+})
+</script>
+
+<style scoped>
+.datametria-radio {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  font-size: 14px;
+  color: var(--color-text-primary, #1f2937);
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.datametria-radio.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.datametria-radio__input {
+  position: relative;
+  display: inline-block;
+  min-width: 44px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.datametria-radio__input input {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.datametria-radio__input input:disabled {
+  cursor: not-allowed;
+}
+
+.datametria-radio__input input:focus-visible + .datametria-radio__inner {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
+}
+
+.datametria-radio__inner {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--color-border, #d1d5db);
+  border-radius: 50%;
+  background-color: var(--color-background, #fff);
+  transition: all 0.2s;
+}
 
-[data-theme="dark"] .datametria-radio {
-color: var(--dm-text-primary-dark, #e0e0e0);
-}
-
-  .datametria-radio__inner {
-    border-color: var(--dm-border-color-dark, #4a4a4a);
-    background-color: var(--dm-bg-color-dark, #1e1e1e);
-  }
-}
-</style>
+.datametria-radio.is-checked .datametria-radio__inner {
+  border-color: var(--color-primary, #3b82f6);
+}
+
+.datametria-radio.is-checked .datametria-radio__inner::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--color-primary, #3b82f6);
+  transform: translate(-50%, -50%);
+}
+
+.datametria-radio__label {
+  margin-left: 8px;
+  line-height: 1.5;
+}
+
+/* Tamanhos */
+.datametria-radio--xs .datametria-radio__inner {
+  width: 12px;
+  height: 12px;
+}
+
+.datametria-radio--xs.is-checked .datametria-radio__inner::after {
+  width: 6px;
+  height: 6px;
+}
+
+.datametria-radio--xs .datametria-radio__label {
+  font-size: 11px;
+}
+
+.datametria-radio--sm .datametria-radio__inner {
+  width: 14px;
+  height: 14px;
+}
+
+.datametria-radio--sm.is-checked .datametria-radio__inner::after {
+  width: 7px;
+  height: 7px;
+}
+
+.datametria-radio--sm .datametria-radio__label {
+  font-size: 12px;
+}
+
+.datametria-radio--md .datametria-radio__inner {
+  width: 16px;
+  height: 16px;
+}
+
+.datametria-radio--md.is-checked .datametria-radio__inner::after {
+  width: 8px;
+  height: 8px;
+}
+
+.datametria-radio--md .datametria-radio__label {
+  font-size: 14px;
+}
+
+.datametria-radio--lg .datametria-radio__inner {
+  width: 18px;
+  height: 18px;
+}
+
+.datametria-radio--lg.is-checked .datametria-radio__inner::after {
+  width: 9px;
+  height: 9px;
+}
+
+.datametria-radio--lg .datametria-radio__label {
+  font-size: 16px;
+}
+
+.datametria-radio--xl .datametria-radio__inner {
+  width: 20px;
+  height: 20px;
+}
+
+.datametria-radio--xl.is-checked .datametria-radio__inner::after {
+  width: 10px;
+  height: 10px;
+}
+
+.datametria-radio--xl .datametria-radio__label {
+  font-size: 18px;
+}
+
+/* Responsividade mobile */
+@media (max-width: 640px) {
+  .datametria-radio__input {
+    min-width: 48px;
+    min-height: 48px;
+  }
+}
+</style>

package/src/components/DatametriaRadioGroup.vue

@@ -1,19 +1,47 @@
 <template>
-  <div class="datametria-radio-group" role="radiogroup">
-    <slot></slot>
+  <div
+    class="datametria-radio-group"
+    :class="groupClasses"
+    role="radiogroup"
+    :aria-label="label"
+    :aria-disabled="disabled"
+  >
+    <label v-if="label" class="datametria-radio-group__label">
+      {{ label }}
+      <span v-if="required" class="datametria-radio-group__required">*</span>
+    </label>
+    <div class="datametria-radio-group__content">
+      <slot></slot>
+    </div>
+    <div
+      v-if="errorMessage"
+      :id="`${groupId}-error`"
+      role="alert"
+      aria-live="polite"
+      class="datametria-radio-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 | boolean
   disabled?: boolean
+  label?: string
+  required?: boolean
+  errorMessage?: string
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  disabled: false
+  disabled: false,
+  required: false,
+  size: 'md'
 })
 
 const emit = defineEmits<{
@@ -21,9 +49,24 @@ const emit = defineEmits<{
   change: [value: string | number | boolean]
 }>()
 
+const { trackEvent } = useAnalytics()
+const groupId = `datametria-radio-group-${Math.random().toString(36).substr(2, 9)}`
+
+const groupClasses = computed(() => ({
+  'is-disabled': props.disabled,
+  'is-error': !!props.errorMessage,
+  [`datametria-radio-group--${props.size}`]: true
+}))
+
 const updateValue = (value: string | number | boolean) => {
   emit('update:modelValue', value)
   emit('change', value)
+  
+  trackEvent('radio_group_change', {
+    component: 'DatametriaRadioGroup',
+    value,
+    size: props.size
+  })
 }
 
 provide('radioGroup', {
@@ -35,8 +78,86 @@ provide('radioGroup', {
 
 <style scoped>
 .datametria-radio-group {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.datametria-radio-group__label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-primary, #1f2937);
+}
+
+.datametria-radio-group__required {
+  color: var(--color-error, #ef4444);
+  margin-left: 2px;
+}
+
+.datametria-radio-group__content {
   display: inline-flex;
   flex-wrap: wrap;
   gap: 12px;
 }
+
+.datametria-radio-group__error {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--color-error, #ef4444);
+}
+
+.datametria-radio-group.is-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Tamanhos */
+.datametria-radio-group--xs .datametria-radio-group__content {
+  gap: 8px;
+}
+
+.datametria-radio-group--xs .datametria-radio-group__label {
+  font-size: 11px;
+}
+
+.datametria-radio-group--sm .datametria-radio-group__content {
+  gap: 10px;
+}
+
+.datametria-radio-group--sm .datametria-radio-group__label {
+  font-size: 12px;
+}
+
+.datametria-radio-group--md .datametria-radio-group__content {
+  gap: 12px;
+}
+
+.datametria-radio-group--md .datametria-radio-group__label {
+  font-size: 14px;
+}
+
+.datametria-radio-group--lg .datametria-radio-group__content {
+  gap: 14px;
+}
+
+.datametria-radio-group--lg .datametria-radio-group__label {
+  font-size: 16px;
+}
+
+.datametria-radio-group--xl .datametria-radio-group__content {
+  gap: 16px;
+}
+
+.datametria-radio-group--xl .datametria-radio-group__label {
+  font-size: 18px;
+}
+
+/* Responsividade mobile */
+@media (max-width: 640px) {
+  .datametria-radio-group__content {
+    gap: 16px;
+  }
+}
 </style>