quasar-ui-danx 0.4.43 → 0.4.45

package/package.json

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

package/src/components/ActionTable/controls.ts

@@ -115,7 +115,7 @@ export function useControls(name: string, options: ListControlsOptions): ListCon
 	 * Loads the filter field options for the current filter.
 	 */
 	async function loadFieldOptions() {
-		if (!options.routes.fieldOptions || options.isFieldOptionsEnabled === false) return;
+		if (isLoadingFilters.value || !options.routes.fieldOptions || options.isFieldOptionsEnabled === false) return;
 
 		isLoadingFilters.value = true;
 		try {

package/src/components/Utility/Buttons/ShowHideButton.vue

@@ -41,7 +41,7 @@ export interface Props {
 	hideIcon?: object | string;
 	iconClass?: string;
 	labelClass?: string;
-	label?: string;
+	label?: string | number;
 	tooltip?: string;
 	disable?: boolean;
 }

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

@@ -138,7 +138,7 @@
 <script setup lang="ts">
 import { DocumentTextIcon as TextFileIcon, DownloadIcon, PlayIcon } from "@heroicons/vue/outline";
 import { computed, ComputedRef, onMounted, ref } from "vue";
-import { download, FileUpload } from "../../../helpers";
+import { download, FileUpload, uniqueBy } from "../../../helpers";
 import { ImageIcon, PdfIcon, TrashIcon as RemoveIcon } from "../../../svg";
 import { UploadedFile } from "../../../types";
 import { FullScreenCarouselDialog } from "../Dialogs";
@@ -202,10 +202,16 @@ const computedImage: ComputedRef<UploadedFile | null> = computed(() => {
 });
 
 const isUploading = computed(() => !props.file || props.file?.progress !== undefined);
-const previewableFiles: ComputedRef<[UploadedFile | null]> = computed(() => {
-	return props.relatedFiles?.length > 0 ? props.relatedFiles : [computedImage.value];
+const previewableFiles: ComputedRef<(UploadedFile | null)[] | null> = computed(() => {
+	return props.relatedFiles?.length > 0 ? uniqueBy([computedImage.value, ...props.relatedFiles], filesHaveSameUrl) : [computedImage.value];
 });
 
+function filesHaveSameUrl(a: UploadedFile, b: UploadedFile) {
+	return a.id === b.id ||
+		[b.url, b.optimized?.url, b.thumb?.url].includes(a.url) ||
+		[a.url, a.optimized?.url, a.thumb?.url].includes(b.url);
+}
+
 const filename = computed(() => computedImage.value?.name || computedImage.value?.filename || "");
 const mimeType = computed(
 	() => computedImage.value?.type || computedImage.value?.mime || ""

package/src/components/Utility/Widgets/LabelPillWidget.vue

@@ -0,0 +1,40 @@
+<template>
+  <div :class="{[colorClass]: true, [sizeClass]: true, 'rounded-full': true}">
+    <slot>{{ label }}</slot>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from "vue";
+import { LabelPillWidgetProps } from "../../../types";
+
+const props = withDefaults(defineProps<LabelPillWidgetProps>(), {
+	label: "",
+	color: "none",
+	size: "md"
+});
+
+const colorClasses = {
+	sky: "bg-sky-950 text-sky-400",
+	green: "bg-green-950 text-green-400",
+	red: "bg-red-950 text-red-400",
+	amber: "bg-amber-950 text-amber-400",
+	yellow: "bg-yellow-950 text-yellow-400",
+	blue: "bg-blue-950 text-blue-400",
+	slate: "bg-slate-950 text-slate-400",
+	gray: "bg-slate-700 text-gray-300",
+	none: ""
+};
+
+const sizeClasses = {
+	xxs: "text-xs px-1 py-.5",
+	xs: "text-xs px-2 py-1",
+	sm: "text-sm px-3 py-1.5",
+	md: "text-base px-3 py-2",
+	lg: "text-lg px-4 py-2"
+};
+
+const colorClass = computed(() => {
+	return colorClasses[props.color];
+});
+const sizeClass = computed(() => sizeClasses[props.size]);
+</script>

package/src/components/Utility/Widgets/LabelValuePillWidget.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="flex items-stretch">
+    <div
+      class="rounded-l-lg bg-slate-400 text-slate-900 text-xs px-2 flex items-center justify-center"
+      :class="labelClass"
+    >
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </div>
+    <div class="rounded-r-lg bg-slate-900 text-slate-400 px-2 py-1">
+      <slot name="value">
+        {{ value }}
+      </slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+withDefaults(defineProps<{
+	label: string;
+	value: string;
+	labelClass?: string;
+}>(), {
+	labelClass: ""
+});
+</script>

package/src/components/Utility/Widgets/index.ts

@@ -0,0 +1,2 @@
+export { default as LabelPillWidget } from "./LabelPillWidget.vue";
+export { default as LabelValuePillWidget } from "./LabelValuePillWidget.vue";

package/src/components/Utility/index.ts

@@ -8,3 +8,4 @@ export * from "./Popovers";
 export * from "./Tabs";
 export * from "./Tools";
 export * from "./Transitions";
+export * from "./Widgets";

package/src/helpers/array.ts

@@ -2,31 +2,31 @@
  * Replace an item in an array with a new item
  */
 export function replace(array: any[], item: any, newItem = undefined, appendIfMissing = false) {
-    const index: any = typeof item === "function" ? array.findIndex(item) : array.indexOf(item);
-    if (index === false || index === -1) {
-        return appendIfMissing ? [...array, newItem] : array;
-    }
+	const index: any = typeof item === "function" ? array.findIndex(item) : array.indexOf(item);
+	if (index === false || index === -1) {
+		return appendIfMissing ? [...array, newItem] : array;
+	}
 
-    const newArray = [...array];
-    newItem !== undefined
-        ? newArray.splice(index, 1, newItem)
-        : newArray.splice(index, 1);
-    return newArray;
+	const newArray = [...array];
+	newItem !== undefined
+			? newArray.splice(index, 1, newItem)
+			: newArray.splice(index, 1);
+	return newArray;
 }
 
 /**
  * Remove an item from an array
  */
 export function remove(array: any[], item: any) {
-    return replace(array, item);
+	return replace(array, item);
 }
 
 /**
  * Remove duplicate items from an array using a callback to compare 2 elements
  */
-export function uniqueBy(array: any[], cb: Function) {
-    return array.filter((a, index, self) => {
-        // Check if the current element 'a' is the first occurrence in the array
-        return index === self.findIndex((b) => cb(a, b));
-    });
+export function uniqueBy(array: any[], cb: (a: any, b: any) => boolean) {
+	return array.filter((a, index, self) => {
+		// Check if the current element 'a' is the first occurrence in the array
+		return index === self.findIndex((b) => cb(a, b));
+	});
 }

package/src/helpers/objectStore.ts

@@ -92,6 +92,7 @@ function storeObjectChildren<T extends TypedObject>(object: T, recentlyStoredObj
 			for (const index in value) {
 				if (value[index] && typeof value[index] === "object") {
 					if (!applyToObject[key]) {
+						// @ts-expect-error this is fine... T is generic, but not sure why the matter to write to an object?
 						applyToObject[key] = [];
 					}
 					applyToObject[key][index] = storeObject(value[index], recentlyStoredObjects);
@@ -128,7 +129,10 @@ function removeObjectFromLists<T extends TypedObject>(object: T) {
  */
 const registeredAutoRefreshes: AnyObject = {};
 
-export async function autoRefreshObject<T extends TypedObject>(object: T, condition: (object: T) => boolean, callback: (object: T) => Promise<T>, interval = 3000) {
+export async function autoRefreshObject<T extends TypedObject>(name: string, object: T, condition: (object: T) => boolean, callback: (object: T) => Promise<T>, interval = 3000) {
+	// Always clear any previously registered auto refreshes before creating a new timeout
+	stopAutoRefreshObject(name);
+
 	if (!object?.id || !object?.__type) {
 		throw new Error("Invalid stored object. Cannot auto-refresh");
 	}
@@ -144,13 +148,11 @@ export async function autoRefreshObject<T extends TypedObject>(object: T, condit
 		storeObject(refreshedObject);
 	}
 
-	// Save the timeoutId to the object so it can be cleared when the object refresh is no longer needed
-	const timeoutId = setTimeout(() => autoRefreshObject(object, condition, callback, interval), interval);
-	registeredAutoRefreshes[object.__type + ":" + object.id] = timeoutId;
+	// Save the autoRefreshId for the object so it can be cleared when the object refresh is no longer needed
+	registeredAutoRefreshes[name] = setTimeout(() => autoRefreshObject(name, object, condition, callback, interval), interval);
 }
 
-export async function stopAutoRefreshObject<T extends TypedObject>(object: T) {
-	const timeoutId = registeredAutoRefreshes[object.__type + ":" + object.id];
-
+export function stopAutoRefreshObject(name: string) {
+	const timeoutId = registeredAutoRefreshes[name];
 	timeoutId && clearTimeout(timeoutId);
 }

package/src/helpers/utils.ts

@@ -33,6 +33,9 @@ export async function pollUntil(callback: () => any, interval = 1000) {
  */
 export function waitForRef(ref: Ref, value: any) {
 	return new Promise<void>((resolve) => {
+		if (ref.value === value) {
+			resolve();
+		}
 		watch(ref, (newValue) => {
 			if (newValue === value) {
 				resolve();

package/src/types/controls.d.ts

@@ -31,7 +31,7 @@ export interface ListControlsRoutes<T = ActionTargetItem> {
 
 	fieldOptions?(options?: RequestCallOptions): Promise<AnyObject>;
 
-	applyAction?(action: string | ResourceAction | ActionOptions, target: T | null, data?: object, options?: RequestCallOptions): Promise<AnyObject>;
+	applyAction?(action: string | ResourceAction | ActionOptions, target: T | null, data?: object, options?: RequestCallOptions): Promise<ApplyActionResponse>;
 
 	batchAction?(action: string | ResourceAction | ActionOptions, targets: T[], data: object, options?: RequestCallOptions): Promise<AnyObject>;
 
@@ -123,5 +123,7 @@ export interface ListController<T = ActionTargetItem> {
 export interface ApplyActionResponse<T = ActionTargetItem> {
 	item?: T;
 	result?: T | AnyObject;
-	success: boolean;
+	success?: boolean;
+	error?: boolean;
+	message?: string;
 }

package/src/types/index.d.ts

@@ -12,5 +12,6 @@ export * from "./forms";
 export * from "./requests";
 export * from "./shared";
 export * from "./tables";
+export * from "./widgets";
 
 export type DanxController<T = ActionTargetItem> = ActionController<T> & ListController<T>;

package/src/types/widgets.d.ts

@@ -0,0 +1,5 @@
+export interface LabelPillWidgetProps {
+	label?: string;
+	size?: "xs" | "sm" | "md" | "lg";
+	color?: "sky" | "green" | "red" | "amber" | "yellow" | "blue" | "slate" | "gray" | "none";
+}