quasar-ui-danx 0.4.28 → 0.4.30

package/package.json

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

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

@@ -1,30 +1,63 @@
 <template>
-  <div
-    contenteditable
-    class="inline-block hover:bg-blue-200 focus:bg-blue-200 transition duration-300 outline-none"
-    @input="onInput"
-  >
-    {{ text }}
+  <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"
+      :style="{minWidth, minHeight}"
+      :class="contentClass"
+      @input="onInput"
+      @focusin="hasFocus = true"
+      @focusout="hasFocus = false"
+    >
+      {{ text }}
+    </div>
+    <div
+      v-if="!text && placeholder"
+      ref="placeholderDiv"
+      class="text-gray-600 absolute-top-left whitespace-nowrap z-1"
+    >
+      {{ placeholder }}
+    </div>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useDebounceFn } from "@vueuse/core";
-import { ref } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 
 const emit = defineEmits(["update:model-value", "change"]);
-const props = defineProps({
-	modelValue: {
-		type: String,
-		required: true
-	},
-	debounceDelay: {
-		type: Number,
-		default: 1000
-	}
+const props = withDefaults(defineProps<{
+	modelValue: string;
+	color?: string;
+	debounceDelay?: number;
+	placeholder?: string;
+}>(), {
+	// NOTE: You must safe-list required colors in tailwind.config.js
+	//       Add text-blue-900, hover:bg-blue-200, hover:outline-blue-200, focus:outline-blue-200 and focus:bg-blue-200 for the following config
+	color: "blue-200",
+	textColor: "blue-900",
+	debounceDelay: 1000,
+	placeholder: "Enter Text..."
 });
 
 const text = ref(props.modelValue);
+const placeholderDiv = ref(null);
+const minWidth = ref(0);
+const minHeight = ref(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";
+	}
+});
+
+watch(() => props.modelValue, (value) => {
+	if (!hasFocus.value)
+		text.value = value;
+});
 
 const debouncedChange = useDebounceFn(() => {
 	emit("update:model-value", text.value);
@@ -36,4 +69,9 @@ function onInput(e) {
 	debouncedChange();
 }
 
+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}`
+]);
 </script>

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

@@ -23,6 +23,7 @@
         :disable="disabled"
         :label-slot="!noLabel"
         :input-class="inputClass"
+        :rows="rows"
         :class="{'dx-input-prepend-label': prependLabel}"
         stack-label
         :type="type"
@@ -71,6 +72,7 @@ withDefaults(defineProps<TextFieldProps>(), {
 	labelClass: "",
 	inputClass: "",
 	maxLength: null,
+	rows: 3,
 	debounce: 0,
 	placeholder: null
 });

package/src/components/ActionTable/Form/RenderedForm.vue

@@ -93,25 +93,11 @@
       </div>
     </template>
     <slot />
-    <div
-      v-if="savedAt"
-      :class="savingClass"
-      class="dx-saving-indicator flex items-center flex-nowrap"
-    >
-      <slot
-        v-if="saving"
-        name="saving"
-      >
-        Saving...
-        <QSpinnerPie class="ml-2" />
-      </slot>
-      <slot
-        v-else
-        name="saved"
-      >
-        Saved at {{ fDateTime(savedAt, { format: "M/d/yy h:mm:ssa" }) }}
-      </slot>
-    </div>
+    <SaveStateIndicator
+      :saving="saving"
+      :saved-at="savedAt"
+      :saving-class="savingClass"
+    />
     <ConfirmDialog
       v-if="variationToEdit !== false"
       title="Change variation name"
@@ -139,7 +125,7 @@
 <script setup lang="ts">
 import { ExclamationCircleIcon as MissingIcon, PencilIcon as EditIcon } from "@heroicons/vue/solid";
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
-import { fDateTime, FlashMessages, incrementName, replace } from "../../../helpers";
+import { FlashMessages, incrementName, replace } from "../../../helpers";
 import { TrashIcon as RemoveIcon } from "../../../svg";
 import { AnyObject, FormFieldValue, RenderedFormProps } from "../../../types";
 import { ConfirmDialog, RenderVnode } from "../../Utility";
@@ -154,6 +140,7 @@ import {
 	TextField,
 	WysiwygField
 } from "./Fields";
+import SaveStateIndicator from "./Utilities/SaveStateIndicator";
 
 const props = withDefaults(defineProps<RenderedFormProps>(), {
 	values: null,

package/src/components/ActionTable/Form/Utilities/MaxLengthCounter.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="maxLength"
-    class="danx-input-chars mt-1"
+    class="danx-input-chars"
     :class="{'danx-input-chars--error': length > maxLength}"
   >
     {{ fNumber(length) }} / {{ fNumber(maxLength) }} characters

package/src/components/ActionTable/Form/Utilities/SaveStateIndicator.vue

@@ -0,0 +1,37 @@
+<template>
+  <div
+    :class="savingClass"
+    class="dx-saving-indicator flex items-center flex-nowrap"
+  >
+    <slot
+      v-if="saving"
+      name="saving"
+    >
+      Saving...
+      <QSpinnerPie class="ml-2" />
+    </slot>
+    <slot
+      v-else
+      name="saved"
+    >
+      <template v-if="savedAt">
+        Saved at {{ fDateTime(savedAt, { format: "M/d/yy h:mm:ssa" }) }}
+      </template>
+      <template v-else>
+        Not saved
+      </template>
+    </slot>
+  </div>
+</template>
+<script setup lang="ts">
+import { fDateTime } from "../../../../helpers";
+
+withDefaults(defineProps<{
+	saving?: boolean;
+	savedAt?: string;
+	savingClass?: string;
+}>(), {
+	savingClass: "text-sm text-slate-500",
+	savedAt: ""
+});
+</script>

package/src/components/ActionTable/Form/Utilities/index.ts

@@ -1 +1,2 @@
 export { default as MaxLengthCounter } from "./MaxLengthCounter.vue";
+export { default as SaveStateIndicator } from "./SaveStateIndicator.vue";

package/src/components/ActionTable/Layouts/ActionTableLayout.vue

@@ -25,7 +25,7 @@
           v-if="activeFilter"
           :name="controller.name"
           :show-filters="showFilters"
-          :filters="controller.filters.value"
+          :filters="controller.filters?.value"
           :active-filter="activeFilter"
           class="dx-action-table-filters"
           @update:active-filter="controller.setActiveFilter"
@@ -73,7 +73,7 @@
 </template>
 <script setup lang="ts">
 import { computed } from "vue";
-import { ActionController, ListController } from "../../../types";
+import { DanxController } from "../../../types";
 import { PanelsDrawer } from "../../PanelsDrawer";
 import { PreviousNextControls } from "../../Utility";
 import ActionTable from "../ActionTable.vue";
@@ -81,7 +81,7 @@ import { CollapsableFiltersSidebar } from "../Filters";
 import { ActionToolbar } from "../Toolbars";
 
 export interface ActionTableLayoutProps {
-	controller: ListController & ActionController;
+	controller: DanxController;
 	exporter?: () => Promise<void>;
 	hideToolbar?: boolean;
 	panelTitleField?: string;

package/src/components/ActionTable/{listControls.ts → controls.ts}

@@ -1,4 +1,4 @@
-import { computed, Ref, ref, shallowRef, watch } from "vue";
+import { computed, ref, shallowRef, watch } from "vue";
 import { RouteParams, Router } from "vue-router";
 import { danxOptions } from "../../config";
 import { getItem, latestCallOnly, setItem, storeObject, waitForRef } from "../../helpers";
@@ -10,11 +10,12 @@ import {
 	ListControlsFilter,
 	ListControlsOptions,
 	ListControlsPagination,
-	PagedItems
+	PagedItems,
+	Ref
 } from "../../types";
 import { getFilterFromUrl } from "./listHelpers";
 
-export function useListControls(name: string, options: ListControlsOptions): ListController {
+export function useControls(name: string, options: ListControlsOptions): ListController {
 	let isInitialized = false;
 	const PAGE_SETTINGS_KEY = `dx-${name}-pager`;
 	const pagedItems = shallowRef<PagedItems | null>(null);
@@ -72,12 +73,13 @@ export function useListControls(name: string, options: ListControlsOptions): Lis
 
 	async function loadList() {
 		if (!isInitialized) return;
-		isLoadingList.value = true;
+		// isLoadingList.value = true;
 		try {
 			setPagedItems(await options.routes.list(pager.value));
-			isLoadingList.value = false;
 		} catch (e) {
 			// Fail silently
+		} finally {
+			isLoadingList.value = false;
 		}
 	}
 
@@ -91,9 +93,10 @@ export function useListControls(name: string, options: ListControlsOptions): Lis
 		}
 		try {
 			summary.value = await options.routes.summary(summaryFilter);
-			isLoadingSummary.value = false;
 		} catch (e) {
 			// Fail silently
+		} finally {
+			isLoadingSummary.value = false;
 		}
 	}
 
@@ -116,9 +119,10 @@ export function useListControls(name: string, options: ListControlsOptions): Lis
 		isLoadingFilters.value = true;
 		try {
 			fieldOptions.value = await options.routes.fieldOptions(activeFilter.value) || {};
-			isLoadingFilters.value = false;
 		} catch (e) {
 			// Fail silently
+		} finally {
+			isLoadingFilters.value = false;
 		}
 	}
 

package/src/components/ActionTable/index.ts

@@ -1,8 +1,8 @@
 export * from "./Columns";
+export * from "./controls";
 export * from "./Filters";
 export * from "./Form";
 export * from "./Layouts";
-export * from "./listControls";
 export * from "./listHelpers";
 export * from "./tableColumns";
 export * from "./Toolbars";

package/src/components/DragAndDrop/ListItemDraggable.vue

@@ -1,13 +1,14 @@
 <template>
   <div
-    class="cursor-move"
+    :class="{'cursor-move': !showHandle}"
     draggable="true"
-    @dragstart="dragAndDrop.dragStart"
+    @dragstart.stop="dragAndDrop.dragStart"
     @dragend="dragAndDrop.dragEnd"
   >
-    <div class="flex items-center">
+    <div :class="contentClass">
       <div
         v-if="showHandle"
+        class="cursor-move"
         :class="handleClass"
       >
         <SvgImg
@@ -33,17 +34,20 @@ const props = withDefaults(defineProps<{
 	dropZone: string | (() => string);
 	direction?: "vertical" | "horizontal";
 	showHandle?: boolean;
+	changeDropZone?: boolean;
+	contentClass?: string | object;
 	handleClass?: string | object;
 	listItems?: any[];
 }>(), {
 	direction: "vertical",
 	handleClass: "",
+	contentClass: "flex flex-nowrap items-center",
 	listItems: () => []
 });
 
 const dragAndDrop = new ListDragAndDrop()
 	.setDropZone(props.dropZone)
-	.setOptions({ showPlaceholder: true, direction: props.direction })
+	.setOptions({ showPlaceholder: true, allowDropZoneChange: props.changeDropZone, direction: props.direction })
 	.onStart(() => dragging.value = true)
 	.onEnd(() => dragging.value = false)
 	.onDropZoneChange((target, dropZone, newPosition, oldPosition, data) => {

package/src/components/DragAndDrop/dragAndDrop.ts

@@ -6,6 +6,7 @@ export class DragAndDrop {
 		direction?: string,
 		hideDragImage?: boolean,
 		showPlaceholder?: boolean,
+		allowDropZoneChange?: boolean,
 	} = { direction: "vertical", hideDragImage: false };
 
 	// State
@@ -138,7 +139,7 @@ export class DragAndDrop {
 	 */
 	dragEnd(e) {
 		this.currentDropZone = null;
-		this.abortController.abort();
+		this.abortController?.abort();
 		this.draggableData = null;
 		this.onEndCb && this.onEndCb(e);
 	}

package/src/components/DragAndDrop/listDragAndDrop.ts

@@ -19,6 +19,7 @@ export class ListDragAndDrop extends DragAndDrop {
 	constructor(options = {}) {
 		super({
 			showPlaceholder: true,
+			allowDropZoneChange: true,
 			...options
 		});
 	}
@@ -156,7 +157,7 @@ export class ListDragAndDrop extends DragAndDrop {
 	 */
 	getChildren() {
 		return [...(this.currentDropZone?.children || [])].filter(
-				(c) => c.className.match(/drag-placeholder/) === null
+				(c) => c.className.match(/dx-drag-placeholder/) === null
 		);
 	}
 
@@ -167,6 +168,13 @@ export class ListDragAndDrop extends DragAndDrop {
 		return target.closest(`[data-drop-zone]`);
 	}
 
+	/**
+	 * Check if the current drop zone is the same as the initial drop zone
+	 */
+	isSameDropZone() {
+		return this.currentDropZone === this.initialDropZone;
+	}
+
 	/**
 	 * Find the element at the current cursor position in the given drop zone
 	 * @param point
@@ -236,19 +244,24 @@ export class ListDragAndDrop extends DragAndDrop {
 	 * Render a placeholder element at the given position (in between the elements)
 	 */
 	renderPlaceholder() {
+		// If we're not allowed to change drop zones and we're not in the same drop zone, don't render the placeholder
+		if (!this.options.allowDropZoneChange && !this.isSameDropZone()) {
+			return;
+		}
+
 		if (!this.placeholder) {
 			this.placeholder = document.createElement("div");
-			this.placeholder.classList.add("drag-placeholder");
+			this.placeholder.classList.add("dx-drag-placeholder");
 		}
 
 		// Make sure the placeholder is oriented correctly
 		if (this.isVertical()) {
-			this.placeholder.classList.add("direction-vertical");
-			this.placeholder.classList.remove("direction-horizontal");
+			this.placeholder.classList.add("dx-direction-vertical");
+			this.placeholder.classList.remove("dx-direction-horizontal");
 			this.placeholder.style.height = undefined;
 		} else {
-			this.placeholder.classList.add("direction-horizontal");
-			this.placeholder.classList.remove("direction-vertical");
+			this.placeholder.classList.add("dx-direction-horizontal");
+			this.placeholder.classList.remove("dx-direction-vertical");
 			this.placeholder.style.height =
 					this.currentDropZone.getBoundingClientRect().height + "px";
 		}

package/src/helpers/FileUpload.ts

@@ -243,11 +243,11 @@ export class FileUpload {
 	/**
 	 * Mark the presigned upload as completed and return the file resource from the platform server
 	 */
-	async completePresignedUpload(fileUpload: XHRFileUpload) {
+	async completePresignedUpload(xhrFile: XHRFileUpload) {
 		// Show 95% as the last 5% will be to complete the presigned upload
-		this.fireProgressCallback(fileUpload, .95);
+		this.fireProgressCallback(xhrFile, .95);
 
-		if (!fileUpload.file.resource_id) {
+		if (!xhrFile.file.resource_id) {
 			throw new Error("File resource ID is required to complete presigned upload");
 		}
 
@@ -256,7 +256,7 @@ export class FileUpload {
 		}
 
 		// Let the platform know the presigned upload is complete
-		return await this.options.completePresignedUpload(fileUpload.file.resource_id);
+		return await this.options.completePresignedUpload(xhrFile.file.resource_id, xhrFile);
 	}
 
 	/**

package/src/helpers/files.ts

@@ -1,53 +1,66 @@
 import ExifReader from "exifreader";
+import { UploadedFile } from "src/types";
 import { useCompatibility } from "./compatibility";
 import { FlashMessages } from "./FlashMessages";
 
-export async function resolveFileLocation(file, waitMessage = null) {
-    if (file.location) {
-        return file.location;
-    }
+export async function resolveFileLocation(file: UploadedFile, waitMessage: string | null = null) {
+	if (file.location) {
+		return file.location;
+	}
 
-    try {
-        const tags = await ExifReader.load(file.blobUrl || file.url, {
-            expanded: true
-        });
-        if (tags.gps) {
-            return {
-                latitude: tags.gps.Latitude,
-                longitude: tags.gps.Longitude
-            };
-        }
+	try {
+		const tags = await ExifReader.load(file.blobUrl || file.url || "", {
+			expanded: true
+		});
+		if (tags.gps) {
+			return {
+				latitude: tags.gps.Latitude,
+				longitude: tags.gps.Longitude
+			};
+		}
+	} catch (error) {
+		console.error("Failed to load EXIF data from file:", error);
+	}
 
-        const { waitForLocation, location } = useCompatibility();
+	try {
+		const { waitForLocation, location } = useCompatibility();
 
-        // Show a waiting for location message if we have not returned within 1 second
-        if (waitMessage) {
-            setTimeout(() => {
-                if (!location.value && waitMessage) {
-                    FlashMessages.warning(waitMessage);
-                }
-            }, 1000);
-        }
+		// Show a waiting for location message if we have not returned within 1 second
+		if (waitMessage) {
+			setTimeout(() => {
+				if (!location.value && waitMessage) {
+					FlashMessages.warning(waitMessage);
+				}
+			}, 1000);
+		}
 
-        // Wait for the browser to return the location (https only as http will not return a location)
-        if (window.location.protocol === "https:") {
-            await waitForLocation();
-        }
-        // Ignore the wait message if we already returned
-        waitMessage = false;
-        if (!location.value) {
-            return null;
-        }
+		// Wait for the browser to return the location (https only as http will not return a location)
+		if (window.location.protocol === "https:") {
+			await waitForLocation();
+		} else if (window.location.href.match("localhost")) {
+			// XXX: Special case for local development so we can test without https
+			return {
+				latitude: 37.7749,
+				longitude: -122.4194,
+				accuracy: 1,
+				altitude: 0,
+				altitudeAccuracy: 0
+			};
+		}
 
-        return {
-            latitude: location.value.latitude,
-            longitude: location.value.longitude,
-            accuracy: location.value.accuracy,
-            altitude: location.value.altitude,
-            altitudeAccuracy: location.value.altitudeAccuracy
-        };
-    } catch (error) {
-        console.error(error);
-        return null;
-    }
+		if (!location.value) {
+			return null;
+		}
+
+		return {
+			latitude: location.value.latitude,
+			longitude: location.value.longitude,
+			accuracy: location.value.accuracy,
+			altitude: location.value.altitude,
+			altitudeAccuracy: location.value.altitudeAccuracy
+		};
+	} catch (error) {
+		console.error(error);
+		return null;
+	}
 }

package/src/types/actions.d.ts

@@ -1,25 +1,27 @@
-import { ListController, ListControlsRoutes } from "src/types/controls";
+import { FilterGroup, ListController, ListControlsRoutes } from "src/types/controls";
+import { FormField } from "src/types/forms";
+import { TableColumn } from "src/types/tables";
 import { VNode } from "vue";
-import { AnyObject, TypedObject } from "./shared";
-
-export interface ActionPanel {
-	name: string | number;
-	label: string;
-	category?: string;
-	class?: string | object;
-	enabled?: boolean | ((target: ActionTargetItem) => boolean);
-	tabVnode?: (target: ActionTargetItem | null | undefined, activePanel: string | number) => VNode | any;
-	vnode: (target: ActionTargetItem | null | undefined) => VNode | any;
-}
+import { AnyObject, ComputedRef, TypedObject } from "./shared";
 
 export interface ActionTargetItem extends TypedObject {
 	isSaving?: boolean;
 	updated_at?: string;
 }
 
-export type ActionTarget = ActionTargetItem[] | ActionTargetItem | null;
+export type ActionTarget<T = ActionTargetItem> = T[] | T | null;
 
-export interface ActionOptions {
+export interface ActionPanel<T = ActionTargetItem> {
+	name: string | number;
+	label: string;
+	category?: string;
+	class?: string | object;
+	enabled?: boolean | ((target: T) => boolean);
+	tabVnode?: (target: T | null | undefined, activePanel: string | number) => VNode | any;
+	vnode: (target: T | null | undefined) => VNode | any;
+}
+
+export interface ActionOptions<T = ActionTargetItem> {
 	name: string;
 	alias?: string;
 	label?: string;
@@ -30,17 +32,17 @@ export interface ActionOptions {
 	category?: string;
 	class?: string;
 	debounce?: number;
-	optimistic?: boolean | ((action: ActionOptions, target: ActionTargetItem | null, input: any) => void);
-	vnode?: ((target: ActionTarget) => VNode) | any;
-	enabled?: (target: object) => boolean;
-	batchEnabled?: (targets: object[]) => boolean;
-	onAction?: (action: string | ResourceAction | ActionOptions, target: ActionTargetItem | null, input?: AnyObject | any) => Promise<AnyObject | any> | void;
-	onBatchAction?: (action: string | ResourceAction | ActionOptions, targets: ActionTargetItem[], input: any) => Promise<AnyObject | any> | void;
-	onStart?: (action: ActionOptions | null, targets: ActionTarget, input: any) => boolean;
-	onSuccess?: (result: any, targets: ActionTarget, input: any) => any;
-	onBatchSuccess?: (result: any, targets: ActionTargetItem[], input: any) => any;
-	onError?: (result: any, targets: ActionTarget, input: any) => any;
-	onFinish?: (result: any, targets: ActionTarget, input: any) => any;
+	optimistic?: boolean | ((action: ActionOptions<T>, target: T | null, input: any) => void);
+	vnode?: (target: ActionTarget<T>, data: any) => VNode | any;
+	enabled?: (target: ActionTarget<T>) => boolean;
+	batchEnabled?: (targets: T[]) => boolean;
+	onAction?: (action: string | ResourceAction<T> | ActionOptions<T>, target: T | null, input?: AnyObject | any) => Promise<AnyObject | any> | void;
+	onBatchAction?: (action: string | ResourceAction<T> | ActionOptions<T>, targets: T[], input: any) => Promise<AnyObject | any> | void;
+	onStart?: (action: ActionOptions<T> | null, targets: ActionTarget<T>, input: any) => boolean;
+	onSuccess?: (result: any, targets: ActionTarget<T>, input: any) => any;
+	onBatchSuccess?: (result: any, targets: T[], input: any) => any;
+	onError?: (result: any, targets: ActionTarget<T>, input: any) => any;
+	onFinish?: (result: any, targets: ActionTarget<T>, input: any) => any;
 }
 
 export interface ActionGlobalOptions extends Partial<ActionOptions> {
@@ -48,8 +50,24 @@ export interface ActionGlobalOptions extends Partial<ActionOptions> {
 	controls?: ListController;
 }
 
-export interface ResourceAction extends ActionOptions {
+export interface ResourceAction<T = ActionTargetItem> extends ActionOptions<T> {
 	isApplying: boolean;
-	trigger: (target?: ActionTarget, input?: any) => Promise<any>;
+	trigger: (target?: ActionTarget<T>, input?: any) => Promise<any>;
 	__type: string;
 }
+
+export interface ActionController<T = ActionTargetItem> {
+	// Actions
+	action?: (actionName: string, target?: T | null, input?: any) => Promise<any | void>;
+	getAction?: (actionName: string, actionOptions?: Partial<ActionOptions>) => ResourceAction;
+	getActions?: (names?: string[]) => ResourceAction[];
+	extendAction?: (actionName: string, extendedId: string | number, actionOptions: Partial<ActionOptions>) => ResourceAction;
+	modifyAction?: (actionName: string, actionOptions: Partial<ActionOptions>) => ResourceAction;
+	batchActions?: ResourceAction[];
+	menuActions?: ResourceAction[];
+	columns?: TableColumn[];
+	filters?: ComputedRef<FilterGroup[]>;
+	fields?: FormField[];
+	panels?: ActionPanel[];
+	routes?: ListControlsRoutes;
+}