WIP barcode dynamic value

packages/nc-gui/components/virtual-cell/barcode/Barcode.vue

@@ -1,5 +1,6 @@
  <script setup lang="ts">
-import VueBarcode from '@chenfengyuan/vue-barcode'
+// import VueBarcode from '@chenfengyuan/vue-barcode'
+import JsBarcodeWrapper from './JsBarcodeWrapper'
 
 const maxNumberOfAllowedCharsForQrValue = 2000
 
@@ -9,13 +10,6 @@ const barcodeValue = computed(() => String(cellValue?.value))
 
 const tooManyCharsForQrCode = computed(() => barcodeValue?.value.length > maxNumberOfAllowedCharsForQrValue)
 
-// const barcode = VueBarcode(barcodeValue, {
-//   width: 150,
-// })
-
-// const barcodeLarge = VueBarcode(barcodeValue, {
-//   width: 600,
-// })
 
 const modalVisible = ref(false)
 
@@ -30,7 +24,6 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
 </script>
 
 <template>
-  <vue-barcode value="barcodeValue"></vue-barcode>
   <a-modal
     v-model:visible="modalVisible"
     :class="{ active: modalVisible }"
@@ -39,23 +32,21 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
     @ok="handleModalOkClick"
   >
     <template #footer>
-      <div class="mr-4" data-testid="nc-qr-code-large-value-label">heja</div>
+      <div class="mr-4" data-testid="nc-qr-code-large-value-label">{{ barcodeValue }}</div>
     </template>
-    <!-- <img v-if="barcodeValue && !tooManyCharsForQrCode" :src="qrCodeLarge" alt="QR Code" /> -->
+    <JsBarcodeWrapper v-if="barcodeValue && !tooManyCharsForQrCode" tag="svg" :value="barcodeValue" width="3" />
   </a-modal>
   <div @click="showQrModal">
-    <VueBarcode value="barcodeValue"></VueBarcode>
+    <JsBarcodeWrapper v-if="barcodeValue && !tooManyCharsForQrCode" :value="barcodeValue" width="1"></JsBarcodeWrapper>
   </div>
 
-  <!-- <div v-if="tooManyCharsForQrCode" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+  <div v-if="tooManyCharsForQrCode" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
-    {{ $t('labels.qrCodeValueTooLong') }}
+    {{ $t('labels.barcodeValueTooLong') }}
   </div>
- <img v-if="qrValue && !tooManyCharsForQrCode" :src="qrCode" alt="QR Code" @click="showQrModal" /> -->
+  <div v-if="showEditNonEditableFieldWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
-  <!-- <div v-if="showEditNonEditableFieldWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
     {{ $t('msg.warning.nonEditableFields.computedFieldUnableToClear') }}
   </div>
   <div v-if="showClearNonEditableFieldWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
     {{ $t('msg.warning.nonEditableFields.qrFieldsCannotBeDirectlyChanged') }}
   </div>
-  -->
 </template>

packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.ts

@@ -0,0 +1,67 @@
+import { defineComponent, h } from 'vue'
+import JsBarcode from 'jsbarcode'
+
+// TODO: add proper reference for the origin of this code here
+export default defineComponent({
+  name: 'JsBarcodeWrapper',
+
+  props: {
+    /**
+     * The value of the bar code.
+     */
+    value: {
+      type: String,
+      default: undefined,
+    },
+
+    /**
+     * The options for the bar code generator.
+     * {@link https://github.com/lindell/JsBarcode#options}
+     */
+    options: {
+      type: Object,
+      default: undefined,
+    },
+
+    /**
+     * The tag name of the component's root element.
+     */
+    tag: {
+      type: String,
+      default: 'canvas',
+    },
+  },
+
+  watch: {
+    $props: {
+      deep: true,
+      immediate: true,
+
+      /**
+       * Update the bar code when props changed.
+       */
+      handler() {
+        if (this.$el) {
+          this.generate()
+        }
+      },
+    },
+  },
+
+  mounted() {
+    this.generate()
+  },
+
+  methods: {
+    /**
+     * Generate bar code.
+     */
+    generate() {
+      JsBarcode(this.$el, String(this.value), this.options)
+    },
+  },
+
+  render() {
+    return h(this.tag, this.$slots.default)
+  },
+})

packages/nc-gui/lang/en.json

@@ -251,6 +251,7 @@
     "qrCodeValueColumn": "Column with QR code value",
     "barcodeValueColumn": "Column with Barcode value",
     "qrCodeValueTooLong": "Too many characters for a QR code",
+    "barcodeValueTooLong": "Too many characters for a barcode",
     "aggregateFunction": "Aggregate function",
     "dbCreateIfNotExists": "Database : create if not exists",
     "clientKey": "Client Key",

packages/nc-gui/plugins/ant.ts

@@ -1,9 +1,9 @@
 import { Menu as AntMenu, Modal as AntModal, message } from 'ant-design-vue'
-import VueBarcode from '@chenfengyuan/vue-barcode'
+// import VueBarcode from '@chenfengyuan/vue-barcode'
 import { defineNuxtPlugin } from '#imports'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.component(VueBarcode.name, VueBarcode)
+  // nuxtApp.vueApp.component(VueBarcode.name, VueBarcode)
   nuxtApp.vueApp.component(AntMenu.name, AntMenu)
   nuxtApp.vueApp.component(AntModal.name, AntModal)
   message.config({