@datametria/vue-components 2.0.1 → 2.1.1

package/src/components/DatametriaFloatingBar.vue

@@ -0,0 +1,126 @@
+<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>

package/src/components/DatametriaSidebar.vue

@@ -0,0 +1,230 @@
+<template>
+  <aside
+    :class="sidebarClasses"
+    role="complementary"
+    :aria-label="ariaLabel"
+    :aria-expanded="isOpen"
+  >
+    <div class="dm-sidebar__header" v-if="$slots.header">
+      <slot name="header"></slot>
+      <button
+        v-if="collapsible"
+        class="dm-sidebar__toggle"
+        @click="toggle"
+        :aria-label="isOpen ? 'Fechar sidebar' : 'Abrir sidebar'"
+      >
+        <span class="dm-sidebar__toggle-icon" :class="{ 'dm-sidebar__toggle-icon--open': isOpen }"></span>
+      </button>
+    </div>
+
+    <nav class="dm-sidebar__content">
+      <slot></slot>
+    </nav>
+
+    <div class="dm-sidebar__footer" v-if="$slots.footer">
+      <slot name="footer"></slot>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+interface Props {
+  position?: 'left' | 'right'
+  variant?: 'light' | 'dark' | 'primary'
+  width?: string
+  collapsible?: boolean
+  defaultOpen?: boolean
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  position: 'left',
+  variant: 'light',
+  width: '280px',
+  collapsible: false,
+  defaultOpen: true,
+  ariaLabel: 'Sidebar navigation'
+})
+
+const emit = defineEmits<{
+  toggle: [isOpen: boolean]
+  open: []
+  close: []
+}>()
+
+const isOpen = ref(props.defaultOpen)
+
+const sidebarClasses = computed(() => [
+  'dm-sidebar',
+  `dm-sidebar--${props.position}`,
+  `dm-sidebar--${props.variant}`,
+  { 'dm-sidebar--collapsed': !isOpen.value && props.collapsible }
+])
+
+const toggle = () => {
+  isOpen.value = !isOpen.value
+  emit('toggle', isOpen.value)
+  if (isOpen.value) {
+    emit('open')
+  } else {
+    emit('close')
+  }
+}
+
+watch(() => props.defaultOpen, (newVal) => {
+  isOpen.value = newVal
+})
+
+defineExpose({ isOpen, toggle })
+</script>
+
+<style scoped>
+.dm-sidebar {
+  height: 100vh;
+  background: var(--dm-neutral-50, #ffffff);
+  border-right: 1px solid var(--dm-neutral-200, #e5e7eb);
+  display: flex;
+  flex-direction: column;
+  transition: width 0.3s ease;
+  width: v-bind(width);
+  position: fixed;
+  top: 0;
+  z-index: 90;
+}
+
+.dm-sidebar--left {
+  left: 0;
+}
+
+.dm-sidebar--right {
+  right: 0;
+  border-right: none;
+  border-left: 1px solid var(--dm-neutral-200, #e5e7eb);
+}
+
+.dm-sidebar--dark {
+  background: var(--dm-neutral-900, #111827);
+  border-color: var(--dm-neutral-800, #1f2937);
+  color: var(--dm-neutral-50, #ffffff);
+}
+
+.dm-sidebar--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-sidebar--collapsed {
+  width: 64px;
+}
+
+.dm-sidebar__header {
+  padding: var(--dm-spacing-4, 1rem);
+  border-bottom: 1px solid var(--dm-neutral-200, #e5e7eb);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 64px;
+}
+
+.dm-sidebar--dark .dm-sidebar__header {
+  border-color: var(--dm-neutral-800, #1f2937);
+}
+
+.dm-sidebar--primary .dm-sidebar__header {
+  border-color: color-mix(in srgb, var(--dm-primary, #0072CE) 90%, black);
+}
+
+.dm-sidebar__toggle {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--dm-radius-md, 0.375rem);
+  transition: background 0.2s ease;
+}
+
+.dm-sidebar__toggle:hover {
+  background: var(--dm-neutral-100, #f3f4f6);
+}
+
+.dm-sidebar--dark .dm-sidebar__toggle:hover {
+  background: var(--dm-neutral-800, #1f2937);
+}
+
+.dm-sidebar__toggle-icon {
+  width: 16px;
+  height: 2px;
+  background: var(--dm-neutral-900, #111827);
+  position: relative;
+  transition: transform 0.3s ease;
+}
+
+.dm-sidebar--dark .dm-sidebar__toggle-icon,
+.dm-sidebar--primary .dm-sidebar__toggle-icon {
+  background: var(--dm-neutral-50, #ffffff);
+}
+
+.dm-sidebar__toggle-icon::before,
+.dm-sidebar__toggle-icon::after {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 2px;
+  background: inherit;
+  transition: transform 0.3s ease;
+}
+
+.dm-sidebar__toggle-icon::before {
+  top: -5px;
+}
+
+.dm-sidebar__toggle-icon::after {
+  bottom: -5px;
+}
+
+.dm-sidebar__toggle-icon--open {
+  transform: rotate(180deg);
+}
+
+.dm-sidebar__content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--dm-spacing-4, 1rem);
+}
+
+.dm-sidebar__footer {
+  padding: var(--dm-spacing-4, 1rem);
+  border-top: 1px solid var(--dm-neutral-200, #e5e7eb);
+}
+
+.dm-sidebar--dark .dm-sidebar__footer {
+  border-color: var(--dm-neutral-800, #1f2937);
+}
+
+.dm-sidebar--primary .dm-sidebar__footer {
+  border-color: color-mix(in srgb, var(--dm-primary, #0072CE) 90%, black);
+}
+
+@media (max-width: 768px) {
+  .dm-sidebar {
+    transform: translateX(0);
+    transition: transform 0.3s ease;
+  }
+
+  .dm-sidebar--left.dm-sidebar--collapsed {
+    transform: translateX(-100%);
+  }
+
+  .dm-sidebar--right.dm-sidebar--collapsed {
+    transform: translateX(100%);
+  }
+}
+</style>

package/src/components/DatametriaTabs.vue

@@ -1,24 +1,29 @@
 <template>
-  <div class="dm-tabs">
-    <div class="dm-tabs__header" role="tablist" :aria-label="ariaLabel">
+  <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 }"
+        :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)"
       >
-        {{ tab }}
+        <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="{ transform: `translateX(${activeTab * 100}%)` }"
+        :style="indicatorStyle"
       ></div>
     </div>
     <div class="dm-tabs__panels">
@@ -39,21 +44,35 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
+
+interface Tab {
+  label: string
+  icon?: string
+  badge?: string | number
+  disabled?: boolean
+}
 
 interface Props {
-  tabs: string[]
+  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)
@@ -62,20 +81,59 @@ 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
@@ -102,10 +160,24 @@ const handleKeydown = (event: KeyboardEvent, index: number) => {
   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-gray-200);
+  border-bottom: 2px solid var(--dm-neutral-200, #e5e7eb);
   overflow-x: auto;
   scrollbar-width: none;
 }
@@ -117,43 +189,95 @@ const handleKeydown = (event: KeyboardEvent, index: number) => {
 .dm-tabs__tab {
   flex: 1;
   min-width: max-content;
-  padding: var(--dm-space-3) var(--dm-space-4);
+  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-4, 1rem);
   border: none;
   background: transparent;
-  color: var(--dm-text-secondary);
-  font-size: var(--dm-text-base);
+  color: var(--dm-neutral-600, #6b7280);
+  font-size: 1rem;
   font-weight: 500;
   cursor: pointer;
-  transition: var(--dm-transition);
+  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:hover {
-  color: var(--dm-text-primary);
+.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: var(--dm-focus-ring);
+  outline: 2px solid var(--dm-primary, #0072CE);
   outline-offset: -2px;
+  border-radius: 4px;
 }
 
 .dm-tabs__tab--active {
-  color: var(--dm-primary);
+  color: var(--dm-primary, #0072CE);
 }
 
 .dm-tabs__indicator {
   position: absolute;
   bottom: -2px;
   left: 0;
-  width: calc(100% / var(--tab-count, 1));
-  height: 2px;
-  background: var(--dm-primary);
+  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-space-4);
+  padding: var(--dm-spacing-4, 1rem);
+  flex: 1;
 }
 
 .dm-tabs__panel {
@@ -164,17 +288,14 @@ const handleKeydown = (event: KeyboardEvent, index: number) => {
   display: block;
 }
 
-@media (prefers-color-scheme: dark) {
-  .dm-tabs__header {
-    border-bottom-color: var(--dm-gray-700);
-  }
-
+@media (max-width: 768px) {
   .dm-tabs__tab {
-    color: var(--dm-gray-400);
+    padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-3, 0.75rem);
+    font-size: 0.875rem;
   }
-
-  .dm-tabs__tab:hover {
-    color: var(--dm-white);
+  
+  .dm-tabs__icon {
+    font-size: 1rem;
   }
 }
 </style>