quasar-ui-danx 0.4.90 → 0.4.91

package/package.json

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