feat(Barcode Generator): use bwip-js to add more barcode types

Including Datamatrix, fix #1343

components.d.ts

@@ -130,11 +130,9 @@ declare module '@vue/runtime-core' {
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
-    NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
-    NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
@@ -147,7 +145,7 @@ declare module '@vue/runtime-core' {
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
-    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NTable: typeof import('naive-ui')['NTable']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']

package.json

@@ -50,6 +50,7 @@
     "@vueuse/router": "^10.0.0",
     "@zxing/library": "^0.21.0",
     "bcryptjs": "^2.4.3",
+    "bwip-js": "^4.5.1",
     "change-case": "^4.1.2",
     "colord": "^2.9.3",
     "composerize-ts": "^0.6.2",

pnpm-lock.yaml

@@ -40,7 +40,7 @@ dependencies:
     version: 10.3.0(vue@3.3.4)
   '@vueuse/head':
     specifier: ^1.0.0
-    version: 1.0.0(vue@3.3.4)
+    version: 1.0.0(typescript@5.2.2)(vue@3.3.4)
   '@vueuse/router':
     specifier: ^10.0.0
     version: 10.0.0(vue-router@4.1.6)(vue@3.3.4)
@@ -50,6 +50,9 @@ dependencies:
   bcryptjs:
     specifier: ^2.4.3
     version: 2.4.3
+  bwip-js:
+    specifier: ^4.5.1
+    version: 4.5.1
   change-case:
     specifier: ^4.1.2
     version: 4.1.2
@@ -820,6 +823,11 @@ packages:
     resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==}
     engines: {node: '>=6.9.0'}
 
+  /@babel/helper-string-parser@7.25.9:
+    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
   /@babel/helper-validator-identifier@7.22.20:
     resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
     engines: {node: '>=6.9.0'}
@@ -828,6 +836,11 @@ packages:
     resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==}
     engines: {node: '>=6.9.0'}
 
+  /@babel/helper-validator-identifier@7.25.9:
+    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
   /@babel/helper-validator-option@7.22.15:
     resolution: {integrity: sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==}
     engines: {node: '>=6.9.0'}
@@ -920,6 +933,14 @@ packages:
     dependencies:
       '@babel/types': 7.23.0
 
