@datametria/vue-components 2.3.1 → 2.4.0

package/src/components/DatametriaTabs.vue

@@ -1,301 +1,319 @@
-<template>
-  <div :class="tabsClasses">
-    <div class="dm-tabs__header" role="tablist" :aria-label="ariaLabel" :aria-orientation="orientation">
-      <button
-        v-for="(tab, index) in tabs"
-        :key="index"
-        :id="`tab-${index}`"
-        class="dm-tabs__tab"
-        :class="{ 'dm-tabs__tab--active': activeTab === index, 'dm-tabs__tab--disabled': typeof tab === 'object' && 'disabled' in tab && tab.disabled }"
-        role="tab"
-        :aria-selected="activeTab === index"
-        :aria-controls="`panel-${index}`"
-        :aria-disabled="typeof tab === 'object' && 'disabled' in tab ? tab.disabled : false"
-        :tabindex="activeTab === index ? 0 : -1"
-        :disabled="typeof tab === 'object' && 'disabled' in tab ? tab.disabled : false"
-        @click="selectTab(index)"
-        @keydown="handleKeydown($event, index)"
-      >
-        <span v-if="typeof tab === 'object' && 'icon' in tab && tab.icon" class="dm-tabs__icon">{{ tab.icon }}</span>
-        <span class="dm-tabs__label">{{ typeof tab === 'string' ? tab : tab.label }}</span>
-        <span v-if="typeof tab === 'object' && 'badge' in tab && tab.badge" class="dm-tabs__badge">{{ tab.badge }}</span>
-      </button>
-      <div
-        v-if="showIndicator"
-        class="dm-tabs__indicator"
-        :style="indicatorStyle"
-      ></div>
-    </div>
-    <div class="dm-tabs__panels">
-      <div
-        v-for="(_, index) in tabs"
-        :key="index"
-        :id="`panel-${index}`"
-        class="dm-tabs__panel"
-        :class="{ 'dm-tabs__panel--active': activeTab === index }"
-        role="tabpanel"
-        :aria-labelledby="`tab-${index}`"
-        :hidden="activeTab !== index"
-      >
-        <slot :name="`panel-${index}`"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, computed } from 'vue'
-
-interface Tab {
-  label: string
-  icon?: string
-  badge?: string | number
-  disabled?: boolean
-}
-
-interface Props {
-  tabs: (string | Tab)[]
-  modelValue?: number
-  variant?: 'default' | 'pills' | 'underline'
-  orientation?: 'horizontal' | 'vertical'
-  showIndicator?: boolean
-  ariaLabel?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: 0,
-  variant: 'default',
-  orientation: 'horizontal',
-  showIndicator: true,
-  ariaLabel: 'Tabs'
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [index: number]
-  change: [index: number]
-}>()
-
-const activeTab = ref(props.modelValue)
-
-watch(() => props.modelValue, (newValue) => {
-  activeTab.value = newValue
-})
-
-const tabsClasses = computed(() => [
-  'dm-tabs',
-  `dm-tabs--${props.variant}`,
-  `dm-tabs--${props.orientation}`
-])
-
-const indicatorStyle = computed(() => {
-  const count = props.tabs.length
-  const position = props.orientation === 'horizontal' 
-    ? `translateX(${activeTab.value * 100}%)`
-    : `translateY(${activeTab.value * 100}%)`
-  
-  return {
-    transform: position,
-    width: props.orientation === 'horizontal' ? `${100 / count}%` : '100%',
-    height: props.orientation === 'vertical' ? `${100 / count}%` : '2px'
-  }
-})
-
-const selectTab = (index: number) => {
-  const tab = props.tabs[index]
-  const isDisabled = typeof tab === 'object' && 'disabled' in tab && tab.disabled
-  
-  if (isDisabled) return
-  
-  activeTab.value = index
-  emit('update:modelValue', index)
-  emit('change', index)
-}
-
-const handleKeydown = (event: KeyboardEvent, index: number) => {
-  let newIndex = index
-
-  const isHorizontal = props.orientation === 'horizontal'
-  
-  switch (event.key) {
-    case 'ArrowLeft':
-      if (!isHorizontal) return
-      event.preventDefault()
-      newIndex = index > 0 ? index - 1 : props.tabs.length - 1
-      break
-    case 'ArrowRight':
-      if (!isHorizontal) return
-      event.preventDefault()
-      newIndex = index < props.tabs.length - 1 ? index + 1 : 0
-      break
-    case 'ArrowUp':
-      if (isHorizontal) return
-      event.preventDefault()
-      newIndex = index > 0 ? index - 1 : props.tabs.length - 1
-      break
-    case 'ArrowDown':
-      if (isHorizontal) return
-      event.preventDefault()
-      newIndex = index < props.tabs.length - 1 ? index + 1 : 0
-      break
-    case 'Home':
-      event.preventDefault()
-      newIndex = 0
-      break
-    case 'End':
-      event.preventDefault()
-      newIndex = props.tabs.length - 1
-      break
-    default:
-      return
+<template>
+  <div :class="tabsClasses">
+    <div class="dm-tabs__header" role="tablist" :aria-label="ariaLabel" :aria-orientation="orientation">
+      <button
+        v-for="(tab, index) in tabs"
+        :key="index"
+        :id="`tab-${index}`"
+        class="dm-tabs__tab"
+        :class="{ 'dm-tabs__tab--active': activeTab === index, 'dm-tabs__tab--disabled': typeof tab === 'object' && 'disabled' in tab && tab.disabled }"
+        role="tab"
+        :aria-selected="activeTab === index"
+        :aria-controls="`panel-${index}`"
+        :aria-disabled="typeof tab === 'object' && 'disabled' in tab ? tab.disabled : false"
+        :tabindex="activeTab === index ? 0 : -1"
+        :disabled="typeof tab === 'object' && 'disabled' in tab ? tab.disabled : false"
+        @click="selectTab(index)"
+        @keydown="handleKeydown($event, index)"
+      >
+        <span v-if="typeof tab === 'object' && 'icon' in tab && tab.icon" class="dm-tabs__icon">{{ tab.icon }}</span>
+        <span class="dm-tabs__label">{{ typeof tab === 'string' ? tab : tab.label }}</span>
+        <span v-if="typeof tab === 'object' && 'badge' in tab && tab.badge" class="dm-tabs__badge">{{ tab.badge }}</span>
+      </button>
+      <div
+        v-if="showIndicator"
+        class="dm-tabs__indicator"
+        :style="indicatorStyle"
+      ></div>
+    </div>
+    <div class="dm-tabs__panels">
+      <div
+        v-for="(_, index) in tabs"
+        :key="index"
+        :id="`panel-${index}`"
+        class="dm-tabs__panel"
+        :class="{ 'dm-tabs__panel--active': activeTab === index }"
+        role="tabpanel"
+        :aria-labelledby="`tab-${index}`"
+        :hidden="activeTab !== index"
+      >
+        <slot :name="`panel-${index}`"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+
+interface Tab {
+  label: string
+  icon?: string
+  badge?: string | number
+  disabled?: boolean
+}
+
+interface Props {
+  tabs: (string | Tab)[]
+  modelValue?: number
+  variant?: 'default' | 'pills' | 'underline'
+  orientation?: 'horizontal' | 'vertical'
+  showIndicator?: boolean
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  variant: 'default',
+  orientation: 'horizontal',
+  showIndicator: true,
+  ariaLabel: 'Tabs'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [index: number]
+  change: [index: number]
+}>()
+
+const activeTab = ref(props.modelValue)
+
+watch(() => props.modelValue, (newValue) => {
+  activeTab.value = newValue
+})
+
+const tabsClasses = computed(() => [
+  'dm-tabs',
+  `dm-tabs--${props.variant}`,
+  `dm-tabs--${props.orientation}`
+])
+
+const indicatorStyle = computed(() => {
+  const count = props.tabs.length
+  const position = props.orientation === 'horizontal' 
+    ? `translateX(${activeTab.value * 100}%)`
+    : `translateY(${activeTab.value * 100}%)`
+  
+  return {
+    transform: position,
+    width: props.orientation === 'horizontal' ? `${100 / count}%` : '100%',
+    height: props.orientation === 'vertical' ? `${100 / count}%` : '2px'
+  }
+})
+
+const selectTab = (index: number) => {
+  const tab = props.tabs[index]
+  const isDisabled = typeof tab === 'object' && 'disabled' in tab && tab.disabled
+  
+  if (isDisabled) return
+  
+  activeTab.value = index
+  emit('update:modelValue', index)
+  emit('change', index)
+}
+
+const handleKeydown = (event: KeyboardEvent, index: number) => {
+  let newIndex = index
+
+  const isHorizontal = props.orientation === 'horizontal'
+  
+  switch (event.key) {
+    case 'ArrowLeft':
+      if (!isHorizontal) return
+      event.preventDefault()
+      newIndex = index > 0 ? index - 1 : props.tabs.length - 1
+      break
+    case 'ArrowRight':
+      if (!isHorizontal) return
+      event.preventDefault()
+      newIndex = index < props.tabs.length - 1 ? index + 1 : 0
+      break
+    case 'ArrowUp':
+      if (isHorizontal) return
+      event.preventDefault()
+      newIndex = index > 0 ? index - 1 : props.tabs.length - 1
+      break
+    case 'ArrowDown':
+      if (isHorizontal) return
+      event.preventDefault()
+      newIndex = index < props.tabs.length - 1 ? index + 1 : 0
+      break
+    case 'Home':
+      event.preventDefault()
+      newIndex = 0
+      break
+    case 'End':
+      event.preventDefault()
+      newIndex = props.tabs.length - 1
+      break
+    default:
+      return
+  }
+
+  selectTab(newIndex)
+  document.getElementById(`tab-${newIndex}`)?.focus()
+}
+</script>
+
+<style scoped>
+.dm-tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+.dm-tabs--vertical {
+  flex-direction: row;
+}
+
+.dm-tabs--vertical .dm-tabs__header {
+  flex-direction: column;
+  border-bottom: none;
+  border-right: 2px solid var(--dm-neutral-200, #e5e7eb);
+}
+
+.dm-tabs--vertical .dm-tabs__tab {
+  text-align: left;
+}
+
+.dm-tabs__header {
+  display: flex;
+  position: relative;
+  border-bottom: 2px solid var(--dm-neutral-200, #e5e7eb);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.dm-tabs__header::-webkit-scrollbar {
+  display: none;
+}
+
+.dm-tabs__tab {
+  flex: 1;
+  min-width: max-content;
+  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-4, 1rem);
+  border: none;
+  background: transparent;
+  color: var(--dm-neutral-600, #6b7280);
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: var(--dm-spacing-2, 0.5rem);
+}
+
+.dm-tabs__tab--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.dm-tabs__icon {
+  font-size: 1.25rem;
+}
+
+.dm-tabs__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  background: var(--dm-primary, #0072CE);
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: 10px;
+}
+
+.dm-tabs__tab:hover:not(:disabled) {
+  color: var(--dm-neutral-900, #111827);
+}
+
+.dm-tabs__tab:focus-visible {
+  outline: 2px solid var(--dm-primary, #0072CE);
+  outline-offset: -2px;
+  border-radius: 4px;
+}
+
+.dm-tabs__tab--active {
+  color: var(--dm-primary, #0072CE);
+}
+
+.dm-tabs__indicator {
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  background: var(--dm-primary, #0072CE);
+  transition: transform 0.3s ease;
+}
+
+.dm-tabs--vertical .dm-tabs__indicator {
+  bottom: auto;
+  left: auto;
+  right: -2px;
+  top: 0;
+  width: 2px;
+}
+
+.dm-tabs--pills .dm-tabs__header {
+  border-bottom: none;
+  gap: var(--dm-spacing-2, 0.5rem);
+}
+
+.dm-tabs--pills .dm-tabs__tab {
+  border-radius: var(--dm-radius-md, 0.375rem);
+}
+
+.dm-tabs--pills .dm-tabs__tab--active {
+  background: var(--dm-primary, #0072CE);
+  color: white;
+}
+
+.dm-tabs--pills .dm-tabs__indicator {
+  display: none;
+}
+
+.dm-tabs__panels {
+  padding: var(--dm-spacing-4, 1rem);
+  flex: 1;
+}
+
+.dm-tabs__panel {
+  display: none;
+}
+
+.dm-tabs__panel--active {
+  display: block;
+}
+
+@media (max-width: 768px) {
+  .dm-tabs__tab {
+    padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-3, 0.75rem);
+    font-size: 0.875rem;
+  }
+  
+  .dm-tabs__icon {
+    font-size: 1rem;
+  }
+}
+
+/* Dark Mode Support - Hybrid Approach */
+
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .tabsClasses {
+    background: var(--dm-bg-color-dark, #1e1e1e);
+    color: var(--dm-text-primary-dark, #e0e0e0);
+    border-color: var(--dm-border-color-dark, #404040);
   }
-
-  selectTab(newIndex)
-  document.getElementById(`tab-${newIndex}`)?.focus()
-}
-</script>
-
-<style scoped>
-.dm-tabs {
-  display: flex;
-  flex-direction: column;
-}
-
-.dm-tabs--vertical {
-  flex-direction: row;
-}
-
-.dm-tabs--vertical .dm-tabs__header {
-  flex-direction: column;
-  border-bottom: none;
-  border-right: 2px solid var(--dm-neutral-200, #e5e7eb);
-}
-
-.dm-tabs--vertical .dm-tabs__tab {
-  text-align: left;
-}
-
-.dm-tabs__header {
-  display: flex;
-  position: relative;
-  border-bottom: 2px solid var(--dm-neutral-200, #e5e7eb);
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-
-.dm-tabs__header::-webkit-scrollbar {
-  display: none;
-}
-
-.dm-tabs__tab {
-  flex: 1;
-  min-width: max-content;
-  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-4, 1rem);
-  border: none;
-  background: transparent;
-  color: var(--dm-neutral-600, #6b7280);
-  font-size: 1rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  position: relative;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  gap: var(--dm-spacing-2, 0.5rem);
 }
 
-.dm-tabs__tab--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.dm-tabs__icon {
-  font-size: 1.25rem;
-}
-
-.dm-tabs__badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 20px;
-  height: 20px;
-  padding: 0 6px;
-  background: var(--dm-primary, #0072CE);
-  color: white;
-  font-size: 0.75rem;
-  font-weight: 600;
-  border-radius: 10px;
-}
-
-.dm-tabs__tab:hover:not(:disabled) {
-  color: var(--dm-neutral-900, #111827);
-}
-
-.dm-tabs__tab:focus-visible {
-  outline: 2px solid var(--dm-primary, #0072CE);
-  outline-offset: -2px;
-  border-radius: 4px;
-}
-
-.dm-tabs__tab--active {
-  color: var(--dm-primary, #0072CE);
-}
-
-.dm-tabs__indicator {
-  position: absolute;
-  bottom: -2px;
-  left: 0;
-  background: var(--dm-primary, #0072CE);
-  transition: transform 0.3s ease;
-}
-
-.dm-tabs--vertical .dm-tabs__indicator {
-  bottom: auto;
-  left: auto;
-  right: -2px;
-  top: 0;
-  width: 2px;
-}
-
-.dm-tabs--pills .dm-tabs__header {
-  border-bottom: none;
-  gap: var(--dm-spacing-2, 0.5rem);
-}
-
-.dm-tabs--pills .dm-tabs__tab {
-  border-radius: var(--dm-radius-md, 0.375rem);
-}
-
-.dm-tabs--pills .dm-tabs__tab--active {
-  background: var(--dm-primary, #0072CE);
-  color: white;
-}
-
-.dm-tabs--pills .dm-tabs__indicator {
-  display: none;
-}
-
-.dm-tabs__panels {
-  padding: var(--dm-spacing-4, 1rem);
-  flex: 1;
-}
-
-.dm-tabs__panel {
-  display: none;
-}
-
-.dm-tabs__panel--active {
-  display: block;
-}
-
-@media (max-width: 768px) {
-  .dm-tabs__tab {
-    padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-3, 0.75rem);
-    font-size: 0.875rem;
-  }
-  
-  .dm-tabs__icon {
-    font-size: 1rem;
-  }
+/* Controle manual via useTheme() */
+[data-theme="dark"] .tabsClasses {
+  background: var(--dm-bg-color-dark, #1e1e1e);
+  color: var(--dm-text-primary-dark, #e0e0e0);
+  border-color: var(--dm-border-color-dark, #404040);
 }
-</style>
+</style>