@datametria/vue-components 2.2.0 → 2.3.0

package/src/components/DatametriaPopconfirm.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="datametria-popconfirm" ref="popconfirmRef">
+    <div ref="triggerRef" @click="handleTriggerClick">
+      <slot />
+    </div>
+
+    <Teleport to="body">
+      <div
+        v-if="visible"
+        ref="popoverRef"
+        class="datametria-popconfirm__popover"
+        :style="popoverStyle"
+      >
+        <div class="datametria-popconfirm__content">
+          <div class="datametria-popconfirm__icon">
+            <svg viewBox="0 0 24 24" fill="none">
+              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="datametria-popconfirm__message">{{ title }}</div>
+        </div>
+        <div class="datametria-popconfirm__actions">
+          <button class="datametria-popconfirm__btn datametria-popconfirm__btn--cancel" @click="handleCancel">
+            {{ cancelButtonText }}
+          </button>
+          <button class="datametria-popconfirm__btn datametria-popconfirm__btn--confirm" @click="handleConfirm">
+            {{ confirmButtonText }}
+          </button>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+type Placement = 'top' | 'bottom' | 'left' | 'right'
+
+interface Props {
+  title?: string
+  confirmButtonText?: string
+  cancelButtonText?: string
+  placement?: Placement
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: 'Tem certeza?',
+  confirmButtonText: 'Confirmar',
+  cancelButtonText: 'Cancelar',
+  placement: 'top'
+})
+
+const emit = defineEmits<{
+  confirm: []
+  cancel: []
+}>()
+
+const visible = ref(false)
+const triggerRef = ref<HTMLElement>()
+const popoverRef = ref<HTMLElement>()
+const popconfirmRef = ref<HTMLElement>()
+
+const popoverStyle = ref({
+  position: 'absolute',
+  top: '0px',
+  left: '0px'
+})
+
+const handleTriggerClick = () => {
+  visible.value = !visible.value
+  if (visible.value) {
+    updatePosition()
+  }
+}
+
+const handleConfirm = () => {
+  visible.value = false
+  emit('confirm')
+}
+
+const handleCancel = () => {
+  visible.value = false
+  emit('cancel')
+}
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (!visible.value) return
+  
+  const target = event.target as Node
+  if (
+    popoverRef.value && !popoverRef.value.contains(target) &&
+    triggerRef.value && !triggerRef.value.contains(target)
+  ) {
+    visible.value = false
+  }
+}
+
+const updatePosition = () => {
+  if (!triggerRef.value || !popoverRef.value) return
+
+  const triggerRect = triggerRef.value.getBoundingClientRect()
+  const popoverRect = popoverRef.value.getBoundingClientRect()
+  
+  let top = 0
+  let left = 0
+
+  switch (props.placement) {
+    case 'top':
+      top = triggerRect.top - popoverRect.height - 8
+      left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2
+      break
+    case 'bottom':
+      top = triggerRect.bottom + 8
+      left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2
+      break
+    case 'left':
+      top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2
+      left = triggerRect.left - popoverRect.width - 8
+      break
+    case 'right':
+      top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2
+      left = triggerRect.right + 8
+      break
+  }
+
+  popoverStyle.value = {
+    position: 'absolute',
+    top: `${top + window.scrollY}px`,
+    left: `${left + window.scrollX}px`
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<style scoped>
+.datametria-popconfirm {
+  display: inline-block;
+}
+
+.datametria-popconfirm__popover {
+  z-index: 2000;
+  min-width: 200px;
+  padding: 12px;
+  background: var(--datametria-bg-color, #ffffff);
+  border: 1px solid var(--datametria-border-color, #dcdfe6);
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.datametria-popconfirm__content {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 12px;
+}
+
+.datametria-popconfirm__icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+  color: var(--datametria-warning-color, #e6a23c);
+  flex-shrink: 0;
+}
+
+.datametria-popconfirm__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.datametria-popconfirm__message {
+  font-size: 14px;
+  color: var(--datametria-text-primary, #303133);
+  line-height: 1.5;
+}
+
+.datametria-popconfirm__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.datametria-popconfirm__btn {
+  padding: 5px 15px;
+  font-size: 12px;
+  border-radius: 3px;
+  border: 1px solid var(--datametria-border-color, #dcdfe6);
+  background: var(--datametria-bg-color, #ffffff);
+  color: var(--datametria-text-primary, #303133);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.datametria-popconfirm__btn:hover {
+  opacity: 0.8;
+}
+
+.datametria-popconfirm__btn--confirm {
+  background: var(--datametria-primary-color, #0072ce);
+  border-color: var(--datametria-primary-color, #0072ce);
+  color: #ffffff;
+}
+
+.datametria-popconfirm__btn--cancel {
+  background: var(--datametria-bg-color, #ffffff);
+  border-color: var(--datametria-border-color, #dcdfe6);
+}
+
+@media (prefers-color-scheme: dark) {
+  .datametria-popconfirm__popover {
+    background: var(--datametria-bg-color, #1d1e1f);
+    border-color: var(--datametria-border-color, #4c4d4f);
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
+  }
+
+  .datametria-popconfirm__message {
+    color: var(--datametria-text-primary, #e5eaf3);
+  }
+
+  .datametria-popconfirm__btn {
+    background: var(--datametria-bg-color, #1d1e1f);
+    border-color: var(--datametria-border-color, #4c4d4f);
+    color: var(--datametria-text-primary, #e5eaf3);
+  }
+
+  .datametria-popconfirm__btn--cancel {
+    background: var(--datametria-bg-color, #1d1e1f);
+  }
+}
+</style>

package/src/components/DatametriaProgress.vue

@@ -1,22 +1,39 @@
 <template>
-  <div class="dm-progress">
-    <div v-if="label" class="dm-progress__header">
-      <span class="dm-progress__label">{{ label }}</span>
-      <span v-if="showValue" class="dm-progress__value">{{ value }}%</span>
+  <div class="datametria-progress" :class="classes">
+    <div v-if="type === 'line'" class="datametria-progress-bar">
+      <div class="datametria-progress-bar__outer" :style="{ height: `${strokeWidth}px` }">
+        <div class="datametria-progress-bar__inner" :style="barStyle">
+          <div v-if="showText && textInside" class="datametria-progress-bar__innerText">
+            {{ percentage }}%
+          </div>
+        </div>
+      </div>
+      <div v-if="showText && !textInside" class="datametria-progress__text">
+        <slot>{{ percentage }}%</slot>
+      </div>
     </div>
-    <div
-      class="dm-progress__track"
-      role="progressbar"
-      :aria-valuenow="value"
-      :aria-valuemin="0"
-      :aria-valuemax="100"
-      :aria-label="ariaLabel || label"
-    >
-      <div
-        class="dm-progress__bar"
-        :class="`dm-progress__bar--${variant}`"
-        :style="{ width: `${clampedValue}%` }"
-      ></div>
+
+    <div v-else class="datametria-progress-circle">
+      <svg :width="circleSize" :height="circleSize" viewBox="0 0 100 100">
+        <path
+          class="datametria-progress-circle__track"
+          :d="trackPath"
+          :stroke-width="relativeStrokeWidth"
+          fill="none"
+        />
+        <path
+          class="datametria-progress-circle__path"
+          :d="trackPath"
+          :stroke-width="relativeStrokeWidth"
+          :stroke-dasharray="perimeter"
+          :stroke-dashoffset="circlePathOffset"
+          :style="circlePathStyle"
+          fill="none"
+        />
+      </svg>
+      <div v-if="showText" class="datametria-progress__text">
+        <slot>{{ percentage }}%</slot>
+      </div>
     </div>
   </div>
 </template>
@@ -24,90 +41,186 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+type ProgressType = 'line' | 'circle' | 'dashboard'
+type ProgressStatus = 'success' | 'warning' | 'error' | ''
+
 interface Props {
-  value: number
-  label?: string
-  variant?: 'primary' | 'success' | 'warning' | 'error'
-  showValue?: boolean
-  ariaLabel?: string
+  percentage?: number
+  type?: ProgressType
+  status?: ProgressStatus
+  strokeWidth?: number
+  showText?: boolean
+  textInside?: boolean
+  width?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  variant: 'primary',
-  showValue: true
+  percentage: 0,
+  type: 'line',
+  status: '',
+  strokeWidth: 6,
+  showText: true,
+  textInside: false,
+  width: 126
+})
+
+const classes = computed(() => ({
+  [`datametria-progress--${props.type}`]: true,
+  [`datametria-progress--${props.status}`]: props.status,
+  'datametria-progress--text-inside': props.textInside
+}))
+
+const barStyle = computed(() => ({
+  width: `${props.percentage}%`,
+  backgroundColor: statusColor.value
+}))
+
+const statusColor = computed(() => {
+  const colors = {
+    success: 'var(--datametria-success-color, #67c23a)',
+    warning: 'var(--datametria-warning-color, #e6a23c)',
+    error: 'var(--datametria-error-color, #f56c6c)',
+    '': 'var(--datametria-primary-color, #0072ce)'
+  }
+  return colors[props.status]
+})
+
+const circleSize = computed(() => props.width)
+
+const relativeStrokeWidth = computed(() => {
+  return ((props.strokeWidth / props.width) * 100).toFixed(1)
+})
+
+const radius = computed(() => {
+  if (props.type === 'circle') {
+    return 50 - parseFloat(relativeStrokeWidth.value) / 2
+  }
+  return 50 - parseFloat(relativeStrokeWidth.value) / 2
 })
 
-const clampedValue = computed(() => {
-  return Math.min(Math.max(props.value, 0), 100)
+const trackPath = computed(() => {
+  const r = radius.value
+  const isDashboard = props.type === 'dashboard'
+  return isDashboard
+    ? `M 50 50 m 0 ${r} a ${r} ${r} 0 1 1 0 -${r * 2} a ${r} ${r} 0 1 1 0 ${r * 2}`
+    : `M 50 50 m 0 -${r} a ${r} ${r} 0 1 1 0 ${r * 2} a ${r} ${r} 0 1 1 0 -${r * 2}`
 })
+
+const perimeter = computed(() => {
+  return 2 * Math.PI * radius.value
+})
+
+const circlePathOffset = computed(() => {
+  const rate = props.type === 'dashboard' ? 0.75 : 1
+  return perimeter.value * (1 - props.percentage / 100) * rate
+})
+
+const circlePathStyle = computed(() => ({
+  stroke: statusColor.value,
+  strokeLinecap: 'round'
+}))
 </script>
 
 <style scoped>
-.dm-progress {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dm-spacing-2, 0.5rem);
+.datametria-progress {
+  position: relative;
+  line-height: 1;
 }
 
-.dm-progress__header {
+.datametria-progress--line {
   display: flex;
-  justify-content: space-between;
   align-items: center;
 }
 
-.dm-progress__label {
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  font-weight: var(--dm-font-weight-medium, 500);
-  color: var(--dm-neutral-900, #111827);
-}
-
-.dm-progress__value {
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  font-weight: var(--dm-font-weight-semibold, 600);
-  color: var(--dm-neutral-600, #4b5563);
+.datametria-progress-bar {
+  flex: 1;
+  display: flex;
+  align-items: center;
 }
 
-.dm-progress__track {
+.datametria-progress-bar__outer {
   width: 100%;
-  height: 8px;
-  background: var(--dm-neutral-200, #e5e7eb);
-  border-radius: var(--dm-radius-sm, 0.25rem);
+  background-color: var(--datametria-border-color-light, #e4e7ed);
+  border-radius: 100px;
   overflow: hidden;
 }
 
-.dm-progress__bar {
+.datametria-progress-bar__inner {
   height: 100%;
-  border-radius: var(--dm-radius-sm, 0.25rem);
-  transition: width var(--dm-transition-base, 0.3s ease);
+  border-radius: 100px;
+  background-color: var(--datametria-primary-color, #0072ce);
+  transition: width 0.6s ease;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 8px;
+}
+
+.datametria-progress-bar__innerText {
+  color: #ffffff;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.datametria-progress__text {
+  margin-left: 8px;
+  font-size: 14px;
+  color: var(--datametria-text-primary, #303133);
+  white-space: nowrap;
+}
+
+.datametria-progress--circle,
+.datametria-progress--dashboard {
+  display: inline-block;
+  position: relative;
+}
+
+.datametria-progress-circle {
+  position: relative;
+  display: inline-block;
+}
+
+.datametria-progress-circle__track {
+  stroke: var(--datametria-border-color-light, #e4e7ed);
+}
+
+.datametria-progress-circle__path {
+  transition: stroke-dashoffset 0.6s ease;
 }
 
-.dm-progress__bar--primary {
-  background: var(--dm-primary, #0072CE);
+.datametria-progress--circle .datametria-progress__text,
+.datametria-progress--dashboard .datametria-progress__text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+  font-size: 14px;
 }
 
-.dm-progress__bar--success {
-  background: var(--dm-success, #10b981);
+.datametria-progress--success .datametria-progress-bar__inner {
+  background-color: var(--datametria-success-color, #67c23a);
 }
 
-.dm-progress__bar--warning {
-  background: var(--dm-warning, #f59e0b);
+.datametria-progress--warning .datametria-progress-bar__inner {
+  background-color: var(--datametria-warning-color, #e6a23c);
 }
 
-.dm-progress__bar--error {
-  background: var(--dm-error, #ef4444);
+.datametria-progress--error .datametria-progress-bar__inner {
+  background-color: var(--datametria-error-color, #f56c6c);
 }
 
 @media (prefers-color-scheme: dark) {
-  .dm-progress__track {
-    background: var(--dm-neutral-700, #374151);
+  .datametria-progress-bar__outer {
+    background-color: var(--datametria-border-color-light, #4c4d4f);
   }
 
-  .dm-progress__label {
-    color: var(--dm-neutral-50, #ffffff);
+  .datametria-progress__text {
+    color: var(--datametria-text-primary, #e5eaf3);
   }
 
-  .dm-progress__value {
-    color: var(--dm-neutral-400, #9ca3af);
+  .datametria-progress-circle__track {
+    stroke: var(--datametria-border-color-light, #4c4d4f);
   }
 }
 </style>