quasar-ui-danx 0.3.48 → 0.3.50

package/package.json

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

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

@@ -37,17 +37,25 @@
       <FilePreview
         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}"
+        class="cursor-pointer bg-gray-200"
+        :class="{'border border-dashed border-blue-600': !uploadedFiles.length, [fileClass]: true}"
         :image="file"
         :related-files="uploadedFiles"
         downloadable
         :removable="!readonly && !disable"
         @remove="onRemove(file)"
-      />
+      >
+        <template #below>
+          <slot
+            name="below-file"
+            :file="file"
+          />
+        </template>
+      </FilePreview>
       <FilePreview
         v-if="!disable && !readonly"
-        class="w-32 h-32 m-2 cursor-pointer border border-dashed border-blue-600"
+        class="cursor-pointer border border-dashed border-blue-600"
+        :class="fileClass"
         disabled
         @click="$refs.file.click()"
       />
@@ -80,7 +88,11 @@ const props = defineProps({
 	showName: Boolean,
 	disable: Boolean,
 	readonly: Boolean,
-	hideControls: Boolean
+	hideControls: Boolean,
+	fileClass: {
+		type: String,
+		default: "w-32 h-32 m-2"
+	}
 });
 
 const { onComplete, onDrop, onFilesSelected, uploadedFiles, clearUploadedFiles, onRemove } = useMultiFileUpload();

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

@@ -24,10 +24,12 @@
       @update:model-value="onUpdate"
     >
       <template #append>
-        <DropDownIcon
-          class="w-4 transition"
-          :class="isShowing ? 'rotate-180' : ''"
-        />
+        <slot name="append">
+          <DropDownIcon
+            class="w-4 transition"
+            :class="isShowing ? 'rotate-180' : ''"
+          />
+        </slot>
       </template>
       <template #selected>
         <div
@@ -71,40 +73,40 @@ import { computed, isRef, nextTick, ref } from "vue";
 
 const emit = defineEmits(["update:model-value", "search", "update"]);
 const props = defineProps({
-  ...QSelect.props,
-  modelValue: {
-    type: [Array, String, Number, Object],
-    default: undefined
-  },
-  placeholder: {
-    type: String,
-    default: ""
-  },
-  selectionLabel: {
-    type: String,
-    default: null
-  },
-  chipLimit: {
-    type: Number,
-    default: 3
-  },
-  inputClass: {
-    type: String,
-    default: ""
-  },
-  selectionClass: {
-    type: String,
-    default: ""
-  },
-  options: {
-    type: Array,
-    default: () => []
-  },
-  filterable: Boolean,
-  filterFn: {
-    type: Function,
-    default: null
-  }
+	...QSelect.props,
+	modelValue: {
+		type: [Array, String, Number, Object],
+		default: undefined
+	},
+	placeholder: {
+		type: String,
+		default: ""
+	},
+	selectionLabel: {
+		type: String,
+		default: null
+	},
+	chipLimit: {
+		type: Number,
+		default: 3
+	},
+	inputClass: {
+		type: String,
+		default: ""
+	},
+	selectionClass: {
+		type: String,
+		default: ""
+	},
+	options: {
+		type: Array,
+		default: () => []
+	},
+	filterable: Boolean,
+	filterFn: {
+		type: Function,
+		default: null
+	}
 });
 
 const selectField = ref(null);