+  /@babel/parser@7.26.7:
+    resolution: {integrity: sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.26.7
+    dev: false
+
   /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.22.15(@babel/core@7.23.2):
     resolution: {integrity: sha512-FB9iYlz7rURmRJyXRKEnalYPPdn87H5no108cyuQQyMwlpJ2SJtpIUBI27kdTin956pz+LPypkPVPUTlxOmrsg==}
     engines: {node: '>=6.9.0'}
@@ -1907,6 +1928,14 @@ packages:
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
+  /@babel/types@7.26.7:
+    resolution: {integrity: sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+    dev: false
+
   /@chenfengyuan/vue-barcode@2.0.2(jsbarcode@3.11.6)(vue@3.3.4):
     resolution: {integrity: sha512-lHQhYfcqWeeA/UYoe4O+O6c8WD+t9WO8SiWohKOVVIiwPhcvC58YxhvlFvJme0/CPL7+Sh1XCpMaC9Mo2Dt5jQ==}
     peerDependencies:
@@ -2355,6 +2384,10 @@ packages:
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
 
+  /@jridgewell/sourcemap-codec@1.5.0:
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
+    dev: false
+
   /@jridgewell/trace-mapping@0.3.18:
     resolution: {integrity: sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==}
     dependencies:
@@ -3366,18 +3399,18 @@ packages:
       '@unhead/schema': 0.5.1
     dev: false
 
-  /@unhead/vue@0.5.1(vue@3.3.4):
+  /@unhead/vue@0.5.1(typescript@5.2.2)(vue@3.3.4):
     resolution: {integrity: sha512-s4y4uj3NMqaUs0K+WQXbWGj/2+Glk/DEJ9yeJOcJIiro/+IhUMByD71jyCM43Xn8YBPy14VY/ZYb9ZFU2WCZgw==}
     peerDependencies:
       vue: '>=2.7 || >=3'
     dependencies:
       '@unhead/dom': 0.5.1
       '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.11.0(vue@3.3.4)
+      '@vueuse/shared': 12.5.0(typescript@5.2.2)
       unhead: 0.5.1
       vue: 3.3.4
     transitivePeerDependencies:
-      - '@vue/composition-api'
+      - typescript
     dev: false
 
   /@unocss/astro@0.57.1(rollup@2.79.1)(vite@4.4.9):
@@ -3766,6 +3799,16 @@ packages:
     dev: true
     optional: true
 
+  /@vue/compiler-core@3.5.13:
+    resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}
+    dependencies:
+      '@babel/parser': 7.26.7
+      '@vue/shared': 3.5.13
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+    dev: false
+
   /@vue/compiler-dom@3.2.47:
     resolution: {integrity: sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==}
     dependencies:
@@ -3787,6 +3830,13 @@ packages:
     dev: true
     optional: true
 
+  /@vue/compiler-dom@3.5.13:
+    resolution: {integrity: sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==}
+    dependencies:
+      '@vue/compiler-core': 3.5.13
+      '@vue/shared': 3.5.13
+    dev: false
+
   /@vue/compiler-sfc@3.2.47:
     resolution: {integrity: sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==}
     dependencies:
@@ -3816,6 +3866,20 @@ packages:
       postcss: 8.4.28
       source-map-js: 1.0.2
 
+  /@vue/compiler-sfc@3.5.13:
+    resolution: {integrity: sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==}
+    dependencies:
+      '@babel/parser': 7.26.7
+      '@vue/compiler-core': 3.5.13
+      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-ssr': 3.5.13
+      '@vue/shared': 3.5.13
+      estree-walker: 2.0.2
+      magic-string: 0.30.17
+      postcss: 8.5.1
+      source-map-js: 1.2.1
+    dev: false
+
   /@vue/compiler-ssr@3.2.47:
     resolution: {integrity: sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==}
     dependencies:
@@ -3838,6 +3902,13 @@ packages:
     dev: true
     optional: true
 
+  /@vue/compiler-ssr@3.5.13:
+    resolution: {integrity: sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==}
+    dependencies:
+      '@vue/compiler-dom': 3.5.13
+      '@vue/shared': 3.5.13
+    dev: false
+
   /@vue/devtools-api@6.5.0:
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
 
@@ -3884,12 +3955,25 @@ packages:
     dependencies:
       '@vue/shared': 3.3.4
 
+  /@vue/reactivity@3.5.13:
+    resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}
+    dependencies:
+      '@vue/shared': 3.5.13
+    dev: false
+
   /@vue/runtime-core@3.3.4:
     resolution: {integrity: sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==}
     dependencies:
       '@vue/reactivity': 3.3.4
       '@vue/shared': 3.3.4
 
+  /@vue/runtime-core@3.5.13:
+    resolution: {integrity: sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==}
+    dependencies:
+      '@vue/reactivity': 3.5.13
+      '@vue/shared': 3.5.13
+    dev: false
+
   /@vue/runtime-dom@3.3.4:
     resolution: {integrity: sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==}
     dependencies:
@@ -3897,6 +3981,15 @@ packages:
       '@vue/shared': 3.3.4
       csstype: 3.1.2
 
+  /@vue/runtime-dom@3.5.13:
+    resolution: {integrity: sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==}
+    dependencies:
+      '@vue/reactivity': 3.5.13
+      '@vue/runtime-core': 3.5.13
+      '@vue/shared': 3.5.13
+      csstype: 3.1.3
+    dev: false
+
   /@vue/server-renderer@3.3.4(vue@3.3.4):
     resolution: {integrity: sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==}
     peerDependencies:
@@ -3917,6 +4010,16 @@ packages:
     dev: true
     optional: true
 
+  /@vue/server-renderer@3.5.13(vue@3.5.13):
+    resolution: {integrity: sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==}
+    peerDependencies:
+      vue: 3.5.13
+    dependencies:
+      '@vue/compiler-ssr': 3.5.13
+      '@vue/shared': 3.5.13
+      vue: 3.5.13(typescript@5.2.2)
+    dev: false
+
   /@vue/shared@3.2.47:
     resolution: {integrity: sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==}
     dev: true
