@datametria/vue-components 2.3.1 → 2.4.0

package/src/components/DatametriaFormItem.vue

@@ -1,181 +1,185 @@
-<template>
-  <div
-    class="datametria-form-item"
-    :class="{
-      'is-error': errorMessage,
-      'is-required': isRequired
-    }"
-  >
-    <label
-      v-if="label"
-      class="datametria-form-item__label"
-      :style="labelStyle"
-    >
-      {{ label }}
-    </label>
-    <div class="datametria-form-item__content">
-      <slot></slot>
-      <transition name="fade">
-        <div v-if="errorMessage" class="datametria-form-item__error">
-          {{ errorMessage }}
-        </div>
-      </transition>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, inject, onMounted, onBeforeUnmount, watch } from 'vue'
-import { useValidation } from '../composables/useValidation'
-
-interface Props {
-  prop?: string
-  label?: string
-  rules?: any[]
-  required?: boolean
-}
-
-const props = defineProps<Props>()
-
-const form = inject<any>('datametriaForm', null)
-const errorMessage = ref('')
-
-const isRequired = computed(() => {
-  if (props.required) return true
-  if (!props.rules) return false
-  return props.rules.some((rule: any) => rule.required)
-})
-
-const labelStyle = computed(() => {
-  if (!form?.labelWidth) return {}
-  return { width: form.labelWidth }
-})
-
-const modelValue = computed(() => {
-  if (!form?.model || !props.prop) return undefined
-  return form.model[props.prop]
-})
-
-const validate = async (): Promise<boolean> => {
-  if (!props.prop || !props.rules) return true
-
-  const validation = useValidation()
-  const errors: string[] = []
-  
-  for (const rule of props.rules) {
-    if (rule.required && !validation.required(modelValue.value)) {
-      errors.push(rule.message || 'Campo obrigatório')
-      break
-    }
-  }
-
-  if (errors.length > 0) {
-    errorMessage.value = errors[0]
-    return false
-  }
-
-  errorMessage.value = ''
-  return true
-}
-
-const reset = () => {
-  errorMessage.value = ''
-  if (form?.model && props.prop) {
-    form.model[props.prop] = undefined
+<template>
+  <div
+    class="datametria-form-item"
+    :class="{
+      'is-error': errorMessage,
+      'is-required': isRequired
+    }"
+  >
+    <label
+      v-if="label"
+      class="datametria-form-item__label"
+      :style="labelStyle"
+    >
+      {{ label }}
+    </label>
+    <div class="datametria-form-item__content">
+      <slot></slot>
+      <transition name="fade">
+        <div v-if="errorMessage" class="datametria-form-item__error">
+          {{ errorMessage }}
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, inject, onMounted, onBeforeUnmount, watch } from 'vue'
+import { useValidation } from '../composables/useValidation'
+
+interface Props {
+  prop?: string
+  label?: string
+  rules?: any[]
+  required?: boolean
+}
+
+const props = defineProps<Props>()
+
+const form = inject<any>('datametriaForm', null)
+const errorMessage = ref('')
+
+const isRequired = computed(() => {
+  if (props.required) return true
+  if (!props.rules) return false
+  return props.rules.some((rule: any) => rule.required)
+})
+
+const labelStyle = computed(() => {
+  if (!form?.labelWidth) return {}
+  return { width: form.labelWidth }
+})
+
+const modelValue = computed(() => {
+  if (!form?.model || !props.prop) return undefined
+  return form.model[props.prop]
+})
+
+const validate = async (): Promise<boolean> => {
+  if (!props.prop || !props.rules) return true
+
+  const validation = useValidation()
+  const errors: string[] = []
+  
+  for (const rule of props.rules) {
+    if (rule.required && !validation.required(modelValue.value)) {
+      errors.push(rule.message || 'Campo obrigatório')
+      break
+    }
+  }
+
+  if (errors.length > 0) {
+    errorMessage.value = errors[0]
+    return false
+  }
+
+  errorMessage.value = ''
+  return true
+}
+
+const reset = () => {
+  errorMessage.value = ''
+  if (form?.model && props.prop) {
+    form.model[props.prop] = undefined
+  }
+}
+
+const clearValidate = () => {
+  errorMessage.value = ''
+}
+
+watch(modelValue, () => {
+  if (errorMessage.value) {
+    validate()
+  }
+})
+
+onMounted(() => {
+  if (form && props.prop) {
+    form.registerField({
+      prop: props.prop,
+      validate,
+      reset,
+      clearValidate,
+      get errorMessage() {
+        return errorMessage.value
+      }
+    })
+  }
+})
+
+onBeforeUnmount(() => {
+  if (form && props.prop) {
+    form.unregisterField(props.prop)
+  }
+})
+
+defineExpose({
+  validate,
+  reset,
+  clearValidate,
+  errorMessage
+})
+</script>
+
+<style scoped>
+.datametria-form-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 18px;
+}
+
+.datametria-form-item__label {
+  flex-shrink: 0;
+  padding-right: 12px;
+  line-height: 32px;
+  color: var(--dm-text-primary, #333);
+  font-size: var(--dm-font-size-base, 14px);
+}
+
+.datametria-form-item.is-required .datametria-form-item__label::before {
+  content: '*';
+  color: var(--dm-color-danger, #f56c6c);
+  margin-right: 4px;
+}
+
+.datametria-form-item__content {
+  flex: 1;
+  position: relative;
+}
+
+.datametria-form-item__error {
+  color: var(--dm-color-danger, #f56c6c);
+  font-size: 12px;
+  line-height: 1;
+  padding-top: 4px;
+}
+
+.datametria-form-item.is-error :deep(input),
+.datametria-form-item.is-error :deep(textarea),
+.datametria-form-item.is-error :deep(select) {
+  border-color: var(--dm-color-danger, #f56c6c);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .datametria-form-item__label {
+    color: var(--dm-text-primary-dark, #e0e0e0);
   }
-}
 
-const clearValidate = () => {
-  errorMessage.value = ''
-}
-
-watch(modelValue, () => {
-  if (errorMessage.value) {
-    validate()
-  }
-})
-
-onMounted(() => {
-  if (form && props.prop) {
-    form.registerField({
-      prop: props.prop,
-      validate,
-      reset,
-      clearValidate,
-      get errorMessage() {
-        return errorMessage.value
-      }
-    })
-  }
-})
-
-onBeforeUnmount(() => {
-  if (form && props.prop) {
-    form.unregisterField(props.prop)
-  }
-})
-
-defineExpose({
-  validate,
-  reset,
-  clearValidate,
-  errorMessage
-})
-</script>
-
-<style scoped>
-.datametria-form-item {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 18px;
-}
-
-.datametria-form-item__label {
-  flex-shrink: 0;
-  padding-right: 12px;
-  line-height: 32px;
-  color: var(--dm-text-primary, #333);
-  font-size: var(--dm-font-size-base, 14px);
-}
-
-.datametria-form-item.is-required .datametria-form-item__label::before {
-  content: '*';
-  color: var(--dm-color-danger, #f56c6c);
-  margin-right: 4px;
-}
-
-.datametria-form-item__content {
-  flex: 1;
-  position: relative;
-}
-
-.datametria-form-item__error {
-  color: var(--dm-color-danger, #f56c6c);
-  font-size: 12px;
-  line-height: 1;
-  padding-top: 4px;
-}
-
-.datametria-form-item.is-error :deep(input),
-.datametria-form-item.is-error :deep(textarea),
-.datametria-form-item.is-error :deep(select) {
-  border-color: var(--dm-color-danger, #f56c6c);
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-/* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .datametria-form-item__label {
-    color: var(--dm-text-primary-dark, #e0e0e0);
-  }
-}
-</style>
+[data-theme="dark"] .datametria-form-item__label {
+color: var(--dm-text-primary-dark, #e0e0e0);
+}
+}
+</style>

package/src/components/DatametriaGrid.vue

@@ -1,44 +1,62 @@
-<template>
-  <div
-    class="dm-grid"
-    :style="{
-      '--dm-grid-cols': cols,
-      '--dm-grid-gap': gap
-    }"
-  >
-    <slot></slot>
-  </div>
-</template>
+<template>
+  <div
+    class="dm-grid"
+    :style="{
+      '--dm-grid-cols': cols,
+      '--dm-grid-gap': gap
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  cols?: number | string
+  gap?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  cols: 12,
+  gap: 'var(--dm-spacing-4, 1rem)'
+})
+</script>
+
+<style scoped>
+.dm-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--dm-grid-cols, 12), 1fr);
+  gap: var(--dm-grid-gap, var(--dm-spacing-4, 1rem));
+}
+
+@media (max-width: 1024px) {
+  .dm-grid {
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .dm-grid {
+    grid-template-columns: 1fr;
+    gap: var(--dm-spacing-3, 0.75rem);
+  }
+}
 
-<script setup lang="ts">
-interface Props {
-  cols?: number | string
-  gap?: string
-}
-
-withDefaults(defineProps<Props>(), {
-  cols: 12,
-  gap: 'var(--dm-spacing-4, 1rem)'
-})
-</script>
-
-<style scoped>
-.dm-grid {
-  display: grid;
-  grid-template-columns: repeat(var(--dm-grid-cols, 12), 1fr);
-  gap: var(--dm-grid-gap, var(--dm-spacing-4, 1rem));
-}
+/* Dark Mode Support - Hybrid Approach */
 
-@media (max-width: 1024px) {
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
   .dm-grid {
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    background: var(--dm-bg-color-dark, #1e1e1e);
+    color: var(--dm-text-primary-dark, #e0e0e0);
+    border-color: var(--dm-border-color-dark, #404040);
   }
 }
 
-@media (max-width: 640px) {
-  .dm-grid {
-    grid-template-columns: 1fr;
-    gap: var(--dm-spacing-3, 0.75rem);
-  }
+/* Controle manual via useTheme() */
+[data-theme="dark"] .dm-grid {
+  background: var(--dm-bg-color-dark, #1e1e1e);
+  color: var(--dm-text-primary-dark, #e0e0e0);
+  border-color: var(--dm-border-color-dark, #404040);
 }
-</style>
+</style>