f51c77cefe
- Isolate PagedJS in iframe to avoid DOM/CSS conflicts - Add EditorPanel for global CSS controls - Add StylesheetViewer with highlight.js syntax highlighting - Add ElementPopup for element-specific CSS editing - CSS modifications update preview reactively - Support px/rem/em units 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
152 lines
2.8 KiB
Vue
152 lines
2.8 KiB
Vue
<template>
|
||
<div
|
||
v-if="visible"
|
||
id="element-popup"
|
||
:style="{ top: position.y + 'px', left: position.x + 'px' }"
|
||
>
|
||
<div class="popup-header">
|
||
<span>{{ selector }}</span>
|
||
<button class="close-btn" @click="$emit('close')">×</button>
|
||
</div>
|
||
<div class="popup-body">
|
||
<div class="popup-controls">
|
||
<div class="control" v-if="currentFontSize !== null">
|
||
<label>font-size</label>
|
||
<input
|
||
type="number"
|
||
step="0.1"
|
||
:value="currentFontSize"
|
||
@input="$emit('update:fontSize', parseFloat($event.target.value))"
|
||
/>
|
||
<span>{{ fontSizeUnit }}</span>
|
||
</div>
|
||
<p v-else class="no-styles">Aucun style éditable</p>
|
||
</div>
|
||
<div class="popup-css">
|
||
<pre><code class="hljs language-css" v-html="highlightedCss"></code></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue';
|
||
import hljs from 'highlight.js/lib/core';
|
||
import css from 'highlight.js/lib/languages/css';
|
||
import 'highlight.js/styles/github.css';
|
||
|
||
hljs.registerLanguage('css', css);
|
||
|
||
const props = defineProps({
|
||
visible: Boolean,
|
||
position: Object,
|
||
selector: String,
|
||
elementCss: String,
|
||
currentFontSize: Number,
|
||
fontSizeUnit: String
|
||
});
|
||
|
||
defineEmits(['close', 'update:fontSize']);
|
||
|
||
const highlightedCss = computed(() => {
|
||
if (!props.elementCss) return '<span class="no-css">Aucun style défini</span>';
|
||
return hljs.highlight(props.elementCss, { language: 'css' }).value;
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
#element-popup {
|
||
position: fixed;
|
||
background: white;
|
||
border-radius: 4px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
z-index: 10000;
|
||
min-width: 400px;
|
||
max-width: 500px;
|
||
}
|
||
|
||
.popup-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0.5rem 0.75rem;
|
||
border-bottom: 1px solid #eee;
|
||
font-size: 0.875rem;
|
||
font-weight: bold;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.close-btn {
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 1.25rem;
|
||
line-height: 1;
|
||
padding: 0;
|
||
}
|
||
|
||
.popup-body {
|
||
display: flex;
|
||
gap: 1px;
|
||
background: #eee;
|
||
}
|
||
|
||
.popup-controls {
|
||
flex: 1;
|
||
padding: 0.75rem;
|
||
background: white;
|
||
}
|
||
|
||
.popup-css {
|
||
flex: 1;
|
||
padding: 0.75rem;
|
||
background: #1e1e1e;
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.popup-css pre {
|
||
margin: 0;
|
||
font-size: 0.75rem;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.popup-css code {
|
||
background: transparent;
|
||
color: #fff;
|
||
}
|
||
|
||
.control {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.control label {
|
||
display: block;
|
||
font-size: 0.75rem;
|
||
margin-bottom: 0.25rem;
|
||
color: #666;
|
||
}
|
||
|
||
.control input {
|
||
width: 60px;
|
||
padding: 0.25rem;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.control span {
|
||
font-size: 0.75rem;
|
||
color: #666;
|
||
margin-left: 0.25rem;
|
||
}
|
||
|
||
.no-styles {
|
||
font-size: 0.75rem;
|
||
color: #999;
|
||
margin: 0;
|
||
}
|
||
|
||
.no-css {
|
||
color: #666;
|
||
font-style: italic;
|
||
}
|
||
</style>
|