@meistrari/minuta-nuxt 0.1.0

package/dist/runtime/components/MinutaChromeEditor.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { sanitizeRichHtml } from '../utils/sanitizeRichHtml'
+import MinutaChromeCanvas from './MinutaChromeCanvas.vue'
+import MinutaIcon from './MinutaIcon.vue'
+
+/**
+ * Editor de cabeçalho/rodapé da folha — canvas estilo Word em tamanho real da
+ * faixa (texto/imagem/forma com arrasto, resize e fonte). Port do
+ * poc-chrome-editor do defesa.ai com CSS puro.
+ */
+const props = withDefaults(defineProps<{
+    part: 'header' | 'footer'
+    html: string
+    scope: 'all' | 'first'
+    /** altura real da faixa (margem da página) — vem do consumidor */
+    bandHeightPx?: number
+    docFont?: string
+    showPageNumber?: boolean
+    /** mostra o toggle de numeração no rodapé */
+    allowPageNumberToggle?: boolean
+}>(), {
+    bandHeightPx: 94,
+    docFont: 'Arial',
+    showPageNumber: true,
+    allowPageNumberToggle: false,
+})
+
+const emit = defineEmits<{
+    apply: [payload: { html: string, scope: 'all' | 'first', showPageNumber?: boolean }]
+    close: []
+}>()
+
+const localScope = ref<'all' | 'first'>(props.scope)
+const localHtml = ref(sanitizeRichHtml(props.html))
+const localShowPageNumber = ref(props.showPageNumber)
+
+const effectiveShowPageNumber = computed(() =>
+    props.allowPageNumberToggle ? localShowPageNumber.value : props.showPageNumber)
+
+function apply() {
+    emit('apply', {
+        html: sanitizeRichHtml(localHtml.value),
+        scope: localScope.value,
+        ...(props.allowPageNumberToggle ? { showPageNumber: localShowPageNumber.value } : {}),
+    })
+}
+</script>
+
+<template>
+    <div class="minuta-chrome-card">
+        <div class="minuta-chrome-card__head">
+            <span class="minuta-chrome-card__badge">
+                {{ part === 'header' ? 'Cabeçalho das páginas' : 'Rodapé das páginas' }}
+            </span>
+            <button class="minuta-chrome-card__close" type="button" @click="emit('close')">
+                <MinutaIcon name="i-ph-x" />
+            </button>
+        </div>
+
+        <MinutaChromeCanvas
+            :html="localHtml"
+            :width-px="794"
+            :height-px="bandHeightPx"
+            :doc-font="docFont"
+            :ghost="part === 'footer' && effectiveShowPageNumber ? 'Página 1 de N' : ''"
+            :placeholder="part === 'header'
+                ? 'Monte o cabeçalho: texto, imagem e formas — arraste como no Word'
+                : (effectiveShowPageNumber ? 'Monte o rodapé — o nº de página é automático' : 'Monte o rodapé — sem numeração de páginas')"
+            class="minuta-chrome-card__canvas"
+            @change="(html: string) => localHtml = html"
+        />
+
+        <label v-if="allowPageNumberToggle && part === 'footer'" class="minuta-chrome-card__pagenum">
+            <input v-model="localShowPageNumber" type="checkbox">
+            Numerar as páginas automaticamente ("Página 1 de N")
+        </label>
+
+        <div class="minuta-chrome-card__scope">
+            <span>Aparece em</span>
+            <select v-model="localScope">
+                <option value="all">
+                    Todas as páginas
+                </option>
+                <option value="first">
+                    Só na primeira página
+                </option>
+            </select>
+        </div>
+        <div class="minuta-chrome-card__actions">
+            <button class="minuta-chrome-card__apply" type="button" @click="apply">
+                Aplicar
+            </button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.minuta-chrome-card{background:#fff;border:1px solid #ddd6fe;border-radius:12px;box-shadow:0 10px 25px -5px rgba(0,0,0,.15);max-height:calc(100vh - 120px);overflow-y:auto;padding:16px;width:min(846px,calc(100vw - 48px))}.minuta-chrome-card__head{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.minuta-chrome-card__badge{background:#ede9fe;border-radius:999px;color:#6d28d9;font-size:12px;font-weight:600;padding:2px 10px}.minuta-chrome-card__close{background:none;border:none;color:#9ca3af;cursor:pointer;display:inline-flex}.minuta-chrome-card__close:hover{color:#1f2937}.minuta-chrome-card__canvas{margin-bottom:10px}.minuta-chrome-card__pagenum{align-items:center;color:#374151;display:flex;font-size:12px;gap:8px;margin-bottom:8px}.minuta-chrome-card__scope{align-items:center;color:#6b7280;display:flex;font-size:12px;gap:8px;margin-bottom:10px}.minuta-chrome-card__scope select{background:#fff;border:1px solid #e5e7eb;border-radius:8px;color:#1f2937;font-size:12px;outline:none;padding:4px 8px;width:220px}.minuta-chrome-card__actions{display:flex;justify-content:flex-end}.minuta-chrome-card__apply{background:rgba(0,0,0,.88);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:12.5px;font-weight:500;padding:5px 14px}
+</style>

package/dist/runtime/components/MinutaDocumentViewer.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { MinutaFile } from '../composables/useMinutaApi'
+import { useMinutaApi } from '../composables/useMinutaApi'
+
+/**
+ * Overlay de visualização dos documentos do caso (imagem/texto/iframe),
+ * aberto pelos cards de fato extraído da margem ou pelo botão Documentos.
+ */
+
+const props = defineProps<{
+    files: MinutaFile[]
+    initialUrl?: string | null
+    /** página inicial (PDF em iframe via #page=N) */
+    initialPage?: number | null
+}>()
+
+const emit = defineEmits<{ close: [], error: [message: string] }>()
+
+const { getDownloadUrl } = useMinutaApi()
+
+const selected = ref(props.initialUrl || props.files[0]?.url || '')
+const content = ref<{ src: string, kind: 'image' | 'text' | 'frame', text?: string } | null>(null)
+const loading = ref(false)
+
+const currentName = computed(() => props.files.find(f => f.url === selected.value)?.name ?? '')
+
+async function load() {
+    const file = props.files.find(f => f.url === selected.value)
+    if (!file)
+        return
+    loading.value = true
+    content.value = null
+    try {
+        const src = await getDownloadUrl(file.url)
+        if (/\.(png|jpe?g|gif|webp|svg)$/i.test(file.name)) {
+            content.value = { src, kind: 'image' }
+        }
+        else if (/\.(txt|md|json|csv|log)$/i.test(file.name)) {
+            const text = await (await fetch(src)).text()
+            content.value = { src, kind: 'text', text }
+        }
+        else {
+            const isPdf = /\.pdf$/i.test(file.name)
+            const page = props.initialPage && file.url === props.initialUrl ? `#page=${props.initialPage}` : ''
+            content.value = { src: isPdf ? src + page : src, kind: 'frame' }
+        }
+    }
+    catch {
+        emit('error', 'Não consegui carregar o documento')
+    }
+    finally {
+        loading.value = false
+    }
+}
+
+watch(selected, load, { immediate: true })
+</script>
+
+<template>
+    <Teleport to="body">
+        <div class="minuta-viewer__overlay" @click.self="emit('close')">
+            <div class="minuta-viewer__modal">
+                <div class="minuta-viewer__head">
+                    <select v-if="files.length > 1" v-model="selected">
+                        <option v-for="file in files" :key="file.url" :value="file.url">
+                            {{ file.name }}
+                        </option>
+                    </select>
+                    <span v-else>{{ currentName }}</span>
+                    <button type="button" @click="emit('close')">
+                        ×
+                    </button>
+                </div>
+                <div class="minuta-viewer__body">
+                    <p v-if="loading" class="minuta-viewer__loading">
+                        Carregando…
+                    </p>
+                    <img v-else-if="content?.kind === 'image'" :src="content.src">
+                    <pre v-else-if="content?.kind === 'text'">{{ content.text }}</pre>
+                    <iframe v-else-if="content" :src="content.src" />
+                </div>
+            </div>
+        </div>
+    </Teleport>
+</template>
+
+<style scoped>
+.minuta-viewer__overlay{align-items:center;background:rgba(0,0,0,.5);display:flex;inset:0;justify-content:center;padding:24px;position:fixed;z-index:100}.minuta-viewer__modal{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px rgba(0,0,0,.2);display:flex;flex-direction:column;height:100%;max-height:90vh;max-width:960px;overflow:hidden;width:100%}.minuta-viewer__head{align-items:center;border-bottom:1px solid #e5e7eb;color:#111827;display:flex;font-size:14px;font-weight:600;gap:12px;justify-content:space-between;padding:10px 16px}.minuta-viewer__head select{background:#fff;border:.5px solid #d4d9df;border-radius:6px;font-size:13px;max-width:70%;padding:4px 8px}.minuta-viewer__head button{background:none;border:none;color:#6b7280;cursor:pointer;font-size:18px;line-height:1}.minuta-viewer__body{background:#f9fafb;flex:1;min-height:0;overflow-y:auto}.minuta-viewer__loading{color:#6b7280;font-size:13px;padding:24px}.minuta-viewer__body img{height:100%;-o-object-fit:contain;object-fit:contain;width:100%}.minuta-viewer__body pre{color:#1f2937;font-size:13px;line-height:1.6;margin:0;padding:20px;white-space:pre-wrap}.minuta-viewer__body iframe{border:0;height:100%;width:100%}
+</style>