- Cataloghi: pagine, schede, formato

src/components/CBarCode/CBarCode.scss

@@ -0,0 +1,10 @@
+.barcode-container {
+    padding: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.text-barcode {
+    font-size: 0.75rem;
+}

src/components/CBarCode/CBarCode.ts

@@ -0,0 +1,83 @@
+import { defineComponent, onMounted, ref, toRef, watch, toRefs } from 'vue'
+import { tools } from '@src/store/Modules/tools'
+
+import { useQuasar } from 'quasar'
+import { useI18n } from '@/boot/i18n'
+import { toolsext } from '@store/Modules/toolsext'
+
+import JsBarcode from 'jsbarcode'
+
+export default defineComponent({
+  name: 'CBarCode',
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+    format: {
+      type: String,
+      required: false,
+      default: 'CODE128',
+    },
+    text: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    width: {
+      type: Number,
+      required: false,
+      default: 2,
+    },
+    height: {
+      type: Number,
+      required: false,
+      default: 100,
+    },
+    fontsize: {
+      type: Number,
+      required: false,
+      default: 16,
+    },
+  },
+  setup(props, { emit }) {
+    const $q = useQuasar()
+    const { t } = useI18n();
+
+    // Converti le props in riferimenti reattivi
+    const { value, format, width, 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,
+        height: height.value,
+        displayValue: true,
+        lineColor: "#000",
+        font: "monospace",
+        margin: 1,
+        textMargin: 0,
+        marginTop: 0,
+        fontSize: fontsize.value,
+        textPosition:"bottom",
+      });
+    }
+
+    // Chiamato quando il componente è montato
+    onMounted(() => {
+      drawBarcode();
+    })
+
+    // Watcher per aggiornamenti delle proprietà
+    watch([value, format, width, height, fontsize], () => {
+      drawBarcode();
+    })
+
+    return {
+      tools,
+      toolsext,
+      fontsize,
+    }
+  },
+})

src/components/CBarCode/CBarCode.vue

@@ -0,0 +1,13 @@
+<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>
+</template>
+
+<script lang="ts" src="./CBarCode.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CBarCode.scss';
+</style>

src/components/CBarCode/index.ts

@@ -0,0 +1 @@
+export {default as CBarCode} from './CBarCode.vue'