quasar-ui-danx 0.3.22 → 0.3.24

package/package.json

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

package/src/components/Utility/Dialogs/FullscreenCarouselDialog.vue

@@ -30,7 +30,7 @@
                 controls
               >
                 <source
-                  :src="file.url + '#t=0.1'"
+                  :src="getPreviewUrl(file) + '#t=0.1'"
                   :type="file.mime"
                 >
               </video>
@@ -38,7 +38,7 @@
             <img
               v-else
               :alt="file.filename"
-              :src="file.url"
+              :src="getPreviewUrl(file)"
             >
           </div>
         </QCarouselSlide>
@@ -56,54 +56,59 @@ import { XIcon as CloseIcon } from "../../../svg";
 
 defineEmits(["close"]);
 const props = defineProps({
-  files: {
-    type: Array,
-    default: () => []
-  },
-  defaultSlide: {
-    type: String,
-    default: ""
-  }
+	files: {
+		type: Array,
+		default: () => []
+	},
+	defaultSlide: {
+		type: String,
+		default: ""
+	}
 });
 
 const carousel = ref(null);
 const currentSlide = ref(props.defaultSlide);
 function isVideo(file) {
-  return file.mime?.startsWith("video");
+	return file.mime?.startsWith("video");
 }
+
+function getPreviewUrl(file) {
+	return file.transcodes?.compress?.url || file.blobUrl || file.url;
+}
+
 function getThumbUrl(file) {
-  if (file.thumb) {
-    return file.thumb.url;
-  } else if (isVideo(file)) {
-    // Base64 encode a PlayIcon for the placeholder image
-    return `data:image/svg+xml;base64,${btoa(
-      `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M0 0h24v24H0z" fill="none"/><path d="M8 5v14l11-7z"/></svg>`
-    )}`;
-  } else {
-    return file.url;
-  }
+	if (file.thumb) {
+		return file.thumb.url;
+	} else if (isVideo(file)) {
+		// Base64 encode a PlayIcon for the placeholder image
+		return `data:image/svg+xml;base64,${btoa(
+			`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M0 0h24v24H0z" fill="none"/><path d="M8 5v14l11-7z"/></svg>`
+		)}`;
+	} else {
+		return getPreviewUrl(file);
+	}
 }
 </script>
 <style module="cls" lang="scss">
 .slide-image {
-  width: 100%;
-  height: 100%;
-  background: black;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+	width: 100%;
+	height: 100%;
+	background: black;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 
-  img {
-    max-height: 100%;
-    max-width: 100%;
-    object-fit: contain;
-  }
+	img {
+		max-height: 100%;
+		max-width: 100%;
+		object-fit: contain;
+	}
 }
 
 .carousel {
-  :deep(.q-carousel__navigation--bottom) {
-    position: relative;
-    bottom: 8em;
-  }
+	:deep(.q-carousel__navigation--bottom) {
+		position: relative;
+		bottom: 8em;
+	}
 }
 </style>

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

@@ -27,7 +27,7 @@
         </div>
         <QImg
           v-if="thumbUrl || isPreviewable"
-          fit="scale-down"
+          fit="fill"
           class="non-selectable max-h-full max-w-full h-full"
           :src="(thumbUrl || previewUrl) + '#t=0.1'"
           preload="auto"
@@ -122,91 +122,91 @@ import { FullScreenCarouselDialog } from "../Dialogs";
 
 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
+	},
+	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 mimeType = computed(
-  () => computedImage.value.type || computedImage.value.mime
+	() => computedImage.value?.type || computedImage.value?.mime || ""
 );
-const isImage = computed(() => mimeType.value.match(/^image\//));
-const isVideo = computed(() => mimeType.value.match(/^video\//));
-const isPdf = computed(() => mimeType.value.match(/^application\/pdf/));
+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(
-  () => computedImage.value.transcodes?.compress?.url || computedImage.value.blobUrl || computedImage.value.url
+	() => computedImage.value?.transcodes?.compress?.url || computedImage.value?.blobUrl || computedImage.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 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>