quasar-ui-danx 0.4.43 → 0.4.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.4.43",
+  "version": "0.4.46",
   "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/ActionButton.vue

@@ -1,8 +1,8 @@
 <template>
   <QBtn
     :loading="isSaving"
-    class="shadow-none"
-    :class="disabled ? disabledClass : colorClass"
+    class="shadow-none py-0"
+    :class="buttonClass"
     :disable="disabled"
     @click="()=> onAction()"
   >
@@ -16,6 +16,7 @@
         <div
           v-if="label"
           class="ml-2"
+          :class="labelClass"
         >
           {{ label }}
         </div>
@@ -25,7 +26,9 @@
       v-if="tooltip"
       class="whitespace-nowrap"
     >
-      {{ tooltip }}
+      <slot name="tooltip">
+        {{ tooltip }}
+      </slot>
     </QTooltip>
     <QMenu
       v-if="isConfirming"
@@ -70,9 +73,11 @@ import { ActionTarget, ResourceAction } from "../../../types";
 export interface ActionButtonProps {
 	type?: "trash" | "trash-red" | "create" | "edit" | "copy" | "play" | "stop" | "pause" | "refresh" | "confirm" | "cancel";
 	color?: "red" | "blue" | "sky" | "green" | "green-invert" | "lime" | "white" | "gray";
+	size?: "xxs" | "xs" | "sm" | "md" | "lg";
 	icon?: object | string;
 	iconClass?: string;
-	label?: string;
+	label?: string | number;
+	labelClass?: string;
 	tooltip?: string;
 	saving?: boolean;
 	action?: ResourceAction;
@@ -90,7 +95,9 @@ const props = withDefaults(defineProps<ActionButtonProps>(), {
 	color: null,
 	icon: null,
 	iconClass: "",
+	size: "md",
 	label: "",
+	labelClass: "",
 	tooltip: "",
 	action: null,
 	target: null,
@@ -99,6 +106,36 @@ const props = withDefaults(defineProps<ActionButtonProps>(), {
 	disabledClass: "text-slate-800 bg-slate-500 opacity-50"
 });
 
+const mappedSizeClass = {
+	xxs: {
+		icon: "w-2",
+		button: "px-.5 h-5"
+	},
+	xs: {
+		icon: "w-3",
+		button: "px-1.5 h-6"
+	},
+	sm: {
+		icon: "w-4",
+		button: "px-2 h-8"
+	},
+	md: {
+		icon: "w-5",
+		button: "px-2.5 h-10"
+	},
+	lg: {
+		icon: "w-6",
+		button: "px-3 h-12"
+	}
+};
+
+const buttonClass = computed(() => {
+	return {
+		[props.disabled ? props.disabledClass : colorClass.value]: true,
+		[mappedSizeClass[props.size].button]: true
+	};
+});
+
 const colorClass = computed(() => {
 	switch (props.color) {
 		case "red":
@@ -122,61 +159,62 @@ const colorClass = computed(() => {
 	}
 });
 const typeOptions = computed(() => {
+	const iconClass = mappedSizeClass[props.size].icon;
 	switch (props.type) {
 		case "trash":
 			return {
 				icon: TrashIcon,
-				iconClass: "w-3"
+				iconClass
 			};
 		case "create":
 			return {
 				icon: CreateIcon,
-				iconClass: "w-3"
+				iconClass
 			};
 		case "confirm":
 			return {
 				icon: ConfirmIcon,
-				iconClass: "w-3"
+				iconClass
 			};
 		case "cancel":
 			return {
 				icon: CancelIcon,
-				iconClass: "w-3"
+				iconClass
 			};
 		case "edit":
 			return {
 				icon: EditIcon,
-				iconClass: "w-3"
+				iconClass
 			};
 		case "copy":
 			return {
 				icon: CopyIcon,
-				iconClass: "w-3"
+				iconClass
 			};
 		case "play":
 			return {
 				icon: PlayIcon,
-				iconClass: "w-3"
+				iconClass
 			};
 		case "stop":
 			return {
 				icon: StopIcon,
-				iconClass: "w-3"
+				iconClass
 			};
 		case "pause":
 			return {
 				icon: PauseIcon,
-				iconClass: "w-3"
+				iconClass
 			};
 		case "refresh":
 			return {
 				icon: RefreshIcon,
-				iconClass: "w-4"
+				iconClass
 			};
 		default:
 			return {
 				icon: EditIcon,
-				iconClass: "w-3"
+				iconClass
 			};
 	}
 });

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

@@ -1,37 +1,21 @@
 <template>
-  <QBtn
-    class="py-1 px-2"
-    :disable="disable"
+  <ActionButton
+    :icon="isShowing ? (hideIcon || DefaultHideIcon) : (showIcon || DefaultShowIcon)"
+    :label="(isShowing ? hideLabel : showLabel) || label"
+    :label-class="labelClass"
     @click="onToggle"
   >
-    <div class="flex items-center flex-nowrap whitespace-nowrap">
-      <slot :is-showing="isShowing">
-        <component
-          :is="isShowing ? (hideIcon || DefaultHideIcon) : (showIcon || DefaultShowIcon)"
-          :class="iconClass"
-        />
-      </slot>
-      <slot
-        name="label"
-        :is-showing="isShowing"
-      >
-        <div
-          v-if="label"
-          :class="labelClass"
-        >
-          {{ (isShowing ? hideLabel : showLabel) || label }}
-        </div>
-      </slot>
-    </div>
-    <QTooltip v-if="tooltip">
-      {{ tooltip }}
-    </QTooltip>
-  </QBtn>
+    <slot />
+    <template #tooltip>
+      <slot name="tooltip" />
+    </template>
+  </ActionButton>
 </template>
 <script lang="ts" setup>
 import { FaSolidEye as DefaultShowIcon, FaSolidEyeSlash as DefaultHideIcon } from "danx-icon";
 import { nextTick } from "vue";
 import { getItem, setItem } from "../../../helpers";
+import ActionButton from "./ActionButton";
 
 export interface Props {
 	name?: string;
@@ -39,14 +23,11 @@ export interface Props {
 	hideLabel?: string;
 	showIcon?: object | string;
 	hideIcon?: object | string;
-	iconClass?: string;
 	labelClass?: string;
-	label?: string;
-	tooltip?: string;
-	disable?: boolean;
+	label?: string | number;
 }
 
-const emit = defineEmits(["show", "hide"]);
+const emit = defineEmits<{ show: void, hide: void }>();
 const isShowing = defineModel<boolean>();
 const props = withDefaults(defineProps<Props>(), {
 	name: "",
@@ -54,25 +35,24 @@ const props = withDefaults(defineProps<Props>(), {
 	hideLabel: "",
 	showIcon: null,
 	hideIcon: null,
-	iconClass: "w-4 h-6",
 	labelClass: "ml-2",
-	label: "",
-	tooltip: ""
+	label: ""
 });
 
+console.log("isShowing", isShowing.value);
 const SETTINGS_KEY = "show-hide-button";
 const settings = getItem(SETTINGS_KEY, {});
 
 if (props.name) {
 	if (settings[props.name] !== undefined) {
 		isShowing.value = settings[props.name];
+		console.log("setting is sowing to", isShowing.value);
 	}
 }
 
 function onToggle() {
 	isShowing.value = !isShowing.value;
 
-
 	// NOTE: use nextTick to ensure the value is updated before saving (if the parent does not pass a value for modelValue, this can cause a desync)
 	nextTick(() => {
 		if (isShowing.value) {

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