quasar-ui-danx 0.4.20 → 0.4.22

package/package.json

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

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

@@ -1,6 +1,6 @@
 <template>
   <QToggle
-    :data-testid="'boolean-field-' + field.id"
+    :data-testid="'boolean-field-' + (name || label)"
     :model-value="modelValue || (toggleIndeterminate ? modelValue : false)"
     :disable="disable || readonly"
     :toggle-indeterminate="toggleIndeterminate"
@@ -8,37 +8,39 @@
     @update:model-value="$emit('update:model-value', $event)"
   >
     <FieldLabel
-      :field="{...field, label: label || field.label}"
+      :label="label || name"
+      :name="name"
       :show-name="showName"
       :class="labelClass"
     />
   </QToggle>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import FieldLabel from "./FieldLabel";
 
 defineEmits(["update:model-value"]);
 defineProps({
-  label: {
-    type: String,
-    default: null
-  },
-  modelValue: {
-    type: [Boolean],
-    default: undefined
-  },
-  field: {
-    type: Object,
-    required: true
-  },
-  labelClass: {
-    type: String,
-    default: "text-sm"
-  },
-  showName: Boolean,
-  toggleIndeterminate: Boolean,
-  disable: Boolean,
-  readonly: Boolean
+	label: {
+		type: String,
+		default: null
+	},
+	name: {
+		type: String,
+		default: null
+	},
+	required: Boolean,
+	modelValue: {
+		type: Boolean,
+		default: undefined
+	},
+	labelClass: {
+		type: String,
+		default: "text-sm"
+	},
+	showName: Boolean,
+	toggleIndeterminate: Boolean,
+	disable: Boolean,
+	readonly: Boolean
 });
 </script>

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

@@ -1,26 +1,22 @@
 <template>
   <NumberField
-    :field="field"
+    v-bind="$props"
     :precision="0"
     :model-value="modelValue"
-    :show-name="showName"
     @update:model-value="$emit('update:model-value', $event)"
   />
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { NumberFieldProps } from "../../../../types";
 import NumberField from "./NumberField";
 
 defineEmits(["update:model-value"]);
-defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: null
-  },
-  field: {
-    type: Object,
-    required: true
-  },
-  showName: Boolean
+withDefaults(defineProps<NumberFieldProps>(), {
+	modelValue: "",
+	label: undefined,
+	delay: 1000,
+	min: undefined,
+	max: undefined
 });
 </script>

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

@@ -4,14 +4,25 @@
       {{ label }}
     </div>
     <div :class="valueClass">
-      <a
-        v-if="url"
-        target="_blank"
-        :href="url"
-        :class="valueClass"
-      >
-        <slot>{{ formattedValue }}</slot>
-      </a>
+      <template v-if="url">
+        <a
+          v-if="!isLargeContent"
+          target="_blank"
+          :href="url"
+        >
+          <slot>{{ formattedValue }}</slot>
+        </a>
+        <template v-else>
+          <slot>{{ formattedValue }}</slot>
+          <a
+            target="_blank"
+            :href="url"
+            class="inline-block ml-2"
+          >
+            <LinkIcon class="w-4" />
+          </a>
+        </template>
+      </template>
       <template v-else>
         <slot>{{ formattedValue }}</slot>
       </template>
@@ -19,12 +30,13 @@
   </div>
 </template>
 <script setup lang="ts">
+import { FaSolidLink as LinkIcon } from "danx-icon";
 import { computed } from "vue";
 import { fBoolean, fNumber } from "../../../../helpers";
 
 export interface LabelValueBlockProps {
 	label: string;
-	value: string | number | boolean;
+	value?: string | number | boolean;
 	url?: string;
 	dense?: boolean;
 	nowrap?: boolean;
@@ -36,6 +48,7 @@ const props = withDefaults(defineProps<LabelValueBlockProps>(), {
 });
 
 const valueClass = computed(() => ({ "mt-2": !props.dense, "mt-1": props.dense, "text-no-wrap": props.nowrap }));
+const isLargeContent = computed(() => typeof props.value === "string" && props.value.length > 30);
 const formattedValue = computed(() => {
 	switch (typeof props.value) {
 		case "boolean":

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

@@ -11,18 +11,11 @@
 import { useDebounceFn } from "@vueuse/core";
 import { nextTick, ref, watch } from "vue";
 import { fNumber } from "../../../../helpers";
-import { AnyObject, TextFieldProps } from "../../../../types";
+import { AnyObject, NumberFieldProps } from "../../../../types";
 import TextField from "./TextField";
 
 const emit = defineEmits(["update:model-value", "update"]);
 
-export interface NumberFieldProps extends TextFieldProps {
-	precision?: number;
-	delay?: number;
-	currency?: boolean;
-	min?: number;
-	max?: number;
-}
 
 const props = withDefaults(defineProps<NumberFieldProps>(), {
 	modelValue: "",

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,21 @@ 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)) {
+		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/helpers/routes.ts

@@ -3,7 +3,7 @@ import { ListControlsRoutes } from "../types";
 import { downloadFile } from "./downloadPdf";
 import { request } from "./request";
 
-export function useActionRoutes(baseUrl: string): ListControlsRoutes {
+export function useActionRoutes(baseUrl: string, extend?: object): ListControlsRoutes {
 	return {
 		list(pager?) {
 			return request.post(`${baseUrl}/list`, pager);
@@ -33,6 +33,7 @@ export function useActionRoutes(baseUrl: string): ListControlsRoutes {
 		},
 		export(filter, name) {
 			return downloadFile(`${baseUrl}/export`, name || "export.csv", { filter });
-		}
+		},
+		...extend
 	};
 }

package/src/types/fields.d.ts

@@ -19,3 +19,11 @@ export interface TextFieldProps {
 	readonly?: boolean;
 	debounce?: string | number;
 }
+
+export interface NumberFieldProps extends TextFieldProps {
+	precision?: number;
+	delay?: number;
+	currency?: boolean;
+	min?: number;
+	max?: number;
+}