quasar-ui-danx 0.3.52 → 0.3.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.3.52",
+  "version": "0.3.55",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",

package/src/components/Utility/Files/FilePreview.vue

@@ -31,7 +31,7 @@
           </div>
           <QImg
             v-if="thumbUrl || isPreviewable"
-            fit="fill"
+            :fit="imageFit"
             class="non-selectable max-h-full max-w-full h-full"
             :src="(thumbUrl || previewUrl) + '#t=0.1'"
             preload="auto"
@@ -81,11 +81,11 @@
 
     <div class="absolute top-1 right-1 flex items-center justify-between space-x-1">
       <QBtn
-        v-if="downloadable && computedImage?.url"
+        v-if="downloadable && downloadUrl"
         size="sm"
         class="!p-1 opacity-70 hover:opacity-100"
         :class="downloadButtonClass"
-        @click.stop="download(computedImage.url)"
+        @click.stop="download(downloadUrl)"
       >
         <DownloadIcon class="w-4 h-5" />
       </QBtn>
@@ -123,105 +123,112 @@
 </template>
 
 <script setup>
-import { DocumentTextIcon as TextFileIcon, DownloadIcon, PlayIcon } from "@heroicons/vue/outline";
-import { computed, ref } from "vue";
-import { download } from "../../../helpers";
-import { ImageIcon, PdfIcon, TrashIcon as RemoveIcon } from "../../../svg";
-import { FullScreenCarouselDialog } from "../Dialogs";
+import { DocumentTextIcon as TextFileIcon, DownloadIcon, PlayIcon } from '@heroicons/vue/outline';
+import { computed, ref } from 'vue';
+import { download } from '../../../helpers';
+import { ImageIcon, PdfIcon, TrashIcon as RemoveIcon } from '../../../svg';
+import { FullScreenCarouselDialog } from '../Dialogs';
 
-const emit = defineEmits(["remove"]);
+const emit = defineEmits(['remove']);
 const props = defineProps({
-	src: {
-		type: String,
-		default: ""
-	},
-	image: {
-		type: Object,
-		default: null
-	},
-	relatedFiles: {
-		type: Array,
-		default: null
-	},
-	missingIcon: {
-		type: [Function, Object],
-		default: ImageIcon
-	},
-	downloadButtonClass: {
-		type: String,
-		default: "bg-blue-600 text-white"
-	},
-	downloadable: Boolean,
-	removable: Boolean,
-	disabled: Boolean,
-	square: Boolean
+  src: {
+    type: String,
+    default: ''
+  },
+  image: {
+    type: Object,
+    default: null
+  },
+  imageFit: {
+    type: String,
+    default: 'fill'
+  },
+  relatedFiles: {
+    type: Array,
+    default: null
+  },
+  missingIcon: {
+    type: [Function, Object],
+    default: ImageIcon
+  },
+  downloadButtonClass: {
+    type: String,
+    default: 'bg-blue-600 text-white'
+  },
+  downloadable: Boolean,
+  removable: Boolean,
+  disabled: Boolean,
+  square: Boolean
 });
 
 const showPreview = ref(false);
 const computedImage = computed(() => {
-	if (props.image) {
-		return props.image;
-	} else if (props.src) {
-		return {
-			id: props.src,
-			url: props.src,
-			type: "image/" + props.src.split(".").pop().toLowerCase()
-		};
-	}
-	return null;
+  if (props.image) {
+    return props.image;
+  } else if (props.src) {
+    return {
+      id: props.src,
+      url: props.src,
+      type: 'image/' + props.src.split('.').pop().toLowerCase()
+    };
+  }
+  return null;
 });
 const previewFile = computed(() => {
-	const transcodes = computedImage.value?.transcodes;
-	return transcodes?.mp4 || transcodes?.compress || computedImage.value;
+  const transcodes = computedImage.value?.transcodes;
+  return transcodes?.mp4 || transcodes?.compress || computedImage.value;
 });
 
 const mimeType = computed(
-	() => previewFile.value?.type || previewFile.value?.mime || (computedImage.value?.transcodes?.mp4 ? "video/mp4" : "")
+  () => previewFile.value?.type || previewFile.value?.mime || (computedImage.value?.transcodes?.mp4 ? 'video/mp4' : '')
 );
 const isImage = computed(() => !!mimeType.value.match(/^image\//));
 const isVideo = computed(() => !!mimeType.value.match(/^video\//));
 const isPdf = computed(() => !!mimeType.value.match(/^application\/pdf/));
 
 const previewUrl = computed(() => {
-	return previewFile.value?.blobUrl || previewFile.value?.url;
+  return previewFile.value?.blobUrl || previewFile.value?.url;
 });
 const thumbUrl = computed(() => {
-	return computedImage.value?.transcodes?.thumb?.url;
+  return computedImage.value?.transcodes?.thumb?.url;
 });
 const isPreviewable = computed(() => {
-	return !!thumbUrl.value || isVideo.value || isImage.value;
+  return !!thumbUrl.value || isVideo.value || isImage.value;
+});
+const downloadUrl = computed(() => {
+  return computedImage.value?.original?.url || computedImage.value?.url;
 });
 const isConfirmingRemove = ref(false);
 function onRemove() {
-	if (!isConfirmingRemove.value) {
-		isConfirmingRemove.value = true;
-		setTimeout(() => {
-			isConfirmingRemove.value = false;
-		}, 2000);
-	} else {
-		emit("remove");
-	}
+  if (!isConfirmingRemove.value) {
+    isConfirmingRemove.value = true;
+    setTimeout(() => {
+      isConfirmingRemove.value = false;
+    }, 2000);
+  } else {
+    emit('remove');
+  }
 }
 </script>
 
 <style module="cls" lang="scss">
 .action-button {
-	position: absolute;
-	bottom: 1.5em;
-	right: 1em;
-	z-index: 1;
+  position: absolute;
+  bottom: 1.5em;
+  right: 1em;
+  z-index: 1;
 }
 
 .play-button {
-	position: absolute;
-	top: 0;
-	left: 0;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-	height: 100%;
-	pointer-events: none;
-	@apply text-blue-200;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  @apply text-blue-200;
 }
 </style>