quasar-ui-danx 0.4.47 → 0.4.49

package/package.json

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

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

@@ -1,19 +1,15 @@
 <template>
   <div class="group flex items-center flex-nowrap gap-x-1 relative">
-    <QInnerLoading
-      v-if="loading"
-      showing
-      class="bg-sky-900 opacity-50 z-10 rounded"
-      color="teal"
-    />
     <ShowHideButton
       v-if="selectable"
       v-model="isSelecting"
       :disable="disable"
       :label="selectText"
+      :saving="loading"
       :class="selectClass"
       :show-icon="selectIcon || DefaultSelectIcon"
       class="mr-2"
+      :size="size"
     >
       <QMenu
         :model-value="isSelecting"
@@ -36,24 +32,22 @@
               v-if="deletable"
               type="trash"
               class="ml-4 mr-2"
-              size="sm"
+              :size="size"
               @click.stop.prevent="$emit('delete', option)"
             />
           </div>
           <template v-if="creatable">
             <QSeparator class="bg-slate-400 my-2" />
             <div class="px-4 mb-2">
-              <QBtn
+              <ActionButton
+                type="create"
+                color="green"
                 :class="createClass"
-                :loading="loading"
+                :label="createText"
+                :saving="loading"
+                :size="size"
                 @click="$emit('create')"
-              >
-                <CreateIcon
-                  class="w-3"
-                  :class="createText ? 'mr-2' : ''"
-                />
-                {{ createText }}
-              </QBtn>
+              />
             </div>
           </template>
         </div>
@@ -84,6 +78,7 @@
       v-model="editing"
       :label="editText"
       :class="editClass"
+      :size="size"
       class="opacity-0 group-hover:opacity-100 transition-all"
       :show-icon="EditIcon"
       :hide-icon="DoneEditingIcon"
@@ -105,13 +100,12 @@ import {
 	FaSolidCheck as DoneEditingIcon,
 	FaSolidCircleXmark as ClearIcon,
 	FaSolidListCheck as DefaultSelectIcon,
-	FaSolidPencil as EditIcon,
-	FaSolidPlus as CreateIcon
+	FaSolidPencil as EditIcon
 } from "danx-icon";
 import { ref } from "vue";
 import { ActionTargetItem } from "../../../../types";
 import { ShowHideButton } from "../../../Utility/Buttons";
-import ActionButton from "../../../Utility/Buttons/ActionButton";
+import { ActionButtonProps, default as ActionButton } from "../../../Utility/Buttons/ActionButton";
 import EditableDiv from "./EditableDiv";
 
 defineEmits(["create", "update", "delete"]);
@@ -139,6 +133,7 @@ withDefaults(defineProps<{
 	nameEditable?: boolean;
 	clearable?: boolean;
 	disable?: boolean;
+	size?: ActionButtonProps["size"];
 }>(), {
 	selectText: "",
 	createText: "",
@@ -146,11 +141,12 @@ withDefaults(defineProps<{
 	clearText: "",
 	placeholder: "(No selection)",
 	selectClass: "bg-sky-800",
-	createClass: "bg-green-900",
+	createClass: "",
 	editClass: "",
 	clearClass: "rounded-full",
 	labelClass: "text-slate-600",
-	selectIcon: null
+	selectIcon: null,
+	size: "md"
 });
 
 const isSelecting = ref(false);

package/src/components/ActionTable/controls.ts

@@ -35,7 +35,8 @@ export function useControls(name: string, options: ListControlsOptions): ListCon
 	// Field options are the lists of field values available given the applied filter on the list query. These are used for drop-downs / options in forms, filters, etc.
 	// (ie: all states available under the current filter)
 	const fieldOptions = ref<AnyObject>({});
-	const isLoadingFilters = ref(false);
+	const isLoadingFieldOptions = ref(false);
+	const hasLoadedFieldOptions = ref(false);
 
 	const filterActiveCount = computed(() => Object.keys(activeFilter.value).filter(key => activeFilter.value[key] !== undefined).length);
 
@@ -108,6 +109,9 @@ export function useControls(name: string, options: ListControlsOptions): ListCon
 	 * Gets the field options for the given field name.
 	 */
 	function getFieldOptions(field: string): any[] {
+		if (!hasLoadedFieldOptions.value) {
+			loadFieldOptions();
+		}
 		return fieldOptions.value[field] || [];
 	}
 
@@ -115,15 +119,16 @@ export function useControls(name: string, options: ListControlsOptions): ListCon
 	 * Loads the filter field options for the current filter.
 	 */
 	async function loadFieldOptions() {
-		if (isLoadingFilters.value || !options.routes.fieldOptions || options.isFieldOptionsEnabled === false) return;
+		if (isLoadingFieldOptions.value || !options.routes.fieldOptions || options.isFieldOptionsEnabled === false) return;
 
-		isLoadingFilters.value = true;
+		isLoadingFieldOptions.value = true;
 		try {
 			fieldOptions.value = await options.routes.fieldOptions() || {};
+			hasLoadedFieldOptions.value = true;
 		} catch (e) {
 			// Fail silently
 		} finally {
-			isLoadingFilters.value = false;
+			isLoadingFieldOptions.value = false;
 		}
 	}
 
@@ -271,7 +276,7 @@ export function useControls(name: string, options: ListControlsOptions): ListCon
 				loadSummary();
 			}
 
-			if (!isLoadingFilters.value) {
+			if (!isLoadingFieldOptions.value) {
 				loadFieldOptions();
 			}
 		}, 1);
@@ -498,7 +503,8 @@ export function useControls(name: string, options: ListControlsOptions): ListCon
 		summary,
 		selectedRows,
 		isLoadingList,
-		isLoadingFilters,
+		isLoadingFieldOptions,
+		hasLoadedFieldOptions,
 		isLoadingSummary,
 		pager,
 		pagination,

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

@@ -145,7 +145,7 @@ const colorClass = computed(() => {
 		case "green":
 			return "text-green-900 bg-green-300 hover:bg-green-400";
 		case "green-invert":
-			return "text-lime-800 bg-green-200 hover:bg-lime-800 hover:text-green-200";
+			return "text-green-300 bg-green-900 hover:bg-green-800";
 		case "blue":
 			return "text-blue-900 bg-blue-300 hover:bg-blue-400";
 		case "sky":
@@ -155,7 +155,7 @@ const colorClass = computed(() => {
 		case "gray":
 			return "text-slate-200 bg-slate-800 hover:bg-slate-900";
 		default:
-			return "text-slate-200 hover:bg-slate-800";
+			return "";
 	}
 });
 const typeOptions = computed(() => {

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

@@ -3,6 +3,7 @@
     class="dx-confirm-dialog"
     v-bind="layoutProps"
     @close="onClose"
+    @keyup.enter="onConfirm"
   >
     <template
       v-for="slotName in childSlots"

package/src/types/controls.d.ts

@@ -85,7 +85,8 @@ export interface ListController<T = ActionTargetItem> {
 	summary: Ref<object | null>;
 	selectedRows: Ref<T[]>;
 	isLoadingList: Ref<boolean>;
-	isLoadingFilters: Ref<boolean>;
+	isLoadingFieldOptions: Ref<boolean>;
+	hasLoadedFieldOptions: Ref<boolean>;
 	isLoadingSummary: Ref<boolean>;
 	pager: ComputedRef<{
 		perPage: number;