72 lines
2.5 KiB
Vue
72 lines
2.5 KiB
Vue
<template>
|
|
<!-- Debug visual (somente DEV): expõe estados internos úteis para testes e diagnóstico -->
|
|
<div
|
|
v-if="isDev"
|
|
style="position: fixed; right: 0; top: 0; bottom: 0; width: 360px; z-index: 999999; background: rgba(20, 20, 20, 0.95); color: #32CD32; padding: 20px 16px; font-family: 'Courier New', Courier, monospace; font-size: 12px; overflow-y: auto; border-left: 1px solid #333; display: flex; flex-direction: column; gap: 6px;"
|
|
>
|
|
<div style="font-weight: bold; color: #fff; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid #333; padding-bottom: 8px;">
|
|
EliTabela // Log Terminal
|
|
</div>
|
|
<div style="color: #bbb;">menuAberto: <span style="color: #fff;">{{ menuAberto }}</span></div>
|
|
<div style="color: #bbb;">menuPos: top=<span style="color: #fff;">{{ menuPopupPos.top }}</span>, left=<span style="color: #fff;">{{ menuPopupPos.left }}</span></div>
|
|
<div style="margin-top: 8px; white-space: pre-wrap; word-break: break-all;">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, onMounted, onUnmounted, type PropType, watch } from "vue"
|
|
|
|
export default defineComponent({
|
|
name: "EliTabelaDebug",
|
|
props: {
|
|
isDev: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
menuAberto: {
|
|
type: [Number, Object] as PropType<number | null>,
|
|
default: null,
|
|
},
|
|
menuPopupPos: {
|
|
type: Object as PropType<{ top: number; left: number }>,
|
|
required: true,
|
|
},
|
|
},
|
|
setup(props) {
|
|
const applyStyle = () => {
|
|
let styleTag = document.getElementById("eli-tabela-debug-style")
|
|
if (props.isDev) {
|
|
if (!styleTag) {
|
|
styleTag = document.createElement("style")
|
|
styleTag.id = "eli-tabela-debug-style"
|
|
styleTag.textContent = `
|
|
html, body {
|
|
overflow-x: auto !important;
|
|
}
|
|
#app, .v-application__wrap, .v-application {
|
|
padding-right: 360px !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
.v-container, .stack {
|
|
overflow-x: auto !important;
|
|
max-width: 100% !important;
|
|
}
|
|
`
|
|
document.head.appendChild(styleTag)
|
|
}
|
|
} else {
|
|
if (styleTag) styleTag.remove()
|
|
}
|
|
}
|
|
|
|
watch(() => props.isDev, applyStyle)
|
|
onMounted(applyStyle)
|
|
onUnmounted(() => {
|
|
const styleTag = document.getElementById("eli-tabela-debug-style")
|
|
if (styleTag) styleTag.remove()
|
|
})
|
|
},
|
|
})
|
|
</script>
|