86 lines
2.2 KiB
Vue
86 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
const image = defineModel<string | null>('image');
|
|
|
|
defineProps<{
|
|
title?: string;
|
|
dense?: boolean;
|
|
outlined?: boolean;
|
|
readonly: boolean;
|
|
separator?: boolean;
|
|
}>();
|
|
|
|
defineEmits<{
|
|
(e: 'upload'): void;
|
|
}>();
|
|
</script>
|
|
<template>
|
|
<div class="col-md-3 col-12 app-text-muted">• {{ title }}</div>
|
|
<div
|
|
:class="{
|
|
'dark-form-show-img-qh': $q.dark.isActive,
|
|
'q-mt-lg': !$q.screen.xs,
|
|
'q-mt-sm': $q.screen.xs,
|
|
}"
|
|
class="col-md-9 col-12 row branch-form-show-img-hq"
|
|
style="min-height: 150px"
|
|
>
|
|
<div class="col-12 flex flex-center" v-if="image">
|
|
<q-img :src="image 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>
|
|
</div>
|
|
<div class="col-12 flex flex-center q-py-md" v-if="!readonly">
|
|
<q-btn
|
|
:text-color="$q.dark.isActive ? 'black' : 'white'"
|
|
style="background: var(--blue-5); color: var(--blue-0); font-size: 12px"
|
|
unelevated
|
|
rounded
|
|
:label="$t('formDialogBtnImg')"
|
|
@click="$emit('upload')"
|
|
id="btn-image-upload"
|
|
/>
|
|
</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-img-hq {
|
|
--_border-branch-form-show-img-hq: 2px solid var(--gray-4);
|
|
border: var(--_border-branch-form-show-img-hq);
|
|
border-radius: 10px;
|
|
background: var(--surface-3);
|
|
&.dark-form-show-img-qh {
|
|
background: var(--gray-9);
|
|
border-radius: 10px;
|
|
border: none;
|
|
}
|
|
}
|
|
.branch-form-btn-img-hq {
|
|
--_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>
|