101 lines
2.7 KiB
Vue
101 lines
2.7 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="col-3 app-text-muted">• {{ title }}</div>
|
|
<div
|
|
:class="{ 'dark-form-show-qr-code': $q.dark.isActive }"
|
|
class="col-9 row q-mt-lg branch-form-show-qr-code"
|
|
>
|
|
<div class="col-12 flex flex-center">
|
|
<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
|
|
@click="$emit('upload')"
|
|
class="branch-form-btn-qr-code"
|
|
:class="{ 'dark-form-btn-qr-code': $q.dark.isActive }"
|
|
v-else
|
|
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>
|
|
</div>
|
|
<div class="col-12 flex flex-center q-py-md">
|
|
<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('formDialogUploadQrCode')"
|
|
@click="$emit('upload')"
|
|
id="btn-upload-qr-code"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<q-separator
|
|
v-if="separator"
|
|
class="col-12 q-mt-xl q-mb-md"
|
|
style="padding-block: 0.5px"
|
|
/>
|
|
</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>
|