quasar-ui-danx 0.4.32 → 0.4.33

package/package.json

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

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

@@ -1,8 +1,8 @@
 <template>
   <div class="inline-block relative">
     <div
-      contenteditable
-      class="relative inline-block transition duration-300 outline-none outline-offset-0 border-none focus:outline-4 hover:outline-4 rounded-sm z-10 min-w-10 min-h-10"
+      :contenteditable="readonly ? 'false' : 'true'"
+      class="relative inline-block transition duration-300 outline-none outline-offset-0 border-none rounded-sm z-10 min-w-10 min-h-10"
       :style="{minWidth, minHeight}"
       :class="contentClass"
       @input="onInput"
@@ -12,7 +12,7 @@
       {{ text }}
     </div>
     <div
-      v-if="!text && placeholder && !hasFocus"
+      v-if="!text && placeholder && !hasFocus && !readonly"
       ref="placeholderDiv"
       class="text-gray-600 absolute-top-left whitespace-nowrap z-1 pointer-events-none"
     >
@@ -31,6 +31,7 @@ const props = withDefaults(defineProps<{
 	color?: string;
 	textColor?: string;
 	debounceDelay?: number;
+	readonly?: boolean;
 	placeholder?: string;
 }>(), {
 	modelValue: "",
@@ -43,16 +44,16 @@ const props = withDefaults(defineProps<{
 });
 
 const text = ref(props.modelValue);
-const placeholderDiv = ref(null);
-const minWidth = ref(0);
-const minHeight = ref(0);
+const placeholderDiv = ref<Element | null>(null);
+const minWidth = ref<string>("0");
+const minHeight = ref<string>("0");
 const hasFocus = ref(false);
 
 onMounted(() => {
 	// Set the min-width to the width of the placeholder
 	if (placeholderDiv.value) {
-		minWidth.value = placeholderDiv.value.offsetWidth + "px";
-		minHeight.value = placeholderDiv.value.offsetHeight + "px";
+		minWidth.value = placeholderDiv.value?.offsetWidth + "px";
+		minHeight.value = placeholderDiv.value?.offsetHeight + "px";
 	}
 });
 
@@ -72,9 +73,12 @@ function onInput(e) {
 }
 
 const contentClass = computed(() => [
-	`hover:bg-${props.color} focus:bg-${props.color}`,
-	`hover:text-${props.textColor} focus:text-${props.textColor}`,
-	`hover:outline-${props.color} focus:outline-${props.color}`,
+	...(props.readonly ? [] : [
+		`hover:bg-${props.color} focus:bg-${props.color}`,
+		`hover:text-${props.textColor} focus:text-${props.textColor}`,
+		`hover:outline-${props.color} focus:outline-${props.color}`,
+		"focus:outline-4 hover:outline-4"
+	]),
 	text.value ? "" : "!bg-none"
 ]);
 </script>

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

@@ -22,6 +22,7 @@
       label=""
       :input-class="{'is-hidden': !isShowing, [inputClass]: true}"
       class="max-w-full dx-select-field"
+      :class="selectClass"
       @filter="onFilter"
       @clear="onClear"
       @popup-show="onShow"
@@ -82,6 +83,7 @@ export interface Props extends QSelectProps {
 	selectionLabel?: string | ((option) => string);
 	chipLimit?: number;
 	inputClass?: string;
+	selectClass?: string;
 	selectionClass?: string;
 	options?: unknown[];
 	filterable?: boolean;
@@ -97,6 +99,7 @@ const props = withDefaults(defineProps<Props>(), {
 	selectionLabel: null,
 	chipLimit: 3,
 	inputClass: "",
+	selectClass: "",
 	selectionClass: "",
 	options: () => [],
 	filterFn: null,

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

@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-stretch flex-nowrap gap-x-4">
     <QBtn
-      class="bg-green-900 px-4"
+      :class="createClass"
       :loading="loading"
       @click="$emit('create')"
     >
@@ -11,6 +11,14 @@
       />
       {{ createText }}
     </QBtn>
+    <ShowHideButton
+      v-if="showEdit"
+      v-model="editing"
+      :disable="!canEdit"
+      :label="editText"
+      :class="editClass"
+      :show-icon="EditIcon"
+    />
     <SelectField
       v-model="selected"
       class="flex-grow"
@@ -19,17 +27,10 @@
       :select-by-object="selectByObject"
       :option-label="optionLabel"
     />
-    <ShowHideButton
-      v-if="showEdit"
-      v-model="editing"
-      :disable="!canEdit"
-      :label="editText"
-      class="bg-sky-800 w-1/5"
-    />
   </div>
 </template>
 <script setup lang="ts">
-import { FaSolidPlus as CreateIcon } from "danx-icon";
+import { FaSolidPencil as EditIcon, FaSolidPlus as CreateIcon } from "danx-icon";
 import { QSelectOption } from "quasar";
 import { ActionTargetItem } from "../../../../types";
 import { ShowHideButton } from "../../../Utility/Buttons";
@@ -47,10 +48,14 @@ withDefaults(defineProps<{
 	optionLabel?: string;
 	createText?: string;
 	editText?: string;
+	createClass?: string;
+	editClass?: string;
 	clearable?: boolean;
 }>(), {
 	optionLabel: "label",
-	createText: "Create",
-	editText: "Edit"
+	createText: "",
+	editText: "",
+	createClass: "bg-green-900 px-4",
+	editClass: "bg-sky-800 px-4"
 });
 </script>

package/src/components/DragAndDrop/ListItemDraggable.vue

@@ -1,19 +1,23 @@
 <template>
   <div
-    :class="{'cursor-move': !showHandle}"
-    draggable="true"
-    @dragstart.stop="dragAndDrop.dragStart"
-    @dragend="dragAndDrop.dragEnd"
+    :class="{'cursor-move': !showHandle && !disabled}"
+    :draggable="disabled ? undefined : 'true'"
+    @dragstart.stop="disabled ? null : dragAndDrop.dragStart"
+    @dragend="disabled ? null : dragAndDrop.dragEnd"
   >
     <div :class="contentClass">
       <div
         v-if="showHandle"
-        class="cursor-move"
-        :class="handleClass"
+        :class="resolvedHandleClass"
       >
+        <div
+          v-if="disabled"
+          :class="handleSize"
+        />
         <SvgImg
+          v-else
           :svg="DragHandleIcon"
-          class="w-4 h-4"
+          :class="handleSize"
           alt="drag-handle"
         />
       </div>
@@ -24,6 +28,7 @@
   </div>
 </template>
 <script setup lang="ts">
+import { computed } from "vue";
 import { DragHandleDotsIcon as DragHandleIcon } from "../../svg";
 import { SvgImg } from "../Utility";
 import { ListDragAndDrop } from "./listDragAndDrop";
@@ -37,14 +42,21 @@ const props = withDefaults(defineProps<{
 	changeDropZone?: boolean;
 	contentClass?: string | object;
 	handleClass?: string | object;
+	handleSize?: string;
 	listItems?: any[];
+	disabled?: boolean;
 }>(), {
 	direction: "vertical",
+	handleSize: "w-4 h-4",
 	handleClass: "",
 	contentClass: "flex flex-nowrap items-center",
 	listItems: () => []
 });
 
+const resolvedHandleClass = computed(() => ({
+	"cursor-move": !props.disabled,
+	...(typeof props.handleClass === "string" ? { [props.handleClass]: true } : props.handleClass)
+}));
 const dragAndDrop = new ListDragAndDrop()
 	.setDropZone(props.dropZone)
 	.setOptions({ showPlaceholder: true, allowDropZoneChange: props.changeDropZone, direction: props.direction })

package/src/helpers/actions.ts

@@ -1,7 +1,7 @@
 import { useDebounceFn } from "@vueuse/core";
 import { FaSolidCopy as CopyIcon, FaSolidPencil as EditIcon, FaSolidTrash as DeleteIcon } from "danx-icon";
 import { uid } from "quasar";
-import { h, isReactive, Ref, shallowRef } from "vue";
+import { h, isReactive, Ref, shallowReactive, shallowRef } from "vue";
 import { ConfirmActionDialog, CreateNewWithNameDialog } from "../components";
 import type { ActionGlobalOptions, ActionOptions, ActionTarget, ListController, ResourceAction } from "../types";
 import { FlashMessages } from "./FlashMessages";
@@ -48,35 +48,39 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionGlobal
 	 */
 	function getAction(actionName: string, actionOptions?: Partial<ActionOptions>): ResourceAction {
 		/// Resolve the action options or resource action based on the provided input
-		const baseOptions = actions.find(a => a.name === actionName) || { name: actionName };
+		let resourceAction: Partial<ResourceAction> = actions.find(a => a.name === actionName) || { name: actionName };
 
 		if (actionOptions) {
-			Object.assign(baseOptions, actionOptions);
+			Object.assign(resourceAction, actionOptions);
 		}
 
 		// If the action is already reactive, return it
-		if (isReactive(baseOptions) && "__type" in baseOptions) return baseOptions as ResourceAction;
-
-		const resourceAction: ResourceAction = storeObject({
-			onAction: globalOptions?.routes?.applyAction,
-			onBatchAction: globalOptions?.routes?.batchAction,
-			onBatchSuccess: globalOptions?.controls?.clearSelectedRows,
-			...globalOptions,
-			...baseOptions,
-			trigger: (target, input) => performAction(resourceAction, target, input),
-			isApplying: false,
-			__type: "__Action:" + namespace
-		});
+		if (!isReactive(resourceAction) || !("__type" in resourceAction)) {
+			resourceAction = storeObject({
+				onAction: globalOptions?.routes?.applyAction,
+				onBatchAction: globalOptions?.routes?.batchAction,
+				onBatchSuccess: globalOptions?.controls?.clearSelectedRows,
+				...globalOptions,
+				...resourceAction,
+				isApplying: false,
+				__type: "__Action:" + namespace
+			});
 
-		// Assign Trigger function if it doesn't exist
-		if (baseOptions.debounce) {
-			resourceAction.trigger = useDebounceFn((target, input) => performAction(resourceAction, target, input), baseOptions.debounce);
+			// Splice the resourceAction in place of the action in the actions list
+			actions.splice(actions.findIndex(a => a.name === actionName), 1, resourceAction as ResourceAction);
 		}
 
-		// Splice the resourceAction in place of the action in the actions list
-		actions.splice(actions.findIndex(a => a.name === actionName), 1, resourceAction);
+		// Return a clone of the action so it can be modified without affecting the original
+		const clonedAction = shallowReactive({ ...resourceAction }) as ResourceAction;
+
+		// Assign Trigger function if it doesn't exist
+		if (clonedAction.debounce) {
+			clonedAction.trigger = useDebounceFn((target, input) => performAction(clonedAction, target, input), clonedAction.debounce);
+		} else {
+			clonedAction.trigger = (target, input) => performAction(clonedAction, target, input);
+		}
 
-		return resourceAction;
+		return clonedAction;
 	}
 
 	/**