@datametria/vue-components 2.3.0 → 2.4.0

package/src/components/DatametriaCard.vue

@@ -1,72 +1,90 @@
-<template>
-  <div :class="cardClasses">
-    <div v-if="title || $slots.header" class="datametria-card__header">
-      <slot name="header">
-        <h3 class="datametria-card__title">{{ title }}</h3>
-      </slot>
-    </div>
-    
-    <div class="datametria-card__content">
-      <slot />
-    </div>
-    
-    <div v-if="$slots.footer" class="datametria-card__footer">
-      <slot name="footer" />
-    </div>
-  </div>
-</template>
+<template>
+  <div :class="cardClasses">
+    <div v-if="title || $slots.header" class="datametria-card__header">
+      <slot name="header">
+        <h3 class="datametria-card__title">{{ title }}</h3>
+      </slot>
+    </div>
+    
+    <div class="datametria-card__content">
+      <slot />
+    </div>
+    
+    <div v-if="$slots.footer" class="datametria-card__footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  title?: string
+  padding?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  padding: true
+})
+
+const cardClasses = computed(() => [
+  'datametria-card',
+  {
+    'datametria-card--no-padding': !props.padding
+  }
+])
+</script>
+
+<style scoped>
+.datametria-card {
+  background: var(--dm-neutral-50, #ffffff);
+  border-radius: var(--dm-radius-lg, 0.5rem);
+  box-shadow: var(--dm-shadow-sm, 0 1px 3px 0 rgba(0, 0, 0, 0.1));
+  overflow: hidden;
+}
+
+.datametria-card__header {
+  padding: var(--dm-spacing-6, 1.5rem);
+  border-bottom: 1px solid var(--dm-neutral-200, #e5e7eb);
+}
+
+.datametria-card__title {
+  margin: 0;
+  font-size: var(--dm-font-size-xl, 1.25rem);
+  font-weight: var(--dm-font-weight-semibold, 600);
+  color: var(--dm-neutral-900, #111827);
+}
+
+.datametria-card__content {
+  padding: var(--dm-spacing-6, 1.5rem);
+}
+
+.datametria-card--no-padding .datametria-card__content {
+  padding: 0;
+}
+
+.datametria-card__footer {
+  padding: var(--dm-spacing-6, 1.5rem);
+  border-top: 1px solid var(--dm-neutral-200, #e5e7eb);
+  background: var(--dm-neutral-100, #f9fafb);
+}
 
-<script setup lang="ts">
-import { computed } from 'vue'
+/* Dark Mode Support - Hybrid Approach */
 
-interface Props {
-  title?: string
-  padding?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  padding: true
-})
-
-const cardClasses = computed(() => [
-  'datametria-card',
-  {
-    'datametria-card--no-padding': !props.padding
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .cardClasses {
+    background: var(--dm-bg-color-dark, #1e1e1e);
+    color: var(--dm-text-primary-dark, #e0e0e0);
+    border-color: var(--dm-border-color-dark, #404040);
   }
-])
-</script>
-
-<style scoped>
-.datametria-card {
-  background: var(--dm-neutral-50, #ffffff);
-  border-radius: var(--dm-radius-lg, 0.5rem);
-  box-shadow: var(--dm-shadow-sm, 0 1px 3px 0 rgba(0, 0, 0, 0.1));
-  overflow: hidden;
-}
-
-.datametria-card__header {
-  padding: var(--dm-spacing-6, 1.5rem);
-  border-bottom: 1px solid var(--dm-neutral-200, #e5e7eb);
-}
-
-.datametria-card__title {
-  margin: 0;
-  font-size: var(--dm-font-size-xl, 1.25rem);
-  font-weight: var(--dm-font-weight-semibold, 600);
-  color: var(--dm-neutral-900, #111827);
-}
-
-.datametria-card__content {
-  padding: var(--dm-spacing-6, 1.5rem);
-}
-
-.datametria-card--no-padding .datametria-card__content {
-  padding: 0;
 }
 
-.datametria-card__footer {
-  padding: var(--dm-spacing-6, 1.5rem);
-  border-top: 1px solid var(--dm-neutral-200, #e5e7eb);
-  background: var(--dm-neutral-100, #f9fafb);
+/* Controle manual via useTheme() */
+[data-theme="dark"] .cardClasses {
+  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/DatametriaCheckbox.vue

@@ -1,195 +1,199 @@
-<template>
-  <label
-    class="datametria-checkbox"
-    :class="{
-      'is-checked': isChecked,
-      'is-disabled': disabled,
-      'is-indeterminate': indeterminate
-    }"
-  >
-    <span class="datametria-checkbox__input">
-      <input
-        ref="inputRef"
-        type="checkbox"
-        :checked="isChecked"
-        :disabled="disabled"
-        :indeterminate="indeterminate"
-        @change="handleChange"
-      />
-      <span class="datametria-checkbox__inner"></span>
-    </span>
-    <span v-if="label || $slots.default" class="datametria-checkbox__label">
-      <slot>{{ label }}</slot>
-    </span>
-  </label>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, inject } from 'vue'
-
-interface Props {
-  modelValue?: boolean | string | number
-  label?: string
-  disabled?: boolean
-  indeterminate?: boolean
-  trueValue?: boolean | string | number
-  falseValue?: boolean | string | number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: false,
-  disabled: false,
-  indeterminate: false,
-  trueValue: true,
-  falseValue: false
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean | string | number | (string | number)[]]
-  change: [value: boolean | string | number | (string | number)[]]
-}>()
-
-const inputRef = ref<HTMLInputElement>()
-const checkboxGroup = inject<any>('checkboxGroup', null)
-
-const isChecked = computed(() => {
-  if (checkboxGroup) {
-    return checkboxGroup.modelValue.value.includes(props.modelValue)
-  }
-  return props.modelValue === props.trueValue
-})
-
-const handleChange = (e: Event) => {
-  if (props.disabled) return
-
-  const target = e.target as HTMLInputElement
-  const checked = target.checked
-
-  if (checkboxGroup) {
-    const value = [...checkboxGroup.modelValue.value]
-    if (checked) {
-      value.push(props.modelValue)
-    } else {
-      const index = value.indexOf(props.modelValue)
-      if (index > -1) value.splice(index, 1)
-    }
-    checkboxGroup.updateValue(value)
-    emit('update:modelValue', value)
-    emit('change', value)
-  } else {
-    const newValue = checked ? props.trueValue : props.falseValue
-    emit('update:modelValue', newValue)
-    emit('change', newValue)
+<template>
+  <label
+    class="datametria-checkbox"
+    :class="{
+      'is-checked': isChecked,
+      'is-disabled': disabled,
+      'is-indeterminate': indeterminate
+    }"
+  >
+    <span class="datametria-checkbox__input">
+      <input
+        ref="inputRef"
+        type="checkbox"
+        :checked="isChecked"
+        :disabled="disabled"
+        :indeterminate="indeterminate"
+        @change="handleChange"
+      />
+      <span class="datametria-checkbox__inner"></span>
+    </span>
+    <span v-if="label || $slots.default" class="datametria-checkbox__label">
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, inject } from 'vue'
+
+interface Props {
+  modelValue?: boolean | string | number
+  label?: string
+  disabled?: boolean
+  indeterminate?: boolean
+  trueValue?: boolean | string | number
+  falseValue?: boolean | string | number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  disabled: false,
+  indeterminate: false,
+  trueValue: true,
+  falseValue: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean | string | number | (string | number)[]]
+  change: [value: boolean | string | number | (string | number)[]]
+}>()
+
+const inputRef = ref<HTMLInputElement>()
+const checkboxGroup = inject<any>('checkboxGroup', null)
+
+const isChecked = computed(() => {
+  if (checkboxGroup) {
+    return checkboxGroup.modelValue.value.includes(props.modelValue)
+  }
+  return props.modelValue === props.trueValue
+})
+
+const handleChange = (e: Event) => {
+  if (props.disabled) return
+
+  const target = e.target as HTMLInputElement
+  const checked = target.checked
+
+  if (checkboxGroup) {
+    const value = [...checkboxGroup.modelValue.value]
+    if (checked) {
+      value.push(props.modelValue)
+    } else {
+      const index = value.indexOf(props.modelValue)
+      if (index > -1) value.splice(index, 1)
+    }
+    checkboxGroup.updateValue(value)
+    emit('update:modelValue', value)
+    emit('change', value)
+  } else {
+    const newValue = checked ? props.trueValue : props.falseValue
+    emit('update:modelValue', newValue)
+    emit('change', newValue)
+  }
+}
+
+watch(() => props.indeterminate, (val) => {
+  if (inputRef.value) {
+    inputRef.value.indeterminate = val
+  }
+}, { immediate: true })
+
+defineExpose({
+  inputRef
+})
+</script>
+
+<style scoped>
+.datametria-checkbox {
+  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-checkbox.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.datametria-checkbox__input {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+}
+
+.datametria-checkbox__input input {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.datametria-checkbox__input input:disabled {
+  cursor: not-allowed;
+}
+
+.datametria-checkbox__inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--dm-border-color, #dcdfe6);
+  border-radius: var(--dm-border-radius-small, 2px);
+  background-color: var(--dm-bg-color, #fff);
+  transition: all 0.2s;
+}
+
+.datametria-checkbox.is-checked .datametria-checkbox__inner {
+  background-color: var(--dm-color-primary, #0072ce);
+  border-color: var(--dm-color-primary, #0072ce);
+}
+
+.datametria-checkbox.is-checked .datametria-checkbox__inner::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 5px;
+  width: 4px;
+  height: 8px;
+  border: 2px solid #fff;
+  border-top: 0;
+  border-left: 0;
+  transform: rotate(45deg);
+}
+
+.datametria-checkbox.is-indeterminate .datametria-checkbox__inner {
+  background-color: var(--dm-color-primary, #0072ce);
+  border-color: var(--dm-color-primary, #0072ce);
+}
+
+.datametria-checkbox.is-indeterminate .datametria-checkbox__inner::after {
+  content: '';
+  position: absolute;
+  top: 6px;
+  left: 3px;
+  width: 8px;
+  height: 2px;
+  background-color: #fff;
+  transform: none;
+  border: none;
+}
+
+.datametria-checkbox__label {
+  margin-left: 8px;
+  line-height: 1;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .datametria-checkbox {
+    color: var(--dm-text-primary-dark, #e0e0e0);
   }
-}
-
-watch(() => props.indeterminate, (val) => {
-  if (inputRef.value) {
-    inputRef.value.indeterminate = val
-  }
-}, { immediate: true })
-
-defineExpose({
-  inputRef
-})
-</script>
-
-<style scoped>
-.datametria-checkbox {
-  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-checkbox.is-disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.datametria-checkbox__input {
-  position: relative;
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-}
-
-.datametria-checkbox__input input {
-  position: absolute;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  z-index: 1;
-}
-
-.datametria-checkbox__input input:disabled {
-  cursor: not-allowed;
-}
-
-.datametria-checkbox__inner {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 16px;
-  height: 16px;
-  border: 1px solid var(--dm-border-color, #dcdfe6);
-  border-radius: var(--dm-border-radius-small, 2px);
-  background-color: var(--dm-bg-color, #fff);
-  transition: all 0.2s;
-}
-
-.datametria-checkbox.is-checked .datametria-checkbox__inner {
-  background-color: var(--dm-color-primary, #0072ce);
-  border-color: var(--dm-color-primary, #0072ce);
-}
-
-.datametria-checkbox.is-checked .datametria-checkbox__inner::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 5px;
-  width: 4px;
-  height: 8px;
-  border: 2px solid #fff;
-  border-top: 0;
-  border-left: 0;
-  transform: rotate(45deg);
-}
-
-.datametria-checkbox.is-indeterminate .datametria-checkbox__inner {
-  background-color: var(--dm-color-primary, #0072ce);
-  border-color: var(--dm-color-primary, #0072ce);
-}
-
-.datametria-checkbox.is-indeterminate .datametria-checkbox__inner::after {
-  content: '';
-  position: absolute;
-  top: 6px;
-  left: 3px;
-  width: 8px;
-  height: 2px;
-  background-color: #fff;
-  transform: none;
-  border: none;
-}
-
-.datametria-checkbox__label {
-  margin-left: 8px;
-  line-height: 1;
-}
-
-/* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .datametria-checkbox {
-    color: var(--dm-text-primary-dark, #e0e0e0);
-  }
-
-  .datametria-checkbox__inner {
-    border-color: var(--dm-border-color-dark, #4a4a4a);
-    background-color: var(--dm-bg-color-dark, #1e1e1e);
-  }
-}
-</style>
+[data-theme="dark"] .datametria-checkbox {
+color: var(--dm-text-primary-dark, #e0e0e0);
+}
+
+  .datametria-checkbox__inner {
+    border-color: var(--dm-border-color-dark, #4a4a4a);
+    background-color: var(--dm-bg-color-dark, #1e1e1e);
+  }
+}
+</style>

package/src/components/DatametriaCheckboxGroup.vue

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