@@ -119,27 +121,27 @@ const isShowing = ref(false);
  * @type {ComputedRef<{selectionLabel: string, label: string, value: string|*}[]>}
  */
 const computedOptions = computed(() => {
-  let options = props.options;
-  if (props.placeholder && !props.multiple && !props.filterable) {
-    options = [{ label: props.placeholder, value: null }, ...props.options];
-  }
-  options = options.map((o) => {
-    let opt = isRef(o) ? o.value : o;
-    return {
-      label: resolveLabel(opt),
-      value: resolveValue(opt),
-      selectionLabel: resolveSelectionLabel(opt)
-    };
-  });
-  return options;
+	let options = props.options;
+	if (props.placeholder && !props.multiple && !props.filterable) {
+		options = [{ label: props.placeholder, value: null }, ...props.options];
+	}
+	options = options.map((o) => {
+		let opt = isRef(o) ? o.value : o;
+		return {
+			label: resolveLabel(opt),
+			value: resolveValue(opt),
+			selectionLabel: resolveSelectionLabel(opt)
+		};
+	});
+	return options;
 });
 
 const filteredOptions = computed(() => {
-  if (filter.value && !props.filterFn) {
-    return computedOptions.value.filter(o => o.label.toLocaleLowerCase().indexOf(filter.value.toLowerCase()) > -1);
-  } else {
-    return computedOptions.value;
-  }
+	if (filter.value && !props.filterFn) {
+		return computedOptions.value.filter(o => o.label.toLocaleLowerCase().indexOf(filter.value.toLowerCase()) > -1);
+	} else {
+		return computedOptions.value;
+	}
 });
 
 /**
@@ -147,14 +149,14 @@ const filteredOptions = computed(() => {
  * @type {ComputedRef<unknown>}
  */
 const selectedValue = computed(() => {
-  if (props.multiple) {
-    const arrVal = Array.isArray(props.modelValue) ? props.modelValue : [];
-    return arrVal.map((v) => {
-      return v === null ? "__null__" : v;
-    }) || [];
-  } else {
-    return props.modelValue === null ? "__null__" : props.modelValue;
-  }
+	if (props.multiple) {
+		const arrVal = Array.isArray(props.modelValue) ? props.modelValue : [];
+		return arrVal.map((v) => {
+			return v === null ? "__null__" : v;
+		}) || [];
+	} else {
+		return props.modelValue === null ? "__null__" : props.modelValue;
+	}
 });
 
 /**
@@ -162,13 +164,13 @@ const selectedValue = computed(() => {
  * @type {ComputedRef<*>}
  */
 const selectedOptions = computed(() => {
-  let values = selectedValue.value;
-  if (!props.multiple) {
-    values = (values || values === 0) ? [values] : [];
-  }
-  return computedOptions.value.filter((o) => {
-    return values.includes(o.value) || values.map(v => typeof v === "object" && v.id).includes(o.value?.id);
-  });
+	let values = selectedValue.value;
+	if (!props.multiple) {
+		values = (values || values === 0) ? [values] : [];
+	}
+	return computedOptions.value.filter((o) => {
+		return values.includes(o.value) || values.map(v => typeof v === "object" && v.id).includes(o.value?.id);
+	});
 });
 
 /**
@@ -177,12 +179,12 @@ const selectedOptions = computed(() => {
  * @type {ComputedRef<unknown>}
  */
 const selectedLabel = computed(() => {
-  if (props.filterable && isShowing.value) return "";
+	if (props.filterable && isShowing.value) return "";
 
-  if (!selectedOptions.value || selectedOptions.value.length === 0) {
-    return props.placeholder || "(Select Option)";
-  }
-  return selectedOptions.value[0].selectionLabel;
+	if (!selectedOptions.value || selectedOptions.value.length === 0) {
+		return props.placeholder || "(Select Option)";
+	}
+	return selectedOptions.value[0].selectionLabel;
 });
 
 /**
@@ -190,7 +192,7 @@ const selectedLabel = computed(() => {
  * @type {ComputedRef<*>}
  */
 const chipOptions = computed(() => {
-  return selectedOptions.value.slice(0, props.chipLimit);
+	return selectedOptions.value.slice(0, props.chipLimit);
 });
 
 /**
@@ -199,16 +201,16 @@ const chipOptions = computed(() => {
  * @returns {*|string}
  */
 function resolveLabel(option) {
-  if (typeof option === "string") {
-    return option;
-  }
-  if (typeof props.optionLabel === "string") {
-    return option[props.optionLabel];
-  }
-  if (typeof props.optionLabel === "function") {
-    return props.optionLabel(option);
-  }
-  return option?.label;
+	if (typeof option === "string") {
+		return option;
+	}
+	if (typeof props.optionLabel === "string") {
+		return option[props.optionLabel];
+	}
+	if (typeof props.optionLabel === "function") {
+		return props.optionLabel(option);
+	}
+	return option?.label;
 }
 
 /**
@@ -218,16 +220,16 @@ function resolveLabel(option) {
  * @returns {*|{default: null, type: String | StringConstructor}|string}
  */
 function resolveSelectionLabel(option) {
-  if (typeof option === "string") {
-    return option;
-  }
-  if (typeof props.selectionLabel === "string") {
-    return option[props.selectionLabel];
-  }
-  if (typeof props.selectionLabel === "function") {
-    return props.selectionLabel(option);
-  }
-  return option?.selectionLabel || option?.label;
+	if (typeof option === "string") {
+		return option;
+	}
+	if (typeof props.selectionLabel === "string") {
+		return option[props.selectionLabel];
+	}
+	if (typeof props.selectionLabel === "function") {
+		return props.selectionLabel(option);
+	}
+	return option?.selectionLabel || option?.label;
 }
 
 /**
@@ -236,17 +238,17 @@ function resolveSelectionLabel(option) {
  * @returns {string|*|string}
  */
 function resolveValue(option) {
-  if (!option || typeof option === "string") {
-    return option;
-  }
-  let value = option.value;
-  if (typeof props.optionValue === "string") {
-    value = option[props.optionValue];
-  } else if (typeof props.optionValue === "function") {
-    value = props.optionValue(option);
-  }
-  // Note the __null__ special case here. See the onUpdate function for more details
-  return value === null ? "__null__" : value;
+	if (!option || typeof option === "string") {
+		return option;
+	}
+	let value = option.value;
+	if (typeof props.optionValue === "string") {
+		value = option[props.optionValue];
+	} else if (typeof props.optionValue === "function") {
+		value = props.optionValue(option);
+	}
+	// Note the __null__ special case here. See the onUpdate function for more details
+	return value === null ? "__null__" : value;
 }
 
 /**
@@ -256,14 +258,14 @@ function resolveValue(option) {
  * @param value
  */
 function onUpdate(value) {
-  if (Array.isArray(value)) {
-    value = value.map((v) => v === "__null__" ? null : v);
-  }
+	if (Array.isArray(value)) {
+		value = value.map((v) => v === "__null__" ? null : v);
+	}
 
-  value = value === "__null__" ? null : value;
+	value = value === "__null__" ? null : value;
 
-  emit("update", value);
-  emit("update:model-value", value);
+	emit("update", value);
+	emit("update:model-value", value);
 }
 
 /** XXX: This tells us when we should apply the filter. QSelect likes to trigger a new filter everytime you open the dropdown
@@ -277,19 +279,19 @@ const shouldFilter = ref(false);
  * @param update
  */
 async function onFilter(val, update) {
-  if (!props.filterFn) {
-    filter.value = val;
-    await nextTick(update);
-  } else {
-    update();
-    if (shouldFilter.value === false) return;
-    if (val !== null && val !== filter.value) {
-      filter.value = val;
-      if (props.filterFn) {
-        await props.filterFn(val);
-      }
-    }
-  }
+	if (!props.filterFn) {
+		filter.value = val;
+		await nextTick(update);
+	} else {
+		update();
+		if (shouldFilter.value === false) return;
+		if (val !== null && val !== filter.value) {
+			filter.value = val;
+			if (props.filterFn) {
+				await props.filterFn(val);
+			}
+		}
+	}
 }
 
 /**
@@ -297,29 +299,29 @@ async function onFilter(val, update) {
  * See the onUpdate function for more details
  */
 function onClear() {
-  emit("update:model-value", undefined);
-  emit("update", undefined);
+	emit("update:model-value", undefined);
+	emit("update", undefined);
 }
 
 /**
  * Handle behavior when showing the dropdown
  */
 function onShow() {
-  isShowing.value = true;
+	isShowing.value = true;
 
-  // XXX: See description on shouldFilter declaration. Only allow filtering after dropdown is ALREADY opened
-  shouldFilter.value = false;
-  nextTick(() => {
-    shouldFilter.value = true;
-    selectField.value.focus();
-  });
+	// XXX: See description on shouldFilter declaration. Only allow filtering after dropdown is ALREADY opened
+	shouldFilter.value = false;
+	nextTick(() => {
+		shouldFilter.value = true;
+		selectField.value.focus();
+	});
 }
 
 /**
  * Handle behavior when hiding the dropdown
  */
 function onHide() {
-  isShowing.value = false;
-  shouldFilter.value = false;
+	isShowing.value = false;
+	shouldFilter.value = false;
 }
 </script>

