118 lines
2.9 KiB
Vue
118 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { Icon } from '@iconify/vue';
|
|
|
|
const qr = defineModel<string | null>('qr');
|
|
|
|
defineProps<{
|
|
title?: string;
|
|
dense?: boolean;
|
|
outlined?: boolean;
|
|
readonly: boolean;
|
|
separator?: boolean;
|
|
}>();
|
|
|
|
defineEmits<{
|
|
(e: 'upload'): void;
|
|
}>();
|
|
</script>
|
|
<template>
|
|
<div class="row col-12">
|
|
<div class="col-12 q-pb-sm text-weight-bold text-body1">
|
|
<q-icon
|
|
flat
|
|
size="xs"
|
|
class="q-pa-sm rounded q-mr-xs"
|
|
color="info"
|
|
name="mdi-qrcode"
|
|
style="background-color: var(--surface-3)"
|
|
/>
|
|
{{ title }}
|
|
</div>
|
|
|
|
<div
|
|
:class="{
|
|
'dark-form-show-qr-code': $q.dark.isActive,
|
|
}"
|
|
class="col-12 row branch-form-show-qr-code"
|
|
>
|
|
<div class="col-12 column flex-center q-py-md">
|
|
<q-img
|
|
v-if="qr"
|
|
:src="qr as string"
|
|
style="width: 150px; height: 150px"
|
|
>
|
|
<template #error>
|
|
<div
|
|
style="background: none"
|
|
class="full-width full-height items-center justify-center flex"
|
|
>
|
|
<q-img src="/no-data.png" width="5rem" />
|
|
</div>
|
|
</template>
|
|
</q-img>
|
|
|
|
<q-btn
|
|
v-else
|
|
@click="$emit('upload')"
|
|
class="branch-form-btn-qr-code q-mb-md"
|
|
:class="{ 'dark-form-btn-qr-code': $q.dark.isActive }"
|
|
unelevated
|
|
:color="$q.dark.isActive ? 'black' : 'grey-2'"
|
|
:text-color="$q.dark.isActive ? 'white' : 'grey-5'"
|
|
>
|
|
<Icon icon="teenyicons:add-outline" width="30px" height="50px" />
|
|
</q-btn>
|
|
|
|
<q-btn
|
|
v-if="!readonly"
|
|
:text-color="$q.dark.isActive ? 'black' : 'white'"
|
|
style="
|
|
background: var(--blue-5);
|
|
color: var(--blue-0);
|
|
font-size: 12px;
|
|
"
|
|
unelevated
|
|
rounded
|
|
:label="$t('general.upload')"
|
|
@click="$emit('upload')"
|
|
id="btn-upload-qr-code"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.branch-form-show-qr-code {
|
|
--_bg-branch-form-show-qr-code: linear-gradient(
|
|
180deg,
|
|
var(--indigo-0),
|
|
var(--sand-0)
|
|
);
|
|
--_border-branch-form-show-qr-code: 2px dashed var(--gray-4);
|
|
border: var(--_border-branch-form-show-qr-code);
|
|
border-radius: 10px;
|
|
background-image: var(--_bg-branch-form-show-qr-code);
|
|
&.dark-form-show-qr-code {
|
|
background: var(--gray-9);
|
|
border-radius: 10px;
|
|
border: none;
|
|
}
|
|
}
|
|
.branch-form-btn-qr-code {
|
|
--_color-btn-qr-code: 3px solid var(--gray-4);
|
|
border: var(--_color-btn-qr-code);
|
|
border-radius: 6px;
|
|
&.dark-form-btn-qr-code {
|
|
border: none;
|
|
}
|
|
}
|
|
.branch-form-input-Contact {
|
|
--_bg-branch-form-input-Contact: var(--gray-1-hsl);
|
|
background: hsl(var(--_bg-branch-form-input-Contact));
|
|
&.dark-form-input-Contact {
|
|
--_bg-branch-form-input-Contact: var(--gray-10-hsl);
|
|
border: 2px solid var(--gray-9);
|
|
}
|
|
}
|
|
</style>
|