quasar-ui-danx 0.4.7 → 0.4.8

package/package.json

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

package/src/components/ActionTable/Form/Fields/FieldLabel.vue

@@ -12,8 +12,8 @@
 </template>
 
 <script setup lang="ts">
-import { FormField } from "src/types";
 import { computed } from "vue";
+import { FormField } from "../../../../types";
 
 const props = defineProps<{
 	field?: FormField;

package/src/components/ActionTable/Form/Fields/MultiFileField.vue

@@ -26,9 +26,8 @@
         v-for="file in uploadedFiles"
         :key="'file-upload-' + file.id"
         class="w-32 h-32 m-2 cursor-pointer bg-gray-200"
-        :class="{'border border-dashed border-blue-600': !uploadedFiles.length}"
         :file="file"
-        :related-files="uploadedFiles"
+        :related-files="file.transcodes || uploadedFiles"
         downloadable
         :removable="!readonly && !disable"
         @remove="onRemove(file)"

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

@@ -74,7 +74,7 @@ function isVideo(file) {
 }
 
 function getPreviewUrl(file) {
-	return file.transcodes?.compress?.url || file.blobUrl || file.url;
+	return file.optimized?.url || file.blobUrl || file.url;
 }
 
 function getThumbUrl(file) {

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

@@ -107,7 +107,7 @@
     <FullScreenCarouselDialog
       v-if="showPreview && !disabled"
       :files="relatedFiles || [computedImage]"
-      :default-slide="computedImage?.id || ''"
+      :default-slide="relatedFiles ? relatedFiles[0].id : (computedImage?.id || '')"
       @close="showPreview = false"
     />
   </div>
@@ -115,10 +115,10 @@
 
 <script setup lang="ts">
 import { DocumentTextIcon as TextFileIcon, DownloadIcon, PlayIcon } from "@heroicons/vue/outline";
-import { UploadedFile } from "src/types";
 import { computed, ComputedRef, ref } from "vue";
 import { download } from "../../../helpers";
 import { ImageIcon, PdfIcon, TrashIcon as RemoveIcon } from "../../../svg";
+import { UploadedFile } from "../../../types";
 import { FullScreenCarouselDialog } from "../Dialogs";
 
 export interface FilePreviewProps {
@@ -171,10 +171,10 @@ 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?.optimized?.url || computedImage.value?.blobUrl || computedImage.value?.url
 );
 const thumbUrl = computed(() => {
-	return computedImage.value?.transcodes?.thumb?.url;
+	return computedImage.value?.thumb?.url;
 });
 const isPreviewable = computed(() => {
 	return !!thumbUrl.value || isVideo.value || isImage.value;

package/src/styles/themes/danx/carousels.scss

@@ -0,0 +1,5 @@
+.q-carousel {
+	.q-carousel__thumbnail--active {
+		@apply outline-1 outline-sky-800;
+	}
+}

package/src/styles/themes/danx/index.scss

@@ -1,5 +1,6 @@
 @import "action-table";
 @import "buttons";
+@import "carousels";
 @import "dialogs";
 @import "forms";
 @import "panels";

package/src/types/files.d.ts

@@ -24,6 +24,9 @@ export interface UploadedFile {
 	location?: string;
 	blobUrl?: string;
 	url?: string;
+	thumb?: UploadedFile;
+	optimized?: UploadedFile;
+	transcodes?: UploadedFile[];
 }
 
 export interface FileUploadCompleteCallbackParams {

package/src/types/requests.d.ts

@@ -1,4 +1,4 @@
-import { AnyObject } from "src/types/shared";
+import { AnyObject } from "./shared";
 
 export interface RequestApi {
 	abortControllers: { [key: string]: { abort: AbortController, timestamp: number } };