package/src/components/ActionTable/Form/RenderedForm.vue

@@ -77,10 +77,18 @@
         :show-name="showName"
         :rows="field.type === 'TEXTAREA' ? 5 : 1"
         :clearable="field.clearable || clearable"
+        :file-class="fileClass"
         :disable="disable"
         :readonly="readonly"
         @update:model-value="onInput(field.name, $event)"
-      />
+      >
+        <template #below-file="{file}">
+          <slot
+            name="below-file"
+            :file="file"
+          />
+        </template>
+      </Component>
     </div>
     <ConfirmDialog
       v-if="variationToEdit !== false"
@@ -145,7 +153,11 @@ const props = defineProps({
 		type: [String, Number, Boolean],
 		default: undefined
 	},
-	canModifyVariations: Boolean
+	canModifyVariations: Boolean,
+	fileClass: {
+		type: String,
+		default: ""
+	}
 });
 
 const FORM_FIELD_MAP = {

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

@@ -1,78 +1,83 @@
 <template>
   <div
-    class="relative flex justify-center bg-gray-100 overflow-hidden"
+    class="relative flex justify-center"
     :class="{'rounded-2xl': !square}"
   >
-    <template v-if="computedImage">
-      <div
-        class="grow h-full"
-        @click="showPreview = true"
-      >
+    <div
+      class=" bg-gray-100 overflow-hidden flex justify-center relative w-full h-full"
+      :class="{'rounded-2xl': !square}"
+    >
+      <template v-if="computedImage">
         <div
-          v-if="isVideo"
-          class="relative max-h-full max-w-full w-full flex justify-center"
+          class="grow h-full"
+          @click="showPreview = true"
         >
-          <video
-            class="max-h-full"
-            preload="auto"
+          <div
+            v-if="isVideo"
+            class="relative max-h-full max-w-full w-full flex justify-center"
           >
-            <source
-              :src="previewUrl + '#t=0.1'"
-              :type="mimeType"
+            <video
+              class="max-h-full"
+              preload="auto"
             >
-          </video>
-          <button :class="cls['play-button']">
-            <PlayIcon class="w-16" />
-          </button>
+              <source
+                :src="previewUrl + '#t=0.1'"
+                :type="mimeType"
+              >
+            </video>
+            <button :class="cls['play-button']">
+              <PlayIcon class="w-16" />
+            </button>
+          </div>
+          <QImg
+            v-if="thumbUrl || isPreviewable"
+            fit="fill"
+            class="non-selectable max-h-full max-w-full h-full"
+            :src="(thumbUrl || previewUrl) + '#t=0.1'"
+            preload="auto"
+            data-testid="previewed-image"
+          />
+          <div
+            v-else
+            class="flex items-center justify-center h-full"
+          >
+            <PdfIcon
+              v-if="isPdf"
+              class="w-24"
+            />
+            <TextFileIcon
+              v-else
+              class="w-24"
+            />
+          </div>
         </div>
-        <QImg
-          v-if="thumbUrl || isPreviewable"
-          fit="fill"
-          class="non-selectable max-h-full max-w-full h-full"
-          :src="(thumbUrl || previewUrl) + '#t=0.1'"
-          preload="auto"
-          data-testid="previewed-image"
-        />
         <div
-          v-else
-          class="flex items-center justify-center h-full"
+          v-if="$slots['action-button']"
+          :class="cls['action-button']"
         >
-          <PdfIcon
-            v-if="isPdf"
-            class="w-24"
-          />
-          <TextFileIcon
-            v-else
-            class="w-24"
+          <slot name="action-button" />
+        </div>
+        <div
+          v-if="image && image.progress !== undefined"
+          class="absolute-bottom w-full"
+        >
+          <QLinearProgress
+            :value="image.progress"
+            size="15px"
+            color="green-600"
+            stripe
           />
         </div>
-      </div>
-      <div
-        v-if="$slots['action-button']"
-        :class="cls['action-button']"
-      >
-        <slot name="action-button" />
-      </div>
-      <div
-        v-if="image && image.progress !== undefined"
-        class="absolute-bottom w-full"
-      >
-        <QLinearProgress
-          :value="image.progress"
-          size="15px"
-          color="green-600"
-          stripe
-        />
-      </div>
-    </template>
-    <template v-else>
-      <slot name="missing">
-        <component
-          :is="missingIcon"
-          class="w-full h-full p-2 text-gray-300"
-        />
-      </slot>
-    </template>
+      </template>
+      <template v-else>
+        <slot name="missing">
+          <component
+            :is="missingIcon"
+            class="w-full h-full p-2 text-gray-300"
+          />
+        </slot>
+      </template>
+    </div>
 
     <div class="absolute top-1 right-1 flex items-center justify-between space-x-1">
       <QBtn
@@ -104,6 +109,10 @@
       </QBtn>
     </div>
 
+    <div class="below-file absolute-bottom">
+      <slot name="below" />
+    </div>
+
     <FullScreenCarouselDialog
       v-if="showPreview && !disabled"
       :files="relatedFiles || [computedImage]"