quasar-ui-danx 0.4.21 → 0.4.22

package/package.json

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