quasar-ui-danx 0.4.19 → 0.4.21

package/package.json

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

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="dx-text-field">
     <FieldLabel
       v-if="!prependLabel"
       :label="label"
@@ -33,7 +33,7 @@
         @update:model-value="$emit('update:model-value', $event)"
       >
         <template
-          v-if="prependLabel"
+          v-if="prependLabel || $slots.prepend"
           #prepend
         >
           <FieldLabel
@@ -43,6 +43,10 @@
             :required-label="requiredLabel"
             :class="labelClass"
           />
+          <slot name="prepend" />
+        </template>
+        <template #append>
+          <slot name="append" />
         </template>
       </QInput>
       <MaxLengthCounter

package/src/helpers/FlashMessages.ts

@@ -10,6 +10,10 @@ export class FlashMessages {
 			type: String,
 			default: ""
 		},
+		infoMsg: {
+			type: String,
+			default: ""
+		},
 		errorMsg: {
 			type: String,
 			default: ""
@@ -20,11 +24,12 @@ export class FlashMessages {
 		}
 	};
 
-	static enable(msgProps: { successMsg?: string, errorMsg?: string, warningMsg?: string }) {
+	static enable(msgProps: { successMsg?: string, infoMsg?: string, errorMsg?: string, warningMsg?: string }) {
 		FlashMessages.success(msgProps.successMsg);
 		FlashMessages.error(msgProps.errorMsg);
 		FlashMessages.warning(msgProps.warningMsg);
 		watch(() => msgProps.successMsg, msg => FlashMessages.success(msg));
+		watch(() => msgProps.infoMsg, msg => FlashMessages.info(msg));
 		watch(() => msgProps.errorMsg, msg => FlashMessages.error(msg));
 		watch(() => msgProps.warningMsg, msg => FlashMessages.warning(msg));
 	}
@@ -61,6 +66,15 @@ export class FlashMessages {
 		});
 	}
 
+	static info(message?: string, options: QNotifyCreateOptions = {}) {
+		FlashMessages.send(message, {
+			classes: "bg-sky-300 !text-sky-900",
+			icon: "info",
+			...options,
+			...danxOptions.value.flashMessages?.info
+		});
+	}
+
 	static error(message?: string, options: QNotifyCreateOptions = {}) {
 		FlashMessages.send(message, {
 			classes: "bg-red-300 !text-red-900",

package/src/helpers/formats.ts

@@ -144,6 +144,9 @@ export function fElapsedTime(start: string, end?: string) {
  * Formats an amount into USD currency format
  */
 export function fCurrency(amount: number, options?: object) {
+	if (amount === null || amount === undefined || isNaN(amount)) {
+		return "$-";
+	}
 	return new Intl.NumberFormat("en-US", {
 		style: "currency",
 		currency: "USD",
@@ -179,6 +182,9 @@ export function fShortCurrency(value: string | number, options?: { round: boolea
  * Formats a number into a shorthand human-readable format (ie: 1.2M or 5K)
  */
 export function fShortNumber(value: string | number, options?: { round: boolean }) {
+	if (value === "" || value === null || value === undefined) {
+		return "-";
+	}
 	const shorts = [
 		{ pow: 3, unit: "K" },
 		{ pow: 6, unit: "M" },

package/src/helpers/objectStore.ts

@@ -1,9 +1,19 @@
 import { uid } from "quasar";
 import { ShallowReactive, shallowReactive } from "vue";
 import { TypedObject } from "../types";
+import { FlashMessages } from "./FlashMessages";
 
 const store = new Map<string, any>();
 
+export function storeObjects<T extends TypedObject>(newObjects: T[]) {
+	for (const index in newObjects) {
+		if (newObjects[index] && typeof newObjects[index] === "object") {
+			newObjects[index] = storeObject(newObjects[index]);
+		}
+	}
+	return newObjects;
+}
+
 /**
  * Store an object in the object store via type + id
  * Returns the stored object that should be used instead of the passed object as the returned object is shared across the system
@@ -56,3 +66,22 @@ export function storeObject<T extends TypedObject>(newObject: T): ShallowReactiv
 	store.set(objectKey, reactiveObject);
 	return reactiveObject;
 }
+
+export async function autoRefreshObject<T extends TypedObject>(object: T, condition: (object: T) => boolean, callback: (object: T) => Promise<T>, interval = 3000) {
+	if (!object?.id || !object?.__type) {
+		throw new Error("Invalid stored object. Cannot auto-refresh");
+	}
+
+	if (condition(object)) {
+		console.log("condition true", object);
+		const refreshedObject = await callback(object);
+
+		if (!refreshedObject.id) {
+			return FlashMessages.error(`Failed to refresh ${object.__type} (${object.id}) status: ` + object.name);
+		}
+
+		storeObject(refreshedObject);
+	}
+
+	setTimeout(() => autoRefreshObject(object, condition, callback), interval);
+}

package/src/types/config.d.ts

@@ -11,6 +11,7 @@ export interface DanxOptions {
 	flashMessages?: {
 		default?: QNotifyCreateOptions;
 		success?: QNotifyCreateOptions;
+		info?: QNotifyCreateOptions;
 		warning?: QNotifyCreateOptions;
 		error?: QNotifyCreateOptions;
 	};