Browse Source

fix: qr alignment

pull/6416/head
DarkPhoenix2704 1 year ago
parent
commit
e4d7f95fe9
  1. 7
      packages/nc-gui/components/virtual-cell/QrCode.vue
  2. 16
      packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue

7
packages/nc-gui/components/virtual-cell/QrCode.vue

@ -1,12 +1,14 @@
<script setup lang="ts">
import { useQRCode } from '@vueuse/integrations/useQRCode'
import type QRCode from 'qrcode'
import { RowHeightInj, computed, inject, ref } from '#imports'
import { IsGalleryInj, RowHeightInj, computed, inject, ref } from '#imports'
const maxNumberOfAllowedCharsForQrValue = 2000
const cellValue = inject(CellValueInj)
const isGallery = inject(IsGalleryInj, ref(false))
const qrValue = computed(() => String(cellValue?.value))
const tooManyCharsForQrCode = computed(() => qrValue?.value.length > maxNumberOfAllowedCharsForQrValue)
@ -36,6 +38,7 @@ const qrCodeLarge = useQRCode(qrValue, {
const modalVisible = ref(false)
const showQrModal = (ev: MouseEvent) => {
if (isGallery.value) return
ev.stopPropagation()
modalVisible.value = true
}
@ -65,7 +68,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
</div>
<img
v-if="showQrCode && rowHeight"
class="mx-auto"
:class="{ 'mx-auto': !isGallery }"
:style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem` }"
:src="qrCode"
alt="QR Code"

16
packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue

@ -1,6 +1,6 @@
<script lang="ts" setup>
import JsBarcode from 'jsbarcode'
import { onMounted } from '#imports'
import { IsGalleryInj, onMounted } from '#imports'
const props = defineProps({
barcodeValue: { type: String, required: true },
@ -10,6 +10,8 @@ const props = defineProps({
const emit = defineEmits(['onClickBarcode'])
const isGallery = inject(IsGalleryInj, ref(false))
const barcodeSvgRef = ref<HTMLElement>()
const errorForCurrentInput = ref(false)
@ -33,6 +35,7 @@ const generate = () => {
}
const onBarcodeClick = (ev: MouseEvent) => {
if (isGallery.value) return
ev.stopPropagation()
emit('onClickBarcode')
}
@ -42,6 +45,15 @@ onMounted(generate)
</script>
<template>
<svg v-show="!errorForCurrentInput" ref="barcodeSvgRef" class="w-full" data-testid="barcode" @click="onBarcodeClick"></svg>
<svg
v-show="!errorForCurrentInput"
ref="barcodeSvgRef"
:class="{
'w-full': !isGallery,
'w-auto': isGallery,
}"
data-testid="barcode"
@click="onBarcodeClick"
></svg>
<slot v-if="errorForCurrentInput" name="barcodeRenderError" />
</template>

Loading…
Cancel
Save