@datametria/vue-components 2.3.0 → 2.4.0

package/src/components/DatametriaRadio.vue

@@ -1,149 +1,153 @@
-<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-color-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-color-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="{
+      '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-color-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-color-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);
   }
 
-  .datametria-radio__inner {
-    border-color: var(--dm-border-color-dark, #4a4a4a);
-    background-color: var(--dm-bg-color-dark, #1e1e1e);
-  }
-}
-</style>
+[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>

package/src/components/DatametriaRadioGroup.vue

@@ -1,42 +1,60 @@
-<template>
-  <div class="datametria-radio-group" role="radiogroup">
-    <slot></slot>
-  </div>
-</template>
+<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;
+}
 
-<script setup lang="ts">
-import { provide, computed } from 'vue'
+/* Dark Mode Support - Hybrid Approach */
 
-interface Props {
-  modelValue?: string | number | boolean
-  disabled?: boolean
+/* 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);
+  }
 }
 
-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;
+/* 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);
 }
-</style>
+</style>

package/src/components/DatametriaResult.vue

@@ -1,133 +1,137 @@
-<template>
-  <div class="datametria-result" :class="classes">
-    <div class="datametria-result__icon">
-      <slot name="icon">
-        <svg v-if="status === 'success'" viewBox="0 0 48 48" fill="none">
-          <path d="M24 4C12.96 4 4 12.96 4 24s8.96 20 20 20 20-8.96 20-20S35.04 4 24 4zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z" fill="currentColor"/>
-        </svg>
-        <svg v-else-if="status === 'warning'" viewBox="0 0 48 48" fill="none">
-          <path d="M2 42h44L24 4 2 42zm24-6h-4v-4h4v4zm0-8h-4v-8h4v8z" fill="currentColor"/>
-        </svg>
-        <svg v-else-if="status === 'error'" viewBox="0 0 48 48" fill="none">
-          <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm10 27.17L31.17 34 24 26.83 16.83 34 14 31.17 21.17 24 14 16.83 16.83 14 24 21.17 31.17 14 34 16.83 26.83 24 34 31.17z" fill="currentColor"/>
-        </svg>
-        <svg v-else viewBox="0 0 48 48" fill="none">
-          <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm2 30h-4v-4h4v4zm0-8h-4V14h4v12z" fill="currentColor"/>
-        </svg>
-      </slot>
-    </div>
-
-    <div class="datametria-result__title">
-      <slot name="title">
-        <p>{{ title }}</p>
-      </slot>
-    </div>
-
-    <div v-if="subtitle || $slots.subtitle" class="datametria-result__subtitle">
-      <slot name="subtitle">
-        <p>{{ subtitle }}</p>
-      </slot>
-    </div>
-
-    <div v-if="$slots.extra" class="datametria-result__extra">
-      <slot name="extra" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-type ResultStatus = 'success' | 'warning' | 'error' | 'info'
-
-interface Props {
-  status?: ResultStatus
-  title?: string
-  subtitle?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  status: 'info',
-  title: '',
-  subtitle: ''
-})
-
-const classes = computed(() => ({
-  [`datametria-result--${props.status}`]: true
-}))
-</script>
-
-<style scoped>
-.datametria-result {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 48px 32px;
-  text-align: center;
-}
-
-.datametria-result__icon {
-  width: 72px;
-  height: 72px;
-  margin-bottom: 24px;
-}
-
-.datametria-result__icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-.datametria-result--success .datametria-result__icon {
-  color: var(--datametria-success-color, #67c23a);
-}
-
-.datametria-result--warning .datametria-result__icon {
-  color: var(--datametria-warning-color, #e6a23c);
-}
-
-.datametria-result--error .datametria-result__icon {
-  color: var(--datametria-error-color, #f56c6c);
-}
-
-.datametria-result--info .datametria-result__icon {
-  color: var(--datametria-info-color, #909399);
-}
-
-.datametria-result__title {
-  margin-bottom: 12px;
-  font-size: 20px;
-  font-weight: 500;
-  color: var(--datametria-text-primary, #303133);
-  line-height: 1.3;
-}
-
-.datametria-result__title p {
-  margin: 0;
-}
-
-.datametria-result__subtitle {
-  margin-bottom: 24px;
-  font-size: 14px;
-  color: var(--datametria-text-secondary, #606266);
-  line-height: 1.5;
-}
-
-.datametria-result__subtitle p {
-  margin: 0;
-}
-
-.datametria-result__extra {
-  margin-top: 8px;
-}
-
-@media (prefers-color-scheme: dark) {
-  .datametria-result__title {
-    color: var(--datametria-text-primary, #e5eaf3);
+<template>
+  <div class="datametria-result" :class="classes">
+    <div class="datametria-result__icon">
+      <slot name="icon">
+        <svg v-if="status === 'success'" viewBox="0 0 48 48" fill="none">
+          <path d="M24 4C12.96 4 4 12.96 4 24s8.96 20 20 20 20-8.96 20-20S35.04 4 24 4zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z" fill="currentColor"/>
+        </svg>
+        <svg v-else-if="status === 'warning'" viewBox="0 0 48 48" fill="none">
+          <path d="M2 42h44L24 4 2 42zm24-6h-4v-4h4v4zm0-8h-4v-8h4v8z" fill="currentColor"/>
+        </svg>
+        <svg v-else-if="status === 'error'" viewBox="0 0 48 48" fill="none">
+          <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm10 27.17L31.17 34 24 26.83 16.83 34 14 31.17 21.17 24 14 16.83 16.83 14 24 21.17 31.17 14 34 16.83 26.83 24 34 31.17z" fill="currentColor"/>
+        </svg>
+        <svg v-else viewBox="0 0 48 48" fill="none">
+          <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm2 30h-4v-4h4v4zm0-8h-4V14h4v12z" fill="currentColor"/>
+        </svg>
+      </slot>
+    </div>
+
+    <div class="datametria-result__title">
+      <slot name="title">
+        <p>{{ title }}</p>
+      </slot>
+    </div>
+
+    <div v-if="subtitle || $slots.subtitle" class="datametria-result__subtitle">
+      <slot name="subtitle">
+        <p>{{ subtitle }}</p>
+      </slot>
+    </div>
+
+    <div v-if="$slots.extra" class="datametria-result__extra">
+      <slot name="extra" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type ResultStatus = 'success' | 'warning' | 'error' | 'info'
+
+interface Props {
+  status?: ResultStatus
+  title?: string
+  subtitle?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  status: 'info',
+  title: '',
+  subtitle: ''
+})
+
+const classes = computed(() => ({
+  [`datametria-result--${props.status}`]: true
+}))
+</script>
+
+<style scoped>
+.datametria-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 32px;
+  text-align: center;
+}
+
+.datametria-result__icon {
+  width: 72px;
+  height: 72px;
+  margin-bottom: 24px;
+}
+
+.datametria-result__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.datametria-result--success .datametria-result__icon {
+  color: var(--datametria-success-color, #67c23a);
+}
+
+.datametria-result--warning .datametria-result__icon {
+  color: var(--datametria-warning-color, #e6a23c);
+}
+
+.datametria-result--error .datametria-result__icon {
+  color: var(--datametria-error-color, #f56c6c);
+}
+
+.datametria-result--info .datametria-result__icon {
+  color: var(--datametria-info-color, #909399);
+}
+
+.datametria-result__title {
+  margin-bottom: 12px;
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--datametria-text-primary, #303133);
+  line-height: 1.3;
+}
+
+.datametria-result__title p {
+  margin: 0;
+}
+
+.datametria-result__subtitle {
+  margin-bottom: 24px;
+  font-size: 14px;
+  color: var(--datametria-text-secondary, #606266);
+  line-height: 1.5;
+}
+
+.datametria-result__subtitle p {
+  margin: 0;
+}
+
+.datametria-result__extra {
+  margin-top: 8px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .datametria-result__title {
+    color: var(--datametria-text-primary, #e5eaf3);
   }
 
-  .datametria-result__subtitle {
-    color: var(--datametria-text-secondary, #a3a6ad);
-  }
-}
-</style>
+[data-theme="dark"] .datametria-result__title {
+color: var(--datametria-text-primary, #e5eaf3);
+}
+
+  .datametria-result__subtitle {
+    color: var(--datametria-text-secondary, #a3a6ad);
+  }
+}
+</style>