@@ -3930,6 +4033,10 @@ packages:
     dev: true
     optional: true
 
+  /@vue/shared@3.5.13:
+    resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
+    dev: false
+
   /@vue/test-utils@2.3.2(vue@3.3.4):
     resolution: {integrity: sha512-hJnVaYhbrIm0yBS0+e1Y0Sj85cMyAi+PAbK4JHqMRUZ6S622Goa+G7QzkRSyvCteG8wop7tipuEbHoZo26wsSA==}
     peerDependencies:
@@ -3967,17 +4074,17 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/head@1.0.0(vue@3.3.4):
+  /@vueuse/head@1.0.0(typescript@5.2.2)(vue@3.3.4):
     resolution: {integrity: sha512-wighjD6iLxEitpg6EDeS5dGDB9tcOSMhpblrAOKR6qBP93U3cjG72n0LhlBUD9miu41lNxXFVGHgSc6BVJ9BMg==}
     peerDependencies:
       vue: '>=2.7 || >=3'
     dependencies:
       '@unhead/schema': 0.5.1
       '@unhead/ssr': 0.5.1
-      '@unhead/vue': 0.5.1(vue@3.3.4)
+      '@unhead/vue': 0.5.1(typescript@5.2.2)(vue@3.3.4)
       vue: 3.3.4
     transitivePeerDependencies:
-      - '@vue/composition-api'
+      - typescript
     dev: false
 
   /@vueuse/metadata@10.3.0:
@@ -4006,15 +4113,6 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@10.11.0(vue@3.3.4):
-    resolution: {integrity: sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==}
-    dependencies:
-      vue-demi: 0.14.8(vue@3.3.4)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    dev: false
-
   /@vueuse/shared@10.3.0(vue@3.3.4):
     resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
     dependencies:
@@ -4024,6 +4122,14 @@ packages:
       - vue
     dev: false
 
+  /@vueuse/shared@12.5.0(typescript@5.2.2):
+    resolution: {integrity: sha512-vMpcL1lStUU6O+kdj6YdHDixh0odjPAUM15uJ9f7MY781jcYkIwFA4iv2EfoIPO6vBmvutI1HxxAwmf0cx5ISQ==}
+    dependencies:
+      vue: 3.5.13(typescript@5.2.2)
+    transitivePeerDependencies:
+      - typescript
+    dev: false
+
   /@zhead/schema@1.0.0-beta.13:
     resolution: {integrity: sha512-P1A1vRGFBhITco8Iw4/hvnDYoE/SoVrd71dW1pBFdXJb3vP+pBtoOuhbEKy0ROJGOyzQuqvFibcwzyLlWMqNiQ==}
     dev: false
@@ -4329,6 +4435,11 @@ packages:
       semver: 7.5.4
     dev: true
 
+  /bwip-js@4.5.1:
+    resolution: {integrity: sha512-83yQCKiIftz5YonnsTh6wIkFoHHWl+B/XaGWD1UdRw7aB6XP9JtyYP9n8sRy3m5rzL+Ch/RUPnu28UW0RrPZUA==}
+    hasBin: true
+    dev: false
+
   /cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
@@ -4752,6 +4863,10 @@ packages:
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
 
+  /csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+    dev: false
+
   /dash-get@1.0.2:
     resolution: {integrity: sha512-4FbVrHDwfOASx7uQVxeiCTo7ggSdYZbqs8lH+WU6ViypPlDbe9y6IP5VVUDQBv9DcnyaiPT5XT0UWHgJ64zLeQ==}
     dev: false
@@ -5041,7 +5156,6 @@ packages:
   /entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
-    dev: true
 
   /errno@0.1.8:
     resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
