quasar-ui-danx 0.4.32 → 0.4.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.4.32",
+  "version": "0.4.35",
   "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,
@@ -151,7 +154,7 @@ const selectedValue = computed(() => {
 	} else {
 		if (props.modelValue === null) return "__null__";
 
-		if (props.selectByObject) return props.modelValue.value || props.modelValue.id;
+		if (props.selectByObject) return props.modelValue?.value || props.modelValue?.id;
 
 		return props.modelValue;
 	}

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/ActionTable/controls.ts

@@ -73,7 +73,7 @@ export function useControls(name: string, options: ListControlsOptions): ListCon
 
 	async function loadList() {
 		if (!isInitialized || options.isListEnabled === false) return;
-		// isLoadingList.value = true;
+		isLoadingList.value = true;
 		try {
 			setPagedItems(await options.routes.list(pager.value));
 		} catch (e) {

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;
 	}
 
 	/**

package/src/helpers/formats.ts

@@ -29,40 +29,6 @@ export function remoteDateTime(dateTimeString: string) {
 	return DateTime.fromSQL(dateTimeString, { zone: "local" }).setZone(SERVER_TZ);
 }
 
-/**
- * Parses a date string into a Luxon DateTime object
- */
-export function parseDateTime(dateTime: string | DateTime | null): DateTime<boolean> | null {
-	if (typeof dateTime === "string") {
-		return parseSqlDateTime(dateTime) || parseQDate(dateTime) || parseQDateTime(dateTime);
-	}
-	return dateTime || DateTime.fromSQL("0000-00-00 00:00:00");
-}
-
-/**
- *  Parses a SQL formatted date string into a Luxon DateTime object
- */
-export function parseSqlDateTime(dateTime: string) {
-	const parsed = DateTime.fromSQL(dateTime.replace("T", " ").replace(/\//g, "-"));
-	return parsed.isValid ? parsed : null;
-}
-
-/**
- * Parses a Quasar formatted date string into a Luxon DateTime object
- */
-export function parseQDate(date: string, format = "yyyy/MM/dd"): DateTime<boolean> | null {
-	const parsed = DateTime.fromFormat(date, format);
-	return parsed.isValid ? parsed : null;
-}
-
-/**
- * Parses a Quasar formatted date/time string into a Luxon DateTime object
- */
-export function parseQDateTime(date: string, format = "yyyy/MM/dd HH:mm:ss"): DateTime<boolean> | null {
-	const parsed = DateTime.fromFormat(date, format);
-	return parsed.isValid ? parsed : null;
-}
-
 /**
  * Formats a Luxon DateTime object into a Quasar formatted date string
  * @param date
@@ -119,6 +85,89 @@ export function fDate(dateTime: string | DateTime | null, { empty = "--", format
 	return formatted || empty;
 }
 
+
+/**
+ * Parses a date string into a Luxon DateTime object
+ */
+export function parseDateTime(dateTime: string | DateTime | null): DateTime<boolean> | null {
+	if (typeof dateTime === "string") {
+		return parseGenericDateTime(dateTime);
+	}
+	return dateTime || DateTime.fromSQL("0000-00-00 00:00:00");
+}
+
+/**
+ *  Parses a SQL formatted date string into a Luxon DateTime object
+ */
+export function parseSqlDateTime(dateTime: string) {
+	const parsed = DateTime.fromSQL(dateTime.replace("T", " ").replace(/\//g, "-"));
+	return parsed.isValid ? parsed : null;
+}
+
+/**
+ * Parses a Quasar formatted date string into a Luxon DateTime object
+ */
+export function parseQDate(date: string, format = "yyyy/MM/dd"): DateTime<boolean> | null {
+	const parsed = DateTime.fromFormat(date, format);
+	return parsed.isValid ? parsed : null;
+}
+
+/**
+ * Parses a Quasar formatted date/time string into a Luxon DateTime object
+ */
+export function parseQDateTime(date: string, format = "yyyy/MM/dd HH:mm:ss"): DateTime<boolean> | null {
+	const parsed = DateTime.fromFormat(date, format);
+	return parsed.isValid ? parsed : null;
+}
+
+/**
+ * Parses a date string in various formats into a Luxon DateTime object.
+ * Tries a list of common formats until one works.
+ *
+ * @param {string} dateTimeString - The date string to parse.
+ * @param {string} [defaultZone="local"] - The default time zone to use if not specified.
+ * @returns {DateTime | null} - A Luxon DateTime object if parsing succeeds, otherwise null.
+ */
+export function parseGenericDateTime(dateTimeString: string, defaultZone = "local"): DateTime | null {
+	if (!dateTimeString) return null;
+
+	const formats = [
+		"yyyy-MM-dd",            // ISO date
+		"yyyy-MM-dd HH:mm:ss",   // ISO date with time
+		"MM/dd/yyyy",            // US-style date
+		"dd/MM/yyyy",            // European-style date
+		"MM/dd/yy",              // US short date
+		"dd/MM/yy",              // European short date
+		"yyyy/MM/dd",            // Alternative ISO
+		"MM-dd-yyyy",            // US with dashes
+		"dd-MM-yyyy",            // European with dashes
+		"M/d/yyyy",              // US date without leading zeros
+		"d/M/yyyy",              // European date without leading zeros
+		"yyyyMMdd"              // Compact ISO
+	];
+
+	for (const format of formats) {
+		const parsed = DateTime.fromFormat(dateTimeString, format, { zone: defaultZone });
+		if (parsed.isValid) {
+			return parsed;
+		}
+	}
+
+	// Fallback to ISO parsing for strings like "2022-11-18T10:10:10Z"
+	const isoParsed = DateTime.fromISO(dateTimeString, { zone: defaultZone });
+	if (isoParsed.isValid) {
+		return isoParsed;
+	}
+
+	// Fallback to SQL parsing for strings like "2022-11-18 10:10:10"
+	const sqlParsed = DateTime.fromSQL(dateTimeString, { zone: defaultZone });
+	if (sqlParsed.isValid) {
+		return sqlParsed;
+	}
+
+	return null;
+}
+
 /**
  * Formats a number of seconds into Hours / Minutes / Seconds or just Minutes and Seconds
  *

package/src/types/controls.d.ts

@@ -62,6 +62,11 @@ export interface ListControlsPagination {
 	rowsPerPage?: number;
 	perPage?: number;
 	filter?: ListControlsFilter;
+	fields?: ControlsFieldsList;
+}
+
+export interface ControlsFieldsList {
+	[key: string]: boolean | ControlsFieldsList;
 }
 
 export interface PagedItems<T = ActionTargetItem> {