refactor: extract shared patterns from popup/settings components
- Create useColoris composable (shared Coloris init across 4 files) - Create useLinkedSpacing composable (linked margin/padding logic from TextSettings) - Create BasePopup component (shared popup shell, CSS editor, inheritance button) - Add watchProp helper in ElementPopup (12 watchers → 12 compact lines) - Use extractSpacing for @page margin parsing in PagePopup and PageSettings Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
0c682c78c0
commit
69d5ebe7ed
7 changed files with 816 additions and 1187 deletions
|
|
@ -1,277 +1,192 @@
|
|||
<template>
|
||||
<div
|
||||
v-if="visible"
|
||||
<BasePopup
|
||||
ref="basePopup"
|
||||
id="element-popup"
|
||||
class="settings-popup"
|
||||
:style="{ top: position.y + 'px', left: position.x + 'px' }"
|
||||
:display-css="displayedCss"
|
||||
:editable-css="elementCss"
|
||||
:popup-width="800"
|
||||
:popup-height="600"
|
||||
@close="close"
|
||||
@css-input="handleCssInput"
|
||||
@toggle-inheritance="toggleInheritance"
|
||||
>
|
||||
<div class="popup-header">
|
||||
<div class="header-left">
|
||||
<span class="element-label">{{ selectorTag }}</span>
|
||||
<span class="instance-count">{{ instanceCount }} instances</span>
|
||||
</div>
|
||||
<button class="close-btn" @click="close">×</button>
|
||||
</div>
|
||||
<template #header-left>
|
||||
<span class="element-label">{{ selectorTag }}</span>
|
||||
<span class="instance-count">{{ instanceCount }} instances</span>
|
||||
</template>
|
||||
|
||||
<div class="popup-body">
|
||||
<!-- Left: Controls -->
|
||||
<div class="popup-controls">
|
||||
<!-- Font Family -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field field-font" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="font-family">Police</label>
|
||||
<div class="field-with-option">
|
||||
<select v-model="fontFamily.value" :disabled="inheritanceLocked">
|
||||
<option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
|
||||
</select>
|
||||
<div class="field-checkbox">
|
||||
<input type="checkbox" v-model="fontStyle.italic" :disabled="inheritanceLocked" />
|
||||
<label class="label-with-tooltip" data-css="font-style">Italique</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Font Weight -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="font-weight">Graisse</label>
|
||||
<UnitToggle v-model="fontWeightString" :units="weights" :disabled="inheritanceLocked" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Font Size -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="font-size">Taille du texte</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
v-model="fontSize.value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: fontSize.unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="updateFontSizeUnit('px')"
|
||||
>
|
||||
px
|
||||
</button>
|
||||
<!-- <button
|
||||
type="button"
|
||||
:class="{ active: fontSize.unit === 'em' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="updateFontSizeUnit('em')"
|
||||
>
|
||||
em
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: fontSize.unit === 'rem' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="updateFontSizeUnit('rem')"
|
||||
>
|
||||
rem
|
||||
</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text Alignment -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="text-align">Alignement</label>
|
||||
<select v-model="textAlign.value" :disabled="inheritanceLocked">
|
||||
<option value="left">Gauche</option>
|
||||
<option value="center">Centre</option>
|
||||
<option value="right">Droite</option>
|
||||
<option value="justify">Justifié</option>
|
||||
<template #controls>
|
||||
<!-- Font Family -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field field-font" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="font-family">Police</label>
|
||||
<div class="field-with-option">
|
||||
<select v-model="fontFamily.value" :disabled="inheritanceLocked">
|
||||
<option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Color -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field field-simple" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="color">Couleur</label>
|
||||
<div class="input-with-color">
|
||||
<input
|
||||
ref="colorInput"
|
||||
type="text"
|
||||
v-model="color.value"
|
||||
:disabled="inheritanceLocked"
|
||||
data-coloris
|
||||
/>
|
||||
<div class="field-checkbox">
|
||||
<input type="checkbox" v-model="fontStyle.italic" :disabled="inheritanceLocked" />
|
||||
<label class="label-with-tooltip" data-css="font-style">Italique</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Background -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field field-simple" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="background">Arrière-plan</label>
|
||||
<div class="input-with-color">
|
||||
<input
|
||||
ref="backgroundInput"
|
||||
type="text"
|
||||
v-model="background.value"
|
||||
:disabled="inheritanceLocked"
|
||||
data-coloris
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Outer Margins -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="margin">Marges extérieures</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
v-model="marginOuter.value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: marginOuter.unit === 'mm' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="updateMarginOuterUnit('mm')"
|
||||
>
|
||||
mm
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: marginOuter.unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="updateMarginOuterUnit('px')"
|
||||
>
|
||||
px
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inner Margins (Padding) -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="padding">Marges intérieures</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
v-model="paddingInner.value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: paddingInner.unit === 'mm' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="updatePaddingInnerUnit('mm')"
|
||||
>
|
||||
mm
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: paddingInner.unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="updatePaddingInnerUnit('px')"
|
||||
>
|
||||
px
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lock/Unlock Inheritance Button -->
|
||||
<div class="settings-subsection">
|
||||
<button class="inheritance-btn" @click="toggleInheritance">
|
||||
<svg
|
||||
v-if="inheritanceLocked"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z"
|
||||
></path>
|
||||
</svg>
|
||||
<svg
|
||||
v-else
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M7 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C14.7405 2 17.1131 3.5748 18.2624 5.86882L16.4731 6.76344C15.6522 5.12486 13.9575 4 12 4C9.23858 4 7 6.23858 7 9V10ZM5 12V20H19V12H5ZM10 15H14V17H10V15Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>{{
|
||||
inheritanceLocked
|
||||
? "Déverrouiller l'héritage"
|
||||
: "Verrouiller l'héritage"
|
||||
}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: CSS Editor -->
|
||||
<div class="popup-css">
|
||||
<div class="css-header">
|
||||
<span>CSS</span>
|
||||
<label
|
||||
class="toggle"
|
||||
:class="{ 'field--view-only': inheritanceLocked }"
|
||||
>
|
||||
<span class="toggle-label">Mode édition</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="isEditable"
|
||||
<!-- Font Weight -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="font-weight">Graisse</label>
|
||||
<UnitToggle v-model="fontWeightString" :units="weights" :disabled="inheritanceLocked" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Font Size -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="font-size">Taille du texte</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
v-model="fontSize.value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<span class="toggle-switch"></span>
|
||||
</label>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: fontSize.unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="updateFontSizeUnit('px')"
|
||||
>
|
||||
px
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre
|
||||
v-if="!isEditable"
|
||||
class="readonly"
|
||||
><code class="hljs language-css" v-html="highlightedCss"></code></pre>
|
||||
<textarea
|
||||
v-else
|
||||
:value="elementCss"
|
||||
@input="handleCssInput"
|
||||
:disabled="inheritanceLocked"
|
||||
spellcheck="false"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text Alignment -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="text-align">Alignement</label>
|
||||
<select v-model="textAlign.value" :disabled="inheritanceLocked">
|
||||
<option value="left">Gauche</option>
|
||||
<option value="center">Centre</option>
|
||||
<option value="right">Droite</option>
|
||||
<option value="justify">Justifié</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Color -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field field-simple" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="color">Couleur</label>
|
||||
<div class="input-with-color">
|
||||
<input
|
||||
ref="colorInput"
|
||||
type="text"
|
||||
v-model="color.value"
|
||||
:disabled="inheritanceLocked"
|
||||
data-coloris
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Background -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field field-simple" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="background">Arrière-plan</label>
|
||||
<div class="input-with-color">
|
||||
<input
|
||||
ref="backgroundInput"
|
||||
type="text"
|
||||
v-model="background.value"
|
||||
:disabled="inheritanceLocked"
|
||||
data-coloris
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Outer Margins -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="margin">Marges extérieures</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
v-model="marginOuter.value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: marginOuter.unit === 'mm' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="updateMarginOuterUnit('mm')"
|
||||
>
|
||||
mm
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: marginOuter.unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="updateMarginOuterUnit('px')"
|
||||
>
|
||||
px
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inner Margins (Padding) -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="padding">Marges intérieures</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
v-model="paddingInner.value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: paddingInner.unit === 'mm' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="updatePaddingInnerUnit('mm')"
|
||||
>
|
||||
mm
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: paddingInner.unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="updatePaddingInnerUnit('px')"
|
||||
>
|
||||
px
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</BasePopup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, nextTick } from 'vue';
|
||||
import { useStylesheetStore } from '../stores/stylesheet';
|
||||
import { usePopupPosition } from '../composables/usePopupPosition';
|
||||
import { useDebounce } from '../composables/useDebounce';
|
||||
import NumberInput from './ui/NumberInput.vue';
|
||||
import UnitToggle from './ui/UnitToggle.vue';
|
||||
import BasePopup from './ui/BasePopup.vue';
|
||||
import { convertUnit } from '../utils/unit-conversion';
|
||||
import Coloris from '@melloware/coloris';
|
||||
import '@melloware/coloris/dist/coloris.css';
|
||||
import hljs from 'highlight.js/lib/core';
|
||||
import css from 'highlight.js/lib/languages/css';
|
||||
import 'highlight.js/styles/atom-one-dark.css';
|
||||
|
||||
hljs.registerLanguage('css', css);
|
||||
|
||||
const stylesheetStore = useStylesheetStore();
|
||||
|
||||
|
|
@ -281,18 +196,14 @@ const props = defineProps({
|
|||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const POPUP_WIDTH = 800;
|
||||
const POPUP_HEIGHT = 600;
|
||||
const basePopup = ref(null);
|
||||
|
||||
const { calculatePosition } = usePopupPosition(POPUP_WIDTH, POPUP_HEIGHT);
|
||||
const visible = computed(() => basePopup.value?.visible ?? false);
|
||||
const inheritanceLocked = computed(() => basePopup.value?.inheritanceLocked ?? true);
|
||||
|
||||
const visible = ref(false);
|
||||
const position = ref({ x: 0, y: 0 });
|
||||
const selector = ref('');
|
||||
const selectedElement = ref(null);
|
||||
const elementInstanceCount = ref(0); // Count of similar elements
|
||||
const isEditable = ref(false);
|
||||
const inheritanceLocked = ref(true);
|
||||
const elementInstanceCount = ref(0);
|
||||
const colorInput = ref(null);
|
||||
const backgroundInput = ref(null);
|
||||
|
||||
|
|
@ -342,15 +253,12 @@ const updatePaddingInnerUnit = (newUnit) => {
|
|||
};
|
||||
|
||||
const getSelectorFromElement = (element) => {
|
||||
// Try to build a meaningful selector
|
||||
if (element.id) {
|
||||
return `#${element.id}`;
|
||||
}
|
||||
|
||||
// Get tag name
|
||||
const tagName = element.tagName.toLowerCase();
|
||||
|
||||
// Get first class if available (filter out state classes)
|
||||
const classes = Array.from(element.classList).filter(
|
||||
(cls) => !['element-hovered', 'element-selected', 'page-hovered', 'page-selected'].includes(cls)
|
||||
);
|
||||
|
|
@ -391,7 +299,6 @@ const generatePreviewCss = () => {
|
|||
|
||||
const properties = [];
|
||||
|
||||
// Include all properties with their current values
|
||||
if (fontFamily.value.value) {
|
||||
properties.push(` font-family: ${fontFamily.value.value};`);
|
||||
}
|
||||
|
|
@ -428,12 +335,10 @@ const generatePreviewCss = () => {
|
|||
const displayedCss = computed(() => {
|
||||
if (!selector.value) return '';
|
||||
|
||||
// If unlocked, show the actual CSS block from stylesheet
|
||||
if (!inheritanceLocked.value) {
|
||||
return elementCss.value || generatePreviewCss();
|
||||
}
|
||||
|
||||
// If locked, show commented preview of what would be applied
|
||||
const preview = generatePreviewCss();
|
||||
if (!preview) return '';
|
||||
|
||||
|
|
@ -442,27 +347,6 @@ const displayedCss = computed(() => {
|
|||
' */';
|
||||
});
|
||||
|
||||
// Remove the element-specific CSS block to restore inheritance
|
||||
const removeElementBlock = () => {
|
||||
if (!selector.value) return;
|
||||
|
||||
const block = stylesheetStore.extractBlock(selector.value);
|
||||
if (block) {
|
||||
// Escape special regex characters in selector
|
||||
const escaped = selector.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
// Remove the block and any surrounding whitespace
|
||||
stylesheetStore.replaceInCustomCss(
|
||||
new RegExp(`\\n?${escaped}\\s*\\{[^}]*\\}\\n?`),
|
||||
'\n'
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const highlightedCss = computed(() => {
|
||||
if (!displayedCss.value) return '';
|
||||
return hljs.highlight(displayedCss.value, { language: 'css' }).value;
|
||||
});
|
||||
|
||||
// Update functions for each property
|
||||
const updateFontFamily = () => {
|
||||
if (!selector.value || !fontFamily.value.value) return;
|
||||
|
|
@ -524,99 +408,39 @@ const applyAllStyles = () => {
|
|||
updatePaddingInner();
|
||||
};
|
||||
|
||||
// Watch for changes
|
||||
watch(() => fontFamily.value.value, () => {
|
||||
if (isUpdatingFromStore) return;
|
||||
immediateUpdate(updateFontFamily);
|
||||
});
|
||||
|
||||
watch(() => fontStyle.value.italic, () => {
|
||||
if (isUpdatingFromStore) return;
|
||||
immediateUpdate(updateFontStyle);
|
||||
});
|
||||
|
||||
watch(() => fontWeight.value.value, () => {
|
||||
if (isUpdatingFromStore) return;
|
||||
immediateUpdate(updateFontWeight);
|
||||
});
|
||||
|
||||
watch(() => fontSize.value.value, () => {
|
||||
if (isUpdatingFromStore) return;
|
||||
debouncedUpdate(updateFontSize);
|
||||
});
|
||||
|
||||
watch(() => fontSize.value.unit, () => {
|
||||
if (isUpdatingFromStore) return;
|
||||
immediateUpdate(updateFontSize);
|
||||
});
|
||||
|
||||
watch(() => textAlign.value.value, () => {
|
||||
if (isUpdatingFromStore) return;
|
||||
immediateUpdate(updateTextAlign);
|
||||
});
|
||||
|
||||
watch(() => color.value.value, () => {
|
||||
if (isUpdatingFromStore) return;
|
||||
debouncedUpdate(updateColor);
|
||||
});
|
||||
|
||||
watch(() => background.value.value, () => {
|
||||
if (isUpdatingFromStore) return;
|
||||
debouncedUpdate(updateBackground);
|
||||
});
|
||||
|
||||
watch(() => marginOuter.value.value, () => {
|
||||
if (isUpdatingFromStore) return;
|
||||
debouncedUpdate(updateMarginOuter);
|
||||
});
|
||||
|
||||
watch(() => marginOuter.value.unit, () => {
|
||||
if (isUpdatingFromStore) return;
|
||||
immediateUpdate(updateMarginOuter);
|
||||
});
|
||||
|
||||
watch(() => paddingInner.value.value, () => {
|
||||
if (isUpdatingFromStore) return;
|
||||
debouncedUpdate(updatePaddingInner);
|
||||
});
|
||||
|
||||
watch(() => paddingInner.value.unit, () => {
|
||||
if (isUpdatingFromStore) return;
|
||||
immediateUpdate(updatePaddingInner);
|
||||
});
|
||||
|
||||
let cssDebounceTimer = null;
|
||||
|
||||
const handleCssInput = (event) => {
|
||||
const newCss = event.target.value;
|
||||
|
||||
if (cssDebounceTimer) {
|
||||
clearTimeout(cssDebounceTimer);
|
||||
}
|
||||
|
||||
cssDebounceTimer = setTimeout(() => {
|
||||
const oldBlock = elementCss.value;
|
||||
if (oldBlock) {
|
||||
stylesheetStore.replaceInCustomCss(oldBlock, newCss);
|
||||
}
|
||||
}, 500);
|
||||
// Helper to reduce watcher boilerplate
|
||||
const watchProp = (getter, updateFn, debounce = false) => {
|
||||
watch(getter, () => {
|
||||
if (isUpdatingFromStore) return;
|
||||
debounce ? debouncedUpdate(updateFn) : immediateUpdate(updateFn);
|
||||
});
|
||||
};
|
||||
|
||||
// Watch isEditable to format when exiting edit mode
|
||||
watch(isEditable, async (newValue, oldValue) => {
|
||||
stylesheetStore.isEditing = newValue;
|
||||
watchProp(() => fontFamily.value.value, updateFontFamily);
|
||||
watchProp(() => fontStyle.value.italic, updateFontStyle);
|
||||
watchProp(() => fontWeight.value.value, updateFontWeight);
|
||||
watchProp(() => fontSize.value.value, updateFontSize, true);
|
||||
watchProp(() => fontSize.value.unit, updateFontSize);
|
||||
watchProp(() => textAlign.value.value, updateTextAlign);
|
||||
watchProp(() => color.value.value, updateColor, true);
|
||||
watchProp(() => background.value.value, updateBackground, true);
|
||||
watchProp(() => marginOuter.value.value, updateMarginOuter, true);
|
||||
watchProp(() => marginOuter.value.unit, updateMarginOuter);
|
||||
watchProp(() => paddingInner.value.value, updatePaddingInner, true);
|
||||
watchProp(() => paddingInner.value.unit, updatePaddingInner);
|
||||
|
||||
// Format when exiting editing mode
|
||||
if (oldValue && !newValue) {
|
||||
await stylesheetStore.formatCustomCss();
|
||||
const handleCssInput = (newCss) => {
|
||||
const oldBlock = elementCss.value;
|
||||
if (oldBlock) {
|
||||
stylesheetStore.replaceInCustomCss(oldBlock, newCss);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Watch stylesheet changes to sync values
|
||||
watch(
|
||||
() => stylesheetStore.customCss,
|
||||
() => {
|
||||
if (visible.value && !isUpdatingFromStore) {
|
||||
if (basePopup.value?.visible && !isUpdatingFromStore) {
|
||||
isUpdatingFromStore = true;
|
||||
loadValuesFromStylesheet();
|
||||
nextTick(() => {
|
||||
|
|
@ -630,8 +454,7 @@ watch(
|
|||
watch(
|
||||
() => stylesheetStore.isEditing,
|
||||
(isEditing, wasEditing) => {
|
||||
// When exiting edit mode, reload values
|
||||
if (visible.value && wasEditing && !isEditing && !isUpdatingFromStore) {
|
||||
if (basePopup.value?.visible && wasEditing && !isEditing && !isUpdatingFromStore) {
|
||||
isUpdatingFromStore = true;
|
||||
loadValuesFromStylesheet();
|
||||
nextTick(() => {
|
||||
|
|
@ -645,63 +468,54 @@ const loadValuesFromStylesheet = () => {
|
|||
if (!selector.value) return;
|
||||
|
||||
try {
|
||||
// Extract font-family
|
||||
const fontFamilyData = stylesheetStore.extractValue(selector.value, 'font-family');
|
||||
if (fontFamilyData) {
|
||||
const value = typeof fontFamilyData === 'string' ? fontFamilyData : fontFamilyData.value;
|
||||
fontFamily.value.value = value.replace(/['"]/g, '');
|
||||
}
|
||||
|
||||
// Extract font-style
|
||||
const fontStyleData = stylesheetStore.extractValue(selector.value, 'font-style');
|
||||
if (fontStyleData) {
|
||||
const value = typeof fontStyleData === 'string' ? fontStyleData : fontStyleData.value;
|
||||
fontStyle.value.italic = value === 'italic';
|
||||
}
|
||||
|
||||
// Extract font-weight
|
||||
const fontWeightData = stylesheetStore.extractValue(selector.value, 'font-weight');
|
||||
if (fontWeightData) {
|
||||
const value = typeof fontWeightData === 'string' ? fontWeightData : fontWeightData.value;
|
||||
fontWeight.value.value = parseInt(value);
|
||||
}
|
||||
|
||||
// Extract font-size
|
||||
const fontSizeData = stylesheetStore.extractValue(selector.value, 'font-size');
|
||||
if (fontSizeData && fontSizeData.value !== undefined) {
|
||||
fontSize.value.value = fontSizeData.value;
|
||||
fontSize.value.unit = fontSizeData.unit;
|
||||
}
|
||||
|
||||
// Extract text-align
|
||||
const textAlignData = stylesheetStore.extractValue(selector.value, 'text-align');
|
||||
if (textAlignData) {
|
||||
const value = typeof textAlignData === 'string' ? textAlignData : textAlignData.value;
|
||||
textAlign.value.value = value;
|
||||
}
|
||||
|
||||
// Extract color
|
||||
const colorData = stylesheetStore.extractValue(selector.value, 'color');
|
||||
if (colorData) {
|
||||
const value = typeof colorData === 'string' ? colorData : colorData.value;
|
||||
color.value.value = value;
|
||||
}
|
||||
|
||||
// Extract background
|
||||
const backgroundData = stylesheetStore.extractValue(selector.value, 'background');
|
||||
if (backgroundData) {
|
||||
const value = typeof backgroundData === 'string' ? backgroundData : backgroundData.value;
|
||||
background.value.value = value;
|
||||
}
|
||||
|
||||
// Extract margin
|
||||
const marginData = stylesheetStore.extractValue(selector.value, 'margin');
|
||||
if (marginData && marginData.value !== undefined) {
|
||||
marginOuter.value.value = marginData.value;
|
||||
marginOuter.value.unit = marginData.unit;
|
||||
}
|
||||
|
||||
// Extract padding
|
||||
const paddingData = stylesheetStore.extractValue(selector.value, 'padding');
|
||||
if (paddingData && paddingData.value !== undefined) {
|
||||
paddingInner.value.value = paddingData.value;
|
||||
|
|
@ -713,12 +527,10 @@ const loadValuesFromStylesheet = () => {
|
|||
};
|
||||
|
||||
const open = (element, event, count = null) => {
|
||||
// Block all watchers during initialization
|
||||
isUpdatingFromStore = true;
|
||||
|
||||
selectedElement.value = element;
|
||||
selector.value = getSelectorFromElement(element);
|
||||
position.value = calculatePosition(event);
|
||||
|
||||
// Store instance count if provided, otherwise calculate it
|
||||
elementInstanceCount.value = count !== null ? count : getInstanceCount(selector.value);
|
||||
|
|
@ -727,61 +539,24 @@ const open = (element, event, count = null) => {
|
|||
const blockState = stylesheetStore.getBlockState(selector.value);
|
||||
|
||||
if (blockState === 'active') {
|
||||
// Block exists and is active (not commented) → unlocked
|
||||
inheritanceLocked.value = false;
|
||||
} else if (blockState === 'commented') {
|
||||
// Block exists but is commented → locked with custom values
|
||||
inheritanceLocked.value = true;
|
||||
basePopup.value.inheritanceLocked = false;
|
||||
} else {
|
||||
// No block → locked with inherited values
|
||||
inheritanceLocked.value = true;
|
||||
basePopup.value.inheritanceLocked = true;
|
||||
}
|
||||
|
||||
// Load values from stylesheet (includes commented blocks)
|
||||
loadValuesFromStylesheet();
|
||||
|
||||
visible.value = true;
|
||||
// Open popup (sets visible, position, inits Coloris)
|
||||
basePopup.value.open(event);
|
||||
|
||||
// Re-enable watchers after initialization (use nextTick to ensure watchers see the flag)
|
||||
nextTick(() => {
|
||||
isUpdatingFromStore = false;
|
||||
});
|
||||
|
||||
// Initialize Coloris after opening
|
||||
setTimeout(() => {
|
||||
Coloris.init();
|
||||
Coloris({
|
||||
el: '[data-coloris]',
|
||||
theme: 'pill',
|
||||
themeMode: 'dark',
|
||||
formatToggle: true,
|
||||
alpha: true,
|
||||
closeButton: true,
|
||||
closeLabel: 'Fermer',
|
||||
clearButton: true,
|
||||
clearLabel: 'Effacer',
|
||||
swatchesOnly: false,
|
||||
inline: false,
|
||||
wrap: true,
|
||||
swatches: [
|
||||
'#264653',
|
||||
'#2a9d8f',
|
||||
'#e9c46a',
|
||||
'#f4a261',
|
||||
'#e76f51',
|
||||
'#d62828',
|
||||
'#023e8a',
|
||||
'#0077b6',
|
||||
'#ffffff',
|
||||
'#000000',
|
||||
],
|
||||
});
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
visible.value = false;
|
||||
isEditable.value = false;
|
||||
basePopup.value?.close();
|
||||
selector.value = '';
|
||||
selectedElement.value = null;
|
||||
emit('close');
|
||||
|
|
@ -795,8 +570,7 @@ const handleIframeClick = (event, targetElement = null, elementCount = null) =>
|
|||
return;
|
||||
}
|
||||
|
||||
// If popup is already open, just close it instead of opening a new one
|
||||
if (visible.value) {
|
||||
if (basePopup.value?.visible) {
|
||||
close();
|
||||
return;
|
||||
}
|
||||
|
|
@ -807,51 +581,35 @@ const handleIframeClick = (event, targetElement = null, elementCount = null) =>
|
|||
const toggleInheritance = () => {
|
||||
const blockState = stylesheetStore.getBlockState(selector.value);
|
||||
|
||||
if (inheritanceLocked.value && blockState === 'commented') {
|
||||
// Case 1: Locked with commented block → Uncomment to unlock
|
||||
if (basePopup.value.inheritanceLocked && blockState === 'commented') {
|
||||
stylesheetStore.uncommentCssBlock(selector.value);
|
||||
inheritanceLocked.value = false;
|
||||
} else if (inheritanceLocked.value && blockState === 'none') {
|
||||
// Case 2: Locked with no custom CSS → Capture computed values and create block
|
||||
basePopup.value.inheritanceLocked = false;
|
||||
} else if (basePopup.value.inheritanceLocked && blockState === 'none') {
|
||||
if (selectedElement.value && props.iframeRef && props.iframeRef.contentWindow) {
|
||||
const computed = props.iframeRef.contentWindow.getComputedStyle(selectedElement.value);
|
||||
|
||||
// Update fields with computed values before creating the block
|
||||
isUpdatingFromStore = true;
|
||||
|
||||
// Font family
|
||||
fontFamily.value.value = computed.fontFamily.replace(/['"]/g, '').split(',')[0].trim();
|
||||
|
||||
// Font style
|
||||
fontStyle.value.italic = computed.fontStyle === 'italic';
|
||||
|
||||
// Font weight
|
||||
fontWeight.value.value = parseInt(computed.fontWeight);
|
||||
|
||||
// Font size
|
||||
const fontSizeMatch = computed.fontSize.match(/([\d.]+)(px|rem|em|pt)/);
|
||||
if (fontSizeMatch) {
|
||||
fontSize.value.value = parseFloat(fontSizeMatch[1]);
|
||||
fontSize.value.unit = fontSizeMatch[2];
|
||||
}
|
||||
|
||||
// Text align
|
||||
textAlign.value.value = computed.textAlign;
|
||||
|
||||
// Color
|
||||
color.value.value = computed.color;
|
||||
|
||||
// Background
|
||||
background.value.value = computed.backgroundColor;
|
||||
|
||||
// Margin (take the top margin)
|
||||
const marginMatch = computed.marginTop.match(/([\d.]+)(px|mm|pt)/);
|
||||
if (marginMatch) {
|
||||
marginOuter.value.value = parseFloat(marginMatch[1]);
|
||||
marginOuter.value.unit = marginMatch[2];
|
||||
}
|
||||
|
||||
// Padding (take the top padding)
|
||||
const paddingMatch = computed.paddingTop.match(/([\d.]+)(px|mm|pt)/);
|
||||
if (paddingMatch) {
|
||||
paddingInner.value.value = parseFloat(paddingMatch[1]);
|
||||
|
|
@ -861,13 +619,11 @@ const toggleInheritance = () => {
|
|||
isUpdatingFromStore = false;
|
||||
}
|
||||
|
||||
// Now create the block with captured values
|
||||
applyAllStyles();
|
||||
inheritanceLocked.value = false;
|
||||
} else if (!inheritanceLocked.value && blockState === 'active') {
|
||||
// Case 3: Unlocked with active block → Comment to lock
|
||||
basePopup.value.inheritanceLocked = false;
|
||||
} else if (!basePopup.value.inheritanceLocked && blockState === 'active') {
|
||||
stylesheetStore.commentCssBlock(selector.value);
|
||||
inheritanceLocked.value = true;
|
||||
basePopup.value.inheritanceLocked = true;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,301 +1,202 @@
|
|||
<template>
|
||||
<div
|
||||
v-if="visible"
|
||||
<BasePopup
|
||||
ref="basePopup"
|
||||
id="page-popup"
|
||||
class="settings-popup"
|
||||
:style="{ top: position.y + 'px', left: position.x + 'px' }"
|
||||
:display-css="displayedCss"
|
||||
:editable-css="pageCss"
|
||||
:popup-width="550"
|
||||
:popup-height="600"
|
||||
@close="close"
|
||||
@css-input="handleCssInput"
|
||||
@toggle-inheritance="toggleInheritance"
|
||||
>
|
||||
<div class="popup-header">
|
||||
<div class="header-left">
|
||||
<span class="page-label">@page</span>
|
||||
<span class="page-name">{{ templateName || 'default' }}</span>
|
||||
<span class="page-count">{{ pageCount }} page{{ pageCount > 1 ? 's' : '' }}</span>
|
||||
</div>
|
||||
<button class="close-btn" @click="close">×</button>
|
||||
</div>
|
||||
<template #header-left>
|
||||
<span class="page-label">@page</span>
|
||||
<span class="page-name">{{ templateName || 'default' }}</span>
|
||||
<span class="page-count">{{ pageCount }} page{{ pageCount > 1 ? 's' : '' }}</span>
|
||||
</template>
|
||||
|
||||
<div class="popup-body">
|
||||
<!-- Left: Controls -->
|
||||
<div class="popup-controls">
|
||||
<!-- Margins -->
|
||||
<div class="settings-subsection">
|
||||
<h4>Marges</h4>
|
||||
<div class="margin-grid">
|
||||
<div
|
||||
class="field"
|
||||
:class="{ 'field--view-only': inheritanceLocked }"
|
||||
>
|
||||
<label class="label-with-tooltip" data-css="margin-top">Haut</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
v-model="margins.top.value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.top.unit === 'mm' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.top.unit = 'mm'"
|
||||
>
|
||||
mm
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.top.unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.top.unit = 'px'"
|
||||
>
|
||||
px
|
||||
</button>
|
||||
<!-- <button
|
||||
type="button"
|
||||
:class="{ active: margins.top.unit === 'rem' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.top.unit = 'rem'"
|
||||
>
|
||||
rem
|
||||
</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="field"
|
||||
:class="{ 'field--view-only': inheritanceLocked }"
|
||||
>
|
||||
<label class="label-with-tooltip" data-css="margin-bottom">Bas</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
v-model="margins.bottom.value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.bottom.unit === 'mm' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.bottom.unit = 'mm'"
|
||||
>
|
||||
mm
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.bottom.unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.bottom.unit = 'px'"
|
||||
>
|
||||
px
|
||||
</button>
|
||||
<!-- <button
|
||||
type="button"
|
||||
:class="{ active: margins.bottom.unit === 'rem' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.bottom.unit = 'rem'"
|
||||
>
|
||||
rem
|
||||
</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="field"
|
||||
:class="{ 'field--view-only': inheritanceLocked }"
|
||||
>
|
||||
<label class="label-with-tooltip" data-css="margin-left">Gauche</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
v-model="margins.left.value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.left.unit === 'mm' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.left.unit = 'mm'"
|
||||
>
|
||||
mm
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.left.unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.left.unit = 'px'"
|
||||
>
|
||||
px
|
||||
</button>
|
||||
<!-- <button
|
||||
type="button"
|
||||
:class="{ active: margins.left.unit === 'rem' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.left.unit = 'rem'"
|
||||
>
|
||||
rem
|
||||
</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="field"
|
||||
:class="{ 'field--view-only': inheritanceLocked }"
|
||||
>
|
||||
<label class="label-with-tooltip" data-css="margin-right">Droite</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
v-model="margins.right.value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.right.unit === 'mm' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.right.unit = 'mm'"
|
||||
>
|
||||
mm
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.right.unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.right.unit = 'px'"
|
||||
>
|
||||
px
|
||||
</button>
|
||||
<!-- <button
|
||||
type="button"
|
||||
:class="{ active: margins.right.unit === 'rem' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.right.unit = 'rem'"
|
||||
>
|
||||
rem
|
||||
</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Background -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="background">Arrière-plan</label>
|
||||
<div class="input-with-color">
|
||||
<input
|
||||
ref="backgroundColorInput"
|
||||
type="text"
|
||||
v-model="background.value"
|
||||
:disabled="inheritanceLocked"
|
||||
data-coloris
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Patterns -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="background-image">Motifs</label>
|
||||
<select v-model="pattern" :disabled="inheritanceLocked">
|
||||
<option value="">Choisissez</option>
|
||||
<option value="dots">Points</option>
|
||||
<option value="lines">Lignes</option>
|
||||
<option value="grid">Grille</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lock/Unlock Inheritance Button -->
|
||||
<div class="settings-subsection">
|
||||
<button class="inheritance-btn" @click="toggleInheritance">
|
||||
<svg
|
||||
v-if="inheritanceLocked"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z"
|
||||
></path>
|
||||
</svg>
|
||||
<svg
|
||||
v-else
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M7 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C14.7405 2 17.1131 3.5748 18.2624 5.86882L16.4731 6.76344C15.6522 5.12486 13.9575 4 12 4C9.23858 4 7 6.23858 7 9V10ZM5 12V20H19V12H5ZM10 15H14V17H10V15Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>{{
|
||||
inheritanceLocked
|
||||
? "Déverrouiller l'héritage"
|
||||
: "Verrouiller l'héritage"
|
||||
}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: CSS Editor -->
|
||||
<div class="popup-css">
|
||||
<div class="css-header">
|
||||
<span>CSS</span>
|
||||
<label
|
||||
class="toggle"
|
||||
<template #controls>
|
||||
<!-- Margins -->
|
||||
<div class="settings-subsection">
|
||||
<h4>Marges</h4>
|
||||
<div class="margin-grid">
|
||||
<div
|
||||
class="field"
|
||||
:class="{ 'field--view-only': inheritanceLocked }"
|
||||
>
|
||||
<span class="toggle-label">Mode édition</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="isEditable"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<span class="toggle-switch"></span>
|
||||
</label>
|
||||
<label class="label-with-tooltip" data-css="margin-top">Haut</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
v-model="margins.top.value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.top.unit === 'mm' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.top.unit = 'mm'"
|
||||
>
|
||||
mm
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.top.unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.top.unit = 'px'"
|
||||
>
|
||||
px
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="field"
|
||||
:class="{ 'field--view-only': inheritanceLocked }"
|
||||
>
|
||||
<label class="label-with-tooltip" data-css="margin-bottom">Bas</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
v-model="margins.bottom.value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.bottom.unit === 'mm' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.bottom.unit = 'mm'"
|
||||
>
|
||||
mm
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.bottom.unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.bottom.unit = 'px'"
|
||||
>
|
||||
px
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="field"
|
||||
:class="{ 'field--view-only': inheritanceLocked }"
|
||||
>
|
||||
<label class="label-with-tooltip" data-css="margin-left">Gauche</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
v-model="margins.left.value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.left.unit === 'mm' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.left.unit = 'mm'"
|
||||
>
|
||||
mm
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.left.unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.left.unit = 'px'"
|
||||
>
|
||||
px
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="field"
|
||||
:class="{ 'field--view-only': inheritanceLocked }"
|
||||
>
|
||||
<label class="label-with-tooltip" data-css="margin-right">Droite</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
v-model="margins.right.value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.right.unit === 'mm' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.right.unit = 'mm'"
|
||||
>
|
||||
mm
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.right.unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.right.unit = 'px'"
|
||||
>
|
||||
px
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre
|
||||
v-if="!isEditable"
|
||||
class="readonly"
|
||||
><code class="hljs language-css" v-html="highlightedCss"></code></pre>
|
||||
<textarea
|
||||
v-else
|
||||
:value="pageCss"
|
||||
@input="handleCssInput"
|
||||
:disabled="inheritanceLocked"
|
||||
spellcheck="false"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Background -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="background">Arrière-plan</label>
|
||||
<div class="input-with-color">
|
||||
<input
|
||||
ref="backgroundColorInput"
|
||||
type="text"
|
||||
v-model="background.value"
|
||||
:disabled="inheritanceLocked"
|
||||
data-coloris
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Patterns -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="background-image">Motifs</label>
|
||||
<select v-model="pattern" :disabled="inheritanceLocked">
|
||||
<option value="">Choisissez</option>
|
||||
<option value="dots">Points</option>
|
||||
<option value="lines">Lignes</option>
|
||||
<option value="grid">Grille</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</BasePopup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { useStylesheetStore } from '../stores/stylesheet';
|
||||
import { usePopupPosition } from '../composables/usePopupPosition';
|
||||
import { useDebounce } from '../composables/useDebounce';
|
||||
import { useCssSync } from '../composables/useCssSync';
|
||||
import NumberInput from './ui/NumberInput.vue';
|
||||
import Coloris from '@melloware/coloris';
|
||||
import '@melloware/coloris/dist/coloris.css';
|
||||
import hljs from 'highlight.js/lib/core';
|
||||
import css from 'highlight.js/lib/languages/css';
|
||||
import 'highlight.js/styles/atom-one-dark.css';
|
||||
|
||||
hljs.registerLanguage('css', css);
|
||||
import BasePopup from './ui/BasePopup.vue';
|
||||
|
||||
const stylesheetStore = useStylesheetStore();
|
||||
const { extractSpacing } = useCssSync();
|
||||
|
||||
const props = defineProps({
|
||||
iframeRef: Object,
|
||||
|
|
@ -303,13 +204,14 @@ const props = defineProps({
|
|||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const visible = ref(false);
|
||||
const position = ref({ x: 0, y: 0 });
|
||||
const basePopup = ref(null);
|
||||
|
||||
const visible = computed(() => basePopup.value?.visible ?? false);
|
||||
const inheritanceLocked = computed(() => basePopup.value?.inheritanceLocked ?? true);
|
||||
|
||||
const selectedPageElement = ref(null);
|
||||
const pageCount = ref(0);
|
||||
const templateName = ref('');
|
||||
const isEditable = ref(false);
|
||||
const inheritanceLocked = ref(true);
|
||||
const backgroundColorInput = ref(null);
|
||||
|
||||
let isUpdatingFromStore = false;
|
||||
|
|
@ -333,11 +235,6 @@ const immediateUpdate = (callback) => {
|
|||
callback();
|
||||
};
|
||||
|
||||
const POPUP_WIDTH = 550;
|
||||
const POPUP_HEIGHT = 600;
|
||||
|
||||
const { calculatePosition } = usePopupPosition(POPUP_WIDTH, POPUP_HEIGHT);
|
||||
|
||||
// Get the selector for the current template's @page rule
|
||||
const getTemplateSelector = () => {
|
||||
return templateName.value ? `@page ${templateName.value}` : '@page';
|
||||
|
|
@ -349,10 +246,8 @@ const getOrCreateTemplateBlock = () => {
|
|||
let block = stylesheetStore.extractBlock(selector);
|
||||
|
||||
if (!block && templateName.value) {
|
||||
// Create new block with current values from @page
|
||||
const baseBlock = stylesheetStore.extractBlock('@page');
|
||||
if (baseBlock) {
|
||||
// Insert the new template block after @page
|
||||
const marginValue = `${margins.value.top.value}${margins.value.top.unit} ${margins.value.right.value}${margins.value.right.unit} ${margins.value.bottom.value}${margins.value.bottom.unit} ${margins.value.left.value}${margins.value.left.unit}`;
|
||||
const newBlock = `\n@page ${templateName.value} {\n margin: ${marginValue};${background.value.value ? `\n background: ${background.value.value};` : ''}\n}\n`;
|
||||
|
||||
|
|
@ -375,7 +270,6 @@ const removeTemplateBlock = () => {
|
|||
const block = stylesheetStore.extractBlock(selector);
|
||||
|
||||
if (block) {
|
||||
// Remove the block and any surrounding whitespace
|
||||
stylesheetStore.replaceInCustomCss(
|
||||
new RegExp(`\\n?${selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\s*\\{[^}]*\\}\\n?`),
|
||||
'\n'
|
||||
|
|
@ -384,7 +278,6 @@ const removeTemplateBlock = () => {
|
|||
};
|
||||
|
||||
const updateMargins = (force = false) => {
|
||||
// Only update if inheritance is unlocked (unless forced)
|
||||
if (!force && inheritanceLocked.value) return;
|
||||
|
||||
const marginValue = `${margins.value.top.value}${margins.value.top.unit} ${margins.value.right.value}${margins.value.right.unit} ${margins.value.bottom.value}${margins.value.bottom.unit} ${margins.value.left.value}${margins.value.left.unit}`;
|
||||
|
|
@ -392,8 +285,6 @@ const updateMargins = (force = false) => {
|
|||
const currentBlock = getOrCreateTemplateBlock();
|
||||
if (!currentBlock) return;
|
||||
|
||||
const selector = getTemplateSelector();
|
||||
|
||||
if (currentBlock.includes('margin:')) {
|
||||
const updatedBlock = currentBlock.replace(
|
||||
/(margin:\s*)[^;]+/,
|
||||
|
|
@ -416,7 +307,6 @@ const updateMargins = (force = false) => {
|
|||
};
|
||||
|
||||
const updateBackground = (force = false) => {
|
||||
// Only update if inheritance is unlocked (unless forced)
|
||||
if (!force && inheritanceLocked.value) return;
|
||||
if (!background.value.value) return;
|
||||
|
||||
|
|
@ -491,37 +381,27 @@ const loadValuesFromStylesheet = () => {
|
|||
try {
|
||||
isUpdatingFromStore = true;
|
||||
|
||||
// Extract values from @page block (same logic as PageSettings)
|
||||
const pageBlock = stylesheetStore.extractBlock('@page');
|
||||
if (!pageBlock) return;
|
||||
|
||||
// Parse margins with regex (top right bottom left)
|
||||
const marginMatch = pageBlock.match(
|
||||
/margin:\s*([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)/i
|
||||
);
|
||||
if (marginMatch) {
|
||||
margins.value.top = {
|
||||
value: parseFloat(marginMatch[1]),
|
||||
unit: marginMatch[2],
|
||||
};
|
||||
margins.value.right = {
|
||||
value: parseFloat(marginMatch[3]),
|
||||
unit: marginMatch[4],
|
||||
};
|
||||
margins.value.bottom = {
|
||||
value: parseFloat(marginMatch[5]),
|
||||
unit: marginMatch[6],
|
||||
};
|
||||
margins.value.left = {
|
||||
value: parseFloat(marginMatch[7]),
|
||||
unit: marginMatch[8],
|
||||
};
|
||||
// Use extractSpacing from useCssSync
|
||||
const spacing = extractSpacing('@page', 'margin');
|
||||
if (spacing?.detailed) {
|
||||
margins.value.top = spacing.detailed.top;
|
||||
margins.value.right = spacing.detailed.right;
|
||||
margins.value.bottom = spacing.detailed.bottom;
|
||||
margins.value.left = spacing.detailed.left;
|
||||
} else if (spacing?.simple) {
|
||||
margins.value.top = { ...spacing.simple };
|
||||
margins.value.right = { ...spacing.simple };
|
||||
margins.value.bottom = { ...spacing.simple };
|
||||
margins.value.left = { ...spacing.simple };
|
||||
}
|
||||
|
||||
// Extract background
|
||||
const bgMatch = pageBlock.match(/background:\s*([^;]+)/);
|
||||
if (bgMatch) {
|
||||
background.value.value = bgMatch[1].trim();
|
||||
const pageBlock = stylesheetStore.extractBlock('@page');
|
||||
if (pageBlock) {
|
||||
const bgMatch = pageBlock.match(/background:\s*([^;]+)/);
|
||||
if (bgMatch) {
|
||||
background.value.value = bgMatch[1].trim();
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading values from stylesheet:', error);
|
||||
|
|
@ -533,100 +413,61 @@ const loadValuesFromStylesheet = () => {
|
|||
const open = (pageElement, event, count = 1) => {
|
||||
selectedPageElement.value = pageElement;
|
||||
pageCount.value = count;
|
||||
position.value = calculatePosition(event);
|
||||
|
||||
// Extract template name from data-page-type attribute
|
||||
templateName.value = pageElement.getAttribute('data-page-type') || '';
|
||||
|
||||
// Read inheritance state from page element's data attribute
|
||||
inheritanceLocked.value = pageElement.dataset.inheritanceUnlocked !== 'true';
|
||||
basePopup.value.inheritanceLocked = pageElement.dataset.inheritanceUnlocked !== 'true';
|
||||
|
||||
// Load values from stylesheet (@page block)
|
||||
loadValuesFromStylesheet();
|
||||
|
||||
visible.value = true;
|
||||
|
||||
// Initialize Coloris after opening
|
||||
setTimeout(() => {
|
||||
Coloris.init();
|
||||
Coloris({
|
||||
el: '[data-coloris]',
|
||||
theme: 'pill',
|
||||
themeMode: 'dark',
|
||||
formatToggle: true,
|
||||
alpha: true,
|
||||
closeButton: true,
|
||||
closeLabel: 'Fermer',
|
||||
clearButton: true,
|
||||
clearLabel: 'Effacer',
|
||||
swatchesOnly: false,
|
||||
inline: false,
|
||||
wrap: true,
|
||||
swatches: [
|
||||
'#264653',
|
||||
'#2a9d8f',
|
||||
'#e9c46a',
|
||||
'#f4a261',
|
||||
'#e76f51',
|
||||
'#d62828',
|
||||
'#023e8a',
|
||||
'#0077b6',
|
||||
'#ffffff',
|
||||
'#000000',
|
||||
],
|
||||
});
|
||||
}, 0);
|
||||
// Open popup (sets visible, position, inits Coloris)
|
||||
basePopup.value.open(event);
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
selectedPageElement.value = null;
|
||||
visible.value = false;
|
||||
isEditable.value = false;
|
||||
basePopup.value?.close();
|
||||
emit('close');
|
||||
};
|
||||
|
||||
const toggleInheritance = () => {
|
||||
const wasLocked = inheritanceLocked.value;
|
||||
inheritanceLocked.value = !inheritanceLocked.value;
|
||||
const wasLocked = basePopup.value.inheritanceLocked;
|
||||
basePopup.value.inheritanceLocked = !wasLocked;
|
||||
|
||||
// Store the inheritance state in the page element's data attribute
|
||||
if (selectedPageElement.value) {
|
||||
if (inheritanceLocked.value) {
|
||||
if (basePopup.value.inheritanceLocked) {
|
||||
delete selectedPageElement.value.dataset.inheritanceUnlocked;
|
||||
} else {
|
||||
selectedPageElement.value.dataset.inheritanceUnlocked = 'true';
|
||||
}
|
||||
}
|
||||
|
||||
if (inheritanceLocked.value && !wasLocked) {
|
||||
// Re-locking: remove the template-specific block
|
||||
if (basePopup.value.inheritanceLocked && !wasLocked) {
|
||||
removeTemplateBlock();
|
||||
} else if (!inheritanceLocked.value && wasLocked) {
|
||||
// Unlocking: apply all current field values to create the CSS block
|
||||
} else if (!basePopup.value.inheritanceLocked && wasLocked) {
|
||||
applyAllStyles();
|
||||
}
|
||||
};
|
||||
|
||||
const pageCss = computed(() => {
|
||||
// Show template-specific block if unlocked and exists, otherwise show @page
|
||||
if (!inheritanceLocked.value && templateName.value) {
|
||||
if (!basePopup.value?.inheritanceLocked && templateName.value) {
|
||||
const templateBlock = stylesheetStore.extractBlock(`@page ${templateName.value}`);
|
||||
if (templateBlock) return templateBlock;
|
||||
}
|
||||
return stylesheetStore.extractBlock('@page') || '';
|
||||
});
|
||||
|
||||
// Generate a preview CSS block from current field values
|
||||
const generatePreviewCss = () => {
|
||||
if (!templateName.value) return '';
|
||||
|
||||
const properties = [];
|
||||
|
||||
// Always include margin with current values
|
||||
const marginValue = `${margins.value.top.value}${margins.value.top.unit} ${margins.value.right.value}${margins.value.right.unit} ${margins.value.bottom.value}${margins.value.bottom.unit} ${margins.value.left.value}${margins.value.left.unit}`;
|
||||
properties.push(` margin: ${marginValue};`);
|
||||
|
||||
// Include background if it has a value
|
||||
if (background.value.value) {
|
||||
properties.push(` background: ${background.value.value};`);
|
||||
}
|
||||
|
|
@ -637,14 +478,11 @@ const generatePreviewCss = () => {
|
|||
};
|
||||
|
||||
const displayedCss = computed(() => {
|
||||
// If unlocked, show the actual CSS block from stylesheet
|
||||
if (!inheritanceLocked.value) {
|
||||
if (!basePopup.value?.inheritanceLocked) {
|
||||
return pageCss.value;
|
||||
}
|
||||
|
||||
// If locked, show commented preview of what would be applied
|
||||
if (!templateName.value) {
|
||||
// For base @page, just show it normally
|
||||
return pageCss.value;
|
||||
}
|
||||
|
||||
|
|
@ -656,47 +494,18 @@ const displayedCss = computed(() => {
|
|||
' */';
|
||||
});
|
||||
|
||||
const highlightedCss = computed(() => {
|
||||
if (!displayedCss.value) return '';
|
||||
return hljs.highlight(displayedCss.value, { language: 'css' }).value;
|
||||
});
|
||||
|
||||
let cssDebounceTimer = null;
|
||||
|
||||
const handleCssInput = (event) => {
|
||||
const newCss = event.target.value;
|
||||
|
||||
if (cssDebounceTimer) {
|
||||
clearTimeout(cssDebounceTimer);
|
||||
const handleCssInput = (newCss) => {
|
||||
const oldBlock = pageCss.value;
|
||||
if (oldBlock) {
|
||||
stylesheetStore.replaceInCustomCss(oldBlock, newCss);
|
||||
}
|
||||
|
||||
cssDebounceTimer = setTimeout(() => {
|
||||
// Get the actual CSS block (not the commented preview)
|
||||
const oldBlock = pageCss.value;
|
||||
if (oldBlock) {
|
||||
stylesheetStore.replaceInCustomCss(
|
||||
oldBlock,
|
||||
newCss
|
||||
);
|
||||
}
|
||||
}, 500);
|
||||
};
|
||||
|
||||
// Watch isEditable to format when exiting edit mode
|
||||
watch(isEditable, async (newValue, oldValue) => {
|
||||
stylesheetStore.isEditing = newValue;
|
||||
|
||||
// Format when exiting editing mode
|
||||
if (oldValue && !newValue) {
|
||||
await stylesheetStore.formatCustomCss();
|
||||
}
|
||||
});
|
||||
|
||||
// Watch stylesheet changes to sync values
|
||||
watch(
|
||||
() => stylesheetStore.content,
|
||||
() => {
|
||||
if (visible.value && !stylesheetStore.isEditing) {
|
||||
if (basePopup.value?.visible && !stylesheetStore.isEditing) {
|
||||
loadValuesFromStylesheet();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -319,13 +319,14 @@
|
|||
import { ref, computed, watch, onMounted, inject } from 'vue';
|
||||
import { useStylesheetStore } from '../../stores/stylesheet';
|
||||
import { useDebounce } from '../../composables/useDebounce';
|
||||
import Coloris from '@melloware/coloris';
|
||||
import { useCssSync } from '../../composables/useCssSync';
|
||||
import { initColoris } from '../../composables/useColoris';
|
||||
import NumberInput from '../ui/NumberInput.vue';
|
||||
import { convertUnit } from '../../utils/unit-conversion';
|
||||
import '@melloware/coloris/dist/coloris.css';
|
||||
|
||||
const stylesheetStore = useStylesheetStore();
|
||||
const { debouncedUpdate } = useDebounce(500);
|
||||
const { extractSpacing } = useCssSync();
|
||||
const backgroundColorInput = ref(null);
|
||||
const activeTab = inject('activeTab', ref('document'));
|
||||
|
||||
|
|
@ -621,26 +622,17 @@ const syncFromStore = () => {
|
|||
}
|
||||
}
|
||||
|
||||
const marginMatch = pageBlock.match(
|
||||
/margin:\s*([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)/i
|
||||
);
|
||||
if (marginMatch) {
|
||||
margins.value.top = {
|
||||
value: parseFloat(marginMatch[1]),
|
||||
unit: marginMatch[2],
|
||||
};
|
||||
margins.value.right = {
|
||||
value: parseFloat(marginMatch[3]),
|
||||
unit: marginMatch[4],
|
||||
};
|
||||
margins.value.bottom = {
|
||||
value: parseFloat(marginMatch[5]),
|
||||
unit: marginMatch[6],
|
||||
};
|
||||
margins.value.left = {
|
||||
value: parseFloat(marginMatch[7]),
|
||||
unit: marginMatch[8],
|
||||
};
|
||||
const spacing = extractSpacing('@page', 'margin');
|
||||
if (spacing?.detailed) {
|
||||
margins.value.top = spacing.detailed.top;
|
||||
margins.value.right = spacing.detailed.right;
|
||||
margins.value.bottom = spacing.detailed.bottom;
|
||||
margins.value.left = spacing.detailed.left;
|
||||
} else if (spacing?.simple) {
|
||||
margins.value.top = { ...spacing.simple };
|
||||
margins.value.right = { ...spacing.simple };
|
||||
margins.value.bottom = { ...spacing.simple };
|
||||
margins.value.left = { ...spacing.simple };
|
||||
}
|
||||
|
||||
const bgMatch = pageBlock.match(/background:\s*([^;]+)/);
|
||||
|
|
@ -705,34 +697,7 @@ watch(activeTab, (newTab, oldTab) => {
|
|||
onMounted(() => {
|
||||
syncFromStore();
|
||||
|
||||
// Initialize Coloris
|
||||
Coloris.init();
|
||||
Coloris({
|
||||
el: '[data-coloris]',
|
||||
theme: 'pill',
|
||||
themeMode: 'dark',
|
||||
formatToggle: true,
|
||||
alpha: true,
|
||||
closeButton: true,
|
||||
closeLabel: 'Fermer',
|
||||
clearButton: true,
|
||||
clearLabel: 'Effacer',
|
||||
swatchesOnly: false,
|
||||
inline: false,
|
||||
wrap: true,
|
||||
swatches: [
|
||||
'#264653',
|
||||
'#2a9d8f',
|
||||
'#e9c46a',
|
||||
'#f4a261',
|
||||
'#e76f51',
|
||||
'#d62828',
|
||||
'#023e8a',
|
||||
'#0077b6',
|
||||
'#ffffff',
|
||||
'#000000',
|
||||
],
|
||||
});
|
||||
initColoris();
|
||||
|
||||
// Initialize button color if value exists
|
||||
if (background.value.value) {
|
||||
|
|
|
|||
|
|
@ -372,14 +372,14 @@
|
|||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted } from 'vue';
|
||||
import Coloris from '@melloware/coloris';
|
||||
import { initColoris } from '../../composables/useColoris';
|
||||
import UnitToggle from '../ui/UnitToggle.vue';
|
||||
import InputWithUnit from '../ui/InputWithUnit.vue';
|
||||
import NumberInput from '../ui/NumberInput.vue';
|
||||
import { useCssUpdater } from '../../composables/useCssUpdater';
|
||||
import { useCssSync } from '../../composables/useCssSync';
|
||||
import { useDebounce } from '../../composables/useDebounce';
|
||||
import { convertUnit } from '../../utils/unit-conversion';
|
||||
import { useLinkedSpacing } from '../../composables/useLinkedSpacing';
|
||||
|
||||
const { updateStyle, setMargin, setDetailedMargins, setPadding, setDetailedPadding } = useCssUpdater();
|
||||
const { extractValue, extractNumericValue, extractSpacing } = useCssSync();
|
||||
|
|
@ -406,59 +406,39 @@ const background = ref('transparent');
|
|||
const colorInput = ref(null);
|
||||
const backgroundInput = ref(null);
|
||||
|
||||
const marginOuterDetailed = ref({
|
||||
top: { value: 0, unit: 'mm' },
|
||||
right: { value: 0, unit: 'mm' },
|
||||
bottom: { value: 24, unit: 'mm' },
|
||||
left: { value: 0, unit: 'mm' }
|
||||
});
|
||||
|
||||
const marginInnerDetailed = ref({
|
||||
top: { value: 0, unit: 'mm' },
|
||||
right: { value: 0, unit: 'mm' },
|
||||
bottom: { value: 0, unit: 'mm' },
|
||||
left: { value: 0, unit: 'mm' }
|
||||
});
|
||||
|
||||
const marginOuterLinked = ref(false);
|
||||
const marginInnerLinked = ref(false);
|
||||
|
||||
// Track previous values to detect which one changed
|
||||
const prevMarginOuter = ref({
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 24,
|
||||
left: 0
|
||||
});
|
||||
|
||||
const prevMarginInner = ref({
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
});
|
||||
|
||||
let isUpdatingFromStore = false;
|
||||
|
||||
// Update margin outer unit for all sides with conversion
|
||||
const updateMarginOuterUnit = (newUnit) => {
|
||||
const sides = ['top', 'right', 'bottom', 'left'];
|
||||
sides.forEach((side) => {
|
||||
const s = marginOuterDetailed.value[side];
|
||||
s.value = convertUnit(s.value, s.unit, newUnit);
|
||||
s.unit = newUnit;
|
||||
});
|
||||
};
|
||||
const {
|
||||
sides: marginOuterDetailed,
|
||||
linked: marginOuterLinked,
|
||||
updateUnit: updateMarginOuterUnit,
|
||||
setFromSpacing: setMarginOuterFromSpacing,
|
||||
} = useLinkedSpacing({
|
||||
initialValues: {
|
||||
top: { value: 0, unit: 'mm' },
|
||||
right: { value: 0, unit: 'mm' },
|
||||
bottom: { value: 24, unit: 'mm' },
|
||||
left: { value: 0, unit: 'mm' },
|
||||
},
|
||||
isUpdatingFromStore: () => isUpdatingFromStore,
|
||||
debouncedUpdate,
|
||||
onUpdate: (s) => {
|
||||
setDetailedMargins('p', s.top, s.right, s.bottom, s.left);
|
||||
},
|
||||
});
|
||||
|
||||
// Update margin inner unit for all sides with conversion
|
||||
const updateMarginInnerUnit = (newUnit) => {
|
||||
const sides = ['top', 'right', 'bottom', 'left'];
|
||||
sides.forEach((side) => {
|
||||
const s = marginInnerDetailed.value[side];
|
||||
s.value = convertUnit(s.value, s.unit, newUnit);
|
||||
s.unit = newUnit;
|
||||
});
|
||||
};
|
||||
const {
|
||||
sides: marginInnerDetailed,
|
||||
linked: marginInnerLinked,
|
||||
updateUnit: updateMarginInnerUnit,
|
||||
setFromSpacing: setMarginInnerFromSpacing,
|
||||
} = useLinkedSpacing({
|
||||
isUpdatingFromStore: () => isUpdatingFromStore,
|
||||
debouncedUpdate,
|
||||
onUpdate: (s) => {
|
||||
setDetailedPadding('p', s.top, s.right, s.bottom, s.left);
|
||||
},
|
||||
});
|
||||
|
||||
// Watchers for body styles
|
||||
watch(font, (val) => {
|
||||
|
|
@ -499,160 +479,6 @@ watch(fontSize, (val) => {
|
|||
});
|
||||
}, { deep: true });
|
||||
|
||||
// Watch when link is toggled
|
||||
watch(marginOuterLinked, (isLinked) => {
|
||||
if (isLinked) {
|
||||
// When linking, sync all to the first non-zero value or top value
|
||||
const current = marginOuterDetailed.value;
|
||||
const syncValue = current.top.value || current.bottom.value || current.left.value || current.right.value;
|
||||
|
||||
isUpdatingFromStore = true;
|
||||
marginOuterDetailed.value.top.value = syncValue;
|
||||
marginOuterDetailed.value.bottom.value = syncValue;
|
||||
marginOuterDetailed.value.left.value = syncValue;
|
||||
marginOuterDetailed.value.right.value = syncValue;
|
||||
|
||||
prevMarginOuter.value.top = syncValue;
|
||||
prevMarginOuter.value.bottom = syncValue;
|
||||
prevMarginOuter.value.left = syncValue;
|
||||
prevMarginOuter.value.right = syncValue;
|
||||
isUpdatingFromStore = false;
|
||||
}
|
||||
});
|
||||
|
||||
watch(marginInnerLinked, (isLinked) => {
|
||||
if (isLinked) {
|
||||
// When linking, sync all to the first non-zero value or top value
|
||||
const current = marginInnerDetailed.value;
|
||||
const syncValue = current.top.value || current.bottom.value || current.left.value || current.right.value;
|
||||
|
||||
isUpdatingFromStore = true;
|
||||
marginInnerDetailed.value.top.value = syncValue;
|
||||
marginInnerDetailed.value.bottom.value = syncValue;
|
||||
marginInnerDetailed.value.left.value = syncValue;
|
||||
marginInnerDetailed.value.right.value = syncValue;
|
||||
|
||||
prevMarginInner.value.top = syncValue;
|
||||
prevMarginInner.value.bottom = syncValue;
|
||||
prevMarginInner.value.left = syncValue;
|
||||
prevMarginInner.value.right = syncValue;
|
||||
isUpdatingFromStore = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Watch margin outer values
|
||||
watch(() => [
|
||||
marginOuterDetailed.value.top.value,
|
||||
marginOuterDetailed.value.bottom.value,
|
||||
marginOuterDetailed.value.left.value,
|
||||
marginOuterDetailed.value.right.value,
|
||||
], () => {
|
||||
if (isUpdatingFromStore) return;
|
||||
|
||||
// If linked, sync all values to the one that changed
|
||||
if (marginOuterLinked.value) {
|
||||
const current = {
|
||||
top: marginOuterDetailed.value.top.value,
|
||||
bottom: marginOuterDetailed.value.bottom.value,
|
||||
left: marginOuterDetailed.value.left.value,
|
||||
right: marginOuterDetailed.value.right.value,
|
||||
};
|
||||
|
||||
// Find which value actually changed by comparing with previous
|
||||
let changedValue = null;
|
||||
if (current.top !== prevMarginOuter.value.top) changedValue = current.top;
|
||||
else if (current.bottom !== prevMarginOuter.value.bottom) changedValue = current.bottom;
|
||||
else if (current.left !== prevMarginOuter.value.left) changedValue = current.left;
|
||||
else if (current.right !== prevMarginOuter.value.right) changedValue = current.right;
|
||||
|
||||
if (changedValue !== null) {
|
||||
isUpdatingFromStore = true;
|
||||
marginOuterDetailed.value.top.value = changedValue;
|
||||
marginOuterDetailed.value.bottom.value = changedValue;
|
||||
marginOuterDetailed.value.left.value = changedValue;
|
||||
marginOuterDetailed.value.right.value = changedValue;
|
||||
|
||||
// Update previous values
|
||||
prevMarginOuter.value.top = changedValue;
|
||||
prevMarginOuter.value.bottom = changedValue;
|
||||
prevMarginOuter.value.left = changedValue;
|
||||
prevMarginOuter.value.right = changedValue;
|
||||
isUpdatingFromStore = false;
|
||||
}
|
||||
} else {
|
||||
// Update previous values even when not linked
|
||||
prevMarginOuter.value.top = marginOuterDetailed.value.top.value;
|
||||
prevMarginOuter.value.bottom = marginOuterDetailed.value.bottom.value;
|
||||
prevMarginOuter.value.left = marginOuterDetailed.value.left.value;
|
||||
prevMarginOuter.value.right = marginOuterDetailed.value.right.value;
|
||||
}
|
||||
|
||||
debouncedUpdate(() => {
|
||||
setDetailedMargins('p',
|
||||
marginOuterDetailed.value.top,
|
||||
marginOuterDetailed.value.right,
|
||||
marginOuterDetailed.value.bottom,
|
||||
marginOuterDetailed.value.left
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
// Watch margin inner values
|
||||
watch(() => [
|
||||
marginInnerDetailed.value.top.value,
|
||||
marginInnerDetailed.value.bottom.value,
|
||||
marginInnerDetailed.value.left.value,
|
||||
marginInnerDetailed.value.right.value,
|
||||
], () => {
|
||||
if (isUpdatingFromStore) return;
|
||||
|
||||
// If linked, sync all values to the one that changed
|
||||
if (marginInnerLinked.value) {
|
||||
const current = {
|
||||
top: marginInnerDetailed.value.top.value,
|
||||
bottom: marginInnerDetailed.value.bottom.value,
|
||||
left: marginInnerDetailed.value.left.value,
|
||||
right: marginInnerDetailed.value.right.value,
|
||||
};
|
||||
|
||||
// Find which value actually changed by comparing with previous
|
||||
let changedValue = null;
|
||||
if (current.top !== prevMarginInner.value.top) changedValue = current.top;
|
||||
else if (current.bottom !== prevMarginInner.value.bottom) changedValue = current.bottom;
|
||||
else if (current.left !== prevMarginInner.value.left) changedValue = current.left;
|
||||
else if (current.right !== prevMarginInner.value.right) changedValue = current.right;
|
||||
|
||||
if (changedValue !== null) {
|
||||
isUpdatingFromStore = true;
|
||||
marginInnerDetailed.value.top.value = changedValue;
|
||||
marginInnerDetailed.value.bottom.value = changedValue;
|
||||
marginInnerDetailed.value.left.value = changedValue;
|
||||
marginInnerDetailed.value.right.value = changedValue;
|
||||
|
||||
// Update previous values
|
||||
prevMarginInner.value.top = changedValue;
|
||||
prevMarginInner.value.bottom = changedValue;
|
||||
prevMarginInner.value.left = changedValue;
|
||||
prevMarginInner.value.right = changedValue;
|
||||
isUpdatingFromStore = false;
|
||||
}
|
||||
} else {
|
||||
// Update previous values even when not linked
|
||||
prevMarginInner.value.top = marginInnerDetailed.value.top.value;
|
||||
prevMarginInner.value.bottom = marginInnerDetailed.value.bottom.value;
|
||||
prevMarginInner.value.left = marginInnerDetailed.value.left.value;
|
||||
prevMarginInner.value.right = marginInnerDetailed.value.right.value;
|
||||
}
|
||||
|
||||
debouncedUpdate(() => {
|
||||
setDetailedPadding('p',
|
||||
marginInnerDetailed.value.top,
|
||||
marginInnerDetailed.value.right,
|
||||
marginInnerDetailed.value.bottom,
|
||||
marginInnerDetailed.value.left
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
// Sync from store
|
||||
const syncFromStore = () => {
|
||||
|
|
@ -680,70 +506,11 @@ const syncFromStore = () => {
|
|||
|
||||
// Margins
|
||||
const margins = extractSpacing('p', 'margin');
|
||||
if (margins) {
|
||||
if (margins.simple) {
|
||||
// All margins are the same
|
||||
marginOuterDetailed.value = {
|
||||
top: { ...margins.simple },
|
||||
right: { ...margins.simple },
|
||||
bottom: { ...margins.simple },
|
||||
left: { ...margins.simple }
|
||||
};
|
||||
marginOuterLinked.value = true;
|
||||
} else if (margins.detailed) {
|
||||
marginOuterDetailed.value = margins.detailed;
|
||||
// Check if all values are the same
|
||||
const allSame =
|
||||
margins.detailed.top.value === margins.detailed.right.value &&
|
||||
margins.detailed.top.value === margins.detailed.bottom.value &&
|
||||
margins.detailed.top.value === margins.detailed.left.value &&
|
||||
margins.detailed.top.unit === margins.detailed.right.unit &&
|
||||
margins.detailed.top.unit === margins.detailed.bottom.unit &&
|
||||
margins.detailed.top.unit === margins.detailed.left.unit;
|
||||
marginOuterLinked.value = allSame;
|
||||
}
|
||||
}
|
||||
if (margins) setMarginOuterFromSpacing(margins);
|
||||
|
||||
// Padding
|
||||
const padding = extractSpacing('p', 'padding');
|
||||
if (padding) {
|
||||
if (padding.simple) {
|
||||
// All paddings are the same
|
||||
marginInnerDetailed.value = {
|
||||
top: { ...padding.simple },
|
||||
right: { ...padding.simple },
|
||||
bottom: { ...padding.simple },
|
||||
left: { ...padding.simple }
|
||||
};
|
||||
marginInnerLinked.value = true;
|
||||
} else if (padding.detailed) {
|
||||
marginInnerDetailed.value = padding.detailed;
|
||||
// Check if all values are the same
|
||||
const allSame =
|
||||
padding.detailed.top.value === padding.detailed.right.value &&
|
||||
padding.detailed.top.value === padding.detailed.bottom.value &&
|
||||
padding.detailed.top.value === padding.detailed.left.value &&
|
||||
padding.detailed.top.unit === padding.detailed.right.unit &&
|
||||
padding.detailed.top.unit === padding.detailed.bottom.unit &&
|
||||
padding.detailed.top.unit === padding.detailed.left.unit;
|
||||
marginInnerLinked.value = allSame;
|
||||
}
|
||||
}
|
||||
|
||||
// Update previous values to match current state
|
||||
prevMarginOuter.value = {
|
||||
top: marginOuterDetailed.value.top.value,
|
||||
right: marginOuterDetailed.value.right.value,
|
||||
bottom: marginOuterDetailed.value.bottom.value,
|
||||
left: marginOuterDetailed.value.left.value
|
||||
};
|
||||
|
||||
prevMarginInner.value = {
|
||||
top: marginInnerDetailed.value.top.value,
|
||||
right: marginInnerDetailed.value.right.value,
|
||||
bottom: marginInnerDetailed.value.bottom.value,
|
||||
left: marginInnerDetailed.value.left.value
|
||||
};
|
||||
if (padding) setMarginInnerFromSpacing(padding);
|
||||
|
||||
isUpdatingFromStore = false;
|
||||
};
|
||||
|
|
@ -757,13 +524,9 @@ const updateColorisButtons = () => {
|
|||
};
|
||||
|
||||
onMounted(() => {
|
||||
Coloris.init();
|
||||
Coloris({
|
||||
themeMode: 'dark',
|
||||
alpha: true,
|
||||
initColoris({
|
||||
format: 'auto',
|
||||
formatToggle: true,
|
||||
swatches: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', 'transparent']
|
||||
swatches: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', 'transparent'],
|
||||
});
|
||||
syncFromStore();
|
||||
setTimeout(updateColorisButtons, 100);
|
||||
|
|
|
|||
156
src/components/ui/BasePopup.vue
Normal file
156
src/components/ui/BasePopup.vue
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<div
|
||||
v-if="visible"
|
||||
class="settings-popup"
|
||||
:style="{ top: position.y + 'px', left: position.x + 'px' }"
|
||||
>
|
||||
<div class="popup-header">
|
||||
<div class="header-left">
|
||||
<slot name="header-left" />
|
||||
</div>
|
||||
<button class="close-btn" @click="$emit('close')">×</button>
|
||||
</div>
|
||||
|
||||
<div class="popup-body">
|
||||
<!-- Left: Controls -->
|
||||
<div class="popup-controls">
|
||||
<slot name="controls" />
|
||||
|
||||
<!-- Lock/Unlock Inheritance Button -->
|
||||
<div class="settings-subsection">
|
||||
<button class="inheritance-btn" @click="$emit('toggle-inheritance')">
|
||||
<svg
|
||||
v-if="inheritanceLocked"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z"
|
||||
></path>
|
||||
</svg>
|
||||
<svg
|
||||
v-else
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M7 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C14.7405 2 17.1131 3.5748 18.2624 5.86882L16.4731 6.76344C15.6522 5.12486 13.9575 4 12 4C9.23858 4 7 6.23858 7 9V10ZM5 12V20H19V12H5ZM10 15H14V17H10V15Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>{{
|
||||
inheritanceLocked
|
||||
? "Déverrouiller l'héritage"
|
||||
: "Verrouiller l'héritage"
|
||||
}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: CSS Editor -->
|
||||
<div class="popup-css">
|
||||
<div class="css-header">
|
||||
<span>CSS</span>
|
||||
<label
|
||||
class="toggle"
|
||||
:class="{ 'field--view-only': inheritanceLocked }"
|
||||
>
|
||||
<span class="toggle-label">Mode édition</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="isEditable"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<span class="toggle-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
<pre
|
||||
v-if="!isEditable"
|
||||
class="readonly"
|
||||
><code class="hljs language-css" v-html="highlightedCss"></code></pre>
|
||||
<textarea
|
||||
v-else
|
||||
:value="editableCss"
|
||||
@input="handleCssInput"
|
||||
:disabled="inheritanceLocked"
|
||||
spellcheck="false"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { useStylesheetStore } from '../../stores/stylesheet';
|
||||
import { usePopupPosition } from '../../composables/usePopupPosition';
|
||||
import { initColoris } from '../../composables/useColoris';
|
||||
import hljs from 'highlight.js/lib/core';
|
||||
import css from 'highlight.js/lib/languages/css';
|
||||
import 'highlight.js/styles/atom-one-dark.css';
|
||||
|
||||
hljs.registerLanguage('css', css);
|
||||
|
||||
const stylesheetStore = useStylesheetStore();
|
||||
|
||||
const props = defineProps({
|
||||
displayCss: { type: String, default: '' },
|
||||
editableCss: { type: String, default: '' },
|
||||
popupWidth: { type: Number, default: 800 },
|
||||
popupHeight: { type: Number, default: 600 },
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close', 'css-input', 'toggle-inheritance']);
|
||||
|
||||
const visible = ref(false);
|
||||
const position = ref({ x: 0, y: 0 });
|
||||
const isEditable = ref(false);
|
||||
const inheritanceLocked = ref(true);
|
||||
|
||||
const { calculatePosition } = usePopupPosition(props.popupWidth, props.popupHeight);
|
||||
|
||||
const highlightedCss = computed(() => {
|
||||
if (!props.displayCss) return '';
|
||||
return hljs.highlight(props.displayCss, { language: 'css' }).value;
|
||||
});
|
||||
|
||||
let cssDebounceTimer = null;
|
||||
|
||||
const handleCssInput = (event) => {
|
||||
const newCss = event.target.value;
|
||||
|
||||
if (cssDebounceTimer) {
|
||||
clearTimeout(cssDebounceTimer);
|
||||
}
|
||||
|
||||
cssDebounceTimer = setTimeout(() => {
|
||||
emit('css-input', newCss);
|
||||
}, 500);
|
||||
};
|
||||
|
||||
// Watch isEditable to format when exiting edit mode
|
||||
watch(isEditable, async (newValue, oldValue) => {
|
||||
stylesheetStore.isEditing = newValue;
|
||||
|
||||
if (oldValue && !newValue) {
|
||||
await stylesheetStore.formatCustomCss();
|
||||
}
|
||||
});
|
||||
|
||||
const open = (event) => {
|
||||
position.value = calculatePosition(event);
|
||||
visible.value = true;
|
||||
|
||||
// Initialize Coloris after opening
|
||||
setTimeout(() => initColoris(), 0);
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
visible.value = false;
|
||||
isEditable.value = false;
|
||||
emit('close');
|
||||
};
|
||||
|
||||
defineExpose({ visible, position, isEditable, inheritanceLocked, open, close, calculatePosition });
|
||||
</script>
|
||||
34
src/composables/useColoris.js
Normal file
34
src/composables/useColoris.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import Coloris from '@melloware/coloris';
|
||||
import '@melloware/coloris/dist/coloris.css';
|
||||
|
||||
const defaultConfig = {
|
||||
el: '[data-coloris]',
|
||||
theme: 'pill',
|
||||
themeMode: 'dark',
|
||||
formatToggle: true,
|
||||
alpha: true,
|
||||
closeButton: true,
|
||||
closeLabel: 'Fermer',
|
||||
clearButton: true,
|
||||
clearLabel: 'Effacer',
|
||||
swatchesOnly: false,
|
||||
inline: false,
|
||||
wrap: true,
|
||||
swatches: [
|
||||
'#264653',
|
||||
'#2a9d8f',
|
||||
'#e9c46a',
|
||||
'#f4a261',
|
||||
'#e76f51',
|
||||
'#d62828',
|
||||
'#023e8a',
|
||||
'#0077b6',
|
||||
'#ffffff',
|
||||
'#000000',
|
||||
],
|
||||
};
|
||||
|
||||
export function initColoris(overrides = {}) {
|
||||
Coloris.init();
|
||||
Coloris({ ...defaultConfig, ...overrides });
|
||||
}
|
||||
146
src/composables/useLinkedSpacing.js
Normal file
146
src/composables/useLinkedSpacing.js
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
import { ref, watch } from 'vue';
|
||||
import { convertUnit } from '../utils/unit-conversion';
|
||||
|
||||
/**
|
||||
* Composable for managing linked/unlinked spacing (margin/padding) with 4 sides.
|
||||
* @param {Object} options
|
||||
* @param {string} options.defaultUnit - Default unit for all sides (default: 'mm')
|
||||
* @param {Object} options.initialValues - Initial values for sides { top, right, bottom, left } each { value, unit }
|
||||
* @param {Function} options.onUpdate - Callback called with the detailed sides when values change
|
||||
* @param {Function} options.isUpdatingFromStore - Function that returns whether we're syncing from store
|
||||
* @param {Function} options.debouncedUpdate - Debounced update function
|
||||
*/
|
||||
export function useLinkedSpacing({ defaultUnit = 'mm', initialValues, onUpdate, isUpdatingFromStore, debouncedUpdate }) {
|
||||
const sides = ref(initialValues || {
|
||||
top: { value: 0, unit: defaultUnit },
|
||||
right: { value: 0, unit: defaultUnit },
|
||||
bottom: { value: 0, unit: defaultUnit },
|
||||
left: { value: 0, unit: defaultUnit },
|
||||
});
|
||||
|
||||
const linked = ref(false);
|
||||
|
||||
const prevValues = ref({
|
||||
top: sides.value.top.value,
|
||||
right: sides.value.right.value,
|
||||
bottom: sides.value.bottom.value,
|
||||
left: sides.value.left.value,
|
||||
});
|
||||
|
||||
const updateUnit = (newUnit) => {
|
||||
const sideNames = ['top', 'right', 'bottom', 'left'];
|
||||
sideNames.forEach((side) => {
|
||||
const s = sides.value[side];
|
||||
s.value = convertUnit(s.value, s.unit, newUnit);
|
||||
s.unit = newUnit;
|
||||
});
|
||||
};
|
||||
|
||||
// When link is toggled on, sync all sides to first non-zero value
|
||||
watch(linked, (isLinked) => {
|
||||
if (!isLinked) return;
|
||||
|
||||
const current = sides.value;
|
||||
const syncValue = current.top.value || current.bottom.value || current.left.value || current.right.value;
|
||||
|
||||
sides.value.top.value = syncValue;
|
||||
sides.value.bottom.value = syncValue;
|
||||
sides.value.left.value = syncValue;
|
||||
sides.value.right.value = syncValue;
|
||||
|
||||
prevValues.value.top = syncValue;
|
||||
prevValues.value.bottom = syncValue;
|
||||
prevValues.value.left = syncValue;
|
||||
prevValues.value.right = syncValue;
|
||||
});
|
||||
|
||||
// Watch side values for linked sync + update callback
|
||||
watch(() => [
|
||||
sides.value.top.value,
|
||||
sides.value.bottom.value,
|
||||
sides.value.left.value,
|
||||
sides.value.right.value,
|
||||
], () => {
|
||||
if (isUpdatingFromStore()) return;
|
||||
|
||||
if (linked.value) {
|
||||
const current = {
|
||||
top: sides.value.top.value,
|
||||
bottom: sides.value.bottom.value,
|
||||
left: sides.value.left.value,
|
||||
right: sides.value.right.value,
|
||||
};
|
||||
|
||||
let changedValue = null;
|
||||
if (current.top !== prevValues.value.top) changedValue = current.top;
|
||||
else if (current.bottom !== prevValues.value.bottom) changedValue = current.bottom;
|
||||
else if (current.left !== prevValues.value.left) changedValue = current.left;
|
||||
else if (current.right !== prevValues.value.right) changedValue = current.right;
|
||||
|
||||
if (changedValue !== null) {
|
||||
sides.value.top.value = changedValue;
|
||||
sides.value.bottom.value = changedValue;
|
||||
sides.value.left.value = changedValue;
|
||||
sides.value.right.value = changedValue;
|
||||
|
||||
prevValues.value.top = changedValue;
|
||||
prevValues.value.bottom = changedValue;
|
||||
prevValues.value.left = changedValue;
|
||||
prevValues.value.right = changedValue;
|
||||
}
|
||||
} else {
|
||||
prevValues.value.top = sides.value.top.value;
|
||||
prevValues.value.bottom = sides.value.bottom.value;
|
||||
prevValues.value.left = sides.value.left.value;
|
||||
prevValues.value.right = sides.value.right.value;
|
||||
}
|
||||
|
||||
if (onUpdate) {
|
||||
debouncedUpdate(() => {
|
||||
onUpdate(sides.value);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Set all sides from extracted spacing data (from syncFromStore).
|
||||
* Also updates prevValues and optionally sets linked state.
|
||||
*/
|
||||
const setFromSpacing = (spacing) => {
|
||||
if (spacing.simple) {
|
||||
sides.value = {
|
||||
top: { ...spacing.simple },
|
||||
right: { ...spacing.simple },
|
||||
bottom: { ...spacing.simple },
|
||||
left: { ...spacing.simple },
|
||||
};
|
||||
linked.value = true;
|
||||
} else if (spacing.detailed) {
|
||||
sides.value = spacing.detailed;
|
||||
const d = spacing.detailed;
|
||||
const allSame =
|
||||
d.top.value === d.right.value &&
|
||||
d.top.value === d.bottom.value &&
|
||||
d.top.value === d.left.value &&
|
||||
d.top.unit === d.right.unit &&
|
||||
d.top.unit === d.bottom.unit &&
|
||||
d.top.unit === d.left.unit;
|
||||
linked.value = allSame;
|
||||
}
|
||||
|
||||
prevValues.value = {
|
||||
top: sides.value.top.value,
|
||||
right: sides.value.right.value,
|
||||
bottom: sides.value.bottom.value,
|
||||
left: sides.value.left.value,
|
||||
};
|
||||
};
|
||||
|
||||
return {
|
||||
sides,
|
||||
linked,
|
||||
updateUnit,
|
||||
prevValues,
|
||||
setFromSpacing,
|
||||
};
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue