quasar-ui-danx 0.4.37 → 0.4.40

package/package.json

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

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

@@ -6,9 +6,8 @@
     @drop.prevent="onDrop"
   >
     <FieldLabel
-      :field="field"
+      v-if="label"
       :label="label"
-      :show-name="showName"
     />
 
     <input

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

@@ -0,0 +1,158 @@
+<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"
+      :class="selectClass"
+      :show-icon="selectIcon || DefaultSelectIcon"
+      class="mr-2"
+    >
+      <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>
+              <ActionButton
+                v-if="deletable"
+                type="trash"
+                class="ml-4 mr-2"
+                @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
+                  :class="createClass"
+                  :loading="loading"
+                  @click="$emit('create')"
+                >
+                  <CreateIcon
+                    class="w-3"
+                    :class="createText ? 'mr-2' : ''"
+                  />
+                  {{ createText }}
+                </QBtn>
+              </div>
+            </template>
+          </div>
+        </QMenu>
+      </template>
+    </ShowHideButton>
+
+    <div :class="labelClass">
+      <template v-if="selected">
+        <EditableDiv
+          v-if="nameEditable"
+          :model-value="selected.name"
+          color="slate-600"
+          @update:model-value="name => $emit('update', {name})"
+        />
+        <template v-else>
+          {{ selected.name }}
+        </template>
+      </template>
+      <template v-else>
+        <slot name="no-selection">
+          {{ placeholder }}
+        </slot>
+      </template>
+    </div>
+
+    <ShowHideButton
+      v-if="editable && selected"
+      v-model="editing"
+      :label="editText"
+      :class="editClass"
+      class="opacity-0 group-hover:opacity-100 transition-all"
+      :show-icon="EditIcon"
+      :hide-icon="DoneEditingIcon"
+    />
+
+    <QBtn
+      v-if="clearable && selected"
+      :label="clearText"
+      :class="clearClass"
+      class="opacity-0 group-hover:opacity-100 transition-all"
+      @click="selected = null"
+    >
+      <ClearIcon class="w-4" />
+    </QBtn>
+  </div>
+</template>
+<script setup lang="ts">
+import {
+	FaSolidCheck as DoneEditingIcon,
+	FaSolidCircleXmark as ClearIcon,
+	FaSolidListCheck as DefaultSelectIcon,
+	FaSolidPencil as EditIcon,
+	FaSolidPlus as CreateIcon
+} from "danx-icon";
+import { ref } from "vue";
+import { ActionTargetItem } from "../../../../types";
+import { ShowHideButton } from "../../../Utility/Buttons";
+import ActionButton from "../../../Utility/Buttons/ActionButton";
+import EditableDiv from "./EditableDiv";
+
+defineEmits(["create", "update", "delete"]);
+const selected = defineModel<ActionTargetItem | null>("selected");
+const editing = defineModel<boolean>("editing");
+withDefaults(defineProps<{
+	options: ActionTargetItem[];
+	showEdit?: boolean;
+	loading?: boolean;
+	selectText?: string;
+	createText?: string;
+	editText?: string;
+	clearText?: string;
+	placeholder?: string;
+	selectClass?: string;
+	createClass?: string;
+	editClass?: string;
+	clearClass?: string;
+	labelClass?: string;
+	selectIcon?: object | string;
+	selectable?: boolean;
+	creatable?: boolean;
+	editable?: boolean;
+	deletable?: boolean;
+	nameEditable?: boolean;
+	clearable?: boolean;
+	disable?: boolean;
+}>(), {
+	selectText: "",
+	createText: "",
+	editText: "",
+	clearText: "",
+	placeholder: "(No selection)",
+	selectClass: "bg-sky-800",
+	createClass: "bg-green-900",
+	editClass: "",
+	clearClass: "rounded-full",
+	labelClass: "text-slate-600",
+	selectIcon: null
+});
+
+const isSelecting = ref(false);
+</script>

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

@@ -30,6 +30,7 @@
         :model-value="modelValue"
         :maxlength="allowOverMax ? undefined : maxLength"
         :debounce="debounce"
+        :loading="loading"
         @keydown.enter="$emit('submit')"
         @update:model-value="$emit('update:model-value', $event)"
       >

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

@@ -19,6 +19,7 @@ export { default as NumberField } from "./NumberField.vue";
 export { default as NumberRangeField } from "./NumberRangeField.vue";
 export { default as SelectDrawer } from "./SelectDrawer.vue";
 export { default as SelectField } from "./SelectField.vue";
+export { default as SelectionMenuField } from "./SelectionMenuField.vue";
 export { default as SelectOrCreateField } from "./SelectOrCreateField.vue";
 export { default as SelectWithChildrenField } from "./SelectWithChildrenField.vue";
 export { default as SingleFileField } from "./SingleFileField.vue";

package/src/components/DragAndDrop/ListItemDraggable.vue

@@ -28,10 +28,10 @@
   </div>
 </template>
 <script setup lang="ts">
-import { DropZoneResolver } from "src/components/DragAndDrop/dragAndDrop";
 import { computed, watch } from "vue";
 import { DragHandleDotsIcon as DragHandleIcon } from "../../svg";
 import { SvgImg } from "../Utility";
+import { DropZoneResolver } from "./dragAndDrop";
 import { ListDragAndDrop } from "./listDragAndDrop";
 
 const emit = defineEmits(["position", "update:list-items", "drop-zone"]);

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

@@ -0,0 +1,163 @@
+<template>
+  <QBtn
+    :loading="isSaving"
+    class="shadow-none"
+    :class="colorClass"
+    @click="onAction"
+  >
+    <div class="flex items-center flex-nowrap">
+      <component
+        :is="icon || typeOptions.icon"
+        class="transition-all"
+        :class="iconClass + ' ' + typeOptions.iconClass"
+      />
+      <slot>
+        <div
+          v-if="label"
+          class="ml-2"
+        >
+          {{ label }}
+        </div>
+      </slot>
+    </div>
+    <QTooltip
+      v-if="tooltip"
+      class="whitespace-nowrap"
+    >
+      {{ tooltip }}
+    </QTooltip>
+  </QBtn>
+</template>
+<script setup lang="ts">
+import {
+	FaSolidArrowsRotate as RefreshIcon,
+	FaSolidPause as PauseIcon,
+	FaSolidPencil as EditIcon,
+	FaSolidPlay as PlayIcon,
+	FaSolidPlus as CreateIcon,
+	FaSolidStop as StopIcon,
+	FaSolidTrash as TrashIcon
+} from "danx-icon";
+import { computed } from "vue";
+import { ActionTarget, ResourceAction } from "../../../types";
+
+export interface ActionButtonProps {
+	type?: "trash" | "trash-red" | "create" | "edit" | "play" | "stop" | "pause" | "refresh";
+	color?: "red" | "blue" | "sky" | "green" | "green-invert" | "lime" | "white" | "gray";
+	icon?: object | string;
+	iconClass?: string;
+	label?: string;
+	tooltip?: string;
+	saving?: boolean;
+	action?: ResourceAction;
+	target?: ActionTarget;
+	input?: object;
+}
+
+const emit = defineEmits(["success", "error", "always"]);
+const props = withDefaults(defineProps<ActionButtonProps>(), {
+	type: null,
+	color: null,
+	icon: null,
+	iconClass: "",
+	label: "",
+	tooltip: "",
+	action: null,
+	target: null,
+	input: null
+});
+
+const colorClass = computed(() => {
+	switch (props.color) {
+		case "red":
+			return "text-red-900 bg-red-300 hover:bg-red-400";
+		case "lime":
+			return "text-lime-900 bg-lime-300 hover:bg-lime-400";
+		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";
+		case "blue":
+			return "text-blue-900 bg-blue-300 hover:bg-blue-400";
+		case "sky":
+			return "text-sky-900 bg-sky-300 hover:bg-sky-400";
+		case "white":
+			return "text-white bg-gray-800 hover:bg-gray-200";
+		case "gray":
+			return "text-slate-200 bg-slate-800 hover:bg-slate-900";
+		default:
+			return "text-slate-200 hover:bg-slate-800";
+	}
+});
+const typeOptions = computed(() => {
+	switch (props.type) {
+		case "trash":
+			return {
+				icon: TrashIcon,
+				iconClass: "w-3"
+			};
+		case "create":
+			return {
+				icon: CreateIcon,
+				iconClass: "w-3"
+			};
+		case "edit":
+			return {
+				icon: EditIcon,
+				iconClass: "w-3"
+			};
+		case "play":
+			return {
+				icon: PlayIcon,
+				iconClass: "w-3"
+			};
+		case "stop":
+			return {
+				icon: StopIcon,
+				iconClass: "w-3"
+			};
+		case "pause":
+			return {
+				icon: PauseIcon,
+				iconClass: "w-3"
+			};
+		case "refresh":
+			return {
+				icon: RefreshIcon,
+				iconClass: "w-4"
+			};
+		default:
+			return {
+				icon: EditIcon,
+				iconClass: "w-3"
+			};
+	}
+});
+
+const isSaving = computed(() => {
+	if (props.saving) return true;
+	if (props.target) {
+		if (Array.isArray(props.target)) {
+			return props.target.some((t) => t.isSaving);
+		}
+		return props.target.isSaving;
+	}
+	if (props.action) {
+		return props.action.isApplying;
+	}
+	return false;
+});
+
+function onAction() {
+	if (props.action) {
+		props.action.trigger(props.target, props.input).then(async (response) => {
+			emit("success", typeof response.json === "function" ? await response.json() : response);
+		}).catch((e) => {
+			console.error(`Action emitted an error: ${props.action.name}`, e, props.target);
+			emit("error", e);
+		}).finally(() => {
+			emit("always");
+		});
+	}
+}
+</script>

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

