quasar-ui-danx 0.4.7 → 0.4.9

package/package.json

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

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

@@ -1,19 +1,19 @@
 <template>
-  <span>
+  <span class="dx-field-label">
     <slot>
       {{ labelText }}
       <template v-if="showName">({{ field?.name }})</template>
     </slot>
     <span
       v-if="requiredLabel"
-      class="text-red-900 ml-1 text-xs bottom-1 relative"
+      class="dx-field-required"
     >{{ requiredLabel }}</span>
   </span>
 </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

@@ -9,7 +9,6 @@
       :field="field"
       :label="label"
       :show-name="showName"
-      class="text-sm font-semibold"
     />
 
     <input
@@ -26,9 +25,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/ActionTable/Form/Fields/SelectField.vue

@@ -3,7 +3,6 @@
     <FieldLabel
       v-if="label"
       :label="label"
-      class="mb-1 block"
     />
     <QSelect
       ref="selectField"

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

@@ -6,7 +6,6 @@
       :show-name="showName"
       :class="labelClass"
       :value="readonly ? modelValue : ''"
-      class="mb-1 block"
     />
     <template v-if="!readonly">
       <QInput

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

@@ -4,7 +4,6 @@
       v-if="!noLabel"
       :field="field"
       :show-name="showName"
-      class="text-sm font-semibold text-gray-700 block mb-2"
     />
     <template v-if="readonly">
       <div
@@ -30,17 +29,17 @@ import FieldLabel from "./FieldLabel";
 
 defineEmits(["update:model-value"]);
 defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: null
-  },
-  field: {
-    type: Object,
-    required: true
-  },
-  noLabel: Boolean,
-  showName: Boolean,
-  disable: Boolean,
-  readonly: Boolean
+	modelValue: {
+		type: [String, Number],
+		default: null
+	},
+	field: {
+		type: Object,
+		required: true
+	},
+	noLabel: Boolean,
+	showName: Boolean,
+	disable: Boolean,
+	readonly: Boolean
 });
 </script>

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/quasar-reset.scss

@@ -50,13 +50,14 @@
 
 			&.q-textarea {
 				.q-field__control-container {
-					padding-bottom: 1.1rem;
+					padding: .5rem 0;
 				}
 			}
 		}
 
 		.q-field__marginal, .q-field__input, .q-field__label {
 			color: inherit;
+			height: auto;
 		}
 	}
 }

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/forms.scss

@@ -1,3 +1,11 @@
+.dx-field-label {
+	@apply text-xs block mb-1.5;
+
+	.dx-field-required {
+		@apply text-red-900 ml-0.5 bottom-1 relative;
+	}
+}
+
 .q-field {
 	.q-field__label {
 		@apply text-sm text-gray-700;

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 } };