quasar-ui-danx 0.4.29 → 0.4.31

package/package.json

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

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

@@ -2,17 +2,19 @@
   <div class="inline-block relative">
     <div
       contenteditable
-      class="relative inline-block transition duration-300 outline-none outline-offset-0 border-none focus:outline-4 hover:outline-4 rounded-sm z-10"
+      class="relative inline-block transition duration-300 outline-none outline-offset-0 border-none focus:outline-4 hover:outline-4 rounded-sm z-10 min-w-10 min-h-10"
       :style="{minWidth, minHeight}"
       :class="contentClass"
       @input="onInput"
+      @focusin="hasFocus = true"
+      @focusout="hasFocus = false"
     >
       {{ text }}
     </div>
     <div
-      v-if="!text && placeholder"
+      v-if="!text && placeholder && !hasFocus"
       ref="placeholderDiv"
-      class="text-gray-600 absolute-top-left whitespace-nowrap z-1"
+      class="text-gray-600 absolute-top-left whitespace-nowrap z-1 pointer-events-none"
     >
       {{ placeholder }}
     </div>
@@ -21,15 +23,17 @@
 
 <script setup lang="ts">
 import { useDebounceFn } from "@vueuse/core";
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 
 const emit = defineEmits(["update:model-value", "change"]);
 const props = withDefaults(defineProps<{
-	modelValue: string;
+	modelValue?: string;
 	color?: string;
+	textColor?: string;
 	debounceDelay?: number;
 	placeholder?: string;
 }>(), {
+	modelValue: "",
 	// NOTE: You must safe-list required colors in tailwind.config.js
 	//       Add text-blue-900, hover:bg-blue-200, hover:outline-blue-200, focus:outline-blue-200 and focus:bg-blue-200 for the following config
 	color: "blue-200",
@@ -42,6 +46,7 @@ const text = ref(props.modelValue);
 const placeholderDiv = ref(null);
 const minWidth = ref(0);
 const minHeight = ref(0);
+const hasFocus = ref(false);
 
 onMounted(() => {
 	// Set the min-width to the width of the placeholder
@@ -51,6 +56,11 @@ onMounted(() => {
 	}
 });
 
+watch(() => props.modelValue, (value) => {
+	if (!hasFocus.value)
+		text.value = value;
+});
+
 const debouncedChange = useDebounceFn(() => {
 	emit("update:model-value", text.value);
 	emit("change", text.value);
@@ -64,6 +74,7 @@ function onInput(e) {
 const contentClass = computed(() => [
 	`hover:bg-${props.color} focus:bg-${props.color}`,
 	`hover:text-${props.textColor} focus:text-${props.textColor}`,
-	`hover:outline-${props.color} focus:outline-${props.color}`
+	`hover:outline-${props.color} focus:outline-${props.color}`,
+	text.value ? "" : "!bg-none"
 ]);
 </script>

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

@@ -24,7 +24,9 @@
       <FilePreview
         v-for="file in uploadedFiles"
         :key="'file-upload-' + file.id"
-        class="w-32 h-32 m-2 cursor-pointer bg-gray-200"
+        class="m-2 cursor-pointer bg-gray-200"
+        :class="filePreviewClass"
+        :style="styleSize"
         :file="file"
         :related-files="file.transcodes || uploadedFiles"
         downloadable
@@ -33,14 +35,19 @@
       />
       <div
         v-if="!disable && !readonly"
-        class="dx-add-remove-files w-32 h-32 m-2 rounded-2xl flex flex-col flex-nowrap items-center overflow-hidden cursor-pointer"
+        class="dx-add-remove-files m-2 flex flex-col flex-nowrap items-center overflow-hidden cursor-pointer"
+        :class="filePreviewClass"
+        :style="styleSize"
       >
         <div
           class="dx-add-file flex-grow p-1 pt-3 flex justify-center items-center bg-green-200 text-green-700 w-full hover:bg-green-100"
           @click="$refs.file.click()"
         >
           <div>
-            <AddFileIcon class="w-10 m-auto" />
+            <AddFileIcon
+              class="m-auto"
+              :class="addIconClass"
+            />
             <div class="mt-1 text-center">
               Add
             </div>
@@ -66,7 +73,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { computed, onMounted } from "vue";
 import { useMultiFileUpload } from "../../../../helpers";
 import { ImageIcon as AddFileIcon, TrashIcon as RemoveFileIcon } from "../../../../svg";
 import { FormField, UploadedFile } from "../../../../types";
@@ -74,14 +81,28 @@ import { FilePreview } from "../../../Utility";
 import FieldLabel from "./FieldLabel";
 
 const emit = defineEmits(["update:model-value"]);
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 	modelValue?: UploadedFile[];
 	field?: FormField;
 	label?: string;
 	showName?: boolean;
 	disable?: boolean;
 	readonly?: boolean;
-}>();
+	width?: number | string;
+	height?: number | string;
+	addIconClass?: string;
+	filePreviewClass?: string;
+	filePreviewBtnSize?: string;
+}>(), {
+	modelValue: null,
+	field: null,
+	label: "",
+	width: 128,
+	height: 128,
+	addIconClass: "w-10",
+	filePreviewClass: "rounded-2xl",
+	filePreviewBtnSize: "sm"
+});
 
 const { onComplete, onDrop, onFilesSelected, uploadedFiles, clearUploadedFiles, onRemove } = useMultiFileUpload();
 onMounted(() => {
@@ -90,4 +111,11 @@ onMounted(() => {
 	}
 });
 onComplete(() => emit("update:model-value", uploadedFiles.value));
+
+const styleSize = computed(() => {
+	return {
+		width: typeof props.width === "number" ? `${props.width}px` : props.width,
+		height: typeof props.height === "number" ? `${props.height}px` : props.height
+	};
+});
 </script>

package/src/components/Utility/Files/FilePreview.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative flex justify-center bg-gray-100 overflow-hidden"
+    class="group relative flex justify-center bg-gray-100 overflow-hidden"
     :class="{'rounded-2xl': !square}"
   >
     <template v-if="computedImage">
@@ -91,10 +91,10 @@
       </slot>
     </template>
 
-    <div class="absolute top-1 right-1 flex items-center justify-between space-x-1">
+    <div class="absolute top-1 right-1 flex items-center flex-nowrap justify-between space-x-1 transition-all opacity-0 group-hover:opacity-100">
       <QBtn
         v-if="downloadable && computedImage?.url"
-        size="sm"
+        :size="btnSize"
         class="dx-file-preview-download py-1 px-2 opacity-70 hover:opacity-100"
         :class="downloadButtonClass"
         @click.stop="download(computedImage.url)"
@@ -104,7 +104,7 @@
 
       <QBtn
         v-if="removable"
-        size="sm"
+        :size="btnSize"
         class="dx-file-preview-remove bg-red-900 text-white opacity-50 hover:opacity-100 py-1 px-2"
         @click.stop="onRemove"
       >
@@ -158,6 +158,7 @@ export interface FilePreviewProps {
 	removable?: boolean;
 	disabled?: boolean;
 	square?: boolean;
+	btnSize?: "xs" | "sm" | "md" | "lg";
 }
 
 const emit = defineEmits(["remove"]);
@@ -172,7 +173,8 @@ const props = withDefaults(defineProps<FilePreviewProps>(), {
 	downloadable: false,
 	removable: false,
 	disabled: false,
-	square: false
+	square: false,
+	btnSize: "sm"
 });
 
 

package/src/helpers/actions.ts

@@ -166,6 +166,10 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionGlobal
 			result.item = storeObject(result.item);
 		}
 
+		if (result?.result?.__type) {
+			result.result = storeObject(result.result);
+		}
+
 		return result;
 	}
 

package/src/helpers/objectStore.ts

@@ -79,6 +79,12 @@ export function storeObject<T extends TypedObject>(newObject: T, recentlyStoredO
 	return reactiveObject;
 }
 
+/**
+ * Auto refresh an object based on a condition and a callback. Returns the timeout ID for the auto-refresh.
+ * NOTE: Use the timeout ID to clear the auto-refresh when the object is no longer needed (eg: when the component is unmounted)
+ */
+const registeredAutoRefreshes: AnyObject = {};
+
 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");
@@ -88,11 +94,21 @@ export async function autoRefreshObject<T extends TypedObject>(object: T, condit
 		const refreshedObject = await callback(object);
 
 		if (!refreshedObject.id) {
-			return FlashMessages.error(`Failed to refresh ${object.__type} (${object.id}) status: ` + object.name);
+			FlashMessages.error(`Failed to refresh ${object.__type} (${object.id}) status: ` + object.name);
+			return null;
 		}
 
 		storeObject(refreshedObject);
 	}
 
-	setTimeout(() => autoRefreshObject(object, condition, callback), interval);
+
+	const timeoutId = setTimeout(() => autoRefreshObject(object, condition, callback, interval), interval);
+
+	registeredAutoRefreshes[object.__type + ":" + object.id] = timeoutId;
+}
+
+export async function stopAutoRefreshObject<T extends TypedObject>(object: T) {
+	const timeoutId = registeredAutoRefreshes[object.__type + ":" + object.id];
+
+	timeoutId && clearTimeout(timeoutId);
 }

package/src/helpers/utils.ts

@@ -12,6 +12,13 @@ export function sleep(delay: number) {
 	return new Promise((resolve) => setTimeout(resolve, delay));
 }
 
+/**
+ * Deep clone an object
+ */
+export function cloneDeep(obj: any) {
+	return JSON.parse(JSON.stringify(obj));
+}
+
 /**
  * Poll a callback function until the result is true
  */

package/src/types/controls.d.ts

@@ -20,7 +20,7 @@ export interface FilterGroup {
 }
 
 export interface ListControlsRoutes<T = ActionTargetItem> {
-	list(pager?: ListControlsPagination): Promise<T[]>;
+	list(pager?: ListControlsPagination): Promise<PagedItems>;
 
 	summary?(filter?: ListControlsFilter): Promise<AnyObject>;