|
|
@ -1,8 +1,12 @@ |
|
|
|
<script setup lang="ts"> |
|
|
|
<script setup lang="ts"> |
|
|
|
import { useQRCode } from '@vueuse/integrations/useQRCode' |
|
|
|
import { useQRCode } from '@vueuse/integrations/useQRCode' |
|
|
|
|
|
|
|
import { GridType } from 'nocodb-sdk' |
|
|
|
|
|
|
|
import { ActiveViewInj } from '#imports' |
|
|
|
|
|
|
|
|
|
|
|
const maxNumberOfAllowedCharsForQrValue = 2000 |
|
|
|
const maxNumberOfAllowedCharsForQrValue = 2000 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const view = inject(ActiveViewInj, ref()) |
|
|
|
|
|
|
|
|
|
|
|
const cellValue = inject(CellValueInj) |
|
|
|
const cellValue = inject(CellValueInj) |
|
|
|
|
|
|
|
|
|
|
|
const qrValue = computed(() => String(cellValue?.value)) |
|
|
|
const qrValue = computed(() => String(cellValue?.value)) |
|
|
@ -11,6 +15,21 @@ const tooManyCharsForQrCode = computed(() => qrValue?.value.length > maxNumberOf |
|
|
|
|
|
|
|
|
|
|
|
const showQrCode = computed(() => qrValue?.value?.length > 0 && !tooManyCharsForQrCode.value) |
|
|
|
const showQrCode = computed(() => qrValue?.value?.length > 0 && !tooManyCharsForQrCode.value) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const rowHeight = computed(() => { |
|
|
|
|
|
|
|
if ((view.value?.view as GridType)?.row_height !== undefined) { |
|
|
|
|
|
|
|
switch ((view.value?.view as GridType)?.row_height) { |
|
|
|
|
|
|
|
case 0: |
|
|
|
|
|
|
|
return 1 |
|
|
|
|
|
|
|
case 1: |
|
|
|
|
|
|
|
return 2 |
|
|
|
|
|
|
|
case 2: |
|
|
|
|
|
|
|
return 4 |
|
|
|
|
|
|
|
case 3: |
|
|
|
|
|
|
|
return 6 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const qrCode = useQRCode(qrValue, { |
|
|
|
const qrCode = useQRCode(qrValue, { |
|
|
|
width: 150, |
|
|
|
width: 150, |
|
|
|
}) |
|
|
|
}) |
|
|
@ -47,7 +66,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us |
|
|
|
<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.qrCodeValueTooLong') }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<img v-if="showQrCode" :src="qrCode" alt="QR Code" @click="showQrModal" /> |
|
|
|
<img v-if="showQrCode" class="mx-auto" :style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem` }" :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') }} |
|
|
|
{{ $t('msg.warning.nonEditableFields.computedFieldUnableToClear') }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|