@@ -10,6 +10,11 @@
           :is="isShowing ? (hideIcon || DefaultHideIcon) : (showIcon || DefaultShowIcon)"
           :class="iconClass"
         />
+      </slot>
+      <slot
+        name="label"
+        :is-showing="isShowing"
+      >
         <div
           v-if="label"
           :class="labelClass"

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

@@ -4,6 +4,7 @@
     v-bind="$props"
     @close="onClose"
   >
+    <slot />
     <template
       v-if="$slots.title"
       #title

package/src/helpers/actions.ts

@@ -308,6 +308,10 @@ async function onConfirmAction(action: ActionOptions, target: ActionTarget, inpu
 
 export function withDefaultActions(label: string, listController?: ListController): ActionOptions[] {
 	return [
+		{
+			name: "quick-create",
+			alias: "create"
+		},
 		{
 			name: "create",
 			label: "Create " + label,
@@ -339,6 +343,10 @@ export function withDefaultActions(label: string, listController?: ListControlle
 			icon: EditIcon,
 			onAction: (action, target) => listController?.activatePanel(target, "edit")
 		},
+		{
+			name: "quick-delete",
+			alias: "delete"
+		},
 		{
 			name: "delete",
 			label: "Delete",

package/src/helpers/formats.ts

@@ -180,16 +180,27 @@ export function fSecondsToTime(second: number) {
 	return (hours ? hours + ":" : "") + time.toFormat("mm:ss");
 }
 
-export function fElapsedTime(start: string, end?: string) {
+/**
+ *  Formats a number of seconds into a duration string in 00h 00m 00s format
+ */
+export function fSecondsToDuration(seconds: number) {
+	const hours = Math.floor(seconds / 3600);
+	const minutes = Math.floor((seconds % 3600) / 60);
+	const secs = Math.floor(seconds % 60);
+	return `${hours ? hours + "h " : ""}${minutes ? minutes + "m " : ""}${secs}s`;
+}
+
+/**
+ *  Formats a duration between two date strings in 00h 00m 00s format
+ */
+export function fDuration(start: string, end?: string) {
 	const endDateTime = end ? parseDateTime(end) : DateTime.now();
 	const diff = endDateTime?.diff(parseDateTime(start) || DateTime.now(), ["hours", "minutes", "seconds"]);
 	if (!diff?.isValid) {
 		return "-";
 	}
-	const hours = Math.floor(diff.hours);
-	const minutes = Math.floor(diff.minutes);
-	const seconds = Math.floor(diff.seconds);
-	return `${hours ? hours + "h " : ""}${minutes ? minutes + "m " : ""}${seconds}s`;
+	const totalSeconds = diff.as("seconds");
+	return fSecondsToDuration(totalSeconds);
 }
 
 /**

package/src/helpers/routes.ts

@@ -5,27 +5,31 @@ import { request } from "./request";
 
 export function useActionRoutes(baseUrl: string, extend?: object): ListControlsRoutes {
 	return {
-		list(pager?) {
-			return request.post(`${baseUrl}/list`, pager);
+		list(pager?, options?) {
+			return request.post(`${baseUrl}/list`, pager, options);
 		},
-		summary(filter) {
-			return request.post(`${baseUrl}/summary`, { filter });
+		summary(filter, options?) {
+			return request.post(`${baseUrl}/summary`, { filter }, options);
 		},
-		details(target, fields) {
-			return request.get(`${baseUrl}/${target.id}/details`, { params: { fields } });
+		details(target, fields, options?) {
+			options = options || {};
+			fields && (options.params = { fields });
+			return request.get(`${baseUrl}/${target.id}/details`, options);
 		},
-		async detailsAndStore(target, fields) {
-			const item = await request.get(`${baseUrl}/${target.id}/details`, { params: { fields } });
+		async detailsAndStore(target, fields, options?) {
+			options = options || {};
+			fields && (options.params = { fields });
+			const item = await request.get(`${baseUrl}/${target.id}/details`, options);
 			return storeObject(item);
 		},
-		fieldOptions() {
-			return request.get(`${baseUrl}/field-options`);
+		fieldOptions(options?) {
+			return request.get(`${baseUrl}/field-options`, options);
 		},
-		applyAction(action, target, data) {
-			return request.post(`${baseUrl}/${target ? target.id : "new"}/apply-action`, { action, data });
+		applyAction(action, target, data, options?) {
+			return request.post(`${baseUrl}/${target ? target.id : "new"}/apply-action`, { action, data }, options);
 		},
-		batchAction(action, targets, data) {
-			return request.post(`${baseUrl}/batch-action`, { action, filter: { id: targets.map(r => r.id) }, data });
+		batchAction(action, targets, data, options?) {
+			return request.post(`${baseUrl}/batch-action`, { action, filter: { id: targets.map(r => r.id) }, data }, options);
 		},
 		export(filter, name) {
 			return downloadFile(`${baseUrl}/export`, name || "export.csv", { filter });

package/src/types/controls.d.ts

@@ -1,3 +1,4 @@
+import { RequestCallOptions } from "src/types/requests";
 import { ActionOptions, ActionTargetItem, ResourceAction } from "./actions";
 import { AnyObject, ComputedRef, LabelValueItem, Ref } from "./shared";
 
@@ -20,21 +21,21 @@ export interface FilterGroup {
 }
 
 export interface ListControlsRoutes<T = ActionTargetItem> {
-	list(pager?: ListControlsPagination): Promise<PagedItems>;
+	list(pager?: ListControlsPagination, options?: RequestCallOptions): Promise<PagedItems>;
 
-	summary?(filter?: ListControlsFilter): Promise<AnyObject>;
+	summary?(filter?: ListControlsFilter, options?: RequestCallOptions): Promise<AnyObject>;
 
-	details?(target: T, fields: ControlsFieldsList): Promise<T>;
+	details?(target: T, fields?: ControlsFieldsList, options?: RequestCallOptions): Promise<T>;
 
-	detailsAndStore?(target: T, fields: ControlsFieldsList): Promise<T>;
+	detailsAndStore?(target: T, fields?: ControlsFieldsList, options?: RequestCallOptions): Promise<T>;
 
-	more?(pager: ListControlsPagination): Promise<T[]>;
+	more?(pager: ListControlsPagination, options?: RequestCallOptions): Promise<T[]>;
 
-	fieldOptions?(filter?: AnyObject): Promise<AnyObject>;
+	fieldOptions?(filter?: AnyObject, options?: RequestCallOptions): Promise<AnyObject>;
 
-	applyAction?(action: string | ResourceAction | ActionOptions, target: T | null, data?: object): Promise<AnyObject>;
+	applyAction?(action: string | ResourceAction | ActionOptions, target: T | null, data?: object, options?: RequestCallOptions): Promise<AnyObject>;
 
-	batchAction?(action: string | ResourceAction | ActionOptions, targets: T[], data: object): Promise<AnyObject>;
+	batchAction?(action: string | ResourceAction | ActionOptions, targets: T[], data: object, options?: RequestCallOptions): Promise<AnyObject>;
 
 	export?(filter?: ListControlsFilter, name?: string): Promise<void>;
 }

package/src/types/fields.d.ts

@@ -19,6 +19,7 @@ export interface TextFieldProps {
 	disabled?: boolean;
 	readonly?: boolean;
 	debounce?: string | number;
+	loading?: boolean;
 }
 
 export interface NumberFieldProps extends TextFieldProps {