@datametria/vue-components 2.3.1 → 2.4.0

package/src/components/DatametriaSteps.vue

@@ -1,314 +1,320 @@
-<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!
+<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);
   }
-  
-  // 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>
+[data-theme="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>