@datametria/vue-components 2.2.0 → 2.3.1

package/src/components/DatametriaSortableTable.vue

@@ -377,12 +377,43 @@ const filteredData = computed(() => {
   // Sorting
   if (sortKey.value) {
     result.sort((a, b) => {
-      const aVal = a[sortKey.value]
-      const bVal = b[sortKey.value]
+      let aVal = a[sortKey.value]
+      let bVal = b[sortKey.value]
+
+      // Handle null/undefined
+      if (aVal == null && bVal == null) return 0
+      if (aVal == null) return 1
+      if (bVal == null) return -1
+
+      // Convert dates to timestamps for proper comparison
+      if (aVal instanceof Date) aVal = aVal.getTime()
+      if (bVal instanceof Date) bVal = bVal.getTime()
+      
+      // Try to parse as date if string looks like a date
+      if (typeof aVal === 'string' && !isNaN(Date.parse(aVal))) {
+        const datePattern = /^\d{4}-\d{2}-\d{2}|\d{2}\/\d{2}\/\d{4}/
+        if (datePattern.test(aVal)) {
+          aVal = new Date(aVal).getTime()
+        }
+      }
+      if (typeof bVal === 'string' && !isNaN(Date.parse(bVal))) {
+        const datePattern = /^\d{4}-\d{2}-\d{2}|\d{2}\/\d{2}\/\d{4}/
+        if (datePattern.test(bVal)) {
+          bVal = new Date(bVal).getTime()
+        }
+      }
 
-      if (aVal === bVal) return 0
+      // Numeric comparison
+      if (typeof aVal === 'number' && typeof bVal === 'number') {
+        return sortOrder.value === 'asc' ? aVal - bVal : bVal - aVal
+      }
 
-      const comparison = aVal > bVal ? 1 : -1
+      // String comparison (case-insensitive)
+      const aStr = String(aVal).toLowerCase()
+      const bStr = String(bVal).toLowerCase()
+      
+      if (aStr === bStr) return 0
+      const comparison = aStr > bStr ? 1 : -1
       return sortOrder.value === 'asc' ? comparison : -comparison
     })
   }

package/src/components/DatametriaSteps.vue

@@ -0,0 +1,314 @@
+<template>
+  <div 
+    class="datametria-steps" 
+    :class="[
+      `datametria-steps--${direction}`,
+      { 'datametria-steps--simple': simple }
+    ]"
+  >
+    <div
+      v-for="(item, index) in items"
+      :key="index"
+      class="datametria-steps__item"
+      :class="[
+        `is-${getStepStatus(index)}`,
+        { 'is-last': index === items.length - 1 }
+      ]"
+    >
+      <div class="datametria-steps__head">
+        <div class="datametria-steps__line" v-if="index > 0">
+          <div class="datametria-steps__line-inner"></div>
+        </div>
+        <div class="datametria-steps__icon">
+          <span v-if="getStepStatus(index) === 'finish'" class="icon-check">✓</span>
+          <span v-else-if="getStepStatus(index) === 'error'" class="icon-error">✕</span>
+          <span v-else class="icon-number">{{ index + 1 }}</span>
+        </div>
+      </div>
+      <div class="datametria-steps__main">
+        <div class="datametria-steps__title">{{ item.title }}</div>
+        <div v-if="item.description" class="datametria-steps__description">
+          {{ item.description }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+/**
+ * DatametriaSteps - Componente de passos/wizard
+ * 
+ * @component
+ * @example
+ * <DatametriaSteps 
+ *   :active="1"
+ *   :items="[
+ *     { title: 'Passo 1', description: 'Descrição' },
+ *     { title: 'Passo 2' },
+ *     { title: 'Passo 3' }
+ *   ]"
+ *   direction="horizontal"
+ * />
+ */
+
+export interface StepItem {
+  /** Título do passo */
+  title: string
+  /** Descrição do passo (opcional) */
+  description?: string
+  /** Status customizado do passo */
+  status?: 'wait' | 'process' | 'finish' | 'error'
+}
+
+interface Props {
+  /** Índice do passo ativo (0-based) */
+  active?: number
+  /** Array de itens dos passos */
+  items: StepItem[]
+  /** Direção dos passos */
+  direction?: 'horizontal' | 'vertical'
+  /** Modo simples (sem descrição) */
+  simple?: boolean
+  /** Status global (sobrescreve status individual) */
+  status?: 'wait' | 'process' | 'finish' | 'error'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  active: 0,
+  direction: 'horizontal',
+  simple: false
+})
+
+const emit = defineEmits<{
+  change: [index: number]
+}>()
+
+/**
+ * Determina o status de um passo baseado no índice ativo
+ */
+const getStepStatus = (index: number): 'wait' | 'process' | 'finish' | 'error' => {
+  // Status customizado do item tem prioridade
+  if (props.items[index]?.status) {
+    return props.items[index].status!
+  }
+  
+  // Status global tem segunda prioridade
+  if (props.status) {
+    return props.status
+  }
+  
+  // Status baseado no índice ativo
+  if (index < props.active) {
+    return 'finish'
+  } else if (index === props.active) {
+    return 'process'
+  } else {
+    return 'wait'
+  }
+}
+</script>
+
+<style scoped>
+.datametria-steps {
+  display: flex;
+  font-size: 14px;
+}
+
+.datametria-steps--horizontal {
+  flex-direction: row;
+}
+
+.datametria-steps--vertical {
+  flex-direction: column;
+}
+
+.datametria-steps__item {
+  position: relative;
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.datametria-steps--horizontal .datametria-steps__item {
+  flex-direction: column;
+}
+
+.datametria-steps--vertical .datametria-steps__item {
+  flex-direction: row;
+  padding-bottom: 24px;
+}
+
+.datametria-steps--vertical .datametria-steps__item.is-last {
+  padding-bottom: 0;
+}
+
+.datametria-steps__head {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.datametria-steps--horizontal .datametria-steps__head {
+  flex-direction: column;
+  margin-bottom: 8px;
+}
+
+.datametria-steps--vertical .datametria-steps__head {
+  flex-direction: column;
+  margin-right: 16px;
+  flex-shrink: 0;
+}
+
+.datametria-steps__icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 500;
+  border: 2px solid var(--datametria-border, #dcdfe6);
+  background: var(--datametria-bg, #fff);
+  color: var(--datametria-text-secondary, #909399);
+  transition: all 0.3s;
+  z-index: 1;
+}
+
+.datametria-steps__item.is-process .datametria-steps__icon {
+  border-color: var(--datametria-primary, #0072ce);
+  background: var(--datametria-primary, #0072ce);
+  color: #fff;
+}
+
+.datametria-steps__item.is-finish .datametria-steps__icon {
+  border-color: var(--datametria-success, #67c23a);
+  background: var(--datametria-success, #67c23a);
+  color: #fff;
+}
+
+.datametria-steps__item.is-error .datametria-steps__icon {
+  border-color: var(--datametria-danger, #f56c6c);
+  background: var(--datametria-danger, #f56c6c);
+  color: #fff;
+}
+
+.datametria-steps__line {
+  position: absolute;
+  background: var(--datametria-border, #dcdfe6);
+}
+
+.datametria-steps--horizontal .datametria-steps__line {
+  height: 2px;
+  top: 15px;
+  left: -50%;
+  right: 50%;
+}
+
+.datametria-steps--vertical .datametria-steps__line {
+  width: 2px;
+  top: 32px;
+  bottom: 0;
+  left: 15px;
+}
+
+.datametria-steps__line-inner {
+  width: 0;
+  height: 100%;
+  background: var(--datametria-primary, #0072ce);
+  transition: width 0.3s, height 0.3s;
+}
+
+.datametria-steps__item.is-finish .datametria-steps__line-inner,
+.datametria-steps__item.is-process .datametria-steps__line-inner {
+  width: 100%;
+  height: 100%;
+  background: var(--datametria-success, #67c23a);
+}
+
+.datametria-steps__item.is-error .datametria-steps__line-inner {
+  width: 100%;
+  height: 100%;
+  background: var(--datametria-danger, #f56c6c);
+}
+
+.datametria-steps__main {
+  text-align: center;
+}
+
+.datametria-steps--vertical .datametria-steps__main {
+  text-align: left;
+  flex: 1;
+}
+
+.datametria-steps__title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--datametria-text-primary, #303133);
+  line-height: 1.5;
+}
+
+.datametria-steps__item.is-wait .datametria-steps__title {
+  color: var(--datametria-text-secondary, #909399);
+}
+
+.datametria-steps__item.is-process .datametria-steps__title {
+  color: var(--datametria-primary, #0072ce);
+}
+
+.datametria-steps__item.is-finish .datametria-steps__title {
+  color: var(--datametria-success, #67c23a);
+}
+
+.datametria-steps__item.is-error .datametria-steps__title {
+  color: var(--datametria-danger, #f56c6c);
+}
+
+.datametria-steps__description {
+  font-size: 12px;
+  color: var(--datametria-text-secondary, #909399);
+  margin-top: 4px;
+  line-height: 1.5;
+}
+
+.datametria-steps--simple .datametria-steps__description {
+  display: none;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .datametria-steps__icon {
+    border-color: var(--datametria-border-dark, #4c4d4f);
+    background: var(--datametria-bg-dark, #1d1e1f);
+    color: var(--datametria-text-secondary-dark, #909399);
+  }
+
+  .datametria-steps__item.is-process .datametria-steps__icon {
+    border-color: var(--datametria-primary-dark, #409eff);
+    background: var(--datametria-primary-dark, #409eff);
+  }
+
+  .datametria-steps__line {
+    background: var(--datametria-border-dark, #4c4d4f);
+  }
+
+  .datametria-steps__title {
+    color: var(--datametria-text-primary-dark, #e5eaf3);
+  }
+
+  .datametria-steps__item.is-wait .datametria-steps__title {
+    color: var(--datametria-text-secondary-dark, #909399);
+  }
+
+  .datametria-steps__item.is-process .datametria-steps__title {
+    color: var(--datametria-primary-dark, #409eff);
+  }
+
+  .datametria-steps__description {
+    color: var(--datametria-text-secondary-dark, #909399);
+  }
+}
+</style>

package/src/components/DatametriaSwitch.vue

@@ -1,137 +1,143 @@
 <template>
-  <div class="dm-switch">
-    <label class="dm-switch__label">
-      <input
-        type="checkbox"
-        class="dm-switch__input"
-        :checked="modelValue"
-        :disabled="disabled"
-        :aria-label="ariaLabel"
-        :aria-checked="modelValue"
-        role="switch"
-        @change="handleChange"
-      />
-      <span class="dm-switch__track">
-        <span class="dm-switch__thumb"></span>
+  <button
+    type="button"
+    role="switch"
+    class="datametria-switch"
+    :class="{
+      'is-checked': modelValue,
+      'is-disabled': disabled,
+      'is-loading': loading
+    }"
+    :aria-checked="modelValue"
+    :disabled="disabled || loading"
+    @click="handleClick"
+  >
+    <span class="datametria-switch__core" :style="coreStyle">
+      <span v-if="loading" class="datametria-switch__loading">
+        <span class="spinner"></span>
       </span>
-      <span v-if="label" class="dm-switch__text">{{ label }}</span>
-    </label>
-    <p v-if="error" class="dm-switch__error">{{ error }}</p>
-  </div>
+    </span>
+  </button>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+
 interface Props {
   modelValue?: boolean
-  label?: string
   disabled?: boolean
-  error?: string
-  ariaLabel?: string
+  loading?: boolean
+  activeColor?: string
+  inactiveColor?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false,
-  disabled: false
+  disabled: false,
+  loading: false,
+  activeColor: '#0072ce',
+  inactiveColor: '#dcdfe6'
 })
 
 const emit = defineEmits<{
   'update:modelValue': [value: boolean]
+  change: [value: boolean]
 }>()
 
-const handleChange = (event: Event) => {
-  if (!props.disabled) {
-    emit('update:modelValue', (event.target as HTMLInputElement).checked)
-  }
+const coreStyle = computed(() => ({
+  backgroundColor: props.modelValue ? props.activeColor : props.inactiveColor
+}))
+
+const handleClick = () => {
+  if (props.disabled || props.loading) return
+  const newValue = !props.modelValue
+  emit('update:modelValue', newValue)
+  emit('change', newValue)
 }
 </script>
 
 <style scoped>
-.dm-switch {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dm-spacing-1, 0.25rem);
-}
-
-.dm-switch__label {
+.datametria-switch {
   display: inline-flex;
   align-items: center;
-  gap: var(--dm-spacing-3, 0.75rem);
+  position: relative;
+  font-size: 14px;
+  line-height: 20px;
+  height: 20px;
+  vertical-align: middle;
+  border: none;
+  background: transparent;
   cursor: pointer;
-  min-height: 44px;
-  padding: var(--dm-spacing-2, 0.5rem);
-  user-select: none;
+  padding: 0;
 }
 
-.dm-switch__label:has(.dm-switch__input:disabled) {
+.datametria-switch.is-disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
 
-.dm-switch__input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
+.datametria-switch.is-loading {
+  cursor: not-allowed;
 }
 
-.dm-switch__track {
+.datametria-switch__core {
+  display: inline-block;
   position: relative;
-  width: 44px;
-  height: 24px;
-  background: var(--dm-neutral-300, #d1d5db);
-  border-radius: 12px;
-  transition: all 0.2s;
-  flex-shrink: 0;
+  width: 40px;
+  height: 20px;
+  border-radius: 10px;
+  transition: background-color 0.3s;
 }
 
-.dm-switch__thumb {
+.datametria-switch__core::after {
+  content: '';
   position: absolute;
   top: 2px;
   left: 2px;
-  width: 20px;
-  height: 20px;
-  background: white;
+  width: 16px;
+  height: 16px;
   border-radius: 50%;
-  transition: all 0.2s;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.dm-switch__input:checked + .dm-switch__track {
-  background: var(--dm-primary, #0072CE);
+  background-color: #fff;
+  transition: transform 0.3s;
 }
 
-.dm-switch__input:checked + .dm-switch__track .dm-switch__thumb {
+.datametria-switch.is-checked .datametria-switch__core::after {
   transform: translateX(20px);
 }
 
-.dm-switch__input:focus-visible + .dm-switch__track {
-  outline: 2px solid var(--dm-primary, #0072CE);
-  outline-offset: 2px;
+.datametria-switch__loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.dm-switch__input:disabled + .dm-switch__track {
-  background: var(--dm-neutral-200, #e5e7eb);
+.spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid #fff;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
 }
 
-.dm-switch__text {
-  color: var(--dm-neutral-900, #111827);
-  font-size: var(--dm-font-size-base, 1rem);
-  line-height: 1.5;
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }
 
-.dm-switch__error {
-  color: var(--dm-error, #ef4444);
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  margin: 0;
+.datametria-switch:focus-visible {
+  outline: 2px solid var(--dm-color-primary, #0072ce);
+  outline-offset: 2px;
+  border-radius: 10px;
 }
 
+/* Dark mode */
 @media (prefers-color-scheme: dark) {
-  .dm-switch__track {
-    background: var(--dm-neutral-700, #374151);
-  }
-
-  .dm-switch__input:disabled + .dm-switch__track {
-    background: var(--dm-neutral-800, #1f2937);
+  .datametria-switch__core {
+    background-color: var(--dm-bg-color-dark, #1e1e1e);
   }
 }
 </style>

package/src/components/DatametriaTabPane.vue

@@ -0,0 +1,82 @@
+<template>
+  <div
+    :id="id"
+    class="datametria-tab-pane"
+    :class="{ 'is-active': active }"
+    role="tabpanel"
+    :aria-labelledby="ariaLabelledby"
+    :hidden="!active"
+  >
+    <slot v-if="lazy ? (active || wasActive) : true"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, inject, onMounted, onBeforeUnmount, computed } from 'vue'
+
+interface Props {
+  label: string
+  name?: string
+  disabled?: boolean
+  lazy?: boolean
+  icon?: string
+  badge?: string | number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  lazy: false
+})
+
+const tabsContext = inject<any>('datametriaTabs', null)
+const wasActive = ref(false)
+
+const active = computed(() => {
+  if (!tabsContext) return false
+  return tabsContext.activePane.value === (props.name || props.label)
+})
+
+const id = computed(() => {
+  const name = props.name || props.label
+  return `pane-${name.replace(/\s+/g, '-').toLowerCase()}`
+})
+
+const ariaLabelledby = computed(() => {
+  const name = props.name || props.label
+  return `tab-${name.replace(/\s+/g, '-').toLowerCase()}`
+})
+
+watch(active, (isActive) => {
+  if (isActive) {
+    wasActive.value = true
+  }
+})
+
+onMounted(() => {
+  if (tabsContext) {
+    tabsContext.registerPane({
+      label: props.label,
+      name: props.name || props.label,
+      disabled: props.disabled,
+      icon: props.icon,
+      badge: props.badge
+    })
+  }
+})
+
+onBeforeUnmount(() => {
+  if (tabsContext) {
+    tabsContext.unregisterPane(props.name || props.label)
+  }
+})
+</script>
+
+<style scoped>
+.datametria-tab-pane {
+  display: none;
+}
+
+.datametria-tab-pane.is-active {
+  display: block;
+}
+</style>