quasar-ui-danx 0.4.41 → 0.4.42

package/package.json

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

package/src/components/Utility/Buttons/ActionButton.vue

@@ -2,8 +2,9 @@
   <QBtn
     :loading="isSaving"
     class="shadow-none"
-    :class="colorClass"
-    @click="onAction"
+    :class="disabled ? 'text-slate-800 bg-slate-500 opacity-50' : colorClass"
+    :disable="disabled"
+    @click="()=> onAction()"
   >
     <div class="flex items-center flex-nowrap">
       <component
@@ -26,11 +27,36 @@
     >
       {{ tooltip }}
     </QTooltip>
+    <QMenu
+      v-if="isConfirming"
+      :model-value="true"
+    >
+      <div class="p-4 bg-slate-600">
+        <div>{{ confirmText }}</div>
+        <div class="flex items-center flex-nowrap mt-2">
+          <div class="flex-grow">
+            <ActionButton
+              type="cancel"
+              color="gray"
+              @click="isConfirming = false"
+            />
+          </div>
+          <ActionButton
+            type="confirm"
+            color="green"
+            @click="()=> onAction(true)"
+          />
+        </div>
+      </div>
+    </QMenu>
   </QBtn>
 </template>
 <script setup lang="ts">
 import {
 	FaSolidArrowsRotate as RefreshIcon,
+	FaSolidCircleCheck as ConfirmIcon,
+	FaSolidCircleXmark as CancelIcon,
+	FaSolidCopy as CopyIcon,
 	FaSolidPause as PauseIcon,
 	FaSolidPencil as EditIcon,
 	FaSolidPlay as PlayIcon,
@@ -38,11 +64,11 @@ import {
 	FaSolidStop as StopIcon,
 	FaSolidTrash as TrashIcon
 } from "danx-icon";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { ActionTarget, ResourceAction } from "../../../types";
 
 export interface ActionButtonProps {
-	type?: "trash" | "trash-red" | "create" | "edit" | "play" | "stop" | "pause" | "refresh";
+	type?: "trash" | "trash-red" | "create" | "edit" | "copy" | "play" | "stop" | "pause" | "refresh" | "confirm" | "cancel";
 	color?: "red" | "blue" | "sky" | "green" | "green-invert" | "lime" | "white" | "gray";
 	icon?: object | string;
 	iconClass?: string;
@@ -52,6 +78,9 @@ export interface ActionButtonProps {
 	action?: ResourceAction;
 	target?: ActionTarget;
 	input?: object;
+	disabled?: boolean;
+	confirm?: boolean;
+	confirmText?: string;
 }
 
 const emit = defineEmits(["success", "error", "always"]);
@@ -64,7 +93,8 @@ const props = withDefaults(defineProps<ActionButtonProps>(), {
 	tooltip: "",
 	action: null,
 	target: null,
-	input: null
+	input: null,
+	confirmText: "Are you sure?"
 });
 
 const colorClass = computed(() => {
@@ -101,11 +131,26 @@ const typeOptions = computed(() => {
 				icon: CreateIcon,
 				iconClass: "w-3"
 			};
+		case "confirm":
+			return {
+				icon: ConfirmIcon,
+				iconClass: "w-3"
+			};
+		case "cancel":
+			return {
+				icon: CancelIcon,
+				iconClass: "w-3"
+			};
 		case "edit":
 			return {
 				icon: EditIcon,
 				iconClass: "w-3"
 			};
+		case "copy":
+			return {
+				icon: CopyIcon,
+				iconClass: "w-3"
+			};
 		case "play":
 			return {
 				icon: PlayIcon,
@@ -136,19 +181,27 @@ const typeOptions = computed(() => {
 
 const isSaving = computed(() => {
 	if (props.saving) return true;
+	if (props.action) {
+		return props.action.isApplying;
+	}
 	if (props.target) {
 		if (Array.isArray(props.target)) {
 			return props.target.some((t) => t.isSaving);
 		}
 		return props.target.isSaving;
 	}
-	if (props.action) {
-		return props.action.isApplying;
-	}
 	return false;
 });
 
-function onAction() {
+const isConfirming = ref(false);
+function onAction(isConfirmed = false) {
+	// Make sure this action is confirmed if the confirm prop is set
+	if (props.confirm && !isConfirmed) {
+		isConfirming.value = true;
+		return false;
+	}
+	isConfirming.value = false;
+	if (props.disabled) return;
 	if (props.action) {
 		props.action.trigger(props.target, props.input).then(async (response) => {
 			emit("success", typeof response.json === "function" ? await response.json() : response);
@@ -158,6 +211,8 @@ function onAction() {
 		}).finally(() => {
 			emit("always");
 		});
+	} else {
+		emit("always");
 	}
 }
 </script>

package/src/components/Utility/Buttons/index.ts

@@ -1,3 +1,4 @@
+export { default as ActionButton } from "./ActionButton.vue";
 export { default as ExportButton } from "./ExportButton.vue";
 export { default as RefreshButton } from "./RefreshButton.vue";
 export { default as ShowHideButton } from "./ShowHideButton.vue";

package/src/components/Utility/Dialogs/InfoDialog.vue

@@ -23,6 +23,7 @@
           :label="doneText"
           class="dx-dialog-button dx-dialog-button-done"
           :class="doneClass"
+          :disable="disable"
           @click="onClose"
         >
           <slot name="done-text" />
@@ -39,6 +40,7 @@ import DialogLayout from "./DialogLayout";
 const emit = defineEmits(["update:model-value", "close"]);
 defineProps({
 	...DialogLayout.props,
+	disable: Boolean,
 	doneClass: {
 		type: [String, Object],
 		default: ""

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

@@ -39,18 +39,23 @@
         >
           <PdfIcon
             v-if="isPdf"
-            class="w-24"
+            class="w-3/4"
           />
           <TextFileIcon
             v-else
-            class="w-24"
+            class="w-3/4"
           />
-          <div
-            v-if="filename"
-            class="text-[.7rem] bg-slate-900 text-slate-300 opacity-80 h-[2.25rem] py-.5 px-1 absolute-bottom"
-          >
-            {{ filename }}
-          </div>
+          <template v-if="filename">
+            <div
+              v-if="showFilename"
+              class="text-[.7rem] bg-slate-900 text-slate-300 opacity-80 h-[2.25rem] py-.5 px-1 absolute-bottom"
+            >
+              {{ filename }}
+            </div>
+            <QTooltip v-else>
+              {{ filename }}
+            </QTooltip>
+          </template>
         </div>
       </div>
       <div
@@ -152,6 +157,7 @@ export interface FilePreviewProps {
 	file?: UploadedFile;
 	relatedFiles?: UploadedFile[];
 	missingIcon?: any;
+	showFilename?: boolean;
 	downloadButtonClass?: string;
 	imageFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
 	downloadable?: boolean;

package/src/helpers/formats.ts

@@ -89,11 +89,14 @@ export function fDate(dateTime: string | DateTime | null, { empty = "--", format
 /**
  * Parses a date string into a Luxon DateTime object
  */
-export function parseDateTime(dateTime: string | DateTime | null): DateTime<boolean> | null {
+export function parseDateTime(dateTime: string | DateTime | number | null): DateTime<boolean> | null {
+	if (typeof dateTime === "number") {
+		return DateTime.fromMillis(dateTime as number);
+	}
 	if (typeof dateTime === "string") {
 		return parseGenericDateTime(dateTime);
 	}
-	return dateTime || DateTime.fromSQL("0000-00-00 00:00:00");
+	return dateTime as DateTime<boolean> || DateTime.fromSQL("0000-00-00 00:00:00");
 }
 
 /**
@@ -193,7 +196,7 @@ export function fSecondsToDuration(seconds: number) {
 /**
  *  Formats a duration between two date strings in 00h 00m 00s format
  */
-export function fDuration(start: string, end?: string) {
+export function fDuration(start: string | number, end?: string | number) {
 	const endDateTime = end ? parseDateTime(end) : DateTime.now();
 	const diff = endDateTime?.diff(parseDateTime(start) || DateTime.now(), ["hours", "minutes", "seconds"]);
 	if (!diff?.isValid) {

package/src/helpers/request.ts

@@ -19,7 +19,7 @@ export const request: RequestApi = {
 
 	async call(url, options) {
 		options = options || {};
-		const abortKey = options?.abortOn !== undefined ? options.abortOn : url;
+		const abortKey = options?.abortOn !== undefined ? options.abortOn : url + JSON.stringify(options.params || "");
 		const timestamp = new Date().getTime();
 
 		if (abortKey) {
@@ -42,7 +42,7 @@ export const request: RequestApi = {
 					options.params[key] = JSON.stringify(value);
 				}
 			}
-			
+
 			url += (url.match(/\?/) ? "&" : "?") + new URLSearchParams(options.params).toString();
 			delete options.params;
 		}