github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-26 09:08:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Move file display to script[setup] (#18292)

Browse Source
This commit is contained in:
Rijk van Zanten
2023-04-21 16:05:41 -04:00
committed by GitHub
parent e0d9e17291
commit e2301eddf3
1 changed files with 22 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
app/src/displays/file/file.vue
View File

@@ -3,7 +3,7 @@
v-if="imageThumbnail && !imgError"
:src="imageThumbnail"
:class="{ 'is-svg': value && value.type?.includes('svg') }"
:alt="value.title"
:alt="value?.title"
@error="imgError = true"
/>
<div v-else ref="previewEl" class="preview">
@@ -15,10 +15,9 @@
</div>
</template>
<script lang="ts">
import { defineComponent, PropType, computed, ref } from 'vue';
<script lang="ts" setup>
import { readableMimeType } from '@/utils/readable-mime-type';
import { useElementSize } from '@directus/composables';
import { computed, ref } from 'vue';
type File = {
id: string;
@@ -26,33 +25,28 @@ type File = {
title: string;
};
export default defineComponent({
props: {
value: {
type: Object as PropType<File>,
default: null,
},
},
setup(props) {
const previewEl = ref<Element>();
const imgError = ref(false);
const props = withDefaults(
defineProps<{
value: File | null;
}>(),
{
value: null,
}
);
const fileExtension = computed(() => {
if (!props.value) return null;
return readableMimeType(props.value.type, true);
});
const previewEl = ref<Element>();
const imgError = ref(false);
const imageThumbnail = computed(() => {
if (!props.value) return null;
if (props.value.type?.includes('svg')) return '/assets/' + props.value.id;
if (props.value.type?.includes('image') === false) return null;
return `/assets/${props.value.id}?key=system-small-cover`;
});
const fileExtension = computed(() => {
if (!props.value) return null;
return readableMimeType(props.value.type, true);
});
const { height } = useElementSize(previewEl);
return { fileExtension, imageThumbnail, previewEl, height, imgError };
},
const imageThumbnail = computed(() => {
if (!props.value) return null;
if (props.value.type?.includes('svg')) return '/assets/' + props.value.id;
if (props.value.type?.includes('image') === false) return null;
return `/assets/${props.value.id}?key=system-small-cover`;
});
</script>