mirror of https://github.com/nocodb/nocodb
Daniel Spaude
2 years ago
9 changed files with 120 additions and 202 deletions
@ -1,68 +0,0 @@
|
||||
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() { |
||||
// debugger
|
||||
JsBarcode(this.$el, String(this.value), this.options) |
||||
}, |
||||
}, |
||||
|
||||
render() { |
||||
return h(this.tag, this.$slots.default) |
||||
}, |
||||
}) |
||||
@ -0,0 +1,42 @@
|
||||
<script lang="ts" setup> |
||||
import JsBarcode from 'jsbarcode' |
||||
|
||||
const props = defineProps({ |
||||
barcodeValue: { type: String, required: true }, |
||||
barcodeFormat: { type: String, required: true }, |
||||
}) |
||||
const emit = defineEmits(['onClickBarcode']) |
||||
const barcodeSvgRef = ref(null) |
||||
const errorForCurrentInput = ref(false) |
||||
const generate = () => { |
||||
try { |
||||
JsBarcode(barcodeSvgRef.value, String(props.barcodeValue), { |
||||
format: props.barcodeFormat, |
||||
}) |
||||
errorForCurrentInput.value = false |
||||
} catch (e) { |
||||
console.log('e', e) |
||||
errorForCurrentInput.value = true |
||||
} |
||||
} |
||||
|
||||
const onBarcodeClick = (ev: MouseEvent) => { |
||||
ev.stopPropagation() |
||||
emit('onClickBarcode') |
||||
} |
||||
|
||||
watch(() => props.barcodeValue, generate) |
||||
watch(() => props.barcodeFormat, generate) |
||||
onMounted(generate) |
||||
</script> |
||||
|
||||
<template> |
||||
<svg v-show="!errorForCurrentInput" ref="barcodeSvgRef" @click="onBarcodeClick"></svg> |
||||
<slot v-if="errorForCurrentInput" name="barcodeRenderError" /> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
svg { |
||||
width: 100%; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue