add border settings

public/assets/css/src/_forms.scss

@@ -67,11 +67,18 @@ input[type="number"] {
   grid-template-columns: var(--label-w) 1fr;
   grid-template-rows: var(--input-h) var(--input-h);
 
-  select {
+
-    width: 100%;
+
+  .field-font__options{
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+
+      select {
+        width: 100%;
+        grid-column: span 2;
+      }
   }
   .field-checkbox {
-    grid-column: 2;
     padding-top: var(--space-xs);
     label {
       font-weight: 400;

public/assets/css/style.css

@@ -331,11 +331,15 @@ input[type=number] {
   grid-template-columns: var(--label-w) 1fr;
   grid-template-rows: var(--input-h) var(--input-h);
 }
-.field-font select {
+.field-font .field-font__options {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+}
+.field-font .field-font__options select {
   width: 100%;
+  grid-column: span 2;
 }
 .field-font .field-checkbox {
-  grid-column: 2;
   padding-top: var(--space-xs);
 }
 .field-font .field-checkbox label {

src/components/ElementPopup.vue

@@ -20,7 +20,7 @@
       <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">
+          <div class="field-font__options">
             <select v-model="fontFamily" :disabled="inheritanceLocked">
               <option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
             </select>
@@ -28,18 +28,14 @@
               <input type="checkbox" v-model="italic" :disabled="inheritanceLocked" />
               <label class="label-with-tooltip" data-css="font-style">Italique</label>
             </div>
+            <div class="field-checkbox">
+              <input type="checkbox" v-model="bold" :disabled="inheritanceLocked" />
+              <label class="label-with-tooltip" data-css="font-weight">Gras</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 }">
@@ -105,10 +101,56 @@
         </div>
       </div>
 
+      <!-- Bordure -->
+      <div class="settings-subsection">
+        <div class="field field-border" :class="{ 'field--view-only': inheritanceLocked }">
+          <div class="settings-subsection-header">
+          <label class="label-with-tooltip" data-css="border">Bordure</label>
+          </div>
+          <div class="field-border__options">
+            <div class="field-border__option">
+              <label class="label-with-tooltip" data-css="border-width">Épaisseur</label>
+              <div class="input-with-unit">
+                <NumberInput
+                  v-model="borderWidth.value"
+                  :min="0"
+                  :step="1"
+                  :disabled="inheritanceLocked"
+                />
+                <div class="unit-toggle">
+                  <button type="button" class="active" :disabled="inheritanceLocked">px</button>
+                </div>
+              </div>
+            </div>
+            <div class="field-border__option">
+              <label class="label-with-tooltip" data-css="border-style">Style</label>
+              <select v-model="borderStyle" :disabled="inheritanceLocked">
+                <option value="solid">Plein</option>
+                <option value="dotted">Pointillés</option>
+                <option value="dashed">Tirets</option>
+                <option value="double">Double</option>
+              </select>
+            </div>
+            <div class="field-border__option">
+              <label class="label-with-tooltip" data-css="border-color">Couleur</label>
+              <div class="input-with-color">
+                <input
+                  ref="borderColorInput"
+                  type="text"
+                  v-model="borderColor"
+                  :disabled="inheritanceLocked"
+                  data-coloris
+                />
+              </div>
+            </div>
+          </div>
+        </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>
+          <label class="label-with-tooltip" data-css="color">Couleur du texte</label>
           <div class="input-with-color">
             <input
               ref="colorInput"
@@ -255,7 +297,6 @@ import { ref, reactive, computed, watch, nextTick } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
 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';
 
@@ -277,6 +318,7 @@ const selectedElement = ref(null);
 const elementInstanceCount = ref(0);
 const colorInput = ref(null);
 const backgroundInput = ref(null);
+const borderColorInput = ref(null);
 
 let isUpdatingFromStore = false;
 const { debouncedUpdate } = useDebounce(500);
@@ -284,12 +326,15 @@ const { debouncedUpdate } = useDebounce(500);
 // Style properties — flat refs for simple values, reactive for value+unit
 const fontFamily = ref('Alegreya Sans');
 const italic = ref(false);
-const fontWeight = ref(400);
+const bold = ref(false);
 const textAlign = ref('left');
 const color = ref('rgb(0, 0, 0)');
 const background = ref('transparent');
 const fontSize = reactive({ value: 23, unit: 'px' });
 const lineHeight = reactive({ value: 28, unit: 'px' });
+const borderWidth = reactive({ value: 0, unit: 'px' });
+const borderStyle = ref('solid');
+const borderColor = ref('#000000');
 
 const marginLocked = ref(true);
 const margin = reactive({
@@ -309,26 +354,23 @@ const padding = reactive({
 
 // Constants
 const fonts = ['Alegreya Sans', 'Alegreya', 'Arial', 'Georgia', 'Times New Roman'];
-const weights = ['200', '300', '400', '600', '800'];
-
-const fontWeightString = computed({
-  get: () => String(fontWeight.value),
-  set: (val) => { fontWeight.value = parseInt(val); }
-});
 
 // Style property descriptors
 const styleProps = [
   { css: 'font-family', get: () => fontFamily.value, set: v => fontFamily.value = v.replace(/['"]/g, ''), debounce: false },
   { css: 'font-style', get: () => italic.value ? 'italic' : 'normal', set: v => italic.value = v === 'italic', debounce: false },
-  { css: 'font-weight', get: () => fontWeight.value, set: v => fontWeight.value = parseInt(v), debounce: false },
+  { css: 'font-weight', get: () => bold.value ? 'bold' : 'normal', set: v => bold.value = v === 'bold' || parseInt(v) >= 700, debounce: false },
   { css: 'text-align', get: () => textAlign.value, set: v => textAlign.value = v, debounce: false },
   { css: 'color', get: () => color.value, set: v => color.value = v, debounce: true },
   { css: 'background', get: () => background.value, set: v => background.value = v, debounce: true },
+  { css: 'border-style', get: () => borderStyle.value, set: v => borderStyle.value = v || 'solid', debounce: false },
+  { css: 'border-color', get: () => borderColor.value, set: v => borderColor.value = v, debounce: true },
 ];
 
 const unitProps = [
   { css: 'font-size', ref: fontSize, debounce: true },
   { css: 'line-height', ref: lineHeight, debounce: true },
+  { css: 'border-width', ref: borderWidth, debounce: true },
 ];
 
 const sides = [
@@ -428,9 +470,11 @@ const generatePreviewCss = () => {
 
   for (const prop of styleProps) {
     const val = prop.get();
-    if (val && (prop.css !== 'font-style' || val === 'italic')) {
+    if (!val) continue;
-      properties.push(`  ${prop.css}: ${val};`);
+    if (prop.css === 'font-style' && val !== 'italic') continue;
-    }
+    if (prop.css === 'font-weight' && val === 'normal') continue;
+    if ((prop.css === 'border-style' || prop.css === 'border-color') && borderWidth.value === 0) continue;
+    properties.push(`  ${prop.css}: ${val};`);
   }
 
   for (const prop of unitProps) {
@@ -702,7 +746,7 @@ const toggleInheritance = () => {
 
       fontFamily.value = cs.fontFamily.replace(/['"]/g, '').split(',')[0].trim();
       italic.value = cs.fontStyle === 'italic';
-      fontWeight.value = parseInt(cs.fontWeight);
+      bold.value = parseInt(cs.fontWeight) >= 700;
 
       const fontSizeMatch = cs.fontSize.match(/([\d.]+)(px|rem|em|pt)/);
       if (fontSizeMatch) {
@@ -720,6 +764,14 @@ const toggleInheritance = () => {
       color.value = cs.color;
       background.value = cs.backgroundColor;
 
+      const borderWidthMatch = cs.borderTopWidth.match(/([\d.]+)(px)/);
+      if (borderWidthMatch) {
+        borderWidth.value = parseFloat(borderWidthMatch[1]);
+        borderWidth.unit = 'px';
+      }
+      borderStyle.value = cs.borderTopStyle || 'solid';
+      borderColor.value = cs.borderTopColor || '#000000';
+
       for (const side of ['top', 'right', 'bottom', 'left']) {
         const cssSide = side.charAt(0).toUpperCase() + side.slice(1);
         const marginMatch = cs[`margin${cssSide}`].match(/([\d.]+)(px|mm|pt)/);

src/components/editor/TextSettings.vue

@@ -12,7 +12,7 @@
     <div class="settings-subsection">
       <div class="field field-font">
         <label for="text-font" class="label-with-tooltip field--view-only" data-css="font-family" title="Fonctionnalité à venir">Police</label>
-        <div class="field-with-option">
+        <div class="field-font__options">
           <select id="text-font" v-model="font" disabled class="field--view-only" title="Fonctionnalité à venir">
             <option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
           </select>