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