refactor: add new components
This commit is contained in:
Net
parent
6279925564
commit
1f8d7fd761
2 changed files with 368 additions and 0 deletions
136
src/components/ImageHover.vue
Normal file
136
src/components/ImageHover.vue
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
img?: string | null;
|
||||
icon?: string;
|
||||
title?: string;
|
||||
caption?: string;
|
||||
color?: string;
|
||||
bgColor?: string;
|
||||
toggleTitle?: string;
|
||||
fallbackImg?: string;
|
||||
fallbackCover?: string;
|
||||
|
||||
hideFade?: boolean;
|
||||
hideActive?: boolean;
|
||||
active?: boolean;
|
||||
readonly?: boolean;
|
||||
useToggle?: boolean;
|
||||
labelAction?: string;
|
||||
|
||||
menu?: { icon: string; color: string; bgColor: string }[];
|
||||
tabsList?: { name: string | number; label: string }[];
|
||||
}>(),
|
||||
{},
|
||||
);
|
||||
const showOverlay = ref(false);
|
||||
|
||||
defineEmits<{
|
||||
(e: 'view'): void;
|
||||
(e: 'edit'): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="surface-1" style="border: 4px solid var(--surface-1)">
|
||||
<q-avatar
|
||||
square
|
||||
size="10rem"
|
||||
font-size="8rem"
|
||||
class="relative-position"
|
||||
style="z-index: 1; cursor: pointer"
|
||||
@mouseover="showOverlay = true"
|
||||
@mouseleave="showOverlay = false"
|
||||
@click.stop="$emit('view')"
|
||||
>
|
||||
<div
|
||||
v-if="img"
|
||||
class="full-width full-height"
|
||||
:style="{
|
||||
background: `${bgColor || 'var(--brand-1)'}`,
|
||||
color: `${color || 'white'}`,
|
||||
}"
|
||||
>
|
||||
<q-img id="profile-view" :src="img" :ratio="1">
|
||||
<template #error>
|
||||
<q-img
|
||||
v-if="fallbackImg"
|
||||
:src="fallbackImg"
|
||||
:ratio="1"
|
||||
style="background-color: transparent"
|
||||
>
|
||||
<template #error>
|
||||
<div
|
||||
class="full-width full-height flex items-center justify-center"
|
||||
:style="{
|
||||
background: `${bgColor || 'var(--brand-1)'}`,
|
||||
color: `${color || 'white'}`,
|
||||
}"
|
||||
>
|
||||
<q-icon :name="icon || 'mdi-account'" />
|
||||
</div>
|
||||
</template>
|
||||
</q-img>
|
||||
<div
|
||||
v-else
|
||||
class="full-width full-height flex items-center justify-center"
|
||||
:style="{
|
||||
background: `${bgColor || 'var(--brand-1)'}`,
|
||||
color: `${color || 'white'}`,
|
||||
}"
|
||||
>
|
||||
<q-icon :name="icon || 'mdi-account'" />
|
||||
</div>
|
||||
</template>
|
||||
</q-img>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="full-width full-height flex items-center justify-center"
|
||||
:style="{
|
||||
background: `${bgColor || 'var(--brand-1)'}`,
|
||||
color: `${color || 'white'}`,
|
||||
}"
|
||||
>
|
||||
<q-icon :name="icon || 'mdi-account'" />
|
||||
</div>
|
||||
|
||||
<Transition name="slide-fade">
|
||||
<div
|
||||
v-if="showOverlay && !readonly"
|
||||
class="absolute text-caption full-width full-height"
|
||||
style="overflow: hidden"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
>
|
||||
<div
|
||||
class="upload-overlay absolute-bottom flex items-center justify-center"
|
||||
@click.stop="$emit('edit')"
|
||||
>
|
||||
{{
|
||||
labelAction === undefined
|
||||
? $t('general.editImage')
|
||||
: labelAction
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</q-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.upload-overlay {
|
||||
top: 60%;
|
||||
background-color: hsla(var(--gray-10-hsl) / 0.5);
|
||||
color: white;
|
||||
|
||||
&.dark {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
232
src/components/QrCodeUploadDialog.vue
Normal file
232
src/components/QrCodeUploadDialog.vue
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
<script lang="ts" setup>
|
||||
import AppBox from './app/AppBox.vue';
|
||||
import { CancelButton, ClearButton, SaveButton } from './button';
|
||||
|
||||
defineExpose({ browse });
|
||||
defineProps<{
|
||||
changeDisabled?: boolean;
|
||||
clearButtonDisabled?: boolean;
|
||||
clearButton?: boolean;
|
||||
hiddenFooter?: boolean;
|
||||
defaultUrl?: string;
|
||||
}>();
|
||||
const emit = defineEmits<{
|
||||
(e: 'save', file: File | null, url: string | null): void;
|
||||
(e: 'clear'): void;
|
||||
}>();
|
||||
|
||||
const imageUrl = defineModel<string>('imageUrl', {
|
||||
required: false,
|
||||
default: '',
|
||||
});
|
||||
const fallbackUrl = defineModel<string>('fallbackUrl', {
|
||||
required: false,
|
||||
default: '',
|
||||
});
|
||||
const dialogState = defineModel<boolean>('dialogState', {
|
||||
required: false,
|
||||
default: true,
|
||||
});
|
||||
const file = defineModel<File | null>('file', {
|
||||
required: true,
|
||||
});
|
||||
|
||||
const reader = new FileReader();
|
||||
const inputFile = (() => {
|
||||
const _element = document.createElement('input');
|
||||
_element.type = 'file';
|
||||
_element.accept = 'image/*';
|
||||
_element.addEventListener('change', change);
|
||||
return _element;
|
||||
})();
|
||||
|
||||
reader.addEventListener('load', () => {
|
||||
if (typeof reader.result === 'string') imageUrl.value = reader.result;
|
||||
});
|
||||
|
||||
function browse() {
|
||||
inputFile?.click();
|
||||
}
|
||||
|
||||
function change(e: Event) {
|
||||
const _element = e.target as HTMLInputElement | null;
|
||||
const _file = _element?.files?.[0];
|
||||
|
||||
if (_file) {
|
||||
file.value = _file;
|
||||
reader.readAsDataURL(_file);
|
||||
if (!dialogState.value) {
|
||||
emit('save', _file, imageUrl.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function downloadImage(url: string) {
|
||||
const res = await fetch(url);
|
||||
const blob = await res.blob();
|
||||
|
||||
let extension = '';
|
||||
|
||||
if (blob.type === 'image/jpeg') extension = '.jpg';
|
||||
else if (blob.type === 'image/png') extension = '.png';
|
||||
else return;
|
||||
|
||||
let a = document.createElement('a');
|
||||
a.download = `download${extension}`;
|
||||
a.href = window.URL.createObjectURL(blob);
|
||||
a.click();
|
||||
a.remove();
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="dialogState">
|
||||
<AppBox class="image-dialog-content">
|
||||
<div class="row items-center q-py-sm q-px-md bordered-b">
|
||||
<div style="flex: 1"><slot name="title" /></div>
|
||||
<div>
|
||||
<q-btn
|
||||
round
|
||||
flat
|
||||
icon="mdi-close"
|
||||
padding="xs"
|
||||
class="close-btn"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
v-close-popup
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-dialog-body">
|
||||
<img
|
||||
:src="imageUrl || fallbackUrl"
|
||||
v-if="imageUrl || fallbackUrl"
|
||||
class="image-container"
|
||||
style="object-fit: contain"
|
||||
@error="imageUrl = ''"
|
||||
/>
|
||||
<div class="image-container" v-if="!imageUrl && !fallbackUrl">
|
||||
<slot name="error"></slot>
|
||||
</div>
|
||||
<div style="position: fixed; padding: var(--size-2)">
|
||||
<q-btn
|
||||
class="upload-image-btn q-mr-md"
|
||||
icon="mdi-camera-outline"
|
||||
size="md"
|
||||
unelevated
|
||||
round
|
||||
v-if="!changeDisabled"
|
||||
@click="inputFile?.click()"
|
||||
style="color: hsla(var(--stone-0-hsl) / 0.7)"
|
||||
></q-btn>
|
||||
<q-btn
|
||||
class="upload-image-btn"
|
||||
icon="mdi-download-outline"
|
||||
size="md"
|
||||
unelevated
|
||||
round
|
||||
@click="downloadImage(imageUrl)"
|
||||
style="color: hsla(var(--stone-0-hsl) / 0.7)"
|
||||
></q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row items-center justify-end q-py-sm q-px-md bordered-t"
|
||||
v-if="!hiddenFooter"
|
||||
>
|
||||
<ClearButton
|
||||
outlined
|
||||
@click="
|
||||
inputFile && (inputFile.value = ''),
|
||||
(imageUrl = defaultUrl || fallbackUrl || ''),
|
||||
(file = null),
|
||||
$emit('clear')
|
||||
"
|
||||
class="q-px-md q-mr-auto"
|
||||
:disabled="
|
||||
clearButtonDisabled ||
|
||||
imageUrl === fallbackUrl ||
|
||||
imageUrl === defaultUrl ||
|
||||
!imageUrl
|
||||
"
|
||||
v-if="clearButton"
|
||||
/>
|
||||
<CancelButton
|
||||
outlined
|
||||
class="q-px-md q-mr-sm"
|
||||
@click="
|
||||
inputFile && (inputFile.value = ''),
|
||||
(imageUrl = defaultUrl || fallbackUrl || ''),
|
||||
(file = null)
|
||||
"
|
||||
v-close-popup
|
||||
/>
|
||||
<SaveButton
|
||||
outlined
|
||||
@click="$emit('save', inputFile?.files?.[0] || null, imageUrl)"
|
||||
/>
|
||||
</div>
|
||||
</AppBox>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.image-dialog-content {
|
||||
padding: 0;
|
||||
border-radius: var(--radius-2);
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.image-dialog-content {
|
||||
max-width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.image-dialog-body {
|
||||
overflow-y: auto;
|
||||
background-color: var(--surface-2) !important;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
height: calc(100vh - 200px);
|
||||
}
|
||||
|
||||
.upload-image-btn {
|
||||
transition: 0.3s background-color ease-in-out;
|
||||
background-color: hsla(0 0% 0% / 0.2);
|
||||
|
||||
backdrop-filter: blur(1px);
|
||||
|
||||
&:not(:hover) {
|
||||
color: hsla(0 0% 40% / 1);
|
||||
background-color: hsla(0 0% 0% / 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 200px);
|
||||
min-height: 480px;
|
||||
|
||||
& > :deep(*) {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.image-container > :deep(*:not(:first-child)) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
color: hsl(var(--negative-bg));
|
||||
background-color: hsla(var(--negative-bg) / 0.1);
|
||||
|
||||
&.dark {
|
||||
background-color: transparent;
|
||||
border: 1px solid hsl(var(--negative-bg));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue