- Impostato i Font giusti e la corretta disposizione del testo e dei suoi margini.

- L'immagine del libro, se è piccolo, viene adattato alla dimensione fissa (vedere se va bene).

src/components/CBarCode/CBarCode.scss

@@ -1,5 +1,5 @@
 .barcode-container {
-    padding: 10px;
+    padding: 5px;
     display: flex;
     justify-content: center;
     align-items: center;

src/components/CBarCode/CBarCode.ts

@@ -25,6 +25,11 @@ export default defineComponent({
       default: '',
     },
     width: {
+      type: Number,
+      required: false,
+      default: 50,
+    },
+    widthlines: {
       type: Number,
       required: false,
       default: 2,
@@ -45,18 +50,18 @@ export default defineComponent({
     const { t } = useI18n();
 
     // Converti le props in riferimenti reattivi
-    const { value, format, width, height, fontsize } = toRefs(props);
+    const { value, format, width, widthlines, height, fontsize } = toRefs(props);
 
     // Funzione per disegnare il codice a barre
     const drawBarcode = () => {
       JsBarcode("#C" + value.value, value.value, {
         format: format.value,
-        width: width.value,
+        width: widthlines.value,
         height: height.value,
         displayValue: true,
         lineColor: "#000",
         font: "monospace",
-        margin: 1,
+        margin: 0,
         textMargin: 0,
         marginTop: 0,
         fontSize: fontsize.value,

src/components/CBarCode/CBarCode.vue

@@ -1,7 +1,9 @@
 <template>
-  <div class="row barcode-container justify-center">
-    <div class="text-center " :style="`font-size: ${fontsize}px`">{{text}}</div>
-    <svg :id="`C${value}`"></svg>
+  <div class="row barcode-container justify-center text-center">
+    <div class="text-center" :style="`font-size: ${fontsize}px`">
+      {{ text }}
+    </div>
+      <img :style="`width:${width}px !important;`" :id="`C${value}`"/>
   </div>
 </template>