quasar-ui-danx 0.4.89 → 0.4.91

package/package.json

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

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

@@ -67,6 +67,7 @@ import {
   FaSolidCopy as CopyIcon,
   FaSolidDatabase as DatabaseIcon,
   FaSolidEye as ViewIcon,
+  FaSolidFile as DocumentIcon,
   FaSolidFileExport as ExportIcon,
   FaSolidFileImport as ImportIcon,
   FaSolidFloppyDisk as SaveIcon,
@@ -83,8 +84,8 @@ import { computed, ref } from "vue";
 import { ActionTarget, ResourceAction } from "../../../types";
 
 export interface ActionButtonProps {
-  type?: "save" | "trash" | "back" | "create" | "edit" | "copy" | "folder" | "play" | "stop" | "pause" | "refresh" | "restart" | "confirm" | "cancel" | "export" | "import" | "minus" | "merge" | "check" | "clock" | "view" | "database";
-  color?: "red" | "blue" | "blue-invert" | "sky" | "sky-invert" | "green" | "green-invert" | "lime" | "white" | "gray" | "slate" | "slate-invert" | "yellow" | "orange";
+  type?: "save" | "trash" | "back" | "create" | "edit" | "copy" | "folder" | "document" | "play" | "stop" | "pause" | "refresh" | "restart" | "confirm" | "cancel" | "export" | "import" | "minus" | "merge" | "check" | "clock" | "view" | "database";
+  color?: "red" | "blue" | "blue-invert" | "sky" | "sky-invert" | "green" | "green-invert" | "lime" | "white" | "gray" | "slate" | "slate-invert" | "yellow" | "orange" | "purple" | "teal" | "teal-invert";
   size?: "xxs" | "xs" | "sm" | "md" | "lg";
   icon?: object | string;
   iconClass?: string;
@@ -164,6 +165,10 @@ const colorClass = computed(() => {
       return "text-blue-900 bg-blue-300 hover:bg-blue-400";
     case "blue-invert":
       return "text-blue-300 bg-blue-900 hover:bg-blue-800";
+    case "teal":
+      return "text-teal-800 bg-teal-200 hover:bg-teal-400";
+    case "teal-invert":
+      return "text-teal-200 bg-teal-500 hover:bg-teal-600";
     case "sky":
       return "text-sky-900 bg-sky-300 hover:bg-sky-400";
     case "sky-invert":
@@ -180,6 +185,8 @@ const colorClass = computed(() => {
       return "text-slate-900 bg-slate-300 hover:bg-slate-400";
     case "slate-invert":
       return "text-slate-300 bg-slate-900 hover:bg-slate-800";
+    case "purple":
+      return "text-purple-300 bg-purple-900 hover:bg-purple-800";
     default:
       return "";
   }
@@ -211,6 +218,8 @@ const typeOptions = computed(() => {
       return { icon: CopyIcon };
     case "folder":
       return { icon: FolderIcon };
+    case "document":
+      return { icon: DocumentIcon };
     case "clock":
       return { icon: ClockIcon };
     case "play":

package/src/helpers/actions.ts

@@ -25,11 +25,12 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionGlobal
 
 	/**
 	 * Extend an action so the base action can be modified without affecting other places the action is used.
-	 * This isolates the action to the provided id, so it is still re-usable across the system, but does not affect behavior elsewhere.
+	 * This isolates the action to the provided id, so it is still re-usable across the system, but does not affect
+	 * behavior elsewhere.
 	 *
-	 * For example, when you have a list of items and you want to perform a callback on the action on a single item, you can extend the action
-	 * with the id of the item you want to perform the action on, allowing you to perform behavior on a single item, instead of all instances
-	 * in the list receiving the same callback.
+	 * For example, when you have a list of items and you want to perform a callback on the action on a single item,
+	 * you can extend the action with the id of the item you want to perform the action on, allowing you to perform
+	 * behavior on a single item, instead of all instances in the list receiving the same callback.
 	 */
 	function extendAction(actionName: string, extendedId: string | number, actionOptions: Partial<ActionOptions>): ResourceAction {
 		const action = getAction(actionName);
@@ -134,7 +135,8 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionGlobal
 					confirm: async (confirmInput: any) => {
 
 						// Resolve the input based on the useInputFromConfirm option
-						// Not setting useInputFromConfirm will merge the input from the confirm dialog with the input from the action
+						// Not setting useInputFromConfirm will merge the input from the confirm dialog with the input
+						// from the action
 						let resolvedInput;
 						if (action.useInputFromConfirm === false) {
 							resolvedInput = input;
@@ -207,7 +209,8 @@ function setTargetSavingState(target: ActionTarget, saving: boolean) {
 /**
  * Execute the confirmed action on the target (ie: calling the server, or whatever the callback function does).
  *
- * 1. If the action has an optimistic callback, it will be called before the actual action to immediately update the UI (non batch actions only).
+ * 1. If the action has an optimistic callback, it will be called before the actual action to immediately update the UI
+ * (non batch actions only).
  * 2. Call the onBatchAction or onAction callback of the action object, depending on if the target is an array or not.
  * 3. Call the onSuccess or onError callback based on the result of the action.
  * 4. Call the onFinish callback of the action object.
@@ -310,11 +313,11 @@ async function onConfirmAction(action: ActionOptions, target: ActionTarget, inpu
 export function withDefaultActions(label: string, listController?: ListController): ActionOptions[] {
 	return [
 		{
-			name: "quick-create",
-			alias: "create"
+			name: "create"
 		},
 		{
-			name: "create",
+			name: "create-with-name",
+			alias: "create",
 			label: "Create " + label,
 			vnode: () => h(CreateNewWithNameDialog, { title: "Create " + label }),
 			onFinish: listController && ((result) => {
@@ -345,11 +348,11 @@ export function withDefaultActions(label: string, listController?: ListControlle
 			onAction: (action, target) => listController?.activatePanel(target, "edit")
 		},
 		{
-			name: "quick-delete",
-			alias: "delete"
+			name: "delete"
 		},
 		{
-			name: "delete",
+			name: "delete-with-confirm",
+			alias: "delete",
 			label: "Delete",
 			class: "text-red-500",
 			iconClass: "text-red-500",

package/src/helpers/formats.ts

@@ -57,16 +57,16 @@ export function fLocalizedDateTime(dateTimeString: string, options = {}) {
  * @returns {string}
  */
 export function fDateTime(
-		dateTime: string | DateTime | null = null,
-		{ format = "M/d/yy h:mma", empty = "- -" }: fDateOptions = {}
+	dateTime: string | DateTime | null = null,
+	{ format = "M/d/yy h:mma", empty = "- -" }: fDateOptions = {}
 ) {
 	const formatted = parseDateTime(dateTime)?.toFormat(format).toLowerCase();
 	return formatted || empty;
 }
 
 export function fDateTimeMs(
-		dateTime: string | DateTime | null = null,
-		{ empty = "- -" }: fDateOptions = {}
+	dateTime: string | DateTime | null = null,
+	{ empty = "- -" }: fDateOptions = {}
 ) {
 	const formatted = parseDateTime(dateTime)?.toFormat("M/d/yy H:mm:ss.SSS").toLowerCase();
 	return formatted || empty;
@@ -201,6 +201,15 @@ export function fSecondsToDuration(seconds: number) {
 	return `${hours ? hours + "h " : ""}${minutes ? minutes + "m " : ""}${secs}s`;
 }
 
+/**
+ *  Formats a number of milliseconds into a duration string in 00h 00m 00s 000ms format
+ */
+export function fMillisecondsToDuration(milliseconds: number) {
+	const durStr = fSecondsToDuration(Math.floor(milliseconds / 1000));
+	return (durStr === "0s" ? "" : durStr) + ` ${Math.floor(milliseconds % 1000)}ms`;
+}
+
+
 /**
  *  Formats a duration between two date strings in 00h 00m 00s format
  */
@@ -274,8 +283,8 @@ export function fShortNumber(value: string | number, options?: { round: boolean
 	if (short) {
 		n = n / Math.pow(10, short.pow);
 		return options?.round
-				? n + short.unit
-				: n.toFixed(n > 100 ? 0 : 1) + short.unit;
+			? n + short.unit
+			: n.toFixed(n > 100 ? 0 : 1) + short.unit;
 	}
 
 	return n;
@@ -329,9 +338,9 @@ export function centerTruncate(str: string, maxLength: number) {
 		const frontCharCount = Math.floor((maxLength - 3) / 2);
 		const backCharCount = maxLength - frontCharCount - 3;
 		return (
-				str.substring(0, frontCharCount) +
-				"..." +
-				str.substring(str.length - backCharCount)
+			str.substring(0, frontCharCount) +
+			"..." +
+			str.substring(str.length - backCharCount)
 		);
 	} else {
 		return str;