quasar-ui-danx 0.4.21 → 0.4.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.4.21",
+  "version": "0.4.23",
   "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

@@ -1,17 +1,30 @@
 <template>
   <div>
     <div class="text-xs font-bold">
-      {{ label }}
+      <slot name="label">
+        {{ label }}
+      </slot>
     </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 +32,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 +50,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/components/ActionTable/listControls.ts

@@ -364,7 +364,7 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 
 		const latestNextIndex = latestCallOnly("getNextItem", async () => {
 			if (!pagedItems.value?.data) return -1;
-			
+
 			// Load the previous page if the offset is before index 0
 			if (nextIndex < 0) {
 				if (pagination.value.page > 1) {
@@ -439,11 +439,21 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 	 */
 	function updateRouteParams(params: AnyObject) {
 		const vueRouter = getVueRouter();
-		const { name: routeName } = vueRouter.currentRoute.value;
-		vueRouter.push({
-			name: (Array.isArray(routeName) ? routeName[0] : routeName) || "home",
-			params
-		});
+		let { name: routeName } = vueRouter.currentRoute.value;
+		routeName = Array.isArray(routeName) ? routeName[0] : routeName;
+
+		if (!routeName) {
+			console.error("No route name found for list controls", name);
+			return;
+		}
+
+		const newRoutePath = vueRouter.resolve({ name: routeName, params }).href;
+		const currentRoutePath = vueRouter.currentRoute.value.fullPath;
+
+		// Only update the route if the route is different (or the currentRoutePath is a child of the newRoutePath)
+		if (currentRoutePath !== newRoutePath && !currentRoutePath.startsWith(newRoutePath)) {
+			vueRouter.push({ name: routeName, params });
+		}
 	}
 
 	function setPanelFromRoute(params: RouteParams, meta: AnyObject) {

package/src/helpers/formats.ts

@@ -234,7 +234,13 @@ export function fShortSize(value: string | number) {
 	return Math.round(n / div) + " " + power.unit;
 }
 
-export function fBoolean(value?: boolean) {
+export function fBoolean(value?: boolean | string | any) {
+	switch (value) {
+		case "Yes":
+		case "No":
+			return value;
+	}
+
 	return (value === undefined || value === null) ? "-" : (value ? "Yes" : "No");
 }
 

package/src/helpers/objectStore.ts

@@ -73,7 +73,6 @@ export async function autoRefreshObject<T extends TypedObject>(object: T, condit
 	}
 
 	if (condition(object)) {
-		console.log("condition true", object);
 		const refreshedObject = await callback(object);
 
 		if (!refreshedObject.id) {

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