quasar-ui-danx 0.4.46 → 0.4.48

package/package.json

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

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

@@ -1,64 +1,57 @@
 <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"
     >
-      <template #label>
-        <QMenu
-          :model-value="isSelecting"
-          @before-hide="isSelecting = false"
-          @hide="isSelecting = false"
-        >
-          <div>
-            <div
-              v-for="option in options"
-              :key="option.id"
-              v-ripple
-              class="cursor-pointer flex items-center relative"
-              :class="{'bg-sky-900 hover:bg-sky-800': selected?.id === option.id, 'hover:bg-slate-600': selected?.id !== option.id}"
-              @click="selected = option"
-            >
-              <div class="flex-grow px-4 py-2">
-                {{ option.name }}
-              </div>
+      <QMenu
+        :model-value="isSelecting"
+        @before-hide="isSelecting = false"
+        @hide="isSelecting = false"
+      >
+        <div>
+          <div
+            v-for="option in options"
+            :key="option.id"
+            v-ripple
+            class="cursor-pointer flex items-center relative"
+            :class="{'bg-sky-900 hover:bg-sky-800': selected?.id === option.id, 'hover:bg-slate-600': selected?.id !== option.id}"
+            @click="selected = option"
+          >
+            <div class="flex-grow px-4 py-2">
+              {{ option.name }}
+            </div>
+            <ActionButton
+              v-if="deletable"
+              type="trash"
+              class="ml-4 mr-2"
+              :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">
               <ActionButton
-                v-if="deletable"
-                type="trash"
-                class="ml-4 mr-2"
-                @click.stop.prevent="$emit('delete', option)"
+                type="create"
+                color="green"
+                :class="createClass"
+                :label="createText"
+                :saving="loading"
+                :size="size"
+                @click="$emit('create')"
               />
             </div>
-            <template v-if="creatable">
-              <QSeparator class="bg-slate-400 my-2" />
-              <div class="px-4 mb-2">
-                <QBtn
-                  :class="createClass"
-                  :loading="loading"
-                  @click="$emit('create')"
-                >
-                  <CreateIcon
-                    class="w-3"
-                    :class="createText ? 'mr-2' : ''"
-                  />
-                  {{ createText }}
-                </QBtn>
-              </div>
-            </template>
-          </div>
-        </QMenu>
-      </template>
+          </template>
+        </div>
+      </QMenu>
     </ShowHideButton>
 
     <div :class="labelClass">
@@ -85,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"
@@ -106,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"]);
@@ -140,6 +133,7 @@ withDefaults(defineProps<{
 	nameEditable?: boolean;
 	clearable?: boolean;
 	disable?: boolean;
+	size?: ActionButtonProps["size"];
 }>(), {
 	selectText: "",
 	createText: "",
@@ -147,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/ShowHideButton.vue

@@ -39,14 +39,12 @@ const props = withDefaults(defineProps<Props>(), {
 	label: ""
 });
 
-console.log("isShowing", isShowing.value);
 const SETTINGS_KEY = "show-hide-button";
 const settings = getItem(SETTINGS_KEY, {});
 
 if (props.name) {
 	if (settings[props.name] !== undefined) {
 		isShowing.value = settings[props.name];
-		console.log("setting is sowing to", isShowing.value);
 	}
 }
 

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/components/Utility/Widgets/LabelPillWidget.vue

@@ -21,6 +21,7 @@ const colorClasses = {
 	yellow: "bg-yellow-950 text-yellow-400",
 	blue: "bg-blue-950 text-blue-400",
 	slate: "bg-slate-950 text-slate-400",
+	"slate-mid": "bg-slate-800 text-slate-400",
 	gray: "bg-slate-700 text-gray-300",
 	none: ""
 };

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;