First steps of license store system

This commit is contained in:
2024-11-23 17:45:14 +01:00
parent 628c1f97c0
commit f7cdaacceb
11 changed files with 133 additions and 51 deletions

View File

@@ -1,5 +1,8 @@
<script setup lang="ts">
defineProps({
import { loadLicense } from '@/scripts/imageScripts';
import { ref, watch } from 'vue';
const props = defineProps({
image: String,
errorImage: {
type: String,
@@ -16,61 +19,78 @@ defineProps({
},
loading: Boolean
})
const license = ref("")
loadLicense(props.image)
.then(result => {
console.log(result)
license.value = result
})
</script>
<template>
<v-card
variant="tonal"
:link="link"
<v-tooltip
:text="license"
location="top"
open-delay="200"
>
<v-skeleton-loader
:loading="loading"
type="image"
height="150"
>
<v-img
:src="image"
aspect-ratio="1"
max-height="200"
cover
<template #activator="{ props }">
<v-card
variant="tonal"
:link="link"
v-bind="props"
>
<template #error>
<v-skeleton-loader
:loading="loading"
type="image"
height="150"
>
<v-img
:src="'http://localhost:3000/static/' + errorImage"
:src="image"
aspect-ratio="1"
style="background-color: aliceblue;"
/>
</template>
</v-img>
</v-skeleton-loader>
max-height="200"
cover
>
<template #error>
<v-img
:src="'http://localhost:3000/static/' + errorImage"
aspect-ratio="1"
style="background-color: aliceblue;"
/>
</template>
</v-img>
</v-skeleton-loader>
<v-skeleton-loader
:loading="loading"
type="heading"
>
<div v-if="title">
<v-card-title v-if="!smallerTitle">
{{ title }}
</v-card-title>
<v-skeleton-loader
:loading="loading"
type="heading"
>
<div v-if="title">
<v-card-title v-if="!smallerTitle">
{{ title }}
</v-card-title>
<v-card-title v-else style="font-size: medium">
{{ title }}
</v-card-title>
</div>
</v-skeleton-loader>
<v-card-title v-else style="font-size: medium">
{{ title }}
</v-card-title>
</div>
</v-skeleton-loader>
<v-skeleton-loader
type="sentences"
:loading="loading"
>
<div class="px-4 pb-4 text-disabled" v-if="$slots.default">
<slot></slot>
</div>
</v-skeleton-loader>
<v-skeleton-loader
type="sentences"
:loading="loading"
>
<div class="px-4 pb-4 text-disabled" v-if="$slots.default">
<slot></slot>
</div>
</v-skeleton-loader>
<v-card-actions v-if="$slots.actions" class="card-actions position-absolute bottom-0 right-0">
<v-spacer />
<slot name="actions"></slot>
</v-card-actions>
</v-card>
<v-card-actions v-if="$slots.actions" class="card-actions position-absolute bottom-0 right-0">
<v-spacer />
<slot name="actions"></slot>
</v-card-actions>
</v-card>
</template>
</v-tooltip>
</template>