233 lines
9.2 KiB
Vue
233 lines
9.2 KiB
Vue
<script setup>
|
|
import { ref, computed, watch } from 'vue';
|
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
|
|
|
/** Propiedades */
|
|
const props = defineProps({
|
|
element: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
/** Eventos */
|
|
const emit = defineEmits(['update']);
|
|
|
|
/** Propiedades computadas */
|
|
const formatting = computed(() => props.element?.formatting || {});
|
|
const hasTextElement = computed(() => props.element?.type === 'text');
|
|
|
|
/** Métodos */
|
|
const toggleBold = () => {
|
|
if (!hasTextElement.value) return;
|
|
updateFormatting('bold', !formatting.value.bold);
|
|
};
|
|
|
|
const toggleItalic = () => {
|
|
if (!hasTextElement.value) return;
|
|
updateFormatting('italic', !formatting.value.italic);
|
|
};
|
|
|
|
const toggleUnderline = () => {
|
|
if (!hasTextElement.value) return;
|
|
updateFormatting('underline', !formatting.value.underline);
|
|
};
|
|
|
|
const updateFontSize = (size) => {
|
|
if (!hasTextElement.value) return;
|
|
updateFormatting('fontSize', size);
|
|
};
|
|
|
|
const updateTextAlign = (align) => {
|
|
if (!hasTextElement.value) return;
|
|
updateFormatting('textAlign', align);
|
|
};
|
|
|
|
const updateColor = (color) => {
|
|
if (!hasTextElement.value) return;
|
|
updateFormatting('color', color);
|
|
};
|
|
|
|
const updateFormatting = (key, value) => {
|
|
const newFormatting = { ...formatting.value, [key]: value };
|
|
emit('update', {
|
|
id: props.element.id,
|
|
formatting: newFormatting
|
|
});
|
|
};
|
|
|
|
/** Colores predefinidos */
|
|
const predefinedColors = [
|
|
'#000000', '#333333', '#666666', '#999999',
|
|
'#FF0000', '#00FF00', '#0000FF', '#FFFF00',
|
|
'#FF00FF', '#00FFFF', '#FFA500', '#800080'
|
|
];
|
|
|
|
/** Tamaños de fuente */
|
|
const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="visible && hasTextElement"
|
|
class="flex items-center gap-6 px-4 py-2 bg-gray-50 dark:bg-primary-d/50 border-b border-gray-200 dark:border-primary/20"
|
|
>
|
|
<!-- Estilo de texto -->
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Estilo:</span>
|
|
<div class="flex gap-1">
|
|
<button
|
|
@click="toggleBold"
|
|
:class="[
|
|
'w-8 h-8 rounded flex items-center justify-center text-sm font-bold transition-colors',
|
|
formatting.bold
|
|
? 'bg-blue-500 text-white shadow-sm'
|
|
: 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
|
|
]"
|
|
title="Negrita (Ctrl+B)"
|
|
>
|
|
B
|
|
</button>
|
|
|
|
<button
|
|
@click="toggleItalic"
|
|
:class="[
|
|
'w-8 h-8 rounded flex items-center justify-center text-sm italic transition-colors',
|
|
formatting.italic
|
|
? 'bg-blue-500 text-white shadow-sm'
|
|
: 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
|
|
]"
|
|
title="Cursiva (Ctrl+I)"
|
|
>
|
|
I
|
|
</button>
|
|
|
|
<button
|
|
@click="toggleUnderline"
|
|
:class="[
|
|
'w-8 h-8 rounded flex items-center justify-center text-sm underline transition-colors',
|
|
formatting.underline
|
|
? 'bg-blue-500 text-white shadow-sm'
|
|
: 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
|
|
]"
|
|
title="Subrayado (Ctrl+U)"
|
|
>
|
|
U
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Separador -->
|
|
<div class="w-px h-6 bg-gray-300 dark:bg-primary/30"></div>
|
|
|
|
<!-- Tamaño de fuente -->
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Tamaño:</span>
|
|
<select
|
|
:value="formatting.fontSize || 12"
|
|
@change="updateFontSize(parseInt($event.target.value))"
|
|
class="px-2 py-1 text-sm border border-gray-200 rounded bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
>
|
|
<option v-for="size in fontSizes" :key="size" :value="size">
|
|
{{ size }}px
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Separador -->
|
|
<div class="w-px h-6 bg-gray-300 dark:bg-primary/30"></div>
|
|
|
|
<!-- Alineación -->
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Alinear:</span>
|
|
<div class="flex gap-1">
|
|
<button
|
|
@click="updateTextAlign('left')"
|
|
:class="[
|
|
'w-8 h-8 rounded flex items-center justify-center transition-colors',
|
|
(formatting.textAlign || 'left') === 'left'
|
|
? 'bg-blue-500 text-white shadow-sm'
|
|
: 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
|
|
]"
|
|
title="Alinear izquierda"
|
|
>
|
|
<GoogleIcon name="format_align_left" class="text-sm" />
|
|
</button>
|
|
|
|
<button
|
|
@click="updateTextAlign('center')"
|
|
:class="[
|
|
'w-8 h-8 rounded flex items-center justify-center transition-colors',
|
|
formatting.textAlign === 'center'
|
|
? 'bg-blue-500 text-white shadow-sm'
|
|
: 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
|
|
]"
|
|
title="Centrar"
|
|
>
|
|
<GoogleIcon name="format_align_center" class="text-sm" />
|
|
</button>
|
|
|
|
<button
|
|
@click="updateTextAlign('right')"
|
|
:class="[
|
|
'w-8 h-8 rounded flex items-center justify-center transition-colors',
|
|
formatting.textAlign === 'right'
|
|
? 'bg-blue-500 text-white shadow-sm'
|
|
: 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
|
|
]"
|
|
title="Alinear derecha"
|
|
>
|
|
<GoogleIcon name="format_align_right" class="text-sm" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Separador -->
|
|
<div class="w-px h-6 bg-gray-300 dark:bg-primary/30"></div>
|
|
|
|
<!-- Color de texto -->
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Color:</span>
|
|
<div class="flex items-center gap-2">
|
|
<!-- Color actual -->
|
|
<div
|
|
class="w-8 h-8 rounded border-2 border-gray-300 cursor-pointer relative overflow-hidden"
|
|
:style="{ backgroundColor: formatting.color || '#000000' }"
|
|
title="Color actual"
|
|
>
|
|
<input
|
|
type="color"
|
|
:value="formatting.color || '#000000'"
|
|
@input="updateColor($event.target.value)"
|
|
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Colores rápidos -->
|
|
<div class="flex gap-1">
|
|
<button
|
|
v-for="color in predefinedColors.slice(0, 6)"
|
|
:key="color"
|
|
@click="updateColor(color)"
|
|
class="w-6 h-6 rounded border border-gray-300 hover:scale-110 transition-transform"
|
|
:class="{
|
|
'ring-2 ring-blue-500': (formatting.color || '#000000') === color
|
|
}"
|
|
:style="{ backgroundColor: color }"
|
|
:title="color"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Información del elemento -->
|
|
<div class="ml-auto flex items-center gap-2 text-xs text-gray-500 dark:text-primary-dt/70">
|
|
<GoogleIcon name="text_fields" class="text-sm" />
|
|
<span>Elemento de texto seleccionado</span>
|
|
</div>
|
|
</div>
|
|
</template> |