@datametria/vue-components 2.3.0 → 2.4.0

package/src/components/DatametriaFloatingBar.vue

@@ -1,126 +1,144 @@
-<template>
-  <div
-    :class="floatingBarClasses"
-    role="toolbar"
-    :aria-label="ariaLabel"
-    :style="positionStyle"
-  >
-    <div class="dm-floating-bar__content">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-interface Props {
-  position?: 'top' | 'bottom' | 'left' | 'right'
-  variant?: 'light' | 'dark' | 'primary'
-  offset?: string
-  shadow?: boolean
-  rounded?: boolean
-  ariaLabel?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  position: 'bottom',
-  variant: 'light',
-  offset: '16px',
-  shadow: true,
-  rounded: true,
-  ariaLabel: 'Floating toolbar'
-})
-
-const floatingBarClasses = computed(() => [
-  'dm-floating-bar',
-  `dm-floating-bar--${props.position}`,
-  `dm-floating-bar--${props.variant}`,
-  { 'dm-floating-bar--shadow': props.shadow },
-  { 'dm-floating-bar--rounded': props.rounded }
-])
-
-const positionStyle = computed(() => {
-  const styles: Record<string, string> = {}
-  
-  switch (props.position) {
-    case 'top':
-      styles.top = props.offset
-      break
-    case 'bottom':
-      styles.bottom = props.offset
-      break
-    case 'left':
-      styles.left = props.offset
-      break
-    case 'right':
-      styles.right = props.offset
-      break
-  }
-  
-  return styles
-})
-</script>
-
-<style scoped>
-.dm-floating-bar {
-  position: fixed;
-  z-index: 1000;
-  background: var(--dm-neutral-50, #ffffff);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
-  transition: all 0.3s ease;
-}
-
-.dm-floating-bar--top,
-.dm-floating-bar--bottom {
-  left: 50%;
-  transform: translateX(-50%);
-  max-width: calc(100% - 32px);
-}
-
-.dm-floating-bar--left,
-.dm-floating-bar--right {
-  top: 50%;
-  transform: translateY(-50%);
-  max-height: calc(100vh - 32px);
-}
-
-.dm-floating-bar--dark {
-  background: var(--dm-neutral-900, #111827);
-  border-color: var(--dm-neutral-800, #1f2937);
-  color: var(--dm-neutral-50, #ffffff);
-}
-
-.dm-floating-bar--primary {
-  background: var(--dm-primary, #0072CE);
-  border-color: color-mix(in srgb, var(--dm-primary, #0072CE) 90%, black);
-  color: var(--dm-neutral-50, #ffffff);
-}
-
-.dm-floating-bar--shadow {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-
-.dm-floating-bar--rounded {
-  border-radius: var(--dm-radius-lg, 0.5rem);
-}
-
-.dm-floating-bar__content {
-  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-4, 1rem);
-  display: flex;
-  align-items: center;
-  gap: var(--dm-spacing-2, 0.5rem);
-}
-
-@media (max-width: 768px) {
-  .dm-floating-bar--top,
-  .dm-floating-bar--bottom {
-    max-width: calc(100% - 16px);
-  }
-
-  .dm-floating-bar__content {
-    padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-3, 0.75rem);
-    gap: var(--dm-spacing-1, 0.25rem);
-  }
-}
-</style>
+<template>
+  <div
+    :class="floatingBarClasses"
+    role="toolbar"
+    :aria-label="ariaLabel"
+    :style="positionStyle"
+  >
+    <div class="dm-floating-bar__content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  position?: 'top' | 'bottom' | 'left' | 'right'
+  variant?: 'light' | 'dark' | 'primary'
+  offset?: string
+  shadow?: boolean
+  rounded?: boolean
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  position: 'bottom',
+  variant: 'light',
+  offset: '16px',
+  shadow: true,
+  rounded: true,
+  ariaLabel: 'Floating toolbar'
+})
+
+const floatingBarClasses = computed(() => [
+  'dm-floating-bar',
+  `dm-floating-bar--${props.position}`,
+  `dm-floating-bar--${props.variant}`,
+  { 'dm-floating-bar--shadow': props.shadow },
+  { 'dm-floating-bar--rounded': props.rounded }
+])
+
+const positionStyle = computed(() => {
+  const styles: Record<string, string> = {}
+  
+  switch (props.position) {
+    case 'top':
+      styles.top = props.offset
+      break
+    case 'bottom':
+      styles.bottom = props.offset
+      break
+    case 'left':
+      styles.left = props.offset
+      break
+    case 'right':
+      styles.right = props.offset
+      break
+  }
+  
+  return styles
+})
+</script>
+
+<style scoped>
+.dm-floating-bar {
+  position: fixed;
+  z-index: 1000;
+  background: var(--dm-neutral-50, #ffffff);
+  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  transition: all 0.3s ease;
+}
+
+.dm-floating-bar--top,
+.dm-floating-bar--bottom {
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: calc(100% - 32px);
+}
+
+.dm-floating-bar--left,
+.dm-floating-bar--right {
+  top: 50%;
+  transform: translateY(-50%);
+  max-height: calc(100vh - 32px);
+}
+
+.dm-floating-bar--dark {
+  background: var(--dm-neutral-900, #111827);
+  border-color: var(--dm-neutral-800, #1f2937);
+  color: var(--dm-neutral-50, #ffffff);
+}
+
+.dm-floating-bar--primary {
+  background: var(--dm-primary, #0072CE);
+  border-color: color-mix(in srgb, var(--dm-primary, #0072CE) 90%, black);
+  color: var(--dm-neutral-50, #ffffff);
+}
+
+.dm-floating-bar--shadow {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.dm-floating-bar--rounded {
+  border-radius: var(--dm-radius-lg, 0.5rem);
+}
+
+.dm-floating-bar__content {
+  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-4, 1rem);
+  display: flex;
+  align-items: center;
+  gap: var(--dm-spacing-2, 0.5rem);
+}
+
+@media (max-width: 768px) {
+  .dm-floating-bar--top,
+  .dm-floating-bar--bottom {
+    max-width: calc(100% - 16px);
+  }
+
+  .dm-floating-bar__content {
+    padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-3, 0.75rem);
+    gap: var(--dm-spacing-1, 0.25rem);
+  }
+}
+
+/* Dark Mode Support - Hybrid Approach */
+
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .dm-floating-bar--light {
+    background: var(--dm-neutral-900, #111827);
+    border-color: var(--dm-neutral-800, #1f2937);
+    color: var(--dm-neutral-50, #ffffff);
+  }
+}
+
+/* Controle manual via useTheme() */
+[data-theme="dark"] .dm-floating-bar--light {
+  background: var(--dm-neutral-900, #111827);
+  border-color: var(--dm-neutral-800, #1f2937);
+  color: var(--dm-neutral-50, #ffffff);
+}
+</style>

package/src/components/DatametriaForm.vue

@@ -1,160 +1,178 @@
-<template>
-  <form
-    class="datametria-form"
-    :class="{
-      [`datametria-form--label-${labelPosition}`]: labelPosition,
-      'datametria-form--inline': inline
-    }"
-    @submit.prevent="handleSubmit"
-  >
-    <slot></slot>
-  </form>
-</template>
-
-<script setup lang="ts">
-import { provide, reactive, ref } from 'vue'
-
-interface Props {
-  model?: Record<string, any>
-  rules?: Record<string, any>
-  labelWidth?: string
-  labelPosition?: 'left' | 'right' | 'top'
-  inline?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  model: () => ({}),
-  rules: () => ({}),
-  labelPosition: 'right',
-  inline: false
-})
-
-const emit = defineEmits<{
-  validate: [valid: boolean, errors: Record<string, string[]>]
-  submit: [model: Record<string, any>]
-}>()
-
-const fields = reactive<Map<string, any>>(new Map())
-const errors = ref<Record<string, string[]>>({})
-
-const registerField = (field: any) => {
-  fields.set(field.prop, field)
-}
-
-const unregisterField = (prop: string) => {
-  fields.delete(prop)
-}
-
-const validate = async (): Promise<boolean> => {
-  const validationPromises: Promise<boolean>[] = []
-  const newErrors: Record<string, string[]> = {}
-
-  fields.forEach((field) => {
-    validationPromises.push(
-      field.validate().then((valid: boolean) => {
-        if (!valid && field.errorMessage) {
-          newErrors[field.prop] = [field.errorMessage]
-        }
-        return valid
-      })
-    )
-  })
-
-  const results = await Promise.all(validationPromises)
-  const isValid = results.every((result) => result)
-  
-  errors.value = newErrors
-  emit('validate', isValid, newErrors)
-  
-  return isValid
-}
-
-const validateField = async (prop: string): Promise<boolean> => {
-  const field = fields.get(prop)
-  if (!field) return true
-  
-  const valid = await field.validate()
-  if (!valid && field.errorMessage) {
-    errors.value[prop] = [field.errorMessage]
-  } else {
-    delete errors.value[prop]
-  }
-  
-  return valid
-}
-
-const resetFields = () => {
-  fields.forEach((field) => {
-    field.reset()
-  })
-  errors.value = {}
-}
-
-const clearValidate = (props?: string | string[]) => {
-  if (!props) {
-    errors.value = {}
-    fields.forEach((field) => field.clearValidate())
-    return
+<template>
+  <form
+    class="datametria-form"
+    :class="{
+      [`datametria-form--label-${labelPosition}`]: labelPosition,
+      'datametria-form--inline': inline
+    }"
+    @submit.prevent="handleSubmit"
+  >
+    <slot></slot>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { provide, reactive, ref } from 'vue'
+
+interface Props {
+  model?: Record<string, any>
+  rules?: Record<string, any>
+  labelWidth?: string
+  labelPosition?: 'left' | 'right' | 'top'
+  inline?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  model: () => ({}),
+  rules: () => ({}),
+  labelPosition: 'right',
+  inline: false
+})
+
+const emit = defineEmits<{
+  validate: [valid: boolean, errors: Record<string, string[]>]
+  submit: [model: Record<string, any>]
+}>()
+
+const fields = reactive<Map<string, any>>(new Map())
+const errors = ref<Record<string, string[]>>({})
+
+const registerField = (field: any) => {
+  fields.set(field.prop, field)
+}
+
+const unregisterField = (prop: string) => {
+  fields.delete(prop)
+}
+
+const validate = async (): Promise<boolean> => {
+  const validationPromises: Promise<boolean>[] = []
+  const newErrors: Record<string, string[]> = {}
+
+  fields.forEach((field) => {
+    validationPromises.push(
+      field.validate().then((valid: boolean) => {
+        if (!valid && field.errorMessage) {
+          newErrors[field.prop] = [field.errorMessage]
+        }
+        return valid
+      })
+    )
+  })
+
+  const results = await Promise.all(validationPromises)
+  const isValid = results.every((result) => result)
+  
+  errors.value = newErrors
+  emit('validate', isValid, newErrors)
+  
+  return isValid
+}
+
+const validateField = async (prop: string): Promise<boolean> => {
+  const field = fields.get(prop)
+  if (!field) return true
+  
+  const valid = await field.validate()
+  if (!valid && field.errorMessage) {
+    errors.value[prop] = [field.errorMessage]
+  } else {
+    delete errors.value[prop]
+  }
+  
+  return valid
+}
+
+const resetFields = () => {
+  fields.forEach((field) => {
+    field.reset()
+  })
+  errors.value = {}
+}
+
+const clearValidate = (props?: string | string[]) => {
+  if (!props) {
+    errors.value = {}
+    fields.forEach((field) => field.clearValidate())
+    return
+  }
+
+  const propsArray = Array.isArray(props) ? props : [props]
+  propsArray.forEach((prop) => {
+    delete errors.value[prop]
+    const field = fields.get(prop)
+    if (field) field.clearValidate()
+  })
+}
+
+const handleSubmit = async () => {
+  const valid = await validate()
+  if (valid) {
+    emit('submit', props.model)
+  }
+}
+
+provide('datametriaForm', {
+  model: props.model,
+  rules: props.rules,
+  labelWidth: props.labelWidth,
+  labelPosition: props.labelPosition,
+  registerField,
+  unregisterField,
+  validateField
+})
+
+defineExpose({
+  validate,
+  validateField,
+  resetFields,
+  clearValidate
+})
+</script>
+
+<style scoped>
+.datametria-form {
+  font-size: var(--dm-font-size-base, 14px);
+}
+
+.datametria-form--inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.datametria-form--label-left :deep(.datametria-form-item__label) {
+  text-align: left;
+}
+
+.datametria-form--label-right :deep(.datametria-form-item__label) {
+  text-align: right;
+}
+
+.datametria-form--label-top :deep(.datametria-form-item) {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.datametria-form--label-top :deep(.datametria-form-item__label) {
+  margin-bottom: 8px;
+}
+
+/* Dark Mode Support - Hybrid Approach */
+
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .datametria-form {
+    background: var(--dm-bg-color-dark, #1e1e1e);
+    color: var(--dm-text-primary-dark, #e0e0e0);
+    border-color: var(--dm-border-color-dark, #404040);
   }
-
-  const propsArray = Array.isArray(props) ? props : [props]
-  propsArray.forEach((prop) => {
-    delete errors.value[prop]
-    const field = fields.get(prop)
-    if (field) field.clearValidate()
-  })
-}
-
-const handleSubmit = async () => {
-  const valid = await validate()
-  if (valid) {
-    emit('submit', props.model)
-  }
-}
-
-provide('datametriaForm', {
-  model: props.model,
-  rules: props.rules,
-  labelWidth: props.labelWidth,
-  labelPosition: props.labelPosition,
-  registerField,
-  unregisterField,
-  validateField
-})
-
-defineExpose({
-  validate,
-  validateField,
-  resetFields,
-  clearValidate
-})
-</script>
-
-<style scoped>
-.datametria-form {
-  font-size: var(--dm-font-size-base, 14px);
-}
-
-.datametria-form--inline {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-
-.datametria-form--label-left :deep(.datametria-form-item__label) {
-  text-align: left;
-}
-
-.datametria-form--label-right :deep(.datametria-form-item__label) {
-  text-align: right;
-}
-
-.datametria-form--label-top :deep(.datametria-form-item) {
-  flex-direction: column;
-  align-items: flex-start;
 }
 
-.datametria-form--label-top :deep(.datametria-form-item__label) {
-  margin-bottom: 8px;
+/* Controle manual via useTheme() */
+[data-theme="dark"] .datametria-form {
+  background: var(--dm-bg-color-dark, #1e1e1e);
+  color: var(--dm-text-primary-dark, #e0e0e0);
+  border-color: var(--dm-border-color-dark, #404040);
 }
-</style>
+</style>