@datametria/vue-components 2.3.0 → 2.4.0

package/src/components/DatametriaBreadcrumb.vue

@@ -1,130 +1,134 @@
-<template>
-  <nav class="datametria-breadcrumb" aria-label="Breadcrumb">
-    <ol class="datametria-breadcrumb__list">
-      <li
-        v-for="(item, index) in items"
-        :key="index"
-        class="datametria-breadcrumb__item"
-        :class="{ 'is-last': index === items.length - 1 }"
-      >
-        <component
-          :is="item.to ? 'router-link' : 'span'"
-          :to="item.to"
-          class="datametria-breadcrumb__link"
-          :class="{ 'is-active': index === items.length - 1 }"
-          :aria-current="index === items.length - 1 ? 'page' : undefined"
-        >
-          {{ item.label }}
-        </component>
-        <span
-          v-if="index < items.length - 1"
-          class="datametria-breadcrumb__separator"
-          aria-hidden="true"
-        >
-          <slot name="separator">{{ separator }}</slot>
-        </span>
-      </li>
-    </ol>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import { withDefaults } from 'vue'
-
-/**
- * DatametriaBreadcrumb - Componente de navegação breadcrumb
- * 
- * @component
- * @example
- * <DatametriaBreadcrumb 
- *   :items="[
- *     { label: 'Home', to: '/' },
- *     { label: 'Produtos', to: '/produtos' },
- *     { label: 'Detalhes' }
- *   ]"
- *   separator="/"
- * />
- */
-
-export interface BreadcrumbItem {
-  /** Label do item */
-  label: string
-  /** Rota do Vue Router (opcional) */
-  to?: string | { name: string; params?: Record<string, any> }
-}
-
-interface Props {
-  /** Array de itens do breadcrumb */
-  items: BreadcrumbItem[]
-  /** Separador entre itens */
-  separator?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  separator: '/'
-})
-</script>
-
-<style scoped>
-.datametria-breadcrumb {
-  font-size: 14px;
-  line-height: 1;
-}
-
-.datametria-breadcrumb__list {
-  display: flex;
-  align-items: center;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  flex-wrap: wrap;
-}
-
-.datametria-breadcrumb__item {
-  display: flex;
-  align-items: center;
-}
-
-.datametria-breadcrumb__link {
-  color: var(--datametria-text-secondary, #606266);
-  text-decoration: none;
-  transition: color 0.2s;
-  font-weight: 400;
-}
-
-.datametria-breadcrumb__link:not(.is-active):hover {
-  color: var(--datametria-primary, #0072ce);
-  cursor: pointer;
-}
-
-.datametria-breadcrumb__link.is-active {
-  color: var(--datametria-text-primary, #303133);
-  font-weight: 500;
-  cursor: default;
-}
-
-.datametria-breadcrumb__separator {
-  margin: 0 8px;
-  color: var(--datametria-text-placeholder, #c0c4cc);
-  user-select: none;
-}
-
-/* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .datametria-breadcrumb__link {
-    color: var(--datametria-text-secondary-dark, #909399);
+<template>
+  <nav class="datametria-breadcrumb" aria-label="Breadcrumb">
+    <ol class="datametria-breadcrumb__list">
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+        class="datametria-breadcrumb__item"
+        :class="{ 'is-last': index === items.length - 1 }"
+      >
+        <component
+          :is="item.to ? 'router-link' : 'span'"
+          :to="item.to"
+          class="datametria-breadcrumb__link"
+          :class="{ 'is-active': index === items.length - 1 }"
+          :aria-current="index === items.length - 1 ? 'page' : undefined"
+        >
+          {{ item.label }}
+        </component>
+        <span
+          v-if="index < items.length - 1"
+          class="datametria-breadcrumb__separator"
+          aria-hidden="true"
+        >
+          <slot name="separator">{{ separator }}</slot>
+        </span>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { withDefaults } from 'vue'
+
+/**
+ * DatametriaBreadcrumb - Componente de navegação breadcrumb
+ * 
+ * @component
+ * @example
+ * <DatametriaBreadcrumb 
+ *   :items="[
+ *     { label: 'Home', to: '/' },
+ *     { label: 'Produtos', to: '/produtos' },
+ *     { label: 'Detalhes' }
+ *   ]"
+ *   separator="/"
+ * />
+ */
+
+export interface BreadcrumbItem {
+  /** Label do item */
+  label: string
+  /** Rota do Vue Router (opcional) */
+  to?: string | { name: string; params?: Record<string, any> }
+}
+
+interface Props {
+  /** Array de itens do breadcrumb */
+  items: BreadcrumbItem[]
+  /** Separador entre itens */
+  separator?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  separator: '/'
+})
+</script>
+
+<style scoped>
+.datametria-breadcrumb {
+  font-size: 14px;
+  line-height: 1;
+}
+
+.datametria-breadcrumb__list {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  flex-wrap: wrap;
+}
+
+.datametria-breadcrumb__item {
+  display: flex;
+  align-items: center;
+}
+
+.datametria-breadcrumb__link {
+  color: var(--datametria-text-secondary, #606266);
+  text-decoration: none;
+  transition: color 0.2s;
+  font-weight: 400;
+}
+
+.datametria-breadcrumb__link:not(.is-active):hover {
+  color: var(--datametria-primary, #0072ce);
+  cursor: pointer;
+}
+
+.datametria-breadcrumb__link.is-active {
+  color: var(--datametria-text-primary, #303133);
+  font-weight: 500;
+  cursor: default;
+}
+
+.datametria-breadcrumb__separator {
+  margin: 0 8px;
+  color: var(--datametria-text-placeholder, #c0c4cc);
+  user-select: none;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .datametria-breadcrumb__link {
+    color: var(--datametria-text-secondary-dark, #909399);
   }
 
-  .datametria-breadcrumb__link:not(.is-active):hover {
-    color: var(--datametria-primary-dark, #409eff);
-  }
-
-  .datametria-breadcrumb__link.is-active {
-    color: var(--datametria-text-primary-dark, #e5eaf3);
-  }
-
-  .datametria-breadcrumb__separator {
-    color: var(--datametria-text-placeholder-dark, #606266);
-  }
-}
-</style>
+[data-theme="dark"] .datametria-breadcrumb__link {
+color: var(--datametria-text-secondary-dark, #909399);
+}
+
+  .datametria-breadcrumb__link:not(.is-active):hover {
+    color: var(--datametria-primary-dark, #409eff);
+  }
+
+  .datametria-breadcrumb__link.is-active {
+    color: var(--datametria-text-primary-dark, #e5eaf3);
+  }
+
+  .datametria-breadcrumb__separator {
+    color: var(--datametria-text-placeholder-dark, #606266);
+  }
+}
+</style>

package/src/components/DatametriaButton.vue

@@ -1,177 +1,195 @@
-<template>
-  <button
-    :class="buttonClasses"
-    :disabled="disabled || loading"
-    :type="type"
-    :aria-busy="loading"
-    :aria-disabled="disabled"
-    @click="$emit('click', $event)"
-  >
-    <span v-if="loading" class="spinner" role="status" aria-label="Carregando"></span>
-    <slot />
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { ButtonVariant, ButtonSize } from '../types'
-
-interface Props {
-  variant?: ButtonVariant
-  size?: ButtonSize
-  disabled?: boolean
-  loading?: boolean
-  fullWidth?: boolean
-  type?: 'button' | 'submit' | 'reset'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: ButtonVariant.PRIMARY,
-  size: ButtonSize.MD,
-  disabled: false,
-  loading: false,
-  fullWidth: false,
-  type: 'button'
-})
-
-// Validação em desenvolvimento
-if (process.env.NODE_ENV === 'development') {
-  const validVariants = Object.values(ButtonVariant)
-  if (!validVariants.includes(props.variant)) {
-    console.warn(`[DatametriaButton] Invalid variant "${props.variant}". Valid options: ${validVariants.join(', ')}`)
+<template>
+  <button
+    :class="buttonClasses"
+    :disabled="disabled || loading"
+    :type="type"
+    :aria-busy="loading"
+    :aria-disabled="disabled"
+    @click="$emit('click', $event)"
+  >
+    <span v-if="loading" class="spinner" role="status" aria-label="Carregando"></span>
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ButtonVariant, ButtonSize } from '../types'
+
+interface Props {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  disabled?: boolean
+  loading?: boolean
+  fullWidth?: boolean
+  type?: 'button' | 'submit' | 'reset'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: ButtonVariant.PRIMARY,
+  size: ButtonSize.MD,
+  disabled: false,
+  loading: false,
+  fullWidth: false,
+  type: 'button'
+})
+
+// Validação em desenvolvimento
+if (process.env.NODE_ENV === 'development') {
+  const validVariants = Object.values(ButtonVariant)
+  if (!validVariants.includes(props.variant)) {
+    console.warn(`[DatametriaButton] Invalid variant "${props.variant}". Valid options: ${validVariants.join(', ')}`)
+  }
+}
+
+defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const buttonClasses = computed(() => {
+  return [
+    'datametria-button',
+    `datametria-button--${props.variant}`,
+    `datametria-button--${props.size}`,
+    {
+      'datametria-button--full-width': props.fullWidth,
+      'datametria-button--loading': props.loading,
+      'datametria-button--disabled': props.disabled
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.datametria-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: var(--dm-font-medium, 500);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  transition: var(--dm-transition-base, 200ms);
+  cursor: pointer;
+  border: 1px solid transparent;
+  font-family: var(--dm-font-sans, -apple-system, sans-serif);
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.datametria-button--primary {
+  background: var(--dm-primary, #0072CE);
+  color: white;
+}
+
+.datametria-button--primary:hover:not(:disabled) {
+  filter: brightness(0.9);
+}
+
+.datametria-button--primary:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
+}
+
+.datametria-button--secondary {
+  background: var(--dm-secondary, #4B0078);
+  color: white;
+}
+
+.datametria-button--secondary:hover:not(:disabled) {
+  filter: brightness(0.9);
+}
+
+.datametria-button--secondary:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-secondary, #4B0078) 20%, transparent);
+}
+
+.datametria-button--outline {
+  background: transparent;
+  border-color: var(--dm-primary, #0072CE);
+  color: var(--dm-primary, #0072CE);
+}
+
+.datametria-button--outline:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--dm-primary, #0072CE) 10%, transparent);
+}
+
+.datametria-button--outline:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
+}
+
+.datametria-button--ghost {
+  background: transparent;
+  color: var(--dm-primary, #0072CE);
+}
+
+.datametria-button--ghost:hover:not(:disabled) {
+  background: var(--dm-neutral-100, #f3f4f6);
+}
+
+.datametria-button--sm {
+  padding: var(--dm-space-2, 0.5rem) var(--dm-space-4, 1rem);
+  font-size: var(--dm-text-sm, 0.875rem);
+  min-height: 2rem;
+}
+
+.datametria-button--md {
+  padding: var(--dm-space-3, 0.75rem) calc(var(--dm-space-4, 1rem) * 1.5);
+  font-size: var(--dm-text-base, 1rem);
+  min-height: 2.5rem;
+}
+
+.datametria-button--lg {
+  padding: var(--dm-space-4, 1rem) calc(var(--dm-space-4, 1rem) * 2);
+  font-size: var(--dm-text-lg, 1.125rem);
+  min-height: 3rem;
+}
+
+@media (max-width: 640px) {
+  .datametria-button--sm { min-height: 2.25rem; }
+  .datametria-button--md { min-height: 2.75rem; }
+  .datametria-button--lg { min-height: 3.25rem; }
+}
+
+.datametria-button--full-width {
+  width: 100%;
+}
+
+.datametria-button--disabled,
+.datametria-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.spinner {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  margin-right: 0.5rem;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Dark Mode Support - Hybrid Approach */
+
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .buttonClasses {
+    background: var(--dm-bg-color-dark, #1e1e1e);
+    color: var(--dm-text-primary-dark, #e0e0e0);
+    border-color: var(--dm-border-color-dark, #404040);
   }
 }
 
-defineEmits<{
-  click: [event: MouseEvent]
-}>()
-
-const buttonClasses = computed(() => {
-  return [
-    'datametria-button',
-    `datametria-button--${props.variant}`,
-    `datametria-button--${props.size}`,
-    {
-      'datametria-button--full-width': props.fullWidth,
-      'datametria-button--loading': props.loading,
-      'datametria-button--disabled': props.disabled
-    }
-  ]
-})
-</script>
-
-<style scoped>
-.datametria-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: var(--dm-font-medium, 500);
-  border-radius: var(--dm-radius-md, 0.375rem);
-  transition: var(--dm-transition-base, 200ms);
-  cursor: pointer;
-  border: 1px solid transparent;
-  font-family: var(--dm-font-sans, -apple-system, sans-serif);
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.datametria-button--primary {
-  background: var(--dm-primary, #0072CE);
-  color: white;
-}
-
-.datametria-button--primary:hover:not(:disabled) {
-  filter: brightness(0.9);
-}
-
-.datametria-button--primary:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
-}
-
-.datametria-button--secondary {
-  background: var(--dm-secondary, #4B0078);
-  color: white;
-}
-
-.datametria-button--secondary:hover:not(:disabled) {
-  filter: brightness(0.9);
-}
-
-.datametria-button--secondary:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-secondary, #4B0078) 20%, transparent);
-}
-
-.datametria-button--outline {
-  background: transparent;
-  border-color: var(--dm-primary, #0072CE);
-  color: var(--dm-primary, #0072CE);
-}
-
-.datametria-button--outline:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--dm-primary, #0072CE) 10%, transparent);
-}
-
-.datametria-button--outline:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
-}
-
-.datametria-button--ghost {
-  background: transparent;
-  color: var(--dm-primary, #0072CE);
-}
-
-.datametria-button--ghost:hover:not(:disabled) {
-  background: var(--dm-neutral-100, #f3f4f6);
-}
-
-.datametria-button--sm {
-  padding: var(--dm-space-2, 0.5rem) var(--dm-space-4, 1rem);
-  font-size: var(--dm-text-sm, 0.875rem);
-  min-height: 2rem;
-}
-
-.datametria-button--md {
-  padding: var(--dm-space-3, 0.75rem) calc(var(--dm-space-4, 1rem) * 1.5);
-  font-size: var(--dm-text-base, 1rem);
-  min-height: 2.5rem;
-}
-
-.datametria-button--lg {
-  padding: var(--dm-space-4, 1rem) calc(var(--dm-space-4, 1rem) * 2);
-  font-size: var(--dm-text-lg, 1.125rem);
-  min-height: 3rem;
-}
-
-@media (max-width: 640px) {
-  .datametria-button--sm { min-height: 2.25rem; }
-  .datametria-button--md { min-height: 2.75rem; }
-  .datametria-button--lg { min-height: 3.25rem; }
-}
-
-.datametria-button--full-width {
-  width: 100%;
-}
-
-.datametria-button--disabled,
-.datametria-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.spinner {
-  width: 1rem;
-  height: 1rem;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-  margin-right: 0.5rem;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
+/* Controle manual via useTheme() */
+[data-theme="dark"] .buttonClasses {
+  background: var(--dm-bg-color-dark, #1e1e1e);
+  color: var(--dm-text-primary-dark, #e0e0e0);
+  border-color: var(--dm-border-color-dark, #404040);
 }
-</style>
+</style>