@@ -6827,6 +6941,12 @@ packages:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  /magic-string@0.30.17:
+    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+    dev: false
+
   /magic-string@0.30.2:
     resolution: {integrity: sha512-lNZdu7pewtq/ZvWUp9Wpf/x7WzMTsR26TWV03BRZrXFsv+BI6dy8RAiKgm1uM/kyR0rCfUcqvOlXKG66KhIGug==}
     engines: {node: '>=12'}
@@ -7060,6 +7180,12 @@ packages:
     resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
 
+  /nanoid@3.3.8:
+    resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+    dev: false
+
   /natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
@@ -7435,6 +7561,10 @@ packages:
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
+  /picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+    dev: false
+
   /picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
@@ -7525,6 +7655,15 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /postcss@8.5.1:
+    resolution: {integrity: sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.8
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+    dev: false
+
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -8191,6 +8330,11 @@ packages:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
 
+  /source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /source-map-support@0.5.21:
     resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
     dependencies:
@@ -9222,21 +9366,6 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /vue-demi@0.14.8(vue@3.3.4):
-    resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    peerDependencies:
-      '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^3.0.0-0 || ^2.6.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-    dependencies:
-      vue: 3.3.4
-    dev: false
-
   /vue-eslint-parser@9.3.1(eslint@8.47.0):
     resolution: {integrity: sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -9303,6 +9432,22 @@ packages:
       '@vue/server-renderer': 3.3.4(vue@3.3.4)
       '@vue/shared': 3.3.4
 
+  /vue@3.5.13(typescript@5.2.2):
+    resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-sfc': 3.5.13
+      '@vue/runtime-dom': 3.5.13
+      '@vue/server-renderer': 3.5.13(vue@3.5.13)
+      '@vue/shared': 3.5.13
+      typescript: 5.2.2
+    dev: false
+
   /vueuc@0.4.51(vue@3.3.4):
     resolution: {integrity: sha512-pLiMChM4f+W8czlIClGvGBYo656lc2Y0/mXFSCydcSmnCR1izlKPGMgiYBGjbY9FDkFG8a2HEVz7t0DNzBWbDw==}
     peerDependencies:

src/tools/barcode-generator/barcode-generator.vue

@@ -1,51 +1,61 @@
 <script setup lang="ts">
-import VueBarcode from '@chenfengyuan/vue-barcode';
+import bwipjs, { type RenderOptions } from 'bwip-js/browser';
-import JsBarcode from 'jsbarcode';
+import { Base64 } from 'js-base64';
+import formats from './barcode.formats.json';
 import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
 import { useQueryParamOrStorage } from '@/composable/queryParams';
 
-const foreground = useQueryParamOrStorage({ name: 'fg', storageName: 'barcode-gen:fg', defaultValue: '#000000ff' });
+const foreground = useQueryParamOrStorage({ name: 'fg', storageName: 'barcode-gen:fg', defaultValue: '#000000' });
-const background = useQueryParamOrStorage({ name: 'bg', storageName: 'barcode-gen:bg', defaultValue: '#ffffffff' });
+const background = useQueryParamOrStorage({ name: 'bg', storageName: 'barcode-gen:bg', defaultValue: '#FFFFFF' });
-const width = useQueryParamOrStorage({ name: 'width', storageName: 'barcode-gen:width', defaultValue: 2 });
+const scale = useQueryParamOrStorage({ name: 'scale', storageName: 'barcode-gen:scale', defaultValue: 2 });
-const height = useQueryParamOrStorage({ name: 'height', storageName: 'barcode-gen:height', defaultValue: 100 });
+const height = useQueryParamOrStorage({ name: 'height', storageName: 'barcode-gen:height', defaultValue: 25 });
 const margin = useQueryParamOrStorage({ name: 'margin', storageName: 'barcode-gen:margin', defaultValue: 10 });
-const format = useQueryParamOrStorage({ name: 'format', storageName: 'barcode-gen:format', defaultValue: 'auto' });
+const format = useQueryParamOrStorage({ name: 'format', storageName: 'barcode-gen:format', defaultValue: 'code128' });
 const displayValue = useQueryParamOrStorage({ name: 'display', storageName: 'barcode-gen:display', defaultValue: true });
-const ean128 = useQueryParamOrStorage({ name: 'ean128', storageName: 'barcode-gen:ean128', defaultValue: false });
 const value = ref('123456789');
+const barcodeCanvas = ref<HTMLCanvasElement>();
 
-const options = computed(() => ({
+const options = computed<RenderOptions>(() => ({
-  lineColor: foreground.value,
+  barcolor: foreground.value,
-  background: background.value,
+  textcolor: foreground.value,
-  width: width.value,
+  backgroundcolor: background.value,
+  scale: scale.value,
   height: height.value,
-  margin: margin.value,
+  padding: margin.value,
-  format: format.value === 'auto' ? 'CODE128' : format.value,
+  bcid: format.value === 'auto' ? 'code128' : format.value,
-  displayValue: displayValue.value,
+  includetext: displayValue.value,
-  ean128: ean128.value,
   text: value.value,
+  textxalign: 'center',
 }));
 
-const formats = [
+const error = ref('');
-  'auto',
+watchEffect(() => {
-  'CODE39',
+  if (!barcodeCanvas.value) {
-  'CODE128', 'CODE128A', 'CODE128B', 'CODE128C',
+    return;
-  'EAN13', 'EAN8', 'EAN5', 'EAN2', 'UPC', 'UPCE',
+  }
-  'ITF14',
-  'ITF',
-  'MSI', 'MSI10', 'MSI11', 'MSI1010', 'MSI1110',
-  'pharmacode',
-  'codabar',
-  'GenericBarcode',
-];
 
-const barcodePNG = computed(() => {
+  try {
-  const canvas = document.createElement('canvas');
+    bwipjs.toCanvas(barcodeCanvas.value, options.value);
-  JsBarcode(canvas, value.value, options.value);
+  }
-  return canvas.toDataURL('image/png');
+  catch (e: any) {
+    error.value = e.toString();
+  }
 });
 
-const { download } = useDownloadFileFromBase64({ source: barcodePNG, filename: 'barcode.png' });
+const barcodePNG = computed(() => {
+  return barcodeCanvas.value?.toDataURL('image/png') || '';
+});
+const barcodeSVG = computed(() => {
+  try {
+    return Base64.encode(bwipjs.toSVG(options.value));
+  }
+  catch (e: any) {
+    return '';
+  }
+});
+
+const { download: downloadPNG } = useDownloadFileFromBase64({ source: barcodePNG, filename: 'barcode.png' });
+const { download: downloadSVG } = useDownloadFileFromBase64({ source: barcodeSVG, filename: 'barcode.svg' });
 </script>
 
 <template>
@@ -61,20 +71,31 @@ const { download } = useDownloadFileFromBase64({ source: barcodePNG, filename: '
           multiline
           rows="1"
           autosize
-          placeholder="Your text..."
+          placeholder="Your barcode..."
           mb-6
         />
         <n-form label-width="130" label-placement="left">
+          <c-select
+            v-model:value="format"
+            label="Format:"
+            label-position="left"
+            label-width="130px"
+            label-align="right"
+            :options="formats"
+            searchable
+            mb-4
+          />
+
           <n-form-item label="Foreground color:">
-            <n-color-picker v-model:value="foreground" :modes="['hex']" />
+            <n-color-picker v-model:value="foreground" :modes="['hex']" :show-alpha="false" />
           </n-form-item>
           <n-form-item label="Background color:">
-            <n-color-picker v-model:value="background" :modes="['hex']" />
+            <n-color-picker v-model:value="background" :modes="['hex']" :show-alpha="false" />
           </n-form-item>
-          <n-form-item label="Width:">
+          <n-form-item label="Scale:">
-            <n-input-number v-model:value="width" :min="0" />
+            <n-input-number v-model:value="scale" :min="0" />
           </n-form-item>
-          <n-form-item label="Height:">
+          <n-form-item label="Height (mm):">
             <n-input-number v-model:value="height" :min="0" />
           </n-form-item>
           <n-form-item label="Margin:">
@@ -83,25 +104,22 @@ const { download } = useDownloadFileFromBase64({ source: barcodePNG, filename: '
           <n-form-item label="Display text:">
             <n-checkbox v-model:checked="displayValue" />
           </n-form-item>
-          <c-select
-            v-model:value="format"
-            label="Format:"
-            label-position="left"
-            label-width="130px"
-            label-align="right"
-            :options="formats.map((value) => ({ label: value, value }))"
-          />
         </n-form>
       </n-gi>
       <n-gi>
         <div flex flex-col items-center gap-3>
-          <VueBarcode
+          <c-alert v-if="error">
-            :options="options"
+            {{ error }}
-            :value="value"
+          </c-alert>
-          />
+          <canvas ref="barcodeCanvas" />
-          <c-button @click="download">
+          <div flex justify-center>
-            Download barcode
+            <c-button mr-2 @click="downloadPNG">
-          </c-button>
+              Download PNG barcode
+            </c-button>
+            <c-button @click="downloadSVG">
+              Download SVG barcode
+            </c-button>
+          </div>
         </div>
       </n-gi>
     </n-grid>

src/tools/barcode-generator/barcode.formats.json

@@ -0,0 +1,112 @@
+[
+  { "value": "auspost", "label": "AusPost 4 State Customer Code" },
+  { "value": "azteccode", "label": "Aztec Code" },
+  { "value": "azteccodecompact", "label": "Compact Aztec Code" },
+  { "value": "aztecrune", "label": "Aztec Runes" },
+  { "value": "bc412", "label": "BC412" },
+  { "value": "channelcode", "label": "Channel Code" },
+  { "value": "codablockf", "label": "Codablock F" },
+  { "value": "code11", "label": "Code 11" },
+  { "value": "code128", "label": "Code 128" },
+  { "value": "code16k", "label": "Code 16K" },
+  { "value": "code2of5", "label": "Code 25" },
+  { "value": "code32", "label": "Italian Pharmacode" },
+  { "value": "code39", "label": "Code 39" },
+  { "value": "code39ext", "label": "Code 39 Extended" },
+  { "value": "code49", "label": "Code 49" },
+  { "value": "code93", "label": "Code 93" },
+  { "value": "code93ext", "label": "Code 93 Extended" },
+  { "value": "codeone", "label": "Code One" },
+  { "value": "coop2of5", "label": "COOP 2 of 5" },
+  { "value": "daft", "label": "Custom 4 state symbology" },
+  { "value": "databarexpanded", "label": "GS1 DataBar Expanded" },
+  { "value": "databarexpandedcomposite", "label": "GS1 DataBar Expanded Composite" },
+  { "value": "databarexpandedstacked", "label": "GS1 DataBar Expanded Stacked" },
+  { "value": "databarexpandedstackedcomposite", "label": "GS1 DataBar Expanded Stacked Composite" },
+  { "value": "databarlimited", "label": "GS1 DataBar Limited" },
+  { "value": "databarlimitedcomposite", "label": "GS1 DataBar Limited Composite" },
+  { "value": "databaromni", "label": "GS1 DataBar Omnidirectional" },
+  { "value": "databaromnicomposite", "label": "GS1 DataBar Omnidirectional Composite" },
+  { "value": "databarstacked", "label": "GS1 DataBar Stacked" },
+  { "value": "databarstackedcomposite", "label": "GS1 DataBar Stacked Composite" },
+  { "value": "databarstackedomni", "label": "GS1 DataBar Stacked Omnidirectional" },
+  { "value": "databarstackedomnicomposite", "label": "GS1 DataBar Stacked Omnidirectional Composite" },
+  { "value": "databartruncated", "label": "GS1 DataBar Truncated" },
+  { "value": "databartruncatedcomposite", "label": "GS1 DataBar Truncated Composite" },
+  { "value": "datalogic2of5", "label": "Datalogic 2 of 5" },
+  { "value": "datamatrix", "label": "Data Matrix" },
+  { "value": "datamatrixrectangular", "label": "Data Matrix Rectangular" },
+  { "value": "datamatrixrectangularextension", "label": "Data Matrix Rectangular Extension" },
+  { "value": "dotcode", "label": "DotCode" },
+  { "value": "ean13", "label": "EAN-13" },
+  { "value": "ean13composite", "label": "EAN-13 Composite" },
+  { "value": "ean14", "label": "GS1-14" },
+  { "value": "ean2", "label": "EAN-2 (2 digit addon)" },
+  { "value": "ean5", "label": "EAN-5 (5 digit addon)" },
+  { "value": "ean8", "label": "EAN-8" },
+  { "value": "ean8composite", "label": "EAN-8 Composite" },
+  { "value": "flattermarken", "label": "Flattermarken" },
+  { "value": "gs1-128", "label": "GS1-128" },
+  { "value": "gs1-128composite", "label": "GS1-128 Composite" },
+  { "value": "gs1-cc", "label": "GS1 Composite 2D Component" },
+  { "value": "gs1datamatrix", "label": "GS1 Data Matrix" },
+  { "value": "gs1datamatrixrectangular", "label": "GS1 Data Matrix Rectangular" },
+  { "value": "gs1dldatamatrix", "label": "GS1 Digital Link Data Matrix" },
+  { "value": "gs1dlqrcode", "label": "GS1 Digital Link QR Code" },
+  { "value": "gs1dotcode", "label": "GS1 DotCode" },
+  { "value": "gs1northamericancoupon", "label": "GS1 North American Coupon" },
+  { "value": "gs1qrcode", "label": "GS1 QR Code" },
+  { "value": "hanxin", "label": "Han Xin Code" },
+  { "value": "hibcazteccode", "label": "HIBC Aztec Code" },
+  { "value": "hibccodablockf", "label": "HIBC Codablock F" },
+  { "value": "hibccode128", "label": "HIBC Code 128" },
+  { "value": "hibccode39", "label": "HIBC Code 39" },
+  { "value": "hibcdatamatrix", "label": "HIBC Data Matrix" },
+  { "value": "hibcdatamatrixrectangular", "label": "HIBC Data Matrix Rectangular" },
+  { "value": "hibcmicropdf417", "label": "HIBC MicroPDF417" },
+  { "value": "hibcpdf417", "label": "HIBC PDF417" },
+  { "value": "hibcqrcode", "label": "HIBC QR Code" },
+  { "value": "iata2of5", "label": "IATA 2 of 5" },
+  { "value": "identcode", "label": "Deutsche Post Identcode" },
+  { "value": "industrial2of5", "label": "Industrial 2 of 5" },
+  { "value": "interleaved2of5", "label": "Interleaved 2 of 5 (ITF)" },
+  { "value": "isbn", "label": "ISBN" },
+  { "value": "ismn", "label": "ISMN" },
+  { "value": "issn", "label": "ISSN" },
+  { "value": "itf14", "label": "ITF-14" },
+  { "value": "japanpost", "label": "Japan Post 4 State Customer Code" },
+  { "value": "kix", "label": "Royal Dutch TPG Post KIX" },
+  { "value": "leitcode", "label": "Deutsche Post Leitcode" },
+  { "value": "mailmark", "label": "Royal Mail Mailmark" },
+  { "value": "mands", "label": "Marks & Spencer" },
+  { "value": "matrix2of5", "label": "Matrix 2 of 5" },
+  { "value": "maxicode", "label": "MaxiCode" },
+  { "value": "micropdf417", "label": "MicroPDF417" },
+  { "value": "microqrcode", "label": "Micro QR Code" },
+  { "value": "msi", "label": "MSI Modified Plessey" },
+  { "value": "onecode", "label": "USPS Intelligent Mail" },
+  { "value": "pdf417", "label": "PDF417" },
+  { "value": "pdf417compact", "label": "Compact PDF417" },
+  { "value": "pharmacode", "label": "Pharmaceutical Binary Code" },
+  { "value": "pharmacode2", "label": "Two-track Pharmacode" },
+  { "value": "planet", "label": "USPS PLANET" },
+  { "value": "plessey", "label": "Plessey UK" },
+  { "value": "posicode", "label": "PosiCode" },
+  { "value": "postnet", "label": "USPS POSTNET" },
+  { "value": "pzn", "label": "Pharmazentralnummer (PZN)" },
+  { "value": "qrcode", "label": "QR Code" },
+  { "value": "rationalizedCodabar", "label": "Codabar" },
+  { "value": "raw", "label": "Custom 1D symbology" },
+  { "value": "rectangularmicroqrcode", "label": "Rectangular Micro QR Code" },
+  { "value": "royalmail", "label": "Royal Mail 4 State Customer Code" },
+  { "value": "sscc18", "label": "SSCC-18" },
+  { "value": "swissqrcode", "label": "Swiss QR Code" },
+  { "value": "symbol", "label": "Miscellaneous symbols" },
+  { "value": "telepen", "label": "Telepen" },
+  { "value": "telepennumeric", "label": "Telepen Numeric" },
+  { "value": "ultracode", "label": "Ultracode" },
+  { "value": "upca", "label": "UPC-A" },
+  { "value": "upcacomposite", "label": "UPC-A Composite" },
+  { "value": "upce", "label": "UPC-E" },
+  { "value": "upcecomposite", "label": "UPC-E Composite" }
+]

src/tools/barcode-generator/bwip-js.d.ts

@@ -0,0 +1,82 @@
+declare module 'bwip-js/browser' {
+    export interface BwippOptions {
+        includecheck?: boolean | undefined;
+        includecheckintext?: boolean | undefined;
+
+        parse?: boolean | undefined;
+        parsefnc?: boolean | undefined;
+
+        height?: number | undefined;
+        width?: number | undefined;
+
+        inkspread?: number | undefined;
+        inkspreadh?: number | undefined;
+        inkspreadv?: number | undefined;
+        dotty?: boolean | undefined;
+
+        binarytext?: boolean | undefined;   // really a bwip-js option but better positioned here
+        includetext?: boolean | undefined;
+        textfont?: string | undefined;
+        textsize?: number | undefined;
+        textgaps?: number | undefined;
+        alttext?: string | undefined;
+
+        textxalign?: 'offleft' | 'left' | 'center' | 'right' | 'offright' | 'justify' | undefined;
+        textyalign?: 'below' | 'center' | 'above' | undefined;
+        textxoffset?: number | undefined;
+        textyoffset?: number | undefined;
+
+        showborder?: boolean | undefined;
+        borderwidth?: number | undefined;
+        borderleft?: number | undefined;
+        borderright?: number | undefined;
+        bordertop?: number | undefined;
+        boraderbottom?: number | undefined;
+
+        barcolor?: string | undefined;
+        backgroundcolor?: string | undefined;
+        bordercolor?: string | undefined;
+        textcolor?: string | undefined;
+
+        addontextxoffset?: number | undefined;
+        addontextyoffset?: number | undefined;
+        addontextfont?: string | undefined;
+        addontextsize?: number | undefined;
+
+        guardwhitespace?: boolean | undefined;
+        guardwidth?: number | undefined;
+        guardheight?: number | undefined;
+        guardleftpos?: number | undefined;
+        guardrightpos?: number | undefined;
+        guardleftypos?: number | undefined;
+        guardrightypos?: number | undefined;
+    }
+    export interface RenderOptions extends BwippOptions {
+        bcid: string;
+        text: string;
+
+        scaleX?: number | undefined;
+        scaleY?: number | undefined;
+        scale?: number | undefined;
+
+        rotate?: 'N' | 'R' | 'L' | 'I' | undefined;
+
+        paddingwidth?: number | undefined;
+        paddingheight?: number | undefined;
+
+        paddingleft?: number | undefined;
+        paddingright?: number | undefined;
+        paddingtop?: number | undefined;
+        paddingbottom?: number | undefined;
+
+        monochrome?: boolean | undefined;
+        sizelimit?: number | undefined;
+    }
+
+    export const BWIPP_VERSION: string;
+    export const BWIPJS_VERSION: string;
+
+    export function toSVG(opts: RenderOptions): string;
+
+    export function toCanvas(canvas: string | HTMLCanvasElement, opts: RenderOptions): HTMLCanvasElement;
+}