myprojplanet_vite/src/components/CBarCode/CBarCode.ts

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: 50,
    },
    widthlines: {
      type: Number,
      required: false,
      default: 2,
    },
    show_at_right: {
      type: Boolean,
      required: false,
      default: false,
    },
    height: {
      type: Number,
      required: false,
      default: 100,
    },
    gap: {
      type: Number,
      required: false,
      default: 0,
    },
    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, widthlines, height, fontsize } = toRefs(props);

    // Funzione per disegnare il codice a barre
    const drawBarcode = () => {
      JsBarcode("#C" + value.value, value.value, {
        format: format.value,
        width: widthlines.value,
        height: height.value,
        displayValue: true,
        lineColor: "#000",
        font: "monospace",
        margin: 0,
        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,
    }
  },
})