@datametria/vue-components 2.3.0 → 2.4.0

package/src/components/DatametriaPopconfirm.vue

@@ -1,236 +1,242 @@
-<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
+<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);
   }
 
-  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>
+[data-theme="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>